@font-face{font-family:'TPI Text';src:url('../fonts/carlito-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TPI Text';src:url('../fonts/carlito-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'TPI Text';src:url('../fonts/carlito-bold.woff') format('woff');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'TPI Sans';src:url('../fonts/liberationsans-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TPI Sans';src:url('../fonts/liberationsans-bold.woff') format('woff');font-weight:600 800;font-style:normal;font-display:swap}
/* TPI.Val theme (derived from the Toupie theme) — all colours/fonts/sizes come from CSS variables emitted from theme.json + admin overrides */
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--font-size-base,16px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--color-ink);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}
/* overflow-wrap: a single German compound heading can be wider than a phone —
   "Datenschutzerklärung" at the 2rem clamp floor is 404px at a 390px viewport. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--font-weight-heading,700);letter-spacing:var(--letter-spacing-heading,-.02em);line-height:1.15;margin:0 0 .5em;color:var(--color-ink);overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,4.5vw,3.4rem)}h2{font-size:clamp(1.5rem,3vw,2.2rem)}h3{font-size:1.25rem}h4{font-size:1.05rem}
p{margin:0 0 1em}
.lead{font-size:1.15rem;color:var(--color-muted);max-width:62ch}
.muted{color:var(--color-muted)}.small{font-size:.875rem}.center{text-align:center}.center .lead{margin-inline:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--color-primary);margin-bottom:.6em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--color-surface);padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:var(--layout-max);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.narrow{max-width:var(--layout-narrow);margin-inline:auto}
.section{padding:clamp(40px,7vw,88px) 0}
.section.tight{padding:clamp(24px,4vw,48px) 0}
.section.soft{background:var(--color-bg-soft)}
.section-head{max-width:720px;margin-bottom:clamp(24px,4vw,44px)}
.section-head.center{margin-inline:auto}
/* Heading on the left, "see all" button on the right. Must wrap: the button is
   white-space:nowrap, and at 390px "Toutes les actualités →" beside the French
   heading pushed the page 3px wide. */
.section-head.split{display:flex;justify-content:space-between;align-items:end;gap:12px 20px;flex-wrap:wrap;max-width:none}
.section-head.split>.btn{flex:none}
/* A grid item's min-width defaults to auto — its min-content size — so one long
   unbreakable line (a code terminal, a wide <pre>) grew the TRACK instead of
   scrolling inside it, and the whole page grew with it: the home hero was 108px
   wider than a 390px viewport and /docs/api-reference was 651px wider. Letting
   these items shrink below their content is what makes the pre/table scroll
   containers inside them do their job. */
.hero-grid>*,.two-col>*,.docs-layout>*,.account-layout>*,.contact-grid>*{min-width:0}
/* Same reason, one level down: the terminal wraps the <pre> that scrolls. */
.terminal,.terminal>pre{max-width:100%}
.icon{width:20px;height:20px;vertical-align:-4px;flex:none}
code,kbd,pre{font-family:var(--font-mono)}
:not(pre)>code{background:var(--color-bg-soft);border:1px solid var(--color-line);padding:.1em .4em;border-radius:6px;font-size:.9em}
pre{background:var(--color-code-bg);color:var(--color-code-ink);padding:16px 18px;border-radius:var(--radius-sm);overflow:auto;font-size:.88rem;line-height:1.55;position:relative}
/* Same scroll shadows as .table-wrap: a wide code line clips at the edge and
   nothing else says it can be scrolled. The "local" covers ride with the content
   and hide the "scroll" shadow once that end is reached. */
pre{background-image:
  linear-gradient(to right,var(--color-code-bg) 40%,color-mix(in srgb,var(--color-code-bg) 0%,transparent)),
  linear-gradient(to left,var(--color-code-bg) 40%,color-mix(in srgb,var(--color-code-bg) 0%,transparent)),
  radial-gradient(farthest-side at 0 50%,rgba(28,27,25,.14),transparent),
  radial-gradient(farthest-side at 100% 50%,rgba(28,27,25,.14),transparent);
  background-position:0 0,100% 0,0 0,100% 0;
  background-size:26px 100%,26px 100%,12px 100%,12px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.copy-btn{position:absolute;top:8px;right:8px;background:rgba(152,67,42,.10);color:inherit;border:0;border-radius:6px;padding:4px 8px;font-size:.75rem;cursor:pointer;opacity:0;transition:.15s}
pre:hover .copy-btn{opacity:1}
hr{border:0;border-top:1px solid var(--color-line);margin:2rem 0}
blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:4px solid var(--color-primary);background:var(--color-bg-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--color-muted)}
/* A scrolling table must (a) actually clip and (b) say so.
   position:relative is load-bearing, not cosmetic: the .sr-only spans inside the
   pricing comparison are position:absolute, so without a positioned ancestor their
   containing block is the page — they escaped this overflow:auto box entirely and
   stretched the document to 668px at a 390px viewport.
   The two background layers are the classic scroll shadows: the "local" cover
   scrolls with the content and hides the "scroll" shadow when that edge is reached,
   so the shadow is visible only while there is more table to scroll to. */
.table-wrap{--table-bg:var(--color-bg);overflow-x:auto;margin:1.2em 0;position:relative;
  background:
    linear-gradient(to right,var(--table-bg) 40%,color-mix(in srgb,var(--table-bg) 0%,transparent)) 0 0/28px 100% no-repeat local,
    linear-gradient(to left,var(--table-bg) 40%,color-mix(in srgb,var(--table-bg) 0%,transparent)) 100% 0/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(20,22,30,.22),transparent) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(20,22,30,.22),transparent) 100% 0/12px 100% no-repeat scroll}
