/* ============================================================
   coachOS — marketing.css  ·  marketing#index + Devise auth
   The shared foundation (tokens, fonts, base, buttons, brand mark,
   unified header + footer, width-constraint band) lives in site.css
   and loads FIRST. This file holds only the marketing-index sections
   (edge-spine, hero, panels, reveals, overcoil) and the Devise auth
   surface (.auth-*/.field).
   ============================================================ */

.panel-light em{color:var(--gold-deep);}

/* ---------------- spine + panels ---------------- */
.page{position:relative;overflow:clip;}
section{position:relative;padding:var(--pad-y) var(--inset) var(--pad-y) var(--pad-x-left);}
section::before{content:"";position:absolute;left:var(--spine-x);top:0;bottom:0;width:2px;background:var(--line-spine);z-index:1;}
.panel-dark{background:var(--shadow);color:var(--paper);--line-spine:rgba(200,162,76,.26);--rule:rgba(200,162,76,.18);}
.panel-dark.raised{background:var(--shadow-raised);}
.panel-dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 75% at 72% -5%, rgba(200,162,76,.06), transparent 58%);}
.panel-light{background:var(--paper);color:var(--ink);--line-spine:rgba(176,136,58,.34);--rule:rgba(28,26,18,.12);}
.inner{position:relative;z-index:2;}

/* rail node — hollow gold ring that fills like the moon, with a slow pulse */
.node{position:absolute;left:calc(var(--spine-x) - 7px);top:calc(var(--pad-y) + 1px);z-index:3;
  width:16px;height:16px;border-radius:50%;border:2px solid var(--gold);background:transparent;
  transition:background .55s ease, box-shadow .55s ease;}
.node::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--gold);
  opacity:0;animation:nodePulse 3.6s ease-out infinite;}
.is-active .node{background:var(--gold);box-shadow:0 0 0 6px rgba(200,162,76,.14);}
.is-active .node::after{animation-duration:2.6s;}
@keyframes nodePulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--gold);margin:0 0 24px;display:flex;align-items:center;gap:10px;}
.panel-light .eyebrow{color:var(--gold-deep);}
.eyebrow .n{opacity:.65;}
@media (min-width:600px){ .eyebrow{font-size:11.5px;letter-spacing:.22em;gap:14px;} }


/* ---------------- hero ---------------- */
.hero-inner{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;}
.hero h1{font-size:clamp(34px,8.4vw,76px);max-width:15ch;letter-spacing:-0.025em;margin-top:6px;}
.hero .lede{font-size:clamp(17px,4.4vw,21px);max-width:46ch;margin:26px 0 0;color:var(--muted-dark);}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero .cta-row .btn{flex:1 1 auto;}
.hero .underline-note{font-size:14px;color:var(--muted-dark);margin-top:20px;}
@media (min-width:560px){ .hero .cta-row .btn{flex:0 0 auto;} }
@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:56px;}
  .hero h1{margin-top:0;}
  .hero .lede{margin-top:32px;}
  .hero .cta-row{margin-top:42px;}
}

/* interactive Overcoil */
.hero-art{position:relative;display:flex;justify-content:flex-start;align-items:center;
  order:-1;margin:4px 0 8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
@media (min-width:900px){ .hero-art{order:0;justify-content:center;margin:0;} }
.hero-art::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;
  left:var(--gx,42%);top:var(--gy,46%);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(200,162,76,.20), transparent 68%);
  filter:blur(8px);transition:opacity .4s ease;opacity:.9;}
/* No CSS filter on the <svg> box: filter:drop-shadow() on an SVG element
   rasterizes its rectangular viewport as the filter input, ghosting a faint
   square behind the coil (seen once the mark fades). The ambient gold glow is
   the .hero-art::before halo — a circle — so nothing here needs a filter. */
