/* coolhanx public-site layer (U-PW1 foundation) — loaded AFTER coolhanx.css.
   Mobile-first responsive: public pages (Registrierung, Preise, Wissen, …) must
   work on every device — only the WORK zone is PC-only. No external assets. */

/* ---------- marketing-site design refinement (eurosender.com reference,
   _workspace/PLAN_eurosender_design_reference_2026-07-14.md §4.1) ----------
   Scoped to body.sitepage only — the work-zone app keeps its own tokens
   (coolhanx.css :root) untouched. Existing teal brand accent (--accent) is
   kept; only usage restraint, letter-spacing scale, flatter shadows and
   pill-shaped nav/buttons are adopted from the reference. */
body.sitepage{
  --site-bg:var(--surface-2);
  --site-shadow-sm:0 1px 2px rgba(16,27,45,.04);
  --site-shadow-md:0 2px 10px rgba(16,27,45,.06);
  /* Single page frame — every container (header, main, sections, footer) uses
     THIS width and THIS padding. Section-specific max-widths are forbidden:
     they were what made each block a different width (640/760/940/980/1060/1120)
     while the header sat at 1280. See PLAN_i18n_layout_fix_2026-07-15.md §2.1. */
  --w-site:1280px;
  --pad-site:24px;
  --measure:72ch;   /* readable line length for prose INSIDE the frame */
  background:var(--site-bg);
}
/* ---------- per-language line breaking (PLAN §2.2) ----------
   Korean must break at word (eojeol) boundaries, never mid-word; Japanese needs
   strict kinsoku (no forbidden chars at line start). Without these the browser
   breaks CJK anywhere, which is what made the translated pages hard to read. */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang="ja"] body{line-break:strict;word-break:normal;overflow-wrap:break-word}
html[lang="de"] body{hyphens:auto}          /* long German compounds */
/* `ch` is the width of "0" — a CJK glyph is ~2ch, so 72ch would cut Korean and
   Japanese prose at ~36 characters. Japanese/Korean typographic norm is 40-45
   characters per line: 90ch ≈ 45 CJK glyphs. */
html[lang="ko"] body.sitepage,html[lang="ja"] body.sitepage{--measure:90ch}
h1,h2,h3,h4,.site-hero h1,.tile h3{text-wrap:balance}
p,.tile p,.art p,li{text-wrap:pretty}
body.sitepage .site-hero h1{letter-spacing:-.025em}
body.sitepage .art h2{letter-spacing:-.015em;font-weight:700}
body.sitepage .top-link,body.sitepage .site-nav a{border-radius:99px;padding:9px 14px}
body.sitepage .drop .menu a{border-radius:8px}
body.sitepage .tile,body.sitepage .cta-band,body.sitepage .price-card,
body.sitepage .stat,body.sitepage .form-card,body.sitepage .trust-card{
  box-shadow:var(--site-shadow-sm);
}
body.sitepage .price-card[data-hl]{box-shadow:var(--site-shadow-md)}
body.sitepage .drop .menu{box-shadow:var(--site-shadow-md)}
body.sitepage a.tile:hover{box-shadow:var(--site-shadow-md)}
body.sitepage .site-head{background:color-mix(in srgb,var(--surface) 96%,transparent)}

/* ---------- shared public header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .inner{max-width:var(--w-site,1280px);margin:0 auto;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:12px var(--pad-site,24px)}
.site-nav{display:flex;align-items:center;gap:4px;justify-content:center;flex-wrap:nowrap}
.site-nav a{padding:8px 11px;border-radius:8px;color:var(--ink-2);text-decoration:none;
  font-weight:600;font-size:.9rem;white-space:nowrap}
.site-nav a:hover{background:var(--surface-2);color:var(--ink)}
.site-cta{margin-left:auto;display:flex;align-items:center;gap:9px}
.site-cta .btn{width:auto;padding:9px 14px}
.nav-burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--surface);color:var(--ink);font-size:1.05rem}
@media(max-width:880px){
  .site-head .inner{display:flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:10px 14px;gap:2px;box-shadow:var(--sh-2)}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 10px;font-size:1rem}
  .nav-burger{display:grid;place-items:center}
  .site-cta{margin-left:0}
  .site-cta .hide-m{display:none}
}

/* ---------- page scaffold ---------- */
.site-main{max-width:var(--w-site,1280px);margin:0 auto;
  padding:34px var(--pad-site,24px) 70px}
