/* ==========================================================================
   Courier Portal site styles
   Palette and type are derived from the logo: navy #12193A + yellow #FBE202.
   ========================================================================== */

:root {
    /* Colour */
    --ink: #12193a;
    --ink-90: #1b2450;
    --ink-60: #4c5578;
    --ink-45: #6b7490;
    --yellow: #fbe202;
    --yellow-deep: #e8d100;
    --yellow-soft: #fffce2;
    --paper: #ffffff;
    --mist: #f5f7fb;
    --sky: #eaeeff;
    --line: #e5e9f2;
    --line-strong: #d4dae8;

    /* Type */
    --display: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Space */
    --gutter: 24px;
    --shell: 1200px;
    --section: clamp(72px, 8vw, 124px);
    --header-h: 76px;

    /* Depth */
    --shadow-sm: 0 1px 2px rgba(18, 25, 58, .06), 0 4px 12px rgba(18, 25, 58, .05);
    --shadow-md: 0 2px 4px rgba(18, 25, 58, .05), 0 12px 32px rgba(18, 25, 58, .09);
    --shadow-lg: 0 4px 8px rgba(18, 25, 58, .05), 0 32px 72px rgba(18, 25, 58, .16);
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 3px solid rgba(18, 25, 58, .45);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --------------------------------------------------------------- layout - */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--wide {
    max-width: 1360px;
}

.section {
    padding-block: var(--section);
    scroll-margin-top: calc(var(--header-h) + 8px);
}

.section--mist {
    background: var(--mist);
}

.section--tight {
    padding-block: clamp(56px, 5vw, 80px);
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    transition: top .2s ease;
}

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

/* ----------------------------------------------------------- typography - */

.h1 {
    font-size: clamp(2.5rem, 1.15rem + 4.3vw, 4.25rem);
}

.h2 {
    font-size: clamp(2rem, 1.25rem + 2.4vw, 3rem);
}

.h3 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-60);
    margin-bottom: 18px;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--yellow);
}

.lead {
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    line-height: 1.6;
    color: var(--ink-60);
}

.section-head {
    max-width: 700px;
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head .lead {
    margin-top: 20px;
}

/* -------------------------------------------------------------- buttons - */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--yellow);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(200, 180, 0, .28);
}

.btn--primary:hover {
    background: var(--yellow-deep);
    box-shadow: 0 12px 26px rgba(200, 180, 0, .34);
}

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

.btn--ink:hover {
    background: var(--ink-90);
    box-shadow: 0 12px 26px rgba(18, 25, 58, .24);
}

.btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn--ghost:hover {
    border-color: var(--ink);
    background: rgba(18, 25, 58, .03);
}

.btn--light {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

.btn--sm {
    min-height: 44px;
    padding: 0 22px;
    font-size: .9375rem;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.btn-row--center {
    justify-content: center;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-weight: 700;
    color: var(--ink);
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 2px;
}

.link-arrow svg {
    transition: transform .18s ease;
}

.link-arrow:hover svg {
    transform: translateX(4px);
}

/* --------------------------------------------------------------- header - */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    /* Solid rather than translucent: nothing is blurring what passes
       underneath, so the page would otherwise read straight through it. */
    background: #fff;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(18, 25, 58, .05);
}

.site-header .shell {
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand img {
    height: 34px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline: auto;
}

.nav a {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-60);
    transition: color .15s ease, background-color .15s ease;
}

.nav a:hover {
    color: var(--ink);
    background: rgba(18, 25, 58, .05);
}

/* Only surfaces once the header buttons collapse into the menu. */
.nav__extra {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--line-strong);
    border-radius: 14px;
    cursor: pointer;
    color: var(--ink);
}

.nav-toggle span {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, background-color .2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease;
}

.nav-toggle span::before {
    top: -6px;
}

.nav-toggle span::after {
    top: 6px;
}

.nav-toggle[aria-expanded="true"] span {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ----------------------------------------------------------------- hero - */

.hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(48px, 6vw, 92px));
    padding-bottom: 0;
    overflow: hidden;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.hero .lead {
    margin-top: 24px;
    max-width: 640px;
    margin-inline: auto;
}

