/*---=============================================================
   Pharma TecHub — app.css
   Single stylesheet for the whole site. Mobile-first; the only
   breakpoints are 640px (two columns) and 900px (desktop).

   Replaces default.css, style.css, responsive.css and custom.css
   along with the eight sheets style.css pulled in over @import
   (Google Fonts, animate.css, flaticon, Font Awesome, Bootstrap,
   slick, magnific-popup, nice-select). Icons are now an inline SVG
   sprite in the layout, so no icon font is loaded at all.
=============================================================---*/

/*---=============================================================
   01. Tokens
=============================================================---*/
:root {
    --ink: #12122B;
    --ink-soft: #3A3A5C;
    --muted: #6C6B8F;
    --faint: #9A99BA;
    --paper: #FFFFFF;
    --surface: #F7F6FD;
    --surface-2: #EFEDFA;
    --line: #E5E3F4;
    --line-soft: #F0EEFA;

    --brand: #5956E9;
    --brand-deep: #3C39C4;
    --brand-wash: #EEEDFE;
    --teal: #00A093;
    --teal-wash: #E1F6F3;
    --amber: #B06A00;
    --amber-wash: #FBF0DC;
    --danger: #C0392B;
    --danger-wash: #FBEAE7;

    --shadow-sm: 0 1px 2px rgba(18, 18, 43, .05), 0 4px 12px -6px rgba(18, 18, 43, .10);
    --shadow-md: 0 2px 4px rgba(18, 18, 43, .04), 0 18px 38px -20px rgba(18, 18, 43, .26);
    --shadow-lg: 0 2px 6px rgba(18, 18, 43, .05), 0 34px 70px -30px rgba(60, 57, 196, .42);

    --f-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --f-data: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;

    --head-h: 58px;
}

/*---=============================================================
   02. Reset & base
=============================================================---*/
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--f-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul.reset, nav ul { list-style: none; }
img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }
svg { flex: none; }

/* :where() keeps this at a single class's weight, so component rules
   below win on source order instead of losing to a compound selector. */
:where(a) { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

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

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

/*---=============================================================
   03. Layout primitives
=============================================================---*/
.wrap { padding-inline: 20px; }

.sec { padding-block: 48px; }
.sec--tight { padding-block: 34px; }
.sec--wash { background-color: var(--surface); }

.sechead { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }

/* The ledger rule — a mono label trailing a hairline. Used as the
   section marker throughout; it echoes a ruled ledger page, which is
   what PackERP replaces. */
.rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--f-data);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}
.rule::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--line); }

.grid { display: grid; gap: 12px; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--sm { gap: 10px; }

/*---=============================================================
   04. Type scale
=============================================================---*/
.eyebrow {
    font-family: var(--f-data);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
}

.h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.028em; font-weight: 800; text-wrap: balance; }
.h2 { font-size: 24px; line-height: 1.16; letter-spacing: -.022em; font-weight: 800; text-wrap: balance; }
.h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.012em; font-weight: 700; }

.lead { font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.body { font-size: 15px; line-height: 1.65; color: var(--muted); }
.small { font-size: 13px; line-height: 1.55; color: var(--muted); }

.ico-inline { width: 1em; height: 1em; vertical-align: -.125em; }

/*---=============================================================
   05. Header
=============================================================---*/
.head {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--head-h);
    padding-inline: 20px;
    background-color: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.logo { display: flex; align-items: center; }
.logo img { display: block; width: auto; height: 34px; }

.nav { display: none; }

/* Scoped to .head so it outranks .btn's own display, which is declared
   later in this sheet and would otherwise win at equal weight. */
.head .head-cta { display: none; }

.burger {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--paper);
    cursor: pointer;
}
.burger span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--ink);
    transition: transform .22s ease, opacity .22s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*---=============================================================
   06. Mobile nav sheet
