/* ═══════════════════════════════════════════════
     TYPE — tight, confident, edgy sans
     ═══════════════════════════════════════════════ */
  .h-mega {
    /* h-mega — Stage Grotesk 700 · lh 0.9 · track −4% (brand book §04) */
    font-family: var(--display);
    font-size: 72px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 111.111% */
    color: #fff;
    text-wrap: balance;
    @media (max-width: 992px) {
      font-size:38px;
    }
  }
  /* Quiet emphasis (brand book V/05): Caslon italic sits softer, meaning lives here */
  .h-mega em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--secondary);
    letter-spacing: -0.01em;
  }
  .h-2 {
    /* h-2 — Stage Grotesk 700 · lh 0.98 · track −3% */
    font-family: var(--display);
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 105%; /* 80% */
    letter-spacing: -0.32px;
    color:#fff;
     @media (max-width: 992px) {
      font-size:28px;
    }
  }
  .h-2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--secondary);
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.70);
  }
  .h-3 {
    /* h-3 — Stage Grotesk 600 · lh 1.15 · track −2% */
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .h-3 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--secondary);
  }
  .lede {
    /* .lede — DM Sans 400 · 1.15rem · lh 1.55 · max 56ch */
    font-family: var(--sans);
    font-size: clamp(1.05rem, 1.25vw, 1.15rem);
    line-height: 1.55;
    color: var(--secondary);
    font-weight: 400;
   padding:20px 0 0;
    text-wrap: pretty;
  }
  .body { font-size: 15px; line-height: 1.6; color: var(--secondary); }

  /* Eyebrow / label — DM Sans 500, 10.5-11px CAPS, track +14-18% */
  .eyebrow, .mono.up {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);   /* eyebrows carry the brand */
  }
  .eyebrow.mute { color: var(--mute); }

  .mono {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--mute);
  }

  /* Olly's voice — Libre Caslon italic, gold. Pull-quotes, "— Olly" signatures.
     NEVER interface, body, buttons. Brand book §04 rule V/06. */
  .voice, .voice-line {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
    font-size: clamp(1.4rem, 1.8vw, 2rem);
    line-height: 1.25;
    letter-spacing: 0;
  }
  .voice-line.sm { font-size: clamp(1.15rem, 1.35vw, 1.4rem); }
  .voice-line.lg { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }

  /* Legacy .hand alias — Nandita's handwriting class now renders as Caslon (per brand book) */
  .hand {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .hand.lg { font-size: 2rem; }

  /* ═══════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════ */
  .shell {
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1.25rem, 5vw, 4rem);
  }

  /* ═══════════════════════════════════════════════
     SURFACE ROTATION  ·  canvas → card → inset → gradient
     Sections tagged with data-surface get lifted / deepened / washed
     to break the "one flat navy" monotony. Approx 60/25/10/5 by area.
     ═══════════════════════════════════════════════ */
  section[data-surface="card"] {
    background: rgba(27, 27, 32, 0.51);
  }
  section[data-surface="inset"] {
    background: var(--bg-3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  }
  section[data-surface="grad"] {
    position: relative;
    background: rgba(27, 27, 32, 0.51);
    overflow: hidden;
    isolation: isolate;
    color: var(--pure);
  }

  /* Focus outline on gradient sections must be visible — white, not brand blue */
  section[data-surface="grad"] .btn:focus-visible {
    outline: 2px solid var(--pure);
    outline-offset: 3px;
  }
  /* Inside a gradient section, text goes pure white (brand book §03 rule) */
  section[data-surface="grad"] .h-2,
  section[data-surface="grad"] .h-3,
  section[data-surface="grad"] .final-h,
  section[data-surface="grad"] .lede,
  section[data-surface="grad"] p,
  section[data-surface="grad"] .eyebrow {
    /* color: var(--pure); */
  }
  section[data-surface="grad"] .h-2 em,
  section[data-surface="grad"] .h-3 em,
  section[data-surface="grad"] .final-h em {
    color: rgba(255,255,255,0.78);    /* italic soft-close on gradient */
  }
  section[data-surface="grad"] .voice-line,
  section[data-surface="grad"] .voice {
    color: var(--gold);               /* gold survives on gradient */
  }
  /* When a card sits on the card surface, deepen its base one notch */
  section[data-surface="card"] .value-card,
  section[data-surface="card"] .how-card,
  section[data-surface="card"] .sub-card,
  section[data-surface="card"] .tcard,
  section[data-surface="card"] .step {
    background: var(--bg);            /* card-in-card contrast */
    border-color: var(--line-2);
  }

  /* ────────────────────────────────────────────────────────────────
     LIGHT SURFACE — the "wordmark on light" moment (brand book §02
     logo variations). One breathing warm-neutral break from the
     navy world; ink stays dark, blue becomes deeper. */
  section[data-surface="light"] {
    --l-bg:        #F0EEE7;        /* warm off-white paper */
    --l-bg-2:      #FFFFFF;        /* card on light */
    --l-line:      #E1DED4;        /* soft hairline */
    --l-line-2:    #C9C5B8;        /* stronger border */
    --l-ink:       #1A1F26;        /* dark ink for AAA on light */
    --l-secondary: #4A5561;        /* body copy on light */
    --l-mute:      #7C859A;        /* labels on light */
    --l-accent:    #1E6FD0;        /* deeper blue holds contrast on light */
    /* background: var(--l-bg);
    color: var(--l-ink);
    border-top: 1px solid var(--l-line);
    border-bottom: 1px solid var(--l-line); */
  }

  section[data-surface="light"] .eyebrow {
    color: var(--l-accent);
  }
  section[data-surface="light"] .live {
    color: var(--gold);              /* gold survives on both worlds */
  }
  section[data-surface="light"] .live::before {
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(245, 200, 69, 0.55);
  }
  /* Phone-thread mockups on the light surface — invert to a light frame */
  section[data-surface="light"] .phone {
    background: transparent;
  }
  section[data-surface="light"] .phone-screen {
    background: var(--l-bg-2);
    border-color: var(--l-line-2);
    box-shadow: 0 30px 60px -30px rgba(30, 40, 55, 0.25);
  }
  section[data-surface="light"] .phone-statusbar,
  section[data-surface="light"] .phone-header,
  section[data-surface="light"] .phone-foot {
    color: var(--l-mute);
    border-color: var(--l-line);
  }
  section[data-surface="light"] .ph-name { color: var(--l-ink); }
  section[data-surface="light"] .ph-status { color: var(--l-mute); }
  section[data-surface="light"] .phone-time { color: var(--l-mute); }
  section[data-surface="light"] .ph-avatar {
    background: var(--l-accent);
    color: #fff;
  }
  section[data-surface="light"] .ph-avatar .live {
    background: var(--gold);
  }
  section[data-surface="light"] .ph-bubble.in {
    background: #F5F3EC;
    color: var(--l-ink);
    border-color: var(--l-line);
  }
  section[data-surface="light"] .ph-bubble.in .qt {
    color: var(--l-mute);
    border-color: var(--l-line-2);
  }
  section[data-surface="light"] .ph-bubble.out {
    background: var(--l-accent);
    color: #fff;
  }
  section[data-surface="light"] .ph-bubble.out small {
    color: rgba(255,255,255,0.75);
  }
  section[data-surface="light"] .ph-bubble strong {
    color: var(--gold);
  }
  section[data-surface="light"] .ph-action {
    background: var(--l-ink);
    color: #fff;
  }
  /* Story caption text on light */
  section[data-surface="light"] .sc-when { color: var(--l-accent); }
  section[data-surface="light"] .sc-who,
  section[data-surface="light"] .sc-who strong { color: var(--l-ink); }
  section[data-surface="light"] .sc-note {
    color: var(--l-ink);              /* darker gold reads better here */
    font-weight: 400;
  }
  section[data-surface="light"] .sc-who .av {
    background: var(--l-ink);
    color: #fff;
  }
  /* Reveal animation for light section keeps the same transform */
  section[data-surface="light"] .reveal { color: inherit; }
  /* Buttons on gradient surfaces: invert to solid white with navy text.
     The gradient section IS the "meet Olly" moment; the button stands out
     as pure white to remain the single loudest signal. */
  section[data-surface="grad"] .btn-grad {
    background: var(--pure);
    color: var(--bg);
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.35);
  }
  section[data-surface="grad"] .btn-grad:hover {
    background: var(--pure);
    color: var(--bg);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4);
  }
  section[data-surface="grad"] .btn-line {
    color: var(--pure);
    border-color: rgba(255,255,255,0.35);
  }
  section[data-surface="grad"] .btn-line:hover {
    border-color: var(--pure);
    color: var(--pure);
  }
  section[data-surface="grad"] .app-badge {
    border-color: rgba(255,255,255,0.28);
    color: var(--pure);
  }
  section[data-surface="grad"] .app-badge:hover {
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
  }
  section[data-surface="grad"] .app-badge svg { color: var(--pure); }
  section[data-surface="grad"] .app-badge small { color: rgba(255,255,255,0.75); }
  section[data-surface="grad"] .app-badge strong { color: var(--pure); }
  section[data-surface="grad"] .app-row-note {
    color: var(--gold);
  }
  section[data-surface="grad"] .final-meta,
  section[data-surface="grad"] .final-meta .talk {
    color: rgba(255,255,255,0.85);
  }
  section[data-surface="grad"] .final-meta .talk:hover {
    color: var(--gold);
  }
  section[data-surface="grad"] .final-sig,
  section[data-surface="grad"] .final-sig .accent {
    color: var(--gold);
  }
  section[data-surface="grad"] .fs-num { color: var(--pure); }
  section[data-surface="grad"] .fs-lbl { color: rgba(255,255,255,0.65); }
  section[data-surface="grad"] .fs-divider { background: rgba(255,255,255,0.2); }
  section { position: relative; }

  /* ═══════════════════════════════════════════════
     BUTTONS  ·  Three styles, one primary per page (brand book §06)
     ═══════════════════════════════════════════════ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 1.35rem;
    min-height: 44px;              /* WCAG target */
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  /* Primary — flat blue, everywhere else */
  .btn-primary {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19.2px; /* 120% */
    letter-spacing: -0.16px;
    border-radius: 33px;
    background: #FFF;
    box-shadow: 0 -0.301px 1.144px -1.667px rgba(0, 0, 0, 0.59) inset, 0 -1.144px 4.348px -3.333px rgba(0, 0, 0, 0.49) inset, 0 0.602px 0.602px -1.25px rgba(0, 0, 0, 0.18), 0 2.289px 2.289px -2.5px rgba(0, 0, 0, 0.16), 0 10px 10px -3.75px rgba(0, 0, 0, 0.06);
  }
  .btn-primary:hover { 
    background: #1E6FD0; 
    color:#fff; 
    transform: translateY(-1px); 
    span{
      svg{
        path{
          stroke:#fff;
        }
      }
    }
  }

  /* Gradient CTA — the SINGLE "Meet Olly" moment per page (brand book §06 · §09 guardrail 3) */
  .btn-grad {
    background: var(--grad);
    color: var(--pure);
    border-color: transparent;
    position: relative;
    padding: 0.95rem 1.55rem;
    box-shadow: 0 8px 24px -8px rgba(61, 110, 238, 0.45);
  }
  .btn-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(61, 110, 238, 0.55); }

  /* Ghost — inline text-link with a soft underline */
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    padding: 0.6rem 0;
    min-height: auto;
    border: none;
    border-bottom: 1.5px solid var(--line-2);
    border-radius: 0;
  }
  .btn-ghost:hover { color: var(--accent); border-bottom-color: var(--accent); gap: 0.8rem; }

  /* Line — outline button, no fill */
  .btn-line {
    color: #E5E5E5;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.6px; /* 160% */
    letter-spacing: -0.16px;
   border-radius: 33px;
   background: rgba(250, 250, 250, 0.05);
   box-shadow: 0 -0.301px 1.144px -1.667px rgba(0, 0, 0, 0.59) inset, 0 -1.144px 4.348px -3.333px rgba(0, 0, 0, 0.49) inset, 0 0.602px 0.602px -1.25px rgba(0, 0, 0, 0.18), 0 2.289px 2.289px -2.5px rgba(0, 0, 0, 0.16), 0 10px 10px -3.75px rgba(0, 0, 0, 0.06);
  }
  .btn-line:hover { border-color: var(--white); color: var(--black); }

  .btn .arr { transition: transform 0.18s ease; }
  .btn:hover .arr { transform: translateX(3px); }

  /* ═══════════════════════════════════════════════
     LIVE BADGE  ·  gold dot + "Live" label (brand book §06)
     The pulse is THE ONLY looping animation on the page.
     ═══════════════════════════════════════════════ */
  .live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(245, 200, 69, 0.55);
    animation: olly-pulse 2.4s ease-in-out infinite;
  }
  @keyframes olly-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245, 200, 69, 0.55); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(245, 200, 69, 0);   }
  }
  @media (prefers-reduced-motion: reduce) {
    .live::before { animation: none; }
  }
  /* Pills, tags — one system, borrowed shape */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--secondary);
    background: transparent;
  }
  .pill.hold  { border-color: var(--rose);  color: var(--rose);  }
  .pill.brand { border-color: var(--accent);color: var(--accent);}
  .pill.gold  { border-color: var(--gold);  color: var(--gold);  }

  /* ═══════════════════════════════════════════════
     NAV
     ═══════════════════════════════════════════════ */
  nav.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(14, 14, 12, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.5rem;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
  }
  /* "Olly" wordmark — Stage Grotesk 700, tracking −4%, followed by a
     gradient dot (a period that's alive). Brand book §02. */
  .brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.04em;
    color: var(--ink);
    img{
      width: 80px;
       @media (max-width: 900px) {
        width: 56px;
       }
    }
  }
  .brand .dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--grad);
    border-radius: 50%;
    align-self: center;
    transform: translateY(0.32em);        /* sit on the baseline like a period */
  }
  .nav-links { display: flex; gap: 1.75rem; justify-content: center; }
  .nav-links a {
    font-size: 14px;
    color: var(--secondary);
    font-weight: 500;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta-group { display: flex; align-items: center; gap: 0.85rem; }
  .nav-signin { font-size: 14px; color: var(--secondary); font-weight: 500; }
  .nav-signin:hover { color: var(--ink); }

  /* ═══════════════════════════════════════════════
     HERO — first-person voice, asymmetric, big sans
     ═══════════════════════════════════════════════ */
  .hero {
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  /* Hero gradient wash — one of the identity moments (brand book §03) */
  .hero::before {
    z-index: 0;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: scaleY(-1);
    background: radial-gradient(163% 150% at 50% 16.5%, rgba(16, 11, 29, 0) 25.68%, #100B1D 38.29%, #21104B 44.14%, #243C91 50.78%, #3ABFD5 65.86%);
    opacity: .85;
    @media (max-width: 900px) {
      /* border-radius: 28px;
      background: radial-gradient(529.21% 311.07% at -68.19% 139.08%, rgba(16, 11, 29, 0.00) 25.68%, #100B1D 38.29%, #21104B 44.14%, #243C91 50.78%, #3ABFD5 65.86%), #000; */
    }
  }
  .hero > * { position: relative; z-index: 1; }
  .hero-grid {
    /* display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 30px;
    column-gap: 30px; */
    text-align: center;
    padding:70px 0 0;
  }
  @media (max-width: 900px) {
    .hero-grid { 
      grid-template-columns: 1fr; 
      gap:10px;
      padding: 40px 0 0;
    }
  }

  .hero-greet {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary);
  }
  .hero-greet .pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .hero-greet .pill .dt {
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 1.8s ease-in-out infinite;
  }

  .hero-h {
                    /* "The AI Reputation Manager" — 2 lines desktop */
    margin-bottom: 1.25rem;
    margin-left: -0.02em;             /* optical hang into left gutter */
  }
  /* Conviction line — Caslon italic gold; bumped from caption to conviction size */
  .hero-meet {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.25;
    color: var(--gold);
    margin-bottom: 2rem;
    letter-spacing: 0;
    max-width: 24ch;
  }

  /* App Store / Play Store badge row (legacy — used on pricing page) */
  .app-row {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: flex-start;
  }
  .app-row-note {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--gold);
    line-height: 1.2;
    margin-left: 0.15rem;
  }
  .app-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; }
  .app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s;
  }
  .app-badge:hover { border-color: var(--line-3); background: var(--bg-2); }
  .app-badge svg { color: var(--ink); flex-shrink: 0; }
  .app-badge span { display: flex; flex-direction: column; line-height: 1.1; }
  .app-badge small { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 1px; }
  .app-badge strong { font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }

  /* Flagged sentiment pill in inbox detail */
  .id-head .sentiment.flag {
    color: var(--accent);
    font-weight: 600;
  }

  .hero-sig {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2.25rem;
  }
  .hero-sig .sig-line { width: 24px; height: 1px; background: var(--line-3); }
  .hero-sig .sig {
    font-family: var(--hand);
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--ink);
    line-height: 1;
  }
  .hero-sig .sig .accent { color: var(--accent); }

  .hero-lede { margin-bottom: 2.25rem; color: var(--secondary); font-size: 1.1rem; text-wrap: pretty; }
  .hero-lede em { font-style: normal; color: var(--ink); font-weight: 500; }

  .hero-ctas {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }

  /* Trust strip — sits at the bottom of the hero, above social-proof density */
  .hero-trust {
   display: flex;
    align-items: center;
    gap: 24px;
    padding: 40px 0;
    justify-content: center;
    background-color: #000;
    @media (max-width: 992px) {
      flex-direction: column;
      padding:20px 0;
    }
    
  }
  .hero-trust-lbl {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    flex-shrink: 0;
  }
  

  .hero-trust-logos {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.hero-trust-track {
    display: flex;
    align-items: center;
    gap: 25px;
    width: max-content;
    animation: marquee 30s linear infinite;

    &:hover {
        animation-play-state: paused;
    }

    span {
        flex-shrink: 0;
        position: relative;
        width: 100px;
        height: 80px;
        background: #fff;
        border-radius: 8px;
        @media (max-width: 992px) {
          width: 80px;
          height: 60px;
        }

        img {
            width: 85px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 6px;
            @media (max-width: 992px) {
              width: 65px;
           }
        }
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 12.5px));
    }
}

  .hero-trust-logos span {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    letter-spacing: -0.02em;
    color: var(--secondary);
    transition: opacity 0.18s ease, color 0.18s ease;
    white-space: nowrap;
  }
  .hero-trust-logos span:hover { opacity: 1; color: var(--ink); }

  /* ═══════════════════════════════════════════════
     PLATFORMS STRIP — review platforms Olly reads from
     Sits between Story (light) and Pricing (canvas) on a
     card surface. Compact vertical rhythm.
     ═══════════════════════════════════════════════ */
  .platforms-section {
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  }
  .platforms-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  .platforms-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .platforms-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    flex-wrap: wrap;
  }
  .pf-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--secondary);
    transition: opacity 0.18s ease, color 0.18s ease;
    img{
      width: 120px;
    }
  }
  .pf-logo:hover { opacity: 1; color: var(--ink); }
  .pf-mark {
    flex-shrink: 0;
    color: currentColor;
  }
  .pf-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    letter-spacing: -0.02em;
  }
  .pf-more {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
    padding-left: clamp(0.5rem, 1.5vw, 1rem);
    border-left: 1px solid var(--line-2);
    align-self: center;
  }

  /* HERO STAGE — inbox screenshot tilted, with handwritten arrow over it */
  .hero-stage {
    position: relative;
    margin-top: clamp(2rem, 3.5vw, 3rem);
    padding: clamp(2rem, 4vw, 3rem) 0;
  }
  /* Identity-gradient halo behind the mockup — grounds it on the navy canvas. */
  .hero-stage::before {
    content: "";
    position: absolute;
    top: 8%; right: -6%;
    width: 90%; height: 88%;
    background: var(--grad);
    filter: blur(70px);
    opacity: 0.22;
    border-radius: 24px;
    pointer-events: none;
    z-index: 0;
  }
  .hero-stage > * { position: relative; z-index: 1; }

  .stage-frame {
    position: relative;
    transform: rotate(-1.4deg);
    transform-origin: 30% 50%;
    max-width: 980px;
    margin-left: auto;
    margin-right: 4%;
    /* Sit on top of the halo — the hairline traces the inbox card edge in
       the identity gradient. */
    border-radius: 14px;
    box-shadow:
      0 0 0 1px rgba(155, 93, 229, 0.20),
      0 60px 120px -30px rgba(0,0,0,0.75),
      0 0 90px -20px rgba(31, 199, 203, 0.18);
  }
  @media (max-width: 900px) {
    .stage-frame { transform: none; margin-right: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stage-frame { transform: none; }
  }

  .inbox {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
      0 50px 100px -30px rgba(0,0,0,0.7),
      0 20px 40px -15px rgba(46,134,230,0.08);
  }
  .inbox-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-3);
  }
  .traffic { display: flex; gap: 0.4rem; }
  .traffic span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--line-2);
  }
  .ib-where {
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--secondary);
  }
  .ib-where .sep { color: var(--line-3); margin: 0 0.5rem; }
  .ib-avatar {
    width: 26px; height: 26px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px;
    font-weight: 700;
  }

  .inbox-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 460px;
  }

  .inbox-list { border-right: 1px solid var(--line); }
  .ilh {
    padding: 0.7rem 1rem;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
  }
  .ilh .count {
    background: var(--accent);
    color: var(--bg);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  .il-row {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
  }
  .il-row:hover { background: var(--bg-3); }
  .il-row.sel { background: var(--bg-3); }
  .il-row.sel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--accent);
  }
  .il-row.flagged { }
  .il-row.flagged::after {
    content: "FLAG";
    position: absolute;
    top: 0.85rem; right: 0.85rem;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: 0.05rem 0.3rem;
    font-weight: 600;
  }

  .il-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
  }
  .il-platform {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.05rem 0.35rem;
    color: var(--ink);
    font-weight: 500;
  }
  .il-stars {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--ink);
  }
  .il-stars.low { color: var(--accent); }
  .il-time {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
  }
  .il-text {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.4rem;
  }
  .il-author {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mute);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .il-author .av-mini {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink);
    display: grid; place-items: center;
    font-size: 8.5px;
    font-weight: 600;
    font-family: var(--sans);
  }
  .il-author .badge-r {
    margin-left: auto;
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    padding: 0 0.3rem;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .il-author .badge-r.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* detail */
  .inbox-detail {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .id-head {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
  }
  .id-head .sentiment {
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0 0.35rem;
  }
  .id-quote {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
  }
  .id-by {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--mute);
  }
  .id-by .av {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink);
    display: grid; place-items: center;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--sans);
  }
  .id-reply {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.85rem 1rem;
  }
  .id-reply-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
    color: var(--mute);
  }
  .id-reply-h .voice-pill {
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 100px;
    padding: 0.1rem 0.5rem;
    font-weight: 600;
  }
  .id-reply-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
  }
  .caret {
    display: inline-block;
    width: 1.5px;
    height: 13px;
    background: var(--accent);
    vertical-align: -2px;
    margin-left: 1px;
    animation: blink 1.1s step-end infinite;
  }
  @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
  .id-actions { display: flex; gap: 0.5rem; }
  .id-act {
    font-size: 12px;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
  }
  .id-act.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .id-act.ghost   { border-color: transparent; color: var(--mute); padding: 0.5rem 0.4rem; }

  /* HANDWRITTEN ANNOTATION OVER STAGE */
  .anno {
    position: absolute;
    z-index: 5;
    pointer-events: none;
  }
  .anno .label {
    /* Olly's voice — Caslon italic gold (brand book §04 rule V/06) */
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--gold);
    line-height: 1.15;
    white-space: nowrap;
  }
  .anno svg { color: var(--gold); opacity: 0.9; }

  /* anno positions, on the stage */
  .anno-1 { top: -8px; right: 8%; }
  .anno-2 {
    top: auto;
    bottom: -70px;
    left: 4%;
    right: auto;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .anno-2 .label {
    margin-left: 0.5rem;
    white-space: nowrap;
  }
  .anno-2 svg {
    margin-left: 0;
    transform: scaleX(-1) rotate(-8deg);
  }
  @media (max-width: 1280px) {
    .anno-2 { bottom: -60px; left: 2%; width: 150px; }
    .anno-2 .label { font-size: 1.4rem; }
  }
  @media (max-width: 1080px) {
    .anno-2 { bottom: -50px; left: 0; width: 140px; }
    .anno-2 .label { font-size: 1.25rem; }
  }
  @media (max-width: 900px) {
    .anno { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .anno .label, .anno-2 .label, .anno-2 svg { transform: none; }
  }

  /* ═══════════════════════════════════════════════
     THE WHY — narrative + 3 review-proof cards on gradient
     v8 rebuild: cards are aspect-ratio: 1 squares at desktop for
     scanability, header-top / quote-center / insight-bottom via
     space-between. Copy sits above the grid.
     ═══════════════════════════════════════════════ */
  .why-section {
    border: none;
  }
  .why-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 5vw, 4.5rem);
  }
  
  .why-h2 { margin-bottom: 1.5rem; }
  .why-body {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
    max-width: 62ch;
    text-wrap: pretty;
  }
  .why-body + .why-body { margin-top: 1rem; }
  .why-fit {
    color: #BABABA;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.8px; /* 110% */
    letter-spacing: -0.36px;
  }

  /* Proof grid — 3 up on wide, 1 up on narrow */
  .why-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.5vw, 1.5rem);
  }
  @media (max-width: 900px) {
    .why-proof-grid { grid-template-columns: 1fr; }
  }

  /* Each card is a square at desktop. Contents lay out
     header / quote / insight with space between them. */
  .why-proof {
    border-radius: 30.27px;
    border: 1.766px solid rgba(255, 255, 255, 0.17);
    background: #25252C;
    box-shadow: 0 -0.38px 1.443px -2.102px rgba(0, 0, 0, 0.59) inset, 0 12.613px 12.613px -4.73px rgba(0, 0, 0, 0.06), 0 2.886px 2.886px -3.153px rgba(0, 0, 0, 0.16), 0 0.76px 0.76px -1.577px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18.162160873413086px);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  @media (min-width: 900px) {
    /* .why-proof { aspect-ratio: 1 / 1; } */
  }
  .why-proof:hover {
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
  }

  .wp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .wp-stars {
    font-family: var(--sans);
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--gold);
    line-height: 1;
  }
  .wp-stars.low { color: var(--rose); }
  .wp-stars.mid { color: var(--amber); }
  .wp-platform {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .p{
    border-radius: 126.126px;
    padding: 0 10px 0 0;
  }
  .p1{
    background: #3B2729;
  }
  .p2{
    background: #062F32;
  }
  .review_star{
    padding: 5px;
    border-radius: 100%;
  }
  .review{
    font-size: 20.18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.202px;
  }
  .wp-quote {
    font-family: var(--sans);
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    font-size: 20.18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 28.252px */
  }
  .wp-quote mark {
    background: transparent;
    color: #E0527F;
    font-weight: 600;
  }
  .wp-insight {
    align-items: baseline;
    gap: 0.65rem;
    padding-top: 1rem;
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.4;
    text-wrap: pretty;
  }

  .wp-insight-txt { 
    color: rgba(255, 255, 255, 0.67);
    font-size: 17.658px;
    font-style: normal;
    font-weight: 400;
    line-height: 117%; /* 20.659px */
   }

  /* ═══════════════════════════════════════════════
     FEATURES — three cards linking to detail pages
     Replaces the old How + Voice sections. Each card is a
     clickable feature entry with a small product screen.
     ═══════════════════════════════════════════════ */
  /* Vertical padding only — keep .shell's horizontal padding intact */
  
  .features-head {
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
    text-align: center;
  }
  .features-head .eyebrow { display: block; margin-bottom: 0.75rem; }
  @media (max-width: 900px) { .features-head { grid-template-columns: 1fr; } }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  @media (max-width: 1080px) { .features-grid { grid-template-columns: 1fr; } }

  .feature {
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
  }
  .feature:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -24px rgba(46, 134, 230, 0.35);
  }
  .feature-featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(46,134,230,0.06), var(--bg));
  }
  .feature-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
  }
  .feature-tag {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .feature-kind {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .feature-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
  }
  .feature-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--secondary);
    letter-spacing: 0;
  }
  .feature-body {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--secondary);
    text-wrap: pretty;
  }

  /* Feature screen — small product-screen mockup */
  .feature-screen {
    border-radius: 10px;
    
  }
  .fs-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--line);
    background: rgba(0,0,0,0.15);
  }
  .fs-bar .traffic { display: flex; gap: 4px; }
  .fs-bar .traffic span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
  .fs-title {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: center;
  }
  .fs-bar .live { font-size: 9.5px; }
  .fs-body {
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
  }

  /* AskOlly chat pattern */
  .fs-msg { display: flex; flex-direction: column; gap: 3px; }
  .fs-from {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .fs-msg.me .fs-from { color: var(--secondary); }
  .fs-msg.olly .fs-from { color: var(--accent); }
  .fs-bubble {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
  }
  .fs-msg.me .fs-bubble { background: var(--bg); border-color: var(--line); }
  .fs-msg.olly .fs-bubble { border-color: rgba(46,134,230,0.4); }
  .fs-bubble strong { color: var(--pure); font-weight: 600; display: block; margin-bottom: 3px; }
  .fs-cite {
    display: block;
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .fs-chip-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 0.15rem; }
  .fs-chip {
    font-family: var(--sans);
    font-size: 10.5px;
    padding: 3px 8px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--secondary);
    background: var(--bg-2);
    white-space: nowrap;
  }

  /* Voice screen bubbles */
  .fs-bubble-in, .fs-bubble-out {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    max-width: 92%;
  }
  .fs-bubble-in {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--secondary);
    align-self: flex-start;
  }
  .fs-bubble-out {
    background: var(--bg);
    border: 1px solid rgba(46,134,230,0.4);
    color: var(--ink);
    align-self: flex-end;
  }
  .fs-bubble-meta {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 4px;
  }
  .fs-voice-meter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 0.15rem;
  }
  .fs-voice-bar {
    flex: 1;
    height: 4px;
    background: var(--bg);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
  }
  .fs-voice-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 94%;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 999px;
  }
  .fs-voice-pct { color: var(--gold); font-weight: 700; }

  /* Fix First bars */
  .fs-bars { display: flex; flex-direction: column; gap: 0.5rem; }
  .fs-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 0.55rem;
    align-items: center;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }
  .fs-bar-lbl { color: var(--secondary); }
  .fs-bar-track {
    height: 6px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .fs-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
  }
  .fs-bar-num { color: var(--ink); font-weight: 700; text-align: right; }
  .fs-callout {
    margin-top: 0.35rem;
    padding: 0.55rem 0.7rem;
    background: rgba(245,200,69,0.10);
    border: 1px solid rgba(245,200,69,0.28);
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink);
  }
  .fs-callout strong { color: var(--gold); font-weight: 700; }

  /* Learn more link at bottom of each card */
  .feature-more {
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.18s ease;
  }
  .feature:hover .feature-more { gap: 0.55rem; color: var(--pure); }
  .feature-featured .feature-more { color: var(--pure); }

  /* ═══════════════════════════════════════════════
     STORY — phone-thread-style cards
     Three real moments, told as message threads
     ═══════════════════════════════════════════════ */
     .slick-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -50px;
        background-color: #000;
        border-radius: 50px;
        padding: 8px;
        @media (max-width: 992px) {
            top: unset;
            bottom: -115px;
            transform: unset;
            left: calc(50% - 50px);
        }
      }
      .slick-next {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -50px;
          background-color: #000;
          border-radius: 50px;
          padding: 8px;
          @media (max-width: 992px) {
            top: unset;
            bottom: -115px;
            transform: unset;
            right: calc(50% - 50px);
          }
      }
  .story-section { 
    /* background: radial-gradient(201.26% 185.2% at 35.6% 123.2%, rgba(16, 11, 29, 0.00) 25.68%, #100B1D 38.29%, #21104B 44.14%, #243C91 50.78%, #3ABFD5 65.86%);  */
    background-color: #1E6FD0;
    @media (max-width: 992px) {
      padding: 40px 0 90px;
    }
  }
  .story-head {
    max-width: 760px;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  }
  .story-head .h-2 { margin-bottom: 1rem; }

  .story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .story_block{
    margin: 0 20px 0;
    border-radius: 32px;
    border: 1px solid rgba(230, 230, 230, 0.10);
    background: rgba(250, 250, 250, 0.05);
    box-shadow: 0 -0.301px 1.144px -1.667px rgba(0, 0, 0, 0.59) inset, 0 -1.144px 4.348px -3.333px rgba(0, 0, 0, 0.49) inset, 0 0.602px 0.602px -1.25px rgba(0, 0, 0, 0.18), 0 2.289px 2.289px -2.5px rgba(0, 0, 0, 0.16), 0 10px 10px -3.75px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(5px);
    padding: 24px;
    gap: 24px;
     @media (max-width: 900px) { 
       padding: 15px;
       gap: 15px;
       border-radius: 26px;
       margin: 0;
     }
  }
  .story_title{
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 26.4px; /* 110% */
    padding: 24px 0;
  }
  .story_desc{
    color: rgba(255, 255, 255, 0.60);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 17.6px; /* 110% */
    padding-bottom: 24px;
  }
  .story_cta{
    border-radius: 33px;
    background: #FAFAFA;
    box-shadow: 0 -0.301px 1.144px -1.667px rgba(0, 0, 0, 0.59) inset, 0 -1.144px 4.348px -3.333px rgba(0, 0, 0, 0.49) inset, 0 0.602px 0.602px -1.25px rgba(0, 0, 0, 0.18), 0 2.289px 2.289px -2.5px rgba(0, 0, 0, 0.16), 0 10px 10px -3.75px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(5px);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.6px; /* 182.857% */
    display: inline-block;
    padding: 14px 20px;
    .ask_oly{
      display: flex;
      align-items: center;
    }
  }
  .phone {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 0.6rem;
    position: relative;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
  }
  .phone:nth-child(1) { transform: rotate(-1deg); }
  .phone:nth-child(2) { transform: rotate(0.6deg); margin-top: 1.5rem; }
  .phone:nth-child(3) { transform: rotate(-0.3deg); }

  .phone-screen {
    background: var(--bg);
    border-radius: 16px;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
  }
  .phone-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem 0.4rem;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .phone-statusbar .icons {
    display: inline-flex; gap: 0.3rem; align-items: center;
    color: var(--mute);
    font-size: 10.5px;
  }
  .phone-header {
    text-align: center;
    padding: 0.65rem 1rem 0.85rem;
    border-bottom: 1px solid var(--line);
  }
  .ph-avatar {
    width: 36px; height: 36px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto 0.4rem;
    position: relative;
  }
  .ph-avatar .live {
    position: absolute;
    bottom: 0; right: 0;
    width: 9px; height: 9px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg);
  }
  .ph-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .ph-status { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; margin-top: 0.15rem; }

  .phone-body {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow: hidden;
  }
  .phone-time {
    text-align: center;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0.25rem 0;
  }
  .ph-bubble {
    max-width: 82%;
    padding: 0.55rem 0.8rem;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
  }
  .ph-bubble.in {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
    color: var(--ink);
    align-self: flex-start;
  }
  .ph-bubble.out {
    background: var(--accent);
    color: var(--bg);
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    font-weight: 500;
  }
  .ph-bubble small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    opacity: 0.7;
    font-weight: 500;
  }
  .ph-bubble .qt {
    font-style: italic;
    color: var(--secondary);
    font-size: 12px;
    border-left: 2px solid var(--line-2);
    padding-left: 0.55rem;
    margin-bottom: 0.4rem;
    display: block;
  }
  .ph-action {
    align-self: flex-end;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 100px;
    padding: 0.35rem 0.85rem;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .phone-foot {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    justify-content: space-between;
  }

  .story-caption {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .sc-when {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }
  .sc-who {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 13px;
    color: var(--secondary);
  }
  .sc-who .av {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink);
    display: grid; place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--sans);
  }
  .sc-who strong { color: var(--ink); font-weight: 600; }
  /* Story caption note — Olly's own voice, Caslon italic gold (V/06) */
  .sc-note {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--gold);
    font-weight: 400;
    line-height: 1.15;
    margin-top: 0.4rem;
    letter-spacing: 0;
  }

  /* ═══════════════════════════════════════════════
     PRICING — three tiers, one featured
     ═══════════════════════════════════════════════ */
  .pricing-section {
    background: #000;
    padding-top: clamp(4rem, 7vw, 7rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
  }
  .pricing-head {
    max-width: 640px;
    margin: 0 auto clamp(2.5rem, 4vw, 4rem);
    text-align: center;
  }
  .pricing-head .lede { margin-left: auto; margin-right: auto; }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* 4-tier variant — 4 columns on wide, 2x2 on medium, 1 col on narrow */
  .pricing-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1400px;
    gap: 1rem;
  }
  @media (max-width: 1180px) { .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 900px)  {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid-4 { grid-template-columns: 1fr; }
  }

  .tier {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }
  .tier:hover { border-color: var(--line-2); }
  .tier-featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(46,134,230,0.06), var(--bg-2));
    position: relative;
    /* subtle lift so the featured tier reads as the primary */
    transform: translateY(-6px);
  }
  @media (max-width: 900px) { .tier-featured { transform: none; } }

  .tier-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
  }
  .tier-tag {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .tier-scale {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .tier-scale-lg {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: -0.35rem;
  }
  .tier-badge {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(46, 134, 230, 0.14);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
  }
  .tier-price {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    line-height: 1;
  }
  .tier-cur {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--secondary);
  }
  .tier-num {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.25rem, 3.5vw, 2.75rem);
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .tier-per {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--mute);
    margin-left: 0.35rem;
  }
  .tier-cur-lg {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .tier-desc {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--secondary);
    text-wrap: pretty;
  }
  .tier-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    flex: 1;
  }
  .tier-list li {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.4;
  }
  .tier-list li::before {
    content: "";
    position: absolute;
    left: 0.15rem; top: 0.5rem;
    width: 7px; height: 7px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
  }
  .tier-cta { width: 100%; justify-content: center; margin-top: 0.5rem; }
  .pricing-foot {
    margin-top: 2.5rem;
    text-align: center;
    font-family: var(--sans);
    font-size: 14px;
  }
  .pricing-foot a {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
    transition: color 0.18s ease;
  }
  .pricing-foot a:hover { color: var(--accent-2); border-color: var(--accent-2); }

  /* Custom-plan row — under the slider, for 5,000+ review teams */
  .pricing-custom {
    max-width: 780px;
    margin: 1.75rem auto 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
  }
  .pc-copy { flex: 1 1 280px; min-width: 240px; }
  .pc-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
  }
  .pc-line {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
    text-wrap: pretty;
  }
  .pc-cta { flex-shrink: 0; }
  @media (max-width: 520px) {
    .pricing-custom { flex-direction: column; align-items: stretch; }
    .pc-cta { justify-content: center; }
  }

  /* ═══════════════════════════════════════════════
     PRICING SLIDER — volume-based, discrete stops
     One panel that scales its price by a review-quota slider.
     Native <input type="range"> with tick buttons that snap.
     ═══════════════════════════════════════════════ */
  .pricing-slider-wrap {
    max-width: 780px;
    margin: 0 auto;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    overflow: hidden;
  }
  /* Subtle gradient stroke behind the price display — one identity moment */
  .pricing-slider-wrap::before {
    content: "";   
    position: absolute;
    top: -30%; right: -20%;
    width: 60%; height: 80%;
    background: var(--grad);
    filter: blur(120px);
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
  }
  .pricing-slider-wrap > * { position: relative; z-index: 1; }

  /* Price + quota display */
  .ps-display {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
  }
  .ps-price {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    gap: 0.1rem;
  }
  .ps-cur {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    color: var(--secondary);
  }
  .ps-num {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(4rem, 8vw, 6rem);
    letter-spacing: -0.04em;
    color: var(--ink);
    /* Smooth number swap — no layout shift, brief flash on change */
    transition: color 0.18s ease;
    min-width: 3.5ch;
    display: inline-block;
    text-align: right;
  }
  .ps-per {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--mute);
    margin-left: 0.35rem;
  }
  .ps-quota {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--secondary);
  }
  .ps-quota-num {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .ps-quota-lbl {
    color: var(--mute);
    font-size: 13px;
    letter-spacing: 0.01em;
  }

  /* Slider — native input, deeply styled */
  .ps-slider { position: relative; padding: 0 0.25rem; }
  .ps-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      var(--accent) 0%, var(--accent) var(--ps-fill, 33.33%),
      var(--line-2) var(--ps-fill, 33.33%), var(--line-2) 100%);
    outline: none;
    cursor: pointer;
    margin: 0;
  }
  /* WebKit thumb */
  .ps-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--bg-2);
    box-shadow: 0 0 0 2px var(--gold), 0 8px 16px -4px rgba(0,0,0,0.4);
    cursor: grab;
    transition: transform 0.12s ease;
  }
  .ps-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
  /* Firefox thumb */
  .ps-range::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--bg-2);
    box-shadow: 0 0 0 2px var(--gold), 0 8px 16px -4px rgba(0,0,0,0.4);
    cursor: grab;
  }
  .ps-range:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 999px;
  }

  /* Tick row — clickable stop labels below the track */
  .ps-ticks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1.25rem;
  }
  .ps-tick {
    background: transparent;
    border: none;
    padding: 0.4rem 0.25rem;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mute);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
    text-align: center;
  }
  .ps-tick:first-child { text-align: left; }
  .ps-tick:last-child  { text-align: right; }
  .ps-tick:hover { color: var(--secondary); }
  .ps-tick.active { color: var(--ink); font-weight: 600; }

  /* CTA row */
  .ps-ctas {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
  }
  .ps-ctas .btn { min-width: 160px; justify-content: center; }

  /* Feature list — 2 columns on desktop */
  .ps-features {
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
  }
  .ps-features-lbl {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .ps-features-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1.5rem;
  }
  @media (max-width: 640px) {
    .ps-features-list { grid-template-columns: 1fr; }
  }
  .ps-features-list li {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    padding-left: 1.65rem;
    position: relative;
    line-height: 1.45;
  }
  .ps-features-list li::before {
    content: "";
    position: absolute;
    left: 0.2rem; top: 0.5rem;
    width: 8px; height: 8px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
  }

  /* ═══════════════════════════════════════════════
     FINAL CTA
     ═══════════════════════════════════════════════ */
  .final {
    padding-top: clamp(5rem, 9vw, 8rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
    border-top: 1px solid var(--line);
    position: relative;
  }
  .final-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .final-h {
    font-family: var(--display);
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 38.4px; /* 80% */
    letter-spacing: -0.32px;
    color:#fff;
    padding-bottom: 40px;
  }
  .final-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--secondary); letter-spacing: 0; }
  .final-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--secondary);
    max-width: 48ch;
    margin-bottom: 2rem;
    text-wrap: pretty;
  }
  .final-ctas {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
  }
  .final-meta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .final-meta .sep {
    width: 4px; height: 4px;
    background: var(--line-3);
    border-radius: 50%;
  }
  .final-meta .talk {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
  }

  .final-stats {
    padding: 2rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .fs-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.25rem 0; }
  .fs-num {
    font-family: var(--sans);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink);
  }
  .fs-lbl {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .fs-divider { grid-column: 1 / -1; height: 1px; background: var(--line); }

  /* Sign, don't pitch — Caslon italic gold "— Olly" (brand book V/06) */
  .final-sig {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--gold);
    line-height: 1;
  }
  .final-sig .accent { color: var(--gold); }

  /* ═══════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════ */
  footer {
    border-top: 1px solid var(--line);
    padding: 4rem 0 2rem;
    background: var(--bg);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
  }
  .footer-left { max-width: 36ch; }
  .footer-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0.85rem 0 1.5rem;
  }
  .footer-desc { font-size: 14.5px; line-height: 1.6; color: var(--secondary); text-wrap: pretty; }
  .footer-col h4 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 1rem;
    font-weight: 500;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
  .footer-col a { font-size: 14px; color: var(--secondary); transition: color 0.15s; }
  .footer-col a:hover { color: var(--accent); }

  .footer-base {
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--mute);
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  .footer-base .made {
    font-family: var(--sans);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    font-size: 1.25rem;
  }

  /* ═══════════════════════════════════════════════
     REVEAL
     ═══════════════════════════════════════════════ */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ═══════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════ */
  @media (max-width: 1100px) {
    .inbox-body { grid-template-columns: 220px 1fr; }
    .ind-row { grid-template-columns: 50px 240px 1fr auto; }
  }
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-inner { grid-template-columns: 1fr auto; gap: 1rem; }
    .opp-grid, .how-head, .voice-head, .ind-head, .social-head, .steps-head, .voice-spotlight {
      grid-template-columns: 1fr; gap: 1.5rem;
    }
    .opp-left { position: static; }
    .how-grid, .sub-grid, .testimonial-grid, .steps-grid, .stats-grid, .final-inner, .story-grid {
      grid-template-columns: 1fr;
    }
    .stat { border-right: none; border-bottom: 1px solid var(--line); padding: 2rem 0; }
    .stat:first-child { padding-top: 0; }
    .stat:last-child  { border-bottom: none; padding-bottom: 0; }
    .ind-row { grid-template-columns: auto 1fr auto; gap: 1rem; padding: 1.4rem 0; }
    .ind-row .ind-desc { grid-column: 1 / -1; margin-top: 0.4rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .inbox-body { grid-template-columns: 1fr; }
    .inbox-list { display: none; }
    .stage-frame { transform: none; margin-right: 0; }
    .anno { display: none; }
    .phone:nth-child(n) { transform: none; margin-top: 0; }
  }

  /* ═══ V5 — NEW SECTIONS ═══ */

  /* Alt-band system — alternating section backgrounds.
     Bands ride CSS vars so Tweaks can switch palettes live. */
  :root {
    --alt-bg: transparent;
    --alt-ink: #F5F2EA;
    --alt-mute: #7C93AC;
    --alt-line: #17293C;
    --alt-card: #0F1D2C;
    --alt-card-2: #17293C;
  }
  section[data-band="alt"] {
    background: var(--alt-bg);
    color: var(--alt-ink);
    transition: background 0.35s ease, color 0.25s ease;
  }
  body.alt-on section[data-band="alt"] {
    --ink: var(--alt-ink);
    --secondary: var(--alt-mute);
    --mute: var(--alt-mute);
    --line: var(--alt-line);
    --line-2: color-mix(in srgb, var(--alt-ink) 14%, transparent);
    --line-3: color-mix(in srgb, var(--alt-ink) 28%, transparent);
    --bg: var(--alt-bg);
    --bg-2: var(--alt-card);
    --bg-3: var(--alt-card-2);
  }
  /* eyebrow used by Ask section */
  .eyebrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.85rem;
    font-weight: 600;
  }

  /* A DAY WITH OLLY — diary-style three columns */
  .day-section {
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
    border-bottom: 1px solid var(--line);
  }
  .day-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    margin-top: clamp(2rem, 4vw, 3.5rem);
  }
  @media (max-width: 960px) { .day-grid { grid-template-columns: 1fr; } }
  .day-entry {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .day-stamp {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 0.25rem;
  }
  .day-time {
    font-family: var(--hand);
    font-weight: 600;
    font-size: 2.2rem;
    color: var(--accent);
    line-height: 1;
    transform: rotate(-2deg);
  }
  .day-rule { flex: 1; height: 1px; background: var(--line); align-self: center; }
  .day-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
  }
  .day-note {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink);
    text-wrap: pretty;
    max-width: 38ch;
    margin: 0;
  }
  .day-screen {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .day-screen-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
  }
  .day-screen-head .live { color: var(--accent); font-weight: 600; }
  .day-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
  }
  .day-row.hold { border-color: var(--accent); }
  .day-row-tag {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--line-2);
    border-radius: 3px;
  }
  .day-row-tag.flag { color: var(--accent); border-color: var(--accent); }
  .day-row-text { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
  .day-row-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--mute); }
  .day-row-meta.accent { color: var(--accent); font-weight: 600; }
  .day-summary {
    margin-top: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--mute);
    text-align: right;
  }
  .day-reply {
    padding: 0.6rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .day-reply.muted { opacity: 0.65; }
  .day-reply-meta {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .day-reply-text { font-size: 12px; line-height: 1.5; color: var(--ink); margin: 0; text-wrap: pretty; }
  .day-meter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .day-meter .day-bar {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 100px;
    overflow: hidden;
  }
  .day-meter .day-bar i { display: block; height: 100%; background: var(--accent); border-radius: 100px; }
  .day-meter .pct { color: var(--accent); font-weight: 600; }
  .day-signal {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.6rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .day-signal.up { border-color: var(--accent); }
  .day-signal-arr { font-size: 16px; color: var(--accent); line-height: 1; font-weight: 700; }
  .day-signal-arr.mute { color: var(--mute); }
  .day-signal-h { font-size: 12.5px; color: var(--ink); font-weight: 600; }
  .day-signal-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--mute); margin-top: 1px; }
  .day-signal-fix {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }
  .day-signal-fix.mute { color: var(--mute); }
  .day-link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-3);
    padding-bottom: 2px;
    transition: color 0.18s, border-color 0.18s;
  }
  .day-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

  /* ASK OLLY — flagship interactive */
  .ask-section {
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
    border-bottom: 1px solid var(--line);
  }
  .ask-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  @media (max-width: 880px) { .ask-head { grid-template-columns: 1fr; gap: 1rem; } }
  .ask-stage { max-width: 820px; margin: 0 auto; }
  .ask-window {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transform: rotate(-0.4deg);
  }
  .ask-window-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
    background: var(--bg-3);
  }
  .ask-window-bar .traffic { display: flex; gap: 6px; }
  .ask-window-bar .traffic span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
  .aw-title { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
  .aw-by { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; }
  .ask-thread {
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 180px;
  }
  .ask-msg { display: flex; flex-direction: column; gap: 0.3rem; max-width: 78%; }
  .ask-msg.me { align-self: flex-end; align-items: flex-end; }
  .ask-msg.olly { align-self: flex-start; }
  .ask-from {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .ask-msg.olly .ask-from { color: var(--accent); }
  .ask-bubble {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    text-wrap: pretty;
  }
  .ask-msg.me .ask-bubble { background: var(--bg); border-radius: 12px 12px 4px 12px; }
  .ask-msg.olly .ask-bubble { border-radius: 12px 12px 12px 4px; }
  .ask-msg.olly .ask-bubble strong { color: var(--accent); font-weight: 600; }
  .ask-thread .typing::after {
    content: "█";
    color: var(--accent);
    animation: pulse 0.9s steps(2) infinite;
    margin-left: 2px;
  }
  .ask-input-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--bg-3);
  }
  .ask-input-prompt { font-family: var(--mono); color: var(--accent); font-size: 14px; font-weight: 600; }
  .ask-input-field {
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    outline: none;
    padding: 0.3rem 0;
  }
  .ask-input-field::placeholder { color: var(--mute); }
  .ask-input-go {
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.95rem;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .ask-input-go:hover { background: #fff; color: var(--bg); }
  .ask-suggest {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .ask-suggest-lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-right: 0.4rem;
    font-weight: 600;
  }
  .ask-chip {
    background: transparent;
    color: var(--secondary);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 0.45rem 0.85rem;
    font-family: var(--sans);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
  }
  .ask-chip:hover { border-color: var(--accent); color: var(--ink); background: var(--bg-3); }
  .ask-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-3);
    padding-bottom: 2px;
  }
  .ask-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

  /* WATCH ME WORK */
  .watch-section {
    background: rgba(27, 27, 32, 0.51);
  }
  .watch-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  @media (max-width: 880px) { .watch-head { grid-template-columns: 1fr; gap: 1rem; } }
  .watch-stage { 
    max-width: 790px; margin: 0 auto; 
    .video-frame{
      outline: none;
      border: none;
      border-radius: 15px;
      height: 515px;
      
      @media (max-width:992px) {
        height: 230px;
      }
    }
  }
  .watch-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transform: rotate(-1.4deg);
  }
  .watch-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 0.6rem 0.95rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
    background: var(--bg-3);
  }
  .watch-bar .traffic { display: flex; gap: 6px; }
  .watch-bar .traffic span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
  .watch-bar-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); text-align: center; }
  .watch-bar-time { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
  .watch-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    overflow: hidden;
  }
  .watch-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background:
      radial-gradient(ellipse at center, rgba(255,107,53,0.04) 0%, transparent 70%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
  }
  .watch-thumb {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 380px;
    opacity: 0.55;
  }
  .wt-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    background: rgba(22, 22, 20, 0.85);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink);
  }
  .wt-tag { font-family: var(--hand); font-size: 1.25rem; color: var(--accent); line-height: 1; }
  .watch-play {
    position: absolute;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.32), 0 0 0 8px rgba(255, 107, 53, 0.12);
    transition: transform 0.18s, box-shadow 0.18s;
  }
  .watch-play:hover { transform: scale(1.05); }
  .watch-play svg { margin-left: 4px; }
  .watch-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--line);
  }
  .watch-progress i { display: block; height: 100%; width: 22%; background: var(--accent); }
  .watch-foot {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .watch-foot-r { color: var(--secondary); }

  /* INTEGRATIONS */
  .integ-section {
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
    border-bottom: 1px solid var(--line);
  }
  .integ-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  @media (max-width: 880px) { .integ-head { grid-template-columns: 1fr; gap: 1rem; } }
  .integ-grid {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .integ-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .integ-row:last-child { border-bottom: none; }
  @media (max-width: 720px) { .integ-row { grid-template-columns: repeat(2, 1fr); } }
  .integ-cell {
    padding: 1.6rem 1.25rem;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--mute);
    text-align: center;
    border-right: 1px solid var(--line);
    transition: color 0.2s, background 0.2s;
    cursor: default;
  }
  .integ-cell:last-child { border-right: none; }
  .integ-cell:hover { color: var(--ink); background: var(--bg-2); }
  .integ-note {
    margin-top: 1.25rem;
    text-align: center;
    font-family: var(--hand);
    font-size: 1.4rem;
    color: var(--accent);
    transform: rotate(-1deg);
  }

  /* sub-grid 2-col variant for V5 */
  .sub-grid.two { grid-template-columns: 1fr 1fr; }
  @media (max-width: 880px) { .sub-grid.two { grid-template-columns: 1fr; } }

  /**  Blog Listing page **/
  .blog{
    background: radial-gradient(355.32% 191.8% at 48.3% 84.89%, #00132E 0%, #0B52BA 100%), #060E13;
    .blog_banner{
      padding:150px 0 70px;
      @media (max-width:992px) {
        padding: 80px 0 0;
      }
      .banner_title{
        font-size: 56px;
        line-height: 120%;
        @media (max-width:992px) {
          font-size: 22px;
        }
      }
      .banner_desc{
        font-weight: 300;
      }
      .blog_heading{
        .search_div {
          padding: 30px 0 0;

          @media (max-width:992) {
            padding: 20px 0 0;
          }

          .search-container {
            .search{position:relative;max-width:420px;margin-bottom:26px;}
            .search input{width:100%;padding:12px 16px 12px 42px;border-radius:999px;border:1px solid var(--line);background:#001738;color:#ffffff9c;font-size:14px;outline:none;}
            .search input::placeholder{color:var(--text-muted);}
            .search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5;} 
          }
        }
        .category_wrapper{
            .category_slider{
              padding: 40px 0 20px;
              @media (max-width:992px) {
                display: flex;
                overflow-x: auto;
                width: 100%;
                white-space: nowrap;
                scrollbar-width: thin;
                padding: 30px 0;
              }
              li {
                list-style: none;
                display: inline-block;

                a {
                  padding: 8px 6px 6px;
                  border-radius: 30px;
                  margin: 0 3px;
                  transition-duration: .3s;
                  color: #ffffff80;
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 20.3px; /* 145% */

                  &:hover {
                    color:#fff;
                  }

                  &.active {
                    color:#fff;
                  }
                }
              }

              li.slick-current.slick-active {
                a {
                  background-color: white;
                  border: 1px solid blue;
                  color: blue;
                }
              }
        }
      }
      }
    }
    .blog_latest{
        .latest_blogWrapper{
          display: flex;
          align-items: flex-start;
          gap: 36px;
          align-self: stretch;
          @media (max-width:992px) {
            flex-direction: column;
          }
          .latest_blogImg{
            min-width:670px;
            @media (max-width:992px) {
              min-width: 100%;
            }
            .blog_latestImg{
              img{
                border-radius: 20px;
              }
            }
          }
          .latest_blogContent{
            .blog-category{
              display:flex;
              align-items: center;
              .dispFlex{
                display:flex;
                align-items: center;
              }
              span{
                font-size: 12px;
                margin: 0 10px 0 0;
              }
            }
            .blog_Title{
              font-size: 48px;
              font-style: normal;
              font-weight: 500;
              line-height: 120%; /* 108.333% */
              letter-spacing: -0.32px;
              padding: 24px 0 20px;
              @media (max-width:992px) {
                font-size: 22px;
              }
            }
            .short_desc{
              opacity: 0.7;
              font-size: 18px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              letter-spacing: -0.36px;
              min-height: 100px;
              @media (max-width:992px) {
                font-size: 16px;
                min-height: unset;
              }
            }
            .cs_author{
              display: flex;
              align-items: center;
              gap: 10px;
              img{
                width: 40px;
              }
              font-size: 16px;
              font-style: normal;
              font-weight: 500;
              line-height: 130%; /* 20.8px */
            }
          }
        }
    }
    #all_blogs{
      .blog_wrapper{
        .reelo_blogs{
          .blogBox{
            padding:50px 0;
            border-top: 1px solid #fff6;
            @media (max-width:992px) {
              padding: 30px 0;
            }
            .blog-box-wrapper{
              display: flex;
              align-items: center;
              gap: 30px;
              @media (max-width:992px) {
                flex-direction: column;
              }
              .latest_blogImg{
                .blog_latestImg{
                  width: 390px;
                  @media (max-width:992px) {
                    width: 100%;
                  }
                  img{
                    border-radius: 20px;
                    width: 390px;
                    height: auto;
                    @media (max-width:992px) {
                      width: 100%;
                    }
                  }
                }
              }
              .latest_blogContent{
                .blog-category{
                  display:flex;
                  align-items: center;
                  .dispFlex{
                    display:flex;
                    align-items: center;
                  }
                  span{
                    font-size: 12px;
                    margin: 0 10px 0 0;
                  }
                }
                .blog_Title{
                  font-size: 36px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 110%; /* 108.333% */
                  letter-spacing: -0.32px;
                  padding: 24px 0 20px;
                  @media (max-width:992px) {
                    font-size: 20px;
                  }
                }
                .cs_author{
                   display: flex;
                    align-items: center;
                    gap: 10px;
                    img{
                      width: 40px;
                    }
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 130%; /* 20.8px */
                }
              }
            }
          }
        }
        .pagination-links{
          display:inline-block;
          span, a {
            font-size: 18px;
            padding: 5px 13px;
            border-radius: 50px;
            background-color: #fff;
            color: #000;
            font-weight: 600;
            margin: 0 5px;
          }
          .prev, .next {
            background-color: unset;
            color: #fff;
            font-size: 30px;
            padding: 0;
            margin: 10px;
          }
        }
      }
    }
  }

  /**  Blog Single page **/
  .single_post{
    .blog-details{
      .banner_wrapper{
        .date_wrapper{
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 130%; /* 20.8px */
        }
        .blog_title{
          font-size: 48px;
          font-style: normal;
          font-weight: 500;
          line-height: 110%; /* 108.333% */
          letter-spacing: -0.32px;
          padding:24px 0;
          @media (max-width:992px) {
            font-size: 28px;
          }
        }
        .featured_img{
          .featured-img{
            img{
              border-radius: 30px;
            }
          }
        }
        .dispFlex{
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .cs_author{
          padding: 24px 0 0;
          gap: 10px;
          img{
            width: 40px;
          }
          span{
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 130%; /* 20.8px */
          }
        }
      }
    }
    .main_wrapper {

      .detail_wrapper {
        display: flex;

        @media (max-width:992px) {
          display: block;
        }
      }

      .navbar-fixed {
        position: fixed;
        top: 100px;
        width: 315px;

        @media (max-width:992px) {
          width: 100%;
          position: unset;
        }
      }

      .demodiv-fixed {
        position: fixed;
        top: 120px;
        width: 210px;

        @media (max-width:992px) {
          width: 100%;
          position: unset;
        }
      }

      .backtoblogs{
        display: flex;
        font-size: 14px;
        align-items: center;
        padding: 10px 0; 
      }

      .stickySidebar {
        
        padding: 0 30px 0 0;
        @media (max-width:992px) {
          margin: 0 0 20px;
        }
        .toc_wrapper{
            margin:30px 0 15px;
            cursor: pointer;
            
            .tbl{
              font-size: 18px;
              font-weight: 800;
              line-height: 140%;
            }

        }
        .table_content {
          padding: 20px 4px 20px 20px;

          li {
            padding: 2px 0;
            a {
              color: #ffffff96;
              font-size: 15px;
              line-height: 110%;
              font-weight: 400;
              

              &.active {
                color: #fff;
              }
            }

          }
        }

         

      }

      .blogdetails_wrapper {
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        .entry-content{
          padding: 0 40px 0 20px;
           @media (max-width:992px) {
            padding: 0;
          }
        }
        @media (max-width:992px) {
          padding: 0;
        }

        a {
          color: white;
          text-align: justify;
        }

        h2 {
          font-size: 32px;
          font-weight: 500;
          line-height: 110%;
          padding: 24px 0;
          text-transform: capitalize;
          text-align: left;

          @media (max-width:992px) {
            font-size: 22px;
            line-height: 32px;
            padding: 10px 0 15px;
          }
        }

        h3 {
          font-size: 24px;
          font-weight: 500;
          line-height: 110%;
          padding: 18px 0;
          text-transform: capitalize;
          text-align: left;

          @media (max-width:992px) {
            font-size: 20px;
            line-height: 30px;
            padding: 10px 0 15px;
          }
        }

        h4 {
          font-size: 20px;
          line-height: 110%;
          font-weight: 500;
          padding: 18px 0;
          text-transform: capitalize;
          text-align: left;

          @media (max-width:992px) {
            font-size: 18px;
            line-height: 28px;
            padding: 10px 0 15px;
          }
        }

        p {
          font-size: 19px;
          line-height: 140%;
          font-style: normal;
          font-weight: 300;
          padding: 10px 0;

          @media (max-width:992px) {
            padding: 0 0 10px;
          }
        }

        .quotes {
          background-color: #fff;
          box-shadow: 1px 3px 8px 2px #80808029;
          padding: 20px;
          margin: 10px 0 20px;
          text-align: justify;
        }

        blockquote {
          padding: 0 20px;
          margin: 10px 0 20px;
          text-align: justify;
          border-left: 1px solid #fff;
          p{
            font-style: italic;
          }
        }

        img {
          margin: 25px 0;
          border-radius: 8px;
          width: 100%;

        }

        iframe {
          margin: 25px 0 15px;
          border-radius: 8px;
          display: block;
          width: 100%;
          box-shadow: 1px 1px 1px 8px hsla(0, 0%, 89%, .6117647059);
          height: 400px;

          @media (max-width:992px) {
            height: 280px;
          }
        }

        ul {
          padding-left: 20px;

          li {
            font-size: 16px;
            line-height: 110%;
            padding: 8px 0;

            img {
              margin: 30px 0 20px;
            }

            ul {
              padding: 5px 0 0 15px;

              li {
                font-size: 16px;
                line-height: 110%;
                list-style-type: disc;
                font-weight: 500;
              }
            }
          }
        }

        ol {
          padding-left: 20px;

          li {
            font-size: 16px;
            line-height: 110%;
            padding: 8px 0;

            img {
              margin: 30px 0 20px;
            }

            ul {
              padding: 5px 0 0 15px;

              li {
                font-size: 16px;
                line-height: 110%;
                list-style-type: disc;
                font-weight: 500;
              }
            }
          }
        }
      }

      .rightSidebar {
        padding: 20px 0 0;
       .share_div{
          display:inline-block;
          border-bottom: 1px dashed #D1D1D6;
          .social_icons{
            display:flex;
            gap:16px;
            align-items:center;
            margin:14px 0;
            a{
                color:#fff;
                text-decoration:none;
                font-size:22px;
                transition:.3s;
                &:hover{
                    opacity:.7;
                }
            }
          }
        }
      }
    }
    #recentBlogs {
      .blogBox {
        .blog-box-wrapper {
          .blog-box {
            padding: 0 25px 0 0;

            @media (max-width:992px) {
              padding: 15px 0;
            }
            .dispFlex{
              display: flex;
              align-items: center;
            }
            .blog-title{
              font-size: 20px;
              line-height: 120%;
              padding: 15px 0;
              min-height: 110px;
            }
            .cs_author{
              display: flex;
              align-items: center;
              gap: 10px;
              img{
                width: 40px;
              }
            }
            .blog-category{
              span{
                padding: 0 10px 0 0;
              }
            }
            .blog_Img {
              img {
                height: 213px;
                border-radius: 20px;
              }
            }
          }
        }
      }
    }
  }

  /** Homepage Feature section **/
   .wrap{
    width:100%;
    display:grid;
    grid-template-columns: 1.05fr 0.85fr;
    align-items:center;
    padding-bottom: 70px;
  }

  /* ---------- STAGE (left visual) ---------- */
  .stage{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .card{
    position:relative;
    overflow:hidden;
    animation: cardIn 0.5s cubic-bezier(.2,.8,.2,1);
  }

  @keyframes cardIn{
    from{ opacity:0; transform: translateY(14px) scale(0.985); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }

  .card-body{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
 

  .hidden{ display:none !important; }

  /* ---------- RIGHT TEXT PANEL ---------- */
  .panel{
    display:flex;
    flex-direction:column;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
  }

  .item{
    position:relative;
    cursor:pointer;
  }
 .child-item {
    padding: 14px 67px 20px 48px;
}

  .item h3{
    color: #ffffffa1;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 26.4px; /* 110% */
    padding: 0 0 15px;
  }
  .item.active{
    background: #1B1B1C;
    /* border-top-right-radius: 30px;
    border-bottom-right-radius: 30px; */
  }
  .item.active h3{ color: #fff; }

  .item p{
    color: #ffffff40;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 17.6px; /* 110% */
  }
  .item.active p{
    color: rgba(255, 255, 255, 0.60);
  }

  /* ---- full-width progress bar, one per item ---- */
  .progress-bar{
    width:100%;
    height:1px;
    background: none;
    border-radius:3px;
    overflow:hidden;
    margin-bottom:14px;
  }
  .progress-bar-fill{
    height:100%;
    width:0%;
    background: var(--accent-2);
    border-radius:3px;
  }
  .item.active .progress-bar-fill{
    animation: fillProg 5s linear forwards;
  }
  @keyframes fillProg{ from{width:0%;} to{width:100%;} }

  @media (max-width: 880px){
    .wrap{ grid-template-columns: 1fr; gap:40px; }
    .stage{ height:440px; order:1; }
    .panel{ order:2; }
  }

  @media (prefers-reduced-motion: reduce){
    .card, .bar-fill, .spin, .item.active .progress-fill{ animation:none !important; }
  }

  .mobile-feature-slider{
    .feature-slide{
      .content_inner{
        padding: 20px;
        background: #1B1B1C;
        h3{
          padding: 15px 0;
        }
      }
    }
    .slick-prev {
      position: absolute;
      bottom: -20px;
      left: calc(50% - 50px);
      background-color: #1E6FD0;
      border-radius: 50px;
      padding: 8px;
    }
    .slick-next {
        position: absolute;
        bottom: -20px;
        right: calc(50% - 50px);
        background-color: #1E6FD0;
        border-radius: 50px;
        padding: 8px;
    }
  }
  
/** Terms and conditions **/

.terms-content {
  h1{
    padding: 40px 0 30px;
  }
  h2 {
      padding: 15px 0;
  }
  p {
    padding: 10px 0;
  }
  ul {
    padding: 20px;
  }
}

/** Privacy **/

.privacy-policy-content{
  h1{
    padding: 40px 0 30px;
  }
  h2 {
      padding: 15px 0;
  }
  p {
    padding: 10px 0;
  }
  ul {
    padding: 20px;
  }
}