*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Quillix palette — taken from the app */
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --navy-mid:   #2a3f7a;
      --navy-soft:  #f0f3fa;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-l:    #f59e0b;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;

      --white:    #ffffff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --bg-tint:  #f5f7fb;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;

      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;

      /* Signature gradient — used everywhere */
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);
      --grad-text: linear-gradient(90deg, var(--cyan-l) 0%, #82bfff 60%, #b89dff 100%);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.55;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

    /* ─────────── NAV (Dynamic Island pill) ─────────── */
    nav {
      position: fixed;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 20px;
      height: 60px;
      padding: 8px 26px 8px 18px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow:
        0 12px 36px rgba(30, 46, 92, 0.14),
        0 2px 10px rgba(30, 46, 92, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
      max-width: calc(100% - 24px);
      transition:
        background 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
        padding 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

    nav.scrolled {
      background: rgba(255, 255, 255, 0.85);
      box-shadow:
        0 14px 44px rgba(30, 46, 92, 0.18),
        0 2px 12px rgba(30, 46, 92, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 0;
      flex-shrink: 0;
    }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark {
      height: 48px;
      width: auto;
      display: block;
      filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28));
      line-height: 1;
    }
    .logo-text {
      font-size: 20px; font-weight: 800;
      background: linear-gradient(135deg, var(--navy), var(--cyan));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; letter-spacing: -0.5px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    /* ─── Section morph island — floating top-left (mirrors auth pills) ─── */
    .section-pill {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 101;
      display: flex;
      align-items: center;
      gap: 11px;
      height: 46px;
      padding: 0 22px 0 18px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow:
        0 12px 36px rgba(30, 46, 92, 0.14),
        0 2px 10px rgba(30, 46, 92, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
      opacity: 0;
      transform: translateX(-12px) scale(0.85);
      pointer-events: none;
      transition:
        opacity 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
        transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1),
        background 0.5s ease;
    }

    .section-pill.active {
      opacity: 1;
      transform: translateX(0) scale(1);
      pointer-events: auto;
    }

    .sp-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--pill-c, var(--cyan-d));
      box-shadow: 0 0 8px var(--pill-c, var(--cyan-d));
      flex-shrink: 0;
      animation: sp-blink 1.8s ease-in-out infinite;
      transition: background 0.5s ease, box-shadow 0.5s ease;
    }

    @keyframes sp-blink {
      0%,100% { opacity: 1; transform: scale(1); }
      50%     { opacity: 0.55; transform: scale(0.7); }
    }

    .sp-text {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      color: var(--pill-c, var(--cyan-d));
      text-transform: uppercase;
      letter-spacing: 0.7px;
      transition: color 0.5s ease, opacity 0.18s ease, transform 0.18s ease;
    }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a {
      font-size: 13px; font-weight: 500; color: var(--ink-soft);
      text-decoration: none; transition: color 0.2s;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }
    .nav-links a:hover { color: var(--navy); }

    /* ─── Auth pills (floating, top-right) ─── */
    .auth-pills {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 101;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 46px;
      padding: 0 22px;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      backdrop-filter: blur(22px) saturate(180%);
    }

    .btn-pill.ghost {
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.55);
      color: var(--navy);
      box-shadow:
        0 12px 36px rgba(30, 46, 92, 0.14),
        0 2px 10px rgba(30, 46, 92, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .btn-pill.ghost:hover {
      background: rgba(255, 255, 255, 0.88);
      transform: translateY(-1px);
    }

    .btn-pill.primary {
      background: var(--amber);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow:
        0 12px 36px rgba(217, 119, 6, 0.32),
        0 2px 10px rgba(217, 119, 6, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .btn-pill.primary:hover {
      background: #b45309;
      transform: translateY(-1px);
      box-shadow:
        0 16px 44px rgba(217, 119, 6, 0.4),
        0 2px 12px rgba(217, 119, 6, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    /* ─────────── BUTTONS (match app's btn styles) ─────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 10px 16px; border-radius: 8px;
      font-family: var(--font); font-size: 13px; font-weight: 600;
      cursor: pointer; text-decoration: none; border: none;
      transition: all 0.18s ease;
      white-space: nowrap;
    }

    /* Primary = amber (matches app .btn-am) */
    .btn-am {
      background: var(--amber);
      color: white;
    }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }

    /* Cyan tinted (matches .btn-cy) */
    .btn-cy {
      background: rgba(43,181,194,0.12);
      color: var(--cyan-d);
    }
    .btn-cy:hover { background: rgba(43,181,194,0.2); }

    /* Ghost on dark */
    .btn-gh-dark {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      color: white;
    }
    .btn-gh-dark:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }

    /* Solid white on dark */
    .btn-white {
      background: white; color: var(--navy);
    }
    .btn-white:hover { transform: translateY(-1px); background: #f8fafc; }

    /* Solid navy */
    .btn-navy {
      background: var(--navy); color: white;
    }
    .btn-navy:hover { background: var(--navy-mid); transform: translateY(-1px); }

    .btn-lg { padding: 13px 22px; font-size: 14px; border-radius: 10px; }

    /* ─────────── HERO ─────────── */
    .hero {
      min-height: 100vh;
      background: var(--grad);
      position: relative;
      overflow: hidden;
      display: flex; align-items: center;
      padding: 100px 0 64px;
    }

    /* Grid texture */
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    }

    /* Glow orbs */
    .hero::after {
      content: '';
      position: absolute;
      top: -20%; right: -10%;
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(43,181,194,0.2) 0%, transparent 60%);
      pointer-events: none;
    }

    .hero-grid {
      display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px;
      align-items: center; position: relative; z-index: 1;
    }

    .hero-content > * { opacity: 0; animation: rise 0.85s cubic-bezier(0.4,0,0.2,1) forwards; }
    .hero-content > :nth-child(1) { animation-delay: 0.05s; }
    .hero-content > :nth-child(2) { animation-delay: 0.15s; }
    .hero-content > :nth-child(3) { animation-delay: 0.28s; }
    .hero-content > :nth-child(4) { animation-delay: 0.42s; }
    .hero-content > :nth-child(5) { animation-delay: 0.55s; }
    .hero-visual { opacity: 0; animation: rise 1s cubic-bezier(0.4,0,0.2,1) 0.3s forwards; }

    @keyframes rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero-pill {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 5px 13px 5px 9px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 100px;
      font-size: 11px; font-weight: 600;
      color: rgba(255,255,255,0.88);
      text-transform: uppercase; letter-spacing: 0.6px;
      margin-bottom: 26px;
    }
    .hero-pill .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan-l);
      flex-shrink: 0;
    }

    h1 {
      font-size: clamp(36px, 4.8vw, 58px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.05;
      color: white;
      margin-bottom: 24px;
    }
    h1 .accent {
      background: var(--grad-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    h1 .strike {
      position: relative;
      color: rgba(255,255,255,0.55);
    }
    h1 .strike::after {
      content: '';
      position: absolute; left: -4px; right: -4px; top: 50%;
      height: 3px; background: var(--amber-l);
      transform: translateY(-50%) rotate(-2deg);
      border-radius: 2px;
      animation: strike-grow 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
    }
    @keyframes strike-grow {
      from { transform: translateY(-50%) rotate(-2deg) scaleX(0); transform-origin: left; }
      to   { transform: translateY(-50%) rotate(-2deg) scaleX(1); transform-origin: left; }
    }

    .hero-sub {
      font-size: 17px; line-height: 1.65;
      color: rgba(255,255,255,0.7);
      max-width: 480px; margin-bottom: 36px;
    }

    .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

    .hero-meta {
      margin-top: 44px; display: flex; gap: 28px; flex-wrap: wrap;
    }
    .meta-stat {
      display: flex; flex-direction: column; gap: 2px;
    }
    .meta-stat strong {
      font-size: 22px; font-weight: 800; font-family: var(--mono);
      color: var(--cyan-l); letter-spacing: -0.5px;
    }
    .meta-stat span {
      font-size: 11px; color: rgba(255,255,255,0.55);
      text-transform: uppercase; letter-spacing: 0.8px;
    }

    /* ─────────── APP MOCKUP IN HERO ─────────── */
    .app {
      background: var(--white);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
      animation: float 7s ease-in-out infinite;
    }
    @keyframes float {
      0%,100% { transform: translateY(0) rotate(0); }
      45% { transform: translateY(-10px) rotate(0.3deg); }
      75% { transform: translateY(-5px) rotate(-0.15deg); }
    }

    .app-bar {
      background: var(--bg-soft);
      border-bottom: 1px solid var(--bdr);
      padding: 10px 14px;
      display: flex; align-items: center; gap: 6px;
    }
    .tdot { width: 10px; height: 10px; border-radius: 50%; }
    .tdot.r { background: #ff5f57; }
    .tdot.y { background: #febc2e; }
    .tdot.g { background: #28c840; }
    .app-bar-url {
      flex: 1; text-align: center; font-size: 11px;
      color: var(--ink-mute); font-family: var(--mono);
    }

    .app-body {
      display: grid;
      grid-template-columns: 160px 1fr;
      height: 310px;
    }

    .app-side {
      background: var(--navy);
      padding: 14px 8px;
    }

    .side-brand {
      font-size: 12px; font-weight: 800;
      background: linear-gradient(135deg, var(--cyan-l), #ffffff);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      padding: 6px 9px; margin-bottom: 12px;
      letter-spacing: -0.5px;
    }

    .side-item {
      display: flex; align-items: center; gap: 7px;
      padding: 6px 9px; border-radius: 7px;
      font-size: 11px; font-weight: 500;
      color: rgba(255,255,255,0.45);
      margin-bottom: 1px;
      border-left: 2px solid transparent;
      transition: all 0.15s;
    }
    .side-item.on {
      background: rgba(43,181,194,0.18);
      color: var(--cyan-l);
      border-left-color: var(--cyan-l);
    }
    .si-icon {
      width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
      background: rgba(255,255,255,0.1);
    }
    .side-item.on .si-icon { background: rgba(77,216,229,0.3); }

    .app-main { padding: 16px; overflow: hidden; }

    .app-h {
      font-size: 13px; font-weight: 700; color: var(--navy);
      margin-bottom: 4px; letter-spacing: -0.3px;
    }
    .app-sh {
      font-size: 10px; color: var(--ink-mute); margin-bottom: 14px;
      font-family: var(--mono);
    }

    .k-row {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 7px;
      margin-bottom: 12px;
    }
    .k-card {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 8px;
      padding: 9px 10px;
      position: relative;
    }
    .k-card.flag::before {
      content: ''; position: absolute; top: 8px; right: 8px;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--cyan);
    }
    .k-l {
      font-size: 9px; font-weight: 600; color: var(--ink-mute);
      text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
    }
    .k-v {
      font-size: 14px; font-weight: 700; font-family: var(--mono);
      letter-spacing: -0.3px;
    }
    .k-v.c { color: var(--cyan-d); }
    .k-v.g { color: var(--green); }
    .k-v.a { color: var(--amber); }

    .chart {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 8px;
      padding: 10px 10px 8px;
    }
    .chart-h {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 8px;
    }
    .chart-t {
      font-size: 10px; font-weight: 600; color: var(--ink-soft);
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .chart-tag {
      font-size: 8px; font-family: var(--mono); font-weight: 700;
      padding: 2px 6px; border-radius: 4px;
      background: var(--cyan-tint); color: var(--cyan-d);
    }
    .bars {
      display: flex; align-items: flex-end; gap: 3px; height: 84px;
    }
    .bar {
      flex: 1; border-radius: 3px 3px 0 0;
      background: linear-gradient(180deg, var(--cyan), rgba(43,181,194,0.2));
      animation: grow 1.1s cubic-bezier(0.34,1.4,0.64,1) both;
      transform-origin: bottom;
    }
    .bar.peak {
      background: linear-gradient(180deg, var(--navy), rgba(30,46,92,0.2));
    }
    @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

    /* ────── DIAGONAL DIVIDER ────── */
    .div-bottom {
      display: block; width: 100%; height: 80px;
      background: var(--bg);
      position: relative;
      margin-top: -1px;
    }

    /* ─────────── THE PAIN SECTION ─────────── */
    .pain {
      padding: 96px 0;
      background: var(--bg);
    }

    .section-h { margin-bottom: 56px; }

    .eyebrow {
      display: inline-block;
      padding: 4px 10px;
      background: var(--cyan-tint);
      color: var(--cyan-d);
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px;
      border-radius: 5px;
      margin-bottom: 16px;
    }
    .eyebrow.red    { background: rgba(220,38,38,0.08); color: var(--red); }
    .eyebrow.green  { background: rgba(5,150,105,0.08); color: var(--green); }
    .eyebrow.amber  { background: var(--amber-tint); color: var(--amber); }
    .eyebrow.violet { background: var(--violet-tint); color: var(--violet); }

    h2 {
      font-size: clamp(30px, 3.5vw, 44px);
      font-weight: 800;
      letter-spacing: -1px; line-height: 1.12;
      color: var(--navy);
      margin-bottom: 14px;
      max-width: 720px;
    }

    .section-sub {
      font-size: 16px; color: var(--ink-soft); line-height: 1.65;
      max-width: 560px;
    }

    /* Workflow card grid */
    .week {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 20px;
    }

    .day-card {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 22px 20px;
      position: relative;
      transition: all 0.3s;
    }
    .day-card:hover {
      border-color: rgba(220,38,38,0.3);
      background: rgba(220,38,38,0.015);
    }

    .day-label {
      font-family: var(--mono); font-size: 10px; font-weight: 700;
      color: var(--ink-mute);
      text-transform: uppercase; letter-spacing: 1px;
      margin-bottom: 10px;
    }
    .day-h {
      font-size: 15px; font-weight: 700; color: var(--navy);
      margin-bottom: 8px; letter-spacing: -0.3px; line-height: 1.3;
    }
    .day-p {
      font-size: 13px; color: var(--ink-soft); line-height: 1.55;
    }
    .day-tag {
      display: inline-flex; align-items: center; gap: 5px;
      margin-top: 14px;
      padding: 3px 8px;
      background: rgba(220,38,38,0.08);
      color: var(--red);
      font-size: 10px; font-weight: 700;
      font-family: var(--mono);
      border-radius: 5px;
    }
    .day-tag::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
    }

    .saturday-line {
      margin-top: 36px; padding: 20px 24px;
      background: linear-gradient(135deg, rgba(220,38,38,0.05), rgba(220,38,38,0.02));
      border: 1px solid rgba(220,38,38,0.15);
      border-radius: 12px;
      display: flex; align-items: center; gap: 16px;
      font-size: 15px; color: var(--navy);
      font-weight: 500;
    }
    .saturday-line strong { font-weight: 800; color: var(--red); }
    .sat-icon {
      width: 36px; height: 36px; flex-shrink: 0;
      background: rgba(220,38,38,0.1);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--red); font-weight: 800; font-family: var(--mono); font-size: 14px;
    }

    /* ─────────── THE QUILLIX WAY ─────────── */
    .solution {
      padding: 96px 0;
      background: var(--bg-soft);
      border-top: 1px solid var(--bdr-soft);
      border-bottom: 1px solid var(--bdr-soft);
    }

    .sol-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
    }

    .sol-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
    .sol-list li {
      display: flex; gap: 14px; align-items: flex-start;
      font-size: 14px; color: var(--ink-soft); line-height: 1.6;
    }
    .sol-list li strong { display: block; color: var(--navy); font-weight: 700; margin-bottom: 2px; font-size: 15px; }
    .sol-icon {
      width: 32px; height: 32px; flex-shrink: 0;
      background: var(--cyan-tint);
      border: 1px solid rgba(43,181,194,0.2);
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      color: var(--cyan-d); font-weight: 800; font-family: var(--mono); font-size: 12px;
    }

    .sol-mock {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(30,46,92,0.04);
    }

    .gstr-block {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      border-radius: 10px;
      margin-bottom: 8px;
      transition: all 0.2s;
    }
    .gstr-block:hover {
      transform: translateX(2px);
    }
    .gstr-b2b   { background: rgba(43,181,194,0.08); border: 1px solid rgba(43,181,194,0.2); }
    .gstr-b2cs  { background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.2); }
    .gstr-b2cl  { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); }
    .gstr-hsn   { background: rgba(5,150,105,0.08);  border: 1px solid rgba(5,150,105,0.2); }
    .gstr-tag {
      font-family: var(--mono); font-weight: 700; font-size: 10px;
      padding: 3px 8px; border-radius: 5px;
      flex-shrink: 0; letter-spacing: 0.3px;
    }
    .gstr-b2b   .gstr-tag { background: var(--cyan); color: white; }
    .gstr-b2cs  .gstr-tag { background: var(--violet); color: white; }
    .gstr-b2cl  .gstr-tag { background: var(--amber); color: white; }
    .gstr-hsn   .gstr-tag { background: var(--green); color: white; }
    .gstr-label { flex: 1; font-size: 13px; color: var(--navy); font-weight: 500; }
    .gstr-count {
      font-family: var(--mono); font-weight: 700; font-size: 13px;
      color: var(--ink); flex-shrink: 0;
    }

    .gstr-export {
      margin-top: 16px; padding: 12px 14px;
      background: var(--navy);
      color: var(--cyan-l);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: space-between;
      font-family: var(--mono); font-size: 12px; font-weight: 600;
    }
    .gstr-export .dl {
      background: var(--cyan); color: white;
      padding: 5px 12px; border-radius: 6px;
      font-size: 11px; font-weight: 700;
    }

    /* ─────────── FEATURES ─────────── */
    .feats { padding: 96px 0; background: var(--bg); }

    .feat-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    }

    .feat {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 24px;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      position: relative;
    }
    .feat:hover {
      border-color: var(--feat-c, var(--cyan));
      transform: translateY(-3px);
    }
    .feat-icon {
      width: 38px; height: 38px; border-radius: 10px;
      background: var(--feat-bg, var(--cyan-tint));
      color: var(--feat-c, var(--cyan-d));
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-family: var(--mono); font-size: 14px;
      margin-bottom: 16px;
    }
    .feat-h {
      font-size: 16px; font-weight: 700; color: var(--navy);
      letter-spacing: -0.3px; margin-bottom: 8px;
    }
    .feat-p {
      font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
    }
    .feat-tag {
      display: inline-block;
      margin-top: 14px;
      padding: 3px 8px;
      background: var(--feat-bg, var(--cyan-tint));
      color: var(--feat-c, var(--cyan-d));
      font-family: var(--mono); font-size: 10px; font-weight: 600;
      border-radius: 5px;
      letter-spacing: 0.3px;
    }

    /* ─────────── ROLES ─────────── */
    .roles { padding: 96px 0; background: var(--bg-soft); border-top: 1px solid var(--bdr-soft); border-bottom: 1px solid var(--bdr-soft); }

    .role-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    }

    .role {
      background: var(--white);
      border-radius: 14px;
      padding: 28px;
      border: 1px solid var(--bdr);
      transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      overflow: hidden;
    }
    .role:hover {
      transform: translateY(-4px);
      border-color: var(--role-c, var(--cyan));
    }

    .role::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: var(--role-c, var(--cyan));
    }

    .r-aud { --role-c: var(--cyan); --role-bg: rgba(43,181,194,0.08); --role-d: var(--cyan-d); }
    .r-adm { --role-c: var(--amber); --role-bg: var(--amber-tint); --role-d: var(--amber); }
    .r-usr { --role-c: var(--violet); --role-bg: var(--violet-tint); --role-d: var(--violet); }

    .r-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 100px;
      background: var(--role-bg); color: var(--role-d);
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px;
      margin-bottom: 14px;
    }
    .r-h {
      font-size: 20px; font-weight: 800;
      letter-spacing: -0.5px; color: var(--navy);
      margin-bottom: 8px;
    }
    .r-p {
      font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
      margin-bottom: 18px;
    }

    .r-perms { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .r-perms li {
      font-size: 12.5px; color: var(--ink-soft);
      display: flex; align-items: flex-start; gap: 9px; line-height: 1.5;
    }
    .pchk {
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 8px; font-weight: 700; margin-top: 2px;
    }
    .pchk.y {
      background: var(--role-bg);
      color: var(--role-d);
    }
    .pchk.n { background: #f0f1f5; color: var(--ink-mute); }

    /* ─────────── HOW IT WORKS ─────────── */
    .how { padding: 96px 0; background: var(--bg); }

    .step-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      position: relative;
    }
    .step {
      background: var(--white);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 26px;
      position: relative;
    }
    .step-n {
      font-family: var(--mono); font-weight: 700; font-size: 11px;
      color: var(--cyan-d);
      letter-spacing: 1px; margin-bottom: 14px;
      display: inline-block;
      padding: 3px 8px;
      background: var(--cyan-tint);
      border-radius: 5px;
    }
    .step-h {
      font-size: 17px; font-weight: 700; color: var(--navy);
      letter-spacing: -0.3px; margin-bottom: 10px;
    }
    .step-p {
      font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
    }

    /* ─────────── WHAT'S NEXT — parcel skids in from left, carousel reveals features ─────────── */
    .coming {
      padding: 104px 0 130px;
      background: var(--bg-soft);
      border-top: 1px solid var(--bdr-soft);
      position: relative;
      overflow: hidden;
    }

    /* ─── Parcel intro (smaller, plays once, enters from LEFT) ─── */
    .parcel-intro {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 36px 0 56px;
      perspective: 1400px;
      height: 130px;
    }

    .parcel-wrap {
      position: relative;
      transform-style: preserve-3d;
    }

    .parcel {
      position: relative;
      width: 150px;
      height: 110px;
      transform-style: preserve-3d;
      opacity: 0;
      transform: translateX(-900px) rotate(-22deg) scale(0.45);
      filter: blur(10px);
      will-change: transform, opacity, filter;
    }

    .parcel-intro.go .parcel {
      animation: parcel-skid 1.8s cubic-bezier(0.22, 1.0, 0.36, 1) forwards;
    }

    /* Smoother skid with gradual blur fade — enters from LEFT */
    @keyframes parcel-skid {
      0% {
        opacity: 0;
        transform: translateX(-900px) rotate(-22deg) scale(0.45);
        filter: blur(10px);
      }
      12% {
        opacity: 0.4;
        filter: blur(7px);
      }
      24% {
        opacity: 0.85;
        filter: blur(3.5px);
      }
      38% {
        opacity: 1;
        transform: translateX(70px) rotate(13deg) scale(1.16);
        filter: blur(1px);
      }
      50% {
        filter: blur(0);
      }
      62% {
        transform: translateX(-30px) rotate(-7deg) scale(0.94);
      }
      76% {
        transform: translateX(13px) rotate(3deg) scale(1.03);
      }
      88% {
        transform: translateX(-4px) rotate(-1deg) scale(0.99);
      }
      100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
        filter: blur(0);
      }
    }

    .parcel-body {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, #d4a574 0%, #b8895a 100%);
      border-radius: 8px;
      box-shadow:
        0 22px 44px rgba(120, 75, 35, 0.32),
        inset 0 -4px 8px rgba(0,0,0,0.18),
        inset 0 2px 4px rgba(255,255,255,0.25),
        inset 4px 0 8px rgba(0,0,0,0.06),
        inset -4px 0 8px rgba(0,0,0,0.06);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .parcel-body::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-d) 100%);
      box-shadow: 0 0 18px rgba(43,181,194,0.5);
    }

    .parcel-label {
      position: relative;
      z-index: 1;
      color: white;
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    }

    .parcel-lid {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 22px;
      background: linear-gradient(180deg, #e0b380 0%, #c89e6c 100%);
      border-radius: 8px 8px 0 0;
      transform-origin: top center;
      transform: rotateX(0deg);
      box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.18),
        inset 0 2px 4px rgba(255,255,255,0.22);
      overflow: hidden;
      z-index: 2;
    }

    .parcel-lid::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-d) 100%);
    }

    .parcel-intro.go .parcel-lid {
      animation: parcel-lid 1s cubic-bezier(0.34, 1.4, 0.5, 1) 1.5s forwards;
    }

    @keyframes parcel-lid {
      0%   { transform: rotateX(0deg); }
      30%  { transform: rotateX(18deg); }
      100% { transform: rotateX(-165deg); }
    }

    .parcel-glow {
      position: absolute;
      top: -10px; left: -16px; right: -16px;
      height: 38px;
      background: radial-gradient(ellipse, rgba(77,216,229,0.8), transparent 70%);
      opacity: 0;
      filter: blur(8px);
      z-index: 1;
    }

    .parcel-intro.go .parcel-glow {
      animation: parcel-glow 1.6s ease 1.95s forwards;
    }

    @keyframes parcel-glow {
      0%   { opacity: 0; transform: scaleY(0.3) scaleX(0.7); }
      35%  { opacity: 1; transform: scaleY(1.5) scaleX(1.1); }
      100% { opacity: 0; transform: scaleY(2.5) scaleX(1.4); }
    }

    .parcel-shadow {
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%) scaleX(0.4);
      width: 130px; height: 22px;
      background: radial-gradient(ellipse, rgba(30,46,92,0.22), transparent 70%);
      filter: blur(5px);
      opacity: 0;
    }

    .parcel-intro.go .parcel-shadow {
      animation: parcel-shadow 0.6s ease 1.3s forwards;
    }

    @keyframes parcel-shadow {
      0%   { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
      100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
    }

    /* ─── Skid marks (drag behind the parcel as it brakes) ─── */
    .skid-trails {
      position: absolute;
      left: calc(50% - 280px);
      width: 280px;
      bottom: -8px;
      height: 30px;
      pointer-events: none;
      opacity: 0;
    }

    .parcel-intro.go .skid-trails { animation: trails-show 1.3s ease 0.55s forwards; }

    @keyframes trails-show {
      0%   { opacity: 0; }
      25%  { opacity: 1; }
      85%  { opacity: 0.6; }
      100% { opacity: 0; }
    }

    .skid-mark {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, rgba(80,55,30,0.35) 40%, rgba(80,55,30,0.55) 90%, transparent 100%);
      border-radius: 1px;
      transform-origin: left center;
      transform: scaleX(0);
    }

    .skid-mark.s1 { right: 0;  bottom: 8px;  width: 220px; }
    .skid-mark.s2 { right: 4px;  bottom: 14px; width: 180px; }
    .skid-mark.s3 { right: 12px; bottom: 2px;  width: 150px; }

    .parcel-intro.go .skid-mark {
      animation: skid-draw 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    }
    .parcel-intro.go .skid-mark.s2 { animation-delay: 0.6s; }
    .parcel-intro.go .skid-mark.s3 { animation-delay: 0.7s; }

    @keyframes skid-draw {
      0%   { transform: scaleX(0); }
      100% { transform: scaleX(1); }
    }

    /* ─── Smoke puffs (kick up dust around the skid) ─── */
    .smoke-puff {
      position: absolute;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.92), rgba(220,220,220,0.55) 50%, transparent 75%);
      opacity: 0;
      filter: blur(5px);
      pointer-events: none;
      bottom: -16px;
      will-change: transform, opacity;
    }

    .smoke-puff.p1 { left: -90px; }
    .smoke-puff.p2 { left: -55px; }
    .smoke-puff.p3 { left: -20px; }
    .smoke-puff.p4 { left: 18px; }
    .smoke-puff.p5 { left: 50px; width: 28px; height: 28px; }

    .parcel-intro.go .smoke-puff {
      animation: smoke-rise 1.6s ease-out forwards;
    }

    .parcel-intro.go .smoke-puff.p1 { animation-delay: 0.55s; }
    .parcel-intro.go .smoke-puff.p2 { animation-delay: 0.65s; }
    .parcel-intro.go .smoke-puff.p3 { animation-delay: 0.8s; }
    .parcel-intro.go .smoke-puff.p4 { animation-delay: 0.95s; }
    .parcel-intro.go .smoke-puff.p5 { animation-delay: 1.05s; }

    @keyframes smoke-rise {
      0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
      25%  { opacity: 0.85; transform: translate(8px, -16px) scale(1); }
      65%  { opacity: 0.45; transform: translate(18px, -36px) scale(1.7); }
      100% { opacity: 0; transform: translate(28px, -60px) scale(2.4); }
    }

    /* ─── Feature carousel (the big hero slides) ─── */
    .feature-carousel {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .parcel-intro.go ~ .feature-carousel {
      animation: carousel-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.3s forwards;
    }

    @keyframes carousel-in {
      to { opacity: 1; transform: translateY(0); }
    }

    .carousel-frame {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: var(--grad);
      box-shadow: 0 30px 80px rgba(30, 46, 92, 0.25);
    }

    .carousel-frame::before {
      content: '';
      position: absolute;
      top: -100px; right: -60px;
      width: 380px; height: 380px;
      background: radial-gradient(circle, rgba(124,92,255,0.22), transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    .carousel-frame::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -40px;
      width: 240px; height: 240px;
      background: radial-gradient(circle, rgba(43,181,194,0.18), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .carousel-track {
      display: flex;
      width: 600%; /* 4 real slides + 2 clones (for infinite wrap) */
      transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .feat-slide {
      flex: 0 0 calc(100% / 6);
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 56px;
      align-items: center;
      padding: 64px 80px;
      min-height: 500px;
      position: relative;
      z-index: 1;
    }

    .slide-l { position: relative; }

    .slide-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 12px 4px 9px;
      background: rgba(124,92,255,0.18);
      border: 1px solid rgba(124,92,255,0.35);
      border-radius: 100px;
      font-size: 10px;
      font-weight: 700;
      color: #b89dff;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 22px;
    }

    .slide-pill .pdot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #b89dff;
      animation: pulse-ring 2s ease-in-out infinite;
    }

    @keyframes pulse-ring {
      0%  { box-shadow: 0 0 0 0 rgba(184,157,255,0.7); }
      70% { box-shadow: 0 0 0 8px rgba(184,157,255,0); }
      100%{ box-shadow: 0 0 0 0 rgba(184,157,255,0); }
    }

    .slide-h {
      font-size: clamp(28px, 2.8vw, 38px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -1px;
      color: white;
      margin-bottom: 16px;
    }

    .slide-h em {
      font-style: normal;
      background: var(--grad-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .slide-p {
      font-size: 15px;
      color: rgba(255,255,255,0.72);
      line-height: 1.65;
      margin-bottom: 22px;
      max-width: 460px;
    }

    .slide-bullets {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 22px;
    }

    .slide-bullets li {
      font-size: 13.5px;
      color: rgba(255,255,255,0.75);
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .slide-bullets li::before {
      content: '';
      width: 16px; height: 16px;
      border-radius: 50%;
      background: rgba(77,216,229,0.18);
      border: 1px solid rgba(77,216,229,0.4);
      flex-shrink: 0;
      margin-top: 2px;
      background-image: radial-gradient(circle, var(--cyan-l) 30%, transparent 32%);
    }

    .slide-meta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }

    .slide-meta .tlt {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 9px;
      border-radius: 5px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.85);
    }

    .slide-r {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* ─── PHONE visual (Sales OCR + Purchase OCR) ─── */
    .phone-vis { position: relative; }
    .phone {
      width: 200px;
      background: var(--navy-deep);
      border-radius: 28px;
      padding: 18px 14px;
      box-shadow: 0 24px 56px rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.06);
      animation: float 5.5s ease-in-out 0.8s infinite;
    }

    .ph-notch {
      width: 52px; height: 6px;
      background: rgba(255,255,255,0.15);
      border-radius: 3px;
      margin: 0 auto 14px;
    }

    .ph-label {
      font-size: 9px; font-family: var(--mono); font-weight: 600;
      color: rgba(255,255,255,0.4);
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }

    .scan-area {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 14px 12px;
      position: relative;
      overflow: hidden;
    }

    .scan-beam {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan-l), transparent);
      box-shadow: 0 0 8px rgba(77,216,229,0.5);
    }

    .feat-slide.playing .scan-beam {
      animation: scan-down 2.4s ease-in-out infinite;
    }

    @keyframes scan-down {
      0%   { top: 0; opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    .iln {
      height: 7px;
      background: rgba(255,255,255,0.08);
      border-radius: 3px;
      margin-bottom: 6px;
    }
    .iln:last-child { margin-bottom: 0; }
    .iln.s { width: 55%; }
    .iln.m { width: 78%; }
    .iln.hl {
      background: rgba(43,181,194,0.45);
    }
    .feat-slide.playing .iln.hl {
      animation: hl 2s ease-in-out infinite;
    }

    @keyframes hl {
      0%,100% { background: rgba(43,181,194,0.35); }
      50%      { background: rgba(43,181,194,0.7); }
    }

    /* Purchase OCR variant */
    .iln.vendor { background: rgba(245,158,11,0.45); }
    .feat-slide.playing .iln.vendor {
      animation: hl-vendor 2s ease-in-out infinite;
    }
    @keyframes hl-vendor {
      0%,100% { background: rgba(245,158,11,0.35); }
      50%      { background: rgba(245,158,11,0.7); }
    }

    .ph-tags { display: flex; gap: 5px; margin-top: 12px; }
    .ph-tag {
      flex: 1; padding: 5px 2px;
      border-radius: 5px;
      text-align: center;
      font-size: 8px; font-family: var(--mono); font-weight: 700;
    }
    .pt-c { background: rgba(43,181,194,0.2); color: var(--cyan-l); border: 1px solid rgba(43,181,194,0.3); }
    .pt-g { background: rgba(5,150,105,0.2);  color: #34d399; border: 1px solid rgba(5,150,105,0.3); }
    .pt-v { background: rgba(124,92,255,0.2); color: #b89dff; border: 1px solid rgba(124,92,255,0.3); }
    .pt-a { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }

    .ai-tag {
      position: absolute; right: -22px; top: 34px;
      background: var(--violet);
      border-radius: 9px;
      padding: 7px 11px;
      font-size: 10px; font-weight: 700; font-family: var(--mono);
      color: white;
      box-shadow: 0 6px 18px rgba(124,92,255,0.55);
      animation: float 4s ease-in-out 1.2s infinite;
    }

    /* ─── RECO visual (2A & 2B vs Books) ─── */
    .reco-vis {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 18px;
      width: 100%;
      max-width: 340px;
      position: relative;
    }

    .reco-head-row {
      display: grid;
      grid-template-columns: 1fr 30px 1fr;
      gap: 8px;
      margin-bottom: 12px;
      align-items: center;
    }

    .reco-h {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.8px;
      text-align: center;
      padding: 4px 6px;
      background: rgba(255,255,255,0.05);
      border-radius: 5px;
    }

    .reco-vs {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      color: rgba(255,255,255,0.4);
      text-align: center;
    }

    .reco-row {
      display: grid;
      grid-template-columns: 1fr 30px 1fr;
      gap: 8px;
      align-items: center;
      margin-bottom: 7px;
      opacity: 0;
      transform: translateX(-10px);
    }

    .feat-slide.playing .reco-row {
      animation: reco-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .feat-slide.playing .reco-row:nth-child(2) { animation-delay: 0.2s; }
    .feat-slide.playing .reco-row:nth-child(3) { animation-delay: 0.4s; }
    .feat-slide.playing .reco-row:nth-child(4) { animation-delay: 0.6s; }
    .feat-slide.playing .reco-row:nth-child(5) { animation-delay: 0.8s; }

    @keyframes reco-in {
      to { opacity: 1; transform: translateX(0); }
    }

    .reco-cell {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
    }

    .reco-cell .v {
      font-family: var(--mono);
      font-weight: 700;
      color: rgba(255,255,255,0.9);
    }

    .reco-cell .n {
      color: rgba(255,255,255,0.65);
      font-size: 10px;
    }

    .reco-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px; height: 18px;
      border-radius: 50%;
      font-size: 10px;
      font-family: var(--mono);
      font-weight: 800;
      margin: 0 auto;
    }

    .reco-link.ok {
      background: rgba(5,150,105,0.25);
      color: #34d399;
      border: 1px solid rgba(5,150,105,0.4);
    }

    .reco-link.warn {
      background: rgba(245,158,11,0.25);
      color: #fbbf24;
      border: 1px solid rgba(245,158,11,0.4);
    }

    .reco-row.warn .reco-cell {
      border-color: rgba(245,158,11,0.35);
      background: rgba(245,158,11,0.06);
    }

    .reco-summary {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex;
      gap: 8px;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
    }

    .reco-stat {
      flex: 1;
      padding: 6px;
      border-radius: 5px;
      text-align: center;
    }
    .reco-stat.ok { background: rgba(5,150,105,0.15); color: #34d399; }
    .reco-stat.warn { background: rgba(245,158,11,0.15); color: #fbbf24; }

    /* ─── 3B form visual ─── */
    .form-vis {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 20px;
      width: 100%;
      max-width: 320px;
    }

    .form-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .form-title {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 800;
      color: white;
      letter-spacing: 0.5px;
    }

    .form-period {
      font-family: var(--mono);
      font-size: 9px;
      color: rgba(255,255,255,0.5);
    }

    .form-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      opacity: 0;
      transform: translateY(8px);
    }

    .feat-slide.playing .form-row {
      animation: form-fill 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .feat-slide.playing .form-row:nth-child(2) { animation-delay: 0.25s; }
    .feat-slide.playing .form-row:nth-child(3) { animation-delay: 0.5s; }
    .feat-slide.playing .form-row:nth-child(4) { animation-delay: 0.75s; }
    .feat-slide.playing .form-row.total { animation-delay: 1.05s; }

    @keyframes form-fill {
      to { opacity: 1; transform: translateY(0); }
    }

    .form-label {
      font-size: 11px;
      color: rgba(255,255,255,0.6);
    }

    .form-value {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      color: rgba(255,255,255,0.92);
    }

    .form-row.total {
      margin-top: 8px;
      padding: 12px 14px;
      background: rgba(43,181,194,0.12);
      border: 1px solid rgba(43,181,194,0.3);
      border-radius: 8px;
    }

    .form-row.total .form-label {
      color: var(--cyan-l);
      font-weight: 700;
      font-size: 12px;
    }

    .form-row.total .form-value {
      color: var(--cyan-l);
      font-size: 14px;
    }

    .form-ready {
      margin-top: 12px;
      padding: 8px 12px;
      background: rgba(5,150,105,0.18);
      border: 1px solid rgba(5,150,105,0.35);
      border-radius: 7px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      color: #34d399;
      text-align: center;
      opacity: 0;
    }

    .feat-slide.playing .form-ready {
      animation: form-fill 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
    }

    /* ─── Carousel controls ─── */
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.22);
      color: white;
      cursor: pointer;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      backdrop-filter: blur(8px);
    }

    .carousel-arrow:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.4);
      transform: translateY(-50%) scale(1.08);
    }

    .carousel-arrow:active { transform: translateY(-50%) scale(0.95); }

    .carousel-arrow.prev { left: 18px; }
    .carousel-arrow.next { right: 18px; }

    .carousel-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
    }

    .dot {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: transparent;
      border: 1px solid var(--bdr);
      border-radius: 100px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: var(--font);
    }

    .dot::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--bdr);
      transition: background 0.3s, transform 0.3s;
    }

    .dot:hover {
      background: var(--white);
      border-color: var(--violet);
      color: var(--navy);
    }
    .dot:hover::before { background: var(--violet); }

    .dot.active {
      background: var(--violet);
      border-color: var(--violet);
      color: white;
    }
    .dot.active::before {
      background: white;
      transform: scale(1.2);
    }

    /* ─── Responsive ─── */
    @media (max-width: 900px) {
      .feat-slide { grid-template-columns: 1fr; gap: 40px; padding: 48px 56px; min-height: auto; }
      .slide-r { order: -1; }
      .carousel-arrow { width: 38px; height: 38px; }
      .carousel-arrow.prev { left: 10px; }
      .carousel-arrow.next { right: 10px; }
    }

    @media (max-width: 720px) {
      .parcel { width: 130px; height: 96px; }
      .parcel-lid { height: 20px; }
      .feat-slide { padding: 40px 28px; }
      .slide-h { font-size: 26px; }
      .dot span { display: none; }
      .dot { padding: 8px; }
      .carousel-arrow { width: 34px; height: 34px; top: auto; bottom: 16px; transform: none; }
      .carousel-arrow:hover { transform: scale(1.08); }
      .carousel-arrow.prev { left: 16px; }
      .carousel-arrow.next { right: 16px; }
    }

    /* ─────────── SIGN-UP MODAL ─────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(13, 20, 40, 0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-card {
      background: white;
      border-radius: 22px;
      padding: 36px 32px 28px;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 30px 80px rgba(13, 20, 40, 0.3), 0 0 0 1px rgba(255,255,255,0.6);
      position: relative;
      transform: translateY(20px) scale(0.96);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s ease;
    }

    .modal-overlay.open .modal-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 14px; right: 14px;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--bg-soft);
      border: 1px solid var(--bdr);
      color: var(--ink-soft);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .modal-close:hover {
      background: var(--bdr-soft);
      color: var(--navy);
    }

    .modal-h {
      text-align: center;
      margin-bottom: 24px;
    }

    .modal-logo {
      height: 76px;
      width: auto;
      display: block;
      margin: 0 auto 16px;
      filter: drop-shadow(0 4px 14px rgba(43,181,194,0.32));
    }

    .modal-h h3 {
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.6px;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .modal-h p {
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.5;
    }

    .btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 12px 16px;
      background: white;
      border: 1.5px solid var(--bdr);
      border-radius: 10px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
      margin-bottom: 16px;
    }

    .btn-google:hover {
      border-color: var(--navy);
      background: var(--bg-soft);
    }

    .btn-google svg { flex-shrink: 0; }

    .modal-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0;
    }

    .modal-divider::before,
    .modal-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--bdr);
    }

    .modal-divider span {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-mute);
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .signup-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .signup-form .form-field input {
      padding: 12px 14px;
      border: 1.5px solid var(--bdr);
      border-radius: 10px;
      font-size: 14px;
      font-family: var(--font);
      color: var(--ink);
      background: var(--bg-soft);
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .signup-form .form-field input:focus {
      outline: none;
      border-color: var(--cyan);
      background: white;
      box-shadow: 0 0 0 3px rgba(43, 181, 194, 0.15);
    }

    .signup-form .btn {
      width: 100%;
      justify-content: center;
      padding: 12px 20px;
    }

    .modal-footer {
      text-align: center;
      font-size: 13px;
      color: var(--ink-soft);
      margin-top: 20px;
    }

    .modal-footer a {
      color: var(--cyan-d);
      text-decoration: none;
      font-weight: 600;
    }

    .modal-footer a:hover { text-decoration: underline; }

    .modal-terms {
      text-align: center;
      font-size: 11px;
      color: var(--ink-mute);
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--bdr-soft);
      line-height: 1.55;
    }

    .modal-terms a {
      color: var(--ink-soft);
      text-decoration: underline;
    }

    /* ─────────── PRICING ─────────── */
    .pricing { padding: 100px 0; background: var(--bg); }

    .pricing-grid {
      /* Auto-flow flex so 1 / 2 / 3+ cards all centre themselves.
         The earlier 3-column grid left-aligned 2 cards inside a fixed
         3-track template, leaving a gaping right column.
         Gap is generous (40px) so the cards breathe; was 18px which read
         as cramped at 2-card width. */
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto;
      align-items: stretch;
    }
    @media (max-width: 720px) {
      .pricing-grid { gap: 22px; }
    }
    .pricing-grid > .price-card {
      /* Each card grows to fill the row but caps at one-third of the
         max grid width so a row of 3 still matches the old layout. */
      flex: 1 1 280px;
      max-width: 320px;
    }

    .price-card {
      background: white;
      border: 1.5px solid var(--bdr);
      border-radius: 18px;
      padding: 36px 30px 32px;
      position: relative;
      display: flex;
      flex-direction: column;
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s, box-shadow 0.35s;
    }

    .price-card:hover {
      transform: translateY(-4px);
      border-color: var(--cyan);
      box-shadow: var(--shadow-lg);
    }

    .price-card.featured {
      border-color: var(--amber);
      background: linear-gradient(180deg, #ffffff 0%, var(--amber-tint) 130%);
      box-shadow: 0 12px 36px rgba(217, 119, 6, 0.12);
    }
    .price-card.featured:hover { border-color: var(--amber); }

    .price-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px 14px;
      background: var(--navy);
      color: white;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      border-radius: 100px;
      box-shadow: 0 4px 12px rgba(30, 46, 92, 0.18);
    }

    .price-card.featured .price-badge {
      background: var(--amber);
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.32);
    }

    .price-tier {
      font-size: 13px;
      font-weight: 700;
      color: var(--cyan-d);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 10px;
    }

    .price-card.featured .price-tier { color: var(--amber); }

    .price-num {
      font-size: 44px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .price-num .unit {
      font-size: 14px;
      color: var(--ink-mute);
      font-weight: 500;
      margin-left: 4px;
      letter-spacing: 0;
    }

    .price-desc {
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.55;
      margin-bottom: 24px;
      min-height: 38px;
    }

    .price-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
      margin-bottom: 24px;
      flex: 1;
    }

    .price-features li {
      font-size: 13.5px;
      color: var(--ink-soft);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .price-features li::before {
      content: '✓';
      color: var(--green);
      font-weight: 800;
      flex-shrink: 0;
      font-size: 14px;
      line-height: 1.3;
    }

    /* Visual separation between the features list and the CTA button */
    .price-cta {
      padding-top: 22px;
      margin-top: auto;
      border-top: 1px solid var(--bdr-soft);
    }

    .price-card.featured .price-cta {
      border-top-color: rgba(217, 119, 6, 0.2);
    }

    .price-card .btn {
      width: 100%;
      justify-content: center;
    }

    .pricing-note {
      text-align: center;
      margin-top: 40px;
      font-size: 13px;
      color: var(--ink-mute);
    }
    .pricing-note strong { color: var(--navy); font-weight: 600; }

    @media (max-width: 900px) {
      .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
    }

    /* ─────────── BLOG PREVIEW ─────────── */
    .blog-preview {
      padding: 100px 0;
      background: var(--bg-soft);
      border-top: 1px solid var(--bdr-soft);
      border-bottom: 1px solid var(--bdr-soft);
    }

    .blog-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 48px;
      gap: 24px;
      flex-wrap: wrap;
    }

    .blog-head h2 { margin-bottom: 8px; }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .blog-card {
      display: flex;
      flex-direction: column;
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 16px;
      padding: 26px;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }

    .blog-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--blog-c, var(--cyan));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }

    .blog-card:hover {
      transform: translateY(-4px);
      border-color: var(--blog-c, var(--cyan));
      box-shadow: var(--shadow);
    }

    .blog-card:hover::before { transform: scaleX(1); }

    .blog-tag {
      display: inline-block;
      padding: 4px 10px;
      background: var(--blog-bg, var(--cyan-tint));
      color: var(--blog-c, var(--cyan-d));
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      border-radius: 5px;
      letter-spacing: 0.5px;
      margin-bottom: 16px;
      width: fit-content;
    }

    .blog-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.3px;
      line-height: 1.32;
      margin-bottom: 10px;
    }

    .blog-excerpt {
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.65;
      margin-bottom: 18px;
      flex: 1;
    }

    .blog-meta {
      font-size: 11px;
      color: var(--ink-mute);
      font-family: var(--mono);
      letter-spacing: 0.3px;
      padding-top: 14px;
      border-top: 1px solid var(--bdr-soft);
    }

    @media (max-width: 900px) {
      .blog-grid { grid-template-columns: 1fr; }
      .blog-head { flex-direction: column; align-items: flex-start; }
    }

    /* ─────────── SCHEDULE DEMO ─────────── */
    .demo-section {
      padding: 100px 0;
      background:
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(43,181,194,0.08), transparent 60%),
        radial-gradient(ellipse 40% 30% at 100% 100%, rgba(124,92,255,0.06), transparent 60%),
        var(--bg);
      position: relative;
      overflow: hidden;
    }

    .demo-head {
      max-width: 680px;
      margin: 0 auto 48px;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .demo-head .eyebrow { margin-bottom: 14px; }
    .demo-head h2 { margin: 0 auto 14px; }
    .demo-head .section-sub { margin: 0 auto; }

    .demo-card {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 36px;
      align-items: start;
      position: relative;
      z-index: 1;
    }

    /* LEFT: form card */
    .demo-form-card {
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 22px;
      padding: 36px 36px 28px;
      box-shadow: 0 12px 36px rgba(30, 46, 92, 0.08), 0 2px 8px rgba(30, 46, 92, 0.04);
    }

    /* RIGHT: trust / info column */
    .demo-info {
      padding: 8px 12px 0;
      position: sticky;
      top: 90px;
    }

    .demo-time-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 13px 6px 9px;
      background: var(--cyan-tint);
      border: 1px solid rgba(43,181,194,0.28);
      border-radius: 100px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--cyan-d);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 20px;
    }
    .demo-time-badge .live-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--cyan-d);
      flex-shrink: 0;
    }

    .demo-info-h {
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.4px;
      margin-bottom: 8px;
    }

    .demo-info p {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.6;
      margin-bottom: 22px;
    }

    .demo-bullets {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 26px;
    }

    .demo-bullets li {
      font-size: 13.5px;
      color: var(--ink-soft);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .demo-bullets li::before {
      content: '';
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--cyan-tint);
      border: 1px solid rgba(43,181,194,0.25);
      flex-shrink: 0;
      margin-top: 1px;
      background-image: radial-gradient(circle, var(--cyan) 30%, transparent 32%);
    }

    /* "What we'll cover" timeline */
    .demo-timeline {
      padding: 18px 20px;
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 14px;
      margin-bottom: 22px;
    }

    .dt-h {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--ink-mute);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .dt-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dt-item {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 10px;
      align-items: baseline;
    }

    .dt-time {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--cyan-d);
      letter-spacing: 0.3px;
      padding: 3px 8px;
      background: var(--cyan-tint);
      border-radius: 5px;
      text-align: center;
    }

    .dt-text {
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.5;
    }

    /* Trust signal line */
    .demo-trust {
      padding: 14px 18px;
      background: var(--bg-soft);
      border: 1px solid var(--bdr-soft);
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .dt-avatars { display: flex; }
    .dt-av {
      width: 28px; height: 28px; border-radius: 50%;
      border: 2px solid white; margin-left: -8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: white;
    }
    .dt-av:first-child { margin-left: 0; }
    .dt-trust-text {
      font-size: 12.5px;
      color: var(--ink-soft);
      line-height: 1.4;
    }
    .dt-trust-text strong { color: var(--navy); font-weight: 600; }

    /* ─── Demo form (clean reference style) — uses .df-* prefix to avoid collisions ─── */
    .df-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      margin-bottom: 22px;
      border-bottom: 1px solid var(--bdr-soft);
    }
    .df-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.4px;
    }
    .df-title-sub {
      font-size: 12px;
      color: var(--ink-mute);
      font-family: var(--mono);
      letter-spacing: 0.3px;
    }

    .demo-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Demo form-row (renamed from .form-row to avoid clash with carousel slide-4 .form-row which is hidden until animated) */
    .df-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-field label {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .form-field label .opt {
      font-weight: 500;
      color: var(--ink-mute);
      text-transform: none;
      letter-spacing: 0;
      font-size: 11px;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      padding: 12px 14px;
      border: 1.5px solid var(--bdr);
      border-radius: 10px;
      font-size: 14px;
      font-family: var(--font);
      color: var(--ink);
      background: white;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: vertical;
    }

    .form-field select {
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238290ad' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 38px;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: var(--ink-mute);
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(43, 181, 194, 0.15);
    }

    /* Newsletter checkbox */
    .form-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 0;
      margin-top: 2px;
      cursor: pointer;
      user-select: none;
    }

    .form-checkbox input {
      appearance: none;
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border: 1.5px solid var(--bdr);
      border-radius: 5px;
      background: white;
      cursor: pointer;
      flex-shrink: 0;
      margin-top: 1px;
      position: relative;
      transition: all 0.15s;
    }

    .form-checkbox input:checked {
      background: var(--cyan-d);
      border-color: var(--cyan-d);
    }

    .form-checkbox input:checked::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 5px;
      width: 5px;
      height: 9px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .form-checkbox label {
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.5;
      cursor: pointer;
    }

    /* Privacy + button row */
    .form-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 12px;
      padding-top: 18px;
      border-top: 1px solid var(--bdr-soft);
    }

    .form-privacy {
      font-size: 11.5px;
      color: var(--ink-mute);
      line-height: 1.45;
      flex: 1;
    }
    .form-privacy a {
      color: var(--cyan-d);
      text-decoration: none;
      font-weight: 600;
    }
    .form-privacy a:hover { text-decoration: underline; }

    .btn-demo {
      background: var(--navy);
      color: white;
      padding: 13px 28px;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.22s;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .btn-demo:hover {
      background: var(--navy-deep);
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(30, 46, 92, 0.28);
    }

    .form-success {
      display: none;
      padding: 18px;
      background: rgba(5,150,105,0.08);
      border: 1px solid rgba(5,150,105,0.25);
      border-radius: 12px;
      color: var(--green);
      font-size: 13.5px;
      font-weight: 500;
      text-align: center;
    }
    .form-success.show { display: block; }

    @media (max-width: 900px) {
      .demo-card { grid-template-columns: 1fr; gap: 28px; }
      .demo-info { position: static; }
      .demo-form-card { padding: 28px 24px 22px; }
      .df-row { grid-template-columns: 1fr; }
      .form-footer-row { flex-direction: column; align-items: stretch; }
      .btn-demo { width: 100%; justify-content: center; }
    }

    /* ─────────── FAQ SECTION ─────────── */
    .faq-section {
      padding: 100px 0;
      background: var(--bg-soft);
      border-top: 1px solid var(--bdr-soft);
      border-bottom: 1px solid var(--bdr-soft);
      position: relative;
      overflow: hidden;
    }

    .faq-section::before {
      content: '';
      position: absolute;
      top: -100px; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 400px;
      background: radial-gradient(ellipse, rgba(5,150,105,0.06), transparent 70%);
      pointer-events: none;
    }

    .faq-head {
      max-width: 680px;
      margin: 0 auto 48px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .faq-list {
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .faq-item {
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    }

    .faq-item:hover {
      border-color: var(--cyan);
      box-shadow: 0 8px 24px rgba(30, 46, 92, 0.06);
    }

    .faq-item[open] {
      border-color: var(--cyan);
      box-shadow: 0 8px 24px rgba(30, 46, 92, 0.08);
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-size: 15.5px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.2px;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-icon {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--cyan-tint);
      color: var(--cyan-d);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s;
    }

    .faq-item[open] .faq-icon {
      transform: rotate(45deg);
      background: var(--cyan);
      color: white;
    }

    .faq-answer {
      padding: 0 26px 24px;
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.7;
      animation: faq-open 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .faq-answer p { margin-bottom: 10px; }
    .faq-answer p:last-child { margin-bottom: 0; }
    .faq-answer strong { color: var(--navy); font-weight: 600; }
    .faq-answer a { color: var(--cyan-d); text-decoration: none; font-weight: 600; }
    .faq-answer a:hover { text-decoration: underline; }

    @keyframes faq-open {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* FAQ footer — still have questions */
    .faq-foot {
      max-width: 760px;
      margin: 32px auto 0;
      padding: 22px 28px;
      background: linear-gradient(135deg, var(--cyan-tint), rgba(124,92,255,0.08));
      border: 1px solid rgba(43,181,194,0.2);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .faq-foot-text {
      font-size: 14px;
      color: var(--navy);
      font-weight: 500;
    }
    .faq-foot-text strong { font-weight: 700; }

    .faq-foot a.btn-ask {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      background: var(--navy);
      color: white;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.22s;
      white-space: nowrap;
    }
    .faq-foot a.btn-ask:hover {
      background: var(--navy-deep);
      transform: translateY(-1px);
    }

    @media (max-width: 600px) {
      .faq-item summary { padding: 18px 20px; font-size: 14.5px; }
      .faq-answer { padding: 0 20px 20px; font-size: 13.5px; }
      .faq-foot { flex-direction: column; align-items: stretch; text-align: center; }
      .faq-foot a.btn-ask { justify-content: center; }
    }

    /* ─────────── CTA ─────────── */
    .cta { padding: 96px 0 112px; background: var(--bg); }

    .cta-box {
      background: var(--grad);
      border-radius: 18px;
      padding: 72px 48px;
      position: relative; overflow: hidden;
    }
    .cta-box::before {
      content: ''; position: absolute;
      top: -50%; left: -10%; right: -10%; bottom: -50%;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 80%);
    }
    .cta-content {
      position: relative; z-index: 1; text-align: center;
      max-width: 600px; margin: 0 auto;
    }
    .cta-pill {
      display: inline-block;
      padding: 4px 12px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 100px;
      font-size: 10px; font-weight: 700;
      color: rgba(255,255,255,0.85);
      text-transform: uppercase; letter-spacing: 1.5px;
      margin-bottom: 18px;
    }
    .cta-box h2 {
      color: white; margin: 0 0 14px; max-width: none;
      font-size: clamp(28px, 3.4vw, 42px);
    }
    .cta-box h2 em {
      font-style: normal;
      background: var(--grad-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .cta-sub {
      font-size: 15px; color: rgba(255,255,255,0.7);
      margin-bottom: 32px; line-height: 1.6;
    }
    .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

    /* ─────────── SITE FOOTER (rich, multi-column) ─────────── */
    .site-footer {
      position: relative;
      background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%);
      color: rgba(255, 255, 255, 0.7);
      padding: 88px 0 32px;
      overflow: hidden;
    }

    .footer-glow {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 280px;
      background:
        radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%),
        radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%);
      pointer-events: none;
    }

    .site-footer::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
      pointer-events: none;
    }

    .site-footer .wrap { position: relative; z-index: 1; }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }

    .footer-brand { max-width: 300px; }

    .footer-logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; margin-bottom: 18px; line-height: 1;
    }
    .footer-logo img {
      height: 52px; width: auto;
      filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4));
    }
    .footer-logo span {
      font-size: 23px; font-weight: 800; color: white;
      letter-spacing: -0.5px; line-height: 1;
    }

    .footer-tagline {
      font-size: 13.5px;
      color: rgba(255,255,255,0.55);
      line-height: 1.65;
      margin-bottom: 22px;
    }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }

    .footer-social { display: flex; gap: 8px; }
    .footer-social a {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.7);
      transition: all 0.22s;
      text-decoration: none;
    }
    .footer-social a:hover {
      background: var(--cyan);
      border-color: var(--cyan);
      color: white;
      transform: translateY(-2px);
    }

    .footer-col-h {
      font-size: 11px; font-weight: 700; color: white;
      text-transform: uppercase; letter-spacing: 1.5px;
      margin-bottom: 18px; font-family: var(--mono);
    }

    .footer-col ul {
      list-style: none; display: flex; flex-direction: column;
      gap: 11px; padding: 0; margin: 0;
    }
    .footer-col a {
      color: rgba(255,255,255,0.55); text-decoration: none;
      font-size: 13.5px; transition: color 0.2s;
    }
    .footer-col a:hover { color: var(--cyan-l); }

    /* Newsletter */
    .footer-newsletter {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 28px 32px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
      margin-bottom: 36px;
      position: relative;
      overflow: hidden;
    }
    .footer-newsletter::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%);
      pointer-events: none;
    }
    .newsletter-h {
      font-size: 18px; font-weight: 700; color: white;
      margin-bottom: 6px; letter-spacing: -0.3px;
    }
    .footer-newsletter p {
      font-size: 13px; color: rgba(255,255,255,0.55);
      line-height: 1.6; margin: 0;
    }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input {
      flex: 1; padding: 12px 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      font-family: var(--font); font-size: 14px;
      color: white; outline: none;
      transition: all 0.2s;
    }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus {
      border-color: var(--cyan);
      background: rgba(255,255,255,0.09);
      box-shadow: 0 0 0 3px rgba(43,181,194,0.18);
    }
    .newsletter-form button {
      padding: 12px 22px;
      background: var(--amber);
      border: none; border-radius: 10px;
      font-family: var(--font); font-size: 13.5px; font-weight: 600;
      color: white; cursor: pointer; white-space: nowrap;
      transition: all 0.2s;
      box-shadow: 0 4px 14px rgba(217,119,6,0.32);
    }
    .newsletter-form button:hover {
      background: #b45309; transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(217,119,6,0.42);
    }

    /* Bottom bar */
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 24px;
      display: flex; justify-content: space-between;
      align-items: center; flex-wrap: wrap; gap: 18px;
    }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge {
      font-size: 11px; font-weight: 600;
      color: rgba(255,255,255,0.6);
      padding: 5px 11px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px;
      font-family: var(--mono); letter-spacing: 0.3px;
      display: inline-flex; align-items: center; gap: 5px;
    }

    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    /* ─────────── SCROLL REVEAL ─────────── */
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
    }
    .reveal.d1 { transition-delay: 0.08s; }
    .reveal.d2 { transition-delay: 0.16s; }
    .reveal.d3 { transition-delay: 0.24s; }
    .reveal.d4 { transition-delay: 0.32s; }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* ─────────── RESPONSIVE ─────────── */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; gap: 48px; }
      .hero-visual { order: -1; }
      .app { max-width: 460px; margin: 0 auto; }
      .week { grid-template-columns: repeat(2, 1fr); }
      .sol-grid { grid-template-columns: 1fr; }
      .feat-grid { grid-template-columns: repeat(2, 1fr); }
      .role-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
      .step-grid { grid-template-columns: 1fr; }
      .ocr { grid-template-columns: 1fr; }
      .ocr-l { padding: 44px 36px; }
    }
    /* Hide nav-links earlier — auth pills + section morph carry wayfinding on medium screens */
    @media (max-width: 1080px) {
      .nav-links { display: none; }
    }

    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .section-pill { top: 10px; left: 10px; height: 36px; padding: 0 14px 0 12px; }
      .sp-text { font-size: 11px; }
    }

    @media (max-width: 480px) {
      .section-pill { display: none; }
    }

    @media (max-width: 600px) {
      .week { grid-template-columns: 1fr; }
      .feat-grid { grid-template-columns: 1fr; }
      .cta-box { padding: 48px 28px; }
    }