.site-hero{max-width:min(900px,100%);margin:0 auto 26px;text-align:center}
.site-hero h1{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.15}
.site-hero p{color:var(--muted);margin:12px auto 0;font-size:clamp(.95rem,2vw,1.06rem);
  max-width:62ch;line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;color:var(--accent-strong);text-transform:uppercase}

/* ---------- signup layout: form + trust rail ---------- */
.signup-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;
  max-width:980px;margin:0 auto}
@media(max-width:960px){.signup-grid{grid-template-columns:1fr;max-width:560px}}

.form-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-2);padding:clamp(18px,4vw,32px)}
.fieldset{border:0;padding:0;margin:0 0 6px}
.fieldset legend{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-strong);padding:0;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.fieldset legend .stepno{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-strong);font-family:var(--mono);font-size:.72rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.fld2{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;min-width:0}
.fld2 label{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.fld2 label .req{color:var(--crit)}
.fld2 input,.fld2 select{background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;
  padding:11px 12px;color:var(--ink);font-size:16px;width:100%}
.fld2 input:focus,.fld2 select:focus{border-color:var(--accent);background:var(--surface)}
.fld2 input[aria-invalid="true"]{border-color:var(--crit)}
.fld2 .hint{font-size:.74rem;color:var(--faint)}
.fld2 .ferr{font-size:.76rem;color:var(--crit);min-height:0}
.fld2 select:disabled,.fld2 input[readonly].fixed{color:var(--muted);background:var(--surface-2)}
.de-only{display:flex;gap:9px;align-items:flex-start;background:var(--seal-soft);
  border:1px solid color-mix(in srgb,var(--seal) 30%,transparent);border-radius:10px;
  padding:10px 12px;font-size:.8rem;color:var(--ink-2);margin-bottom:14px}
.de-only .flag{font-size:1rem;line-height:1.3}

/* password strength */
.pw-meter{display:flex;gap:5px;margin-top:2px}
.pw-meter i{flex:1;height:5px;border-radius:99px;background:var(--line)}
.pw-meter i.on-1{background:var(--crit)} .pw-meter i.on-2{background:var(--warn)}
.pw-meter i.on-3{background:var(--good)} .pw-meter i.on-4{background:var(--good)}
.pw-note{font-size:.72rem;color:var(--faint)}

/* consents */
.consent{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:9px;background:var(--surface-2)}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex:none}
.consent label{font-size:.82rem;color:var(--ink-2);line-height:1.5}
.consent.invalid{border-color:var(--crit)}

/* trust rail */
.trust-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px;box-shadow:var(--sh-1)}
.trust-card h3{font-size:.95rem;margin-bottom:12px}
.trust-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:.83rem;color:var(--ink-2)}
.trust-item:last-child{border-bottom:none}
.trust-item .tick{color:var(--good);font-weight:800;flex:none}
.trust-foot{margin-top:12px;font-size:.72rem;color:var(--faint)}
@media(max-width:960px){.trust-card{order:2}}

/* steps / success panel */
.success-panel{max-width:560px;margin:0 auto;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-2);padding:38px 26px}
.success-panel .big{font-size:2rem}
.success-panel h2{margin:10px 0 8px}
.success-panel p{color:var(--muted);font-size:.9rem}

/* ---------- shared public footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--surface)}
.site-foot .inner{max-width:var(--w-site,1280px);margin:0 auto;padding:26px var(--pad-site,24px);display:flex;flex-wrap:wrap;
  gap:14px 22px;align-items:center;font-size:.78rem;color:var(--muted)}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--accent-strong)}
.site-foot .legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:700px){.site-foot .legal{margin-left:0}}

/* ---------- multi-page marketing site (U-PW1 full) ---------- */
.top-link{padding:9px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;
  font-weight:600;font-size:.9rem;background:none;border:0;font-family:inherit;cursor:pointer;
  white-space:nowrap}
