/* Rebuilt product pages: the homepage's language on the soft charcoal ground.
   One column of sections; each a heading on the left and plain rows on the right; the real app UI in the hero.
   Loaded after kit.css. Tokens (--bg, --panel, --ink, --mute, --faint, --line, --acc, --f, --cr, --sp) come from kit.css. */
.pg-main{padding:0 0 32px !important}
.pg{max-width:1180px;margin:0 auto;padding:0 var(--gut);color:var(--ink);font:400 17px/1.6 var(--f)}
.pg h1,.pg h2,.pg h3,.pg p,.pg ul,.pg figure{margin:0}
.pg a{color:inherit}
.pg strong{font-weight:600;color:var(--ink)}
.pg code{font:500 .92em/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink)}

/* ---------- hero ---------- */
.pg-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(44px,8vh,100px) 0 clamp(56px,10vh,112px)}
.pg-hero--wide{grid-template-columns:minmax(0,1fr)}
.pg-hero--wide .pg-hero-txt{max-width:780px}
.pg-name{display:flex;align-items:center;gap:12px;margin-bottom:22px !important;font-size:17px;font-weight:500;color:var(--mute)}
.pg-name img{width:44px;height:44px;object-fit:contain}
.pg-hero h1{max-width:17ch;font-size:clamp(38px,5vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.pg-lead{max-width:58ch;margin-top:20px !important;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mute)}
.pg-lead:first-of-type{color:var(--ink)}
.pg-lead+.pg-lead{margin-top:12px !important}
.pg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid rgba(240,243,241,.24);border-radius:8px;color:var(--ink) !important;font:600 16px/1 var(--f);text-decoration:none;transition:background-color 212ms var(--cr),border-color 212ms var(--cr),transform 226ms var(--cr)}
.pg-btn:hover{border-color:rgba(240,243,241,.55)}
.pg-btn--pri{background:var(--acc);border-color:var(--acc);color:#0b1a10 !important}
.pg-btn--pri:hover{background:var(--acc-hi);border-color:var(--acc-hi)}
.pg-btn:active,.pg-play:active{transform:scale(.97)}
/* the Google Play badge only at heights where its width is a whole pixel too (its picture is 47:14), so its thin border
   is never shaved off on a phone */
.pg-play{display:inline-block;transition:transform 226ms var(--cr)}
.pg-play img{display:block;height:56px;width:188px}
.pg-note{margin-top:14px !important;max-width:62ch;font-size:14.5px;line-height:1.5;color:var(--faint)}
.pg-facts{margin-top:18px !important;font-size:14.5px;line-height:1.6;color:var(--mute)}
.pg-facts span{color:var(--faint)}

/* ---------- the real app UI ---------- */
.pg-hero--wide .pg-hero-ui{margin-top:4px}
.pg-screen-in{position:relative;aspect-ratio:1280/800;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0f1517;box-shadow:0 50px 90px -50px rgba(0,0,0,.7)}
.pg-screen iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;transform:scale(var(--k,1));pointer-events:none}
.pg-screen figcaption{margin-top:14px;font-size:14px;color:var(--faint)}
.pg-hero-ui .pg-phone{margin:0 auto}
.pg-phone{width:100%;max-width:320px}
.pg-dev{position:relative;aspect-ratio:400/864;border-radius:13%/6%;background:#0d0f11;border:1px solid rgba(240,243,241,.15);box-shadow:0 60px 80px -50px rgba(0,0,0,.8)}
.pg-scr{position:absolute;left:2.5%;right:2.5%;top:1.157%;bottom:1.157%;border-radius:11%/5%;overflow:hidden;background:#000;transform:translateZ(0)}
.pg-scr iframe{position:absolute;left:0;top:0;width:380px;height:844px;border:0;transform-origin:0 0;transform:scale(var(--k,.75));pointer-events:none}

/* real desktop screenshots in a window: one after another, with the caption under it */
.pg-win{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101214;box-shadow:0 50px 90px -50px rgba(0,0,0,.7)}
.pg-win-bar{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:#1d2023}
.pg-win-bar i{width:10px;height:10px;border-radius:50%;background:rgba(240,243,241,.16)}
.pg-win-in{position:relative;aspect-ratio:1366/760;background:#fff}
/* the old screen leaves first, then the new one comes in: two screens never overlap */
.pg-win-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;background:#f3f4f3;opacity:0;transition:opacity 150ms var(--exit)}
.pg-win-in img.is-on{opacity:1;transition:opacity 320ms var(--cr) 150ms}
.pg-tour figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:14px;font-size:14px;color:var(--mute)}
.pg-tour-dots{display:flex;gap:6px;flex:none}
.pg-tour-dots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.pg-tour-dots button::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;border-radius:1px;background:rgba(240,243,241,.22);transition:background-color 212ms var(--cr)}
.pg-tour-dots button[aria-current="true"]::after{background:var(--acc)}

/* one phone, several real screens: the list picks the screen; a thin line fills while a screen is shown */
.pg-stour-row{position:relative;display:block;width:100%;padding:20px 0 22px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pg-stour-row:last-child{border-bottom:1px solid var(--line)}
.pg-stour-t{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--faint);transition:color 212ms var(--cr)}
.pg-stour-row:hover .pg-stour-t{color:var(--mute)}
.pg-stour-p{display:grid;grid-template-rows:0fr;margin-top:0;font-size:16px;line-height:1.55;color:var(--mute);opacity:0;transition:grid-template-rows 431ms var(--sp),opacity 212ms var(--cr),margin-top 431ms var(--sp)}
.pg-stour-p>span{min-height:0;overflow:hidden}
.pg-stour-row[aria-selected="true"] .pg-stour-t{color:var(--ink)}
.pg-stour-row[aria-selected="true"] .pg-stour-p{grid-template-rows:1fr;opacity:1;margin-top:8px}
.pg-stour-row i{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left}
.pg-stour-row[aria-selected="true"].run i{animation:pgbar var(--dur,7s) linear forwards}
@keyframes pgbar{to{transform:scaleX(1)}}

/* screenshot gallery and videos */
.pg-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.pg-gallery figure a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f3f4f3;transition:border-color 212ms var(--cr)}
.pg-gallery figure a:hover{border-color:rgba(143,227,157,.6)}
.pg-gallery img{display:block;width:100%;height:220px;object-fit:scale-down;object-position:center top}   /* small shots stay at their size, never blown up */
.pg-gallery figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--mute)}
.pg-videos{display:grid;gap:28px}
.pg-videos .tkb-yt{border-radius:10px;border:1px solid var(--line)}
.pg-videos .tkb-yt-note{margin-top:10px;font-size:13.5px;color:var(--faint)}
/* a note that matters (e.g. the beta notice): framed, not striped */
.pg-callout{padding:14px 16px;border:1px solid rgba(242,196,106,.4);border-radius:8px;background:rgba(242,196,106,.06);color:var(--ink);font-size:15.5px}

