/*
 * Edit/Build by: Bruce
 * Date: 2026-10-30 09:55
 *
 * 2026-10-30 09:55 update (hero height): .tz-hero gets the shared tall hero size, matching the visible Top hero: min(598px, 86vh), min(586px, 86vh) from 950px. Content centered.
 *
 * 2026-10-29 09:48 update (motion standardization): local --ease/--fast/--base removed, uses css/motion.css tokens. 400ms/300ms/.45s/.15s now tokens. Carousel crossfade precision easing. Scroll reveal (.tz-reveal) and html scroll-behavior moved to css/motion.css.
 *
 * 2026-10-29 09:15 update (FAQ): new .tz-faq rules for the #faq section (native <details>, 48px min summary, hover tint, green focus ring, plus turns to minus when open).
 * 2026-10-28 15:17 update (SEO H1): hero H1 now holds the logo + "Robotic Cart" label. .tz-hero-logo is a reversed flex column (24px gap, same as .tz-hero-copy) so the label still shows above the logo; the label resets the H1's letter-spacing.
 * 2026-10-23 09:35 update: spec footnote (.tz-spec-foot) now 14px at 640px and below, matching the strip hint.
 * 2026-10-23 09:10 update: touch hint sits closer to the photo strip (more space below it).
 * 2026-10-23 09:04 update: touch hint now 2 rows (swipe icon + tap icon), so the icon never sits mid-wrap.
 * 2026-10-22 13:24 update: WebP fallbacks. picture{display:contents} so <picture> wrappers don't change image sizing. Hero, BASIC and E-series backgrounds list a JPG/PNG first, then image-set() with WebP for browsers that support it.
 *
 * 2026-10-22 11:56 update: hero background e2-line-up-art and E-series lidar scan now load WebP copies (was JPG).
 *
 * 2026-10-22 11:32 update: fluid body text. Body text 18px now clamp(16px,2.25vw,18px) (16px on phones, full size from ~800px).
 * Hero is cream on green (~3.5:1), so hero text stays 19px bold or larger (large-text AA): .tz-hero-lede clamp(19px,2.6vw,21px),
 * .tz-hero-brand 18px to 19px (was just under large text), .tz-benefits li stays 19px. Headings, buttons, nav, labels unchanged.
 *
 * 2026-10-21 16:38 update: red asterisk (.spec-tip) after "Battery range" with a "No towing" tip, same behavior as FM / MT / LT.
 *
 * 2026-10-21 16:33 update: FM / MT / LT in the spec table show a small label on hover, keyboard focus, or tap (mobile).
 *
 * 2026-10-21 13:00 update: section title icon 44% bigger (1em to 1.44em), gap kept, still centered on the first line.
 *
 * 2026-10-21 11:49 update: green duck icon (img/common/kurogamo_green_circle_icon.png)
 * before every section title (.tz-h2), same height as the text (1em). Decorative, CSS only. Wrapped lines hang past the icon.
 *
 * 2026-10-21 11:09 update: spec table footnote (.tz-spec-foot) now right-aligned.
 *
 * 2026-10-21 10:08 update (design-system review): btn-primary hover now primary-hover #058A3C (was primary-60). Carousel, still image and carousel-btn active fill now tint #F0FFF9 (was #EBF5EF).
 *
 * THOUZER Robotic Cart page styles (EN). Loaded only on page-thouzer.php
 * (see the enqueue block in functions.php).
 * Converted from Page Design/THOUZER Page/mock-ups/thouzer-v9.html.
 *
 * Changes vs. the mockup <style> block:
 * - Wrapper class .thouzer-v8 renamed .thouzer-page (also in js/thouzer.js).
 * - Mockup-only global rules removed: body{...} and .skip-link{...}
 *   (header.php and header.css own the skip link). .sr-only and .tz-nobr
 *   are now scoped under .thouzer-page.
 * - Font size reset to 16px on the wrapper (page.css sets body to 2rem).
 * - Fixed site header: --header-h (60px, 72px at 950px and up, matching
 *   header.css EN breakpoints; js/thouzer.js also measures #pageheader).
 *   The anchor bar sticks below the header, and sections leave room for
 *   header + anchor bar when jumped to.
 * - Image paths now relative to css/ (../img/...). The 10E2 backdrop uses
 *   the compressed img/thouzer/10e2-view-2.webp (was a 4.5 MB PNG).
 * - 2026-10-20 synced with v9: .tz-carousel--blend and .tz-acc-still added.
 * - 2026-10-20 13:57 per user: hero green layer changed from
 *   rgba(3,74,32,0.72) to #009130 at 0.88 opacity (rgba(0,145,48,0.88)),
 *   which over the light photo looks like #069A44. Synced with v9.
 * - 2026-10-20 16:48 per user: Accessories grid is 1 column at 640px and
 *   below (tablet keeps 2). Synced with v9.
 * - 2026-10-20 16:58 per user: photo strip hint line (.tz-strip-hint),
 *   mouse vs touch wording, hover lift on photos, hint fades while a photo
 *   is picked (.is-hidden, set by js/thouzer.js). Synced with v9.
 */

