/* =========================================================
   CaptureTech public site - the glass material.

   Idiom carried over from InsightAndroid's landing.css: translucent surfaces
   that blur and tint the brand field behind them, depth from a bright inner
   top edge plus a wide soft shadow, radii from the --r-* scale, motion on
   transform/opacity only. Tokens come from tokens.css; no raw colour in the
   rules. The site-only shades tokens.css has no name for are defined once in
   the :root block below; a translucent colour is a color-mix() of a token with
   transparent (color-mix(in srgb, var(--cyan) 10%, transparent) is the cyan at
   alpha 0.10). The public site runs as data-ui="site", so only the :root tokens
   of tokens.css apply here, never the html[data-ui="next"] ones.

   Rules:
     - Surfaces get --glass-*, never flat white. Controls (buttons, fields) are
       the exception: solid, one shadow, no blur - a blurred click target reads
       as decoration.
     - Everything animated is off under prefers-reduced-motion and translucency
       is off under prefers-reduced-transparency.
     - Every block is <section class="blk blk-{type} bg-{x} pt-{x} pb-{x}"> with a
       .container inside; the block settings in the CMS map to these classes.
   ========================================================= */

/* ---------- Site-only shades: each literal lives here once ---------- */
:root{
  /* Dark sections (.bg-dark, .promo.dark, .plan.highlight): top-left to bottom-right. */
  --site-dark-1:#0d1521; --site-dark-2:#131f2f;
  /* CTA band, and the photo hero's fallback. */
  --site-cta-1:#0c1420; --site-cta-2:#16243a; --site-cta-3:#1b2c46;
  /* Footer, and the dark result tiles on a case. */
  --site-footer-1:#0b1220; --site-footer-2:#101a2a;
  /* The animated and video heroes: near-black navy. */
  --site-hero-1:#0c1626; --site-hero-2:#06090f; --site-hero-3:#05080d;
  /* The pale cyan head of the tracer that runs the arc in the animated hero (HeroBlock). */
  --site-hero-tracer:#bfefff;
  /* The light field's lower end, and the solid .bg-subtle without transparency. */
  --site-field-end:#eef4fa; --site-subtle-solid:#f2f6fa;
  /* The mid stop of the cyan-to-blue gradients (.bg-brand, .cta-banner.brand). */
  --site-brand-mid:#10a9e6; --site-cta-brand-mid:#0aa3de;
  /* Form states. */
  --site-success-ink:#0f6b36; --site-error-ink:#b3213c; --site-error-edge:#e0405f;
  /* Shadow and hairline base (the navy of --line), and the red button's shadow; used through color-mix(). */
  --site-shade:rgb(10,25,50); --site-red-shade:rgb(150,20,45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;line-height:1.62;
  color:var(--ink-2);
  background:var(--field);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;
}
main#main{flex:1 0 auto;}
header.site,footer.site{flex-shrink:0;}
/* The field. Fixed so glass samples a stable backdrop. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(58% 44% at 12% 4%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 70%),
    radial-gradient(46% 38% at 92% 12%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 72%),
    radial-gradient(52% 40% at 78% 88%, color-mix(in srgb, var(--red) 5%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ct-white-1000) 0%, var(--field) 46%, var(--site-field-end) 100%);
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--cyan-dark);outline-offset:3px;border-radius:4px;}
/* The page title takes focus after navigation (for screen readers); it is not a control, so no ring. */
:is(h1,h2,h3,[tabindex="-1"]):focus{outline:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.container.narrow{max-width:820px;}
.container.full{max-width:none;padding:0;}
section[id],div[id]{scroll-margin-top:var(--header-h);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;color:var(--ink);margin:0 0 16px;text-wrap:balance;}
h1{font-size:clamp(34px, 5.4vw, 60px);line-height:1.04;letter-spacing:-0.028em;}
h2{font-size:clamp(26px, 3.4vw, 40px);line-height:1.12;letter-spacing:-0.022em;}
h3{font-size:clamp(19px, 1.6vw, 23px);line-height:1.26;letter-spacing:-0.012em;}
h4{font-size:16px;line-height:1.3;letter-spacing:-0.008em;}
p{margin:0 0 16px;}
p:last-child{margin-bottom:0;}
.lede{font-size:clamp(17px, 1.35vw, 19.5px);line-height:1.58;color:var(--ink-3);max-width:60ch;}
strong,b{color:var(--ink);font-weight:700;}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--cyan-dark);margin-bottom:16px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent);flex-shrink:0;}
.section-head{max-width:66ch;margin:0 auto clamp(32px, 4vw, 52px);text-align:center;}
.section-head.left{margin-left:0;margin-right:0;text-align:left;}
.section-head .lede{margin-left:auto;margin-right:auto;}
.section-head.left .lede{margin-left:0;}
.rich h2,.rich h3{margin-top:32px;}
.rich ul,.rich ol{padding-left:22px;color:var(--ink-3);}
.rich a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Grid ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-6{grid-template-columns:repeat(6,minmax(0,1fr));}

/* ---------- Buttons: solid, never glass ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);transition-duration:.08s;}
.btn-primary{background:var(--red);color:var(--ct-text-on-accent);box-shadow:0 1px 2px color-mix(in srgb, var(--site-red-shade) 20%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--site-red-shade) 28%, transparent);}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 1px 2px color-mix(in srgb, var(--site-red-shade) 22%, transparent), 0 7px 16px -6px color-mix(in srgb, var(--site-red-shade) 32%, transparent);}
.btn-outline{background:transparent;color:var(--red);border-color:var(--red);}
.btn-outline:hover{background:var(--red);color:var(--ct-text-on-accent);}
.btn-ghost{background:var(--ct-white-1000);color:var(--ink);border-color:var(--line);box-shadow:0 1px 2px color-mix(in srgb, var(--site-shade) 6%, transparent);}
.btn-ghost:hover{border-color:color-mix(in srgb, var(--site-shade) 16%, transparent);box-shadow:0 2px 6px var(--line);}
.btn-ghost-invert{background:color-mix(in srgb, var(--ct-white-1000) 8%, transparent);color:var(--ct-white-1000);border-color:color-mix(in srgb, var(--ct-white-1000) 30%, transparent);}
.btn-ghost-invert:hover{background:color-mix(in srgb, var(--ct-white-1000) 15%, transparent);border-color:color-mix(in srgb, var(--ct-white-1000) 45%, transparent);}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-lg{padding:17px 34px;font-size:17px;}
.btn-block{width:100%;}
.btn .ico{width:16px;height:16px;}
.link-more{
  font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--ink);padding-bottom:3px;
  background-image:linear-gradient(var(--cyan), var(--cyan));background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease), color .24s ease;
}
.link-more:hover{color:var(--cyan-dark);background-size:100% 3px;}
.link-accent{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--red);display:inline-flex;align-items:center;gap:6px;transition:gap .26s var(--ease);}
.link-accent:hover{gap:11px;text-decoration:underline;text-underline-offset:3px;}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ---------- Tags ---------- */
.tag{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:12px;line-height:1;padding:7px 12px;border-radius:999px;background:var(--glass-thick);color:var(--ink-2);border:1px solid var(--glass-edge);}
.tag-brand{background:var(--cyan);color:var(--ct-text-on-brand);border-color:transparent;}
.tag-accent{background:var(--red);color:var(--ct-text-on-accent);border-color:transparent;}
.tag-outline{background:transparent;border-color:var(--line);color:var(--ink-3);}

