/* ══════════════════════════════════════════════════════════════════════
   THE BENCH — styles for the three working instruments.
   These sit on the glass and are the point of the page: a website that
   builds itself across the cycle, a handset that works, and an assistant
   that answers from the company's own writing.
   Brand orange is the only colour; the rest are the brand neutrals.
   ══════════════════════════════════════════════════════════════════ */

.bench{
  --c:var(--brand);
  position:relative;display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.7rem);
  background:var(--pane-2);border:1px solid var(--rim-2);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--rim),var(--cast);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.bench-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* on a phone the two labels fight each other for the same line; give the
   eyebrow the full width and let the hint sit under it. */
@media(max-width:480px){
  .bench-head{flex-direction:column;align-items:flex-start;gap:.3rem}
  .bench-day{font-size:.58rem}
}
.bench-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.63rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.bench-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--brand);box-shadow:0 0 0 3px rgba(234,75,25,.2);
  animation:bench-beat 2.2s ease-in-out infinite}
@keyframes bench-beat{0%,100%{opacity:1}50%{opacity:.35}}
.bench-day{font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.bench-say{margin:0;font-size:.84rem;color:var(--dim);min-height:2.4em}

/* ── I. the website, building itself ───────────────────────────────── */
/* A browser window is wider than it is tall, but not five times wider.
   Left to fill the full row it stretched to 1500x374 and the mock page
   inside it floated in dead space. Capped, it reads as a window. */
.bw{max-width:64rem;margin-inline:auto;width:100%;
  border:1px solid var(--rim-2);border-radius:10px;overflow:hidden;
  background:#F4F4F1;box-shadow:0 6px 20px rgba(20,24,28,.1)}
.bw-bar{display:flex;align-items:center;gap:5px;padding:.5rem .7rem;
  background:#E7E7E3;border-bottom:1px solid var(--rim-2)}
.bw-bar i{width:8px;height:8px;border-radius:50%;background:#C3C3BD;display:block;flex:none}
.bw-addr{margin-left:.6rem;font-size:.6rem;font-weight:600;letter-spacing:.04em;
  color:var(--faint);background:#F4F4F1;border-radius:999px;padding:.18rem .7rem;
  flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* white on brand orange measures 3.81:1, under AA; the brand's own ink
   on the same orange measures 4.80:1 and changes no colour. */
.bw-live{font-size:.62rem;font-weight:700;letter-spacing:.14em;color:#14171A;
  background:var(--brand);border-radius:999px;padding:.18rem .5rem;opacity:0;
  transform:scale(.6);transition:opacity .2s ease,transform .2s ease}
.bw-live.on{opacity:1;transform:none;animation:bw-pop .52s cubic-bezier(.16,1,.3,1)}
@keyframes bw-pop{
  0%{transform:scale(.5);opacity:0}
  55%{transform:scale(1.16);opacity:1}
  100%{transform:scale(1)}
}
/* the cursor that types the domain over the last days */
.bw-addr.typing::after{content:"";display:inline-block;width:1px;height:.75em;
  margin-left:1px;background:var(--ink);vertical-align:-1px;
  animation:bw-caret .8s steps(1) infinite}
@keyframes bw-caret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ── motion ──────────────────────────────────────────────────────────
   Timings taken from the motion guidance rather than guessed: reveals
   400–700ms on expo.out, list staggers 250–350ms on power1.out with
   0.02–0.04s between items. The old version faded each block in over
   500ms with nothing inside it moving, which is why it felt inert — a
   part of a page arriving should assemble, not materialise. */
.bench{--e-out:cubic-bezier(.16,1,.3,1);      /* expo.out */
       --e-soft:cubic-bezier(.25,.46,.45,.94)} /* power1.out */

.bw-stage{position:relative;padding:1rem 1.1rem;display:grid;gap:.7rem;
  min-height:clamp(210px,20vw,300px);align-content:start;overflow:hidden}
/* Parts that have not arrived yet are not absent — they are a ghost of
   the page to come. Reserving the space was already necessary (a stage
   that grows as parts land would shift the whole section); showing the
   outline turns that reserved space from a hole into the plan. */
.bw-stage > *{opacity:.13;filter:grayscale(1);
  transition:opacity .45s var(--e-soft),filter .45s ease}
.bw-stage > *.on{opacity:1;filter:none;
  animation:bw-land .56s cubic-bezier(.16,1,.3,1) both}
@keyframes bw-land{
  from{opacity:.13;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}

/* the pieces inside a part arrive one after another, not all at once */
.bw-stage > * > *{opacity:.6;
  transition:opacity .3s var(--e-soft) var(--d,0ms),
             background .5s ease,border-color .5s ease,box-shadow .5s ease}
.bw-stage > *.on > *{opacity:1;
  animation:bw-piece .34s var(--e-out) var(--d,0ms) both}
@keyframes bw-piece{from{opacity:.6;transform:translateY(9px)}to{opacity:1;transform:none}}
.bw-stage > * > *:nth-child(1){--d:60ms}
.bw-stage > * > *:nth-child(2){--d:95ms}
.bw-stage > * > *:nth-child(3){--d:130ms}
.bw-stage > * > *:nth-child(4){--d:165ms}
.bw-stage > * > *:nth-child(5){--d:200ms}
.bw-stage > * > *:nth-child(6){--d:235ms}

/* a scan line that crosses the part as it lands */
.bw-stage > *.landing::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  animation:bw-sweep .5s var(--e-soft) forwards;pointer-events:none}
.bw-stage > *{position:relative}
@keyframes bw-sweep{
  from{top:0;opacity:0}
  25%{opacity:1}
  to{top:100%;opacity:0}
}

.m-nav{display:flex;align-items:center;gap:.5rem;padding-bottom:.55rem;
  border-bottom:1px solid #E0E0DB}
.m-logo{width:26px;height:9px;border-radius:2px;background:#CFCFC9;display:block;flex:none}
.m-link{width:30px;height:5px;border-radius:2px;background:#DCDCD7;display:block}
.m-nav .m-link:first-of-type{margin-left:auto}

.m-hero{display:grid;gap:.42rem;padding:.5rem 0 .7rem}
.m-h{height:13px;width:72%;border-radius:3px;background:#CFCFC9;display:block}
.m-h2{width:52%}
.m-p{height:6px;width:86%;border-radius:2px;background:#DFDFDA;display:block}
.m-p2{width:64%}
.m-btn{width:62px;height:16px;border-radius:999px;background:#CFCFC9;display:block;
  margin-top:.35rem}

.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.m-card{height:clamp(44px,6vw,62px);border-radius:6px;background:#E4E4DF;display:block;
  border:1px solid #DCDCD7}
.m-band{display:grid;gap:.4rem;padding:.4rem 0}
.m-foot{display:flex;gap:.5rem;padding-top:.55rem;border-top:1px solid #E0E0DB}

/* the stage changes material as the cycle advances — this is the point */
.bw-stage[data-phase="1"] > *{outline:1px dashed #C6C6C0;outline-offset:2px}
.bw-stage[data-phase="2"] .m-h,.bw-stage[data-phase="2"] .m-logo{background:#B4B4AD}
.bw-stage[data-phase="3"] .m-h,.bw-stage[data-phase="3"] .m-logo{background:#6E757B}
.bw-stage[data-phase="3"] .m-btn{background:#8A9097}
.bw-stage[data-phase="3"] .m-card{background:#EDEDE9;border-color:#D6D6D1}
.bw-stage[data-phase="4"] .m-h,.bw-stage[data-phase="4"] .m-logo{background:#171C21}
.bw-stage[data-phase="4"] .m-h2{background:#4C545C}
.bw-stage[data-phase="4"] .m-btn{background:var(--brand)}
.bw-stage[data-phase="4"] .m-card{background:#fff;border-color:#E2E2DD;
  box-shadow:0 2px 8px rgba(20,24,28,.07)}
.bw-stage[data-phase="4"] .m-card:first-child{background:linear-gradient(135deg,#fff,#FDEDE7)}
.bw-stage[data-phase="4"] .m-p{background:#C6C6C0}

/* the day handle */
.bench-scrub{position:relative;display:grid;gap:.5rem;max-width:64rem;
  margin-inline:auto;width:100%}
.bench--site .bench-say{max-width:64rem;margin-inline:auto;width:100%}
.bench-track{display:flex;gap:2px;height:100%}
.bench-seg{position:relative;padding-top:5px;min-width:0;opacity:.5;transition:opacity .3s}
.bench-seg::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:3px;background:var(--c);box-shadow:0 0 0 .5px rgba(20,24,28,.26)}
.bench-seg.on{opacity:1}
.bench-seg b{display:block;font-size:.55rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bench-seg.on b{color:var(--ink)}
.bench-scrub input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:22px;background:transparent;cursor:grab;margin:0}
.bench-scrub input[type=range]:active{cursor:grabbing}
.bench-scrub input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;
  background:var(--rim-2)}
.bench-scrub input[type=range]::-moz-range-track{height:3px;border-radius:3px;
  background:var(--rim-2)}
.bench-scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--brand);
  margin-top:-7px;box-shadow:0 2px 7px rgba(20,24,28,.22)}
.bench-scrub input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);box-shadow:0 2px 7px rgba(20,24,28,.22)}
@media(max-width:560px){.bench-seg b{font-size:0}.bench-seg b::first-letter{font-size:.55rem}}

/* ── II. the handset ───────────────────────────────────────────────── */
.bench--app{align-items:center}
.bench--app .bench-head{width:100%}
.ph{width:min(260px,78vw);border-radius:30px;padding:9px;background:#1A1E22;
  box-shadow:0 14px 34px rgba(20,24,28,.26),inset 0 1px 0 rgba(255,255,255,.14)}
.ph-screen{position:relative;overflow:hidden;border-radius:22px;background:#F4F4F1;
  height:clamp(290px,40vw,330px);display:grid}
/* The screens slide; they do not fade. A cross-fade means a moment when
   the outgoing screen has gone and the incoming one has not arrived, and
   on a slow machine that moment stretches into a blank handset. Sliding
   has no such gap — and it is what a real app does. */
.ph-view{grid-area:1/1;padding:1rem .85rem;display:flex;flex-direction:column;gap:.45rem;
  transform:translateX(calc((var(--i) - var(--at,0)) * 100%));
  transition:transform .42s cubic-bezier(.3,.9,.3,1);
  pointer-events:none}
.ph-view.on{pointer-events:auto}
/* the screen slides, and its rows land behind it — a screen whose contents
   are already in place looks like a picture of an app, not an app */
.ph-view .ph-row,.ph-view .ph-title{opacity:0;transform:translateY(10px)}
.ph-view.on .ph-row,.ph-view.on .ph-title{opacity:1;transform:none;
  transition:opacity .3s var(--e-soft) var(--d,0ms),
             transform .34s var(--e-out) var(--d,0ms)}
.ph-view.on .ph-title{--d:40ms}
.ph-view.on .ph-row:nth-of-type(1){--d:90ms}
.ph-view.on .ph-row:nth-of-type(2){--d:125ms}
.ph-view.on .ph-row:nth-of-type(3){--d:160ms}
.ph-view.on .ph-tag{animation:ph-tag-in .4s var(--e-out) both;animation-delay:var(--d,0ms)}
@keyframes ph-tag-in{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.ph-view:nth-child(1){--i:0}
.ph-view:nth-child(2){--i:1}
.ph-view:nth-child(3){--i:2}
.ph-title{margin:0 0 .35rem;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.025em}
.ph-row{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.58rem .6rem;border:1px solid #E4E4DF;border-radius:10px;background:#fff;
  cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.ph-row:hover{border-color:#D2D2CC}
.ph-row.tapped{transform:scale(.97);border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(234,75,25,.16)}
.ph-rt{display:grid;gap:1px;min-width:0;flex:1}
.ph-rt b{font-size:.78rem;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ph-rt em{font-style:normal;font-size:.63rem;color:var(--faint)}
.ph-tag{font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:999px;flex:none;background:#EDEDE9;color:var(--dim)}
.ph-tag[data-s="live"]{background:rgba(234,75,25,.14);color:var(--brand-deep)}
.ph-tag[data-s="done"]{background:rgba(76,84,92,.14);color:#4C545C}
/* A light bar, not a dark one. With the travelling pill the active label
   is ink, and ink on the old dark bar measured 1.07:1 for the 420ms the
   pill is still sliding under it. On a light bar it passes throughout,
   whether the pill has arrived or not. */
.ph-tabs{position:relative;display:flex;gap:3px;margin-top:9px;padding:3px;border-radius:999px;
  background:#E7E5E0}
.ph-tab{flex:1;min-height:44px;padding:.42rem .2rem;border:0;border-radius:999px;background:transparent;
  color:#5A6069;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;transition:color .25s}
.ph-tab{position:relative;z-index:1;transition:color .22s ease}
.ph-tab.on{background:transparent;color:#14171A}
/* one pill that travels, rather than three that blink on and off */
.ph-tabs::before{content:"";position:absolute;top:3px;bottom:3px;z-index:0;
  width:calc((100% - 6px - 6px) / 3);left:3px;border-radius:999px;background:var(--brand);
  transform:translateX(calc(var(--at,0) * (100% + 3px)));
  transition:transform .42s cubic-bezier(.16,1,.3,1)}

/* ── III. the assistant ────────────────────────────────────────────── */
.ai-log{display:flex;flex-direction:column;gap:.55rem;height:clamp(210px,28vw,270px);
  overflow-y:auto;padding:.3rem .1rem;scrollbar-width:thin}
.ai-msg{animation:ai-in .42s cubic-bezier(.16,1,.3,1) both;
  max-width:88%;padding:.62rem .85rem;border-radius:13px;font-size:.88rem;
  line-height:1.52}
.ai-msg p{margin:0}
/* On a phone this bubble is the only body copy on the page under 16px, and
   it is real sentences, not a label — so it goes up to 16px there and the
   log grows a little to keep the same number of lines visible. */
@media (max-width:700px){
  .ai-msg{font-size:1rem;line-height:1.5}
  .ai-log{height:clamp(240px,60vw,300px)}
}
.ai-bot{align-self:flex-start;background:rgba(255,255,255,.62);
  border:1px solid var(--rim-2);color:var(--body);border-bottom-left-radius:4px}
.ai-you{align-self:flex-end;background:var(--brand);color:#14171A;
  border-bottom-right-radius:4px;font-weight:500}
.ai-src{display:block;margin-top:.4rem;font-size:.58rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.ai-think p::after{content:"";display:inline-block;width:1.1em;text-align:left;
  animation:ai-dots 1.1s steps(4,end) infinite}
@keyframes ai-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ai-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.ai-chip{min-height:44px;padding:.34rem .7rem;border:1px solid var(--rim-2);border-radius:999px;
  background:#fff;font-size:.75rem;font-weight:600;color:var(--body);
  cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.ai-chip:hover{color:var(--brand);border-color:rgba(234,75,25,.4);
  background:rgba(234,75,25,.07)}
.ai-form{display:flex;gap:.4rem}
.ai-in{flex:1;min-width:0;padding:.68rem .9rem;border:1px solid var(--rim-2);
  border-radius:999px;background:rgba(255,255,255,.6);color:var(--ink);font:inherit;
  font-size:.88rem}
.ai-in:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(234,75,25,.16)}
.ai-send{min-height:44px;color:#14171A;padding:.68rem 1.25rem;border:0;border-radius:999px;background:var(--brand);
  color:#14171A;font-size:.8rem;font-weight:700;cursor:pointer;flex:none;
  transition:background .2s}
.ai-send:hover{background:var(--brand-deep)}

/* ── the three together ────────────────────────────────────────────── */
/* minmax(0,1fr), not the default auto track: an auto track refuses to go
   below the min-content width of what sits in it, and at 320px that pushed
   the whole page sideways. The instruments shrink; the page never does. */
.benches{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(.9rem,2vw,1.4rem);margin-top:clamp(1.6rem,4vh,2.6rem)}
.benches > .bench{min-width:0}
@media(min-width:1180px){
  .benches{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
  .benches > .bench--site{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .bw-stage > *,.ph-view,.bench-seg,.bw-live{transition:none!important}
  .bench-eyebrow::before,.ai-think p::after{animation:none!important}
}

/* same reason as start.css: this sheet loads last, so the floor lives here */
@media(max-width:560px){
  .bench-say,.ph-rt b,.bw-note{font-size:1rem}
}

/* ── the assistant's motion ──────────────────────────────────────────
   A bubble that simply appears reads as a page refresh. These land. */
@keyframes ai-in{from{opacity:0;transform:translateY(10px) scale(.98)}
                 to{opacity:1;transform:none}}
.ai-think{display:inline-flex;align-items:center;gap:4px;min-height:1.2em}
.ai-think p{display:flex;gap:4px;margin:0;font-size:0}
.ai-think p::before,.ai-think p::after,.ai-think p span{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--dim);
  animation:ai-dot 1.05s ease-in-out infinite}
.ai-think p::after{animation-delay:.18s}
.ai-think p span{animation-delay:.36s}
@keyframes ai-dot{0%,80%,100%{transform:translateY(0);opacity:.45}
                  40%{transform:translateY(-4px);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .bw-stage > * > *,.ph-view .ph-row,.ph-view .ph-title,
  .ai-msg,.ph-tabs::before{animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important}
  /* the ghost stays — it carries meaning, not motion */
  .bw-stage > *{animation:none!important;transition:none!important;transform:none!important}
  .bw-stage > *.landing::after,.ai-think p::before,.ai-think p::after,
  .ai-think p span{animation:none!important}
}