/* ═════════════════════════════════════════════════════════════════
 * Page-specific CSS — appended from each subpage's original inline
 * <style> block. Selectors that overlap with the base styles above
 * are duplicated but CSS just takes the later definition.
 * ═════════════════════════════════════════════════════════════════ */

/* ── from blog.html ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-l:    #f59e0b;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --white:    #ffffff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

    /* ─── NAV ─── */
    nav {
      position: fixed;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 20px;
      height: 60px;
      padding: 8px 26px 8px 18px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), 0 2px 10px rgba(30, 46, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transition: background 0.4s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.4s;
    }
    nav.scrolled {
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 14px 44px rgba(30, 46, 92, 0.18), 0 2px 12px rgba(30, 46, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark {
      height: 48px;
      width: auto;
      display: block;
      filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28));
      line-height: 1;
    }
    .logo-text {
      font-size: 20px; font-weight: 800;
      background: linear-gradient(135deg, var(--navy), var(--cyan));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.5px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a {
      font-size: 13px; font-weight: 500; color: var(--ink-soft);
      text-decoration: none; transition: color 0.2s;
      line-height: 1; display: inline-flex; align-items: center;
    }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.current { color: var(--violet); font-weight: 600; }

    /* Auth pills (top-right) */
    .auth-pills {
      position: fixed;
      top: 14px; right: 14px;
      z-index: 101;
      display: flex; align-items: center; gap: 8px;
    }

    .btn-pill {
      display: inline-flex; align-items: center; gap: 6px;
      height: 40px; padding: 0 18px;
      border-radius: 100px;
      font-family: var(--font); font-size: 13px; font-weight: 600;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      backdrop-filter: blur(22px) saturate(180%);
    }

    .btn-pill.ghost {
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.55);
      color: var(--navy);
      box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14);
    }
    .btn-pill.ghost:hover { background: rgba(255, 255, 255, 0.88); transform: translateY(-1px); }

    .btn-pill.primary {
      background: var(--amber);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 12px 36px rgba(217, 119, 6, 0.32);
    }
    .btn-pill.primary:hover { background: #b45309; transform: translateY(-1px); }

    /* ─── BLOG HERO (more vivid) ─── */
    .blog-hero {
      padding: 140px 0 60px;
      background:
        radial-gradient(ellipse 70% 60% at 15% 25%, rgba(124,92,255,0.18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 70%, rgba(43,181,194,0.16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(217,119,6,0.08), transparent 60%),
        var(--bg);
      position: relative;
      overflow: hidden;
    }

    .blog-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(30,46,92,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,46,92,0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
    }

    /* Decorative floating shapes in hero */
    .blog-hero::after {
      content: '';
      position: absolute;
      top: 25%; right: 8%;
      width: 80px; height: 80px;
      border-radius: 22px;
      background: linear-gradient(135deg, var(--cyan), var(--violet));
      opacity: 0.12;
      transform: rotate(15deg);
      filter: blur(1px);
    }

    .hero-inner {
      max-width: 760px; margin: 0 auto; text-align: center;
      position: relative; z-index: 1;
    }

    .hero-eyebrow {
      display: inline-block;
      padding: 5px 13px;
      background: var(--violet-tint);
      color: var(--violet);
      font-family: var(--mono);
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px;
      border-radius: 100px;
      margin-bottom: 22px;
    }

    .blog-hero h1 {
      font-size: clamp(36px, 4.8vw, 56px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -1.8px;
      color: var(--navy);
      margin-bottom: 18px;
    }

    .blog-hero h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--cyan-d), var(--violet));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .blog-hero p {
      font-size: 17px;
      color: var(--ink-soft);
      line-height: 1.65;
      max-width: 560px; margin: 0 auto;
    }

    /* ─── SEARCH + CONTROLS (with subtle gradient) ─── */
    .blog-controls {
      padding: 40px 0 28px;
      border-bottom: 1px solid var(--bdr-soft);
      position: sticky;
      top: 0;
      z-index: 60;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
    }

    .blog-controls::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 40% 100% at 0% 50%, rgba(43,181,194,0.05), transparent 60%),
        radial-gradient(ellipse 40% 100% at 100% 50%, rgba(124,92,255,0.05), transparent 60%);
      pointer-events: none;
    }

    .blog-controls > .wrap { position: relative; z-index: 1; }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .search-box {
      flex: 1;
      max-width: 520px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 18px;
      background: var(--bg-soft);
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }

    .search-box:focus-within {
      border-color: var(--cyan);
      background: white;
      box-shadow: 0 0 0 4px rgba(43, 181, 194, 0.12);
    }

    .search-box svg { flex-shrink: 0; color: var(--ink-mute); }

    .search-box input {
      flex: 1;
      border: none;
      background: transparent;
      font-family: var(--font);
      font-size: 14px;
      color: var(--ink);
      outline: none;
    }

    .search-box input::placeholder { color: var(--ink-mute); }

    .search-clear {
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--bdr);
      border: none;
      color: var(--ink-soft);
      font-size: 14px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .search-clear.show { display: flex; }
    .search-clear:hover { background: var(--ink-soft); color: white; }

    .results-info {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-mute);
      font-weight: 600;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .results-info strong { color: var(--navy); font-weight: 700; }

    /* ─── ARTICLE GRID (more colorful) ─── */
    .blog-grid-section {
      padding: 56px 0 100px;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(43,181,194,0.05), transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(124,92,255,0.04), transparent 60%),
        var(--bg);
      position: relative;
    }

    .article-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 20px;
    }

    .article-card {
      display: flex;
      flex-direction: column;
      background: white;
      border: 1.5px solid var(--bdr);
      border-radius: 18px;
      padding: 28px 26px 24px;
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s, box-shadow 0.35s;
    }

    /* Always-visible colored top accent bar */
    .article-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--card-c, var(--cyan));
      opacity: 0.85;
      transition: opacity 0.3s, height 0.3s;
    }

    /* Soft color wash background tied to card theme */
    .article-card::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 140px; height: 140px;
      background: radial-gradient(circle at top right, var(--card-bg, var(--cyan-tint)), transparent 70%);
      opacity: 0.6;
      pointer-events: none;
      transition: opacity 0.35s;
    }

    .article-card:hover {
      transform: translateY(-6px);
      border-color: var(--card-c, var(--cyan));
      box-shadow: 0 20px 48px rgba(30, 46, 92, 0.12);
    }

    .article-card:hover::before {
      opacity: 1;
      height: 5px;
    }

    .article-card:hover::after { opacity: 1; }

    .article-card > * { position: relative; z-index: 1; }

    .card-tag {
      display: inline-block;
      padding: 6px 12px;
      background: var(--card-bg, var(--cyan-tint));
      color: var(--card-c, var(--cyan-d));
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.6px;
      border-radius: 6px;
      margin-bottom: 18px;
      width: fit-content;
      border: 1px solid color-mix(in srgb, var(--card-c, var(--cyan-d)) 18%, transparent);
    }

    .card-title {
      font-size: 19px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.4px;
      line-height: 1.25;
      margin-bottom: 12px;
    }

    .card-excerpt {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.62;
      margin-bottom: 20px;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--ink-mute);
      letter-spacing: 0.4px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--bdr-soft);
    }

    .card-meta .meta-dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--bdr);
    }

    .card-link {
      font-size: 13px;
      font-weight: 700;
      color: var(--card-c, var(--cyan-d));
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.25s ease;
    }

    .article-card:hover .card-link { gap: 12px; }

    /* No results state */
    .no-results {
      grid-column: 1 / -1;
      text-align: center;
      padding: 64px 24px;
      display: none;
    }
    .no-results.show { display: block; }

    .no-results-icon {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--bg-soft);
      border: 1px solid var(--bdr);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      color: var(--ink-mute);
    }

    .no-results-text {
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 6px;
      letter-spacing: -0.3px;
    }

    .no-results-hint {
      font-size: 13.5px;
      color: var(--ink-soft);
    }

    /* Blog CTA (now colorful with gradient) */
    .blog-cta {
      padding: 100px 0 120px;
      background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124,92,255,0.12), transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(43,181,194,0.1), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(217,119,6,0.08), transparent 60%),
        var(--bg-soft);
      border-top: 1px solid var(--bdr-soft);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .blog-cta::before {
      content: '';
      position: absolute;
      top: 20%; left: 10%;
      width: 80px; height: 80px;
      border-radius: 20px;
      background: linear-gradient(135deg, var(--cyan), var(--violet));
      opacity: 0.1;
      transform: rotate(-12deg);
    }

    .blog-cta::after {
      content: '';
      position: absolute;
      bottom: 25%; right: 12%;
      width: 60px; height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--amber), #fbbf24);
      opacity: 0.12;
    }

    .blog-cta > .wrap { position: relative; z-index: 1; }

    .cta-pill-tag {
      display: inline-block;
      padding: 5px 13px;
      background: linear-gradient(135deg, var(--cyan-tint), var(--violet-tint));
      color: var(--cyan-d);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      border-radius: 100px;
      margin-bottom: 18px;
      border: 1px solid rgba(43,181,194,0.2);
    }

    .blog-cta h2 {
      font-size: clamp(28px, 3vw, 38px);
      font-weight: 800;
      letter-spacing: -1.2px;
      color: var(--navy);
      margin-bottom: 14px;
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
    }

    .blog-cta h2 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--cyan-d), var(--violet));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .blog-cta p {
      font-size: 16px;
      color: var(--ink-soft);
      margin-bottom: 28px;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 14px 28px;
      border-radius: 12px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      border: none;
      transition: all 0.25s;
    }

    .btn-am {
      background: var(--amber);
      color: white;
      box-shadow: 0 4px 16px rgba(217,119,6,0.28);
    }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }

    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--bdr);
      color: var(--ink-soft);
    }
    .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    /* Responsive */
    @media (max-width: 1080px) {
      .nav-links { display: none; }
    }

    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .blog-hero { padding: 110px 0 40px; }
      .controls-row { flex-direction: column; align-items: stretch; gap: 14px; }
      .search-box { max-width: 100%; }
      .results-info { text-align: right; }
    }