/* ---------- Promo bar ---------- */
.promo{background:var(--cyan);color:var(--ct-text-on-brand);font-size:14px;font-weight:500;text-align:center;padding:9px 48px;position:relative;}
.promo[hidden]{display:none;}
.promo-close{position:absolute;right:10px;top:50%;width:30px;height:30px;margin-top:-15px;border:0;border-radius:50%;background:color-mix(in srgb, var(--ct-black-1000) 12%, transparent);color:var(--ct-text-on-brand);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.promo-close:hover{background:color-mix(in srgb, var(--ct-black-1000) 22%, transparent);}
.promo.dark{background:linear-gradient(160deg, var(--site-dark-1) 0%, var(--site-dark-2) 100%);}
.promo a{font-family:var(--font-head);font-weight:700;margin-left:10px;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Header ----------
   Transparent over the hero, frosts on scroll. The glass lives on a pseudo
   element whose opacity animates; animating backdrop-filter itself stutters. */
header.site{position:sticky;top:0;z-index:60;background:transparent;}
header.site::before{
  content:'';position:absolute;inset:0;
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  background:color-mix(in srgb, var(--ct-white-1000) 72%, transparent);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ct-white-1000) 60%, transparent) inset, 0 8px 32px -14px color-mix(in srgb, var(--site-shade) 22%, transparent);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
header.site.is-scrolled::before,html:not(.has-js) header.site::before{opacity:1;}
header.site > *{position:relative;}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:var(--maxw);margin:0 auto;padding:14px 24px;min-height:var(--header-h);transition:padding .4s var(--ease);}
header.site.is-scrolled .nav-wrap{padding-top:10px;padding-bottom:10px;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:-0.02em;flex-shrink:0;}
.brand svg,.brand img{height:30px;width:auto;}
nav.main{display:flex;align-items:center;gap:4px;}
nav.main > a,nav.main > .has-sub > a{
  font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink-3);
  padding:8px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;
  transition:color .24s ease, background-color .24s ease;
}
nav.main > a:hover,nav.main > .has-sub > a:hover{color:var(--ink);background:color-mix(in srgb, var(--ct-white-1000) 60%, transparent);}
nav.main a.active{color:var(--ink);background:var(--glass-thick);box-shadow:var(--shadow-sm);}
nav.main .has-sub{position:relative;}
nav.main .sub{
  position:absolute;top:calc(100% + 8px);left:0;min-width:240px;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  /* No backdrop blur here: a blurred layer that also fades and moves flashes a dark band over the hero in Chromium. */
  background:color-mix(in srgb, var(--ct-white-1000) 97%, transparent);
  border:1px solid var(--glass-edge);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease), transform .26s var(--ease), visibility .26s;
}
nav.main .has-sub:hover .sub,nav.main .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;}
nav.main .sub a{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink-2);padding:10px 12px;border-radius:var(--r-sm);}
nav.main .sub a:hover{background:color-mix(in srgb, var(--cyan) 10%, transparent);color:var(--ink);}
.nav-cta{display:flex;align-items:center;gap:10px;}
/* Customer portal entry: a ghost button next to the CTA; icon-only on small screens. */
.nav-portal{gap:7px;white-space:nowrap;}
.nav-portal .ico{flex-shrink:0;}
/* Icon-only when the menu would otherwise wrap: site.js sets .nav-tight after measuring, and
   below 1100px it is icon-only regardless (also the no-script fallback). */
header.site.nav-tight .nav-portal{padding:9px;}
header.site.nav-tight .nav-portal-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media (max-width:1100px){
  .nav-portal{padding:9px;}
  .nav-portal-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
}
.lang-switch{position:relative;display:flex;align-items:center;padding:3px;border-radius:999px;background:var(--glass-thin);border:1px solid var(--glass-edge);}
.lang-current{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);font-weight:700;font-size:11.5px;color:var(--ink);padding:5px 11px 5px 9px;border:0;border-radius:999px;background:var(--glass-thick);box-shadow:var(--inner-top), var(--shadow-sm);cursor:pointer;position:relative;z-index:2;}
.lang-current .ico{order:-1;transform:rotate(90deg);transition:transform .25s var(--ease);}
.lang-switch.is-open .lang-current .ico{transform:rotate(-90deg);}
/* The other languages fold out sideways as an overlay to the left of the pill, so nothing in the header moves. */
.lang-options{position:absolute;top:50%;right:calc(100% - 22px);transform:translateY(-50%) translateX(8px);display:flex;align-items:center;gap:2px;padding:3px 24px 3px 3px;border-radius:999px;background:var(--glass-thick);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--inner-top), var(--shadow-md);opacity:0;visibility:hidden;clip-path:inset(0 0 0 100% round 999px);transition:clip-path .32s var(--ease), opacity .2s ease, transform .32s var(--ease), visibility .32s;z-index:1;}
.lang-switch.is-open .lang-options{opacity:1;visibility:visible;clip-path:inset(0 0 0 0 round 999px);transform:translateY(-50%) translateX(0);}
.lang-options a{font-family:var(--font-head);font-weight:700;font-size:11.5px;color:var(--ink-3);padding:6px 11px;min-height:24px;display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap;transition:color .2s ease, background-color .2s ease;}
.lang-options a:hover{color:var(--ink);background:color-mix(in srgb, var(--ct-white-1000) 70%, transparent);}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:var(--glass);border:1px solid var(--glass-edge);border-radius:12px;cursor:pointer;box-shadow:var(--shadow-sm);}
.nav-toggle span{display:block;width:17px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .34s var(--ease), opacity .2s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- Site search ----------
   The header's button is icon-only like the portal's; the field opens as a glass sheet under the header (positioned on
   .nav-wrap, so nothing in the header moves). The field and its button are controls: solid. The suggestions hang under
   the field, in the sheet or on the search page. */
.nav-search{padding:9px;}
.site-search.is-open .nav-search{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);}
.search-panel{position:absolute;top:calc(100% - 4px);left:24px;right:24px;margin-left:auto;max-width:640px;padding:14px;z-index:5;
  background:color-mix(in srgb, var(--ct-white-1000) 90%, transparent);-webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--inner-top), var(--shadow-lg);}
.search-panel[hidden]{display:none;}
.search-form{position:relative;display:flex;gap:8px;align-items:center;}
.search-form input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--ct-white-1000);border:1px solid var(--line);border-radius:999px;padding:10px 18px;min-height:46px;transition:border-color .18s ease, box-shadow .18s ease;}
.search-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);}
.search-form .btn{min-height:46px;}
.search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:10;list-style:none;margin:0;padding:6px;
  background:var(--ct-white-1000);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:min(420px, 60vh);overflow-y:auto;}
