@layer  reset, tokens, base, components, pages, utilities;

@layer  pages {
/* Cube spin duration override: landing has more GPU layers, needs slower rate to match */
body[data-page="landing"]{ --cv-spin-duration: 4200ms; }

body[data-page="landing"]{
      /* ===== Panel scheme ===== */
      --panel-1: #030a18;
      --panel-2: #ffffff;
      --panel-2b: #f7f2e8; /* pale cream for "How it works" */
      --panel-3: #030a18;  /* constellation section */
      --panel-4: #071225;  /* horizontal section backdrop */
      --panel-5: #f4efe8;  /* offwhite */
      --panel-6: #06142a;  /* footer */

      --text-dark: #0b1220;
      --muted-dark: rgba(15,23,42,0.75);

      }

    body[data-page="landing"] *{ box-sizing:border-box; }
    body[data-page="landing"]{ scroll-behavior: smooth; }

    body[data-page="landing"]{
      margin:0;
      font-family: var(--sans);
      color: var(--text-light);
      background: var(--panel-1);
      overflow-x:clip;
      overflow-y:visible;
    }

    body[data-page="landing"].zooming{ overflow: hidden; }

    html, body{
      max-width: 100%;
    }

    html{
      overflow-x: clip;
    }

    /* === Accessibility baseline: always-visible keyboard focus ===
       Landing uses a standalone stylesheet, so we provide focus styling here too.
       This ensures keyboard users always see where they are.
    */
    body[data-page="landing"] :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{
      outline: 2px solid var(--gold) !important;
      outline-offset: 3px;
      box-shadow: 0 0 0 6px rgba(255, 200, 110, 0.18) !important;
    }


    /* ===== Fixed top nav ===== */

    /* === CVD-WEB-0019 topbar determinism: lock background base === */    body[data-page="landing"] .brand-text{
      display:flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.05;
    }
    /* tagline removed (and now also removed from logo markup) */
    body[data-page="landing"] .navlinks a{ pointer-events: auto; }
    /* ===== Sections ===== */
    body[data-page="landing"] section{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 88px 22px 48px;
      position:relative;
    }

    body[data-page="landing"] #section1{ background: var(--panel-1); min-height: 50vh; padding-top: 0px; }
    body[data-page="landing"] #section2{ background: var(--panel-2); color: var(--text-dark); }
    body[data-page="landing"] #section2b{ background: var(--panel-2b); color: var(--text-dark); padding-top: 42px; }
    body[data-page="landing"] #section3{ background: var(--panel-3); }
    body[data-page="landing"] #section4{ background: var(--panel-4); padding:0; --arc-img-h: clamp(388px, 58vh, 678px); }
    body[data-page="landing"] #section5{ background: var(--panel-5); color: var(--text-dark); }
    body[data-page="landing"] #section6{ background: var(--panel-6); padding: 22px 22px; }

    body[data-page="landing"] .section-inner{ width:min(1180px, 94vw); }

    body[data-page="landing"] h1, body[data-page="landing"] h2{
      margin:0 0 12px 0;
      letter-spacing:-0.02em;
      font-family: var(--serif);
    }

    body[data-page="landing"] p{
      margin:0;
      font-family: var(--sans);
      line-height:1.60;
      max-width:80ch;
    }

    /* ===== Section 1 hero layout ===== */
    body[data-page="landing"] .hero-grid{
      display:grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 28px;
      align-items:center;
    }

    body[data-page="landing"] .hero-kicker{
      font-family: var(--serif);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 12px;
      color: rgba(246, 213, 138, 0.92);
      margin-bottom: 10px;
    }

    body[data-page="landing"] .hero-title{
      font-family: var(--serif);
      font-size: clamp(44px, 5.2vw, 70px);
      line-height: 1.05;
      margin: 0 0 10px 0;
      letter-spacing: -0.02em;
      color: rgba(241,241,251,0.98);
    }

    body[data-page="landing"] .hero-tagline{
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(170, 220, 215, 0.92);
      margin-top: 10px;
    }

    body[data-page="landing"] .hero-cta-row{
      margin-top: 18px;
      display:flex;
      gap: 12px;
      flex-wrap:wrap;
      align-items:center;
    }    body[data-page="landing"] .cta:active{ transform: translateY(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.45) inset; }

    body[data-page="landing"] .hero-image{
      width: 100%;
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 20px 60px rgba(0,0,0,0.55);
      background: rgba(255,255,255,0.03);
      user-select:none;
      -webkit-user-select:none;
    }

    body[data-page="landing"] .hero-image img{
      width:100%;
      height:auto;
      display:block;
      object-fit: cover;
      user-select:none;
      -webkit-user-select:none;
      pointer-events:none;
      -webkit-user-drag:none;
    }

    /* ===== Section 2 cards ===== */
    body[data-page="landing"] .s2-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      margin-top: 16px;
      align-items:start;
    }

    body[data-page="landing"] .feature-card{
      background: rgba(15,23,42,0.03);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 16px;
      padding: 18px 18px 16px;
    }

    body[data-page="landing"] .feature-card h3{
      margin:0 0 8px;
      font-family: var(--serif);
      letter-spacing: 0.06em;
      font-size: 14px;
      text-transform: uppercase;
      color: rgba(15,23,42,0.88);
    }

    body[data-page="landing"] .feature-card p{
      color: var(--muted-dark);
      font-size: 15.5px;
    }

    body[data-page="landing"] .section-title{
      display:flex;
      flex-direction:column;
      gap: 8px;
    }

    body[data-page="landing"] .section-title p{
      color: var(--muted-dark);
      font-size: 16px;
      max-width: 90ch;
    }

    /* ===== hero text box moved into section 2 ===== */
    body[data-page="landing"] .hero-moved-card{
      background: rgba(15,23,42,0.04);
      border: 1px solid rgba(15,23,42,0.10);
      border-radius: 18px;
      padding: 18px 18px 16px;
      margin-top: 14px;
    }

    body[data-page="landing"] .hero-moved-card h3{
      margin:0 0 10px;
      font-family: var(--serif);
      letter-spacing: 0.06em;
      font-size: 14px;
      text-transform: uppercase;
      color: rgba(15,23,42,0.88);
    }

    body[data-page="landing"] .hero-moved-card p{
      color: var(--muted-dark);
      font-size: 15.5px;
      margin: 0 0 10px;
    }
    body[data-page="landing"] .hero-moved-card p:last-child{ margin-bottom: 0; }

    /* ===== Section 2b "How it works" ===== */
    body[data-page="landing"] .how-grid{
      display:grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 26px;
      align-items:start;
      margin-top: 18px;
    }

    body[data-page="landing"] .how-card{
      background: rgba(15,23,42,0.03);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 18px;
      padding: 18px 18px 16px;
    }

    body[data-page="landing"] .how-card h3{
      margin:0 0 8px;
      font-family: var(--serif);
      letter-spacing: 0.06em;
      font-size: 14px;
      text-transform: uppercase;
      color: rgba(15,23,42,0.88);
    }

    body[data-page="landing"] .how-card p{
      color: var(--muted-dark);
      font-size: 15.5px;
    }

    body[data-page="landing"] .how-steps{
      margin: 0;
      padding-left: 18px;
      color: var(--muted-dark);
      font-size: 15.5px;
      line-height: 1.65;
    }

    body[data-page="landing"] .how-steps li{ margin: 10px 0; }
    body[data-page="landing"] .workflow{
      margin-top: 12px;
      padding: 14px 14px 12px;
      border-radius: 14px;
      background: rgba(15,23,42,0.04);
      border: 1px solid rgba(15,23,42,0.08);
    }

    body[data-page="landing"] .workflow strong{
      font-family: var(--serif);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 13px;
      color: rgba(15,23,42,0.86);
    }

    body[data-page="landing"] .workflow p{
      margin-top: 8px;
      color: var(--muted-dark);
      font-size: 15.25px;
    }

    /* How It Works: ivory windows + white text (+1px font) */
    body[data-page="landing"] #section2b .how-card{
      /* Ivory base with a subtle dark glaze (keeps premium contrast while staying “ivory”) */
      background:
        linear-gradient(180deg, rgba(3, 10, 24, 0.62), rgba(3, 10, 24, 0.62)),
        #f6f1e6;
      border: 1px solid rgba(246, 213, 138, 0.22);
      box-shadow: 0 18px 55px rgba(0,0,0,0.38);
    }

    body[data-page="landing"] #section2b .how-card h3{
      color: rgba(255,255,255,0.96);
    }

    body[data-page="landing"] #section2b .how-card p{
      color: rgba(255,255,255,0.84);
      font-size: 16.5px; /* +1px vs 15.5px */
    }

    body[data-page="landing"] #section2b .how-steps{
      color: rgba(255,255,255,0.84);
      font-size: 16.5px; /* +1px vs 15.5px */
    }

    body[data-page="landing"] #section2b .how-steps strong{
      color: rgba(246, 213, 138, 0.96);
      font-weight: 800;
    }

    body[data-page="landing"] #section2b .workflow{
      background:
        linear-gradient(180deg, rgba(3, 10, 24, 0.58), rgba(3, 10, 24, 0.58)),
        #f6f1e6;
      border: 1px solid rgba(255,255,255,0.14);
    }

    body[data-page="landing"] #section2b .workflow strong{
      color: rgba(246, 213, 138, 0.96);
    }

    body[data-page="landing"] #section2b .workflow p{
      color: rgba(255,255,255,0.82);
      font-size: 16.25px; /* +1px vs 15.25px */
    }


    /* ===== SECTION 3 constellation container ===== */
    body[data-page="landing"] .constellation-wrap{
      margin-top: 16px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: var(--shadow);
      background: rgba(0,0,0,0.18);
      width: min(1680px, 98vw);
      margin-left: auto;
      margin-right: auto;
    }

    body[data-page="landing"] .constellation-scene{
      width: 100%;
      height: clamp(520px, 78vh, 760px);
      border-radius: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,0.06), transparent 40%),
        radial-gradient(circle at 70% 55%, rgba(185,140,255,0.10), transparent 45%),
        linear-gradient(180deg, #04040a, #000);
      border: none;
      user-select:none;
      position:relative;
    }

    body[data-page="landing"] #constellationCanvas{
      width:100%;
      height:100%;
      display:block;
      cursor:default;
    }

    /* ===== SECTION 4: horizontal scroll area ===== */
    body[data-page="landing"] .h-scroll-spacer{ width:100%; height:350vh; position:relative; }
    body[data-page="landing"] .h-sticky{
      position:sticky;
      top:0;
      height: 69vh;
      width:100%;
      display:flex;
      align-items:stretch;
      justify-content:stretch;
      padding:0;
    }

    body[data-page="landing"] .h-window{
      width:100%;
      height:100%;
      width:100%;
      height:100%;
      border-radius:24px;
      overflow:hidden;
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,0.06), transparent 40%),
        radial-gradient(circle at 70% 55%, rgba(185,140,255,0.10), transparent 45%),
        linear-gradient(180deg, #04040a, #000);
      border:1px solid rgba(255,255,255,0.10);
      box-shadow: var(--shadow);
      position:relative;
    }

    body[data-page="landing"] .h-track{ height:100%; display:flex; will-change:transform; transform:translate3d(0,0,0); }
    body[data-page="landing"] .h-panel{ flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; padding:28px; }

    body[data-page="landing"] .panel-card{
      width:min(990px, 96%);
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:22px;
      padding:22px;
      box-shadow:0 18px 55px rgba(0,0,0,0.55);
      backdrop-filter: blur(8px);
    }
    
    /* Section 4 panels (no card wrapper) */
    body[data-page="landing"] .h-panel{
      flex:0 0 100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: clamp(18px, 3.2vw, 44px);
      position:relative;
    }

    body[data-page="landing"] .h-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.06), transparent 48%),
                  radial-gradient(circle at 78% 70%, rgba(185,140,255,0.08), transparent 55%);
      opacity: 0.55;
      pointer-events:none;
    }

    /* Section 4 panels: text left, image right */
    body[data-page="landing"] .panel-grid{
      display:grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 22px;
      align-items:center;
      width: min(1280px, 96%);
      position:relative;
      z-index:1;
    }

    body[data-page="landing"] .panel-copy{
      min-width: 0;
    }

    body[data-page="landing"] .panel-media{
      min-width: 0;
    }

    body[data-page="landing"] .panel-media .panel-image{
      margin-bottom: 0;
    }

    @media  (max-width: 980px){
      body[data-page="landing"] .panel-grid{ grid-template-columns: 1fr; }
      body[data-page="landing"] .panel-media{ order: -1; } /* image first on mobile */
    }


    body[data-page="landing"] .panel-card h2{
      font-size:26px;
      font-weight: 900;
      margin-bottom:10px;
      color:rgba(255,255,255,0.92);
      font-family: var(--serif);
    }

    body[data-page="landing"] .panel-card p{ margin-top:0; font-size:13.5px; color:rgba(241,241,251,0.74); }

    body[data-page="landing"] .panel-image{
      width:100%;
      height: auto;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.12);
      box-shadow:0 16px 40px rgba(0,0,0,0.45);
      margin-bottom:14px;
    
      background: rgba(0,0,0,0.22);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 10px;
      height: 450px;
    }

    /* 3D tilt for section panels (subtle) */
    body[data-page="landing"] .panel-image{ perspective: 900px; overflow:hidden; }

    body[data-page="landing"] .panel-image img{
      width:100%;
      height:100%;
      object-fit: contain;
      display:block;
      filter: contrast(1.08) saturate(1.1);
      transform: rotateY(-6deg) rotateX(2deg) translateZ(0);
      transform-origin: 50% 50%;
      transition: transform 240ms ease, filter 240ms ease;
      will-change: transform;
    }

    
    
    /* Zoom overlay (after 1s hover): enlarges window + fits full image */
    body[data-page="landing"] .panel-image.zoom{
      position: fixed;
      inset: 8vh 8vw;
      width: auto;
      height: auto;
      padding: 18px;
      background: rgba(0,0,0,0.72);
      backdrop-filter: blur(10px);
      z-index: 9999;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 30px 90px rgba(0,0,0,0.75);
    }

    body[data-page="landing"] .panel-image.zoom img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: none !important;
      filter: contrast(1.05) saturate(1.10);
      cursor: zoom-out;
    }
