/* ============================================================
     WEBSITE LAYER  —  v2
     Built ON TOP of the Tero app kit (tokens + .tero-glass).
     Spine reworked per competitor analysis:
       • privacy-as-headline (vs Newcode/Harvey/Legora)
       • in-action Assistant demo in the hero
       • provenance-only social proof (honest, early-stage)
       • honest outcomes band + use-cases
       • Agent Debate showcase = the differentiator
     Glass is RESTRAINED: nav, floating cards, CTA only.
     ============================================================ */
  html { scroll-behavior: smooth; }
  /* Warm canvas base (replaces the cool default) so the whole page reads warmer */
  body { color: var(--text-body); position: relative; background: #F2ECE3; }
  /* ---- Colour "soul": warm ambient washes the glass refracts, teal kept for brand ---- */
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(760px 540px at 6% 2%,   rgba(1,181,248,0.16), transparent 56%),    /* cyan brand soul, top-left */
      radial-gradient(900px 640px at 96% 6%,   rgba(238,170,116,0.30), transparent 58%),  /* warm amber, top-right */
      radial-gradient(980px 720px at 90% 94%,  rgba(233,146,104,0.26), transparent 60%),  /* terracotta, bottom-right */
      radial-gradient(820px 600px at 8% 96%,   rgba(242,198,146,0.26), transparent 60%),  /* warm sand, bottom-left */
      radial-gradient(900px 700px at 48% 48%,  rgba(255,246,234,0.40), transparent 66%);  /* cream centre glow */ }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
  .wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
  section { position: relative; }

  .serif { font-family: var(--font-serif); font-weight: var(--display-weight);
           letter-spacing: var(--display-spacing); line-height: var(--display-leading);
           color: var(--text-heading); }
  .eyebrow { font-family: var(--font-sans); font-size: var(--label-size);
             font-weight: var(--label-weight); letter-spacing: var(--label-spacing);
             text-transform: uppercase; color: var(--text-muted); }
  .eyebrow.teal { color: var(--brand-hover); }

  /* ---- Buttons ---- */
  .btn { font-family: var(--font-sans); font-size: 15px; font-weight: 500;
         display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px;
         border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent;
         transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
                     box-shadow var(--dur) var(--ease); text-decoration: none; white-space: nowrap; }
  .btn-ink { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
  .btn-ink:hover { background: var(--ink-hover); }
  .btn-ink:active { transform: scale(0.98); }
  .btn-ghost { background: rgba(255,255,255,0.5); color: var(--text-heading);
               border: 1px solid var(--gray-200); }
  .btn-ghost:hover { background: rgba(255,255,255,0.85); }
  .btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--radius-pill); }

  /* ============================================================ NAV ============ */
  .nav-shell { position: sticky; top: 0; z-index: 50; padding: 12px 0; }
  .nav { display: flex; align-items: center; gap: 28px; padding: 10px 12px 10px 20px;
         border-radius: var(--radius-pill); }
  .nav-brand { display: flex; align-items: center; gap: 10px; }
  .nav-brand img { height: 36px; width: auto; display: block; }
  .nav-wordmark { font-family: var(--font-serif); font-size: 42px; line-height: 1; color: var(--text-heading); letter-spacing: -0.02em; }
  .nav .btn { border-radius: var(--radius-pill); padding-left: 20px; padding-right: 20px; }
  .nav-links { display: flex; gap: 4px; margin-left: auto; }
  .nav-links a { font-family: var(--font-sans); font-size: 15px; color: var(--text-body);
                 padding: 8px 13px; border-radius: var(--radius-md); transition: background var(--dur) var(--ease); }
  .nav-links a:hover { background: rgba(26,26,24,0.06); color: var(--text-heading); }
  .nav-actions { display: flex; align-items: center; gap: 6px; }
  .nav-signin { font-family: var(--font-sans); font-size: 15px; color: var(--text-heading); padding: 8px 13px; }

  /* ============================================================ HERO ============ */
  .hero { padding: 60px 0 36px; }
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px;
              border-radius: var(--radius-pill); background: rgba(255,255,255,0.55);
              border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--shadow-sm);
              font-size: 13.5px; color: var(--gray-600); margin-bottom: 24px; }
  .hero-tag .ti { color: var(--brand); font-size: 16px; }
  .hero-tag b { color: var(--text-heading); font-weight: 600; }
  .hero h1 { font-size: clamp(38px, 4.6vw, 54px); max-width: 15ch; }
  .hero h1 .accent { color: var(--brand-hover); }
  .hero-sub { font-family: var(--font-sans); font-size: clamp(17px, 1.6vw, 20px);
              line-height: 1.62; color: var(--text-body); max-width: 52ch; margin-top: 22px; }
  .hero-sub b { color: var(--text-heading); font-weight: 600; }
  .hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
  .hero-positioning { margin-top: 20px; font-size: 14px; color: var(--text-muted);
                      display: flex; align-items: center; gap: 8px; }
  .hero-positioning .ti { color: var(--brand); }
  .demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); }

  /* ============================================================ PROVENANCE ====== */
  .provenance { padding: 34px 0 8px; }
  .prov-label { text-align: center; display: block; margin-bottom: 20px; font-size: 12px; }
  .prov-bar { max-width: 940px; margin: 0 auto; border-radius: var(--radius-3xl); padding: 20px 30px; }
  .prov-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 30px; }
  .prov-item { display: inline-flex; align-items: center; gap: 11px; font-size: 16.5px; color: var(--gray-600); }
  .prov-item .ti { font-size: 23px; color: var(--brand); }
  .prov-item b { color: var(--text-heading); font-weight: 600; }
  .prov-sep { width: 1px; height: 22px; background: var(--gray-200); }

  /* ============================================================ OUTCOMES ======== */
  .outcomes { padding: 56px 0; }
  .outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .outcome { text-align: center; padding: 8px; }
  .outcome .v { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 42px); color: var(--text-heading);
                letter-spacing: -0.02em; line-height: 1; }
  .outcome .v .unit { font-size: 0.55em; color: var(--brand-hover); }
  .outcome .k { font-size: 14.5px; color: var(--text-body); margin-top: 10px; line-height: 1.45; }

  /* ============================================================ SECTION HEADS === */
  .sec-head { text-align: center; max-width: 62ch; margin: 0 auto 44px; }
  .sec-head .eyebrow { display: block; margin-bottom: 14px; }
  .sec-head h2 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 40px);
                 color: var(--text-heading); letter-spacing: -0.02em; line-height: 1.15; }
  .sec-head p { font-family: var(--font-sans); font-size: 17.5px; color: var(--text-body); line-height: 1.6; margin-top: 16px; }

  /* ============================================================ FEATURES ======== */
  .features { padding: 20px 0 30px; }
  .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .feature-card { border-radius: var(--radius-3xl); padding: 32px 32px 28px; position: relative; overflow: hidden;
                  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .feature-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
                          opacity: 0; transition: opacity var(--dur) var(--ease);
                          background: linear-gradient(150deg, rgba(255,255,255,0.65), transparent 42%); }
  .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float), var(--glass-highlight); }
  .feature-card:hover::before { opacity: 1; }
  .feature-ic { width: 44px; height: 44px; border-radius: var(--radius-lg); display: grid; place-items: center;
                margin-bottom: 16px; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.8); }
  .feature-ic .ti { font-size: 23px; }
  .feature-card h3 { font-family: var(--font-serif); font-size: 24px; color: var(--text-heading); margin-bottom: 10px; }
  .feature-card p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65; color: var(--text-body); margin: 0; }
  .pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 15px; font-size: 11.5px; font-weight: 500;
          letter-spacing: .02em; padding: 4px 9px; border-radius: var(--radius-sm); border: 1px solid; }
  .pill-assistant { background: var(--badge-assistant-bg); color: var(--badge-assistant-text); border-color: var(--badge-assistant-border); }
  .pill-tabular  { background: var(--badge-tabular-bg);  color: var(--badge-tabular-text);  border-color: var(--badge-tabular-border); }
  .pill-agent    { background: var(--badge-agent-bg);    color: var(--badge-agent-text);    border-color: var(--badge-agent-border); }
  .pill-overview { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-100); }

  /* ============================================================ USE-CASES ======= */
  .usecases { padding: 70px 0; }
  .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .uc { background: rgba(255,255,255,0.55); border: var(--border-card); border-radius: var(--radius-xl);
        padding: 20px; display: flex; align-items: center; gap: 13px; transition: background var(--dur) var(--ease); }
  .uc:hover { background: rgba(255,255,255,0.85); }
  .uc .ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md);
            display: grid; place-items: center; background: var(--tero-teal-50); }
  .uc .ic .ti { color: var(--brand-hover); font-size: 19px; }
  .uc .t { font-size: 16px; font-weight: 500; color: var(--text-heading); }
  .uc .d { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }
  /* Auto-rising "wall" of use cases — an infinite vertical marquee inside a
     fixed-height window. The long-tail dissolve now lives on BOTH edges: cards
     fade in at the bottom and dissolve out at the top, implying an endless list
     without ever claiming it. Seamless because the track holds two identical
     sets and rises by exactly one set + one gap. Pauses on hover so it's readable. */
  .uc-marquee { position: relative; height: clamp(330px, 46vh, 460px); overflow: hidden;
     -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
             mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
  .uc-track { display: flex; flex-direction: column; gap: 12px; will-change: transform;
     animation: uc-rise var(--uc-speed, 22s) linear infinite; }
  .uc-marquee:hover .uc-track { animation-play-state: paused; }
  @keyframes uc-rise { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
  /* Reduced motion: no scroll — fall back to a static grid with the original
     single-edge dissolve, and drop the duplicated (aria-hidden) set. */
  @media (prefers-reduced-motion: reduce) {
    .uc-marquee { height: auto; overflow: visible;
       -webkit-mask-image: linear-gradient(to bottom, #000 0 73%, transparent 100%);
               mask-image: linear-gradient(to bottom, #000 0 73%, transparent 100%); }
    .uc-track { animation: none; transform: none; }
    .uc-track > [aria-hidden="true"] { display: none; } }
  @media (prefers-reduced-transparency: reduce) {
    .uc-marquee { -webkit-mask-image: none; mask-image: none; } }

  /* ============================================================ AGENT DEBATE ==== */
  .debate { padding: 10px 0 80px; }
  .debate-card { border-radius: var(--radius-3xl); padding: 52px; display: grid;
                 grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
  .debate-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
                        background: radial-gradient(600px 320px at 90% -10%, rgba(27,188,172,0.12), transparent 62%); }
  .debate-card h2 { font-family: var(--font-serif); font-size: 34px; color: var(--text-heading);
                    letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; }
  .debate-card .lead { font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
  .debate-steps { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 11px; }
  .debate-steps li { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--text-heading); }
  .debate-steps .n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff;
                     font-size: 11px; display: grid; place-items: center; font-weight: 600; }

  /* ============================================================ SECURITY ======== */
  .security { padding: 0 0 80px; }
  .security-card { border-radius: var(--radius-3xl); padding: 52px; display: grid;
                   grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
  .security-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
                          background: radial-gradient(600px 300px at 10% 0%, rgba(27,188,172,0.10), transparent 60%); }
  .security-card h2 { font-family: var(--font-serif); font-size: 34px; color: var(--text-heading);
                      letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; }
  .security-card .lead { font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
  .security-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .security-list li { display: flex; gap: 13px; align-items: flex-start; }
  .security-list .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-md);
                       display: grid; place-items: center; background: var(--tero-teal-50); }
  .security-list .ic .ti { color: var(--brand-hover); font-size: 18px; }
  .security-list .t { font-size: 16px; color: var(--text-heading); font-weight: 500; }
  .security-list .d { font-size: 14.5px; color: var(--text-body); line-height: 1.55; margin-top: 3px; }
  .cert-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px;
               color: var(--text-muted); background: rgba(255,255,255,0.5); border: var(--border-card);
               padding: 8px 13px; border-radius: var(--radius-pill); }
  .cert-note .ti { color: var(--brand); }

  /* ============================================================ PRINCIPLE ======= */
  .principle { padding: 90px 0; text-align: center; }
  .principle blockquote { margin: 18px auto 0; max-width: 24ch; font-family: var(--font-serif);
                          font-size: clamp(26px, 4vw, 38px); line-height: 1.25; color: var(--text-heading);
                          letter-spacing: -0.015em; }
  .principle blockquote em { font-style: italic; color: var(--brand-hover); }
  .principle .attr { margin-top: 26px; font-size: 14.5px; color: var(--text-muted); }
  .principle .attr b { color: var(--text-heading); font-weight: 600; }

  /* ============================================================ CTA ============= */
  .cta { padding: 0 0 92px; }
  .cta-card { border-radius: var(--radius-3xl); padding: 64px 48px; text-align: center; position: relative; overflow: hidden;
              background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
              border: var(--glass-border); box-shadow: var(--shadow-float), var(--glass-highlight); }
  .cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
                      background: radial-gradient(700px 320px at 50% -20%, rgba(27,188,172,0.14), transparent 65%); }
  .cta-card h2 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 44px); color: var(--text-heading);
                 letter-spacing: -0.02em; line-height: 1.12; max-width: 18ch; margin: 0 auto; }
  .cta-card p { font-size: 17.5px; color: var(--text-body); margin: 18px auto 0; max-width: 52ch; }
  .cta-card .hero-cta { margin-top: 32px; justify-content: center; }

  /* ============================================================ FOOTER ========== */
  footer { padding: 44px 0 56px; border-top: 1px solid rgba(26,26,24,0.08); }
  .foot { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
  .foot-brand { display: flex; align-items: center; gap: 10px; }
  .foot-brand img { height: 32px; }
  .foot-brand .nav-wordmark { font-size: 25px; }
  .foot-meta { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
  .foot-links { display: flex; gap: 22px; }
  .foot-links a { font-size: 14.5px; color: var(--text-body); }
  .foot-links a:hover { color: var(--brand-hover); }

  /* ============================================================ RESPONSIVE ====== */
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .feature-grid, .security-card, .debate-card { grid-template-columns: 1fr; }
    .debate-card, .security-card { padding: 34px; gap: 28px; }
    .uc-grid { grid-template-columns: 1fr 1fr; }
    .outcome-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
    .nav-links { display: none; }
  }
  @media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } .juniors { grid-template-columns: 1fr; } }

  /* ============================================================ A11Y FALLBACKS == */
  @media (prefers-reduced-transparency: reduce) {
    .tero-glass, .cta-card { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }
  @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } .feature-card { transition: none; } }

  /* ---- Brand accent = Tero logo cyan #01B5F8 (locked) ---- */
  :root {
    --brand: #01B5F8; --brand-hover: #0095D8; --brand-tint: #E3F6FF; --text-link: #0095D8;
    --tero-teal-50: #E3F6FF; --tero-teal-100: #BFEAFF; --tero-teal-400: #01B5F8;
    --tero-teal-600: #0095D8; --tero-teal-800: #075E89;
    --focus-ring: 0 0 0 3px rgba(1,181,248,0.25);
  }

