/* =========================================================================
   Безопасный интернет — "Moderne" style
   Warm blush canvas · deep-indigo hero band · tri-color gradient headlines
   Coral filled CTAs · flat, poster-like, no shadows.
   ========================================================================= */

:root {
    /* Colors */
    --color-blush-cream: #f3eae5;
    --color-deep-indigo: #000647;
    --color-pure-white: #ffffff;
    --color-graphite: #3e3c43;
    --color-mid-stone: #7a7780;
    --color-coral-pop: #ff7e85;
    --color-electric-violet: #0e1889;
    --color-magenta: #dd59cf;
    --color-sunset-coral: #ff7399;
    --color-deep-teal: #206871;
    --color-bright-teal: #118391;
    --color-persimmon: #ffa541;
    --color-muted-lilac: #7c80ad;
    --color-fern-green: #40ac76;
    --color-bubblegum-wash: #fdd7f5;
    --color-mint-wash: #bdedd5;
    --color-peach-wash: #fdd5c3;
    --color-hairline: #e2d6cf;
    --color-input-border: #cfc7c5;

    /* Typography */
    --font-mabry-pro: 'Mabry Pro', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-helvetica-neue: 'Helvetica Neue', 'Inter', Arial, ui-sans-serif, system-ui, sans-serif;

    --text-caption: 14px;
    --text-body: 16px;
    --text-body-lg: 18px;
    --text-subheading: 22px;
    --text-heading-sm: 27px;
    --text-heading: 43px;
    --text-heading-lg: 56px;
    --text-display: 83px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --tracking-ui: 0.2em;

    /* Spacing */
    --spacing-4: 4px;
    --spacing-12: 12px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-48: 48px;
    --spacing-120: 120px;
    --spacing-140: 140px;

    /* Layout */
    --page-max-width: 1200px;
    --section-gap: 120px;
    --gutter: 32px;

    /* Radius */
    --radius-md: 4px;
    --radius-xl: 15px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-blush-cream);
    color: var(--color-graphite);
    font-family: var(--font-helvetica-neue);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-body);
    line-height: 1.56;
    -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.band { width: 100%; }
.band--indigo { background: var(--color-deep-indigo); color: var(--color-pure-white); }

/* Vertical rhythm between stacked light sections */
.section { padding: var(--spacing-120) 0 0; }
.section:last-child { padding-bottom: var(--spacing-120); }

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.eyebrow {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-mid-stone);
    margin: 0 0 var(--spacing-20);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.7); }

.display {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: clamp(44px, 7vw, var(--text-display));
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0;
}

.heading {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: clamp(32px, 4.6vw, var(--text-heading-lg));
    line-height: 1.04;
    letter-spacing: -0.005em;
    margin: 0;
}
.heading--sm {
    font-size: clamp(27px, 3.4vw, var(--text-heading));
}

.gradient-text {
    color: var(--color-graphite);
}

.subheading {
    font-family: var(--font-helvetica-neue);
    font-size: clamp(20px, 2.4vw, var(--text-subheading));
    line-height: 1.33;
    margin: 0;
    color: var(--color-graphite);
}

.lead {
    font-size: var(--text-body-lg);
    line-height: 1.4;
    margin: 0;
    max-width: 56ch;
}
.lead--muted { color: var(--color-mid-stone); }
.lead--light { color: rgba(255, 255, 255, 0.78); }

.prose-p { margin: 0; max-width: 60ch; }
.muted { color: var(--color-mid-stone); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-body);
    letter-spacing: var(--tracking-ui);
    line-height: 1;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--coral { background: var(--color-coral-pop); color: var(--color-pure-white); }