.hero .btn-row {
    justify-content: center;
}

.hero__note {
    margin-top: 20px;
    font-size: .875rem;
    color: var(--ink-45);
}

/* Interior pages open with the same centred block, minus the product art. */
.hero--page {
    padding-bottom: clamp(8px, 2vw, 24px);
    background: linear-gradient(180deg, var(--mist), var(--paper));
}

/* Product art. The hero mock carries its own window chrome and shadows, so
   it runs bare; the flat dashboard gets a frame. */
.showcase {
    position: relative;
    z-index: 1;
    margin-top: clamp(48px, 6vw, 76px);
}

.showcase img,
.showcase svg {
    width: 100%;
    height: auto;
}

/* The hero mock is sliced rather than scaled, so the frame decides how much
   of the scene shows. At full width the frame matches the viewBox exactly
   and nothing is cut; the phone breakpoint narrows it onto the dashboard. */
.showcase--hero {
    aspect-ratio: 1440 / 500;
}

.showcase--hero .mock--hero {
    height: 100%;
}

/* Wide product art can't shrink to phone width and stay readable, so it
   keeps its size and the frame scrolls instead. */
.mock-hint {
    display: none;
    margin: 14px 0 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--ink-45);
}

/* The hero art is cropped at the bottom, so it fades out rather than
   stopping on a hard edge. */
.showcase--bleed img,
.showcase--mock .mock--hero {
    -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}

.frame {
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* ------------------------------------------------- product mocks (SVG) - */
/* Drawn rather than screenshotted, so the product art stays sharp at any
   size and can animate. Type below matches the interface, not the page.    */

/* Ink is set once on the root and inherited, so a single class on a text
   node (or on the group around it) is enough to recolour it. */
.mock {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--body);
    fill: var(--ink);
}

.mk-h {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-h--sm {
    font-size: 13px;
}

.mk-h--lg {
    font-size: 18px;
    font-weight: 800;
}

.mk-sub {
    font-size: 11.5px;
    fill: var(--ink-60);
}

.mk-lab {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    fill: var(--ink-45);
}

.mk-lab--dark {
    fill: rgba(255, 255, 255, .5);
}

.mk-meta {
    font-size: 10.5px;
    fill: var(--ink-45);
}

.mk-cell {
    font-size: 12px;
    fill: var(--ink-90);
}

.mk-id {
    font-size: 12.5px;
    font-weight: 600;
}

.mk-val {
    font-size: 13px;
    font-weight: 600;
}

.mk-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
}