.overcoil{width:100%;height:auto;max-width:150px;cursor:pointer;}
@media (min-width:900px){ .overcoil{max-width:330px;} }
.hero-art.tap{animation:tapPulse .5s cubic-bezier(.2,.7,.3,1);}
@keyframes tapPulse{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* The Overcoil draws from empty -> holds solid -> fades the whole drawn mark
   out (opacity only) -> resets the draw WHILE invisible -> repeats. The mark
   never retracts while visible, so no partial fragment (e.g. a lone inner
   curl) can ever flash. Two invariants prevent every artifact:
     • opacity only rises/falls while the stroke is either fully drawn or fully
       hidden by the dash — never mid-draw, so nothing pops in.
     • the dash-offset only resets (0 -> 100) during the opacity:0 window, so
       the "un-draw" is never seen.
   0% and 100% are identical (hidden, transparent) for a seamless loop. */
.coil,.moon{stroke-dasharray:100;stroke-dashoffset:100;}
.coil{animation:coilLoop 7s ease-in-out infinite;}
.moon{animation:moonLoop 7s ease-in-out infinite;}
@keyframes coilLoop{
  0%   {stroke-dashoffset:100;opacity:0}   /* empty */
  2%   {stroke-dashoffset:100;opacity:1}   /* opacity up while still hidden by the dash */
  36%  {stroke-dashoffset:0;opacity:1}     /* coil fully inscribed */
  70%  {stroke-dashoffset:0;opacity:1}     /* hold solid */
  82%  {stroke-dashoffset:0;opacity:0}     /* fade the whole mark out, still fully drawn */
  100% {stroke-dashoffset:100;opacity:0}   /* reset the draw while invisible, then loop */
}
@keyframes moonLoop{
  0%   {stroke-dashoffset:100;opacity:0}   /* empty */
  36%  {stroke-dashoffset:100;opacity:0}   /* stay hidden until the coil arrives */
  38%  {stroke-dashoffset:100;opacity:1}   /* opacity up while still hidden by the dash */
  52%  {stroke-dashoffset:0;opacity:1}     /* moon completes the loop */
  70%  {stroke-dashoffset:0;opacity:1}     /* hold solid */
  82%  {stroke-dashoffset:0;opacity:0}     /* fade out together with the coil */
  100% {stroke-dashoffset:100;opacity:0}   /* reset while invisible, then loop */
}
/* A click/tap replays a single clean inscribe (added by Stimulus). Same rule:
   opacity rises only while the stroke is hidden by the dash, so nothing pops. */
.overcoil.replay .coil{animation:coilDraw 3.4s cubic-bezier(.45,0,.18,1) forwards;}
.overcoil.replay .moon{animation:moonDraw 3.4s cubic-bezier(.45,0,.18,1) forwards;}
@keyframes coilDraw{0%{stroke-dashoffset:100;opacity:0}4%{stroke-dashoffset:100;opacity:1}48%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes moonDraw{0%{stroke-dashoffset:100;opacity:0}44%{stroke-dashoffset:100;opacity:0}46%{stroke-dashoffset:100;opacity:1}64%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:1}}

/* ---------------- gap / push (lead line + cards) ---------------- */
.lead-line{font-family:var(--serif);font-style:italic;font-size:clamp(24px,5.6vw,40px);line-height:1.2;
  max-width:22ch;color:var(--gold-polished);}
.gap-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:44px;}
.gap-card{border-top:1px solid var(--rule);padding-top:20px;}
.gap-card h3{font-size:20px;margin-bottom:10px;color:var(--paper);font-weight:600;}
.gap-card p{font-size:16px;color:var(--muted-dark);margin:0;}
@media (min-width:760px){ .gap-grid{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:56px;} }