/* ============================================================
   SHARED MULTI-PAGE COMPONENTS
   Feature pages, legal pages, expanded footer, personality blocks.
   ============================================================ */

/* ---- Sub-page hero ---- */
.subhero { padding: 54px 0 8px; }
.subhero .eyebrow { display:block; margin-bottom:14px; }
.subhero h1 { font-family: var(--font-serif); font-size: clamp(34px,5vw,52px); color:var(--text-heading); letter-spacing:-0.02em; line-height:1.12; max-width:18ch; }
.subhero .lead { font-family:var(--font-sans); font-size: clamp(17px,1.6vw,20px); line-height:1.6; color:var(--text-body); max-width:62ch; margin-top:20px; }
.subhero .hero-cta { margin-top:28px; }

/* ---- Screenshot frame (glass window) ---- */
.shot-frame { border-radius: var(--radius-3xl); padding:12px; margin:40px auto 0; max-width:1240px; }
.shot-bar { display:flex; gap:7px; align-items:center; padding:6px 8px 12px; }
.shot-bar .demo-dot { width:9px;height:9px;border-radius:50%;background:var(--gray-200); }
.shot-bar .crumb { margin-left:8px; font-family:var(--font-serif); font-size:14px; color:var(--text-muted); }
.shot-frame img { width:100%; display:block; border-radius: var(--radius-xl); border:var(--border-card); }

/* ---- Feature alternating blocks ---- */
.feat-block { padding: 56px 0; }
.feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.feat-grid.rev .feat-text { order:2; }
.feat-text .eyebrow { display:block; margin-bottom:12px; }
.feat-text h2 { font-family:var(--font-serif); font-size:31px; color:var(--text-heading); letter-spacing:-0.02em; margin-bottom:14px; line-height:1.18; }
.feat-text p { font-size:16.5px; line-height:1.72; color:var(--text-body); margin:0 0 14px; }
.feat-shot { border-radius: var(--radius-2xl); padding:10px; }
.feat-shot img { width:100%; display:block; border-radius: var(--radius-lg); border:var(--border-card); }