.top-link:hover{background:var(--surface-2);color:var(--ink)}
.top-link.active,.drop.active>.top-link{color:var(--accent-strong);background:var(--accent-soft)}
.drop{position:relative}
.drop .menu{display:none;position:absolute;top:100%;left:0;min-width:max-content;max-width:340px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:8px;z-index:50}
.drop:hover .menu,.drop:focus-within .menu{display:flex;flex-direction:column}
.drop .menu a{padding:9px 11px;border-radius:8px;color:var(--ink-2);text-decoration:none;
  font-size:.86rem;white-space:nowrap}
.drop .menu a:hover{background:var(--surface-2);color:var(--ink)}
.m-only{display:none}
@media(max-width:880px){
  .m-only{display:block}
  .drop{position:static}
  .drop .menu{display:flex;position:static;border:0;box-shadow:none;padding:0 0 6px 14px}
  .drop>.top-link{width:100%;text-align:left}
  .hide-m{display:none}
}
.brand-link{text-decoration:none;color:inherit}

/* ---------- language switcher (PLAN §2.4) ----------
   Markup exists in build_site.py:_lang_switcher but had NO css at all, so the
   four links collapsed into one run-on string ("DEENKOJA"). Segmented pill. */
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--line-2);
  border-radius:99px;overflow:hidden;background:var(--surface);flex:none}
.lang-switch .lswitch{padding:6px 9px;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;white-space:nowrap;line-height:1;
  border-right:1px solid var(--line);transition:background .12s,color .12s}
.lang-switch .lswitch:last-child{border-right:0}
.lang-switch .lswitch:hover{background:var(--surface-2);color:var(--ink)}
.lang-switch .lswitch.active{background:var(--accent-soft);color:var(--accent-strong)}
@media(max-width:880px){
  .lang-switch .lswitch{padding:6px 7px;font-size:.68rem}
}

.sitepage .site-main{padding-top:26px}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0}
@media(max-width:880px){.statrow{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px}
.stat b{font-size:1.25rem;letter-spacing:-.01em}
.stat span{font-size:.76rem;color:var(--muted)}

/* Article/knowledge content is a WIDE, CENTERED column — not a narrow strip
   capped left inside the full frame (that left the whole right half empty). The
   heading, its underline, prose and checklists now share this one column, so the
   block is balanced (equal margins) instead of lopsided. Grids (stats, price,
   tiles) still span the full frame. */
.art{max-width:min(1060px,100%);margin:32px auto 0}
.art>.eyebrow{display:block;margin-bottom:8px}
.art h2{font-size:1.25rem;font-weight:750;margin-bottom:10px}
.trustrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 0}
.art p{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0 0 10px}
.art ul.checks{margin:6px 0 0;padding:0;list-style:none}
.art ul.checks li,ul.checks li{padding:7px 0 7px 22px;position:relative;color:var(--ink-2);
  font-size:.92rem;line-height:1.55;list-style:none}
ul.checks li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:800}
.disc{font-size:.76rem;color:var(--faint);max-width:var(--measure,72ch);margin:18px 0 0}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.tiles.t3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.tiles,.tiles.t3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tiles,.tiles.t3{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:18px;text-decoration:none;color:inherit;box-shadow:var(--sh-1);
  transition:border-color .15s,transform .12s}
a.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile h3{font-size:1rem}
.tile p{color:var(--muted);font-size:.84rem;line-height:1.55;margin:0}
.tile .more{margin-top:auto;color:var(--accent-strong);font-size:.82rem;font-weight:650}