/* ─── Design tokens: mirrors design/DoogWeb-design.md ─────────── */
.thouzer-page{
  --header-h: 60px;     /* fixed #pageheader height, see header.css */
  --green:      #069A44;  /* primary */
  --green-60:   #38B86A;  /* primary-60 */
  --green-hover:#058A3C;  /* primary-hover */
  --green-a:    #047A35;  /* primary-accessible / primary-dark */
  --surface:    #FAF9F5;  /* surface / tertiary */
  --ink:        #141413;  /* on-surface / neutral */
  --on-dark:    #FAF9F5;  /* on-surface-dark */
  --border:     #8A9199;  /* border */
  --muted-a:    #5A6370;  /* muted-accessible */
  --blue:       #BDD7EE;  /* secondary: spec-table header row ONLY */
  --blue-ink:   #24567A;
  --blue-line:  #9FC8E8;
  --row-hover:  #F2FBF5;
  --divider:    rgba(138,145,153,0.28); /* decorative separators only */


  --r-sm: 4px;
  --r-md: 6px;
  --r-full: 9999px;

  --max-w:   1280px;
  --gutter:  32px;
  --section: 96px;
  --anchor-h: 60px;

  font-family:'Manrope',sans-serif;
  font-size:16px;
  background:var(--surface);
  color:var(--ink);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:950px){
  .thouzer-page{--header-h:72px}
}

/* ─── Reset ────────────────────────────────────────────────────── */
.thouzer-page *,.thouzer-page *::before,.thouzer-page *::after{box-sizing:border-box}
.thouzer-page img{display:block;max-width:100%}
.thouzer-page picture{display:contents}
.thouzer-page h1,.thouzer-page h2,.thouzer-page h3,.thouzer-page p,.thouzer-page ul,.thouzer-page ol{margin:0}
.thouzer-page ul,.thouzer-page ol{list-style:none;padding:0}
.thouzer-page [lang="ja"]{font-family:'Noto Sans JP',sans-serif;word-break:keep-all}

/* ─── sr-only ──────────────────────────────────────────────────── */
.thouzer-page .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Keeps hyphenated words (E-SERIES, plug-and-play) from breaking at the hyphen */
.thouzer-page .tz-nobr{white-space:nowrap}

/* ─── Focus ring: every interactive element ────────────────────── */
.thouzer-page a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.thouzer-page a:focus:not(:focus-visible){outline:none}
.thouzer-page .spec-wrap:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ─── Container / sections ─────────────────────────────────────── */
.thouzer-page .container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.thouzer-page .tz-section{background:var(--surface);padding-block:var(--section);scroll-margin-top:calc(var(--header-h) + var(--anchor-h))}
.thouzer-page .tz-section-head{margin-bottom:40px}
.thouzer-page .tz-section-lede{margin-top:16px;max-width:60ch;font-size:clamp(16px,2.25vw,18px);line-height:1.55;color:var(--muted-a)}
.thouzer-page .tz-h2{font-size:clamp(26px,5.2vw,42px);font-weight:700;line-height:1.1;letter-spacing:-0.2px}
.thouzer-page .tz-h2:not(.sr-only){position:relative;padding-left:1.79em}
.thouzer-page .tz-h2:not(.sr-only)::before{content:"";position:absolute;left:0;top:-.17em;width:1.44em;height:1.44em;background:url("../img/common/kurogamo_green_circle_icon.png") center/contain no-repeat}
.thouzer-page .tz-h3{font-size:clamp(21px,3.25vw,26px);font-weight:700;line-height:1.1}
.thouzer-page .tz-h4{font-size:21px;font-weight:700;line-height:22.23px}  /* headline-sm */
.thouzer-page .tz-body{font-size:clamp(16px,2.25vw,18px);line-height:1.55;max-width:52ch}
.thouzer-page .tz-meta{font-size:16px;line-height:16px;letter-spacing:0.02em;color:var(--muted-a)} /* label-sm */

/* Reserved-asset panel (v7 pattern B). Decorative, aria-hidden. */
.thouzer-page .tz-ph{
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted-a);font-size:16px;line-height:1.4;padding:16px;
}

/* ─── Hero: the one green surface ──────────────────────────────── */
/* Green overlay #009130 at 0.88 opacity: blends with the light photo to
   look like primary #069A44 (2026-10-20 13:57 per user, tested in v9) */
.thouzer-page .tz-hero{
  background:
    linear-gradient(rgba(0,145,48,0.88),rgba(0,145,48,0.88)),
    url('../img/e2-line-up-art.jpg');
  background-image:
    linear-gradient(rgba(0,145,48,0.88),rgba(0,145,48,0.88)),
    image-set(url('../img/e2-line-up-art.webp') type('image/webp'),url('../img/e2-line-up-art.jpg') type('image/jpeg'));
  background-size:cover;
  background-position:center;
  color:var(--on-dark);
  /* Tall hero size: matches the visible part of the Top hero
     (658px minus the fixed header: 60px mobile, 72px from 950px) */
  min-height:min(598px,86vh);
  display:flex;align-items:center;
}
@media (min-width:950px){.thouzer-page .tz-hero{min-height:min(586px,86vh)}}
.thouzer-page .tz-hero .container{
  width:100%;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:center;padding-block:80px;
}
.thouzer-page .tz-hero-copy{grid-column:span 6;display:flex;flex-direction:column;gap:24px}
.thouzer-page .tz-hero-brand{font-size:19px;font-weight:700;line-height:20px}
.thouzer-page .tz-hero-title{font-size:clamp(36px,7.8vw,62px);font-weight:700;line-height:1.1;letter-spacing:-0.3px}
/* Logo as H1, original colors, directly on green (transparent PNG, no plate) */
.thouzer-page .tz-hero-logo{align-self:flex-start;width:353px;max-width:100%;line-height:0;display:flex;flex-direction:column-reverse;gap:24px}
.thouzer-page .tz-hero-logo img{width:100%;height:auto}
.thouzer-page .tz-hero-logo .tz-hero-brand{letter-spacing:normal}
.thouzer-page .tz-hero-lede{font-size:clamp(19px,2.6vw,21px);font-weight:700;line-height:1.45;max-width:34ch}
/* Benefit list: on-dark text, 19px/700 keeps cream-on-green at large-text AA */
.thouzer-page .tz-benefits{display:flex;flex-direction:column;gap:10px}
.thouzer-page .tz-benefits li{display:flex;gap:10px;align-items:flex-start;font-size:19px;font-weight:700;line-height:1.4}
.thouzer-page .tz-benefits svg{flex:none;width:20px;height:20px;margin-top:3px;stroke:var(--on-dark)}
.thouzer-page .tz-hero-actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:8px}
.thouzer-page .tz-hero .tz-ph{
  min-height:380px;background:transparent;
  border-color:rgba(250,249,245,0.6);color:var(--on-dark);font-weight:700;
}
.thouzer-page .tz-hero a:focus-visible{outline-color:var(--on-dark)}

