/* The home page. A dark hero that continues the header; then either the type chooser (no type yet)
   or the latest ads and gear of the visitor's type. Hover lifts; nothing spins. */
/* ---- the hero: full-width banners, one at a time (his call 2026-10-14; they were two side-by-side panels
   652px tall, mockup B of 2026-10-05), then the search in a red band under them. Every banner is the words on
   the left of the page's own column and its drawing on the right; phones put the drawing under the words. ---- */
.hcar{position:relative;overflow:hidden}
/* the banners share one grid cell, so the row is as tall as the tallest; each slides by --o widths (-1 left,
   0 in place, 1 right). The one going out stays visible until its slide ends, then hides (focus and the
   accessibility tree included). */
.hslides{display:grid}
.hslide{grid-area:1 / 1;min-width:0;display:flex;transform:translateX(calc(var(--o,1) * 100%));visibility:hidden;transition:transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}
.hslide.on{visibility:visible;transition:transform .6s cubic-bezier(.65,0,.35,1),visibility 0s}
.hsw{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:48px;min-height:326px;padding-top:22px;padding-bottom:38px}
.hst{min-width:0}
.hsg{display:flex;justify-content:center;align-items:center;position:relative}
.hero .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--brand)}
.hero h1,.hero h2{font-size:36px;line-height:1.06;letter-spacing:-.025em;margin:12px 0 0;color:var(--ink);text-wrap:balance}
.hero h1 em,.hero h2 em{font-style:normal;color:var(--brand)}
.hero .hst p{font-size:15.5px;color:var(--muted);max-width:540px;margin-top:12px;text-wrap:pretty}
.hero .hbgo{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.hero .hbgo span{font-size:13.5px;color:var(--muted)}
.hero .sellbtn{height:46px;padding:0 20px;font-size:14.5px;border-radius:12px;flex:0 0 auto}
.hs-sell{background:#fff}
.hs-safe{background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.45) 0 1px,transparent 1px 5px),linear-gradient(160deg,#1e222a,#13161a);color:#fff}
.hs-safe .eyebrow{color:var(--brand-lite)}
.hs-safe h2{color:#fff;max-width:560px}
.hs-safe h2 em{color:var(--brand-lite)}
.hs-safe .hst p{color:rgba(255,255,255,.72);max-width:470px}
/* the red glow sits behind the radar, wherever the radar is */
.hs-safe .hsg::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(244,34,0,.24) 0,rgba(244,34,0,0) 62%);pointer-events:none}
/* the dots, inside the bottom edge: dark on a light banner, light on a dark one, the current one a red pill.
   Each is a 24px target around an 8px dot. */
.hdots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:2px;z-index:2}
.hdots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:12px}
.hdots button::before{content:"";width:8px;height:8px;border-radius:4px;background:rgba(31,35,41,.24);transition:width .3s,background-color .3s}
.hdots button:hover::before{background:rgba(31,35,41,.45)}
.hdots button[aria-current="true"]::before{width:22px;background:var(--brand)}
.hcar[data-tone="dark"] .hdots button::before{background:rgba(255,255,255,.32)}
.hcar[data-tone="dark"] .hdots button:hover::before{background:rgba(255,255,255,.6)}
.hcar[data-tone="dark"] .hdots button[aria-current="true"]::before{background:var(--brand-lite)}
.hdots button:focus-visible{outline:2px solid #aeb4be;outline-offset:0}
@media (prefers-reduced-motion:reduce){.hslide,.hslide.on{transition:none}.hdots button::before{transition:none}}
/* the drawings at banner size: the fan at its phone scale, the radar at 270 */
.hero .fanbox{width:335px;height:234px;margin:22px 0 0}
.hero .fan{transform:scale(.78);transform-origin:0 0}
.hero .radar{--s:270px;margin:0}
/* the ratings banner (his call 2026-10-14): a warm wash so it is not a second white banner; the drawing is the
   fan's 430x300 design at the fan's scale: two source cards feeding a profile card. */
.hs-rep{background:radial-gradient(520px 300px at 82% 50%,rgba(244,34,0,.10),rgba(244,34,0,0) 70%),linear-gradient(115deg,#fff 0%,#fff 38%,#fff5f1 100%)}
.hero .repbox{width:335px;height:234px;margin:10px 0 0}
.repd{position:relative;width:430px;height:300px;transform:scale(.78);transform-origin:0 0}
.repd svg{position:absolute;inset:0;width:100%;height:100%}
.repd .rsrc{position:absolute;left:0;width:166px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 14px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.repd .rl{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#1a1d23}
.repd .rl i{width:13px;height:13px;border-radius:50%;background:#1877f2;flex:0 0 auto}
.repd .rl i.f{background:#686868;border-radius:3px}
.repd .rv{margin-top:6px;font-size:14px;font-weight:600;color:var(--muted);line-height:1}
.repd .rv b{font-size:22px;font-weight:800;color:#1a1d23;margin-right:3px}
.repd .rs{margin-top:5px;font-size:11.5px;color:var(--faint);white-space:nowrap}
.repd .rprof{position:absolute;left:248px;top:50px;width:182px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 14px 12px;box-shadow:0 12px 32px rgba(0,0,0,.09)}
.repd .rprof .lbl{position:absolute;left:0;top:-28px;width:182px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:#8a9099}
.repd .rph{display:flex;align-items:center;gap:10px}
.repd .rph .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ffd9d0,#ff6a4d);flex:0 0 auto}
.repd .rph .bars{flex:1;display:flex;flex-direction:column;gap:7px}
.repd .rph .bars i{display:block;height:9px;border-radius:5px;background:#1a1d23;width:82%}
.repd .rph .bars i + i{height:7px;background:#cfd3da;width:55%}
.repd .rrow{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;color:var(--muted)}
.repd .rrow b{color:#1a1d23;font-weight:800;margin-right:4px}
.repd .vb{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;background:var(--live-bg,#e9f5ee);border:1px solid #bfe0cd;color:var(--live,#1f9254);font-size:10px;font-weight:800;letter-spacing:.07em}
.repd .vb svg{position:static;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.hero .repbox{width:258px;height:180px;margin:12px 0 0}.repd{transform:scale(.6)}}
/* the forcefield: a 600-unit drawing scaled to --s, positions in percentages */
.radar{--s:400px;position:relative;width:var(--s);height:var(--s);margin:14px 0 18px;flex:0 0 auto}
.radar svg{position:absolute;inset:0;width:100%;height:100%}
.radar .rsweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,rgba(255,106,77,0) 0deg,rgba(255,106,77,0) 250deg,rgba(255,106,77,.35) 360deg);-webkit-mask:radial-gradient(circle,transparent 0 calc(var(--s)*.157),#000 calc(var(--s)*.16) calc(var(--s)*.357),transparent calc(var(--s)*.36));mask:radial-gradient(circle,transparent 0 calc(var(--s)*.157),#000 calc(var(--s)*.16) calc(var(--s)*.357),transparent calc(var(--s)*.36))}
.radar .rdisc{position:absolute;left:34.2%;top:34.2%;width:31.6%;height:31.6%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 calc(var(--s)*.016) rgba(244,34,0,.18),0 0 calc(var(--s)*.12) rgba(244,34,0,.45),0 calc(var(--s)*.04) calc(var(--s)*.1) rgba(0,0,0,.55)}
.radar .rdisc img{width:66%;height:auto;margin-top:2%}
/* the fan: one ad, five places it goes */
/* the fan keeps a 430x300 drawing; on a phone the BOX shrinks to 335x234 and the drawing scales to fit it, so
   the page never lays out wider than the screen (a scaled box still takes its full width otherwise) */
.fanbox{width:430px;height:300px;margin:22px 0 6px}
.fan{position:relative;width:430px;height:300px}
.fan svg{position:absolute;inset:0;width:100%;height:100%}
.fan .fad{position:absolute;left:0;top:92px;width:150px;height:118px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.fan .fad .ph{height:48px;border-radius:8px;background:linear-gradient(135deg,#ffd9d0,#ff6a4d);display:flex;align-items:center;justify-content:center}
.fan .fad .ph img{width:44px;height:auto;filter:brightness(1.8) saturate(.2) contrast(1.2)}
.fan .fad .t{margin-top:9px;height:9px;border-radius:5px;background:#1a1d23;width:80%}
.fan .fad .m{margin-top:7px;height:7px;border-radius:4px;background:#cfd3da;width:55%}
.fan .fad .lbl{position:absolute;left:0;top:-28px;width:150px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:#8a9099}
.fan .fnode{position:absolute;left:290px;width:132px;height:40px;border-radius:999px;background:#f5f6f8;border:1.5px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14.5px;font-weight:700;color:#1a1d23}
.fan .fnode i{width:15px;height:15px;border-radius:50%;background:#1877f2;flex:0 0 auto}
.fan .fnode i.m{background:#f42200;border-radius:4px}
.fan .fnode i.f{background:#686868;border-radius:4px}
/* the band: the safe-place sentence and the wish line left, the search right. The search has its OWN
   submit, "Go", inside the field in charcoal (his report 2026-09-23: Sell beside it read as a submit). */
.hband{background:var(--brand);color:#fff}
.hband .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 20px 18px}
.hbt{font-size:17px;font-weight:500}
.hbt b{font-weight:800}
.hband .go{flex:0 1 480px;min-width:0}
.hband .go .hs{position:relative}
.hband .go input{width:100%;height:46px;padding:0 70px 0 42px;border:0;border-radius:12px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.hband .go input::placeholder{color:var(--faint)}
.hband .go input:focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.hband .go svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint)}
.hband .go .gobtn{position:absolute;right:5px;top:5px;bottom:5px;padding:0 16px;border:0;border-radius:9px;background:var(--charcoal);color:#fff;font:700 14px/1 Inter,sans-serif;letter-spacing:.02em;cursor:pointer}
.hband .go .gobtn:hover{background:#000}
.wishline{display:inline-flex;align-items:center;gap:9px;margin-top:8px;font-size:13px;color:rgba(255,255,255,.85);text-decoration:none}
.wishline:hover{color:#fff;text-decoration:underline}
.wishline b{color:#fff;font-weight:700}
.wishline svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:#fff;stroke-width:2}

/* ---- gear strip ---- */
.gear{margin-top:40px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sh h2{font-size:20px}
/* the world word in a section head wears the brand red */
.sh h2 .tw{font-style:normal;color:var(--brand)}
.sh a{font-size:13px;color:var(--brand-ink);font-weight:600;text-decoration:none;white-space:nowrap}
.sh .shlinks{display:flex;gap:16px;align-items:baseline}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.gtile{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13px;min-width:0;min-height:44px}
.gtile:hover{border-color:var(--hover-line);box-shadow:var(--shadow)}
.gtile svg{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--brand-ink)}
.gtile span{flex:1;min-width:0;line-height:1.25}
.gtile .n{flex:0 0 auto;font-weight:600;color:var(--muted);font-size:12px;background:var(--chip);border-radius:6px;padding:1px 6px}

/* ---- latest ---- */
.sec{margin-top:40px}
.sec .sh{margin-bottom:14px}
.tile.cta{border:1px dashed var(--line-2);background:transparent}
.tile.cta:hover{box-shadow:none;border-color:var(--brand);background:#fff}
.tile.cta .ph{background:var(--brand-soft)}
.tile.cta .ph .noimg{color:var(--brand-ink)}
.tile.cta .ph svg{width:34px;height:34px;stroke:var(--brand-ink);fill:none;stroke-width:2;stroke-linecap:round}
.tile.cta .pr{font-size:15px}
.tile.cta .nm{font-weight:500;color:var(--muted);min-height:0}

/* ---- the closing band ---- */
.sellband{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:radial-gradient(700px 300px at 90% 0%,rgba(244,34,0,.2),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.075) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.45) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 10px,transparent 10px 20px),repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px),var(--charcoal);color:#fff;border-radius:18px;padding:28px 30px;flex-wrap:wrap}
.sellband h2{font-size:22px;letter-spacing:-.02em;color:#fff;max-width:620px;text-wrap:balance}
.sellband p{color:rgba(255,255,255,.7);margin-top:6px;font-size:14px;max-width:560px}
.sellband .btn{height:46px;padding:0 22px;font-size:14.5px;border-radius:12px}

@media (max-width:900px){
  /* the words, then the drawing under them, smaller */
  .hsw{grid-template-columns:1fr;row-gap:16px;min-height:0;align-content:center;padding-top:22px;padding-bottom:42px}
  .hsg{justify-content:flex-start}
  .hero h1,.hero h2{font-size:28px}
  .hero .hst p{font-size:15px}
  .hero .hbgo{margin-top:14px}
  .hero .radar{--s:190px}
  .hs-safe .hsg::before{width:400px;height:400px}
  .hero .fanbox{width:258px;height:180px;margin:20px 0 0}
  .hero .fan{transform:scale(.6)}
  .hband .wrap{flex-direction:column;align-items:stretch;gap:12px;padding:16px 20px}
  .hbt{font-size:15.5px}
  .hband .go{flex:none}
  .wishline{align-items:flex-start;line-height:1.4}
  .wishline svg{margin-top:2px}
  .sec.first{margin-top:26px}
  .gear,.sec{margin-top:32px}
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gtile{font-size:12.5px;padding:9px 10px}
  .sellband{padding:22px 20px}
  .sellband .btn{width:100%}
}