/* ============================================================================
   theme.css — Cuefaro palette + brand components.

   The brand is the stage: the arch from the app icon, one cue light, its beam on the
   boards. Colours come from design/tokens/cuefaro.tokens.json (Paper/Ink/Blush, accent
   #365C85 / #93B5D9, beam #9DB4CE, GO/STOP). The STAGE surfaces (header, hero, the GO
   demo) stay dark in both themes, like the app's performance screen (design-regie.md,
   owner choice 1); everything else follows the visitor's theme.

   site.css loads AFTER this file, so an override of a shared class carries a `body`
   prefix to win on specificity. New components use the cf- prefix and never collide.
   ============================================================================ */

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#faf9f5; --bg-2:#f0eee6; --surface:#ffffff;
  --text:#141413; --text-soft:#57534d;
  --accent:#365c85; --accent-2:#2b4a6c; --accent-ink:#ffffff;
  --accent-text:#365c85;                 /* AA ≈6.6:1 on paper */
  --line:#e2ded3;
  --verified:#1e7f4f; --caution:#b4483c; --caution-text:#9a3a30;
  --chip-bg:#ffffff;
  --halo:none;
  --radius:16px; --radius-sm:12px;
  --display-tracking:-.032em;
  --rot:0deg;

  /* the stage: identical in both themes */
  --stage:#100e0d; --stage-2:#1a1614; --stage-raise:#24201d;
  --stage-text:#f4f2ed; --stage-soft:#bcb5ab; --stage-line:#332d29;
  --stage-accent:#93b5d9; --beam:#9db4ce;
  --go:#4cc38a; --go-ink:#06180f; --stop:#c7372f; --stop-ink:#ffffff;
}

/* ---- dark ---- */
[data-theme="dark"] {
  --bg:#141210; --bg-2:#1a1614; --surface:#211d1a;
  --text:#efeeec; --text-soft:#b4ada4;
  --accent:#93b5d9; --accent-2:#b0c9e4; --accent-ink:#141413;
  --accent-text:#93b5d9;
  --line:#322c28;
  --verified:#4cc38a; --caution:#f0a49a; --caution-text:#f0a49a;
  --chip-bg:#2a2522;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#141210; --bg-2:#1a1614; --surface:#211d1a;
    --text:#efeeec; --text-soft:#b4ada4;
    --accent:#93b5d9; --accent-2:#b0c9e4; --accent-ink:#141413;
    --accent-text:#93b5d9;
    --line:#322c28;
    --verified:#4cc38a; --caution:#f0a49a; --caution-text:#f0a49a;
    --chip-bg:#2a2522;
  }
}

/* Store CTAs: badges once a store is live, the coming-soon line until then (build.mjs). */
body [data-launch="prelaunch"] .launch-live{display:none}
body [data-launch="live"] .launch-prelaunch{display:none}
[data-store-badge="absent"],[data-store-badge="prelaunch"]{display:none}

/* Legal headings follow the website theme, including automatic OS dark mode. */
.legal-doc {
  --ink: var(--text);
}

/* ---- type ---- */
body{overflow-x:clip}
body h1{font-weight:780;font-size:clamp(2.6rem,1.6rem + 5.2vw,5.6rem);line-height:.98}
body h2{font-weight:740;font-size:clamp(2rem,1.45rem + 2.6vw,3.4rem);line-height:1.02}
body h3{font-weight:700}
/* CJK: no negative tracking, and break between phrases rather than inside a word */
:is(:lang(ja),:lang(zh),:lang(ko)) :is(h1,h2,h3,.cf-audience p,.cf-promises li){letter-spacing:0}
:lang(ja){word-break:auto-phrase}
:lang(ko){word-break:keep-all}
body .eyebrow{letter-spacing:.02em;text-transform:none;font-size:var(--step-0);font-weight:650;color:var(--accent-text)}
body .eyebrow::before{width:.55rem;height:.55rem;border-radius:50%;background:currentColor}

/* ---- buttons: the app's rounded blocks, not pills ---- */
body .btn,body .btn.primary{border-radius:14px;min-height:48px;padding:.8rem 1.25rem;font-weight:680}
body .btn.primary{box-shadow:none}

/* ---- the stage surface (full bleed out of main's padding) ---- */
.cf-stage{--text:var(--stage-text);--text-soft:var(--stage-soft);--line:var(--stage-line);
  --accent-text:var(--stage-accent);--surface:var(--stage-raise);
  position:relative;color:var(--text);background:var(--stage);
  margin-inline:calc(50% - 50vw);color-scheme:dark}