/* Zoom (after 1s hover) */
    body[data-page="landing"] .panel-image{
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    }

    body[data-page="landing"] .panel-image img{
      transition: transform 240ms ease, filter 240ms ease;
      will-change: transform;
    }

    body[data-page="landing"] .panel-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius: 0;
      background:rgba(185,140,255,0.10);
      border:1px solid rgba(185,140,255,0.24);
      font-weight:900;
      font-size:13px;
      color:rgba(185,140,255,0.98);
      margin-bottom:12px;
    }

    body[data-page="landing"] .dot{
      width:8px;
      height:8px;
      border-radius:99px;
      background:rgba(185,140,255,0.9);
      box-shadow:0 0 10px rgba(185,140,255,0.45);
    }


    
    /* ===== Section 5 high-intent CTA window ===== */
    body[data-page="landing"] .s5-window{
      margin-top: 18px;
      background: rgb(3,7,8);
      border: 1px solid rgba(246, 213, 138, 0.22);
      border-radius: 20px;
      padding: 22px;
      box-shadow: 0 22px 70px rgba(0,0,0,0.45);
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 18px;
      overflow:hidden;
    }

    body[data-page="landing"] .s5-window h2{
      margin: 0 0 8px;
      font-family: var(--serif);
      color: rgba(241,241,251,0.96);
      font-size: 28px;
      letter-spacing: -0.02em;
    }

    body[data-page="landing"] .s5-window p{
      color: rgba(241,241,251,0.78);
      font-size: 15.5px;
      margin: 0;
      max-width: none;
    }

    body[data-page="landing"] .s5-bullets{
      margin: 14px 0 0;
      padding-left: 18px;
      color: rgba(241,241,251,0.76);
      font-size: 15.25px;
      line-height: 1.65;
    }
    body[data-page="landing"] .s5-bullets li{ margin: 8px 0; }
    body[data-page="landing"] .s5-bullets strong{ color: rgba(246, 213, 138, 0.96); }

    body[data-page="landing"] .s5-right{
      border-radius: 16px;
      padding: 18px;
      background:
        radial-gradient(circle at 25% 20%, rgba(246, 213, 138, 0.10), transparent 52%),
        radial-gradient(circle at 70% 75%, rgba(185,140,255,0.10), transparent 55%),
        rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      display:flex;
      flex-direction: column;
      gap: 10px;
      justify-content:center;
      align-items:flex-start;
    }

    body[data-page="landing"] .s5-badge{
      display:inline-flex;
      align-items:center;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(246, 213, 138, 0.10);
      border: 1px solid rgba(246, 213, 138, 0.24);
      color: rgba(246, 213, 138, 0.96);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    body[data-page="landing"] .s5-metric{
      margin-top: 6px;
      padding: 12px 12px 10px;
      border-radius: 14px;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.10);
      width: 100%;
    }

    body[data-page="landing"] .s5-metric-label{
      font-family: var(--serif);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(241,241,251,0.74);
      margin-bottom: 6px;
    }

    body[data-page="landing"] .s5-metric-value{
      font-family: var(--serif);
      font-size: 20px;
      color: rgba(241,241,251,0.94);
      letter-spacing: -0.01em;
    }

    body[data-page="landing"] .s5-cta{
      margin-top: 8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(246, 213, 138, 0.16);
      border: 1px solid rgba(246, 213, 138, 0.36);
      color: rgba(246, 213, 138, 0.96);
      text-decoration:none;
      font-weight: 900;
      letter-spacing: 0.02em;
      width: 100%;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    body[data-page="landing"] .s5-cta:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.42); }
    body[data-page="landing"] .s5-cta:active{ transform: translateY(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.45) inset; }

    body[data-page="landing"] .s5-sub{
      font-size: 12.5px;
      color: rgba(241,241,251,0.66);
      text-align: left;
      width: 100%;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .topbar-inner{ grid-template-columns: 1fr; gap: 10px; }      body[data-page="landing"] .topbar{ flex-wrap: wrap; gap: 10px; }
      body[data-page="landing"] .hero-grid{ grid-template-columns: 1fr; }
      body[data-page="landing"] #section1{ min-height: auto; padding-bottom: 56px; }      body[data-page="landing"] .constellation-wrap{ width: 100%; }
      body[data-page="landing"] .s2-grid{ grid-template-columns: 1fr; }
      body[data-page="landing"] .how-grid{ grid-template-columns: 1fr; }
      body[data-page="landing"] .footer-inner{ flex-direction: column; align-items:flex-start; gap: 10px; }
      body[data-page="landing"] .footer-left{ white-space: normal; }
    }


    /* ===== Footer ===== */
    body[data-page="landing"] .footer-inner{
      width:min(1180px, 94vw);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
      color: rgba(241,241,251,0.88);
      font-family: var(--sans);
    }

    body[data-page="landing"] .footer-left{
      font-size: 13.5px;
      opacity: 0.9;
      white-space: nowrap;
    }

    body[data-page="landing"] .footer-links{
      display:flex;
      gap: 16px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
    }

    body[data-page="landing"] .footer-links a{
      color: rgba(241,241,251,0.80);
      text-decoration: underline;
      font-size: 13.5px;
      padding: 6px 0;
      transform: translateY(0);
      transition: transform 2000ms ease;
    }

    body[data-page="landing"] .footer-links a:hover{ transform: translateY(-2px); }

    body[data-page="landing"] .to-top{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.06);
      color: rgba(241,241,251,0.90);
      text-decoration:none;
      font-size: 18px;
      line-height: 1;
      transform: translateY(0);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    body[data-page="landing"] .to-top:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
    body[data-page="landing"] .to-top:active{ transform: translateY(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.40) inset; }

    @media  (max-width: 1080px){    }    /* Section 4 panels: fully static (no hover transitions/animations) */
    body[data-page="landing"] #section4 .panel-image, body[data-page="landing"] /* Static per-panel image scaling */
    #section4 .h-track .h-panel:nth-of-type(1) .panel-image img{ transform: scale(1.5); transform-origin: center; }
    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(3) .panel-image img{ transform: scale(1.5); transform-origin: center; }
    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(5) .panel-image img{ transform: scale(1.2); transform-origin: center; }


    /* Increase image window size by ~20% for panels 1, 3, 5 */
    /* base 220px -> +20% */
    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(1) .panel-grid{ grid-template-columns: 0.75fr 1.25fr; }
    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(3) .panel-grid{ grid-template-columns: 0.75fr 1.25fr; }
    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(5) .panel-grid{ grid-template-columns: 0.75fr 1.25fr; }

  
    /* Section 4 (horizontal panels): light cream background */
    body[data-page="landing"] #section4{
      background: #fbf7ef;
     --arc-img-h: clamp(388px, 58vh, 678px); }
    body[data-page="landing"] #section4 .h-window{
      background: rgba(255,255,255,0.0);
      border: 1px solid rgba(15,23,42,0.10);
      box-shadow: 0 18px 60px rgba(0,0,0,0.18);
    }

  
    /* Panel 1: disable any hover visuals on container/window/image */
    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(1) *{
      transition: none !important;
      animation: none !important;
    }

    body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(1) .panel-image:hover, body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(1) .panel-image:hover img, body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(1):hover .panel-image, body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(1):hover .panel-image img{
      transform: none !important;
      filter: none !important;
      box-shadow: none !important;
    }

  
    /* Section 4: force black text */
    body[data-page="landing"] #section4, body[data-page="landing"] #section4 h1, body[data-page="landing"] #section4 h2, body[data-page="landing"] #section4 h3, body[data-page="landing"] #section4 p, body[data-page="landing"] #section4 li, body[data-page="landing"] #section4 strong, body[data-page="landing"] #section4 em{
      color: rgba(10,18,32,0.90);
      text-shadow: none !important;
    }

    body[data-page="landing"] #section4 .panel-card p, body[data-page="landing"] #section4 .panel-card ul, body[data-page="landing"] #section4 .panel-card li{
      color: rgba(10,18,32,0.82);
    }

    body[data-page="landing"] #section4 .panel-card h2{
      color: rgba(10,18,32,0.94);
    }

    /* Section 4: remove hover/transition effects on the section/window/panels (keep scrolling JS) */
    body[data-page="landing"] #section4 .h-window, body[data-page="landing"] #section4 .h-panel, body[data-page="landing"] #section4 .panel-card, body[data-page="landing"] #section4 .panel-grid, body[data-page="landing"] #section4 .panel-media, body[data-page="landing"] #section4 .panel-image, body[data-page="landing"] #section4 .panel-image img, body[data-page="landing"] #section4 .progress-dots span{
      transition: none !important;
      animation: none !important;
      transform: none !important;
      filter: none !important;
    }

    body[data-page="landing"] #section4 .h-window:hover, body[data-page="landing"] #section4 .h-panel:hover, body[data-page="landing"] #section4 .panel-card:hover, body[data-page="landing"] #section4 .panel-grid:hover, body[data-page="landing"] #section4 .panel-image:hover, body[data-page="landing"] #section4 .panel-image:hover img{
      transform: none !important;
      filter: none !important;
      box-shadow: inherit !important;
    }

  
    /* Section 4: panel image containers fully transparent */
    /* Section 4: panel-image container fits the image dimensions */
    /* Section 1 hero image: integrate with section background (remove window chrome) */
    body[data-page="landing"] #section1{
      /* will be auto-set from image via JS if possible */
      background: var(--panel-1);
    }

    body[data-page="landing"] .hero-image{
      background: transparent;
      border: none;
      box-shadow: none !important;
    }

  
    /* Footer: single-line layout with to-top aligned to right edge of content width */
    body[data-page="landing"] .footer-inner{
      width:min(1180px, 94vw);
      display:grid;
      grid-template-columns: auto 1fr auto;
      align-items:center;
      gap: 18px;
    }

    body[data-page="landing"] .footer-links{
      display:flex;
      gap: 18px;
      align-items:center;
      justify-content: center;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    body[data-page="landing"] .to-top{
      justify-self: end; /* far right of content width */
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .footer-inner{
        display:flex;
        flex-direction: column;
        align-items:flex-start;
        gap: 10px;
      }
      body[data-page="landing"] .footer-links{
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
      }
      body[data-page="landing"] .to-top{
        align-self: flex-end;
      }
    }

  
    /* Section 4: make progress dots visible on light background */
    body[data-page="landing"] #section4 .progress-dots{
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(15,23,42,0.14);
      box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    }

    body[data-page="landing"] #section4 .progress-dots span{
      background: rgba(15,23,42,0.22);
      border: 1px solid rgba(15,23,42,0.18);
      opacity: 0.9;
    }

    body[data-page="landing"] #section4 .progress-dots span.active{
      background: rgba(185,140,255,0.96);
      border-color: rgba(185,140,255,0.38);
      transform: scale(1.25);
      opacity: 1;
    }

  
    /* Section 4 dots visibility fix: restore dot sizing + stacking */
    body[data-page="landing"] #section4 .progress-dots{
      position: absolute;
      z-index: 80;
    }

    body[data-page="landing"] #section4 .progress-dots span{
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 999px;
    }

  
    /* Horizontal scroll chevrons (Section 4) */
    body[data-page="landing"] #section4 .h-window{
      cursor: grab;
    }

    body[data-page="landing"] #section4 .scroll-hints{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index: 90;
    }

    body[data-page="landing"] #section4 .scroll-hint{
      pointer-events:auto;
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,0.14);
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.14);
      display:grid;
      place-items:center;
      color: rgba(15,23,42,0.72);
      font-size: 22px;
      line-height: 1;
      opacity: 0.0;
      transition: opacity 220ms ease, transform 220ms ease;
      user-select:none;
    }

    body[data-page="landing"] #section4 .scroll-hint.left{ left: 14px; }
    body[data-page="landing"] #section4 .scroll-hint.right{ right: 14px; }

    body[data-page="landing"] #section4 .h-window:hover .scroll-hint{
      opacity: 1;
      transform: translateY(-50%) scale(1.02);
    }

    body[data-page="landing"] #section4 .scroll-hint:active{
      transform: translateY(-50%) scale(0.96);
    }    /* How It Works (Section 2b): dark blue windows */
    body[data-page="landing"] #section2b .how-card{
      background: rgb(10,12,15);
      border: 1px solid rgba(255,255,255,0.10);
    }

    body[data-page="landing"] #section2b .how-card h3, body[data-page="landing"] #section2b .how-card p, body[data-page="landing"] #section2b .how-steps, body[data-page="landing"] #section2b .how-steps li, body[data-page="landing"] #section2b .workflow strong, body[data-page="landing"] #section2b .workflow p{
      color: rgba(241,241,251,0.92);
    }

    body[data-page="landing"] #section2b .workflow{
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
    }

  
    /* How It Works (Section 2b): match Section 1 background + light-blue bold text */
    body[data-page="landing"] #section2b .how-card{
      background: var(--panel-1);
      border: 1px solid rgba(255,255,255,0.10);
    }

    body[data-page="landing"] #section2b strong{
      color: rgba(173, 216, 255, 0.95); /* very light blue */
    }    /* Gold-line icons (What Sets Us Apart) */
    body[data-page="landing"] .icon-gold{
      width: 60px;
      height: 60px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
      opacity: 0.95;
      margin-bottom: 10px;
      flex: 0 0 auto;
    }

    body[data-page="landing"] #section2 .feature-card{
      position: relative;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .icon-gold{ width: 52px; height: 52px; }
    }

  
    body[data-page="landing"] #section2 .icon-gold{
      filter: drop-shadow(0 12px 20px rgba(0,0,0,0.18));
    }

  
    /* Section 2 card uniformity: keep layouts consistent without crowding */
    body[data-page="landing"] .s2-grid{ align-items: stretch; }

    body[data-page="landing"] .feature-card{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .feature-card{ height: auto; }
    }

  
    /* Section 2 top row: card + visual (Option A: radar/signal) */
    body[data-page="landing"] .s2-toprow{
      display:grid;
      grid-template-columns: 1fr 0.92fr;
      gap: 26px;
      align-items: stretch;
      margin-top: 14px;
    }

    body[data-page="landing"] #section2 .hero-moved-card{
      margin-top: 0; /* now controlled by .s2-toprow */
      max-width: none; /* grid controls width */
      height: 100%;
    }

    body[data-page="landing"] .s2-visual{
      background: rgba(15,23,42,0.04);
      border: 1px solid rgba(15,23,42,0.10);
      border-radius: 18px;
      padding: 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 240px;
      position: relative;
      overflow: hidden;
    }

    body[data-page="landing"] .s2-visual::after{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(circle at 30% 25%, rgba(246,213,138,0.16), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(185,140,255,0.10), transparent 60%);
      opacity: 0.55;
      pointer-events:none;
    }

    body[data-page="landing"] .radar-icon{
      width: min(360px, 92%);
      height: auto;
      position: relative;
      z-index: 1;
    }

    body[data-page="landing"] .radar-icon .glow{
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.22));
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .s2-toprow{ grid-template-columns: 1fr; }
      body[data-page="landing"] .s2-visual{ min-height: 220px; }
    }

  
    /* Section 2: top card + background radar visual */
    body[data-page="landing"] #section2 .section-inner{ position: relative; }

    body[data-page="landing"] #section2 .hero-moved-card{
      max-width: 600px;            /* narrower so right side has room */
      position: relative;
      z-index: 2;
    }

    body[data-page="landing"] #section2 .s2-topwrap{
      position: relative;
      min-height: 320px;
      margin-top: 14px;
      padding-right: 0;        /* reserve space for background visual */
    }

    body[data-page="landing"] #section2 .s2-radar-bg{
      position: absolute;
      right: -40px;
      top: -40px;
      width: 520px;
      height: 520px;
      opacity: 0.30;
      pointer-events: none;
      z-index: 1;                  /* behind the card (z=2) */
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.18));
    }

    body[data-page="landing"] #section2 .s2-radar-bg .stroke{
      stroke: rgba(246, 213, 138, 0.95);
    }

    body[data-page="landing"] #section2 .s2-radar-bg .stroke-soft{
      stroke: rgba(246, 213, 138, 0.30);
    }

    /* If an old right-column visual exists, hide it */
    body[data-page="landing"] #section2 .s2-visual{ display:none !important; }

    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-topwrap{ padding-right: 0; min-height: auto; }
      body[data-page="landing"] #section2 .s2-radar-bg{ display:none; }
      body[data-page="landing"] #section2 .hero-moved-card{ max-width: none; }
    }

  
    /* Section 2 radar background tweaks: smaller + stronger */
    body[data-page="landing"] #section2 .s2-radar-bg{
      width: 416px;
      height: 416px;
      opacity: 0.55;
      right: -10px;
      top: -18px;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.22));
    }

    body[data-page="landing"] #section2 .s2-radar-bg .stroke{
      stroke: rgba(215, 165, 80, 1);
    }

    body[data-page="landing"] #section2 .s2-radar-bg .stroke-soft{
      stroke: rgba(215, 165, 80, 0.45);
    }

  
    /* Section 2 alternating layout (cards + large side icons) */
    body[data-page="landing"] #section2 .s2-alt{
      display:flex;
      flex-direction:column;
      gap: 22px;
      margin-top: 18px;
    }

    body[data-page="landing"] #section2 .s2-row{
      display:grid;
      grid-template-columns: minmax(520px, 700px) 280px;
      justify-content: space-between;
      align-items: center;
      gap: 26px;
    }

    body[data-page="landing"] #section2 .s2-row.right{
      grid-template-columns: 280px minmax(520px, 700px);
    }

    body[data-page="landing"] #section2 .s2-card .feature-card{
      height: 100%;
      border-radius: 18px;
    }

    body[data-page="landing"] #section2 .s2-sideicon{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 220px;
    }

    body[data-page="landing"] #section2 .s2-bigicon{
      width: 170px;
      height: 170px;
      stroke: rgba(215, 165, 80, 1);
      fill: none;
      stroke-width: 2.35;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.16));
      opacity: 0.98;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-row, body[data-page="landing"] #section2 .s2-row.right{
        grid-template-columns: 1fr;
      }
      body[data-page="landing"] #section2 .s2-sideicon{
        order: -1;
        min-height: auto;
        justify-content:flex-start;
      }
      body[data-page="landing"] #section2 .s2-bigicon{ width: 120px; height: 120px; }
    }

  
    /* Section 2: top card icon to the left (target) */
    body[data-page="landing"] #section2 .s2-hero-row{
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 18px;
      align-items: start;
      position: relative;
      z-index: 2;
    }

    body[data-page="landing"] #section2 .s2-hero-icon{
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding-top: 6px;
    }

    body[data-page="landing"] #section2 .s2-hero-icon svg{
      width: 85px;   /* ~50% of large side icons */
      height: 85px;
      stroke: rgba(215, 165, 80, 1);
      fill: none;
      stroke-width: 2.35;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.16));
      opacity: 0.98;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-hero-row{ grid-template-columns: 1fr; }
      body[data-page="landing"] #section2 .s2-hero-icon{ justify-content:flex-start; }
      body[data-page="landing"] #section2 .s2-hero-icon svg{ width: 72px; height: 72px; }
    }

  
    /* Section 2 top area: treat radar as a large icon like the others */
    body[data-page="landing"] #section2 .s2-topwrap{
      display: grid;
      grid-template-columns: 280px minmax(520px, 700px);
      gap: 26px;
      align-items: start;
      margin-top: 14px;
      padding-right: 0 !important;
      min-height: auto;
    }

    body[data-page="landing"] #section2 .s2-topicon{
      min-height: 220px;
      align-items: flex-start;
      justify-content: center;
      padding-top: 6px;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-topwrap{ grid-template-columns: 1fr; }
      body[data-page="landing"] #section2 .s2-topicon{
        justify-content: flex-start;
        min-height: auto;
      }
    }

  
    /* Section 2 top card: remove the internal small icon so the large left icon is the hero */
    body[data-page="landing"] #section2 .s2-hero-icon{ display: none; }

  
    /* Section 2 top area: ensure top window is on the RIGHT, icon on the LEFT */
    body[data-page="landing"] #section2 .s2-topwrap{
      display: grid;
      grid-template-columns: 1fr minmax(520px, 700px);
      gap: 26px;
      align-items: start;
      margin-top: 14px;
      padding-right: 0 !important;
      min-height: auto;
    }

    body[data-page="landing"] #section2 .s2-topicon{
      justify-content: flex-end; /* push icon towards the card */
      min-height: auto;
      padding-top: 6px;
    }

    /* keep the top card snug to the right side of the content column */
    body[data-page="landing"] #section2 .hero-moved-card{
      width: 100%;
      margin-left: auto;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-topicon{ justify-content: flex-start; }
    }

  
    /* Section 2: unify window widths, spacing, and icon alignment */
    body[data-page="landing"] #section2{
      --s2-card-w: 560px;   /* ~20% narrower than prior max */
      --s2-icon-col: 340px;
      --s2-vgap: 28px;
    }

    /* Top window row */
    body[data-page="landing"] #section2 .s2-topwrap{
      display: grid;
      grid-template-columns: var(--s2-icon-col) var(--s2-card-w);
      gap: 26px;
      justify-content: center;
      align-items: stretch;
      margin-top: 14px;
      margin-bottom: var(--s2-vgap);
    }

    body[data-page="landing"] #section2 .hero-moved-card{
      width: min(100%, var(--s2-card-w));
      margin-left: 0;
      margin-right: 0;
      height: 100%;
      justify-self: center;
    }

    body[data-page="landing"] #section2 .s2-topicon{
      align-self: stretch;
      justify-self: center;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* Alternating windows */
    body[data-page="landing"] #section2 .s2-alt{
      margin-top: var(--s2-vgap);
      gap: var(--s2-vgap);
    }

    body[data-page="landing"] #section2 .s2-row{
      display:grid;
      grid-template-columns: var(--s2-card-w) var(--s2-icon-col);
      gap: 26px;
      justify-content: center;
      align-items: stretch;
    }

    body[data-page="landing"] #section2 .s2-row.right{
      grid-template-columns: var(--s2-icon-col) var(--s2-card-w);
    }

    body[data-page="landing"] #section2 .s2-card{
      width: min(100%, var(--s2-card-w));
      justify-self: center;
      align-self: stretch;
    }

    body[data-page="landing"] #section2 .s2-card .feature-card{
      height: 100%;
    }

    /* Icon sizing + alignment to visually match window height */
    body[data-page="landing"] #section2 .s2-sideicon{
      align-self: stretch;
      justify-self: center;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: auto; /* override older mins */
    }

    body[data-page="landing"] #section2 .s2-bigicon{
      height: 100%;
      width: auto;
      max-height: 100%;
      max-width: 300px;
    }

    /* Keep layout sane on smaller screens */
    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-topwrap{
        grid-template-columns: 1fr;
        justify-content: stretch;
        margin-bottom: 22px;
      }
      body[data-page="landing"] #section2 .hero-moved-card{ width: 100%; }
      body[data-page="landing"] #section2 .s2-row, body[data-page="landing"] #section2 .s2-row.right{
        grid-template-columns: 1fr;
        justify-content: stretch;
      }
      body[data-page="landing"] #section2 .s2-card{ width: 100%; }
      body[data-page="landing"] #section2 .s2-bigicon{
        height: auto;
        width: 140px;
        max-width: 140px;
      }
    }

  
    /* Section 2: align left-column windows with the "What Sets Us Apart?" heading */
    body[data-page="landing"] #section2 .s2-topwrap, body[data-page="landing"] #section2 .s2-row, body[data-page="landing"] #section2 .s2-row.right{
      justify-content: start;  /* left align within section-inner */
    }

    body[data-page="landing"] #section2 .s2-topwrap{
      grid-template-columns: var(--s2-icon-col) var(--s2-card-w);
    }

    /* Left-side window rows: card in first column should be flush with heading left edge */
    body[data-page="landing"] #section2 .s2-row.left{
      grid-template-columns: var(--s2-card-w) var(--s2-icon-col);
    }

    body[data-page="landing"] #section2 .s2-row.left .s2-card{
      justify-self: start;
    }

    body[data-page="landing"] #section2 .s2-row.left .s2-sideicon{
      justify-self: start;
    }

    /* Top window (card) sits in the right column; keep the whole block starting at heading left edge */
    body[data-page="landing"] #section2 .hero-moved-card{
      justify-self: start;
    }

    /* Keep existing center alignment on mobile */
    @media  (max-width: 1080px){
      body[data-page="landing"] #section2 .s2-topwrap, body[data-page="landing"] #section2 .s2-row, body[data-page="landing"] #section2 .s2-row.right{
        justify-content: stretch;
      }
      body[data-page="landing"] #section2 .s2-row.left .s2-card, body[data-page="landing"] #section2 .s2-row.left .s2-sideicon, body[data-page="landing"] #section2 .hero-moved-card{
        justify-self: stretch;
      }
    }

  
    /* Section 2 tagline under header */
    body[data-page="landing"] .section-tagline{
      font-family: var(--sans);
      font-size: 13.5px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(15,23,42,0.62);
      margin-top: 6px;
    }

  
    /* ===== Premium Vertical Flow (Section 2b: How It Works) ===== */
    body[data-page="landing"] .flow-premium{
      margin-top: 18px;
      display:flex;
      justify-content:center;
    }

    body[data-page="landing"] .flow-card{
      width: min(980px, 94vw);
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      padding: 26px 24px;
      background: rgba(3, 7, 18, 0.96);
      border: 1px solid rgba(246, 213, 138, 0.18);
      box-shadow: 0 18px 60px rgba(0,0,0,0.32);
    }

    body[data-page="landing"] .flow-card::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:
        radial-gradient(circle at 30% 25%, rgba(246, 213, 138, 0.10), transparent 52%),
        radial-gradient(circle at 70% 62%, rgba(185,140,255,0.10), transparent 55%),
        radial-gradient(circle at 45% 85%, rgba(170, 220, 215, 0.08), transparent 55%);
      opacity: 0.75;
      pointer-events:none;
      transform: translateZ(0);
    }

    body[data-page="landing"] .flow-steps{
      position: relative;
      display:flex;
      flex-direction: column;
      gap: 18px;
      z-index: 1;
    }

    /* timeline spine */
    body[data-page="landing"] .flow-steps::before{
      content:"";
      position:absolute;
      left: 62px;
      top: 14px;
      bottom: 14px;
      width: 2px;
      background: linear-gradient(
        180deg,
        rgba(246, 213, 138, 0.00),
        rgba(246, 213, 138, 0.40),
        rgba(185,140,255,0.26),
        rgba(246, 213, 138, 0.12),
        rgba(246, 213, 138, 0.00)
      );
      opacity: 0.9;
      pointer-events:none;
      filter: drop-shadow(0 0 18px rgba(246, 213, 138, 0.12));
    }

    body[data-page="landing"] .flow-step{
      display:grid;
      grid-template-columns: 124px 1fr;
      gap: 18px;
      align-items:center;
      min-height: 120px;
      padding: 10px 10px;
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 16px 44px rgba(0,0,0,0.28);
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    body[data-page="landing"] .flow-step:hover{
      transform: translateY(-2px);
      border-color: rgba(246, 213, 138, 0.18);
      box-shadow: 0 22px 60px rgba(0,0,0,0.34);
    }

    body[data-page="landing"] .flow-iconwrap{
      width: 124px;
      height: 124px;
      display:flex;
      align-items:center;
      justify-content:center;
      position: relative;
    }

    body[data-page="landing"] .flow-iconwrap::after{
      content:"";
      position:absolute;
      inset: 10px;
      border-radius: 999px;
      background: rgba(246, 213, 138, 0.06);
      filter: blur(0px);
      box-shadow: 0 0 26px rgba(246, 213, 138, 0.10);
      opacity: 0.95;
      pointer-events:none;
    }

    body[data-page="landing"] .flow-icon{
      width: 92px;
      height: 92px;
      stroke: rgba(246, 213, 138, 0.95);
      fill: none;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.30));
      position: relative;
      z-index: 1;
    }

    body[data-page="landing"] .flow-label{
      font-family: var(--serif);
      letter-spacing: 0.06em;
      font-size: 18px;
      color: rgba(241,241,251,0.95);
      line-height: 1.15;
    }

    body[data-page="landing"] .flow-connector{
      display:grid;
      grid-template-columns: 124px 1fr;
      gap: 18px;
      align-items:center;
      height: 54px;
      margin-top: -6px;
      margin-bottom: -6px;
      pointer-events:none;
    }

    body[data-page="landing"] .flow-connector .flow-arrowwrap{
      grid-column: 1 / 2;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    body[data-page="landing"] .flow-arrow{
      width: 42px;
      height: 42px;
      stroke: rgba(246, 213, 138, 0.72);
      fill: none;
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.92;
      filter: drop-shadow(0 0 14px rgba(246, 213, 138, 0.10));
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-card{ padding: 18px 16px; }
      body[data-page="landing"] .flow-step{
        grid-template-columns: 108px 1fr;
        gap: 14px;
        min-height: 104px;
      }
      body[data-page="landing"] .flow-iconwrap{ width: 108px; height: 108px; }
      body[data-page="landing"] .flow-icon{ width: 80px; height: 80px; }
      body[data-page="landing"] .flow-label{ font-size: 16px; }
      body[data-page="landing"] .flow-connector{ grid-template-columns: 108px 1fr; height: 46px; }
      body[data-page="landing"] .flow-steps::before{ left: 54px; }
    }

  
    /* ===== Premium Flow refinements: icon-only window, text outside, centered ===== */
    body[data-page="landing"] .flow-premium{ justify-content: center; }

    body[data-page="landing"] .flow-card{
      width: min(820px, 94vw); /* narrower */
      margin-left: auto;
      margin-right: auto;
    }

    /* Remove the large step window: keep only an icon window */
    body[data-page="landing"] .flow-step{
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 6px 0;
      min-height: auto;
      grid-template-columns: 124px 1fr;
    }

    body[data-page="landing"] .flow-iconwrap{ width: 124px; height: 124px; }

    body[data-page="landing"] .flow-iconcard{
      width: 124px;
      height: 124px;
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 16px 44px rgba(0,0,0,0.28);
      display:flex;
      align-items:center;
      justify-content:center;
      position: relative;
    }

    body[data-page="landing"] .flow-iconcard::before{
      content:"";
      position:absolute;
      inset: 10px;
      border-radius: 999px;
      background: rgba(246, 213, 138, 0.06);
      box-shadow: 0 0 26px rgba(246, 213, 138, 0.10);
      opacity: 0.95;
      pointer-events:none;
    }

    /* Remove old iconwrap halo so the icon window owns the effect */
    body[data-page="landing"] .flow-iconwrap::after{ display:none; }

    body[data-page="landing"] .flow-icon{
      position: relative;
      z-index: 1;
    }

    body[data-page="landing"] .flow-label{
      padding-right: 10px;
    }

    /* Align spine to icon window center */
    body[data-page="landing"] .flow-steps::before{ left: 62px; }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-card{ width: min(760px, 94vw); }
      body[data-page="landing"] .flow-step{ grid-template-columns: 108px 1fr; }
      body[data-page="landing"] .flow-iconcard{ width: 108px; height: 108px; }
    }

  
    /* ===== Flow: remove big window (flow-card), keep icon subwindows ===== */
    body[data-page="landing"] .flow-card{
      width: auto;
      max-width: none;
      background: transparent;
      border: none;
      box-shadow: none !important;
      padding: 0;
      border-radius: 0;
      overflow: visible !important;
    }

    body[data-page="landing"] .flow-card::before{ display:none !important; }

    /* Keep flow centered in section */
    body[data-page="landing"] .flow-premium{
      justify-content: center;
    }

    /* Make spine subtler on light background */
    body[data-page="landing"] .flow-steps::before{
      opacity: 0.55;
      filter: none;
      background: linear-gradient(
        180deg,
        rgba(246, 213, 138, 0.00),
        rgba(246, 213, 138, 0.28),
        rgba(185,140,255,0.18),
        rgba(246, 213, 138, 0.10),
        rgba(246, 213, 138, 0.00)
      );
    }

    /* Slightly tighten spacing now that there's no container padding */
    body[data-page="landing"] .flow-steps{ gap: 14px; }

  
    /* ===== Icon subwindows: match icon width + golden-brown background ===== */
    body[data-page="landing"] .flow-iconwrap{
      width: 92px;     /* match the icon size */
      height: 92px;
    }

    body[data-page="landing"] .flow-iconcard{
      width: 92px;
      height: 92px;
      border-radius: 16px;
      background: rgba(150, 112, 52, 0.22); /* golden-brown-ish */
      border: 1px solid rgba(150, 112, 52, 0.30);
      box-shadow: 0 14px 34px rgba(0,0,0,0.18) !important;
    }

    body[data-page="landing"] .flow-iconcard::before{
      inset: 8px !important;
      background: rgba(246, 213, 138, 0.10);
      box-shadow: 0 0 22px rgba(246, 213, 138, 0.14) !important;
    }

    body[data-page="landing"] .flow-icon{
      width: 78px;
      height: 78px;
    }

    /* Re-align grid columns to icon window width */
    body[data-page="landing"] .flow-step{
      grid-template-columns: 92px 1fr;
    }

    body[data-page="landing"] .flow-connector{
      grid-template-columns: 92px 1fr;
    }

    body[data-page="landing"] .flow-steps::before{
      left: 46px; /* center of 92px icon window */
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-iconwrap{ width: 80px !important; height: 80px !important; }
      body[data-page="landing"] .flow-iconcard{ width: 80px !important; height: 80px !important; }
      body[data-page="landing"] .flow-icon{ width: 70px !important; height: 70px !important; }
      body[data-page="landing"] .flow-step{ grid-template-columns: 80px 1fr !important; }
      body[data-page="landing"] .flow-connector{ grid-template-columns: 80px 1fr !important; }
      body[data-page="landing"] .flow-steps::before{ left: 40px !important; }
    }

  
    /* ===== How It Works: icon-only centered flow (no text) ===== */
    body[data-page="landing"] #section2b{
      background: #fbf7ee; /* keep very light cream / pale yellow */
      color: var(--text-dark);
    }

    /* Remove any spine line for the icon-only version */
    body[data-page="landing"] .flow-steps::before{ display:none !important; }

    /* Center the entire flow in the section */
    body[data-page="landing"] .flow-premium{
      justify-content: center;
    }

    /* Steps: single-column, centered */
    body[data-page="landing"] .flow-steps{
      align-items: center;
      gap: 18px;
    }

    body[data-page="landing"] .flow-step{
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
      background: transparent;
      border: none;
      box-shadow: none !important;
      padding: 0;
      min-height: auto;
    }

    body[data-page="landing"] .flow-connector{
      grid-template-columns: 1fr;
      justify-items: center;
      height: 54px;
      margin: 0;
    }

    body[data-page="landing"] .flow-connector .flow-arrowwrap{
      grid-column: 1 / 2 !important;
    }

    /* Icon subwindows (#2 to #6): square, charcoal-ivory tone */
    body[data-page="landing"] .flow-iconcard{
      width: 108px;
      height: 108px;
      border-radius: 0; /* square */
      background:
        linear-gradient(180deg,
          rgba(32, 34, 36, 0.98),
          rgba(24, 26, 28, 0.98)
        ) !important; /* dark charcoal */
      border: 1px solid rgba(244, 239, 232, 0.16); /* ivory edge */
      box-shadow:
        0 16px 46px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(246, 213, 138, 0.08) !important; /* subtle gold inner line */
    }

    body[data-page="landing"] .flow-iconcard::before{
      border-radius: 0;
      background: rgba(244, 239, 232, 0.06); /* faint ivory glow */
      box-shadow: 0 0 22px rgba(246, 213, 138, 0.10) !important;
    }

    /* Make icon lines golden */
    body[data-page="landing"] .flow-icon{
      stroke: rgba(246, 213, 138, 0.95);
      width: 82px;
      height: 82px;
    }

    /* Arrow styling stays premium */
    body[data-page="landing"] .flow-arrow{
      stroke: rgba(246, 213, 138, 0.78);
      filter: drop-shadow(0 0 14px rgba(246, 213, 138, 0.10));
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-iconcard{ width: 96px !important; height: 96px !important; }
      body[data-page="landing"] .flow-icon{ width: 74px !important; height: 74px !important; }
      body[data-page="landing"] .flow-connector{ height: 46px; }
    }

  
    /* ===== How It Works: premium 3D icon windows + side micro-windows ===== */

    /* Make icon windows feel 3D + premium */
    body[data-page="landing"] .flow-iconcard{
      background:
        radial-gradient(circle at 30% 25%, rgba(244,239,232,0.10), transparent 52%),
        radial-gradient(circle at 70% 70%, rgba(246,213,138,0.10), transparent 58%),
        linear-gradient(180deg, rgba(40,42,45,0.98), rgba(16,17,18,0.98)) !important;
      border: 1px solid rgba(244,239,232,0.20);
      box-shadow:
        0 24px 70px rgba(0,0,0,0.26),
        0 8px 18px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -10px 20px rgba(0,0,0,0.30) !important;
      position: relative;
      transform: translateZ(0);
    }

    body[data-page="landing"] .flow-iconcard::before{
      background: linear-gradient(180deg, rgba(246,213,138,0.10), rgba(244,239,232,0.04));
      opacity: 0.90;
    }

    body[data-page="landing"] .flow-iconcard::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius: 0; /* square */
      box-shadow:
        inset 0 0 0 1px rgba(246,213,138,0.10),
        inset 0 0 0 2px rgba(0,0,0,0.10);
      opacity: 0.95;
    }

    /* Give icons a crisp gold line with subtle glow */
    body[data-page="landing"] .flow-icon{
      stroke: rgba(246, 213, 138, 0.98);
      filter:
        drop-shadow(0 10px 18px rgba(0,0,0,0.35))
        drop-shadow(0 0 14px rgba(246, 213, 138, 0.10));
    }

    /* Make arrow more premium */
    body[data-page="landing"] .flow-arrow{
      stroke: rgba(246, 213, 138, 0.82);
      filter:
        drop-shadow(0 0 16px rgba(246, 213, 138, 0.14))
        drop-shadow(0 10px 22px rgba(0,0,0,0.18));
      opacity: 0.95;
    }

    /* Ensure connectors are a single centered column (and allow absolute side windows) */
    body[data-page="landing"] .flow-connector{
      width: 108px;
      position: relative;
      overflow: visible;
      padding: 0;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-connector{ width: 96px; }
    }

    /* Side micro-windows between icons */
    body[data-page="landing"] .flow-sidecard{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 150px;
      height: 56px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(244,239,232,0.10), transparent 60%),
        linear-gradient(180deg, rgba(40,42,45,0.98), rgba(16,17,18,0.98));
      border: 1px solid rgba(244,239,232,0.18);
      box-shadow:
        0 20px 60px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -10px 18px rgba(0,0,0,0.30);
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none; /* purely decorative */
    }

    body[data-page="landing"] .flow-sidecard::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius: 14px;
      box-shadow: inset 0 0 0 1px rgba(246,213,138,0.10);
      pointer-events:none;
      opacity: 0.95;
    }

    body[data-page="landing"] .flow-side-left{ right: calc(100% + 24px); }
    body[data-page="landing"] .flow-side-right{ left: calc(100% + 24px); }

    body[data-page="landing"] .flow-sideglyph{
      width: 22px;
      height: 22px;
      stroke: rgba(246, 213, 138, 0.95);
      fill: none;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 14px rgba(246, 213, 138, 0.12));
      opacity: 0.95;
    }

    @media  (max-width: 1080px){
      /* On smaller screens, hide side micro-windows to avoid crowding */
      body[data-page="landing"] .flow-sidecard{ display:none; }
    }

  
    /* ===== How It Works: title + orthogonal branch arrows to micro-windows ===== */
    body[data-page="landing"] #section2b .howitworks-title{
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom: 10px;
      margin-top: 6px;
      text-align:center;
    }

    body[data-page="landing"] #section2b .howitworks-title h1{
      margin: 0;
      font-family: var(--serif);
      letter-spacing: -0.02em;
      font-size: clamp(30px, 3.2vw, 42px);
      color: rgba(15,23,42,0.92);
    }

    body[data-page="landing"] .flow-branch{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 64px;
      pointer-events:none;
      opacity: 0.95;
    }

    body[data-page="landing"] .flow-branch path{
      fill: none;
      stroke: rgb(1, 3, 12);
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: filter 220ms ease, opacity 220ms ease;
      filter: drop-shadow(0 0 14px rgba(246, 213, 138, 0.12));
    }

    /* Position branches so they reach the side micro-window */
    body[data-page="landing"] .flow-branch-left{
      left: -200px;
      width: 308px;
    }

    body[data-page="landing"] .flow-branch-right{
      left: 0px;
      width: 220px;
    }

    /* Add glow when the connector (arrow area) is hovered */
    body[data-page="landing"] .flow-connector:hover .flow-branch path{
      filter:
        drop-shadow(0 0 18px rgba(246, 213, 138, 0.30))
        drop-shadow(0 0 34px rgba(246, 213, 138, 0.18));
      opacity: 1;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-branch{ display:none; }
    }

  
    /* ===== Flow adjustments: top micro-window, no vertical arrows, bolder branch arrows ===== */
    /* Increase gap between title and first micro-window */
    body[data-page="landing"] #section2b .howitworks-title{ margin-bottom: 22px; }

    /* Remove vertical arrows between icons */
    body[data-page="landing"] .flow-arrowwrap{ display:none !important; }
    body[data-page="landing"] .flow-connector{
      height: 72px; /* gives breathing room for side micro-windows */
    }
    body[data-page="landing"] .flow-arrow{ display:none !important; }

    /* Make remaining branch arrows bolder + higher contrast */
    body[data-page="landing"] .flow-branch path{
      stroke: rgb(1, 3, 12);
      stroke-width: 3.8;
      filter:
        drop-shadow(0 0 18px rgba(246, 213, 138, 0.22))
        drop-shadow(0 0 34px rgba(246, 213, 138, 0.10));
      opacity: 1;
    }

    body[data-page="landing"] .flow-connector:hover .flow-branch path{
      filter:
        drop-shadow(0 0 22px rgba(246, 213, 138, 0.40))
        drop-shadow(0 0 44px rgba(246, 213, 138, 0.22));
    }

    /* Top micro-window (above first icon) */
    body[data-page="landing"] .flow-topmicro{
      width: 160px;
      height: 64px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(244,239,232,0.10), transparent 60%),
        linear-gradient(180deg, rgba(40,42,45,0.98), rgba(16,17,18,0.98));
      border: 1px solid rgba(244,239,232,0.18);
      box-shadow:
        0 20px 60px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -10px 18px rgba(0,0,0,0.30);
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto 18px; /* space before first icon */
      pointer-events:none;
      position: relative;
    }

    body[data-page="landing"] .flow-topmicro::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius: 14px;
      box-shadow: inset 0 0 0 1px rgba(246,213,138,0.10);
      pointer-events:none;
      opacity: 0.95;
    }

    body[data-page="landing"] .flow-topmicro .flow-sideglyph{
      width: 22px;
      height: 22px;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-topmicro{ display:none; }
      body[data-page="landing"] .flow-connector{ height: 54px; }
    }

  
    /* ===== Special orthogonal arrow: Icon 1 -> Micro-window 2 ===== */
    body[data-page="landing"] .flow-steps{ position: relative; }
    body[data-page="landing"] .flow-special-arrow{
      position:absolute;
      inset: 0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index: 0; /* behind cards */
    }
    body[data-page="landing"] .flow-special-arrow path{
      fill:none;
      stroke: rgb(1, 3, 12);
      stroke-width: 4.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 22px rgba(246, 213, 138, 0.28))
        drop-shadow(0 0 46px rgba(246, 213, 138, 0.16));
      opacity: 0.98;
    }

  
    /* ===== Panel section titles ===== */
    body[data-page="landing"] .panel-arc-title{
      grid-column: 1 / -1;
      margin: 0 0 14px 0;
      font-family: var(--serif);
      letter-spacing: -0.02em;
      font-size: clamp(28px, 3.0vw, 40px);
      color: rgba(15,23,42,0.92);
      text-align: left;
      width: min(1280px, 96%);
      padding: 0 6px;
    }

    body[data-page="landing"] .panel-mini{
      font-family: var(--serif);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 700;
      color: rgba(15,23,42,0.66);
      margin-bottom: 8px;
    }

    /* On dark backgrounds, keep mini title readable */
    body[data-page="landing"] #section4 .panel-mini{
      color: rgba(15,23,42,0.62);
    }

  
    /* ===== Flow side windows (per icon) ===== */
    body[data-page="landing"] .flow-steps{ position: relative; }

    body[data-page="landing"] .flow-step{
      position: relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    body[data-page="landing"] .flow-iconcard{ position: relative; z-index: 2; }

    body[data-page="landing"] .flow-sidewin{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: min(360px, 42vw);
      height: 78px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 30% 30%, rgba(244,239,232,0.10), transparent 60%),
        linear-gradient(180deg, rgba(40,42,45,0.98), rgba(16,17,18,0.98));
      border: 1px solid rgba(244,239,232,0.18);
      box-shadow:
        0 22px 70px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -10px 18px rgba(0,0,0,0.30);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index: 1;
      pointer-events:none;
    }

    body[data-page="landing"] .flow-sidewin::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius: 16px;
      box-shadow: inset 0 0 0 1px rgba(246,213,138,0.10);
      pointer-events:none;
      opacity: 0.95;
    }

    body[data-page="landing"] .flow-sidewin-inner{
      font-family: var(--serif);
      letter-spacing: 0.06em;
      font-size: 16px;
      color: rgba(241,241,251,0.92);
      padding: 0 18px;
      text-align:center;
      line-height: 1.25;
    }

    body[data-page="landing"] .flow-sidewin-left{ right: calc(100% + 22px); }
    body[data-page="landing"] .flow-sidewin-right{ left: calc(100% + 22px); }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-sidewin{ display:none; }
    }

  
    /* ===== Flow side windows refinements: distance, arrows, fit width ===== */

    /* Top micro window: text pill */
    body[data-page="landing"] .flow-topmicro{
      width: fit-content;
      height: auto;
      padding: 14px 18px;
      margin: 0 auto 22px;
    }

    body[data-page="landing"] .flow-topmicro-inner{
      font-family: var(--serif);
      letter-spacing: 0.06em;
      font-size: 16px;
      color: rgba(241,241,251,0.92);
      text-align:center;
      line-height: 1.25;
      white-space: nowrap;
    }

    /* Side windows: shrink-to-text */
    body[data-page="landing"] .flow-sidewin{
      width: fit-content;
      max-width: 56vw;
      height: auto;
      padding: 16px 18px;
    }

    body[data-page="landing"] .flow-sidewin-inner{
      padding: 0;
      white-space: nowrap;
    }

    /* Increase distance from icon */
    body[data-page="landing"] .flow-sidewin-left{ right: calc(100% + 108px) !important; }
    body[data-page="landing"] .flow-sidewin-right{ left: calc(100% + 108px) !important; }

    /* Remove old inset pseudo element so we can use ::after for arrowheads */
    body[data-page="landing"] .flow-sidewin::after{ content: none !important; }

    /* Add bold arrows from side window to icon (orthogonal: horizontal only) */
    body[data-page="landing"] .flow-sidewin-left::before, body[data-page="landing"] .flow-sidewin-right::before{
      content:"";
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 54px;  /* matches the gap */
      height: 0;
      border-top: 5px solid rgba(246, 213, 138, 0.98);
      filter:
        drop-shadow(0 0 18px rgba(246, 213, 138, 0.26))
        drop-shadow(0 0 34px rgba(246, 213, 138, 0.14));
      opacity: 1;
      pointer-events:none;
    }

    body[data-page="landing"] .flow-sidewin-left::before{ right: -54px; }
    body[data-page="landing"] .flow-sidewin-right::before{ left: -54px; }

    body[data-page="landing"] .flow-sidewin-left::after, body[data-page="landing"] .flow-sidewin-right::after{
      content:"";
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      pointer-events:none;
      filter:
        drop-shadow(0 0 18px rgba(246, 213, 138, 0.26))
        drop-shadow(0 0 34px rgba(246, 213, 138, 0.14));
    }

    /* Arrowheads */
    body[data-page="landing"] .flow-sidewin-left::after{
      right: -54px;
      border-left: 14px solid rgba(246, 213, 138, 0.98);
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      margin-right: -2px;
    }

    body[data-page="landing"] .flow-sidewin-right::after{
      left: -54px;
      border-right: 14px solid rgba(246, 213, 138, 0.98);
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      margin-left: -2px;
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] .flow-topmicro-inner, body[data-page="landing"] .flow-sidewin-inner{ white-space: normal; }
      body[data-page="landing"] .flow-sidewin{ max-width: 78vw; }
      body[data-page="landing"] .flow-sidewin-left::before, body[data-page="landing"] .flow-sidewin-right::before, body[data-page="landing"] .flow-sidewin-left::after, body[data-page="landing"] .flow-sidewin-right::after{ display:none; }
    }

  
    /* ===== Flow arrows via SVG overlay (replaces pseudo arrows) ===== */
    body[data-page="landing"] .flow-topmicro{ margin: 0 auto 40px !important; } /* more space before first icon */

    /* Turn off old pseudo-arrow decorations (we'll draw precise arrows with SVG) */
    body[data-page="landing"] .flow-sidewin::before, body[data-page="landing"] .flow-sidewin::after{ display:none !important; }

    
    body[data-page="landing"] .flow-arrowsvg{
      position:absolute;
      top: -18px;
      bottom: -18px;
      left: -620px;   /* expand horizontally to cover side windows */
      right: -620px;  /* expand horizontally to cover side windows */
      width:auto;
      height:auto;
      pointer-events:none;
      z-index: 6; /* above windows for clarity */
      overflow: visible;
    }

    body[data-page="landing"] .flow-arrowsvg path{
      fill:none;
      stroke: rgb(1, 3, 12);
      stroke-width: 3.0;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 18px rgba(1, 3, 12, 0.26))
        drop-shadow(0 0 40px rgba(1, 3, 12, 0.14));
      opacity: 1;
    }

  
    body[data-page="landing"] .flow-sidewin-inner{ white-space: nowrap !important; }

  
    /* ===== Flow chart arrows: expanded SVG overlay to reach side windows ===== */
    body[data-page="landing"] #section2b .flow-steps{ position: relative; }
    body[data-page="landing"] #section2b .flow-arrowsvg{
      position:absolute;
      top: -22px;
      left: -760px;
      width: calc(100% + 1520px);
      height: calc(100% + 44px);
      pointer-events:none;
      z-index: 25;
      overflow: visible;
    }

  
    /* Flow icons: subtle premium hover glow */
    body[data-page="landing"] #section2b .flow-iconcard{
      transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
    }
    body[data-page="landing"] #section2b .flow-iconcard:hover{
      border-color: rgba(246, 213, 138, 0.55);
      box-shadow:
        0 18px 44px rgba(0,0,0,0.22),
        0 0 0 1px rgba(246, 213, 138, 0.12),
        0 0 26px rgba(246, 213, 138, 0.16);
      transform: translateY(-1px);
    }

  
    body[data-page="landing"] #section2b .section-inner{ position: relative; }

    /* Aristotle quote block (Section 2b) */
    body[data-page="landing"] #section2b .flow-quote{
      position: relative;
      width: min(360px, 32vw);
      padding: 16px 16px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(15,23,42,0.10);
      box-shadow: 0 18px 55px rgba(0,0,0,0.12);
      backdrop-filter: blur(8px);
      color: rgba(15,23,42,0.92);
      align-self: start;
    }

    body[data-page="landing"] #section2b .flow-quote .q-title{
      font-family: var(--serif);
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 800;
      color: rgba(15,23,42,0.70);
      margin-bottom: 10px;
    }

    body[data-page="landing"] #section2b .flow-quote .q-greek{
      font-family: "Noto Serif", var(--serif);
      font-size: 18px;
      line-height: 1.45;
      margin: 0 0 10px 0;
      color: rgba(15,23,42,0.94);
    }

    body[data-page="landing"] #section2b .flow-quote .q-translation{
      font-family: var(--sans);
      font-size: 14.5px;
      line-height: 1.55;
      margin: 0 0 10px 0;
      color: rgba(15,23,42,0.82);
      font-style: italic;
    }

    body[data-page="landing"] #section2b .flow-quote .q-attrib{
      font-family: var(--sans);
      font-size: 12.5px;
      letter-spacing: 0.02em;
      color: rgba(15,23,42,0.62);
    }

    @media  (max-width: 1080px){
      body[data-page="landing"] #section2b .flow-quote{ width: 100%; }
    }

  
    body[data-page="landing"] .footer-links a{
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }


/* ===== Premium hero (Section 1) background to match the top bar ===== */
body[data-page="landing"] #section1{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1400px 640px at -12% 10%, rgba(120, 180, 255, 0.16), rgba(120, 180, 255, 0.00) 58%),
    radial-gradient(1200px 700px at 112% 0%, rgba(120, 180, 255, 0.14), rgba(120, 180, 255, 0.00) 62%),
    linear-gradient(180deg, rgba(14, 16, 26, 1.00) 0%, rgba(8, 9, 12, 1.00) 100%);
}

body[data-page="landing"] #section1::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 55%),
    radial-gradient(900px 360px at 12% -30%, rgba(120, 180, 255, 0.14), rgba(120, 180, 255, 0.00) 66%);
  opacity: 0.65;
}

body[data-page="landing"] #section1::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* micro-texture (no images) for a premium feel */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.020) 0px, rgba(255,255,255,0.020) 1px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.00) 6px),
    repeating-linear-gradient(90deg, rgba(120, 180, 255, 0.018) 0px, rgba(120, 180, 255, 0.018) 1px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.00) 7px);
  opacity: 0.30;
  mix-blend-mode: overlay;
}

body[data-page="landing"] #section1 .section-inner{
  position: relative;
  z-index: 1;
}









/* Secondary kicker spacing stays the same as prior intent */
body[data-page="landing"] .hero-kicker-secondary{
  margin-top: 10px;
}


