/* ==========================================================================================================
   Pushback - site styles
   Magenta-led, paper-calm, road-line accents. Space Grotesk (display) · Inter (UI) · Space Mono (tickets, dates)
   ========================================================================================================== */
:root {
  --magenta: #D6247A;
  --magenta-600: #BC1C6A;
  --magenta-700: #9C1657;      /* magenta text on paper (AA) */
  --magenta-50: #FBE9F1;
  --magenta-100: #F6D2E3;
  --ink: #16141A;
  --ink-2: #24212A;
  --ink-3: #34303B;
  --paper: #F7F5F0;
  --paper-2: #EFEBE2;
  --paper-3: #E6E1D5;
  --white: #FFFFFF;
  --signal: #F7F7F2;
  --slate: #5B6470;
  --slate-2: #7A828D;
  --yellow: #FFD23F;
  --yellow-soft: #FFE58A;
  --coral: #FF6B4A;
  --green: #127A4A;
  --line: rgba(22, 20, 26, .12);
  --line-2: rgba(22, 20, 26, .2);
  --shadow-1: 0 1px 2px rgba(22, 20, 26, .06), 0 8px 24px -12px rgba(22, 20, 26, .18);
  --shadow-2: 0 2px 4px rgba(22, 20, 26, .06), 0 24px 60px -24px rgba(22, 20, 26, .35);
  --radius: 14px;
  --radius-lg: 22px;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* The highlighter's rough ends: one marker pass, chiselled and slightly ragged at both ends. Offsets are in em so
     the ends look the same on a 13px eyebrow and a 98px headline. */
  --hl-ends: polygon(.22em 8%, 30% 3%, 70% 1%, calc(100% - .3em) 0, calc(100% - .08em) 16%, 100% 34%,
    calc(100% - .18em) 52%, calc(100% - .04em) 71%, calc(100% - .22em) 88%, calc(100% - .1em) 100%, 65% 98%,
    .3em 96%, .06em 82%, .2em 63%, 0 45%, .14em 27%, .02em 12%);
  /* skewY(-2deg) about the centre of the pass (the origin stays left so the draw-on grows left to right) */
  --hl-tilt: translateX(50%) skewY(-2deg) translateX(-50%);
  --hl-fill: linear-gradient(transparent 0 15%, rgba(255, 255, 255, .24) 15% 20%, transparent 20% 77%, rgba(196, 140, 0, .16) 77% 83%, transparent 83%), var(--yellow);
  /* sitekit theming: buttons are pills (white on magenta, magenta on paper); cards and inputs keep their own radii below */
  --sk-bg: var(--white); --sk-surface: var(--white); --sk-text: var(--ink); --sk-muted: var(--slate);
  --sk-line: var(--line); --sk-accent: var(--magenta); --sk-accent-ink: #fff; --sk-radius: 999px;
  --sk-font-display: var(--font-display);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font-ui); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: var(--magenta-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--magenta); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin: 0 0 .5em; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 92px); letter-spacing: -.04em; line-height: .98; }
h2 { font-size: clamp(30px, 4.2vw, 56px); letter-spacing: -.035em; }
h3 { font-size: clamp(20px, 2vw, 25px); letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0 0 1em; text-wrap: pretty; }
small { font-size: .85em; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.on-paper :focus-visible, .site-header :focus-visible { outline-color: var(--magenta); }
::selection { background: var(--yellow); color: var(--ink); }
.skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; top: 16px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 40px); margin-inline: auto; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--slate); }
.center { text-align: center; }

/* ---------- eyebrows, pills, labels ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-700); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 22px; height: 6px; background: linear-gradient(var(--yellow) 0 2px, transparent 2px 4px, var(--yellow) 4px 6px); }
.eyebrow.on-dark { color: var(--yellow); }
.eyebrow.plain::before { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--font-ui); padding: 7px 11px; border-radius: 99px; background: var(--paper-2); color: var(--ink); white-space: nowrap; }
.tag { font: 700 11px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; display: inline-block; }
.s-strong { background: var(--magenta); color: #fff; }
.s-possible { background: var(--ink); color: var(--yellow); }
.s-mitigation { background: var(--paper-3); color: var(--ink); }
.s-none, .s-unsupported { background: var(--paper-3); color: var(--slate); }

/* ---------- the highlighter swipe: Pushback's one emphasis device ----------
   A flat #FFD23F marker pass behind ink text, drawn slightly uphill (skewY -2deg) with rough ends (--hl-ends).
   Used for the hero eyebrow and headline, the pricing headline, the home "not worth it." H2, the CTA band and the
   "Most popular" flags. The right padding is wider than the left so a closing full stop clears the ragged end. */
.swipe, .hero h1 em, .hero-eyebrow, .price-card .flag, .flag-s { position: relative; isolation: isolate; color: var(--ink); }
.swipe { display: inline-block; padding: 0 .24em 0 .16em; margin: 0 -.04em; }
.swipe::before, .hero h1 em::before, .hero-eyebrow::before, .price-card .flag::before, .flag-s::before {
  content: ""; position: absolute; inset: .02em -.02em -.03em; z-index: -1; background: var(--hl-fill);
  clip-path: var(--hl-ends); transform-origin: 0 50%; transform: var(--hl-tilt) scaleX(1);
  animation: hl-swipe .7s cubic-bezier(.55, .1, .3, 1) .2s both; }
/* drawn left to right, like a marker */
@keyframes hl-swipe { from { transform: var(--hl-tilt) scaleX(0); } }
.reveal .swipe::before, .reveal .flag::before { animation-play-state: paused; }
.reveal.is-in .swipe::before, .reveal.is-in .flag::before { animation-play-state: running; }
.no-js .swipe::before, .no-js .hero h1 em::before, .no-js .hero-eyebrow::before, .no-js .flag::before, .no-js .flag-s::before { animation: none; }

/* ---------- double yellow lines ---------- */
.dyl { height: 10px; background: linear-gradient(var(--yellow) 0 3px, transparent 3px 7px, var(--yellow) 7px 10px); }
.dyl.thin { height: 7px; background: linear-gradient(var(--yellow) 0 2px, transparent 2px 5px, var(--yellow) 5px 7px); }
.dyl-v { width: 10px; background: linear-gradient(90deg, var(--yellow) 0 3px, transparent 3px 7px, var(--yellow) 7px 10px); }