.search-suggest[hidden]{display:none;}
.search-suggest a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);}
.search-suggest .title{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-suggest .kind{font-size:12.5px;color:var(--ink-3);flex-shrink:0;}
.search-suggest .all{font-size:14px;color:var(--blue);font-weight:600;}
.search-suggest [aria-selected="true"] a,.search-suggest a:hover{background:color-mix(in srgb, var(--cyan) 22%, transparent);box-shadow:inset 3px 0 0 var(--cyan);}
.search-head .search-form{margin-top:26px;max-width:640px;}
.search-head .hero-actions{margin-top:18px;}
.search-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.search-filters .tag{gap:7px;padding:8px 13px;min-height:32px;transition:background-color .18s ease, border-color .18s ease, color .18s ease;}
.search-filters .tag-outline:hover{border-color:var(--cyan);color:var(--ink);}
.search-filters .count{font-weight:500;opacity:.75;}
.search-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.search-hit{position:relative;padding:20px 24px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--inner-top), var(--shadow-sm);transition:background-color .3s ease, box-shadow .3s ease;}
.search-hit:hover{background:var(--glass-thick);box-shadow:var(--inner-top), var(--shadow-md);}
.search-hit .meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:var(--ink-3);}
.search-hit h2{font-size:clamp(18px, 1.5vw, 21px);line-height:1.3;margin:0 0 6px;}
/* The whole card is the link; the title's link stretches over it. */
.search-hit h2 a::after{content:'';position:absolute;inset:0;border-radius:inherit;}
.search-hit p{font-size:15px;color:var(--ink-3);margin:0 0 6px;}
.search-hit .url{font-size:13px;color:var(--ink-3);word-break:break-all;}
.search-hit mark{background:color-mix(in srgb, var(--cyan) 22%, transparent);color:var(--ink);border-radius:3px;padding:0 2px;}
.search-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;font-size:14px;color:var(--ink-3);}

/* ---------- Blocks: background and spacing map ---------- */
.blk{position:relative;}
.pt-none{padding-top:0;} .pt-sm{padding-top:clamp(20px,2.5vw,32px);} .pt-md{padding-top:clamp(32px,4vw,52px);} .pt-lg{padding-top:clamp(40px,5vw,72px);}
.pb-none{padding-bottom:0;} .pb-sm{padding-bottom:clamp(20px,2.5vw,32px);} .pb-md{padding-bottom:clamp(32px,4vw,52px);} .pb-lg{padding-bottom:clamp(40px,5vw,72px);}
/* Two blocks on the same background sit closer together than the padding scale alone would put them. */
/* Two sections on the same background share one gap: the second keeps a modest top padding so a titled section still breathes. */
.blk.bg-page + .blk.bg-page.pt-lg,.blk.bg-subtle + .blk.bg-subtle.pt-lg{padding-top:clamp(28px,3.5vw,48px);}
.bg-page{}
.bg-subtle{background:linear-gradient(180deg, color-mix(in srgb, var(--ct-white-1000) 55%, transparent) 0%, color-mix(in srgb, var(--ct-white-1000) 30%, transparent) 100%);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.bg-dark{background:linear-gradient(160deg, var(--site-dark-1) 0%, var(--site-dark-2) 100%);color:color-mix(in srgb, var(--ct-white-1000) 76%, transparent);}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:var(--ct-white-1000);}
.bg-dark p{color:color-mix(in srgb, var(--ct-white-1000) 72%, transparent);} .bg-dark .lede{color:color-mix(in srgb, var(--ct-white-1000) 66%, transparent);} .bg-dark .eyebrow{color:var(--cyan);}
.bg-brand{background:linear-gradient(150deg, var(--cyan) 0%, var(--site-brand-mid) 60%, var(--blue) 140%);color:var(--ct-text-on-brand);}
.bg-brand h1,.bg-brand h2,.bg-brand h3,.bg-brand p,.bg-brand .lede,.bg-brand .eyebrow{color:var(--ct-text-on-brand);}
.blk-placeholder{
  border:1.5px dashed color-mix(in srgb, var(--blue) 35%, transparent);border-radius:var(--r);padding:28px;
  background:color-mix(in srgb, var(--cyan) 5%, transparent);color:var(--ink-3);font-size:14px;
}
.blk-placeholder b{color:var(--blue);font-family:var(--font-head);}

/* ---------- Glass cards ---------- */
.card{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--inner-top), var(--shadow-sm);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), background-color .3s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);background:var(--glass-thick);box-shadow:var(--inner-top), var(--shadow-md);}
.card h3{margin-bottom:10px;}
/* The card's heading is its link: it keeps the heading's colour and grows the whole card's
   hover state, so the arrow in .foot is decoration rather than the only way in. */
.card h3 a.card-link{color:inherit;text-decoration:none;}
.card:hover h3 a.card-link,.card h3 a.card-link:hover{text-decoration:underline;text-underline-offset:3px;}
.card h3 a.card-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}
.card p{color:var(--ink-3);font-size:14.5px;}
.card .media{margin:-28px -28px 20px;aspect-ratio:16/9;background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--blue) 10%, transparent));border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;}
.card .media img{width:100%;height:100%;object-fit:cover;}
/* Product shots are cut-outs on white: show the whole object, never crop it. */
.card.product .media{aspect-ratio:4/3;background:var(--ct-white-1000);}
.card.product .media img{object-fit:contain;padding:18px;box-sizing:border-box;}
.card .meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;color:var(--ink-4);}
.card .foot{margin-top:auto;padding-top:16px;}
.card.flush{padding:0;}
.card.flush .media{margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.card.flush .body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px);}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(28px,5vw,64px);align-items:center;}
.hero-grid.single{grid-template-columns:minmax(0,760px);}
.hero-visual{position:relative;}
.hero-visual .frame{aspect-ratio:5/4;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 22%, transparent), color-mix(in srgb, var(--blue) 14%, transparent));border:1px solid var(--glass-edge);box-shadow:var(--inner-top), var(--shadow-lg);}
.hero-visual img{width:100%;height:100%;object-fit:cover;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.feature-row .hero-actions,.case-feature .hero-actions{margin-top:30px;}
.rich + .hero-actions,.lede + .hero-actions{margin-top:36px;}
.hero-video{background:var(--site-hero-3);color:var(--ct-white-1000);min-height:min(78vh, 760px);display:flex;align-items:center;text-align:center;}
.hero-video video,.hero-video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.55;}
.hero-video .container{position:relative;max-width:900px;}
.hero-video h1{color:var(--ct-white-1000);font-size:clamp(38px,6.4vw,84px);font-weight:300;}
.hero-video h1 b{font-weight:700;color:var(--ct-white-1000);}
.hero-video .lede{color:color-mix(in srgb, var(--ct-white-1000) 72%, transparent);margin:0 auto;}
.hero-video .eyebrow{color:var(--cyan);justify-content:center;}
.hero-video .hero-actions{justify-content:center;}
.hero-video .mark{position:absolute;right:-6%;top:10%;width:38vw;max-width:520px;opacity:0.16;pointer-events:none;}
.hero-photo{min-height:520px;display:flex;align-items:flex-end;color:var(--ct-white-1000);background:linear-gradient(135deg, var(--site-cta-3), var(--site-dark-1));}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, color-mix(in srgb, var(--ct-black-1000) 0%, transparent) 20%, color-mix(in srgb, var(--ct-black-1000) 72%, transparent) 100%);}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-photo .container{position:relative;z-index:1;padding-bottom:48px;}
.hero-photo h1{color:var(--ct-white-1000);max-width:20ch;}
.hero-photo .eyebrow{color:var(--cyan);font-size:13px;letter-spacing:.12em;text-shadow:0 1px 8px color-mix(in srgb, var(--ct-black-1000) 60%, transparent);}
.hero-photo .lede{color:color-mix(in srgb, var(--ct-white-1000) 75%, transparent);}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-3);margin-bottom:18px;}
.crumbs span{opacity:.5;}
.crumbs a:hover{color:var(--ink);}
.hero-photo .crumbs{color:color-mix(in srgb, var(--ct-white-1000) 92%, transparent);text-shadow:0 1px 8px color-mix(in srgb, var(--ct-black-1000) 60%, transparent);}

