*{box-sizing:border-box}
:root{
  color-scheme:light;
  --orange:#FF8000;
  --orange-soft:rgba(255,128,0,.16);
  --accent:#A85A00;
  --bg:#ffffff;
  --surface:#F6F6F7;
  --card:#ffffff;
  --ink:#0B0B0C;
  --muted:#55555C;
  --line:#E4E4E8;
  --grid:#ECECF0;
  --chart-mute:#9AA0A6;
  --tint-finance:#FFF1DE;
  --tint-tools:#E9F1FD;
  --tint-templates:#F0EAFB;
  --tint-shop:#E8F5ED;
  --header-bg:rgba(11,11,12,.88);
  --shadow:0 12px 32px rgba(11,11,12,.10);
  --radius:14px;
  --font-d:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-m:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-b);font-variant-numeric:tabular-nums;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-d);line-height:1.18;letter-spacing:-.01em}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;padding:12px 18px;margin:0;overflow:visible;clip:auto;white-space:normal;background:var(--ink);color:#fff;font-weight:700;z-index:200;border-radius:10px}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.block{padding:72px 0}
/* ---------- header (black glass, scheme-independent) ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
/* ---------- header controls: translate code selector + search toggle,
   in the main header row at the right end of the nav ---------- */
html{scroll-padding-top:76px}
.head-controls{display:inline-flex;align-items:center;gap:16px;flex:none}
/* Wikipedia-style language selector: the visible control is only the
   current language code with a chevron. It opens our own dropdown
   (rendered from a built-in copy of the full language list); the Google
   Translate gadget stays hidden off-screen as the translation engine
   only and is never a click target or a menu source. */
