/* ===========================================================================
   TrustedIQ — Website 2: "The Agreement"
   An interactive, futuristic contract. Dark / blue / mono, brand-aligned.
   =========================================================================== */

:root {
  --bg:        #02112E;
  --panel:     #06183A;
  --panel-2:   #081E47;
  --blue:      #4752FC;
  --white:     #FFFFFF;
  --muted:     #7E8CA8;
  --green:     #17A95B;
  --line:      rgba(255, 255, 255, 0.10);
  --line-hi:   rgba(71, 82, 252, 0.5);
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --head: "DM Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.accent { color: var(--blue); }
.mono { font-family: var(--mono); }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* Page-like frame: a centred "sheet" the content sits on. Wide enough to clear the graphics
   (the 3D box / team render overflow the text column to the right) with space either side. */
.page-frame {
  position: fixed; top: 14px; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(1040px, 100% - 20px); z-index: 3; pointer-events: none;
  border: 1.5px solid rgba(71, 82, 252, 0.45);
  border-radius: 18px;
  box-shadow: 0 0 22px rgba(71, 82, 252, 0.30), inset 0 0 26px rgba(71, 82, 252, 0.08);
}
@media (max-width: 640px) { .page-frame { top: 9px; bottom: 9px; width: calc(100% - 16px); border-radius: 14px; } }
/* Mask strips at the page top/bottom so scrolling content stays inside the frame (doesn't
   hang above/below it). Frame-width, so the starfield in the side margins is untouched. */
.frame-mask { position: fixed; left: 50%; transform: translateX(-50%); width: min(1040px, 100% - 20px); height: 16px; background: var(--bg); z-index: 2; pointer-events: none; }
.frame-mask-top { top: 0; }
.frame-mask-bottom { bottom: 0; }
@media (max-width: 640px) { .frame-mask { width: calc(100% - 16px); height: 11px; } }

/* ===== Document ===== */
.doc {
  position: relative; z-index: 1;
  max-width: 820px; margin: 56px auto; padding: 0 24px 60px;
}
.doc::before {            /* glowing top edge */
  content: ""; display: block; height: 2px; margin-bottom: 0;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 18px rgba(71, 82, 252, 0.6);
}

.doc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0 22px; border-bottom: 1px solid var(--line);
}
.logo { height: 24px; width: auto; display: block; }
.brand { position: relative; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
/* Tim's speech bubble (shown on the 3rd hover-wave, see logo-tim.js) */
.tim-bubble {
  position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) scale(.92);
  white-space: nowrap; pointer-events: none; z-index: 60;
  background: #fff; color: #0b1020;
  font-family: var(--head); font-weight: 600; font-size: 13px; line-height: 1;
  padding: 9px 13px; border-radius: 11px;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.tim-bubble::before {
  content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right-color: #fff;
}
.tim-bubble.show { opacity: 1; transform: translateY(-50%) scale(1); }
.brand-tim { height: 40px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(71,82,252,0.35)); overflow: visible; }
/* Both arms rest at his sides (always visible). The right arm raises smoothly; once up, the
   HAND rocks at the wrist (a real wave) rather than the whole arm swinging from the shoulder.
   The left gives a small lean so two hands read while he waves. */
.brand-tim .wave-arm { transform-box: view-box; transform-origin: 96px 84px; transform: rotate(-8deg); transition: transform 1s cubic-bezier(.4, .12, .34, 1); }
.brand-tim .wave-hand { transform-box: view-box; transform-origin: 96px 125px; }
.brand-tim .wave-arm-l { transform-box: view-box; transform-origin: 44px 84px; transform: rotate(8deg); transition: transform .9s cubic-bezier(.4, .12, .34, 1); }
.brand.waving .brand-tim .wave-arm, .brand:focus-within .brand-tim .wave-arm { transform: rotate(-150deg); transition: transform 1.25s cubic-bezier(.22, .68, .28, 1); }
.brand.waving .brand-tim .wave-arm-l, .brand:focus-within .brand-tim .wave-arm-l { transform: rotate(15deg); transition: transform 1s cubic-bezier(.22, .68, .28, 1); }
.brand.waving .brand-tim .wave-hand, .brand:focus-within .brand-tim .wave-hand { animation: wrist-wave 0.8s ease-in-out 1.15s infinite; }
@keyframes wrist-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(19deg); } 75% { transform: rotate(-19deg); } }
@media (prefers-reduced-motion: reduce) { .brand.waving .brand-tim .wave-hand, .brand:focus-within .brand-tim .wave-hand { animation: none; } }
.doc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
#signDate { color: var(--white); }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--white); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(23,169,91,.5); } 70% { box-shadow: 0 0 0 6px rgba(23,169,91,0); } 100% { box-shadow: 0 0 0 0 rgba(23,169,91,0); } }

/* ===== Title ===== */
.title-block { padding: 46px 0 34px; position: relative; }
/* Small animated hero, dropped into the existing right-hand white space beside the
   headline. Absolutely positioned so it changes nothing in the text flow or the
   page length — purely fills the gap. Hidden where the column gets tight. */
.title-hero { position: absolute; right: -28px; top: 150px; width: 226px; height: auto; pointer-events: none; }
.title-hero.title-hero-box { width: 470px; height: 530px; right: -84px; top: -28px; }
@media (max-width: 1279px) { .title-hero.title-hero-box { width: 430px; height: 500px; right: -44px; top: -18px; } }
.title-hero-box .box-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; }
.title-hero-box #box3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
@media (max-width: 980px) { .title-hero { display: none; } }

