/* BoyerScales Tour
   One light editorial surface, dark "device" sections for the product.
   Brand blue for BoyerScales, iMessage blue only for texts, Valley Details red never
   outside its own screenshots. */

:root{
  --paper:#f4f2ee;
  --paper-2:#ebe8e2;
  --card:#fbfaf8;
  --ink:#0d1015;
  --ink-2:#2e333b;
  --muted:#656b75;
  --faint:#71767f;
  --line:rgba(13,16,21,.10);
  --line-2:rgba(13,16,21,.16);
  --brand:#2f5bff;
  --brand-ink:#1b3fd6;
  --imsg:#0a84ff;
  --ok:#1a8f4c;

  --night:#0b0d11;
  --night-2:#12151b;
  --night-3:#1a1e26;
  --night-line:rgba(255,255,255,.09);
  --night-text:#e9ebef;
  --night-muted:#9aa1ad;

  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --r:16px;
  --r-lg:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.stage-eyebrow i,.tag i,.hero-stages i,.stage-rail i{font-style:normal;font-family:var(--mono)}
.stage-eyebrow i{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:11.5px;letter-spacing:.02em}
.sec-dark .stage-eyebrow i{background:var(--night-text);color:var(--night)}
h1{font-size:clamp(40px,6.4vw,78px);letter-spacing:-.035em;line-height:1.0}
h2{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.03em}
h3{font-size:clamp(19px,1.7vw,22px);letter-spacing:-.015em;line-height:1.2}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2);line-height:1.55;max-width:62ch}
.lede b{font-weight:600;color:var(--ink)}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:10px}
.tag i{color:var(--faint)}
.fine{font-size:13px;color:var(--faint);margin-top:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:999px;
  font-weight:500;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-sm{height:40px;padding:0 16px;font-size:14.5px}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#262b33}
.btn-line{border-color:var(--line-2);background:transparent;color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:rgba(13,16,21,.03)}
.btn-light{background:var(--night-text);color:var(--night)}
.btn-light:hover{background:#fff}
.btn-ghost{background:none;border:0;padding:8px 4px;color:var(--night-muted);cursor:pointer;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.btn-ghost:hover{color:var(--night-text)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateY(2px)}
.btn-line:hover .arr{transform:translate(2px,-2px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(244,242,238,.96);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav.on-dark{background:rgba(11,13,17,.94);border-bottom-color:var(--night-line);color:var(--night-text)}
.nav.on-dark .btn-ink{background:var(--night-text);color:var(--night)}
.nav.on-dark .nav-links a{color:var(--night-muted)}
.nav.on-dark .nav-links a:hover{color:#fff}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.01em;font-size:16.5px}
.brand img{width:28px;height:28px;border-radius:8px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--muted);font-size:15px;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.stage-rail{display:none}
.nav .btn{margin-left:0}

@media (min-width:981px){
  .stage-rail{display:flex;position:absolute;left:50%;transform:translate(-50%,-6px);gap:4px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
  .nav.in-stages .stage-rail{opacity:1;transform:translate(-50%,0)}
  .nav.in-stages .nav-links{opacity:0;pointer-events:none}
  .nav-links{transition:opacity .25s}
  .stage-rail li{font-size:13.5px;padding:6px 12px;border-radius:999px;color:var(--faint);display:flex;gap:7px;align-items:center;transition:background-color .3s,color .3s}
  .stage-rail i{font-size:11px;opacity:.7}
  .stage-rail li.on{background:var(--ink);color:var(--paper)}
  .nav.on-dark .stage-rail li{color:var(--night-muted)}
  .nav.on-dark .stage-rail li.on{background:var(--night-text);color:var(--night)}
  .nav-in{position:relative}
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav .btn{margin-left:auto}
}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec-tint{background:var(--paper-2)}
.sec-dark{background:var(--night);color:var(--night-text)}
.sec-dark .lede{color:var(--night-muted)}
.sec-dark .eyebrow,.sec-dark .tag{color:var(--night-muted)}
.sec-head{max-width:820px;margin-bottom:clamp(44px,6vw,72px)}
.sec-head .lede{margin-top:22px}

/* ---------- devices ---------- */
/* The frame's height comes from the screen, so the screenshot always sits inside
   the bezel at its true 390/844 shape instead of being cropped to fit. */
.phone{position:relative;min-width:0;width:100%;max-width:300px;display:grid;container-type:inline-size;
  border-radius:17% / 8.3%;
  background:linear-gradient(145deg,#3c4048,#0b0c0f 44%,#23262d);
  box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.16),0 30px 60px -20px rgba(13,16,21,.45),0 12px 24px -12px rgba(13,16,21,.3)}
/* side buttons */
.phone::before,.phone::after{content:"";position:absolute;width:2.5px;border-radius:3px;
  background:linear-gradient(180deg,#3a3e46,#14171c);pointer-events:none}
.phone::before{left:-1.5px;top:21%;height:13%}
.phone::after{right:-1.5px;top:24%;height:9%}
.phone-screen{position:relative;display:flex;flex-direction:column;margin:13px;margin:4.6cqw;
  border-radius:13.7% / 5.6%;overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* Edge-to-edge screen, like a current iPhone: the status bar (with the Dynamic Island)
   and the home indicator sit on the screen itself, not on black bars. The screenshots are
   bare viewport captures, so each strip is painted in that screenshot's own edge colors
   (--top / --bot, set per phone in the markup) and reads as part of the page. A photo
   gets its own top rows stretched up instead (background-size 100% 5000cqw shows about
   the top 4px), so the picture carries on under the status bar with no seam. */
.phone-screen{--top:#0c0c0c;--bot:var(--top);--ink:#fff;
  --sb-icons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 15' fill='%23fff'%3E%3Crect x='0' y='9.5' width='3.2' height='5.5' rx='1.1'/%3E%3Crect x='5.2' y='7' width='3.2' height='8' rx='1.1'/%3E%3Crect x='10.4' y='4.2' width='3.2' height='10.8' rx='1.1'/%3E%3Crect x='15.6' y='1.4' width='3.2' height='13.6' rx='1.1'/%3E%3Cpath d='M23.5 6.9A10.6 10.6 0 0 1 38.5 6.9L37 8.4A8.5 8.5 0 0 0 25 8.4Z'/%3E%3Cpath d='M26.1 9.5A6.9 6.9 0 0 1 35.9 9.5L34.4 11A4.8 4.8 0 0 0 27.6 11Z'/%3E%3Ccircle cx='31' cy='12.8' r='1.75'/%3E%3Crect x='48' y='3' width='24' height='11.5' rx='3.4' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='49.9' y='4.9' width='16.5' height='7.7' rx='2.1'/%3E%3Cpath d='M73.6 6.6c1 .4 1.7 1.1 1.7 2.1s-.7 1.7-1.7 2.1z' fill-opacity='.5'/%3E%3C/svg%3E");
  --pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 5'%3E%3Crect width='134' height='5' rx='2.5' fill='%23fff'/%3E%3C/svg%3E")}
.phone-screen.light{--ink:#000;
  --sb-icons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 15' fill='%23000'%3E%3Crect x='0' y='9.5' width='3.2' height='5.5' rx='1.1'/%3E%3Crect x='5.2' y='7' width='3.2' height='8' rx='1.1'/%3E%3Crect x='10.4' y='4.2' width='3.2' height='10.8' rx='1.1'/%3E%3Crect x='15.6' y='1.4' width='3.2' height='13.6' rx='1.1'/%3E%3Cpath d='M23.5 6.9A10.6 10.6 0 0 1 38.5 6.9L37 8.4A8.5 8.5 0 0 0 25 8.4Z'/%3E%3Cpath d='M26.1 9.5A6.9 6.9 0 0 1 35.9 9.5L34.4 11A4.8 4.8 0 0 0 27.6 11Z'/%3E%3Ccircle cx='31' cy='12.8' r='1.75'/%3E%3Crect x='48' y='3' width='24' height='11.5' rx='3.4' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='49.9' y='4.9' width='16.5' height='7.7' rx='2.1'/%3E%3Cpath d='M73.6 6.6c1 .4 1.7 1.1 1.7 2.1s-.7 1.7-1.7 2.1z' fill-opacity='.5'/%3E%3C/svg%3E");
  --pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 5'%3E%3Crect width='134' height='5' rx='2.5' fill='%23000'/%3E%3C/svg%3E")}
.phone-screen::before{content:"9:41";flex:0 0 auto;height:11.5cqw;
  display:flex;align-items:center;padding:.6cqw 0 0 10.5cqw;
  font-family:var(--sans);font-size:3.7cqw;font-weight:600;color:var(--ink);letter-spacing:.01em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 37'%3E%3Crect width='126' height='37' rx='18.5'/%3E%3C/svg%3E") no-repeat center top 2.2cqw / 28.5cqw auto,
    var(--sb-icons) no-repeat right 7cqw center / auto 3.3cqw,
    var(--top)}
.phone-screen::after{content:"";flex:0 0 auto;height:6cqw;
  background:var(--pill) no-repeat center top 2.6cqw / 32% auto,var(--bot)}
/* overlap each strip by a pixel so a subpixel gap never shows a hairline at the seam */
.phone-screen>img,.phone-screen>.shot{margin:-1px 0}
.phone-screen>.shot img{margin:0}
.phone-screen img{flex:0 0 auto;display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top center}
.phone-sm{max-width:200px}

.browser{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(13,16,21,.35),0 10px 30px -15px rgba(13,16,21,.15)}
.browser-bar{display:flex;align-items:center;gap:14px;height:46px;padding:0 14px;border-bottom:1px solid var(--line);background:#efece7}
.dots{display:flex;gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;background:#d6d2cb}
.url{display:inline-flex;align-items:center;gap:7px;margin:0 auto;height:28px;padding:0 14px;border-radius:8px;background:rgba(13,16,21,.05);
  font-size:13.5px;color:var(--ink-2);text-decoration:none;max-width:60%;overflow:hidden;white-space:nowrap}
.url svg{width:12px;height:12px;color:var(--faint);flex:none}
a.url:hover{background:rgba(13,16,21,.08)}
.browser-open{font-size:13.5px;text-decoration:none;color:var(--brand-ink);font-weight:500;white-space:nowrap}
.browser-open:hover{text-decoration:underline;text-underline-offset:3px}
.browser-dark{background:var(--night-2);border-color:var(--night-line);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.browser-dark .browser-bar{background:#161a21;border-bottom-color:var(--night-line)}
.browser-dark .dots i{background:#2c313a}
.browser-dark .url{background:rgba(255,255,255,.06);color:var(--night-muted)}
.browser-flag{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#f0b44c;background:rgba(240,180,76,.1);border:1px solid rgba(240,180,76,.25);padding:4px 9px;border-radius:999px;white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(64px,8vw,110px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy .lede{margin-top:26px;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-stages{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.hero-stages a{display:inline-flex;gap:8px;align-items:center;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--line);
  font-size:14.5px;text-decoration:none;color:var(--ink-2);transition:border-color .2s,background-color .2s}
.hero-stages a:hover{border-color:var(--line-2);background:var(--card)}
.hero-stages i{font-size:11.5px;color:var(--faint)}

.hero-visual{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:start;padding-bottom:36px;min-height:0}
.hero-visual .phone{max-width:290px}
.phone-a{justify-self:end;z-index:2;transform:rotate(-2deg);margin-right:-22%}
.phone-b{margin-top:22%;transform:rotate(2.5deg);z-index:1}
.hero-cap{grid-column:1/-1;margin-top:28px;font-size:13px;color:var(--faint);text-align:center}
.hero-cap span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.rules{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--line)}
.rules li{padding:22px 24px 0 0;font-size:15px;color:var(--muted);line-height:1.5}
.rules li+li{padding-left:24px;border-left:1px solid var(--line)}
.rules b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .9s var(--ease) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.18s}
  .hero-copy>*:nth-child(5){animation-delay:.24s}
  .phone-a{animation:phoneA 1.1s var(--ease) .15s both}
  .phone-b{animation:phoneB 1.1s var(--ease) .3s both}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes phoneA{from{opacity:0;transform:translateY(40px) rotate(-5deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes phoneB{from{opacity:0;transform:translateY(60px) rotate(6deg)}to{opacity:1;transform:rotate(2.5deg)}}

/* ---------- valley details ---------- */
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.work{display:grid;grid-template-columns:1.1fr .8fr 1.2fr 1fr;grid-template-rows:auto;gap:12px;margin-top:14px}
.work figure{border-radius:12px;overflow:hidden;background:var(--paper-2);height:clamp(180px,22vw,280px)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work figure:hover img{transform:scale(1.04)}
.work figcaption{grid-column:1/-1;font-size:13px;color:var(--faint);margin-top:4px}

.rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);text-decoration:none;font-size:15px;color:var(--ink-2);transition:border-color .2s}
.rating:hover{border-color:var(--ink)}
.rating .stars{color:#e8a317;letter-spacing:1px}
.rating b{color:var(--ink);font-weight:600}
.rating-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding-left:10px;border-left:1px solid var(--line)}
.rule-note+.rule-note{margin-top:10px;padding-top:0;border-top:0}
.built{margin-top:clamp(56px,7vw,90px)}
.built-title{font-size:15px;font-family:var(--mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.built-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.built-col{padding:22px 22px 0 0}
.built-col+.built-col{padding-left:22px;border-left:1px solid var(--line)}
.built-col .tag{color:var(--ink);font-weight:500}
.built-col li{font-size:15.5px;color:var(--ink-2);padding:10px 0;border-bottom:1px solid var(--line);line-height:1.4}
.built-col li:last-child{border-bottom:0}

/* ---------- loop ---------- */
.loop-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center}
.loop-head{margin-bottom:0}
.loop-hint{margin-top:26px;font-size:14px;color:var(--faint);font-family:var(--mono)}
.loop{display:grid;grid-template-columns:1fr;gap:24px}
.ring-wrap{max-width:520px;width:100%;margin:0 auto}
.ring{width:100%;height:auto;overflow:visible;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ring-track{fill:none;stroke:var(--line-2);stroke-width:1.5}
.ring-arc{fill:none;stroke:var(--line-2);stroke-width:3;stroke-linecap:round;transition:stroke .4s}
.ring-arc.on{stroke:var(--ink)}
.ring-chord{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-dasharray:4 5;opacity:0;transition:opacity .4s;color:var(--brand)}
.ring-chord.on{opacity:1}
.ring-runner{fill:var(--brand)}
.ring-node{cursor:pointer;outline:none}
.ring-node .hit{fill:transparent;stroke:none}
.ring-node circle.dot{fill:var(--paper-2);stroke:var(--ink);stroke-width:1.5;transition:fill .25s,r .25s}
.ring-node text{font-family:var(--sans);font-size:15px;fill:var(--ink-2);font-weight:500;transition:fill .25s}
.ring-node .n{font-family:var(--mono);font-size:11.5px;fill:var(--ink);font-weight:500;pointer-events:none}
.ring-node:hover circle.dot,.ring-node:focus-visible circle.dot{fill:var(--card)}
.ring-node.on circle.dot{fill:var(--ink)}
.ring-node.on .n{fill:var(--paper)}
.ring-node.on text:not(.n){fill:var(--ink);font-weight:600}
.ring-node.yours circle.dot{stroke-dasharray:3 3}
.ring-node:focus-visible circle.dot{stroke:var(--brand);stroke-width:2.5}
.ring-center-k{font-family:var(--mono);font-size:14px;fill:var(--faint)}
.ring-center-l{font-family:var(--sans);font-size:24px;font-weight:600;fill:var(--ink);letter-spacing:-.02em}

.loop-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;min-height:230px}
.loop-panel h3{margin-bottom:8px}
.loop-panel p{color:var(--ink-2);font-size:16px}
.lp-vd{display:grid;gap:4px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.lp-vd span:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.lp-link{display:inline-flex;gap:6px;margin-top:16px;font-weight:500;font-size:15px;color:var(--brand-ink);text-decoration:none}
.lp-link span{transition:transform .2s var(--ease)}
.lp-link:hover span{transform:translateX(3px)}
.loop-panel .fade{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- found ---------- */
.found-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.point{padding:24px 0;border-top:1px solid var(--line)}
.point:first-child{border-top:1px solid var(--ink);padding-top:22px}
.point h3{margin-bottom:8px}
.point p{color:var(--ink-2);font-size:16.5px}
.code{background:var(--night);color:#cdd3dc;border-radius:var(--r);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 24px);
  box-shadow:0 30px 60px -30px rgba(13,16,21,.5)}
.code-bar{padding:12px 18px;border-bottom:1px solid var(--night-line);font-family:var(--mono);font-size:12px;color:var(--night-muted)}
.code pre{margin:0;padding:20px 18px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.75;overflow-x:auto}
.code .k{color:#8fb4ff}
.code .s{color:#a8e0b5}
.code .c{color:#6b7382}
.honest{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:200px 1fr;gap:24px;padding:28px 30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.honest-k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:500;padding-top:3px}
.honest p:last-child{color:var(--ink-2);font-size:16.5px}

/* ---------- booked ---------- */
.booked-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.booked-phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);position:sticky;top:calc(var(--nav-h) + 28px)}
.booked-phones{align-items:start}
/* Each marker is a box drawn around the part of the screenshot its note describes,
   with the number on the box's corner. Coordinates are % of the screenshot itself. */
.shot{position:relative;flex:0 0 auto}
.pin{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:2.4cqw;
  border:1.5px solid rgba(47,91,255,.7);pointer-events:none;
  transition:border-color .3s,box-shadow .3s,background-color .3s}
/* The number sits on the box's top-right corner, clear of what it points at; .l puts it on the left. */
.pin b{position:absolute;right:-1px;top:-1px;transform:translate(40%,-45%);width:clamp(18px,9cqw,23px);height:clamp(18px,9cqw,23px);border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;font-family:var(--mono);font-size:clamp(10.5px,4.6cqw,12px);font-weight:500;
  box-shadow:0 0 0 3px rgba(47,91,255,.28),0 4px 10px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.pin.hot{border-color:#5b7cff;background:rgba(47,91,255,.1);box-shadow:0 0 0 3px rgba(47,91,255,.3)}
.pin.l b{right:auto;left:-1px;transform:translate(-40%,-45%)}
.pin.hot b{transform:translate(40%,-45%) scale(1.15)}
.pin.l.hot b{transform:translate(-40%,-45%) scale(1.15)}
.booked-phones.has-hot .pin:not(.hot){border-color:rgba(47,91,255,.28)}
.booked-phones.has-hot .pin:not(.hot) b{opacity:.55}
.notes li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.notes li:first-child{border-top-color:var(--ink)}
.notes i{font-style:normal;font-family:var(--mono);font-size:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink);transition:background-color .25s,color .25s,border-color .25s}
.notes li.hot i{background:var(--brand);border-color:var(--brand);color:#fff}
.notes h3{margin-bottom:6px}
.notes p{color:var(--ink-2);font-size:16px}

.after-book{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:16px;margin-top:clamp(56px,7vw,90px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2);font-size:15.5px}
.card-img{display:grid;grid-template-columns:1fr 150px;gap:24px;align-items:center}
.card-img .phone{box-shadow:0 0 0 1px rgba(0,0,0,.3),0 18px 36px -16px rgba(13,16,21,.45)}

/* ---------- calls ---------- */
.calls{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.call-points li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.call-points li:first-child{border-top-color:var(--ink)}
.call-points i{font-style:normal;font-family:var(--mono);font-size:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink)}
.call-points h3{margin-bottom:6px}
.call-points p{color:var(--ink-2);font-size:16px}
.call-card{background:var(--night);color:var(--night-text);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);
  box-shadow:0 40px 80px -40px rgba(13,16,21,.6),0 10px 30px -15px rgba(13,16,21,.3)}
.call-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.call-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7ee2a0}
.call-live span{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.18)}
.call-flag{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#f0b44c;background:rgba(240,180,76,.1);border:1px solid rgba(240,180,76,.25);padding:4px 9px;border-radius:999px;white-space:nowrap}
.call-num{margin-top:22px;font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:-.02em}
.call-sub{margin-top:4px;font-size:14px;color:var(--night-muted)}
.call-fields{margin:22px 0 0;border-top:1px solid var(--night-line)}
.call-fields div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--night-line)}
.call-fields dt{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--night-muted);padding-top:2px}
.call-fields dd{margin:0;font-size:15.5px}
.call-done{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:12px;background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.25);font-size:15px;color:#c9f2d6}
.call-done span{color:#34c759;font-weight:700}
.calls-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:clamp(28px,4vw,44px)}
.calls-foot .lp-link{margin-top:0}
.calls-foot>span{font-size:14.5px;color:var(--muted)}

/* ---------- blue sms ---------- */
.sms{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(32px,6vw,90px);align-items:start}
.tabs{display:inline-flex;padding:4px;border-radius:999px;background:var(--night-3);border:1px solid var(--night-line);gap:2px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:9px 16px;border-radius:999px;font-size:14.5px;color:var(--night-muted);cursor:pointer;transition:background-color .25s,color .25s}
.tabs button:hover{color:var(--night-text)}
.tabs button[aria-selected="true"]{background:var(--night-text);color:var(--night)}
.steps{margin-top:26px;position:relative}
.steps li{position:relative;padding:14px 0 14px 34px;cursor:pointer;border-radius:10px}
.steps li::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:1.5px;background:var(--night-line)}
.steps li:first-child::before{top:22px}
.steps li:last-child::before{bottom:calc(100% - 22px)}
.steps li::after{content:"";position:absolute;left:4px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--night);border:1.5px solid #3a404b;transition:background-color .3s,border-color .3s,box-shadow .3s}
.steps li.done::after{background:#4b5260;border-color:#4b5260}
.steps li.cur::after{background:var(--imsg);border-color:var(--imsg);box-shadow:0 0 0 5px rgba(10,132,255,.2)}
.steps .when{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--night-muted);display:block}
.steps .what{display:block;font-size:16.5px;color:#7d8491;margin-top:2px;transition:color .25s}
.steps li.done .what,.steps li.cur .what{color:var(--night-text)}
.steps li:hover .what{color:#fff}
.steps .why{display:block;font-size:14.5px;color:var(--night-muted);margin-top:4px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s}
.steps li.cur .why{max-height:90px;opacity:1}
.sms-controls{display:flex;align-items:center;gap:14px;margin-top:22px;padding-left:34px}
.sms .fine{padding-left:34px;color:#8a919d}

.sms-phone{position:sticky;top:calc(var(--nav-h) + 24px)}
.imsg{width:100%;aspect-ratio:390/780;max-height:760px;border-radius:44px;padding:10px;background:linear-gradient(145deg,#2a2d33,#0c0d10 45%,#1d2025);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08),0 50px 100px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;overflow:hidden}
.imsg>*{background:#000}
.imsg-head{border-radius:35px 35px 0 0;padding:34px 16px 12px;display:grid;grid-template-columns:30px 1fr 30px;align-items:center;background:rgba(28,28,30,.96);border-bottom:1px solid rgba(255,255,255,.07)}
.imsg-back{font-size:34px;color:var(--imsg);line-height:1;margin-top:-6px}
.imsg-who{display:grid;justify-items:center;gap:5px;font-size:12px;color:#f2f2f7}
.imsg-who img{width:44px;height:44px;border-radius:50%;object-fit:contain;background:#111;padding:5px;border:1px solid rgba(255,255,255,.1)}
.imsg-body{flex:1;overflow-y:auto;padding:14px 12px 10px;display:flex;flex-direction:column;gap:3px;scroll-behavior:smooth;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
.imsg-body::-webkit-scrollbar{display:none}
.imsg-foot{border-radius:0 0 35px 35px;padding:8px 14px 22px}
.imsg-foot span{display:block;height:34px;border-radius:18px;border:1px solid #3a3a3c;padding:0 14px;line-height:32px;font-size:14px;color:#6e6e73}
.stamp{align-self:center;font-size:11px;color:#8e8e93;margin:12px 0 6px;text-align:center}
.stamp b{font-weight:600;color:#aeaeb2}
.bub{max-width:80%;padding:8px 13px;border-radius:19px;font-size:14.5px;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere;position:relative}
.bub.out{align-self:flex-end;background:var(--imsg);color:#fff;border-bottom-right-radius:6px}
.bub.in{align-self:flex-start;background:#26262a;color:#f2f2f7;border-bottom-left-radius:6px}
.bub u{text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.55)}
.bub.out+.bub.out,.bub.in+.bub.in{margin-top:2px}
.bub.out+.bub.in,.bub.in+.bub.out{margin-top:8px}
.bub-meta{align-self:flex-end;font-size:10.5px;color:#8e8e93;margin:2px 4px 4px}
.typing{align-self:flex-end;background:var(--imsg);border-radius:19px;padding:11px 14px;display:flex;gap:4px;border-bottom-right-radius:6px}
.typing.in{align-self:flex-start;background:#26262a}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.75);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:no-preference){
  .bub,.stamp{animation:pop .45s var(--ease) both}
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

.guard{margin-top:clamp(64px,8vw,110px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--night-line)}
.guard-title{font-size:clamp(24px,2.6vw,32px)}
.guard-sub{color:var(--night-muted);margin-top:10px;max-width:60ch}
.guard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--night-line);border:1px solid var(--night-line);border-radius:var(--r);overflow:hidden;margin-top:32px}
.guard-grid li{background:var(--night);padding:22px 22px 24px;display:grid;gap:6px;align-content:start}
.guard-grid code{font-family:var(--mono);font-size:12px;color:#8fb4ff;background:rgba(143,180,255,.08);border:1px solid rgba(143,180,255,.18);border-radius:6px;padding:2px 8px;justify-self:start;margin-bottom:6px}
.guard-grid b{font-weight:600;font-size:16px;color:var(--night-text)}
.guard-grid span{font-size:14.5px;color:var(--night-muted)}

/* ---------- back ---------- */
.rr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rr-card{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.rr-card h3{margin-bottom:10px}
.rr-card p{color:var(--ink-2);font-size:15.5px}
.shot-card{border-radius:18px;overflow:hidden;background:#0b0d11;box-shadow:0 24px 50px -24px rgba(13,16,21,.5)}
.shot-card img{width:100%}
.rr-ref{grid-template-columns:1fr 1fr}
.rule-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px!important}
.rule-note b{font-weight:600;color:var(--ink)}
.ref{display:flex;flex-direction:column;gap:8px;background:#000;border-radius:22px;padding:16px 12px;align-self:stretch;justify-content:center}
.ref-bubble{font-size:13px;line-height:1.35;padding:8px 11px;border-radius:15px;background:var(--imsg);color:#fff;border-bottom-right-radius:5px;margin-left:10%}
.ref-gap{font-size:10.5px;color:#8e8e93;text-align:center;margin:4px 0}

.retain{margin-top:clamp(72px,9vw,120px)}
.retain-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:36px}
.retain-head h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em}
.retain-head p{color:var(--ink-2)}

.tl{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);position:relative}
.tl-track{position:absolute;left:clamp(22px,3vw,36px);right:clamp(22px,3vw,36px);top:calc(clamp(22px,3vw,36px) + 16px);height:2px;background:var(--line)}
.tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .6s var(--ease)}
.tl-marks{position:relative;height:84px}
.tl-marks li{position:absolute;left:var(--p);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.tl-marks li:first-child{transform:none;align-items:flex-start}
.tl-marks li:last-child{transform:translateX(-100%);align-items:flex-end}
.tl-marks button{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:inherit;gap:10px;padding:10px 4px}
.tl-marks .dot{width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
.tl-marks button:hover .dot{border-color:var(--ink)}
.tl-marks li.past .dot{background:var(--ink);border-color:var(--ink)}
.tl-marks li.on .dot{background:var(--brand);border-color:var(--brand);transform:scale(1.3);box-shadow:0 0 0 5px rgba(47,91,255,.15)}
.tl-marks .d{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.tl-marks .l{font-size:13.5px;color:var(--ink-2);white-space:nowrap;margin-top:-6px}
.tl-marks li.on .d{color:var(--ink)}
.tl-marks li.on .l{color:var(--ink);font-weight:600}
.tl-detail{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:22px;padding-top:26px;border-top:1px solid var(--line);align-items:center;min-height:170px}
.tl-copy h4{font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.tl-copy p:last-child{color:var(--ink-2);font-size:16px}
.tl-bubble{background:#000;border-radius:20px;padding:18px 14px;display:flex;flex-direction:column}
.tl-bubble .bub{max-width:88%;font-size:14px}
.tl-bubble .none{color:#8e8e93;font-size:13.5px;text-align:center;padding:12px}

.offers{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px}
.offer-card{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.offer-card h3{margin-bottom:10px}
.offer-card p{color:var(--ink-2);font-size:15.5px}
.offer-plain{display:block}
.tag-top{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- owner ---------- */
.dash-tabs{display:inline-flex;padding:4px;border-radius:999px;background:var(--night-3);border:1px solid var(--night-line);gap:2px;margin-bottom:18px}
.dash-tabs button{border:0;background:none;padding:9px 16px;border-radius:999px;font-size:14.5px;color:var(--night-muted);cursor:pointer;transition:background-color .25s,color .25s}
.dash-tabs button[aria-selected="true"]{background:var(--night-text);color:var(--night)}
.dash-stage{position:relative;aspect-ratio:16/10;background:#0b0d11}
.dash-stage picture{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.dash-stage picture.on{opacity:1}
.dash-stage img{width:100%;height:100%;object-fit:cover;object-position:top left}
.owner-points{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--night-line)}
.owner-points li{padding:22px 20px 0 0;font-size:14.5px;color:var(--night-muted);line-height:1.5}
.owner-points li+li{padding-left:20px;border-left:1px solid var(--night-line)}
.owner-points b{display:block;color:var(--night-text);font-weight:600;font-size:15.5px;margin-bottom:6px;line-height:1.3}

/* ---------- build ---------- */
.fix{border-top:1px solid var(--ink)}
.fix-row{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fix-row span:first-child{font-size:clamp(18px,1.7vw,21px);font-weight:500;letter-spacing:-.015em;line-height:1.3}
.fix-row span:last-child{color:var(--ink-2);font-size:16px}
.fix-headrow{padding:12px 0}
.fix-headrow span{font-family:var(--mono);font-size:12px!important;font-weight:400!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--muted)!important}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.skills li{font-size:14px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.aside-line{margin-top:28px;font-size:clamp(19px,1.8vw,23px);font-weight:500;letter-spacing:-.015em}

/* ---------- check ---------- */
.check-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:start}
.check-grid .sec-head{position:sticky;top:calc(var(--nav-h) + 40px);margin-bottom:0}
.check{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.check-k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.check li+li{border-top:1px solid var(--line)}
.check label{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;padding:15px 0;cursor:pointer;font-size:16.5px;color:var(--ink-2)}
.check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border-radius:7px;border:1.5px solid var(--line-2);background:var(--paper);cursor:pointer;display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.check input::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);margin-top:-2px;transition:transform .2s var(--ease)}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{transform:rotate(45deg) scale(1)}
.check input:checked+span{color:var(--ink)}
.check label:hover input:not(:checked){border-color:var(--ink)}
.check-out{margin-top:10px;padding-top:20px;border-top:1px solid var(--ink)}
.meter{height:6px;border-radius:6px;background:var(--paper-2);overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--ink);border-radius:6px;transition:width .5s var(--ease)}
#checkResult{margin-top:14px;font-size:17px;color:var(--ink-2);min-height:3em}
#checkResult b{color:var(--ink);font-weight:600}
.check .fine{color:var(--faint)}

/* ---------- start ---------- */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.how li{padding:24px 24px 0 0}
.how li+li{padding-left:24px;border-left:1px solid var(--line)}
.how i{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--faint);display:block;margin-bottom:26px}
.how h3{margin-bottom:8px}
.how p{color:var(--ink-2);font-size:16px}
.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(56px,7vw,90px)}
.entry{background:var(--paper-2);border-radius:var(--r-lg);padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.entry h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.025em;margin-bottom:14px}
.entry h3 span{display:block;color:var(--muted)}
.entry-buy{margin-top:22px}
.entry p{color:var(--ink-2)}
.contact{background:var(--night);color:var(--night-text);border-radius:var(--r-lg);padding:clamp(26px,3.5vw,40px)}
.contact img{width:48px;height:48px;border-radius:13px;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;margin-bottom:22px}
.contact h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.025em}
.contact-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--night-muted);margin-top:6px}
.contact>p:not(.contact-role){margin-top:18px;color:var(--night-muted)}
.contact-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.contact .btn-ink{background:var(--night-text);color:var(--night)}
.contact .btn-ink:hover{background:#fff}
.contact .btn-line{border-color:rgba(255,255,255,.2);color:var(--night-text)}
.contact .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.contact-mail{display:inline-block;margin-top:18px;color:var(--night-muted);font-size:15px;text-underline-offset:3px}
.contact-mail:hover{color:#fff}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:28px 0 32px;font-size:14px;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot nav{display:flex;gap:22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

.mcta{display:none}

/* ================= responsive ================= */
@media (max-width:1080px){
  .owner-points{grid-template-columns:repeat(2,1fr);border-top:0}
  .owner-points li,.owner-points li+li{padding:18px 0;border-left:0;border-top:1px solid var(--night-line)}
  .owner-points li:nth-child(odd){padding-right:20px}
  .owner-points li:nth-child(even){padding-left:20px;border-left:1px solid var(--night-line)}
  .after-book{grid-template-columns:1fr 1fr}
  .after-book .card-img{grid-column:1/-1;order:-1}
  .rr,.offers{grid-template-columns:1fr}
}

@media (max-width:900px){
  body{font-size:16.5px}
  .hero-grid,.loop-grid,.found-grid,.booked-grid,.calls,.sms,.check-grid,.start-grid{grid-template-columns:1fr}
  .hero-visual{max-width:520px;margin:0 auto;width:100%}
  .rules{grid-template-columns:1fr;border-top:0}
  .rules li,.rules li+li{padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .built-grid{grid-template-columns:1fr 1fr}
  .built-col:nth-child(3){padding-left:0;border-left:0}
  .built-col:nth-child(n+3){border-top:1px solid var(--line);margin-top:10px}
  .work{grid-template-columns:1fr 1fr}
  .work figure:nth-child(n+3){height:clamp(140px,30vw,220px)}
  .code,.booked-phones,.sms-phone,.check-grid .sec-head{position:static}
  .booked-phones{max-width:520px;margin:0 auto 12px;width:100%}
  .sms{display:flex;flex-direction:column;gap:22px}
  .sms-side{display:contents}
  .tabs{order:1}
  .sms-phone{order:2;max-width:380px;margin:0 auto;width:100%}
  .sms-controls{order:3;margin-top:0;justify-content:center}
  .steps{order:4;margin-top:0}
  .sms .fine{order:5;margin-top:0}
  .honest{grid-template-columns:1fr;gap:10px}
  .retain-head{grid-template-columns:1fr;gap:14px}
  .guard-grid{grid-template-columns:1fr 1fr}
  .how{grid-template-columns:1fr;border-top:0}
  .how li,.how li+li{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .how li:first-child{border-top-color:var(--ink)}
  .how i{margin-bottom:10px}
  .fix-row{grid-template-columns:1fr;gap:6px}
  .fix-headrow{display:none}
  .tl-detail{grid-template-columns:1fr;gap:18px}
  .call-card{max-width:520px}
}

@media (max-width:640px){
  :root{--nav-h:58px}
  .sec{padding:72px 0}
  .sec-head{margin-bottom:40px}
  h1{font-size:clamp(38px,11vw,52px)}
  h2{font-size:clamp(30px,8.6vw,40px)}
  .hero{padding-top:28px}
  .hero-cta .btn{flex:1 1 100%}
  .hero-stages{margin-top:28px}
  .hero-visual{padding:0 6%}
  .hero-visual .phone{max-width:220px}
  .phone-a{margin-right:-30%}
  .brand span{font-size:16px}
  .browser-bar{height:40px;gap:10px}
  .browser-open{display:none}
  .url{margin:0 0 0 auto;max-width:none}
  .browser-flag{font-size:10px;padding:3px 7px}
  .dots i{width:9px;height:9px}
  .built-grid{grid-template-columns:1fr}
  .built-col,.built-col+.built-col{padding:18px 0 0;border-left:0}
  .built-col+.built-col{border-top:1px solid var(--line);margin-top:14px}
  .work{gap:8px}
  .work figure{height:200px}
  .work figure:nth-child(n+3){height:140px}
  .ring-wrap{max-width:none;margin:0 -8px}
  .ring-node text{font-size:20px}
  .ring-node .n{font-size:14px}
  .ring-node .hit{fill:transparent;stroke:none}
.ring-node circle.dot{r:19px}
  .ring-center-l{font-size:30px}
  .ring-center-k{font-size:17px}
  .loop-panel{min-height:0}
  .booked-phones .phone{max-width:none}
  .after-book{grid-template-columns:1fr}
  .after-book .card-img{order:0}
  .card-img{grid-template-columns:1fr 110px;gap:14px;padding-right:18px}
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:9px 8px;font-size:13.5px}
  .sms-controls,.sms .fine{padding-left:0}
  .steps li{padding-left:30px}
  .imsg{aspect-ratio:auto;height:560px;border-radius:38px}
  .imsg-head{border-radius:29px 29px 0 0;padding-top:22px}
  .imsg-foot{border-radius:0 0 29px 29px}
  .guard-grid{grid-template-columns:1fr}
  .rr-card,.offer-card,.rr-ref{grid-template-columns:1fr;gap:20px;padding:22px}
  .shot-card{max-width:300px;margin:0 auto;width:100%}
  .rr-card .phone,.offer-card .phone{max-width:190px;margin:0 auto}
  .ref{order:-1}
  .tl{padding:20px}
  .tl-track{display:none}
  .tl-marks{height:auto;display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:0 20px 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .tl-marks::-webkit-scrollbar{display:none}
  .tl-marks li,.tl-marks li:first-child,.tl-marks li:last-child{position:static;transform:none;align-items:stretch;scroll-snap-align:start}
  .tl-marks button{flex-direction:row;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line-2);border-radius:999px}
  .tl-marks .dot{width:9px;height:9px;border-width:1.5px}
  .tl-marks .l{margin-top:0}
  .tl-marks li.on button{border-color:var(--ink);background:var(--paper)}
  .tl-marks li.on .dot{transform:none;box-shadow:none}
  .dash-tabs{display:flex}
  .dash-tabs button{flex:1;padding:9px 6px;font-size:13.5px}
  .browser-dark{overflow:visible;max-width:330px;margin:40px auto 0;border-radius:44px;padding:9px;background:linear-gradient(145deg,#2a2d33,#0c0d10 45%,#1d2025);border:0;position:relative}
  .browser-dark .browser-bar{position:absolute;top:-34px;left:50%;transform:translateX(-50%);height:auto;padding:0;border:0;background:none;z-index:2}
  .browser-dark .dots,.browser-dark .url{display:none}
  .dash-stage{aspect-ratio:390/844;border-radius:35px;overflow:hidden}
  .owner-points{grid-template-columns:1fr}
  .owner-points li:nth-child(n){padding:16px 0;border-left:0}
  .check label{font-size:16px}
  .contact-btns .btn{flex:1 1 100%}
  .foot-in{flex-direction:column}
  .foot{padding-bottom:96px}
  .mcta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(244,242,238,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .35s var(--ease)}
  .mcta.show{transform:none}
  .mcta .btn{flex:1;height:46px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}