/* Find My Stack, shared design system (dark, glass)
   Loaded by every page. Page-specific styles stay inline on that page.

   Breakpoints (mobile-first):
     Mobile:  up to 767px   (base CSS below)
     Tablet:  768px-1099px  (@media (min-width:768px))
     Desktop: 1100px+       (@media (min-width:1100px)) */

@font-face{
  font-family:"Sora";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("/assets/brand/fonts/sora-latin-300-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Sora";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/brand/fonts/sora-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Sora";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/brand/fonts/sora-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Sora";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/brand/fonts/sora-latin-700-normal.woff2") format("woff2");
}
/* Metric-matched fallback while Sora loads, so the swap doesn't shift the layout.
   Values measured against Sora: width via size-adjust, line metrics via the overrides. */
@font-face{
  font-family:"Sora Fallback";
  font-weight:300 400;
  src:local("Arial"), local("ArialMT");
  size-adjust:111.1%;
  ascent-override:87.3%;
  descent-override:26.1%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Sora Fallback";
  font-weight:600 700;
  src:local("Arial Bold"), local("Arial-BoldMT");
  size-adjust:105.8%;
  ascent-override:91.7%;
  descent-override:27.4%;
  line-gap-override:0%;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/brand/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root{
  --bg: #0A0B12;
  --bg-glow: rgba(91,139,245,0.28);
  --card-bg: #12141F;
  --text-main: #F2F3F8;
  --text-muted: #9AA0B8;
  --text-dim: #8288A0;
  --accent: #5B8BF5;
  --accent-2: #7C5CFF;
  --accent-light: #A9A2FA;
  --accent-grad: linear-gradient(135deg, #5B8BF5 0%, #7C5CFF 100%);
  --accent-soft: rgba(91,139,245,0.16);
  --accent-focus: rgba(91,139,245,0.28);
  --track: rgba(255,255,255,0.10);
  --line: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.08);
  --border-secondary: rgba(255,255,255,0.20);
  --glass-bg: rgba(255,255,255,0.03);
  --glass-bg-strong: rgba(255,255,255,0.06);
  --glass-line: rgba(255,255,255,0.10);
  --glass-line-strong: rgba(255,255,255,0.14);
  --glass-fill: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%);
  --radius-card: 24px;
  --radius-input: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 40px rgba(0,0,0,0.35);
  --shadow-btn: 0 8px 24px rgba(91,139,245,0.28);
  --gutter: 20px;
  --dot: radial-gradient(rgba(255,255,255,0.09) 1.2px, transparent 1.3px);
  --font-sans: "Sora", "Sora Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* neon: logo, hero stack and the Aurora quiz/tool cards only */
  --neon-cyan: #22D3EE;
  --neon-violet: #A855F7;
  --neon-pink: #E879F9;
  --neon-grad: linear-gradient(90deg, #22D3EE, #A855F7, #E879F9);
  /* same hues one step deeper, for white text on the gradient (WCAG AA, every stop >= 5:1) */
  --neon-grad-text: linear-gradient(90deg, #0E7490, #7E22CE, #A21CAF);
  /* lighter stops for gradient text on dark glass (as in the wordmark) */
  --neon-grad-light: linear-gradient(90deg, #67E8F9, #C084FC, #F0ABFC);
  /* buttons (docs/design/buttons.html) */
  --neon-flow: linear-gradient(90deg, #22D3EE, #8B5CF6, #E879F9, #22D3EE);
  /* button fill: same hues one step deeper, so white text holds WCAG AA.
     Brightest point is the #0E7490 stop: 5.36:1 against white. */
  --btn-flow: linear-gradient(90deg, #0E7490, #6D28D9, #A21CAF, #0E7490);
  --btn-ink: #FFFFFF;
}
@media (min-width:768px){ :root{ --gutter:32px; } }
@media (min-width:1100px){ :root{ --gutter:48px; } }

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 92% 0%, var(--bg-glow), transparent 60%),
    var(--dot);
  background-size: auto, 22px 22px;
  background-repeat: no-repeat, repeat;
  color:var(--text-main);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

h1,h2,h3{
  font-family:var(--font-sans);
  font-weight:600;
  margin:0;
  color:var(--text-main);
}
h1{ letter-spacing:-0.05em; line-height:1.05; }
h2{ letter-spacing:-0.04em; line-height:1.1; }
h3{ font-size:20px; letter-spacing:-0.02em; line-height:1.3; }
@media (min-width:1100px){ h3{ font-size:22px; } }

a{ color:var(--accent-light); }

[hidden]{ display:none !important; }

/* ---------- container ---------- */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--gutter);
}

/* A capped, centered column for long-form text content within .wrap
   (legal pages, article intros/CTAs). Grids and the hero/result layouts
   intentionally use the full .wrap width instead of this. */
.content-card{ max-width:760px; margin-left:auto; margin-right:auto; }

/* ---------- glass surfaces (Aurora Glass utilities) ----------
   .glass         frosted card surface (blur only on cards, never on page-size areas)
   .glass--hover  interactive card: neon ring, soft glow and a 2px lift on hover/focus
   .ring-grad     neon ring that is always on
   The ring is a masked ::before, so the glass stays see-through underneath.
   Blobs (.aurora) only in quiz, result and the About card. */
.glass{
  position:relative;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.glass--hover, .ring-grad, .faq-item{ position:relative; }
.glass--hover::before, .ring-grad::before, .faq-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:var(--neon-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.ring-grad::before,
.faq-item[open]::before,
.faq-item.is-open::before,
.glass--hover:focus-visible::before{ opacity:1; }
.glass--hover{ transition:transform .2s ease, box-shadow .25s ease; }
.glass--hover:focus-visible{ outline:none; box-shadow:0 0 0 2px #C084FC, 0 0 24px rgba(168,85,247,0.3); }
@media (hover:hover) and (pointer:fine){
  .glass--hover:hover{ transform:translateY(-2px); box-shadow:0 0 24px rgba(168,85,247,0.28), 0 0 48px rgba(34,211,238,0.10); }
  .glass--hover:hover::before{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .glass--hover:hover{ transform:none; }
}
.glass-strong{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-line-strong);
  border-radius:var(--radius-card);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}

.card{
  position:relative;
  overflow:hidden;
  background:var(--glass-fill), rgba(14,16,26,0.72);
  border:1px solid var(--glass-line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:28px 22px;
  margin-bottom:16px;
}
@media (min-width:768px){
  .card{ padding:36px 36px; }
}
@media (min-width:1100px){
  .card{ padding:44px 48px; }
}

/* ---------- typography utilities ---------- */
.display-1{
  font-size:clamp(42px, 6.6vw, 92px);
  line-height:1;
  font-weight:600;
  letter-spacing:-0.055em;
}
.display-2{
  font-size:clamp(32px, 4.4vw, 60px);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-0.05em;
}
.accent-line{
  font-weight:300;
  color:var(--accent-light);
}
.lead{
  font-size:17px;
  line-height:1.6;
  color:var(--text-muted);
}
@media (min-width:768px){ .lead{ font-size:18px; } }

.mono-label,
.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.eyebrow{ margin-bottom:10px; }

/* ---------- brand / logo ----------
   Logo 27 "Neon Lines", copied verbatim from /assets/brand/logo-neon.css.
   Rendered by <logo-lockup> in /assets/nav.js. */
logo-lockup{
  display:inline-flex;
  align-items:center;
  gap:12px;
  vertical-align:middle;
  color:#F3F4F8;
}

/* findmystack logo 27 "Neon Lines" (animated). Include once, e.g. in /assets/styles.css.
   Markup: see logo-neon.html. Sizes: default 38px (header), .fms-mark--lg 130px (splash). */

.fms-brand{display:inline-flex;align-items:center;gap:12px;color:#F3F4F8;text-decoration:none}

.fms-mark{--s:38px;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .29);
  background:#07080F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);perspective:calc(var(--s) * 3.2);overflow:hidden}
.fms-mark::before{content:"";position:absolute;left:50%;top:58%;width:80%;height:55%;transform:translate(-50%,-50%);
  border-radius:50%;background:linear-gradient(90deg,#22D3EE,#A855F7);filter:blur(calc(var(--s) * .16));opacity:.45}
.fms-mark__stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-45deg) translateZ(calc(var(--s) * -.09))}
.fms-mark__stack span{--u:calc(var(--s) / 220);position:absolute;left:50%;top:50%;width:calc(var(--u) * 100);height:calc(var(--u) * 100);
  margin:calc(var(--u) * -50) 0 0 calc(var(--u) * -50);border-radius:calc(var(--u) * 26);box-sizing:border-box;
  border:max(1px, calc(var(--u) * 2)) solid var(--c);
  box-shadow:0 0 calc(var(--u) * 10) var(--c), inset 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--c) 50%, transparent);
  animation:fms-lift 3.6s ease-in-out infinite;animation-delay:var(--d)}
.fms-mark__stack span:nth-child(1){--c:#22D3EE;--z:0;--d:0s}
.fms-mark__stack span:nth-child(2){--c:#60A5FA;--z:13;--d:.12s}
.fms-mark__stack span:nth-child(3){--c:#818CF8;--z:26;--d:.24s}
.fms-mark__stack span:nth-child(4){--c:#A78BFA;--z:39;--d:.36s}
.fms-mark__stack span:nth-child(5){--c:#E879F9;--z:52;--d:.48s;background:transparent;border-color:#F5D0FE;
  box-shadow:0 0 calc(var(--u) * 16) #E879F9, 0 0 calc(var(--u) * 38) rgba(168,85,247,.85), inset 0 0 calc(var(--u) * 14) rgba(232,121,249,.6)}
@keyframes fms-lift{0%,100%{transform:translateZ(calc(var(--u) * var(--z)))}50%{transform:translateZ(calc(var(--u) * var(--z) * 1.7))}}
.fms-mark--lg{--s:130px}

.fms-wordmark{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:19px;letter-spacing:-0.05em;line-height:1;white-space:nowrap}
.fms-wordmark b{font-weight:600;background:linear-gradient(90deg,#67E8F9,#C084FC,#F0ABFC);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(192,132,252,.55))}

/* typed variant for a splash / loading screen */
.fms-wordmark--typed{display:inline-flex;align-items:center}
.fms-wordmark--typed .fms-type{display:inline-block;overflow:hidden;white-space:nowrap;width:11ch;animation:fms-type 4.2s steps(11) infinite}
.fms-wordmark--typed .fms-caret{width:3px;height:1em;margin-left:3px;border-radius:1px;background:#C084FC;box-shadow:0 0 8px #C084FC;animation:fms-blink 1s steps(1) infinite}
@keyframes fms-type{0%{width:0}55%,85%{width:11ch}100%{width:0}}
@keyframes fms-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .fms-mark__stack span,.fms-wordmark--typed .fms-type,.fms-wordmark--typed .fms-caret{animation:none}
  .fms-mark__stack span{transform:translateZ(calc(var(--u) * var(--z)))}
}

.fms-mark--xs{--s:18px}

/* ---------- buttons ----------
   Reference: docs/design/buttons.html (values 1:1, written mobile-first).
   .btn-hero    homepage hero CTA (and the homepage closing CTA), never elsewhere
   .btn-aurora  every other primary action, .btn--sm for header and tool steps
   .btn-rim     secondary actions
   .link-neon   text links in cards (wrap the label in a <span>)
   .btn-aurora and .btn-hero use --btn-flow, a deeper version of the neon
   flow, so white text (--btn-ink) stays at 5.36:1 or more (WCAG AA). */
@property --rim-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn{
  appearance:none;
  font:inherit;
  text-decoration:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  padding:0 28px;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  color:#fff;
  cursor:pointer;
  border:0;
  transition:transform .2s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); }
}
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ outline:2px solid #C084FC; outline-offset:3px; }
.btn:disabled, .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; animation:none; box-shadow:none; }
.btn--sm{ min-height:44px; padding:0 20px; font-size:14px; }
.btn-block{ display:flex; width:100%; }

/* primary: Aurora Fill */
.btn-aurora{
  color:var(--btn-ink);
  background-image:var(--btn-flow);
  background-size:200% 100%;
  animation:btn-flow 6s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px rgba(139,92,246,.42);
}
@media (hover:hover) and (pointer:fine){
  .btn-aurora:hover:not(:disabled){ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 44px rgba(232,121,249,.55); }
}
@keyframes btn-flow{ to{ background-position:200% 50%; } }

/* hero CTA: split, with the "2 min · free" meta segment */
.btn-hero{
  min-height:60px;
  padding:0 6px 0 22px;
  font-size:16px;
  white-space:nowrap;
  color:var(--btn-ink);
  background-image:var(--btn-flow);
  background-size:200% 100%;
  animation:btn-flow 6s linear infinite, btn-pulse 2.8s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 12px 36px rgba(139,92,246,.5);
}
.btn-hero__meta{
  display:none;
  align-items:center;
  gap:7px;
  height:48px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(7,8,15,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:#EDE9FE;
  white-space:nowrap;
}
.btn-hero__dot{ width:6px; height:6px; border-radius:50%; background:#67E8F9; box-shadow:0 0 8px #67E8F9; }
@media (min-width:360px){ .btn-hero__meta{ display:inline-flex; } }
@media (min-width:421px){
  .btn-hero{ padding-left:30px; font-size:17px; }
  .btn-hero__meta{ padding:0 16px; }
}
@keyframes btn-pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(168,85,247,0)); } 50%{ filter:drop-shadow(0 0 14px rgba(168,85,247,.55)); } }

/* secondary: Neon Rim (static gradient rim where @property is missing) */
.btn-rim{
  border:1.5px solid transparent;
  color:#E5E7F0;
  background:linear-gradient(#0B0C18, #0B0C18) padding-box, conic-gradient(from var(--rim-a), #22D3EE, #8B5CF6, #E879F9, #22D3EE) border-box;
  animation:rim-spin 6s linear infinite;
}
@media (hover:hover) and (pointer:fine){
  .btn-rim:hover{ color:#fff; box-shadow:0 0 22px rgba(139,92,246,.5), 0 0 50px rgba(34,211,238,.22); }
}
@keyframes rim-spin{ to{ --rim-a:360deg; } }

/* tertiary: text link with a growing neon underline */
.link-neon{
  appearance:none;
  font:inherit;
  border:0;
  background:none;
  cursor:pointer;
  color:#C9CBD6;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 4px;
  font-size:16px;
  font-weight:600;
}
.link-neon span{
  background:linear-gradient(90deg, #67E8F9, #C084FC, #F0ABFC);
  background-size:0% 1.5px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:3px;
  transition:background-size .3s ease;
}
.link-neon:hover{ color:#fff; }
.link-neon:hover span{ background-size:100% 1.5px; }
.link-neon:focus-visible{ outline:2px solid #C084FC; outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  .btn-aurora, .btn-hero, .btn-rim{ animation:none; }
  .btn:hover{ transform:none; }
}

/* ---------- segmented pill switch ---------- */
.seg{
  margin-top:8px;
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:var(--radius-pill);
}
.seg button{
  appearance:none;
  border:0;
  background:transparent;
  font-family:inherit;
  flex:1 1 0;
  min-width:0;
  text-align:center;
  min-height:44px;
  padding:10px 10px;
  border-radius:var(--radius-pill);
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  color:var(--text-muted);
  transition:background-color .25s ease, color .25s ease;
}
.seg button[aria-pressed="true"]{
  background:var(--accent-grad);
  color:#fff;
  font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .seg button[aria-pressed="false"]:hover{ color:var(--text-main); background:var(--glass-bg); }
}

/* ---------- focus ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent-light);
  outline-offset:3px;
  border-radius:12px;
}
.seg button:focus-visible{ border-radius:var(--radius-pill); outline-offset:2px; }
[tabindex="-1"]:focus{ outline:none; }

/* ---------- navigation ---------- */
.site-nav{
  position:relative;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:calc(env(safe-area-inset-top, 0px) + 16px);
  padding-bottom:16px;
}
.nav-brand{
  display:inline-flex;
  align-items:center;
  color:var(--text-main);
  text-decoration:none;
  min-height:44px;
}
.nav-links{
  display:none;
  align-items:center;
  gap:22px;
}
.nav-link{
  color:var(--text-muted);
  text-decoration:none;
  font-size:14px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover{ color:var(--text-main); }
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:50%;
  cursor:pointer;
  color:var(--text-main);
  flex:0 0 auto;
}
.nav-toggle:active{ background:var(--track); }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:inline-flex; }

.nav-mobile-menu{
  display:none;
  flex-direction:column;
  gap:4px;
  position:absolute;
  top:calc(100% - 4px);
  left:var(--gutter);
  right:var(--gutter);
  background:rgba(18,20,31,0.96);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--glass-line-strong);
  border-radius:24px;
  box-shadow:var(--shadow-card);
  padding:10px;
}
.nav-mobile-menu.is-open{ display:flex; }
.nav-mobile-link{
  display:flex;
  align-items:center;
  min-height:52px;
  padding:0 16px;
  border-radius:16px;
  color:var(--text-main);
  text-decoration:none;
  font-size:16px;
}
.nav-mobile-link:active{ background:var(--track); }
.nav-mobile-cta{ margin-top:6px; }

@media (min-width:768px){
  .site-nav{ padding-top:calc(env(safe-area-inset-top, 0px) + 22px); padding-bottom:22px; }
  .nav-toggle{ display:none; }
  .nav-mobile-menu{ display:none !important; }
  .nav-links{ display:flex; }
}

/* ---------- footer ---------- */
.site-footer{
  margin-top:72px;
  padding-top:32px;
  padding-bottom:24px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.footer-tagline{
  color:var(--text-muted);
  font-size:14px;
  margin:0;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
}
.footer-links a{
  color:var(--text-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
@media (hover:hover) and (pointer:fine){
  .footer-links a:hover{ color:var(--text-main); }
}
.footer-copy{
  font-size:13px;
  color:var(--text-dim);
  margin:0;
}
@media (min-width:768px){
  .site-footer{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
  }
  .footer-copy{ flex-basis:100%; }
}

/* ---------- FAQ (shared) ---------- */
.faq-section{ margin:56px auto 0; max-width:760px; }
.faq-heading{
  font-size:clamp(28px, 3.6vw, 40px);
  letter-spacing:-0.045em;
  line-height:1.1;
  text-align:left;
  margin-bottom:22px;
}
.faq-item{
  border-radius:20px;
  margin-bottom:10px;
  transition:box-shadow .25s ease;
}
.faq-item[open],
.faq-item.is-open{ box-shadow:0 0 22px rgba(168,85,247,0.22); }
.faq-item summary,
.faq-q{
  appearance:none;
  border:0;
  background:none;
  width:100%;
  text-align:left;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  min-height:56px;
  font-family:inherit;
  font-weight:600;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-0.01em;
  cursor:pointer;
  color:var(--text-main);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .chev{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  background-image:var(--neon-grad-light);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:20px;
  font-weight:600;
  line-height:1;
  transition:transform .25s ease;
}
.faq-item[open] .chev,
.faq-item.is-open .chev{ transform:rotate(45deg); }
.faq-item p,
.faq-a p{
  margin:0;
  padding:0 20px 20px;
  color:var(--text-muted);
  font-size:16px;
  line-height:1.6;
  max-width:68ch;
}

/* ---------- article typography (guides, stack pages) ---------- */
.article h1{
  font-size:clamp(32px, 5vw, 48px);
  letter-spacing:-0.05em;
  line-height:1.05;
}
.article h2{
  font-size:clamp(22px, 2.6vw, 28px);
  letter-spacing:-0.035em;
  line-height:1.2;
  margin:36px 0 10px;
}
.article p,
.article li{
  color:var(--text-muted);
  font-size:16px;
  line-height:1.65;
}
.article p{ margin:0 0 14px; }
@media (min-width:768px){
  .article p, .article li{ font-size:17px; }
}

.card > h1,
.page-404 h1{
  font-size:clamp(32px, 5vw, 48px);
  letter-spacing:-0.05em;
  line-height:1.05;
}

/* ---------- result-detail blocks (shared: index result screen, /stack/*) ---------- */
.result-block{
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-bottom:20px;
}
.result-block-heading{
  font-size:18px;
  letter-spacing:-0.02em;
  margin-bottom:12px;
}
.stack-list, .watchout-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stack-list li, .watchout-list li{
  font-size:15px;
  line-height:1.55;
  color:var(--text-muted);
  padding-left:20px;
  position:relative;
}
.stack-list li strong{ color:var(--text-main); font-weight:600; }
.stack-list li::before{ content:"\2022"; position:absolute; left:4px; color:var(--accent-light); font-weight:700; }
.stack-list li.stack-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.stack-list li.stack-item .stack-item-name{
  color:var(--text-main);
  font-weight:600;
}
.watchout-list li::before{ content:"!"; position:absolute; left:5px; color:var(--accent-light); font-weight:700; }

.timeline-text{
  font-size:16px;
  font-weight:600;
  color:var(--text-main);
  margin:0;
}

.dev-questions-list{
  list-style:decimal;
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.dev-questions-list li{ font-size:15px; color:var(--text-dim); }
.dev-questions-list .dq-text{
  font-weight:600;
  color:var(--text-main);
  display:block;
  margin-bottom:3px;
}
.dev-questions-list .dq-why{
  color:var(--text-muted);
  font-size:14px;
  line-height:1.55;
}

.guide-link-row{ margin-bottom:4px; }

/* ---------- TL;DR box (shared: /stack/*, /guides/*) ---------- */
.tldr-box{
  font-size:16px;
  line-height:1.6;
  color:var(--text-main);
  background:linear-gradient(135deg, rgba(91,139,245,0.12), rgba(124,92,255,0.10));
  border:1px solid rgba(169,162,250,0.28);
  border-radius:18px;
  padding:16px 18px;
  margin:20px 0 0;
}
.tldr-box strong{ font-weight:700; color:var(--accent-light); }

/* ---------- audience-fit lists (shared: /stack/*) ---------- */
.audience-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:24px 0 0;
}
.audience-col-heading{
  font-size:17px;
  letter-spacing:-0.02em;
  margin-bottom:12px;
}
.audience-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.audience-list li{
  font-size:15px;
  line-height:1.55;
  color:var(--text-muted);
  padding-left:24px;
  position:relative;
}
.audience-list.fit li::before{ content:"\2713"; position:absolute; left:0; color:var(--accent-light); font-weight:700; }
.audience-list.not-fit li::before{ content:"\2715"; position:absolute; left:0; color:var(--text-dim); font-weight:700; }
@media (min-width:768px){
  .audience-grid{ flex-direction:row; gap:32px; }
  .audience-grid > div{ flex:1 1 0; }
}

/* ---------- CTA card (shared: /stack/*, /guides/*) ---------- */
.cta-card{
  text-align:center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 118%, rgba(168,85,247,0.30), rgba(34,211,238,0.08) 55%, transparent 72%),
    rgba(255,255,255,0.045);
  border-color:rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), var(--shadow-card);
}
.cta-card-heading{
  font-size:clamp(26px, 3.4vw, 36px);
  letter-spacing:-0.045em;
  line-height:1.1;
  margin-bottom:10px;
}
.cta-card-text{
  color:var(--text-muted);
  font-size:16px;
  line-height:1.6;
  margin:0 auto 22px;
  max-width:52ch;
}

/* ---------- comparison table (shared) ---------- */
.table-scroll{
  overflow-x:auto;
  border-radius:18px;
  margin:24px 0;
}
.compare-table thead{ background:var(--neon-grad) left bottom / 100% 1px no-repeat; }
.compare-table thead th{ border-bottom:0; padding-bottom:13px; }
.compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  min-width:520px;
}
.compare-table th, .compare-table td{
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  color:var(--text-muted);
  vertical-align:top;
}
.compare-table th{
  background:transparent;
  color:var(--text-main);
  font-weight:600;
  white-space:nowrap;
}
.compare-table td:first-child{ color:var(--text-main); }
.compare-table tbody th{
  background:none;
  font-weight:400;
  white-space:normal;
  vertical-align:top;
}
.compare-table tr:last-child td,
.compare-table tr:last-child th{ border-bottom:none; }

/* ---------- article meta (shared: /guides/*) ---------- */
.article-meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--text-dim);
  margin:16px 0 0;
}
.article-meta a{ color:var(--text-muted); text-decoration:underline; text-underline-offset:2px; }

/* ---------- legal pages ---------- */
.legal h1{ font-size:clamp(32px, 5vw, 44px); letter-spacing:-0.05em; margin:0 0 8px; }
.legal .updated{ font-family:var(--font-mono); color:var(--text-dim); font-size:12px; margin:0 0 28px; }
.legal h2{ font-size:19px; letter-spacing:-0.02em; margin:30px 0 8px; }
.legal p, .legal li{ font-size:16px; color:var(--text-muted); line-height:1.65; }
.legal ul{ padding-left:20px; margin:8px 0; }
.legal a{ color:var(--accent-light); }
.legal .note{
  background:var(--accent-soft);
  border:1px solid rgba(169,162,250,0.28);
  border-radius:16px;
  padding:14px 16px;
  font-size:15px;
  color:var(--text-main);
  margin:14px 0;
}

/* ---------- responsive card grids (guides list and similar overviews) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:768px){
  .card-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1100px){
  .card-grid{ grid-template-columns:1fr 1fr 1fr; }
}

.page-head{ padding:24px 0 32px; max-width:760px; }
.page-head h1{ margin-bottom:14px; }
@media (min-width:768px){ .page-head{ padding:48px 0 40px; } }

.link-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:24px 22px;
  color:inherit;
  text-decoration:none;
}
.link-card-title{
  font-size:20px;
  letter-spacing:-0.025em;
  line-height:1.3;
  margin:0;
}
.link-card-text{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.55;
  margin:0;
}
.link-card-meta{ margin-top:auto; padding-top:6px; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs{ margin:8px 0 0; }
.breadcrumbs ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
}
.breadcrumbs li{ display:inline-flex; align-items:center; gap:8px; }
.breadcrumbs li + li::before{ content:"/"; color:var(--text-dim); }
.breadcrumbs a{ color:var(--text-muted); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.breadcrumbs [aria-current]{ color:var(--text-main); }

.crumb-row{ padding:8px 0 12px; }

/* ---------- founder photo in a neon ring (About card, author box) ---------- */
.avatar-ring{
  flex:0 0 auto;
  display:inline-flex;
  padding:2px;
  border-radius:50%;
  background:var(--neon-grad);
  box-shadow:0 0 18px rgba(168,85,247,0.45), 0 0 36px rgba(34,211,238,0.15);
}
.avatar-ring img{ display:block; border-radius:50%; object-fit:cover; background:#151827; }

/* ---------- author box (guides, comparisons, app blueprints) ---------- */
.author-box{ display:flex; gap:16px; align-items:flex-start; }
.author-avatar img{ width:56px; height:56px; }
.author-box .author-name{ margin:0; font-size:18px; line-height:1.3; font-weight:600; color:var(--text-main); }
.author-box .author-role{ margin:2px 0 10px; font-family:var(--font-mono); font-size:12px; line-height:1.4; letter-spacing:0.02em; color:var(--text-dim); }
.author-box .author-bio{ margin:0 0 6px; font-size:15px; line-height:1.6; color:var(--text-muted); }
.author-box .author-link{ display:inline-flex; align-items:center; min-height:44px; font-size:15px; }

/* ---------- comparison pages (/compare/*) ---------- */
.compare-page{ max-width:760px; margin:0 auto; }
.compare-page .page-head{ padding-bottom:20px; }
.compare-page h1{
  font-size:clamp(34px, 5vw, 52px);
  letter-spacing:-0.05em;
  line-height:1.05;
}
.page-head .breadcrumbs + .eyebrow{ margin-top:24px; }
.compare-page h2{
  font-size:clamp(24px, 3vw, 32px);
  letter-spacing:-0.04em;
  line-height:1.15;
  margin:48px 0 14px;
}
.compare-page h3{ font-size:19px; margin:0 0 8px; }
.compare-page p,
.compare-page li{ color:var(--text-muted); font-size:16px; line-height:1.65; }
.compare-page p{ margin:0 0 14px; }
.compare-page ul{ padding-left:20px; margin:0 0 14px; }
.compare-page strong{ color:var(--text-main); font-weight:600; }
@media (min-width:768px){
  .compare-page p, .compare-page li{ font-size:17px; }
}
.short-answer{
  margin-top:8px;
  padding:22px 22px 8px;
  border-radius:var(--radius-card);
  border:1px solid rgba(169,162,250,0.32);
  background:linear-gradient(135deg, rgba(91,139,245,0.12), rgba(124,92,255,0.10));
}
.short-answer ul{ list-style:none; padding:0; margin:12px 0 0; }
.short-answer li{ position:relative; padding-left:24px; margin-bottom:12px; color:var(--text-main); }
.short-answer li::before{ content:"\2192"; position:absolute; left:0; color:var(--accent-light); }
.tool-cards{ display:grid; grid-template-columns:1fr; gap:14px; }
.tool-card{
  padding:22px 20px;
  border-radius:var(--radius-card);
  border:1px solid var(--glass-line);
  background:var(--glass-fill), rgba(14,16,26,0.6);
}
.tool-card ul{ margin:0; }
.tool-card li{ font-size:15px; margin-bottom:6px; }
@media (min-width:768px){
  .tool-cards{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
}
.cost-box{
  padding:22px 20px;
  border-radius:var(--radius-card);
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
}
.cost-box p:last-child{ margin-bottom:0; }
.sources{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:14px;
}
.sources p{ font-size:14px; margin:0 0 6px; color:var(--text-dim); }
.sources ul{ list-style:none; padding:0; margin:0; }
.sources li{ font-size:14px; margin:0; }
.sources a{ color:var(--text-muted); overflow-wrap:anywhere; display:inline-flex; align-items:center; min-height:44px; }
.related-links{ list-style:none; padding:0; }
.related-links li{ margin:0; }
.related-links a{ display:inline-flex; align-items:center; min-height:44px; }
.cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---------- blueprint (shared: homepage live builder, quiz result, /build/*) ---------- */
.bp{
  position:relative;
  border-radius:22px;
  border:1px solid var(--glass-line);
  background:rgba(13,15,30,0.7);
  overflow:hidden;
}
.bp-glow{
  left:50%; top:50%;
  width:280px; height:160px;
  transform:translate(-50%,-50%);
  background:var(--accent);
  opacity:.25;
  filter:blur(100px);
}
.bp-head{
  position:relative;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
}
.bp-head .live{ color:var(--accent-light); white-space:nowrap; }
.bp-scroll{ position:relative; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.bp-fit{ position:relative; }
.bp-canvas{
  position:relative;
  width:560px;
  height:440px;
  margin:0 auto;
  background-image:
    linear-gradient(rgba(169,162,250,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,162,250,0.06) 1px, transparent 1px);
  background-size:20px 20px;
}
.wire{ position:absolute; border-color:rgba(169,162,250,0.35); border-style:dashed; border-width:0; }
.wire.h{ height:0; border-top-width:1.5px; }
.wire.v{ width:0; border-left-width:1.5px; }
.node{
  position:absolute;
  width:160px;
  height:70px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);
}
.node.client{ background:rgba(109,116,242,0.12); border-color:rgba(169,162,250,0.45); }
.node.core{ width:180px; background:var(--accent-grad); border:0; color:#fff; box-shadow:0 16px 40px rgba(91,139,245,0.35); }
.node p{ margin:0; line-height:1.35; }
.node .k{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.node.core .k{ color:rgba(255,255,255,0.85); }
.node .t{ margin-top:4px; font-size:14px; font-weight:600; }
.node .s{ margin-top:1px; font-size:12px; color:var(--accent-light); }
.node.core .s{ color:rgba(255,255,255,0.92); }
.node.pop{ animation:pop .35s ease; }
@keyframes pop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }

.summary{
  border-radius:20px;
  border:1px solid var(--glass-line);
  background:rgba(10,11,18,0.6);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:18px 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.summary dl{ display:flex; gap:14px 28px; flex-wrap:wrap; margin:0; }
.summary dt{ font-size:12px; color:var(--text-dim); }
.summary dd{ margin:3px 0 0; font-size:16px; font-weight:600; }
.summary .btn{ width:100%; }
@media (min-width:768px){
  .summary .btn{ width:auto; }
}

/* ---------- app blueprints (/build/*) ---------- */
.build-bp{ margin:8px 0 8px; }
.build-bp .summary{ margin-top:16px; }
.build-bp .summary dd{ font-size:15px; }
.compare-page .node .t{ color:inherit; }
.compare-page .build-sub{ font-size:20px; letter-spacing:-0.02em; line-height:1.3; margin:32px 0 10px; }
.layer-list{ list-style:none; padding:0 !important; margin:0; display:flex; flex-direction:column; gap:12px; }
.layer-list li{
  padding:18px 20px;
  border-radius:20px;
  border:1px solid var(--glass-line);
  background:var(--glass-fill), rgba(14,16,26,0.6);
}
.layer-list .mono-label{ display:block; margin:0 0 4px; }
.layer-list strong{ display:block; font-size:17px; margin-bottom:6px; }
.compare-page .layer-list p{ margin:0; font-size:15px; }
.build-cost-actions{ justify-content:flex-start; margin:4px 0 0; }
.build-disclaimer{ margin:24px 0 0; font-size:13px !important; line-height:1.5; color:var(--text-dim) !important; text-align:center; }
@media (min-width:1100px){
  .card-grid.is-four{ grid-template-columns:repeat(4, 1fr); }
}

/* ---------- quiz and tool cards: Aurora Glass ----------
   Reference: docs/design/quiz-aurora.html (values 1:1). One Aurora card per view.
   Blobs animate transform only; smaller on phones; off with reduced motion. */
.aurora{ position:relative; width:100%; max-width:760px; margin:0 auto; border-radius:32px; overflow:hidden; padding:2px; isolation:isolate; }
.aurora__blob{ position:absolute; border-radius:50%; pointer-events:none; z-index:-1; animation:aurora-drift 9s ease-in-out infinite; }
.aurora__blob--cyan{ left:-40px; top:-30px; width:200px; height:180px; background:var(--neon-cyan); filter:blur(60px); opacity:.42; }
.aurora__blob--violet{ right:-50px; top:30%; width:210px; height:190px; background:var(--neon-violet); filter:blur(64px); opacity:.48; animation-delay:-3s; }
.aurora__blob--pink{ left:20%; bottom:-80px; width:210px; height:170px; background:var(--neon-pink); filter:blur(64px); opacity:.32; animation-delay:-6s; }
@media (min-width:768px){
  .aurora__blob--cyan{ left:-60px; top:-40px; width:320px; height:280px; filter:blur(80px); }
  .aurora__blob--violet{ right:-80px; width:340px; height:300px; filter:blur(90px); }
  .aurora__blob--pink{ bottom:-120px; width:340px; height:260px; filter:blur(90px); }
}
@keyframes aurora-drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(18px,-14px); } }
/* calmer variant for the About card: smaller blobs at about 60% of the quiz opacity */
.aurora--calm .aurora__blob{ animation-duration:12s; }
.aurora--calm .aurora__blob--cyan{ width:150px; height:130px; opacity:.25; }
.aurora--calm .aurora__blob--violet{ width:160px; height:140px; opacity:.29; }
.aurora--calm .aurora__blob--pink{ width:160px; height:120px; opacity:.19; }
@media (min-width:768px){
  .aurora--calm .aurora__blob--cyan{ width:220px; height:190px; }
  .aurora--calm .aurora__blob--violet{ width:240px; height:210px; }
  .aurora--calm .aurora__blob--pink{ width:240px; height:180px; }
}

.aurora__glass{
  position:relative;
  border-radius:30px;
  background:rgba(10,11,20,0.55);
  -webkit-backdrop-filter:blur(28px);
  backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  padding:28px 20px;
}
@media (min-width:768px){ .aurora__glass{ padding:44px 48px; } }

.quiz-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.step-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:#C9CBD6; text-transform:uppercase; text-align:right; }
.quiz-top .step-label{ margin-left:auto; }
.quiz-top .btn{ flex:none; white-space:nowrap; }
.quiz-q + .aurora-hint{ margin:-8px 0 20px; }

.progress{ margin-top:22px; height:4px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; }
.progress__bar{
  display:block;
  height:100%;
  border-radius:4px;
  background-image:linear-gradient(90deg, #22D3EE, #A855F7, #E879F9, #22D3EE);
  background-size:200% 100%;
  box-shadow:0 0 12px rgba(168,85,247,0.8);
  animation:sheen 4s linear infinite;
  transition:width .4s ease;
}
@keyframes sheen{ to{ background-position:200% 50%; } }

.quiz-q{ margin:28px 0 22px; font-size:clamp(28px, 4vw, 40px); line-height:1.05; font-weight:600; letter-spacing:-0.045em; }
.quiz-q:focus{ outline:none; }
.accent{ font-weight:300; background:linear-gradient(90deg, #67E8F9, #C084FC); -webkit-background-clip:text; background-clip:text; color:transparent; }

.opts{ display:flex; flex-direction:column; gap:10px; }
.opts.is-grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:768px){ .opts.is-grid{ grid-template-columns:1fr 1fr; } }
.opt{
  appearance:none;
  font:inherit;
  text-align:left;
  width:100%;
  min-height:58px;
  padding:16px 18px;
  border-radius:16px;
  font-size:16px;
  line-height:1.4;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  color:#D7D9E4;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  transition:background .2s, box-shadow .2s, color .2s;
}
@media (hover:hover){ .opt:hover{ background:rgba(255,255,255,0.08); } }
.opt:focus-visible{ outline:2px solid #C084FC; outline-offset:2px; }
.opt__key{
  flex:none;
  width:26px;
  height:26px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  background:rgba(255,255,255,0.08);
  color:#9497A8;
}
.opt[aria-pressed="true"]{
  color:#fff;
  border:1px solid transparent;
  /* opaque base under the tint, so the gradient shows as the border only
     (the reference's tint is see-through and fills the whole button) */
  background:linear-gradient(90deg, rgba(34,211,238,0.16), rgba(168,85,247,0.16)) padding-box, linear-gradient(#141522, #141522) padding-box, var(--neon-grad) border-box;
  box-shadow:0 0 22px rgba(168,85,247,0.35);
}
.opt[aria-pressed="true"] .opt__key{ background:linear-gradient(135deg, #22D3EE, #A855F7); color:#fff; }

.result-tag{ display:inline-block; font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--neon-grad-text); color:#fff; box-shadow:0 0 14px rgba(232,121,249,0.5); }


@media (prefers-reduced-motion:reduce){
  .aurora__blob, .progress__bar{ animation:none; }
}

/* ---------- tools (/tools/*) ---------- */
.tool-shell{ max-width:760px; margin:0 auto; }
.tool-shell.is-wide{ max-width:1100px; }
.mvp-result .matrix{ max-width:760px; }
.tool-card-main{ padding:24px 20px; }
@media (min-width:768px){ .tool-card-main{ padding:36px 40px; } }
.tool-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.tool-progress{
  margin-top:14px;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--track);
  overflow:hidden;
}
.tool-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--accent-grad);
  transition:width .35s ease;
}
.tool-question{
  font-size:clamp(24px, 3.4vw, 34px);
  letter-spacing:-0.04em;
  line-height:1.15;
  margin:26px 0 8px;
}
.tool-hint{ margin:0 0 18px; font-size:15px; color:var(--text-muted); }
.tool-nav{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:26px; }
.tool-nav .btn-aurora{ margin-left:auto; min-width:160px; }

.pill-group{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  appearance:none;
  min-height:44px;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-line-strong);
  background:var(--glass-bg);
  color:var(--text-main);
  font-family:inherit;
  font-size:15px;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.pill[aria-pressed="true"]{
  background:var(--accent-grad);
  border-color:transparent;
  color:#fff;
  font-weight:600;
}
.pill-group.is-stacked{ flex-direction:column; }
.pill-group.is-stacked .pill{ border-radius:18px; padding:14px 18px; }
@media (hover:hover) and (pointer:fine){
  .pill[aria-pressed="false"]:hover{ border-color:rgba(255,255,255,0.32); }
}

.field-label{ display:block; margin:0 0 8px; }
.text-input{
  display:block;
  width:100%;
  min-height:52px;
  padding:14px 16px;
  border-radius:var(--radius-input);
  border:1px solid var(--border-soft);
  background:rgba(10,11,18,0.75);
  color:var(--text-main);
  font-family:inherit;
  font-size:16px;
  line-height:1.4;
}
textarea.text-input{ min-height:96px; resize:vertical; }
.text-input::placeholder{ color:var(--text-dim); }
.text-input:focus{ outline:2px solid var(--accent-light); outline-offset:2px; border-color:transparent; }
.field-row{ display:flex; gap:8px; margin-top:12px; }
.field-row .text-input{ flex:1 1 auto; min-width:0; }
.field-count{ display:block; margin-top:6px; text-align:right; font-size:13px; color:var(--text-dim); }

.chip-list{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0 0 0 14px;
  border-radius:var(--radius-pill);
  background:var(--accent-soft);
  border:1px solid rgba(169,162,250,0.35);
  font-size:15px;
}
.chip button{
  appearance:none;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-muted);
  font-size:18px;
  cursor:pointer;
}

/* brief document */
.brief{ padding:28px 22px; }
@media (min-width:768px){ .brief{ padding:44px 48px; } }
.brief h2{ font-size:clamp(28px, 4vw, 42px); letter-spacing:-0.045em; line-height:1.1; margin:6px 0 10px; overflow-wrap:anywhere; }
.brief li, .brief dd, .chip{ overflow-wrap:anywhere; }
.brief h3{ font-size:19px; margin:30px 0 10px; }
.brief p, .brief li, .brief dd{ color:var(--text-muted); font-size:16px; line-height:1.6; }
.brief ul, .brief ol{ padding-left:20px; margin:0; }
.brief li{ margin-bottom:6px; }
.brief li strong{ color:var(--text-main); }
.brief-facts{ display:grid; grid-template-columns:1fr; gap:12px 24px; margin:22px 0 0; }
.brief-facts dt{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dim); }
.brief-facts dd{ margin:2px 0 0; color:var(--text-main); }
@media (min-width:768px){ .brief-facts{ grid-template-columns:1fr 1fr; } }
.brief-stack{
  margin-top:12px;
  padding:18px 18px 12px;
  border-radius:20px;
  border:1px solid rgba(169,162,250,0.32);
  background:linear-gradient(135deg, rgba(91,139,245,0.12), rgba(124,92,255,0.10));
}
.brief-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.brief-actions .btn{ flex:1 1 180px; }
.tool-feedback{ display:block; min-height:22px; margin-top:8px; font-size:14px; color:var(--accent-light); }

.coming-soon{ opacity:0.75; }
.coming-soon .link-card-title{ color:var(--text-muted); }
.badge-soon{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-line-strong);
  color:var(--text-muted);
}

/* cost calculator */
.rate-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-top:26px; }
.rate-field{ flex:1 1 220px; }
.rate-row .seg{ min-width:150px; }
.cost-result{ margin-top:16px; }
.cost-result .compare-table{ min-width:0; font-size:14px; }
.cost-result .compare-table th,
.cost-result .compare-table td{ padding:10px 12px; }
.cost-result .compare-table td + td,
.cost-result .compare-table th + th{ text-align:right; }
@media (min-width:768px){ .cost-result .compare-table{ font-size:15px; } }
.nowrap{ white-space:nowrap; }
.cost-totals{ display:grid; grid-template-columns:1fr; gap:14px 28px; margin:18px 0 6px; }
.cost-totals dt{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dim); }
.cost-totals dd{ margin:4px 0 0; }
.cost-big{ font-size:clamp(26px, 4vw, 36px); font-weight:600; letter-spacing:-0.04em; line-height:1.15; color:var(--text-main); }
.cost-hint{ font-size:16px; color:var(--text-muted); }
@media (min-width:768px){ .cost-totals{ grid-template-columns:1fr 1fr; } }
.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; }

/* MVP prioritizer */
.rate-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.rate-item{
  padding:16px;
  border-radius:20px;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
}
.rate-name{ margin:0 0 10px; font-weight:600; font-size:17px; color:var(--text-main); overflow-wrap:anywhere; }
.rate-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .rate-grid{ grid-template-columns:1fr 1fr; } }

.matrix{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:18px 0 0 22px;
  padding-bottom:22px;
}
.matrix-axis{
  position:absolute;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.matrix-axis-x{ left:0; right:0; bottom:0; text-align:center; }
.matrix-axis-x::after{ content:" \2192"; }
.matrix-axis-y{ left:-22px; top:0; bottom:22px; writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; }
.matrix-axis-y::after{ content:" \2192"; }
.quadrant{
  min-height:120px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
}
.quadrant h3{ font-size:15px; margin:0; }
.quadrant-d{ margin:2px 0 8px; font-size:12px; line-height:1.4; color:var(--text-dim); }
.quadrant ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.quadrant li{
  font-size:13px;
  line-height:1.3;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.06);
  overflow-wrap:break-word;
  max-width:100%;
}
.quadrant-quick{ border-color:rgba(169,162,250,0.45); background:linear-gradient(135deg, rgba(91,139,245,0.14), rgba(124,92,255,0.12)); }
.quadrant-big{ border-color:rgba(169,162,250,0.28); }
@media (min-width:768px){ .quadrant{ padding:16px; min-height:140px; } .quadrant h3{ font-size:17px; } .quadrant-d{ font-size:13px; } }

.buckets{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:22px; }
@media (min-width:768px){ .buckets{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.bucket{
  padding:14px;
  border-radius:20px;
  border:1px solid var(--glass-line);
  background:rgba(10,11,18,0.5);
  transition:border-color .2s ease, background-color .2s ease;
}
.bucket[data-bucket="must"]{ border-color:rgba(169,162,250,0.45); }
.bucket.is-over{ border-color:var(--accent-light); background:var(--accent-soft); }
.bucket h3{ font-size:17px; margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.bucket h3 .mono-label{ display:inline; }
.bucket-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-height:44px; }
.bucket-item{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
  cursor:grab;
}
.bucket-item.is-dragging{ opacity:0.5; }
.bucket-label{ display:block; font-weight:600; font-size:15px; line-height:1.35; color:var(--text-main); overflow-wrap:anywhere; }
.bucket-meta{ display:block; margin-top:2px; font-size:12px; color:var(--text-dim); }
.bucket-moves{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.move-btn{
  appearance:none;
  min-height:44px;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-line-strong);
  background:transparent;
  color:var(--text-muted);
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
}
.bucket-empty{ padding:12px; font-size:14px; color:var(--text-dim); border:1px dashed var(--glass-line-strong); border-radius:16px; text-align:center; }
@media (hover:hover) and (pointer:fine){
  .move-btn:hover{ color:var(--text-main); border-color:rgba(255,255,255,0.32); }
}

/* app store fee calculator */
.fee-form{ display:grid; grid-template-columns:1fr; gap:22px; }
.fee-form .seg{ margin-top:8px; }
.fee-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.fee-row > div{ flex:1 1 200px; }
.fee-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  cursor:pointer;
  font-size:15px;
  color:var(--text-main);
}
.fee-toggle input{ width:22px; height:22px; accent-color:var(--accent); flex:0 0 auto; }
.fee-note{ margin:6px 0 0; font-size:13px; color:var(--text-dim); }
.fee-bar{
  display:flex;
  height:28px;
  margin:18px 0 12px;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:var(--track);
}
.fee-bar span{ display:block; height:100%; min-width:2px; }
.fee-keep{ background:var(--accent-grad); }
.fee-store{ background:rgba(255,255,255,0.32); }
.fee-payment{ background:rgba(169,162,250,0.55); }
.fee-rc{ background:rgba(232,121,249,0.55); }
.fee-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.fee-legend li{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text-muted); }
.fee-legend .dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.fee-legend .amt{ margin-left:auto; color:var(--text-main); font-weight:600; white-space:nowrap; }
.fee-month{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:20px; }
.fee-month > div{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
}
.fee-month dt{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dim); }
.fee-month dd{ margin:4px 0 0; font-size:15px; color:var(--text-muted); }
.fee-month dd strong{ display:block; font-size:24px; letter-spacing:-0.03em; color:var(--text-main); }
@media (min-width:768px){ .fee-month{ grid-template-columns:1fr 1fr; } }

/* app name checker */
.name-grid{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .name-grid{ grid-template-columns:1fr 1fr; } }
.name-card{
  padding:16px;
  border-radius:20px;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
}
.name-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.name-title{ margin:0; font-size:22px; font-weight:600; letter-spacing:-0.03em; color:var(--text-main); overflow-wrap:anywhere; }
.fav-btn{
  appearance:none;
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--glass-line-strong);
  background:transparent;
  color:var(--text-muted);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.fav-btn[aria-pressed="true"]{ color:#fff; background:var(--accent-grad); border-color:transparent; }
.name-meta{ margin:4px 0 0; font-size:13px; color:var(--text-dim); }
.check-links{ display:flex; flex-wrap:wrap; gap:6px; }
.check-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-line-strong);
  color:var(--text-muted);
  font-size:13px;
  text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .check-links a:hover{ color:var(--text-main); border-color:rgba(255,255,255,0.32); }
}

/* ---------- 404 ---------- */
.page-404{
  text-align:center;
  padding:56px 22px;
}
.page-404 h1{ margin-bottom:14px; }
.page-404 p{
  color:var(--text-muted);
  font-size:17px;
  line-height:1.6;
  margin:0 auto 28px;
  max-width:46ch;
}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
  .fms-wordmark--typed .fms-type{ width:11ch; }
  .fms-wordmark--typed .fms-caret{ display:none; }
}
@media print{
  .fms-mark__stack span{ animation:none; transform:translateZ(calc(var(--u) * var(--z))); }
  .fms-wordmark--typed .fms-type{ animation:none; width:11ch; }
  .fms-wordmark--typed .fms-caret{ display:none; }
}

/* ---------- quiz loading screen (index.html) ----------
   Typed logo for at most 600ms when switching into the quiz, once per session. */
.quiz-splash{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg, #0A0B12);
  pointer-events:none;
  transition:opacity .18s ease;
}
.quiz-splash.is-out{ opacity:0; }
.quiz-splash logo-lockup{ flex-direction:column; gap:22px; }
.quiz-splash .fms-wordmark{ font-size:28px; }
.quiz-splash .fms-wordmark--typed .fms-type{ animation:fms-type-in .38s steps(11) both; }
@keyframes fms-type-in{ from{ width:0; } to{ width:11ch; } }

/* ---------- scroll reveals (/assets/reveal.js) ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .reveal{ opacity:1; transform:none; }
  .quiz-splash{ display:none; }
}