.btn--coral:hover { background: #ff6970; }
.btn--ghost { background: transparent; border-color: var(--color-pure-white); color: var(--color-pure-white); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn--outline { background: transparent; border-color: var(--color-muted-lilac); color: var(--color-graphite); }
.btn--outline:hover { background: var(--color-muted-lilac); color: var(--color-pure-white); }
.btn--block { width: 100%; }

.text-link {
    color: var(--color-muted-lilac);
    text-decoration: underline;
    text-decoration-color: var(--color-muted-lilac);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-color .15s ease, text-decoration-thickness .15s ease;
}
.text-link:hover {
    color: var(--color-magenta);
    text-decoration-color: var(--color-magenta);
    text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
   Navigation bar (indigo, top of every page)
   ------------------------------------------------------------------------- */
.navbar { background: var(--color-blush-cream); color: var(--color-graphite); border-bottom: 1px solid var(--color-hairline); }
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-24);
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: 19px;
    letter-spacing: 0.06em;
    color: var(--color-graphite);
    white-space: nowrap;
}
.brand img { width: 28px; height: 28px; display: block; }
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-28);
}
.nav-links a {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-body);
    letter-spacing: var(--tracking-ui);
    color: var(--color-graphite);
    transition: color .15s ease;
}
.nav-links a:not(.btn) {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.nav-links a:not(.btn):hover { color: var(--color-coral-pop); text-decoration-color: var(--color-coral-pop); }
.nav-toggle { display: none; }

/* -------------------------------------------------------------------------
   Hero (indigo band, 50/50 split)
   ------------------------------------------------------------------------- */
.hero { background: var(--color-blush-cream); color: var(--color-graphite); }
.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--spacing-48);
    align-items: center;
    padding-top: var(--spacing-48);
    padding-bottom: var(--spacing-120);
}
.hero-copy { display: flex; flex-direction: column; gap: var(--spacing-28); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-20); }
.hero-illustration img { width: 100%; height: auto; display: block; }

/* -------------------------------------------------------------------------
   Feature row (three content-only columns on the canvas)
   ------------------------------------------------------------------------- */
.section-head { max-width: 720px; margin-bottom: var(--spacing-48); }
.section-head .lead { margin-top: var(--spacing-20); }

.feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-48);
}
.feature-card { display: flex; flex-direction: column; gap: var(--spacing-20); }
.icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
}
.icon-circle--pink { background: var(--color-bubblegum-wash); }
.icon-circle--mint { background: var(--color-mint-wash); }
.icon-circle--peach { background: var(--color-peach-wash); }
.feature-card h3 {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-subheading);
    line-height: 1.2;
    margin: 0;
    color: var(--color-graphite);
}
.feature-card p {
    font-size: var(--text-caption);
    line-height: 1.4;
    margin: 0;
    color: var(--color-mid-stone);
}

/* -------------------------------------------------------------------------
   Split section — text + illustration
   ------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-48);
    align-items: center;
}
.split-copy { display: flex; flex-direction: column; gap: var(--spacing-24); }
.split-illustration img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); }
.split--reverse .split-illustration { order: -1; }

/* Benefits list inside a split */
.benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-12); }
.benefits li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    font-size: var(--text-body);
    line-height: 1.4;
}
.benefits li::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-top: 7px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--color-magenta), var(--color-sunset-coral));
}
.benefits strong { font-weight: var(--font-weight-semibold); }

