/* Landing page only. The stage stays deep in both themes so the r1's orange glows against it; the sections below follow the theme. */

/* ---- the stage ---- */
.stage{position:relative;isolation:isolate;overflow:hidden;color:var(--stage-ink);background:var(--stage);border-bottom:2px solid var(--line-2)}
.stage::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(46% 58% at 50% 34%,rgba(255,79,18,.36) 0,rgba(255,79,18,.10) 45%,transparent 70%),
    radial-gradient(70% 40% at 50% 100%,rgba(217,119,87,.16),transparent 70%),
    linear-gradient(180deg,var(--stage-2),var(--stage) 60%)}
/* a pixel grid, like the pet's LCD look, fading out toward the edges */
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(246,214,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,214,191,.05) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask:radial-gradient(60% 60% at 50% 40%,#000,transparent);mask:radial-gradient(60% 60% at 50% 40%,#000,transparent)}
.stage-in{max-width:var(--max);margin:0 auto;padding:8px var(--gut) 28px;display:grid;gap:6px;align-content:start;
  min-height:calc(100svh - var(--head-h) - 2px)}
.stage-in>*{min-width:0}

.hero-r1{position:relative;display:flex;flex-direction:column;align-items:center}
.r1-hero{position:relative;width:100%;height:min(42svh,360px);min-height:280px;outline:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:grab}
.r1-hero:active{cursor:grabbing}
.r1-hero:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.r1-hero>canvas{display:block}
.r1-hero.is-3d .r1-ph{display:none}
.pet-holder{position:absolute;left:0;top:0;width:240px;height:282px;opacity:0;pointer-events:none;z-index:-1;overflow:hidden}
.pet-holder iframe{width:240px;height:282px;border:0;position:absolute;inset:0}

.r1-live{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stage-dim)}
.r1-live .dot{width:8px;height:8px;background:var(--r1);box-shadow:0 0 10px var(--r1);animation:blink 1.6s steps(2,end) infinite}
#r1-mood{color:var(--stage-ink);font-weight:700;white-space:nowrap;min-width:33ch}   /* the longest usual label ("Whisper auto · transcribing") fits, so a label change never moves the dot or the hint */
.r1-hint{display:none}
@keyframes blink{50%{opacity:.25}}

