/* Look A, the craft pass (13 Oct 2026, from reports/Spacefast teardown.md §4).
   Home and /start only, on top of aperture.css: Aperture's ground, Geist and
   the gem green, made looser. Surfaces sit a few % above the ground with no
   borders (a 1px inner hairline at 6% white and a soft shadow); mock-ups are
   cropped and dissolve into the ground; a few hand-made objects tilt OUTSIDE
   the cards. One motion: .5s expo-out, 16px rise, 8px blur cleared, 60ms
   apart, 700ms at most, once. Inside a card nothing is transformed, clipped,
   masked, filtered, faded with opacity or given a z-index (the WebKit law):
   things inside cards appear by colour only. */

@property --glow{syntax:'<number>';inherits:true;initial-value:1}
:root{
  --ease:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.34,1.56,.64,1);
  --surf:#13161b;--surf-2:#181b21;--line-in:inset 0 0 0 1px #ffffff0a;
  --soft:0 24px 60px -28px #000000d9;--paper:0 18px 10px #00000008,0 6px 8px #0000000d,0 3px 6px #0000000d,0 2px 4px #00000014;
  --t92:#ebedf2eb;--t70:#ebedf2b3;--t55:#ebedf28c;--t40:#ebedf266;
}
.hand{font-family:'Caveat','Bradley Hand','Segoe Print',cursive;font-weight:600}

/* ---- the one reveal (outside cards: headings, card stages, scenes) ---- */
/* .rv blocks fold and (text) unblur with the scroll: fold.js */

/* ---- type ---- */
.sec-a h2,.head-l h2,.head-c h2{font-size:clamp(2.125rem,1.53rem + 2vw,3.25rem)!important;font-weight:600;letter-spacing:-.035em;line-height:1.06}
.head-c{max-width:42rem;margin:0 auto 56px;text-align:center}
.head-c p,.head-l p{margin-top:18px;color:var(--t70);font-size:1.0625rem;line-height:1.55}
.head-l{max-width:46rem;margin:0 0 56px}
.sec-a{padding:120px 0}
html.type-display h1,html.type-display h2,html.type-display .tile h3{font-family:'Bricolage Grotesque',var(--sans);font-optical-sizing:auto;letter-spacing:-.03em}
html.type-display .hero h1{font-weight:650;letter-spacing:-.035em}

