/* Chardie — site styles
   Apple.com-style structure (full-bleed alternating tiles, massive type,
   product floats, scroll reveals) finished with Claude-design warmth:
   cream surfaces, considered neutrals, soft borders. Chardie blue is the
   brand accent, paired with a warm terracotta for human contrast. */

:root {
    --bg: #faf9f5;             /* Claude-style warm cream */
    --bg-soft: #f3f0e8;        /* Slightly deeper cream surface */
    --bg-card: #fffdf7;        /* Subtly warm card surface */
    --bg-dark: #1a1915;        /* Warm near-black */
    --bg-dark-soft: #25231e;   /* Warm dark card surface */

    --text: #1a1915;           /* Warm near-black text */
    --text-soft: #5a5750;      /* Considered warm grey */
    --text-dim: #8a857a;       /* Dim warm grey */

    --text-on-dark: #f5f2e9;
    --text-soft-on-dark: #b8b2a3;

    --border: rgba(26, 25, 21, 0.08);
    --border-strong: rgba(26, 25, 21, 0.14);
    --border-on-dark: rgba(245, 242, 233, 0.14);

    --link: #1166a8;           /* Chardie blue darkened to AA-pass on cream */
    --link-hover: #0d527e;

    --brand: #a8def6;          /* Chardie wordmark blue */
    --brand-soft: #e2f3fc;
    --brand-deep: #0a5485;

    --accent-warm: #c2734a;    /* Claude-style terracotta accent */
    --accent-warm-soft: #f1e4d7;

    --tile-radius: 18px;
    --pill-radius: 980px;

    --max: 1240px;
    --max-narrow: 980px;
    --max-text: 720px;
    --gutter: clamp(22px, 4vw, 48px);

    --font:
        -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", Helvetica, Arial, sans-serif;

    --shadow-card: 0 1px 2px rgba(26, 25, 21, 0.04), 0 12px 32px rgba(26, 25, 21, 0.06);
    --shadow-card-hover: 0 2px 4px rgba(26, 25, 21, 0.06), 0 22px 44px rgba(26, 25, 21, 0.08);
    --shadow-float-light:
        0 4px 12px rgba(26, 25, 21, 0.10),
        0 32px 70px rgba(26, 25, 21, 0.18);
    --shadow-float-dark:
        0 8px 16px rgba(0, 0, 0, 0.40),
        0 60px 120px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(168, 222, 246, 0.10);

    --serif: ui-serif, "New York", "Iowan Old Style", "Apple Garamond",
        Baskerville, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47059;
    color: var(--text);
    background: var(--bg);
    letter-spacing: -0.022em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 4px;
    border-radius: 4px;
}

::selection { background: var(--brand); color: var(--text); }

/* ── Type scale ──────────────────────────────────────────────── */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.005em;
}

.t-eyebrow {
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--brand-deep);
}

.t-display {
    font-size: clamp(48px, 8.4vw, 104px);
    line-height: 1.02;
    letter-spacing: -0.028em;
    font-weight: 700;
}

.t-title {
    font-size: clamp(38px, 5.8vw, 76px);
    line-height: 1.05;
    letter-spacing: -0.024em;
    font-weight: 700;
}

.t-headline {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.t-sub {
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.21;
    letter-spacing: 0.004em;
    font-weight: 400;
    color: var(--text-soft);
}

.t-body {
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text-soft);
}

.t-caption {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.016em;
    color: var(--text-dim);
}