/* ---- placeholder r1 (CSS, same footprint) until the 3D one mounts ---- */
.r1-ph{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ph-body{--u:min(.92vw,1px);position:relative;width:min(86%,calc(min(42svh,360px) * .98));aspect-ratio:1/1;max-width:400px;border-radius:13%;
  background:radial-gradient(120% 90% at 22% 10%,var(--r1-hi) 0,var(--r1) 40%,var(--r1-lo) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -8px 18px rgba(120,30,0,.4),0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(255,79,18,.25);
  display:flex;align-items:center;gap:4%;padding:0 6% 0 6%}
.ph-glass{flex:none;width:62%;aspect-ratio:240/282;background:#0b0807;border-radius:5%;padding:2.4%;box-shadow:0 0 0 2px var(--r1-deep)}
.ph-screen{width:100%;height:100%;display:block;border-radius:3%;background:#1b1410;image-rendering:auto}
.ph-side{flex:1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14% 0}
.ph-eye{width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3330 0,#141110 55%,#050404 100%);
  box-shadow:0 0 0 4px var(--r1-lo),inset 0 -3px 6px rgba(0,0,0,.6);display:grid;place-items:center}
.ph-eye i{width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5d6b8a 0,#1b2235 60%,#05060a 100%);
  transform:translate(var(--ex,0),var(--ey,0));transition:transform .25s}
.ph-wheel{position:relative;width:42%;height:52%;border-radius:999px;overflow:hidden;pointer-events:auto;cursor:ns-resize;
  background:linear-gradient(90deg,#1a1311 0,#4a3f3a 30%,#6b5d55 50%,#4a3f3a 70%,#1a1311 100%);box-shadow:0 0 0 3px var(--r1-lo)}
.ph-ribs{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.42) 0 2px,transparent 2px 9px);background-position:0 var(--wy,0px);transition:background-position .18s}
.ph-ptt{position:absolute;right:calc(50% - min(43%,200px) - 6px);top:30%;width:12px;height:20%;border-radius:6px;pointer-events:auto;cursor:pointer;
  background:linear-gradient(90deg,var(--r1-lo),var(--r1) 45%,var(--r1-hi));box-shadow:3px 0 0 var(--r1-deep)}
.ph-ptt.down{transform:translateX(-4px)}

/* ---- the copy ---- */
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-copy .kicker{color:var(--stage-dim);margin-bottom:10px}
.hero-copy h1{font-size:clamp(2rem,8.6vw,4.6rem);letter-spacing:-.05em;line-height:1;margin:0 0 14px;max-width:15ch;color:#fff3ea}
.hl{color:var(--r1);text-shadow:0 0 28px rgba(255,79,18,.45)}
.lede{font-size:clamp(14px,2.2vw,17px);line-height:1.55;max-width:50ch;color:var(--stage-ink);margin-bottom:18px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{background:transparent;color:var(--stage-ink);border-color:var(--stage-line);box-shadow:none}
.btn-ghost:hover{border-color:var(--stage-ink)}
.stage .btn-r1:hover{border-color:#fff}
.stage :focus-visible{outline-color:#ffd166}
.os-note{margin:12px 0 0;font-size:12px;color:var(--stage-dim);min-height:1.2em}
.os-note a{color:var(--stage-ink)}

/* ---- rows below the stage ---- */
.reel,.pricing{padding-top:44px}
.row-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:18px;border-bottom:2px solid var(--line);padding-bottom:10px}
.row-head h2{font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:-.04em}
.row-head p{margin:0;color:var(--dim);font-size:13.5px}

/* video strip: one reel, three clips */
.reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vid{margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.vid-main{grid-column:1/-1}
.vid-ph{position:relative;aspect-ratio:3/4;background:var(--stage);border:2px solid var(--line-2);overflow:hidden;display:grid;place-items:center}
.vid-main .vid-ph{aspect-ratio:16/9}
.vid-ph::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 45%,rgba(255,79,18,.28),transparent 70%),
  repeating-linear-gradient(135deg,transparent 0 10px,rgba(246,214,191,.04) 10px 12px)}
.vid-ph img{position:relative;height:84%;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45))}
.vid-ph video{position:absolute;top:8%;bottom:8%;left:0;right:0;margin:auto;height:84%;width:auto;max-width:90%;object-fit:contain;background:#080808;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45))}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--stage-ink);
  background:rgba(13,8,6,.72);cursor:not-allowed;padding:0}
.play-btn span{width:0;height:0;border-left:14px solid var(--r1);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.vid-main .play-btn{width:76px;height:76px}
.vid-main .play-btn span{border-left-width:22px;border-top-width:14px;border-bottom-width:14px}
.vid figcaption{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.3}
.vid figcaption b{font-weight:700}
.vid figcaption span{color:var(--dim);font-size:11.5px}

/* pricing */
.plans{display:grid;gap:14px}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:2px solid var(--line-2);box-shadow:var(--shadow);padding:18px 18px 20px}
.plan-sub{border-color:var(--r1);box-shadow:4px 4px 0 var(--r1-deep)}
.plan .tag{margin-bottom:4px}
.plan h3{font-size:20px}
.price{margin:10px 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.amt{font-size:clamp(2rem,7vw,2.8rem);font-weight:700;letter-spacing:-.04em;border-bottom:3px dotted var(--line-2);line-height:1}
.per{color:var(--dim);font-size:14px}
.plan-list{list-style:none;padding:0;margin:0 0 16px;flex:1}
.plan-list li{padding:7px 0 7px 22px;border-top:1px dashed var(--line);position:relative;font-size:13.5px}
.plan-list li::before{content:"+";position:absolute;left:2px;color:var(--accent-text);font-weight:700}
.plan .btn{align-self:flex-start}
.fine{margin:14px 0 0;font-size:12.5px;color:var(--dim)}

/* ---- wider ---- */
@media (min-width:640px){
  .plans{grid-template-columns:1fr 1fr}
  .r1-hint{display:inline;text-transform:none;letter-spacing:.02em;margin-left:6px;opacity:.8}
  .r1-hint::before{content:"· "}
}
@media (min-width:1040px){
  .stage-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:24px;padding-top:12px;padding-bottom:36px;
    min-height:min(calc(100svh - var(--head-h) - 2px),760px)}
  .hero-copy{order:-1}
  .r1-hero{height:min(68svh,580px)}
  .ph-body{width:min(86%,calc(min(68svh,580px) * .8))}
  .stage::before{background:
    radial-gradient(38% 60% at 70% 46%,rgba(255,79,18,.40) 0,rgba(255,79,18,.10) 45%,transparent 70%),
    radial-gradient(50% 40% at 70% 100%,rgba(217,119,87,.16),transparent 70%),
    linear-gradient(180deg,var(--stage-2),var(--stage) 60%)}
  .stage::after{-webkit-mask:radial-gradient(45% 60% at 70% 45%,#000,transparent);mask:radial-gradient(45% 60% at 70% 45%,#000,transparent)}
  .reel-grid{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));align-items:stretch}
  .vid-main{grid-column:auto}
  .vid-main .vid-ph{aspect-ratio:auto;flex:1;min-height:0}
  .vid-main .vid-ph img{position:absolute;top:8%;left:50%;transform:translateX(-50%)}   /* the clips set the row height, the reel fills it */
  .pricing .plans{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){ .r1-live .dot{animation:none} }

/* ---- Digihome relaunch (2026-10-19): modes, the watch card, one plan + what you need ---- */
.btn-price{margin-left:10px;padding-left:10px;border-left:2px solid currentColor;opacity:.9}
.modes{padding-top:44px}
.mode-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mode{background:var(--card);border:2px solid var(--line-2);box-shadow:var(--shadow);padding:16px 18px 18px;display:flex;flex-direction:column}
.mode h3{font-size:20px;margin:2px 0 8px}
.mode p{margin:0 0 10px;font-size:14px;line-height:1.55}
.mode .mode-look{margin:auto 0 0;padding-top:10px;border-top:1px dashed var(--line);color:var(--dim);font-size:12.5px}
.watch-card{margin-top:14px;display:flex;gap:18px;align-items:flex-start;border:2px solid var(--r1);box-shadow:4px 4px 0 var(--r1-deep);background:var(--card);padding:16px 18px}
.watch-card h3{font-size:18px;margin:0 0 6px}
.watch-card p{margin:0;font-size:14px;line-height:1.55;max-width:70ch}
.watch-crab{flex:none;margin-top:4px}
.buy-grid{display:grid;gap:14px}
.plan-note{margin:14px 0 0;font-size:12.5px;color:var(--dim)}
.plan-note strong{color:var(--ink)}
.need{border:2px dashed var(--line-2);padding:16px 18px}
.need h3{font-size:17px;margin:0 0 10px}
.need h3+dl,.need h3+p{margin-top:0}
.need dl{margin:0 0 18px;display:grid;gap:4px 14px}
.need dt{font-weight:700;font-size:13.5px}
.need dd{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.need p{font-size:13.5px;line-height:1.55;margin:0 0 14px}
.win-note{border-top:1px dashed var(--line);padding-top:12px}
.win-note.lit{border:2px solid var(--accent);padding:10px 12px;background:var(--bg-2)}
@media (min-width:640px){
  .mode-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .need dl{grid-template-columns:max-content 1fr}
  .need dd{margin:0}
}
@media (min-width:900px){ .buy-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)} }