/* ── from checkout.html ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-l:    #f59e0b;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --white:    #ffffff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg-soft);
      color: var(--ink);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }

    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

    /* ─── NAV (matches landing) ─── */
    nav {
      position: fixed;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 20px;
      height: 60px;
      padding: 8px 26px 8px 18px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark {
      height: 48px;
      width: auto;
      display: block;
      filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28));
      line-height: 1;
    }
    .logo-text {
      font-size: 20px; font-weight: 800;
      background: linear-gradient(135deg, var(--navy), var(--cyan));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.5px;
      line-height: 1;
    }

    .nav-spacer { flex: 1; }
    .nav-trust {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--ink-soft); font-weight: 500;
    }
    .nav-trust svg { color: var(--green); flex-shrink: 0; }

    /* ─── CHECKOUT ─── */
    .checkout {
      padding: 120px 0 80px;
      min-height: 100vh;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--ink-soft);
      text-decoration: none;
      font-weight: 500;
      margin-bottom: 28px;
      transition: color 0.2s;
    }
    .back-link:hover { color: var(--navy); }

    .ck-head {
      max-width: 720px;
      margin-bottom: 40px;
    }

    .ck-eyebrow {
      display: inline-block;
      padding: 5px 12px;
      background: var(--cyan-tint);
      color: var(--cyan-d);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      border-radius: 100px;
      margin-bottom: 16px;
    }

    .ck-head h1 {
      font-size: clamp(28px, 3.4vw, 38px);
      font-weight: 800;
      letter-spacing: -1.2px;
      color: var(--navy);
      line-height: 1.15;
      margin-bottom: 10px;
    }

    .ck-head p {
      font-size: 16px;
      color: var(--ink-soft);
      line-height: 1.6;
      max-width: 580px;
    }

    /* Layout */
    .ck-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 28px;
      align-items: start;
    }

    .ck-card {
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 18px;
      padding: 32px;
      box-shadow: 0 4px 16px rgba(30,46,92,0.04);
    }

    /* Billing toggle */
    .billing-toggle {
      display: inline-flex;
      padding: 4px;
      background: var(--bg-soft);
      border: 1px solid var(--bdr);
      border-radius: 100px;
      margin-bottom: 24px;
      position: relative;
    }

    .toggle-opt {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 18px;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-soft);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      z-index: 1;
    }

    .toggle-opt.active {
      background: white;
      color: var(--navy);
      box-shadow: 0 2px 8px rgba(30,46,92,0.08), 0 0 0 1px var(--bdr-soft);
    }

    .toggle-opt .save-badge {
      display: inline-flex;
      padding: 3px 8px;
      background: var(--green);
      color: white;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.5px;
      border-radius: 100px;
      text-transform: uppercase;
    }

    /* Plan card */
    .plan-tier {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--cyan-d);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 8px;
    }

    .plan-name {
      font-size: 28px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.8px;
      margin-bottom: 6px;
    }

    .plan-desc {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.55;
      margin-bottom: 24px;
    }

    .plan-price-display {
      padding: 20px 22px;
      background: var(--bg-soft);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      margin-bottom: 24px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    .ppd-l {
      font-size: 38px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1.5px;
      line-height: 1;
      font-family: var(--font);
    }
    .ppd-l .unit {
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-mute);
      margin-left: 4px;
      letter-spacing: 0;
    }

    .ppd-r {
      font-size: 12px;
      color: var(--ink-mute);
      font-family: var(--mono);
      text-align: right;
    }
    .ppd-r .strike {
      text-decoration: line-through;
      color: var(--ink-mute);
      font-size: 12px;
      margin-right: 6px;
    }
    .ppd-r .saved {
      color: var(--green);
      font-weight: 700;
      font-size: 12px;
    }

    .plan-features-h {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--ink-mute);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 12px;
    }

    .plan-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .plan-features li {
      font-size: 13.5px;
      color: var(--ink-soft);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .plan-features li::before {
      content: '✓';
      color: var(--green);
      font-weight: 800;
      flex-shrink: 0;
    }

    /* Order summary card (right) */
    .summary-card {
      position: sticky;
      top: 90px;
    }

    .summary-h {
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.4px;
      margin-bottom: 20px;
    }

    .summary-line {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 12px 0;
      font-size: 14px;
      color: var(--ink);
      border-bottom: 1px dashed var(--bdr-soft);
    }
    .summary-line:last-of-type { border-bottom: none; }

    .summary-line .muted {
      color: var(--ink-mute);
      font-size: 12px;
      font-weight: 500;
    }

    .summary-line .val {
      font-family: var(--mono);
      font-weight: 700;
      color: var(--navy);
    }

    .summary-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 18px;
      margin-top: 8px;
      border-top: 2px solid var(--bdr);
    }

    .summary-total .lbl {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
    }
    .summary-total .lbl-sub {
      display: block;
      font-size: 11px;
      color: var(--ink-mute);
      font-weight: 500;
      margin-top: 2px;
      font-family: var(--mono);
    }

    .summary-total .val {
      font-family: var(--mono);
      font-size: 26px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 14px 22px;
      border-radius: 12px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      border: none;
      transition: all 0.22s;
      white-space: nowrap;
    }
    .btn-am {
      background: var(--amber);
      color: white;
      box-shadow: 0 4px 16px rgba(217,119,6,0.28);
    }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }

    .summary-cta { margin-top: 22px; }
    .summary-cta .btn { width: 100%; padding: 15px 22px; font-size: 15px; }

    .summary-note {
      font-size: 11.5px;
      color: var(--ink-mute);
      text-align: center;
      margin-top: 10px;
      line-height: 1.5;
    }

    /* Guarantee block */
    .guarantee {
      margin-top: 18px;
      padding: 16px;
      background: rgba(5,150,105,0.06);
      border: 1px solid rgba(5,150,105,0.18);
      border-radius: 12px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .g-icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: var(--green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .g-body strong {
      display: block;
      font-size: 13.5px;
      color: var(--navy);
      font-weight: 700;
      margin-bottom: 2px;
    }

    .g-body p {
      font-size: 12.5px;
      color: var(--ink-soft);
      line-height: 1.5;
    }

    /* Payment methods row */
    .pay-methods {
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid var(--bdr-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .pay-methods-label {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--ink-mute);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .pay-tag {
      padding: 5px 11px;
      background: var(--bg-soft);
      border: 1px solid var(--bdr);
      border-radius: 6px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-soft);
      letter-spacing: 0.3px;
    }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    @media (max-width: 900px) {
      .ck-grid { grid-template-columns: 1fr; }
      .summary-card { position: static; }
    }

    @media (max-width: 600px) {
      nav { padding: 6px 18px 6px 14px; height: 54px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .nav-trust { display: none; }
      .ck-card { padding: 24px; }
      .billing-toggle { width: 100%; }
      .toggle-opt { flex: 1; justify-content: center; padding: 9px 14px; font-size: 12px; }
    }

/* ── from e-invoicing-2026.html ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --serif: 'Source Serif 4', Georgia, serif;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);

      /* Per-article accent — VIOLET */
      --accent:    var(--violet);
      --accent-bg: var(--violet-tint);
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .read-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--cyan)); width: 0%; z-index: 110; transition: width 0.08s linear; }

    nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 20px; height: 60px; padding: 8px 26px 8px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), 0 2px 10px rgba(30, 46, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background 0.4s, box-shadow 0.4s; }
    nav.scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 14px 44px rgba(30, 46, 92, 0.18), 0 2px 12px rgba(30, 46, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark { height: 48px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28)); line-height: 1; }
    .logo-text { font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--navy), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; line-height: 1; display: inline-flex; align-items: center; }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a { font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; line-height: 1; display: inline-flex; align-items: center; }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.current { color: var(--violet); font-weight: 600; }

    .auth-pills { position: fixed; top: 14px; right: 14px; z-index: 101; display: flex; align-items: center; gap: 8px; }
    .btn-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 100px; font-family: var(--font); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
    .btn-pill.ghost { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.55); color: var(--navy); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14); }
    .btn-pill.ghost:hover { background: rgba(255, 255, 255, 0.88); transform: translateY(-1px); }
    .btn-pill.primary { background: var(--amber); color: white; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 36px rgba(217, 119, 6, 0.32); }
    .btn-pill.primary:hover { background: #b45309; transform: translateY(-1px); }

    .post-hero { padding: 130px 0 60px; background: radial-gradient(ellipse 60% 50% at 30% 30%, var(--accent-bg), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 60%, var(--accent-bg), transparent 60%), var(--bg); position: relative; overflow: hidden; border-bottom: 1px solid var(--bdr-soft); }
    .post-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,46,92,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(30,46,92,0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); }
    .post-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; z-index: 1; }

    .back-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 8px 14px; background: white; border: 1px solid var(--bdr); border-radius: 100px; margin-bottom: 32px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.22s; }
    .back-link:hover { background: var(--bg-soft); border-color: var(--navy); color: var(--navy); transform: translateY(-1px); }

    .post-tag { display: inline-block; padding: 6px 14px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 5px; margin-bottom: 22px; }
    .post-h { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--navy); margin-bottom: 22px; }

    .post-meta { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.4px; text-transform: uppercase; }
    .post-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }

    .post-body { padding: 72px 0 100px; }
    .post-body .read-wrap { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: #243248; }
    .post-body p { margin-bottom: 22px; }
    .post-body p:first-of-type::first-letter { font-family: var(--font); font-size: 60px; font-weight: 800; float: left; line-height: 0.92; padding: 4px 12px 0 0; color: var(--accent); margin-top: 2px; }
    .post-body h3 { font-family: var(--font); font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; margin: 40px 0 14px; line-height: 1.25; }
    .post-body h4 { font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--navy); margin: 28px 0 10px; }
    .post-body ol, .post-body ul { margin: 0 0 24px 4px; padding-left: 24px; }
    .post-body li { margin-bottom: 10px; padding-left: 4px; }
    .post-body strong { color: var(--navy); font-weight: 600; }
    .post-body code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-soft); border: 1px solid var(--bdr-soft); padding: 2px 7px; border-radius: 5px; color: var(--navy); }
    .post-body blockquote { margin: 32px 0; padding: 22px 30px; background: var(--accent-bg); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; font-style: italic; color: var(--navy); font-size: 17px; }
    .post-body .callout { font-family: var(--font); margin: 32px 0; padding: 24px 28px; background: white; border: 1.5px solid var(--accent); border-radius: 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); box-shadow: 0 4px 16px rgba(30,46,92,0.05); }
    .post-body .callout-h { font-weight: 800; color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: 1.2px; margin-bottom: 10px; font-family: var(--mono); }

    .read-next { padding: 64px 0 80px; background: var(--bg-soft); border-top: 1px solid var(--bdr-soft); border-bottom: 1px solid var(--bdr-soft); }
    .rn-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
    .rn-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
    .rn-card { display: block; background: white; border: 1px solid var(--bdr); border-radius: 16px; padding: 28px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
    .rn-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rn-c, var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
    .rn-card:hover { transform: translateY(-3px); border-color: var(--rn-c, var(--green)); box-shadow: 0 16px 36px rgba(30, 46, 92, 0.08); }
    .rn-card:hover::before { transform: scaleX(1); }
    .rn-tag { display: inline-block; padding: 4px 10px; background: var(--rn-bg, rgba(5,150,105,0.1)); color: var(--rn-c, var(--green)); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; border-radius: 5px; margin-bottom: 12px; }
    .rn-title { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.3; margin-bottom: 14px; }
    .rn-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.4px; display: flex; align-items: center; gap: 10px; }
    .rn-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }
    .rn-meta .rn-arrow { margin-left: auto; color: var(--rn-c, var(--green)); font-size: 14px; font-weight: 700; font-family: var(--font); transition: gap 0.25s; }
    .rn-card:hover .rn-arrow { padding-left: 4px; }

    .post-cta { padding: 80px 0 100px; background: var(--bg); text-align: center; }
    .cta-pill-tag { display: inline-block; padding: 4px 12px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 100px; margin-bottom: 16px; }
    .post-cta h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: -1px; color: var(--navy); margin-bottom: 12px; max-width: 540px; margin-left: auto; margin-right: auto; }
    .post-cta p { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; max-width: 480px; margin-left: auto; margin-right: auto; }

    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: 12px; font-family: var(--font); font-size: 14px; font-weight: 600; text-decoration: none; border: none; transition: all 0.25s; }
    .btn-am { background: var(--amber); color: white; box-shadow: 0 4px 16px rgba(217,119,6,0.28); }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }
    .btn-outline { background: transparent; border: 1.5px solid var(--bdr); color: var(--ink-soft); }
    .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    @media (max-width: 1080px) { .nav-links { display: none; } }
    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .post-hero { padding: 110px 0 44px; }
      .post-body { padding: 52px 0 80px; }
      .post-body .read-wrap { font-size: 16px; }
      .post-body p:first-of-type::first-letter { font-size: 46px; }
    }

