/*
Theme Name: Titro
Theme URI: https://titroshqip.com
Description: Titro — titra shqip automatike. Custom theme, no page builder, no plugins.
Author: Habitat
Version: 2.2.2
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 ---------- */
/* Two plans now, not three — a 3-column grid left a gap where Pro was. */
.plans-2{grid-template-columns:repeat(2,1fr)!important;max-width:760px!important}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;
  margin:clamp(40px,5vw,64px) auto 0}
.plan{display:flex;flex-direction:column;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%;margin-top:auto}
.pnote{margin:26px auto 0;max-width:54ch;text-align:center;font-size:14px;color:var(--t3);line-height:1.6}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:420px}}

/* ---------- 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)}
/* device-phone.webp and device-studio.webp are finished renders: a phone and a
   laptop, drop shadow included, on transparency. The default .closer-shot rule
   draws a phone around a flat screenshot, which would frame these a second time,
   so `.is-render` strips that treatment off.

   NOT named `.device`: that class already exists in this file as the hero's
   phone chassis (dark gradient, 44px radius, a ::after for the notch), and the
   laptop came out sitting inside a black phone body.

   The device OVERHANGS the amber box, the way the homepage's closer does. The
   negative block margin is what makes that work: it stops the device inflating
   the grid row, so the box no longer stretches to fit the picture.

   The overhang is exactly (negative margin − the box's own padding-block), so
   those two numbers have to be tuned together: raising the padding to get more
   yellow behind the device also shortens the overhang by the same amount. */
.closer-box:has(.closer-shot.is-render){grid-template-columns:1fr 300px;padding-block:clamp(40px,4.4vw,60px)}
.closer-shot.is-render{margin:0;margin-block:calc(-1 * clamp(90px,10.8vw,155px));transform:none;
  overflow:visible;display:flex;align-items:center;justify-content:center}
.closer-shot.is-render img{width:100%;max-width:300px;height:auto;object-fit:contain;
  border:0;border-radius:0;box-shadow:none;background:none}

/* The laptop is landscape: it overhangs the right edge as well, and runs wider
   than its column. flex:0 0 auto stops the flex container shrinking it back. */
.closer-box.wide-shot:has(.closer-shot.is-render){grid-template-columns:1fr 46%}
.closer-box.wide-shot .closer-shot.is-render{margin-block:calc(-1 * clamp(74px,7.6vw,110px));justify-content:flex-end}
.closer-box.wide-shot .closer-shot.is-render img{flex:0 0 auto;max-width:none;
  width:clamp(340px,56vw,820px);margin-right:calc(-1 * clamp(24px,6vw,96px))}

/* An overhanging device needs somewhere to overhang INTO, or it lands on the
   footer. Only sections that actually carry a render pay for the extra space. */
section.closer:has(.closer-shot.is-render){
  padding-top:calc(clamp(56px,7vw,96px) + clamp(34px,5vw,74px));
  padding-bottom:calc(clamp(56px,7vw,96px) + clamp(40px,5.6vw,84px))}
@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}

/* inline action inside a status message (e.g. "resend confirmation") */
.msg .msg-act{display:inline-block;margin-left:8px;font:inherit;font-size:inherit;font-weight:700;
  color:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.msg .msg-act:disabled{opacity:.6;cursor:default;text-decoration:none}

/* ---------- 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)}

/* Newsletter opt-in: a slim band above the copyright. Same hairline language as
   the rest of the footer; the input reuses the app-page .input, the button the
   dark CTA. Double opt-in happens server-side, so this just collects the email. */
/* text-align:left is deliberate — an ancestor centers text in the footer, the
   same reason .foot-brand and .foot-col each reset it (see NEXT-SESSION.md). */
.foot-sub{border-top:1px solid var(--line);padding:clamp(28px,4vw,40px) 0;text-align:left;
  display:grid;grid-template-columns:1fr minmax(280px,400px);gap:20px 32px;align-items:center}
.foot-sub-copy h4{margin:0 0 5px;font-size:17px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;text-transform:none}
.foot-sub-copy p{margin:0;font-size:13.5px;color:var(--t3);max-width:42ch;line-height:1.5}
.subform{display:flex;gap:10px;margin:0}
.subform .input{flex:1 1 auto;height:48px}
.subform .btn{margin-top:0;flex:0 0 auto;white-space:nowrap}
.subnote{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--t2);min-height:18px}
.subnote.ok{color:var(--good)}
.subnote.err{color:var(--bad)}
@media(max-width:760px){.foot-sub{grid-template-columns:1fr;gap:14px}
  .subform{flex-wrap:wrap}.subform .btn{flex:1 1 100%}}