/* === CVD-LND-0013: Hero line control + image nudge (no size change) === */
@media  (min-width: 980px){
  /* Keep hero headline and kicker to the intended 2 lines (br-controlled) */
  body[data-page="landing"] #section1 .hero-title, body[data-page="landing"] #section1 .hero-kicker{
    white-space: nowrap;
  }

  /* Nudge the hero image 2mm to the right without resizing */
  body[data-page="landing"] #section1 .hero-image{
    transform: translateX(2mm);
  }
}


/* === CVD-LND-0016: Enlarge Section 4 dashboard panel image (4th image) === */
body[data-page="landing"] #section4 .panel-image:not(.zoom) img[src*="panel4_dashboard"]{
  /* Requested: +20% width, +120% height. Applied as element size increase (cropped within frame). */
  width: 120%;
  height: 220%;
  max-width: none;
  max-height: none !important;
  object-fit: cover;
  /* preserve the panel tilt styling */
  transform: rotateY(-6deg) rotateX(2deg) translateZ(0);
  transform-origin: 50% 50%;
}



/* === CVD-WEB-0005 landing nav active no-flicker === */
body[data-page="landing"] #section1 .navlinks a:active{ transform: none; }


/* === CVD-WEB-0006 landing nav active matches hover (prevents click-jump) === */
body[data-page="landing"] #section1 .navlinks a:hover{ transform: none; }
body[data-page="landing"] #section1 .navlinks a:active{ transform: none; }


