/* Kvitlo marketing site — the pages beyond the homepage (docs/web/marketing-site.md).
   Loaded after homepage.css by the `site` layout and reuses its base (nav, buttons,
   hero, sections, cards); everything here is built from tokens.css. */

/* --- top bar --------------------------------------------------------------- */
nav.topnav a.nl.on{color:var(--ink)}
.lswl{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink-2);font-size:var(--fs-12);font-weight:650;text-decoration:none;letter-spacing:var(--ls-label)}
.lswl:hover{color:var(--accent);border-color:var(--accent)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.mnav summary::-webkit-details-marker{display:none}
.mnav-panel{position:absolute;right:0;top:calc(100% + var(--s-2));min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--e-2);padding:var(--s-2);display:grid;z-index:60}
.mnav-panel a{padding:var(--s-3) var(--s-4);border-radius:var(--r-m);color:var(--ink);text-decoration:none;font-weight:550;font-size:var(--fs-15)}
.mnav-panel a:hover{background:var(--tint)}
@media(max-width:980px){nav.topnav a.nl{display:none}.mnav{display:block}}
@media(max-width:420px){.navcta{display:none}}

/* --- breadcrumbs ------------------------------------------------------------ */
nav.crumbs{position:static;background:none;backdrop-filter:none;border:0;z-index:auto}
nav.crumbs .wrap{height:auto;display:block;padding-top:var(--s-4)}
nav.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:var(--fs-13);color:var(--ink-3)}
nav.crumbs li+li::before{content:"›";margin-right:var(--s-2);color:var(--ink-3)}
nav.crumbs a{color:var(--ink-2);text-decoration:none}
nav.crumbs a:hover{color:var(--accent)}

/* --- page heads (landing, tools, comparisons) ------------------------------ */
.phead{padding:var(--s-12) 0 var(--s-10)}
.phead h1{font-size:var(--fs-d38);max-width:22ch}
.phead .lede{max-width:62ch;margin-bottom:var(--s-5)}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-12);align-items:center}
section.tight{padding:var(--s-14) 0}
section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center{text-align:center}
.center .sec-sub{margin-left:auto;margin-right:auto}

/* --- card grids ------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-6);box-shadow:var(--e-1);display:flex;flex-direction:column;gap:var(--s-2)}
.card h3{font-size:var(--fs-17);font-weight:650;letter-spacing:var(--ls-tight);margin:0}
.card p{margin:0;font-size:var(--fs-15);color:var(--ink-2)}
.card .kick{margin:0}
a.card{text-decoration:none;color:inherit;transition:border-color .15s}
a.card:hover{border-color:var(--accent)}
a.card .more{margin-top:auto;padding-top:var(--s-2);color:var(--accent);font-weight:600;font-size:var(--fs-13)}
.icon{width:40px;height:40px;border-radius:var(--r-m);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* --- the "both halves" band on the homepage -------------------------------- */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.half{border-radius:var(--r-xl);padding:var(--s-8);border:1px solid var(--line);background:var(--surface);box-shadow:var(--e-1)}
.half h3{font-size:var(--fs-24);letter-spacing:var(--ls-tighter);margin:var(--s-2) 0 var(--s-3)}
.half ul{margin:var(--s-4) 0 var(--s-5);padding:0;list-style:none;display:grid;gap:var(--s-2)}
.half li{display:flex;gap:var(--s-3);color:var(--ink-2)}
.half li::before{content:"✓";color:var(--ok);font-weight:700}
.half.out{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.half.out .kick,.half.out li,.half.out p{color:color-mix(in srgb,var(--accent-ink) 82%,transparent)}
.half.out li::before{color:var(--accent-ink)}
.half.out .btn-g{background:var(--accent-ink);color:var(--accent);border-color:var(--accent-ink)}

/* --- phone band ------------------------------------------------------------- */
.phoneband{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:var(--s-8)}
.pb{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5)}
.pb b{display:block;font-size:var(--fs-15);margin:var(--s-3) 0 var(--s-1)}
.pb span{font-size:var(--fs-13);color:var(--ink-2)}

/* --- prose (guides, comparisons, tool explainers) -------------------------- */
.prose{max-width:var(--w-prose)}
.prose h2{font-size:var(--fs-24);margin:var(--s-10) 0 var(--s-3)}
.prose h3{font-size:var(--fs-17);margin:var(--s-6) 0 var(--s-2)}
.prose p,.prose li{color:var(--ink-2);line-height:1.7}
.prose ul,.prose ol{padding-left:var(--s-6)}
.prose code{font-family:var(--font-mono);font-size:.92em;background:var(--tint);border-radius:var(--r-xs);padding:0 var(--s-1)}
.prose a{color:var(--accent)}
.note-src{font-size:var(--fs-12);color:var(--ink-3);margin-top:var(--s-6)}

/* --- FAQ -------------------------------------------------------------------- */
.faq{max-width:var(--w-prose);display:grid;gap:var(--s-3)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4) var(--s-5)}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--fs-15);list-style:none;display:flex;justify-content:space-between;gap:var(--s-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--ink-2);margin:var(--s-3) 0 0;line-height:1.65}