/* ── from gstr1-mistakes.html ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --serif: 'Source Serif 4', Georgia, serif;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);

      /* Per-article accent */
      --accent:    var(--cyan-d);
      --accent-bg: var(--cyan-tint);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .read-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    /* ─── READING PROGRESS BAR ─── */
    .reading-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--violet));
      width: 0%;
      z-index: 110;
      transition: width 0.08s linear;
    }

    /* ─── NAV ─── */
    nav {
      position: fixed;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex; align-items: center; gap: 20px;
      height: 60px;
      padding: 8px 26px 8px 18px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), 0 2px 10px rgba(30, 46, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transition: background 0.4s, box-shadow 0.4s;
    }
    nav.scrolled {
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 14px 44px rgba(30, 46, 92, 0.18), 0 2px 12px rgba(30, 46, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark {
      height: 48px;
      width: auto;
      display: block;
      filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28));
      line-height: 1;
    }
    .logo-text {
      font-size: 20px; font-weight: 800;
      background: linear-gradient(135deg, var(--navy), var(--cyan));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.5px;
      line-height: 1;
      display: inline-flex; align-items: center;
    }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a {
      font-size: 13px; font-weight: 500; color: var(--ink-soft);
      text-decoration: none; transition: color 0.2s;
      line-height: 1; display: inline-flex; align-items: center;
    }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.current { color: var(--violet); font-weight: 600; }

    /* Auth pills */
    .auth-pills {
      position: fixed;
      top: 14px; right: 14px;
      z-index: 101;
      display: flex; align-items: center; gap: 8px;
    }
    .btn-pill {
      display: inline-flex; align-items: center; gap: 6px;
      height: 40px; padding: 0 18px;
      border-radius: 100px;
      font-family: var(--font); font-size: 13px; font-weight: 600;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      backdrop-filter: blur(22px) saturate(180%);
    }
    .btn-pill.ghost {
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.55);
      color: var(--navy);
      box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14);
    }
    .btn-pill.ghost:hover { background: rgba(255, 255, 255, 0.88); transform: translateY(-1px); }
    .btn-pill.primary {
      background: var(--amber);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 12px 36px rgba(217, 119, 6, 0.32);
    }
    .btn-pill.primary:hover { background: #b45309; transform: translateY(-1px); }

    /* ─── ARTICLE HERO ─── */
    .post-hero {
      padding: 130px 0 60px;
      background:
        radial-gradient(ellipse 60% 50% at 30% 30%, var(--accent-bg), transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 60%, var(--accent-bg), transparent 60%),
        var(--bg);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--bdr-soft);
    }

    .post-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(30,46,92,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,46,92,0.03) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
    }

    .post-hero-inner {
      max-width: 760px; margin: 0 auto;
      padding: 0 24px;
      text-align: center;
      position: relative; z-index: 1;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-soft);
      text-decoration: none;
      padding: 8px 14px;
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 100px;
      margin-bottom: 32px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all 0.22s;
    }
    .back-link:hover {
      background: var(--bg-soft);
      border-color: var(--navy);
      color: var(--navy);
      transform: translateY(-1px);
    }

    .post-tag {
      display: inline-block;
      padding: 6px 14px;
      background: var(--accent-bg);
      color: var(--accent);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      border-radius: 5px;
      margin-bottom: 22px;
    }

    .post-h {
      font-size: clamp(32px, 4.2vw, 50px);
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.1;
      color: var(--navy);
      margin-bottom: 22px;
    }

    .post-meta {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      font-size: 13px;
      color: var(--ink-mute);
      font-family: var(--mono);
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }
    .post-meta .meta-dot {
      width: 3px; height: 3px;
      background: var(--bdr);
      border-radius: 50%;
    }

    /* ─── ARTICLE BODY ─── */
    .post-body {
      padding: 72px 0 100px;
    }

    .post-body .read-wrap {
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.72;
      color: #243248;
    }

    .post-body p { margin-bottom: 22px; }

    .post-body p:first-of-type::first-letter {
      font-family: var(--font);
      font-size: 60px;
      font-weight: 800;
      float: left;
      line-height: 0.92;
      padding: 4px 12px 0 0;
      color: var(--accent);
      margin-top: 2px;
    }

    .post-body h3 {
      font-family: var(--font);
      font-size: 24px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.5px;
      margin: 40px 0 14px;
      line-height: 1.25;
    }

    .post-body h4 {
      font-family: var(--font);
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      margin: 28px 0 10px;
    }

    .post-body ol, .post-body ul { margin: 0 0 24px 4px; padding-left: 24px; }
    .post-body li { margin-bottom: 10px; padding-left: 4px; }
    .post-body strong { color: var(--navy); font-weight: 600; }

    .post-body code {
      font-family: var(--mono);
      font-size: 0.88em;
      background: var(--bg-soft);
      border: 1px solid var(--bdr-soft);
      padding: 2px 7px;
      border-radius: 5px;
      color: var(--navy);
    }

    .post-body blockquote {
      margin: 32px 0;
      padding: 22px 30px;
      background: var(--accent-bg);
      border-left: 4px solid var(--accent);
      border-radius: 0 12px 12px 0;
      font-style: italic;
      color: var(--navy);
      font-size: 17px;
    }

    .post-body .callout {
      font-family: var(--font);
      margin: 32px 0;
      padding: 24px 28px;
      background: white;
      border: 1.5px solid var(--accent);
      border-radius: 14px;
      font-style: normal;
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink);
      box-shadow: 0 4px 16px rgba(30,46,92,0.05);
    }

    .post-body .callout-h {
      font-weight: 800;
      color: var(--accent);
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 1.2px;
      margin-bottom: 10px;
      font-family: var(--mono);
    }

    /* ─── READ NEXT ─── */
    .read-next {
      padding: 64px 0 80px;
      background: var(--bg-soft);
      border-top: 1px solid var(--bdr-soft);
      border-bottom: 1px solid var(--bdr-soft);
    }

    .rn-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    .rn-label {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-mute);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 16px;
    }

    .rn-card {
      display: block;
      background: white;
      border: 1px solid var(--bdr);
      border-radius: 16px;
      padding: 28px;
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    .rn-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--rn-c, var(--amber));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }

    .rn-card:hover {
      transform: translateY(-3px);
      border-color: var(--rn-c, var(--amber));
      box-shadow: 0 16px 36px rgba(30, 46, 92, 0.08);
    }

    .rn-card:hover::before { transform: scaleX(1); }

    .rn-tag {
      display: inline-block;
      padding: 4px 10px;
      background: var(--rn-bg, var(--amber-tint));
      color: var(--rn-c, var(--amber));
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      border-radius: 5px;
      margin-bottom: 12px;
    }

    .rn-title {
      font-size: 19px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.4px;
      line-height: 1.3;
      margin-bottom: 14px;
    }

    .rn-meta {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--ink-mute);
      letter-spacing: 0.4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .rn-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }

    .rn-meta .rn-arrow {
      margin-left: auto;
      color: var(--rn-c, var(--amber));
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font);
      transition: gap 0.25s;
    }
    .rn-card:hover .rn-arrow { padding-left: 4px; }

    /* ─── CTA ─── */
    .post-cta {
      padding: 80px 0 100px;
      background: var(--bg);
      text-align: center;
    }

    .cta-pill-tag {
      display: inline-block;
      padding: 4px 12px;
      background: var(--accent-bg);
      color: var(--accent);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      border-radius: 100px;
      margin-bottom: 16px;
    }

    .post-cta h2 {
      font-size: clamp(26px, 2.8vw, 34px);
      font-weight: 800;
      letter-spacing: -1px;
      color: var(--navy);
      margin-bottom: 12px;
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
    }

    .post-cta p {
      font-size: 15px;
      color: var(--ink-soft);
      margin-bottom: 26px;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 13px 24px;
      border-radius: 12px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      border: none;
      transition: all 0.25s;
    }
    .btn-am {
      background: var(--amber);
      color: white;
      box-shadow: 0 4px 16px rgba(217,119,6,0.28);
    }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }
    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--bdr);
      color: var(--ink-soft);
    }
    .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    /* Responsive */
    @media (max-width: 1080px) {
      .nav-links { display: none; }
    }

    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .post-hero { padding: 110px 0 44px; }
      .post-body { padding: 52px 0 80px; }
      .post-body .read-wrap { font-size: 16px; }
      .post-body p:first-of-type::first-letter { font-size: 46px; }
    }