/* ---------- sections ---------- */
.pg-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.15fr);gap:22px clamp(32px,5vw,84px);padding:clamp(48px,8vh,88px) 0;border-top:1px solid var(--line)}
.pg-sec-head h2{font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.14;text-wrap:balance}
.pg-sec-head p{margin-top:14px !important;max-width:46ch;font-size:16.5px;line-height:1.55;color:var(--mute)}
@media (min-width:1000px){.pg-sec-head{position:sticky;top:104px;align-self:start}}
/* a section title stays in place only while it stands beside its text; above its text it scrolls away (pages.js) */
.pg-sec-head.pg-unstick{position:static !important}
.pg-sec-body>*+*{margin-top:28px !important}
.pg-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.pg-item{padding:20px 0 26px;border-top:1px solid var(--line)}
.pg-item h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pg-item p{margin-top:8px !important;font-size:16px;line-height:1.55;color:var(--mute)}
.pg-item .pg-facts{font-size:14px}
.pg-num{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--acc-hi);font-variant-numeric:tabular-nums}
/* numbered steps: one column, the number beside the step */
.pg-items--steps{grid-template-columns:minmax(0,1fr)}
.pg-items--steps .pg-item{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline}
.pg-items--steps .pg-item>:not(.pg-num){grid-column:2}
.pg-items--steps .pg-num{grid-row:1/span 4;margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.pg-only{font-size:14px;font-weight:400;color:var(--faint)}
.pg-list{padding:0 !important;list-style:none}
.pg-list li{padding:16px 0;border-top:1px solid var(--line);color:var(--mute)}
.pg-list li:last-child{border-bottom:1px solid var(--line)}
.pg-p{max-width:64ch;color:var(--mute)}
.pg-h3{font-size:18px;font-weight:600}
.pg-link{color:var(--ink) !important;text-decoration:underline;text-decoration-color:rgba(67,194,91,.65);text-underline-offset:4px}
.pg-link:hover{text-decoration-color:var(--acc-hi)}

/* alert lines, in the dashboard's own words and colours */
.pg-alert{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:14px !important;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:14.5px;line-height:1.45}
.pg-st{font-weight:600}
.pg-alert--crit .pg-st{color:#ff8f80}
.pg-alert--warn .pg-st{color:#f2c46a}
.pg-alert--ok .pg-st{color:var(--acc-hi)}
.pg-alert-tx{flex-basis:100%;color:var(--mute)}

/* TKB Contrack's status labels exactly as the app draws them (its own colours and shape) */
.pg-badges{display:flex;flex-wrap:wrap;gap:10px}
.app-badge{display:inline-block;padding:8px 14px;border-radius:999px;font:700 13px/1.2 -apple-system,"Segoe UI",Roboto,sans-serif}
.app-badge--active{background:#DCFCE7;color:#166534}
.app-badge--soon{background:#FEF3C7;color:#92400E}
.app-badge--expired{background:#FEE2E2;color:#991B1B}
.app-badge--notstarted{background:#DBEAFE;color:#1E40AF}
.app-badge--sched{background:#FFE4E6;color:#9F1239}

/* questions */
.pg-faq{border-top:1px solid var(--line)}
.pg-faq:last-child{border-bottom:1px solid var(--line)}
.pg-faq summary{display:flex;justify-content:space-between;gap:24px;padding:18px 0;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:7px;color:var(--mute);background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform 226ms var(--cr)}
.pg-faq[open] summary::after{transform:rotate(45deg)}
.pg-faq summary:hover{color:var(--acc-hi)}
.pg-faq>div{max-width:66ch;padding:0 0 22px;color:var(--mute)}
.pg-faq>div>*+*{margin-top:10px !important}
.pg-faq>div ul{padding-left:20px}
.pg+.pg-sec-body .pg-faq{margin:0}
.pg-sec-body>.pg-faq+.pg-faq{margin-top:0 !important}

/* the network picture: devices with an agent → collector ← devices without one */
.pg-flow{padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pg-flow-k{margin-bottom:12px !important;font-size:14px;color:var(--faint)}
.pg-flow-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,.85fr) auto minmax(0,1fr);align-items:center;gap:14px}
.pg-flow-t{font-size:15px;font-weight:600}
.pg-flow-col ul{margin-top:8px !important;padding:0;list-style:none}
.pg-flow-col li{padding:7px 0;border-top:1px solid var(--line);font-size:15px;color:var(--mute)}
.pg-flow-n{margin-top:8px !important;font-size:13.5px;color:var(--faint)}
.pg-flow-core{display:grid;gap:3px;padding:18px 14px;border:1px solid rgba(67,194,91,.55);border-radius:10px;text-align:center;font-size:13.5px;line-height:1.4;color:var(--mute)}
.pg-flow-core strong{font-size:18px}
.pg-flow-a{display:grid;justify-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.pg-flow-a i{position:relative;display:block;width:44px;height:1px;background:var(--mute)}
.pg-flow-a i::after{content:"";position:absolute;top:-3.5px;right:-1px;border:4px solid transparent;border-right:0;border-left:7px solid var(--mute)}
.pg-flow-a--in i::after{right:auto;left:-1px;border-left:0;border-right:7px solid var(--mute)}

/* the products overview: one row per product (logo, name, what it does, where to go) */
.pg-hero-ui:empty{display:none}
.pg-lang{margin-bottom:22px !important;font-size:14.5px}
.pg-prods{display:grid}
.pg-prod{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 24px;padding:26px 0 28px;border-top:1px solid var(--line)}
.pg-prod:last-child{border-bottom:1px solid var(--line)}
.pg-prod>img{grid-row:1/span 2;width:64px;height:64px;object-fit:contain}
.pg-prod h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.pg-prod h3 a{text-decoration:none}
.pg-prod h3 a:hover{color:var(--acc-hi)}
.pg-prod-tag{margin-top:4px !important;color:var(--ink);font-size:16.5px}
.pg-prod-tx>p:not(.pg-prod-tag){margin-top:8px !important;max-width:62ch;font-size:16px;color:var(--mute)}
.pg-prod-acts{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:14px}
.pg-prod-acts .pg-btn{min-height:44px;padding:0 18px;font-size:15px}
.pg-prod-acts .pg-play img{height:42px;width:141px}
/* comparison table */
.pg-table{overflow-x:auto}
.pg-table table{width:100%;border-collapse:collapse;font-size:15px}
.pg-table th,.pg-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--mute)}
.pg-table tr:first-child th,.pg-table tr:first-child td{color:var(--ink);font-weight:600}
.pg-table th:first-child,.pg-table td:first-child{color:var(--ink)}
.pg-table a{color:var(--ink)}

/* ---------- the close ---------- */
.pg-final{padding:clamp(56px,10vh,112px) 0 24px;border-top:1px solid var(--line)}
.pg-final h2{max-width:22ch;font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.pg-final>p{max-width:58ch;margin-top:14px !important;color:var(--mute)}

/* ---------- entrance: once, calm; the hero is there at once ---------- */
.pg-js .pg-sec,.pg-js .pg-final{opacity:0;transform:translateY(18px)}
.pg-js .pg-sec.is-in,.pg-js .pg-final.is-in{opacity:1;transform:none;transition:opacity 212ms var(--cr),transform 431ms var(--sp)}
@media (prefers-reduced-motion:reduce){.pg-js .pg-sec,.pg-js .pg-final{opacity:1;transform:none}}

/* ---------- smaller screens ---------- */
@media (max-width:999px){
  .pg-hero{grid-template-columns:minmax(0,1fr)}
  .pg-sec{grid-template-columns:minmax(0,1fr)}
  .pg-flow-row{grid-template-columns:minmax(0,1fr)}
  .pg-flow-a i{transform:rotate(90deg);margin:10px 0}
  .pg-flow-a--in i{transform:rotate(-90deg)}
}
@media (max-width:640px){
  .pg-items{grid-template-columns:minmax(0,1fr)}
  .pg-phone{max-width:260px}
  .pg-btn{flex:1 1 auto}
}

/* =====================================================================================
   Type system (one set of roles for every rebuilt page; replaces the scattered sizes above).
   Light text on a dark ground gets a little more air: open tracking on small text, generous leading.
   The heading face is one token (--head, set in kit.css), so the whole site can change it in one place.
   ===================================================================================== */
.pg{font:400 var(--t-body)/1.62 var(--f);letter-spacing:.003em;font-kerning:normal}
.pg :is(h1,h2,h3,.pg-stour-t,.pg-faq summary,.pg-prod h3){font-family:var(--head)}
.pg p,.pg li{text-wrap:pretty}
.pg :is(h1,h2,h3){text-wrap:balance}
/* display: the page's one big line */
.pg-hero h1{font-size:var(--t-display);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:1.02}
/* section and closing headings */
.pg-sec-head h2{font-size:var(--t-h2);font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:1.12}
.pg-final h2{font-size:var(--t-final);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:1.06}
/* item titles, tour rows, questions, product names */
.pg-item h3,.pg-h3,.pg-faq summary,.pg-stour-t{font-size:var(--t-h3);font-weight:var(--w-title);letter-spacing:var(--ls-title);line-height:1.3}
.pg-prod h3{font-size:var(--t-h3l);font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:1.2}
/* lead: the sentence under the display line */
.pg-lead{font-size:var(--t-lead);line-height:1.5}
/* body: items, tours, sections */
.pg-item p,.pg-stour-p,.pg-sec-head p,.pg-p,.pg-prod-tx>p:not(.pg-prod-tag),.pg-faq>div,.pg-list li{font-size:var(--t-body2);line-height:1.6}
.pg-prod-tag{font-size:var(--t-body2)}
/* small: notes, facts, captions, tables */
.pg-note,.pg-facts,.pg-only,.pg-screen figcaption,.pg-tour figcaption,.pg-gallery figcaption,.pg-flow-col li,.pg-table table,.pg-lang,.pg-alert{font-size:var(--t-small);letter-spacing:.01em}
.pg-flow-k,.pg-flow-n,.pg-flow-a,.pg-videos .tkb-yt-note{font-size:var(--t-micro);letter-spacing:.015em}
/* numbers: aligned digits wherever they compare */
.pg-table,.pg-num,.pg-alert,.pg-facts{font-variant-numeric:tabular-nums}
.pg-items--steps .pg-num{font-family:var(--head);font-size:var(--t-h3l);font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:1}
.pg-btn{font-family:var(--f);font-weight:600;letter-spacing:.005em}

/* ---------- the screen list inside the hero (TKB Assistant, Flick): one phone, driven from beside it ---------- */
.pg-hero--tour .pg-stour-list{margin-top:30px;max-width:540px}
.pg-hero--tour .pg-stour-row{padding:16px 0 18px}
.pg-hero--tour .pg-stour-p{font-size:var(--t-body2)}
.pg-hero--tour .pg-acts{margin-top:28px}
@media (max-width:999px){
  /* phone right under the headline, the list that drives it right under the phone */
  .pg-hero--tour{row-gap:0}
  .pg-hero--tour .pg-hero-txt{display:contents}
  .pg-hero--tour .pg-name{order:1}.pg-hero--tour h1{order:2}
  .pg-hero--tour .pg-hero-ui{order:3;margin-top:32px}
  .pg-hero--tour .pg-stour-list{order:4}.pg-hero--tour .pg-acts{order:5}.pg-hero--tour .pg-facts{order:6}
  .pg-hero--tour .pg-phone{max-width:250px}
}

/* ---------- TKB Assistant's own UI, rebuilt from the app's source (dark theme, Inter, Material icons) ---------- */
@font-face{font-family:"App Inter";src:url(/assets/ui/fonts/inter/inter_regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:"App Inter";src:url(/assets/ui/fonts/inter/inter_semibold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:"App Inter";src:url(/assets/ui/fonts/inter/inter_bold.ttf);font-weight:700;font-display:swap}
.pg-app{--a-pri:#4CAF50;--a-bg:#121212;--a-surf:#1E1E1E;--a-var:#2A2A2A;--a-on:#E0E0E0;--a-onv:#B0B0B0;--a-out:#404040;
  border:1px solid var(--line);border-radius:20px;color:var(--a-on);font:400 15px/23px "App Inter",Inter,system-ui,sans-serif;letter-spacing:.25px;font-variant-numeric:normal}
/* chat: as in the app's chat screen */
.pg-chat{display:flex;flex-direction:column;gap:8px;max-width:520px;padding:22px 18px 18px;background:linear-gradient(var(--a-bg),var(--a-var) 55%,var(--a-surf))}
.jx{display:flex;flex-direction:column;gap:8px}
.jx+.jx{margin-top:14px}
.jb{max-width:min(330px,86%);padding:8px 12px;border-radius:20px;overflow-wrap:anywhere}
.jb--u{align-self:flex-end;background:var(--a-pri);color:#fff;text-align:right;border-bottom-right-radius:4px}
.jb--a{align-self:flex-start;background:var(--a-surf);border:.5px solid rgba(64,64,64,.5);border-top-left-radius:4px}
.ja{width:16px;height:16px;margin:-2px 4px 0;fill:var(--a-onv);align-self:flex-start}
.ja--u{align-self:flex-end;width:18px;height:18px}
.jt{display:none;align-self:flex-start;gap:5px;padding:13px 14px;border-radius:20px;border-top-left-radius:4px;background:var(--a-surf);border:.5px solid rgba(64,64,64,.5)}
.jt i{width:6px;height:6px;border-radius:50%;background:var(--a-onv);animation:jdot 1000ms ease-in-out infinite}
.jt i:nth-child(2){animation-delay:160ms}.jt i:nth-child(3){animation-delay:320ms}
@keyframes jdot{0%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-2px)}}
/* playing: each part waits hidden in its place, so the panel never changes height */
.pg-chat.is-play .jb,.pg-chat.is-play .ja{visibility:hidden}
.pg-chat.is-play .jt.on{display:flex}
.pg-chat .jb.on,.pg-chat .ja.on{visibility:visible}
.pg-chat .jb--u.on{animation:jin 300ms cubic-bezier(.2,.8,.2,1) both}
@keyframes jin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* model picker: as in the app's JOLI tab */
.pg-pick{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:24px 40px;align-items:center}
.pk{padding:26px 20px 22px;background:var(--a-bg);text-align:center}
.pk-t{font-size:26px;line-height:32px;font-weight:700;letter-spacing:0;color:var(--a-on)}
.pk-s{max-width:360px;margin:8px auto 0 !important;font-size:14px;line-height:20px;color:var(--a-onv)}
.pk-opts{display:grid;gap:14px;margin-top:24px}
.pk-o{--ac:#4CAF50;display:flex;align-items:center;gap:14px;width:100%;padding:18px;border:0;border-radius:20px;background:var(--a-surf);box-shadow:inset 0 0 0 .5px rgba(64,64,64,.4);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:box-shadow 160ms ease,transform 120ms ease}
.pk-o--lite{--ac:#4A7F6A}
.pk-o[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--ac)}
.pk-o:active{transform:scale(.98)}
.pk-o:focus-visible{outline:2px solid var(--acc-hi);outline-offset:3px}
.pk-ic{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 30%,transparent),color-mix(in srgb,var(--ac) 8%,transparent))}
.pk-ic svg{width:28px;height:28px;fill:var(--ac)}
.pk-tx{flex:1;min-width:0}
.pk-n{display:flex;align-items:center;gap:6px;font-size:22px;line-height:28px;font-weight:700;color:var(--a-on)}
.pk-n i{font-style:normal;font-size:18px;font-weight:400;opacity:.55}
.pk-ok{width:18px;height:18px;fill:var(--ac);opacity:0;transition:opacity 160ms ease}
.pk-o[aria-checked="true"] .pk-ok{opacity:1}
.pk-g{display:block;margin-top:2px;font-size:14px;line-height:20px;color:var(--a-onv)}
.pk-ch{flex:none;width:16px;height:16px;fill:var(--a-on);opacity:.5}
.pk-f{margin-top:22px !important;font-size:12.5px;line-height:16px;letter-spacing:.5px;color:rgba(176,176,176,.7)}
.pk-note p{max-width:44ch}
@media (max-width:760px){.pg-pick{grid-template-columns:minmax(0,1fr)}.pk{padding:22px 14px 18px}.pk-o{padding:16px 14px}}

/* products overview: one quiet button per row (five green ones in a column shouted); names in the table stay on one line */
.pg-table td:first-child,.pg-table th:first-child{white-space:nowrap}
@media (max-width:640px){
  /* the comparison table stacks: one block per product, each value under its column name */
  .pg-table table,.pg-table tbody,.pg-table tr,.pg-table td,.pg-table th{display:block}
  .pg-table tr:first-child{display:none}
  .pg-table tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .pg-table th,.pg-table td{padding:2px 0;border:0}
  .pg-table td:first-child,.pg-table th:first-child{padding-bottom:6px;font-weight:600}
  .pg-table td[data-l]::before{content:attr(data-l) ": ";color:var(--faint)}
}

/* =====================================================================================
   Bands over the stars.
   Sections run full width and take turns: open sky, then a translucent band with a lit top edge (the stars still
   show through it). A section about a real screen shows that screen beside its text, in a window that leans toward
   the pointer and stays in view while the text scrolls. Long text sits on a raised panel. Things arrive in order.
   ===================================================================================== */
.pg{max-width:none;padding:0}
.pg-hero,.pg-final{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
.pg-sec{position:relative;border-top:0 !important;padding:clamp(76px,12vh,140px) max(var(--gut),calc((100% - 1180px) / 2)) !important;isolation:isolate}
.pg-sec:nth-of-type(even)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,44,48,.62) 0%,rgba(30,33,36,.5) 30%,rgba(26,29,31,.42) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 30px 60px -40px rgba(143,227,157,.07)}
/* where a band begins, a faint line of light runs across, brightest in the middle */
.pg-sec:nth-of-type(even)::after{content:"";position:absolute;left:max(var(--gut),calc((100% - 1180px) / 2));right:max(var(--gut),calc((100% - 1180px) / 2));top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(143,227,157,0),rgba(143,227,157,.45) 50%,rgba(143,227,157,0))}
/* long text gets a raised panel so the block reads as one piece */
.pg-sec-body>.pg-p:first-child{margin-top:0}
.pg-sec-body:has(>.pg-p+.pg-p){padding:clamp(24px,3vw,36px);border-radius:18px;background:rgba(23,25,27,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05),0 40px 80px -46px rgba(0,0,0,.9)}
/* a section about a real screen: text and window side by side, sides taking turns */
.pg-sec--shot{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:start;column-gap:clamp(40px,5vw,84px)}
.pg-sec--shot .pg-sec-txt{display:grid;gap:26px;min-width:0}
.pg-sec--shot .pg-sec-head{position:static}
.pg-sec--flip .pg-shot{order:-1}
.pg-shot{position:sticky;top:110px;margin:0;perspective:1400px}
.pg-shot-win{border:1px solid rgba(240,243,241,.14);border-radius:14px;overflow:hidden;background:#101214;transform-style:preserve-3d;will-change:transform;
  transform:translateY(var(--py,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 70px 110px -55px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4),0 0 80px -30px rgba(67,194,91,.18)}
.pg-shot-win img{display:block;width:100%;height:auto;background:#f3f4f3}
.pg-shot figcaption{margin-top:14px;color:var(--faint);font-size:var(--t-small)}
/* arrival: the band's text rises in piece by piece, the window slides in from its side */
.pg-js .pg-sec,.pg-js .pg-sec.is-in{opacity:1;transform:none}
.pg-js .pg-sec :is(.pg-sec-head,.pg-sec-body>*,.pg-item,.pg-list li,.pg-faq,.pg-gallery figure,.pg-prod){opacity:0;transform:translateY(24px)}
.pg-js .pg-sec.is-in :is(.pg-sec-head,.pg-sec-body>*,.pg-item,.pg-list li,.pg-faq,.pg-gallery figure,.pg-prod){opacity:1;transform:none;transition:opacity 340ms var(--cr) calc(var(--i,0) * 60ms),transform 760ms var(--sp) calc(var(--i,0) * 60ms)}
.pg-js .pg-sec .pg-shot{opacity:0;transform:translateX(calc(var(--dir,1) * 64px))}
.pg-js .pg-sec--flip .pg-shot{--dir:-1}
.pg-js .pg-sec.is-in .pg-shot{opacity:1;transform:none;transition:opacity 420ms var(--cr) 140ms,transform 980ms var(--sp) 140ms}
@media (prefers-reduced-motion:reduce){.pg-js .pg-sec :is(.pg-sec-head,.pg-sec-body>*,.pg-item,.pg-list li,.pg-faq,.pg-gallery figure,.pg-prod,.pg-shot){opacity:1;transform:none}}
@media (max-width:999px){.pg-sec--shot{grid-template-columns:minmax(0,1fr)}.pg-sec--flip .pg-shot{order:0}.pg-shot{position:relative;top:auto}}

/* ---------- legal documents: a calm title, a contents panel, readable text on a raised panel ---------- */
.pg-hero--doc{padding-bottom:clamp(40px,7vh,72px)}
.pg-hero--doc h1{font-size:clamp(36px,4.2vw,58px);max-width:20ch}
.pg-toc{margin-top:8px;padding:22px 26px 24px;border-radius:18px;background:rgba(32,35,38,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 40px 80px -46px rgba(0,0,0,.9)}
.pg-toc-h{margin:0 0 12px !important;color:var(--faint);font-size:var(--t-small)}
.pg-toc ol{columns:2 300px;column-gap:40px;margin:0;padding:0;list-style:none}
.pg-toc li{break-inside:avoid;padding:6px 0;border-top:1px solid var(--line);font-size:var(--t-body2)}
.pg-toc a{color:var(--mute);text-decoration:none;transition:color 212ms var(--cr)}
.pg-toc a:hover{color:var(--acc-hi)}
.pg-doc{padding:clamp(24px,3vw,38px);border-radius:18px;background:rgba(23,25,27,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05),0 40px 80px -46px rgba(0,0,0,.9);color:var(--mute)}
.pg-doc>*+*{margin-top:14px !important}
.pg-doc>.pg-doc-sub{margin-top:30px !important;color:var(--ink)}
.pg-doc>.pg-doc-sub:first-child{margin-top:0 !important}
.pg-doc .pg-ul{margin-top:10px !important}
.pg-ul{padding-left:22px}
.pg-ul li{padding:3px 0;color:var(--mute)}
.pg-ul li::marker{color:var(--acc)}
.pg-doc a,.pg-p a{color:var(--ink);text-decoration-color:rgba(67,194,91,.6);text-underline-offset:3px}
html{scroll-padding-top:96px}
/* the screenshot window waits off to the side until its section comes in: never let that widen the page */
.pg-sec{overflow-x:clip}
/* long German words in big titles: hyphenate, and a slightly smaller title on small phones */
.pg-hero h1,.pg-sec-head h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:480px){.pg-hero h1{font-size:clamp(30px,8.6vw,40px)}}

/* =====================================================================================
   Fewer lines: rows between hairlines become raised tiles with
   space between them; bands get more contrast. Tables keep their row rules but sit on a tile.
   ===================================================================================== */
.pg-items{gap:14px !important}
.pg-item{border-top:0 !important;padding:22px 24px 24px !important;border-radius:16px;background:var(--tile);box-shadow:var(--tile-sh)}
.pg-list{display:grid;gap:10px}
.pg-list li,.pg-list li:last-child{border:0 !important;padding:14px 18px !important;border-radius:12px;background:var(--tile);box-shadow:var(--tile-sh)}
.pg-faq,.pg-faq:last-child{border:0 !important;padding:0 20px;border-radius:14px;background:var(--tile);box-shadow:var(--tile-sh)}
.pg-sec-body>.pg-faq+.pg-faq{margin-top:10px !important}
.pg-prods{gap:14px}
.pg-prod,.pg-prod:last-child{border:0 !important;padding:26px 28px 28px !important;border-radius:20px;background:var(--tile);box-shadow:var(--tile-sh)}
.pg-final{border-top:0 !important}
.pg-table{padding:6px 22px;border-radius:16px;background:var(--tile);box-shadow:var(--tile-sh)}
.pg-table tr:last-child :is(th,td){border-bottom:0}
.pg-toc li{border-top:0 !important;padding:5px 0}
/* the screen list beside the hero phone: the shown screen is a tile, its progress line runs along the tile's foot */
.pg-stour-row,.pg-stour-row:last-child{border:0 !important;padding:16px 18px 18px !important;border-radius:14px;transition:background-color 212ms var(--cr)}
.pg-stour-row[aria-selected="true"]{background:var(--tile);box-shadow:var(--tile-sh)}
.pg-stour-row i{top:auto;bottom:0;left:18px;width:calc(100% - 36px);border-radius:1px}
/* bands: a clearer second tone, lit at the top, shaded at the foot */
.pg-sec:nth-of-type(even)::before{background:linear-gradient(180deg,rgba(44,48,52,.8) 0%,rgba(34,37,40,.7) 40%,rgba(28,31,34,.62) 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 40px 80px -50px rgba(143,227,157,.08) !important}

/* a tile that is one link (guide chapters): the whole tile clicks, it lifts a little under the pointer */
/* (the lift and press use translate/scale, so the sections' arrival, which owns transform, cannot cancel them) */
.pg-item--link{position:relative;transition:translate 431ms var(--sp),scale 431ms var(--sp),box-shadow 212ms var(--cr)}
.pg-item--link h3 a{color:var(--ink);text-decoration:none}
.pg-item--link h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pg-item--link:hover{translate:0 -3px;box-shadow:var(--tile-sh),0 0 0 1px rgba(143,227,157,.4)}
.pg-item--link:hover h3 a{color:var(--acc-hi)}
.pg-item--link:active{translate:0 -1px;scale:.99;transition-duration:120ms}
/* keyboard focus: one ring, the tile's (a mouse press shows none) */
.pg-item--link:has(a:focus-visible){box-shadow:var(--tile-sh),0 0 0 2px var(--acc-hi)}
.pg-item--link h3 a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.pg-item--link:is(:hover,:active){translate:none;scale:none}}

/* the enlarged screenshot */
.pg-lb{position:fixed;inset:0;z-index:9500;background:rgba(10,11,12,0);cursor:zoom-out;transition:background-color 300ms var(--cr)}
.pg-lb.on{background:rgba(10,11,12,.88)}
.pg-lb img{position:absolute;border-radius:12px;box-shadow:0 40px 120px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);background:#f3f4f3;transform-origin:0 0;will-change:transform}
.pg-lb p{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center;color:var(--mute);font-size:var(--t-small);opacity:0;transition:opacity 260ms var(--cr) 200ms}
.pg-lb.on p{opacity:1}
.pg-lb:focus{outline:none}

/* =====================================================================================
   Surface hierarchy: questions are one panel split by thin rules, not a stack of tiles;
   the page ends on one raised closing panel with the app's own logo.
   ===================================================================================== */
.pg-faqs{border-radius:18px;background:var(--tile);box-shadow:var(--tile-sh);overflow:hidden}
.pg-faqs .pg-faq,.pg-faqs .pg-faq:last-child{background:none;box-shadow:none;border-radius:0;padding:0 24px;transition:background-color 212ms var(--cr)}
.pg-faqs .pg-faq+.pg-faq{margin-top:0 !important;border-top:1px solid rgba(255,255,255,.07) !important}
.pg-faqs .pg-faq[open]{background:rgba(255,255,255,.03)}
.pg-faqs .pg-faq summary{padding:20px 0}

.pg-final{padding-top:clamp(40px,8vh,96px);padding-bottom:clamp(40px,8vh,88px)}
.pg-final-in{display:grid;justify-items:center;gap:clamp(18px,2.4vw,28px);padding:clamp(36px,6vw,80px) clamp(24px,5vw,64px);border-radius:24px;background:var(--tile);box-shadow:var(--tile-sh);text-align:center}
.pg-final-tx{display:grid;justify-items:center}
.pg-final-tx h2{margin-inline:auto}
.pg-final-tx .pg-acts{justify-content:center}
.pg-final-logo{width:clamp(76px,9vw,124px);height:auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}
.pg-final-tx>p{max-width:58ch;margin-top:14px !important;color:var(--mute)}
.pg-final-tx .pg-acts{margin-top:26px}
.pg-js .pg-final .pg-final-logo{opacity:0;transform:translateY(16px) scale(.7) rotate(-8deg)}
.pg-js .pg-final.is-in .pg-final-logo{opacity:1;transform:none;transition:opacity 260ms var(--cr) 120ms,transform 900ms var(--sp) 120ms}
@media (max-width:640px){
  .pg-final-logo{width:64px}
  .pg-faqs .pg-faq,.pg-faqs .pg-faq:last-child{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){.pg-js .pg-final .pg-final-logo{opacity:1;transform:none}}
.pg-final .pg-play img{height:56px;width:188px}

/* =====================================================================================
   Legal texts read as text: no bands or raised panels, a calm column at reading width,
   less air between sections, and each section's title stays beside its text while it is read.
   ===================================================================================== */
.pg:has(.pg-hero--doc) .pg-sec{padding-top:clamp(32px,5vh,56px) !important;padding-bottom:clamp(32px,5vh,56px) !important}
.pg:has(.pg-hero--doc) .pg-sec::before,.pg:has(.pg-hero--doc) .pg-sec::after{display:none !important}
.pg:has(.pg-hero--doc) .pg-sec-head{position:sticky;top:96px;align-self:start}
.pg:has(.pg-hero--doc) .pg-sec-head h2{font-size:clamp(21px,1.9vw,27px) !important;line-height:1.2 !important;letter-spacing:-.02em !important}
.pg:has(.pg-hero--doc) .pg-doc{max-width:70ch;padding:0;border-radius:0;background:none;box-shadow:none;color:#c3cac6;line-height:1.72}
.pg:has(.pg-hero--doc) .pg-doc>.pg-doc-sub:not(:first-child){margin-top:26px !important}
.pg:has(.pg-hero--doc) .pg-toc{margin-bottom:8px}
@media (max-width:760px){.pg:has(.pg-hero--doc) .pg-sec-head{position:static}}
.pg-doc,.pg-doc *{overflow-wrap:anywhere}

/* a section window that plays the real app (MySorty's Tags window): the replica brings its own title bar */
.pg-shot--live .pg-screen-in{border:0;border-radius:0;box-shadow:none;background:#202020}
.pg-shot--live iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;transform:scale(var(--k,1));pointer-events:none}
/* a comparison table gets the whole width, its heading above it (second review: squeezed into the right column) */
.pg-sec:has(> .pg-sec-body > .pg-table){grid-template-columns:minmax(0,1fr)}
.pg-sec:has(> .pg-sec-body > .pg-table) .pg-sec-head h2{max-width:none}
/* a section that is only a heading, a sentence and a button reads as one block: the button under the sentence */
.pg-sec:has(> .pg-sec-body > .pg-acts:only-child){grid-template-columns:minmax(0,1fr);row-gap:0}
.pg-sec:has(> .pg-sec-body > .pg-acts:only-child) .pg-sec-head p{max-width:60ch}
.pg-sec:has(> .pg-sec-body > .pg-acts:only-child) .pg-acts{margin-top:22px}
/* a window beside a long list of features: heading and window share the first row, the features run full width below
   in three columns, instead of a narrow column of tall tiles beside one picture (second review) */
@media (min-width:1000px){
  .pg-sec--shot:has(.pg-items){grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);grid-template-areas:"head shot" "body body";row-gap:clamp(36px,5vh,56px)}
  .pg-sec--shot:has(.pg-items) .pg-sec-txt{display:contents}
  .pg-sec--shot:has(.pg-items) .pg-sec-head{grid-area:head;align-self:center}
  .pg-sec--shot:has(.pg-items) .pg-sec-body{grid-area:body}
  .pg-sec--shot:has(.pg-items) .pg-shot{grid-area:shot;position:relative;top:auto}
  .pg-sec--shot:has(.pg-items) .pg-items{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pg-prods--prices{max-width:980px}
/* the manual's chapter index: the chapters are the page, full width in three columns, not a column beside an empty one */
.pg-sec:has(.pg-item--link){grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.pg-sec:has(.pg-item--link) .pg-items{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =====================================================================================
   MySorty guide chapters read like a manual (second review: alternating sides suit a sales page, not instructions):
   one column at reading width, each step's heading, then the screen it is about, then what to do.
   ===================================================================================== */
.pg--guide .pg-sec,.pg--guide .pg-sec--shot{grid-template-columns:minmax(0,860px) !important;justify-content:start;column-gap:0;row-gap:clamp(20px,3vh,28px)}
.pg--guide .pg-sec--shot{grid-template-areas:"head" "shot" "body"}
.pg--guide .pg-sec--shot .pg-sec-txt{display:contents}
.pg--guide .pg-sec--shot .pg-sec-head{grid-area:head}
.pg--guide .pg-sec--shot .pg-sec-body{grid-area:body}
.pg--guide .pg-sec--shot .pg-shot{grid-area:shot;position:relative;top:auto;order:0}
.pg--guide .pg-shot-win{width:fit-content;max-width:100%}
.pg--guide .pg-shot-win img{width:auto;max-width:100%}
.pg--guide .pg-sec-body:has(>.pg-p+.pg-p){padding:0;border-radius:0;background:none;box-shadow:none}
.pg--guide .pg-sec{padding-top:clamp(44px,7vh,80px) !important;padding-bottom:clamp(44px,7vh,80px) !important}
.pg-js.pg--guide .pg-sec:not(.is-in) .pg-shot{transform:translateY(24px)}   /* (.pg-js sits on the .pg--guide element itself) */
/* chapter tiles: number, title, then the chapter's first sentence; the long explanations wait inside the chapter */
.pg-items--steps .pg-item--link{display:block}
.pg-item--link .pg-num{margin:0 0 10px;font-size:var(--t-h3l)}
.pg-item--link h3{margin-bottom:10px}
.pg-item--link .pg-p+.pg-p{display:none}
.pg-item--link .pg-p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
/* the 3D phone on product pages: centred in its column, room below for its shadow */
.pg-phone--3d .pg-p3{margin:0 auto 40px}
/* a section that is only a heading and a few lines takes less height than one with a whole list or a window (second review:
   "sparse sections stretched") */
.pg-sec:not(.pg-sec--shot):not(:has(.pg-items,.pg-faqs,.pg-table,.pg-list,.pg-prods,.pg-gallery,.pg-chat,.pg-pick,.pg-flow,.pg-doc)){padding-top:clamp(52px,8vh,92px) !important;padding-bottom:clamp(52px,8vh,92px) !important}
/* a tile left alone in the last row of a two-column grid takes the whole row (often it is the worked example) */
@media (min-width:761px){
  .pg-items>.pg-item:last-child:nth-child(odd):not(.pg-item--link){grid-column:1/-1}
  .pg-sec--shot .pg-items>.pg-item:last-child:nth-child(odd){grid-column:auto}
}
/* phones: the way to get the app comes right under the headline, before the phone (second review); less air above the hero */
@media (max-width:999px){
  .pg-hero--tour .pg-acts{order:3;margin-top:22px}
  .pg-hero--tour .pg-hero-ui{order:4}
  .pg-hero--tour .pg-stour-list{order:5}
  .pg-hero--tour .pg-facts{order:6}
}
@media (max-width:640px){.pg-hero{padding-top:28px}}
/* a product tile without its own buttons (About page) is one link to the product, and lifts like the chapter tiles */
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)){position:relative;transition:transform 431ms var(--sp),box-shadow 212ms var(--cr)}
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)) h3 a{color:var(--ink);text-decoration:none}
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)) h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)):hover{transform:translateY(-3px);box-shadow:var(--tile-sh),0 0 0 1px rgba(143,227,157,.4)}
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)):hover h3 a{color:var(--acc-hi)}
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)):focus-within{box-shadow:var(--tile-sh),0 0 0 2px var(--acc-hi)}
@media (prefers-reduced-motion:reduce){.pg-prod:has(h3 a):hover{transform:none}}