.section.soft .table-wrap,.legal-lang .table-wrap{--table-bg:var(--color-bg-soft)}
.table-wrap:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--color-line);vertical-align:top}
th{font-weight:600;background:var(--color-bg-soft)}
/* German compounds ("Kommentarabschnitt", "Zeichenformatierung") are longer than the
   column they land in: the docs options table overran its prose column by 28px in de
   and clipped its last column. Buying the 28px back from horizontal cell padding
   (12px → 8px across five columns = 40px) fixes the allocation without breaking a
   single word. hyphens:auto (html[lang] is always set) and break-word are the
   backstop, and neither applies inside a code span — an API reference whose options
   read "tracke dChange s" is worse than the overflow it avoids. Should a future
   string still overrun, the wrapper scrolls and the scroll shadows above say so. */
.prose th,.prose td{padding:10px 8px;hyphens:auto;overflow-wrap:break-word}
.prose th code,.prose td code{hyphens:none;overflow-wrap:break-word;word-break:normal}
.light-only{display:inline}.dark-only{display:none}
:root[data-theme=dark] .light-only{display:none}:root[data-theme=dark] .dark-only{display:inline}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .light-only{display:none}:root:not([data-theme=light]) .dark-only{display:inline}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;line-height:1.2;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-ink)}
.btn.accent{background:var(--color-accent);border-color:var(--color-accent);color:#1a1a1a}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--color-bg-soft);box-shadow:none;transform:none}
.btn.outline{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}
.btn.lg{padding:14px 26px;font-size:1.05rem}.btn.sm{padding:6px 12px;font-size:.85rem}.btn.block{width:100%;justify-content:center}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.danger{color:var(--color-err);border-color:var(--color-err)}
.icon-btn{background:none;border:0;color:inherit;cursor:pointer;padding:8px;border-radius:50%;display:inline-flex;line-height:0}
.icon-btn:hover{background:var(--color-bg-soft)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--color-bg-soft);color:var(--color-muted);border:1px solid var(--color-line)}
.pill.ok{color:var(--color-ok);border-color:color-mix(in srgb,var(--color-ok) 40%,transparent);background:color-mix(in srgb,var(--color-ok) 10%,transparent)}
.pill.primary{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent);background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.pill.warn{color:var(--color-warn)}.pill.accent{color:#7a4d00;background:color-mix(in srgb,var(--color-accent) 22%,transparent);border-color:transparent}
/* header */
.announce{background:var(--color-primary);color:#fff;text-align:center;font-size:.88rem;padding:7px 12px}.announce a{color:inherit;text-decoration:underline}
.site-header{position:sticky;top:0;z-index:40;height:var(--layout-header-height);border-bottom:1px solid var(--color-line);background:var(--color-bg)}
html[data-header=glass] .site-header{background:color-mix(in srgb,var(--color-bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.header-inner{display:flex;align-items:center;gap:14px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--color-ink);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none!important}
.brand-logo{height:36px;width:auto}
/* Tight enough that the longest translated nav (fr) still fits the 1180px wrap:
   at 12px padding + 4px gaps the French labels overran it by ~40px and squeezed
   the brand until "ToupieSoft" collided with the first menu item. */
.nav{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end;min-width:0}
.nav-list{list-style:none;display:flex;gap:2px;margin:0 auto 0 0;padding:0;flex:0 0 auto}
.nav-list>li{position:relative}
.nav-list a{display:block;padding:8px 9px;border-radius:999px;color:var(--color-ink);font-weight:500;font-size:.95rem;white-space:nowrap}
.nav-list a:hover{background:var(--color-bg-soft);text-decoration:none}
.nav-list a[aria-current=page]{color:var(--color-primary);font-weight:600}
.nav-list .sub{position:absolute;top:100%;left:0;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);list-style:none;padding:6px;margin:4px 0 0;min-width:200px;display:none}
.nav-list .has-children:hover .sub,.nav-list .has-children:focus-within .sub{display:block}
.nav-actions{display:flex;align-items:center;gap:3px;min-width:0;flex:0 1 auto}
/* The header is one row — brand, menu, actions — and exactly ONE thing in it is
   allowed to shrink: the profile name in the account button, which is user input
   of arbitrary length. Everything else keeps its natural width, so a long name
   can no longer squeeze the brand until "ToupieSoft" collides with the first menu
   item (a 120-character name did exactly that at 1280 px). The name is clipped
   with an ellipsis; it is shown in full on the account page. */
.header-inner>.brand{flex:0 0 auto}
.brand-name{white-space:nowrap}
.nav-actions>*{flex:0 0 auto}
.nav-actions .btn.ghost{flex:0 1 auto;min-width:0}
.nav-actions .btn.ghost>span{display:block;min-width:0;max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--color-line);border-radius:10px;padding:8px;color:inherit;cursor:pointer}
.langswitch{position:relative}
.langswitch-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font:inherit;font-weight:600;padding:8px 10px;border-radius:999px;cursor:pointer}.langswitch-btn:hover{background:var(--color-bg-soft)}
.langmenu{position:absolute;right:0;top:100%;margin:4px 0 0;padding:6px;list-style:none;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);min-width:160px;z-index:50}
.langmenu a{display:block;padding:8px 12px;border-radius:8px;color:var(--color-ink)}.langmenu a:hover{background:var(--color-bg-soft);text-decoration:none}.langmenu a[aria-current=true]{font-weight:700;color:var(--color-primary)}
.icon.moon{display:none}:root[data-theme=dark] .icon.moon{display:inline}:root[data-theme=dark] .icon.sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .icon.moon{display:inline}:root:not([data-theme=light]) .icon.sun{display:none}}
/* The desktop nav needs the full 1180px wrap: below ~1150px the longest
   translated menus (fr, de) pushed the header past the viewport, so the
   existing mobile nav takes over earlier. */