/* -------------------------------------------------------------------------
   Pricing cards
   ------------------------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-24);
    align-items: stretch;
}
.price-card {
    background: var(--color-pure-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
    padding: var(--spacing-32) var(--spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
}
.price-card--featured { border: 2px solid var(--color-coral-pop); }
.price-card__title {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-subheading);
    letter-spacing: var(--tracking-ui);
    margin: 0;
    color: var(--color-graphite);
}
.price-card__amount {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: clamp(44px, 6vw, var(--text-heading-lg));
    line-height: 1;
    margin: 0;
    color: var(--color-graphite);
}
.price-card__amount .cur { font-size: 0.4em; color: var(--color-mid-stone); margin-left: 4px; }
.price-card__amount--free {
    font-size: clamp(32px, 4vw, var(--text-heading));
}
.price-card__period { color: var(--color-mid-stone); font-size: var(--text-caption); margin: 0; }
.price-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-12); }
.price-list li {
    display: flex; gap: 10px; align-items: baseline;
    font-size: var(--text-caption); line-height: 1.4; color: var(--color-graphite);
}
.price-list li::before { content: "✓"; color: var(--color-fern-green); font-weight: 700; }
.price-card .btn { margin-top: auto; }

/* -------------------------------------------------------------------------
   Badge / status
   ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-fern-green);
    color: var(--color-fern-green);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    width: max-content;
}
.badge--solid { background: var(--color-fern-green); color: var(--color-pure-white); }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.card {
    background: var(--color-pure-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
    padding: var(--spacing-32);
}
.stack-16 > * + * { margin-top: var(--spacing-16, 16px); }
.stack-20 > * + * { margin-top: var(--spacing-20); }
.stack-24 > * + * { margin-top: var(--spacing-24); }
.stack-32 > * + * { margin-top: var(--spacing-32); }

.field-label {
    display: block;
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    color: var(--color-graphite);
}
.field-input {
    width: 100%;
    max-width: 520px;
    padding: 13px 14px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background: var(--color-pure-white);
    color: var(--color-graphite);
    font-family: var(--font-helvetica-neue);
    font-size: var(--text-body);
    line-height: 1.4;
}
.field-input::placeholder { color: var(--color-mid-stone); }
.field-input:focus { outline: none; border-color: var(--color-electric-violet); }
.field-hint { font-size: var(--text-caption); color: var(--color-mid-stone); margin: 10px 0 0; max-width: 52ch; }

.pay-chips { display: flex; gap: var(--spacing-12); flex-wrap: wrap; }
.pay-chip {
    font-size: var(--text-caption);
    padding: 8px 16px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    background: var(--color-pure-white);
    color: var(--color-graphite);
}

/* Consent checkboxes */
.legal-consents { border: none; margin: 0; padding: 0; }
.legal-consents legend { margin-bottom: var(--spacing-16, 16px); padding: 0; }
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--text-caption);
    line-height: 1.4;
    color: var(--color-graphite);
    cursor: pointer;
}
.consent-row + .consent-row { margin-top: 12px; }
.consent-row input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px; flex: none;
    accent-color: var(--color-coral-pop);
}
.consent-row a {
    color: var(--color-muted-lilac);
    text-decoration: underline;
    text-decoration-color: var(--color-muted-lilac);
    text-underline-offset: 2px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.consent-row a:hover { color: var(--color-magenta); text-decoration-color: var(--color-magenta); }
.field-error { font-size: var(--text-caption); color: #c0392b; margin: 6px 0 0; }

/* Mock (test) payment page */
.mock-banner {
    font-size: var(--text-caption);
    line-height: 1.4;
    padding: 12px 16px;
    border: 1px dashed var(--color-mid-stone);
    border-radius: var(--radius-md);
    color: var(--color-mid-stone);
    background: var(--color-pure-white);
}
.mock-card-row { display: flex; gap: var(--spacing-20); flex-wrap: wrap; }
.mock-card-row > div { flex: 1 1 140px; }

/* -------------------------------------------------------------------------
   Order summary (definition rows)
   ------------------------------------------------------------------------- */
.deflist { width: 100%; }
.defrow {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--spacing-16, 16px);
    padding: 14px 0;
    border-bottom: 1px solid var(--color-hairline);
    font-size: var(--text-body);
}
.defrow:first-child { border-top: 1px solid var(--color-hairline); }
.defrow strong { font-weight: var(--font-weight-semibold); }

/* -------------------------------------------------------------------------
   Key output
   ------------------------------------------------------------------------- */
.key-text {
    width: 100%;
    background: var(--color-deep-indigo);
    color: var(--color-pure-white);
    padding: var(--spacing-24);
    margin: 0;
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    word-break: break-all;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   How it works — steps + screenshots
   ------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--spacing-20); }
.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    font-size: var(--text-body);
    line-height: 1.4;
}
.steps li::before {
    content: counter(step);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--color-coral-pop);
    color: var(--color-pure-white);
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.steps strong { font-weight: var(--font-weight-semibold); }

.shot { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.shot img {
    display: block;
    width: 100%;
    background: var(--color-pure-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
}
.shot--phone img { max-width: 300px; }
.shot--desktop { width: 100%; }
.shot figcaption { font-size: var(--text-caption); color: var(--color-mid-stone); }

.platform-card {
    background: var(--color-pure-white);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
    padding: var(--spacing-32);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-48);
    align-items: center;
}
.platform-card .platform-body { display: flex; flex-direction: column; gap: var(--spacing-24); }
.platform-card--reverse .shot { order: -1; }
/* Wide variant for the landscape Windows screenshot */
.platform-card--wide { grid-template-columns: 0.85fr 1.15fr; align-items: center; }

/* -------------------------------------------------------------------------
   Legal pages
   ------------------------------------------------------------------------- */
.legal-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.legal-index li { border-bottom: 1px solid var(--color-hairline); }
.legal-index li:first-child { border-top: 1px solid var(--color-hairline); }
.legal-index a { display: flex; flex-direction: column; gap: 6px; padding: var(--spacing-20) 0; }
.legal-index strong {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-subheading);
    color: var(--color-graphite);
}
.legal-index span { font-size: var(--text-caption); color: var(--color-mid-stone); max-width: 60ch; }