/* ---------- Feature split ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.feature-row.reverse{direction:rtl;} .feature-row.reverse > *{direction:ltr;}
.feature-row .visual{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 20%, transparent), color-mix(in srgb, var(--blue) 12%, transparent));border:1px solid var(--glass-edge);box-shadow:var(--inner-top), var(--shadow-md);}
/* Feature visuals take the image's own proportions so nothing is cropped; a cap keeps portrait shots in check. */
.feature-row .visual img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;}
.usps{list-style:none;padding:0;margin:22px 0 8px;display:grid;gap:10px;}
.usps li{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--ink);}
.usps li::before{content:'';width:18px;height:18px;flex-shrink:0;margin-top:3px;border-radius:50%;background:var(--cyan);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/70% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/70% no-repeat;}

/* ---------- Techniques (photo card + brand arc) ---------- */
.techniques{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:center;}
.techniques .visual{position:relative;aspect-ratio:4/3;max-width:560px;padding-left:9%;}
.techniques .photo{position:absolute;inset:0 0 0 9%;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 22%, transparent), color-mix(in srgb, var(--blue) 12%, transparent));border:1px solid var(--glass-edge);box-shadow:var(--inner-top), var(--shadow-md);}
.techniques .photo img{width:100%;height:100%;object-fit:cover;}
.techniques .arc{position:absolute;left:0;top:50%;height:62%;width:auto;transform:translateY(-50%);filter:drop-shadow(0 8px 20px color-mix(in srgb, var(--cyan) 30%, transparent));}
.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px;}

/* ---------- Logo wall ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
.logo-wall .tile{aspect-ratio:7/4;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);border-radius:var(--r);box-shadow:var(--inner-top), var(--shadow-sm);font-family:var(--font-head);font-weight:700;color:var(--ink-4);font-size:15px;text-align:center;}
.logo-wall .tile img{max-height:44px;filter:grayscale(1);opacity:0.8;}
.logo-wall-foot{text-align:center;margin-top:28px;}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.stat .value{font-family:var(--font-head);font-weight:700;font-size:clamp(36px,4.5vw,60px);line-height:1;letter-spacing:-0.02em;color:var(--cyan);font-variant-numeric:tabular-nums;}
.stat .label{margin-top:8px;color:color-mix(in srgb, var(--ct-white-1000) 70%, transparent);font-size:15px;}
.bg-page .stat .label,.bg-subtle .stat .label{color:var(--ink-3);}

/* ---------- Case tabs ---------- */
.tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;}
.tabs [role="tab"]{font-family:var(--font-head);font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;transition:background-color .2s ease, color .2s ease;}
.tabs [role="tab"]:hover{color:var(--ink);background:color-mix(in srgb, var(--ct-white-1000) 60%, transparent);}
.tabs [role="tab"][aria-selected="true"]{background:var(--ink);color:var(--ct-white-1000);}
/* Tab panels share one grid cell: hidden ones stay in the layout (invisible) so every tab has the same height. */
.tab-panels{display:grid;}
.tab-panels > [role="tabpanel"]{grid-area:1 / 1;}
.tab-panels > [role="tabpanel"][hidden]{display:block;visibility:hidden;pointer-events:none;}
.tab-panels .case-feature{height:100%;}
.case-feature{display:grid;grid-template-columns:1fr 1fr;background:var(--glass-thick);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--inner-top), var(--shadow-md);}
.case-feature .visual{min-height:360px;background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 22%, transparent), color-mix(in srgb, var(--blue) 12%, transparent));}
.case-feature .visual img{width:100%;height:100%;object-fit:cover;}
.case-feature .body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:12px;}
.case-feature .customer{font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--cyan-dark);}
.case-feature .quote{font-size:18px;line-height:1.55;color:var(--ink);}
.case-feature .author{font-size:14px;color:var(--ink-3);}

/* ---------- CTA band ---------- */
.cta-banner{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(32px, 4.5vw, 56px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:var(--shadow-lg);
  background:linear-gradient(150deg, var(--site-cta-1) 0%, var(--site-cta-2) 58%, var(--site-cta-3) 100%);color:var(--ct-white-1000);
}
.cta-banner.brand{background:linear-gradient(150deg, var(--cyan) 0%, var(--site-cta-brand-mid) 55%, var(--blue) 140%);}
.cta-banner::before{content:'';position:absolute;width:60%;padding-bottom:60%;top:-30%;right:-12%;border-radius:50%;background:radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 72%);filter:blur(40px);pointer-events:none;}
.cta-banner.brand::before{background:radial-gradient(closest-side, color-mix(in srgb, var(--ct-white-1000) 35%, transparent), transparent 72%);}
.cta-banner > *{position:relative;z-index:1;}
.cta-banner h2{color:var(--ct-white-1000);margin-bottom:10px;font-size:clamp(23px, 2.4vw, 31px);}
.cta-banner .rich,.cta-banner p{color:color-mix(in srgb, var(--ct-white-1000) 75%, transparent);margin-bottom:0;max-width:56ch;}
.cta-banner .rich p{color:inherit;margin:0;}

/* ---------- Forms: solid controls ---------- */
.form-split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start;}
.form-card{background:var(--glass-thick);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--inner-top), var(--shadow-md);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink);}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--ct-white-1000);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;min-height:48px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);}
.field .help{font-size:13px;color:var(--ink-4);}
.field.invalid input,.field.invalid textarea{border-color:var(--red);}
.field .error{font-size:13px;color:var(--red-dark);}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);}
.check input{width:20px;height:20px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--cyan);}
.check > span{line-height:20px;}
.radios{display:flex;gap:18px;flex-wrap:wrap;}
.radios label{display:flex;gap:8px;align-items:center;font-size:15px;}
.radios input{accent-color:var(--cyan);width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none;}
.form-success{padding:20px;border-radius:var(--r);background:color-mix(in srgb, var(--ct-status-success) 10%, transparent);border:1px solid color-mix(in srgb, var(--ct-status-success) 30%, transparent);color:var(--site-success-ink);}
.honeypot{position:absolute;left:-9999px;opacity:0;}

/* ---------- FAQ ---------- */
.faq-split{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start;}
.faq-list{max-width:820px;}
.faq-item{background:var(--glass-thin);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);border-radius:var(--r);padding:4px 22px;margin-bottom:10px;box-shadow:var(--shadow-sm);transition:background-color .3s ease, box-shadow .3s ease;}
.faq-item[open]{background:var(--glass-thick);box-shadow:var(--inner-top), var(--shadow-md);}
.faq-item summary{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'';flex-shrink:0;width:13px;height:13px;background:linear-gradient(var(--cyan-dark), var(--cyan-dark)) center/13px 2px no-repeat, linear-gradient(var(--cyan-dark), var(--cyan-dark)) center/2px 13px no-repeat;transition:transform .34s var(--ease);}
.faq-item[open] summary::after{transform:rotate(90deg);background-size:13px 2px, 0 0;}
.faq-item .answer{margin:0 0 20px;color:var(--ink-3);font-size:14.5px;max-width:70ch;}