@media (max-width:1150px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:var(--layout-header-height) 0 auto 0;background:var(--color-surface);border-bottom:1px solid var(--color-line);flex-direction:column;align-items:stretch;padding:14px clamp(16px,4vw,32px) 20px;display:none;max-height:calc(100vh - var(--layout-header-height));overflow:auto;box-shadow:var(--shadow-card)}
  .nav.open{display:flex}
  .nav-list{flex-direction:column;margin:0 0 10px}
  .nav-list .sub{position:static;display:block;box-shadow:none;border:0;padding-left:14px}
  .nav-actions{flex-wrap:wrap}
  .nav-actions .btn.ghost>span{max-width:22ch}
}
/* footer */
.site-footer{border-top:1px solid var(--color-line);background:var(--color-bg-soft);margin-top:40px;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-bottom:12px}
.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin:6px 0}.footer-links a{color:var(--color-ink)}
.footer-badge{display:inline-block;border:1px solid var(--color-line);border-radius:999px;padding:4px 12px;font-size:.8rem;background:var(--color-surface)}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--color-line);margin-top:32px;padding-top:18px;font-size:.9rem;color:var(--color-muted)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
/* hero */
.hero{padding:clamp(48px,9vw,112px) 0 clamp(32px,6vw,72px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:80%;background:radial-gradient(60% 60% at 75% 30%,color-mix(in srgb,var(--color-amber) 34%,transparent),transparent 70%),radial-gradient(50% 50% at 15% 55%,color-mix(in srgb,var(--color-coral) 16%,transparent),transparent 70%);z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lead{font-size:1.25rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.hero-note{font-size:.9rem;color:var(--color-muted);display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--color-line);background:var(--color-surface)}
.hero-visual img{display:block;width:100%}
.terminal{background:var(--color-code-bg);color:var(--color-code-ink);border-radius:var(--radius-md);padding:18px 20px;font-family:var(--font-mono);font-size:.9rem;line-height:1.6;box-shadow:var(--shadow-card)}
.terminal .dots{display:flex;gap:6px;margin-bottom:12px}.terminal .dots i{width:10px;height:10px;border-radius:50%;background:#3a3f4d}.terminal .dots i:nth-child(1){background:var(--color-coral)}.terminal .dots i:nth-child(2){background:var(--color-orange)}.terminal .dots i:nth-child(3){background:var(--color-amber)}
.terminal .c{color:#8A7F78}.terminal .k{color:var(--color-primary)}.terminal .s{color:#9A5A12}.terminal .m{color:#8A7F78}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
/* logos / stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.stat{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:18px 20px}
.stat b{display:block;font-size:1.8rem;font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-primary)}
/* "Laufzeitabhängigkeiten" is wider than a two-up stat tile at 390px. */
.stat span{color:var(--color-muted);font-size:.9rem;hyphens:auto;overflow-wrap:break-word}
/* feature grid */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.feature{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:22px 22px 18px;box-shadow:var(--shadow-card)}
.feature .ficon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);margin-bottom:12px}
.feature h3{margin-bottom:.3em}.feature p{color:var(--color-muted);margin:0}
/* format matrix */
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.fmt{border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--color-surface);display:flex;flex-direction:column;gap:2px}
.fmt b{font-family:var(--font-mono);font-size:1rem}.fmt span{font-size:.8rem;color:var(--color-muted)}
.fmt.tier-business{border-color:color-mix(in srgb,var(--color-accent) 60%,transparent)}
.fmt .tier{margin-top:4px;align-self:flex-start}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.card-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:6px}
.card-body h3{margin:0}.card-body h3 a{color:var(--color-ink)}
.card-media{aspect-ratio:16/10;background:var(--color-bg-soft);overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-meta{font-size:.82rem;color:var(--color-muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card-foot{padding:0 20px 16px;margin-top:auto}
.tags{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:6px 0 0}
.tags a{font-size:.78rem;padding:2px 9px;border-radius:999px;background:var(--color-bg-soft);color:var(--color-muted);border:1px solid var(--color-line)}
/* page */
.page-head{padding:clamp(36px,6vw,64px) 0 clamp(20px,3vw,32px)}
.page-head h1{margin-bottom:.3em}
.breadcrumbs ol{list-style:none;padding:0;margin:0 0 14px;display:flex;gap:6px;flex-wrap:wrap;font-size:.85rem;color:var(--color-muted)}
.breadcrumbs li+li::before{content:"/";margin-right:6px;opacity:.6}.breadcrumbs a{color:var(--color-muted)}
.prose{font-size:1.04rem;line-height:1.7;overflow-wrap:break-word}
/* Bare URLs and long e-mail addresses in the legal pages are single unbreakable
   tokens: the de imprint pushed the page to 443px at a 390px viewport. */
.prose a{overflow-wrap:anywhere}
.prose>*+*{margin-top:1em}.prose h2{margin-top:2em;padding-top:.4em}.prose h3{margin-top:1.6em}.prose ul,.prose ol{padding-left:1.4em}.prose li+li{margin-top:.3em}
.prose img{border-radius:var(--radius-sm);border:1px solid var(--color-line)}
.prose h2 a.anchor,.prose h3 a.anchor{opacity:0;margin-left:6px;font-weight:400;color:var(--color-muted)}.prose h2:hover a.anchor,.prose h3:hover a.anchor{opacity:1}
.prose .callout{border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-sm);padding:12px 16px;background:var(--color-bg-soft)}
/* docs */
/* padding-block, not the padding shorthand: these grids also carry .wrap, whose
   horizontal padding the shorthand silently reset to 0 — so on a phone the docs
   text and its code blocks sat flush against both screen edges.
   Keeping that padding would have cost the grid 64px and pushed the German options
   table back out of its column, so the docs wrap is widened by exactly the padding
   it now pays: the content box is still the full 1180px on a wide screen, and on a
   narrow one the viewport constrains it as before. */
.docs-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 200px;gap:40px;align-items:start;padding-block:32px 64px;max-width:calc(var(--layout-max) + 64px)}
.docs-side{position:sticky;top:calc(var(--layout-header-height) + 16px);max-height:calc(100vh - var(--layout-header-height) - 32px);overflow:auto;font-size:.92rem}
.docs-side h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin:18px 0 6px}.docs-side h2:first-child{margin-top:0}
.docs-side ul{list-style:none;padding:0;margin:0}.docs-side li a{display:block;padding:5px 10px;border-radius:8px;color:var(--color-ink)}
.docs-side li a:hover{background:var(--color-bg-soft);text-decoration:none}.docs-side li a[aria-current=page]{background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);font-weight:600}
.docs-side li li a{padding-left:22px;font-size:.88rem}
.toc{position:sticky;top:calc(var(--layout-header-height) + 16px);font-size:.85rem}
.toc h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted)}.toc ul{list-style:none;padding:0;margin:0;border-left:1px solid var(--color-line)}
.toc a{display:block;padding:3px 10px;color:var(--color-muted);border-left:2px solid transparent;margin-left:-1px}.toc a.on{color:var(--color-primary);border-color:var(--color-primary)}.toc li.l3 a{padding-left:22px}
.docs-search{margin-bottom:14px}.docs-search input{width:100%;padding:9px 12px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-surface);color:inherit;font:inherit}
.docs-results{list-style:none;padding:0;margin:6px 0 0;background:var(--color-surface);border:1px solid var(--color-line);border-radius:10px;overflow:hidden}.docs-results li a{display:block;padding:8px 12px}.docs-results li+li{border-top:1px solid var(--color-line)}.docs-results small{display:block;color:var(--color-muted)}
.doc-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--color-line)}
.doc-nav a{display:flex;flex-direction:column;padding:12px 16px;border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-ink);min-width:40%;overflow-wrap:break-word;hyphens:auto}
.doc-nav a small{color:var(--color-muted)}.doc-nav a.next{text-align:right;margin-left:auto}
.docs-mobile-toggle{display:none}
/* Two-column variant (docs index, legal pages): sidebar + content, no "on this page"
   rail. Stated as a min-width rule rather than the inline style these two used to
   carry, because an inline grid-template-columns beats every stylesheet rule —
   including the mobile one below. That is why the docs index still laid a 250px
   sidebar beside its cards at a 390px viewport (546px wide) and the legal pages
   squeezed their text into 98px beside an already-hidden sidebar. Callers vary the
   rail width with --docs-side-w, which an inline style may set safely. */
