/* Chief Nest brand only: navy #01055e, blue #217bff, cyan #2fd4fb, deep #102dc2, mint #34eac6, violet #8138ea */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{--brk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 128'%3E%3Cpath d='M0 0H100V28H28V85H0Z' fill='%23fff'/%3E%3C/svg%3E")}
body{margin:0; background:#01043f; color:#c5ccf2;
  font-family:"Space Grotesk",-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.6}
img.wmimg{height:20px; width:auto; display:block}

nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:12px;
  padding:18px 28px; background:linear-gradient(#01043f 60%,transparent)}
nav img.bird{height:30px; width:auto}   /* cropped glyph, so this is the real bird height */
nav .links{margin-left:auto; display:flex; gap:26px; align-items:center}
nav .links a{color:#c5ccf2; text-decoration:none; font-size:14px; font-weight:500}
nav .links a:hover{color:#fff}
nav a.cta{background:#217bff; color:#fff; text-decoration:none; font-weight:600;
  font-size:14px; padding:10px 20px; border-radius:100px}
@media (max-width:640px){nav .links a:not(.cta){display:none}}

/* ---- pinned split hero ---- */
.driver{height:320vh; position:relative}
.stage{position:sticky; top:0; height:100vh; overflow:hidden; display:flex;
  align-items:center; justify-content:center;
  background:
    radial-gradient(56vw 56vw at 84% 6%, rgba(129,56,234,.10), rgba(129,56,234,.05) 35%, rgba(129,56,234,.02) 55%, transparent 75%),
    radial-gradient(52vw 46vh at 8% 100%, rgba(16,45,194,.20), rgba(16,45,194,.10) 38%, rgba(16,45,194,.04) 60%, transparent 80%),
    radial-gradient(640px 320px at 50% 100%, rgba(16,45,194,.18), rgba(16,45,194,.08) 40%, transparent 75%),
    #01043f}
.stage::before{content:""; position:absolute; width:58vw; height:58vw; border-radius:50%;
  top:-22vw; left:50%; margin-left:-29vw; pointer-events:none;
  background:radial-gradient(circle, rgba(47,212,251,.06), rgba(47,212,251,.03) 40%, transparent 65%);
  animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-7vw,0) scale(1)} to{transform:translate(7vw,5vw) scale(1.06)}}
.stage::after{content:""; position:absolute; inset:0 0 auto 0; height:48vh; pointer-events:none; opacity:.035;
  background-image:var(--brk),var(--brk); background-size:190px 164px; background-position:0 0,133px 98px;
  -webkit-mask-image:linear-gradient(#000, rgba(0,0,0,.55) 35%, rgba(0,0,0,.22) 60%, transparent 85%);
  mask-image:linear-gradient(#000, rgba(0,0,0,.55) 35%, rgba(0,0,0,.22) 60%, transparent 85%)}
.half{position:absolute; top:0; bottom:0; width:50%; display:flex; flex-direction:column;
  justify-content:center; padding:8vw; will-change:transform}
.half .k{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px}
.half h2{font-size:clamp(30px,4.6vw,54px); font-weight:600; letter-spacing:-.03em;
  line-height:1.03; color:#fff; margin:0 0 16px; text-wrap:balance}
.half p{max-width:34ch; margin:0; color:#aab4ee; font-size:16px}
.human{left:0; background:#01055e}
.human .k{color:#2fd4fb}
.ai{right:0; text-align:right; background:#0b1180}
.ai p{margin-left:auto}
.ai .k{color:#a570f5}
.half::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:var(--brk),var(--brk); background-size:190px 164px; background-position:0 0,133px 98px;
  -webkit-mask-image:linear-gradient(#000,transparent 42%); mask-image:linear-gradient(#000,transparent 42%)}
.human::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(44vw 52vh at 0% 100%, rgba(33,123,255,.12), rgba(33,123,255,.05) 45%, transparent 70%)}
.ai::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(44vw 52vh at 100% 0%, rgba(129,56,234,.15), rgba(129,56,234,.06) 45%, transparent 70%)}
.seam{position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:linear-gradient(#2fd4fb,#8138ea); opacity:.9}
.one{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; opacity:0; padding:24px}
.one img.bird{width:88px; height:88px; margin-bottom:26px}
.one h1{font-size:clamp(38px,6vw,72px); font-weight:600; letter-spacing:-.035em; line-height:1;
  color:#fff; margin:0 0 18px}
.one h1 em{font-style:normal; color:#2fd4fb}
.one p{max-width:52ch; color:#aab4ee; margin:0 0 30px; font-size:18px}
.one a{background:#217bff; color:#fff; text-decoration:none; font-weight:600; padding:15px 34px;
  border-radius:100px}
.hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:#5c6396}

/* ---- certified stack ---- */
.certs{padding:70px 24px; text-align:center}
.k-line{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#5c6396}
.badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.badge{border:1px solid #2a3499; border-radius:10px; padding:14px 24px; color:#c5ccf2;
  font-weight:500; font-size:15px}
.badge b{color:#fff; font-weight:600}
.badges{align-items:center}
.pbadge{height:66px; width:auto; border-radius:12px; transition:transform .18s ease, box-shadow .18s ease}
.pbadge:hover{transform:translateY(-4px); box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.pbadge[src*="clickup"]{height:86px}

/* ---- client logos ---- */
.clients{padding:70px 0 100px; text-align:center}
.belt{overflow:hidden; margin-top:48px; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex; width:max-content; animation:belt 45s linear infinite}
.belt:hover .track{animation-play-state:paused}
.set{display:flex; gap:88px; align-items:center; padding-right:88px}
/* The prefixed filter matters: several mobile browsers ignore the unprefixed one,
   and without it the original dark artwork shows through as black. */
.set img{height:42px; width:auto; -webkit-filter:brightness(0) invert(1);
  filter:brightness(0) invert(1); opacity:.55; transition:opacity .15s, transform .15s}
/* C4's lockup is stacked rather than horizontal, so it needs more height to read */
.set img[src*="c4-industrial"]{height:74px}
.set img:hover{opacity:1; transform:scale(1.06)}
@keyframes belt{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .track{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .track .set:last-child{display:none}
  .set{flex-wrap:wrap; justify-content:center; padding-right:0}
}
/* Phone: same logo sizes as desktop, just a tighter gap so it still reads as a
   moving belt rather than one logo at a time. */
@media (max-width:760px){
  .set{gap:54px; padding-right:54px}
  .clients{padding:56px 0 76px}
  .belt{margin-top:34px}
}

/* ---- founder testimonials (video cards, open on Supercut) ---- */
.voices{max-width:1120px; margin:0 auto; padding:10px 24px 90px; text-align:center; position:relative; z-index:3}
/* Testimonials: one player on top, three thumbnails in a row beneath. The blue
   fade carries the speaker's name, role and company, so nothing needs writing
   outside the image. Players load only when a clip is chosen. */
.vstage{margin:30px auto 0; width:100%; max-width:860px}
.vframe{position:relative; width:100%; border-radius:16px; overflow:hidden;
  background:#0b1180; border:1px solid #2a3499; box-shadow:0 30px 80px -34px rgba(0,0,0,.6)}
.vstage.wide .vframe{padding-bottom:56.25%}
.vframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.vrow{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.vrow .vthumb{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  border:1px solid #2a3499; background:#0b1180}
.vrow .vthumb.on{border-color:#217bff; box-shadow:0 0 0 2px rgba(33,123,255,.45)}
.vrow .vthumb:hover{transform:translateY(-3px)}

.vthumb{display:block; width:100%; padding:0; cursor:pointer; text-align:left;
  border:0; background:#0b1180; transition:transform .18s ease, border-color .18s ease,
  box-shadow .18s ease}
.vthumb.vbig{position:absolute; inset:0; height:100%; border-radius:0}
.vthumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.vthumb:hover img{transform:scale(1.04)}

/* the fade that carries who is speaking */
.vshade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(16,45,194,.94) 0%, rgba(33,123,255,.48) 32%,
    rgba(33,123,255,.12) 56%, transparent 76%)}
.vid{position:absolute; left:16px; right:16px; bottom:13px; pointer-events:none}
.vid b{display:block; font-size:15px; font-weight:600; color:#fff; letter-spacing:-.015em;
  line-height:1.2}
.vid > span{display:block; font-size:12px; color:#dbe4ff; margin-top:2px; line-height:1.3}
.vbig .vid{left:26px; right:26px; bottom:22px}
.vbig .vid b{font-size:24px}
.vbig .vid > span{font-size:14.5px; margin-top:4px}

.vplay{position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; background:#217bff; box-shadow:0 10px 28px -8px rgba(0,0,0,.6);
  transition:transform .18s ease; pointer-events:none}
.vplay::after{content:""; position:absolute; left:18px; top:13px; border-style:solid;
  border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff}
.vbig .vplay{width:70px; height:70px; margin:-35px 0 0 -35px}
.vbig .vplay::after{left:27px; top:20px; border-width:15px 0 15px 24px}
.vthumb:hover .vplay{transform:scale(1.1)}
.vdur{position:absolute; right:11px; top:11px; font-size:11.5px; font-weight:600; color:#fff;
  background:rgba(1,5,94,.78); border-radius:100px; padding:3px 9px;
  font-variant-numeric:tabular-nums; pointer-events:none}

@media (max-width:760px){
  .vrow{grid-template-columns:1fr; gap:14px}
  .vbig .vid b{font-size:18px}
}

/* ---- console proof section ---- */
.proof{max-width:1120px; margin:0 auto; padding:60px 24px 90px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
@media (max-width:880px){.proof{grid-template-columns:1fr}}
.proof .k{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#2fd4fb}
.proof h2{font-size:clamp(32px,4.8vw,56px); font-weight:600; letter-spacing:-.033em; line-height:1.04;
  color:#fff; margin:14px 0 20px}
.proof h2 em{font-style:normal; color:#2fd4fb}
.proof p.d{max-width:44ch; color:#aab4ee; font-size:18px; margin:0 0 28px}
.stats{display:flex; gap:36px; margin-top:34px}
.stat b{display:block; font-size:30px; color:#fff; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px; color:#8b93cd}
.console{border:1px solid #2a3499; border-radius:16px; background:#080d5c; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.cbar{display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid #1b2380;
  font-size:12.5px; color:#8b93cd}
.dot{width:9px; height:9px; border-radius:50%; background:#2a3499}
.dot.live{background:#34eac6}
.cbar .who{margin-left:auto; color:#c5ccf2}
.feed{padding:14px 18px; height:330px; overflow:hidden; display:flex; flex-direction:column;
  justify-content:flex-end; font-size:14px}
.line{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid #0d1470; opacity:0;
  animation:in .4s forwards}
@keyframes in{to{opacity:1}}
.line .t{color:#5c6396; font-variant-numeric:tabular-nums; flex:none; width:74px}
.line .m{color:#c5ccf2}
.line .tool{margin-left:auto; flex:none; font-size:11px; letter-spacing:.08em; color:#8b93cd;
  border:1px solid #2a3499; border-radius:100px; padding:1px 10px; align-self:center}
.line.done .m::after{content:" ✓"; color:#34eac6; font-weight:600}

/* ---- about ---- */
.about{max-width:1120px; margin:0 auto; padding:40px 24px 80px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start}
@media (max-width:880px){.about{grid-template-columns:1fr}}
.about h2{font-size:clamp(30px,4.4vw,50px); font-weight:600; letter-spacing:-.033em;
  line-height:1.06; color:#fff; margin:14px 0 20px; text-wrap:balance}
.about p{max-width:56ch; color:#aab4ee; margin:0 0 16px; font-size:16.5px}
.about p b{color:#fff; font-weight:600}
.meaning{display:flex; flex-direction:column; gap:14px; margin-top:44px}
.mrow{border:1px solid #2a3499; border-radius:12px; padding:18px 22px; background:#080d5c}
.mrow .t{font-size:16px; font-weight:600; color:#fff}
.mrow .t em{font-style:normal; color:#2fd4fb; font-weight:600}
.mrow p{font-size:14px; color:#8b93cd; margin:6px 0 0; max-width:none}

/* ---- team ---- */
.team{max-width:1120px; margin:0 auto; padding:20px 24px 90px}
.team h2{font-size:clamp(28px,3.6vw,42px); color:#fff; font-weight:600; letter-spacing:-.03em; margin:10px 0 30px}
.tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px}
.tp{border:1px solid #2a3499; border-radius:14px; background:#080d5c; overflow:hidden}
.tp img{width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#0b1180}
.tp .in{padding:14px 16px 16px}
.tp .nm{font-size:16px; font-weight:600; color:#fff; letter-spacing:-.01em}
.tp .rl{font-size:12.5px; font-weight:600; color:#2fd4fb; margin-top:2px}
.tp .bio{font-size:12px; color:#8b93cd; margin-top:6px; line-height:1.45}

/* ---- packages ---- */
.pk{max-width:1020px; margin:0 auto; padding:30px 24px 90px}
.pk .k{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#2fd4fb}
.pk h3{font-size:clamp(28px,3.6vw,42px); color:#fff; font-weight:600; letter-spacing:-.03em; margin:10px 0 34px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.card{border:1px solid #2a3499; border-radius:14px; padding:30px; background:#080d5c;
  display:flex; flex-direction:column}
.card .sum{flex:1}                    /* pushes every button onto the same baseline */
.card > a{align-self:flex-start; margin-top:auto}
.card.feature{border-color:#217bff; background:linear-gradient(160deg,#0b1180,#080d5c)}
.card .nm{font-size:21px; font-weight:600; color:#fff; margin-bottom:6px}
.card .for{font-size:13px; color:#8b93cd; margin-bottom:18px}
.card .price{font-size:26px; font-weight:600; color:#fff; letter-spacing:-.02em; margin-bottom:14px}
.card .price span{font-size:14px; font-weight:500; color:#8b93cd; letter-spacing:0}
/* Homepage cards stay a summary: name, price, one sentence. The full feature
   lists live on the pricing page so the two never repeat each other. */
.card .sum{font-size:15px; color:#8b93cd; line-height:1.55; margin:0 0 24px}
.card ul{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px}
.card li{padding-left:22px; position:relative}
.card li::before{content:""; position:absolute; left:0; top:.5em; width:9px; height:8px;
  background:#217bff; -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain}
/* All three actions share one solid blue button so no plan looks second-class.
   The scoped senior tier gets a violet glow to mark it as the premium option. */
.card a{display:inline-block; font-weight:600; text-decoration:none; border-radius:100px;
  padding:12px 26px; background:#217bff; color:#fff}
.card.premium{border-color:#8138ea;
  background:linear-gradient(160deg,#12146e,#080d5c)}
.card.premium a{background:linear-gradient(120deg,#217bff,#8138ea);
  box-shadow:0 10px 30px -10px rgba(129,56,234,.65)}
.card.premium .nm::after{content:"Scoped"; margin-left:10px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#c9a4fb; vertical-align:middle}

/* ---- close ---- */
.close{text-align:center; padding:40px 24px 90px}
.close h2{font-size:clamp(30px,4.4vw,52px); color:#fff; font-weight:600; letter-spacing:-.03em;
  margin:0 0 16px}
.close p{color:#aab4ee; max-width:52ch; margin:0 auto 30px}
.close a{background:#217bff; color:#fff; text-decoration:none; font-weight:600; padding:15px 34px;
  border-radius:100px}
.guarantee{margin-top:18px; font-size:13px; color:#8b93cd}
footer{border-top:1px solid #1b2380; padding:30px 28px; display:flex; flex-wrap:wrap; gap:12px 30px;
  align-items:center; font-size:13px; color:#7076ab; max-width:1120px; margin:0 auto}
footer .tag{margin-left:auto}
footer a{color:#7076ab; text-decoration:none}
footer a:hover{color:#c5ccf2}
footer .legal{flex-basis:100%; font-size:12.5px; color:#5c6396}
footer .legal a{color:#7076ab}
/* Phone: stack the footer in one left-aligned column. The auto margin that pushes
   the tagline right on desktop leaves it stranded mid-row once things wrap. */
@media (max-width:760px){
  footer{flex-direction:column; align-items:flex-start; gap:10px; padding:28px 22px 34px;
    text-align:left}
  footer .tag{margin-left:0}
  footer .legal{flex-basis:auto; line-height:1.65}
}
/* hover interactions */
.card,.tp,.mrow{transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-5px); border-color:#217bff; box-shadow:0 24px 50px -24px rgba(33,123,255,.35)}
a.cta,.one a,.close a,.card a{transition:transform .15s ease, filter .15s ease}
a.cta:hover,.one a:hover,.close a:hover,.card.feature a:hover{transform:translateY(-2px); filter:brightness(1.08)}
.card:not(.feature) a:hover{border-color:#217bff; color:#fff; transform:translateY(-2px)}
nav .links a:not(.cta){position:relative}
nav .links a:not(.cta)::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:#2fd4fb; transition:right .18s ease}
nav .links a:not(.cta):hover::after{right:0}
.console{transition:transform .2s ease, box-shadow .2s ease}
.console:hover{transform:translateY(-3px); box-shadow:0 40px 90px -30px rgba(33,123,255,.25)}
/* texture: film grain overlay + section glows */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27160%27 height=%27160%27 filter=%27url(%23n)%27 opacity=%270.5%27/%3E%3C/svg%3E")}
.certs{background:
  radial-gradient(52vw 46vh at 8% 0, rgba(16,45,194,.20), rgba(16,45,194,.10) 38%, rgba(16,45,194,.04) 60%, transparent 80%),
  radial-gradient(640px 320px at 50% 0, rgba(16,45,194,.18), rgba(16,45,194,.08) 40%, transparent 75%)}
.proofband{position:relative}
.proofband::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.045;
  background-image:var(--brk),var(--brk); background-size:84px 73px;
  background-position:100% 12px, calc(100% - 59px) 56px;
  -webkit-mask-image:radial-gradient(55% 58% at 100% 46%, #000 22%, transparent 70%);
  mask-image:radial-gradient(55% 58% at 100% 46%, #000 22%, transparent 70%)}
.proofband::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(480px 300px at 0% 50%, rgba(47,212,251,.04), rgba(47,212,251,.02) 45%, transparent 70%)}
.proofband>.proof{position:relative}
.pk{position:relative}
.pk::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(380px 300px at 76% 22%, rgba(129,56,234,.09), rgba(129,56,234,.04) 45%, transparent 70%);
  -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent)}
.close{position:relative; background:radial-gradient(700px 340px at 50% 100%, rgba(16,45,194,.17), rgba(16,45,194,.08) 40%, transparent 75%)}
.close::before{content:""; position:absolute; inset:auto 0 0 0; height:70%; pointer-events:none; opacity:.05;
  background-image:var(--brk),var(--brk); background-size:118px 102px; background-position:0 100%,83px calc(100% - 61px);
  -webkit-mask-image:linear-gradient(0deg,#000,transparent); mask-image:linear-gradient(0deg,#000,transparent)}
.close>*{position:relative}
@media (prefers-reduced-motion:reduce){.card,.tp,.mrow,a.cta,.one a,.close a,.card a,.console,.pbadge{transition:none}
  .stage::before{animation:none}}
/* scroll guide: the hero bird takes off and escorts the reader down the page.
   Sits in front of the content (never hidden) and below the nav; positions are measured
   from the elements it looks at so it always lands in open space. */
.guide{position:fixed; left:0; top:0; width:0; height:0; z-index:4; pointer-events:none;
  opacity:0; will-change:transform; transform-origin:center}
.guide img{width:100%; height:100%; display:block}
.driver{z-index:1}
.certs,.clients,.voices,.proofband,.pk,.close,footer{position:relative; z-index:3}
@media (prefers-reduced-motion:reduce){.guide{display:none}}
/* below this width the layout has no side margins for it to fly in, so it would cross content */
/* Phone and tablet: the bird stays in front, hugging alternating edges on a simple
   path (see buildKeys), sized and faded so it reads as decoration beside the text. */
:focus-visible{outline:2px solid #2fd4fb; outline-offset:3px; border-radius:4px}

@media (max-width:720px){
  .half{padding:6vw}
  .half p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .driver{height:auto}
  .stage{position:static; height:auto; padding:120px 0}
  .half,.seam,.hint{display:none}
  .one{position:static; opacity:1!important}
  .line{animation:none; opacity:1}
}
/* screenshot preview (?p=...): collapse the scroll driver so body sections are reachable */
body.preview .driver{height:100vh}
html:has(body.preview){scroll-behavior:auto}