/*
Theme Name: Titro
Theme URI: https://titroshqip.com
Description: Titro — titra shqip automatike. Custom theme, no page builder, no plugins.
Author: Habitat
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: titro
*/

/* ============================================================================
   Titro v2 — the restraint of a hand-set page.
   One typeface (Geist). One accent (amber, because it is literally what we do
   to a word). Hairlines instead of shadows. Nothing illustrated that could be
   stated. Every class the old theme used still resolves, so the legal pages,
   signup, account and admin console come along unchanged.
   ========================================================================== */

:root{
  --ink:#0A0A0A; --paper:#FFFFFF; --tint:#F5F5F5; --line:#E8E8E8; --line2:#D8D8D8;
  --t2:#5A5A5A; --t3:#8E8E8E;
  --amber:#FFD400; --bad:#B00020; --good:#0B6B44;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:14px; --r-lg:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;
  font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1300px;margin:0 auto;padding:0 28px}
.hide-m{display:inline}
@media(max-width:820px){.hide-m{display:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:18px;z-index:50;margin:18px auto 0;max-width:1180px;padding:0 20px}
.nav-in{display:flex;align-items:center;gap:26px;height:58px;padding:0 10px 0 22px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line);border-radius:999px}
/* margin on the mark, NOT flex gap — gap would also split the amber dot off
   the wordmark, since the <em>.</em> is a third flex child */
.logo{display:inline-flex;align-items:center;font-size:19px;font-weight:650;letter-spacing:-.045em;text-decoration:none}
.logo .logo-mark{width:26px;height:26px;display:block;margin-right:8px}
.foot .logo{text-decoration:none}
.foot .logo .logo-mark{width:22px;height:22px}
.logo em,.logo i{font-style:normal;color:var(--amber)}
.nav-links{display:flex;gap:24px;margin-left:auto;list-style:none;align-items:center}
.nav-links a{font-size:14px;color:var(--t2);font-weight:450}
.nav-links a:hover{color:var(--ink)}
/* The CTA is an <a> inside .nav-links, so .nav-links a (0,2,0) outranks
   .btn-fill (0,1,0) and the label came out grey on black. Restate it here at
   matching specificity, and light it amber on hover. */
.nav-links a.btn{color:var(--paper)}
.nav-links a.btn:hover{background:var(--amber);color:var(--ink);opacity:1}
.btn-fill:hover,.btn-dark:hover{background:var(--amber);color:var(--ink);opacity:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
  padding:0 22px;font:inherit;font-size:14.5px;font-weight:550;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease}