@media (min-width:821px){.docs-layout.no-toc{grid-template-columns:var(--docs-side-w,250px) minmax(0,1fr)}}
@media (max-width:1100px){.docs-layout{grid-template-columns:230px minmax(0,1fr)}.toc{display:none}}
@media (max-width:820px){.docs-layout{grid-template-columns:1fr}.docs-side{position:static;max-height:none;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:14px}.docs-side:not(.open){display:none}.docs-mobile-toggle{display:inline-flex;margin-bottom:12px}}
/* faq */
.faq-list{max-width:820px}
.faq-cat{margin:32px 0 10px;font-size:1.1rem;color:var(--color-muted)}
details.faq{border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);margin-bottom:10px}
details.faq summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.faq summary::after{content:"+";font-size:1.3rem;color:var(--color-muted);line-height:1}details.faq[open] summary::after{content:"–"}
details.faq .faq-body{padding:0 18px 16px;color:var(--color-muted)}
/* testimonials (google-review style) */
.reviews-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:18px 22px;margin-bottom:22px;box-shadow:var(--shadow-card)}
.reviews-head .score{font-size:1.6rem;font-weight:800}
.stars{color:var(--color-accent);letter-spacing:1px;font-size:1rem;white-space:nowrap}
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.review{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:18px 20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-card)}
.review-author{display:flex;align-items:center;gap:10px}
.avatar{width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover}
.review-author b{display:block;line-height:1.2}.review-author small{color:var(--color-muted)}
.review p{margin:0;color:var(--color-ink)}.review .src{font-size:.78rem;color:var(--color-muted);margin-top:auto}
.verified{color:var(--color-primary)}
/* pricing */
.currency-switch{display:inline-flex;border:1px solid var(--color-line);border-radius:999px;padding:3px;gap:2px;background:var(--color-surface)}
.currency-switch button{border:0;background:none;padding:6px 14px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;color:var(--color-muted)}
.currency-switch button.on{background:var(--color-primary);color:#fff}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;align-items:stretch}
@media (max-width:1100px){.plans{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.plan{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:24px 22px 20px;display:flex;flex-direction:column;gap:14px;position:relative;box-shadow:var(--shadow-card)}
.plan.highlight{border-color:var(--color-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 12%,transparent),var(--shadow-card)}
.plan .ribbon{position:absolute;top:-12px;left:22px;background:var(--color-primary);color:var(--color-primary-ink);font-size:.75rem;font-weight:700;padding:3px 12px;border-radius:999px}
.plan h3{margin:0;font-size:1.3rem}.plan .tagline{color:var(--color-muted);min-height:2.6em;margin:0}
/* The amount is wider in some locales than in others: ICU renders "€22,000" for
   en but "EUR 22'000" for de/fr/it-CH. Wrap instead of overflowing the card, and
   let the figure scale down a little so it still fits on one line. */
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;row-gap:0}.price b{font-size:clamp(1.6rem,2.4vw,2.4rem);font-family:var(--font-display);letter-spacing:-.03em;min-width:0}.price span{color:var(--color-muted)}
.price .from{font-size:.95rem;color:var(--color-muted)}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.plan li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem}.plan li .icon{color:var(--color-ok);margin-top:2px}
.plan li.no{color:var(--color-muted)}.plan li.no .icon{color:var(--color-line)}
.plan .plan-cta{margin-top:auto}
.compare th:first-child,.compare td:first-child{position:sticky;left:0;background:var(--color-surface)}
.compare td{text-align:center}.compare td:first-child{text-align:left}
.compare .icon.ok{color:var(--color-ok)}.compare .icon.no{color:var(--color-line)}
/* forms */
.form{display:grid;gap:14px}
.form label,.form .field>label{display:block;font-weight:600;font-size:.92rem}
.form label>span.req{color:var(--color-err)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-surface);color:var(--color-ink);font:inherit;font-size:1rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid color-mix(in srgb,var(--color-primary) 40%,transparent);border-color:var(--color-primary)}
.form textarea{min-height:120px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem;cursor:pointer}.form .check input{margin-top:4px}
.form .help{font-size:.82rem;color:var(--color-muted);margin:4px 0 0}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .hp{position:absolute;left:-9999px;opacity:0}
.form-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:clamp(20px,4vw,32px);box-shadow:var(--shadow-card)}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid transparent;font-size:.95rem}
.flash-success{background:color-mix(in srgb,var(--color-ok) 12%,transparent);color:var(--color-ok)}.flash-error{background:color-mix(in srgb,var(--color-err) 10%,transparent);color:var(--color-err)}.flash-warning{background:color-mix(in srgb,var(--color-warn) 12%,transparent);color:var(--color-warn)}.flash-info{background:var(--color-bg-soft);color:var(--color-ink)}
.auth-wrap{max-width:460px;margin:clamp(30px,6vw,70px) auto}
.auth-wrap h1{font-size:1.7rem}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
/* account */
.account-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding-block:32px 64px;align-items:start}
.account-nav{list-style:none;padding:0;margin:0;position:sticky;top:calc(var(--layout-header-height) + 16px)}
.account-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--color-ink)}.account-nav a:hover{background:var(--color-bg-soft);text-decoration:none}.account-nav a[aria-current=page]{background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);font-weight:600}
.panel{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:22px 24px;margin-bottom:18px}
.panel h2{font-size:1.2rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.95rem}.kv dt{color:var(--color-muted)}.kv dd{margin:0}
.quota{height:8px;background:var(--color-bg-soft);border-radius:999px;overflow:hidden;border:1px solid var(--color-line)}.quota i{display:block;height:100%;background:var(--color-primary)}
@media (max-width:820px){.account-layout{grid-template-columns:1fr}.account-nav{position:static;display:flex;flex-wrap:wrap;gap:4px}}
/* news */
.post-head{padding:clamp(36px,6vw,64px) 0 20px}
.post-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--color-muted);font-size:.9rem;align-items:center}
.post-body{max-width:var(--layout-narrow)}
.version-badge{font-family:var(--font-mono);font-weight:700;background:var(--color-primary);color:#fff;padding:2px 8px;border-radius:6px;font-size:.85rem}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--color-line)}
.timeline li{position:relative;padding:0 0 26px 26px}.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--color-primary);border:2px solid var(--color-bg)}
/* showcase */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filter-bar a{padding:6px 14px;border-radius:999px;border:1px solid var(--color-line);color:var(--color-ink);font-size:.9rem;background:var(--color-surface)}
.filter-bar a.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.showcase-card .card-media{aspect-ratio:4/3;background:var(--color-bg-soft);display:grid;place-items:center;padding:14px}.showcase-card .card-media img{width:auto;max-width:100%;max-height:100%;height:auto;object-fit:contain;box-shadow:0 4px 18px rgba(0,0,0,.18);border-radius:3px}
.metric-row{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--color-muted)}.metric-row b{color:var(--color-ink)}
.compare-slider{position:relative;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--color-line);background:var(--color-bg-soft);user-select:none;touch-action:none}
.compare-slider img{display:block;width:100%;height:auto;pointer-events:none}
.compare-slider .after{position:absolute;inset:0;width:50%;overflow:hidden}.compare-slider .after img{width:var(--w);max-width:none}
.compare-slider .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--color-primary);cursor:ew-resize}
.compare-slider .handle::after{content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-size:16px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.compare-slider .label{position:absolute;top:10px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--color-ink);border:1px solid var(--color-line);font-size:.75rem;font-weight:600}.compare-slider .label.l{left:10px}.compare-slider .label.r{right:10px}
.pages-strip{display:flex;gap:10px;overflow-x:auto;padding:6px 0 10px}.pages-strip img{height:150px;border:1px solid var(--color-line);border-radius:4px;cursor:pointer;flex:none;background:#fff}.pages-strip img.on{outline:2px solid var(--color-primary)}
.bench-table td,.bench-table th{white-space:nowrap}
.bar{height:8px;background:var(--color-bg-soft);border-radius:999px;overflow:hidden;min-width:120px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}
/* cta band */
.cta-band{background:linear-gradient(120deg,var(--color-primary) 0%,#B4533A 60%,#C8664A 100%);color:#fff}
.cta-band h2,.cta-band .lead{color:#fff}.cta-band .lead{opacity:.9}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}.cta-band .btn.primary{background:#fff;color:var(--color-primary);border-color:#fff}
/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:step}
.step{position:relative;padding:22px 20px 18px 20px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:18px;width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:var(--color-primary-ink);display:grid;place-items:center;font-weight:700;font-size:.9rem}
/* misc */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}.checklist li{display:flex;gap:10px;align-items:flex-start}.checklist .icon{color:var(--color-ok);margin-top:3px}
.notice{border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:12px 16px;background:var(--color-bg-soft);font-size:.92rem}
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin:32px 0}
.empty{text-align:center;padding:48px 20px;color:var(--color-muted)}
.badge-new{background:var(--color-accent);color:#1a1a1a;font-size:.7rem;font-weight:800;border-radius:6px;padding:1px 6px;vertical-align:middle}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
/* language banner on a legal page: English-only contract, or a translation */
.legal-lang{border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-bg-soft);padding:16px 20px;margin:0 0 28px}
.legal-lang.translated{border-left-color:var(--color-line)}
.prose .legal-lang>*+*{margin-top:.85em}
.prose .legal-lang h2{font-size:1.1rem;margin:0;padding:0;display:flex;gap:8px;align-items:center}
.prose .legal-lang h3{font-size:1rem;margin:0}
.prose .legal-lang p{margin:0}
.legal-summary{border-left:2px solid var(--color-line);padding-left:16px}
.prose .legal-summary>*+*{margin-top:.5em}
.prose .legal-summary ul{padding-left:1.2em}
.prose .legal-summary li+li{margin-top:.35em}
@media print{.site-header,.site-footer,.cta-band,.nav,.docs-side,.toc,.announce{display:none!important}body{color:#000}.prose{font-size:11pt}}

/* ---- ToupieSoft additions (2026-10) ------------------------------------------------ */
.brand-logo{height:38px}
.brand-name{font-weight:800;letter-spacing:-.01em}
.swiss{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--color-ink)}
.swiss svg{width:18px;height:18px;flex:none;border-radius:2px}
.swiss.lg{font-size:1rem}.swiss.lg svg{width:28px;height:28px;border-radius:3px}
.swiss-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-line);font-size:.82rem;font-weight:600;color:var(--color-ink)}
.swiss-pill svg{width:18px;height:18px;border-radius:2px}
.hero .lead{max-width:56ch}
.hero-shot{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-line);background:var(--color-surface);box-shadow:var(--shadow-card)}
.hero-shot img{display:block;width:100%;height:auto}
.hero-shot figcaption{font-size:.8rem;color:var(--color-muted);padding:8px 12px;border-top:1px solid var(--color-line);background:var(--color-bg-soft)}
/* product cards */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.product{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-card);color:var(--color-ink)}
.product:hover{text-decoration:none;border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-line))}
.product .p-head{display:flex;align-items:center;gap:10px}
.product .p-head img{width:34px;height:auto}
.product h3{margin:0;font-size:1.2rem}
.product p{margin:0;color:var(--color-muted);font-size:.95rem}
.product .p-status{margin-top:auto;font-size:.82rem;font-weight:600;color:var(--color-primary)}
.product .p-shot{border-radius:6px;border:1px solid var(--color-line);overflow:hidden;aspect-ratio:16/10;background:var(--color-bg-soft)}
.product .p-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden}
.fact{background:var(--color-surface);padding:18px 20px}
.fact b{display:block;font-size:1.7rem;letter-spacing:-.02em;color:var(--color-primary);line-height:1.2}
.fact span{display:block;color:var(--color-muted);font-size:.9rem;margin-top:4px;hyphens:auto;overflow-wrap:break-word}
.fact small{display:block;color:var(--color-muted);font-size:.75rem;margin-top:6px}
/* swiss block */
.swiss-block{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;background:var(--color-blush);border-radius:var(--radius-lg);padding:clamp(22px,4vw,40px)}
.swiss-block .flag svg{width:72px;height:72px;border-radius:6px;display:block}
.swiss-block h2{margin-bottom:.3em}
.swiss-block ul{margin:.6em 0 0;padding-left:1.1em;color:var(--color-ink)}
.swiss-block li+li{margin-top:.25em}
@media (max-width:640px){.swiss-block{grid-template-columns:1fr}}
/* app pages */
.app-hero{padding:clamp(36px,6vw,64px) 0 clamp(18px,3vw,28px)}
.app-hero .tagline{font-size:1.15rem;color:var(--color-muted);max-width:60ch}
.app-hero .status{display:inline-block;margin-bottom:12px}
.video-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-line);background:var(--color-bg-soft);box-shadow:var(--shadow-card);aspect-ratio:16/9}
.video-frame video{display:block;width:100%;height:100%;background:var(--color-bg-soft)}
.captures{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.capture{margin:0;display:flex;flex-direction:column;gap:8px}
.capture a{display:block;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-line);box-shadow:var(--shadow-card);background:var(--color-surface)}
.capture img{display:block;width:100%;height:auto}
.capture figcaption b{display:block;font-size:.98rem}
.capture figcaption span{color:var(--color-muted);font-size:.9rem}
.fn-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 28px}
.fn-group h3{font-size:1.05rem;margin-bottom:.5em;color:var(--color-primary)}
.fn-group ul{margin:0;padding-left:1.1em}.fn-group li{margin:.3em 0}
.enquiry{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:1px solid var(--color-line);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);padding:20px 24px;background:var(--color-surface)}
.enquiry p{margin:0;color:var(--color-muted)}
/* tables of facts in prose */
.prose table td:first-child{font-weight:600}
.prose .note{font-size:.9rem;color:var(--color-muted)}
.downloads{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

/* small Swiss flag beside the wordmark (no text) */
.brand-flag{display:inline-flex;align-self:flex-start;margin:3px 0 0 -4px}
.brand-flag svg{width:12px;height:12px;border-radius:1.5px;display:block}

/* plan cards: one subgrid so name, tagline, price, note, list, button and eligibility line up across cards */
@supports (grid-template-rows:subgrid){
  .plans{row-gap:16px}
  .plan{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  .plan .tagline{min-height:0}
  .plan .plan-cta{margin-top:0;align-self:start}
  .plan ul{align-content:start;align-self:start}
}
.price{flex-direction:column;align-items:flex-start;gap:0}
.price .from{line-height:1.3}
.price .amt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan .note{margin:0}

/* comparison matrix (toupieGED / ISO 9001) */
.prose.matrix{max-width:none}
.prose.matrix table{width:100%;font-size:.93rem}
.prose.matrix td:first-child{white-space:nowrap;font-weight:600;color:var(--color-brick,#98432A)}
.prose.matrix td:nth-child(2){color:var(--color-muted);width:38%}
@media (max-width:720px){.prose.matrix td:first-child{white-space:normal}.prose.matrix td:nth-child(2){width:auto}}

/* ---- TPI.Val: flat brand look (white, warm greys, brick red), no glow, no gradients ---- */
.hero::before{display:none}
.btn{border-radius:var(--radius-sm)}
.btn:hover{transform:none;box-shadow:none}
.btn.primary:hover{background:#9A2C25;border-color:#9A2C25}
.eyebrow{letter-spacing:.2em;font-family:var(--font-display);font-size:.74rem}
.cta-band{background:var(--color-ink)}
.cta-band .btn.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.cta-band .btn.primary:hover{background:#9A2C25;border-color:#9A2C25}
.card,.feature,.step,.hero-shot{box-shadow:none}
.swiss-pill{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--color-primary)}
.tv-hero h1{max-width:none}
.tv-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.tv-service .card-media{aspect-ratio:16/10}
.tv-service h3{font-size:1.15rem}
.tv-service h3 a{color:var(--color-ink)}
.tv-service p{color:var(--color-muted);margin:0}
.tv-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:center}
.tv-split>*{min-width:0}
.tv-split.reverse>:first-child{order:2}
.tv-figure{margin:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-line);background:var(--color-bg-soft)}
.tv-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:860px){.tv-split{grid-template-columns:1fr}.tv-split.reverse>:first-child{order:0}}
.tv-steps{list-style:none;padding:0;margin:0}
/* content pages: photo rows, team, equipment */
.prose .tv-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:18px 0 26px}
.prose .tv-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);margin:0}
.prose .tv-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin:12px 0 28px}
.prose .tv-person{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:18px 20px;background:var(--color-surface)}
.prose .tv-person h3{margin:0 0 2px;font-size:1.1rem}
.prose .tv-person .role{color:var(--color-muted);font-size:.92rem;margin:0 0 8px}
.prose .tv-person p{margin:0;font-size:.98rem}
.prose .tv-flags{display:flex;gap:5px;margin:0 0 10px}
.prose .tv-flags svg{width:20px;height:14px;display:block;border-radius:1px}
.prose .tv-note{background:var(--color-bg-soft);border-left:0;border-radius:var(--radius-md);padding:14px 18px;color:var(--color-muted)}
/* photos written as markdown images (one paragraph = one row), team photos */
.prose p:has(> img){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:18px 0 26px}
.prose p > img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);margin:0}
.prose .tv-person .tv-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 0 10px;aspect-ratio:1}

