/* The DBY home page in The set (design system §12, built off L4: looks-2026-10b/engine/build.py
   BASE_CSS + L4_CSS). Tokens are §11.1's only. Desktop is drawn on the 1440 grid; 1024 to 1439
   draws the same page smaller (home.js-free: the inline script in index.html sets --k) with every
   text size floored at its phone size (§12.1); 1023 and below takes the phone rules (§12.11). */

:root{--white:#ffffff;--cream:#fff4e6;--ink:#2c2030;--ink-soft:#5b4a5a;--gold:#ffc66b;--sun-amber:#f2a54a;--coral:#ff6b5c;
  --line:rgba(44,32,48,.24);--hair:rgba(44,32,48,.12);--g:72px;--k:1}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--white)}
body{color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
figure{margin:0}
.nw{white-space:nowrap}
.em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.14em;line-height:.8}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--g)}
.m-only{display:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font:600 15px/1 "Instrument Sans";text-decoration:none}
.skip:focus{left:16px}

/* ---- header (§12.4) */
.hdr{background:var(--cream)}
.top{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.brand img{height:44px;width:auto;margin-left:-5.6px}   /* the file's built-in clear space hangs outside the column */
.brand span{font:600 21px/1 "Instrument Sans";letter-spacing:-.03em;padding-top:1px}
.nav{display:flex;align-items:center;gap:36px;font:500 16px/1 "Instrument Sans"}
.nav a{text-decoration:none}
.pill{border:1.5px solid var(--ink);border-radius:999px;padding:13px 22px;font-weight:600;text-decoration:none}
.menu{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px;color:var(--ink);background:none;border:0;border-radius:10px;cursor:pointer}
.menu svg{width:26px;height:26px}
.mnav{display:none}

/* ---- type */
.kick{font:600 14px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
h1{font:600 76px/.98 "Instrument Sans";letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
h2{font:600 44px/1.06 "Instrument Sans";letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.deck{font:400 21px/1.55 "Instrument Sans";color:var(--ink-soft);margin-top:26px;text-wrap:pretty}
.big{font:500 32px/1.3 "Instrument Sans";letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.sm{font:400 19px/1.6 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.micro{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:20px}

/* ---- buttons and links (§12.5) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;
  background:var(--ink);color:var(--white);font:600 17px/1 "Instrument Sans";letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.ghost{font:600 17px/1 "Instrument Sans";color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;white-space:nowrap}
.ctas{display:flex;align-items:center;gap:32px;margin-top:36px}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
.btn:focus-visible,.pill:focus-visible{border-radius:999px}

/* ---- icons and card marks */
.ic{display:inline-flex;width:20px;height:20px;flex:none;color:var(--ink)}
.ic svg{width:100%;height:100%}
.ic-sm{width:18px;height:18px;color:var(--ink-soft)}
.tl{display:inline-flex;align-items:center;gap:10px}
.pay{display:flex;gap:16px;align-items:center}
.pm{display:flex;align-items:center;color:var(--ink-soft)}
.pm svg{display:block;fill:currentColor}

/* ---- the top band and the hero (§12.1, L4) */
.band{background:var(--cream)}
.grid2{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px}
.hero{align-items:center;padding-top:32px;padding-bottom:64px}

/* ---- the three tiles (§12.6) */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 252px;gap:16px}
.t{position:relative;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(44,32,48,.07),0 18px 36px -26px rgba(44,32,48,.35)}
.t .lab{display:block;font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.t.comp{grid-column:1/-1;display:grid;grid-template-columns:364px minmax(0,1fr);column-gap:28px;padding:20px 22px 22px}
.t.comp .lab{grid-column:1/-1;margin-bottom:16px}
.t.comp img{width:364px;max-width:100%;border-radius:10px;box-shadow:0 0 0 1px rgba(44,32,48,.08)}
.pages{align-self:start;margin-top:25px;display:flex;flex-direction:column;gap:18px}
.pages li{display:flex;flex-direction:column;gap:4px}
.pages b{font:600 15px/1.3 "Instrument Sans";color:var(--ink)}
.pages span{font:400 14px/1.45 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.t.stg{padding:20px 22px}
.stg .big29{font:600 52px/1 "Instrument Sans";letter-spacing:-.04em}
.stg .lab29{font:500 15px/1.2 "Instrument Sans";color:var(--ink-soft);margin-top:6px}
.stg ol{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.stg li{display:grid;grid-template-columns:20px 1fr auto;align-items:baseline;gap:6px;font:500 14px/1.2 "Instrument Sans"}
.stg li .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.stg li .l2{color:var(--ink-soft);font-weight:400;font-size:13px}
.t.path{background:linear-gradient(180deg,#fff 0%,#fff9f1 100%)}
.t.path .txt{position:relative;z-index:1;padding:22px 22px 0;font:600 21px/1.22 "Instrument Sans";letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pscene{position:absolute;left:50%;bottom:21px}
.hzl{position:absolute;display:block;height:2px;background:var(--line)}
/* the sun (b_sun, the picked world's own) */
.sunbox{position:absolute;overflow:hidden;pointer-events:none}
.sunbox i{position:absolute;display:block;border-radius:50%}
.sunbox .disc::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/var(--grain) var(--grain)}
/* the 21-day arc, in plum (§12.8): walked days ink, the missed day a dashed ring, days to come white, today ink with a halo */
.arc{position:absolute;inset:0;margin:0}
.arc .a{position:absolute;border-radius:50%;background:#fff;border:1.5px solid rgba(44,32,48,.16)}
.arc .done{background:var(--ink);border-color:var(--ink)}
.arc .miss{background:#fff;border:1.5px dashed rgba(44,32,48,.45)}
.arc .today{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 5px rgba(44,32,48,.12)}

/* ---- the trust strip (§12.7) */
.strip{border-top:1px dashed var(--line);padding:26px 0 30px;align-items:center}
.seal{display:flex;align-items:center;gap:18px}
.seal .ring{width:76px;height:76px;border-radius:50%;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.seal .ring b{font:600 28px/1 "Instrument Sans";letter-spacing:-.03em}
.seal .ring small{font:600 9.5px/1 "Instrument Sans";letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.seal p{font:600 17px/1.35 "Instrument Sans"}
.rt{display:flex;justify-content:space-between;align-items:center;gap:24px}
.keep{font:400 15px/1.55 "Instrument Sans";color:var(--ink-soft)}
.keep b{font-weight:600;color:var(--ink)}
.chk{display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:500 14px/1.3 "Instrument Sans";color:var(--ink-soft);flex:none}

/* ---- sections under the band (§12.9): white, then cream, in turn */
.sec{padding:112px 0 120px}
.sec.cream{background:var(--cream)}
.sec .grid2{align-items:start}
.hd .big{margin-top:28px}
.hd .sm{margin-top:24px}

/* the wedge */
.tx .sm + .sm{margin-top:18px}
.tx .strong{font-weight:600;color:var(--ink)}
.seq{margin-top:64px;padding:10px 32px 26px}
.seq .lab{line-height:1.4}
.seq .row{display:grid;grid-template-columns:220px 1fr;align-items:start;gap:24px;padding:24px 0 22px}
.seq .row + .row{border-top:1px solid var(--hair)}
/* each track is a line of steps in the arc's own marks: walked ink, the miss a dashed ring, the last one lit with a halo */
.seq .track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 210px}
.seq .track li{position:relative;padding:28px 16px 0 0}
.seq .track li:last-child{padding-right:0}
.seq .track li:not(:last-child)::before{content:"";position:absolute;left:6px;right:0;top:5px;border-top:2px solid var(--line)}
.seq .myth .track li:not(:last-child)::before{border-top:1.5px dashed rgba(44,32,48,.32)}
.seq .track i{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;border:1.5px solid rgba(44,32,48,.32)}
.seq .track .on i{background:var(--ink);border-color:var(--ink)}
.seq .track .miss i{border:1.5px dashed rgba(44,32,48,.45)}
.seq .track .end i{box-shadow:0 0 0 5px rgba(44,32,48,.12)}
.seq .track span{display:block;font:500 16px/1.3 "Instrument Sans";color:var(--ink)}
.seq .myth span{color:var(--ink-soft)}
.seq .myth .on span{color:var(--ink)}
.seq .track .end span{font-weight:600}
.seq figcaption{border-top:1px solid var(--hair);padding-top:22px;font:600 17px/1.35 "Instrument Sans";color:var(--ink)}

/* how it works: the four steps (a numbered list in the stage rows' number style, §12.9) and the result tile */
.how .grid2{align-items:center}
.steps{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.steps li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline}
.steps .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.steps p{font:400 17px/1.5 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.steps b{font-weight:600;color:var(--ink)}
.t.res{padding:22px 26px 26px}
.res .k{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tag{letter-spacing:.06em;font:600 11px/1 "Instrument Sans";text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--cream);color:var(--ink-soft)}
.res .nm{font:600 30px/1 "Instrument Sans";letter-spacing:-.03em;margin-top:18px;white-space:nowrap}
.res .nm .em{font-size:1.12em}
.res .cl{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:12px;max-width:36em}
.prof{padding-top:18px;margin-top:18px;border-top:1px solid var(--hair)}
.prof .pl{font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.prof ol{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.prof .bar{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;font:500 14px/1 "Instrument Sans";color:var(--ink)}
.prof .tr{height:8px;border-radius:4px;background:rgba(44,32,48,.08);overflow:hidden}
.prof .tr span{display:block;height:100%;border-radius:4px;background:var(--gold)}
.prof .leak .tr span{background:var(--coral)}
.prof .leak{font-weight:600}

/* the guides: the five stages and every title, no covers (§12.8) */
.guides .grid2{align-items:end}
.guides .aside{margin-bottom:6px}
.t.shelf{margin-top:56px;padding:26px 28px 30px}
.shelf > ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:40px}
.shelf > ol > li{position:relative}
.shelf > ol > li + li::before{content:"";position:absolute;left:-20px;top:0;bottom:0;border-left:1px solid var(--hair)}
.shelf .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-right:10px;vertical-align:2px}
.shelf .sn{font:600 17px/1.3 "Instrument Sans";color:var(--ink)}
.shelf .sl{font:400 15px/1.4 "Instrument Sans";color:var(--ink-soft);margin-top:4px}
.shelf .gt{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.shelf .gt li{font:500 15px/1.35 "Instrument Sans";color:var(--ink);text-wrap:balance}

/* the close and the offer */
.close .grid2{align-items:start}
.close .hd{padding-top:24px}
.t.offer{padding:24px 28px 28px}
.offer .price{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.offer .price b{font:600 52px/1 "Instrument Sans";letter-spacing:-.04em}
.offer .price span{font:500 15px/1.2 "Instrument Sans";color:var(--ink-soft)}
.offer .then{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:8px}
.offer .then.tax{margin-top:2px}   /* "Tax added at checkout where it applies." under the price lines (26 Oct) */
.offer ul{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.offer li{display:grid;grid-template-columns:22px 1fr;gap:12px;font:500 16px/1.45 "Instrument Sans";color:var(--ink);text-wrap:pretty}
.offer li .ic{margin-top:1px}
.offer .sep{font:400 15px/1.55 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.offer .ghost{display:inline-block;margin-top:24px}
.offer .g30{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:14px}

/* ---- the footer (§12.4) */
.foot{background:var(--white);padding-top:24px}
.foot .wrap > *{max-width:none}
.foot .wrap{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px;row-gap:14px;padding-top:26px;padding-bottom:30px;position:relative}
.foot .wrap::before{content:"";position:absolute;left:var(--g);right:var(--g);top:0;height:1px;background:var(--hair)}
.foot .brand img{height:38px;margin-left:-4.8px}
.foot .brand span{font-size:19px}
.foot .brand{grid-column:1;justify-self:start}
.fd{grid-column:1;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.fd a{text-underline-offset:3px;white-space:nowrap}   /* "full disclaimer" stays on one line (help judge-1, 1024) */
.fe{grid-column:1;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}   /* the short entity line (legal/entity.html, 2026-10-26): the trader's name in 600 ink, as on the legal pages (§12.4) */
.fe b{font-weight:600;color:var(--ink)}
.fe a{text-underline-offset:3px;white-space:nowrap}
.fl{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 24px;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.fl a{text-decoration:none}
.fl a[aria-current="page"]{color:var(--ink);font-weight:600}
.fr{grid-column:2;grid-row:2 / span 2;align-self:end;text-align:right;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}

/* ---- 1024 to 1439: the 1440 page, smaller; no text under its phone size (§12.1, §12.13) */
@media (min-width:1024px) and (max-width:1439px){
 .page{zoom:var(--k)}
 .page .ctas{flex-wrap:wrap;row-gap:18px}
 .page .brand span{font-size:max(21px,calc(19px / var(--k)))}
 .page .nav{font-size:max(16px,calc(16px / var(--k)))}
 .page h1{font-size:max(76px,calc(46px / var(--k)))}
 .page h2{font-size:max(44px,calc(32px / var(--k)))}
 .page .kick{font-size:max(14px,calc(13px / var(--k)))}
 .page .deck{font-size:max(21px,calc(18px / var(--k)))}
 .page .big{font-size:max(32px,calc(23px / var(--k)))}
 .page .sm{font-size:max(19px,calc(17px / var(--k)))}
 .page .micro{font-size:max(15px,calc(14px / var(--k)))}
 .page .btn,.page .ghost{font-size:max(17px,calc(17px / var(--k)))}
 .page .t .lab{font-size:max(12px,calc(10px / var(--k)))}
 .page .stg .big29,.page .offer .price b{font-size:max(52px,calc(40px / var(--k)))}
 .page .stg .lab29,.page .offer .price span{font-size:max(15px,calc(13px / var(--k)))}
 .page .stg li{font-size:max(14px,calc(13px / var(--k)))}
 .page .stg li .no,.page .steps .no,.page .shelf .no{font-size:max(12px,calc(12px / var(--k)))}
 .page .stg li .l2{font-size:max(13px,calc(12px / var(--k)))}
 .page .t.path .txt{font-size:max(21px,calc(16px / var(--k)))}
 .page .bento{grid-template-rows:auto calc(252px / var(--k))}
 .page .seal p{font-size:max(17px,calc(16px / var(--k)))}
 .page .seal .ring b{font-size:max(28px,calc(23px / var(--k)))}
 .page .seal .ring small{font-size:max(9.5px,calc(9.5px / var(--k)))}
 .page .keep,.page .chk{font-size:max(15px,calc(14px / var(--k)))}
 .page .seq .track span{font-size:max(16px,calc(15px / var(--k)))}
 .page .seq figcaption{font-size:max(17px,calc(16px / var(--k)))}
 .page .steps p,.page .offer li{font-size:max(17px,calc(16px / var(--k)))}
 .page .res .nm{font-size:max(30px,calc(24px / var(--k)))}
 .page .res .cl,.page .offer .sep,.page .offer .then,.page .fd,.page .fe,.page .fl,.page .fr{font-size:max(15px,calc(14px / var(--k)))}
 .page .res .k,.page .prof .pl{font-size:max(12px,calc(10px / var(--k)))}
 .page .tag{font-size:max(11px,calc(11px / var(--k)))}
 .page .prof .bar{font-size:max(14px,calc(13px / var(--k)))}
 .page .shelf .sn{font-size:max(17px,calc(16px / var(--k)))}
 .page .shelf .sl,.page .shelf .gt li,.page .g30,.page .pages b{font-size:max(15px,calc(14px / var(--k)))}
 .page .pages span{font-size:max(14px,calc(13px / var(--k)))}
 /* sizes that are not text but sit beside it: icons, the lockups, the seal keep their own size (12.4, 12.5) */
 .page .top .brand img{height:max(44px,calc(38px / var(--k)));margin-left:calc(-5.6px * max(1,calc(.8636 / var(--k))))}
 .page .foot .brand img{height:calc(38px / var(--k));margin-left:calc(-4.8px / var(--k))}
 .page .foot .brand span{font-size:calc(19px / var(--k))}
 .page .offer li{grid-template-columns:calc(22px / var(--k)) 1fr;column-gap:calc(12px / var(--k))}
 .page .offer li .ic{width:calc(20px / var(--k));height:calc(20px / var(--k));margin-top:calc(2px / var(--k))}
 .page .ic-sm{width:calc(18px / var(--k));height:calc(18px / var(--k))}
 .page .seal .ring{width:max(76px,calc(64px / var(--k)));height:max(76px,calc(64px / var(--k)))}
 .page .pay{zoom:calc(1 / var(--k))}   /* the card marks keep their set heights (12.7: PAY_H) */
 /* the Companion picture never drops under its phone scale (342 px wide on a 390 phone) */
 .page .t.comp{grid-template-columns:max(364px,calc(342px / var(--k))) minmax(0,1fr)}
 .page .t.comp img{width:100%}
}
/* 1024 to 1279: the page list makes room (the phone shows none either) and the picture fills the tile's width, so
   no empty strip is left on its right (the sales page's fix, its judge-1 nice 5); it never shows under its own 1:1 size here */
@media (min-width:1024px) and (max-width:1279px){
 .page .t.comp{grid-template-columns:minmax(0,1fr)}
 .page .t.comp img{width:100%}
 .page .pages{display:none}
}

/* 1024 to 1199 (the 1440 page drawn smaller): the six footer links no longer share one row since Help joined them, so
   they take two even rows of three (Help, Privacy Policy, Terms; then Refund Policy, Disclaimer, Cookie settings), never
   one link alone on a row. From about 1150 up they fit one row again. */
@media (min-width:1024px) and (max-width:1199px){
 .page .fl{row-gap:4px}
 .page .fl::before{content:"";flex-basis:100%;height:0;order:1}
 .page .fl a:nth-of-type(n+4){order:2}
}
/* ---- phones, 1023 and below (§12.11) */
@media (max-width:1023px){
 :root{--g:24px}
 .d-only{display:none!important}
 .m-only{display:block}
 .top{height:76px}
 .brand img{height:38px;margin-left:-4.8px}
 .brand span{font-size:19px}
 .nav{display:none}
 .menu{display:inline-flex}
 .mnav:not([hidden]){display:flex;flex-direction:column;gap:6px;padding-bottom:20px;font:500 16px/1 "Instrument Sans"}
 .mnav a{text-decoration:none;padding:14px 0}
 .mnav .pill{text-align:center;padding:16px 22px;margin-top:8px}
 .grid2{grid-template-columns:minmax(0,1fr)}
 .hero{padding-top:8px;padding-bottom:36px;row-gap:32px}
 h1{font-size:46px}
 h2{font-size:32px}
 .kick{font-size:13px;margin-bottom:16px}
 .deck{font-size:18px;margin-top:18px}
 .big{font-size:23px}
 .sm{font-size:17px}
 .ctas{flex-direction:column;align-items:stretch;gap:20px;margin-top:26px}
 .ctas .btn{width:100%}
 .ctas .ghost{align-self:center}
 .micro{font-size:14px;text-align:center;margin-top:14px}
 .bento{grid-template-rows:auto 216px;gap:10px}
 .t{border-radius:16px}
 .t .lab{font-size:10px}
 .t.comp{display:block;padding:14px 14px 6px}
 .t.comp .lab{margin-bottom:8px}
 .t.comp picture{display:block;margin:0 -14px}
 .t.comp img{width:100%;border-radius:0;box-shadow:none}
 .t.stg{padding:14px}
 .stg .big29{font-size:40px}
 .stg .lab29{font-size:13px}
 .stg ol{gap:6px;margin-top:12px}
 .stg li{grid-template-columns:16px 1fr;font-size:13px}
 .stg li .l2{display:none}
 .t.path .txt{padding:14px 14px 0;font-size:16px}
 .pscene{bottom:16px}
 .arc .today{box-shadow:0 0 0 2px rgba(44,32,48,.12)}
 .strip{padding:24px 0 28px;row-gap:18px}
 .rt{flex-direction:column;align-items:flex-start;gap:16px}
 .seal .ring{width:64px;height:64px}
 .seal .ring b{font-size:23px}
 .seal p{font-size:16px;text-wrap:balance}
 .keep{font-size:14px}
 .chk{align-items:flex-start}
 .pay{flex-wrap:wrap}
 .sec{padding:56px 0 64px}
 .sec .grid2,.how .grid2,.close .grid2{row-gap:32px}
 .hd .big{margin-top:20px}
 .hd .sm{margin-top:18px}
 .tx .sm + .sm{margin-top:16px}
 .seq{margin-top:36px;padding:4px 16px 18px}
 .seq .row{grid-template-columns:1fr;gap:14px;padding:18px 0}
 .seq .track{grid-template-columns:1fr;row-gap:12px}
 .seq .track li{padding:0 0 0 26px}
 .seq .track i{top:4px}
 .seq .track li:not(:last-child)::before{left:5px;right:auto;top:10px;bottom:-22px;width:0;border-top:0;border-left:2px solid var(--line)}
 .seq .myth .track li:not(:last-child)::before{border-top:0;border-left:1.5px dashed rgba(44,32,48,.32)}
 .seq .track span{font-size:15px}
 .seq figcaption{font-size:16px;padding-top:18px}
 .steps{margin-top:26px;gap:16px}
 .steps p{font-size:16px}
 .t.res{padding:16px 16px 18px}
 .res .k{font-size:10px}
 .res .nm{font-size:24px;margin-top:14px}
 .res .cl{font-size:14px}
 .prof .pl{font-size:10px}
 .prof .bar{grid-template-columns:84px 1fr;font-size:13px;gap:10px}
 .prof ol{gap:9px}
 .t.shelf{padding:2px 16px}
 .shelf > ol{grid-template-columns:minmax(0,1fr);gap:0}
 .shelf > ol > li{padding:16px 0}
 .shelf > ol > li + li{border-top:1px solid var(--hair)}
 .shelf > ol > li + li::before{display:none}
 .shelf .sn{font-size:16px;display:inline}
 .shelf .sl{display:inline;font-size:14px;margin:0 0 0 8px}
 .shelf .gt{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:7px;margin-top:12px}
 .shelf .gt li{font-size:14px;line-height:1.3}
 .guides .aside{margin-top:0}
 .t.offer{padding:18px 16px 22px}
 .offer .price b{font-size:40px}
 .offer .price span{font-size:13px}
 .offer li{font-size:16px}
 .offer .sep{font-size:14px}
 .offer .then{font-size:14px}
 .offer .g30{font-size:14px}
 .foot .wrap{grid-template-columns:minmax(0,1fr);padding-top:24px;padding-bottom:28px;row-gap:16px}
 .fd,.fe,.fl,.fr{grid-column:1;grid-row:auto;font-size:14px}
 .fl{justify-content:flex-start;gap:8px 20px}
 .fr{text-align:left}
}
/* the smallest phones (under 360): the 166 px sunrise fits the narrower Path tile, no dot cut (the sales page's fix) */
@media (max-width:359px){
 .t.path .pscene{transform:scale(.76);transform-origin:50% 100%}
}

/* ---- Site port: the product pictures (VANT cards 346d and 7b48, batch 2026-10-28b; scripts/port-pages.mjs) ---- */
.pp{margin:0}
.pp img{display:block;width:100%;height:auto;aspect-ratio:5/4}
.pp-set{max-width:560px;margin:40px auto 0}
@media (max-width:1023px){.pp-set{margin-top:20px}}