:root{
    /* Deep teal & coral: rich blue-green base, cream text, warm coral accent */
    --ink:#f3efe4;          /* warm cream text */
    --paper:#0c2b2b;        /* deep teal base */
    --paper-2:#103535;      /* raised teal surface */
    --line:#1f4a48;         /* teal hairline */
    --brick:#ff7a59;        /* coral = primary accent */
    --brick-2:#e85f3e;      /* deeper coral */
    --moss:#5ec8b4;         /* aqua = secondary signal */
    --gold:#ffb347;         /* warm amber for stats */
    --mute:#8fb3ad;         /* muted seafoam text */
    --card-solid:#11393800; /* overridden below */
    --card-solid:#123a39;   /* card surface */
    --radius:14px;
    --maxw:1140px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    -webkit-font-smoothing:antialiased;line-height:1.55;
  }
  .ui{font-family:ui-sans-serif,"Helvetica Neue",Arial,system-ui,sans-serif}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  a{color:inherit}
  h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-weight:600;margin:0}

  /* ---- nav ---- */
  header.site{position:sticky;top:0;z-index:50;background:rgba(12,43,43,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:20px;text-decoration:none}
  .brand .dot{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;font-family:ui-sans-serif,system-ui,sans-serif}
  .nav nav{display:flex;gap:28px;align-items:center}
  .nav nav a{font-size:15px;text-decoration:none;color:var(--mute);font-family:ui-sans-serif,system-ui,sans-serif}
  .nav nav a:hover{color:var(--ink)}
  .btn{font-family:ui-sans-serif,system-ui,sans-serif;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-weight:600;font-size:15px;padding:12px 20px;border-radius:999px;text-decoration:none;transition:transform .12s ease, box-shadow .12s ease}
  .btn.primary{background:var(--brick);color:#fff;box-shadow:0 1px 0 var(--brick-2)}
  .btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,122,89,.32)}
  .btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}
 
  /* ---- hero ---- */
  .hero{padding:76px 0 40px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:stretch}
  .hero-copy{align-self:center}
  .eyebrow{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);font-weight:700;margin-bottom:20px}
  h1.hero-h{font-size:clamp(40px,6.2vw,68px)}
  h1.hero-h em{font-style:normal;color:var(--brick);position:relative;white-space:nowrap}
  .lede{font-size:20px;color:#d6e2dd;margin:22px 0 30px;max-width:54ch}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .cta-note{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;color:var(--mute);margin-top:14px}
 
  /* ---- hero visual: background photo, height-capped so it never overflows ---- */
  .hero-photo{width:100%;height:100%;min-height:420px;max-height:560px;
    background-image:url('/img/hero.jpg');background-size:cover;background-position:center;
    border-radius:20px;border:1px solid var(--line);
    box-shadow:0 30px 70px -32px rgba(0,0,0,.55)}
 
  /* ---- in-section photos: fixed height + cover so they crop to a clean band ---- */
  .section-img{display:block;width:100%;max-width:820px;height:340px;
    margin:0 auto 8px;object-fit:cover;border-radius:16px;
    border:1px solid var(--line);box-shadow:0 22px 54px -30px rgba(0,0,0,.5)}
  /* How-it-works: show the whole phone photo, no awkward crop */
  #how .section-img{max-width:560px;height:auto;aspect-ratio:3/2;object-fit:cover;
    object-position:center 30%;margin:0 auto 48px}
 
  /* ---- transcript card (signature) ---- */
  .phone{background:var(--card-solid);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 24px 60px -28px rgba(21,32,28,.45);position:relative}
  .phone:before{content:"";position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);pointer-events:none}
  .phone .status{font-family:ui-sans-serif,system-ui,sans-serif;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--mute);padding:0 4px 14px;border-bottom:1px dashed var(--line);margin-bottom:16px}
  .live{display:flex;align-items:center;gap:7px;color:var(--moss);font-weight:600}
  .live .pulse{width:8px;height:8px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 0 rgba(47,93,74,.5);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,93,74,.45)}70%{box-shadow:0 0 0 9px rgba(47,93,74,0)}100%{box-shadow:0 0 0 0 rgba(47,93,74,0)}}
  .line{display:flex;gap:10px;margin:0 0 13px;opacity:0;transform:translateY(6px);animation:rise .5s forwards}
  .line .who{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);min-width:64px;padding-top:7px}
  .bubble{font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;line-height:1.45;padding:10px 14px;border-radius:13px;max-width:80%}
  .agent .bubble{background:var(--paper-2);border:1px solid var(--line);border-top-left-radius:4px}
  .caller{flex-direction:row-reverse}
  .caller .who{text-align:right}
  .caller .bubble{background:var(--moss);color:#06201c;border-top-right-radius:4px}
  .tag{font-family:ui-sans-serif,system-ui,sans-serif;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--moss);background:rgba(94,200,180,.12);border:1px solid rgba(94,200,180,.4);padding:3px 9px;border-radius:999px;margin-top:6px}
  @keyframes rise{to{opacity:1;transform:none}}
  .l1{animation-delay:.2s}.l2{animation-delay:1.0s}.l3{animation-delay:1.9s}.l4{animation-delay:2.8s}
 
  /* ---- marquee of POS / channels ---- */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
  .trust .wrap{display:flex;align-items:center;gap:30px;padding:18px 24px;flex-wrap:wrap;justify-content:center}
  .trust span{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13.5px;color:var(--mute);font-weight:600;letter-spacing:.02em}
  .trust b{color:var(--ink)}
 
  /* ---- section scaffolding ---- */
  section{padding:84px 0}
  .sec-head{max-width:60ch;margin-bottom:46px}
  .kicker{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);font-weight:700;margin-bottom:14px}
  h2.sec-h{font-size:clamp(30px,4vw,44px)}
  .sec-head p{font-size:18.5px;color:#d6e2dd;margin:16px 0 0}
 
  /* problem stat band */
  .band{background:linear-gradient(160deg,#082020,#114040);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .band .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .stat .n{font-size:clamp(38px,5vw,58px);font-weight:600;letter-spacing:-.03em;color:var(--gold)}
  .stat p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:15.5px;color:#b3c9c3;margin:6px 0 0;max-width:30ch}
 
  /* feature cards */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;position:relative}
  .card .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);margin-bottom:18px}
  .card h3{font-size:21px;margin-bottom:9px}
  .card p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;color:#b3c9c3;margin:0}
 
  /* how it works — real sequence, numbered */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
  .step{position:relative;padding-top:30px}
  .step:before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:700;color:var(--brick);letter-spacing:.05em}
  .step h3{font-size:19px;margin:10px 0 8px}
  .step p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:14.5px;color:#b3c9c3;margin:0}
  .step .bar{height:3px;background:linear-gradient(90deg,var(--brick),transparent);border-radius:2px;margin-top:18px}
 
  /* split feature: memory */
  /* split feature: memory */
  .split{display:grid;grid-template-columns:1.15fr 0.85fr;gap:54px;align-items:start}
  
  .ticket-col{max-width:380px;width:100%;margin:0 auto}
  @media(min-width:921px){
    .ticket-col{position:sticky;top:100px}
  }

  .customer-profile-card{
    background:var(--card-solid);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:24px;
    font-family:ui-sans-serif,system-ui,sans-serif;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.3);
  }
  .profile-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    border-bottom:1px solid var(--line);
    padding-bottom:12px;
  }
  .profile-header .avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(94,200,180,.15);
    color:var(--moss);
    display:grid;
    place-items:center;
    font-weight:700;
    font-size:14px;
    border:1px solid rgba(94,200,180,.4);
  }
  .profile-name{
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    margin:0 0 2px;
    line-height:1.2;
  }
  .profile-badge{
    font-size:12px;
    color:var(--gold);
    font-weight:500;
  }
  .profile-details .detail-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--mute);
    margin-bottom:8px;
    font-weight:700;
  }
  .pref-tags{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .pref-tags li{
    background:var(--paper-2);
    border:1px solid var(--line);
    padding:5px 10px;
    border-radius:20px;
    font-size:13px;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:6px;
  }

  .ticket{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;max-width:380px;width:100%;margin:0 auto}
  .ticket .top{background:linear-gradient(90deg,var(--brick),var(--gold));color:#0c2b2b;padding:14px 18px;font-size:13px;display:flex;justify-content:space-between;letter-spacing:.04em;font-weight:600}
  .ticket .body{padding:20px 18px}
  .trow{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px dashed var(--line);color:#d6e2dd}
  .trow.note{color:var(--brick);font-size:12.5px;border:none;padding-top:4px}
  .ticket .total{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding-top:12px;color:var(--ink)}
  .memlist{list-style:none;padding:0;margin:24px 0 0;font-family:ui-sans-serif,system-ui,sans-serif}
  .memlist li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:#d6e2dd}
  .memlist li b{color:var(--ink)}
  .check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--moss);color:#fff;display:grid;place-items:center;font-size:12px;margin-top:1px}
 
  /* pricing */
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
  .tier{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
  .tier.feat{border:1.5px solid var(--brick);box-shadow:0 20px 50px -30px rgba(224,163,46,.55)}
  .tier .label{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
  .tier.feat .label{color:var(--brick)}
  .tier .amt{font-size:46px;font-weight:600;letter-spacing:-.03em;margin:14px 0 2px}
  .tier .amt small{font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:500;color:var(--mute);letter-spacing:0}
  .tier ul{list-style:none;padding:0;margin:20px 0 26px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;color:#b3c9c3;flex:1}
  .tier li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
  .tier li:before{content:"›";color:var(--brick);font-weight:700}
 
  /* FAQ (AEO) */
  .faq{max-width:820px;margin:0 auto}
  details{border-bottom:1px solid var(--line);padding:8px 0}
  details summary{cursor:pointer;list-style:none;font-size:20px;font-weight:600;padding:18px 40px 18px 0;position:relative;letter-spacing:-.01em}
  details summary::-webkit-details-marker{display:none}
  details summary:after{content:"+";position:absolute;right:6px;top:16px;font-size:26px;color:var(--brick);font-family:ui-sans-serif,system-ui,sans-serif;transition:transform .2s}
  details[open] summary:after{transform:rotate(45deg)}
  details p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:16px;color:#b3c9c3;margin:0 0 18px;max-width:70ch}
 
  /* closing CTA */
  .final{background:linear-gradient(150deg,#9c3b27,#114040);border:1px solid var(--line);color:var(--ink);border-radius:24px;padding:64px 48px;text-align:center;margin:0}
  .final h2{font-size:clamp(30px,4.4vw,46px);max-width:18ch;margin:0 auto 14px}
  .final p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:18px;color:#f0d3c8;max-width:48ch;margin:0 auto 28px}
  .final .btn.primary{background:var(--ink);color:#0c2b2b;box-shadow:none}
  .final .btn.primary:hover{box-shadow:0 6px 18px rgba(0,0,0,.25)}
 
  footer{padding:54px 0 40px;border-top:1px solid var(--line);margin-top:80px}
  .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;color:var(--mute)}
  .foot a{text-decoration:none;color:var(--mute);display:block;padding:4px 0}
  .foot a:hover{color:var(--ink)}
  .foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin:0 0 10px}
  .foot .cols{display:flex;gap:60px;flex-wrap:wrap}
 
  /* responsive */
  @media(max-width:920px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-photo{min-height:300px;max-height:360px}
    .section-img{height:220px}
    #how .section-img{height:auto}
    .band .wrap,.cards,.steps,.price-grid{grid-template-columns:1fr}
    .split{grid-template-columns:1fr;gap:34px}
    .steps{gap:26px}
    .nav nav{display:none}
    .ticket{margin:0 auto}
  }
  @media(prefers-reduced-motion:reduce){
    .line{animation:none;opacity:1;transform:none}
    .live .pulse{animation:none}
    .btn:hover{transform:none}
  }
  /* keyboard focus */
  a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}