/* ============================================================================
   AutoSmile pilot — CINEMA LAYER (v10)
   ----------------------------------------------------------------------------
   Loaded after pilot.css and refinements.css. Everything here is additive; no
   rule in the two files below it is deleted.

   What this layer is: the motion and material language of the cinematic hero
   the founder sent — blur-resolve headline, a card that rises over the page and
   takes the full frame, a device flying in from depth, glass badges, dynamic
   mouse sheen, film grain — rebuilt in plain CSS/JS.

   What this layer is NOT: the component itself. That file is React + Tailwind +
   GSAP + shadcn. The brief says keep the plain HTML/CSS/JS structure and do not
   add React, Tailwind or a heavy framework without reason, so none of the three
   is installed. Scroll is driven by one shared rAF loop, as everywhere else.

   Brand law still holds: painted grounds stay {#FCFAFB, #FFFFFF, #E11D48}.
   The reference card's navy is replaced by the brand red; its silver-on-dark
   type becomes white-on-red. Gradients here are white-alpha over one red, so
   no section ever carries two reds.
   ========================================================================== */

:root{
  --glass:rgba(255,255,255,.12);
  --glass-line:rgba(255,255,255,.30);
  --cine-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 1. dot pattern ------------------------------------------------
   A dot grid masked to an ellipse so it fades out before it reaches any edge.
   `currentColor` on the ::before means each host picks its own dot colour. */
.dots{position:relative;isolation:isolate}
.dots::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  color:var(--red);opacity:.30;
  background-image:radial-gradient(currentColor .9px,transparent 1px);
  background-size:var(--dot-gap,24px) var(--dot-gap,24px);
  -webkit-mask-image:radial-gradient(ellipse var(--dot-w,70%) var(--dot-h,64%) at var(--dot-x,50%) var(--dot-y,42%),#000 0%,rgba(0,0,0,.55) 46%,transparent 74%);
  mask-image:radial-gradient(ellipse var(--dot-w,70%) var(--dot-h,64%) at var(--dot-x,50%) var(--dot-y,42%),#000 0%,rgba(0,0,0,.55) 46%,transparent 74%);
}
.dots > *{position:relative;z-index:1}
.dots.on-red::before{color:#fff;opacity:.24}

/* ---------- 2. film grain -------------------------------------------------
   feTurbulence rendered once as a data URI; no request, no library. */
.grain{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;border-radius:inherit;
  background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* ---------- 3. circular spinning text ------------------------------------- */
.spin{display:block;width:var(--spin-size,138px);height:var(--spin-size,138px);position:relative;flex:0 0 auto;
  /* The svg inside is a square that CSS rotates, so its axis-aligned box grows
     to 1.41x the circle and pushed the page sideways on narrow screens. The
     ring is inscribed in the square, so clipping costs nothing visually. */
  overflow:hidden}
.spin svg{width:100%;height:100%;display:block;animation:spin-turn 26s linear infinite;transform-origin:50% 50%}
.spin.rev svg{animation-direction:reverse}
.spin text{
  font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  fill:currentColor;
}
.spin-core{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.spin-core img{width:34%;height:auto;display:block}
.spin-core svg{width:30%;height:auto;animation:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin-turn{to{transform:rotate(360deg)}}

/* ---------- 4. the opening frame IS the hero ------------------------------
   The founder asked for the cinematic sequence to be the entry to the page, so
   the old hero section is gone and its headline, lead and calls to action live
   in the first frame of the act. The blur-resolve and the left-to-right wipe
   are the reference component's two entrance moves, done with transition. */
/* The opening frame carries the amblem alone. The ring that used to sit behind
   it was removed on the founder's call — one mark, no apparatus. */
.orb-mini{position:relative;width:clamp(56px,5.6vw,76px);aspect-ratio:1;margin:0 auto 26px;display:grid;place-items:center}
.orb-mini-core{position:relative;display:grid;place-items:center;width:100%}
.orb-mini-core img{width:100%;height:auto;display:block}
.cine-open h1{
  color:var(--red);margin:16px auto 0;max-width:17ch;
  font-size:clamp(36px,5.3vw,82px);
}
.cine-open .lead{margin:26px auto 0;max-width:56ch;font-size:17.5px}
.cine-open .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
/* ONE entrance, not two. The opening had a blur-resolve on two lines and a
   left-to-right wipe on the third, which read as two different pages arguing.
   Every line now rises out of its own mask on the same curve, staggered — the
   same move every other heading on the site already uses, so the page opens in
   its own language instead of a borrowed one. */
.js .cine-open h1 .rl > i{
  transform:translateY(106%);
  transition:transform .92s var(--cine-ease);
  transition-delay:var(--d,0s);
}
.js .is-in .cine-open h1 .rl > i{transform:none}
.js .cine-open h1 .rl.wipe > i{clip-path:none}
/* The supporting lines follow the headline on the same curve and the same
   stagger — they rise, they do not fade in from somewhere else. */
.js .cine-open .orb-mini,
.js .cine-open .eyebrow,
.js .cine-open .lead,
.js .cine-open .hero-cta,
.js .cine-open .cine-hint,
.js .cine-open .crumb,
.js .cine-open .plock{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--cine-ease),transform .7s var(--cine-ease);
}
.js .is-in .cine-open .orb-mini{transition-delay:0s}
.js .is-in .cine-open .crumb{transition-delay:.02s}
.js .is-in .cine-open .plock{transition-delay:.06s}
.js .is-in .cine-open .eyebrow{transition-delay:.06s}
.js .is-in .cine-open .lead{transition-delay:.46s}
.js .is-in .cine-open .hero-cta{transition-delay:.54s}
.js .is-in .cine-open .cine-hint{transition-delay:.64s}
.js .is-in .cine-open .orb-mini,
.js .is-in .cine-open .eyebrow,
.js .is-in .cine-open .lead,
.js .is-in .cine-open .hero-cta,
.js .is-in .cine-open .cine-hint,
.js .is-in .cine-open .crumb,
.js .is-in .cine-open .plock{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .cine-open h1 .rl > i,
  .js .cine-open .orb-mini,.js .cine-open .eyebrow,.js .cine-open .lead,
  .js .cine-open .hero-cta,.js .cine-open .cine-hint,
  .js .cine-open .crumb,.js .cine-open .plock{transition-duration:.01ms}
}
.cine-where{
  margin:30px auto 0;max-width:52ch;font-size:14.5px;line-height:1.6;text-align:left;
  border-left:2px solid var(--red);padding-left:20px;
}
.cine-where b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:7px}

/* ---------- 5. the cinematic act ------------------------------------------
   A pinned stage. One card rises over the opening line, grows to the full
   frame, presents the device, then pulls back and lifts away into the closing
   line. Four unitless progress values are written on .cinewrap by cinema.js;
   every transform below reads them, so CSS owns all the geometry. */
.cinewrap{
  position:relative;height:400vh;background:var(--paper);
  --rise:1;--open:0;--grow:1;--in:1;--out:0;--exit:0;
}
.cinepin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1500px;
}

/* -- the two lines that live behind the card -- */
.cine-back{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 var(--gutter);
}
.cine-open,.cine-close{grid-area:1/1;max-width:940px;width:100%}
.cine-open .eyebrow,.cine-close .eyebrow{justify-content:center}
.cine-open h2,.cine-close h2{color:var(--red);margin-top:18px}
.cine-close p{margin:22px auto 0;max-width:52ch;font-size:17px;line-height:1.62}
.cine-close .fcta,.cine-close .hero-cta{justify-content:center;margin-top:30px}
.js .cine-open{
  opacity:var(--open);pointer-events:none;
  transform:scale(calc(1 + .13 * (1 - var(--open))));
  filter:blur(calc((1 - var(--open)) * 18px));
}
.js .cine-close{
  opacity:var(--out);
  transform:scale(calc(.86 + .14 * var(--out)));
  filter:blur(calc((1 - var(--out)) * 22px));
  pointer-events:none;
}
.js .cinewrap[data-act="open"] .cine-open{pointer-events:auto}
.js .cinewrap[data-act="close"] .cine-close{pointer-events:auto}

/* -- the card -- */
.cine-card{
  position:relative;z-index:2;overflow:hidden;background:var(--red);color:#fff;
  width:calc(88vw + (100vw - 88vw) * var(--grow));
  height:calc(82vh + (100vh - 82vh) * var(--grow));
  border-radius:calc(38px * (1 - var(--grow)));
  transform:
    translateY(calc((1 - var(--rise)) * 116vh))
    translateY(calc(var(--exit) * -128vh));
  will-change:transform,width,height;
}
.cine-card .eyebrow,.cine-card h2,.cine-card h3{color:#fff}
/* A fixed top-light, not a cursor-follower. */
.cine-sheen{
  position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 78% at 50% -8%,rgba(255,255,255,.15),transparent 62%);
}
/* The card is 82vh when pulled back and 100vh when it owns the frame, so the
   contents are measured against the viewport, never against the card. A
   percentage here could not resolve (the row sizes from content) and the phone
   fell back to its aspect ratio, which is what was cutting the copy off. */
.cine-inner{
  position:relative;z-index:7;height:100%;min-height:0;
  width:min(1240px,100% - 2 * var(--gutter));margin-inline:auto;
  padding-block:clamp(22px,4vh,54px);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.16fr) minmax(0,.92fr);
  align-items:center;gap:clamp(16px,2.4vw,44px);
}

/* -- left copy / right wordmark -- */
.cine-left,.cine-right{opacity:var(--in)}
.js .cine-left{transform:translateX(calc((1 - var(--in)) * -46px))}
.js .cine-right{transform:translateX(calc((1 - var(--in)) * 46px))}
.cine-left .eyebrow{color:rgba(255,255,255,.72);margin-bottom:16px}
.cine-left h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.7vw,40px);line-height:1.13;letter-spacing:-.025em;margin:0;color:#fff}
.cine-left p{margin:18px 0 0;font-size:15.5px;line-height:1.66;color:rgba(255,255,255,.86);max-width:34ch}
.cine-left ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.cine-left li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.9)}
.cine-left li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:1.5px;background:#fff;opacity:.75}
.cine-right{justify-self:stretch}
.cine-right .eyebrow{color:rgba(255,255,255,.72);margin-bottom:20px}
.cine-facts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cine-facts li{padding:18px 0;border-top:1px solid rgba(255,255,255,.26)}
.cine-facts li:last-child{border-bottom:1px solid rgba(255,255,255,.26)}
.cine-facts b{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:#fff}
.cine-facts span{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.8)}