/* ── from itc-2a-vs-2b.html ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --serif: 'Source Serif 4', Georgia, serif;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);

      /* Per-article accent — AMBER */
      --accent:    var(--amber);
      --accent-bg: var(--amber-tint);
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .read-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--violet)); width: 0%; z-index: 110; transition: width 0.08s linear; }

    nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 20px; height: 60px; padding: 8px 26px 8px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), 0 2px 10px rgba(30, 46, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background 0.4s, box-shadow 0.4s; }
    nav.scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 14px 44px rgba(30, 46, 92, 0.18), 0 2px 12px rgba(30, 46, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark { height: 48px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28)); line-height: 1; }
    .logo-text { font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--navy), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; line-height: 1; display: inline-flex; align-items: center; }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a { font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; line-height: 1; display: inline-flex; align-items: center; }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.current { color: var(--violet); font-weight: 600; }

    .auth-pills { position: fixed; top: 14px; right: 14px; z-index: 101; display: flex; align-items: center; gap: 8px; }
    .btn-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 100px; font-family: var(--font); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
    .btn-pill.ghost { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.55); color: var(--navy); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14); }
    .btn-pill.ghost:hover { background: rgba(255, 255, 255, 0.88); transform: translateY(-1px); }
    .btn-pill.primary { background: var(--amber); color: white; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 36px rgba(217, 119, 6, 0.32); }
    .btn-pill.primary:hover { background: #b45309; transform: translateY(-1px); }

    .post-hero { padding: 130px 0 60px; background: radial-gradient(ellipse 60% 50% at 30% 30%, var(--accent-bg), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 60%, var(--accent-bg), transparent 60%), var(--bg); position: relative; overflow: hidden; border-bottom: 1px solid var(--bdr-soft); }
    .post-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,46,92,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(30,46,92,0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); }
    .post-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; z-index: 1; }

    .back-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 8px 14px; background: white; border: 1px solid var(--bdr); border-radius: 100px; margin-bottom: 32px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.22s; }
    .back-link:hover { background: var(--bg-soft); border-color: var(--navy); color: var(--navy); transform: translateY(-1px); }

    .post-tag { display: inline-block; padding: 6px 14px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 5px; margin-bottom: 22px; }
    .post-h { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--navy); margin-bottom: 22px; }

    .post-meta { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.4px; text-transform: uppercase; }
    .post-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }

    .post-body { padding: 72px 0 100px; }
    .post-body .read-wrap { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: #243248; }
    .post-body p { margin-bottom: 22px; }
    .post-body p:first-of-type::first-letter { font-family: var(--font); font-size: 60px; font-weight: 800; float: left; line-height: 0.92; padding: 4px 12px 0 0; color: var(--accent); margin-top: 2px; }
    .post-body h3 { font-family: var(--font); font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; margin: 40px 0 14px; line-height: 1.25; }
    .post-body h4 { font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--navy); margin: 28px 0 10px; }
    .post-body ol, .post-body ul { margin: 0 0 24px 4px; padding-left: 24px; }
    .post-body li { margin-bottom: 10px; padding-left: 4px; }
    .post-body strong { color: var(--navy); font-weight: 600; }
    .post-body code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-soft); border: 1px solid var(--bdr-soft); padding: 2px 7px; border-radius: 5px; color: var(--navy); }
    .post-body blockquote { margin: 32px 0; padding: 22px 30px; background: var(--accent-bg); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; font-style: italic; color: var(--navy); font-size: 17px; }
    .post-body .callout { font-family: var(--font); margin: 32px 0; padding: 24px 28px; background: white; border: 1.5px solid var(--accent); border-radius: 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); box-shadow: 0 4px 16px rgba(30,46,92,0.05); }
    .post-body .callout-h { font-weight: 800; color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: 1.2px; margin-bottom: 10px; font-family: var(--mono); }

    .read-next { padding: 64px 0 80px; background: var(--bg-soft); border-top: 1px solid var(--bdr-soft); border-bottom: 1px solid var(--bdr-soft); }
    .rn-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
    .rn-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
    .rn-card { display: block; background: white; border: 1px solid var(--bdr); border-radius: 16px; padding: 28px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
    .rn-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rn-c, var(--violet)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
    .rn-card:hover { transform: translateY(-3px); border-color: var(--rn-c, var(--violet)); box-shadow: 0 16px 36px rgba(30, 46, 92, 0.08); }
    .rn-card:hover::before { transform: scaleX(1); }
    .rn-tag { display: inline-block; padding: 4px 10px; background: var(--rn-bg, var(--violet-tint)); color: var(--rn-c, var(--violet)); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; border-radius: 5px; margin-bottom: 12px; }
    .rn-title { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.3; margin-bottom: 14px; }
    .rn-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.4px; display: flex; align-items: center; gap: 10px; }
    .rn-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }
    .rn-meta .rn-arrow { margin-left: auto; color: var(--rn-c, var(--violet)); font-size: 14px; font-weight: 700; font-family: var(--font); transition: gap 0.25s; }
    .rn-card:hover .rn-arrow { padding-left: 4px; }

    .post-cta { padding: 80px 0 100px; background: var(--bg); text-align: center; }
    .cta-pill-tag { display: inline-block; padding: 4px 12px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 100px; margin-bottom: 16px; }
    .post-cta h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: -1px; color: var(--navy); margin-bottom: 12px; max-width: 540px; margin-left: auto; margin-right: auto; }
    .post-cta p { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; max-width: 480px; margin-left: auto; margin-right: auto; }

    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: 12px; font-family: var(--font); font-size: 14px; font-weight: 600; text-decoration: none; border: none; transition: all 0.25s; }
    .btn-am { background: var(--amber); color: white; box-shadow: 0 4px 16px rgba(217,119,6,0.28); }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }
    .btn-outline { background: transparent; border: 1.5px solid var(--bdr); color: var(--ink-soft); }
    .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    @media (max-width: 1080px) { .nav-links { display: none; } }
    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .post-hero { padding: 110px 0 44px; }
      .post-body { padding: 52px 0 80px; }
      .post-body .read-wrap { font-size: 16px; }
      .post-body p:first-of-type::first-letter { font-size: 46px; }
    }

/* ── from rcm-scenarios.html ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --green-tint: rgba(5,150,105,0.1);
      --red:        #dc2626;
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --serif: 'Source Serif 4', Georgia, serif;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);

      /* Per-article accent — GREEN */
      --accent:    var(--green);
      --accent-bg: var(--green-tint);
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .read-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--cyan)); width: 0%; z-index: 110; transition: width 0.08s linear; }

    nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 20px; height: 60px; padding: 8px 26px 8px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), 0 2px 10px rgba(30, 46, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background 0.4s, box-shadow 0.4s; }
    nav.scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 14px 44px rgba(30, 46, 92, 0.18), 0 2px 12px rgba(30, 46, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark { height: 48px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28)); line-height: 1; }
    .logo-text { font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--navy), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; line-height: 1; display: inline-flex; align-items: center; }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a { font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; line-height: 1; display: inline-flex; align-items: center; }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.current { color: var(--violet); font-weight: 600; }

    .auth-pills { position: fixed; top: 14px; right: 14px; z-index: 101; display: flex; align-items: center; gap: 8px; }
    .btn-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 100px; font-family: var(--font); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
    .btn-pill.ghost { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.55); color: var(--navy); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14); }
    .btn-pill.ghost:hover { background: rgba(255, 255, 255, 0.88); transform: translateY(-1px); }
    .btn-pill.primary { background: var(--amber); color: white; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 36px rgba(217, 119, 6, 0.32); }
    .btn-pill.primary:hover { background: #b45309; transform: translateY(-1px); }

    .post-hero { padding: 130px 0 60px; background: radial-gradient(ellipse 60% 50% at 30% 30%, var(--accent-bg), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 60%, var(--accent-bg), transparent 60%), var(--bg); position: relative; overflow: hidden; border-bottom: 1px solid var(--bdr-soft); }
    .post-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,46,92,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(30,46,92,0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); }
    .post-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; z-index: 1; }

    .back-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 8px 14px; background: white; border: 1px solid var(--bdr); border-radius: 100px; margin-bottom: 32px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.22s; }
    .back-link:hover { background: var(--bg-soft); border-color: var(--navy); color: var(--navy); transform: translateY(-1px); }

    .post-tag { display: inline-block; padding: 6px 14px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 5px; margin-bottom: 22px; }
    .post-h { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--navy); margin-bottom: 22px; }

    .post-meta { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.4px; text-transform: uppercase; }
    .post-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }

    .post-body { padding: 72px 0 100px; }
    .post-body .read-wrap { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: #243248; }
    .post-body p { margin-bottom: 22px; }
    .post-body p:first-of-type::first-letter { font-family: var(--font); font-size: 60px; font-weight: 800; float: left; line-height: 0.92; padding: 4px 12px 0 0; color: var(--accent); margin-top: 2px; }
    .post-body h3 { font-family: var(--font); font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; margin: 40px 0 14px; line-height: 1.25; }
    .post-body h4 { font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--navy); margin: 28px 0 10px; }
    .post-body ol, .post-body ul { margin: 0 0 24px 4px; padding-left: 24px; }
    .post-body li { margin-bottom: 10px; padding-left: 4px; }
    .post-body strong { color: var(--navy); font-weight: 600; }
    .post-body code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-soft); border: 1px solid var(--bdr-soft); padding: 2px 7px; border-radius: 5px; color: var(--navy); }
    .post-body blockquote { margin: 32px 0; padding: 22px 30px; background: var(--accent-bg); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; font-style: italic; color: var(--navy); font-size: 17px; }
    .post-body .callout { font-family: var(--font); margin: 32px 0; padding: 24px 28px; background: white; border: 1.5px solid var(--accent); border-radius: 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); box-shadow: 0 4px 16px rgba(30,46,92,0.05); }
    .post-body .callout-h { font-weight: 800; color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: 1.2px; margin-bottom: 10px; font-family: var(--mono); }

    .read-next { padding: 64px 0 80px; background: var(--bg-soft); border-top: 1px solid var(--bdr-soft); border-bottom: 1px solid var(--bdr-soft); }
    .rn-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
    .rn-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
    .rn-card { display: block; background: white; border: 1px solid var(--bdr); border-radius: 16px; padding: 28px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
    .rn-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rn-c, var(--red)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
    .rn-card:hover { transform: translateY(-3px); border-color: var(--rn-c, var(--red)); box-shadow: 0 16px 36px rgba(30, 46, 92, 0.08); }
    .rn-card:hover::before { transform: scaleX(1); }
    .rn-tag { display: inline-block; padding: 4px 10px; background: var(--rn-bg, rgba(220,38,38,0.08)); color: var(--rn-c, var(--red)); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; border-radius: 5px; margin-bottom: 12px; }
    .rn-title { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.3; margin-bottom: 14px; }
    .rn-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.4px; display: flex; align-items: center; gap: 10px; }
    .rn-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }
    .rn-meta .rn-arrow { margin-left: auto; color: var(--rn-c, var(--red)); font-size: 14px; font-weight: 700; font-family: var(--font); transition: gap 0.25s; }
    .rn-card:hover .rn-arrow { padding-left: 4px; }

    .post-cta { padding: 80px 0 100px; background: var(--bg); text-align: center; }
    .cta-pill-tag { display: inline-block; padding: 4px 12px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 100px; margin-bottom: 16px; }
    .post-cta h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: -1px; color: var(--navy); margin-bottom: 12px; max-width: 540px; margin-left: auto; margin-right: auto; }
    .post-cta p { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; max-width: 480px; margin-left: auto; margin-right: auto; }

    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: 12px; font-family: var(--font); font-size: 14px; font-weight: 600; text-decoration: none; border: none; transition: all 0.25s; }
    .btn-am { background: var(--amber); color: white; box-shadow: 0 4px 16px rgba(217,119,6,0.28); }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }
    .btn-outline { background: transparent; border: 1.5px solid var(--bdr); color: var(--ink-soft); }
    .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    @media (max-width: 1080px) { .nav-links { display: none; } }
    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .post-hero { padding: 110px 0 44px; }
      .post-body { padding: 52px 0 80px; }
      .post-body .read-wrap { font-size: 16px; }
      .post-body p:first-of-type::first-letter { font-size: 46px; }
    }

