/*
 * site.css — the page layouts. The design SYSTEM is in organic.css beside this file.
 *
 * organic.css is an export: tokens (--color-*, --font-*, --space-*, --radius-*, --shadow-*)
 * and the component classes .btn, .input, .field, .seg, .tag, .card, .nav. It is generated
 * and must not be hand-edited — a regenerated export would silently drop the change.
 * Everything specific to these pages goes here, and takes its values from those tokens
 * rather than repeating a hex or a pixel the system already names.
 *
 * The design was drawn in design/*.dc.html with the styles inline on every element. Inline
 * styles cannot be responsive, cannot express a hover state and are repeated once per copy
 * of a card, so they are classes here instead. The look is meant to be identical.
 *
 * NO JAVASCRIPT IS REQUIRED BY ANYTHING BELOW. The FAQ is <details>, the tour and the
 * carousel are radio inputs read with the sibling combinator. That is not purism: a
 * marketing page's whole job is to be readable on the first paint, on a phone, on a school
 * connection, and every interaction that needs a script is one that can fail to arrive.
 */

/* ══════════════════════════════════════════════════════════════ ground rules */

/* ══════════════════════════════════════════════════════ display scaling */

/*
 * THE ONE LINE THAT SIZES THE WHOLE PAGE.
 *
 * Every length here and in organic.css is a rem — a multiple of the root font size — so this
 * single number scales type, spacing, radii and the 75rem content column together, exactly
 * the way the browser's own zoom does. Nothing is left in pixels except hairline borders,
 * focus rings and the 999px pill idiom, none of which should grow.
 *
 * The ramp is 16px up to a 1920-wide viewport, then straight up to 24px — 1.5x — at 2560,
 * and flat after that. Both ends are measured rather than picked: 1080p was already right,
 * and a 2560-wide screen needed the browser set to 150% before the page filled it.
 *
 *      1.25vw - 0.5rem   →   at 1920px: 24 - 8 = 16px      at 2560px: 32 - 8 = 24px
 *
 * The bounds are rem, not px, so that somebody who has raised their browser's default font
 * size keeps the increase instead of having it silently overwritten.
 *
 * WHY VIEWPORT WIDTH, NOT PIXEL DENSITY: the question is how much room the page has, not how
 * sharp the screen is. A 4K monitor at 200% OS scaling reports a 1920 viewport and wants
 * 1080p sizing; so does a half-width window on a 2560 monitor. Both get it.
 *
 * Media-query breakpoints stay in px deliberately. They describe the device, not the design —
 * and a breakpoint in rem would move as this line changed it, which is a feedback loop.
 */
:root { font-size: clamp(1rem, 1.25vw - 0.5rem, 1.5rem); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    text-wrap: pretty;
    /* clip, not hidden: `hidden` on body silently kills position:sticky in the header. */
    overflow-x: clip;
}

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

a { color: var(--color-accent-700); text-underline-offset: 0.1875rem; }
a:hover { color: var(--color-accent-600); }
/* The system's buttons carry their own colour; an <a> styled as one must not inherit the
   link colour over the top of it. */
a.btn-primary, a.btn-primary:hover { color: var(--color-bg); }
a.btn-secondary, a.btn-secondary:hover { color: var(--color-text); }
a.btn-ghost, a.btn-ghost:hover { color: var(--color-accent); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Keyboard users land on this before the nav; sighted users never see it unless focused. */
.skip-link {
    position: absolute;
    left: -624.9375rem;
    top: 0;
    z-index: 60;
    padding: 0.625rem 1.125rem;
    background: var(--color-accent);
    color: var(--color-bg);
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; color: var(--color-bg); }

.container { max-width: 75rem; margin: 0 auto; padding-inline: 1.5rem; }
.section { padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.section-tight { padding-block: clamp(1.875rem, 4vh, 3rem); }

/* The small uppercase label above every section heading. */
.kicker {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-accent-700);
    margin-bottom: 0.875rem;
}
.kicker-2 { color: var(--color-accent-2-700); }

/*
 * Anything that borrows the heading face must borrow its WEIGHT too.
 *
 * Caprasimo had one weight, so `font-family: var(--font-heading)` on its own was the whole
 * instruction. Podkova is a 400-800 family, and 400 is a noticeably lighter slab than the
 * display face it replaced — without this, the brand mark, the taglines, the step numbers
 * and the price figures would all quietly go thin while the real headings stayed heavy.
 */
.brand,
.tagline,
.tile .num,
.tour-step-num,
.tour-step-title,
.plan-price .amount,
.faq summary { font-weight: var(--font-heading-weight); }

h1, h2, h3 { line-height: 1.12; margin: 0; }
.h1 { font-size: clamp(2.375rem, 4.8vw, 3.75rem); line-height: 1.06; letter-spacing: -0.015em; }
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 1.875rem; }
.h3 { font-size: 1.3125rem; line-height: 1.2; }
.narrow { max-width: 26ch; }