/* Why THOUZER video: styles copied from live product-videos.css
   .hero-video-wrap / .hero-overlay / .hero-play-btn, moved here from the
   hero 2026-09-30 per user. Centered under the 3 points. */
.thouzer-page .tz-why-lead{
  margin:48px auto 24px;text-align:center;
  font-size:clamp(20px,3.2vw,28px);font-weight:700;line-height:1.3;color:var(--ink);
}
.thouzer-page .tz-why-video{
  display:block;position:relative;max-width:880px;margin-inline:auto;
  border-radius:12px;overflow:hidden;cursor:pointer;
  box-shadow:0 12px 40px rgba(0,0,0,0.14);
}
.thouzer-page .tz-why-video:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.thouzer-page .tz-why-video img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform var(--motion-slow) var(--ease-precision);
}
.thouzer-page .tz-why-video:hover img{transform:scale(1.012)}
.thouzer-page .tz-why-video-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-base) var(--ease-precision);
}
.thouzer-page .tz-why-video:hover .tz-why-video-overlay{background:rgba(0,0,0,0.06)}
.thouzer-page .tz-why-play{
  width:72px;height:72px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 28px rgba(0,0,0,0.18),0 1px 4px rgba(0,0,0,0.10);
  transition:transform var(--motion-fast) var(--ease-precision),background var(--motion-fast) var(--ease-precision),box-shadow var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-why-video:hover .tz-why-play{
  transform:scale(1.09);background:rgba(255,255,255,0.92);
  box-shadow:0 8px 40px rgba(0,0,0,0.24),0 2px 8px rgba(0,0,0,0.14);
}
.thouzer-page .tz-why-play svg{
  width:32px;height:32px;fill:var(--green);margin-left:4px;
  transition:transform var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-why-video:hover .tz-why-play svg{transform:scale(1.25)}
/* Closing point of the section: same voice as the numbered points
   (bold ink text, short green rule above), set apart from the video. */
.thouzer-page .tz-why-note{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:880px;margin:56px auto 0;text-align:center;
  font-size:clamp(18px,2.4vw,22px);font-weight:700;line-height:1.5;color:var(--ink);
  overflow-wrap:break-word;
}
.thouzer-page .tz-why-note::before{content:"";width:20px;height:2px;background:var(--green);flex:none}
@media (max-width:640px){
  .thouzer-page .tz-why-lead{margin-top:40px}
  .thouzer-page .tz-why-play{width:56px;height:56px}
  .thouzer-page .tz-why-play svg{width:26px;height:26px}
}

/* Video lightbox: copied from live product-videos.css modal rules */
.thouzer-page .tz-modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;
  transition:opacity var(--motion-base) var(--ease-precision),visibility var(--motion-base) var(--ease-precision);
}
.thouzer-page .tz-modal-bg.open{opacity:1;visibility:visible}
.thouzer-page .tz-modal-box{
  position:relative;width:100%;max-width:1000px;
  transform:scale(0.94) translateY(16px);
  transition:transform var(--motion-base) var(--ease-precision);
}
.thouzer-page .tz-modal-bg.open .tz-modal-box{transform:scale(1) translateY(0)}
.thouzer-page .tz-modal-iframe-wrap{
  position:relative;padding-top:56.25%;border-radius:6px;overflow:hidden;background:#000;
}
.thouzer-page .tz-modal-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.thouzer-page .tz-modal-close{
  position:absolute;top:-52px;right:0;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.88);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-modal-close:hover{background:rgba(255,255,255,0.22)}
.thouzer-page .tz-modal-close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.thouzer-page .tz-modal-disclaimer{
  margin-top:12px;font-size:14px;line-height:1.6;color:rgba(255,255,255,0.6);
}
.thouzer-page .tz-modal-disclaimer a{color:rgba(255,255,255,0.75);text-decoration:underline;text-underline-offset:2px}
.thouzer-page .tz-modal-disclaimer a:hover{color:#fff}
.thouzer-page .tz-modal-disclaimer a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}

/* button-secondary: surface fill, primary text */
.thouzer-page .btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:16px 24px;border-radius:var(--r-sm);
  background:var(--surface);color:var(--green);
  font-size:21px;font-weight:700;line-height:22px;text-decoration:none;
  transition:background-color var(--motion-fast) var(--ease-precision),color var(--motion-fast) var(--ease-precision),transform var(--motion-fast) var(--ease-precision);
}
.thouzer-page .btn-secondary:hover{background:#FFFFFF;color:var(--green-a)}
.thouzer-page .btn-secondary:active{transform:scale(0.97);color:var(--green-a)}

/* button-tertiary on green: underline is the visual indicator */
.thouzer-page .btn-tertiary{
  display:inline-flex;align-items:center;min-height:48px;
  color:var(--on-dark);font-size:21px;font-weight:700;line-height:22px;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
  transition:text-underline-offset var(--motion-fast) var(--ease-precision);
}
.thouzer-page .btn-tertiary:hover{text-underline-offset:7px}
.thouzer-page .btn-tertiary:active{transform:scale(0.97)}

/* ─── Sticky anchor bar ────────────────────────────────────────── */
.thouzer-page .tz-anchor{
  position:sticky;top:var(--header-h);z-index:50; /* sits just under the fixed site header */
  background:rgba(250,249,245,0.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--divider);
}
.thouzer-page .tz-anchor ul{
  position:relative; /* offsetParent for the auto-center script */
  display:flex;gap:32px;align-items:center;min-height:var(--anchor-h);
  overflow-x:auto;scrollbar-width:none;
  /* Edge fades: JS adds .more-l / .more-r when links are cut off */
  --fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
}
.thouzer-page .tz-anchor ul.more-l{--fade-l:40px}
.thouzer-page .tz-anchor ul.more-r{--fade-r:40px}
.thouzer-page .tz-anchor ul::-webkit-scrollbar{display:none}
.thouzer-page .tz-anchor li{flex:none}
.thouzer-page .tz-anchor a{
  display:inline-flex;align-items:center;min-height:var(--anchor-h);
  font-size:18px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color var(--motion-fast) var(--ease-precision),color var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-anchor a:hover{border-bottom-color:var(--border)}
.thouzer-page .tz-anchor a:active{color:var(--green-a)}
.thouzer-page .tz-anchor a:focus-visible{outline-offset:-2px}
/* Active = state indicator: bold weight (non-color) + green underline */
.thouzer-page .tz-anchor a[aria-current]{font-weight:700;color:var(--green-a);border-bottom-color:var(--green)}

/* ─── Why THOUZER? ─────────────────────────────────────────────── */
.thouzer-page .tz-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);list-style:none;margin:0;padding:0}
/* Site-wide page.css has `ol li:before{content:counter(number)}`, which draws a
   stray 1/2/3 above each card. Cancel it; the 01/02/03 label replaces it. */
