/* V7 shared layer (gallery v5, RJ "go all" 17.10): one stylesheet for every V7 page.
   Built from marketing/drafts/site-v7/v7.css + v7-pages.css (in that order); v7-pricing.css: see the end.
   Content that animates in is hidden ONLY under html.v7-js, which each V7 page sets in an inline <head>
   script and removes again after 3 s unless v7.js has run (html.v7-ready). So a page whose script is
   blocked, slow or broken still shows its hero and every section. Pages load it as /v7.css?v=<tag>. */

/* ===== from v7.css (homepage layer, D11 fixes at the end) ===== */
/* V7 overrides: the live homepage, upgraded. Loaded after home-v3.css. */
:root{--v7-navy:#14203b;--v7-navy2:#1a2b4a;--v7-gold:#8a6d3b;--v7-goldl:#d4bfa3;--v7-goldx:#e2cfa8}

/* ---------- hero ---------- */
.hv-hero{background:radial-gradient(900px 500px at 12% -10%,#e2e8f4 0%,#eef1f7 45%,#f8f9fb 100%);overflow:hidden}
.hv-hero h1{font-size:clamp(40px,5.4vw,70px);line-height:1.04}
/* hero text is never hidden, only moved (19.10): a phone counts the largest text as painted only once it is visible, and the
   fade-in cost 1.2 s of LCP on the homepage (3.7 s -> 4.9 s, scripts/v7-lcp.py). The photo keeps its fade. */
/* words rise .2em, not .45em: at .45em the last headline line ran over the subtitle on /uk-sellers (marketing motion pass 19.10) */
.hv-hero h1 .w{display:inline-block;transform:translateY(.2em);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hv-hero.v7-in h1 .w{opacity:1;transform:none}
.hv-hero-copy>*{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.v7-js .hv-hero-copy>*{transform:translateY(16px)}
.hv-hero.v7-in .hv-hero-copy>*{opacity:1;transform:none}
.hv-hero.v7-in .hv-hero-copy>*:nth-child(1){transition-delay:.05s}.hv-hero.v7-in .hv-hero-copy>*:nth-child(2){transition-delay:.15s}.hv-hero.v7-in .hv-hero-copy>*:nth-child(3){transition-delay:.45s}.hv-hero.v7-in .hv-hero-copy>*:nth-child(4){transition-delay:.55s}.hv-hero.v7-in .hv-hero-copy>*:nth-child(5){transition-delay:.65s}.hv-hero.v7-in .hv-hero-copy>*:nth-child(6){transition-delay:.75s}.hv-hero.v7-in .hv-hero-copy>*:nth-child(7){transition-delay:.85s}
.hv-btn-primary{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}.hv-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(20,32,59,.6)}

.v7-art{position:relative;height:580px;min-width:0;transition:opacity 1s .25s cubic-bezier(.2,.7,.2,1),transform 1s .25s cubic-bezier(.2,.7,.2,1)}
/* the hero photo is not hidden either: on /germany it is the phone LCP element, and its fade put LCP at 2.3 s (live 1.1 s) */
html.v7-js .v7-art{transform:translateY(20px) scale(.98)}
.hv-hero.v7-in .v7-art{opacity:1;transform:none}
.v7-photo{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(20,32,59,.45)}
.v7-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.88);animation:v7kb 22s ease-out both}
.v7-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,59,0) 0%,rgba(20,32,59,0) 60%,rgba(20,32,59,.55) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
@keyframes v7kb{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.v7-glass{position:absolute;left:-28px;bottom:20px;width:min(330px,70%);border-radius:12px;padding:12px;color:#fff;background:linear-gradient(160deg,rgba(20,32,59,.86),rgba(20,32,59,.62));border:1px solid rgba(255,255,255,.22);box-shadow:0 50px 100px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(16px);transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);animation:v7float 5s ease-in-out 1}
@keyframes v7float{0%,100%{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg) translateY(-10px)}}
.v7-glass .h{display:flex;justify-content:space-between;align-items:center;font-family:'Montserrat',Arial,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:1.4px;color:var(--v7-goldl)}
.v7-glass .h span{color:#aeb7c7;letter-spacing:1px;font-weight:500}
.v7-glass .r{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;margin-top:6px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-family:'Roboto',sans-serif;font-size:12.5px}
/* two return rows show, the rest are hidden. Counted on .r explicitly (20.10, Codex review): :nth-of-type(n+3) also
   counted the .h heading div, so it hid the SECOND row onward (the French return on /, the combined total on /shopify-sellers). */
.v7-glass .r~.r~.r{display:none}
.v7-pill{height:20px;font-size:9.5px;padding:0 8px}
.v7-glass .h+.r{margin-top:12px}
.v7-pill{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-family:'Montserrat',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.v7-pill.you{background:rgba(226,207,168,.22);color:#f3e3be}.v7-pill.prog{background:rgba(120,160,255,.22);color:#bfd2ff}.v7-pill.done{background:rgba(80,200,140,.22);color:#9fe7c0}
.v7-cyc{position:relative;width:150px;height:22px}
/* one pass, then it rests on the last label (20.10, Codex review: no decorative loop runs past 5 s without a pause
   control). Each label has its own steps, so no label waits at full opacity before its turn (the 19.10 overprint). */
.v7-cyc .v7-pill{position:absolute;right:0;top:0;animation:v7cyc1 4.5s linear both}
.v7-cyc .v7-pill:nth-child(2){animation-name:v7cyc2}.v7-cyc .v7-pill:nth-child(3){animation-name:v7cyc3}
@keyframes v7cyc1{0%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes v7cyc2{0%,30%{opacity:0}33%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes v7cyc3{0%,63%{opacity:0}66%,100%{opacity:1}}
.v7-letter{position:absolute;left:-28px;top:28px;width:min(290px,66%);background:#fff;border-radius:10px;padding:16px 18px;box-shadow:0 30px 60px -24px rgba(20,32,59,.5);display:grid;gap:6px;animation:v7fb 5s ease-in-out 1;border-top:3px solid var(--v7-gold)}
@keyframes v7fb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.v7-letter .lab{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--v7-gold);display:flex;justify-content:space-between;align-items:center}
.v7-letter .lab i{width:9px;height:9px;border-radius:50%;background:var(--v7-goldl);animation:v7pulse 2.2s ease-out 2}
@keyframes v7pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,191,163,.6)}70%{box-shadow:0 0 0 9px rgba(212,191,163,0)}}
.v7-letter .txt{font-family:'Roboto',sans-serif;font-size:13.5px;line-height:1.5;color:#3d4a63}
.v7-letter .kv{display:flex;gap:8px;margin-top:4px}
.v7-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-family:'Roboto',sans-serif;font-size:12px;font-weight:500}
.v7-chip.amber{background:#fff1cc;color:#6b5212}.v7-chip.grey{background:#eef1f5;color:#5c6475}

/* numbers count-up + marquee */
.hv-nums .n b{font-weight:400}
/* marquee: one single row from the first paint, still until v7.js has doubled the list and added .v7-marq (20.10,
   Codex review: the scroll started before the copy existed, so a late script made it jump or clip). One pass, then it
   rests on the copy, which looks exactly like the start; hover or keyboard focus pauses it. Without the script: wrapped. */
.hv-markets ul{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:0}
.hv-markets ul.v7-marq{animation:v7marq 44s linear 1 forwards}
.hv-markets-row:hover ul.v7-marq,.hv-markets-row:focus-within ul.v7-marq{animation-play-state:paused}
.hv-markets li{margin-right:34px;white-space:nowrap}
/* RJ 19.10 "a tiny bit more space" above the stat strip and above the logo belt (+16px desktop, +12px phone).
   The belt's own top padding (home-v3.css) is overridden by .hv-wrap{padding:0 24px} above, hence the double class. */
.hv-hero .hv-nums{margin-top:calc(clamp(48px,6vw,80px) + clamp(12px,1.12vw,16px))}
.hv-wrap.hv-markets{padding-top:clamp(12px,1.12vw,16px);padding-bottom:clamp(12px,1.12vw,16px)}
.hv-markets-row{flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
@keyframes v7marq{to{transform:translateX(-50%)}}
html:not(.v7-js) .hv-markets ul{flex-wrap:wrap;width:auto;justify-content:center;gap:14px 30px}
html:not(.v7-js) .hv-markets li{margin-right:0}
html:not(.v7-js) .hv-markets-row{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}

/* scroll reveals (JS adds .v7-rv, then .on) */
.v7-rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.v7-rv.on{opacity:1;transform:none}
.v7-rv.d1{transition-delay:.12s}.v7-rv.d2{transition-delay:.24s}.v7-rv.d3{transition-delay:.36s}

/* hover lifts on the cards the live page already has */
.hv-card,.hv-float,.adv-sect a,.hv-tools a,.hv-faq-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.adv-sect a:hover,.hv-tools a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,32,59,.35)}

/* ---------- editorial photo band ---------- */
.v7-band{padding:clamp(56px,7vw,96px) 0 0}
.v7-band-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:end}
.v7-band .pic{border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,32,59,.35)}
.v7-band .pic img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.v7-band .pic.on img{transform:scale(1)}
.v7-band .big{height:460px}.v7-band .small{height:300px}
.v7-band .col{display:grid;gap:20px}
.v7-band h2{margin:0}
@media (max-width:760px){.v7-band-grid{grid-template-columns:1fr}.v7-band .big{height:300px}.v7-band .small{height:220px}}

/* ---------- dashboard section: the letter moment ---------- */
.hv-dash-art{position:relative;min-height:520px;background:linear-gradient(135deg,#1a2b4a 0%,#14203b 100%);overflow:hidden}
.hv-dash-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(500px 400px at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(500px 400px at 60% 40%,#000 20%,transparent 75%)}
.v7-de{position:absolute;left:clamp(16px,4vw,40px);top:clamp(16px,4vw,40px);width:72%;max-width:400px;background:#fcfaf5;border-radius:4px;padding:30px 32px;box-shadow:0 50px 90px -40px rgba(0,0,0,.8);font-family:Georgia,serif;color:#2a2a2a;font-size:12.5px;line-height:1.6;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s}
.v7-de .meta{display:flex;justify-content:space-between;font-family:'Roboto',sans-serif;font-size:10.5px;color:#777}
.v7-de b{display:block;margin-top:20px;font-size:13px}
.v7-de p{margin:9px 0 0}
.v7-en{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(16px,4vw,40px);width:72%;max-width:380px;background:#fff;border-radius:10px;padding:22px 24px 18px;box-shadow:0 60px 100px -40px rgba(0,0,0,.85);transition:opacity 1.1s .15s cubic-bezier(.2,.7,.2,1),transform 1.1s .15s cubic-bezier(.2,.7,.2,1)}
.hv-dash-art.on .v7-de{transform:translateX(-24px) rotate(-5deg) scale(.95);filter:brightness(.82)}
html.v7-js .v7-en{opacity:0;transform:translate(40px,80px) rotate(3deg)}
.hv-dash-art.on .v7-en{opacity:1;transform:none}
.v7-en .lab{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--v7-gold);display:flex;justify-content:space-between;align-items:center}
.v7-en .lab span{font-family:'Roboto',sans-serif;font-weight:500;letter-spacing:0;text-transform:none;font-size:12px;color:#5c6475;background:#eef1f5;border-radius:999px;padding:3px 9px}
.v7-en h3{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:22px;line-height:1.15;color:var(--v7-navy2);margin:12px 0 0}
.v7-en .kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #eef1f5;font-family:'Roboto',sans-serif;font-size:13.5px;color:#5c6475}
.v7-en .kv:first-of-type{margin-top:14px}
.v7-en .kv b{color:var(--v7-navy);font-weight:500}
.v7-en .kv .hl{padding:0 5px;background-image:linear-gradient(#f3e3be,#f3e3be);background-repeat:no-repeat;background-size:0 100%;transition:background-size .8s 1.1s cubic-bezier(.2,.7,.2,1)}
.hv-dash-art.on .v7-en .kv .hl{background-size:100% 100%}
@media (max-width:760px){.hv-dash-art{min-height:0;padding:20px}.v7-de,.v7-en{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none}.v7-en{margin-top:14px}}

/* ---------- ask section (RJ decision D9, 17.10: plain navy, no photo behind the headline and form) ---------- */
.v7-ask{position:relative;margin:clamp(40px,6vw,80px) 0 0;background:#14203b;color:#fff;overflow:hidden}
.v7-ask:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#000 0 33.3%,#dd0000 33.3% 66.6%,#ffcc00 66.6% 100%)}
.v7-ask .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.85)}
.v7-ask .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,32,59,.96) 0%,rgba(20,32,59,.85) 48%,rgba(20,32,59,.45) 100%)}
.v7-ask-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,72px);align-items:center}
/* vertical padding only, so the page's own .hv-wrap keeps the side gutter (phone) and cannot zero the top and bottom (inner pages) */
.v7-ask .v7-ask-grid{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.v7-ask .hv-kick{color:var(--v7-goldl)}
.v7-ask h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(32px,4vw,54px);line-height:1.08;margin:14px 0 0;color:#fff;text-wrap:balance}
.v7-ask h2 span{color:var(--v7-goldx)}
.v7-ask p.lead{font-family:'Roboto',sans-serif;font-size:17px;line-height:1.7;color:#c9d0dc;margin:18px 0 0;max-width:46ch}
.v7-form{background:#fff;border-radius:12px;padding:clamp(22px,3vw,32px);display:grid;gap:8px;color:var(--v7-navy);box-shadow:0 40px 80px -36px rgba(0,0,0,.7);font-family:'Roboto',sans-serif}
.v7-form label{font-size:12px;font-weight:500;letter-spacing:.3px;color:#3d4a63}
.v7-form input,.v7-form textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #d7dce5;font:15px 'Roboto',sans-serif;color:var(--v7-navy)}
.v7-form textarea{resize:vertical;line-height:1.5}
.v7-form button{margin-top:8px;height:50px;border:0;border-radius:8px;background:var(--v7-navy2);color:#fff;font:600 14px 'Montserrat',Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .25s}
.v7-form button:hover{background:#22365f;transform:translateY(-1px)}
.v7-form .fine{font-size:12.5px;color:#5f5f5f;line-height:1.5;margin:4px 0 0}

@media (max-width:900px){.v7-art{height:auto;padding-top:0}.v7-photo{position:relative;left:0;height:380px;bottom:auto}.v7-glass{position:relative;left:0;top:auto;width:100%;margin-top:-80px;transform:none;animation:none}.v7-letter{position:relative;left:0;right:auto;top:auto;bottom:auto;width:100%;margin-top:14px;animation:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hv-markets ul{flex-wrap:wrap;width:auto;justify-content:center;gap:14px 30px}.hv-markets li{margin-right:0}.hv-markets-row{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}.v7-rv,.hv-hero-copy>*,.hv-hero h1 .w,.v7-art{opacity:1!important;transform:none!important}.v7-cyc .v7-pill:nth-child(n+2){display:none}.hv-dash-art .v7-en{opacity:1;transform:none}}

/* ---------- QA pass 17.10: small text in the hero cards stays on one line ---------- */
/* card headers: label and tag never wrap; labels are kept short in the markup */
.v7-glass .h{gap:12px;white-space:nowrap}
.v7-glass .h span{flex:none}
.v7-letter .lab{gap:10px;white-space:nowrap}
.v7-letter .lab i{flex:none}
/* rows: the label keeps its line; if label + pill do not fit, the pill drops under the label */
.v7-glass .r{flex-wrap:wrap;row-gap:6px}
.v7-glass .r>span:first-child{flex:1 1 auto;min-width:0}
.v7-glass .r>:not(:first-child){flex:none}
/* the cycling status pill: all three pills share one grid cell, so the box is as wide as the widest */
/* left edges shared (19.10, marketing): with end alignment the narrower labels sat ~40 px right of the widest and the label jumped sideways at each change */
.v7-cyc{display:inline-grid;width:auto;height:22px;justify-items:start}
.v7-cyc .v7-pill{position:static;grid-area:1/1}
/* chips: one line each; the row wraps instead. The letter card is wide enough for two short chips */

.v7-letter .kv{flex-wrap:wrap}
.v7-chip{white-space:nowrap}
/* phone and tablet: the cards sit under the photo at full width, no squeezed half-width cards */
@media (max-width:900px){
  figure.v7-art{margin-left:0;margin-right:0}
  .v7-art .v7-glass{width:auto!important;margin:-56px 14px 0;position:relative}
  /* RJ decision D5 (17.10): the white letter card is hidden on phone and tablet; the returns card stays on the photo */
  .v7-art .v7-letter{display:none}
}
/* a band without its own heading: the two photos sit level, same height */
.v7-band .col:not(:has(h2)) .small{height:460px}
@media (max-width:760px){.v7-band .col:not(:has(h2)) .small{height:220px}}
/* homepage: the dashboard section has no top padding of its own, so after the photo band it touched the photos */
.v7-band + .hv-dash{padding-top:clamp(48px,6vw,88px)}

/* ---------- D11 live-layer fixes (ship with the V7 build) ---------- */
/* Footer: the badge and the "Powered by" name never break inside */
.v2-footer-brand .v2-footer-badge{white-space:nowrap}
.v7-nw{white-space:nowrap}
/* Headings: no lone last word */
h1,h2{text-wrap:balance}
/* a forced line break before an italic second line leaves it a lone word: balance that line on its own */
h1>span[style*="italic"]{display:inline-block;max-width:100%;text-wrap:balance}
/* Hero KPI strips: stack the three figures on a phone so each label gets the full width */
@media (max-width:480px){
  .hero-kpis-strip{grid-template-columns:1fr;gap:16px;padding-top:20px;margin-top:20px}
  .hero-kpis-strip .kpi-num{font-size:1.5rem}
  .hero-kpis-strip .kpi-lbl{font-size:10.5px;letter-spacing:1.1px}
}
/* Phone buttons stay on one line */
@media (max-width:480px){
  .rc2-btn,.btn-hero-primary,.btn-hero-secondary,.btn-cta{white-space:nowrap;letter-spacing:.6px;padding-left:12px;padding-right:12px;font-size:11.5px}
}
/* Filing calendars (inline-styled rows on /germany and /france): label above value on a phone */
@media (max-width:600px){
  .v7-cal>div:first-child{display:none!important}
  .v7-cal>div{flex-direction:column!important;padding:10px 0!important}
  .v7-cal>div>div{flex:none!important;width:auto!important;padding:3px clamp(14px,1.8cqw,22px)!important}
  .v7-cal>div>div:first-child{font-weight:500;padding-top:2px!important}
}
/* Decorative glyphs: kept inside their box on desktop, hidden on phone and tablet */
.lb-mark{right:16px!important}
.rc2-quote{top:12px!important;right:28px!important;font-size:3.4rem!important}
@media (max-width:900px){.lb-mark,.rc2-quote{display:none!important}}
/* Price and unit stay together ("€1,299 / year") */
.v2-plan-price{flex-wrap:wrap}
.v2-plan-price .unit{white-space:nowrap}
@media (max-width:480px){.v2-plan-price .amount,.v2-plan-dark .v2-plan-price .amount,.v2-plan-pro .v2-plan-price .amount{font-size:56px}}
/* FAQ rows shown open carry a minus, not a plus (the markup marks them aria-expanded) */
button[aria-expanded="true"]>span[style*="flex-shrink: 0"]{font-size:0!important}
button[aria-expanded="true"]>span[style*="flex-shrink: 0"]:before{content:"\2212";font-size:22px;line-height:1}
/* Footer newsletter (/de/preise, /fr/tarifs): field above button on a phone */
@media (max-width:520px){
  .v2-footer-newsletter-form{flex-direction:column;align-items:stretch}
  .v2-footer-newsletter-form input,.v2-footer-newsletter-form button{width:100%;flex:none;box-sizing:border-box}
}
/* Short labels and eyebrows that run to two lines: even lines, never one lone word */
.vx-costs-lbl,.adv-check span,.hero-eyebrow,.section-kicker,.rc2-form-label,.sf-scenario-eyebrow,.et-scenario-eyebrow,.hv-nums-in .l,.lf-chip,.type-card .gloss,.lf-claims span{text-wrap:balance}
/* Company details (/about) and the letter example (/finanzamt-letter): label above value on a phone */
@media (max-width:480px){
  .v2-company-dl>div{grid-template-columns:1fr;gap:2px}
  .lf-ex-row{flex-wrap:wrap}
}
.lf-mono{white-space:nowrap}

/* ===== from v7-pages.css (inner pages) ===== */
/* V7 on the inner pages. Loaded after v7.css. Generic hero hooks (.v7-hero, .v7-copy, .v7-art)
   plus the three homepage helpers the band and the ask section rely on. */
.hv-wrap { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.hv-kick { font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #7a5f2f; margin: 0; }
.hv-h2 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; color: #1a2b4a; margin: 0; text-wrap: balance; }
@media (max-width: 760px) { .hv-wrap { padding-left: 16px; padding-right: 16px; } }

/* ---------- hero: headline, copy stagger, art ---------- */
.v7-hero { overflow: hidden; }
.v7-hero h1 { font-size: clamp(36px, 4.3vw, 56px) !important; line-height: 1.06 !important; letter-spacing: -0.4px; }
.v7-hero.v7-wide h1 { font-size: clamp(38px, 5vw, 64px) !important; }
.v7-hero h1 .w { display: inline-block; transform: translateY(.2em); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.v7-hero.v7-in h1 .w { opacity: 1; transform: none; }
html.v7-js .v7-hero .v7-copy > * { transform: translateY(16px); }
.v7-hero .v7-copy > * { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.v7-js .v7-hero.v7-in .v7-copy > * { opacity: 1; transform: none; }
.v7-hero.v7-in .v7-copy > *:nth-child(1) { transition-delay: .05s; }
.v7-hero.v7-in .v7-copy > *:nth-child(2) { transition-delay: .15s; }
.v7-hero.v7-in .v7-copy > *:nth-child(3) { transition-delay: .45s; }
.v7-hero.v7-in .v7-copy > *:nth-child(4) { transition-delay: .55s; }
.v7-hero.v7-in .v7-copy > *:nth-child(5) { transition-delay: .65s; }
.v7-hero.v7-in .v7-copy > *:nth-child(6) { transition-delay: .75s; }
.v7-hero.v7-in .v7-copy > *:nth-child(7) { transition-delay: .85s; }
.v7-hero.v7-in .v7-copy > *:nth-child(8) { transition-delay: .95s; }
.v7-hero.v7-in .v7-art { opacity: 1; transform: none; }
.v7-hero .v7-art { height: 560px; }
.v7-hero .v7-glass { width: min(330px, 70%); }
.v7-glass .r { line-height: 1.3; }
.v7-hero .v7-letter { width: min(266px, 60%); }
.v7-glass .r b { font-weight: 500; white-space: nowrap; color: #fff; }

/* the hero-top family (home-v2.css): widen the second column for the photo */
.hero .hero-inner:has(.v7-art) { max-width: 1168px; }
.hero .hero-top:has(> .v7-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 52px; align-items: center; }
@media (max-width: 1000px) { .hero .hero-top:has(> .v7-art) { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 880px) { .hero .hero-top > .v7-art { display: block; } }

/* hover lifts on the cards the inner pages already have */
.uk-who-card, .sf-who-card, .tt-who-card, .et-who-card, .pl-who-card, .oss-who-card, .sv-tile, .adv-tile, .pv2-card, .pv3-door, .pv3-mini-card, .uk-related a, .sf-related a, .tt-related a, .et-related a, .pl-related a, .oss-related a, .pp-related a, .types .type-card, .lf-ex-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.uk-who-card:hover, .sf-who-card:hover, .tt-who-card:hover, .et-who-card:hover, .pl-who-card:hover, .oss-who-card:hover, .sv-tile:hover, .adv-tile:hover, .pv2-card:hover, .pv3-door:hover, .pv3-mini-card:hover, .uk-related a:hover, .sf-related a:hover, .tt-related a:hover, .et-related a:hover, .pl-related a:hover, .oss-related a:hover, .pp-related a:hover, .types .type-card:hover, .lf-ex-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(20,32,59,.35); }

@media (max-width: 900px) { .v7-hero .v7-art { height: auto; } }
@media (prefers-reduced-motion: reduce) { .v7-hero .v7-copy > *, .v7-hero h1 .w, .v7-hero .v7-art { opacity: 1 !important; transform: none !important; } }

/* QA pass 17.10: a centred strip centres its sentence too (the icon sat centred, the text ran left) */
section[data-screen-label="Product · Credential strip"] > div > span { text-align: center !important; }

/* v7-pricing.css is not merged as a file: its card rules target the mockup's .pz-* plan cards (drawn on the retired
   Standard + Pro packaging). The pricing batch at the end of this file is written against the live v3 markup. */

/* ---------- batch 1 (19.10): the LIVE ask component (ask.js, styled by ask.css) inside the plain-navy V7 section ----------
   The mockup's static form is never shipped. The host is reached through [data-ask], never by its own class:
   ask.css stays the only file that defines the component (tests/test_css_class_ownership.py). */
.v7-ask [data-ask]{background:none;border:0;padding:clamp(56px,8vw,112px) 0;color:#fff}
.v7-ask .ask-kick{color:var(--v7-goldl)}
.v7-ask .ask-copy h2{color:#fff;font-size:clamp(32px,4vw,54px);line-height:1.08;margin:14px 0 16px;text-wrap:balance}
.v7-ask .ask-copy p{color:#c9d0dc;font-size:17px;line-height:1.7;max-width:46ch}
.v7-ask .ask-copy .ask-price{color:#fff}
.v7-ask .ask-copy .ask-price small{color:#c9d0dc}
.v7-ask .ask-copy .ask-letter{font-size:14px}
.v7-ask .ask-copy .ask-letter a{color:var(--v7-goldx)}
.v7-ask .ask-card{color:var(--v7-navy);border-radius:12px;box-shadow:0 40px 80px -36px rgba(0,0,0,.7)}
/* /advisory: text first on a phone, as on every V7 page (advisory.css puts .adv-hero-art first under 760px; with a
   photo there the headline fell a full screen down) */
.v7-hero .adv-hero-art{order:0}
/* the figure sits in advisory.css's flex wrapper, which gave it 0 width at 1440 (marketing hero check 19.10) */
.v7-hero .adv-hero-art .v7-art{flex:1 1 auto;width:100%}
/* the letter card shrinks with the photo column; its gold label cannot wrap, so never narrower than its longest word
   (/advisory spilled 40px at 1024, marketing 19.10) */
.v7-hero .v7-letter{min-width:min-content}

/* ---------- pricing batch (19.10): /pricing, /de/preise, /fr/tarifs ----------
   From the gallery's v7-pricing.css, rewritten for the live v3 cards (Standard + the extras card). The extras card
   keeps its own cream look; only Standard gets the white card and the filled navy first button.
   v7-pricing.js is not shipped: v7.js already reveals these sections below the first screen. */
/* /pricing: the plan row */
.pv3-plans .pv2-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:stretch}
.pv3-plans .pv2-cards>.pv2-card{position:relative;overflow:hidden;border-radius:14px;box-shadow:0 18px 50px -32px rgba(20,32,59,.35);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.pv3-plans .pv2-cards>.pv2-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#8a6d3b,#d4bfa3)}
.pv3-plans .pv2-cards>.pv2-card:not(.is-extras){border:1px solid #e3ddd0;background:#fff}
.pv3-plans .pv2-cards>.pv2-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,32,59,.38)}
.pv3-plans .pv2-card:not(.is-extras) .pv2-btn-pair>.pv2-btn:first-child,.pv3-plans .pv2-card:not(.is-extras)>a.pv2-btn{background:#1a2b4a;color:#fff;border-color:#1a2b4a}
.pv3-plans .pv2-card .pv2-btn{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pv3-plans .pv2-card .pv2-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(20,32,59,.6)}
/* the shared V7 headline size would push the two price cards off the first phone screen (pricing-v3.css: 27px) */
@media (max-width:700px){.pv3-hero.v7-hero h1{font-size:27px !important}}
/* /de/preise, /fr/tarifs: the plan row (v2-pricing-grid is used on these two pages only) */
.v2-container>.v2-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,24px);max-width:980px;margin-left:auto;margin-right:auto}
.v2-pricing-grid>.v2-plan-main,.v2-pricing-grid>.v2-plan-pro{border-radius:14px;box-shadow:0 18px 50px -32px rgba(20,32,59,.35);position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.v2-pricing-grid>:is(.v2-plan-main,.v2-plan-pro):hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,32,59,.38)}
.v2-pricing-grid>.v2-plan-main{padding:clamp(24px,3vw,40px);border:1px solid #e3ddd0}
.v2-pricing-grid>.v2-plan-main::before{height:3px;background:linear-gradient(90deg,#8a6d3b,#d4bfa3)}
.v2-pricing-grid .v2-plan-title{font-size:22px;line-height:1.3;margin-bottom:18px;text-wrap:balance}
.v2-pricing-grid>.v2-plan-main .v2-plan-cta{margin-top:auto;background:#1a2b4a;color:#fff}
/* margin-top:auto is 0 when the card is not stretched (one column on phone): the list keeps the live 32px above the button */
.v2-pricing-grid>.v2-plan-main .v2-plan-features{margin-bottom:32px}
.v2-container>.pl-box{max-width:980px;box-sizing:border-box}
/* add-ons: the first four groups as numbered category cards, the rest stays a list under them */
.pz-addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(14px,1.8vw,20px);margin-top:clamp(22px,2.6vw,32px);text-align:left;counter-reset:pzcat}
.pz-cat{position:relative;background:#fff;border:1px solid #e3ddd0;border-radius:14px;padding:22px clamp(18px,2.2vw,26px) 8px;box-shadow:0 18px 50px -34px rgba(20,32,59,.35);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;counter-increment:pzcat}
.pz-cat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,32,59,.35)}
.pz-cat-h{display:flex;align-items:baseline;gap:12px;margin:0;padding-bottom:14px;border-bottom:1px solid #eee9e0;font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:21px;line-height:1.2;color:#1a2b4a}
/* numbered by CSS, so a category that is absent never leaves a gap in the count */
.pz-cat-h::before{content:counter(pzcat,decimal-leading-zero);font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;color:#7a5f2f}
.pz-cat .pv2-addon{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 0;background:transparent !important;border-bottom:1px solid #f2efe8}
.pz-cat .pv2-addon:last-child{border-bottom:0}
.pz-cat .pv2-addon>div:first-child{max-width:none}
.pz-cat .pv2-addon-price{white-space:normal}
.pz-cat .pv2-addon-name{font-size:15.5px}
/* the price column is capped: an unbroken long price ("299 € pro Jahr oder 49 € je Meldung") squeezed the name into it */
.pz-cat .v2-addons-row{grid-template-columns:minmax(0,1fr) fit-content(45%);gap:6px 16px;padding:16px 0;align-items:baseline;border-bottom:1px solid #f2efe8}
.pz-cat .v2-addons-row .name{hyphens:auto;overflow-wrap:break-word}  /* "Dauerfristverlängerung" ran into its price at 390 */
.pz-cat .v2-addons-row:last-child{border-bottom:0}
.pz-cat .v2-addons-row .desc{grid-column:1/-1;grid-row:2;color:#5f5f5f}
.pz-cat .v2-addons-row .amt{font-family:'Marcellus',Georgia,serif;font-size:16px;font-weight:400;text-align:right}
.pz-rest{margin-top:clamp(16px,2vw,22px) !important}
.pz-rest .v2-addons-row .amt{font-family:'Marcellus',Georgia,serif;font-size:16px;font-weight:400}
.pz-rest .v2-addons-row .desc{color:#5f5f5f}
.v2-container>.pz-addons,.v2-container>.pz-rest{max-width:980px;margin-left:auto;margin-right:auto}
/* the group headings under the cards carry an inline margin, so the centring needs !important to line up with the list */
.v2-container>.pz-addons~h3{max-width:980px;margin-left:auto !important;margin-right:auto !important}
@media (max-width:700px){
  .pz-cat{padding:18px 16px 4px}
  .pz-cat .v2-addons-row .amt{text-align:right}
  /* phone: one 16px gutter instead of the section's 24px plus the container's 24px */
  .v2-section:has(.v2-pricing-grid,.pz-addons){padding-left:0;padding-right:0}
  .v2-section:has(.v2-pricing-grid,.pz-addons)>.v2-container{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){.pv3-plans .pv2-card,.pv3-plans .pv2-card:hover,.v2-pricing-grid>*,.v2-pricing-grid>*:hover,.pz-cat,.pz-cat:hover{transition:none;transform:none}}
/* a hero photo that would land on the first phone screen and become the LCP element: desktop only. /about's studio
   photo took the phone LCP from 1.33 to 2.96 s (390, throttled, 19.10); hidden, its lazy image is never fetched */
@media (max-width:900px){.v7-hero .v7-art.v7-desk-only{display:none}}  /* beats .hero .hero-top > .v7-art{display:block} */