/* R294/R317 Claude candidate — presentation layer over the parent's page.css.
   COPY LOCK: this file changes paint, scale, spacing and state only. Every word,
   label and its case render exactly as the approved page (tools/copy-lock-guard.py).
   Desktop and mobile are composed separately below; the travelling cube reads the
   final measured geometry (.cube-rest / obstacles), so these sizes ARE its rests. */

:root{
 --ink:#151915; --bezel:#161a15; --paper:#fafbf8; --muted:#4f5a4a;
 --lime:#d7ff62; --lime-deep:#5d8a12; --lime-glow:rgba(190,255,70,.30);
}

/* ================================================================ HERO ======= */
/* WHY: the hero must answer "what is this / why care / what next" in one glance
   (SEO+conversion clarity) while the cube entrance owns the right half. A bolder,
   tighter headline and a crisp category tag make the three answers land faster.
   Height-aware sizing keeps the whole promise inside the human's real 1047x557
   laptop viewport instead of pushing the CTA below the fold. */
.hero h1{font-weight:760;letter-spacing:-.047em;line-height:.97}
.hero .category{
 display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;
 padding:7px 15px 7px 11px;margin-bottom:26px;border:1.5px solid var(--bezel);border-radius:999px;
 font-size:16px;font-weight:650;letter-spacing:0;line-height:1.25;color:var(--ink);background:rgba(255,255,255,.55)
}
.hero .category::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--bezel),0 0 10px var(--lime-glow);flex:none}
.hero p{color:var(--muted)}
.hero .check-it{font-weight:650;border-bottom-width:2px}
@media(min-width:761px){
 .hero{min-height:min(760px,calc(100vh - 118px));padding-top:clamp(28px,6vh,80px);padding-bottom:clamp(40px,8vh,96px)}
 .hero h1{font-size:clamp(44px,min(5.35vw,10.4vh),86px)}
 .hero p{font-size:clamp(18px,1.45vw,22px);max-width:34ch;margin:clamp(18px,3.2vh,30px) 0 clamp(22px,4vh,36px)}
}

/* ============================================================ STORY INDEX ==== */
/* WHY: the seven feature links were a flat run of small text. Each now carries
   the brand's own bullet — the same black cube with the neon check that becomes
   every hook's bullet — so the index previews the page's chaos→order grammar and
   gives real tap targets. Same links, anchors, words and order. */