.mk-pill {
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

.mk-btn {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
}

.mk-stat {
    font-family: var(--display);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.mk-stat--lg {
    font-size: 30px;
}

.mk-stat--sm {
    font-size: 19px;
}

.mk-axis {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    fill: var(--ink-45);
    text-anchor: middle;
}

.mk-brand {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    fill: #fff;
}

.mk-nav {
    font-size: 12.5px;
    fill: rgba(255, 255, 255, .55);
}

.mk-nav-on {
    font-weight: 600;
    fill: #fff;
}

.mk-credits {
    font-size: 13px;
    font-weight: 700;
    fill: #fff;
}

.mk-legend {
    font-size: 12px;
    fill: var(--ink-60);
}

.mk-legend-n {
    font-weight: 700;
    fill: var(--ink);
}

.mk-tip {
    font-size: 11px;
    font-weight: 700;
    fill: #fff;
    text-anchor: middle;
}

/* Resting states for anything the choreography moves. The mocks live inside
   [data-reveal], so nothing plays until the art is actually on screen.      */
.mk-type tspan,
.mk-late {
    fill-opacity: 0;
}

.mk-caret,
.mk-focus,
.mk-area {
    opacity: 0;
}

.mk-line {
    stroke-dasharray: 780;
}

.mk-spark {
    stroke-dasharray: 140;
}

.mk-prog {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(var(--p));
}

.mk-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.mk-cta {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.showcase.is-visible .mk-type tspan {
    animation: mkKey .18s linear both;
    animation-delay: calc(.7s + var(--i) * .075s);
}

.showcase.is-visible .mk-caret {
    animation:
        mkCaret .82s steps(11, end) .7s both,
        mkCaretBlink .9s .7s 7 both;
}

.showcase.is-visible .mk-focus {
    animation: mkFocus 2.6s ease-out .35s both;
}

.showcase.is-visible .mk-late {
    animation: mkRise .5s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: var(--d);
}

.showcase.is-visible .mk-track {
    animation: mkTrack .3s ease-out 2.1s both;
}

.showcase.is-visible .mk-knob {
    animation: mkKnob .32s cubic-bezier(.34, 1.4, .5, 1) 2.1s both;
}

.showcase.is-visible .mk-cta {
    animation: mkPop .55s cubic-bezier(.34, 1.3, .5, 1) 2.5s both;
}

.showcase.is-visible .mk-bar {
    animation: mkBar .85s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: calc(.35s + var(--i) * .07s);
}

.showcase.is-visible .mk-spark {
    animation: mkDraw140 1.1s ease-out both;
    animation-delay: calc(.45s + var(--i) * .12s);
}

.showcase.is-visible .mk-line {
    animation: mkDraw780 1.7s ease-out .35s both;
}

.showcase.is-visible .mk-area {
    animation: mkIn .7s ease-out 1.3s both;
}

.showcase.is-visible .mk-arc {
    animation: mkArc .9s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: calc(.6s + var(--i) * .22s);
}

.showcase.is-visible .mk-prog {
    animation: mkProg 1.1s cubic-bezier(.22, .8, .3, 1) .5s both;
}

/* Ambient loops: the parts of a live operation that never sit still. */
.showcase.is-visible .mk-float {
    animation: mkFloat 7s ease-in-out infinite;
}

.showcase.is-visible .mk-float--b {
    animation-duration: 8.5s;
    animation-delay: -3.2s;
}

.showcase.is-visible .mk-scan {
    animation: mkScan5 7.5s cubic-bezier(.5, 0, .3, 1) 1.4s infinite;
}

.showcase.is-visible .mk-scan--table {
    animation-name: mkScan3;
    animation-duration: 5.6s;
}

.showcase.is-visible .mk-roll {
    animation: mkRoll 8s cubic-bezier(.6, 0, .3, 1) 1.6s infinite;
}

.showcase.is-visible .mk-live {
    animation: mkBlink 1.8s ease-in-out infinite;
}

.showcase.is-visible .mk-trace {
    animation: mkTrace 9s ease-in-out 1.9s infinite alternate;
}

@keyframes mkKey {
    to {
        fill-opacity: 1;
    }
}

@keyframes mkCaret {
    from {
        opacity: 1;
        transform: translateX(-82.5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Ends hidden: once the field is filled the cursor has moved on. */
@keyframes mkCaretBlink {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes mkBlink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

@keyframes mkFocus {
    0% {
        opacity: 0;
    }

    8%,
    62% {
        opacity: 1;
    }

    74%,
    100% {
        opacity: 0;
    }
}

@keyframes mkRise {
    from {
        fill-opacity: 0;
        transform: translateY(5px);
    }

    to {
        fill-opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mkTrack {
    to {
        fill: #fbe202;
    }
}

@keyframes mkKnob {
    to {
        transform: translateX(16px);
    }
}

@keyframes mkPop {
    0%,
    100% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.035);
    }
}

@keyframes mkBar {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes mkDraw140 {
    from {
        stroke-dashoffset: 140;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mkDraw780 {
    from {
        stroke-dashoffset: 780;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mkIn {
    to {
        opacity: 1;
    }
}

@keyframes mkArc {
    from {
        stroke-dasharray: 0 352;
    }

    to {
        stroke-dasharray: var(--l) 352;
    }
}

@keyframes mkProg {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(var(--p));
    }
}

@keyframes mkFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes mkScan5 {
    0%,
    14% {
        transform: translateY(0);
    }

    18%,
    32% {
        transform: translateY(52px);
    }

    36%,
    50% {
        transform: translateY(104px);
    }

    54%,
    68% {
        transform: translateY(156px);
    }

    72%,
    86% {
        transform: translateY(208px);
    }

    92%,
    100% {
        transform: translateY(0);
    }
}

@keyframes mkScan3 {
    0%,
    24% {
        transform: translateY(0);
    }

    30%,
    54% {
        transform: translateY(46px);
    }

    60%,
    84% {
        transform: translateY(92px);
    }

    92%,
    100% {
        transform: translateY(0);
    }
}

@keyframes mkRoll {
    0%,
    20% {
        transform: translateY(0);
    }

    25%,
    45% {
        transform: translateY(-40px);
    }

    50%,
    70% {
        transform: translateY(-80px);
    }

    75%,
    100% {
        transform: translateY(-120px);
    }
}

/* Tracks the plotted line point for point. */
@keyframes mkTrace {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(66px, -20px);
    }

    20% {
        transform: translate(132px, -8px);
    }

    30% {
        transform: translate(198px, -44px);
    }

    40% {
        transform: translate(264px, -32px);
    }

    50% {
        transform: translate(330px, -70px);
    }

    60% {
        transform: translate(396px, -58px);
    }

    70% {
        transform: translate(462px, -94px);
    }

    80% {
        transform: translate(528px, -82px);
    }

    90% {
        transform: translate(594px, -116px);
    }

    100% {
        transform: translate(660px, -106px);
    }
}

/* Capability strip */
.capabilities {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: 28px;
    background: var(--paper);
}

.capabilities__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-45);
    text-align: center;
    margin-bottom: 18px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-60);
}

.chip svg {
    color: var(--ink);
    flex: none;
}

/* Client logo wall */
/* The marks range from square to 3:1 banners, so a shared box height would
   hand the wide ones three times the visual weight. Each logo sets its own
   --logo-h to even them out optically. */
.logo-wall {
    background: var(--mist);
    padding-block: clamp(40px, 5vw, 60px);
}

.logo-wall__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-45);
    text-align: center;
    margin-bottom: 32px;
}

.logo-wall__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 28px 32px;
}

.logo-wall__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}

.logo-wall__item img {
    width: auto;
    height: var(--logo-h, 44px);
    max-width: 100%;
    object-fit: contain;
}

.logo--dropbox {
    --logo-h: 66px;
}

.logo--bshipd {
    --logo-h: 56px;
}

.logo--fv {
    --logo-h: 54px;
}

.logo--paxlynx {
    --logo-h: 40px;
}

.logo--reques {
    --logo-h: 38px;
}

.logo--top {
    --logo-h: 36px;
}

/* ---------------------------------------------------------------- cards - */

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

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

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

.card {
    padding: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

.card h3 {
    font-size: 1.3125rem;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.card p {
    color: var(--ink-60);
    font-size: .9688rem;
}

.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: var(--yellow-soft);
    color: var(--ink);
    border: 1px solid rgba(251, 226, 2, .55);
}

/* ------------------------------------------------- split feature section - */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

.checklist {
    display: grid;
    gap: 14px;
    margin-top: 34px;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    color: var(--ink-90);
    font-size: 1rem;
}

.checklist svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    padding: 4px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.mini {
    padding: 26px 24px;
    border-radius: 18px;
    background: var(--mist);
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}

.mini:hover {
    background: #fff;
    border-color: var(--line);
}

.mini svg {
    color: var(--ink);
    margin-bottom: 16px;
}

.mini h4 {
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.mini p {
    font-size: .9063rem;
    color: var(--ink-60);
}

/* ----------------------------------------- signature: the shipment rail - */
/* Onboarding is a real sequence, so it is drawn as a tracked route.        */

.rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 68px;
}

.rail::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 16.6%;
    right: 16.6%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--line-strong) 0 8px, transparent 8px 16px);
}

.stop {
    position: relative;
    padding-top: 78px;
    text-align: center;
}

.stop__node {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line-strong);
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--ink-45);
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