=============================================================---*/
.sheet {
    position: fixed;
    inset: var(--head-h) 0 0;
    z-index: 29;
    display: none;
    flex-direction: column;
    padding: 20px;
    background-color: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sheet.is-open { display: flex; animation: sheet-in .24s cubic-bezier(.2, .7, .3, 1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

body.nav-open { overflow: hidden; }

.sheet-nav { display: flex; flex-direction: column; }
.sheet-nav > a,
.sheet-nav > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 4px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    list-style: none;
}
.sheet-nav > details > summary::-webkit-details-marker { display: none; }
.sheet-nav > a svg,
.sheet-nav > details > summary svg { width: 17px; height: 17px; color: var(--faint); transition: transform .2s ease; }
.sheet-nav > details[open] > summary svg { transform: rotate(180deg); }
.sheet-nav > a.active { color: var(--brand); }

.sheet-sub { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 14px; }
.sheet-sub a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background-color: var(--surface);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.sheet-sub a b { display: block; font-size: 16px; font-weight: 700; }
/* Only the blurb, not the wrapper span and not the icon chip. */
.sheet-sub a > span:last-child > span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* Shared by the desktop dropdown and the mobile sheet, so it has to live
   outside the 900px block — an unsized <svg> defaults to 300x150. */
.dd-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background-color: var(--brand-wash);
    color: var(--brand);
}
.dd-ico svg { width: 17px; height: 17px; }

.sheet-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }

/*---=============================================================
   07. Buttons
=============================================================---*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    text-align: center;
    cursor: pointer;
    transition: transform .16s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg { width: 17px; height: 17px; }

.btn--primary {
    background-color: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px -8px var(--brand);
}
.btn--primary:hover { background-color: var(--brand-deep); transform: translateY(-1px); }

.btn--ghost { background-color: var(--paper); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--white { background-color: #fff; color: var(--brand-deep); border-color: #fff; }
.btn--white:hover { background-color: rgba(255, 255, 255, .88); }

.btn--sm { min-height: 40px; padding: 0 15px; font-size: 14px; }
.btn--wide { width: 100%; }

.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

.link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
}
.link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.link:hover svg { transform: translateX(3px); }

/*---=============================================================
   08. Chips
=============================================================---*/
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background-color: var(--surface-2);
    color: var(--ink-soft);
    font-family: var(--f-data);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; }
.chip--brand { background-color: var(--brand-wash); color: var(--brand); }
.chip--teal { background-color: var(--teal-wash); color: var(--teal); }
.chip--amber { background-color: var(--amber-wash); color: var(--amber); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

/*---=============================================================
   09. Hero
=============================================================---*/
.hero { position: relative; padding-block: 40px 44px; overflow: hidden; }
.hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(89, 86, 233, .26), rgba(89, 86, 233, 0));
    pointer-events: none;
}
.hero-copy { position: relative; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/*---=============================================================
   10. Product screenshot frame
=============================================================---*/
.screen {
    margin-top: 30px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--paper);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.screen-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding-inline: 13px;
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
}
.screen-dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--line); }
.screen-dot:nth-child(1) { background-color: #ff5f57; }
.screen-dot:nth-child(2) { background-color: #febc2e; }
.screen-dot:nth-child(3) { background-color: #28c840; }
.screen-label {
    margin-inline: auto;
    font-family: var(--f-data);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}
.screen img { display: block; width: 100%; }

/* Portrait screenshot. Capped at the source image's own 410px width so
   the browser never scales it up — anything wider resamples 410x582 and
   the UI text in the shot goes soft. Also keeps the column from towering
   over the copy beside it. */
/* Held well under the source's 410px so the browser downsamples rather
   than stretches. Downsampling stays sharp; upscaling never does. */
.screen--plain {
    max-width: 320px;
    margin-inline: auto;
    border-radius: var(--r-lg);
}
.screen--plain img { border-radius: var(--r-lg); }

/*---=============================================================
   10b. Dashboard mock
   Drawn in markup rather than shipped as a screenshot: it stays
   sharp on every display, costs no download, and the numbers can
   be corrected without reopening a design file. Purely decorative
   — the wrapper carries the label and the internals are hidden
   from assistive tech.
=============================================================---*/
.mock {
    display: flex;
    background-color: var(--paper);
    font-size: 11px;
    line-height: 1.35;
}
.mock-rail {
    flex: 0 0 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    background-color: var(--surface);
    border-right: 1px solid var(--line);
}
.mock-rail span {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background-color: var(--line);
}
.mock-rail span:first-child { background-color: var(--brand); }

.mock-body { flex: 1 1 auto; min-width: 0; padding: 14px; }

.mock-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mock-top b { display: block; font-size: 13px; color: var(--ink); }
.mock-top i { font-style: normal; color: var(--faint); }
.mock-pill {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: var(--brand-wash);
    color: var(--brand-deep);
    font-family: var(--f-data);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Four across only once there is room; on a phone the figures would
   otherwise wrap inside their own tiles. */
.mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.mock-kpi {
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-color: var(--paper);
}
.mock-kpi i {
    display: block;
    font-style: normal;
    font-family: var(--f-data);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
}
.mock-kpi b { display: block; margin-top: 3px; font-size: 14px; letter-spacing: -.01em; color: var(--ink); }
.mock-kpi em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--teal); }
.mock-kpi em.is-down { color: var(--danger); }

.mock-split { display: grid; gap: 8px; margin-top: 8px; }

.mock-card {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-color: var(--paper);
}
.mock-card > figcaption,
.mock-card > .mock-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-data);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
}
.mock-chart svg { display: block; width: 100%; height: auto; margin-top: 8px; }

