/* Section 1: the hero room (owner: structure). One normal section, one screen tall.
   The room is the one-world office as built: pre-rendered cell-resolution art upscaled with
   image-rendering: pixelated, placed in world cells (landscape world 720 x 440 cells,
   portrait 400 x 520, centred and bottom-aligned, cropped by the screen, never shrunk).
   The view through the window lags behind the page as it scrolls (parallax.js data-px),
   the lid closes and reopens on its own on a slow loop while the room is on screen
   (hero.js), and a few stepped compositor animations keep the night alive. */
/* One screen tall, but never taller than the lower 330 cells of the room art (anchored at
   the bottom): a tall window would otherwise show bare wall above the window. */
.hero{position:relative;height:max(min(100svh,calc(330 * var(--cell))),500px);overflow:hidden;contain:paint;background:var(--night);color:var(--tx)}
.hr-world{position:absolute;bottom:0;left:calc(50% - 360 * var(--cell));width:calc(720 * var(--cell));height:calc(440 * var(--cell));pointer-events:none}
.hr-world div,.hr-world i{position:absolute;display:block}
.hr-world div{background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.hr-view{overflow:hidden}
.hr-cloudclip{overflow:hidden}
.hr-clouds{left:0;top:0;height:100%}
.hr-room{left:0;top:0;width:100%;height:100%}
.hr-lid,.hr-steam,.hr-spin{overflow:hidden}
.hr-lid>i,.hr-steam>i,.hr-spin>i{left:0;top:0;width:100%;transform:translate3d(0,0,0);background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.hr-lid{left:calc(358 * var(--cell));top:calc(286 * var(--cell));width:calc(176 * var(--cell));height:calc(128 * var(--cell))}
.hr-lid>i{height:calc(3072 * var(--cell));background-image:url(../hero/assets/d-lid-9e68606d4d.webp)}
.hr-spin{left:calc(401 * var(--cell));top:calc(357 * var(--cell));width:calc(3 * var(--cell));height:calc(7 * var(--cell))}
.hr-spin>i{height:600%;background-image:url(../hero/assets/d-spin-cf9c93b031.webp)}
.hr-steam{left:calc(544 * var(--cell));top:calc(354 * var(--cell));width:calc(21 * var(--cell));height:calc(26 * var(--cell))}
.hr-steam>i{height:800%;background-image:url(../hero/assets/d-steam-2af3a6778a.webp)}
.hr-tags{left:0;top:0;width:0;height:0}
.hr-tag[data-agent=claude]{left:calc(376 * var(--cell));top:calc(330 * var(--cell))}
.hr-tag[data-agent=codex]{left:calc(462 * var(--cell));top:calc(352 * var(--cell))}

/* The open display's spinner belongs to the open lid only. */
.hr-spin{visibility:hidden}
html:not([data-hero]) .hr-spin,html[data-hero=open] .hr-spin{visibility:visible}
/* The phone on the desk lights up when an agent pings. */
.hr-ping{left:calc(314 * var(--cell));top:calc(394 * var(--cell));width:calc(74 * var(--cell));height:calc(27 * var(--cell));background-image:url(../hero/assets/d-ping-778f2a7388.webp)}
.hr-ping{opacity:0;transition:opacity .9s steps(3)}
.hero.is-ping .hr-ping{opacity:1;transition-duration:.12s}

/* ---------- Status tags over the closed laptop (pixel plates drawn by hero.js) ---------- */
.hr-tag{position:absolute;margin:0;opacity:0;transform:translate3d(0,calc(4 * var(--cell)),0);transition:opacity .36s steps(3),transform .36s steps(3)}
.hr-tag[data-agent=codex]{transition-delay:.18s}
html[data-lid=closed] .hr-tag{opacity:1;transform:translate3d(0,0,0)}
.hr-tag>:not(canvas){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hr-tag canvas{display:block;width:calc(var(--tw,80) * var(--cell));height:calc(11 * var(--cell));image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- Ambient: slight, compositor-only, stepped; only while the room is on screen ---------- */
@keyframes hr-drift{to{transform:translate3d(calc(var(--P) * var(--cell) * -1),0,0)}}
@keyframes hr-strip{to{transform:translate3d(0,-100%,0)}}
@keyframes hr-tw-a{0%{opacity:0}62%{opacity:1}}
@keyframes hr-tw-b{0%{opacity:1}71%{opacity:0}}
/* Window twinkles: a few lit windows of the city switch on or off now and then. */
.hr-city>i{width:var(--cell);height:var(--cell);background:var(--light);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .hr-clouds{animation-name:hr-drift;animation-timing-function:steps(var(--P));animation-iteration-count:infinite;animation-direction:alternate}
  .hr-steam>i{animation:hr-strip 2.6s steps(8) infinite}
  .hr-city>i{animation-timing-function:step-end;animation-iteration-count:infinite}
  .hr-city>i:nth-child(1){animation-name:hr-tw-a;animation-duration:11s;animation-delay:-5.2s}
  .hr-city>i:nth-child(2){animation-name:hr-tw-b;animation-duration:14s;animation-delay:-6s}
  .hr-city>i:nth-child(3){animation-name:hr-tw-a;animation-duration:17s;animation-delay:-3s}
  .hr-city>i:nth-child(4){animation-name:hr-tw-b;animation-duration:14s;animation-delay:-6s}
  .hr-city>i:nth-child(5){animation-name:hr-tw-a;animation-duration:9s;animation-delay:-7.4s}
  .hr-city>i:nth-child(6){animation-name:hr-tw-b;animation-duration:19s;animation-delay:-12s}
  .hr-city>i:nth-child(7){animation-name:hr-tw-a;animation-duration:13s;animation-delay:-2s}
  html:not([data-hero]) .hr-spin>i,html[data-hero=open] .hr-spin>i{animation:hr-strip .84s steps(6) infinite}
}
/* Off screen, in a hidden tab or as a still: nothing ticks. */
.hero:not(.is-run) :is(.hr-clouds,.hr-steam>i,.hr-spin>i,.hr-city>i){animation-play-state:paused}
html.is-lo .hero *{animation:none}

/* ---------- Copy, composed on the wall ---------- */
.hr-copy{position:absolute;z-index:1;left:max(24px,calc(50% - var(--copy-col) * var(--cell)));top:max(calc(var(--nav-h) + 24px),calc(100% - var(--copy-row) * var(--cell)));width:min(max(560px,calc(var(--cell) * 176)),calc(100% - 48px))}
.hero{--copy-col:206;--copy-row:250;--cta-row:70}
.hr-copy h1{font-size:clamp(42px,calc(var(--cell) * 23),112px);line-height:1;font-weight:700;letter-spacing:-.045em;max-width:8em;text-wrap:balance}
.hr-hl{color:var(--light)}
.hr-act{margin-top:calc(var(--cell) * 7)}
.hr-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hr-price{font-size:14.5px;line-height:1.35;color:var(--tx2)}
.hr-price strong{font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--tx)}
.hr-price span{white-space:nowrap}
.hero .laurel-slot{margin-top:26px}
/* The fine print and "Hold Option." share one slot under the call to action: while the lid
   closes the gesture steps in, on the wall with the rest of the copy. */
.hr-slot{display:grid;margin-top:16px}
.hr-slot>*{grid-area:1/1}
.hr-fine{font-size:14px;line-height:1.4;color:var(--tx2)}
.hr-hold{display:flex;align-items:center;gap:calc(var(--cell) * 4);white-space:nowrap}
.hr-hold h2{font-size:max(22px,calc(var(--cell) * 10));line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--tx)}
.hr-hold p{margin-top:calc(var(--cell) * 2);font-size:max(14px,calc(var(--cell) * 5));line-height:1.25;color:var(--tx2)}
.hr-key{position:relative;flex:none;width:calc(30 * var(--cell));height:calc(22 * var(--cell));overflow:hidden}
.hr-key>i{position:absolute;left:0;top:0;width:100%;height:200%;transform:translate3d(0,0,0);background:url(../hero/assets/hold-key-942568cf44.webp) 0 0/100% 100% no-repeat;image-rendering:pixelated}
/* With JS the caption and the fine print take turns with the lid (hero.js sets data-hero). */
/* The caption starts hidden before hero.js runs too, so a reload never flashes both. */
.hr-fine,.hr-hold{transition:opacity .3s steps(3),visibility 0s linear .3s}
.hr-hold{opacity:0;visibility:hidden}
html:is([data-hero=closing],[data-hero=closed]) .hr-hold{opacity:1;visibility:visible;transition:opacity .3s steps(3),visibility 0s}
html:is([data-hero=closing],[data-hero=closed]) .hr-fine{opacity:0;visibility:hidden}
/* Without JS both show, one under the other. */
@media (scripting:none){.hr-slot{display:block}.hr-hold{opacity:1;visibility:visible;margin-top:14px}}
/* The key goes down a beat after the caption arrives (closing), and comes back up. */
.hr-key>i{transition:transform 0s linear .12s}
html[data-hero=closing] .hr-key>i{transform:translate3d(0,-50%,0);transition-delay:.24s}

/* ---------- Portrait: the headline under the nav, the window under the headline, the
   laptop on the desk under it, the call to action on the desk below the laptop ----------
   Laid out from the top down: the headline sits a fixed step under the nav (three lines,
   line-height 1, so 3 x its size tall), the room is placed so the window's rod sits 14 px
   under it (art row 208), and the call to action follows in the flow at art row 432, under
   the laptop (rows 316 to 421) and the phone on the desk (to row 432). The room art
   (gen-hero.py, one tall image) runs on below as the desk's front and the floor falling to
   black; the hero is at least tall enough to end in that black (--hr-black), so the next
   section starts on black with no seam whatever the cell size. */
@media (max-width:759px),(max-aspect-ratio:4/5){
  .hero{--h1fs:clamp(34px,calc(var(--cell) * 21),60px);--h1y:calc(var(--nav-h) + 20px);--hx:max(20px,calc(50% - 84 * var(--cell)));--wy:calc(var(--h1y) + 3 * var(--h1fs) + 14px);height:auto;min-height:calc(var(--wy) + (var(--hr-black) - 208) * var(--cell))}
  .hr-world{left:calc(50% - 200 * var(--cell));top:calc(var(--wy) - 208 * var(--cell));bottom:auto;width:calc(400 * var(--cell));height:calc(var(--hr-rows) * var(--cell))}
  .hr-lid{left:calc(138 * var(--cell));top:calc(316 * var(--cell));width:calc(132 * var(--cell));height:calc(105 * var(--cell))}
  .hr-lid>i{height:calc(2520 * var(--cell));background-image:url(../hero/assets/p-lid-88cd4a37d4.webp)}
  .hr-spin{left:calc(160 * var(--cell));top:calc(373 * var(--cell))}
  .hr-spin>i{background-image:url(../hero/assets/p-spin-cf9c93b031.webp)}
  .hr-steam{left:calc(268 * var(--cell));top:calc(378 * var(--cell));width:calc(17 * var(--cell));height:calc(18 * var(--cell))}
  .hr-steam>i{background-image:url(../hero/assets/p-steam-f4fd78f604.webp)}
  .hr-ping{left:calc(90 * var(--cell));top:calc(408 * var(--cell));width:calc(62 * var(--cell));height:calc(24 * var(--cell));background-image:url(../hero/assets/p-ping-9a0d06b4ce.webp)}
  .hr-tag[data-agent=claude]{left:calc(142 * var(--cell));top:calc(346 * var(--cell))}
  .hr-tag[data-agent=codex]{left:calc(186 * var(--cell));top:calc(366 * var(--cell))}
  .hr-copy{position:relative;left:auto;top:auto;width:auto;padding:var(--h1y) 20px 24px var(--hx)}
  .hr-copy h1{font-size:var(--h1fs);max-width:8.4em}
  .hr-act{margin-top:calc(14px + 224 * var(--cell))}
  .hr-cta{gap:14px;flex-wrap:nowrap}
  .hr-price{font-size:13.5px}
  .hr-price strong{font-size:17px}
  .hr-slot{margin-top:12px}
  .hr-fine{font-size:13px}
  .hr-hold h2{font-size:max(20px,calc(var(--cell) * 11))}
  .hr-hold p{font-size:max(13px,calc(var(--cell) * 6.5))}
}
@media (max-width:379px){.nav-links a[href="/changelog"]{display:none}}
/* Phones: the headline and the call to action on the gutter, and the room's own cell: the
   largest whole step at which the headline, the room down to the laptop and the whole call
   to action (the button, the laurel and the fine print or "Hold Option") fit one screen:
   about 216 px of nav, gaps and text plus 309 cells (63 of headline, 224 of room, 22 of
   key). Short phones (an SE) keep the 1.5 px floor with the headline a step higher. */
@media (max-width:759px){
  .hero{--hx:var(--gutter)}
  @supports (width:round(nearest,1px,1px)){
    .hero{--cell:clamp(1.5px,min(round(nearest,100vw / 195,.5px),round(down,(100svh - 216px) / 309,.5px)),4px)}
  }
}
@media (max-width:759px) and (max-height:700px){.hero{--h1y:calc(var(--nav-h) + 10px)}}
@media (max-width:759px) and (min-resolution:2.5dppx){
  @supports (width:round(nearest,1px,1px)){
    .hero{--cell:clamp(1.5px,min(round(nearest,100vw / 195,.5px),round(down,(100svh - 216px) / 309,calc(1px / 3))),4px)}
  }
}
@media (min-width:1680px) and (min-height:960px) and (min-aspect-ratio:4/5){
  .hr-price{font-size:16px}
  .hr-price strong{font-size:22px}
  .hr-fine{font-size:15.5px}
}

/* ---------- Reduced motion: the meaningful still (lid closed, agents running, clam blue) ---------- */
@media (prefers-reduced-motion:reduce){
  .hr-tag,.hr-fine,.hr-hold,.hr-key>i,.hr-ping{transition:none}
  html[data-hero=closed] .hr-key>i{transform:translate3d(0,-50%,0)}
}

/* gen:start (build/site/tools/gen-hero.py; do not edit by hand) */
.hr-room{left:calc(-240 * var(--cell));width:calc(1200 * var(--cell));background-image:url(assets/hero/d3-room-93e3c08c89.webp)}
.hr-view{left:calc(340 * var(--cell));top:calc(175 * var(--cell));width:calc(244 * var(--cell));height:calc(170 * var(--cell))}
.hr-sky,.hr-city,.hr-near{left:0;top:calc(-48 * var(--cell));width:calc(244 * var(--cell));height:calc(220 * var(--cell))}
.hr-sky{background-image:url(assets/hero/d-sky-1c7f0c5f09.webp)}
.hr-city{background-image:url(assets/hero/d-city-2f38b4e70b.webp)}
.hr-near{background-image:url(assets/hero/d-near-91088d07c2.webp)}
.hr-cloudclip{left:calc(0 * var(--cell));top:calc(102 * var(--cell));width:calc(300 * var(--cell));height:calc(34 * var(--cell))}
.hr-clouds{width:calc(300 * var(--cell));--P:40;background-image:url(assets/hero/d-clouds-291629bbaf.webp);animation-duration:60s}
.ft::before{left:calc(50% - 600 * var(--cell));width:calc(1200 * var(--cell));height:calc(44 * var(--cell));background-image:url(assets/hero/d3-blend-93e6ad6d65.webp)}
.hr-city>i:nth-child(1){left:calc(211 * var(--cell));top:calc(149 * var(--cell))}
.hr-city>i:nth-child(2){left:calc(189 * var(--cell));top:calc(166 * var(--cell))}
.hr-city>i:nth-child(3){left:calc(62 * var(--cell));top:calc(153 * var(--cell))}
.hr-city>i:nth-child(4){left:calc(75 * var(--cell));top:calc(146 * var(--cell))}
.hr-city>i:nth-child(5){left:calc(169 * var(--cell));top:calc(158 * var(--cell))}
.hr-city>i:nth-child(6){left:calc(35 * var(--cell));top:calc(150 * var(--cell))}
.hr-city>i:nth-child(7){left:calc(51 * var(--cell));top:calc(166 * var(--cell))}
@media (max-width:759px),(max-aspect-ratio:4/5){
  .hero{--hr-rows:573;--hr-black:565}
  .hr-room{left:0;width:calc(400 * var(--cell));background-image:url(assets/hero/p8-room-52dd9f9401.webp)}
  .hr-view{left:calc(140 * var(--cell));top:calc(226 * var(--cell));width:calc(154 * var(--cell));height:calc(134 * var(--cell))}
  .hr-sky,.hr-city,.hr-near{left:0;top:calc(-48 * var(--cell));width:calc(154 * var(--cell));height:calc(184 * var(--cell))}
  .hr-sky{background-image:url(assets/hero/p-sky-9b9b865582.webp)}
  .hr-city{background-image:url(assets/hero/p-city-4196bc3cb3.webp)}
  .hr-near{background-image:url(assets/hero/p-near-a9bb95d632.webp)}
  .hr-cloudclip{left:calc(-70 * var(--cell));top:calc(83 * var(--cell));width:calc(260 * var(--cell));height:calc(26 * var(--cell))}
  .hr-clouds{width:calc(260 * var(--cell));--P:30;background-image:url(assets/hero/p-clouds-54834dce90.webp);animation-duration:45s}
  .ft::before{content:none}
  .hr-city>i:nth-child(1){left:calc(105 * var(--cell));top:calc(97 * var(--cell))}
  .hr-city>i:nth-child(2){left:calc(88 * var(--cell));top:calc(132 * var(--cell))}
  .hr-city>i:nth-child(3){left:calc(118 * var(--cell));top:calc(107 * var(--cell))}
  .hr-city>i:nth-child(4){left:calc(6 * var(--cell));top:calc(114 * var(--cell))}
  .hr-city>i:nth-child(5){left:calc(110 * var(--cell));top:calc(133 * var(--cell))}
  .hr-city>i:nth-child(6){left:calc(149 * var(--cell));top:calc(136 * var(--cell))}
  .hr-city>i:nth-child(7){display:none}
}
/* gen:end */