/* ── from b2b-b2cs-b2cl-trap.html ───────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1e2e5c;
      --navy-deep:  #131e3f;
      --cyan:       #2bb5c2;
      --cyan-l:     #4dd8e5;
      --cyan-d:     #1d97a3;
      --cyan-tint:  #e8f7f9;
      --amber:      #d97706;
      --amber-tint: #fef3e2;
      --green:      #059669;
      --red:        #dc2626;
      --red-tint:   rgba(220,38,38,0.08);
      --violet:     #7c5cff;
      --violet-tint:#f0ecff;
      --bg:       #ffffff;
      --bg-soft:  #fafbfd;
      --ink:      #131e3f;
      --ink-soft: #4a5775;
      --ink-mute: #8290ad;
      --bdr:      #e6e9f0;
      --bdr-soft: #eef0f6;
      --font:  'Outfit', sans-serif;
      --mono:  'JetBrains Mono', monospace;
      --serif: 'Source Serif 4', Georgia, serif;
      --grad: linear-gradient(135deg, var(--navy) 0%, #243b80 60%, var(--cyan) 140%);

      /* Per-article accent — RED */
      --accent:    var(--red);
      --accent-bg: var(--red-tint);
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }

    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .read-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--cyan)); width: 0%; z-index: 110; transition: width 0.08s linear; }

    nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 20px; height: 60px; padding: 8px 26px 8px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14), 0 2px 10px rgba(30, 46, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background 0.4s, box-shadow 0.4s; }
    nav.scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 14px 44px rgba(30, 46, 92, 0.18), 0 2px 12px rgba(30, 46, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

    .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1; }
    .logo-mark { height: 48px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(43,181,194,0.28)); line-height: 1; }
    .logo-text { font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--navy), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; line-height: 1; display: inline-flex; align-items: center; }

    .nav-links { display: flex; gap: 22px; list-style: none; align-items: center; line-height: 1; }
    .nav-links li { display: flex; align-items: center; line-height: 1; }
    .nav-links a { font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; line-height: 1; display: inline-flex; align-items: center; }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.current { color: var(--violet); font-weight: 600; }

    .auth-pills { position: fixed; top: 14px; right: 14px; z-index: 101; display: flex; align-items: center; gap: 8px; }
    .btn-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 100px; font-family: var(--font); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
    .btn-pill.ghost { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.55); color: var(--navy); box-shadow: 0 12px 36px rgba(30, 46, 92, 0.14); }
    .btn-pill.ghost:hover { background: rgba(255, 255, 255, 0.88); transform: translateY(-1px); }
    .btn-pill.primary { background: var(--amber); color: white; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 36px rgba(217, 119, 6, 0.32); }
    .btn-pill.primary:hover { background: #b45309; transform: translateY(-1px); }

    .post-hero { padding: 130px 0 60px; background: radial-gradient(ellipse 60% 50% at 30% 30%, var(--accent-bg), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 60%, var(--accent-bg), transparent 60%), var(--bg); position: relative; overflow: hidden; border-bottom: 1px solid var(--bdr-soft); }
    .post-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,46,92,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(30,46,92,0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%); }
    .post-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; z-index: 1; }

    .back-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 8px 14px; background: white; border: 1px solid var(--bdr); border-radius: 100px; margin-bottom: 32px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.22s; }
    .back-link:hover { background: var(--bg-soft); border-color: var(--navy); color: var(--navy); transform: translateY(-1px); }

    .post-tag { display: inline-block; padding: 6px 14px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 5px; margin-bottom: 22px; }
    .post-h { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--navy); margin-bottom: 22px; }

    .post-meta { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.4px; text-transform: uppercase; }
    .post-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }

    .post-body { padding: 72px 0 100px; }
    .post-body .read-wrap { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: #243248; }
    .post-body p { margin-bottom: 22px; }
    .post-body p:first-of-type::first-letter { font-family: var(--font); font-size: 60px; font-weight: 800; float: left; line-height: 0.92; padding: 4px 12px 0 0; color: var(--accent); margin-top: 2px; }
    .post-body h3 { font-family: var(--font); font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; margin: 40px 0 14px; line-height: 1.25; }
    .post-body h4 { font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--navy); margin: 28px 0 10px; }
    .post-body ol, .post-body ul { margin: 0 0 24px 4px; padding-left: 24px; }
    .post-body li { margin-bottom: 10px; padding-left: 4px; }
    .post-body strong { color: var(--navy); font-weight: 600; }
    .post-body code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-soft); border: 1px solid var(--bdr-soft); padding: 2px 7px; border-radius: 5px; color: var(--navy); }
    .post-body blockquote { margin: 32px 0; padding: 22px 30px; background: var(--accent-bg); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; font-style: italic; color: var(--navy); font-size: 17px; }
    .post-body .callout { font-family: var(--font); margin: 32px 0; padding: 24px 28px; background: white; border: 1.5px solid var(--accent); border-radius: 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); box-shadow: 0 4px 16px rgba(30,46,92,0.05); }
    .post-body .callout-h { font-weight: 800; color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: 1.2px; margin-bottom: 10px; font-family: var(--mono); }

    .read-next { padding: 64px 0 80px; background: var(--bg-soft); border-top: 1px solid var(--bdr-soft); border-bottom: 1px solid var(--bdr-soft); }
    .rn-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
    .rn-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
    .rn-card { display: block; background: white; border: 1px solid var(--bdr); border-radius: 16px; padding: 28px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
    .rn-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rn-c, var(--cyan-d)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
    .rn-card:hover { transform: translateY(-3px); border-color: var(--rn-c, var(--cyan-d)); box-shadow: 0 16px 36px rgba(30, 46, 92, 0.08); }
    .rn-card:hover::before { transform: scaleX(1); }
    .rn-tag { display: inline-block; padding: 4px 10px; background: var(--rn-bg, var(--cyan-tint)); color: var(--rn-c, var(--cyan-d)); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; border-radius: 5px; margin-bottom: 12px; }
    .rn-title { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.3; margin-bottom: 14px; }
    .rn-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.4px; display: flex; align-items: center; gap: 10px; }
    .rn-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }
    .rn-meta .rn-arrow { margin-left: auto; color: var(--rn-c, var(--cyan-d)); font-size: 14px; font-weight: 700; font-family: var(--font); transition: gap 0.25s; }
    .rn-card:hover .rn-arrow { padding-left: 4px; }

    .post-cta { padding: 80px 0 100px; background: var(--bg); text-align: center; }
    .cta-pill-tag { display: inline-block; padding: 4px 12px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: 100px; margin-bottom: 16px; }
    .post-cta h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: -1px; color: var(--navy); margin-bottom: 12px; max-width: 540px; margin-left: auto; margin-right: auto; }
    .post-cta p { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; max-width: 480px; margin-left: auto; margin-right: auto; }

    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: 12px; font-family: var(--font); font-size: 14px; font-weight: 600; text-decoration: none; border: none; transition: all 0.25s; }
    .btn-am { background: var(--amber); color: white; box-shadow: 0 4px 16px rgba(217,119,6,0.28); }
    .btn-am:hover { background: #b45309; transform: translateY(-1px); }
    .btn-outline { background: transparent; border: 1.5px solid var(--bdr); color: var(--ink-soft); }
    .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

    /* ─── SITE FOOTER (rich, multi-column) ─── */
    .site-footer { position: relative; background: linear-gradient(180deg, #0a1430 0%, #131e3f 60%, #1e2e5c 100%); color: rgba(255, 255, 255, 0.7); padding: 88px 0 32px; overflow: hidden; }
    .footer-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; background: radial-gradient(ellipse 60% 100% at 20% 0%, rgba(43,181,194,0.2), transparent 60%), radial-gradient(ellipse 50% 80% at 80% 0%, rgba(124,92,255,0.14), transparent 60%); pointer-events: none; }
    .site-footer::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; }
    .site-footer .wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
    .footer-brand { max-width: 300px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; line-height: 1; }
    .footer-logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(43,181,194,0.4)); }
    .footer-logo span { font-size: 23px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1; }
    .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 22px; }
    .footer-tagline strong { color: rgba(255,255,255,0.88); font-weight: 600; }
    .footer-social { display: flex; gap: 8px; }
    .footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.22s; text-decoration: none; }
    .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: white; transform: translateY(-2px); }
    .footer-col-h { font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-family: var(--mono); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
    .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan-l); }
    .footer-newsletter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; position: relative; overflow: hidden; }
    .footer-newsletter::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,194,0.15), transparent 65%); pointer-events: none; }
    .newsletter-h { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.3px; }
    .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
    .newsletter-form { display: flex; gap: 8px; position: relative; z-index: 1; }
    .newsletter-form input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-family: var(--font); font-size: 14px; color: white; outline: none; transition: all 0.2s; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(43,181,194,0.18); }
    .newsletter-form button { padding: 12px 22px; background: var(--amber); border: none; border-radius: 10px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: white; cursor: pointer; white-space: nowrap; transition: all 0.2s; box-shadow: 0 4px 14px rgba(217,119,6,0.32); }
    .newsletter-form button:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,119,6,0.42); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }
    .footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
    .trust-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 5px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; font-family: var(--mono); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 960px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; max-width: none; margin-bottom: 8px; }
      .footer-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 64px 0 28px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { width: 100%; }
    }

    @media (max-width: 1080px) { .nav-links { display: none; } }
    @media (max-width: 720px) {
      .btn-pill.ghost { display: none; }
      .btn-pill.primary { padding: 0 14px; height: 36px; font-size: 12px; }
      .auth-pills { top: 10px; right: 10px; }
      nav { top: 10px; height: 54px; padding: 6px 20px 6px 14px; }
      .logo-mark { height: 40px; width: auto; }
      .logo-text { font-size: 17px; }
      .post-hero { padding: 110px 0 44px; }
      .post-body { padding: 52px 0 80px; }
      .post-body .read-wrap { font-size: 16px; }
      .post-body p:first-of-type::first-letter { font-size: 46px; }
    }

/* ─── LEGAL PAGES (privacy, terms, refund) ──────────────────────── */
.legal-hero { padding: 140px 0 56px; background: var(--bg-soft); border-bottom: 1px solid var(--bdr-soft); }
.legal-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
.legal-eyebrow {
  display: inline-block; padding: 5px 13px;
  background: var(--cyan-tint); color: var(--cyan-d);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  border-radius: 100px; margin-bottom: 20px;
}
.legal-hero h1 {
  font-size: clamp(30px, 4vw, 42px); font-weight: 800;
  line-height: 1.1; letter-spacing: -1.2px;
  color: var(--navy); margin-bottom: 14px;
}
.legal-hero p {
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.6;
  max-width: 580px; margin: 0 auto;
}
.legal-meta {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 22px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); letter-spacing: 0.4px; text-transform: uppercase;
}
.legal-meta .meta-dot { width: 3px; height: 3px; background: var(--bdr); border-radius: 50%; }

.legal-body { padding: 56px 0 100px; background: var(--bg); }
.legal-body .read-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.legal-body { font-family: var(--font); font-size: 15.5px; line-height: 1.72; color: var(--ink); }
.legal-body p { margin-bottom: 18px; }
.legal-body h2 {
  font-size: 22px; font-weight: 800; color: var(--navy);
  margin: 44px 0 14px; letter-spacing: -0.4px;
  padding-top: 28px; border-top: 1px solid var(--bdr-soft);
}
.legal-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h3 { font-size: 16.5px; font-weight: 700; color: var(--navy); margin: 28px 0 10px; letter-spacing: -0.2px; }
.legal-body h4 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin: 22px 0 8px; }
.legal-body ul, .legal-body ol { margin: 0 0 18px 0; padding-left: 24px; }
.legal-body li { margin-bottom: 8px; line-height: 1.65; }
.legal-body strong { color: var(--navy); font-weight: 700; }
.legal-body a { color: var(--cyan-d); }
.legal-body a:hover { color: var(--navy); }

.legal-callout {
  background: var(--amber-tint); border-left: 4px solid var(--amber);
  padding: 16px 22px; border-radius: 0 10px 10px 0;
  margin: 24px 0; font-size: 14.5px; line-height: 1.6;
}
.legal-callout strong { color: var(--amber); text-transform: uppercase; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; display: block; margin-bottom: 6px; }

.legal-table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 13.5px; }
.legal-table th, .legal-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--bdr-soft); vertical-align: top;
}
.legal-table th {
  background: var(--bg-soft); font-weight: 700; color: var(--navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
}
.legal-table tr:last-child td { border-bottom: none; }

.placeholder {
  background: var(--amber-tint); color: var(--amber);
  padding: 1px 7px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.86em; font-weight: 600;
}

.legal-toc {
  background: var(--bg-soft); border: 1px solid var(--bdr-soft);
  border-radius: 12px; padding: 22px 26px; margin-bottom: 40px;
}
.legal-toc-h { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-mute); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 12px; }
.legal-toc ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 22px; font-size: 14px; }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; }
.legal-toc a:hover { color: var(--navy); text-decoration: underline; }

@media (max-width: 720px) {
  .legal-hero { padding: 110px 0 40px; }
  .legal-body { padding: 44px 0 80px; }
  .legal-body .read-wrap { font-size: 15px; }
  .legal-toc ol { columns: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   TRY-IT-LIVE: staged sales-entry → tax-invoice → exports demo
   ═══════════════════════════════════════════════════════════════ */

/* ── Checkout secure-checkout chip (top-left floating) ──
   Mirrors .auth-pills positioning but on the LEFT, so it stays out of the
   dynamic island's centre lane. Glass pill styling matches the nav vocabulary. */
.checkout-secure-chip {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 101;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--cyan-d);
  font-family: var(--font);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1px;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 12px 36px rgba(30, 46, 92, 0.14),
    0 2px 10px rgba(30, 46, 92, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.checkout-secure-chip svg { flex-shrink: 0; color: var(--cyan-d); }
@media (max-width: 720px) {
  .checkout-secure-chip { top: 10px; left: 10px; height: 38px; padding: 0 14px; font-size: 12px; }
  .checkout-secure-chip svg { width: 12px; height: 12px; }
}

/* ── Trigger button (visible on the page, opens the modal) ──
   White glass pill — matches the .btn-pill.ghost language of the nav. */
.btn-trydemo {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px;
  height: 44px; padding: 0 22px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 100px;
  font-family: var(--font);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 12px 36px rgba(30, 46, 92, 0.14),
    0 2px 10px rgba(30, 46, 92, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.btn-trydemo:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
  box-shadow:
    0 16px 44px rgba(30, 46, 92, 0.18),
    0 2px 12px rgba(43, 181, 194, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.btn-trydemo .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(43, 181, 194, 0.18), 0 0 10px rgba(43, 181, 194, 0.55);
  animation: trydemo-pulse 1.8s infinite ease-in-out;
}
@keyframes trydemo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* ── Overlay ── */
.trydemo-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(13, 20, 40, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.trydemo-overlay.open { opacity: 1; pointer-events: auto; }

/* ── Card ── */
.trydemo-card {
  position: relative;
  width: 100%; max-width: 940px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(13,20,40,0.35);
  padding: 28px 32px 32px;
  font-family: var(--font);
  color: var(--ink);
  transform: translateY(20px) scale(.985); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
}
.trydemo-overlay.open .trydemo-card { transform: translateY(0) scale(1); opacity: 1; }

/* Force every native form control inside the widget to use Outfit
   (browsers ignore body's font on <button>/<input>/<select>/<textarea>) */
.trydemo-card button,
.trydemo-card input,
.trydemo-card select,
.trydemo-card textarea,
.trydemo-card label {
  font-family: var(--font);
}

.trydemo-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 24px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease, color .15s ease;
  z-index: 2;
}
.trydemo-close:hover { background: var(--bdr-soft); color: var(--navy); }

/* ── Stepper ── */
.trydemo-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: -4px 0 18px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--bdr-soft);
}
.trydemo-step {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink-mute);
  font-size: 12.5px; font-weight: 600;
  transition: color .2s ease;
}
.trydemo-step-num {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bdr-soft); color: var(--ink-mute);
  font-size: 12.5px; font-weight: 800;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.trydemo-step-line {
  width: 56px; height: 2px;
  background: var(--bdr-soft);
  margin: 0 14px;
  border-radius: 2px;
}
.trydemo-step.active        { color: var(--navy); }
.trydemo-step.active .trydemo-step-num {
  background: var(--navy); color: #fff;
  box-shadow: 0 0 0 4px rgba(30,46,92,0.10);
}
.trydemo-step.done .trydemo-step-num {
  background: var(--cyan); color: #fff;
}
.trydemo-step.done .trydemo-step-num::after { content: ""; }
.trydemo-step.done           { color: var(--ink-soft); }

/* ── Stage pane transitions ── */
.trydemo-stage { animation: trydemo-fade-in .28s ease both; }
@keyframes trydemo-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.trydemo-stage[hidden] { display: none !important; }

.trydemo-stage-head { margin-bottom: 18px; }
.trydemo-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--cyan-d);
  margin-bottom: 12px;
}
.trydemo-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2bff8a; box-shadow: 0 0 8px #2bff8a;
  animation: trydemo-pulse 1.6s infinite ease-in-out;
}
.trydemo-stage-head h3 {
  margin: 0 0 8px;
  font-size: 26px; font-weight: 800;
  color: var(--navy); line-height: 1.2;
  letter-spacing: -0.01em;
}
.trydemo-stage-head h3 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--cyan), var(--navy));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trydemo-stage-head p {
  margin: 0;
  font-size: 14.5px; color: var(--ink-soft);
  line-height: 1.5;
}

