#notchStage /* ---------- the live demo (mirrors the real 4.0 app) ---------- */
.demo-wrap{margin:62px auto 0;max-width:760px}
#notchStage .demo-caption{font-size:12px;color:var(--t3);margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:8px}
#notchStage .demo-caption .kbd{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;
  border:1px solid var(--hair);border-radius:5px;padding:2px 7px;color:var(--t2)}
#notchStage{position:relative}
#notchStage /* a believable MacBook screen top: menu bar, #notchStage camera in the notch, #notchStage a quiet
   wallpaper glow. The panel drops from the notch like the real app. */
.screen{position:relative;border-radius:16px;border:1px solid var(--hair2);
  overflow:hidden;padding-bottom:24px;min-height:212px;
  background:radial-gradient(120% 95% at 50% 0%,#171310 0%,#100e0d 45%,#0b0c0e 100%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
#notchStage .menubar{position:relative;height:30px;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;font-size:12px;color:rgba(245,245,244,.72)}
#notchStage .mb-left{display:flex;gap:16px;align-items:center}
#notchStage .mb-left b{font-weight:600;color:rgba(245,245,244,.9)}
#notchStage .mb-dot{width:11px;height:11px;border-radius:50%;background:rgba(245,245,244,.85)}
@media(max-width:640px){#notchStage .mb-left span{display:none}}
#notchStage .notch{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:158px;height:32px;background:#000;border-radius:0 0 11px 11px;cursor:pointer;z-index:6;
  display:flex;align-items:center;justify-content:center}
#notchStage .notch .cam{width:5px;height:5px;border-radius:50%;background:#151a17;
  box-shadow:inset 0 0 2px rgba(160,180,200,.35)}
#notchStage .hint{position:absolute;left:0;right:0;top:104px;text-align:center;font-size:13px;
  color:var(--t3);transition:opacity .25s;pointer-events:none}
#notchStage.open .hint{opacity:0}
#notchStage .wing{position:absolute;top:0;height:30px;display:flex;align-items:center;gap:7px;
  transition:opacity .18s;z-index:5}
#notchStage .wing.l{right:calc(50% + 88px);justify-content:flex-end}
#notchStage .wing .wt{font-size:9.5px;color:var(--t2);white-space:nowrap}
#notchStage.open .wing{opacity:0}
#notchStage .dot{width:6px;height:6px;border-radius:50%;flex:none}
#notchStage .dot.g{background:var(--green)} #notchStage .dot.r{background:var(--red)} #notchStage .dot.a{background:var(--amber)}
#notchStage .dot.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){#notchStage .dot.pulse{animation:none}}
#notchStage .eq{display:flex;align-items:flex-end;gap:1.5px;height:10px}
#notchStage .eq i{width:2px;background:rgba(245,245,244,.6);border-radius:1px;height:3px;transition:height .3s ease}

#notchStage .panel{width:min(660px,94%);background:var(--panel);
  border:1px solid var(--hair);border-top:0;border-radius:0 0 20px 20px;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.66);z-index:4;
  /* Anchored to the menubar's bottom edge, not left to document flow: the
     owner caught Safari opening a gap between the notch and the panel. An
     absolute top means no engine's margin or flow rules can detach them;
     the panel provably comes OUT of the notch. */
  /* top:0, not below the menubar: the open panel hangs from the SCREEN'S top
     edge and the black notch sits embedded in its top center, the way the real
     NotchShape does. Menu bar text flanks it. Anything else reads as "a notch
     AND a panel", which the owner rejected twice. */
  position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);
  overflow:hidden;height:0;opacity:0;
  transition:height .34s var(--spring),opacity .16s ease}
#notchStage.open .panel{opacity:1}
#notchStage .phead{height:46px;display:flex;align-items:flex-end;gap:12px;
  padding:0 14px 7px;border-bottom:1px solid var(--hair2)}
#notchStage .seg{display:flex;background:var(--hair2);border-radius:8px;padding:2px}
#notchStage .seg button{font:inherit;border:0;background:none;cursor:pointer;
  padding:4px 11px;border-radius:6px;font-size:10.5px;color:var(--t2);
  display:flex;align-items:center;gap:5px;transition:background .14s,color .14s}