.cta-band{margin:34px 0 0;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:24px;text-align:center;box-shadow:var(--sh-1)}
.cta-band p{margin:0 0 14px;font-weight:650}
.cta-band .btn{width:auto}
.hero-cta{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.hero-cta .btn{width:auto}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 0}
@media(max-width:1000px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-1)}
.price-card[data-hl]{border-color:var(--accent);box-shadow:var(--sh-2)}
.price-card .price b{font-size:1.9rem;letter-spacing:-.02em}
.price-card .price span{color:var(--muted);font-size:.82rem}
.price-card .quota{font-family:var(--mono);font-size:.82rem;color:var(--accent-strong)}
.price-card .btn{margin-top:auto}

.review-note{max-width:var(--measure,72ch);margin:0 0 18px;background:var(--warn-soft);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:10px;
  padding:10px 14px;font-size:.8rem;font-weight:650}
.fillme{background:var(--seal-soft);color:var(--seal);border-radius:5px;padding:1px 7px;
  font-family:var(--mono);font-size:.85em}

.inline-check{display:flex;gap:8px}
.inline-check input{flex:1}
.inline-check .btn{width:auto;flex:none}
.xmlbox{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;
  font-family:var(--mono);font-size:.72rem;line-height:1.5;overflow:auto;max-height:420px;
  white-space:pre-wrap;word-break:break-all}

.site-foot2{border-top:1px solid var(--line);background:var(--surface);margin-top:50px}
.site-foot2 .cols{max-width:var(--w-site,1280px);margin:0 auto;padding:34px var(--pad-site,24px) 10px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:20px}
@media(max-width:960px){.site-foot2 .cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.site-foot2 .cols{grid-template-columns:1fr}}
.site-foot2 .fcol{display:flex;flex-direction:column;gap:7px}
.site-foot2 h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
  font-weight:800;margin:0 0 4px}
.site-foot2 a{color:var(--ink-2);text-decoration:none;font-size:.82rem;
  overflow-wrap:break-word;text-wrap:pretty}
/* Footer link labels must not split a Latin regime name (Kleinbetragsrechnung)
   nor orphan a single CJK glyph. keep-all breaks only at spaces / separators. */
html[lang="ko"] .site-foot2 a,html[lang="ja"] .site-foot2 a{word-break:keep-all}
html[lang="ko"] .site-foot2 a,html[lang="ja"] .site-foot2 a{font-size:.79rem;line-height:1.5}
.site-foot2 a:hover{color:var(--accent-strong)}
.site-foot2 .legalrow{max-width:var(--w-site,1280px);margin:0 auto;padding:16px var(--pad-site,24px) 26px;display:flex;
  flex-wrap:wrap;gap:10px 18px;align-items:center;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--faint)}
.site-foot2 .legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:700px){.site-foot2 .legal{margin-left:0}}

/* ---------- v2 rich-content elements ---------- */
.twrap{overflow-x:auto}
table.ctbl{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ctbl caption{caption-side:top;text-align:left;font-weight:750;font-size:.95rem;
  padding:0 0 10px;color:var(--ink)}
.ctbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.ctbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--ink-2);line-height:1.5}
.ctbl tr:last-child td{border-bottom:none}
/* Tarifvergleich (Preise): fixed layout so each feature stays on ONE line —
   narrow first column, four equal centered tier columns, tight padding. */
.cmp .ctbl{table-layout:fixed}
.cmp .ctbl th,.cmp .ctbl td{padding:8px 6px;font-size:.82rem;white-space:normal}
.cmp .ctbl th:first-child,.cmp .ctbl td:first-child{width:40%;text-align:left;line-height:1.25}
.cmp .ctbl th:not(:first-child),.cmp .ctbl td:not(:first-child){width:15%;text-align:center}
ol.stepslist{margin:6px 0 0;padding:0;list-style:none;counter-reset:st}
ol.stepslist li{position:relative;padding:12px 0 12px 44px;border-bottom:1px solid var(--line);
  counter-increment:st}
ol.stepslist li:last-child{border-bottom:none}
ol.stepslist li::before{content:counter(st);position:absolute;left:0;top:12px;width:28px;height:28px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);display:grid;
  place-items:center;font-family:var(--mono);font-weight:700;font-size:.8rem}