/* Team page (Annex 3): Matrix-style Trusted Tim, rotating in 3D, in the title white space */
.team-hero { position: absolute; right: -90px; top: 28px; width: 300px; height: 402px; pointer-events: none; }
.team-hero-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 980px) { .team-hero { display: none; } }
.kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin: 0 0 18px; }
.title-block h1 { font-family: var(--head); font-weight: 700; font-size: clamp(40px, 8vw, 78px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.lead { font-family: var(--head); font-weight: 500; font-size: clamp(16px, 2.4vw, 20px); color: var(--white); margin: 26px 0 0; max-width: 560px; line-height: 1.45; }
.struck { color: var(--muted); text-decoration: line-through; text-decoration-color: #DC1B31; text-decoration-thickness: 2px; }
.inserted { color: var(--blue); }
/* Tagline cross-out — app.js adds #lead.lead-anim once on landing to play it in; otherwise the
   static end state above is shown (no-JS, reduced motion, or already seen this session). */
#lead.lead-anim .struck { position: relative; color: var(--white); text-decoration: none; animation: leadDim .9s ease forwards 2.6s; }
#lead.lead-anim .struck::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 56%; height: 2px; background: #DC1B31;
  border-radius: 2px; transform: scaleX(0); transform-origin: left center;
  animation: leadStrike 1.9s cubic-bezier(.45, 0, .3, 1) forwards 1.6s;
}
#lead.lead-anim .inserted { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: leadInsert .7s cubic-bezier(.2, .85, .25, 1) forwards 3.7s; }
@keyframes leadStrike { to { transform: scaleX(1); } }
@keyframes leadDim { from { color: var(--white); } to { color: var(--muted); } }
@keyframes leadInsert { to { max-width: 6em; opacity: 1; } }
.lead-sub { font-family: var(--head); font-weight: 500; font-size: clamp(14.5px, 1.9vw, 17px); color: #c3cce0; margin: 14px 0 0; max-width: 600px; line-height: 1.5; }
.hint { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ===== Progress ===== */
.progress-row { display: flex; align-items: center; gap: 16px; padding: 18px 0 26px; border-top: 1px solid var(--line); }
.progress-label { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.progress-track { flex: 1 1 auto; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 0; background: var(--blue); box-shadow: 0 0 10px var(--blue); transition: width .4s ease; }
.review-all { background: none; border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.review-all:hover { border-color: var(--blue); color: var(--blue); }
/* back-to-order-form button: compact, two stacked lines (destination + its tab name) */
.rb-back { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 16px; border-radius: 12px; line-height: 1.18; text-align: left; }
.rb-back .rb-top { font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.rb-back .rb-brief { color: var(--blue); font-weight: 600; font-size: 13px; }
.rb-back:hover .rb-top { color: var(--blue); }

/* ===== Clauses ===== */
.clauses { display: flex; flex-direction: column; }
.clause { border-top: 1px solid var(--line); }
.clause:last-child { border-bottom: 1px solid var(--line); }

/* Scroll-reveal — a gentle one-time fade/slide as elements enter the viewport */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

.clause-head {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: baseline;
  gap: 18px; padding: 22px 8px; cursor: pointer; position: relative;
  transition: background .15s ease;
}
.clause-head:hover { background: rgba(71, 82, 252, 0.06); }
.clause-head::before {       /* left accent bar */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--blue); transform: scaleY(0); transform-origin: top;
  transition: transform .2s ease;
}
.clause.open .clause-head::before,
.clause-head:hover::before { transform: scaleY(1); }

.clause-num { font-size: 14px; color: var(--blue); }
.clause-title { font-family: var(--head); font-weight: 600; font-size: 18px; color: var(--white); }
.clause-summary { display: block; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.chevron { color: var(--muted); font-size: 13px; transition: transform .25s ease, color .15s ease; }
.clause.open .chevron { transform: rotate(45deg); color: var(--blue); }

.clause-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.clause-body-inner {
  padding: 0 8px 24px 72px; color: var(--white); font-size: 14.5px; line-height: 1.7;
}
.clause-body-inner .tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--green); border: 1px solid rgba(23,169,91,.3); border-radius: 999px; padding: 5px 11px;
}

/* ===== Page tabs — stateful "review" cards (pending / reviewing / reviewed) ===== */
.pages-nav { display: flex; flex-wrap: nowrap; gap: 10px; padding: 18px 1px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; scroll-snap-type: x proximity; }
.pages-nav::-webkit-scrollbar { height: 6px; }
.pages-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
.pages-nav::-webkit-scrollbar-track { background: transparent; }
.page-tab {
  position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: rgba(8, 30, 71, 0.4); border: 1px solid var(--line); border-radius: 12px;
  color: var(--muted); font-family: var(--mono); cursor: pointer; text-align: left;
  padding: 31px 14px 12px; min-width: 138px;
  transition: border-color .25s, background .25s;
}
.tab-ref { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tab-title { font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: #fff; }
.tab-stamp {
  position: absolute; top: 8px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  padding: 3px 6px; border-radius: 4px; white-space: nowrap;
  color: #6f7aa0; border: 1px dashed rgba(111, 122, 160, 0.45);
  transition: color .2s, border-color .2s;
}
.stamp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; animation: stamp-pulse 1.4s ease-in-out infinite; }
@keyframes stamp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } to { opacity: 1; transform: rotate(0) scale(1); } }

/* pending — clearly "not opened yet": dimmed, faint diagonal hatch, amber stamp + hollow ring */
.page-tab.is-pending {
  border-style: dashed; opacity: 0.74;
  background-color: rgba(8, 30, 71, 0.28);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px);
  transition: opacity .25s, border-color .25s, background-color .25s;
}
.page-tab.is-pending .tab-title { color: #94a0bf; }
.page-tab.is-pending .tab-ref { color: #6b76a0; }
.page-tab.is-pending .tab-stamp { color: #e3aa48; border: 1px dashed rgba(227, 170, 72, 0.5); }
.page-tab.is-pending .tab-stamp::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  border: 1.5px solid currentColor; display: inline-block; box-sizing: border-box;
}
.page-tab.is-pending:hover { opacity: 1; border-color: rgba(227, 170, 72, 0.55); }
.page-tab:hover { border-color: var(--line-hi); }
/* Product nav-link tab → navigates to product.html (a "go" link, not a status section) */
a.page-tab { text-decoration: none; }
.page-tab.page-tab-go { border-color: rgba(71, 82, 252, 0.4); background: rgba(71, 82, 252, 0.10); }
.page-tab.page-tab-go .tab-ref { color: #9aa6ff; }
.page-tab.page-tab-go .tab-stamp { color: #9aa6ff; border: 1px solid rgba(71, 82, 252, 0.5); }
.page-tab.page-tab-go:hover { border-color: var(--blue); background: rgba(71, 82, 252, 0.18); }

/* reviewing (the section you're on) */
.page-tab.is-reviewing { border-color: var(--blue); background: rgba(71, 82, 252, 0.14); }
.page-tab.is-reviewing .tab-ref { color: #9aa6ff; }
.page-tab.is-reviewing .tab-stamp { color: #9aa6ff; border: 1px solid rgba(71, 82, 252, 0.55); }

/* reviewed (visited, then left) */
.page-tab.is-reviewed { border-color: rgba(44, 138, 100, 0.7); background: rgba(23, 169, 91, 0.07); }
.page-tab.is-reviewed .tab-stamp { color: #37d39b; border: 1px solid #2c8a64; }
.page-tab.is-reviewed .tab-stamp.stamp-in { animation: stamp-in .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .stamp-dot { animation: none; }
  .page-tab.is-reviewed .tab-stamp.stamp-in { animation: none; }
}
.nav-demo {
  margin-left: auto; align-self: center; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  min-width: 150px; box-sizing: border-box;
  background: linear-gradient(180deg, #5b66ff 0%, var(--blue) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  color: #fff; font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: .04em;
  padding: 9px 20px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(71, 82, 252, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.nav-demo::after {
  content: "→"; font-size: 13px; line-height: 1; transform: translateX(0);
  transition: transform .2s ease;
}
.nav-demo:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #6671ff 0%, #3a45ea 100%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 26px rgba(71, 82, 252, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.nav-demo:hover::after { transform: translateX(3px); }
.nav-demo:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(71, 82, 252, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
@media (prefers-reduced-motion: reduce) { .nav-demo, .nav-demo::after { transition: none; } }
.nav-login {
  align-self: center; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 999px;
  color: #fff; font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: .03em;
  padding: 9px 20px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.nav-login:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.page[hidden] { display: none; }

/* ===== Annex clauses (page 2) ===== */
.annex-clause { padding: 26px 0; border-top: 1px solid var(--line); }
.annex-clause:last-of-type { border-bottom: 1px solid var(--line); }
.annex-head { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: baseline; margin-bottom: 14px; }
.annex-head .clause-num { color: var(--blue); font-size: 14px; }
.annex-head .clause-title { font-family: var(--head); font-weight: 600; font-size: 20px; color: #fff; }
.annex-body { color: var(--white); font-size: 14.5px; line-height: 1.7; margin: 0 0 18px; padding-left: 72px; }
.annex-back { margin-top: 36px; }

/* Definitions list (2.1) */
.defs { margin: 0; padding-left: 72px; display: grid; grid-template-columns: 190px 1fr; gap: 12px 20px; }
.defs dt { font-family: var(--head); font-weight: 600; color: var(--blue); font-size: 14px; }
.defs dd { margin: 0; color: var(--white); font-size: 14px; line-height: 1.6; }
@media (max-width: 560px) { .defs { grid-template-columns: 1fr; gap: 4px 0; padding-left: 0; } .defs dd { margin-bottom: 12px; } }
@media (max-width: 560px) {
  .annex-head { grid-template-columns: 38px 1fr; gap: 12px; }
  .annex-body { padding-left: 0; }
}

/* Comparison ("vs standard LLM") table */
.vs-table { width: 100%; }
.vs-table th, .vs-table td { padding: 13px 16px; }
.vs-table th:first-child, .vs-table td:first-child { width: 58%; }
.vs-table .col-vs { text-align: center; white-space: nowrap; }
.vs-table .m { font-size: 16px; font-weight: 700; }
.vs-table .m.ok { color: var(--green); }
.vs-table .m.no { color: #c3475a; }
.vs-table .m.part { color: #f0a93b; }
@media (max-width: 560px) { .vs-table { margin-left: 0; width: 100%; } }

/* ===== Schedule A — Scope of Services (product table) ===== */
.schedule { margin-top: 40px; }
.sched-head { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: baseline; padding: 0 8px 18px; }
.sched-ref { font-family: var(--mono); font-size: 13px; color: var(--blue); letter-spacing: .04em; }
.sched-titles { display: flex; flex-direction: column; }
.sched-sum { display: flex; gap: 18px; align-items: baseline; text-align: left; }
.schedule .vs-expand { margin-top: 0; }
.sched-expand summary { padding: 18px 20px; }
.sched-expand .vs-expand-body { padding-top: 6px; }
.sched-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(6, 24, 58, 0.4); }
.sched-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13.5px; min-width: 560px; }
.sched-table th { text-align: left; font-weight: 400; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(8, 30, 71, 0.6); }
.sched-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--white); vertical-align: top; }
.sched-table tbody tr:last-child td { border-bottom: 0; }
.sched-table tbody tr { transition: background .15s ease; }
.sched-table tbody tr:hover { background: rgba(71, 82, 252, 0.07); }
.sched-r { color: var(--blue); white-space: nowrap; }
.sched-s { font-family: var(--head); font-weight: 600; font-size: 15px; }
.col-covers { color: var(--muted); }
.col-status { white-space: nowrap; }
.sched-status.ok { color: var(--green); }
.sched-status.scoped { color: #f0a93b; }
.sched-foot { font-size: 12px; color: var(--muted); margin: 14px 8px 0; line-height: 1.6; }
.sched-foot-muted { color: rgba(126, 140, 168, 0.7); }

/* Service ticks stagger in as the schedule reveals */
.sched-status { display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .45s ease, transform .45s ease; }
.schedule.in .sched-status { opacity: 1; transform: none; }
.schedule.in tbody tr:nth-child(1) .sched-status { transition-delay: .10s; }
.schedule.in tbody tr:nth-child(2) .sched-status { transition-delay: .20s; }
.schedule.in tbody tr:nth-child(3) .sched-status { transition-delay: .30s; }
.schedule.in tbody tr:nth-child(4) .sched-status { transition-delay: .40s; }
.schedule.in tbody tr:nth-child(5) .sched-status { transition-delay: .50s; }
.schedule.in tbody tr:nth-child(6) .sched-status { transition-delay: .60s; }

/* Schedule A — on mobile, stack each service into a readable card (no h-scroll, no cut text) */
@media (max-width: 640px) {
  .sched-wrap { overflow-x: visible; border: 0; background: none; border-radius: 0; }
  .sched-table { min-width: 0; width: 100%; display: block; font-size: 13px; }
  .sched-table thead { display: none; }
  .sched-table tbody, .sched-table tr, .sched-table td { display: block; width: auto; }
  .sched-table tbody tr { border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 30, 71, 0.4); padding: 13px 15px; margin-bottom: 10px; }
  .sched-table td { border: 0; padding: 0; }
  .sched-r { font-size: 11px; letter-spacing: .08em; }
  .sched-s { font-size: 15px; margin: 3px 0 7px; }
  .sched-table .col-covers { color: #aeb8d4; font-size: 13px; line-height: 1.55; margin-bottom: 9px; white-space: normal; }
  .sched-table .col-status { white-space: nowrap; }
}

/* ===== §10 Special Terms — live Trusted Tim ===== */
.special-terms {
  margin-top: 44px;
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  background: rgba(8, 30, 71, 0.5);
  box-shadow: 0 0 30px rgba(71, 82, 252, 0.12);
  overflow: hidden;
}
.st-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 22px; border-bottom: 1px solid var(--line);
}
.st-avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 36%, rgba(71, 82, 252, 0.28), var(--panel-2));
  border: 1px solid var(--line-hi); overflow: hidden;
  display: grid; place-items: end center;
}
.st-avatar svg { width: 42px; height: auto; display: block; transform: translateY(3px); }
.st-titles { display: flex; flex-direction: column; gap: 6px; }
.st-kicker { font-family: var(--head); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -0.01em; }
.st-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--green); }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }

.st-chat {
  padding: 22px; min-height: 0; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--mono); font-size: 14px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  transition: min-height .5s cubic-bezier(.4, .7, .3, 1);
}
/* Starts compact (just Tim's greeting); grows into the full box once the visitor
   actually sends a message — light at first, expanded on their action. */
.special-terms.st-engaged .st-chat { min-height: 220px; }
.st-chat::-webkit-scrollbar { width: 8px; }
.st-chat::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.tim-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 92%; }
.tim-msg .who { white-space: nowrap; flex: 0 0 auto; }
.tim-msg .body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.tim-msg.bot .who { color: var(--blue); }
.tim-msg.bot .body { color: var(--white); }
.tim-msg.you { align-self: flex-end; }
.tim-msg.you .who, .tim-msg.you .body { color: var(--muted); }
.tim-msg .body a { color: var(--blue); border-bottom: 1px solid rgba(71,82,252,.4); }

.tim-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.tim-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .4; animation: tdot 1.2s infinite; }
.tim-typing i:nth-child(2) { animation-delay: .2s; }
.tim-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.st-form { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.st-ps1 { color: var(--muted); white-space: nowrap; font-family: var(--mono); font-size: 14px; }
#timInput { flex: 1 1 auto; background: none; border: 0; outline: none; color: #fff; font-family: var(--mono); font-size: 14px; }
#timInput::placeholder { color: var(--muted); }
.st-send { background: var(--blue); color: #fff; border: 0; font-family: var(--mono); font-size: 13px; padding: 9px 18px; border-radius: 6px; cursor: pointer; transition: background .12s ease; }
.st-send:hover { background: #3742e8; }

/* ===== Execution ===== */
.execution { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line); }
.exec-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.sign-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.sign-block { display: flex; flex-direction: column; gap: 6px; }
.sign-block.right { align-items: flex-end; text-align: right; }
.sign-area { display: inline-block; border-bottom: 1px solid var(--line); padding: 0 8px 2px; }
.signature {
  display: inline-block;
  font-family: "Dancing Script", cursive;
  font-weight: 700; font-size: 56px; line-height: 1.1;
  color: var(--blue);
  text-shadow: 0 0 16px rgba(71, 82, 252, 0.45);
  white-space: nowrap;
  clip-path: inset(-0.3em 100% -0.3em 0);   /* hidden until "signed" (JS reveals); vertical room for descenders */
}
.signature.signed { animation: sign-write 3.8s cubic-bezier(0.6, 0, 0.32, 1) forwards; }
/* Left signature writes on after the block has faded/settled, so it reads as
   being written rather than fading in. Both signatures use the same duration. */
.signature:not(.counter).signed { animation-delay: 0.45s; }

/* Counterparty signature — an illegible handwritten scribble that draws on. */
.sig-svg { display: block; width: 220px; max-width: 52vw; height: 62px; }
.sig-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(71, 82, 252, 0.4)); }
.sig-svg.signed path { animation: sig-draw 3.8s cubic-bezier(0.6, 0, 0.32, 1) forwards; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@keyframes sign-write { to { clip-path: inset(-0.3em -14px -0.3em 0); } }
.sign-name { font-family: var(--head); font-weight: 700; font-size: 16px; padding-top: 8px; color: var(--white); }
#counterName { transition: opacity .45s ease; }   /* soft cross-out fade */
.sign-cap { font-size: 11.5px; color: var(--muted); }

.execute {
  display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #5b66ff 0%, var(--blue) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--mono); font-size: 15px; padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(71, 82, 252, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.execute::after { content: "→"; font-size: 16px; line-height: 1; transition: transform .2s ease; }
.execute:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #6671ff 0%, #3a45ea 100%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 30px rgba(71, 82, 252, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.execute:hover::after { transform: translateX(3px); }
.execute:active { transform: translateY(0); box-shadow: 0 5px 14px rgba(71, 82, 252, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
@media (prefers-reduced-motion: reduce) { .execute, .execute::after { transition: none; } }

/* ===== Footer ===== */
.doc-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { color: var(--muted); text-decoration: none; font-family: var(--mono); transition: color .15s ease; }
.foot-legal a:hover { color: #fff; }
@media (max-width: 640px) { .doc-foot { flex-direction: column; align-items: flex-start; gap: 10px; } }

.nav-break { display: none; }
.page-tab { flex: 1 1 0; min-width: 0; scroll-snap-align: start; }
/* Header actions (Book a demo / Log in) — top-right of the header on every page */
.doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.doc-actions .nav-demo { margin-left: 0; }

/* Below ~720px the tab strip wraps (all tabs visible) instead of scrolling */
@media (max-width: 720px) {
  .pages-nav { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
  .page-tab { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  body { overflow-x: hidden; }
  .doc { margin: 24px auto; padding: 0 16px 48px; }

  /* Header — drop the decorative doc meta on mobile; keep logo + Tim + the actions */
  .doc-head { padding: 18px 0 16px; gap: 10px 12px; flex-wrap: wrap; }
  .doc-meta > .ref, .doc-meta > .status { display: none; }
  .doc-actions { margin-top: 0; }
  .logo { height: 21px; }
  .brand-tim { height: 34px; }

  /* Nav: compact tabs that share rows, with no overlapping status badge */
  .pages-nav { gap: 7px; padding: 14px 0 6px; }
  .page-tab { padding: 10px 12px; min-width: 0; flex: 1 1 140px; font-size: 11.5px; }
  .tab-stamp { display: none; }
  .tab-title { font-size: 13px; }
  .nav-demo, .nav-login { padding: 7px 13px; font-size: 11px; min-width: 0; }

  /* Hero title — keep it inside the screen */
  .title-block { padding: 28px 0 22px; }
  .title-block h1 { font-size: clamp(30px, 8.4vw, 46px); line-height: 1.07; overflow-wrap: break-word; }
  .lead { font-size: 16px; }

  /* Progress row stacks so the button doesn't squeeze */
  .progress-row { flex-wrap: wrap; gap: 12px; }
  .progress-track { order: 3; flex-basis: 100%; }

  /* Clauses */
  .clause-head { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 20px 4px; }
  .clause-title { font-size: 16px; }
  .clause-body-inner { padding-left: 40px; }

  /* Special Terms */
  .st-head { padding: 16px; gap: 12px; }
  .st-kicker { font-size: 18px; }
  .st-avatar { width: 44px; height: 44px; }

  /* Schedule / comparison sections */
  .schedule, .special-terms { margin-top: 30px; }
  .vs-expand summary { padding: 14px 14px; font-size: 12px; gap: 10px; }
  .vs-expand-body { padding: 2px 12px 18px; }
  .cv-note { font-size: 12.5px; }

  /* Comparison table fits without horizontal scroll (only 3 columns) */
  .vs-table { min-width: 0; font-size: 12px; }
  .vs-table th, .vs-table td { padding: 11px 8px; }
  .vs-table th:first-child, .vs-table td:first-child { width: auto; }
  .vs-table th.col-vs, .vs-table td.col-vs { white-space: normal; }

  /* Signatures stack */
  .sign-row { flex-direction: column; align-items: stretch; gap: 26px; }
  .sign-block.right { align-items: flex-start; text-align: left; }

  /* Team cards */
  .team-card { padding: 16px; gap: 14px; }

  .doc-foot { font-size: 11px; }
}

/* ============================ Annex 3 — Team ============================ */
/* ---- shared glowing blue section connector: horizontal beam + center node + vertical stem
        rising toward the title above it. Reused sitewide as the divider between sections. ---- */
.sec-div { position: relative; height: 2px; margin: 40px 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(71,82,252,.7) 18%, rgba(71,82,252,.7) 82%, transparent);
  box-shadow: 0 0 16px rgba(71,82,252,.4); }
.sec-div > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 14px rgba(71,82,252,.95), 0 0 4px #fff; animation: secPulse 2.8s ease-in-out infinite; }
.sec-div > span::before { content: ""; position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%); width: 2px; height: 18px;
  background: linear-gradient(180deg, transparent, rgba(71,82,252,.75)); box-shadow: 0 0 8px rgba(71,82,252,.5); }
.sec-div.is-tight { margin: 8px 0 26px; }    /* beneath the team title-block hero */
@keyframes secPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(71,82,252,.95), 0 0 4px #fff; }
  50%      { box-shadow: 0 0 24px rgba(71,82,252,1), 0 0 7px #fff; }
}
@media (prefers-reduced-motion: reduce) { .sec-div > span { animation: none; } }

/* ---- collapsible headers: one consistent behaviour everywhere — click anywhere on the header
        (including its text) to open/close, and never select the text on click ---- */
summary, .demo-clause-toggle, .demo-attendees-toggle { cursor: pointer; -webkit-user-select: none; user-select: none; }

.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0 8px;
}
.team-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.team-card-tim {
  grid-column: 1 / -1;
  border-color: var(--line-hi);
  background: linear-gradient(120deg, rgba(71,82,252,0.12), var(--panel) 60%);
}
.team-avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #fff;
}
.team-bot {
  background: radial-gradient(circle at 50% 38%, rgba(71,82,252,0.22), var(--panel-2));
  border-color: var(--line-hi);
  overflow: hidden;
}
.team-bot-svg { width: 58px; height: auto; display: block; transform: translateY(6px); }
.team-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
}
.team-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  padding: 3px 8px;
}
/* "employee" tag on staff — only shows once the customer card is present, to mirror its "Customer" tag */
.tm-emp-tag { display: none; }
.team.has-customer .tm-emp-tag { display: inline-block; }
.team-role {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.team-bio { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 4px; }

@media (max-width: 560px) {
  .team { grid-template-columns: 1fr; }
}

/* ============================ Clause dropdown visual (LLM vs TrustedIQ) ============================ */
.clause-visual { margin: 20px 0 6px; }
.cv-kicker {
  display: block; font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
}
.clause-visual svg {
  width: 100%; height: auto; max-width: 540px; display: block;
  border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(circle at 22% 50%, rgba(71,82,252,0.07), var(--panel) 72%);
  padding: 10px;
}
.cv-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 14px 0 0; max-width: 540px; }
@media (prefers-reduced-motion: reduce) { .clause-visual svg animate, .clause-visual svg animateMotion { display: none; } }

/* §2.3 — click-to-expand comparison (table + visual) */
.vs-expand {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(8, 30, 71, 0.35); overflow: hidden;
}
.vs-expand summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: #fff;
  transition: background .15s ease;
}
.vs-expand summary::-webkit-details-marker { display: none; }
.vs-expand summary:hover { background: rgba(71, 82, 252, 0.07); }
.vs-sum-icon { color: var(--blue); font-size: 17px; line-height: 1; transition: transform .25s ease; }
.vs-expand[open] .vs-sum-icon { transform: rotate(45deg); }
.vs-expand-body { padding: 2px 20px 22px; }
.vs-expand .clause-visual { margin-top: 22px; }
.vs-expand .clause-visual svg { max-width: 100%; }

/* ============================ Reconciliation diagram (interactive — click Trusted Tim) ============================ */
.recon {
  --rc-indigo:#5b6cff; --rc-red:#e24b4a; --rc-redtext:#ff6b8a; --rc-green:#37d39b;
  --rc-card:#0d1733; --rc-cardborder:#233059; --rc-bright:#eef1fb; --rc-muted:#8893b8;
  margin-top: 18px; padding: 18px; border: 1px solid var(--rc-cardborder);
  border-radius: 14px; background: #0a1228;
}
/* Tim the operator (left) + the three systems stacked (right) */
.recon-layout { display: grid; grid-template-columns: 0.5fr 1fr; gap: 22px; align-items: center; }

/* LEFT — Trusted Tim */
.recon-tim { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; padding: 14px 8px; border-radius: 14px; transition: background .15s ease; width: 100%; }
.recon-tim:hover { background: rgba(91,108,255,.07); }
.recon-tim:focus-visible { outline: 2px solid var(--rc-indigo); outline-offset: 2px; }
.recon-tim-bot { position: relative; width: 88px; display: block; }
/* dim only the Tim sprite (not the pulse layers behind it) while OFFLINE */
.recon-tim-bot > svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: grayscale(1); opacity: .58; transition: filter .35s ease, opacity .35s ease; }
/* strong "click me" pulse: a glow that breathes + an expanding ring that pings out */
.recon-tim-bot::before { content: ''; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(91,108,255,.65), rgba(91,108,255,0) 66%); opacity: 0; z-index: 0; }
.recon-tim-bot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--rc-indigo); opacity: 0; z-index: 0; }
.recon:not(.is-on) .recon-tim-bot::before { animation: rc-glow 1.7s ease-in-out infinite; }
.recon:not(.is-on) .recon-tim-bot::after { animation: rc-ping 1.7s cubic-bezier(.2,.6,.3,1) infinite; }
.recon:not(.is-on) .recon-tim-hint { animation: rc-hintpulse 1.7s ease-in-out infinite; }
@keyframes rc-glow { 0%,100% { opacity: .12; transform: scale(.82); } 50% { opacity: .72; transform: scale(1.12); } }
@keyframes rc-ping { 0% { opacity: .85; transform: scale(.66); } 70%,100% { opacity: 0; transform: scale(1.85); } }
@keyframes rc-hintpulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.recon-bolt { position: absolute; top: -8px; right: -10px; width: 26px; opacity: 0; transform: scale(.4); }
.recon-bolt svg { width: 100%; display: block; }
.recon-count { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; font-weight: 700; }
.recon-count .off { color: var(--rc-redtext); }
.recon-count .on { display: none; color: var(--rc-green); }
.recon-tim-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--rc-muted); }
.recon-tim-label b { font-weight: 700; color: var(--rc-muted); }
.recon-tim-label .on { display: none; }
.recon-tim-hint { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--rc-indigo); }
.recon-tim-hint .on { display: none; }
/* keep the Tim/bolt SVGs out of the generic .clause-visual svg styling */
.recon .recon-tim-bot svg, .recon .recon-bolt svg { border: 0; background: none; padding: 0; border-radius: 0; max-width: none; }
/* Tim is neutral while OFFLINE, smiles once reconciled */
.rc-mouth-smile { display: none; }
.recon.is-on .rc-mouth-flat { display: none; }
.recon.is-on .rc-mouth-smile { display: inline; }