/* ---------- Price table ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start;}
.plan{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);border-radius:var(--r-lg);padding:30px;box-shadow:var(--inner-top), var(--shadow-sm);display:flex;flex-direction:column;gap:18px;}
.plan.highlight{background:linear-gradient(160deg, var(--site-dark-1) 0%, var(--site-dark-2) 100%);color:color-mix(in srgb, var(--ct-white-1000) 80%, transparent);border-color:var(--glass-dark-edge);box-shadow:var(--shadow-lg);}
.plan .name{font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--ink);}
.plan.highlight .name{color:var(--cyan);}
.plan .price{font-family:var(--font-head);font-weight:700;font-size:40px;letter-spacing:-0.02em;color:var(--ink);line-height:1;}
.plan.highlight .price{color:var(--ct-white-1000);}
.plan .period{font-size:14px;color:var(--ink-4);margin-left:6px;}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px;}
.plan li{display:flex;gap:10px;align-items:flex-start;}
.plan li::before{content:'✓';color:var(--cyan);font-weight:700;}
.plan .btn{margin-top:auto;}

/* ---------- Divider ---------- */
.divider-line{border:0;border-top:1px solid var(--line);margin:0;}
.divider-space{height:48px;}

/* ---------- Consent ---------- */
.consent{position:fixed;left:16px;bottom:16px;z-index:80;max-width:480px;padding:24px;background:color-mix(in srgb, var(--ct-white-1000) 88%, transparent);-webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--inner-top), var(--shadow-lg);}
.consent h3{font-size:17px;margin-bottom:8px;}
.consent p{font-size:14px;color:var(--ink-3);margin-bottom:16px;}
.consent .actions{gap:10px;}
.consent .actions{flex-wrap:wrap;}
.consent p a{color:inherit;text-decoration:underline;}
.consent-choices{display:grid;gap:10px;margin:0 0 16px;}
.consent [hidden]{display:none !important;}
.consent-choice{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-3);line-height:1.45;cursor:pointer;}
.consent-choice input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--blue);}
.consent-choice b{color:var(--ink);font-weight:600;}

/* ---------- Footer (minimal) ---------- */
/* Footer links carry padding and a min-height so every tap target is at least 24 px
   (WCAG 2.5.8): they were 19-21 px, which on a phone is a miss as often as a hit. */
footer.site{padding:36px 0 18px;background:linear-gradient(170deg, var(--site-footer-1) 0%, var(--site-footer-2) 100%);color:color-mix(in srgb, var(--ct-white-1000) 62%, transparent);position:relative;overflow:hidden;font-size:13px;}
footer.site .mark{position:absolute;right:-30px;top:-10px;width:220px;opacity:0.08;pointer-events:none;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px 28px;margin-bottom:22px;position:relative;}
.footer-grid h4{color:var(--cyan);font-size:11px;text-transform:uppercase;letter-spacing:0.09em;margin-bottom:8px;font-family:var(--font-head);font-weight:700;}
.footer-grid a{display:block;color:color-mix(in srgb, var(--ct-white-1000) 60%, transparent);font-size:13px;padding:3px 0;margin-bottom:2px;min-height:24px;transition:color .2s ease;}
.footer-grid a:hover{color:var(--cyan);}
.footer-brand .brand{margin-bottom:8px;color:var(--ct-white-1000);}
.footer-brand .tagline{font-family:var(--font-head);font-weight:400;font-size:14px;color:color-mix(in srgb, var(--ct-white-1000) 85%, transparent);margin-bottom:8px;}
.footer-brand p{color:color-mix(in srgb, var(--ct-white-1000) 45%, transparent);font-size:12.5px;max-width:44ch;margin:0;line-height:1.55;}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.badges span{border:1px solid color-mix(in srgb, var(--ct-white-1000) 14%, transparent);border-radius:5px;padding:2px 7px;font-size:11px;color:color-mix(in srgb, var(--ct-white-1000) 50%, transparent);}
.footer-bottom{border-top:1px solid color-mix(in srgb, var(--ct-white-1000) 8%, transparent);padding-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:color-mix(in srgb, var(--ct-white-1000) 40%, transparent);position:relative;}
.footer-bottom a{display:inline-block;margin-left:18px;padding:3px 0;min-height:24px;color:color-mix(in srgb, var(--ct-white-1000) 50%, transparent);}
.footer-bottom a:hover{color:var(--ct-white-1000);}

/* ---------- Scroll reveal ---------- */
.has-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.has-js .reveal.in-view{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:1200px){ nav.main{gap:0;} nav.main > a,nav.main > .has-sub > a{padding:8px 10px;} .nav-cta{gap:8px;} }
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .feature-row,.feature-row.reverse{grid-template-columns:1fr;direction:ltr;}
  .techniques,.form-split,.faq-split,.case-feature{grid-template-columns:1fr;}
  .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr));}
  .plans{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:900px){
  nav.main{
    position:fixed;top:var(--header-h);left:12px;right:12px;flex-direction:column;align-items:stretch;gap:2px;padding:12px;
    background:color-mix(in srgb, var(--ct-white-1000) 90%, transparent);-webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
    border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--inner-top), var(--shadow-lg);
    max-height:calc(100vh - var(--header-h) - 24px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.98);transform-origin:top center;
    transition:opacity .3s var(--ease), transform .34s var(--ease), visibility .34s;
  }
  nav.main.open,html:not(.has-js) nav.main{opacity:1;visibility:visible;transform:none;}
  nav.main > a,nav.main > .has-sub > a{padding:12px 14px;font-size:15px;border-radius:var(--r-sm);}
  nav.main .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 6px 12px;}
  .nav-toggle{display:flex;}
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-6{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:620px){
  .container{padding:0 18px;}
  .grid-2,.form-grid,.link-grid{grid-template-columns:1fr;}
  .cta-banner{flex-direction:column;align-items:flex-start;}
  .cta-banner .btn,.hero-actions .btn{width:100%;}
  .stats{grid-template-columns:1fr 1fr;}
  .logo-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-cta > .btn-primary{display:none;}   /* the header's contact button; the search panel's own button stays */
  .consent{left:8px;right:8px;bottom:8px;max-width:none;}
  .search-panel{left:12px;right:12px;padding:10px;}
  .search-hit{padding:18px;}
}
@media (max-width:520px){
  .nav-wrap{padding:10px 16px;gap:8px;}
  .brand{font-size:17px;} .brand svg,.brand img{height:24px;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  .has-js .reveal{opacity:1;transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  body::before{background:linear-gradient(180deg, var(--ct-white-1000) 0%, var(--field) 100%);}
  header.site::before,.card,.logo-wall .tile,.faq-item,.plan,.case-feature,.form-card,.bg-subtle,.lang-switch,.nav-toggle,nav.main,nav.main .sub,.consent,.search-panel,.search-hit{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .card,.logo-wall .tile,.faq-item,.plan:not(.highlight),.case-feature,.form-card,.consent,nav.main .sub,.search-panel,.search-hit{background:var(--ct-white-1000);}
  header.site::before{background:var(--ct-white-1000);}
  .bg-subtle{background:var(--site-subtle-solid);}
}
@media print{ header.site,footer.site,.consent,.promo{display:none;} body::before{display:none;} body{background:var(--ct-white-1000);} }

/* Structure-only pages (no block content yet). */
.hero-empty{padding:clamp(56px,9vw,120px) 0 clamp(56px,8vw,104px);min-height:52vh;display:flex;align-items:center;}
.hero-empty .mark{position:absolute;right:-60px;top:50%;transform:translateY(-50%);opacity:0.06;pointer-events:none;}
.hero-empty .container{position:relative;width:100%;}
.hero-empty h1{max-width:16ch;}
.hero-empty .lede{max-width:52ch;}
.hero-empty .crumbs{display:flex;gap:8px;font-size:14px;font-weight:500;color:var(--ink-3);margin-bottom:18px;}
.hero-empty .crumbs a{color:inherit;text-decoration:none;}
.hero-empty .crumbs a:hover{color:var(--ink);}

/* Skip link, anchors under the sticky header, form states. */
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--ct-white-1000);border-radius:10px;font-weight:600;transition:top .15s ease;}
.skip:focus{top:12px;outline:2px solid var(--cyan);outline-offset:2px;}
.anchor-target{display:block;position:relative;top:calc(-1 * var(--header-h, 72px));visibility:hidden;}
.form-success{text-align:center;padding:32px 16px;}
.form-success .icon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--cyan) 14%, transparent);color:var(--blue);}
.form-success .icon svg{width:26px;height:26px;}
.form-success h3{margin-bottom:6px;}
.form-success p{color:var(--ink-3);margin:0;}
.form-error{padding:10px 14px;border-radius:10px;background:color-mix(in srgb, var(--red) 8%, transparent);color:var(--site-error-ink);font-size:14px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--site-error-edge);box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);}
.form-step-head h4{margin:8px 0 0;font-size:15px;color:var(--ink-3);}
.has-sub.is-open .sub{opacity:1;visibility:visible;transform:none;}
html.nav-open{overflow:hidden;}
.blk-divider-wrap.pt-lg{padding-top:0;} .blk-divider-wrap.pb-lg{padding-bottom:0;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .hero-video video{display:none;} }