/* ---- Readable prose ---- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-size: 17px; line-height: 1.75; color: var(--text-body); margin: 0 0 18px; }

/* ---- Legal pages ---- */
.legal-wrap { padding: 16px 0 80px; }
.legal { max-width: 820px; margin:0 auto; border-radius: var(--radius-3xl); padding: 50px 58px; }
.legal-meta { font-size:14.5px; color:var(--text-muted); margin-bottom: 26px; padding-bottom:22px; border-bottom: var(--border-divider); line-height:1.7; }
.legal-meta b { color: var(--text-heading); }
.legal-intro { font-size: 16px; line-height:1.72; color: var(--text-body); margin: 0 0 10px; }
.legal h2 { font-family: var(--font-serif); font-size: 23px; color: var(--text-heading); margin: 36px 0 10px; letter-spacing:-0.01em; }
.legal h3 { font-size: 16px; color: var(--text-heading); margin: 24px 0 6px; font-weight:600; }
.legal p { font-size: 15.5px; line-height: 1.72; color: var(--text-body); margin: 0 0 14px; }
.legal .summary { color: var(--text-heading); font-weight: 500; background: var(--brand-tint);
                  border-left: 3px solid var(--brand); padding: 12px 16px;
                  border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 0 0 14px; font-size:15px; line-height:1.6; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { font-size: 15.5px; line-height: 1.7; color: var(--text-body); margin-bottom: 6px; }
.legal a { color: var(--text-link); }

/* ---- Personality (CCO speech bubbles) ---- */
.personality { padding: 64px 0 30px; text-align:center; }
.personality .eyebrow { display:block; margin-bottom: 8px; }
.personality h2 { font-family:var(--font-serif); font-size: clamp(26px,3.4vw,36px); color:var(--text-heading); letter-spacing:-0.02em; margin-bottom: 34px; }
.bubbles { display:flex; gap: 50px; justify-content:center; align-items:flex-end; flex-wrap:wrap; }
.bubbles img { width: 400px; max-width: 88vw; height:auto; display:block; }

/* ---- Expanded footer ---- */
.site-foot { padding: 58px 0 30px; border-top: 1px solid rgba(26,26,24,0.08); margin-top: 20px; }
.foot-top { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.foot-brandcol .foot-brand { display:flex; align-items:center; gap:10px; }
.foot-brandcol img { height: 34px; }
.foot-brandcol .nav-wordmark { font-size: 40px; line-height: 1; }
.foot-tagline { font-size: 14px; color: var(--text-body); line-height:1.6; margin-top:14px; max-width: 34ch; }
.foot-col h4 { font-family:var(--font-sans); font-size: 11px; font-weight:600; letter-spacing:.07em;
               text-transform:uppercase; color: var(--text-muted); margin-bottom: 15px; }
.foot-col a { display:block; font-size: 14.5px; color: var(--text-body); margin-bottom: 11px; }
.foot-col a:hover { color: var(--brand-hover); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
               margin-top: 44px; padding-top: 22px; border-top: var(--border-divider); }
.foot-bottom .meta { font-size: 13px; color: var(--text-muted); line-height:1.6; }
.foot-bottom .socials a { font-size: 14px; color: var(--text-body); margin-left: 18px; }
.foot-bottom .socials a:hover { color: var(--brand-hover); }
.foot-notes { margin-top: 12px; font-size: 11px; color: var(--text-muted); opacity: 0.65; }
.foot-notes p { margin: 0; }
.foot-updated { width: 100%; margin-top: 10px; font-size: 12px; color: var(--text-muted); opacity: 0.7; }

/* FAQ page — Q&A cards (use .tero-glass for the surface). */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { padding: 22px 26px; }
.faq-q { font-family: var(--font-serif); font-size: 20px; letter-spacing: -0.01em; color: var(--text-heading); margin: 0 0 8px; }
.faq-a { font-size: 15px; line-height: 1.66; color: var(--text-body); margin: 0; }
.faq-foot { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--text-muted); }
.faq-foot a { color: var(--text-link); }

@media (max-width: 860px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:26px; }
  .feat-grid{ grid-template-columns:1fr; gap:30px; }
  .feat-grid.rev .feat-text{ order:0; }
  .legal{ padding:32px 22px; }
  .bubbles{ gap:24px; }
}

/* ---- Legal page tables (e.g. GDPR retention table) ---- */
.legal table { width:100%; border-collapse:collapse; margin: 6px 0 18px; font-size:13.5px; }
.legal th { text-align:left; background: var(--surface-sunken); color: var(--text-heading); font-weight:600;
            padding:10px 12px; border:0.5px solid var(--gray-100); vertical-align:top; }
.legal td { padding:10px 12px; border:0.5px solid var(--gray-100); color: var(--text-body); line-height:1.55; vertical-align:top; }

/* ---- Centered hero variant (homepage, with real product shot) ---- */
.hero-center { text-align:center; max-width: 940px; margin:0 auto; }
.hero-center h1 { margin:0 auto; }
.hero-center .hero-sub { margin-left:auto; margin-right:auto; }
.hero-center .hero-cta, .hero-center .hero-positioning { justify-content:center; }

/* ---- Showcase row link ---- */
.feat-link { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14.5px;
             font-weight:500; color:var(--brand-hover); }
.feat-link:hover { text-decoration:underline; }

/* ---- Personality caption (used on feature pages) ---- */
.personality.compact { padding: 40px 0 10px; }
.personality.compact .bubbles img { width: 460px; }

/* ---- Legal two-panel layout ---- */
.legal-layout { display:grid; grid-template-columns: 256px 1fr; gap: 26px; align-items:start; }
.legal-aside { position: sticky; top: 104px; display:flex; flex-direction:column; gap:14px; }
.legal-card { border-radius: var(--radius-2xl); padding: 20px; }
.legal-card h4 { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.07em;
                 text-transform:uppercase; color:var(--text-muted); margin-bottom:13px; }
.legal-nav a { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text-body);
               padding:8px 10px; border-radius:var(--radius-md); transition:background var(--dur) var(--ease); }
.legal-nav a:hover { background: rgba(26,26,24,0.05); color:var(--text-heading); }
.legal-nav a.current { background: var(--brand-tint); color: var(--brand-hover); font-weight:500; }
.legal-nav a .ti { font-size:16px; color:var(--brand); }
.legal-toc { padding-bottom: 14px; }
/* Only the list scrolls — keeps the card's rounded corners clean and insets the
   scrollbar so it isn't clipped by the radius; soft fade top/bottom on scroll. */