.dark { color: var(--text-on-dark); }
.dark .t-eyebrow { color: var(--brand); }
.dark .t-sub,
.dark .t-body { color: var(--text-soft-on-dark); }
.dark a { color: var(--brand); }
.dark a:hover { color: #d6eefa; }

/* ── Skip link ───────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    padding: 12px 16px;
    background: var(--text);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    z-index: 999;
}

.skip-link:focus { top: 16px; color: #fff; }

/* ── Top nav (Apple-style sticky translucent) ────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 249, 245, 0.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav__inner {
    max-width: var(--max);
    margin: 0 auto;
    height: 56px;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav__brand {
    display: inline-flex;
    align-items: center;
}

.nav__brand img {
    height: 28px;
}

.nav__brand:hover { text-decoration: none; }

.nav__menu {
    display: flex;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    align-items: center;
}

.nav__menu a {
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    padding: 6px 12px;
    border-radius: 8px;
    opacity: 0.88;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.nav__menu a:hover {
    opacity: 1;
    text-decoration: none;
    background: rgba(26, 25, 21, 0.05);
}

.nav__menu a[aria-current="page"] {
    opacity: 1;
    font-weight: 500;
}

@media (max-width: 640px) {
    .nav__menu { gap: 0; }
    .nav__menu a { padding: 6px 8px; font-size: 13px; }
}

/* ── Buttons (Apple-style pill + chevron link) ───────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 22px;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    border: none;
    border-radius: var(--pill-radius);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.022em;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.btn:hover { text-decoration: none; }

.btn--primary {
    background: var(--link);
    color: #fff;
}

.btn--primary:hover {
    background: var(--link-hover);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    color: var(--link);
    border: 1px solid currentColor;
}

.btn--ghost:hover {
    background: var(--link);
    color: #fff;
}

.dark .btn--ghost { color: var(--brand); }
.dark .btn--ghost:hover { background: var(--brand); color: var(--text); }

.btn--light {
    background: #fff;
    color: var(--text);
}

.btn--light:hover {
    background: var(--bg-soft);
    color: var(--text);
}

.link-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--link);
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.022em;
}

.link-cta::after {
    content: "›";
    font-size: 1.25em;
    line-height: 0.8;
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.link-cta:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.link-cta:hover::after { transform: translate(2px, -1px); }

.dark .link-cta { color: var(--brand); }
.dark .link-cta:hover { color: #d6eefa; }

/* ── Container helpers ───────────────────────────────────────── */

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

.wrap--narrow { max-width: var(--max-narrow); }
.wrap--text { max-width: var(--max-text); }

/* ── Tile (Apple homepage tile pattern, generous + visual) ───── */

.tile-grid {
    display: grid;
    gap: 14px;
    padding: 14px var(--gutter);
    max-width: 1440px;
    margin: 0 auto;
}

.tile-grid--cols-1 { grid-template-columns: 1fr; }

.tile-grid--split {
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .tile-grid--split { grid-template-columns: 1fr 1fr; }
}

.tile-grid--quad {
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .tile-grid--quad { grid-template-columns: 1fr 1fr; }
}

.tile {
    position: relative;
    border-radius: var(--tile-radius);
    overflow: hidden;
    isolation: isolate;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 70px 28px 0;
}

.tile--featured { min-height: 820px; padding-top: 84px; }
.tile--short { min-height: 520px; padding-top: 60px; }

@media (max-width: 700px) {
    .tile { min-height: 600px; padding: 52px 22px 0; }
    .tile--featured { min-height: 700px; padding-top: 60px; }
    .tile--short { min-height: 460px; padding-top: 48px; }
}

.tile--light {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(168, 222, 246, 0.18) 0%, transparent 50%),
        var(--bg-soft);
    color: var(--text);
}

.tile--card {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(168, 222, 246, 0.18) 0%, transparent 60%),
        var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}

.tile--dark {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(168, 222, 246, 0.18) 0%, transparent 60%),
        var(--bg-dark);
    color: var(--text-on-dark);
}