ol.stepslist li b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:2px}
ol.stepslist li span{font-size:.88rem;color:var(--ink-2);line-height:1.55}
.art details{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  margin-bottom:8px;padding:0}
.art details summary{cursor:pointer;padding:12px 14px;font-weight:650;font-size:.9rem;color:var(--ink)}
.art details[open] summary{border-bottom:1px solid var(--line)}
.art details p{padding:10px 14px;margin:0;font-size:.88rem}
.art code{font-family:var(--mono);font-size:.82em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;word-break:break-all}

/* ---------- image + text split row (eurosender-style rhythm) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:center;margin:40px auto 0;max-width:var(--w-site,1280px)}
.split .split-text{max-width:none}
.split .split-text h2{margin-top:0}
.split-media{display:flex;justify-content:center}
.split-ill{width:100%;max-width:460px}
.split-ill svg{width:100%;height:auto;display:block}
.split-flip .split-text{order:2}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:22px}
  .split-flip .split-text{order:0}
  .split-media{order:-1}          /* illustration on top when stacked */
}

/* ---------- home hero visual (abstract lifecycle graphic) ---------- */
.herofig{margin:30px auto 0;max-width:var(--w-site,1280px)}
.herofig-panel{border-radius:22px;padding:clamp(14px,2vw,26px);
  border:1px solid var(--line);
  background:
    radial-gradient(680px 240px at 20% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(560px 220px at 92% 120%, color-mix(in srgb,var(--seal) 22%,transparent), transparent 60%),
    var(--surface);
  box-shadow:var(--site-shadow-md,0 2px 10px rgba(16,27,45,.06))}
.herofig-panel svg{display:block;width:100%;height:auto}
.herofig figcaption{text-align:center;font-size:.84rem;color:var(--muted);padding:14px 6px 0}

/* ---------- figures (inline SVG diagrams) ----------
   Clean, flat, softly-tinted panel — matches the hero visual. The old heavy
   blue→red gradient frame read as dated; diagrams are the content, so the frame
   stays quiet. */
.figure{margin:30px auto 0;max-width:min(1060px,100%);border-radius:20px;
  position:relative;overflow:hidden;padding:clamp(16px,2.4vw,28px);
  border:1px solid var(--line);
  background:
    radial-gradient(620px 220px at 15% -10%, var(--accent-soft), transparent 62%),
    var(--surface);
  box-shadow:var(--site-shadow-sm,0 1px 2px rgba(16,27,45,.04))}
.figure svg{max-width:100%;position:relative;display:block}
.figure figcaption{position:relative;text-align:center;font-size:.82rem;color:var(--muted);
  padding:14px 6px 0}


/* ================= design polish (U-DESIGN) ================= */
.sitepage{font-size:15px}
.site-head{box-shadow:0 1px 0 var(--line)}
.top-link{font-size:.92rem;padding:9px 13px}
.drop .menu{padding:10px;min-width:270px;border-radius:14px}
.drop .menu a{padding:10px 12px}

.site-hero{max-width:min(900px,100%);margin:14px auto 30px;position:relative}
.site-hero h1{font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.12;letter-spacing:-.025em}
.site-hero p{font-size:clamp(.95rem,2vw,1.08rem);line-height:1.65;margin-top:14px;color:var(--ink-2)}
.eyebrow{background:var(--accent-soft);color:var(--accent-strong);padding:5px 13px;
  border-radius:999px;font-size:.7rem;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.sitepage .site-main{padding-top:44px;position:relative}
.sitepage .site-main::before{content:"";position:absolute;inset:0 0 auto 0;height:420px;z-index:-1;
  background:radial-gradient(900px 340px at 50% -60px, var(--accent-soft), transparent 70%)}

/* .art fills the page frame like every other section; only its PROSE is capped
   to --measure (see the frame rules above). A max-width here would reintroduce
   the mismatched section widths this pass removed. */
.art h2{font-size:1.35rem;letter-spacing:-.015em;padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--line);position:relative}
.art h2::after{content:"";position:absolute;left:0;bottom:-1px;width:52px;height:2px;
  background:var(--accent)}
.art p{font-size:.96rem;line-height:1.75}
ul.checks li{font-size:.94rem;line-height:1.65;padding:8px 0 8px 24px}
ul.checks li::before{width:18px;height:18px;background:var(--good-soft);color:var(--good);
  border-radius:50%;display:grid;place-items:center;font-size:.72rem;top:9px;left:0;line-height:18px;text-align:center}

table.ctbl{font-size:.88rem;box-shadow:var(--sh-1)}
.ctbl caption{font-size:1.05rem;padding-bottom:12px}
.ctbl th{padding:12px 14px;font-size:.7rem}
.ctbl td{padding:12px 14px}
.ctbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.ctbl tbody tr:hover{background:var(--accent-soft)}

ol.stepslist li{padding:16px 0 16px 52px}
ol.stepslist li::before{width:34px;height:34px;top:14px;font-size:.9rem;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
ol.stepslist li b{font-size:.98rem}
ol.stepslist li span{font-size:.92rem}

.tiles{gap:16px}
.tile{padding:22px;border-radius:14px}
.tile h3{font-size:1.05rem;letter-spacing:-.01em}
.tile p{font-size:.88rem;line-height:1.6}
a.tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-2)}
.tile .more{font-size:.84rem}