/* The header sits on the stage too: one dark proscenium from the top edge to the demo. */
body > header.nav{--text:var(--stage-text);--text-soft:var(--stage-soft);--line:var(--stage-line);
  --surface:var(--stage-raise);--accent-text:var(--stage-accent);
  --language-text:var(--stage-text);--language-surface:var(--stage-raise);
  --language-line:var(--stage-line);--language-accent:var(--stage-accent);
  color:var(--stage-text);position:relative;z-index:30;color-scheme:dark}
/* full-bleed stage behind the header; a pseudo-element, so the language menu is never clipped */
body > header.nav::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--stage)}
body > header.nav .brand>img{border-radius:8px}
body > header.nav nav:not([data-language-picker]) a,body footer .links a{display:inline-flex;align-items:center;min-height:44px}
body > header.nav{row-gap:0}
@media (max-width: 640px){
  body > header.nav nav:not([data-language-picker]){order:3;flex:1 0 100%;margin-left:0;gap:1.1rem;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body > header.nav nav:not([data-language-picker])::-webkit-scrollbar{display:none}
  body > header.nav nav:not([data-language-picker]) a{white-space:nowrap}
}

/* main already pads; a .wrap inside a non-stage section would indent twice */
main > section:not(.cf-stage) > .wrap{padding-inline:0}

/* ---- hero ---- */
body .cf-hero{padding:clamp(1.5rem,4vw,3.5rem) 0 clamp(2rem,5vw,4rem);overflow:hidden;isolation:isolate}
body .cf-hero::before{display:none}
.cf-hero-grid{align-items:end}
body .cf-hero h1{max-width:12ch;margin-bottom:var(--sp-3)}
body .cf-hero .lede{color:var(--stage-soft);max-width:34ch}
.cf-hero-copy{position:relative;z-index:2;padding-bottom:clamp(2rem,6vw,5rem)}
.cf-hero .note{max-width:36ch}
.cf-hero .app-langs{margin-top:var(--sp-2);color:var(--stage-soft);font-size:var(--step--1)}
.cf-hero .app-langs-lead{color:var(--stage-text);font-weight:650;margin-right:.4rem}
.cf-btn-go{background:var(--go)!important;color:var(--go-ink)!important}
.cf-btn-go::before{content:"";width:0;height:0;border-style:solid;border-width:.42em 0 .42em .7em;
  border-color:transparent transparent transparent currentColor}

/* The arch: the icon's proscenium, the cue light and its beam falling on the phone. */
.cf-arch{position:absolute;z-index:0;left:50%;bottom:calc(-1 * clamp(2rem,5vw,4rem));transform:translateX(-50%);
  width:min(34rem,175%);height:auto;color:#2a3a4d;pointer-events:none}
.cf-hero-phone{position:relative;padding-top:clamp(5rem,14vw,7rem)}
.cf-hero-phone > .device{z-index:1}
.cf-arch-light{filter:drop-shadow(0 0 18px #9db4ce) drop-shadow(0 0 42px rgba(157,180,206,.6))}
.cf-hero .wrap{position:relative;z-index:1}
.cf-hero-phone{align-self:end}
body .cf-hero-phone > .device.dv-iphone{--dv-scale:.7}
/* the arch frames the phone; the stage floor fades into the demo below */
.cf-hero::after{content:"";position:absolute;inset:auto 0 0;height:3rem;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--stage))}
.cf-link{display:inline-flex;align-items:center;min-height:48px;padding-inline:.4rem;font-weight:650;
  color:var(--stage-text);text-underline-offset:.25em}
.cf-link:hover{color:var(--stage-accent)}

@media (max-width: 860px){
  body .cf-hero-grid{grid-template-columns:1fr;gap:0}
  .cf-hero-copy{padding-bottom:var(--sp-3)}
  body .cf-hero h1{margin-bottom:var(--sp-2)}
  body .cf-hero .lede{margin-bottom:var(--sp-3)}
  .cf-arch{width:min(31rem,124%)}
  body .cf-hero-phone > .device.dv-iphone{--dv-scale:.54}
  .cf-hero-phone{padding-top:4.25rem;margin-top:var(--sp-3)}
  .cf-hero .note{margin-top:var(--sp-2)}
  .cf-hero .app-langs{margin-top:.4rem}
}

/* ---- audience line ---- */
.cf-audience{padding:clamp(3rem,8vw,6rem) 0}
.cf-audience p{font-family:var(--display);font-weight:720;letter-spacing:-.03em;
  font-size:clamp(1.7rem,1.2rem + 2.4vw,3rem);line-height:1.12;max-width:24ch;text-wrap:balance}

/* ---- the GO demo ---- */
.cf-try{padding:clamp(2.5rem,8vw,7rem) 0;
  background:radial-gradient(60rem 30rem at 50% -10%,rgba(157,180,206,.16),transparent 70%),var(--stage)}
.cf-try .wrap{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width: 900px){ .cf-try .wrap{grid-template-columns:.9fr 1.1fr} }
.cf-try-head h2{margin:var(--sp-2) 0 var(--sp-3);max-width:15ch}
.cf-try-head p{color:var(--stage-soft);max-width:38ch}

.cf-console{background:var(--stage-2);border:1px solid var(--stage-line);border-radius:28px;
  padding:clamp(.9rem,3vw,1.4rem);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.cf-cues{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.cf-cue{all:unset;box-sizing:border-box;cursor:pointer;width:100%;position:relative;overflow:hidden;
  display:grid;grid-template-columns:2.6rem 1fr auto;gap:.8rem;align-items:center;
  min-height:4.25rem;padding:.7rem .9rem;border-radius:16px;background:var(--stage-raise);
  border:2px solid transparent;color:var(--stage-text);transition:border-color .15s,background .15s}
.cf-cue:hover{background:#2c2723}
.cf-cue:focus-visible{outline:2px solid var(--stage-accent);outline-offset:2px}
.cf-cue-n{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;
  background:#332d29;font-weight:760;font-variant-numeric:tabular-nums}
.cf-cue-body{display:grid;gap:.1rem;min-width:0}
.cf-cue-body b{font-weight:680;font-size:var(--step-0);line-height:1.25}
.cf-cue-note{color:var(--stage-accent);font-size:var(--step--1);line-height:1.3}
.cf-cue-state{font-size:var(--step--1);font-weight:680;color:var(--stage-soft);text-align:end}
.cf-cue-state > span{display:none}
.cf-cue.is-standby .cf-s-standby,.cf-cue.is-playing .cf-s-playing{display:inline-flex;align-items:center;gap:.4rem}
.cf-cue.is-done:not(.is-standby):not(.is-playing) .cf-s-done{display:inline}
.cf-cue.is-standby{border-color:var(--stage-accent)}
.cf-cue.is-standby .cf-s-standby{color:var(--stage-accent)}
.cf-cue.is-standby .cf-s-standby::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent}
.cf-cue.is-playing .cf-s-playing{color:var(--go)}
.cf-cue.is-playing .cf-s-playing::before{content:"";border-style:solid;border-width:.35rem 0 .35rem .6rem;
  border-color:transparent transparent transparent currentColor}
.cf-cue.is-playing .cf-cue-n{background:var(--go);color:var(--go-ink)}
.cf-cue.is-done:not(.is-playing) .cf-cue-body b{color:var(--stage-soft)}
.cf-cue-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.cf-cue-bar i{display:block;height:100%;width:0;background:var(--go)}
.cf-cue.is-playing .cf-cue-bar i{animation:cf-progress var(--cue-seconds,3s) linear forwards}
@keyframes cf-progress{to{width:100%}}

.cf-transport{display:grid;grid-template-columns:3fr 2fr;gap:.6rem}
.cf-go,.cf-stop{all:unset;box-sizing:border-box;cursor:pointer;min-height:5.5rem;border-radius:20px;
  display:grid;place-content:center;justify-items:center;gap:.15rem;text-align:center;
  transition:transform .08s ease,filter .15s}
.cf-go{background:var(--go);color:var(--go-ink)}
.cf-go-word{font-weight:820;font-size:2.2rem;line-height:1;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:.5rem}
.cf-go-word::before{content:"";border-style:solid;border-width:.8rem 0 .8rem 1.3rem;
  border-color:transparent transparent transparent currentColor}
.cf-go-sub{font-size:var(--step--1);font-weight:600}
.cf-go-end,.cf-go-wait{display:none}
:is(.is-ended,.is-waiting) .cf-go-start{display:none}
.is-ended .cf-go-end,.is-waiting .cf-go-wait{display:inline}
.cf-go:disabled{cursor:default;background:#2c3a33;color:#9fb2a8}
.cf-stop{background:var(--stop);color:var(--stop-ink);font-weight:820;font-size:1.35rem;
  border:2px solid #f0a49a}
.cf-stop-mark{width:1.35rem;height:1.35rem;border-radius:4px;background:currentColor}
.cf-go:not(:disabled):active,.cf-stop:active{transform:scale(.97)}
.cf-go:focus-visible,.cf-stop:focus-visible{outline:3px solid var(--stage-text);outline-offset:3px}
.cf-msg{margin-top:.6rem;font-size:var(--step--1);color:var(--stage-soft);text-align:center}
@media (max-width: 480px){
  .cf-cue{grid-template-columns:2.6rem 1fr;row-gap:.25rem}
  .cf-cue-state{grid-column:2;text-align:start}
}
.cf-live{min-height:1.4em;margin-top:.8rem;font-size:var(--step--1);color:var(--stage-soft);text-align:center}

/* ---- features: one action, one real screen ---- */
body .cf-features{padding-top:clamp(4rem,10vw,8rem)}
.cf-section-head h2{max-width:16ch}
.cf-feature{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,4vw,4rem);align-items:center;
  padding-block:clamp(2rem,5vw,4rem);border-top:1px solid var(--line)}
.cf-feature-media{display:grid;place-items:center;background:var(--bg-2);border-radius:28px;
  border:1px solid var(--line);
  padding:clamp(1.6rem,5vw,3rem) 1rem 0;overflow:hidden;min-height:18rem}
.cf-feature-media > .device.dv-iphone{--dv-scale:.6;margin-bottom:-36%}
.cf-kicker{display:inline-block;font-weight:720;color:var(--accent-text);margin-bottom:.5rem}
.cf-feature-body h3{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:.8rem}
.cf-feature-body p{color:var(--text-soft);max-width:36ch}
.cf-feature-body p + p{margin-top:.8rem}
@media (min-width: 860px){
  .cf-feature{grid-template-columns:1fr 1fr}
  .cf-feature:nth-of-type(even) .cf-feature-media{order:2}
}

/* hand over: the iPad running order, with the frozen package card in front of it */
.cf-handover{position:relative;padding-bottom:0}
.cf-handover > .device.dv-ipad{--dv-scale:.62;margin-bottom:-18%;margin-right:-30%}
.cf-handover{min-height:24rem;place-items:start end}
.cf-handover > .cf-package{position:absolute;left:clamp(.8rem,4vw,2rem);bottom:clamp(.8rem,4vw,2rem);
  width:min(15rem,60%);font-size:.85rem;padding:.9rem .9rem .8rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);z-index:2}
.cf-handover .cf-package li{padding:.4rem 0}
@media (max-width: 480px){ .cf-handover > .device.dv-ipad{--dv-scale:.5} }

/* hits: the app's hit buttons, drawn in HTML */
.cf-feature-hits .cf-feature-media,.cf-feature-package .cf-feature-media:not(.cf-handover){
  background:var(--stage-2);padding:clamp(1.6rem,5vw,3rem);place-content:center}
.cf-hits{display:flex;flex-wrap:wrap;gap:.6rem;max-width:22rem;justify-content:center}
.cf-hit{display:inline-flex;align-items:center;gap:.55rem;min-height:3rem;padding:.6rem 1.1rem;
  border-radius:999px;background:#2c3440;color:var(--stage-text);font-weight:640}
.cf-hit b{font-variant-numeric:tabular-nums;color:var(--stage-accent)}
.cf-hit-dim,.cf-hit-fade{background:var(--stage-raise)}

/* package: the frozen version card */
.cf-package{width:min(22rem,100%);background:var(--stage-raise);color:var(--stage-text);
  border-radius:20px;padding:1.2rem 1.2rem 1rem;border:1px solid var(--stage-line)}
.cf-package-head{display:flex;align-items:center;gap:.6rem;font-weight:680;margin-bottom:.8rem}
.cf-package-check{width:1.35rem;height:1.35rem;border-radius:50%;background:var(--stage-accent);flex:none;
  position:relative}
.cf-package-check::after{content:"";position:absolute;left:.42rem;top:.24rem;width:.35rem;height:.65rem;
  border:solid var(--stage);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cf-package ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.cf-package li{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;
  border-top:1px solid var(--stage-line);color:var(--stage-soft);font-size:var(--step--1)}
.cf-package li::after{content:"";width:.4rem;height:.75rem;border:solid var(--stage-accent);
  border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px)}
.cf-package-devices{display:flex;gap:.4rem;margin-top:.9rem;flex-wrap:wrap}
.cf-package-devices span{font-size:var(--step--1);padding:.3rem .65rem;border-radius:8px;
  background:#332d29;color:var(--stage-text)}

/* ---- promises ---- */
.cf-promises{padding:clamp(1.5rem,5vw,4rem) 0 clamp(3rem,8vw,6rem)}
.cf-promises ul{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr))}
.cf-promises li{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);line-height:1.2;letter-spacing:-.02em;
  font-weight:600;color:var(--text-soft);padding-top:1rem;border-top:2px solid var(--text)}
.cf-promises li b{color:var(--text);font-weight:760}

/* ---- pricing: a ticket with its stub ---- */
.cf-pricing{padding:clamp(2rem,6vw,5rem) 0}
.cf-ticket{--notch:1.1rem;display:grid;grid-template-columns:1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow-2)}
.cf-ticket-main{padding:clamp(1.6rem,5vw,3rem)}
.cf-ticket-label{display:inline-block;font-weight:720;color:var(--accent-text);margin-bottom:.7rem}
.cf-ticket-main h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);max-width:16ch;margin-bottom:.9rem}
.cf-ticket-main p{color:var(--text-soft);max-width:38ch}
.cf-ticket-main ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem}
.cf-ticket-main li{display:flex;gap:.65rem;align-items:baseline}
.cf-ticket-main li::before{content:"";flex:none;width:.4rem;height:.75rem;border:solid var(--accent-text);
  border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.cf-ticket-stub{position:relative;padding:clamp(1.6rem,5vw,3rem);background:var(--stage);color:var(--stage-text);
  display:grid;align-content:center;gap:.4rem;
  --text:var(--stage-text);--text-soft:var(--stage-soft);--line:var(--stage-line)}
.cf-ticket-stub::before{content:"";position:absolute;left:0;right:0;top:-1px;height:0;
  border-top:2px dashed var(--line)}
.cf-ticket-small{color:var(--stage-soft);font-weight:620}
.cf-ticket-amt{font-weight:800;font-size:clamp(2.8rem,2rem + 3vw,4rem);letter-spacing:-.04em;line-height:1}
.cf-launch{margin-top:.8rem}
.cf-launch .launch-live{display:grid;gap:.6rem}
.cf-launch .launch-live .btn{justify-content:center}
.cf-launch .note{color:var(--stage-soft);margin-top:.2rem}
@media (min-width: 860px){
  .cf-ticket{grid-template-columns:1.5fr 1fr}
  .cf-ticket-stub::before{left:-1px;right:auto;top:0;bottom:0;height:auto;width:0;border-top:0;
    border-left:2px dashed var(--line)}
}

/* ---- faq + trust strip ---- */
body .faq{max-width:46rem;margin-inline:0}
body footer .inner{padding-inline:clamp(1.1rem,4vw,2.5rem)}
body footer .inner{flex-wrap:wrap;row-gap:.25rem}
body footer .links{flex-wrap:wrap;column-gap:1.2rem;row-gap:0}
body .faq details{border-radius:16px}
body .faq summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
body > header.nav .brand{min-height:44px}
body .strip{border-color:var(--line);background:transparent;margin-top:var(--sp-4)}
body .strip .wrap{padding-block:var(--sp-3)}
body .strip .item{display:block;padding-block:.35rem;font-size:var(--step--1);color:var(--text-soft)}
body .strip .item .ic{display:inline;margin-right:.45rem;color:var(--accent-text);font-size:.6em;vertical-align:.2em}
body .faq{padding-bottom:var(--sp-4)}

/* ---- motion: the cue light comes up once, reveals on scroll where supported ---- */
@media (prefers-reduced-motion: reduce){
  .cf-cue.is-playing .cf-cue-bar i{animation:none;width:100%}
  .cf-go:not(:disabled):active,.cf-stop:active{transform:none}
  body .btn:hover{transform:none}
}
@media (prefers-reduced-motion: no-preference){
  .cf-arch-light{animation:cf-light-up 1.2s .3s ease-out both}
  .cf-arch-beam{animation:cf-light-up 1.6s .6s ease-out both}
  @keyframes cf-light-up{from{opacity:0}}
  @supports (animation-timeline: view()){
    .cf-feature,.cf-promises li,.cf-ticket{animation:cf-rise linear both;
      animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes cf-rise{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:none}}
  }
}