/* skin.css — the shared WHITESPACE / Atlas look (19 Oct 2026).
   Modelled on aideazz.xyz/api: full-bleed film behind a dark veil, Instrument Serif display type,
   glass cards, white pill buttons with an amber glow. The film is AIdeazz AI Lab promo footage
   that was already rendered — no new generation spend.
   21 Oct 2026: one sticky header (Tools dropdown + ☰ panel), the .intro hero (text left, real product right), and one
   section system (.blk / .shead) whose clear and tinted bands alternate. */
:root{
  --bg:#020617; --veil:8,5,14; --ink:#fff; --ink-80:rgba(255,255,255,.8); --ink-60:rgba(255,255,255,.6); --ink-45:rgba(255,255,255,.45);
  --body:#e5e7eb; --mut:#cbd2dc; --dim:#9ca3af; --faint:#6b7280;
  --amber:#edb867; --amber-hi:#fde68a; --glow:rgba(245,200,120,.55);
  --violet:#7c3aed; --yellow:#facc15; --lilac:#e9d5ff; --lilac-2:#d8b4fe; --focus:rgba(192,132,252,.6);
  --ok:#34d399; --ok-ink:#6ee7b7; --ok-bg:rgba(16,185,129,.12); --warn:#fbbf24; --hot:#fb7185; --bad-ink:#fecaca; --bad-bg:rgba(239,68,68,.12);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.16);
  --glass:rgba(6,6,14,.48); --card:rgba(255,255,255,.035); --field:rgba(15,23,42,.72);
  --r:16px; --r-f:12px;
  --serif:'Instrument Serif',Georgia,serif;
  --display:'Bricolage Grotesque','Manrope',sans-serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;
  --ramp-fb:linear-gradient(115deg,#7c3aed,#facc15 50%,#7c3aed);
  --ramp:linear-gradient(115deg in oklab,#7c3aed,#facc15 50%,#7c3aed);
  --shadow:0 25px 50px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--lilac-2)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.022em;text-wrap:balance}

/* ── backdrop: poster → two cross-fading films → veil → dot field → light ── */
.bd{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bd>img,.bd>video,.bd>.veil,.bd>.dots,.bd>.sweep{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bd>video{opacity:0;transition:opacity 1200ms ease;filter:saturate(1.08)}
.bd>.veil{background:linear-gradient(180deg,rgba(var(--veil),.55) 0%,rgba(var(--veil),.18) 24%,rgba(var(--veil),.3) 52%,rgba(var(--veil),.6) 80%,rgba(var(--veil),.78) 100%)}
.bd>.dots{background-image:radial-gradient(rgba(255,236,200,.16) 1px,transparent 1.3px);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 10%,transparent 72%);
  animation:dotbreath 9s ease-in-out infinite}
@keyframes dotbreath{50%{opacity:.55}}
.bd .ray{position:absolute;left:-20%;width:140%;height:120px;filter:blur(36px);mix-blend-mode:screen;opacity:.16;animation:raybob 14s ease-in-out infinite}
.bd .ray.r1{top:22%;background:linear-gradient(90deg,transparent,rgba(255,178,61,.9),transparent);transform:rotate(-7deg)}
.bd .ray.r2{top:48%;background:linear-gradient(90deg,transparent,rgba(140,255,214,.75),transparent);transform:rotate(5deg);animation-delay:-5s}
.bd .ray.r3{top:70%;background:linear-gradient(90deg,transparent,rgba(180,124,255,.85),transparent);transform:rotate(-2deg);animation-delay:-9s}
@keyframes raybob{50%{translate:0 16px}}
/* Atlas: a slow radar sweep over the film */
.bd>.sweep{width:150vmax;height:150vmax;left:50%;top:46%;inset:auto;translate:-50% -50%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(237,184,103,0) 0deg,rgba(237,184,103,.13) 26deg,rgba(237,184,103,0) 27deg 360deg);
  -webkit-mask-image:radial-gradient(circle,#000 0 34%,transparent 62%);mask-image:radial-gradient(circle,#000 0 34%,transparent 62%);
  animation:sweep 9s linear infinite}
@keyframes sweep{to{rotate:360deg}}
/* the light field (Skin.lightField): the canvas replaces the static dot texture once it runs, and the rays drift
   with the pointer, each at its own depth (transform; raybob keeps the separate translate property) */
.bd>canvas.lf{position:absolute;inset:0;width:100%;height:100%}
.bd--lit>.dots{display:none}
.bd--lit .ray.r1{transform:translate(calc(var(--px,0) * .07px),calc(var(--py,0) * .07px)) rotate(-7deg)}
.bd--lit .ray.r2{transform:translate(calc(var(--px,0) * .045px),calc(var(--py,0) * .045px)) rotate(5deg)}
.bd--lit .ray.r3{transform:translate(calc(var(--px,0) * .105px),calc(var(--py,0) * .105px)) rotate(-2deg)}

/* ── layout ── */
.wrap{position:relative;z-index:10;max-width:75rem;margin:0 auto;padding:0 20px 40px}
@media(min-width:640px){.wrap{padding:0 32px 48px}}
@media(min-width:1360px){.wrap{max-width:82.5rem}} /* = the header row's width, so the lockup and the content share one left edge */
@keyframes az-pulse{50%{opacity:.35;transform:scale(.75)}}

/* ── announcement bar (Atlas only): one true, current fact; not sticky ── */
.annc{position:relative;z-index:61;display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:5px 16px;background:#0b0a18;border-bottom:1px solid var(--line);font:500 12.5px/1.4 var(--mono);color:var(--ink-80);text-align:center}
@media(min-width:640px){.annc{min-height:36px}}
.annc .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ok);animation:az-pulse 2s ease-in-out infinite}
.annc.warn{background:linear-gradient(rgba(251,191,36,.10),rgba(251,191,36,.10)),#0b0a18;color:#fcd34d}
.annc.warn .dot{background:var(--warn)}
.annc .s{display:none}
@media(max-width:639.98px){.annc .l{display:none}.annc .s{display:inline}}

/* ── header: sticky, full width, outside .wrap (Handy Manny / Pitz pattern) ── */
.top{position:sticky;top:0;z-index:60;background:rgba(2,6,23,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ramp-fb);background:var(--ramp);background-size:220%;z-index:1}
.topin{max-width:1200px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:8px}
@media(min-width:640px){.topin{padding:0 32px;height:84px;gap:14px}}
/* the full desktop row needs a little more room than the 1200px content column (Spanish + ATLAS SHIFTED at 35px) */
@media(min-width:1360px){.topin{max-width:1320px}}
.brandlink{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:#fff;margin-right:auto;min-width:0}
@media(min-width:640px){.brandlink{gap:12px}}
.mark{flex:none;display:inline-block;aspect-ratio:176/202;height:clamp(34px,10vw,50px);background-image:var(--ramp-fb);background-image:var(--ramp);background-size:220%;animation:az-flow 5s linear infinite;
  -webkit-mask:url(https://aideazz.xyz/media/az-mark.png) center/contain no-repeat;mask:url(https://aideazz.xyz/media/az-mark.png) center/contain no-repeat}
.wordmark{display:flex;flex-direction:column;line-height:1;min-width:0}
/* the brand lockup (Elena, 20 Oct: keep it, bigger + sharper, 2026): Syne ExtraBold, sharp-cut display face.
   Phones: it shrinks with the screen so lockup + ♪ + ☰ stay on ONE 56px row down to 360px (D2). Desktop: 35px. */
.wordmark .w{--wr:11.9;font:800 clamp(13px,(91.3vw - 140px) / var(--wr),26px)/1 'Syne',var(--display);letter-spacing:.015em;text-transform:uppercase;white-space:nowrap}
@media(min-width:640px){.mark{height:60px}.wordmark .w{font-size:35px}.wordmark .lab{font-size:11.5px}}
.wordmark .w b{font-weight:800;background-image:var(--ramp-fb);background-image:var(--ramp);background-size:220%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:az-flow 5s linear infinite}
.wordmark .lab{margin-top:5px;display:flex;align-items:center;gap:7px;font:500 clamp(8.5px,2.6vw,10.5px) var(--mono);letter-spacing:.3em;color:var(--ink-80);text-transform:uppercase;white-space:nowrap}
.wordmark .lab i{display:inline-block;width:14px;height:1px;background:#8b5cf6}.wordmark .lab i:last-child{background:var(--yellow)}
@media(min-width:640px){.wordmark .lab{margin-top:6px;gap:8px;letter-spacing:.32em}.wordmark .lab i{width:18px}}
/* the lockup keeps the header on ONE row at every width (D2). Measured, not guessed: the wordmark is --wr times
   its font size wide (WHITESPACE 11.7, ATLAS SHIFTED 13.2, rounded up), so its size follows the room left beside
   EN/ES + ♪ + ☰ (and the CTA from 900px). From 1024px it is the approved 35px. */
.wordmark .w.wl{--wr:13.4}
@media(max-width:639.98px){.wordmark .lab{letter-spacing:.24em}}
@media(min-width:640px) and (max-width:899.98px){.wordmark .w{font-size:clamp(22px,(100vw - 330px) / var(--wr),35px)}}
@media(min-width:900px) and (max-width:1023.98px){.wordmark .w{font-size:clamp(22px,(100vw - 520px) / var(--wr),35px)}}
@keyframes az-flow{100%{background-position:220% center}}
.nav{flex:none;display:flex;align-items:center;gap:8px}
.langsw{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.langsw button{background:transparent;color:var(--ink-60);border:0;padding:7px 11px;font:700 11px var(--mono);cursor:pointer}
.langsw button.on{background:#fff;color:#020617}
/* the sound button: a ghost circle beside the language switch, as on aideazz.xyz/api (40px on phones) */
.sndbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--ink-80);cursor:pointer;transition:all .15s}
@media(min-width:640px){.sndbtn{width:36px;height:36px}}
.sndbtn:hover{border-color:rgba(255,255,255,.4);color:#fff}
.sndbtn[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.3)}
.sndbtn svg{width:18px;height:18px}
/* menu links (desktop row) */
.links{display:flex;align-items:center;gap:2px}
.links>a,.ddbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:0;border-radius:10px;background:none;font:600 14px var(--sans);color:var(--ink-80);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .15s,background .15s}
.links>a:hover,.ddbtn:hover,.dd.open .ddbtn{color:#fff;background:rgba(255,255,255,.06)}
.ddbtn svg{width:12px;height:12px;transition:transform .16s}
.dd.open .ddbtn svg{transform:rotate(180deg)}
.menu-only{display:none}
.navfree{display:none;flex:none;font:600 14px var(--sans);color:var(--ink-80);text-decoration:none;white-space:nowrap;padding:8px 2px}
.navfree:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.btn.navcta{flex:none;padding:10px 18px;border-radius:999px;font-size:14.5px}
.burger{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.burger svg{width:22px;height:22px}
/* Tools ▾ dropdown (desktop): the Pitz "Solutions" pattern */
.dd{position:relative}
.ddpanel{position:absolute;top:calc(100% + 12px);left:-8px;width:360px;padding:8px;border-radius:14px;background:rgba(10,8,20,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s}
.ddpanel::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;border-radius:2px;background:var(--ramp-fb);background:var(--ramp)}
.ddpanel::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} /* hover bridge over the gap */
.dd.open .ddpanel{opacity:1;visibility:visible}
.ddg{display:block;padding:8px 10px 4px;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.ddsep{height:1px;margin:6px 6px;background:var(--line)}
.dditem{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border-radius:10px;color:#fff;text-decoration:none;transition:background .15s}
.dditem:hover,.dditem:focus-visible{background:rgba(255,255,255,.05)}
.ddi{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--amber);transition:background .15s,color .15s}
.ddi svg{width:20px;height:20px}
.dditem:hover .ddi,.dditem:focus-visible .ddi{background:var(--amber);color:#020617}
.ddt{display:flex;align-items:center;gap:8px;font:600 14px/1.3 var(--sans);color:#fff}
.ddb{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--dim)}
.dditem[aria-current="page"] .ddt::after{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber)}
/* what shows at each width: ≥1360 all in the row; below, one panel behind ☰. "Free scan" lives in the Tools
   dropdown, the panel and the hero, so the row does not carry it (Spanish + ATLAS SHIFTED would not fit otherwise) */
@media(max-width:1359.98px){
  .links{display:none}
  .burger{display:inline-flex}
  .ddbtn{display:none}
  .top.open .links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow:auto;overscroll-behavior:contain;padding:6px 20px 22px;background:#0a0814;border-bottom:1px solid var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .top.open .links>a{min-height:48px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:16px}
  .top.open .links>a:hover{background:none}
  .dd{border-bottom:1px solid var(--line);padding-bottom:6px}
  .ddpanel{position:static;width:auto;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;opacity:1;visibility:visible;transition:none}
  .ddpanel::before,.ddpanel::after{display:none}
  .ddg{padding:14px 4px 4px}
  .dditem{min-height:48px;padding:10px 4px}
  .ddt{font-size:16px}
  .menu-only{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:18px}
  .menu-only .btn{min-height:48px}
  .menu-only .langsw{align-self:flex-start}
  .menu-only .langsw button{min-width:56px;min-height:44px;font-size:13px}
}
@media(max-width:899.98px){.btn.navcta{display:none}}
@media(min-width:900px){#menuCta{display:none}}
@media(max-width:639.98px){.nav .langsw{display:none}}
@media(min-width:640px){.menu-only .langsw{display:none}}
/* anchor jumps land below the sticky header */
[id]{scroll-margin-top:88px}

/* ── ticker ── */
/* = aideazz.xyz/api's running line: full-bleed under the header, the brand ramp flowing through the words */
.ticker{position:relative;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;border-block:1px solid rgba(255,255,255,.1);padding:12px 0;background:rgba(var(--veil),.3)}
.ticker .track{display:flex;align-items:center;width:max-content;animation:az-ticker 30s linear infinite}
.ticker .tk{flex:none;font:500 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;background-image:var(--ramp-fb);background-image:var(--ramp);background-size:220%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:az-flow 5s linear infinite}
.ticker .tk b{font-weight:700}
.ticker .tdot{flex:none;width:4px;height:4px;margin:0 28px;border-radius:50%;background:rgba(252,211,77,.6)}
@media(max-width:639.98px){.ticker{padding:10px 0}.ticker .tk{font-size:12px}.ticker .tdot{margin:0 20px}}
@keyframes az-ticker{to{transform:translateX(-50%)}}

/* ── hero (.intro — NOT .hero, which is the Atlas "Today's move" card): text left, the real product right ── */
.intro{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "prod" "meta";gap:20px;padding:22px 0 36px;align-items:start}
@media(min-width:1024px){.intro{grid-template-columns:minmax(0,560px) minmax(0,1fr);grid-template-areas:"txt prod" "meta prod";grid-template-rows:auto 1fr;column-gap:48px;row-gap:24px;padding:56px 0 72px}}
.intro-txt{grid-area:txt;min-width:0}
.intro-meta{grid-area:meta;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.intro-prod{grid-area:prod;min-width:0}
/* Atlas: one column at every width (Elena, 20 Oct: Today's move lies under the headline) */
@media(min-width:1024px){.intro.stack{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "prod" "meta";grid-template-rows:auto;row-gap:28px;padding:40px 0 56px}.intro.stack .intro-txt{max-width:760px}.intro.stack .intro-prod{max-width:920px}}
.intro .glass{margin-top:0}
.hchip{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0;padding:7px 16px 7px 12px;border:1px solid var(--line-2);background:rgba(var(--veil),.5);font:500 11px/1.45 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.hchip i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber);animation:az-pulse 2s ease-in-out infinite}
.display{margin:14px 0 0;max-width:none;text-align:left;font:400 clamp(40px,3.4vw + 22px,66px)/1.02 var(--serif);letter-spacing:-.025em;text-shadow:0 1px 3px rgba(0,0,0,.75),0 2px 24px rgba(var(--veil),.85),0 2px 60px rgba(var(--veil),.75)}
.display em{font-style:italic;color:var(--amber)}
.sub{margin:16px 0 0;max-width:36rem;text-align:left;font-size:16px;line-height:1.6;color:#f3f4f6;text-shadow:0 1px 2px rgba(0,0,0,.9),0 1px 14px rgba(var(--veil),.95),0 1px 30px rgba(var(--veil),.9)}
.sub b{color:#fff;font-weight:700}
@media(min-width:640px){.sub{font-size:17.5px}}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;line-height:1.5;color:var(--ink-80);text-shadow:0 1px 2px rgba(0,0,0,.9),0 1px 14px rgba(var(--veil),.95)}
.ticks li::before{content:"✓";margin-right:6px;color:var(--ok-ink);font-weight:700}
.ticks b{color:#fff;font-weight:600}
.textlink{font:600 14px var(--sans);color:#fff;text-decoration:underline;text-decoration-color:rgba(237,184,103,.6);text-underline-offset:5px}
.textlink:hover{color:var(--amber-hi)}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* phones: the product (scan box / Today's move) must start inside the first screen, in Spanish too */
@media(max-width:639.98px){
  .intro{padding-top:10px;gap:14px}
  .intro .glass{padding:16px}
  #modeHint{margin-bottom:10px}
  .hchip{letter-spacing:.1em;padding:6px 14px 6px 10px}
  .display{margin-top:12px}
  .sub{margin-top:12px;font-size:15px;line-height:1.55}
  .ctas{margin-top:18px}
}

/* ── sections: eyebrow → H2 → one lede line → content; clear and tinted bands alternate ── */
.blk{padding:40px 0;scroll-margin-top:88px}
@media(min-width:640px){.blk{padding:56px 0}}
@media(min-width:1024px){.blk{padding:88px 0}}
/* tinted = a translucent full-bleed veil, so the film still shows through (never a solid colour) */
.blk.tint{background:rgba(var(--veil),.55);box-shadow:0 0 0 100vmax rgba(var(--veil),.55);clip-path:inset(0 -100vmax)}
.shead{max-width:56rem;margin:0 0 28px}
.shead .eyebrow{display:block;color:var(--amber);margin-bottom:10px}
.shead .h2{font:700 clamp(26px,1.6vw + 18px,36px)/1.1 var(--display);margin:0;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 24px rgba(var(--veil),.8)}
.shead .lede{margin:12px 0 0;max-width:46rem;color:var(--mut);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.shead .lede a{color:var(--lilac-2)}
.foot-note{margin-top:22px;font:500 12.5px/1.6 var(--mono);color:var(--body);text-shadow:0 1px 2px rgba(0,0,0,.95),0 1px 14px rgba(var(--veil),.95)}
.foot-note a{color:var(--lilac-2)}

/* ── two tools: whole-card links, the same items as the Tools menu ── */
.pickc{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:10px 12px;color:var(--body);text-decoration:none}
.pickc>h3,.pickc>p,.pickc>.go{grid-column:1/-1}
.pickc:hover{border-color:rgba(237,184,103,.5)}
.pickc .idx{align-self:center;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.pickc h3{margin:0;font:400 clamp(26px,1.2vw + 20px,34px)/1.08 var(--serif);letter-spacing:-.015em;color:#fff}
.pickc h3 em{font-style:italic;color:var(--amber)}
.pickc p{margin:0;font-size:14.5px;line-height:1.6}
.pickc .go{margin-top:auto;padding-top:6px;font:700 15px var(--sans);color:#fff}
.pickc:hover .go{color:var(--amber-hi)}
.pickc:hover .ddi{background:var(--amber);color:#020617}
.pickmore{margin:18px 0 0;font-size:14px;line-height:1.8;color:var(--mut)}
.pickmore a{color:var(--lilac-2);text-decoration:none;white-space:nowrap}
.pickmore a:hover{text-decoration:underline}

/* ── folds: one chevron for every <details> we add (lane cards, campaign drafts, results, FAQ) ── */
.fold>summary,.lanefold>summary,.cfold>summary,.muts>summary,.more>summary,.qa>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px}
.fold>summary::-webkit-details-marker,.lanefold>summary::-webkit-details-marker,.cfold>summary::-webkit-details-marker,.muts>summary::-webkit-details-marker,.more>summary::-webkit-details-marker,.qa>summary::-webkit-details-marker{display:none}
.fold>summary::after,.lanefold>summary::after,.cfold>summary::after,.muts>summary::after,.more>summary::after,.qa>summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:1.6px solid var(--ink-60);border-bottom:1.6px solid var(--ink-60);transform:translateY(-2px) rotate(45deg);transition:transform .16s}
.fold[open]>summary::after,.lanefold[open]>summary::after,.cfold[open]>summary::after,.muts[open]>summary::after,.more[open]>summary::after,.qa[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.fold{margin-top:40px}
details.fold>summary .eyebrow{margin:0}
details.fold[open]>summary{margin-bottom:12px}
.faq{max-width:56rem;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa>summary{min-height:56px;padding:12px 0}
.qa>summary h3{margin:0;font:600 17px/1.35 var(--display);letter-spacing:-.01em;color:#fff}
.qa>p{margin:0 0 18px;max-width:46rem;color:var(--body);font-size:15px;line-height:1.65}
.stillq{margin:22px 0 0;font-size:15px;color:var(--mut)}
.stillq a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(74,222,128,.6);text-underline-offset:4px}

/* ── glass widget + controls ── */
.glass{margin-top:34px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
@media(min-width:640px){.glass{padding:28px}}
.label{font:600 13.5px var(--sans);color:var(--lilac)}
.eyebrow{font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
/* the two scan modes: one 2-segment control (each half 44px+ tall; the sub-labels move to #modeHint on phones) */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:8px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03)}
.mode{min-height:44px;background:transparent;color:var(--ink-80);border:0;border-radius:10px;padding:8px 10px;font:600 13.5px/1.3 var(--sans);text-align:center;cursor:pointer;transition:all .15s}
.mode span{color:var(--ink-45);font-weight:500;font-size:12px}
.mode.on{background:#fff;color:#020617;box-shadow:0 0 0 1px var(--amber-hi),0 10px 34px -10px var(--glow)}
.mode.on span{color:#4b5563}
@media(max-width:639.98px){.mode span{display:none}}
#modeHint{margin:0 0 12px;text-align:center}
@media(min-width:640px){#modeHint{display:none}.modes{margin-bottom:14px}}
.inrow{display:flex;gap:10px;flex-wrap:wrap}
.field{flex:1;min-width:200px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-f);background:var(--field);color:#fff;font:16px var(--sans);outline:none;transition:border-color .15s}
.field:focus{border-color:var(--focus)}
select.field{flex:0 0 auto;min-width:150px;cursor:pointer}
select.field option{background:#0f172a;color:#fff}
/* scan row: the query takes a full row; country + the button share row 2 */
.scanrow>#q{flex:1 1 100%;min-width:0}
.scanrow>#country{flex:1 1 0;min-width:0}
.scanrow>#go{flex:none}
@media(max-width:639.98px){.scanrow>#go{padding:13px 16px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border:0;border-radius:var(--r-f);background:#fff;color:#020617;font:700 15.5px var(--sans);letter-spacing:-.02em;box-shadow:0 0 0 1px rgba(255,255,255,.6);cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap}
.btn:hover{box-shadow:0 0 0 1px var(--amber-hi),0 10px 34px -10px var(--glow)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:0 0 0 1px var(--line-2)}
.btn.ghost:hover{box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.btn-pill{border-radius:999px;padding:16px 34px;font-size:16.5px;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 25px 50px -12px rgba(0,0,0,.5)}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--amber-hi),0 18px 50px -12px var(--glow)}
.chips{margin-top:14px}
.chips .eyebrow{display:block;margin-bottom:8px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* phones: one horizontal snap-scroll row of markets */
@media(max-width:639.98px){.chiprow{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}.chiprow::-webkit-scrollbar{display:none}.chiprow .chip{flex:none;scroll-snap-align:start}}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.05);color:var(--ink-80);font:500 13px var(--sans);cursor:pointer;transition:all .15s;white-space:nowrap}
.chip:hover{border-color:rgba(255,255,255,.4);color:#fff}
.chip.on{background:rgba(237,184,103,.14);border-color:rgba(237,184,103,.6);color:#fff}
.chip small{font:500 10.5px var(--mono);color:var(--amber);letter-spacing:.06em}
.fine{margin-top:12px;font:500 11.5px var(--mono);color:var(--ink-45);letter-spacing:.02em;line-height:1.6}
.fine b{color:var(--ok-ink);font-weight:600}

/* ── progress feed ── */
.status{margin-top:18px;display:none}
.bar{height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.fill{height:100%;width:0;background:var(--ramp-fb);background:var(--ramp);background-size:220%;animation:az-flow 3s linear infinite;transition:width .4s ease}
.feed{font:12.5px/1.55 var(--mono);margin-top:12px;max-height:170px;overflow:auto;color:var(--dim);border-left:1px solid var(--line-2);padding-left:12px}
.feed .st{color:var(--amber)} .feed .er{color:var(--hot)}

/* ── result blocks ── */
.sec{margin-top:56px}
.sec>.eyebrow{display:block;margin-bottom:14px}
.h2{font:700 26px/1.2 var(--display);margin:0 0 6px}
.h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--amber);font-size:1.12em}
.lede{color:var(--dim);font-size:15px;line-height:1.6;margin:0 0 18px;max-width:44rem}
.card{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .15s}
.card:hover{border-color:rgba(192,132,252,.3)}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.grid3{grid-template-columns:repeat(3,1fr)}}
.err{padding:12px 16px;border:1px solid rgba(248,113,113,.3);border-radius:12px;background:var(--bad-bg);color:var(--bad-ink);font-size:14px}
.okmsg{padding:12px 16px;border:1px solid rgba(52,211,153,.3);border-radius:12px;background:var(--ok-bg);color:var(--ok-ink);font-size:14px}

/* ── lead form ── */
.lead{margin-top:16px}
.lead .inrow{margin-top:10px}
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lead p{margin:0;color:var(--body);font-size:15px;line-height:1.55}
.lead p b{color:#fff}

/* ── examples: the 7 creatives Atlas already shipped (never regenerated) ── */
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:min(62vw,230px);gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.reel{scroll-snap-align:start;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:rgba(0,0,0,.35);box-shadow:var(--shadow);position:relative}
.reel video,.reel img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0b0b14}
.reel .cap{padding:10px 12px 12px}
.reel .cap b{display:block;font:700 14px var(--display);color:#fff}
.reel .cap span{display:block;margin-top:4px;font:500 10.5px/1.5 var(--mono);color:var(--ink-45)}
.reel .tagdemo{position:absolute;top:10px;left:10px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.55);border:1px solid var(--line-2);border-radius:999px;padding:4px 9px;color:var(--ink-80)}

/* ── paid layers ── */
.tier{position:relative;display:flex;flex-direction:column;gap:10px}
.tier .n{font:500 11px var(--mono);letter-spacing:.16em;color:var(--amber);text-transform:uppercase}
.tier h3{margin:0;font:700 20px/1.25 var(--display)}
.tier .price{font:400 40px/1 var(--serif);color:#fff}
.tier .price.txt{font-size:26px;line-height:1.15;color:var(--amber)}
.tier .price small{font:500 13px var(--sans);color:var(--dim)}
.tier ul{margin:0;padding:0;list-style:none;color:var(--body);font-size:14px;line-height:1.55}
.tier li{padding:5px 0 5px 16px;border-left:1px solid var(--line);margin:2px 0}
.tier .btn{margin-top:auto}
.tier.hot{border-color:rgba(237,184,103,.45);background:linear-gradient(180deg,rgba(237,184,103,.08),rgba(255,255,255,.02))}
/* phones/tablets: the three offers sit side by side in one snap-scroll row (the next card peeks), like the Examples
   reel, instead of three full-height cards stacked */
@media(max-width:819.98px){
  #tiers{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,84%);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:thin}
  #tiers>.tier{scroll-snap-align:start}
}

/* ── how it works ── */
.how{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.how{grid-template-columns:repeat(3,1fr)}}
.how .card{font-size:14px;color:var(--body);line-height:1.55}
.how .card p{margin:0}
.how .idx{display:block;font:500 11px var(--mono);letter-spacing:.14em;color:var(--amber);margin-bottom:8px}
.how.four{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ── closing CTA + footer ── */
.cta-final{text-align:center}
.cta-final .fine{margin:16px auto 0;max-width:36rem;font-size:12px;color:var(--ink-60)}
.cta-final h2{font:400 40px/1.05 var(--serif);margin:0 auto 18px;max-width:40rem;text-shadow:0 2px 60px rgba(var(--veil),.85)}
.cta-final h2 em{font-style:italic;color:var(--amber)}
@media(min-width:640px){.cta-final h2{font-size:56px}}
.cta-final p{color:var(--body);max-width:36rem;margin:0 auto 26px;line-height:1.6}
.foot{margin-top:48px;padding-top:36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.foot a{color:var(--ink-80);text-decoration:none}.foot a:hover{color:#fff}
/* two columns on a phone too (as on /api), spread apart from 640px */
.foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:100%}
@media(min-width:640px){.foot .cols{display:flex;justify-content:space-between;gap:48px}}
.foot .cols div{display:flex;flex-direction:column;gap:11px}
/* phones: the Tools column is one full-width row of links above Resources | Company (it does not add a third column) */
@media(max-width:639.98px){.foot .cols>div:first-child{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 18px}.foot .cols>div:first-child .eyebrow{flex-basis:100%}}
.foot .cols a{font-size:15px}
.foot .cols a.hi{color:#fff}
.foot .rights{width:100%;margin-top:-12px;font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.foot .big{width:100%;margin-top:22px;font:400 clamp(1.1rem,3vw,2.2rem)/1.1 var(--serif);color:var(--ink-60)}

/* chat bubbles, as on aideazz.xyz/api: WhatsApp bottom-LEFT (HubSpot's launcher owns bottom-right) */
.wrap{padding-bottom:104px}
.wafloat{position:fixed;left:20px;bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-family:var(--sans)}
.wacard{width:288px;max-width:calc(100vw - 40px);border-radius:16px;overflow:hidden;border:1px solid rgba(74,222,128,.3);background:rgba(15,23,42,.95);box-shadow:0 25px 50px -12px rgba(34,197,94,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:wain .3s cubic-bezier(.2,.9,.3,1.2)}
.wacard[hidden]{display:none}
@keyframes wain{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
.wahead{display:flex;align-items:center;gap:12px;background:#16a34a;padding:12px 16px;color:#fff}
.wahead b{font-weight:600;font-size:15px}
.wastat{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:rgba(220,252,231,.8)}
.wastat.on{color:#fff}
.wadot{width:8px;height:8px;border-radius:999px;background:#fcd34d}
.wastat.on .wadot{background:#86efac}
.wax{background:none;border:0;padding:0;color:rgba(255,255,255,.8);cursor:pointer;display:flex}
.wax:hover{color:#fff}
.wabody{padding:16px;display:flex;flex-direction:column;gap:12px}
.wamsg{border-radius:0 12px 12px 12px;background:rgba(255,255,255,.1);padding:8px 12px;font-size:14px;line-height:1.45;color:#f3f4f6}
.wacta,.wabook{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 16px;font-weight:600;font-size:15px;text-decoration:none;transition:background .15s}
.wacta{background:#16a34a;color:#fff;box-shadow:0 10px 15px -3px rgba(34,197,94,.4)}
.wacta:hover{background:#22c55e}
.wabook{border:1px solid rgba(192,132,252,.4);background:rgba(147,51,234,.2);color:#f3e8ff}
.wabook:hover{background:rgba(147,51,234,.3)}
.walaunch{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.waping{position:absolute;inset:0;border-radius:999px;background:#22c55e;opacity:.6;animation:waping 1s cubic-bezier(0,0,.2,1) infinite}
.waping.two{background:#4ade80;opacity:.4;animation-delay:.6s}
@keyframes waping{75%,100%{transform:scale(2);opacity:0}}
.wabtn{position:relative;z-index:1;width:56px;height:56px;padding:0;border-radius:999px;border:0;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 15px -3px rgba(34,197,94,.5);animation:wawig 3.3s ease-in-out infinite;transition:background .15s}
.wabtn:hover{background:#22c55e}
@keyframes wawig{0%{transform:rotate(0) scale(1)}5%{transform:rotate(-12deg) scale(1.03)}10%{transform:rotate(12deg) scale(1.06)}16%{transform:rotate(-8deg) scale(1.04)}22%{transform:rotate(8deg) scale(1.02)}27%,100%{transform:rotate(0) scale(1)}}
.wafloat.open .waping{display:none}
.wafloat.open .wabtn{animation:none}
/* the Atlas evidence drawer slides in from the right; HubSpot's launcher would sit on its corner */
body:has(.drawer.open) #hubspot-messages-iframe-container{visibility:hidden!important}
@media(prefers-reduced-motion:reduce){
  .mark,.wordmark .w b,.ticker .track,.ticker .tk,.fill,.bd>.dots,.bd .ray,.bd>.sweep,.waping,.wabtn,.wacard,.hchip i,.annc .dot{animation:none}
  .ddpanel,.ddbtn svg,summary::after{transition:none}
  .bd>video{display:none}
}