.mock-rows { margin-top: 8px; }
.mock-rows li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    list-style: none;
    border-top: 1px solid var(--line-soft);
}
.mock-rows li:first-child { border-top: 0; }
.mock-rows span { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-rows b { flex: 0 0 auto; font-family: var(--f-data); font-size: 10px; color: var(--ink); }
.mock-tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    font-family: var(--f-data);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background-color: var(--teal-wash);
    color: var(--teal);
}
.mock-tag--due { background-color: var(--amber-wash); color: var(--amber); }

/* The scattered-files-to-one-system story, drawn rather than
   photographed. Illustrates the copy beside it instead of showing a
   product screenshot on a page that is not about the product. */
.story {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--paper);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-size: 13px;
}
.story-part { padding: 18px; }
.story-part--before { background-color: var(--surface); }

.story-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--f-data);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}

.story-files { margin-top: 12px; display: grid; gap: 8px; }
.story-files li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-color: var(--paper);
}
/* Fanned a little, the way a stack of files actually sits. */
.story-files li:nth-child(1) { transform: rotate(-.5deg); }
.story-files li:nth-child(3) { transform: rotate(.6deg); }
.story-files svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--faint); stroke-width: 1.7; }
.story-files b { font-weight: 600; color: var(--ink-soft); }
.story-files i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--faint); }

.story-flag {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: var(--danger);
    font-weight: 600;
}
.story-flag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.story-join {
    display: grid;
    place-items: center;
    height: 0;
    border-top: 1px solid var(--line);
}
.story-join span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--brand);
    box-shadow: 0 0 0 5px var(--paper);
    color: #fff;
}
.story-join svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(180deg); }

.story-one {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--brand-wash);
    border-radius: var(--r-sm);
    background-color: var(--brand-wash);
}
.story-one svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--brand-deep); stroke-width: 1.7; }
.story-one b { display: block; color: var(--ink); }
.story-one span { color: var(--muted); font-size: 12px; }

.story-ticks { margin-top: 12px; display: grid; gap: 7px; }
.story-ticks li { display: flex; align-items: center; gap: 8px; list-style: none; color: var(--ink-soft); }
.story-ticks svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: var(--teal); stroke-width: 2.2; }