/* ---- languages under the contact button ---- */
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:12px}
.tv-cta-flags{display:flex;gap:8px;justify-content:center}
.tv-cta-flags svg{width:26px;height:18px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ---- activity page: video / animated photo header ---- */
.tv-act-hero{position:relative;overflow:hidden;background:#1C1B19;color:#fff;min-height:clamp(340px,56vh,580px);display:flex;align-items:flex-end}
.tv-act-bg{position:absolute;inset:0}
.tv-act-bg video,.tv-kb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.tv-kb{opacity:0;animation:tv-kb 24s linear infinite;will-change:opacity,transform}
@keyframes tv-kb{0%{opacity:0;transform:scale(1.02)}4%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}
.tv-act-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,25,.10) 0%,rgba(28,27,25,.35) 45%,rgba(28,27,25,.82) 100%)}
.tv-act-head{position:relative;z-index:1;padding-top:56px;padding-bottom:40px;width:100%}
.tv-act-head h1{color:#fff;margin:0 0 10px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.tv-act-head .lead{color:rgba(255,255,255,.92);max-width:62ch;margin:0}
.tv-act-head .breadcrumbs ol,.tv-act-head .breadcrumbs a{color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){.tv-kb{animation:none}.tv-kb:first-child{opacity:1}}

/* ---- gallery ---- */
.tv-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tv-tile{margin:0;position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg-soft);aspect-ratio:4/3}
.tv-tile img,.tv-tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.tv-tile a:hover img{transform:scale(1.04)}
.tv-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;font-size:.82rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.tv-lightbox{padding:0;border:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
.tv-lightbox::backdrop{background:rgba(15,15,14,.88)}
.tv-lightbox img{display:block;max-width:94vw;max-height:88vh;border-radius:var(--radius-sm)}
.tv-lb-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#1C1B19;font-size:22px;line-height:36px;cursor:pointer}

/* ---- other activities ---- */
.tv-act-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.tv-act-nav a{display:inline-block;padding:7px 14px;border:1px solid var(--color-line);border-radius:999px;color:var(--color-ink);font-size:.9rem;text-decoration:none}
.tv-act-nav a:hover{border-color:var(--color-primary);color:var(--color-primary)}
.tv-act-nav a[aria-current]{background:var(--color-ink);border-color:var(--color-ink);color:#fff}

/* ---- services overview cards ---- */
.tv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.tv-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;color:var(--color-ink);text-decoration:none;transition:border-color .2s,transform .2s}
.tv-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}
.tv-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-soft)}
.tv-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.tv-card-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.tv-card-body strong{font-size:1.1rem}
.tv-card-body span{color:var(--color-muted);font-size:.95rem}
.tv-soon{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--color-bg-soft);border:1px solid var(--color-line);font-weight:600;font-size:.9rem}