.btn-fill,.btn-dark{background:var(--ink);color:var(--paper)}
.btn-fill:hover,.btn-dark:hover{opacity:.85}
.btn-line{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn-line:hover{background:var(--tint)}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.btn-lg{height:52px;padding:0 28px;font-size:15px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- hero ---------- */
.hero{padding:clamp(76px,11vw,148px) 0 clamp(46px,6vw,74px);text-align:center}
h1{font-size:clamp(44px,7.6vw,88px);font-weight:600;letter-spacing:-.032em;line-height:1;
  text-wrap:balance;max-width:15ch;margin:0 auto}
h1 mark{background:var(--amber);color:var(--ink);padding:0 .06em;border-radius:4px}
.lede,.hero .lead{margin:26px auto 0;max-width:52ch;font-size:clamp(16px,1.6vw,18px);
  color:var(--t2);line-height:1.55;text-wrap:balance}
.cta,.cta-row{display:flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.micro,.note{margin-top:26px;font-family:var(--mono);font-size:11.5px;color:var(--t3)}

/* ---------- store badges ---------- */
/* Two kinds sit in this row: the official store artwork (.badge-store, which
   carries its own black pill and must not be restyled) and our own outlined
   pill for the web app (.badge). They're matched on HEIGHT, not on padding —
   both store badges are 3:1, so one height aligns the artwork exactly. */
/* row-gap > column-gap on purpose: the "së shpejti" label hangs 18px below its
   badge, and once the row wraps on a phone it landed on top of the next one. */
.badges{display:flex;gap:26px 12px;justify-content:center;align-items:center;
  flex-wrap:wrap;margin-top:26px}
.badges:has(.is-soon){padding-bottom:20px}   /* room for the "së shpejti" label */

.badge-store{position:relative;display:inline-flex;align-items:center;line-height:0;
  border-radius:11px;transition:opacity .15s ease,transform .15s ease}
.badge-store img{height:54px;width:auto;display:block}
a.badge-store:hover{opacity:.86;transform:translateY(-1px)}
a.badge-store:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Not yet on the App Store: show the badge so the row reads right, but grey it
   out and make it inert — a live-looking button that goes nowhere is worse. */
.badge-store.is-soon{opacity:.4;filter:grayscale(1);pointer-events:none}
.badge-store.is-soon em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  font-style:normal;font-size:10.5px;letter-spacing:.04em;color:var(--t3);
  line-height:1;white-space:nowrap}
/* On a phone two 54px badges plus the gap overflow by a few pixels, which drops
   Google onto a line of its own and leaves App Store paired with the browser
   pill — the wrong two together. Shrink slightly so the two STORE badges share
   a row and the browser alternative sits under them. */
@media(max-width:460px){
  .badges{gap:26px 10px}
  .badge-store img{height:48px}
  .badge{height:48px;padding:0 16px}
}

.badge{display:inline-flex;align-items:center;gap:11px;height:54px;padding:0 20px;
  border-radius:11px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:opacity .15s ease}
.badge:hover{opacity:.85}
.badge span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.badge b{font-size:15.5px;font-weight:550;letter-spacing:-.01em}
.badge em{font-style:normal;font-size:10.5px;opacity:.72;letter-spacing:.03em}
.badge.soon{background:transparent;color:var(--t3);border-color:var(--line)}
.badge.soon:hover{opacity:1;background:var(--tint)}

/* ---------- sections ---------- */
section{padding:clamp(72px,10vw,132px) 0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the dark band (stilet): breaks the white monotony; strips render seamless on
   it because they're burned on the same #0B0B10 the canvas uses */
section.dark{background:#0B0B10}
section.dark h2{color:#fff}
section.dark .sub{color:rgba(255,255,255,.62)}
section.dark .eyebrow{color:var(--amber)}
.stilet{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
@media(max-width:700px){.stilet{grid-template-columns:1fr}}
.stil{margin:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.02);transition:border-color .2s ease,transform .2s ease}
.stil:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.stil img{display:block;width:100%;height:auto}
.stil figcaption{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding:9px 14px;border-top:1px solid rgba(255,255,255,.07)}
.stilet-note{margin:26px auto 0;max-width:640px;text-align:center;font-size:14px;
  line-height:1.65;color:rgba(255,255,255,.55)}

/* scroll reveal — .rv is added by the homepage script only when motion is OK */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
section.tint,.sec.tint{background:var(--tint);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
h2{font-size:clamp(30px,4.6vw,56px);font-weight:600;letter-spacing:-.028em;line-height:1.04;
  text-align:center;text-wrap:balance;max-width:18ch;margin:0 auto}
h2 mark{background:var(--amber);color:var(--ink);padding:0 .05em;border-radius:4px}
.sub{margin:20px auto 0;max-width:50ch;text-align:center;color:var(--t2);font-size:16.5px;line-height:1.55}
.eyebrow,.tc{display:block;text-align:center;font-family:var(--mono);font-size:11.5px;
  color:var(--t3);margin-bottom:18px;letter-spacing:.06em;text-transform:lowercase}
.tc b{font-weight:inherit;color:inherit}
.head{margin-bottom:clamp(32px,4.5vw,54px)}

/* ---------- feature list ---------- */
.feats{max-width:1100px;margin:clamp(44px,6vw,76px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,68px)}
.feat,.feats .f{padding:26px 0;border-top:1px solid var(--line)}
.feat h3,.feats .f h3{font-size:18px;font-weight:600;letter-spacing:-.018em;
  display:flex;gap:10px;align-items:baseline}
.feat h3 i,.fn{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--t3)}
.feat p,.feats .f p{margin-top:9px;color:var(--t2);font-size:15px;line-height:1.62}
@media(max-width:760px){.feats{grid-template-columns:1fr}}

/* ---------- platforms ---------- */
.plats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;
  margin:clamp(40px,5vw,64px) auto 0}
.plat{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;background:var(--paper)}
.plat .k{font-family:var(--mono);font-size:11px;color:var(--t3);display:block;margin-bottom:12px}
.plat h3{font-size:17px;font-weight:600;letter-spacing:-.018em}
.plat p{margin-top:9px;color:var(--t2);font-size:14.5px;line-height:1.6}
.plat a{text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media(max-width:820px){.plats{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
  max-width:1100px;margin:clamp(40px,5vw,64px) auto 0}
.step .k{font-family:var(--mono);font-size:11px;color:var(--t3)}
.step h3{margin-top:12px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:9px;color:var(--t2);font-size:15px;line-height:1.6}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- caption style samples ---------- */
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1060px;
  margin:clamp(40px,5vw,64px) auto 0}
.st{border:1px solid var(--line);border-radius:var(--r);padding:26px 18px;min-height:118px;
  display:flex;flex-direction:column;justify-content:space-between;background:var(--paper)}
.st .demo{font-weight:600;font-size:16px;letter-spacing:-.02em;line-height:1.3}
.st .name{font-family:var(--mono);font-size:10.5px;color:var(--t3)}
.hl{background:var(--amber);padding:0 4px;border-radius:3px}
.bx{background:var(--ink);color:var(--paper);padding:1px 5px;border-radius:3px}
.dim{color:var(--t3)}
.st.top .demo{align-self:flex-start}
.neon{text-shadow:0 0 12px var(--amber)}
.band{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:4px}
.big{font-size:21px}
@media(max-width:820px){.styles{grid-template-columns:repeat(2,1fr)}}

/* ---------- minutes ---------- */
.mins{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1060px;
  margin:clamp(40px,5vw,64px) auto 0}
.min{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;text-align:center;
  background:var(--paper)}
.min .n{font-size:44px;font-weight:600;letter-spacing:-.035em}
.min .l{margin-top:6px;font-size:14.5px;font-weight:500}
.min .s{margin-top:4px;font-size:13px;color:var(--t3)}
.callout{max-width:56ch;margin:26px auto 0;text-align:center;font-size:14.5px;
  color:var(--t2);line-height:1.6}
@media(max-width:760px){.mins{grid-template-columns:1fr}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;
  margin:clamp(40px,5vw,64px) auto 0}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.plan.best{border-color:var(--ink)}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--ink);
  background:var(--amber);padding:3px 8px;border-radius:4px;margin-bottom:10px}
.tier{display:block;font-family:var(--mono);font-size:11.5px;color:var(--t3)}
.price{font-size:40px;font-weight:600;letter-spacing:-.03em;margin:10px 0 20px}
.price em{font-style:normal;font-size:14px;color:var(--t3);font-weight:450}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.plan li{font-size:14.5px;color:var(--t2);padding-left:18px;position:relative}
.plan li b{color:var(--ink);font-weight:600}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--amber)}
.plan .btn{width:100%}
.pnote{margin:26px auto 0;max-width:54ch;text-align:center;font-size:14px;color:var(--t3);line-height:1.6}
@media(max-width:700px){.plans{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:clamp(40px,5vw,64px) auto 0;border-top:1px solid var(--line)}
.faq details,.faq .qa{border-bottom:1px solid var(--line)}
.faq summary,.faq .qa h3{padding:22px 0;font-size:17px;font-weight:550;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--t3);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 22px;color:var(--t2);font-size:15.5px;line-height:1.65;max-width:62ch}
.faq a{text-decoration:underline;text-underline-offset:2px}

/* ---------- prose / closer ---------- */
.prose{max-width:820px;margin:clamp(36px,5vw,56px) auto 0;color:var(--t2);
  font-size:16px;line-height:1.7}
.prose h3{color:var(--ink);font-size:19px;font-weight:600;margin:30px 0 8px;letter-spacing:-.02em}
.prose p{margin-bottom:14px}
.prose strong{color:var(--ink);font-weight:600}
/* The closing CTA is a full amber block. It is the one place on the page that
   raises its voice, and amber is the brand's own colour rather than a borrowed
   accent — the same yellow that lands on the spoken word. */
/* The closer: a SHORT amber card the phone deliberately overflows — the shot
   pokes out above and below the box (overflow visible + negative margins), so
   the section needs its own head-room. (section.closer keeps its specificity
   note: section.tint scores (0,1,1) and would otherwise win.) */
section.closer{background:var(--paper);padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.closer-box{background:var(--amber);border-radius:28px;
  display:grid;grid-template-columns:1fr 300px;align-items:center;
  gap:clamp(16px,3vw,40px);padding:clamp(20px,2.6vw,32px) clamp(28px,4.5vw,60px)}
.closer-copy{text-align:left}
.closer h2{max-width:17ch;color:var(--ink);margin:0;text-align:left}
.closer .sub{color:rgba(10,10,10,.72);margin-left:0;text-align:left}
.closer .btn-dark,.closer .btn-fill{background:var(--ink);color:var(--paper)}
.closer .btn-dark:hover,.closer .btn-fill:hover{background:var(--paper);color:var(--ink)}
.closer .btn-line{border-color:rgba(10,10,10,.28);color:var(--ink)}
/* one row: both buttons + both store badges, matched on height */
/* explicitly left — an older cached stylesheet rendered this row unstyled and
   centered once; never leave alignment to defaults on a rule that ships in two
   layers (theme zip + pasted page content) */
.closer-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:12px;margin-top:24px}
.closer-actions .badge-store img{height:48px}
.closer-shot{margin:-88px 0;transform:rotate(4deg)}
.closer-shot img{display:block;width:100%;max-width:300px;margin:0 auto;border-radius:22px;
  box-shadow:0 24px 60px rgba(10,10,10,.35);border:6px solid var(--ink)}
@media(max-width:820px){
  .closer h2{margin-inline:auto;text-align:center}
  .closer .sub{margin-inline:auto;text-align:center}
  .closer-box{grid-template-columns:1fr}
  .closer-copy{text-align:center}
  .closer-actions{justify-content:center}
  /* stacked: pop out of the BOTTOM only */
  .closer-shot{margin:10px 0 -84px;transform:rotate(2deg)}
  .closer-shot img{max-width:220px}
  section.closer{padding-bottom:clamp(96px,16vw,128px)}
}
.closer .btn-line:hover{background:rgba(10,10,10,.07)}
/* the old .close block, kept for the fallback markup */
.close{background:var(--amber);border-top:0}
.close h2{color:var(--ink)}
.close .btn-fill{background:var(--ink);color:var(--paper)}
.close .btn-fill:hover{background:var(--paper);color:var(--ink)}
.close{padding:clamp(72px,10vw,132px) 0;text-align:center;background:var(--tint);
  border-top:1px solid var(--line)}
.close .inner{max-width:760px;margin:0 auto}

/* ---------- footer ---------- */
.foot,footer{border-top:1px solid var(--line);padding:0;font-size:13px;color:var(--t3)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px;
  padding:clamp(40px,6vw,64px) 0 clamp(28px,4vw,44px)}
/* explicitly left, same lesson as .closer-actions: the brand block sat inside
   an ancestor that centers text and looked orphaned between left-aligned columns */
.foot-brand{text-align:left}
.foot-brand p{margin-top:12px;font-size:13.5px;color:var(--t3);max-width:24ch;line-height:1.55}

.foot .logo{color:var(--ink);font-size:17px;text-decoration:none}
.foot-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
.foot-col h4{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);margin:0 0 4px}
/* .foot .foot-col a — the base link rule underlines at rest and outranks a
   single class+type; this is the third specificity bite in this file, so match
   it head-on rather than hoping (see the CSS notes in NEXT-SESSION.md) */