/* Sign-in card, same reasoning as .mock — drawn, not photographed. */
.auth {
    max-width: 300px;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--paper);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
}
.auth-head {
    padding: 26px 22px 22px;
    text-align: center;
    background: linear-gradient(180deg, var(--brand-wash), var(--paper));
    border-bottom: 1px solid var(--line-soft);
}
.auth-mark { display: block; width: 42px; height: auto; margin-inline: auto; }
.auth-name { margin-top: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.auth-name span { color: var(--brand); }
.auth-tag {
    margin-top: 2px;
    font-family: var(--f-data);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}
.auth-sub { margin-top: 12px; color: var(--muted); }

.auth-body { padding: 20px 22px 18px; }
.auth-label { font-weight: 700; color: var(--ink); }
.auth-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 3px var(--brand-wash);
    color: var(--ink);
}
.auth-at {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background-color: var(--surface-2);
    color: var(--muted);
    font-size: 10px;
}
/* The caret is the only thing here that implies a live field. */
.auth-caret {
    width: 1px;
    height: 13px;
    background-color: var(--brand);
    animation: authblink 1.1s steps(1, end) infinite;
}
@keyframes authblink { 50% { opacity: 0; } }

.auth-save { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ink-soft); }
.auth-switch {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background-color: var(--brand);
}
.auth-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--paper);
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    padding: 11px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    box-shadow: 0 8px 18px -10px rgba(60, 57, 196, .9);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.auth-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.auth-alt { margin-top: 14px; text-align: center; color: var(--muted); }
.auth-alt b { color: var(--brand); }

.auth-foot {
    padding: 10px;
    text-align: center;
    background-color: var(--surface);
    border-top: 1px solid var(--line-soft);
    font-size: 10px;
    color: var(--faint);
}
.auth-foot b { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .auth-caret { animation: none; }
}

/*---=============================================================
   10b. Hero brief — the company at a glance
   Replaces the old hero photograph. Built from type and rules so it
   costs nothing to download and never resamples on a high-DPI screen.
=============================================================---*/
/* Panels are stacked in one grid cell, so the box sizes to the tallest
   of the three and nothing jumps as they swap. */
.showcase {
    position: relative;
    display: grid;
    margin-top: 30px;
}
.showcase > .show-panel { grid-area: 1 / 1; }

.show-panel {
    padding: 20px 20px 46px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--paper), var(--surface));
    box-shadow: var(--shadow-md);
    opacity: 0;
    animation: showcase 18s cubic-bezier(.4, 0, .2, 1) infinite;
}
.show-panel:nth-child(2) { animation-delay: 6s; }
.show-panel:nth-child(3) { animation-delay: 12s; }

/* Let a reader stop the carousel to finish reading a panel */
.showcase:hover .show-panel,
.showcase:focus-within .show-panel,
.showcase:hover .show-dots span,
.showcase:focus-within .show-dots span { animation-play-state: paused; }

@keyframes showcase {
    0%   { opacity: 0; transform: translateY(12px); }
    3%   { opacity: 1; transform: none; }
    30%  { opacity: 1; transform: none; }
    33%  { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 0; transform: translateY(12px); }
}

.show-dots {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    gap: 6px;
}
.show-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--line);
    animation: showcase-dot 18s steps(1, end) infinite;
}
.show-dots span:nth-child(2) { animation-delay: 6s; }
.show-dots span:nth-child(3) { animation-delay: 12s; }

@keyframes showcase-dot {
    0%, 32%   { width: 20px; background-color: var(--brand); }
    33%, 100% { width: 8px; background-color: var(--line); }
}

/* ---- panel 2: numbered flow ---- */
.flow { display: flex; flex-direction: column; list-style: none; }
.flow li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 0;
}
/* connector between the step markers */
.flow li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50px;
    bottom: -6px;
    width: 2px;
    background-color: var(--line);
}
.flow-n {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--brand-wash);
    color: var(--brand);
    font-family: var(--f-data);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.flow b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.flow i {
    display: block;
    font-style: normal;
    font-family: var(--f-data);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ---- panel 3: handover ledger ---- */
.handover li { padding: 11px 0; font-size: 14.5px; }
.handover li:first-child { border-top: 0; }
.handover li > b { color: var(--teal); }

.brief {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--paper), var(--surface));
    box-shadow: var(--shadow-md);
}
.brief-head {
    margin-bottom: 6px;
    font-family: var(--f-data);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}