.thouzer-page .tz-why-grid > .tz-why-item::before{content:none;display:none}
.thouzer-page .tz-why-grid > .tz-why-item{list-style:none}
.thouzer-page .tz-why-grid > .tz-why-item::marker{content:""}
/* Image on top (4:3), text below. The image fades to transparent over its
   last 25%, so it melts into the plain surface above the text. Apply the
   same mask to the real <img>. */
.thouzer-page .tz-why-item{
  display:flex;flex-direction:column;gap:10px;padding:0 0 24px;
}
.thouzer-page .tz-why-item .tz-why-img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center top;margin-bottom:-6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);
}
.thouzer-page .tz-why-item .tz-why-num,
.thouzer-page .tz-why-item p{padding:0 24px}
.thouzer-page .tz-why-num{display:flex;align-items:center;gap:10px}
.thouzer-page .tz-why-item .tz-why-num{color:var(--ink)}
.thouzer-page .tz-why-num::before{content:"";width:20px;height:2px;background:var(--green);flex:none}
.thouzer-page .tz-why-item p{font-size:clamp(16px,2.25vw,18px);font-weight:700;line-height:1.45;color:var(--ink)}

/* ─── Functionality ───────────────────────────────────────────── */
.thouzer-page .tz-functions{display:flex;flex-direction:column;gap:80px}
.thouzer-page .tz-function{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center}
.thouzer-page .tz-function-copy{grid-column:span 6;display:flex;flex-direction:column;gap:24px}
.thouzer-page .tz-function-media{grid-column:span 6}
.thouzer-page .tz-function--flip .tz-function-media{order:-1}
.thouzer-page .tz-function .tz-ph{min-height:320px}
.thouzer-page .tz-function-media img{width:100%;height:auto;border-radius:var(--r-md)}
.thouzer-page .tz-ticks{display:flex;flex-direction:column;gap:14px}
.thouzer-page .tz-ticks li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(16px,2.25vw,18px);line-height:1.5}
.thouzer-page .tz-ticks svg{flex:none;margin-top:3px;width:20px;height:20px;stroke:var(--green)}

/* ─── Indoor and Outdoor ──────────────────────────────────────── */
.thouzer-page .tz-env-media{margin-bottom:0}
/* Photo strip: all photos side by side in one scrollable row (scrollbar hidden).
   JS drifts it right to left and pauses on hover; wheel, swipe or arrow keys
   scroll it by hand. Three identical sets let it wrap in both directions.
   Padding top and bottom leaves room for the zoomed photo and its caption. */
