/* ============================================================
   LinkNTool — logged-out prototype styles
   Teal → Payout-Gold identity · Space Grotesk / Inter / JetBrains Mono
   ============================================================ */

/* ---------- Design tokens (light default) ---------- */
:root{
  --color-primary:#0DBFA3; --color-primary-dark:#0A9A84;
  --color-accent:#FFB020;  --color-accent-dark:#E6971A; --color-accent-2:#2E7DF6;
  --color-bg:#F7FBFA; --color-surface:#FFFFFF; --color-surface-alt:#F0F6F4;
  --color-elevated:#FFFFFF;
  --color-border:#E3EAE8; --color-border-strong:#CFDBD8;
  --color-text:#0B1F1C; --color-text-muted:#5C726E; --color-text-ondark:#E8F1EF;
  --color-success:#16A34A; --color-warning:#F59E0B; --color-danger:#EF4444;
  --chip-bg:#EAF5F2; --chip-text:#0A6F60;
  --hero-ink:#EAFBF6; --hero-ink-muted:#A7E6D6;

  --hero-gradient:linear-gradient(135deg,#06322F 0%,#0C8E7C 40%,#12C7A6 70%,#57E6C6 100%);
  --cta-gradient:linear-gradient(135deg,#12C7A6 0%,#0DBFA3 55%,#0A9A84 100%);
  --gold-gradient:linear-gradient(135deg,#FFC64D 0%,#FFB020 55%,#F59E0B 100%);

  --font-heading:"Space Grotesk",ui-sans-serif,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --tnum:"tnum" 1,"lnum" 1;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
  --container:1180px; --gutter:20px;

  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:28px;--r-pill:999px;

  --sh-sm:0 1px 2px rgba(11,31,28,.06);
  --sh-md:0 4px 14px rgba(11,31,28,.08);
  --sh-lg:0 14px 36px rgba(11,31,28,.10);
  --sh-xl:0 28px 64px rgba(6,50,47,.16);
  --glow-teal:0 8px 26px rgba(13,191,163,.30);
  --glow-gold:0 8px 24px rgba(255,176,32,.34);
  --focus-ring:0 0 0 3px rgba(13,191,163,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:200ms;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --color-bg:#06110F; --color-surface:#0C1A18; --color-surface-alt:#0F211E;
    --color-elevated:#132825;
    --color-border:rgba(255,255,255,.09); --color-border-strong:rgba(255,255,255,.16);
    --color-text:#E8F1EF; --color-text-muted:#8FA6A1;
    --chip-bg:rgba(13,191,163,.13); --chip-text:#57E6C6;
    --sh-sm:0 1px 2px rgba(0,0,0,.5);
    --sh-md:0 4px 14px rgba(0,0,0,.45);
    --sh-lg:0 14px 36px rgba(0,0,0,.5);
    --sh-xl:0 28px 64px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="light"]{
  --color-bg:#F7FBFA; --color-surface:#FFFFFF; --color-surface-alt:#F0F6F4; --color-elevated:#FFFFFF;
  --color-border:#E3EAE8; --color-border-strong:#CFDBD8;
  --color-text:#0B1F1C; --color-text-muted:#5C726E;
  --chip-bg:#EAF5F2; --chip-text:#0A6F60;
  --sh-sm:0 1px 2px rgba(11,31,28,.06);--sh-md:0 4px 14px rgba(11,31,28,.08);
  --sh-lg:0 14px 36px rgba(11,31,28,.10);--sh-xl:0 28px 64px rgba(6,50,47,.16);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --color-bg:#06110F; --color-surface:#0C1A18; --color-surface-alt:#0F211E; --color-elevated:#132825;
  --color-border:rgba(255,255,255,.09); --color-border-strong:rgba(255,255,255,.16);
  --color-text:#E8F1EF; --color-text-muted:#8FA6A1;
  --chip-bg:rgba(13,191,163,.13); --chip-text:#57E6C6;
  --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 4px 14px rgba(0,0,0,.45);
  --sh-lg:0 14px 36px rgba(0,0,0,.5);--sh-xl:0 28px 64px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul{margin:0}
.tnum{font-feature-settings:var(--tnum)}
.mono{font-family:var(--font-mono)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--color-primary);color:#03110E;padding:10px 18px;border-radius:var(--r-md);font-weight:600;font-family:var(--font-heading)}
.skip:focus{left:12px}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-24)}
.section--tight{padding-block:var(--sp-16)}
.section-head{max-width:640px;margin-bottom:var(--sp-10)}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-heading);font-size:.75rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--color-primary-dark);margin-bottom:var(--sp-4);
}
:root[data-theme="dark"] .eyebrow,@media(prefers-color-scheme:dark){.eyebrow{color:var(--color-primary)}}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--color-primary)}
.section-head h2{font-size:clamp(1.75rem,4vw,2.25rem);margin-bottom:var(--sp-4)}
.section-head p{color:var(--color-text-muted);font-size:1.0625rem}
.lead{font-size:1.125rem;line-height:1.6;color:var(--color-text-muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-heading);font-weight:600;font-size:.95rem;
  padding:12px 22px;border-radius:var(--r-md);white-space:nowrap;
  transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
  will-change:transform;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--cta-gradient);color:#03110E;box-shadow:var(--glow-teal)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(13,191,163,.42)}
