/* ============================================================================
   Perivane funnel: the "Linen" design system.
   ONE source of truth for all 7 funnel pages (landing, intake, payment,
   confirmation, rejected, contact, legal).

   Self-hosted fonts only: no external font request (GDPR, EU/UK in scope).
   Light only, by decision. See docs/design/linen/BUILD-DECISIONS.md

   Legacy class names from the previous funnel (.btn--primary, .field, .steps,
   .card, .shell, .eyebrow ...) are deliberately restyled here rather than
   renamed, so page markup does not have to change. Only the header and the
   footer markup differ from the old pages.
   ============================================================================ */

/* --- Satoshi (Fontshare, ITF Free Font License) --- */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/satoshi-700.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap;src:url('/static/fonts/satoshi-900.woff2') format('woff2')}
/* --- JetBrains Mono (SIL OFL 1.1) --- */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/jetbrains-mono-500.woff2') format('woff2')}

/* ---------------------------------------------------------------- tokens -- */
:root{
  color-scheme:light;
  --canvas:#F6F1E8;
  --header-bg:rgba(246,241,232,.85);
  --panel-deep:#EDE4D5;
  --card:#FBF7F0;
  --card-2:#F2EADD;
  --card-3:#E9DFCE;
  --ink:#171310;
  --ink-2:#403830;
  --muted:#6B6155;
  --accent:#8E2C33;
  --accent-hover:#742227;
  --accent-border:#D9AEB2;
  --accent-fill-a:#F2DDDF;
  --accent-fill-b:#F9EDEE;
  --accent-fill-c:#EBC9CC;
  --accent-card:#F4E2E3;
  --accent-card-border:#DFB6BA;
  --ink-inv:#FBF7F0;
  --ok:#2F6B4F;
  --warn:#8A5A1B;
  --h04:rgba(40,28,16,.04);
  --h05:rgba(40,28,16,.05);
  --h10:rgba(40,28,16,.10);
  --h13:rgba(40,28,16,.13);
  --h14:rgba(40,28,16,.14);
  --h15:rgba(40,28,16,.15);
  --h16:rgba(40,28,16,.16);
  --h17:rgba(40,28,16,.17);
  --h18:rgba(40,28,16,.18);
  --h20:rgba(40,28,16,.20);
  --h22:rgba(40,28,16,.22);
  --h24:rgba(40,28,16,.24);
  --grad-panel:linear-gradient(120deg,#F4E2E3,#F7F1E4 48%,#FAE6CC);
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --max:1200px;
  --gutter:24px;
  --headh:100px;
  --anchor:112px;
}

/* ------------------------------------------------------------------ base -- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.035em;text-wrap:balance;margin:0;color:var(--ink);line-height:1.05}
p{margin:0;text-wrap:pretty}
img{max-width:100%}
a{color:var(--ink);text-decoration:none}
::selection{background:rgba(40,28,16,.14)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
body>title{display:none}          /* legacy pages carry a stray <title> in body */

/* The funnel toggles elements with the `hidden` ATTRIBUTE from JS (scan overlay,
   reject state, discount and tax rows, contact thanks, series mode). Any rule that
   sets `display` would otherwise beat the UA default and force them visible, so
   `hidden` wins over everything, everywhere. Do not remove. */
[hidden]{display:none !important}

/* ------------------------------------------------------- ambient background */
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(30px)}
.orb-a{top:-20%;left:8%;width:820px;height:820px;background:radial-gradient(circle,rgba(250,223,201,.80),transparent 64%);animation:drift 22s ease-in-out infinite}
.orb-b{top:6%;right:-10%;width:760px;height:760px;background:radial-gradient(circle,rgba(250,223,201,.80),transparent 64%);animation:drift 28s ease-in-out infinite 3s}
.orb-c{bottom:-16%;left:34%;width:700px;height:700px;background:radial-gradient(circle,rgba(245,235,196,.68),transparent 64%);animation:drift 25s ease-in-out infinite 6s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-30px,0) scale(1.06)}}
/* `clip`, NOT `hidden`. overflow-x:hidden forces overflow-y:auto, which makes this
   element a scroll container and silently kills position:sticky on the header.
   overflow-x:clip clips the same way without creating one. Do not change back. */
.page{position:relative;z-index:1;overflow-x:clip}

/* ---------------------------------------------------------------- header -- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--h13)}
.hdr{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:var(--headh);display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{width:175px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .16s ease}
.nav a:hover{color:var(--ink)}
.nav .nav-cta{background:var(--accent);color:var(--ink-inv);padding:9px 20px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center}
.nav .nav-cta:hover{background:var(--accent-hover);color:var(--ink-inv)}
/* interior pages: a single mono step marker instead of section links */
.hdr .step-of{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
/* interior header carries one CTA (or nothing on checkout), so it must NOT be
   hidden by the mobile rule that collapses the landing page's section nav. */
.nav.nav-simple{display:flex}
.navmenu{display:none}
.navmenu>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:5px;border:1px solid var(--h16);border-radius:10px;padding:0 11px;background:var(--card-2)}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
.mobnav{position:absolute;left:0;right:0;top:100%;background:var(--canvas);border-bottom:1px solid var(--h13);padding:14px var(--gutter) 22px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 30px rgba(40,28,16,.10)}
.mobnav a{padding:13px 0;border-bottom:1px solid var(--h10);color:var(--muted);font-size:16px;font-weight:500}
.mobnav a:last-child{border-bottom:0}
.mobnav .nav-cta{margin-top:14px;background:var(--accent);color:var(--ink-inv);border-radius:10px;padding:14px;text-align:center;font-weight:700;border-bottom:0}