.legal-prose { max-width: 760px; font-size: var(--text-body); line-height: 1.7; color: var(--color-graphite); }
.legal-prose h1, .legal-prose h2, .legal-prose h3 {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    margin: var(--spacing-32) 0 var(--spacing-16, 16px);
    color: var(--color-graphite);
}
.legal-prose h1 { font-size: clamp(28px, 4vw, var(--text-heading)); }
.legal-prose h2 { font-size: var(--text-heading-sm); }
.legal-prose h3 { font-size: var(--text-subheading); }
.legal-prose h1:first-child { margin-top: 0; }
.legal-prose p, .legal-prose li { margin: 0 0 12px; }
.legal-prose ul, .legal-prose ol { margin: 0 0 var(--spacing-16, 16px); padding-left: 1.25rem; }
.legal-prose table { width: 100%; border-collapse: collapse; margin: var(--spacing-16, 16px) 0 var(--spacing-32); }
.legal-prose th, .legal-prose td { border: 1px solid var(--color-hairline); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-prose hr { border: none; border-top: 1px solid var(--color-hairline); margin: var(--spacing-32) 0; }
.legal-prose a {
    color: var(--color-muted-lilac);
    text-decoration: underline;
    text-decoration-color: var(--color-muted-lilac);
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.legal-prose a:hover { color: var(--color-magenta); text-decoration-color: var(--color-magenta); }
.legal-prose em { color: var(--color-mid-stone); }

.legal-title {
    font-family: var(--font-mabry-pro);
    font-weight: var(--font-weight-medium);
    font-size: clamp(32px, 5vw, var(--text-heading-lg));
    line-height: 1.05;
    margin: 0;
    max-width: 22ch;
}

/* -------------------------------------------------------------------------
   Alerts
   ------------------------------------------------------------------------- */
.alerts { margin-top: var(--spacing-32); }
.alert {
    font-size: var(--text-body);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: var(--color-pure-white);
    border-left: 4px solid var(--color-coral-pop);
    color: var(--color-graphite);
}
.alert + .alert { margin-top: 12px; }
.alert-error { border-left-color: var(--color-coral-pop); }
.alert-success { border-left-color: var(--color-fern-green); }
.alert-info { border-left-color: var(--color-bright-teal); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
    margin-top: var(--spacing-120);
    background: var(--color-blush-cream);
    color: var(--color-graphite);
    border-top: 1px solid var(--color-hairline);
    padding: var(--spacing-48) 0;
}
.site-footer-inner { display: flex; flex-wrap: wrap; gap: var(--spacing-32); justify-content: space-between; align-items: flex-start; }
.site-footer .brand { margin-bottom: var(--spacing-12); }
.site-footer-tagline { color: var(--color-mid-stone); font-size: var(--text-caption); max-width: 40ch; }
.site-footer-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-32); }
.site-footer-nav a {
    font-size: var(--text-body);
    color: var(--color-graphite);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.site-footer-nav a:hover { color: var(--color-coral-pop); text-decoration-color: var(--color-coral-pop); }
.site-footer-copy { width: 100%; color: var(--color-mid-stone); font-size: var(--text-caption); margin-top: var(--spacing-24); }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root { --gutter: 20px; --section-gap: 72px; }
    .section { padding-top: var(--section-gap); }
    .section:last-child { padding-bottom: var(--section-gap); }
    .hero-inner { grid-template-columns: 1fr; gap: var(--spacing-32); padding-bottom: var(--section-gap); }
    .hero-illustration { order: -1; max-width: 420px; }
    .feature-row { grid-template-columns: 1fr; gap: var(--spacing-32); }
    .split { grid-template-columns: 1fr; gap: var(--spacing-32); }
    .split--reverse .split-illustration { order: 0; }
    .platform-card { grid-template-columns: 1fr; }
    .platform-card--reverse .shot { order: 0; }
    .shot--phone img { max-width: 260px; }

    .nav-links {
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-20);
        background: var(--color-blush-cream);
        padding: var(--spacing-24) var(--gutter);
        display: none;
        z-index: 50;
        border-bottom: 1px solid var(--color-hairline);
    }
    .navbar { position: relative; }
    .nav-toggle {
        display: inline-flex;
        background: transparent;
        border: 1px solid var(--color-graphite);
        color: var(--color-graphite);
        border-radius: var(--radius-md);
        padding: 8px 12px;
        font-family: var(--font-mabry-pro);
        letter-spacing: var(--tracking-ui);
        cursor: pointer;
    }
    #nav-toggle:checked ~ .nav-links { display: flex; }
}

@media (min-width: 901px) {
    .nav-toggle { display: none; }
}