/* =====================================================================================
   Third review: the product overview's product rows use the whole width (no long empty heading column), the comparison
   table leads with the product names, the hero tour's other features read as choices, captions and the network diagram
   are easier to read.
   ===================================================================================== */
@media (min-width:1000px){
  .pg-sec:has(> .pg-sec-body > .pg-prods){grid-template-columns:minmax(0,1fr);row-gap:28px}
  .pg-sec:has(> .pg-sec-body > .pg-prods) .pg-sec-head{max-width:760px}
  .pg-sec-body>.pg-prods{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
  .pg-sec-body>.pg-prods:has(> .pg-prod:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-sec-body>.pg-prods .pg-prod{grid-template-columns:56px minmax(0,1fr);align-content:start}
  .pg-sec-body>.pg-prods .pg-prod>img{width:52px;height:52px}
  .pg-sec-body>.pg-prods .pg-prod-acts{grid-column:1/-1;margin-top:auto;padding-top:18px}
}
.pg-table td:first-child a,.pg-table th:first-child a{font-weight:650;color:var(--ink);font-size:1.04em}
.pg-table td[data-l]{color:#c3cac6}
.pg-table tr:first-child :is(th,td){color:var(--faint);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:none}
.pg-stour-row:not([aria-selected="true"]) .pg-stour-t{color:#b6bdb9}
.pg-stour-row:not([aria-selected="true"]):hover .pg-stour-t{color:var(--ink)}
.pg-shot figcaption,.pg-screen figcaption,.pg-gallery figcaption{color:var(--mute)}
.pg-flow{background:var(--tile);border:0;box-shadow:var(--tile-sh)}
.pg-flow-k,.pg-flow-n,.pg-flow-a{color:var(--mute)}
.pg-flow-col li{color:#c9d0cc}
.pg-flow-a i{background:var(--acc-hi)}.pg-flow-a i::after{border-left-color:var(--acc-hi)}.pg-flow-a--in i::after{border-right-color:var(--acc-hi)}
.pg-flow-core{color:#c9d0cc;background:rgba(67,194,91,.06)}
@media (min-width:1000px){.pg-sec-body>.pg-prods .pg-prod-acts{gap:10px 12px;flex-wrap:nowrap}.pg-sec-body>.pg-prods .pg-prod-acts .pg-btn{padding:0 16px;white-space:nowrap}.pg-sec-body>.pg-prods .pg-prod-acts .pg-play img{height:42px;width:141px}}
@media (min-width:1000px){.pg-sec-body>.pg-prods .pg-prod{grid-template-rows:auto 1fr auto;align-content:stretch}.pg-sec-body>.pg-prods .pg-prod-acts{margin-top:0}}   /* the buttons line up along the cards' feet */
/* the trimmed Play badge: sizes are now the visible badge itself */
.pg-play img{height:42px;width:141px}
.pg-final .pg-play img{height:56px;width:188px}
.pg-prod-acts .pg-play img,.pg-sec-body>.pg-prods .pg-prod-acts .pg-play img{height:42px;width:141px}
/* app cards with a Google Play badge: the badge sits under the "Mehr zu …" button, so a long app name never pushes it
   out of the card */
.pg-sec-body>.pg-prods .pg-prod-acts:has(.pg-play){flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:12px}

/* the headline's arrival: each word rises out of its own line (spring), the hero text after it fades up in reading order */
.pg-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.pg-w>span{display:inline-block}
.pg-intro .pg-w>span{transform:translateY(105%)}
.pg-intro-go .pg-w>span{transform:none;transition:transform 900ms var(--sp) calc(var(--wi) * 45ms)}
.pg-intro .pg-hero-txt>:not(h1){opacity:0;transform:translateY(14px)}
.pg-intro-go .pg-hero-txt>:not(h1){opacity:1;transform:none;transition:opacity 420ms var(--cr) calc(var(--wn,6) * 45ms + 120ms),transform 800ms var(--sp) calc(var(--wn,6) * 45ms + 120ms)}
.pg-intro .pg-hero-txt>.pg-name{opacity:1;transform:none}
@media (max-width:999px){.pg-intro .pg-hero--tour .pg-hero-txt>:not(h1){opacity:1;transform:none}}
/* a long checklist (seven or more points) runs in two columns on wide screens instead of one tall stack */
@media (min-width:1000px){.pg-list:has(> li:nth-child(7)){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}}
/* points inside a raised text panel are plain lines with a small green mark, not cards inside a card */
.pg-sec-body:has(>.pg-p+.pg-p) .pg-list li,.pg-sec-body:has(>.pg-p+.pg-p) .pg-list li:last-child{position:relative;background:none !important;box-shadow:none !important;border-radius:0;padding:7px 0 7px 22px !important}
.pg-sec-body:has(>.pg-p+.pg-p) .pg-list li::before{content:"";position:absolute;left:2px;top:.95em;width:8px;height:8px;border-radius:2px;background:var(--acc);opacity:.85}
.pg-sec-body:has(>.pg-p+.pg-p) .pg-list{gap:2px 28px}
/* MySorty's window maximised on a Full HD screen (1920 x 1080), so both card columns are fully visible */
.pg-screen--hd .pg-screen-in{aspect-ratio:1920/1080;background:#14532d}
.pg-screen--hd iframe{width:1920px;height:1080px}
.pg-shot--live .pg-screen-in{aspect-ratio:1920/1080}
.pg-shot--live iframe{width:1920px;height:1080px}
/* six or more features: three narrower columns with tighter tiles, a feature matrix rather than a long wall (third review) */
@media (min-width:1100px){
  .pg-sec:not(.pg-sec--shot):has(> .pg-sec-body > .pg-items > .pg-item:nth-child(6)):not(:has(.pg-items--steps)){grid-template-columns:minmax(0,1fr);row-gap:28px}
  .pg-sec:not(.pg-sec--shot):has(> .pg-sec-body > .pg-items > .pg-item:nth-child(6)):not(:has(.pg-items--steps)) .pg-sec-head{max-width:760px}
  .pg-sec:not(.pg-sec--shot) .pg-sec-body>.pg-items:has(> .pg-item:nth-child(6)):not(.pg-items--steps){grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-sec-body>.pg-items:has(> .pg-item:nth-child(6)):not(.pg-items--steps) .pg-item{padding:20px 22px 22px !important}
  .pg-sec-body>.pg-items:has(> .pg-item:nth-child(6)):not(.pg-items--steps)>.pg-item:last-child:nth-child(odd){grid-column:auto}
  .pg-sec-body>.pg-items:has(> .pg-item:nth-child(6)):not(.pg-items--steps)>.pg-item:last-child:nth-child(3n+1){grid-column:1/-1}
}

/* =====================================================================================
   Fourth review.
   ===================================================================================== */
/* the screenshots are of Windows software: no Mac-style dots bar over them, just the picture in a quiet frame */
.pg-win-bar{display:none !important}
.pg-shot-win{border-color:rgba(240,243,241,.1)}
/* product cards: the icon sits above the title, the text uses the card's whole width, the buttons stay on the cards' feet */
@media (min-width:1000px){
  .pg-sec-body>.pg-prods .pg-prod{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;row-gap:14px}
  .pg-sec-body>.pg-prods .pg-prod>img{grid-row:auto;width:44px;height:44px}
  .pg-sec-body>.pg-prods .pg-prod-acts{grid-column:1;padding-top:6px}
}
/* guide chapters: the reading column is centred, and the chapter's title above it lines up with it */
@media (min-width:1000px){
  .pg--guide .pg-sec,.pg--guide .pg-sec--shot{justify-content:center}
  .pg--guide .pg-hero{max-width:860px}   /* (content-box: the gutters come on top, as in the sections) */
}
/* legal texts: a narrower title column, so the text gets the width (below 1000 px the title sits above its text) */
@media (min-width:1000px){.pg:has(.pg-hero--doc) .pg-sec{grid-template-columns:minmax(0,.62fr) minmax(0,2fr)}}
/* guide chapters' header in one column too: title and lead, then the chapter's screen at the column's width */
@media (min-width:1000px){
  .pg--guide .pg-hero{grid-template-columns:minmax(0,1fr) !important;row-gap:28px}
  .pg--guide .pg-hero h1{max-width:22ch}
  .pg--guide .pg-hero-ui{max-width:860px}
}
/* the comparison table is structure, not another raised card: flat, with a firmer rule under its head row */
.pg-table{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.pg-table tr:first-child :is(th,td){border-bottom:1px solid rgba(240,243,241,.24) !important}
.pg-table tr:last-child :is(th,td){border-bottom:1px solid var(--line) !important}
@media (max-width:640px){.pg-phone,.pg-hero--tour .pg-phone{max-width:224px}}   /* phones: the whole 3D phone fits under the headline and store button */
/* prices overview: the two products side by side across the content width, built like the product overview's cards */
@media (min-width:1000px){
  .pg-prods--prices{max-width:none !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .pg-prods--prices .pg-prod{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;row-gap:14px}
  .pg-prods--prices .pg-prod>img{grid-row:auto;width:48px;height:48px}
  .pg-prods--prices .pg-prod-acts{grid-column:1;margin-top:0;padding-top:6px}
}
/* exactly eight features: two even rows of four instead of three rows with a gap */
@media (min-width:1100px){
  .pg-sec:not(.pg-sec--shot) .pg-sec-body>.pg-items:has(> .pg-item:nth-child(8):last-child):not(.pg-items--steps){grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* a section with a second phone: the phone stands in its column, a little smaller than the hero's */
.pg-shot--phone{display:grid;justify-items:center;perspective:none}
.pg-shot--phone .pg-p3{margin:0 auto 36px}
@media (min-width:1000px){.pg-sec--phone{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
/* a long section beside a phone: the phone stays in view while the text runs past it */
@media (min-width:1000px){.pg-sec--phone:has(.pg-items){align-items:start}.pg-sec--phone:has(.pg-items) .pg-shot--phone{position:sticky;top:110px}}
/* a long section beside a second phone: text and cards in the wide column, the phone in a narrow one, staying in view */
@media (min-width:1000px){
  .pg-sec--phone:has(.pg-items){grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-areas:none}
  .pg-sec--phone:has(.pg-items) .pg-sec-txt{display:grid}
  .pg-sec--phone:has(.pg-items) :is(.pg-sec-head,.pg-sec-body){grid-area:auto}
  .pg-sec--phone:has(.pg-items) .pg-shot{grid-area:auto;position:sticky;top:110px}
  .pg-sec--phone .pg-sec-body>.pg-items{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* =====================================================================================
   Fifth review: fewer boxes. Longer text is plain text at reading width (no raised panel); sections with four or more
   tiles put their heading above and use the full width; the model picker's explanation sits under the picker;
   five products fill two even rows; closing panels are lighter.
   ===================================================================================== */
.pg-sec-body:has(>.pg-p+.pg-p){padding:0 !important;border-radius:0;background:none !important;box-shadow:none !important}
.pg-sec-body:has(>.pg-p+.pg-p)>.pg-p{max-width:68ch}
@media (min-width:1000px){
  .pg-sec:not(.pg-sec--shot):has(> .pg-sec-body > .pg-items > .pg-item:nth-child(4)):not(:has(.pg-items--steps)){grid-template-columns:minmax(0,1fr);row-gap:28px}
  .pg-sec:not(.pg-sec--shot):has(> .pg-sec-body > .pg-items > .pg-item:nth-child(4)):not(:has(.pg-items--steps)) .pg-sec-head{max-width:760px}
}
.pg-pick{grid-template-columns:minmax(0,460px) !important;justify-content:start}
.pk-note p{max-width:56ch}
@media (min-width:1000px){
  .pg-prods:has(> .pg-prod:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  .pg-prods:has(> .pg-prod:nth-child(5):last-child)>.pg-prod{grid-column:span 2}
  .pg-prods:has(> .pg-prod:nth-child(5):last-child)>.pg-prod:nth-child(n+4){grid-column:span 3}
}
.pg-final-in{padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px)}
.pg-final-logo{width:clamp(60px,6vw,88px)}
/* manual index: each chapter's first paragraph in full, no cut-off */
.pg-item--link .pg-p{display:block;-webkit-line-clamp:unset;overflow:visible}
/* supporting points (what all products share): plain text blocks under a thin rule, not cards */
.pg-items--plain{gap:28px 40px !important}
.pg-items--plain .pg-item{background:none !important;box-shadow:none !important;border-radius:0;padding:18px 0 0 !important;border-top:1px solid rgba(240,243,241,.16) !important}
.pg-screen:has(iframe[data-src*="home/monitor"]) .pg-screen-in{aspect-ratio:1280/700}   /* Monitor: the dashboard without its empty bottom strip */
/* a long text section (a list of seven or more points): heading above, text at reading width, no empty heading column */
@media (min-width:1000px){
  .pg-sec:not(.pg-sec--shot):has(> .pg-sec-body > .pg-list > li:nth-child(7)){grid-template-columns:minmax(0,1fr);row-gap:24px}
  .pg-sec:not(.pg-sec--shot):has(> .pg-sec-body > .pg-list > li:nth-child(7)) .pg-sec-body{max-width:980px}
}
/* legal headings: a size that keeps "5) Benutzerkonto …" together in the narrow title column */
.pg:has(.pg-hero--doc) .pg-sec-head h2{font-size:clamp(18px,1.55vw,22px) !important;text-wrap:balance}
.pg-final-lean{display:inline-block;will-change:transform}
/* the network diagram: small packets travel along both connections toward the Collector (agents report in over HTTPS;
   the Collector polls the devices, whose answers come back), and the Collector glows faintly with each arrival */
.pg-flow-a i{overflow:visible}
.pg-flow-a i::before{content:"";position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--acc-hi);box-shadow:0 0 10px 2px rgba(143,227,157,.55);opacity:0;animation:pg-pkt 2.4s cubic-bezier(.45,0,.55,1) infinite}
.pg-flow-a--in i::before{animation-name:pg-pkt-in;animation-delay:1.2s}
@keyframes pg-pkt{0%{left:-4px;opacity:0}12%{opacity:1}80%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}
@keyframes pg-pkt-in{0%{left:calc(100% - 2px);opacity:0}12%{opacity:1}80%{opacity:1}100%{left:-4px;opacity:0}}
.pg-flow-core{animation:pg-core 2.4s ease-in-out infinite}
@keyframes pg-core{0%,100%{box-shadow:0 0 0 0 rgba(67,194,91,0)}45%{box-shadow:0 0 28px -4px rgba(67,194,91,.45)}}
@media (prefers-reduced-motion:reduce){.pg-flow-a i::before,.pg-flow-core{animation:none}}

/* =====================================================================================
   Animated UI snippets: the real app doing exactly what the point says, live, scaled to fit.
   ===================================================================================== */
.pg-snip{position:relative;margin:0 0 18px;border-radius:12px;overflow:hidden;background:#0f1113;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pg-snip-in{position:relative;width:100%;aspect-ratio:var(--sw)/var(--sh)}
.pg-snip iframe{position:absolute;left:0;top:0;width:calc(var(--sw) * 1px);height:calc(var(--sh) * 1px);border:0;transform-origin:0 0;transform:scale(var(--k,1));pointer-events:none;background:transparent}
.pg-item--snip{display:flex !important;flex-direction:column}
.pg-item--snip .pg-snip{margin:-6px -8px 18px}
.pg-li--snip{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:center}
.pg-li--snip .pg-snip{margin:0}
.pg-sec-head .pg-snip{margin-top:22px;max-width:520px}
@media (max-width:640px){.pg-li--snip{grid-template-columns:minmax(0,1fr)}}
/* a list point with its snippet takes the whole row, so the snippet is big enough to read, with the text beside it */
@media (min-width:641px){.pg-list>.pg-li--snip{grid-column:1/-1;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:28px;padding-left:0 !important;margin:10px 0}}
.pg-list>.pg-li--snip::before{display:none}
/* a heading that stands above its full-width content never sticks (it would slide over the tiles) */
@media (min-width:1000px){
  .pg-sec:is(:has(> .pg-sec-body > .pg-items > .pg-item:nth-child(4)),:has(> .pg-sec-body > .pg-prods),:has(> .pg-sec-body > .pg-table),:has(> .pg-sec-body > .pg-list > li:nth-child(7)),:has(.pg-item--link)) .pg-sec-head{position:static}
}
/* snippets at a readable, not a giant, size: at most their own width (phone UI at about 3/4), centred in the tile;
   tiles with snippets keep their own height (no empty stretch beside a tall one) */
.pg-snip{width:100%;max-width:calc(var(--sw) * .8px);margin-left:auto !important;margin-right:auto !important}
.pg-items:has(.pg-item--snip){align-items:start}
.pg-item--snip .pg-snip{margin-top:0;margin-bottom:20px}
.pg-sec-head .pg-snip{max-width:calc(var(--sw) * .8px);margin-left:0 !important}

/* standalone links are real buttons now, the same as the homepage's "Mehr zu …":
   solid green; on hover the green wipes away to the right and leaves a dark button with a green edge and green text.
   The main green buttons get the same hover, so all green buttons behave alike. */
.pg-link,.pg-btn--pri{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:0 !important;border-radius:12px;
  background:#23282b !important;color:#0b1a10 !important;font:600 16px/1.2 var(--f);letter-spacing:-.005em;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--acc);
  transition:color 260ms var(--cr) 60ms,transform 431ms var(--sp),box-shadow 212ms var(--cr)}
.pg-link::before,.pg-btn--pri::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform-origin:100% 50%;transition:transform 420ms cubic-bezier(.65,0,.35,1)}
.pg-link:hover,.pg-btn--pri:hover{color:var(--acc-hi) !important;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--acc-hi),0 6px 16px -10px rgba(67,194,91,.35)}
.pg-link:hover::before,.pg-btn--pri:hover::before{transform:scaleX(0)}
.pg-link:active,.pg-btn--pri:active{transform:translateY(0) scale(.96);transition-duration:120ms}
p:has(> .pg-link:only-child){margin-top:14px}
@media (prefers-reduced-motion:reduce){.pg-link,.pg-btn--pri,.pg-link::before,.pg-btn--pri::before{transition:color 212ms,box-shadow 212ms}.pg-link:hover,.pg-btn--pri:hover{transform:none}.pg-link:hover::before,.pg-btn--pri:hover::before{transform:none;opacity:0}}

/* =====================================================================================
   MySorty guide, blog and legal pages
   ===================================================================================== */
/* chapter tiles: the arrival owns transform and its staggered transition; the lift and press keep their own timing */
.pg-js .pg-sec.is-in .pg-item--link{transition:opacity 340ms var(--cr) calc(var(--i,0) * 60ms),transform 760ms var(--sp) calc(var(--i,0) * 60ms),translate 431ms var(--sp),scale 431ms var(--sp),box-shadow 212ms var(--cr)}
.pg-js .pg-sec.is-in .pg-item--link:active{transition-duration:340ms,760ms,120ms,120ms,212ms}
/* a tile's text wraps where it runs out of room (balanced wrapping broke "Rechnungen in MySorty / erstellen" early) */
.pg-item--link .pg-p{text-wrap:wrap}
/* long paths and words in a chapter's text wrap inside the column instead of running off a phone's edge */
.pg--guide .pg-sec-body :is(p,li,code){overflow-wrap:anywhere}
/* a screenshot window as wide as its picture: the real size comes with the page, so the place is kept before it loads */
.pg--guide .pg-shot-win[style*="--w"]{width:min(100%,var(--w))}
.pg--guide .pg-shot-win[style*="--w"] img{width:100%}
/* gallery: a single picture takes the whole row; on phones one picture per row */
.pg-gallery figure:only-child{grid-column:1/-1}
@media (max-width:640px){.pg-gallery--mini{grid-template-columns:minmax(0,1fr)}}
/* the row that ends a chapter: back (quiet) and next (green), each saying where it goes */
.pg-chnav .pg-btn{box-sizing:border-box;text-align:center;line-height:1.3;padding-top:10px;padding-bottom:10px}   /* (a long name may wrap on a phone) */
/* links inside running text: the green underline brightens under the pointer */
.pg-doc a:hover,.pg-p a:not(.pg-link):hover{text-decoration-color:var(--acc-hi)}
.pg-doc a,.pg-p a:not(.pg-link){transition:text-decoration-color 212ms var(--cr)}
/* legal texts below 1000 px: the title above its text, so it never sticks over the text it heads */
@media (max-width:999px){.pg:has(.pg-hero--doc) .pg-sec-head{position:static}}
/* the start of a legal text without a title of its own (Widerruf): no empty head row above it on narrow screens */
@media (max-width:999px){.pg:has(.pg-hero--doc) .pg-sec-head:empty{display:none}}
/* contents links: the whole row is the target (about 37 px high instead of the 21 px line) */
.pg-toc li{padding:0 !important}
.pg-toc a{display:block;padding:5px 0}
/* the last band runs down to the footer, no strip of plain sky between them */
.pg-main:has(> .pg > .pg-sec:last-child:nth-of-type(even)):not(:has(.pg-hero--doc)){padding-bottom:0 !important}
/* a screenshot that opens large is a button for the keyboard too */
.pg-shot img[tabindex]:focus-visible{outline:2px solid var(--acc-hi);outline-offset:-2px}   /* (inside the window: its overflow would clip a ring outside) */

/* =====================================================================================
   Docs, forms and prices
   ===================================================================================== */
/* the enlarged screenshot can be pinched larger on a phone */
.pg-lb,.pg-lb img{touch-action:pinch-zoom}
/* every card that is one link lifts 3 px and presses in (About us product tiles; guide and tool tiles already do) */
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)):active{transform:translateY(-1px) scale(.99);transition-duration:120ms}
.pg-prod:has(h3 a):not(:has(.pg-prod-acts)):focus-within:not(:has(a:focus-visible)){box-shadow:var(--tile-sh)}
@media (prefers-reduced-motion:reduce){.pg-prod:has(h3 a):active{transform:none}}
/* About us, laid out like the other rebuilt pages: no tall empty band under the short hero, five product tiles of one width */
.pg--about .pg-hero{padding-bottom:clamp(20px,4vh,44px)}
.pg--about .pg-hero+.pg-sec{padding-top:clamp(36px,6vh,72px) !important}
@media (min-width:1000px){
  .pg--about .pg-sec-body>.pg-prods:has(> .pg-prod:nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .pg--about .pg-sec-body>.pg-prods:has(> .pg-prod:nth-child(5):last-child)>.pg-prod{grid-column:auto !important}
}
@media (min-width:641px) and (max-width:999px){.pg--about .pg-sec-body>.pg-prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the prices overview's title has the size and place of the other price and form pages' titles */
.pg:has(.pg-prods--prices) .pg-hero{padding-bottom:clamp(28px,5vh,56px)}
/* TKB Monitor EULA, rebuilt like the AGB: the English half opens with the same kind of head as the German one */
.pg-hero--part{padding-top:clamp(56px,9vh,104px)}
.pg-hero--doc .pg-doc-title{max-width:20ch;font:var(--w-display) clamp(32px,3.6vw,50px)/1.04 var(--head);letter-spacing:var(--ls-display);text-wrap:balance}
.pg-hero--doc .pg-lead{font-size:var(--t-small);line-height:1.6;color:var(--mute)}
.pg-hero--doc .pg-lead:first-of-type{color:var(--mute)}
.pg-doc-jump{margin:14px 0 0 !important;font-size:var(--t-small)}
.pg-doc-jump a,.pg-doc-back a{color:var(--mute);text-decoration:none;transition:color 212ms var(--cr)}
.pg-doc-jump a:hover,.pg-doc-back a:hover{color:var(--acc-hi)}
.pg-doc-jump a{display:inline-block;padding:10px 0;margin:-10px 0}
.pg-doc-back{max-width:1180px;margin:0 auto !important;padding:12px var(--gut) clamp(40px,7vh,72px);font-size:var(--t-small);color:var(--faint)}
.pg-doc-back a{display:inline-block;padding:10px 0}
.pg-ul--plain{padding-left:0;list-style:none}
.pg-ul--plain li::marker{content:none}

/* =====================================================================================
   Product pages as short sales pages: each benefit is one section with one big
   clip of the real app, readable at its own scale; then one quiet row of facts, short prices, a few questions, the close.
   ===================================================================================== */
/* a benefit: the words on one side, the clip on the other (sides take turns); the clip never grows past its own scale */
.pg-ben{grid-template-columns:minmax(0,1fr) minmax(0,var(--cw)) !important;align-items:center;column-gap:clamp(40px,5vw,84px) !important}
.pg-ben--flip>.pg-clip{order:-1}
.pg-ben-tx{min-width:0;max-width:540px}
.pg-ben-tx h2{font-family:var(--head);font-size:var(--t-h2);font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:1.12;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
.pg-ben-tx h2 .pg-only{margin-left:4px;font-family:var(--f);font-size:var(--t-small);font-weight:500;letter-spacing:.01em;color:var(--faint);vertical-align:.35em;white-space:nowrap}
.pg-ben-p{margin-top:18px}
.pg-ben-p>p{max-width:52ch;color:var(--mute);font-size:var(--t-body2);line-height:1.6}
.pg-ben-p>p:first-child{color:#d3d9d6}
.pg-ben-p>p+p{margin-top:12px !important}
.pg-ben-p>.pg-note{margin-top:16px !important;color:var(--faint);font-size:var(--t-small)}
.pg-ben-p>.pg-facts{margin-top:18px !important;color:var(--faint);font-size:var(--t-small);line-height:1.7}
/* a wide desktop window (MySorty): heading and words side by side, the window under them at its own size */
.pg-ben--wide{grid-template-columns:minmax(0,1fr) !important;row-gap:clamp(30px,4.5vh,48px)}
.pg-ben--wide .pg-ben-tx{max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);column-gap:clamp(32px,5vw,84px);align-items:start}
.pg-ben--wide .pg-ben-p{margin-top:4px}
.pg-ben--wide>.pg-clip{order:0;justify-self:start}
.pg-ben--wide.pg-ben--flip>.pg-clip{justify-self:end}
/* the clip: the app at its own pixels (k ≤ --kmax), in a quiet frame, faded in once it has loaded */
.pg-clip{position:relative;margin:0;width:min(100%,calc(var(--sw) * var(--kmax,1) * 1px));justify-self:center}
.pg-clip-in{position:relative;aspect-ratio:var(--sw)/var(--sh);overflow:hidden;border-radius:14px;background:var(--tone,#101214);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 100px -56px rgba(0,0,0,.9),0 0 80px -34px rgba(67,194,91,.16)}
.pg-clip iframe{position:absolute;left:0;top:0;width:calc(var(--fw) * 1px);height:calc(var(--fh) * 1px);border:0;transform-origin:0 0;transform:scale(var(--k,1)) translate(calc(var(--ox) * -1px),calc(var(--oy) * -1px));pointer-events:none;background:transparent;opacity:0;transition:opacity 420ms var(--cr)}
.pg-clip iframe.is-on{opacity:1}
.pg-clip figcaption{margin-top:14px;max-width:60ch;color:var(--mute);font-size:var(--t-small);line-height:1.55}
/* markup clips (TKB Assistant's chat, the Monitor network): their own box, as wide as the column allows */
.pg-clip--html{width:min(100%,var(--cw))}
.pg-clip--html .pg-chat{max-width:none}
.pg-clip--html .pg-flow{padding:24px 22px}
@media (min-width:1000px){.pg-clip--html .pg-flow-row{grid-template-columns:minmax(0,1fr) auto minmax(120px,.8fr) auto minmax(0,1fr);gap:10px}}
/* phones: a tighter crop of the same clip where a page has one (data-fit-m; pages.js loads that one) */
@media (max-width:640px){
  .pg-clip[data-fit-m]{--sw:var(--sw-m) !important;--sh:var(--sh-m) !important;--fw:var(--fw-m) !important;--fh:var(--fh-m) !important;--ox:var(--ox-m) !important;--oy:var(--oy-m) !important}
}
/* the facts row: where it runs, privacy, languages; short label, plain words, a thin line above each */
.pg-row{grid-template-columns:minmax(0,1fr) !important;padding-top:clamp(48px,8vh,84px) !important;padding-bottom:clamp(48px,8vh,84px) !important}
.pg-row-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:26px clamp(28px,3.5vw,48px);margin:0}
.pg-row-in>div{min-width:0;padding-top:18px;border-top:1px solid rgba(240,243,241,.18)}
.pg-row-in dt{margin:0 0 8px;color:var(--faint);font-size:var(--t-small);letter-spacing:.01em}
.pg-row-in dd{margin:0;color:var(--ink);font-size:var(--t-body2);line-height:1.6;text-wrap:pretty;overflow-wrap:break-word}
.pg-row-a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(67,194,91,.6);text-underline-offset:3px;transition:text-decoration-color 212ms var(--cr);white-space:nowrap}
.pg-row-a:hover{text-decoration-color:var(--acc-hi)}
/* short prices: the head beside two sentences and the way to the price page */
.pg-price .pg-sec-body .pg-p{max-width:60ch;color:#d3d9d6}
.pg-price .pg-acts{margin-top:24px !important}
/* TKB Contrack's status colours: a plain legend (a small square, the word), no chips */
.pg-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0 !important;padding:0;list-style:none;color:var(--mute);font-size:var(--t-small)}
.pg-legend li{display:inline-flex;align-items:center;gap:9px}
.pg-legend i{flex:none;width:10px;height:10px;border-radius:3px}
/* the close: a link inside its sentence (the account page) reads as a link */
.pg-final-tx>p a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(67,194,91,.6);text-underline-offset:3px;transition:text-decoration-color 212ms var(--cr)}
.pg-final-tx>p a:hover{text-decoration-color:var(--acc-hi)}
/* arrival: the words rise in, the clip slides in from its side (the same springs as the other sections) */
.pg-js .pg-sec :is(.pg-ben-tx,.pg-row-in>div){opacity:0;transform:translateY(24px)}
.pg-js .pg-sec.is-in :is(.pg-ben-tx,.pg-row-in>div){opacity:1;transform:none;transition:opacity 340ms var(--cr) calc(var(--i,0) * 60ms),transform 760ms var(--sp) calc(var(--i,0) * 60ms)}
.pg-js .pg-ben>.pg-clip{opacity:0;transform:translateX(calc(var(--dir,1) * 56px))}
.pg-js .pg-ben--flip>.pg-clip{--dir:-1}
.pg-js .pg-ben--wide>.pg-clip{transform:translateY(32px)}
.pg-js .pg-ben.is-in>.pg-clip{opacity:1;transform:none;transition:opacity 420ms var(--cr) 120ms,transform 980ms var(--sp) 120ms}
@media (prefers-reduced-motion:reduce){.pg-js .pg-sec :is(.pg-ben-tx,.pg-row-in>div),.pg-js .pg-ben>.pg-clip{opacity:1;transform:none}}
/* hero windows on phones: MySorty shows its left column, TKB Monitor its own narrow layout (pages.js picks data-fit-m) */
@media (max-width:640px){
  .pg-screen--mcrop .pg-screen-in{aspect-ratio:990/920 !important}
  .pg .pg-screen--mon .pg-screen-in{aspect-ratio:600/760 !important}
  .pg-screen--mon iframe{width:600px;height:760px}
}
/* below 1000 px: one column, the words first, the clip under them */
@media (max-width:999px){
  .pg-ben,.pg-ben--wide{grid-template-columns:minmax(0,1fr) !important;row-gap:30px}
  .pg-ben--flip>.pg-clip{order:0}
  .pg-ben-tx{max-width:640px}
  .pg-ben--wide .pg-ben-tx{grid-template-columns:minmax(0,1fr)}
  .pg-ben--wide .pg-ben-p{margin-top:18px}
  .pg-ben>.pg-clip,.pg-ben--wide>.pg-clip,.pg-ben--wide.pg-ben--flip>.pg-clip{justify-self:center}
}
/* 768 px (tablet): the hero headline and the phone use the width */
@media (min-width:641px) and (max-width:999px){
  .pg-hero h1{max-width:20ch}
  .pg-hero .pg-hero-txt{max-width:640px}
}

/* the facts row (where it runs, privacy, languages): raised panels with depth instead of lines; the
   systems it runs on carry their own marks */
.pg-row-in{gap:16px !important}
.pg-row-in>div{padding:22px 22px 20px !important;border:0 !important;border-radius:18px;background:linear-gradient(180deg,rgba(44,48,52,.7),rgba(31,34,37,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 34px 60px -40px rgba(0,0,0,.9)}
.pg-row-in dt{color:var(--acc-hi) !important;font-weight:600}
.pg-oss{display:grid;gap:10px}
.pg-os-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pg-os-l{width:100%;color:var(--faint);font-size:var(--t-small)}
.pg-os{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 8px;border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--ink);font-size:14.5px;line-height:1.3}
.pg-os svg{width:17px;height:17px;flex:none;fill:currentColor}
.pg-os--win svg{color:#3aa6f5}.pg-os--droid svg{color:#3ddc84}.pg-os--rpi svg{color:#d6336c}.pg-os--rpi .lf{fill:#55c25a}.pg-os--tux svg{color:#e8ece9}.pg-os--ios svg{color:#e8ece9}
.pg-os svg .bl{fill:#17191b}.pg-os--tux .bk{fill:#f2b33d}
.pg-os-n{width:100%;color:var(--mute);font-size:var(--t-small)}

/* the way into the MySorty guide on its product page: one raised panel, the six chapters as numbered tiles */
.pg-guide{grid-template-columns:minmax(0,1fr) !important}
.pg-guide-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:24px;background:linear-gradient(180deg,rgba(44,48,52,.72),rgba(31,34,37,.64));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 50px 90px -50px rgba(0,0,0,.95)}
.pg-guide-tx h2{font-family:var(--head);font-size:var(--t-h2);font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:1.12}
.pg-guide-tx p{margin-top:14px !important;max-width:40ch;color:var(--mute);font-size:var(--t-body2);line-height:1.6}
.pg-guide-tx .pg-link{margin-top:24px}
.pg-guide-ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pg-guide-ch a{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--ink);text-decoration:none;font-weight:500;line-height:1.3;transition:background-color 212ms var(--cr),box-shadow 212ms var(--cr),transform 431ms var(--sp)}
.pg-guide-ch a:hover{background:rgba(67,194,91,.1);box-shadow:inset 0 0 0 1px rgba(143,227,157,.45);transform:translateY(-3px)}
.pg-guide-ch a:active{transform:translateY(-1px) scale(.98)}
.pg-guide-ch b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(67,194,91,.16);color:var(--acc-hi);font-variant-numeric:tabular-nums}
@media (max-width:899px){.pg-guide-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.pg-guide-ch{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pg-guide-ch a:is(:hover,:active){transform:none}}

/* =====================================================================================
   Depth instead of lines: sections are told apart by their
   bands and space, not rules; lists, product rows, tour rows and plain tiles become soft raised surfaces. Tables keep
   their row rules (they read rows), the legal contents list keeps its calm column.
   ===================================================================================== */
.pg-sec{border-top:0 !important}
.pg-sec:nth-of-type(even)::after{display:none !important}
.pg-sec:nth-of-type(even)::before{box-shadow:none !important}
.pg-final{border-top:0 !important}
.pg-items--plain .pg-item{border-top:0 !important;padding:20px 22px 22px !important;border-radius:16px !important;background:linear-gradient(180deg,rgba(44,48,52,.62),rgba(31,34,37,.55)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.045),0 28px 50px -36px rgba(0,0,0,.85) !important}
.pg-item:not(.pg-item--link):not(.pg-item--snip){border-top:0}
.pg-prod{border-top:0 !important;border-bottom:0 !important;padding:24px !important;margin-bottom:12px;border-radius:18px;background:linear-gradient(180deg,rgba(44,48,52,.62),rgba(31,34,37,.55));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.045),0 30px 56px -40px rgba(0,0,0,.9)}
.pg-stour-row{border-top:0 !important;border-bottom:0 !important;padding:16px 18px !important;margin-bottom:8px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background-color 212ms var(--cr),box-shadow 212ms var(--cr)}
.pg-stour-row:hover,.pg-stour-row[aria-selected="true"],.pg-stour-row.is-on{background:rgba(67,194,91,.08);box-shadow:inset 0 0 0 1px rgba(143,227,157,.3)}
.pg-flow-col li{border-top:0 !important;padding:8px 12px !important;margin-bottom:6px;border-radius:9px;background:rgba(255,255,255,.04)}
.pg-faqs .pg-faq+.pg-faq{border-top:0 !important;margin-top:8px !important}

/* TKB Monitor's network picture: two boxes of devices, the collector between them, two lines that
   fill with light the way the data goes; one 7 s round, calm. Phones: stacked, the lines run downwards. */
.pg-clip--html .nf{padding:22px;border-radius:18px;background:linear-gradient(180deg,rgba(40,44,48,.75),rgba(28,31,34,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06),0 40px 70px -46px rgba(0,0,0,.95)}
.nf-k{margin:0 0 14px !important;color:var(--faint);font-size:var(--t-small)}
.nf-row{display:grid;grid-template-columns:minmax(0,1fr) 56px 134px 56px minmax(0,1fr);align-items:center}
.nf-box{padding:14px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.nf-t{margin:0 0 10px !important;color:var(--ink);font-weight:600;font-size:14px}
.nf-box ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.nf-box li{display:flex;align-items:center;gap:9px;padding:7px 9px;min-width:0;overflow-wrap:anywhere;border-radius:9px;background:rgba(255,255,255,.045);color:var(--ink);font-size:13.5px;line-height:1.25}
.nf-ic{display:grid;place-items:center;width:18px;height:18px;flex:none;color:#cfd7d2}.nf-ic svg{width:18px;height:18px;fill:currentColor}
.nf-ic--win{color:#3aa6f5}.nf-ic--rpi{color:#d6336c}.nf-ic--rpi .lf{fill:#55c25a}.nf-ic svg .bl{fill:#202326}.nf-ic--tux .bk{fill:#f2b33d}
.nf-ic:not(.nf-ic--win):not(.nf-ic--rpi):not(.nf-ic--tux) svg{fill:none}
.nf-dot{width:7px;height:7px;margin-left:auto;flex:none;border-radius:50%;background:rgba(67,194,91,.35)}
.nf-n{margin:10px 0 0 !important;color:var(--faint);font-size:12.5px;line-height:1.4}
.nf-w{position:relative;display:grid;justify-items:center;gap:6px}
.nf-wl{max-width:56px;color:var(--faint);font-size:11.5px;line-height:1.2;letter-spacing:.02em;text-align:center}
.nf-wire{position:relative;width:100%;height:3px;border-radius:2px;background:rgba(240,243,241,.14);overflow:hidden}
.nf-wire b{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,rgba(67,194,91,.4),#8fe39d);box-shadow:0 0 12px rgba(67,194,91,.7);clip-path:inset(0 100% 0 0)}
.nf-core{display:grid;justify-items:center;gap:3px;padding:16px 10px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(67,194,91,.16),rgba(67,194,91,.06));box-shadow:inset 0 0 0 1px rgba(143,227,157,.45),0 18px 40px -22px rgba(67,194,91,.55);text-align:center}
.nf-core img{width:46px;height:auto;margin-bottom:4px}
.nf-core strong{color:var(--ink);font-size:16px}
.nf-core span{color:var(--mute);font-size:12px;line-height:1.35}
/* the round: devices with an agent light up (0-1.4 s), their line fills into the collector (1.4-2.4 s), the collector
   takes it (2.4 s), its line fills out (3.2-4.2 s), the devices it asks light up (4.2-5.6 s), then a calm pause */
@media (prefers-reduced-motion:no-preference){
  .nf-box--a .nf-dot{animation:nf-dot 7s calc(var(--i) * .3s) infinite}
  .nf-box--b .nf-dot{animation:nf-dot 7s calc(4.2s + var(--i) * .28s) infinite}
  .nf-w--in .nf-wire b{animation:nf-fill 7s 1.3s cubic-bezier(.4,0,.2,1) infinite}
  .nf-w--out .nf-wire b{animation:nf-fill 7s 3.2s cubic-bezier(.4,0,.2,1) infinite}
  .nf-core{animation:nf-core 7s 2.3s infinite}
}
@keyframes nf-dot{0%{background:rgba(67,194,91,.35);box-shadow:none}4%{background:#8fe39d;box-shadow:0 0 0 4px rgba(67,194,91,.22),0 0 12px rgba(67,194,91,.8)}16%,100%{background:rgba(67,194,91,.35);box-shadow:none}}
@keyframes nf-fill{0%{clip-path:inset(0 100% 0 0);opacity:1}14%{clip-path:inset(0 0 0 0);opacity:1}26%{clip-path:inset(0 0 0 0);opacity:0}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes nf-core{0%,100%{transform:none}4%{transform:scale(1.04,.97)}9%{transform:scale(.99,1.01)}13%{transform:none}}
@media (max-width:899px){
  .nf-row{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:0}
  .nf-w{height:58px;grid-template-columns:auto 3px auto;align-items:center;justify-content:center;gap:10px}
  .nf-wl{grid-column:1}
  .nf-wire{grid-column:2;width:3px;height:100%}
  .nf-wire b{background:linear-gradient(180deg,rgba(67,194,91,.4),#8fe39d);clip-path:inset(0 0 100% 0)}
  .nf-core{justify-self:center;width:min(100%,260px)}
  @keyframes nf-fill{0%{clip-path:inset(0 0 100% 0);opacity:1}14%{clip-path:inset(0 0 0 0);opacity:1}26%{clip-path:inset(0 0 0 0);opacity:0}100%{clip-path:inset(0 0 0 0);opacity:0}}
}

/* an Android app's clip: the whole screen in a phone's face (rounded glass, a thin dark bezel, a soft lift) */
.pg-clip--phone .pg-clip-in{border-radius:34px;box-shadow:0 0 0 7px #0b0c0d,0 0 0 8.5px rgba(255,255,255,.14),0 60px 100px -50px rgba(0,0,0,.95),0 0 90px -40px rgba(67,194,91,.18)}
.pg-clip--phone{padding:9px}

/* the Flick page's flame buddy (flame-buddy.js) */
.fb{position:fixed;left:0;top:0;z-index:150;pointer-events:none;will-change:transform}
.fb-body{transform-origin:50% 88%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.fb-body svg{display:block}
.fb-sh{position:absolute;left:18%;right:18%;bottom:-4px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent)}
.fb-z{position:fixed;z-index:151;pointer-events:none;color:#cfe9e5;font:600 12px/1 Onest,system-ui,sans-serif;animation:fb-z 1.8s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fb-z{0%{opacity:0;transform:translate(0,0) scale(.8)}20%{opacity:.85}100%{opacity:0;transform:translate(10px,-34px) scale(1.4)}}
/* the MySorty guide: text and screenshots in the live guide's order; the screenshots plain, at their
   own size, never zoomed or linked, MySorty's own white and green with no grey plate; the text larger and brighter */
.pg--guide .pg-gshots{margin:26px 0 34px}
.pg--guide .pg-gshots:first-child{margin-top:0}
.pg--guide .pg-gshots--row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.pg--guide .pg-gshot{margin:0;width:min(100%,var(--w,100%));flex:0 1 var(--w,100%);min-width:0}
.pg--guide .pg-gshot img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 26px 50px -30px rgba(0,0,0,.95);user-select:none;-webkit-user-drag:none;cursor:default}
.pg--guide .pg-shot--hero .pg-shot-win img{cursor:default}
.pg--guide .pg-sec-body :is(.pg-p,.pg-ul li){font-size:17px;line-height:1.72;color:rgba(236,241,238,.86)}
.pg--guide .pg-sec-body .pg-p{max-width:70ch}
.pg--guide .pg-sec-body .pg-p+.pg-p{margin-top:14px}
.pg--guide .pg-sec-body .pg-ul{margin:14px 0 18px}
.pg--guide .pg-sec-body .pg-ul li{padding:5px 0}
.pg--guide .pg-sec-body :is(strong,b){color:#fff;font-weight:650}
.pg--guide .pg-sec-head>p{font-size:17px;color:#8fe39d;max-width:70ch !important}
@media (max-width:640px){.pg--guide .pg-sec-body :is(.pg-p,.pg-ul li){font-size:16px;line-height:1.66}.pg--guide .pg-gshots--row{gap:16px}}
/* MySorty: the live page's two videos again: side by side, a picture until clicked, one privacy line */
.pg-vids{grid-template-columns:minmax(0,1fr) !important}
.pg-vids-in h2{margin:0 0 clamp(20px,3vh,28px)}
.pg-vids .pg-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.pg-vids figure{margin:0}
.pg-vids .tkb-yt{border-radius:14px;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 70px -40px rgba(0,0,0,.95);transition:transform 431ms var(--sp),box-shadow 212ms var(--cr)}
.pg-vids .tkb-yt:hover{transform:translateY(-3px)}
.pg-vids figcaption{margin-top:14px;font-weight:600;color:var(--ink);font-size:16px;line-height:1.4}
.pg-vids .tkb-yt-note{margin-top:22px;font-size:var(--t-micro);color:var(--faint)}
iframe.tkb-yt{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px}
@media (max-width:760px){.pg-vids .pg-videos{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pg-vids .tkb-yt:hover{transform:none}}
/* Datenschutz: the app privacy texts (TKB Assistant, Flick) inside section 8 / 8a, as hosted; their short version raised */
.pg-doc-embed .pg-doc-note{padding:16px 18px;border-radius:12px;background:rgba(67,194,91,.08);box-shadow:inset 0 0 0 1px rgba(143,227,157,.18);color:var(--ink)}
.pg-doc-embed .pg-table{margin:12px 0 16px}
.pg-doc-embed .pg-p+.pg-p{margin-top:10px}
.pg-doc-embed>.pg-doc-sub{margin-top:28px !important;color:var(--ink)}
/* a phone always fits on the screen whole, below the header */
.pg-clip--phone{box-sizing:border-box;width:min(100%,calc(var(--sw) * var(--kmax,1) * 1px + 18px),calc((100svh - 190px) * var(--sw) / var(--sh) + 18px))}
/* a benefit row (phone or app clip) is one centred pair: the text (at most 540 px) and the clip, close to the text on its side */
@media (min-width:1000px){
  .pg-ben:not(.pg-ben--wide):has(>.pg-clip){grid-template-columns:minmax(0,540px) min(var(--cw),calc(100% - 352px)) !important;justify-content:center}   /* (the clip keeps its width while the text keeps 280 px) */
  .pg-ben--flip:not(.pg-ben--wide):has(>.pg-clip){grid-template-columns:min(var(--cw),calc(100% - 352px)) minmax(0,540px) !important}
  .pg-ben:not(.pg-ben--wide)>.pg-clip{justify-self:start}
  .pg-ben--flip:not(.pg-ben--wide)>.pg-clip{justify-self:end}
}
/* the facts row with four tiles: 2 x 2 on tablets instead of three and one left over (desktop keeps one row of four) */
@media (min-width:520px) and (max-width:1099px){.pg-row-in:has(>div:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the wide benefit clips (MySorty, Monitor) under their two-column text: as wide as the text column, so the edges line up,
   unless that would make the clip taller than the screen; then it is centred under the text */
@media (min-width:1000px){
  .pg-ben--wide>.pg-clip,.pg-ben--wide.pg-ben--flip>.pg-clip{justify-self:center;width:min(100%,calc((100svh - 170px) * var(--sw) / var(--sh)))}
}
/* the Flick page's flame is the mouse pointer (flame-buddy.js): no system arrow; text fields keep their text cursor */
html.fb-cursor,html.fb-cursor *{cursor:none !important}
html.fb-cursor :is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),textarea,[contenteditable="true"]){cursor:text !important}
/* the flame is the mouse pointer: above everything (header 200, open menus, cookie banner), never behind them */
.fb--cur{z-index:2147483647;transition:none}
.fb--cur .fb-body{filter:drop-shadow(0 6px 9px rgba(0,0,0,.45))}
.fb-fx{position:fixed;inset:0;z-index:2147483646;width:100%;height:100%;pointer-events:none}