.stop--live .stop__node {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--ink);
    box-shadow: 0 0 0 8px rgba(251, 226, 2, .22);
}

.stop__status {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--mist);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-60);
}

.stop--live .stop__status {
    background: var(--yellow-soft);
    color: var(--ink);
}

.stop h3 {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.stop p {
    color: var(--ink-60);
    font-size: .9375rem;
    max-width: 34ch;
    margin-inline: auto;
}

/* ------------------------------------------------------------- cta band - */

.cta-band {
    background: linear-gradient(180deg, var(--sky), #f3f5ff 70%, #fff);
    padding-top: var(--section);
    overflow: hidden;
}

/* The dashboard rises out of the band and is cut off by the next section. */
.cta-band .showcase {
    margin-top: clamp(44px, 5vw, 68px);
}

.cta-band .frame {
    border-bottom: none;
    border-radius: 20px 20px 0 0;
}

/* ------------------------------------------------------------- pricing - */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    padding: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.plan--featured {
    border-color: var(--ink);
    box-shadow: var(--shadow-md);
}

.plan__tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-45);
}

.plan__badge {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    letter-spacing: .08em;
}

.plan h3 {
    font-size: 1.625rem;
    margin: 14px 0 10px;
}

.plan__desc {
    color: var(--ink-60);
    font-size: .9375rem;
    min-height: 48px;
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 26px 0 6px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.035em;
    font-size: 2.75rem;
    line-height: 1;
}