#notchStage .seg button:hover{color:var(--t1)}
#notchStage .seg button.on{background:var(--fill2);color:var(--t1)}
#notchStage .seg button .adot{width:4.5px;height:4.5px;border-radius:50%;background:var(--amber);display:none}
#notchStage .seg button.engaged .adot{display:block}
#notchStage .autonote{font-size:10px;color:var(--t3)}
#notchStage .phead .sp{flex:1}
#notchStage .hclock{font-size:10.5px;color:var(--t3)}
#notchStage .quiet{font:inherit;border:0;background:none;cursor:pointer;font-size:10px;color:var(--t2);
  padding:5px 9px;border-radius:6px;transition:background .12s,color .12s}
#notchStage .quiet:hover{background:var(--fill);color:var(--t1)}
@media(max-width:620px){
  #notchStage /* The row is wider than the phone; `.screen` clips, #notchStage so it must scroll here
     or its right-hand controls are unreachable rather than merely tight. */
  .phead{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:9px}
  #notchStage .phead::-webkit-scrollbar{display:none}
  #notchStage .phead > *{flex:none}
  #notchStage .phead .sp{flex:1 0 8px}
  #notchStage .phead .seg button{padding:8px 12px;font-size:11px}   #notchStage /* a tappable mode switch */
  .phead .quiet{padding:8px 10px}
  #notchStage .phead .spark{width:34px;height:34px}
}
#notchStage .dcontent{position:relative;height:calc(100% - 42px)}
#notchStage .view{position:absolute;inset:0;padding:16px 18px;opacity:0;pointer-events:none;
  transform:translateX(8px);transition:opacity .18s ease,transform .22s var(--spring);text-align:left}
#notchStage .view.on{opacity:1;pointer-events:auto;transform:none}
#notchStage .dlbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
  display:flex;align-items:center;gap:6px}
#notchStage .dhair{height:1px;background:var(--hair2);border:0}
#notchStage .vdiv{width:1px;background:var(--hair2);align-self:stretch;margin:2px 0}
#notchStage .dbtn{font:inherit;border:0;cursor:pointer;font-size:10.5px;font-weight:600;border-radius:6px;
  padding:5px 11px;background:var(--amber);color:var(--amber-ink)}
#notchStage .gbtn{font:inherit;border:0;cursor:pointer;font-size:10px;font-weight:500;border-radius:6px;
  padding:5px 10px;background:var(--fill);color:var(--t2)}
#notchStage .gbtn:hover{background:var(--fill2);color:var(--t1)}
#notchStage .dsw{position:relative;width:32px;height:19px;border-radius:10px;background:rgba(255,255,255,.12);
  border:0;cursor:pointer;transition:background .16s;flex:none;padding:0}
#notchStage .dsw i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#f5f5f4;transition:left .16s var(--spring)}
#notchStage .dsw.on{background:var(--amber)}
#notchStage .dsw.on i{left:15px}
#notchStage .dbar{position:relative;height:3.5px;border-radius:2px;background:rgba(255,255,255,.09)}
#notchStage .dbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--amber)}
#notchStage .dbar .knob{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#f5f5f4;
  transform:translate(-50%,-50%)}
#notchStage .dbar.plain .fill{background:rgba(245,245,244,.5)}
#notchStage .drow{display:flex;align-items:center;gap:9px}
#notchStage .drow .tt{font-size:9.5px;color:var(--t3);width:40px;flex:none}
#notchStage .drow .et{font-size:11.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notchStage .tbtn{width:28px;height:28px;border:0;border-radius:7px;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
#notchStage .tbtn:hover{background:var(--fill)}
#notchStage .tbtn svg{width:12px;height:12px;fill:rgba(245,245,244,.85)}
#notchStage .tbtn.prom{background:rgba(255,255,255,.12);border-radius:50%;width:30px;height:30px}
#notchStage .demo-note{font-size:11px;color:var(--t3);margin-top:16px;text-align:center}
#notchStage /* Claude co-pilot (the spark) */
.spark{width:26px;height:26px;border:0;border-radius:7px;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s;flex:none}
#notchStage .spark:hover{background:var(--fill)}
#notchStage .spark svg{width:14px;height:14px;fill:none;stroke:var(--amber);stroke-width:1.7}
#notchStage .spark.on{background:rgba(255,176,0,.14)}
#notchStage .cchip{font:inherit;border:0;font-size:10.5px;font-weight:500;color:var(--t2);padding:4px 11px;
  border-radius:6px;background:var(--fill);cursor:pointer;transition:background .12s,color .12s}
#notchStage .cchip.on{background:var(--fill2);color:var(--t1);font-weight:600}
#notchStage .cq{font-size:12px;color:var(--t1);line-height:1.5}
#notchStage .cans{font-size:12px;color:var(--t1);line-height:1.55;margin-top:6px}
#notchStage .plan{display:flex;flex-direction:column;gap:6px;margin-top:8px}
#notchStage .prow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;background:var(--fill)}
#notchStage .pchk{width:15px;height:15px;border-radius:4px;background:var(--amber);flex:none;
  display:flex;align-items:center;justify-content:center}