.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}
.foot-legal{margin-top:5px !important;font-size:11.5px;opacity:.85}
@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}
.consents{display:grid;gap:12px;margin:4px 0 0}
.consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.45;color:var(--ink,#0A0A0A)}
.consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:#0A0A0A;cursor:pointer}
.consent strong{font-weight:600;display:block}
.consent small{display:block;font-size:12.5px;color:var(--t3);margin-top:2px}
.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}
/* Console toolbar: search, filter, page size, and a live tally of what the
   three account kinds actually are. Wraps on a phone instead of scrolling. */
.adm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.adm-bar .input{width:auto;margin:0}
.adm-q{flex:1 1 220px;min-width:180px}
.adm-f{flex:0 0 auto}
.adm-tally{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--t3);white-space:nowrap}
.adm-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;
  font-family:var(--mono);font-size:12px;color:var(--t3)}
.adm-pager button[disabled]{opacity:.4;pointer-events:none}
table.adm th.adm-sort{cursor:pointer;user-select:none}
table.adm th.adm-sort:hover{color:var(--t2)}
table.adm th.adm-sort.on{color:var(--ink)}
table.adm th.adm-sort i{font-style:normal;margin-left:5px;font-size:9px}
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}

/* ============================================================================
   v2.1 — colour, mockups, and the parts that move.
   Appended rather than merged: everything above still resolves, and a rule
   here wins on source order at equal specificity, so this file can be read as
   "the page, then what changed" instead of a diff.

   The palette gains two colours from the ad creative so the site and the feed
   read as one brand:
     teal  — the ground the ads sit on. Used for BANDS and edges, never type.
     amber — already ours: the highlight the app paints on the spoken word.
   Ink stays the only near-black, paper the only white. Two accents, no more.
   ========================================================================== */

:root{
  --teal:#2FC4D8; --teal-ink:#0E7C8C; --teal-soft:#EAFAFC; --teal-line:#BEEAF1;
  --sun:#FFC53D;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Bands. The page alternates paper → teal → paper → ink, so a long scroll has
   a rhythm instead of one grey wash. .tint (the old grey) is kept for pages
   that were built against it. */
section.tint-teal{background:var(--teal-soft);
  border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line)}
section.tint-teal .eyebrow{color:var(--teal-ink)}
section.tint-teal .plan,section.tint-teal .plat,section.tint-teal .card{background:var(--paper)}

.eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;
  margin-inline:auto;padding:0;font-weight:600}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--teal);border-radius:2px}
.eyebrow::after{content:"";width:18px;height:2px;background:var(--amber);border-radius:2px}
/* .eyebrow was display:block + text-align:center; inline-flex needs the parent
   to do the centring instead. */
.wrap>.eyebrow{display:flex;width:fit-content}

/* ---------- hero: copy on the left, the product on the right --------------- */
/* The old hero was type on white and nothing else. Anyone arriving from an ad
   that showed the app then landed on a page that didn't. */
/* No overflow:hidden. It was added to contain the old 118%-wide teal disc; the
   disc is gone and the only thing left to clip is the mockup's shadow. The
   mockup is sized below to stay inside .wrap's padding, so nothing needs
   clipping and the page cannot scroll sideways either. */
.hero{text-align:left;padding:clamp(52px,7vw,96px) 0 clamp(48px,6vw,84px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.hero h1{text-align:left;margin:0;max-width:13ch;font-size:clamp(40px,6.2vw,76px)}
.hero .lede{margin:22px 0 0;max-width:46ch;text-align:left}
.hero .badges{justify-content:flex-start;margin-top:30px}
.hero .micro{text-align:left}

/* the pill above the headline — the ad's promise, restated */
.hero-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:7px 15px 7px 9px;border-radius:999px;background:var(--paper);
  border:1px solid var(--teal-line);font-size:13px;font-weight:550;color:var(--ink)}
.hero-kicker b{display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:999px;background:var(--amber);font-size:11.5px;font-weight:700;
  letter-spacing:.02em}
.hero-kicker span{color:var(--t2);font-weight:450}

/* ---------- the device ---------------------------------------------------- */
/* A CSS frame, not a mockup PNG: it stays sharp at every density, weighs
   nothing, and — the reason it matters tomorrow — its screen is a plain box we
   can drop a <video> into without re-cutting an image. */
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;
  gap:22px;min-height:1px}