.prose { font-size: 1rem; line-height: 1.65; margin: 0 0 1.125rem; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.prose-sm { font-size: 0.9062rem; line-height: 1.62; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.lede { font-size: 1.0625rem; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.measure { max-width: 56ch; }
.measure-sm { max-width: 42ch; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.actions .btn { padding: 0.75rem 1.375rem; font-size: 0.9375rem; }
.center { text-align: center; }
.center .actions { justify-content: center; }
.center .measure { margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════ header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Semi-transparent so the page scrolls under it; the blur is what keeps text legible
       through it. Both degrade to a solid bar where they are unsupported. */
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(0.625rem);
    border-bottom: 1px solid transparent;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin-right: auto;
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    color: var(--color-text);
    text-decoration: none;
}
.brand:hover { color: var(--color-text); }
.brand-mark { width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--color-accent); flex: none; }

.nav-links { display: flex; align-items: center; gap: 1.375rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--color-text); text-decoration: none; font-size: 0.9062rem; }
.nav-links a:hover { color: var(--color-accent-700); }

.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch .lang {
    display: inline-block;
    padding: 0.3125rem 0.5625rem;
    border-radius: 999px;
    font-size: 0.7812rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.lang-switch .lang:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }
.lang-switch .is-current { background: var(--color-accent-200); color: var(--color-accent-800); }

.nav-cta { font-size: 0.9062rem; }

/* Below the breakpoint the section links go — they are anchors to sections the reader is
   already scrolling through, and a wrapped two-line nav costs more than it gives. The
   language switch and the call to action stay, because neither is reachable another way. */
@media (max-width: 860px) {
    .nav-links { display: none; }
    .site-nav { gap: 0.875rem; }
}
@media (max-width: 460px) {
    .nav-cta { display: none; }
}

/* ══════════════════════════════════════════════════════════════ hero */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* svh, not vh: on a phone, vh is the height WITHOUT the browser chrome, so a full-height
       hero is taller than the screen until the address bar hides. */
    min-height: calc(100svh - 11.875rem);
    padding-block: clamp(2.5rem, 7vh, 5.5rem) clamp(3rem, 7vh, 5.25rem);
}
.hero h1 { font-size: clamp(2.75rem, 6.4vw, 5.375rem); line-height: 1.06; letter-spacing: -0.015em; max-width: 20ch; }
.hero .lede { margin: 1.75rem auto 0; }

.hero-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}
.hero-split h1 { margin-bottom: 1.125rem; }
.tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.1875rem, 2.1vw, 1.5625rem);
    line-height: 1.3;
    color: var(--color-accent-700);
    max-width: 24ch;
    margin: 0 0 1.25rem;
}

/* The three claims under the Telpa hero. */
.pills { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.875rem, 4.5vh, 3.125rem); }
.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.6875rem 1.375rem;
    border-radius: 999px;
    background: var(--color-accent-2-100);
    font-size: 0.9062rem;
    line-height: 1.2;
}

/* ── the letter-by-letter entrance on the front page's headline.
   The markup is one <span> per letter with a stagger set from --i, so the delay does not
   have to be written into the content file. Anything that only animates is inside the
   media query below; the text is in the page and readable with animation off. */
.reveal > span { display: inline-block; }
.reveal .word { white-space: nowrap; }
.reveal .ch { animation: letterIn .5s cubic-bezier(.22, .68, .3, 1) both; animation-delay: calc(var(--i) * 45ms); }
.rise { animation: riseIn .8s cubic-bezier(.22, .68, .3, 1) both; animation-delay: var(--d, 0ms); }

