/* ElderBerry Phone — elderberryphone.com
   Hand-written. No framework,no build step,no JavaScript.
   Built for the site's visitor (adult child,~51,laptop) — NOT for the phone's user.
   See SPEC.md §1. */

/* ---------- fonts (self-hosted,subset,no external request) ---------- */
@font-face{font-family:Poppins;src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --plum-900:#2a1633; --plum-700:#4a2c58; --plum-500:#6b4574;
  --byzantium:#6a3a7e; --byzantium-dk:#572f68; --byzantium-soft:#f2ecf5;
  --berry-ink:#241030; --ink:#241b26; --ink-soft:#5c5361; --ink-faint:#867d8d;
  --paper:#faf8fa; --card:#ffffff; --raise:#f4f0f5;
  --line:#e6e0e8; --line-strong:#d3cad7;
  --ok:#2f6b45; --ok-bg:#e9f1ec; --ok-line:#c2d9ca;
  --warn:#9a5b2c; --warn-bg:#f8efe4;
  --crit:#a03a34; --crit-bg:#f9eae8; --crit-line:#e6c4bf;
  --white:#fff;
  --grad:linear-gradient(160deg,var(--plum-500) 0%,var(--plum-700) 55%,var(--plum-900) 100%);
  --shadow-sm:0 1px 2px rgba(36,16,48,.06),0 4px 12px rgba(36,16,48,.05);
  --shadow:0 2px 4px rgba(36,16,48,.06),0 12px 32px rgba(36,16,48,.09);
  --shadow-lift:0 8px 20px rgba(0,0,0,.2);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:100px;
  --wrap:1120px; --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ---------- primitives ---------- */
h1,h2,h3,h4{font-family:Poppins,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:700;color:var(--berry-ink);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;letter-spacing:-.032em;line-height:1.06}
h2{font-size:clamp(1.55rem,3.2vw,2.1rem);letter-spacing:-.026em}
h3{font-size:1.16rem;letter-spacing:-.015em}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1rem;max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1rem;padding-left:1.3rem;max-width:var(--measure)}
li{margin:.4rem 0}
li::marker{color:var(--ink-faint)}
strong{font-weight:600;color:var(--berry-ink)}
small{font-size:.85rem}
a{color:var(--byzantium);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--byzantium-dk)}
:focus-visible{outline:3px solid var(--byzantium);outline-offset:2px;border-radius:3px}
img{max-width:100%;height:auto}
hr{border:none;border-top:1px solid var(--line);margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px;top:0;background:var(--byzantium);color:#fff;padding:.7rem 1.1rem;z-index:100;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ---------- eyebrow / labels ---------- */
.eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--byzantium);margin:0 0 .85rem}
.on-plum .eyebrow{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.5rem;border-radius:var(--r);font-family:Inter,sans-serif;font-size:1rem;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;text-align:center}
.btn-primary{background:var(--byzantium);color:#fff;border-color:var(--byzantium)}
.btn-primary:hover{background:var(--byzantium-dk);border-color:var(--byzantium-dk);color:#fff}
.btn-ghost{background:transparent;color:var(--byzantium);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--byzantium);color:var(--byzantium-dk)}
.on-plum .btn-primary{background:#fff;color:var(--plum-900);border-color:#fff}
.on-plum .btn-primary:hover{background:rgba(255,255,255,.88);color:var(--plum-900)}
.on-plum .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.on-plum .btn-ghost:hover{border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ---------- header ---------- */
.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:82px;flex-wrap:wrap}
.brand{display:flex;align-items:center;flex:none;padding:.55rem 0}
.brand img{height:54px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.site-nav a{font-size:.97rem;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:.5rem .7rem;border-radius:var(--r-sm);white-space:nowrap}
.site-nav a:hover{color:var(--byzantium);background:var(--byzantium-soft)}
.site-nav a[aria-current="page"]{color:var(--byzantium)}
.site-nav .btn{margin-left:.4rem;min-height:42px;padding:.45rem 1.1rem;font-size:.94rem}
.site-nav .btn-primary,.site-nav .btn-primary:hover{color:#fff;background:var(--byzantium)}
.site-nav .btn-primary:hover{background:var(--byzantium-dk)}
@media(max-width:860px){
  .site-header{position:static}
  .site-header .wrap{min-height:0;padding-top:.8rem;padding-bottom:.8rem}
  .site-nav{width:100%;gap:.15rem}
  .brand img{height:44px}
  .site-nav a{padding:.45rem .55rem;font-size:.88rem}
  .site-nav .btn{margin-left:auto}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(2.9rem,5vw,4.75rem)}
.sec-raise{background:var(--raise)}
.sec-head{max-width:60ch;margin-bottom:1.9rem}
.sec-head p{font-size:1.09rem;color:var(--ink-soft);margin-top:.85rem}
.sec-plum .sec-head p{color:rgba(255,255,255,.85)}

/* ---------- hero ---------- */
.hero{background:var(--grad);color:#fff;position:relative;overflow:hidden;padding-block:clamp(2.6rem,5vw,4.5rem)}
.hero::before{content:"";position:absolute;top:-180px;left:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 72%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-260px;right:-180px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 72%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{color:#fff}
.hero-lede{font-size:1.19rem;color:rgba(255,255,255,.9);max-width:52ch;margin:1.2rem 0 0}
.hero-media{display:flex;justify-content:center}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1;margin-bottom:.5rem}
}
@media(max-width:400px){
  .device{width:100%;max-width:288px}
  .screen{height:580px}
}

/* price pill */
.pricepill{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .55rem;background:#fff;color:var(--plum-900);border-radius:var(--r-pill);padding:.5rem 1.15rem;font-weight:600;font-size:.98rem;margin-bottom:1.4rem}
.pricepill b{font-family:Poppins,sans-serif;font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.pricepill span{color:#6b5f73;font-size:.9rem}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.97rem;color:var(--ink-soft);margin-bottom:0}
.sec-plum .card{background:rgba(255,255,255,.94);border-color:transparent;box-shadow:var(--shadow-lift)}
.sec-plum .card h3{color:var(--berry-ink)}
.sec-plum .card p,.sec-plum .card li{color:var(--ink-soft)}

.card-ico{width:42px;height:42px;border-radius:10px;background:var(--byzantium-soft);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.card-ico svg{width:22px;height:22px;stroke:var(--byzantium);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* numbered steps — used only where order is real */
.steps{counter-reset:s;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);position:relative}
.step::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--byzantium);color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:.92rem;margin-bottom:.85rem}
.step h3{font-size:1.04rem;margin-bottom:.4rem}
.step p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--card);padding:1.5rem 1.5rem}
.stat b{display:block;font-family:Poppins,sans-serif;font-weight:800;font-size:2.1rem;line-height:1.05;color:var(--byzantium);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:.4rem}
.stat span{display:block;font-size:.94rem;color:var(--ink);font-weight:600;line-height:1.4}
.stat em{display:block;font-style:normal;font-size:.85rem;color:var(--ink-faint);margin-top:.3rem}
.src{font-size:.85rem;color:var(--ink-faint);margin-top:1rem}
.src a{color:var(--ink-soft)}

/* ---------- callouts ---------- */
.note{border:1px solid var(--line);border-left:4px solid var(--byzantium);background:var(--card);border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.5rem;margin:1.5rem 0;box-shadow:var(--shadow-sm)}
.note p{margin-bottom:.6rem;font-size:.99rem}
.note p:last-child{margin-bottom:0}
.note-title{font-family:Poppins,sans-serif;font-weight:700;font-size:1rem;color:var(--berry-ink);margin-bottom:.5rem;display:block;letter-spacing:-.015em}
.note-crit{border-left-color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
.note-crit .note-title{color:var(--crit)}
.note-ok .note-title{color:var(--ok)}

/* answer-first block — the AEO device */
.answer{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:1.6rem 1.8rem;box-shadow:var(--shadow-sm);margin-bottom:2rem}
.answer p{font-size:1.1rem;line-height:1.6;margin-bottom:.8rem;max-width:64ch}
.answer p:last-child{margin-bottom:0}
.answer .eyebrow{margin-bottom:.65rem}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-sm);margin:1.4rem 0}
table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:560px}
caption{text-align:left;padding:1rem 1.2rem .2rem;font-size:.88rem;color:var(--ink-faint)}
th,td{text-align:left;padding:.85rem 1.15rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:600;background:var(--raise)}
tbody tr:last-child td{border-bottom:none}
tbody th{font-weight:600;color:var(--berry-ink)}
.tablewrap:focus-visible{outline:3px solid var(--byzantium);outline-offset:2px}
@media(max-width:680px){
  table{min-width:0;font-size:.88rem}
  th,td{padding:.65rem .6rem}
  thead th{font-size:.7rem;letter-spacing:.05em}
}
.yes{color:var(--ok);font-weight:600}
.no{color:var(--crit);font-weight:600}
.neutral{color:var(--ink-faint)}

/* ---------- key facts dl ---------- */
.facts{display:grid;grid-template-columns:auto 1fr;gap:.1rem 1.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.6rem;box-shadow:var(--shadow-sm);margin:0;font-size:.99rem}
.facts dt{font-weight:600;color:var(--ink-faint);padding:.42rem 0;font-size:.9rem}
.facts dd{margin:0;padding:.42rem 0;color:var(--ink)}
@media(max-width:560px){.facts{grid-template-columns:1fr;gap:0}.facts dt{padding-bottom:0}.facts dd{padding-top:.15rem;padding-bottom:.7rem}}

/* ---------- split (choose-this-if) ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden}
.split>div{background:var(--card);padding:1.5rem 1.6rem}
.split h3{font-size:1.05rem;margin-bottom:.85rem}
.split ul{margin:0;padding-left:1.15rem}
.split li{font-size:.96rem;color:var(--ink-soft);margin:.5rem 0}
.split .them{background:var(--raise)}

/* ---------- app list ---------- */
.applist{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem}
.app{display:flex;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.15rem 1.25rem;box-shadow:var(--shadow-sm)}
.app svg{width:26px;height:26px;flex:none;stroke:var(--byzantium);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.app b{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1rem;color:var(--berry-ink);letter-spacing:-.015em;margin-bottom:.15rem}
.app span{font-size:.93rem;color:var(--ink-soft);line-height:1.5}

/* ---------- device mockup (the phone's real UI,as product photography) ---------- */
.device{width:296px;flex:none;border-radius:40px;background:#17101d;padding:9px;box-shadow:0 24px 60px rgba(20,8,28,.42),0 4px 14px rgba(20,8,28,.3)}
.screen{border-radius:32px;overflow:hidden;background:var(--grad);height:620px;display:flex;flex-direction:column;font-family:Poppins,sans-serif;position:relative}
.scr-status{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 2px;font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}
.scr-search{margin:14px 14px 8px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:11px 15px;display:flex;align-items:center;gap:9px}
.scr-search svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.scr-search span{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)}
.scr-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:11px;padding:6px 14px 12px}
.tile{background:rgba(255,255,255,.94);border-radius:18px;box-shadow:0 8px 20px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px}
.tile svg{width:27px;height:27px;stroke:#6a3a7e;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:12px;font-weight:700;color:#241030;text-align:center;line-height:1.2;letter-spacing:-.01em}
.scr-nav{display:flex;justify-content:space-around;padding:13px;font-size:13px;font-weight:700;color:#fff;background:rgba(0,0,0,.15)}
.device-cap{text-align:center;font-size:.86rem;color:var(--ink-faint);margin-top:1rem;max-width:290px}
.on-plum .device-cap,.hero .device-cap{color:rgba(255,255,255,.7)}

/* call-screen mockup for the scam page */
.screen-call{justify-content:flex-start;align-items:center;text-align:center;padding:34px 20px 26px;gap:0}
.callwarn{width:100%;background:#fdecea;border:1.5px solid #e6b4ae;border-radius:16px;padding:13px 14px;margin-bottom:22px}
.callwarn b{display:block;font-size:14px;font-weight:800;color:#a03a34;line-height:1.3}
.callwarn span{display:block;font-size:12px;font-weight:600;color:#7d4b46;margin-top:3px;line-height:1.35}
.callnum{font-size:27px;font-weight:800;color:#fff;letter-spacing:-.02em}
.callsub{font-size:14px;font-weight:600;color:rgba(255,255,255,.8);margin-top:5px}
.callspacer{flex:1}
.callbtns{display:flex;gap:16px;width:100%;justify-content:center;margin-top:16px}
.callbtn{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.callbtn svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.callbtn.decline{background:#c0392b}
.callbtn.accept{background:#2f6b45}
.calllabels{display:flex;gap:16px;width:100%;justify-content:center;margin-top:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.85)}
.calllabels span{width:66px;text-align:center}

/* ---------- waitlist ---------- */
.waitlist{background:var(--grad);color:#fff;position:relative;overflow:hidden}
.waitlist::before{content:"";position:absolute;top:-200px;right:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 72%);pointer-events:none}
.waitlist .wrap{position:relative;z-index:1}
.wl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,5vw,3.5rem);align-items:start}
.waitlist h2{color:#fff}
.waitlist p{color:rgba(255,255,255,.88)}
.wl-form{background:rgba(255,255,255,.97);border-radius:var(--r-xl);padding:1.7rem 1.8rem;box-shadow:var(--shadow-lift)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.92rem;font-weight:600;color:var(--berry-ink);margin-bottom:.35rem}
.field input,.field select{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r);padding:.72rem .9rem;min-height:48px}
.field input:focus,.field select:focus{border-color:var(--byzantium);outline:2px solid var(--byzantium-soft);outline-offset:0}
.field .hint{font-size:.84rem;color:var(--ink-faint);margin-top:.3rem}
.wl-form .btn{width:100%;margin-top:.3rem}
.waitlist .wl-form p{color:var(--ink-soft)}
.wl-fine,.waitlist .wl-fine{font-size:.85rem;color:var(--ink-faint);margin-top:.9rem;line-height:1.5}
.wl-fine a{color:var(--byzantium)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-swap{position:relative}
.wl-done{background:rgba(255,255,255,.97);border-radius:var(--r-xl);padding:2.4rem 1.8rem 2rem;box-shadow:var(--shadow-lift);text-align:center;animation:wl-in .28s ease both}
.wl-done:focus{outline:none}
.wl-done:focus-visible{outline:3px solid var(--byzantium);outline-offset:3px}
.wl-done-mark{width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;background:var(--ok-bg);border:1.5px solid var(--ok-line);display:flex;align-items:center;justify-content:center}
.wl-done-mark svg{width:30px;height:30px;stroke:var(--ok);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wl-done h3{font-size:clamp(1.35rem,2.6vw,1.7rem)}
.waitlist .wl-done p{color:var(--ink-soft);font-size:1rem;margin-top:.8rem;max-width:44ch;margin-left:auto;margin-right:auto}
.waitlist .wl-done .wl-done-lede{color:var(--ink);font-size:1.06rem;font-weight:600;margin-top:.7rem}
.waitlist .wl-done .wl-done-fine{font-size:.85rem;color:var(--ink-faint);margin-top:1.2rem;line-height:1.5}
.wl-done-fine a{color:var(--byzantium)}
.wl-done-links{margin-top:1.5rem}
.wl-hold{background:rgba(255,255,255,.97);border-radius:var(--r-xl);padding:2.4rem 1.8rem 2rem;box-shadow:var(--shadow-lift);text-align:center;animation:wl-in .28s ease both}
.wl-hold:focus{outline:none}
.wl-hold:focus-visible{outline:3px solid var(--byzantium);outline-offset:3px}
.wl-hold-mark{width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;background:var(--warn-bg);border:1.5px solid #e2c9a8;display:flex;align-items:center;justify-content:center}
.wl-hold-mark svg{width:30px;height:30px;stroke:var(--warn);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wl-hold h3{font-size:clamp(1.3rem,2.5vw,1.6rem)}
.waitlist .wl-hold p{color:var(--ink-soft);font-size:1rem;margin-top:.8rem;max-width:44ch;margin-left:auto;margin-right:auto}
.waitlist .wl-hold .wl-hold-lede{color:var(--warn);font-size:1.06rem;margin-top:.7rem}
.wl-hold-lede strong{color:var(--warn)}
.waitlist .wl-hold .wl-hold-fine{font-size:.88rem;color:var(--ink-faint);margin-top:1.2rem;line-height:1.5}
.wl-hold-fine a{color:var(--byzantium)}
@media(prefers-reduced-motion:reduce){.wl-hold{animation:none}}
.waitlist .wl-error{background:var(--crit-bg);border:1px solid var(--crit-line);border-radius:var(--r);padding:.8rem 1rem;font-size:.92rem;color:var(--crit);margin:0 0 .9rem}
.wl-error a{color:var(--crit);font-weight:600}
.wl-form .btn[disabled]{opacity:.72;cursor:default}
@keyframes wl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wl-done{animation:none}}
.wl-points{list-style:none;padding:0;margin:1.5rem 0 0}
.wl-points li{position:relative;padding-left:1.9rem;margin:.75rem 0;color:rgba(255,255,255,.9);font-size:1rem}
.wl-points li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;border-left:2.2px solid rgba(255,255,255,.85);border-bottom:2.2px solid rgba(255,255,255,.85);transform:rotate(-45deg)}

/* ---------- footer ---------- */
.site-footer{background:var(--card);border-top:1px solid var(--line);padding-block:3rem 2.2rem;font-size:.94rem}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-bottom:2.2rem}
.ft-brand img{height:50px;width:auto;margin-bottom:1rem;display:block}
.ft-brand p{font-size:.92rem;color:var(--ink-soft);max-width:34ch}
.site-footer h4{font-size:.79rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.85rem;font-family:Inter,sans-serif;font-weight:600}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.42rem 0}
.site-footer li a{color:var(--ink-soft);text-decoration:none}
.site-footer li a:hover{color:var(--byzantium);text-decoration:underline}
.ft-legal{border-top:1px solid var(--line);padding-top:1.5rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.87rem;color:var(--ink-faint)}
.ft-legal p{max-width:74ch;margin:0}
.ft-disclaim{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.15rem;margin-bottom:1.5rem;font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.ft-disclaim b{color:var(--berry-ink);font-weight:600}

/* ---------- utilities ---------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.lede{font-size:1.12rem;color:var(--ink-soft);max-width:60ch}
.stack{display:flex;flex-direction:column;gap:1.1rem}
.breadcrumb{font-size:.87rem;color:var(--ink-faint);padding-top:1.4rem}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ---------- additional device screens (gallery) ---------- */
.screen-lock{align-items:center;text-align:center;padding:52px 18px 22px;position:relative;overflow:hidden}
.screen-lock .blob1{position:absolute;top:50px;left:-48px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.12)}
.screen-lock .blob2{position:absolute;bottom:110px;right:-58px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.08)}
.lock-time{position:relative;font-size:66px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em;text-shadow:0 2px 14px rgba(0,0,0,.2)}
.lock-date{position:relative;font-size:17px;color:rgba(255,255,255,.9);margin-top:9px;font-weight:600}
.lock-fill{flex:1}
.lock-panel{position:relative;width:100%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:15px;display:flex;align-items:center;gap:13px;text-align:left}
.lock-panel .circs{display:flex;gap:8px;flex:none}
.lock-circ{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
.lock-circ svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.lock-panel b{display:block;font-size:13px;font-weight:700;color:#fff}
.lock-panel span{display:block;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.8)}
.lock-hint{position:relative;font-size:15px;color:rgba(255,255,255,.85);font-weight:600;margin-top:15px}

/* 911 confirmation */
.screen-plain{background:#fff}
.scr-bar{background:var(--byzantium);color:#fff;padding:13px 16px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.scr-bar svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.confirm{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 20px;text-align:center;gap:0}
.confirm-num{font-size:52px;font-weight:800;color:#a03a34;letter-spacing:-.03em;line-height:1}
.confirm-q{font-size:19px;font-weight:700;color:#241030;margin-top:14px;line-height:1.3}
.confirm-sub{font-size:13.5px;font-weight:600;color:#5c5361;margin-top:9px;line-height:1.45}
.confirm-btns{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:24px}
.cbtn{border-radius:14px;padding:15px;font-size:16px;font-weight:800;text-align:center}
.cbtn.go{background:#a03a34;color:#fff}
.cbtn.no{background:#f0edf2;color:#3f3747}

/* phone / contacts */
.scr-list{flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.contact{background:rgba(255,255,255,.94);border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.16);padding:12px 13px;display:flex;align-items:center;gap:11px}
.contact .av{width:40px;height:40px;border-radius:50%;background:var(--byzantium);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex:none}
.contact b{display:block;font-size:15px;font-weight:700;color:#241030;line-height:1.25}
.contact span{display:block;font-size:12px;font-weight:600;color:#6b6273}
.contact.sos{background:#a03a34}
.contact.sos .av{background:rgba(255,255,255,.22)}
.contact.sos b{color:#fff}
.contact.sos span{color:rgba(255,255,255,.85)}
.gallery .device{width:250px}
.gallery .screen{height:520px}
.gallery .device-cap{max-width:250px;font-size:.83rem}
.gallery .lock-time{font-size:56px}
.gallery .confirm-num{font-size:44px}
.pdp-media .device{position:relative;z-index:1}
.pdp-media .device-cap{color:rgba(255,255,255,.75);position:relative;z-index:1}
.buy-list{list-style:none;padding:0;margin:0 0 1.4rem}
.buy-list li{position:relative;padding-left:1.75rem;margin:.6rem 0;font-size:.98rem;color:var(--ink)}
.buy-list li::before{content:"";position:absolute;left:.15rem;top:.45em;width:10px;height:5.5px;border-left:2.2px solid var(--ok);border-bottom:2.2px solid var(--ok);transform:rotate(-45deg)}
.buybox .btn{width:100%;font-size:1.05rem;min-height:54px}
.trustrow{display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem;border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1.2rem}
.trust{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:.4rem}
.trust svg{width:20px;height:20px;stroke:var(--byzantium);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trust span{font-size:.82rem;font-weight:600;color:var(--ink-soft);line-height:1.35}

/* accordion — native details,no JS */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;position:relative;font-family:Poppins,sans-serif;font-weight:700;font-size:1.03rem;color:var(--berry-ink);letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:.5rem;top:1.45rem;width:9px;height:9px;border-right:2.2px solid var(--byzantium);border-bottom:2.2px solid var(--byzantium);transform:rotate(45deg);transition:transform .15s ease}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc summary:focus-visible{outline:3px solid var(--byzantium);outline-offset:2px;border-radius:4px}
.acc .acc-body{padding:0 0 1.2rem;color:var(--ink-soft);font-size:.98rem}
.acc .acc-body p{max-width:66ch}
.acc .acc-body table{min-width:0;font-size:.94rem}
.acc .acc-body th,.acc .acc-body td{padding:.55rem .2rem}

/* in-the-box */
.boxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem}
.boxitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.4rem;box-shadow:var(--shadow-sm);text-align:center}
.boxitem .card-ico{margin:0 auto 1rem}
.boxitem b{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1rem;color:var(--berry-ink);margin-bottom:.3rem;letter-spacing:-.015em}
.boxitem span{font-size:.92rem;color:var(--ink-soft);line-height:1.5}

/* order form extras */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.gallery .lock-panel{gap:9px;padding:12px;border-radius:16px}
.gallery .lock-circ{width:32px;height:32px}
.gallery .lock-circ svg{width:16px;height:16px}
.gallery .lock-panel b{font-size:12px}
.gallery .lock-panel span{font-size:10.5px;line-height:1.3}
.gallery .lock-date{font-size:15px}
.gallery .contact .av{width:34px;height:34px;font-size:14px}
.gallery .contact b{font-size:13.5px}
.gallery .contact span{font-size:11px}
.signature{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.signature b{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1.05rem;color:var(--berry-ink);letter-spacing:-.015em}
.signature span{display:block;font-size:.92rem;color:var(--ink-soft);margin-top:.15rem}
.tile-link .card-ico{margin-bottom:.35rem}

/* ---------- contact strip ---------- */
.contactstrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.7rem;box-shadow:var(--shadow-sm)}
.contactstrip .who b{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1.08rem;color:var(--berry-ink);letter-spacing:-.02em;margin-bottom:.2rem}
.contactstrip .who span{font-size:.96rem;color:var(--ink-soft)}
.contactstrip .mail{font-family:Poppins,sans-serif;font-weight:700;font-size:1.12rem;color:var(--byzantium);text-decoration:none;letter-spacing:-.01em;word-break:break-all}
.contactstrip .mail:hover{text-decoration:underline}

/* ---------- bigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(1.2rem,2vw,1.8rem);justify-items:center;align-items:start}
.gallery-lg .device{width:100%;max-width:246px}
.gallery-lg .screen{height:512px}
.gallery-lg .device-cap{max-width:246px;font-size:.88rem;margin-top:1.1rem}
.sec-plum .gallery-lg .device-cap{color:rgba(255,255,255,.72)}
.gallery-lg .lock-time{font-size:54px}
.gallery-lg .confirm-num{font-size:42px}
.gallery-lg .lock-panel{gap:10px;padding:13px}
.gallery-lg .lock-circ{width:34px;height:34px}
.gallery-lg .lock-circ svg{width:17px;height:17px}
.gallery-lg .lock-panel b{font-size:12.5px}
.gallery-lg .lock-panel span{font-size:11px;line-height:1.3}
.gallery-lg .contact .av{width:36px;height:36px;font-size:15px}
.gallery-lg .contact b{font-size:14px}
.gallery-lg .contact span{font-size:11.5px}

/* big typographic statement — used sparingly */
.statement{font-family:Poppins,sans-serif;font-weight:800;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.18;letter-spacing:-.03em;color:var(--berry-ink);max-width:20ch;text-wrap:balance}
.sec-plum .statement{color:#fff}

/* gallery-lg: fit the denser screens into the shorter frame */
.gallery-lg .lock-panel{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 13px}
.gallery-lg .lock-panel b{font-size:12px}
.gallery-lg .lock-panel span{font-size:10.5px;line-height:1.35}
.gallery-lg .screen-lock{padding:44px 15px 20px}
.gallery-lg .lock-hint{font-size:13.5px;margin-top:12px}
.gallery-lg .cbtn{padding:12px;font-size:14px}
.gallery-lg .confirm{padding:18px 16px}
.gallery-lg .confirm-q{font-size:17px;margin-top:11px}
.gallery-lg .confirm-sub{font-size:12.5px;margin-top:8px}
.gallery-lg .confirm-btns{margin-top:18px}
.gallery-lg .scr-list{gap:7px;padding:9px 10px}
.gallery-lg .contact{padding:10px 11px;gap:9px}

/* ---------- citations: named,but not clickable and not prominent ---------- */
.cites{list-style:none;padding:0;margin:1rem 0 0;max-width:64ch}
.cites li{font-size:.86rem;color:var(--ink-faint);line-height:1.5;margin:.45rem 0;padding-left:1.1rem;position:relative}
.cites li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.cite{color:var(--ink-faint);font-style:normal}

/* ---------- app-screen mockups: clock,messages,camera,weather,maps,notes,browser,settings ---------- */

/* shared bits */
.scr-body{flex:1;padding:11px 12px;display:flex;flex-direction:column;gap:9px;background:#fff;overflow:hidden}
.scr-foot{background:#f4f0f5;border-top:1px solid #e6e0e8;padding:11px 13px;font-size:11.5px;font-weight:700;color:#6b6273;text-align:center;line-height:1.35}
.bub.them{background:#f0edf2;color:#241030;align-self:flex-start;border-bottom-left-radius:6px}

/* settings */
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7f4f8;border:1px solid #ece5ee;border-radius:14px;padding:11px 13px}
.setrow b{display:block;font-size:14.5px;font-weight:700;color:#241030;line-height:1.2}
.setrow span{display:block;font-size:11.5px;font-weight:700;color:#6b6273;margin-top:2px}
.setrow em{font-size:14px;font-weight:800;color:var(--byzantium);font-style:normal;flex:none}

/* the new screens{padding:18px 14px 4px}
.gallery-lg .scr-body{gap:7px;padding:10px}
.gallery-lg .setrow{padding:9px 11px}
.gallery-lg .setrow b{font-size:13px}
.gallery-lg .setrow span{font-size:10.5px}
.gallery-lg .setrow em{font-size:12.5px}
.gallery-lg .scr-foot{padding:9px 11px;font-size:10.5px}
/* home screen and call screen in the shorter frame */
.gallery-lg .scr-grid{gap:9px;padding:5px 11px}
.gallery-lg .tile svg{width:23px;height:23px}
.gallery-lg .tile b{font-size:11px}
.gallery-lg .scr-nav{padding:10px;font-size:12px}
.gallery-lg .screen-call{padding:24px 16px 20px}
.gallery-lg .callnum{font-size:23px}
.gallery-lg .callsub{font-size:12.5px}
.gallery-lg .callwarn{padding:11px 12px;margin-bottom:16px}
.gallery-lg .callwarn b{font-size:13px}
.gallery-lg .callwarn span{font-size:11px}
.gallery-lg .callbtn{width:56px;height:56px}
.gallery-lg .callbtn svg{width:23px;height:23px}
.gallery-lg .calllabels span{width:56px;font-size:11px}
.gallery-lg .scr-bar{padding:11px 13px;font-size:13px}

/* ---------- longer waitlist form ---------- */
.field-row-3{display:grid;grid-template-columns:1.3fr .9fr .8fr;gap:.9rem}
@media(max-width:560px){.field-row-3{grid-template-columns:1fr}}
.wl-form .form-sub:first-of-type{margin-top:.2rem;padding-top:0;border-top:none}
#waitlist,#preorder,#screens{scroll-margin-top:96px}
.anchor-alias{display:block;height:0;overflow:hidden}
/* the form column is long now — keep the pitch alongside it on wide screens */
@media(min-width:900px){.wl-grid>div:first-of-type{position:sticky;top:104px}}
/* nothing is for sale yet — the pill says so{color:var(--warn);background:var(--warn-bg);border-color:#e6d3ba}

/* ---------- scene model: five bands,one phone,in band one ---------- */
/* breadcrumb sits inside the plum hero now,not on white above it */
.on-plum .breadcrumb{color:rgba(255,255,255,.65);padding-top:0;margin-bottom:1.6rem}
.on-plum .breadcrumb a{color:rgba(255,255,255,.85)}

/* compact founder trust signal - the full letter lives in the details band */
.founder-strip{display:flex;align-items:center;gap:1.1rem;margin-top:2.6rem;padding-top:1.8rem;
  border-top:1px solid var(--line);max-width:60ch}
.sec-plum .founder-strip,.on-plum .founder-strip{border-top-color:rgba(255,255,255,.22)}
.founder-strip img{width:76px;height:76px;flex:none;border-radius:50%;object-fit:cover;
  background:var(--grad);box-shadow:var(--shadow-sm)}
.founder-strip p{font-size:.98rem;color:var(--ink-soft);margin:0}
.founder-strip span{display:block;font-size:.84rem;color:var(--ink-faint);margin-top:.3rem}
@media(max-width:520px){.founder-strip{flex-direction:column;align-items:flex-start;gap:.9rem}}

/* the buy-list,used full width now that there is no buybox column */
.buy-list-wide{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;max-width:none}
@media(max-width:700px){.buy-list-wide{grid-template-columns:1fr}}

/* details band reads better with a little more room than a bare .narrow column */
.acc .acc-body ul{max-width:66ch}
.acc .acc-body .facts{margin:0}
.acc .acc-body .cites{margin:0}
/* the accordion keeps a readable measure without indenting the band's heading */
.acc{max-width:880px}

/* read next: keeps every page above the three-internal-links floor and gives the
   short pages somewhere obvious to go that isn't the form */
.readnext{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);max-width:880px}
.readnext>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.readnext a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1rem 1.15rem;text-decoration:none;box-shadow:var(--shadow-sm)}
.readnext a:hover{border-color:var(--byzantium)}
.readnext b{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1rem;
  color:var(--berry-ink);letter-spacing:-.015em;margin-bottom:.2rem}
.readnext span{display:block;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
/* summary now wraps a heading - keep it looking like a summary, not an h3 */
.acc summary h3{display:inline;font-size:inherit;font-family:inherit;font-weight:inherit;
  color:inherit;letter-spacing:inherit;margin:0}

/* ---------- section images and upload slots ---------- */
.sec-img{display:block;width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--shadow)}
.slot{width:100%;border:2px dashed var(--line-strong);border-radius:var(--r-xl);
  background:var(--raise);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.on-plum .slot,.hero .slot{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.07)}
.slot-in{text-align:center;max-width:34ch}
.slot-in svg{width:30px;height:30px;stroke:var(--ink-faint);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.6rem}
.on-plum .slot-in svg,.hero .slot-in svg{stroke:rgba(255,255,255,.7)}
.slot-in b{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1rem;
  color:var(--ink-soft);letter-spacing:-.015em}
.slot-in span{display:block;font-size:.9rem;color:var(--ink-faint);margin-top:.35rem;line-height:1.45}
.slot-in code{display:block;font-size:.82rem;color:var(--byzantium);margin-top:.6rem;word-break:break-all}
.slot-in em{display:block;font-size:.78rem;color:var(--ink-faint);font-style:normal;margin-top:.2rem}
.on-plum .slot-in b,.hero .slot-in b{color:#fff}
.on-plum .slot-in span,.hero .slot-in span,
.on-plum .slot-in em,.hero .slot-in em{color:rgba(255,255,255,.75)}
.on-plum .slot-in code,.hero .slot-in code{color:rgba(255,255,255,.92)}
/* a section that pairs copy with an image */
.split-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.split-media.flip>*:first-child{order:2}
@media(max-width:820px){
  .split-media{grid-template-columns:1fr}
  .split-media.flip>*:first-child{order:0}
}
/* the accordion column sits beside its image; the image is sticky so it stays in
   view while a long accordion is being opened and read */
.split-media .acc{max-width:none}
@media(min-width:821px){.acc-media{position:sticky;top:104px}}
@media(max-width:820px){.acc-media{margin-top:1.8rem}}
.wl-media{margin-top:1.8rem}

/* app grid - 2 across, 4 down, the same shape as the phone's home screen. Each tile
   flips on click and flips back on the next click. Driven by a checkbox, so no JavaScript.
   Both faces are in the DOM, so the text is readable to crawlers and screen readers
   whichever way the tile is facing. */
.apptiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;max-width:380px;margin-inline:auto}
.flip{perspective:900px}
.flip-cb{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.flip-card{display:block;cursor:pointer}
.flip-inner{position:relative;display:block;height:132px;transform-style:preserve-3d;
  transition:transform .45s ease}
.flip-cb:checked + .flip-card .flip-inner{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:var(--r-lg);padding:.7rem .6rem;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.flip .front svg{width:26px;height:26px;stroke:var(--byzantium);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.45rem}
.flip .front b{font-family:Poppins,sans-serif;font-weight:700;font-size:.94rem;
  color:var(--berry-ink);letter-spacing:-.015em;line-height:1.2}
.flip .back{transform:rotateY(180deg);background:var(--byzantium);border-color:var(--byzantium)}
.flip .back span{color:#fff;font-size:.79rem;line-height:1.42}
.flip-card:hover .front{border-color:var(--byzantium)}
.flip-cb:focus-visible + .flip-card .face{outline:3px solid var(--byzantium);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}
.apptiles-hint{font-size:.9rem;color:var(--ink-faint);margin:0 0 1rem}

/* a mockup standing next to copy is supporting art, not the hero - scale it down
   so the section reads as one idea rather than a giant phone with a caption */
.split-media .device{width:232px;margin-inline:auto}
.split-media .screen{height:488px}
.split-media .device-cap{margin-inline:auto;margin-top:.9rem;font-size:.82rem}
.split-media .lock-time{font-size:50px}
.split-media .confirm-num{font-size:40px}
.split-media .callnum{font-size:23px}
.split-media .callwarn{padding:11px 12px;margin-bottom:16px}
.split-media .callwarn b{font-size:13px}
.split-media .callwarn span{font-size:11px}
.split-media .callbtn{width:56px;height:56px}
.split-media .callbtn svg{width:23px;height:23px}
.split-media .calllabels span{width:56px;font-size:11px}
.split-media .scr-grid{gap:9px;padding:5px 11px}
.split-media .tile svg{width:23px;height:23px}
.split-media .tile b{font-size:11px}
.split-media .scr-body{gap:7px;padding:10px}
.split-media .setrow{padding:9px 11px}
.split-media .setrow b{font-size:13px}
.split-media .setrow span{font-size:10.5px}
.split-media .setrow em{font-size:12.5px}
.split-media .scr-foot{padding:9px 11px;font-size:10.5px}
.split-media .scr-bar{padding:11px 13px;font-size:13px}
.split-media .contact{padding:10px 11px;gap:9px}
.split-media .contact .av{width:34px;height:34px;font-size:14px}
.split-media .contact b{font-size:13.5px}
.split-media .contact span{font-size:11px}
/* the copy column owns its own heading now, so the section head loses its bottom gap */
.split-media .sec-head{margin-bottom:1.4rem;max-width:none}
.split-art{align-self:center}
/* the accordion column is short; don't centre it against a tall image */
.split-media .acc,.acc-media{align-self:start}
/* a heading that is present for the outline but not shown */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* founder section, sitting directly above the form */
.founder-sec .split-media{align-items:center}
.founder-sec p{font-size:1.06rem}
.founder-img{width:100%;max-width:380px;aspect-ratio:1/1;border-radius:var(--r-xl);
  object-fit:cover;display:block;margin-inline:auto;box-shadow:var(--shadow)}
.acc-wide{max-width:none}
.opt{font-weight:400;color:var(--ink-faint)}

/* A real screenshot in the phone frame - the frame clips it to its own radius */
.screen-shot{background:#fff;padding:0}
.scr-shot{display:block;width:100%;height:100%;object-fit:cover}

/* the accordion's phone: flat, and centred against the copy beside it */
.acc-media .device{box-shadow:none}
@media(min-width:821px){.acc-media,.split-media .acc{position:static;align-self:center}}