/* Paired Parent — customer site. Look B ("Hand it over"), chosen by the owner 2026-09-13, recolored
   to the owner's logo package the same day: navy #082A63, blue #0871EE→#1CA9FF, teal #00BFAE→#18E5CD,
   gold #FFB72B. Buttons use #0766E0, a touch deeper than the logo blue, because white on #0871EE
   measures only 4.56:1; #0766E0 gives 5.3:1 and still reads as the same blue.
   Tokens first: the bare :root is the light palette, the two blocks after it are dark. */
:root{--ground:#f3f7fc;--ink:#082a63;--muted:#4a5a75;--blue:#0766e0;--onblue:#fff;--line:#d9e3f0;--panel:#fff;
  --check:#f2a51a;--word:#082a63;--ring:rgba(7,102,224,.18);--shadow:rgba(8,42,99,.3);--tint:#e7f0fb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#061634;--ink:#eaf2ff;--muted:#a8b8d6;--blue:#5cb4ff;
  --onblue:#061634;--line:#17305e;--panel:#0b2148;--check:#ffb72b;--word:#fff;--ring:rgba(92,180,255,.22);--shadow:rgba(0,0,0,.6);--tint:#10295a}}
:root[data-theme="dark"]{--ground:#061634;--ink:#eaf2ff;--muted:#a8b8d6;--blue:#5cb4ff;--onblue:#061634;--line:#17305e;
  --panel:#0b2148;--check:#ffb72b;--word:#fff;--ring:rgba(92,180,255,.22);--shadow:rgba(0,0,0,.6);--tint:#10295a}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 "Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
h1,h2{font-family:Newsreader,Georgia,serif;font-weight:500;letter-spacing:-.015em}
.kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.muted{color:var(--muted)}

/* Header and menus. <details> so the menus work without script and with a keyboard. */
header.site{display:flex;align-items:center;gap:18px;padding:18px 0;position:relative;z-index:20}
/* The logo: the package's symbol plus the wordmark set as text in Arimo, which has Arial's
   metrics (the package's SVG masters specify Arial). Text rather than the package's PNGs, whose
   final "t" is clipped at the image edge in every horizontal file. */
.logo{text-decoration:none;display:flex;gap:9px;align-items:center;margin-right:auto;color:var(--word)}
.logo .mark{width:40px;height:40px;flex:none}
.logo .word{font:400 26px/1 Arimo,Arial,Helvetica,sans-serif;letter-spacing:-.035em}
.logo .word b{font-weight:700}
footer.site .logo .mark{width:34px;height:34px}
footer.site .logo .word{font-size:22px}
.nav{display:flex;align-items:center;gap:6px;font-size:15.5px}
.nav>a,.menu>summary{padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--muted);cursor:pointer;list-style:none}
.nav>a:hover,.menu>summary:hover,.nav>a[aria-current="page"],.menu.current>summary{color:var(--ink);background:var(--tint)}
.menu{position:relative}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";display:inline-block;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;margin:0 0 3px 8px}
.menu-panel{position:absolute;top:calc(100% + 8px);left:-10px;width:300px;background:var(--panel);border-radius:18px;padding:10px;
  box-shadow:0 0 0 1px var(--line),0 24px 50px -24px var(--shadow);display:grid;gap:2px}
.menu-panel a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:12px;text-decoration:none}
.menu-panel a:hover{background:var(--tint)}
.menu-panel small{grid-column:1/-1;color:var(--muted);font-size:13px}
.menu-panel hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
/* How it works: getting started and the features, side by side, centred under the menu. */
.menu-panel.wide{width:620px;left:50%;translate:-50% 0;grid-template-columns:1fr 1.15fr;gap:4px 12px}
.menu-col{display:grid;gap:2px;align-content:start}
.menu-h,.mobile-h{margin:6px 12px 4px;font:700 12px/1.2 "Atkinson Hyperlegible Next",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 16px/1 "Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  text-decoration:none;border-radius:999px;padding:15px 22px;border:0;cursor:pointer}
.btn.pri{background:var(--blue);color:var(--onblue)}
.btn.ghost{color:var(--ink);box-shadow:0 0 0 1.5px var(--line) inset;background:transparent}
.btn.small{padding:11px 18px;font-size:15px}
.mobile-nav{display:none}
@media (max-width:900px){
  .nav,.site .btn.small{display:none}
  .mobile-nav{display:block}
  .mobile-nav>summary{list-style:none;cursor:pointer;padding:10px 14px;border-radius:999px;box-shadow:0 0 0 1.5px var(--line) inset;font-weight:700}
  .mobile-nav>summary::-webkit-details-marker{display:none}
  .mobile-panel{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-radius:22px;padding:14px;display:grid;gap:2px;
    box-shadow:0 0 0 1px var(--line),0 30px 60px -30px var(--shadow)}
  .mobile-panel a{padding:12px;border-radius:12px;text-decoration:none}
  .mobile-panel a.sub{padding-left:26px;color:var(--muted)}
  .mobile-panel .btn{margin-top:8px}
}

/* Page intros */
.hero{position:relative;margin:0 0 70px}
.hero .ph{height:min(560px,70vh);min-height:380px;border-radius:0 0 40px 40px;--phbg:linear-gradient(160deg,#d3f6f1 0%,#e4efff 55%,#c9ddfa 100%)}
.hero .panel{position:relative;margin:-190px 0 0 22px;max-width:620px;background:var(--panel);border-radius:28px;padding:30px;box-shadow:0 30px 60px -30px var(--shadow)}
.hero h1{font-size:clamp(42px,6.2vw,74px);line-height:1.02}
.hero h1 em,.intro h1 em{font-style:italic;color:var(--blue)}
.hero p{margin:16px 0 24px;font-size:19px;color:var(--muted);max-width:38ch}
@media (max-width:640px){.hero .panel{margin:-120px 12px 0;padding:24px}}
.intro{padding:34px 0 46px}
.intro h1{font-size:clamp(38px,5.4vw,62px);line-height:1.04;max-width:18ch}
.intro p.lead{margin-top:14px;font-size:19px;color:var(--muted);max-width:52ch}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumbs a{text-decoration:none}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
/* Three product truths under the hero buttons. Each one is enforced by the product, not a slogan. */
/* Stacked, not inline: the hero panel is ~480px wide and three phrases won't sit on one row. */
.trust{display:grid;gap:7px;margin:22px 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.trust{list-style:none;padding:0}
.trust li::before{content:"";display:inline-block;width:11px;height:6px;border:solid var(--check);border-width:0 0 3px 3px;border-radius:1px;rotate:-45deg;margin:0 8px 3px 0}

section{padding:0 0 80px}
h2{font-size:clamp(30px,4.2vw,48px);line-height:1.08;margin-bottom:26px;max-width:22ch}
h3{font-size:20px;line-height:1.25}

/* Phone mockups: drawn in HTML so they carry the app's own wording. */
.phone{width:var(--pw,228px);aspect-ratio:9/19;border-radius:36px;background:#0b0d13;padding:9px;flex:none;
  box-shadow:0 1px 0 1px #2a2f3d inset,0 30px 60px -20px rgba(10,14,40,.45)}
.screen{height:100%;border-radius:28px;overflow:hidden;background:#f3f5fa;color:#141824;display:flex;flex-direction:column;
  font:12px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.sbar{display:flex;justify-content:space-between;padding:10px 16px 4px;font-size:10px;font-weight:600;opacity:.8}
.apphead{padding:8px 14px 10px;font-weight:700;font-size:14px}
.notif{margin:6px 10px;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 4px 14px rgba(20,24,60,.12)}
.notif .src{font-size:10px;color:#5b6378;display:flex;gap:6px;align-items:center}
.notif .src i{width:14px;height:14px;border-radius:4px;background:url(brand/icon-64.png) center/cover;display:inline-block}
.notif b{display:block;margin-top:3px;font-size:12.5px}
.row{display:flex;gap:8px;align-items:center;margin:0 10px;padding:9px 10px;border-radius:12px;background:#fff}
.row+.row{margin-top:6px}
.pill{margin-left:auto;font-size:10px;font-weight:700;border-radius:999px;padding:3px 8px;background:#eef1f7;color:#4a5a6e}
.pill.wait{background:#fdf1e2;color:#a15c00}
.pill.ok{background:#e6f4ea;color:#1b7f3b}

/* The home page's hero photo. */
.ph{position:relative;overflow:hidden;background:var(--phbg,linear-gradient(150deg,#d6e2f3,#ece6dc));display:flex;align-items:flex-end;padding:14px;min-height:160px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.see{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.see figure{margin:0;display:grid;justify-items:center;gap:16px;text-align:center}
.see figcaption{max-width:28ch;color:var(--muted)}
.see figcaption b{display:block;color:var(--ink);font-size:18px}
.ripple{position:relative;display:grid;place-items:center}
.ripple::before,.ripple::after{content:"";position:absolute;width:300px;aspect-ratio:1;border-radius:50%;border:2px solid var(--ring);animation:ring 5s ease-out infinite}
.ripple::after{animation-delay:2.5s}
@keyframes ring{from{scale:.6;opacity:1}to{scale:1.25;opacity:0}}
@media (max-width:900px){.see{grid-template-columns:1fr}.see figure:not(:first-child){display:none}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--line);counter-reset:s;padding:0;margin:0}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps li{list-style:none;padding:26px 26px 0 0}
.steps li::before{counter-increment:s;content:counter(s);font:500 44px/1 Newsreader,serif;color:var(--blue);display:block;margin-bottom:10px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

.promise{background:var(--panel);border-radius:40px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.promise blockquote{margin:0;font:500 clamp(34px,4.6vw,58px)/1.05 Newsreader,serif;letter-spacing:-.02em}
.checks{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.checks li{padding-left:30px;position:relative;color:var(--muted)}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:9px;border:solid var(--check);border-width:0 0 3.5px 3.5px;border-radius:2px;rotate:-45deg}
@media (max-width:820px){.promise{grid-template-columns:1fr}}

/* Features: two-column rows, words beside a small visual. */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 0;border-top:1.5px solid var(--line)}
.feature h2{margin-bottom:12px}
.feature .phone{justify-self:center}
/* A photo with the app's own controls tucked over its empty side (apps page, owner 2026-09-13:
   the sleepy-kid picture belongs beside limits, hours and pauses). The phone sits bottom-left,
   over the dark room, so the boy on the right stays in view; it steps aside on small screens. */
.photo-phone{position:relative;justify-self:stretch;padding-bottom:48px}
.photo-phone img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,center);border-radius:28px;display:block}
.photo-phone .phone{position:absolute;left:-10px;bottom:0;--pw:clamp(130px,32%,180px)}
.pill{white-space:nowrap}
@media (max-width:560px){.photo-phone{padding-bottom:0}.photo-phone .phone{display:none}}
.more{margin-top:18px}
.more a{color:var(--blue);font-weight:700;text-decoration:none}
.more a::after{content:" →"}
.more a:hover{text-decoration:underline}
@media (max-width:820px){.feature{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--panel);border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px var(--line);display:grid;grid-template-rows:auto 1fr;align-content:start;text-decoration:none}
.card .body{padding:18px 20px 20px;display:grid;gap:6px;align-content:start}
.card .k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card h3{font:500 25px/1.15 Newsreader,serif}

.card .more{margin-top:8px;color:var(--blue);font-weight:700}
.service{background:var(--panel);border-radius:30px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:30px;box-shadow:0 0 0 1px var(--line)}
@media (max-width:820px){.service{grid-template-columns:1fr}}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1100px}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.plans{grid-template-columns:1fr}}
.plan{background:var(--panel);border-radius:26px;box-shadow:0 0 0 1px var(--line);padding:26px 26px 28px;display:grid;gap:10px;align-content:start}
.plan.best{box-shadow:0 0 0 2px var(--blue)}
.plan .price{font:500 46px/1 Newsreader,serif}
.plan .price small{font:400 17px "Atkinson Hyperlegible Next",system-ui,sans-serif;color:var(--muted)}
.plan .btn{justify-self:start;margin-top:8px}
.sandbox{margin-top:18px;max-width:820px;border:1.5px dashed var(--blue)}

.note{background:var(--tint);border-radius:16px;padding:14px 16px;font-size:15.5px}

/* Questions */
.faq{border-top:1.5px solid var(--line)}
.faq details{border-bottom:1.5px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font:500 22px/1.3 Newsreader,serif;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:28px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted);max-width:65ch}

.join{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media (max-width:760px){.join{grid-template-columns:1fr}}

footer.site{border-top:1.5px solid var(--line);padding:34px 0 60px;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:24px;font-size:15px}
footer.site h4{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
footer.site a{display:block;text-decoration:none;padding:3px 0}
.legal{color:var(--muted);font-size:13px;line-height:1.55;max-width:80ch;padding:0 0 40px}
.legal p{margin:0 0 8px}
@media (max-width:760px){footer.site{grid-template-columns:1fr 1fr}}

/* Photos (the owner's, 2026-09-13). Text sits on the part of each picture that was left empty
   for it; below 760px the words move under the picture and take the theme's colors again. */
.hero img{object-position:var(--pos,center)}
.hero.right .panel{margin-left:auto;margin-right:22px}
@media (max-width:640px){.hero.right .panel{margin:-120px 12px 0}}
.banner{position:relative;border-radius:36px;overflow:hidden;min-height:460px;display:grid;align-items:center;margin:6px 0 64px}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.banner .copy{position:relative;max-width:520px;padding:clamp(24px,4vw,52px)}
.banner .copy h1{font-size:clamp(38px,5vw,60px);line-height:1.04}
.banner .copy p{margin-top:14px;font-size:19px;max-width:40ch}
/* On-light (the kitchen): the words sat on the dad's shirt (owner, 2026-09-13), so they are held to
   the picture's empty right third, with a white fade strong across the whole text column. */
.banner.on-light .copy{justify-self:end;color:#082a63;max-width:400px}
.banner.on-light .copy h1{font-size:clamp(34px,3.6vw,46px)}
.banner.on-light::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,0) 46%)}
.banner.on-light .copy p{color:#34466a}
.banner.on-light .copy em{color:#0766e0}
.banner.on-dark .copy{color:#fff}
.banner.on-dark::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,30,92,.9),rgba(9,30,92,.55) 36%,transparent 60%)}
.banner.on-dark .copy p{color:#dfe9ff}
.banner.on-dark .copy em{color:#9fd2ff}
.banner .kicker{color:inherit;opacity:.85}
@media (max-width:760px){
  .banner{min-height:0;display:block;border-radius:28px;overflow:visible}
  .banner::before{display:none}
  .banner img{position:relative;height:250px;border-radius:28px}
  .banner .copy{padding:22px 2px 0;color:var(--ink)!important;max-width:none}
  .banner .copy p{color:var(--muted)!important}
  .banner .copy em{color:var(--blue)!important}
}
/* Below 1000px the kitchen's empty third is too narrow for the words, so they go under it. */
@media (max-width:1000px){
  .banner.on-light{min-height:0;display:block;border-radius:28px;overflow:visible}
  .banner.on-light::before{display:none}
  .banner.on-light img{position:relative;height:clamp(250px,42vw,420px);border-radius:28px}
  .banner.on-light .copy{padding:22px 2px 0;max-width:none;color:var(--ink)}
  .banner.on-light .copy p{color:var(--muted)}
  .banner.on-light .copy em{color:var(--blue)}
}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;margin-bottom:46px}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,center);border-radius:32px}
.split h2{margin-bottom:14px}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:24px}}

/* Quiet time: the sleeping picture as a tall banner, words on its dark left. (A before/after
   slider between the owner's two bedtime pictures was tried and dropped, owner 2026-09-13.) */
.banner.tall{min-height:540px}
.banner .copy h2{font-size:clamp(34px,4.4vw,52px);line-height:1.06;margin-bottom:18px}
.banner.on-dark .checks li{color:#e3ecff}
@media (max-width:760px){.banner .copy .checks li{color:var(--muted)}}

/* FAQ page: the search and topics stay in reach while the list scrolls. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.faq-tools{position:sticky;top:0;z-index:5;background:var(--ground);padding:14px 0 6px;margin-bottom:8px}
.faq-search{display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:999px;padding:0 18px;box-shadow:0 0 0 1.5px var(--line)}
.faq-search:focus-within{box-shadow:0 0 0 2.5px var(--blue)}
.faq-search svg{width:20px;height:20px;flex:none;color:var(--muted)}
.faq-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--ink);padding:16px 0;
  font:18px "Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 6px;scrollbar-width:none}
.chips button{flex:none;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;background:var(--panel);color:var(--muted);
  box-shadow:0 0 0 1px var(--line) inset;font:600 14px "Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--ground);box-shadow:none}
.faq-group{padding:16px 0 26px}
.faq-group h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:8px}
.faq mark{background:#ffe3a3;color:#082a63;border-radius:3px;padding:0 1px}

/* Feature pages: the honest limits get their own box, and each page points to the next. */
.good{background:var(--panel);border-radius:28px;padding:clamp(22px,4vw,40px);box-shadow:0 0 0 1px var(--line)}
.good h2{margin-bottom:14px}
.good ul{margin:0;padding-left:1.2em;display:grid;gap:10px;color:var(--muted);max-width:70ch}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:1.5px solid var(--line);padding:26px 0 64px}
.pager a{display:grid;gap:4px;text-decoration:none;max-width:48%}
.pager small{color:var(--muted);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.pager b{font:500 22px/1.2 Newsreader,serif;color:var(--blue)}
.pager .next{text-align:right;margin-left:auto}

/* Drawn devices on the phone cards and pages, until there are product photos. */

/* The narrow layout keeps a 300px-tall panel, so the drawing has to come down with it or it hangs
   over both edges (it did, by 39px each way, before the sizes here). */
@media (max-width:860px){}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* A label a screen reader reads and the eye does not: a table's corner heading, the question behind
   a "More about this" link. A placeholder is not a label: it disappears the moment somebody types,
   and several screen readers do not announce it at all. clip-path rather than display:none, which
   would take it out of the accessibility tree along with the pixels. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

/* A question with its own page: the breadcrumb, the longer answer, and where to go next. */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 4px}
p.ans{max-width:64ch;font-size:18px;line-height:1.65;margin:0 0 18px}
.ans-h{font:700 13px/1.2 "Atkinson Hyperlegible Next",system-ui,sans-serif;letter-spacing:.1em;
       text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.ans-more{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px}
/* The link out of a short answer on the FAQ page. Inline, so it reads as part of the sentence's
   offer rather than as a button competing with the answer above it. */
.more-a{white-space:nowrap}

/* The trademark symbol on the wordmark. Sized and raised by hand rather than left to the
   browser's default <sup>, which grows the line box and nudges the whole header down a pixel. */
.logo .tm{font-size:.42em;font-weight:400;vertical-align:super;line-height:0;
          margin-left:.1em;letter-spacing:0}

/* The phone from us (phone.html). */
.btn.soon{background:transparent;color:var(--muted);box-shadow:0 0 0 1.5px var(--line) inset;cursor:default}
/* A Buy or Subscribe button, with its optional "email on your account" for the 40%-off link. */
.buy{display:grid;gap:8px;justify-items:start}
.buy details{font-size:15px}
.buy summary{cursor:pointer;color:var(--accent,inherit);text-decoration:underline;text-underline-offset:2px}
.buy label{display:grid;gap:4px;margin:8px 0}
.buy input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);min-width:min(320px,80vw);background:var(--panel);color:inherit}
.pairscreen{background:#fff;align-items:center;text-align:center;padding:0 14px}
.pairscreen h4{margin:18px 0 6px;font:600 17px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.pairscreen p{margin:0 0 12px;color:#4a5265;font-size:11.5px}
.qr{width:72%;aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);gap:2px;padding:8px;background:#fff;box-shadow:0 0 0 1px #e3e6ee}
.qr i{background:#141824;border-radius:1px}
.qr i.o{background:transparent}
.pairscreen .wait{margin-top:12px;font-size:10.5px;color:#5b6378}
.buyphone{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){.buyphone{grid-template-columns:1fr}.buyphone .phone{justify-self:center}}
.buyphone .price{font:500 clamp(46px,6vw,64px)/1 Newsreader,serif;margin:6px 0 4px}
.buyphone .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0;margin:0}
@media (max-width:820px){.specs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.specs{grid-template-columns:1fr}}
.specs li{list-style:none;background:var(--panel);border-radius:20px;padding:18px 20px;box-shadow:0 0 0 1px var(--line)}
.specs b{display:block;font:500 26px/1.1 Newsreader,serif;margin-bottom:4px}
.compare{width:100%;border-collapse:collapse;max-width:900px}
.compare th,.compare td{text-align:left;padding:14px 12px;border-top:1.5px solid var(--line);vertical-align:top}
.compare thead th{border-top:0;font-size:15px;color:var(--muted)}
.compare tbody th{font-weight:700;width:28%}
.tablewrap{overflow-x:auto}

.hero .panel .tagline{margin:10px 0 0;font:500 italic 21px/1.3 Newsreader,serif;color:var(--blue)}