/* -- the device stage inside the card -- */
.cine-stage{position:relative;height:100%;min-height:0;display:grid;place-items:center;perspective:1100px}
.cine-phone{
  position:relative;height:min(58vh,540px);aspect-ratio:9/19.5;
  transform-style:preserve-3d;will-change:transform;
}
.js .cine-phone{
  opacity:var(--in);
  transform:
    translateY(calc((1 - var(--in)) * 230px))
    rotateX(calc((1 - var(--in)) * 44deg))
    rotateY(calc((1 - var(--in)) * -26deg))
    scale(calc(.62 + .38 * var(--in)));
}
.cine-tilt{height:100%}
.cine-screen{
  position:relative;height:100%;border:6px solid #24212a;border-radius:38px;background:#fff;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 42px 84px -26px rgba(52,10,26,.55),0 14px 26px -12px rgba(52,10,26,.4);
}
.cine-screen .phone-status{background:#fff;border:0;height:7.6%;min-height:26px}
.cine-shot{flex:1 1 auto;min-height:0;width:100%;object-fit:cover;object-position:50% 0;display:block}
.cine-screen::after{
  content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:32%;height:4px;border-radius:99px;background:#24212a;opacity:.55;z-index:3;
}

/* -- glass badges -- */
/* Brand dress, not generic glass: the same white card, red hairline and red
   type the rest of the site uses, lifted off the red ground by a soft shadow. */
.cine-badge{
  position:absolute;z-index:6;display:flex;align-items:center;gap:13px;
  padding:13px 17px;border-radius:14px;
  background:#fff;border:1px solid rgba(225,29,72,.18);
  box-shadow:0 26px 48px -22px rgba(52,10,26,.5);
  opacity:var(--in);white-space:nowrap;
}
.js .cine-badge{transform:translateY(calc((1 - var(--in)) * 74px)) scale(calc(.8 + .2 * var(--in)))}
.cine-badge .bx{flex:0 1 auto;min-width:0}
.cine-badge b{display:block;font-family:var(--display);font-size:14px;font-weight:800;color:var(--red);letter-spacing:-.015em}
.cine-badge .bx > span{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.cine-badge .bi{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--red);color:#fff;
}
.cine-badge .bi svg{width:18px;height:18px; fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cine-badge.b1{top:13%;left:-10%}
.cine-badge.b2{bottom:16%;right:-11%}



/* -- the scroll hint on the opening line -- */
.cine-hint{
  display:inline-flex;align-items:center;gap:10px;margin-top:34px;
  font:600 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red);
}
.cine-hint i{display:block;width:1px;height:34px;background:var(--line-2);position:relative;overflow:hidden}
.cine-hint i::after{content:"";position:absolute;inset:0;background:var(--red);animation:hint-run 1.9s var(--cine-ease) infinite}
@keyframes hint-run{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 6. iMac -------------------------------------------------------
   The devices scene asked for a desktop, not a laptop. Thin bezel, chin, wedge
   neck and foot — drawn in neutral hardware greys so the only red on screen is
   the interface itself, matching the direction refinements.css already set. */
/* The machine is drawn from ONE number: the display width, written on the
   element by cinema.js. Everything else is a ratio of it, which is why it now
   reads as an iMac instead of standing up like a picture frame.

   The mistake before was arithmetic, not taste: the browser chrome was being
   added BELOW the display instead of living on it. A 16:10 panel plus 82px of
   toolbar plus a chin plus a stand made the whole thing nearly square. Here the
   display box is 16:10 in total and the Safari window sits inside it, the way a
   window sits on a real screen — total height lands at 0.83 x width, which is
   what a 24" iMac actually measures. */
.imac{
  display:flex;flex-direction:column;align-items:center;min-width:0;
  width:var(--iw,560px);height:auto;
}
.imac-body{
  /* A definite height, not an aspect-ratio: the 16:10 proof inside is a flex
     item and its own ratio would otherwise win and stretch the panel. */
  width:100%;height:calc(var(--iw,560px) / 1.6);box-sizing:border-box;
  padding:calc(var(--iw,560px) * .015);padding-bottom:0;
  display:flex;flex-direction:column;
  border-radius:calc(var(--iw,560px) * .022) calc(var(--iw,560px) * .022) 2px 2px;
  background:linear-gradient(180deg,#efedf0,#e4e2e6);
  border:1px solid #d3d0d5;border-bottom:0;
  box-shadow:0 34px 66px -34px rgba(48,35,46,.44);
}
.imac-body .win{
  /* .win is a plain block elsewhere; inside the machine it becomes a column so
     the display can take the height the panel has left after the toolbar. */
  flex:1 1 auto;min-height:0;height:auto;width:auto;display:flex;flex-direction:column;
  border-radius:calc(var(--iw,560px) * .012);box-shadow:none;border-color:#dedbdf;
}
/* The display fills the panel; the 1280px proof inside is out of flow so it
   cannot push the frame around, and pilot.js scales it to the frame width. */
.imac .mac-screen{position:relative;flex:1 1 auto;min-height:0;height:auto;width:auto;aspect-ratio:auto;overflow:hidden}
.imac .mac-scale{position:absolute;left:0;top:0}
.imac-chin{
  flex:0 0 auto;height:calc(var(--iw,560px) * .075);
  margin:calc(var(--iw,560px) * .012) calc(var(--iw,560px) * -.015) 0;
  background:linear-gradient(180deg,#eae8ec,#dedbe0);
  border:1px solid #d3d0d5;border-top:0;
  border-radius:0 0 calc(var(--iw,560px) * .01) calc(var(--iw,560px) * .01);
}
.imac-neck{
  flex:0 0 auto;width:calc(var(--iw,560px) * .215);height:calc(var(--iw,560px) * .10);
  background:linear-gradient(90deg,#cbc8ce,#e9e7eb 36%,#d2cfd5);
  clip-path:polygon(19% 0,81% 0,100% 100%,0 100%);
}
.imac-foot{
  flex:0 0 auto;width:calc(var(--iw,560px) * .40);height:calc(var(--iw,560px) * .019);
  border-radius:0 0 calc(var(--iw,560px) * .01) calc(var(--iw,560px) * .01);
  background:linear-gradient(180deg,#e0dde3,#c7c4cb);
  box-shadow:0 16px 26px -14px rgba(48,35,46,.5);
}

/* ---------- 7. Safari, light -----------------------------------------------
   Closer to the real light-theme window: sidebar toggle, back/forward, a pill
   address field with lock and reader, share / new tab / tab overview. No Apple
   mark, no metal, no photorealism. */
.win{padding-top:46px}
.win-bar{
  height:46px;background:linear-gradient(180deg,#fbfafb,#f1eff2);
  border-bottom:1px solid #e3e0e4;padding:0 13px;gap:12px;
}
.win-left,.win-right{gap:9px}
.win-dots i{width:11px;height:11px}
.win-dots i:nth-child(1){background:#e5695c}
.win-dots i:nth-child(2){background:#e2b040}
.win-dots i:nth-child(3){background:#66bf58}
.win-sep{width:1px;height:17px;background:#e0dde1;flex:0 0 auto}
.win-url{
  height:28px;padding:0 14px;border-radius:8px;background:#fff;border:1px solid #e3e0e4;
  font:500 12.5px/28px var(--body);letter-spacing:0;text-transform:none;color:#6c6672;
  box-shadow:inset 0 1px 2px rgba(48,35,46,.05);
}
.win-url .rdr{margin-left:auto;opacity:.5}
.win-tabs{
  position:absolute;left:0;right:0;top:46px;height:36px;display:flex;align-items:center;
  gap:7px;padding:0 11px;background:#f1eff2;border-bottom:1px solid #e3e0e4;
}
.win-tab{
  display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;border-radius:7px;
  font:500 11.5px/1 var(--body);color:#7a747f;background:transparent;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.win-tab .fav{width:11px;height:11px;border-radius:3px;flex:0 0 auto;background:#e6e3e8}
.win-tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(32,33,36,.12)}
.win-tab.on .fav{background:var(--red)}
.has-tabs{padding-top:82px}

/* ---------- 8. spinner in the voice + founder sections -------------------- */
.voice{position:relative}
.voice .spin{position:absolute;right:clamp(12px,4vw,74px);top:clamp(56px,9vh,110px);color:var(--red);opacity:.6;--spin-size:126px}
.founder .spin{margin:0 auto 34px;color:rgba(255,255,255,.82);--spin-size:132px}

/* ---------- 9. no-JS and reduced motion ----------------------------------- */
html:not(.js) .cinewrap{height:auto}
html:not(.js) .cinepin{position:static;height:auto;padding:96px 0;display:block}
html:not(.js) .cine-back{position:static;display:block;text-align:center}
html:not(.js) .cine-card{width:100%;height:auto;border-radius:26px;padding:56px 0;transform:none}
html:not(.js) .cine-inner{height:auto}
html:not(.js) .cine-phone{height:auto;max-width:280px;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .spin svg{animation:none}
  .cine-hint i::after{animation:none;transform:none}
  .js .hero h1 .rl > i,.js .hero h1 .rl.wipe > i{transition-duration:.01ms;filter:none}
  .grain{display:none}
}

/* ---------- 10. breakpoints ----------------------------------------------- */
@media (max-width:1100px){
  .cine-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px}
  .cine-right{display:none}
  .cine-badge.b1{left:-2%}
  .cine-badge.b2{right:-2%}
}
@media (max-width:860px){
  .cinewrap{height:340vh}
  /* Full bleed puts the card under the sticky header, so the top padding grows
     with the card and the copy never slides beneath the nav. */
  .cine-inner{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px;
    padding:calc(22px + 62px * var(--grow)) 0 calc(16px + 12px * var(--grow));
  }
  .cine-left{text-align:center}
  .cine-left p,.cine-left ul{margin-inline:auto;max-width:44ch;text-align:left}
  .cine-left ul{display:none}
  /* A percentage height plus aspect-ratio inside a centred grid area lets the
     intrinsic pass win and the phone overshoots the card. A viewport height is
     definite, so the ratio transfers to the width instead of the other way. */
  .cine-phone{height:min(46vh,520px);width:auto}
  .cine-badge{padding:10px 13px;gap:10px}
  .cine-badge .bx > span{display:none}
  .cine-badge.b1{top:0;left:-4%}
  .cine-badge.b2{bottom:3%;right:-4%}
  .win-tabs{display:none}
  .has-tabs{padding-top:46px}
  .voice .spin{--spin-size:92px;top:20px;right:8px;opacity:.4}
}
@media (max-width:640px){
  .cinewrap{height:300vh}
  .cine-card{width:calc(92vw + (100vw - 92vw) * var(--grow));height:calc(76vh + (100vh - 76vh) * var(--grow))}
  .cine-left h3{font-size:clamp(20px,5.6vw,28px)}
  .cine-left p{font-size:14px;line-height:1.58;max-width:40ch}
  .cine-badge b{font-size:12px}
  .imac-chin{height:26px}
  .imac-neck{height:22px}
}

/* ---------- 11. iMac: keep the devices scene working --------------------- */
.imac{position:relative;will-change:transform,opacity;transform-origin:50% 96%}
/* The stage is a flex item of a centred column, so it used to shrink to fit the
   iMac — and the iMac was being sized from the stage. Stretching it breaks that
   loop and gives fitIMac a width that does not depend on its own output. */
.devstage{width:100%}
@media (max-width:640px){
  .imac{width:100%!important}
}

/* ---------- 12. the pinned panel reveal gets the same light Safari -------- */
.safari{border:1px solid #d8d5d8;border-radius:14px;box-shadow:0 22px 55px -24px rgba(48,35,46,.27)}
.safari-bar{padding:0 13px;height:46px;gap:12px;background:linear-gradient(180deg,#fbfafb,#f1eff2);border-bottom:1px solid #e3e0e4}
.safari-dots i{width:11px;height:11px;border:0}
.safari-dots i:nth-child(1){background:#e5695c}
.safari-dots i:nth-child(2){background:#e2b040}
.safari-dots i:nth-child(3){background:#66bf58}
.safari-url{
  height:28px;padding:0 16px;border-radius:8px;background:#fff;border:1px solid #e3e0e4;
  font:500 12.5px/28px var(--body);letter-spacing:0;text-transform:none;color:#6c6672;
  box-shadow:inset 0 1px 2px rgba(48,35,46,.05);
}
.proof-external-cap{border-top:1px solid #e8e5e8;color:#746c74;font:400 12px/1.5 var(--body);letter-spacing:0;text-transform:none}

/* ---------- 13. dot pattern hosts ---------------------------------------- */
.sync{--dot-y:50%;--dot-w:76%;--dot-h:78%}
.sync::before{opacity:.20}
.s-white.req{--dot-y:46%}
.req::before{opacity:.16}

/* ---------- 14. the header while the card owns the frame ------------------
   The card goes full-bleed under a sticky paper header, which would leave a
   pale strip across the top of the shot. cinema.js flags the act on <html>;
   the header then reads as chrome on red instead of a band of its own. */
.head,.head .nav a,.head-cta .signin,.head .brand img,.head .burger{
  transition:background-color .45s var(--cine-ease),border-color .45s var(--cine-ease),color .45s var(--cine-ease),filter .45s var(--cine-ease);
}
html[data-cine="card"] .head{background:transparent;border-bottom-color:transparent}
html[data-cine="card"] .head .nav a,
html[data-cine="card"] .head-cta .signin{color:#fff}
html[data-cine="card"] .head .nav a::after{background:#fff}
html[data-cine="card"] .head .brand img{filter:brightness(0) invert(1)}
html[data-cine="card"] .head .burger{color:#fff;border-color:rgba(255,255,255,.45)}
html[data-cine="card"] .head .btn-red{background:#fff;color:var(--red)}
html[data-cine="card"] .head .btn-red:hover{background:#FFEDF1}
html[data-cine="card"] .hprog{opacity:0}
.hprog{transition:opacity .4s var(--cine-ease)}
@media (prefers-reduced-motion:reduce){
  .head,.head .nav a,.head-cta .signin,.head .brand img,.head .burger,.hprog{transition:none}
}

/* ---------- 15. the founder's v10 review ----------------------------------
   Each rule here answers one written note from the browser annotations. */

/* "diger 4 simge ve kutusu yamuk donmesin" — the mark scales, it does not tilt.
   "panel simgesi beyaz olsun" — on the filled chip the amblem inverts to white. */
.syncard.motion-current .sc-mark{transform:scale(1.1)}
.syncard .sc-mark img{transition:filter .4s var(--cine-ease)}
.syncard.motion-current .sc-mark img{filter:brightness(0) invert(1)}

/* "kutularinin altindaki stroke cizgi cok tasiyor" — the progress rule sat on
   the full width of a rounded card and spilled past both corners. */
.scroll-scene .syncard{overflow:hidden}
.scroll-scene .syncard::after{left:18px;right:18px;bottom:0;height:2px;border-radius:2px}
.scroll-scene .lrow::after,.scroll-scene .rc-row::after{left:0;right:0}

/* "cok sikistirmis gibi" — the two scroll-line scenes get their room back. */
.sync{padding-block:clamp(112px,15vh,168px)}
.syncrow{gap:22px 18px;margin-top:clamp(48px,6.5vh,76px)}
.syncard{padding:30px 26px}
.syncard p{margin-top:11px}
.sync .syncbar{margin-top:30px;padding:26px 28px}
.s-white .ledger{margin-top:clamp(44px,6vh,70px)}
.s-white .lrow{padding-block:26px}

/* The founder's portrait carries no ring: one amblem in the section, and the
   circular type lives in the voice section only. */
.founder .spin{display:none}

/* "videolar bolumunu mobilde ortaya hizala" */
@media (max-width:920px){
  .brief-head{text-align:center}
  .brief-head .eyebrow{justify-content:center}
  .brief-head p{margin-inline:auto;max-width:52ch}
  .brief{text-align:center}
  .brief-frame{margin-inline:auto}
  .brief h3,.brief p{margin-inline:auto;max-width:44ch}
  .brief-state{left:50%;transform:translateX(-50%)}
}

/* The opening frame carries a full hero now, so it gets its own scale-downs. */
@media (max-height:760px){
  .orb-mini{display:none}
  .cine-open h1{font-size:clamp(32px,4.4vw,58px)}
  .cine-open .lead{margin-top:18px;font-size:16px}
  .cine-open .hero-cta{margin-top:22px}
  .cine-open .cine-hint{margin-top:22px}
  .cine-where{margin-top:20px}
}
@media (max-width:640px){
  .cine-open h1{font-size:clamp(30px,8.2vw,42px);max-width:15ch}
  .cine-open .lead{font-size:15.5px;max-width:44ch}
  .cine-open .hero-cta .btn{width:100%}
  .cine-hint{margin-top:22px}
  .cine-where{font-size:13.5px;padding-left:16px}
}

/* ---------- 16. the founder's v10 second pass ----------------------------- */

/* "hizalamasini duzenle" / "bu kisim ortalanmis olacak" — the head block was
   centring its text inside a box that was still hard left. */
.bandsec-head{margin-inline:auto}
.bandsec .steps{align-items:start}
.bandsec .step{text-align:center;padding-inline:clamp(14px,2vw,28px)}

/* "son kaydirmada beyaz alt section ile ayni renge donsun" — on the last stop
   the band hands its ground to the section that follows it. */
.bandsec,.bandsec .band{transition:background-color .45s var(--cine-ease)}
.bandsec[data-last="true"],.bandsec[data-last="true"] .band{background:var(--white);color:var(--ink)}
.bandsec[data-last="true"] .eyebrow,
.bandsec[data-last="true"] h2,
.bandsec[data-last="true"] .bandsec-side p,
.bandsec[data-last="true"] .step small,
.bandsec[data-last="true"] .step strong{color:var(--red)}
.bandsec[data-last="true"] .step p,
.bandsec[data-last="true"] .step .n{color:var(--ink)}
.bandsec[data-last="true"] .step{border-color:var(--line)}
.bandsec[data-last="true"] .band-rail{background:var(--line)}
.bandsec[data-last="true"] .band-rail i{background:var(--red)}

/* "dolan strike, stroke cizgilerinin ayarlamasi berbat — ya kaldir" — removed.
   The scroll no longer draws a growing rule under anything. What it does now is
   simpler and cannot be mis-calibrated: the row the reader is on gets a solid
   red rule on its leading edge and a faint tint. */
.scroll-scene .lrow::after,
.scroll-scene .syncard::after,
.scroll-scene .rc-row::after{display:none!important}
.scroll-scene .lrow,
.scroll-scene .syncard,
.scroll-scene .rc-row,
.scroll-scene .bound-col{transform:none!important}
.scroll-scene .syncard{box-shadow:inset 3px 0 0 rgba(225,29,72,0);transition:box-shadow .4s var(--cine-ease),background-color .4s var(--cine-ease)}
.scroll-scene .syncard.motion-current{box-shadow:inset 3px 0 0 var(--red)}

/* "bu cizgilerin kisimlari bastan sona uzansin yatay olarak" — the ledger's
   rules run the full width of the block, top and bottom, edge to edge. */
.ledger{border-top:1.5px solid var(--red)}
.ledger .lrow{border-top:1px solid var(--line-2);border-bottom:0}
.ledger .lrow:first-child{border-top:0}
.ledger .lrow:last-child{border-bottom:1.5px solid var(--red)}
.scroll-scene .lrow.motion-current{background:#FFF4F5}

/* "orb'un section rengine cevir ... bu sitemizin genel tarzi olsun"
   A section marked [data-blend] carries the ground of the section above it as
   it arrives and hands its ground to the one below as it leaves; the mark
   inside takes its ink from whatever ground it is standing on.
   Only sections whose neighbours share the light grounds get the attribute —
   blending across the red boundary mixes a pink that is not one of the three
   painted grounds, and the brand law is three grounds. */
[data-blend]{transition:none}
.ring-canvas,.orb-mini canvas{color:var(--orb-ink,#E11D48)}
[data-blend][data-on-red="true"] .eyebrow,
[data-blend][data-on-red="true"] h2,
[data-blend][data-on-red="true"] .lead,
[data-blend][data-on-red="true"] .v-status,
[data-blend][data-on-red="true"] .v-hint,
[data-blend][data-on-red="true"] .prompts li,
[data-blend][data-on-red="true"] .prompts-note,
[data-blend][data-on-red="true"] .note,
[data-blend][data-on-red="true"] .syncbar p{color:#fff}
[data-blend][data-on-red="true"] .syncbar{border-color:rgba(255,255,255,.36);background:transparent}
[data-blend][data-on-red="true"] .ring{border-color:rgba(255,255,255,.4)}
[data-blend][data-on-red="true"] .prompts li{border-color:rgba(255,255,255,.3)}
[data-blend] .spin{color:var(--orb-ink,#E11D48)}

/* ============================================================================
   17. v11 — the founder's third browser pass
   Every block below answers one written note.
   ========================================================================== */

/* "bu keep scrolling ortalı durmuyor" — the rule sat beside the words, so the
   pair centred as a unit and the words read off-centre. Rule above, words under. */
.cine-hint{flex-direction:column;gap:14px;margin-top:34px}
.cine-hint i{width:1px;height:40px}

/* "tarzı bu bozuyor where it runs" — it was the only left-ruled note on a
   centred frame. It now uses the section rhythm the rest of the page uses:
   a mono label, a hairline above and below, centred measure. */
.cine-where{
  margin:34px auto 0;max-width:62ch;text-align:center;
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;font-size:15px;line-height:1.62;
}
.cine-where b{
  display:block;margin-bottom:9px;
  font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);
}

/* "bu ve üstündeki bölümün arasındaki çizgiyi sil ve rengi eşitle" — the seam
   was a ground change, not a border. The two now share one ground. */
#cine + .section.s-white{background:var(--paper)}

/* "2 metin de kutuya ortalanmamış" */
.prompts ul{align-items:stretch}
.prompts li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:104px}

/* "çizgileri eşit kalınlıkta değil" — one weight, one colour, every rule. */
.ledger,.ledger .lrow,.ledger .lrow:last-child{border-color:var(--line-2)}
.ledger{border-top-width:1px}
.ledger .lrow{border-top:1px solid var(--line-2);border-bottom:0}
.ledger .lrow:first-child{border-top:0}
.ledger .lrow:last-child{border-bottom:1px solid var(--line-2)}
.scroll-scene .lrow{background:transparent;transition:background-color .45s var(--cine-ease)}
.scroll-scene .lrow.motion-current{background:#FFF7F8}
.lrow time{color:#B3123B}
.lrow .s{border-color:var(--line)}

/* "boxların dış efektini beğenmedim" — no inset bar. The card raises a hairline
   to full red on its top edge and lifts a hair off the ground instead. */
.scroll-scene .syncard{box-shadow:none;border-top:2px solid var(--line)}
.scroll-scene .syncard.motion-current{
  box-shadow:0 16px 34px -22px rgba(80,20,40,.28);
  border-top-color:var(--red);background:#fff;
}

/* "bu bölümden hoşlanmadım" (the band head) + "bu bölümü uzat" (the band) */
.bandsec{padding-top:clamp(104px,13vh,150px)}
.bandsec-head{max-width:820px;text-align:center}
.bandsec-head h2{max-width:none;margin-inline:auto;text-wrap:balance}
.bandsec-side{margin:26px auto 0;max-width:56ch;padding-top:22px;border-top:1px solid var(--line);text-align:center;align-items:center}
.bandsec-side p{margin-inline:auto;max-width:none}
.bandsec[data-last="true"] .bandsec-side{border-top-color:var(--line)}
.bandsec .band{margin-top:clamp(56px,8vh,92px);padding:clamp(76px,11vh,132px) 0}
.bandsec .step{padding-block:clamp(30px,4vh,52px)}
.bandsec .step p{max-width:34ch;margin-inline:auto}
.bandsec .band-rail{margin-top:clamp(40px,5vh,60px)}

/* "buton efektlerini beğenmiyorum" — no floating nudge. A fill wipes up from the
   baseline, the arrow travels, and the press is a real press. */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .22s var(--cine-ease),border-color .22s var(--cine-ease)}
.btn:hover{transform:none}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .34s var(--cine-ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:active{transform:translateY(1px)}
.btn-red::before{background:#B3123B}
.btn-ghost::before{background:var(--red)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:#fff;border-color:var(--red)}
.btn-white::before{background:#FFE3EA}
.btn:hover .arrow{transform:translateX(5px)}
.btn .arrow{transition:transform .28s var(--cine-ease)}
@media (prefers-reduced-motion:reduce){
  .btn::before{transition:none}
}

/* Headings set themselves rather than breaking wherever the box ends. */
h1,h2,h3,.stmt,.lead{text-wrap:balance}
p{text-wrap:pretty}

/* "ürünün başlığı üstüne ürün logosunu koyalım her bir ürün için" */
.mech-mark{
  width:52px;height:52px;border-radius:14px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:var(--red);margin-bottom:18px;
  transition:background-color .45s var(--cine-ease),border-color .45s var(--cine-ease),color .45s var(--cine-ease);
}
.mech-mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.js .mech.on .mech-mark{background:var(--red);border-color:var(--red);color:#fff}

/* "6 ürünü kaydırırken geçiş yapıldığı hissedilmiyor" — the crossfade had no
   direction, so six different products read as one flickering panel. They now
   travel: out to the left, in from the right, with the product number carried
   as a ghost numeral behind the drawing so the count is felt as well as seen. */
.js .mech{transform:translate3d(-34px,0,0) scale(.985)}
.js .mech.on{transform:none}
.js .mech{transition:opacity .24s var(--cine-ease),transform .24s var(--cine-ease),visibility 0s linear .24s}
.js .mech.on{transition:opacity .52s var(--cine-ease) .18s,transform .62s var(--cine-ease) .18s,visibility 0s}
.rack-stage{overflow:hidden}
.rack-stage::before{
  content:attr(data-n);position:absolute;right:-.04em;top:50%;transform:translateY(-56%);
  font:800 clamp(120px,17vw,260px)/.8 var(--display);letter-spacing:-.06em;
  color:var(--red);opacity:.055;pointer-events:none;z-index:0;
  transition:opacity .4s var(--cine-ease);
}
.mech{position:relative;z-index:1}

/* "kutucukları kaydırırken geçiş hissedilsin ... en son kutuda orijinal
   kırmızıya tekrar dönsün" — the card under the reader inverts; the ground
   never moves; the last card is left on the red it started on. */
.ncard{transition:background-color .5s var(--cine-ease),border-color .5s var(--cine-ease),color .5s var(--cine-ease),transform .5s var(--cine-ease)}
.ncard .nt,.ncard h3,.ncard .nb{transition:color .5s var(--cine-ease),background-color .5s var(--cine-ease),border-color .5s var(--cine-ease)}
.ncard.hot:not(.inv){background:transparent;border-color:var(--on-red);color:#fff}
.ncard.hot:not(.inv) .nt,.ncard.hot:not(.inv) h3{color:#fff}
.ncard.hot:not(.inv) p{opacity:.9}
.ncard.hot:not(.inv) .nb{background:transparent;border-color:var(--on-red);color:#fff}
.ncard.inv{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-6px)}
.ncard.inv .nt,.ncard.inv h3{color:var(--red)}
.ncard.inv p{opacity:1}
.ncard.inv .nb{background:var(--red);border-color:var(--red);color:#fff}
@media (prefers-reduced-motion:reduce){
  .ncard,.ncard.inv{transition:none;transform:none}
  .rack-stage::before{transition:none}
}

/* ---------- 18. founder asides ---------------------------------------------
   "ara kısımlara founder resmi ile minik cta'lar kurabilirsin" — a real face,
   one sentence in the first person, one next step. Placed where a reader has
   just understood something and is most likely to want to act on it. */
.fnote{background:var(--paper);padding:clamp(30px,4.4vh,52px) 0;border-block:1px solid var(--line)}
.fnote-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,2.4vw,34px);align-items:center}
.fnote-face{flex:0 0 auto;width:62px;height:62px;border-radius:50%;padding:3px;border:1.5px solid var(--red);display:block}
.fnote-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 32%;display:block}
.fnote-txt{margin:0;font-size:16px;line-height:1.6;max-width:74ch;color:var(--ink)}
.fnote-txt em{display:block;margin-top:9px;font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--red)}
.fnote-go{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font:700 14px/1 var(--body);color:var(--red);text-decoration:none;
  border-bottom:1.5px solid var(--line-2);padding-bottom:8px;transition:border-color .2s var(--cine-ease);
}
.fnote-go:hover{border-color:var(--red)}
.fnote-go span{transition:transform .22s var(--cine-ease)}
.fnote-go:hover span{transform:translateX(4px)}
@media (max-width:820px){
  .fnote-row{grid-template-columns:auto minmax(0,1fr);row-gap:18px}
  .fnote-go{grid-column:1/-1}
}

/* ---------- 19. things the founder liked, carried further ------------------ */
/* The dot field was called a good idea, so the two statement grounds get it —
   quietly, at half strength, so the sentence stays the loudest thing there. */
.stmtwrap{position:relative;isolation:isolate}
.stmtwrap::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--red);opacity:.16;
  background-image:radial-gradient(currentColor .9px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 66% 58% at 50% 46%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 66% 58% at 50% 46%,#000 0%,transparent 72%);
}
.stmtpin{position:sticky;z-index:1}

/* Text links draw their underline instead of switching it on. */
.mech-go,.fnote-go,.orb-cap{position:relative}
.prompts-note a,.night-foot a,.note a,.lead a{
  color:var(--red);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--cine-ease);padding-bottom:2px;
}
.prompts-note a:hover,.night-foot a:hover,.note a:hover,.lead a:hover{background-size:100% 1.5px}

/* A single quiet call to action that follows a phone reader down the page.
   It appears only after the opening act has been passed, and only on a phone. */
.stickycta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none;
  align-items:center;gap:12px;padding:11px 12px 11px 16px;border-radius:12px;
  background:var(--red);color:#fff;
  box-shadow:0 18px 34px -18px rgba(80,20,40,.6);
  transform:translateY(140%);transition:transform .42s var(--cine-ease);
}
.stickycta b{font-family:var(--display);font-weight:800;font-size:14px;line-height:1.25;flex:1 1 auto}
.stickycta .btn{min-height:42px;padding:0 16px;font-size:14px;flex:0 0 auto}
.stickycta .x{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:transparent;
  border:1px solid rgba(255,255,255,.4);color:#fff;display:grid;place-items:center;cursor:pointer;
}
.stickycta .x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:760px){
  .stickycta{display:flex}
  html[data-cta="on"] .stickycta{transform:none}
}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* ---------- 20. the sphere's control ---------------------------------------
   Both references put a small, solid, high-contrast button at the centre of the
   body. Ours is a white disc carrying the amblem, and the mic replaces it on
   hover or focus — so the sphere is visibly a thing you press. */
.ring-core{
  width:19%;aspect-ratio:1;border-radius:50%;
  background:#fff;border:0;
  box-shadow:0 10px 24px -10px rgba(90,10,35,.45),0 2px 6px -2px rgba(90,10,35,.3);
  display:grid;place-items:center;
  transition:transform .28s var(--cine-ease),background-color .28s var(--cine-ease);
}
.ring .ring-core img{display:block!important;width:58%;height:auto;object-fit:contain}
.ring .ring-core .ico{color:var(--red);filter:none}
.ring .ring-core .ico svg{width:44%;height:auto;max-width:26px}
.ring:hover .ring-core,.ring:focus-visible .ring-core{transform:scale(1.07)}
.ring[data-s="responding"] .ring-core{background:var(--red)}
.ring[data-s="responding"] .ring-core .ico{color:#fff}
.ring-canvas{border-radius:0}
/* refinements.css forces both glyphs visible; restore pilot.css's intent —
   the amblem rests, the mic appears on hover or focus, stop while live. */
.ring .ring-core .ico{display:none}
.ring:hover[data-s="idle"] .ico-mic,.ring:focus-visible[data-s="idle"] .ico-mic,
.ring:hover[data-s="ended"] .ico-mic,.ring:focus-visible[data-s="ended"] .ico-mic{display:grid}
.ring[data-s="listening"] .ico-stop,.ring[data-s="responding"] .ico-stop{display:grid}
.ring[data-s="listening"] .ring-core img,.ring[data-s="responding"] .ring-core img{opacity:0}
.ring:hover[data-s="idle"] .ring-core img,.ring:focus-visible[data-s="idle"] .ring-core img,
.ring:hover[data-s="ended"] .ring-core img,.ring:focus-visible[data-s="ended"] .ring-core img{opacity:0}

/* ---------- 21. the act on a product page ---------------------------------
   The card's stage carries that product's own animated mockup instead of the
   phone. The mockup was drawn for a paper ground, so on the red card it sits on
   a white surface — the same white-card-on-red the badges use. */
.cine-mk{
  width:min(100%,560px);max-height:100%;overflow:hidden;
  background:#fff;border-radius:16px;padding:16px;
  box-shadow:0 30px 60px -28px rgba(52,10,26,.55);
}
.cine-mk .mk{border:0;border-radius:10px;background:transparent;padding:0}
.cine-stage:has(.cine-mk){perspective:none}
.js .cine-stage .cine-mk{opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 60px)) scale(calc(.94 + .06 * var(--in)))}

/* The product hero lives in the opening frame now. */
.cine-open .crumb{display:inline-flex;margin-bottom:18px}
.cine-open .plock{justify-content:center;margin:0 auto 20px}
.cine-open h1{font-size:clamp(32px,4.6vw,68px)}
@media (max-width:860px){
  .cine-mk{padding:12px;border-radius:13px}
  .cine-open .plock{margin-bottom:14px}
}
/* The white surface hugs the thread instead of standing as an empty panel. */
.cine-mk{align-self:center;height:auto}
.cine-stage{align-content:center}
/* The card sets white type for its own copy; the mockup on the white surface
   must not inherit it, or the caller's words disappear. */
.cine-mk{color:var(--ink)}
.cine-mk .mk-bub.p span,.cine-mk .mk-bub.p b{color:inherit}
.cine-mk .mk-bub.a,.cine-mk .mk-bub.a span,.cine-mk .mk-bub.a b{color:#fff}
/* The devices scene caps the machine by the stage height; every other host
   sizes it from its own width. */
.devstage .imac{--imac-cap:1}

/* The closing block is identical on every page; the only thing a page may add
   is which member of the family it is. */
/* The current member is marked, not spotlit: a wash rather than solid white. */
.family a.on{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34)}
.family a.on .ic{border-color:#fff;background:rgba(255,255,255,.14)}

/* ==========================================================================
   MOBILE READING MODE  (<= 640px)
   The founder's report: "mobilde kaydırırken kafa karıştırıyor ... nerede
   olduğunu kaybettiriyor ... panel bölümü mobil ekrana sığmıyor".

   On a phone the pinned scenes are the problem, not the decoration. A pinned
   scene holds the page still while an animation plays, which on a small screen
   reads as the page having stopped responding. Below 640px every remaining
   pinned sequence becomes an ordinary document section: the content is all
   present, in order, and the reader always moves when they scroll.
   (.devwrap and .rackwrap are already flattened above / in pilot-v15.css.)
   ========================================================================== */
@media (max-width:640px){
  /* --- the panel hand-over: show the panel, drop the reveal ------------- */
  .pinwrap{height:auto}
  .pin{position:static;height:auto;display:block;overflow:visible;padding:72px 0}
  .pin-copy{position:static;opacity:1!important;margin-bottom:24px}
  .pin-mark,.pin-hint{display:none!important}
  .pin-clip{opacity:1!important;clip-path:none!important}

  /* --- the night shift: a vertical list, not a sideways track ----------- */
  .nightwrap{height:auto}
  .nightpin{position:static;height:auto;overflow:visible;padding:72px 0}
  .night-view{overflow:visible}
  .night-track{flex-direction:column;gap:16px;padding-inline:var(--gutter);transform:none!important}
  .ncard{flex-basis:auto;min-height:0;width:auto}
  .night-rail{display:none}

  /* --- the two statements: read them, do not scrub them ----------------- */
  .stmtwrap{height:auto}
  .stmtpin{position:static;height:auto;padding:72px 0}
  .stmt > span{opacity:1!important}

  /* --- the machine is not the product ----------------------------------
     "iMac/panel görseli mobilde problemli ve gereğinden büyük." The chassis,
     stand and foot are pure decoration that cost vertical space and shrink the
     panel; on a phone only the screen is kept. */
  .imac-chin,.imac-neck,.imac-foot{display:none}
  .imac-body{height:auto;padding:0;border:0;border-radius:14px;background:none;box-shadow:none}
  /* Dropping the body's definite height leaves .mac-screen (a flex child whose
     only content is absolutely positioned) with nothing to derive a height
     from, so it collapsed to 0 and the panel vanished. Give the display its own
     ratio instead — the same ratio as the artwork inside it, which differs
     between the homepage image (1280x800) and the live product panel
     (1280x600). */
  .imac .mac-screen{flex:0 0 auto;height:auto;width:100%;aspect-ratio:16/10}
  .pshot .imac .mac-screen{aspect-ratio:1280/600}
  .devstage .imac{width:100%!important;max-width:none}
  /* 9px is below the 11px floor this design system holds itself to. */
  .imac .win-url{font-size:11px;height:24px;line-height:24px}
  .imac .win{padding-top:32px}
  .imac .win-bar{height:32px}

  /* pilot-v15.js keeps writing the scene's inline opacity/transform because the
     section is still taller than the viewport. These win, so the flattened
     sections are never left mid-animation. */
  .devstage .imac,.devstage .phone{opacity:1!important;transform:none!important}

  /* Every flattened scene sizes to its own content. */
  .pin,.devpin,.nightpin,.stmtpin,.rackpin{height:auto;min-height:0}

  /* --- touch targets ---------------------------------------------------- */
  .stickycta .btn{min-height:44px}
  .stickycta .x{width:44px;height:44px}
}

/* The pinned scenes that remain on larger screens must measure against the
   viewport the browser actually shows. On iOS, 100vh is the *large* viewport
   (address bar hidden), so a 100vh sticky scene is taller than the visible
   window and its bottom edge sits under the toolbar. svh is the small
   viewport, which always fits. The plain vh line stays as the fallback. */
@media (min-width:641px){
  .cinepin,.pin,.devpin,.nightpin,.stmtpin,.rackpin{height:100svh}
}

/* Final mobile colour-rhythm override. Cinema is loaded after refinements, so
   the compact action belongs here to avoid the earlier full-red banner winning
   the cascade and covering the content it is meant to convert. */
@media (max-width:640px){
  /* The page already repeats its primary action at natural decision points.
     A fixed phone banner covered product and panel content, so mobile keeps the
     in-flow CTAs and removes the persistent overlay entirely. */
  .stickycta{display:none!important}
}
/* Below 641px these same scenes are flattened into ordinary sections above and
   must take their content's height. Leaving the svh rule unscoped pinned them
   back to exactly one viewport, so a section taller than the screen - the
   night-shift track is ~1390px of stacked cards - overflowed its own box and
   drew on top of the section after it. */

/* The card lives inside .cinepin, which is now 100svh. Leaving the card on vh
   made it taller than its own pin on iOS, so its last line sat under the
   address bar. Same two stops, measured against the same viewport. */
.cine-card{height:calc(82svh + (100svh - 82svh) * var(--grow))}
@media (max-width:640px){
  .cine-card{height:calc(76svh + (100svh - 76svh) * var(--grow))}
}

/* ========================================================================== 
   Founder mobile review — 2026-09-08
   ========================================================================== */
.bandsec,.bandsec .band,
.bandsec[data-last="true"],.bandsec[data-last="true"] .band{
  background:var(--porcelain)!important;color:var(--ink)!important;transition:none!important;
}
.bandsec .eyebrow,.bandsec h2,.bandsec .bandsec-side p,
.bandsec .step small,.bandsec .step strong{color:var(--red)!important}
.bandsec .step p,.bandsec .step .n{color:var(--ink)!important}
.bandsec .step{border-color:var(--line-2)!important}

.fnote{background:var(--warm-carbon);border-color:rgba(255,255,255,.13)}
.fnote-txt{color:var(--pearl)}
.fnote-txt em{color:var(--porcelain)}
.fnote-go{color:#fff;border-color:rgba(255,255,255,.38)}
.fnote-go:hover{border-color:#fff}
.fnote-face{border-color:var(--red);background:var(--porcelain)}

.s-control .bound-col li{display:flex;align-items:flex-start;gap:13px;padding-left:0}
.s-control .bound-col li::before{display:none}
.bound-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:9px;color:var(--red);background:#fff}
.bound-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.product-story{display:none}

@media (max-width:640px){
  #cine .cine-back,#how{background:var(--porcelain)!important}
  .scroll-scene .lrow{opacity:.66;border-left:3px solid transparent;transition:opacity .3s var(--cine-ease),background-color .3s var(--cine-ease),color .3s var(--cine-ease),transform .3s var(--cine-ease)}
  .scroll-scene .lrow.motion-current{opacity:1;background:var(--warm-carbon)!important;color:#fff;transform:translateX(4px)!important;border-left-color:var(--red)}
  .scroll-scene .lrow.motion-current time,.scroll-scene .lrow.motion-current .w,.scroll-scene .lrow.motion-current .w span{color:#fff}

  .what-is{padding-top:104px}
  .what-spin{left:50%;right:auto;top:8px;bottom:auto;opacity:.34;transform:translateX(-50%) scale(.72)}

  .nightwrap,.nightwrap[data-tone]{height:420svh!important;background:var(--red)!important;color:#fff!important}
  .nightpin{position:sticky!important;top:0;height:100svh!important;min-height:0!important;overflow:hidden!important;padding:76px 0 22px!important;gap:16px!important;justify-content:flex-start!important}
  .night-head{flex:0 0 auto}
  .night-view{flex:0 0 auto;overflow:hidden!important}
  .night-track{display:flex!important;flex-direction:row!important;width:max-content;gap:16px!important;padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
  .nightwrap .ncard,.nightwrap .ncard:nth-child(2),.nightwrap .ncard.hot{flex:0 0 min(76vw,310px)!important;width:min(76vw,310px)!important;min-height:clamp(275px,40svh,350px)!important;padding:24px!important;background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important;box-shadow:none!important}
  .nightwrap .ncard h3,.nightwrap .ncard .nt{color:#fff!important}
  .nightwrap .ncard .nb{color:#fff!important;background:transparent!important;border-color:rgba(255,255,255,.5)!important}
  .nightwrap .ncard.inv{background:#fff!important;color:var(--ink)!important;border-color:#fff!important;transform:translateY(-5px)}
  .nightwrap .ncard.inv h3,.nightwrap .ncard.inv .nt{color:var(--red)!important}
  .nightwrap .ncard.inv .nb{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}
  .nightwrap .eyebrow,.nightwrap h2{color:#fff!important}
  .night-rail{display:block!important}
  .night-foot{margin-top:auto}

  .stmtwrap{height:200svh!important}
  .stmtwrap .stmtpin{position:sticky!important;top:0;height:100svh!important;min-height:0!important;padding:0!important;display:flex;align-items:center}
  .stmtwrap .stmt{font-size:clamp(39px,10.4vw,58px);line-height:1.02}

  .req{overflow:hidden}
  .reqgrid{width:min(100% - 32px,100%);gap:28px}
  .reqgrid>div,.reqcard{min-width:0;width:100%}
  .req .lead,.req .note{overflow-wrap:anywhere}
  .rc-top{align-items:flex-start;padding:14px 16px}
  .rc-top em{max-width:48%;text-align:right;line-height:1.35;white-space:normal}
  .rc-headline,.rc-row,.rc-foot{padding-inline:16px}

  .devwrap{background:var(--pearl)}
  .devstage{position:relative!important;display:block!important;width:min(100% - 24px,520px)!important;height:clamp(520px,132vw,620px)!important;margin-inline:auto;background:var(--warm-carbon);border-radius:26px;overflow:hidden;padding:22px!important}
  .devstage::before{content:"PANEL · DESKTOP + MOBILE";position:absolute;left:22px;bottom:18px;color:rgba(255,255,255,.58);font:600 9px/1 var(--mono);letter-spacing:.14em}
  .devstage .imac{position:absolute!important;left:4%!important;top:28px!important;width:92%!important;max-width:none!important;z-index:1}
  .devstage .phone{position:absolute!important;right:7%!important;bottom:42px!important;width:46%!important;max-width:188px!important;height:auto!important;margin:0!important;z-index:3;filter:drop-shadow(0 24px 24px rgba(0,0,0,.28))}
  .devstage .phone-screen{height:auto!important;width:100%!important;aspect-ratio:9/19.5}
  .devcap{color:var(--ink)}

  .rack-index li{opacity:.68;background:#fff;border-color:rgba(225,29,72,.28)}
  .rack-index li.on{opacity:1;background:var(--porcelain);border-color:var(--red)}
  .rack-stage{min-height:0;padding:20px;border:1px solid var(--red)}
  .rack-stage .mk,.rack-stage .mk-bar,.rack-stage .mk-bub,.rack-stage .mk-card,
  .rack-stage .mk-toast,.rack-stage .mk-slot,.rack-stage .mk-ch,.rack-stage .mk-rev{border-color:rgba(225,29,72,.42)}
  .rack-stage .mk-revs{grid-template-columns:1fr}
  .rack-stage .mk-rev header{flex-wrap:wrap}
  .rack-stage .mk-rev em{margin-left:0;width:100%}

  .product-story{display:block;background:var(--warm-carbon);color:#fff;padding:88px 0 2px;position:relative}
  .product-story-head{padding-bottom:44px}
  .product-story-head .eyebrow,.product-story-head h2{color:#fff}
  .product-story-head h2{font-size:clamp(34px,9vw,48px);max-width:12ch}
  .product-story-head>p:last-child{margin:20px 0 0;max-width:38ch;color:rgba(255,255,255,.74);font-size:15px;line-height:1.6}
  .product-story-cards{padding-bottom:12svh}
  .product-story-card{position:sticky;top:78px;min-height:calc(100svh - 96px);margin-bottom:24svh;padding:22px 18px 24px;border:1px solid rgba(255,255,255,.45);border-radius:24px;background:var(--red);color:#fff;box-shadow:0 28px 60px -28px rgba(0,0,0,.72);transform:translateY(calc(var(--card) * 3px));overflow:hidden}
  .product-story-card:last-child{margin-bottom:0}
  .product-story-card>header{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:center;margin-bottom:18px}
  .product-story-card>header>span{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:13px;font:600 12px/1 var(--mono)}
  .product-story-card small{display:block;color:rgba(255,255,255,.7);font:600 9px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase}
  .product-story-card h3{margin-top:5px;color:#fff;font-size:23px}
  .product-story-art{background:var(--porcelain);border:1px solid #fff;border-radius:17px;padding:12px;min-height:300px;display:grid;align-items:center}
  .product-story-art .mk{background:transparent;border:0;padding:0;color:var(--ink)}
  .product-story-art .mk-revs{grid-template-columns:1fr}
  .product-story-art .mk-rev header{flex-wrap:wrap}
  .product-story-art .mk-rev em{margin-left:0;width:100%}
  .product-story-card>p{margin:18px 2px 0;font-size:15px;line-height:1.55;color:#fff}
  .product-story-card:not(.on) .product-story-art{opacity:.35}
  .product-story-card.on .product-story-art{animation:product-story-in .6s var(--cine-ease) both}
}

@keyframes product-story-in{from{opacity:.35;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .product-story-card{position:relative;top:auto;min-height:0;margin-bottom:24px;transform:none}
  .product-story-card:not(.on) .product-story-art{opacity:1}
}

/* ========================================================================== 
   Founder mobile review — 2026-09-08 d
   The mobile story now uses solid surfaces, two-product chapters and a calm
   hierarchy. Charcoal is an accent rather than a full-page default.
   ========================================================================== */

:root{--plum:var(--charcoal)}

/* The circular mark belongs to the large statement scenes, where there is
   deliberate breathing room for it. It no longer occupies the product intro. */
.what-spin{display:none!important}
.what-is-copy ul{counter-reset:what-list}
.what-is-copy li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px}
.what-is-copy li::before{
  counter-increment:what-list;content:"0" counter(what-list);width:auto;height:auto;margin:3px 0 0;
  border:0;border-radius:0;background:transparent;color:var(--red);
  font:600 10px/1 var(--mono);letter-spacing:.1em
}

.stmtpin>.wrap{position:relative;width:100%}
.statement-orbit{
  --spin-size:clamp(118px,12vw,174px);position:absolute;right:clamp(8px,4vw,54px);top:50%;z-index:0;
  color:var(--red);opacity:0;filter:blur(16px);transform:translateY(-36%) scale(.84);
  will-change:opacity,filter,transform
}
.statement-orbit .spin-core{
  inset:30%;border:1px solid var(--line-2);border-radius:50%;background:var(--porcelain)
}
.statement-orbit .spin-core img{width:62%;display:block!important;opacity:1!important;filter:none!important}
.stmtpin .eyebrow,.stmtpin .stmt{position:relative;z-index:1}

/* The timeline focus is a slim reading cue, never a dark content block. */
.scroll-scene .lrow,.scroll-scene .lrow.motion-current{background:transparent!important;color:var(--ink)!important}
.scroll-scene .lrow.motion-current{box-shadow:inset 3px 0 0 var(--red)}
.scroll-scene .lrow.motion-current time,.scroll-scene .lrow.motion-current .w{color:var(--red)!important}
.scroll-scene .lrow.motion-current .w span{color:var(--ink)!important}

/* Remove the long line above the sync cards and keep the panel mark solid. */
.syncrow{border-top:0!important}
.scroll-scene .syncard,.scroll-scene .syncard.motion-current{border-top:0!important}
.syncard .sc-mark,.syncard.motion-current .sc-mark{background:var(--porcelain)!important;color:var(--red)!important;opacity:1!important}
.syncard .sc-mark img,.syncard.motion-current .sc-mark img{opacity:1!important;filter:none!important;transform:none!important}

/* The founder strip keeps its separation but uses the requested cooler black. */
.fnote{background:var(--charcoal)!important;border-color:rgba(255,255,255,.16)!important}
.fnote-face{background:var(--porcelain);border-color:rgba(255,255,255,.62);box-shadow:0 0 0 2px var(--red)}
.fnote-txt{color:var(--pearl)!important}
.fnote-txt em{color:var(--porcelain)!important}
.fnote-go{color:#fff!important;border-color:var(--red)!important}

/* The rack has a stable reading order. Desktop keeps its vertical index; the
   mobile layout below rearranges it to animation, explanation, then choices. */
.rack-body{grid-template-areas:"index stage" "intro stage"}
.rack-index{grid-area:index}
.rack-stage{grid-area:stage}
.rack-intro{grid-area:intro;align-self:end;margin:24px 0 0;font-size:14px;line-height:1.6;color:var(--ink);max-width:34ch}

@media (max-width:640px){
  /* Product intro: title -> live product -> explanation -> compact 3 x 2 index. */
  .rackwrap{background:var(--porcelain)!important}
  .rackpin{padding:72px 0!important}
  .rack-head{margin-bottom:28px!important}
  .rack-body{grid-template-areas:"stage" "intro" "index"!important;grid-template-columns:1fr!important;gap:18px!important}
  .rack-stage{
    min-height:0!important;padding:14px!important;border:1px solid var(--line-2)!important;
    border-radius:18px!important;background:#fff!important;color:var(--ink)!important;
    box-shadow:0 20px 44px -36px rgba(32,33,36,.34)!important
  }
  .rack-stage::before{display:none!important}
  .rack-stage .mech{gap:18px!important}
  .rack-stage .mech-art{order:1;padding:0!important}
  .rack-stage .mech-copy{order:2;padding:2px 4px 5px}
  .rack-stage .mech-copy h3,.rack-stage .mech-copy p,.rack-stage .mech-go{color:var(--ink)!important}
  .rack-stage .mech-copy h3,.rack-stage .mech-go{color:var(--red)!important}
  .rack-stage .mech-mark,.rack-stage .mech.on .mech-mark{background:var(--porcelain)!important;color:var(--red)!important;border-color:var(--line-2)!important}
  .rack-intro{margin:0;padding:0 2px;max-width:none;font-size:14px}
  .rack-index{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .rack-index li{opacity:1!important;background:#fff!important;border-color:var(--line)!important;border-radius:10px!important}
  .rack-index li.on{background:var(--mist)!important;border-color:var(--red)!important}
  .rack-index li button{min-height:52px!important;padding:8px!important;grid-template-columns:20px minmax(0,1fr)!important;gap:3px!important}
  .rack-index li i{font-size:9px!important}
  .rack-index li b{font-size:10.5px!important;line-height:1.25!important;word-break:normal;overflow-wrap:normal;hyphens:none}
  .rack-index li:nth-child(3) b,.rack-index li:nth-child(6) b{font-size:9.5px!important}

  /* Two solid product windows replace the full-screen red card takeover. */
  .product-story{display:block!important;background:var(--mist)!important;color:var(--ink)!important;padding:76px 0!important}
  .product-story-head{padding-bottom:26px!important}
  .product-story-head .eyebrow{color:var(--red)!important}
  .product-story-head h2{color:var(--charcoal)!important;font-size:clamp(32px,8.7vw,44px)!important;max-width:12ch!important}
  .product-story-head>p{margin:16px 0 0!important;color:var(--ink)!important;font-size:15px!important;line-height:1.58!important}
  .product-story-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:24px}
  .product-story-nav button{
    min-height:54px;padding:8px 6px;border:1px solid rgba(32,33,36,.16);border-radius:9px;
    background:var(--pearl);color:var(--ink);font:700 10px/1.25 var(--body);cursor:pointer
  }
  .product-story-nav button span{display:block;margin-bottom:4px;color:var(--red);font:600 9px/1 var(--mono);letter-spacing:.08em}
  .product-story-nav button.on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
  .product-story-nav button.on span{color:#fff}
  .product-story-cards{display:grid;grid-template-columns:1fr;gap:14px;padding-bottom:0!important}
  .product-story-card{
    position:relative!important;top:auto!important;display:flex;flex-direction:column;min-height:0!important;
    margin:0!important;padding:12px 12px 18px!important;border:1px solid rgba(32,33,36,.16)!important;
    border-radius:18px!important;background:var(--pearl)!important;color:var(--ink)!important;
    box-shadow:0 18px 40px -34px rgba(32,33,36,.42)!important;transform:none!important;overflow:hidden
  }
  .product-story-card[hidden]{display:none!important}
  .product-story-card.pair-on{animation:product-pair-in .52s cubic-bezier(.22,1,.36,1) both}
  .product-story-card:nth-child(2n).pair-on{animation-delay:.08s}
  .product-story-art{order:1;min-height:0!important;padding:10px!important;border:1px solid var(--line-2)!important;border-radius:13px!important;background:var(--porcelain)!important;opacity:1!important}
  .product-story-art .mk{padding:10px!important;border:0!important;background:transparent!important;color:var(--charcoal)!important}
  .product-story-card>header{order:2;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;margin:15px 3px 0!important}
  .product-story-card>header>.product-story-logo{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border:1px solid var(--line-2)!important;border-radius:11px!important;background:#fff!important}
  .product-story-logo img{width:24px;height:auto;display:block;opacity:1!important;filter:none!important}
  .product-story-card small{color:var(--red)!important;font:600 9px/1.3 var(--mono)!important;letter-spacing:.11em!important;text-transform:uppercase}
  .product-story-card h3{margin-top:4px!important;color:var(--charcoal)!important;font-size:20px!important}
  .product-story-card>p{order:3;margin:11px 3px 0!important;color:var(--ink)!important;font-size:14px!important;line-height:1.55!important}
  .product-story-art .mk-bub.p,.product-story-art .mk-bub.p span,.product-story-art .mk-bub.p b,
  .product-story-art .mk-card,.product-story-art .mk-card p,.product-story-art .mk-toast span,
  .product-story-art .mk-rev p,.product-story-art .mk-ch b,.product-story-art .mk-bar small{color:var(--charcoal)!important}
  .product-story-art .mk-bub.p b,.product-story-art .mk-toast b,.product-story-art .mk-card header{color:var(--red)!important}
  .product-story-art .mk-bub.a,.product-story-art .mk-bub.a span,.product-story-art .mk-bub.a b{color:#fff!important}
  .product-story-art .mk-revs{grid-template-columns:1fr 1fr!important}
  .product-story-art .mk-rev header{flex-wrap:wrap}
  .product-story-art .mk-rev em{margin-left:0;width:100%}

  /* Solid cards: no neighbouring card or red ground can show through. */
  .nightwrap .ncard,.nightwrap .ncard:nth-child(2),.nightwrap .ncard.hot{
    background:var(--porcelain)!important;color:var(--charcoal)!important;
    border-color:rgba(255,255,255,.78)!important;box-shadow:0 18px 38px -30px rgba(32,33,36,.5)!important
  }
  .nightwrap .ncard h3,.nightwrap .ncard .nt{color:var(--red)!important}
  .nightwrap .ncard p{color:var(--charcoal)!important;opacity:1!important}
  .nightwrap .ncard .nb{background:#fff!important;color:var(--red)!important;border-color:var(--line-2)!important}
  .nightwrap .ncard.inv{background:var(--charcoal)!important;color:#fff!important;border-color:var(--charcoal)!important}
  .nightwrap .ncard.inv h3{color:#fff!important}
  .nightwrap .ncard.inv .nt{color:#ff6688!important}
  .nightwrap .ncard.inv p{color:#fff!important}
  .nightwrap .ncard.inv .nb{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}

  /* The call sequence is a compact, static flow on phones. */
  .bandsec{padding:48px 0!important;background:var(--porcelain)!important}
  .bandsec-head{padding-inline:var(--gutter)!important}
  .bandsec .band{margin-top:24px!important;padding:0!important}
  .bandsec .steps{margin-top:0!important}
  .bandsec .step,.bandsec .step:not(.on){min-height:0!important;padding:20px 0!important;opacity:1!important}
  .bandsec .band-rail{display:none!important}

  /* Restore the lighter, side-by-side device composition. */
  .devwrap{background:var(--porcelain)!important}
  .devpin{padding-block:72px!important}
  .devstage{
    position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(112px,38%)!important;
    align-items:end!important;gap:12px!important;width:100%!important;height:auto!important;margin:0!important;
    padding:16px!important;border:1px solid var(--line-2);border-radius:18px!important;
    background:var(--mist)!important;overflow:visible!important
  }
  .devstage::before{display:none!important}
  .devstage .imac{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:none!important;z-index:1}
  .devstage .phone{position:relative!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:150px!important;height:auto!important;margin:0!important;justify-self:end!important;z-index:2;filter:drop-shadow(0 18px 18px rgba(32,33,36,.18))}
  .devstage .phone-screen{height:auto!important;width:100%!important;aspect-ratio:9/19.5}

  /* The statement badge occupies the free corner without covering the copy. */
  .statement-orbit{--spin-size:92px;right:0;top:auto;bottom:4%;}

  /* The ledger focus and panel mark stay light and fully opaque. */
  .scroll-scene .lrow{opacity:1!important;border-left:3px solid transparent;padding-inline:14px}
  .scroll-scene .lrow.motion-current{transform:none!important;border-left-color:var(--red)!important}
  .syncard .sc-mark,.syncard.motion-current .sc-mark{transform:none!important}
}

@media (max-width:370px){
  .rack-index li b{font-size:10px!important}
  .devstage{grid-template-columns:minmax(0,1fr) 108px!important;padding:12px!important}
}

@keyframes product-pair-in{
  from{opacity:0;filter:blur(10px);transform:translateY(12px)}
  to{opacity:1;filter:blur(0);transform:none}
}

@media (prefers-reduced-motion:reduce){
  .statement-orbit{opacity:1!important;filter:none!important;transform:translateY(-50%)!important}
  .product-story-card{animation:none!important}
}