.btn--gold{background:var(--gold-gradient);color:#3A2600;box-shadow:var(--glow-gold)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,176,32,.46)}
.btn--ghost{background:var(--color-surface);color:var(--color-text);border:1.5px solid var(--color-border-strong)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary-dark)}
:root[data-theme="dark"] .btn--ghost:hover{color:var(--color-primary)}
.btn--onhero{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn--onhero:hover{background:rgba(255,255,255,.22)}
.btn--lg{padding:15px 28px;font-size:1.05rem;border-radius:var(--r-lg)}
.btn--sm{padding:9px 16px;font-size:.85rem}
.btn--block{width:100%}
.btn--link{background:none;color:var(--color-primary-dark);padding:0;font-weight:600}
:root[data-theme="dark"] .btn--link{color:var(--color-primary)}
.btn--link:hover{text-decoration:underline}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:600;font-size:1.28rem;letter-spacing:-.02em;color:var(--color-text)}
.logo__mark{width:34px;height:34px;flex:none}
.logo__word{display:inline-flex}
.logo__word .n{color:var(--color-primary)}
.logo--onhero{color:#fff}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--color-surface);background:color-mix(in srgb,var(--color-surface) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:box-shadow var(--dur),border-color var(--dur);border-bottom:1px solid transparent}
.nav__inner{display:flex;align-items:center;gap:var(--sp-6);height:68px}
.nav--scrolled{border-bottom:1px solid var(--color-border);box-shadow:var(--sh-sm)}
.nav__links{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}
.nav__link{position:relative;padding:9px 13px;border-radius:var(--r-sm);font-size:.94rem;font-weight:500;color:var(--color-text-muted);transition:color var(--dur),background var(--dur)}
.nav__link:hover{color:var(--color-text);background:var(--color-surface-alt)}
.nav__link.active{color:var(--color-primary-dark)}
:root[data-theme="dark"] .nav__link.active{color:var(--color-primary)}
.nav__actions{display:flex;align-items:center;gap:var(--sp-3)}
/* dropdown */
.nav__drop{position:relative}
.nav__menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:280px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:var(--sp-2);
  opacity:0;visibility:hidden;transition:opacity var(--dur),transform var(--dur);z-index:70;
}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-md);transition:background var(--dur)}
.nav__menu a:hover{background:var(--color-surface-alt)}
.nav__menu .mi{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--chip-bg);color:var(--color-primary-dark)}
:root[data-theme="dark"] .nav__menu .mi{color:var(--color-primary)}
.nav__menu .mt{font-family:var(--font-heading);font-weight:600;font-size:.92rem}
.nav__menu .md{font-size:.8rem;color:var(--color-text-muted)}
.nav__caret{width:14px;height:14px;transition:transform var(--dur)}
.nav__drop:hover .nav__caret{transform:rotate(180deg)}
.theme-toggle{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:var(--color-text);border-color:var(--color-border-strong)}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun,@media(prefers-color-scheme:dark){.theme-toggle .sun{display:none}}
:root[data-theme="dark"] .theme-toggle .moon,@media(prefers-color-scheme:dark){.theme-toggle .moon{display:block}}
:root[data-theme="light"] .theme-toggle .sun{display:block}
:root[data-theme="light"] .theme-toggle .moon{display:none}
.hamburger{display:none;width:42px;height:42px;border-radius:var(--r-md);border:1px solid var(--color-border);place-items:center}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(6,17,15,.5);opacity:0;transition:opacity var(--dur)}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(340px,86vw);background:var(--color-surface);box-shadow:var(--sh-xl);transform:translateX(100%);transition:transform var(--dur) var(--ease);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);overflow-y:auto}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.drawer a.dl{padding:13px 12px;border-radius:var(--r-md);font-family:var(--font-heading);font-weight:500;color:var(--color-text)}
.drawer a.dl:hover{background:var(--color-surface-alt)}
.drawer__group-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);padding:12px 12px 4px;font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--hero-gradient);color:var(--hero-ink);overflow:hidden;border-radius:0 0 var(--r-2xl) var(--r-2xl)}
.hero__aura{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 50% at 88% 8%,rgba(255,176,32,.42),transparent 60%),
    radial-gradient(32% 45% at 12% 92%,rgba(87,230,198,.35),transparent 60%);
  animation:auraDrift 14s var(--ease) infinite alternate}