/* === CVD-WEB-0007 landing cta active matches hover (prevents click-jump) === */
body[data-page="landing"] #section1 .cta:hover{ transform: translateY(-2px); }
body[data-page="landing"] #section1 .cta:active{ transform: translateY(-2px) !important; }


/* === CVD-WEB-0013 landing no-transform-transition (eliminates rare hover-load flicker) === */
body[data-page="landing"] #section1 .navlinks a{
  transition: box-shadow 180ms ease, color 180ms ease, opacity 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}
body[data-page="landing"] #section1 .cta{
  transition: box-shadow 180ms ease, color 180ms ease, opacity 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}


/* === CVD-WEB-0014 landing no-hover-lift-no-press === */
body[data-page="landing"] #section1 .navlinks a:hover, body[data-page="landing"] #section1 .navlinks a:active, body[data-page="landing"] #section1 .navlinks a:focus-visible{
  transform: none;
}
body[data-page="landing"] #section1 .cta:hover, body[data-page="landing"] #section1 .cta:active, body[data-page="landing"] #section1 .cta:focus-visible{
  transform: none !important;
}



/* === CVD-WEB-0015 nav-only no-hover-lift (topbar links never move) === */
/* Scope strictly to the navigation bar links inside the topbar. */
body[data-page="landing"] .topbar .navlinks a:hover, body[data-page="landing"] .topbar .navlinks a:active, body[data-page="landing"] .topbar .navlinks a:focus-visible{
  transform: none;
}
/* Section 4 (horizontal training arc): proportional screenshots & consistent sizing */
/* Zoom specific panels (1 and 4): double width/height of the rendered screenshot */
/* Panel 5: double height, and frame width just wide enough for the screenshot (no side blanks) */
/* Section 4 (horizontal training arc): make image + window match (no letterboxing) */
/* Section 4 (horizontal training arc): full screenshots visible, no internal blank space */
body[data-page="landing"] #section4 .panel-image{
  display: inline-flex;
  justify-self: start;
  align-self: center;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
}
body[data-page="landing"] #section4 .panel-image img{
  display: block;
  height: var(--arc-img-h);
  width: auto;
  object-fit: contain;
}