.tile--gradient-blue {
    background:
        radial-gradient(ellipse at 30% -20%, rgba(168, 222, 246, 0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 110%, rgba(48, 96, 152, 0.45) 0%, transparent 55%),
        linear-gradient(180deg, #0a131e 0%, #050b14 50%, #08060a 100%);
    color: var(--text-on-dark);
}

.tile--gradient-warm {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
        linear-gradient(160deg, #f6ecd8 0%, #ead8b6 50%, #d9c39a 100%);
    color: var(--text);
}

.tile--gradient-terracotta {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
        linear-gradient(160deg, #f3ddc8 0%, #e8c5a4 50%, #cf9876 100%);
    color: var(--text);
}

.tile--gradient-mint {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
        linear-gradient(160deg, #e3efe2 0%, #c8dac9 50%, #a4c2a8 100%);
    color: var(--text);
}

.tile__eyebrow {
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin: 0 0 14px;
    opacity: 0.85;
}

.tile--dark .tile__eyebrow,
.tile--gradient-blue .tile__eyebrow {
    color: var(--brand);
}

.tile__title {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.024em;
    font-weight: 700;
    margin: 0 0 14px;
    max-width: 18ch;
}

.tile--featured .tile__title {
    font-size: clamp(44px, 6.4vw, 84px);
    letter-spacing: -0.028em;
    max-width: 16ch;
}

.tile__sub {
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.35;
    color: var(--text-soft);
    max-width: 30ch;
    margin: 0 0 24px;
    font-weight: 400;
}

.tile--dark .tile__sub,
.tile--gradient-blue .tile__sub {
    color: var(--text-soft-on-dark);
}

.tile__cta {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 32px;
}

.tile__visual {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 16px;
    position: relative;
}

.tile__visual img {
    max-height: 520px;
    width: auto;
    filter: drop-shadow(var(--shadow-float-light));
}

.tile--featured .tile__visual img { max-height: 600px; }

.tile--dark .tile__visual img,
.tile--gradient-blue .tile__visual img {
    filter: drop-shadow(var(--shadow-float-dark));
}

.tile--short .tile__visual img { max-height: 320px; }

@media (max-width: 700px) {
    .tile__visual img { max-height: 380px; }
    .tile--featured .tile__visual img { max-height: 440px; }
    .tile--short .tile__visual img { max-height: 240px; }
}

/* ── Hero (full-bleed first impression) ──────────────────────── */

.hero {
    background:
        radial-gradient(ellipse at 50% -20%, #e8f3fa 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
    padding: clamp(56px, 9vw, 100px) var(--gutter) clamp(48px, 7vw, 80px);
    text-align: center;
}

.hero--dark {
    background:
        radial-gradient(ellipse at 50% -10%, #2c4a68 0%, transparent 60%),
        linear-gradient(180deg, #1a1915 0%, #08060a 100%);
    color: var(--text-on-dark);
}

.hero--serif h1 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.018em;
}

.hero__inner {
    max-width: var(--max);
    margin: 0 auto;
}

.hero__product {
    margin: 64px auto 0;
    max-width: 1100px;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero__product::before {
    content: "";
    position: absolute;
    inset: 30% 10% -10%;
    background: radial-gradient(ellipse, rgba(168, 222, 246, 0.22) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.hero__product img {
    max-height: 760px;
    width: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(var(--shadow-float-dark));
}

.hero:not(.hero--dark) .hero__product img {
    filter: drop-shadow(var(--shadow-float-light));
}

/* ── Section wrappers ────────────────────────────────────────── */

.section {
    padding: clamp(96px, 14vw, 180px) var(--gutter);
}

.section--soft {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(168, 222, 246, 0.20) 0%, transparent 50%),
        var(--bg-soft);
}
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--brand-dark {
    background:
        radial-gradient(ellipse at 30% -10%, rgba(168, 222, 246, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 100%, rgba(48, 96, 152, 0.35) 0%, transparent 60%),
        linear-gradient(180deg, #0a131e 0%, #050b14 50%, #08060a 100%);
    color: var(--text-on-dark);
}
.section--terracotta {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
        linear-gradient(160deg, #f3ddc8 0%, #e8c5a4 50%, #cf9876 100%);
    color: var(--text);
}
.section--mint {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
        linear-gradient(160deg, #e3efe2 0%, #c8dac9 50%, #a4c2a8 100%);
    color: var(--text);
}

.section__head {
    max-width: var(--max);
    margin: 0 auto 64px;
    text-align: center;
}

.section__head--left {
    text-align: left;
}

.section__head .t-eyebrow {
    display: block;
    margin: 0 0 18px;
}

.section__head .t-title {
    margin: 0 auto;
    max-width: 18ch;
}

.section__head--left .t-title { margin-left: 0; }

.section__head .t-sub {
    margin: 22px auto 0;
    max-width: 38ch;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.35;
}

.section__head--left .t-sub { margin-left: 0; }

/* ── Feature grid ────────────────────────────────────────────── */

.features {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 44px 36px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: -40%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(168, 222, 246, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.feature-card > * { position: relative; z-index: 1; }

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.section--soft .feature-card { background: var(--bg-card); }
.section--terracotta .feature-card,
.section--mint .feature-card {
    background: rgba(255, 253, 247, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.55);
}
.section--dark .feature-card,
.section--brand-dark .feature-card {
    background: var(--bg-dark-soft);
    color: var(--text-on-dark);
    border-color: var(--border-on-dark);
}

.feature-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-soft) 0%, #c8e8f8 100%);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(10, 84, 133, 0.06), 0 6px 18px rgba(10, 84, 133, 0.08);
}

.section--dark .feature-card__icon,
.section--brand-dark .feature-card__icon {
    background: rgba(168, 222, 246, 0.15);
    color: var(--brand);
}

.feature-card h3 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    letter-spacing: -0.012em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.feature-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.5;
}

.section--dark .feature-card p,
.section--brand-dark .feature-card p { color: var(--text-soft-on-dark); }

/* ── Showcase (alternating image/text rows) ──────────────────── */

.showcase {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 900px) {
    .showcase { grid-template-columns: 1.1fr 0.9fr; gap: 80px; }
    .showcase--reverse { grid-template-columns: 0.9fr 1.1fr; }
    .showcase--reverse .showcase__media { order: 2; }
    .showcase--reverse .showcase__copy { order: 1; }
}

.showcase__copy h2 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.024em;
    font-weight: 700;
    margin: 18px 0 22px;
    max-width: 14ch;
}

.showcase__copy p {
    color: var(--text-soft);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
    margin: 0 0 28px;
    max-width: 38ch;
}

.section--dark .showcase__copy p,
.section--brand-dark .showcase__copy p { color: var(--text-soft-on-dark); }

.section--dark .showcase__copy h2,
.section--brand-dark .showcase__copy h2 { color: var(--text-on-dark); }

.section--terracotta .showcase__copy p,
.section--mint .showcase__copy p,
.section--terracotta .section__head .t-sub,
.section--mint .section__head .t-sub { color: rgba(26, 25, 21, 0.72); }

.showcase__media {
    display: flex;
    justify-content: center;
    position: relative;
}

.showcase__media::before {
    content: "";
    position: absolute;
    inset: 20% 5% -5%;
    background: radial-gradient(ellipse, rgba(168, 222, 246, 0.20) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.showcase__media img {
    max-height: 720px;
    width: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(var(--shadow-float-light));
}

.section--dark .showcase__media img,
.section--brand-dark .showcase__media img {
    filter: drop-shadow(var(--shadow-float-dark));
}

/* ── Horizontal screenshot rail (Apple-style scroll) ─────────── */

.rail {
    margin-top: 56px;
    padding-bottom: 8px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

@media (min-width: 700px) { .rail { grid-auto-columns: 42%; } }
@media (min-width: 1100px) { .rail { grid-auto-columns: 27%; } }

.rail__card {
    scroll-snap-align: start;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(160deg, #1c2738 0%, #0a1322 100%);
    box-shadow: var(--shadow-card-hover);
    display: flex;
    flex-direction: column;
    color: var(--text-on-dark);
    transition: transform 0.3s ease;
}

.rail__card:hover { transform: translateY(-4px); }

.section--soft .rail__card,
.section--dark .rail__card,
.section--brand-dark .rail__card {
    background: linear-gradient(160deg, #1c2738 0%, #0a1322 100%);
    color: var(--text-on-dark);
}

.rail__card img {
    width: 100%;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    object-position: top;
}

.rail__card--ipad img { aspect-ratio: 4 / 5.4; }

.rail__card figcaption {
    padding: 22px 26px 26px;
    font-size: 16px;
    color: var(--text-soft-on-dark);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.section--dark .rail__card figcaption,
.section--brand-dark .rail__card figcaption { color: var(--text-soft-on-dark); }

/* ── Spec list ───────────────────────────────────────────────── */

.specs {
    max-width: var(--max-narrow);
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.section--dark .specs,
.section--brand-dark .specs { border-color: var(--border-on-dark); }

.specs dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .specs dl { grid-template-columns: 220px 1fr; }
}

.specs > dl {
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
}

.section--dark .specs > dl,
.section--brand-dark .specs > dl { border-color: var(--border-on-dark); }

.specs dt {
    font-weight: 600;
    color: var(--text);
    font-size: 17px;
}

.section--dark .specs dt,
.section--brand-dark .specs dt { color: var(--text-on-dark); }

.specs dd {
    margin: 0;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.5;
}

.section--dark .specs dd,
.section--brand-dark .specs dd { color: var(--text-soft-on-dark); }

/* ── Article (long-form: privacy etc) ────────────────────────── */

.article {
    max-width: var(--max-text);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 100px) var(--gutter);
}

.article h1 {
    font-size: clamp(38px, 5.5vw, 56px);
    line-height: 1.07;
    letter-spacing: -0.022em;
    font-weight: 700;
    margin: 0 0 14px;
}

.article__meta {
    color: var(--text-dim);
    font-size: 15px;
    margin: 0 0 40px;
}

.article h2 {
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.018em;
    font-weight: 600;
    margin: 56px 0 16px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.article h3 {
    font-size: 21px;
    font-weight: 600;
    margin: 32px 0 8px;
    line-height: 1.2;
}

.article p,
.article li {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
}

.article ul,
.article ol {
    padding-left: 1.4em;
    margin: 0 0 1.4em;
}

.article li { margin-bottom: 8px; }

.article .toc {
    background: var(--bg-soft);
    border-radius: 14px;
    padding: 26px 30px;
    margin: 8px 0 48px;
}

.article .toc h2 {
    margin: 0 0 12px;
    border-top: 0;
    padding-top: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
}

.article .toc ol {
    margin: 0;
    padding-left: 1.2em;
    columns: 2;
    column-gap: 32px;
}

@media (max-width: 600px) {
    .article .toc ol { columns: 1; }
}

.article .toc li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.callout {
    background: var(--bg-soft);
    border-radius: 14px;
    padding: 22px 26px;
    margin: 32px 0;
    font-size: 17px;
}

.callout strong { color: var(--text); }

/* ── CTA band ────────────────────────────────────────────────── */

.cta-band {
    background:
        radial-gradient(ellipse at 50% -30%, #2c4a68 0%, transparent 60%),
        linear-gradient(180deg, #1a1915 0%, #08060a 100%);
    color: var(--text-on-dark);
    padding: clamp(72px, 10vw, 120px) var(--gutter);
    text-align: center;
}

.cta-band h2 {
    color: var(--text-on-dark);
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    font-weight: 700;
    margin: 0 auto 18px;
    max-width: 22ch;
}

.cta-band p {
    color: var(--text-soft-on-dark);
    font-size: clamp(18px, 2vw, 21px);
    margin: 0 auto 36px;
    max-width: 50ch;
    line-height: 1.5;
}

.cta-band .btn--primary {
    background: #fff;
    color: var(--text);
}

.cta-band .btn--primary:hover {
    background: var(--bg-soft);
}

/* ── Footer ──────────────────────────────────────────────────── */

.footer {
    background: var(--bg-soft);
    color: var(--text-soft);
    padding: 56px var(--gutter) 32px;
    font-size: 12px;
    line-height: 1.4;
}

.footer__inner {
    max-width: var(--max);
    margin: 0 auto;
}

.footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}

.footer__col h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

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

.footer__col li { margin: 0 0 8px; }

.footer__col a {
    color: var(--text-soft);
    font-size: 12px;
}

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

.footer__legal {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-dim);
}

.footer__legal img {
    height: 22px;
    margin-bottom: 8px;
}

/* ── Reveal-on-scroll (HTML5 IntersectionObserver) ───────────── */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

/* ── Misc helpers ────────────────────────────────────────────── */

.center { text-align: center; }
.muted { color: var(--text-soft); }
.tag {
    display: inline-block;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--pill-radius);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--pill-radius);
    background: var(--brand-soft);
    color: var(--brand-deep);
}
.badge--free {
    background: #d6efc8;
    color: #2e5a17;
}