/* ---- activity header slideshow with arrows ---- */
.tv-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;transform:scale(1.02)}
.tv-slide.is-active{opacity:1;animation:tv-zoom 7s ease-out forwards}
@keyframes tv-zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.tv-sl-btn{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(28,27,25,.35);color:#fff;font-size:30px;line-height:1;padding:0 0 4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.tv-sl-btn:hover,.tv-sl-btn:focus-visible{background:var(--color-primary);border-color:var(--color-primary)}
.tv-sl-prev{left:max(14px,env(safe-area-inset-left,0px))}.tv-sl-next{right:max(14px,env(safe-area-inset-right,0px))}
.tv-sl-dots{position:absolute;z-index:2;right:max(20px,env(safe-area-inset-right,0px));bottom:18px;display:flex;gap:7px}
.tv-sl-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer}
.tv-sl-dots button.is-active{background:#fff}
@media (prefers-reduced-motion:reduce){.tv-slide.is-active{animation:none}}
@media (max-width:640px){.tv-sl-btn{width:38px;height:38px;font-size:24px;top:38%}}

/* ---- home hero without picture ---- */
.hero-grid:not(:has(.hero-shot)){grid-template-columns:minmax(0,1fr)}
.hero-grid:not(:has(.hero-shot)) h1{max-width:none}

/* ---- service boxes come forward on hover ---- */
.tv-service,.tv-card{position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tv-service .card-media,.tv-card-img{overflow:hidden}
.tv-service .card-media img,.tv-card-img img{transition:transform .5s ease}
.tv-service:hover,.tv-service:focus-within,.tv-card:hover,.tv-card:focus-visible{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 40px rgba(28,27,25,.18);border-color:var(--color-primary);z-index:2}
.tv-service:hover .card-media img,.tv-card:hover .tv-card-img img{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){.tv-service,.tv-card,.tv-service .card-media img,.tv-card-img img{transition:none}.tv-service:hover,.tv-card:hover{transform:none}}
.tv-service h3 a::after{content:"";position:absolute;inset:0;z-index:1}.tv-service h3 a{color:inherit;text-decoration:none}

/* ---- quotation request extras on the contact form ---- */
.tv-quote{border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:12px 16px 14px;margin:0;display:flex;flex-direction:column;gap:10px;background:var(--color-bg-soft)}
.tv-quote legend{font-weight:600;padding:0 6px}
.tv-quote-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px}
.tv-quote .check{display:flex;align-items:center;gap:8px;font-weight:400}
.tv-quote .check input{width:auto;margin:0}
.tv-quote[hidden]{display:none}

/* ---- activity text with photo tiles beside it ---- */
.tv-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start}
.tv-split+.tv-split{margin-top:44px}
.tv-split.no-media{grid-template-columns:minmax(0,1fr)}
.tv-split .prose>:first-child{margin-top:0}
.tv-split-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tv-split-media .tv-tile{aspect-ratio:4/3}
@media (max-width:820px){.tv-split{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---- home: big faded logo on the white page, like the leaflet ---- */
.tv-hero{background:var(--color-bg);position:relative;overflow:hidden;isolation:isolate}

/* ---- site header bar in the footer colour ---- */
.site-header,html[data-header=glass] .site-header{background:var(--color-bg-soft)}

/* ---- wide (two-camera) tiles and pages with a table ---- */
.tv-split-media .tv-tile.is-wide{grid-column:1/-1;aspect-ratio:4/1}
.tv-split:has(.prose table){grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:36px}
@media (min-width:1000px){.tv-split .prose table td,.tv-split .prose table th{white-space:nowrap}}

/* contact: form only */
.tv-contact-single{max-width:820px}

/* ---- big faded logo in the page background, centre-bottom above the black band (home) ---- */
.section.tv-logo-bg{position:relative;isolation:isolate;overflow:hidden;padding-bottom:260px}
.tv-logo-bg::after{content:"";position:absolute;z-index:-1;left:50%;bottom:0;transform:translateX(-50%);width:min(1000px,125vw);aspect-ratio:512/468;background:url('/media/brand/tpival-logo.svg') no-repeat center bottom/contain;opacity:.075;pointer-events:none}
.section.tv-logo-bg .card.tv-service,.section.tv-logo-bg .card.tv-service .card-body{background:rgba(255,255,255,.6)}