/* Fetchi, 27 September 2026. The plain-words homepage: a MacBook's top edge with the HUD in
   the notch, the example requests, the demo screens, the apps, and the privacy panel.
   Monochrome only. Every line of copy these rules dress is checked against app/ and docs/. */

/* ---------- hero: one column, then the Mac's top edge ---------- */
.hero-in,.notch-open .hero-in{display:block;min-height:0;padding-top:96px;padding-bottom:0}
.hero h1{font-size:clamp(2.6rem,5vw,4.4rem)}
.hero-kicker{margin-bottom:20px}

.hero-copy{max-width:760px}
.hero h1{max-width:none}
.hero-kicker{color:var(--text-secondary)}
.hero-sub{margin-top:6px;color:var(--text-muted);font-size:clamp(2rem,3.9vw,3.5rem);font-weight:450;letter-spacing:-.045em;line-height:1.04}
.hero .hero-lead{max-width:58ch;margin-top:24px;font-size:16.5px;color:var(--text-secondary)}
.hero .hero-lead b{color:#fff;font-weight:500}

.mac-strip{position:relative;margin:48px auto 0;max-width:1120px;height:200px;border:10px solid #0c0c0c;border-bottom:0;border-radius:26px 26px 0 0;
  box-shadow:0 0 0 1px #2a2a2a;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 110%,#3a3a3a 0,transparent 55%),
    radial-gradient(90% 80% at 85% 120%,#2b2b2b 0,transparent 60%),
    radial-gradient(60% 60% at 60% 30%,#1c1c1c 0,transparent 70%),
    linear-gradient(180deg,#161616,#0a0a0a)}
.mac-strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,#000);pointer-events:none}
.mac-menubar{position:absolute;top:0;left:0;right:0;height:26px;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:11px -apple-system,var(--sans);color:#cfcfcf}
.mac-menubar span:first-child b{font-weight:600;margin-right:14px}
.mac-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:430px;height:34px;background:#000;border-radius:0 0 14px 14px;display:flex;align-items:center;gap:10px;padding:0 16px;
  font:12.5px -apple-system,"Geist",sans-serif;color:#b4b4b4;white-space:nowrap;overflow:hidden;z-index:2}
.mac-notch i{width:6px;height:6px;border-radius:50%;background:#fff;flex:none}
.mac-notch b{color:#fff;font-weight:600}
.mac-said{overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.mac-pill{position:absolute;top:58px;left:50%;transform:translate(-50%,0);display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 14px;max-width:calc(100% - 32px);
  background:#1b1b1b;border:1px solid rgba(255,255,255,.14);border-radius:13px;font:600 13.5px -apple-system,"Geist",sans-serif;color:#ececec;white-space:nowrap;transition:opacity .2s,transform .2s;z-index:2}
.mac-pill span{overflow:hidden;text-overflow:ellipsis}
.mac-pill svg{width:14px;height:14px;flex:none;fill:none;stroke:#fff;stroke-width:1.5}
.mac-pill.off{opacity:0;transform:translate(-50%,-6px)}
.mac-strip-cap{text-align:center;margin-top:14px}
@media (max-width:760px){
  .hero-in,.notch-open .hero-in{padding-top:88px}
  .mac-strip{height:150px;margin-top:44px;border-width:6px;border-radius:18px 18px 0 0}
  .mac-menubar{display:none}
  .mac-notch{width:calc(100% - 40px);max-width:340px;height:30px;font-size:11.5px;padding:0 12px}
  .mac-pill{top:48px;font-size:12.5px;height:36px;padding:0 12px}
}

/* ---------- shared: section heads, the drawn card, the laptop screen ---------- */
.pl{padding:88px 0;border-top:1px solid var(--border)}
.pl-head{max-width:760px;margin-bottom:40px}
.pl-head .h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:450;letter-spacing:-.045em}
.pl-head .lead{font-size:16px}
.hl{position:relative;display:inline-block;padding:0 .18em;margin:0 -.04em;background:rgba(255,255,255,.12);border-radius:.22em;color:#fff}
.hl svg{position:absolute;right:-.42em;bottom:-.34em;width:.5em;height:.5em;fill:#fff;stroke:#000;stroke-width:1.2}
.drawn{background:#121212;border:1px solid var(--border-light);border-radius:14px;padding:16px 18px}
.drawn .card-q{font-size:15px}
.drawn .card-btns span{border-radius:6px}

.laptop{border-radius:22px;background:#0d0d0d;border:1px solid var(--border-light);padding:18px}
.screenbox{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:6px solid #050505;
  background:radial-gradient(80% 70% at 30% 100%,#262626,transparent 60%),linear-gradient(180deg,#151515,#0b0b0b)}
.screenbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.screenbox .nm{position:absolute;inset:0;margin:0;max-width:none;text-align:center;padding-bottom:18%;display:flex;align-items:center;justify-content:center;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.subtitle{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:calc(100% - 28px);padding:8px 14px;background:rgba(0,0,0,.78);border-radius:8px;
  font-size:14px;line-height:1.4;color:#fff;text-align:center;z-index:2}
.subtitle::before{content:"\201C"}.subtitle::after{content:"\201D"}

/* ---------- the four example requests ---------- */
.exr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;padding:36px 0;border-top:1px solid var(--border);align-items:start}
.exr-k{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.exr-say{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:#fff}
.exr-say::before{content:"\201C";color:var(--text-muted)}.exr-say::after{content:"\201D";color:var(--text-muted)}
.exr ol{margin:18px 0 0 0;padding:0;list-style:none;counter-reset:s}
.exr li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;padding:7px 0;color:var(--text-secondary);font-size:15px;line-height:1.55;border-bottom:1px solid var(--border)}
.exr li::before{content:counter(s);font:11px var(--mono);color:var(--text-muted);padding-top:4px}
.exr-note{margin-top:14px;font-size:14px;color:var(--text-muted)}
.exr-note b{color:#fff;font-weight:500}
.exr .cap{margin-top:10px}

/* ---------- apps ---------- */
.apps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.ribbon{position:relative;height:340px;overflow:hidden;container-type:inline-size;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* Each row tilts about the ribbon's visible centre and drifts along its own tilted axis
   (rotate, then translate), so the part on screen never moves up or down: rows stay a
   fixed distance apart at every point of the drift and never collide. */
.ribbon-row{position:absolute;left:0;display:flex;gap:12px;width:max-content;--tilt:0deg;transform-origin:50cqw 28px;transform:rotate(var(--tilt));animation:drift 60s linear infinite}
.ribbon-row:nth-child(1){top:34px;--tilt:-3deg}
.ribbon-row:nth-child(2){top:142px;animation-direction:reverse;animation-duration:70s}
.ribbon-row:nth-child(3){top:250px;--tilt:3deg;animation-duration:80s}
@keyframes drift{from{transform:rotate(var(--tilt)) translateX(0)}to{transform:rotate(var(--tilt)) translateX(-50%)}}
.tile{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 18px 0 10px;background:#141414;border:1px solid var(--border-light);border-radius:14px;font-size:14px;color:#e6e6e6;white-space:nowrap}
.tile i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:#fff;color:#000;font:600 15px var(--sans);font-style:normal}
.tile.mac i{background:#2a2a2a;color:#fff}
.tile i img{width:20px;height:20px;display:block}
.tile.mac i img{filter:invert(1)}
.apps-key{margin-top:22px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);line-height:1.9}

/* ---------- command stack + the struck line ---------- */
.stackrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.stack{position:relative;height:340px;overflow:hidden;border-radius:22px;background:#101010;border:1px solid var(--border-light);
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.stack-in{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:20px;animation:climb 28s linear infinite}
@keyframes climb{from{translate:0 0}to{translate:0 -50%}}
.cmd{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 12px;background:#fff;color:#000;border-radius:12px;font-size:14.5px;font-weight:500;white-space:nowrap}
.cmd svg{width:16px;height:16px;fill:none;stroke:#000;stroke-width:1.6;flex:none}
.struck{font-size:clamp(2.2rem,4.6vw,4rem);font-weight:450;letter-spacing:-.045em;line-height:1.05}
.struck s{display:block;color:var(--text-muted);text-decoration-thickness:3px}
.struck span{display:block;color:#fff}

/* ---------- alternating rows ---------- */
.alt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--border)}
.alt.flip .alt-media{order:2}
.alt h3{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:450;letter-spacing:-.04em;line-height:1.08;color:#fff}
.alt p{margin-top:16px;color:var(--text-secondary);font-size:16px;line-height:1.7;max-width:46ch}

/* ---------- privacy panel ---------- */
.priv{border-radius:28px;padding:64px 56px;border:1px solid var(--border-light);
  background:radial-gradient(70% 60% at 80% 0,#232323,transparent 70%),radial-gradient(60% 70% at 0 100%,#1a1a1a,transparent 70%),#070707}
.priv-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1px solid var(--border-light);border-radius:999px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.priv-chip svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.6}
.priv .h2{margin-top:22px;font-size:clamp(2rem,4vw,3.4rem);font-weight:450;letter-spacing:-.045em;max-width:16ch}
.priv .lead{max-width:62ch}
.priv .lead a{color:#fff;border-bottom:1px solid var(--btn-border)}
.setwin{margin-top:40px;max-width:720px;background:#161616;border:1px solid var(--border-light);border-radius:12px;overflow:hidden}
.setwin-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid var(--border);font:12px -apple-system,var(--sans);color:var(--text-secondary)}
.setwin-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3a}
.setwin-bar b{margin-left:10px;font-weight:600;color:#fff}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.setrow:last-child{border-bottom:0}
.setrow p{font-size:14.5px;color:#fff}
.setrow small{display:block;margin-top:2px;font-size:13px;color:var(--text-muted);line-height:1.5}
.sw{width:38px;height:22px;border-radius:11px;background:#3a3a3a;position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#bdbdbd}
.sw.on{background:#fff}.sw.on::after{left:18px;background:#000}
.setval{font:12px var(--mono);letter-spacing:.04em;color:var(--text-secondary);border:1px solid var(--border-light);border-radius:6px;padding:4px 8px;white-space:nowrap}

@media (max-width:900px){
  .exr,.apps,.stackrow,.alt{grid-template-columns:1fr;gap:28px}
  .alt.flip .alt-media{order:0}
  .priv{padding:40px 22px;border-radius:20px}
  .pl{padding:60px 0}
  .stack{height:280px}
  .laptop{padding:10px;border-radius:16px}
  .subtitle{font-size:12.5px;bottom:8px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
  .ribbon-row,.stack-in{animation:none}
}

.mac-pill .g-wait{display:none}.mac-pill.wait .g-wait{display:block}.mac-pill.wait .g-done{display:none}
/* the clips burn their own caption in, so the overlay is only for a slot with no media */
.screenbox video[poster] ~ .subtitle{display:none}
.screenbox video{z-index:1}
.alt p.cap{font-size:11px;line-height:1.7;margin-top:14px;max-width:52ch}