/* the teal disc behind the phone, the ads' background brought forward */
.hero-stage::before{content:"";position:absolute;z-index:0;width:118%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--teal) 0%,var(--teal-soft) 58%,transparent 72%);
  opacity:.5}

.device{position:relative;z-index:1;width:clamp(230px,25vw,286px);flex:0 0 auto;
  padding:9px;border-radius:44px;background:linear-gradient(160deg,#2B2B32,#0A0A0A 42%,#26262C);
  box-shadow:0 34px 70px -22px rgba(10,10,10,.5),0 2px 0 rgba(255,255,255,.16) inset}
.device-screen{position:relative;aspect-ratio:1290/2796;overflow:hidden;
  border-radius:36px;background:#F4F5F7}
/* dynamic island */
.device::after{content:"";position:absolute;z-index:3;top:20px;left:50%;transform:translateX(-50%);
  width:31%;height:22px;border-radius:999px;background:#0A0A0A}

.reel{display:flex;flex-direction:column;transition:transform .62s var(--ease);will-change:transform}
.reel img{display:block;width:100%;height:auto}

/* the step rail beside the phone — also the control for it */
.hero-rail{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;
  margin:0;padding:0;list-style:none;flex:0 1 auto}
.hero-rail button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px 9px 10px;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--t3);text-align:left;
  background:transparent;border:0;border-radius:10px;cursor:pointer;white-space:nowrap;
  transition:color .2s ease,background .2s ease}
.hero-rail button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.hero-rail button i{font-style:normal;display:grid;place-items:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;background:var(--paper);
  border:1px solid var(--teal-line);font-family:var(--mono);font-size:10px;color:var(--t3);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.hero-rail button[aria-current="true"]{color:var(--ink);font-weight:600}
.hero-rail button[aria-current="true"] i{background:var(--amber);border-color:var(--amber);color:var(--ink)}
/* the timer bar under the active step: the only thing that says "this advances
   on its own", so nobody waits wondering whether they broke it */
.hero-rail button::after{content:"";position:absolute;left:10px;right:12px;bottom:3px;height:2px;
  border-radius:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;opacity:0}
.hero-rail li{position:relative}
.hero-rail button[aria-current="true"]::after{opacity:1;animation:tick var(--dwell,4200ms) linear forwards}
.hero-rail.is-paused button::after{animation-play-state:paused}
@keyframes tick{to{transform:scaleX(1)}}

@media(max-width:700px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero{text-align:center}
  .hero h1,.hero .lede{margin-inline:auto;text-align:center}
  .hero .badges{justify-content:center}
  .hero .micro{text-align:center}
  .hero-stage{flex-direction:column-reverse;gap:16px}
  .hero-rail{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px}
  .hero-rail button{width:auto;padding:7px 12px;background:var(--paper);border:1px solid var(--teal-line)}
}
@media(prefers-reduced-motion:reduce){
  .reel{transition:none}
  .hero-rail button[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}

/* ---------- the strip of what it works on --------------------------------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;background:var(--paper);--gap:44px}
.marquee-track{display:flex;gap:var(--gap);width:max-content;
  animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:var(--gap);font-family:var(--mono);
  font-size:12px;letter-spacing:.04em;color:var(--t3);text-transform:uppercase;white-space:nowrap}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal)}
@keyframes slide{to{transform:translateX(calc(-50% - var(--gap)/2))}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- steps, with a line drawn through them ------------------------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;top:11px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,var(--teal-line),var(--teal),var(--teal-line));z-index:0}
.step{position:relative;z-index:1}
.step .k{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--paper);border:1px solid var(--teal);color:var(--teal-ink);font-size:10.5px}
.step:hover .k{background:var(--amber);border-color:var(--amber);color:var(--ink)}
@media(max-width:760px){.steps::before{display:none}}

/* ---------- style switcher ------------------------------------------------ */
/* Eight renders in a grid asked to be compared eight at a time. One large
   preview and a row of names asks to be played with, which is the point: these
   are the actual burned output, not artwork. */
.stil-switch{max-width:900px;margin:clamp(34px,4.5vw,52px) auto 0}
.stil-stage{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0B0B10;aspect-ratio:640/101}
.stil-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s ease}
.stil-stage img.on{opacity:1}
.stil-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.stil-tabs button{height:36px;padding:0 15px;font:inherit;font-size:13px;font-weight:550;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);cursor:pointer;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;transition:all .18s ease}
.stil-tabs button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.stil-tabs button[aria-selected="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
/* No JS: the switcher never initialises, so show the plain grid instead. */
.stil-switch[hidden]{display:none}
.js .stilet.has-switch{display:none}

/* ---------- pricing: monthly / yearly ------------------------------------- */
.billing{display:flex;justify-content:center;margin:26px 0 0}
.billing-toggle{display:inline-flex;gap:3px;padding:4px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line)}
.billing-toggle button{height:34px;padding:0 16px;font:inherit;font-size:13.5px;font-weight:550;
  color:var(--t2);background:transparent;border:0;border-radius:999px;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.billing-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.billing-toggle em{font-style:normal;margin-left:7px;font-size:11px;font-weight:700;
  color:var(--teal-ink)}
.billing-toggle button[aria-pressed="true"] em{color:var(--amber)}
.plan .price .yr{display:none}
.plans.is-yearly .price .mo{display:none}
.plans.is-yearly .price .yr{display:inline}
.plan.best{position:relative;border-color:var(--ink);box-shadow:0 18px 44px -26px rgba(10,10,10,.45)}
.plan.best::before{content:"më i zgjedhuri";position:absolute;top:-11px;left:28px;
  padding:3px 10px;border-radius:999px;background:var(--amber);color:var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.02em}
.plan li::before{background:var(--teal)}
.plan.best li::before{background:var(--amber)}

/* ---------- proof row ----------------------------------------------------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;
  margin:clamp(34px,4.5vw,52px) auto 0}
.proof div{padding:22px 20px;border:1px solid var(--teal-line);border-radius:var(--r-lg);
  background:var(--paper);text-align:center}
.proof b{display:block;font-size:34px;font-weight:600;letter-spacing:-.03em}
.proof b em{font-style:normal;color:var(--teal-ink)}
.proof span{display:block;margin-top:5px;font-size:13.5px;color:var(--t2)}
@media(max-width:700px){.proof{grid-template-columns:1fr}}

/* ---------- the before/after the ads promise ------------------------------ */
/* Straight from the carousel: manual on the left, Titro on the right. Same
   comparison, same order, so an ad reader recognises the page instantly. */
.versus{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(18px,4vw,48px);
  max-width:900px;margin:clamp(34px,4.5vw,52px) auto 0;align-items:start}
.versus-line{background:var(--line);height:100%;min-height:120px}
.versus h3{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.versus ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.versus li{display:flex;gap:11px;align-items:baseline;font-size:15.5px;color:var(--t2)}
.versus li i{font-style:normal;flex:0 0 auto;font-size:15px}
.versus .them h3{color:var(--t3)}
.versus .us li{color:var(--ink)}
@media(max-width:700px){
  .versus{grid-template-columns:1fr;gap:26px}
  .versus-line{height:1px;min-height:0;width:100%}
}

/* The closer's shot used to be a landscape editor grab. It is a phone
   screenshot now (9:19.5), which at the old max-width made the section 1 600px
   tall on its own. Crop it to a peek instead — the top of the editor is the
   part worth showing. */
.closer-shot img{max-width:250px;height:clamp(300px,34vw,400px);object-fit:cover;object-position:top}
.closer-shot{margin:-52px 0}
@media(max-width:820px){
  .closer-shot{margin:6px 0 -60px}
  .closer-shot img{max-width:200px;height:280px}
}
/* Restated after the `.closer-shot img` crop block above: that rule forces a
   fixed height and object-fit:cover for a bare 9:19.5 screenshot, and a plain
   `.closer-shot img` selector still wins on any property .is-render leaves
   unset — which sliced the landscape laptop into a portrait sliver. */
.closer-shot.is-render img{height:auto;object-fit:contain;max-width:300px}
.closer-box.wide-shot .closer-shot.is-render img{max-width:none}
@media(max-width:820px){
  /* Stacked: the device sits under the copy, so a large overhang would only
     collide with the footer. Keep a small one for the same visual idea. */
  .closer-box:has(.closer-shot.is-render),
  .closer-box.wide-shot:has(.closer-shot.is-render){grid-template-columns:1fr}
  /* overhang = this margin MINUS the box's own padding-block (40px here), so
     these have to move together or the device sinks back inside the yellow. */
  .closer-shot.is-render{margin-block:-72px}
  .closer-shot.is-render img{max-width:240px}
  .closer-box.wide-shot .closer-shot.is-render{justify-content:center;margin-block:-66px}
  .closer-box.wide-shot .closer-shot.is-render img{width:100%;max-width:430px;margin-right:0}
  section.closer:has(.closer-shot.is-render){
    padding-top:calc(clamp(56px,7vw,96px) + 46px);
    padding-bottom:calc(clamp(56px,7vw,96px) + 54px)}
}

/* On a phone the kicker's number wrapped mid-phrase ("20 / sekonda"), which
   read as a typo rather than a promise. The number never breaks; the sentence
   after it may. */
.hero-kicker b{white-space:nowrap}
@media(max-width:560px){
  .hero-kicker{font-size:12.5px;padding:6px 13px 6px 7px;gap:8px;text-align:left}
  .hero-kicker span{line-height:1.35}
}

/* Align the hero with the nav.
   .nav is a 1180px box with 20px of its own padding and 22px more inside
   .nav-in, so the logo's left edge sits at (100vw - 1180)/2 + 42. .wrap is a
   1300px box with 28px padding, which put the hero 60px further left — invisible
   while the hero was centred text, obvious the moment it became a left-aligned
   column. Same 1180 box, same 42px inset, so the H1 starts exactly under the
   logo. Below 700px the nav's pill is nearly full-bleed and the hero is centred
   anyway, so the inset relaxes. */
.hero>.wrap{max-width:1180px;padding-inline:42px}
.hero-grid{max-width:none}
@media(max-width:700px){.hero>.wrap{padding-inline:24px}}

/* ---------- v2.2 — the hero holds a rendered mockup ------------------------
   The CSS device frame was built to hold a reel of flat screenshots. The
   mockup is a perspective render with its own shadow baked in, so it needs the
   opposite treatment: no frame, no clipping, and room to be big. The frame
   rules stay in the file — they are what the screen recording goes back into.
   -------------------------------------------------------------------------- */
.hero-grid:has(.hero-mock){grid-template-columns:minmax(0,1.08fr) minmax(0,.95fr);
  gap:clamp(24px,3.5vw,52px)}
.hero-stage:has(.hero-mock){display:block;position:relative}

.hero-mock{position:relative;z-index:1;margin:0;
  /* 8%, not 12%: the overhang has to stay inside .wrap's 42px padding or the
     page gains a horizontal scrollbar — and with .hero no longer clipping,
     an overflow would actually show. 8% of the column is ~39px, just under. */
  width:min(108%,660px);margin-inline:auto}
.hero-mock img{display:block;width:100%;height:auto}

/* No shape behind the mockup — and that is a decision, not an omission.
   The render carries its own soft grey shadow on white. A radial halo lost to
   it (all that survived was a smudge at the edges) and a teal panel read as a
   stray rectangle the phone failed to overhang, clipped by .hero's overflow
   into the bargain. The teal arrives one scroll-inch later in the marquee rule
   and the band under it, which is enough — the hero's job is the product, and
   nothing here competes with it. */
.hero-stage:has(.hero-mock)::before{content:none}

@media(max-width:700px){
  .hero-grid:has(.hero-mock){grid-template-columns:1fr}
  .hero-mock{width:min(100%,520px)}
}

/* This used to be max-width:100%, meant as an old-browser guard. It was instead
   overriding the width above and rendering the mockup ~130px narrower than
   intended on every browser. The guard is not needed: the ≤960 rule that
   shrinks the mockup is a plain .hero-mock selector and applies with or without
   :has() support. */
.hero-mock{max-width:none}

/* Badges and price on one row. .micro was a block under .badges, which put the
   only price in the hero on a line of its own below the fold of the eye. */
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin-top:30px}
.hero-actions .badges{margin-top:0;gap:12px}
/* 54px badges + the note came to ~7px more than the column, so the row wrapped
   and put the price back on its own line — the exact thing this was meant to
   fix. 46px badges buy 48px, and the copy column takes a little more of the
   grid. Both are needed: either alone still wraps at some widths. */
.hero-actions .badge-store img{height:46px}
/* Sized to hold its two lines and no more. "anulo kur të duash" left the hero
   for the pricing section, which is now the second thing on the page — it was
   costing two extra wrapped lines here to repeat something said in full a
   screen later. */
.hero-actions .micro{margin-top:0;text-align:left;line-height:1.7;max-width:24ch;flex:0 1 auto}
.micro-link{color:var(--t2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--teal-line);transition:color .15s ease}
.micro-link:hover{color:var(--ink);text-decoration-color:var(--teal)}
@media(max-width:700px){
  .hero-actions{justify-content:center}
  .hero-actions .micro{text-align:center;max-width:none}
}

/* Between 700px and 1100px the hero stays two columns — a laptop at 125% zoom
   is about 1090 CSS px, and stacking there was the single most reported thing
   about this page. The type and the mockup step down instead of the layout
   breaking, so text stays on the left and the phone on the right all the way
   down to a tablet. */
@media(min-width:701px) and (max-width:1100px){
  .hero>.wrap{padding-inline:28px}
  .hero h1{font-size:clamp(30px,4.4vw,52px);max-width:11ch}
  .hero .lede{font-size:15.5px;max-width:38ch}
  .hero-kicker{font-size:12px}
  .hero-grid:has(.hero-mock){gap:20px}
  .hero-mock{width:min(112%,420px)}
  .hero-actions{gap:12px 14px}
  .hero-actions .badge-store img{height:40px}
  .hero-actions .micro{font-size:11px;max-width:20ch}
}
@media(min-width:701px) and (max-width:860px){
  .hero h1{font-size:clamp(27px,4vw,38px)}
  .hero-mock{width:min(115%,330px)}
  /* the note drops under the badges here; the row simply has no width left */
  .hero-actions .micro{max-width:none}
}

/* ---------- hero mockup: sits lower, and cannot look clipped ---------------
   Two fixes for the same complaint.

   1. The render is taller than the copy block, so centring it left the phone
      starting above the kicker and finishing below the buttons. A small
      downward nudge lines its weight up with the text instead of its box.

   2. The shadow is no longer transparent. It is baked against white in the
      file, because WebP quantises very low alpha values and that put a faint
      but visible edge across the bottom of the drop shadow — read, fairly, as
      the image being cropped. With no alpha channel there is nothing to
      quantise and the shadow fades to nothing.

      THE HERO MUST STAY WHITE for this to work. If it ever gets a coloured
      background, re-export the mockup with transparency (cwebp -near_lossless
      40, not -q 88) and delete this note.
   -------------------------------------------------------------------------- */
.hero-mock{transform:translateY(3.5%)}
@media(max-width:700px){.hero-mock{transform:none}}
/* room for the nudge, so the shadow never meets the next section */
.hero{padding-bottom:clamp(64px,7vw,104px)}

/* ---------- payment marks in the footer ------------------------------------
   Every mark is exported at the same 56px source height, but equal pixel
   height is not equal optical weight: the Mastercard circles and the Apple
   Pay mark read heavier than a wordmark at the same size, so each is tuned
   down individually. Greyscale until hover would be tidier, but card brands
   forbid recolouring their marks, so they stay full colour.
   -------------------------------------------------------------------------- */
.paybar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line)}
.paybar-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t3)}
.paylogos{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  list-style:none;margin:0;padding:0;flex-wrap:wrap}
.paylogos li{display:flex;align-items:center;line-height:0}
.paylogos img{display:block;width:auto;height:22px}
/* optical sizing, brand by brand */
.paylogos li:nth-child(1) img{height:19px}   /* Visa wordmark, wide and light */
.paylogos li:nth-child(2) img{height:26px}   /* Mastercard circles, small but dense */
.paylogos li:nth-child(3) img{height:19px}   /* PayPal lockup */
.paylogos li:nth-child(4) img{height:24px}   /* Apple Pay mark */
.paylogos li.pay-g img{height:17px}          /* Google Pay is drawn at 41x17 */
@media(max-width:640px){
  .paybar{justify-content:center;text-align:center}
  .paylogos{justify-content:center}
}