.thouzer-page .tz-strip{
  --h:clamp(160px,28vw,300px);--gap:12px;
  width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:28px 0 76px;
}
.thouzer-page .tz-strip::-webkit-scrollbar{display:none}
.thouzer-page .tz-strip:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.thouzer-page .tz-strip-track{display:flex;gap:var(--gap);width:max-content}
.thouzer-page .tz-strip-set{display:flex;gap:var(--gap)}
.thouzer-page .tz-shot{
  position:relative;flex:none;margin:0;
  transition:filter var(--motion-slow) var(--ease-precision),opacity var(--motion-slow) var(--ease-precision);
}
.thouzer-page .tz-shot-media{
  display:block;padding:0;border:0;background:none;font:inherit;cursor:zoom-in;
  border-radius:var(--r-md);
  transform-origin:50% 50%;
  transition:transform var(--motion-slow) var(--ease-precision),box-shadow var(--motion-slow) var(--ease-precision);
}
.thouzer-page .tz-shot-media:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.thouzer-page .tz-shot img{
  display:block;height:var(--h);width:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-md);background:var(--surface);
}
/* Photo picked: it grows and comes forward; the rest blur and fade back */
.thouzer-page .tz-strip.has-pick .tz-shot:not(.is-picked){filter:blur(3px);opacity:0.55}
.thouzer-page .tz-shot.is-picked{z-index:2}
.thouzer-page .tz-shot.is-picked .tz-shot-media{
  transform:scale(1.12);cursor:zoom-out;
  box-shadow:0 18px 40px rgba(20,20,19,0.28),0 4px 12px rgba(20,20,19,0.18);
}
.thouzer-page .tz-shot figcaption{
  position:absolute;left:0;right:0;top:calc(100% + 24px);
  text-align:center;color:var(--ink);font-size:16px;line-height:1.5;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--motion-base) var(--ease-precision),transform var(--motion-base) var(--ease-precision);
}
.thouzer-page .tz-shot figcaption b{color:var(--green-a);font-weight:700;margin-right:4px}
.thouzer-page .tz-shot.is-picked figcaption{opacity:1;transform:none;transition-delay:200ms}
@media (max-width:640px){
  .thouzer-page .tz-strip{padding:20px 0 84px}
  .thouzer-page .tz-shot figcaption{font-size:14px}
}
/* Hover lift: tells mouse users the photos are clickable */
@media (hover:hover){
  .thouzer-page .tz-strip:not(.has-pick) .tz-shot-media:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(20,20,19,0.18);
  }
}
/* Hint line under the strip. Mouse and touch get different wording. */
.thouzer-page .tz-strip-hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:-24px 0 32px;font-size:16px;line-height:1.5;color:var(--muted-a);text-align:center;
  transition:opacity var(--motion-base) var(--ease-precision);
}
/* Hide the hint while a photo is picked, so it never sits on the caption */
.thouzer-page .tz-strip-hint.is-hidden{opacity:0}
.thouzer-page .tz-strip-hint svg{flex:none;width:20px;height:20px;stroke:var(--green)}
.thouzer-page .tz-hint-touch{display:none}
.thouzer-page .tz-hint-row{display:flex;align-items:center;justify-content:center;gap:8px}
/* Mouse: both rows sit side by side on one line, wrap to two on narrow windows */
.thouzer-page .tz-hint-mouse{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px}
@media (hover:none) and (pointer:coarse){
  .thouzer-page .tz-hint-mouse{display:none}
  .thouzer-page .tz-hint-touch{display:flex;flex-direction:column;gap:4px}
}
@media (max-width:640px){
  .thouzer-page .tz-strip-hint{margin:-24px 0 24px;font-size:14px}
}
/* Touch hint is two rows: pull it up under the photos, keep clear space above the text below */
@media (hover:none) and (pointer:coarse){
  .thouzer-page .tz-strip-hint{margin:-64px 0 40px}
}
/* Wide screens (mouse or touch): one line, icons side by side */
@media (min-width:641px){
  .thouzer-page .tz-hint-mouse,
  .thouzer-page .tz-hint-touch{flex-direction:row;flex-wrap:nowrap;gap:28px}
}
/* Same 20px gap under the photos as on narrow screens (strip bottom padding 76px - 56px) */
@media (min-width:641px){
  .thouzer-page .tz-strip-hint{margin:-56px 0 32px}
}
/* Reduced motion: JS does not drift it. Extra sets are hidden. */
@media (prefers-reduced-motion: reduce){
  .thouzer-page .tz-strip-set[aria-hidden]{display:none}
  .thouzer-page .tz-strip:not(.has-pick) .tz-shot-media:hover{transform:none}
}
.thouzer-page .tz-env-body{display:flex;flex-direction:column;gap:20px}
.thouzer-page .tz-env-body .tz-body{max-width:65ch}
/* Conditions grid: one row of 9 on wide screens, 3×3 below 900px.
   Each item: icon centered in a circle, label centered below. */