.foot .foot-col a{font-size:14px;color:var(--t2);text-decoration:none}
.foot .foot-col a:hover{color:var(--ink);text-decoration:underline}
.foot-soon{font-size:14px;color:var(--t3)}
.foot-bar{border-top:1px solid var(--line);padding:18px 0 26px;text-align:center}
.foot-bar p{font-size:12.5px;color:var(--t3);margin:0}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .foot-brand{grid-column:1/-1}}

/* ============================================================================
   App pages: signup, auth, welcome, account, admin, and the legal bodies.
   Same language — hairlines, black CTAs, mono labels.
   ========================================================================== */
.page-wrap{max-width:560px;margin:0 auto;padding:clamp(56px,8vw,96px) 28px 90px}
.page-wide{max-width:1080px}
.page-wrap h1{font-size:clamp(30px,4.4vw,44px);text-align:left;max-width:none;margin:0}
.page-wrap.center,.center{text-align:center}
.page-wrap.center h1{text-align:center}
.page-wrap .sub{margin:12px 0 30px;text-align:left;color:var(--t2);font-size:16px}
.page-wrap.center .sub{text-align:center;margin-inline:auto}
.big-ic{width:64px;height:64px;border-radius:999px;display:grid;place-items:center;
  margin:0 auto 20px;font-size:28px;background:var(--tint);border:1px solid var(--line)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.card+.card{margin-top:16px}

.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:11px;color:var(--t3);
  margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase}
