:root{
    --ink:#12151c;
    --ink-soft:#1b1f28;
    --paper:#eef1f5;
    --paper-dim:#e2e6ec;
    --line:#c7ccd4;
    --line-dark:rgba(238,241,245,0.16);
    --teal:#1fa79f;
    --teal-dark:#146b66;
    --amber:#f2a93b;
    --red:#e0483f;
    --ink-text:#12151c;
    --paper-text:#eef1f5;
    --muted:#8890a0;
    --display:'Big Shoulders Display',sans-serif;
    --body:'IBM Plex Sans',sans-serif;
    --mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink-text);
    font-family:var(--body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}

  /* focus visibility */
  a:focus-visible,button:focus-visible,summary:focus-visible,.module-card:focus-visible{
    outline:2px solid var(--teal);outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(18,21,28,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-dark);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;color:var(--paper-text);}
  .logo{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;}
  .logo .dot{width:8px;height:8px;background:var(--teal);border-radius:50%;flex:none;}
  .navlinks{display:flex;gap:28px;font-size:14px;color:#b7bcc8;}
  .navlinks a{transition:color .2s;}
  .navlinks a:hover{color:var(--paper-text);}
  .nav-cta{
    font-family:var(--mono);font-size:13px;font-weight:600;
    background:var(--teal);color:var(--ink);
    padding:9px 16px;border-radius:2px;
    border:1px solid var(--teal);
  }
  .nav-cta:hover{background:transparent;color:var(--teal);}
  @media(max-width:760px){.navlinks{display:none;}}

  /* ---------- hero ---------- */
  .hero{
    background:var(--ink);color:var(--paper-text);
    padding:88px 0 96px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line-dark);
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(var(--line-dark) 1px,transparent 1px),
      linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(circle at 20% 20%, black, transparent 65%);
    opacity:.5;
  }
  .hero-inner{position:relative;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
  @media(max-width:900px){.hero-inner{grid-template-columns:1fr;}}
  .eyebrow{
    font-family:var(--mono);font-size:13px;color:var(--teal);
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--teal);}
  h1{
    font-family:var(--display);font-weight:900;
    font-size:clamp(40px,6vw,64px);line-height:0.98;letter-spacing:-.01em;
    text-transform:uppercase;margin-bottom:22px;
  }
  h1 em{font-style:normal;color:var(--teal);}
  .hero p.sub{font-size:17px;color:#c3c8d2;max-width:520px;margin-bottom:30px;}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
  .badge{
    font-family:var(--mono);font-size:12px;color:#d7dbe2;
    border:1px solid var(--line-dark);padding:7px 12px;border-radius:2px;
    display:flex;align-items:center;gap:7px;
  }
  .badge::before{content:"";width:6px;height:6px;background:var(--teal);border-radius:50%;}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    font-family:var(--mono);font-size:14px;font-weight:600;
    padding:14px 24px;border-radius:2px;border:1px solid transparent;
    display:inline-flex;align-items:center;gap:8px;transition:all .2s;
    cursor:pointer;
  }
  .btn-primary{background:var(--teal);color:var(--ink);}
  .btn-primary:hover{background:var(--teal-dark);}
  .btn-ghost{border-color:var(--line-dark);color:var(--paper-text);}
  .btn-ghost:hover{border-color:var(--paper-text);}

  /* hero ticket visual */
  .ticket{
    background:var(--paper);color:var(--ink-text);
    border-radius:3px;padding:26px 24px 22px;
    font-family:var(--mono);font-size:13px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
    position:relative;
  }
  .ticket::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;
    background:
      radial-gradient(circle at 8px 0, transparent 8px, var(--paper) 9px) repeat-x;
    background-size:16px 16px;
    transform:translateY(100%);
  }
  .ticket-head{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:12px;margin-bottom:12px;}
  .ticket-head strong{font-family:var(--display);font-size:20px;text-transform:uppercase;}
  .ticket-row{display:flex;justify-content:space-between;padding:6px 0;color:#3a3f4a;}
  .ticket-row span:last-child{color:var(--ink-text);font-weight:600;}
  .ticket-total{display:flex;justify-content:space-between;border-top:1px dashed var(--line);margin-top:10px;padding-top:12px;font-weight:700;}
  .ticket-total span:last-child{color:var(--teal-dark);}
  .barcode{display:flex;gap:2px;margin-top:18px;height:34px;align-items:flex-end;}
  .barcode i{background:var(--ink);flex:none;display:block;}

  /* ---------- section shell ---------- */
  section{padding:88px 0;}
  .perforation{
    height:1px;background-image:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
  }
  .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:10px;}
  .h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,42px);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:14px;}
  .lede{color:#4a5063;max-width:600px;font-size:16px;}

  /* ---------- visual proof ---------- */
  .proof-tabs{display:flex;gap:8px;margin:34px 0 0;}
  .tab{font-family:var(--mono);font-size:12px;padding:9px 16px;border:1px solid var(--line);border-bottom:none;border-radius:3px 3px 0 0;background:var(--paper-dim);color:#5b6172;}
  .tab.active{background:var(--ink);color:var(--paper-text);border-color:var(--ink);}
  .screen{
    border:1px solid var(--line);border-radius:0 4px 4px 4px;
    background:#fff;padding:28px;min-height:280px;
  }
  .screen-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--paper-dim);font-size:13px;align-items:center;}
  .screen-row.head{color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
  .pill{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:20px;display:inline-block;}
  .pill.ok{background:#dff5f0;color:var(--teal-dark);}
  .pill.warn{background:#fdeecb;color:#9a6a10;}

  /* ---------- pain / features grid ---------- */
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:40px;border:1px solid var(--line);}
  @media(max-width:900px){.grid4{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.grid4{grid-template-columns:1fr;}}
  .cell{background:var(--paper);padding:28px 22px;}
  .cell .num{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:14px;}
  .cell .before{font-size:13px;color:#9a3f39;text-decoration:line-through;text-decoration-color:#c98a86;margin-bottom:6px;}
  .cell .after{font-size:15px;font-weight:600;}

  /* ---------- module cards ---------- */
  .modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;}
  .modules-grid .module-card:nth-child(4){grid-column:2;}
  @media(max-width:900px){
    .modules-grid{grid-template-columns:1fr 1fr;}
    .modules-grid .module-card:nth-child(4){grid-column:auto;}
  }
  @media(max-width:560px){
    .modules-grid{
      display:flex;grid-template-columns:none;
      overflow-x:auto;scroll-snap-type:x mandatory;
      gap:14px;padding-bottom:14px;margin:32px -20px 0;padding-left:20px;padding-right:20px;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
    }
    .modules-grid .module-card{flex:0 0 80%;scroll-snap-align:start;}
    .modules-grid .module-card:nth-child(4){grid-column:auto;}
  }
  .swipe-hint{
    display:none;font-family:var(--mono);font-size:11px;color:var(--muted);
    margin-top:10px;text-align:center;
  }
  @media(max-width:560px){.swipe-hint{display:block;}}
  .module-card{
    background:#fff;border:1px solid var(--line);border-radius:4px;
    padding:26px 22px 22px;display:flex;flex-direction:column;
    position:relative;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;
  }
  .module-card:hover{
    border-color:var(--teal);
    box-shadow:0 16px 30px -20px rgba(18,21,28,0.35);
    transform:translateY(-2px);
  }
  stripe-buy-button{
    display:block;width:100%;max-width:100%;
  }
  .module-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);}
  .module-tag{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
  .module-card h4{font-family:var(--display);font-size:23px;text-transform:uppercase;margin-bottom:10px;line-height:1;}
  .module-card p{font-size:13.5px;color:#4a5063;flex:1;margin-bottom:18px;}
  .module-price{font-family:var(--mono);font-weight:700;font-size:21px;margin-bottom:16px;padding-top:14px;border-top:1px dashed var(--line);}
  .module-price span{font-size:11.5px;color:var(--muted);font-weight:400;display:block;margin-top:2px;}
  .module-details-btn{
    width:100%;justify-content:center;margin-bottom:10px;
    background:transparent;border-color:var(--line);color:var(--ink-text);
  }
  .module-details-btn:hover{border-color:var(--teal-dark);color:var(--teal-dark);}
  .buy-fallback{
    font-family:var(--mono);font-size:13px;font-weight:600;
    padding:11px 14px;border-radius:2px;background:var(--ink);color:var(--paper-text);
    text-align:center;display:block;border:1px solid var(--ink);
  }
  .buy-fallback:hover{background:var(--teal-dark);border-color:var(--teal-dark);}
  .stripe-note{
    display:flex;align-items:center;gap:6px;font-family:var(--mono);
    font-size:10.5px;color:var(--muted);margin-top:10px;justify-content:center;
  }

  /* ---------- module detail modal ---------- */
  .modal-overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(18,21,28,0.72);
    display:flex;align-items:center;justify-content:center;
    padding:28px;
    opacity:0;transition:opacity .2s ease;
  }
  .modal-overlay[hidden]{display:none;}
  .modal-overlay.open{opacity:1;}
  .modal-ticket{
    background:var(--paper);color:var(--ink-text);
    border-radius:4px;width:100%;max-width:520px;max-height:min(720px,88vh);
    position:relative;box-shadow:0 40px 80px -24px rgba(0,0,0,0.55);
    transform:translateY(14px) scale(.98);transition:transform .22s ease;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .modal-overlay.open .modal-ticket{transform:translateY(0) scale(1);}
  .modal-scroll{overflow-y:auto;padding:34px 30px 28px;}
  .modal-close{
    position:absolute;top:16px;right:16px;z-index:2;
    width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
    background:#fff;color:var(--ink-text);font-size:14px;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:border-color .2s,color .2s;
  }
  .modal-close:hover{border-color:var(--teal-dark);color:var(--teal-dark);}
  .modal-head{border-bottom:1px dashed var(--line);padding-bottom:16px;margin-bottom:16px;padding-right:34px;}
  .modal-tag{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
  .modal-head h3{font-family:var(--display);font-size:32px;text-transform:uppercase;line-height:1;}
  .modal-version{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:8px;}
  .modal-desc{font-size:14.5px;color:#3a3f4a;line-height:1.65;margin-bottom:22px;}
  .modal-block{margin-bottom:22px;}
  .modal-block-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-dark);margin-bottom:10px;}
  .modal-features{list-style:none;display:flex;flex-direction:column;gap:8px;}
  .modal-features li{font-size:13.5px;color:#3a3f4a;padding-left:18px;position:relative;line-height:1.5;}
  .modal-features li::before{content:"✓";position:absolute;left:0;color:var(--teal-dark);font-weight:700;}
  .modal-requirements{font-family:var(--mono);font-size:12.5px;color:#5b6172;}
  .modal-buy{border-top:1px dashed var(--line);padding-top:20px;text-align:center;}
  .modal-price{font-family:var(--mono);font-weight:700;font-size:24px;margin-bottom:14px;}
  .modal-price span{font-size:11.5px;color:var(--muted);font-weight:400;display:block;margin-top:2px;}
  #modal-stripe-slot{display:flex;justify-content:center;margin-bottom:14px;}
  #modal-stripe-slot stripe-buy-button{width:auto;max-width:100%;}
  .modal-buy .buy-fallback{max-width:320px;margin:0 auto;}

  /* ---------- demo ---------- */
  .demo{background:var(--ink);color:var(--paper-text);}
  .demo .lede{color:#aab0bd;}
  .term{
    margin-top:36px;background:var(--ink-soft);border:1px solid var(--line-dark);border-radius:6px;overflow:hidden;
    max-width:560px;
  }
  .term-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line-dark);}
  .term-bar i{width:10px;height:10px;border-radius:50%;background:#4a5063;}
  .term-body{padding:22px 24px;font-family:var(--mono);font-size:13.5px;}
  .term-line{display:flex;gap:10px;padding:5px 0;color:#c3c8d2;}
  .term-line .k{color:var(--teal);min-width:110px;}
  .term-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
  .term-note{font-family:var(--mono);font-size:12px;color:#7c8393;margin-top:16px;}

  /* ---------- pricing / receipts ---------- */
  .receipts{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;}
  @media(max-width:820px){.receipts{grid-template-columns:1fr;}}
  .receipt{
    background:#fff;border:1px solid var(--line);padding:0;position:relative;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),97% 100%,94% calc(100% - 10px),91% 100%,88% calc(100% - 10px),85% 100%,82% calc(100% - 10px),79% 100%,76% calc(100% - 10px),73% 100%,70% calc(100% - 10px),67% 100%,64% calc(100% - 10px),61% 100%,58% calc(100% - 10px),55% 100%,52% calc(100% - 10px),49% 100%,46% calc(100% - 10px),43% 100%,40% calc(100% - 10px),37% 100%,34% calc(100% - 10px),31% 100%,28% calc(100% - 10px),25% 100%,22% calc(100% - 10px),19% 100%,16% calc(100% - 10px),13% 100%,10% calc(100% - 10px),7% 100%,4% calc(100% - 10px),0 100%);
    padding-bottom:24px;
    box-shadow:0 20px 40px -24px rgba(18,21,28,0.25);
    transform-origin:top center;
  }
  .receipt-in{padding:30px 30px 6px;}
  .receipt-tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;}
  .receipt h3{font-family:var(--display);font-size:26px;text-transform:uppercase;margin-bottom:18px;}
  .line{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13.5px;padding:10px 0;border-bottom:1px dashed var(--line);}
  .line .name{color:#3a3f4a;}
  .line .price{font-weight:600;}
  .receipt-total{display:flex;justify-content:space-between;font-family:var(--mono);font-weight:700;font-size:15px;padding:16px 0 4px;}
  .receipt-total span:last-child{color:var(--teal-dark);}
  .receipt-foot{font-size:13px;color:#5b6172;margin-top:14px;line-height:1.6;}
  .receipt .btn{width:100%;justify-content:center;margin-top:20px;}
  .receipt.dark{background:var(--ink);color:var(--paper-text);}
  .receipt.dark .receipt-tag{color:#8890a0;}
  .receipt.dark .line{border-color:var(--line-dark);}
  .receipt.dark .line .name{color:#c3c8d2;}
  .receipt.dark .line .price{color:var(--paper-text);}
  .receipt.dark .receipt-total span:last-child{color:var(--teal);}
  .receipt.dark .receipt-foot{color:#aab0bd;}

  /* ---------- faq ---------- */
  .faq{max-width:760px;margin-top:36px;}
  details{border-bottom:1px solid var(--line);padding:20px 0;}
  summary{
    list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    font-weight:600;font-size:16px;gap:16px;
  }
  summary::-webkit-details-marker{display:none;}
  summary .plus{font-family:var(--mono);color:var(--teal-dark);font-size:20px;flex:none;transition:transform .25s;}
  details[open] summary .plus{transform:rotate(45deg);}
  details p{margin-top:12px;color:#4a5063;font-size:14.5px;max-width:640px;}

  /* ---------- upsell ---------- */
  .upsell{
    background:linear-gradient(135deg,var(--teal-dark),var(--ink));
    color:var(--paper-text);border-radius:6px;
    padding:56px 44px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  }
  .upsell h3{font-family:var(--display);font-size:clamp(24px,3.6vw,34px);text-transform:uppercase;max-width:520px;}
  .upsell p{color:#d9e6e4;margin-top:10px;max-width:480px;font-size:15px;}
  .upsell .btn-primary{background:var(--amber);color:var(--ink);}
  .upsell .btn-primary:hover{background:#d99126;}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#8890a0;padding:44px 0;font-size:13px;}
  .foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;}
  .foot-links{display:flex;gap:20px;}
  .foot-links a:hover{color:var(--paper-text);}