@keyframes letterIn { from { opacity: 0; transform: translateY(0.34em) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(0.875rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal .ch, .rise, .tour-panel, .slide-track { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════ generic blocks */

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); gap: 1.875rem 2.75rem; }

/* A dot, a heading and a line of text — the "what is Nyro" row. */
.point { display: flex; gap: 1rem; align-items: flex-start; }
.dot { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-accent); margin-top: 0.4375rem; }
.dot-sm { width: 0.5rem; height: 0.5rem; margin-top: 0.4375rem; }
.dot-2 { background: var(--color-accent-2-500); }
.dot-3 { background: var(--color-accent-400); }
.dot-4 { background: var(--color-accent-600); }
.dot-5 { background: var(--color-accent-2-700); }
.dot-6 { background: var(--color-neutral-500); }

.tile { background: var(--color-surface); border-radius: 2rem; padding: 1.625rem 1.625rem 1.875rem; }
.tile h3 { margin-bottom: 0.5625rem; font-size: 1.25rem; }
.tile .num { display: block; font-family: var(--font-heading); font-size: 0.9375rem; color: var(--color-accent-700); margin-bottom: 0.875rem; }

.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5625rem; }
.ticks li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9062rem; line-height: 1.5; }

/* The big rounded sage panel used for "custom work" and "setup". */
.panel {
    position: relative;
    overflow: hidden;
    background: var(--color-accent-2-100);
    border-radius: 3.5rem;
    padding: clamp(1.75rem, 5vw, 4rem);
}
/* A soft circle bleeding off the corner. Decorative only, hence aria-hidden in the markup. */
.panel-blob {
    position: absolute;
    right: -4.375rem;
    bottom: -7.5rem;
    width: 18.75rem;
    height: 18.75rem;
    border-radius: 50%;
    background: var(--color-accent-2-200);
    pointer-events: none;
}
.panel-inner { position: relative; max-width: 46ch; }
.btn-accent-2 { background: var(--color-accent-2-700); color: var(--color-bg); border-color: transparent; }
.btn-accent-2:hover { background: var(--color-accent-2-800); color: var(--color-bg); }

/* ══════════════════════════════════════════════════════════════ screenshots */

/*
 * .shot is the frame a screenshot or a video goes in, and it is drawn whether or not the
 * file exists yet. The caption inside it is what the frame is FOR — it stays in the markup
 * as the image's alt text once there is an image, and until then it is what a visitor sees
 * instead of a broken-image icon or, worse, a blank grey box that reads as a bug.
 */
.shot {
    position: relative;
    overflow: hidden;
    border-radius: 1.875rem;
    background: var(--color-neutral-200);
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
}
.shot-4x3 { aspect-ratio: 4 / 3; }
.shot-note {
    padding: 1.125rem 1.375rem;
    text-align: center;
    font-size: 0.7812rem;
    line-height: 1.5;
    color: var(--color-neutral-700);
    max-width: 34ch;
}
.shot img, .shot video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The "Demo · 1:20" chip over the first slide. */
.badge {
    position: absolute;
    left: 0.875rem;
    top: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.8125rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-neutral-900) 62%, transparent);
    color: var(--color-bg);
    font-size: 0.7188rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.badge::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 0.4375rem solid currentColor;
    border-top: 0.2812rem solid transparent;
    border-bottom: 0.2812rem solid transparent;
}

/* ══════════════════════════════════════════════════════════════ product card + carousel */

.product {
    background: var(--color-surface);
    border-radius: 2.75rem;
    padding: clamp(1.125rem, 2.2vw, 1.75rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20.625rem, 1fr));
    gap: clamp(1.375rem, 3vw, 2.75rem);
    align-items: center;
    box-shadow: var(--shadow-sm);
}
.product-body { display: flex; flex-direction: column; padding: clamp(0.25rem, 1vw, 0.875rem) clamp(0.25rem, 1vw, 1.125rem); }
.product-body h3 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.14; margin-bottom: 0.375rem; }
.product-body .tagline { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 1rem; }

/*
 * The carousel, with no script.
 *
 * The radios are real form controls, one per slide, hidden off-screen but focusable. The
 * dots and the arrows are <label>s pointing at them, so clicking one checks its radio and
 * the sibling combinator below moves the track. Everything a script would do — remember
 * which slide is showing, move to the next one, mark the active dot — the browser is
 * already doing for a radio group.
 */
.carousel { position: relative; }
.carousel-window { position: relative; overflow: hidden; border-radius: 1.875rem; aspect-ratio: 16 / 10; background: var(--color-neutral-200); }
.slide-radio { position: absolute; opacity: 0; pointer-events: none; }
.slide-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.slide { flex: 0 0 100%; height: 100%; position: relative; }
.slide .shot { border-radius: 0; height: 100%; aspect-ratio: auto; }