.hero__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
@keyframes auraDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.hero__aura{animation:none}}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center;padding-block:var(--sp-16) var(--sp-20)}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.82rem;font-weight:500;margin-bottom:var(--sp-6);backdrop-filter:blur(6px)}
.hero__badge b{background:var(--color-accent);color:#3A2600;font-family:var(--font-heading);font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:var(--r-pill)}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.04;letter-spacing:-.03em;color:#fff;margin-bottom:var(--sp-5)}
.hero h1 .grad{background:linear-gradient(120deg,#FFD98A,#FFB020);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{font-size:1.15rem;line-height:1.55;color:var(--hero-ink);max-width:34ch;margin-bottom:var(--sp-8);opacity:.94}
.hero__trustrow{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-8);color:var(--hero-ink-muted);font-size:.86rem}
.hero__trustrow b{color:#fff}
.hero__trustrow .tick{color:#57E6C6}

/* aside stat panel in hero */
.hero__aside{display:flex;flex-direction:column;gap:var(--sp-4)}
.glasscard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-xl);padding:var(--sp-6);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(3,20,18,.35)}
.glasscard__big{font-family:var(--font-heading);font-weight:700;font-size:2.6rem;color:#fff;letter-spacing:-.02em}
.hero__proofstrip{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.pay-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:5px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:#fff}

/* ---------- Tool card (hero centerpiece + tool pages) ---------- */
.toolcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-2xl);box-shadow:var(--sh-xl);padding:var(--sp-5)}
.toolcard__tabs{display:flex;gap:4px;background:var(--color-surface-alt);border-radius:var(--r-md);padding:4px;margin-bottom:var(--sp-5)}
.toolcard__tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:var(--r-sm);font-family:var(--font-heading);font-weight:600;font-size:.86rem;color:var(--color-text-muted);transition:color var(--dur)}
.toolcard__tab svg{width:16px;height:16px}
.toolcard__tab.active{background:var(--color-surface);color:var(--color-primary-dark);box-shadow:var(--sh-sm)}
:root[data-theme="dark"] .toolcard__tab.active{color:var(--color-primary)}
.toolcard__label{font-size:.82rem;font-weight:600;color:var(--color-text-muted);margin-bottom:var(--sp-2);display:block}
.inputrow{display:flex;gap:var(--sp-3);align-items:stretch}
.field{flex:1;display:flex;align-items:center;gap:8px;background:var(--color-surface-alt);border:1.5px solid var(--color-border);border-radius:var(--r-md);padding:0 14px;transition:border-color var(--dur),box-shadow var(--dur)}
.field:focus-within{border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.field .lead-ic{color:var(--color-text-muted);flex:none}
.field input{flex:1;border:none;background:none;color:var(--color-text);padding:14px 0;min-width:0}
.field input::placeholder{color:var(--color-text-muted)}
.field .clr{color:var(--color-text-muted);padding:4px;border-radius:var(--r-pill);display:none}
.field.has-val .clr{display:inline-flex}
.toolcard__hint{font-size:.8rem;color:var(--color-text-muted);margin-top:var(--sp-3);display:flex;align-items:center;gap:6px}
@media (max-width:560px){.inputrow{flex-direction:column}}

/* result card */
.result{margin-top:var(--sp-4);border:1px solid var(--color-border);border-radius:var(--r-lg);overflow:hidden;animation:pop .34s var(--ease-spring)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.result{animation:none}}
.result__top{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);background:var(--color-surface-alt)}
.result__link{flex:1;min-width:0;font-family:var(--font-mono);font-size:1.02rem;color:var(--color-primary-dark);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme="dark"] .result__link{color:var(--color-primary)}
.result__actions{display:flex;gap:6px}
.iconbtn{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);transition:all var(--dur)}
.iconbtn:hover{color:var(--color-primary-dark);border-color:var(--color-primary)}
.iconbtn svg{width:18px;height:18px}
.result__earn{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);background:linear-gradient(90deg,rgba(255,176,32,.14),rgba(255,176,32,.04));border-top:1px solid var(--color-border)}
.result__earn .em{font-size:.9rem}
.result__earn .em b{color:var(--color-text)}
.sharebar{display:flex;gap:8px;padding:var(--sp-3) var(--sp-4);flex-wrap:wrap;align-items:center;border-top:1px solid var(--color-border)}
.sharebar .lbl{font-size:.78rem;color:var(--color-text-muted);margin-right:2px}
.share{width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;color:#fff}
.share.wa{background:#25D366}.share.tg{background:#2AABEE}.share.x{background:#111}.share.cp{background:var(--color-primary)}
:root[data-theme="dark"] .share.x{background:#333}
.poweredby{margin-left:auto;font-size:.72rem;color:var(--color-text-muted)}

/* ---------- Trust stats band ---------- */
.statband{background:var(--color-surface);border-block:1px solid var(--color-border)}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.stat{padding:var(--sp-4) 0}
.stat__num{font-family:var(--font-heading);font-weight:700;font-size:2.4rem;letter-spacing:-.02em;line-height:1;color:var(--color-text)}
.stat__num .cur{color:var(--color-primary)}
.stat__label{font-size:.9rem;color:var(--color-text-muted);margin-top:var(--sp-2)}
.stat__trend{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;color:var(--color-success);margin-top:6px}
.paywall{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:center;margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px dashed var(--color-border)}
.paylogo{font-family:var(--font-heading);font-weight:600;font-size:.9rem;color:var(--color-text-muted);opacity:.9;padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--r-pill)}

/* ---------- Earnings calculator ---------- */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-8);align-items:stretch;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-2xl);padding:var(--sp-8);box-shadow:var(--sh-lg)}
.calc__field{margin-bottom:var(--sp-6)}
.calc__field:last-child{margin-bottom:0}
.calc__flabel{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.92rem;margin-bottom:var(--sp-3)}
.calc__flabel .val{font-family:var(--font-heading);color:var(--color-primary-dark);font-size:1.05rem}
:root[data-theme="dark"] .calc__flabel .val{color:var(--color-primary)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--r-pill);background:var(--color-surface-alt);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--cta-gradient);border:3px solid var(--color-surface);box-shadow:var(--glow-teal);cursor:pointer}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--color-primary);border:3px solid var(--color-surface);cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-opt{padding:9px 14px;border-radius:var(--r-pill);border:1.5px solid var(--color-border);font-size:.85rem;font-weight:600;color:var(--color-text-muted);transition:all var(--dur)}
.chip-opt.active{border-color:var(--color-primary);background:var(--chip-bg);color:var(--chip-text)}
.stepper{display:inline-flex;align-items:center;gap:var(--sp-3);background:var(--color-surface-alt);border-radius:var(--r-pill);padding:5px}
.stepper button{width:34px;height:34px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);font-size:1.2rem;line-height:1;color:var(--color-text)}
.stepper .sv{min-width:44px;text-align:center;font-family:var(--font-heading);font-weight:600}
.calc__out{background:var(--hero-gradient);color:#fff;border-radius:var(--r-xl);padding:var(--sp-8);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc__out::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 90% 10%,rgba(255,176,32,.4),transparent 60%);pointer-events:none}
.calc__out .k{position:relative;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hero-ink-muted);font-family:var(--font-heading);font-weight:600}
.calc__big{position:relative;font-family:var(--font-heading);font-weight:700;font-size:3rem;letter-spacing:-.02em;margin:8px 0 2px;color:#fff}
.calc__yr{position:relative;color:var(--hero-ink);font-size:1rem;margin-bottom:var(--sp-4)}
.calc__yr b{color:#FFD98A}
.calc__rpm{position:relative;font-size:.82rem;color:var(--hero-ink-muted);border-top:1px solid rgba(255,255,255,.16);padding-top:var(--sp-4);margin-top:auto}
.calc__keep{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:#57E6C6;font-weight:600;margin-top:8px}
@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* ---------- Steps / how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);counter-reset:step}
.step{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp-6);transition:transform var(--dur),box-shadow var(--dur)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.step__n{counter-increment:step;width:38px;height:38px;border-radius:12px;background:var(--chip-bg);color:var(--color-primary-dark);font-family:var(--font-heading);font-weight:700;display:grid;place-items:center;margin-bottom:var(--sp-4)}
:root[data-theme="dark"] .step__n{color:var(--color-primary)}
.step__n::before{content:counter(step)}
.step h3{font-size:1.1rem;margin-bottom:var(--sp-2)}
.step p{font-size:.92rem;color:var(--color-text-muted)}
.step__line{position:absolute;top:42px;right:-13px;width:26px;height:2px;background:var(--color-border);z-index:1}
.step:last-child .step__line{display:none}

/* ---------- Feature grid & tool showcase ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.fcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp-6);transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur)}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--color-border-strong)}
.ficon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--chip-bg);color:var(--color-primary-dark);margin-bottom:var(--sp-4)}
:root[data-theme="dark"] .ficon{color:var(--color-primary)}
.ficon.gold{background:rgba(255,176,32,.16);color:var(--color-accent-dark)}
:root[data-theme="dark"] .ficon.gold{color:var(--color-accent)}
.ficon svg{width:24px;height:24px}
.fcard h3{font-size:1.2rem;margin-bottom:var(--sp-2)}
.fcard p{color:var(--color-text-muted);font-size:.94rem;margin-bottom:var(--sp-4)}
.toolshow{position:relative;overflow:hidden}
.toolshow .preview{margin-top:var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--color-border);background:var(--color-surface-alt);padding:var(--sp-4);min-height:120px;display:grid;place-items:center}

/* ---------- Product mockups ---------- */
.mock-analytics{width:100%}
.mock-bars{display:flex;align-items:flex-end;gap:7px;height:74px}
.mock-bars span{flex:1;background:var(--cta-gradient);border-radius:4px 4px 0 0;opacity:.9}
.mock-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--color-text-muted);margin-top:8px}
.mock-receipt{width:100%;font-family:var(--font-mono);font-size:.8rem}
.mock-receipt .rr{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--color-border)}
.mock-receipt .rr b{color:var(--color-success)}