/* ── Preset chips ── */
.trydemo-presets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f6f8ff 0%, #eef9fb 100%);
  border-radius: 12px;
  border: 1px solid #e6edf7;
}
.trydemo-presets-label {
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .5px;
  margin-right: 4px;
}
.trydemo-preset {
  padding: 6px 12px;
  background: #fff; color: var(--navy);
  border: 1px solid var(--bdr-soft);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.trydemo-preset:hover { border-color: var(--cyan); color: var(--cyan-d); }
.trydemo-preset.active {
  background: var(--navy); color: #fff; border-color: var(--navy);
}

/* ── Supplier card ── */
.trydemo-supplier-card {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #fcfdff;
  border: 1px dashed #c8d4e6;
  border-radius: 12px;
}
.trydemo-supplier-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.trydemo-supplier-label {
  font-size: 10.5px; font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .6px;
}
.trydemo-supplier-pill {
  font-size: 10.5px; font-weight: 700;
  color: var(--amber);
  background: #fff7e6;
  border: 1px solid #ffd591;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .2px;
}
.trydemo-supplier-name {
  font-size: 15px; font-weight: 700;
  color: var(--navy);
}
.trydemo-supplier-meta {
  font-size: 12.5px; color: var(--ink-soft);
  margin-top: 2px;
}
.trydemo-supplier-meta strong { color: var(--navy); font-weight: 700; }

/* ── Form sections ── */
.trydemo-section { margin-bottom: 16px; }
.trydemo-section-h {
  font-size: 11px; font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .7px;
  margin-bottom: 8px;
}
.trydemo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trydemo-row.td-rate-row { grid-template-columns: 1fr; max-width: 320px; margin-top: 14px; }

.trydemo-field { display: flex; flex-direction: column; }
.trydemo-field label {
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.trydemo-field input[type="text"],
.trydemo-field input[type="number"],
.trydemo-field input[type="date"],
.trydemo-field select {
  padding: 9px 12px;
  border: 1px solid var(--bdr-soft);
  border-radius: 8px;
  font-size: 14px; color: var(--navy);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.trydemo-field input:focus,
.trydemo-field select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(43,181,194,0.18);
}
.trydemo-field-hint {
  font-size: 11.5px; color: var(--ink-mute);
  margin-top: 4px;
}
.trydemo-field-hint.ok    { color: var(--green); }
.trydemo-field-hint.error { color: var(--red); }

/* ── Radio group ── */
.trydemo-radio-group { display: flex; gap: 10px; }
.trydemo-radio {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--bdr-soft);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px; color: var(--navy);
  transition: all .15s ease;
  flex: 1;
}
.trydemo-radio em { font-style: normal; color: var(--ink-mute); font-size: 12px; }
.trydemo-radio.selected {
  border-color: var(--cyan); background: #f0fafc; color: var(--navy);
}
.trydemo-radio input { accent-color: var(--cyan); }

/* ── Line items grid ── */
.trydemo-lines { display: flex; flex-direction: column; gap: 6px; }
.trydemo-line-head,
.trydemo-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 60px 100px 110px;
  gap: 8px; align-items: center;
}
.trydemo-line-head {
  padding: 6px 4px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .4px;
}
.trydemo-line input {
  padding: 8px 10px;
  border: 1px solid var(--bdr-soft);
  border-radius: 7px;
  font-size: 13px; color: var(--navy);
  background: #fff;
  font-family: inherit;
  min-width: 0;
}
.trydemo-line input:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(43,181,194,0.18);
}
.trydemo-line input[type="number"] { text-align: right; }
.td-line-total {
  text-align: right;
  font-size: 13.5px; font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* ── Running totals strip ── */
.trydemo-running-totals {
  display: flex; flex-wrap: wrap;
  gap: 18px;
  padding: 14px 18px;
  margin: 16px 0 4px;
  background: linear-gradient(135deg, var(--navy) 0%, #243a73 100%);
  color: #fff;
  border-radius: 12px;
}
.trydemo-rt-item { display: flex; flex-direction: column; }
.trydemo-rt-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: rgba(255,255,255,0.65);
}
.trydemo-rt-value {
  font-size: 16px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.trydemo-rt-item.total .trydemo-rt-value {
  color: #2bff8a;
  font-size: 18px;
}
.trydemo-rt-spacer { flex: 1; }

/* ── Stage footer ── */
.trydemo-stage-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--bdr-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.trydemo-stage-hint {
  font-size: 12.5px; color: var(--ink-mute);
  font-style: italic;
}
.trydemo-stage-foot .btn { padding: 11px 20px; font-size: 13.5px; }
.trydemo-stage-foot .btn-outline {
  padding: 10px 16px;
  border: 1px solid var(--bdr-soft);
  background: #fff; color: var(--navy);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .15s ease;
}
.trydemo-stage-foot .btn-outline:hover { border-color: var(--navy); background: #f6f8ff; }

.trydemo-stage-foot-cta { align-items: flex-end; }
.trydemo-foot-left { display: flex; gap: 8px; }
.trydemo-final-cta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.trydemo-final-cta span {
  font-size: 13px; color: var(--ink-soft); font-weight: 600;
}

/* ════════════════ STAGE 2 — TAX INVOICE PREVIEW ════════════════ */
.trydemo-invoice {
  background: #fff;
  border: 1px solid #d4dceb;
  border-radius: 10px;
  padding: 30px 34px;
  box-shadow: 0 4px 20px rgba(13,20,40,0.06);
  font-family: var(--font);
  color: var(--navy);
  position: relative;
}
.trydemo-invoice::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--cyan) 100%);
  border-radius: 10px 10px 0 0;
}
.inv-title-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--navy);
}
.inv-title { text-align: left; }
.inv-title-h {
  font-size: 22px; font-weight: 800; color: var(--navy);
  letter-spacing: .04em;
}
.inv-title-sub {
  font-size: 11px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .8px;
  margin-top: 2px;
}
.inv-meta { text-align: right; font-size: 12.5px; }
.inv-meta div { margin-bottom: 3px; }
.inv-meta strong { color: var(--navy); font-weight: 700; }
.inv-meta-label {
  display: inline-block; min-width: 80px;
  color: var(--ink-mute);
  font-weight: 600;
}

.inv-parties {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 18px;
}
.inv-party {
  padding: 12px 14px;
  background: #fafbfd;
  border-left: 3px solid var(--bdr-soft);
  border-radius: 0 6px 6px 0;
}
.inv-party-h {
  font-size: 10.5px; font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 6px;
}
.inv-party-name {
  font-size: 14.5px; font-weight: 700; color: var(--navy);
  margin-bottom: 2px;
}
.inv-party-addr { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.inv-party-gstin {
  margin-top: 6px;
  font-size: 12.5px; color: var(--navy);
  font-family: var(--mono);
}
.inv-party-gstin-label {
  display: inline-block; min-width: 56px;
  color: var(--ink-mute); font-family: inherit;
}
.inv-party-state {
  font-size: 12px; color: var(--ink-soft);
  margin-top: 2px;
}
.inv-party-state strong { color: var(--navy); }

.inv-pos {
  background: #f0fafc;
  border: 1px solid #c2e7ec;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  margin-bottom: 18px;
  color: var(--navy);
}
.inv-pos strong { color: var(--cyan-d); }
.inv-pos .pos-flag {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  background: var(--cyan-d); color: #fff;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
}

.inv-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 12.5px;
}
.inv-table thead th {
  background: var(--navy); color: #fff;
  padding: 9px 10px;
  text-align: left;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}
.inv-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid #e6edf7;
  vertical-align: top;
}
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table .center { text-align: center; }
.inv-table tfoot td {
  padding: 8px 10px;
  font-size: 12.5px;
  border-top: 1px solid var(--bdr-soft);
}
.inv-table tfoot tr.subtotal td { color: var(--ink-soft); }
.inv-table tfoot tr.grand td {
  font-size: 14.5px; font-weight: 800;
  color: var(--navy);
  background: #f6f8ff;
  border-top: 2px solid var(--navy);
}
.inv-amount-words {
  margin: -4px 0 18px;
  padding: 10px 14px;
  background: #fcfdff; border: 1px solid var(--bdr-soft);
  border-radius: 6px;
  font-size: 12.5px; color: var(--navy);
}
.inv-amount-words strong { color: var(--ink-mute); font-weight: 700; }

.inv-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 18px;
  border-top: 1px dashed var(--bdr-soft);
  margin-top: 8px;
}
.inv-foot-note { font-size: 11.5px; color: var(--ink-mute); max-width: 56%; line-height: 1.45; }
.inv-foot-note strong { color: var(--navy); }
.inv-sig { text-align: right; }
.inv-sig-line {
  width: 200px; height: 1px; background: var(--ink-mute);
  margin-bottom: 6px; margin-left: auto;
}
.inv-sig-name {
  font-size: 12px; color: var(--ink-soft); font-weight: 600;
}
.inv-sig-role {
  font-size: 11px; color: var(--ink-mute); font-style: italic;
}

/* ════════════════ STAGE 3 — FILING EXPORTS ════════════════ */
.trydemo-class-banner {
  margin-bottom: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  display: flex; align-items: center; gap: 16px;
}
.trydemo-class-banner .tdcb-badge {
  font-size: 13px; font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: .5px;
  white-space: nowrap;
}
.trydemo-class-banner .tdcb-body { flex: 1; }
.trydemo-class-banner .tdcb-section {
  font-size: 13.5px; font-weight: 700; color: var(--navy);
  margin-bottom: 2px;
}
.trydemo-class-banner .tdcb-reason {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
}