/* ---------- Content detail: typed fields ---------- */
.detail-hero{min-height:38vh;}
.detail-hero .crumbs,.hero-photo .crumbs{display:flex;gap:8px;font-size:14px;margin-bottom:18px;}
.hero-photo .crumbs a{color:color-mix(in srgb, var(--ct-white-1000) 92%, transparent);} .hero-photo .crumbs a:hover{color:var(--ct-white-1000);text-decoration:underline;} .hero-photo .crumbs span{color:color-mix(in srgb, var(--ct-white-1000) 55%, transparent);}
.detail-fields{padding:clamp(28px,4vw,48px) 0 0;}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;}
.detail-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.detail-visual img:first-child{grid-column:1 / -1;width:100%;border-radius:var(--r-lg);background:var(--ct-white-1000);padding:24px;object-fit:contain;aspect-ratio:4/3;box-shadow:var(--shadow-sm);}
.detail-visual img.thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--ct-white-1000);}
.usp-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;}
.usp-list li{position:relative;padding-left:30px;font-size:16px;}
.usp-list li::before{content:'';position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb, var(--cyan) 16%, transparent);}
.usp-list li::after{content:'';position:absolute;left:5px;top:9px;width:8px;height:5px;border-left:2px solid var(--ct-text-on-brand);border-bottom:2px solid var(--ct-text-on-brand);transform:rotate(-45deg);}
.detail-h2{margin-top:clamp(28px,4vw,48px);font-size:24px;}
.spec-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px;}
.spec-table th{text-align:left;width:32%;padding:12px 14px;font-weight:600;color:var(--ink-2);background:color-mix(in srgb, var(--ct-white-1000) 60%, transparent);border-bottom:1px solid var(--line);}
.spec-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-3);}
.case-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;}
.case-logo{max-height:48px;max-width:200px;margin-bottom:18px;}
.pull-quote{margin:0 0 18px;padding:22px 26px;border-left:4px solid var(--cyan);background:var(--glass);border-radius:0 var(--r-lg) var(--r-lg) 0;}
.pull-quote p{font-family:var(--font-head);font-weight:300;font-size:22px;line-height:1.4;margin:0 0 10px;color:var(--ink);}
.pull-quote footer{font-size:14px;color:var(--ink-3);}
.case-solutions{color:var(--ink-3);font-size:15px;}
.case-results{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.case-results .result{padding:20px;border-radius:var(--r-lg);background:var(--site-footer-1);color:var(--ct-white-1000);}
.case-results .value{font-family:var(--font-head);font-weight:700;font-size:34px;line-height:1;color:var(--cyan);}
.case-results .label{margin-top:8px;font-size:13.5px;color:color-mix(in srgb, var(--ct-white-1000) 70%, transparent);}
.event-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.event-meta > div{padding:16px 18px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge);}
.event-meta .k{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);margin-bottom:4px;}
.event-meta .v{font-weight:600;color:var(--ink);}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--ink-4);margin-bottom:22px;}
.article-hero{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-md);}
.case-feature .body .solutions{font-size:14px;color:var(--ink-3);margin:8px 0 14px;}
.card .meta .date{margin-left:auto;}
@media (max-width:900px){ .detail-grid,.case-intro{grid-template-columns:1fr;} .case-results{grid-template-columns:1fr 1fr;} }

/* ---------- Animated hero: the brand film in SVG + CSS ----------
   Timeline (s): 0 beams · .25 dots · .65 tracer · .75 wireframe · 1.15 ring · 1.45 construction lines
   · 1.6 hatch · 1.9 arc fills blue from its tip · 2.15 snap to logo size · 2.2 T fills · 2.5 slide left,
   wordmark fades in whole · 2.85 bar · 3.15 tagline · 3.45 subtitle · 3.6 CTA. */
.hero-motion{padding:clamp(40px,6vw,80px) 0;--p:0;--ease:cubic-bezier(.2,.8,.2,1);background:radial-gradient(120% 90% at 50% 20%, var(--site-hero-1) 0%, var(--site-hero-2) 55%, var(--site-hero-3) 100%);color:var(--ct-white-1000);min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));display:flex;align-items:center;text-align:center;overflow:hidden;}
.hero-motion .motion{position:absolute;inset:0;pointer-events:none;}
.hero-motion .glow{position:absolute;left:50%;top:42%;width:min(110vw,1100px);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(1 + var(--p) * .35));background:radial-gradient(circle, color-mix(in srgb, var(--cyan) 16%, transparent) 0%, color-mix(in srgb, var(--blue) 8%, transparent) 32%, color-mix(in srgb, var(--ct-black-1000) 0%, transparent) 62%);filter:blur(12px);opacity:0;animation:ct-glow-in 1s ease 1.9s both;}
.hero-motion .dots{position:absolute;inset:-20% 0 0;background-image:radial-gradient(color-mix(in srgb, var(--ct-white-1000) 9%, transparent) 1px, transparent 1.5px);background-size:34px 34px;mask-image:radial-gradient(ellipse at 50% 45%, var(--ct-black-1000) 15%, transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%, var(--ct-black-1000) 15%, transparent 65%);transform:translateY(calc(var(--p) * -80px));opacity:0;animation:ct-fade-in .8s ease 2.2s both;}
.hero-motion .container{position:relative;width:100%;max-width:1040px;transform:translateY(calc(var(--p) * 70px));opacity:calc(1 - var(--p) * 1.2);}
/* The film canvas carries empty rows above and below the visible logo (room for the beams and the bar during
   the animation). Negative margins trim both so the visible content, not the canvas, is what sits centred. */