.slide-radio:nth-of-type(1):checked ~ .carousel-window .slide-track { transform: translateX(0); }
.slide-radio:nth-of-type(2):checked ~ .carousel-window .slide-track { transform: translateX(-100%); }
.slide-radio:nth-of-type(3):checked ~ .carousel-window .slide-track { transform: translateX(-200%); }
.slide-radio:nth-of-type(4):checked ~ .carousel-window .slide-track { transform: translateX(-300%); }
.slide-radio:nth-of-type(5):checked ~ .carousel-window .slide-track { transform: translateX(-400%); }
.slide-radio:nth-of-type(6):checked ~ .carousel-window .slide-track { transform: translateX(-500%); }

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    cursor: pointer;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    box-shadow: var(--shadow-sm);
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text);
    z-index: 2;
}
.arrow:hover { background: var(--color-bg); }
.arrow-prev { left: 0.75rem; }
.arrow-next { right: 0.75rem; }

.dots { display: flex; align-items: center; gap: 0.875rem; padding-inline: 0.375rem; margin-top: 0.875rem; }
.dots-row { display: flex; align-items: center; gap: 0.4375rem; }
.dots label {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-neutral-400);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.dots label:hover { background: var(--color-neutral-500); }
.slide-label { font-size: 0.7812rem; }
/* The dot for the slide that is showing grows into a bar, and its caption appears. Written
   out per slide because CSS has no way to say "the nth label of the checked nth radio". */
.slide-radio:nth-of-type(1):checked ~ .dots label:nth-of-type(1),
.slide-radio:nth-of-type(2):checked ~ .dots label:nth-of-type(2),
.slide-radio:nth-of-type(3):checked ~ .dots label:nth-of-type(3),
.slide-radio:nth-of-type(4):checked ~ .dots label:nth-of-type(4),
.slide-radio:nth-of-type(5):checked ~ .dots label:nth-of-type(5),
.slide-radio:nth-of-type(6):checked ~ .dots label:nth-of-type(6) { width: 1.375rem; background: var(--color-accent); }

.slide-caption { display: none; }
.slide-radio:nth-of-type(1):checked ~ .dots .slide-caption:nth-of-type(1),
.slide-radio:nth-of-type(2):checked ~ .dots .slide-caption:nth-of-type(2),
.slide-radio:nth-of-type(3):checked ~ .dots .slide-caption:nth-of-type(3),
.slide-radio:nth-of-type(4):checked ~ .dots .slide-caption:nth-of-type(4),
.slide-radio:nth-of-type(5):checked ~ .dots .slide-caption:nth-of-type(5),
.slide-radio:nth-of-type(6):checked ~ .dots .slide-caption:nth-of-type(6) { display: inline; }

/* Focusing a hidden radio with the keyboard must still show where you are. */
.slide-radio:focus-visible ~ .carousel-window { outline: 2px solid var(--color-accent); outline-offset: 0.1875rem; }

/* ══════════════════════════════════════════════════════════════ the Telpa tour */

.tour { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: clamp(1.375rem, 3vw, 2.75rem); align-items: start; }
.tour-radio { position: absolute; opacity: 0; pointer-events: none; }
.tour-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.tour-step {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 1.25rem 1.375rem;
    border-radius: 1.625rem;
    cursor: pointer;
    background: transparent;
    transition: background .25s ease, box-shadow .25s ease;
}
.tour-step:hover { background: color-mix(in srgb, var(--color-surface) 55%, transparent); }
.tour-step-head { display: flex; align-items: baseline; gap: 0.75rem; }
.tour-step-num { font-family: var(--font-heading); font-size: 0.8125rem; color: var(--color-accent-700); }
.tour-step-title { font-family: var(--font-heading); font-size: 1.1875rem; line-height: 1.25; }
.tour-step-body { font-size: 0.9062rem; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 76%, transparent); padding-left: 2.0625rem; }

.tour-stage { position: relative; position: sticky; top: 6rem; overflow: hidden; border-radius: 2rem; aspect-ratio: 4 / 3; background: var(--color-neutral-200); box-shadow: var(--shadow-sm); }
.tour-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease; }
.tour-panel .shot { height: 100%; border-radius: 0; aspect-ratio: auto; }

