:root{
    --paper:#FAF6EC; --paper-line:#E6DFC8; --card:#FFFFFF;
    --ink:#1B2A3B; --ink-soft:#5C6B7A; --ink-faint:#96A1AC;
    --green:#1F6F54; --green-soft:#E4F1EA;
    --red:#B3492B; --red-soft:#F6E7E0;
    --gold:#B8892B; --gold-soft:#F3E9D2;
    --shadow:0 1px 2px rgba(27,42,59,.06), 0 8px 24px -12px rgba(27,42,59,.18);
    --radius:14px;
    --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--ink); font-family:var(--font-body);
    background:
      repeating-linear-gradient(to bottom, transparent, transparent 37px, var(--paper-line) 38px),
      var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
  a{color:inherit;}
  section{padding:64px 0;}
  @media(max-width:760px){ section{padding:44px 0;} }

  /* NAV */
  nav.top{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0; border-bottom:2px solid var(--ink); margin-bottom:8px;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand .mark{
    width:38px; height:38px; border-radius:9px; background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
    font-weight:700; font-size:16px;
  }
  .brand span{font-family:var(--font-display); font-weight:600; font-size:19px;}
  .btn{
    display:inline-block; padding:11px 22px; border-radius:9px; font-weight:600; font-size:14.5px;
    cursor:pointer; border:none; text-decoration:none; transition:.15s;
  }
  .btn-primary{background:var(--ink); color:var(--paper);}
  .btn-primary:hover{opacity:.88;}
  .btn-ghost{border:1.5px solid var(--ink); background:transparent; color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--paper);}
  .btn-lg{padding:15px 30px; font-size:15.5px;}

  /* HERO */
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:52px;}
  .eyebrow{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .hero h1{
    font-family:var(--font-display); font-weight:600; font-size:46px; line-height:1.08;
    margin:0 0 18px; letter-spacing:-.5px;
  }
  .hero h1 em{font-style:italic; color:var(--green);}
  .hero p.lede{font-size:17px; color:var(--ink-soft); line-height:1.6; max-width:480px; margin:0 0 28px;}
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
  .trust-row{margin-top:22px; font-size:13px; color:var(--ink-faint); font-family:var(--font-mono);}

  /* MOCKUP */
  .mockup{
    background:var(--card); border-radius:16px; box-shadow:var(--shadow);
    padding:20px; transform:rotate(1.2deg);
  }
  .mockup-inner{border:1.5px solid var(--paper-line); border-radius:10px; padding:16px;}
  .mockup-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
  .mockup-head .dots span{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--paper-line); margin-right:4px;}
  .mockup-title{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}
  .mockup-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px;}
  .mockup-stats div{background:var(--paper); border-radius:8px; padding:10px; border-top:3px solid var(--ink);}
  .mockup-stats div:nth-child(2){border-top-color:var(--green);}
  .mockup-stats div:nth-child(3){border-top-color:var(--red);}
  .mockup-stats .l{font-size:9px; text-transform:uppercase; color:var(--ink-faint); font-weight:700; letter-spacing:.05em;}
  .mockup-stats .v{font-family:var(--font-mono); font-weight:600; font-size:14px; margin-top:3px;}
  .mockup-row{display:flex; justify-content:space-between; padding:8px 2px; border-bottom:1px dashed var(--paper-line); font-size:12.5px;}
  .mockup-row:last-child{border-bottom:none;}
  .mockup-row .r{font-family:var(--font-mono); font-weight:600;}
  .mockup-row .r.g{color:var(--green);} .mockup-row .r.d{color:var(--red);}

  /* SECTION HEAD */
  .section-head{max-width:560px; margin:0 auto 40px; text-align:center;}
  .section-head .eyebrow{justify-content:center; display:flex;}
  .section-head h2{font-family:var(--font-display); font-weight:600; font-size:32px; margin:0 0 12px;}
  .section-head p{color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin:0;}

  /* FEATURES */
  .features{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .feature{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 20px;}
  .feature .ico{
    width:38px; height:38px; border-radius:9px; background:var(--green-soft); color:var(--green);
    display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; font-weight:700;
  }
  .feature h3{font-family:var(--font-display); font-size:16.5px; margin:0 0 8px; font-weight:600;}
  .feature p{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0;}

  /* STEPS */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .step{position:relative; padding-left:0;}
  .step .num{
    font-family:var(--font-display); font-size:38px; font-weight:600; color:var(--paper-line);
    -webkit-text-stroke:1.5px var(--ink); color:transparent; display:block; margin-bottom:6px;
  }
  .step h3{font-family:var(--font-display); font-size:17px; margin:0 0 8px; font-weight:600;}
  .step p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0;}

  /* PRICING */
  .pricing-card{
    max-width:420px; margin:0 auto; background:var(--card); border-radius:18px;
    box-shadow:var(--shadow); padding:36px 32px; text-align:center; position:relative;
    border-top:4px solid var(--gold);
  }
  .stamp{
    position:absolute; top:-14px; right:22px; background:var(--gold-soft); color:var(--gold);
    font-family:var(--font-display); font-size:12.5px; font-weight:600; padding:6px 14px;
    border-radius:999px; border:1.5px solid var(--gold); transform:rotate(4deg);
  }
  .price{font-family:var(--font-mono); font-size:44px; font-weight:600; margin:14px 0 4px;}
  .price small{font-size:16px; color:var(--ink-soft); font-weight:500;}
  .price-note{font-size:12.5px; color:var(--ink-faint); margin-bottom:22px;}
  .plan-list{list-style:none; padding:0; margin:0 0 26px; text-align:left;}
  .plan-list li{padding:9px 0; border-bottom:1px dashed var(--paper-line); font-size:14px; display:flex; gap:10px;}
  .plan-list li:last-child{border-bottom:none;}
  .plan-list li::before{content:"✓"; color:var(--green); font-weight:700;}

  /* FAQ */
  .faq{max-width:680px; margin:0 auto;}
  .faq-item{background:var(--card); border-radius:12px; box-shadow:var(--shadow); padding:18px 22px; margin-bottom:12px;}
  .faq-item h4{font-family:var(--font-display); font-size:15.5px; margin:0 0 8px; font-weight:600;}
  .faq-item p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.6;}

  /* CTA FINAL */
  .cta-final{
    background:var(--ink); color:var(--paper); border-radius:20px; padding:56px 40px;
    text-align:center;
  }
  .cta-final h2{font-family:var(--font-display); font-size:30px; margin:0 0 14px; font-weight:600;}
  .cta-final p{color:#B7C2CC; font-size:15px; margin:0 0 26px;}
  .cta-final .btn-primary{background:var(--paper); color:var(--ink);}

  footer.site{text-align:center; color:var(--ink-faint); font-size:12.5px; padding:32px 0;}

  @media(max-width:900px){
    .hero{grid-template-columns:1fr;}
    .hero p.lede{max-width:none;}
    .features{grid-template-columns:1fr 1fr;}
    .steps{grid-template-columns:1fr;}
  }
  @media(max-width:560px){
    .hero h1{font-size:32px;}
    .features{grid-template-columns:1fr;}
    nav .btn{padding:9px 16px; font-size:13px;}
  }