/* =====================================================================
   GLOBAL LAYOUT & COMPONENTS (No absolute positioning)
   ===================================================================== */
/* -----------------------------
  FORCE SHOW CONTENT ON LOAD
  This override ensures the page doesn't hide content while waiting for
  JS. It disables the global page fade and reveal transforms so users
  see content immediately on initial load.
  Remove this block to restore original reveal behaviors.
  ----------------------------- */
html, html.page-ready { opacity: 1 !important; transition: none !important; }
html:not(.page-ready) .hero-copy > *,
html:not(.page-ready) .lock-stack,
html:not(.page-ready) .flag-badges,
.hero-copy > *,
.lock-stack,
.flag-badges,
.hero-section,
.features-section,
.testimonial-section,
.problems-section,
.sovereign-card,
.feature-card,
.problem-card,
[data-reveal],
.reveal { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; }
body{
  overflow-x: hidden;
}
/* disable keyframe/animated visuals that run on load */
.plane { animation: none !important; }

/* Enforce minimum design width (ultra-small legacy devices) */
main{
      overflow: hidden;
    padding: 15px;
}

/* (Removed header/navigation styles pruned) */

/* Buttons */
.btn {
  --btn-bg: var(--color-surface);
  --btn-color: var(--color-text);
  --btn-radius: var(--radius-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-size:.9rem;
  font-weight:500;
  padding:.95rem 1.25rem;
  line-height:1;
  border-radius:var(--btn-radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  text-align:center;
}

.btn--primary { 
display: inline-block;
justify-content: center;
align-items: center;
padding: 16px 24px;
background: #FF7146;
border-radius: 12px;
 }
.btn--primary:hover { filter:brightness(1.06); }
.btn--ghost { --btn-bg:rgba(var(--color-accent-rgb),.12); --btn-color:var(--color-accent); border-color:rgba(var(--color-accent-rgb),.4); }
.btn--ghost:hover { background:rgba(var(--color-accent-rgb),.2); }
.btn:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }

/* =====================================================================
   HERO (LOCK MASK VISUAL)
   ===================================================================== */
.hero { padding-block:clamp(2.5rem,6vw,4rem); position:relative; }

.hero-lock {
  display:grid;
  gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(340px,520px) 1fr;
  align-items:center;
  background:var(--color-surface);
  border-radius:32px;
  min-height:clamp(400px,34vw,482px);
  position: relative;
  margin-top: 47px;
}

/* Fixed height on large screens (content adapts inside) */
@media (min-width:1100px) {
  .hero { height:482px; padding-block:0; display:flex; align-items:center; }
  .visual-cluster { overflow: hidden;height:100%; display:flex; flex-direction:column; justify-content: space-between;}
  /* lock-mask no longer forced to 100% height; it scales via width + aspect-ratio */
  .lock-bg { object-fit:cover; height:100%; width:100%; }
}
@media (max-width:1024px) {
.learn-book .book-visual{
  justify-content: center;
}
}

@media (min-width:769px) and (max-width:1024px) { .hero-lock { grid-template-columns:1fr; }}
/* (merged into unified <=768 block) */

.hero-copy { display:flex; flex-direction:column; gap:18px; 
    margin-left: 30px;}
.hero-copy h1 { font-family:var(--font-display); font-size:60px; line-height:.95; text-transform:uppercase; letter-spacing:.5px;  }
@media (max-width:1100px){ .hero-copy h1 { font-size:clamp(42px,6vw,56px); } }
/* Hero mid-range scaling (desktop down to just above mobile) */
@media (min-width:769px) and (max-width:1100px)
{ .hero-copy h1 { font-size:clamp(42px,6vw,56px); } }
.hero-copy .accent { color:var(--color-accent); position:relative; display:inline-block;     margin-bottom: 6px;}
.hero-copy .lead { color:var(--color-text-dim); max-width:42ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }

/* Visual cluster */
.visual-cluster { display:grid; justify-items:center; align-items:center; position:relative; }
.lock-mask {
    --lock-w: clamp(320px, 40vw, 760px);
  aspect-ratio: 243 / 347;
  width: 323px;
  height: 100%;
    max-width: var(--lock-w);
    display: grid;
    place-items: center;
    clip-path: url(#lockClip);
    background: var(--color-surface);
    position: relative;
    border-radius: 32px;
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .55);
    transition: width .5s ease;
  }

/* Desktop explicit size request: width 382px height 562px */
@media (min-width:1100px) {
  .lock-mask.size-desktop-fixed {
    --lock-w: 382px;
    max-width:382px;
    width:382px;
    /* Instead of changing aspect-ratio (which would auto set height ~561.4), force exact height */
    aspect-ratio: auto;
    height:562px;
  }
  /* Ensure background and plane scale nicely inside forced box */
  .lock-mask.size-desktop-fixed .lock-bg { object-fit:cover; width:100%; height:100%; }
}
.lock-bg { width:100%; height:100%; object-fit:cover; filter:saturate(115%) contrast(1.05); }
/* Plane now lives outside clipping in .hero-plane-layer */
.plane { width:78%; max-width:640px; object-fit:contain; transform:translateX(18%) translateY(2%) scale(.9); animation:planeEnter 4.5s cubic-bezier(.65,.05,.36,1) .2s both; pointer-events:none; }

/* Layer that holds plane above hero visuals without being clipped vertically */
.hero-plane-layer { 
      position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    pointer-events: none;
}
.hero-plane-layer .plane { position:absolute; right:-5%; top:50%; transform:translateY(-50%) scale(.9); }

@keyframes planeEnter {
  0%   { transform:translateX(160%) translateY(2%); opacity:0; }
  55%  { opacity:1; }
  70%  { transform:translateX(25%) translateY(2%); }
  100% { transform:translateX(18%) translateY(2%); }
}

/* Flag badges */
.flag-badges { position:absolute; top: 42px; left:50%; transform:translateX(-50%); display:flex; gap:clamp(.75rem,1.8vw,1.5rem); justify-content:center; width:auto; max-width:none; margin:0; }
.flag-badge { list-style:none; }
.flag-ring { --size:66px; width:var(--size); height:var(--size); display:grid; place-items:center; background:#000; border:5px solid #1E1E1E; backdrop-filter:blur(13.28px); -webkit-backdrop-filter:blur(13.28px); border-radius:155px; }
.flag-ring img { width:58%; height:auto; display:block; }

/* Flag ring size variants */
.flag-badges .flag-badge:nth-child(1) .flag-ring { --size:66.4px;   }
.flag-badges .flag-badge:nth-child(2) .flag-ring { --size:92.96px; }
.flag-badges .flag-badge:nth-child(3) .flag-ring { --size:70.38px; }

.flag-badges .flag-badge:nth-child(1) {    
    position: relative;
    bottom: 15px;
    left: 203px;
  }

.flag-badges .flag-badge:nth-child(3) {
    position: relative;
    right: 76px;
    top: 78px;
}

/* Motion reduction */
@media (prefers-reduced-motion:reduce) { .plane { animation:none; } }
/* (flag-badges narrow tweak merged) */

/* =====================================================================
   LEARN SECTION
   ===================================================================== */
  .learn .container{
    padding: 0;
  }
  .learn-book{
    height: 100%;
  }
  .learn .section-title{
    padding-left: 60px;
  }
.learn { padding-block:70px; background-blend-mode:overlay; }
/* (learn padding merged into unified block) */
.section-title { font-family:var(--font-display);     font-size: 50px;
 text-transform:uppercase; letter-spacing:.5px;    margin-bottom: 1rem;
    }
.learn-layout { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); align-items:start; }
.learn-book .book-visual { display:grid;     place-items: start; border-radius:var(--radius-xl);   overflow:hidden; }
.learn-book img { width: 100%;}
.learn-cards { display:grid; gap:0.6rem; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.info-card { background:var(--color-surface); padding:1.25rem 1.1rem 1.4rem; border-radius:24px; display:flex; flex-direction:column; gap:1rem; min-height:165px; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.icon-circle { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#000; color:var(--color-accent); font-size:1.25rem; border:3px solid var(--color-surface-alt); }
.info-card h3 { font:400 .9rem/1.3 var(--font-body); letter-spacing:.25px; }

/* =====================================================================
   STORIES
   ===================================================================== */
.stories { padding-block:64px 40px; }
@media (min-width:769px) and (max-width:900px){ .stories { padding-block:56px 36px; } }
.eyebrow { font-family:var(--font-display); font-size:1.1rem; color:var(--color-accent); letter-spacing:.5px; text-transform:uppercase; margin-bottom:.75rem; }
/* (Removed legacy stories-grid & story-cta styles) */
.testimonial { background:var(--color-surface); padding:37px 44px; border-radius:32px; display:flex; flex-direction:column; gap:4.8rem; height:297px; }
.testimonial-text { font-size:1rem; line-height:1.32; max-width:40ch; margin-bottom: 20px;}
.testimonial-footer .name { font-family:var(--font-display); font-size:1.5rem; letter-spacing:.5px; display:block; margin-bottom:.35rem; }
.testimonial-footer .date { font-size:17px; color:var(--color-text-dim); }
.stories-nav { display:flex; gap:1rem; align-items:center; }
.circle-btn { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--color-text); background:transparent; color:var(--color-text); font-size:1.25rem; }
.circle-btn.next { background:var(--color-text); color:var(--color-bg); border-color:var(--color-text); }
.circle-btn:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.stories-left{
  padding-left: 30px;
}
.stories .section-title{
      padding-right: 81px;
      margin: 0 0 10px;
}

/* STORIES: two-column layout (left content / right slider) */
.stories-layout { display:grid; gap:3rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); align-items:start; }
@media (min-width:960px){
  .stories-layout {         grid-template-columns: 44% 1fr; }
}
.stories-left .lead { margin:1rem 0 1.75rem; max-width:40ch; color:var(--color-text-dim); }
.stories-right { position:relative; }
.stories-slider { position:relative; background:transparent; border-radius:32px; padding: 13px 21px; overflow:hidden; }
/* Track now has generous gap; extra horizontal padding handled by slider */
.slides-track { display:flex; gap:0.75rem; transition:transform .7s cubic-bezier(.22,1,.36,1); will-change:transform; padding:0 .25rem; }
/* Individual slide card surface */
.testimonial { position:relative; flex:0 0 clamp(320px,42vw,432px); opacity:1; transform:translateZ(0); background:var(--color-surface); padding:2.15rem 2rem 2rem; border-radius:28px; box-shadow:0 4px 16px -4px rgba(0,0,0,.5), 0 2px 4px -1px rgba(0,0,0,.4); outline:1px solid rgba(255,255,255,.06); transition:box-shadow .5s ease, transform .55s cubic-bezier(.22,1,.36,1), background .4s; }
.testimonial[aria-hidden="true"] { opacity:1; filter:none; }
.testimonial.active { opacity:1 !important; filter:none; }
/* Active slide visual spacing (peek gap) */
.slides-track .testimonial { margin-right:0; }

.testimonial::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 0 4px rgba(255,255,255,0); transition:box-shadow .55s ease; }
/* Active (centered) card emphasis */


/* Hover subtle lift (non-active) */
@media (hover:hover){
  .testimonial:not(.active):hover { transform:translateY(-4px); box-shadow:0 10px 34px -10px rgba(0,0,0,.65), 0 2px 10px -2px rgba(0,0,0,.5); }
}
/* (slider mobile behavior merged) */
/* Scroll-snap optional */
.stories-slider[data-snap="on"] .slides-track { scroll-snap-type:x mandatory; overflow-x:auto; }
.stories-slider[data-snap="on"] .testimonial { scroll-snap-align:start; }

/* (Removed obsolete absolute-positioned .stories-nav block) */
.stories-nav .circle-btn { width:50px; height:50px; font-size:1.05rem; }
/* remove old grid hiding rules if still present */
/* (Removed obsolete grid hiding rule) */
/* =====================================================================
   NOT FOR EVERYONE
   ===================================================================== */
.not-for-everyone { padding-block:140px 40px; }
@media (min-width:769px) and (max-width:1024px){ .not-for-everyone { padding-block:120px 40px; } }
@media (min-width:769px) and (max-width:900px){ .not-for-everyone { padding-block:90px 36px; } }
.nf-grid { 
    background: var(--color-surface);
    border-radius: 32px;
    padding: 27px 21px 27px 60px;
    display: grid;
    height: auto;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    align-items: center;
    justify-content: space-between;
}
.nf-text p { color:var(--color-text-dim); max-width:38ch; margin:0 0 20px; font-size:1rem; }
.nf-media { display:flex; justify-content:flex-end; }
.nf-media img { border-radius:24px; box-shadow:0 4px 16px -2px rgba(0,0,0,.4); margin-left:auto; }
.not-for-everyone .section-title{
  font-size: 60px;
}
/* =====================================================================
   GUIDE
   ===================================================================== */

/* 3-column guide layout: photo | text | decorative art */
.guide-grid { background:var(--color-accent) radial-gradient(circle at 85% 50%, rgba(255,255,255,.6), transparent 60%); color:#000;
  border-radius:32px; padding:27px 36px; display:grid; gap:1.5rem; grid-template-columns: minmax(220px,320px) minmax(300px,480px) 1fr; align-items:center; overflow:hidden; }
@media (max-width:980px){ .guide-grid { gap:1.25rem; padding:24px 30px; } }
/* (guide <=600 padding merged) */
.guide-photo img { border-radius:24px; box-shadow:0 12px 40px -8px rgba(0,0,0,.55); }
.guide-text .section-title {     color: #000;
    margin-bottom: 1rem;
    font-size: 61px;}
.guide-text p { color:#000; font-size:1rem; max-width:40ch; }
/* Guide decorative plane */
.guide-grid { position:relative; }
.guide-art { 
      display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -18px;
    top: -9px;
 }
.guide-art-circle {     width: 550px;
    height: 419px; border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.guide-plane { width:58%; height:auto; filter:drop-shadow(0 8px 28px rgba(0,0,0,.35)); }
@media (max-width:1100px){
  .guide-grid { grid-template-columns: minmax(220px,320px) 1fr; }
  .guide-art { grid-column: 1 / -1; }
  .guide-art-circle { margin:0 auto; width:360px; height:360px; opacity:.35; }
}
@media (min-width:769px) and (max-width:980px){
  .guide-grid { grid-template-columns:1fr; padding:24px 28px; }
  .guide-art-circle { width:300px; height:300px; margin:1rem auto 0; opacity:.4; }
}

/* (Footer removed) */

/* =====================================================================
   UTILITIES
   ===================================================================== */
.lead { font-size:1.05rem; }

/* =====================================================================
   RESPONSIVE TWEAKS
   ===================================================================== */
@media (max-width:900px) {
  .flag-bubbles { display:none; }
  .hero-image-shape { clip-path:circle(45% at 50% 50%); }
}

/* (general <=680 adjustments merged) */

/* Ultra-mobile hero layout (design spec ~345px frame) */
/* (ultra-mobile <=420 block merged) */

/* Mobile global scaling up to 768px */
/* (scaling 421-768 merged) */

/* Motion: generic reduction */
@media (prefers-reduced-motion: reduce) { .btn { transition:none; } }

.lock-stack { position:relative; display:inline-block;  height: 100%;}
.lock-stack .lock-mask { 
      position: relative;
    left: 71px;
    top: -0;}
/* Removed old .lock-stack .plane rules (plane moved outside) */

/* Entrance animation initial states */
html:not(.page-ready) .hero-copy > * { opacity:0; transform:translateY(24px); }
html:not(.page-ready) .lock-stack { opacity:0; transform:scale(.9); }
html:not(.page-ready) .flag-badges { opacity:0; transform:translateY(20px); }

/* Transitions when page becomes ready */
.page-ready .hero-copy > * { opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.page-ready .hero-copy > *:nth-child(1){ transition-delay:.02s; }
.page-ready .hero-copy > *:nth-child(2){ transition-delay:.12s; }
.page-ready .hero-copy > *:nth-child(3){ transition-delay:.22s; }
.page-ready .hero-copy > *:nth-child(4){ transition-delay:.34s; }
.page-ready .lock-stack { opacity:1; transform:scale(1); transition:opacity .9s ease .25s, transform 1s cubic-bezier(.16,.84,.22,1) .25s; }
.page-ready .flag-badges { opacity:1; transform:translateY(0); transition:opacity .6s ease .55s, transform .7s cubic-bezier(.22,1,.36,1) .55s; }

/* Reduced motion: show instantly */
@media (prefers-reduced-motion:reduce){
  html:not(.page-ready) .hero-copy > *,
  html:not(.page-ready) .lock-stack,
  html:not(.page-ready) .flag-badges { opacity:1; transform:none; }
  .page-ready .hero-copy > *,
  .page-ready .lock-stack,
  .page-ready .flag-badges { transition:none !important; }
}

/* =====================================================================
   GLOBAL PAGE FADE & SCROLL REVEAL
   ===================================================================== */
html { opacity:0; transition:opacity .7s ease; }
html.page-ready { opacity:1; }

[data-reveal] { opacity:0; transform:translateY(32px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
[data-reveal][data-reveal="fade-up"] { transform:translateY(40px); }
[data-reveal][data-reveal-delay="sm"] { transition-delay:.15s; }
[data-reveal][data-reveal-delay="md"] { transition-delay:.3s; }
[data-reveal][data-reveal-delay="lg"] { transition-delay:.45s; }
.reveal-in { opacity:1 !important; transform:translateY(0) !important; }

@media (prefers-reduced-motion:reduce){
  html { opacity:1 !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
}

.hero-logo { display:inline-flex; align-items:center; margin-bottom:.65rem; margin-top: 50px;}
.hero-logo img { height:40px; width:auto; display:block;  }

/* Sticky mobile CTA base (hidden by default; shown in mobile block) */
.sticky-cta { display:none; }

/* =====================================================================
   UNIFIED MOBILE (320px – 768px)
   All responsive adjustments consolidated here. Sub-breakpoints handled
   with nested queries for clarity but only one top-level range.
   ===================================================================== */
@media (max-width:768px){

  :root { --index: calc(100vw + 1vh); }
  /* HERO */

  /* Mobile hero: remove extra vertical whitespace but keep enough top padding so badges & plane don't overlap heading */
  .hero { padding-block:20px 0; }
  
  .hero-lock { grid-template-columns:1fr; min-height:auto; margin-top: 0;}
  .hero-copy { margin-left:0; text-align: center;}
  .hero-copy .accent{
    font-size: 45px;
  }
  .learn .section-title,.stories-left{
    text-align: center;
  }
  .stories .section-title{width: 100%!important;}
  /* Hero heading: fixed 47px until viewport >380px, then grow fluidly */
  .hero-copy h1 {
    /* 47px fixed until ~380px then linear up to 69px near 768px */
    font-size: clamp(44px, calc(5.67vw + 23.45px), 69px);
        /* Dynamic line-height based on viewport (using --index) instead of fixed 45px */
        line-height: clamp(44px, calc(var(--index) * 0.12), 56px);
    width:100%;
  }
  .stories-nav{
    justify-content: center!important;
  }
  .nf-text {
    text-align: center;
  }
  .hero-copy{
    gap: 17px;
  }
  .btn {
    font-size: 14px;
    margin: 0 auto;
  }
  .lock-stack .lock-mask{
    left: 0;
    top: 0;
    margin-inline:auto;
  }
  .hero-copy .lead { font-size:clamp(14px, calc(var(--index) * 0.024), 18px); }
  .hero-logo img{
    height: 35px;
  }
  .hero-copy .lead{
    width: 100%;
  }
  .hero-logo{
    margin-top: 0;
  }
  /* Center badge cluster above mask; individual offsets reduced for better small-screen fit */
  .flag-badges { top:10px; left:37%; transform:translateX(-50%); }
  .flag-badges .flag-badge:nth-child(1) {         bottom: 48px;
        left: 185px;}
  .flag-badges .flag-badge:nth-child(2) { position:relative; top:0; }
  .flag-badges .flag-badge:nth-child(3) {         top: 64px;
        right: 60px; }
  /* Hide desktop plane container on mobile */
  .hero-plane-layer { display:none; }
  /* Dedicated mobile plane styling when inside flex (.lock-stack) */
  @keyframes planeEnterMobile {
    0% { transform:translateX(120%) translateY(8%) scale(1.8); opacity:0; }
    55% { opacity:1; }
    100% { transform:translateX(0) translateY(8%) scale(1); opacity:1; }
  }
  .lock-stack { left:0; }
  /* Ensure full lock shape not cropped on narrow screens */
  /* Prevent top cropping: let container breathe & allow full mask */
  .hero-lock { overflow:visible; padding-top:18px; }
  .lock-stack { width:100%; display:flex; justify-content:center; position:relative; }
  .lock-stack .lock-mask {
    /* Fluid scaling: width grows with viewport, maintaining aspect; target avg height ~400px around mid-range */
    --mask-w: clamp(200px, 52vw, 320px);
    --mask-aspect: 243/347; /* width / height ratio */
    width: var(--mask-w);
    aspect-ratio: var(--mask-aspect);
    height: auto; /* derived */
    display:block;
    margin:4px auto 0;
  }
  .lock-stack .lock-bg { object-fit:cover; width:100%; height:100%; }
  .lock-stack { width:100%; display:flex; justify-content:center; }

  /* Ultra-narrow: 320-399px — align photo content to left inside mask */
  @media (max-width:399px){
    .lock-stack .lock-bg { object-position:left center; }
    .lock-stack .lock-mask { margin-left:0; }
        .lock-stack .plane-mobile {
        display: block;
        position: absolute;
        top: 29%;
        right: -84px;
        }
  }

  /* Base mobile plane visible already from 320px */
  .lock-stack .plane-mobile {
    display:block;
    position:absolute;
    top:35%;
    right:0;
    width:clamp(120px, calc(var(--mask-w) * .5), 260px);
    height:auto;
    transform:translateY(-50%) translateX(6%) scale(.9);
    z-index:3;
    animation:planeEnterMobile 1.8s cubic-bezier(.65,.05,.36,1) .15s both;
    pointer-events:none;
  }
  /* From 400px widen mask/plane relationship and adjust offsets */
  @media (min-width:400px){
    .lock-stack { justify-content:space-between; gap:8px; }
    .lock-stack .plane-mobile {
      width:clamp(160px, calc(var(--mask-w) * .58), 320px);
      transform:translateX(8%) translateY(-50%) scale(1);
    }
    .lock-stack .lock-mask { margin:4px 0 0 0; left:0; transform:none; }
    .flag-badges { top:8px; left:20%; transform:translateX(-50%); }
    .flag-badges .flag-badge:nth-child(3) { top:64px; right:60px; }
 /* ensure desktop plane hidden */
 .hero-plane-layer { display:none; }
 .nf-media{
  margin: 0 auto
 }
     /* Mobile slider nav: left-aligned, inline after track */
     .stories-nav {
       position:relative !important;
       top:auto !important;
       left:0 !important;
       height:auto;
       margin:14px 0 0 0;
       padding-left:12px;
       display:flex;
       gap:.65rem;
       justify-content:flex-start;
       transform:none !important;
       width:100%;
       z-index:8;
       pointer-events:auto;
     }
     .stories-nav .circle-btn { pointer-events:auto; }
     .learn-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

  }
  .plane-mobile { display:none; }

  /* LEARN */
  .learn {         padding-block: clamp(118px, 10vw, 60px);}
  .learn .section-title {padding-left: 11px;
        font-size: clamp(44px, calc(var(--index) * 0.06), 54px);    margin-bottom: 1.6rem; }
  .info-card h3 { font-size:clamp(.78rem, calc(var(--index) * 0.018), .95rem); }
.learn-book img {
    width: 100%;
    height: 380px;
}
.learn-layout {
    gap: 0.6rem;
}

.info-card {
      gap: 0;
    height: 76px;
    min-height: 100%;
    display:grid;
    grid-template-columns:58px 1fr; /* first column fixed, rest flexible */
    align-items:center;
            padding: 11px 13px;
}
.info-card h3 {
font-size: clamp(14px, calc(var(--index) * 0.018), .95rem);
}
.info-card .icon-circle { width:50px; height:50px; min-width:50px; }
.info-card h3 { margin:0; }


  /* STORIES */

  .stories { padding-block:0; }
  .stories-left { padding-left:10px; }
  .stories .container { padding: 0 ;margin-top: 40px; }
  .container {
    width: 100%!important;
    margin-inline: auto;
}
  .stories .section-title { padding-right:0;        width: 68%; font-size:clamp(44px, calc(var(--index) * 0.058), 52px); }
  .stories-slider{    overflow: initial;}
  .stories-slider { padding:0; }
  .slides-track { scroll-snap-type:x mandatory; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 0 4px; }
  .slides-track { gap:0; }
  /* Peek layout: each slide 80% viewport so 20% of next is visible */
  .slides-track .testimonial { flex:0 0 80%; }
  .slides-track::-webkit-scrollbar { display:none; }
  .slides-track .testimonial { scroll-snap-align:start; padding:22px 22px 24px; gap:2.2rem; }
.stories-nav .circle-btn{
  width: 40px;
  height: 40px;
}

.stories-nav {
  position:relative; /* keep inside flow below slider */
  margin:14px 0 0 0;
  display:flex;
  justify-content:flex-start;
  width:auto;
  max-width:none;
  transform:none;
  top:auto; left:auto; right:auto; bottom:auto;
  z-index:10; /* ensure above slides */
  animation:none; /* remove plane animation reuse */
}
/* Ensure nav buttons larger tappable area */
.stories-nav .circle-btn { position:relative; z-index:11; }
  .nf-grid { grid-template-columns:1fr; padding:27px 24px; height:auto; }

  /* GUIDE */
  .guide-grid {
    grid-template-columns:1fr;
    padding:24px 24px;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
  }
  .guide-text .section-title {         font-size: clamp(44px, calc(var(--index) * 0.06), 60px);
        margin-top: 11px;
        width: 92%;
        margin-bottom: 4px; }
  .guide-art-circle { width:300px; height:300px; margin:1rem auto 0; opacity:.4; }
  .guide-art{
    display: none;
  }
.guide-text p{
margin-top: 10px;
}

  /* STICKY CTA (mobile only) */
  .sticky-cta { position:sticky; bottom:0; left:0; width:100%; display:flex; justify-content:center; padding:10px 14px calc(env(safe-area-inset-bottom,0) + 10px); background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.6), rgba(0,0,0,.1)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:60; }
  .sticky-cta .btn { flex:1; max-width:480px; font-size:15px; padding:18px 20px; }

  /* NOTE: Ultra-small (<=420px) special layout removed to comply with single media requirement.
     If needed, consider re-introducing via progressive enhancement later. */
}

  @media (min-width:768px) and (max-width:1024px){
body{
  padding: 15px;
}
.visual-cluster,.plane-mobile{
  display: none;;
}
.testimonial{
      flex: 0 0 clamp(320px, 36vw, 432px);
}
.stories-slider{
  padding: 0;
}
.stories-nav {
  position: relative;
    top: 20px;
}
    .lock-stack .lock-mask {
        left: -20%;
    top: 0;
    }
    .plane-mobile{
      display: none;
    }
   .hero-plane-layer .plane {
      transform:translateY(-50%) translateX(18%) scale(1);
      opacity: .8;
      z-index: 1;
    }
    
    .hero-copy{
      z-index: 9; 
    }
    .hero-plane-layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
.learn-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(50%, 100%), 1fr));
}
.nf-grid{
  height: auto;
}
.nf-media {
    justify-content: center;
    margin: 0 auto;
}
    .guide-grid {
        grid-template-columns: minmax(220px, 320px) 1fr;
    }

    .guide-art{
      opacity: 0.2;
    }
  }
  

  @media (min-width:1024px) and (max-width:1340px){
.lock-mask {
    height: 461px;
    left: 0px!important;
    top: 0!important;
}
.hero-plane-layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}
  }


    @media (min-width:1024px) {
.plane-mobile{
  display: none;
}
    }