/* ---------- Payout table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--r-lg);background:var(--color-surface)}
table.payout{width:100%;border-collapse:collapse;min-width:520px}
table.payout th,table.payout td{padding:14px 18px;text-align:left;font-size:.92rem}
table.payout thead th{position:sticky;top:0;background:var(--color-surface-alt);font-family:var(--font-heading);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);z-index:1}
table.payout tbody tr{border-bottom:1px solid var(--color-border)}
table.payout tbody tr:last-child{border-bottom:none}
table.payout tbody tr:hover{background:var(--color-surface-alt)}
table.payout td.num{text-align:right;font-family:var(--font-mono);font-feature-settings:var(--tnum);color:var(--color-text);font-weight:500}
.flagchip{display:inline-flex;align-items:center;gap:9px;font-weight:500}
.flagchip .fl{font-size:1.1rem}
.tier{display:inline-block;font-size:.7rem;font-weight:700;font-family:var(--font-heading);padding:3px 8px;border-radius:var(--r-pill)}
.tier.t1{background:rgba(255,176,32,.16);color:var(--color-accent-dark)}
.tier.t2{background:var(--chip-bg);color:var(--chip-text)}
.tier.t3{background:var(--color-surface-alt);color:var(--color-text-muted)}
:root[data-theme="dark"] .tier.t1{color:var(--color-accent)}
.updated{font-size:.8rem;color:var(--color-text-muted);display:inline-flex;align-items:center;gap:6px}
.updated .dot{width:7px;height:7px;border-radius:50%;background:var(--color-success)}

/* ---------- Testimonials & proof ---------- */
.tcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.tcard__quote{font-size:1rem;line-height:1.55}
.tcard__quote .amt{color:var(--color-success);font-weight:700;font-family:var(--font-mono)}
.tcard__by{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-heading);font-weight:700;color:#fff;flex:none}
.tcard__name{font-family:var(--font-heading);font-weight:600;font-size:.94rem}
.tcard__role{font-size:.8rem;color:var(--color-text-muted)}
.proofgal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.proof{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp-4);position:relative}
.proof__head{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--color-text-muted);margin-bottom:8px}
.proof__amt{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;color:var(--color-success)}
.proof__meth{font-size:.82rem;color:var(--color-text-muted);margin-top:2px}
.proof__badge{position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:700;color:var(--color-success);background:rgba(22,163,74,.12);padding:3px 8px;border-radius:var(--r-pill)}
.ticker{display:flex;flex-direction:column;gap:8px}
.ticker__row{display:flex;align-items:center;gap:10px;font-size:.86rem;padding:10px 14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-md)}
.ticker__row .amt{margin-left:auto;font-family:var(--font-mono);font-weight:600;color:var(--color-success)}
.ticker__row .ago{color:var(--color-text-muted);font-size:.78rem}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.faq__item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);overflow:hidden}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5);text-align:left;font-family:var(--font-heading);font-weight:600;font-size:1.02rem}
.faq__q .ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--color-surface-alt);display:grid;place-items:center;transition:transform var(--dur),background var(--dur)}
.faq__item.open .faq__q .ic{transform:rotate(45deg);background:var(--color-primary);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
.faq__a-inner{padding:0 var(--sp-5) var(--sp-5);color:var(--color-text-muted);line-height:1.6}

/* ---------- CTA band ---------- */
.ctaband{position:relative;background:var(--hero-gradient);color:#fff;border-radius:var(--r-2xl);padding:var(--sp-16) var(--sp-8);text-align:center;overflow:hidden}
.ctaband__aura{position:absolute;inset:0;background:radial-gradient(45% 60% at 85% 15%,rgba(255,176,32,.4),transparent 60%),radial-gradient(40% 50% at 10% 90%,rgba(87,230,198,.35),transparent 60%)}
.ctaband h2{position:relative;font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;margin-bottom:var(--sp-4)}
.ctaband p{position:relative;color:var(--hero-ink);max-width:56ch;margin-inline:auto;margin-bottom:var(--sp-8);font-size:1.08rem}
.ctaband__btns{position:relative;display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap}
.ctaband__fine{position:relative;margin-top:var(--sp-5);font-size:.82rem;color:var(--hero-ink-muted)}

/* ---------- Breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--color-text-muted);padding-block:var(--sp-6) 0}
.crumb a:hover{color:var(--color-primary-dark)}
.crumb .sep{opacity:.5}

/* ---------- Tool page hero (lighter than home hero) ---------- */
.toolhero{background:var(--color-surface-alt);border-bottom:1px solid var(--color-border)}
.toolhero__inner{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--sp-12);align-items:center;padding-block:var(--sp-12) var(--sp-16)}
.toolhero h1{font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.06;margin-bottom:var(--sp-4)}
.toolhero .bullets{display:flex;flex-direction:column;gap:12px;margin-top:var(--sp-6)}
.toolhero .bullets li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;list-style:none}
.toolhero .bullets .bi{flex:none;width:24px;height:24px;border-radius:7px;background:var(--chip-bg);color:var(--color-primary-dark);display:grid;place-items:center}
:root[data-theme="dark"] .toolhero .bullets .bi{color:var(--color-primary)}
.toolhero .bullets b{font-weight:600}