.thouzer-page .tz-conds-intro{text-align:center;margin:0 auto}
.thouzer-page .tz-conds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:32px 16px}
.thouzer-page .tz-cond{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
.thouzer-page .tz-cond svg{flex:none;box-sizing:border-box;width:80px;height:80px;padding:18px;border:1.5px solid var(--green);border-radius:var(--r-full);fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* ─── Accessories ─────────────────────────────────────────────── */
.thouzer-page .tz-acc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.thouzer-page .tz-acc{display:flex;flex-direction:column;gap:14px}
.thouzer-page .tz-acc .tz-ph{aspect-ratio:4/3}
.thouzer-page .tz-acc img{width:100%;height:auto;border-radius:var(--r-md)}
.thouzer-page .tz-acc p{font-size:clamp(16px,2.25vw,18px);font-weight:700;line-height:1.4}
/* Platform structure carousel: same box ratio and tint as the other
   accessory images. Robot is centered in the 16:9 PNG, so cover crops
   only empty side space. */
.thouzer-page .tz-carousel{position:relative;aspect-ratio:340/258;border-radius:var(--r-md);background:#F0FFF9;overflow:hidden}
.thouzer-page .tz-carousel-viewport{width:100%;height:100%;overflow:hidden}
/* Slides stack in one spot; only the active one is visible (crossfade) */
.thouzer-page .tz-carousel-track{position:relative;height:100%;margin:0;padding:0;list-style:none}
.thouzer-page .tz-carousel-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--motion-slow) var(--ease-precision),visibility 0s linear var(--motion-slow)}
.thouzer-page .tz-carousel-slide.is-active{opacity:1;visibility:visible;transition:opacity var(--motion-slow) var(--ease-precision),visibility 0s}
.thouzer-page .tz-acc .tz-carousel-slide img{width:100%;height:100%;object-fit:cover;border-radius:0}
/* White-background slides: multiply turns white into the #F0FFF9 tint
   behind the slide; darker pixels stay as they are. */
.thouzer-page .tz-carousel--blend .tz-carousel-slide{mix-blend-mode:multiply}
/* Single accessory image (Battery accessories): same box, tint and blend as the carousels */
.thouzer-page .tz-acc-still{aspect-ratio:340/258;border-radius:var(--r-md);background:#F0FFF9;overflow:hidden}
.thouzer-page .tz-acc .tz-acc-still img{width:100%;height:100%;object-fit:cover;border-radius:0;mix-blend-mode:multiply}
/* 48px hit area, 32px visible circle */
.thouzer-page .tz-carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:48px;min-height:48px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);
}
.thouzer-page .tz-carousel-prev{left:4px}
.thouzer-page .tz-carousel-next{right:4px}
.thouzer-page .tz-carousel-btn svg{
  box-sizing:border-box;width:32px;height:32px;padding:7px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--border);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:background-color var(--motion-fast) var(--ease-precision),border-color var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-carousel-btn:hover svg{border-color:var(--ink)}
.thouzer-page .tz-carousel-btn:active svg{background:#F0FFF9}
.thouzer-page .tz-carousel-btn:focus-visible{outline:none}
.thouzer-page .tz-carousel-btn:focus-visible svg{outline:2px solid var(--green);outline-offset:2px}
.thouzer-page .tz-carousel-btn:disabled{cursor:not-allowed;opacity:.4}

/* ─── Configuration: tiers + upgrade path ─────────────────────── */
/* No gap: BASIC and E-SERIES join as one panel so the two image halves
   connect at the middle. One shared 1px divider, outer corners rounded. */
.thouzer-page .tz-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-bottom:64px}
.thouzer-page .tz-tier.tz-tier--basic{border-right:0;border-radius:var(--r-md) 0 0 var(--r-md)}
.thouzer-page .tz-tier.tz-tier--eseries{border-radius:0 var(--r-md) var(--r-md) 0}
.thouzer-page .tz-tier{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;padding:32px;
  border:1px solid var(--divider);border-radius:var(--r-md);background:var(--surface);
}
/* Half-image backdrop: layer is 2x the card width, image centered at
   full card height, card clips to one half. BASIC shows the left half,
   E-SERIES the right, so the two halves meet in the middle as one cart.
   Outer edge fades out so the image has no hard edge. */