/* RIGHT — three systems, stacked */
.recon-cards { display: flex; flex-direction: column; gap: 10px; }
.rc-card { position: relative; background: var(--rc-card); border: 1px solid var(--rc-cardborder); border-radius: 10px; padding: 10px 14px; transition: border-color .4s ease, box-shadow .4s ease; }
.rc-contract { border-color: var(--rc-indigo); }
.rc-crm, .rc-erp { border-color: var(--rc-red); }
.recon:not(.is-on) .rc-crm, .recon:not(.is-on) .rc-erp { box-shadow: 0 10px 26px -16px rgba(226,75,74,.55); }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; min-height: 16px; }
.rc-name { font-family: var(--head); font-weight: 600; font-size: 13px; color: var(--rc-bright); }
.rc-src { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--rc-indigo); white-space: nowrap; }
.rc-row { display: grid; grid-template-columns: 1fr auto 16px; gap: 12px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); font-family: var(--mono); font-size: 12px; }
.rc-row:first-of-type { border-top: 0; }
.recon:not(.is-on) .rc-row[data-row="wrong"] { background: linear-gradient(90deg, rgba(226,75,74,.12), rgba(226,75,74,0) 80%); border-radius: 5px; }
.rc-f { color: var(--rc-muted); }
.rc-v { position: relative; text-align: right; white-space: nowrap; color: var(--rc-bright); }
.rc-new { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--rc-green); white-space: nowrap; }
.rc-row[data-row="wrong"] .rc-old { color: var(--rc-redtext); transition: opacity .3s ease; }
.rc-row[data-row="wrong"] .rc-new { transition: opacity .3s ease; }
.rc-row[data-row="ok"] .rc-old { color: var(--rc-muted); }
.rc-b { position: relative; width: 16px; height: 16px; }
.rc-b .bx, .rc-b .bk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.rc-b .bx { color: var(--rc-red); transition: opacity .3s ease; }
.rc-b .bk { opacity: 0; transition: opacity .3s ease; }
.rc-row[data-row="ok"] .bx { opacity: 0; }
.rc-row[data-row="ok"] .bk { opacity: 1; color: var(--rc-muted); }

