/* ============================================================
TI v9.2 — POLISH LAYER (loaded after each page's own styles)
Direction per OT: Apple-grade sans display, ZERO italics,
live analytics backgrounds, colour in the flat components.
============================================================ */
:root{
/* v16: display face restored to the brand grotesque. The old system-sans stack
rendered every heading in SF Pro/Inter, which is the single biggest reason the
site read as generic. Apple-grade comes from the scale and tracking below,
not from borrowing Apple's font. */
--display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--serif:var(--display);
--frame:rgba(22,32,46,.10);
}
/* ---------- typography: modern, tight, confident ---------- */
h1,h2,h3{font-family:var(--display) !important;font-weight:700 !important;letter-spacing:-.032em !important;line-height:1.06;font-variation-settings:normal}
h1 em,h2 em,h3 em{font-family:var(--display) !important;font-style:normal !important;font-weight:700 !important;color:var(--green,#1d5f4a)}
.brand .word,footer .fb{font-family:var(--display) !important;font-weight:700;letter-spacing:-.02em}
.loop-centre b,.plan .price,.anchor .big,.counter-band h2,.station .ghost,.lstage-card .ghost{font-family:var(--display) !important;font-weight:800 !important;letter-spacing:-.03em}
.counter-band h2{font-weight:800 !important}
.hero h1{line-height:1.04}
.hero .lede,.section .lede,.h2row p{font-size:1.02rem}
.hero h1 .w em i{font-style:normal}
/* gold overline tick above section heads */
.h2row h2,.section .head h2,.year .head h2{position:relative;padding-top:1.1rem}
.h2row h2::before,.section .head h2::before,.year .head h2::before{content:"";position:absolute;top:0;left:2px;width:2.4rem;height:3px;border-radius:2px;
background:linear-gradient(90deg,var(--gold,#b0893c),transparent)}
/* ---------- grain + editorial page frame ---------- */
body::after{content:"";position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;mix-blend-mode:multiply;opacity:.028;
background-image:url('data:image/svg+xml,')}
.tiv9-frame{position:fixed;inset:0;pointer-events:none;z-index:60}
.tiv9-frame::before,.tiv9-frame::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:
linear-gradient(180deg, transparent 0, var(--frame) 8%, var(--frame) 92%, transparent 100%)}
.tiv9-frame::before{left:max(1.6vw, 12px)}
.tiv9-frame::after{right:max(1.6vw, 12px)}
.tiv9-frame i{position:absolute;width:9px;height:9px}
.tiv9-frame i::before,.tiv9-frame i::after{content:"";position:absolute;background:rgba(22,32,46,.28)}
.tiv9-frame i::before{left:4px;top:0;width:1px;height:9px}
.tiv9-frame i::after{left:0;top:4px;width:9px;height:1px}
@media (max-width:1100px){.tiv9-frame{display:none}}
/* ---------- LIVE analytics background canvases ---------- */
canvas.tiv9-live{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.section > .wrap,.year > .wrap,.cta-band > *,.anchor > *,.contact > .wrap,#found > .wrap{position:relative;z-index:1}
/* soft washes */
.tiv9-washed{position:relative}
.tiv9-washed::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(46% 42% at 8% 8%, rgba(29,95,74,.05), transparent 70%),
radial-gradient(40% 46% at 96% 88%, rgba(176,137,60,.05), transparent 70%)}
.tiv9-washed > *{position:relative;z-index:1}
/* ---------- close the dead seams ---------- */
#found.section{padding:4.2rem 0 3.8rem}
#offer.section{padding-top:3.4rem}
.contact.section{padding-top:3.6rem}
/* ---------- colour + polish for the flat components ---------- */
/* proof chips under the dashboard: navy stat cards, not white pills */
.chip{background:linear-gradient(160deg,#141d30,#101828) !important;border:1px solid rgba(95,174,131,.28) !important;color:#c5cedb !important;
border-radius:10px !important;padding:.75rem 1.15rem !important;box-shadow:0 14px 30px rgba(16,24,40,.25)}
.chip b{color:#8fd0ac !important;font-weight:700}
.chip:hover{transform:translateY(-3px);border-color:rgba(95,174,131,.55) !important}
/* gap fact cards: accent rule + lift */
.gap-facts span{position:relative;background:rgba(240,237,228,.07);border:1px solid rgba(240,237,228,.16);border-radius:12px;overflow:hidden;transition:transform .35s,border-color .35s}
.gap-facts span::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#5fae83,#c9a25c)}
.gap-facts span:hover{transform:translateY(-3px);border-color:rgba(95,174,131,.4)}
/* pillars: numbered colour caps + clean feet (kill the mono shouting) */
.pillar{border-radius:18px}
.pillar .p-step{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.01em;text-transform:none;
color:#06121b;background:var(--green,#1d5f4a);padding:.34rem .8rem;border-radius:999px;width:fit-content;box-shadow:0 6px 16px rgba(29,95,74,.25)}
.pillar:nth-child(2) .p-step{background:#101828}
.pillar:nth-child(3) .p-step{background:var(--gold,#b0893c)}
.pillar .p-fee,.station .fee{font-family:var(--display) !important;text-transform:none !important;letter-spacing:0 !important;
font-size:.85rem !important;font-weight:600 !important;color:var(--green,#1d5f4a) !important}
.pillar::before{height:3px;background:linear-gradient(90deg,transparent,rgba(29,95,74,.5),rgba(176,137,60,.4),transparent)}
/* found-facts chips: green numerals pop */
.found-facts b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#8fd0ac}
.found-facts span{border-radius:12px}
/* cards: top-light */
.pillar,.sys,.t-item,.plan,.lstage-card,.pcard,.cnote,.t-card,.col-card,.fstep,.v{
background-image:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%) !important;
background-color:var(--card,#fbf9f3)}
.plan.feat{background-image:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%) !important;background-color:#101828}
.col-card,.fstep{background-color:var(--bg2,#ebe7db)}
/* buttons: shine sweep */
.cta,.btn.solid,.plan.feat .go,.rights a.btn{position:relative;overflow:hidden}
.cta::before,.btn.solid::before{content:"";position:absolute;inset:0;transform:translateX(-110%) skewX(-16deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transition:transform .55s ease}
.cta:hover::before,.btn.solid:hover::before{transform:translateX(110%) skewX(-16deg)}
footer .f-nav a{padding-bottom:1px;background-image:linear-gradient(90deg,var(--green,#1d5f4a),var(--green,#1d5f4a));
background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s ease,color .25s}
footer .f-nav a:hover{background-size:100% 1px}
::selection{background:rgba(29,95,74,.16)}
/* ---------- pipeline: richer loop ---------- */
.lp-bgring{fill:none;stroke:rgba(22,32,46,.07);stroke-width:1}
.lp-bgring.d{stroke-dasharray:3 9;transform-origin:200px 200px;animation:lpSpin 70s linear infinite}
@keyframes lpSpin{to{transform:rotate(360deg)}}
.lp-arc{stroke:url(#lpGrad) !important;stroke-width:5 !important;filter:drop-shadow(0 0 10px rgba(46,122,95,.45)) !important}
.lp-flow{fill:none;stroke:#2e7a5f;opacity:.3;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 14;animation:lpMarch 1.1s linear infinite}
@keyframes lpMarch{to{stroke-dashoffset:-17}}
.lp-node .npulse{fill:none;stroke:#2e7a5f;stroke-width:1.4;opacity:0}
.lp-node.on .npulse{animation:npulse 2.2s ease-out infinite}
@keyframes npulse{0%{r:18;opacity:.55}100%{r:34;opacity:0}}
.lp-node circle{stroke-width:2.2}
.loop-centre span{font-weight:700}
/* pipeline: scroll-scrubbed year strip (desktop) */
@media (min-width:920px){
.ymonths{display:flex !important;gap:1.1rem;width:max-content}
.ym{width:196px;flex-shrink:0;opacity:.4;transform:none !important;transition:opacity .4s}
.ym.hit{opacity:1}
.ym b{font-size:.95rem}
.ym span{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
.cta::before,.btn.solid::before,.lp-flow,.lp-bgring.d,.lp-node .npulse{animation:none;display:none}
.ym{opacity:1 !important}
}
/* ============================================================
v10 — "the site behaves like the product"
Rhythm discipline + severity-chip language + the briefing
centrepiece + real product imagery + micro-interaction polish
============================================================ */
/* rhythm: one section scale everywhere */
.section{padding:clamp(4rem,7vw,6rem) 0}
.section .head{margin-bottom:2.4rem}
/* severity chips — the product's own grammar, used as site badges */
.sev{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;border-radius:6px;padding:.32rem .6rem}
.sev::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.sev.info{color:#54637a;background:rgba(84,99,122,.1)}
.sev.watch{color:#8a6a1f;background:rgba(176,137,60,.14)}
.sev.action{color:#1d5f4a;background:rgba(29,95,74,.12)}
/* the briefing centrepiece */
.briefing-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:1.3rem;align-items:stretch}
@media (max-width:960px){.briefing-grid{grid-template-columns:1fr}}
.bf-card{background:linear-gradient(180deg,#fdfcf8,#faf8f1);border:1px solid var(--line);border-radius:20px;padding:2.1rem 2.2rem;box-shadow:0 30px 70px rgba(22,32,46,.12);display:flex;flex-direction:column;position:relative;overflow:hidden}
.bf-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold,#b0893c),transparent 60%)}
.bf-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.bf-date{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bf-card h3{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.25;letter-spacing:-.02em}
.bf-card .bf-body{margin-top:.9rem;font-size:.93rem;line-height:1.7;color:var(--ink-dim)}
.bf-metrics{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.bf-metrics span{font-size:.8rem;color:var(--ink-dim);background:var(--bg2);border:1px solid var(--line-soft);border-radius:9px;padding:.5rem .8rem}
.bf-metrics b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.bf-foot{margin-top:auto;padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;border-top:1px solid var(--line-soft);font-size:.78rem;color:var(--muted)}
.bf-fb{color:var(--green);font-weight:700;border:1px solid var(--line-green);border-radius:7px;padding:.3rem .65rem;background:rgba(29,95,74,.05)}
/* real product imagery card */
.engine-card{position:relative;border-radius:20px;overflow:hidden;background:#0c0d10;border:1px solid rgba(22,32,46,.25);box-shadow:0 34px 80px rgba(16,24,40,.35);display:flex;flex-direction:column;transition:transform .4s ease, box-shadow .4s ease}
.engine-card:hover{transform:translateY(-5px);box-shadow:0 44px 96px rgba(16,24,40,.45)}
.engine-card img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;flex:1;min-height:280px}
.engine-card .ec-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;background:linear-gradient(180deg,rgba(12,13,16,0),rgba(12,13,16,.92) 30%);position:absolute;left:0;right:0;bottom:0}
.engine-card .ec-bar b{color:#f0ede4;font-size:.92rem;font-weight:700}
.engine-card .ec-bar span{display:block;color:#9aa3b2;font-size:.76rem;margin-top:.15rem}
.engine-card .ec-go{flex-shrink:0;background:var(--green);color:#06121b;border-radius:8px;padding:.6rem 1rem;font-size:.82rem;font-weight:600;white-space:nowrap;box-shadow:0 10px 24px rgba(29,95,74,.4)}
/* numbers as artwork: consistent stat treatment */
.counter-band h2, .anchor .big{position:relative}
.counter-band h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-.18em;width:2.2ch;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--gold-bright,#c9a25c),transparent)}
/* nav micro-interaction: sliding underline */
.tabs a{border-bottom:none !important;position:relative}
.tabs a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--green);transition:right .28s ease}
.tabs a:hover::after,.tabs a.active::after{right:0}
/* card hover unification */
.pillar:hover,.bf-card:hover,.t-item:hover,.plan:hover{box-shadow:0 34px 78px rgba(22,32,46,.16)}
@media (prefers-reduced-motion:reduce){.engine-card,.engine-card:hover{transform:none}}
/* ============================================================
v10.1 — glow-ring card system + premium briefing card
============================================================ */
@property --tiga{syntax:'';initial-value:0deg;inherits:false}
.tiv10-glowring{position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:6;
background:conic-gradient(from var(--tiga) at 50% 50%,
transparent 0deg, transparent 55deg,
rgba(46,122,95,.5) 95deg, rgba(201,162,92,.45) 130deg,
transparent 175deg, transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
animation:tiga 9s linear infinite;opacity:.5;transition:opacity .4s}
*:hover > .tiv10-glowring{opacity:1}
.tiv10-glowring.glow-dark{background:conic-gradient(from var(--tiga) at 50% 50%,
transparent 0deg, transparent 55deg,
rgba(95,174,131,.7) 95deg, rgba(201,162,92,.6) 130deg,
transparent 175deg, transparent 360deg);opacity:.6}
@keyframes tiga{to{--tiga:360deg}}
@media (prefers-reduced-motion:reduce){.tiv10-glowring{animation:none;opacity:.3}}
/* premium briefing card */
.bf-card{border-radius:22px;padding:2.3rem 2.4rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 70px rgba(22,32,46,.12)}
.bf-card h3{font-size:clamp(1.3rem,2.1vw,1.65rem)}
.bf-date{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bf-metrics{display:flex;flex-wrap:wrap;gap:0;margin-top:1.5rem;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.bf-metrics span{background:none;border:none;border-radius:0;padding:.95rem 1.4rem .95rem 0;margin-right:1.4rem;border-right:1px solid var(--line-soft);font-size:.78rem;color:var(--muted)}
.bf-metrics span:last-child{border-right:none;margin-right:0}
.bf-metrics b{display:block;font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:.1rem}
.bf-foot{border-top:none;padding-top:1.2rem}
/* ============================================================
v10.2 — full-perimeter pulsing glow, hero live demo, waves
============================================================ */
/* glow ring v2: whole border lit, breathing, with a soft halo */
.tiv10-glowring{
background:conic-gradient(from 0deg,
rgba(46,122,95,.55), rgba(201,162,92,.45), rgba(46,122,95,.55),
rgba(201,162,92,.45), rgba(46,122,95,.55)) !important;
animation:tiPulse 4.6s ease-in-out infinite !important;
filter:drop-shadow(0 0 7px rgba(46,122,95,.4));
opacity:.55}
.tiv10-glowring.glow-dark{
background:conic-gradient(from 0deg,
rgba(95,174,131,.75), rgba(201,162,92,.6), rgba(95,174,131,.75),
rgba(201,162,92,.6), rgba(95,174,131,.75)) !important;
filter:drop-shadow(0 0 8px rgba(95,174,131,.5));
opacity:.6}
@keyframes tiPulse{0%,100%{opacity:.38}50%{opacity:.9}}
*:hover > .tiv10-glowring{opacity:1 !important}
@media (prefers-reduced-motion:reduce){.tiv10-glowring{animation:none !important;opacity:.4}}
/* gap scene: lift the headline off the chart lines */
.gap h2,.gap .gap-sub{text-shadow:0 1px 2px rgba(11,17,29,.85), 0 0 18px rgba(11,17,29,.9), 0 0 42px rgba(11,17,29,.75)}
.gap-facts span::before{display:none}
/* build dashboard: fill most of the page */
.mock-fit{width:min(1280px,95vw)}
/* hero: text left, live demo right */
@media (min-width:1241px){.hero-inner{max-width:51%}}
.hero::after{opacity:.4}
.hero-demo{position:absolute;right:2.6vw;top:50%;transform:translateY(-52%);width:min(620px,41vw);z-index:1}
@media (max-width:1240px){.hero-demo{display:none}}
.hd-frame{background:#0c0d10;border-radius:16px;overflow:hidden;border:1px solid rgba(22,32,46,.28);
box-shadow:0 26px 54px rgba(22,32,46,.24), 0 64px 130px rgba(22,32,46,.36)}
.hd-body{position:relative;aspect-ratio:16/10.4;background:#0c0d10}
.hd-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hd-cover{position:absolute;inset:0;display:block;width:100%;cursor:pointer;border:0;padding:0;background:#0c0d10;transition:opacity .5s ease}
.hd-cover img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:.94;display:block}
.hd-cover.gone{opacity:0;pointer-events:none}
.hd-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;
background:rgba(12,13,16,.84);border:1px solid rgba(95,174,131,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-radius:12px;padding:1rem 1.7rem;color:#f0ede4;transition:transform .3s ease, border-color .3s}
.hd-cover:hover .hd-cta{transform:translate(-50%,-52%);border-color:rgba(95,174,131,.8)}
.hd-cta b{font-weight:700;font-size:.98rem}
.hd-cta i{font-style:normal;font-size:.78rem;color:#8fd0ac}
.hd-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.05rem;font-size:.75rem;color:#7787a0;background:#0b111d}
.hd-foot a{color:#8fd0ac;font-weight:600}
.hd-foot a:hover{color:#c5edd6}
.fc1{right:calc(min(620px,41vw) + 2.2vw) !important;top:16% !important}
.fc2{right:2vw !important;bottom:6% !important}
/* briefing: single wide centrepiece */
.briefing-grid{grid-template-columns:1fr;max-width:880px;margin:0 auto}
/* founder photo */
.tb-photo{flex-shrink:0;width:116px;height:145px;object-fit:cover;border-radius:14px;
box-shadow:0 14px 30px rgba(16,24,40,.28);filter:grayscale(1) contrast(1.04)}
@media (max-width:900px){.tb-photo{width:96px;height:120px}}
/* hero headline: fit the narrower left column beside the live demo */
@media (min-width:1241px){
.hero h1{font-size:clamp(2.6rem,4.4vw,4.15rem);max-width:100%}
.hero .sub{max-width:46ch}
}
/* pin the narrowed hero column to the left grid edge (not centered) */
@media (min-width:1241px){
.hero-inner{margin-left:calc((100% - min(1180px, 92vw)) / 2);margin-right:auto}
}
@media (min-width:1241px){
.hero h1{font-size:clamp(2.5rem,4.15vw,3.9rem)}
}
@media (min-width:1241px){
.hero-inner{max-width:46%}
}
/* ============================================================
v10.3 — pipeline: big loop, glowing heads, month timeline
============================================================ */
#pipeTop{position:relative}
#pipeTop .hero,#pipeTop .loop-scene{background:none}
#pipeTop .hero::after{opacity:.5}
.loop-svgbox{width:min(640px,46vw) !important}
.loop-sticky{top:calc(50vh - 340px) !important;height:680px !important}
.loop-centre b{font-size:clamp(3rem,5.4vw,4.6rem) !important}
.loop-centre span{font-size:1rem !important}
.loop-centre i{font-size:.85rem !important;max-width:24ch !important}
.lp-node circle{r:20}
.lp-node text{font-size:11px}
.lp-node .nlbl{font-size:12.5px}
.lp-head{fill:#2e7a5f;filter:drop-shadow(0 0 10px rgba(46,122,95,.8))}
.lp-head::after{content:none}
@media (max-width:920px){.loop-svgbox{width:min(400px,86vw) !important}.loop-sticky{height:auto !important;top:0 !important}}
/* year strip: real months, glowing progress head, active emphasis */
.yhead{position:absolute;top:5.4rem;margin-top:-4px;margin-left:-5px;width:10px;height:10px;border-radius:50%;
background:#2e7a5f;box-shadow:0 0 12px rgba(46,122,95,.8), 0 0 0 3px rgba(46,122,95,.2);left:0;pointer-events:none}
@media (max-width:919px){.yhead{display:none}}
.ym{transition:opacity .4s, transform .45s ease}
.ym b{transition:color .3s, font-size .3s}
.ym.now{transform:translateY(-4px)}
.ym.now b{color:var(--green,#1d5f4a)}
.ym.now::before{box-shadow:0 0 10px rgba(29,95,74,.6)}
/* ============================================================
v10.4 — data page: integrated route, brand cards, constellation
============================================================ */
.route2{position:relative;padding:1.5rem 0 2.5rem}
.r2-wrap{overflow-x:auto}
.r2-wrap svg{min-width:980px;width:100%;height:auto;display:block;overflow:visible}
.r2c{fill:#fbf9f3;stroke:rgba(22,32,46,.14);stroke-width:1.2;filter:drop-shadow(0 10px 22px rgba(22,32,46,.08))}
.r2c.hot{stroke:rgba(29,95,74,.5);stroke-width:1.6;filter:drop-shadow(0 14px 30px rgba(29,95,74,.14))}
.r2c.out{fill:#f6f3ea}
.r2t{font-family:var(--display);font-weight:700;font-size:14.5px;fill:#16202e;text-anchor:middle}
.r2s{font-family:var(--sans,Inter);font-size:10.2px;fill:#4c5665;text-anchor:middle}
.r2file{fill:#f3f0e8;stroke:rgba(22,32,46,.12)}
.r2f{font-family:var(--sans,Inter);font-size:9.6px;fill:#4c5665;text-anchor:middle}
.r2l{fill:none;stroke:rgba(22,32,46,.28);stroke-width:1.5;stroke-dasharray:5 6}
.r2shield{fill:none;stroke:#1d5f4a;stroke-width:1.7}
.r2time{fill:rgba(176,137,60,.14);stroke:rgba(176,137,60,.4)}
.r2tt{font-family:var(--sans,Inter);font-weight:700;font-size:10px;fill:#8a6a1f;text-anchor:middle}
.r2d{fill:#1d5f4a;filter:drop-shadow(0 0 5px rgba(29,95,74,.7))}
.r2d.g{fill:#b0893c;filter:drop-shadow(0 0 5px rgba(176,137,60,.7))}
.r2-foot{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.r2-foot span{font-size:.82rem;color:var(--ink-dim);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.55rem 1rem}
.r2-foot b{color:var(--green);font-weight:700}
/* platform cards: brand-coloured logo + brand border */
.pcard{border:1.5px solid color-mix(in srgb, var(--brand, #16202e) 45%, transparent) !important;
box-shadow:0 10px 26px rgba(22,32,46,.06) !important}
.pcard:hover{border-color:var(--brand, #16202e) !important;
box-shadow:0 16px 36px color-mix(in srgb, var(--brand, #16202e) 22%, transparent) !important;transform:translateY(-4px)}
.pcard img{opacity:1 !important;width:30px;height:30px}
.pcard::after{display:none}
/* vet cards: clean bordered, no artefacts */
.vet .v{border:1.5px solid var(--line-green) !important;border-radius:16px;box-shadow:0 14px 34px rgba(22,32,46,.07)}
/* ============================================================
v10.5 — official logos + colour-orbit borders, breathing route,
pricing card upgrade
============================================================ */
/* platform cards: brand colours orbiting the border (no ring child) */
.pcard{border:1.6px solid transparent !important;
background:linear-gradient(180deg,#fdfcf8,#f8f6ef) padding-box,
var(--ring, conic-gradient(from var(--tiga), #16202e, #4c5665, #16202e)) border-box !important;
animation:tigaRot 9s linear infinite;box-shadow:0 10px 26px rgba(22,32,46,.07) !important}
.pcard:hover{box-shadow:0 18px 40px color-mix(in srgb, var(--brand, #16202e) 24%, transparent) !important;transform:translateY(-4px)}
.pcard img{width:32px;height:32px}
@keyframes tigaRot{to{--tiga:360deg}}
/* the route: bigger, breathing stages, marching current */
.route2 .wrap{width:min(1340px,96vw)}
.r2-wrap{background:radial-gradient(60% 75% at 50% 42%, rgba(29,95,74,.055), transparent 75%);border-radius:24px;padding:1.2rem .6rem}
.r2-wrap svg{min-width:1120px}
.r2t{font-size:16px}
.r2s{font-size:11px}
.r2f{font-size:10.4px}
.r2l{animation:r2march 1.3s linear infinite}
@keyframes r2march{to{stroke-dashoffset:-11}}
.r2stage rect.r2c{transition:filter .6s ease, stroke .6s ease}
.r2stage.live rect.r2c{stroke:rgba(29,95,74,.65);stroke-width:1.8;
filter:drop-shadow(0 14px 30px rgba(29,95,74,.2))}
.r2stage.live .r2t{fill:#1d5f4a}
@media (prefers-reduced-motion:reduce){.r2l{animation:none}.pcard{animation:none}}
/* pricing: bigger, popping, animated gradient borders, no artefacts */
.plan{border:1.6px solid transparent !important;
background:linear-gradient(180deg,#fdfcf8,#faf8f1) padding-box,
conic-gradient(from var(--tiga), rgba(29,95,74,.65), rgba(176,137,60,.55), rgba(29,95,74,.65)) border-box !important;
animation:tigaRot 8s linear infinite;
padding:2.4rem 2.1rem;box-shadow:0 26px 60px rgba(22,32,46,.12) !important}
.plan:hover{transform:translateY(-7px);box-shadow:0 38px 80px rgba(22,32,46,.18) !important}
.plan.feat{background:linear-gradient(160deg,#141d30,#101828) padding-box,
conic-gradient(from var(--tiga), rgba(95,174,131,.9), rgba(201,162,92,.8), rgba(95,174,131,.9)) border-box !important}
.plan .price b{font-size:3.1rem}
.plans{gap:1.4rem}
.plan .ribbon{z-index:9;top:-1.05rem}
.plan > .tiv10-glowring{display:none}
/* ============================================================
v11 — THE CALM PASS (Linear: "don't compete for attention
you haven't earned"). Subtraction layer: dim the chrome,
quiet the borders, spend animation on one subject per view.
============================================================ */
/* nav recedes so content leads; the active page + CTA keep ink */
.tabs a{color:var(--muted,#6b7280) !important;font-weight:500}
.tabs a.active,.tabs a:hover{color:var(--ink,#16202e) !important}
.tabs a::after{height:1.5px}
/* page rails + grain: quieter */
:root{--frame:rgba(22,32,46,.07)}
body::after{opacity:.02}
/* severity chips: smaller grammar, not badges shouting */
.sev{font-size:.64rem;padding:.26rem .52rem;letter-spacing:.11em;opacity:.85}
/* light cards: hierarchy from spacing + shadow, not drawn boxes */
.pillar,.t-item,.cnote,.col-card,.fstep,.t-card,.lstage-card,.sys{
border-color:rgba(22,32,46,.08) !important;
box-shadow:0 1px 2px rgba(22,32,46,.04), 0 12px 30px rgba(22,32,46,.05)}
.pillar:hover,.t-item:hover{box-shadow:0 1px 2px rgba(22,32,46,.05), 0 20px 44px rgba(22,32,46,.09)}
/* platform cards: quiet by default, the brand orbit is the hover reward */
.pcard{animation:none;
background:linear-gradient(180deg,#fdfcf8,#f8f6ef) padding-box,
linear-gradient(0deg, rgba(22,32,46,.12), rgba(22,32,46,.12)) border-box !important;
box-shadow:0 1px 2px rgba(22,32,46,.04), 0 10px 24px rgba(22,32,46,.05) !important}
.pcard:hover{animation:tigaRot 5s linear infinite;
background:linear-gradient(180deg,#fdfcf8,#f8f6ef) padding-box,
var(--ring, conic-gradient(from var(--tiga), #16202e, #4c5665, #16202e)) border-box !important;
box-shadow:0 18px 40px color-mix(in srgb, var(--brand, #16202e) 22%, transparent) !important}
/* pricing: the featured plan is the one animated object on the page */
.plan{animation:none;
background:linear-gradient(180deg,#fdfcf8,#faf8f1) padding-box,
linear-gradient(0deg, rgba(22,32,46,.13), rgba(22,32,46,.13)) border-box !important}
.plan.feat{animation:tigaRot 8s linear infinite;
background:linear-gradient(160deg,#141d30,#101828) padding-box,
conic-gradient(from var(--tiga), rgba(95,174,131,.9), rgba(201,162,92,.8), rgba(95,174,131,.9)) border-box !important}
/* glow ring survivors (bf-card, anchor): slower, softer breath */
.tiv10-glowring{animation-duration:6.5s !important;opacity:.42}
@keyframes tiPulse{0%,100%{opacity:.3}50%{opacity:.72}}
/* proof chips under the hero dashboard: calmer navy, no glow ring */
.chip{box-shadow:0 8px 20px rgba(16,24,40,.18)}
/* vet + route foot chips: hairline, not statement borders */
.vet .v{border-width:1px !important}
.r2-foot span{border-color:rgba(22,32,46,.1)}
@media (prefers-reduced-motion:reduce){.pcard:hover,.plan.feat{animation:none}}
/* ============================================================
v11.1 — THE PROOF LAYER: before/after contrast + beat strip
The one persuasion scene: drab spreadsheet vs finished morning.
============================================================ */
.contrast{padding:clamp(4.5rem,8vw,7rem) 0}
.ba-head{text-align:center;max-width:720px;margin:0 auto 2.8rem}
.ba-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.ba-head h2::after{content:"";display:block;width:2.4rem;height:3px;border-radius:2px;margin:1rem auto 0;
background:linear-gradient(90deg,var(--gold,#b0893c),transparent)}
.ba-head .lede{margin-top:1rem;color:var(--ink-dim)}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
@media (max-width:920px){.ba-grid{grid-template-columns:1fr}}
.ba-card{border-radius:20px;padding:1.9rem 2rem;display:flex;flex-direction:column;gap:1.1rem}
.ba-before{background:#efece3;border:1px solid rgba(22,32,46,.08)}
.ba-after{background:linear-gradient(180deg,#fdfcf8,#faf8f1);border:1px solid rgba(176,137,60,.28);
box-shadow:0 30px 70px rgba(22,32,46,.1);position:relative;overflow:hidden}
.ba-after::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--gold,#b0893c),transparent 60%)}
.ba-tag{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:fit-content}
.ba-tag-gold{color:#8a6a1f}
.ba-card h3{font-size:1.35rem;letter-spacing:-.02em}
.ba-before h3{color:#4c5665}
/* the drab sheet */
.ba-sheet{background:#f7f5ee;border:1px solid rgba(22,32,46,.1);border-radius:10px;overflow:hidden;
font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.72rem;color:#5d6673;filter:saturate(.4)}
.bs-bar{padding:.5rem .8rem;background:#e8e4d8;color:#6b7280;font-size:.66rem;border-bottom:1px solid rgba(22,32,46,.08)}
.bs-row{display:grid;grid-template-columns:.9fr 1fr .6fr 1.4fr;gap:.4rem;padding:.42rem .8rem;border-bottom:1px solid rgba(22,32,46,.06)}
.bs-head{font-weight:700;color:#4c5665;background:#f0ede3}
.bs-foot{padding:.45rem .8rem;font-size:.64rem;color:#8b93a0}
/* the finished briefing */
.ba-brief{background:#fff;border:1px solid var(--line-soft,rgba(22,32,46,.09));border-radius:12px;padding:1.15rem 1.3rem;
box-shadow:0 12px 30px rgba(22,32,46,.07)}
.bb-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.7rem}
.bb-date{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bb-lead{font-size:.92rem;line-height:1.6;color:var(--ink)}
.bb-sub{font-size:.85rem;line-height:1.6;color:var(--ink-dim);margin-top:.55rem}
.bb-foot{margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--line-soft,rgba(22,32,46,.08));
font-size:.72rem;color:var(--green,#1d5f4a);font-weight:600}
.ba-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.ba-list li{font-size:.88rem;color:var(--ink-dim);padding-left:1.1rem;position:relative}
.ba-list li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:2px;background:#aab0ba}
.ba-after .ba-list li::before{background:var(--green,#1d5f4a)}
/* minute-by-minute beat strip */
.beat-strip{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.6rem}
.beat{display:flex;flex-direction:column;gap:.2rem;background:var(--card,#fbf9f3);border:1px solid rgba(22,32,46,.09);
border-radius:12px;padding:.85rem 1.25rem;min-width:200px}
.beat b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.beat span{font-size:.78rem;color:var(--ink-dim)}
.beat-gold{border-color:rgba(176,137,60,.4);background:linear-gradient(180deg,#fdfbf4,#faf6ea)}
.beat-gold b{color:#8a6a1f;animation:beatGlow 3.2s ease-in-out infinite}
@keyframes beatGlow{0%,100%{text-shadow:none}50%{text-shadow:0 0 14px rgba(176,137,60,.45)}}
.beat-link{width:2.2rem;height:2px;flex-shrink:0;background:repeating-linear-gradient(90deg,#b9bfc9 0 5px,transparent 5px 9px)}
@media (max-width:720px){.beat-link{width:2px;height:1.2rem;background:repeating-linear-gradient(180deg,#b9bfc9 0 5px,transparent 5px 9px)}}
@media (prefers-reduced-motion:reduce){.beat-gold b{animation:none}}
/* ============================================================
v11.2 — structure pass: four moves in one row, colour-capped
============================================================ */
.pillars{grid-template-columns:repeat(4,1fr);gap:1.1rem}
.pillar{padding:1.8rem 1.5rem}
.pillar:nth-child(1) .p-step{background:#4c5665}
.pillar:nth-child(2) .p-step{background:var(--green,#1d5f4a)}
.pillar:nth-child(3) .p-step{background:#101828}
.pillar:nth-child(4) .p-step{background:var(--gold,#b0893c)}
@media (max-width:1100px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pillars{grid-template-columns:1fr}}
/* ============================================================
v11.3 — the briefing as a real artefact: an email window
============================================================ */
.mail-frame{position:relative;border-radius:18px;background:#fdfcf8;border:1px solid var(--line,rgba(22,32,46,.12));
box-shadow:0 34px 80px rgba(22,32,46,.14);overflow:hidden}
.mf-bar{display:flex;align-items:center;gap:.45rem;padding:.7rem 1.15rem;background:#f0ede3;
border-bottom:1px solid var(--line-soft,rgba(22,32,46,.08))}
.mf-bar i{width:9px;height:9px;border-radius:50%;background:#d9d5c9}
.mf-bar span{margin-left:.65rem;font-size:.78rem;font-weight:700;color:var(--ink-dim,#4c5665);letter-spacing:.02em}
.mf-bar b{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--muted,#8b8578);font-variant-numeric:tabular-nums}
.mf-meta{padding:.8rem 1.7rem;background:#fbf9f3;border-bottom:1px solid var(--line-soft,rgba(22,32,46,.08));
display:flex;flex-direction:column;gap:.28rem}
.mf-row{display:flex;gap:1.1rem;font-size:.82rem;color:var(--ink-dim,#4c5665)}
.mf-lbl{flex-shrink:0;width:3.8rem;color:var(--muted,#8b8578)}
.mf-row b{color:var(--ink,#16202e);font-weight:700}
.mail-frame .bf-card{box-shadow:none;border:none;border-radius:0}
.mail-frame .bf-card::before{display:none}
/* ============================================================
v11.5 — the three-hop data disclosure (data page)
============================================================ */
.hops{margin-top:2.2rem;background:linear-gradient(180deg,#fdfcf8,#faf8f1);border:1px solid rgba(22,32,46,.09);
border-left:3px solid var(--green,#1d5f4a);border-radius:16px;padding:1.7rem 1.9rem}
.hops h3{font-size:1.05rem;letter-spacing:-.015em;margin-bottom:1.1rem}
.hop-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:860px){.hop-row{grid-template-columns:1fr}}
.hop b{display:block;font-size:.9rem;color:var(--ink,#16202e);margin-bottom:.3rem}
.hop span{font-size:.84rem;line-height:1.6;color:var(--ink-dim,#4c5665)}
.hop-foot{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(22,32,46,.08);
font-size:.86rem;font-weight:600;color:var(--green,#1d5f4a)}
/* privacy: promise pair */
.promise-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:3rem}
@media (max-width:820px){.promise-pair{grid-template-columns:1fr}}
.pp{background:linear-gradient(180deg,#fdfcf8,#faf8f1);border:1px solid rgba(22,32,46,.09);border-left:3px solid var(--green,#1d5f4a);
border-radius:14px;padding:1.4rem 1.6rem}
.pp b{display:block;font-size:.98rem;color:var(--ink,#16202e);letter-spacing:-.015em;margin-bottom:.4rem}
.pp span{font-size:.87rem;line-height:1.65;color:var(--ink-dim,#4c5665)}
/* ============================================================
v11.6 — the context loop: the personalisation USP, stated
============================================================ */
.loop3{margin-top:2.6rem;border-top:1px solid rgba(22,32,46,.1);padding-top:2.2rem}
.l3-head h3{font-size:clamp(1.25rem,2.3vw,1.65rem);letter-spacing:-.02em}
.l3-head p{margin-top:.5rem;font-size:.95rem;color:var(--ink-dim,#4c5665);max-width:62ch}
.l3-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.5rem}
@media (max-width:880px){.l3-row{grid-template-columns:1fr}}
.l3{background:linear-gradient(180deg,#fdfcf8,#faf8f1);border:1px solid rgba(22,32,46,.09);
border-top:2px solid var(--green,#1d5f4a);border-radius:14px;padding:1.3rem 1.4rem}
.l3 b{display:block;font-size:.9rem;color:var(--ink,#16202e);margin-bottom:.4rem}
.l3 span{font-size:.86rem;line-height:1.65;color:var(--ink-dim,#4c5665)}
.l3-foot{margin-top:1.2rem;font-size:.88rem;line-height:1.7;color:var(--ink-dim,#4c5665);max-width:78ch}