/* ---------------- contrast L vs D ---------------- */
.h-section{font-size:clamp(28px,6.2vw,52px);max-width:18ch;font-weight:500;}
.h-section--wide{max-width:22ch;} .h-section--narrow{max-width:20ch;}
.h-section .accent.l{color:var(--blued);} .h-section .accent.d{color:var(--gold-deep);}
.sub{font-size:17px;max-width:52ch;margin-top:22px;color:var(--muted-light);}
.panel-dark .sub{color:var(--muted-dark);}
@media (min-width:768px){ .sub{font-size:18px;} }
.vs{display:grid;grid-template-columns:1fr;gap:0;margin-top:44px;border:1px solid var(--rule);border-radius:18px;overflow:hidden;}
.vs > div{padding:28px 24px;}
.vs .l{background:transparent;border-bottom:1px solid var(--rule);}
.vs .d{background:var(--shadow);color:var(--paper);}
.vs .tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;}
.vs .d .tag{color:var(--gold-polished);opacity:1;}
.vs h4{font-size:24px;margin:10px 0 18px;font-weight:600;}
.vs ul{list-style:none;margin:0;padding:0;}
.vs li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:16px;}
.vs li svg{flex:none;width:18px;height:18px;margin-top:3px;}
.vs .l li{color:var(--muted-light);} .vs .l li svg{color:#9a9183;}
.vs .d li{color:var(--paper);} .vs .d li svg{color:var(--gold);}
@media (min-width:760px){ .vs{grid-template-columns:1fr 1fr;margin-top:60px;} .vs > div{padding:34px 32px;}
  .vs .l{border-bottom:none;border-right:1px solid var(--rule);} }

/* ---------------- push participation mock ---------------- */
.push-wrap{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;margin-top:44px;}
.push-points{list-style:none;margin:26px 0 0;padding:0;}
.push-points li{display:flex;gap:15px;padding:14px 0;border-bottom:1px solid var(--rule);}
.push-points li:last-child{border-bottom:none;}
.push-points b{display:block;font-weight:600;color:var(--paper);margin-bottom:3px;}
.push-points span{color:var(--muted-dark);font-size:15px;}
.push-points .ic{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;}
.push-points .ic svg{width:15px;height:15px;color:var(--gold-polished);}
.device{background:var(--shadow-raised);border:1px solid rgba(200,162,76,.26);border-radius:22px;padding:20px;
  box-shadow:0 36px 70px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(239,233,220,.04);}
.msg{background:rgba(239,233,220,.05);border:1px solid rgba(239,233,220,.1);border-radius:15px;padding:15px;}
.msg .from{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--rhodium);
  display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.msg .from svg{width:14px;height:14px;}
.msg .from .dot{width:6px;height:6px;border-radius:50%;background:var(--ruby);margin-left:2px;}
.msg .body{font-size:15.5px;color:var(--paper);}
.msg .body strong{color:var(--gold-polished);font-weight:600;}
.msg .tap{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;
  font-size:14px;color:var(--shadow);background:var(--gold);padding:9px 15px;border-radius:999px;}
.msg .tap svg{width:14px;height:14px;}
.flow-arrow{display:grid;place-items:center;color:var(--gold);margin:12px 0;}
.flow-arrow svg{width:22px;height:22px;}
.exp{background:rgba(239,233,220,.035);border:1px solid rgba(239,233,220,.09);border-radius:15px;padding:15px;}
.exp .vid{aspect-ratio:16/8;border-radius:11px;background:linear-gradient(135deg,#2A5896,#4A82C4);display:grid;place-items:center;margin-bottom:14px;}
.exp .vid svg{width:36px;height:36px;color:var(--gold-polished);}
.exp .q{font-size:14.5px;color:var(--paper);margin-bottom:12px;}
.exp .chips{display:flex;gap:8px;flex-wrap:wrap;}
.exp .chip{font-size:13px;color:var(--muted-dark);border:1px solid rgba(203,208,214,.32);border-radius:999px;padding:6px 12px;}
.exp .chip.sel{color:var(--paper);background:var(--flame);border-color:var(--flame);}
@media (min-width:860px){ .push-wrap{grid-template-columns:1.05fr .95fr;gap:60px;margin-top:54px;} .device{padding:22px;} }

/* ---------------- use cases ---------------- */
.uses{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px;}
.use{background:rgba(28,26,18,.02);border:1px solid var(--rule);border-radius:16px;padding:24px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.use:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 40px -28px rgba(28,26,18,.4);}
.use .who{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blued);margin-bottom:12px;}
.use h3{font-size:22px;margin-bottom:10px;font-weight:600;}
.use p{font-size:15px;color:var(--muted-light);margin:0;}
.quote{margin-top:48px;border-left:2px solid var(--gold-deep);padding:6px 0 6px 24px;max-width:60ch;}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,5vw,30px);line-height:1.34;margin:0;color:var(--ink);}
.quote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}
@media (min-width:760px){ .uses{grid-template-columns:repeat(2,1fr);gap:22px;margin-top:54px;} .use{padding:26px;} .quote{margin-top:60px;padding-left:28px;} }

/* ---------------- anxieties ---------------- */
.anx{display:grid;grid-template-columns:1fr;gap:1px;margin-top:44px;
  background:rgba(200,162,76,.2);border:1px solid rgba(200,162,76,.2);border-radius:18px;overflow:hidden;}
.anx .cell{background:var(--shadow-raised);padding:28px;}
.anx .fear{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.3;color:var(--gold-polished);margin-bottom:14px;}
.anx .fear em{color:var(--paper);}
.anx .ans{font-size:15.5px;color:var(--paper);margin:0;}
.anx .ans b{color:var(--gold-polished);font-weight:600;}
@media (min-width:760px){ .anx{grid-template-columns:repeat(2,1fr);margin-top:54px;} .anx .cell{padding:32px;} }