/* ---------- buttons ---------- */
.btn { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent; background: var(--bg); color: var(--fg); font: 700 16px/1.1 var(--font-ui); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease-out), background-color .2s, box-shadow .25s, color .2s, border-color .2s; position: relative; white-space: nowrap; }
.btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(22, 20, 26, .45); }
.btn:active { transform: translateY(0) scale(.98); }
svg.i { width: 18px; height: 18px; flex: none; }
.secure svg.i { width: 15px; height: 15px; }
.lock-card svg.i { width: 26px; height: 26px; color: var(--magenta); }
.btn .chev { width: 18px; height: 18px; transition: transform .3s var(--ease-out); flex: none; }
.btn:hover .chev { transform: translateX(3px); }
.btn-primary { --bg: var(--magenta); --fg: #fff; }
.btn-primary:hover { --bg: var(--magenta-600); }
.btn-white { --bg: #fff; --fg: var(--ink); }
.btn-white:hover { --bg: var(--yellow); }
.btn-ink { --bg: var(--ink); --fg: #fff; }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { --bg: var(--white); border-color: var(--ink); box-shadow: none; }
.btn-ghost-light { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost-light:hover { --bg: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: none; }
.btn-sm { min-height: 40px; padding: 9px 16px; font-size: 14.5px; }
.btn-block { width: 100%; white-space: normal; text-align: center; }
.btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--magenta-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 13px; border-radius: 99px; transition: background-color .2s; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { background: var(--paper-2); color: var(--ink); }
.nav .nav-cta { margin-left: 8px; color: #fff; }
.nav .nav-cta:hover { color: #fff; }
/* phone menu button: a mini Penalty Charge Notice (BRAND.md §5). Signal-white ticket with an ink outline, a yellow
   header and a barcode, plus a magenta tear-off stub carrying the logo's yellow road-marking chevron on a perforated
   edge. It sits at the highlighter's -2deg tilt. Open: the stub tears loose along the perforation and the chevron
   turns into a white cross. Only the visuals live here; site.js still just toggles body.nav-open / aria-expanded. */
.nav-toggle { display: none; position: relative; flex: none; width: 112px; height: 46px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; transform: rotate(-2deg); transition: transform .3s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.nav-toggle .tkt { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 4px 4px rgba(22, 20, 26, .18)); }
.tkt-fill { fill: var(--signal); transition: fill .2s; }
.tkt-head { fill: var(--yellow); }
.tkt-bars { fill: none; stroke: var(--ink); stroke-width: 3; opacity: .6; }
.tkt-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.tkt-perf { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 3; }
.tkt-stub { transform-box: view-box; transform-origin: 38px 45px; transition: transform .35s var(--ease-out); }
.tkt-stub-fill { fill: var(--magenta); transition: fill .2s; }
.tkt-chev, .tkt-x { fill: none; transform-box: fill-box; transform-origin: center; transition: opacity .2s, transform .35s var(--ease-out); }
.tkt-chev { stroke: var(--yellow); stroke-width: 4.5; stroke-linejoin: miter; stroke-miterlimit: 4; }
.tkt-x { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; opacity: 0; transform: rotate(-90deg) scale(.6); }
.nav-toggle .lbl { position: absolute; left: 38px; right: 1px; top: 17px; text-align: center; font: 700 12.5px/1 var(--font-mono); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; }
@media (hover: hover) {
  .nav-toggle:hover { transform: rotate(0deg) translateY(-1px); }
  .nav-toggle:hover .tkt-fill { fill: var(--white); }
  .nav-toggle:hover .tkt-stub-fill { fill: var(--magenta-600); }
}
.site-header .nav-toggle:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; border-radius: 8px; }
.nav-open .nav-toggle { transform: rotate(0deg); }
.nav-open .nav-toggle .tkt-stub { transform: translate(-3px, 1px) rotate(-9deg); }
.nav-open .nav-toggle .tkt-stub-fill { fill: var(--magenta-600); }
.nav-open .nav-toggle .tkt-chev { opacity: 0; transform: rotate(90deg) scale(.6); }
.nav-open .nav-toggle .tkt-x { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav-toggle, .tkt-stub, .tkt-chev, .tkt-x { transition: none; } }
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 20px 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s; }
  .nav-open .nav { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .3s var(--ease-out); }
  .nav a { font-size: 18px; padding: 14px 12px; }
  .nav .nav-cta { margin: 10px 0 0; min-height: 52px; font-size: 17px; }
}

/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section-tight { padding: clamp(48px, 7vw, 88px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head p { font-size: clamp(17px, 1.5vw, 20px); color: var(--slate); }
.section-head.center { margin-inline: auto; }
.bg-ink { background: var(--ink); color: var(--signal); }
.bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink .muted, .bg-ink .section-head p { color: #B9B4BF; }
.bg-ink a { color: var(--yellow); }
.bg-magenta { background: var(--magenta); color: #fff; }
.bg-white { background: var(--white); }
.bg-paper-2 { background: var(--paper-2); }

/* ---------- hero ---------- */
.hero { background: var(--magenta); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(1200px 600px at 85% 10%, rgba(255, 255, 255, .14), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(22, 20, 26, .28), transparent 60%); }
.hero-grain { position: absolute; inset: 0; z-index: -1; opacity: .18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>"); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: min(860px, calc(100svh - 72px)); padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 8vw, 110px); }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero h1 .kicker { display: block; font-size: clamp(26px, 3vw, 44px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; margin-bottom: .18em; color: rgba(255, 255, 255, .92); }
.hero h1 .big { display: block; font-size: clamp(46px, 6.3vw, 98px); line-height: .96; text-wrap: wrap; }   /* greedy: "Let's write a" / the marked "better one." */
.hero h1 em { font-style: normal; display: inline-block; padding: 0 .2em .02em .14em; margin-left: -.06em; }
.hero h1 em::before { animation-delay: .55s; }
.hero-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 34em; color: rgba(255, 255, 255, .94); margin-bottom: 32px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .9); }
.hero-meta li { display: flex; align-items: center; gap: 8px; }
/* Our one list marker: the road-marking diamond (hero meta, price-card lists, the pricing comparison, the social kit).
   Yellow on magenta and ink; magenta on paper and white, where yellow would be too faint to see. Always decorative
   (aria-hidden or a ::before) - the words say what is included. Never a tick: ticks are Lettick's, not ours. */
.hero-meta li::before, .price-card li::before, .diamond { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--yellow); transform: rotate(45deg); }
/* hero eyebrow: one highlighter pass behind a Space Mono label, like a line marked up on the ticket */
.hero-eyebrow { display: table; margin: 0 0 30px; padding: 10px 16px 9px 14px; font: 700 13px/1.25 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.hero-eyebrow .lc { text-transform: none; }
.hero-eyebrow .sep { font-weight: 400; margin: 0 .55em; }
@media (max-width: 560px) {
  /* too long for one line on a phone: two stacked passes instead of one fat block */
  .hero-eyebrow { padding: 0; font-size: 12px; letter-spacing: .03em; }
  .hero-eyebrow::before { visibility: hidden; }   /* not display:none: toggling display would restart its draw-on */
  .hero-eyebrow .sep { display: none; }
  .hero-eyebrow .ln { display: table; position: relative; isolation: isolate; padding: 7px 12px 6px 10px; }
  .hero-eyebrow .ln + .ln { margin-top: 7px; }
  .hero-eyebrow .ln::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hl-fill); clip-path: var(--hl-ends);
    transform-origin: 0 50%; transform: var(--hl-tilt) scaleX(1); animation: hl-swipe .6s cubic-bezier(.55, .1, .3, 1) .2s both; }
  .hero-eyebrow .ln + .ln { --hl-tilt: translateX(50%) skewY(-1.2deg) translateX(-50%); }
  .hero-eyebrow .ln + .ln::before { animation-delay: .45s; }
  .no-js .hero-eyebrow .ln::before { animation: none; }
}
.hero .dyl { position: absolute; left: 0; right: 0; bottom: 34px; }

/* hero stage (windscreen scene) */
.stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; justify-self: end; }
.stage svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.stage svg.scene-front { z-index: 2; }
.stage .plane { z-index: 3; }
.stage .callout, .stage .letter-card { z-index: 4; }
.stage .ticket { z-index: 1; position: absolute; left: 32%; top: 25%; width: 36%; aspect-ratio: 3 / 4; background: var(--signal); color: var(--ink); border-radius: 6px; box-shadow: 0 30px 50px -20px rgba(22, 20, 26, .55), 0 4px 10px rgba(22, 20, 26, .2); transform-origin: 50% 0%; padding: 7% 7% 6%; display: flex; flex-direction: column; gap: 5%; will-change: transform; }
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; background: radial-gradient(circle at 5px 5px, transparent 0 3px, var(--signal) 3.5px) 0 0 / 12px 10px repeat-x; }
.ticket-head { background: var(--yellow); margin: -16% -16% 0; padding: 9% 16% 6%; border-radius: 6px 6px 0 0; font: 700 clamp(8px, 1.1vw, 13px)/1.15 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ticket-head small { display: block; font-weight: 400; font-size: .78em; letter-spacing: .04em; margin-top: 3px; opacity: .8; }
.ticket-row { display: flex; justify-content: space-between; gap: 8px; font: 400 clamp(7px, .92vw, 11.5px)/1.25 var(--font-mono); border-bottom: 1px dashed rgba(22, 20, 26, .22); padding-bottom: 4%; position: relative; }
.ticket-row b { font-weight: 700; }
.ticket-row.key { z-index: 1; }
.ticket-hl { position: absolute; left: -4%; right: -4%; top: -14%; bottom: 0; background: var(--yellow); opacity: .85; z-index: -1; transform-origin: 0 50%; transform: scaleX(0); clip-path: var(--hl-ends); mix-blend-mode: multiply; }
.ticket-amount { font: 700 clamp(18px, 2.6vw, 32px)/1 var(--font-display); letter-spacing: -.03em; margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; }
.ticket-amount small { font: 400 clamp(7px, .85vw, 10px)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.ticket-bars { height: 9%; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); opacity: .85; }
.callout { position: absolute; left: 0; top: 65%; max-width: 50%; background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 16px 14px; box-shadow: 0 24px 48px -18px rgba(22, 20, 26, .6); font-size: clamp(12px, 1.25vw, 15px); line-height: 1.35; opacity: 0; transform: translateY(10px); }
.callout .mono { font-family: var(--font-display); font-weight: 700; display: block; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.callout strong { font-family: var(--font-display); font-size: 1.18em; letter-spacing: -.01em; }
.callout::after { content: ""; position: absolute; right: 14%; top: -8px; width: 16px; height: 16px; background: var(--ink); transform: rotate(45deg); border-radius: 3px; }
.plane { position: absolute; left: 36%; top: 34%; width: 30%; opacity: 0; will-change: transform; }
.letter-card { position: absolute; right: 2%; top: 8%; width: 46%; background: var(--white); color: var(--ink); border-radius: 12px; padding: 16px 16px 18px; box-shadow: 0 30px 60px -20px rgba(22, 20, 26, .55); opacity: 0; transform: translateY(16px) rotate(2deg); }
.letter-card .mono { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-700); }
.letter-card h4 { font-size: clamp(14px, 1.5vw, 18px); margin: 6px 0 10px; letter-spacing: -.01em; }
.letter-card .lines { display: grid; gap: 6px; }
.letter-card .lines i { display: block; height: 6px; border-radius: 4px; background: var(--paper-3); }
.letter-card .lines i:nth-child(2) { width: 88%; } .letter-card .lines i:nth-child(3) { width: 94%; } .letter-card .lines i:nth-child(4) { width: 70%; }
.letter-card .sent { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; background: var(--magenta); color: #fff; padding: 7px 10px; border-radius: 99px; }
.stage-caption { position: absolute; left: 0; right: 0; top: calc(100% + 10px); text-align: center; font: 500 12px/1.3 var(--font-display); letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.stage.is-static .ticket { transform: rotate(-4deg); }
.stage.is-static .ticket-hl { transform: scaleX(1); }
.stage.is-static .callout { opacity: 1; transform: none; }

@media (max-width: 520px) { .callout { left: 0; max-width: 62%; } }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; padding-bottom: 110px; }
  .stage { justify-self: center; max-width: 440px; margin-top: 8px; }
}

/* ---------- stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); }
.stat { border-top: 2px solid var(--ink); padding-top: 22px; }
.stat .num { font: 700 clamp(56px, 8vw, 112px)/.9 var(--font-display); letter-spacing: -.05em; color: var(--magenta); display: block; margin-bottom: 14px; }
.stat p { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; max-width: 30em; margin-bottom: 10px; }
.stat cite { font: 500 12.5px/1.4 var(--font-display); color: var(--slate); font-style: normal; letter-spacing: .02em; }
.stat cite a { color: inherit; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step { background: var(--white); border-radius: var(--radius-lg); padding: 30px 28px 32px; position: relative; box-shadow: var(--shadow-1); transition: transform .35s var(--ease-out), box-shadow .35s; overflow: hidden; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.step .n { font: 700 13px/1 var(--font-display); letter-spacing: .1em; color: var(--magenta-700); }
.step h3 { margin: 18px 0 10px; }
.step p { color: var(--slate); margin: 0; font-size: 16px; }
.step-art { height: 150px; margin: -6px -8px 10px; border-radius: 14px; background: var(--paper); position: relative; overflow: hidden; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* step illustrations (pure CSS) */
.mini-ticket { position: absolute; left: 50%; top: 50%; width: 92px; height: 120px; margin: -60px 0 0 -46px; background: var(--signal); border-radius: 5px; box-shadow: var(--shadow-1); transform: rotate(-7deg); padding: 10px; }
.mini-ticket::before { content: ""; display: block; height: 18px; background: var(--yellow); margin: -10px -10px 10px; border-radius: 5px 5px 0 0; }
.mini-ticket i { display: block; height: 5px; border-radius: 3px; background: var(--paper-3); margin-bottom: 7px; }
.mini-ticket i:nth-child(2) { width: 70%; }
.mini-q { position: absolute; right: 18%; top: 22%; background: var(--ink); color: #fff; font: 700 12px/1 var(--font-display); padding: 8px 10px; border-radius: 10px; }
.mini-checks { position: absolute; inset: 18px 22px; display: grid; gap: 9px; align-content: center; }
.mini-checks div { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 9px; padding: 9px 11px; font: 600 12.5px/1.2 var(--font-ui); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mini-checks span { font: 700 9.5px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; margin-left: auto; }
.mini-letter { position: absolute; left: 50%; top: 50%; width: 124px; height: 122px; margin: -61px 0 0 -62px; background: var(--white); border-radius: 8px; box-shadow: var(--shadow-1); padding: 14px; transform: rotate(4deg); }
.mini-letter i { display: block; height: 5px; border-radius: 3px; background: var(--paper-3); margin-bottom: 7px; }
.mini-letter i:first-child { width: 50%; background: var(--magenta-100); }
.mini-letter i:nth-child(4) { width: 76%; }
.mini-clock { position: absolute; right: 12%; bottom: 14%; background: var(--magenta); color: #fff; font: 700 11px/1 var(--font-mono); padding: 8px 10px; border-radius: 99px; }

/* ---------- POFA clock (what we check) ---------- */
.checks-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .checks-grid { grid-template-columns: 1fr; } }
.clock-card { background: var(--ink-2); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 36px); color: #fff; position: relative; overflow: hidden; }
.clock-card h3 { color: #fff; margin-bottom: 6px; }
.clock-card .sub { color: #B9B4BF; font-size: 15px; margin-bottom: 24px; }
.days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.day { aspect-ratio: 1 / 1.15; border-radius: 9px; background: var(--ink-3); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 clamp(11px, 1.2vw, 15px)/1 var(--font-mono); color: #DDD8E2; position: relative; transition: background-color .3s, color .3s, transform .3s var(--ease-out); }
.day small { font: 400 clamp(7px, .7vw, 9px)/1 var(--font-mono); letter-spacing: .04em; margin-top: 4px; opacity: .75; text-transform: uppercase; }
.day.in { background: color-mix(in srgb, var(--magenta) 32%, var(--ink-3)); }
.day.off { background: transparent; border: 1px dashed rgba(255, 255, 255, .22); color: #8F8996; }
.day.posted { background: #fff; color: var(--ink); }
.day.given { background: var(--yellow); color: var(--ink); transform: translateY(-3px); }
.day.end { box-shadow: inset 0 0 0 2px var(--magenta); }
.clock-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: #CFCAD5; margin-bottom: 18px; }
.clock-legend span { display: inline-flex; align-items: center; gap: 7px; }
.clock-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.clock-verdict { display: flex; gap: 14px; align-items: flex-start; background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 16px 18px; }
.clock-verdict .tag { flex: none; }
.clock-verdict p { margin: 0; font-size: 15px; color: #EAE6EE; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.check-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.check-list li:last-child { border-bottom: 0; }
.check-list .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--magenta-50); color: var(--magenta-700); display: grid; place-items: center; }
.check-list .ic svg { width: 16px; height: 16px; }
.check-list b { display: block; font-weight: 700; font-size: 16.5px; }
.check-list span { color: var(--slate); font-size: 15px; }

/* ---------- strength explainer ---------- */
.strengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.strength { border-radius: var(--radius-lg); padding: 28px; background: var(--white); border: 1px solid var(--line); }
.strength .tag { margin-bottom: 18px; }
.strength h3 { margin-bottom: 8px; }
.strength p { color: var(--slate); margin: 0; font-size: 15.5px; }
@media (max-width: 860px) { .strengths { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.price-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px 30px; display: flex; flex-direction: column; border: 1px solid var(--line); position: relative; transition: transform .35s var(--ease-out), box-shadow .35s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.price-card.popular { background: var(--ink); color: #fff; border-color: var(--ink); }
.price-card.popular .muted, .price-card.popular li { color: #DCD7E1; }
.price-card .flag { position: absolute; top: -14px; left: 22px; font: 700 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px 8px; }
.price-card .flag::before { animation-delay: .5s; }
.price-card h3 { margin-bottom: 4px; }
.price { font: 700 56px/1 var(--font-display); letter-spacing: -.04em; margin: 18px 0 4px; }
.price small { font: 500 14px/1 var(--font-ui); letter-spacing: 0; color: var(--slate); margin-left: 6px; }
.price-card.popular .price small { color: #B9B4BF; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 11px; font-size: 15.5px; }
.price-card li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; line-height: 1.45; }
.price-card li::before { width: 8px; height: 8px; margin-top: calc(.725em - 4px); justify-self: center; background: var(--magenta); }   /* the diamond, centred on the first line */
.price-card.popular li::before { background: var(--yellow); }
.price-card .btn { margin-top: auto; }
.price-note { margin-top: 22px; font-size: 14.5px; color: var(--slate); text-align: center; }
@media (max-width: 960px) { .pricing { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- comparison ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); font-size: 15.5px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tr:last-child > * { border-bottom: 0; }
.compare thead th { background: var(--paper-2); font: 700 12px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.compare thead th.us { background: var(--magenta); color: #fff; }
.compare td.us { background: var(--magenta-50); font-weight: 600; }
.compare .diamond { display: inline-block; width: 9px; height: 9px; margin: 0 2px; vertical-align: .05em; background: var(--magenta); }
.compare .note { margin-left: 3px; }
@media (max-width: 640px) { .compare .note { display: block; margin: 4px 0 0; } }   /* narrow column: note under the diamond */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.compare-scroll .compare { min-width: 620px; }
@media (max-width: 640px) { .compare-scroll .compare { min-width: 0; font-size: 14px; } .compare th, .compare td { padding: 12px 10px; } .compare thead th { font-size: 10.5px; letter-spacing: .04em; } }
/* Pricing comparison (5 columns): short column heads on phones, full names kept for screen readers, tighter cells, so it
   fits a 360px screen without sideways scrolling. */
.compare-plans .col-short { display: none; }
@media (max-width: 640px) {
  .compare-plans .col-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-plans .col-short { display: inline; }
  .compare-scroll .compare-plans { font-size: 13px; line-height: 1.45; }
  .compare-plans th, .compare-plans td { padding: 10px 6px; }
  .compare-plans th[scope=row] { padding-left: 10px; }
  .compare-plans thead th { font-size: 10px; letter-spacing: .03em; }
  .compare-plans td:last-child { padding-right: 8px; }
}
@media (max-width: 340px) { .compare-scroll .compare-plans { font-size: 12px; } .compare-plans th, .compare-plans td { padding: 9px 4px; } .compare-plans th[scope=row] { padding-left: 8px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--white); border-radius: 16px; border: 1px solid var(--line); transition: border-color .2s, box-shadow .3s; }
.faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font: 700 17.5px/1.35 var(--font-display); letter-spacing: -.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2.5px solid var(--magenta); border-bottom: 2.5px solid var(--magenta); transform: rotate(45deg); transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .a { padding: 0 22px 22px; color: var(--ink-3); font-size: 16px; }
.faq .a p:last-child { margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--magenta); color: #fff; border-radius: 28px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; margin: 0 0 10px; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .92); font-size: 18px; }
.cta-band::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; background: url("../brand/logo-mark-mono.svg") center / contain no-repeat; opacity: .08; transform: rotate(-12deg); filter: invert(1); }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- cards / generic ---------- */
.card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); }
.card + .card { margin-top: 16px; }
.card h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.025em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.link-card { display: block; text-decoration: none; color: var(--ink); background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 26px; transition: transform .35s var(--ease-out), box-shadow .35s, border-color .2s; position: relative; }
.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--ink); border-color: transparent; }
.link-card .mono { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-700); }
.link-card h3 { margin: 10px 0 8px; }
.link-card p { color: var(--slate); margin: 0; font-size: 15.5px; }
.link-card .go { position: absolute; right: 22px; top: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; transition: background-color .25s, transform .35s var(--ease-out); }
.link-card:hover .go { background: var(--magenta); color: #fff; transform: rotate(-45deg); }
.link-card .go svg { width: 16px; height: 16px; }

/* ---------- forms ---------- */
.field { display: block; margin: 0 0 18px; }
.field > span, .field-label { display: block; font-weight: 650; font-size: 14.5px; margin-bottom: 7px; color: var(--ink); }
.field .hint, .hint { display: block; font-size: 13.5px; color: var(--slate); font-weight: 400; margin-top: 6px; line-height: 1.45; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="date"], .field input[type="number"], .field input[type="search"], .field textarea, .field select {
  width: 100%; font: 400 16.5px/1.4 var(--font-ui); color: var(--ink); background: var(--white); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 15px; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 110px; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 18%, transparent); }
.field input.mono-input { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.field.has-error input, .field.has-error textarea { border-color: #B42318; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin: 0 0 14px; cursor: pointer; line-height: 1.45; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--magenta); }
.errors { background: #FEF1F1; border: 1px solid #F3C4C4; color: #8C1D18; border-radius: 14px; padding: 14px 18px; margin-bottom: 22px; font-size: 15px; }
.errors ul { margin: 6px 0 0; padding-left: 18px; }

/* radio/check cards */
.choices { display: grid; gap: 10px; }
.choices.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .choices.cols-2, .choices.cols-3 { grid-template-columns: 1fr; } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice .box { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1.5px solid var(--line-2); transition: border-color .15s, background-color .15s, box-shadow .2s, transform .2s var(--ease-out); font-weight: 600; font-size: 16px; line-height: 1.3; }
.choice .box small { display: block; font-weight: 400; color: var(--slate); font-size: 14px; margin-top: 3px; }
.choice .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; transition: all .15s; margin-left: auto; }
.choice input[type="checkbox"] + .box .mark { border-radius: 6px; }
.choice:hover .box { border-color: var(--ink); }
.choice input:checked + .box { border-color: var(--magenta); background: var(--magenta-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 16%, transparent); }
.choice input:checked + .box .mark { background: var(--magenta); border-color: var(--magenta); }
.choice input:checked + .box .mark::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.choice input:focus-visible + .box { outline: 3px solid var(--magenta); outline-offset: 2px; }
.choice .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; }
.choice .ico svg { width: 24px; height: 24px; }
.seg { display: inline-flex; background: var(--paper-2); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 9px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.seg input:checked + span { background: var(--white); box-shadow: var(--shadow-1); color: var(--magenta-700); }
.seg input:focus-visible + span { outline: 2px solid var(--magenta); }

/* ---------- wizard ---------- */
.wizard-page { min-height: calc(100svh - 72px); background: var(--paper); }
.wizard { width: min(720px, 100% - 32px); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 64px; }
.wz-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.wz-road { flex: 1; height: 8px; border-radius: 99px; background: var(--paper-3); position: relative; overflow: hidden; }
.wz-road::before { content: ""; position: absolute; inset: 3px 6px; background: repeating-linear-gradient(90deg, rgba(22, 20, 26, .22) 0 14px, transparent 14px 26px); border-radius: 2px; }
.wz-road i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--magenta); border-radius: 99px; transition: width .5s var(--ease-out); }
.wz-count { font: 700 12.5px/1 var(--font-display); letter-spacing: .08em; color: var(--slate); white-space: nowrap; }
.wz-step { display: none; }
.wz-step.is-active { display: block; animation: wzIn .45s var(--ease-out); }
.wz-step.is-back { animation-name: wzBack; }
@keyframes wzIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wzBack { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.wz-step h1, .wz-step h2.q { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.035em; line-height: 1.04; margin-bottom: 12px; }
.wz-step .lede { color: var(--slate); font-size: 17px; margin-bottom: 26px; max-width: 36em; }
.wz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.wz-back { background: none; border: 0; font: 600 15px/1 var(--font-ui); color: var(--slate); cursor: pointer; padding: 12px 4px; display: inline-flex; gap: 8px; align-items: center; }
.wz-back:hover { color: var(--ink); }
.wz-back[hidden] { display: inline-flex; visibility: hidden; }
.wz-error { color: #8C1D18; background: #FEF1F1; border-radius: 12px; padding: 12px 14px; font-size: 15px; margin-top: 16px; display: none; }
.wz-error.show { display: block; }
.wz-aside { margin-top: 18px; background: var(--white); border-radius: 14px; border: 1px dashed var(--line-2); padding: 14px 16px; font-size: 14.5px; color: var(--ink-3); }
.wz-aside b { color: var(--ink); }
.op-search { position: relative; }
.op-list { list-style: none; margin: 8px 0 0; padding: 6px; background: var(--white); border: 1.5px solid var(--line-2); border-radius: 14px; max-height: 300px; overflow: auto; }
.op-list li button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 0; background: none; border-radius: 10px; font: 600 15.5px/1.2 var(--font-ui); color: var(--ink); cursor: pointer; }
.op-list li button:hover, .op-list li button:focus-visible, .op-list li button.is-on { background: var(--magenta-50); outline: none; }
.op-list li button span { font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--slate); }
.op-picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--magenta-50); border: 1.5px solid var(--magenta); border-radius: 14px; padding: 14px 16px; font-weight: 700; margin-top: 10px; }
.op-picked .mono { font-size: 11.5px; color: var(--magenta-700); letter-spacing: .06em; }
.mini-q-list { display: grid; gap: 12px; }
.mini-q-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.mini-q-row p { margin: 0; font-size: 15px; font-weight: 600; }
@media (max-width: 620px) { .mini-q-row { flex-direction: column; align-items: stretch; } }

/* ---------- results ---------- */
.verdict { border-radius: 28px; padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; }
.verdict.lv-strong { background: var(--magenta); color: #fff; }
.verdict.lv-possible { background: var(--ink); color: #fff; }
.verdict.lv-mitigation, .verdict.lv-none, .verdict.lv-unsupported { background: var(--white); border: 1px solid var(--line); }
.verdict h1 { font-size: clamp(34px, 5.2vw, 64px); margin: 14px 0 14px; }
.verdict p { font-size: clamp(16.5px, 1.5vw, 19px); max-width: 40em; margin: 0; }
.verdict .tag { font-size: 11.5px; }
.verdict.lv-strong .tag { background: #fff; color: var(--magenta-700); }
.verdict.lv-possible .tag { background: var(--yellow); color: var(--ink); }
.verdict-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.verdict-meta .pill { background: rgba(255, 255, 255, .16); color: inherit; }
.verdict.lv-mitigation .verdict-meta .pill, .verdict.lv-none .verdict-meta .pill { background: var(--paper-2); }
.results-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 28px; }
@media (max-width: 1000px) { .results-grid { grid-template-columns: minmax(0, 1fr); } }   /* minmax: the day strip scrolls instead of widening the page */
.ground { background: var(--white); border-radius: 20px; border: 1px solid var(--line); padding: 22px 24px; margin-bottom: 12px; position: relative; }
.ground.strong { border-left: 6px solid var(--magenta); }
.ground.possible { border-left: 6px solid var(--ink); }
.ground.mitigation { border-left: 6px solid var(--paper-3); }
.ground-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.ground h3 { font-size: 20px; margin: 0 0 8px; }
.ground p { margin: 0 0 10px; font-size: 16px; }
.ground .detail { color: var(--slate); font-size: 14.5px; }
.ground .src { font: 400 12px/1.4 var(--font-mono); color: var(--slate); }
.ground .src a { color: inherit; }
.ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ev span { font-size: 12.5px; background: var(--paper); border-radius: 99px; padding: 5px 10px; color: var(--ink-3); }
.note-card { background: #FFF8DB; border: 1px solid #F2E09A; border-radius: 16px; padding: 14px 18px; font-size: 15px; margin-bottom: 12px; }
.side-card { background: var(--white); border-radius: 20px; border: 1px solid var(--line); padding: 22px; margin-bottom: 16px; }
.side-card h2, .side-card h3 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 12px; }
.dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dates li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start; }
.date-chip { background: var(--paper); border-radius: 12px; text-align: center; padding: 8px 4px; font-family: var(--font-mono); line-height: 1.05; }
.date-chip b { display: block; font-size: 22px; font-family: var(--font-display); letter-spacing: -.03em; }
.date-chip small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.dates .st-soon .date-chip { background: var(--magenta); color: #fff; }
.dates .st-soon .date-chip small { color: rgba(255, 255, 255, .85); }
.dates .st-past .date-chip { opacity: .5; }
.dates strong { display: block; font-size: 15px; }
.dates span { font-size: 13.5px; color: var(--slate); line-height: 1.4; display: block; }
.route { display: grid; gap: 8px; counter-reset: r; }
.route div { display: flex; gap: 12px; align-items: center; font-size: 15px; font-weight: 600; }
.route div::before { counter-increment: r; content: counter(r); width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--font-mono); }

/* pofa strip on results/tool */
.pofa-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34px, 1fr); gap: 4px; overflow-x: auto; padding: 4px 2px 8px; margin: 12px 0; scrollbar-width: thin;
  contain: inline-size; }   /* its days never widen the page on a phone (it scrolls sideways inside its card instead) */
.pofa-strip .day { background: var(--paper-2); color: var(--ink); aspect-ratio: auto; min-height: 50px; border-radius: 8px; }
.pofa-strip .day.in { background: var(--magenta-100); }
.pofa-strip .day.off { background: transparent; border: 1px dashed var(--line-2); color: var(--slate-2); }
.pofa-strip .day.posted { background: var(--ink); color: #fff; }
.pofa-strip .day.given { background: var(--yellow); }
.pofa-strip .day.end { box-shadow: inset 0 0 0 2px var(--magenta); }

/* ---------- package picker (details page) ---------- */
.pkg-pick { display: grid; gap: 10px; }
.pkg-pick .box { justify-content: space-between; }
.pkg-pick .price-s { font: 700 22px/1 var(--font-display); letter-spacing: -.03em; }
.flag-s { display: inline-block; font: 700 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px 4px; margin-left: 8px; vertical-align: 2px; }
.paybar { padding: 18px 0 0; margin-top: 4px; }
.secure { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--slate); margin-top: 10px; justify-content: center; }

/* ---------- letter preview (paper) ---------- */
.paper { background: var(--white); color: var(--ink); border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(22, 20, 26, .35); padding: clamp(24px, 4.5vw, 56px) clamp(20px, 4.5vw, 60px); font: 400 15px/1.62 var(--font-ui); position: relative; }
.paper .from { text-align: right; font-size: 14px; margin-bottom: 24px; white-space: pre-line; }
.paper .to { font-size: 14px; margin-bottom: 18px; }
.paper .to b { display: block; }
.paper .refs { border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); padding: 10px 0; margin: 16px 0 20px; display: grid; grid-template-columns: max-content 1fr; gap: 3px 22px; font-size: 13.5px; }
.paper .refs dt { color: var(--slate); }
.paper .refs dd { margin: 0; font-weight: 650; word-break: break-word; }
.paper h4 { font: 650 15px/1.4 var(--font-ui); letter-spacing: 0; margin: 18px 0 8px; }
.paper ul { margin: 0 0 14px; padding-left: 20px; }
.paper .sig { margin-top: 26px; }
.paper .sig b { display: block; margin-top: 30px; padding-top: 6px; border-top: 1px solid var(--paper-3); width: 200px; }
.paper .enc { margin-top: 20px; font-size: 13.5px; color: var(--slate); }
.paper.fade { max-height: 520px; overflow: hidden; }
.paper.fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(transparent, var(--white) 75%); }
.paper.compact { padding: 20px 18px; font-size: 13px; line-height: 1.55; }
.paper.compact .refs { grid-template-columns: 1fr; gap: 0; font-size: 12px; margin-top: 0; }
.paper.compact .refs dd { margin-bottom: 6px; }
.paper.compact h4 { font-size: 13px; }
.paper-title { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; margin-bottom: 4px; }

/* ---------- case dashboard ---------- */
.case-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin: 34px 0 22px; }
.case-head h1 { font-size: clamp(30px, 4.4vw, 52px); margin: 8px 0 0; }
.next-card { background: var(--ink); color: #fff; border-radius: 26px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.next-card.won { background: var(--green); }
.next-card h2 { color: #fff; font-size: clamp(24px, 3vw, 36px); margin: 8px 0 8px; }
.next-card p { color: #DCD7E1; margin: 0; }
.countdown { text-align: center; background: rgba(255, 255, 255, .07); border-radius: 20px; padding: 18px 22px; min-width: 150px; }
.countdown b { display: block; font: 700 64px/.9 var(--font-display); letter-spacing: -.05em; color: var(--yellow); }
.countdown span { font: 400 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #CFCAD5; }
.countdown.urgent b { color: #fff; }
.countdown.urgent { background: var(--magenta); }
@media (max-width: 700px) { .next-card { grid-template-columns: 1fr; } .countdown { justify-self: start; } }
.next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tracker { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.tracker li { position: relative; padding-top: 18px; font-size: 13.5px; color: var(--slate); }
.tracker li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 99px; background: var(--paper-3); }
.tracker li.done::before { background: var(--magenta); }
.tracker li.now::before { background: linear-gradient(90deg, var(--magenta) 0 50%, var(--paper-3) 50%); }
.tracker li b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; }
@media (max-width: 700px) { .tracker { grid-auto-flow: row; } .tracker li { padding: 0 0 0 20px; } .tracker li::before { right: auto; bottom: 0; width: 6px; height: auto; } }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 28px; }
@media (max-width: 1040px) { .case-grid { grid-template-columns: 1fr; } }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a, .tabs span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--paper-2); font-size: 14.5px; font-weight: 650; text-decoration: none; color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
.tabs span.locked { opacity: .55; }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.disclaimer { font-size: 13.5px; color: var(--slate); background: var(--paper-2); border-radius: 14px; padding: 12px 16px; margin: 16px 0; }
.disclaimer b { color: var(--ink); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.events li { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.events li:last-child { border-bottom: 0; }
.events form { margin: 0; }
.inline-form { display: grid; gap: 10px; }
.inline-form .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.inline-form .row .field { margin: 0; flex: 1; min-width: 150px; }
.lock-card { background: var(--paper-2); border-radius: 20px; padding: 22px; border: 1px dashed var(--line-2); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14.5px; cursor: pointer; }
.checklist input { width: 18px; height: 18px; accent-color: var(--magenta); margin-top: 2px; }
.checklist small { display: block; color: var(--slate); font-size: 12.5px; }
.checklist input:checked + span { text-decoration: line-through; color: var(--slate); }
details.edit summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.edit summary::-webkit-details-marker { display: none; }
details.edit summary::after { content: "Edit"; font: 600 14px/1 var(--font-ui); color: var(--magenta-700); }
details.edit[open] summary::after { content: "Close"; }
details.edit.danger summary::after { content: "Show"; color: var(--slate); }
details.edit.danger[open] summary::after { content: "Hide"; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 15px; opacity: 0; transition: opacity .25s, transform .35s var(--ease-out); z-index: 9999; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- guides / prose ---------- */
.page-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); }
.page-hero h1 { font-size: clamp(38px, 5.6vw, 76px); max-width: 15ch; }
.page-hero .lede { font-size: clamp(18px, 1.7vw, 22px); color: var(--slate); max-width: 40em; }
.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .guide-layout { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 100px; font-size: 14px; }
.toc b { font: 700 11.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 12px; }
.toc a { display: block; color: var(--ink-3); text-decoration: none; padding: 7px 0 7px 14px; border-left: 2px solid var(--line); }
.toc a:hover, .toc a.is-on { color: var(--magenta-700); border-left-color: var(--magenta); }
.prose { font-size: 18px; line-height: 1.7; max-width: 720px; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin: 1.8em 0 .5em; scroll-margin-top: 96px; }
.prose h3 { margin: 1.5em 0 .4em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: .35em 0; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--yellow); color: var(--ink-3); font-style: normal; }
.prose .callout-box { background: var(--white); border-radius: 18px; border: 1px solid var(--line); padding: 20px 22px; margin: 1.5em 0; font-size: 16.5px; }
.prose .callout-box.warn { background: #FFF8DB; border-color: #F2E09A; }
.prose .callout-box b:first-child { display: block; font-family: var(--font-display); font-size: 18px; margin-bottom: 4px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 1.2em 0; background: var(--white); border-radius: 14px; overflow: hidden; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--paper-2); font-size: 13px; font-family: var(--font-mono); letter-spacing: .04em; }
.prose .sources { font-size: 14px; color: var(--slate); border-top: 1px solid var(--line); margin-top: 3em; padding-top: 1em; }
.prose .sources li { margin: .25em 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.byline { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 13px/1.4 var(--font-display); color: var(--slate); letter-spacing: .02em; }

/* NtK tool widget */
.tool { background: var(--white); border-radius: 26px; border: 1px solid var(--line); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-1); }
.tool-result { margin-top: 20px; display: none; }
.tool-result.show { display: block; animation: wzIn .45s var(--ease-out); }
.tool-verdict { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.tool-verdict.late, .tool-verdict.early, .tool-verdict.missing { background: var(--magenta-50); }
.tool-verdict p { margin: 0; font-size: 16px; }

/* ---------- account ---------- */
.case-list { display: grid; gap: 12px; }
.case-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease-out), box-shadow .3s; }
.case-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); color: var(--ink); }
.case-item h3 { font-size: 19px; margin: 6px 0 4px; }
.case-item p { margin: 0; color: var(--slate); font-size: 14.5px; }
.empty { text-align: center; background: var(--white); border: 1px dashed var(--line-2); border-radius: 24px; padding: clamp(32px, 6vw, 64px) 20px; }
.empty h2 { font-size: clamp(24px, 3vw, 34px); }

/* auth (sitekit cards on brand) */
.auth-wrap { min-height: calc(100svh - 72px - 1px); display: grid; place-items: center; padding: 48px 16px; }
.auth-card { width: min(460px, 100%); background: var(--white); border-radius: 26px; border: 1px solid var(--line); padding: clamp(26px, 5vw, 44px); box-shadow: var(--shadow-2); }
.auth-card h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
.auth-card .sub { color: var(--slate); margin-bottom: 24px; }
/* --sk-radius is the pill (buttons); sitekit's cards, inputs and notes keep Pushback's own radii */
body .sk-card { border-radius: 26px; }
body :is(.sk-input, .sk-field input, .sk-field select, .sk-field textarea) { border-radius: 12px; }
body :is(.sk-alert, .sk-legal .note, .sk-blog-preview, .sk-blog-thumb img, .sk-blog-body img, .sk-blog-body pre) { border-radius: 14px; }
body :is(.sk-consent, .sk-blog-card, .sk-blog-related, .sk-blog-hero img) { border-radius: 22px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #CFCAD5; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 36px; padding: 64px 0 40px; }
.foot-brand img { height: 26px; width: auto; margin-bottom: 18px; }
.foot-brand p { color: #fff; font: 600 20px/1.3 var(--font-display); letter-spacing: -.01em; max-width: 16em; margin-bottom: 22px; }
.site-footer h2 { font: 700 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin: 6px 0 16px; }
.site-footer nav a { display: block; color: #CFCAD5; text-decoration: none; font-size: 15px; padding: 5px 0; }
.site-footer nav a:hover { color: #fff; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0 40px; font-size: 13px; color: #A39DAA; }
.foot-legal p { margin: 0 0 8px; max-width: 80em; }
.foot-legal a { color: #CFCAD5; }
.foot-legal strong { color: #fff; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }
.no-js .reveal { opacity: 1; transform: none; }

/* sitekit flash + consent on brand */
.sk-flashes .sk-alert { border-radius: 14px; font-weight: 600; }
.sk-demo-banner { font-family: var(--font-ui); }

/* ---------- print (letters) ---------- */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .no-print, .tabs, .tool-row, .next-card, .tracker, .case-head .pill, .sk-demo-banner, .sk-flashes, .disclaimer { display: none !important; }
  .case-grid { display: block; }
  .case-grid > aside { display: none; }
  .paper { box-shadow: none; padding: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .swipe::before, .hero h1 em::before, .hero-eyebrow::before, .hero-eyebrow .ln::before, .flag::before, .flag-s::before { animation: none !important; }
}

/* "check your spam" box (sitekit/email_notice.html): sitekit rounds it with --sk-radius, which is this brand's
   pill radius for buttons; a multi-line box needs the card radius ("body": sitekit.css loads after this file) */
body .sk-email-notice { border-radius: 16px; }

/* Photos + the check before payment (details page, case page) */
.ok-note { background: #EEF8F1; border: 1px solid #BFE3CB; color: #155B2E; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: 15px; }
.findings h2 { margin-bottom: 6px; }
.finding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.finding { border: 1.5px solid var(--line-2); border-left-width: 5px; border-radius: 14px; padding: 14px 16px; background: var(--white); }
.finding p { margin: 4px 0 10px; font-size: 15px; }
.finding.lv-stop { border-color: #D13B3B; background: #FEF4F4; }
.finding.lv-check { border-color: var(--magenta); }
.finding.lv-info { border-color: var(--line-2); }
.finding.done { opacity: .75; }
.finding blockquote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--line-2); background: #F7F5F0; font-size: 14.5px; }
.finding-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.thumbs:empty { display: none; }
.thumb { position: relative; margin: 0; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #F7F5F0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(11, 10, 13, .78); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.photo-add { position: relative; cursor: pointer; }
.photo-add input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.photo-add.is-loading { opacity: .7; pointer-events: none; }
.photo-error { color: #8C1D18; font-size: 14px; margin: 8px 0 0; }