/* ===========================================================================
   crestnotch.app, the home page's own parts. Stage 1 of the 2026-09-28 redesign.

   The page Zack approved as a prototype ("i love it!", 2026-09-27). page.css,
   the product pages' kit, draws what it shares with /crest (the grounds and
   type, the screens and slices, the review wall, the plan cards, the folds);
   this file draws what only the home page has: the drawn MacBook, its two
   scroll scenes, the carousel, the numbers and the two apps. Every rule is
   scoped under body.home.

   Two scroll scenes carry the page: the hero (a Mac whose notch opens as you
   scroll) and the agents band (a notch that asks, unfolds the command, then
   asks a question). home.js drives both while html.home-scenes is set. Without
   it (no JavaScript, Reduce Motion, a device too slow to keep up, or home.js
   not arriving within four seconds) every scene is one still frame and the
   page reads as an ordinary document.
   =========================================================================== */

/* ------------------------------------------------------ the Mac (the lid) */
.home .menubar{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;
  width:calc(1512 * var(--pt));height:calc(38 * var(--pt));padding:0 calc(18 * var(--pt));
  display:flex;align-items:center;justify-content:space-between;
  font:500 calc(13.5 * var(--pt))/1 var(--text);letter-spacing:0;color:#fff;white-space:nowrap;
  text-shadow:0 0 calc(8 * var(--pt)) rgba(0,0,0,.28)
}
.home .menubar b{font-weight:700}
.home .mb-left,.home .mb-right{display:flex;align-items:center;gap:calc(20 * var(--pt))}
.home .mb-right{gap:calc(16 * var(--pt))}
.home .mb-right svg{height:calc(13 * var(--pt));width:auto;fill:currentColor}
/* The closed music face, on the app's tokens: DS.amber ring (2pt, round caps,
   from 12 o'clock), DS.chipGround (black 55%) with DS.chipRim (white 8%), and
   the chip shadow (black 45%, 4pt, 1pt down). The chips float either side of
   the notch; the housing between them stays clear. */