.input{width:100%;height:50px;padding:0 14px;font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);outline:0;
  transition:border-color .15s ease,box-shadow .15s ease}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.input::placeholder{color:var(--t3)}
form .btn{margin-top:22px}

.msg{display:none;padding:14px 16px;border-radius:var(--r);font-size:14.5px;margin-bottom:18px;
  border:1px solid transparent}
.msg.show{display:block}
.msg.err{background:#FFF5F6;border-color:#F3D3D8;color:var(--bad)}
.msg.ok{background:#F2FBF6;border-color:#CDE9DA;color:var(--good)}
.muted,.foot{margin-top:16px;font-size:13.5px;color:var(--t3);text-align:center}
.muted a,.foot a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:500}

/* signup: billing-cycle toggle + plan picker */
.toggle{display:flex;gap:4px;background:var(--tint);padding:4px;border-radius:999px;margin-bottom:18px}
.toggle button{flex:1;height:38px;font:inherit;font-size:13.5px;font-weight:550;color:var(--t2);
  background:transparent;border:0;border-radius:999px;cursor:pointer}
.toggle button.on{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.save-badge{font-family:var(--mono);font-size:10px;color:var(--t3);margin-left:6px}
.picker{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:border-color .15s ease}
.opt:hover{border-color:var(--line2)}
.opt.on{border-color:var(--ink)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line2);flex:0 0 auto}
.opt.on .dot{border-color:var(--ink);border-width:5px}
.opt .n{display:block;font-size:15.5px;font-weight:600}
.opt .d{display:block;font-size:13px;color:var(--t3);margin-top:2px}
.opt .p{margin-left:auto;text-align:right;font-size:17px;font-weight:600;white-space:nowrap}
.opt .p em{display:block;font-style:normal;font-size:11.5px;color:var(--t3);font-weight:450}

/* legal bodies */
.legal-body h2{font-size:21px;font-weight:600;margin:34px 0 10px;letter-spacing:-.02em;
  text-align:left;max-width:none}
.legal-body h3{font-size:17px;font-weight:600;margin:24px 0 8px}
.legal-body p,.legal-body li{color:var(--t2);font-size:15.5px;line-height:1.7}
.legal-body ul{padding-left:22px;margin:10px 0}
.legal-body strong{color:var(--ink);font-weight:600}
.legal-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:500}
/* ...but never repaint a BUTTON's label. */
.legal-body a.btn,.legal-body a.btn-fill,.legal-body a.btn-dark{color:var(--paper);text-decoration:none}
.legal-body a.btn-line{color:var(--ink);text-decoration:none}
.updated{color:var(--t3);font-size:13.5px;margin-bottom:10px;font-family:var(--mono)}

