/* ==========================================================================
   AREVIA AI stylesheet
   A drafting-table system: flat colour, hairline rules, square corners,
   one accent (Arev amber). No gradients, no shadows, no rounded boxes.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
    --ink: #0b0d10;
    --ink-2: #111419;
    --ink-3: #1a1e25;
    --ink-4: #252a33;
    --ink-line: #2b313a;

    --paper: #ffffff;
    --paper-2: #f2f3f1;
    --paper-3: #e6e8e5;
    --rule: #d8dbd8;
    --rule-2: #b9bdb9;

    --text: #0b0d10;
    --text-2: #444b53;
    --text-3: #676e77;

    --on-ink: #eef0f2;
    --on-ink-2: #a9b0b8;
    --on-ink-3: #767e88;

    --arev: #f4a516;
    --arev-ink: #7a4d00;

    /* Flag of Armenia: red, blue, apricot */
    --am-red: #d90012;
    --am-blue: #0033a0;
    --am-apricot: #f2a800;
    --go: #43c07f;
    --go-ink: #17704a;
    --error: #b3261e;

    --font-sans: "Noto Sans", "Noto Sans Armenian", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Noto Sans Armenian", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --wrap: 1376px;
    --gutter: 32px;
    --gap: 24px;
    --topbar-h: 36px;
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .1, 1);
}

@media (max-width: 720px) {
    :root {
        --gutter: 20px;
        --gap: 16px;
        --header-h: 64px;
        /* 40px language links (the only locale control on phones) */
        --topbar-h: 40px;
    }
}

@media (max-width: 380px) {
    :root {
        --gutter: 16px;
    }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The one offset for every anchor jump (sticky masthead + 16px); a
   scroll-margin-top on a target would add to it. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html:lang(hy) body {
    line-height: 1.66;
}

body.menu-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

p a,
li a,
dd a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--rule-2);
}

p a:hover,
li a:hover,
dd a:hover {
    text-decoration-color: var(--arev);
}

::selection {
    background: var(--arev);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--arev);
    outline-offset: 3px;
}

main:focus {
    outline: none;
}

code,
kbd,
pre {
    font-family: var(--font-mono);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Word groups that must not split on narrow screens (street and house
   number in the address); desktop line breaks stay as they were. */
@media (max-width: 1239px) {
    .nobr {
        white-space: nowrap;
    }
}

/* Parked fully above the page: the hy label wraps to two lines on phones */
.skip-link {
    position: absolute;
    left: 16px;
    bottom: 100%;
    z-index: 100;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    background: var(--arev);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
    bottom: auto;
}

/* ---------- Layout ---------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.section {
    padding-block: clamp(56px, 9vw, 136px);
}

.section--alt {
    background: var(--paper-2);
}

.section--ink {
    background: var(--ink);
    color: var(--on-ink);
}

.section--tight {
    padding-block: clamp(40px, 5vw, 72px);
}

.section--flush-top {
    padding-top: 0;
}

.section__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 40px;
    margin-top: 36px;
}

.section__foot p {
    margin: 0;
    color: var(--text-2);
    max-width: 52em;
}

.section__foot--dark {
    justify-content: flex-end;
}

/* Below desktop the dark foot behaves like the light one: a link that shares
   the row with the text sits flush right, one that wraps starts on the gutter. */
@media (max-width: 1239px) {
    .section__foot--dark {
        justify-content: space-between;
    }
}

/* Model sheet without a request example: the "Other models" section follows
   another white section, so their paddings would stack (views/pages/model.php). */
@media (max-width: 1239px) {
    .section--joined {
        padding-top: 0;
    }
}

/* Architectural column guides behind heroes */
.guides {
    position: absolute;
    inset: 0;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
}

.guides span {
    border-left: 1px solid var(--rule);
    opacity: .45;
}

.guides::after {
    content: "";
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    opacity: .45;
}

/* Phones and portrait tablets: up to 900px the copy spans the whole text
   column, so the inner guides (72-184px apart) cross every line of the
   headline and the lead; only the outer frame stays. */
@media (max-width: 900px) {
    .guides span:not(:first-child),
    .guides::after {
        border-left-color: transparent;
    }
}

/* Up to 900px the copy spans the full text column, so the frame on the
   gutter ran along the first and last letter of every line. It moves out
   to the middle of the gutter and borders the copy like a sheet margin. */
@media (max-width: 900px) {
    .guides {
        padding-inline: calc(var(--gutter) / 2);
    }
}

/* ---------- Typography ---------- */

.display,
.h1,
.h2 {
    font-weight: 700;
    font-stretch: 72%;
    letter-spacing: -.005em;
    line-height: 1;
    text-wrap: balance;
}

.display {
    font-size: clamp(2.75rem, 1rem + 5.4vw, 6.75rem);
    line-height: .96;
}

.h1 {
    font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem);
}

.h2 {
    font-size: clamp(2rem, 1.25rem + 2.7vw, 3.875rem);
    line-height: 1.02;
}

/* Armenian words run longer: slightly smaller display sizes keep headlines to 3–4 lines. */
html:lang(hy) .display,
html:lang(hy) .h1,
html:lang(hy) .h2 {
    line-height: 1.04;
}

html:lang(hy) .display {
    font-size: clamp(2.375rem, .9rem + 4.7vw, 5.875rem);
}

html:lang(hy) .h1 {
    font-size: clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem);
}

html:lang(hy) .h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem);
}

/* Narrow screens. Heading sizes follow the text column (100vw minus both
   gutters) so the longest unbreakable run of each language fits on one line:
   about 15 characters for .h1, more for .h1--long titles (partials/page-hero.php).
   The base clamp() stays the upper bound, so 561px and wider are unchanged. */
@media (max-width: 1239px) {
    .display,
    .h1,
    .h2,
    .lead,
    .eyebrow {
        overflow-wrap: break-word;
    }
}

@media (max-width: 560px) {
    .display {
        font-size: min(clamp(2.75rem, 1rem + 5.4vw, 6.75rem), calc((100vw - 2 * var(--gutter)) / 6.8));
    }

    /* Stacked short lines need more air than .96: in Russian the comma of
       "интеллект," touched the capitals of the next line. */
    .display,
    html:lang(hy) .display {
        line-height: 1.04;
    }

    .h1 {
        font-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 8.1));
    }

    /* Third term: never above 87% of the page title (--h1-size, below). */
    .h2 {
        font-size: min(clamp(2rem, 1.25rem + 2.7vw, 3.875rem), calc((100vw - 2 * var(--gutter)) / 8.4), calc(var(--h1-size, 100vw) * .87));
    }

    /* Russian section titles end in one bound run (Typograph: preposition and
       last word), up to 8.7em ("мы ставим подпись."): at /8.4 it split inside
       the word below 320px ("подпис / ь."). /9 leaves 32px from 320px up. */
    html:lang(ru) .h2 {
        font-size: min(clamp(2rem, 1.25rem + 2.7vw, 3.875rem), calc((100vw - 2 * var(--gutter)) / 9), calc(var(--h1-size, 100vw) * .87));
    }

    /* The Russian home title's last run "для всего мира." is 6.8em: at /6.8
       it ended 1px from the column edge. Keep --h1-size (below) in step. */
    html:lang(ru) .hero .display {
        font-size: min(clamp(2.75rem, 1rem + 5.4vw, 6.75rem), calc((100vw - 2 * var(--gutter)) / 7.1));
    }

    html:lang(hy) .display {
        font-size: min(clamp(2.375rem, .9rem + 4.7vw, 5.875rem), calc((100vw - 2 * var(--gutter)) / 8.1));
    }

    html:lang(hy) .h1 {
        font-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), calc((100vw - 2 * var(--gutter)) / 8.1));
    }

    /* The 28px floor is too large below 320px: "ԱԲ ծառայություններ՝" split after "ԱԲ". */
    html:lang(hy) .h2 {
        font-size: min(clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem), calc((100vw - 2 * var(--gutter)) / 10), calc(var(--h1-size, 100vw) * .87));
    }

    .h1.h1--long {
        font-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 10.1));
    }

    html:lang(hy) .h1.h1--long {
        font-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), calc((100vw - 2 * var(--gutter)) / 10.1));
    }

    /* Russian page titles bind prepositions to the next word (Typograph), so
       their runs are long: at the 15-character size they stepped down one
       word per line ("Готовые / ИИ-сервисы / и платформа / ..."). */
    html:lang(ru) .phero .h1:not(.msheet__name) {
        font-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 10.1));
    }

    html:lang(ru) .phero .h1.h1--long {
        font-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 11));
    }

    /* /ru/solutions: the long run "а не для презентаций." fits at /9.4, so
       /11 left the title (22.5px at 280px) barely above its lead. */
    html:lang(ru) .page-solutions .phero .h1.h1--long {
        font-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 9.8));
    }

    /* hy /solutions: the closing run "ոչ թե շնորհանդեսների։" (10.17em) fits
       one line at /10.3; at /10.1 "ոչ թե" was left at the end of line two. */
    html:lang(hy) .page-solutions .phero .h1.h1--long {
        font-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), calc((100vw - 2 * var(--gutter)) / 10.3));
    }

    /* Heading scale on phones. The title sizes above follow the column, so a
       .h1--long or Russian page title could end up smaller than the section
       titles, the CTA title and the card names under it, whose floors are
       fixed. --h1-size repeats the page title's size (keep it in step with
       the rules above); headings below it take at most 87% of it
       (.h2, .cta__title, .board__title, .sector__name, .pitem__name,
       .mcard__name, .form-title), card titles 78% with an 18px floor
       (.flow__title, .line__name, .commit__title, .prod__name; 70% for
       .notice__title (87% for the dark one in /ru) and .steps__title,
       set in the section titles' own face and weight) and a
       worded price 95% (.plan__price--text). Numerals (prices, years,
       figures) stay display figures. Model sheets, whose name is set far
       larger, have no cap: the var() fallbacks leave the sizes as they are. */
    html:has(.phero .h1:not(.msheet__name)),
    html:has(.error__main .h1) {
        --h1-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 8.1));
    }

    html:lang(hy):has(.phero .h1:not(.msheet__name)),
    html:lang(hy):has(.error__main .h1) {
        --h1-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), calc((100vw - 2 * var(--gutter)) / 8.1));
    }

    html:lang(ru):has(.phero .h1:not(.msheet__name)),
    html:has(.phero .h1.h1--long) {
        --h1-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 10.1));
    }

    html:lang(hy):has(.phero .h1.h1--long) {
        --h1-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), calc((100vw - 2 * var(--gutter)) / 10.1));
    }

    html:lang(ru):has(.phero .h1.h1--long) {
        --h1-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 11));
    }

    html:lang(ru):has(.page-solutions .phero .h1.h1--long) {
        --h1-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem), calc((100vw - 2 * var(--gutter)) / 9.8));
    }

    html:lang(hy):has(.page-solutions .phero .h1.h1--long) {
        --h1-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), calc((100vw - 2 * var(--gutter)) / 10.3));
    }

    html:has(.hero .display) {
        --h1-size: min(clamp(2.75rem, 1rem + 5.4vw, 6.75rem), calc((100vw - 2 * var(--gutter)) / 6.8));
    }

    html:lang(hy):has(.hero .display) {
        --h1-size: min(clamp(2.375rem, .9rem + 4.7vw, 5.875rem), calc((100vw - 2 * var(--gutter)) / 8.1));
    }

    html:lang(ru):has(.hero .display) {
        --h1-size: min(clamp(2.75rem, 1rem + 5.4vw, 6.75rem), calc((100vw - 2 * var(--gutter)) / 7.1));
    }
}

.h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-stretch: 82%;
    line-height: 1.18;
}

.h4 {
    margin: 0 0 12px;
    font-size: 1.0625rem;
    font-weight: 700;
    font-stretch: 87.5%;
}

.lead {
    font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
    line-height: 1.55;
    color: var(--text-2);
}

.section--ink .lead {
    color: var(--on-ink-2);
}

/* Smallest phones: the lead at the body size instead of its 18px floor,
   which ran page-head leads to 14-18 lines in a 248-288px column. */
@media (max-width: 380px) {
    .lead {
        font-size: 1.0625rem;
        line-height: 1.55;
    }
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .12em;
    color: var(--text-2);
}

.eyebrow--light {
    color: var(--on-ink-2);
}

@media (max-width: 560px) {
    .eyebrow {
        align-items: flex-start;
        letter-spacing: .08em;
    }

    /* Keep the square or flag on the first line when the label wraps. */
    .eyebrow > .sq,
    .eyebrow > .flag {
        margin-top: 3px;
    }
}

.sq {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--arev);
}

mark.hl {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--arev);
    text-decoration-thickness: .11em;
    text-underline-offset: .1em;
    text-decoration-skip-ink: none;
}

.mono {
    font-family: var(--font-mono);
}

.num,
.tabular {
    font-variant-numeric: tabular-nums;
}

.muted {
    color: var(--text-3);
}

/* ---------- Buttons & links ---------- */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.btn {
    --bg: var(--ink);
    --fg: var(--paper);
    --bd: var(--ink);
    --sep: rgba(255, 255, 255, .24);
    display: inline-flex;
    align-items: stretch;
    min-height: 54px;
    border: 1px solid var(--bd);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    font-stretch: 87.5%;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn__label {
    display: flex;
    align-items: center;
    padding: 12px 22px;
}

.btn__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 54px;
    border-left: 1px solid var(--sep);
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn__icon .icon {
    width: 20px;
    height: 20px;
    transition: transform .3s var(--ease);
}

.btn:hover .btn__icon {
    background: var(--arev);
    color: var(--ink);
}

.btn:hover .btn__icon .icon {
    transform: translateX(3px);
}

.btn--line {
    --bg: transparent;
    --fg: var(--ink);
    --sep: var(--ink);
}

.btn--line:hover {
    --bg: var(--ink);
    --fg: var(--paper);
    --sep: rgba(255, 255, 255, .24);
}

.btn--arev {
    --bg: var(--arev);
    --fg: var(--ink);
    --bd: var(--arev);
    --sep: rgba(11, 13, 16, .22);
}

.btn--arev:hover .btn__icon {
    background: var(--ink);
    color: var(--arev);
}

.btn--light {
    --bg: transparent;
    --fg: var(--on-ink);
    --bd: var(--on-ink-3);
    --sep: var(--on-ink-3);
}

.btn--light:hover {
    --bd: var(--on-ink);
}

.btn--sm {
    min-height: 42px;
    font-size: 14px;
}

.btn--sm .btn__label {
    padding: 8px 14px;
}

.btn--sm .btn__icon {
    width: 42px;
}

.btn--sm .btn__icon .icon {
    width: 18px;
    height: 18px;
}

/* A label that wraps splits into even lines instead of leaving one word behind. */
@media (max-width: 1239px) {
    .btn__label {
        text-wrap: balance;
    }
}

@media (max-width: 400px) {
    .btn__label {
        padding-inline: 16px;
    }
}

/* Smallest phones: a slimmer arrow cell and label padding keep a full-width
   "Պատվիրել ցուցադրություն" (194px) on one line from 300px up. */
@media (max-width: 340px) {
    .btn__icon {
        width: 44px;
    }

    .btn__label {
        padding-inline: 12px;
    }
}

/* Below 300px the hy demo label (194px) still broke into "Պատվիրել /
   ցուցադրություն" in the hero, the menu and the CTA band: one size down,
   untracked, beside a 40px arrow cell it takes about 178px of 182px. */
@media (max-width: 299px) {
    html:lang(hy) .btn {
        font-size: 14px;
        letter-spacing: 0;
    }

    html:lang(hy) .btn__icon {
        width: 40px;
    }
}

/* Phones: buttons in an action row fill it (label left, arrow right)
   instead of two ragged widths. */
@media (max-width: 640px) {
    .actions .btn {
        flex: 1 1 auto;
    }

    .actions .btn__label {
        flex: 1;
    }
}

/* Small phones: one button per row, all of the same height even when one
   label wraps to two lines. */
@media (max-width: 480px) {
    .actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
    }

    .split__main > .btn {
        display: flex;
        width: 100%;
    }

    .split__main > .btn .btn__label {
        flex: 1;
    }
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    color: var(--ink);
    font-weight: 600;
    font-stretch: 87.5%;
    text-decoration: none;
    transition: border-color .2s;
}

.link-arrow .icon {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform .3s var(--ease);
}

.link-arrow:hover {
    border-bottom-color: var(--arev);
}

.link-arrow:hover .icon {
    transform: translateX(4px);
}

.link-arrow--light {
    color: var(--on-ink);
}

/* Phones: a section-end link is a full-width row with the arrow at the right
   edge. An inline-flex link whose label wraps stretches to the full width
   anyway, which detached its arrow from the text on some links only. */
@media (max-width: 480px) {
    .section__foot .link-arrow,
    .board__foot .link-arrow,
    .pitem__body > .link-arrow,
    .dev__more {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        min-height: 44px;
    }
}

/* "Պատվիրել ցուցադրություն" in the service rows: one line down to 280px. */
@media (max-width: 300px) {
    .pitem__body > .link-arrow {
        gap: 8px;
        font-size: 16px;
    }
}

/* Touch tablets: the per-card demo link and the section-end links were 33px
   tall (44px rows at 480px and below). A 42px hit area; the text and its
   rule do not move. */
@media (min-width: 481px) and (max-width: 1239px) {
    .pitem__body > .link-arrow,
    .section__foot .link-arrow {
        position: relative;
    }

    .pitem__body > .link-arrow::after,
    .section__foot .link-arrow::after {
        content: "";
        position: absolute;
        inset: -8px 0 -1px;
    }
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border: 1px solid currentColor;
    color: var(--text-2);
    font: 500 11px/1.25 var(--font-mono);
    letter-spacing: .08em;
    white-space: nowrap;
}

.tag::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
}

.tag--ga,
.tag--aligned,
.tag--supported {
    color: var(--go-ink);
}

.tag--beta,
.tag--progress {
    color: var(--arev-ink);
}

.tag--planned {
    color: var(--text-3);
}

.tag--ink {
    color: var(--on-ink-2);
}

/* Lists with square check marks */
.ticks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticks li {
    position: relative;
    padding: 12px 0 12px 30px;
    border-top: 1px solid var(--rule);
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 1.05em;
    width: 12px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.ticks--dark li {
    border-top-color: var(--ink-line);
}

.ticks--dark li::before {
    color: var(--arev);
}

@media (max-width: 360px) {
    .ticks li {
        padding-left: 26px;
        overflow-wrap: break-word;
    }

    .split__half .ticks {
        font-size: 16px;
    }
}

/* Short lists written "A · B · C" (product audiences, home facts): one span
   per item and the dot in the gap before it (views: products.php, home.php,
   services.php). An item moves to the next line whole, and a wrapped line
   starts with an item: the dot before it falls outside the clipped left
   edge. --sep is the width of " · " in the list's face, so a list on one
   line looks as before. */
.sepl {
    --sep: .8em;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sep);
    overflow-x: clip;
}

.sepl > span {
    position: relative;
}

.sepl > span::before {
    content: "·";
    position: absolute;
    right: 100%;
    width: var(--sep);
    text-align: center;
}