.home .music-face{height:calc(38 * var(--pt))}
.home .mf-ring{
  position:absolute;left:calc(6 * var(--pt));top:calc(3 * var(--pt));
  width:calc(32 * var(--pt));height:calc(32 * var(--pt));
  filter:drop-shadow(0 calc(1 * var(--pt)) calc(2 * var(--pt)) rgba(0,0,0,.45))
}
.home .mf-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.home .mf-ring circle{fill:none;stroke:#F5B041;stroke-width:2;stroke-linecap:round}
.home .mf-ring img{position:absolute;left:calc(5 * var(--pt));top:calc(5 * var(--pt));width:calc(22 * var(--pt));height:calc(22 * var(--pt));border-radius:50%}
.home .mf-eq{
  position:absolute;left:calc(266 * var(--pt));top:calc(6 * var(--pt));
  width:calc(26 * var(--pt));height:calc(26 * var(--pt));border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:calc(2.5 * var(--pt));
  background:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 max(1px,calc(1 * var(--pt))) rgba(255,255,255,.08),0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgba(0,0,0,.45);
  contain:layout paint
}
.home .mf-eq i{display:block;width:calc(2.5 * var(--pt));height:calc(var(--h,6) * var(--pt));border-radius:999px;background:#f6f6f6}

.home .mac{position:absolute;left:0;top:0;transform-origin:0 0;--sw:min(86vw,1000px);--pt:calc(var(--sw) / 1512)}
/* Crisp when still, smooth when moving: home.js sets .moving only while the
   Mac is being scaled, then drops it so the browser redraws it sharp. */
.home .mac.moving{will-change:transform}
.home .lid{
  position:relative;width:max-content;
  padding:calc(var(--sw) * .0135) calc(var(--sw) * .0135) calc(var(--sw) * .03);
  border:calc(var(--sw) * .0017) solid transparent;
  border-radius:calc(var(--sw) * .031) calc(var(--sw) * .031) calc(var(--sw) * .011) calc(var(--sw) * .011);
  background:
    linear-gradient(#050505,#050505) padding-box,
    linear-gradient(180deg,#74767b 0%,#3f4044 9%,#2a2b2e 50%,#36373b 90%,#54565a 100%) border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.045)
}
.home .lid .screen{width:var(--sw);aspect-ratio:1512 / 982;background:#1c2e7a;border-radius:calc(var(--sw) * .0075) calc(var(--sw) * .0075) 0 0}
.home .lid .wall{width:100%}
.home .hinge{height:calc(var(--sw) * .006);margin:0 calc(var(--sw) * .02);background:linear-gradient(#050505,#1b1b1d)}
.home .base{
  position:relative;height:calc(var(--sw) * .03);margin:0 calc(var(--sw) * -.045);
  border-radius:0 0 calc(var(--sw) * .05) calc(var(--sw) * .05) / 0 0 calc(var(--sw) * .024) calc(var(--sw) * .024);
  background:linear-gradient(180deg,#8d8f94 0%,#5e6065 9%,#3c3d41 42%,#242427 78%,#131315 100%)
}
.home .base::before{ /* the thumb scoop */
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:46%;border-radius:0 0 calc(var(--sw) * .012) calc(var(--sw) * .012);
  background:linear-gradient(180deg,#1c1c1f,#4a4c50)
}

/* -------------------------------------------------------------------- hero */
.home .hero{position:relative;background:var(--black)}
.home .hero-stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;overflow:clip}
.home .hero-copy{position:absolute;left:0;right:0;top:calc(var(--hdr) + clamp(22px,6.4vh,76px));z-index:7;padding:0 20px;text-align:center}
.home .hero-copy .name{font:600 clamp(19px,1.7vw,24px)/1.2 var(--display);letter-spacing:-.016em;margin-bottom:10px;color:var(--onb1)}
.home .hero-copy .lede{margin-top:16px}
/* 2026-10-14: the hero's Homebrew box (Scripts/brew_line.py, inline styles) grew
   and took its label onto its own line. On a short screen (an iPhone SE's 553px)
   that pushed the drawn notch off the first screen, so there the box keeps a
   smaller gap and drops the label: the command reads on its own. !important
   because the line's own styles are inline. */
@media(max-height:600px){.home .hero-copy .brew-cta{margin-top:14px!important}.home .hero-copy .brew-cta>span:first-child{display:none!important}}
.home .hero-caps{position:absolute;left:0;right:0;top:calc(var(--hdr) + clamp(18px,4.6vh,56px));z-index:7;pointer-events:none}
.home .hero-cap{position:absolute;left:0;right:0;padding:0 22px;text-align:center;opacity:0}

/* Without the scenes: one still frame, the panel open. */
html:not(.home-scenes) .home .hero-stage{height:auto;min-height:0;padding:calc(var(--hdr) + 56px) 0 72px;display:flex;flex-direction:column;align-items:center;gap:56px}
html:not(.home-scenes) .home .hero-copy{position:static}
html:not(.home-scenes) .home .hero-caps{display:none}
html:not(.home-scenes) .home .hero .mac{position:relative;transform:none}
html:not(.home-scenes) .home .hero .l-home{opacity:1}
html.home-scenes .home .hero{height:470vh}
html.home-scenes .home .hero-stage{position:sticky;top:0}
/* Until home.js has placed the Mac for the first frame it would sit at the top
   left at full size, so it waits unseen (the four-second fallback in the page's
   head drops the scenes if home.js never arrives). */
html.home-scenes:not(.home-ready) .home .hero .mac{visibility:hidden}

/* ------------------------------------------------------- the short version */
.home .short{background:var(--bg);padding:clamp(84px,11vw,150px) 0 clamp(72px,9vw,120px)}
.home .short h2{margin-bottom:clamp(32px,4vw,56px)}
.home .car{--card-w:min(86vw,1040px);position:relative}
.home .car-track{
  display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px calc(50% - var(--card-w) / 2) 8px
}
.home .car-track::-webkit-scrollbar{display:none}
.home .car-track:focus-visible{outline-offset:-2px}
.home .card{flex:0 0 var(--card-w);scroll-snap-align:center;margin:0}
.home .card-screen{
  --pt:calc(var(--card-w) * .62 / 680);
  position:relative;aspect-ratio:16 / 10;border-radius:28px;overflow:hidden;background:#1c2e7a;
  box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.home .card figcaption{margin:22px 4px 0;font:600 clamp(19px,1.9vw,24px)/1.25 var(--display);letter-spacing:-.016em;color:var(--t1)}
.home .car-ui{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(26px,3vw,40px)}
.home .dots{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:rgba(0,0,0,.06)}
.home .dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.28);cursor:pointer;transition:width .35s ease,background-color .35s ease;overflow:hidden}
.home .dot::before{content:"";position:absolute;inset:-12px -4px}
.home .dot.on{width:38px;background:rgba(0,0,0,.18)}
.home .dot i{position:absolute;inset:0 auto 0 0;width:0;background:var(--t1);border-radius:inherit}
.home .dot.on i{width:100%}
.home .car.playing .dot.on i{width:0;animation:home-fill var(--dwell,5s) linear forwards}
@keyframes home-fill{to{width:100%}}
.home .round{width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.06);cursor:pointer;display:grid;place-items:center;transition:background-color .2s ease}
.home .round:hover{background:rgba(0,0,0,.1)}
.home .round svg{width:16px;height:16px;fill:var(--t1)}
.home .round:disabled{opacity:.35;cursor:default}
.home .play .i-play{display:none}
.home .car:not(.playing) .play .i-play{display:block}
.home .car:not(.playing) .play .i-pause{display:none}
/* The dots and buttons are built and wired by home.js; without it the row
   scrolls by hand and the controls would do nothing. Without the scenes
   (Reduce Motion, a slow device) nothing plays by itself, so there is no play
   button either; the arrows and dots still move it. */
html:not(.home-js) .home .car-ui{display:none}
html:not(.home-scenes) .home .car .play{display:none}

/* ------------------------------------------------------------------ agents */
.home .agents{position:relative;background:var(--black)}
.home .ag-stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;overflow:clip;display:flex;flex-direction:column}
.home .ag-caps{position:relative;flex:0 0 auto;height:calc(var(--hdr) + clamp(24px,6vh,72px) + 3.4em);font-size:clamp(26px,3.4vw,48px)}
.home .ag-cap{position:absolute;left:0;right:0;bottom:.9em;padding:0 22px;text-align:center;opacity:0;font-size:1em}
.home .ag-cap:first-child{opacity:1}
/* The kit draws the slice; in the pinned stage it takes the room the captions
   leave, and its screen fills it. */
.home .ag-stage .slice{flex:1 1 auto;align-self:center}
.home .ag-stage .slice .screen{height:100%}
.home .slice .strip{transition:opacity .45s ease}
.home .slice .strip.on{opacity:1}
.home .sheet-wrap{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;overflow:hidden;
  /* Crest 6 (2026-09-30): the sheet's own size rides on the wrap in index.html
     (--ww wide, --wh tall unfolded, --wr corners, in points), beside its picture. */
  width:calc(var(--ww,556) * var(--pt));height:calc(var(--sh,38) * var(--pt));
  border-radius:0 0 calc(var(--wr,28) * var(--pt)) calc(var(--wr,28) * var(--pt))
}
.home .sheet-wrap .layer{opacity:1}
/* Crest 6 (2026-09-30): the pill sits under the sheet, which opens over it from
   the notch down (the pill is narrower than the sheet, so it never shows past it). */
.home .slice .l-claude,.home .slice .l-codex,.home .slice .l-copilot{z-index:2}
.home .agent-names{display:flex;justify-content:center;gap:10px;margin-top:18px;font:500 15px/1.3 var(--text);letter-spacing:-.01em}
.home .agent-names span{padding:5px 12px;border-radius:999px;color:var(--onb3);transition:color .3s ease,background-color .3s ease}
.home .agent-names span.on{color:var(--onb1);background:rgba(255,255,255,.1)}
html:not(.home-scenes) .home .agents{padding-bottom:40px}
html:not(.home-scenes) .home .ag-stage{height:auto;min-height:0}
html:not(.home-scenes) .home .ag-caps{height:auto;padding-top:72px}
html:not(.home-scenes) .home .ag-cap{position:static;margin-bottom:.5em;opacity:1}
html:not(.home-scenes) .home .ag-cap:last-child{display:none}
html:not(.home-scenes) .home .slice{flex:none;height:calc(210 * var(--pt))}
html:not(.home-scenes) .home .sheet-wrap{--sh:var(--wh,229)}
html:not(.home-scenes) .home .slice .l-claude{opacity:1}
html.home-scenes .home .agents{height:330vh}
html.home-scenes .home .ag-stage{position:sticky;top:0}

/* ----------------------------------------------------------------- numbers */
.home .numbers{background:var(--bg);padding:clamp(84px,11vw,150px) 0}
.home .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 28px}
.home .num b{display:block;font:600 clamp(52px,6.6vw,96px)/1 var(--display);letter-spacing:-.035em;color:var(--t1)}
.home .num b small{font-size:.42em;letter-spacing:-.02em;margin-left:.12em}
.home .num span{display:block;margin-top:14px;max-width:16em;font-size:clamp(17px,1.4vw,19px);line-height:1.35;color:var(--t3);font-weight:500}
@media(max-width:860px){.home .nums{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------------- suite */
.home .suite{background:var(--black);padding:clamp(96px,12vw,170px) 0}
.home .suite h2{text-align:center}
.home .apps{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(40px,5vw,72px)}
.home .app{background:#111113;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.home .app-top{padding:clamp(28px,3.4vw,44px) clamp(26px,3.4vw,44px) 0}
.home .app-top img{width:56px;height:56px;margin-bottom:18px}
.home .app h3{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.024em}
.home .app p{margin-top:8px;font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--onb2);font-weight:500;letter-spacing:-.012em}
.home .app-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.home .app-links .btn{height:36px;padding:0 18px;font-size:15px}
.home .app figure{margin:clamp(26px,3vw,40px) clamp(26px,3.4vw,44px) 0;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.home .app figure img{width:118%;max-width:none;height:auto;margin-left:-9%}
/* Ballot 99 L2 (2026-10-13): each app card is one link to its app's page. The
   card's "Learn more" (a.card-link) lays a ::before over the whole card, out of
   flow, so nothing moves; the card's other two doors sit above it. Clarity
   counted dead clicks on / rising from 0.16 to 0.63 a session, these cards
   among the targets. */
.home .app{position:relative}
.home .app .card-link::before{content:"";position:absolute;inset:0;z-index:1}
.home .app-links a:not(.card-link){position:relative;z-index:2}
/* A price that is not a link or a button scrolls to the plans (home.js); one in
   the plans, a link, a button or a dialog keeps its own cursor. */
.home :is([data-price],[data-sub-price],[data-sale-line]){cursor:pointer}
.home :is(#pricing,a,button,[role="dialog"]) :is([data-price],[data-sub-price],[data-sale-line]){cursor:inherit}
/* Side by side, the two cards' buttons and pictures line up: each line keeps room
   for two rows, whichever of them wraps. */
@media(min-width:761px){.home .app-top > p:not(.app-links){min-height:2.6em}}
.home .suite-more{text-align:center;margin-top:36px}
@media(max-width:760px){.home .apps{grid-template-columns:1fr}}

/* ------------------------------------------------------------ small screens */
@media(max-width:760px){
  .home .card-screen{--pt:calc(var(--card-w) * .94 / 760);aspect-ratio:4 / 5;border-radius:22px}
  .home .car-ui .prev,.home .car-ui .next{display:none}
}