/* =====================================================================
   WebNest — design system
   Palette, typography, layout primitives and components.
   ===================================================================== */

:root {
    /* Brand */
    --brand-50:  #eef4ff;
    --brand-100: #d9e6ff;
    --brand-200: #b8d0ff;
    --brand-300: #8bb2ff;
    --brand-400: #5a8bff;
    --brand-500: #2f63f6;
    --brand-600: #1d47d6;
    --brand-700: #1637ab;
    --brand-800: #142e85;
    --brand-900: #14296a;

    /* Accent */
    --accent-400: #ffb347;
    --accent-500: #ff9416;
    --accent-600: #e87a05;

    /* Neutrals */
    --ink-900: #0b1220;
    --ink-800: #131c31;
    --ink-700: #1e293b;
    --ink-600: #334155;
    --ink-500: #55637a;
    --ink-400: #7c8aa3;
    --ink-300: #aab5c7;
    --ink-200: #d8dfe9;
    --ink-100: #eef2f7;
    --ink-50:  #f7f9fc;
    --white:   #ffffff;

    /* Semantic */
    --success-bg:  #e7f9f0;
    --success-fg:  #0f7a4d;
    --success-br:  #a8e6c9;
    --danger-bg:   #fdecec;
    --danger-fg:   #b42318;
    --danger-br:   #f5c2c0;
    --warn-bg:     #fff6e5;
    --warn-fg:     #9a5b00;

    /* Type */
    --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;

    /* Space + shape */
    --radius-sm: 0;
    --radius:    0;
    --radius-lg: 0;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(11, 18, 32, .06);
    --shadow-sm: 0 2px 8px rgba(11, 18, 32, .06);
    --shadow-md: 0 10px 30px -12px rgba(11, 18, 32, .18);
    --shadow-lg: 0 28px 60px -24px rgba(11, 18, 32, .28);
    --shadow-brand: 0 18px 40px -18px rgba(47, 99, 246, .55);

    --container: 1180px;
    --nav-h: 74px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

/* `overflow-x: clip` keeps any off-canvas decoration from widening the document.
 *
 * The mobile nav drawer sits at translateX(100%), so although it is invisible it still
 * occupies a box past the right edge; `visibility: hidden` does not remove that box from
 * the overflow calculation. Without a guard, a 390px phone reported a 671px-wide document,
 * which renders as a zoomed-out page that scrolls sideways - "not clear, not responsive".
 *
 * `clip` rather than `hidden` on purpose: `hidden` would turn the root into a scroll
 * container and break `position: sticky` on .site-header. `clip` just clips.
 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Clamp the off-canvas mobile nav drawer. `clip` (not `hidden`) so the body does not
       become a scroll container, which would break `position: sticky` on .site-header. */
    overflow-x: clip;
}

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

/* Sprite icons default to one line-height so an unsized <svg><use/></svg>
   still renders sensibly. Component rules below set explicit sizes. */
svg { display: block; width: 1em; height: 1em; }

a { color: var(--brand-600); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand-700); }

h1, h2, h3, h4, h5 {
    margin: 0 0 .5em;
    color: var(--ink-900);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.022em;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--ink-200); margin: 2.5rem 0; }

:focus-visible {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: 0;
}

/* ------------------------------------------------------------- layout */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 22px;
}

.section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0; }
.section--alt { background: var(--ink-50); }
.section--ink {
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(47, 99, 246, .30), transparent 62%),
        radial-gradient(700px 380px at 88% 8%, rgba(255, 148, 22, .16), transparent 60%),
        linear-gradient(160deg, var(--ink-900), #101a30 55%, #0d1526);
    color: var(--ink-200);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink p { color: var(--ink-300); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}

.stack-sm > * + * { margin-top: .6rem; }
.stack > * + * { margin-top: 1.1rem; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }
.lead {
    font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
    color: var(--ink-500);
    line-height: 1.68;
}
.section--ink .lead { color: var(--ink-300); }

/* ----------------------------------------------------------- headings */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-600);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    padding: .38rem .85rem;
    border-radius: 0;
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-500);
}
.section--ink .eyebrow {
    color: var(--brand-200);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
}
.section--ink .eyebrow::before { background: var(--accent-400); }