/* ---------- National identity: flag tricolour ---------- */

.flagband {
    height: 6px;
    border-top: 2px solid var(--am-red);
    border-bottom: 2px solid var(--am-apricot);
    background: var(--am-blue);
}

.flag {
    display: inline-block;
    flex: none;
    width: 15px;
    height: 10px;
    border-top: 3.33px solid var(--am-red);
    border-bottom: 3.33px solid var(--am-apricot);
    background: var(--am-blue);
}

.flag--lg {
    width: 24px;
    height: 16px;
    border-top-width: 5.33px;
    border-bottom-width: 5.33px;
}

.stamp {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 14px 9px 10px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .14em;
}

.stamp--light {
    margin-top: 28px;
    border-color: var(--on-ink-3);
    color: var(--on-ink);
}

/* hy and ru labels wrap to two lines on phones. Full width, so the stamp
   lines up with the inputs and rules of its column at every phone width. */
@media (max-width: 480px) {
    .stamp {
        display: flex;
        width: 100%;
        line-height: 1.35;
    }

    /* In a text column (home, /company) the outlined stamp stretched to
       350-440px around 170-260px of label and read as an empty input. It
       stays a badge, as from 481px up; a long label wraps inside it. */
    .heritage__main > .stamp,
    .split__side > .stamp {
        display: inline-flex;
        width: auto;
        max-width: 100%;
    }
}

/* ---------- Top bar ---------- */

.topbar {
    background: var(--ink);
    color: var(--on-ink-2);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .03em;
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--topbar-h);
}

.topbar p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
}

.topbar a {
    color: var(--on-ink-2);
    text-decoration: none;
}

.topbar a:hover {
    color: var(--on-ink);
}

.topbar__sep {
    color: var(--on-ink-3);
}

.topbar__time {
    font-variant-numeric: tabular-nums;
}

.topbar__contact {
    margin-left: auto !important;
}

@media (max-width: 1240px) {
    /* Taller tap target on touch screens, same look */
    .topbar__contact a {
        padding-block: 12px;
    }
}

/* Touch tablets: the language and contact links fill the 36px bar; a 44px
   hit area, as on phones, without making the bar taller. ::before, because
   ::after draws the current-language rule. */
@media (min-width: 721px) and (max-width: 1239px) {
    .topbar__contact a {
        position: relative;
    }

    .topbar .lang__link::before,
    .topbar__contact a::before {
        content: "";
        position: absolute;
        inset: -4px 0;
    }
}

@media (max-width: 820px) {
    /* Tablets: keep the e-mail, drop the phone */
    .topbar__contact .topbar__sep,
    .topbar__contact a[href^="tel:"] {
        display: none;
    }
}

@media (max-width: 640px) {
    .topbar__contact {
        display: none !important;
    }

    .topbar .lang {
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .topbar__inner {
        gap: 12px;
    }

    .topbar p {
        gap: 8px;
    }
}

@media (max-width: 440px) {
    .topbar__tz {
        display: none;
    }
}

@media (max-width: 380px) {
    /* Smallest phones: flag and Yerevan time only */
    .topbar__city,
    .topbar__place .topbar__sep {
        display: none;
    }

    .topbar__tz {
        display: inline;
    }
}

/* ---------- Language switcher ---------- */

.lang__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lang__link {
    position: relative;
    display: block;
    padding: 12px 9px;
    color: var(--on-ink-2);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .06em;
    text-decoration: none;
}

.lang__link:hover {
    color: var(--on-ink);
}

.lang__link[aria-current] {
    color: var(--on-ink);
}

.lang__link[aria-current]::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 5px;
    height: 2px;
    background: var(--arev);
}

.topbar .lang {
    margin-right: -9px;
}

/* Touch screens: 40px tall language links in a 40px top bar (--topbar-h). */
@media (max-width: 720px) {
    .topbar .lang__link {
        padding-block: 14px;
    }

    .topbar .lang__link[aria-current]::after {
        bottom: 7px;
    }
}

@media (max-width: 560px) {
    .topbar .lang {
        margin-right: -8px;
    }

    .topbar .lang__link {
        min-width: 40px;
        padding-inline: 8px;
        text-align: center;
    }

    .topbar .lang__link[aria-current]::after {
        left: 8px;
        right: 8px;
    }
}

.lang--menu .lang__list {
    border: 1px solid var(--ink);
}

.lang--menu .lang__link {
    padding: 14px 16px;
    color: var(--text-2);
}

.lang--menu .lang__link[aria-current] {
    background: var(--ink);
    color: var(--paper);
}

.lang--menu .lang__link[aria-current]::after {
    display: none;
}

/* ---------- Masthead ---------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transition: border-color .2s;
}

.masthead.is-scrolled {
    border-bottom-color: var(--ink);
}

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--header-h);
}

.brand {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}

.brand__logo {
    display: block;
    width: auto;
    height: 30px;
}

.brand__sun {
    fill: var(--arev);
}

.footer .brand__logo {
    height: 34px;
}

@media (max-width: 720px) {
    .brand__logo {
        height: 26px;
    }
}

.brand--light {
    color: var(--on-ink);
}

.nav {
    margin-left: auto;
}

.nav__list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 0 11px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    font-stretch: 87.5%;
    text-decoration: none;
    white-space: nowrap;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}

.nav__link:hover::after,
.nav__link.is-active::after {
    transform: scaleX(1);
}

.nav__link.is-active::after {
    background: var(--arev);
    height: 3px;
}

.nav__num,
.nav__extra,
.nav__cta {
    display: none;
}

.masthead__cta .btn__label {
    white-space: nowrap;
}

@media (min-width: 1241px) and (max-width: 1440px) {
    .nav__list {
        gap: 0;
    }

    .nav__link {
        padding: 0 8px;
        font-size: 14px;
    }

    .nav__link::after {
        left: 8px;
        right: 8px;
    }

    .masthead__inner {
        gap: 16px;
    }
}

.menu-toggle {
    display: none;
}

@media (max-width: 1240px) {
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        margin-left: 0;
        padding: 0 12px;
        border: 1px solid var(--ink);
        background: var(--paper);
        color: var(--ink);
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .08em;
        cursor: pointer;
    }

    .menu-toggle .icon {
        width: 20px;
        height: 20px;
    }

    .menu-toggle__icon {
        display: inline-flex;
    }

    .menu-toggle__icon--close,
    .menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
        display: none;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
        display: inline-flex;
    }

    .masthead__cta {
        margin-left: auto;
    }

    .menu-toggle {
        flex: none;
        white-space: nowrap;
    }

    /* While the menu is open the CTA steps aside, so the longer
       "close" label never wraps or pushes the button out */
    .menu-open .masthead__cta {
        display: none;
    }

    .menu-open .menu-toggle {
        margin-left: auto;
    }

    /* Flag band and top bar stay visible above the open menu */
    .flagband,
    .topbar {
        position: relative;
        z-index: 51;
    }

    .masthead.is-scrolled .nav {
        padding-top: calc(var(--header-h) + 24px);
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: -1;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: calc(var(--topbar-h) + var(--header-h) + 24px) var(--gutter) 32px;
        overflow-y: auto;
        background: var(--paper);
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s, visibility 0s .2s;
    }

    .nav.is-open {
        visibility: visible;
        opacity: 1;
        transition: opacity .2s;
    }

    .nav__list {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--ink);
    }

    .nav__link {
        align-items: baseline;
        gap: 16px;
        height: auto;
        padding: 14px 0;
        border-bottom: 1px solid var(--rule);
        font-size: clamp(28px, 6.5vw, 44px);
        font-weight: 700;
        font-stretch: 75%;
        line-height: 1.1;
        white-space: normal;
    }

    .nav__link::after {
        display: none;
    }

    .nav__label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* One unbroken bar: skip-ink cut it into dashes around the descenders
       of "կ գ ր տ յ թ", and an em offset keeps it below them at every size. */
    .nav__link.is-active .nav__label {
        text-decoration: underline;
        text-decoration-color: var(--arev);
        text-decoration-thickness: 3px;
        text-underline-offset: .3em;
        text-decoration-skip-ink: none;
    }

    .nav__num {
        display: inline;
        min-width: 2.2em;
        color: var(--text-3);
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .1em;
    }

    .nav__extra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 24px;
        margin-top: 20px;
    }

    .nav__small {
        padding-block: 8px;
        color: var(--text-2);
        font-size: 15px;
    }

    /* The language switch always opens its own row: as one more wrapping
       item it sat beside the phone number at some widths only. */
    .nav__extra .lang--menu {
        flex-basis: 100%;
        margin-top: 8px;
    }

    .nav__extra .lang--menu .lang__list {
        width: fit-content;
    }

    /* The demo request, which leaves the masthead on phones and while the
       menu is open: a button under the menu items. */
    .nav__cta {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 28px;
    }
}

/* Touch screens: the logo link gets a 44px hit area; the header keeps its height. */
@media (max-width: 1239px) {
    .masthead .brand {
        padding-block: 10px;
        margin-block: -10px;
    }
}

@media (max-width: 680px) {
    .masthead__cta {
        display: none;
    }

    .menu-toggle {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    /* Phones: square icon button; the label stays for screen readers */
    .masthead__inner {
        gap: 16px;
    }

    .menu-toggle {
        position: relative;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .menu-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* The menu demo button fills the row, like the other phone buttons. */
    .nav__cta {
        align-self: stretch;
    }

    .nav__cta .btn__label {
        flex: 1;
    }
}

@media (max-width: 340px) {
    .brand__logo {
        height: 24px;
    }

    .nav__link {
        gap: 12px;
        font-size: clamp(24px, 8.6vw, 28px);
    }

    .nav__num {
        min-width: 2em;
    }
}

/* Phones: the two page links on one row and the e-mail and phone on the
   next, the same at every width. As wrapping items they split 3 + 1 at
   360-414px (the phone number alone) and 2 + 1 + 1 at 280px. */
@media (max-width: 560px) {
    .nav__extra {
        display: grid;
        grid-template-columns: repeat(2, max-content);
    }

    .nav__extra .lang--menu {
        grid-column: 1 / -1;
    }
}

/* Below 320px the e-mail and phone (265px) no longer fit side by side:
   one link per row. */
@media (max-width: 319px) {
    .nav__extra {
        grid-template-columns: max-content;
    }
}

/* Landscape phones: item sizes follow the width (44px at 740px), so only two
   or three of seven items fit a 360px-high screen. Two columns, smaller type. */
@media (max-width: 1240px) and (max-height: 520px) {
    .nav {
        padding-bottom: 16px;
    }

    .nav__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap);
    }

    .nav__link {
        padding-block: 8px;
        font-size: 24px;
    }

    .nav__extra {
        margin-top: 12px;
    }

    .nav__cta {
        min-height: 44px;
        margin-top: 16px;
    }
}

/* Landscape tablets (1024 x 768): seven 44px items in one column put the
   demo button at the bottom edge and the links and language switch below
   the fold. Two columns, as on landscape phones, at the full item size. */
@media (min-width: 901px) and (max-width: 1240px) and (min-height: 521px) and (max-height: 900px) {
    .nav__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap);
    }
}

/* ---------- Home hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(40px, 6vw, 96px);
    border-bottom: 1px solid var(--rule);
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--gap);
    align-items: start;
}

.hero__head {
    grid-column: 1 / -1;
}

.hero__main {
    grid-column: 1 / span 7;
    padding-bottom: 56px;
}

.hero__aside {
    grid-column: 9 / -1;
    margin-top: 36px;
    padding-bottom: 56px;
}

.hero__title {
    margin: 28px 0 0;
    max-width: 16em;
}

.hero__subtitle {
    margin: 40px 0 0;
    font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
    font-weight: 600;
    font-stretch: 87.5%;
    line-height: 1.3;
}

.hero__lead {
    margin: 14px 0 0;
    max-width: 38em;
}

.hero__note {
    margin: 18px 0 0;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.55;
}

.hero .eyebrow,
.hero__title,
.hero__subtitle,
.hero__lead,
.hero .actions,
.hero__aside {
    animation: rise .9s var(--ease) both;
}

.hero__title {
    animation-delay: .06s;
}

.hero__subtitle {
    animation-delay: .14s;
}

.hero__lead {
    animation-delay: .2s;
}

.hero .actions {
    animation-delay: .26s;
}

.hero__aside {
    animation-delay: .3s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.facts {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--ink);
}

.facts__item {
    padding: 18px 20px 24px;
    border-left: 1px solid var(--rule);
}

.facts__item:first-child {
    padding-left: 0;
    border-left: 0;
}

.facts dt {
    color: var(--text-3);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.facts dd {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* Landscape tablets: text and sundial side by side as on desktop, the dial one
   column wider, instead of a 540px dial with an empty area beside it. */
@media (min-width: 901px) and (max-width: 1100px) {
    .hero__aside {
        grid-column: 8 / -1;
    }

    /* The two hy buttons (583px) do not fit side by side in the seven-column
       text column: stacked at one width instead of two ragged rows. */
    html:lang(hy) .hero .actions {
        display: grid;
        grid-template-columns: max-content;
    }

    html:lang(hy) .hero .actions .btn__label {
        flex: 1;
    }
}

@media (max-width: 900px) {
    .hero__main,
    .hero__aside {
        grid-column: 1 / -1;
    }

    .hero__main {
        padding-bottom: 8px;
    }

    .hero__aside {
        max-width: 560px;
        margin-top: 48px;
    }
}

@media (max-width: 1100px) {
    .facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .facts__item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .facts__item:nth-child(n + 3) {
        border-top: 1px solid var(--rule);
    }
}

@media (max-width: 520px) {
    .facts {
        grid-template-columns: 1fr;
    }

    .facts__item {
        padding-left: 0;
        border-left: 0;
    }

    .facts__item + .facts__item {
        border-top: 1px solid var(--rule);
    }
}

/* Tablets: sundial and its note side by side instead of a 560px dial with an empty right half. */
@media (min-width: 600px) and (max-width: 900px) {
    .hero__aside {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 0 32px;
        align-items: end;
        max-width: none;
    }

    .hero__note {
        margin: 0;
    }
}

/* Phones: a shorter lead brings the first button closer to the fold and
   keeps it lighter than the bold subtitle above it. */
@media (max-width: 420px) {
    .hero__lead {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* Phones: the eyebrow wraps anyway, so field and place take a line each and
   the " · " between them goes (it was left alone at the end of line one). */
@media (max-width: 480px) {
    .hero .eyebrow__sep {
        display: none;
    }

    .hero .eyebrow__part {
        display: block;
    }
}

/* 481-640: the two hy buttons (583px) do not fit side by side, and each
   stretched across the column on its own row. Stacked at one width, as at
   901-1100; 480px and below keep the full-width grid. */
@media (min-width: 481px) and (max-width: 640px) {
    html:lang(hy) .hero .actions {
        display: grid;
        grid-template-columns: max-content;
    }
}

/* ---------- Sundial ---------- */

.dial {
    margin: 0;
}

.dial__svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.dial__sector {
    fill: var(--paper);
    fill-opacity: 0;
    transition: fill-opacity .6s var(--ease);
}

.dial__sector.is-now {
    fill: var(--arev);
    fill-opacity: 1;
}

.dial__num {
    fill: var(--text-3);
    font-family: "Noto Sans Armenian", var(--font-sans);
    font-size: 12px;
    font-weight: 600;
}

.dial__num.is-now {
    fill: var(--ink);
}

.dial__line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
}

.dial__ticks {
    stroke: var(--rule-2);
    stroke-width: 1;
}

.dial__horizon {
    stroke: var(--ink);
    stroke-width: 2.5;
}

.dial__rock {
    fill: var(--paper-3);
    stroke: var(--ink);
    stroke-width: 1.25;
    stroke-linejoin: miter;
}

.dial__snow {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 1;
    stroke-linejoin: miter;
}

.dial__hand {
    transform-box: view-box;
    transform-origin: 180px 186px;
    transition: transform 1.2s var(--ease), opacity .4s;
}

.dial__hand line {
    stroke: var(--ink);
    stroke-width: 2;
}

.dial__sun {
    fill: var(--arev);
    stroke: var(--ink);
    stroke-width: 1.5;
}

.dial__hub {
    fill: var(--ink);
}

.dial.is-night .dial__hand {
    opacity: 0;
}

.dial.is-night .dial__sector.is-now {
    fill-opacity: 0;
}

.dial.is-night .dial__num.is-now {
    fill: var(--text-3);
}

.dial__caption {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
}

.dial__label {
    grid-column: 1 / -1;
    color: var(--text-3);
    font-size: 11px;
    letter-spacing: .12em;
}

.dial__time {
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dial__time small {
    margin-left: 8px;
    color: var(--text-3);
    font-size: 11px;
    letter-spacing: .06em;
}

.dial__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
    color: var(--text-3);
}

.dial__meta b {
    color: var(--text);
    font-weight: 600;
}

.dial__night {
    display: none;
    grid-column: 1 / -1;
    color: var(--text-2);
}

.dial.is-night .dial__night {
    display: block;
}

/* SVG units: 12 would render at about 8px on a 280px phone. */
@media (max-width: 480px) {
    .dial__num {
        font-size: 15px;
    }
}

/* Below 320px the hy sunrise and sunset lines no longer fit beside the time
   and broke into label over value, one or both. They move under the time as
   one row (as on tablets, .office__dial), each pair kept on one line. */
@media (max-width: 319px) {
    .dial__caption {
        grid-template-columns: minmax(0, 1fr);
    }

    .dial__meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: 2px 16px;
    }

    .dial__meta > span {
        white-space: nowrap;
    }
}

/* ---------- Split-flap board ---------- */

.board {
    padding-block: clamp(56px, 7vw, 96px);
    background: var(--ink);
    color: var(--on-ink);
}

.board__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: end;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ink-line);
}

.board__head .eyebrow {
    grid-column: 1 / span 3;
    align-self: start;
}

.board__title {
    grid-column: 4 / span 6;
    margin: 0;
    font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem);
    font-weight: 700;
    font-stretch: 72%;
    line-height: 1.02;
}

.board__meta {
    grid-column: 10 / -1;
    justify-self: end;
    display: flex;
    gap: 10px;
    margin: 0;
    color: var(--on-ink-2);
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

.board__sep {
    color: var(--on-ink-3);
}

.board__panel {
    --flap: clamp(15px, 1.25vw, 20px);
    margin-top: 26px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.board__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.board__row {
    display: flex;
    align-items: center;
    gap: calc(var(--flap) * 1.4);
    min-width: max-content;
    padding: 7px 0;
    color: inherit;
    text-decoration: none;
}

.board__row--head {
    padding: 0 0 10px;
    color: var(--on-ink-3);
    font: 500 11px/1.2 var(--font-mono);
    letter-spacing: .1em;
}

.board__cell {
    display: flex;
    flex: none;
    gap: 3px;
    width: calc(var(--w) * (var(--flap) * .98 + 3px) - 3px);
}

.board__row--head .board__cell {
    display: block;
    white-space: nowrap;
}

.flap {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--flap) * .98);
    height: calc(var(--flap) * 1.55);
    background: var(--ink-3);
    color: var(--on-ink);
    font: 600 var(--flap)/1 var(--font-mono);
    transition: background-color .2s;
}

