/* =====================================================================
   ti-v12.css — Thompson Intelligence v12 "The Four Doors"
   New service-page components. Loads LAST so it wins the cascade.
   Palette + type inherited from ti-base-v12.css (Daylight Ledger).
   Built 2026-08-10.
   ===================================================================== */

/* ---------- shared page furniture ---------------------------------- */
.svc-hero{padding:5.5rem 0 0;position:relative;overflow:hidden;
  background:radial-gradient(52% 58% at 22% 0%, rgba(29,95,74,.10), transparent 70%), var(--bg)}
.svc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(22,32,46,.10) 1px, transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 70% at 25% 15%, #000 0%, transparent 78%);
  mask-image:radial-gradient(60% 70% at 25% 15%, #000 0%, transparent 78%)}
.svc-hero > *{position:relative;z-index:1}
.svc-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-bottom:4.5rem}
/* grid/flex children default to min-width:auto and refuse to shrink below their
   content, which let the 660px spreadsheet table stretch its column and get
   clipped on phones. min-width:0 hands the overflow back to .sheet-scroll. */
.svc-hero .grid > *{min-width:0}
.wf,.wf-canvas,.readme > *,.sheet-wrap{min-width:0}
.svc-hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:18ch}
.svc-hero .lede{margin-top:1.5rem;font-size:1.05rem;max-width:50ch}
@media (max-width:940px){.svc-hero .grid{grid-template-columns:1fr;gap:2.6rem}.svc-hero h1{max-width:20ch}}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--green);margin-bottom:1.1rem;display:block}

/* price / turnaround meta strip under a service hero */
.svc-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:2.2rem;border:1px solid var(--line);
  border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 14px 34px rgba(22,32,46,.07)}
.svc-meta div{flex:1 1 0;min-width:124px;padding:1rem 1.05rem;border-right:1px solid var(--line-soft)}
.svc-meta div:last-child{border-right:0}
.svc-meta span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.svc-meta b{display:block;font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(1.05rem,1.5vw,1.28rem);margin-top:.28rem;letter-spacing:-.02em;white-space:nowrap}
.svc-meta i{font-style:normal;font-size:.78rem;color:var(--ink-dim)}

.section{padding:clamp(3.6rem,7vw,6rem) 0}
.section.alt{background:var(--bg2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.head{max-width:62ch;margin-bottom:2.6rem}
.head h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.head .lede{margin-top:1rem;font-size:1rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- THE FOUR DOORS (home + cross-sell strips) --------------- */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:1080px){.doors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:1.7rem 1.5rem 1.5rem;overflow:hidden;
  box-shadow:0 14px 36px rgba(22,32,46,.07);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.door::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold-bright));transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.door:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(22,32,46,.15);border-color:var(--line-green)}
.door:hover::before{transform:scaleX(1)}
.door:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.door .ico{width:38px;height:38px;color:var(--green);margin-bottom:1.1rem}
.door .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.door .num{position:absolute;top:1.4rem;right:1.5rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;color:var(--muted)}
.door h3{font-size:1.22rem}
.door p{margin-top:.6rem;font-size:.9rem;line-height:1.62}
.door .from{margin-top:auto;padding-top:1.2rem;display:flex;align-items:baseline;justify-content:space-between;
  gap:.55rem;flex-wrap:wrap;row-gap:.5rem;
  border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted)}