.feature-nav a{display:inline-flex;align-items:center;gap:10px;border-radius:12px;border:1px solid transparent;
 color:#1b211a;font-weight:550;transition:background-color .2s ease,border-color .2s ease}
.feature-nav a::before{content:"";flex:none;width:22px;height:22px;background:url(assets/cube.png) center/contain no-repeat;
 filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.feature-nav a:hover{background:#eef4e2;border-color:#dce7c6}
@media(min-width:761px){
 .feature-nav{max-width:1360px;gap:6px 4px;padding:18px 20px;font-size:16px;border-color:#e0e5d8}
 .feature-nav a{padding:9px 14px 9px 10px}
}
.demo-disclosure{color:#6a7562;letter-spacing:.005em}

/* ========================================================== DEMO SECTIONS ==== */
/* The hook+bullet block is the chapter title; the real product stays dominant.
   WHY bigger bullet: the human asked for "a larger bullet point" (T778) and the cube
   is the page's chaos→order symbol; at 88px beside a 5-line hook it read as an icon.
   The hook column widens slightly so hooks break into fewer, stronger lines. */
@media(min-width:761px){
 .demo-section{--bullet:clamp(94px,7.9vw,122px);--hookcol:clamp(272px,27vw,400px);
  /* WHY [908],[922]: the travelling stroke needs real room to circle the hook
     between the page edge and the demo; the demo stays dominant. */
  padding-top:clamp(104px,13vh,140px);padding-bottom:clamp(104px,13vh,140px);gap:clamp(56px,6.6vw,108px)}
 .demo-section:nth-child(n){grid-template-columns:minmax(0,1fr) var(--hookcol)}
 .demo-section:nth-child(even){grid-template-columns:var(--hookcol) minmax(0,1fr)}
 .demo-section:nth-child(n) .demo-copy{grid-template-columns:var(--bullet) minmax(0,1fr);gap:14px 18px;padding-top:26px}
 .demo-section .cube-rest{width:var(--bullet);height:var(--bullet)}
 .demo-copy h2{font-size:clamp(28px,2.85vw,43px);line-height:1.04;letter-spacing:-.036em;font-weight:720}
}

/* "Coming soon" becomes a legible status chip: same words, clearer status. */
.demo-copy .coming{justify-self:start;display:inline-flex;align-items:center;gap:7px;width:max-content;
 padding:5px 12px 5px 9px;border-radius:999px;background:var(--bezel);color:#e6f5c8;
 font-size:12.5px;font-weight:650;letter-spacing:.02em;line-height:1.3}
.demo-copy .coming::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px #b8ff3a}

/* Real product frame: one dark bezel continuous with the native player bar. */
.native-demo:has(iframe){border:3px solid var(--bezel);border-radius:18px;background:var(--bezel);
 box-shadow:0 6px 0 var(--bezel),0 24px 46px rgba(22,26,21,.15);transition:box-shadow .5s ease}
.native-demo:has(iframe) iframe{background:#fff}

/* ============================================================ FOCUS MODE ===== */
/* WHY: when a visitor presses Play, the real product is the whole show. The rest
   of the page steps back (opacity only: no filter, no layout change, so cube rests
   and native geometry are untouched) and the live frame gains a neon halo that
   matches the cube's check. Ends the moment playback pauses, finishes, leaves the
   viewport or another demo takes the single audio lease (state from the frame). */
.hero,.feature-nav,.demo-disclosure,.demo-section,.trial,.faq,footer,.site-header{transition:opacity .45s ease}
html.ops-live .hero,html.ops-live .feature-nav,html.ops-live .demo-disclosure,html.ops-live .trial,
html.ops-live .faq,html.ops-live footer,html.ops-live .demo-section:not(.is-live){opacity:.32}
html.ops-live .demo-section.is-live .native-demo:has(iframe){
 box-shadow:0 6px 0 var(--bezel),0 0 0 7px rgba(215,255,98,.26),0 30px 70px rgba(22,26,21,.24)}
@media(prefers-reduced-motion:reduce){.hero,.feature-nav,.demo-disclosure,.demo-section,.trial,.faq,footer,.site-header,.native-demo:has(iframe){transition:none}}

/* ================================================================ OFFER ====== */
.trial h2{font-weight:760;letter-spacing:-.045em}
.trial .cta{box-shadow:0 5px 0 #98b948,0 0 34px rgba(190,255,70,.28)}

/* =============================================================== MOBILE ====== */
/* Composed for the phone's tall narrow canvas (not a shrunk desktop): the hook and
   its bullet share one row above a full-width real demo; the bullet stays centred
   on the WHOLE hook (T805) and grows 88→96px; demo frames keep full width. */
@media(max-width:760px){
 .hero h1{font-size:clamp(40px,11.2vw,54px)}
 .hero .category{font-size:15px;margin-bottom:20px}
 .feature-nav{padding:12px 16px;gap:2px 0;font-size:15.5px}
 .feature-nav a{min-height:44px;padding:8px 8px 8px 4px;width:100%}
 .demo-copy{grid-template-columns:84px minmax(0,1fr);column-gap:12px;padding:0 48px 0 12px}
 /* WHY [908],[922]: the hook needs breathing room for the travelling stroke to pass
    between its last line and the demo without touching words; the demo stays full
    width and dominant, the hook keeps its size. */
 .demo-section{row-gap:86px}
 .demo-copy .cube-rest{width:84px;height:84px}
 /* R344 WHY: the ring now orbits INSIDE the screen (human: "better circle the hooks"): 4% smaller hooks keep every line
    >=10px inside the stroke on a 412px phone; +12px row gap lets its lower arc pass between the words and the demo. */
 .demo-copy h2{font-size:clamp(29px,8.55vw,35.5px);line-height:1.05;letter-spacing:-.032em;font-weight:720}
 .native-demo:has(iframe){border-radius:16px;box-shadow:0 4px 0 var(--bezel),0 14px 28px rgba(22,26,21,.14)}
}

/* R335 WHY: the journey now ENDS as a big cube in the empty band between the last demo and
   the dark trial panel (human: "finishes at the empty place where I put it"). On desktop that
   band was only 204-217px against a 451-540px hero cube, so the finale could not read as big.
   Give it ~56vh; phones keep their existing 359px band, which already fits a hero-size cube. */
@media(min-width:761px){#trial{margin-top:max(100px,calc(56vh - clamp(104px,13vh,140px)))}}

/* R339 WHY: desktop drew the cube layer ABOVE the page and rewrote a clip-path every frame that
   cut a hole around every text, control and demo box. Pieces vanished at invisible rectangle
   edges (human: "cutting off in strange ways around text and also other places") and the path
   cost paint work every frame. Use the phone's accepted R254 layering on desktop too: glyphs and
   the opaque demo frames occlude pieces naturally; only a deliberate burst rises over content. */
@media(min-width:761px){
 #sculpture-root{z-index:1}
 .hero-copy,.demo-copy,.native-demo,.site-header,.feature-nav,.demo-disclosure,.trial,.faq,footer{position:relative;z-index:2}
 #sculpture-root[data-cube-burst="true"]{z-index:4}
}