.statrow{gap:14px;margin:26px auto 10px}
.stat{padding:18px 20px;border-radius:14px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.stat b{font-size:1.45rem}
.stat span{font-size:.8rem;line-height:1.45}

.figure figcaption{font-size:.84rem;padding-top:12px;margin-top:2px}

.cta-band{border-radius:18px;padding:34px 28px;position:relative;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  background:linear-gradient(135deg, var(--accent-soft), var(--surface) 55%)}
.cta-band p{font-size:1.12rem;letter-spacing:-.01em}

.art details{border-radius:12px;transition:border-color .15s}
.art details:hover{border-color:var(--accent)}
.art details summary{font-size:.94rem;padding:14px 16px}
.art details summary::marker{color:var(--accent-strong)}
.art details p{font-size:.9rem;line-height:1.65;color:var(--ink-2)}

.price-card{padding:26px;border-radius:16px}
.price-card[data-hl]{transform:scale(1.03)}
.price-card .price b{font-size:2.2rem}
.price-card h3{font-size:1.1rem}

.site-foot2 .cols{padding:40px 24px 14px}
.site-foot2 h4{color:var(--muted)}
.site-foot2 a{padding:2px 0}
.hero-cta .btn{padding:12px 22px;font-size:.95rem;border-radius:11px}

/* ---- U-EB design layer (easybill benchmark 2026-07-12): photo cards,
   centered keyword headlines, vivid product-shot frames ---- */
.sec-head{text-align:center;max-width:min(900px,100%);margin:0 auto 10px}
.sec-head h2{text-align:center;font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.25}
.sec-head h2::after{margin:14px auto 0}
.sec-head .kw-b{color:var(--brand-blue)}
.sec-head .kw-r{color:var(--brand-red)}
.sec-head p{color:var(--muted);font-size:1.02rem;margin-top:10px}
.photocards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:26px 0}
.photocards.p3{grid-template-columns:repeat(3,1fr)}
.photocard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);
  transition:transform .18s ease,box-shadow .18s ease}