/* ---------------------------------------------------------------- footer -- */
.site-footer{border-top:1px solid var(--h13);padding:64px 0 44px;position:relative;z-index:1}
.site-footer .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--h13)}
.fgrid img{width:150px;height:auto;display:block;margin-bottom:18px}
.fgrid .about{font-size:15px;color:var(--muted);max-width:300px;line-height:1.6}
.fgrid .llc{font-size:13.5px;color:var(--muted);margin-top:18px}
.fcol .kicker-sm{color:var(--ink);margin-bottom:18px}
.fcol .links{display:flex;flex-direction:column;gap:12px}
.fcol a{color:var(--muted);font-size:14.5px;transition:color .16s ease}
.fcol a:hover{color:var(--ink)}
.copy{margin-top:28px;font-size:13px;color:var(--muted)}

/* the simple footer: interior pages (intake, payment, confirmation, rejected,
   contact, legal). One row, logo left, links right, fine print beneath. */
.site-footer.simple{padding:44px 0 40px}
.site-footer.simple .sf-row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--h13)}
.site-footer.simple img{width:132px;height:auto;display:block}
.site-footer.simple .sf-nav{display:flex;flex-wrap:wrap;gap:26px}
.site-footer.simple .sf-nav a{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .16s ease}
.site-footer.simple .sf-nav a:hover{color:var(--ink)}
.site-footer.simple .sf-fine{margin-top:20px;font-size:13px;color:var(--muted)}

/* ------------------------------------------------------------ primitives -- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* Scoped to <section> on purpose: intake.html uses <h2 class="sec"> for its form
   section headings, and an unscoped .sec gave those a 96px padding-bottom. */
section.sec{padding:96px 0}
.sec-narrow{max-width:840px}
.kicker{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--muted);margin:0 0 18px}
.kicker-sm{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;color:var(--muted);margin:0}
.kicker-ink{color:var(--ink)}
.h2{font-size:clamp(38px,5.2vw,62px)}
.h2 .soft{color:var(--muted)}
.lede{margin-top:22px;font-size:18.5px;color:var(--muted);line-height:1.6}
.card{background:var(--card);border:1px solid var(--h14);border-radius:4px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.note{font-size:13px;color:var(--muted);line-height:1.6}
.chip{background:var(--card);border:1px solid var(--h14);border-radius:10px;padding:8px 18px;font-size:14px;font-weight:500;color:var(--muted)}
.tick{color:var(--accent);font-weight:700}
.divider{border:0;border-top:1px solid var(--h15);margin:28px 0}
.hint,.fieldnote{font-size:13.5px;color:var(--muted);line-height:1.55}

/* eyebrow: the old pages' section marker, now the Linen mono kicker */
.eyebrow{display:inline-block;font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--muted);margin-bottom:16px}
.sub{font-size:17px;color:var(--muted);line-height:1.6;margin:14px 0 0}