#notchStage .pchk svg{width:9px;height:9px;fill:none;stroke:var(--amber-ink);stroke-width:3}
#notchStage .pico{width:14px;height:14px;flex:none;stroke:var(--t3);fill:none;stroke-width:1.7}
#notchStage .pttl{font-size:11.5px;color:var(--t1)}
#notchStage .pmeta{font-size:9.5px}
#notchStage /* ---- the suite transport, #notchStage INSIDE the one real panel ----------------------
   This used to be `#suiteStage`: a SECOND black panel further down the page, #notchStage near-identical to the one above it, #notchStage whose own caption admitted it was
   "recreated from the modules Crest ships". Two panels, #notchStage one of them
   apologising, #notchStage is worse than one. The rows moved into the hero panel's Work
   mode (2026-07-26), #notchStage which is where the real app keeps them, #notchStage and the second
   panel and its "moments" cards are gone.

   Every string these rows show is the string the Swift ships. See
   Sources/Crest/UI/MinutesRecView.swift ("Record this meeting", #notchStage "Record now", #notchStage "Saved to Minutes") and TakeRecView.swift ("Take isn't rolling.", #notchStage the
   Mark / Pause / Cut transport and its shortcuts). */
.srows{margin-top:15px;padding:2px 0 26px;border-top:1px solid var(--hair2);position:relative}
#notchStage .srow{display:flex;align-items:center;gap:11px;padding:9px 2px}
#notchStage .srow + .srow{border-top:1px solid var(--hair2)}
#notchStage .sglyph{width:28px;height:28px;border-radius:8px;border:1px solid var(--hair);
  background:var(--inset);display:grid;place-items:center;flex:none}
#notchStage .sglyph svg{width:14px;height:14px;fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;display:block}
#notchStage .sglyph.min svg{stroke:var(--sage)}
#notchStage .sglyph.take svg{stroke:var(--cob)}
#notchStage .smeta{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
#notchStage .sname{font-size:11.5px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notchStage .ssub{font-size:9.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notchStage .sside{display:flex;align-items:center;gap:7px;flex:none}
#notchStage .stimer{font-family:var(--mono);font-size:12.5px;color:var(--t1);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
#notchStage .stimer::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rec);
  flex:none;animation:pulse 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#notchStage .stimer::before{animation:none}}
#notchStage .srec{font:inherit;border:0;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;border-radius:7px;padding:6px 12px;
  background:var(--fill);color:var(--t1);transition:background .14s}
#notchStage .srec:hover{background:var(--fill2)}
#notchStage .srec .rdot{width:7px;height:7px;border-radius:50%;background:var(--rec);flex:none}
#notchStage .schip{font:inherit;border:1px solid var(--hair);cursor:pointer;font-size:10px;font-weight:600;
  border-radius:7px;padding:5px 10px;background:transparent;color:var(--t2);
  transition:border-color .14s,color .14s}
#notchStage .schip:hover{border-color:var(--hair3);color:var(--t1)}
#notchStage .schip.key{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
#notchStage .schip.cut{color:var(--amber);border-color:rgba(255,176,0,.34)}
#notchStage .schip.cut:hover{border-color:rgba(255,176,0,.6);color:var(--amber)}
#notchStage .sdone{font-size:10.5px;font-weight:600;color:var(--sage)}
#notchStage /* NB: `.stimer` and `.srec` set display:flex, #notchStage which beats the browser's own
   [hidden]{display:none} #notchStage and left a stopped recording showing its running timer
   and its Record button next to "Saved". The fix is one line in /suite.css
   ([hidden]{display:none!important}#notchStage ), #notchStage because the same bug was also live in the
   pricing card and the reviews CTA. Do not re-add a local copy here. */
/* The panel's own toast, #notchStage the one the app shows after it files something. It
   sits in the padding the rows reserve for it, #notchStage so it can never land on top of
   a control or get clipped by the panel's overflow. */
.ptoast{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(5px);
  font-size:10px;color:var(--t2);background:#17181c;border:1px solid var(--hair);
  border-radius:999px;padding:4px 11px;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--spring);z-index:8}
#notchStage .ptoast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#notchStage .ptoast b{color:var(--t1);font-weight:600}
@media(max-width:620px){
  #notchStage .ssub{display:none}
  #notchStage .srow{gap:9px}
}