:root{
    --navy:        #0E1F4D;
    --navy-deep:   #0A1740;
    --navy-2:      #1A2D5E;
    --slate:       #4A5677;
    --muted:       #7886A3;
    /* Accent: warm gold */
    --green:       #2AAE4A;   /* primary accent / CTA bg */
    --green-deep:  #229A3F;   /* CTA hover */
    --green-darker:#1E8A39;   /* readable on white */
    --green-tint:  #E3F5E8;   /* badge bg */
    --green-mist:  #F1FAF3;   /* very light bg */
    --bg:          #F4F7FB;
    --paper:       #FFFFFF;
    --rule:        #E1E7F0;
    --rule-soft:   #EEF2F7;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--navy);
    background: var(--bg);
    background-image:
      linear-gradient(rgba(14,31,77,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14,31,77,0.045) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img{ max-width:100%; height:auto; display:block; }
  a{ color: inherit; }
  ::selection{ background: var(--green); color:#fff; }
  /* Single-column wrap */
  .wrap{
    max-width: 720px;
    margin: 0 auto;
    padding: 0 22px;
  }
  .wrap-tight{
    max-width: 640px;
    margin: 0 auto;
    padding: 0 22px;
  }
  /* Section spacing */
  section.block{ padding: 48px 0; }
  section.block.tight{ padding: 36px 0; }
  section.block.first{ padding-top: 72px; }
  @media (max-width: 480px){
    section.block{ padding: 36px 0; }
    section.block.tight{ padding: 28px 0; }
    section.block.first{ padding-top: 32px; }
  }
  /* All sections center their headers; body content stays left-aligned for readability */
  .section-head{ text-align: center; margin-bottom: 22px; }
  .section-head .section-eyebrow{ margin-left:auto; margin-right:auto; }
  /* Hero: dark navy section */
  section.hero{
    text-align: center;
    background: var(--navy);
    background-image:
      radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    color: #fff;
    padding-top: 28px; padding-bottom: 28px;
    position: relative;
  }
  @media (max-width: 480px){
    section.hero{ padding-top: 24px; padding-bottom: 24px; }
  }
  section.hero::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(60% 80% at 90% 0%, rgba(42,174,74,0.12), transparent 60%),
      radial-gradient(40% 70% at 10% 100%, rgba(42,174,74,0.08), transparent 60%);
  }
  section.hero > .wrap{ position: relative; }
  section.hero .eyebrow{ margin-left:auto; margin-right:auto; }
  section.hero h1.hero-h1{ color: #fff; }
  section.hero h1.hero-h1 .green{ color: var(--green); }
  section.hero .hero-sub{ color: rgba(255,255,255,.78); }
  section.hero .hero-sub strong{ color: #fff; }
  section.hero .trust-line{ color: rgba(255,255,255,.85); font-size: 15px; font-weight: 500; }
  section.hero .trust-line strong{ color: var(--green); }
  section.hero .cta-trust{ color: rgba(255,255,255,.7); }
  section.hero .btn-meta{ color: rgba(255,255,255,.55); }
  /* Eyebrow */
  .eyebrow{
    display:inline-flex; align-items:center; gap: 8px;
    font-size: 12.5px; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
    color: var(--green);
    background: rgba(42,174,74,.18);
    border: 1px solid rgba(42,174,74,.65);
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
    white-space: nowrap;
    max-width: 100%;
  }
  .eyebrow .green-dot{ width:7px; height:7px; border-radius:50%; background: var(--green); display:inline-block; box-shadow: 0 0 8px rgba(42,174,74,.7); flex: none; }
  @media (max-width: 480px){
    .eyebrow{
      font-size: 11.5px;
      letter-spacing: .10em;
      padding: 7px 12px;
      gap: 7px;
    }
    .eyebrow .green-dot{ width: 6px; height: 6px; }
  }
  .section-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; color: var(--green-darker);
    margin-bottom: 14px;
  }
  .section-eyebrow::before{
    content:""; width: 18px; height: 2px; background: var(--green); border-radius:2px;
  }
  /* Headlines */
  h1.hero-h1{
    font-size: clamp(29px, 4vw, 35px);
    line-height: 1.1;
    text-wrap: balance;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 22px;
    color: var(--navy);
  }
  @media (max-width: 480px){
    h1.hero-h1{ font-size: 31px; line-height: 1.12; }
  }
  h1.hero-h1 .green{ color: var(--green); }
  h2.section{
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--navy);
  }
  h2.section .green{ color: var(--green-darker); }
  /* Body type */
  .hero-sub{
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
    color: var(--slate);
    margin: 0 0 28px;
  }
  .hero-sub strong{ color: var(--navy); font-weight: 700; }
  p.lead{
    font-size: 19px; color: var(--navy); line-height: 1.5;
    margin: 0 0 18px;
    font-weight: 500;
  }
  p.body{
    color: var(--slate); margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.65;
  }
  p.body strong, p.lead strong{ color: var(--navy); font-weight: 700; }
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap: 10px;
    background: var(--green);
    color: var(--navy);
    border: none;
    padding: 19px 36px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
    box-shadow: 0 10px 22px -10px rgba(42,174,74,0.65);
    text-align:center;
    line-height: 1.2;
    white-space: nowrap;
  }
  .btn:hover{ background: var(--green-deep); color: var(--navy); }
  .btn:active{ transform: translateY(1px); }
  .btn .arrow{ display:inline-block; transition: transform .18s ease; }
  .btn:hover .arrow{ transform: translateX(3px); }
  .btn.full{ display:flex; width: 100%; }
  .btn-meta{
    margin-top: 12px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
  }
  .cta-group{ margin: 18px 0 6px; text-align: center; }
  @media (max-width: 480px){
    .cta-group .btn{
      display: flex; width: 100%;
      padding: 18px 12px;
      font-size: 15px;
      gap: 8px;
    }
    .order-card .btn.full{
      padding: 16px 12px;
      font-size: 15px;
      gap: 8px;
      white-space: normal;
    }
  }
  .cta-trust{
    display:flex; flex-wrap:wrap; gap: 14px 18px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    justify-content:center;
  }
  .cta-trust .item{ display:inline-flex; align-items:center; gap:6px; }
  .check-mini{
    flex:none; width:18px; height:18px; border-radius: 6px;
    background: var(--green); color: var(--navy);
    display:inline-grid; place-items:center;
  }
  .check-mini svg{ width:11px; height:11px; }
  /* Trust line under CTA */
  .trust-line{
    margin: 26px 0 0;
    color: var(--muted);
    font-size: 14px;
  }
  .trust-line strong{ color: var(--navy); font-weight:800; }
  /* Bullet checks */
  ul.checks{ list-style:none; padding:0; margin: 4px 0 24px; }
  ul.checks li{
    position:relative;
    padding: 16px 0 16px 42px;
    border-top: 1px solid var(--rule);
    font-size: 17.5px;
    line-height: 1.5;
    color: var(--navy);
  }
  ul.checks li:last-child{ border-bottom: 1px solid var(--rule); }
  ul.checks li::before{
    content:"";
    position:absolute; left:0; top:18px;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--green);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1F4D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 5px 10px -3px rgba(42,174,74,0.45);
  }
  ul.checks li strong{ color: var(--navy); font-weight: 700; }
  /* Steps */
  ol.steps{ list-style:none; padding:0; margin: 12px 0 0; counter-reset: step; }
  ol.steps li{
    position:relative;
    padding: 28px 0 28px 80px;
    border-top: 1px solid var(--rule);
    counter-increment: step;
  }
  ol.steps li:last-child{ border-bottom: 1px solid var(--rule); }
  ol.steps li::before{
    content: counter(step);
    position:absolute; left: 0; top: 28px;
    width: 56px; height: 56px;
    background: var(--navy); color: #fff;
    border-radius: 14px;
    display:grid; place-items:center;
    font-weight: 800; font-size: 24px;
    letter-spacing:-0.02em;
  }
  ol.steps h4{
    margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--navy); letter-spacing:-0.015em;
  }
  ol.steps p{ margin: 0; color: var(--slate); font-size: 16.5px; line-height: 1.6; }
  /* Feature cards (single column) */
  .features{ display:flex; flex-direction:column; gap: 14px; margin-top: 26px; }
  .feature{
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 26px;
  }
  .feature .num-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width: 44px; height: 44px;
    background: var(--green-mist);
    color: var(--green-darker);
    border-radius: 12px;
    font-size: 17px; font-weight: 800; letter-spacing:-0.01em;
    margin-bottom: 16px;
  }
  .feature .tag{
    display:block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green-darker);
    margin-bottom: 6px;
  }
  .feature h4{
    margin: 0 0 10px;
    font-size: 21px; font-weight: 800; line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--navy);
  }
  .feature p{ margin: 0; color: var(--slate); font-size: 16.5px; line-height: 1.6; }
  /* Strategist preview card (hero mechanism visual) */
  .audit-mockup{
    margin: 28px auto 24px;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 28px 64px -28px rgba(0,0,0,.55), 0 0 0 1px rgba(42,174,74,.16);
    max-width: 580px;
  }
  .audit-mockup .am-head{
    display:flex; align-items:center; gap: 10px;
    padding: 11px 18px;
    background: var(--navy);
    color: #fff;
    font-size: 12.5px; font-weight:700;
  }
  .audit-mockup .am-head .am-dot{
    width:7px; height:7px; border-radius:50%; background: var(--green);
    box-shadow: 0 0 0 0 rgba(42,174,74,.7);
    animation: pulse 1.8s infinite;
  }
  .audit-mockup .am-head .am-brand{ color: rgba(255,255,255,.55); font-weight:500; font-size:12px; margin-left:auto; }
  .audit-mockup .am-stat{
    padding: 16px 24px 14px;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, #F1FAF3 0%, #fff 100%);
  }
  .audit-mockup .am-stat .am-label{
    font-size: 10.5px; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color: var(--muted); margin: 0 0 2px;
  }
  .audit-mockup .am-stat .am-num{
    font-size: clamp(28px, 4.6vw, 36px); font-weight:800; letter-spacing:-0.025em;
    color: var(--green-darker); line-height: 1; margin: 0;
  }
  .audit-mockup .am-stat .am-num .unit{ font-size:.5em; color: var(--slate); font-weight:700; }
  .audit-mockup .am-stat .am-meta{
    color: var(--slate); font-size: 13.5px; margin: 4px 0 0; font-weight: 500;
  }
  .audit-mockup .am-stat .am-meta strong{ color: var(--navy); font-weight: 700; }
  .audit-mockup .am-list{
    padding: 10px 24px 22px;
  }
  .audit-mockup .am-row{
    display:grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 14px; row-gap: 4px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--rule-soft);
  }
  .audit-mockup .am-row:first-of-type{ border-top: none; }
  .audit-mockup .am-badge{
    grid-column: 1; grid-row: 1;
    font-size: 10px; font-weight: 800; letter-spacing:.06em;
    padding: 4px 8px; border-radius: 5px;
    min-width: 56px; text-align:center;
    background: var(--green-tint); color: var(--green-darker);
  }
  .audit-mockup .am-name{
    grid-column: 2; grid-row: 1;
    color: var(--navy); font-weight: 700; font-size: 14.5px; line-height: 1.3;
    min-width: 0;
  }
  .audit-mockup .am-impact{
    grid-column: 3; grid-row: 1;
    text-align: right;
    color: var(--green-darker); font-weight: 800; font-size: 13px; white-space: nowrap;
  }
  .audit-mockup .am-fix{
    grid-column: 2 / 4; grid-row: 2;
    color: var(--slate); font-size: 12.5px; font-weight: 500; line-height: 1.35;
  }
  .audit-mockup .am-fix::before{
    content: "\2192 "; color: var(--green-darker); font-weight: 800;
  }
  @media (max-width: 520px){
    .audit-mockup{ max-width: 100%; }
    .audit-mockup .am-head{ padding: 10px 14px; }
    .audit-mockup .am-stat{ padding: 12px 14px 10px; }
    .audit-mockup .am-list{ padding: 4px 14px 14px; }
    .audit-mockup .am-name{ font-size: 13.5px; }
    .audit-mockup .am-badge{ min-width: 50px; font-size: 9.5px; padding: 3px 6px; }
    .audit-mockup .am-impact{ font-size: 12px; }
    .audit-mockup .am-fix{ font-size: 12px; }
  }
  section.hero .audit-mockup{ box-shadow: 0 32px 72px -28px rgba(0,0,0,.6), 0 0 0 1px rgba(42,174,74,.22); }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(42,174,74,.7); }
    70%{ box-shadow: 0 0 0 8px rgba(42,174,74,0); }
    100%{ box-shadow: 0 0 0 0 rgba(42,174,74,0); }
  }
  /* Result card */
  .result-card{
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 28px;
    margin-top: 6px;
  }
  @media (max-width: 480px){
    .result-card{ padding: 18px 14px; border-radius: 14px; }
  }
  .result-card .live{
    display:inline-flex; align-items:center; gap:6px;
    color: var(--green-darker);
    font-size: 12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    margin-bottom: 12px;
  }
  .result-card .live .pulse{
    width:7px; height:7px; border-radius:50%; background: var(--green);
    box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    animation: pulse 1.6s infinite;
  }
  .result-card .case-name{
    font-size: 13px; font-weight:700; color: var(--muted);
    letter-spacing:.04em; text-transform:uppercase; margin: 0 0 10px;
  }
  .result-card .big-stat{
    font-size: clamp(40px, 8vw, 56px);
    font-weight: 800; letter-spacing:-0.025em; color: var(--navy);
    line-height: 1.05; margin: 0 0 8px;
  }
  .result-card .big-stat .green{ color: var(--green-darker); }
  .result-card .meta{ margin: 0 0 18px; color: var(--slate); font-size: 16px; line-height:1.55; }
  .result-card .meta strong{ color: var(--navy); font-weight: 700; }
  /* Founder */
  .founder-photo{
    width:140px; height:140px; border-radius: 50%;
    overflow:hidden; background: #f1f3f5;
    border: 4px solid var(--paper);
    box-shadow: 0 0 0 2px var(--green), 0 22px 40px -22px rgba(14,31,77,.22);
    margin: 8px 0 18px;
  }
  .founder-photo img{ width:100%; height:100%; object-fit:cover; }
  .founder-name{ font-size: 22px; font-weight: 800; margin: 0; letter-spacing:-0.015em; color: var(--navy); }
  .founder-title{ color: var(--green-darker); font-size: 13px; font-weight: 800; margin: 4px 0 22px; letter-spacing:.06em; text-transform:uppercase; }
  /* Stat strip */
  .stat-row{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
    padding: 22px 18px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    text-align:center;
  }
  .stat-row .stat .num{ font-size: 26px; font-weight: 800; letter-spacing:-0.025em; color: var(--navy); line-height:1; }
  .stat-row .stat .num .green{ color: var(--green-darker); }
  .stat-row .stat .lab{ font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
  @media (max-width: 480px){
    .stat-row .stat .num{ font-size: 22px; }
  }
  /* Compare cards (single column) */
  .compare{ display:flex; flex-direction:column; gap: 14px; margin: 22px 0; }
  .col-card{
    border:1px solid var(--rule); border-radius: 16px; padding: 26px;
    background: var(--paper);
  }
  .col-card .tag{
    display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; padding: 5px 10px; border-radius: 999px;
    background: var(--rule-soft); color: var(--muted);
  }
  .col-card.win{
    border-color: var(--green);
    box-shadow: 0 22px 40px -22px rgba(42,174,74,0.45);
  }
  .col-card.win .tag{ background: var(--green-tint); color: var(--green-darker); }
  .col-card h4{ margin: 14px 0 10px; font-size: 21px; font-weight: 800; line-height:1.25; letter-spacing:-0.02em; color: var(--navy); }
  .col-card p{ margin: 0 0 12px; color: var(--slate); font-size: 16px; line-height: 1.6; }
  .col-card p:last-child{ margin: 0; }
  .col-card p strong{ color: var(--navy); font-weight: 700; }
  /* Order card */
  .order-card{
    background: var(--paper);
    border-radius: 22px;
    padding: 30px;
    margin: 22px 0 8px;
    position:relative;
    border: 2px solid var(--green);
    box-shadow: 0 32px 64px -28px rgba(42,174,74,0.4);
  }
  .order-card::before{ display: none; }
  .order-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap: 12px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 22px; margin-bottom: 22px;
  }
  .order-head h3{ margin:0; font-size: 22px; font-weight:800; letter-spacing:-0.02em; color: var(--navy); }
  .order-head .product-meta{ color: var(--muted); font-size: 13px; margin-top: 4px; }
  .price-pile{ display:flex; align-items:baseline; gap: 10px; }
  .price-pile .num{ font-size: 42px; font-weight: 800; letter-spacing: -0.025em; color: var(--navy); line-height:1; }
  .price-pile .once{ color: var(--muted); font-size: 12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .order-card ul.checks{ margin: 0 0 22px; }
  .order-card ul.checks li{ font-size: 16px; padding: 12px 0 12px 36px; color: var(--navy); }
  .order-card ul.checks li::before{ width:20px; height:20px; top:14px; background-size:11px 11px; border-radius:6px; }
  .order-card ul.checks li:first-child{ border-top:none; padding-top: 4px; }
  .order-card ul.checks li:first-child::before{ top: 6px; }
  .order-card ul.checks li:last-child{ border-bottom:none; padding-bottom: 4px; }
  .guarantee-row{
    margin-top: 18px;
    display:flex; align-items:flex-start; gap: 10px;
    font-size: 14px; color: var(--slate); line-height: 1.5;
    background: var(--green-mist);
    border: 1px solid #F0DD9A;
    border-radius: 12px;
    padding: 14px 16px;
  }
  .guarantee-row svg{ flex:none; color: var(--green-darker); margin-top:2px; }
  .guarantee-row strong{ color: var(--navy); font-weight: 800; }
  /* Pull quote */
  blockquote.q{
    margin: 26px 0; padding: 4px 0 4px 22px;
    border-left: 4px solid var(--green);
    font-size: 22px; line-height: 1.35;
    color: var(--navy); font-weight: 800;
    letter-spacing: -0.015em;
  }
  /* FAQ */
  details.faq{
    border-top: 1px solid var(--rule);
    padding: 18px 4px;
  }
  details.faq:last-of-type{ border-bottom: 1px solid var(--rule); }
  details.faq > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap: 18px;
    font-weight: 700;
    font-size: 17.5px;
    line-height: 1.4;
    color: var(--navy);
    letter-spacing:-0.01em;
  }
  details.faq > summary::-webkit-details-marker{ display:none; }
  details.faq > summary .ico{
    flex:none; width: 26px; height: 26px; border-radius: 8px;
    background: var(--green-mist); color: var(--green-darker);
    display:grid; place-items:center;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    margin-top: 2px;
  }
  details.faq[open] > summary .ico{ transform: rotate(45deg); background: var(--green); color:#fff; }
  details.faq .answer{
    margin-top: 14px;
    color: var(--slate);
    font-size: 16.5px;
    line-height: 1.6;
  }
  /* Final CTA navy block */
  .final-cta{
    background: var(--navy);
    color:#fff;
    border-radius: 22px;
    padding: 44px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 480px){
    .final-cta{ padding: 36px 20px; }
    .final-cta .btn{ display: flex; width: 100%; padding-left: 16px; padding-right: 16px; }
  }
  .final-cta::before{
    content:""; position:absolute; inset:-2px;
    background:
      radial-gradient(60% 80% at 90% 0%, rgba(42,174,74,0.22), transparent 60%),
      radial-gradient(40% 70% at 10% 100%, rgba(42,174,74,0.14), transparent 60%);
    pointer-events:none;
  }
  .final-cta > *{ position: relative; }
  .final-cta h2{
    color:#fff;
    font-size: clamp(28px, 4.4vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 16px;
  }
  .final-cta h2 .green{ color: var(--green); }
  .final-cta p{ color: rgba(255,255,255,.78); margin: 0 auto 22px; font-size: 17px; line-height:1.55; }
  /* Footer */
  footer.site{
    padding: 40px 0 32px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
  }
  footer.site a{ color: var(--slate); text-decoration: none; }
  footer.site a:hover{ color: var(--navy); }
  footer.site p{ margin: 0 0 8px; }
  footer.site .disclaimer{
    margin: 0 auto 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    font-size: 12.5px; line-height: 1.6; color: var(--muted);
    text-align: left;
  }
  footer.site .meta{ line-height: 1.55; }
  footer.site .legal{ margin-top: 10px; }
  footer.site .legal a{ display: inline-block; padding: 2px 0; }
  @media (max-width: 480px){
    footer.site{ padding: 18px 0 12px; font-size: 12px; }
    footer.site p{ margin: 0 0 4px; }
    footer.site .disclaimer{
      font-size: 11.5px; line-height: 1.5;
      margin: 0 auto 12px; padding-bottom: 12px;
    }
    footer.site .meta{ font-size: 11.5px; }
    footer.site .legal{ margin-top: 8px; line-height: 1.7; }
  }
  /* Sticky mobile CTA */
  .sticky-cta{
    position: fixed; left:0; right:0; bottom:0;
    padding: 10px 14px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    z-index: 50;
    display: none;
  }
  .sticky-cta.hidden{ display: none !important; }
  @media (max-width: 760px){
    .sticky-cta{ display:block; }
    body{ padding-bottom: 76px; }
  }
  .sticky-cta .btn{ padding: 14px 18px; font-size: 15px; border-radius: 10px; box-shadow: 0 8px 18px -8px rgba(42,174,74,0.55); }
  /* Logo bar: trusted by */
  section.logo-bar-section{
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 24px 0 28px;
  }
  .logo-label{
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 22px;
  }
  .logo-bar{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 880px;
    height: auto;
    opacity: .9;
  }
  /* Screenshot pair (Real Results) */
  .screenshots{
    display: flex; flex-direction: column;
    gap: 16px;
    margin: 18px 0 0;
  }
  .screenshot{
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px -18px rgba(14,31,77,0.18);
  }
  .screenshot-label{
    display: block;
    background: var(--navy); color: #fff;
    padding: 9px 14px;
    font-size: 11.5px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    text-align: center;
  }
  .screenshot.is-after .screenshot-label{ background: #117A35; }
  .screenshot img{ width: 100%; display: block; }
  /* Secondary client snapshot */
  .client-snapshot{
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
  }
  .client-snapshot .intro{
    text-align: center;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    font-weight: 800;
  }
  .client-snapshot img{
    width: 100%;
    display: block;
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 12px 28px -18px rgba(14,31,77,0.18);
  }
  /* --------- HERO: ANIMATED AI ROBOT SCENE --------- */
  .ai-scene{ margin: 22px auto 16px; max-width: 440px; }
  .ai-scene svg{ width:100%; height:auto; display:block; overflow:visible; }
  .ai-scene .cap{
    margin: 4px auto 0; text-align:center;
    font-size: 13.5px; font-weight:700; color: rgba(255,255,255,.82);
  }
  .ai-scene .cap .g{ color: var(--green); font-weight:800; }
  .as-bot{ animation: asFloat 3.6s ease-in-out infinite; }
  .as-shadow{ animation: asShadow 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .as-bub{ transform-box: fill-box; transform-origin: center; }
  .as-bub1{ animation: asFloat2 4s ease-in-out infinite; }
  .as-bub2{ animation: asFloat2 4.6s ease-in-out infinite .3s; }
  .as-bub3{ animation: asFloat2 4.2s ease-in-out infinite .6s; }
  .as-beam{ stroke-dasharray: 3 6; animation: asBeam 1.5s linear infinite; }
  .as-beam2{ animation-delay:.3s; }
  .as-beam3{ animation-delay:.6s; }
  .as-pulse{ animation: asPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin:center; }
  .as-scan{ animation: asScan 2.6s ease-in-out infinite; transform-box: fill-box; }
  .as-coin{ transform-box: fill-box; transform-origin:center; opacity:0; }
  .as-coin1{ animation: asCoin 2.8s ease-in infinite; }
  .as-coin2{ animation: asCoin 2.8s ease-in infinite .7s; }
  .as-coin3{ animation: asCoin 2.8s ease-in infinite 1.4s; }
  .as-coin4{ animation: asCoin 2.8s ease-in infinite 2.1s; }
  @keyframes asFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }
  @keyframes asFloat2{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
  @keyframes asShadow{ 0%,100%{ transform: scaleX(1); opacity:.30; } 50%{ transform: scaleX(.84); opacity:.18; } }
  @keyframes asBeam{ to{ stroke-dashoffset: -18; } }
  @keyframes asPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
  @keyframes asScan{ 0%,100%{ transform: translateY(0); opacity:.2; } 50%{ transform: translateY(20px); opacity:.85; } }
  @keyframes asCoin{ 0%{ transform: translateY(6px) scale(.5); opacity:0; } 22%{ opacity:1; } 100%{ transform: translateY(-50px) scale(1); opacity:0; } }
  .as-blink{ animation: asBlink 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes asBlink{ 0%,93%,100%{ transform: scaleY(1); } 96.5%{ transform: scaleY(.12); } }
  .ai-scene .phase{ text-align:center; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--green); margin: 0 0 2px; }
  /* Static: animations removed so the hero doesn't pull focus from the CTA */
  .as-bot,.as-shadow,.as-bub1,.as-bub2,.as-bub3,.as-beam,.as-pulse,.as-scan,.as-blink,.as-coin1,.as-coin2,.as-coin3,.as-coin4{ animation:none !important; }
  .as-coin{ opacity:1; }
  .as-shadow{ opacity:.26; }
/* Long hero headline: step it down on smaller screens */
@media (max-width:480px){ body section.hero h1.hero-h1{ font-size:26px !important; line-height:1.18 !important; } }
@media (min-width:481px) and (max-width:760px){ body section.hero h1.hero-h1{ font-size:30px !important; } }
@media (min-width:761px){ body section.hero > .wrap{ max-width: 820px !important; } }
body section.hero .trust-line{ font-size: 17px !important; }
/* Long button labels: let them wrap on phones instead of running off the edge */
@media (max-width:480px){
  .btn{ white-space: normal !important; font-size: 16px !important; padding-left: 18px !important; padding-right: 18px !important; text-align: center; line-height: 1.3; }
}

/* ---------- Hero demo: the generator in use ---------- */
.demo{ max-width: 560px; margin: 26px auto 18px; text-align: left; }
.demo-win{ background:#fff; border-radius:16px; overflow:hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); color: var(--navy); }
.demo-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background: var(--bg); border-bottom:1px solid var(--rule); }
.demo-bar span{ width:10px; height:10px; border-radius:50%; background:#D5DBE6; }
.demo-bar em{ margin-left:8px; font-style:normal; font-size:12px; font-weight:700; color: var(--muted); }
.demo-body{ padding:18px 18px 20px; min-height: 380px; position:relative; }
.demo-label{ margin:0 0 6px; font-size:12px; font-weight:700; color: var(--slate); }
.demo-field{ border:1.5px solid var(--rule); border-radius:10px; padding:10px 12px; font-size:14px; min-height:42px; margin-bottom:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--navy); }
.demo.typing .demo-field:first-of-type{ border-color: var(--green); }
.demo-caret{ display:inline-block; width:2px; height:15px; background: var(--navy); vertical-align:-2px; margin-left:1px; animation: demoBlink 1s steps(1) infinite; }
.demo.press .demo-caret{ display:none; }
@keyframes demoBlink{ 50%{ opacity:0; } }
.demo-go{ display:inline-flex; gap:8px; align-items:center; background: var(--green); color: var(--navy); font-weight:800; font-size:14px; padding:11px 16px; border-radius:10px; transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 16px rgba(42,174,74,.35); }
.demo.press .demo-go{ transform: scale(.95); box-shadow:none; }
.demo-load{ display:none; margin-top:16px; }
.demo-load p{ margin:0 0 8px; font-size:13px; font-weight:600; color: var(--slate); }
.demo-prog{ height:6px; border-radius:6px; background: var(--rule-soft); overflow:hidden; }
.demo-prog b{ display:block; height:100%; width:0; background: var(--green); border-radius:6px; }
.demo.loading .demo-load{ display:block; }
.demo.loading .demo-prog b{ animation: demoProg 1.8s ease-in-out forwards; }
@keyframes demoProg{ to{ width:100%; } }
.demo.done .demo-load{ display:none; }
.demo-ideas{ display:none; margin-top:16px; gap:10px; }
.demo.done .demo-ideas{ display:grid; }
.demo-idea{ border:1px solid var(--rule); border-left:4px solid var(--green); border-radius:10px; padding:10px 12px; opacity:0; transform: translateY(10px); }
.demo.done .demo-idea{ animation: demoIn .45s ease forwards; }
.demo.done .demo-idea:nth-child(2){ animation-delay:.35s; }
.demo.done .demo-idea:nth-child(3){ animation-delay:.7s; }
@keyframes demoIn{ to{ opacity:1; transform:none; } }
.demo-idea strong{ display:block; font-size:15px; line-height:1.3; margin:4px 0 2px; }
.demo-idea small{ display:block; font-size:12.5px; color: var(--slate); }
.demo-tag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--green-darker); background: var(--green-tint); border-radius:999px; padding:3px 9px; }
.demo-note{ margin:10px 0 0; text-align:center; font-size:12px; color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce){ .demo *{ animation:none !important; transition:none !important; } .demo-idea{ opacity:1; transform:none; } .demo-prog b{ width:100%; } }
@media (max-width:480px){ .demo-body{ padding:14px; min-height: 400px; } .demo-field{ font-size:13px; } }

/* ---------- Example email brief ---------- */
.brief{ background:#fff; border:1px solid var(--rule); border-radius:16px; padding:22px 24px; box-shadow:0 10px 30px rgba(14,31,77,.06); }
.brief-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.brief-ex{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
.brief h3{ margin:0 0 14px; font-size:22px; font-weight:800; letter-spacing:-.015em; }
.brief-row{ border-top:1px solid var(--rule-soft); padding:12px 0; }
.brief-row b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--green-darker); margin-bottom:4px; }
.brief-row p{ margin:0; font-size:16px; color: var(--slate); line-height:1.5; }
.brief-row ul{ margin:0; padding-left:18px; color: var(--slate); font-size:16px; line-height:1.5; }
.brief-nod{ display:inline-block; margin-left:8px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background: var(--navy); color: var(--green); border-radius:999px; padding:3px 9px; vertical-align:2px; }
/* Keep the demo the same height start to finish, so the page never jumps */
.demo-body{ height: 452px; min-height: 0; overflow: hidden; }
.demo.second .demo-caret{ display:none; }
.demo.done .demo-note-label, .demo.done .demo-field.small, .demo.done .demo-go{ display:none; }
.demo.done .demo-ideas{ margin-top:4px; }
@media (max-width:480px){ .demo-body{ height: 470px; min-height: 0; } }
.demo-empty{ margin-top:16px; border:1.5px dashed var(--rule); border-radius:10px; padding:28px 14px; text-align:center; font-size:13px; font-weight:600; color: var(--muted); }
.demo.loading .demo-empty, .demo.done .demo-empty{ display:none; }

/* ---------- Smaller demo (v2) ---------- */
.demo{ max-width: 430px; margin: 20px auto 14px; }
.demo-bar{ padding: 8px 12px; }
.demo-bar span{ width:8px; height:8px; }
.demo-bar em{ font-size:11px; }
.demo-body{ padding: 14px 14px 16px; height: 318px; }
.demo-label{ font-size:11px; margin-bottom:5px; }
.demo-field{ font-size:12.5px; padding:8px 10px; min-height:36px; margin-bottom:10px; }
.demo-caret{ height:13px; }
.demo-go{ font-size:12.5px; padding:9px 13px; }
.demo-empty{ margin-top:12px; padding:22px 12px; font-size:12px; }
.demo-load{ margin-top:12px; }
.demo-load p{ font-size:12px; }
.demo-ideas{ margin-top:12px; gap:7px; }
.demo.done .demo-go{ display:none; }
.demo.done .demo-ideas{ margin-top:2px; }
.demo-idea{ padding:8px 10px; }
.demo-idea strong{ font-size:13.5px; margin:3px 0 1px; }
.demo-idea small{ font-size:11.5px; }
.demo-tag{ font-size:9.5px; padding:2px 8px; }
@media (max-width:480px){ .demo{ max-width: 100%; } .demo-body{ height: 330px; padding:12px; } .demo-field{ font-size:12px; } }

/* ---------- The formula: clear steps 1, 2, 3 ---------- */
.formula{ list-style:none; margin: 30px 0 0; padding:0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; position: relative; }
.formula li{ position:relative; background: var(--navy); color:#fff; border-radius:18px; padding: 26px 22px 24px; box-shadow: 0 14px 34px rgba(14,31,77,.18); }
.formula li:not(:last-child)::after{ content:"\2192"; position:absolute; right:-14px; top:38px; width:24px; height:24px; border-radius:50%; background: var(--green); color: var(--navy); font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; z-index:2; }
.f-num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background: var(--green); color: var(--navy); font-weight:900; font-size:22px; flex:none; }
.f-num.sm{ width:30px; height:30px; font-size:15px; }
.f-tag{ display:block; margin: 14px 0 6px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--green); }
.formula h4{ margin:0 0 8px; font-size:19px; line-height:1.25; font-weight:800; color:#fff; letter-spacing:-.01em; }
.formula p{ margin:0; font-size:15.5px; line-height:1.55; color: rgba(255,255,255,.78); }
@media (max-width:760px){
  .formula{ grid-template-columns: 1fr; gap: 22px; }
  .formula li:not(:last-child)::after{ content:"\2193"; right:auto; left:50%; top:auto; bottom:-17px; transform:translateX(-50%); }
}

/* ---------- Example brief, tied to the formula ---------- */
.brief-intro{ text-align:center; margin: 44px auto 14px; font-size:16px; font-weight:700; color: var(--slate); }
.brief2{ max-width: 720px; margin: 0 auto; background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--rule); box-shadow: 0 18px 44px rgba(14,31,77,.10); }
.b2-top{ background: var(--green-mist); border-bottom: 1px solid #CBEBD3; padding: 20px 24px 18px; }
.b2-meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.b2-cat{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background: var(--navy); color: var(--green); border-radius:999px; padding:4px 11px; }
.b2-ex{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--green-darker); }
.b2-top h3{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color: var(--navy); }
.b2-formula{ display:grid; grid-template-columns: repeat(3, 1fr); border-bottom:1px solid var(--rule); }
.b2-step{ display:flex; gap:10px; align-items:flex-start; padding: 16px 16px; }
.b2-step + .b2-step{ border-left: 1px solid var(--rule); }
.b2-step b{ display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin: 2px 0 4px; }
.b2-step p{ margin:0; font-size:14.5px; line-height:1.45; color: var(--navy); font-weight:600; }
.b2-body{ padding: 6px 24px 20px; }
.b2-field{ padding: 14px 0; }
.b2-field + .b2-field{ border-top: 1px dashed var(--rule); }
.b2-field > b{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--green-darker); margin-bottom:8px; }
.b2-field p{ margin:0; font-size:16px; color: var(--slate); line-height:1.5; }
.b2-inbox{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.b2-inbox li{ display:flex; align-items:center; gap:10px; background: var(--bg); border:1px solid var(--rule-soft); border-radius:10px; padding:9px 12px; font-size:15px; font-weight:700; color: var(--navy); }
.b2-inbox li::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--green); flex:none; }
.brief2 blockquote{ margin:0; padding: 12px 16px; border-left: 4px solid var(--green); background: var(--green-mist); border-radius: 0 10px 10px 0; font-size:17px; font-weight:700; color: var(--navy); line-height:1.45; }
.b2-points{ margin:0; padding-left:20px; color: var(--slate); font-size:16px; line-height:1.6; }
.b2-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.b2-cta > b{ width:100%; margin-bottom:0; }
.b2-btn{ display:inline-block; background: var(--green); color: var(--navy); font-weight:800; font-size:14px; padding:9px 16px; border-radius:10px; }
@media (max-width:760px){
  .b2-formula{ grid-template-columns: 1fr; }
  .b2-step + .b2-step{ border-left:0; border-top:1px solid var(--rule); }
  .b2-top, .b2-body{ padding-left:18px; padding-right:18px; }
  .b2-top h3{ font-size:21px; }
}
.demo-body{ height: 372px; }
@media (max-width:480px){ .demo-body{ height: 376px; } }
.wrap.wrap-formula{ max-width: 1000px; }
.wrap-formula .brief2{ max-width: 860px; }