/* ---------- QR tool ---------- */
.qrwrap{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-6)}
.qrpreview{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);position:sticky;top:88px;height:max-content}
.qrframe{width:230px;height:230px;background:#fff;border-radius:var(--r-md);display:grid;place-items:center;box-shadow:var(--sh-md);padding:14px}
.qrframe canvas{width:100%;height:100%;image-rendering:pixelated}
.qr-exports{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.qr-chip{font-family:var(--font-mono);font-size:.74rem;font-weight:600;padding:6px 11px;border-radius:var(--r-sm);border:1px solid var(--color-border);color:var(--color-text-muted);transition:all var(--dur)}
.qr-chip:hover{border-color:var(--color-primary);color:var(--color-primary-dark)}
.qr-controls .cg{margin-bottom:var(--sp-5)}
.qr-controls label.cl{font-size:.82rem;font-weight:600;display:block;margin-bottom:8px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:8px;border:2px solid var(--color-border);cursor:pointer;transition:transform var(--dur)}
.sw.active{border-color:var(--color-text);transform:scale(1.08)}
.type-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.type-tab{font-size:.8rem;font-weight:600;padding:7px 12px;border-radius:var(--r-pill);border:1.5px solid var(--color-border);color:var(--color-text-muted)}
.type-tab.active{border-color:var(--color-primary);background:var(--chip-bg);color:var(--chip-text)}
@media (max-width:720px){.qrwrap{grid-template-columns:1fr}.qrpreview{position:static}}

/* ---------- Downloader tool ---------- */
.dl-detect{display:flex;align-items:center;gap:10px;margin-top:var(--sp-3);font-size:.86rem;color:var(--color-text-muted)}
.platform-chip{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.82rem;padding:6px 12px;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--chip-text)}
.dl-rows{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-4)}
.dl-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--color-border);border-radius:var(--r-md);background:var(--color-surface)}
.dl-q{font-family:var(--font-heading);font-weight:700;font-size:.9rem;padding:5px 10px;border-radius:var(--r-sm);background:var(--color-surface-alt)}
.dl-meta{font-size:.8rem;color:var(--color-text-muted)}
.dl-size{margin-left:auto;font-family:var(--font-mono);font-size:.82rem;color:var(--color-text-muted)}
.skel{background:linear-gradient(90deg,var(--color-surface-alt) 25%,var(--color-border) 37%,var(--color-surface-alt) 63%);background-size:400% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.thumb-mock{width:120px;height:68px;border-radius:var(--r-sm);flex:none;background:linear-gradient(135deg,#0C8E7C,#57E6C6);display:grid;place-items:center;color:#fff}

/* platform brand dots */
.pdot{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;font-family:var(--font-heading);font-weight:700}
.pdot.yt{background:#FF0000}.pdot.tk{background:#111}.pdot.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}.pdot.tw{background:#111}.pdot.fb{background:#1877F2}
:root[data-theme="dark"] .pdot.tk,:root[data-theme="dark"] .pdot.tw{background:#333}

/* ---------- Auth forms ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:calc(100vh - 68px)}
.auth__form{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-16) var(--sp-12);max-width:520px;margin-inline:auto;width:100%}
.auth__aside{background:var(--hero-gradient);color:#fff;padding:var(--sp-16) var(--sp-12);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth__aside .aura{position:absolute;inset:0;background:radial-gradient(50% 50% at 80% 10%,rgba(255,176,32,.35),transparent 60%)}
.formfield{margin-bottom:var(--sp-4)}
.formfield label{display:block;font-size:.86rem;font-weight:600;margin-bottom:8px}
.formfield input{width:100%;padding:14px 16px;border-radius:var(--r-md);border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}
.formfield input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border:1.5px solid var(--color-border);border-radius:var(--r-md);font-weight:600;background:var(--color-surface);transition:border-color var(--dur)}
.oauth:hover{border-color:var(--color-border-strong)}
.divider{display:flex;align-items:center;gap:14px;color:var(--color-text-muted);font-size:.82rem;margin:var(--sp-5) 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--color-border)}
.vprops{display:flex;flex-direction:column;gap:var(--sp-4);position:relative}
.vprops li{display:flex;gap:12px;align-items:flex-start;list-style:none}
.vprops .vi{flex:none;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.vprops b{color:#fff}.vprops span{color:var(--hero-ink)}
.trust-microcopy{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-6);font-size:.82rem;color:var(--color-text-muted)}
.trust-microcopy div{display:flex;align-items:center;gap:8px}
@media (max-width:820px){.auth{grid-template-columns:1fr}.auth__aside{display:none}}

/* ---------- Cross-tool cards ---------- */
.crosscard{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);transition:transform var(--dur),box-shadow var(--dur)}
.crosscard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.crosscard.earn{background:linear-gradient(120deg,rgba(255,176,32,.1),rgba(255,176,32,.02));border-color:rgba(255,176,32,.3)}

/* ---------- Trust chips strip ---------- */
.trustchips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tchip{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:500;color:var(--color-text-muted);padding:9px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-pill)}
.tchip svg{width:16px;height:16px;color:var(--color-primary)}

/* ---------- Footer ---------- */
.footer{background:var(--color-surface);border-top:1px solid var(--color-border);margin-top:var(--sp-24)}
.footer__trustbar{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;justify-content:center;padding-block:var(--sp-8);border-bottom:1px solid var(--color-border);text-align:center}
.footer__trustbar .fi{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--color-text-muted)}
.footer__trustbar .fi b{color:var(--color-text);font-family:var(--font-heading)}
.footer__cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-8);padding-block:var(--sp-16)}
.footer__brand p{color:var(--color-text-muted);font-size:.9rem;margin-top:var(--sp-4);max-width:32ch}
.footer h4{font-family:var(--font-heading);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--sp-4)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0}
.footer ul a{font-size:.9rem;color:var(--color-text);opacity:.8;transition:opacity var(--dur),color var(--dur)}
.footer ul a:hover{opacity:1;color:var(--color-primary-dark)}
:root[data-theme="dark"] .footer ul a:hover{color:var(--color-primary)}
.footer__bottom{border-top:1px solid var(--color-border);padding-block:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;font-size:.84rem;color:var(--color-text-muted)}
.footer__referral{background:linear-gradient(120deg,rgba(255,176,32,.1),transparent);border:1px solid rgba(255,176,32,.28);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;margin-block:var(--sp-8)}
.footer__referral b{font-family:var(--font-heading)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);z-index:200;background:var(--color-text);color:var(--color-bg);padding:13px 20px;border-radius:var(--r-pill);font-size:.9rem;font-weight:600;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;transition:transform .3s var(--ease-spring);white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:var(--color-primary)}