.brief-list { display: flex; flex-direction: column; list-style: none; }
.brief-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-top: 1px solid var(--line-soft);
}
.brief-list li:first-child { border-top: 0; }
.brief-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    background-color: var(--brand-wash);
    color: var(--brand);
}
.brief-ico svg { width: 19px; height: 19px; }
.brief-list b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.brief-list i {
    display: block;
    font-style: normal;
    font-family: var(--f-data);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}
.brief-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.brief-foot span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.brief-foot svg { width: 13px; height: 13px; color: var(--teal); }

/*---=============================================================
   11. Cards
=============================================================---*/
.card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--paper);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: #C9C7F0; box-shadow: var(--shadow-sm); }

.ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background-color: var(--brand-wash);
    color: var(--brand);
}
.ico svg { width: 21px; height: 21px; }
.ico--teal { background-color: var(--teal-wash); color: var(--teal); }

.ticks { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ticks svg { width: 14px; height: 14px; margin-top: 4px; color: var(--teal); }

/*---=============================================================
   12. Numbered process
   The numbers are load-bearing here: this is an ordered sequence,
   not decoration.
=============================================================---*/
.steps { display: flex; flex-direction: column; }
.step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}
.step-n {
    font-family: var(--f-data);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/*---=============================================================
   13. Stat band
=============================================================---*/
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.stat {
    padding: 20px 16px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stat b {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.stat span {
    display: block;
    margin-top: 4px;
    font-family: var(--f-data);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}

/*---=============================================================
   14. Horizontal snap rail
   Four stacked testimonials is ~1400px of scroll on a phone; a rail
   makes it one screen and signals there is more to swipe.
=============================================================---*/
.rail {
    display: flex;
    gap: 12px;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.rail > * { flex: 0 0 84%; scroll-snap-align: start; }

.quote { display: flex; flex-direction: column; gap: 12px; }
.quote p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.quote footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.quote footer b { display: block; font-size: 14px; line-height: 1.3; }
.quote footer span { font-size: 12px; color: var(--faint); }
.avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--brand-wash);
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
}

/*---=============================================================
   15. Pricing
=============================================================---*/
.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--paper);
}
.plan--pick { border-color: var(--brand); box-shadow: 0 14px 40px -22px var(--brand); }
.plan-tag {
    position: absolute;
    top: -10px;
    right: 18px;
    padding: 3px 11px;
    border-radius: 999px;
    background-color: var(--brand);
    color: #fff;
    font-family: var(--f-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.plan-head { display: flex; flex-direction: column; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price b { font-size: 36px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price span { font-size: 14px; color: var(--muted); }

/* Label / dotted leader / figure — a ledger line. Keeps the limits
   readable on a 360px screen without a sideways scroll. */
.ledger { display: flex; flex-direction: column; list-style: none; }
.ledger li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}
.ledger li > span {
    font-family: var(--f-data);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}
.ledger li > i { flex: 1 1 auto; border-bottom: 1px dotted var(--line); font-style: normal; }
.ledger li > b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger li.off > b { color: var(--faint); font-weight: 500; }

/*---=============================================================
   16. Jobs
=============================================================---*/
.job-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.job--closed { opacity: .72; }
.job-desc { font-size: 15px; line-height: 1.65; color: var(--muted); }
.job-desc > *:first-child { margin-top: 0; }
.job-desc p { margin-bottom: 10px; }
.job-desc ul, .job-desc ol { margin: 0 0 12px 20px; }
.job-desc ul { list-style: disc; }
.job-desc ol { list-style: decimal; }
.job-desc li { margin-bottom: 5px; }
.job-desc strong, .job-desc b { color: var(--ink-soft); }

/*---=============================================================
   17. FAQ — native <details>, no accordion library
=============================================================---*/
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 2px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; color: var(--brand); transition: transform .22s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 2px 18px; max-width: 68ch; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/*---=============================================================
   18. Forms
=============================================================---*/
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
    font-family: var(--f-data);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 50px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--paper);
    /* 16px keeps iOS from zooming the viewport on focus */
    font-size: 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 118px; line-height: 1.55; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-wash);
}
.field .hint { font-size: 12.5px; color: var(--faint); }
.field .err { font-size: 13px; color: var(--danger); }
.field.has-err input,
.field.has-err textarea,
.field.has-err select { border-color: var(--danger); }

