:root{
  --bone:#EDECE2;
  --bone-deep:#E2E0D2;
  --ink:#241019;
  --wine:#5E1235;
  --wine-deep:#2E0A1B;
  --flare:#EE6D4D;
  --flare-deep:#D9522F;
  --flare-text:#B33D18;
  --indigo:#4B5BA6;
  --citron:#F2E84B;
  --live:#6FD08C;
  --wa:#0B7A43;
  --wa-deep:#095F35;
  --wa-dot:#5CFF9D;
  --white:#FFFFFF;

  --display:'Outfit',system-ui,sans-serif;
  --text:'Hanken Grotesk',system-ui,sans-serif;

  --desk:1344px;
  --gutter:48px;
  --rhythm:78px;

  --r-blob:80px;
  --r-nub:12px;
  --r-mid:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.125rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;margin:0}
h1{font-size:clamp(2.75rem,5.2vw,4.75rem);line-height:1.05}
h2{font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.12}
h3{font-size:clamp(1.35rem,1.8vw,1.75rem);line-height:1.2;letter-spacing:-0.02em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}

.desk{width:100%;max-width:var(--desk);margin:0 auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--ink);color:#fff;font-family:var(--display);font-weight:600;
  padding:14px 22px;border-radius:0 0 14px 14px;transition:top .16s ease;
}
.skip:focus{top:0}