/* ---------- Pages routing ---------- */
.page{display:none}
.page.active{display:block;animation:fadeUp .4s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page.active{animation:none}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-10);padding-block:var(--sp-10) var(--sp-16)}
  .toolhero__inner{grid-template-columns:1fr;gap:var(--sp-8)}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step__line{display:none}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer__cols{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .proofgal{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav__links{display:none}
  .hamburger{display:grid}
  .nav__actions .btn--gold{display:none}
  .section{padding-block:var(--sp-16)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .proofgal{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.1rem}
}
@media (max-width:420px){
  .statgrid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .proofgal{grid-template-columns:1fr}
}

/* ================= LIVE ADAPTATION ================= */
/* Skin AdLinkFly's real shorten form (Element/shorten.ctp) to match the hero */
.shorten-live{margin-top:0}
#shorten{display:flex;gap:12px;width:100%;margin:0}
#shorten .form-group{display:flex;gap:12px;flex:1;margin:0;width:100%;align-items:stretch}
#shorten .form-control{flex:1;min-width:0;background:var(--color-surface-alt);border:1.5px solid var(--color-border);border-radius:var(--r-md);padding:15px 16px;color:var(--color-text);font-size:1rem;font-family:var(--font-body);transition:border-color var(--dur),box-shadow var(--dur)}
#shorten .form-control:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--focus-ring)}
#shorten .form-control::placeholder{color:var(--color-text-muted)}
#shorten .btn-captcha{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cta-gradient);color:#03110E;border:none;border-radius:var(--r-md);padding:0 26px;font-family:var(--font-heading);font-weight:600;font-size:1rem;box-shadow:var(--glow-teal);white-space:nowrap;cursor:pointer;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur)}
#shorten .btn-captcha img{display:none}
#shorten .btn-captcha::after{content:"Shorten link"}
#shorten .btn-captcha:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(13,191,163,.42)}
@media (max-width:560px){#shorten,#shorten .form-group{flex-direction:column}}
/* AJAX result injected by front.js into .add-link-result */
.add-link-result{margin-top:16px}
.add-link-result:empty{display:none}
.add-link-result .form-group,.add-link-result .input-group{display:flex;gap:8px;align-items:center;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--r-lg);padding:10px 12px}
.add-link-result .form-control{flex:1;min-width:0;background:transparent;border:none;font-family:var(--font-mono);color:var(--color-primary-dark);font-size:1rem;padding:6px}
.add-link-result .btn,.add-link-result button{background:var(--color-primary);color:#03110E;border:none;border-radius:var(--r-md);padding:10px 16px;font-family:var(--font-heading);font-weight:600;cursor:pointer;white-space:nowrap}
.add-link-result a{color:var(--color-primary-dark);font-weight:600}
:root[data-theme="dark"] .add-link-result a,:root[data-theme="dark"] .add-link-result .form-control{color:var(--color-primary)}
.result-earn-nudge{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:12px;background:linear-gradient(90deg,rgba(255,176,32,.14),rgba(255,176,32,.04));border:1px solid rgba(255,176,32,.28);border-radius:var(--r-lg);font-size:.92rem}
/* "coming soon" ribbon for unbuilt tools */
.soon{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:var(--r-pill);background:var(--color-surface-alt);color:var(--color-text-muted);border:1px dashed var(--color-border)}
/* anchor offset for sticky nav */
[id]{scroll-margin-top:88px}
/* hide any leftover flash rendering nicely */
.message{max-width:var(--container);margin:12px auto;padding:12px 18px;border-radius:var(--r-md)}