/* Panel 1: keep the wider layout */
body[data-page="landing"] #section4 .arc-p1 .panel-grid{
  grid-template-columns: 0.75fr 1.25fr;
  width: min(1500px, 98%);
}

/* Panels 2 & 3: default layout; the window shrink-wraps to the image automatically */


/* Panel 1 (Editor screenshot): enlarge ≈35% and keep exact aspect ratio (no cropping)
   Applies to BOTH landing variants (panel position based).
*/
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(1){
  padding: 16px; /* reduce padding so the screenshot can occupy more space */
}
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(1) .panel-grid{
  width: min(2075px, 99%);            /* ≈ +35% vs 1536px cap */
  grid-template-columns: 0.55fr 1.45fr; /* give the screenshot column more space */
  gap: 18px;
}
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(1) .panel-image{
  aspect-ratio: 2887 / 1139; /* match panel1_editor.jpg exactly */
}

/* Panel 4 (Dashboard screenshot): enlarge ≥20% and keep exact aspect ratio (no cropping)
   Applies to BOTH landing variants:
   - landing.html (has arc-p1..arc-p5)
   - codivium-landing-0004.html (no arc-* classes)
*/
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(4){
  padding: 18px; /* was 28px */
}
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(4) .panel-grid{
  width: min(1840px, 98%);            /* ≈ +20% vs 1536px cap */
  grid-template-columns: 0.60fr 1.40fr; /* give media a lot more space */
  gap: 18px;
}
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(4) .panel-image{
  aspect-ratio: 2694 / 1150; /* match the dashboard screenshot exactly */
}
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(4) .panel-image img{
  transform: none !important; /* avoid any squeeze from tilt */
}
/* Panel 5 stays as previously tuned */