.plan__unit {
    font-family: var(--body);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-45);
}

.plan__meta {
    font-size: .8125rem;
    color: var(--ink-45);
    margin-bottom: 26px;
}

.plan .btn {
    width: 100%;
    margin-top: auto;
}

.pricing-note {
    margin-top: 28px;
    text-align: center;
    font-size: .875rem;
    color: var(--ink-45);
}

/* ---------------------------------------------------------- calculator - */

/* Two panels: the slider on the left, the running total on the right. The
   total is the loud half; it is what people came to the page for. */
.calc {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 0;
    margin-top: 48px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.calc__panel {
    padding: clamp(28px, 4vw, 48px);
}

.calc__panel--out {
    background: var(--ink);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.calc__label {
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-45);
}

.calc__panel--out .calc__label {
    color: rgba(255, 255, 255, .55);
}

.calc__count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0 30px;
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.035em;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
}

.calc__count small {
    font-family: var(--body);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-45);
}

/* Range input, styled the same in both engines. */
.calc__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;
    background: transparent;
    cursor: grab;
}

.calc__range:active {
    cursor: grabbing;
}

.calc__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--yellow) 0 var(--fill, 0%), var(--sky) var(--fill, 0%) 100%);
}

.calc__range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--yellow) 0 var(--fill, 0%), var(--sky) var(--fill, 0%) 100%);
}

.calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--ink);
    border: 4px solid var(--yellow);
    box-shadow: var(--shadow-sm);
}

.calc__range::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ink);
    border: 4px solid var(--yellow);
    box-shadow: var(--shadow-sm);
}

.calc__range:focus-visible {
    outline: none;
}

.calc__range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(18, 25, 58, .18);
}

.calc__range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(18, 25, 58, .18);
}

.calc__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--ink-45);
}

.calc__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.calc__preset {
    padding: 8px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    font-family: var(--display);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.calc__preset:hover {
    border-color: var(--ink);
}

.calc__preset.is-active {
    background: var(--yellow-soft);
    border-color: var(--yellow-deep);
}

.calc__hint {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--ink-60);
}

.calc__plan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 12px 0 24px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--display);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.calc__total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-size: clamp(3rem, 6vw, 4.25rem);
    line-height: 1;
}

.calc__total small {
    font-family: var(--body);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .6);
}

.calc__lines {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
}

.calc__lines li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .72);
}

.calc__lines li span:last-child {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.calc__lines li.calc__lines--first {
    color: #fff;
    font-weight: 600;
}

.calc__out-note {
    margin-top: 20px;
    font-size: .8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

.calc__cta {
    margin-top: 28px;
}

.calc__cta .btn {
    width: 100%;
}

@media (max-width: 900px) {
    .calc {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------- contact - */

.contact-card {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding: clamp(36px, 5vw, 64px);
    border-radius: 28px;
    background: var(--ink);
    color: #fff;
    background-image: radial-gradient(circle at 88% 12%, rgba(251, 226, 2, .16), transparent 46%);
}

.contact-card h2 {
    color: #fff;
}

.contact-card .eyebrow {
    color: rgba(255, 255, 255, .6);
}

.contact-card p {
    color: rgba(255, 255, 255, .74);
}

.contact-card .lead {
    color: rgba(255, 255, 255, .74);
}

.contact-list {
    display: grid;
    gap: 12px;
}

.contact-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .9375rem;
    transition: background-color .18s ease, border-color .18s ease;
}

.contact-list a > span {
    display: grid;
    gap: 2px;
}

.contact-list a:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .28);
}

.contact-list svg {
    flex: none;
    color: var(--yellow);
}

.contact-list small {
    display: block;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}

/* -------------------------------------------------------------- footer - */

.site-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .68);
    padding-top: clamp(56px, 6vw, 88px);
    font-size: .9375rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 56px;
}