.hero-motion .brand-film{display:block;width:min(92vw,900px);height:auto;margin:clamp(-110px,-11vw,-28px) auto clamp(-96px,-9.5vw,-24px);translate:0 var(--rise,0px);animation:ct-rise .6s cubic-bezier(.5,0,.2,1) 2.5s both;overflow:visible;transform:translateY(calc(var(--p) * -40px)) scale(calc(1 + var(--p) * .08));}
.hero-motion .tag-underline{width:0;height:1.5px;margin:12px auto 0;background:var(--cyan);opacity:0;animation:ct-underline .8s var(--ease) 3.25s both;}
.hero-motion h1{color:var(--ct-white-1000);font-size:clamp(34px,4.8vw,64px);font-weight:300;line-height:1.08;margin:0 auto;max-width:18ch;opacity:0;filter:blur(8px);animation:ct-text-in .55s var(--ease) 3.15s both;}
.hero-motion h1 b{font-weight:700;color:var(--ct-white-1000);}
.hero-motion .lede{color:color-mix(in srgb, var(--ct-white-1000) 74%, transparent);margin:14px auto 0;max-width:60ch;opacity:0;animation:ct-text-in .55s var(--ease) 3.45s both;}
.hero-motion .eyebrow{color:var(--cyan);justify-content:center;opacity:0;animation:ct-text-in .55s var(--ease) 3.05s both;}
.hero-motion .hero-actions{justify-content:center;opacity:0;animation:ct-text-in .55s var(--ease) 3.6s both;}
.hero-motion .scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:1.5px solid color-mix(in srgb, var(--ct-white-1000) 35%, transparent);border-radius:14px;opacity:0;animation:ct-fade-in .8s ease 3.9s both;}
.hero-motion .scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--cyan);animation:ct-cue 1.8s ease-in-out infinite;}

/* Phase 0: beams streak in and meet */
.brand-film .beam{stroke-dasharray:170 1400;stroke-dashoffset:170;opacity:0;animation:ct-beam .4s cubic-bezier(.35,0,.15,1) both, ct-beam-fade .18s ease .42s both;}
.brand-film .beam.b1{animation-delay:0s,.42s;} .brand-film .beam.b2{animation-delay:.04s,.45s;} .brand-film .beam.b3{animation-delay:.07s,.48s;}
/* The mark group: 3.1x during construction, snaps to logo size, then slides left */
.brand-film .markgrp{transform-box:view-box;transform-origin:21px 22.5px;transform:translate(106.5px,0) scale(3.1);animation:ct-shrink .14s cubic-bezier(.7,0,.3,1) 2.15s both, ct-slide .28s cubic-bezier(.5,0,.2,1) 2.5s forwards;}
/* Phase 1: dot matrix pops in, then fades as the tracer takes over */
.brand-film .dot{fill:var(--ct-white-1000);opacity:0;transform-box:fill-box;transform-origin:center;animation:ct-dot-in .2s var(--ease) both, ct-dot-out .25s ease both;}
.brand-film .dot.blue{fill:var(--cyan);}
/* Outline dots: the matrix collapses to dots along the edges before the tracer draws them */
.brand-film .odot{fill:var(--ct-white-1000);opacity:0;animation:ct-odot-in .18s ease both, ct-fade-out .25s ease .95s both;}
.brand-film .odot.blue{fill:var(--cyan);}
/* Phase 2: tracer runs the outer arc, wireframe draws, vertices and crosses appear */
.brand-film .tracer{stroke-dasharray:14 400;stroke-dashoffset:14;opacity:0;animation:ct-tracer .6s cubic-bezier(.3,0,.2,1) .65s both;}
.brand-film .tracer.trail{stroke-dasharray:26 400;stroke-dashoffset:26;opacity:.45;animation:ct-tracer-trail .6s cubic-bezier(.3,0,.2,1) .66s both;}
.brand-film .wire .wl{stroke-dasharray:200;stroke-dashoffset:200;opacity:.85;animation:ct-draw .55s var(--ease) .75s both, ct-fade-out .25s ease 1.9s both;}
.brand-film .wire .wl:nth-child(2){animation-delay:.83s,1.9s;}
/* Measurement ticks along the T and the arc ends, like the blueprint in the film */
.brand-film .ticks{stroke-dasharray:.5 1.55;stroke-dashoffset:0;opacity:0;animation:ct-ticks .4s ease .95s both, ct-fade-out .2s ease 1.85s both;}
.brand-film .cross line{stroke-dasharray:60;stroke-dashoffset:60;opacity:.7;animation:ct-draw .3s var(--ease) .95s both, ct-fade-out .2s ease 1.85s both;}
.brand-film .cross line:nth-child(2){animation-delay:.98s,1.85s;} .brand-film .cross line:nth-child(3){animation-delay:1.01s,1.85s;} .brand-film .cross line:nth-child(4){animation-delay:1.04s,1.85s;}
.brand-film .cross line:nth-child(5){animation-delay:1.07s,1.85s;} .brand-film .cross line:nth-child(6){animation-delay:1.1s,1.85s;} .brand-film .cross line:nth-child(7){animation-delay:1.13s,1.85s;}
.brand-film .vx{opacity:0;transform-box:fill-box;transform-origin:center;animation:ct-dot-in .2s var(--ease) both, ct-fade-out .2s ease 1.85s both;}
/* Phase 3: a ring sweeps past, construction lines flash */
.brand-film .ring{stroke-dasharray:55 300;stroke-dashoffset:55;opacity:0;animation:ct-ring .4s cubic-bezier(.3,0,.2,1) 1.15s both;}
.brand-film .ring.r2{stroke-dasharray:40 300;stroke-dashoffset:40;animation:ct-ring2 .4s cubic-bezier(.3,0,.2,1) 1.2s both;}
.brand-film .cl{stroke-dasharray:600;stroke-dashoffset:600;opacity:0;animation:ct-cl .45s var(--ease) 1.4s both;}
.brand-film .cl:nth-child(2){animation-delay:1.48s;} .brand-film .cl:nth-child(3){animation-delay:1.54s;}
/* Phase 4: hatched fill builds from the left */
.brand-film .hatch{clip-path:inset(0 100% 0 0);animation:ct-wipe .35s var(--ease) 1.6s both;}
.brand-film .hatch .h-arc{opacity:.95;animation:ct-fade-out .15s ease 2.1s both;}
.brand-film .hatch .h-tee{opacity:.95;animation:ct-fade-out .15s ease 2.4s both;}
/* Phase 5: solid blue: the arc wipes first, the T after the snap */
.brand-film .solid .arc{clip-path:circle(0% at 0% 50%);animation:ct-wipe-tip .32s cubic-bezier(.4,0,.2,1) 1.9s both;}
.brand-film .solid .tee{clip-path:polygon(0 100%, 0 100%, 0 100%);animation:ct-wipe-diag .3s var(--ease) 2.2s both;}
.brand-film .solid .arc,.brand-film .solid .tee{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--cyan) 50%, transparent));}
/* A brief flash as the fill completes */
.brand-film .flash{opacity:0;animation:ct-flash .45s ease 2.45s both;}
/* Phase 6: the wordmark fades in whole while the mark slides left */
.brand-film .word{opacity:0;transform-box:fill-box;transform-origin:left center;animation:ct-word .28s var(--ease) 2.64s both;}
/* Phase 7: the bar grows, thickens, thins and goes */
.brand-film .bar{animation:ct-bar .75s var(--ease) 2.85s both;}