.translate-widget{position:relative;display:inline-flex;align-items:center;line-height:1}
.translate-toggle{display:inline-flex;align-items:center;background:none;border:0;padding:3px 2px;cursor:pointer;font:inherit;line-height:1}
.translate-code{display:inline-flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.62);pointer-events:none}
.translate-code .ic{color:rgba(255,255,255,.45);transition:transform .18s ease}
.translate-toggle:hover .translate-code,.translate-toggle:hover .translate-code .ic{color:#fff}
.translate-toggle[aria-expanded="true"] .translate-code{color:#fff}
.translate-toggle[aria-expanded="true"] .translate-code .ic{transform:rotate(180deg)}
#google_translate_element{position:absolute;left:-9999px;top:0;width:240px;height:48px;overflow:hidden;opacity:0;pointer-events:none}
.goog-te-gadget-icon{display:none!important}
.lang-menu{position:absolute;top:calc(100% + 8px);right:12px;width:340px;background:rgba(17,17,20,.98);border:1px solid rgba(255,255,255,.13);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:6px;z-index:80}
.lang-menu[hidden]{display:none}
.lang-list{max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.lang-list::-webkit-scrollbar{width:8px}
.lang-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.lang-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;border-radius:8px;padding:7px 9px;font-family:'Inter',sans-serif;font-size:.9rem;color:rgba(255,255,255,.75);text-align:left;cursor:pointer;line-height:1.25}
.lang-item:hover{background:rgba(255,255,255,.07);color:#fff}
.lang-item .lang-dot{flex:none;width:7px;height:7px;border-radius:50%;background:transparent}
.lang-item.is-active{color:#fff;font-weight:600}
.lang-item.is-active .lang-dot{background:#FF8000}
/* Real divider element between the pinned commons and the
   alphabetical list. The first version sat at 10% white on the
   near-black panel, about 1.2:1 contrast at 1px tall, which reads
   as no separator at all; this one is unmistakable. */
.lang-sep{display:block;flex:none;height:1px;background:rgba(255,255,255,.3);margin:9px 10px}
/* Google "Translated to..." banner. Diagnosis, from the gadget's
   own code (translate_a/element.js, build TE_20261014, and its
   el_main script and stylesheet): the current gadget never emits
   the retired .goog-te-banner-frame class at all, which is why
   the earlier class-based suppression missed it completely. The
   node it actually injects when a translation applies is a plain
   <div class="skiptranslate"> inserted as the first element of
   <body>, wrapping an <iframe class="VIpgJd-ZVi9od-ORHb-OEVmcd
   skiptranslate" src="#"> whose document carries the light-blue
   bar; the gadget's stylesheet positions that iframe fixed at
   top:0 with height:39px and z-index:10000001, so it covers the
   header and takes its clicks. The rules below target the real
   node (the wrapper as a direct child of body, the iframe's
   actual class), keep the retired selectors for older gadget
   builds, and are backed by the JavaScript banner guard in
   JS_SITE, which re-hides the node in any markup form whenever
   it appears. Switching languages and returning to English run
   through our own menu, never the banner. */
.goog-te-banner-frame,iframe.goog-te-banner-frame,#goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,body>div.skiptranslate{display:none!important;visibility:hidden!important;height:0!important;max-height:0!important}
body{top:0!important}
#goog-gt-tt{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
.search-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:3px 2px;color:rgba(255,255,255,.62);line-height:1;cursor:pointer}
.search-toggle:hover{color:#fff}
.search-toggle[aria-expanded="true"]{color:#FF8000}
/* ---------- site search: the icon opens the search card at the
   end of the header element. The input sits at the top of the
   card with the results below it, so the header row itself is
   pixel-static in every state. The card never covers content:
   on desktop it docks at the right under the header while the
   page content yields its width; on mobile it opens in flow
   under the header and pushes the content down. ------- */
.search-results{position:absolute;top:calc(100% + 8px);right:12px;width:340px;max-height:min(62vh,470px);background:rgba(17,17,20,.98);border:1px solid rgba(255,255,255,.13);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:12px 18px;display:none;z-index:80}
.search-results.is-open{display:flex;flex-direction:column}
.search-form{flex:none}
.search-input{display:block;width:100%;height:38px;box-sizing:border-box;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;font-family:'Inter',sans-serif;font-size:16px;outline:none}
.search-input:focus{border-color:#FF8000}
.search-input::placeholder{color:rgba(255,255,255,.45)}
.search-list{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.search-list:empty{display:none}
.search-list::-webkit-scrollbar{width:8px}
.search-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
/* Desktop card behavior: while a card is open, the main content
   and the footer yield the card's width (340px plus its 12px right
   offset and a 12px gutter), so the card never covers anything. */
@media (min-width:861px){
  main,.site-footer{transition:margin-right .25s ease}
  body.has-card main,body.has-card .site-footer{margin-right:364px}
}
/* Backdrop shelf: while a header card is open on desktop, the
   card's column (the 364px the content yields) gets the homepage
   hero's backdrop behind the near-black card, from under the
   header to the bottom of the viewport, so the card sits on the
   hero backdrop instead of on the plain white page area. Two
   layers build it, in the hero's own paint order (base, grid,
   glow, cubes):
   - .card-grid (z 54): a fixed, viewport-sized layer carrying
     the near-black #0B0B0C base and the blueprint grid (46px
     tiles, the hero's gradients and radial mask fade), masked
     to the card's column. It is viewport-sized because a grid
     inside the 364px shelf could never share the hero grid's
     phase: its origin would be the shelf's own top-left, and no
     CSS length can express the layout viewport's width (100vw
     includes the classic scrollbar, the shelf's column does
     not). This layer's origin is the viewport's top-left, and
     the script in JS_SITE sets --grid-pos from the hero's
     rendered rectangle, so its tiles coincide with the hero's
     rendered tiles and the grid runs continuously from the hero
     into the column at the top of the homepage.
   - .card-shelf (z 55): the hero's warm orange radial glow
     (.hero-home::after's recipe) and its drifting cubes
     (.drift .dbl, same keyframes) at their hero opacity.
   Both fade (the shelf also slides) with the same .25s ease as
   the content yield, hang below the header's stacking order
   (60) and the cards' (80), never take a click, and do not
   exist on mobile, where the panels open in flow. Both elements
   are emitted by card_shelf() as body children: the header's
   backdrop-filter would otherwise make the header a containing
   block and trap these fixed layers inside it. */
.card-grid{display:none}
@media (min-width:861px){
  .card-grid{display:block;position:fixed;inset:0;background:#0B0B0C;pointer-events:none;z-index:54;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;-webkit-mask-image:linear-gradient(to right,transparent calc(100% - 364px),#000 calc(100% - 364px));mask-image:linear-gradient(to right,transparent calc(100% - 364px),#000 calc(100% - 364px))}
  .card-grid::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:46px 46px;background-position:var(--grid-pos,0px 0px);-webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 90% 85% at 50% 40%,#000 30%,transparent 75%)}
  body.has-card .card-grid{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
}
.card-shelf{display:none}
@media (min-width:861px){
  .card-shelf{display:block;position:fixed;top:0;right:0;bottom:0;width:364px;overflow:hidden;pointer-events:none;z-index:55;opacity:0;visibility:hidden;transform:translateX(10px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
  .card-shelf::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 78% 30%,rgba(255,128,0,.14),transparent 65%)}
  body.has-card .card-shelf{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){.card-grid{transition:none}.card-shelf{transition:none}.card-shelf .dbl{animation:none}}
.sr-item{display:block;padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none}
.sr-item:last-child{border-bottom:0}
.sr-title{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#fff}
.sr-item:hover .sr-title{color:#FF8000}
.sr-ex{display:block;margin-top:5px;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.66)}
.sr-note{margin:0;padding:10px 2px;font-size:.9rem;color:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){.translate-code .ic{transition:none}}
/* Touch widths: 40px tap heights for both header controls and every
   row they open; the two panels open in flow under the header and
   push the content down. Header budget, measured by rendering (real
   Inter, 2026-10-18): the six items (brand, Menu, Maine Mood,
   About, EN, search) plus the wrap's gaps and padding total
   423.4px, so the row fits a 430px phone with about 7px to spare
   and its floor is about 424px. Below 424px the About link
   yields (John's call, 2026-10-18) through a max-width:423px
   rule placed after the nav block, which lets it win at equal
   specificity; an earlier max-width:560px attempt sat before
   the nav block, never took effect, and has been removed. The
   survey pill's icon also yields, at 560px. The 2026-10-18
   rebalance took horizontal padding out of
   the right cluster (About, EN, search) and gave it to the Menu
   and Maine Mood pills, so the glyph-to-glyph spacing reads as one
   rhythm; do not widen the right cluster casually. */
@media (max-width:860px){
  html{scroll-padding-top:80px}
  .site-header .wrap{gap:5px}
  .head-controls{gap:4px}
  .translate-toggle{min-height:40px;padding:0 2px}
  .translate-code{gap:3px}
  .search-toggle{width:34px;height:40px;padding:0}
  .lang-item{min-height:40px;padding-top:9px;padding-bottom:9px}
  .sr-item{min-height:40px;padding-top:13px;padding-bottom:13px}
  .lang-menu{position:static;width:auto;margin:0 8px 10px;box-shadow:none}
  .search-results{position:static;width:auto;margin:0 8px 10px;box-shadow:none}
}
@media (max-width:560px){
  /* The survey pill's decorative icon yields at this width to
     save room in the row. */
  .m-survey .ic{display:none}
}
.brand{display:flex;align-items:center;color:#fff;text-decoration:none}
.brand-logo{display:block}
@media(min-width:861px){.brand-logo{width:40px;height:40px}}
.brand-logo .cube{transform-box:fill-box;transform-origin:center}
body.home .brand-logo .cube{opacity:0;animation:cubeIn .75s cubic-bezier(.2,.85,.3,1.12) forwards}
body.home .brand-logo .c1{--fx:0px;--fy:-30px;animation-delay:.05s}
body.home .brand-logo .c2{--fx:-30px;--fy:12px;animation-delay:.2s}
body.home .brand-logo .c3{--fx:30px;--fy:12px;animation-delay:.35s}
@keyframes cubeIn{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.55)}to{opacity:1;transform:translate(0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){body.home .brand-logo .cube{animation:none;opacity:1}}
.brand img{height:30px;width:30px;border-radius:7px;display:block}
.nav{display:flex;align-items:center;margin-left:auto}
.nav-links{display:flex;gap:4px;align-items:center;position:relative}
.nav-link{display:inline-flex;align-items:center;color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 14px;min-height:44px;border-radius:999px;transition:color .16s ease,background .16s ease}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-link.active,.nav-link[aria-current="page"]{color:#fff;background:rgba(255,255,255,.10)}
.survey-link{display:inline-flex;align-items:center;color:#FF8000;background:rgba(255,128,0,.13);text-decoration:none;font-weight:700;font-size:.95rem;padding:10px 16px;min-height:44px;border-radius:999px;transition:color .16s ease,background .16s ease}
.survey-link:hover{color:#FF9E33;background:rgba(255,128,0,.22)}
.survey-link.active,.survey-link[aria-current="page"]{background:#FF8000;color:#0B0B0C}
.nav-link,.survey-link,.m-survey,.m-about,.dd-menu a{gap:7px}
.ic{flex:none}
.dd{display:none}
.dd-panel{display:none}
.m-links{display:none}
@media(max-width:860px){
.site-header .wrap{padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px}
.nav-links{display:none}
.nav{gap:4px}
.m-links{display:flex;align-items:center;gap:2px}
.m-survey{display:inline-flex;align-items:center;min-height:44px;padding:8px 11px;border-radius:999px;color:#FF8000;background:rgba(255,128,0,.13);font-weight:700;font-size:.84rem;text-decoration:none;white-space:nowrap}
.m-survey:hover{color:#FF9E33;background:rgba(255,128,0,.22)}
.m-survey.active,.m-survey[aria-current="page"]{background:#FF8000;color:#0B0B0C}
.m-about{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:8px 4px;border-radius:999px;color:rgba(255,255,255,.85);font-weight:600;font-size:.88rem;text-decoration:none;white-space:nowrap}
.m-about:hover{color:#fff;background:rgba(255,255,255,.08)}
.m-about.active,.m-about[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.dd{display:block;position:static}
.dd-btn{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.85);font-weight:600;font-size:.92rem;padding:10px 12px;min-height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.07);cursor:pointer;font-family:inherit;transition:color .16s ease,background .16s ease}
.dd-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.dd-btn .ic{transition:transform .16s ease;color:rgba(255,255,255,.55)}
.dd[data-open="true"] .dd-btn .ic{transform:rotate(180deg)}
.dd[data-open="true"] .dd-btn{color:#fff}
.dd-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .22s ease,visibility 0s linear .22s}
.dd-panel[data-open="true"]{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .22s ease,visibility 0s}
.dd-clip{min-height:0;overflow:hidden}
.dd-menu{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;list-style:none;margin:4px 12px 12px;padding:10px;background:rgba(16,16,18,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.dd-menu li{flex:1 1 40%;display:flex;min-width:0}
.dd-menu a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 8px;color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;font-size:.92rem;border-radius:10px;white-space:nowrap;transition:color .14s ease,background .14s ease}
.dd-menu a:hover{color:#FF8000;background:rgba(255,255,255,.05)}
.dd-menu a.active,.dd-menu a[aria-current="page"]{color:#FF8000}
.m-survey-wrap{display:inline-flex;align-items:center}
.m-survey-wrap .m-survey{border-radius:999px 0 0 999px;padding:8px 5px 8px 7px}
.m-survey-chev{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:24px;padding:8px 12px 8px 3px;border:0;border-radius:0 999px 999px 0;background:rgba(255,128,0,.13);color:#FF8000;cursor:pointer;font-family:inherit}
.m-survey-chev:hover{background:rgba(255,128,0,.22);color:#FF9E33}
.m-survey.active + .m-survey-chev{background:#FF8000;color:#0B0B0C}
/* Survey pill rhythm (2026-10-18 spacing rebalance, tightened
   2026-10-23): this override sets the link's padding inside the
   mobile nav only. The label and the chevron now sit 5px apart
   (2px link right padding + 3px chevron-button left padding),
   the same glyph rhythm as the Menu pill, with 12px outer
   padding at both ends of the combined pill; the earlier 7px +
   7px seam and the chevron button's 32px floor left a 17px
   dead gap between the label and the chevron. */
.m-survey-wrap .m-survey{padding:8px 2px 8px 12px}
}
@media (max-width:423px){
  /* Narrow phones (John's call, 2026-10-18): below the 424px
     floor the About link leaves the header row so the other
     five items fit. This block sits after the max-width:860px
     nav block on purpose: both rules are the single class
     .m-about, so specificity ties and source order decides;
     this later rule wins inside its range, and outside it the
     nav block's inline-flex stands untouched. */
  .m-about{display:none}
}
@media (max-width:350px){
  /* VW-244 (2026-10-27): the header row's min-content is
     345.2px measured by rendering (brand, Menu, Maine
     Mood, EN, search, plus gaps and wrap padding, with
     About already yielded at 423px), so below a 336px
     viewport the search icon, the row's last item, is
     cut at the right edge — 15.2px of it at 320px. At
     350px and below the row's spacing steps in (padding
     and gaps only; no item, size, or behavior changes)
     and the min-content falls to about 302px; at 351px
     and above the row renders exactly as before. This
     block sits after the max-width:423px block for the
     same source-order reason that block records. The
     Valuation app's ported header carries the same
     block (its VW-244); the chevron button also
     carries .dd-btn, so its padding is pinned
     explicitly after the .dd-btn line. */
  .site-header .wrap{padding-left:6px;padding-right:6px;gap:3px}
  .nav{gap:2px}
  .dd-btn{padding-left:9px;padding-right:9px}
  .m-survey-wrap .m-survey{padding-left:9px}
  .m-survey-chev{padding-left:3px;padding-right:8px}
  .head-controls{gap:2px}
  .translate-toggle{padding-left:0;padding-right:0}
}
.nav-survey{position:relative;display:inline-flex;align-items:center}
.nav-survey .survey-link{border-radius:999px 0 0 999px;padding-right:12px;height:44px}
.dd-btn.survey-chev{background:rgba(255,128,0,.13);border:0;color:#FF8000;cursor:pointer;height:44px;min-height:44px;min-width:42px;padding:8px 12px 8px 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 999px 999px 0;font-family:inherit}
.dd-btn.survey-chev:hover{background:rgba(255,128,0,.22);color:#FF9E33}
.survey-link.active + .dd-btn.survey-chev{background:#FF8000;color:#0B0B0C}
.survey-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:rgba(16,16,18,.98);border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:8px;z-index:70;display:none}
.survey-menu[data-open="true"]{display:block}
@media(hover:hover){.nav-survey:hover .survey-menu{display:block}}
.survey-menu a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap}
.survey-menu a:hover{color:#FF8000;background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){.dd-panel{transition:none}.dd-btn .ic{transition:none}}
/* ---------- Tools mega menu (2026-10-30, owner Option A) ----------
   The desktop Tools item carries the survey item's dropdown
   mechanics (a link plus a chevron toggle on the shared data-dd
   script: click toggles, Escape closes and refocuses the button,
   an outside click closes, one panel open at a time) opened out
   into a wide panel: popular tools with icons and one-line
   descriptions, a featured card for Stock Valuation Studio, and
   a closing row to the Tools page. The Tools link itself still
   navigates to /tools/. Keyboard opening is the survey pattern:
   the chevron is a real button, so Tab reaches it and Enter or
   Space opens the panel with aria-expanded kept truthful by the
   script. The wrapper is position:static on purpose: the panel
   anchors its right edge to the .nav-links row (position:relative
   on that rule above), because a panel anchored to the Tools
   pill would run off the left edge of the screen at desktop
   widths down to 861px. The ::before strip bridges the 10px
   float gap so a pointer crossing from the pill to the panel
   never leaves the hover area. Under 861px the whole .nav-links
   row is display:none, so the mobile menu is untouched.
   Layout revision (2026-10-30, owner's screenshot rulings): the
   original two-column panel (one list column + card) stood 527px
   tall and read as too much space. The popular list now splits
   across TWO grid columns under its label (four tools, two per
   column: Studio | Analysis, DCF | Models — Sample Size came out
   of the panel at the owner's refinement, its page and hub card
   untouched), with the featured card as the third column, and
   the panel widens to 880px so the narrower tool columns keep
   their descriptions at two to three lines. Below 1100px the
   panel steps down to 720px with a 208px card column: the
   panel's right edge anchors to the nav row, whose right edge
   sits ~127px in from the viewport under 1240px, so the full
   880px would run off the left edge at the narrowest desktop
   widths. The featured card spans BOTH grid rows (grid-row:
   span 2), so its bottom edge sits flush with the panel's
   bottom edge beside the See-all row, which now runs under the
   tools list only — equal-height columns, the owner's layout
   rule; the card's content stays top-aligned and its go line
   rides the bottom on margin-top:auto. The card's mark is the
   owner's Valuation Studio badge (his logo kit, served at
   /assets/valuation-studio-badge.svg), replacing the cube mark;
   the card's three check-fact bullets came out at the owner's
   refinement, its body line is his text ("31 valuation models.
   Enter a ticker, get a fair value and a buy price."), and the
   free claim stands exactly once — the "100% Free" pill (the
   body line no longer repeats it: owner's one-claim-one-
   statement ruling, 2026-10-30). */
.nav-tools{display:inline-flex;align-items:center}
.nav-tools .nav-link{border-radius:999px 0 0 999px;padding-right:9px}
.dd-btn.tools-chev{background:transparent;border:0;color:rgba(255,255,255,.78);cursor:pointer;height:44px;min-height:44px;min-width:34px;padding:8px 9px 8px 2px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 999px 999px 0;font-family:inherit;transition:color .16s ease,background .16s ease}
.dd-btn.tools-chev:hover{background:rgba(255,255,255,.08);color:#fff}
.dd-btn.tools-chev .ic{transition:transform .16s ease}
.dd-btn.tools-chev[aria-expanded="true"] .ic{transform:rotate(180deg)}
.nav-tools .nav-link.active + .dd-btn.tools-chev{background:rgba(255,255,255,.10);color:#fff}
.tools-menu{position:absolute;top:calc(100% + 10px);right:0;width:min(880px,calc(100vw - 32px));background:rgba(16,16,18,.98);border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:18px;z-index:70;display:none;grid-template-columns:minmax(0,1fr) 228px;column-gap:20px}
@media (max-width:1100px){.tools-menu{width:min(720px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr) 208px}}
.tools-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.tools-menu[data-open="true"]{display:grid}
@media(hover:hover){.nav-tools:hover .tools-menu{display:grid}}
.tools-label{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:2px 10px 8px}
.tools-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.tools-item{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:11px;text-decoration:none}
.tools-item:hover{background:rgba(255,255,255,.05)}
.tools-ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(255,128,0,.13);color:#FF8000;display:flex;align-items:center;justify-content:center}
.tools-ic img[src*="studio-badge"]{background:#fff;border-radius:8px;padding:3px;box-sizing:border-box}
.tools-name{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.98rem;color:#fff}
.tools-item:hover .tools-name{color:#FF8000}
.tools-desc{display:block;margin-top:2px;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.62)}
.tools-feature{grid-row:span 2;position:relative;display:flex;flex-direction:column;background:#FF8000;border-radius:12px;padding:16px;text-decoration:none;color:#0B0B0C}
.tools-mark{display:block;width:46px;height:46px;background:#fff;border-radius:11px;overflow:hidden}
.tools-mark img{padding:4px;box-sizing:border-box}
.tools-mark img{display:block;width:46px;height:46px}
.tools-badge{position:absolute;top:16px;right:16px;background:#0B0B0C;color:#FF8000;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px}
.tools-feature-name{display:block;margin-top:14px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.12rem;line-height:1.25}
.tools-feature-line{display:block;margin-top:6px;font-size:.9rem;line-height:1.5}
.tools-feature-go{display:block;margin-top:auto;padding-top:16px;font-weight:700;font-size:.92rem}
.tools-feature:hover .tools-feature-go{text-decoration:underline}
.tools-all{grid-column:1;display:block;margin-top:12px;padding:12px 10px 0;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;font-size:.92rem}
.tools-all:hover{color:#FF8000}
@media (prefers-reduced-motion:reduce){.dd-btn.tools-chev .ic{transition:none}}
/* ---------- hero (home) ---------- */
.hero-home{background:#0B0B0C;color:#fff;position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center}
.hero-home::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 40%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 85% at 50% 40%,#000 30%,transparent 75%)}
.hero-home::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 78% 30%,rgba(255,128,0,.14),transparent 65%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:48px;align-items:center;width:100%;padding:110px 0 96px}
.hero-home h1{font-size:clamp(2.6rem,5.4vw,4.2rem);margin:0 0 18px;color:#fff}
.hero-home h1 .o{color:var(--orange)}
.hero-sub{font-size:1.18rem;color:rgba(255,255,255,.82);max-width:34rem;margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:rgba(255,255,255,.78);font-size:.95rem;margin:0}
.trust strong{color:#fff;font-family:var(--font-m);font-size:1.05rem}
.trust .sep{opacity:.4}
.trust .ic{color:var(--orange)}
.hero-art{display:flex;justify-content:center}
.hero-fig{width:100%;max-width:560px;margin:0}
.hero-fig svg{width:100%;height:auto;display:block}
.hero-cap{color:rgba(255,255,255,.55);font-size:.85rem;text-align:center;margin-top:10px}
.hero-tail{transform-box:fill-box;transform-origin:center;animation:tailPulse 4.2s ease-in-out infinite}
@keyframes tailPulse{0%,100%{opacity:.75}50%{opacity:1}}
.hero-dot{filter:drop-shadow(0 0 6px rgba(255,128,0,.9))}
@media(prefers-reduced-motion:reduce){.hero-tail{animation:none}#heroCurve{transition:none!important}}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0, 1fr);padding:84px 0 70px}.hero-home{min-height:0}}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-weight:700;font-size:1rem;padding:13px 26px;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden;isolation:isolate}
.btn .notranslate{display:contents}
.btn:active{transform:translateY(1px)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateY(101%);transition:transform .3s ease;z-index:-1;background:var(--card)}
.btn-primary::after{background:#ff8f1f}
.btn-light::after{background:rgba(255,255,255,.18)}
.btn:hover::after,.btn:active::after{transform:translateY(0)}
.btn-primary{background:var(--orange);color:#0B0B0C}
.btn-primary:hover{background:var(--orange);color:#0B0B0C;box-shadow:0 8px 22px rgba(255,128,0,.35);text-decoration:none}
.btn-light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface);box-shadow:var(--shadow)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:10px}
/* ---------- sections / cards ---------- */
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
h1.sect,h2.sect{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 14px}
.cards{display:grid;gap:18px}
.cards.four{grid-template-columns:repeat(4, minmax(0, 1fr))}
.cards.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.cards.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
/* ---------- homepage tools slider: all tools, one scrolling row ---------- */
.tool-slider{overflow:hidden}
.ts-track{display:flex;gap:0;width:max-content;animation:ts-slide 118s linear infinite;overflow:visible;padding:4px 2px 10px}
.ts-track::-webkit-scrollbar{height:6px}
.ts-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ts-track .card{flex:0 0 300px;margin-right:16px}
.tool-slider:hover .ts-track,.tool-slider:focus-within .ts-track{animation-play-state:paused}
@keyframes ts-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ts-btn{display:none;width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;align-items:center;justify-content:center}
.ts-hint{display:none;color:var(--muted);font-size:.85rem;margin:10px 0 0;text-align:right}
@media(max-width:1000px){.cards.four{grid-template-columns:repeat(2, minmax(0, 1fr))}.cards.three{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media(max-width:640px){.cards.two,.cards.three{grid-template-columns:minmax(0, 1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;transition:transform .28s ease,box-shadow .28s ease}
a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);text-decoration:none}
.card h3{margin:0;font-size:1.18rem}
.card p{margin:0;color:var(--muted);font-size:.96rem;flex:1}
.card .go{font-weight:700;color:var(--accent);font-size:.95rem}
.sec-ic{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.sec-finance .sec-ic{background:var(--tint-finance);color:#B35A00}
.sec-tools .sec-ic{background:var(--tint-tools);color:#2563EB}
.sec-templates .sec-ic{background:var(--tint-templates);color:#7C3AED}
.sec-blog .sec-ic{background:var(--orange-soft);color:var(--accent)}
.sec-shop .sec-ic{background:var(--tint-shop);color:#047857}
.tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--orange-soft);border-radius:999px;padding:4px 11px}
.thumb{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;margin:2px 0 4px}
.thumb svg{display:block;width:100%;height:auto}
.card:hover .thumb .draw{animation:redraw 1.2s ease-out}
@keyframes redraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.thumb .draw{stroke-dasharray:420;stroke-dashoffset:0}
/* ---------- guides ---------- */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);text-decoration:none;transition:transform .28s ease,box-shadow .28s ease}
a.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);text-decoration:none}
.gcard .ill svg{display:block;width:100%;height:auto}
.gcard .gbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.gmeta{font-size:.83rem;color:var(--muted);margin:0;display:flex;gap:8px;align-items:center}
.gcard h3{margin:0;font-size:1.15rem}
.gcard p{margin:0;color:var(--muted);font-size:.94rem;flex:1}
/* ---------- newsletter band ---------- */
.newsband{background:#0B0B0C;color:#fff;padding:76px 0;position:relative;overflow:hidden}
.newsband::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 20%,transparent 80%)}
.nb-grid{position:relative;z-index:1;display:grid;grid-template-columns:300px minmax(0, 1fr);gap:56px;align-items:center}
@media(max-width:860px){.nb-grid{grid-template-columns:minmax(0, 1fr);gap:32px}}
.mock-sheet{background:#fff;border-radius:10px;padding:0;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:rotate(-2deg);color:#0B0B0C}
.mock-sheet .ms-bar{background:var(--orange);height:34px;display:flex;align-items:center;padding:0 14px;font-family:var(--font-d);font-weight:700;font-size:.8rem;color:#0B0B0C}
.mock-sheet .ms-body{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.mock-sheet .ms-line{height:8px;border-radius:4px;background:#E9E9EC}
.mock-sheet .ms-formula{background:#F4F4F6;border-radius:6px;padding:8px 10px;font-family:var(--font-m);font-size:.72rem;color:#0B0B0C}
.newsband h2{color:#fff;margin:0 0 12px;font-size:clamp(1.6rem,2.8vw,2.1rem)}
.newsband p{color:rgba(255,255,255,.78);max-width:36rem}
.emailrow{display:flex;gap:10px;margin-top:20px;max-width:34rem}
.emailrow input[type=email]{flex:1;min-width:0;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1rem;font-family:var(--font-b)}
.emailrow input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.emailrow input[type=email]:focus{border-color:var(--orange);outline:none}
@media(max-width:520px){.emailrow{flex-direction:column}}
.ts-hidden{position:absolute;left:-9999px;width:0;height:0;overflow:hidden}
.signup-note{font-size:.9rem;margin-top:10px;min-height:1.25em}
.nb-note{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:12px}
/* ---------- email box (other pages) ---------- */
.emailbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:44px;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:18px;align-items:start}
.emailbox-cheat{background:rgba(255,128,0,.06);border-color:rgba(255,128,0,.22)}
.emailbox .sec-ic{margin:0}
.emailbox h3{margin:0 0 6px;font-size:1.25rem}
.emailbox p{margin:0 0 14px;color:var(--muted)}
.emailbox .emailrow{margin-top:0}
.emailbox .emailrow input[type=email]{background:var(--surface);border-color:var(--line);color:var(--ink)}
.emailbox .emailrow input[type=email]::placeholder{color:var(--muted)}
@media(max-width:860px){.emailbox{grid-template-columns:minmax(0, 1fr);gap:12px}}
.cform{max-width:34rem;margin-top:8px}
.cform input[type=text],.cform input[type=email],.cform textarea{width:100%;padding:12px 14px;font-size:1rem;font-family:var(--font-b);border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);box-sizing:border-box}
.cform textarea{resize:vertical;min-height:140px}
.cform input[type=text]:focus,.cform input[type=email]:focus,.cform textarea:focus{border-color:var(--orange);outline:none}
/* ---------- Maine Mood survey band (homepage) ---------- */
.surveyband{background:#16161A;color:#fff;padding:60px 0;border-top:1px solid rgba(255,128,0,.35)}
.surveyband .kicker{color:var(--orange)}
.surveyband h2{color:#fff;font-size:1.9rem;margin:0 0 10px}
.surveyband .sb-lede{color:rgba(255,255,255,.78);max-width:44rem;margin:0 0 6px}
.surveyband .sb-stat{color:#fff;font-size:1.08rem;margin:16px 0 22px}
.surveyband .sb-stat strong{color:var(--orange);font-variant-numeric:tabular-nums}
@media(max-width:640px){.surveyband{padding:44px 0}.surveyband h2{font-size:1.55rem}}
/* ---------- contact form status notes ---------- */
.form-note{font-size:.95rem;margin:12px 0 0}
.form-note.ok{color:#0f7a3d;font-weight:600}
.form-note.bad{color:#b3372f;font-weight:600}

.dca-grid{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:10px;margin-top:8px}
.dca-grid label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--muted)}
.dca-grid input{padding:10px 8px;font-size:.95rem;font-family:var(--font-b);font-variant-numeric:tabular-nums;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%;box-sizing:border-box}
.dca-grid input:focus{border-color:var(--orange);outline:none}
@media(max-width:640px){.dca-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}}
.fhint{font-size:.85rem;color:var(--muted);margin-top:10px}
.tablewrap{overflow-x:auto;margin:18px 0}
table.dtable{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
table.dtable th,table.dtable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.dtable th{font-weight:700;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
pre.code{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:.88rem;overflow-x:auto;margin:12px 0}
input[type=date]{padding:11px 12px;font-size:1rem;font-family:var(--font-b);border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);color-scheme:light}
input[type=date]:focus{border-color:var(--orange);outline:none}
/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:320px minmax(0, 1fr);gap:56px;align-items:start}
@media(max-width:860px){.about-grid{grid-template-columns:minmax(0, 1fr);gap:36px}}
.photo-frame{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px;text-align:center}
.photo-frame img{width:100%;max-width:260px;height:auto;border-radius:calc(var(--radius) - 6px);display:block;margin:0 auto}
.monogram{width:150px;height:150px;margin:0 auto;border-radius:50%;background:#0B0B0C;color:var(--orange);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:3.2rem;letter-spacing:.02em;border:3px solid var(--orange)}
.photo-cap{font-size:.83rem;color:var(--muted);margin:14px 0 0}
.about-side h2{margin:26px 0 10px;font-size:1.5rem}
.creds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:.96rem}
.creds li{display:flex;gap:10px;align-items:flex-start}
.creds .ic{color:var(--accent);flex:none;margin-top:4px}
.creds a{color:inherit;text-decoration:none}.creds a:hover{text-decoration:underline}
.method-strip{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px;margin-top:28px}
@media(max-width:860px){.method-strip{grid-template-columns:minmax(0, 1fr)}}
.mstep{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px}
.mstep .n{font-family:var(--font-d);font-weight:700;color:var(--accent);font-size:.85rem;letter-spacing:.1em}
.mstep h3{margin:0;font-size:1.12rem}
.mock{border:1px dashed var(--line);border-radius:10px;background:var(--surface);padding:14px 16px;font-size:.88rem}
.mock .mock-t{font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.mock ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mock p{margin:0}
.ann{font-size:.83rem;color:var(--muted);border-left:3px solid var(--orange);padding-left:12px;margin:0}
/* ---------- tool pages ---------- */
.breadcrumb{font-size:.88rem;color:var(--muted);margin:0 0 14px}
.breadcrumb a{color:var(--muted)}
.tool-h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:0 0 10px;max-width:46rem}
.lede{font-size:1.12rem;color:var(--muted);max-width:46rem;margin:0 0 30px}
.tool-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:30px;align-items:start;margin-top:6px}
@media(max-width:920px){.tool-grid{grid-template-columns:minmax(0, 1fr)}}
.inputs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.results-col{position:sticky;top:86px;display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:920px){.results-col{position:static}}
.result{background:#0B0B0C;color:#fff;border-radius:var(--radius);padding:28px}
.result .num{font-family:var(--font-b);font-variant-numeric:tabular-nums;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;color:#fff;line-height:1.25;overflow-wrap:anywhere}
.result .num small{font-size:.95rem;font-family:var(--font-b);font-weight:600;color:rgba(255,255,255,.65)}
.result .rsub{margin-top:10px;color:rgba(255,255,255,.72);font-size:.95rem}
.result .rsub b{color:#fff}
.result-actions{display:flex;gap:10px;flex-wrap:wrap}
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.chartbox svg{display:block;width:100%;height:auto}
.chartbox figcaption{font-size:.85rem;color:var(--muted);margin-top:10px}
.interp{background:var(--surface);border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:18px 22px;font-size:1rem}
.interp:empty{display:none}
.warn{background:#FFF7E8;border:1px solid #F3D9A8;border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:14px 18px;margin-top:14px;font-size:.95rem;color:#0B0B0C}
.field{margin-bottom:20px}
.field label,.flabel{display:block;font-weight:600;font-size:.94rem;margin-bottom:8px}
.fval{font-family:var(--font-b);color:var(--accent);margin-left:6px}
.inrow{display:flex;gap:14px;align-items:center}
.inrow input[type=number]{width:110px;flex:none;padding:11px 12px;font-size:1rem;font-family:var(--font-b);font-variant-numeric:tabular-nums;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.inrow input[type=number]:focus{border-color:var(--orange);outline:none}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--orange);margin-top:-8px;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
input[type=range]:focus-visible{outline:2.5px solid var(--orange);outline-offset:4px}
.field select{padding:11px 12px;font-size:1rem;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-family:var(--font-b);max-width:100%}
.checkline{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer}
.checkline input{width:20px;height:20px;margin-top:2px;accent-color:var(--orange);flex:none}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;max-width:100%;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:9px 18px;border-radius:999px;font-family:var(--font-b);font-weight:600;font-size:.95rem;color:var(--muted);cursor:pointer;transition:background .16s ease,color .16s ease}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.assume{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin-top:34px;max-width:60rem}
.assume .t{display:block;font-family:var(--font-d);font-size:1.05rem;margin-bottom:12px}
.assume ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.assume li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
.dot{flex:none;width:11px;height:11px;border-radius:50%;margin-top:7px}
.dot.g{background:#1B9E57}.dot.a{background:#D97706}.dot.r{background:#DC2626}
.guide-link{margin-top:26px}
/* ---------- tools hub ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-family:var(--font-b);font-weight:600;font-size:.92rem;padding:9px 20px;border-radius:999px;cursor:pointer;transition:all .16s ease}
.chip:hover{border-color:var(--muted);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tool-card.hide{display:none}
.hub-controls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:stretch;margin:22px 0 26px}
.hub-controls .chips{margin:0}
.hub-controls .chip{display:inline-flex;align-items:center;height:42px}
.hub-jump{display:flex;align-items:center;gap:10px}
.hub-jump label{font-family:var(--font-b);font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.hub-jump select{height:42px;min-width:0;font-family:var(--font-b);font-weight:600;font-size:.92rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:0 14px;max-width:min(340px,74vw);cursor:pointer}
@media (max-width:680px){.hub-jump{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:8px}.hub-jump select{max-width:none;width:100%}}
/* ---------- guides / articles ---------- */
.article{max-width:46rem}
.article h2{font-size:1.6rem;margin:38px 0 12px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 16px}
.article li{margin:0 0 12px}
.article li:last-child{margin-bottom:0}
.gmeta{font-size:.9rem;color:var(--muted);margin:0 0 6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gill{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:22px 0 8px;background:var(--surface)}
.gill svg{display:block;width:100%;height:auto}
.gill figcaption{font-size:.85rem;color:var(--muted);padding:10px 18px;border-top:1px solid var(--line)}
/* ---------- guide layout: article + right rail ---------- */
.glayout{display:grid;grid-template-columns:minmax(0,46rem) 300px;gap:32px;justify-content:center;align-items:start;padding-top:40px}
.block .glayout{padding-top:0}
.glayout .article{width:100%;margin:0 auto;min-width:0}
.glayout .article h2{scroll-margin-top:16px}
.grail{display:flex;flex-direction:column;gap:22px;min-width:0}
.gcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px 20px}
.gcard h3{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.gcard p{font-size:.95rem;margin:0 0 12px}
.gcard p:last-child{margin-bottom:0}
.gtoc{list-style:none;margin:0;padding:0}
.gtoc li{margin:0 0 8px}
.gtoc li:last-child{margin-bottom:0}
.gtoc a{color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.4}
.gtoc a:hover{color:var(--accent);text-decoration:underline}
.gkeynums{margin:0;padding:0}
.gkeynums>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.gkeynums>div:first-child{border-top:0;padding-top:0}
.gkeynums dt{font-size:.88rem;color:var(--muted);margin:0}
.gkeynums dd{font-size:.95rem;font-weight:600;text-align:right;margin:0}
.grail-ad{position:sticky;top:90px}
.grail-ad .ad-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.grail-ad .ad-slot-wrap{margin:0;max-width:none}
/* ---------- in-article tables ---------- */
.gtable-wrap{overflow-x:auto;margin:26px 0 30px;border:1px solid var(--line);border-radius:var(--radius)}
table.gtable{width:100%;border-collapse:collapse;font-size:.92rem}
.gtable caption{text-align:left;font-family:var(--font-b);font-weight:700;font-size:1rem;padding:14px 14px 4px}
.gtable th{background:var(--surface);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--font-b);font-weight:700}
.gtable td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.gtable tr:last-child td{border-bottom:0}
.gtable .num{text-align:right;font-variant-numeric:tabular-nums}
.gtable-note{font-size:.85rem;color:var(--muted);padding:0 14px 12px;margin:0}
.comments{margin-top:34px;border-top:1px solid var(--line);padding-top:8px}
.cmt-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cmt-head h2{margin-bottom:4px}
.cmt-count{color:var(--muted);font-size:.9rem;white-space:nowrap}
.cmt{padding:14px 0;border-bottom:1px solid var(--line)}
.cmt-meta{display:flex;gap:8px;align-items:center;font-size:.85rem;margin-bottom:3px;flex-wrap:wrap}
.cmt-meta b{font-size:.95rem}
.cmt-meta time{color:var(--muted)}
.cmt-badge{background:#FFF1DE;color:#9a5200;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 8px}
.cmt-body{margin:0}
.cmt.reply{margin:10px 0 2px 16px;padding:12px 14px;background:var(--surface);border-radius:10px;border-bottom:0}
.cmt-empty{color:var(--muted)}
.cmt-form{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:18px}
.cmt-form-title{font-weight:700;margin:0 0 4px}
.cmt-label{display:block;font-size:.82rem;font-weight:700;margin:12px 0 5px}
.cmt-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:.95rem;background:#fff}
textarea.cmt-input{min-height:84px;resize:vertical}
.cmt-actions{margin:14px 0 0}
.cmt-note{font-size:.9rem;margin:10px 0 0}
.cmt-fineprint{font-size:.8rem;color:var(--muted);margin:10px 0 0}
@media(max-width:640px){
  .gtable{font-size:.85rem}
  .gtable th{padding:9px 10px}
  .gtable td{padding:8px 10px}
  .gtable caption{padding:12px 12px 2px}
  .gtable-note{padding:0 12px 10px}
  .gtable-wrap{box-shadow:inset -22px 0 22px -22px rgba(11,11,12,.35)}
  .gtable-wrap:has(> .gtable-stack){box-shadow:none}
  .gtable-stack{font-size:.92rem}
  .gtable-stack caption{display:block;text-align:left}
  .gtable-stack thead{display:none}
  .gtable-stack,.gtable-stack tbody,.gtable-stack tr,.gtable-stack td{display:block}
  .gtable-stack tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  .gtable-stack tbody tr:last-child{border-bottom:0}
  .gtable-stack td{border-bottom:0;padding:2px 0}
  .gtable-stack td:first-child{font-weight:700;font-size:.95rem;padding-bottom:5px}
  .gtable-stack td:not(:first-child):not(:last-child)::before{content:attr(data-h);display:block;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:1px}
  .gtable-stack td.lbl::before{content:attr(data-h);display:block;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:1px}
  .gtable-stack td.num:not(:last-child){display:inline-block;margin-right:26px;vertical-align:top;text-align:left}
}
/* ---------- in-article callouts ---------- */
.gcallout{border:1px solid rgba(255,128,0,.45);border-left:5px solid var(--accent);border-radius:var(--radius);background:rgba(255,128,0,.10);padding:20px 22px;margin:28px 0 30px}
.gcallout h3{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.gcallout p{margin:0 0 10px}
.gcallout p:last-child{margin-bottom:0}
.gcallout ol{margin:0;padding-left:22px}
.gcallout li{margin-bottom:12px}
.gcallout li:last-child{margin-bottom:0}
.crumbs{font-size:.85rem;color:var(--muted);margin:26px 0 0}
.crumbs a{color:var(--accent)}
.crumbs .sep{margin:0 7px;color:var(--chart-mute)}
.byline{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.calc-band{background:#0B0B0C;color:#fff;border-radius:var(--radius);padding:26px 28px;margin:26px 0 32px}
.calc-band .kicker{color:var(--orange);margin:0 0 8px}
.calc-band h2{color:#fff;margin:0 0 8px;font-size:1.45rem}
.calc-band p{color:rgba(255,255,255,.78);margin:0;max-width:42rem}
.calc-band .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.calc-band .alt{color:rgba(255,255,255,.85);font-weight:600}
.formula{font-family:var(--font-m);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:10px;padding:16px 18px;margin:18px 0;font-size:.96rem;white-space:normal}
.calc-links{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}
.calc-link{flex:1 1 180px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .28s ease,box-shadow .28s ease}
.calc-link:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.calc-link strong{display:block;font-family:var(--font-d);font-size:1.02rem;margin-bottom:4px}
.calc-link>span{color:var(--muted);font-size:.9rem}
.app-card{display:block;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius);padding:14px 18px;margin:16px 0;color:var(--ink);text-decoration:none;transition:transform .28s ease,box-shadow .28s ease}
.app-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.app-card strong{display:block;font-family:var(--font-d);font-size:1.05rem;line-height:1.3}
.app-card>span{color:var(--orange);font-weight:600;font-size:.92rem}
.app-card-arrow{white-space:nowrap}
.calc-band .app-card{margin:18px 0 0;max-width:32rem}
.calc-band .app-card strong{font-size:1.3rem}
.calc-band .row{margin-top:14px}
/* ---------- calculator suggestion rows: twelve fitted stocks, sliding at every width ---------- */
.calc-picks{margin:36px 0 10px}
.calc-picks h2{margin:0 0 8px}
.cp-note{color:var(--muted);max-width:46rem;margin:0 0 6px}
.cp-view{overflow:hidden}
.cp-track{display:flex;gap:0;width:max-content;animation:cp-slide 64s linear infinite;padding:6px 2px 12px}
.cp-tile{flex:0 0 248px;margin-right:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:3px}
.cp-tile:hover{box-shadow:var(--shadow);text-decoration:none}
.cp-t{font-family:var(--font-d);font-weight:800;font-size:1.05rem}
.cp-n{font-weight:600;font-size:.93rem}
.cp-w{color:var(--muted);font-size:.88rem;line-height:1.45}
.cp-head{display:flex;gap:10px;align-items:center}
.cp-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.cp-logo{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:9px;overflow:hidden;background:#fff}
.cp-logo-dark{background:#fff}
.cp-logo-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink);font-family:var(--font-d);font-weight:800;font-size:1.02rem}
.cp-logo-dark .cp-logo-letter{background:var(--surface);color:var(--ink)}
.cp-logo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.cp-price{margin-top:auto;padding-top:9px;min-height:1.45em;font-variant-numeric:tabular-nums;font-weight:700;font-size:.95rem}
.cp-chg{font-weight:700}
.calc-picks:hover .cp-track,.calc-picks:focus-within .cp-track{animation-play-state:paused}
@keyframes cp-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.cp-tile{flex-basis:218px}}
@media (prefers-reduced-motion: reduce){
  .cp-track{animation:none}
  .cp-track .cp-dup{display:none}
  .cp-view{overflow-x:auto}
}
@media(max-width:1080px){
  .glayout{grid-template-columns:minmax(0,1fr)}
  .grail .gtoc-card,.grail .gkey-card{display:none}
  .grail{max-width:46rem;width:100%;margin:0 auto}
  .grail-ad{position:static}
}
/* ---------- motion: wipes, word reveals, rotator, drift, pinned story ---------- */
.js-ww .ww-word{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;transition-delay:var(--wd,0s)}
.js-ww.ww-in .ww-word{opacity:1;transform:none}
.about-teaser-grid{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:48px;align-items:center}
@media(max-width:860px){.about-teaser-grid{grid-template-columns:minmax(0, 1fr);gap:20px}}
.about-rot{font-family:var(--font-d);font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:700;color:var(--ink);line-height:1.3;margin:0}
.about-rot .rot-word{color:var(--accent);font-weight:700}
.rotator{position:relative;display:inline-block;overflow:hidden;vertical-align:baseline;transition:width .9s ease}
.rot-word{display:none}
.rot-word:first-child{display:inline}
.js-rot{vertical-align:var(--rot-va,baseline)}
.js-rot .rot-word{display:inline-block;position:absolute;left:0;top:0;opacity:0;transition:opacity .9s ease;white-space:nowrap}
.js-rot .rot-word.on{position:static;opacity:1}
.js-rot .rot-word.off{opacity:0}
.drift{position:absolute;inset:0;pointer-events:none}
.drift .dbl{position:absolute;opacity:.14;animation:driftA 18s ease-in-out infinite alternate}
.drift .dbl:nth-child(1){top:10%;left:2%;width:46px}
.drift .dbl:nth-child(2){top:64%;left:5%;width:32px;animation-name:driftB;animation-duration:22s}
.drift .dbl:nth-child(3){top:12%;right:3%;width:54px;animation-duration:26s}
.drift .dbl:nth-child(4){top:72%;right:7%;width:36px;animation-name:driftB;animation-duration:30s}
@keyframes driftA{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(28px,-20px) rotate(8deg)}}
@keyframes driftB{from{transform:translate(0,0) rotate(8deg)}to{transform:translate(-24px,22px) rotate(-8deg)}}
@media(max-width:860px){.drift .dbl:nth-child(n+3){display:none}}
/* Homepage seam rhythm (2026-10-23): every gap between homepage
   sections measures 72px content-to-content. The pin story's top
   padding completes the survey band's bottom padding (60px, or
   44px under 640px) to 72, and its bottom padding carries the
   full 72 into Services, whose top padding is 0 like the other
   stacked homepage blocks. */
.pin-story{padding:12px 0 72px}
@media(max-width:640px){.pin-story{padding-top:28px}}
.pin-comp{max-width:none;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:20px;background:#0B0B0C}
.pin-progress{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin:0 0 24px;display:none}
.js-pin .pin-progress{display:block}
.pin-fill{height:100%;width:33.333%;background:var(--accent);transition:width .4s ease}
.pin-panels{position:relative}
.pin-panel{margin-bottom:22px}
.pin-panel:last-child{margin-bottom:0}
.js-pin .pin-panels{display:grid}
.js-pin .pin-panel{grid-area:1/1;margin-bottom:0;visibility:hidden;opacity:0}
.js-pin .pin-panel.on{visibility:visible;opacity:1;animation:pinFade .35s ease}
@keyframes pinFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pin-n{font-family:var(--font-b);font-weight:700;color:var(--accent);font-size:.9rem;letter-spacing:.08em}
.pin-panel h3{font-size:1.8rem;margin:8px 0 10px;color:#fff}
.pin-panel p{color:rgba(255,255,255,.68);max-width:34rem;margin:0}
.pin-sample{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:24px;margin-top:20px}
.pin-sample-q{color:#fff;font-weight:700;margin:0 0 4px}
.pin-opt{display:block;width:100%;text-align:left;font-family:var(--font-b);font-size:1rem;padding:11px 14px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:transparent;color:rgba(255,255,255,.85);margin-top:9px;cursor:pointer}
.pin-opt:hover{border-color:var(--accent);background:rgba(255,128,0,.10);color:#fff}
.pin-opt.sel{border-color:var(--accent);background:rgba(255,128,0,.16);color:#fff}
.pin-sample-note{color:rgba(255,255,255,.5);font-size:.85rem;margin:12px 0 0}
.pin-chart{margin-top:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:28px 24px}
.pin-chart svg{display:block;width:100%;height:auto}
.pin-chart svg.pin-chart-svg-mob{display:block}
.pin-chart svg.pin-chart-svg-desk{display:none}
@media(min-width:861px){.pin-chart svg.pin-chart-svg-mob{display:none}.pin-chart svg.pin-chart-svg-desk{display:block}}
@media(max-width:860px){.pin-comp .pin-chart{padding:20px 16px}.pin-chart .pin-chart-note{margin:16px 0 0}.pin-chart .pin-chart-title{font-size:17px}.pin-chart .pin-chart-label{font-size:14px}.pin-chart .pin-chart-value{font-size:14px}}
.pin-chart text{font-family:var(--font-b)}
.pin-chart-title{fill:#fff;font-weight:700;font-size:15px}
.pin-chart-label{fill:rgba(255,255,255,.68);font-size:13.5px}
.pin-chart-value{fill:#fff;font-weight:700;font-size:13.5px}
.pin-bar-track{fill:rgba(255,255,255,.10)}
.pin-bar-fill{fill:var(--accent)}
.pin-panel .pin-chart-note{color:#FF8000;font-size:.85rem;font-weight:600;margin:24px 0 0}
.pin-grid{stroke:rgba(255,255,255,.08);stroke-width:1}
.pin-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.pin-dot{fill:var(--accent);stroke:#0B0B0C;stroke-width:2}
.pin-steps{display:none;gap:12px;margin:0 0 48px}
@media(min-width:861px){
  .pin-panel{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr);gap:32px;align-items:center}
  .js-pin .pin-panel.on{display:grid;animation:pinFade .35s ease}
  .pin-sample{margin-top:0}
  .pin-chart{margin-top:0}
}
.js-pin .pin-steps{display:flex}
.pin-step{flex:1;font-family:var(--font-b);font-weight:700;font-size:1rem;padding:11px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);cursor:pointer;text-align:center}
.pin-step.on{background:var(--accent);color:#0B0B0C;border-color:var(--accent)}
@media(max-width:520px){.pin-step{font-size:.92rem;padding:11px 6px}}
.pin-comp .btn{margin-top:16px}
@media(max-width:860px){.pin-comp .btn{display:block;text-align:center;text-wrap:balance}}
@media(prefers-reduced-motion:reduce){
  .btn::after{transition:none}
  .js-ww .ww-word{opacity:1;transform:none;transition:none}
  .drift .dbl{animation:none}
  .js-pin .pin-panel.on{animation:none}
  .tool-slider.js-slider .ts-btn{display:flex}
  .ts-hint{display:block}
  .tool-slider{position:relative;overflow:visible;display:flex;gap:12px;align-items:center}
  .ts-track{animation:none;gap:16px;width:auto;overflow-x:auto;scrollbar-width:thin}
  .ts-track .card{margin-right:0}
  .ts-track .ts-dup{display:none}
  .tool-slider::after{content:"";position:absolute;top:0;bottom:0;right:0;width:56px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
  .tool-slider.js-slider::after{right:52px}
}
/* ---------- AdSense slots (guides, tools) ---------- */
.ad-slot-wrap{margin:38px 0;max-width:46rem;clear:both}
.ad-slot-wrap:has(>ins:empty){display:none!important}
@media(max-width:520px){.ad-slot-wrap{margin:28px 0}}
/* ---------- page hero (section indexes) ---------- */
.hero.page{background:#0B0B0C;color:#fff;padding:64px 0;position:relative;overflow:hidden}
.hero.page::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 90% at 50% 20%,#000 20%,transparent 75%)}
.hero.page .wrap{position:relative;z-index:1}
.hero.page h1{color:#fff;margin:0 0 10px;font-size:clamp(2rem,4vw,2.8rem)}
.hero.page p{color:rgba(255,255,255,.75);margin:0;max-width:40rem;font-size:1.1rem}
/* ---------- misc ---------- */
.product{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;margin:26px 0;max-width:46rem}
.price{font-family:var(--font-b);font-size:2rem;font-weight:700;color:var(--accent)}
.product ul{margin:12px 0 18px;padding-left:22px}
.product li{margin-bottom:8px}
.product.wide{max-width:none;padding:24px 28px;margin:20px 0;display:flex;gap:32px;align-items:stretch}
.product.wide .p-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start}
.product.wide .p-main h3{margin:0 0 8px}
.product.wide .p-main p{margin:0}
.product.wide .p-side{flex:0 0 190px;border-left:1px solid var(--line);padding-left:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center}
.product.wide .p-side .price{line-height:1.15}
.buy-row{display:flex;gap:6px;width:100%}
.buy-row .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;font-size:.9rem;padding-left:6px;padding-right:6px}
@media(max-width:389px){.buy-row{flex-direction:column;gap:8px}.buy-row .btn{padding:12px 16px}}
@media(min-width:721px){.product.wide.buy2 .p-side{flex-basis:330px}}
@media(max-width:720px){.product.wide{flex-direction:column;gap:16px}.product.wide .p-side{flex:none;border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px;align-items:flex-start;text-align:left}}
canvas.chart{width:100%;max-width:640px}
/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .32s ease,transform .32s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:38px 0 46px;color:var(--muted);font-size:.9rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.site-footer a{color:var(--muted)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .card:hover,.gcard:hover,a.card:hover{transform:none}
}
/* ---------- Daily 7 ---------- */
.d7-hub{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#0B0B0C;color:#fff;border-radius:var(--radius);padding:22px 24px;margin:0 0 28px}
.d7-hub h3{color:#fff;margin:0 0 6px}
.d7-hub p{color:rgba(255,255,255,.72);margin:0;max-width:36rem}
.d7-hub .btn{flex:none}
.d7-asof{color:var(--muted);font-size:.95rem;margin:0 0 22px}
.d7-grid{display:flex;flex-direction:column;gap:16px}
.d7-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:var(--card)}
.d7-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.d7-ticker{font-family:var(--font-b);font-size:1.6rem;font-weight:800;letter-spacing:.02em}
.d7-company{color:var(--muted);font-size:.95rem}
.d7-id{display:flex;gap:12px;align-items:center;min-width:0}
.d7-logo{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:10px;background:#fff;overflow:hidden}
.d7-logo-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#17171a;font-family:var(--font-b);font-weight:800;font-size:1.3rem}
.d7-logo img{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;box-sizing:border-box}
.d7-price{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.15rem;text-align:right}
.d7-up{color:#0f7a3d}.d7-down{color:#b3372f}
.d7-rows{margin:14px 0 0;display:grid;grid-template-columns:110px minmax(0, 1fr);gap:6px 14px}
.d7-rows dt{font-weight:700;color:var(--ink);font-size:.92rem}
.d7-rows dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.d7-prior{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-top:28px}
.d7-prior h3{margin:0 0 8px}
.d7-prior ol{margin:0;padding-left:22px;color:var(--muted)}
.d7-prior li{margin-bottom:4px}
.d7-prior li strong{color:var(--ink)}
.d7-note{color:var(--muted);font-size:.9rem;margin-top:24px}
/* ---------- Daily 7 affiliates ---------- */
.aff{margin-top:28px}
.aff h3{margin:0 0 6px}
.aff-lede{color:var(--muted);margin:0 0 18px}
.aff-view{overflow:hidden}
.aff-track{display:flex;gap:0;width:max-content;animation:aff-slide 30s linear infinite;padding:6px 2px 12px}
.aff-track .aff-card{flex:0 0 264px;margin-right:16px}
@keyframes aff-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.aff:hover .aff-track,.aff:focus-within .aff-track{animation-play-state:paused}
.aff-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--card);text-decoration:none;color:inherit}
.aff-card.aff-alt{background:#FFF1DE}
.aff-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.aff-logo{height:56px;display:flex;align-items:center}
.aff-logo img{max-height:56px;max-width:120px;border-radius:10px}
.aff-tv{display:flex;align-items:center;height:56px;color:#2962FF;font-family:var(--font-b);font-weight:800;font-size:1.9rem;letter-spacing:-.02em}
.aff-logo.kalshi{background:#000;border-radius:10px;padding:0 12px}
.aff-logo.kalshi img{max-width:110px;border-radius:0}
.aff-card h4{margin:0;font-size:1.05rem}
.aff-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5;flex:1}
.aff-cta{color:var(--orange);font-weight:700;font-size:.95rem}
.aff-disc{color:var(--muted);font-size:.82rem;margin-top:14px}
@media(max-width:640px){.aff-track .aff-card{flex-basis:224px}}
@media (prefers-reduced-motion: reduce){
  .aff-track{animation:none}
  .aff-track .aff-dup{display:none}
  .aff-view{overflow-x:auto}
}
/* ---------- Daily 7 feature (Finance hub) + homepage band ---------- */
/* Feature-card layout (reference rebuild 2026-11-01, owner's supplied
   design): the head is one compact block — badge and name (with its
   Live / Available soon pill) on the left with the card's copy directly
   under the name, the CTA button top-right with the guide links
   right-aligned beneath it — and the spec strip sits directly under
   the head on the same spacing rhythm, so the card's height hugs its
   content with no void between the links and the strip. The strip is
   ONE unified panel divided into label-over-value columns (a
   standalone count renders as a big orange numeral), and it stays the
   native scroll container of the swipe round: swipeable with native
   momentum at every width, its gentle auto-advance driven by the
   d7-slider block in JS_SITE, which never writes scrollLeft while a
   gesture, a hover, or momentum owns the row. */
.d7-feature{background:#0B0B0C;color:#fff;border-radius:var(--radius);padding:26px;margin:0 0 28px}
.d7-feature-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 44px;margin-bottom:20px}
.d7-feature-name{display:flex;align-items:flex-start;gap:18px;min-width:0}
.d7-feature-name img{width:84px;height:84px;flex:none;background:#fff;border-radius:14px;padding:6px;box-sizing:border-box}
.d7-feature-id{min-width:0}
.d7-feature-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.d7-feature-title h3{color:#fff;margin:0;font-size:1.55rem;white-space:nowrap}
.d7-feature-tag{color:rgba(255,255,255,.72);margin:7px 0 0;line-height:1.55;max-width:38rem}
.d7-live-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 11px;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap}
.d7-live-pill i{width:7px;height:7px;border-radius:50%;background:#43d17c;flex:none}
.d7-soon-pill{color:rgba(255,255,255,.78)}
.d7-soon-pill i{background:rgba(255,255,255,.45)}
.d7-feature-side{display:flex;flex-direction:column;align-items:flex-end;gap:13px;flex:none}
.d7-feature-side .btn{flex:none}
.d7-feature-links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end}
.d7-guide-link{color:#fff;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.d7-guide-link:hover{color:var(--orange)}
.d7-minis{overflow-x:auto;overflow-y:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:22px 26px;scrollbar-width:none;overscroll-behavior-x:contain}
.d7-minis::-webkit-scrollbar{display:none}
.d7-track{display:flex;gap:0;width:max-content}
.d7-fact{display:flex;flex-direction:column;gap:7px;width:176px;flex:none;margin-right:34px;text-decoration:none;color:#fff}
.d7-fact-wide{width:262px}
.d7-fact-num{width:96px}
.d7-fact-t{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.d7-fact-p{font-size:1.13rem;font-weight:600;line-height:1.38}
.d7-fact-n{font-size:2.45rem;font-weight:800;line-height:1.02;color:var(--orange);font-variant-numeric:tabular-nums}
.d7-track .d7-mini{flex:0 0 150px;margin-right:10px}
.d7-mini{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.08);border-radius:10px;padding:12px;text-decoration:none;color:#fff}
.d7-mini:hover{background:rgba(255,255,255,.14)}
.d7-mini-t{font-weight:800;font-size:1.02rem}
.d7-mini-p{font-variant-numeric:tabular-nums;font-size:.9rem;color:rgba(255,255,255,.8)}
.d7-mini-c{font-variant-numeric:tabular-nums;font-size:.88rem;font-weight:700}
.d7-mini .d7-up{color:#5fce7d}.d7-mini .d7-down{color:#ff8a7a}
@media(max-width:860px){
  .d7-feature{padding:22px}
  .d7-feature-head{flex-direction:column;gap:14px;margin-bottom:18px}
  .d7-feature-name{gap:12px}
  .d7-feature-name img{width:52px;height:52px;padding:4px}
  .d7-feature-title h3{font-size:1.12rem}
  .d7-feature-tag{margin-top:5px}
  .d7-feature-side{align-items:flex-start;gap:11px}
  .d7-feature-side .btn{padding:11px 16px;font-size:.95rem}
  .d7-feature-links{justify-content:flex-start}
  .d7-minis{padding:18px 20px}
  .d7-fact{width:150px;margin-right:26px}
  .d7-fact-wide{width:236px}
  .d7-fact-num{width:84px}
  .d7-fact-t{white-space:normal}
  .d7-fact-p{font-size:1.05rem}
  .d7-fact-n{font-size:2.1rem}
  .d7-track .d7-mini{flex-basis:132px}
}
@media (prefers-reduced-motion: reduce){
  .d7-track .d7-dup{display:none}
}
@media(max-width:640px){.d7-rows{grid-template-columns:minmax(0, 1fr)}.d7-price{text-align:left}.d7-hub{flex-direction:column;align-items:flex-start}}