.flap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--ink);
}

/* No hinge over a hyphen: the 1px line lay exactly on its stroke, so on
   high-density screens "ARAGATS-2" read as "ARAGATS 2" on some rows. */
.flap[data-ch="-"]::after {
    display: none;
}

.flap--blank {
    background: var(--ink-2);
}

.flap[data-f="a"] {
    animation: flap-a .1s linear;
}

.flap[data-f="b"] {
    animation: flap-b .1s linear;
}

@keyframes flap-a {
    50% {
        transform: scaleY(.1);
    }
}

@keyframes flap-b {
    50% {
        transform: scaleY(.1);
    }
}

.board__row--ga .board__cell--stage .flap {
    color: var(--go);
}

.board__row--beta .board__cell--stage .flap {
    color: var(--arev);
}

.board__row:hover .flap:not(.flap--blank) {
    background: var(--ink-4);
}

/* The right padding is the room the arrow moves into on hover: without it the
   arrow left the panel (a scroll container) and a scrollbar flashed up. */
.board__go {
    display: flex;
    margin-left: auto;
    padding-left: 12px;
    padding-right: 4px;
    color: var(--on-ink-3);
}

.board__go .icon {
    width: 20px;
    height: 20px;
    transition: transform .3s var(--ease);
}

.board__row:hover .board__go {
    color: var(--arev);
}

.board__row:hover .board__go .icon {
    transform: translateX(4px);
}

.board__rows li + li {
    border-top: 1px solid var(--ink-2);
}

.board__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ink-line);
}

.board__note {
    margin: 0;
    color: var(--on-ink-2);
    font-size: 14px;
    max-width: 60em;
}

@media (max-width: 1100px) {
    .board__cell--region {
        display: none !important;
    }
}

/* 861-1100: six columns (about 400px at 900px) left hy "մեջ" alone on a
   second line beside an empty band. The title takes one more column; the
   meta (124px) keeps to one line in the last two, reaching into the gap. */
@media (min-width: 861px) and (max-width: 1100px) {
    .board__title {
        grid-column: 4 / span 7;
        text-wrap: balance;
    }

    .board__meta {
        grid-column: 11 / -1;
        white-space: nowrap;
    }
}

@media (max-width: 860px) {
    .board__head .eyebrow,
    .board__title,
    .board__meta {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .board__cell--type {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .board__cell--context {
        display: none !important;
    }
}

/* Under the page title like every section title (--h1-size, Typography). */
@media (max-width: 560px) {
    .board__title {
        font-size: min(clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem), calc(var(--h1-size, 100vw) * .87));
    }
}

/* Below desktop a wrapped title splits into even lines: "Այժմ շահագործման /
   մեջ" left the last word alone at 280-340px. */
@media (max-width: 1239px) {
    .board__title {
        text-wrap: balance;
    }
}

/* Phones: flaps follow the viewport so model (11 flaps) and stage (9) always fit on one line:
   20 flaps x .86 + 1.4 column gap = 18.6 flap widths; 80px = gutters + 2px flap gaps + slack. */
@media (max-width: 480px) {
    .board__panel {
        --flap: clamp(10px, calc((100vw - 80px) / 18.6), 15px);
    }

    .board__cell {
        gap: 2px;
        width: calc(var(--w) * (var(--flap) * .86 + 2px) - 2px);
    }

    .flap {
        width: calc(var(--flap) * .86);
    }

    .board__rows .board__row {
        padding-block: 10px;
    }
}

@media (max-width: 420px) {
    .board__go {
        display: none;
    }
}

/* ---------- Section headings ---------- */

.sec-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: clamp(40px, 5vw, 72px);
    padding-top: 20px;
    border-top: 1px solid var(--ink);
}

.sec-head__meta {
    grid-column: 1 / span 3;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

/* The index never wraps ("AREVIA / Orders" beside a long hy label, with the
   square between its lines); the label beside it wraps instead. */
.sec-head__idx {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
}

.sec-head__idx::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--arev);
}

.sec-head__label {
    color: var(--text-3);
}

.sec-head__main {
    grid-column: 4 / -1;
}

.sec-head__main .h2 {
    margin: 0;
    max-width: 17em;
}

.sec-head__main .lead {
    margin: 24px 0 0;
    max-width: 44em;
}

.section--ink .sec-head {
    border-top-color: var(--on-ink);
}

.section--ink .sec-head__label {
    color: var(--on-ink-2);
}

/* Up to 1100px the index and label run above the title: the three-column
   margin is too narrow for a label like "ՀԱՄԱՊԱՏԱՍԽԱՆՈՒԹՅՈՒՆ" beside the index. */
@media (max-width: 1100px) {
    .sec-head__meta,
    .sec-head__main {
        grid-column: 1 / -1;
    }
}

/* 1101-1239: tighter tracking so the longest hy label word (180px at .06em)
   still fits beside the index in the margin column (194px at 1101px). */
@media (min-width: 1101px) and (max-width: 1239px) {
    .sec-head__meta {
        gap: 10px;
        letter-spacing: .06em;
    }
}

/* Long Armenian labels do not fit on one line beside the index in the
   three-column margin between 901 and 1239px, nor on the smallest phones.
   The label wraps inside itself next to the index (a hanging indent, as on
   desktop) and drops below it only when its longest word does not fit there:
   a zero flex basis makes that word the label's hypothetical width.
   align-content keeps the lines together in the grid-stretched paragraph. */
@media (max-width: 1239px) {
    .sec-head__meta {
        flex-wrap: wrap;
        align-content: flex-start;
        row-gap: 6px;
    }

    .sec-head__label {
        flex: 1 1 0%;
    }
}

@media (max-width: 560px) {
    .sec-head__meta {
        letter-spacing: .08em;
    }
}

/* ---------- Page hero (inner pages) ---------- */

.phero {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 7vw, 112px) 0 clamp(44px, 5vw, 80px);
    border-bottom: 1px solid var(--rule);
}

.phero__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.phero__meta {
    grid-column: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
}

.phero__sheet {
    margin: 0;
    color: transparent;
    font-size: clamp(64px, 3rem + 5vw, 152px);
    font-weight: 300;
    font-stretch: 62.5%;
    line-height: .78;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 1px var(--ink);
    animation: rise .9s var(--ease) both;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-3);
    font: 500 12px/1.5 var(--font-mono);
}

/* The separator closes the previous item, so a wrapped trail starts its
   second line with a name, never with "/" (desktop too: 1240-1439 wrapped
   "AREVIA AI" / "/ Գաղտնիության քաղաքականություն"). */
.crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: var(--rule-2);
}

.crumbs a {
    color: var(--text-2);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* 24px tap targets on touch-size screens; baseline alignment keeps the
   padded links level with the current-page label. */
@media (max-width: 1239px) {
    .crumbs ol {
        align-items: baseline;
    }

    .crumbs a {
        display: inline-block;
        padding-block: 4px;
    }
}

/* Touch tablets: the hero trail links (26px tall) get a 44px hit area, as
   on phones, without moving. */
@media (min-width: 561px) and (max-width: 1239px) {
    .phero .crumbs a {
        position: relative;
    }

    .phero .crumbs a::after {
        content: "";
        position: absolute;
        inset: -9px 0;
    }
}

.phero__main {
    grid-column: 4 / -1;
    animation: rise .9s .08s var(--ease) both;
}

.phero__main .h1 {
    margin: 22px 0 0;
    max-width: 15em;
}

.phero__lead {
    margin: 26px 0 0;
    max-width: 42em;
}

/* Below desktop the last line of a lead keeps two words or more
   ("հայրենիք։", "ճարտարապետը։" were left alone). */
@media (max-width: 1239px) {
    .phero__lead {
        text-wrap: pretty;
    }
}

@media (max-width: 900px) {
    .phero__meta,
    .phero__main {
        grid-column: 1 / -1;
    }

    .phero__meta {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* 901-1239: the copy column ends on the right frame line, and long leads
   ran into it (990px against 991px at 1024px). */
@media (min-width: 901px) and (max-width: 1239px) {
    .phero__main {
        padding-right: 16px;
    }

    /* Long hy titles kept the full 51-62px size here and ran to five lines
       (/trust ended on "ցանկ։" alone), more than at 900 or 1280px. */
    html:lang(hy) .phero .h1.h1--long {
        font-size: min(clamp(2.125rem, 1.2rem + 3.5vw, 4.75rem), 4.6vw);
    }
}

/* Phones: the breadcrumb goes under the sheet number on every page. Beside
   it, long trails wrapped to two or three lines on some pages only. */
@media (max-width: 560px) {
    .phero__meta {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 14px;
    }

    /* The eyebrow and the title right below name the current page again
       ("Կարիերա" / "ԿԱՐԻԵՐԱ", three times on /privacy): the trail shows the
       way back only. The current item stays for screen readers. */
    .phero .crumbs li:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .phero .crumbs li:nth-last-child(2)::after {
        content: none;
    }

    /* On one-level pages only the home link is left, which read as a caption
       of the sheet number: an arrow marks it as the way back. Every trail
       link gets a 42px tall hit area; negative margins keep the layout. */
    .phero .crumbs li:first-child:nth-last-child(2) a::before {
        content: "\2190\00a0";
    }

    .phero .crumbs a {
        padding-block: 12px;
        margin-block: -8px;
    }

    /* The outlined number (line-height .78) overhangs its box and took the
       top of that hit area; it is decorative. */
    .phero__sheet {
        pointer-events: none;
    }
}

/* ---------- Ready-made services (product cards) ---------- */

.prods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.prod {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 26px 28px 26px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    transition: background-color .25s;
}

.prod:hover {
    background: var(--paper-2);
}

.prod:focus-within {
    outline: 2px solid var(--arev);
    outline-offset: -2px;
}

.prod__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.prod__code {
    display: flex;
    align-items: flex-end;
    width: 64px;
    height: 64px;
    padding: 7px 8px;
    background: var(--ink);
    color: var(--arev);
    font: 600 15px/1 var(--font-mono);
    letter-spacing: .04em;
    transition: background-color .25s, color .25s;
}

.prod:hover .prod__code {
    background: var(--arev);
    color: var(--ink);
}

.prod__icon {
    width: 30px;
    height: 30px;
}

.prod__name {
    margin: 40px 0 0;
    font-size: 26px;
    font-weight: 700;
    font-stretch: 78%;
    line-height: 1.1;
}

.prod__name a {
    text-decoration: none;
}

.prod__name a:focus-visible {
    outline: none;
}

.prod__name a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.prod__for {
    margin: 8px 0 0;
    color: var(--text-3);
    font: 500 12px/1.5 var(--font-mono);
}

/* " · " in the mono face (.sepl). */
.prod__for.sepl {
    --sep: 1.8em;
}

.prod__text {
    margin: 16px 0 0;
    color: var(--text-2);
    font-size: 15px;
}

.prod__go {
    display: flex;
    margin-top: auto;
    padding-top: 22px;
}

.prod__go .icon {
    width: 20px;
    height: 20px;
    transition: transform .3s var(--ease);
}

.prod:hover .prod__go .icon {
    transform: translateX(4px);
}

@media (max-width: 1000px) {
    .prods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Two columns down to 541px (each about as wide as a card at 621px), with
   the phone padding; one column of 560px cards at 600px looked stretched. */
@media (max-width: 620px) {
    .prod {
        min-height: 0;
        padding: 22px 20px 24px;
    }

    .prod__name {
        margin-top: 24px;
    }
}

@media (max-width: 540px) {
    .prods {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .prod__name {
        margin-top: 20px;
    }
}

/* Card names stay under the section title (78% of --h1-size, Typography):
   at 280-300px the hy names (26px) were larger than the H2 above them. */
@media (max-width: 560px) {
    .prod__name {
        font-size: min(1.625rem, max(18px, calc(var(--h1-size, 100vw) * .78)));
    }
}

/* Smallest phones: 8px more measure and less height per card. */
@media (max-width: 360px) {
    .prod {
        padding: 18px 16px 20px;
    }

    .prod__name {
        margin-top: 16px;
    }
}

/* Services page: detailed product list */
.plist {
    border-top: 1px solid var(--ink);
}

.pitem {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--gap);
    padding: 32px 0 36px;
    border-bottom: 1px solid var(--rule);
}

/* A card opened by its anchor (/services#orders) gets a flat amber bar in
   the page gutter. It used to take 20px of padding, which shifted its
   columns off those of the cards around it. */
.pitem:target::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2 - 2px);
    width: 4px;
    background: var(--arev);
}

.pitem__code {
    display: flex;
    align-items: flex-end;
    width: 72px;
    height: 72px;
    padding: 8px 9px;
    background: var(--ink);
    color: var(--arev);
    font: 600 16px/1 var(--font-mono);
    letter-spacing: .04em;
}

.pitem__head {
    position: relative;
}

.pitem__name {
    margin: 0;
    font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
    font-weight: 700;
    font-stretch: 72%;
    line-height: 1.05;
}

.pitem__for {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 12px 0 0;
    color: var(--text-2);
    font-size: 14px;
}

/* The label; the list after it is a .sepl. */
.pitem__for > span:first-child {
    color: var(--text-3);
    font: 500 11px/1.9 var(--font-mono);
    letter-spacing: .12em;
}

.pitem__icon {
    width: 34px;
    height: 34px;
    margin-top: 28px;
}

.pitem__text {
    margin: 0 0 20px;
    font-size: 18px;
    color: var(--text-2);
}

.pitem__features {
    margin-bottom: 24px;
    font-size: 15px;
}

/* The audience label always sits above its value: inline, it moved between
   the two positions from card to card with the length of the text. */
@media (max-width: 1239px) {
    .pitem__for {
        display: grid;
        gap: 2px;
    }
}

@media (max-width: 900px) {
    .pitem {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .pitem__body {
        grid-column: 1 / -1;
    }

    .pitem__icon {
        display: none;
    }
}

/* Phones: the name sits beside a smaller code square; the audience line
   and the body use the full width. */
@media (max-width: 480px) {
    .pitem {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 16px;
        padding: 26px 0 30px;
    }

    .pitem__code {
        width: 56px;
        height: 56px;
        padding: 7px 8px;
        font-size: 14px;
    }

    .pitem__head {
        display: contents;
    }

    .pitem__name {
        align-self: center;
        overflow-wrap: break-word;
    }

    .pitem__for {
        grid-column: 1 / -1;
        margin: 0;
    }

    /* The full-width ink rule of the demo link closes the card: with the
       card's own hairline 30px below it, every card ended in two rules. */
    .pitem {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* Below desktop a wrapped name splits into even lines. */
@media (max-width: 1239px) {
    .pitem__name {
        text-wrap: balance;
    }
}

/* Phones: the name stays under the page title (--h1-size, Typography). */
@media (max-width: 560px) {
    .pitem__name {
        font-size: min(clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem), calc(var(--h1-size, 100vw) * .87));
    }
}

/* Beside the 56px code square the name has 100vw - 2 gutters - 72px. The
   longest one, "AREVIA Concierge" (7.33em, no break inside the name), broke
   inside "Concierge" in en below 312px: the name follows that width there.
   The smaller hy and ru names are not affected. */
@media (max-width: 480px) {
    .pitem__name {
        font-size: min(clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem), calc(var(--h1-size, 100vw) * .87), calc((100vw - 2 * var(--gutter) - 72px) / 7.5));
    }
}

/* Phones: the body copy under the page lead (18px, 17px at 380px and
   below), with fewer one- and two-word lines in the narrow column. */
@media (max-width: 480px) {
    .pitem__text {
        font-size: 17px;
    }
}

@media (max-width: 380px) {
    .pitem__text {
        font-size: 16px;
    }
}

/* ---------- Deployment columns ---------- */

.deploy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.deploy__item {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 30px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    transition: background-color .25s;
}

.deploy__item:hover {
    background: var(--paper-2);
}

.deploy__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
}

.deploy__num {
    color: var(--text-3);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
}

.deploy__icon {
    width: 34px;
    height: 34px;
}

.deploy__text {
    margin: 12px 0 28px;
    color: var(--text-2);
}

/* Below desktop the card copy is set like the other cards on the page
   (.prod__text, .commit__text): at the 17px body size it matched the section
   lead and ran ten lines at 280px. */
@media (max-width: 1239px) {
    .deploy__text {
        font-size: 15px;
    }
}

.spec {
    margin: auto 0 0;
}

.spec__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px;
}

.spec__row dt {
    color: var(--text-3);
}

.spec__row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 900px) {
    .deploy {
        grid-template-columns: minmax(0, 1fr);
    }

    .deploy__top {
        margin-bottom: 28px;
    }
}

/* 621-1100: every value under its label. In the 240px columns beside the
   label, long values wrapped to a right-aligned second line on some rows
   only, so the rows did not line up from card to card. */
@media (min-width: 621px) and (max-width: 1100px) {
    .deploy__item .spec__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .deploy__item .spec__row dd {
        text-align: left;
    }
}

/* 901-1100: the longest hy title word ("ենթակառուցվածքում", 244px at
   1.5rem) fits the three-column card. */
@media (min-width: 901px) and (max-width: 1100px) {
    .deploy__item {
        padding-inline: 24px;
    }

    .deploy__item .h3 {
        font-size: 1.3125rem;
        overflow-wrap: break-word;
    }
}

/* 621-900: one card per row, title and description on the left and the
   spec table on the right, instead of labels and values 450-600px apart. */