/* ---- hero ---- */
.hero-a{padding:48px 0 32px;overflow-x:clip}
.hero-a-col{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-a-col>*{order:3}
.hero-a .tagline,.hero-a h1,.hero-a .lede{order:1}
.hero-a .stage-hero,.hero-a .scene-cap{order:2}
.hero-a .actions,.hero-a .hp-line{order:3}
.hero-a .wins,.hero-a .works-line{order:4}
.hero-a .works-list{order:5}
.hero-a .works-one{order:3}
.hero-a .tagline{justify-content:center;margin-bottom:22px;color:var(--t70)}
.hero-a h1{max-width:18ch;margin-inline:auto;font-size:clamp(2.5rem,1.62rem + 3.75vw,4.25rem);letter-spacing:-.045em;line-height:1}
.hero-a .lede{margin:22px auto 0;max-width:36rem;font-size:1.125rem;color:var(--t70)}
.hero-a .actions{justify-content:center;margin-top:24px}
.hero-a .hp-line{margin:14px auto 0;max-width:46rem}
.hero-a .wins{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;max-width:none;margin:26px 0 0}
.hero-a .works-list{margin-top:26px}
.scene-cap{margin:14px 0 0}
.hl{position:relative;white-space:nowrap}
.hl-mark{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.34em;overflow:visible;pointer-events:none}
.hl-mark path{fill:none;stroke:var(--mint);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hl-mark .hl-2{stroke-width:2.5;stroke:#9fe8c980}
@keyframes hl-draw{from{stroke-dashoffset:1}}
@media (prefers-reduced-motion:no-preference){.hl-mark path{stroke-dasharray:1;stroke-dashoffset:0;animation:hl-draw .9s var(--ease) .5s backwards}.hl-mark .hl-2{animation-delay:.75s}}

/* the stage: the night scene (one app, every screen) and, outside it, three floating notes */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.works-one{margin-top:22px;font-size:.875rem;color:var(--t55)}
.works-one span{color:var(--t70)}
.stage-hero{position:relative;width:min(720px,100%);margin:32px auto 0}
.scene{
  --u:calc(min(720px, 100vw - 64px) / 880);
  position:relative;height:calc(var(--u)*440);margin:0;border-radius:22px;overflow:hidden;text-align:left;
  box-shadow:var(--line-in),0 40px 100px -40px #000,0 0 120px -30px #9fe8c926;
  background:
    radial-gradient(calc(var(--u)*520) calc(var(--u)*300) at 34% 42%,#9fe8c91c,#9fe8c900 70%),
    radial-gradient(calc(var(--u)*360) calc(var(--u)*300) at 82% 60%,#eab4701f,#eab47000 70%),
    linear-gradient(to bottom,#0000 82%,#ffffff05 82%,#0000 100%),
    radial-gradient(130% 120% at 50% 20%,#141922,#0b0d11 70%);
}
.hs-glow{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(#0000,#0000003d)}
.hs .stk{display:inline-grid}
.hs .stk>*,.t-ai .stk>*{grid-area:1/1}
.t-ai .stk{display:inline-grid}
.hs-before{visibility:hidden}
/* the laptop: Briefly in a browser */
.lap{position:absolute;left:calc(var(--u)*56);top:calc(var(--u)*54);width:calc(var(--u)*560)}
.lap-screen{height:calc(var(--u)*344);padding:calc(var(--u)*9);background:#07080a;border-radius:calc(var(--u)*14) calc(var(--u)*14) 3px 3px;box-shadow:inset 0 0 0 1px #2a2d33,0 0 calc(var(--u)*90) calc(var(--u)*4) #9fe8c90d}
.lap-glass{display:flex;flex-direction:column;height:100%;border-radius:calc(var(--u)*6);background:#0f1115}
.br{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*28);padding:0 calc(var(--u)*10);background:#16191f;border-radius:calc(var(--u)*6) calc(var(--u)*6) 0 0}
.br .dots{display:inline-flex;gap:calc(var(--u)*5)}
.br .dots i{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:#3a3f49}
.br-u{display:inline-flex;align-items:center;gap:calc(var(--u)*5);margin:0 auto;padding:calc(var(--u)*3) calc(var(--u)*30);border-radius:calc(var(--u)*6);background:#0d0f13;font-size:max(var(--minfs,0px),calc(var(--u)*10));color:var(--t55)}
.br-u svg,.ia-ok svg,.bw-toast svg{width:calc(var(--u)*10);height:calc(var(--u)*10);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bw{flex:1;display:grid;grid-template-columns:calc(var(--u)*118) minmax(0,1fr);min-height:0}
.bw-side{padding:calc(var(--u)*12) calc(var(--u)*8);border-right:1px solid #ffffff08;font-size:max(var(--minfs,0px),calc(var(--u)*10.5));color:var(--t55)}
.bw-side p{padding:calc(var(--u)*4) calc(var(--u)*7);border-radius:calc(var(--u)*5)}
.bw-side .on{background:#1b1f26;color:var(--text)}
.bw-logo{display:flex;align-items:center;gap:calc(var(--u)*6);margin-bottom:calc(var(--u)*8);font-weight:650;color:var(--text)!important}
.bw-logo i{width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:calc(var(--u)*3);background:linear-gradient(135deg,#f3cf95,#e8b46e)}
.bw-main{position:relative;padding:calc(var(--u)*12) calc(var(--u)*16)}
.bw-head{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*13)}
.bw-head b{font-weight:600}
.bw-me{display:inline-flex;align-items:center;gap:calc(var(--u)*6);margin-left:auto;font-size:max(var(--minfs,0px),calc(var(--u)*10.5));color:var(--t70)}
.bw-me i{display:grid;place-items:center;width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:50%;background:#2b3a52;color:#dbe7ff;font-style:normal;font-size:max(var(--minfs,0px),calc(var(--u)*8));font-weight:600}
.bw-plan{padding:calc(var(--u)*2) calc(var(--u)*7);border-radius:calc(var(--u)*5);font-style:normal;font-size:max(var(--minfs,0px),calc(var(--u)*9.5));font-weight:600}
.bw-free{background:#ffffff12;color:var(--t70)}
.bw-pro{background:var(--settled-bg);color:var(--settled)}
.bw-notes{list-style:none;margin:calc(var(--u)*12) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*8)}
.bw-notes li{display:flex;flex-direction:column;padding:calc(var(--u)*8) calc(var(--u)*9);border-radius:calc(var(--u)*7);background:#15181d;font-size:max(var(--minfs,0px),calc(var(--u)*10.5))}
.bw-notes li.on{box-shadow:inset 0 0 0 1px #9fe8c933}
.bw-notes b{font-weight:600}.bw-notes span{font-size:max(var(--minfs,0px),calc(var(--u)*8.5));color:var(--t40)}
.bw-note{display:grid;gap:calc(var(--u)*7);margin-top:calc(var(--u)*14)}
.bw-note i{display:block;height:calc(var(--u)*7);border-radius:4px;background:#ffffff0f}
.bw-note .l1{width:62%;height:calc(var(--u)*10);background:#ffffff1a}.bw-note .l2{width:92%}.bw-note .l3{width:78%}
.bw-foot{position:absolute;left:calc(var(--u)*16);right:calc(var(--u)*16);bottom:calc(var(--u)*12);display:grid}
.bw-up,.bw-toast{display:flex;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*8) calc(var(--u)*10);border-radius:calc(var(--u)*8);font-size:max(var(--minfs,0px),calc(var(--u)*10.5))}
.bw-up{background:#1a1d23;color:var(--t70)}.bw-up b{color:var(--mint);font-weight:600}
.bw-toast{background:#0f2a21;color:#d4f6e6;box-shadow:inset 0 0 0 1px #78d3ae40}
.lap-base{position:relative;width:calc(var(--u)*640);height:calc(var(--u)*13);margin-left:calc(var(--u)*-40);border-radius:2px 2px calc(var(--u)*12) calc(var(--u)*12);background:linear-gradient(#4a4e57,#25282e 45%,#101114);box-shadow:0 calc(var(--u)*14) calc(var(--u)*26) #000000b0}
.lap-base::before{content:"";position:absolute;left:calc(50% - var(--u)*44);top:0;width:calc(var(--u)*88);height:calc(var(--u)*5);border-radius:0 0 calc(var(--u)*5) calc(var(--u)*5);background:#1a1c21}
/* the iPhone: the example app, one customer signed in */
.iph{position:absolute;left:calc(var(--u)*636);top:calc(var(--u)*34);width:calc(var(--u)*200);height:calc(var(--u)*404);padding:calc(var(--u)*7);border-radius:calc(var(--u)*34);background:linear-gradient(150deg,#33363d,#121317 38%,#0b0c0e);box-shadow:inset 0 0 0 1px #41454d,0 calc(var(--u)*30) calc(var(--u)*50) calc(var(--u)*-14) #000000e6}
.iph-screen{display:flex;flex-direction:column;height:100%;padding:0 calc(var(--u)*11);border-radius:calc(var(--u)*27);background:#0f1115}
.iph .ph-status{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*28);padding:0 calc(var(--u)*6);font-size:max(var(--minfs,0px),calc(var(--u)*9.5));color:var(--text)}
.iph .ph-status b{font-weight:600}
.iph .ph-island{width:calc(var(--u)*56);height:calc(var(--u)*16);border-radius:999px;background:#000}
.iph .ph-status svg{width:calc(var(--u)*22);height:calc(var(--u)*9);fill:currentColor}
.ia-head{display:flex;align-items:center;justify-content:space-between;margin:calc(var(--u)*6) 0 calc(var(--u)*10);font-size:calc(var(--u)*13)}
.ia-head .bw-logo{margin:0}
.iph .stk{display:grid}
.iph .stk>*{grid-area:1/1}
.ia-card{padding:calc(var(--u)*13) calc(var(--u)*12) calc(var(--u)*12);border-radius:calc(var(--u)*16);background:linear-gradient(160deg,#1b2b26,#15181d 60%);box-shadow:inset 0 0 0 1px #9fe8c926}
.ia-k{font-size:max(var(--minfs,0px),calc(var(--u)*9));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}
.ia-h{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*15.5);font-weight:650;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.ia-card ul{list-style:none;margin:calc(var(--u)*9) 0 0;padding:0;display:grid;gap:calc(var(--u)*4);font-size:max(var(--minfs,0px),calc(var(--u)*10));color:var(--t70)}
.ia-card li::before{content:"✓ ";color:var(--mint)}
.ia-btn{margin-top:calc(var(--u)*12);padding:calc(var(--u)*9);border-radius:calc(var(--u)*10);background:var(--mint);color:#0d0f13;text-align:center;font-size:calc(var(--u)*11.5);font-weight:650}
.ia-f{margin-top:calc(var(--u)*6);text-align:center;font-size:max(var(--minfs,0px),calc(var(--u)*8.5));color:var(--t40)}
.ia-done{background:#17211e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ia-ok{display:grid;place-items:center;width:calc(var(--u)*36);height:calc(var(--u)*36);margin-bottom:calc(var(--u)*6);border-radius:50%;background:var(--settled-bg);color:var(--settled)}
.ia-ok svg{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.ia-p{margin-top:calc(var(--u)*5);font-size:max(var(--minfs,0px),calc(var(--u)*10));line-height:1.4;color:var(--t70)}
.ia-notes{list-style:none;margin:calc(var(--u)*12) 0 0;padding:0;display:grid;gap:calc(var(--u)*6)}
.ia-notes li{display:flex;justify-content:space-between;padding:calc(var(--u)*9) calc(var(--u)*10);border-radius:calc(var(--u)*10);background:#15181d;font-size:max(var(--minfs,0px),calc(var(--u)*10.5))}
.ia-notes b{font-weight:600}.ia-notes span{color:var(--t40)}
/* outside the card: three notes, softly tilted */
.float{position:absolute;text-align:left;box-shadow:inset 0 1px 0 #ffffff14,var(--paper),0 24px 50px -18px #000c}
.pay-note{right:-34px;top:-24px;width:290px;padding:12px 14px 13px;border-radius:18px;background:#1f2329f2;rotate:3deg}
.pn-h{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:.6875rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--t55)}
.pn-h em{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:0}
.pn-app{width:18px;height:18px;border-radius:5px;background:var(--mint);box-shadow:inset 0 0 0 4px #78d3ae}
.pn-t{font-size:.9375rem;font-weight:600;color:var(--text)}
.pn-b{font-size:.875rem;color:var(--t70)}
.ov-note{left:-44px;bottom:38px;width:210px;padding:12px 14px;border-radius:16px;background:#181b21f2;rotate:-4deg}
.ov-h{display:flex;align-items:center;gap:7px;font-size:.75rem;font-weight:600;color:var(--t70)}
.ov-h .lens{width:14px;height:14px}
.ov-h em{margin-left:auto;font-style:normal;font-weight:400;color:var(--t40)}
.ov-n{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline;margin-top:6px}
.ov-n b{font-size:1.375rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.ov-n span{font-size:.8125rem;color:var(--t55)}
.lock-chip{right:-22px;bottom:-16px;display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 13px;border-radius:999px;background:#22262e;font-size:.8125rem;font-weight:500;color:var(--text);rotate:-3deg}
.lock-chip svg{width:14px;height:14px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the script, once on load: the customer taps Unlock Pro, the payment lands, the laptop shows Pro */
@keyframes hold{from{visibility:visible}to{visibility:hidden}}
@keyframes ink{from{color:transparent;background-color:transparent;box-shadow:none;border-color:transparent}}
@keyframes press{40%{background-color:#e6fff4}}
@keyframes pop{from{opacity:0;scale:.86;rotate:0deg}}
@media (prefers-reduced-motion:no-preference){
  .hs .hs-before,.t-ai.play .hs-before{animation:hold var(--hold,1.2s) step-end both}
  .hs .hs-after,.hs .hs-after *,.t-ai.play .hs-after{animation:ink .45s var(--ease) var(--at,0s) backwards}
  .hs .ia-btn{animation:press .5s ease-out .75s}
  .pay-note{animation:pop .5s var(--pop) 1.45s backwards}
  .ov-note{animation:pop .5s var(--pop) 2.35s backwards}
  .lock-chip{animation:pop .5s var(--pop) 2.6s backwards}
}

/* ---- "Just ask your AI": the AI asks, you approve on your phone ---- */
#how{position:relative;overflow-x:clip}
#how::before{content:"";position:absolute;left:50%;top:440px;width:900px;height:420px;margin-left:-450px;background:radial-gradient(closest-side,#9fe8c91c,#9fe8c900);pointer-events:none}
.mode{display:flex;width:max-content;margin:-24px auto 32px;padding:4px;border-radius:999px;background:var(--surf);box-shadow:var(--line-in)}
.mode-b{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--t70);font:600 .875rem/1 var(--sans);transition:background-color .2s var(--ease),color .2s var(--ease)}
.mode-b[aria-pressed="true"]{background:var(--mint);color:#0d0f13}
.mode-b:not([aria-pressed="true"]):hover{color:var(--text)}
.ask-wrap{position:relative;max-width:1000px;margin:0 auto;-webkit-mask-image:linear-gradient(to bottom,#000 76%,#000000b3 86%,#00000040 94%,#0000);mask-image:linear-gradient(to bottom,#000 76%,#000000b3 86%,#00000040 94%,#0000)}
.ask{--u:calc(min(1000px, 100vw - 64px) / 1000);position:relative;height:calc(var(--u)*580);margin:0;text-align:left}
.ask[data-mode="code"] [data-for="chat"],.ask[data-mode="chat"] [data-for="code"]{display:none}
.aw{position:absolute;left:calc(var(--u)*20);top:calc(var(--u)*40);width:calc(var(--u)*600);height:calc(var(--u)*470);display:flex;flex-direction:column;border-radius:calc(var(--u)*14);background:#14171c;box-shadow:inset 0 0 0 1px #ffffff12,0 calc(var(--u)*30) calc(var(--u)*70) #000000b3;overflow:hidden}
.aw-top{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*38);padding:0 calc(var(--u)*14);background:#1a1d23;border-bottom:1px solid #ffffff0a;font-size:calc(var(--u)*13)}
.aw-top .dots{display:inline-flex;gap:calc(var(--u)*6)}
.aw-top .dots i{width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%}
.aw-top .dots i:nth-child(1){background:#ff5f57}.aw-top .dots i:nth-child(2){background:#febc2e}.aw-top .dots i:nth-child(3){background:#28c840}
.aw-top b{font-weight:600}
.aw-kind{display:inline-flex;align-items:center;gap:calc(var(--u)*6);margin-left:auto;color:var(--t55);font-size:calc(var(--u)*12)}
.aw-kind svg{width:calc(var(--u)*13);height:calc(var(--u)*13);fill:currentColor}
.aw-log{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:calc(var(--u)*12);padding:calc(var(--u)*22) calc(var(--u)*24)}
.aw-me{align-self:flex-end;max-width:80%;padding:calc(var(--u)*10) calc(var(--u)*14);border-radius:calc(var(--u)*16);border-bottom-right-radius:calc(var(--u)*5);background:#173328;color:#d4f6e6;font-size:calc(var(--u)*14.5);line-height:1.4}
.aw-ai{max-width:88%;font-size:calc(var(--u)*15);line-height:1.5;color:var(--t92)}
.aw-wait{align-self:flex-start;padding:calc(var(--u)*6) calc(var(--u)*12);border-radius:999px;background:#1b1f25;color:var(--t70);font-size:calc(var(--u)*12.5)}
.aw .res{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*11) calc(var(--u)*13);border-radius:calc(var(--u)*12);background:#0f2a21;box-shadow:inset 0 0 0 1px #78d3ae40}
.res-ico{display:grid;place-items:center;flex:none;width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:calc(var(--u)*8);background:#9fe8c926;color:var(--mint)}
.res-ico svg{width:calc(var(--u)*16);height:calc(var(--u)*16);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aw .res p{display:flex;flex-direction:column;font-size:calc(var(--u)*14);line-height:1.3}
.aw .res b{font-weight:600}.aw .res span{font-size:calc(var(--u)*12);color:var(--t70)}
.aw-input{margin:0 calc(var(--u)*18) calc(var(--u)*18);padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*14);background:#1a1d23;box-shadow:inset 0 0 0 1px #ffffff0d;font-size:calc(var(--u)*13);color:var(--t40)}
/* the phone: Gemmein's approval, as the consent screen draws it */
.ap{position:absolute;left:calc(var(--u)*690);top:0;width:calc(var(--u)*270);height:calc(var(--u)*550);padding:calc(var(--u)*8);border-radius:calc(var(--u)*42);background:linear-gradient(150deg,#33363d,#121317 38%,#0b0c0e);box-shadow:inset 0 0 0 1px #41454d,0 calc(var(--u)*30) calc(var(--u)*60) calc(var(--u)*-14) #000000e6}
.ap-screen{display:flex;flex-direction:column;height:100%;padding:0 calc(var(--u)*14);border-radius:calc(var(--u)*34);background:radial-gradient(120% 60% at 50% 0%,#14251f,#0f1115 60%)}
.ap-status{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*34);padding:0 calc(var(--u)*8);font-size:calc(var(--u)*11.5)}
.ap-status b{font-weight:600}
.ap .ph-island{width:calc(var(--u)*76);height:calc(var(--u)*22);border-radius:999px;background:#000}
.ap-status svg{width:calc(var(--u)*26);height:calc(var(--u)*10);fill:currentColor}
.ap-url{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*5);margin:calc(var(--u)*4) auto 0;padding:calc(var(--u)*5) calc(var(--u)*14);border-radius:999px;background:#ffffff0d;font-size:calc(var(--u)*11);color:var(--t70)}
.ap-url svg,.ap-lines svg,.ap-ai svg{width:calc(var(--u)*12);height:calc(var(--u)*12);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-body{display:flex;flex-direction:column;margin-top:calc(var(--u)*26)}
.ap-who{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*8)}
.ap-who i{width:calc(var(--u)*40);border-top:2px dotted #ffffff2e}
.ap-ai,.ap-gem{display:grid;place-items:center;width:calc(var(--u)*40);height:calc(var(--u)*40);border-radius:calc(var(--u)*12);background:#1d2027;box-shadow:inset 0 0 0 1px #ffffff12}
.ap-ai svg{width:calc(var(--u)*18);height:calc(var(--u)*18);fill:var(--t70);stroke:none}
.ap-gem .lens{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.ap-h{margin-top:calc(var(--u)*16);text-align:center;font-size:calc(var(--u)*18);font-weight:650;letter-spacing:-.02em;line-height:1.25}
.ap-lines{list-style:none;margin:calc(var(--u)*18) 0 0;padding:0;display:grid;gap:calc(var(--u)*10)}
.ap-lines li{display:flex;align-items:flex-start;gap:calc(var(--u)*9);font-size:calc(var(--u)*12);line-height:1.4;color:var(--t92)}
.ap-lines svg{flex:none;margin-top:calc(var(--u)*2);color:var(--mint)}
.ap-fine{margin-top:calc(var(--u)*14);font-size:max(var(--minfs,0px),calc(var(--u)*10.5));line-height:1.45;color:var(--t40)}
.ap-yes{margin-top:calc(var(--u)*20);padding:calc(var(--u)*11);border-radius:calc(var(--u)*12);background:var(--mint);color:#0d0f13;text-align:center;font-size:calc(var(--u)*14);font-weight:650}
.ap-no{margin-top:calc(var(--u)*8);text-align:center;font-size:calc(var(--u)*12.5);color:var(--t55)}
.d-tap{left:calc(var(--u)*498);top:calc(var(--u)*472);width:210px;height:80px;rotate:-4deg}
.wins-how{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;max-width:none;margin:8px auto 0}
.desk-cap{max-width:40rem;margin:18px auto 0;text-align:center;color:var(--t55);font-size:.9375rem}
#how[data-mode="chat"] .desk-cap [data-for="code"],#how[data-mode="code"] .desk-cap [data-for="chat"]{display:none}
.desk-cap .mono{font-size:.8125rem;color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .ask.pre .ink,.ask.pre .ink *{color:transparent!important;background-color:transparent!important;box-shadow:none!important}
  .ask.play .ink,.ask.play .ink *{animation:ink .45s var(--ease) var(--at,0s) backwards}
  .ask.play .ap-yes{animation:ink .45s var(--ease) 1.25s backwards,press .5s ease-out 1.9s}
}

/* ---- "What your app gets": an asymmetric bento; mock-ups pinned to the edges, cut by the card ---- */
#what-you-get{overflow-x:clip}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.ts{position:relative}
.tile{position:relative;height:350px;margin:0;border-radius:18px;overflow:hidden;background:var(--surf);box-shadow:var(--line-in),var(--soft);text-align:left}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;border-radius:0 0 18px 18px;pointer-events:none;background:linear-gradient(to bottom,#13161b00,#13161bb3 70%,var(--surf))}
.t-text{position:relative;padding:28px 30px 0;max-width:34rem}
.t-ico{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:10px;background:#9fe8c914;color:var(--mint)}
.t-ico svg,.feat-q svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--t92)}
.tile .t-text p{margin-top:6px;font-size:.9688rem;line-height:1.5;color:var(--t70)}
.tile code,.tile .mono{font-family:var(--mono);font-size:.8125rem;color:var(--text)}
.t-mock{position:relative;margin:22px 0 0 30px;width:470px}
.ts-a .t-text,.ts-d .t-text{max-width:46%}
.ts-a .t-mock,.ts-d .t-mock{position:absolute;left:52%;top:40px;margin:0;width:520px}
.mw{border-radius:12px;background:var(--surf-2);box-shadow:inset 0 0 0 1px #ffffff12,0 20px 50px -20px #000}
.mw-top{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;border-bottom:1px solid #ffffff0a;font-size:.75rem;color:var(--t55)}
.mw-top .dots{display:inline-flex;gap:6px}
.mw-top .dots i{width:9px;height:9px;border-radius:50%;background:#3a3f49}
.mw-t{flex:1;text-align:center;margin-right:42px}
.mt{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.mt th{padding:10px 16px 6px;text-align:left;font-size:.6875rem;font-weight:500;color:var(--t40)}
.mt td{padding:10px 16px;box-shadow:0 -1px 0 #ffffff08;color:var(--t92);white-space:nowrap}
.mt .num{text-align:right}
.mt tr.hot td{background:#9fe8c90d}
.cr-stat{display:flex;align-items:baseline;justify-content:space-between;margin:14px 16px 8px;padding:12px 14px;border-radius:10px;background:#0f1115}
.cr-stat span{font-size:.75rem;color:var(--t55)}
.cr-stat b{font-size:1.75rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cr{list-style:none;margin:0;padding:0 0 10px}
.cr li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:9px 16px;box-shadow:0 -1px 0 #ffffff08;font-size:.8125rem;font-variant-numeric:tabular-nums}
.cr b{font-weight:600;color:var(--mint)}
.cr li:nth-child(2) b{color:var(--t70)}
.cr span{color:var(--t92)}.cr em{font-style:normal;color:var(--t40)}
.ts-c .m-mail{width:400px}
.ts-c .tile,.ts-d .tile{height:410px}
.ts-c .tile::after{height:56px}
.mail{padding:0 0 14px;border-radius:12px;background:#1b1f26;color:var(--text);box-shadow:inset 0 0 0 1px #ffffff12,0 20px 50px -20px #000}
.mail-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-bottom:1px solid #ffffff0a;font-size:.75rem;font-weight:600;color:var(--t70)}
.mail-bar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mail-from{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 8px;font-size:.75rem;color:var(--t55)}
.mail-from b{color:var(--t92);font-weight:600}
.mail-from span:last-child{margin-left:auto}
.mail-av{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#f3cf95,#e8b46e);color:#2a1d0c;font-size:.6875rem;font-weight:700}
.mail-h{padding:0 16px;font-size:1rem;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.mail-p{margin-top:4px;padding:0 16px;font-size:.75rem;line-height:1.5;color:var(--t70)}
.mail-p b{color:var(--text)}
.mail-code{margin:10px 16px 0;padding:10px;border-radius:8px;background:#0f2a21;box-shadow:inset 0 0 0 1px #78d3ae33;color:var(--mint);font-family:var(--mono);font-size:1.25rem;font-weight:500;letter-spacing:.18em;text-align:center}
.mail-s{margin-top:10px;padding:0 16px;font-size:.6875rem;line-height:1.5;color:var(--t40)}
.rules{list-style:none;margin:0;padding:4px 0 10px}
.rules li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:center;padding:11px 16px;box-shadow:0 -1px 0 #ffffff08;font-size:.8125rem}
.rules li:first-child{box-shadow:none}
.rules b{font-family:var(--mono);font-weight:500;color:var(--t92)}
.rules em{justify-self:start;font-style:normal}
.rules span{grid-column:1/-1;font-size:.75rem;color:var(--t55)}
.tile .tag{font-style:normal;font-size:.6875rem;font-weight:500;padding:3px 7px;border-radius:6px;background:var(--settled-bg);color:var(--settled)}
.tile .tag-free{background:#ffffff0d;color:var(--t70)}
/* the hand-drawn note, outside the card */
.doodle{position:absolute;pointer-events:none;overflow:visible}
.dd{fill:none;stroke:#e9d79a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dd-t{font-family:'Caveat','Bradley Hand','Segoe Print',cursive;font-weight:600;font-size:24px;fill:#e9d79a}
.d-maya{left:30%;top:-64px;width:220px;height:90px;rotate:-4deg}

/* the bento, three rows: AI leads; then sign-in and data; then payments anywhere, files, every device */
.ts-a{grid-column:1/8}.ts-b{grid-column:8/13}.ts-c{grid-column:1/6}.ts-d{grid-column:6/13}
.ts-e{grid-column:1/6}.ts-f{grid-column:6/9}.ts-g{grid-column:9/13}
.ts-a .tile,.ts-b .tile{height:420px}
.ts-e .tile,.ts-f .tile,.ts-g .tile{height:390px}
.t-sub{margin-top:10px!important;color:var(--t55)!important;font-size:.875rem!important}
.t-ai .t-text{max-width:44%}
.m-ai{position:absolute;left:47%;top:34px;width:560px;margin:0}
.ai-app{width:340px}
.ai-chat{display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px}
.ai-q{align-self:flex-end;padding:7px 11px;border-radius:12px;border-bottom-right-radius:4px;background:#173328;color:#d4f6e6;font-size:.8125rem}
.ai-a{display:grid;gap:3px;font-size:.8438rem;line-height:1.45;color:var(--t92)}
.ai-cost{margin-top:4px;font-size:.6875rem;color:var(--t40);font-variant-numeric:tabular-nums}
.ai-tool{position:absolute;left:200px;top:196px;width:270px;background:#1b1f26}
.ai-tool .mw-t{margin:0;text-align:left;color:var(--t92)}
.kv{margin:0;padding:6px 14px 4px}
.kv>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;box-shadow:0 -1px 0 #ffffff08;font-size:.75rem}
.kv>div:first-child{box-shadow:none}
.kv dt{color:var(--t55)}.kv dd{margin:0;color:var(--t92);font-variant-numeric:tabular-nums}
.kv b{font-weight:600;color:var(--mint)}
.kv-h{margin:0;padding:8px 14px 12px;font-size:.75rem;color:var(--t70)}
.t-ai .hs-before{visibility:hidden}
.t-ai.pre .hs-before{visibility:visible}
.t-ai.pre .hs-after,.t-ai.pre .ink{color:transparent!important}
@media (prefers-reduced-motion:no-preference){.t-ai.play .ink{animation:ink .45s var(--ease) var(--at,0s) backwards}}
.ev{list-style:none;margin:0;padding:4px 0 10px}
.ev li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:center;padding:10px 14px;box-shadow:0 -1px 0 #ffffff08;font-size:.75rem}
.ev li:first-child{box-shadow:none}
.ev-src{font-weight:600;color:var(--t92)}
.ev code{font-family:var(--mono);color:var(--t55)}
.ev em{grid-column:1;font-style:normal;color:var(--t40)}
.ev b{grid-column:2;justify-self:start;padding:3px 8px;border-radius:6px;background:var(--settled-bg);color:var(--settled);font-weight:500}
.fl{list-style:none;margin:0;padding:6px 0}
.fl li{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:4px;align-items:center;padding:10px 14px;box-shadow:0 -1px 0 #ffffff08;font-size:.8125rem}
.fl li:first-child{box-shadow:none}
.fl svg{width:14px;height:14px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fl b{font-weight:600;color:var(--t92)}
.fl em{grid-column:2;justify-self:start}
.ts-f .t-mock{width:300px}
.m-dev{width:460px}
.dv-web{width:320px}
.dv-n{display:flex;flex-direction:column;padding:14px;font-size:.8125rem}
.dv-n b{font-weight:600}.dv-n span{font-size:.6875rem;color:var(--t40)}
.dv-mac{position:absolute;left:150px;top:78px;width:200px;background:#1b1f26}
.dots-mac i:nth-child(1){background:#ff5f57!important}.dots-mac i:nth-child(2){background:#febc2e!important}.dots-mac i:nth-child(3){background:#28c840!important}
.dv-ph{position:absolute;left:290px;top:-20px;width:150px;height:240px;padding:34px 10px 10px;border-radius:26px;background:#14171c;box-shadow:inset 0 0 0 5px #2a2d33,inset 0 0 0 6px #0b0c0e,0 20px 40px -14px #000}
.dv-ph .dv-n{padding:10px;border-radius:12px;background:#1b1f26}
.t-open{display:none}
@media (max-width:1020px){.ts-e{grid-column:1/7}.ts-f{grid-column:7/13}.ts-g{grid-column:1/13}}
@media (max-width:860px){
  .ts-e,.ts-f,.ts-g{grid-column:auto}
  .ts-a .tile,.ts-b .tile{height:380px}
  .t-ai .t-text{max-width:34rem}
  .m-ai{position:relative;left:auto;top:auto;margin:20px 0 0 30px}
  .ai-tool{left:150px;top:150px}
}
@media (max-width:500px){
  .ts-a .tile{height:580px}.ts-b .tile{height:350px}
  .ts-g .tile{height:370px}
  .ts-c .tile{height:440px}
  .m-ai{margin:18px 0 0 22px}
  .ai-app{width:300px}
  .ai-tool{left:110px;top:160px;width:240px}
  .ts-g .m-dev{display:flex;align-items:flex-end;gap:10px;width:calc(100% - 22px)}
  .ts-g .dv-web,.ts-g .dv-mac,.ts-g .dv-ph{position:static;flex:1 1 0;width:auto;margin:0}
  .ts-g .dv-ph{flex:0 0 84px;height:150px;padding:30px 8px 8px;border-radius:20px}
  .ts-g .dv-web .mw-t{margin-right:0;font-size:.625rem}
  .ts-g .dv-mac .mw-t{margin-right:0}
  .ts-g .mw-top{height:24px;padding:0 8px;gap:6px}
  .ts-g .mw-top .dots i{width:6px;height:6px}
  .ts-g .dv-n{padding:10px 9px 12px}
  .ts-g .dv-ph .dv-n{padding:8px;border-radius:10px}
  .ts-g .dv-n b{font-size:.8125rem}
  .ts-g .dv-n span{display:none}
  .t-open{display:block;position:absolute;inset:0;width:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer}
  .t-open:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
  .tile .t-text h3::after{content:" ›";color:var(--t40)}
}
.sheet-shot .t-mock{position:relative;left:auto;top:auto;margin:0;width:100%}
.sheet-shot .m-ai .ai-app{width:100%}
.sheet-shot .ai-tool{position:relative;left:auto;top:auto;width:100%;margin-top:12px}
.sheet-shot .dv-ph,.sheet-shot .dv-mac{position:relative;left:auto;top:auto;margin:12px auto 0}
.sheet-shot .dv-web,.sheet-shot .ts-f .t-mock{width:100%}
.sheet-shot .mail{max-width:none}

/* ---- "Run it from one dashboard": the list left; the dashboard right, no frame, dissolving ---- */
.run{overflow-x:clip}
.run-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:64px;align-items:start}
.run-text h2{font-size:clamp(2.125rem,1.53rem + 2vw,3.25rem)!important}
.run-sub{margin-top:18px;color:var(--t70);font-size:1.0625rem;line-height:1.55}
.feats{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid #ffffff0d}
.feat{border-bottom:1px solid #ffffff0d}
.feat h3{margin:0;font-size:1rem}
.feat-q{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:13px 0;border:0;background:none;color:var(--t55);font:500 1.0625rem/1.35 var(--sans);letter-spacing:-.01em;text-align:left;transition:color .2s var(--ease)}
.feat-q svg{flex:none;color:var(--t40);transition:color .2s var(--ease)}
.feat-q:hover,.feat.open .feat-q,.feats:not(.feats-on) .feat-q{color:var(--text)}
.feat.open .feat-q svg{color:var(--mint)}
.feat-q:focus-visible{outline-offset:2px}
.feat-a{padding:0 0 18px 32px}
.feat-a p{color:var(--t70);font-size:.9688rem;line-height:1.55;max-width:30rem}
.feat-line{display:none}
.feats-auto .feat-line{display:block;height:1px;margin-top:14px;background:#ffffff0a}
.feat-line i{display:block;width:0;height:100%;background:#9fe8c94d}
.feat-line i.run{animation:feat-run 4.8s linear forwards}
.feats-auto:hover .feat-line i,.feats-auto:focus-within .feat-line i,.feats-away .feat-line i{animation-play-state:paused}
@keyframes feat-run{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.feat-line{display:none!important}}
.run-text .after{margin-top:28px}
.dash-bleed{position:relative;height:600px}
.dash-bleed::before{content:"";position:absolute;left:-40px;top:60px;width:760px;height:520px;background:radial-gradient(closest-side,#9fe8c91f,#9fe8c900);pointer-events:none}
.db{position:absolute;left:0;top:0;width:1060px;height:720px;border-radius:14px 0 0 0;background:#111318;box-shadow:inset 0 0 0 1px #ffffff0d;text-align:left;
  -webkit-mask-image:linear-gradient(to right,#000 360px,#000000c7 480px,#00000080 600px,#00000033 720px,#0000 820px),linear-gradient(to bottom,#000 260px,#000000c7 360px,#00000073 460px,#00000026 540px,#0000 600px);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 360px,#000000c7 480px,#00000080 600px,#00000033 720px,#0000 820px),linear-gradient(to bottom,#000 260px,#000000c7 360px,#00000073 460px,#00000026 540px,#0000 600px);mask-composite:intersect}
.db-top{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-bottom:1px solid #ffffff0a;font-size:.875rem}
.db-av{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#1f6b53;color:#f1fbf7;font-size:.8125rem;font-weight:650}
.db-top b{font-weight:600}
.db-sep{color:var(--t40)}
.db-env{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:#0d0f13;box-shadow:inset 0 0 0 1px #ffffff0d}
.db-env i{padding:4px 10px;border-radius:6px;font-style:normal;font-size:.75rem;font-weight:600;color:var(--t40)}
.db-env .on{background:var(--settled-bg);color:var(--settled)}
.db-sp{flex:1}
.db-search{display:inline-flex;align-items:center;gap:8px;width:230px;height:32px;padding:0 10px;border-radius:8px;background:#181b21;color:var(--t40);font-size:.8125rem}
.db-search svg{width:12px;height:12px;fill:currentColor}
.db-search kbd{margin-left:auto;padding:1px 6px;border-radius:5px;background:#ffffff0d;font:500 .6875rem var(--mono)}
.db-btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;background:#1c2029;box-shadow:inset 0 0 0 1px #ffffff12;font-style:normal;font-size:.8125rem;font-weight:600;color:var(--text);white-space:nowrap}
.db-btn.on{background:var(--mint);color:#0d0f13;box-shadow:none}
.db-me{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3a4049,#1d2128)}
.db-body{display:grid;grid-template-columns:208px minmax(0,1fr);height:calc(100% - 52px)}
.db-rail{padding:16px 12px;border-right:1px solid #ffffff0a;font-size:.8438rem}
.db-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.db-rail li{position:relative;padding:7px 12px;border-radius:7px;color:var(--t55)}
.db-rail li.on{background:#1b1f26;color:var(--text);font-weight:550}
.db-rail li.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--mint)}
.db-rail p{margin:16px 12px 5px;font-size:.6875rem;font-weight:600;color:var(--t40)}
.db-set{margin-top:16px!important}
.db-main{padding:22px 30px;min-width:0}
.db-crumb{font-size:.75rem;color:var(--t40)}
.db-h{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:1.625rem;font-weight:600;letter-spacing:-.025em}
.db-l{margin-top:4px;font-size:.875rem;color:var(--t55);max-width:44rem}
.db-g{margin:20px 0 6px;font-size:.75rem;font-weight:600;color:var(--t40)}
.db-t{width:100%;margin-top:18px;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.db-t th{padding:8px 12px;text-align:left;font-size:.75rem;font-weight:500;color:var(--t40)}
.db-t td{padding:12px;box-shadow:0 -1px 0 #ffffff08;white-space:nowrap;color:var(--t92)}
.db-t td:nth-child(2){color:var(--t55)}
.db-t .num{text-align:right}
.db-rows{list-style:none;margin:6px 0 0;padding:0;max-width:640px}
.db-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:13px 4px;box-shadow:0 -1px 0 #ffffff08;font-size:.9063rem}
.db-rows b{font-weight:600}
.db-rows span{grid-column:1;font-size:.8125rem;color:var(--t55)}
.db-rows em{grid-column:2;grid-row:1/3;font-style:normal;color:var(--t40);font-size:.8125rem}
.db .tag{font-style:normal;font-size:.75rem;font-weight:500;padding:3px 8px;border-radius:6px;background:var(--settled-bg);color:var(--settled)}
.db .tag-free{background:#ffffff0d;color:var(--t70)}
.db .chip{height:22px;font-size:.6875rem}
.ibx{display:grid;grid-template-columns:270px minmax(0,1fr);gap:0;margin-top:16px;border-radius:12px;box-shadow:inset 0 0 0 1px #ffffff0d}
.ib{list-style:none;margin:0;padding:6px;border-right:1px solid #ffffff0a}
.ib li{display:grid;grid-template-columns:1fr auto;padding:10px 12px;border-radius:8px;font-size:.8438rem}
.ib li.on{background:#1b1f26}
.ib b{font-weight:600}.ib span{grid-column:1;color:var(--t55);font-size:.8125rem}.ib em{grid-column:2;grid-row:1;font-style:normal;color:var(--t40);font-size:.75rem}
.th{padding:16px 18px}
.th-who{display:flex;flex-direction:column;font-size:.875rem}.th-who b{font-weight:600}.th-who span{font-size:.75rem;color:var(--t40)}
.th-msg{width:fit-content;margin:14px 0;padding:9px 13px;border-radius:12px;border-bottom-left-radius:4px;background:#1d2027;font-size:.875rem}
.th-reply{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 13px;border-radius:10px;background:#0d0f13;box-shadow:inset 0 0 0 1px #ffffff12;font-size:.8125rem;color:var(--t40)}
.th-reply .db-btn{height:28px}
.fm{padding-bottom:20px}

/* ---- "Or build it yourself": three ways, each window bleeding off the card ---- */
#yourself{overflow-x:clip}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.t3{height:360px}
.t3 .t-mock{margin:22px 0 0 24px;width:calc(100% + 20px)}
.term{background:#0b0c0f}
.term pre{margin:0;padding:12px 16px;font:400 .75rem/1.55 var(--mono);color:var(--t70);white-space:pre}
.term pre b{font-weight:500;color:var(--mint)}
.term .pr{color:var(--t40)}
.cf{padding:12px 16px 16px;font-size:.75rem;color:var(--t55)}
.cf p{margin-top:8px}
.cf .cf-in{margin-top:4px;padding:8px 10px;border-radius:8px;background:#0d0f13;box-shadow:inset 0 0 0 1px #ffffff14;color:var(--text);font-size:.8125rem}
.cf-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px!important}
.cf-btns span{padding:6px 12px;border-radius:8px;background:#1f232a;color:var(--text);font-weight:600}
.cf-btns .on{background:var(--mint);color:#0d0f13}
.gl{padding:16px}
.gl-h{display:flex;align-items:center;gap:10px;font-size:1.125rem;font-weight:600;letter-spacing:-.015em}
.gl-ok{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--settled-bg);color:var(--settled)}
.gl-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl-card{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:12px 14px;border-radius:10px;background:#0f1115;box-shadow:inset 0 0 0 1px #ffffff0d;font-size:.8125rem}
.gl-card b{font-weight:600}.gl-card span{color:var(--t55)}
.gl-card code{font-family:var(--mono);font-size:.75rem;color:var(--text)}
.chip-tilt{position:absolute;right:18px;top:-16px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#22262e;box-shadow:inset 0 1px 0 #ffffff14,var(--paper),0 14px 28px -10px #000c;font:500 .8125rem var(--mono);color:var(--text);rotate:6deg;pointer-events:none}
.chip-tilt svg{width:14px;height:14px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- questions and price, quieter ---- */
.faq-a{max-width:1088px;margin:0 auto;gap:0 64px}
.faq-a>div{padding:22px 0 24px;border:0;border-top:1px solid #ffffff0d;border-radius:0;background:transparent}
.faq-a dt{font-size:1.0625rem}
.faq-a dd{color:var(--t70)}
#faq .trust{justify-content:center;margin-top:36px}
#pricing .pair-grid{max-width:880px;margin:0 auto;gap:20px}
#pricing .price-card{border:0;border-radius:18px;background:var(--surf);box-shadow:var(--line-in),var(--soft)}
#pricing .price-card:last-child{background:linear-gradient(160deg,#16201d,var(--surf) 55%);box-shadow:inset 0 0 0 1px #9fe8c91f,var(--soft)}
#pricing .agency-line{text-align:center;margin-top:24px}

/* ---- the closing band: one swappable picture ---- */
.band-sec{padding:40px 0 112px}
.band-wrap{width:min(1200px,calc(100% - 64px))}
.band{position:relative;display:flex;align-items:center;min-height:520px;border-radius:24px;overflow:hidden;box-shadow:var(--line-in),var(--soft)}
/* the band's ground: Gemmein's own moving lines (band.js draws them on a canvas here); this CSS
   ground shows if the canvas can't run */
.band-img{position:absolute;inset:0;background:radial-gradient(34% 60% at 72% 50%,#9fe8c91f,#9fe8c900 70%),radial-gradient(60% 80% at 100% 100%,#f3cf9512,#f3cf9500 70%),linear-gradient(120deg,#0b0d11,#10141a 60%,#0d1210)}
.band-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.band-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0f13eb 0%,#0d0f13d1 38%,#0d0f1370 56%,#0d0f1300 70%),linear-gradient(to top,#0d0f1373,#0d0f1300 30%)}
.band-text{position:relative;max-width:620px;padding:64px}
.band-text h2{font-size:clamp(1.875rem,1.3rem + 1.8vw,2.75rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:#f4f6f8}
.band-text>p{margin:18px 0 30px;color:var(--t92);font-size:1.0625rem}
.band .final-pitch{align-items:flex-start}
.band .final-actions{justify-content:flex-start}
.band .final-started{margin-top:16px}
.band-sec .research{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:24px;color:var(--t55);font-size:.9375rem}

/* ---- widths ---- */
@media (max-width:1023px){.d-maya{display:none}}
@media (max-width:1100px){.ov-note{left:-12px}.pay-note{right:-12px}.lock-chip{right:-8px}}
@media (max-width:1020px){
  .run-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .run-text{max-width:40rem}
  .dash-bleed{height:560px}
  .pay-note{right:-16px}
}
@media (max-width:860px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .ts-a,.ts-b,.ts-c,.ts-d{grid-column:auto}
  .ts-a .t-text,.ts-d .t-text{max-width:34rem}
  .ts-a .t-mock,.ts-d .t-mock{position:relative;left:auto;top:auto;margin:22px 0 0 30px}
  .trio{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}
  .faq-a{grid-template-columns:1fr}
}
/* phones: the interaction first, then pictures recomposed for the width (cropped, not shrunk) */
@media (max-width:500px){
  .sec-a{padding:80px 0}
  .head-c,.head-l{margin-bottom:36px}
  .hero-a{padding:24px 0 8px}
  .hero-a .tagline{margin-bottom:12px}
  .hero-a h1{max-width:12ch}
  .hero-a .lede{margin-top:14px;font-size:1rem;max-width:30ch}
  .hero-a .actions,.hero-a .hp-line,.hero-a .wins,.hero-a .works-line{order:1}
  .hero-a .actions{width:100%;margin-top:22px}
  .hero-a .hp-line{margin-top:10px}
  .hero-a .wins{display:grid;justify-items:start;gap:6px;width:max-content;max-width:100%;margin:14px auto 0;text-align:left}
  .hero-a .works-list{display:none}
  .hero-a .works-one{order:1;margin-top:14px}
  .stage-hero{display:flex;flex-direction:column;margin-top:28px}
  /* phones: the phone alone is the hero, on the page ground; the payment lands over its top edge */
  .stage-hero{display:block;margin-top:30px}
  .scene{--u:calc(min(72vw, 300px) / 200);height:auto;display:flex;justify-content:center;padding-top:46px;border-radius:0;overflow:visible;background:none;box-shadow:none}
  .hs-glow,.lap{display:none}
  .iph{position:relative;left:auto;top:auto;flex:none;box-shadow:inset 0 0 0 1px #41454d,0 30px 60px -20px #000,0 0 90px -10px #9fe8c92e}
  .ia-done .ia-h{font-size:calc(var(--u)*19)}
  .ia-done .ia-ok{width:calc(var(--u)*44);height:calc(var(--u)*44)}
  .pay-note{left:calc(50% - min(43vw, 180px));right:auto;top:0;width:min(86vw, 360px);rotate:0deg;padding:10px 13px 11px}
  .ov-note,.lock-chip{display:none}
  .hero-a .scene-cap{margin-top:12px}
  .hero-a{padding-bottom:0}
  #how{padding-top:64px}
  .mode{margin:-8px auto 24px}
  .ask-wrap{-webkit-mask-image:linear-gradient(to bottom,#000 80%,#000c 88%,#00000040 96%,#0000);mask-image:linear-gradient(to bottom,#000 80%,#000c 88%,#00000040 96%,#0000)}
  .ask{--u:1px;height:auto;display:flex;flex-direction:column;padding-bottom:20px}
  .aw{position:relative;left:auto;top:auto;width:100%;height:auto}
  .aw-log{padding:18px 16px}
  .aw-input{display:none}
  .ap{position:relative;left:auto;top:auto;width:250px;height:510px;margin:-14px auto 0}
  .aw-log{padding-bottom:30px!important}
  .d-tap{display:none}
  .wins-how{display:grid;justify-items:start;gap:6px;width:max-content;max-width:100%;text-align:left}
  .tile{height:350px}
  .t-text{padding:22px 22px 0}
  .t-mock,.ts-a .t-mock,.ts-d .t-mock{margin:20px 0 0 22px}
  .ts-b .t-mock,.ts-c .t-mock,.ts-c .m-mail{width:calc(100% - 22px)}
  .chip-tilt{display:none}
  /* phones: the first item's screen sits under the list, laid out for the width, fading right and bottom */
  .dash-bleed{height:420px;margin:8px 0 0}
  .dash-bleed::before{display:none}
  .db{left:0;width:100%;height:520px;border-radius:14px;-webkit-mask-image:linear-gradient(to right,#000 72%,#0000),linear-gradient(to bottom,#000 55%,#00000080 75%,#0000);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 72%,#0000),linear-gradient(to bottom,#000 55%,#00000080 75%,#0000);mask-composite:intersect}
  .db-body{grid-template-columns:minmax(0,1fr)}
  .db-rail,.db-search,.db-btn:not(.on),.db-me{display:none}
  .db-main{padding:16px 16px}
  .db-h{font-size:1.375rem}
  .db-t th:nth-child(2),.db-t td:nth-child(2),.db-t th:nth-child(5),.db-t td:nth-child(5){display:none}
  .db-t td,.db-t th{padding-inline:8px}
  .ibx{grid-template-columns:minmax(0,1fr)}
  .ib{border-right:0;border-bottom:1px solid #ffffff0a}
  .feat-a{padding-left:32px}
  .band-sec{padding:16px 0 72px}
  .band-wrap{width:calc(100% - 32px)}
  .band{min-height:600px;align-items:flex-start}
  .band-img::after{background:linear-gradient(to bottom,#0d0f13eb 0%,#0d0f13cc 36%,#0d0f1352 54%,#0d0f1300 66%)}
  .band-text{padding:40px 22px 30px}
  .band .final-actions{display:grid;grid-template-columns:1fr;width:100%}
  .band-sec .research{flex-direction:column;align-items:center;gap:6px;text-align:center}
  .band-sec .research span{max-width:26ch;font-size:.8125rem;line-height:1.5;color:var(--t40);text-wrap:balance}
}
/* ---- /start: a calm head, the prompt as it lands in your AI tool, then the tools ---- */
.start-a .hero{padding:64px 0 8px}
.start-a .start-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.start-a .start-head>*{margin-inline:auto}
.start-a .tagline{justify-content:center}
.start-a .lede{margin:22px auto 0;max-width:36rem}
.start-a .tool-jump{justify-content:center}
.start-a .sec{padding-top:56px;padding-bottom:120px}
.landing{position:relative;width:min(720px,100%);margin:48px auto 0;text-align:left}
.landing .bubbles{display:flex;flex-direction:column;gap:10px;padding:22px 22px 8px}
.landing .composer{margin:10px 16px 26px;padding:12px 14px;border:1px solid var(--hair-2);border-radius:10px;background:var(--sunk);font-size:.9375rem;line-height:1.5;color:var(--text)}
.landing .composer .mono{overflow-wrap:anywhere}
.landing .send{display:flex;justify-content:flex-end;margin-top:10px}
.landing .send .copy-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0 10px;border:0;border-radius:9px;background:var(--mint);color:#0d0f13;font:600 .8125rem/1 var(--sans);cursor:pointer}
.landing .send svg{width:16px;height:16px}
.copy-b .i-check,.copy-b .copy-l{display:none}
.copy-b.done .i-copy{display:none}
.copy-b.done .i-check,.copy-b.done .copy-l{display:inline}
.landing-cap{margin:12px 0 0;text-align:center}
.start-a .tools{max-width:1040px;margin:0 auto;gap:20px}
.start-a .tool{padding:30px 30px 32px;gap:16px}
.start-a .start-more{max-width:1040px;margin:20px auto 0}
@media (max-width:500px){
  .start-a .hero{padding:26px 0 0}
  .start-a .sec{padding-top:36px;padding-bottom:72px}
  .landing{margin-top:28px}
  .landing .bubbles{padding:16px 16px 4px}
  .start-a .tool{padding:22px 18px 24px}
}

/* /start, one question at a time */
.flow .sec{padding-top:48px;padding-bottom:48px}
.flow .other-ways{padding:8px 0 120px;text-align:center}
.flow .other-ways .link{font-size:inherit;text-underline-offset:4px}
.guess{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;max-width:720px;margin:0 auto;padding:24px 26px}
.guess-q{font-size:1.375rem;font-weight:600;letter-spacing:-.02em}
.guess-q b{font-weight:600;color:var(--mint)}
.guess-q:focus{outline:none}
.guess-btns{display:flex;flex-wrap:wrap;gap:10px}
.choose-h{max-width:40rem;margin:0 auto 32px;text-align:center;font-size:clamp(1.75rem,3vw,2.375rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.choose-h:focus,.tool h2:focus{outline:none}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1040px;margin:0 auto}
.way{display:flex;flex-direction:column;gap:12px;padding:26px 26px 28px;scroll-margin-top:96px}
.way-l{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--hair-2);border-radius:8px;background:var(--sunk);font-family:var(--mono);font-size:.875rem;font-weight:500;color:var(--mint)}
.way h3{font-size:1.25rem;margin-top:6px}
.way p{color:var(--muted);font-size:.9688rem;line-height:1.55}
.way .soon{color:var(--attn)}
.way .btn{align-self:flex-start;margin-top:auto}
.flow-back{max-width:1040px;margin:0 auto 18px}
.flow-back .link{font-size:.9375rem}
.flow #tools .tool-jump{justify-content:center;margin:0 auto 28px}
.flow[data-view="tool"] .tools{grid-template-columns:minmax(0,1fr);max-width:620px}
.flow[data-view="tool"] .flow-back{max-width:620px}
@media (max-width:860px){.ways{grid-template-columns:1fr;max-width:620px}}
@media (max-width:500px){
  .flow .sec{padding-top:32px;padding-bottom:32px}
  .flow .other-ways{padding-bottom:72px}
  .guess{padding:20px 18px}
  .guess-btns{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .way{padding:22px 18px 24px}
  .way .btn{align-self:stretch}
}

.landing-wrap{position:relative;width:min(720px,100%);margin:48px auto 0;-webkit-mask-image:linear-gradient(to bottom,#000 86%,#0000);mask-image:linear-gradient(to bottom,#000 86%,#0000)}
.landing-wrap .landing{margin:0;width:100%;border:0;background:var(--surf);box-shadow:var(--line-in)}
.start-a .tool,.start-a .way,.start-a .start-more{border:0;background:var(--surf);box-shadow:var(--line-in),var(--soft);border-radius:18px}
.start-a .guess{border:0;background:var(--surf);box-shadow:var(--line-in),var(--soft);border-radius:18px}
.start-a h1{font-size:clamp(2.5rem,1.62rem + 3.75vw,4.25rem);letter-spacing:-.045em;line-height:1}
/* phones: the item opens in a bottom sheet (a root-level dialog, never inside a card) */
.sheet-lock,.sheet-lock body{overflow:hidden}
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;padding:0 12px calc(20px + env(safe-area-inset-bottom,0px));border:1px solid var(--hair);border-bottom:0;border-radius:18px 18px 0 0;background:var(--panel-hi);color:var(--text);box-shadow:inset 0 1px 0 #ffffff0d,0 -24px 60px -24px #000000b3}
.sheet::backdrop{background:#000000a6}
.sheet[open]{animation:sheet-in .26s cubic-bezier(.2,.8,.2,1)}
.sheet.leaving{transform:translateY(100%)!important;transition:transform .2s ease-in}
.sheet.dragging{transition:none}
@keyframes sheet-in{from{transform:translateY(100%)}}
.sheet-top{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:14px 48px 6px 4px;touch-action:none;cursor:grab}
.sheet-grip{position:absolute;left:calc(50% - 18px);top:7px;width:36px;height:4px;border-radius:4px;background:var(--hair-2)}
.sheet-top h2{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.sheet-x{position:absolute;top:10px;right:0;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:10px;background:var(--sunk);color:var(--text);font-size:22px;line-height:1}
.sheet-p{margin:0 4px 16px;color:var(--muted);font-size:.9688rem;line-height:1.55}
.sheet-shot .dash-bleed{height:auto;margin:0}
.sheet-shot .dash-bleed::before{display:none}
.sheet-shot .db{position:relative;left:0;width:100%;height:auto;max-height:520px;overflow:hidden;border-radius:12px;-webkit-mask-image:linear-gradient(to right,#000 80%,#0000),linear-gradient(to bottom,#000 70%,#0000);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 80%,#0000),linear-gradient(to bottom,#000 70%,#0000);mask-composite:intersect}
.sheet-shot .db-body{grid-template-columns:minmax(0,1fr)}
.sheet-shot .db-rail,.sheet-shot .db-search,.sheet-shot .db-btn:not(.on),.sheet-shot .db-me,.sheet-shot .db-env{display:none}
.sheet-shot .db-main{padding:16px 14px}
.sheet-shot .db-t th:nth-child(2),.sheet-shot .db-t td:nth-child(2),.sheet-shot .db-t th:nth-child(5),.sheet-shot .db-t td:nth-child(5){display:none}
.sheet-shot .ibx{grid-template-columns:minmax(0,1fr)}
.sheet-shot .ib{border-right:0;border-bottom:1px solid #ffffff0a}
@media (prefers-reduced-motion:reduce){.sheet[open]{animation:none}.sheet.leaving{transition:none}}

/* /start C: the hosted connector */
.conn-k{margin-top:6px;font-size:.8125rem;font-weight:600;color:var(--mint)!important}
.conn-url{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--hair-2);border-radius:8px;background:var(--night)}
.conn-url code{flex:1;min-width:0;font-size:.8125rem;color:var(--text);overflow-wrap:anywhere}
.conn-url .btn{flex:none}
.conn-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:c}
.conn-steps li{display:flex;gap:12px;align-items:baseline;color:var(--text);font-size:.9375rem;line-height:1.5}
.conn-steps li::before{counter-increment:c;content:counter(c);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--settled-bg);color:var(--settled);font-size:.6875rem;font-weight:600}
.conn-steps .mono{font-size:.8125rem;color:var(--muted);overflow-wrap:anywhere}
.way-conn .fine{margin-top:auto}
.way-conn .fine .link{font-size:inherit;text-underline-offset:4px}
@media (min-width:861px){.ways{grid-template-columns:minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr)}}
@media (max-width:500px){.conn-url{flex-wrap:wrap;padding:10px 10px 10px 12px}.conn-url code{flex-basis:100%;white-space:nowrap}.conn-url .btn{width:100%}}
.da-set{margin-top:16px!important}

/* the sheet's deck: Previous / Next and where you are */
.sheet-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.sheet-nav button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#1f232a;color:var(--text);font:600 .8125rem/1 var(--sans)}
.sheet-pos{font-size:.8125rem;color:var(--t55);font-variant-numeric:tabular-nums}
.sheet-swipe{touch-action:pan-y}
.sheet-swipe{transition:opacity .14s ease-out}
.sheet.swap .sheet-swipe{opacity:0}
@media (prefers-reduced-motion:reduce){.sheet-swipe{transition:none}}

/* ---- THE PHONE VARIANT (≤500px, 13 Oct 2026: "lots of scrolling before I see anything") ----
   A smaller type scale, half the spacing, and every picture scaled as one
   picture (zoom, not transform: no stacking context inside a card) and
   capped near 60svh. The first screen holds the eyebrow, the headline, the
   line under it, both buttons, the works-with line and the top of the hero. */
@media (max-width:500px){
  .sec-a{padding:52px 0}
  .head-c,.head-l{margin-bottom:22px}
  .sec-a h2,.head-l h2,.head-c h2,.run-text h2{font-size:1.875rem!important;line-height:1.08}
  .head-c p,.head-l p,.run-sub{margin-top:10px;font-size:1rem}
  .hero-a{padding:18px 0 0}
  .hero-a .tagline{margin-bottom:10px;font-size:.8125rem}
  .hero-a h1{max-width:15ch;font-size:2.375rem;line-height:1.02;letter-spacing:-.04em}
  .hero-a .lede{margin-top:12px;font-size:.9688rem;line-height:1.45;max-width:32ch}
  .hero-a .actions{margin-top:18px}
  .hero-a .actions .btn{min-height:46px}
  .hero-a .works-one{margin-top:12px;font-size:.8125rem}
  /* the hero: a compact picture, the phone scaled down whole, the payment over its top edge */
  .stage-hero{margin-top:22px}
  .scene{--u:calc(min(52vw, 210px) / 200);height:min(58svh,470px);padding-top:38px;overflow:hidden;align-items:flex-start}
  .iph{box-shadow:inset 0 0 0 1px #41454d,0 24px 50px -20px #000,0 0 70px -10px #9fe8c92e}
  .ia-done .ia-h{font-size:calc(var(--u)*17)}
  .pay-note{left:calc(50% - min(40vw, 165px));width:min(80vw, 330px);padding:9px 12px 10px}
  .pay-note .pn-t{font-size:.875rem}.pay-note .pn-b{font-size:.8125rem}
  .hero-a .scene-cap{margin-top:8px}
  /* Just ask your AI: one compact window, three messages, the approval as a small phone on its corner */
  .ask{display:block;height:auto;padding:0 0 196px}
  .aw{width:100%;height:auto}
  .aw-log{gap:9px;padding:14px 14px 18px!important}
  .aw-me{font-size:.875rem;padding:8px 11px}
  .aw-ai{font-size:.875rem;max-width:58%}
  .aw-wait,.aw .res{display:none}
  .ap{position:absolute;right:-6px;bottom:0;margin:0;--u:.52px;width:calc(var(--u)*270);height:calc(var(--u)*550);rotate:4deg}
  .wins-how{margin-top:10px}
  .wins-how li{font-size:.875rem}
  .desk-cap{margin-top:12px;font-size:.875rem}
  /* What your app gets: shorter tiles, each picture scaled as one */
  .bento{gap:14px}
  .tile .t-mock{zoom:.82}
  .t-text{padding:18px 18px 0}
  .t-ico{width:30px;height:30px;margin-bottom:10px}
  .tile h3{font-size:1rem}
  .tile .t-text p{font-size:.875rem;line-height:1.45}
  .t-sub{display:none}
  .ts-a .tile{height:470px}.ts-b .tile{height:330px}.ts-c .tile{height:380px}.ts-d .tile{height:340px}
  .ts-e .tile{height:360px}.ts-f .tile{height:310px}.ts-g .tile{height:320px}
  .t-mock,.ts-a .t-mock,.ts-d .t-mock{margin:14px 0 0 18px}
  /* Run it from one dashboard: a shorter peek */
  .feats{margin-top:18px}
  .feat-q{min-height:46px;padding:10px 0;font-size:.9688rem}
  .run-text .after{margin-top:16px}
  .dash-bleed{height:340px}
  .db{zoom:.86}
  /* Or build it yourself */
  .trio{gap:14px}
  .t3{height:300px}
  /* questions and price, tighter */
  .faq-a>div{padding:14px 0 16px}
  .faq-a dt{font-size:.9688rem;margin-bottom:4px}
  .faq-a dd{font-size:.875rem;line-height:1.5}
  #faq .trust{margin-top:22px}
  #pricing .pair-grid{gap:12px}
  #pricing .pair-cell{padding:22px 20px 24px}
  .band{min-height:520px}
  .band-sec{padding:8px 0 48px}
}

/* ---- the fold and unblur, on the compositor (scroll-driven animations) ----
   Each .rv block unfolds from its top edge while its top travels the bottom
   35% of the viewport, and folds again on the way back. Only "from" frames
   and fill backwards: once a block is past its range nothing applies, so at
   rest there is no transform, no filter and no stacking context. Text blocks
   also clear a blur, eased so the last of it settles softly. Outside cards
   only. Browsers without view timelines use fold.js's fallback. */
@keyframes fold{from{transform:perspective(1200px) translateY(24px) rotateX(-14deg) scale(.98)}}
@keyframes fold-text{from{transform:perspective(1200px) translateY(24px) rotateX(-14deg) scale(.98);filter:blur(10px)}}
@keyframes fold-ph{from{transform:perspective(1200px) translateY(16px) rotateX(-7deg) scale(.99)}}
@keyframes fold-text-ph{from{transform:perspective(1200px) translateY(16px) rotateX(-7deg) scale(.99);filter:blur(5px)}}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .rv{transform-origin:50% 0;animation:fold linear backwards;animation-timing-function:cubic-bezier(.33,1,.68,1);animation-timeline:view();animation-range:entry calc(var(--d,0) * 3vh) entry calc(35vh + var(--d,0) * 3vh)}
    .head-l.rv,.head-c.rv,.run-text.rv,.desk-cap.rv,.wins-how.rv{animation-name:fold-text}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:500px){
    .rv{animation-name:fold-ph}
    .head-l.rv,.head-c.rv,.run-text.rv,.desk-cap.rv,.wins-how.rv{animation-name:fold-text-ph}
  }
}

/* the page scrolls on the viewport, never on body (overflow-x: hidden on body made it overflow-y: auto) */
body{overflow-x:clip}

/* the sheet's fixed structure (Adil: "the bottom for reach"): a fixed height,
   the header at the top, the content scrolling in the middle, the action bar
   pinned at the bottom in the thumb zone, so nothing moves between items */
.sheet{display:flex;flex-direction:column;height:80svh;max-height:80svh;overflow:hidden;padding:0}
.sheet:not([open]){display:none}
.sheet-top{flex:none;min-height:0;height:96px;padding:22px 72px 10px 18px;align-items:flex-start}
.sheet-top h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:1.125rem;line-height:1.3}
.sheet-x{position:absolute;top:18px;right:14px;width:44px;height:44px}
.sheet-swipe{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 14px 16px}
.sheet-p{margin:0 4px 14px}
.sheet-nav{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:0;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #ffffff0d;background:var(--panel-hi)}
.sheet-nav button{min-height:48px}
.sheet-prev{justify-self:start}.sheet-next{justify-self:end}
.sheet-pos{justify-self:center}

/* phones: one section rhythm (80px between sections, 22px from a heading to its content) */
@media (max-width:500px){
  :root{--sec-y:40px}
  .sec-a,#how{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  .hero-a{padding-bottom:var(--sec-y)}
  .band-sec{padding-top:var(--sec-y)}
  .dash-bleed{overflow:hidden}
}
/* phones: Spacefast's measured rhythm at 390 — 32px from a heading to its first item, 24px between stacked items */
@media (max-width:500px){
  :root{--head-gap:32px;--item-gap:24px}
  .head-c,.head-l{margin-bottom:var(--head-gap)}
  .run-text .feats{margin-top:var(--head-gap)}
  .dash-bleed{margin-top:var(--item-gap)}
  .bento,.trio,#pricing .pair-grid{gap:var(--item-gap)}
  .faq-a>div{padding:calc(var(--item-gap) / 2 + 4px) 0 calc(var(--item-gap) / 2 + 6px)}
  .wins-how{margin-top:var(--item-gap)}
  #pricing .agency-line{margin-top:var(--item-gap)}
}

/* "and more": the AI tools, grouped (a sheet on phones, a small dialog on desktop) */
.more-b{padding:0;border:0;background:none;color:var(--text);font:inherit;text-decoration:underline;text-decoration-color:#9fe8c980;text-underline-offset:3px;cursor:pointer}
.more-b:hover{text-decoration-color:var(--mint)}
.aitools{padding:4px 4px 8px;text-align:left}
.at-h{margin:14px 0 8px;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t55)}
.at-h:first-child{margin-top:0}
.at-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.at-list a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;background:#1b1f26;color:var(--text);font-size:.9375rem;font-weight:500;transition:background-color .15s}
.at-list a:hover{background:#232833}
.at-f{margin-top:16px;font-size:.8125rem;line-height:1.5;color:var(--t55)}
.sheet.single .sheet-nav{display:none}
.sheet.single .sheet-p:empty{display:none}
.tools-pop{width:min(460px,calc(100vw - 32px));max-height:min(80svh,640px);padding:0 22px 22px;border:0;border-radius:18px;background:var(--panel-hi);color:var(--text);box-shadow:inset 0 0 0 1px #ffffff12,0 40px 100px -30px #000}
.tools-pop::backdrop{background:#0d0f13b3}
.tp-top{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 0 12px;background:var(--panel-hi)}
.tp-top h2{font-size:1.125rem;font-weight:650}
.tools-pop .sheet-x{position:static;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:10px;background:var(--sunk);color:var(--text);font-size:22px}
@media (prefers-reduced-motion:no-preference){.tools-pop[open]{animation:pop-in .2s var(--ease)}}
@keyframes pop-in{from{opacity:0;scale:.97}}

/* the payment arrives INSIDE the phone, as the phone itself would show it: a banner under the
   status bar, over the app. Inside the card it moves by top only (the WebKit law); it rests there. */
.iph-screen{position:relative;overflow:hidden}
.ib-note{position:absolute;left:calc(var(--u)*7);right:calc(var(--u)*7);top:calc(var(--u)*30);padding:calc(var(--u)*7) calc(var(--u)*9) calc(var(--u)*8);border-radius:calc(var(--u)*14);background:#2a2f37f2;box-shadow:inset 0 1px 0 #ffffff1a,0 calc(var(--u)*8) calc(var(--u)*18) #000000b3;text-align:left}
.ib-note .pn-h{gap:calc(var(--u)*5);margin:0 0 calc(var(--u)*2);font-size:max(var(--minfs,0px),calc(var(--u)*7.5))}
.ib-note .pn-app{width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:calc(var(--u)*3.5);box-shadow:inset 0 0 0 calc(var(--u)*3) #78d3ae}
.ib-note .pn-t{font-size:max(var(--minfs,0px),calc(var(--u)*10));line-height:1.3}
.ib-note .pn-b{font-size:max(var(--minfs,0px),calc(var(--u)*9.5));line-height:1.35}
@keyframes ib-drop{from{top:calc(var(--u)*-70)}}
@media (prefers-reduced-motion:no-preference){.hs .ib-note{animation:ib-drop .55s cubic-bezier(.2,.9,.25,1.12) 1.45s backwards}}

@media (max-width:500px){
  .scene{padding-top:0;height:min(58svh,470px)}
  .hero-a{padding-top:36px}
  .hero-a .tagline{margin-bottom:20px}
  .hero-a .lede{margin-top:16px}
  .hero-a .actions{margin-top:40px}
  .hero-a .works-one{margin-top:24px}
  .stage-hero{margin-top:40px}
}

/* the AI tile: one line and three short facts; the picture: a voice note in, a streamed summary out */
.t-facts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.t-facts li{position:relative;padding-left:16px;font-size:.875rem;line-height:1.45;color:var(--t70)}
.t-facts li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--mint)}
.ai-file{display:flex;align-items:center;gap:8px;align-self:flex-end;padding:6px 10px 6px 6px;border-radius:12px;background:#1d2027;font-size:.75rem}
.ai-file b{font-weight:600;color:var(--t92)}.ai-file em{font-style:normal;color:var(--t40)}
.af-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#173328;color:var(--mint)}
.af-ico svg{width:14px;height:14px}
.ai-tool{top:206px}
@media (max-width:500px){.t-facts li{font-size:.8125rem}.ts-a .tile{height:520px}}
@media (min-width:861px){.ts-a .ai-tool{left:60px;top:214px;width:250px}}

/* desktop hero, bigger (Adil, 14 Oct 2026): ~1100px at 1440, up to 1200px wider; the smallest
   text in the picture at least 11px; the buttons and works-with above the picture, as Spacefast does */
@media (min-width:501px){
  .hero-a .actions,.hero-a .works-one{order:1}
  .hero-a .actions{margin-top:30px}
  .hero-a .works-one{margin-top:18px}
  /* the whole scene fits one screen: at most 72svh tall (it is 2:1), at most 1000px wide */
  .stage-hero{width:min(1000px,calc(100vw - 64px),calc(144svh - 40px));margin-top:44px}
  .scene{--u:calc(min(1000px, 100vw - 64px, 144svh - 40px) / 880)}
}
@media (min-width:1024px){.scene{--minfs:11px}}

/* one content width below the hero, matching the hero scene (Adil, 14 Oct 2026): 1000px at 1440 */
@media (min-width:501px){
  #how>.container,#what-you-get>.container,#run>.container,#yourself>.container,#faq>.container,#pricing>.container,.band-sec>.container{width:min(1000px,calc(100% - 64px))}
  .ask-wrap{max-width:1000px}
  .ask{--u:calc(min(1000px, 100vw - 64px) / 1000)}
}
/* below the hero, Spacefast's density (desktop): compact cards (~28px padding, 24px gaps),
   small dense UI inside them (11–13px text, tight rows), big headings outside */
@media (min-width:861px){
  #pricing .pair-grid{max-width:none}
  #pricing .pair-cell{padding:30px 30px 32px}
  .ask{--minfs:11px}
  .t-text{padding:26px 28px 0}
  .t-mock{margin-left:28px}
  .ts-a .tile,.ts-b .tile{height:380px}
  .ts-c .tile,.ts-d .tile{height:370px}
  .ts-e .tile,.ts-f .tile,.ts-g .tile{height:350px}
  .tile .t-text p,.t-facts li{font-size:.875rem}
  .mt{font-size:.75rem}
  .mt th{padding:8px 14px 4px}
  .mt td{padding:8px 14px}
  .mw-top{height:26px}
  .rules li,.ev li,.fl li,.cr li{padding-top:8px;padding-bottom:8px}
  .mail{padding-bottom:12px}
  .mail-code{font-size:1.125rem;padding:8px}
  .t3{height:320px}
  .term pre{font-size:.6875rem}
  .dash-bleed{height:540px}
  .db{width:980px;height:640px}
  .db-top{height:46px;font-size:.8125rem}
  .db-rail{font-size:.75rem;padding:14px 10px}
  .db-rail li{padding:6px 10px}
  .db-main{padding:18px 24px}
  .db-h{font-size:1.375rem}
  .db-l{font-size:.8125rem}
  .db-t{font-size:.8125rem;margin-top:14px}
  .db-t th{padding:6px 10px}
  .db-t td{padding:9px 10px}
  .db-rows li{padding:10px 4px;font-size:.8125rem}
  .db-rows span{font-size:.75rem}
  .run-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px}
}

/* one idea per card: fewer, larger, readable rows */
.mt-big{font-size:.875rem}
.mt-big td{padding:12px 16px}
.rules-big li{padding:12px 16px!important;font-size:.875rem}
.rules-big span{font-size:.8125rem}
.ev1{padding:14px 16px 18px;display:grid;gap:10px}
.ev1-in{font-size:.8125rem;color:var(--t55)}
.ev1-in span{margin-right:8px;font-weight:600;color:var(--t92)}
.ev1-out{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:8px 12px;border-radius:10px;background:var(--settled-bg);color:var(--settled);font-size:.875rem;font-weight:600}
.ev1-out svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fl-big li{padding:14px 16px!important;font-size:.875rem}
.mail .mail-code{margin-top:12px}
.ai-a{font-size:.875rem}
.term pre{font-size:.8125rem!important;line-height:1.7;padding:14px 16px}
.cf .cf-in{font-size:.875rem}
.gl{padding:18px 16px}
@media (min-width:861px){
  .ts-a .t-mock{top:56px;width:400px}
  .ai-app{width:380px}
}
/* the bento at 1000px: AI leads across the full width; then three and three. Every picture is
   as wide as its card's content and runs off the card's right edge (flush), never past its words */
@media (min-width:861px){
  .ts-a{grid-column:1/13}
  .ts-b{grid-column:1/5}.ts-c{grid-column:5/9}.ts-d{grid-column:9/13}
  .ts-e{grid-column:1/5}.ts-f{grid-column:5/9}.ts-g{grid-column:9/13}
  .ts-a .tile{height:340px}
  .ts-b .tile,.ts-c .tile,.ts-d .tile,.ts-e .tile,.ts-f .tile,.ts-g .tile{height:340px}
  .t-ai .t-text{max-width:46%}
  .ts-a .t-mock{position:absolute;left:auto;right:0;top:40px;width:46%;margin:0}
  .ai-app{width:100%}
  .ts-b .t-text,.ts-c .t-text,.ts-d .t-text,.ts-e .t-text,.ts-f .t-text,.ts-g .t-text{max-width:none}
  .ts-b .t-mock,.ts-c .t-mock,.ts-d .t-mock,.ts-e .t-mock,.ts-f .t-mock,.ts-g .t-mock{position:relative;left:auto;top:auto;margin:18px 0 0 28px;width:calc(100% - 28px)}
  .ts-b .mw,.ts-c .mail,.ts-d .mw,.ts-e .mw,.ts-f .mw,.ts-g .mw,.ts-a .mw{border-radius:12px 0 0 12px}
  .ts-g .m-dev{display:flex;align-items:flex-end;gap:8px;width:calc(100% - 28px)}
  .ts-g .dv-web,.ts-g .dv-mac,.ts-g .dv-ph{position:static;flex:1 1 0;width:auto;margin:0}
  .ts-g .dv-ph{flex:0 0 74px;height:130px;padding:26px 7px 7px;border-radius:18px}
  .ts-g .mw-top{height:22px;padding:0 7px;gap:5px}
  .ts-g .mw-top .dots i{width:5px;height:5px}
  .ts-g .dv-web .mw-t,.ts-g .dv-mac .mw-t{margin-right:0;font-size:.6875rem}
  .ts-g .dv-n{padding:9px 8px 11px}
  .ts-g .dv-ph .dv-n{padding:7px;border-radius:9px}
  .ts-g .dv-n b{font-size:.75rem}
  .ts-g .dv-n span{display:none}
  .ts-g .dv-mac{border-radius:12px}
}
@media (min-width:861px){
  .ts-a .tile{height:300px}
  .ts-a .t-mock{top:30px}
  .ts-g .dv-n b{white-space:nowrap;font-size:.6875rem}
  .ts-g .dv-ph{flex-basis:70px;height:120px}
}
@media (min-width:861px){.ts-e .tile,.ts-f .tile,.ts-g .tile{height:370px}}
@media (min-width:861px){.ts-e .tile,.ts-f .tile,.ts-g .tile{height:390px}}
/* phones: each card as tall as its one picture, no empty floor */
@media (max-width:500px){
  .ts-a .tile,.ts-b .tile,.ts-c .tile,.ts-d .tile,.ts-e .tile,.ts-f .tile,.ts-g .tile{height:auto;padding-bottom:22px}
  .tile::after{display:none}
  .tile .t-mock{width:calc(100% - 18px)!important}
}
@media (max-width:500px){.ai-app{width:100%}}

.d-maya{left:8px;top:-60px;width:230px;height:70px;rotate:2deg}

/* "Or just ask your AI": the connector's Live reads and Inbox replies, one compact chat */
.ab-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:center}
.ask-biz .head-l{margin:0}
.ask-biz .head-l p{font-size:.9688rem}
.ab-chat{position:relative;-webkit-mask-image:linear-gradient(to right,#000 82%,#0000),linear-gradient(to bottom,#000 80%,#0000);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 82%,#0000),linear-gradient(to bottom,#000 80%,#0000);mask-composite:intersect}
.ab-win{width:calc(100% + 60px);border-radius:12px 0 0 12px}
.ab-log{display:flex;flex-direction:column;gap:12px;padding:18px 20px 26px}
.ab-me{align-self:flex-end;max-width:78%;padding:8px 12px;border-radius:14px;border-bottom-right-radius:4px;background:#22262d;color:var(--t92);font-size:.875rem;line-height:1.4}
.ab-ai{display:grid;gap:6px;max-width:86%}
.ab-ai>p:first-child{font-size:.9063rem;line-height:1.5;color:var(--t92)}
.ab-tool{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:4px 10px;border-radius:999px;background:#1b1f25;font-size:.75rem;color:var(--t55)}
.ab-tool svg{width:13px;height:13px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-tool.ok{background:var(--settled-bg);color:var(--settled)}
@media (max-width:860px){.ab-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:500px){
  .ab-grid{gap:var(--head-gap,32px)}
  .ab-win{width:calc(100% + 16px)}
  .ab-log{padding:14px 14px 22px}
  .ab-me,.ab-ai>p:first-child{font-size:.875rem}
}
.ab-log{padding-right:96px}
.ab-chat{-webkit-mask-image:linear-gradient(to right,#000 88%,#0000),linear-gradient(to bottom,#000 80%,#0000);mask-image:linear-gradient(to right,#000 88%,#0000),linear-gradient(to bottom,#000 80%,#0000)}
@media (max-width:500px){.ab-log{padding-right:36px}}

/* small tiles: the picture sits fully inside its card, with padding (Adil: a cropped small mock-up reads as broken).
   Only the AI tile and the big section pictures bleed and fade. */
@media (min-width:861px){
  .ts-b,.ts-c,.ts-d,.ts-e,.ts-f,.ts-g{display:flex}
  .ts-b .tile,.ts-c .tile,.ts-d .tile,.ts-e .tile,.ts-f .tile,.ts-g .tile{flex:1;height:auto;padding-bottom:28px}
  .ts-b .t-mock,.ts-c .t-mock,.ts-d .t-mock,.ts-e .t-mock,.ts-f .t-mock,.ts-g .t-mock{width:calc(100% - 56px)!important;margin:18px 28px 0}
  .ts-b .mw,.ts-c .mail,.ts-d .mw,.ts-e .mw,.ts-f .mw,.ts-g .mw{border-radius:12px}
  .ts-g .m-dev{width:calc(100% - 56px)!important;justify-content:space-between}
  .ts-f .tile{justify-content:flex-start}
}
.ts-b .tile::after,.ts-c .tile::after,.ts-d .tile::after,.ts-e .tile::after,.ts-f .tile::after,.ts-g .tile::after{display:none}
@media (max-width:500px){
  .tile .t-mock{width:calc(100% - 36px)!important;margin:18px 18px 0!important}
  .ts-a .t-mock{width:calc(100% - 36px)!important}
  .tile .mw,.tile .mail{border-radius:12px!important}
}
/* the platform windows: one chrome (the same dots, the same title) */
.ts-g .dv-web .mw-t,.ts-g .dv-mac .mw-t{font-family:var(--sans)!important}
.ts-g .dv-web .dots i,.ts-g .dv-mac .dots i{background:#3a3f49!important}
/* the ask-your-AI window stays inside its column at every width (it fades at the right instead of running past it) */
.ab-win{width:100%!important}
.ab-log{padding-right:40px}
@media (max-width:500px){.ab-log{padding-right:24px}}

/* ONE COLUMN for every home section (Adil: "drift"): the same left and right edges,
   set once on the containers, never per section */
@media (min-width:501px){
  :root{--col:min(1000px,calc(100vw - 64px))}
  main > section > .container,main > section > .container.band-wrap{width:var(--col)}
  .stage-hero{width:min(var(--col),calc(144svh - 40px))}
}

/* Ways to build: each picture fully inside its card */
.trio .t3{height:auto;display:flex;flex-direction:column;padding-bottom:24px}
.trio .ts{display:flex}.trio .tile{flex:1}
.trio .t3 .t-mock{position:relative;left:auto;top:auto;width:auto!important;margin:18px 24px 0!important}
.trio .mw{border-radius:12px!important}
.trio .tile::after{display:none}
.pc{display:grid;gap:10px;padding:12px 14px 14px}
.pc .mono{font-size:.8125rem;line-height:1.55;color:var(--t92);overflow-wrap:break-word}
.pc-act{display:flex;justify-content:flex-end}
.copy-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:34px;padding:0 10px;border:0;border-radius:9px;background:var(--mint);color:#0d0f13;font:600 .8125rem/1 var(--sans);cursor:pointer}
.copy-b svg{width:15px;height:15px}
.copy-b .i-check,.copy-b .copy-l{display:none}
.copy-b.done .i-copy{display:none}
.copy-b.done .i-check,.copy-b.done .copy-l{display:inline}
.chip-tilt{right:18px;top:-14px}
@media (max-width:500px){.trio .t3 .t-mock{margin:16px 18px 0!important}}
/* phone screens: the content clears the bottom corner radius */
.iph-screen{padding-bottom:calc(var(--u)*26)}
.ia-notes{margin-bottom:0}
.ap-screen{padding-bottom:calc(var(--u)*30)}
.dv-ph{padding-bottom:16px!important}
/* the dashboard picture ends at the column's right edge, fading into it (one column: no drift) */
@media (min-width:501px){
  .dash-bleed{overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 55%,#0000);mask-image:linear-gradient(to right,#000 55%,#0000)}
}

/* The platforms tile (14 Oct 2026, Adil's two bugs): at every width the three
   devices sit in one row inside the tile, with equal gaps and their bottoms on
   one line; each window's title stays on one line inside its bar; and the
   phone's note sits at the same height as the windows' (the windows' note has
   the phone's frame and padding below it as its own padding). Last in the file,
   so it settles the earlier breakpoint rules for this tile. */
.ts-g .m-dev{display:flex!important;align-items:flex-end;gap:8px}
.ts-g .m-dev .dv-web,.ts-g .m-dev .dv-mac,.ts-g .m-dev .dv-ph{position:static;left:auto;top:auto;margin:0}
.ts-g .m-dev .dv-web,.ts-g .m-dev .dv-mac{flex:1 1 0;min-width:0;width:auto;border-radius:10px}
.ts-g .m-dev .mw-top{height:24px;padding:0 8px;gap:6px}
.ts-g .m-dev .mw-top .dots i{width:6px;height:6px}
.ts-g .m-dev .mw-t{margin:0;min-width:0;white-space:nowrap;overflow:hidden;font-size:.6875rem!important}
.ts-g .m-dev .dv-n{padding:8px 9px 14px}
.ts-g .m-dev .dv-n b{font-size:.6875rem;white-space:nowrap}
.ts-g .m-dev .dv-n span{display:none}
.ts-g .m-dev .dv-ph{flex:0 0 80px;height:120px;padding:0 6px 6px!important;border-radius:18px;display:flex;flex-direction:column;justify-content:flex-end}
.ts-g .m-dev .dv-ph .dv-n{padding:8px 9px;border-radius:10px}
@media (min-width:861px){.ts-g .m-dev .mw-top .dots{display:none}.ts-g .m-dev .mw-top{justify-content:center}}