/* ── eyebrow: sentence case, indigo, no tracking ─────────────── */
.brow{
  font-family:var(--display);
  font-size:1.0625rem;
  font-weight:500;
  color:var(--indigo);
  margin:0 0 14px;
  letter-spacing:0;
}
.on-dark .brow{color:#A8B2E0}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--display);font-size:1.0625rem;font-weight:600;
  padding:15px 30px;border-radius:999px;
  background:var(--flare);color:var(--ink);
  transition:background .18s ease,transform .18s ease;
  white-space:nowrap;
}
.btn:hover{background:#E25B38;transform:translateY(-1px)}
.btn svg{flex:none}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#3d1d29;color:#fff}
.btn--line{background:transparent;border:1.5px solid var(--ink);color:var(--ink);padding:13.5px 28px}
.btn--line:hover{background:var(--ink);color:#fff}
.on-dark .btn--line{border-color:rgba(255,255,255,.55);color:#fff}
.on-dark .btn--line:hover{background:#fff;color:var(--ink)}

/* ── header ──────────────────────────────────────────────────── */
.head{
  position:sticky;top:0;z-index:60;
  background:var(--white);
  height:96px;display:flex;align-items:center;
}
.head .desk{display:flex;align-items:center;gap:40px}
.mark{display:flex;align-items:center;flex:none}
.mark img{height:30px;width:auto}
.mark .mk-icon{display:none}
.cta-short{display:none}
.nav{display:flex;gap:30px;font-family:var(--display);font-weight:500;font-size:1.0625rem}
.nav a{white-space:nowrap}
.nav a{padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--flare)}
.head .util{margin-left:auto;display:flex;align-items:center;gap:26px}
.util .quiet{font-family:var(--display);font-size:.9375rem;font-weight:500;color:#6b5560}
.util .quiet:hover{color:var(--ink)}
.burger{display:none}

/* ── hero ────────────────────────────────────────────────────── */
.hero{
  background:var(--wine);color:#fff;
  border-bottom-right-radius:140px;
  padding:104px 0 112px;
  position:relative;overflow:hidden;
}
.hero .desk{display:grid;grid-template-columns:1fr 520px;gap:72px;align-items:center}
.hero h1{max-width:13ch}
.slots{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:.9375rem;font-weight:500;
  background:rgba(255,255,255,.12);
  padding:8px 18px 8px 14px;border-radius:999px;margin-bottom:30px;
}
.slots i{width:9px;height:9px;border-radius:50%;background:var(--live);display:block;
  box-shadow:0 0 0 0 rgba(111,208,140,.75);animation:livePulse 2.4s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(111,208,140,.75)}70%{box-shadow:0 0 0 8px rgba(111,208,140,0)}100%{box-shadow:0 0 0 0 rgba(111,208,140,0)}}
@media (prefers-reduced-motion:reduce){.slots i{animation:none}}
.hero-lede{max-width:44ch;color:rgba(255,255,255,.82);margin:30px 0 36px;font-size:1.1875rem}
.hero-acts{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:.9375rem;color:rgba(255,255,255,.6)}

/* funnel panel — the hero's one bold element */
.funnel{position:relative}
.funnel-card{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:40px 40px 34px;
}
.funnel-card h2{font-size:1.0625rem;font-family:var(--display);font-weight:600;letter-spacing:0;margin-bottom:4px}
.funnel-card .sub{font-size:.875rem;color:#6b5560;margin-bottom:26px}
.rung{margin-bottom:14px}
.rung:last-of-type{margin-bottom:0}
.rung-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.rung-lab{font-size:.875rem;color:#6b5560}
.rung-num{font-family:var(--display);font-weight:600;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.rung-bar{height:14px;border-radius:999px;background:var(--bone-deep);overflow:hidden}
.rung-fill{height:100%;border-radius:999px;background:var(--wine);width:var(--w);min-width:14px}
.rung--win .rung-fill{background:var(--flare)}
.rung--win .rung-num{color:var(--flare-text)}
.funnel-foot{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(36,16,25,.14);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.funnel-foot b{font-family:var(--display);font-size:1.75rem;font-weight:600;letter-spacing:-0.02em}
.funnel-foot span{font-size:.875rem;color:#6b5560;max-width:24ch;text-align:right}

/* collage stickers */
.sticker{position:absolute;display:grid;place-items:center;z-index:2}
.sticker--a{top:-34px;right:-30px;width:104px;height:104px;background:var(--flare);border-radius:var(--r-mid) var(--r-mid) 0 var(--r-mid)}
.sticker--b{bottom:-30px;left:-32px;width:92px;height:92px;background:var(--indigo);border-radius:var(--r-mid) 0 var(--r-mid) var(--r-mid)}
.sticker--c{bottom:-32px;right:-30px;width:76px;height:76px;background:var(--citron);border-radius:50%}

@media (prefers-reduced-motion:no-preference){
  .js-anim .rung-fill{width:0;transition:width .9s cubic-bezier(.22,.8,.3,1)}
  .js-anim.is-lit .rung-fill{width:var(--w)}
}

/* ── channel strip ───────────────────────────────────────────── */
.strip{padding:44px 0 0}
.strip .desk{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.strip p{font-size:.9375rem;color:#6b5560;margin:0;max-width:16ch;flex:none}
.strip ul{display:flex;gap:14px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.strip li{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:.9375rem;
  border:1.5px solid rgba(36,16,25,.2);border-radius:999px;padding:8px 18px 8px 14px;
}
.strip li img{width:17px;height:17px;flex:none;display:block}
.strip li.no-logo{padding-left:18px}

/* ── generic section ─────────────────────────────────────────── */
.sec{padding:var(--rhythm) 0}
.sec[id],.close[id]{scroll-margin-top:118px}
.sec--tight{padding:60px 0}
.lede{max-width:52ch;color:#5d4751;margin-top:22px;font-size:1.1875rem}
.head-row{max-width:26ch}

/* ── bento: the problem ──────────────────────────────────────── */
.bento{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:48px;align-items:start}
.slab{
  background:var(--white);
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:56px;
}
.slab--dark{background:var(--wine-deep);color:#fff;border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob)}
.huge{
  font-family:var(--display);font-weight:600;
  font-size:clamp(4rem,8.5vw,7rem);line-height:.92;letter-spacing:-0.04em;
  display:block;margin-bottom:18px;
}
.slab--dark .huge{color:var(--flare)}
.leaks{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.leaks li{
  display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start;
  padding:18px 0;border-top:1px solid rgba(36,16,25,.12);
}
.leaks li:last-child{border-bottom:1px solid rgba(36,16,25,.12)}
.leaks .x{
  width:26px;height:26px;border-radius:50%;background:rgba(238,109,77,.16);
  color:var(--flare-text);display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-top:1px;
}
.stack{display:grid;gap:24px}

/* ── service cards ───────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.card{
  position:relative;background:var(--white);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:40px 36px 84px;overflow:hidden;
  transition:transform .2s ease;
}
.card:nth-child(even){border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.card h3{margin-bottom:14px}
.card p{color:#5d4751;font-size:1.0625rem;margin:0}
.tile{
  position:absolute;right:0;bottom:0;width:88px;height:88px;
  display:grid;place-items:center;
  border-radius:var(--r-mid) 0 var(--r-nub) 0;
}
.card:nth-child(even) .tile{border-radius:var(--r-mid) 0 var(--r-mid) 0}
.tile svg{width:34px;height:34px}
.t-flare{background:var(--flare);color:var(--ink)}
.t-wine{background:var(--wine);color:var(--citron)}
.t-indigo{background:var(--indigo);color:var(--citron)}
.t-citron{background:var(--citron);color:var(--ink)}
.t-ink{background:var(--wine-deep);color:var(--flare)}
.t-bone{background:var(--bone-deep);color:var(--wine)}

/* ── steps ───────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.step{
  background:var(--wine-deep);color:#fff;
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:52px 48px;position:relative;overflow:hidden;
}
.step:nth-child(even){background:var(--wine);border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob)}
.step h3{margin-bottom:22px;max-width:19ch}
.step ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step li{display:grid;grid-template-columns:22px 1fr;gap:14px;color:rgba(255,255,255,.82);font-size:1.0625rem;line-height:1.5}
.step li svg{margin-top:5px;color:var(--citron)}
.step .when{
  margin-top:30px;font-family:var(--display);font-size:.9375rem;font-weight:500;
  color:rgba(255,255,255,.62);
}

/* ── calculator ──────────────────────────────────────────────── */
.calc{background:var(--wine);color:#fff;border-radius:var(--r-blob);padding:68px 64px;margin-top:48px}
.calc-grid{display:grid;grid-template-columns:1fr 440px;gap:72px;align-items:center}
.field{margin-bottom:32px}
.field:last-of-type{margin-bottom:0}
.field-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.field label{font-size:1.0625rem;color:rgba(255,255,255,.82)}
.field output{font-family:var(--display);font-weight:600;font-size:1.375rem;font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;
  height:28px;background:transparent;outline:none;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;background:rgba(255,255,255,.22);
}
input[type=range]::-moz-range-track{
  height:6px;border-radius:999px;background:rgba(255,255,255,.22);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--flare);cursor:pointer;border:4px solid var(--wine);margin-top:-10px;
}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--flare);
  cursor:pointer;border:4px solid var(--wine);
}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--citron)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--citron)}
.payoff{background:var(--bone);color:var(--ink);border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);padding:44px 40px}
.payoff .brow{margin-bottom:6px;color:var(--indigo)}
.payoff .big{
  font-family:var(--display);font-weight:600;font-size:clamp(2.75rem,4.4vw,3.75rem);
  line-height:1;letter-spacing:-0.035em;color:var(--flare-text);font-variant-numeric:tabular-nums;
}
.payoff .cap{font-size:.9375rem;color:#6b5560;margin-top:10px}
.payoff dl{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:30px 0 0;padding-top:26px;border-top:1px solid rgba(36,16,25,.14)}
.payoff dt{font-size:.875rem;color:#6b5560}
.payoff dd{margin:4px 0 0;font-family:var(--display);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums}

/* ── pricing ─────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch}
.plan{
  background:var(--white);border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:48px 40px;display:flex;flex-direction:column;
}
.plan--hero{background:var(--wine-deep);color:#fff;border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);padding-top:40px}
.pill{
  display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:600;
  background:var(--citron);color:var(--ink);border-radius:999px;padding:5px 14px;margin-bottom:18px;
}
.plan h3{margin-bottom:6px}
.plan .kind{font-size:.9375rem;color:#6b5560;margin-bottom:22px}
.plan--hero .kind{color:rgba(255,255,255,.6)}
.price{font-family:var(--display);font-weight:600;font-size:2.5rem;letter-spacing:-0.035em;line-height:1;margin-bottom:6px}
.plan--hero .price{color:var(--citron)}
.price small{font-family:var(--text);font-size:.9375rem;font-weight:400;color:#6b5560;letter-spacing:0;display:block;margin-top:8px}
.plan--hero .price small{color:rgba(255,255,255,.6)}
.plan p.what{color:#5d4751;font-size:1.0625rem;margin:22px 0 26px}
.plan--hero p.what{color:rgba(255,255,255,.78)}
.plan ul{list-style:none;margin:0 0 30px;padding:26px 0 0;border-top:1px solid rgba(36,16,25,.12);display:grid;gap:12px}
.plan--hero ul{border-top-color:rgba(255,255,255,.18)}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:1rem;line-height:1.5}
.plan li svg{margin-top:4px;color:var(--flare)}
.plan--hero li svg{color:var(--citron)}
.plan .btn{margin-top:auto;justify-content:center}
.fineprint{margin-top:28px;font-size:.9375rem;color:#6b5560;max-width:68ch}

/* ── industries ──────────────────────────────────────────────── */
.who{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.who a{
  font-family:var(--display);font-weight:500;font-size:1.0625rem;
  border:1.5px solid rgba(36,16,25,.22);border-radius:999px;padding:12px 26px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.who a:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── founder ─────────────────────────────────────────────────── */
.founder{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.founder-note{
  background:var(--white);border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:44px 48px 48px;display:flex;flex-direction:column;justify-content:center;
}
.founder-photo{
  width:100%;height:250px;object-fit:cover;object-position:28% 34%;
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  margin-bottom:32px;
}
@media (max-width:960px){.founder-photo{height:200px}}
.quote{
  font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1.28;letter-spacing:-0.02em;margin:0 0 26px;
}
.byline{font-size:1rem;color:#6b5560}
.facts{background:var(--wine);color:#fff;border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob);padding:60px 56px;display:flex;flex-direction:column;justify-content:center}
.facts dl{margin:0;display:grid;gap:0}
.facts div{padding:22px 0;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.facts div:first-child{border-top:0;padding-top:0}
.facts dt{color:rgba(255,255,255,.72);font-size:1.0625rem}
.facts dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.375rem;text-align:right;letter-spacing:-0.02em}

/* ── faq ─────────────────────────────────────────────────────── */
.faq{margin-top:44px;border-bottom:1px solid rgba(36,16,25,.16)}
.faq details{border-top:1px solid rgba(36,16,25,.16)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr 44px;gap:32px;align-items:center;
  padding:30px 0;
  font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.55vw,1.4rem);
  line-height:1.3;letter-spacing:-0.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--indigo);outline-offset:4px;border-radius:6px}
.faq .plus{
  width:44px;height:44px;border-radius:50%;background:var(--flare);color:var(--ink);
  display:grid;place-items:center;transition:transform .22s ease;
}
.faq details[open] .plus{transform:rotate(45deg)}
.faq .answer{padding:0 96px 32px 0;max-width:72ch;color:#5d4751}

/* ── final cta ───────────────────────────────────────────────── */
.close{
  background:var(--flare);color:var(--ink);
  border-top-left-radius:140px;
  padding:130px 0 140px;position:relative;overflow:hidden;
}
.close .desk{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:center}
.close h2{max-width:16ch}
.close p{max-width:44ch;margin:26px 0 36px;font-size:1.1875rem;color:rgba(36,16,25,.92)}
.close-acts{display:flex;gap:14px;flex-wrap:wrap}
.close-note{margin-top:28px;font-size:.9375rem;color:rgba(36,16,25,.9)}
.badge{
  background:var(--bone);border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:38px 36px;position:relative;
}
.badge .big{font-family:var(--display);font-weight:600;font-size:3.25rem;line-height:1;letter-spacing:-0.035em;color:var(--wine)}
.badge .cap{font-size:.9375rem;color:#6b5560;margin-top:12px}
.badge .sticker--c{bottom:auto;top:-30px;right:-26px;width:72px;height:72px;background:var(--indigo)}

/* ── footer ──────────────────────────────────────────────────── */
.foot{background:var(--wine);color:#fff;padding:100px 0 48px;overflow:hidden}
.foot-base{padding-bottom:78px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:64px}
.foot h2{font-family:var(--display);font-size:1.0625rem;font-weight:600;margin:0 0 18px;color:rgba(255,255,255,.62)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a:hover{color:var(--citron)}
.foot .addr{color:rgba(255,255,255,.72);font-size:1rem}
.foot .addr a{text-decoration:underline;text-underline-offset:3px}
.wordmark{display:block;margin:0 0 32px}
.wordmark img{width:100%;max-width:280px;height:auto}
.foot-base{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.2);
  font-size:.9375rem;color:rgba(255,255,255,.6);
}
.foot-base a{text-decoration:underline;text-underline-offset:3px}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:1240px){
  .nav{gap:22px;font-size:1rem}
  .head .desk{gap:28px}
}
@media (max-width:1180px){
  .hero .desk{grid-template-columns:1fr 420px;gap:48px}
  .calc-grid{grid-template-columns:1fr 380px;gap:48px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  :root{--gutter:28px;--rhythm:60px;--r-blob:52px;--r-mid:32px}
  .nav,.util .quiet{display:none}
  .head{height:76px}
  .hero{border-bottom-right-radius:72px;padding:64px 0 76px}
  .hero .desk{grid-template-columns:1fr;gap:64px}
  .funnel{max-width:520px}
  .head .desk{gap:12px}
  /* the CTA was stretching to the full 76px header height and breaking
     "Termin buchen" over two lines — a flex item with align-items:center
     missing on the row it sits in. */
  .head .btn{padding:12px 16px;font-size:.9rem;gap:7px;white-space:nowrap;align-self:center}
  .mark img{height:26px}
  .mark .mk-full{display:none}
  .mark .mk-icon{display:block;height:30px}
  .cta-long{display:none}
  .cta-short{display:inline}
  .sticker--a{right:-4px;top:-24px;width:78px;height:78px}
  .sticker--b{left:-6px;bottom:-22px;width:68px;height:68px}
  .sticker--c{right:-6px;bottom:-22px;width:56px;height:56px}
  .bento,.steps,.plans,.founder,.calc-grid,.close .desk{grid-template-columns:1fr}
  .slab,.step,.founder-note,.facts{padding:40px 32px}
  .calc{padding:48px 32px;border-radius:var(--r-mid)}
  .close{border-top-left-radius:72px;padding:88px 0 96px}
  .faq .answer{padding-right:0}
  .foot{padding-top:72px}
  .foot-base{padding-bottom:64px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;padding-bottom:44px}
  .wordmark img{max-width:210px}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .grid3{grid-template-columns:1fr}
  .payoff dl{grid-template-columns:1fr}
  .strip .desk{gap:20px}
  .strip p{max-width:none}
  .foot-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   Lead funnel modal — v2 skin over the markup funnel.js injects.
   funnel.js itself is shared with v1 and stays untouched.
   ═══════════════════════════════════════════════════════════════ */
.funnel-overlay{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(36,16,25,.62);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  align-items:center;justify-content:center;padding:24px;
}
.funnel-overlay.open{display:flex}
.funnel-modal{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  width:100%;max-width:620px;max-height:90vh;overflow-y:auto;
  padding:44px 44px 36px;position:relative;
  animation:funnelIn .28s cubic-bezier(.22,.8,.3,1);
}
@keyframes funnelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.funnel-modal{animation:none}}

.funnel-close{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  background:var(--bone-deep);color:var(--ink);
  font-size:1.1rem;line-height:1;display:grid;place-items:center;
  transition:background .18s ease;
}
.funnel-close:hover{background:var(--flare);color:var(--ink)}

.funnel-progress{height:4px;background:var(--bone-deep);border-radius:999px;margin-bottom:30px;overflow:hidden}
.funnel-progress-bar{height:100%;background:var(--flare);border-radius:999px;transition:width .4s cubic-bezier(.22,.8,.3,1)}

.funnel-overlay .funnel-step{display:none}
.funnel-overlay .funnel-step.active{display:block}
.funnel-step-label{
  font-family:var(--display);font-size:1rem;font-weight:500;
  color:var(--indigo);margin-bottom:8px;letter-spacing:0;text-transform:none;
}
.funnel-overlay .funnel-step h2{
  font-family:var(--display);font-size:1.6rem;font-weight:600;
  letter-spacing:-0.025em;line-height:1.18;margin-bottom:8px;
}
.funnel-overlay .funnel-step > p{font-size:1rem;color:#5d4751;margin-bottom:24px}

.funnel-options{display:flex;flex-direction:column;gap:9px}
.funnel-option input{position:absolute;opacity:0;width:0;height:0}
.funnel-option-card{
  display:flex;align-items:center;gap:14px;
  padding:15px 20px;background:var(--white);
  border:1.5px solid rgba(36,16,25,.14);border-radius:16px;
  cursor:pointer;transition:border-color .18s ease,background .18s ease;text-align:left;
}
.funnel-option-card:hover{border-color:rgba(36,16,25,.34)}
.funnel-option input:checked + .funnel-option-card{
  border-color:var(--flare);background:rgba(238,109,77,.1);
}
.funnel-option input:focus-visible + .funnel-option-card{outline:3px solid var(--indigo);outline-offset:2px}
.funnel-option-icon{font-size:1.2rem;flex:none;width:22px;text-align:center}
.funnel-option-text{display:flex;flex-direction:column;gap:2px}
.funnel-option-text strong{font-family:var(--display);font-size:1rem;font-weight:600}
.funnel-option-text span{font-size:.85rem;color:#6b5560}

.funnel-form{display:flex;flex-direction:column;gap:16px}
.funnel-input-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.funnel-input-group label{
  display:block;font-family:var(--display);font-size:.9rem;font-weight:500;
  margin-bottom:7px;color:#5d4751;
}
.funnel-input-group input,.funnel-input-group textarea{
  width:100%;padding:14px 18px;background:var(--white);
  border:1.5px solid rgba(36,16,25,.14);border-radius:14px;
  color:var(--ink);font-family:var(--text);font-size:1rem;outline:none;
  transition:border-color .18s ease;
}
.funnel-input-group input:focus,.funnel-input-group textarea:focus{border-color:var(--flare)}
.funnel-input-group input::placeholder,.funnel-input-group textarea::placeholder{color:#9b8790}
.funnel-input-group textarea{resize:vertical}

.funnel-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.funnel-next{margin-left:auto}
/* funnel.js reuses v1's button class names — give them the v2 pill treatment */
.funnel-overlay .btn-primary,.funnel-overlay .btn-secondary{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:1rem;font-weight:600;
  padding:13px 26px;border-radius:999px;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.funnel-overlay .btn-primary{background:var(--flare);color:var(--ink);border:0}
.funnel-overlay .btn-primary:hover{background:#E25B38}
.funnel-overlay .btn-secondary{background:transparent;color:var(--ink);border:1.5px solid rgba(36,16,25,.3)}
.funnel-overlay .btn-secondary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.funnel-success{text-align:center;padding:14px 0}
.funnel-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--flare);color:var(--ink);
  font-size:1.6rem;font-weight:700;
  display:grid;place-items:center;margin:0 auto 22px;
}
.funnel-success h2{margin-bottom:12px}
.funnel-success > p{color:#5d4751;font-size:1rem;max-width:42ch;margin:0 auto 26px}
.funnel-success-next{
  background:var(--white);border-radius:20px;padding:26px;text-align:left;
}
.funnel-success-next strong{font-family:var(--display);font-size:.95rem;display:block;margin-bottom:16px}
.funnel-success-steps{display:flex;flex-direction:column;gap:13px}
.funnel-success-step{display:flex;align-items:center;gap:13px;font-size:.95rem;color:#5d4751}
.funnel-success-step .num{
  width:29px;height:29px;border-radius:50%;flex:none;
  background:rgba(238,109,77,.16);color:var(--flare-text);
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.82rem;
}
.funnel-wa-cta{
  margin-top:20px;padding:20px 22px;
  background:var(--wine);color:#fff;border-radius:20px;
  display:flex;align-items:center;gap:16px;text-align:left;
}
.funnel-wa-cta-text{flex:1}
.funnel-wa-cta-text strong{display:block;font-family:var(--display);font-size:1rem;margin-bottom:4px;line-height:1.3}
.funnel-wa-cta-text span{display:block;font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.45}
.funnel-wa-btn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--citron);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:12px 20px;border-radius:999px;
}
.funnel-wa-btn:hover{background:#fff}

@media (max-width:640px){
  .funnel-overlay{padding:0;align-items:flex-end}
  .funnel-modal{max-width:none;max-height:94vh;border-radius:var(--r-mid) var(--r-mid) 0 0;padding:34px 24px 28px}
  .funnel-input-row{grid-template-columns:1fr}
  .funnel-wa-cta{flex-direction:column;align-items:flex-start}
}

/* ═══════════════════════════════════════════════════════════════
   Sticky WhatsApp button
   ═══════════════════════════════════════════════════════════════ */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:900;
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 10px 8px 20px;
  background:var(--wa);color:#fff;
  border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  box-shadow:0 10px 30px rgba(11,122,67,.34),0 2px 6px rgba(36,16,25,.14);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  animation:waSlideIn .6s cubic-bezier(.22,.8,.3,1) .9s both;
}
.wa-float:hover{background:var(--wa-deep);transform:translateY(-2px);box-shadow:0 14px 38px rgba(11,122,67,.45)}
.wa-float:active{transform:translateY(0)}
.wa-float .wa-pulse{
  width:9px;height:9px;border-radius:50%;background:var(--live);flex:none;
  box-shadow:0 0 0 0 rgba(111,208,140,.75);
  animation:waPulse 2.2s ease-out infinite;
}
.wa-float .wa-icon{
  width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;
  background:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.wa-float .wa-icon img{width:100%;height:100%;object-fit:cover}
@keyframes waSlideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(92,255,157,.9), 0 0 9px 2px rgba(92,255,157,.75)}
  70%{box-shadow:0 0 0 13px rgba(92,255,157,0), 0 0 9px 2px rgba(92,255,157,.75)}
  100%{box-shadow:0 0 0 0 rgba(92,255,157,0), 0 0 9px 2px rgba(92,255,157,.75)}
}
@media (prefers-reduced-motion:reduce){
  .wa-float{animation:none}
  .wa-float .wa-pulse{animation:none}
}
.wa-float .wa-text{white-space:nowrap}
/* The float sits above the page but must not pile up on top of the two
   things that own the screen while they are open: the mobile menu and the
   consent bar, which on a phone lands in the same bottom strip. */
.mnav-open .wa-float,
.ck-open .wa-float{display:none}
@media (max-width:640px){
  /* the label used to be hidden here, which left a bare green circle that
     said nothing about what tapping it does. It stays; the pill shrinks. */
  .wa-float{bottom:16px;right:14px;padding:6px 8px 6px 15px;gap:9px;font-size:.875rem}
  .wa-float .wa-icon{width:32px;height:32px}
}
@media (max-width:380px){
  .wa-float{font-size:.8125rem;padding:5px 7px 5px 13px;gap:8px}
  .wa-float .wa-icon{width:28px;height:28px}
}

/* ═══════════════════════════════════════════════════════════════
   Webdesign subpage
   ═══════════════════════════════════════════════════════════════ */

/* browser frame around a real project screenshot */
.shot{
  background:var(--bone);border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:14px;overflow:hidden;
}
.shot-bar{display:flex;align-items:center;gap:7px;padding:2px 4px 12px}
.shot-bar i{width:11px;height:11px;border-radius:50%;background:var(--bone-deep);display:block}
.shot-bar i:first-child{background:var(--flare)}
.shot-url{
  margin-left:10px;flex:1;height:24px;border-radius:999px;background:var(--bone-deep);
  display:flex;align-items:center;padding:0 14px;font-size:.75rem;color:#6b5560;
}
.shot-frame{height:440px;overflow:hidden;border-radius:8px;background:var(--bone-deep)}
.shot-frame img{width:100%;height:auto;display:block;transform:translateZ(0)}
.shot-frame.is-scrollable img{animation:autoscroll var(--dur,26s) ease-in-out infinite alternate}
@keyframes autoscroll{
  0%,8%{transform:translateY(0)}
  92%,100%{transform:translateY(calc(var(--shift) * -1))}
}
.shot:hover .shot-frame img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .shot-frame.is-scrollable img{animation:none}
}

/* headline facts under the hero */
.facts-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:0}
.fact{background:var(--white);border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);padding:32px 30px}
.fact:nth-child(even){border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.fact b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:2.3rem;line-height:1;letter-spacing:-0.035em;margin-bottom:8px;
}
.fact .stars{display:block;color:var(--flare);font-size:.95rem;letter-spacing:.18em;margin-bottom:8px}
.fact span{font-size:.95rem;color:#6b5560;display:block;line-height:1.45}

/* portfolio filter */
.pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.pf-filter button{
  font-family:var(--display);font-weight:500;font-size:1rem;
  border:1.5px solid rgba(36,16,25,.22);border-radius:999px;
  padding:10px 20px;min-height:44px;color:var(--ink);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.pf-filter button:hover{border-color:var(--ink)}
.pf-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-count{margin-top:18px;font-size:.95rem;color:#6b5560}
.pf-card[hidden]{display:none}

/* portfolio */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.pf-card{
  background:var(--white);border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease;
}
.pf-card:nth-child(even){border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.pf-card:hover{box-shadow:0 18px 44px rgba(36,16,25,.13)}
.pf-shot{aspect-ratio:16/11;overflow:hidden;background:var(--bone-deep);position:relative}
.pf-shot img{width:100%;height:auto;display:block;transition:transform 4s cubic-bezier(.4,0,.25,1)}
/* cards whose screenshot is taller than the frame get a scroll affordance */
.pf-shot.is-scrollable::after{
  content:"";position:absolute;right:12px;bottom:12px;width:26px;height:26px;
  border-radius:50%;background:rgba(36,16,25,.62);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  background-size:15px;background-repeat:no-repeat;background-position:center;
  opacity:1;transition:opacity .25s ease;pointer-events:none;
}
@media (hover:hover){
  .pf-card:hover .pf-shot.is-scrollable img{transform:translateY(calc(var(--shift) * -1))}
  .pf-card:hover .pf-shot.is-scrollable::after{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pf-shot img{transition:none}
  .pf-card:hover .pf-shot img{transform:none}
  .pf-card:hover .pf-shot.is-scrollable::after{opacity:1}
}
.pf-body{padding:26px 28px 30px}
.pf-cat{
  font-family:var(--display);font-size:.85rem;font-weight:500;
  color:var(--indigo);margin-bottom:6px;display:block;
}
.pf-body h3{font-size:1.2rem;margin-bottom:8px}
.pf-body p{font-size:.95rem;color:#5d4751;margin:0;line-height:1.5}

/* DIY vs pro */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:start}
.vs-col{border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);padding:48px 44px}
.vs-col--diy{background:var(--white)}
.vs-col--pro{background:var(--wine-deep);color:#fff;border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob)}
.vs-col h3{margin-bottom:26px}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.vs-col li{
  display:grid;grid-template-columns:26px 1fr;gap:15px;align-items:start;
  padding:17px 0;border-top:1px solid rgba(36,16,25,.12);font-size:1.0625rem;line-height:1.5;
}
.vs-col--pro li{border-top-color:rgba(255,255,255,.18)}
.vs-col li:first-child{border-top:0;padding-top:0}
.vs-col li i{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:.75rem;font-weight:700;margin-top:2px;
}
.vs-col--diy li i{background:rgba(36,16,25,.09);color:#6b5560}
.vs-col--pro li i{background:var(--flare);color:var(--ink)}

/* single price card */
.solo{
  background:var(--wine);color:#fff;border-radius:var(--r-blob);
  padding:64px;margin-top:48px;
  display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:start;
}
.solo-price{font-family:var(--display);font-weight:600;font-size:4.5rem;line-height:1;letter-spacing:-0.04em}
.solo-price sup{font-size:1.5rem;font-weight:500;vertical-align:super;margin-right:6px;letter-spacing:0}
.solo-sub{color:rgba(255,255,255,.72);margin:18px 0 30px;font-size:1.0625rem}
.solo h3{margin-bottom:24px;font-size:1.25rem}
.solo ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:15px 30px}
.solo li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:1.0625rem;line-height:1.45}
.solo li svg{margin-top:4px;color:var(--citron)}

/* guarantee */
.guarantee{
  background:var(--citron);color:var(--ink);
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:56px 60px;margin-top:40px;
  display:grid;grid-template-columns:96px 1fr;gap:40px;align-items:center;
}
.guarantee .shield{
  width:96px;height:96px;border-radius:50%;background:var(--ink);color:var(--citron);
  display:grid;place-items:center;
}
.guarantee h3{margin-bottom:14px}
.guarantee p{font-size:1.0625rem;color:rgba(36,16,25,.92);max-width:70ch}

@media (max-width:1240px){
  .nav{gap:22px;font-size:1rem}
  .head .desk{gap:28px}
}
@media (max-width:1180px){
  .facts-strip{grid-template-columns:repeat(2,1fr)}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .solo{grid-template-columns:1fr;gap:44px;padding:56px}
}
@media (max-width:960px){
  .vs{grid-template-columns:1fr}
  .vs-col{padding:40px 32px}
  .solo{padding:40px 30px;border-radius:var(--r-mid)}
  .solo ul{grid-template-columns:1fr}
  .solo-price{font-size:3.4rem}
  .shot-frame{height:300px}
  .guarantee{grid-template-columns:1fr;gap:26px;padding:40px 32px}
  .guarantee .shield{width:72px;height:72px}
}
@media (max-width:640px){
  .facts-strip,.pf-grid{grid-template-columns:1fr}
}

/* language switcher — stays visible on mobile, unlike the other utility links */
.lang{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  border:1.5px solid rgba(36,16,25,.18);border-radius:999px;padding:3px;
  font-family:var(--display);font-size:.8125rem;font-weight:600;
}
.lang a{padding:4px 11px;border-radius:999px;color:#6b5560;transition:background .18s ease,color .18s ease}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}
@media (max-width:960px){
  .head .util{gap:12px}
  .lang{font-size:.75rem;padding:2px}
  .lang a{padding:4px 9px}
}
@media (max-width:480px){
  /* logo + switch + CTA + burger needs 401px of header; below that the
     switch moves into the burger menu, which nav.js builds. */
  .head .lang{display:none}
}

/* WCAG 2.2 target size — footer links were 20–22px tall */
.foot ul a,.foot .addr a,.foot-base a{
  display:inline-flex;align-items:center;min-height:24px;padding:2px 0;
}
.foot ul{gap:8px}

/* ═══════════════════════════════════════════════════════════════
   Mid-page CTA — dashed card, a nod to the reference's CTA tile
   ═══════════════════════════════════════════════════════════════ */
.midcta{
  margin-top:56px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px;
  padding:30px 36px;
  border:1.6px dashed rgba(75,91,166,.45);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
}
.midcta p{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,1.5vw,1.35rem);letter-spacing:-0.02em;line-height:1.3;max-width:34ch;
}
.midcta-acts{display:flex;gap:12px;flex-wrap:wrap}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-deep);color:#fff}
@media (max-width:760px){
  .midcta{padding:26px 24px;margin-top:40px}
  .midcta-acts{width:100%}
  .midcta-acts .btn{flex:1 1 auto;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════
   Process steps — numbered so the sequence is unmistakable
   ═══════════════════════════════════════════════════════════════ */
.step{counter-increment:none}
.step-no{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;
}
.step-no .num{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--citron);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1;
  display:grid;place-items:center;
}
.step-no .num--after{
  background:transparent;border:2px solid rgba(242,232,75,.65);color:var(--citron);
}
.step-no .lbl{
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  color:var(--citron);letter-spacing:0;
}
.step-no .num--after + .lbl{color:rgba(255,255,255,.7)}
@media (max-width:640px){
  .step-no .num{width:40px;height:40px;font-size:1.2rem}
}

/* ═══════════════════════════════════════════════════════════════
   Resultstars Method — compact named-principles band
   ═══════════════════════════════════════════════════════════════ */
.method{
  background:var(--wine-deep);color:#fff;
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:48px 52px;margin-top:44px;
}
.method-top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid rgba(255,255,255,.18);
}
.method-top h3{font-size:clamp(1.3rem,2vw,1.7rem);max-width:none;white-space:nowrap}
.method-top p{margin:0;font-size:1rem;color:rgba(255,255,255,.72);max-width:44ch}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.method-item .k{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--citron);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.9rem;margin-bottom:14px;
}
.method-item h4{
  font-family:var(--display);font-weight:600;font-size:1.25rem;
  letter-spacing:-0.015em;margin:0 0 6px;color:var(--citron);
}
.method-item .mtag{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  color:#fff;margin:0 0 10px;line-height:1.3;
}
.method-item p{margin:0;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.72)}
.method-mark{white-space:nowrap}
@media (max-width:820px){.method-mark{white-space:normal}}
@media (max-width:1180px){.method-grid{grid-template-columns:repeat(2,1fr);gap:26px}}
@media (max-width:960px){.method{padding:36px 30px;border-radius:var(--r-mid)}
  .method-top h3{white-space:normal;font-size:1.3rem}}
@media (max-width:560px){.method-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   Social media management subpage
   Hero device: a four-week cadence calendar instead of a browser
   mock — the subject is rhythm, so the hero shows rhythm.
   ═══════════════════════════════════════════════════════════════ */
.cal{
  background:var(--white);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:32px 30px 28px;
}
/* the corner sticker sits over the top-right, so the header stacks and keeps clear of it */
.cal-top{display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-bottom:12px;padding-right:74px}
.cal-top h2{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:0;margin:0}
.cal-chip{
  font-family:var(--display);font-size:.78rem;font-weight:600;
  background:var(--bone-deep);color:var(--ink);border-radius:999px;padding:5px 12px;
}
.cal-sub{font-size:.875rem;color:#6b5560;margin:0 0 22px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.cal-dow span{
  font-family:var(--display);font-weight:500;font-size:.72rem;
  color:#6b5560;text-align:center;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;list-style:none;margin:0;padding:0}
.cal-grid li{
  aspect-ratio:1/1;border-radius:10px;background:var(--bone-deep);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  color:#6b5560;font-variant-numeric:tabular-nums;
}
.cal-grid li.is-post{background:var(--flare);color:var(--ink)}
.cal-grid li.is-reel{background:var(--wine);color:var(--citron)}
.cal-grid li.is-story{background:var(--indigo);color:#fff}
.cal-key{
  display:flex;flex-wrap:wrap;gap:10px 20px;
  margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(36,16,25,.12);
}
.cal-key span{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:#6b5560}
.cal-key i{width:12px;height:12px;border-radius:4px;display:block;flex:none}
.cal-key .k-post{background:var(--flare)}
.cal-key .k-reel{background:var(--wine)}
.cal-key .k-story{background:var(--indigo)}
.cal-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:20px;padding-top:20px;border-top:1px solid rgba(36,16,25,.12);
}
.cal-foot b{font-family:var(--display);font-size:1.75rem;font-weight:600;letter-spacing:-0.02em}
.cal-foot span{font-size:.875rem;color:#6b5560;max-width:23ch;text-align:right}

/* three-across process steps — this page has three, not four */
@media (min-width:961px){
  .steps--three{grid-template-columns:repeat(3,1fr)}
  .steps--three .step{padding:44px 36px}
  .steps--three .step h3{max-width:none}
}
@media (max-width:640px){
  .cal{padding:26px 22px 24px}
  .cal-grid{gap:6px}
  .cal-grid li{border-radius:8px;font-size:.75rem}
  .cal-dow{gap:6px}
  .cal-foot{flex-direction:column;align-items:flex-start}
  .cal-foot span{text-align:left;max-width:none}
}

/* ═══════════════════════════════════════════════════════════════
   Funnels subpage — the hero stage diagram.
   A funnel is a sequence, so the hero shows the sequence: numbered
   nodes on a connecting rail, each with a narrowing schematic bar.
   ═══════════════════════════════════════════════════════════════ */
.jrny{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:36px 36px 30px;
}
.jrny h2{
  font-family:var(--display);font-size:1.0625rem;font-weight:600;
  letter-spacing:0;line-height:1.3;margin:0 0 4px;
}
.jrny .sub{font-size:.875rem;color:#6b5560;margin:0 0 24px}
.jrny ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.jrny li{
  display:grid;grid-template-columns:30px 1fr;gap:0 16px;
  position:relative;padding-bottom:18px;
}
.jrny li:last-child{padding-bottom:0}
.jrny li:not(:last-child)::before{
  content:"";position:absolute;left:14px;top:26px;bottom:2px;width:2px;
  background:rgba(94,18,53,.22);
}
.jrny .no{
  width:30px;height:30px;border-radius:50%;
  background:var(--wine);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.85rem;line-height:1;
  display:grid;place-items:center;position:relative;z-index:1;
}
.jrny li:last-child .no{background:var(--flare);color:var(--ink)}
.jrny .jr-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:8px}
.jrny .jr-top b{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.012em;line-height:1.25}
.jrny .jr-tag{
  font-family:var(--display);font-weight:600;font-size:.8125rem;
  color:var(--indigo);flex:none;
}
.jrny .bar{display:block;height:10px;border-radius:999px;background:var(--wine);width:var(--w)}
.jrny li:last-child .bar{background:var(--flare)}
.jrny .jr-foot{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(36,16,25,.14);
  font-size:.875rem;color:#6b5560;
}
/* the collage sticker must clear the closing line of the card */
.funnel--jrny .sticker--b{left:-54px;bottom:-38px;width:78px;height:78px}
@media (max-width:960px){
  .funnel--jrny .sticker--b{left:-6px;bottom:-22px;width:68px;height:68px}
}
@media (max-width:560px){
  .jrny{padding:30px 24px 26px}
  .jrny .jr-top{gap:12px}
  .jrny .jr-top b{min-width:0}
}

/* neutral marker for an even-handed comparison — no ✕ implied */
.vs-col--diy li i.n{background:rgba(75,91,166,.14);color:var(--indigo)}

/* ═══════════════════════════════════════════════════════════════
   SEO · GEO · AEO subpage
   Hero device: a stylised AI answer with a citation list — the
   subject is being the cited source, so the hero shows a citation.
   Plus a three-surface treatment for the SEO / GEO / AEO split.
   ═══════════════════════════════════════════════════════════════ */
.ansbox{position:relative}
.ans{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:34px 34px 30px;
}
.ans-q{
  display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:start;
  padding-right:52px;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;line-height:1.35;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(36,16,25,.14);
}
.ans-q i{
  width:30px;height:30px;border-radius:50%;background:var(--bone-deep);color:#5d4751;
  display:grid;place-items:center;font-style:normal;font-size:.9rem;font-weight:700;
}
.ans-eng{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 13px;
  font-family:var(--display);font-size:.8125rem;font-weight:600;color:var(--indigo);
}
.ans-eng i{width:8px;height:8px;border-radius:50%;background:var(--indigo);display:block;flex:none}
.ans-body{font-size:1rem;line-height:1.62;color:#3b2630;margin:0}
.ans-body mark{background:rgba(238,109,77,.3);color:var(--ink);font-weight:600;padding:1px 4px;border-radius:5px}
.ans-body sup{
  font-family:var(--display);font-size:.66rem;font-weight:700;line-height:1;
  background:var(--flare);color:var(--ink);border-radius:5px;padding:2px 5px;
  margin-left:3px;vertical-align:super;
}
.ans-cites{margin-top:24px;padding-top:20px;border-top:1px solid rgba(36,16,25,.14)}
.ans-h{font-family:var(--display);font-size:.8125rem;font-weight:600;color:#5d4751;margin:0 0 13px}
.ans-cites ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ans-cites li{
  display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;
  background:var(--white);border-radius:13px;padding:10px 13px;
  font-size:.875rem;color:#5d4751;
}
.ans-cites li b{
  width:24px;height:24px;border-radius:7px;background:var(--bone-deep);color:#5d4751;
  display:grid;place-items:center;font-family:var(--display);font-size:.72rem;font-weight:700;
}
.ans-cites .is-you{background:var(--ink);color:#fff}
.ans-cites .is-you b{background:var(--flare);color:var(--ink)}
.ans-cites .is-you em{
  font-style:normal;font-family:var(--display);font-size:.72rem;font-weight:700;
  background:var(--citron);color:var(--ink);border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.ans-note{margin:18px 0 0;font-size:.8125rem;color:#5d4751}

/* the three disciplines — three different surfaces, not three same cards */
.discs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:start}
.disc{
  background:var(--white);color:var(--ink);
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:44px 38px 40px;
}
.disc--geo{background:var(--wine-deep);color:#fff;border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob)}
.disc--aeo{background:var(--indigo);color:#fff}
.disc-mark{
  display:block;font-family:var(--display);font-weight:700;
  font-size:2.75rem;line-height:1;letter-spacing:-0.04em;
  color:var(--flare-text);margin-bottom:8px;
}
.disc--geo .disc-mark{color:var(--flare)}
.disc--aeo .disc-mark{color:var(--citron)}
.disc-full{font-size:.9375rem;color:#5d4751;margin:0 0 20px}
.disc--geo .disc-full,.disc--aeo .disc-full{color:rgba(255,255,255,.82)}
.disc h3{font-size:1.25rem;margin:0 0 24px;max-width:22ch}
.disc ul{
  list-style:none;margin:0;padding:24px 0 0;display:grid;gap:13px;
  border-top:1px solid rgba(36,16,25,.12);
}
.disc--geo ul,.disc--aeo ul{border-top-color:rgba(255,255,255,.22)}
.disc li{display:grid;grid-template-columns:19px 1fr;gap:12px;font-size:1rem;line-height:1.45}
.disc li svg{margin-top:4px;flex:none;color:var(--flare-text)}
.disc--geo li svg,.disc--aeo li svg{color:var(--citron)}

/* one-price panel needs a CTA under the number */
.solo-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.solo-meta{margin:18px 0 0;font-size:.875rem;color:rgba(255,255,255,.72)}

@media (max-width:1100px){
  .discs{grid-template-columns:1fr}
  .disc,.disc--geo,.disc--aeo{border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
}
@media (max-width:640px){
  .ans{padding:26px 22px 24px}
  .ans-q{padding-right:58px}
  .ans-cites li{grid-template-columns:24px 1fr;gap:10px}
  .ans-cites .is-you em{grid-column:1 / -1;justify-self:start;margin-top:2px;font-size:.78rem}
  .disc{padding:36px 28px 32px}
}

/* ═══════════════════════════════════════════════════════════════
   About page — portrait-led hero
   Only used by /about/ and /de/ueber-uns/.
   ═══════════════════════════════════════════════════════════════ */
.port{position:relative;min-width:0}
.port-frame{
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  overflow:hidden;background:var(--wine-deep);
}
.port-frame img{
  width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:32% 24%;
}
.port-plate{
  position:relative;z-index:3;
  margin:-38px 0 0 26px;width:max-content;max-width:calc(100% - 26px);
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
  padding:18px 26px;
}
.port-plate b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.25rem;letter-spacing:-0.02em;line-height:1.2;
}
.port-plate span{display:block;font-size:.9375rem;color:#6b5560;margin-top:3px}
/* the check sticker sits on the free left edge so it never collides
   with the fixed WhatsApp button in the bottom-right corner */
.port .sticker--c{top:54%;left:-30px;right:auto;bottom:auto}
@media (max-width:960px){
  .port{max-width:460px}
  .port-frame img{aspect-ratio:5/4;object-position:32% 22%}
  .port-plate{margin-top:-32px}
  .port .sticker--c{left:-8px;top:46%}
}


/* ── hero funnel footer: stacked, so a longer label can't spill the card ── */
.funnel-foot{
  flex-direction:column;align-items:flex-start;gap:4px;
}
.funnel-foot b{font-size:1.5rem;line-height:1.15}
.funnel-foot span{text-align:left;max-width:34ch}


/* ── funnel card: room below the foot so the collage sticker can't cover copy ── */
.funnel-card{padding-bottom:52px}
.funnel-foot span{max-width:38ch}

/* ═══════════════════════════════════════════════════════════════
   Conversion-optimisation page — measurement components
   (/conversion-optimisation/ · /de/conversion-optimierung/)
   ═══════════════════════════════════════════════════════════════ */

/* hero: how long one conclusive A/B test takes — a duration chart,
   deliberately not the funnel rungs used on the home and webdesign heroes */
.gauge{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:38px 38px 32px;
}
.gauge h2{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:0;margin-bottom:4px}
.gauge .sub{font-size:.875rem;color:#6b5560;margin-bottom:24px}
.g-rows{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.g-row{display:grid;grid-template-columns:74px 1fr 86px;gap:14px;align-items:center}
.g-key{font-family:var(--display);font-weight:600;font-size:.9375rem;font-variant-numeric:tabular-nums}
.g-track{
  position:relative;height:26px;border-radius:8px;background:var(--bone-deep);
  background-image:linear-gradient(to right,rgba(36,16,25,.15) 1px,transparent 1px);
  background-size:9.6774% 100%;
}
.g-fill{
  position:absolute;top:0;bottom:0;left:0;width:var(--w);min-width:9px;
  border-radius:8px;background:var(--wine);
}
.g-row--key .g-fill{background:var(--flare)}
.g-val{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  font-variant-numeric:tabular-nums;text-align:right;line-height:1.2;
}
.g-val em{display:block;font-style:normal;font-family:var(--text);font-weight:400;font-size:.75rem;color:#6b5560}
.g-row--key .g-val{color:var(--flare-text)}
.gauge-foot{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(36,16,25,.14);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.gauge-foot b{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;flex:none}
.gauge-foot span{font-size:.8125rem;color:#6b5560;max-width:26ch;text-align:right}
@media (prefers-reduced-motion:no-preference){
  .js-anim .g-fill{width:0;transition:width .9s cubic-bezier(.22,.8,.3,1)}
  .js-anim.is-lit .g-fill{width:var(--w)}
}
@media (max-width:640px){
  .gauge{padding:30px 24px 26px}
  .gauge h2{padding-right:58px}
  .g-row{grid-template-columns:60px 1fr 72px;gap:10px}
  .g-key,.g-val{font-size:.875rem}
  .gauge-foot{flex-wrap:wrap}
  .gauge-foot span{text-align:left;max-width:none}
}

/* the sample-size table */
.mtable-wrap{
  margin-top:44px;background:var(--white);
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:46px 48px 40px;max-width:1040px;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
/* the intro only — :first-of-type keeps this off .mtable-note below the table */
.mtable-wrap > p:first-of-type{font-size:.9375rem;color:#6b5560;margin:0 0 22px;max-width:62ch}
.mtable{width:100%;min-width:470px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mtable th{
  font-family:var(--display);font-weight:600;font-size:.9375rem;color:#6b5560;
  text-align:right;padding:0 0 14px 18px;border-bottom:2px solid rgba(36,16,25,.16);line-height:1.3;
}
.mtable th:first-child,.mtable td:first-child{text-align:left;padding-left:0}
.mtable td{
  padding:16px 0 16px 18px;border-bottom:1px solid rgba(36,16,25,.1);
  text-align:right;font-size:1.0625rem;color:#5d4751;
}
.mtable tbody tr:last-child td{border-bottom:0;padding-bottom:0}
.mtable td:first-child{font-family:var(--display);font-weight:600;color:var(--ink)}
.mtable tr.is-key td{color:var(--flare-text)}
.mtable tr.is-key td:first-child{color:var(--flare-text)}
.mtable-note{margin:28px 0 0;font-size:.9375rem;color:#6b5560;max-width:66ch}
/* below 760px the fourth column — the punchline — would fall off the
   side, so every row becomes a small stacked card instead of scrolling */
@media (max-width:760px){
  .mtable-wrap{padding:32px 24px 28px;border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
  .mtable{min-width:0}
  .mtable thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .mtable tbody tr{display:block;padding:20px 0;border-bottom:1px solid rgba(36,16,25,.1)}
  .mtable tbody tr:first-child{padding-top:0}
  .mtable tbody tr:last-child{border-bottom:0;padding-bottom:0}
  .mtable td{
    display:flex;justify-content:space-between;align-items:baseline;gap:18px;
    padding:5px 0;border-bottom:0;text-align:right;font-size:1rem;
  }
  .mtable td::before{
    content:attr(data-label);flex:1 1 auto;text-align:left;
    font-family:var(--text);font-weight:400;font-size:.875rem;color:#6b5560;line-height:1.35;
  }
  .mtable td:first-child{display:block;font-size:1.35rem;margin-bottom:10px;padding:0}
  .mtable td:first-child::before{content:none}
  .mtable tbody tr:last-child td:last-child{padding-bottom:0}
}

/* win-rate roster, on a dark slab */
.rates{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0}
.rates li{
  display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:baseline;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.18);
}
.rates li:first-child{border-top:0;padding-top:0}
.rates b{
  font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1;
  letter-spacing:-0.03em;color:var(--citron);font-variant-numeric:tabular-nums;
}
.rates strong{display:block;font-family:var(--display);font-weight:600;font-size:1.0625rem;margin-bottom:2px}
.rates span{display:block;font-size:.9375rem;color:rgba(255,255,255,.75);line-height:1.5}
@media (max-width:480px){.rates li{grid-template-columns:1fr;gap:8px}}

/* .field-top let a long value collide with a wrapping label at phone width */
.field-top{gap:16px}
.field label{flex:1 1 auto;min-width:0}
.field output{flex:none;white-space:nowrap}

/* this page's verdict can read "124 Monate", so it needs a smaller floor */
.payoff--verdict .big{font-size:clamp(2.1rem,4.4vw,3.75rem)}

/* calculator verdict flag inside .payoff */
.flag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.875rem;
  background:var(--white);border-radius:999px;padding:7px 16px 7px 13px;margin-bottom:16px;
}
.flag i{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.flag--no{color:var(--flare-text)}
.flag--yes{color:var(--wa)}

/* source list */
.srcs{
  list-style:none;margin:30px 0 0;padding:26px 0 0;
  border-top:1px solid rgba(36,16,25,.16);display:grid;gap:13px;max-width:84ch;
}
.srcs li{font-size:.9375rem;color:#6b5560;line-height:1.55}
.srcs a{color:var(--flare-text);text-decoration:underline;text-underline-offset:3px}
.srcs a:hover{color:var(--ink)}

/* the honesty band re-uses .guarantee but needs room for prose */
.guarantee--long{display:block;padding:52px 56px}
.guarantee--long .shield{margin-bottom:26px}
.guarantee--long h3{max-width:22ch}
@media (max-width:960px){.guarantee--long{padding:36px 28px}}


/* ── collage sticker clears the card copy ── */
.funnel .sticker--b{bottom:-52px;left:-44px}
@media (max-width:960px){.funnel .sticker--b{bottom:-30px;left:-10px}}


/* ═══════════════════════════════════════════════════════════════
   Legal document pages — Impressum and Datenschutz.
   A reading layout: quiet hero, constrained measure (~68ch),
   sticky section index, address blocks as cards.
   Used by /impressum/, /de/impressum/, /datenschutz/, /de/datenschutz/
   ═══════════════════════════════════════════════════════════════ */

/* quiet hero — no stickers, no claims */
.doc-hero{
  background:var(--bone-deep);
  padding:58px 0 54px;
  border-bottom:1px solid rgba(36,16,25,.11);
}
.doc-crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--display);font-size:.9375rem;font-weight:500;
  color:#6b5560;margin-bottom:20px;
}
.doc-crumb a{border-bottom:1.5px solid transparent;padding:2px 0}
.doc-crumb a:hover{color:var(--ink);border-bottom-color:var(--flare)}
.doc-crumb span[aria-hidden]{color:rgba(36,16,25,.34)}
.doc-hero h1{font-size:clamp(2.25rem,4vw,3.5rem);max-width:17ch}
.doc-stamp{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:.9375rem;font-weight:500;
  color:#6b5560;margin:24px 0 0;
}
.doc-stamp i{width:8px;height:8px;border-radius:50%;background:var(--indigo);display:block;flex:none}

/* body shell */
.doc{padding:var(--rhythm) 0 calc(var(--rhythm) + 16px)}
.doc-grid{display:grid;grid-template-columns:262px minmax(0,1fr);gap:72px;align-items:start}
.doc-solo{max-width:none}

/* sticky section index */
.doc-toc{position:sticky;top:120px;font-family:var(--display)}
.doc-toc h2{
  font-size:1rem;font-weight:600;color:var(--indigo);
  letter-spacing:0;margin:0 0 15px;
}
.doc-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.doc-toc a{
  display:block;font-size:.9375rem;font-weight:500;line-height:1.38;
  color:#5d4751;padding:8px 13px;
  border-left:2px solid rgba(36,16,25,.14);
  border-radius:0 9px 9px 0;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.doc-toc a:hover{color:var(--ink);background:rgba(36,16,25,.05);border-left-color:var(--flare)}
.doc-toc a.is-current{color:var(--ink);background:rgba(238,109,77,.17);border-left-color:var(--flare)}

/* the reading column */
.doc-body{
  max-width:68ch;
  font-size:1.0625rem;line-height:1.72;color:#3a2630;
}
.doc-body h2{
  font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.18;
  color:var(--ink);scroll-margin-top:122px;
}
.doc-body h3{font-size:1.1875rem;line-height:1.3;color:var(--ink);scroll-margin-top:122px}
.doc-body > h2{margin-top:66px;padding-top:32px;border-top:1px solid rgba(36,16,25,.14)}
.doc-body > *:first-child{margin-top:0}
.doc-body > h2:first-child,.doc-body > .doc-note + h2{margin-top:0;padding-top:0;border-top:0}
.doc-body > h3{margin-top:40px}
.doc-body > h2 + h3{margin-top:26px}
.doc-body p{margin:16px 0 0}
.doc-body strong{font-weight:600;color:var(--ink)}
.doc-body a{
  color:var(--flare-text);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  overflow-wrap:anywhere;
}
.doc-body a:hover{color:var(--ink)}

/* lists — square flare markers instead of browser bullets */
.doc-body ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.doc-body ul li{position:relative;padding-left:26px}
.doc-body ul li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:7px;height:7px;background:var(--flare);transform:rotate(45deg);border-radius:1.5px;
}

/* address / contact details lift out of the prose as cards */
.doc-block{
  background:var(--white);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:24px 30px;margin:20px 0 0;
  line-height:1.62;
}
.doc-block--mirror{border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.doc-block a{color:var(--flare-text)}

/* translation disclaimer */
.doc-note{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(75,91,166,.1);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:20px 26px;margin:0 0 46px;
  font-size:1rem;line-height:1.6;color:#41303a;
}
.doc-note p{margin:0}
.doc-note-i{flex:none;color:var(--indigo);margin-top:3px}
.doc-note a{color:var(--flare-text)}

/* legal pages end on contact details, not a pitch */
.close .close-acts .btn{font-size:1rem}

@media (max-width:1180px){
  .doc-grid{grid-template-columns:230px minmax(0,1fr);gap:48px}
}
@media (max-width:960px){
  .doc-hero{padding:44px 0 42px}
  .doc-grid{grid-template-columns:1fr;gap:40px}
  .doc-toc{
    position:static;top:auto;
    background:var(--white);
    border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
    padding:26px 24px;
  }
  .doc-toc ol{gap:1px}
  .doc-body{max-width:none}
  .doc-body > h2{margin-top:52px;padding-top:26px}
}
@media (max-width:640px){
  .doc-block{padding:20px 22px}
  .doc-note{padding:18px 20px;gap:12px}
  .doc-hero h1{max-width:none}
}

/* ═══════════════════════════════════════════════════════════════
   Online-shops subpage
   The shop screenshots in /online-shops/portfolio/ are 720 px wide —
   noticeably narrower than the 1400 px webdesign captures. So this
   page keeps its image frames small enough to stay near 2× density:
   a 400 px hero column (372 px frame) and a four-up showcase grid.
   ═══════════════════════════════════════════════════════════════ */
.hero--shop .desk{grid-template-columns:1fr 400px}
.hero--shop .shot-frame{height:420px}
.pf-grid--shops{grid-template-columns:repeat(4,1fr)}
.pf-grid--shops .pf-body{padding:22px 24px 26px}
.pf-grid--shops .pf-body h3{font-size:1.1rem}
@media (max-width:1180px){.pf-grid--shops{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px){
  .hero--shop .desk{grid-template-columns:1fr}
  .hero--shop .funnel{max-width:400px}
  .hero--shop .shot-frame{height:300px}
}
@media (max-width:780px){.pf-grid--shops{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pf-grid--shops{grid-template-columns:1fr}}

/* doc-note sits on an indigo tint — coral link text drops below 4.5:1 there */
.doc-note a{color:var(--wine)}
.doc-note a:hover{color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════
   Exit-intent / scroll-depth offer popup
   ═══════════════════════════════════════════════════════════════ */
.xpop{
  position:fixed;inset:0;z-index:2100;
  display:grid;place-items:center;padding:24px;
  background:rgba(36,16,25,.58);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s ease;
}
.xpop.is-open{opacity:1}
.xpop-card{
  position:relative;width:100%;max-width:520px;
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:40px 40px 30px;
  box-shadow:0 30px 70px rgba(36,16,25,.3);
  transform:translateY(14px) scale(.985);
  transition:transform .24s cubic-bezier(.22,.8,.3,1);
}
.xpop.is-open .xpop-card{transform:none}
.xpop-x{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border-radius:50%;
  background:var(--bone-deep);color:var(--ink);
  display:grid;place-items:center;transition:background .18s ease,color .18s ease;
}
.xpop-x:hover{background:var(--flare);color:var(--ink)}
.xpop-card h2{font-size:clamp(1.7rem,3vw,2.1rem);line-height:1.12;margin-bottom:12px}
.xpop-lede{font-size:1.0625rem;color:#5d4751;margin:0 0 22px;max-width:40ch}
.xpop-points{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.xpop-points li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:1rem}
.xpop-points svg{width:18px;height:18px;margin-top:4px;color:var(--flare-text)}
.xpop-cta{width:100%;justify-content:center}
.xpop-wa{width:100%;justify-content:center;margin-top:10px}
.xpop-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;font-size:.9375rem;color:#6b5560;
}
.xpop-later{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:#6b5560;text-decoration:underline;text-underline-offset:3px;
  min-height:24px;padding:2px 0;
}
.xpop-later:hover{color:var(--ink)}
@media (max-width:560px){
  .xpop{padding:0;align-items:flex-end}
  .xpop-card{max-width:none;border-radius:var(--r-mid) var(--r-mid) 0 0;padding:34px 24px 26px;transform:translateY(24px)}
}
@media (prefers-reduced-motion:reduce){
  .xpop,.xpop-card{transition:none}
  .xpop-card{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   Meta Ads landing pages — /meta-ads/ and /de/meta-ads/
   Cold paid traffic: no site nav, one conversion goal, sticky
   mobile CTA bar. Everything page-specific is scoped to body.pg-ads
   so nothing here can leak into the rest of the site.
   ═══════════════════════════════════════════════════════════════ */

/* the headline is a two-sentence claim, so it needs a touch more room */
.pg-ads .hero h1{max-width:17ch}
.pg-ads .hero .brow{margin-bottom:13px}

/* placements — the real platform marks lead the hero */
.plat{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0}
.plat li{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:.9375rem;
  border:1.5px solid rgba(255,255,255,.32);border-radius:999px;
  background:rgba(255,255,255,.08);padding:7px 17px 7px 13px;
}
.plat li img{width:18px;height:18px;flex:none;display:block}

/* the numbered building blocks: block four carries the whole argument */
.pg-ads .card p + p{margin-top:12px}
.pg-ads .tile b{font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1}
.pg-ads .card--key{background:var(--wine-deep);color:#fff}
.pg-ads .card--key h3{color:var(--citron)}
.pg-ads .card--key p{color:rgba(255,255,255,.82)}
.pg-ads .card--key strong{color:#fff}

/* sticky bottom CTA bar — mobile only, the single biggest lever on ad traffic */
.stickbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--white);
  border-top:1px solid rgba(36,16,25,.14);
  box-shadow:0 -8px 26px rgba(36,16,25,.15);
}
.stickbar .btn{flex:1 1 0;justify-content:center;padding:14px 12px;font-size:.95rem}
.stickbar .btn--wa{flex:0 1 auto}
@media (max-width:768px){
  .stickbar{display:flex}
  /* lift the WhatsApp float clear of the bar, and keep the footer's
     Impressum / Datenschutz links from sitting underneath it */
  .pg-ads .wa-float{bottom:94px}
  .pg-ads .foot{padding-bottom:124px}
}

/* Impressum has no index rail — centre the reading column so the page is not
   lopsided on wide screens (part of the legal-document block above) */
.doc-hero--solo .desk,
.doc--solo .desk{max-width:calc(645px + var(--gutter) * 2)}
.doc-solo .doc-body{max-width:none}
.doc-hero--solo h1{max-width:none}
/* the Growth tier's price footnote runs to two lines — .price sets line-height:1 */
.pg-ads .price small{line-height:1.45}

/* ═══════════════════════════════════════════════════════════════
   BLOG — editorial index grid + long-form reading layout
   Everything below is scoped to .post-* / .prose and is only used
   by /blog/ and /de/blog/. Added as one block; nothing above is
   touched.
   ═══════════════════════════════════════════════════════════════ */

/* ── reading progress: a hairline of flare across the very top ── */
.readbar{position:fixed;top:0;left:0;width:100%;height:4px;z-index:90;pointer-events:none;background:transparent}
.readbar i{display:block;height:100%;width:0;background:var(--flare)}
@media (prefers-reduced-motion:reduce){.readbar i{transition:none}}

/* ── category chip ─────────────────────────────────────────────── */
.post-tag{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-family:var(--display);font-size:.875rem;font-weight:600;letter-spacing:0;
  background:var(--bone-deep);color:var(--wine);
  border-radius:999px;padding:6px 15px 6px 12px;
}
.post-tag i{width:8px;height:8px;border-radius:50%;background:var(--flare);flex:none;display:block}
.post-tag.t-funnels i{background:var(--indigo)}
.post-tag.t-case i{background:var(--citron)}
.post-tag.t-ads i{background:var(--wa)}
.on-dark .post-tag,.post-head .post-tag,.post-card--dark .post-tag{background:rgba(255,255,255,.14);color:#fff}

/* ── reading-time / meta line ──────────────────────────────────── */
.post-meta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:.9375rem;font-weight:500;color:#6b5560;
}
.post-meta svg{flex:none;opacity:.85}
.post-card--dark .post-meta,.on-dark .post-meta,.post-head .post-meta{color:rgba(255,255,255,.72)}

/* ═══ INDEX ════════════════════════════════════════════════════ */

/* topic chips under the masthead */
.topics{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.topics li{
  font-family:var(--display);font-size:.9375rem;font-weight:500;
  border:1.5px solid rgba(255,255,255,.3);border-radius:999px;
  padding:7px 16px;color:rgba(255,255,255,.85);
}

/* the lead piece, sitting where other pages put the funnel panel */
.feature{
  display:block;position:relative;
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:36px 38px 32px;
  transition:transform .2s ease;
}
.feature:hover{transform:translateY(-3px)}
.feature .kicker{
  display:block;font-family:var(--display);font-size:.875rem;font-weight:600;
  color:var(--flare-text);margin:0 0 14px;
}
.feature h2{font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.16;margin:0 0 14px}
.feature p{color:#5d4751;font-size:1.0625rem;margin:0}
.feature-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(36,16,25,.14);
}
.feature-go{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;color:var(--flare-text);
}
.feature:hover .feature-go{color:var(--ink)}

/* editorial grid — three up, with one wide dark slab breaking the rhythm */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.post-card{display:block;padding-bottom:92px}
.post-card h3{margin:18px 0 12px;max-width:21ch}
.post-card p{color:#5d4751;font-size:1.0625rem;margin:0}
.post-card .post-meta{position:absolute;left:36px;bottom:36px}
.post-card:hover{transform:translateY(-3px)}
.post-card:hover h3{color:var(--flare-text)}
.post-card--wide{grid-column:span 2}
.post-card--dark{background:var(--wine-deep);color:#fff}
.post-card--dark p{color:rgba(255,255,255,.78)}
.post-card--dark:hover h3{color:var(--citron)}
.post-card--wide h3{max-width:26ch;font-size:clamp(1.45rem,2vw,1.95rem)}
.post-note{margin-top:40px;font-size:.9375rem;color:#6b5560}

@media (max-width:1180px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:1fr}
  .post-card--wide{grid-column:span 1}
  .post-card{padding-bottom:86px}
  .post-card .post-meta{left:28px;bottom:30px}
}

/* ═══ ARTICLE ══════════════════════════════════════════════════ */

/* one narrow column for the whole piece — ~70 characters of measure */
.post-head .desk,.post-body .desk{max-width:760px}

.post-head{
  background:var(--wine);color:#fff;
  border-bottom-right-radius:110px;
  padding:60px 0 72px;position:relative;overflow:hidden;
}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.9375rem;color:rgba(255,255,255,.72);margin:0 0 26px;
}
.crumbs a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px}
.crumbs a:hover{color:var(--citron)}
.crumbs .sep{opacity:.5}
.post-head h1{
  font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.08;margin:22px 0 0;max-width:19ch;
}
.post-lede{
  font-size:clamp(1.15rem,1.7vw,1.375rem);line-height:1.5;
  color:rgba(255,255,255,.84);margin:24px 0 0;max-width:46ch;
}
.post-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-size:1rem;font-weight:500;color:rgba(255,255,255,.72);
}
.post-facts .pip{width:5px;height:5px;border-radius:50%;background:var(--flare);display:block}

.post-body{padding:60px 0 var(--rhythm)}

/* inline table of contents */
.post-toc{
  background:var(--white);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:28px 32px;margin:0 0 52px;
}
.post-toc .toc-title{
  font-family:var(--display);font-size:1rem;font-weight:600;color:#6b5560;
  margin:0 0 12px;
}
.post-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.post-toc li{counter-increment:toc}
.post-toc a{
  display:flex;align-items:baseline;gap:14px;padding:10px 0;min-height:24px;
  border-top:1px solid rgba(36,16,25,.1);
  font-family:var(--display);font-weight:500;font-size:1.0625rem;line-height:1.35;
}
.post-toc li:first-child a{border-top:0;padding-top:2px}
.post-toc a::before{
  content:counter(toc,decimal-leading-zero);flex:none;width:22px;
  font-size:.875rem;font-weight:600;color:var(--flare-text);
}
.post-toc a:hover{color:var(--flare-text)}

/* the prose itself */
.prose{font-size:1.1875rem;line-height:1.75}
.prose > p{margin:0 0 1.15em}
.prose h2{
  font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.16;max-width:22ch;
  margin:2.15em 0 .55em;padding-top:.6em;position:relative;
}
.prose h2::before{
  content:"";position:absolute;top:0;left:0;width:54px;height:4px;
  background:var(--flare);border-radius:2px;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.25;max-width:32ch;
  color:var(--wine);margin:1.9em 0 .5em;
}
.prose h2 + h3{margin-top:1.25em}
.prose ul{list-style:none;margin:0 0 1.5em;padding:0;display:grid;gap:13px}
.prose ul > li{position:relative;padding-left:30px}
.prose ul > li::before{
  content:"";position:absolute;left:5px;top:.63em;
  width:9px;height:9px;border-radius:50%;background:var(--flare);
}
.prose ol{list-style:none;margin:0 0 1.5em;padding:0;counter-reset:pl;display:grid;gap:13px}
.prose ol > li{position:relative;padding-left:34px;counter-increment:pl}
.prose ol > li::before{
  content:counter(pl);position:absolute;left:0;top:.1em;
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--flare-text);
}
.prose strong{font-weight:600}
.prose a{color:var(--flare-text);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}

/* pull quote — one sentence lifted out of the flow */
.pull{
  margin:2.3em 0;padding:4px 0 4px 28px;border-left:4px solid var(--flare);
  font-family:var(--display);font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.3;color:var(--wine);
}
.pull p{margin:0}
.pull cite{display:block;margin-top:14px;font-family:var(--text);font-style:normal;
  font-size:.9375rem;font-weight:400;letter-spacing:0;color:#6b5560}

/* callout — the rule you should not forget */
.callout{
  background:var(--white);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:28px 32px;margin:2.1em 0;font-size:1.0625rem;line-height:1.65;
}
.callout .k{
  display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-family:var(--display);font-weight:600;font-size:.9375rem;color:var(--flare-text);
}
.callout .k svg{flex:none}
.callout--dark{background:var(--wine-deep);color:#fff;
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.callout--dark .k{color:var(--citron)}
.callout ul{margin-bottom:0}
.callout--dark ul > li::before{background:var(--citron)}

/* before / after figures */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:2.2em 0}
.figures--one{grid-template-columns:1fr}
.fig{
  background:var(--white);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:28px 28px 24px;
}
.fig--after{background:var(--wine);color:#fff;
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.fig .k{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--flare-text);margin:0 0 16px;
}
.fig--after .k{color:var(--citron)}
.fig dl{margin:0}
.fig dl > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-top:1px solid rgba(36,16,25,.12);
}
.fig dl > div:first-child{border-top:0;padding-top:0}
.fig--after dl > div{border-top-color:rgba(255,255,255,.22)}
.fig dt{font-size:.9375rem;color:#6b5560;line-height:1.35}
.fig--after dt{color:rgba(255,255,255,.75)}
.fig dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.2rem;
  letter-spacing:-0.02em;text-align:right;white-space:nowrap}
.fig .quote{margin:0;font-family:var(--display);font-weight:500;font-size:1.15rem;
  line-height:1.35;letter-spacing:-0.015em}

/* end-of-article: keep reading */
.post-more{padding-top:0}
.post-more .card{padding-bottom:76px}

@media (max-width:960px){
  .post-head{border-bottom-right-radius:64px;padding:48px 0 56px}
  .post-body{padding-top:48px}
  .post-toc{padding:24px 24px;margin-bottom:42px;border-radius:var(--r-mid)}
  .callout{padding:24px 24px;border-radius:var(--r-mid)}
  .figures{grid-template-columns:1fr}
  .fig{border-radius:var(--r-mid)}
  .feature{padding:30px 28px 28px}
}
@media (max-width:640px){
  .prose{font-size:1.0625rem}
  .pull{padding-left:20px}
  .fig dd{font-size:1.1rem}
}


/* ═══════════════════════════════════════════════════════════════
   Header optical alignment
   Two separate causes, both measured rather than eyeballed:
   1. The logo artwork is not optically centred — the sparkle rises above
      the wordmark, so the wordmark's ink centre sits 15/160 of the art
      height BELOW the image centre (+2.81px when rendered at 30px).
      The mark-only mobile logo IS centred and needs no nudge.
   2. .nav a carried a 2px border-bottom inside its box, pushing the label
      1px above the flex centre. The underline is now a pseudo-element so
      it no longer takes part in layout.
   ═══════════════════════════════════════════════════════════════ */
.mark .mk-full{transform:translateY(-2.8px)}

.nav a{position:relative;border-bottom:0;padding:6px 0}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:transparent;transition:background .18s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{background:var(--flare)}
@media (max-width:960px){.mark .mk-full{transform:translateY(-2.4px)}}


/* ═══════════════════════════════════════════════════════════════
   Consent gate (assets/consent.js)
   ═══════════════════════════════════════════════════════════════ */
/* Two shapes, one component.
   .ck--bar   first run: a bar pinned to the bottom. No backdrop, nothing
              blocked. Measured on a 390px phone, the old full-screen
              version covered the entire first screen — headline, offer and
              CTA all behind it — so a visitor arriving from an ad had to
              answer a cookie dialog from a brand they had never heard of
              before seeing anything. Consent is still required before a
              single tag loads; blocking the page was never what made that
              lawful.
   .ck--modal settings: a real dialog, backdrop and all, because opening it
              is a deliberate act. */
.ck{position:fixed;z-index:2400}
.ck--bar{
  left:0;right:0;bottom:0;top:auto;
  display:flex;justify-content:flex-start;padding:16px 24px 20px;
  pointer-events:none;          /* the page behind stays usable */
}
.ck--bar .ck-card{pointer-events:auto}
.ck--modal{
  inset:0;display:grid;place-items:end start;padding:24px;
  background:rgba(36,16,25,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* The bar has to stay a bar. At the card's full size it was 435px tall and
   still swallowed the bottom half of a 390x844 phone, which is most of the
   problem it was meant to solve. Tighter type, tighter padding, buttons on
   one row. The settings modal keeps the roomy treatment. */
.ck--bar .ck-card{padding:16px 20px 14px;max-width:520px;box-shadow:0 -10px 34px rgba(36,16,25,.26)}
.ck--bar .ck-card h2{font-size:1.0625rem;line-height:1.25;margin-bottom:5px}
.ck--bar .ck-body{font-size:.875rem;line-height:1.45;margin:0 0 13px}
.ck--bar .ck-acts{gap:8px}
.ck--bar .ck-acts .btn{flex:1 1 auto;padding:10px 14px;font-size:.9375rem;min-width:0}
/* Three equal buttons never fit a phone in German: "Einstellungen" dropped to
   a row of its own and made the bar look broken. The two real choices share
   one row; settings is a secondary action and reads as a link, next to the
   privacy links it belongs with. */
.ck--bar .ck-acts{flex-wrap:wrap;align-items:stretch;gap:8px 10px}
.ck--bar .ck-acts .btn{flex:1 1 0;min-width:0;white-space:nowrap}
/* settings now lives in the links row; match the anchors exactly */
.ck-links .ck-set{
  background:none;border:0;box-shadow:none;padding:0;min-height:24px;
  font:inherit;font-size:.875rem;color:#6b5560;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;
}
.ck-links .ck-set:hover{color:var(--ink,#241019)}
.ck--bar .ck-links{margin:11px 0 0;font-size:.8125rem;gap:14px}
@media (max-width:560px){
  .ck--bar .ck-card{
    border-radius:var(--r-mid,28px) var(--r-mid,28px) 0 0;
    padding:15px 18px calc(13px + env(safe-area-inset-bottom,0px));
  }
  /* override the stacked full-width buttons from the modal treatment */
  .ck--bar .ck-acts .btn{flex:1 1 auto}
  .ck--bar .ck-acts .btn:last-child{flex:0 0 auto}
}

.ck-card{
  width:100%;max-width:460px;background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:30px 32px 26px;box-shadow:0 26px 60px rgba(36,16,25,.34);
  max-height:calc(100vh - 48px);overflow-y:auto;
}
.ck-card h2{font-size:1.35rem;line-height:1.2;margin-bottom:12px}
.ck-body{font-size:1rem;color:#5d4751;margin:0 0 22px}
.ck-acts{display:flex;flex-wrap:wrap;gap:10px}
.ck-acts .btn{flex:1 1 auto;justify-content:center;padding:13px 20px;font-size:1rem}
.ck-links{display:flex;gap:18px;margin:18px 0 0;font-size:.875rem}
.ck-links a{color:#6b5560;text-decoration:underline;text-underline-offset:3px;min-height:24px;display:inline-flex;align-items:center}
.ck-links a:hover{color:var(--ink)}
.ck-rows{display:grid;gap:18px;margin-bottom:22px}
.ck-row p{margin:6px 0 0 54px;font-size:.9375rem;color:#5d4751;line-height:1.45}
.ck-sw{display:flex;align-items:center;gap:14px;cursor:pointer}
.ck-sw input{position:absolute;opacity:0;width:0;height:0}
.ck-track{
  width:40px;height:24px;border-radius:999px;background:var(--bone-deep);
  position:relative;flex:none;transition:background .18s ease;
}
.ck-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .18s ease}
.ck-sw input:checked + .ck-track{background:var(--wa)}
.ck-sw input:checked + .ck-track::after{transform:translateX(16px)}
.ck-sw input:disabled + .ck-track{background:var(--flare);opacity:.55}
.ck-sw input:focus-visible + .ck-track{outline:3px solid var(--indigo);outline-offset:3px}
.ck-name{font-family:var(--display);font-weight:600;font-size:1.0625rem}
.ck-name em{font-style:normal;font-weight:500;font-size:.875rem;color:#6b5560}
@media (max-width:560px){
  .ck--modal{place-items:end center;padding:0}
  .ck--bar{padding:0}
  .ck-card{max-width:none;border-radius:var(--r-mid) var(--r-mid) 0 0;padding:26px 22px 22px}
  .ck-acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.ck-track,.ck-track::after{transition:none}}

/* blog, continued — overrides that must beat earlier scoped rules */
/* .on-dark .post-meta would otherwise bleach the meta line inside the
   bone-coloured feature card that sits in the dark hero */
.feature .post-meta{color:#6b5560}
/* .prose a paints every link coral + underlined; buttons opt out */
.prose .btn{color:var(--ink);text-decoration:none}
.prose .btn--ink,.prose .btn--wa{color:#fff}
.prose .btn--ink:hover,.prose .btn--wa:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   Page components: /de/coaches/ calendar + /de/landing-pages/ wireframe
   Two small hero devices so the industry and service pages don't all
   reach for the same card. Nothing here is reused elsewhere.
   ═══════════════════════════════════════════════════════════════ */

/* ── calendar card (coaches hero) ─────────────────────────────── */
.cal{
  background:var(--white);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:32px 30px;
}
.cal-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.cal-top h2{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:0;line-height:1.3}
.cal-top span{font-size:.875rem;color:#6b5560;flex:none}
.cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cal-day{display:grid;gap:8px}
.cal-day b{
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  color:#6b5560;text-align:center;padding-bottom:2px;
}
.cal-day i{display:block;height:34px;border-radius:9px;background:var(--bone-deep)}
.cal-day i.is-booked{background:var(--wine)}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 0;font-size:.875rem;color:#6b5560}
.cal-legend span{display:inline-flex;align-items:center;gap:9px}
.cal-legend em{width:14px;height:14px;border-radius:5px;background:var(--bone-deep);display:block;flex:none}
.cal-legend em.is-booked{background:var(--wine)}
.cal-foot{
  display:flex;align-items:flex-start;gap:18px;
  margin-top:22px;padding-top:22px;border-top:1px solid rgba(36,16,25,.14);
}
.cal-foot b{
  font-family:var(--display);font-weight:600;font-size:1.75rem;
  letter-spacing:-0.02em;line-height:1.1;flex:none;
}
.cal-foot span{font-size:.875rem;color:#6b5560;line-height:1.45}
@media (max-width:420px){
  .cal{padding:26px 22px}
  .cal-grid{gap:7px}
  .cal-day i{height:28px}
}

/* ── homepage-vs-landing-page wireframe (landing pages hero) ──── */
.wire{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wire-card{
  background:var(--white);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:24px 22px;
}
.wire-card--lp{border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.wire-card h2{font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.3}
.wire-sub{font-size:.8125rem;color:#6b5560;margin:4px 0 16px;line-height:1.4}
.wire-page{display:grid;gap:7px;padding:12px;border-radius:12px;background:var(--bone)}
.wire-bar{height:9px;border-radius:4px;background:var(--bone-deep)}
.wire-bar--head{height:16px;background:rgba(36,16,25,.22)}
.wire-bar--short{width:62%}
.wire-bar--nav{display:flex;gap:5px;background:none;height:9px}
.wire-bar--nav i{flex:1;border-radius:4px;background:rgba(75,91,166,.5);display:block}
.wire-bar--cta{height:17px;border-radius:999px;background:var(--flare)}
.wire-out{
  display:flex;align-items:baseline;gap:9px;
  margin:16px 0 0;font-size:.8125rem;color:#5d4751;line-height:1.35;
}
.wire-out b{font-family:var(--display);font-weight:600;font-size:1.375rem;line-height:1;flex:none}
.wire-card--lp .wire-out b{color:var(--flare-text)}
@media (max-width:380px){
  .wire{gap:12px}
  .wire-card{padding:20px 16px}
}

/* ═══════════════════════════════════════════════════════════════
   Branchen-Seiten — .fact cards used as a hero device
   .fact is a white card, so inside .hero.on-dark it would inherit
   white text and disappear. Pin it back to ink.
   ═══════════════════════════════════════════════════════════════ */
.hero .fact{color:var(--ink)}
.hero .fact b{color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════
   Blog article — two components borrowed into the reading column
   (used by /de/blog/5-funnel-fehler/ and the before/after figures)

   1. .jrny is the funnels-page hero diagram. Inside .prose the generic
      list rules win on specificity and would flatten its grid, so the
      grid is restored here — scoped to .prose, so nothing outside an
      article changes. The connecting rail moves to ::after because
      .prose neutralises the list markers on ::before.
   2. A .fig can hold a qualitative list instead of a <dl>; the list's
      trailing margin would then unbalance the card.
   ═══════════════════════════════════════════════════════════════ */
.prose .jrny{margin:2.2em 0}
.prose .jrny .jr-hd{
  font-family:var(--display);font-size:1.0625rem;font-weight:600;
  letter-spacing:0;line-height:1.3;margin:0 0 4px;
}
.prose .jrny .sub{font-size:.875rem;color:#6b5560;margin:0 0 24px}
.prose .jrny ol{display:grid;gap:0;margin:0;padding:0;counter-reset:none}
.prose .jrny ol > li{
  display:grid;grid-template-columns:30px 1fr;gap:0 16px;
  position:relative;padding:0 0 18px;counter-increment:none;
}
.prose .jrny ol > li::before{content:none}
.prose .jrny ol > li:last-child{padding-bottom:0}
.prose .jrny ol > li:not(:last-child)::after{
  content:"";position:absolute;left:14px;top:26px;bottom:2px;width:2px;
  background:rgba(94,18,53,.22);
}
.prose .jrny .jr-foot{
  margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(36,16,25,.14);
  font-size:.875rem;line-height:1.55;color:#6b5560;
}
.prose .fig ul{margin-bottom:0}


/* ── long CTA labels must wrap on narrow screens ──────────────────
   .btn is nowrap so pills never break mid-phrase on desktop, but long
   German labels ("Kampagnen-Strategie besprechen") then exceed a 390px
   viewport and get clipped by body{overflow-x:hidden}. Below 430px the
   label wraps and centres instead. ────────────────────────────── */
@media (max-width:430px){
  .btn{white-space:normal;text-align:center;justify-content:center}
}


/* ── portfolio: reveal the rest ── */
.pf-more{display:flex;justify-content:center;margin-top:40px}
.pf-more button[hidden]{display:none}


/* ── calendar day labels were 11.5px on phones ── */
.cal-dow span,.cal-head span{font-size:.75rem}
@media (max-width:520px){.cal-dow span,.cal-head span{font-size:.75rem}}

/* ═══════════════════════════════════════════════════════════════
   Price calculator (tools pages)
   ═══════════════════════════════════════════════════════════════ */
.calcwrap{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;margin-top:44px}
.calcform{
  background:var(--white);border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:44px 44px 40px;
}
.cq{
  /* fieldset carries a default 2px groove border on all sides — reset it,
     otherwise every question sits in a browser-drawn box */
  border:0;border-top:1px solid rgba(36,16,25,.12);
  margin:0;padding:26px 0 0;min-width:0;
}
.cq:first-child{padding-top:0;border-top:0}
.cq > legend,.cq > .cq-q{
  font-family:var(--display);font-weight:600;font-size:1.125rem;
  letter-spacing:-0.015em;margin:0 0 14px;padding:0;
  /* a legend sits outside the fieldset's padding box, which made the gap
     below it 26px larger than intended. Floating it makes it a normal
     block so the spacing matches the first question. */
  display:block;float:left;width:100%;
}
.cq > legend + *{clear:both}
.cq::after{content:"";display:block;clear:both}
.cq-note{font-size:.9375rem;color:#6b5560;margin:-8px 0 14px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--display);font-weight:500;font-size:1rem;
  border:1.5px solid rgba(36,16,25,.2);border-radius:999px;padding:9px 20px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.opt span:hover{border-color:rgba(36,16,25,.45)}
.opt input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.opt input:focus-visible + span{outline:3px solid var(--indigo);outline-offset:3px}
.opts--stack{flex-direction:column;align-items:stretch}
.opts--stack .opt span{
  border-radius:16px;justify-content:space-between;gap:16px;padding:14px 20px;
}
.opts--stack .opt span b{font-weight:600}
.opts--stack .opt span i{font-style:normal;font-size:.875rem;color:#6b5560;font-weight:400}
.opts--stack .opt input:checked + span i{color:rgba(255,255,255,.72)}

/* result rail */
.calcout{position:sticky;top:120px}
.calcout-card{
  background:var(--wine);color:#fff;
  border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob);
  padding:38px 36px 34px;
}
.calcout-card .brow{color:#A8B2E0}
.calc-range{
  font-family:var(--display);font-weight:600;line-height:1;letter-spacing:-0.04em;
  font-size:clamp(2.2rem,3.6vw,2.9rem);font-variant-numeric:tabular-nums;margin:6px 0 4px;
}
.calc-sub{font-size:.9375rem;color:rgba(255,255,255,.72);margin:0 0 22px}
.calc-lines{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:11px}
.calc-lines li{display:flex;justify-content:space-between;gap:16px;font-size:1rem;align-items:baseline}
.calc-lines li span:last-child{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-lines li.is-sum{
  border-top:1px solid rgba(255,255,255,.2);margin-top:6px;padding-top:14px;
}
.calc-month{
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  font-size:.9375rem;color:rgba(255,255,255,.78);
}
.calc-month b{font-family:var(--display);color:#fff}
.calcout .btn{width:100%;justify-content:center;margin-top:22px}
.calc-fine{font-size:.875rem;color:#6b5560;margin:16px 0 0}

@media (max-width:1100px){
  .calcwrap{grid-template-columns:1fr}
  .calcout{position:static}
}
@media (max-width:640px){
  .calcform{padding:32px 24px 30px}
  .calcout-card{padding:30px 24px 28px}
}

/* ═══════════════════════════════════════════════════════════════
   Navigation: services dropdown (desktop) + full menu (mobile)
   ═══════════════════════════════════════════════════════════════ */
.nav-drop{position:relative}
.nav-drop > button{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:500;font-size:1.0625rem;
  color:var(--ink);padding:6px 0;white-space:nowrap;position:relative;
}
.nav-drop > button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:transparent;transition:background .18s ease;
}
.nav-drop > button:hover::after,.nav-drop[data-open="true"] > button::after{background:var(--flare)}
.nav-drop > button svg{transition:transform .18s ease}
.nav-drop[data-open="true"] > button svg{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + 14px);left:-20px;z-index:70;
  min-width:520px;padding:22px;
  background:var(--white);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
  box-shadow:0 22px 50px rgba(36,16,25,.18);
  display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
}
.nav-panel[hidden]{display:none}
.nav-panel a{
  display:block;padding:12px 14px;border-radius:14px;
  transition:background .16s ease;
}
.nav-panel a:hover{background:var(--bone)}
.nav-panel b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:2px}
.nav-panel span{display:block;font-size:.875rem;color:#6b5560;line-height:1.4}

/* mobile menu */
.burger{
  display:none;width:46px;height:46px;border-radius:50%;
  background:var(--bone-deep);color:var(--ink);
  place-items:center;flex:none;
}
.burger:hover{background:var(--flare);color:var(--ink)}
.mnav{
  position:fixed;inset:0;z-index:80;background:var(--bone);
  overflow-y:auto;padding:24px 28px 48px;
}
.mnav[hidden]{display:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.mnav-top img{height:28px;width:auto}
.mnav h2{
  font-family:var(--display);font-size:1rem;font-weight:600;color:var(--indigo);
  margin:26px 0 10px;letter-spacing:0;
}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mnav ul a{
  display:block;padding:13px 0;font-family:var(--display);font-weight:600;
  font-size:1.15rem;border-bottom:1px solid rgba(36,16,25,.1);
}
.mnav ul a:hover{color:var(--flare-text)}
.mnav .btn{width:100%;justify-content:center;margin-top:26px}
.mnav-lang{display:flex;gap:10px;margin-top:20px}
.mnav-lang a{
  flex:1;text-align:center;padding:12px;border-radius:999px;
  border:1.5px solid rgba(36,16,25,.2);font-family:var(--display);font-weight:600;
}
.mnav-lang a[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

@media (max-width:960px){
  .burger{display:grid}
  .nav-drop{display:none}
}
@media (min-width:961px){
  .mnav{display:none !important}
}

/* ═══════════════════════════════════════════════════════════════
   Client feedback page
   ═══════════════════════════════════════════════════════════════ */
.fb-step{
  background:var(--white);
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:44px 46px 40px;margin-top:24px;
}
.fb-step:nth-of-type(even){border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob)}
.fb-head{display:flex;align-items:center;gap:15px;margin-bottom:8px}
.fb-num{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--citron);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1.25rem;
  display:grid;place-items:center;
}
.fb-step h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:0}
.fb-step > p{color:#5d4751;margin:0 0 26px;max-width:58ch}
.fb-field{margin-bottom:22px}
.fb-field:last-child{margin-bottom:0}
.fb-field label{
  display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  margin-bottom:8px;
}
.fb-field .hint{font-weight:400;font-size:.9375rem;color:#6b5560;display:block;margin-top:2px}
.fb-field input[type=text],.fb-field input[type=email],.fb-field textarea{
  width:100%;padding:14px 18px;background:var(--bone);
  border:1.5px solid rgba(36,16,25,.16);border-radius:14px;
  color:var(--ink);font-family:var(--text);font-size:1.0625rem;
  outline:none;transition:border-color .16s ease,background .16s ease;
}
.fb-field textarea{resize:vertical;min-height:110px;line-height:1.55}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--flare);background:var(--white)}
.fb-field input::placeholder,.fb-field textarea::placeholder{color:#9b8790}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* A hint under one label made that column taller, so its input sat lower
   than its neighbour. Put labels on a shared grid row and inputs on the
   next, so both line up whatever the label height. */
@media (min-width:761px){
  .fb-row{grid-template-rows:auto auto;row-gap:8px;margin-bottom:22px}
  .fb-row > .fb-field{display:contents}
  .fb-row > .fb-field:nth-child(1) > label{grid-column:1;grid-row:1;align-self:end}
  .fb-row > .fb-field:nth-child(1) > input{grid-column:1;grid-row:2}
  .fb-row > .fb-field:nth-child(2) > label{grid-column:2;grid-row:1;align-self:end}
  .fb-row > .fb-field:nth-child(2) > input{grid-column:2;grid-row:2}
  .fb-row > .fb-field > label{margin-bottom:0}
}

/* score 0–10 */
.fb-scale{display:flex;flex-wrap:wrap;gap:8px}
.fb-scale label{margin:0}
.fb-scale input{position:absolute;opacity:0;width:0;height:0}
.fb-scale span{
  display:grid;place-items:center;min-width:48px;min-height:48px;
  border:1.5px solid rgba(36,16,25,.2);border-radius:14px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.fb-scale span:hover{border-color:rgba(36,16,25,.5)}
.fb-scale input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.fb-scale input:focus-visible + span{outline:3px solid var(--indigo);outline-offset:3px}
.fb-scale-ends{display:flex;justify-content:space-between;font-size:.875rem;color:#6b5560;margin-top:10px}

/* consent + referral rows */
.fb-check{display:grid;grid-template-columns:24px 1fr;gap:13px;align-items:start;margin-top:18px}
.fb-check input{
  width:24px;height:24px;margin:2px 0 0;accent-color:var(--wa);cursor:pointer;flex:none;
}
.fb-check span{font-size:1rem;line-height:1.5;color:#5d4751}
.fb-check b{color:var(--ink)}
.fb-ref{
  border:1.5px dashed rgba(75,91,166,.4);border-radius:18px;
  padding:22px 24px;margin-bottom:16px;
}
.fb-ref h3{font-size:1.0625rem;margin:0 0 16px;color:var(--indigo)}
.fb-note{
  background:var(--bone-deep);border-radius:18px;padding:22px 24px;margin-top:22px;
  font-size:.9375rem;color:#5d4751;line-height:1.55;
}
.fb-note b{color:var(--ink)}
.fb-submit{margin-top:32px}
.fb-submit .btn{width:100%;justify-content:center;font-size:1.125rem;padding:18px 30px}
.fb-err{color:var(--flare-text);font-size:.9375rem;margin:14px 0 0;font-weight:600}
.fb-done{
  background:var(--wine);color:#fff;
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:56px 48px;text-align:center;
}
.fb-done h2{margin-bottom:14px}
.fb-done p{color:rgba(255,255,255,.8);max-width:46ch;margin:0 auto 26px}

/* share block */
.fb-share{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.fb-link{
  display:flex;align-items:center;gap:12px;flex:1 1 280px;min-width:0;
  background:var(--bone);border:1.5px solid rgba(36,16,25,.16);
  border-radius:999px;padding:8px 8px 8px 20px;
}
.fb-link code{
  /* a flex item will not shrink below its content width without this, so the
     long URL pushed the copy button past the viewport on phones */
  flex:1 1 0;min-width:0;
  font-family:var(--text);font-size:.95rem;color:#5d4751;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:560px){
  .fb-link{flex:1 1 100%;padding:8px 8px 8px 16px}
  .fb-share > .btn{width:100%;justify-content:center}
}
@media (max-width:760px){
  .fb-step{padding:32px 24px 30px}
  .fb-row{grid-template-columns:1fr}
  .fb-done{padding:40px 26px}
}


/* ── referral bonus callout ── */
.fb-bonus{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--citron);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:26px 30px;margin:0 0 28px;
}
.fb-bonus b{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;letter-spacing:-0.035em;flex:none;
}
.fb-bonus span{font-size:1.0625rem;line-height:1.5;max-width:46ch}
@media (max-width:560px){.fb-bonus{padding:22px 22px;gap:14px}}


/* ── display headings: optical left alignment ───────────────────────
   Outfit at display sizes carries a wider left side bearing than Hanken
   Grotesk at body size — measured 5px vs 1px at 76px/19px — so a heading
   reads as indented against the paragraph below it. Pull it back by the
   difference, in em so it scales with the clamp(). ───────────────── */
.desk > h1,
.desk > h2.head-row{margin-left:-0.05em}