@media (min-width: 621px) and (max-width: 900px) {
    /* The text column is a little wider: hy "ենթակառուցվածքում" (244px)
       fits it from 621px. */
    .deploy__item {
        display: grid;
        grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 40px;
        align-items: start;
    }

    .deploy__top {
        grid-column: 1 / -1;
    }

    .deploy__item .h3,
    .deploy__text {
        grid-column: 1;
    }

    .deploy__text {
        margin-bottom: 0;
    }

    .deploy__item .spec {
        grid-column: 2;
        grid-row: 2 / span 2;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .deploy__item {
        padding: 22px 20px 24px;
    }

    .deploy__top {
        margin-bottom: 20px;
    }

    /* hy "ենթակառուցվածքում" is 244px wide at 1.5rem. */
    .deploy__item .h3 {
        font-size: min(1.5rem, 6.8vw);
        overflow-wrap: break-word;
    }

    /* Every value under its label, as in .lines-list: side by side, long
       values dropped to a right-aligned second line on some rows only. */
    .deploy__item .spec__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .deploy__item .spec__row dd {
        text-align: left;
    }
}

/* ---------- Armenia: heritage, alphabet, world clocks ---------- */

.heritage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

.heritage__main {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.heritage .abc {
    grid-column: 8 / -1;
}

.milestones {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.milestones__item {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: var(--gap);
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}

.milestones__year {
    font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    font-weight: 700;
    font-stretch: 66%;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.milestones__text {
    margin: 0;
    color: var(--text-2);
    font-size: 16px;
}

.milestones__item.is-now .milestones__year {
    text-decoration: underline;
    text-decoration-color: var(--arev);
    text-decoration-thickness: .09em;
    text-underline-offset: .1em;
}

.milestones__item.is-now .milestones__text {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 1000px) {
    .heritage__main,
    .heritage .abc {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .milestones__item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 1001-1239: the 3fr year column (158px at 1024) is narrower than "782 до н. э." and "մ.թ.ա. 782". */
@media (min-width: 1001px) and (max-width: 1239px) {
    .milestones__item {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    }
}

/* Desktop, ru: "782 до н. э." (210-232px) ran 9-14px past its 3fr column
   (196-219px) into the gap before the text. The ru years are set about 8%
   smaller, so the texts beside them keep their width and line breaks. */
@media (min-width: 1240px) {
    html:lang(ru) .milestones__year {
        font-size: clamp(2rem, 1.4rem + 1.7vw, 3rem);
    }
}

/* The same in hy up to 1319px: "մ.թ.ա. 782" (202px at 1240) ran 2-6px into
   the gap. A tighter set wins about 8px; the tracks do not change. */
@media (min-width: 1240px) and (max-width: 1319px) {
    html:lang(hy) .milestones__year {
        letter-spacing: -.02em;
    }
}

.global {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: clamp(48px, 6vw, 88px);
    padding-top: 24px;
    border-top: 1px solid var(--ink);
}

.global__head {
    grid-column: 1 / span 4;
}

.global__head p {
    margin: 12px 0 0;
    color: var(--text-2);
    font-size: 15px;
    max-width: 30em;
}

/* Below desktop a wrapped title splits into even lines ("գոտիներում։" was
   left alone at 280px). */
@media (max-width: 1239px) {
    .global__head .h3 {
        text-wrap: balance;
    }
}

.clocks {
    grid-column: 5 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--rule-2);
}

.clocks__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 2px 14px 6px;
    border-right: 1px solid var(--rule-2);
}

.clocks__city {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    font-stretch: 87.5%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clocks__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.clocks__hq {
    max-width: 100%;
    overflow: hidden;
    padding: 3px 5px 2px;
    background: var(--ink);
    color: var(--arev);
    font: 600 9.5px/1 var(--font-mono);
    letter-spacing: .06em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clocks__time {
    font: 500 clamp(20px, 1.2rem + .6vw, 28px)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.clocks__utc {
    color: var(--text-3);
    font: 500 11px/1 var(--font-mono);
}

@media (max-width: 1100px) {
    .global__head,
    .clocks {
        grid-column: 1 / -1;
    }

    .clocks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: 0;
        border-top: 1px solid var(--rule-2);
    }

    .clocks__item {
        padding: 14px 14px 14px 0;
        border-right: 0;
        border-bottom: 1px solid var(--rule-2);
    }

    .clocks__hq {
        font-size: 11px;
        letter-spacing: .02em;
    }
}

@media (max-width: 520px) {
    .clocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Room for the 11px office badge in a 280px two-column grid. */
    .clocks__item {
        padding-right: 8px;
    }
}

.abc {
    grid-column: 8 / -1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px;
    background: var(--ink);
    color: var(--on-ink);
}

.abc__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    border-top: 1px solid var(--ink-line);
    border-left: 1px solid var(--ink-line);
}

.abc__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.1;
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    color: var(--on-ink-2);
    font-size: clamp(18px, 1.9vw, 30px);
    font-weight: 600;
    font-stretch: 80%;
    transition: background-color .6s var(--ease), color .6s;
}

.abc__cell--flag {
    padding: 28% 22%;
}

.abc__cell--flag span {
    display: block;
    width: 100%;
    height: 100%;
    border-top: 5px solid var(--am-red);
    border-bottom: 5px solid var(--am-apricot);
    background: var(--am-blue);
}

.abc__cell[data-heat="1"] {
    background: #2e2411;
    color: var(--on-ink);
}

.abc__cell[data-heat="2"] {
    background: #5d4212;
    color: #fff;
}

.abc__cell[data-heat="3"] {
    background: #976814;
    color: var(--ink);
}

.abc__cell[data-heat="4"] {
    background: var(--arev);
    color: var(--ink);
}

.abc__cell--year {
    color: var(--arev);
    font: 500 10px/1 var(--font-mono);
    letter-spacing: .04em;
}

.abc__caption {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--on-ink-2);
    font-size: 14px;
}

.abc__caption strong {
    color: var(--on-ink);
    font-size: 20px;
    font-weight: 700;
    font-stretch: 80%;
    line-height: 1.2;
}

@media (max-width: 1000px) {
    .abc__caption {
        margin-top: 0;
    }
}

/* 1001-1239: the letter grid is shorter than the milestones beside it, and
   the stretched panel left about 230px of empty ink above the caption. The
   panel keeps the height of its content. */
@media (min-width: 1001px) and (max-width: 1239px) {
    .heritage .abc {
        align-self: start;
    }
}

/* Tablets: letter grid and caption side by side instead of a full-width grid of 80px cells with 18px letters. */
@media (min-width: 640px) and (max-width: 1000px) {
    .abc {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 0 32px;
        align-items: end;
    }

    .abc__caption {
        padding-top: 0;
    }
}

@media (max-width: 520px) {
    .abc {
        padding: 20px;
    }
}

/* ---------- Figures ---------- */

.figures {
    display: grid;
    gap: 0 var(--gap);
    margin: clamp(48px, 6vw, 80px) 0 0;
}

.figures--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.figures--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
}

.figures__item {
    padding: 22px 0 8px;
    border-top: 1px solid var(--ink);
}

.figures__value {
    font-size: clamp(3rem, 2rem + 3.2vw, 5.5rem);
    font-weight: 700;
    font-stretch: 68%;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.figures__text {
    margin: 14px 0 0;
    color: var(--text-2);
    font-size: 15px;
    max-width: 22em;
}

@media (max-width: 900px) {
    .figures--3,
    .figures--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .figures__item {
        padding-bottom: 28px;
    }
}

/* Phones: the four short figures stay a 2 x 2 grid down to 320px
   (hy "հասանելիության" needs the 136px column). */
@media (max-width: 520px) {
    .figures--3 {
        grid-template-columns: 1fr;
    }

    .figures--4 .figures__value {
        font-size: clamp(2.5rem, 1rem + 7vw, 3.25rem);
    }
}

@media (max-width: 319px) {
    .figures--4 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Indexed rows (industries) ---------- */

.rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.rows__item {
    border-bottom: 1px solid var(--rule);
}

.rows__link {
    position: relative;
    display: grid;
    grid-template-columns: 72px 44px minmax(0, 4fr) minmax(0, 6fr) 48px;
    gap: 16px;
    align-items: center;
    padding: 24px 0;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s;
}

.rows__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    bottom: -1px;
    width: 4px;
    background: var(--arev);
    transform: scaleY(0);
    transition: transform .3s var(--ease);
}

.rows__link:hover {
    background: var(--paper-2);
}

.rows__link:hover::before {
    transform: scaleY(1);
}

.rows__num {
    padding-left: 18px;
    color: var(--text-3);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .1em;
}

.rows__icon .icon {
    width: 30px;
    height: 30px;
}

.rows__name {
    font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
    font-weight: 700;
    font-stretch: 78%;
    line-height: 1.15;
}

.rows__text {
    color: var(--text-2);
    font-size: 15px;
}

.rows__go {
    justify-self: end;
    padding-right: 14px;
}

.rows__go .icon {
    width: 20px;
    height: 20px;
    transition: transform .3s var(--ease);
}

.rows__link:hover .rows__go .icon {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .rows__link {
        grid-template-columns: 44px minmax(0, 1fr) 32px;
        gap: 6px 12px;
        padding: 20px 0;
    }

    .rows__num {
        padding-left: 12px;
    }

    .rows__icon {
        display: none;
    }

    .rows__name {
        grid-column: 2;
    }

    .rows__text {
        grid-column: 2;
        grid-row: 2;
    }

    .rows__go {
        grid-column: 3;
        grid-row: 1 / span 2;
        padding-right: 8px;
    }
}

/* Phones: number and arrow share the first line; name and summary use the full width. */
@media (max-width: 480px) {
    .rows__link {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 16px 12px 18px;
    }

    .rows__num {
        grid-column: 1;
        grid-row: 1;
        padding-left: 0;
    }

    .rows__go {
        grid-column: 2;
        grid-row: 1;
        padding-right: 0;
    }

    .rows__name {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .rows__text {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .rows__name,
    .rows__text {
        overflow-wrap: break-word;
    }
}

/* Below desktop a wrapped industry name splits into even lines, as on
   /solutions (.sector__name): "Поставки и дистрибуция / продуктов" left the
   last word alone. */
@media (max-width: 1239px) {
    .rows__name {
        text-wrap: balance;
    }
}

/* ---------- Commitments (dark grid) ---------- */

.commit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink-line);
    border-left: 1px solid var(--ink-line);
}

.commit__item {
    display: flex;
    flex-direction: column;
    min-height: 236px;
    padding: 28px;
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    transition: background-color .25s;
}

.commit__item:hover {
    background: var(--ink-2);
}

.commit__num {
    color: var(--arev);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
}

.commit__title {
    margin: 44px 0 10px;
    color: var(--on-ink);
    font-size: 22px;
    font-weight: 700;
    font-stretch: 82%;
    line-height: 1.2;
}

.commit__text {
    margin: 0;
    color: var(--on-ink-2);
    font-size: 15px;
}

@media (max-width: 1000px) {
    .commit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .commit {
        grid-template-columns: 1fr;
    }

    .commit__item {
        min-height: 0;
    }
}

/* Below desktop a wrapped card title splits into even lines ("Контроль со
   стороны / человека" left the last word alone). */
@media (max-width: 1239px) {
    .commit__title {
        text-wrap: balance;
    }
}

@media (max-width: 480px) {
    .commit__item {
        padding: 22px 20px 24px;
    }

    /* A card title (78% of --h1-size, 18px floor, Typography): at a fixed
       20px it outranked the 19.6px section title on /ru/trust at 280px. */
    .commit__title {
        margin-top: 24px;
        font-size: max(18px, min(20px, calc(var(--h1-size, 100vw) * .78)));
    }

    .commit__title,
    .commit__text {
        overflow-wrap: break-word;
    }
}

/* ---------- Developers block & code ---------- */

.dev {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}

.dev__points {
    grid-column: 1 / span 3;
}

.dev__code {
    grid-column: 4 / -1;
    min-width: 0;
}

.dev__more {
    grid-column: 4 / -1;
    justify-self: start;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .dev__points,
    .dev__code,
    .dev__more {
        grid-column: 1 / -1;
    }
}

/* Landscape tablets: a three-column list beside the code wrapped every point
   to three or four lines and left an empty band under the code. The points
   become a two-column list above a full-width code block. */
@media (min-width: 901px) and (max-width: 1239px) {
    .dev__points,
    .dev__code,
    .dev__more {
        grid-column: 1 / -1;
    }

    .dev__points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap);
    }
}

.code {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

.code__bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink-line);
}

.code__tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.code__tab {
    position: relative;
    padding: 14px 18px;
    border: 0;
    border-right: 1px solid var(--ink-line);
    border-radius: 0;
    background: none;
    color: var(--on-ink-2);
    font: 500 13px/1.2 var(--font-mono);
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.code__tab:hover {
    color: var(--on-ink);
}

.code__tab[aria-selected="true"] {
    background: var(--ink-2);
    color: var(--on-ink);
}

.code__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--arev);
}

.code__tab:focus-visible,
.code__copy:focus-visible,
.code__panel:focus-visible {
    outline-offset: -2px;
}

.code__copy {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid var(--ink-line);
    border-radius: 0;
    background: none;
    color: var(--on-ink-2);
    font: 500 12px/1 var(--font-mono);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.code__copy .icon {
    width: 16px;
    height: 16px;
}

.code__copy:hover,
.code__copy.is-done {
    color: var(--arev);
}

.code pre {
    margin: 0;
    padding: 24px;
    overflow-x: auto;
    font: 400 13.5px/1.75 var(--font-mono);
    tab-size: 4;
}

.code code {
    font: inherit;
    white-space: pre;
}

.code__panel[hidden] {
    display: none;
}

.code__response {
    border-top: 1px solid var(--ink-line);
    background: var(--ink-2);
}

.code__caption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 24px;
    border-bottom: 1px solid var(--ink-line);
    color: var(--on-ink-2);
    font: 500 12px/1.2 var(--font-mono);
    letter-spacing: .04em;
}

.code__status {
    color: var(--go);
}

.c-k {
    color: var(--arev);
}

.c-s {
    color: #c7d7c0;
}

.c-f {
    color: #ffffff;
    font-weight: 600;
}

.c-n {
    color: #f7c96e;
}

.c-v {
    color: #a9c7ff;
}

.c-e {
    color: var(--arev);
}

@media (max-width: 560px) {
    .code__tabs {
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 1px;
        overflow: visible;
        background: var(--ink-line);
    }

    .code__tab {
        flex: 1 1 auto;
        padding: 15px 10px;
        border-right: 0;
        background: var(--ink);
        font-size: 12px;
    }

    .code__copy {
        position: relative;
        justify-content: center;
        min-width: 44px;
        padding: 0 13px;
    }

    .code__copy span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .code pre {
        padding: 18px 16px;
        font-size: 12.5px;
    }

    .code__caption {
        padding: 12px 16px;
    }
}

/* Below desktop code lines wrap inside the block. Scrolled sideways, the
   samples were cut mid-token at the right edge with nothing to show that
   they scroll (touch screens hide scrollbars), and the model's answer in the
   response sat far to the right. Each source line is a .ln span
   (partials/code.php) with a hanging indent: a wrapped line continues two
   columns deeper than it starts, so continuations never look like new lines.
   URLs break before a path segment (<wbr>); overflow-wrap is the last
   resort. Copying still takes the original lines. */
@media (max-width: 1239px) {
    .code code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .code .ln {
        display: block;
        padding-left: 2ch;
        text-indent: -2ch;
    }

    .code .ln--2 {
        padding-left: 4ch;
        text-indent: -4ch;
    }

    .code .ln--4 {
        padding-left: 6ch;
        text-indent: -6ch;
    }

    .code .ln--6 {
        padding-left: 8ch;
        text-indent: -8ch;
    }

    .code .ln--8 {
        padding-left: 10ch;
        text-indent: -10ch;
    }
}

/* The sample response wraps on desktop too: its "content" line (1296px in
   a 904-1214px box) was cut mid-glyph at the right edge, with no sign that
   it scrolls where scrollbars overlay. The requests fit and stay as they are. */
@media (min-width: 1240px) {
    .code__response code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .code__response .ln {
        display: block;
        padding-left: 2ch;
        text-indent: -2ch;
    }

    .code__response .ln--2 {
        padding-left: 4ch;
        text-indent: -4ch;
    }

    .code__response .ln--4 {
        padding-left: 6ch;
        text-indent: -6ch;
    }

    .code__response .ln--6 {
        padding-left: 8ch;
        text-indent: -8ch;
    }

    .code__response .ln--8 {
        padding-left: 10ch;
        text-indent: -10ch;
    }
}

/* The four tabs need 293px beside the copy button: a 2 x 2 grid below that. */
@media (max-width: 359px) {
    .code__tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .code pre {
        padding: 16px 14px;
        font-size: 12px;
    }
}

/* ---------- Call to action ---------- */

.cta {
    padding-block: clamp(72px, 9vw, 128px);
    background: var(--ink-2);
    color: var(--on-ink);
}

.cta__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: end;
}

.cta__label {
    grid-column: 1 / span 3;
    align-self: start;
    margin-top: 10px;
}

.cta__main {
    grid-column: 4 / span 6;
}

.cta__title {
    margin: 0;
    color: var(--on-ink);
    max-width: 14em;
}

.cta__text {
    margin: 22px 0 0;
    color: var(--on-ink-2);
    font-size: 18px;
    max-width: 36em;
}

.cta__side {
    grid-column: 10 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cta__or {
    margin: 14px 0 0;
    color: var(--on-ink-3);
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .04em;
}

.cta__direct {
    display: grid;
    gap: 6px;
    margin: 0;
}

.cta__direct a {
    width: fit-content;
    color: var(--on-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-line);
}

.cta__direct a:hover {
    border-bottom-color: var(--arev);
}

/* 1240-1319, hy: the three-column side (276-298px) is a few pixels short of
   "Պատվիրել ցուցադրություն" (194px) with 22px label padding, and the demo
   button broke onto two lines. Slimmer padding keeps it on one line. */
@media (min-width: 1240px) and (max-width: 1319px) {
    html:lang(hy) .cta__side .btn__label {
        padding-inline: 12px;
        white-space: nowrap;
    }
}

/* JetBrains Mono has no Armenian: the letters fell back to the sans face but
   each space kept its 7.7px mono cell, so the hy line read double-spaced
   (as in .ledger .n[colspan]). */
html:lang(hy) .cta__or {
    font-family: var(--font-sans);
    letter-spacing: .02em;
}

/* The whole touch range (to 1239px): with the desktop 3/6/3 grid the side
   column was 241-276px at 1101-1239 and broke "Պատվիրել ցուցադրություն"
   onto two lines, and the direct links lost their taller tap targets. */
@media (max-width: 1239px) {
    .cta__label {
        grid-column: 1 / -1;
    }

    .cta__main {
        grid-column: 1 / span 7;
    }

    .cta__side {
        grid-column: 8 / -1;
    }

    /* Taller tap targets for the e-mail and phone links; the rule stays under the text. */
    .cta__direct {
        gap: 0;
    }

    .cta__direct a {
        padding-top: 11px;
    }
}

/* Stacked up to 900px: beside the text, the side column (about 210px at
   768px) broke the demo button onto two lines. */
@media (max-width: 900px) {
    .cta__main,
    .cta__side {
        grid-column: 1 / -1;
    }

    .cta__side {
        margin-top: 12px;
    }
}

/* Phones: a full-width primary button, like the contact form's. */
@media (max-width: 480px) {
    .cta__side .btn {
        align-self: stretch;
    }

    .cta__side .btn__label {
        flex: 1;
    }
}

/* Below desktop the last line keeps two words or more ("стоимость." was
   left alone). */
@media (max-width: 1239px) {
    .cta__text {
        text-wrap: pretty;
    }
}

/* Smallest phones: the body size, like .lead (it was larger than the page
   lead and ran 11 lines at 280px). */
@media (max-width: 380px) {
    .cta__text {
        font-size: 1.0625rem;
        line-height: 1.55;
    }
}

/* ---------- Footer ---------- */

.footer {
    padding-top: 72px;
    background: var(--ink);
    color: var(--on-ink-2);
    font-size: 14px;
}

.footer a {
    color: var(--on-ink);
    text-decoration: none;
}

.footer a:hover {
    color: var(--arev);
}

.footer__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    padding-bottom: 56px;
}

.footer__brand {
    grid-column: 1 / span 4;
}

.footer__about {
    margin: 22px 0 0;
    max-width: 26em;
    color: var(--on-ink-2);
}