/* Hero visual: sharp corners + subtle zoom-in on the image */
body[data-page="landing"] .hero-image{
  border-radius: 0;
  overflow: hidden;
}
body[data-page="landing"] .hero-image img{
  transform: scale(1.2);
  transform-origin: 50% 50%;
}


/* ===== Section 4 horizontal panels: screenshots fully visible + larger =====
   - Remove clipping caused by 3D transforms + fixed-height containers
   - Increase effective screenshot size (≈ +20% width target, +10% height target via taller sticky window)
   - Preserve each image's intrinsic aspect ratio (no cropping)
*/
/* Robust explicit sizing for the Section 4 horizontal track
   Prevents the track from collapsing to a single visible panel when these
   pages are integrated into a larger stylesheet bundle. */
body[data-page="landing"] #section4 .h-track{
  width: max-content;
  min-width: 100%;
  flex-wrap: nowrap;
}
body[data-page="landing"] #section4 .h-track > .h-panel{
  width: 100%;
  min-width: 100%;
}

body[data-page="landing"] #section4 .h-sticky{
  height: 76vh; /* was 69vh */
}

body[data-page="landing"] #section4 .panel-grid{
  width: min(1536px, 96%); /* was min(1280px, 96%) */
  grid-template-columns: 0.85fr 1.15fr; /* give media more space */
}

@media  (max-width: 980px){
  body[data-page="landing"] #section4 .panel-grid{
    width: min(980px, 96%);
    grid-template-columns: 1fr;
  }

  /* Ensure the dashboard panel also stacks correctly on small screens */
  body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(4) .panel-grid{
    width: min(980px, 96%);
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Screenshot window should match the screenshot (no padding/tilt clipping) */

/* Section 4 screenshots: sharp corners (no rounding) */
body[data-page="landing"] #section4 .panel-image, body[data-page="landing"] #section4 .panel-image.zoom{
  border-radius: 0 !important;
}
body[data-page="landing"] #section4 .panel-image img{
  border-radius: 0 !important;
}

body[data-page="landing"] #section4 .panel-image{
  padding: 0 !important;
  height: auto !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}

body[data-page="landing"] #section4 .panel-image picture{
  display: block;
}

body[data-page="landing"] #section4 .panel-image img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  transform: none !important; /* stop 3D tilt squeezing/cropping */
}


}

body[data-page="landing"] .hero-title-offset{ margin-top: 16px; }
body[data-page="landing"] .panel-copy-gap{ margin-top: 10px; }
body[data-page="landing"] .panel-copy-muted{ color: rgba(241,241,251,0.74); }
body[data-page="landing"] .panel-copy-wide{ max-width: 86ch; }
body[data-page="landing"] .bullets-muted{ color: rgba(241,241,251,0.74); }
body[data-page="landing"] .q-translation-muted{ color: var(--muted-dark); }


/* Final patch: Section 4 images are fully static; no hover interaction */
body[data-page="landing"] #section4 .panel-image,
body[data-page="landing"] #section4 .panel-image img{
  pointer-events: none !important;
}
body[data-page="landing"] #section4 .panel-image,
body[data-page="landing"] #section4 .panel-image.zoom,
body[data-page="landing"] #section4 .panel-image:hover,
body[data-page="landing"] #section4 .panel-image:hover img,
body[data-page="landing"] #section4 .h-panel:hover .panel-image,
body[data-page="landing"] #section4 .h-panel:hover .panel-image img{
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* Final execution patch: keep Section 4 images static and size panel 5 to match panel 2 height */
body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(5) .panel-image{
  height: clamp(340px, 48vh, 520px) !important;
}
body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(5) .panel-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(2) .panel-image{
  height: clamp(340px, 48vh, 520px) !important;
}
body[data-page="landing"] #section4 .h-track .h-panel:nth-of-type(2) .panel-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
body[data-page="landing"] #section4 .panel-image,
body[data-page="landing"] #section4 .panel-image img{
  pointer-events: none !important;
}


/* ===== Final patch: Section 3 constellation/title centered in the viewport ===== */
body[data-page="landing"] #section3{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px 22px 48px;
}
body[data-page="landing"] #section3 .section-inner{
  width: min(1760px, 98vw);
  min-height: calc(100vh - 136px);
  margin: 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
body[data-page="landing"] #section3 h1,
body[data-page="landing"] #section3 p{
  text-align: center;
}
body[data-page="landing"] #section3 p{
  max-width: 84ch;
  margin-inline: auto;
}
body[data-page="landing"] #section3 codivium-constellation{
  width: 100%;
  display: block;
  justify-self: center;
}


/* ===== Final patch v7: reduce final horizontal-panel image by 15% ===== */
body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(5) .panel-image{
  width: 85% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== Final patch v14: hero title/tagline line breaks + force hero image visible ===== */
body[data-page="landing"] .hero-grid{
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr) !important;
}
body[data-page="landing"] .hero-grid > div:last-child{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body[data-page="landing"] .hero-image{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 120px;
}
body[data-page="landing"] .hero-image picture,
body[data-page="landing"] .hero-image img{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body[data-page="landing"] .hero-kicker{
  max-width: 44ch;
}


/* ===== Final patch v15: shift hero image right and set exact two-line hero title ===== */
body[data-page="landing"] .hero-grid{
  grid-template-columns: minmax(0, 0.84fr) minmax(520px, 1.16fr) !important;
  align-items: center !important;
}
body[data-page="landing"] .hero-grid > div:first-child{
  position: relative;
  z-index: 2;
}
body[data-page="landing"] .hero-grid > div:last-child{
  position: relative;
  padding-left: 96px !important; /* approx 1 inch */
  z-index: 1;
}
body[data-page="landing"] .hero-image{
  transform: translateX(96px) !important; /* approx 1 inch */
}
body[data-page="landing"] .hero-title{
  max-width: 12ch;
}

/* ══ MOBILE RESPONSIVE (≤ 768px) ══════════════════════════════════════════
   Fixes for all landing page sections on small screens.
   Overrides the v14/v15 final patches where needed for mobile.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero grid: single column, no horizontal offset */
  body[data-page="landing"] .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  body[data-page="landing"] .hero-grid > div:last-child{
    padding-left: 0 !important;
  }
  body[data-page="landing"] .hero-image{
    transform: none !important;
  }
  body[data-page="landing"] .hero-title{
    font-size: clamp(32px, 7vw, 52px);
    max-width: 100%;
  }
  body[data-page="landing"] #section1{
    padding-top: 80px;
    padding-bottom: 40px;
  }

  /* Sections: reduce padding */
  body[data-page="landing"] section{
    padding: 56px 16px 36px;
  }
  body[data-page="landing"] #section2b{
    padding-top: 28px;
  }
  body[data-page="landing"] #section3{
    padding: 56px 16px 36px;
    min-height: auto;
  }
  body[data-page="landing"] #section3 .section-inner{
    min-height: auto;
    gap: 10px;
  }
  body[data-page="landing"] #section6{
    padding: 16px;
  }

  /* Section inner widths */
  body[data-page="landing"] .section-inner{
    width: 100%;
  }

  /* Section 2 alternating rows: single column */
  body[data-page="landing"] #section2 .s2-row,
  body[data-page="landing"] #section2 .s2-row.right{
    grid-template-columns: 1fr;
  }
  body[data-page="landing"] #section2 .s2-sideicon{
    order: -1;
    min-height: auto;
  }
  body[data-page="landing"] #section2 .s2-bigicon{
    width: 80px;
    height: 80px;
  }

  /* Section 5 CTA window: single column */
  body[data-page="landing"] .s5-window{
    grid-template-columns: 1fr;
    padding: 16px;
  }
  body[data-page="landing"] .s5-window h2{
    font-size: 22px;
  }
  body[data-page="landing"] .s5-window p{
    font-size: 14px;
  }

  /* Hero CTA row: stack buttons */
  body[data-page="landing"] .hero-cta-row{
    flex-direction: column;
    align-items: flex-start;
  }

  /* Footer */
  body[data-page="landing"] .footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 16px;
  }
  body[data-page="landing"] .footer-links{
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }
  body[data-page="landing"] .to-top{
    align-self: flex-end;
  }

  /* Section 4 horizontal scroll: simplify on mobile */
  body[data-page="landing"] #section4{
    padding: 0;
  }
  body[data-page="landing"] #section4 .h-sticky{
    height: auto;
    min-height: auto;
  }
  body[data-page="landing"] #section4 .panel-grid{
    grid-template-columns: 1fr;
    width: 100%;
  }
  body[data-page="landing"] #section4 .scroll-hint{
    display: none;
  }

  /* Panel images on mobile */
  body[data-page="landing"] .panel-image{
    height: auto !important;
  }
  body[data-page="landing"] #section4 .h-track > .h-panel:nth-child(5) .panel-image{
    width: 100% !important;
  }

  /* Icons */
  body[data-page="landing"] .icon-gold{
    width: 44px;
    height: 44px;
  }

  /* How-card */
  body[data-page="landing"] .how-grid{
    grid-template-columns: 1fr;
  }
}

/* ── Extra-small mobile (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  body[data-page="landing"] .hero-title{
    font-size: clamp(26px, 8vw, 38px);
  }
  body[data-page="landing"] section{
    padding: 44px 12px 28px;
  }
  body[data-page="landing"] #section1{
    padding-top: 68px;
  }
  body[data-page="landing"] .hero-cta-row{
    gap: 8px;
  }
  body[data-page="landing"] .s5-window h2{
    font-size: 18px;
  }
  body[data-page="landing"] .footer-links{
    gap: 8px;
  }
  body[data-page="landing"] .footer-links a{
    font-size: 12px;
  }
  body[data-page="landing"] .hero-kicker{
    font-size: 11px;
  }
  body[data-page="landing"] .hero-tagline{
    font-size: 11px;
  }
}


/* ============================================================
   NEW: hero copy/CTA redesign, proof strip, cognitive-science
   note, interactive challenge demo, product intro, and the
   simplified "start free" section. Ported from the updated
   landing design (buttons/content/layout), scoped to this
   page's existing body[data-page="landing"] convention.
   ============================================================ */
body[data-page="landing"]{
  --cvx-gold: #e0b85b;
  --cvx-gold-soft: #f3d992;
  --cvx-line: rgba(224,184,91,.30);
}

