@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-latin-800-normal.woff2) format("woff2")}

/* Layout: the brand's own system (brief §5): warm paper, near-black ink, logo orange; hard-edged light/dark bands; one family, Manrope. Single look by design. */
:root{
  --ink:#101010; --paper:#f7f3ee; --paper-2:#efe9e1; --orange:#fa5a00; --orange-ink:#b84200;
  --muted:#5b544c; --line:#e3dcd2; --d-muted:#b7aea3; --d-line:#2c2823; --white:#ffffff;
  --firm:#2f5d50; --lock:#191714;
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.025em}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.w{max-width:1120px;margin:0 auto;padding-inline:20px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* header */
.hdr{background:var(--paper);border-bottom:1px solid var(--line)}
.hdr .w{display:flex;align-items:center;gap:24px;padding-block:14px}
.logo{display:block;width:190px;flex:none}
.nav{display:flex;gap:22px;font-weight:600;font-size:15px;margin-left:auto}
.nav a{text-decoration:none}
.nav a:hover{color:var(--orange-ink)}
@media (max-width:900px){.logo{width:150px}}

/* buttons, type */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;font-weight:800;font-size:15px;line-height:1.2;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-o{background:var(--orange);color:var(--ink)}
.btn-k{background:var(--ink);color:var(--paper)}
.btn-g{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.band{padding-block:88px}
@media (max-width:860px){.band{padding-block:56px}}
.dark{background:var(--ink);color:var(--paper)}
.alt{background:var(--paper-2)}
.muted{color:var(--muted)}
.dark .muted{color:var(--d-muted)}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.dark .eyebrow{color:var(--orange)}
.d1{font-weight:800;font-size:clamp(2.6rem,6.2vw,4.4rem);line-height:1}
.d2{font-weight:800;font-size:clamp(2rem,4.4vw,3rem);line-height:1.05}
.h3{font-weight:800;font-size:1.22rem;line-height:1.25}
.lead{font-size:1.18rem;max-width:40ch}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hl{color:#e65000}   /* Lighthouse 14 Oct: brand orange on paper was 2.91:1 for the headline highlight; this shade is 3.45:1 (large text needs 3) */
.dark .hl{color:var(--orange)}
.small{font-size:14px}
.cap{font-size:13px;color:var(--muted);max-width:52ch}
.dark .cap{color:var(--d-muted)}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:700;font-size:14px}
.facts span{display:inline-flex;align-items:center;gap:8px}
.facts span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* devices */
.phone{position:relative;width:100%;max-width:280px;flex-shrink:0;height:-webkit-fit-content;height:fit-content;background:#0b0b0b;border-radius:42px;padding:10px;box-shadow:0 30px 60px rgba(16,16,16,.20),0 0 0 1px #2a2724 inset}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:76px;height:20px;margin-left:-38px;background:#0b0b0b;border-radius:12px;z-index:3}
.scr{position:relative;width:100%;aspect-ratio:390/844;border-radius:33px;overflow:hidden;background:var(--white)}  /* 14 Oct (owner): the screen sets the phone's height, so the screen can never run past the frame (seen on the owner's phone in the demo pop-up) */
.phone.live{max-width:340px}
.phone.live .scr{background:#2a2a2a}
.phone.live .scr iframe{position:absolute;top:30px;left:0;width:390px;height:900px;border:0;transform-origin:0 0;background:var(--white)}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .45s}
.browser{border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 30px 60px rgba(16,16,16,.16);border:1px solid var(--line)}
.browser .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.browser .dot{width:10px;height:10px;border-radius:50%;background:#d5cdc2}
.browser .url{flex:1;min-width:0;margin-left:8px;background:var(--white);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--firm);color:var(--white);font-size:13px;font-weight:700}
.site-nav i{font-style:normal;font-weight:500;opacity:.85}
@media (max-width:520px){.site-nav i{display:none}}

/* hero */
.hero .w{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
@media (max-width:900px){.hero .w{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding-bottom:8px}
.stage .cust{width:62%;max-width:270px;justify-self:start;margin-left:6%}
.stage .trade{position:absolute;right:2%;bottom:38px;width:46%;max-width:210px;transition:transform .2s}
.stage .trade.buzz{animation:buzz .5s}
@keyframes buzz{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.tag{position:absolute;z-index:4;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;border-radius:999px;padding:6px 11px;white-space:nowrap}
.tag.t1{top:-12px;left:4%}
.tag.t2{bottom:calc(38px + min(46vw,210px)*2.164 - 10px);right:2%}
@media (max-width:900px){.tag.t2{display:none}}
.lock{background:var(--lock);color:var(--paper);display:flex;flex-direction:column;align-items:center;padding:34px 9px 10px;gap:8px}
.lock .time{font-weight:600;font-size:clamp(28px,4.4vw,40px);letter-spacing:-.03em;line-height:1}
.lock .date{font-size:10.5px;color:var(--d-muted);font-weight:600;margin-top:-2px}
.note{width:100%;background:rgba(247,243,238,.94);color:var(--ink);border-radius:12px;padding:8px 9px;font-size:9.6px;line-height:1.35;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .4s,transform .4s}
.note.on{opacity:1;transform:none}
.note .from{display:flex;justify-content:space-between;gap:6px;font-weight:800;font-size:9.6px;margin-bottom:2px}
.note .from small{font-weight:600;color:var(--muted);font-size:8.8px}
.note pre{margin:0;font:inherit;white-space:pre-wrap}
.lock .first{margin-top:6px}
.lock img.tmail{inset:0 0 auto 0;height:auto;object-fit:initial;opacity:0;transition:opacity .6s;z-index:5}
.lock img.tmail.on{opacity:1;animation:tread 7s ease-in-out .8s forwards}
@keyframes tread{to{transform:translateY(-38%)}}
@media (max-width:520px){.beats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.beats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:22px;width:100%}
.beat{border-top:3px solid var(--line);padding-top:8px;font-size:12.5px;font-weight:700;color:var(--muted);transition:border-color .3s,color .3s}
.beat.on{border-color:var(--orange);color:var(--ink)}

/* picker + player */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:9px 15px;font-weight:700;font-size:14.5px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.dim{color:var(--muted);font-weight:600}
.demo{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:820px){.demo{grid-template-columns:minmax(0,1fr);justify-items:center}}
.player{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:300px}
.player .tagx{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.player .scr{cursor:pointer}
.ctrl{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.ctrl button{border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:8px 12px;font-weight:800;font-size:13px;white-space:nowrap}
.ctrl button.fill{background:var(--ink);color:var(--paper)}
.ctrl button:disabled{opacity:.35;cursor:default}
.ctrl span{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ph{display:grid;place-items:center;text-align:center;padding:24px;height:100%;background:var(--paper-2);color:var(--muted);font-weight:600;font-size:14px}
.endline{font-weight:800}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 36px}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:minmax(0,1fr)}}
.tile{display:flex;flex-direction:column;gap:10px}
.ico{width:36px;height:36px;stroke:var(--orange);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* what lands */
.lands{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:860px){.lands{grid-template-columns:minmax(0,1fr)}}
.lands-vis{position:relative;display:flex;justify-content:flex-end;padding-top:20px;padding-right:4%}
.lands-vis .phone{max-width:270px}
.mail img{object-fit:cover;object-position:top;height:auto!important;bottom:auto!important;animation:read 22s ease-in-out infinite alternate}
@keyframes read{0%,12%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 560px))}}
.bubble{position:absolute;left:0;top:60px;z-index:2;max-width:230px;background:var(--white);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 14px;font-size:13px;line-height:1.4;box-shadow:0 18px 40px rgba(16,16,16,.12)}
.bubble b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bubble pre{margin:0;font:600 13px/1.45 var(--font);white-space:pre-wrap}
@media (max-width:620px){.bubble{position:relative;top:0;max-width:none;margin-bottom:16px}.lands-vis{flex-direction:column;align-items:center;padding-right:0}}
.checks{list-style:none;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-weight:600}
.checks svg{width:22px;height:22px;stroke:var(--orange-ink);fill:none;stroke-width:2;margin-top:2px}

/* price strip, steps */
.strip{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between}
.big{font-weight:800;font-size:clamp(3rem,7vw,5rem);line-height:.9;letter-spacing:-.04em}
.big span{font-size:.33em;letter-spacing:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.step .n{font-weight:800;color:var(--orange-ink)}
.vis{height:190px;border-radius:20px;background:var(--white);border:1px solid var(--line);overflow:hidden;position:relative}
.ratecard{padding:16px 18px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.ratecard .t{font-weight:800;display:flex;justify-content:space-between;gap:8px}
.ratecard .t small{font-weight:700;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ratecard .r{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:7px;font-variant-numeric:tabular-nums}
.ratecard .r b{font-weight:800}
.ratecard .r.on{color:var(--orange-ink)}
.vis.ph-vis{display:flex;justify-content:center;padding-top:18px;background:var(--paper)}
.vis.ph-vis .phone{width:150px;border-radius:26px;padding:6px}
.vis.ph-vis .phone::before{top:11px;width:40px;height:10px;margin-left:-20px}
.vis.ph-vis .scr{border-radius:21px}
.code{background:var(--ink);color:#e9e2d8;padding:16px;font:500 11.5px/1.6 var(--mono);height:100%;overflow:auto;border-radius:0}
.code .k{color:#ff9a5c}
.code .c{color:#8f877d}
.count{font-weight:800;font-size:1.1rem}

/* pricing */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:transform .15s}
.card:hover{transform:translateY(-2px)}
.card.feat{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.feat .muted{color:var(--d-muted)}
.card.feat .eyebrow{color:var(--orange)}   /* Lighthouse 14 Oct: --orange-ink on ink was 3.46:1; brand orange on ink is 5.91:1 */
.amt{font-weight:800;font-size:3rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.amt small{font-size:1rem;font-weight:600;letter-spacing:0}
.card ul{padding-left:1.1em;display:flex;flex-direction:column;gap:6px}
.card .btn{margin-top:auto;align-self:flex-start}
.help{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;border:2px solid var(--ink);border-radius:20px;padding:28px}
@media (max-width:620px){.help{grid-template-columns:minmax(0,1fr)}}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:760px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc input[type=range]{width:100%;accent-color:var(--orange);height:28px}
.calc .out{font-weight:800;font-size:clamp(2.6rem,6vw,4rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.calc .out small{font-size:1rem;font-weight:600;letter-spacing:0}
.pips{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin-top:6px}
.pips i{height:22px;border-radius:3px;background:var(--line);transition:background .2s}
.pips i.on{background:var(--orange)}
.pips i.b1{border-bottom:3px solid var(--ink)}
.bands-key{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}
.incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
@media (max-width:860px){.incl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.incl{grid-template-columns:minmax(0,1fr)}}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 44px}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}
.faq div{display:flex;flex-direction:column;gap:6px}

/* trade page */
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{text-decoration:none}
.thero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
@media (max-width:860px){.thero{grid-template-columns:minmax(0,1fr)}}
.example{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;max-width:460px}
.example .p{font-weight:800;font-size:2.1rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.example dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0;font-size:14px}
.example dt{color:var(--muted)}
.example dd{margin:0;font-weight:600}
.asks{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:q}
@media (max-width:860px){.asks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.asks{grid-template-columns:minmax(0,1fr)}}
.asks li{counter-increment:q;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:baseline;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700;font-size:15px}
.asks li::before{content:counter(q);font-weight:800;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.awk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
@media (max-width:900px){.awk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.awk{grid-template-columns:minmax(0,1fr)}}
.awk .ill{width:72px;height:72px;stroke:var(--orange);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.awk .ill .soft{stroke:var(--d-muted)}
.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:760px){.gains{grid-template-columns:minmax(0,1fr)}}
.rel{display:flex;flex-wrap:wrap;gap:10px}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* notes */
.notes{max-width:760px}
.notes h3{margin-top:12px}
.notes ul{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}

footer{background:var(--ink);color:var(--d-muted);font-size:14px}
footer .w{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-block:56px}
@media (max-width:760px){footer .w{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer b{color:var(--paper);display:block;margin-bottom:8px}
footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
footer .legal{grid-column:1/-1;border-top:1px solid var(--d-line);padding-top:20px;font-size:13px}

/* onboarding + report + all tools */
.onb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:var(--paper-2);border-radius:20px;padding:32px}
@media (max-width:760px){.onb{grid-template-columns:minmax(0,1fr);padding:24px}}
.ratefill{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgba(16,16,16,.08)}
.rf-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:14px}
.rf-head span{color:var(--muted);font-size:12px;font-weight:700}
.rf-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;align-items:center;font-size:14px;font-weight:600}
.rf-row i{font-style:normal;height:36px;border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rf-row i.typing{border-color:var(--orange)}
.rf-row i.typing::after{content:"";display:inline-block;width:2px;height:15px;background:var(--orange);margin-left:2px;vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rf-done{display:flex;gap:8px;align-items:center;font-weight:800;font-size:14px;color:var(--ok,#1f7a3a);opacity:0;transition:opacity .4s}
.rf-done.on{opacity:1}
.rf-done svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
.report{background:#1b1916;border:1px solid var(--d-line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
.rp-head{display:flex;justify-content:space-between;font-size:14px}
.rp-head span{color:var(--d-muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rp-row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center;font-size:14px;font-weight:700}
.rp-row i{display:block;height:18px;border-radius:4px;background:var(--d-muted);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.rp-row i.hot{background:var(--orange)}
.report.on .rp-row i{width:var(--w)}
.rp-foot{font-size:12.5px;color:var(--d-muted)}
.grp-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.grp-t{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.grp-t h2{margin:0}
.grp-h span{font-size:13px;font-weight:700;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.ttile{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:transform .15s,border-color .15s}
.ttile:hover{transform:translateY(-2px);border-color:var(--ink)}
.ttile b{font-size:16.5px;font-weight:800;display:flex;justify-content:space-between;gap:8px}
.ttile b::after{content:"Try it →";font-size:12.5px;color:var(--orange-ink);white-space:nowrap}
.ttile span{font-size:14px;color:var(--muted);line-height:1.45}
dialog.demo-dlg{border:0;border-radius:24px;padding:20px 18px 16px;background:var(--paper);color:var(--ink);max-width:min(360px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 24px);overflow:auto}
dialog.demo-dlg::backdrop{background:rgba(16,16,16,.6)}
.dlg-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.dlg-top button{border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:6px 12px;font-weight:800;font-size:13px}
dialog.demo-dlg .phone{max-width:250px}
.mailapp{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(16,16,16,.10);max-width:760px;width:100%}
.mail-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.mail-tabs button{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.mail-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mail-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px 20px;margin:0;border-bottom:1px solid var(--line);font-size:14px}
.mail-meta dt{color:var(--muted)}
.mail-meta dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.mail-meta .subj{grid-column:1/-1;font-weight:800;font-size:17px;margin-bottom:4px;color:var(--ink)}
.mail-meta .att{display:flex;gap:6px;flex-wrap:wrap}
.mail-meta .att span{border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-size:13px}
.mail-photos{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.mail-photos figure{display:flex;flex-direction:column;gap:5px}
.mail-photos img{border-radius:8px;border:1px solid var(--line);width:100%;height:auto}
.mail-photos figcaption{font-size:12px;color:var(--muted);font-weight:600}
@media (max-width:520px){.mail-photos figcaption{font-size:10.5px}}
.mail-body{max-height:620px;overflow:auto;background:#2c2c2c}
.mail-body img{width:100%;max-width:640px;margin:0 auto;height:auto}

/* pass 2 */
.beat-line{display:none;font-weight:700;font-size:15px;margin-top:18px}
@media (max-width:620px){.beats{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:18px}.beat{font-size:0;line-height:0;padding-top:0}.beat-line{display:block;margin-top:10px;min-height:2.6em}}   /* phones: five step bars, the current step written underneath (owner, 14 Oct) */
.lands2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
@media (max-width:860px){.lands2{grid-template-columns:minmax(0,1fr)}}
.small-phone{max-width:240px}
.lock.lg .note{font-size:12px;padding:10px 11px}
.lock.lg .note .from{font-size:11.5px}
.lock.lg .note.on{opacity:1;transform:none}
.mail-body{max-height:none;overflow:hidden;position:relative}
.mail-body:not(.open){max-height:520px}
.mail-body:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(44,44,44,0),#2c2c2c)}
.mail-more{display:block;width:100%;border:0;border-top:1px solid var(--line);background:var(--white);padding:14px;font-weight:800;font-size:14.5px}
.mail-more:hover{background:var(--paper)}
.embed-vis{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--paper);padding:16px}
.mini-site{width:58%;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.ms-bar{display:flex;gap:4px}.ms-bar i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.ms-line{height:7px;border-radius:4px;background:var(--paper-2)}.w60{width:60%}.w40{width:40%}
.ms-btn{align-self:flex-start;background:var(--firm);color:var(--white);font-weight:800;font-size:12px;border-radius:999px;padding:7px 12px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(47,93,80,.15)}}
.ms-link{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--orange-ink);text-align:center}
.ms-link svg{width:30px;height:30px;stroke:var(--orange-ink);fill:none;stroke-width:1.75;stroke-linecap:round}
.tooldef{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;padding:12px 16px;max-width:60ch;font-size:15.5px}
mark.todo{background:#ffe6c9;color:var(--ink);padding:0 4px;border-radius:4px}
.count a{color:var(--orange-ink)}

.floorbg{justify-self:stretch;display:flex;justify-content:center;padding:28px 16px;border-radius:24px;background:#3a332d url(/assets/img/ph/flooring-tall-1200.webp) center 40%/cover no-repeat;background-image:image-set(url(/assets/img/ph/flooring-tall-1200.avif) type("image/avif"),url(/assets/img/ph/flooring-tall-1200.webp) type("image/webp"));position:relative;overflow:hidden}
.floorbg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.10),rgba(16,16,16,.38))}
.rp-row em{font-style:normal;justify-self:start;color:var(--d-muted);border:1px dashed #514a43;border-radius:6px;padding:3px 10px;font-size:12.5px;font-weight:600}
.rp-own{font-weight:800;font-size:14px;color:var(--paper)}
.trial{font-weight:700}
.trial a{color:var(--orange-ink)}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}
/* photos (D648) */
.photoband{position:relative;padding-top:0}
.pb-img{display:block;position:relative;height:clamp(260px,44vw,560px);overflow:hidden;margin-bottom:-56px}
.pb-img img{width:100%;height:100%;object-fit:cover;object-position:60% 80%}
.pb-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(16,16,16,.25) 16%,rgba(16,16,16,.2) 50%,rgba(16,16,16,.85) 86%,var(--ink) 100%),linear-gradient(90deg,var(--ink) 0%,rgba(16,16,16,0) 14%,rgba(16,16,16,0) 86%,var(--ink) 100%)}
.photoband>.w{position:relative}
@media (max-width:860px){.pb-img{margin-bottom:-36px}}
.grp-h{align-items:center}
.grp-ph{width:168px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;flex:none;background:var(--paper-2)}
.grp-ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.grp-ph{width:112px;border-radius:10px}}

.floorbg .player{position:relative}
.floorbg .player .tagx,.floorbg .player .cap{background:rgba(247,243,238,.9);border-radius:999px;padding:4px 10px;color:var(--ink)}

/* header: sticky, mega menu, mobile menu */
.hdr{position:sticky;top:0;z-index:55}
.hdr.scrolled{box-shadow:0 6px 20px rgba(16,16,16,.08)}
.nav{align-items:center;gap:18px;white-space:nowrap}
.nav a,.dd-btn{white-space:nowrap}
.hdr-cta{white-space:nowrap;flex:none}
.nav a,.dd-btn{position:relative;padding-block:6px}
.nav a.on::after,.dd-btn.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange)}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font-weight:600;font-size:15px;color:var(--ink)}
.dd-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .2s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-40%);width:min(860px,calc(100vw - 40px));background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px rgba(16,16,16,.14);padding:22px 24px 14px}
.mega-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.mg{display:flex;flex-direction:column;gap:7px;font-size:14px}
.mg b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:2px;white-space:normal;line-height:1.3}
.mg a{font-weight:600;text-decoration:none;padding:0;white-space:normal;line-height:1.3}
.mg a:hover,.mega-foot a:hover{color:var(--orange-ink)}
.mega-foot{display:flex;gap:20px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-weight:800;font-size:14px}
.mega-foot a{text-decoration:none}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob{border-top:1px solid var(--line);background:var(--paper);max-height:calc(100dvh - 92px);overflow:auto}
.mob-in{display:flex;flex-direction:column;padding:8px 20px 24px}
.mob-in > a,.mob-in summary{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer}
.mob-in summary{list-style:none}
.mob-in summary::-webkit-details-marker{display:none}
.mob-in summary::after{content:"+";float:right;font-weight:800;color:var(--orange-ink)}
.mob-in details[open] summary::after{content:"–"}
.mob-trades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:10px 0 14px;border-bottom:1px solid var(--line)}
.mob-trades a{padding:7px 0;font-weight:600;font-size:15px;text-decoration:none}
.mob-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
@media (max-width:1380px){.hdr-cta .long{display:none}}
@media (max-width:1100px){.nav{display:none}.burger{display:flex}.hdr .w{gap:12px}.hdr-cta{margin-left:auto}}
@media (max-width:420px){.hdr-cta{padding:11px 13px;font-size:13px}}
section{scroll-margin-top:150px}


/* ---------- full site additions (D659) ---------- */
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.hdr .logo img{width:100%;height:auto}
.prose{max-width:720px}
.prose h2{font-weight:800;font-size:1.6rem;letter-spacing:-.02em;margin-top:36px;margin-bottom:10px}
.prose h3{font-weight:800;font-size:1.15rem;margin-top:24px;margin-bottom:6px}
.prose p,.prose li{color:var(--ink);margin-bottom:12px}
.prose ul,.prose ol{padding-left:1.2em;margin-bottom:12px}
.prose a{color:var(--orange-ink)}
.prose table{border-collapse:collapse;width:100%;margin:12px 0;font-size:15px}
.prose td,.prose th{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-src{font-size:15.5px}
.form{display:grid;gap:14px;max-width:560px}
.form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.form label small{font-weight:600;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:8px;padding:11px 12px;background:var(--white);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--ink)}
.form .hp{position:absolute;left:-5000px}
.form .choice{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.form .choice input{width:auto;margin-top:4px}
.form .note{font-size:13px;color:var(--muted)}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.form legend{font-weight:700;font-size:15px;margin-bottom:4px}
.formmsg{display:none;border-left:4px solid var(--orange);background:var(--white);padding:12px 16px;border-radius:8px}
.formmsg.on{display:block}
.snapnote{background:#fff4e6;border:1px solid #f3d3a8;border-radius:10px;padding:10px 14px;font-size:14px}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.cards3{grid-template-columns:minmax(0,1fr)}}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px}
.trade-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.trow{display:flex;flex-direction:column;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.trow-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.trow h3{font-size:18px;font-weight:800}
.trow h3 a{text-decoration:none}
.trow h3 a:hover{color:var(--orange-ink)}
.trow-link{font-weight:800;font-size:14px;color:var(--orange-ink);text-decoration:none;white-space:nowrap}
.trow .acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.trylabel{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px}
.trow .chip{font-size:14px;padding:8px 13px}
.trow .chip:hover{border-color:var(--ink)}
.tgroup{display:flex;flex-direction:column;gap:12px}
.awk .ico{width:44px;height:44px}
.toolpick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:340px}
.toolpick .chip{font-size:13px;padding:7px 12px}
.floorbg.ph-bg{background-size:cover;background-position:center}
.e404{min-height:50vh;display:flex;align-items:center}
/* demo controls stay readable over trade-page photos */
.floorbg .ctrl{background:rgba(247,243,238,.94);border-radius:999px;padding:6px;box-shadow:0 6px 18px rgba(16,16,16,.18)}
.floorbg .ctrl span{color:var(--ink)}
.floorbg .ctrl button:disabled{opacity:.3}
.floorbg .player .cap{max-width:300px;text-align:center}

/* preview notice (preview only) */
.rbar{background:#26221e;color:var(--paper);font:600 13px/1.3 var(--font)}
.rbar .w{padding-block:8px}

/* D663: the Q mark, always on a cream disc, colours unchanged */
.qdisc{display:inline-grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;background:var(--paper)}
.qdisc img{width:74%;height:74%;display:block}
.qdisc.lgq{width:112px;height:112px}
.fbrand{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding-bottom:24px;border-bottom:1px solid var(--d-line)}
.fbrand p{margin:0;color:var(--paper);font-weight:700;font-size:1.15rem;line-height:1.3}
.fbrand p span{display:block;color:var(--d-muted);font-weight:500;font-size:15px}
.cta-h{display:flex;align-items:center;gap:22px}
@media (max-width:600px){.qdisc{width:60px;height:60px}.qdisc.lgq{width:92px;height:92px}.cta-h{gap:16px}}
.qbig{width:128px;height:128px;background:none;border-radius:0}
.qbig img{width:100%;height:100%}

/* photo bands between two light sections fade into the page (D667) */
.pb-light .pb-img{margin-bottom:0}
.pb-light .pb-img img{filter:brightness(.92) saturate(.95)}
.pb-light .pb-img::after{background:linear-gradient(180deg,var(--paper) 0%,rgba(247,243,238,0) 20%,rgba(247,243,238,0) 78%,var(--paper) 100%),linear-gradient(90deg,var(--paper) 0%,rgba(247,243,238,0) 16%,rgba(247,243,238,0) 84%,var(--paper) 100%)}

/* D669: plain Q beside the price line, light backgrounds only */
.qp{display:flex;align-items:center;gap:.22em;flex-wrap:wrap}
.qp .qm{width:.78em;height:.78em;flex:none}
.out.qp .qm{width:1.1em;height:1.1em}
.big .qpt{font-size:1em;font-weight:inherit;color:inherit;letter-spacing:inherit}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the Trades page as cards, and the home picker as equal tiles (owner, 14 Oct: "clunky"; "equal size buttons") ---- */
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.tcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,16,16,.08)}
.tcard-ph{display:block;aspect-ratio:16/9;background:#3a332d;overflow:hidden}
.tcard-ph img{width:100%;height:100%;object-fit:cover;display:block}
.tcard-b{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.tcard h3{font-size:19px;font-weight:800;line-height:1.25}
.tcard h3 a{text-decoration:none}
.tcard h3 a:hover{color:var(--orange-ink)}
.tcard p{font-size:14.5px;line-height:1.5;flex:1}
.tcard-acts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.btn-sm{padding:10px 18px;font-size:14.5px}
.tlink{font-weight:800;font-size:14px;color:var(--orange-ink);text-decoration:none;white-space:nowrap}
.tlink:hover{text-decoration:underline}
.dlg-tools{justify-content:center;margin:2px 0 14px}
.dlg-tools .chip{font-size:13.5px;padding:7px 12px}
.picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:1000px){.picks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.picks .chip{border-radius:14px;padding:12px 14px;min-height:58px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:1.25;transition:border-color .15s,transform .15s}
.picks .chip:hover{border-color:var(--ink);transform:translateY(-1px)}
@media (max-width:420px){.picks{gap:8px}.picks .chip{font-size:14.5px;min-height:54px;padding:10px}}
.pick-all{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;border-radius:14px;min-height:58px;padding:12px 14px;background:transparent;border:1.5px solid var(--orange);color:var(--orange-ink);font-weight:800;font-size:15px;text-decoration:none;transition:transform .15s,background .15s}
.pick-all:hover{transform:translateY(-1px);background:var(--white)}
/* Guides (D681) */
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.gcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.gcard h2 a{text-decoration:none}.gcard h2 a:hover{color:var(--orange-ink)}
.gdraft{color:#9a3412}
.gdraftbar{background:#fff7ed;border-bottom:1px solid #fed7aa;color:#9a3412;font-weight:700;font-size:14px;padding:8px 0}
.crumbs a{color:inherit}
.guide{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,4vw,44px);margin-inline:auto}
.guide h2:first-child{margin-top:0}
.sources li{margin-bottom:6px;overflow-wrap:anywhere}
@media (max-width:600px){.prose table{display:block;overflow-x:auto}}