/* ---------- admin console ---------- */
.page-wrap.page-wide{max-width:1080px}
.adm-tabs{display:flex;gap:8px;margin-bottom:18px}
.adm-tab{font:inherit;font-size:13.5px;font-weight:550;color:var(--t2);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 18px}
.adm-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.adm-wrap{padding:0;overflow-x:auto}
table.adm{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
table.adm th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:18px 14px 10px;white-space:nowrap}
table.adm td{padding:14px;border-top:1px solid var(--line);vertical-align:middle}
table.adm tr:hover td{background:var(--tint)}
.adm-pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:4px 10px;
  border-radius:999px;background:var(--tint);color:var(--t2);white-space:nowrap;
  border:1px solid var(--line)}
.adm-pill.on{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.adm-warn{font-family:var(--mono);font-size:10.5px;color:var(--bad);white-space:nowrap}
.adm-note{font-family:var(--mono);font-size:10.5px;color:var(--t3);white-space:nowrap}
.adm-set{display:flex;gap:8px;align-items:center}
.adm-set .input{width:auto;height:38px;padding:0 10px;font-size:13.5px}
.adm-set .btn{white-space:nowrap}

/* ---------- product shots, one per platform ---------- */
/* Every card gets the SAME media height so the row stays level, and each shot
   is contained inside its own device chrome: a phone for the two phones, a
   browser for the web. Different shapes, equal weight. */
.plat-media{height:300px;display:grid;place-items:center;margin:-4px 0 20px;
  background:var(--tint);border-radius:var(--r);overflow:hidden}
.plat-media .miss{font-family:var(--mono);font-size:10.5px;color:var(--t3);
  text-align:center;padding:0 18px;line-height:1.6}

/* phone */
.dev-phone{height:272px;aspect-ratio:9/19.5;border-radius:26px;padding:5px;background:var(--ink);
  box-shadow:0 18px 36px -20px rgba(10,10,10,.5)}
.dev-phone .scr{width:100%;height:100%;border-radius:22px;overflow:hidden;background:#fff;
  display:grid;place-items:center}
.dev-phone img{width:100%;height:100%;object-fit:cover;object-position:top}

/* browser */
.dev-web{width:88%;border-radius:12px;overflow:hidden;background:var(--ink);
  box-shadow:0 18px 36px -20px rgba(10,10,10,.5)}
.dev-web .bar{height:22px;display:flex;align-items:center;gap:5px;padding:0 9px}
.dev-web .bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
.dev-web .scr{aspect-ratio:16/10;background:#fff;display:grid;place-items:center}
.dev-web img{width:100%;height:100%;object-fit:cover;object-position:top}

/* the big hero shot keeps its own, larger frame */
.shot-sec{display:flex;justify-content:center;margin:clamp(44px,6vw,76px) auto 0}
.phone-frame{width:300px;max-width:100%;aspect-ratio:9/19.5;border-radius:44px;padding:9px;
  background:var(--ink);box-shadow:0 40px 80px -34px rgba(10,10,10,.45)}
.phone-frame .scr{width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--tint);
  display:grid;place-items:center}
.phone-frame img{width:100%;height:100%;object-fit:cover}
.phone-frame .ph{font-family:var(--mono);font-size:11px;color:var(--t3);padding:0 20px;text-align:center}