/* Hero: clearer, restrained and non-overlapping */
body[data-page="landing"] #section1{ min-height: auto !important; padding: clamp(5.6rem,8vw,7.6rem) 0 clamp(3.2rem,6vw,5.2rem) !important; }
body[data-page="landing"] #section1 .hero-grid{ align-items: start !important; gap: calc(clamp(2rem,4.5vw,4.6rem) + 3px) !important; }
body[data-page="landing"] #section1 .hero-kicker{ color: var(--cvx-gold-soft) !important; text-transform: uppercase; letter-spacing: .13em; font-size: clamp(.72rem,1vw,.88rem) !important; line-height: 1.55 !important; margin: 0 0 1.5rem !important; max-width: none !important; }
body[data-page="landing"] #section1 .hero-title{ font-size: clamp(2.4rem,4.8vw,4.65rem) !important; line-height: 1.02 !important; margin: 0 0 1.85rem !important; max-width: none !important; }
body[data-page="landing"] .cvx-hero-support{ max-width: 60ch; margin: 0 0 2.1rem; color: #e7e9ef; font-size: clamp(1rem,1.35vw,1.2rem); line-height: 1.75; }
body[data-page="landing"] .cvx-hero-support strong{ color: var(--cvx-gold-soft); }
body[data-page="landing"] #section1 .hero-cta-row{ display: flex; flex-wrap: wrap; gap: 1.15rem; align-items: center; }
body[data-page="landing"] .cvx-button,
body[data-page="landing"] #section1 .cta{ display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .95rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 800; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
/* Base CTA fill for bare .cvx-button (outside #section1, which already has its
   own solid .cta treatment) — matches this page's existing primary-button
   look (same tint/border as the former .s5-cta). */
body[data-page="landing"] .cvx-button{ background: rgba(246,213,138,.16); border: 1px solid rgba(246,213,138,.36); color: #fff8e6; }
body[data-page="landing"] .cvx-button:hover{ background: rgba(246,213,138,.24); }
body[data-page="landing"] .cvx-button:hover,
body[data-page="landing"] #section1 .cta:hover{ transform: translateY(-2px); }
body[data-page="landing"] .cvx-button--secondary{ border: 1px solid rgba(246,213,138,.55); color: #fff8e6; background: rgba(255,255,255,.035); }
body[data-page="landing"] .cvx-button--secondary:hover{ background: rgba(246,213,138,.10); }
body[data-page="landing"] .cvx-hero-reassurance{ margin: 1.2rem 0 0; color: #bac1d0; font-size: .92rem; }
body[data-page="landing"] #section1 .hero-image{ border-radius: 0 !important; overflow: hidden; box-shadow: 0 22px 70px rgba(0,0,0,.28); transform: translateX(10px) !important; }
body[data-page="landing"] #section1 .hero-grid > div:last-child{ padding-left: 0 !important; }
body[data-page="landing"] #section1 .hero-image img{ display: block; width: 100%; height: auto; }

/* Proof strip (right under the hero) */
body[data-page="landing"] .cvx-proof-strip{ background: #080c16; border-top: 1px solid rgba(224,184,91,.16); border-bottom: 1px solid rgba(224,184,91,.16); display: flex; align-items: center; justify-content: center; padding: 0; }
body[data-page="landing"] .cvx-proof-grid{ width: min(1180px, calc(100% - 2rem)); margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
body[data-page="landing"] .cvx-proof-item{ padding: 1rem 1.1rem; border-right: 1px solid rgba(224,184,91,.14); }
body[data-page="landing"] .cvx-proof-item:last-child{ border-right: 0; }
body[data-page="landing"] .cvx-proof-item strong{ display: block; color: #f4d993; font-size: .92rem; margin-bottom: .2rem; }
body[data-page="landing"] .cvx-proof-item span{ display: block; color: #b8c0cf; font-size: .8rem; line-height: 1.4; }

/* Cognitive-science note within section 2 */
body[data-page="landing"] .cvx-cog-note{ margin: 1.5rem auto 0; max-width: 940px; padding: 1rem 1.15rem; border-left: 3px solid var(--cvx-gold); background: rgba(224,184,91,.07); border-radius: 0; text-align: left; }
body[data-page="landing"] .cvx-cog-note strong{ color: #1b2230; }
body[data-page="landing"] .cvx-cog-note p{ margin: .25rem 0 0 !important; font-size: 1rem !important; line-height: 1.65 !important; }

/* Participatory demonstration (#try-challenge) */
body[data-page="landing"] .cvx-demo{ padding: clamp(4.5rem,8vw,7rem) 0; background: linear-gradient(180deg,#070a12,#0d1321); color: #f5f6fa; display: block; }
body[data-page="landing"] .cvx-shell{ width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
body[data-page="landing"] .cvx-section-head{ max-width: 850px; margin: 0 auto 2.2rem; text-align: center; }
body[data-page="landing"] .cvx-eyebrow{ margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .15em; color: var(--cvx-gold); font-size: .78rem; font-weight: 800; }
body[data-page="landing"] .cvx-section-head h2,
body[data-page="landing"] .cvx-product-intro h2,
body[data-page="landing"] .cvx-start h2{ margin: 0 0 .9rem; font-size: clamp(2rem,4.3vw,3.7rem); line-height: 1.08; text-wrap: balance; }
body[data-page="landing"] .cvx-section-head > p:last-child,
body[data-page="landing"] .cvx-product-intro p,
body[data-page="landing"] .cvx-start-lede{ margin: 0 auto; max-width: 68ch; color: #c8ced9; font-size: clamp(1rem,1.25vw,1.15rem); line-height: 1.7; }
body[data-page="landing"] .cvx-demo-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; align-items: stretch; max-width: 1080px; margin: 0 auto; }
body[data-page="landing"] .cvx-code-card,
body[data-page="landing"] .cvx-diagnostic-card{ border: 1px solid var(--cvx-line); border-radius: 0; background: linear-gradient(180deg, rgba(20,27,45,.96), rgba(8,12,22,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.25); overflow: hidden; min-height: 620px; box-sizing: border-box; }
body[data-page="landing"] .cvx-windowbar{ display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .84rem; color: #d7dbe4; }
body[data-page="landing"] .cvx-code{ margin: 0; padding: 1.3rem 1.35rem; background: #050811; color: #f3d992; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(.9rem,1.25vw,1.05rem); line-height: 1.65; overflow: auto; min-height: 220px; box-sizing: border-box; white-space: pre; }
body[data-page="landing"] .cvx-question{ padding: 1.25rem; display: flex; flex-direction: column; }
body[data-page="landing"] .cvx-question h3{ margin: 0 0 1rem; }
body[data-page="landing"] .cvx-options{ display: grid; gap: .65rem; margin-bottom: 1rem; }
body[data-page="landing"] .cvx-option{ display: flex; gap: .65rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; }
body[data-page="landing"] .cvx-option:hover{ border-color: rgba(224,184,91,.48); }
body[data-page="landing"] .cvx-option input{ margin-top: .22rem; }
body[data-page="landing"] .cvx-question .cvx-button{ margin-top: auto; }
body[data-page="landing"] .cvx-diagnostic-card > a.cvx-button{ margin-top: auto; }
body[data-page="landing"] .cvx-feedback{ display: none; margin-top: 1rem; padding: 1rem; border-radius: 10px; line-height: 1.6; }
body[data-page="landing"] .cvx-feedback.is-visible{ display: block; }
body[data-page="landing"] .cvx-feedback.is-correct{ background: rgba(57,179,118,.12); border: 1px solid rgba(57,179,118,.42); }
body[data-page="landing"] .cvx-feedback.is-incorrect{ background: rgba(224,184,91,.10); border: 1px solid rgba(224,184,91,.38); }
body[data-page="landing"] .cvx-feedback strong{ display: block; margin-bottom: .3rem; }
body[data-page="landing"] .cvx-feedback a{ color: #f3d992; }
body[data-page="landing"] .cvx-diagnostic-card{ padding: 1.4rem; display: flex; flex-direction: column; }
body[data-page="landing"] .cvx-diagnostic-card h3{ font-size: clamp(1.5rem,2.5vw,2.1rem); line-height: 1.2; margin: .25rem 0 .8rem; }
body[data-page="landing"] .cvx-diagnostic-card > p{ color: #c6ccd7; line-height: 1.65; }
body[data-page="landing"] .cvx-diagnostic-list{ display: grid; gap: .7rem; margin: 1.2rem 0; }
body[data-page="landing"] .cvx-diagnostic-row{ display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .9rem; }
body[data-page="landing"] .cvx-diagnostic-row span:first-child{ color: #9ea7b8; }
body[data-page="landing"] .cvx-diagnostic-row span:last-child{ color: #f2d58f; font-weight: 700; text-align: right; }
body[data-page="landing"] .cvx-tabs{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 0 1.8rem; }
body[data-page="landing"] .cvx-tab{ padding: .62rem 1.15rem; border-radius: 999px; border: 1px solid rgba(224,184,91,.32); background: rgba(255,255,255,.03); color: #c9cfdb; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
body[data-page="landing"] .cvx-tab:hover{ border-color: rgba(224,184,91,.55); color: #f5f6fa; }
body[data-page="landing"] .cvx-tab.is-active{ background: rgba(224,184,91,.16); border-color: var(--cvx-gold); color: #f8e6b0; }
body[data-page="landing"] .cvx-tabpanel[hidden]{ display: none; }

/* Separate product intro before the coverflow */
body[data-page="landing"] .cvx-product-intro{ padding: clamp(4rem,7vw,6rem) 1rem 1.2rem; background: #040509; color: #f5f6fa; text-align: center; display: block; }
body[data-page="landing"] .cvx-product-intro p{ color: #c7ccd7; }

/* Compact conversion section */
body[data-page="landing"] .cvx-start{ padding: clamp(4.5rem,8vw,7rem) 0; background: radial-gradient(1400px 640px at -12% 10%, rgba(120,180,255,.16), rgba(120,180,255,0) 58%), radial-gradient(1200px 700px at 112% 0%, rgba(120,180,255,.14), rgba(120,180,255,0) 62%), linear-gradient(180deg, rgba(14,16,26,1) 0%, rgba(8,9,12,1) 100%); color: #f5f6fa; display: block; }
body[data-page="landing"] .cvx-start-grid{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 1.25rem; align-items: stretch; }
body[data-page="landing"] .cvx-start-card{ padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--cvx-line); border-radius: 0; background: rgba(255,255,255,.035); }
body[data-page="landing"] .cvx-start-card h3{ margin: .2rem 0 .8rem; font-size: 1.6rem; }
body[data-page="landing"] .cvx-start-list{ margin: 1rem 0 1.4rem; padding-left: 1.2rem; }
body[data-page="landing"] .cvx-start-list li{ margin: .55rem 0; line-height: 1.5; }
body[data-page="landing"] .cvx-start-actions{ display: flex; flex-wrap: wrap; gap: .75rem; }
body[data-page="landing"] .cvx-link-list{ display: grid; gap: .8rem; margin-top: 1.1rem; }
body[data-page="landing"] .cvx-link-list a{ display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.10); color: #f4d993; text-decoration: none; }
body[data-page="landing"] .cvx-link-list a:hover{ text-decoration: underline; }
body[data-page="landing"] .cvx-small{ color: #aeb6c5; font-size: .88rem; line-height: 1.55; }

@media (max-width: 900px) {
  body[data-page="landing"] .cvx-proof-grid{ grid-template-columns: repeat(2,1fr); }
  body[data-page="landing"] .cvx-proof-item:nth-child(2){ border-right: 0; }
  body[data-page="landing"] .cvx-proof-item:nth-child(-n+2){ border-bottom: 1px solid rgba(224,184,91,.14); }
  body[data-page="landing"] .cvx-demo-grid,
  body[data-page="landing"] .cvx-start-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body[data-page="landing"] #section1 .hero-title{ font-size: clamp(2.15rem,11vw,3.15rem) !important; max-width: none !important; }
  body[data-page="landing"] #section1 .hero-cta-row,
  body[data-page="landing"] .cvx-start-actions{ align-items: stretch; flex-direction: column; }
  body[data-page="landing"] #section1 .cta,
  body[data-page="landing"] .cvx-button{ width: 100%; }
  body[data-page="landing"] .cvx-proof-grid{ grid-template-columns: 1fr; }
  body[data-page="landing"] .cvx-proof-item{ border-right: 0; border-bottom: 1px solid rgba(224,184,91,.14) !important; }
  body[data-page="landing"] .cvx-proof-item:last-child{ border-bottom: 0 !important; }
  body[data-page="landing"] .cvx-diagnostic-row{ flex-direction: column; gap: .2rem; }
  body[data-page="landing"] .cvx-diagnostic-row span:last-child{ text-align: left; }
  body[data-page="landing"] .cvx-tabs{ gap: .45rem; }
  body[data-page="landing"] .cvx-tab{ padding: .5rem .85rem; font-size: .82rem; }
  body[data-page="landing"] .cvx-code-card,
  body[data-page="landing"] .cvx-diagnostic-card{ min-height: 0; }
}

/* Anchor-jump target (hero "Try a 90-second challenge" CTA) — without this,
   the fixed topbar covers the section heading after the scroll. */
body[data-page="landing"] #try-challenge{ scroll-margin-top: 96px; }