*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --ink: #0e0e0e;
      --ink-soft: #555;
      --ink-faint: #8e8e8e;
      --paper: #fafaf8;
      --paper-warm: #f3f1ec;
      --accent: #d4820a;
      --accent-light: #fef3e2;
      --teal: #0d9488;
      --teal-light: #e6faf8;
      --blue: #3b6fd4;
      --blue-light: #eef3fd;
      --border: #e8e5df;
      --radius: 12px;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Geist', sans-serif;
      background: var(--paper);
      color: var(--ink);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

    /* ── NAV ── */
    nav {
      position: sticky;
      top: 0;
      z-index: 99;
      height: 60px;
      background: rgba(250,250,248,0.88);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner{
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      height: 60px;
      padding: 0 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .logo{
      display:inline-flex;
      align-items:center;
      white-space: nowrap;
    }
    .logo img{
      height: 52px;
      width: auto;
      display:block;
    }

    .nav-links{
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-left: auto;
    }
    .nav-links a{
      color: var(--ink-soft);
      font-size: 0.875rem;
      font-weight: 400;
      padding: 0.4rem 0.8rem;
      border-radius: 8px;
      transition: color .15s, background .15s;
    }
    .nav-links a:hover{ color: var(--ink); background: var(--paper-warm); }

    .nav-actions{
      display:flex;
      align-items:center;
      gap: 0.75rem;
      margin-left: 1.25rem;
      padding-left: 1.25rem;
      border-left: 1px solid var(--border);
      white-space: nowrap;
    }

    .nav-login{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: 550;
      color: var(--ink);
      padding: 0.42rem 0.95rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.35);
      backdrop-filter: blur(10px);
      transition: background .15s, border-color .15s, transform .15s;
    }
    .nav-login:hover{ background: var(--paper-warm); border-color: #d5d0c8; transform: translateY(-1px); }

    .btn-nav{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: 750;
      padding: 0.45rem 1rem;
      border-radius: 10px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: var(--paper);
      transition: opacity .15s, transform .15s;
      white-space: nowrap;
    }
    .btn-nav:hover{ opacity: 0.88; transform: translateY(-1px); }

    /* Mobile CTA in header */
    .nav-cta-mobile{
      display:none;
      font-size: 0.85rem;
      font-weight: 800;
      padding: 0.45rem 0.85rem;
      border-radius: 12px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: var(--paper);
      transition: opacity .15s, transform .15s;
      white-space: nowrap;
    }
    .nav-cta-mobile:hover{ opacity: 0.88; transform: translateY(-1px); }
    .cta-short{ display:none; }
    @media (max-width: 380px){ .cta-long{ display:none; } .cta-short{ display:inline; } }

    /* Burger */
    .nav-toggle{
      display:none;
      width:42px; height:42px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(250,250,248,0.7);
      backdrop-filter: blur(12px);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      gap:5px;
      padding:10px;
      flex-shrink: 0;
    }
    .nav-toggle span{
      display:block;
      width:18px; height:2px;
      background: var(--ink);
      border-radius:2px;
      transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2){ opacity: 0; }
    .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

    /* Drawer */
    .mobile-menu{
      position:fixed;
      inset:0;
      z-index:999;
      display:none;
      background: rgba(14,14,14,0.55);
      backdrop-filter: blur(8px);
      opacity:0;
      transition: opacity .2s ease;
    }
    .mobile-menu.open{ display:block; opacity:1; }
    .mobile-drawer{
      position:absolute;
      top:0; right:0;
      height:100%;
      width:min(86vw, 360px);
      background:#fff;
      border-left:1px solid var(--border);
      box-shadow: -20px 0 80px rgba(0,0,0,0.25);
      padding: 1.1rem;
      transform: translateX(100%);
      transition: transform .22s ease;
      display:flex;
      flex-direction:column;
      touch-action: pan-y;
    }
    .mobile-menu.open .mobile-drawer{ transform: translateX(0); }
    .mobile-drawer.dragging{ transition:none !important; }

    .mobile-menu-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding-bottom:.85rem;
      border-bottom:1px solid var(--border);
      margin-bottom:.85rem;
    }
    .mobile-brand{
      display:inline-flex;
      align-items:center;
    }
    .mobile-brand img{
      height: 40px;
      width: auto;
      display:block;
    }
    .mobile-close{
      width:44px; height:44px;
      border-radius:12px;
      border:1px solid var(--border);
      background: var(--paper);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
    }

    .m-group-label{
      font-size:0.72rem;
      font-weight:800;
      text-transform: uppercase;
      letter-spacing:0.12em;
      color: var(--ink-faint);
      margin: 0.3rem 0 0.45rem;
    }
    .m-link{
      display:block;
      padding: .9rem .75rem;
      border-radius: 12px;
      color: var(--ink);
      font-size: .95rem;
      min-height: 44px;
    }
    .m-link:hover{ background: var(--paper-warm); }
    .m-sep{ height:1px; background: var(--border); margin: .75rem 0; }

    .m-btn{
      display:block;
      width:100%;
      text-align:center;
      padding: .9rem 1rem;
      border-radius: 12px;
      font-weight: 800;
      font-size: 0.95rem;
      margin-top: 0.6rem;
      min-height: 48px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .m-btn-outline{
      background: rgba(255,255,255,0.35);
      color: var(--ink);
      border: 1px solid var(--border);
    }
    .m-btn-outline:hover{ background: var(--paper-warm); border-color:#d5d0c8; }
    .m-btn-primary{
      background: var(--ink);
      color: var(--paper);
      border: 1px solid var(--ink);
    }
    .m-btn-primary:hover{ opacity: 0.9; }

    body.menu-open{ overflow:hidden; }
    body.menu-open .nav-cta-mobile{ display:none !important; }

    /* ── HERO ── */
    .hero-dark{
      background:
        radial-gradient(ellipse 70% 80% at 50% 60%, rgba(212,130,10,0.13) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 20%, rgba(13,148,136,0.08) 0%, transparent 50%),
        #0e0f12;
      padding: 4rem 1.5rem 0;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .hero-dark::before{
      content:'';
      position:absolute;
      inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events:none;
    }
    .hero-dark-inner{ position:relative; z-index:1; max-width: 860px; margin:0 auto; }
    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background: rgba(212,130,10,0.12);
      border: 1px solid rgba(212,130,10,0.28);
      border-radius: 999px;
      padding: .35rem 1rem;
      font-size:.75rem;
      font-weight:700;
      color: var(--accent);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 2rem;
      opacity:0;
      animation: up .5s .05s ease forwards;
    }
    .hero-badge-dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); animation: blink 2s infinite; flex-shrink:0; }
    @keyframes blink{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.5);} }

    .hero-h1{
      font-family:'Instrument Serif', serif;
      font-size: clamp(2.8rem, 7vw, 5rem);
      font-weight: 400;
      line-height: 1.06;
      letter-spacing: -0.025em;
      color: #f5f2ed;
      margin-bottom: 1.5rem;
      opacity:0;
      animation: up .5s .15s ease forwards;
    }
    .hero-h1 em{ font-style:italic; color: var(--accent); }

    .hero-dark-sub{
      font-size: 1.1rem;
      color: #9a9a9a;
      font-weight: 300;
      line-height: 1.65;
      margin-bottom: 2.5rem;
      opacity:0;
      animation: up .5s .25s ease forwards;
    }
    .hero-dark-actions{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 1rem;
      flex-wrap: wrap;
      opacity:0;
      animation: up .5s .35s ease forwards;
    }
    .hero-btn-primary{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background: var(--accent);
      color:#000;
      font-weight: 800;
      font-size: 0.95rem;
      padding: .9rem 1.9rem;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(212,130,10,0.35);
      transition: background .15s, transform .15s, box-shadow .15s;
      min-height: 48px;
    }
    .hero-btn-primary:hover{ background:#c47d06; transform: translateY(-2px); box-shadow: 0 10px 36px rgba(212,130,10,0.45); }
    .hero-btn-ghost{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background: transparent;
      color: #bbb;
      font-size: 0.95rem;
      font-weight: 450;
      padding: .9rem 1.7rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      transition: border-color .15s, color .15s;
      min-height: 48px;
    }
    .hero-btn-ghost:hover{ border-color: rgba(255,255,255,0.28); color:#fff; }
    .hero-dark-note{ margin-top: 1.5rem; font-size: .78rem; color:#5f5f5f; opacity:0; animation: up .5s .45s ease forwards; }
    .hero-proof-row{ display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem; opacity:0; animation: up .5s .55s ease forwards; }
    .hero-proof-item{ font-size:.78rem; color:#6b6b6b; }
    .hero-proof-sep{ color:#3a3a3a; font-size:.7rem; }

    .hero-proof-list{
      margin: 1.4rem auto 0;
      padding: 0 1rem;
      list-style: none;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: .65rem;
      max-width: 900px;
      opacity: 0;
      animation: up .5s .48s ease forwards;
    }
    .hero-proof-list li{
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #cfcfcf;
      border-radius: 999px;
      padding: .45rem .8rem;
      font-size: .8rem;
      line-height: 1;
    }

    .compare-kicker{
      max-width: 760px;
      margin: 0 auto 1.4rem;
      color: var(--ink-soft);
      font-size: .96rem;
      line-height: 1.65;
      text-align:center;
    }
    .cta-subline{
      margin-top:.85rem;
      font-size:.82rem;
      color:var(--ink-faint);
    }

    /* ── LIGHTBOX ── */
    .lightbox-overlay{
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0,0,0,0.88);
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      opacity: 0;
      transition: opacity .2s ease;
      cursor: zoom-out;
    }
    .lightbox-overlay.open{ opacity: 1; }
    .lightbox-overlay img{
      max-width: 100%;
      max-height: 90vh;
      border-radius: 12px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.6);
      transform: scale(0.95);
      transition: transform .2s ease;
    }
    .lightbox-overlay.open img{ transform: scale(1); }
    .lightbox-close{
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: none;
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s;
    }
    .lightbox-close:hover{ background: rgba(255,255,255,0.25); }

    /* ── HERO SCREENSHOT ── */
    .hero-screenshot{
      margin-top: 3.5rem;
      position: relative;
      z-index: 2;
    }
    .hero-screenshot-wrap{
      max-width: 960px;
      margin: 0 auto;
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: .75rem .75rem 0;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 32px 80px rgba(0,0,0,0.5),
        0 8px 24px rgba(0,0,0,0.3);
    }
    .hero-screenshot-wrap img{
      display: block;
      width: 100%;
      height: auto;
      border-radius: 10px 10px 0 0;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
    }

    /* Trust bar overlap */
    .trust-bar{
      position: relative;
      z-index: 3;
      padding-top: 2rem;
    }

    @media (max-width: 700px){
      .hero-screenshot{ margin-top: 2.5rem; }
      .hero-screenshot-wrap{ border-radius: 12px; padding: .5rem .5rem 0; }
      .hero-screenshot-wrap img{ border-radius: 8px 8px 0 0; }
    }

    /* ── TRUST BAR ── */
    .trust-bar{ background:#fff; border-bottom:1px solid var(--border); padding: 1.2rem 2.5rem; }
    .trust-bar-inner{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
    .trust-label{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-faint); text-align:center; }
    .trust-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
    .trust-tag{ background: var(--paper-warm); border:1px solid var(--border); border-radius:999px; padding:.4rem .9rem; font-size:.88rem; color: var(--ink-soft); }

    /* ── SECTIONS ── */
    .section{ max-width:1100px; margin:0 auto; padding: 6rem 2.5rem; }
    .section.center{ text-align:center; }
    .section-eyebrow{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color: var(--accent); margin-bottom:.75rem; display:block; }
    .section-h{ font-family:'Instrument Serif', serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight:400; letter-spacing:-0.02em; line-height:1.15; margin-bottom:1rem; }
    .section-sub{font-size:1rem;color: var(--ink-soft);font-weight:300;line-height:1.6;max-width: 560px;margin: 0 auto;text-align: center;}

    /* ── FEATURES ── */
    .features-section{ background: var(--paper-warm); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .features-inner{ max-width:1100px; margin:0 auto; padding: 6rem 2.5rem; }
    .features-intro{ display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:end; margin-bottom: 3.5rem; }
    .feat-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
    .feat-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; opacity:0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease, box-shadow .2s, border-color .2s; }
    .feat-card.vis{ opacity:1; transform: translateY(0); }
    .feat-card:hover{ box-shadow: 0 8px 32px rgba(0,0,0,0.08); border-color:#d5d0c8; }
    .feat-icon{ font-size:1.5rem; margin-bottom:1rem; display:block; }
    .feat-card h3{ font-size:.92rem; font-weight:700; margin-bottom:.4rem; }
    .feat-card p{ font-size:.82rem; color: var(--ink-soft); font-weight:300; line-height:1.55; }

    /* ── COMPARE ── */
    .compare-section{ max-width: 800px; margin:0 auto; padding: 3.5rem 2.5rem; text-align:center; }
    .compare-table{
      margin-top: 3rem;
      border:1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      text-align:left;
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      /* subtle scroll hint on mobile */
      background: linear-gradient(to right, white 30%, rgba(255,255,255,0)),
                  linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
                  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), transparent),
                  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), transparent) 100% 0;
      background-repeat: no-repeat;
      background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
      background-attachment: local, local, scroll, scroll;
    }
    .compare-head{ display:grid; grid-template-columns: 2fr 1fr 1fr; background: var(--ink); color: var(--paper); padding: 1rem 1.5rem; font-size:.82rem; font-weight:700; min-width: 480px; }
    .compare-head span:not(:first-child){ text-align:center; }
    .compare-row{ display:grid; grid-template-columns: 2fr 1fr 1fr; padding: .9rem 1.5rem; border-bottom:1px solid var(--border); font-size:.85rem; align-items:center; transition: background .15s; min-width: 480px; }
    .compare-row:last-child{ border-bottom:none; }
    .compare-row:hover{ background: var(--paper-warm); }
    .compare-row span:not(:first-child){ text-align:center; }
    .compare-row .label{ color: var(--ink); font-weight:450; }
    .check{ color:#16a34a; font-size:1rem; }
    .cross{ color:#d1d5db; font-size:.9rem; }
    .highlight-col{ color: var(--accent); font-weight:800; }

    /* ── PRICING ── */
    .pricing-section{ background: var(--paper-warm); border-top:1px solid var(--border); }
    .pricing-inner{ max-width: 920px; margin:0 auto; padding: 3.5rem 2.5rem; text-align:center; }

    .billing-toggle{
      margin: 1.8rem auto 0;
      display:inline-flex;
      align-items:center;
      gap: .75rem;
      background:#fff;
      border:1px solid var(--border);
      border-radius: 999px;
      padding: .45rem .55rem;
      box-shadow: 0 6px 20px rgba(0,0,0,0.04);
      user-select:none;
    }
    .billing-pill{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding: .5rem .95rem; border-radius: 999px; font-size:.84rem; font-weight:750; color: var(--ink-soft); cursor:pointer; transition: background .15s, color .15s; min-height:44px; }
    .billing-pill input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space: nowrap; border:0; }
    .billing-pill.active{ background: var(--ink); color: var(--paper); }

    .save-badge{ display:inline-flex; font-size:.72rem; font-weight:900; color:#0f766e; background: var(--teal-light); border:1px solid rgba(13,148,136,0.25); padding:.18rem .6rem; border-radius: 999px; margin-left:.25rem; letter-spacing:.02em; white-space:nowrap; }

    .pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; }

    .plan{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.75rem; text-align:left; transition: box-shadow .2s, transform .2s, border-color .2s; display:flex; flex-direction:column; height:100%; }
    .plan:hover{ box-shadow: 0 10px 34px rgba(0,0,0,0.08); transform: translateY(-2px); }

    .plan.best{
      position: relative;
      border-color: rgba(212,130,10,0.55);
      background: linear-gradient(135deg, rgba(212,130,10,0.10) 0%, #fff 55%);
      box-shadow: 0 14px 45px rgba(212,130,10,0.12);
      transform: scale(1.03);
      padding: 2.25rem 1.95rem;
    }
    .plan.best:hover{ box-shadow: 0 18px 55px rgba(212,130,10,0.18); }

    .plan-tag{ position:absolute; top:-11px; left:50%; transform: translateX(-50%); background: rgba(212,130,10,0.14); color: var(--accent); border: 1px solid rgba(212,130,10,0.35); font-size:.68rem; font-weight:900; text-transform: uppercase; letter-spacing:.08em; padding: .18rem .75rem; border-radius: 999px; white-space: nowrap; }

    .plan-tier{ font-size:.72rem; font-weight:800; text-transform: uppercase; letter-spacing:.1em; color: var(--ink-faint); margin-bottom: 1rem; }
    .plan-amount{ font-family:'Instrument Serif', serif; font-size: 3rem; line-height:1; margin-bottom: .25rem; }
    .plan-amount sup{ font-size: 1.2rem; vertical-align: super; }
    .plan-cadence{ font-size:.78rem; color: var(--ink-faint); margin-bottom:.9rem; min-height: 1.2em; }
    .plan-note{ font-size:.78rem; color: var(--ink-soft); font-weight:350; margin-top:-.2rem; margin-bottom: 1.2rem; }
    .plan-sep{ height:1px; background: var(--border); margin: 1.5rem 0; }
    .plan-list{ list-style:none; display:flex; flex-direction:column; gap:.6rem; flex:1; }
    .plan-list li{ font-size:.83rem; color: var(--ink-soft); display:flex; gap:.5rem; line-height:1.4; }
    .plan-list li .c{ color:#16a34a; flex-shrink:0; }

    .plan-btn{ display:block; text-align:center; margin-top: 1.75rem; padding: .85rem; border-radius: 10px; font-size:.9rem; font-weight:800; border:1px solid var(--border); color: var(--ink); background: transparent; transition: background .15s, border-color .15s, transform .15s; min-height:48px; display:flex; align-items:center; justify-content:center; }
    .plan-btn:hover{ background: var(--paper-warm); border-color:#ccc; transform: translateY(-1px); }
    .plan.best .plan-btn{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

    /* ── FAQ ── */
    .faq{ max-width: 900px; margin: 0 auto; padding: 6rem 2.5rem; }
    .faq-list{ margin-top: 2.2rem; display:flex; flex-direction:column; gap:.75rem; }
    .faq-item{ background:#fff; border:1px solid var(--border); border-radius: 14px; overflow:hidden; }
    .faq-q{ width:100%; text-align:left; padding: 1rem 1.15rem; background: transparent; border:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; font-size:.95rem; font-weight:750; min-height:52px; }
    .faq-icon{ color: var(--ink-faint); font-size: 1.1rem; transition: transform .15s; flex-shrink:0; }
    .faq-item[open] .faq-icon{ transform: rotate(45deg); }
    .faq-a{ padding: 0 1.15rem 1.05rem; color: var(--ink-soft); font-size:.9rem; line-height:1.6; font-weight:320; }

    /* ── CTA / FOOTER ── */
    .cta-section{ margin: 0 auto; padding: 8rem 2.5rem; text-align:center; max-width:100%; }
    .cta-section h2{ font-family:'Instrument Serif', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight:400; letter-spacing:-0.02em; line-height:1.15; margin-bottom:1.2rem; }
    .cta-section p{ font-size:1rem; color: var(--ink-soft); font-weight:300; margin-bottom:2.5rem; max-width:540px; margin-left:auto; margin-right:auto; }

    footer{ border-top:1px solid var(--border); padding: 2rem 2.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; position: relative; z-index: 1; }
    .footer-brand{ font-family:'Instrument Serif', serif; font-size: 1.1rem; }
    footer p{ font-size:.78rem; color: var(--ink-faint); }
    .footer-links{ display:flex; gap:1.5rem; }
    .footer-links a{ font-size:.78rem; color: var(--ink-faint); transition: color .15s; }
    .footer-links a:hover{ color: var(--ink); }

    /* ── DASHBOARD PREVIEW ── */
    .dashboard-preview{ padding: 1.5rem 1.5rem 0; }
    .dashboard-preview-inner{ max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
    .dashboard-preview-copy{ max-width: 760px; margin: 0 auto 1.5rem; text-align: center; }
    .dashboard-shot-wrap{
      background: linear-gradient(180deg, #ffffff 0%, #f7f4ee 100%);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 1rem;
      box-shadow: 0 18px 50px rgba(0,0,0,0.08);
      overflow: hidden;
    }
    .dashboard-shot-wrap img{
      display: block;
      width: 100%;
      height: auto;
      max-width: 960px;
      margin: 0 auto;
      border-radius: 14px;
      box-shadow: 0 12px 35px rgba(0,0,0,0.14);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .dashboard-shot-wrap img:hover{
      transform: scale(1.01);
      box-shadow: 0 18px 45px rgba(0,0,0,0.16);
    }

    /* Animations */
    @keyframes up{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform: translateY(0);} }

    /* ── FEATURE TABS ── */
    .feature-tabs-section{ padding: 5rem 2.5rem; border-top: 1px solid var(--border); background: var(--paper-warm); }
    .feature-tabs-inner{ max-width: 1100px; margin: 0 auto; }
    .feature-tabs-header{ text-align: center; margin-bottom: 2.5rem; }
    .feature-tabs-nav{
      display: flex;
      gap: .5rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: .4rem;
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
    }
    .ftab-btn{
      flex: 1;
      min-width: 120px;
      padding: .65rem 1rem;
      border-radius: 10px;
      border: none;
      background: transparent;
      color: var(--ink-soft);
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, color .15s;
      white-space: nowrap;
    }
    .ftab-btn:hover{ background: var(--paper-warm); color: var(--ink); }
    .ftab-btn.active{ background: var(--ink); color: var(--paper); }

    .ftab-panel{ display: none; }
    .ftab-panel.active{ display: block; }
    .ftab-panel-inner{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
      align-items: center;
    }
    .ftab-copy{ display: flex; flex-direction: column; gap: 1.1rem; }
    .ftab-title{ font-family: 'Instrument Serif', serif; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
    .ftab-text{ font-size: .93rem; color: var(--ink-soft); font-weight: 300; line-height: 1.7; }
    .ftab-list{ list-style: none; display: flex; flex-direction: column; gap: .55rem; }
    .ftab-list li{ font-size: .88rem; color: var(--ink-soft); display: flex; gap: .5rem; line-height: 1.45; }
    .ftab-list li .c{ color: #16a34a; flex-shrink: 0; }

    @media (max-width: 800px){
      .feature-tabs-section{ padding: 3.5rem 1.5rem; }
      .ftab-panel-inner{ grid-template-columns: 1fr; gap: 2rem; }
      .ftab-btn{ font-size: .78rem; padding: .55rem .7rem; min-width: 0; }
    }
    @media (max-width: 700px){
      .feature-tabs-section{ padding: 3rem 1rem; }
      .feature-tabs-nav{ gap: .35rem; padding: .35rem; border-radius: 12px; }
      .ftab-btn{ font-size: .75rem; padding: .5rem .55rem; }
    }
    @media (max-width: 480px){
      .feature-tabs-nav{ max-width: 100%; }
      .ftab-btn{ flex: 1 1 40%; }
    }

    /* ── BETWEEN CTA ── */
    .between-cta{ background: var(--ink); padding: 3.5rem 2.5rem; text-align: center; }
    .between-cta-inner{ max-width: 600px; margin: 0 auto; }
    .between-cta h2{ font-family: 'Instrument Serif', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; color: var(--paper); margin-bottom: .75rem; }
    .between-cta p{ font-size: .95rem; color: #9a9a9a; font-weight: 300; margin-bottom: 1.75rem; }
    .between-cta .btn-nav{ background: var(--accent); border-color: var(--accent); color: #000; font-size: .95rem; padding: .9rem 2rem; margin: 0 auto; }
    .between-cta .btn-nav:hover{ opacity: .88; }

    @media (max-width: 800px){
      .feature-spotlight{ padding: 3.5rem 1.5rem; }
      .feature-spotlight-inner{ grid-template-columns: 1fr; gap: 2rem; }
      .feature-spotlight-inner-rev{ direction: ltr; }
      .between-cta{ padding: 2.5rem 1.5rem; }
    }
    @media (max-width: 700px){
      .feature-spotlight{ padding: 3rem 1rem; }
      .feature-spotlight-text{ font-size: .9rem; }
      .between-cta{ padding: 2rem 1rem; }
    }

    /* ── LEGAL PAGES ── */
    .legal-content{ max-width: 720px; margin: 0 auto; }
    .legal-h2{ font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.25rem; }
    .legal-h3{ font-size: 1rem; font-weight: 700; margin: 2rem 0 .6rem; color: var(--ink); }
    .legal-p{ font-size: .93rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: .9rem; font-weight: 300; }
    .legal-p a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
    .legal-list{ margin: .5rem 0 1rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
    .legal-list li{ font-size: .9rem; color: var(--ink-soft); line-height: 1.65; font-weight: 300; }
    .legal-section-title{ font-size: 1rem; font-weight: 700; margin: 2.25rem 0 .5rem; color: var(--ink); }
    .legal-divider{ height: 1px; background: var(--border); margin: 3rem 0; }
    .legal-meta{ font-size: .8rem; color: var(--ink-faint); text-align: center; }

    /* ── COOKIE BANNER ── */
    .cookie-banner{
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      width: calc(100% - 3rem);
      max-width: 680px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.12);
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
      isolation: isolate;
    }
    .cookie-banner.hidden{ display: none; }
    .cookie-text{ flex: 1; font-size: .84rem; color: var(--ink-soft); line-height: 1.55; min-width: 200px; }
    .cookie-text a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
    .cookie-actions{ display: flex; gap: .6rem; flex-shrink: 0; }
    .cookie-btn{ padding: .55rem 1.1rem; border-radius: 10px; font-size: .84rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--ink); transition: background .15s; min-height: 40px; }
    .cookie-btn:hover{ background: var(--paper-warm); }
    .cookie-btn-accept{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .cookie-btn-accept:hover{ opacity: .88; background: var(--ink); }

    /* Cookie Modal */
    .cookie-modal{ position: fixed; inset: 0; z-index: 10000; background: rgba(14,14,14,0.5); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 1.5rem; }
    .cookie-modal.hidden{ display: none; }
    .cookie-modal-box{ background: #fff; border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 520px; box-shadow: 0 12px 50px rgba(0,0,0,0.15); overflow: hidden; }
    .cookie-modal-head{ display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); font-size: .95rem; }
    .cookie-modal-close{ background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--ink-faint); padding: .25rem .5rem; border-radius: 8px; }
    .cookie-modal-close:hover{ background: var(--paper-warm); color: var(--ink); }
    .cookie-modal-body{ padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: .85rem; }
    .cookie-option{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .cookie-option-text{ flex: 1; }
    .cookie-option-text strong{ display: block; font-size: .88rem; margin-bottom: .2rem; }
    .cookie-option-text span{ font-size: .8rem; color: var(--ink-soft); font-weight: 300; line-height: 1.45; }
    .cookie-toggle-on{ font-size: .8rem; color: #16a34a; font-weight: 700; flex-shrink: 0; }
    .cookie-switch{ position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
    .cookie-switch input{ opacity: 0; width: 0; height: 0; }
    .cookie-slider{ position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer; transition: background .2s; }
    .cookie-slider::before{ content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
    .cookie-switch input:checked + .cookie-slider{ background: var(--ink); }
    .cookie-switch input:checked + .cookie-slider::before{ transform: translateX(18px); }
    .cookie-modal-footer{ display: flex; gap: .6rem; padding: 1rem 1.4rem; border-top: 1px solid var(--border); justify-content: flex-end; }

    /* Language switcher */
    .nav-lang{ font-size: .78rem; font-weight: 700; color: var(--ink-faint); padding: .3rem .55rem; border-radius: 7px; border: 1px solid var(--border); transition: color .15s, border-color .15s; letter-spacing: .04em; }
    .nav-lang:hover{ color: var(--ink); border-color: #ccc; }

    @media (max-width: 600px){
      .cookie-banner{ bottom: 1rem; left: 1rem; right: 1rem; width: auto; transform: none; padding: 1rem; gap: .85rem; }
      .cookie-actions{ width: 100%; }
      .cookie-btn{ flex: 1; text-align: center; }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px){
      .features-intro{ grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
      .feat-grid{ grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 800px){
      .nav-inner{ padding: 0 1.25rem; }
      .nav-links{ display:none; }
      .nav-actions{ display:none; }
      .nav-cta-mobile{ display:inline-flex; }
      .nav-toggle{ display:inline-flex; }
      .pricing-grid{ grid-template-columns: 1fr; }
      .plan.best{ transform:none; padding: 2rem 1.75rem; }
      footer{ flex-direction: column; text-align:center; }
      .footer-links{ flex-wrap:wrap; justify-content:center; }
    }

    @media (max-width: 700px){
      .hero-dark{ padding: 2.5rem 1rem 0; }
      .hero-badge{ margin-bottom: 1.35rem; }
      .hero-dark-sub{ font-size: 0.98rem; line-height: 1.55; margin-bottom: 1.8rem; }
      .hero-dark-actions{
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
      }
      .hero-btn-primary,
      .hero-btn-ghost{ width: 100%; justify-content: center; }
      .hero-dark-note{ font-size: 0.84rem; line-height: 1.45; }
      .hero-proof-list{ gap:.5rem; }

      .features-inner,
      .pricing-inner,
      .faq,
      .compare-section,
      .cta-section{ padding-left: 1rem; padding-right: 1rem; }

      .features-inner{ padding-top: 3rem; padding-bottom: 3rem; }
      .pricing-inner{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
      .faq{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
      .compare-section{ padding-top: 3.5rem; padding-bottom: 3.5rem; text-align:left; }
      .compare-section .section-eyebrow,
      .compare-section .section-h,
      .compare-kicker{ text-align: left; }
      .compare-kicker{ font-size:.9rem; }
      .compare-table{ margin-top: 1.8rem; border-radius: 14px; }

      .section-h{ margin-bottom: 0.7rem; }
      .section-sub{ font-size: 0.92rem; line-height: 1.5; }

      .feat-grid{ gap: 0.85rem; }
      .feat-card{ padding: 1rem 0.9rem; border-radius: 14px; }
      .feat-icon{ font-size: 1.2rem; margin-bottom: 0.65rem; }
      .feat-card h3{ font-size: 0.88rem; line-height: 1.25; margin-bottom: 0.35rem; }
      .feat-card p{ font-size: 0.78rem; line-height: 1.45; }

      .dashboard-preview{ padding: 1rem 1rem 0; }
      .dashboard-preview-copy{ margin-bottom: 0.9rem; }
      .dashboard-shot-wrap{ border-radius: 18px; padding: 0.55rem; }
      .dashboard-shot-wrap img{ border-radius: 10px; }

      .billing-toggle{
        width: 100%;
        max-width: 380px;
        justify-content: center;
        border-radius: 18px;
        gap: .5rem;
      }
      .billing-pill{ flex: 1; justify-content: center; font-size: .8rem; padding: .5rem .6rem; }
      .save-badge{ font-size: .68rem; padding: .15rem .45rem; }

      .pricing-grid{ gap: 1rem; }
      .plan{ padding: 1.5rem 1.15rem; }
      .plan.best{ padding: 1.75rem 1.15rem; }
      .plan-amount{ font-size: 2.4rem; }
      .plan-btn{ margin-top: 1rem; padding: .85rem; font-size: .85rem; }

      .faq-q{ padding: 0.9rem 1rem; font-size: 0.9rem; min-height: 48px; }
      .faq-a{ padding: 0 1rem 1rem; font-size: 0.86rem; }

      .cta-section{ padding-top: 4.5rem; padding-bottom: 4.5rem; }
      .cta-section p{ margin-bottom: 2rem; }
      footer{ padding: 1.5rem 1rem; }
    }

    @media (max-width: 500px){
      .feat-grid{ grid-template-columns: 1fr; }
      .feat-card{ padding: 1rem; }
    }

    @media (max-width: 420px){
      .nav-inner{ padding: 0 1rem; gap: 0.5rem; }
      .logo img{ height: 44px; }
      .nav-cta-mobile{ padding: 0.42rem 0.7rem; font-size: 0.8rem; border-radius: 10px; }
      .hero-h1{ font-size: clamp(2.1rem, 10vw, 2.8rem); }
      .hero-dark-actions{ max-width: none; }
      .billing-toggle{ border-radius: 14px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior:auto !important; }
      .feat-card{ transition:none !important; }
      .hero-badge, .hero-h1, .hero-dark-sub, .hero-dark-actions, .hero-dark-note, .hero-proof-list{ animation:none !important; opacity:1 !important; }
    }