/* ---------- Case studies: each one its own clearly separate card ---------- */
.result-card.cs-card{ padding:0; overflow:hidden; margin-top: 36px; border: 2px solid var(--navy); }
.result-card.cs-card:first-of-type{ margin-top: 8px; }
.cs-head{ background: var(--navy); color:#fff; padding: 16px 22px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.cs-num{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--navy); background: var(--green); border-radius:999px; padding:4px 11px; }
.cs-name{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.cs-story{ margin: 18px 22px 4px; font-size:17px; line-height:1.5; color: var(--slate); }
.cs-story strong{ color: var(--navy); }
.cs-card .big-stat, .cs-card .meta{ margin-left:22px; margin-right:22px; }
.cs-card .screenshots{ margin: 0 22px 22px; }
@media (max-width:480px){
  .cs-head{ padding: 14px 16px; }
  .cs-name{ font-size:21px; }
  .cs-story, .cs-card .big-stat, .cs-card .meta{ margin-left:16px; margin-right:16px; }
  .cs-card .screenshots{ margin: 0 16px 16px; }
}

/* ===================================================================
   App branding (matches the Campaign Idea Generator app):
   green accent, Poppins, light hero, navy formula panel.
   =================================================================== */
:root{
  --green:        #2AAE4A;   /* primary accent / CTA bg */
  --green-deep:   #229A3F;   /* CTA hover */
  --green-darker: #1E8A39;   /* readable on white */
  --green-tint:   #E3F5E8;   /* badge bg */
  --green-mist:   #F1FAF3;   /* very light bg */
  --navy:         #111B4A;
}
body, button, input{ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
::selection{ background: var(--green); color:#fff; }

/* Buttons: white text on green */
.btn, .btn:hover{ color:#fff; }
.btn{ box-shadow: 0 10px 22px -10px rgba(42,174,74,.6); }
.check-mini{ color:#fff; }
.num-badge, .f-num, .cs-num{ color:#fff !important; }

/* Hero: light, on the page grid */
section.hero{ background: transparent; background-image:none; color: var(--navy); padding-top: 40px; padding-bottom: 36px; }
section.hero::before{ display:none; }
section.hero h1.hero-h1{ color: var(--navy); font-weight:800; letter-spacing:-.025em; }
section.hero .hero-sub{ color: var(--slate); font-style: italic; }
section.hero .hero-sub strong{ color: var(--navy); }
section.hero .trust-line{ color: var(--slate); }
section.hero .trust-line strong{ color: var(--green); }
section.hero .cta-trust{ color: var(--slate); }
.eyebrow{ color: var(--green-darker); background: var(--green-tint); border-color: rgba(42,174,74,.35); }
.eyebrow .green-dot{ box-shadow: 0 0 8px rgba(42,174,74,.6); }
.logo-bar-section{ border-top: 1px solid var(--rule); }

/* Demo window: looks like the real app */
.demo-win{ box-shadow: 0 20px 50px rgba(17,27,74,.12), 0 0 0 1px var(--rule); }
.demo-step{ display:flex; align-items:center; gap:9px; margin: 2px 0 10px; font-size:15px; font-weight:700; color: var(--navy); }
.demo-step i{ font-style:normal; width:24px; height:24px; border-radius:50%; background: var(--navy); color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.demo-label{ font-size:12px; font-weight:600; color: var(--navy); }
.demo-field{ background: #F8FAFC; }
.demo.typing .demo-field:first-of-type{ border-color: var(--green); background:#fff; }
.demo-go{ display:flex; justify-content:center; width:100%; color:#fff; box-shadow: 0 6px 16px rgba(42,174,74,.3); font-weight:700; }
.demo-idea{ border-left-color: var(--green); }
.demo-note{ color: var(--muted); }

/* The formula: navy panel, white cards, green numbers */
.wrap.wrap-formula{ background: var(--navy); border-radius: 28px; padding: 48px 40px 44px; }
.wrap-formula .section-head h2.section{ color:#fff; }
.wrap-formula .section-head .green{ color: var(--green); }
.wrap-formula p.lead{ color: rgba(255,255,255,.82) !important; }
.formula li{ background:#fff; color: var(--navy); box-shadow:none; }
.formula h4{ color: var(--navy); }
.formula p{ color: var(--slate); }
.f-tag{ color: var(--green-darker); }
.formula li:not(:last-child)::after{ color:#fff; }
@media (max-width:760px){ .wrap.wrap-formula{ border-radius: 0; padding: 40px 22px; } }
.demo.done .demo-step{ display:none; }
.demo-body{ height: 384px; }
@media (max-width:480px){ .demo-body{ height: 400px; } }

/* ===================== Phones: fewer lines, button higher ===================== */
.hero-cta-mobile{ display:none !important; }
.tl-num{ font-size:22px; }
@media (max-width:600px){
  .hero-cta-mobile{ display:flex !important; }
  .cta-trust.hero-cta-mobile{ display:flex !important; justify-content:center; margin-bottom: 4px; }
  .hero-cta-desktop{ display:none !important; }
  section.hero{ padding-top: 22px; padding-bottom: 20px; }
  .eyebrow{ margin-bottom: 14px; }
  body section.hero h1.hero-h1{ font-size: 25px !important; line-height: 1.2 !important; margin-bottom: 10px; }
  section.hero .hero-sub{ font-size: 15px; line-height: 1.45; margin-bottom: 6px !important; }
  body section.hero .trust-line{ font-size: 13.5px !important; line-height: 1.4; margin-bottom: 14px; }
  .tl-num{ font-size: 14.5px; }
  .hero-cta-mobile .btn{ width: 100%; }
  .cta-group.hero-cta-mobile{ margin-top: 4px; }
  .demo{ margin-top: 18px; }

  /* Body copy: smaller and tighter so sections take fewer lines */
  body{ font-size: 16px; }
  h2.section{ font-size: 24px !important; line-height: 1.2 !important; }
  p.lead{ font-size: 16.5px !important; line-height: 1.5; }
  p.body{ font-size: 15.5px !important; line-height: 1.55; margin-bottom: 12px; }
  ul.checks li{ font-size: 15.5px !important; line-height: 1.45; }
  blockquote.q{ font-size: 17px !important; }
  .formula li{ padding: 20px 18px; }
  .formula h4{ font-size: 17px; }
  .formula p{ font-size: 14.5px; }
  .cs-story{ font-size: 15.5px; }
  .steps li p, .feature p, .col-card p, details .answer{ font-size: 15px !important; line-height: 1.5; }
  section.block.tight{ padding: 30px 0; }
}

/* ===================================================================
   PREMIUM LAYER
   Warm ivory ground, navy as the dominant colour, one deep emerald
   accent, green kept for the buy buttons only, hairline borders,
   soft low shadows, an italic serif for the highlighted words.
   =================================================================== */
:root{
  --ivory:   #F8F6F1;
  --line:    #E6E1D6;
  --line-2:  #EFEBE3;
  --emerald: #0F6E3A;
  --ink:     #111B4A;
  --soft-ink:#4B5470;
  --serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --shadow-sm: 0 1px 2px rgba(17,27,74,.04), 0 8px 24px -14px rgba(17,27,74,.14);
  --shadow-lg: 0 2px 4px rgba(17,27,74,.03), 0 30px 60px -30px rgba(17,27,74,.25);
}

/* Ground: no grid */
body{ background: var(--ivory) !important; background-image: none !important; color: var(--ink); }
p.body, p.lead, .feature p, .col-card p, ol.steps p, details.faq .answer, .formula p, .cs-story{ color: var(--soft-ink) !important; }
p.body strong, p.lead strong, ul.checks li strong, .col-card p strong, .cs-story strong{ font-weight: 600; color: var(--ink); }

/* Type: tighter, calmer headings; serif italic for the highlighted words */
h1.hero-h1, h2.section, .final-cta h2{ font-weight: 700 !important; letter-spacing: -0.035em !important; }
h1 .green, h2 .green, .final-cta h2 .green{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.01em; color: var(--emerald) !important;
  font-size: 1.12em; line-height: 1;
}
.wrap-formula h2 .green, .final-cta h2 .green{ color: #7FD99A !important; }
section.hero h1.hero-h1{ font-size: clamp(40px, 5.4vw, 62px); line-height: 1.06; max-width: 820px; margin-left:auto; margin-right:auto; }
h2.section{ font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; }
section.hero .hero-sub{ font-style: normal; font-size: 19px; color: var(--soft-ink); }
section.hero .trust-line{ font-size: 15px !important; color: var(--soft-ink); }
section.hero .trust-line strong, .tl-num{ color: var(--ink) !important; font-weight: 600; font-size: inherit !important; border-bottom: 2px solid rgba(15,110,58,.35); }

/* Labels: small spaced capitals, no pills */
.eyebrow{ background: none !important; border: 0 !important; padding: 0 !important; color: var(--emerald) !important; font-size: 12px; letter-spacing: .22em; font-weight: 600; gap: 12px; }
.eyebrow .green-dot{ display:none; }
.eyebrow::before, .eyebrow::after{ content:""; width: 28px; height: 1px; background: rgba(15,110,58,.45); }
.feature .tag, .col-card .tag, .f-tag, .cs-num, .demo-tag{
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  color: var(--emerald) !important; font-weight: 600 !important; letter-spacing: .18em !important;
}
.col-card .tag{ color: var(--soft-ink) !important; }
.col-card.win .tag{ color: var(--emerald) !important; }

/* Buttons: green kept here only, quieter shadow */
.btn{ background: #1F9A45; border-radius: 12px; font-weight: 600; letter-spacing: 0; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 24px -14px rgba(16,90,42,.65); }
.btn:hover{ background: #188039; transform: translateY(-1px); }
.cta-trust{ font-size: 13.5px; }
.check-mini{ background: none !important; color: var(--emerald) !important; }

/* Ticks: thin emerald checks, no green squares */
ul.checks li{ border-color: var(--line) !important; }
ul.checks li::before{
  background: none !important; box-shadow: none !important; border-radius: 50% !important;
  border: 1.5px solid rgba(15,110,58,.45);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-size: 12px 12px !important; background-position: center !important; background-repeat: no-repeat !important;
  width: 24px !important; height: 24px !important;
}

/* Cards: white, hairline, soft shadow */
.feature, .col-card, .order-card, .result-card, details.faq, .demo-win, .client-snapshot{
  border-color: var(--line) !important;
}
.feature, .col-card, .result-card{ background:#fff; border-radius: 20px; box-shadow: var(--shadow-sm); }
.col-card.win{ border-color: rgba(15,110,58,.35) !important; box-shadow: var(--shadow-lg); }
.order-card{ border: 1px solid var(--line) !important; border-radius: 24px; box-shadow: var(--shadow-lg) !important; }
.price-pile .num{ font-weight: 700; letter-spacing: -.04em; font-size: 52px; }
.guarantee-row svg{ color: var(--emerald) !important; }
.feature .num-badge{ background: none !important; color: var(--emerald) !important; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; width:auto; height:auto; justify-content:flex-start; }
ol.steps li{ border-color: var(--line) !important; }
ol.steps li::before{ background: none !important; color: var(--emerald) !important; border: 1px solid var(--line); border-radius: 50% !important; font-family: var(--serif); font-style: italic; font-weight: 400 !important; font-size: 28px !important; }
blockquote.q{ border-left-color: var(--emerald) !important; font-family: var(--serif); font-style: italic; font-weight: 400 !important; font-size: 26px !important; line-height: 1.3; letter-spacing: -.005em; color: var(--ink); }

/* Hero demo: lighter frame */
.demo-win{ box-shadow: var(--shadow-lg) !important; border: 1px solid var(--line); }
.demo-bar{ background: #FBFAF7; border-bottom-color: var(--line-2); }
.demo-idea{ border-left-width: 2px; border-left-color: var(--emerald); }
.demo-go{ background: #1F9A45; box-shadow: none; font-weight: 600; }
.demo-step i{ background: var(--ink); }

/* Logos: grayscale, calmer */
section.logo-bar-section{ background: transparent !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.logo-bar{ filter: grayscale(1) contrast(1.05); opacity: .62; }
.logo-label{ letter-spacing: .22em !important; font-weight: 600 !important; color: var(--soft-ink) !important; }

/* The formula: deep navy panel, glass cards, serif numerals */
.wrap.wrap-formula{ background: radial-gradient(120% 90% at 85% 0%, #1C2A66 0%, #111B4A 55%, #0C1438 100%); box-shadow: var(--shadow-lg); }
.formula li{ background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.12); box-shadow: none !important; }
.formula h4{ color: #fff !important; font-weight: 600 !important; }
.formula p{ color: rgba(255,255,255,.72) !important; }
.formula .f-tag{ color: #7FD99A !important; }
.formula .f-num{ background: none !important; color: #7FD99A !important; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 40px; width:auto; height:auto; justify-content:flex-start; }
.formula li:not(:last-child)::after{ background: #111B4A !important; border: 1px solid rgba(255,255,255,.18); color: #7FD99A !important; }

/* Case studies: white cards, serif names, no heavy navy bar */
.result-card.cs-card{ border: 1px solid var(--line) !important; box-shadow: var(--shadow-lg); }
.cs-head{ background: transparent !important; padding: 24px 24px 0 !important; display:block; }
.cs-num{ display:block; margin-bottom: 6px; font-size: 11px !important; }
.cs-name{ color: var(--ink) !important; font-family: var(--serif); font-style: italic; font-weight: 400 !important; font-size: 34px !important; letter-spacing: -.01em !important; }
.result-card .big-stat{ font-weight: 700; letter-spacing: -.04em; }
.result-card .big-stat .green{ color: var(--emerald) !important; }
.screenshot-label{ background: var(--ink) !important; letter-spacing: .18em; font-weight: 600; }
.screenshot.is-after .screenshot-label{ background: var(--emerald) !important; }

/* Founder stats */
.stat-row .stat .num{ font-weight: 700; letter-spacing: -.04em; }
.stat-row .stat .num .green{ color: var(--emerald) !important; }

/* FAQ */
details.faq{ background: transparent; }
details.faq > summary{ font-weight: 600 !important; }

/* Final call to action */
.final-cta{ background: radial-gradient(120% 90% at 85% 0%, #1C2A66 0%, #111B4A 55%, #0C1438 100%) !important; border-radius: 28px; box-shadow: var(--shadow-lg); }

/* Rhythm: more air between sections on larger screens */
@media (min-width: 761px){ section.block.tight{ padding: 64px 0; } section.block{ padding: 72px 0; } }

/* Gentle entrance for the hero */
@media (prefers-reduced-motion: no-preference){
  section.hero .eyebrow, section.hero h1, section.hero .hero-sub, section.hero .trust-line, section.hero .demo{ animation: riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
  section.hero h1{ animation-delay: .06s; }
  section.hero .hero-sub{ animation-delay: .12s; }
  section.hero .trust-line{ animation-delay: .18s; }
  section.hero .demo{ animation-delay: .26s; }
}
@keyframes riseIn{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }

/* Phones */
@media (max-width:600px){
  body section.hero h1.hero-h1{ font-size: 31px !important; line-height: 1.1 !important; }
  section.hero .hero-sub{ font-size: 15px; }
  h2.section{ font-size: 26px !important; }
  blockquote.q{ font-size: 21px !important; }
  .cs-name{ font-size: 28px !important; }
  .price-pile .num{ font-size: 42px; }
}
.founder-photo{ border: 1px solid var(--line) !important; box-shadow: 0 0 0 6px #fff, var(--shadow-lg) !important; }
.founder-title{ color: var(--emerald) !important; letter-spacing: .2em !important; font-weight: 600 !important; }
.stat-row{ border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm); }

/* ---------- No serif: Poppins italic for highlights, plain Poppins elsewhere ---------- */
:root{ --serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
h1 .green, h2 .green, .final-cta h2 .green{ font-style: italic; font-weight: 600; font-size: 1em; letter-spacing: -.03em; line-height: inherit; }
.cs-name{ font-style: normal !important; font-weight: 600 !important; font-size: 26px !important; letter-spacing: -.02em !important; }
.feature .num-badge, .formula .f-num{ font-style: normal; font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
ol.steps li::before{ font-style: normal; font-weight: 500 !important; font-size: 20px !important; }
blockquote.q{ font-style: normal; font-weight: 600 !important; font-size: 22px !important; letter-spacing: -.02em; line-height: 1.4; }
@media (max-width:600px){ .cs-name{ font-size: 22px !important; } blockquote.q{ font-size: 18px !important; } }

/* ---------- Case study screenshots: smaller, same size in both case studies ---------- */
.cs-card .screenshots{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-card .screenshot{ box-shadow: none; border-color: var(--line) !important; border-radius: 12px; }
.cs-card .screenshot img{ width: 100%; height: 150px; object-fit: contain; object-position: center; background:#fff; padding: 8px 10px; }
.cs-card .screenshot-label{ font-size: 10px !important; padding: 5px 0 !important; }
@media (max-width:600px){
  .cs-card .screenshots{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .cs-card .screenshot img{ height: 96px; padding: 6px; }
}

/* ---------- Screenshots cropped to the numbers: big and readable ---------- */
.cs-card .screenshot img{ height: auto !important; aspect-ratio: 2.77 / 1; object-fit: contain; padding: 14px 16px !important; }
@media (max-width:600px){
  .cs-card .screenshots{ grid-template-columns: 1fr !important; gap: 10px; }
  .cs-card .screenshot img{ padding: 12px 14px !important; }
}

/* ---------- Hero eyebrow: more noticeable, still refined ---------- */
section.hero .eyebrow{
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: .16em !important;
  color: var(--emerald) !important;
  background: rgba(15,110,58,.08) !important;
  border: 1px solid rgba(15,110,58,.28) !important;
  padding: 9px 18px !important; border-radius: 999px;
  margin-bottom: 22px;
}
section.hero .eyebrow::before, section.hero .eyebrow::after{ display:none; }
section.hero .eyebrow .green-dot{ display:inline-block !important; width:8px; height:8px; background: var(--emerald); box-shadow: 0 0 0 3px rgba(15,110,58,.15); }
@media (max-width:600px){
  section.hero .eyebrow{ font-size: 12.5px !important; letter-spacing: .13em !important; padding: 8px 14px !important; margin-bottom: 16px; }
}

/* ---------- Hero eyebrow: plain text, bigger and bolder, no pill, no dot ---------- */
section.hero .eyebrow{
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: .2em !important;
  color: var(--emerald) !important; margin-bottom: 18px; display: inline-block;
}
section.hero .eyebrow .green-dot{ display: none !important; }
section.hero .eyebrow::before{ display: none !important; }
section.hero .eyebrow::after{ display: block !important; content:""; width: 36px; height: 2px; background: var(--emerald); margin: 10px auto 0; border-radius: 2px; }
@media (max-width:600px){ section.hero .eyebrow{ font-size: 13px !important; letter-spacing: .16em !important; margin-bottom: 14px; } }

/* ---------- Hero eyebrow: highlighter mark behind the text, no line ---------- */
section.hero .eyebrow::after{ display: none !important; }
section.hero .eyebrow{
  background: linear-gradient(transparent 52%, rgba(42,174,74,.24) 52%, rgba(42,174,74,.24) 92%, transparent 92%) !important;
  padding: 0 6px !important; color: var(--emerald) !important;
}

/* ---------- Hero eyebrow: plain bold emerald text only ---------- */
section.hero .eyebrow{ background: none !important; padding: 0 !important; }

/* ---------- Highlighted headline words: same font as the headline, just green ---------- */
h1 .green, h2 .green, .final-cta h2 .green{ font-style: normal !important; font-weight: inherit !important; letter-spacing: inherit !important; }
@media (min-width:761px){ section.hero .hero-sub{ max-width: 720px; margin-left:auto; margin-right:auto; } }
@media (min-width:761px){ section.hero .hero-sub{ max-width: 860px; } }
section.hero .hero-sub, section.hero .trust-line, section.hero h1.hero-h1{ text-wrap: balance; }
section.hero h1.hero-h1{ text-wrap: wrap; }
@media (min-width:761px){
  body section.hero > .wrap{ max-width: 980px !important; }
  section.hero h1.hero-h1{ max-width: 960px; font-size: clamp(40px, 4.8vw, 58px); }
  section.hero .hero-sub{ max-width: 760px; }
}

/* ===================================================================
   Hero text: one column, one scale, one rhythm
   eyebrow 14 / headline 52 / sub 20 / proof 15, all centred on 760px
   =================================================================== */
@media (min-width:761px){
  body section.hero > .wrap{ max-width: 860px !important; }
  section.hero .eyebrow{ font-size: 13px !important; letter-spacing: .22em !important; margin-bottom: 20px !important; }
  section.hero h1.hero-h1{ max-width: 760px !important; margin: 0 auto 20px !important; font-size: 52px !important; line-height: 1.08 !important; letter-spacing: -.035em !important; text-wrap: balance !important; }
  section.hero .hero-sub{ max-width: 600px !important; margin: 0 auto 14px !important; font-size: 20px !important; line-height: 1.5 !important; text-wrap: balance !important; }
  body section.hero .trust-line{ max-width: 600px; margin: 0 auto !important; font-size: 15px !important; line-height: 1.5 !important; text-wrap: balance; }
  section.hero .demo{ margin-top: 34px !important; }
}
/* Same colour family for sub and proof; the number is bold, no underline */
section.hero .hero-sub{ color: var(--soft-ink) !important; font-weight: 400 !important; }
body section.hero .trust-line{ color: var(--muted) !important; font-weight: 400 !important; }
section.hero .trust-line strong, section.hero .tl-num{ border-bottom: 0 !important; color: var(--ink) !important; font-weight: 600 !important; }
@media (max-width:760px){
  section.hero .eyebrow{ font-size: 12px !important; letter-spacing: .18em !important; margin-bottom: 14px !important; }
  body section.hero h1.hero-h1{ font-size: 30px !important; line-height: 1.12 !important; margin-bottom: 12px !important; text-wrap: balance; }
  section.hero .hero-sub{ font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 8px !important; text-wrap: balance; }
  body section.hero .trust-line{ font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 16px !important; text-wrap: balance; }
}
@media (min-width:761px){ section.hero .eyebrow{ font-size: 15px !important; letter-spacing: .2em !important; } }
@media (max-width:760px){ section.hero .eyebrow{ font-size: 13.5px !important; letter-spacing: .16em !important; } }
section.hero .hero-sub strong{ color: var(--ink) !important; font-weight: 600 !important; }

/* ===================== The boring inbox ===================== */
.inbox{ max-width: 560px; margin: 26px auto 34px; background:#fff; border:1px solid var(--line); border-radius: 18px; overflow:hidden; box-shadow: var(--shadow-lg); }
.ib-head{ display:flex; justify-content:space-between; align-items:center; padding: 14px 18px; border-bottom:1px solid var(--line-2); background:#FBFAF7; font-size:14px; font-weight:700; color: var(--ink); }
.ib-count{ font-size:12px; font-weight:600; color:#B42318; background:#FEF3F2; border-radius:999px; padding:3px 10px; }
.ib-viewport{ position:relative; height: 300px; overflow:hidden; }
.ib-viewport::before, .ib-viewport::after{ content:""; position:absolute; left:0; right:0; height:56px; z-index:2; pointer-events:none; }
.ib-viewport::before{ top:0; background: linear-gradient(#fff, rgba(255,255,255,0)); }
.ib-viewport::after{ bottom:0; background: linear-gradient(rgba(255,255,255,0), #fff); }
.ib-list{ list-style:none; margin:0; padding:0; animation: ibScroll 22s linear infinite; }
.ib-row{ display:flex; align-items:flex-start; gap:12px; padding: 12px 18px; border-bottom:1px solid var(--line-2); }
.ib-av{ flex:none; width:32px; height:32px; border-radius:50%; background:#EEF0F5; color: var(--muted); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ib-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.ib-txt b{ font-size:12.5px; font-weight:600; color: var(--muted); }
.ib-txt strong{ font-size:14.5px; font-weight:600; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ib-txt em{ font-style:normal; font-size:13px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ib-time{ flex:none; font-size:12px; color: var(--muted); padding-top:2px; }
@keyframes ibScroll{ from{ transform: translateY(0); } to{ transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce){ .ib-list{ animation:none; } }

/* Copy under the inbox */
.diag-lead{ text-align:center; max-width: 640px; margin: 0 auto 18px !important; text-wrap: balance; }
.diag-callout{ text-align:center; max-width: 640px; margin: 0 auto 30px; font-size: 30px; line-height:1.2; font-weight:700; letter-spacing:-.03em; color: var(--ink); text-wrap: balance; }
.diag-callout .green{ color: var(--emerald); }
@media (max-width:600px){
  .ib-viewport{ height: 260px; }
  .ib-row{ padding: 11px 14px; }
  .ib-txt strong{ font-size:14px; }
  .diag-callout{ font-size: 24px; margin-bottom: 24px; }
}
.diag-callout + blockquote.q{ max-width: 640px; margin-left:auto !important; margin-right:auto !important; }

/* ===================== Card drop: the same emails, thrown on the pile ===================== */
.pile{ max-width: 560px; margin: 18px auto 30px; }
.pile-stage{ position: relative; height: 300px; }
.mail{
  position: absolute; left: 50%; top: 50%; width: min(400px, 88%);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px 15px; text-align: left;
  box-shadow: 0 1px 2px rgba(17,27,74,.05), 0 18px 34px -18px rgba(17,27,74,.35);
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--x), -360px) rotate(calc(var(--r) * -2.2)) scale(1.06);
  transition: transform .6s cubic-bezier(.2,1.25,.35,1), opacity .25s ease;
  will-change: transform, opacity;
}
.mail.in{ opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
.pile-stage.clear .mail{ opacity: 0; transform: translate(-50%, -50%) translate(var(--x), 140px) rotate(calc(var(--r) * 2)) scale(.94); transition: transform .6s ease-in, opacity .5s ease-in; }
.mail-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom: 8px; }
.mail-from{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color: var(--muted); }
.mail-from i{ font-style:normal; width:24px; height:24px; border-radius:50%; background:#EEF0F5; color: var(--muted); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.mail-tag{ font-size:10.5px; font-weight:700; letter-spacing:.1em; color:#B42318; background:#FEF3F2; border:1px solid #FECDCA; border-radius:6px; padding:3px 8px; white-space:nowrap; }
.mail-subj{ font-size:17px; font-weight:700; letter-spacing:-.015em; color: var(--ink); line-height:1.3; margin-bottom:3px; }
.mail-prev{ font-size:13.5px; color: var(--muted); line-height:1.4; }
@media (max-width:600px){
  .pile-stage{ height: 250px; }
  .mail{ width: 86%; padding: 12px 14px 13px; }
  .mail-subj{ font-size: 15.5px; }
  .mail-prev{ font-size: 12.5px; }
}
/* Cards enter from the top edge of the graphic, never over the headline */
.pile-stage{ overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 46px); mask-image: linear-gradient(to bottom, transparent 0, #000 46px); padding: 0 10px; }
.mail{ transform: translate(-50%, -50%) translate(var(--x), -260px) rotate(calc(var(--r) * -2.2)) scale(1.04); }
.pile-stage.clear .mail{ transform: translate(-50%, -50%) translate(var(--x), 120px) rotate(calc(var(--r) * 2)) scale(.94); }
.pile-stage{ overflow: visible; -webkit-mask-image: none; mask-image: none; clip-path: inset(0 -80px -80px -80px); }
.mail{ transition: transform .6s cubic-bezier(.2,1.25,.35,1), opacity .35s ease; }
@media (max-width:600px){ .mail{ width: 80%; } }
/* Messier pile: each card is thrown from a random side and spin */
.mail{ transform: translate(-50%, -50%) translate(calc(var(--x) + var(--fx, 0px)), -260px) rotate(var(--fr, 0deg)) scale(1.05); }
.pile-stage{ height: 320px; }
@media (max-width:600px){ .pile-stage{ height: 280px; } }
.diag-lead + blockquote.q{ max-width: 640px; margin-left:auto !important; margin-right:auto !important; margin-top: 26px !important; }
.pile + .diag-callout{ margin-top: 8px; margin-bottom: 22px; }
@media (min-width:761px){ section.hero .hero-sub{ max-width: 700px !important; } }
/* Under the card pile: two levels only, statement + one supporting paragraph */
.pile + .diag-callout{ font-size: 32px; margin: 6px auto 16px; max-width: 680px; }
.diag-callout + .diag-lead{ font-size: 19px !important; line-height: 1.55; color: var(--soft-ink) !important; max-width: 640px; margin: 0 auto !important; text-wrap: pretty; }
@media (max-width:600px){ .pile + .diag-callout{ font-size: 25px; } .diag-callout + .diag-lead{ font-size: 16px !important; } }
.diag-callout + .diag-lead{ margin-bottom: 14px !important; }
.diag-lead.diag-lead-2{ font-size: 19px !important; line-height: 1.55; color: var(--soft-ink) !important; max-width: 640px; margin: 0 auto !important; text-wrap: pretty; }
@media (max-width:600px){ .diag-lead.diag-lead-2{ font-size: 16px !important; } }
.wrap-formula p.lead strong{ color:#fff !important; font-weight: 700 !important; }
/* Phones: every buy button full width, full name, wrapping neatly */
@media (max-width:600px){
  a.btn{ display:flex !important; width:100% !important; justify-content:center; text-wrap: balance; padding-top: 16px !important; padding-bottom: 16px !important; }
  .cta-group, .cta-group.center{ width:100%; }
}
/* Phones: hero text uses more of the width; headline is exactly two lines */
@media (max-width:600px){
  body section.hero > .wrap{ padding-left: 16px !important; padding-right: 16px !important; }
  body section.hero h1.hero-h1{ font-size: clamp(22px, 7.1vw, 28px) !important; line-height: 1.15 !important; text-wrap: nowrap; white-space: nowrap; }
  section.hero .hero-sub{ max-width: none !important; }
}
@media (max-width:600px){ section.hero .hero-sub{ font-size: 15.5px !important; line-height: 1.5 !important; } }