.footer__nav {
    grid-column: 5 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.footer__title {
    margin: 0 0 16px;
    color: var(--on-ink-3);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.footer__list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.titleblock {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1.1fr 170px;
    margin: 0;
    border-top: 1px solid var(--ink-line);
    border-left: 1px solid var(--ink-line);
}

.titleblock__cell {
    min-width: 0;
    padding: 12px 16px 14px;
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
}

.titleblock__cell dt {
    margin-bottom: 6px;
    color: var(--on-ink-3);
    font: 500 10.5px/1.3 var(--font-mono);
    letter-spacing: .12em;
}

.titleblock__cell dd {
    margin: 0;
    color: var(--on-ink);
    overflow-wrap: anywhere;
}

.titleblock__cell--sheet {
    grid-column: 5;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* A two-part sheet number ("04.1" on the model sheets, 108px) and "/ 12"
   need 147px, more than the 137px of the 170px column: "/ 12" goes under
   the number instead of the number breaking after its dot. */
.titleblock__cell--sheet dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    overflow-wrap: normal;
}

.titleblock__cell--sheet strong {
    white-space: nowrap;
    color: var(--arev);
    font-size: 64px;
    font-weight: 700;
    font-stretch: 68%;
    line-height: .9;
    font-variant-numeric: tabular-nums;
}

.titleblock__cell--sheet span {
    color: var(--on-ink-3);
    font: 500 13px/1 var(--font-mono);
}

.titleblock__cell--wide {
    grid-column: span 2;
}

.titleblock time {
    font-variant-numeric: tabular-nums;
}

/* Touch screens: the e-mail link in the title block gets a 43px hit area. */
@media (max-width: 1239px) {
    .titleblock__cell dd a {
        position: relative;
    }

    .titleblock__cell dd a::after {
        content: "";
        position: absolute;
        inset: -12px -4px;
    }
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 20px 0 28px;
    color: var(--on-ink-3);
    font-size: 13px;
}

.footer__legal {
    margin: 0;
}

/* The outer links drop their outer padding (no negative margin), so the labels
   line up with the content edges whether the switcher sits at the right of the
   legal line or wraps below it. */
.footer .lang__list li:first-child .lang__link {
    padding-left: 0;
}

.footer .lang__list li:last-child .lang__link {
    padding-right: 0;
}

.footer .lang__list li:first-child .lang__link::after {
    left: 0;
}

.footer .lang__list li:last-child .lang__link::after {
    right: 0;
}

/* The tablet footer covers the whole touch range, like the header's menu
   button: at 1101-1239 the desktop 4 + 8 layout squeezed the industries
   column to 135px (nine links of two or three lines) with 19px link rows. */
@media (max-width: 1239px) {
    .footer__brand,
    .footer__nav {
        grid-column: 1 / -1;
    }

    /* The last link row carries 9px of padding below the text. */
    .footer__top {
        padding-bottom: 47px;
    }

    /* Tablet: products | industries (two-column list); company | legal. */
    .footer__nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 16px;
    }

    .footer__col--solutions,
    .footer__col--legal {
        grid-column: span 2;
    }

    .footer__col--solutions .footer__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap);
    }

    /* Touch-sized links: 40px rows instead of 19px text with 9px gaps. */
    .footer__title {
        margin-bottom: 7px;
    }

    .footer__list {
        row-gap: 0;
    }

    .footer__list a {
        display: block;
        padding-block: 9px;
    }

    .titleblock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .titleblock__cell--sheet {
        grid-column: 1 / -1;
        grid-row: auto;
        order: -1;
    }

    .titleblock__cell--sheet dd {
        margin-top: 4px;
    }

    .titleblock__cell--wide {
        grid-column: 1 / -1;
    }

    .titleblock__cell dt {
        font-size: 11px;
    }

    /* Touch-sized language links (44px; they were 36px tall at 721-1239)
       and a 44px hit area for the logo link; the layout does not move. */
    .footer .lang__link {
        padding: 16px 12px;
    }

    .footer .lang__link[aria-current]::after {
        left: 12px;
        right: 12px;
        bottom: 9px;
    }

    .footer .brand {
        padding-block: 5px;
        margin-block: -5px;
    }
}

/* Tablets: the full-width brand block filled only its left 340px and left
   an empty band over the link columns. The stamp moves to the right, level
   with the last line of the text. */