.file-drop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background-color: var(--surface);
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
}
.file-drop:hover { border-color: var(--brand); color: var(--brand); }
.file-drop svg { width: 18px; height: 18px; }
.file-drop input[type="file"] { display: none; }
.file-name { font-size: 13px; color: var(--muted); word-break: break-all; }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: 14.5px;
    line-height: 1.55;
}
.alert svg { width: 18px; height: 18px; margin-top: 2px; }
.alert--ok { background-color: var(--teal-wash); border-color: rgba(0, 160, 147, .3); color: #04564F; }
.alert--bad { background-color: var(--danger-wash); border-color: rgba(192, 57, 43, .3); color: #8E2A20; }

/*---=============================================================
   19. Contact methods
=============================================================---*/
.method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--paper);
}
.method svg { width: 19px; height: 19px; color: var(--brand); }
.method b { display: block; font-size: 14.5px; line-height: 1.3; word-break: break-word; }
.method span { font-size: 12.5px; color: var(--faint); }

/*---=============================================================
   20. CTA band
=============================================================---*/
.cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 22px;
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, #3C39C4, #5956E9 55%, #2E93B4);
    color: #fff;
}
.cta .h2 { color: #fff; }
/* The band sits on a saturated gradient, so the supporting line needs more
   weight and opacity than body copy on white does to read as deliberate. */
.cta p { font-size: 16px; line-height: 1.55; font-weight: 500; color: #fff; }

/*---=============================================================
   21. Page banner
=============================================================---*/
.banner {
    padding-block: 32px 26px;
    border-bottom: 1px solid var(--line);
    background-color: var(--surface);
}
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    list-style: none;
    font-family: var(--f-data);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}
.crumbs a { color: var(--brand); }

/*---=============================================================
   22. Prose (privacy policy and other long-form copy)
=============================================================---*/
.prose { max-width: 68ch; }
.prose h2 { margin: 30px 0 10px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.prose a { color: var(--brand); font-weight: 600; }
.prose ul { margin: 0 0 14px 20px; list-style: disc; color: var(--muted); }
.prose li { margin-bottom: 6px; }

/*---=============================================================
   23. Confirmation card
=============================================================---*/
.confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin-inline: auto;
    padding: 36px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--paper);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.confirm-mark {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: var(--teal-wash);
    color: var(--teal);
}
.confirm-mark svg { width: 36px; height: 36px; }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/*---=============================================================
   24. Footer
=============================================================---*/
.foot {
    margin-top: 8px;
    padding-block: 34px 26px;
    border-top: 1px solid var(--line);
    background-color: var(--surface);
}
.foot-grid { display: flex; flex-direction: column; gap: 26px; }
.foot h2 {
    margin-bottom: 12px;
    font-family: var(--f-data);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}
.foot nav { display: flex; flex-direction: column; gap: 9px; }
.foot nav a { font-size: 14.5px; color: var(--muted); }
.foot nav a:hover { color: var(--brand); }
.foot .logo img { height: 38px; }
.foot-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--faint);
}

/*---=============================================================
   25. Sticky action bar (phones only)
   The old layout buried every contact route at the bottom of a
   ~3000px page. This keeps both within thumb reach at all times.
=============================================================---*/
.actionbar {
    position: sticky;
    bottom: 0;
    z-index: 25;
    display: flex;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background-color: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}
.actionbar .btn { flex: 1 1 0; min-height: 46px; font-size: 14.5px; }

.to-top {
    position: fixed;
    right: 18px;
    bottom: 78px;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background-color: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 18px; height: 18px; }

/*---=============================================================
   26. Tablet — 640px
=============================================================---*/
@media (min-width: 640px) {
    .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
    /* Once the plans sit side by side their ledgers have to start on the
       same line, otherwise the figures stop reading as a column. */
    .plan-head { min-height: 160px; }
    .rail > * { flex: 0 0 46%; }
    .hero-actions { flex-direction: row; width: auto; }
    .confirm-actions { flex-direction: row; justify-content: center; }
    .confirm-actions .btn { width: auto; }
}

/*---=============================================================
   27. Desktop — 900px
=============================================================---*/
@media (min-width: 900px) {
    :root { --head-h: 72px; }

    .wrap { max-width: 1180px; margin-inline: auto; padding-inline: 40px; }

    .sec { padding-block: 84px; }
    .sec--tight { padding-block: 56px; }

    .sechead { max-width: 62ch; margin-bottom: 42px; }
    .sechead--mid { margin-inline: auto; text-align: center; }

    .h1 { font-size: 54px; letter-spacing: -.032em; }
    .h2 { font-size: 34px; }
    .h3 { font-size: 19px; }
    .lead { font-size: 18px; }

    .head { padding-inline: 40px; }
    .logo img { height: 40px; }
    .burger { display: none; }
    .head .head-cta { display: inline-flex; }

    /* Primary nav */
    .nav { display: block; }
    .nav-list { display: flex; align-items: center; gap: 4px; }
    .nav-list > li > a,
    .nav-trigger {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 13px;
        border: 0;
        border-radius: var(--r-sm);
        background-color: transparent;
        font-family: var(--f-ui);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        transition: color .18s ease, background-color .18s ease;
    }
    .nav-list > li > a:hover,
    .nav-trigger:hover,
    .nav-group:focus-within .nav-trigger { color: var(--ink); background-color: var(--surface); }
    .nav-list > li > a.active,
    .nav-trigger.active { color: var(--brand); background-color: var(--brand-wash); }
    .nav-trigger svg { width: 13px; height: 13px; transition: transform .2s ease; }
    .nav-group:hover .nav-trigger svg,
    .nav-group:focus-within .nav-trigger svg,
    .nav-group.is-open .nav-trigger svg { transform: rotate(180deg); }

    /* Products dropdown — opens on hover, on keyboard focus and on
       click, so mouse, tab key and touch laptops all work. */
    .nav-group { position: relative; }
    .dd {
        position: absolute;
        top: calc(100% + 9px);
        left: 0;
        z-index: 40;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 320px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background-color: var(--paper);
        box-shadow: var(--shadow-md);
        list-style: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .nav-group:hover .dd,
    .nav-group:focus-within .dd,
    .nav-group.is-open .dd { opacity: 1; visibility: visible; transform: none; }
    .dd-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 11px 12px;
        border-radius: var(--r-sm);
        color: var(--ink);
    }
    .dd-item:hover { background-color: var(--surface); }
    .dd-item b { display: block; font-size: 14.5px; line-height: 1.35; }
    .dd-item span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

    .sheet, .actionbar { display: none !important; }
    .to-top { bottom: 26px; }

    /* Content */
    .grid { gap: 20px; }
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }

    .card { padding: 26px; gap: 12px; }

    .hero { padding-block: 78px 84px; }
    .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
    .screen, .brief, .showcase { margin-top: 0; }

    /* Room for the chart and the invoice list to sit side by side. */
    .mock { font-size: 12px; }
    .mock-body { padding: 18px; }
    .mock-kpis { grid-template-columns: repeat(4, 1fr); }
    .mock-split { grid-template-columns: 1.35fr 1fr; }
    .brief { padding: 28px; }
    .show-panel { padding: 28px 28px 52px; }
    .show-dots { left: 28px; bottom: 24px; }

    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

    .steps { flex-direction: row; gap: 24px; }
    .step { flex: 1 1 0; grid-template-columns: 1fr; gap: 12px; padding: 22px 0 0; }

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

    .rail { margin-inline: 0; padding-inline: 0; gap: 20px; }
    .rail > * { flex: 0 0 31%; }

    .btn--wide { width: auto; }
    /* inside a column card the button should still fill the card */
    .plan .btn--wide, .sheet-foot .btn--wide, .form .btn--wide { width: 100%; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    .cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 34px; padding: 46px 44px; }
    .cta p { font-size: 17px; max-width: 62ch; }
    .cta .btn--wide { flex: 0 0 auto; }

    .banner { padding-block: 56px 46px; }

    .foot { padding-block: 56px 30px; }
    .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}

/*---=============================================================
   27b. Motion
   Reveal-on-scroll without a library. The hidden state only exists
   when JS is running (html.js, set by an inline script in the head so
   it applies before first paint) AND the visitor has not asked for
   reduced motion — so content is never trapped behind an animation.

   The container list below is mirrored in app.js. Keep the two in
   sync: CSS hides the children, JS decides when to release them.
=============================================================---*/
@media (prefers-reduced-motion: no-preference) {
    .js .hero-copy > *,
    .js .sechead > *,
    .js .grid > *,
    .js .steps > *,
    .js .stats > *,
    .js .rail > *,
    .js .split > *,
    .js .faq > *,
    .js .prose > *,
    .js .form > *,
    .js .foot-grid > * {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s cubic-bezier(.2, .7, .3, 1),
                    transform .55s cubic-bezier(.2, .7, .3, 1);
    }

    .js .is-in > * { opacity: 1; transform: none; }

    /* Stagger within a group — enough steps for the widest grid (9 cards) */
    .js .is-in > *:nth-child(2) { transition-delay: 60ms; }
    .js .is-in > *:nth-child(3) { transition-delay: 120ms; }
    .js .is-in > *:nth-child(4) { transition-delay: 180ms; }
    .js .is-in > *:nth-child(5) { transition-delay: 240ms; }
    .js .is-in > *:nth-child(6) { transition-delay: 300ms; }
    .js .is-in > *:nth-child(7) { transition-delay: 360ms; }
    .js .is-in > *:nth-child(8) { transition-delay: 420ms; }
    .js .is-in > *:nth-child(n+9) { transition-delay: 480ms; }
}

/* ---- hover / pointer polish ---------------------------------- */
.card { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.card:hover { transform: translateY(-3px); }
.card .ico { transition: background-color .25s ease, color .25s ease; }
.card:hover .ico { background-color: var(--brand); color: #fff; }
.card:hover .ico--teal { background-color: var(--teal); }

.plan { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.plan:hover { transform: translateY(-4px); border-color: #C9C7F0; box-shadow: var(--shadow-md); }
.plan--pick:hover { border-color: var(--brand); }

/* The screenshots are the only photographic content left, so they get
   the lift instead of a zoom — scaling a raster only softens it. */
.screen { transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease; }
.screen:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.brief-list li .brief-ico { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.brief-list li:hover .brief-ico { background-color: var(--brand); color: #fff; transform: scale(1.06); }

.method { transition: border-color .2s ease, transform .2s ease; }
.method:hover { border-color: #C9C7F0; transform: translateY(-2px); }

.chip { transition: background-color .2s ease, color .2s ease; }

.logo img { transition: opacity .2s ease; }
.logo:hover img { opacity: .82; }

.stat { transition: background-color .25s ease; }
.stat:hover { background-color: var(--surface); }

/* Header gains a shadow once the page has moved under it */
.head { transition: box-shadow .25s ease, border-color .25s ease; }
.head.is-stuck { box-shadow: 0 6px 24px -14px rgba(18, 18, 43, .35); border-bottom-color: transparent; }

/*---=============================================================
   28. Reduced motion
=============================================================---*/
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    /* The rule above collapses the carousel's keyframes, which would leave
       every panel on its 0% state (invisible). Pin the first one open and
       drop the indicator instead of rotating. */
    .show-panel { opacity: 0; }
    .show-panel:first-child { opacity: 1; }
    .show-dots { display: none; }
}

/*---=============================================================
   29. Print
=============================================================---*/
@media print {
    .head, .sheet, .actionbar, .to-top, .cta, .foot nav { display: none !important; }
    body { color: #000; }
}