.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------ buttons */
.btn {
    --btn-bg: var(--brand-600);
    --btn-fg: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.5rem;
    font: inherit;
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow: var(--shadow-brand); }
.btn--primary:hover { box-shadow: 0 22px 46px -18px rgba(47, 99, 246, .72); }

.btn--accent { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); box-shadow: 0 18px 40px -18px rgba(255, 148, 22, .6); }

.btn--ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-200); }
.btn--ghost:hover { background: var(--white); border-color: var(--ink-300); color: var(--ink-900); box-shadow: var(--shadow-sm); }

.btn--light { background: rgba(255, 255, 255, .10); color: var(--white); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.btn--light:hover { background: rgba(255, 255, 255, .18); color: var(--white); }

.btn--lg { padding: 1rem 1.9rem; font-size: 1.03rem; }
.btn--sm { padding: .58rem 1.05rem; font-size: .87rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* --------------------------------------------------------------- nav */
/* =====================================================================
   Contact strip above the navigation
   ---------------------------------------------------------------------
   WhatsApp and the support email sit on the left; a short trust note sits on
   the right. Rectangular, like everything else on the public site. Collapses to
   just the two contact links on phones, and the note is dropped so the strip
   stays a single line.
   ===================================================================== */
.topbar {
    background: var(--ink-900);
    color: rgba(255, 255, 255, .82);
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
    padding-block: .3rem;
}
.topbar__contact {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-wrap: wrap;
    min-width: 0;
}
.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    white-space: nowrap;
}
.topbar__link:hover { color: var(--white); }
.topbar__icon { width: 15px; height: 15px; flex: none; }
.topbar__link--wa .topbar__icon { color: #4ade80; }
.topbar__aside { display: flex; align-items: center; gap: 1rem; }
.topbar__note {
    white-space: nowrap;
    color: rgba(255, 255, 255, .62);
    font-size: .76rem;
    letter-spacing: .01em;
}

@media (max-width: 900px) {
    .topbar__note { display: none; }
}
@media (max-width: 640px) {
    .topbar__inner { min-height: 34px; }
    .topbar__contact { gap: .9rem; flex-wrap: nowrap; }
    .topbar__link { font-size: .74rem; }
    /* The address is far too long to sit next to the WhatsApp number on a phone, and
       letting it wrap doubled the height of the header. Keep the mail icon — still a
       tappable mailto: link, with its aria-label — and drop the text. */
    .topbar__link--mail .topbar__link-text { display: none; }
    .topbar__link--mail .topbar__icon { width: 17px; height: 17px; }
}

/* ---------------------------------------------------------------------- nav */

/* The frosted glass lives on a pseudo-element, NOT on .site-header itself.
 *
 * `backdrop-filter` makes an element a containing block for its fixed-position
 * descendants. The mobile nav drawer is `position: fixed; top: 0; bottom: 0` and lives
 * inside this header, so with the filter on .site-header the drawer resolved its height
 * against the header box instead of the viewport: it was capped at ~74px, the height of
 * the header, and the menu links were clipped away. Moving the effect to ::before keeps
 * the appearance and lets the drawer size to the screen.
 *
 * Same trap applies to `filter`, `transform` and `perspective` - do not add any of them
 * to .site-header while the drawer is nested inside it. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* Own stacking context so ::before with z-index:-1 paints above the page but behind
       the header's contents, instead of disappearing behind the document. */
    isolation: isolate;
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--ink-100);
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    pointer-events: none;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); background: rgba(255, 255, 255, .96); }

.nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--nav-h);
    /* Positioning context for the absolutely-centred .nav__links. */
    position: relative;
}

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink-900); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.brand:hover { color: var(--ink-900); }
.brand__mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 0;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    box-shadow: var(--shadow-brand);
    color: var(--white);
    flex: none;
}
.brand__mark svg { width: 21px; height: 21px; }
.brand__name span { color: var(--brand-500); }

.nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    /* Truly centred in the bar, not centred in the space the brand leaves over.
       `margin: auto` on both sides only centres within the leftover room, so the block
       sat to the right of the middle. Absolute positioning against the full-width .nav
       (which is position: relative) puts the group in the real centre; the brand stays
       in normal flow on the left. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    /* Never let the browser shrink or wrap the items — that is what made the
       signed-in navbar collapse into two-line links. */
    flex-wrap: nowrap;
    white-space: nowrap;
}
.nav__links > li { flex: 0 0 auto; }

/* The nav group is centred against the full-width bar, so its total width has to stay
   under `container - 2 x brand`. Tightened here (link padding + the gap before the buttons)
   to buy the ~30px that keeps it clear of the brand at 1280-1440px; without this the group
   sat flush against the logo. */
.nav__link {
    position: relative;
    display: block;
    padding: .5rem .5rem;
    font-size: .93rem;
    font-weight: 600;
    color: var(--ink-600);
    border-radius: 0;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--ink-900); background: var(--ink-50); }
.nav__link::after {
    content: "";
    position: absolute;
    left: .62rem; right: .62rem; bottom: .22rem;
    height: 2px;
    border-radius: 0;
    background: var(--brand-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
}
.nav__link.is-active { color: var(--brand-700); }
.nav__link.is-active::after { transform: scaleX(1); }
/* Keep the two nav buttons tight so the centred group stays clear of the brand. */
.nav__cta { margin-left: .45rem; }
.nav__cta--secondary { margin-left: .35rem; }

/* signed-in user chip */
.nav__user { display: flex; align-items: center; gap: .6rem; }
.nav__avatar {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: var(--white);
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
.nav__user-name {
    font-size: .88rem; font-weight: 700; color: var(--ink-700);
    max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav__toggle {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    border: 1px solid var(--ink-200);
    border-radius: 0;
    background: var(--white);
    cursor: pointer;
    padding: 0;
    place-items: center;
}
.nav__toggle span { display: block; width: 19px; height: 2px; background: var(--ink-800); border-radius: 0; position: relative; transition: background .2s; }
.nav__toggle span::before, .nav__toggle span::after {
    content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink-800);
    border-radius: 0; transition: transform .22s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto auto;
    width: 760px; height: 760px;
    background: radial-gradient(circle at 50% 50%, rgba(47, 99, 246, .16), transparent 66%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    padding: clamp(3rem, 2rem + 5vw, 5.75rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem);
}
.hero__title { margin-bottom: 1.1rem; }
.hero__title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--brand-500), var(--brand-700) 55%, var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero__actions { margin-top: 2rem; }

.hero__trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
    margin-top: 2.25rem; padding-top: 1.75rem;
    border-top: 1px solid var(--ink-100);
}
.hero__trust-item { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 600; color: var(--ink-500); }
.hero__trust-item svg { width: 19px; height: 19px; color: var(--brand-500); flex: none; }

/* decorative "browser" mock */
.mock {
    position: relative;
    border-radius: 0;
    background: var(--white);
    border: 1px solid var(--ink-100);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mock__bar {
    display: flex; align-items: center; gap: .45rem;
    padding: .8rem 1rem;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-100);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.mock__dot:nth-child(1) { background: #ff6b6b; }
.mock__dot:nth-child(2) { background: #ffc93c; }
.mock__dot:nth-child(3) { background: #4ade80; }
.mock__url {
    margin-left: .6rem; flex: 1;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--ink-400);
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: .28rem .8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mock__body { padding: 1.35rem; }

.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.stat {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: .95rem 1rem;
    box-shadow: var(--shadow-xs);
}
.stat__value { font-size: 1.4rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.03em; line-height: 1.1; }
.stat__label { font-size: .76rem; font-weight: 600; color: var(--ink-400); text-transform: uppercase; letter-spacing: .07em; }

.bars { display: grid; gap: .7rem; margin: 1.15rem 0 0; }
.bar__top { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--ink-500); margin-bottom: .35rem; }
.bar__track { height: 8px; border-radius: 0; background: var(--ink-100); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 0; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); width: 0; transition: width 1.2s var(--ease); }
.bar__fill--accent { background: linear-gradient(90deg, var(--accent-400), var(--accent-600)); }

/* floating chip on the mock */
.chip-float {
    position: absolute;
    right: -14px; bottom: 26px;
    display: flex; align-items: center; gap: .55rem;
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: .7rem .95rem;
    box-shadow: var(--shadow-md);
    font-size: .83rem;
    font-weight: 700;
    color: var(--ink-800);
}
.chip-float svg { width: 18px; height: 18px; color: var(--success-fg); flex: none; }

/* --------------------------------------------------------------- logos */
.logo-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    opacity: .78;
}
.logo-row span {
    font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink-400);
    transition: color .2s var(--ease), opacity .2s var(--ease);
}
.logo-row span:hover { color: var(--ink-700); }

/* --------------------------------------------------------------- cards */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: 1.9rem 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }

.card__icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 0;
    background: var(--brand-50);
    color: var(--brand-600);
    margin-bottom: 1.15rem;
    flex: none;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: .55rem; }
.card__text { color: var(--ink-500); font-size: .96rem; }

.tick-list { list-style: none; display: grid; gap: .5rem; margin-top: 1.15rem; }
.tick-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-600); }
.tick-list li svg { width: 17px; height: 17px; color: var(--brand-500); flex: none; margin-top: .24rem; }
.tick-list--success li svg { color: var(--success-fg); }

/* ------------------------------------------------------------ pricing */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: 0;
    padding: 2rem 1.85rem;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }

.plan--featured {
    border-color: var(--brand-500);
    border-width: 2px;
    box-shadow: var(--shadow-lg), 0 0 0 6px var(--brand-50);
    transform: translateY(-6px);
}
.plan--featured:hover { transform: translateY(-10px); }

.plan__badge {
    align-self: flex-start;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-500);
    background: var(--ink-100);
    padding: .32rem .7rem;
    border-radius: 0;
    margin-bottom: 1rem;
}
.plan--featured .plan__badge {
    color: var(--white);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    box-shadow: var(--shadow-brand);
}
.plan__badge--accent { color: var(--warn-fg); background: var(--warn-bg); }

.plan__name { font-size: 1.32rem; margin-bottom: .35rem; }
.plan__blurb { font-size: .92rem; color: var(--ink-500); min-height: 3.15rem; }

.plan__price { display: flex; align-items: flex-end; gap: .35rem; margin: 1.25rem 0 .35rem; }
.plan__currency { font-size: 1.15rem; font-weight: 700; color: var(--ink-500); margin-bottom: .55rem; }
.plan__amount { font-size: 3rem; font-weight: 800; letter-spacing: -.045em; color: var(--ink-900); line-height: 1; }
.plan__period { font-size: .9rem; font-weight: 600; color: var(--ink-400); margin-bottom: .5rem; }

.plan__meta { font-size: .84rem; color: var(--ink-400); min-height: 1.5rem; }
.plan__meta strong { color: var(--success-fg); }

.plan__features { list-style: none; display: grid; gap: .6rem; margin: 1.5rem 0; padding-top: 1.4rem; border-top: 1px solid var(--ink-100); flex: 1; }
.plan__features li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-600); }
.plan__features li svg { width: 17px; height: 17px; color: var(--brand-500); flex: none; margin-top: .24rem; }

.compare-note {
    display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; justify-content: center;
    margin-top: 2.25rem; font-size: .9rem; color: var(--ink-500);
}
.compare-note span { display: inline-flex; align-items: center; gap: .5rem; }
.compare-note svg { width: 17px; height: 17px; color: var(--brand-500); }

/* price table */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink-100); border-radius: 0; background: var(--white); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 560px; }
table.data caption { text-align: left; padding: 1.1rem 1.25rem .25rem; font-size: .82rem; color: var(--ink-400); }
table.data th, table.data td { padding: .95rem 1.25rem; text-align: left; border-bottom: 1px solid var(--ink-100); }
table.data thead th {
    font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-500); background: var(--ink-50);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--brand-50); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .tld { font-family: var(--font-mono); font-weight: 700; color: var(--ink-900); }