.photocard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.photocard .ph{position:relative;aspect-ratio:16/9.6;overflow:hidden;display:grid}
.photocard .ph img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.photocard .ph.grad-a{background:linear-gradient(135deg,#1E4FA3 0%,#3E63C0 42%,#D0202C 130%)}
.photocard .ph.grad-b{background:linear-gradient(135deg,#D0202C -30%,#7A3E9C 45%,#1E4FA3 100%)}
.photocard .ph .shotwrap{padding:13% 0 0 30%;display:grid;align-items:end}
.photocard .ph .shotwrap.svgwrap{padding:16% 12px 0 20%}
.photocard .ph .shotwrap.svgwrap svg{width:100%;height:auto;display:block;
  background:var(--surface);border-radius:10px 0 0 0;padding:10px 10px 4px;
  box-shadow:0 8px 28px rgba(4,16,38,.45)}
.photocard .ph .shotwrap img{border-radius:10px 0 0 0;box-shadow:0 8px 28px rgba(4,16,38,.45);
  border:1px solid rgba(255,255,255,.22);border-right:0;border-bottom:0}
.photocard .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to top,rgba(7,16,38,.45),transparent);pointer-events:none}
.photocard .ph .ttl{position:absolute;left:22px;bottom:14px;color:#fff;font-weight:800;z-index:2;
  font-size:1.35rem;text-shadow:0 2px 14px rgba(0,0,0,.65);letter-spacing:-.01em}
.photocard .bd{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.photocard .bd p{color:var(--muted);font-size:.93rem;line-height:1.6;margin:0;flex:1}
.photocard .bd .more{color:var(--accent-strong);font-weight:650;font-size:.9rem}
.shotframe{position:relative;border-radius:18px;padding:clamp(18px,3.4vw,42px);
  margin:26px 0;overflow:hidden;
  background:linear-gradient(120deg,#123B7E 0%,#1E4FA3 38%,#7A3E9C 72%,#D0202C 115%)}
.shotframe .mockbody{background:var(--surface);padding:14px 14px 6px}
.shotframe .mockbody svg{width:100%;height:auto;display:block}
.shotframe::before{content:"";position:absolute;inset:0;
  background:radial-gradient(720px 300px at 85% -10%,rgba(255,255,255,.28),transparent 60%)}
.shotframe .chrome{position:relative;border-radius:12px;overflow:hidden;
  box-shadow:0 18px 60px rgba(3,12,32,.5);border:1px solid rgba(255,255,255,.25)}
.shotframe .bar{display:flex;align-items:center;gap:6px;background:#0F2C5C;padding:9px 14px}
.shotframe .bar i{width:10px;height:10px;border-radius:50%;display:block}
.shotframe .bar i:nth-child(1){background:#ff5f57}.shotframe .bar i:nth-child(2){background:#febc2e}
.shotframe .bar i:nth-child(3){background:#28c840}
.shotframe .bar span{margin-left:10px;color:#B9CCF2;font-size:.72rem;font-family:var(--mono)}
.shotframe img{width:100%;display:block}
.shotframe figcaption{position:relative;color:#E6EDFB;text-align:center;font-size:.86rem;
  margin-top:14px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.compare-band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.compare-band .cb{border-radius:16px;padding:22px 20px;color:#fff;position:relative;overflow:hidden}
.compare-band .cb:nth-child(1){background:linear-gradient(135deg,#1E4FA3,#2E6AD4)}
.compare-band .cb:nth-child(2){background:linear-gradient(135deg,#7A3E9C,#A84A8F)}
.compare-band .cb:nth-child(3){background:linear-gradient(135deg,#C22A35,#D0202C)}
.compare-band .cb b{display:block;font-size:1.25rem;margin-bottom:6px;letter-spacing:-.01em}
.compare-band .cb span{font-size:.88rem;opacity:.92;line-height:1.55;display:block}
@media (max-width:860px){
  .photocards,.photocards.p3,.compare-band{grid-template-columns:1fr}
  .photocard .ph{aspect-ratio:16/8.6}
}
@media (prefers-color-scheme: dark){
  .shotframe{background:linear-gradient(120deg,#0E2A5C 0%,#173E86 38%,#5E2F7A 72%,#A21822 115%)}
}

/* Signup form, 2026-08-06: the page ran past two screens on a laptop — a form you have to
   scroll to finish is a form people abandon. Tighter hero, tighter fieldsets, and the
   trust card is a short list rather than a paragraph. */
.site-hero-tight { padding-block: 18px 10px; }
.site-hero-tight h1 { margin-bottom: 6px; }
.site-hero-tight p { margin: 0; }
.signup-grid .fieldset + .fieldset { margin-top: 12px; }
.form-alt { font-size: .74rem; color: var(--faint); text-align: center; margin: 12px 0 0; }