.site-footer img {
    height: 40px;
    width: auto;
    margin-bottom: 20px;
}

.site-footer h4 {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}

.site-footer li + li {
    margin-top: 11px;
}

.site-footer a:hover {
    color: #fff;
}

.footer-blurb {
    max-width: 34ch;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-block: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .875rem;
    color: rgba(255, 255, 255, .5);
}

.footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* --------------------------------------------------------------- modal - */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    /* The scrim carries the separation on its own now, so it sits a little
       deeper than it did behind a blur. */
    background: rgba(18, 25, 58, .66);
}

.modal.is-open {
    display: flex;
}

.modal__panel {
    width: 100%;
    max-width: 560px;
    margin-block: auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 28px 20px;
    border-bottom: 1px solid var(--line);
}

.modal__head h3 {
    font-size: 1.375rem;
    margin-bottom: 8px;
}

.modal__head p {
    font-size: .9063rem;
    color: var(--ink-60);
}

.modal__close {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-60);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.modal__close:hover {
    background: var(--mist);
    color: var(--ink);
}

.modal__body {
    padding: 24px 28px;
    display: grid;
    gap: 18px;
}

.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px 28px;
}

.field label,
.fieldset > legend {
    display: block;
    margin-bottom: 7px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
}

.field input,
.field select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    background: #fff;
    font-family: var(--body);
    font-size: .9375rem;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7490' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(18, 25, 58, .1);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.radio-row {
    display: grid;
    gap: 10px;
}

.radio {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    font-size: .9063rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.radio:hover {
    border-color: var(--ink-45);
}

.radio input {
    accent-color: var(--ink);
    width: 18px;
    height: 18px;
    margin: 0;
}

/* --------------------------------------------------------------- motion - */

/* Scoped to .js so the page is fully visible if the script never runs. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.22, .8, .3, 1), transform .6s cubic-bezier(.22, .8, .3, 1);
}

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

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

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

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    /* The mocks are choreographed on a delay, so zeroing duration alone
       would still stagger them in. Land every part on its end state. */
    .mock,
    .mock * {
        animation-delay: 0s !important;
    }
}

/* ----------------------------------------------------------- photography - */
/* Every photo slot ships as a labelled placeholder holding the Midjourney
   prompt that should produce it. Drop the generated file at the path shown
   on the card and the picture takes over the moment it loads. The
   placeholder hides itself, so no markup has to change.                    */

.shots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

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

/* Empty slots run to whatever their prompt needs, so let them absorb the
   difference and keep the captions on one line across the row. */
.shot .photo:not(.is-ready) {
    flex: 1;
}

.shot h3 {
    font-size: 1.1875rem;
    letter-spacing: -0.02em;
    margin: 22px 0 8px;
}

.shot p {
    color: var(--ink-60);
    font-size: .9375rem;
}

.photo {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--mist);
}

/* The crop belongs to the picture, not the scaffolding; an empty slot
   grows to whatever its prompt needs, then snaps to ratio once filled. */
.photo.is-ready {
    aspect-ratio: 4 / 3;
}

.photo--wide {
    border-radius: 24px;
}

.photo--wide.is-ready {
    aspect-ratio: 3 / 1;
    box-shadow: var(--shadow-md);
}

.photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .45s ease;
}

.photo.is-ready img {
    opacity: 1;
}

.photo.is-ready .photo__ph {
    display: none;
}