.door .from b{font-family:var(--serif);font-size:.96rem;color:var(--ink);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.door .go{white-space:nowrap;margin-left:auto}
.door .go{font-size:.8rem;color:var(--green);font-weight:600;font-family:var(--sans);letter-spacing:0}
.door:hover .go{text-decoration:underline;text-underline-offset:3px}

/* the ladder line under the doors */
.ladder{margin-top:2.2rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ladder b{color:var(--green);font-weight:600}
.ladder i{font-style:normal;color:var(--gold)}

/* ---------- numbered step list ------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.step{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:1.4rem 1.4rem 1.5rem;
  transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--line-green);transform:translateY(-3px)}
.step i{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--gold)}
.step b{display:block;font-family:var(--serif);font-weight:700;color:var(--ink);font-size:1.02rem;margin-top:.5rem}
.step p{margin-top:.45rem;font-size:.87rem;line-height:1.6}

/* ---------- basis-rule cards (spreadsheets) ------------------------- */
.basis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.basis{grid-template-columns:1fr}}
.bcard{border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.5rem;background:var(--card);
  position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.bcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(22,32,46,.12)}
.bcard .tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:999px;font-weight:600}
.bcard.m .tag{background:rgba(29,95,74,.12);color:var(--green);border:1px solid rgba(29,95,74,.28)}
.bcard.o .tag{background:rgba(176,137,60,.14);color:#8d6c2c;border:1px solid rgba(176,137,60,.32)}
.bcard.s .tag{background:rgba(119,135,160,.16);color:#56637a;border:1px solid rgba(119,135,160,.34)}
.bcard h3{font-size:1.12rem;margin-top:.95rem}
.bcard p{margin-top:.5rem;font-size:.88rem;line-height:1.62}
.bcard .eg{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--line);font-size:.82rem;color:var(--ink-dim)}
.bcard .eg b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;font-weight:400}