table.data .price { font-weight: 800; color: var(--ink-900); }
table.data .muted { color: var(--ink-400); font-size: .86rem; }

/* ------------------------------------------------------------- domains */
.search-panel {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
    box-shadow: var(--shadow-lg);
}
.search-form { display: flex; gap: .65rem; flex-wrap: wrap; }
.search-form__field { position: relative; flex: 1 1 320px; display: flex; align-items: stretch; }
.search-form__field svg {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 19px; height: 19px; color: var(--ink-400); pointer-events: none;
}
.search-form input[type="text"] {
    width: 100%;
    font: inherit;
    padding: .95rem 1rem .95rem 2.75rem;
    border: 1px solid var(--ink-200);
    border-radius: 0;
    background: var(--ink-50);
    color: var(--ink-900);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.search-form input[type="text"]:focus {
    outline: none;
    background: var(--white);
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px var(--brand-50);
}
.search-form select {
    font: inherit; font-weight: 600;
    padding: .95rem 2.4rem .95rem 1rem;
    border: 1px solid var(--ink-200);
    border-radius: 0;
    background: var(--ink-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355637a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .95rem center;
    color: var(--ink-900);
    appearance: none;
    cursor: pointer;
}
.search-form select:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-50); }

.field-error { color: var(--danger-fg); font-size: .85rem; font-weight: 600; margin-top: .5rem; display: block; }
.field-error:empty { display: none; }

.result-list { list-style: none; display: grid; gap: .65rem; margin-top: 1.65rem; }
.result {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .95rem 1.15rem;
    border: 1px solid var(--ink-100);
    border-radius: 0;
    background: var(--white);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
    animation: fade-up .4s var(--ease) both;
}
.result:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.result--available { border-color: var(--success-br); background: linear-gradient(180deg, var(--success-bg), var(--white)); }
.result__name { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--ink-900); flex: 1 1 220px; word-break: break-all; }
.result__name s { color: var(--ink-400); font-weight: 400; }
.result__status {
    font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: .3rem .65rem; border-radius: 0; white-space: nowrap;
}
.result__status--ok { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-br); }
.result__status--no { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-br); }
.result__price { font-weight: 800; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.result__price small { font-weight: 600; color: var(--ink-400); font-size: .78rem; }

.tld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .85rem; }
.tld-card {
    display: flex; flex-direction: column; gap: .15rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ink-100);
    border-radius: 0;
    background: var(--white);
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tld-card:hover { transform: translateY(-3px); border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.tld-card__tld { font-family: var(--font-mono); font-weight: 800; font-size: 1.1rem; color: var(--brand-600); }
.tld-card__price { font-weight: 800; color: var(--ink-900); font-size: .98rem; }
.tld-card__price small { font-weight: 600; color: var(--ink-400); font-size: .78rem; }
.tld-card__note { font-size: .78rem; color: var(--ink-400); }

/* -------------------------------------------------------------- forms */
.form-card {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: clamp(1.6rem, 1rem + 2vw, 2.5rem);
    box-shadow: var(--shadow-lg);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 700; color: var(--ink-700); }
.field label .req { color: var(--danger-fg); margin-left: .15rem; }
.field .hint { font-size: .8rem; color: var(--ink-400); }

.field input, .field select, .field textarea {
    font: inherit;
    width: 100%;
    padding: .8rem .95rem;
    color: var(--ink-900);
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: 0;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 148px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px var(--brand-50);
}
.field input.input-validation-error, .field select.input-validation-error, .field textarea.input-validation-error {
    border-color: var(--danger-br);
    background: var(--danger-bg);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .89rem; color: var(--ink-600); }
.check input { width: 19px; height: 19px; flex: none; margin-top: .2rem; accent-color: var(--brand-600); }

.validation-summary {
    border: 1px solid var(--danger-br);
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-radius: 0;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    font-size: .92rem;
}
.validation-summary ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.validation-summary:empty, .validation-summary ul:empty { display: none; }
.validation-summary strong { display: block; margin-bottom: .15rem; }

.alert {
    display: flex; gap: .8rem; align-items: flex-start;
    border-radius: 0;
    padding: 1.05rem 1.25rem;
    font-size: .94rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}
.alert svg { width: 21px; height: 21px; flex: none; margin-top: .12rem; }
.alert--success { background: var(--success-bg); border-color: var(--success-br); color: var(--success-fg); }
.alert--success strong { display: block; }
.alert p { margin: .2rem 0 0; }

/* ---------------------------------------------------------- contact bits */
.contact-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: start; }