.tour-radio:nth-of-type(1):checked ~ .tour-steps .tour-step:nth-of-type(1),
.tour-radio:nth-of-type(2):checked ~ .tour-steps .tour-step:nth-of-type(2),
.tour-radio:nth-of-type(3):checked ~ .tour-steps .tour-step:nth-of-type(3),
.tour-radio:nth-of-type(4):checked ~ .tour-steps .tour-step:nth-of-type(4),
.tour-radio:nth-of-type(5):checked ~ .tour-steps .tour-step:nth-of-type(5),
.tour-radio:nth-of-type(6):checked ~ .tour-steps .tour-step:nth-of-type(6) { background: var(--color-surface); box-shadow: var(--shadow-sm); }

.tour-radio:nth-of-type(1):checked ~ .tour-stage .tour-panel:nth-of-type(1),
.tour-radio:nth-of-type(2):checked ~ .tour-stage .tour-panel:nth-of-type(2),
.tour-radio:nth-of-type(3):checked ~ .tour-stage .tour-panel:nth-of-type(3),
.tour-radio:nth-of-type(4):checked ~ .tour-stage .tour-panel:nth-of-type(4),
.tour-radio:nth-of-type(5):checked ~ .tour-stage .tour-panel:nth-of-type(5),
.tour-radio:nth-of-type(6):checked ~ .tour-stage .tour-panel:nth-of-type(6) { opacity: 1; visibility: visible; }

.tour-radio:focus-visible ~ .tour-steps .tour-step { outline-offset: -2px; }
.tour-radio:nth-of-type(1):focus-visible ~ .tour-steps .tour-step:nth-of-type(1),
.tour-radio:nth-of-type(2):focus-visible ~ .tour-steps .tour-step:nth-of-type(2),
.tour-radio:nth-of-type(3):focus-visible ~ .tour-steps .tour-step:nth-of-type(3),
.tour-radio:nth-of-type(4):focus-visible ~ .tour-steps .tour-step:nth-of-type(4) { outline: 2px solid var(--color-accent); }

/* ══════════════════════════════════════════════════════════════ pricing */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.125rem, 1fr)); gap: 1.375rem; align-items: stretch; }
.plan {
    background: var(--color-surface);
    border-radius: 2.5rem;
    padding: clamp(1.5rem, 3vw, 2.125rem);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
/* The second plan is quoted, not bought — an outline instead of a fill says so before the
   price does. */
.plan-outline { background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: none; }
.plan h3 { font-size: 1.5rem; line-height: 1.16; margin-bottom: 0.625rem; }
.plan-note { font-size: 0.9062rem; line-height: 1.6; margin: 0 0 1.375rem; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5625rem; margin-bottom: 1.5rem; }
.plan-price .amount { font-family: var(--font-heading); font-size: 2.625rem; line-height: 1; }
.plan-price .per { font-size: 0.875rem; }
.plan .ticks { margin-bottom: 1.75rem; flex: 1; gap: 0.6875rem; }
.plan .btn-block { padding: 0.8125rem 1.375rem; font-size: 0.9375rem; }

/* ══════════════════════════════════════════════════════════════ FAQ */

/*
 * <details>, not a scripted accordion. It opens without JavaScript, it is announced
 * correctly by a screen reader, and Ctrl-F finds text inside a closed one in current
 * browsers — none of which is true of a div that a script shows and hides.
 */
.faq { max-width: 50rem; border-top: 1px solid var(--color-divider); }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 0.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1;
    background: var(--color-neutral-200);
    transition: transform .25s ease, background .25s ease;
}
.faq details[open] summary::after { background: var(--color-accent); color: var(--color-bg); transform: rotate(45deg); }
.faq .answer { font-size: 0.9375rem; line-height: 1.65; margin: 0 0.25rem 1.375rem; max-width: 62ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* ══════════════════════════════════════════════════════════════ contact */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
.contact-lines { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.9375rem; }

.form-card { background: var(--color-surface); border-radius: 2.5rem; padding: clamp(1.375rem, 3vw, 2.125rem); }
.form-card form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: 0.875rem; }
.form-card .field > label { font-size: 0.7812rem; }
.form-card textarea.input { min-height: 7.375rem; border-radius: 1.5rem; padding: 0.75rem 1rem; font-family: inherit; }
.form-legend { font-size: 0.7812rem; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.form-card .seg { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.form-card .seg-opt { text-align: center; justify-content: center; }
.form-hint { font-size: 0.75rem; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.form-card .btn-block { padding: 0.8125rem 1.375rem; font-size: 0.9375rem; }

/* ══════════════════════════════════════════════════════════════ footer */

.site-footer { border-top: 1px solid var(--color-divider); }
.site-footer .inner {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2.125rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.8438rem;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }