/* ==========================================================================
   STRUCTURE
   Two kinds of class, and the name says which. A component is a block and
   owns its parts: `.footer`, `.footer__icons`, `.card--wide`, and `.is-current`
   for a state the server or a script sets. Everything under LAYOUT and
   TYPOGRAPHY is a utility instead -- one job, no owner, spelled flat:
   `.container`, `.stack-loose`, `.text-small`. utility.css holds the rest of
   them. A hyphen in a block name is part of the name, never a part of it.
   ========================================================================== */

/* ==========================================================================
   FACES
   Five WOFF2 ported from ../NewWebsite, and the comp's headline face beside
   them. `swap` everywhere: the default `auto` holds text invisible for ~3s
   behind two blocking stylesheets.
   ========================================================================== */

/* The comp sets its headline in this and nothing else. A missing file is not
   a broken page: the family goes unresolved and --font-headline falls to EK
   Baumer, which is where the headline stood before. */
@font-face {
    font-family: 'NeueHaasGroteskDisplay';
    src: url('/assets/fonts/neue-haas-grotesk-display-75-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EKBaumerGrotesk';
    src: url('/assets/fonts/ek-baumer-grotesk-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUSTSans';
    src: url('/assets/fonts/just-sans-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/assets/fonts/jetbrains-mono-italic-variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HWCigars';
    src: url('/assets/fonts/hw-cigars-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('/assets/fonts/myriad-pro-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   TOKENS
   Every colour and size below is measured off baryl_homepage.pdf and
   baryl_full_logo.ai, not chosen.
   ========================================================================== */

:root {
    /* Surfaces, off baryl_homepage_brand_feel_!.svg. That file is authored
       sRGB; baryl_homepage.pdf is CMYK, and every value it yields is a
       colour-managed guess at one of these. */
    --color-bg:        #2A2A2D;
    --color-surface:   #2E2E31;   /* card fill, one step off the ground */
    --color-panel:     #1E1E1E;   /* the comp's terminal slot */
    --color-hairline:  #3A3A3F;   /* card and table border */

    /* Text. */
    --color-text:       #F0EFEF;
    --color-text-muted: #A1A1A2;
    --color-on-accent:  #1E2539;  /* the pill label; 6.9:1 on the accent */
    --color-danger:     #FF8080;

    /* Accent. The logo diamond is #57C0A5, within 1/255 of the UI accent. */
    --color-accent:       #58C1A6;
    --color-accent-deep:  #3FA98D;   /* hover */
    --color-logo-word:    #EFEEEE;   /* the lockup's "baryl" */
    --color-logo-tagline: #4ABC8E;   /* the lockup's "god-mode visibility" */

    /* Faces. The headline is the comp's Neue Haas; EK Baumer carries the
       button, every other heading, and the headline until that face lands. */
    --font-headline: 'NeueHaasGroteskDisplay', 'EKBaumerGrotesk', sans-serif;
    --font-display: 'EKBaumerGrotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:    'JUSTSans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrainsMono', ui-monospace, SFMono-Regular, monospace;
    --font-serif:   'HWCigars', Georgia, serif;

    /* Type ladder. The maxima are the comp's literal Tf sizes; each clamp
       runs down to its minimum at a 375px viewport. */
    --size-display: clamp(32px, 1.9vw + 24.9px, 42.26px);
    --size-h2:      clamp(26px, 1.1vw + 21.9px, 32px);
    --size-body:    clamp(17px, 0.34vw + 15.7px, 20.64px);
    --size-label:   clamp(19px, 0.45vw + 17.3px, 23.77px);
    --size-small:   15px;
    --size-eyebrow: 12.46px;

    --logo-pitch: 60px;

    --leading-display: 0.935;
    --leading-body:    1.502;

    /* The comp's literal Tc operators. */
    --track-display: -0.025em;
    --track-body:    -0.03em;
    --track-eyebrow: 0.2em;

    /* Spacing, on NewWebsite's scale where the name is the pixel value. */
    --space-4:  4px;   --space-8:  8px;   --space-12: 12px;
    --space-16: 16px;  --space-24: 24px;  --space-32: 32px;
    --space-48: 48px;  --space-64: 64px;  --space-96: 96px;

    --radius-8: 8px;  --radius-16: 16px;  --radius-24: 24px;
    --radius-pill: 999px;

    /* Grid. */
    --container-max-width: 1440px;
    --container-padding: 24px;
    --grid-columns: 12;
    --grid-gutter: 24px;

    /* Motion. */
    --timing-fast: 0.2s;
    --ease-default: ease;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

/* The funnel is one card tall, and the footer used to land in the middle of
   the viewport underneath it. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--size-body);
    line-height: var(--leading-body);
    letter-spacing: var(--track-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

/* A grid, not just a flex item: .screen and .pitch are each their page's only
   child here and have to be able to centre inside the height `flex: 1 0 auto`
   gives this, with no number naming the footer. */
main { flex: 1 0 auto; display: grid; }

a {
    color: inherit;
    text-decoration: none;
}

/* Prose links have to read as links; a nav link carries its own class. */
p a, li a, td a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

p a:hover, li a:hover, td a:hover {
    color: var(--color-accent-deep);
}

img, svg { max-width: 100%; }

:where(a, button, input, summary):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* The only thing that sets a width. Header and footer sit outside <main>,
   so each carries its own .container -- nesting would double the gutter. */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
    align-items: center;
}

.pitch > .container.grid {
    grid-template-columns: 30% 60.32%;
    gap: 9.68%;
}

/* x 280.64 .. 1653.11 of 1933.74. The comp's margins are symmetric to a
   hundredth, so this is a width and a centre, not two paddings. */
.pitch > .container {
    max-width: none;
    width: 70.97%;
    padding-inline: 0;
}

/* Every page that is not the pitch. The same 70.97% column the comp measures,
   and the content grouped at the middle of the viewport rather than at the top
   of the document -- centred in whatever `main` was left, so the footer stays
   below the fold instead of being subtracted by hand. */
.screen {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    padding-block: min(8dvh, 64px);
}

/* Stretched, not centred: a centred grid item is sized to its content, and the
   card is a measure. `.card--center`'s own auto margin is what centres it, as it
   did when this was a block. */
.screen > .container {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-64);
    max-width: none;
    width: 70.97%;
    padding-inline: 0;
}

/* Above the card, at the funnel's size rather than the pitch's. */
.screen .logo-lockup { height: 40px; }

/* The mark over the card, quiet like the footer's and lit on hover. */
.screen__logo {
    display: flex;
    justify-self: center;
    opacity: 0.75;
    transition: opacity var(--timing-fast) var(--ease-default);
}

.screen__logo:hover { opacity: 1; }

/* A page taller than the viewport starts at the top; centring one hides its
   first rows above the fold. */
.screen--top { align-content: start; }

/* A paragraph outside the narrow column still needs a measure. */
.measure { max-width: 34em; }

.stack > * + * { margin-top: var(--space-24); }
/* The pitch column, which is five elements tall and has the whole screen. */
.stack-loose > * + * { margin-top: var(--space-32); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Every heading but the pitch's, which the comp sets in Neue Haas. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--track-display);
    line-height: 1.1;
}

.heading-display {
    font-family: var(--font-headline);
    font-size: var(--size-display);
    line-height: var(--leading-display);
}

.heading-h2 {
    font-size: var(--size-h2);
}

.text-body {
    font-size: var(--size-body);
    line-height: var(--leading-body);
}

.text-small {
    font-size: var(--size-small);
    line-height: 1.6;
}

.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

/* The comp's "BARYL IS A SECURITY PRODUCT BY" lockup label. */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--size-eyebrow);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ==========================================================================
   LOGO LOCKUP
   ========================================================================== */

.logo-lockup {
    display: block;
    width: auto;
    height: 40px;
}

/* 1.5x, because on the pitch the lockup is the whole identity rather than the
   mark at the top of a page that already has a card under it. */
.pitch .logo-lockup { height: var(--logo-pitch); }


/* ==========================================================================
   BUTTONS
   <rect x="287.54" y="714.34" width="266.18" height="65.32" rx="32.66"/> on
   the comp's 1933.74 canvas: rx is exactly height / 2, which is what
   --radius-pill already resolves to at this size.
   `line-height` is explicit: an <a class="btn"> would inherit 1.5 from body
   while a <button class="btn"> takes the agent's ~1.2, and they differed.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-32);
    min-height: 65.32px;
    font-family: var(--font-display);
    font-size: var(--size-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--timing-fast) var(--ease-default),
                color var(--timing-fast) var(--ease-default),
                transform var(--timing-fast) var(--ease-default);
}

.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.btn--accent:hover {
    background-color: var(--color-accent-deep);
    transform: translateY(-1px);
}

.btn--quiet {
    background: transparent;
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-hairline);
}

.btn--quiet:hover {
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    transform: translateY(-1px);
}

/* The same label with the pill taken away, for a choice offered and not urged. */
.btn--link {
    min-height: 0;
    padding: 0;
    background: none;
    font-size: var(--size-body);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.btn--link:hover { color: var(--color-accent); }

/* `min-width`, not `width`: a longer label grows the comp's pill, never clips it. */
.btn--cta { min-width: 266.18px; }

.btn__arrow {
    width: 1em;
    height: 1em;
    flex: none;
}

/* ==========================================================================
   ACTIONS
   The cluster a page ends on, wherever it ends: the pill, and whatever else
   the reader is allowed to do instead of pressing it.
   ========================================================================== */

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-16);
}

/* One choice under the other, so the second reads as the lesser of the two. */
.actions--stack {
    flex-direction: column;
    align-items: flex-start;
}

.actions form { display: contents; }

/* A form control that has to read as prose: "Not you?" sits inside a sentence
   and posts the sign-out form the paragraph after it declares. */
.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-button:hover { color: var(--color-accent-deep); }

/* ==========================================================================
   CARD
   The archetype behind both funnel routes: every state of /setup and the
   emailed click at /auth/{token}. `color` is explicit: the rule this replaces
   set a near-white background and no colour, so every heading inside it
   painted white on white.
   ========================================================================== */

.card {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-24);
    padding: clamp(24px, 4vw, 48px);
    max-width: 560px;
}

.card > * + * { margin-top: var(--space-16); }

.card h1 { font-size: var(--size-h2); }
.card h2 { font-size: var(--size-label); }

.card form > * + * { margin-top: var(--space-16); }

/* A card centred on the page, for the four one-decision screens. */
.card--center {
    margin-inline: auto;
}

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */

label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--size-small);
    color: var(--color-text-muted);
}

input[type="email"],
input[type="text"] {
    display: block;
    width: 100%;
    padding: var(--space-16);
    font-family: var(--font-sans);
    font-size: 16px;                /* under 16 and iOS zooms the page on focus */
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-8);
    transition: border-color var(--timing-fast) var(--ease-default);
}

input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

input[type="email"]:focus,
input[type="text"]:focus {
    border-color: var(--color-accent);
}

/* ==========================================================================
   THE COUNTER
   Above the tiers on /setup and above the form on /checkout. JetBrains Mono carries
   the figures: they change every second, and a proportional face reflows the
   row on every tick. `.is-closed` is the state past zero, set by the server
   on first paint and by the script on the tick that reaches it.
   ========================================================================== */

.countdown {
    padding: var(--space-16);
    margin-bottom: var(--space-32);
    text-align: center;
    background-color: var(--color-panel);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-16);
}

.countdown__label {
    font-family: var(--font-sans);
    font-size: var(--size-eyebrow);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

.countdown__clock {
    display: flex;
    justify-content: center;
    gap: var(--space-16);
    margin-top: var(--space-8);
}

.countdown__part { display: flex; flex-direction: column; align-items: center; }

.countdown__digits {
    font-family: var(--font-mono);
    font-size: var(--size-h2);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.countdown__part i {
    font-family: var(--font-sans);
    font-size: var(--size-eyebrow);
    font-style: normal;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.countdown.is-closed { border-color: var(--color-hairline); }
.countdown.is-closed .countdown__label { color: var(--color-text-muted); }
.countdown.is-closed .countdown__digits { color: var(--color-text-muted); }

/* ==========================================================================
   THE OFFER COLUMNS
   One column per offering, in config order, side by side to whatever width
   the card has. The gutter is the column's own padding, so the whitespace
   inside a column and between two of them is the same figure.
   ========================================================================== */

.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-24);
}

.pricing__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24);
    background-color: var(--color-bg);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-16);
}

.pricing__col.is-current { border-color: var(--color-accent); }

.pricing__name {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--track-display);
}

.pricing__price {
    font-family: var(--font-mono);
    font-size: var(--size-h2);
    font-style: italic;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.pricing__features {
    list-style: none;
    font-size: var(--size-small);
    color: var(--color-text-muted);
}

.pricing__features li + li { margin-top: var(--space-8); }

/* The plus is the list's marker, so the strings stay the feature names. */
.pricing__features li::before {
    content: "+";
    margin-right: var(--space-8);
    color: var(--color-accent);
}

/* Every column's button on one floor, whatever the lists above them measure. */
.pricing__col form { margin-top: auto; }

.pricing__col .btn { width: 100%; }

.card--wide { max-width: 880px; margin-inline: auto; }

/* ==========================================================================
   THE CHECKOUT
   The measure the payment page sits in, and its two columns: the form on the
   left, the summary on the right. The gutter is the summary's own padding, so
   the whitespace between the columns and inside the card match.
   ========================================================================== */

.checkout {
    width: 100%;
    max-width: 1024px;
    margin-inline: auto;
}

.checkout__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--size-small);
    color: var(--color-text-muted);
    transition: color var(--timing-fast) var(--ease-default);
}

.checkout__back:hover { color: var(--color-text); }

.checkout__arrow { width: 1em; height: 1em; flex: none; }

.checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-32);
    margin-top: var(--space-32);
    align-items: start;
}

/* The size `.card h2` gives a heading, for a page that has no card. */
.checkout__heading { font-size: var(--size-label); }

.checkout__error { font-size: var(--size-small); color: var(--color-danger); }

/* The summary follows the form down a column two sections tall. */
.checkout__aside {
    position: sticky;
    top: var(--space-32);
}

/* ==========================================================================
   THE ORDER SUMMARY
   ========================================================================== */

.summary {
    padding: var(--space-32);
    background-color: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-24);
}

.summary__plan {
    font-family: var(--font-display);
    font-size: var(--size-label);
    font-weight: 700;
    letter-spacing: var(--track-display);
}

/* One step in from the card, on the ground the card sits on. */
.summary__panel {
    padding: var(--space-24);
    background-color: var(--color-bg);
    border-radius: var(--radius-16);
}

.summary__title {
    font-family: var(--font-sans);
    font-size: var(--size-eyebrow);
    font-weight: 500;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-16);
    font-size: var(--size-small);
}

.summary__item { display: flex; flex-direction: column; }

/* The line under an item's name is a description, not an aside. */
.summary__item i {
    font-style: normal;
    color: var(--color-text-muted);
}

.summary__amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summary__rule {
    margin-block: var(--space-16);
    border: 0;
    border-top: 1px solid var(--color-hairline);
}

.summary__row--total,
.summary__row--total .summary__amount { font-size: var(--size-body); }

.summary__note {
    font-size: var(--size-small);
    color: var(--color-text-muted);
}

/* ==========================================================================
   CODE
   None of these had a single rule before; every one of them is in a template.
   ========================================================================== */

.code-block {
    background-color: var(--color-panel);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-16);
    padding: var(--space-24);
    overflow-x: auto;               /* a long command scrolls, not the page */
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text);
}

.code-block code {
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
}

.code-block__prompt { color: var(--color-accent); }

code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--color-accent);
    background-color: rgb(255 255 255 / 0.06);
    padding: 2px 6px;
    border-radius: var(--radius-8);
}

/* A license key has no break opportunity in it. */
.key-value { word-break: break-all; }

/* ==========================================================================
   THE PITCH, THE HERO, AND THE WAVE FIELD
   `/` is the comp: a single canvas, not a document. Its content runs y 240..893
   of 1038, so 23% above and 14% below, sitting slightly low of centre rather
   than centred. Reproduced, not trued up -- and in dvh, because those are
   fractions of the canvas height and a percentage padding is width-relative.
   ========================================================================== */

/* A floor, not a ceiling: `main` is a grid and `.pitch` is its only child, so
   the pitch stretches to the screen and the screen grows if the column ever
   outgrows it. Nothing is clipped at any height, so no breakpoint has to guess
   at one. */
.is-single-screen {
    min-height: 100dvh;
}

.pitch {
    position: relative;
    display: grid;
    align-content: center;
    padding-block: min(8dvh, 64px);
}

.pitch > .container {
    position: relative;
    z-index: 1;
}

/* Panel centre y 525.08, content centre 566.77, canvas centre 519.19. Both
   sit low of centre and they do not sit equally low. */
.pitch__logo    { display: block; width: fit-content; }
.pitch__panel   { align-self: center; }
.pitch__content {
    align-self: start;
    height: 0;
    margin-top: calc(var(--logo-pitch) / -2);
}

.wave-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* clip, not hidden: `hidden` makes <body> a scroll container and kills
       html { scroll-behavior: smooth }. */
    overflow: clip;
}

/* `cover` crops rather than letterboxes, which is how the comp's own field
   behaves outside its frame -- it already overruns every edge. */
.wave-field > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.3);
}

/* ==========================================================================
   THE COMP'S PANEL
   <rect x="749.78" y="287.63" width="910.23" height="474.89"/>, filled
   #1E1E1E with no rx and no stroke. The aspect ratio is what holds the
   player's rows legible without a second set of numbers to keep in step.
   ========================================================================== */

.panel {
    aspect-ratio: 910.23 / 474.89;
    background-color: var(--color-panel);
    overflow: hidden;
}

/* The player fills the panel exactly: the comp's rectangle is the frame, and
   the player's own chrome is off, so there is nothing else to see. Both
   classes are named because the player's own `div.ap-wrapper div.ap-player`
   sets a 4px radius and a black ground, and its stylesheet loads after ours. */
.panel .ap-wrapper {
    width: 100%;
    height: 100%;
}

.panel .ap-wrapper .ap-player {
    --term-color-background: var(--color-panel);
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* ==========================================================================
   CO-BRAND
   ========================================================================== */

/* The line reads as a sentence the page is saying, not as a caption under it. */
.cobrand {
    color: var(--color-text);
    font-weight: 400;
}

/* No underline: the eyebrow is already tracked and coloured, and an underline
   under 0.2em tracking reads as a rule rather than a link. */
.cobrand__link {
    display: inline-block;
    color: var(--color-accent);
    letter-spacing: var(--track-eyebrow);
    text-decoration: none;
    vertical-align: middle;
}

/* Masked, not tinted: the brushed wordmark is white on transparency, so the
   mask reproduces every bristle and takes the green from the token -- the
   company's own colour is never written down here. 410 / 341 is the file, and
   it sets two lines of lettering, so it needs the height a one-line lockup
   would not. */
.cobrand__logo {
    display: block;
    height: calc(var(--size-eyebrow) * 2.6);
    aspect-ratio: 410 / 341;
    background-color: var(--color-accent);
    -webkit-mask: url('/assets/img/crystal-peak-wordmark.png') center / contain no-repeat;
    mask: url('/assets/img/crystal-peak-wordmark.png') center / contain no-repeat;
    transition: background-color var(--timing-fast) var(--ease-default);
}

.cobrand__link:hover .cobrand__logo { background-color: var(--color-accent-deep); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* One bound. The height arm this replaces existed because the lock could clip,
   and it cannot now; what is left is about the panel stacking under the column,
   which is a width. */
@media (max-width: 1024px) {
    .pitch__content,
    .pitch__panel {
        grid-column: 1 / -1;
    }

    .pitch__content { height: auto; margin-top: 0; }

    .grid { align-items: start; }

    /* 70.97% is a measurement off a 1933.74 canvas. Under a phone it is a
       266px column against no gutter at all. */
    .pitch > .container,
    .screen > .container {
        width: 100%;
        padding-inline: var(--container-padding);
    }

    /* Stacked, the comp's fractions describe a composition that is no longer
       on screen. */
    .pitch { padding-block: clamp(48px, 8vh, 96px); }

    /* Stacked, a sticky aside sticks to nothing above the footer. */
    .checkout__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
    .checkout__aside { position: static; }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
        --grid-gutter: 16px;
    }

    /* Full-width beats the comp's fixed pill width once the column is narrower,
       and a link that stretched would put its underline under the whole page. */
    .btn { width: 100%; }
    .btn--cta { min-width: 0; }
    .btn--link { width: auto; }
}