/* TagoHealth: a quiet black-and-white brand, Apple greys, colour from photography and soft stage pastels. */
:root{
  --black:#000;--ink:#1d1d1f;--muted:#6e6e73;--grey:#737378;--line:#d2d2d7;--hair:#e8e8ed;--soft:#f5f5f7;--white:#fff;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --nav:64px;--pad:clamp(20px,6.1vw,88px);--radius:16px;
  --ease:cubic-bezier(.16,.8,.24,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p{margin:0}
h1,h2,.eyebrow{text-wrap:balance;text-wrap:pretty}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--black);color:#fff;padding:10px 16px;border-radius:6px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:1em;height:1em;fill:currentColor;flex-shrink:0;display:block}
.wrap{max-width:1600px;margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(88px,9.7vw,140px) 0}

/* Type */
.eyebrow{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.eyebrow-light{color:#ffffffb3}
h2.duo,h2.big{font-size:clamp(36px,4.03vw,60px);line-height:1.02;font-weight:500;letter-spacing:-.032em;margin-top:20px}
h2.duo .muted,h2.duo .muted span{color:var(--grey)}
.lede{font-size:clamp(17px,1.25vw,19px);line-height:1.5;color:var(--muted);max-width:540px;margin:24px 0 36px}
.tag{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.tag-light{color:#ffffffcc}
.tag-dark{color:#ffffff99}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.tag .dot{background:var(--black)}
.tag-light .dot,.tag-dark .dot{background:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:6px;font-size:15px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-solid{background:var(--black);color:#fff}
.btn-solid:hover{background:#333}
.btn-outline{border:1px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--black)}
.btn-white:hover{background:#e8e8ed}
.btn-ghost{border:1px solid #ffffffb3;color:#fff}
.btn-ghost:hover{background:#ffffff1f}
.btn-wide{width:100%;height:48px}

/* Nav: frosted white, like apple.com */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav);background:#ffffffd1;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid #0000000f}
.nav-inner{max-width:1600px;margin:0 auto;height:100%;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{display:inline-flex;align-items:center}
.logo img{height:24px;width:auto;display:block;filter:brightness(0)} /* black rendering of the blue Tago logo; remove the filter to show it in blue */
.nav-links{display:flex;gap:36px;font-size:14px;font-weight:500}
.nav-links a{color:var(--ink);opacity:.8;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.nav-actions .btn{height:36px;padding:0 16px;font-size:14px}
.menu{display:none;width:36px;height:36px;place-items:center;font-size:20px}

/* Header menus: a mega panel for use cases, small dropdowns for the rest */
.nav-links{gap:4px}
.menu-item{position:relative}
.menu-trigger{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);transition:background .2s}
.menu-trigger .caret{font-size:12px;transition:transform .3s var(--ease)}
.menu-trigger:hover,.menu-item.open .menu-trigger,.nav-links .nav-link:hover{background:#e8e8ed99}
.nav-links .nav-link{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);opacity:1;transition:background .2s}
.menu-item.open .caret{transform:rotate(180deg)}
.panel{position:absolute;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .35s var(--ease),visibility 0s .25s}
.menu-item.open .panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .35s var(--ease)}
.panel:before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px} /* hover bridge across the gap */
.nav-links .panel a{opacity:1}
/* Use cases mega panel */
.mega{position:fixed;top:calc(var(--nav) + 10px);left:var(--pad);right:var(--pad);max-width:1424px;margin:0 auto;padding:clamp(32px,3.3vw,48px);border-radius:24px;color:var(--ink);background:#fff;border:1px solid #0000000f;box-shadow:0 40px 90px #0000001f}
.mega:before{top:-24px;height:24px}
.mm-grid{display:grid;grid-template-columns:minmax(260px,1.1fr) repeat(3,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.nav-links .mm-feature{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.2vw,32px);border-radius:14px;background:var(--soft);color:var(--ink);transform-origin:center;will-change:transform;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.nav-links .mm-feature:hover{background:#ececf0;box-shadow:0 4px 10px #00000008}
.mm-feature b{font-size:clamp(22px,1.9vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.08}
.mm-feature small{font-size:14px;line-height:1.5;color:var(--muted)}
.mm-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:600}
.mm-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:28px}
.mm-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--soft);font-size:19px;color:var(--c)}
.mm-head b{display:block;font-size:16px;font-weight:600}
.mm-head small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.mm-col ul{list-style:none;margin:0;padding:0 0 0 50px;display:flex;flex-direction:column;gap:22px}
.nav-links .mm-col a{font-size:15px;font-weight:500;color:var(--ink);opacity:.85;transition:opacity .2s}
.nav-links .mm-col a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Hero */
.hero{position:relative;margin-top:var(--nav);padding-top:clamp(48px,9vh,96px);background:#fff;color:var(--ink);overflow:hidden}
.hero-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-head,.hero .wrap{position:relative;z-index:1}

.hero h1{font-size:clamp(38px,4.65vw,74px);line-height:1.06;font-weight:500;letter-spacing:-.04em;margin:20px 0 24px;max-width:1120px;text-wrap:balance;text-wrap:pretty}
.hero h1 .muted,.hero h1 .muted span{color:var(--grey)}
.hero h1 .muted{display:block;text-wrap:balance;text-wrap:pretty}.hero-sub{text-wrap:pretty}
.hero-sub{font-size:clamp(17px,1.39vw,20px);line-height:1.5;font-weight:400;max-width:720px;color:var(--muted)}
/* Product stage: a soft pastel backdrop with a sample Tago work queue on top */
.hero-stage{position:relative;margin-top:clamp(40px,6vh,64px);height:clamp(440px,44vw,640px);border-radius:28px;overflow:hidden;isolation:isolate}
.stage-art{position:absolute;inset:-10%;will-change:translate;z-index:-1;background:
  radial-gradient(42% 55% at 14% 22%,#cfe0ff 0%,#cfe0ff00 70%),radial-gradient(38% 50% at 86% 20%,#ffdcc8 0%,#ffdcc800 70%),
  radial-gradient(45% 55% at 58% 98%,#e3d8ff 0%,#e3d8ff00 70%),radial-gradient(30% 45% at 94% 88%,#cdeed8 0%,#cdeed800 70%),
  radial-gradient(35% 45% at 4% 92%,#ffe9d6 0%,#ffe9d600 70%),#f7f6fa;animation:stage-drift 26s ease-in-out infinite alternate}
@keyframes stage-drift{to{transform:translate3d(3%,-2%,0) scale(1.06) rotate(1.5deg)}}
.app{position:absolute;left:50%;top:clamp(36px,4.5vw,64px);bottom:-40px;width:min(1120px,90%);transform:translateX(-50%);transform-origin:50% 100%;will-change:transform;display:flex;flex-direction:column;background:#fff;border-radius:16px;border:1px solid #0000000f;box-shadow:0 30px 80px #2a1f4a1f,0 2px 8px #0000000a;overflow:hidden;font-size:13px;color:var(--ink);text-align:left}
.app-bar{display:flex;align-items:center;gap:20px;height:52px;padding:0 18px;border-bottom:1px solid var(--hair);flex-shrink:0}
.app-title{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
.app-title img{filter:brightness(0)}
.app-tabs{display:flex;gap:4px;margin-left:12px}
.app-tabs span{padding:5px 11px;border-radius:999px;color:var(--muted)}
.app-tabs span.on{background:var(--soft);color:var(--ink);font-weight:500}
.app-search{margin-left:auto;display:flex;align-items:center;gap:8px;width:220px;height:32px;padding:0 12px;border-radius:8px;background:var(--soft);color:var(--grey)}
.app-search .i{font-size:14px}
.app-body{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;flex:1;min-height:0}
.app-side{padding:18px 14px;border-right:1px solid var(--hair);background:#fcfcfd}
.app-label{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:4px 6px 10px}
.app-side ul{list-style:none;margin:0 0 22px;padding:0}
.app-side li{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;color:var(--muted)}
.app-side li.on{background:var(--soft);color:var(--ink);font-weight:500}
.app-side li i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.app-side li em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums;color:var(--grey)}
.app-stat{display:flex;align-items:baseline;gap:8px;padding:6px 8px}
.app-stat b{font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.app-stat span{color:var(--muted);font-size:12px}
.app-list{padding:6px 18px;overflow:hidden}
.app-row{display:grid;grid-template-columns:96px 100px minmax(0,1fr) 128px 76px;align-items:center;gap:12px;height:48px;padding:0 10px;border-bottom:1px solid #00000009;border-radius:8px;transition:background .3s}
.app-row.app-head{height:38px;color:var(--grey);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--hair);border-radius:0}
.app-row>*{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-row b{font-weight:500;font-variant-numeric:tabular-nums}
.app-row .muted{color:var(--muted)}
.app-row .when{color:var(--grey);font-size:12px}
.app-row.selected{background:#f4f6ff}
.app-row.enter{animation:row-in .6s var(--ease)}
@keyframes row-in{from{opacity:0;transform:translateY(-10px)}}
.pill{display:inline-flex;align-items:center;gap:6px;width:fit-content;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;transition:background .4s,color .4s}
.pill:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.checking{background:#f2f2f5;color:#6e6e73}
.pill.checking:before{animation:pulse 1.2s ease-in-out infinite}
.pill.person{background:#fff0e6;color:#a64c17}
.pill.done{background:#e7f6ec;color:#1f7a3d}
.pill.denied{background:#fdecec;color:#b42318}
@keyframes pulse{50%{opacity:.25}}
.app-row.touched{background:color-mix(in srgb,var(--c) 10%,#fff)}
.app-row.touched .pill.checking:before{background:var(--c)}
.app-detail{padding:18px 20px;border-left:1px solid var(--hair);display:flex;flex-direction:column}
.app-detail h4{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:0 6px}
.app-meta{color:var(--muted);font-size:12px;margin:4px 6px 18px}
.app-steps{list-style:none;margin:0;padding:0 6px;display:flex;flex-direction:column;gap:12px}
.app-steps li{position:relative;display:flex;gap:10px;animation:row-in .5s var(--ease)}
.app-steps li:not(:last-child):after{content:'';position:absolute;left:8px;top:22px;bottom:-12px;width:1px;background:var(--hair)}
.app-steps .dot{width:17px;height:17px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:10px;color:#fff;margin-top:1px}
.app-steps b{display:block;font-weight:500;line-height:1.35}
.app-steps small{display:block;color:var(--grey);font-size:11.5px;margin-top:2px}
.app-actions{display:flex;gap:8px;margin-top:auto;padding:16px 6px 52px}
.app-btn{height:32px;padding:0 14px;border-radius:7px;border:1px solid var(--line);display:inline-flex;align-items:center;font-weight:500}
.app-btn.dark{background:var(--black);border-color:var(--black);color:#fff;transition:transform .15s,background .15s}
.app-btn.dark.pressed{transform:scale(.94);background:#3a3a3c}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
/* Investors under the hero buttons; marks from Simple Icons, in ink */
.hero-backed{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.hero-backed span{display:inline-flex;align-items:center;gap:8px;font-family:Geist,-apple-system,sans-serif;font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.hero-backed svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}

/* Black band */
.band{background:var(--black);color:#fff;padding:34px 0;overflow:hidden}
.marquee{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:64px;animation:marquee 48s linear infinite}
.marquee-track span{font-size:22px;font-weight:500;letter-spacing:-.02em;color:#ffffff8c;white-space:nowrap}
@keyframes marquee{to{transform:translateX(calc(-50% - 32px))}}

/* Staircase: four stage cards, each a step higher (Abridge "impact" layout) */
.stairs-wrap{padding-bottom:clamp(40px,5vw,72px)}
.stairs{--step:clamp(28px,3.3vw,48px);display:grid;grid-template-columns:repeat(4,1fr);align-items:end;margin-top:clamp(56px,6.5vw,96px)}
.stair{position:relative;display:flex;flex-direction:column;gap:14px;min-height:clamp(250px,20.5vw,296px);padding:clamp(24px,3.2vw,46px);background:#fff;border:1px solid var(--hair);margin-left:-1px;transition:border-color .3s,box-shadow .4s}
.stair:nth-child(2){margin-bottom:var(--step)}
.stair:nth-child(3){margin-bottom:calc(var(--step) * 2)}
.stair:nth-child(4){margin-bottom:calc(var(--step) * 3)}
.stair:hover{z-index:1;border-color:var(--line);box-shadow:0 18px 48px #0000000f}
.stair h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.stair p{font-size:clamp(17px,1.39vw,20px);line-height:1.5;color:var(--muted)}
.stair-foot{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center}
.stair .tag{color:var(--ink)}
.stair .tag .dot{background:var(--c);width:8px;height:8px}
.stair-go{margin-left:auto;width:48px;height:48px;border-radius:6px;background:var(--soft);display:grid;place-items:center;font-size:18px;transition:background .25s,color .25s}
.stair-go:hover,.stair:hover .stair-go{background:var(--black);color:#fff}

/* Impact */
.impact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:stretch}
.impact-copy{display:flex;flex-direction:column;align-items:flex-start}
/* The problem: notes floating at depth over a soft photo, like Platform's stage (app.js). */
.layers{position:relative;isolation:isolate;overflow:hidden;height:clamp(520px,44vw,620px);border-radius:var(--radius);background:#d9d9de}
.layers-photo{position:absolute;inset:-40px;z-index:-2;background:url('problem.jpg?v=20261116i') 40% 55%/cover no-repeat;filter:blur(10px) brightness(1.32) saturate(.85);transform:scale(1.06)}
.layers:after{content:'';position:absolute;inset:0;z-index:-1;background:#ffffff70}
.layers-state{position:relative;display:flex;align-items:baseline;gap:16px;margin:0 0 14px;font-size:clamp(18px,1.45vw,21px);letter-spacing:-.015em;color:var(--ink)}
.layers-state>span{font-weight:500;transition:opacity .4s}
.layers-state .s-tago{position:absolute;left:0;opacity:0}
.layers-wrap.is-tago .s-today{opacity:0}
.layers-wrap.is-tago .s-tago{opacity:1}
.layers-state em{margin-left:auto;font-size:14px;letter-spacing:0;font-style:normal;color:var(--grey)}
.layers-state em b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.layers-notes{position:absolute;inset:0}
.note{position:absolute;left:var(--x);top:var(--y);width:clamp(176px,33%,220px);padding:12px 14px 11px;border-radius:14px;background:#ffffffd9;border:1px solid #ffffffb3;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 24px 64px #0000001f,0 2px 6px #0000000d;font-size:13px;opacity:0;transform-origin:center;will-change:transform,opacity;z-index:calc(var(--z) * 10);filter:blur(calc((1 - var(--z)) * 1.6px))}
.note p{margin:0}
.note-head{display:flex;justify-content:space-between;align-items:baseline}
.note-head b{font-weight:600;font-size:13px}
.note-head span{font-size:12px;color:var(--grey)}
.note-why{display:flex;align-items:flex-start;gap:7px;margin-top:8px!important;font-weight:500;line-height:1.35}
.note-why i{margin-top:6px}
.note-why i{width:6px;height:6px;border-radius:50%;background:#d93025;flex-shrink:0}
.note-hold .note-why i{background:#ff8a55}
.note-resub .note-why i{background:#86868b}
.note-ask{background:#fffdf6d9}
.note-ask .note-why{font-weight:400;font-style:italic}
.note-ask .note-why i{display:none}
.note-fix{margin-top:4px!important;font-size:12px;color:var(--grey)}
.kept-card{position:absolute;left:50%;top:50%;z-index:20;width:min(340px,82%);padding:20px 22px;border-radius:16px;background:#fff;border:1px solid #0000000d;box-shadow:0 30px 80px #0000002e,0 2px 8px #0000000d;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}
.kept-card p{margin:0}
.kept-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink)}
.kept-head .i{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--ink);fill:#fff}
.kept-rule{margin-top:12px!important;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.kept-note{margin-top:8px!important;font-size:13px;line-height:1.45;color:var(--muted)}
@media(max-width:640px){.layers{height:500px}.note{width:180px;padding:12px 13px}.note:nth-child(n+9){display:none}}

/* Pinned How it works (large screens): copy and tabs on the left, the model on the right; scroll
   turns the model from agent to agent (app.js). */
@media(min-width:900px) and (min-height:560px){
  .how{height:400vh;padding:0}
  .how>.wrap{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto;align-content:center;column-gap:clamp(40px,5vw,96px)}
  .how>.wrap>.eyebrow{grid-column:1;grid-row:1}
  .how h2.duo{grid-column:1;grid-row:2;font-size:clamp(30px,2.55vw,42px)}
  .how h2.duo .muted{display:block;text-wrap:balance;text-wrap:pretty}
  .how .how-visual{grid-column:2;grid-row:1/4;align-self:center;justify-self:end;width:100%;max-width:760px;height:min(640px,calc(100svh - var(--nav) - 12vh));margin:0}
  .how .how-grid{grid-column:1;grid-row:3;grid-template-columns:1fr;gap:0;margin-top:clamp(28px,5vh,48px)}
  /* Steps read like the problem section's tabs: hairlines, a colour dot, a progress line. */
  .how .steps li{border-top:1px solid var(--hair)}
  .how .steps li:last-child{border-bottom:1px solid var(--hair)}
  .how .steps button{position:relative;width:100%;gap:12px;padding:13px 0;font-size:16px;letter-spacing:-.01em}
  .how .steps button:after{content:'';position:absolute;left:0;top:-1px;height:2px;width:var(--p,0%);background:var(--c);transition:width .15s linear}
  .how .steps .spin{width:8px;height:8px}
  .how .steps .spin:before{inset:0;background:var(--c);opacity:.35}
  .how .steps button[aria-selected=true] .spin{border:0;animation:none}
  .how .steps button[aria-selected=true] .spin:before{opacity:1}
  .how .step-copy{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .35s ease}
  .how .step-copy>div{overflow:hidden;padding-left:20px}
  .how .steps button[aria-selected=true]+.step-copy{grid-template-rows:1fr;opacity:1;transition-delay:0s,.12s}
  .how .step-copy b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
  .how .step-copy p{font-size:15px;line-height:1.5;color:var(--muted);margin:4px 0 18px;max-width:440px}
  .how .how-detail{border-top:0;padding-top:28px}
  .how .how-detail h3,.how .how-detail p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Platform */
.center-head{text-align:center;max-width:860px;margin:0 auto}
.center-head .lede{margin:24px auto 0}
.stage{position:relative;margin-top:clamp(48px,5vw,72px);height:clamp(480px,40vw,580px);border-radius:var(--radius);overflow:hidden;background:#d9d9de}
.stage-bg{position:absolute;inset:-40px;background:url('team.jpg?v=20261116i') center/cover;filter:blur(16px) brightness(1.04) saturate(1.1);transform:scale(1.08)}
.stage:after{content:'';position:absolute;inset:0;background:#ffffff40}
.ui-card{position:absolute;z-index:1;width:clamp(270px,24vw,340px);padding:22px;border-radius:14px;background:#ffffffd9;border:1px solid #ffffffb3;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 24px 64px #0000001f,0 2px 6px #0000000d;font-size:14px;will-change:transform}
.ui-a{left:6%;top:calc(50% - 170px)}
.ui-b{left:50%;top:calc(50% - 205px);margin-left:calc(clamp(270px,24vw,340px)/-2)}
.ui-c{right:6%;top:calc(50% - 120px)}
.ui-head{display:flex;align-items:center;gap:10px}
.ui-head b{display:block;font-weight:600;font-size:14px}
.ui-head small{display:block;font-size:12px;color:var(--grey)}
.avatar{width:34px;height:34px;border-radius:50%;background:#ececf0;display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0}
.avatar .i{font-size:16px}
.avatar.dark{background:var(--black);color:#fff}
.ui-card h4{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:20px 0 6px}
.ui-list,.ui-checks{list-style:none;margin:0;padding:0}
.ui-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #0000000f}
.ui-list em{font-style:normal;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.ui-list em.warn{color:var(--muted)}
.ui-checks li{display:flex;align-items:center;gap:9px;padding:7px 0;color:var(--grey)}
.ui-checks li.done{color:var(--ink)}
.ui-checks li.flag{color:var(--ink);font-weight:500}
.ui-checks .i{font-size:15px}
.ui-pill{margin-top:16px;height:40px;padding:0 14px;border-radius:6px;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:space-between;font-weight:500}
.ui-money{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.ui-money small,.ui-variance span{font-size:12px;color:var(--grey)}
.ui-money b{display:block;font-size:22px;font-weight:500;letter-spacing:-.02em;margin-top:2px}
.ui-variance{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1px solid #0000000f}
.ui-variance b{font-weight:600}
.ui-note{font-size:12px;color:var(--grey);margin-top:14px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.3vw,48px);margin-top:clamp(48px,5vw,72px)}
.three h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:14px 0 10px}
.three p{font-size:15px;line-height:1.55;color:var(--muted)}

/* How it works */
.how h2.duo{max-width:900px}
/* Sample work logs, one per stage, on a soft wash in that stage's pastel (app.js sets data-i). */
.how-visual{position:relative;isolation:isolate;overflow:hidden;height:clamp(480px,52vw,600px);margin-top:clamp(32px,4vw,56px);border-radius:24px;background:#f7f6fa}
.how-wash i{position:absolute;inset:-20%;z-index:-1;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(50% 55% at 22% 18%,var(--c) 0%,transparent 70%),radial-gradient(45% 50% at 85% 90%,var(--c) 0%,transparent 70%)}
.how-visual[data-i="0"] .how-wash i:nth-child(1),.how-visual[data-i="1"] .how-wash i:nth-child(2),.how-visual[data-i="2"] .how-wash i:nth-child(3),.how-visual[data-i="3"] .how-wash i:nth-child(4){opacity:1}
.how-panels{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px,4vw,56px);perspective:1400px}
.log{position:relative;grid-area:1/1;width:min(470px,100%);padding:24px 26px 22px;border-radius:16px;background:#fff;border:1px solid #0000000d;box-shadow:0 30px 70px #2a1f4a14,0 2px 6px #0000000a;font-size:14px;transform-origin:50% 100%;transition:opacity .6s ease,transform .9s var(--ease),filter .6s ease,visibility 0s .6s}
/* Deck: the card before lifts away, the card after waits below, tipped back. Without JS, the first card shows. */
.log:not(:first-child){opacity:0;visibility:hidden}
.log.next{opacity:0;visibility:hidden;transform:translateY(80px) rotateX(-16deg) scale(.95);filter:blur(6px)}
.log.past{opacity:0;visibility:hidden;transform:translateY(-56px) scale(.92);filter:blur(6px)}
.log.active{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .6s ease .08s,transform .95s var(--ease) .08s,filter .6s ease .08s,visibility 0s}
/* The edge nearest the pointer catches the stage colour, with a faint sheen inside */
.log:before{content:'';position:absolute;inset:-1px;border-radius:17px;padding:1px;pointer-events:none;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,0%),var(--c),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s ease}
.log:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--c) 7%,transparent),transparent 70%);opacity:0;transition:opacity .5s ease}
.how-visual.lit .log.active:before,.how-visual.lit .log.active:after{opacity:1}
.log header{position:relative;display:flex;align-items:center;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.log header:after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:calc(var(--prog,1) * 100%);background:var(--c);transition:width .6s var(--ease)}
.log-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.log header b{font-weight:600}
.log-tag{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.log h4{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:18px 0 10px}
.log ol{list-style:none;margin:0;padding:0}
.log li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:8px 0 8px 26px;border-top:1px solid #0000000a;transition:background .35s ease}
.log li:first-child{border-top:0}
.log li:before{content:'';position:absolute;left:3px;top:calc(50% - 5.5px);width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--line);transition:background .3s,border-color .3s}
.log li.ok:before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 2px #fff}
.log li.human:before{border-color:var(--c);background:var(--c);box-shadow:inset 0 0 0 2px #fff}
.log li.run:before{border-color:var(--hair);border-top-color:var(--c);animation:spin .8s linear infinite}
.log li.wait:before{border-color:var(--c);animation:wait-ring 1.4s ease-out infinite}
@keyframes wait-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
.log li.wait{background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:-10px 0 0 color-mix(in srgb,var(--c) 7%,#fff),10px 0 0 color-mix(in srgb,var(--c) 7%,#fff)}
.log li span{color:var(--ink);transition:color .3s}
.log li.todo span{color:#b8b8bd}
.log li em{font-style:normal;font-size:13px;color:var(--grey);white-space:nowrap;animation:em-in .4s ease}
@keyframes em-in{from{opacity:0;transform:translateX(4px)}}
.log li.human em{color:var(--ink);font-weight:500}
.log-btn{height:28px;padding:0 12px;border-radius:7px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;transition:background .2s,transform .15s}
.log-btn:hover{background:#3a3a3c}
.log-btn.pressed{transform:scale(.93);background:#3a3a3c}
/* The reviewer's cursor: plain, labelled with their role */
.rv-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;will-change:transform}
.rv-cursor.on{opacity:1}
.rv-cursor svg{display:block;width:20px;height:20px;fill:var(--ink);stroke:#fff;stroke-width:14;paint-order:stroke;filter:drop-shadow(0 2px 3px #0000002e);transform-origin:20% 20%;transition:transform .15s ease}
.rv-cursor.press svg{transform:scale(.8)}
.rv-cursor span{position:absolute;left:16px;top:17px;white-space:nowrap;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid #0000000f;box-shadow:0 4px 12px #0000001a;font-size:11.5px;font-weight:500;color:var(--ink)}
.rv-cursor span:before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--ink);vertical-align:1px}
/* Each card's own picture of the work, driven by the run (app.js): [data-at] appears once that many steps are done, .warn marks what waits on a person, --sp is the strip's progress. */
.strip{margin:4px 0 12px}
.how-visual.live .strip [data-at]{transition:opacity .45s ease,transform .6s var(--ease),background .4s,border-color .4s,box-shadow .4s}
.how-visual.live .strip [data-at]:not(.on){opacity:0;transform:translateY(6px) scale(.94)}
.how-visual.live .strip mark[data-at]:not(.on){opacity:1;transform:none}
.strip .warn{border-color:var(--c)!important;background:color-mix(in srgb,var(--c) 9%,#fff)!important;animation:wait-ring 1.4s ease-out infinite}
/* Eligibility: the member card is scanned, then stamped */
.strip-elig{display:flex;gap:10px}
.ins{position:relative;overflow:hidden;flex:1;min-height:80px;padding:12px 14px;border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,#fff),#fff 72%);border:1px solid color-mix(in srgb,var(--c) 24%,#fff)}
.ins-2{flex:0 0 34%}
.ins-top b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.ins-top em{display:block;margin-top:3px;font:500 10.5px/1 var(--mono);font-style:normal;color:var(--grey)}
.ins-rows{display:flex;gap:6px;margin-top:14px}
.ins-rows i{flex:1;height:5px;border-radius:3px;background:#0000000d}
.ins-scan{position:absolute;top:0;bottom:0;left:0;width:45%;translate:calc(var(--sp,1) * 320% - 100%) 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 38%,transparent),transparent);opacity:calc(1 - var(--sp,1));pointer-events:none}
.ins-stamp{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:500}
.ins-stamp .i{font-size:11px}
/* Claims: the codes on the claim; the modifier waits for the coder */
.strip-codes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.code{display:inline-flex;align-items:baseline;gap:7px;height:32px;padding:0 12px;line-height:32px;border-radius:8px;border:1px solid var(--hair);background:#fafafa;font:500 13px/32px var(--mono)}
.code small{font:500 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.code-sent{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ink)}
.code-sent .i{width:16px;height:16px;padding:3px;border-radius:50%;background:var(--c);fill:#fff}
/* Denials: the remark code is marked, then the line runs to the appeal and the fix */
.strip-denial{display:flex;align-items:center}
.doc{flex:0 0 auto;padding:9px 12px;border-radius:9px;border:1px solid var(--hair);background:#fafafa}
.doc small{display:block;margin-bottom:4px;font:500 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.doc b{font-size:13px;font-weight:500;white-space:nowrap}
.doc mark{padding:1px 3px;border-radius:4px;color:inherit;background:transparent;transition:background .5s ease}
.doc mark.on,.how-visual:not(.live) .doc mark{background:color-mix(in srgb,var(--c) 30%,#fff)}
.flow{position:relative;flex:1;min-width:14px;height:1px;margin:0 8px;background:var(--hair)}
.flow i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c);transition:width .7s var(--ease)}
.flow:has(+ .doc.on) i,.how-visual:not(.live) .flow i{width:100%}
/* Payments: the received amount counts up against what was expected */
.strip-pay{padding:4px 0 6px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pay-row{display:grid;grid-template-columns:68px minmax(0,1fr) 86px;align-items:center;gap:12px;padding:7px 0}
.pay-row small{font-size:12px;color:var(--grey)}
.pay-row b{text-align:right;font-size:15px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bar{position:relative;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--ink)}
.bar .bar-recv{width:calc(var(--recv,1) * 95.16%);background:var(--c)}
.pay-var .bar{background:repeating-linear-gradient(90deg,var(--soft) 0 4px,transparent 4px 7px)}
.pay-var b{color:var(--c);filter:brightness(.8)}
.log-kept{transition:opacity .6s ease,transform .7s var(--ease);text-wrap:pretty;margin-top:14px;padding:13px 14px;border-radius:10px;background:var(--soft);font-size:13.5px;line-height:1.45;color:var(--muted)}
.how-visual.live .log-kept{opacity:0;transform:translateY(8px)}
.how-visual.live .log-kept.in{opacity:1;transform:none}
.log-kept b{display:block;margin-bottom:3px;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
@media(max-width:640px){.how-visual{height:auto;min-height:540px}.how-panels{position:relative;padding:20px 14px}.log{padding:20px 18px}.log li{gap:10px}.log li em{font-size:12px;white-space:normal;text-align:right}.log-tag{display:none}}
.how-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,5vw,80px);margin-top:clamp(32px,4vw,56px);align-items:start}
.steps{list-style:none;margin:0;padding:0}
.steps button{display:flex;align-items:center;gap:14px;padding:10px 0;font-size:clamp(20px,1.67vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--grey);transition:color .3s}
.steps button[aria-selected=true]{color:var(--ink)}
.spin{width:14px;height:14px;border-radius:50%;position:relative;flex-shrink:0}
.spin:before{content:'';position:absolute;inset:4px;border-radius:50%;background:currentColor;transition:opacity .3s}
.steps button[aria-selected=true] .spin{border:1.6px solid #d2d2d7;border-top-color:var(--c,var(--black));animation:spin 1s linear infinite}
.steps button[aria-selected=true] .spin:before{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}
.step-copy{display:none}
.how-detail{border-top:1px solid var(--hair);padding-top:24px}
.how-detail h3{font-size:clamp(22px,1.8vw,26px);font-weight:500;letter-spacing:-.02em}
.how-detail p{font-size:17px;line-height:1.55;color:var(--muted);margin:12px 0 28px;max-width:560px}

/* Who it's for */
.who{padding-top:0}
.who .three{margin-top:clamp(40px,4.5vw,64px)}

/* Principles */
.principles-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:clamp(56px,6vw,88px);max-width:560px}
.stats strong{display:block;font-size:clamp(56px,5vw,72px);font-weight:400;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:18px;font-weight:500;color:var(--grey);margin-top:8px}
.black-card{background:var(--black);color:#fff;border-radius:var(--radius);padding:clamp(24px,2.5vw,36px);display:flex;flex-direction:column;gap:32px;min-height:560px;justify-content:space-between}
.black-art{flex:1;display:flex;align-items:center;justify-content:center;min-height:260px}
.black-art span{width:clamp(130px,11vw,170px);aspect-ratio:1;border-radius:50%;border:1px solid #ffffff38;display:grid;place-items:center;font-size:44px;background:radial-gradient(circle at 30% 25%,#ffffff1f,#0000 60%)}
.black-art span+span{margin-left:-28px;background:radial-gradient(circle at 30% 25%,#ffffff33,#ffffff08 70%);color:#fff}
.black-art span:first-child{color:#ffffff8c}
.black-card h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.black-card p{font-size:15px;line-height:1.55;color:#ffffffa6;margin-top:10px;max-width:460px}
.black-foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px}
.square{width:40px;height:40px;border:1px solid #ffffff4d;border-radius:6px;display:grid;place-items:center;font-size:16px;transition:background .25s}
.square:hover{background:#ffffff1f}

/* CTA */
.cta-wrap{padding-top:0}
.cta{position:relative;border-radius:var(--radius);overflow:hidden;min-height:clamp(520px,50vw,720px);color:#fff;background:#222;display:flex;align-items:flex-end}
.cta-media{position:absolute;inset:0;background:url('review.jpg?v=20261116i') center 35%/cover;will-change:transform}
.cta:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000000b3 0%,#00000059 45%,#0000 75%),linear-gradient(0deg,#00000073,#0000 50%)}
.cta-copy{position:relative;z-index:1;padding:clamp(24px,3.3vw,48px);max-width:640px}
.cta h2{font-size:clamp(30px,3.06vw,46px);line-height:1.08;font-weight:500;letter-spacing:-.03em}
.cta p{font-size:18px;color:#ffffffcc;margin-top:14px}
.cta .hero-actions{margin-top:28px}

/* Footer */
.footer{border-top:1px solid var(--hair);padding:clamp(64px,6vw,96px) 0 32px}
.footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.monogram{display:block;width:auto;height:clamp(110px,12.5vw,190px);filter:brightness(0)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(140px,auto));gap:clamp(32px,5vw,80px)}
.footer-cols h4{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.footer-cols a,.footer-cols button{display:block;font-size:15px;margin:10px 0;color:var(--ink);text-align:left}
.footer-cols a:hover,.footer-cols button:hover{color:var(--grey)}
/* Compliance seals */
.compliance{display:flex;align-items:center;gap:clamp(20px,3vw,40px);margin-top:clamp(48px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--hair)}
.badges{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.badge{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.badge-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-size:20px;color:var(--ink)}
.badge b{display:block;font-size:15px;font-weight:600}
.badge small{display:block;font-size:12px;color:var(--muted)}
.compliance p{font-size:15px;line-height:1.55;color:var(--muted);max-width:420px}
.compliance p b{display:block;color:var(--ink);font-weight:600}
.footer-note{font-size:13px;line-height:1.55;color:var(--grey);max-width:640px;margin-top:28px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--grey);border-top:1px solid var(--hair);margin-top:24px;padding-top:24px}

/* Dialog */
dialog{width:calc(100% - 32px);max-width:480px;max-height:92dvh;overflow:auto;padding:36px;border:0;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 40px 100px #00000033,0 2px 8px #0000000f}
dialog::backdrop{background:#0000004d;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog[open]{animation:dialog-in .45s var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
dialog .close{position:absolute;top:18px;right:18px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--muted);transition:background .2s,color .2s}
dialog .close:hover{background:var(--soft);color:var(--ink)}
dialog h2{font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:12px 0 8px}

/* Enquiry: a quiet panel on the left says what happens next; the form on the right.
   The dialog stays within the viewport. The form column scrolls, including on a short phone,
   where the left panel is hidden and the fields would otherwise be clipped. */
dialog.enquiry{max-width:980px;padding:0;overflow:hidden;max-height:92vh;max-height:92svh;max-height:92dvh}
dialog.enquiry[open]{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr);max-height:92vh;max-height:92svh;max-height:92dvh;overflow:hidden}
.enquiry-art{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:32px 34px 30px;background:var(--soft);border-right:1px solid var(--hair)}
.enq-mark{width:28px;height:28px;object-fit:contain;filter:brightness(0)}
.enq-head{font-size:24px;line-height:1.08;font-weight:500;letter-spacing:-.03em}
.enq-head span{color:var(--grey)}
.enq-backed{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.enq-backed span{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.enq-backed svg{width:14px;height:14px;fill:currentColor}
.enquiry-body{display:flex;flex-direction:column;min-height:0;max-height:100%;padding:32px 40px 32px;overflow:auto;-webkit-overflow-scrolling:touch}
.enquiry-intro>p{font-size:15px;line-height:1.5;color:var(--muted);max-width:440px}
.enquiry form{display:grid;gap:18px;margin-top:26px}
.enquiry form[hidden],.enquiry-done[hidden]{display:none}
.enquiry.is-sent .enquiry-body{justify-content:center}
.enquiry.is-sent .enquiry-intro{display:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label,.enq-chips legend{display:block;margin:0 0 7px;font-size:13px;font-weight:500;color:var(--ink)}
.field label span,.enq-chips legend span{color:var(--grey);font-weight:400}
.enquiry input:not([type=radio]),.enquiry textarea{display:block;width:100%;height:42px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s}
.enquiry textarea{height:auto;min-height:84px;padding:11px 13px;line-height:1.45;resize:vertical}
.enquiry input::placeholder,.enquiry textarea::placeholder{color:#a1a1a6}
.enquiry input:not([type=radio]):hover,.enquiry textarea:hover{border-color:#b9b9be}
.enquiry input:not([type=radio]):focus,.enquiry textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #1d1d1f12}
.enquiry input.bad,.enquiry input.bad:focus{border-color:#d93025;box-shadow:0 0 0 3px #d930251a}
.enq-chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.enq-chips legend{float:left;width:100%;padding:0}
.enq-chips label{position:relative;cursor:pointer}
.enq-chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.enq-chips label span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.enq-chips label:hover span{border-color:#b9b9be;color:var(--ink)}
.enq-chips input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.enq-chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.enquiry .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enquiry .feedback{margin:-4px 0;font-size:14px;color:#c5221f}
.enquiry .feedback:empty{display:none}
.enquiry .btn-wide{width:100%;height:46px;margin-top:4px}
.enquiry .btn-wide .i{transition:transform .3s var(--ease)}
.enquiry .btn-wide:hover .i{transform:translateX(3px)}
.enquiry .btn-wide:disabled{opacity:.6;cursor:default}
.enquiry-done{display:flex;flex-direction:column;align-items:flex-start}
.done-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:20px;animation:done-in .6s var(--ease)}
@keyframes done-in{from{opacity:0;transform:scale(.8)}}
.enquiry-done h2{margin-top:22px}
.enquiry-done p{font-size:15px;color:var(--muted);margin:6px 0 26px}
@media(max-width:760px){dialog.enquiry[open]{grid-template-columns:minmax(0,1fr);height:auto;max-height:92vh;max-height:92svh;max-height:92dvh}.enquiry-art{display:none}.enquiry-body{min-height:0;max-height:92vh;max-height:92svh;max-height:92dvh;padding:48px 20px 24px;overflow:auto;-webkit-overflow-scrolling:touch}.form-row{grid-template-columns:1fr}.enquiry form{gap:16px}}
dialog>p{font-size:15px;color:var(--muted)}
.feedback{font-size:14px;color:var(--muted);margin-top:12px}

/* Tablet & phone */

@media(max-width:1080px){.nav-links{gap:24px}
.ui-a{left:3%}.ui-c{right:3%}
}
@media(max-width:900px){:root{--nav:56px}
.app-body{grid-template-columns:minmax(0,1fr)}
.app-side,.app-detail,.app-tabs{display:none}
.app-row{grid-template-columns:90px minmax(0,1fr) 120px}
.app-row>:nth-child(2),.app-row>:nth-child(5){display:none}
.app{width:94%}
.nav-inner{grid-template-columns:1fr auto}
.nav-links{display:none;position:absolute;top:var(--nav);left:0;right:0;flex-direction:column;gap:0;padding:8px var(--pad) 20px;background:#fffffff5;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--hair);font-size:17px}
.nav-links.open{display:flex}
.menu-item{border-bottom:1px solid var(--hair)}
.nav-links .nav-link{width:100%;height:52px;padding:0;border-radius:0;font-size:17px;border-bottom:1px solid var(--hair)}
.nav-links .nav-link:hover{background:none}
.menu-trigger{width:100%;justify-content:space-between;height:52px;padding:0;border-radius:0;font-size:17px}
.menu-trigger:hover,.menu-item.open .menu-trigger{background:none}
.panel,.mega{position:static;display:none;opacity:1;visibility:visible;transform:none;width:auto;max-width:none;margin:0;padding:0 0 14px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.menu-item.open .panel{display:block}
.panel:before,.mm-feature{display:none}
.mm-col ul{padding:12px 0 6px 48px;gap:12px}
.mm-grid{display:block;margin:0}
.mm-col{padding:8px 0}
.mm-head{margin:0}
.mm-head small{color:var(--muted)}
.nav-links .mm-col a{padding:0;border:0;color:var(--ink)}

.nav-links{max-height:calc(100svh - var(--nav));overflow-y:auto;background:#fff}
.nav-signin{display:none!important}
.menu{display:grid}
.impact-grid,.principles-grid,.how-grid{grid-template-columns:1fr}
.stage{height:auto;padding:24px;display:flex;flex-direction:column;gap:16px;align-items:center}
.ui-card{position:relative;inset:auto;margin:0!important;width:100%;max-width:400px;transform:none!important}
.three{grid-template-columns:1fr}
.stairs{grid-template-columns:1fr 1fr;row-gap:0}
.stair:nth-child(n){margin-bottom:0}
.stair:nth-child(odd){margin-left:0}
.stair:nth-child(n+3){margin-top:-1px}
.black-card{min-height:0}
.footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){.hero{padding-top:40px}
.hero-stage{height:420px;border-radius:20px}
.app-search{display:none}
.app-row{grid-template-columns:minmax(0,1fr) 116px}
.app-row>:nth-child(3){display:none}
.compliance{flex-direction:column;align-items:flex-start}
.stairs{grid-template-columns:1fr}
.stair{margin-left:0;min-height:0}
.stair+.stair{margin-top:-1px}
.hero-actions .btn{flex:1}
.stats{grid-template-columns:1fr 1fr;gap:20px}
.cta{min-height:560px}
.cta h2 br{display:none}
.monogram{height:96px}
.footer-cols{grid-template-columns:1fr 1fr}
dialog{padding:28px 20px}
}

/* Motion */
.split-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split-word>span{display:inline-block}
.motion .hero-stage{opacity:0;transform:translateY(48px)}
.motion.is-ready .hero-stage{opacity:1;transform:none;transition:opacity 1.1s ease .7s,transform 1.4s var(--ease) .7s}
.motion .hero .eyebrow,.motion .hero-sub,.motion .hero .hero-actions,.motion .hero-backed{opacity:0;transform:translateY(16px)}
.motion.is-ready .hero .eyebrow,.motion.is-ready .hero-sub,.motion.is-ready .hero .hero-actions,.motion.is-ready .hero-backed{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.motion [data-split] .split-word>span{transform:translateY(105%)}
.motion [data-split].is-in .split-word>span{transform:none;transition:transform 1s var(--ease) var(--d,0s)}
.motion [data-reveal]{opacity:0;transform:translateY(28px)}
.motion [data-reveal].is-in{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}

/* Keep the platform promise legible as one composition on narrow screens. */
@media(max-width:640px){.hero h1{font-size:clamp(34px,8.8vw,48px);line-height:1.08;max-width:540px}.hero-sub{font-size:16px;max-width:440px}.hero-head>.eyebrow{font-size:10px;line-height:1.5;letter-spacing:.06em}.hero .hero-actions{width:100%;max-width:370px;gap:10px}.hero .hero-actions .btn{font-size:13px;padding-left:13px;padding-right:13px}}
@media(max-width:640px){.strip-elig{flex-direction:column}.ins-2{flex:auto;min-height:0}.doc{padding:8px 9px}.doc b{font-size:12px}.flow{margin:0 4px;min-width:8px}.pay-row{grid-template-columns:60px minmax(0,1fr) 78px;gap:8px}}

/* Pinned How it works on short laptop windows: tighter left column, so the card keeps its room. */
@media(min-width:900px) and (min-height:560px) and (max-height:760px){
  .how h2.duo{font-size:clamp(28px,2.4vw,36px);margin-top:12px}
  .how .how-grid{margin-top:20px}
  .how .steps button{padding:10px 0;font-size:15px}
  .how .step-copy p{display:none}
  .how .step-copy b{margin-bottom:10px}
  .how .how-detail{padding-top:18px}
  .how .how-visual{height:calc(100svh - var(--nav) - 40px)}
}
@media(min-width:900px) and (min-height:560px) and (max-height:640px){.how .how-detail .btn{display:none}}

/* Pinned How it works below 900px: heading, a row of stage pills, then the card filling the rest
   of the screen (app.js scales the card down if it doesn't fit). */
@media(max-width:899px) and (min-height:560px){
  .how{height:400vh;padding:0}
  .how>.wrap{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:flex;flex-direction:column;padding-top:18px;padding-bottom:14px}
  .how h2.duo{font-size:clamp(24px,6vw,34px);line-height:1.08;margin-top:10px}
  .how .how-grid{order:2;display:block;margin-top:14px}
  .how .how-visual{order:3;flex:1;min-height:0;height:auto;margin-top:12px;border-radius:20px}
  .how .how-panels{position:absolute;inset:0;padding:12px}
  .how .steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
  .how .steps::-webkit-scrollbar{display:none}
  .how .steps li{flex-shrink:0}
  .how .steps button{position:relative;overflow:hidden;height:34px;gap:8px;padding:0 13px;border:1px solid var(--hair);border-radius:999px;font-size:14px;letter-spacing:-.005em}
  .how .steps button[aria-selected=true]{border-color:var(--ink)}
  .how .steps button:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);background:var(--c)}
  .how .steps .spin{width:7px;height:7px}
  .how .steps .spin:before{inset:0;background:var(--c);opacity:.4}
  .how .steps button[aria-selected=true] .spin{border:0;animation:none}
  .how .steps button[aria-selected=true] .spin:before{opacity:1}
  .how .step-copy{display:none}
  .how .how-detail{border:0;padding:0}
  .how .how-detail h3,.how .how-detail p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .how .how-detail .btn{display:none}
}

/* Card detail: live status, a logged footer, and the deck's edges showing underneath. */
.log.active{box-shadow:0 30px 70px #2a1f4a17,0 2px 6px #0000000a,0 10px 0 -5px #ffffffc7,0 10px 1px -4px #0000000a,0 20px 0 -10px #ffffff80,0 20px 1px -9px #00000008}
.log-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .3s,color .3s}
.log-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.log-status[data-s=run]:before{background:var(--c);animation:pulse 1.1s ease-in-out infinite}
.log-status[data-s=wait]{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--ink)}
.log-status[data-s=wait]:before{background:var(--c);animation:pulse .8s ease-in-out infinite}
.log-status[data-s=done]{background:var(--ink);color:#fff}
.log-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--hair);font:500 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.log-foot span{display:inline-flex;align-items:center;gap:6px}
.log-foot .i{font-size:12px}
.log-count:empty{display:none}

/* Background detail: a faint dot grid, and the systems each stage works in, lit while in use. */
.how-visual:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#1d1d1f24 1px,transparent 1.2px);background-size:20px 20px;-webkit-mask-image:radial-gradient(75% 70% at 50% 50%,transparent 30%,#000 100%);mask-image:radial-gradient(75% 70% at 50% 50%,transparent 30%,#000 100%);opacity:.7}
.how-srcs{position:absolute;inset:0;pointer-events:none}
.src-set{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.how-visual[data-i="0"] .src-set:nth-child(1),.how-visual[data-i="1"] .src-set:nth-child(2),.how-visual[data-i="2"] .src-set:nth-child(3),.how-visual[data-i="3"] .src-set:nth-child(4){opacity:1;transition-delay:.15s}
.src{position:absolute;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:#ffffffb3;border:1px solid #ffffff;box-shadow:0 6px 18px #2a1f4a0f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--grey);white-space:nowrap;transition:color .4s,background .4s,transform .6s var(--ease);animation:src-bob 7s ease-in-out infinite}
.src i{width:6px;height:6px;border-radius:50%;background:#c7c7cc;transition:background .4s}
.src.used{color:var(--ink)}
.src.used i{background:var(--ink)}
.src.busy{background:#fff;transform:scale(1.06)}
.src.busy i{background:var(--c,var(--ink));box-shadow:0 0 0 4px #ffffff;animation:pulse .9s ease-in-out infinite}
.src-set:nth-child(1){--c:#5b9bff}.src-set:nth-child(2){--c:#9b7bff}.src-set:nth-child(3){--c:#3cbf6a}.src-set:nth-child(4){--c:#ff8a55}
.src:nth-child(1){left:4%;top:9%}
.src:nth-child(2){left:2.5%;bottom:13%;animation-delay:-2.5s}
.src:nth-child(3){right:3%;top:46%;animation-delay:-5s}
@keyframes src-bob{50%{translate:0 -5px}}
@media(max-width:1180px){.how-srcs{display:none}}
/* System pills float over the card's edge rather than hiding behind it; smaller, so they only
   cover its padding. Hidden where the margins get too narrow. */
.how-srcs{z-index:2}
.src{height:26px;padding:0 10px;gap:6px;font-size:10px}
.src:nth-child(1){left:2%;top:7%}
.src:nth-child(2){left:1.5%;bottom:10%}
.src:nth-child(3){right:1.5%;top:44%}
@media(max-width:1320px){.how-srcs{display:none}}
.log-btn{white-space:nowrap}
@media(max-width:899px) and (min-height:560px){.how .steps{position:relative}}

/* "+8 more": the four stages shown are a start; this opens the full list of workflows. */
.how-more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;line-height:1.4;color:var(--muted);text-align:left;transition:color .2s}
.how-more-n{flex-shrink:0;display:inline-grid;place-items:center;height:24px;padding:0 9px;border-radius:999px;border:1px dashed #b9b9be;font:500 11px/1 var(--mono);color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.how-more .i{flex-shrink:0;font-size:13px;transition:transform .3s var(--ease)}
.how-more:hover{color:var(--ink)}
.how-more:hover .how-more-n{border-style:solid;border-color:var(--ink);background:var(--ink);color:#fff}
.how-more:hover .i{transform:translateX(3px)}
@media(min-width:900px) and (min-height:560px) and (max-height:640px){.how .how-more{display:none}}
@media(max-width:899px) and (min-height:560px){.how .how-more{display:none}}
@media(min-width:900px) and (min-height:560px) and (max-height:760px){.how .how-panels{padding:14px 20px}}
.impact-grid{align-items:center}

/* Who we serve has four audiences */
.who .who-four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.who .who-four{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.who .who-four{grid-template-columns:1fr}}

/* Enquiry panel gradient (enquiry.js): behind the steps and headline, fading in once drawing */
.enquiry-art{isolation:isolate;overflow:hidden}
.enq-glow{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.enq-glow.on{opacity:1}
.enquiry-art>:not(.enq-glow){position:relative;z-index:1}

/* ---------- Subpages (practices, groups, msos, trust) ----------
   Built like Abridge's product pages: a centered header over a full-width sample product window, a
   one-line statement, numbered chapters (copy beside a large agent-tinted UI mock), a photo beside
   a roles accordion, three reasons, questions, the other audiences and a photo CTA. Same type,
   buttons, nav and footer as the home page; all names and amounts are labelled samples. */

/* Nav: small dropdown for Who we serve; the current page stays highlighted */
.drop{top:calc(100% + 10px);left:50%;translate:-50% 0;width:340px;padding:8px;border-radius:18px;background:#fff;border:1px solid #0000000f;box-shadow:0 30px 70px #0000001f}
.nav-links .drop a{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:12px;transition:background .2s}
.nav-links .drop a:hover,.nav-links .drop a[aria-current]{background:var(--soft)}
.drop .mm-icon{width:32px;height:32px;font-size:17px;color:var(--ink);background:var(--soft)}
.nav-links .drop a:hover .mm-icon,.nav-links .drop a[aria-current] .mm-icon{background:#fff}
.drop b{display:block;font-size:15px;font-weight:600}
.drop small{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:3px;font-weight:400}
.nav-links .nav-link[aria-current]{background:#e8e8ed99}

/* Home page links into the subpages: Who we serve cards and a four-column footer */
.who-card{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:4px}
.who-card .mm-link{margin-top:18px;color:var(--ink)}
.who-card .mm-link .i{transition:transform .3s var(--ease)}
.who-card:hover .mm-link .i{transform:translateX(4px)}
.who-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.footer-cols{grid-template-columns:repeat(4,minmax(130px,auto))}
.principles .hero-actions{margin-top:0}

/* Header: centered, then the product window (reuses .hero-stage and .app from the home page) */
.page-hero{margin-top:var(--nav);padding-top:clamp(44px,7vh,88px);overflow:hidden;overflow:clip visible}
.page-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.page-hero h1{font-size:clamp(40px,4.65vw,74px);line-height:1.04;font-weight:500;letter-spacing:-.04em;margin:22px 0 24px;max-width:1040px;text-wrap:balance;text-wrap:pretty}
.page-hero h1 .muted,.page-hero h1 .muted span{color:var(--grey)}
.page-hero .lede{margin:0 auto;max-width:660px;text-wrap:pretty}
.page-hero .hero-actions{justify-content:center;margin-top:34px}
/* The window sizes to its rows and runs off the bottom of the band, like the home page */
.page-hero .hero-stage{height:auto;padding-top:clamp(36px,4.5vw,64px)}
.page-hero .app{position:relative;left:auto;top:auto;bottom:auto;transform:none;margin:0 auto -40px}
.page-hero .app-body{grid-template-columns:196px minmax(0,1fr) 280px}
.page-hero .app-row:not(.mx){grid-template-columns:62px 92px minmax(0,1fr) 124px 62px}
.app-row.settled{animation:row-in .6s var(--ease)}
/* MSO window: practices down, workflows across */
.app-row.mx{grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr))}
.app-row.mx.app-head .mh-short{display:none}
.cell{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.cell:before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid var(--c);box-sizing:border-box}
.cell.live{color:var(--ink);font-weight:500}
.cell.live:before{background:var(--c)}
.cell.next{color:var(--grey)}
.cell.next:before{border-color:var(--line);border-style:dashed}

/* Statement under the window */
.statement{text-align:center;max-width:1040px;margin:0 auto}
.statement h2{font-size:clamp(32px,3.6vw,56px);line-height:1.06;font-weight:500;letter-spacing:-.035em;margin-top:20px;text-wrap:balance;text-wrap:pretty}
.statement h2 .muted,.statement h2 .muted span{color:var(--grey)}
.statement h2 .muted{display:block}
.statement .lede{margin:24px auto 0;max-width:620px}

/* Chapters: one bordered block, one row per agent, copy beside a tinted UI mock */
.chapters{margin-top:clamp(48px,5vw,80px);border:1px solid var(--hair);border-radius:28px;overflow:hidden}
.chapter{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,88px);padding:clamp(24px,3.6vw,56px);align-items:center}
.chapter+.chapter{border-top:1px solid var(--hair)}
.chapter:nth-child(even) .ch-copy{order:2}
.ch-copy{padding:clamp(0px,1vw,16px)}
.ch-count{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ch-count i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.chapter h3{font-size:clamp(28px,2.7vw,42px);font-weight:500;letter-spacing:-.035em;line-height:1.06;margin:22px 0 18px;text-wrap:balance}
.ch-copy p{font-size:17px;line-height:1.55;color:var(--muted);max-width:460px}
.ch-tasks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ch-tasks li{height:32px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid var(--hair);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink)}
.ch-art{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;min-height:clamp(400px,34vw,520px);display:grid;place-items:center;padding:clamp(28px,3.5vw,56px)}
.ch-art:before{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 55% at 16% 12%,color-mix(in srgb,var(--c) 14%,#fff) 0%,#fff0 70%),
  radial-gradient(70% 70% at 92% 96%,color-mix(in srgb,var(--c) 55%,#fff) 0%,#fff0 70%),
  linear-gradient(160deg,color-mix(in srgb,var(--c) 7%,#fff) 0%,color-mix(in srgb,var(--c) 26%,#fff) 100%)}
.ch-art .ui-card{position:relative;inset:auto;width:min(100%,390px);margin:0;transition:transform 1.2s var(--ease)}
.ch-tag{position:absolute;z-index:2;left:clamp(16px,6%,40px);top:clamp(16px,8%,44px);display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 6px;border-radius:999px;background:#ffffffe6;border:1px solid #ffffffb3;box-shadow:0 10px 30px #0000001a;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;font-weight:500}
.ch-tag i{width:24px;height:24px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;font-size:12px;font-style:normal}
.ch-tag small{color:var(--grey);font-size:13px;font-weight:400}
.motion .chapter[data-reveal] .ui-card{transform:translateY(36px) scale(.97)}
.motion .chapter[data-reveal].is-in .ui-card{transform:none}
.ui-card .ui-text{font-size:15px;font-weight:500;margin:6px 0 2px}

/* Photo beside a roles accordion */
.roles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:stretch;margin-top:clamp(48px,5vw,72px)}
.roles-photo{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;min-height:clamp(480px,44vw,640px);background:#d9d9de var(--img) center/cover}
.roles-photo figcaption{position:absolute;left:20px;bottom:20px;right:20px;display:flex;align-items:center;gap:10px;width:fit-content;max-width:calc(100% - 40px);padding:10px 16px 10px 10px;border-radius:14px;background:#ffffffe0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:14px;font-weight:500;box-shadow:0 12px 32px #0000001f}
.roles-photo figcaption .avatar{background:var(--black);color:#fff}
.roles-list{display:flex;flex-direction:column;justify-content:flex-end}
.roles-list details{border-top:1px solid var(--line)}
.roles-list details:last-child{border-bottom:1px solid var(--line)}
.roles-list summary{list-style:none;display:flex;align-items:center;gap:20px;padding:26px 0;cursor:pointer}
.roles-list summary::-webkit-details-marker{display:none}
.roles-list summary .eyebrow{width:28px}
.roles-list summary b{flex:1;font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.025em;color:var(--grey);transition:color .3s}
.roles-list details[open] summary b,.roles-list summary:hover b{color:var(--ink)}
.roles-list summary .i{font-size:18px;color:var(--grey);transition:transform .4s var(--ease)}
.roles-list details[open] summary .i{transform:rotate(45deg);color:var(--ink)}
.role-body{padding:0 0 30px 48px}
.role-body p{font-size:17px;line-height:1.55;color:var(--muted);max-width:520px}
.role-body .ch-tasks{margin-top:18px}
.roles-list details[open] .role-body{animation:row-in .5s var(--ease)}

/* Three reasons with line icons */
.whys{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,5vw,80px)}
.why{padding:0 clamp(20px,3vw,48px) 8px;border-left:1px solid var(--hair)}
.why .i{font-size:clamp(44px,3.6vw,56px);color:var(--ink)}
.why h3{font-size:clamp(22px,1.8vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin:clamp(48px,5vw,80px) 0 14px;text-wrap:balance}
.why p{font-size:16px;line-height:1.55;color:var(--muted);max-width:380px}
.sub-head{max-width:760px}
.sub-head.center{margin:0 auto;text-align:center}
.sub-head.center .lede{margin:24px auto 0;text-wrap:pretty}
.sub-head .lede{margin:24px 0 0}

/* Questions */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-grid .lede{margin-bottom:0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.015em;cursor:pointer}
.faq summary::-webkit-details-marker,.faq summary::marker{content:"";display:none}
.faq summary .i{width:18px;height:18px;margin-left:auto;align-self:center;flex:0 0 18px;font-size:18px;color:var(--grey);transform-origin:center;transition:transform .4s var(--ease),color .2s}
.faq summary:hover .i{color:var(--ink)}
.faq details[open] summary .i{transform:rotate(180deg);color:var(--ink)}
.faq details p{padding:0 56px 28px 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:640px}

/* The other audiences: a tinted panel with a peek at that audience's window, copy below */
.more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(40px,4vw,64px)}
.more-card{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:24px;overflow:hidden;background:#fff;transition:border-color .3s,box-shadow .5s var(--ease)}
.more-card:hover{border-color:var(--line);box-shadow:0 24px 60px #0000000f}
.mc-art{position:relative;isolation:isolate;overflow:hidden;height:clamp(240px,22vw,320px);display:flex;justify-content:center;align-items:flex-end;padding:0 24px}
.mc-art:before{content:'';position:absolute;inset:0;z-index:-1;transition:transform 1.2s var(--ease);background:
  radial-gradient(60% 60% at 18% 12%,color-mix(in srgb,var(--c) 14%,#fff) 0%,#fff0 70%),
  radial-gradient(70% 80% at 90% 100%,color-mix(in srgb,var(--c) 55%,#fff) 0%,#fff0 70%),
  linear-gradient(160deg,color-mix(in srgb,var(--c) 6%,#fff) 0%,color-mix(in srgb,var(--c) 24%,#fff) 100%)}
.more-card:hover .mc-art:before{transform:scale(1.06)}
.mc-ui{width:min(100%,380px);margin-bottom:-28px;padding:16px 18px 40px;border-radius:16px 16px 0 0;background:#ffffffeb;border:1px solid #ffffffb3;box-shadow:0 24px 60px #0000001f;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:13px;transform:translateY(14px);transition:transform .9s var(--ease)}
.more-card:hover .mc-ui{transform:translateY(-4px)}
.mc-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;padding-bottom:10px}
.mc-head img{filter:brightness(0)}
.mc-head em{margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-style:normal}
.mc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px;border-top:1px solid #0000000d}
.mc-row b{font-weight:500;font-variant-numeric:tabular-nums}
.ui-bar{height:4px;border-radius:2px;background:#0000000f;overflow:hidden}
.ui-bar i{display:block;height:100%;width:var(--w);background:var(--c,var(--ink));border-radius:inherit}
.mc-row .ui-bar{flex:0 0 48%;margin:0}
.mc-row .pill{height:22px;font-size:11.5px}
.mc-grid{display:grid;grid-template-columns:1fr repeat(4,22px);gap:0 10px;align-items:center}
.mc-grid span{height:36px;display:flex;align-items:center;border-top:1px solid #0000000d}
.mc-grid i{height:36px;display:grid;place-items:center;border-top:1px solid #0000000d}
.mc-grid i:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--k)}
.mc-grid i.next:before{background:none;border:1.5px dashed var(--line);box-sizing:border-box}
.mc-body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.8vw,40px)}
.mc-eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.mc-eyebrow .i{font-size:16px;color:var(--ink)}
.mc-body h3{font-size:clamp(24px,2.2vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:16px 0 0;max-width:460px;text-wrap:balance}
.mc-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:15px;font-weight:600}
.mc-link .i{transition:transform .35s var(--ease)}
.more-card:hover .mc-link .i{transform:translateX(5px)}
/* Chapter task chips: "Agents for", and room for more */
.ch-label{margin-top:28px;font:500 11px/1 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)!important}
.ch-label+.ch-tasks{margin-top:12px}
.ch-tasks li.soon{border-style:dashed;color:var(--grey)}
.ch-tag i .i{font-size:13px}
.sub-cta{padding-top:0}
.cta-media.alt{background-image:url('team.jpg?v=20261116i');background-position:center 40%}

/* Trust: black controls band */
.dark-band{background:var(--black);color:#fff}
.page-hero+.dark-band{margin-top:clamp(64px,7vw,112px)}
.dark-band .eyebrow{color:#ffffff80}
.dark-band h2.duo .muted,.dark-band h2.duo .muted span{color:#ffffff73}
.dark-band .lede{color:#ffffffa6}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(48px,5vw,72px);background:#ffffff1f;border:1px solid #ffffff1f;border-radius:var(--radius);overflow:hidden}
.control{background:var(--black);padding:clamp(24px,2.6vw,36px);min-height:340px;display:flex;flex-direction:column}
.control .ci{width:56px;height:56px;border-radius:50%;border:1px solid #ffffff38;display:grid;place-items:center;font-size:22px;background:radial-gradient(circle at 30% 25%,#ffffff1f,#0000 60%)}
.control .eyebrow{margin-top:auto;padding-top:56px}
.control h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:12px 0 10px}
.control p{font-size:15px;line-height:1.55;color:#ffffffa6}

/* Trust: where each item stands */
.status{margin-top:clamp(40px,4vw,56px);border-top:1px solid var(--ink)}
.status-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 150px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--hair)}
.status-row b{font-size:clamp(18px,1.4vw,21px);font-weight:500;letter-spacing:-.015em}
.status-row .desc{font-size:15px;line-height:1.5;color:var(--muted)}
.state{justify-self:end;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.state .dot{background:var(--c,var(--ink))}
button.state{transition:background .2s,color .2s,border-color .2s}
button.state:hover{background:var(--ink);border-color:var(--ink);color:#fff}
button.state:hover .dot{background:#fff}

@media(max-width:1100px){
  .controls{grid-template-columns:1fr 1fr}
  .chapter{grid-template-columns:minmax(0,1fr)}
  .chapter:nth-child(even) .ch-copy{order:0}
}
@media(max-width:900px){
  .panel.drop{width:auto;translate:none;padding:0 0 14px;border:0;box-shadow:none}
  .nav-links .drop a{padding:10px 0 10px 4px;border-radius:0}
  .nav-links .drop a:hover,.nav-links .drop a[aria-current]{background:none}
  .drop .mm-icon{background:var(--soft)}
  .nav-links .nav-link[aria-current]{background:none}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .faq-grid,.more,.roles{grid-template-columns:minmax(0,1fr)}
  .roles-photo{min-height:360px}
  .whys{grid-template-columns:minmax(0,1fr);gap:40px}
  .why h3{margin-top:28px}
  .app-row.mx{grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr))}
  .page-hero .app-body{grid-template-columns:minmax(0,1fr)}
  .page-hero .app-row:not(.mx){grid-template-columns:72px minmax(0,1fr) 120px}
  .state{justify-self:start}
  .status-row{grid-template-columns:minmax(0,1fr) auto}
  .app-row.mx>:nth-child(n){display:flex}
  .status-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .status-row .desc{grid-column:1/-1;grid-row:2}
}
@media(max-width:640px){
  .controls{grid-template-columns:minmax(0,1fr)}
  .control{min-height:0}
  .control .eyebrow{padding-top:32px}
  .faq details p{padding-right:0}
  .ch-art{min-height:0;padding:72px 16px 24px}
  .ch-tag{left:16px;top:16px}
  .role-body{padding-left:0}
  .app-row.mx .cell{font-size:0;gap:0}
  .app-row.mx{grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,.85fr));gap:6px}
  .app-row.mx.app-head span{font-size:10px;letter-spacing:.01em;overflow:visible;text-overflow:clip}
  .app-row.mx.app-head .mh-full{display:none}
  .app-row.mx.app-head .mh-short{display:inline}
  .page-hero .hero-actions{width:100%;max-width:370px}
}

/* ---------- A/R subpages: additions ---------- */
/* Four kinds of A/R (What we do) */
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(40px,4vw,64px)}
.kind{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:360px;padding:clamp(22px,2.2vw,32px);border-radius:20px;border:1px solid var(--hair);background:#fff}
.kind:before{content:'';position:absolute;inset:auto -20% -40% -20%;height:70%;z-index:-1;background:radial-gradient(60% 60% at 50% 100%,color-mix(in srgb,var(--c) 38%,#fff) 0%,#fff0 70%);transition:transform 1s var(--ease)}
.kind:hover:before{transform:translateY(-12%)}
.kind .tag{color:var(--ink)}
.kind .tag .dot{background:var(--c);width:8px;height:8px}
.kind h3{font-size:clamp(22px,1.9vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.1;margin:18px 0 12px}
.kind p{font-size:15px;line-height:1.55;color:var(--muted)}
.kind ul{list-style:none;margin:auto 0 0;padding:28px 0 0}
.kind li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #0000000f;font-size:14px;font-weight:500}
.kind li .i{font-size:14px;color:var(--c)}

/* How a claim moves: numbered steps on one hairline */
.claim-flow{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0 clamp(16px,2vw,28px);margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--hair)}
.claim-flow:after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:left}
.motion .claim-flow:after{transform:scaleX(0)}
.motion .claim-flow.is-in:after{transform:none;transition:transform 2.4s var(--ease) .2s}
.cf-step{position:relative;padding-top:32px}
.cf-step:before{content:'';position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--c,var(--ink));box-shadow:0 0 0 5px #fff}
.cf-step h3{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:14px 0 8px}
.cf-step p{font-size:14px;line-height:1.55;color:var(--muted)}
.cf-step .who{display:inline-flex;margin-top:14px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}

/* The black "how we work" band with three columns */
.controls.three-up{grid-template-columns:repeat(3,1fr)}
.more.four-up{grid-template-columns:repeat(3,1fr)}
.more.four-up .mc-ui{width:min(100%,320px)}
.more.all-four{grid-template-columns:repeat(2,1fr)}

/* Home: Who cards link to their pages */
.who-four a.who-card{display:flex;flex-direction:column;align-items:flex-start}
.who-card .mm-link{margin-top:18px;color:var(--ink)}
.who-card .mm-link .i{transition:transform .3s var(--ease)}
.who-card:hover .mm-link .i{transform:translateX(4px)}
.who-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.footer-cols{grid-template-columns:repeat(4,minmax(130px,auto))}

@media(max-width:1100px){
  .kinds{grid-template-columns:1fr 1fr}
  .claim-flow{grid-template-columns:repeat(3,1fr);border-top:0;row-gap:40px}
  .claim-flow:after{display:none}
  .cf-step{border-top:1px solid var(--line)}
  .controls.three-up{grid-template-columns:1fr}
  .more.four-up{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .more.four-up,.more.all-four{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .kinds,.claim-flow{grid-template-columns:minmax(0,1fr)}
  .kind{min-height:0}
}
.ui-list li.stack{display:block}
.ui-list li.stack>div{display:flex;justify-content:space-between;gap:12px}
.ui-list li.stack .ui-bar{margin-top:8px}
.ch-art{padding-top:clamp(84px,7vw,104px)}
.who-four a.who-card .mm-link{margin-top:auto;padding-top:18px}
/* Subpage windows keep the "what" column on phones (the home window hides it at 640px) */
@media(max-width:640px){
  .page-hero .app-row:not(.mx)>:nth-child(3){display:block}
  .page-hero .app-row:not(.mx){grid-template-columns:58px minmax(0,1fr) 112px;gap:8px}
}
@media(max-width:480px){
  .page-hero .app-row:not(.mx){grid-template-columns:minmax(0,1fr) 108px;height:auto;min-height:48px;padding-top:10px;padding-bottom:10px}
  .page-hero .app-row:not(.mx)>:nth-child(1){display:none}
  .page-hero .app-row:not(.mx)>:nth-child(3){white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
}

/* Card grids: each card takes one row per part (icon, eyebrow, heading, text, link) and shares
   those rows with the cards beside it, so every heading, paragraph and link starts on the same
   line across a row, however many lines its neighbours wrap to. */
@supports (grid-template-rows:subgrid){
  .three>article,.three.who-four>a.who-card,.why,.kind,.control,.more-card,.mc-body{display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start;justify-items:start}
  .three>article,.why{grid-row:span 3}
  .three.who-four>a.who-card,.kind,.control,.more-card{grid-row:span 4}
  .mc-body{grid-row:span 3}
  .why>*,.kind>*,.control>*,.mc-body>*{min-width:0;max-width:100%}
  .kind,.control{min-height:0}
  .kind ul{margin-top:0;width:100%}
  .control .eyebrow{margin-top:0;padding-top:clamp(48px,6vw,88px)}
  .who-four a.who-card .mm-link{margin-top:0}
  .more-card .mc-art{width:100%}
}

/* Talk to Tago, inside the hero window (call.js). "Try a call" sits in the window's top bar; the
   call panel slides in from the right over the claim detail, full height, and covers the whole
   window on narrow screens. The window's last 40px sit below the stage's edge, hence the deep
   bottom padding. */
.hero-stage{height:clamp(540px,50vw,700px)}
.app-call{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 11px;margin-left:auto;border-radius:999px;background:var(--black);color:#fff;font-size:12.5px;font-weight:500;transition:opacity .3s,transform .2s}
.app-call:hover{transform:translateY(-1px)}
.app-call .i{font-size:14px}
.app-call+.app-search{margin-left:10px}
.app.calling .app-call{opacity:0;pointer-events:none}
.call-drawer{position:absolute;top:0;right:0;bottom:0;z-index:3;width:min(372px,100%);display:flex;flex-direction:column;gap:12px;padding:14px 16px 54px;background:#fff;border-left:1px solid var(--hair);box-shadow:-30px 0 60px #2a1f4a14;translate:100% 0;visibility:hidden;transition:translate .6s var(--ease),visibility 0s .6s}
.app.calling .call-drawer{translate:0 0;visibility:visible;transition:translate .6s var(--ease)}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.cd-status{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cd-status .dot{width:7px;height:7px;border-radius:50%;background:var(--grey)}
.cd-time{color:var(--grey);font-variant-numeric:tabular-nums;margin-left:4px}
.call-drawer[data-phase="incoming"] .cd-status .dot{background:#1f9d4c;animation:cd-blink .65s ease-in-out infinite}
.call-drawer[data-phase="ringing"] .cd-status .dot{background:var(--ink);animation:cd-blink .65s ease-in-out infinite}
.call-drawer[data-phase="live"] .cd-status .dot{background:#3cbf6a;animation:cd-blink 1.6s ease-in-out infinite}
@keyframes cd-blink{50%{opacity:.25}}
.cd-close{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--grey);font-size:15px;transition:background .2s,color .2s}
.cd-close:hover{background:var(--soft);color:var(--ink)}
.cd-scenarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:10px;background:var(--soft)}
.cd-scenarios button{min-height:30px;padding:4px 6px;border-radius:8px;font-size:12px;font-weight:500;line-height:1.2;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.cd-scenarios button:hover:not(:disabled):not([aria-checked=true]){color:var(--ink)}
.cd-scenarios button[aria-checked=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001f}
.cd-scenarios button:disabled:not([aria-checked=true]){opacity:.45;cursor:default}
.cd-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--hair);border-radius:12px}
.cd-who{display:flex;align-items:center;gap:11px}
.cd-who b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.cd-sub{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.cd-avatar{position:relative;flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 6px 18px #2a1f4a24,0 1px 3px #0000000f}
.cd-avatar img{width:46%;height:auto;filter:brightness(0)}
.cd-avatar:before,.cd-avatar:after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #1d1d1f33;opacity:0}
.call-drawer[data-phase="incoming"] .cd-avatar,.call-drawer[data-phase="ringing"][data-ring="out"] .cd-avatar{animation:cd-shake 1.3s ease-in-out infinite}
.call-drawer[data-phase="incoming"] .cd-avatar:before,.call-drawer[data-phase="incoming"] .cd-avatar:after{animation:cd-ripple 1.8s ease-out infinite}
.call-drawer[data-phase="incoming"] .cd-avatar:after{animation-delay:.9s}
@keyframes cd-shake{0%,45%,100%{rotate:0deg}8%{rotate:-10deg}16%{rotate:9deg}24%{rotate:-6deg}32%{rotate:4deg}}
@keyframes cd-ripple{from{opacity:.9;scale:1}to{opacity:0;scale:1.9}}
.cd-wave{display:block;width:100%;height:30px}
.cd-lines{list-style:none;margin:0;padding:0;height:4.3em;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;font-size:12.5px;line-height:1.4}
.cd-lines:has(> li.hint:only-child){justify-content:flex-start}
.cd-lines li{transition:opacity .4s}
.cd-lines li:not(:last-child){opacity:.45}
.cd-lines li.hint{color:var(--grey)}
.cd-lines b{font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-right:7px}
.cd-lines li.tago b{color:var(--ink)}
.cd-cues .app-label{margin:2px 2px 7px}
.cd-cues ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cd-cues li{padding:7px 10px;border-radius:8px;background:var(--soft);font-size:12px;line-height:1.35;color:var(--ink)}
.cd-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.cd-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:10px;background:var(--black);color:#fff;font-size:13.5px;font-weight:500;transition:background .25s,transform .15s}
.cd-btn:active{transform:scale(.98)}
.cd-btn .i{font-size:16px}
.cd-btn .hang,.call-drawer[data-phase="ringing"] .cd-btn .dial,.call-drawer[data-phase="live"] .cd-btn .dial{display:none}
.call-drawer[data-phase="ringing"] .cd-btn .hang,.call-drawer[data-phase="live"] .cd-btn .hang{display:block}
.call-drawer[data-phase="incoming"] .cd-btn{background:#1f9d4c;animation:cd-answer 1.6s ease-in-out infinite}
.call-drawer[data-phase="ringing"] .cd-btn,.call-drawer[data-phase="live"] .cd-btn{background:#d92d20}
@keyframes cd-answer{0%,100%{box-shadow:0 0 0 0 #1f9d4c55}50%{box-shadow:0 0 0 6px #1f9d4c00}}
.cd-foot small{font-size:11.5px;color:var(--grey);text-align:center}
.cd-sample{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.cd-sample:hover{text-decoration-color:currentColor}
@media(max-width:900px){
  .call-drawer{width:100%;border-left:0;box-shadow:none;padding:14px 14px 52px}
  .app-call{height:28px;font-size:12px}
}
@media(max-width:640px){
  .app-search{display:none}
  .cd-scenarios button{font-size:11px;padding:4px 2px;white-space:nowrap}
  .cd-cues li:nth-child(n+3){display:none}
}
@media(prefers-reduced-motion:reduce){
  .call-drawer,.app.calling .call-drawer{transition:none}
  .call-drawer .cd-avatar,.call-drawer .cd-avatar:before,.call-drawer .cd-avatar:after,.call-drawer .cd-btn{animation:none!important}
}

/* The incoming call: the whole hero stage dims and a phone-style call screen appears in the
   middle, with a plain sentence saying it's a real AI call and big labelled Answer and Decline
   buttons, so it can't be mistaken for part of the screenshot. Answering hands over to the call
   panel inside the window. */
.call-banner{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:16px;background:#16161899;-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.call-banner.show{opacity:1;visibility:visible;transition:opacity .45s}
.call-banner.away{opacity:0;visibility:hidden}
.cb-card{display:flex;flex-direction:column;align-items:center;width:min(400px,100%);padding:28px 26px 22px;border-radius:28px;background:#1d1d1f;color:#fff;text-align:center;box-shadow:0 40px 100px #00000066,0 2px 10px #00000040;translate:0 24px;scale:.96;transition:translate .6s var(--ease),scale .6s var(--ease)}
.call-banner.show .cb-card{translate:0 0;scale:1}
.cb-live{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;background:#30a46c26;color:#7ee2a8;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cb-live i{width:6px;height:6px;border-radius:50%;background:#3cd17c;animation:cd-blink 1s ease-in-out infinite}
.cb-avatar{position:relative;margin:22px 0 16px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#fff;animation:cd-shake 1.3s ease-in-out infinite}
.cb-avatar img{width:44%;height:auto;filter:brightness(0)}
.cb-avatar:before,.cb-avatar:after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffffff99;animation:cd-ripple 1.8s ease-out infinite}
.cb-avatar:after{animation-delay:.9s}
.cb-name{font-size:22px;font-weight:600;letter-spacing:-.02em}
.cb-sub{margin-top:4px;font-size:13px;color:#ffffff99}
.cb-what{margin:16px 0 0;font-size:14px;line-height:1.5;color:#ffffffd9;max-width:320px}
.cb-actions{display:flex;justify-content:center;gap:56px;margin-top:22px}
.cb-act{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:#ffffffcc}
.cb-decline,.cb-answer{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:28px;transition:transform .15s}
.cb-decline:active,.cb-answer:active{transform:scale(.92)}
.cb-decline{background:#e5484d}
.cb-answer{background:#30a46c;animation:cb-pulse 1.4s ease-out infinite}
.cb-answer .i{animation:cd-shake 1.3s ease-in-out infinite}
@keyframes cb-pulse{0%{box-shadow:0 0 0 0 #30a46caa}70%,100%{box-shadow:0 0 0 16px #30a46c00}}
.cb-sound{margin-top:18px;height:30px;padding:0 13px;border-radius:999px;background:#ffffff1f;color:#fff;font-size:12px;font-weight:500;transition:background .2s}
.cb-sound:hover{background:#ffffff33}
.hero-call .i{font-size:17px;margin-right:2px}
@media(max-width:640px){
  .cb-card{padding:22px 18px 18px;border-radius:24px}
  .cb-avatar{margin:16px 0 12px;width:68px;height:68px}
  .cb-name{font-size:19px}
  .cb-what{font-size:13px;margin-top:12px}
  .cb-actions{gap:44px;margin-top:16px}
  .cb-decline,.cb-answer{width:58px;height:58px;font-size:25px}
}
@media(prefers-reduced-motion:reduce){.call-banner,.cb-card{transition:opacity .3s}.cb-avatar,.cb-avatar:before,.cb-avatar:after,.cb-answer,.cb-answer .i,.cb-live i{animation:none}}
/* Cues fade in each time the call moves on */
.cd-cues ul.fresh li{animation:cd-cue .5s var(--ease) both}
.cd-cues ul.fresh li:nth-child(2){animation-delay:.08s}
@keyframes cd-cue{from{opacity:0;transform:translateY(6px)}}

/* Systems Tago works in: two rows of names drifting in opposite directions, faded at the edges.
   Each row holds its list twice and slides by half its width, so the loop is seamless. Hovering
   pauses it; under reduced motion the names sit still and wrap. */
.sys-head{margin-bottom:clamp(36px,4vw,56px)}
.sys-head .lede{margin-bottom:0}
.sys-marquee{display:flex;flex-direction:column;gap:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000)}
.sys-row{display:flex;width:max-content;animation:sys-slide 70s linear infinite}
.sys-row.rtl{animation-direction:reverse;animation-duration:80s}
.sys-marquee:hover .sys-row{animation-play-state:paused}
.sys-row ul{display:flex;gap:14px;margin:0;padding:0 7px;list-style:none}
.sys-row li{display:flex;align-items:center;height:64px;padding:0 28px;border:1px solid var(--hair);border-radius:16px;background:#fff;white-space:nowrap;font-size:clamp(16px,1.35vw,19px);font-weight:600;letter-spacing:-.02em;color:#3a3a3c;transition:color .25s,border-color .25s}
.sys-row li:hover{color:var(--ink);border-color:var(--line)}
@keyframes sys-slide{to{transform:translateX(-50%)}}
.sys-note{margin:28px 0 0;font-size:13px;color:var(--grey)}
@media(max-width:640px){
  .sys-marquee{gap:10px}
  .sys-row ul{gap:10px;padding:0 5px}
  .sys-row li{height:52px;padding:0 20px;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){
  .sys-marquee{-webkit-mask-image:none;mask-image:none;padding:0 var(--pad)}
  .sys-row{width:auto;animation:none;justify-content:center}
  .sys-row ul{flex-wrap:wrap;justify-content:center}
  .sys-row ul[aria-hidden]{display:none}
}
/* Logo tiles: every logo at one height and in one dark tone, so different brand colours (and
   logos drawn white for dark sites) sit together and stay visible on the white tiles */
.sys-row li img{display:block;height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.64;transition:opacity .3s}
.sys-row li:hover img{opacity:.9}
@media(max-width:640px){.sys-row li img{height:22px;max-width:120px}}
/* A call that couldn't connect, and the scripted sample: neither looks like a live call. A failed
   call shows a red dot, Try again and a prominent sample link; the sample has a grey dot and a
   neutral Stop sample button instead of the green live dot and red Hang up. */
.call-drawer[data-phase="failed"] .cd-status .dot{background:#e5484d}
.call-drawer[data-phase="failed"] .cd-lines li.hint{color:var(--ink)}
.call-drawer[data-phase="failed"] .cd-foot small{font-size:12.5px;color:var(--ink)}
.call-drawer[data-phase="failed"] .cd-sample{font-weight:600;text-decoration-color:currentColor}
.call-drawer[data-mode="sample"][data-phase="live"] .cd-status .dot,.call-drawer[data-mode="sample"][data-phase="ringing"] .cd-status .dot{background:var(--grey);animation:none}
.call-drawer[data-mode="sample"][data-phase="live"] .cd-btn,.call-drawer[data-mode="sample"][data-phase="ringing"] .cd-btn{background:var(--black)}

/* Connected: the panel's header becomes a solid green bar with the timer and the product window
   gets a green ring, so a live call is unmistakable. Turns read like a call screen: Mira on
   the left, the visitor's microphone on the right, each with a one-word state ("Talking",
   "Listening", "Your turn"). Whoever is talking gets a ring that moves with their voice, and the
   microphone glows softly when it's the visitor's turn. Sample calls keep the quiet grey look. */
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-head{margin:-2px -2px 0;padding:9px 8px 9px 14px;border-radius:12px;background:#1f9d4c}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-status{color:#fff;font-size:11px;font-weight:600}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-status .dot{width:8px;height:8px;background:#fff;animation:cd-live 1.6s ease-out infinite}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-time{color:#fff;opacity:.85}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-close{color:#fff}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-close:hover{background:#ffffff26;color:#fff}
@keyframes cd-live{0%{box-shadow:0 0 0 0 #ffffffb3}70%,100%{box-shadow:0 0 0 6px #fff0}}
.app{transition:box-shadow .5s}
.app:has(.call-drawer[data-phase="live"]:not([data-mode="sample"])){box-shadow:0 0 0 2px #1f9d4c,0 0 0 7px #1f9d4c1f,0 30px 80px #1f9d4c26}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-foot small{display:none}

.cd-name{min-width:0}
.cd-said{display:none;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:5px;transition:color .25s}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-said{display:block}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-sub{display:none}
.cd-you{display:none;margin-left:auto;align-items:center;gap:11px;text-align:right}
.call-drawer[data-phase="live"]:not([data-mode="sample"]) .cd-you{display:flex}
.cd-mic{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--grey);font-size:18px;transition:background .3s,color .3s,box-shadow .15s}
.cd-avatar{transition:box-shadow .15s}
/* Mira talking or thinking */
.call-drawer[data-turn="tago"] .cd-tago-state,.call-drawer[data-turn="wait"] .cd-tago-state{color:#13733a}
.call-drawer[data-phase="live"]:not([data-mode="sample"])[data-turn="tago"] .cd-avatar{box-shadow:0 0 0 calc(2px + var(--tl,0) * 9px) #1f9d4c3d,0 6px 18px #2a1f4a24}
.call-drawer[data-phase="live"]:not([data-mode="sample"])[data-turn="wait"] .cd-avatar:before{border-color:#1f9d4c80;animation:cd-ripple 1.4s ease-out infinite}
/* The visitor talking, or their turn */
.call-drawer[data-turn="you"] .cd-you-state,.call-drawer[data-turn="yours"] .cd-you-state{color:#13733a}
.call-drawer[data-turn="you"] .cd-mic,.call-drawer[data-turn="yours"] .cd-mic{background:#1f9d4c;color:#fff}
.call-drawer[data-turn="you"] .cd-mic{box-shadow:0 0 0 calc(2px + var(--cl,0) * 9px) #1f9d4c3d}
.call-drawer[data-turn="yours"] .cd-mic{animation:cd-invite 2s ease-in-out infinite}
@keyframes cd-invite{0%,100%{box-shadow:0 0 0 0 #1f9d4c59}50%{box-shadow:0 0 0 7px #1f9d4c00}}
@media(prefers-reduced-motion:reduce){
  .call-drawer .cd-mic,.call-drawer .cd-status .dot,.call-drawer .cd-avatar:before{animation:none!important}
}

.nav-call .i{font-size:15px;margin-right:2px}

/* Home: Who we serve uses the audience cards */
.who .more{margin-top:clamp(40px,4.5vw,64px)}

/* Keeps the "s" in MSOs lowercase inside all-caps labels */
.lc{text-transform:none}
/* The phone icon in every "Take a live call" button */
.btn>.i{font-size:17px;margin-right:2px}
.nav-actions .btn>.i{font-size:15px}

/* Legal pages and the enquiry agreement line */
.footer-legal{display:inline-flex;align-items:center;gap:16px}
.footer-legal a{color:inherit}
.footer-legal a:hover{color:var(--ink)}
.footer-social{display:inline-flex;align-items:center;color:var(--grey)}
.footer-social[hidden]{display:none}
.footer-social svg{width:14px;height:14px;display:block;fill:currentColor}
.footer-legal a.footer-social:hover{color:#1D1D1F}
.form-legal{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.form-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-hero{padding-bottom:clamp(8px,2vw,24px)}
.legal-hero .page-head{align-items:flex-start;text-align:left}
.legal-hero .crumbs{justify-content:flex-start}
.legal-hero h1{margin-bottom:16px}
.legal-hero .lede{margin:0;max-width:640px}
.legal-date{margin-top:18px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.legal-switch{margin-top:14px;font-size:15px}
.legal-switch a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal{max-width:720px}
.legal-body{padding-top:clamp(8px,2vw,20px)}
.legal-body h2{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:40px 0 12px}
.legal-body p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.legal-body a,.legal-textbtn{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-textbtn{display:inline;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.legal-address{font-style:normal;font-size:16px;line-height:1.6;color:var(--ink);margin:0 0 16px}