@keyframes ct-beam{from{stroke-dashoffset:170;opacity:1;}to{stroke-dashoffset:-250;opacity:1;}}
@keyframes ct-beam-fade{to{opacity:0;}}
@keyframes ct-dot-in{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:none;}}
@keyframes ct-dot-out{to{opacity:0;}}
@keyframes ct-odot-in{from{opacity:0;}to{opacity:.9;}}
@keyframes ct-ticks{from{opacity:0;stroke-dashoffset:12;}to{opacity:.55;stroke-dashoffset:0;}}
@keyframes ct-ring2{0%{stroke-dashoffset:40;opacity:0;}15%{opacity:.7;}85%{opacity:.45;}100%{stroke-dashoffset:-100;opacity:0;}}
@keyframes ct-flash{0%{opacity:0;}30%{opacity:.55;}100%{opacity:0;}}
@keyframes ct-tracer{0%{stroke-dashoffset:14;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{stroke-dashoffset:-108;opacity:0;}}
@keyframes ct-tracer-trail{0%{stroke-dashoffset:26;opacity:0;}10%{opacity:.45;}90%{opacity:.45;}100%{stroke-dashoffset:-96;opacity:0;}}
@keyframes ct-draw{from{stroke-dashoffset:200;}to{stroke-dashoffset:0;}}
@keyframes ct-fade-out{to{opacity:0;}}
@keyframes ct-fade-in{to{opacity:1;}}
@keyframes ct-glow-in{to{opacity:1;}}
@keyframes ct-ring{0%{stroke-dashoffset:55;opacity:0;}15%{opacity:.9;}85%{opacity:.6;}100%{stroke-dashoffset:-125;opacity:0;}}
@keyframes ct-cl{0%{stroke-dashoffset:600;opacity:0;}30%{opacity:.8;}70%{opacity:.8;stroke-dashoffset:0;}100%{opacity:0;stroke-dashoffset:0;}}
@keyframes ct-wipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes ct-wipe-tip{from{clip-path:circle(0% at 0% 50%);}to{clip-path:circle(125% at 0% 50%);}}
@keyframes ct-wipe-diag{from{clip-path:polygon(0 100%, 0 100%, 0 100%);}to{clip-path:polygon(0 100%, 320% 100%, 0 -220%);}}
@keyframes ct-shrink{from{transform:translate(106.5px,0) scale(3.1);}to{transform:translate(106.5px,0) scale(1);}}
@keyframes ct-slide{0%{transform:translate(106.5px,0) scale(1);filter:blur(0);}35%{transform:translate(60px,0) scale(1.18,.96);filter:blur(1.2px);}100%{transform:translate(0,0) scale(1);filter:blur(0);}}
@keyframes ct-word{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}
@keyframes ct-bar{0%{width:0px;height:1.2px;x:127.5px;y:56px;opacity:1;}22%{width:210px;height:1.2px;x:22.5px;y:56px;}30%{width:210px;height:1.2px;x:22.5px;y:56px;}50%{width:210px;height:9px;x:22.5px;y:52.5px;}56%{width:210px;height:9px;x:22.5px;y:52.5px;}68%{width:210px;height:1.2px;x:22.5px;y:56px;opacity:1;}80%{width:210px;height:1.2px;x:22.5px;y:56px;opacity:0;}100%{width:210px;height:1.2px;x:22.5px;y:56px;opacity:0;}}
@keyframes ct-underline{0%{width:0;opacity:1;}45%{width:min(60%,420px);opacity:1;}75%{width:min(60%,420px);opacity:1;}100%{width:min(60%,420px);opacity:0;}}
@keyframes ct-text-in{from{opacity:0;filter:blur(8px);transform:translateY(10px);}to{opacity:1;filter:blur(0);transform:none;}}
@keyframes ct-rise{from{translate:0 var(--rise,0px);}to{translate:0 0;}}
@keyframes ct-cue{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(14px);opacity:0;}100%{transform:translateY(0);opacity:0;}}
@media (max-width:760px){ .hero-motion .brand-film{width:96vw;} .hero-motion h1{font-size:clamp(30px,8vw,44px);} }
@media (prefers-reduced-motion:reduce){
  .hero-motion *,.brand-film *{animation:none !important;}
  .brand-film .beam,.brand-film .matrix,.brand-film .outline,.brand-film .tracer,.brand-film .wire,.brand-film .ticks,.brand-film .verts,.brand-film .ring,.brand-film .construct,.brand-film .hatch,.brand-film .flash,.brand-film .bar{display:none;}
  .brand-film .markgrp{transform:none;} .brand-film .solid .arc,.brand-film .solid .tee{clip-path:none;} .brand-film .word{opacity:1;}
  .hero-motion h1,.hero-motion .lede,.hero-motion .eyebrow,.hero-motion .hero-actions,.hero-motion .scroll-cue,.hero-motion .glow,.hero-motion .dots{opacity:1;filter:none;} .hero-motion .tag-underline{display:none;}
  .hero-motion{--p:0 !important;} .hero-motion .brand-film{translate:0;}
}

/* ---- Marketing: the chat assistant (MKT-040), the personalised case slot (MKT-006), progressive fields (MKT-004),
        the preference centre and the download page (MKT-018, MKT-005). Colours from the tokens only. ---- */
.field[hidden]{display:none;}
.slot-case{margin-top:12px;font-size:15px;}
.slot-case a{color:inherit;font-weight:700;text-decoration:underline;}
.chat{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.chat-open{display:inline-flex;align-items:center;gap:8px;border-radius:999px;}
.chat-panel{width:min(380px, calc(100vw - 32px));max-height:min(620px, calc(100vh - 96px));display:flex;flex-direction:column;background:color-mix(in srgb, var(--ct-white-1000) 94%, transparent);-webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--inner-top), var(--shadow-lg);overflow:hidden;}
.chat-panel[hidden]{display:none;}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);}
.chat-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-3);}
.chat-note,.chat-demo{font-size:12px;color:var(--ink-3);padding:8px 16px 0;margin:0;}
.chat-note a{color:inherit;text-decoration:underline;}
.chat-log{flex:1;overflow:auto;padding:12px 16px;display:grid;gap:10px;align-content:start;}
.chat-msg{padding:10px 12px;border-radius:var(--r);font-size:14px;line-height:1.45;max-width:90%;}
.chat-msg.visitor{justify-self:end;background:var(--blue);color:var(--ct-text-on-accent);}
.chat-msg.assistant{justify-self:start;background:var(--site-subtle-solid);color:var(--ink);}
.chat-msg ul{margin:6px 0 0;padding-left:18px;}
.chat-msg a{color:inherit;text-decoration:underline;}
.chat-ask,.chat-contact{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);}
.chat-contact{flex-direction:column;}
.chat-contact[hidden]{display:none;}
.chat-contact p{font-size:13px;margin:0;color:var(--ink-3);}
.chat-ask input,.chat-contact input[type=text],.chat-contact input[type=email]{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:14px;background:var(--ct-white-1000);color:var(--ink);}
@media (max-width: 640px){ .chat-open span{display:none;} }
.pref-card{max-width:640px;}
.pref-list{display:grid;gap:10px;margin:16px 0 20px;}
.pref-list .check{display:flex;gap:10px;align-items:flex-start;}
.pref-freq{display:flex;gap:18px;flex-wrap:wrap;margin:6px 0 20px;}
.pref-done{padding:14px 16px;border-radius:var(--r);background:color-mix(in srgb, var(--ct-status-success) 10%, transparent);border:1px solid color-mix(in srgb, var(--ct-status-success) 30%, transparent);color:var(--site-success-ink);margin-bottom:18px;}
.pref-out{padding:14px 16px;border-radius:var(--r);background:var(--site-subtle-solid);border:1px solid var(--line);margin-bottom:18px;}