/* ---------- spreadsheet mock --------------------------------------- */
.sheet-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(22,32,46,.16);background:#fff}
.sheet-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;background:#f4f5f7;border-bottom:1px solid #dcdfe4}
.sheet-bar i{width:.5rem;height:.5rem;border-radius:50%;background:#cfd4da}
.sheet-bar span{margin-left:.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#7a828d}
.sheet-bar em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#a8543f;border:1px solid rgba(168,84,63,.35);border-radius:4px;padding:.16rem .42rem}
.sheet-scroll{overflow-x:auto}
table.sheet{border-collapse:collapse;width:100%;min-width:660px;font-family:var(--mono);font-size:.72rem;color:#2a3038;background:#fff}
table.sheet th,table.sheet td{border:1px solid #e2e5ea;padding:.44rem .6rem;text-align:right;white-space:nowrap}
table.sheet th{background:#f4f5f7;color:#78808c;font-weight:500;font-size:.64rem;letter-spacing:.06em;text-align:center}
table.sheet td.lab{text-align:left;color:#39414c}
table.sheet td.rn{background:#f4f5f7;color:#9aa2ae;text-align:center;font-size:.62rem;width:2.2rem}
table.sheet tr:hover td:not(.rn){background:#fafbfc}
table.sheet td.flag{position:relative;background:rgba(168,84,63,.10);color:#8f3f2c;font-weight:600;
  box-shadow:inset 0 0 0 1.5px rgba(168,84,63,.55)}
table.sheet td.flag::after{content:attr(data-n);position:absolute;top:-.42rem;right:-.42rem;width:1.05rem;height:1.05rem;
  border-radius:50%;background:#a8543f;color:#fff;font-size:.56rem;display:flex;align-items:center;justify-content:center;
  font-weight:700;box-shadow:0 2px 6px rgba(168,84,63,.5)}
table.sheet td.ok{background:rgba(29,95,74,.09);color:var(--green);font-weight:600}
table.sheet .sub{color:#9aa2ae}
.sheet-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.1rem}
@media (max-width:860px){.sheet-notes{grid-template-columns:1fr}}
.snote{display:flex;gap:.75rem;align-items:flex-start;background:var(--card);border:1px solid var(--line-soft);
  border-radius:12px;padding:.95rem 1.05rem}
.snote i{flex-shrink:0;width:1.35rem;height:1.35rem;border-radius:50%;background:#a8543f;color:#fff;
  font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.snote b{display:block;font-size:.86rem;color:var(--ink);font-weight:600}
.snote span{display:block;font-size:.8rem;margin-top:.15rem;line-height:1.55}
.snote .basis-chip{display:inline-block;margin-top:.4rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.16rem .45rem;border-radius:4px;background:rgba(29,95,74,.12);color:var(--green)}

/* ---------- README tab (the differentiator) ------------------------- */
.readme{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  background:var(--navy);border-radius:20px;padding:clamp(1.8rem,4vw,3rem);color:#9daabd;
  box-shadow:0 34px 80px rgba(16,24,40,.34);position:relative;overflow:hidden}
.readme::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(240,237,228,.07) 1px,transparent 1.4px);
  background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 70% at 20% 20%,#000,transparent 75%);
  mask-image:radial-gradient(60% 70% at 20% 20%,#000,transparent 75%)}
.readme > *{position:relative}
.readme h2{color:#f0ede4;font-size:clamp(1.5rem,3vw,2.1rem)}
.readme h2 em{color:#8fd0ac;font-style:normal}
.readme p{margin-top:.9rem;max-width:58ch;font-size:.95rem}
.readme p b{color:#f0ede4}
@media (max-width:820px){.readme{grid-template-columns:1fr}}
.tabstrip{display:flex;gap:.28rem;align-items:flex-end}
.tabstrip span{font-family:var(--mono);font-size:.62rem;padding:.5rem .8rem;border-radius:6px 6px 0 0;
  background:#1c2740;color:#7787a0;border:1px solid #2a3448;border-bottom:0;white-space:nowrap}
.tabstrip span.on{background:#5fae83;color:#0d1422;font-weight:700;border-color:#5fae83}
.tabsheet{background:#141d30;border:1px solid #2a3448;border-radius:0 8px 8px 8px;padding:1.1rem 1.2rem;
  font-family:var(--mono);font-size:.7rem;line-height:1.85;color:#a9b6c9;min-width:min(340px,74vw)}
.tabsheet b{color:#f0ede4;display:block;margin-bottom:.4rem;font-size:.72rem}
.tabsheet u{text-decoration:none;color:#8fd0ac}

/* ---------- workflow cards (automations) ---------------------------- */
.wf{margin-top:2.4rem;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden;
  box-shadow:0 18px 46px rgba(22,32,46,.09);transition:box-shadow .4s}
.wf:hover{box-shadow:0 30px 70px rgba(22,32,46,.15)}
.wf-head{display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:start;padding:1.7rem 1.8rem 1.3rem}
.wf-head h3{font-size:1.25rem}
.wf-head .what{margin-top:.5rem;font-size:.92rem;max-width:62ch}
.wf-state{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  border-radius:999px;padding:.36rem .78rem;border:1px solid rgba(29,95,74,.32);color:var(--green);background:rgba(29,95,74,.1)}
.wf-state.off{border-color:var(--line);color:var(--muted);background:transparent}
.wf-canvas{background:#0d1422;border-top:1px solid #202a3d;border-bottom:1px solid #202a3d;padding:1.1rem;overflow-x:auto}
.wf-canvas img{min-width:520px;width:100%;height:auto;border-radius:10px;display:block}
.wf-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-soft)}
@media (max-width:820px){.wf-facts{grid-template-columns:1fr}.wf-head{grid-template-columns:1fr}}
.wf-facts div{padding:1.1rem 1.5rem;border-right:1px solid var(--line-soft)}
.wf-facts div:last-child{border-right:0}
.wf-facts span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.wf-facts b{display:block;font-size:.88rem;color:var(--ink);margin-top:.3rem;font-weight:600;line-height:1.5}

.legend{display:flex;flex-wrap:wrap;gap:.5rem .95rem;margin-top:1.5rem;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:.42rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legend i{width:.62rem;height:.62rem;border-radius:3px;display:inline-block}

/* ---------- dashboard mock (dashboards page) ------------------------ */
.dash{background:var(--navy);border-radius:18px;overflow:hidden;border:1px solid rgba(22,32,46,.25);
  box-shadow:0 30px 70px rgba(22,32,46,.28);transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.dash:hover{transform:perspective(1600px) rotateY(0deg) rotateX(0deg)}
@media (max-width:940px){.dash{transform:none}.dash:hover{transform:none}}
.dash-chrome{display:flex;align-items:center;gap:.34rem;padding:.6rem .85rem;background:#0b111d}
.dash-chrome i{width:.44rem;height:.44rem;border-radius:50%;background:#2c3547}
.dash-chrome span{margin-left:auto;font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:#5c6677}
.dash-body{padding:1rem}
.dash-brief{border-radius:9px;padding:.8rem .9rem;background:linear-gradient(120deg,#274a68,#33506e);color:#dbe4ee;
  font-size:.76rem;line-height:1.55}
.dash-brief b{color:#fff}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:.7rem}
@media (max-width:620px){.dash-kpis{grid-template-columns:repeat(2,1fr)}}
.dash-kpis div{background:var(--navy2);border:1px solid #232f47;border-radius:8px;padding:.6rem .65rem}
.dash-kpis span{display:block;font-family:var(--mono);font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;color:#7787a0}
.dash-kpis b{display:block;font-family:var(--serif);font-weight:700;font-size:1.02rem;color:#f0ede4;margin-top:.18rem;letter-spacing:-.01em}
.dash-kpis s{display:block;text-decoration:none;font-family:var(--mono);font-size:.48rem;margin-top:.14rem;color:#5fae83}
.dash-q{margin-top:.7rem;border:1px solid #232f47;border-radius:9px;background:#141d30;overflow:hidden}
.dash-q > b{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;
  color:#8fd0ac;padding:.6rem .8rem .35rem}
.dash-q .qr{display:grid;grid-template-columns:1fr auto;gap:.8rem;padding:.55rem .8rem;border-top:1px solid #1e2739;font-size:.72rem;color:#c5cedb}
.dash-q .qr u{text-decoration:none;display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;color:#7787a0;margin-bottom:.16rem}
.dash-q .qr i{font-style:normal;font-family:var(--mono);font-size:.54rem;padding:.2rem .45rem;border-radius:4px;height:fit-content;white-space:nowrap}
.dash-q .qr i.hi{background:rgba(207,122,104,.16);color:#e39c8a;border:1px solid rgba(207,122,104,.35)}
.dash-q .qr i.md{background:rgba(201,162,92,.14);color:#d9b978;border:1px solid rgba(201,162,92,.32)}
.dash-q .qr i.lo{background:rgba(95,174,131,.14);color:#8fd0ac;border:1px solid rgba(95,174,131,.32)}
.dash-bars{display:flex;align-items:flex-end;gap:.32rem;height:52px;margin-top:.7rem;padding:0 .1rem}
.dash-bars i{flex:1;background:linear-gradient(180deg,#5fae83,#2c6a51);border-radius:2px 2px 0 0;display:block}

/* ---------- data flow rail (data page) ------------------------------ */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;position:relative}
@media (max-width:1000px){.rail{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rail{grid-template-columns:1fr}}
.rstep{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.2rem;position:relative;
  transition:transform .35s,border-color .35s,box-shadow .35s}
.rstep:hover{transform:translateY(-4px);border-color:var(--line-green);box-shadow:0 22px 46px rgba(22,32,46,.11)}
.rstep i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--gold)}
.rstep b{display:block;font-family:var(--serif);font-weight:700;color:var(--ink);font-size:1rem;margin-top:.5rem}
.rstep p{margin-top:.4rem;font-size:.83rem;line-height:1.55}
.rstep .dot{position:absolute;top:50%;right:-.52rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--green);
  transform:translateY(-50%);box-shadow:0 0 0 4px var(--bg)}
@media (max-width:1000px){.rstep .dot{display:none}}

.sources{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.src{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:.55rem .85rem;font-size:.83rem;color:var(--ink);transition:border-color .3s,transform .3s}
.src:hover{border-color:var(--line-green);transform:translateY(-2px)}
.src img{width:17px;height:17px;object-fit:contain;display:block}
.src.plain{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-dim)}

/* ---------- proof band ---------------------------------------------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,1fr)}}
.pnum{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem;text-align:left}
.pnum b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.3rem);
  color:var(--green);letter-spacing:-.03em;line-height:1}
.pnum span{display:block;margin-top:.55rem;font-size:.85rem;line-height:1.5}
.pnum em{display:block;margin-top:.6rem;font-style:normal;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- callout / honesty note ---------------------------------- */
.note{border-left:3px solid var(--gold);background:var(--bg2);border-radius:0 12px 12px 0;
  padding:1.2rem 1.4rem;font-size:.9rem;line-height:1.65;max-width:70ch}
.note b{color:var(--ink)}

/* ---------- next-door cross sell ------------------------------------ */
.nextdoor{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
@media (max-width:860px){.nextdoor{grid-template-columns:1fr}}
.nd{display:flex;flex-direction:column;gap:.35rem;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:1.25rem 1.35rem;transition:transform .3s,border-color .3s}
.nd:hover{transform:translateY(-4px);border-color:var(--line-green)}
.nd i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nd b{font-family:var(--serif);font-size:1.04rem;color:var(--ink);font-weight:700}
.nd span{font-size:.85rem;line-height:1.55}
.nd u{text-decoration:none;color:var(--green);font-size:.82rem;font-weight:600;margin-top:.4rem}

/* ---------- CTA band + misc ----------------------------------------- */
.cta-band{background:radial-gradient(60% 90% at 50% 0%, rgba(95,174,131,.12), transparent 70%), var(--navy);
  text-align:center;padding:5rem 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(240,237,228,.08) 1px, transparent 1.4px);
  background-size:28px 28px;-webkit-mask-image:radial-gradient(50% 60% at 50% 50%, #000 0%, transparent 80%);
  mask-image:radial-gradient(50% 60% at 50% 50%, #000 0%, transparent 80%)}
.cta-band > *{position:relative}
.cta-band h2{color:#f0ede4;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cta-band p{color:#9daabd;margin:1rem auto 0;max-width:48ch}
.cta-band .cta{display:inline-block;margin-top:1.8rem}
.cta-band .sub{margin-top:1.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7787a0}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.tabs a{transition:color .25s,border-color .25s}

/* =====================================================================
   v12.1 additions — per-door brand accents, tool chips, motion pass.
   2026-08-11. Appended; nothing above this line was edited.
   ===================================================================== */

/* ---------- per-door accent ----------------------------------------- */
:root{--accent:var(--green)}
body.door-xl{--accent:#1D6F42}
body.door-auto{--accent:#C64B66}
body.door-dash{--accent:#23855C}
body.door-data{--accent:#2C6E8F}
.eyebrow{color:var(--accent)}
body[class*="door-"] .svc-hero{
  background:radial-gradient(52% 58% at 22% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%), var(--bg)}
body[class*="door-"] .svc-hero h1 em{color:var(--accent)}
body[class*="door-"] .snote .basis-chip,
body[class*="door-"] .step i{color:color-mix(in srgb, var(--accent) 82%, var(--ink))}
body[class*="door-"] .nd u,body[class*="door-"] .door .go{color:var(--accent)}

/* ---------- "works with" tool chips ---------------------------------- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.5rem}
.tools > i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-right:.3rem}
.tool{display:inline-flex;align-items:center;gap:.48rem;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem .4rem .55rem;font-size:.78rem;font-weight:600;color:var(--ink);
  box-shadow:0 6px 16px rgba(22,32,46,.05);transition:transform .3s,border-color .3s}
.tool:hover{transform:translateY(-2px);border-color:var(--line-green)}
.tool img{width:16px;height:16px;display:block}

/* mini tool row on the four-doors cards */
.door .with{display:flex;align-items:center;gap:.5rem;margin-top:.95rem}
.door .with img{width:15px;height:15px;display:block;opacity:.9}
.door .with i{font-style:normal;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* per-door top rail colour on the home cards */
.door.d-xl::before{background:linear-gradient(90deg,#1D6F42,#5fae83)}
.door.d-data::before{background:linear-gradient(90deg,#2C6E8F,#5fa8d8)}
.door.d-auto::before{background:linear-gradient(90deg,#C64B66,#e08a9d)}
.door.d-dash::before{background:linear-gradient(90deg,#23855C,#3ECF8E)}

/* ---------- motion pass ---------------------------------------------- */
/* tighter, springier reveal */
.reveal{transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.68,.26,1),transform .6s cubic-bezier(.22,.68,.26,1)}

/* hero entrance on door pages (no JS needed) */
@media (prefers-reduced-motion:no-preference){
  .svc-hero .eyebrow,.svc-hero h1,.svc-hero .lede,.svc-hero .tools,.svc-hero .svc-meta{
    animation:ti-rise .7s cubic-bezier(.22,.68,.26,1) both}
  .svc-hero h1{animation-delay:.07s}
  .svc-hero .lede{animation-delay:.15s}
  .svc-hero .tools{animation-delay:.23s}
  .svc-hero .svc-meta{animation-delay:.31s}
}
@keyframes ti-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* keep the dashboard mock's 3D tilt after it reveals (was flattened by .reveal.in) */
.dash.reveal{transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg) translateY(18px)}
.dash.reveal.in{transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg)}
.dash.reveal.in:hover{transform:perspective(1600px) rotateY(0deg) rotateX(0deg)}
@media (max-width:940px){.dash.reveal,.dash.reveal.in,.dash.reveal.in:hover{transform:translateY(18px)}
  .dash.reveal.in,.dash.reveal.in:hover{transform:none}}

/* live pill breathes; off pill doesn't */
@media (prefers-reduced-motion:no-preference){
  .wf-state:not(.off)::before{content:"";display:inline-block;width:.46rem;height:.46rem;border-radius:50%;
    background:var(--green);margin-right:.5rem;vertical-align:.02rem;animation:ti-pulse 2.2s infinite}
}
@keyframes ti-pulse{0%{box-shadow:0 0 0 0 rgba(29,95,74,.35)}70%{box-shadow:0 0 0 7px rgba(29,95,74,0)}100%{box-shadow:0 0 0 0 rgba(29,95,74,0)}}

/* audit flags pop in one at a time once the sheet is on screen */
table.sheet td.flag::after{transform:scale(1)}
@media (prefers-reduced-motion:no-preference){
  .sheet-wrap.armed td.flag::after{transform:scale(0)}
  .sheet-wrap td.flag.pop::after{animation:ti-badge .5s cubic-bezier(.34,1.56,.64,1) both}
  .sheet-wrap td.flag.pop{animation:ti-flash .8s ease both}
}
@keyframes ti-badge{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ti-flash{0%{background:rgba(168,84,63,.38)}100%{background:rgba(168,84,63,.10)}}

/* dashboard mock bars grow on reveal */
@media (prefers-reduced-motion:no-preference){
  .dash.reveal .dash-bars i{transform:scaleY(0);transform-origin:bottom;
    transition:transform .8s cubic-bezier(.22,.68,.26,1)}
  .dash.reveal.in .dash-bars i{transform:scaleY(1)}
  .dash.reveal.in .dash-bars i:nth-child(2){transition-delay:.06s}
  .dash.reveal.in .dash-bars i:nth-child(3){transition-delay:.12s}
  .dash.reveal.in .dash-bars i:nth-child(4){transition-delay:.18s}
  .dash.reveal.in .dash-bars i:nth-child(5){transition-delay:.24s}
  .dash.reveal.in .dash-bars i:nth-child(6){transition-delay:.3s}
  .dash.reveal.in .dash-bars i:nth-child(7){transition-delay:.36s}
  .dash.reveal.in .dash-bars i:nth-child(8){transition-delay:.42s}
  .dash.reveal.in .dash-bars i:nth-child(9){transition-delay:.48s}
  .dash.reveal.in .dash-bars i:nth-child(10){transition-delay:.54s}
}

/* workflow diagrams: soft sweep of light as each card reveals */
.wf-canvas{position:relative}
@media (prefers-reduced-motion:no-preference){
  .wf.reveal .wf-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(240,237,228,.14) 50%,transparent 70%);
    transform:translateX(-120%)}
  .wf.reveal.in .wf-canvas::after{animation:ti-sweep 1.2s .35s cubic-bezier(.4,0,.2,1) both}
}
@keyframes ti-sweep{to{transform:translateX(120%)}}

/* ---------- v12.1b — honest-sweep additions (2026-08-11) -------------- */
/* data hero: three systems converge into one answer */
.flow-mini{max-width:430px;margin:2.4rem auto 0}
.fm-sources{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.fm-node{display:inline-flex;align-items:center;gap:.45rem;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem .4rem .55rem;font-size:.78rem;font-weight:600;color:var(--ink);
  box-shadow:0 6px 16px rgba(22,32,46,.05)}
.fm-node img{width:16px;height:16px;display:block}
.fm-lines{display:block;width:min(320px,80%);height:56px;margin:.2rem auto}
.fm-lines path{fill:none;stroke:color-mix(in srgb, var(--accent) 55%, var(--line));stroke-width:1.6;
  stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .flow-mini.reveal .fm-lines path{stroke-dashoffset:1}
  .flow-mini.reveal.in .fm-lines path{animation:ti-draw .9s cubic-bezier(.4,0,.2,1) forwards}
  .flow-mini.reveal.in .fm-lines path:nth-child(2){animation-delay:.15s}
  .flow-mini.reveal.in .fm-lines path:nth-child(3){animation-delay:.3s}
}
@keyframes ti-draw{to{stroke-dashoffset:0}}
.fm-out{background:var(--navy);border-radius:14px;padding:1.05rem 1.2rem;max-width:400px;margin:0 auto;
  text-align:left;box-shadow:0 22px 54px rgba(16,24,40,.28)}
.fm-out b{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8fd0ac;margin-bottom:.4rem;font-weight:600}
.fm-out span{display:block;font-size:.85rem;line-height:1.6;color:#dbe4ee}

/* automations hero: diagram sits in a dark window like its siblings below */
.wf-frame{background:#0d1422;border-radius:16px;overflow:hidden;border:1px solid #202a3d;
  box-shadow:0 30px 70px rgba(22,32,46,.26)}
.wf-frame-bar{display:flex;align-items:center;gap:.42rem;padding:.55rem .85rem;background:#0b111d;
  border-bottom:1px solid #1b2436}
.wf-frame-bar i{width:.46rem;height:.46rem;border-radius:50%;background:#2c3547}
.wf-frame-bar span{margin-left:.45rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5c6677}
.wf-frame-bar em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8fd0ac;border:1px solid rgba(95,174,131,.4);border-radius:999px;padding:.18rem .55rem}
@media (prefers-reduced-motion:no-preference){
  .wf-frame-bar em::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;
    background:#5fae83;margin-right:.4rem;vertical-align:.03rem;animation:ti-pulse 2.2s infinite}
}
/* data + pricing pages use the plain .hero block: give their h1 accents too */
body[class*="door-"] .hero h1 em{color:var(--accent)}

/* ---------- v12.2 — homepage redesign pass (OT's review, 2026-08-11) ------ */

/* the four doors: icon chips, drawn-in strokes, staggered pop */
.door .ico{width:46px;height:46px;padding:9px;border-radius:13px;background:rgba(29,95,74,.09);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .35s}
.door.d-xl .ico{color:#1D6F42;background:rgba(29,111,66,.10)}
.door.d-data .ico{color:#2C6E8F;background:rgba(44,110,143,.10)}
.door.d-auto .ico{color:#C64B66;background:rgba(198,75,102,.09)}
.door.d-dash .ico{color:#23855C;background:rgba(35,133,92,.10)}
.door:hover .ico{transform:scale(1.1) rotate(-4deg)}
/* Icons are ALWAYS visible by default. The draw only plays as an enhancement when
   a page marks the card revealed. The homepage reveals with GSAP rather than the
   .in class, which is exactly how these icons went invisible the first time. */
@media (prefers-reduced-motion:no-preference){
  .doors .door.in{animation:ti-pop .6s cubic-bezier(.22,.68,.26,1) both}
  .doors .door.in:nth-child(2){animation-delay:.09s}
  .doors .door.in:nth-child(3){animation-delay:.18s}
  .doors .door.in:nth-child(4){animation-delay:.27s}
  .door .ico svg *{stroke-dasharray:46;stroke-dashoffset:0}
  .doors .door.in .ico svg *{animation:ti-draw2 .9s .3s cubic-bezier(.4,0,.2,1) both}
}
@keyframes ti-pop{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ti-draw2{from{stroke-dashoffset:46}to{stroke-dashoffset:0}}

/* the gap statement: make it land, and stay legible after the scene plays */
.gap h2{color:#ffffff;text-shadow:0 2px 24px rgba(10,16,28,.55)}
.gap h2 em{color:#a5e6c6}
.gap-sub{color:#c9d5e4;font-size:1.08rem;font-weight:500}

/* two Mondays: warmer, colour-coded, no spreadsheet-font table */
.ba-before{border-top:3px solid #c56a55}
.ba-after{border-top:3px solid var(--gold)}
.ba-before .ba-tag{background:rgba(197,106,85,.12);color:#a8543f}
.ba-sheet .bs-bar,.ba-sheet .bs-row,.ba-sheet .bs-foot{font-family:var(--sans);letter-spacing:0}
.ba-sheet .bs-bar{font-size:.72rem;color:#8d6a5f;background:rgba(197,106,85,.08)}
.ba-sheet .bs-head{font-weight:600;color:#6b7788}
.ba-sheet .bs-row span:nth-child(4){color:#a8543f}
.ba-sheet .bs-foot{font-size:.7rem;color:#a8543f}
.ba-before .ba-list li::before{background:#c56a55}
.bb-metrics{display:flex;flex-wrap:wrap;gap:.45rem .6rem;margin-top:.9rem}
.bb-metrics span{font-size:.74rem;color:var(--ink-dim);background:var(--bg2);
  border:1px solid var(--line-soft);border-radius:999px;padding:.32rem .7rem}
.bb-metrics b{color:var(--green);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .rv-left{transform:translateX(-34px)}
  .rv-right{transform:translateX(34px)}
  .rv-left.in,.rv-right.in{transform:none}
}
@media (max-width:900px){.rv-left,.rv-right{transform:translateY(18px)}}

/* offer pillars + the loop: lift, rail, stagger */
.pillar{overflow:hidden}
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold-bright));transform:scaleX(0);
  transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pillar:hover{transform:translateY(-5px);box-shadow:0 30px 64px rgba(22,32,46,.14)}
.pillar:hover::before{transform:scaleX(1)}
.pillar h3{letter-spacing:-.015em}
.l3{transition:transform .3s,border-color .3s}
.l3:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:no-preference){
  .pillars .pillar.in,.l3-row .l3.in{animation:ti-pop .6s cubic-bezier(.22,.68,.26,1) both}
  .pillars .pillar.in:nth-child(2),.l3-row .l3.in:nth-child(2){animation-delay:.09s}
  .pillars .pillar.in:nth-child(3),.l3-row .l3.in:nth-child(3){animation-delay:.18s}
  .pillars .pillar.in:nth-child(4){animation-delay:.27s}
}


/* ---------- v12.3 — the subscription-cannot-copy cards carry the argument ---- */
.l3-head h3{font-size:clamp(1.5rem,2.8vw,2.15rem);letter-spacing:-.02em}
.l3-head p{font-size:1.02rem;max-width:60ch}
.l3{padding:1.7rem 1.6rem;border-radius:16px}
.l3 b{font-size:1.06rem;letter-spacing:-.01em;display:block;margin-bottom:.5rem}
.l3 span{font-size:.98rem;line-height:1.65}
.l3:hover{border-color:var(--line-green);box-shadow:0 24px 50px rgba(22,32,46,.12)}

/* dashboard mock: sharper axes, warmer surfaces, readable labels */
.rev-chart .ax-y{text-anchor:end}
.rev-chart .ax-x{text-anchor:middle}
.mock .rev-chart text{font-size:9px;fill:#8798ad;letter-spacing:.04em}
.mock .rev-chart line{stroke:rgba(240,237,228,.10)}
.mock .kpi{transition:border-color .3s,transform .3s}
.mock .kpi:hover{border-color:rgba(95,174,131,.4);transform:translateY(-2px)}

/* dashboard mock v12.3: charts fill their cards and carry labels */
.mock .rev-chart{height:190px}
.mock .rev-chart line{stroke:rgba(240,237,228,.09)}
.mock .rev-chart line.base{stroke:rgba(240,237,228,.22)}
.mock .rev-chart .ax-peak{fill:#e8c882;font-size:10px;font-weight:700;text-anchor:middle;letter-spacing:.02em}
.mock .spark{height:86px}
.mock .spark-dot{fill:#8fd0ac;stroke:#0d1422;stroke-width:2}
.mock .spark-foot{display:flex;justify-content:space-between;margin-top:.5rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#7787a0}
.mock .spark-foot b{color:#c5cedb;font-weight:600}
.mock .spark-foot .sf-now b{color:#8fd0ac}