.legal-toc ul { list-style:none; margin:4px 0 0; padding:0 8px 0 0; max-height: calc(100vh - 360px); overflow-y:auto;
   scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent;
   -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
           mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.legal-toc ul::-webkit-scrollbar { width: 6px; }
.legal-toc ul::-webkit-scrollbar-track { background: transparent; }
.legal-toc ul::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
.legal-toc ul::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.legal-toc a { display:block; font-size:13px; line-height:1.4; color:var(--text-body);
               padding:5px 8px; border-radius:var(--radius-sm);
               transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.legal-toc a:hover { background: rgba(26,26,24,0.05); color:var(--brand-hover); }
.legal-toc .toc-h3 a { padding-left:20px; font-size:12.5px; color:var(--text-muted); }
.legal-toc .toc-part a { font-weight:600; color:var(--text-heading); text-transform:uppercase;
                         font-size:11px; letter-spacing:.06em; margin-top:10px; }
.legal-layout .legal { max-width:none; width:100%; padding: 44px 48px; }
html { scroll-padding-top: 88px; }

@media (max-width: 980px){
  .legal-layout { grid-template-columns: 1fr; }
  .legal-aside { position:static; flex-direction:row; flex-wrap:wrap; }
  .legal-aside .legal-card { flex:1 1 260px; }
  .legal-toc ul { max-height:none; -webkit-mask-image:none; mask-image:none; }
  .hero-center .hero-sub { font-size:17px; }
}

/* ---- Hero reel — "focus-pull workspace" (controller lives in tero-site.js) ----
   A 3D composition of floating app windows: a front feature window cycles
   through the product (slow zoom + crossfade + caption + live chrome bar),
   flanked by two dimmed background windows for depth. The whole scene shifts
   on mouse parallax (--px / --py are set on .reel-stage by the controller). ---- */
.reel { position:relative; margin-top:44px; }
.reel::before { content:""; position:absolute; inset:-6% 8% 12%; z-index:0; pointer-events:none;
   background: radial-gradient(60% 60% at 50% 38%, rgba(1,181,248,0.13), transparent 70%); filter: blur(8px); }

.reel-stage { position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-start;
   min-height:540px; padding:30px 0 6px; perspective:1800px; perspective-origin:50% 42%; }

.reel-win { position:relative; margin:0; transform-style:preserve-3d; will-change:transform; }
/* Solid bezel (NOT backdrop-filter): the window holds an opaque screenshot, so a
   blurred glass surface is invisible behind it but recomputes every animation frame.
   A solid frame looks identical and is free to animate. */
.reel-win-inner { border-radius: var(--radius-3xl); overflow:hidden; background: rgba(255,255,255,0.94);
   border: var(--glass-border); box-shadow: var(--shadow-float), var(--shadow-lg), var(--glass-highlight); }

/* Front feature window — content cycles through the product */
.reel-front { z-index:3; width:min(1000px, 80%);
   transform: translateZ(48px) translate3d(calc(var(--px,0)*16px), calc(var(--py,0)*11px), 0);
   transition: transform 0.5s var(--ease); }
.reel-front .reel-win-inner { padding:11px; animation: reelFloatA 9s ease-in-out infinite; }

.reel-bar { display:flex; gap:7px; align-items:center; padding:4px 8px 11px; }
.reel-bar .demo-dot { width:9px; height:9px; border-radius:50%; background: var(--gray-200); }
.reel-bar .crumb { margin-left:9px; font-family: var(--font-serif); font-size:14px; color: var(--text-muted);
   transition: color 0.4s var(--ease); }
.reel-bar .crumb b { color: var(--brand-hover); font-weight:500; }

.reel-screen { position:relative; aspect-ratio:16/10; border-radius: var(--radius-xl); overflow:hidden;
   border: var(--border-card); background:#fff; }
.reel-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top;
   opacity:0; transform:scale(1.0); transform-origin:30% 35%; transition: opacity 0.9s var(--ease); }
.reel-slide.is-active { opacity:1; z-index:1; animation: reelZoom 5s ease-out forwards; }

/* Floating detail chip — the front-most parallax layer (moves most → reads closest) */
.reel-chip { position:absolute; left:20px; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:8px;
   padding:9px 15px 9px 13px; border-radius: var(--radius-pill); font-size:13px; font-weight:500; color: var(--text-heading);
   background: rgba(255,255,255,0.92);
   border: var(--glass-border); box-shadow: var(--shadow-float), var(--glass-highlight);
   transform: translate3d(calc(var(--px,0)*30px), calc(var(--py,0)*20px), 0);
   transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.reel-chip .ti { font-size:16px; color: var(--brand); }
.reel-chip.is-swapping { opacity:0; }

/* Background ambient windows — depth + parallax only */
.reel-back { position:absolute; top:54px; z-index:1; width:min(440px, 40%); }
.reel-back .reel-win-inner { padding:8px; opacity:0.86; }
.reel-back .reel-win-inner img { width:100%; display:block; border-radius: var(--radius-lg); border: var(--border-card); filter: saturate(0.96); }
.reel-back::after { content:""; position:absolute; inset:0; border-radius: var(--radius-3xl);
   background: linear-gradient(180deg, rgba(237,239,241,0.30), rgba(237,239,241,0.55)); pointer-events:none; }
.reel-back-l { left:-10px; transform-origin:left center;
   transform: translateZ(-90px) rotateY(9deg) translate3d(calc(var(--px,0)*6px), calc(var(--py,0)*5px), 0); }
.reel-back-l .reel-win-inner { animation: reelFloatB 11s ease-in-out infinite; }
.reel-back-r { right:-10px; transform-origin:right center;
   transform: translateZ(-90px) rotateY(-9deg) translate3d(calc(var(--px,0)*6px), calc(var(--py,0)*5px), 0); }
.reel-back-r .reel-win-inner { animation: reelFloatB 12s ease-in-out infinite reverse; }

/* Caption + chapter dots (the dots double as a progress player) */
.reel-meta { position:relative; z-index:4; max-width:760px; margin:2px auto 0; display:flex; flex-direction:column;
   align-items:center; gap:14px; text-align:center; }
.reel-caption { margin:0; font-family: var(--font-serif); font-size:clamp(18px,2.1vw,23px); line-height:1.3;
   color: var(--text-heading); letter-spacing:-0.01em; min-height:1.3em;
   transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reel-caption.is-swapping { opacity:0; transform: translateY(6px); }
.reel-dots { display:flex; gap:9px; }
.reel-dot { width:26px; height:5px; border-radius: var(--radius-pill); border:none; padding:0; background: var(--gray-200);
   cursor:pointer; overflow:hidden; position:relative; transition: background 0.3s var(--ease); }
.reel-dot[aria-current="true"] { background: var(--tero-teal-100); }
.reel-dot[aria-current="true"]::after { content:""; position:absolute; inset:0; transform-origin:left center;
   background: var(--brand); animation: reelProgress var(--dwell, 4600ms) linear forwards; }
.reel-dot:focus-visible { outline:none; box-shadow: var(--focus-ring); }

/* Paused (hover / tab hidden): freeze the zoom + progress so it reads as "stopped" */
/* Paused (hover / tab hidden / scrolled out of view): freeze float, zoom and progress
   so the reel costs nothing when it isn't being watched. */
.reel.is-paused .reel-win-inner,
.reel.is-paused .reel-slide.is-active,
.reel.is-paused .reel-dot[aria-current="true"]::after { animation-play-state: paused; }

@keyframes reelZoom    { from { transform: scale(1.0); } to { transform: scale(1.065); } }
@keyframes reelProgress{ from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reelFloatA  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes reelFloatB  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 860px) {
  /* On phones the depth windows are hidden, so let the single feature window dominate:
     break it slightly out of the wrap gutter (near full-bleed) and tighten the vertical
     air so the product reads big, not lost in whitespace. */
  .reel { margin: 22px -12px 0; }
  .reel-stage { min-height:0; padding:8px 0 2px; perspective:none; }
  .reel-back { display:none; }
  .reel-front { width:100%; transform:none; }
  .reel-front .reel-win-inner { animation:none; padding:9px; }
  .reel-chip { transform:none; left:14px; bottom:14px; }
  .reel-meta { margin-top:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-front, .reel-back-l, .reel-back-r, .reel-chip { transform:none !important; }
  .reel-win-inner, .reel-slide.is-active { animation:none !important; }
  .reel-slide.is-active { transform:none !important; }
  .reel-dot[aria-current="true"]::after { animation:none !important; }
  .reel-caption.is-swapping { transform:none; }
}

/* ---- Logo/wordmark optical alignment: center the ring with the cap height
   (the mascot's feet make geometric centering read as "ring too high") ---- */
/* Whole lockup nudged down to centre it in the bar (the serif descender gap
   otherwise makes it sit high); logo nudged up to centre on the cap height.
   Values tuned in-browser via alignment-tuner.html. */
.nav-brand, .foot-brand { transform: translateY(5px); }
.nav-brand img, .foot-brand img { transform: translateY(-5px); }
.nav-wordmark { transform: translateY(0); }

/* ---- Answer-quality trio (sources · process · evaluation) ---- */
.trust-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .trust-grid { grid-template-columns:1fr; } }

/* ============================================================
   EXPERT PANEL page helpers
   ============================================================ */
.check-list { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.check-list li { display:flex; gap:11px; font-size:15.5px; line-height:1.55; color:var(--text-body); }
.check-list .ti { color:var(--brand); font-size:19px; flex:0 0 auto; margin-top:1px; }
.ep-tracker { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.ep-step { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-body);
           background:rgba(255,255,255,0.7); border:var(--border-card); border-radius:var(--radius-pill); padding:7px 13px; }
.ep-step .n { width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center; }
.ep-arrow { color:var(--text-muted); font-size:14px; }

/* ---- Real-screenshot device frames + 7-stage walkthrough (Expert Panel) ---- */
.ep-device { border-radius: var(--radius-2xl); overflow: hidden; border: var(--border-card);
   box-shadow: var(--shadow-float); background: #fff; }
.ep-device img { width: 100%; display: block; }
/* hero: one panel, cropped to its top and dissolving into the canvas at the bottom */
.ep-hero-device { max-width: 384px; margin: 38px auto 0; max-height: 560px;
   -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
           mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); }
.ep-walk-hint { text-align: center; font-size: 13px; color: var(--text-muted);
   margin: 0 0 20px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ep-walk-hint .ti { color: var(--brand); font-size: 17px; }
/* horizontal auto-scrolling marquee of the seven real stages. tero-site.js clones
   the track for a seamless loop and adds .is-marquee; without JS it stays a manual
   horizontal scroller. The long-tail dissolve now lives on the left & right edges. */
.ep-walk { overflow-x: auto; position: relative; padding: 4px 2px 18px;
   scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.ep-walk-track { display: flex; gap: 22px; width: max-content; }
.ep-walk .ep-stage { width: 258px; flex: 0 0 auto; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.ep-walk.is-marquee { overflow: hidden;
   -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
           mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
.ep-walk.is-marquee .ep-walk-track { animation: ep-slide var(--ep-speed, 54s) linear infinite; will-change: transform; }
.ep-walk.is-marquee:hover .ep-walk-track { animation-play-state: paused; }
@keyframes ep-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }
@media (prefers-reduced-motion: reduce) {
  .ep-walk.is-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ep-walk.is-marquee .ep-walk-track { animation: none; }
  .ep-walk.is-marquee .ep-dup { display: none; } }
@media (prefers-reduced-transparency: reduce) {
  .ep-walk.is-marquee { -webkit-mask-image: none; mask-image: none; } }
.ep-stage-head { display: flex; align-items: center; gap: 10px; }
.ep-stage-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff;
   font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.ep-stage-name { font-family: var(--font-serif); font-size: 20px; color: var(--text-heading); letter-spacing: -0.01em; }
.ep-stage figcaption { font-size: 13.5px; line-height: 1.55; color: var(--text-body); }
.ep-walk::-webkit-scrollbar { height: 8px; }
.ep-walk::-webkit-scrollbar-track { background: transparent; }
.ep-walk::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
.ep-walk::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Homepage Expert Panel — Legora-aOS-inspired isometric stack of liquid-glass
   plates (the 7 stages). A cyan pulse travels up the stack as the panel "runs",
   the whole stack gently floats, and the deepest plates dissolve (long tail).
   Hover to pause; static under reduced motion. */
.ep-stack { align-self: center; justify-self: center; width: 100%; min-height: 700px;
   display: grid; place-items: center; perspective: 1850px; }
.ep-stack-scene { position: relative; width: 330px; height: 330px; transform-style: preserve-3d;
   transform: rotateX(56deg) rotateZ(-45deg); animation: ep-stack-float 9s ease-in-out infinite; }
.ep-stack:hover .ep-stack-scene, .ep-stack:hover .ep-plate,
.ep-stack:hover .ep-toggle-label, .ep-stack:hover .ep-toggle-track, .ep-stack:hover .ep-toggle-knob { animation-play-state: paused; }
/* each plate is a frosted-glass tile bearing the real stage screenshot (top-cropped);
   the cyan ring pulse travels up the stack as the panel "runs". */
.ep-plate { position: absolute; inset: 0; border-radius: 28px; overflow: hidden;
   background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.72);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 18px 30px rgba(24,34,46,0.12);
   transform: translateZ(calc((var(--s) - 3.5) * 47px));
   opacity: calc(0.5 + var(--s) * 0.072);
   animation: ep-plate-pulse 6.3s linear infinite; animation-delay: calc(var(--s) * 0.72s); }
.ep-plate img { position: absolute; inset: 0; width: 100%; height: 100%;
   object-fit: cover; object-position: top center; opacity: 0.9; }
.ep-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none;
   background: linear-gradient(155deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 52%); }
/* top plate = the Expert Panel toggle; auto-cycles on/off in time with the sweep */
.ep-plate-toggle { background: rgba(249,252,254,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
   animation: none; display: grid; place-items: center; }
.ep-plate-toggle::after { background: linear-gradient(155deg, rgba(255,255,255,0.6), rgba(255,255,255,0.08) 56%); }
.ep-toggle { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.ep-toggle-label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
   color: var(--text-muted); animation: ep-toggle-label 6.3s ease-in-out infinite; }
.ep-toggle-track { position: relative; width: 52px; height: 29px; border-radius: 999px; background: var(--gray-300);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); animation: ep-toggle-track 6.3s ease-in-out infinite; }
.ep-toggle-knob { position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%;
   background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); animation: ep-toggle-knob 6.3s ease-in-out infinite; }
@keyframes ep-stack-float {
   0%, 100% { transform: rotateX(56deg) rotateZ(-45deg) translateZ(0); }
   50%      { transform: rotateX(56deg) rotateZ(-45deg) translateZ(12px); } }
@keyframes ep-plate-pulse {
   0%, 22%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 18px 30px rgba(24,34,46,0.12); }
   9%           { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 2px rgba(1,181,248,0.6), 0 20px 34px rgba(1,140,200,0.34); } }
/* toggle: off → flips on (6%) → stays on while the sweep runs → flips off (82–90%) when it finishes → loops */
@keyframes ep-toggle-knob  { 0%{ left:3px; } 6%{ left:26px; } 82%{ left:26px; } 90%{ left:3px; } 100%{ left:3px; } }
@keyframes ep-toggle-track { 0%{ background:var(--gray-300); } 6%{ background:var(--brand); } 82%{ background:var(--brand); } 90%{ background:var(--gray-300); } 100%{ background:var(--gray-300); } }
@keyframes ep-toggle-label { 0%{ color:var(--text-muted); } 6%{ color:var(--text-heading); } 82%{ color:var(--text-heading); } 90%{ color:var(--text-muted); } 100%{ color:var(--text-muted); } }
@media (prefers-reduced-motion: reduce) {
  .ep-stack-scene, .ep-plate, .ep-toggle-label, .ep-toggle-track, .ep-toggle-knob { animation: none; }
  .ep-toggle-track { background: var(--brand); } .ep-toggle-knob { left: 26px; } .ep-toggle-label { color: var(--text-heading); } }

/* Legora-style step menu beside the stack — tap a stage to pause the sweep and read it */
.ep-menu-hint { font-size: 12px; color: var(--text-muted); margin: 20px 0 10px; display: flex; align-items: center; gap: 7px; }
.ep-menu-hint .ti { color: var(--brand); font-size: 14px; }
.ep-menu { display: flex; flex-direction: column; gap: 6px; max-width: 348px; }
.ep-menu-item { display: block; width: 100%; text-align: left; cursor: pointer; font-family: var(--font-sans);
   background: rgba(255,255,255,0.40); -webkit-backdrop-filter: blur(9px) saturate(1.3); backdrop-filter: blur(9px) saturate(1.3);
   border: 1px solid rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 8px rgba(24,34,46,0.05);
   border-radius: var(--radius-pill); padding: 7px 16px;
   transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-radius var(--dur) var(--ease); }
.ep-menu-item:hover { background: rgba(255,255,255,0.62); }
.ep-menu-item:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
.ep-menu-row { display: flex; align-items: center; gap: 10px; }
.ep-menu-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.55); color: var(--text-muted);
   font-size: 11px; font-weight: 600; display: grid; place-items: center;
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ep-menu-t { font-size: 14px; font-weight: 600; color: var(--text-heading); letter-spacing: -0.01em; }
.ep-menu-d { display: block; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; padding-left: 30px; font-size: 13px; line-height: 1.5; color: var(--text-body);
   transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-top var(--dur) var(--ease); }
.ep-menu-item.active { background: rgba(255,255,255,0.72); border-radius: var(--radius-lg);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 14px 30px rgba(24,34,46,0.13); }
.ep-menu-item.active .ep-menu-n { background: var(--brand); color: #fff; }
.ep-menu-item.active .ep-menu-d { max-height: 110px; opacity: 1; margin-top: 7px; }
/* selecting a stage freezes the sweep, dims the rest, and highlights that plate */
.ep-stack.is-inspecting .ep-stack-scene, .ep-stack.is-inspecting .ep-plate { animation-play-state: paused; }
.ep-stack.is-inspecting .ep-plate:not(.ep-plate-active):not(.ep-plate-toggle) { opacity: 0.4; }
.ep-stack.is-inspecting .ep-toggle-track { background: var(--brand); animation: none; }
.ep-stack.is-inspecting .ep-toggle-knob { left: 26px; animation: none; }
.ep-stack.is-inspecting .ep-toggle-label { color: var(--text-heading); animation: none; }
.ep-plate.ep-plate-active { animation: none; opacity: 1 !important;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 2px rgba(1,181,248,0.78), 0 22px 40px rgba(1,140,200,0.4); }

/* ---- a11y + contrast (audit): darker cyan-ink for text, focus rings ---- */
:root{ --brand-hover:#0072A8; --text-link:#0072A8; --text-muted:#6E6D68; }
:focus-visible{ outline:2px solid var(--brand-hover); outline-offset:2px; border-radius:3px; }
.btn-ink:focus-visible{ outline:2px solid #013a57; outline-offset:3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; }

/* ---- Nav "Product" dropdown (hover) ---- */
.nav-links .has-menu { position: relative; display: flex; }
.nav-links .has-menu::after { content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.nav-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:230px; padding:8px;
  border-radius: var(--radius-xl); background: #fff;
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-float);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); z-index:60; }
.nav-links .has-menu:hover .nav-menu, .nav-links .has-menu:focus-within .nav-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a { display:flex !important; align-items:center; gap:11px; padding:10px 12px !important; border-radius:var(--radius-md); font-size:14.5px; color:var(--text-body); }
.nav-menu a:hover { background: var(--gray-25); color:var(--text-heading); }
.nav-menu a .ti { font-size:18px; color:var(--brand); }
.nav-menu a .mt { font-size:12px; color:var(--text-muted); display:block; margin-top:1px; }

/* ---- Demo lead form (replaces dead mailto CTA) ---- */
.demo-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:560px; margin:28px auto 0; text-align:left; }
.demo-form .ff { display:flex; }
.demo-form input, .demo-form select { width:100%; font-family:var(--font-sans); font-size:15px; padding:13px 16px;
   border-radius:var(--radius-md); border:1px solid var(--gray-200); background:rgba(255,255,255,0.85); color:var(--text-heading); }
.demo-form input::placeholder { color:var(--text-muted); }
.demo-form input:focus, .demo-form select:focus { outline:2px solid var(--brand-hover); outline-offset:1px; border-color:transparent; }
.demo-submit { grid-column:1 / -1; justify-content:center; margin-top:4px; }
.form-note { font-size:12.5px; color:var(--text-muted); margin:14px auto 0; max-width:520px;
   text-align:center; line-height:1.6; }
.form-note .ti { color:var(--brand); vertical-align:-2px; margin-right:4px; } .form-note a { color:var(--text-link); }
.form-ok { max-width:560px; margin:18px auto 0; background:var(--success-bg); color:var(--success-text);
   border:1px solid var(--success-border); border-radius:var(--radius-lg); padding:16px 20px; font-size:15px;
   display:flex; align-items:center; gap:10px; text-align:left; }
.form-ok .ti { font-size:20px; flex:0 0 auto; }
/* `.form-ok{display:flex}` would otherwise beat the UA `[hidden]{display:none}` rule
   (equal specificity, author origin wins) — so the success note showed before submit.
   This restores the hidden behaviour until teroDemoSubmit() unsets the attribute. */
.form-ok[hidden] { display: none; }
/* Submit-failure fallback (injected by tero-site.js when the POST fails). */
.form-err { max-width:560px; margin:14px auto 0; font-size:13px; line-height:1.5; color:var(--danger-text);
   display:flex; align-items:flex-start; justify-content:center; gap:6px; text-align:center; }
.form-err .ti { flex:0 0 auto; vertical-align:-2px; }
.form-err a { color:inherit; text-decoration:underline; }
@media (max-width:560px){ .demo-form { grid-template-columns:1fr; } }

/* ---- Collapsible "Book a demo" panel — opens in place via :target (no redirect, no mail app) ---- */
.cta-triggers { transition: opacity var(--dur) var(--ease); }
.demo-collapse { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden;
   transition: grid-template-rows .45s var(--ease), opacity .4s var(--ease), visibility .45s var(--ease); }
.demo-collapse > .demo-collapse-inner { overflow:hidden; min-height:0; }
#cta:target .demo-collapse { grid-template-rows:1fr; opacity:1; visibility:visible; }
#cta:target .cta-triggers { display:none; }
.demo-collapse .demo-form { margin-top:6px; }
@media (prefers-reduced-motion: reduce){ .demo-collapse { transition:none; } }

/* ---- Security / Trust Center + About page bits ---- */
.tc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tc-card { border-radius:var(--radius-2xl); padding:26px; background:rgba(255,255,255,0.55); border:var(--border-card); }
.tc-card .ic { width:42px;height:42px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--tero-teal-50);margin-bottom:14px; }
.tc-card .ic .ti { color:var(--brand-hover); font-size:22px; }
.tc-card h3 { font-family:var(--font-serif); font-size:20px; color:var(--text-heading); margin-bottom:8px; }
.tc-card p { font-size:14.5px; line-height:1.6; color:var(--text-body); margin:0; }
.subproc { width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
.subproc th { text-align:left; background:var(--surface-sunken); color:var(--text-heading); font-weight:600; padding:11px 14px; border:0.5px solid var(--gray-100); }
.subproc td { padding:11px 14px; border:0.5px solid var(--gray-100); color:var(--text-body); vertical-align:top; }
.region-eu { color:var(--success-text); font-weight:500; } .region-us { color:var(--warning-text); font-weight:500; }
@media (max-width:860px){ .tc-grid{ grid-template-columns:1fr; } }

/* ============================================================ A11Y + MOBILE NAV === */
/* Skip-to-content link (visible only on keyboard focus) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px;
  text-decoration: none; transition: top var(--dur) var(--ease); }
.skip-link:focus { top: 12px; }

/* Mobile hamburger menu — pure-CSS checkbox toggle (no JS). The WordPress rebuild
   will use the core Navigation block's responsive overlay instead. */
.nav-burger { display: none; }
.nav-drawer-signin { display: none; }
@media (max-width: 900px) {
  .nav { position: relative; gap: 8px; padding: 8px 10px 8px 16px; }
  .nav-wordmark { font-size: 30px; }
  .nav-brand img { height: 30px; }
  .nav .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
  .nav-burger { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; cursor: pointer;
    border-radius: var(--radius-md); color: var(--text-heading); }
  .nav-burger:hover { background: rgba(26,26,24,0.06); }
  .nav-burger .ti { font-size: 24px; }
  .nav-burger .nb-close { display: none; }
  .nav-toggle-cb:checked ~ .nav-burger .nb-open { display: none; }
  .nav-toggle-cb:checked ~ .nav-burger .nb-close { display: block; }
  .nav-actions { margin-left: 10px; }
  .nav-actions .nav-signin { display: none; }
  .nav-links { display: none; position: absolute; top: calc(100% + 12px); left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 2px; padding: 10px; border-radius: var(--radius-xl);
    background: rgba(255,253,250,0.96); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.8); box-shadow: var(--shadow-float); }
  .nav-toggle-cb:checked ~ .nav-links { display: flex; }
  .nav-links > a, .nav-links .has-menu > a { padding: 12px 14px; border-radius: var(--radius-md); }
  .nav-drawer-signin { display: block; border-top: var(--border-divider); margin-top: 4px; }
  .nav-links .has-menu { flex-direction: column; align-items: stretch; }
  .nav-links .has-menu::after { display: none; }
  .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 2px 0 2px 10px;
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; }
}

/* Mobile safety net + scale the decorative 3D Expert Panel stack down so it can't overflow.
   NB: use `clip`, NOT `hidden` — `overflow-x:hidden` on the root forces overflow-y to `auto`,
   which makes <body> a scroll container and breaks every `position:sticky` (e.g. the legal aside). */
html, body { overflow-x: clip; }
@media (max-width: 900px) {
  .debate-card > * { min-width: 0; }            /* let the stacked grid items shrink so text wraps */
  /* The isometric rotateZ(-45) + per-plate Z offsets push the *visible* art right of the
     fixed 330px layout box. Release the debate-card clip so the art can overflow into the
     gutters — the page root (html,body{overflow-x:clip}) bounds it at the viewport edge. */
  .debate-card { overflow: visible; }
  .ep-stack { min-height: 340px; overflow: visible; }
  .ep-stack-scene { animation: none; transform: translateX(-16px) scale(0.52) rotateX(56deg) rotateZ(-45deg); }
  .ep-menu { max-width: none; }
}

/* Opaque fallback for browsers without backdrop-filter (the glass would otherwise read as flat translucency) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tero-glass, .cta-card, .nav-menu, .ep-menu-item, .lang-btn, .lang-menu { background: var(--glass-bg-strong, rgba(255,255,255,0.92)); }
}

/* ============================================================
   Language switcher + legal translation banner (injected by tero-site.js)
   ============================================================ */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
   font-size: 14px; font-weight: 500; color: var(--text-body); padding: 8px 11px; border-radius: var(--radius-pill);
   background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
   border: 1px solid rgba(255,255,255,0.7);
   transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lang-btn:hover { background: var(--glass-bg-strong); box-shadow: var(--shadow-sm); }
.lang-btn > .ti-world { font-size: 17px; color: var(--brand); }
.lang-cur { line-height: 1; }
.lang-caret { font-size: 15px; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.lang-switch.open .lang-caret { transform: rotate(180deg); }

.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 186px; z-index: 60;
   display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--radius-xl);
   background: #fff;
   border: 1px solid var(--border-subtle); box-shadow: var(--shadow-float);
   opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right;
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); }
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-item { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; font: inherit;
   font-size: 14px; color: var(--text-body); text-align: left; padding: 9px 12px; border: none;
   background: transparent; border-radius: var(--radius-md);
   transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lang-item:hover { background: var(--gray-25); color: var(--text-heading); }
.lang-item .ti-check { font-size: 16px; color: var(--brand); opacity: 0; flex: 0 0 auto; }
.lang-item[aria-selected="true"] { color: var(--text-heading); font-weight: 600; }
.lang-item[aria-selected="true"] .ti-check { opacity: 1; }
.lang-btn:focus-visible, .lang-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.legal-i18n-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 28px; padding: 13px 16px;
   border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.55; color: var(--text-body);
   background: var(--brand-tint); border: 1px solid var(--tero-teal-200); }