@media (min-width: 721px) and (max-width: 1239px) {
    .footer__brand {
        display: grid;
        grid-template-columns: minmax(0, 26em) auto;
        justify-content: space-between;
        align-items: end;
        column-gap: var(--gap);
    }

    .footer__brand > .brand,
    .footer__about {
        grid-column: 1;
    }

    .footer__brand > .brand {
        justify-self: start;
    }

    .footer__brand > .stamp--light {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    /* Phones: one group per row, short lists in two columns. */
    .footer__nav {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .footer__col--solutions,
    .footer__col--legal {
        grid-column: auto;
    }

    .footer__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap);
    }

    .footer__bottom {
        row-gap: 4px;
        padding-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .footer__col--solutions .footer__list,
    .footer__col--legal .footer__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .titleblock__cell {
        padding: 10px 12px 12px;
    }

    .titleblock__cell dt {
        letter-spacing: .06em;
    }
}

/* Two columns down to 350px: the long values (company, e-mail) take full
   rows and the short ones pair up, instead of eight stacked cells. */
@media (max-width: 413px) {
    .titleblock__cell--company,
    .titleblock__cell:nth-child(4) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 374px) {
    .stamp--light {
        letter-spacing: .08em;
        line-height: 1.3;
    }
}

/* One column below 350px: at 340-345 the 129px cell broke hy
   "Հանրապետություն" mid-word and left "ն" alone on a line. */
@media (max-width: 349px) {
    .titleblock {
        grid-template-columns: minmax(0, 1fr);
    }

    .titleblock__cell--wide {
        grid-column: auto;
    }
}

@media (max-width: 319px) {
    .footer__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Tables (ledger) ---------- */

/* Positioned so absolutely positioned cell content (the visually hidden
   "Apply" header on /careers) is clipped by the scroller instead of
   widening the page. */
.table-scroll {
    position: relative;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.ledger caption {
    padding-bottom: 14px;
    text-align: left;
    font-weight: 700;
}

.ledger th,
.ledger td {
    padding: 15px 20px 15px 0;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.ledger thead th {
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
    color: var(--text-3);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: .12em;
    vertical-align: bottom;
    white-space: nowrap;
}

.ledger tbody th {
    font-weight: 600;
}

.ledger tbody tr {
    transition: background-color .2s;
}

.ledger tbody tr:hover {
    background: var(--paper-2);
}

.ledger .n {
    font-family: var(--font-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.ledger thead .n {
    text-align: right;
}

.ledger td:last-child,
.ledger th:last-child {
    padding-right: 0;
}

.ledger code {
    font-size: 13px;
}

.ledger--compare th[scope="col"]:not(:first-child) {
    min-width: 170px;
}

.ledger--compare .is-hi {
    background: var(--paper-2);
}

.ledger a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--rule-2);
}

.ledger a:hover {
    border-bottom-color: var(--arev);
}

.table-note {
    margin: 16px 0 0;
    color: var(--text-3);
    font-size: 13px;
}

@media (max-width: 1239px) {
    .ledger thead th,
    .ledger thead .n,
    .ledger .n[colspan] {
        white-space: normal;
    }

    /* ".ledger .n" set numeric headers in 14px beside 11px labels. */
    .ledger thead .n {
        font-size: 11px;
    }

    /* Row-header links (model names) get a 40px hit area; the underline stays put. */
    .ledger tbody th a {
        position: relative;
    }

    .ledger tbody th a::after {
        content: "";
        position: absolute;
        inset: -10px -6px;
    }

    .ledger th,
    .ledger td {
        padding-right: 16px;
    }

    .ledger code {
        white-space: nowrap;
    }

    /* A merged price cell holds words ("$0,006 ձայնագրության մեկ րոպեի
       համար"): in the mono face the Armenian letters fell back to the text
       font but kept mono-width spaces, which read as double spacing. */
    .ledger .n[colspan] {
        font-family: var(--font-sans);
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .ledger th,
    .ledger td {
        padding-right: 12px;
    }

    .ledger thead th {
        letter-spacing: .06em;
    }
}

/* The four-column comparison stays within the text column down to 721px. */
@media (max-width: 900px) {
    .ledger--compare th[scope="col"]:not(:first-child) {
        min-width: 150px;
    }
}

/* Tables marked --stack become one block per row on phones and small
   tablets. data-label (upper-cased in PHP) names each value. */
@media (max-width: 720px) {
    .ledger--stack,
    .ledger--stack tbody,
    .ledger--stack tr,
    .ledger--stack th,
    .ledger--stack td {
        display: block;
    }

    .ledger--stack thead {
        display: none;
    }

    .ledger--stack tbody tr {
        padding: 18px 0 16px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--stack tbody tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .ledger--stack tbody th,
    .ledger--stack td {
        padding: 0;
        border: 0;
    }

    .ledger--stack tbody th {
        margin-bottom: 8px;
        font-size: 17px;
        line-height: 1.35;
    }

    .ledger--stack td[data-label] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: baseline;
        justify-items: start;
        gap: 2px 16px;
        padding: 5px 0;
    }

    .ledger--stack td[data-label]::before {
        content: attr(data-label);
        color: var(--text-3);
        font: 500 11px/1.5 var(--font-mono);
        letter-spacing: .08em;
    }

    .ledger--stack .n,
    .ledger--stack .tag {
        text-align: left;
        white-space: normal;
    }
}

/* The four-column delivery comparison (/services) stacks up to 820px: at
   721-820 its row headers were squeezed to 3-4 lines of one or two words
   beside three 150px value columns. Same rules as the 720px block above. */
@media (min-width: 721px) and (max-width: 820px) {
    .ledger--compare.ledger--stack,
    .ledger--compare.ledger--stack tbody,
    .ledger--compare.ledger--stack tr,
    .ledger--compare.ledger--stack th,
    .ledger--compare.ledger--stack td {
        display: block;
    }

    .ledger--compare.ledger--stack thead {
        display: none;
    }

    .ledger--compare.ledger--stack tbody tr {
        padding: 18px 0 16px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--compare.ledger--stack tbody tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .ledger--compare.ledger--stack tbody th,
    .ledger--compare.ledger--stack td {
        padding: 0;
        border: 0;
    }

    .ledger--compare.ledger--stack tbody th {
        margin-bottom: 8px;
        font-size: 17px;
        line-height: 1.35;
    }

    .ledger--compare.ledger--stack td[data-label] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: baseline;
        justify-items: start;
        gap: 2px 16px;
        padding: 5px 0;
    }

    .ledger--compare.ledger--stack td[data-label]::before {
        content: attr(data-label);
        color: var(--text-3);
        font: 500 11px/1.5 var(--font-mono);
        letter-spacing: .08em;
    }
}

@media (max-width: 480px) {
    .ledger--stack td[data-label] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* Seven short values per model: label and value stay side by side down
       to 320px, on the same two tracks in every row. The label track holds
       the longest label word ("ՆՈՒՅՆԱՑՈՒՑԻՉ", 100px), and at 320px the value
       track (172px) the longest value run ("$0,006 ձայնագրության", bound by
       a no-break space, 169px). A min-content value track widened that one
       row only and moved its value 3-4px left of the others. */
    .ledger--models.ledger--stack td[data-label] {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 2px 12px;
    }
}

@media (max-width: 319px) {
    .ledger--models.ledger--stack td[data-label] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ---------- Generic two-column blocks ---------- */

.split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.split__side {
    grid-column: 1 / span 3;
}

.split__main {
    grid-column: 4 / -1;
    min-width: 0;
}

.split__half {
    grid-column: span 6;
    min-width: 0;
}

@media (max-width: 900px) {
    .split__side,
    .split__main,
    .split__half {
        grid-column: 1 / -1;
    }

    .split__half + .split__half {
        margin-top: 32px;
    }

    /* Stacked, a label and the title under it are one head (model sheets,
       "Հարցման օրինակ"): the grid gap alone, as in .sec-head, instead of
       the h2's own top margin on top of it (39-54px). */
    .split__side + .split__main > .h2:first-child {
        margin-top: 0;
    }
}

/* 901-1100: section titles run full width above their content (.sec-head,
   up to 1100px), so a split right under one does too. Its content started
   three columns in, under an empty band, out of line with the title. */
@media (min-width: 901px) and (max-width: 1100px) {
    .sec-head + .split > .split__side,
    .sec-head + .split > .split__main {
        grid-column: 1 / -1;
    }
}

.kv {
    margin: 0;
    border-top: 1px solid var(--ink);
}

.kv__row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gap);
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}

.kv__row dt {
    font-size: 18px;
    font-weight: 700;
    font-stretch: 85%;
    line-height: 1.3;
}

.kv__row dd {
    margin: 0;
    color: var(--text-2);
}

.section--ink .kv {
    border-top-color: var(--on-ink);
}

.section--ink .kv__row {
    border-bottom-color: var(--ink-line);
}

.section--ink .kv__row dd {
    color: var(--on-ink-2);
}

@media (max-width: 640px) {
    .kv__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Numbered cards in a hairline grid */
.cells {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.cells--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cells--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cells__item {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 28px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.section--alt .cells__item {
    background: var(--paper-2);
}

.cells__num {
    color: var(--text-3);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
}

.cells__title {
    margin: 32px 0 10px;
    font-size: 20px;
    font-weight: 700;
    font-stretch: 82%;
    line-height: 1.25;
}

.cells__text {
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
}

/* Below desktop a wrapped title splits into even lines and the text keeps
   two words or more on its last line ("Точность вместо громких / слов",
   "Лос-Анджелесе." alone). */
@media (max-width: 1239px) {
    .cells__title {
        text-wrap: balance;
    }

    .cells__text {
        text-wrap: pretty;
    }
}

/* Several cards per row: number, title and text share the row tracks of the
   cards beside them, so a title that wraps ("Զրույցային / պատասխաններ")
   no longer puts its text 22-50px below the texts next to it. */
@media (min-width: 521px) and (max-width: 1239px) {
    @supports (grid-template-rows: subgrid) {
        .cells__item {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
            align-content: start;
        }
    }
}

@media (max-width: 1000px) {
    .cells,
    .cells--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Two columns: an odd last card spans the row instead of leaving a hole.
   Down to 521px: a single column of 560px cards at 600px looked stretched. */
@media (min-width: 521px) and (max-width: 1000px) {
    .cells__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Two columns of about 250px: hy "Կառուցվածքավորված" (213px at 20px) ran
   16px out of its card at 541px. Phone padding and an 18px title. */
@media (min-width: 521px) and (max-width: 620px) {
    .cells__item {
        padding: 22px 20px 24px;
    }

    .cells__title {
        font-size: 18px;
        overflow-wrap: break-word;
    }
}

/* A row of exactly three cards (model lifecycle) stays one row down to
   861px, about 270px each, instead of 2 + 1 with one 836px card. */
@media (min-width: 861px) and (max-width: 1000px) {
    .cells--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cells--3 .cells__item:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .cells,
    .cells--2,
    .cells--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .cells__item {
        padding: 22px 20px 24px;
    }

    .cells__title {
        margin-top: 20px;
        overflow-wrap: break-word;
    }
}

@media (max-width: 360px) {
    .cells__title {
        font-size: 18px;
    }
}

/* ---------- Services: lines with codes ---------- */

.lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 22px;
    padding: 26px 0 30px;
    border-top: 1px solid var(--ink);
}

.line__code {
    display: flex;
    align-items: flex-end;
    width: 72px;
    height: 72px;
    padding: 8px 9px;
    background: var(--ink);
    color: var(--arev);
    font: 600 15px/1 var(--font-mono);
    letter-spacing: .04em;
}

.line__name {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    font-stretch: 82%;
    line-height: 1.2;
}

.line__text {
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
}

@media (max-width: 820px) {
    .lines {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1239px) {
    .line__name {
        text-wrap: balance;
    }
}

/* Card titles stay under the section titles on the smallest phones
   (78% of --h1-size, Typography). */
@media (max-width: 560px) {
    .line__name {
        font-size: min(22px, max(18px, calc(var(--h1-size, 100vw) * .78)));
    }
}

@media (max-width: 480px) {
    .line {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 16px;
        padding: 22px 0 26px;
    }

    .line__code {
        width: 56px;
        height: 56px;
        padding: 7px 8px;
        font-size: 14px;
    }
}

/* Smallest phones: the code square moves above the text, which then
   gets the full width for words like "խորհրդատվություն". */
@media (max-width: 359px) {
    .line {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .line__code {
        width: 48px;
        height: 48px;
        padding: 6px 7px;
        font-size: 13px;
    }
}

/* ---------- Process steps ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ink);
}

.steps__item {
    position: relative;
    padding: 30px 28px 8px 0;
}

.steps__item::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--ink);
}

.steps__item:first-child::before {
    background: var(--arev);
}

.steps__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.steps__num {
    color: var(--text-3);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
}

.steps__title {
    margin: 22px 0 10px;
    font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
    font-weight: 700;
    font-stretch: 75%;
    line-height: 1.1;
}

.steps__text {
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
}

.section--ink .steps {
    border-top-color: var(--on-ink);
}

.section--ink .steps__item::before {
    background: var(--on-ink);
}

.section--ink .steps__item:first-child::before {
    background: var(--arev);
}

.section--ink .steps__text {
    color: var(--on-ink-2);
}

/* Four steps per row below desktop: the longest title ("Ուսումնասիրություն",
   about 9em) must stay inside its column. */
@media (min-width: 1001px) and (max-width: 1239px) {
    .steps:not(.steps--3) .steps__title {
        font-size: clamp(1.375rem, 2.7vw - 5px, 1.875rem);
    }

    /* Head, title and text rows are shared by the four steps (subgrid): the
       one title that wraps ("Պիլոտային նախագիծ") no longer starts its text
       24-33px below the others. The titles sit on the shared line. */
    .steps:not(.steps--3) {
        grid-template-rows: auto auto 1fr;
    }

    .steps:not(.steps--3) .steps__item {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }

    .steps:not(.steps--3) .steps__title {
        align-self: end;
    }
}

/* Below desktop a wrapped title splits into even lines. */
@media (max-width: 1239px) {
    .steps__title {
        text-wrap: balance;
    }
}

@media (max-width: 1000px) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }
}

/* 2 x 2 steps: each row carries its own 2px rule, so the markers of steps 03
   and 04 sit on a line instead of floating (no column gap: one rule per row). */
@media (min-width: 561px) and (max-width: 1000px) {
    .steps:not(.steps--3) {
        border-top: 0;
    }

    .steps:not(.steps--3) .steps__item {
        border-top: 2px solid var(--ink);
    }

    .section--ink .steps:not(.steps--3) .steps__item {
        border-top-color: var(--on-ink);
    }
}

@media (max-width: 560px) {
    /* The 12px markers sit centred on the 2px rail; the 5px margin keeps
       their outer edge on the gutter line instead of 5px into the gutter. */
    .steps {
        grid-template-columns: 1fr;
        margin-left: 5px;
        border-top: 0;
        border-left: 2px solid var(--ink);
    }

    .steps__item {
        padding: 4px 0 24px 26px;
    }

    .steps__item::before {
        top: 6px;
        left: -7px;
    }

    /* Under the section titles on the smallest phones (70% of --h1-size,
       Typography: at 78% "Ստեղծեք բանալի" was 96% of the H2 above it, in the
       same face); 22px at most in the four-step timelines. */
    .steps__title {
        font-size: min(clamp(1.5rem, 1.2rem + .8vw, 2rem), max(18px, calc(var(--h1-size, 100vw) * .7)));
    }

    .steps:not(.steps--3) .steps__title {
        font-size: min(1.375rem, max(18px, calc(var(--h1-size, 100vw) * .7)));
    }

    .section--ink .steps {
        border-left-color: var(--on-ink);
    }

    /* The rule ends with the last step's text instead of running 24px past
       it, and the number sits closer to its own title than to the step above. */
    .steps__item:last-child {
        padding-bottom: 4px;
    }

    .steps__title {
        margin-top: 12px;
    }
}

/* The four-step timelines (/services, /careers): the rail is drawn from the
   first marker down (as a border it stuck out 6px above the amber square),
   and each marker is centred on its step number. The head is 24px tall
   (the duration tag on /services), so both pages match. */
@media (max-width: 560px) {
    .steps:not(.steps--3) {
        position: relative;
        padding-left: 2px;
        border-left: 0;
    }

    .steps:not(.steps--3)::before {
        content: "";
        position: absolute;
        top: 10px;
        bottom: 0;
        left: 0;
        width: 2px;
        background: var(--ink);
    }

    .section--ink .steps:not(.steps--3)::before {
        background: var(--on-ink);
    }

    .steps:not(.steps--3) .steps__head {
        min-height: 24px;
    }

    .steps:not(.steps--3) .steps__item::before {
        top: 10px;
    }
}

/* ---------- Models catalogue ---------- */

.filter {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 32px;
    border: 1px solid var(--ink);
}

.filter__btn {
    padding: 11px 16px;
    border: 0;
    border-right: 1px solid var(--ink);
    border-radius: 0;
    background: none;
    color: var(--text);
    font: 500 13px/1.2 var(--font-mono);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.filter__btn:last-child {
    border-right: 0;
}

.filter__btn span {
    margin-left: 6px;
    color: var(--text-3);
}

.filter__btn:hover {
    background: var(--paper-2);
}

.filter__btn[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

.filter__btn[aria-pressed="true"] span {
    color: var(--arev);
}

/* Each card carries its full frame, overlapping its neighbours by 1px, so a
   filtered catalog is closed around the visible cards only. The 1px padding
   and negative margins keep the unfiltered grid exactly as before. */
.catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1px 0 0 1px;
}

.mcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    margin: -1px 0 0 -1px;
    padding: 26px 28px 28px;
    border: 1px solid var(--rule);
    background: var(--paper);
    transition: background-color .25s;
}

.mcard[hidden] {
    display: none;
}

.mcard:hover {
    background: var(--paper-2);
}

.mcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mcard__type {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--text-2);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.mcard__name {
    margin: 48px 0 0;
    font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
    font-weight: 800;
    font-stretch: 68%;
    letter-spacing: .03em;
    line-height: 1;
}

.mcard__name a {
    text-decoration: none;
}

.mcard__name a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mcard__scripts {
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
    color: var(--text-3);
    font-size: 14px;
}

.mcard__scripts span + span::before {
    content: "·";
    margin-right: 10px;
}

.mcard__tagline {
    margin: 22px 0 8px;
    font-weight: 700;
    font-stretch: 87.5%;
}

.mcard__text {
    margin: 0 0 24px;
    color: var(--text-2);
    font-size: 15px;
}

.mcard__go {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: none;
}

.mcard code {
    font-size: 13px;
}

/* Below desktop the status badge sits under the category in every card,
   phones included: beside it, the badge dropped under the longer labels only
   ("ՎԵԿՏՈՐԱՅԻՆ ՆԵՐԿԱՅԱՑՈՒՄՆԵՐ"), so the cards did not line up. */
@media (max-width: 1239px) {
    .mcard__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Touch tablets (821-1239px had 38px filter buttons). */
    .filter__btn {
        min-height: 44px;
    }

    /* A worded price that wraps splits into even lines instead of leaving
       "համար" or "аудио" alone on the second; so do the card taglines, the
       comparison and spec values and the "Other models" taglines
       ("... արձագանքման / ժամանակով", "... универсальная / модель"). */
    .mcard .spec__row dd,
    .ledger--models .n[colspan],
    .mcard__tagline,
    .ledger--models td,
    .ledger--spec td,
    .others span {
        text-wrap: balance;
    }
}

/* Desktop, hy: "ՎԵԿՏՈՐԱՅԻՆ ՆԵՐԿԱՅԱՑՈՒՄՆԵՐ" (Garni) wraps to two lines beside
   its badge, and the name under it sat 7px below the names beside it. Every
   head takes the height of two label lines, so the names share one line. */
@media (min-width: 1240px) {
    html:lang(hy) .mcard__head {
        min-height: calc(11px * 1.4 * 2);
    }
}

/* Two and three cards per row: the parts of each card (head, name, scripts,
   tagline, text, spec) share the row tracks of the cards beside it. With
   the spec pushed to the bottom, the two-line hy Hrazdan price lifted its
   three rules 23px above those of its neighbours. */
@media (min-width: 681px) and (max-width: 1239px) {
    @supports (grid-template-rows: subgrid) {
        .mcard {
            display: grid;
            grid-row: span 6;
            grid-template-rows: subgrid;
            row-gap: 0;
        }

        .mcard .spec {
            margin-top: 0;
            align-self: start;
        }
    }
}

@media (max-width: 820px) {
    .filter {
        width: auto;
        border-width: 1px 0 0 1px;
    }

    .filter__btn,
    .filter__btn:last-child {
        flex: 1 1 auto;
        min-height: 44px;
        border-right: 1px solid var(--ink);
        border-bottom: 1px solid var(--ink);
        text-align: left;
    }
}

@media (max-width: 1100px) {
    .catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .catalog {
        grid-template-columns: minmax(0, 1fr);
    }

    .mcard {
        min-height: 0;
    }

    .mcard__name {
        margin-top: 28px;
    }
}

/* Phones: the model names stay under the page title (87% of --h1-size,
   Typography); at 40px they outranked the /models and /ru/models titles. */
@media (max-width: 560px) {
    .mcard__name {
        font-size: min(clamp(2.5rem, 2rem + 1.6vw, 3.5rem), calc(var(--h1-size, 100vw) * .87));
    }
}

/* 561-680, one card per row: the hy title (1.2rem + 3.5vw here) is still
   smaller than the names' 40px floor. */
@media (min-width: 561px) and (max-width: 680px) {
    html:lang(hy) .mcard__name {
        font-size: calc((1.2rem + 3.5vw) * .87);
    }
}

@media (max-width: 480px) {
    .filter {
        margin-bottom: 24px;
    }

    .filter__btn {
        padding: 10px 12px;
    }

    .mcard {
        padding: 22px 20px 24px;
    }

    /* Every value under its label (see .deploy__item). */
    .mcard .spec__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .mcard .spec__row dd {
        text-align: left;
        text-wrap: balance;
    }

    /* "All models" on its own row, then a 2 x 2 grid whose rules line up;
       wrapping flex buttons left the dividers at a different place per row. */
    .filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter__btn:first-child {
        grid-column: 1 / -1;
    }
}

/* "Անվտանգություն 1" needs 138px: one button per row below 320px. */
@media (max-width: 319px) {
    .filter {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 320-339, hy: in its 143-150px cell the label (126px) ran through the 12px
   right padding to 4px from the frame. Even 8px sides. */
@media (max-width: 339px) {
    html:lang(hy) .filter__btn {
        padding-inline: 8px;
    }
}

/* The same "All" row and 2 x 2 grid wherever the five buttons do not fit on
   one row: four and then one stretched across the row (en 481-559, ru
   481-599), or 3 + 2 and 4 + 1 in hy (481-820). */
@media (min-width: 481px) and (max-width: 559px) {
    .filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter__btn:first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 560px) and (max-width: 599px) {
    html:lang(ru) .filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html:lang(ru) .filter__btn:first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 560px) and (max-width: 820px) {
    html:lang(hy) .filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html:lang(hy) .filter__btn:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 359px) {
    .mcard {
        padding: 20px 14px 22px;
    }

    .mcard__tagline {
        font-size: 16px;
    }
}

/* Comparison table on portrait tablets (721-1023px). As a table it needs
   about 1000px (hy 1100px) and scrolled sideways, which touch screens do not
   show: output price, latency and status were off screen with no sign of
   them. Each model becomes one row block: the name at the left and its seven
   values under their labels (data-label, upper-cased in PHP) in two rows of
   four columns. Status closes the first row; latency, the longest value,
   spans two columns of the second. Phones stack the values in one column
   (.ledger--stack, 720px and below). */
@media (min-width: 721px) and (max-width: 1023px) {
    .ledger--models {
        display: block;
    }

    /* One set of columns for all rows (each row is a subgrid of it): the
       status track takes the widest tag, so the tags stay on one line, and
       the values still line up from row to row. */
    .ledger--models tbody {
        display: grid;
        grid-template-columns: 80px repeat(3, 1fr) max-content;
        column-gap: 14px;
    }

    .ledger--models thead {
        display: none;
    }

    /* Rows: labels, values, a spacer, labels, values. Each cell spans a
       label and a value row as a subgrid, so a label that wraps to two
       lines ("ՀԱՄԱՏԵՔՍՏԻ ՊԱՏՈՒՀԱՆ") does not push its value below the
       others in the row. */
    .ledger--models tbody tr {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 80px repeat(4, minmax(0, 1fr));
        grid-template-columns: subgrid;
        grid-template-rows: auto auto 10px auto auto;
        gap: 4px 14px;
        padding: 18px 0 20px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--models tbody tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .ledger--models tbody th,
    .ledger--models td {
        padding: 0;
        border: 0;
    }

    .ledger--models tbody th {
        display: block;
        grid-column: 1;
        grid-row: 1 / -1;
        font-size: 17px;
        line-height: 1.35;
    }

    .ledger--models td {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        justify-items: start;
    }

    .ledger--models td[data-label]::before {
        content: attr(data-label);
        align-self: end;
        color: var(--text-3);
        font: 500 11px/1.4 var(--font-mono);
        letter-spacing: .08em;
    }

    .ledger--models .n,
    .ledger--models .tag {
        text-align: left;
        white-space: normal;
    }

    @supports (grid-template-columns: subgrid) {
        .ledger--models .tag {
            white-space: nowrap;
        }
    }

    /* A grid item: without this the tag stretched to the height of a row
       whose type wraps (Garni, "Վեկտորային ներկայացումներ"). */
    .ledger--models td > .tag {
        align-self: start;
    }

    .ledger--models td[colspan] {
        grid-column: span 2;
    }

    /* Input and output (or the merged price) open the second group. */
    .ledger--models td:nth-child(5),
    .ledger--models td:nth-child(6) {
        grid-row: 4 / span 2;
    }

    .ledger--models td:last-child {
        grid-column: 5;
        grid-row: 1 / span 2;
    }

    .ledger--models td:nth-last-child(2) {
        grid-column: 4 / span 2;
        grid-row: 4 / span 2;
    }
}

/* 1024-1239: the table fits, but latency got about 100px and wrapped to
   three or four lines while the no-wrap status tag took 165px. Latency keeps
   150px; the tag stays a one-line label (as everywhere else), a little
   tighter set. */
@media (min-width: 1024px) and (max-width: 1239px) {
    .ledger--models thead th:nth-child(7) {
        min-width: 150px;
    }

    .ledger--models .tag {
        letter-spacing: .04em;
    }
}

/* Desktop, hy: the no-wrap headers ("ՀԱՄԱՏԵՔՍՏԻ ՊԱՏՈՒՀԱՆ", in the 14px
   numeric face) and the no-wrap mono price cell ("$0,006 ձայնագրության մեկ
   րոպեի համար") made the table 1382px wide, so the status column sat past
   the right edge of its scroller at every desktop width. The 1024-1239
   treatment applies here too: headers wrap in 11px, the worded price is set
   in the text face; latency keeps one line (except Garni's) and the model
   ids stay whole. ru and en fit unchanged. */
@media (min-width: 1240px) {
    html:lang(hy) .ledger--models thead th {
        white-space: normal;
    }

    html:lang(hy) .ledger--models thead .n {
        font-size: 11px;
    }

    html:lang(hy) .ledger--models thead th:nth-child(7) {
        min-width: 285px;
    }

    html:lang(hy) .ledger--models code {
        white-space: nowrap;
    }

    html:lang(hy) .ledger--models .n[colspan] {
        font-family: var(--font-sans);
        font-size: 15px;
        white-space: normal;
    }
}

/* Model spec sheet */
.msheet__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
}

.msheet__ver {
    padding: 6px 10px;
    border: 1px solid var(--ink);
    font: 600 14px/1 var(--font-mono);
    letter-spacing: .06em;
    vertical-align: middle;
}

.msheet__scripts {
    display: flex;
    gap: 14px;
    margin: 18px 0 0;
    color: var(--text-3);
    font-size: 18px;
}

.msheet__scripts span + span::before {
    content: "·";
    margin-right: 14px;
}

@media (max-width: 560px) {
    .msheet__scripts {
        flex-wrap: wrap;
        gap: 2px 10px;
        font-size: 16px;
    }

    .msheet__scripts span + span::before {
        margin-right: 10px;
    }
}

.origin {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    margin-top: 36px;
    padding: 22px 0 0;
    border-top: 1px solid var(--ink);
}

.origin .icon {
    width: 32px;
    height: 32px;
}

.origin p {
    margin: 4px 0 0;
    color: var(--text-2);
}

@media (max-width: 480px) {
    .origin {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 14px;
    }
}

/* Small phones: the icon goes above the heading and the text gets the full
   column (beside it, about 200px at 280px: one or two words per line). */
@media (max-width: 400px) {
    .origin {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .origin .icon {
        width: 28px;
        height: 28px;
    }
}

.others {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.others a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 20px 18px 22px 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
}

.others strong {
    font-size: 26px;
    font-weight: 800;
    font-stretch: 70%;
    letter-spacing: .03em;
    line-height: 1;
}

.others span {
    color: var(--text-3);
    font-size: 14px;
}

.others a:hover strong {
    text-decoration: underline;
    text-decoration-color: var(--arev);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

@media (max-width: 1000px) {
    .others {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Two columns: a gutter between them, and the fifth model spans the last row
   so its rule runs the full width like the rows above. */
@media (min-width: 421px) and (max-width: 1000px) {
    .others {
        column-gap: var(--gap);
    }

    .others a {
        padding-right: 0;
    }

    .others li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .others {
        grid-template-columns: minmax(0, 1fr);
    }

    .others a {
        padding: 16px 0 18px;
    }
}

/* ---------- Pricing ---------- */

.plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 32px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.plan--popular {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

.plan__badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px 10px;
    background: var(--arev);
    color: var(--ink);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .1em;
}

.plan__name {
    margin: 0;
    color: var(--text-2);
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.plan--popular .plan__name {
    color: var(--on-ink-2);
}

.plan__price {
    margin: 40px 0 6px;
    font-size: clamp(3rem, 2.2rem + 2.6vw, 4.75rem);
    font-weight: 700;
    font-stretch: 68%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.plan__price--text {
    font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.plan__period {
    margin: 0;
    color: var(--text-3);
    font-size: 14px;
}

.plan--popular .plan__period {
    color: var(--on-ink-2);
}

.plan__text {
    margin: 22px 0 22px;
    color: var(--text-2);
}

.plan--popular .plan__text {
    color: var(--on-ink-2);
}

.plan .ticks {
    margin-bottom: 32px;
    font-size: 15px;
}

.plan--popular .ticks li {
    border-top-color: var(--ink-line);
}

.plan--popular .ticks li::before {
    color: var(--arev);
}

.plan .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Three plans side by side: the worded Enterprise price had a shorter line
   box (1.15 x 56px) than the figures beside it (1 x 68px), so its period
   and text sat 11-14px higher than in the other two cards. The same box
   height, and the word sits on the figures' baseline: that lies .876 of the
   figure size below the top, the word's .883 of its own size (measured),
   hence the bottom padding. */
@media (min-width: 1001px) {
    .plan__price--text {
        display: flex;
        align-items: flex-end;
        min-height: clamp(3rem, 2.2rem + 2.6vw, 4.75rem);
        padding-bottom: calc(clamp(3rem, 2.2rem + 2.6vw, 4.75rem) * .124 - clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem) * .117);
        line-height: 1;
    }
}

/* Below desktop the last line keeps two words or more ("прототипы.",
   "почте" and "20%)։" were left alone on phones and tablets). */
@media (max-width: 1239px) {
    .plan__text,
    .plan .ticks li,
    .pricenotes li {
        text-wrap: pretty;
    }
}

@media (max-width: 1000px) {
    .plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 681px) and (max-width: 1000px) {
    .plan {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto auto auto 1fr auto;
        column-gap: 32px;
    }

    /* Not the badge: a grid column would become its containing block. */
    .plan > :not(.plan__badge) {
        grid-column: 1;
    }

    .plan .ticks {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        margin: 0;
    }

    /* The CTA runs under both columns: in the 5fr column (256px at 768px)
       "Связаться с отделом продаж" and "Կապվել վաճառքի բաժնի հետ" broke
       onto two lines. */
    .plan .ticks {
        grid-row: 1 / 5;
    }

    .plan .btn {
        grid-column: 1 / -1;
        align-self: end;
        justify-self: start;
        margin-top: 28px;
    }

    /* Room under the corner badge, which rested on the first rule of the
       feature list (5px above it). */
    .plan--popular {
        padding-top: 44px;
    }
}

/* Three plans in a row: the hy label of the sales button missed one line by
   2px at 1180px. Slimmer label padding fits it from 1180px; below that the
   longest hy and ru labels need two lines, so every plan button keeps a
   two-line box there and the three buttons stay level (en fits one line). */
@media (min-width: 1001px) and (max-width: 1239px) {
    .plan .btn__label {
        padding-inline: 18px;
    }
}

@media (min-width: 1001px) and (max-width: 1179px) {
    html:lang(hy) .plan .btn__label,
    html:lang(ru) .plan .btn__label {
        min-height: 60px;
    }
}

@media (max-width: 560px) {
    /* A worded price ("По запросу") is a figure like the numeric prices
       beside it (48px), but words: never above the page title (95% of
       --h1-size, Typography). */
    .plan__price--text {
        font-size: min(clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem), calc(var(--h1-size, 100vw) * .95));
    }

    .plan .btn {
        align-self: stretch;
    }

    .plan .btn__label {
        flex: 1 1 auto;
    }

    /* The API id goes under the model name instead of breaking at its hyphen. */
    .ledger--rates th > code {
        display: block;
        margin-top: 2px;
    }
}

@media (max-width: 480px) {
    .plan {
        padding: 26px 20px 28px;
    }

    /* Room under the "popular" badge, which sits over the plan name otherwise. */
    .plan--popular {
        padding-top: 44px;
    }

    .plan__price {
        margin-top: 28px;
    }

    .plan__text {
        overflow-wrap: break-word;
    }

    .plan .btn__label {
        padding-inline: 16px;
    }
}

/* Smallest phones: slimmer card padding and button parts, so "Անհատական",
   "կազմակերպությունների" and the button labels keep their words whole. */
@media (max-width: 360px) {
    .plan {
        padding-inline: 16px;
    }

    .plan__text {
        font-size: 16px;
    }

    .plan__price--text {
        font-size: min(clamp(1.75rem, 11vw, 2.25rem), calc(var(--h1-size, 100vw) * .95));
        overflow-wrap: normal;
    }

    .plan .ticks li {
        padding-left: 24px;
    }

    .plan .btn__icon {
        width: 44px;
    }

    .plan .btn__label {
        padding-inline: 14px;
    }
}

@media (max-width: 300px) {
    .plan .ticks {
        font-size: 14px;
    }
}

/* The four columns of the token table need 315-340px (hy 340px, wider than
   the 328px column at 360px). Below 380px the model takes its own line and
   each price carries its label (data-label). */
@media (max-width: 379px) {
    .ledger--rates thead {
        display: none;
    }

    .ledger--rates,
    .ledger--rates tbody {
        display: block;
    }

    /* The third column is wider: hy "Համատեքստ" is 86px. */
    .ledger--rates tr {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 7fr);
        gap: 8px 12px;
        padding: 14px 0 15px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--rates tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .ledger--rates th,
    .ledger--rates td {
        padding: 0;
        border: 0;
    }

    .ledger--rates td.n {
        text-align: left;
    }

    .ledger--rates th {
        grid-column: 1 / -1;
    }

    .ledger--rates th > code {
        display: inline;
        margin: 0 0 0 8px;
    }

    /* Upper-case mono labels (PHP upper()), like the table head above 380px
       and the other stacked ledgers. */
    .ledger--rates td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--text-3);
        font: 500 11px/1.5 var(--font-mono);
        letter-spacing: .08em;
    }
}

/* Tablets: the price list keeps two aligned columns. As a wrapping flex row,
   long rows dropped their value under the label and short rows kept it at
   the right. Phones stack every row (.lines-list, 480px and below). */
@media (min-width: 481px) and (max-width: 900px) {
    .split__main--wide .lines-list__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
    }

    .split__main--wide .lines-list__row dd {
        text-align: right;
        text-wrap: pretty;
    }
}

.pricenotes {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: note;
}

.pricenotes li {
    position: relative;
    padding: 12px 0 12px 36px;
    border-top: 1px solid var(--rule);
    color: var(--text-2);
    font-size: 15px;
    counter-increment: note;
}

.pricenotes li::before {
    content: counter(note, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 14px;
    color: var(--text-3);
    font: 500 12px/1.4 var(--font-mono);
}

/* Below desktop: the price list above already closes with a rule, and a
   second one after the 32px gap read as an empty table row on phones. */
@media (max-width: 1239px) {
    .lines-list + .pricenotes li:first-child {
        border-top: 0;
    }
}

/* ---------- FAQ ---------- */

.faq {
    border-top: 1px solid var(--ink);
}

.faq__item {
    border-bottom: 1px solid var(--rule);
}

.faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
    font-weight: 700;
    font-stretch: 87.5%;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q .icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    transition: transform .3s var(--ease);
}

.faq__item[open] .faq__q .icon {
    transform: rotate(45deg);
}

.faq__a {
    max-width: 50em;
    margin: 0;
    padding: 0 0 26px;
    color: var(--text-2);
}

/* ---------- Solutions ---------- */

.sector-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--rule);
}

@media (max-width: 900px) {
    .sector-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Nine sectors in two columns: the last one spans the row and closes the box. */
@media (min-width: 561px) and (max-width: 900px) {
    .sector-nav li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.sector-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 16px 18px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    color: inherit;
    font-weight: 600;
    font-stretch: 87.5%;
    text-decoration: none;
}

.sector-nav a:hover {
    background: var(--paper-2);
}

.sector-nav .icon {
    flex: none;
    width: 22px;
    height: 22px;
}

.sector-nav a span {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Phones: one full-width link per sector, easy to tap and read. */
@media (max-width: 560px) {
    .sector-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .sector-nav a {
        padding: 14px 16px;
        line-height: 1.35;
    }
}

.sector {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    padding: clamp(40px, 5vw, 64px) 0;
    border-top: 1px solid var(--ink);
}

.sector:last-child {
    padding-bottom: 0;
}

.sector__head {
    grid-column: 1 / span 5;
}

.sector__num {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--text-3);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
}

.sector__icon {
    width: 40px;
    height: 40px;
    margin-top: 28px;
}

.sector__name {
    margin: 18px 0 14px;
    font-size: clamp(1.875rem, 1.3rem + 1.8vw, 3rem);
    font-weight: 700;
    font-stretch: 72%;
    line-height: 1.02;
}

.sector__intro {
    margin: 0;
    color: var(--text-2);
    font-size: 17px;
    max-width: 30em;
}

.sector__body {
    grid-column: 6 / -1;
}

.sector__label {
    margin: 0 0 12px;
    color: var(--text-3);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.sector__cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap);
    margin: 0;
}

.sector__case {
    padding: 18px 0 22px;
    border-top: 1px solid var(--rule);
}

.sector__case dt {
    margin-bottom: 6px;
    font-weight: 700;
    font-stretch: 87.5%;
}

.sector__case dd {
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
}

@media (max-width: 1000px) {
    .sector__head,
    .sector__body {
        grid-column: 1 / -1;
    }
}

/* Below desktop: a use-case title that wraps kept the 28px body leading, a
   wider step inside the bold title than the 6px to its text, and the
   two-line sector links (561-1239) were 89px cells with the same gaps.
   Closer lines, as in the phone links (560px and below). */
@media (max-width: 1239px) {
    .sector__case dt {
        line-height: 1.3;
    }

    .sector-nav a {
        line-height: 1.35;
    }
}

@media (max-width: 620px) {
    .sector__cases {
        grid-template-columns: 1fr;
    }

    .sector__name {
        font-size: min(clamp(1.875rem, 1.3rem + 1.8vw, 3rem), calc((100vw - 2 * var(--gutter)) / 9.6));
        overflow-wrap: break-word;
    }
}

/* Phones: a sector name is a section title and stays under the page title
   (87% of --h1-size, Typography), which is smaller in /ru than in hy. */
@media (max-width: 560px) {
    .sector__name {
        font-size: min(clamp(1.875rem, 1.3rem + 1.8vw, 3rem), calc((100vw - 2 * var(--gutter)) / 9.6), calc(var(--h1-size, 100vw) * .87));
    }
}

/* Smallest phones: 24px at most. */
@media (max-width: 359px) {
    .sector__name {
        font-size: min(1.5rem, calc((100vw - 2 * var(--gutter)) / 10.8), calc(var(--h1-size, 100vw) * .87));
    }
}

/* Below desktop wrapped names split into even lines instead of leaving the
   last word alone ("Туризм и гостиничный / бизнес"). */
@media (max-width: 1239px) {
    .sector__name,
    .sector-nav a span {
        text-wrap: balance;
    }
}

.flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink-line);
    border-left: 1px solid var(--ink-line);
}

.flow__item {
    position: relative;
    padding: 24px 26px 28px;
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
}

.flow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 30px;
    right: -7px;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--on-ink-2);
    border-right: 1px solid var(--on-ink-2);
    background: var(--ink);
    transform: rotate(45deg);
}

.flow__num {
    color: var(--arev);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
}

.flow__title {
    margin: 30px 0 8px;
    color: var(--on-ink);
    font-size: 24px;
    font-weight: 700;
    font-stretch: 75%;
}

.flow__text {
    margin: 0;
    color: var(--on-ink-2);
    font-size: 15px;
}

/* Four columns below desktop: slimmer padding and title keep
   "Հաղորդագրություն" inside its cell. */
@media (max-width: 1239px) {
    .flow__item {
        padding-inline: 20px;
    }

    .flow__title {
        font-size: 22px;
    }
}

@media (max-width: 1000px) {
    .flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow__item::after {
        display: none;
    }
}

@media (max-width: 1239px) {
    .flow__title {
        text-wrap: balance;
    }
}

/* Phones: one card per row. The number sits close to its title instead of
   34px above it, and the title stays under the section titles on the
   smallest phones (78% of --h1-size, Typography). */
@media (max-width: 560px) {
    .flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .flow__item {
        padding: 20px 20px 24px;
    }

    .flow__title {
        margin-top: 12px;
        font-size: min(22px, max(18px, calc(var(--h1-size, 100vw) * .78)));
    }
}

/* ---------- Trust ---------- */

.docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap);
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.docs li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    font-weight: 600;
    font-stretch: 90%;
}

.docs .icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--text-3);
}

@media (max-width: 640px) {
    .docs {
        grid-template-columns: 1fr;
    }

    /* Titles wrap to 3-4 lines here: the icon marks the first line like a
       bullet instead of floating beside the middle, and the lines close up. */
    .docs li {
        align-items: flex-start;
        line-height: 1.4;
    }

    .docs .icon {
        margin-top: 1px;
    }
}

.notice {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    padding: 36px 0 0;
    border-top: 1px solid var(--ink);
}

.notice__side {
    grid-column: 1 / span 3;
}

.notice__main {
    grid-column: 4 / -1;
}

.notice__title {
    margin: 0 0 14px;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 700;
    font-stretch: 72%;
    line-height: 1.05;
    text-wrap: balance;
}

.notice__main p {
    margin: 0;
    max-width: 44em;
    color: var(--text-2);
    font-size: 18px;
}

@media (max-width: 900px) {
    .notice__side,
    .notice__main {
        grid-column: 1 / -1;
    }
}

/* 901-1239: "ՊԱՏԱՍԽԱՆԱՏՈՒ ԲԱՑԱՀԱՅՏՈՒՄ" wraps in the side column; the square
   marks its first line, as on phones (.eyebrow, 560px and below), instead of
   floating between the two. */
@media (max-width: 1239px) {
    .notice__side .eyebrow {
        align-items: flex-start;
    }

    .notice__side .eyebrow > .sq {
        margin-top: 3px;
    }
}

/* Phones: a block title, under the section titles (70% of --h1-size,
   Typography); its 28px floor made it the loudest heading on /trust. */
@media (max-width: 560px) {
    .notice__title {
        font-size: min(clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem), max(18px, calc(var(--h1-size, 100vw) * .7)));
    }

    /* /ru/developers: the dark notice is the SDK section's only heading, and
       under the small .h1--long page title 70% fell to the 18px floor and the
       grey 17px copy read larger than the title. It takes the section title's
       87% (20px floor) there, and the copy steps down to 16px at 380px. */
    html:lang(ru) .notice--dark .notice__title {
        font-size: min(clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem), max(20px, calc(var(--h1-size, 100vw) * .87)));
    }
}