/* --- tools -------------------------------------------------------------------- */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
.tool.single{grid-template-columns:1fr}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--e-1)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.fgrid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:var(--s-1)}
.fld label{font-size:var(--fs-13);font-weight:600;color:var(--ink)}
.fld .hint{font-size:var(--fs-12);color:var(--ink-3)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:var(--fs-15);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-m);padding:var(--s-2) var(--s-3);min-height:42px;width:100%}
.fld textarea{font-family:var(--font-mono);font-size:var(--fs-13);min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.fld.bad input,.fld.bad textarea{border-color:var(--danger)}
.fld .err{font-size:var(--fs-12);color:var(--danger)}
.chk{display:flex;gap:var(--s-2);align-items:center;font-size:var(--fs-13);color:var(--ink-2)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden}
.seg label{padding:var(--s-2) var(--s-4);font-size:var(--fs-13);font-weight:600;cursor:pointer;color:var(--ink-2);background:var(--bg)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{color:var(--accent)}
.seg label:has(input:checked){background:var(--accent-soft);color:var(--accent)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5);align-items:center}
.result[aria-busy="true"]{opacity:.6}
.result .empty{color:var(--ink-3);font-size:var(--fs-15);text-align:center;padding:var(--s-10) var(--s-4)}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}
.qrbox svg{width:100%;max-width:280px;height:auto;border-radius:var(--r-m);border:1px solid var(--line)}
.qrlabel{font-size:var(--fs-12);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
.kv{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.kv th,.kv td{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);vertical-align:top}
.kv th{color:var(--ink-2);font-weight:550;width:42%}
.kv td{color:var(--ink);font-weight:550;word-break:break-word}
.kv code,.mono{font-family:var(--font-mono);font-size:var(--fs-12)}
.spayd{font-family:var(--font-mono);font-size:var(--fs-12);background:var(--tint);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-3);word-break:break-all;width:100%}
.verdict{display:flex;gap:var(--s-3);align-items:flex-start;border-radius:var(--r-l);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);font-weight:600}
.verdict small{display:block;font-weight:450;color:var(--ink-2);margin-top:var(--s-1)}
.verdict.ok{background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok)}
.verdict.bad{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger)}
.verdict.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn)}
.issues{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;gap:var(--s-2)}
.issues li{font-size:var(--fs-13);border-radius:var(--r-m);padding:var(--s-2) var(--s-3);border:1px solid var(--line);background:var(--bg);color:var(--ink-2)}
.issues li b{font-family:var(--font-mono);font-size:var(--fs-12);margin-right:var(--s-2)}
.issues li.error{border-color:var(--danger-line);background:var(--danger-soft);color:var(--ink)}
.issues li.warning{border-color:var(--warn-line);background:var(--warn-soft);color:var(--ink)}
.big{font-size:var(--fs-28);font-weight:700;letter-spacing:var(--ls-tighter)}
.vatout{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.vatout div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4)}
.vatout span{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-bottom:var(--s-1)}
.vatout .hl{background:var(--accent-soft);border-color:var(--accent-soft)}
.promo{display:flex;gap:var(--s-4);align-items:center;background:var(--accent-soft);border-radius:var(--r-l);padding:var(--s-4) var(--s-5);margin-top:var(--s-6);font-size:var(--fs-13);color:var(--ink)}
.promo .btn{margin-left:auto;flex-shrink:0}
.promo-mark{width:28px;height:28px;font-size:var(--fs-15);flex-shrink:0}
.kv-narrow{max-width:640px}
.pill-ok,.pill-bad,.pill-warn{display:inline-block;border-radius:var(--r-pill);padding:0 var(--s-2);font-size:var(--fs-12);font-weight:650}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-bad{background:var(--danger-soft);color:var(--danger)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}

/* --- comparison tables ------------------------------------------------------ */
.ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.ctable{width:100%;border-collapse:collapse;font-size:var(--fs-13);min-width:560px}
.ctable th,.ctable td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ctable thead th{background:var(--tint);font-size:var(--fs-12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
.ctable tbody th{font-weight:550;color:var(--ink);width:34%}
.ctable td.us{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.ctable .y{color:var(--ok);font-weight:700}
.ctable .n{color:var(--ink-3)}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:0}
.verdicts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}

/* --- footer ------------------------------------------------------------------ */
footer.sitefoot{padding:var(--s-14) 0 var(--s-8)}
footer.sitefoot .wrap{display:block}
.fcols{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr));gap:var(--s-8)}
.fcols>div{display:flex;flex-direction:column;gap:var(--s-2)}
.fcols b{color:var(--ink);font-size:var(--fs-13);margin-bottom:var(--s-1)}
.fcols a{color:var(--ink-2);text-decoration:none;font-size:var(--fs-13)}
.fcols a:hover{color:var(--accent)}
.fbrand p{margin:var(--s-2) 0;max-width:30ch;color:var(--ink-2)}
.fstores{display:flex;gap:var(--s-3)}
.fcopy{margin:var(--s-10) 0 0;color:var(--ink-3);font-size:var(--fs-12)}

@media(max-width:860px){
  .hero-split,.tool,.halves,.verdicts{grid-template-columns:1fr}
  .cards,.cards.four{grid-template-columns:1fr 1fr}
  .phoneband{grid-template-columns:1fr 1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media(max-width:640px){
  .cards,.cards.two,.cards.four,.phoneband,.fgrid,.vatout{grid-template-columns:1fr}
  .phead{padding:var(--s-8) 0 var(--s-6)}
  .phead h1{font-size:var(--fs-28)}
  .half{padding:var(--s-6)}
  .promo{flex-direction:column;align-items:flex-start}
  .promo .btn{margin-left:0}
}