/* ---------------- studio ---------------- */
.steps{display:grid;grid-template-columns:1fr;gap:26px;margin-top:44px;}
.step{border-top:1px solid var(--rule);padding-top:18px;}
.step .num{font-family:var(--mono);font-size:12px;color:var(--gold-deep);letter-spacing:.12em;text-transform:uppercase;}
.step h3{font-size:22px;margin:12px 0 10px;font-weight:600;}
.step p{font-size:15px;color:var(--muted-light);margin:0;}
.studio-note{margin-top:42px;font-size:15.5px;color:var(--muted-light);max-width:54ch;}
.studio-note b{font-weight:600;color:var(--ink);}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);gap:28px;margin-top:54px;} .studio-note{margin-top:50px;} }

/* ---------------- final cta ---------------- */
.final{overflow:hidden;}
.final .watermark{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(70vw,500px);opacity:.05;pointer-events:none;z-index:0;}
.final h2{font-size:clamp(30px,7vw,62px);max-width:16ch;font-weight:500;}
.final p{font-size:17px;color:var(--muted-dark);max-width:44ch;margin:24px 0 0;}
.final .cta-row{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;}
.final .fine{margin-top:20px;font-size:14px;color:var(--muted-dark);}
.final .bezel{margin-top:52px;max-width:280px;}
@media (min-width:768px){ .final .watermark{opacity:.06;} .final p{font-size:18px;} }

/* ---------------- reveal ---------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}

/* ============================================================
   AUTH (Devise) — same brand, centered card on the rail ground
   ============================================================ */
.auth-wrap{min-height:calc(100dvh - 0px);display:flex;align-items:center;justify-content:center;
  padding:48px var(--gutter);background:var(--shadow);color:var(--paper);position:relative;overflow:clip;}
.auth-wrap::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 50% at 50% -10%, rgba(200,162,76,.08), transparent 60%);}
.auth-card{position:relative;z-index:1;width:100%;max-width:418px;}
.auth-mark{display:inline-block;width:46px;height:46px;margin:0 0 22px;}
.auth-mark .mark{width:100%;height:100%;}
.auth-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;}
.auth-card h1{font-size:clamp(26px,7vw,34px);font-weight:500;letter-spacing:-0.02em;max-width:16ch;}
.auth-sub{color:var(--muted-dark);margin:12px 0 0;font-size:15.5px;}
.auth-sub em{color:var(--gold-polished);}
.auth-form{margin-top:30px;display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rhodium);}
.field input[type=email],.field input[type=password],.field input[type=text]{
  width:100%;min-height:50px;padding:13px 15px;font-family:var(--sans);font-size:16px;color:var(--paper);
  background:rgba(239,233,220,.04);border:1px solid rgba(239,233,220,.16);border-radius:12px;transition:border-color .2s, background .2s;}
.field input::placeholder{color:#7d766a;}
.field input:focus{outline:none;border-color:var(--gold);background:rgba(239,233,220,.06);}
.field-hint{font-size:12.5px;color:var(--muted-dark);font-family:var(--sans);letter-spacing:0;text-transform:none;}
.field-check{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted-dark);}
.field-check input{width:17px;height:17px;accent-color:var(--gold);}
.auth-form .btn{width:100%;margin-top:4px;}
.auth-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:6px 18px;}
.auth-links a{color:var(--rhodium);text-decoration:none;font-size:14.5px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.auth-links a:hover{color:var(--gold-polished);border-color:rgba(230,200,120,.4);}
.auth-foot{margin-top:36px;display:flex;align-items:center;gap:10px;color:var(--muted-dark);font-size:13px;}
.auth-foot .brand{color:var(--muted-dark);} .auth-foot .brand .mark{width:18px;height:18px;}
/* flash + validation */
.flash{border-radius:12px;padding:13px 15px;font-size:14.5px;margin-bottom:18px;border:1px solid;}
.flash-notice{color:var(--gold-polished);background:rgba(200,162,76,.08);border-color:rgba(200,162,76,.3);}
.flash-alert{color:#E7A9B2;background:rgba(162,63,78,.12);border-color:rgba(162,63,78,.5);}
.form-errors{border:1px solid rgba(162,63,78,.5);background:rgba(162,63,78,.1);border-radius:12px;padding:14px 16px;margin-bottom:6px;}
.form-errors h2{font-size:14px;font-weight:600;color:#E7A9B2;margin:0 0 6px;letter-spacing:0;}
.form-errors ul{margin:0;padding-left:18px;color:#E7A9B2;font-size:14px;}

/* ---------------- reduced motion (index-specific) ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .coil,.moon{stroke-dashoffset:0 !important;opacity:1 !important;animation:none !important;}
  .node::after{animation:none !important;opacity:0 !important;}
  .hero-art::before{display:none;}
  .btn:hover,.use:hover{transform:none;}
  *{transition:none !important;}
}