.thouzer-page .tz-tier::before{
  content:"";position:absolute;top:0;bottom:0;width:200%;z-index:-1;
  background:center/auto 100% no-repeat;opacity:0.24;pointer-events:none;
}
.thouzer-page .tz-tier--basic::before{
  left:0;background-image:url('../img/thouzer/10e2-view-2-fallback.png');
  background-image:image-set(url('../img/thouzer/10e2-view-2.webp') type('image/webp'),url('../img/thouzer/10e2-view-2-fallback.png') type('image/png'));
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 18%,#000 45%);
          mask-image:linear-gradient(to right,transparent 0,transparent 18%,#000 45%);
}
.thouzer-page .tz-tier--eseries::before{
  right:0;background-image:url('../img/thouzer-lidar-scan.jpg');
  background-image:image-set(url('../img/thouzer-lidar-scan.webp') type('image/webp'),url('../img/thouzer-lidar-scan.jpg') type('image/jpeg'));
  -webkit-mask-image:linear-gradient(to left,transparent 0,transparent 18%,#000 45%);
          mask-image:linear-gradient(to left,transparent 0,transparent 18%,#000 45%);
}
.thouzer-page .tz-upgrade{
  display:flex;gap:24px;align-items:flex-start;margin-top:64px;padding:32px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
}
.thouzer-page .tz-upgrade svg{flex:none;width:32px;height:32px;stroke:var(--green)}
.thouzer-page .tz-upgrade-copy{display:flex;flex-direction:column;gap:12px}
.thouzer-page .tz-upgrade .tz-body{max-width:65ch}

/* ─── Models + spec table ─────────────────────────────────────── */
.thouzer-page .tz-models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-bottom:64px}
.thouzer-page .tz-model{text-align:center}
.thouzer-page .tz-model img{width:100%;height:auto}
.thouzer-page .tz-model-name{margin-top:12px;font-size:clamp(21px,3.25vw,26px);font-weight:700;line-height:1.1;letter-spacing:0.02em}
.thouzer-page .tz-table-head{margin-bottom:24px}
.thouzer-page .spec-wrap{
  overflow-x:auto;
  /* Edge fades: JS adds .more-l / .more-r when columns are cut off */
  --fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
}
.thouzer-page .spec-wrap.more-l{--fade-l:40px}
.thouzer-page .spec-wrap.more-r{--fade-r:40px}
.thouzer-page .spec-table{width:100%;min-width:720px;border-collapse:collapse}
.thouzer-page .spec-table thead th{
  background:var(--blue);color:var(--blue-ink);text-align:left;
  font-size:16px;font-weight:700;line-height:16px;letter-spacing:0.07em;text-transform:uppercase;
  padding:11px 16px;border-bottom:1px solid var(--blue-line);
}
.thouzer-page .spec-table .spec-group th{
  text-align:left;padding:22px 16px 8px;font-size:clamp(16px,2.25vw,18px);font-weight:700;color:var(--ink);
}
.thouzer-page .spec-table .spec-group:first-child th{padding-top:14px}
.thouzer-page .spec-table tbody tr:not(.spec-group){transition:background-color var(--motion-fast) var(--ease-precision)}
.thouzer-page .spec-table tbody tr:not(.spec-group):hover{background:var(--row-hover)}
.thouzer-page .spec-table tbody th[scope="row"]{
  text-align:left;font-weight:400;color:var(--muted-a);
  font-size:clamp(16px,2.25vw,18px);line-height:20px;padding:11px 16px;border-bottom:1px solid var(--divider);
}
.thouzer-page .spec-table td{font-size:clamp(16px,2.25vw,18px);line-height:20px;padding:11px 16px;border-bottom:1px solid var(--divider)}
.thouzer-page .spec-note{color:var(--muted-a)}
.thouzer-page .spec-table abbr{text-decoration:none}
/* FM / MT / LT and .spec-tip tap tips: js/thouzer.js moves title to data-tip and toggles .is-open */
.thouzer-page .spec-table [data-tip]{position:relative;cursor:help;border-radius:2px}
.thouzer-page .spec-table abbr[data-tip]{text-decoration:underline dotted var(--border);text-underline-offset:3px}
/* Red asterisk note (per user: error red #D92D20) */
.thouzer-page .spec-table .spec-tip{color:#D92D20;font-weight:700;padding:0 4px;margin-left:1px}
.thouzer-page .spec-table [data-tip]:focus-visible{outline:2px solid var(--green-a);outline-offset:2px}
.thouzer-page .spec-table [data-tip]::after{
  content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 6px);z-index:5;
  padding:6px 10px;border-radius:4px;background:var(--ink);color:var(--on-dark);
  font-size:14px;line-height:18px;font-weight:500;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--motion-fast) var(--ease-precision),visibility var(--motion-fast) var(--ease-precision);
}
.thouzer-page .spec-table [data-tip]:hover::after,
.thouzer-page .spec-table [data-tip]:focus-visible::after,
.thouzer-page .spec-table [data-tip].is-open::after{opacity:1;visibility:visible}
/* Config table: equal BASIC / E-SERIES columns, note on its own line */
.thouzer-page .spec-table--config{table-layout:fixed;min-width:0}
.thouzer-page .spec-table--config tbody th[scope="row"]{vertical-align:top}
.thouzer-page .spec-table--config .col-label{width:34%}
.thouzer-page .spec-table--config td{vertical-align:top}
.thouzer-page .spec-table--config .spec-note{display:block;margin-top:4px;font-size:16px;line-height:1.4}
.thouzer-page .tz-spec-foot{margin-top:24px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:8px;font-size:16px;line-height:1.5;color:var(--muted-a)}
@media (max-width:640px){
  .thouzer-page .tz-spec-foot{font-size:14px}
}
.thouzer-page .tz-spec-foot a{color:var(--green-a);font-weight:700;text-decoration:underline;text-underline-offset:3px;transition:text-underline-offset var(--motion-fast) var(--ease-precision)}
.thouzer-page .tz-spec-foot a:hover{text-underline-offset:5px}

/* ─── Brochure links (inside Configuration tiers) ─────────────── */
.thouzer-page .tz-tier .tz-brochure{margin-top:auto;align-self:flex-start}
.thouzer-page .tz-brochure{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:14px 20px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--green-a);font-size:18px;font-weight:700;line-height:1.3;text-decoration:none;
  transition:border-color var(--motion-fast) var(--ease-precision),background-color var(--motion-fast) var(--ease-precision),transform var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-brochure svg{flex:none;width:20px;height:20px;stroke:currentColor;transition:transform var(--motion-fast) var(--ease-precision)}
.thouzer-page .tz-brochure:hover{border-color:var(--green-a);background:var(--row-hover)}
.thouzer-page .tz-brochure:hover svg{transform:translateY(2px)}
.thouzer-page .tz-brochure:active{transform:scale(0.97)}

/* ─── Final CTA: matches live product-videos.css .contact-strip
   exactly (colors, spacing, layout). Source: doogHP_redesign_Live/
   css/product-videos.css lines 796-842, 2026-09-22 16:12 per user. ── */
.thouzer-page .tz-contact-strip{
  background:rgba(6,154,68,0.06);
  border:1.5px solid rgba(6,154,68,0.18);
  border-radius:12px;padding:52px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.thouzer-page .tz-contact-strip-copy p{
  font-size:clamp(21px,3.25vw,26px);font-weight:700;color:var(--ink);
  max-width:440px;line-height:1.35;margin-bottom:8px;
}
.thouzer-page .tz-contact-strip-copy span{
  font-size:16px;font-weight:400;color:var(--muted-a);display:block;
}
.thouzer-page .tz-contact-strip-actions{
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0;
}
/* button-primary: the page's one green-filled CTA */
.thouzer-page .btn-primary{
  font-family:'Manrope',sans-serif;
  font-size:16px;font-weight:700;
  color:var(--surface);background:var(--green);
  border:none;border-radius:var(--r-sm);
  padding:16px 28px;min-height:48px;white-space:nowrap;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  transition:background-color var(--motion-fast) var(--ease-precision),transform var(--motion-fast) var(--ease-precision);
}
.thouzer-page .btn-primary:hover{background:var(--green-hover)}
.thouzer-page .btn-primary:active{background:var(--green-a);transform:scale(0.97)}
/* secondary link: chevron icon, underline-on-hover indicator */
.thouzer-page .tz-contact-strip-secondary-link{
  font-size:16px;font-weight:700;color:var(--green-a);
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--motion-fast) var(--ease-precision),gap var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-contact-strip-secondary-link:hover{border-bottom-color:var(--green-a);gap:7px}
.thouzer-page .tz-contact-strip-secondary-link:active{transform:scale(0.97)}
.thouzer-page .tz-contact-strip-secondary-link svg{stroke:currentColor}

/* Scroll reveal (.reveal): shared, see css/motion.css. js/thouzer.js picks the targets. */

/* ─── Responsive (layout only, type is fluid) ─────────────────── */
@media (max-width:1024px){
  .thouzer-page .tz-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thouzer-page .tz-models{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .thouzer-page .tz-conds{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .thouzer-page{--section:80px}
  .thouzer-page .tz-hero-copy,
  .thouzer-page .tz-function-copy,.thouzer-page .tz-function-media{grid-column:1 / -1}
  .thouzer-page .tz-hero .tz-ph{min-height:240px}
  .thouzer-page .tz-function .tz-ph{min-height:220px}
  .thouzer-page .tz-function-media,.thouzer-page .tz-function--flip .tz-function-media{order:-1}
  .thouzer-page .tz-functions{gap:64px}
  .thouzer-page .tz-acc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thouzer-page .tz-tiers{grid-template-columns:1fr;gap:40px;margin-bottom:48px}
  .thouzer-page .tz-tier.tz-tier--basic,.thouzer-page .tz-tier.tz-tier--eseries{border:1px solid var(--divider);border-radius:var(--r-md)}
  .thouzer-page .tz-upgrade{margin-top:48px}
  .thouzer-page .tz-contact-strip{flex-direction:column;align-items:flex-start;padding:32px 24px;gap:24px}
  .thouzer-page .tz-contact-strip-actions{align-items:flex-start;width:100%}
  .thouzer-page .btn-primary{width:100%;justify-content:center}
}
@media (max-width:640px){
  .thouzer-page{--gutter:16px}
  .thouzer-page .tz-tier{padding:24px 20px}
  .thouzer-page .tz-why-grid{grid-template-columns:1fr}
  .thouzer-page .tz-acc-grid{grid-template-columns:1fr;gap:32px}
  .thouzer-page .tz-models{gap:16px}
  /* Bar bleeds to the screen edge so links are not clipped at the gutter */
  .thouzer-page .tz-anchor .container{padding:0}
  .thouzer-page .tz-anchor ul{gap:24px;padding:0 var(--gutter);scroll-padding-inline:var(--gutter)}
  .thouzer-page .tz-anchor a{font-size:16px}
  .thouzer-page .tz-upgrade{flex-direction:column;gap:16px;padding:24px 20px}
  .thouzer-page .tz-conds{gap:24px 12px}
  .thouzer-page .tz-cond{gap:8px;font-size:14px}
  .thouzer-page .tz-cond svg{width:64px;height:64px;padding:14px}
  /* Config table on phones: wider label column so words never split */
  .thouzer-page .spec-table--config .col-label{width:36%}
  .thouzer-page .spec-table--config th,.thouzer-page .spec-table--config td{padding-inline:8px}
}

/* ─── FAQ ─────────────────────────────────────────────────────── */
.thouzer-page .tz-faq-list{max-width:880px;border-top:1px solid var(--divider)}
.thouzer-page .tz-faq{border-bottom:1px solid var(--divider)}
.thouzer-page .tz-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:48px;padding:20px 16px;margin:0 -16px;
  border-radius:var(--r-sm);cursor:pointer;list-style:none;
  font-size:clamp(18px,2.4vw,21px);font-weight:700;line-height:1.3;
  transition:background-color var(--motion-fast) var(--ease-precision);
}
.thouzer-page .tz-faq summary::-webkit-details-marker{display:none}
.thouzer-page .tz-faq summary:hover{background:var(--row-hover)}
.thouzer-page .tz-faq summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.thouzer-page .tz-faq summary:focus:not(:focus-visible){outline:none}
.thouzer-page .tz-faq summary:active{background:var(--row-hover)}
/* Plus / minus: green feature-icon stroke. Open = minus (shape change, not color only) */
.thouzer-page .tz-faq-icon{flex:none;width:28px;height:28px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round}
.thouzer-page .tz-faq[open] .tz-faq-icon .v{display:none}
.thouzer-page .tz-faq-a{padding:0 0 24px;max-width:65ch;font-size:clamp(16px,2.25vw,18px);line-height:1.55}
.thouzer-page .tz-faq-a p + p{margin-top:12px}
.thouzer-page .tz-faq-a a{color:var(--green-a);text-decoration:underline;text-underline-offset:3px}
.thouzer-page .tz-faq-a a:hover{color:var(--ink)}
@media (max-width:640px){
  .thouzer-page .tz-faq summary{padding:16px 12px;margin:0 -12px;gap:16px}
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .thouzer-page *,.thouzer-page *::before,.thouzer-page *::after{transition:none !important;animation:none !important}
  .thouzer-page .btn-secondary:active,.thouzer-page .btn-tertiary:active,.thouzer-page .tz-brochure:active,
  .thouzer-page .btn-primary:active,.thouzer-page .tz-contact-strip-secondary-link:active{transform:none}
  .thouzer-page .tz-brochure:hover svg{transform:none}
}