/* --------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;font-family:var(--sans);font-weight:700;cursor:pointer;border:0;transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}
.btn svg{width:1em;height:1em;flex-shrink:0}
.btn-ink{background:var(--ink);color:#FFFFFF;padding:16px 34px;font-size:16.5px;box-shadow:0 10px 34px rgba(40,28,16,.15)}
.btn-ink:hover{background:#332B24;color:#FFFFFF}
.btn-ghost{background:var(--card-2);border:1px solid var(--h17);color:var(--ink);padding:16px 34px;font-size:16.5px;font-weight:600}
.btn-ghost:hover{background:var(--card-3)}
.btn-crimson{background:var(--accent);border:1px solid var(--accent);color:var(--ink-inv);padding:14px 22px;font-size:15px;font-weight:600}
.btn-crimson:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink-inv)}
/* legacy modifiers, restyled in Linen so page markup is untouched */
.btn--primary{background:var(--accent);border:1px solid var(--accent);color:#FFFFFF;padding:15px 28px;font-size:15.5px}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#FFFFFF}
.btn--ghost{background:var(--card-2);border:1px solid var(--h18);color:var(--ink);padding:15px 28px;font-size:15.5px;font-weight:600}
.btn--ghost:hover{background:var(--card-3)}
.btn--block{width:100%}
.btn--sm{padding:9px 16px;font-size:14px;border-radius:9px}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-add{background:var(--card-2);border:1px dashed var(--h22);color:var(--ink);border-radius:10px;padding:12px 20px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.btn-add:hover{background:var(--card-3)}

/* ------------------------------------------------------- funnel shell -- */
.shell,.legal-wrap{max-width:960px;margin:0 auto;padding:48px var(--gutter) 72px;position:relative;z-index:1}
.shell>main.card,.legal-wrap>main.card{padding:44px 48px;border-radius:4px}
.shell h1,.legal-wrap h1{font-size:clamp(30px,4vw,44px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.actions .note{color:var(--muted)}

/* Progress steps. Scoped under .steps: landing.html uses .flow .step for the
   canon-pack flow cards, and an unscoped .step turned those into flex rows. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.steps .step{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--h14);border-radius:4px;padding:16px 18px}
.steps .step .num{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:500;background:var(--card-2);border:1px solid var(--h16);color:var(--muted)}
.steps .step .t{display:block;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.steps .step .d{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.steps .step.active{border-color:var(--accent-border);background:var(--accent-card)}
.steps .step.active .num{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.steps .step.done .num{background:var(--ok);border-color:var(--ok);color:#FFFFFF}

/* the round confirmation / warning mark */
.successmark{width:56px;height:56px;border-radius:50%;background:var(--ok);color:#FFFFFF;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.successmark svg{width:28px;height:28px}
.successmark.warn{background:var(--accent)}   /* rejection / cannot-proceed */

/* ----------------------------------------------------------------- forms -- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label,.field .lbl{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}  /* scoped: landing uses .out .lbl for a mono kicker */
.field-title{font-size:18px;font-weight:700;color:var(--ink);margin:26px 0 12px}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=tel],select,textarea{
  font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:#FFFFFF;border:1px solid var(--h18);border-radius:10px;
  padding:12px 14px;width:100%;transition:border-color .16s ease,box-shadow .16s ease;
}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-fill-b)}
input::placeholder,textarea::placeholder{color:#A79E90}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.req{color:var(--accent);font-weight:700}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Horizontal wrapping row, as the original funnel had it: these are short genre
   and channel tags, and a column wastes a screen of vertical space. */
.checks{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:3px}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);line-height:1.4;cursor:pointer}
.chk input[type=checkbox]{width:16px;height:16px;flex-shrink:0;margin:0;accent-color:var(--accent)}
.filedrop{border:1px dashed var(--h22);border-radius:10px;background:var(--card-2);padding:22px;text-align:center;color:var(--muted);font-size:14.5px;transition:border-color .16s ease,background .16s ease}
.filedrop:hover{border-color:var(--accent-border);background:var(--accent-fill-b)}

/* ---------------------------------------------------------------- prose -- */
.legal-doc{font-size:16px;color:var(--ink-2);line-height:1.72}
.legal-doc h1{margin-bottom:8px}
.legal-doc h2{font-size:22px;margin:34px 0 12px}
.legal-doc h3{font-size:17.5px;margin:26px 0 10px}
.legal-doc p{margin:0 0 15px}
.legal-doc ul,.legal-doc ol{margin:0 0 16px;padding-left:22px}
.legal-doc li{margin-bottom:8px}
.legal-doc a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.legal-doc hr{border:0;border-top:1px solid var(--h15);margin:30px 0}
.legal-doc code{font-family:var(--mono);font-size:13.5px;background:var(--card-2);padding:2px 6px;border-radius:5px}
.legal-doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.legal-doc th,.legal-doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--h14)}
.legal-doc th{font-weight:700;color:var(--ink)}

/* -------------------------------------------------------- cookie notice -- */
.ck{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;max-width:720px;margin:0 auto;
    background:var(--ink);color:var(--ink-inv);padding:15px 18px;border-radius:12px;
    font-family:var(--sans);font-size:14px;line-height:1.5;box-shadow:0 10px 34px rgba(40,28,16,.28)}
.ck .ck-in{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.ck span{flex:1 1 260px}
.ck a{color:var(--accent-card);text-decoration:underline;text-underline-offset:2px}
.ck button{background:var(--accent);color:#FFFFFF;border:0;border-radius:9px;padding:10px 20px;
           font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--sans)}
.ck button:hover{background:var(--accent-hover)}

/* ---------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1080px){
  .fgrid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  :root{--headh:72px;--anchor:84px}
  .nav{display:none}
  .navmenu{display:block}
  .logo img{width:142px}
  section.sec{padding:64px 0}
  .shell,.legal-wrap{padding:32px var(--gutter) 56px}
  .shell>main.card,.legal-wrap>main.card{padding:32px 28px}
  .steps{grid-template-columns:1fr;gap:8px}
  .site-footer.simple .sf-row{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:620px){
  :root{--gutter:18px}
  .fgrid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .shell>main.card,.legal-wrap>main.card{padding:26px 20px}
  .site-footer.simple .sf-nav{gap:14px 22px}
  .actions .btn{width:100%}
  .nav.nav-simple .nav-cta{padding:9px 15px;font-size:13.5px}
}