.rc-stamp { position: absolute; top: 9px; right: 13px; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; color: var(--rc-green); border: 1px solid #2c8a64; border-radius: 4px; padding: 2px 5px; opacity: 0; transform: rotate(-8deg) scale(1.4); }

/* ===== ON: Trusted Tim reconciles (staggered, top to bottom) ===== */
.recon.is-on .recon-tim-bot > svg { filter: none; opacity: 1; }
.recon.is-on .recon-bolt { opacity: 1; transform: scale(1); transition: opacity .25s ease, transform .25s ease; animation: rc-bolt .5s ease 1; }
.recon.is-on .recon-count .off { display: none; }
.recon.is-on .recon-count .on { display: inline; }
.recon.is-on .recon-tim-label .off, .recon.is-on .recon-tim-hint .off { display: none; }
.recon.is-on .recon-tim-label .on, .recon.is-on .recon-tim-hint .on { display: inline; }
.recon.is-on .recon-tim-label .on { color: var(--rc-indigo); }
.recon.is-on .recon-tim-label b { color: var(--rc-indigo); }
.recon.is-on .rc-crm, .recon.is-on .rc-erp { border-color: var(--rc-green); }
.recon.is-on .rc-row[data-row="wrong"] .rc-old { opacity: 0; transition-delay: var(--d, 0s); }
.recon.is-on .rc-row[data-row="wrong"] .rc-new { opacity: 1; transition-delay: var(--d, 0s); animation: rc-pop .35s ease both; animation-delay: var(--d, 0s); }
.recon.is-on .rc-row[data-row="wrong"] .rc-b .bx { opacity: 0; transition-delay: var(--d, 0s); }
.recon.is-on .rc-row[data-row="wrong"] .rc-b .bk { opacity: 1; color: var(--rc-green); transition-delay: var(--d, 0s); }
.recon.is-on .rc-row[data-row="ok"] .bk { color: var(--rc-green); }
.recon.is-on .rc-crm .rc-stamp, .recon.is-on .rc-erp .rc-stamp { opacity: 1; transform: rotate(0) scale(1); transition: opacity .25s ease .85s, transform .25s ease .85s; }
@keyframes rc-bolt { 0% { transform: scale(1.9); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes rc-pop { 0% { transform: translateY(-50%) scale(.92); } 60% { transform: translateY(-50%) scale(1.06); } 100% { transform: translateY(-50%) scale(1); } }

/* mobile: Tim above the stacked systems */
@media (max-width: 600px) {
  .recon-layout { grid-template-columns: 1fr; gap: 16px; }
  .recon-tim { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .recon *, .recon-tim-bot, .recon-tim-bot::before, .recon-tim-bot::after { transition: none !important; animation: none !important; }
}

/* ============================ Trusted Tim — floss dance (1.4 "What You Get") ============================ */
:root { --floss-dur: 0.64s; --floss-ease: cubic-bezier(.85,0,.15,1); }
.floss-tim { margin-top: 16px; padding: 14px 0 14px; border: 1px solid #1c2748; border-radius: 12px; background: #0a1228; text-align: center; }
.floss-wins { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.floss-win { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: #ff6b8a; border: 1px solid rgba(226,75,74,.5); border-radius: 999px; padding: 3px 9px; transition: color .2s, border-color .2s; }
.floss-win .mk::before { content: "✗ "; font-weight: 700; }
.floss-tim.flossing .floss-win { color: #37d39b; border-color: rgba(55,211,155,.4); }
.floss-tim.flossing .floss-win .mk::before { content: "✓ "; }

/* sad by default; happy (smile + arms up) only while flossing */
.floss-tim .mouth.happy { display: none; }
.floss-tim.flossing .mouth.happy { display: inline; }
.floss-tim.flossing .mouth.sad { display: none; }
.floss-tim .arms-up { display: none; }
.floss-tim.flossing .arms-up { display: inline; }
.floss-tim.flossing .arms-down { display: none; }
/* customer-record contracts (both sides): red ✗ when sad, green ✓ when happy */
.floss-tim .ck-v { display: none; }
.floss-tim.flossing .ck-v { display: inline; }
.floss-tim.flossing .ck-x { display: none; }
.floss-tim .fc-doc { stroke: rgba(226,75,74,.75); transition: stroke .25s ease; }
.floss-tim.flossing .fc-doc { stroke: rgba(55,211,155,.75); }
.floss-scene { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 150; margin: 2px auto 0; }
/* scoped to beat .clause-visual svg (which adds width:100% + border/bg/padding) */
.floss-tim .floss-bg, .floss-tim .floss-svg { border: 0; background: none; padding: 0; border-radius: 0; max-width: none; }
.floss-tim .floss-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.floss-tim .floss-svg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 104px; height: auto; display: block; }

/* fireworks: only go off while Tim flosses */
.fw { transform-box: fill-box; transform-origin: center; opacity: 0; }
.floss-tim.flossing .fw { animation: fw-burst 1.8s ease-out infinite; }
.floss-tim.flossing .fw2 { animation-delay: .6s; }
.floss-tim.flossing .fw3 { animation-delay: 1.15s; }
@keyframes fw-burst { 0% { transform: scale(.2); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .85; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .floss-tim.flossing .fw { animation: none; opacity: .5; } }
.floss-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; font-weight: 600; background: linear-gradient(180deg, #5b66ff 0%, var(--blue) 100%); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; margin-top: 14px; box-shadow: 0 6px 16px -8px rgba(71, 82, 252, .75); transition: transform .14s ease, box-shadow .2s ease; }
.floss-btn:hover { transform: translateY(-1px); box-shadow: 0 11px 24px -8px rgba(71, 82, 252, .95); }
.floss-btn:active { transform: translateY(0); }
.floss-btn:focus-visible { outline: 2px solid #aeb8ff; outline-offset: 2px; }
.floss-btn-ico { font-size: 13px; line-height: 1; }
/* invite the first interaction with an expanding-ring pulse; stops once clicked */
.floss-btn.floss-cue { animation: floss-pulse 1.7s ease-in-out infinite; }
@keyframes floss-pulse {
  0%, 100% { box-shadow: 0 6px 16px -8px rgba(71, 82, 252, .75), 0 0 0 0 rgba(91, 108, 255, .55); }
  50% { box-shadow: 0 6px 16px -8px rgba(71, 82, 252, .75), 0 0 0 9px rgba(91, 108, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .floss-btn.floss-cue { animation: none; } }

/* arms swing as a pair, hip to hip, meeting at centre */
.floss-tim.flossing #arms-front,
.floss-tim.flossing #arms-back {
  transform-box: view-box; transform-origin: 100px 120px;   /* pivot at the shoulder line so the arms stay attached */
  animation: floss-swing var(--floss-dur) var(--floss-ease) infinite;
}
@keyframes floss-swing {
  0%   { transform: rotate(19deg); }
  25%  { transform: rotate(0deg) translateY(-3px); }
  50%  { transform: rotate(-19deg); }
  75%  { transform: rotate(0deg) translateY(-3px); }
  100% { transform: rotate(19deg); }
}
/* hips/torso counter-swing */
.floss-tim.flossing #torso { transform-box: fill-box; transform-origin: center bottom; animation: floss-hips var(--floss-dur) var(--floss-ease) infinite; }
@keyframes floss-hips { 0% { transform: translateX(-7px) rotate(5deg); } 50% { transform: translateX(7px) rotate(-5deg); } 100% { transform: translateX(-7px) rotate(5deg); } }
/* front/back arm swap each beat */
.floss-tim.flossing #arms-front .arm-left,
.floss-tim.flossing #arms-back  .arm-right { animation: floss-show-a var(--floss-dur) step-end infinite; }
.floss-tim.flossing #arms-front .arm-right,
.floss-tim.flossing #arms-back  .arm-left  { animation: floss-show-b var(--floss-dur) step-end infinite; }
@keyframes floss-show-a { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes floss-show-b { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
/* polish */
.floss-tim.flossing #head { transform-box: fill-box; transform-origin: center bottom; animation: floss-bob var(--floss-dur) var(--floss-ease) infinite; }
@keyframes floss-bob { 0% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-3px) rotate(-2deg); } 100% { transform: translateY(0) rotate(2deg); } }
.floss-tim.flossing #shadow { transform-box: fill-box; transform-origin: center; animation: floss-shadow var(--floss-dur) var(--floss-ease) infinite; }
@keyframes floss-shadow { 0%, 100% { transform: scaleX(.9); } 50% { transform: scaleX(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .floss-tim.flossing #arms-front, .floss-tim.flossing #arms-back, .floss-tim.flossing #torso,
  .floss-tim.flossing #head, .floss-tim.flossing #shadow { animation: none; }
}

/* ============================ 1.3 pipeline — step-by-step (Read → Extract → Reconcile) ============================ */
.hw-step { transform-box: fill-box; transform-origin: center; opacity: .5; filter: blur(2.4px); transition: transform .4s ease, opacity .4s ease, filter .4s ease; }
.hw-step.hw-active { transform: scale(1.04); filter: none; opacity: 1; }
/* the connector + its travelling dot light up only on the arrow leading into the focused step */
.hw-arrow { stroke: #2c3c64; transition: stroke .3s ease; }
.hw-arrow.on { stroke: #4752FC; }
.hw-dot { opacity: 0; transition: opacity .3s ease; }
.hw-dot.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hw-step { opacity: 1; filter: none; transition: none; } .hw-dot { opacity: 0; } }

/* ============================ Annex 3 — "Customer of the year" card (green accent + ribbon) ============================ */
.team-card.tm-customer { position: relative; border-color: #2c8a64; background: #0c1f26; align-items: flex-start; padding-top: 40px; }
.team-card.tm-customer .team-name { flex-wrap: wrap; }
.team-card.tm-customer .team-avatar { background: #10402f; border-color: #2c8a64; color: #5fe0b0; }
.team-card.tm-customer .team-role { color: #37d39b; }
.tm-ribbon {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  background: #37d39b; color: #0a1228; border-radius: 5px; padding: 3px 7px; white-space: nowrap;
}
.tm-cust-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: #37d39b; border: 1px solid rgba(55,211,155,.45); border-radius: 999px; padding: 1px 7px; margin-left: 7px; white-space: nowrap;
}

/* ============================ Annex 2 §2.3 — Mission Control ============================ */
.mc-heading { font-family: var(--head); font-weight: 600; font-size: 16px; line-height: 1.35; color: #eef1fb; margin: 8px 0 12px; max-width: 520px; }
.mc-stage { background: #0a1228; border: 1px solid #1c2748; border-radius: 14px; padding: 10px 6px 8px; }
/* scope to beat .clause-visual svg (width/border/bg/padding/max-width) */
.mc-stage .mc-svg { width: 100%; height: auto; display: block; border: 0; background: none; padding: 0; max-width: none; border-radius: 0; }

/* Each ~3s sub-cycle: a contract goes in → TrustedIQ routes it to the ONE best
   model for that field (rotating OpenAI → Claude → Mistral over a 9s master) →
   the selection comes back → "FIELDS EXTRACTED" lights up inside the hub →
   the trusted record is written. Per-cycle parts run on 3s; the per-model
   send/return/highlight run on 9s so only one model fires each cycle. */
@keyframes mc-t   { 0% { transform: translate(0,0); opacity: 0; } 4% { opacity: 1; } 16% { transform: translate(44px,-56px); opacity: 1; } 20%,100% { transform: translate(44px,-56px); opacity: 0; } }
/* send (hub → model) — one per master loop, in its own third */
@keyframes mc-sa  { 0%,7% { transform: translate(0,0); opacity: 0; } 8.5% { opacity: 1; } 13% { transform: translate(-190px,-58px); opacity: 1; } 14.5%,100% { transform: translate(-190px,-58px); opacity: 0; } }
@keyframes mc-sb  { 0%,40.3% { transform: translate(0,0); opacity: 0; } 41.8% { opacity: 1; } 46.3% { transform: translate(0,-58px); opacity: 1; } 47.8%,100% { transform: translate(0,-58px); opacity: 0; } }
@keyframes mc-sc  { 0%,73.6% { transform: translate(0,0); opacity: 0; } 75.1% { opacity: 1; } 79.6% { transform: translate(190px,-58px); opacity: 1; } 81.1%,100% { transform: translate(190px,-58px); opacity: 0; } }
/* return (model → hub) — the selection coming back */
@keyframes mc-ra  { 0%,15% { transform: translate(0,0); opacity: 0; } 16.5% { opacity: 1; } 22% { transform: translate(190px,58px); opacity: 1; } 23.5%,100% { transform: translate(190px,58px); opacity: 0; } }
@keyframes mc-rb  { 0%,48.3% { transform: translate(0,0); opacity: 0; } 49.8% { opacity: 1; } 55.3% { transform: translate(0,58px); opacity: 1; } 56.8%,100% { transform: translate(0,58px); opacity: 0; } }
@keyframes mc-rc  { 0%,81.6% { transform: translate(0,0); opacity: 0; } 83.1% { opacity: 1; } 88.6% { transform: translate(-190px,58px); opacity: 1; } 90.1%,100% { transform: translate(-190px,58px); opacity: 0; } }
/* the occasional dual dispatch — the Mistral cycle also fans out to OpenAI, so one
   contract is split across two models for different fields (send left + return) */
@keyframes mc-sc2 { 0%,73.6% { transform: translate(0,0); opacity: 0; } 75.1% { opacity: 1; } 79.6% { transform: translate(-190px,-58px); opacity: 1; } 81.1%,100% { transform: translate(-190px,-58px); opacity: 0; } }
@keyframes mc-rc2 { 0%,81.6% { transform: translate(0,0); opacity: 0; } 83.1% { opacity: 1; } 88.6% { transform: translate(190px,58px); opacity: 1; } 90.1%,100% { transform: translate(190px,58px); opacity: 0; } }
/* model node highlight while it's the chosen one */
@keyframes mc-na  { 0%,5% { stroke: #2b3a66; fill: #0d1733; } 8%,23% { stroke: #5b6cff; fill: #142a52; } 26%,71.6% { stroke: #2b3a66; fill: #0d1733; } 74.6%,89.6% { stroke: #5b6cff; fill: #142a52; } 92.6%,100% { stroke: #2b3a66; fill: #0d1733; } }
@keyframes mc-nb  { 0%,38.3% { stroke: #2b3a66; fill: #0d1733; } 41.3%,56.3% { stroke: #5b6cff; fill: #142a52; } 59.3%,100% { stroke: #2b3a66; fill: #0d1733; } }
@keyframes mc-nc  { 0%,71.6% { stroke: #2b3a66; fill: #0d1733; } 74.6%,89.6% { stroke: #5b6cff; fill: #142a52; } 92.6%,100% { stroke: #2b3a66; fill: #0d1733; } }
/* "fields extracted" inside the hub — turns on as the selection returns (3s) */
@keyframes mc-hub-idle { 0%,62% { opacity: 1; } 67%,96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mc-hub-lit  { 0%,62% { opacity: 0; } 67%,96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mc-hub-box  { 0%,62% { stroke: #5b6cff; } 67%,92% { stroke: #37d39b; } 97%,100% { stroke: #5b6cff; } }
@keyframes mc-rec { 0%,68% { transform: translate(0,0); opacity: 0; } 71% { opacity: 1; } 86% { transform: translate(44px,56px); opacity: 1; } 89%,100% { transform: translate(44px,56px); opacity: 0; } }
@keyframes mc-blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes mc-check { 0%,82% { opacity: .25; } 88%,100% { opacity: 1; } }

.mc-t { animation: mc-t 3s linear infinite; }
.mc-sa { animation: mc-sa 9s linear infinite; }
.mc-sb { animation: mc-sb 9s linear infinite; }
.mc-sc { animation: mc-sc 9s linear infinite; }
.mc-ra { animation: mc-ra 9s linear infinite; }
.mc-rb { animation: mc-rb 9s linear infinite; }
.mc-rc { animation: mc-rc 9s linear infinite; }
.mc-sc2 { animation: mc-sc2 9s linear infinite; }
.mc-rc2 { animation: mc-rc2 9s linear infinite; }
.mc-na { animation: mc-na 9s linear infinite; }
.mc-nb { animation: mc-nb 9s linear infinite; }
.mc-nc { animation: mc-nc 9s linear infinite; }
.mc-hub-idle { animation: mc-hub-idle 3s linear infinite; }
.mc-hub-lit { animation: mc-hub-lit 3s linear infinite; }
.mc-hub { animation: mc-hub-box 3s linear infinite; }
.mc-rec { animation: mc-rec 3s linear infinite; }
.mc-l1 { animation: mc-blink 1.6s ease-in-out infinite; }
.mc-l2 { animation: mc-blink 1.6s ease-in-out infinite .5s; }
.mc-l3 { animation: mc-blink 1.6s ease-in-out infinite 1s; }
.mc-tick { animation: mc-check 3s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .mc-t, .mc-sa, .mc-sb, .mc-sc, .mc-sc2, .mc-ra, .mc-rb, .mc-rc, .mc-rc2, .mc-na, .mc-nb, .mc-nc,
  .mc-hub, .mc-hub-idle, .mc-hub-lit, .mc-rec, .mc-l1, .mc-l2, .mc-l3, .mc-tick { animation: none; }
  .mc-t, .mc-sa, .mc-sb, .mc-sc, .mc-sc2, .mc-ra, .mc-rb, .mc-rc, .mc-rc2, .mc-rec { opacity: 0; }
  .mc-hub-idle { opacity: 1; } .mc-hub-lit { opacity: 0; } .mc-tick { opacity: 1; }
}

/* ---------- Team-page CTA banner (book a demo, Trusted Tim where the photo goes) ---------- */
.cta-banner {
  position: relative; overflow: hidden;
  margin: 34px 0 6px;
  border-radius: 22px;
  background:
    radial-gradient(120% 130% at 88% -12%, rgba(198, 178, 255, 0.62), rgba(120, 110, 240, 0) 55%),
    radial-gradient(85% 120% at 4% 118%, rgba(58, 72, 214, 0.55), rgba(40, 46, 140, 0) 62%),
    linear-gradient(118deg, #2932cf 0%, #4b54f6 44%, #8674f4 100%);
  display: grid; grid-template-columns: 1.06fr 1fr; align-items: stretch;
  min-height: 262px;
  box-shadow: 0 26px 64px -30px rgba(71, 82, 252, 0.75);
}
.cta-banner::before {                                   /* faint dot texture for depth, fading in toward the copy */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask: linear-gradient(102deg, transparent 34%, #000 92%);
  mask: linear-gradient(102deg, transparent 34%, #000 92%);
}
.cta-banner::after {                                    /* playful floating orbs + sparkles */
  content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 6%, rgba(150, 135, 255, 0.45) 0 46px, transparent 50px),
    radial-gradient(circle at 82% 82%, rgba(184, 166, 255, 0.5) 0 58px, transparent 62px),
    radial-gradient(circle at 96% 24%, rgba(255, 255, 255, 0.14) 0 34px, transparent 38px),
    radial-gradient(circle at 69% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 56%, rgba(255, 255, 255, 0.85) 0 1.6px, transparent 2.7px),
    radial-gradient(circle at 60% 86%, rgba(255, 255, 255, 0.8) 0 1.8px, transparent 2.9px),
    radial-gradient(circle at 45% 40%, rgba(255, 255, 255, 0.7) 0 1.4px, transparent 2.4px);
  animation: cta-float 10s ease-in-out infinite alternate;
}
@keyframes cta-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12px, -9px, 0); } }
@media (prefers-reduced-motion: reduce) { .cta-banner::after { animation: none; } }
.cta-figure { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; }
.cta-fig-one { position: relative; display: flex; align-items: center; justify-content: center; }
/* halftone "pixel shadow" — each Tim's own silhouette, in dots, sat behind them */
.cta-dots {
  position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 32px), calc(-50% - 12px));
  width: 188px; height: 236px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.85) 3px, transparent 3.5px);
  background-size: 17px 17px;
  opacity: 0.6; pointer-events: none;
}
.cta-dots-m { -webkit-mask: url("assets/tim-smug-mask.svg") center / contain no-repeat; mask: url("assets/tim-smug-mask.svg") center / contain no-repeat; }
.cta-dots-f { -webkit-mask: url("assets/tim-smug-female-mask.svg") center / contain no-repeat; mask: url("assets/tim-smug-female-mask.svg") center / contain no-repeat; }
.cta-tim {
  position: relative; z-index: 1;
  height: 198px; width: auto; margin: 0;
  filter: drop-shadow(0 22px 18px rgba(3, 8, 40, 0.5));
}
.cta-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 42px 30px 6px; color: #fff; }
.cta-title { font-family: var(--head); font-weight: 700; font-size: 33px; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 13px; color: #fff; }
.cta-sub { font-family: var(--head); font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0 0 24px; max-width: 450px; }
.cta-btn {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: #1b2150; padding: 12px 24px; border-radius: 13px; text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55); transition: transform .15s ease, box-shadow .15s ease;
  margin-top: 8px;
}
/* signed like a contract: ✗ marker + handwritten name on a dashed signature line */
.cta-btn .cta-x { color: #ff5a6a; font-size: 18px; font-weight: 700; line-height: 1; }
.cta-btn .cta-sign { font-family: "Dancing Script", cursive; font-weight: 700; font-size: 26px; line-height: 0.9; padding: 0 2px 2px; border-bottom: 1.5px dashed #9aa3c4; }
.cta-btn .cta-arrow { font-family: var(--head); font-weight: 600; font-size: 16px; color: #ff5a6a; }
.cta-btn:hover .cta-sign { border-bottom-style: solid; }
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6); }
.cta-arrow { transition: transform .15s ease; }
.cta-btn:hover .cta-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .cta-banner { grid-template-columns: 1fr; min-height: 0; text-align: center; padding-top: 14px; }
  .cta-figure { gap: 0; }
  .cta-dots { width: 152px; height: 192px; transform: translate(calc(-50% - 22px), calc(-50% - 10px)); }
  .cta-tim { height: 156px; }
  .cta-copy { padding: 18px 24px 28px; align-items: center; }
  .cta-title { font-size: 26px; }
  .cta-sub { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn, .cta-arrow { transition: none; }
}

/* ---------- Comparison table on mobile: label each tick/cross with its column ---------- */
@media (max-width: 640px) {
  .vs-table tbody tr { border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 30, 71, 0.4); padding: 12px 15px; margin-bottom: 10px; }
  .vs-table td { display: block; padding: 0; }
  .vs-table td:first-child { font-family: var(--head); font-weight: 600; color: #fff; font-size: 13.5px; line-height: 1.45; margin-bottom: 8px; white-space: normal; }
  .vs-table td.col-vs { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; border-top: 1px solid var(--line); text-align: left; white-space: normal; }
  .vs-table td.col-vs::before { content: attr(data-label); font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--muted); }
  .vs-table .m { font-size: 16px; }
}

/* ---------- §2.3 — make the comparison expander clearly tappable ---------- */
.vs-expand-feature { border-color: rgba(71, 82, 252, 0.5); background: rgba(71, 82, 252, 0.1); }
.vs-expand-feature summary { padding: 18px 20px; }
.vs-sum-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-expand-feature .vs-sum-label { font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: 0; color: #fff; }
.vs-sum-hint { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: #8aa0ff; }
.vs-expand-feature[open] .vs-sum-hint { display: none; }
.vs-expand-feature .vs-sum-icon {
  flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 24px; line-height: 33px; text-align: center; font-weight: 400;
  box-shadow: 0 4px 14px rgba(71, 82, 252, 0.5);
}
.vs-expand-feature .vs-sum-icon::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--blue);
  animation: vs-cue 2s ease-out infinite;
}
.vs-expand-feature[open] .vs-sum-icon::after { display: none; }
@keyframes vs-cue { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.85); opacity: 0; } }
.vs-expand-feature summary:hover { background: rgba(71, 82, 252, 0.18); }
@media (prefers-reduced-motion: reduce) { .vs-expand-feature .vs-sum-icon::after { animation: none; } }

/* ---------- Team-page 2030 goal: live document counter ---------- */
.goal { text-align: center; margin: 40px 0 6px; padding: 42px 24px; border: 1px solid rgba(71, 82, 252, 0.28); border-radius: 22px; background: radial-gradient(120% 140% at 50% 0%, rgba(71, 82, 252, 0.16), rgba(8, 30, 71, 0.18)); }
.goal-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.goal-head { font-family: var(--head); font-weight: 700; font-size: clamp(22px, 3.4vw, 32px); line-height: 1.15; color: #fff; margin: 0 0 18px; letter-spacing: -.01em; }
.goal-year { color: var(--blue); }
.goal-count { font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(46px, 9vw, 94px); line-height: 1; letter-spacing: -.02em; margin: 0; background: linear-gradient(180deg, #ffffff, #9fb0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.goal-track { max-width: 560px; height: 8px; margin: 24px auto 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.goal-track i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #4752FC, #8aa0ff); box-shadow: 0 0 14px rgba(71, 82, 252, 0.6); transition: width 1s ease; }
.goal-sub { font-family: var(--head); font-size: 15px; color: #aeb8d4; margin: 0 auto; max-width: 520px; line-height: 1.55; }
.goal-sub strong { color: #fff; font-weight: 600; }
@media (max-width: 560px) { .goal { padding: 30px 18px; } }

/* Logo Tim parked (interim) - mascot hidden; logic kept. See _archive/logo-tim-restore.md to bring him back. */
.brand-tim { display: none !important; }