.info-card {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 0;
    padding: 1.65rem 1.6rem;
    box-shadow: var(--shadow-sm);
}
.info-card + .info-card { margin-top: 1.15rem; }
.info-list { list-style: none; display: grid; gap: 1.15rem; }
.info-list li { display: flex; gap: .9rem; align-items: flex-start; }
.info-list svg { width: 20px; height: 20px; color: var(--brand-600); flex: none; margin-top: .22rem; }
.info-list b { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); font-weight: 800; }
.info-list a, .info-list span.val { color: var(--ink-800); font-weight: 600; }

/* --------------------------------------------------------------- misc */
.page-hero { position: relative; overflow: hidden; }
.page-hero::after {
    content: "";
    position: absolute; inset: auto 0 -1px 0; height: 1px; background: var(--ink-100);
}
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .84rem; color: var(--ink-400); margin-bottom: 1rem; }
.breadcrumb a { color: var(--ink-500); font-weight: 600; }
.breadcrumb span { color: var(--ink-300); }

.badge-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 700;
    color: var(--ink-600);
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    padding: .35rem .8rem;
    border-radius: 0;
}
.badge svg { width: 15px; height: 15px; color: var(--brand-500); }

.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.35rem; }
.feature { display: flex; gap: .9rem; align-items: flex-start; }
.feature__icon {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 0;
    background: var(--brand-50); color: var(--brand-600);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature h4 { margin-bottom: .2rem; font-size: .98rem; }
.feature p { font-size: .89rem; color: var(--ink-500); margin: 0; }

.avatar {
    width: 54px; height: 54px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
    color: var(--white);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    box-shadow: var(--shadow-brand);
}
.member { display: flex; gap: 1.1rem; align-items: flex-start; }
.member h3 { margin-bottom: .1rem; font-size: 1.08rem; }
.member__role { font-size: .84rem; font-weight: 700; color: var(--brand-600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.member p { font-size: .92rem; color: var(--ink-500); margin: 0; }

.timeline { list-style: none; position: relative; display: grid; gap: 2rem; padding-left: 2.7rem; }
.timeline::before { content: ""; position: absolute; left: 13px; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(var(--brand-300), var(--ink-100)); }
.timeline li { position: relative; }
.timeline li::before {
    content: ""; position: absolute; left: -2.7rem; top: .45rem;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--white); border: 3px solid var(--brand-500);
    box-shadow: 0 0 0 5px var(--brand-50);
}
.timeline__year { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; color: var(--brand-600); letter-spacing: .04em; }
.timeline h3 { font-size: 1.08rem; margin: .15rem 0 .3rem; }
.timeline p { font-size: .93rem; color: var(--ink-500); margin: 0; }

/* =====================================================================
   Client offer band (replaces the old call-to-action band)
   ---------------------------------------------------------------------
   Rectangular like the rest of the public site (no border radius — see
   docs/DESIGN-SYSTEM.md). Two columns: the offer copy and a summary card
   showing the headline "6 months". Collapses to one column below 1024px.
   ===================================================================== */
.section--offer { padding-top: 0; }

.offer {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
    gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
    align-items: center;
    padding: clamp(2rem, 1.4rem + 3.2vw, 3.6rem);
    background:
        radial-gradient(760px 340px at 6% -30%, rgba(255, 255, 255, .16), transparent 62%),
        linear-gradient(135deg, var(--brand-600), var(--brand-800) 58%, #10204f);
    color: var(--white);
    box-shadow: var(--shadow-lg);
}

/* soft accent bloom in the opposite corner */
.offer__glow {
    position: absolute;
    inset: auto -6% -55% auto;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle at 50% 50%, rgba(246, 146, 30, .34), transparent 68%);
    pointer-events: none;
}

.offer__body { position: relative; z-index: 1; }

.offer__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #ffd9a8;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: .34rem .7rem;
    margin-bottom: 1.05rem;
}
.offer__dot {
    width: 7px; height: 7px;
    border-radius: 50%;               /* true circle: status dot, allowed */
    background: var(--accent-500);
    box-shadow: 0 0 0 4px rgba(246, 146, 30, .22);
}

.offer__title {
    color: var(--white);
    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: 0 0 .7rem;
}
.offer__title em {
    font-style: normal;
    background: linear-gradient(100deg, #ffd08a, var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.offer__text {
    color: rgba(255, 255, 255, .86);
    font-size: 1.02rem;
    max-width: 60ch;
    margin: 0 0 1.35rem;
}

.offer__perks {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1.4rem;
    margin: 0 0 1.7rem;
    padding: 0;
}
.offer__perks li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
}
.offer__tick {
    width: 17px; height: 17px;
    flex: none;
    margin-top: .18rem;
    color: #7ef0b4;
}

.offer__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- summary card: the number is the hero of the offer ---- */
.offer__card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.9rem 1.5rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
}
.offer__card-label {
    display: inline-block;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #10204f;
    background: var(--accent-500);
    padding: .26rem .6rem;
    margin-bottom: 1rem;
}
.offer__card-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    color: var(--white);
    line-height: 1;
}
.offer__card-value span {
    font-size: clamp(3.4rem, 2.4rem + 3vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
}
.offer__card-value small {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.offer__card-note {
    margin: .35rem 0 0;
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .84);
}
.offer__card-list {
    list-style: none;
    margin: 1.3rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: grid;
    gap: .45rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 1024px) {
    .offer { grid-template-columns: 1fr; }
    .offer__card { text-align: left; }
    .offer__card-value { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .offer__perks { grid-template-columns: 1fr; }
    .offer__actions .btn { width: 100%; justify-content: center; }
}

.faq { border-top: 1px solid var(--ink-100); }
.faq details {
    border-bottom: 1px solid var(--ink-100);
    padding: 1.15rem .25rem;
}
.faq summary {
    cursor: pointer; list-style: none;
    font-weight: 700; color: var(--ink-900); font-size: 1.02rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--brand-500);
    line-height: 1; transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .85rem 0 0; color: var(--ink-500); font-size: .95rem; }

/* -------------------------------------------------------------- footer */
.site-footer {
    background: linear-gradient(180deg, #0d1526, var(--ink-900));
    color: var(--ink-300);
    padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
    font-size: .94rem;
}
.site-footer h4 { color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem; }
.site-footer a { color: var(--ink-300); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 2.25rem; }
.footer-brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.18rem; color: var(--white); margin-bottom: 1rem; }
.footer-brand:hover { color: var(--white); }
.footer-about { color: var(--ink-400); max-width: 34ch; font-size: .92rem; }
.footer-links { list-style: none; display: grid; gap: .6rem; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer-social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 0; border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    transition: background-color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.footer-social a:hover { background: var(--brand-600); border-color: var(--brand-600); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
    margin-top: 3rem; padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex; flex-wrap: wrap; gap: 1rem 2rem;
    justify-content: space-between; align-items: center;
    font-size: .86rem; color: var(--ink-400);
}
.footer-bottom__left {
    display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; align-items: center;
}
.footer-bottom__left p { margin: 0; }
.footer-bottom__links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Developer credit — sits at the bottom right of the footer. */
.footer-credit {
    margin: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .82rem;
    white-space: nowrap;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.footer-credit:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
}
.footer-credit__label { color: var(--ink-400); }
.footer-credit__name {
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(120deg, #8bb2ff, #ffffff 60%, var(--accent-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------ nav drawer */
/* Below 1200px the links become a panel that slides in from the right,
   so nothing is ever squeezed onto a second line. */
.nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(11, 18, 32, .5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease);
}
.nav__scrim.is-open { opacity: 1; pointer-events: auto; }

/* The hamburger is hidden at desktop widths (see the base .nav__toggle rule) and shown
   here, where the links collapse into the drawer. This rule lives inside the media query
   so the two always move together: if the drawer breakpoint changes, check this too.
   It was previously duplicated in three places in this file; the duplicates were removed
   and this is the single surviving definition. */
@media (max-width: 1200px) {
    .nav__toggle { display: grid; }
}

@media (max-width: 1200px) {
    .nav__links {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        /* Undo the desktop centring. The base rule uses `left: 50%` plus a translate to
           centre the group in the bar; if those are not reset here they also apply to the
           fixed drawer and push it off the right edge of the screen (it began at the
           horizontal midpoint instead of `right: 0`). The transform itself is re-declared
           with the rest of the slide animation below. */
        left: auto;
        /* Use the dynamic viewport height where supported: on iOS Safari and Android
           Chrome the address bar shows/hides as you scroll, and `height: 100%` against a
           collapsing viewport can leave the panel short or force the page to jump. */
        height: 100vh;
        height: 100dvh;
        z-index: 60;
        width: min(340px, 86vw);
        margin: 0;
        padding: 1.1rem 1.15rem calc(2rem + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        background: var(--white);
        border-left: 1px solid var(--ink-100);
        box-shadow: -20px 0 50px -20px rgba(11, 18, 32, .35);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
        display: flex;
        white-space: normal;

        /* A closed drawer must not affect layout.
         *
         * `translateX(100%)` only moves it visually: the element still occupies a box to the
         * right of the viewport, so the document scrollWidth grew to viewport + 86vw. On a
         * 390px phone the whole page therefore measured 671px wide, which reads as "zoomed
         * out, not clear, and it scrolls sideways". `visibility: hidden` removes it from the
         * scrollable area while keeping the slide transition intact.
         *
         * Deliberately NOT using `overflow-x: hidden` on html/body: that creates a scroll
         * container and breaks `position: sticky` on .site-header. */
        visibility: hidden;
    }
    .nav__links.is-open { transform: none; visibility: visible; }
    .nav__links > li { flex: 0 0 auto; }

    /* header row inside the drawer */
    .nav__drawer-head {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding-bottom: .9rem;
        margin-bottom: .6rem;
        border-bottom: 1px solid var(--ink-100);
    }
    .nav__drawer-title {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-400);
    }

    .nav__link {
        padding: .85rem .9rem;
        font-size: 1.02rem;
        border-radius: 0;
    }
    .nav__link::after { display: none; }
    .nav__link:hover { background: var(--ink-50); }
    .nav__link.is-active {
        background: var(--brand-50);
        color: var(--brand-700);
        font-weight: 700;
    }

    /* the signed-in cluster becomes full-width rows */
    .nav__cta { margin: .7rem 0 0; }
    .nav__cta .btn { width: 100%; justify-content: center; }
    .nav__user {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        padding: .9rem;
        border: 1px solid var(--ink-100);
        border-radius: 0;
        background: var(--ink-50);
    }
    .nav__user-name { max-width: none; font-size: .95rem; }
    .nav__area { align-self: flex-start; margin: 0; }
    .nav__user form { width: 100%; }
    .nav__user form .btn { width: 100%; }
}

/* the drawer header only exists below the breakpoint */
.nav__drawer-head { display: none; }
@media (max-width: 1200px) { .nav__drawer-head { display: flex; } }
@media (max-width: 640px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-credit { margin-left: 0; }
}

/* ------------------------------------------------------------ reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-grid > :last-child { grid-column: 1 / -1; }
}



/* signed-in area badge */
.nav__area {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-right: .5rem;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    padding: .24rem .5rem;
    border-radius: 0;
    white-space: nowrap;
}
.nav__area--client { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-br); }

/* the signed-in cluster sits on one line */
.nav__user { display: flex; align-items: center; gap: .55rem; white-space: nowrap; }
.nav__user form { display: inline-flex; }