/* The placeholder itself, hatched so it reads as scaffolding at a glance. */
.photo__ph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 240px;
    padding: clamp(16px, 2vw, 26px);
    border: 1px dashed var(--line-strong);
    border-radius: inherit;
    background:
        repeating-linear-gradient(135deg, rgba(18, 25, 58, .03) 0 10px, transparent 10px 20px),
        var(--mist);
    text-align: left;
}

.photo__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-size: .6563rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.photo__file,
.photo__prompt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    margin: 0;
}

.photo__file {
    color: var(--ink);
    font-weight: 600;
    word-break: break-all;
}

.photo__prompt {
    flex: 1;
    line-height: 1.6;
    color: var(--ink-60);
}

.photo__copy {
    align-self: flex-start;
    background: #fff;
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1024px) {
    .grid--3,
    .shots,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .logo-wall__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    :root {
        --header-h: 68px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav {
        position: absolute;
        top: calc(var(--header-h) + 8px);
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: var(--shadow-md);
        display: none;
    }

    .nav.is-open {
        display: flex;
    }

    .nav a {
        padding: 13px 16px;
        font-size: 1rem;
        color: var(--ink);
    }

    .nav__extra {
        display: block;
        margin-top: 6px;
        border-top: 1px solid var(--line);
        border-radius: 0;
        padding-top: 16px;
        font-weight: 600;
    }

    .brand img {
        height: 28px;
    }

    .header-actions {
        margin-left: auto;
    }

    .header-actions .btn--ghost {
        display: none;
    }

    .rail {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 48px;
        padding-left: 74px;
        text-align: left;
    }

    .rail::before {
        top: 20px;
        bottom: 40px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 16px);
    }

    .stop {
        padding-top: 0;
        padding-bottom: 30px;
        text-align: left;
    }

    .stop__node {
        left: -74px;
        transform: none;
        width: 54px;
        height: 54px;
    }

    .stop p {
        margin-inline: 0;
        max-width: none;
    }

    .contact-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .grid--3,
    .grid--2,
    .pricing-grid,
    .mini-grid,
    .shots,
    .field-row {
        grid-template-columns: 1fr;
    }

    /* A 3:1 crop is a slot on a phone, so square it up so the subject
       survives. */
    .photo--wide.is-ready {
        aspect-ratio: 4 / 3;
    }

    .card,
    .plan {
        padding: 28px 24px;
    }

    .logo-wall__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .logo-wall__item {
        min-height: 56px;
    }

    .logo-wall__item img {
        height: calc(var(--logo-h, 44px) * .85);
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero__inner {
        text-align: left;
    }

    .hero .lead {
        margin-inline: 0;
    }

    .hero .btn-row {
        justify-content: flex-start;
    }

    .btn-row .btn {
        flex: 1 1 auto;
    }

    .section-head--center {
        text-align: left;
    }

    /* Close the hero crop in on the dashboard panel. Full width the mock is
       1440 units across; here the frame shows the middle ~700, so the
       interface is drawn at roughly twice the size for half the scene. */
    .showcase--hero {
        aspect-ratio: 7 / 5;
    }

    /* The board mock is 1400 units wide; squeezed into 330 nothing in it can
       be read, so it holds its size and the frame scrolls sideways. */
    .cta-band .frame {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cta-band .frame .mock--board {
        width: 860px;
        max-width: none;
    }

    .mock-hint {
        display: block;
    }

    /* Footer links sit on 18px of text; pad them out to a thumb-sized
       target without moving them apart visually. */
    .site-footer li a {
        display: inline-block;
        padding-block: 8px;
    }

    .site-footer li + li {
        margin-top: 0;
    }

    .footer-bottom ul {
        gap: 8px 24px;
    }

    .modal {
        padding: 12px;
    }

    .modal__head,
    .modal__body,
    .modal__foot {
        padding-inline: 20px;
    }

    /* iOS zooms the whole page when a focused field is under 16px. */
    .field input,
    .field select {
        font-size: 1rem;
    }

    /* The form runs past the fold on a phone, so submit stays in reach
       instead of hiding at the bottom of the scroll. */
    .modal__foot {
        position: sticky;
        bottom: 0;
        padding-block: 16px;
        background: #fff;
        border-top: 1px solid var(--line);
    }

    .modal__foot .btn {
        flex: 1;
    }
}