/* Per-classification colors */
.trydemo-class-banner.b2b      { background: #eefbf3; border-color: #b9ecc8; }
.trydemo-class-banner.b2b .tdcb-badge      { background: var(--green); color: #fff; }
.trydemo-class-banner.b2cs     { background: #fff7e6; border-color: #ffd591; }
.trydemo-class-banner.b2cs .tdcb-badge     { background: var(--amber); color: #fff; }
.trydemo-class-banner.b2cl     { background: #fff1f0; border-color: #ffccc7; }
.trydemo-class-banner.b2cl .tdcb-badge     { background: var(--red); color: #fff; }
.trydemo-class-banner.exempt   { background: #f4f0ff; border-color: #d3bff5; }
.trydemo-class-banner.exempt .tdcb-badge   { background: var(--violet); color: #fff; }

/* Exports grid */
.trydemo-exports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.trydemo-out-card {
  background: #fcfdff;
  border: 1px solid var(--bdr-soft);
  border-radius: 12px;
  padding: 14px 16px;
}
.trydemo-out-h {
  font-size: 11px; font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 10px;
}

/* Tally voucher */
.trydemo-tally {
  background: #0f1730; color: #cdd6f4;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.6;
}
.tly-h {
  color: #2bff8a; font-weight: 800;
  font-size: 11.5px; letter-spacing: .5px;
  margin-bottom: 6px; text-transform: uppercase;
}
.tly-row { display: flex; justify-content: space-between; gap: 12px; }
.tly-row .tly-k { color: #8a94c4; }
.tly-row .tly-v { color: #fff; font-weight: 600; }
.tly-divider {
  border-top: 1px dashed #2c365a;
  margin: 8px 0;
}
.tly-dr  { color: #ff8aa0; }
.tly-cr  { color: #2bff8a; }
.tly-amt { color: #fff; font-weight: 700; }

/* JSON */
.trydemo-json {
  background: #0f1730; color: #e2e8f7;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12px; line-height: 1.55;
  overflow: auto;
  margin: 0;
  max-height: 360px;
  white-space: pre;
}
.trydemo-json .jk { color: #82d2ff; }
.trydemo-json .js { color: #ffd591; }
.trydemo-json .jn { color: #2bff8a; }
.trydemo-json .jb { color: #ff8aa0; }

/* ── Responsive ── */
@media (max-width: 760px) {
  .trydemo-overlay { padding: 16px 10px; }
  .trydemo-card { padding: 22px 18px 24px; border-radius: 14px; }
  .trydemo-stepper { gap: 0; }
  .trydemo-step-label { display: none; }
  .trydemo-step-line { width: 36px; margin: 0 8px; }
  .trydemo-stage-head h3 { font-size: 21px; }
  .trydemo-row { grid-template-columns: 1fr; }
  .trydemo-radio-group { flex-direction: column; }
  .trydemo-line-head { display: none; }
  .trydemo-line {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px; background: #fafbfd; border-radius: 8px;
  }
  .trydemo-line .td-desc { grid-column: 1 / -1; }
  .trydemo-line .td-hsn  { grid-column: 1 / -1; }
  .td-line-total { grid-column: 1 / -1; text-align: right; }
  .inv-parties { grid-template-columns: 1fr; gap: 12px; }
  .inv-title-row { flex-direction: column; gap: 12px; align-items: flex-start; }
  .inv-meta { text-align: left; }
  .inv-table { font-size: 11.5px; }
  .inv-table thead th, .inv-table tbody td, .inv-table tfoot td { padding: 6px 6px; }
  .inv-foot { flex-direction: column; gap: 18px; align-items: flex-start; }
  .inv-sig-line { margin-left: 0; }
  .inv-foot-note { max-width: 100%; }
  .trydemo-exports { grid-template-columns: 1fr; }
  .trydemo-stage-foot { flex-direction: column; align-items: stretch; }
  .trydemo-stage-foot-cta { align-items: stretch; }
  .trydemo-final-cta { align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH SYSTEM — unified modal, logged-in pill, dropdown,
   verify-email banner, welcome toast.
   ═══════════════════════════════════════════════════════════════ */

/* ── Auth modal overlay + card ─────────────────────────────────── */
.auth-modal-overlay {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(13, 20, 40, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.auth-modal-overlay.open { opacity: 1; pointer-events: auto; }

.auth-modal-card {
  position: relative;
  width: 100%; max-width: 440px;
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px 24px;
  box-shadow: 0 30px 80px rgba(13, 20, 40, 0.32);
  font-family: var(--font);
  color: var(--ink);
  transform: translateY(20px) scale(.985); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
}
.auth-modal-overlay.open .auth-modal-card { transform: translateY(0) scale(1); opacity: 1; }

.auth-modal-card button,
.auth-modal-card input,
.auth-modal-card select,
.auth-modal-card label {
  font-family: var(--font);
}

.auth-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auth-modal-close:hover { background: var(--bdr-soft); color: var(--navy); }

.auth-modal-h { text-align: center; margin-bottom: 18px; }
.auth-modal-logo {
  height: 40px; width: auto;
  margin-bottom: 12px;
}
.auth-modal-h h3 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 800;
  color: var(--navy); letter-spacing: -0.01em;
}
.auth-modal-h p {
  margin: 0;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.45;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.auth-tabs {
  position: relative;
  display: flex;
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.auth-tab {
  position: relative;
  flex: 1;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s ease;
  z-index: 1;
}
.auth-tab.active { color: var(--navy); }
.auth-tab:hover:not(.active) { color: var(--navy); }
.auth-tab-underline {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(13,20,40,0.08);
  transition: transform .25s cubic-bezier(.34, 1.2, .64, 1);
  z-index: 0;
}
.auth-modal-card[data-auth-mode="signup"] .auth-tab-underline {
  transform: translateX(100%);
}

/* ── Forms ───────────────────────────────────────────────────── */
.auth-form {
  display: flex; flex-direction: column; gap: 12px;
}
.auth-form[hidden] { display: none; }

.auth-field { display: flex; flex-direction: column; }
.auth-field label {
  font-size: 11px; font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 6px;
}
.auth-field input[type="email"],
.auth-field input[type="text"],
.auth-field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  font-size: 14px; color: var(--navy);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(43, 181, 194, 0.18);
}

/* Password wrap + eye */
.auth-pwd-wrap { position: relative; }
.auth-pwd-wrap input { padding-right: 42px; }
.auth-pwd-eye {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 6px;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.auth-pwd-eye:hover { color: var(--navy); background: var(--bg-soft); }
.auth-pwd-eye.shown { color: var(--cyan-d); }

/* Password strength meter */
.auth-pwd-meter {
  margin-top: 6px;
  display: flex; align-items: center; gap: 8px;
}
.auth-pwd-meter-bar {
  flex: 1;
  height: 4px;
  background: var(--bdr-soft);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.auth-pwd-meter-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink-mute);
  border-radius: 2px;
  transition: width .25s ease, background .25s ease;
}
.auth-pwd-meter[data-strength="1"] .auth-pwd-meter-bar::after { width: 25%; background: var(--red); }
.auth-pwd-meter[data-strength="2"] .auth-pwd-meter-bar::after { width: 50%; background: var(--amber); }
.auth-pwd-meter[data-strength="3"] .auth-pwd-meter-bar::after { width: 75%; background: var(--cyan-d); }
.auth-pwd-meter[data-strength="4"] .auth-pwd-meter-bar::after { width: 100%; background: var(--green); }
.auth-pwd-meter-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-mute);
  min-width: 70px; text-align: right;
}
.auth-pwd-meter[data-strength="1"] .auth-pwd-meter-label { color: var(--red); }
.auth-pwd-meter[data-strength="2"] .auth-pwd-meter-label { color: var(--amber); }
.auth-pwd-meter[data-strength="3"] .auth-pwd-meter-label { color: var(--cyan-d); }
.auth-pwd-meter[data-strength="4"] .auth-pwd-meter-label { color: var(--green); }

/* Forgot link */
.auth-forgot-link {
  align-self: flex-end;
  margin-top: 4px;
  background: none; border: none; padding: 2px 0;
  font-size: 12px; font-weight: 600;
  color: var(--cyan-d);
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-forgot-link:hover { color: var(--navy); }

/* Forgot mode */
.auth-forgot-blurb {
  margin: 0 0 4px;
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.auth-forgot-back {
  margin-top: 6px;
  background: none; border: none;
  padding: 6px 0;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
}
.auth-forgot-back:hover { color: var(--navy); }

/* Error display */
.auth-error {
  margin: 0; padding: 0;
  font-size: 12.5px; color: var(--red); font-weight: 600;
  min-height: 0;
  transition: min-height .15s ease;
}
.auth-error:not(:empty) {
  padding: 8px 10px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 6px;
}

/* Submit button */
.auth-submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  font-size: 14px; font-weight: 700;
  border-radius: 10px;
}
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }
.auth-submit.loading { color: transparent; position: relative; }
.auth-submit.loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Footer terms */
.auth-modal-terms {
  margin: 14px 0 0;
  font-size: 11px; color: var(--ink-mute);
  text-align: center; line-height: 1.55;
}
.auth-modal-terms a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.auth-modal-terms strong { color: var(--navy); font-weight: 700; }

/* ── LOGGED-IN PILL (replaces auth-pills content when signed in) ── */
.auth-userpill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px;
  padding: 0 16px 0 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--navy);
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 12px 36px rgba(30, 46, 92, 0.14),
    0 2px 10px rgba(30, 46, 92, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.auth-userpill:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
}
.auth-userpill[aria-expanded="true"] {
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 16px 44px rgba(30, 46, 92, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.auth-userpill-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--cyan) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  letter-spacing: .2px;
  flex-shrink: 0;
}
.auth-userpill-name {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-userpill-caret {
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform .2s ease;
}
.auth-userpill[aria-expanded="true"] .auth-userpill-caret {
  transform: rotate(180deg);
  color: var(--navy);
}

/* ── Auth dropdown menu ────────────────────────────────────────── */
/* Dropdown menu — same translucent glass treatment as the user pill above it.
   rgba 0.85 + backdrop-filter blur(22px) saturate(180%) matches .auth-userpill
   so the dropdown reads as an extension of the pill, not a separate solid card. */
.auth-menu {
  position: absolute;
  top: 56px; right: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  box-shadow:
    0 18px 48px rgba(30, 46, 92, 0.18),
    0 2px 10px rgba(30, 46, 92, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1.1);
  z-index: 102;
}
.auth-pills[data-auth-state="signed-in-open"] .auth-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.auth-menu-identity {
  padding: 12px 12px 10px;
  display: flex; align-items: center; gap: 12px;
}
.auth-menu-identity .auth-userpill-avatar {
  width: 40px; height: 40px;
  font-size: 16px;
}
.auth-menu-identity-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.auth-menu-name {
  font-size: 14px; font-weight: 700;
  color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auth-menu-email {
  font-size: 11.5px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.auth-menu-divider {
  height: 1px;
  /* Slightly stronger than --bdr-soft so it still reads on the translucent base */
  background: rgba(30, 46, 92, 0.12);
  margin: 2px 0;
}

.auth-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 600;
  color: var(--navy);
  cursor: pointer; text-align: left;
  text-decoration: none;
  transition: background .15s ease;
}
.auth-menu-item:hover { background: rgba(255, 255, 255, 0.85); }
.auth-menu-item-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.auth-menu-item-arrow {
  margin-left: auto;
  color: var(--ink-mute);
  font-size: 11px;
}
.auth-menu-item.primary {
  background: rgba(217, 119, 6, 0.08);
  color: var(--amber);
}
.auth-menu-item.primary:hover { background: rgba(217, 119, 6, 0.14); }
.auth-menu-item.primary .auth-menu-item-icon,
.auth-menu-item.primary .auth-menu-item-arrow { color: var(--amber); }
.auth-menu-item.danger { color: var(--red); }
.auth-menu-item.danger .auth-menu-item-icon { color: var(--red); }
.auth-menu-item.danger:hover { background: rgba(220, 38, 38, 0.06); }

/* ── Verify-email banner ───────────────────────────────────────── */
.verify-banner {
  position: fixed;
  top: 86px;          /* below the nav island */
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  max-width: calc(100vw - 32px);
}
.verify-banner-inner {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(146, 64, 14, 0.14);
  font-family: var(--font);
  font-size: 12.5px; color: #92400e;
  font-weight: 600;
}
.verify-banner-icon {
  font-size: 14px;
}
.verify-banner-text strong { color: #78350f; font-weight: 700; }
.verify-banner-action {
  background: #92400e; color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  letter-spacing: .2px;
  transition: background .15s ease;
}
.verify-banner-action:hover { background: #78350f; }
.verify-banner-action.sent { background: var(--green); cursor: default; }
.verify-banner-close {
  background: transparent; border: none;
  width: 22px; height: 22px;
  color: #92400e;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease;
}
.verify-banner-close:hover { background: rgba(146, 64, 14, 0.12); }

/* Spam-folder hint — only shown in just-signed-up mode so returning
   users don't see redundant warnings. Hidden by default; the
   .just-signed-up modifier on the banner reveals it. */
.verify-banner-spam-hint {
  display: none;
}
.verify-banner.just-signed-up .verify-banner-spam-hint {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  color: #92400e;
}
.verify-banner.just-signed-up .verify-banner-spam-hint strong {
  color: #78350f;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(146, 64, 14, 0.4);
  text-underline-offset: 2px;
}

/* Just-signed-up variant — promotes the slim pill into a prominent
   card. Larger, bolder, sits centred so the user can't miss it. The
   spam-folder hint becomes part of the message body, not a hidden
   second line. Stays at top under the nav for visibility on long
   pages. */
.verify-banner.just-signed-up .verify-banner-inner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 13.5px;
  max-width: 560px;
  box-shadow: 0 12px 32px rgba(146, 64, 14, 0.22);
  background: #fef3c7;
}
.verify-banner.just-signed-up .verify-banner-text {
  flex: 1;
  min-width: 240px;
  line-height: 1.5;
}
.verify-banner.just-signed-up .verify-banner-icon {
  font-size: 18px;
  margin-top: 1px;
}
.verify-banner.just-signed-up .verify-banner-action {
  align-self: flex-start;
  padding: 7px 14px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .verify-banner.just-signed-up .verify-banner-inner {
    padding: 12px 14px;
    font-size: 12.5px;
  }
}

/* ── Welcome toast ─────────────────────────────────────────────── */
.auth-toast {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 260;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--bdr-soft);
  border-radius: 100px;
  box-shadow: 0 18px 48px rgba(13, 20, 40, 0.18);
  font-family: var(--font);
  font-size: 13.5px; font-weight: 700;
  color: var(--navy);
  transform: translateY(20px); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.3,1.1), opacity .25s ease;
}
.auth-toast.show {
  transform: translateY(0); opacity: 1;
}
.auth-toast-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .auth-modal-card { padding: 22px 22px 18px; border-radius: 14px; }
  .auth-userpill-name { max-width: 90px; }
  .auth-menu { right: 4px; width: calc(100vw - 24px); max-width: 320px; }
  .verify-banner { top: 70px; }
  .verify-banner-inner { font-size: 11.5px; padding: 8px 10px; gap: 8px; }
  .verify-banner-text strong { display: block; }
  .auth-toast { bottom: 16px; right: 16px; left: 16px; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   /account page — auth-gated user dashboard
   ════════════════════════════════════════════════════════════════════ */
.account-wrap { max-width: 720px; }
.account-card {
  background: var(--bg);
  border: 1px solid var(--bdr-soft);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.account-card-title {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
  padding: 0;
  border: none;
}
.account-card-blurb {
  font-size: 13.5px;
  color: var(--ink-mute);
  margin: -4px 0 14px;
  line-height: 1.55;
}
.account-card-footnote {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 14px;
  line-height: 1.55;
}

/* ── Profile card ── */
.account-profile { display: flex; align-items: center; gap: 16px; }
.account-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-d), var(--navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--font);
  flex-shrink: 0;
}
.account-profile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.account-profile-name { font: 600 16px/1.3 var(--font); color: var(--navy); }
.account-profile-email { font-size: 13.5px; color: var(--ink-mute); word-break: break-all; }
.account-verified { font-size: 12px; margin-top: 4px; }
.account-verified.verified { color: var(--success, #16a34a); font-weight: 600; }
/* Promoted unverified state — was a tiny line, now a card under the
   profile block so the user can't miss it. Mentions the spam folder
   explicitly because Firebase's default sender domain gets spam-flagged. */
.account-verified.unverified {
  display: block;
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 10px;
  color: var(--amber, #d97706);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.account-verified.unverified strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: #92400e;
}
.account-verified.unverified a {
  color: var(--amber, #d97706);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.account-verified.unverified a:hover { color: #78350f; }

/* ── Subscription card ── */
.account-sub-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.account-sub-plan { font: 700 18px/1.3 var(--font); color: var(--navy); }
.account-sub-meta { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.account-sub-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.account-sub-status.paid { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.account-sub-status.pending { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.account-sub-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Empty / loading / error states ── */
.account-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.account-empty-text {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.account-empty-text strong { color: var(--navy); }
.account-empty-mini { font-size: 13.5px; color: var(--ink-mute); padding: 8px 0; }
.account-loading { font-size: 13.5px; color: var(--ink-mute); padding: 4px 0; }
.account-error {
  font-size: 13px;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ── Newsletter toggle ── */
.account-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.account-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.account-toggle-slider {
  position: relative;
  width: 44px; height: 24px;
  background: var(--bdr);
  border-radius: 999px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.account-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.account-toggle input:checked + .account-toggle-slider { background: var(--cyan-d); }
.account-toggle input:checked + .account-toggle-slider::after { transform: translateX(20px); }
.account-toggle-label { font-size: 14px; color: var(--ink); }
.account-toggle input:disabled + .account-toggle-slider { opacity: 0.5; }

/* ── Billing history table ── */
.account-payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.account-payments-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bdr-soft);
  white-space: nowrap;
}
.account-payments-table td {
  padding: 12px;
  border-bottom: 1px solid var(--bdr-soft);
  color: var(--ink);
}
.account-payments-table tr:last-child td { border-bottom: none; }
.account-payments-table .account-amount { font-family: var(--mono); font-weight: 600; color: var(--navy); }
.account-status-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.account-status-pill.paid { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.account-status-pill.pending { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.account-status-pill.other { background: var(--bg-soft); color: var(--ink-mute); }

/* ── Account actions ── */
.account-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .account-card { padding: 18px 18px; }
  .account-avatar { width: 48px; height: 48px; font-size: 18px; }
  .account-payments-table { font-size: 12.5px; }
  .account-payments-table th, .account-payments-table td { padding: 8px 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   .btn-current-plan — applied to pricing CTAs when the user already
   has that plan active. Overrides whatever base class the button had
   (.btn-outline or .btn-am) with a clear "you're on this" green state.
   Clicking takes the user to /account to manage it.
   ════════════════════════════════════════════════════════════════════ */
.btn-current-plan,
.btn-current-plan:hover,
.btn-current-plan:focus {
  background: rgba(22, 163, 74, 0.08) !important;
  color: #16a34a !important;
  border: 1.5px solid #16a34a !important;
  font-weight: 700;
  cursor: default;
}
.btn-current-plan:hover {
  background: rgba(22, 163, 74, 0.14) !important;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════
   /checkout firm-details form
   ════════════════════════════════════════════════════════════════════ */
.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;
}
/* ── Checkout store-count selector (Basic only) ──
   Lives inside the left plan card, below the features list. Visual
   language matches the homepage estimator (.est-stepper, .est-tag) so
   the two flows feel like one product. */
.ck-stores {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bdr-soft);
  display: flex; flex-direction: column; gap: 12px;
}
.ck-stores[hidden] { display: none; }
.ck-stores-h {
  font-size: 13px; font-weight: 700; color: var(--navy);
  display: flex; flex-direction: column; gap: 4px;
}
.ck-stores-hint {
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-mute);
  line-height: 1.45;
}
.ck-store-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--bdr-soft);
}
.ck-store-row:last-of-type { border-bottom: none; }
.ck-store-row label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--navy);
  cursor: default;
}
.ck-store-rate {
  font-size: 11.5px; color: var(--ink-mute);
  font-weight: 600;
  margin-left: 2px;
}
.ck-stores-foot {
  margin-top: 4px;
  padding: 9px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.5;
}
.ck-stores-foot strong { color: var(--navy); font-weight: 700; }

.checkout-firm-form {
  margin: 20px 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--bdr-soft);
}
.checkout-firm-h {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.checkout-firm-row { margin-bottom: 8px; }
.checkout-firm-row:last-child { margin-bottom: 0; }
.checkout-firm-row input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.checkout-firm-row input:focus {
  outline: none;
  border-color: var(--cyan-d);
  box-shadow: 0 0 0 3px rgba(45, 178, 191, 0.15);
}
.checkout-firm-row input::placeholder { color: var(--ink-mute); }
.checkout-firm-err {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
  font-size: 12.5px;
  color: #dc2626;
  font-weight: 600;
}
.account-sub-firm {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-weight: 500;
}
.account-sub-pending-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(45, 178, 191, 0.08);
  border: 1px solid rgba(45, 178, 191, 0.25);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--cyan-d);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING ADD-ONS — Concierge Onboarding, B+G vs GST explainer,
   and Cost Estimator. These three sections sit BELOW the
   Firestore-hydrated pricing grid (which lives in markup) and
   explain the per-store add-on pricing model.
   ═══════════════════════════════════════════════════════════════ */

/* ── CONCIERGE ONBOARDING CARD ─────────────────────────────────── */
.concierge-card {
  max-width: 820px;
  /* 80px top margin pushes the card away from the pricing grid so it
     reads as a separate trust signal, not an add-on bullet stuck to
     the bottom of the cards. */
  margin: 80px auto 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--cyan-tint) 0%, var(--bg) 100%);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(30, 46, 92, 0.06);
}
.concierge-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--cyan-d);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30, 46, 92, 0.06);
  flex-shrink: 0;
}
.concierge-h {
  font-size: 15.5px; font-weight: 700; color: var(--navy);
  margin-bottom: 4px;
}
.concierge-h strong { color: var(--cyan-d); font-weight: 800; }
.concierge-body p {
  margin: 0;
  font-size: 13px; color: var(--ink-soft); line-height: 1.55;
}
.concierge-cta {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--bdr);
  border-radius: 100px;
  color: var(--navy);
  font-family: var(--font);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s ease;
}
.concierge-cta:hover {
  border-color: var(--cyan-d);
  color: var(--cyan-d);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .concierge-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .concierge-icon { width: 40px; height: 40px; }
  .concierge-cta { justify-self: start; }
}

/* ── B+G vs GST EXPLAINER ──────────────────────────────────────── */
.client-type-explainer {
  max-width: 1000px;
  margin: 0 auto 56px;
}
.cte-head { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.cte-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 10px;
}
.cte-head h3 {
  margin: 0 0 8px;
  font-size: 26px; font-weight: 800;
  color: var(--navy); letter-spacing: -0.01em;
}
.cte-head h3 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--cyan), var(--navy));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cte-head p {
  margin: 0;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.55;
}

.cte-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 740px) { .cte-grid { grid-template-columns: 1fr; } }

.cte-card {
  background: #fff;
  border: 1.5px solid var(--bdr);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex; flex-direction: column;
}
.cte-card-bg  { border-color: var(--amber-tint); }
.cte-card-bg:hover  { border-color: var(--amber);  box-shadow: 0 8px 28px rgba(217, 119, 6, 0.10); }
.cte-card-gst { border-color: var(--cyan-tint); }
.cte-card-gst:hover { border-color: var(--cyan-d); box-shadow: 0 8px 28px rgba(43, 181, 194, 0.10); }
.cte-card { transition: border-color .25s ease, box-shadow .25s ease; }

.cte-card-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.cte-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}
.cte-pill.bg  { background: var(--amber-tint); color: var(--amber); }
.cte-pill.gst { background: var(--cyan-tint);  color: var(--cyan-d); }
.cte-card-name {
  font-size: 16px; font-weight: 700; color: var(--navy);
}
.cte-card-sub {
  margin: 0 0 12px;
  font-size: 13px; color: var(--ink-soft);
}
.cte-card ul {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.cte-card li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px; color: var(--ink);
  line-height: 1.5;
}
.cte-card li::before {
  content: "";
  position: absolute; left: 6px; top: 9px;
  width: 5px; height: 5px;
  background: var(--ink-mute);
  border-radius: 50%;
}
.cte-card-bg  li::before { background: var(--amber); }
.cte-card-gst li::before { background: var(--cyan-d); }
.cte-card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--bdr-soft);
  font-size: 12px; color: var(--ink-mute); font-style: italic;
  line-height: 1.5;
}

/* ── "Coming soon" roadmap panel for B+G features that aren't shipped ── */
.cte-roadmap {
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 16px 20px;
  background: var(--amber-tint);
  border: 1px solid #ffd591;
  border-radius: 12px;
}
.cte-roadmap-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 13.5px; font-weight: 700; color: #92400e;
}
.cte-roadmap-tag {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 8px;
  background: #fff;
  color: var(--amber);
  border-radius: 100px;
  letter-spacing: .4px;
  font-family: var(--mono);
}
.cte-roadmap ul {
  list-style: none; padding: 0;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
@media (max-width: 600px) { .cte-roadmap ul { grid-template-columns: 1fr; } }
.cte-roadmap li {
  position: relative;
  padding-left: 18px;
  font-size: 13px; color: #92400e; line-height: 1.5;
}
.cte-roadmap li::before {
  content: "○";
  position: absolute; left: 0; top: 0;
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
}
.cte-roadmap-foot {
  margin: 6px 0 0;
  font-size: 12px; color: #78350f; line-height: 1.55;
  font-style: italic;
}

/* ── "Not sure how to split" note ── */
.cte-note {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--bg-soft);
  border: 1px dashed var(--bdr);
  border-radius: 12px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
.cte-note > strong { color: var(--navy); font-weight: 700; }
.cte-note em { color: var(--navy); font-style: italic; }
.cte-note-list {
  list-style: none; padding: 0;
  margin: 10px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cte-note-list li {
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--bdr-soft);
  border-radius: 8px;
  font-size: 13.5px; color: var(--navy); line-height: 1.5;
}
.cte-note-list li strong { font-weight: 800; }
.cte-inline-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
  letter-spacing: .3px;
  vertical-align: middle;
}
.cte-inline-pill.bg  { background: var(--amber-tint); color: var(--amber); }
.cte-inline-pill.gst { background: var(--cyan-tint);  color: var(--cyan-d); }

/* ── COST ESTIMATOR ────────────────────────────────────────────── */
.cost-estimator {
  max-width: 1000px;
  margin: 64px auto 32px;
}
.est-head { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.est-head h3 {
  margin: 0 0 8px;
  font-size: 26px; font-weight: 800;
  color: var(--navy); letter-spacing: -0.01em;
}
.est-head p {
  margin: 0;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.55;
}
.est-head strong { color: var(--navy); font-weight: 700; }

.est-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: #fff;
  border: 1.5px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(30, 46, 92, 0.06);
}
@media (max-width: 760px) {
  .est-card { grid-template-columns: 1fr; }
}

.est-inputs {
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 18px;
  background: #fff;
}
.est-field { display: flex; flex-direction: column; gap: 8px; }
.est-field label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.est-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800;
  letter-spacing: .4px;
  padding: 3px 7px;
  border-radius: 5px;
  font-family: var(--mono);
}
.est-tag.bg  { background: var(--amber-tint); color: var(--amber); }
.est-tag.gst { background: var(--cyan-tint);  color: var(--cyan-d); }

.est-stepper {
  display: inline-grid;
  grid-template-columns: 38px 1fr 38px;
  border: 1px solid var(--bdr);
  border-radius: 10px;
  overflow: hidden;
  max-width: 180px;
}
.est-step {
  background: var(--bg-soft);
  border: none;
  font-family: var(--font);
  font-size: 18px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.est-step:hover { background: var(--bdr-soft); color: var(--navy); }
.est-stepper input {
  border: none; border-left: 1px solid var(--bdr); border-right: 1px solid var(--bdr);
  text-align: center;
  font-family: var(--font);
  font-size: 15px; font-weight: 700;
  color: var(--navy);
  padding: 6px 0;
  -moz-appearance: textfield;
}
.est-stepper input:focus {
  outline: none;
  background: var(--navy-soft);
}
.est-stepper input::-webkit-outer-spin-button,
.est-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.est-field-checkbox { padding-top: 6px; border-top: 1px dashed var(--bdr); margin-top: 4px; }
.est-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--navy);
  cursor: pointer;
}
.est-check input {
  width: 16px; height: 16px;
  accent-color: var(--cyan);
}
.est-field-hint {
  font-size: 11.5px; color: var(--ink-mute);
  padding-left: 25px;
  margin-top: 2px;
}

/* Output panel — uses the same navy gradient as the try-demo running totals */
.est-output {
  padding: 28px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  gap: 14px;
}
.est-out-head {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px;
  color: rgba(255, 255, 255, 0.65);
}
.est-out-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-variant-numeric: tabular-nums;
}
.est-out-row:last-of-type { border-bottom: none; }
.est-out-row.muted { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; padding: 2px 0; border: none; }
.est-out-label { font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.est-out-label small { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 400; }
.est-out-value { font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; }

.est-out-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 2px solid rgba(255, 255, 255, 0.20);
  display: flex; justify-content: space-between; align-items: baseline;
}
.est-out-total-label {
  font-size: 12.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase; letter-spacing: .6px;
}
.est-out-total-value {
  font-size: 26px; font-weight: 800;
  color: #2bff8a;
  font-variant-numeric: tabular-nums;
}
.est-out-total-unit {
  font-size: 12px; font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-left: 4px;
}
.est-out-onetime {
  margin-top: 4px;
  font-size: 12px; color: rgba(255, 255, 255, 0.7);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}
.est-out-onetime strong { color: #fff; font-weight: 700; }

.est-out-cta {
  margin-top: 10px;
  display: inline-flex; justify-content: center; align-items: center;
  padding: 12px 18px;
  background: var(--amber);
  color: #fff;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.est-out-cta:hover { background: #b45309; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   PRICING DETAILS — slim "Learn more" CTA + popup modal that holds
   the explainer + roadmap + not-sure + estimator. Keeps the pricing
   section on the page short.
   ═══════════════════════════════════════════════════════════════ */

/* The slim CTA button that lives between Concierge and the refund note.
   Visual: a quiet pill button with an info icon — feels like a "tell me
   more" not a primary action. */
.pricing-more {
  text-align: center;
  margin: 36px auto 28px;
  max-width: 720px;
}
.pricing-more-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--bdr);
  border-radius: 100px;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(30, 46, 92, 0.06);
  transition: all .2s ease;
}
.pricing-more-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan-d);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(30, 46, 92, 0.10);
}
.pricing-more-btn svg { color: var(--cyan-d); flex-shrink: 0; }
@media (max-width: 600px) {
  .pricing-more-btn { font-size: 12.5px; padding: 11px 18px; text-align: left; }
}

/* ── Pricing-details modal ──
   Scrollable on small screens / long content. Uses the same glass-overlay
   recipe as the auth + try-demo modals so all three feel like one
   product. */
.pmodal-overlay {
  position: fixed; inset: 0; z-index: 245;
  background: rgba(13, 20, 40, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.pmodal-overlay.open { opacity: 1; pointer-events: auto; }

.pmodal-card {
  position: relative;
  width: 100%; max-width: 880px;
  background: #fff;
  border-radius: 18px;
  padding: 30px 36px 32px;
  font-family: var(--font);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(13, 20, 40, 0.35);
  transform: translateY(20px) scale(.985); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
}
.pmodal-overlay.open .pmodal-card { transform: translateY(0) scale(1); opacity: 1; }

.pmodal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 24px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease, color .15s ease;
  z-index: 2;
  font-family: var(--font);
}
.pmodal-close:hover { background: var(--bdr-soft); color: var(--navy); }

.pmodal-h {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 24px;
}
.pmodal-h h3 {
  margin: 0 0 10px;
  font-size: 24px; font-weight: 800;
  color: var(--navy); letter-spacing: -0.01em;
}
.pmodal-h h3 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--cyan), var(--navy));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pmodal-h p {
  margin: 0;
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}
.pmodal-h p em { color: var(--navy); font-style: italic; font-weight: 600; }

/* Inside the modal, sections need a touch of top spacing between them */
.pmodal-card .cte-grid       { margin-top: 4px; margin-bottom: 18px; }
.pmodal-card .cte-roadmap    { margin: 0 auto 18px; }
.pmodal-card .cte-note       { margin: 0 auto 28px; }
.pmodal-card .cost-estimator { margin: 32px auto 0; padding-top: 24px; border-top: 1px solid var(--bdr-soft); }

@media (max-width: 720px) {
  .pmodal-overlay { padding: 16px 10px; }
  .pmodal-card { padding: 24px 20px 22px; border-radius: 14px; }
  .pmodal-h h3 { font-size: 20px; }
}