@media (max-width: 380px) {
    html:lang(ru) .notice--dark .notice__main p {
        font-size: 1rem;
    }
}

/* 901-1239: the CTA band below it stacks its eyebrow over the title (at
   1239px and below); the notice kept a three-column margin, so the two dark
   blocks started their titles 246px apart. */
@media (max-width: 1239px) {
    .notice--dark .notice__side,
    .notice--dark .notice__main {
        grid-column: 1 / -1;
    }
}

/* ---------- Company ---------- */

.story {
    columns: 2 22em;
    column-gap: calc(var(--gap) * 2);
}

.story p {
    margin: 0 0 1.2em;
    color: var(--text-2);
    font-size: 18px;
    break-inside: avoid;
}

.quote {
    margin: 40px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--ink);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    font-weight: 700;
    font-stretch: 72%;
    line-height: 1.08;
}

.quote::before {
    content: "";
    display: block;
    width: 40px;
    height: 6px;
    margin-bottom: 22px;
    background: var(--arev);
}

/* Smallest phones: long-form copy at the body size, and a pull quote that
   follows the width (its 28px floor set 10 lines of 1-2 words at 280px). */
@media (max-width: 380px) {
    .story p,
    .notice__main p {
        font-size: 17px;
    }

    .quote {
        font-size: clamp(21px, 7.2vw, 28px);
        line-height: 1.12;
    }
}

.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--gap);
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
}

.timeline__year {
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
    font-weight: 700;
    font-stretch: 68%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.timeline__item:last-child .timeline__year {
    color: transparent;
    -webkit-text-stroke: 1px var(--ink);
}

/* A word instead of a year (hy "Առաջիկայում", about 5.8em; set in
   company.php for labels over 8 characters) gets smaller glyphs so it fits
   the year column. The line height stays at the year size, so the row does
   not move. */
.timeline__year--long {
    font-size: clamp(1.375rem, 3.1vw - 4px, 2.25rem);
    line-height: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
}

.timeline__text {
    margin: 0;
    padding-top: 4px;
    color: var(--text-2);
    font-size: 17px;
    max-width: 40em;
}

.office {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}

.office__info {
    grid-column: 1 / span 6;
}

.office__dial {
    grid-column: 8 / -1;
}

@media (max-width: 900px) {
    .office__info,
    .office__dial {
        grid-column: 1 / -1;
    }

    .timeline__year--long {
        font-size: clamp(1.375rem, 4vw - 3px, 2.125rem);
    }
}

/* Tablets: the sundial and its caption side by side (as in the home hero)
   instead of a 700px dial filling the section under the contact list. */
@media (min-width: 600px) and (max-width: 900px) {
    .office__dial {
        margin-top: 16px;
    }

    .office__dial .dial {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 0 32px;
        align-items: end;
    }

    .office__dial .dial__caption {
        margin-top: 0;
    }

    /* Sunrise and sunset under the time: beside it they broke into label and value. */
    .office__dial .dial__meta {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    /* A wrapped label splits evenly instead of leaving "ԺԱՄԱՆԱԿ" alone. */
    .office__dial .dial__label {
        text-wrap: balance;
    }
}

/* 600-639, hy: the 5fr caption column (220-236px) was a few pixels short of
   "ԵՐԵՎԱՆ · ԱՐԵՎԱՅԻՆ ԺԱՄԱՆԱԿ" (228px) at 600-610 and left the dot at the end
   of line one. Tighter tracking keeps the label on one line. */
@media (min-width: 600px) and (max-width: 639px) {
    html:lang(hy) .office__dial .dial__label {
        letter-spacing: .05em;
    }
}

/* Phones: the year or label sits above its text, both at full width. */
@media (max-width: 640px) {
    .timeline__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 20px 0;
    }

    .timeline__text {
        padding-top: 0;
    }

    .timeline__year--long {
        font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
    }
}

/* ---------- Careers ---------- */

.roles td,
.roles th {
    vertical-align: middle;
}

.roles__apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.roles__apply .icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Stacked roles (ledger--stack): the title, one "Team / Location / Type"
   line and a full-height Apply link. */
@media (max-width: 720px) {
    .roles tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 10px;
        padding-bottom: 6px;
    }

    .roles tbody th {
        flex: 0 0 100%;
        margin-bottom: 4px;
    }

    .roles td {
        color: var(--text-2);
    }

    /* A hairline closes the team and the location: a "/" before the next
       field started wrapped lines and read as part of "Երևան / հիբրիդ". */
    .roles td:nth-child(2)::after,
    .roles td:nth-child(3)::after {
        content: "";
        display: inline-block;
        width: 1px;
        height: .9em;
        margin-left: 10px;
        vertical-align: -.1em;
        background: var(--rule-2);
    }

    .roles td:last-child {
        flex: 0 0 100%;
    }

    .roles .roles__apply {
        min-height: 44px;
        border-bottom: 0;
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--rule-2);
        text-underline-offset: .3em;
    }

    .roles .roles__apply:hover {
        text-decoration-color: var(--arev);
    }
}

/* Phones: "Team | Location" on one line and the type on the next for every
   role, instead of some roles on one line and others wrapped. */
@media (max-width: 420px) {
    .roles td:nth-child(3)::after {
        content: none;
    }

    .roles td:nth-child(4) {
        flex: 0 0 100%;
    }
}

/* Below 340px "Հաճախորդներ | Երևան / հեռավար" no longer fits one line and
   the hairline hung at the end of the first: one field per line. */
@media (max-width: 340px) {
    .roles td:nth-child(2)::after {
        content: none;
    }

    .roles td:nth-child(3) {
        flex: 0 0 100%;
    }
}

/* Portrait tablets: five columns squeezed the role titles to two or three
   lines and split "Երևան / հիբրիդ" after the slash. Each role becomes a list
   row: the title over a "Team | Location | Type" line, Apply at the right. */
@media (min-width: 721px) and (max-width: 900px) {
    .roles,
    .roles tbody {
        display: block;
    }

    .roles thead {
        display: none;
    }

    .roles tbody tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: baseline;
        row-gap: 4px;
        padding: 16px 0 17px;
        border-bottom: 1px solid var(--rule);
    }

    .roles tbody tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .roles tbody th,
    .roles td {
        display: block;
        padding: 0;
        border: 0;
    }

    .roles tbody th {
        grid-column: 1 / 4;
        grid-row: 1;
        font-size: 17px;
        line-height: 1.35;
    }

    .roles td {
        grid-row: 2;
        color: var(--text-2);
        white-space: nowrap;
    }

    .roles td:nth-child(2)::after,
    .roles td:nth-child(3)::after {
        content: "";
        display: inline-block;
        width: 1px;
        height: .9em;
        margin-inline: 12px;
        vertical-align: -.1em;
        background: var(--rule-2);
    }

    .roles td:last-child {
        grid-column: 4;
        grid-row: 1 / span 2;
        align-self: center;
        padding-left: 24px;
    }

    /* The row's action in ink, as at 720px and below: it inherited the grey
       of the metadata cells. */
    .roles .roles__apply {
        color: var(--ink);
    }
}

/* Landscape tablets: the location and the type stay on one line ("Երևան /
   հիբրիդ", "Полная занятость"); the role title takes the wrapping. */
@media (min-width: 901px) and (max-width: 1239px) {
    .roles td:nth-child(3),
    .roles td:nth-child(4) {
        white-space: nowrap;
    }

    /* With 16px between the columns and no column rules, neighbours read as
       one phrase ("Исследования Ереван"): 28px, the titles take the wrapping. */
    .roles thead th:first-child {
        width: 32%;
    }

    .roles th,
    .roles td {
        padding-right: 28px;
    }
}

/* Touch tablets: a 44px hit area for Apply (25px tall), the layout and its
   rule unchanged (as .lines-list__row a). */
@media (min-width: 721px) and (max-width: 1239px) {
    .roles .roles__apply {
        position: relative;
    }

    .roles .roles__apply::after {
        content: "";
        position: absolute;
        inset: -9px 0;
    }
}

/* ---------- Contact ---------- */

.contact {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}

.contact__form {
    grid-column: 1 / span 7;
}

.contact__side {
    grid-column: 9 / -1;
}

