:root {
    --blue: #2563EB;
    --blue-light: #EFF6FF;
    --blue-dark: #0F172A;
    --orange: #C05621;
    --orange-light: #FFF7ED;
    --green: #15803D;
    --red: #DC2626;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #111827;
    --white: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.08), 0 1px 1px rgba(15,23,42,0.04);
    --shadow: 0 12px 28px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.05);
    --shadow-lg: 0 22px 48px rgba(15,23,42,0.14), 0 8px 20px rgba(15,23,42,0.08);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --focus-ring: 0 0 0 3px rgba(37,99,235,0.38), 0 0 0 1px rgba(37,99,235,0.12);
    --btn-shadow-blue: 0 4px 14px rgba(29,78,216,0.28), 0 1px 3px rgba(29,78,216,0.16);
    --btn-shadow-blue-hover: 0 10px 28px rgba(29,78,216,0.38), 0 2px 8px rgba(29,78,216,0.18);
    --btn-shadow-orange: 0 4px 14px rgba(192,86,33,0.30), 0 1px 3px rgba(192,86,33,0.16);
    --btn-shadow-orange-hover: 0 10px 28px rgba(192,86,33,0.40), 0 2px 8px rgba(192,86,33,0.18);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --surface-soft: #F8FAFC;
    --surface-tint: #F6F9FE;
    --hero-bg: linear-gradient(145deg, #F8FAFC 0%, #EEF4FF 52%, #FFF7ED 100%);
    --section-line: #DDE7F5;
    --nav-bg: rgba(255,255,255,0.94);
    --nav-text: #1F2937;
    --trust-bg: #172033;
    --trust-text: #F8FAFC;
    --page-hero-bg: linear-gradient(145deg, #F8FAFC 0%, #EEF4FF 100%);
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    --blue: #8CB4FF;
    --blue-light: #1B2C4A;
    --blue-dark: #F8FAFC;
    --orange: #F6AD55;
    --orange-light: #2D1F14;
    --green: #86EFAC;
    --red: #F87171;
    --gray-50: #0F172A;
    --gray-100: #111827;
    --gray-200: #243044;
    --gray-300: #334155;
    --gray-400: #94A3B8;
    --gray-600: #CBD5E1;
    --gray-700: #E2E8F0;
    --gray-800: #F8FAFC;
    --white: #111827;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow: 0 18px 38px rgba(0,0,0,0.34), 0 2px 10px rgba(0,0,0,0.24);
    --shadow-lg: 0 28px 58px rgba(0,0,0,0.48), 0 10px 24px rgba(0,0,0,0.30);
    --focus-ring: 0 0 0 3px rgba(110,168,254,0.55);
    --surface-soft: #0B1220;
    --surface-tint: #17233A;
    --hero-bg: linear-gradient(145deg, #0F172A 0%, #17233A 58%, #201A12 100%);
    --section-line: #253247;
    --nav-bg: rgba(15,23,42,0.95);
    --nav-text: #E5EDF8;
    --trust-bg: #111827;
    --trust-text: #F8FAFC;
    --page-hero-bg: linear-gradient(145deg, #0F172A 0%, #18243A 100%);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: 112.5%; }
  body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-size: 1.05rem; color: var(--gray-800); background: var(--white); line-height: 1.75; -webkit-font-smoothing: antialiased; }
  a { color: var(--blue); text-decoration: none; }
  a:hover { text-decoration: underline; }
  img { max-width: 100%; }

  /* NAV */
  nav { background: var(--nav-bg); border-bottom: 1px solid var(--gray-200); box-shadow: 0 2px 16px rgba(15,23,42,0.08); position: sticky; top: 0; z-index: 100; padding: 0 32px; backdrop-filter: blur(20px); }
  .nav-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 20px; }
  .logo { font-size: 1.15rem; font-weight: 850; color: var(--blue-dark); letter-spacing: 0; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; transition: color 0.2s ease, transform 0.2s var(--spring); border-radius: var(--radius-pill); background: transparent; border: 0; padding: 8px 12px 8px 0; font-family: inherit; text-align: left; }
  .logo:hover { color: var(--blue); transform: translateY(-1px); }
  .logo:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .logo-icon { width: 66px; height: auto; aspect-ratio: 578 / 433; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(15,23,42,0.14)); }
  .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
  .logo-text span:first-child { white-space: nowrap; font-size: 1.08rem; }
  .logo-kicker { color: var(--orange); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
  .nav-links { display: flex; gap: 4px; list-style: none; align-items: center; flex-wrap: nowrap; justify-content: center; }
  .nav-links button, .services-summary { font-size: 1.05rem; font-weight: 700; color: var(--nav-text); padding: 12px 18px; border-radius: var(--radius-pill); transition: background 0.2s var(--ease-out), color 0.2s ease, transform 0.2s var(--spring), box-shadow 0.2s ease; cursor: pointer; border: 0; background: transparent; font-family: inherit; line-height: 1.2; min-height: 48px; }
  .nav-links button:hover { background: var(--blue-light); text-decoration: none; color: var(--blue); transform: translateY(-1px); box-shadow: 0 2px 10px rgba(37,99,235,0.12); }
  .nav-links button[aria-current="true"], .services-summary[aria-current="true"] { background: var(--blue-light); color: var(--blue); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 22%, transparent); }
  .nav-links button:focus-visible, .services-summary:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--focus-ring); }
  .services-menu { position: relative; }
  .services-summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
  .services-summary .dropdown-arrow { display: inline-block; font-size: 0.7rem; transition: transform 0.3s var(--spring); opacity: 0.7; }
  .services-menu.open .dropdown-arrow { transform: rotate(180deg); }
  .services-summary:hover { background: var(--blue-light); color: var(--blue); transform: translateY(-1px); }
  .services-summary::-webkit-details-marker { display: none; }
  .services-panel {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 260px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--gray-200));
    border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    padding: 10px; display: grid; gap: 4px; z-index: 250;
    transform-origin: top center;
    transform: translateY(-10px) scale(0.96); opacity: 0;
    transition: transform 0.28s var(--spring), opacity 0.22s var(--ease-out);
    pointer-events: none;
  }
  .services-menu.open .services-panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
  .services-panel button { width: 100%; text-align: left; color: var(--gray-700); border-radius: var(--radius); padding: 13px 18px; font-size: 1rem; min-height: 48px; transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--spring); }
  .services-panel button:hover { background: var(--blue-light); color: var(--blue); transform: translateX(4px); }
  .nav-cta { background: var(--orange) !important; color: var(--white) !important; border-radius: var(--radius-pill) !important; padding: 12px 22px !important; font-size: 1rem !important; box-shadow: var(--btn-shadow-orange) !important; font-weight: 700 !important; min-height: 48px !important; }
  .nav-cta:hover { background: linear-gradient(135deg, #fb923c, #c05621) !important; box-shadow: var(--btn-shadow-orange-hover) !important; transform: translateY(-1px) scale(1.03) !important; }
  .nav-auth { display: flex; gap: 10px; align-items: center; }
  .theme-toggle { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1.5px solid var(--gray-200); background: var(--white); color: var(--gray-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); font-size: 1.15rem; transition: transform 0.25s var(--spring), border-color 0.2s ease, background 0.2s ease; }
  .theme-toggle:hover { transform: translateY(-1px) scale(1.08) rotate(12deg); border-color: var(--blue); background: var(--blue-light); color: var(--blue); }
  .theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .hamburger { display: none; cursor: pointer; font-size: 1.6rem; background: none; border: none; color: var(--gray-700); padding: 10px; border-radius: var(--radius-pill); transition: background 0.15s; line-height: 1; min-height: 48px; min-width: 48px; }
  .hamburger:hover { background: var(--gray-100); }
  .hamburger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* PAGES */
  .page { display: none; }
  .page.active { display: block; }

  /* HERO */
  .hero { background: var(--hero-bg); padding: 76px 24px 74px; text-align: center; position: relative; overflow: hidden; }
  .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(29,78,216,0.10), transparent 32%), radial-gradient(circle at 82% 22%, rgba(20,184,166,0.12), transparent 34%); pointer-events: none; }
  .hero > * { position: relative; }
  .hero-logo { width: min(220px, 52vw); height: auto; aspect-ratio: 578 / 433; margin: 0 auto 18px; display: block; filter: drop-shadow(0 16px 26px rgba(15,23,42,0.14)); }
  .hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 900; color: var(--blue-dark); line-height: 1.15; margin-bottom: 22px; letter-spacing: -0.5px; }
  .hero h1 span { color: var(--orange); }
  .hero p { font-size: 1.25rem; color: var(--gray-600); max-width: 660px; margin: 0 auto 40px; line-height: 1.8; }
  .hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

  /* BUTTONS */
  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: var(--radius-pill);
    font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
    cursor: pointer; border: 1.5px solid transparent;
    transition: box-shadow 0.28s var(--ease-out), transform 0.28s var(--spring), background 0.2s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none; font-family: inherit; line-height: 1.2; white-space: nowrap; min-height: 48px;
    -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .btn::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: rgba(255,255,255,0); transition: background 0.22s ease;
    pointer-events: none; z-index: 0;
  }
  .btn > * { position: relative; z-index: 1; }
  .btn:hover::before { background: rgba(255,255,255,0.10); }
  .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .btn:active { transform: scale(0.94) !important; transition-duration: 0.08s !important; }
  .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, var(--blue) 45%, #1d4ed8 100%);
    color: #fff; box-shadow: var(--btn-shadow-blue);
  }
  .btn-primary:hover { box-shadow: var(--btn-shadow-blue-hover); transform: translateY(-2px) scale(1.03); text-decoration: none; color: #fff; }
  .btn-secondary {
    background: var(--white); color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 40%, var(--gray-200));
    box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover { background: var(--blue-light); box-shadow: 0 6px 20px rgba(37,99,235,0.16); transform: translateY(-2px) scale(1.03); text-decoration: none; color: var(--blue); border-color: var(--blue); }
  .btn-orange {
    background: linear-gradient(135deg, #fb923c 0%, var(--orange) 45%, #9a3412 100%);
    color: #fff; box-shadow: var(--btn-shadow-orange);
  }
  .btn-orange:hover { box-shadow: var(--btn-shadow-orange-hover); transform: translateY(-2px) scale(1.03); text-decoration: none; color: #fff; }
  .btn-green {
    background: linear-gradient(135deg, #34d399 0%, var(--green) 55%, #15803d 100%);
    color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,0.28);
  }
  .btn-green:hover { box-shadow: 0 8px 26px rgba(22,163,74,0.42); transform: translateY(-2px) scale(1.03); text-decoration: none; color: #fff; }
  .btn-sm { padding: 9px 22px; font-size: 0.9rem; min-height: 40px; }
  .btn-xs { padding: 6px 15px; font-size: 0.82rem; min-height: 34px; }
  .btn-ghost {
    background: transparent; color: var(--gray-700);
    border-color: var(--gray-300); box-shadow: none;
  }
  .btn-ghost:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-800); text-decoration: none; transform: translateY(-1px) scale(1.02); }

  /* TRUST BAR */
  .trust-bar { background: var(--trust-bg); color: var(--trust-text); padding: 16px 24px; text-align: center; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }
  .trust-bar span { margin: 0 14px; opacity: 0.95; }

  /* SECTIONS */
  section { padding: 72px 24px; }
  section.gray { background: var(--gray-50); }
  .section-inner { max-width: 1320px; margin: 0 auto; }
  .section-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 52px; }
  .section-header h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); font-weight: 800; color: var(--blue-dark); margin-bottom: 14px; letter-spacing: -0.3px; width: 100%; }
  .section-header p { font-size: 1.15rem; color: var(--gray-600); max-width: 600px; margin: 0; line-height: 1.8; }
  .badge { display: inline-block; background: var(--blue-light); color: var(--blue); font-size: 0.78rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 6px 16px; border-radius: 99px; margin-bottom: 16px; }
  .page-hero { background: var(--page-hero-bg); padding: 64px 24px 42px; border-bottom: 1px solid var(--gray-200); }
  .page-hero .section-header { margin-bottom: 0; }
  .page-hero .section-header h2,
  .page-hero .section-header p { color: var(--gray-800); }

  /* CARDS */
  .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
  .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
  .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
  .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; border: 1px solid var(--gray-200); }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gray-300); }
  .card-icon { font-size: 2.4rem; margin-bottom: 14px; }
  .card h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 10px; color: var(--blue-dark); letter-spacing: -0.1px; }
  .card p { font-size: 1rem; color: var(--gray-600); margin-bottom: 18px; line-height: 1.75; }

  /* CATEGORY CARDS */
  .cat-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 20px; text-align: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; border: 2px solid transparent; }
  .cat-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 8px 28px rgba(37,99,235,0.14); }
  .cat-card:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
  .cat-card .icon { font-size: 2.6rem; margin-bottom: 12px; }
  .cat-card h3 { font-size: 1rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 6px; }
  .cat-card p { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 14px; line-height: 1.6; }

  /* VIDEO CARDS */
  .video-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--gray-200); transition: transform 0.2s; }
  .video-card:hover { transform: translateY(-3px); }
  .video-thumb { height: 150px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
  .video-thumb .play-btn { width: 58px; height: 58px; background: rgba(255,255,255,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: transform 0.2s; border: none; cursor: pointer; }
  .video-thumb:hover .play-btn { transform: scale(1.1); }
  .video-thumb .topic-tag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); color: var(--white); font-size: 0.75rem; padding: 3px 10px; border-radius: 99px; }
  .video-thumb .duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); color: var(--white); font-size: 0.75rem; padding: 3px 8px; border-radius: 6px; }
  .lock-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: white; font-size: 0.85rem; font-weight: 700; }
  .lock-overlay span { font-size: 2rem; }
  .video-body { padding: 18px; }
  .video-body h3 { font-size: 1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; }
  .difficulty { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
  .diff-beginner { background: #DCFCE7; color: #15803D; }
  .diff-easy { background: #FEF9C3; color: #854D0E; }
  .diff-step { background: #DBEAFE; color: #1D4ED8; }
  .tier-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-left: 6px; }
  .tier-free { background: #DCFCE7; color: #15803D; }
  .tier-tier1 { background: #DBEAFE; color: #1D4ED8; }
  .tier-tier2 { background: #FEF9C3; color: #92400E; }

  /* QUESTION SECTION */
  .question-box { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; max-width: 750px; margin: 0 auto; border: 1px solid var(--gray-200); }
  .question-box h2 { font-size: 1.6rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 8px; }
  .question-box p { color: var(--gray-600); margin-bottom: 24px; font-size: 1rem; }
  .q-input-wrap { position: relative; }
  .q-input { width: 100%; padding: 18px 76px 18px 20px; border: 2px solid var(--gray-200); border-radius: 10px; font-size: 1.05rem; font-family: inherit; transition: border 0.2s; resize: none; min-height: 80px; background: var(--gray-50); color: var(--gray-800); }
  .q-input:focus { outline: none; border-color: var(--blue); }
  .q-submit { position: absolute; right: 12px; bottom: 12px; background: var(--blue); color: var(--white); border: none; border-radius: var(--radius-pill); padding: 10px 20px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.2s var(--spring), box-shadow 0.2s ease; font-family: inherit; box-shadow: var(--btn-shadow-blue); }
  .q-submit:hover { transform: translateY(-1px) scale(1.03); box-shadow: var(--btn-shadow-blue-hover); }
  .q-submit:hover { background: var(--blue-dark); }
  .q-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .q-examples { margin-top: 16px; }
  .q-examples p { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 8px; }
  .q-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .q-chip { background: var(--white); color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--gray-200)); border-radius: 99px; padding: 7px 14px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
  .q-chip:hover { background: var(--blue-light); border-color: var(--blue); }
  .q-limit-notice { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 12px 16px; margin-top: 12px; font-size: 0.9rem; color: var(--red); }

  /* ANSWER BOX */
  .answer-box { background: var(--blue-light); border-radius: var(--radius); padding: 28px; margin-top: 24px; border-left: 5px solid var(--blue); display: none; }
  .answer-box.visible { display: block; }
  .answer-box h3 { font-size: 1.1rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 12px; }
  .answer-box p { color: var(--gray-800); margin-bottom: 12px; font-size: 1rem; }
  .steps { list-style: none; margin: 12px 0 20px; }
  .steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #BFDBFE; }
  .steps li:last-child { border-bottom: none; }
  .step-num { background: var(--blue); color: var(--white); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
  .jump-link { margin-top: 6px; padding: 0; border: 0; background: transparent; color: var(--blue); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .jump-link:hover { color: var(--blue-dark); }
  .jump-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
  .answer-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .tts-bar { display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 10px; padding: 12px 16px; margin-top: 16px; border: 1px solid var(--gray-200); }
  .tts-bar audio { flex: 1; }

  /* CHAT */
  .chat-experience { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 760px); gap: 30px; align-items: start; justify-content: center; }
  .presenter-avatar-panel { width: min(430px, 100%); min-height: 500px; border-radius: var(--radius); border: 1px solid var(--gray-200); background: linear-gradient(180deg, #172033 0%, var(--surface-tint) 100%); box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 92px; }
  .presenter-avatar-stage { width: 100%; height: 480px; position: relative; background: radial-gradient(ellipse 80% 70% at 50% 28%, #d6cfc6 0%, #a09080 45%, #5e5048 100%); touch-action: none; user-select: none; -webkit-user-select: none; }
  .presenter-avatar-stage canvas { display: block; width: 100% !important; height: 100% !important; pointer-events: none; }
  .avatar-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: var(--gray-600); pointer-events: none; }
  .avatar-fallback img { width: min(280px, 76%); border-radius: 999px; box-shadow: var(--shadow); }
  .avatar-fallback p { max-width: 28ch; font-size: 0.95rem; line-height: 1.45; }
  .avatar-fallback.hidden { display: none; }
  .chat-container { max-width: 760px; margin: 0 auto; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--gray-200); overflow: hidden; }
  .chat-header { background: linear-gradient(135deg, #0F172A 0%, #1D4ED8 100%); color: #fff; padding: 18px 24px; display: flex; align-items: center; gap: 14px; }
  .chat-avatar { width: 54px; height: 54px; border-radius: 50%; background: #1D4ED8; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; overflow: visible; border: 3px solid rgba(255,255,255,0.78); box-shadow: 0 8px 22px rgba(15,23,42,0.32); position: relative; }
  /* ANIMATED Danish AVATAR */
  .Danish-anim { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; }
  .Danish-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.38); pointer-events: none; }
  .Danish-ring-1 { width: 62px; height: 62px; animation: sRingA 3.2s linear infinite; }
  .Danish-ring-2 { width: 50px; height: 50px; animation: sRingA 2.1s linear infinite reverse; border-color: rgba(255,255,255,0.20); }
  @keyframes sRingA { to { transform: rotate(360deg); } }
  .Danish-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .Danish-eyes { display: flex; gap: 10px; }
  .Danish-eye { width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: sBlink 4.5s ease-in-out infinite; }
  .Danish-eye:nth-child(2) { animation-delay: 0.06s; }
  @keyframes sBlink { 0%,93%,100% { transform: scaleY(1); } 95%,97% { transform: scaleY(0.08); } }
  .Danish-mouth { width: 16px; height: 6px; border-bottom: 2.5px solid #fff; border-left: 2.5px solid #fff; border-right: 2.5px solid #fff; border-radius: 0 0 8px 8px; }

  /* Thinking state */
  .chat-container.Danish-thinking .Danish-ring-1 { animation-duration: 0.65s; border-color: #93C5FD; }
  .chat-container.Danish-thinking .Danish-ring-2 { animation-duration: 0.45s; border-color: rgba(147,197,253,0.5); }
  .chat-container.Danish-thinking .Danish-anim { animation: sThinkGlow 0.9s ease-in-out infinite; }
  @keyframes sThinkGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(147,197,253,0.5); } 50% { box-shadow: 0 0 0 9px rgba(147,197,253,0); } }
  .chat-container.Danish-thinking .Danish-eye { animation: sThinkLook 0.65s ease-in-out infinite; }
  @keyframes sThinkLook { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }

  /* Speaking state */
  .chat-container.Danish-speaking .Danish-mouth { animation: sSpeak 0.3s ease-in-out infinite; }
  @keyframes sSpeak { 0%,100% { height: 6px; width: 16px; } 50% { height: 9px; width: 18px; } }
  .chat-container.Danish-speaking .Danish-eye { animation: sNodEye 0.45s ease-in-out 3; }
  @keyframes sNodEye { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }

  /* Mini avatar for message bubbles */
  .msg-Danish-mini { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%); display: flex; align-items: center; justify-content: center; }
  .msg-Danish-mini .mini-eyes { display: flex; gap: 5px; }
  .msg-Danish-mini .mini-eye { width: 4px; height: 4px; background: #fff; border-radius: 50%; }

  .chat-header-info h3 { font-size: 1rem; font-weight: 700; margin-bottom: 2px; color: #fff; }
  .chat-header-info p { font-size: 0.8rem; opacity: 0.82; color: #fff; }
  .online-dot { width: 10px; height: 10px; background: #4ADE80; border-radius: 50%; display: inline-block; margin-right: 5px; animation: sPulse 2s ease-in-out infinite; }
  @keyframes sPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); } 60% { box-shadow: 0 0 0 5px rgba(74,222,128,0); } }

  .chat-messages { padding: 20px; min-height: 320px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; background: var(--gray-50); }
  .msg { display: flex; gap: 10px; max-width: 85%; }
  .msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .msg-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; border: 1px solid var(--gray-200); }
  .msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .msg.user .msg-avatar { background: var(--orange); }
  .msg-bubble { background: var(--white); padding: 12px 16px; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
  .msg.user .msg-bubble { background: var(--blue); color: var(--white); }
  .chat-input-bar { padding: 16px; border-top: 1px solid var(--gray-200); display: flex; gap: 10px; align-items: flex-end; }
  .chat-input { flex: 1; padding: 12px 16px; border-radius: 10px; border: 2px solid var(--gray-200); font-size: 0.95rem; font-family: inherit; resize: none; min-height: 48px; transition: border 0.2s; }
  .chat-input:focus { outline: none; border-color: var(--blue); }
  .chat-send { background: var(--blue); color: var(--white); border: none; border-radius: 10px; padding: 12px 18px; font-size: 1.1rem; cursor: pointer; transition: background 0.2s; }
  .chat-send:hover { background: #1e40af; }
  .chat-locked { text-align: center; padding: 32px; color: var(--gray-600); }
  @media (prefers-reduced-motion: reduce) {
    .Danish-ring, .Danish-eye, .Danish-mouth, .Danish-anim, .online-dot { animation: none !important; }
  }
  @media (max-width: 720px) {
    .chat-experience { grid-template-columns: 1fr; }
    .presenter-avatar-panel { position: relative; top: auto; width: 100%; min-height: 420px; }
    .presenter-avatar-stage { height: 480px; }
  }

  /* VIDEO MODAL */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; }
  .modal-overlay.hidden { display: none; }
  .modal { background: var(--white); border-radius: var(--radius); width: 100%; max-width: 860px; overflow: hidden; }
  .video-modal-window { max-width: min(860px, calc(100vw - 40px)); max-height: calc(100dvh - 64px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }

  /* AFFILIATE MODAL */
  .affiliate-modal { max-width: 820px; }
  .affiliate-modal-body { padding: 4px 4px 8px; }
  .affiliate-blurb { color: var(--gray-600); font-size: 0.95rem; line-height: 1.6; margin: 4px 0 16px; }
  html[data-theme="dark"] .affiliate-blurb { color: var(--gray-400); }
  .affiliate-link-row { display: flex; gap: 10px; margin-bottom: 18px; }
  .affiliate-link-input { flex: 1; padding: 11px 12px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 0.9rem; background: var(--gray-50); color: var(--gray-800); }
  html[data-theme="dark"] .affiliate-link-input { background: #0f172a; border-color: #1e293b; color: var(--gray-200); }
  .affiliate-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
  .affiliate-stats .stat { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 8px; text-align: center; }
  html[data-theme="dark"] .affiliate-stats .stat { background: #0f172a; border-color: #1e293b; }
  .affiliate-stats .stat-num { display: block; font-size: 1.15rem; font-weight: 800; color: var(--blue-dark); }
  html[data-theme="dark"] .affiliate-stats .stat-num { color: var(--blue); }
  .affiliate-stats .stat-label { font-size: 0.72rem; color: var(--gray-500); }
  .affiliate-recent-title { font-size: 0.95rem; margin: 0 0 10px; color: var(--gray-800); }
  html[data-theme="dark"] .affiliate-recent-title { color: var(--gray-100); }
  .affiliate-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .affiliate-table th, .affiliate-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--gray-200); }
  html[data-theme="dark"] .affiliate-table th, html[data-theme="dark"] .affiliate-table td { border-color: #1e293b; }
  .affiliate-table th { color: var(--gray-500); font-weight: 600; }
  .affiliate-dashboard-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:4px 0 14px; font-size:.82rem; color:var(--gray-600); }
  .affiliate-dashboard-toolbar select { width:auto; min-width:160px; padding:8px 10px; border:1px solid var(--gray-300); border-radius:9px; background:var(--white); color:var(--gray-800); }
  .affiliate-dashboard-section { margin-top:14px; border:1px solid var(--gray-200); border-radius:12px; padding:12px 14px; }
  .affiliate-dashboard-section summary { cursor:pointer; font-weight:700; color:var(--gray-800); }
  .affiliate-dashboard-section[open] summary { margin-bottom:10px; }
  .affiliate-notification-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
  .affiliate-notification-list li { display:grid; gap:2px; padding:9px 0; border-bottom:1px solid var(--gray-200); }
  .affiliate-notification-list span, .affiliate-notification-list small { color:var(--gray-500); }
  html[data-theme="dark"] .affiliate-dashboard-toolbar select { background:#0f172a; color:#e2e8f0; border-color:#334155; }
  .affiliate-fineprint { font-size: 0.78rem; color: var(--gray-500); margin-top: 14px; line-height: 1.5; }
  .modal-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray-200); }
  .modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); }
  .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--gray-600); }
  .video-player { background: #000; width: 100%; aspect-ratio: 16/9; max-height: 44dvh; flex-shrink: 0; }
  .video-player video { width: 100%; height: 100%; }
  .modal-body { padding: 20px; }
  .video-modal-window .modal-body { overflow-y: auto; min-height: 0; }
  .video-placeholder { background:#111; color:#fff; padding:36px; text-align:center; font-size:1.05rem; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
  body.modal-open { overflow: hidden; }

  /* AUTH MODAL */
  .auth-modal { max-width: 440px; padding: 0; border-radius: var(--radius); }
  .auth-modal .modal-header { background: var(--blue-light); }
  .auth-modal .modal-body { padding: 28px; }
  .auth-form { display: none; }
  .auth-form.active { display: block; }

  /* FORMS */
  .form-group { margin-bottom: 22px; }
  .form-group label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.95rem; color: var(--gray-700); }
  .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 13px 16px; border: 2px solid var(--gray-200); border-radius: 10px; font-size: 1rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; background: var(--white); color: var(--gray-800); }
  .form-group input:hover, .form-group textarea:hover, .form-group select:hover { border-color: var(--gray-400); }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.14); }
  .form-group textarea { resize: vertical; min-height: 120px; }
  .form-error { color: var(--red); font-size: 0.88rem; margin-top: 8px; font-weight: 500; }

  /* PRICING */
  .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 960px; margin: 0 auto; }
  .price-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; border: 2px solid var(--gray-200); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .price-card.featured { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,0.12), var(--shadow); }
  .price-card.featured::before { content: "Most Popular"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--blue); color: var(--white); font-size: 0.78rem; font-weight: 700; padding: 5px 18px; border-radius: 99px; letter-spacing: 0.5px; }
  .price-name { font-size: 1rem; font-weight: 700; color: var(--gray-600); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
  .price-amount { font-size: 2.6rem; font-weight: 900; color: var(--blue-dark); line-height: 1; margin-bottom: 4px; }
  .price-amount span { font-size: 1rem; font-weight: 500; color: var(--gray-600); }
  .price-desc { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 24px; }
  .price-features { list-style: none; margin-bottom: 28px; }
  .price-features li { padding: 8px 0; font-size: 0.95rem; border-bottom: 1px solid var(--gray-100); display: flex; gap: 10px; align-items: flex-start; }
  .price-features li:last-child { border-bottom: none; }
  .check { color: var(--green); font-size: 1.1rem; }

  /* CONSULTING */
  .consulting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .consulting-list { list-style: none; margin: 20px 0 28px; }
  .consulting-list li { padding: 10px 0; border-bottom: 1px solid var(--gray-200); display: flex; gap: 12px; font-size: 1rem; }
  .consulting-list li:last-child { border-bottom: none; }

  /* FAQ */
  .faq-item { border: 1px solid var(--gray-200); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s; }
  .faq-item:hover { box-shadow: var(--shadow-sm); }
  .faq-q { padding: 18px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--white); transition: background 0.15s; border: none; width: 100%; font-family: inherit; text-align: left; min-height: 56px; }
  .faq-q:hover { background: var(--blue-light); color: var(--blue-dark); }
  .faq-q:focus-visible { outline: none; background: var(--blue-light); box-shadow: inset 0 0 0 3px rgba(37,99,235,0.30); }
  .faq-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.2s; background: var(--gray-50); font-size: 0.95rem; color: var(--gray-600); line-height: 1.7; }
  .faq-a.open { max-height: 300px; padding: 16px 22px; }
  .faq-arrow { transition: transform 0.3s; font-size: 1rem; color: var(--gray-400); }
  .faq-arrow.open { transform: rotate(180deg); }

  /* SCAM ALERT */
  .scam-alert { background: #FEF2F2; border: 2px solid #FECACA; border-radius: var(--radius); padding: 24px 28px; display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; }
  .scam-icon { font-size: 2rem; flex-shrink: 0; }
  .scam-alert h3 { color: #DC2626; font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
  .scam-alert p { font-size: 0.9rem; color: #7F1D1D; }

  /* GLOSSARY */
  .glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .glossary-item { background: var(--white); border-radius: 10px; padding: 18px; border: 1px solid var(--gray-200); }
  .glossary-item h4 { color: var(--blue); font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
  .glossary-item p { font-size: 0.88rem; color: var(--gray-600); }

  /* SEARCH BAR */
  .search-bar { display: flex; gap: 8px; max-width: 500px; margin: 0 auto 48px; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; border: 2px solid var(--gray-200); transition: border-color 0.15s, box-shadow 0.15s; }
  .search-bar:focus-within { border-color: var(--blue); box-shadow: var(--shadow), 0 0 0 3px rgba(37,99,235,0.12); }
  .search-bar input { flex: 1; border: none; outline: none; font-size: 1rem; font-family: inherit; padding: 8px 12px; background: transparent; color: var(--gray-800); }
  .search-bar button { background: var(--blue); color: var(--white); border: none; border-radius: var(--radius-pill); padding: 10px 22px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.2s var(--spring), box-shadow 0.2s ease; min-height: 40px; box-shadow: var(--btn-shadow-blue); }
  .search-bar button:hover { transform: translateY(-1px) scale(1.03); box-shadow: var(--btn-shadow-blue-hover); background: var(--blue-dark); }
  .search-bar button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* ABOUT */
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .about-visual { background: linear-gradient(135deg, var(--blue-light), var(--orange-light)); border-radius: var(--radius); min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 28px; }
  .about-visual img { width: min(320px, 82%); height: auto; aspect-ratio: 578 / 433; filter: drop-shadow(0 18px 28px rgba(15,23,42,0.16)); }
  .contact-form { max-width: 580px; margin: 0 auto; }

  /* AI STUDIO PAGE */
  .studio-note { background: var(--orange-light); border: 1px solid var(--orange); border-radius: 12px; padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 40px; font-size: 0.95rem; color: var(--gray-800); }
  .studio-note span { font-size: 1.4rem; flex-shrink: 0; }
  .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
  .studio-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 28px; transition: border-color 0.2s, box-shadow 0.2s; }
  .studio-card:hover { border-color: var(--pipeline-color, var(--blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pipeline-color, var(--blue)) 12%, transparent); }
  .studio-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
  .studio-icon { font-size: 2.2rem; flex-shrink: 0; }
  .studio-card-header h3 { font-size: 1.1rem; font-weight: 800; color: var(--gray-800); margin-bottom: 2px; }
  .studio-model { font-size: 0.8rem; font-weight: 700; color: var(--pipeline-color, var(--blue)); background: color-mix(in srgb, var(--pipeline-color, var(--blue)) 10%, white); padding: 2px 8px; border-radius: 12px; }
  .studio-status { margin-left: auto; font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
  .status-ready { color: var(--green); }
  .status-soon { color: var(--gray-400); }
  .studio-desc { font-size: 0.92rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
  .studio-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; font-size: 0.85rem; }
  .studio-meta strong { display: block; color: var(--gray-800); font-weight: 700; margin-bottom: 4px; }
  .studio-meta ul { list-style: disc; padding-left: 18px; color: var(--gray-600); }
  .studio-meta li { margin-bottom: 3px; }
  .studio-gpu { font-size: 0.82rem; color: var(--gray-400); margin-bottom: 16px; }
  .studio-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--gray-200); padding-top: 14px; }
  .pipeline-flow { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
  .pipeline-step { background: var(--white); border: 2px solid var(--gray-200); border-radius: 12px; padding: 20px 16px; text-align: center; flex: 1; min-width: 160px; max-width: 220px; }
  .pipeline-num { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: white; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
  .pipeline-label { font-weight: 800; color: var(--blue-dark); margin-bottom: 6px; }
  .pipeline-step p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.5; }
  .pipeline-arrow { font-size: 1.6rem; color: var(--gray-400); align-self: center; padding: 0 4px; }
  @media (max-width: 700px) { .pipeline-arrow { display: none; } .studio-meta { grid-template-columns: 1fr; } }

  /* USER MENU */
  .user-menu { position: relative; }
  .user-btn { display: flex; align-items: center; gap: 8px; background: var(--blue-light); color: var(--blue); border: 1px solid rgba(37,99,235,0.2); border-radius: 9px; padding: 9px 14px; font-weight: 700; cursor: pointer; font-size: 0.9rem; font-family: inherit; transition: background 0.15s, box-shadow 0.15s; }
  .user-btn:hover { background: #DBEAFE; box-shadow: 0 2px 8px rgba(37,99,235,0.15); }
  .user-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .user-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 190px; display: none; z-index: 200; overflow: hidden; }
  .user-dropdown.open { display: block; }
  .user-dropdown a { display: block; padding: 12px 16px; color: var(--gray-800); font-size: 0.9rem; cursor: pointer; transition: background 0.1s; }
  .user-dropdown a:hover { background: var(--gray-50); text-decoration: none; }
  .user-dropdown a:focus-visible { outline: none; background: var(--blue-light); color: var(--blue); }
  .tier-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--blue); color: white; margin-left: 4px; }

  /* FOOTER */
  footer { background: var(--gray-800); color: var(--gray-400); padding: 56px 24px 32px; }
  .footer-inner { max-width: 1320px; margin: 0 auto; }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
  .footer-brand h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 10px; }
  .footer-logo { width: 46px; height: auto; aspect-ratio: 578 / 433; object-fit: contain; vertical-align: middle; margin-right: 8px; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.20)); }
  .footer-brand p { font-size: 0.88rem; line-height: 1.7; }
  .footer-col h4 { color: var(--white); font-size: 0.9rem; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 8px; }
  .footer-col a { color: var(--gray-400); font-size: 0.88rem; transition: color 0.2s; cursor: pointer; }
  .footer-col a:hover { color: var(--white); text-decoration: none; }
  .footer-bottom { border-top: 1px solid #374151; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; flex-wrap: wrap; gap: 12px; }

  /* TOAST */
  .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--green); color: var(--white); padding: 14px 28px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 9999; transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); font-size: 1rem; max-width: calc(100vw - 40px); text-align: center; }
  .toast.show { transform: translateX(-50%) translateY(0); }
  .toast.error { background: var(--red); }

  /* LOADING SPINNER */
  .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-state { text-align: center; padding: 48px; color: var(--gray-600); }

  /* ARTICLES */
  .article-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--gray-200); transition: transform 0.2s; cursor: pointer; }
  .article-card:hover { transform: translateY(-3px); }
  .article-header { padding: 20px 20px 0; font-size: 2.5rem; }
  .article-body { padding: 16px 20px 20px; }
  .article-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; line-height: 1.4; }
  .article-body p { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 12px; }
  .article-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  /* ARTICLE READER */
  .article-reader { max-width: 720px; margin: 0 auto; }
  .article-content { line-height: 1.8; }
  .article-content h2 { font-size: 1.4rem; font-weight: 700; color: var(--blue-dark); margin: 28px 0 12px; }
  .article-content h3 { font-size: 1.15rem; font-weight: 700; color: var(--blue-dark); margin: 20px 0 10px; }
  .article-content p { margin-bottom: 16px; }
  .article-content ul, .article-content ol { margin: 12px 0 16px 24px; }
  .article-content li { margin-bottom: 8px; }
  .article-content strong { color: var(--gray-800); }
  .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; margin-bottom: 24px; cursor: pointer; }
  .back-link:hover { text-decoration: underline; }

  /* UTILS */
  .text-center { text-align: center; }
  .mt-4 { margin-top: 16px; }
  .mt-8 { margin-top: 32px; }
  .mb-4 { margin-bottom: 16px; }
  .hidden { display: none !important; }

  /* WEBSITE BUILDING PAGE */
  .websites-hero { background: linear-gradient(135deg, #1E40AF 0%, #7C3AED 100%); color: var(--white); padding: 80px 24px; text-align: center; }
  .websites-hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 900; margin-bottom: 16px; }
  .websites-hero p { font-size: 1.15rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }
  .web-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
  .web-tier { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; border: 2px solid var(--gray-200); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; position: relative; }
  .web-tier:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.13); }
  .web-tier.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
  .web-tier.popular { border-color: var(--orange); }
  .web-tier.popular.selected { box-shadow: 0 0 0 3px rgba(249,115,22,0.2); }
  .web-popular-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--orange); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 4px 16px; border-radius: 99px; white-space: nowrap; }
  .web-tier-icon { font-size: 2.4rem; margin-bottom: 12px; }
  .web-tier h3 { font-size: 1.15rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 4px; }
  .web-tier-desc { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 12px; }
  .web-pricing-reassure { max-width: 1000px; margin: 28px auto 0; padding: 16px 20px; border: 1px solid rgba(37,99,235,.18); border-radius: 14px; background: rgba(239,246,255,.7); color: var(--blue-dark); font-weight: 700; font-size: 0.98rem; text-align: center; }
  .web-tier-price { font-size: 2.2rem; font-weight: 900; color: var(--blue-dark); margin: 12px 0 16px; }
  .web-tier-price span { font-size: 1rem; font-weight: 500; color: var(--gray-600); }
  .web-tier-features { list-style: none; margin-bottom: 20px; }
  .web-tier-features li { padding: 7px 0; border-bottom: 1px solid var(--gray-200); font-size: 0.9rem; color: var(--gray-600); display: flex; gap: 8px; align-items: flex-start; }
  .web-tier-features li:last-child { border-bottom: none; }
  .web-tier-features .feat-no { color: var(--gray-400) !important; }
  .web-tier-features .feat-no .feat-x { color: #DC2626; font-weight: 700; flex-shrink: 0; font-size: 1rem; line-height: 1.5; }
  .web-tier-features .feat-yes { flex-shrink: 0; }
  .web-select-btn { width: 100%; justify-content: center; }
  .builder-wrap { max-width: 900px; margin: 0 auto; }
  .builder-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .color-swatches { display: flex; gap: 10px; margin-top: 8px; }
  .color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color 0.15s, transform 0.15s; padding: 0; appearance: none; }
  .color-swatch.active { border-color: var(--gray-800); transform: scale(1.2); }
  .builder-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .starter-portal-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin: 0 auto; }
  .starter-portal-panel + .starter-portal-panel { margin-top: 20px; }
  .starter-status-box {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid rgba(21,128,61,.25);
    background: linear-gradient(135deg, rgba(240,253,244,.95), rgba(236,253,245,.7));
    border-radius: 12px; padding: 15px 18px; color: #14532D; font-weight: 600; line-height: 1.55;
    margin: 18px 0; box-shadow: 0 8px 20px rgba(21,128,61,.06);
  }
  .starter-status-box::before {
    content: ''; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px;
    background-color: #16A34A;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2011.08V12a10%2010%200%201%201-5.93-9.14'/%3E%3Cpolyline%20points%3D'22%204%2012%2014.01%209%2011.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2011.08V12a10%2010%200%201%201-5.93-9.14'/%3E%3Cpolyline%20points%3D'22%204%2012%2014.01%209%2011.01'/%3E%3C/svg%3E");
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .starter-verification-panel {
    display: flex; align-items: center; gap: 18px; max-width: 720px; margin: 8px auto 24px; padding: 22px 24px;
    border: 1px solid rgba(37,99,235,.2); border-radius: 18px;
    background: linear-gradient(135deg,rgba(239,246,255,.98),rgba(255,255,255,.98));
    box-shadow: 0 16px 38px rgba(30,64,175,.1);
  }
  .starter-verification-spinner {
    width: 38px; height: 38px; flex: 0 0 38px; border: 4px solid rgba(37,99,235,.16); border-top-color: var(--blue);
    border-radius: 50%; animation: starter-verification-spin .8s linear infinite;
  }
  .starter-verification-copy strong { display: block; color: var(--gray-900); font-size: 1.05rem; }
  .starter-verification-copy p { margin: 4px 0 0; color: var(--gray-600); line-height: 1.5; }
  .starter-verification-copy .btn { margin-top: 12px; }
  .starter-verification-panel.is-error { border-color: rgba(220,38,38,.24); background: linear-gradient(135deg,rgba(254,242,242,.98),rgba(255,255,255,.98)); }
  .starter-verification-panel.is-error .starter-verification-spinner { animation: none; border-color: rgba(220,38,38,.2); border-top-color: #DC2626; }
  @keyframes starter-verification-spin { to { transform: rotate(360deg); } }
  .starter-upload-card {
    border: 1px solid rgba(37,99,235,.16);
    background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(239,246,255,.55));
    border-radius: var(--radius); padding: 24px; margin: 20px 0;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
  }
  .starter-upload-card.starter-design-card {
    background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,247,237,.55));
    border-color: rgba(192,86,33,.18);
  }
  .starter-upload-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .starter-upload-card-icon {
    display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
    border-radius: 12px; background: linear-gradient(135deg, #DBEAFE, #EDE9FE); color: #1E3A8A; font-size: 1.2rem;
  }
  .starter-upload-card-icon--alt { background: linear-gradient(135deg, #FFEDD5, #FEE2E2); color: #9A3412; }
  .starter-upload-card-head h4 { margin: 0 0 4px; color: var(--blue-dark); font-size: 1.05rem; }
  .starter-upload-card-head p { margin: 0; color: var(--gray-600); font-size: .87rem; line-height: 1.5; max-width: 560px; }
  .starter-upload-card .form-group:last-child { margin-bottom: 0; }
  .starter-upload-card > .form-group + .form-group,
  .starter-upload-card > .form-group + .starter-color-grid { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--gray-200); }
  .starter-file-selection {
    margin-top: 10px; overflow: hidden; border: 1px solid rgba(37,99,235,.18); border-radius: 12px;
    background: rgba(239,246,255,.65);
  }
  .starter-file-selection-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(37,99,235,.12); }
  .starter-file-selection-head > span { color: var(--blue-dark); font-size: .82rem; font-weight: 850; }
  .starter-file-selection-head > small { margin-right: auto; color: var(--gray-500); font-size: .72rem; }
  .starter-file-clear-all,.starter-file-remove {
    border: 0; border-radius: 8px; background: transparent; color: #B91C1C; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer;
  }
  .starter-file-clear-all { padding: 5px 8px; }
  .starter-file-clear-all:hover,.starter-file-remove:hover { background: rgba(220,38,38,.09); }
  .starter-file-list { margin: 0; padding: 0; list-style: none; }
  .starter-file-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
  .starter-file-list li + li { border-top: 1px solid rgba(37,99,235,.1); }
  .starter-file-details { display: grid; min-width: 0; margin-right: auto; }
  .starter-file-details strong { overflow: hidden; color: var(--gray-800); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
  .starter-file-details small { color: var(--gray-500); font-size: .7rem; }
  .starter-file-remove { flex: 0 0 auto; padding: 7px 9px; }
  .starter-file-selection.is-image-selection { overflow: visible; }
  .starter-image-preview-list {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px);
    gap: 14px; margin: 0; padding: 14px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }
  .starter-image-preview-card {
    display: grid; grid-template-rows: 176px auto auto; gap: 10px; min-width: 0;
    padding: 10px; border: 1px solid rgba(37,99,235,.16); border-radius: 14px;
    background: rgba(255,255,255,.9); box-shadow: 0 10px 24px rgba(15,23,42,.06);
    scroll-snap-align: start;
  }
  .starter-image-preview-wrap { position: relative; overflow: hidden; border-radius: 10px; background: #E2E8F0; }
  .starter-image-preview-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .starter-image-preview-card.is-logo .starter-image-preview-wrap img { object-fit: contain; padding: 12px; background: #fff; }
  .starter-image-preview-remove {
    position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px;
    border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(15,23,42,.78);
    color: #fff; font-size: 1rem; font-weight: 900; cursor: pointer; box-shadow: 0 5px 14px rgba(15,23,42,.22);
  }
  .starter-image-preview-card label { display: flex; align-items: center; gap: 6px; color: var(--blue-dark); font-size: .76rem; font-weight: 850; line-height: 1.35; }
  .starter-image-preview-card textarea {
    width: 100%; min-height: 130px; resize: vertical; margin: 0; padding: 10px 11px;
    border: 1px solid var(--gray-200); border-radius: 10px; background: var(--white);
    color: var(--gray-800); font: 500 .7rem/1.5 inherit;
  }
  .starter-image-preview-card textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
  .starter-image-preview-card textarea[aria-invalid="true"] { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
  .required-tag {
    display: inline-block; background: rgba(220,38,38,.09); color: var(--red);
    font-size: .68rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 99px; vertical-align: middle; margin-left: 6px;
  }
  .form-group input[type="file"] {
    display: flex; align-items: center; padding: 10px 14px 10px 10px; cursor: pointer;
  }
  .form-group input[type="file"]::file-selector-button {
    appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
    padding: 10px 20px; margin-right: 14px; font-family: inherit;
    border-radius: var(--radius-pill); font-weight: 700; font-size: .87rem;
    background: linear-gradient(135deg, #3b82f6 0%, var(--blue) 45%, #1d4ed8 100%);
    color: #fff; box-shadow: var(--btn-shadow-blue);
    transition: box-shadow .2s ease, transform .2s var(--spring);
  }
  .form-group input[type="file"]::file-selector-button:hover { box-shadow: var(--btn-shadow-blue-hover); transform: translateY(-1px); }
  .form-group input[type="file"]:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.14); }
  .starter-progress-card { display: grid; gap: 10px; border: 1px solid rgba(37,99,235,.22); background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(248,250,252,.98)); border-radius: 14px; padding: 16px; box-shadow: 0 12px 28px rgba(15, 23, 42, .08); }
  .starter-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--blue-dark); }
  .starter-progress-head span { font-weight: 900; color: #1D4ED8; }
  .starter-progress-track { height: 9px; border-radius: 999px; background: #DBEAFE; overflow: hidden; position: relative; }
  .starter-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563EB, #F97316); transition: width .6s ease; position: relative; overflow: hidden; }
  .starter-progress-track span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); width: 60%; animation: starterShimmer 1.6s ease-in-out infinite; }
  @keyframes starterShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
  .starter-progress-card p { margin: 0; color: var(--gray-700); font-weight: 700; }
  .starter-progress-card ul { margin: 0; padding-left: 18px; color: var(--gray-600); font-size: .9rem; line-height: 1.55; }
  .starter-progress-card.is-stopped { border-color: rgba(217,119,6,.32); background: linear-gradient(135deg,rgba(255,247,237,.98),rgba(255,255,255,.98)); }
  .starter-progress-card.is-stopped .starter-progress-head span { color: #B45309; }
  .starter-progress-card.is-stopped .starter-progress-track span { background: linear-gradient(90deg,#D97706,#F97316); }
  .starter-progress-card.is-stopped .starter-progress-track span::after { display: none; }
  .starter-progress-recovery { color: #92400E !important; font-size: .84rem; }
  .starter-progress-stage { font-weight: 600 !important; font-size: .82rem; color: var(--gray-500) !important; }
  .starter-progress-stage code { background: rgba(37,99,235,.09); border-radius: 5px; padding: 1px 6px; font-size: .8em; color: var(--blue-dark); }
  .starter-progress-sync { display: flex; align-items: center; gap: 7px; font-size: .8rem !important; font-weight: 600 !important; color: var(--gray-500) !important; }
  .starter-progress-sync .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: starterLiveDot 1.8s ease-out infinite; flex-shrink: 0; }
  @keyframes starterLiveDot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
  @media (prefers-reduced-motion: reduce) {
    .starter-progress-track span::after { animation: none; display: none; }
    .starter-progress-sync .live-dot { animation: none; }
  }
  .starter-upload-locked > .form-group,
  .starter-upload-locked > .starter-assets-box,
  .starter-upload-locked > .starter-privacy-box,
  .starter-upload-locked > .starter-upload-card,
  .starter-upload-locked > .starter-template-guide,
  .starter-upload-locked > .builder-actions,
  .starter-upload-locked > .form-error { display: none !important; }
  .starter-upload-locked { max-width: 860px; border-color: rgba(37,99,235,.28); background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.94)); }
  .starter-upload-locked #starterAccessStatus { display: none !important; }
  .starter-upload-locked #starterGenerateStatus { margin-top: 0; }
  .starter-upload-locked .starter-progress-card { padding: 24px; }
  .student-discount-box { border: 1px solid #D7E2FF; background: #F8FBFF; border-radius: 12px; margin: 18px 0; overflow: hidden; }
  .student-discount-box summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .student-discount-box summary::-webkit-details-marker { display: none; }
  .student-discount-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .student-discount-title strong { color: var(--blue-dark); font-size: 0.98rem; line-height: 1.25; }
  .student-discount-title span { color: var(--gray-600); font-size: 0.86rem; font-weight: 500; line-height: 1.35; }
  .student-discount-price { flex: 0 0 auto; color: #1E40AF; background: #EAF0FF; border: 1px solid #C8D6FF; border-radius: 999px; padding: 7px 10px; font-size: 0.84rem; font-weight: 850; white-space: nowrap; }
  .student-discount-body { padding: 0 16px 16px; border-top: 1px solid #E2E8F8; }
  .student-discount-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; }
  .student-discount-form .form-group { margin-bottom: 0; }
  .student-discount-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  .policy-acceptance-card { margin: 20px 0; padding: 22px; border: 2px solid rgba(37,99,235,.28); border-radius: var(--radius); background: var(--blue-light); }
  .policy-acceptance-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; color:var(--gray-600); font-size:.82rem; font-weight:700; }
  .policy-acceptance-card h4 { margin:0 0 8px; color:var(--blue-dark); font-size:1.15rem; }
  .policy-acceptance-card p { margin:0 0 12px; color:var(--gray-700); line-height:1.65; }
  .affiliate-payment-callout[hidden] { display:none !important; }
  .affiliate-payment-callout { display:flex; align-items:center; gap:16px; margin:22px 0 0; padding:20px 22px; border:2px solid rgba(22,163,74,.24); border-radius:var(--radius); background:linear-gradient(135deg, rgba(240,253,244,.98), rgba(239,246,255,.98)); box-shadow:0 12px 30px rgba(15,23,42,.06); text-align:left; }
  .affiliate-payment-icon { flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--green); color:#fff; font-size:1.15rem; font-weight:800; }
  .affiliate-payment-copy { flex:1 1 260px; min-width:220px; }
  .affiliate-payment-copy > span { display:inline-block; margin-bottom:5px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
  .affiliate-payment-copy h3 { margin:0 0 6px; color:var(--blue-dark); font-size:1.08rem; }
  .affiliate-payment-copy p { margin:0; color:var(--gray-700); font-size:.92rem; line-height:1.55; }
  .affiliate-payment-action { flex:0 0 auto; align-self:center; white-space:nowrap; }
  .affiliate-payment-callout-compact { align-items:flex-start; flex-wrap:wrap; padding:16px; }
  .affiliate-payment-callout-compact .affiliate-payment-icon { width:34px; height:34px; }
  .affiliate-payment-callout-compact .affiliate-payment-action { width:calc(100% - 50px); margin-left:50px; justify-content:center; }
  .affiliate-development-notice { display:flex; flex-direction:column; gap:3px; margin:0 0 16px; padding:12px 14px; border:1px solid #F59E0B; border-radius:10px; background:#FFFBEB; color:#92400E; font-size:.84rem; line-height:1.45; }
  html[data-theme="dark"] .affiliate-payment-callout { background:linear-gradient(135deg, rgba(20,83,45,.28), rgba(30,58,138,.2)); border-color:rgba(74,222,128,.35); }
  html[data-theme="dark"] .affiliate-payment-copy h3 { color:var(--gray-100); }
  html[data-theme="dark"] .affiliate-payment-copy p { color:var(--gray-300); }
  html[data-theme="dark"] .affiliate-development-notice { background:rgba(146,64,14,.18); color:#FDE68A; }
  @media (max-width:640px) {
    .affiliate-payment-callout { flex-direction:column; }
    .affiliate-payment-action { width:100%; justify-content:center; }
    .affiliate-payment-callout-compact .affiliate-payment-action { width:100%; margin-left:0; }
  }
  .policy-full-link { display:inline-flex; font-weight:800; color:var(--blue); margin-bottom:16px; }
  .policy-checkbox-row { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:10px; background:var(--white); border:1px solid var(--gray-300); color:var(--blue-dark); font-weight:700; cursor:pointer; }
  .policy-checkbox-row input { width:20px; height:20px; margin-top:1px; flex:0 0 auto; accent-color:var(--blue); }
  .policy-checkbox-row:focus-within { box-shadow:var(--focus-ring); }
  .affiliate-agreement-copy { max-height:300px; overflow:auto; margin:14px 0; padding:18px; border:1px solid var(--gray-300); border-radius:12px; background:var(--gray-50); }
  .affiliate-agreement-copy pre { white-space:pre-wrap; font:inherit; font-size:.9rem; line-height:1.6; color:var(--gray-700); }
  .affiliate-disclosure-guide { margin-top:20px; padding:18px; border-radius:12px; background:var(--blue-light); border:1px solid var(--gray-200); }

  /* ── Legal document rendering (refund policy / affiliate agreement pages) ── */
  .policy-doc-banner { display:flex; align-items:flex-start; gap:12px; margin:0 0 24px; padding:16px 18px; border-radius:12px; background:#FEF3C7; border:1px solid #F59E0B; color:#92400E; font-weight:700; font-size:.92rem; line-height:1.6; }
  html[data-theme="dark"] .policy-doc-banner { background:#3F2D0B; border-color:#B45309; color:#FCD34D; }
  .policy-doc-banner svg { flex:0 0 auto; width:20px; height:20px; margin-top:2px; }
  .policy-version-line { display:inline-flex; align-items:center; gap:8px; margin:0 0 24px; padding:8px 14px; border-radius:999px; background:var(--gray-50); border:1px solid var(--gray-200); font-size:.85rem; font-weight:700; color:var(--gray-600); }
  .policy-version-line code { background:none; border:0; padding:0; color:var(--blue); }
  .policy-summary-callout { margin:0 0 28px; padding:18px 20px; border-radius:12px; background:var(--blue-light); border:1px solid color-mix(in srgb, var(--blue) 25%, transparent); color:var(--blue-dark); }
  .policy-summary-callout .policy-summary-label { display:block; font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
  .policy-summary-callout p { margin:0; font-weight:600; line-height:1.7; color:var(--blue-dark); }
  .policy-toc { margin:0 0 32px; padding:20px 22px; border:1px solid var(--gray-200); border-radius:14px; background:var(--gray-50); }
  .policy-toc h2 { margin:0 0 14px; font-size:.85rem; font-weight:800; color:var(--gray-600); text-transform:uppercase; letter-spacing:.06em; }
  .policy-toc ol { columns:2; column-gap:28px; margin:0; padding-left:0; list-style:none; }
  .policy-toc li { break-inside:avoid; margin-bottom:7px; }
  .policy-toc a { color:var(--gray-700); font-size:.92rem; text-decoration:none; display:flex; gap:9px; }
  .policy-toc a:hover { color:var(--blue); text-decoration:underline; }
  .policy-toc a .policy-num { color:var(--blue); font-weight:800; min-width:1.5em; }
  .policy-doc h2 { display:flex; align-items:baseline; gap:12px; margin:0 0 14px; padding-top:26px; border-top:1px solid var(--gray-200); font-size:1.26rem; font-weight:800; color:var(--blue-dark); scroll-margin-top:96px; }
  .policy-doc h2:first-of-type { padding-top:0; border-top:0; }
  .policy-doc .policy-num { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:2em; height:2em; border-radius:50%; background:var(--blue-light); color:var(--blue); font-size:.82rem; font-weight:800; }
  .policy-doc p { margin:0 0 16px; line-height:1.75; color:var(--gray-700); }
  .policy-doc code { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:6px; padding:2px 7px; font-size:.88em; color:var(--blue-dark); }
  .starter-template-showcase { margin:56px 0 8px; padding:36px 34px; border-radius:20px; background:linear-gradient(160deg, var(--orange-light), var(--white) 55%); border:1px solid color-mix(in srgb, var(--orange) 28%, transparent); }
  .starter-template-showcase-head { max-width:720px; margin:0 auto 30px; text-align:center; }
  .badge-accent { background:var(--orange-light); color:var(--orange); border:1px solid color-mix(in srgb, var(--orange) 30%, transparent); }
  .starter-template-showcase-head h2 { margin:0 0 12px; font-size:1.6rem; font-weight:800; color:var(--blue-dark); }
  .starter-template-showcase-head p { margin:0; color:var(--gray-700); line-height:1.7; font-size:1rem; }
  .starter-template-group { margin-top:30px; }
  .starter-template-group:first-of-type { margin-top:0; }
  .starter-template-group h3 { margin:0 0 16px; font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); }
  .starter-template-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; }
  .starter-template-card { display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:14px; background:var(--white); border:1px solid var(--gray-200); box-shadow:0 4px 14px rgba(15,23,42,.04); transition:transform .18s, box-shadow .18s, border-color .18s; }
  .starter-template-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(15,23,42,.09); border-color:color-mix(in srgb, var(--orange) 35%, transparent); }
  .starter-template-card h4 { margin:0 0 8px; font-size:1rem; font-weight:800; color:var(--blue-dark); }
  .starter-template-card p { margin:0 0 10px; font-size:.86rem; line-height:1.55; color:var(--gray-600); flex:1; }
  .starter-template-card .btn { align-self:flex-start; }
  @media (max-width: 640px) {
    .starter-template-showcase { padding:26px 20px; margin:40px 0 8px; }
  }
  html[data-theme="dark"] .starter-template-showcase { background:linear-gradient(160deg, var(--orange-light), #0F172A 55%); border-color:color-mix(in srgb, var(--orange) 34%, transparent); }
  html[data-theme="dark"] .starter-template-showcase-head p { color:#CBD5E1; }
  html[data-theme="dark"] .starter-template-card { background:#111C2E; border-color:#334155; }
  html[data-theme="dark"] .starter-template-card p { color:#94A3B8; }
  html[data-theme="dark"] .starter-template-card h4 { color:#E2E8F0; }
  .starter-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .starter-color-grid .form-group { margin: 0; }
  .starter-color-grid input[type="color"] { width: 100%; min-height: 54px; padding: 8px; cursor: pointer; }
  .starter-brand-color-card { --starter-brand-accent: #13294B; margin: 18px 0 20px; border: 1px solid rgba(37,99,235,.2); border-radius: 14px; background: rgba(255,255,255,.72); overflow: hidden; transition: border-color .2s, box-shadow .2s, background .2s; }
  .starter-brand-color-card.is-active { border-color: rgba(37,99,235,.48); background: rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(37,99,235,.1); }
  .starter-brand-color-heading { display: flex; align-items: center; gap: 13px; padding: 16px; }
  .starter-brand-color-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #DBEAFE, #EDE9FE); color: #1E3A8A; font-size: 1rem; font-weight: 900; letter-spacing: -.04em; }
  .starter-brand-color-heading > div:nth-child(2) { min-width: 0; }
  .starter-brand-color-heading h4 { margin: 0 0 3px; color: var(--blue-dark); font-size: 1rem; line-height: 1.25; }
  .starter-brand-color-heading p { margin: 0; max-width: 510px; color: var(--gray-600); font-size: .86rem; line-height: 1.45; }
  .starter-switch { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; margin-left: auto; cursor: pointer; color: var(--gray-700); font-size: .82rem; font-weight: 800; }
  .starter-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .starter-switch-track { display: block; width: 46px; height: 26px; padding: 3px; border-radius: 999px; background: #CBD5E1; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); transition: background .2s, box-shadow .2s; }
  .starter-switch-track span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #FFF; box-shadow: 0 2px 5px rgba(15,23,42,.24); transition: transform .2s; }
  .starter-switch input:checked + .starter-switch-track { background: #2563EB; }
  .starter-switch input:checked + .starter-switch-track span { transform: translateX(20px); }
  .starter-switch input:focus-visible + .starter-switch-track { box-shadow: 0 0 0 4px rgba(37,99,235,.2); }
  .starter-brand-color-controls { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(250px, 1fr); gap: 18px; align-items: end; padding: 15px 16px 16px 71px; border-top: 1px solid rgba(37,99,235,.13); background: linear-gradient(135deg, rgba(239,246,255,.8), rgba(248,250,252,.92)); }
  .starter-brand-color-picker > label { display: block; margin-bottom: 7px; color: var(--gray-700); font-size: .8rem; font-weight: 800; }
  .starter-brand-color-input-row { display: flex; align-items: center; gap: 10px; }
  .starter-brand-color-input-row input[type="color"] { appearance: none; -webkit-appearance: none; flex: 0 0 52px; width: 52px; height: 42px; padding: 3px; border: 2px solid var(--gray-200); border-radius: 10px; background: var(--white); cursor: pointer; }
  .starter-brand-color-input-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
  .starter-brand-color-input-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
  .starter-brand-color-input-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }
  .starter-brand-color-input-row input[type="color"]:focus-visible { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
  .starter-brand-color-input-row output { min-width: 78px; color: var(--gray-700); font: 800 .82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
  .starter-brand-color-preview { display: flex; align-items: center; min-height: 54px; gap: 11px; padding: 10px 12px; border: 1px solid rgba(15,23,42,.1); border-radius: 11px; background: var(--white); box-shadow: 0 5px 14px rgba(15,23,42,.06); }
  .starter-brand-color-preview > span:first-child { color: var(--gray-500); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .starter-brand-color-preview strong { margin-left: auto; color: var(--starter-brand-accent); font-size: .95rem; line-height: 1.2; }
  .starter-brand-theme-preview { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid var(--gray-200); border-radius: 50%; color: var(--gray-600); font-size: 1rem; }
  html[data-theme="dark"] .starter-brand-color-card { background: rgba(15,23,42,.64); border-color: rgba(96,165,250,.26); }
  html[data-theme="dark"] .starter-brand-color-card.is-active { background: rgba(15,23,42,.84); border-color: rgba(96,165,250,.48); }
  html[data-theme="dark"] .starter-brand-color-icon { background: linear-gradient(135deg, rgba(30,64,175,.55), rgba(109,40,217,.42)); color: #DBEAFE; }
  html[data-theme="dark"] .starter-brand-color-controls { background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(30,41,59,.9)); border-top-color: rgba(96,165,250,.18); }
  html[data-theme="dark"] .starter-brand-color-preview { background: #0F172A; border-color: #334155; }
  @media (max-width: 720px) {
    .starter-brand-color-heading { align-items: flex-start; flex-wrap: wrap; }
    .starter-switch { width: 100%; margin: 2px 0 0 55px; justify-content: flex-start; }
    .starter-brand-color-controls { grid-template-columns: 1fr; padding-left: 16px; }
  }
  .starter-privacy-box { border: 1px solid #D7E2FF; background: #F8FBFF; border-radius: 12px; padding: 18px; margin: 16px 0; }
  .starter-privacy-box h3 { color: var(--blue-dark); margin-bottom: 4px; font-size: 1.05rem; }
  .starter-assets-box { border: 1px solid rgba(37, 99, 235, .22); background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(251,146,60,.08)); border-radius: 12px; padding: 18px; margin: 16px 0; }
  .starter-assets-box h3 { color: var(--blue-dark); margin-bottom: 4px; font-size: 1.05rem; }
  .starter-assets-box input[type="file"] { background: rgba(255,255,255,.82); }
  .starter-creative-controls { border: 1px solid rgba(37,99,235,.2); border-radius: 12px; padding: 16px; margin: 18px 0 20px; background: rgba(255,255,255,.58); }
  .starter-creative-controls legend { padding: 0 8px; color: var(--blue-dark); font-weight: 800; }
  .starter-preference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 14px; margin-top: 14px; }
  .starter-preference-grid .form-group { margin-bottom: 12px; }
  .starter-privacy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0 14px; }
  .starter-privacy-grid label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gray-700); }
  .support-request-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .starter-report-panel { border: 2px solid rgba(220,38,38,0.35); background: linear-gradient(135deg, rgba(254,242,242,0.96), rgba(255,247,237,0.96)); border-radius: 14px; padding: 24px; margin-top: 22px; box-shadow: 0 18px 40px rgba(127,29,29,0.12); position: relative; overflow: hidden; }
  .starter-report-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #DC2626, #F97316); }
  .starter-report-panel h3 { color: #7F1D1D !important; }
  .starter-report-panel .builder-form-grid { gap: 12px; }
  .starter-report-panel input[type="file"] { background: rgba(255,255,255,.84); }
  .refund-panel { border-color: rgba(37,99,235,.28); background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,251,235,.92)); box-shadow: 0 18px 40px rgba(30,64,175,.11); }
  .refund-panel::before { background: linear-gradient(90deg, #1E40AF, #D97706); }
  .refund-panel h3 { color: #102A5C !important; }
  .starter-result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .starter-compute-consent { margin-top: 22px; }
  .starter-compute-consent p + p { margin-top: -2px; }
  .starter-compute-consent .policy-checkbox-row { margin-top: 14px; }
  .starter-result-actions .starter-primary-restart {
    flex-basis: 100%;
    margin-top: 8px;
    min-height: 58px;
    justify-content: center;
    font-size: 1.05rem;
  }
  .friend-pass-btn { border-color: rgba(234, 179, 8, .5); background: linear-gradient(135deg, #FFF7D6, #FFE7A3); color: #172033; box-shadow: 0 12px 28px rgba(234, 179, 8, .18); }
  .friend-pass-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(234, 179, 8, .24); }
  .starter-revision-panel { margin-top: 22px; padding: 22px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 14px; background: linear-gradient(135deg, rgba(248,250,252,.96), rgba(239,246,255,.92)); box-shadow: 0 18px 38px rgba(15, 23, 42, .08); }
  .starter-revision-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
  .starter-revision-head h3 { color: var(--blue-dark); font-size: 1.18rem; line-height: 1.25; margin-bottom: 6px; }
  .starter-revision-eyebrow { color: #B7791F; font-size: .74rem; font-weight: 900; letter-spacing: .08em; margin: 0 0 5px; text-transform: uppercase; }
  .starter-revision-pill { flex: 0 0 auto; border: 1px solid rgba(22, 163, 74, .32); background: #EAFBF1; color: #166534; border-radius: 999px; padding: 7px 11px; font-size: .78rem; font-weight: 900; white-space: nowrap; }
  .starter-revision-pill.is-used { border-color: rgba(100, 116, 139, .35); background: #F1F5F9; color: #475569; }
  .revision-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
  .revision-chip-grid button { min-height: 48px; border: 1px solid rgba(37, 99, 235, .2); border-radius: 10px; background: rgba(255,255,255,.9); color: var(--blue-dark); font-weight: 850; line-height: 1.25; padding: 10px 12px; text-align: left; cursor: grab; transition: transform .15s, border-color .15s, box-shadow .15s; }
  .revision-chip-grid button:hover { transform: translateY(-2px); border-color: rgba(37, 99, 235, .45); box-shadow: 0 12px 26px rgba(37, 99, 235, .12); }
  .revision-chip-grid button:active { cursor: grabbing; }
  #starterRevisionPrompt { min-height: 136px; resize: vertical; transition: border-color .15s, box-shadow .15s, background .15s; }
  #starterRevisionPrompt.drag-over { border-color: #2563EB; background: #F8FBFF; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
  .starter-domain-panel .starter-revision-head { margin-bottom: 14px; }
  .starter-domain-panel .starter-revision-head p { max-width: 640px; }
  .starter-domain-add-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
  .starter-domain-add-row .form-group { flex: 1 1 260px; margin-bottom: 0; }
  .starter-domain-add-row .starter-domain-vercel-field { flex-basis: 100%; }
  .starter-domain-vercel-field small { display: block; margin-top: 6px; color: var(--gray-500); font-size: .75rem; line-height: 1.45; }
  .starter-domain-add-row .btn-action { flex: 0 0 auto; }
  .starter-domain-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
  .starter-domain-card { border: 1px solid rgba(15, 23, 42, .1); border-radius: 12px; background: rgba(255,255,255,.85); padding: 16px 18px; }
  .starter-domain-card.status-verified { border-color: rgba(22, 163, 74, .3); background: rgba(234, 251, 241, .5); }
  .starter-domain-card.status-error { border-color: rgba(220, 38, 38, .3); background: rgba(254, 242, 242, .5); }
  .starter-domain-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .starter-domain-name { font-weight: 800; color: var(--blue-dark); font-size: 1.02rem; overflow-wrap: anywhere; }
  .starter-domain-record { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
  .starter-domain-record-field { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 10px; background: var(--white); position: relative; }
  .starter-domain-record-field span { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); }
  .starter-domain-record-field code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; color: var(--gray-800); word-break: break-all; }
  .starter-copy-btn { align-self: flex-start; margin-top: 2px; border: 1px solid rgba(37, 99, 235, .3); background: var(--blue-light); color: var(--blue); border-radius: 6px; padding: 3px 9px; font-size: .74rem; font-weight: 800; cursor: pointer; transition: background .15s, transform .15s; }
  .starter-copy-btn:hover { background: rgba(37, 99, 235, .18); transform: translateY(-1px); }
  .starter-domain-help { margin: 6px 0 10px; font-size: .84rem; color: var(--gray-600); line-height: 1.55; }
  .starter-domain-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .starter-domain-actions .btn { min-height: 36px; padding: 8px 12px; font-size: .82rem; }
  @media (max-width: 720px) {
    .starter-domain-record { grid-template-columns: 1fr; }
  }
  .starter-history-panel { max-width: 920px; margin: 22px auto 0; padding: 26px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96)); box-shadow: 0 20px 44px rgba(15, 23, 42, .08); }
  .starter-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
  .starter-history-head h3 { margin: 0 0 4px; color: var(--blue-dark); font-size: 1.28rem; }
  .starter-history-head .starter-note { margin-top: 4px; max-width: 620px; }
  .starter-history-head .starter-primary-restart { flex-shrink: 0; }
 .terms-card { margin-top: 26px; padding: 20px 24px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; text-align: left; }
 html[data-theme="dark"] .terms-card { background: #0f172a; border-color: #1e293b; }
 .terms-card h4 { font-size: 1.02rem; color: var(--gray-800); margin: 0 0 12px; font-weight: 800; }
 html[data-theme="dark"] .terms-card h4 { color: var(--gray-100); }
 .terms-card ul { margin: 0; padding-left: 20px; }
 .terms-card li { color: var(--gray-600); font-size: 0.9rem; line-height: 1.65; margin-bottom: 8px; }
 html[data-theme="dark"] .terms-card li { color: var(--gray-400); }
 .terms-card strong { color: var(--gray-800); font-weight: 700; }
 html[data-theme="dark"] .terms-card strong { color: var(--gray-200); }
  .starter-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
  .starter-history-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); padding: 20px; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .15s, box-shadow .15s; }
  .starter-history-card:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .32); box-shadow: var(--shadow); }
  .starter-history-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .starter-history-card h4 { margin: 0; color: var(--gray-800); font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
  .starter-history-date { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--gray-500); white-space: nowrap; padding-top: 2px; }
  .starter-status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; white-space: nowrap; align-self: flex-start; }
  .starter-status-pill.status-deployed { background: #EAFBF1; color: #166534; }
  .starter-status-pill.status-paid,
  .starter-status-pill.status-saved { background: #EFF6FF; color: #1D4ED8; }
  .starter-status-pill.status-processing,
  .starter-status-pill.status-generating { background: #FFF7ED; color: #9A3412; }
  .starter-status-pill.status-failed { background: #FEF2F2; color: #B91C1C; }
  .starter-history-revision { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--gray-600); }
  .starter-history-revision .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); flex: 0 0 auto; }
  .starter-history-revision.is-available { color: #166534; }
  .starter-history-revision.is-available .dot { background: #22C55E; }
  .starter-history-revision.is-used .dot { background: var(--gray-400); }
  .starter-history-empty-note { font-size: .84rem; color: var(--gray-500); font-style: italic; margin: 0; }
  .starter-history-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
  .starter-history-actions .btn { min-height: 38px; padding: 9px 12px; font-size: .84rem; flex: 1 1 auto; justify-content: center; }
  .starter-note { margin-top: 12px; font-size: 0.9rem; color: var(--gray-600); line-height: 1.6; }
  .pro-request-wrap { max-width: 640px; margin: 0 auto; }

  /* ── DISABLED BUTTON STATE (was previously invisible: same style as an active button) ── */
  .btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; filter: saturate(.65); box-shadow: none !important; transform: none !important; }
  .btn:disabled:hover, .btn[disabled]:hover { transform: none !important; }

  /* ── ACTION BUTTONS: refined enterprise/SaaS system ──────────────────────
     Three-tier hierarchy so a row of buttons reads at a glance without every
     action shouting equally: Primary (the hero action), Secondary (supporting,
     bordered), Tertiary (quiet, outline-only). A distinct Accent tier is used
     for the one "included feature" CTA (the free revision). Icons are inline
     SVG (Lucide-style stroke icons) rendered as real elements, not emoji,
     so weight, alignment, and color always match the button's text exactly. */
  .btn-action {
    gap: 8px;
    border-radius: 12px !important;
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color 220ms cubic-bezier(.4,0,.2,1), border-color 220ms cubic-bezier(.4,0,.2,1),
      color 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1);
  }
  .btn-action:hover { transform: translateY(-1px); }
  .btn-action:active { transform: translateY(0) scale(.97) !important; transition-duration: 110ms !important; }
  .btn-action:disabled, .btn-action:disabled:hover { transform: none; cursor: not-allowed; }

  .btn-action-icon { width: 17px; height: 17px; flex: 0 0 auto; }
  .btn-action.btn-sm .btn-action-icon { width: 15px; height: 15px; }

  /* Primary: the hero action in the group (Open Live Website) */
  .btn-action-primary,
  .btn-action-live {
    background: linear-gradient(180deg, #1E3A5F 0%, #0F1F33 100%) !important;
    color: #F8FAFC !important;
    border: 1px solid #0B1524 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(15,23,42,.18), 0 8px 18px -8px rgba(15,23,42,.55) !important;
  }
  .btn-action-primary:hover,
  .btn-action-live:hover {
    background: linear-gradient(180deg, #26466E 0%, #142943 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(15,23,42,.2), 0 12px 22px -8px rgba(15,23,42,.6) !important;
  }

  /* Secondary: supporting action (View Code, Start Another Website) */
  .btn-action-secondary,
  .btn-action-code,
  .btn-action-restart {
    background: var(--white) !important;
    color: var(--gray-800) !important;
    border: 1.5px solid var(--gray-200) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
  }
  .btn-action-secondary:hover,
  .btn-action-code:hover,
  .btn-action-restart:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-300) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
  }
  .starter-primary-restart {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFE8C7 100%) !important;
    color: #7C2D12 !important;
    border-color: rgba(192,86,33,.34) !important;
    box-shadow: 0 10px 24px rgba(192,86,33,.14), 0 1px 2px rgba(15,23,42,.06) !important;
  }
  .starter-primary-restart:hover {
    background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%) !important;
    color: #431407 !important;
    border-color: rgba(154,52,18,.46) !important;
    box-shadow: 0 14px 32px rgba(192,86,33,.22), 0 1px 2px rgba(15,23,42,.08) !important;
  }

  /* Tertiary: quiet, least emphasis (Download ZIP) */
  .btn-action-tertiary,
  .btn-action-zip {
    background: transparent !important;
    color: var(--gray-600) !important;
    border: 1.5px solid var(--gray-200) !important;
    box-shadow: none !important;
  }
  .btn-action-tertiary:hover,
  .btn-action-zip:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-300) !important;
    color: var(--gray-800) !important;
  }

  /* Accent: the one included/premium feature CTA (Apply Included Revision) */
  .btn-action-accent,
  .btn-action-revision {
    background: linear-gradient(180deg, #4C3A9E 0%, #2E2166 100%) !important;
    color: #F5F3FF !important;
    border: 1px solid #241A52 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(46,33,102,.2), 0 8px 18px -8px rgba(76,58,158,.55) !important;
  }
  .btn-action-accent:hover:not(:disabled),
  .btn-action-revision:hover:not(:disabled) {
    background: linear-gradient(180deg, #5B47B8 0%, #372980 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 1px 2px rgba(46,33,102,.22), 0 12px 22px -8px rgba(76,58,158,.6) !important;
  }
  .btn-action-revision:disabled {
    background: var(--gray-200) !important;
    color: var(--gray-500) !important;
    border-color: var(--gray-200) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .btn-action-secondary,
  html[data-theme="dark"] .btn-action-code,
  html[data-theme="dark"] .btn-action-restart {
    background: #111827 !important; border-color: #334155 !important; color: #E2E8F0 !important;
  }
  html[data-theme="dark"] .btn-action-secondary:hover,
  html[data-theme="dark"] .btn-action-code:hover,
  html[data-theme="dark"] .btn-action-restart:hover { background: #1E293B !important; border-color: #475569 !important; }
  html[data-theme="dark"] .starter-primary-restart {
    background: linear-gradient(135deg, #3D240F 0%, #5F3514 100%) !important;
    border-color: rgba(251,146,60,.45) !important;
    color: #FED7AA !important;
  }
  html[data-theme="dark"] .starter-primary-restart:hover {
    background: linear-gradient(135deg, #7C2D12 0%, #9A3412 100%) !important;
    color: #FFF7ED !important;
  }

  html[data-theme="dark"] .btn-action-tertiary,
  html[data-theme="dark"] .btn-action-zip { color: #CBD5E1 !important; border-color: #334155 !important; }
  html[data-theme="dark"] .btn-action-tertiary:hover,
  html[data-theme="dark"] .btn-action-zip:hover { background: #111827 !important; border-color: #475569 !important; color: #F1F5F9 !important; }

  html[data-theme="dark"] .btn-action-revision:disabled { background: #334155 !important; color: #94A3B8 !important; border-color: #334155 !important; }

  /* ── WEBSITE EXAMPLE SHOWCASE (before the Starter builder) ── */
  /* No card/border wrapper by design: each example is just a circular
     headshot + a pill button, seamlessly sitting on the page background. */
  .example-tiers { display: flex; flex-direction: column; gap: 48px; margin-top: 8px; }
  .example-tier-header { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--gray-200); }
  .example-tier-price { font-size: 1.6rem; font-weight: 900; color: var(--blue-dark); white-space: nowrap; }
  .example-tier-price span { display: block; margin-top: 2px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--orange); }
  .example-tier-price span em { display: inline; font-style: normal; margin-left: 6px; color: var(--gray-400); }
  .example-tier-header p { margin: 0; color: var(--gray-600); font-size: .98rem; line-height: 1.7; max-width: 860px; }

  .example-people-row { display: flex; flex-wrap: wrap; gap: 72px; padding-top: 12px; }
  .example-person { position: relative; display: flex; flex-direction: column; align-items: center; width: 256px; padding-bottom: 38px; text-decoration: none; }
  .example-avatar { width: 208px; height: 208px; border-radius: 50%; background: linear-gradient(160deg, var(--gray-100), var(--gray-200)); border: 5px solid var(--white); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .22s var(--spring), box-shadow .22s ease; }
  .example-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .example-avatar-fallback { font-size: 4.2rem; }
  .example-view-btn { position: absolute; top: 166px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 1rem; font-weight: 800; color: var(--blue); text-align: center; padding: 14px 26px; border-radius: var(--radius-pill); border: 1px solid var(--gray-200); background: var(--white); box-shadow: var(--shadow); transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--spring); }
  .example-person:hover .example-avatar, .example-person:focus-visible .example-avatar { transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 0 4px var(--blue-light); }
  .example-person:hover .example-view-btn, .example-person:focus-visible .example-view-btn { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateX(-50%) translateY(-2px); }
  .example-person:focus-visible { outline: none; }
  .example-person:focus-visible .example-avatar { box-shadow: var(--focus-ring); }

  .example-preview-popover { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); width: 380px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 6; }
  .example-preview-popover::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--white); }
  .example-preview-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--gray-50), var(--gray-50) 10px, var(--gray-100) 10px, var(--gray-100) 20px); font-size: 2.6rem; overflow: hidden; }
  .example-preview-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
  .example-person:hover .example-preview-popover, .example-person:focus-visible .example-preview-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }

  .web-showcase-image-slot { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px dashed var(--gray-300); background: repeating-linear-gradient(135deg, var(--gray-50), var(--gray-50) 10px, var(--gray-100) 10px, var(--gray-100) 20px); color: var(--gray-400); text-align: center; padding: 16px; }
  .web-showcase-image-slot .icon { font-size: 1.9rem; }
  .web-showcase-image-slot .label { font-size: .8rem; font-weight: 700; }

  /* TESTIMONIALS (full-width heading, then a full-width card grid below.
     this used to reuse a 2-column bridge-grid layout meant for text+image
     pairs, which put the heading in column 1 and the whole 3-card row
     squeezed into column 2, making the cards tall/narrow and vertically
     off-center with the heading) ── */
  .testimonials-bridge { display: flex; flex-direction: column; }
  .testimonials-bridge .section-header { margin-bottom: 8px; }
  .testimonials-bridge .grid-3 { margin-top: 36px; }

  /* ── REPORT A CONCERN (relocated, lower priority placement) ── */
  .starter-report-wrap { max-width: 720px; margin: 0 auto; }

  @media (max-width: 768px) {
    .builder-form-grid, .starter-preference-grid { grid-template-columns: 1fr; }
    .support-request-grid { grid-template-columns: 1fr; }
    .student-discount-form { grid-template-columns: 1fr; }
    .starter-revision-head { flex-direction: column; }
    .starter-history-head { flex-direction: column; }
    .revision-chip-grid { grid-template-columns: 1fr; }
    .web-pricing-grid { grid-template-columns: 1fr; }
  }

  /* ACCESSIBILITY */
  .skip-link { position: absolute; top: -60px; left: 16px; background: var(--blue); color: var(--white); padding: 12px 24px; border-radius: 0 0 10px 10px; font-weight: 700; font-size: 1rem; z-index: 9999; transition: top 0.15s; text-decoration: none; }
  .skip-link:focus { top: 0; outline: none; }
  :focus-visible { outline: 3px solid rgba(37,99,235,0.75); outline-offset: 3px; border-radius: 4px; }
  .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; }
  .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .faq-q:focus-visible, .cat-card:focus-visible, .logo:focus-visible, .nav-links button:focus-visible, .hamburger:focus-visible, .search-bar button:focus-visible { outline: none; }
  .q-chip, .color-swatch, .web-tier { min-height: 44px; }
  .cat-card, .web-tier { outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }

  /* DARK MODE AND POLISH */
  html[data-theme="dark"] body { background: var(--white); }
  html[data-theme="dark"] .hero-logo,
  html[data-theme="dark"] .logo-icon,
  html[data-theme="dark"] .footer-logo,
  html[data-theme="dark"] .about-visual img { filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45)); }
  html[data-theme="dark"] .trust-bar,
  html[data-theme="dark"] .websites-hero,
  html[data-theme="dark"] .btn-primary,
  html[data-theme="dark"] .btn-orange,
  html[data-theme="dark"] .btn-green,
  html[data-theme="dark"] .nav-cta { color: #fff !important; }
  html[data-theme="dark"] footer { background: #080D16; color: #A7B5C8; }
  html[data-theme="dark"] .footer-brand h3,
  html[data-theme="dark"] .footer-col h4 { color: #F8FAFC; }
  html[data-theme="dark"] .footer-col a { color: #C3D0E2; }
  html[data-theme="dark"] .modal-overlay { background: rgba(1,6,15,0.82); }
  html[data-theme="dark"] .lock-overlay { background: rgba(0,0,0,0.66); color: #fff; }
  html[data-theme="dark"] .topic-tag,
  html[data-theme="dark"] .duration { color: #fff; }
  html[data-theme="dark"] .diff-beginner,
  html[data-theme="dark"] .tier-free { background: #123A29; color: #B7F7D0; }
  html[data-theme="dark"] .diff-easy,
  html[data-theme="dark"] .tier-tier2 { background: #3D300D; color: #FDE68A; }
  html[data-theme="dark"] .diff-step,
  html[data-theme="dark"] .tier-tier1 { background: #102D52; color: #BFDBFE; }
  html[data-theme="dark"] .scam-alert { background: #35131A; border-color: #7F1D1D; }
  html[data-theme="dark"] .scam-alert h3,
  html[data-theme="dark"] .scam-alert p { color: #FCA5A5; }
  html[data-theme="dark"] .q-limit-notice { background: #35131A; border-color: #7F1D1D; color: #FCA5A5; }
  html[data-theme="dark"] .studio-model { background: rgba(255,255,255,0.08); }
  html[data-theme="dark"] .web-tier.popular { border-color: #FFB267; }
  html[data-theme="dark"] .search-bar,
  html[data-theme="dark"] .tts-bar { background: #0B1220; }
  html[data-theme="dark"] .page-hero { background: var(--page-hero-bg); }
  html[data-theme="dark"] .question-box,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .chat-container,
  html[data-theme="dark"] .price-card,
  html[data-theme="dark"] .starter-portal-panel,
  html[data-theme="dark"] .web-tier,
  html[data-theme="dark"] .studio-card { background: #111827; }
  html[data-theme="dark"] .starter-status-box {
    background: linear-gradient(135deg, rgba(20,83,45,.35), rgba(15,23,42,.7));
    border-color: rgba(74,222,128,.28); color: #BBF7D0;
  }
  html[data-theme="dark"] .starter-status-box::before { background-color: #4ADE80; }
  html[data-theme="dark"] .starter-verification-panel { background: linear-gradient(135deg,rgba(30,58,138,.28),rgba(15,23,42,.92)); border-color: rgba(96,165,250,.28); }
  html[data-theme="dark"] .starter-verification-copy strong { color: #F8FAFC; }
  html[data-theme="dark"] .starter-verification-copy p { color: #CBD5E1; }
  html[data-theme="dark"] .starter-verification-panel.is-error { background: linear-gradient(135deg,rgba(127,29,29,.28),rgba(15,23,42,.92)); border-color: rgba(248,113,113,.3); }
  html[data-theme="dark"] .starter-upload-card {
    background: linear-gradient(160deg, rgba(15,23,42,.75), rgba(30,41,59,.55));
    border-color: rgba(96,165,250,.22);
  }
  html[data-theme="dark"] .starter-upload-card.starter-design-card { border-color: rgba(251,146,60,.22); }
  html[data-theme="dark"] .starter-upload-card-icon { background: linear-gradient(135deg, rgba(30,64,175,.55), rgba(109,40,217,.42)); color: #DBEAFE; }
  html[data-theme="dark"] .starter-upload-card-icon--alt { background: linear-gradient(135deg, rgba(154,52,18,.5), rgba(120,53,15,.4)); color: #FED7AA; }
  html[data-theme="dark"] .starter-upload-card > .form-group + .form-group,
  html[data-theme="dark"] .starter-upload-card > .form-group + .starter-color-grid { border-top-color: #334155; }
  html[data-theme="dark"] .starter-file-selection { background: rgba(30,58,138,.18); border-color: rgba(96,165,250,.24); }
  html[data-theme="dark"] .starter-file-selection-head,html[data-theme="dark"] .starter-file-list li + li { border-color: rgba(96,165,250,.16); }
  html[data-theme="dark"] .starter-file-selection-head > span,html[data-theme="dark"] .starter-file-details strong { color: #DBEAFE; }
  html[data-theme="dark"] .starter-file-selection-head > small,html[data-theme="dark"] .starter-file-details small { color: #94A3B8; }
  html[data-theme="dark"] .starter-image-preview-card { background: rgba(15,23,42,.8); border-color: #334155; }
  html[data-theme="dark"] .starter-image-preview-card label { color: #DBEAFE; }
  html[data-theme="dark"] .starter-image-preview-card textarea { background: #0F172A; border-color: #475569; color: #F8FAFC; }
  @media (max-width: 560px) {
    .starter-file-selection-head { align-items: flex-start; flex-wrap: wrap; }
    .starter-file-selection-head > small { width: 100%; order: 3; }
    .starter-file-remove { font-size: .72rem; }
  }
  html[data-theme="dark"] .required-tag { background: rgba(248,113,113,.14); color: #FCA5A5; }
  html[data-theme="dark"] .starter-progress-card { background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92)); border-color: #334155; }
  html[data-theme="dark"] .starter-progress-head { color: #F8FAFC; }
  html[data-theme="dark"] .starter-progress-head span { color: #93C5FD; }
  html[data-theme="dark"] .starter-progress-track { background: #1E3A8A; }
  html[data-theme="dark"] .starter-progress-card p,
  html[data-theme="dark"] .starter-progress-card ul { color: #CBD5E1; }
  html[data-theme="dark"] .starter-progress-card.is-stopped { background: linear-gradient(135deg,rgba(120,53,15,.32),rgba(15,23,42,.94)); border-color: rgba(251,146,60,.35); }
  html[data-theme="dark"] .starter-progress-recovery { color: #FED7AA !important; }
  html[data-theme="dark"] .starter-progress-stage,
  html[data-theme="dark"] .starter-progress-sync { color: #94A3B8 !important; }
  html[data-theme="dark"] .starter-progress-stage code { background: rgba(96,165,250,.14); color: #93C5FD; }
  html[data-theme="dark"] .student-discount-box { background: #0F172A; border-color: #334155; }
  html[data-theme="dark"] .student-discount-title strong { color: #F8FAFC; }
  html[data-theme="dark"] .student-discount-title span { color: #94A3B8; }
  html[data-theme="dark"] .student-discount-price { background: #1E3152; border-color: rgba(147,197,253,0.35); color: #BFDBFE; }
  html[data-theme="dark"] .student-discount-body { border-color: #334155; }
  html[data-theme="dark"] .starter-privacy-box { background: #0F172A; border-color: #334155; }
  html[data-theme="dark"] .starter-assets-box { background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(251,146,60,.12)); border-color: #334155; }
  html[data-theme="dark"] .starter-assets-box h3 { color: #E2E8F0; }
  html[data-theme="dark"] .starter-assets-box input[type="file"] { background: #111827; }
  html[data-theme="dark"] .starter-creative-controls { background: rgba(15,23,42,.72); border-color: #334155; }
  html[data-theme="dark"] .starter-creative-controls legend { color: #E2E8F0; }
  html[data-theme="dark"] .starter-privacy-grid label { color: #E2E8F0; }
  html[data-theme="dark"] .friend-pass-btn { background: linear-gradient(135deg, #F3C766, #B7791F); color: #111827; }
  html[data-theme="dark"] .starter-revision-panel { background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.88)); border-color: #334155; }
  html[data-theme="dark"] .starter-revision-head h3 { color: #F8FAFC; }
  html[data-theme="dark"] .starter-revision-eyebrow { color: #F3C766; }
  html[data-theme="dark"] .starter-revision-pill { background: rgba(22, 101, 52, .34); border-color: rgba(74, 222, 128, .28); color: #BBF7D0; }
  html[data-theme="dark"] .starter-revision-pill.is-used { background: #1E293B; border-color: #475569; color: #CBD5E1; }
  html[data-theme="dark"] .revision-chip-grid button { background: #0F172A; border-color: #334155; color: #DBEAFE; }
  html[data-theme="dark"] #starterRevisionPrompt.drag-over { background: #0B1220; border-color: #60A5FA; box-shadow: 0 0 0 4px rgba(96, 165, 250, .16); }
  html[data-theme="dark"] .starter-domain-card { background: rgba(15,23,42,.6); border-color: #334155; }
  html[data-theme="dark"] .starter-domain-card.status-verified { background: rgba(22,101,52,.2); border-color: rgba(74,222,128,.3); }
  html[data-theme="dark"] .starter-domain-card.status-error { background: rgba(153,27,27,.2); border-color: rgba(248,113,113,.3); }
  html[data-theme="dark"] .starter-domain-name { color: #F8FAFC; }
  html[data-theme="dark"] .starter-domain-record-field { background: #0F172A; border-color: #334155; }
  html[data-theme="dark"] .starter-domain-record-field code { color: #E2E8F0; }
  html[data-theme="dark"] .starter-copy-btn { background: rgba(37,99,235,.18); border-color: rgba(96,165,250,.35); color: #93C5FD; }
  html[data-theme="dark"] .starter-copy-btn:hover { background: rgba(37,99,235,.3); }
  html[data-theme="dark"] .starter-domain-help { color: #94A3B8; }
  html[data-theme="dark"] .starter-history-panel { background: linear-gradient(135deg, rgba(17,24,39,.96), rgba(15,23,42,.92)); border-color: #334155; }
  html[data-theme="dark"] .starter-history-head h3,
  html[data-theme="dark"] .starter-history-card h4 { color: #F8FAFC; }
  html[data-theme="dark"] .starter-history-card { background: #0F172A; border-color: #334155; }
  html[data-theme="dark"] .starter-history-card p { color: #CBD5E1; }
  html[data-theme="dark"] .starter-history-date { color: #94A3B8; }
  html[data-theme="dark"] .starter-history-revision { color: #94A3B8; }
  html[data-theme="dark"] .starter-history-empty-note { color: #94A3B8; }
  html[data-theme="dark"] .starter-status-pill.status-deployed { background: rgba(22,101,52,.34); color: #BBF7D0; }
  html[data-theme="dark"] .starter-status-pill.status-paid,
  html[data-theme="dark"] .starter-status-pill.status-saved { background: rgba(30,64,175,.34); color: #BFDBFE; }
  html[data-theme="dark"] .starter-status-pill.status-processing,
  html[data-theme="dark"] .starter-status-pill.status-generating { background: rgba(154,52,18,.34); color: #FED7AA; }
  html[data-theme="dark"] .starter-status-pill.status-failed { background: rgba(153,27,27,.34); color: #FCA5A5; }
  html[data-theme="dark"] .web-showcase-image-slot { background: repeating-linear-gradient(135deg, #0F172A, #0F172A 10px, #111827 10px, #111827 20px); border-color: #334155; color: #94A3B8; }
  html[data-theme="dark"] .example-tier-header { border-color: #334155; }
  html[data-theme="dark"] .example-tier-price { color: #F8FAFC; }
  html[data-theme="dark"] .example-tier-header p { color: #CBD5E1; }
  html[data-theme="dark"] .example-avatar { background: linear-gradient(160deg, #1E293B, #0F172A); border-color: #0B1220; }
  html[data-theme="dark"] .example-view-btn { background: #111827; border-color: #334155; color: #93C5FD; }
  html[data-theme="dark"] .example-preview-popover { background: #111827; border-color: #334155; }
  html[data-theme="dark"] .example-preview-popover::after { border-top-color: #111827; }
  html[data-theme="dark"] .starter-report-panel { background: linear-gradient(135deg, rgba(69,10,10,0.82), rgba(67,20,7,0.78)); border-color: rgba(248,113,113,0.45); }
  html[data-theme="dark"] .starter-report-panel h3 { color: #FCA5A5 !important; }
  html[data-theme="dark"] .refund-panel { background: linear-gradient(135deg, rgba(15,23,42,.88), rgba(30,41,59,.8)); border-color: rgba(96,165,250,.42); }
  html[data-theme="dark"] .refund-panel h3 { color: #BFDBFE !important; }
  html[data-theme="dark"] .q-input,
  html[data-theme="dark"] .chat-input,
  html[data-theme="dark"] .form-group input,
  html[data-theme="dark"] .form-group textarea,
  html[data-theme="dark"] .form-group select { background: #0F172A; border-color: #334155; color: #F8FAFC; }
  html[data-theme="dark"] .q-input::placeholder,
  html[data-theme="dark"] .chat-input::placeholder,
  html[data-theme="dark"] .form-group input::placeholder,
  html[data-theme="dark"] .form-group textarea::placeholder { color: #94A3B8; opacity: 1; }
  html[data-theme="dark"] .consulting-list li,
  html[data-theme="dark"] .steps li { border-color: #334155; }
  html[data-theme="dark"] .play-btn { color: #102541; }
  html[data-theme="dark"] .btn-secondary { background: #1E2A3A; color: #93C5FD; border-color: rgba(147,197,253,0.25); }
  html[data-theme="dark"] .btn-secondary:hover { background: #1E3152; color: #BFDBFE; border-color: rgba(147,197,253,0.50); }
  html[data-theme="dark"] .btn-ghost { background: transparent; color: #94A3B8; border-color: #334155; }
  html[data-theme="dark"] .btn-ghost:hover { background: #1E293B; color: #CBD5E1; border-color: #475569; }
  html[data-theme="dark"] .services-panel { background: #111827; border-color: #1E293B; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3); }
  html[data-theme="dark"] .services-panel button { color: #CBD5E1; }
  html[data-theme="dark"] .services-panel button:hover { background: #1E3152; color: #93C5FD; }
  .card, .cat-card, .video-card, .question-box, .chat-container, .modal, .price-card, .web-tier, .studio-card, .glossary-item, .faq-item, .article-card { border-color: var(--section-line); }
  .card:hover, .cat-card:hover, .video-card:hover, .article-card:hover, .web-tier:hover { box-shadow: var(--shadow-lg); }
  .faq-q, .q-input, .chat-input, .form-group input, .form-group textarea, .form-group select { color: var(--gray-800); }
  /* Accessible text sizes */
  .price-card p, .web-tier-desc, .svc-card p, .process-step p, .consulting-list li, .steps li { font-size: 1.05rem; line-height: 1.8; }
  .faq-a { font-size: 1.05rem; line-height: 1.8; }
  .msg-bubble { font-size: 1rem; }
  .glossary-item p { font-size: 1rem; line-height: 1.75; }
  .badge { border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); }
  .trust-bar span { display: inline-block; }

  /* AUTH MODAL */
  .auth-tabs { display: flex; gap: 0; margin-bottom: 24px; border: 2px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
  .auth-tab { flex: 1; padding: 11px; text-align: center; font-weight: 700; cursor: pointer; background: var(--white); color: var(--gray-600); border: none; font-family: inherit; font-size: 0.95rem; transition: background 0.15s, color 0.15s; }
  .auth-tab:hover { background: var(--gray-100); }
  .auth-tab.active { background: var(--blue); color: var(--white); }
  .auth-tab:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

  /* B2B ADMIN PANEL */
  .b2b-hero { background: linear-gradient(135deg, #1E293B 0%, #0F2744 100%); color: #FFFFFF; padding: 80px 24px 60px; position: relative; overflow: hidden; }
  .b2b-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(37,99,235,0.32), transparent 46%); pointer-events: none; }
  .b2b-hero > * { position: relative; }
  .b2b-hero .badge { background: rgba(37,99,235,0.28); color: #93C5FD; border: 1px solid rgba(37,99,235,0.40); }
  .b2b-hero h2 { color: #FFFFFF !important; font-size: clamp(1.8rem, 4vw, 2.8rem); }
  .b2b-hero p { color: rgba(255,255,255,0.78) !important; }
  .admin-tabs-wrap { border-bottom: 2px solid var(--gray-200); margin-bottom: 40px; overflow-x: auto; }
  .admin-tabs { display: flex; gap: 2px; padding-bottom: 0; list-style: none; }
  .admin-tab { padding: 13px 24px; font-size: 0.95rem; font-weight: 700; color: var(--gray-600); border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: inherit; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
  .admin-tab:hover { color: var(--blue); }
  .admin-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
  .admin-panel { display: none; }
  .admin-panel.active { display: block; }
  .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-bottom: 44px; }
  .admin-stat { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 24px 22px; box-shadow: var(--shadow-sm); }
  .admin-stat-value { font-size: 2.2rem; font-weight: 900; color: var(--blue-dark); line-height: 1; margin-bottom: 6px; }
  .admin-stat-label { font-size: 0.82rem; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .admin-section-title { font-size: 1.25rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 6px; }
  .admin-section-desc { font-size: 0.95rem; color: var(--gray-600); margin-bottom: 28px; line-height: 1.65; }
  .admin-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
  .admin-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
  .admin-card p { font-size: 0.95rem; color: var(--gray-600); margin-bottom: 16px; line-height: 1.65; }
  .coming-soon-tag { display: inline-block; background: var(--orange-light); color: var(--orange); font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; }
  .api-key-row { display: flex; align-items: center; gap: 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 16px; font-family: 'Courier New', monospace; font-size: 0.88rem; color: var(--gray-700); overflow: hidden; }
  .api-key-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .api-key-row button { flex-shrink: 0; background: var(--blue); color: white; border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; }
  .api-key-row button:hover { background: var(--blue-dark); }
  .llm-test-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .llm-output-box { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; padding: 16px; min-height: 130px; font-size: 0.9rem; color: var(--gray-700); line-height: 1.65; }
  .agent-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
  .resource-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
  .resource-card:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(37,99,235,0.10); }
  .resource-card-icon { font-size: 1.8rem; flex-shrink: 0; margin-top: 2px; }
  .resource-card h4 { font-size: 0.98rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 4px; }
  .resource-card p { font-size: 0.88rem; color: var(--gray-600); margin: 0; line-height: 1.55; }
  .tier3-badge { display: inline-block; background: linear-gradient(135deg, #1D4ED8, #7C3AED); color: white; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; margin-left: 6px; }
  @media (max-width: 768px) { .llm-test-wrap, .agent-config-grid { grid-template-columns: 1fr; } .admin-tabs { flex-wrap: nowrap; } }
  html[data-theme="dark"] .admin-card, html[data-theme="dark"] .admin-stat, html[data-theme="dark"] .resource-card { background: #111827; }
  html[data-theme="dark"] .api-key-row, html[data-theme="dark"] .llm-output-box { background: #0F172A; border-color: #334155; color: #F8FAFC; }

  /* FOOTER REFINEMENTS */
  footer { background: var(--gray-800); color: var(--gray-400); padding: 56px 24px 32px; }
  .footer-col a:focus-visible { outline: none; color: var(--white); border-radius: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

  /* ABOUT PAGE: COMING SOON FEATURE CARDS */
  .cs-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 28px; }
  .cs-feature-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px 32px; border: 2px solid var(--gray-200); transition: transform 0.25s var(--spring), box-shadow 0.25s ease; }
  .cs-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .cs-feature-highlight { border-color: var(--blue); background: linear-gradient(160deg, var(--white) 60%, var(--blue-light)); }
  .cs-feature-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
  .cs-feature-icon { font-size: 3rem; flex-shrink: 0; margin-top: 2px; }
  .cs-feature-header h3 { font-size: 1.25rem; font-weight: 800; color: var(--blue-dark); line-height: 1.3; }
  .cs-feature-list { list-style: none; margin: 16px 0; }
  .cs-feature-list li { padding: 9px 0; font-size: 1.05rem; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
  .cs-feature-list li:last-child { border-bottom: none; }
  html[data-theme="dark"] .cs-feature-card { background: #111827; }
  html[data-theme="dark"] .cs-feature-highlight { background: linear-gradient(160deg, #111827 60%, #1B2C4A); }

  /* NEWSLETTER SIGNUP BLOCK */
  .newsletter-block { max-width: 720px; margin: 0 auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(37,99,235,0.10), 0 2px 8px rgba(0,0,0,0.06); padding: 52px 48px; border: 2px solid color-mix(in srgb, var(--blue) 14%, var(--gray-200)); }
  .newsletter-placeholder-form { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .newsletter-email-input { flex: 1; min-width: 260px; padding: 16px 22px; border: 2px solid var(--gray-200); border-radius: var(--radius-pill); font-size: 1.1rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; color: var(--gray-800); background: var(--white); }
  .newsletter-email-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.14); }
  html[data-theme="dark"] .newsletter-block { background: #111827; border-color: #1E3152; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
  html[data-theme="dark"] .newsletter-email-input { background: #0F172A; border-color: #334155; color: #F8FAFC; }
  @media (max-width: 480px) { .newsletter-placeholder-form { flex-direction: column; } .newsletter-email-input { min-width: 0; } }

  /* COMING SOON WEB TIER (Premium) */
  .web-tier-disabled { pointer-events: none !important; cursor: default !important; opacity: 0.6; }

  /* VIDEOS COMING SOON */
  .videos-coming-soon { text-align: center; padding: 56px 32px; background: var(--gray-50); border-radius: var(--radius-lg); border: 1.5px dashed var(--gray-300); max-width: 560px; margin: 0 auto; }
  .vcs-icon { font-size: 3rem; margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; }
.vcs-icon .icon { width: 1em; height: 1em; color: var(--blue); }
  .videos-coming-soon h3 { font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 10px; }
  .videos-coming-soon > p { font-size: 1.05rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 24px; }
  .vcs-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
  .vcs-pill { font-size: 0.82rem; font-weight: 700; padding: 6px 14px; border-radius: 99px; letter-spacing: 0.02em; }
  .vcs-free { background: #DCFCE7; color: #15803D; }
  .vcs-paid { background: var(--blue-light); color: var(--blue); }
  html[data-theme="dark"] .videos-coming-soon { background: #0F172A; border-color: #1E293B; }
  html[data-theme="dark"] .vcs-free { background: #14532D; color: #86EFAC; }
  html[data-theme="dark"] .vcs-paid { background: #1E3152; color: #93C5FD; }

  /* PRINT */
  @media print {
    nav, footer, .hero-btns, .answer-actions, .tts-bar { display: none; }
    .answer-box { border: 2px solid #333; background: #fff; }
  }

  /* ============================================================
     ANIMATIONS & SCROLL EFFECTS
     ============================================================ */

  /* Scroll progress bar */
  .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--orange)); width: 0%; z-index: 10000; pointer-events: none; transition: width 0.08s linear; }

  /* Reveal on scroll */
  .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .reveal.reveal-left { transform: translateX(-44px); }
  .reveal.reveal-right { transform: translateX(44px); }
  .reveal.reveal-scale { transform: scale(0.90); }
  .reveal.visible { opacity: 1 !important; transform: none !important; }

  /* Staggered grid reveal */
  .reveal-grid > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
  .reveal-grid.visible > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-grid.visible > *:nth-child(2) { transition-delay: 90ms; }
  .reveal-grid.visible > *:nth-child(3) { transition-delay: 180ms; }
  .reveal-grid.visible > *:nth-child(4) { transition-delay: 270ms; }
  .reveal-grid.visible > *:nth-child(5) { transition-delay: 360ms; }
  .reveal-grid.visible > *:nth-child(6) { transition-delay: 450ms; }
  .reveal-grid.visible > * { opacity: 1; transform: none; }

  /* Hero entrance animations */
  @keyframes heroFadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
  .hero-logo { animation: heroFadeUp 0.75s 0.05s both; }
  .hero .badge { animation: heroFadeUp 0.75s 0.18s both; }
  .hero h1 { animation: heroFadeUp 0.75s 0.32s both; }
  .hero > p { animation: heroFadeUp 0.75s 0.48s both; }
  .hero-btns { animation: heroFadeUp 0.75s 0.62s both; }

  /* Floating blobs in hero */
  .hero-blob { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; will-change: transform; }
  .hero-blob-1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(37,99,235,0.28), transparent 72%); top: -100px; left: -80px; animation: blobFloat1 9s ease-in-out infinite; }
  .hero-blob-2 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(251,146,60,0.22), transparent 72%); top: -60px; right: -80px; animation: blobFloat2 11s ease-in-out infinite; }
  .hero-blob-3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(20,184,166,0.18), transparent 72%); bottom: -80px; left: 42%; animation: blobFloat3 8s ease-in-out infinite; }
  @keyframes blobFloat1 { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(32px,24px) scale(1.06); } 66% { transform:translate(-18px,38px) scale(0.94); } }
  @keyframes blobFloat2 { 0%,100% { transform:translate(0,0) scale(1); } 40% { transform:translate(-28px,32px) scale(1.09); } 72% { transform:translate(16px,-22px) scale(0.93); } }
  @keyframes blobFloat3 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(22px,-28px) scale(1.07); } }

  /* Rotating text in hero: inline fade, no clipping */
  .hero-rotating-wrap { display: inline; }
  .hero-rotating-item { display: none; color: var(--orange); font-style: italic; }
  .hero-rotating-item.active { display: inline; animation: rotWordIn 0.6s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes rotWordIn { from { opacity: 0; filter: blur(6px); letter-spacing: -0.05em; } to { opacity: 1; filter: blur(0); letter-spacing: inherit; } }

  /* Animated trust bar marquee */
  .trust-bar { overflow: hidden; padding: 0; }
  .trust-bar-inner { display: flex; width: max-content; animation: marqueeScroll 22s linear infinite; }
  .trust-bar-inner:hover { animation-play-state: paused; }
  .trust-bar-set { display: flex; align-items: center; padding: 16px 0; }
  .trust-bar-set span { margin: 0 24px; font-size: 0.95rem; font-weight: 700; opacity: 0.95; white-space: nowrap; }
  @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Stats counter section */
  .stats-section { background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8F 60%, #312E81 100%); color: white; padding: 64px 24px; overflow: hidden; position: relative; }
  html[data-theme="dark"] .stats-section { background: linear-gradient(135deg, #060C18 0%, #0F2040 100%); }
  .stats-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12), transparent 50%), radial-gradient(circle at 10% 80%, rgba(99,102,241,0.22), transparent 45%); pointer-events: none; }
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
  .stat-item { }
  .stat-number { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; line-height: 1; margin-bottom: 8px; background: linear-gradient(135deg, #fff 0%, #93C5FD 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .stat-suffix { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; background: linear-gradient(135deg, #fff 0%, #93C5FD 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .stat-label { font-size: 0.92rem; color: rgba(255,255,255,0.68); font-weight: 600; letter-spacing: 0.4px; margin-top: 4px; }

  /* Testimonials carousel */
  .testimonials-carousel { position: relative; overflow: hidden; max-width: 860px; margin: 0 auto; }
  .testimonials-track { display: flex; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
  .testimonial-slide { min-width: 100%; padding: 0 2px; }
  .testimonial-card { background: var(--white); border-radius: 16px; padding: 40px 44px; box-shadow: var(--shadow); border: 1px solid var(--gray-200); text-align: center; }
  html[data-theme="dark"] .testimonial-card { background: #111827; }
  .testimonial-quote-mark { font-size: 3.5rem; color: var(--blue); line-height: 1; margin-bottom: 6px; opacity: 0.35; font-family: Georgia, serif; }
  .testimonial-stars { font-size: 1.1rem; margin-bottom: 14px; color: #F59E0B; letter-spacing: 2px; }
  .testimonial-text { font-size: 1.08rem; color: var(--gray-700); line-height: 1.78; margin-bottom: 22px; font-style: italic; }
  html[data-theme="dark"] .testimonial-text { color: var(--gray-400); }
  .testimonial-author { font-weight: 800; color: var(--blue-dark); font-size: 0.98rem; }
  .testimonial-role { font-size: 0.85rem; color: var(--gray-600); margin-top: 3px; }
  .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
  .carousel-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--gray-300); border: none; cursor: pointer; transition: background 0.3s, width 0.3s; padding: 0; }
  .carousel-dot.active { background: var(--blue); width: 24px; }
  .carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
  .carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gray-200); background: var(--white); color: var(--gray-600); font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s; box-shadow: var(--shadow-sm); }
  .carousel-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); transform: scale(1.1); }
  html[data-theme="dark"] .carousel-btn { background: #111827; }

  /* Card shimmer/glow on hover */
  .card, .cat-card { position: relative; overflow: hidden; }
  .card::after, .cat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,0.06) 50%, transparent 62%); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .card:hover::after, .cat-card:hover::after { opacity: 1; animation: cardShimmer 0.7s ease-out; }
  @keyframes cardShimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  .card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(37,99,235,0.10), 0 6px 16px rgba(0,0,0,0.07); }

  /* Cat card icon bounce */
  .cat-card .icon { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; }
  .cat-card:hover .icon { transform: scale(1.28) rotate(-6deg); }
  .cat-card:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: 0 14px 32px rgba(37,99,235,0.15); }

  /* Button ripple */
  .btn-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.38); transform: scale(0); animation: rippleOut 0.6s ease-out forwards; pointer-events: none; }
  @keyframes rippleOut { to { transform: scale(5); opacity: 0; } }

  /* Pulsing CTA button */
  @keyframes ctaPulse { 0%,100% { box-shadow: var(--btn-shadow-orange), 0 0 0 0 rgba(232,93,4,0.42); } 60% { box-shadow: var(--btn-shadow-orange), 0 0 0 14px rgba(232,93,4,0); } }
  .btn-pulse { animation: ctaPulse 2.6s ease-in-out infinite; }

  /* Animated gradient CTA block */
  .cta-animated { background: linear-gradient(-45deg, #1D4ED8, #312E81, #1D4ED8, #1e40af); background-size: 300% 300%; animation: gradShift 7s ease infinite; }
  @keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
  .cta-fullbleed { position: relative; overflow: hidden; padding: 96px 32px; text-align: center; color: white; }
  .cta-fullbleed-inner { position: relative; max-width: 680px; margin: 0 auto; }
  .cta-fullbleed h2 { color: white; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 900; margin-bottom: 18px; letter-spacing: -0.3px; }
  .cta-fullbleed h2::after { display: none; }
  .cta-fullbleed p { color: rgba(255,255,255,0.86); font-size: 1.15rem; line-height: 1.75; margin-bottom: 36px; }

  /* Page transition */
  .page.active { animation: pageFadeIn 0.38s ease; }
  @keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  /* Section badge pop */
  @keyframes badgePop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

  /* Process step icons */
  .card .card-icon { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; }
  .card:hover .card-icon { transform: scale(1.22) rotate(-4deg); }

  /* Feature cards on consulting / websites */
  .web-tier::after { content: ''; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,0.05) 50%, transparent 62%); opacity: 0; pointer-events: none; transition: opacity 0.3s; border-radius: inherit; }
  .web-tier:hover::after { opacity: 1; animation: cardShimmer 0.7s ease-out; }

  /* ── FLOATING PARTICLES IN HERO ── */
  .hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .hero-particle { position: absolute; border-radius: 50%; opacity: 0; animation: particleRise linear infinite; will-change: transform, opacity; }
  @keyframes particleRise {
    0%   { opacity: 0; transform: translateY(0) scale(0.4); }
    15%  { opacity: 0.55; }
    85%  { opacity: 0.25; }
    100% { opacity: 0; transform: translateY(-120px) scale(1.3); }
  }

  /* ── ANIMATED UNDERLINE ON SECTION HEADINGS (block, centered pill) ── */
  .section-header h2 { position: relative; display: block; margin-bottom: 22px; }
  .section-header h2::after { content: ''; display: block; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) scaleX(0); height: 3px; width: 72px; background: linear-gradient(90deg, var(--blue), var(--orange)); border-radius: 3px; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); transform-origin: center; }
  .section-header.visible h2::after { transform: translateX(-50%) scaleX(1); }

  /* ── GLOW PULSE ON STATS NUMBERS ── */
  @keyframes statGlow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 32px rgba(147,197,253,0.65); } }
  .stats-grid.visible .stat-number { animation: statGlow 2.8s ease-in-out infinite; }
  .stats-grid.visible .stat-item:nth-child(2) .stat-number { animation-delay: 0.7s; }
  .stats-grid.visible .stat-item:nth-child(3) .stat-number { animation-delay: 1.4s; }
  .stats-grid.visible .stat-item:nth-child(4) .stat-number { animation-delay: 2.1s; }

  /* ── FLOATING DOTS DECORATION ON GRAY SECTIONS ── */
  section.gray { position: relative; overflow: hidden; }
  section.gray::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,0.06), transparent 68%); top: -80px; right: -80px; pointer-events: none; animation: sectionOrb 12s ease-in-out infinite; }
  @keyframes sectionOrb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,20px) scale(1.12); } }

  /* ── ANIMATED BADGE SHINE ── */
  .badge { position: relative; overflow: hidden; }
  .badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%); transform: translateX(-100%); animation: badgeShine 3.5s ease-in-out infinite; }
  @keyframes badgeShine { 0%,70% { transform: translateX(-100%); } 90%,100% { transform: translateX(200%); } }

  /* ── NAV SCROLL SHADOW ── */
  nav.scrolled { box-shadow: 0 4px 24px rgba(15,23,42,0.14); }

  /* ── SERVICE CARDS V2: visual gradient icon backgrounds ── */
  .svc-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px 28px; border: 1px solid var(--gray-200); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; position: relative; overflow: hidden; cursor: pointer; }
  .svc-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--svc-color, var(--blue-light)); opacity: 0.35; transition: transform 0.5s ease, opacity 0.3s ease; }
  .svc-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.12); }
  .svc-card:hover::before { transform: scale(1.4); opacity: 0.55; }
  .svc-icon-wrap { width: 58px; height: 58px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 20px; background: var(--svc-color, var(--blue-light)); position: relative; z-index: 1; }
  .svc-card h3 { font-size: 1.12rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 10px; }
  .svc-card p { font-size: 0.92rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 20px; }
  .svc-link { font-size: 0.88rem; font-weight: 700; color: var(--svc-accent, var(--blue)); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; }
  .svc-card:hover .svc-link { gap: 10px; }
  .svc-card-soon { opacity: 0.88; border-style: dashed; border-color: rgba(99,102,241,0.4); }
  .svc-card-soon:hover { transform: none !important; }
  .svc-soon-note { font-size: 0.9rem; color: var(--gray-600); line-height: 1.6; margin: 10px 0 4px; }
  html[data-theme="dark"] .svc-soon-note { color: var(--gray-400); }
  .svc-coming-badge { display: inline-block; background: linear-gradient(135deg,#6366F1,#8B5CF6); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
  html[data-theme="dark"] .svc-card { background: #111827; border-color: #243044; }
  html[data-theme="dark"] .svc-card::before { opacity: 0.15; }

  /* ── VISUAL FEATURE SHOWCASE ── */
  .feature-showcase { background: linear-gradient(160deg, #EEF2FF 0%, #E0E7FF 45%, #EDE9FE 100%); padding: 88px 24px; position: relative; overflow: hidden; }
  html[data-theme="dark"] .feature-showcase { background: linear-gradient(160deg, #0F172A 0%, #0F2240 55%, #16103A 100%); }
  .feature-showcase::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234B6FA5' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
  .feature-showcase-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; }
  .feature-showcase-text { color: var(--blue-dark); }
  html[data-theme="dark"] .feature-showcase-text { color: white; }
  .feature-showcase-text .badge { background: rgba(37,99,235,0.12); color: var(--blue); border: 1px solid rgba(37,99,235,0.22); }
  html[data-theme="dark"] .feature-showcase-text .badge { background: rgba(37,99,235,0.22); color: #93C5FD; border: 1px solid rgba(37,99,235,0.3); }
  .feature-showcase-text h2 { color: var(--blue-dark); font-size: clamp(1.7rem,3.5vw,2.6rem); font-weight: 900; margin-bottom: 18px; line-height: 1.2; }
  html[data-theme="dark"] .feature-showcase-text h2 { color: white; }
  .feature-showcase-text h2::after { display: none; }
  .feature-showcase-text p { color: var(--gray-600); font-size: 1.05rem; line-height: 1.78; margin-bottom: 32px; }
  html[data-theme="dark"] .feature-showcase-text p { color: rgba(255,255,255,0.72); }
  .feature-list { list-style: none; margin-bottom: 36px; }
  .feature-list li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(37,99,235,0.10); color: var(--gray-700); font-size: 0.97rem; }
  html[data-theme="dark"] .feature-list li { border-bottom: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
  .feature-list li:last-child { border-bottom: none; }
  .feature-check { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #7C3AED); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; flex-shrink: 0; margin-top: 1px; }

  /* ── AI VISUAL PANEL ── */
  .ai-visual-panel { position: relative; height: 420px; }
  .ai-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
  .ai-orb-1 { width: 200px; height: 200px; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); top: 20px; left: 50%; transform: translateX(-50%); animation: orbFloat1 6s ease-in-out infinite; opacity: 0.9; }
  .ai-orb-2 { width: 130px; height: 130px; background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%); bottom: 60px; left: 20px; animation: orbFloat2 8s ease-in-out infinite; opacity: 0.75; }
  .ai-orb-3 { width: 100px; height: 100px; background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); bottom: 30px; right: 20px; animation: orbFloat3 7s ease-in-out infinite; opacity: 0.75; }
  .ai-orb-4 { width: 70px; height: 70px; background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%); top: 160px; left: 10px; animation: orbFloat1 5s 1s ease-in-out infinite; opacity: 0.65; }
  .ai-orb-5 { width: 55px; height: 55px; background: linear-gradient(135deg, #10B981 0%, #0EA5E9 100%); top: 140px; right: 15px; animation: orbFloat2 9s 0.5s ease-in-out infinite; opacity: 0.65; }
  @keyframes orbFloat1 { 0%,100%{transform:translateX(-50%) translateY(0) scale(1);} 50%{transform:translateX(-50%) translateY(-18px) scale(1.04);} }
  @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8px,-14px) scale(1.06);} }
  @keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-10px,-12px) scale(1.08);} }

  /* Connection lines between orbs */
  .ai-connections { position: absolute; inset: 0; pointer-events: none; }

  /* Floating tech labels */
  .ai-label { position: absolute; background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border: 1px solid rgba(37,99,235,0.18); border-radius: 10px; padding: 8px 14px; color: var(--blue-dark); font-size: 0.85rem; font-weight: 700; white-space: nowrap; animation: labelDrift 4s ease-in-out infinite; box-shadow: 0 4px 16px rgba(37,99,235,0.10); }
  html[data-theme="dark"] .ai-label { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.15); color: white; box-shadow: none; }
  .ai-label-1 { top: 0; left: 0; animation-delay: 0s; }
  .ai-label-2 { top: 100px; right: 0; animation-delay: 1.2s; }
  .ai-label-3 { bottom: 80px; left: 0; animation-delay: 0.6s; }
  .ai-label-4 { bottom: 0; right: 0; animation-delay: 1.8s; }
  @keyframes labelDrift { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

  /* ── PROCESS STEP REDESIGN ── */
  .process-step { background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px; border: 1px solid var(--gray-200); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .process-step::before { content: attr(data-step); position: absolute; top: -12px; right: 16px; font-size: 5rem; font-weight: 900; color: var(--blue); opacity: 0.06; line-height: 1; pointer-events: none; }
  .process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .process-num { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #7C3AED); color: white; font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
  html[data-theme="dark"] .process-step { background: #111827; border-color: #243044; }
  html[data-theme="dark"] .process-step::before { color: #4B7BEC; }

  /* ── TESTIMONIAL CARD POLISH ── */
  .testimonial-card { position: relative; overflow: hidden; }
  .testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--orange)); }

  /* ── CARD DEPTH TILT (subtle 3D) ── */
  .card, .cat-card { transform-style: preserve-3d; }

  /* ── LINK HOVER UNDERLINE SLIDE ── */
  .footer-col a { position: relative; }
  .footer-col a::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.25s ease; }
  .footer-col a:hover::after { width: 100%; }

  /* ── ANIMATED GRADIENT BORDER ON FEATURED PRICE CARD ── */
  @keyframes borderSpin { to { --angle: 360deg; } }
  @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  .price-card.featured { background: var(--white); }
  html[data-theme="dark"] .price-card.featured { background: #111827; }

  /* ── CONSULTING CARD HOVER LIFT ── */
  .consulting-grid .card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .consulting-grid .card:hover { transform: translateY(-8px) scale(1.01); box-shadow: var(--shadow-lg); }

  /* ── WAVE DIVIDER BETWEEN HERO AND TRUST BAR ── */
  .hero-wave { position: absolute; bottom: -1px; left: 0; right: 0; pointer-events: none; line-height: 0; }
  .hero-wave svg { display: block; width: 100%; height: 36px; }

  /* ── PULSING ONLINE DOT (already exists, enhance) ── */
  @keyframes sPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.55); } 60% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } }

  /* ── ANIMATED GRADIENT TEXT ON H1 SPAN ── */
  .hero h1 .hero-rotating-item.active { background: linear-gradient(135deg, var(--orange) 0%, #f97316 50%, #fbbf24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: rotWordIn 0.6s cubic-bezier(0.22,1,0.36,1) both, gradientShift 3s ease-in-out infinite; background-size: 200%; }
  @keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

  /* ── BOUNCE ON CTA ICON ── */
  @keyframes iconBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .cta-animated .cta-icon { animation: iconBounce 2.2s ease-in-out infinite; display: inline-block; }

  /* ── SLIDE-IN HERO LOGO FLOAT ── */
  @keyframes heroLogoFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
  .hero-logo { animation: heroFadeUp 0.75s 0.05s both, heroLogoFloat 5s 0.8s ease-in-out infinite; }

  /* ── SCAN LINE ON STATS SECTION ── */
  .stats-section::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px); pointer-events: none; }

  /* ── CARD ICON SPIN ON HOVER ── */
  .card .card-icon { transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; }
  .card:hover .card-icon { transform: scale(1.3) rotate(8deg); }

  /* ── TYPING CURSOR ON BADGE ── */
  .hero .badge { letter-spacing: 0.05em; }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .hero-blob, .trust-bar-inner, .btn-pulse, .cta-animated, .hero-particle,
    .badge::after, section.gray::after, .stats-grid .stat-number,
    .hero-logo, .cta-animated .cta-icon { animation: none !important; }
    .reveal, .reveal-grid > *, .hero-logo, .hero .badge, .hero h1, .hero > p, .hero-btns { opacity: 1 !important; transform: none !important; animation: none !important; }
    .reveal-grid.visible > * { transition-delay: 0ms !important; }
    .section-header h2::after { transform: translateX(-50%) scaleX(1); }
  }
  @media (max-width: 900px) {
    .feature-showcase-inner { grid-template-columns: 1fr; gap: 40px; }
    .ai-visual-panel { height: 300px; }
  }
  @media (max-width: 768px) {
    .hero-blob { width: 220px; height: 220px; filter: blur(50px); }
    .testimonial-card { padding: 28px 22px; }
    section.gray::after { display: none; }
    .ai-visual-panel { height: 240px; }
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .nav-inner { min-height: 80px; }
    .logo-text { max-width: 180px; }
    .logo-kicker { display: none; }
    .nav-links { display: none; flex-direction: column; align-items: stretch; position: absolute; top: 72px; left: 0; right: 0; background: var(--white); border-bottom: 2px solid var(--gray-200); padding: 16px; z-index: 99; box-shadow: var(--shadow); }
    .nav-links.open { display: flex; }
    .nav-links button { width: 100%; text-align: left; font-size: 1rem; }
    .services-menu { width: 100%; }
    .services-summary { width: 100%; justify-content: space-between; }
    .services-panel { position: static; box-shadow: 0 4px 16px rgba(0,0,0,0.08); margin-top: 6px; border-color: var(--gray-200); transform: none !important; opacity: 1 !important; pointer-events: all !important; display: none; }
    .services-menu.open .services-panel { display: grid; }
    .hamburger { display: block; }
    .nav-auth { margin-left: auto; }
    .hero { padding: 50px 20px 50px; }
    .consulting-grid, .about-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    section { padding: 50px 16px; }
    .question-box { padding: 24px 18px; }
    .answer-actions .btn { width: 100%; justify-content: center; }
    .contact-wrapper { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .hero-btns .btn { width: 100%; justify-content: center; }
    .nav-auth .btn-primary { display: none; }
    .logo { font-size: 0.92rem; }
    .logo-icon { width: 46px; height: auto; }
  }

  /* ============================================================
     PORTAL: AI SUITE
     ============================================================ */
  .portal-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #fff; border: none; border-radius: var(--radius-pill);
    padding: 10px 20px; font-size: 0.92rem; font-weight: 700;
    font-family: inherit; cursor: pointer; white-space: nowrap; min-height: 44px;
    box-shadow: 0 4px 16px rgba(124,58,237,0.32);
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
  }
  .portal-nav-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(124,58,237,0.42); }
  .portal-nav-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .portal-gate-modal { max-width: 440px; padding: 0; border-radius: var(--radius); }
  .portal-gate-modal .modal-header { background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(124,58,237,0.10)); }
  .portal-gate-modal .modal-body { padding: 28px; }
  .portal-gate-sub { color: var(--gray-600); font-size: 0.95rem; margin-bottom: 20px; }
  .portal-gate-note { font-size: 0.82rem; color: var(--gray-600); margin-top: 12px; text-align: center; }
  .portal-enter-btn { background: linear-gradient(135deg, #4F46E5, #7C3AED) !important; border: none !important; box-shadow: 0 6px 20px rgba(124,58,237,0.32) !important; }
  .portal-enter-btn:hover { box-shadow: 0 10px 26px rgba(124,58,237,0.42) !important; }

  .portal-hero { position: relative; padding: 64px 24px 40px; overflow: hidden; background: var(--page-hero-bg); border-bottom: 1px solid var(--gray-200); }
  .portal-hero-glow { position: absolute; inset: -20% -10% auto -10%; height: 380px; background: radial-gradient(circle at 30% 20%, rgba(124,58,237,0.16), transparent 60%), radial-gradient(circle at 75% 40%, rgba(37,99,235,0.14), transparent 55%); pointer-events: none; }
  .portal-badge { background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(124,58,237,0.14)); color: #7C3AED; }

  .portal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
  .portal-sidebar {
    display: flex; flex-direction: column; gap: 6px;
    background: linear-gradient(165deg, #12172B, #1E2542 60%, #241B3D);
    border-radius: var(--radius-lg); padding: 16px; position: sticky; top: 92px;
    box-shadow: var(--shadow-lg); max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .portal-sidebar-label { color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 14px 4px; }
  .portal-tab {
    display: flex; align-items: center; gap: 10px; text-align: left;
    background: transparent; color: rgba(255,255,255,0.72); border: 1.5px solid transparent;
    border-radius: var(--radius); padding: 12px 14px; font-size: 0.9rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--spring), border-color 0.18s ease;
  }
  .portal-tab-icon { font-size: 1.1rem; flex-shrink: 0; }
  .portal-tab:hover { background: rgba(255,255,255,0.07); color: #fff; transform: translateX(2px); }
  .portal-tab.active { background: linear-gradient(135deg, color-mix(in srgb, var(--feature-color, #7C3AED) 85%, #4F46E5), var(--feature-color, #7C3AED)); color: #fff; border-color: rgba(255,255,255,0.14); box-shadow: 0 4px 14px rgba(0,0,0,0.28); }

  .portal-main-wrap { position: relative; }
  .portal-panel { display: none; }
  .portal-panel.active { display: block; animation: pageFadeIn 0.3s ease; }

  .portal-panel-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
  .portal-panel-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
  .portal-panel-header h3 { font-size: 1.3rem; font-weight: 800; color: var(--gray-800); margin-bottom: 4px; }
  .portal-panel-tagline { color: var(--gray-600); font-size: 0.95rem; margin: 0; }
  .portal-panel-tag { margin-left: auto; flex-shrink: 0; }

  .portal-prompt-box { background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
  .portal-prompt-input { width: 100%; min-height: 110px; border: none; outline: none; resize: vertical; font-family: inherit; font-size: 1.02rem; color: var(--gray-800); background: transparent; line-height: 1.6; }
  .portal-upload-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--gray-200); flex-wrap: wrap; }
  .portal-upload-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; background: var(--gray-100); color: var(--gray-700); border: 1.5px solid var(--gray-200); border-radius: var(--radius-pill); padding: 9px 16px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
  .portal-upload-btn:hover { background: var(--gray-200); border-color: var(--gray-300); }
  .portal-upload-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .portal-file-list { font-size: 0.85rem; color: var(--gray-600); }
  .portal-generate-btn { width: 100%; justify-content: center; background: linear-gradient(135deg, #4F46E5, #7C3AED) !important; border: none !important; box-shadow: 0 6px 20px rgba(124,58,237,0.28) !important; }
  .portal-generate-btn:hover { box-shadow: 0 10px 26px rgba(124,58,237,0.38) !important; }

  .portal-route-result { margin-top: 20px; background: color-mix(in srgb, var(--feature-color, #7C3AED) 8%, var(--white)); border: 1.5px solid color-mix(in srgb, var(--feature-color, #7C3AED) 30%, var(--gray-200)); border-radius: var(--radius); padding: 20px 22px; }
  .portal-route-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .portal-route-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-600); }
  .portal-route-header h4 { font-size: 1.1rem; font-weight: 800; color: var(--gray-800); margin: 0; }
  .portal-route-result p { font-size: 0.92rem; color: var(--gray-700); margin-bottom: 8px; }
  .portal-route-note { color: var(--gray-600) !important; font-size: 0.85rem !important; }

  .portal-model-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .portal-model-chip { background: color-mix(in srgb, var(--feature-color, var(--blue)) 12%, var(--white)); color: color-mix(in srgb, var(--feature-color, var(--blue)) 75%, black); border: 1px solid color-mix(in srgb, var(--feature-color, var(--blue)) 30%, var(--gray-200)); border-radius: 99px; padding: 6px 14px; font-size: 0.82rem; font-weight: 700; }
  .portal-usecase { font-size: 0.92rem; color: var(--gray-700); background: var(--gray-50); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; line-height: 1.6; }
  .portal-usecase strong { color: var(--gray-800); }

  .portal-example { display: flex; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .portal-example-io { flex: 1; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; }
  .portal-io-label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--feature-color, var(--blue)) 70%, black); margin-bottom: 6px; }
  .portal-example-io p { font-size: 0.9rem; color: var(--gray-700); margin: 0; line-height: 1.55; }
  .portal-example-arrow { display: flex; align-items: center; font-size: 1.3rem; color: var(--gray-400); }

  .portal-lock-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px; background: color-mix(in srgb, var(--white) 88%, transparent); backdrop-filter: blur(6px); border-radius: var(--radius-lg); }
  .portal-lock-overlay.hidden { display: none; }
  .portal-lock-icon { font-size: 2.6rem; }
  .portal-lock-overlay h3 { font-size: 1.3rem; font-weight: 800; color: var(--gray-800); margin: 0; }
  .portal-lock-overlay p { color: var(--gray-600); max-width: 360px; margin: 0 0 6px; }

  @media (max-width: 900px) {
    .portal-layout { grid-template-columns: 1fr; }
    .portal-sidebar { position: static; flex-direction: row; overflow-x: auto; max-height: none; }
    .portal-sidebar-label { display: none; }
    .portal-example { flex-direction: column; }
  }
  @media (max-width: 480px) {
    .portal-nav-btn span { display: none; }
  }

  /* AI PORTAL SUITE - COMMAND CENTER UPGRADE */
  .portal-nav-btn { background: linear-gradient(135deg, #0F172A, #2563EB 55%, #06B6D4); box-shadow: 0 10px 28px rgba(37,99,235,.28); }
  .portal-hero-command, .portal-pricing-hero { position: relative; min-height: 620px; display: flex; align-items: center; background: radial-gradient(circle at 18% 20%, rgba(34,211,238,.2), transparent 32%), radial-gradient(circle at 85% 12%, rgba(124,58,237,.18), transparent 34%), linear-gradient(135deg, #08111F 0%, #121A2E 54%, #111827 100%); color: #F8FAFC; overflow: hidden; border-bottom: 1px solid rgba(148,163,184,.22); }
  .portal-pricing-hero { min-height: 440px; text-align: center; }
  .portal-grid-field { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(96,165,250,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.14) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 52% 28%, black, transparent 72%); }
  .portal-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 44px; align-items: center; }
  .portal-hero-copy h1, .portal-pricing-hero h1 { margin: 16px 0 18px; color: #F8FAFC; font-size: clamp(2.65rem, 6vw, 5.8rem); line-height: .94; letter-spacing: 0; }
  .portal-hero-copy p, .portal-pricing-hero p { color: #C7D2FE; font-size: 1.14rem; line-height: 1.75; max-width: 760px; }
  .portal-hero-actions, .portal-pricing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .portal-pricing-actions { justify-content: center; }
  .portal-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; max-width: 720px; }
  .portal-hero-stats span { border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.62); border-radius: 12px; padding: 13px 14px; color: #CBD5E1; font-weight: 750; }
  .portal-hero-stats strong { display: block; color: #67E8F9; font-size: 1.1rem; }
  .portal-product-visual { position: relative; min-height: 420px; border: 1px solid rgba(148,163,184,.22); border-radius: 18px; padding: 22px; background: linear-gradient(145deg, rgba(15,23,42,.86), rgba(30,41,59,.72)); box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; }
  .portal-orbit { position: absolute; width: 360px; height: 360px; border: 1px solid rgba(34,211,238,.28); border-radius: 999px; inset: 40px auto auto 50%; transform: translateX(-50%); box-shadow: 0 0 70px rgba(34,211,238,.16); }
  .portal-orbit::before, .portal-orbit::after { content: ""; position: absolute; border-radius: inherit; inset: 42px; border: 1px solid rgba(124,58,237,.25); }
  .portal-orbit::after { inset: 94px; border-color: rgba(250,204,21,.22); }

  /* Router visualization: a breathing hub connected to four modality nodes
     riding the existing orbit rings: replaces the old text-heavy mockup. */
  .portal-router-badge { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #E0F2FE; font-weight: 800; }
  .portal-router-pulse-dot { width: 11px; height: 11px; border-radius: 50%; background: #22C55E; flex: 0 0 auto; animation: portalPulseDot 1.8s ease-out infinite; }
  @keyframes portalPulseDot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 11px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
  .portal-router-badge em { margin-left: auto; color: #67E8F9; font-style: normal; font-weight: 850; }

  .portal-router-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(56,189,248,.4), rgba(15,23,42,.92)); border: 1px solid rgba(125,211,252,.55); color: #E0F2FE; animation: portalHubBreathe 3s ease-in-out infinite; }
  .portal-router-hub svg { width: 28px; height: 28px; }
  @keyframes portalHubBreathe { 0%,100% { box-shadow: 0 0 28px rgba(56,189,248,.3); } 50% { box-shadow: 0 0 52px rgba(56,189,248,.58); } }

  .portal-router-node { position: absolute; z-index: 1; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--node-color) 32%, #0F172A), rgba(15,23,42,.92)); border: 1px solid color-mix(in srgb, var(--node-color) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--node-color) 32%, transparent); color: #F8FAFC; animation: portalNodeFloat 4s ease-in-out infinite; }
  .portal-router-node svg { width: 20px; height: 20px; }
  .portal-router-node::after { content: attr(data-label); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--node-color) 65%, white 25%); white-space: nowrap; }
  .node-top { top: -14px; left: 50%; margin-left: -23px; }
  .node-right { top: 50%; right: -14px; margin-top: -23px; animation-delay: .7s; }
  .node-bottom { bottom: 6px; left: 50%; margin-left: -23px; animation-delay: 1.4s; }
  .node-bottom::after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }
  .node-left { top: 50%; left: -14px; margin-top: -23px; animation-delay: 2.1s; }
  @keyframes portalNodeFloat { 0%,100% { margin-top: var(--float-base, 0); } 50% { margin-top: calc(var(--float-base, 0) - 6px); } }
  .node-top, .node-bottom { --float-base: 0; }

  .portal-visual-prompt { position: relative; z-index: 1; border: 1px solid rgba(148,163,184,.24); background: rgba(2,6,23,.58); border-radius: 14px; padding: 18px 18px 18px 16px; color: #F8FAFC; font-weight: 800; line-height: 1.55; }
  .portal-visual-caret { display: inline-block; width: 3px; height: 1.1em; margin-right: 8px; background: #67E8F9; vertical-align: -0.18em; animation: portalCaretBlink 1s step-end infinite; }
  @keyframes portalCaretBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
  .portal-workspace-section { background: linear-gradient(180deg, #F8FAFC, #EEF4FF); }

  /* Portal launch notify (newsletter capture shown while the suite is still coming soon) */
  .portal-launch-section { padding: 8px 0 40px; }
  .portal-launch-card {
    max-width: 760px; margin: 0 auto; text-align: center;
    background: var(--white); border: 2px solid color-mix(in srgb, var(--blue) 16%, var(--gray-200));
    border-radius: var(--radius-lg); padding: 48px 44px;
    box-shadow: 0 10px 36px rgba(37,99,235,0.10), 0 2px 8px rgba(0,0,0,0.05);
  }
  .portal-launch-card h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 14px 0 12px; }
  .portal-launch-copy { font-size: 1.08rem; line-height: 1.7; color: var(--gray-600); max-width: 620px; margin: 0 auto 26px; }
  .portal-launch-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .portal-launch-input {
    flex: 1; min-width: 260px; padding: 15px 22px; font-size: 1.05rem; font-family: inherit;
    border: 2px solid var(--gray-200); border-radius: var(--radius-pill); color: var(--gray-800); background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .portal-launch-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.14); }
  .portal-launch-fineprint { margin-top: 16px; font-size: 0.85rem; color: var(--gray-400); }
  .portal-launch-done { border-color: #10B981; box-shadow: 0 10px 36px rgba(16,185,129,0.14), 0 2px 8px rgba(0,0,0,0.05); }
  html[data-theme="dark"] .portal-launch-card { background: #111827; border-color: #1E3152; box-shadow: 0 10px 36px rgba(0,0,0,0.4); }
  html[data-theme="dark"] .portal-launch-input { background: #0F172A; border-color: #334155; color: #F8FAFC; }
  @media (max-width: 480px) { .portal-launch-form { flex-direction: column; } .portal-launch-input { min-width: 0; } }
  .portal-layout { grid-template-columns: 1fr; }
  .portal-sidebar {
    position: relative; top: auto; display: flex; flex-direction: column; gap: 0;
    max-height: none; overflow: visible; border-radius: 18px; padding: 18px; margin-bottom: 24px;
    background: radial-gradient(circle at 12% 15%, rgba(34,211,238,.2), transparent 30%), radial-gradient(circle at 88% 28%, rgba(124,58,237,.2), transparent 36%), linear-gradient(135deg, #08111F, #151B2F);
    isolation: isolate;
  }
  .portal-sidebar::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, #38BDF8, #A78BFA, #38BDF8, transparent);
    background-size: 200% 100%; animation: portalScanSweep 3.6s linear infinite;
  }
  @keyframes portalScanSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .portal-tab-pinned { margin-bottom: 14px; }
  .portal-matrix-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .portal-matrix-count { font-family: 'Inter', monospace; font-weight: 800; color: #67E8F9; letter-spacing: 0; text-transform: none; margin-left: 8px; }
  .portal-matrix-search { position: relative; display: flex; align-items: center; }
  .portal-matrix-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: rgba(226,232,240,.5); pointer-events: none; }
  .portal-matrix-search input { width: 100%; background: rgba(2,6,23,.5); border: 1.5px solid rgba(148,163,184,.22); border-radius: 10px; padding: 10px 12px 10px 36px; color: #F1F5F9; font-size: .88rem; font-family: inherit; transition: border-color .18s ease, background .18s ease; }
  .portal-matrix-search input::placeholder { color: rgba(226,232,240,.4); }
  .portal-matrix-search input:focus { outline: none; border-color: rgba(103,232,249,.6); background: rgba(2,6,23,.72); }
  .portal-matrix-filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .portal-filter-chip { border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.04); color: rgba(226,232,240,.72); border-radius: 99px; padding: 5px 12px; font-size: .74rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .16s ease; }
  .portal-filter-chip:hover { background: rgba(255,255,255,.09); color: #fff; }
  .portal-filter-chip.active { background: linear-gradient(135deg, #4F46E5, #7C3AED); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(124,58,237,.4); }
  .portal-matrix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .portal-matrix-empty { grid-column: 1 / -1; text-align: center; color: rgba(226,232,240,.55); font-size: .85rem; padding: 18px 0; }
  .portal-tab { position: relative; min-height: 64px; border-radius: 14px; background: rgba(255,255,255,.055); border-color: rgba(148,163,184,.16); color: #DDE7FF; }
  .portal-tab:hover, .portal-tab.active { transform: translateY(-2px); }
  .portal-tab-filtered { display: none !important; }
  .portal-tab-status { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--feature-color, #22C55E); box-shadow: 0 0 8px var(--feature-color, #22C55E); animation: portalPulseDot 2.4s ease-out infinite; }
  .portal-icon-slot { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--feature-color, #38BDF8) 50%, rgba(255,255,255,.18)); background: linear-gradient(135deg, color-mix(in srgb, var(--feature-color, #38BDF8) 22%, #0F172A), rgba(15,23,42,.74)); box-shadow: inset 0 0 18px rgba(255,255,255,.04), 0 12px 28px color-mix(in srgb, var(--feature-color, #38BDF8) 20%, transparent); color: #F8FAFC; font-size: .78rem; font-weight: 950; }
  .portal-icon-slot-sm { width: 38px; height: 38px; border-radius: 12px; font-size: .68rem; }
  .portal-icon-slot-lg { width: 72px; height: 72px; border-radius: 20px; }
  .portal-main-wrap { border-radius: 18px; }
  .portal-panel.active { background: rgba(255,255,255,.76); border: 1px solid rgba(148,163,184,.22); border-radius: 18px; padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,.09); }
  .portal-prompt-box { border-radius: 16px; border-color: rgba(37,99,235,.22); box-shadow: 0 18px 44px rgba(37,99,235,.08); }
  .portal-capability-intro { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(148,163,184,.22); }
  .portal-capability-intro h3 { margin: 4px 0; color: var(--blue-dark); font-size: 1.4rem; }
  .portal-revision-eyebrow { margin: 0; color: #2563EB; font-size: .74rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
  .portal-tier-preview, .portal-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .portal-tier-preview article, .portal-plan-card { border: 1px solid rgba(148,163,184,.2); border-radius: 18px; background: #fff; padding: 24px; box-shadow: 0 20px 42px rgba(15,23,42,.08); }
  .portal-tier-preview span, .portal-plan-kicker { color: #2563EB; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
  .portal-plan-card { display: flex; flex-direction: column; min-height: 620px; }
  .portal-plan-card.featured { border-color: rgba(37,99,235,.42); box-shadow: 0 26px 70px rgba(37,99,235,.16); transform: translateY(-8px); }
  .portal-plan-card.enterprise { background: linear-gradient(180deg, #FFFFFF, #F8FBFF); }
  .portal-plan-card h2 { margin: 10px 0 6px; color: var(--blue-dark); }
  .portal-plan-price { color: #0F172A; font-size: 2.6rem; line-height: 1; font-weight: 950; margin: 12px 0; }
  .portal-plan-price span { color: var(--gray-600); font-size: 1rem; font-weight: 800; }
  .portal-plan-card p { color: var(--gray-600); line-height: 1.65; }
  .portal-plan-card ul { margin: 18px 0 24px; padding-left: 20px; color: var(--gray-700); line-height: 1.65; flex: 1; }
  .portal-feature-ribbon { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .portal-feature-ribbon span { border: 1px solid rgba(37,99,235,.18); background: #fff; color: #1E3A8A; border-radius: 999px; padding: 9px 13px; font-weight: 850; font-size: .9rem; }
  @media (max-width: 980px) {
    .portal-hero-inner, .portal-tier-preview, .portal-plan-grid { grid-template-columns: 1fr; }
    .portal-plan-card.featured { transform: none; }
    .portal-hero-stats { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .portal-hero-command, .portal-pricing-hero { min-height: auto; padding: 54px 0; }
    .portal-matrix-grid { grid-template-columns: 1fr; }
    .portal-panel.active { padding: 18px; }
  }
  html[data-theme="dark"] .portal-workspace-section { background: linear-gradient(180deg, #020617, #0F172A); }
  html[data-theme="dark"] .portal-panel.active,
  html[data-theme="dark"] .portal-tier-preview article,
  html[data-theme="dark"] .portal-plan-card,
  html[data-theme="dark"] .portal-feature-ribbon span { background: #111827; border-color: #334155; }
  html[data-theme="dark"] .portal-plan-card.enterprise { background: linear-gradient(180deg, #111827, #0F172A); }
  html[data-theme="dark"] .portal-plan-price,
  html[data-theme="dark"] .portal-plan-card h2,
  html[data-theme="dark"] .portal-capability-intro h3 { color: #F8FAFC; }
  html[data-theme="dark"] .portal-plan-card p,
  html[data-theme="dark"] .portal-plan-card ul { color: #CBD5E1; }

  /* Portal hardening and visual refinement */
  .portal-hero-command { padding: 96px 0 78px; min-height: auto; }
  .portal-hero-copy h1, .portal-pricing-hero h1 { font-size: clamp(2.45rem, 5vw, 4.9rem); line-height: 1; max-width: 920px; }
  .portal-hero-copy p { max-width: 820px; }
  .portal-hero-actions .btn-ghost { color: #E2E8F0; border-color: rgba(226,232,240,.55); background: rgba(15,23,42,.28); }
  .portal-product-visual { min-height: 560px; border-radius: 24px; background: radial-gradient(circle at 50% 38%, rgba(34,211,238,.12), transparent 26%), linear-gradient(145deg, rgba(15,23,42,.95), rgba(15,23,42,.72)); display: flex; flex-direction: column; }
  .portal-visual-prompt { margin-top: auto; font-size: 1.02rem; }
  .portal-business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
  .portal-business-grid article { display: flex; gap: 10px; align-items: flex-start; border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.72); border-radius: 12px; padding: 14px; }
  .portal-business-grid article span { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; flex: 0 0 auto; background: var(--feature-color, #2563EB); box-shadow: 0 0 16px color-mix(in srgb, var(--feature-color, #2563EB) 45%, transparent); }
  .portal-business-grid p { margin: 0; color: var(--gray-700); font-size: .9rem; line-height: 1.55; }
  .portal-plan-grid { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .portal-plan-credits { color: var(--blue-dark); font-weight: 850; font-size: .92rem; margin: -4px 0 4px; }

  .portal-billing-toggle { display: flex; width: max-content; margin: 0 auto 22px; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.16); }
  .portal-billing-option { border: none; background: transparent; color: var(--gray-600); font-weight: 800; font-size: .88rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: all .16s ease; }
  .portal-billing-option.active { background: linear-gradient(135deg, #1D4ED8, #06B6D4); color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.3); }
  .portal-billing-save { margin-left: 6px; font-size: .74rem; font-weight: 900; color: #059669; }
  .portal-billing-option.active .portal-billing-save { color: #A7F3D0; }

  .portal-addons-section { padding-top: 8px; }
  .portal-addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .portal-addon-card { border: 1px solid rgba(148,163,184,.22); background: var(--white); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
  .portal-addon-card h4 { margin: 0; font-size: .98rem; color: var(--blue-dark); }
  .portal-addon-card p { margin: 0; color: var(--gray-600); font-size: .85rem; line-height: 1.5; }
  .portal-addon-credit-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .portal-addon-card .btn { margin-top: auto; }

  .portal-credits-badge { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; color: var(--gray-700); background: color-mix(in srgb, var(--blue) 10%, var(--white)); border: 1px solid rgba(37,99,235,.18); border-radius: 999px; padding: 6px 12px; }
  .portal-credits-badge strong { color: var(--blue-dark); }
  .portal-credits-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px rgba(34,197,94,.6); flex: 0 0 auto; }

  .portal-tab-locked { opacity: .58; position: relative; }
  .portal-tab-locked:hover { opacity: .85; }
  .portal-tab-lock-ribbon { margin-left: auto; font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--feature-color, #2563EB) 70%, black); background: color-mix(in srgb, var(--feature-color, #2563EB) 14%, var(--white)); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
  .portal-checkout-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
  .portal-checkout-strip span { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(37,99,235,.18); background: #fff; border-radius: 14px; padding: 14px; color: var(--gray-700); font-weight: 800; line-height: 1.35; }
  .portal-checkout-strip strong { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(135deg, #1D4ED8, #06B6D4); color: #fff; }
  .portal-pricing-hero { min-height: auto; padding: 86px 0 58px; }
  .portal-plan-card { min-height: 0; padding: 28px; }
  .portal-plan-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
  .portal-feature-pricing-section { padding-top: 12px; }
  .portal-access-shell { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 20% 20%, rgba(34,211,238,.18), transparent 34%), linear-gradient(135deg, #08111F, #111827); overflow: hidden; }
  .portal-access-card { position: relative; z-index: 1; max-width: 680px; width: 100%; border: 1px solid rgba(148,163,184,.24); border-radius: 24px; background: rgba(15,23,42,.84); box-shadow: 0 34px 90px rgba(0,0,0,.38); padding: 34px; color: #F8FAFC; text-align: center; }
  .portal-access-card img { margin: 0 auto 12px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.32)); }
  .portal-access-card h1 { color: #F8FAFC; margin: 14px 0 10px; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1; }
  .portal-access-card p { color: #CBD5E1; font-size: 1.05rem; line-height: 1.65; }
  .portal-access-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
  .portal-secure-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #CBD5E1; font-weight: 800; }
  html[data-theme="dark"] .portal-business-grid article { background: rgba(15,23,42,.78); border-color: #334155; }
  html[data-theme="dark"] .portal-business-grid p { color: #CBD5E1; }
  @media (max-width: 980px) { .portal-business-grid, .portal-checkout-strip { grid-template-columns: 1fr; } }

  /* ── Pricing page polish: hero stats, connected stepper, plan hierarchy, capability grid ── */
  .portal-pricing-stats { max-width: 760px; margin-left: auto; margin-right: auto; }

  .portal-checkout-strip { position: relative; padding-top: 4px; }
  .portal-checkout-strip::before {
    content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, rgba(29,78,216,.32), rgba(6,182,212,.32)); z-index: 0;
  }
  .portal-checkout-strip span {
    position: relative; z-index: 1; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--white); text-align: left;
  }
  .portal-checkout-strip strong { width: 36px; height: 36px; border-radius: 50%; font-size: .95rem; border: 3px solid var(--white); }

  .portal-plan-card { position: relative; }
  .portal-plan-card.featured::before {
    content: "Most Popular"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; font-size: .72rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; padding: 7px 18px; border-radius: 99px;
    box-shadow: 0 10px 24px rgba(124,58,237,.35); white-space: nowrap;
  }
  .portal-plan-header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
  .portal-plan-header .portal-plan-kicker { margin-bottom: 2px; }
  .portal-plan-header h2 { margin: 0; }

  .portal-plan-checklist { list-style: none; margin: 18px 0 24px; padding: 0; color: var(--gray-700); line-height: 1.65; flex: 1; }
  .portal-plan-checklist li { position: relative; padding-left: 30px; margin-bottom: 11px; font-size: .95rem; }
  .portal-plan-checklist li::before {
    content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 900;
    background: color-mix(in srgb, var(--feature-color, #2563EB) 16%, var(--white));
    color: color-mix(in srgb, var(--feature-color, #2563EB) 75%, black);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feature-color, #2563EB) 30%, transparent);
  }

  .portal-capability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
  .portal-capability-card {
    display: flex; align-items: flex-start; gap: 12px; text-align: left;
    border: 1px solid rgba(148,163,184,.22); background: var(--white); border-radius: 14px; padding: 14px 16px;
    transition: transform .18s var(--spring), box-shadow .18s ease, border-color .18s ease;
  }
  .portal-capability-card:hover {
    transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15,23,42,.1);
    border-color: color-mix(in srgb, var(--feature-color, var(--blue)) 45%, var(--gray-200));
  }
  .portal-capability-card h4 { margin: 0; font-size: .92rem; font-weight: 800; color: var(--gray-800); line-height: 1.3; }
  .portal-capability-desc { margin: 3px 0 0; font-size: .8rem; color: var(--gray-600); line-height: 1.45; }
  html[data-theme="dark"] .portal-capability-card { background: #111827; border-color: #334155; }
  html[data-theme="dark"] .portal-checkout-strip span { background: #111827; }
  html[data-theme="dark"] .portal-addon-card { background: #111827; border-color: #334155; }
  html[data-theme="dark"] .portal-addon-card p { color: #CBD5E1; }
  html[data-theme="dark"] .portal-billing-toggle { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.22); }
  html[data-theme="dark"] .portal-billing-option { color: #CBD5E1; }
  html[data-theme="dark"] .portal-credits-badge { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.25); color: #E2E8F0; }

  @media (max-width: 980px) {
    .portal-checkout-strip::before { display: none; }
    .portal-plan-header { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    .portal-capability-grid { grid-template-columns: 1fr; }
    .portal-addon-grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   ICON SYSTEM: crisp monochrome SVG icons (mask-based).
   Usage: <i class="icon icon--NAME"></i>. Color = currentColor,
   so icons inherit the surrounding text color and stay on-brand.
   ============================================================ */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -0.15em;
}
.icon--globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cpath%20d%3D'M2%2012h20'/%3E%3Cpath%20d%3D'M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cpath%20d%3D'M2%2012h20'/%3E%3Cpath%20d%3D'M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z'/%3E%3C/svg%3E"); }
.icon--bot { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'11'%20width%3D'18'%20height%3D'10'%20rx%3D'2'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'5'%20r%3D'2'/%3E%3Cpath%20d%3D'M12%207v4'/%3E%3Cline%20x1%3D'8'%20y1%3D'16'%20x2%3D'8'%20y2%3D'16'/%3E%3Cline%20x1%3D'16'%20y1%3D'16'%20x2%3D'16'%20y2%3D'16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'11'%20width%3D'18'%20height%3D'10'%20rx%3D'2'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'5'%20r%3D'2'/%3E%3Cpath%20d%3D'M12%207v4'/%3E%3Cline%20x1%3D'8'%20y1%3D'16'%20x2%3D'8'%20y2%3D'16'/%3E%3Cline%20x1%3D'16'%20y1%3D'16'%20x2%3D'16'%20y2%3D'16'/%3E%3C/svg%3E"); }
.icon--gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'/%3E%3Cpath%20d%3D'M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'/%3E%3Cpath%20d%3D'M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z'/%3E%3C/svg%3E"); }
.icon--chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E"); }
.icon--wrench { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14.7%206.3a4%204%200%200%200-5.4%205.3L3%2018l3%203%206.4-6.3a4%204%200%200%200%205.3-5.4l-2.5%202.5-2.8-2.8%202.6-2.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14.7%206.3a4%204%200%200%200-5.4%205.3L3%2018l3%203%206.4-6.3a4%204%200%200%200%205.3-5.4l-2.5%202.5-2.8-2.8%202.6-2.6z'/%3E%3C/svg%3E"); }
.icon--compass { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cpolygon%20points%3D'16.24%207.76%2014.12%2014.12%207.76%2016.24%209.88%209.88%2016.24%207.76'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cpolygon%20points%3D'16.24%207.76%2014.12%2014.12%207.76%2016.24%209.88%209.88%2016.24%207.76'/%3E%3C/svg%3E"); }
.icon--bulb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018h6'/%3E%3Cpath%20d%3D'M10%2022h4'/%3E%3Cpath%20d%3D'M15.09%2014c.18-.98.65-1.74%201.41-2.5A4.65%204.65%200%200%200%2018%208%206%206%200%200%200%206%208c0%201%20.23%202.23%201.5%203.5A4.61%204.61%200%200%201%208.91%2014'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018h6'/%3E%3Cpath%20d%3D'M10%2022h4'/%3E%3Cpath%20d%3D'M15.09%2014c.18-.98.65-1.74%201.41-2.5A4.65%204.65%200%200%200%2018%208%206%206%200%200%200%206%208c0%201%20.23%202.23%201.5%203.5A4.61%204.61%200%200%201%208.91%2014'/%3E%3C/svg%3E"); }
.icon--zap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202'/%3E%3C/svg%3E"); }
.icon--target { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'6'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'6'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'2'/%3E%3C/svg%3E"); }
.icon--lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'/%3E%3Cpath%20d%3D'M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'/%3E%3Cpath%20d%3D'M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E"); }
.icon--calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'18'%20rx%3D'2'/%3E%3Cline%20x1%3D'16'%20y1%3D'2'%20x2%3D'16'%20y2%3D'6'/%3E%3Cline%20x1%3D'8'%20y1%3D'2'%20x2%3D'8'%20y2%3D'6'/%3E%3Cline%20x1%3D'3'%20y1%3D'10'%20x2%3D'21'%20y2%3D'10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'18'%20rx%3D'2'/%3E%3Cline%20x1%3D'16'%20y1%3D'2'%20x2%3D'16'%20y2%3D'6'/%3E%3Cline%20x1%3D'8'%20y1%3D'2'%20x2%3D'8'%20y2%3D'6'/%3E%3Cline%20x1%3D'3'%20y1%3D'10'%20x2%3D'21'%20y2%3D'10'/%3E%3C/svg%3E"); }
.icon--palette { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'13.5'%20cy%3D'6.5'%20r%3D'1.5'/%3E%3Ccircle%20cx%3D'17.5'%20cy%3D'10.5'%20r%3D'1.5'/%3E%3Ccircle%20cx%3D'8.5'%20cy%3D'7.5'%20r%3D'1.5'/%3E%3Ccircle%20cx%3D'6.5'%20cy%3D'12.5'%20r%3D'1.5'/%3E%3Cpath%20d%3D'M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c1.66%200%202-1.34%202-2%200-.53-.21-1.02-.54-1.39-.33-.37-.54-.86-.54-1.39%200-1.1.9-2%202-2h2.34C19.36%2010.46%2022%207.82%2022%204.66%2022%203.24%2020.76%202%2019.34%202H12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'13.5'%20cy%3D'6.5'%20r%3D'1.5'/%3E%3Ccircle%20cx%3D'17.5'%20cy%3D'10.5'%20r%3D'1.5'/%3E%3Ccircle%20cx%3D'8.5'%20cy%3D'7.5'%20r%3D'1.5'/%3E%3Ccircle%20cx%3D'6.5'%20cy%3D'12.5'%20r%3D'1.5'/%3E%3Cpath%20d%3D'M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c1.66%200%202-1.34%202-2%200-.53-.21-1.02-.54-1.39-.33-.37-.54-.86-.54-1.39%200-1.1.9-2%202-2h2.34C19.36%2010.46%2022%207.82%2022%204.66%2022%203.24%2020.76%202%2019.34%202H12z'/%3E%3C/svg%3E"); }
.icon--rocket { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z'/%3E%3Cpath%20d%3D'M12%2015l-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z'/%3E%3Cpath%20d%3D'M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200'/%3E%3Cpath%20d%3D'M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z'/%3E%3Cpath%20d%3D'M12%2015l-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z'/%3E%3Cpath%20d%3D'M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200'/%3E%3Cpath%20d%3D'M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5'/%3E%3C/svg%3E"); }
.icon--mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'20'%20height%3D'16'%20rx%3D'2'/%3E%3Cpath%20d%3D'm22%207-10%205L2%207'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'20'%20height%3D'16'%20rx%3D'2'/%3E%3Cpath%20d%3D'm22%207-10%205L2%207'/%3E%3C/svg%3E"); }
.icon--phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E"); }
.icon--film { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'3'%20width%3D'20'%20height%3D'18'%20rx%3D'2'/%3E%3Cpath%20d%3D'M7%203v18'/%3E%3Cpath%20d%3D'M17%203v18'/%3E%3Cline%20x1%3D'2'%20y1%3D'9'%20x2%3D'22'%20y2%3D'9'/%3E%3Cline%20x1%3D'2'%20y1%3D'15'%20x2%3D'22'%20y2%3D'15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'3'%20width%3D'20'%20height%3D'18'%20rx%3D'2'/%3E%3Cpath%20d%3D'M7%203v18'/%3E%3Cpath%20d%3D'M17%203v18'/%3E%3Cline%20x1%3D'2'%20y1%3D'9'%20x2%3D'22'%20y2%3D'9'/%3E%3Cline%20x1%3D'2'%20y1%3D'15'%20x2%3D'22'%20y2%3D'15'/%3E%3C/svg%3E"); }
.icon--mic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'9'%20y%3D'2'%20width%3D'6'%20height%3D'12'%20rx%3D'3'/%3E%3Cpath%20d%3D'M19%2010v1a7%207%200%200%201-14%200v-1'/%3E%3Cline%20x1%3D'12'%20y1%3D'18'%20x2%3D'12'%20y2%3D'22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'9'%20y%3D'2'%20width%3D'6'%20height%3D'12'%20rx%3D'3'/%3E%3Cpath%20d%3D'M19%2010v1a7%207%200%200%201-14%200v-1'/%3E%3Cline%20x1%3D'12'%20y1%3D'18'%20x2%3D'12'%20y2%3D'22'/%3E%3C/svg%3E"); }
.icon--user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'/%3E%3C/svg%3E"); }
.icon--file { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpolyline%20points%3D'14%202%2014%208%2020%208'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpolyline%20points%3D'14%202%2014%208%2020%208'/%3E%3C/svg%3E"); }
.icon--shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3C/svg%3E"); }
.icon--chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D'12'%20y1%3D'20'%20x2%3D'12'%20y2%3D'10'/%3E%3Cline%20x1%3D'18'%20y1%3D'20'%20x2%3D'18'%20y2%3D'4'/%3E%3Cline%20x1%3D'6'%20y1%3D'20'%20x2%3D'6'%20y2%3D'14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D'12'%20y1%3D'20'%20x2%3D'12'%20y2%3D'10'/%3E%3Cline%20x1%3D'18'%20y1%3D'20'%20x2%3D'18'%20y2%3D'4'/%3E%3Cline%20x1%3D'6'%20y1%3D'20'%20x2%3D'6'%20y2%3D'14'/%3E%3C/svg%3E"); }
.icon--grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'/%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'/%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'/%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'/%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'/%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'/%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'/%3E%3C/svg%3E"); }
.icon--sparkles { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9z'/%3E%3Cpath%20d%3D'M19%2015l.9%202.1L22%2018l-2.1.9L19%2021l-.9-2.1L16%2018l2.1-.9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9z'/%3E%3Cpath%20d%3D'M19%2015l.9%202.1L22%2018l-2.1.9L19%2021l-.9-2.1L16%2018l2.1-.9z'/%3E%3C/svg%3E"); }
.icon--star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'12%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'12%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202'/%3E%3C/svg%3E"); }
.icon--monitor { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'3'%20width%3D'20'%20height%3D'14'%20rx%3D'2'/%3E%3Cline%20x1%3D'8'%20y1%3D'21'%20x2%3D'16'%20y2%3D'21'/%3E%3Cline%20x1%3D'12'%20y1%3D'17'%20x2%3D'12'%20y2%3D'21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'3'%20width%3D'20'%20height%3D'14'%20rx%3D'2'/%3E%3Cline%20x1%3D'8'%20y1%3D'21'%20x2%3D'16'%20y2%3D'21'/%3E%3Cline%20x1%3D'12'%20y1%3D'17'%20x2%3D'12'%20y2%3D'21'/%3E%3C/svg%3E"); }
.icon--server { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'3'%20width%3D'20'%20height%3D'8'%20rx%3D'2'/%3E%3Crect%20x%3D'2'%20y%3D'13'%20width%3D'20'%20height%3D'8'%20rx%3D'2'/%3E%3Cline%20x1%3D'6'%20y1%3D'7'%20x2%3D'6.01'%20y2%3D'7'/%3E%3Cline%20x1%3D'6'%20y1%3D'17'%20x2%3D'6.01'%20y2%3D'17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'3'%20width%3D'20'%20height%3D'8'%20rx%3D'2'/%3E%3Crect%20x%3D'2'%20y%3D'13'%20width%3D'20'%20height%3D'8'%20rx%3D'2'/%3E%3Cline%20x1%3D'6'%20y1%3D'7'%20x2%3D'6.01'%20y2%3D'7'/%3E%3Cline%20x1%3D'6'%20y1%3D'17'%20x2%3D'6.01'%20y2%3D'17'/%3E%3C/svg%3E"); }
.icon--package { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16.5%209.4%207.5%204.21'/%3E%3Cpath%20d%3D'M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z'/%3E%3Cpolyline%20points%3D'3.27%206.96%2012%2012.01%2020.73%206.96'/%3E%3Cline%20x1%3D'12'%20y1%3D'22.08'%20x2%3D'12'%20y2%3D'12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16.5%209.4%207.5%204.21'/%3E%3Cpath%20d%3D'M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z'/%3E%3Cpolyline%20points%3D'3.27%206.96%2012%2012.01%2020.73%206.96'/%3E%3Cline%20x1%3D'12'%20y1%3D'22.08'%20x2%3D'12'%20y2%3D'12'/%3E%3C/svg%3E"); }
.icon--receipt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%202v20l2-1%202%201%202-1%202%201%202-1%202%201%202-1%202%201V2l-2%201-2-1-2%201-2-1-2%201-2-1-2%201z'/%3E%3Cline%20x1%3D'8'%20y1%3D'7'%20x2%3D'16'%20y2%3D'7'/%3E%3Cline%20x1%3D'8'%20y1%3D'11'%20x2%3D'16'%20y2%3D'11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%202v20l2-1%202%201%202-1%202%201%202-1%202%201%202-1%202%201V2l-2%201-2-1-2%201-2-1-2%201-2-1-2%201z'/%3E%3Cline%20x1%3D'8'%20y1%3D'7'%20x2%3D'16'%20y2%3D'7'/%3E%3Cline%20x1%3D'8'%20y1%3D'11'%20x2%3D'16'%20y2%3D'11'/%3E%3C/svg%3E"); }
.icon--book { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'/%3E%3Cpath%20d%3D'M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'/%3E%3Cpath%20d%3D'M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'/%3E%3C/svg%3E"); }
.icon--cap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2010L12%205%202%2010l10%205%2010-5z'/%3E%3Cpath%20d%3D'M6%2012v5c0%201%202.5%203%206%203s6-2%206-3v-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2010L12%205%202%2010l10%205%2010-5z'/%3E%3Cpath%20d%3D'M6%2012v5c0%201%202.5%203%206%203s6-2%206-3v-5'/%3E%3C/svg%3E"); }
.icon--image { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'2'/%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'2'/%3E%3Cpath%20d%3D'm21%2015-3.5-3.5L9%2020'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'2'/%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'2'/%3E%3Cpath%20d%3D'm21%2015-3.5-3.5L9%2020'/%3E%3C/svg%3E"); }
.icon--clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cpolyline%20points%3D'12%206%2012%2012%2016%2014'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cpolyline%20points%3D'12%206%2012%2012%2016%2014'/%3E%3C/svg%3E"); }
.icon--check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2011.08V12a10%2010%200%201%201-5.93-9.14'/%3E%3Cpolyline%20points%3D'22%204%2012%2014.01%209%2011.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2011.08V12a10%2010%200%201%201-5.93-9.14'/%3E%3Cpolyline%20points%3D'22%204%2012%2014.01%209%2011.01'/%3E%3C/svg%3E"); }
.icon--play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'5%203%2019%2012%205%2021%205%203'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'5%203%2019%2012%205%2021%205%203'/%3E%3C/svg%3E"); }
.icon--link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71'/%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71'/%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71'/%3E%3C/svg%3E"); }
.icon--printer { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'6%209%206%202%2018%202%2018%209'/%3E%3Cpath%20d%3D'M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2'/%3E%3Crect%20x%3D'6'%20y%3D'14'%20width%3D'12'%20height%3D'8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'6%209%206%202%2018%202%2018%209'/%3E%3Cpath%20d%3D'M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2'/%3E%3Crect%20x%3D'6'%20y%3D'14'%20width%3D'12'%20height%3D'8'/%3E%3C/svg%3E"); }
.icon--clipboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'8'%20y%3D'2'%20width%3D'8'%20height%3D'4'%20rx%3D'1'/%3E%3Cpath%20d%3D'M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'8'%20y%3D'2'%20width%3D'8'%20height%3D'4'%20rx%3D'1'/%3E%3Cpath%20d%3D'M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3C/svg%3E"); }
.icon--heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78 1.06-1.06a5.5%205.5%200%200%200%200-7.78z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78 1.06-1.06a5.5%205.5%200%200%200%200-7.78z'/%3E%3C/svg%3E"); }

/* Info icon for inline affordances (refund conditions, etc.) */
.icon--info { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cline%20x1%3D'12'%20y1%3D'16'%20x2%3D'12'%20y2%3D'12'/%3E%3Cline%20x1%3D'12'%20y1%3D'8'%20x2%3D'12.01'%20y2%3D'8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'/%3E%3Cline%20x1%3D'12'%20y1%3D'16'%20x2%3D'12'%20y2%3D'12'/%3E%3Cline%20x1%3D'12'%20y1%3D'8'%20x2%3D'12.01'%20y2%3D'8'/%3E%3C/svg%3E"); }

/* Inline circular info button that opens a popup */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-left: 8px;
  border: 1px solid var(--gray-300); border-radius: 50%;
  background: var(--white); color: var(--blue);
  font-size: 14px; line-height: 1; cursor: pointer;
  vertical-align: middle; transition: background .15s, border-color .15s;
}
.info-btn:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
html[data-theme="dark"] .info-btn { background: #0f172a; border-color: #334155; }
html[data-theme="dark"] .info-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.icon--shield-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d%3D'm9%2012%202%202%204-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d%3D'm9%2012%202%202%204-4'/%3E%3C/svg%3E"); }.icon--briefcase { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%277%27 width=%2720%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%277%27 width=%2720%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%27/%3E%3C/svg%3E"); }

.icon--map { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018l6-6-6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018l6-6-6-6'/%3E%3C/svg%3E"); }

/* Icon placement inside existing components */
.card-icon { display: inline-flex; }
.card-icon .icon { width: 1em; height: 1em; color: var(--blue); }
.svc-icon-wrap { display: inline-flex; align-items: center; justify-content: center; }
.svc-icon-wrap .icon { width: 1.7rem; height: 1.7rem; color: var(--svc-accent, #2563EB); }
.cs-feature-icon { display: inline-flex; align-items: center; justify-content: center; }
.cs-feature-icon .icon { width: 1em; height: 1em; color: var(--blue); }
.web-tier-icon { display: inline-flex; align-items: center; justify-content: center; }
.web-tier-icon .icon { width: 1em; height: 1em; color: var(--blue); }
.resource-card-icon { display: inline-flex; align-items: center; justify-content: center; }
.resource-card-icon .icon { width: 1em; height: 1em; color: var(--blue); }
.cat-card .icon { width: 1em; height: 1em; color: var(--blue); }

/* Trust bar inline icons */
.trust-bar-set span .icon { width: 0.95em; height: 0.95em; margin-right: 8px; vertical-align: -0.12em; }

/* Testimonial star ratings */
.testimonial-stars { display: inline-flex; gap: 3px; line-height: 1; }
.testimonial-stars .icon { width: 1em; height: 1em; color: #F59E0B; vertical-align: -0.1em; }

/* Button / hero inline icons */
.btn .icon, .hero-btns .icon, .cta-icon .icon { width: 1.15em; height: 1.15em; margin-right: 8px; vertical-align: -0.18em; }
.hero .badge .icon, .cta-fullbleed .cta-icon { }
.cta-icon { display: inline-flex; align-items: center; justify-content: center; }
.cta-icon .icon { width: 1em; height: 1em; color: #fff; }
.cta-icon .icon { width: 1em; height: 1em; color: #fff; }

/* Floating AI labels in hero visual */
.ai-label .icon { width: 0.95em; height: 0.95em; margin-right: 6px; vertical-align: -0.12em; }

/* Consulting task list bullets */
.li-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin-right: 12px; color: var(--blue); flex: 0 0 auto; vertical-align: -0.2em; }
.li-ic .icon { width: 1em; height: 1em; }
.consulting-list li { align-items: flex-start; }

/* Studio pipeline labels */
.pipeline-label .icon { width: 1em; height: 1em; margin-right: 8px; vertical-align: -0.15em; color: var(--blue); }

/* Admin / portal card headings */
.admin-card h3 .icon, .portal-card-head .icon { width: 1em; height: 1em; margin-right: 8px; vertical-align: -0.12em; color: var(--blue); }

/* Video lesson side-card titles */
.card-title .icon { width: 1em; height: 1em; margin-right: 8px; vertical-align: -0.12em; color: var(--blue); }

/* Footer heart */
.footer-bottom .icon--heart { width: 0.95em; height: 0.95em; margin: 0 3px; color: #F87171; vertical-align: -0.1em; }

/* Website generator final-pass product controls */
.starter-showcase-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 72px minmax(0,1fr) minmax(220px,270px); align-items: center; gap: 26px;
  width: min(100%,1120px); margin: 30px auto 0; padding: 32px;
  border: 1px solid rgba(37,99,235,.2); border-radius: 24px;
  background: linear-gradient(140deg,rgba(239,246,255,.98) 0%,rgba(255,255,255,.98) 52%,rgba(255,247,237,.94) 100%);
  box-shadow: 0 22px 55px rgba(30,64,175,.12);
}
.starter-showcase-cta::before {
  content: ''; position: absolute; z-index: -1; width: 230px; height: 230px; right: -95px; top: -120px;
  border-radius: 50%; background: radial-gradient(circle,rgba(249,115,22,.2),rgba(249,115,22,0) 70%);
}
.starter-showcase-cta::after {
  content: ''; position: absolute; z-index: -1; width: 260px; height: 260px; left: -150px; bottom: -190px;
  border-radius: 50%; background: radial-gradient(circle,rgba(37,99,235,.2),rgba(37,99,235,0) 70%);
}
.starter-cta-icon {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px;
  color: #fff; background: linear-gradient(135deg,#2563EB,#1D4ED8 58%,#F97316 150%);
  box-shadow: 0 14px 28px rgba(37,99,235,.26); transform: rotate(-3deg);
}
.starter-cta-icon .icon { width: 30px; height: 30px; }
.starter-cta-copy { min-width: 0; }
.starter-cta-eyebrow {
  display: inline-flex; margin-bottom: 7px; color: var(--blue); font-size: .76rem; font-weight: 900;
  letter-spacing: .11em; text-transform: uppercase;
}
.starter-cta-copy h3 { margin: 0; color: var(--gray-900); font-size: clamp(1.35rem,2vw,1.75rem); line-height: 1.18; letter-spacing: -.02em; }
.starter-cta-copy > p { max-width: 650px; margin: 9px 0 0; color: var(--gray-600); font-size: .98rem; font-weight: 560; line-height: 1.6; }
.starter-cta-benefits { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.starter-cta-benefits li { display: inline-flex; align-items: center; gap: 7px; color: var(--gray-700); font-size: .85rem; font-weight: 750; }
.starter-cta-benefits .icon { width: 16px; height: 16px; color: #15803D; }
.starter-cta-action { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding-left: 24px; border-left: 1px solid rgba(37,99,235,.16); }
.starter-cta-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.starter-cta-price span { color: var(--gray-500); font-size: .76rem; font-weight: 800; }
.starter-cta-price strong { color: var(--gray-900); font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.starter-cta-button {
  width: 100%; min-width: 0; min-height: 52px; justify-content: center; gap: 8px; padding: 12px 18px;
  white-space: normal; text-align: center; line-height: 1.25; box-shadow: 0 12px 26px rgba(37,99,235,.24);
}
.starter-cta-button-label { min-width: 0; max-width: 100%; text-wrap: balance; }
.starter-cta-button-arrow { flex: 0 0 auto; }
.starter-cta-button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,99,235,.3); }
.starter-cta-action small { color: var(--gray-500); font-size: .75rem; font-weight: 650; text-align: center; }
.starter-prompt-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.starter-prompt-examples button { min-height: 44px; padding: 10px 12px; border: 1px solid rgba(37,99,235,.22); border-radius: 10px; background: rgba(255,255,255,.92); color: var(--blue-dark); font: inherit; font-size: .86rem; font-weight: 800; text-align: left; cursor: pointer; transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.starter-prompt-examples button:hover { transform: translateY(-1px); border-color: rgba(37,99,235,.48); box-shadow: 0 10px 24px rgba(30,64,175,.1); }
.starter-prompt-chip.active { background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(201,135,58,.16)); border-color: rgba(37,99,235,.62); color: var(--blue-dark); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.starter-prompt-chip.active::before { content: "✓ "; }
.support-request-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.support-request-actions .btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.support-request-grid:has(.starter-report-panel:not(.hidden)) { margin-top: 18px; }
.support-request-grid .starter-report-panel { grid-column: 1/-1; max-width: 820px; width: 100%; margin: 0 auto; }
html[data-theme="dark"] .starter-showcase-cta { background: linear-gradient(140deg,rgba(15,23,42,.98),rgba(17,24,39,.98),rgba(30,27,25,.96)); border-color: rgba(96,165,250,.3); }
html[data-theme="dark"] .starter-cta-copy h3,html[data-theme="dark"] .starter-cta-price strong { color: #F8FAFC; }
html[data-theme="dark"] .starter-cta-copy > p,html[data-theme="dark"] .starter-cta-benefits li { color: #CBD5E1; }
html[data-theme="dark"] .starter-cta-action { border-left-color: rgba(96,165,250,.24); }
html[data-theme="dark"] .starter-prompt-examples button { background: rgba(15,23,42,.78); border-color: rgba(96,165,250,.28); color: #DBEAFE; }
@media (max-width: 920px) {
  .starter-showcase-cta { grid-template-columns: 60px minmax(0,1fr); gap: 22px; }
  .starter-cta-icon { width: 58px; height: 58px; border-radius: 17px; }
  .starter-cta-action { grid-column: 1/-1; display: grid; grid-template-columns: minmax(140px,.45fr) minmax(240px,1fr); align-items: center; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(37,99,235,.16); }
  .starter-cta-action small { grid-column: 2; }
}
@media (max-width: 680px) {
  .starter-showcase-cta { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; border-radius: 20px; }
  .starter-cta-icon { width: 52px; height: 52px; }
  .starter-cta-copy h3 { font-size: 1.35rem; }
  .starter-cta-benefits { display: grid; gap: 9px; }
  .starter-cta-action { display: flex; padding-top: 18px; }
  .starter-cta-button { min-height: 58px; padding-inline: 16px; }
  .starter-cta-price { justify-content: flex-start; }
  .starter-cta-price span { order: 2; }
  .starter-cta-action small { text-align: left; }
  .starter-prompt-examples { grid-template-columns: 1fr; }
}

/*
 * Soft-launch feature gates.
 * The selectors intentionally hide preserved markup before public config loads,
 * preventing a flash of Private Consulting or AI Portal UI. Set the matching
 * environment flag to true; app.js adds the enabling body class and the original
 * content/routes become available again. See SOFT_LAUNCH_FEATURE_FLAGS.md.
 */
body:not(.feature-private-consulting-enabled):not(.feature-private-consulting-paid-return) [data-feature="private-consulting"],
body:not(.feature-private-consulting-enabled):not(.feature-private-consulting-paid-return) li:has(> [onclick*="showPage('consulting')"]),
body:not(.feature-private-consulting-enabled):not(.feature-private-consulting-paid-return) li:has(> [href*="consulting.html"]),
body:not(.feature-private-consulting-enabled):not(.feature-private-consulting-paid-return) [onclick*="showPage('consulting')"],
body:not(.feature-private-consulting-enabled):not(.feature-private-consulting-paid-return) [href*="consulting.html"],
body:not(.feature-private-consulting-enabled):not(.feature-private-consulting-paid-return) #page-consulting {
  display: none !important;
}
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [data-feature="ai-portal"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [data-portal-redirect]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [onclick*="openPortalGate"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [onclick*="showPage('portal')"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [onclick*="showPage('membership')"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [onclick*="showPage('studio')"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [href*="portal.html"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [href*="portal-access.html"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) li:has(> [href*="membership.html"]),
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [data-portal-redirect],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) .portal-nav-btn,
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) #portalGateModal,
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [onclick*="openPortalGate"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [onclick*="showPage('portal')"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [onclick*="showPage('membership')"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [onclick*="showPage('studio')"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [href*="portal.html"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [href*="portal-access.html"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) [href*="membership.html"],
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) #page-portal,
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) #page-membership,
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) #page-studio,
body:not(.feature-ai-portal-enabled):not(.feature-ai-portal-paid-return) .portal-access-page {
  display: none !important;
}
body.soft-launch-websites-only [data-feature-copy="full-services"] { display: none !important; }
body:not(.soft-launch-websites-only) [data-soft-launch-only] { display: none !important; }
body.soft-launch-websites-only [data-soft-launch-future="learning-support"],
body.soft-launch-websites-only li:has(> [onclick*="showPage('ask')"]),
body.soft-launch-websites-only li:has(> [onclick*="showPage('lessons')"]),
body.soft-launch-websites-only li:has(> [onclick*="showPage('videos')"]),
body.soft-launch-websites-only li:has(> [onclick*="showPage('chat')"]),
body.soft-launch-websites-only [onclick*="showPage('ask')"],
body.soft-launch-websites-only [onclick*="showPage('lessons')"],
body.soft-launch-websites-only [onclick*="showPage('videos')"],
body.soft-launch-websites-only [onclick*="showPage('chat')"] {
  display: none !important;
}
body.soft-launch-websites-only .grid-3 > .svc-card[onclick*="showPage('websites')"] {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 720px);
}

/* Full-text window for clipped labels and titles */
.altfy-full-text-popover {
  position: fixed;
  z-index: 10050;
  width: max-content;
  max-width: min(360px, calc(100vw - 20px));
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 10px;
  background: rgba(15, 23, 42, .97);
  color: #F8FAFC;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .28);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(.98);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.altfy-full-text-popover.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.altfy-full-text-popover::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; background: inherit; border: inherit; transform: translateX(-50%) rotate(45deg); }
.altfy-full-text-popover[data-placement="top"]::after { bottom: -5px; border-left: 0; border-top: 0; }
.altfy-full-text-popover[data-placement="bottom"]::after { top: -5px; border-right: 0; border-bottom: 0; }
[data-full-text] { cursor: help; }
[data-full-text]:focus-visible { outline: 3px solid rgba(59, 130, 246, .38); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .altfy-full-text-popover { transition: none; } }

/* Refund policy reading layout */
.policy-page-shell { max-width: 1180px; }
.policy-status-card { max-width: 780px; }
.policy-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.policy-sections { min-width: 0; }
.policy-section { scroll-margin-top: 108px; }
.policy-toc-wrap { grid-column: 2; grid-row: 1; min-width: 0; }
.policy-toc { position: sticky; top: 92px; max-height: calc(100vh - 116px); margin: 0; padding: 18px; overflow: auto; border-radius: 16px; background: color-mix(in srgb, var(--white) 94%, var(--blue-light)); box-shadow: 0 14px 34px rgba(15,23,42,.08); opacity: 0; transform: translateX(14px); transition: opacity .34s ease, transform .34s ease, box-shadow .2s ease; }
.policy-toc.is-ready { opacity: 1; transform: translateX(0); }
.policy-toc ol { columns: 1; display: grid; gap: 3px; }
.policy-toc li { margin: 0; }
.policy-toc a { padding: 7px 8px; border-radius: 9px; line-height: 1.35; transition: color .16s ease, background .16s ease, transform .16s ease; }
.policy-toc a:hover { text-decoration: none; background: var(--blue-light); transform: translateX(2px); }
.policy-toc a.is-active { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.policy-toc a.is-active .policy-num { background: var(--blue); color: #fff; }
.policy-toc a .policy-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-light); transition: color .16s ease, background .16s ease; }
.policy-doc .policy-section h2:first-child { padding-top: 26px; border-top: 1px solid var(--gray-200); }
.policy-doc .policy-section:first-child h2 { padding-top: 0; border-top: 0; }
.policy-meta { margin-top: 28px; }
.policy-return { margin-top: 20px; }
html[data-theme="dark"] .policy-toc { background: rgba(15,23,42,.96); border-color: #334155; box-shadow: 0 18px 44px rgba(0,0,0,.26); }
html[data-theme="dark"] .policy-toc a { color: #CBD5E1; }
html[data-theme="dark"] .policy-toc a:hover, html[data-theme="dark"] .policy-toc a.is-active { color: #BFDBFE; background: rgba(59,130,246,.14); }
html[data-theme="dark"] .policy-summary-callout, html[data-theme="dark"] .policy-acceptance-card { background: rgba(30,58,138,.2); border-color: rgba(96,165,250,.32); }
html[data-theme="dark"] .policy-summary-callout p, html[data-theme="dark"] .policy-acceptance-card p, html[data-theme="dark"] .policy-doc p { color: #D7E0EE; }
html[data-theme="dark"] .policy-doc h2, html[data-theme="dark"] .policy-summary-callout .policy-summary-label { color: #F8FAFC; }
@media (max-width: 940px) {
  .policy-reading-layout { grid-template-columns: 1fr; }
  .policy-toc-wrap { grid-column: 1; grid-row: 1; }
  .policy-toc { position: relative; top: auto; max-height: 320px; margin-bottom: 26px; transform: translateY(8px); }
  .policy-toc ol { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) { .policy-toc ol { grid-template-columns: 1fr; } }

/* Public completed-example + Word-template chooser */
.starter-template-library-section { padding: clamp(64px, 8vw, 104px) 0; background: linear-gradient(180deg, var(--white), #F8FAFF); }
.starter-template-library-header { max-width: 860px; margin: 0 auto 28px; }
.starter-template-library-header p { max-width: 780px; }
.starter-template-guide { margin: 20px 0; padding: clamp(20px, 3vw, 30px); border: 1px solid rgba(37,99,235,.2); border-radius: 18px; background: linear-gradient(145deg, rgba(239,246,255,.9), rgba(255,247,237,.72)); box-shadow: 0 14px 34px rgba(15,23,42,.06); }
.starter-template-guide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; }
.starter-template-guide-head h3 { margin: 3px 0 7px; color: var(--blue-dark); font-size: clamp(1.2rem, 2.5vw, 1.55rem); }
.starter-template-guide-head p { max-width: 720px; margin: 0; color: var(--gray-700); line-height: 1.6; }
.starter-template-eyebrow { color: var(--blue); font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.starter-template-filetype { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; background: #1E40AF; color: #fff; font-size: .74rem; font-weight: 900; letter-spacing: .06em; }
.starter-template-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.starter-template-controls .form-group { margin: 0; }
.starter-template-example { display: grid; grid-template-columns: minmax(0,.9fr) minmax(280px,1.1fr); gap: 22px; margin-top: 18px; padding: 20px; border: 1px solid var(--gray-200); border-radius: 14px; background: rgba(255,255,255,.88); }
.starter-template-example-copy > span { color: var(--orange); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.starter-template-example h4 { margin: 5px 0 8px; color: var(--blue-dark); font-size: 1.05rem; }
.starter-template-example p { margin: 0; color: var(--gray-700); line-height: 1.55; }
.starter-template-outline { margin: 0; padding: 0; list-style: none; counter-reset: template-step; display: grid; gap: 7px; }
.starter-template-outline li { counter-increment: template-step; display: flex; align-items: center; gap: 9px; color: var(--gray-700); font-size: .9rem; font-weight: 650; }
.starter-template-outline li::before { content: counter(template-step); display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-light); color: var(--blue); font-size: .75rem; font-weight: 900; }
.starter-template-download-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.starter-template-download-row p { flex: 1 1 360px; max-width: 690px; margin: 0; color: var(--gray-600); font-size: .86rem; line-height: 1.5; }
.starter-template-download-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.starter-template-download { flex: 0 0 auto; align-self: center; width: auto; max-width: 100%; padding: 11px 16px; font-size: .88rem; white-space: nowrap; }
html[data-theme="dark"] .starter-template-library-section { background: linear-gradient(180deg, #0F172A, #111827); }
html[data-theme="dark"] .starter-template-guide { background: linear-gradient(145deg, rgba(30,58,138,.22), rgba(67,32,12,.18)); border-color: #334155; }
html[data-theme="dark"] .starter-template-guide-head p, html[data-theme="dark"] .starter-template-example p, html[data-theme="dark"] .starter-template-outline li, html[data-theme="dark"] .starter-template-download-row p { color: #CBD5E1; }
html[data-theme="dark"] .starter-template-example { background: rgba(15,23,42,.82); border-color: #334155; }
html[data-theme="dark"] .starter-template-example h4 { color: #F8FAFC; }
@media (max-width: 720px) {
  .starter-template-controls, .starter-template-example { grid-template-columns: 1fr; }
  .starter-template-download-row { align-items: stretch; flex-direction: column; }
  .starter-template-download-actions { display: grid; grid-template-columns: 1fr; }
  .starter-template-download { width: 100%; justify-content: center; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .policy-toc { transition: none; } }