.legal-i18n-banner .ti { flex: 0 0 auto; font-size: 18px; color: var(--brand-hover); margin-top: 1px; }

@media (max-width: 860px) {
  .lang-cur, .lang-caret { display: none; }       /* compact globe button on mobile */
  .lang-btn { padding: 8px; }
  .lang-menu { right: 0; transform-origin: top right; }
}

/* ============================================================
   Footer — dark contrast band (in BOTH themes) + big brand watermark
   ============================================================ */
.site-foot { position: relative; overflow: hidden; background: #121418; color: #C7CCD3;
   border-top: none; padding: 66px 0 40px; margin-top: 64px; }
.site-foot .wrap-wide { position: relative; z-index: 1; }
.site-foot .nav-wordmark { color: #F3F4F6; }
.site-foot .foot-tagline { color: #9AA0A9; }
.site-foot .foot-col h4 { color: #7E8590; }
.site-foot .foot-col a, .site-foot .foot-bottom .socials a { color: #C7CCD3; }
.site-foot .foot-col a:hover, .site-foot .foot-bottom .socials a:hover { color: #46C8FF; }
.site-foot .foot-bottom { border-top: 1px solid rgba(255,255,255,0.09); }
.site-foot .foot-bottom .meta { color: #8A909A; }

/* Big, half-cut Tero lockup watermark sitting behind the footer text (injected by JS). */
.foot-watermark { position: absolute; left: 50%; bottom: -66px; transform: translateX(-50%); z-index: 0;
   display: flex; align-items: center; gap: 26px; opacity: 0.05; pointer-events: none; user-select: none; white-space: nowrap; }
.foot-wm-mark { height: 196px; width: auto; filter: grayscale(1) brightness(2.6); }
.foot-wm-name { font-family: var(--font-serif); font-size: 300px; line-height: 0.7; color: #fff; letter-spacing: -0.04em; }
@media (max-width: 760px) { .foot-wm-name { font-size: 150px; } .foot-wm-mark { height: 104px; } .foot-watermark { bottom: -34px; } }

/* ---- Theme (light/dark) switch — injected into the footer bottom bar ---- */
.foot-theme { display: flex; align-items: center; gap: 9px; }
.foot-theme .ft-ico { font-size: 16px; color: #6E747E; transition: color var(--dur) var(--ease); }
.theme-switch { position: relative; width: 48px; height: 26px; flex: 0 0 auto; cursor: pointer; padding: 0;
   border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); }
.theme-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
   background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.45); transition: transform var(--dur) var(--ease); }
.theme-switch[aria-checked="true"] .theme-knob { transform: translateX(22px); }
.theme-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
:root[data-theme="dark"] .foot-theme .ft-moon { color: #9AB0FF; }
:root:not([data-theme="dark"]) .foot-theme .ft-sun { color: #FFC65C; }

/* ============================================================
   DARK THEME — token overrides + targeted fixes for hardcoded light surfaces.
   English/light stays the default; toggled via [data-theme="dark"] on <html>.
   ============================================================ */
:root[data-theme="dark"] {
  --gray-0:   #181B20;  --gray-25:  #1C2026;  --gray-50:  #1F242B;
  --gray-100: #2B313A;  --gray-200: #3A414C;  --gray-300: #4C5460;
  --gray-400: #8B929C;  --gray-600: #C0C6CE;  --gray-900: #F1F3F5;
  --canvas: #0E1014;
  --ambient:
    radial-gradient(1100px 700px at 88% -8%, rgba(1,181,248,0.12), transparent 62%),
    radial-gradient(900px 650px at -8% 108%, rgba(120,92,210,0.10), transparent 60%),
    linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  --surface-card: #181B20;  --surface-sunken: #121519;  --surface-hover: #20252C;
  --glass-bg: rgba(26,30,36,0.62);  --glass-bg-strong: rgba(26,30,36,0.82);
  --glass-blur: blur(28px) saturate(1.2);
  --glass-border: 1px solid rgba(255,255,255,0.10);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
  --border-card: 0.5px solid rgba(255,255,255,0.10);
  --border-divider: 1px solid rgba(255,255,255,0.08);
  --border-subtle: var(--gray-100);  --border-strong: var(--gray-200);
  --brand-hover: #46C8FF;  --brand-tint: rgba(1,181,248,0.14);
  --text-heading: #F1F3F5;  --text-body: #C0C6CE;  --text-muted: #8B929C;  --text-link: #46C8FF;
  --ink: #F1F3F5;  --ink-hover: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.55);
  --shadow-float: 0 2px 6px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --focus-ring: 0 0 0 3px rgba(70,200,255,0.35);
}
/* The marketing canvas + warm ambient are hardcoded (lines 15/17) — give them a dark counterpart */
[data-theme="dark"] body { background: #0B0D11; }
[data-theme="dark"] body::before {
  background:
    radial-gradient(760px 540px at 6% 2%, rgba(1,181,248,0.12), transparent 56%),
    radial-gradient(900px 640px at 96% 6%, rgba(56,92,180,0.13), transparent 58%),
    radial-gradient(980px 720px at 90% 94%, rgba(70,54,150,0.13), transparent 60%),
    radial-gradient(820px 600px at 8% 96%, rgba(1,130,190,0.10), transparent 60%),
    radial-gradient(900px 700px at 48% 48%, rgba(38,44,56,0.32), transparent 66%);
}
/* Primary solid + number badges flip: light fill needs dark text */
[data-theme="dark"] .btn-ink { background: #F1F3F5; color: #14161A; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .btn-ink:hover { background: #FFFFFF; }
[data-theme="dark"] .debate-steps .n, [data-theme="dark"] .ep-step .n,
[data-theme="dark"] .ep-stage-n, [data-theme="dark"] .ep-menu-item.active .ep-menu-n { color: #14161A; }
[data-theme="dark"] .skip-link { background: #F1F3F5; color: #14161A; }
/* Glass / translucent-white surfaces → translucent-dark */
[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,0.06); color: var(--text-heading); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .hero-tag { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .uc { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .uc:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .tc-card { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .cert-note { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .feature-card::before { background: linear-gradient(150deg, rgba(255,255,255,0.06), transparent 42%); }
/* Icon chips are white / light-teal in light mode (hardcoded or via the un-themed
   --tero-teal-50 token), which reads as a pale box on dark cards. Use a faint brand wash. */
[data-theme="dark"] .feature-ic { background: var(--brand-tint); border-color: rgba(70,200,255,0.18); }
[data-theme="dark"] .uc .ic, [data-theme="dark"] .security-list .ic, [data-theme="dark"] .tc-card .ic { background: var(--brand-tint); }
[data-theme="dark"] .reel-win-inner { background: rgba(34,38,44,0.92); }
[data-theme="dark"] .reel-screen { background: #15181C; }
[data-theme="dark"] .reel-chip { background: rgba(34,38,44,0.94); }
[data-theme="dark"] .reel-back::after { background: linear-gradient(180deg, rgba(10,12,15,0.32), rgba(10,12,15,0.58)); }
/* nav-links is a transparent inline row on desktop; the dark surface belongs ONLY to the
   mobile dropdown (which is the only place .nav-links gets a background, at the 900px bp). */
@media (max-width: 900px) { [data-theme="dark"] .nav-links { background: rgba(20,23,28,0.97); border-color: rgba(255,255,255,0.12); } }
[data-theme="dark"] .nav-menu, [data-theme="dark"] .lang-menu { background: var(--surface-card); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-burger:hover,
[data-theme="dark"] .legal-nav a:hover, [data-theme="dark"] .legal-toc a:hover { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .nav-menu a:hover { background: var(--surface-hover); }
[data-theme="dark"] .lang-item:hover { background: var(--surface-hover); }
[data-theme="dark"] .ep-menu-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ep-menu-item:hover, [data-theme="dark"] .ep-menu-item.active { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .ep-menu-n, [data-theme="dark"] .ep-step { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ep-device, [data-theme="dark"] .ep-plate { background: rgba(255,255,255,0.05); }
/* ...but the brand toggle lid (top plate) must stay near-opaque so the screenshot plates
   below don't bleed through and wash out the "Expert Panel" label. */
[data-theme="dark"] .ep-plate-toggle { background: rgba(20,24,30,0.92); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .ep-plate-toggle::after { background: linear-gradient(155deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 56%); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
   background: rgba(255,255,255,0.06); color: var(--text-heading); border-color: var(--gray-200); }
[data-theme="dark"] .legal-i18n-banner { border-color: rgba(1,181,248,0.30); }
[data-theme="dark"] ::selection { background: rgba(1,181,248,0.32); color: #fff; }
@media (prefers-reduced-transparency: reduce) {
  [data-theme="dark"] .tero-glass, [data-theme="dark"] .cta-card { background: #1A1D22 !important; }
}

/* Hero typewriter cursor */
.hero-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--text-heading);
  vertical-align: middle;
  margin-left: 2px;
  border-radius: 1px;
  animation: cursorBlink 0.75s step-end infinite;
}
.hero-cursor--done {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Hero keyword — the typewriter types only this one word (cyan italic). Injected at runtime
   by the typewriter (tero-site.js), so the H1's static text + i18n leaf stay untouched.
   No underline; the caret inside it is brand-tinted. */
.hero-kw { color: var(--brand); font-style: italic; white-space: nowrap; }
.hero-kw .hero-cursor { background: var(--brand); }

/* ============================================================
   Expert Panel — "How it works" scroll-pinned theater
   Brand-native take on the Dia-style theater: soft radii, glass
   cards, diffused shadows, teal accent, Newsreader labels. The
   pinned/scrubbed timeline lives in expert-panel.html; this is
   layout + the default (static) state. GSAP overrides opacity via
   autoAlpha, so nothing here forces phase elements hidden — the
   no-JS / .is-static fallback shows all three phases plainly.
   ============================================================ */
.ep-theater { --ep-accent: var(--brand-hover); margin-top: 30px; }
.ep-theater-sticky {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(26px, 4vw, 46px); padding: 4px 0;
}

/* step indicator ------------------------------------------------ */
.ep-steps { display: flex; align-items: center; max-width: 560px; width: 100%; margin: 0 auto; }
.ep-stepnode { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto;
  font-family: var(--font-serif); font-size: 14px; letter-spacing: -0.01em; color: var(--text-muted); transition: color .4s; }
/* node dot is a ::before so the label leaf stays bare text (translatable) */
.ep-stepnode::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--border-strong); background: var(--surface-card);
  transition: background .4s cubic-bezier(.16,1,.3,1), border-color .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.ep-stepnode.is-done::before { background: var(--ep-accent); border-color: var(--ep-accent); }
.ep-stepnode.is-active::before { background: var(--ep-accent); border-color: var(--ep-accent); transform: scale(1.28); box-shadow: var(--focus-ring); }
.ep-stepnode.is-done, .ep-stepnode.is-active { color: var(--text-heading); }
.ep-stepline { flex: 1 1 auto; height: 2px; margin: 0 6px 22px; background: var(--border-strong); border-radius: 999px; overflow: hidden; }
.ep-fill { display: block; height: 100%; background: var(--ep-accent); transform: scaleX(0); transform-origin: left; }

/* two-column theater ------------------------------------------- */
.ep-theater-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }

/* stage (decorative) ------------------------------------------- */
.ep-stage2 {
  position: relative; border-radius: var(--radius-3xl); overflow: hidden;
  min-height: clamp(330px, 44vh, 470px); box-shadow: var(--shadow-float);
}
.ep-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 30px; text-align: center; }

/* avatars */
.ep-av {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-card); border: 1.5px solid var(--border-strong); color: var(--text-muted);
  box-shadow: var(--shadow-sm); font-size: 24px;
}
.ep-av.sm { width: 40px; height: 40px; font-size: 18px; }
.ep-av.ep-senior { background: var(--ink); border-color: var(--ink); color: #fff; }
.ep-av.ep-junior { color: var(--ep-accent); }

/* scene 1 — orbit (Senior centre, juniors on an arc) */
.ep-orbit { position: relative; width: 240px; height: 200px; display: grid; place-items: center; }
.ep-orbit .ep-senior { position: relative; z-index: 2; width: 64px; height: 64px; font-size: 28px; }
.ep-orbit .ep-junior { --r: 104px; position: absolute; top: 50%; left: 50%; margin: -28px 0 0 -28px;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.ep-readlines { display: flex; flex-direction: column; gap: 7px; width: 190px; }
.ep-readlines span { height: 7px; border-radius: 999px; background: var(--surface-sunken); }
.ep-readlines span:nth-child(1) { width: 100%; }
.ep-readlines span:nth-child(2) { width: 78%; }
.ep-readlines span:nth-child(3) { width: 88%; }

/* scene 2/3 — heads row */
.ep-heads { display: flex; gap: 12px; }
.ep-heads.dim { opacity: 0.35; }

/* scene 2 — findings */
.ep-finds { display: flex; flex-direction: column; gap: 9px; width: min(100%, 320px); }
.ep-find {
  display: flex; align-items: center; gap: 9px; text-align: left; padding: 10px 13px; font-size: 13.5px;
  border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle);
  color: var(--text-heading); box-shadow: var(--shadow-sm);
  /* only the colour swap transitions — opacity/transform are GSAP's (a CSS opacity
     transition here fights GSAP's per-frame writes and the chip never appears) */
  transition: background .45s cubic-bezier(.16,1,.3,1), border-color .45s cubic-bezier(.16,1,.3,1), color .45s;
}
/* status dot is a ::before so the chip text leaf is bare prose (translatable); the money
   moment — challenged goes amber, then resolves green; dropped goes red strikethrough */
.ep-find::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); transition: background .45s cubic-bezier(.16,1,.3,1); }
.ep-find.is-challenged.warned { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.ep-find.is-challenged.warned::before { background: var(--warning-text); }
.ep-find.is-challenged.defended { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.ep-find.is-challenged.defended::before { background: var(--success-text); }
.ep-find.is-dropped.killed { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); text-decoration: line-through; opacity: 0.6; }
.ep-find.is-dropped.killed::before { background: var(--danger-text); }
.ep-bubble {
  display: inline-flex; align-items: center; max-width: 320px; padding: 9px 14px;
  border-radius: 14px 14px 14px 4px; font-size: 13px; font-weight: 500;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-md);
}

/* scene 3 — conclusion */
.ep-conclude-card {
  display: flex; flex-direction: column; gap: 12px; width: min(100%, 330px); padding: 22px;
  border-radius: var(--radius-2xl); background: var(--surface-card);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
}
.ep-conclude-head { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 18px; color: var(--text-heading); }
/* check glyph via ::before so the "Conclusion" leaf is bare text (translatable) */
.ep-conclude-head::before { content: "\2713"; color: var(--ep-accent); font-size: 18px; font-weight: 700; }
.ep-conclude-line { height: 9px; border-radius: 999px; background: var(--surface-sunken); }
.ep-conclude-line.lg { width: 92%; }
.ep-conclude-line { width: 80%; }
.ep-conclude-line.sh { width: 58%; }
.ep-cites { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ep-cite {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand-hover); border: 1px solid var(--tero-teal-100);
}

/* text column (translatable phases stacked, crossfaded) -------- */
.ep-theater-text { position: relative; min-height: 230px; display: grid; }
.ep-phase { grid-area: 1 / 1; align-self: center; }
.ep-phase-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.01em; color: var(--ep-accent); margin-bottom: 12px; }
/* numbered chip via ::before (content from data-phase-n) so the label leaf is bare text */
.ep-phase-label::before { content: attr(data-phase-n); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ep-accent); color: #fff; font-size: 12px; font-weight: 600; font-family: var(--font-sans); }
.ep-phase p { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--text-body); margin: 0; max-width: 40ch; }
.ep-phase p strong, .ep-phase p b { color: var(--text-heading); }

/* ---- static / reduced-motion / mobile fallback: show everything ---- */
.ep-theater.is-static .ep-theater-sticky { min-height: 0; display: block; }
.ep-theater.is-static .ep-steps { display: none; }
.ep-theater.is-static .ep-theater-grid { grid-template-columns: 1fr; gap: 0; }
.ep-theater.is-static .ep-stage2 { display: none; }                 /* drawn scenes don't stack cleanly — text carries it */
.ep-theater.is-static .ep-theater-text { display: block; min-height: 0; }
.ep-theater.is-static .ep-phase { display: block; padding: 22px 0; border-top: var(--border-divider); }
.ep-theater.is-static .ep-phase:first-child { border-top: 0; }

@media (max-width: 920px) {
  .ep-theater-grid { grid-template-columns: 1fr; gap: 30px; }
  .ep-theater-text { min-height: 180px; }
}