@media (max-width: 1000px) {
    .contact__form,
    .contact__side {
        grid-column: 1 / -1;
    }

    .contact__side {
        margin-top: 32px;
    }
}

.form-title {
    margin: 0 0 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ink);
    font-size: 26px;
    font-weight: 700;
    font-stretch: 78%;
}

/* Phones: under the page title (87% of --h1-size, Typography). */
@media (max-width: 560px) {
    .form-title {
        font-size: min(26px, calc(var(--h1-size, 100vw) * .87));
    }
}

.form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.field--full {
    grid-column: 1 / -1;
}

/* One column up to 599px: at 561-589 the two columns (249-263px) could not
   hold "Կազմակերպություն" and "ըստ ցանկության" on one line (262px), and the
   marker wrapped under its label only in that field, so its input sat 14px
   below the Name input beside it. */
@media (max-width: 599px) {
    .form {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* The "optional" marker drops below the label when both do not fit. */
.field__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    font-size: 14px;
    font-weight: 600;
}

.field__opt {
    color: var(--text-3);
    font: 400 12px/1 var(--font-mono);
}

/* JetBrains Mono has no Armenian: the letters fell back to the sans face but
   each space kept its 7.2-7.7px mono cell ("ըստ ցանկության", "Գրանցման
   համար" read double-spaced), as in .cta__or. The registration number stays mono. */
html:lang(hy) .field__opt,
html:lang(hy) .address__label {
    font-family: var(--font-sans);
    letter-spacing: .02em;
}

/* 1001-1099, form beside the contact details: the hy columns are 256-285px
   wide and label, gap and marker took 262px (wrapped at 1001-1019). A tighter
   gap and an 11px marker need 247px. */
@media (min-width: 1001px) and (max-width: 1099px) {
    html:lang(hy) .field__label {
        column-gap: 6px;
    }

    html:lang(hy) .field__opt {
        font-size: 11px;
    }
}

/* Phones: the marker always sits under its label, not beside it on one field
   and below it on the next. */
@media (max-width: 400px) {
    .field__label {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

.input {
    width: 100%;
    min-height: 52px;
    padding: 13px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 0;
    background: var(--paper);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
}

.input:hover {
    border-color: var(--text-3);
}

.input:focus {
    border-color: var(--ink);
    outline: 2px solid var(--arev);
    outline-offset: 0;
}

textarea.input {
    min-height: 168px;
    resize: vertical;
}

.select {
    position: relative;
}

.select .input {
    padding-right: 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.select .icon {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    pointer-events: none;
}

/* The chosen topic keeps 16px type (no zoom on focus in iOS) and gets more
   of the width; a label longer than that ends in an ellipsis. After the base
   .select .icon rule, which overrode the icon position here before. */
@media (max-width: 360px) {
    .select .input {
        padding-left: 12px;
        padding-right: 32px;
    }

    .select .icon {
        right: 10px;
        width: 16px;
        height: 16px;
        margin-top: -8px;
    }
}

.field.has-error .input {
    border-color: var(--error);
}

.field__error {
    margin: 0;
    color: var(--error);
    font-size: 13px;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
}

/* Touch screens: where the consent fits one line (en from 768px, hy and ru
   at 900px) the required checkbox had a 23px tap target. 41px, layout unchanged. */
@media (max-width: 1239px) {
    .check {
        padding-block: 9px;
        margin-block: -9px;
    }
}

.check input {
    display: grid;
    flex: none;
    place-content: center;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1.5px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.check input::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--paper);
    border-bottom: 2px solid var(--paper);
    transform: translateY(-1px) rotate(-45deg);
    opacity: 0;
}

.check input:checked {
    background: var(--ink);
}

.check input:checked::after {
    opacity: 1;
}

.field.has-error .check input {
    border-color: var(--error);
}

.form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.form__submit .btn {
    font-family: var(--font-sans);
}

/* Phones: a full-width submit button with the arrow cell at the right edge. */
@media (max-width: 480px) {
    .form__submit .btn {
        width: 100%;
    }

    .form__submit .btn__label {
        flex: 1;
        padding-inline: 18px;
    }
}

button.btn {
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.hp {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    margin: 0 0 28px;
    padding: 18px 20px;
    border: 1px solid;
    border-left-width: 5px;
}

.alert p {
    margin: 0;
}

.alert strong {
    display: block;
    margin-bottom: 4px;
}

.alert--error {
    border-color: var(--error);
    background: #fcf1f0;
    color: #6f1812;
}

.alert--ok {
    border-color: var(--go-ink);
    background: #eef7f1;
    color: #0f4a31;
}

.lines-list {
    margin: 0;
    border-top: 1px solid var(--ink);
}

.lines-list__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
}

.lines-list__row dt {
    color: var(--text-3);
}

.lines-list__row dd {
    margin: 0;
    font-weight: 600;
}

.lines-list__row a {
    text-decoration: none;
    border-bottom: 1px solid var(--rule-2);
}

.lines-list__row a:hover {
    border-bottom-color: var(--arev);
}

/* Touch screens: e-mail and phone links get a 43px hit area inside their
   row; the underline stays under the text. */
@media (max-width: 1239px) {
    .lines-list__row a {
        position: relative;
    }

    .lines-list__row a::after {
        content: "";
        position: absolute;
        inset: -11px 0;
    }
}

/* The narrow contact column (about 304px): every value under its label, as on
   phones, instead of long labels stacked and short ones side by side. */
@media (min-width: 1001px) and (max-width: 1239px) {
    .contact__side .lines-list__row {
        flex-direction: column;
        gap: 2px;
    }
}

/* Desktop, hy and ru: the long labels and the working hours still wrapped
   under their label while the other rows stayed side by side (hy 1280:
   two of ten rows stacked). One label-over-value list; en fits inline. */
@media (min-width: 1240px) {
    html:lang(hy) .contact__side .lines-list__row,
    html:lang(ru) .contact__side .lines-list__row {
        flex-direction: column;
        gap: 2px;
    }
}

/* Office contacts on /company: the long address (and the hours at some
   widths) wrapped under the label while the short rows stayed side by
   side. Every value under its label below desktop. */
@media (max-width: 1239px) {
    .office__info .lines-list__row {
        flex-direction: column;
        gap: 2px;
    }
}

/* 561-900, full-width list: stacked, the short values used a third of each
   row. Label and value in two aligned columns, like the facts list (.kv)
   above it on the same page. */
@media (min-width: 561px) and (max-width: 900px) {
    .office__info .lines-list__row {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: 16px;
        align-items: baseline;
    }
}

/* Phones: the contact lists stack every value under its label up to 560px:
   at 481-555 the hy working hours (481-515 in ru) wrapped under their label
   while the other rows kept a right-aligned value. */
@media (max-width: 560px) {
    .contact__side .lines-list__row {
        flex-direction: column;
        gap: 2px;
        padding: 12px 0 13px;
    }
}

/* Phones: every value under its label instead of a mix of wrapped and
   right-aligned rows. */
@media (max-width: 480px) {
    .lines-list__row {
        flex-direction: column;
        gap: 2px;
        padding: 12px 0 13px;
    }
}

.contact__block + .contact__block {
    margin-top: 40px;
}

.contact__side > .stamp {
    margin-top: 36px;
}

/* Stacked layout: the same stamp opens the footer a screen further down. */
@media (max-width: 1000px) {
    .contact__side > .stamp {
        display: none;
    }
}

.contact__h {
    margin: 0 0 14px;
    color: var(--text-3);
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .12em;
}

.address {
    margin: 0;
    font-style: normal;
    font-size: 17px;
    line-height: 1.5;
}

/* The .nobr groups of the address ("ул. Ханджяна, 31А", "Republic of
   Armenia") stay whole on desktop too: 1240px and up broke them after "ул."
   and before "Armenia". */
.address .nobr {
    white-space: nowrap;
}

.address__reg {
    margin: 8px 0 0;
    color: var(--text-3);
    font-size: 12px;
    letter-spacing: .04em;
}

/* ---------- Legal ---------- */

.legal {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}

.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    grid-column: 1 / span 3;
}

.legal__toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
    counter-reset: toc;
}

.legal__toc li {
    counter-increment: toc;
}

/* Baseline alignment: the 12px numbers sat 3-4px above the baseline of the
   14px titles. */
.legal__toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none;
}

.legal__toc a::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--text-3);
    font: 500 12px/1.6 var(--font-mono);
}

.legal__toc a:hover {
    color: var(--ink);
}

.legal__body {
    grid-column: 4 / span 8;
}

.legal__intro {
    margin: 0 0 40px;
    font-size: 19px;
    color: var(--text-2);
}

.legal__section {
    padding: 24px 0 12px;
    border-top: 1px solid var(--rule);
}

/* The number sits on the title's baseline (top-aligned, it read as a
   superscript 8px above it). */
.legal__section h2 {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    font-stretch: 82%;
}

.legal__section h2 span {
    color: var(--text-3);
    font: 500 13px/1.4 var(--font-mono);
}

.legal__section p {
    margin: 0 0 1em;
    color: var(--text-2);
}

/* Below desktop a wrapped section title or contents entry splits into even
   lines ("Հաճախորդների տվյալները / մեր ծառայություններում") instead of
   leaving one word on the last line. */
@media (max-width: 1239px) {
    .legal__section h2,
    .legal__toc a {
        text-wrap: balance;
    }
}

@media (max-width: 900px) {
    .legal__toc,
    .legal__body {
        position: static;
        grid-column: 1 / -1;
    }

    /* Full width, the body text ran to 86-106 characters a line: a reading
       measure. The rules and the contents list keep the full width. */
    .legal__intro,
    .legal__section p,
    .legal__updated {
        max-width: 38em;
    }
}

/* Phones: the section number sits above the title, like the sec-head index. */
@media (max-width: 560px) {
    .legal__section h2 {
        flex-direction: column;
        gap: 4px;
        font-size: 20px;
        line-height: 1.25;
        overflow-wrap: break-word;
    }

    .legal__section h2 span {
        line-height: 1.4;
    }
}

/* ---------- Error page ---------- */

.error {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 128px) 0;
}

.error__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: end;
}

.error__code {
    grid-column: 1 / span 5;
    margin: 0;
    color: transparent;
    font-size: clamp(120px, 6rem + 12vw, 320px);
    font-weight: 300;
    font-stretch: 62.5%;
    line-height: .78;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 1.5px var(--ink);
}

.error__main {
    grid-column: 6 / -1;
}

.error__main .h1 {
    margin: 18px 0 0;
}

.error__main p {
    max-width: 38em;
}

/* Below desktop the last line keeps two words or more, as in .phero__lead. */
@media (max-width: 1239px) {
    .error__main p {
        text-wrap: pretty;
    }
}

.error__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 560px) {
    .error__links {
        gap: 14px 24px;
    }
}

/* Touch tablets: 44px hit areas for the 34px links (48px rows at 480px and
   below); the text and its rule stay where they are. */
@media (min-width: 481px) and (max-width: 1239px) {
    .error__links .link-arrow {
        position: relative;
    }

    .error__links .link-arrow::after {
        content: "";
        position: absolute;
        inset: -5px 0;
    }
}

/* The four hy links (520-532px in a row) wrapped 3 + 1 at 481-571 and at
   901-999, leaving "Կապ" alone on the second row: two even rows instead. */
@media (min-width: 481px) and (max-width: 589px), (min-width: 901px) and (max-width: 999px) {
    html:lang(hy) .error__links {
        display: grid;
        grid-template-columns: repeat(2, max-content);
    }
}

/* Phones: a full-width hairline list, like the mobile menu, instead of 34px
   links wrapping one, one and two per row. */
@media (max-width: 480px) {
    .error__links {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--rule);
    }

    .error__links li {
        border-bottom: 1px solid var(--rule);
    }

    .error__links .link-arrow {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        min-height: 48px;
        padding: 0;
        border-bottom: 0;
    }
}

.error__trace {
    grid-column: 1 / -1;
    max-height: 420px;
    margin: 32px 0 0;
    padding: 20px;
    overflow: auto;
    background: var(--ink);
    color: var(--on-ink);
    font: 12px/1.6 var(--font-mono);
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .error__code,
    .error__main {
        grid-column: 1 / -1;
    }
}

/* ---------- Page-specific details ---------- */

.on-ink-2 {
    color: var(--on-ink-2) !important;
}

.split__main--wide {
    grid-column: 1 / -1;
}

.pricing__sub {
    margin-top: 48px;
}

.pricing__notes {
    margin-top: 32px;
}

.steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
    .steps--3 {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
}

@media (max-width: 1000px) {
    .steps--3 {
        margin-left: 5px;
        border-top: 0;
        border-left: 2px solid var(--ink);
    }

    /* Full-width lines ran to 110-120 characters at 860-1000px. */
    .steps--3 .steps__text {
        max-width: 60ch;
    }

    .steps--3 .steps__item {
        padding: 4px 0 24px 26px;
    }

    .steps--3 .steps__item::before {
        top: 6px;
        left: -7px;
    }

    /* Vertical timeline, as on phones (.steps, 560px and below). */
    .steps--3 .steps__item:last-child {
        padding-bottom: 4px;
    }

    .steps--3 .steps__title {
        margin-top: 12px;
    }
}

.code-block {
    margin-top: 48px;
}

.base-url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
}

.base-url span {
    color: var(--text-3);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: .12em;
}

.base-url code {
    padding: 8px 12px;
    background: var(--ink);
    color: var(--arev);
    font-size: 14px;
}

@media (max-width: 480px) {
    .base-url code {
        max-width: 100%;
        font-size: 13px;
        overflow-wrap: anywhere;
    }
}

.method {
    display: inline-block;
    min-width: 52px;
    padding: 4px 6px;
    border: 1px solid currentColor;
    font: 600 11px/1.2 var(--font-mono);
    letter-spacing: .06em;
    text-align: center;
}

.method--post {
    color: var(--arev-ink);
}

.method--get {
    color: var(--go-ink);
}

.ledger--endpoints tbody th {
    font-weight: 500;
}

@media (max-width: 560px) {
    .ledger--endpoints thead,
    .ledger--limits thead {
        display: none;
    }

    .ledger--endpoints,
    .ledger--endpoints tbody,
    .ledger--limits,
    .ledger--limits tbody,
    .ledger--limits tr,
    .ledger--limits th {
        display: block;
    }

    .ledger--endpoints tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px 14px;
        padding: 14px 0 15px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--limits tr {
        padding: 14px 0 10px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--endpoints tr:first-child,
    .ledger--limits tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .ledger--endpoints th,
    .ledger--endpoints td,
    .ledger--limits th,
    .ledger--limits td {
        display: block;
        padding: 0;
        border: 0;
    }

    .ledger--endpoints td:last-child {
        grid-column: 1 / -1;
    }

    .ledger--endpoints code {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ledger--limits th {
        margin-bottom: 4px;
    }

    .ledger--limits td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 4px 0;
    }

    .ledger--limits td::before {
        content: attr(data-label);
        color: var(--text-3);
        font-family: var(--font-sans);
        font-size: 14px;
        text-align: left;
        white-space: normal;
    }

    /* A worded limit ("Индивидуально", 117px in 14px mono) squeezed its
       labels to two or three lines at 280-320px while the figures above
       kept one-line labels; one size down it takes 101px. */
    .ledger--limits .n--text {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .ledger--endpoints tr {
        column-gap: 12px;
    }

    .ledger--limits td {
        gap: 12px;
    }

    .ledger--endpoints code {
        font-size: 12px;
    }
}

.limits__title {
    margin-top: 56px;
}

.notice--dark {
    border-top-color: var(--on-ink);
}

.notice--dark .notice__main p {
    color: var(--on-ink-2);
}

.notice--dark .notice__title {
    color: var(--on-ink);
}

.section .notice {
    margin-top: clamp(56px, 7vw, 96px);
}

.section .notice--dark {
    margin-top: 0;
}

.commit--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
    .commit--4 {
        grid-template-columns: 1fr;
    }
}

.lines-list--gap {
    margin-top: 20px;
}

.ledger--spec th {
    width: 42%;
    color: var(--text-3);
    font-weight: 500;
}

.ledger--spec td {
    font-weight: 600;
}

.ledger--spec tr:first-child th,
.ledger--spec tr:first-child td {
    border-top: 1px solid var(--ink);
}

/* Up to 560px (as .ledger--endpoints and .ledger--limits) every value sits
   under its label: at 421-560 the two columns gave the labels about 160px,
   and labels and values wrapped to two or three lines. */
@media (max-width: 560px) {
    .ledger--spec,
    .ledger--spec tbody,
    .ledger--spec tr,
    .ledger--spec th,
    .ledger--spec td {
        display: block;
        width: auto;
    }

    .ledger--spec tr {
        padding: 12px 0 13px;
        border-bottom: 1px solid var(--rule);
    }

    .ledger--spec tr:first-child {
        border-top: 1px solid var(--ink);
    }

    .ledger--spec th,
    .ledger--spec td,
    .ledger--spec tr:first-child th,
    .ledger--spec tr:first-child td {
        padding: 0;
        border: 0;
    }

    .ledger--spec th {
        margin-bottom: 3px;
        font-size: 14px;
    }
}

.phero--model .msheet__name {
    font-size: clamp(3rem, 1.6rem + 6vw, 8rem);
    letter-spacing: .02em;
}

/* The name is Latin ("HRAZDAN"): the hy page-title size (html:lang(hy) .h1,
   which won on specificity, and its phone formula) set it at 31-64px, about
   the size of the other model names further down. Same size as ru and en. */
html:lang(hy) .phero--model .msheet__name {
    font-size: clamp(3rem, 1.6rem + 6vw, 8rem);
    line-height: 1;
}

/* 901-1100: the two halves gave the spec labels a 197px column, and
   "Բնորոշ արձագանքման ժամանակ" broke into three lines. The halves stack, as
   at 900px and below. */
@media (min-width: 901px) and (max-width: 1100px) {
    section[aria-labelledby="s-spec"] .split__half {
        grid-column: 1 / -1;
    }

    section[aria-labelledby="s-spec"] .split__half + .split__half {
        margin-top: 32px;
    }
}

.msheet__ver {
    align-self: center;
    font-stretch: 100%;
}

.split .h4 + .ticks {
    margin-bottom: 8px;
}

@media (max-width: 720px) {
    .phero--model .eyebrow {
        align-items: flex-start;
    }

    .phero--model .eyebrow .sq {
        margin-top: 3px;
    }
}

/* ---------- Scroll reveal ---------- */

.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal-ready .reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    /* No delays either: with fill-mode both, the page hero (.phero__main,
       rise .9s .08s) stayed at opacity 0 through its delay, and a throttled
       tab or a capture could show it blank. */
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .reveal-ready .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Print ---------- */

@media print {
    .topbar,
    .masthead,
    .cta,
    .board__panel,
    .code__bar,
    .guides,
    .footer__nav,
    .footer .lang {
        display: none !important;
    }

    body {
        font-size: 11pt;
    }

    .section,
    .phero,
    .hero {
        padding-block: 24px;
    }

    .section--ink,
    .footer,
    .board,
    .abc,
    .code {
        background: #fff !important;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }
}