/* Self-hosted Poppins and IBM Plex Mono (SIL Open Font License), Latin and Latin Extended subsets,
   from Google Fonts. Saves the fonts.googleapis.com stylesheet and fonts.gstatic.com connection that
   blocked first paint; build/build.py copies assets/fonts/ and index.html preloads the two weights
   above the fold. The browser only downloads a subset when the page uses a character in its range. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/poppins-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/poppins-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* Claro Design System v1 — light theme, on white to match getclaro.ai (2026-09-24; was warm #F5F4EF).
     surface #FFF · brand navy #00005C · accent teal #4BD0A0. */
  --bg:#FFFFFF;                                   /* page ground */
  --ink:#F6F7FB; --ink-2:#EEF0F6; --ink-3:#E4E7F0;/* raised panels: faintly navy-tinted greys on white */
  --line:rgba(0,0,92,.14); --line-2:rgba(0,0,92,.25);  /* DS line / line-strong — navy-tinted hairlines */
  --paper:#141413; --mute:#6B685E; --dim:#A6A296; /* DS ink / ink-muted */
  --clear:#00005C; /* Claro navy — brand accent */
  --ok:#3E9E6B; --no:#CE6146; --tbd:#9A6B12; --gold:#C6892B;
  --mint:#4BD0A0; --mint-soft:#DEF4EC; --mint-line:#A3E4CD; /* DS accent teal — the moment of trust */
  --lilac:#DCDCF5; --amber-soft:#F5E6C6;                     /* mid and low confidence badges */
  --navy:#00005C; --navy-2:#000046;
  --sans:'Poppins',system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  --gut:clamp(16px,3.2vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
a[data-go]{text-decoration:none}
/* spam honeypot on the lead forms: invisible to people, filled in by bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
/* even out heading lines so a last word is never left alone ("data" under a full line) */
h1,h2,h3,h1 .ln>span{text-wrap:balance}
:focus-visible{outline:2px solid var(--clear);outline-offset:3px}
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:10px 14px;border-radius:6px;background:var(--navy);color:#fff;text-decoration:none;font-weight:500;transform:translateY(calc(-100% - 20px));transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
.wrap{padding-inline:var(--gut);max-width:1480px;margin-inline:auto}
.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.btn{display:inline-flex;align-items:center;gap:12px;font:500 15px/1 var(--sans);padding:15px 22px;border-radius:999px;border:1px solid var(--navy);background:var(--navy);color:#fff;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.arr{display:inline-block;transition:transform .25s}
a:hover .arr,.btn:hover .arr{transform:translateX(4px)}
/* header */
header.top{position:fixed;inset:0 0 auto 0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;gap:16px}
.mark{display:flex;align-items:center;gap:9px;font-weight:600;font-size:19px;letter-spacing:-.03em;text-decoration:none;color:var(--paper);cursor:pointer;background:none;border:0;font-family:var(--sans);justify-self:start}
.mark .brand-lockup{height:24px;width:auto;display:block}
.navactions{display:flex;align-items:center;gap:18px;justify-self:end}
.navactions .signin{font:500 14.5px var(--sans);color:var(--paper);opacity:.72;text-decoration:none;cursor:pointer;transition:opacity .2s}
.navactions .signin:hover{opacity:1}
.navactions .btn{padding:11px 18px;font-size:14px}
.links{display:flex;gap:2px;font-size:14.5px;color:var(--paper);background:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:4px;justify-self:center}
.links .navitem{position:relative}
.links>a,.links>.navitem>a{text-decoration:none;opacity:.68;transition:opacity .2s,background .2s,color .2s;cursor:pointer;padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
.links>a:hover,.links>.navitem>a:hover{opacity:1}
.links>a.on,.links>.navitem>a.on{opacity:1;background:var(--navy);color:#fff}
.navcaret{display:none;background:none;border:0;padding:0;color:inherit;font-size:11px;opacity:.7;cursor:pointer}
@media (max-width:820px){.navcaret{display:inline-block}}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--paper);border-radius:999px;padding:9px 16px;font:500 14px var(--sans);cursor:pointer;justify-self:end}

/* dropdown mega-menus */
.dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);width:max-content;min-width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 28px 56px -24px rgba(24,22,16,.22);padding:10px;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:30}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dropdown a.ov{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border-radius:9px;text-decoration:none;color:var(--paper);border-bottom:1px solid var(--line);margin-bottom:6px;opacity:1}
.dropdown a.ov:hover{background:var(--ink)}
.dropdown a.ov .lbl{margin-bottom:1px}
.dropdown a.ov strong{font-weight:600;font-size:17px;letter-spacing:-.01em}
.dropdown a.ov small{display:block;color:var(--mute);font-size:12px;font-weight:400;margin-top:2px}
.dropdown .grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:440px}
.dropdown .grid a{display:block;padding:11px 16px;border-radius:9px;text-decoration:none;color:var(--paper);opacity:1}
.dropdown .grid a:hover{background:var(--ink)}
.dropdown .grid a strong{display:block;font-weight:500;font-size:14px}
.dropdown .grid a small{display:block;color:var(--mute);font-size:12px;font-weight:400;margin-top:2px}
.dropdown.list{min-width:260px}
.dropdown.list a{display:block;padding:11px 16px;border-radius:9px;text-decoration:none;color:var(--paper);opacity:1;font-size:14px}
.dropdown.list a:hover{background:var(--ink)}
@media (max-width:980px){.dropdown .grid{min-width:0;grid-template-columns:1fr}}
@media (max-width:820px){.nav{grid-template-columns:auto 1fr auto}.links{display:none}.navactions .signin{display:none}.navactions .btn{padding:9px 14px;font-size:13px}.menu-btn{display:inline-flex}
  /* justify-self:stretch: .links is a grid item centred for the desktop pill, and grid
     alignment also applies to this fixed-position panel, which would shrink it to its content. */
  .links.open{display:flex;position:fixed;top:72px;left:0;right:0;justify-self:stretch;flex-direction:column;gap:0;background:#fff;color:#000;padding:8px var(--gut) 16px;border-radius:0;border:0;border-bottom:1px solid var(--line);max-height:calc(100dvh - 72px);overflow-y:auto}
  .links.open a{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.12);opacity:1;color:#000}
  .links.open>a,.links.open>.navitem>a{display:flex;border-radius:0}
  .links.open>a.on,.links.open>.navitem>a.on{background:none;color:var(--navy);font-weight:500}
  .links.open .navcaret{margin-left:auto;padding:4px 0 4px 16px;font-size:13px}
  .links.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px 12px;display:none}
  .links.open .navitem.open .dropdown{display:block}
  .links.open .dropdown a{border-radius:0}
  .links.open .dropdown a.ov{display:block}
  .links.open .dropdown .grid{min-width:0;grid-template-columns:1fr}}

/* views */
.view{display:none}
/* The fade is for switching views in place (the single-file preview). On a page's first render it
   only delayed paint: ~460ms of mobile LCP. go() adds .enter after its boot call. */
.view.active{display:block}
.view.active.enter{animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* hero (home) */
.hero{position:relative;overflow:hidden}
/* The carousel is deliberately first in normal document flow. Its reserved
   height keeps the scene and copy separated even while tile images load. */
/* isolation: the cards' z-index (0–2000), the frame (3000) and the edge fade (9999) order only
   against each other, never against the header dropdown, lead modal or consent card. */
.tcarousel{--tw:clamp(150px,16.5vw,248px);position:relative;isolation:isolate;margin:clamp(68px,7vw,96px) auto 0;max-width:1440px;height:max(clamp(300px,38vw,470px),calc(var(--tw)*1.74 + 84px));overflow:hidden;cursor:grab;touch-action:pan-y}
.tcarousel.dragging{cursor:grabbing}
.tcarousel::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 12%,transparent 88%,var(--bg) 100%);pointer-events:none;z-index:9999}
/* Deliberately flat. Perspective is applied per card so no two cards share a 3D space and
   their tilted planes can never intersect — that intersection is what cut cards in half. */
.ttrack{position:relative;width:100%;height:100%}
.tcard{position:absolute;top:50%;left:50%;width:var(--tw);aspect-ratio:1080/1566;will-change:transform;pointer-events:none;backface-visibility:hidden}
.tcard-wrap{width:100%;height:100%;overflow:hidden;clip-path:inset(0.6% round 6.45% / 4.45%);border-radius:6.45% / 4.45%;isolation:isolate;box-shadow:0 20px 40px -20px rgba(24,22,16,.32);background:transparent}
.tcard.is-center .tcard-wrap{box-shadow:0 26px 54px -20px rgba(24,22,16,.4)}
.tcard.processed .tcard-wrap{box-shadow:0 20px 40px -20px rgba(24,22,16,.32),0 0 0 1px rgba(0,0,92,.16) inset}
.tcard.processed.is-center .tcard-wrap{box-shadow:0 26px 54px -20px rgba(24,22,16,.4),0 0 0 1px rgba(0,0,92,.18) inset}
.tcard img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:6.45% / 4.45%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.tcard .traw{filter:grayscale(.9) blur(.7px) saturate(.55) brightness(.96) contrast(.94);transition:clip-path .5s ease}
/* While the beat drives the ring the clip IS the animation, so no transition may smear it. */
.ttrack.beating .tcard .traw{transition:none}
/* Flat overlay above the 3D track (see 22-home-carousel.js). z-index 3000 keeps it above every card
   (cards get 0-2000 by depth) even if a browser orders the track's children against it; below the
   edge fade (9999). */
.tengine{position:absolute;top:50%;left:50%;width:var(--tw);aspect-ratio:1080/1566;transform:translate3d(-50%,calc(-50% - var(--tlift,0px)),0) scale(1.1);border-radius:26px;pointer-events:none;z-index:3000}
.tengine .egg{position:absolute;inset:0;border-radius:26px;background:linear-gradient(180deg,rgba(0,0,92,.08),rgba(0,0,92,0) 32%,rgba(0,0,92,0) 68%,rgba(0,0,92,.08));box-shadow:0 0 0 1px rgba(0,0,92,.12) inset,0 0 40px rgba(0,0,92,.14)}
/* c-* not tl/tr/…: .tl is the industry-page timeline, which pulled the top-left bracket out of place */
.tengine .corner{position:absolute;width:20px;height:20px;border:1.5px solid var(--navy);opacity:.6}
.tengine .corner.c-tl{top:-3px;left:-3px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.tengine .corner.c-tr{top:-3px;right:-3px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.tengine .corner.c-bl{bottom:-3px;left:-3px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.tengine .corner.c-br{bottom:-3px;right:-3px;border-left:0;border-top:0;border-radius:0 0 8px 0}
/* position and opacity come from JS (22-home-carousel.js), locked to the ring's phase —
   a CSS keyframe loop here cannot stay in step with a rotation whose speed changes. */
.tengine .scan{position:absolute;left:-2px;right:-2px;height:3px;top:4%;border-radius:3px;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent,var(--mint) 18%,#EAFFF6 50%,var(--mint) 82%,transparent);
  box-shadow:0 0 12px rgba(75,208,160,.85),0 0 30px rgba(75,208,160,.4)}
/* the volume the beam has already read, left behind it */
.tengine .tsweep{position:absolute;left:0;right:0;top:4%;height:0;border-radius:26px 26px 0 0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(75,208,160,.02),rgba(75,208,160,.18));
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);
  mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px)}
/* thrown outward at the instant the card is released */
.tengine .tshock{position:absolute;inset:0;border-radius:26px;border:2px solid var(--mint);opacity:0;pointer-events:none}
.tengine .label{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font:600 12px/1 var(--sans);letter-spacing:-.01em;color:var(--navy);opacity:.75;white-space:nowrap}
.tengine .label .lens{width:17px;height:auto;display:block}

@media (prefers-reduced-motion:reduce){.tcard img{transition:none}}
@media (max-width:700px){.tcarousel{--tw:clamp(120px,34vw,180px);margin-top:clamp(38px,11vw,56px);height:calc(var(--tw)*1.74 + 70px)}.tengine .corner{width:14px;height:14px}.tengine .label{bottom:-22px;font-size:11px}}
.hero-in{position:relative;z-index:2;padding-block:clamp(30px,4vw,54px) clamp(64px,8vw,104px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2vw,24px)}
h1{margin:0;font-weight:500;font-size:clamp(26px,4.1vw,53px);line-height:1.1;letter-spacing:-.03em;max-width:31ch}
h1 .thin{display:block;color:var(--mute);font-weight:300}
h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
h1 .ln > span{display:inline-block;transform:translateY(105%)}
h1.in .ln > span{transform:translateY(0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
h1.in .ln:nth-child(2) > span{transition-delay:.08s}
h1.in .ln:nth-child(3) > span{transition-delay:.16s}
.hero-side{max-width:52ch;display:grid;gap:22px;justify-items:center;padding-bottom:10px}
.hero-side p{margin:0;color:#55524A;font-weight:300;font-size:17.5px}
/* sub-hero (inner pages) */
.subhero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding-block:150px clamp(48px,7vw,96px)}
.crumb{display:flex;align-items:center;gap:8px;font:500 13px var(--mono);color:var(--mute);margin-bottom:20px;letter-spacing:.01em}
.crumb a{color:var(--mute);text-decoration:none;cursor:pointer;transition:color .2s}
.crumb a:hover{color:var(--navy)}
.crumb span.sep{opacity:.5}
.crumb span.cur{color:var(--paper)}
.subhero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.34}
.subhero .in{position:relative;z-index:2;display:grid;gap:24px}
.subhero h1.page{font-size:clamp(34px,4.6vw,72px);max-width:16ch}
.subhero p{max-width:52ch;color:#55524A;font-weight:300;font-size:clamp(17px,1.8vw,20px);margin:0}

/* problem statement, repeated */
.problem{background:var(--ink);border-block:1px solid var(--line);padding-block:clamp(48px,7vw,88px);overflow:hidden}
.problem .wrap{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);gap:40px;align-items:start}
.problem .lbl{padding-top:6px}
.problem h2{margin:0;font:500 clamp(26px,3.6vw,46px)/1.28 var(--sans);letter-spacing:-.02em;color:var(--paper);max-width:20ch}
.problem h2 .acc{color:var(--navy)}
.problem h2 .dim{color:var(--dim)}
@media (max-width:820px){.problem .wrap{grid-template-columns:1fr;gap:16px}}
.row{display:flex;width:max-content;gap:.6em;font:500 clamp(26px,4vw,60px)/1.15 var(--sans);letter-spacing:-.03em;white-space:nowrap}
.row span.dim{color:var(--dim)}
.row span.acc{color:var(--clear)}
.row.a{animation:left 60s linear infinite}
.row.b{animation:right 70s linear infinite}
@keyframes left{to{transform:translateX(-50%)}}
@keyframes right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* sections */
section{padding-block:clamp(80px,10vw,150px);border-bottom:1px solid var(--line)}
/* a short statement section on the light panel colour, like .problem, to break up the white */
section.tint{background:var(--ink);border-top:1px solid var(--line)}
section.tint .outcome{background:#fff}   /* cards keep standing off the tint */
.grid2{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);gap:40px}
@media (max-width:860px){.grid2{grid-template-columns:1fr;gap:20px}}
h2{margin:0;font-weight:500;font-size:clamp(30px,3.6vw,56px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
/* Section heading: label stacked above the h2, flush left with the content, at the one h2 size. The same
   spacing everywhere: 14px label → heading, 18px heading → intro, 32–48px heading → the section's content. */
.sechead{display:grid;gap:14px;justify-items:start;align-content:start}
.sechead h2{max-width:22ch}
.sechead>.body,.sechead>.tags{margin-top:4px}
.sechead .tags{display:flex;gap:8px;flex-wrap:wrap}
.wrap>.sechead+*{margin-top:clamp(32px,4vw,48px)}
h3{margin:0;font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;line-height:1.1}
p.body{color:#4E4B43;font-weight:300;max-width:56ch;margin:0}

/* animation 3 — connect / disconnect graph */
/* copy first and top-aligned, like every other section heading on the page (it used to sit centred on the right) */
.connect-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.connect-copy{order:-1}
.connect-copy h2{margin:0}
@media (max-width:900px){.connect-layout{grid-template-columns:1fr;gap:32px}}
.graphbox{position:relative;height:clamp(480px,50vw,600px);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 45%,var(--ink-2),var(--ink) 72%)}
.graphbox canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.gtile{position:absolute;width:clamp(96px,9vw,148px);aspect-ratio:1080/1566;transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;z-index:2;pointer-events:none;filter:saturate(.985)}
.gtile-wrap{width:100%;height:100%;overflow:hidden;clip-path:inset(0.6% round 6.45% / 4.45%);border-radius:6.45% / 4.45%;isolation:isolate;box-shadow:0 14px 34px -16px rgba(24,22,16,.28);background:transparent}
.gtile img{width:100%;height:100%;display:block;border-radius:6.45% / 4.45%;object-fit:cover;user-select:none;-webkit-user-drag:none}
@media (max-width:700px){.graphbox{height:clamp(460px,92vw,560px)}.gtile{width:clamp(84px,21vw,116px)}}
/* mission */
.mission p{margin:0;font-size:clamp(21px,2.2vw,32px);line-height:1.4;letter-spacing:-.01em;max-width:34ch;font-weight:400}
.mission .w{opacity:.28;transition:opacity .3s}
.mission .w.lit{opacity:1}
.mission .w.em.lit{color:var(--clear)}

/* stack / tiles */
.stack{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:56px}
.tile{background:var(--ink);padding:clamp(24px,3.5vw,48px) clamp(0px,2vw,32px) clamp(24px,3.5vw,48px) 0;display:grid;gap:20px;align-content:start;min-height:400px;position:relative}
.tile + .tile{padding-left:clamp(20px,3vw,48px)}
.tile canvas{width:100%;height:150px;display:block;max-width:100%}
.tile .btn{justify-self:start;margin-top:8px}
@media (max-width:860px){.stack{grid-template-columns:1fr}.tile,.tile + .tile{padding-left:0;min-height:0}}

/* solution grid */
.solgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:48px}
.sol{background:var(--ink);padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start;cursor:pointer;transition:background .25s}
.sol:hover,.sol:focus-visible{background:var(--ink-2)}
.sol .sol-go{font-size:13px;color:var(--navy);font-weight:500;margin-top:4px}
.sol .n{font-family:var(--mono);font-size:12px;color:var(--clear)}
.sol h3{font-size:clamp(20px,2vw,26px)}
.sol p{margin:0;color:var(--mute);font-weight:300;font-size:15px}
.sol .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tag{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
@media (max-width:760px){.solgrid{grid-template-columns:1fr}}

/* solutions hierarchy: core workflows vs. the trusted-layer expansion */
.c-sol-tier{margin-top:40px}
.c-sol-tier+.c-sol-tier{margin-top:56px}
.c-sol-tier-lbl{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.c-sol-tier-intro{margin:8px 0 0;max-width:62ch;color:var(--mute);font-weight:300;font-size:15px}
.c-solgrid-sm{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-solgrid-sm .sol:nth-child(5):nth-last-child(1){grid-column:span 2}
.c-solgrid-sm .sol{padding:clamp(18px,2vw,26px);gap:10px}
.c-solgrid-sm .sol h3{font-size:clamp(16px,1.4vw,19px)}
.c-solgrid-sm .sol p{font-size:13.5px}
@media (max-width:900px){.c-solgrid-sm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.c-solgrid-sm{grid-template-columns:1fr}.c-solgrid-sm .sol:nth-child(5):nth-last-child(1){grid-column:span 1}}

/* loop */
.loopgrid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);margin-top:48px}
.lstep{padding:22px 16px 26px 0;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start}
.lstep + .lstep{padding-left:16px}
.lstep:last-child{border-right:0}
.lstep .n{font-family:var(--mono);font-size:12px;color:var(--clear)}
.lstep p{margin:0;font-size:13px;color:var(--mute);font-weight:300}
@media (max-width:900px){.loopgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lstep{padding:18px 14px!important;border-bottom:1px solid var(--line)}.lstep:nth-child(2n){border-right:0}}
.loopgrid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.loopgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.loopgrid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.loopgrid.cols3,.loopgrid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.loopgrid,.loopgrid.cols2,.loopgrid.cols3,.loopgrid.cols4{grid-template-columns:minmax(0,1fr)}.lstep{padding:16px 0!important;border-right:0}}

/* homepage-only: one-file walkthrough (4-step variant of loopgrid) */
.loopgrid4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:48px}
.loopgrid4 .lstep{border-right:1px solid var(--line)}
.loopgrid4 .lstep:last-child{border-right:0}
@media (max-width:820px){.loopgrid4{grid-template-columns:1fr}.loopgrid4 .lstep{padding:18px 0!important;border-right:0!important;border-bottom:1px solid var(--line)}.loopgrid4 .lstep:last-child{border-bottom:0}}

/* why / outcomes narrative block */
.why{margin-top:0}
.why .lede{font:300 clamp(19px,2vw,26px)/1.5 var(--sans);color:var(--paper);max-width:56ch;margin:0}
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:36px}
.outcome{background:var(--ink);padding:22px 20px;display:grid;gap:6px}
.outcome strong{font:500 17px/1.3 var(--sans);color:var(--paper)}
.outcome span{font-size:13px;color:var(--mute)}
@media (max-width:820px){.outcomes{grid-template-columns:1fr}}

/* homepage-only: trust section, 4-up variant of .outcomes */
.outcomes4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.outcomes4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.outcomes4{grid-template-columns:1fr}}

/* careers / list rows */
.cat{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);gap:24px;margin-top:40px}
.cat ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cat a{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;transition:padding .3s,color .3s}
.cat a:hover{padding-left:12px;color:var(--clear)}
.cat .inline-link{display:inline;grid-template-columns:none;padding:0;border-bottom:1px solid currentColor;font-size:inherit;letter-spacing:inherit;transition:none}
.cat .inline-link:hover{padding-left:0;color:var(--navy)}
.cat .m{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.04em}
.c-career-status p{margin:9px 0 0;color:var(--mute);font-size:13px}
.cat a.c-career-role{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding-top:26px;padding-bottom:26px}
.c-career-role-main{display:grid;gap:8px;min-width:0}
.c-career-role-title{font-weight:500}
.c-career-role-meta{font:500 12px var(--mono);letter-spacing:.04em;color:var(--mute)}
.c-career-role-summary{max-width:68ch;font-size:15px;line-height:1.55;letter-spacing:0;color:var(--mute);font-weight:300}
.c-career-role .arr{margin-top:3px}
@media (max-width:860px){.cat{grid-template-columns:1fr}.cat a{grid-template-columns:1fr auto}.cat .m{grid-column:1/-1;order:3}}

/* research posts */
.posts{margin-top:52px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin}
.post{scroll-snap-align:start;border:1px solid var(--line);border-radius:4px;background:var(--ink-2);text-decoration:none;display:grid;grid-template-rows:auto 1fr;overflow:hidden;transition:border-color .3s}
.post:hover{border-color:var(--line-2)}
.post .art{aspect-ratio:4/3;max-width:100%;background:var(--ink-3);position:relative;overflow:hidden}
.post .art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.post:hover .art svg{transform:scale(1.06)}
.post .tx{padding:20px;display:grid;gap:10px;align-content:start}
.post h3{margin:0;font-weight:500;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.post p{margin:0;color:var(--mute);font-size:14px;font-weight:300}

/* agents cards */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.agent{border:1px solid var(--line);border-radius:8px;background:var(--ink-2);padding:26px;display:grid;gap:14px;align-content:start;position:relative;overflow:hidden}
.agent .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.agent h3{font-size:22px}
.agent p{margin:0;color:var(--mute);font-weight:300;font-size:14.5px}
.agent .io{font-family:var(--mono);font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px;display:grid;gap:4px}
.agent .io b{color:var(--clear);font-weight:400}
@media (max-width:860px){.agents{grid-template-columns:1fr}}

/* customers */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:48px}
.logo{background:var(--ink);min-height:130px;display:grid;place-items:center;font:500 clamp(20px,2.4vw,30px)/1 var(--sans);letter-spacing:-.03em;color:#2A2820;transition:background .3s,color .3s;text-align:center;padding:16px}
.logo small{display:block;font:400 11px var(--mono);color:var(--dim);letter-spacing:.1em;margin-top:8px;text-transform:uppercase}
.logo:hover{background:var(--ink-2);color:#fff}
.logo.prospect{color:var(--mute)}
/* proof tile: a number leads, the segment explains it — no customer names */
.logo.proof{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:172px;text-align:center;padding:24px 20px}
.logo.proof b{font:500 clamp(28px,3.1vw,40px)/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.logo.proof small{display:block;margin:0;text-transform:none;letter-spacing:-.01em;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--mute);max-width:22ch}
.logo.proof i{font:400 10.5px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.11em;color:var(--dim)}
.logo.proof:hover small,.logo.proof:hover i{color:var(--ink-3)}
@media (max-width:860px){.logos{grid-template-columns:repeat(2,1fr)}}
.quote{margin-top:64px;border-left:2px solid var(--clear);padding-left:clamp(20px,3vw,40px)}
.quote p{margin:0;font-size:clamp(24px,3vw,42px);line-height:1.2;letter-spacing:-.02em;font-weight:400;max-width:22ch}
.quote .who{margin-top:20px;color:var(--mute);font-size:15px}
/* takeaway = Claro's own conclusion, deliberately not styled as a customer testimonial */
.quote.takeaway{border-left-color:var(--line-2)}
.quote.takeaway .lbl{margin-bottom:14px}
.quote.takeaway p{font-size:clamp(20px,2.3vw,30px);max-width:34ch}
.quote.takeaway .who{margin-top:16px;font-size:13px;color:var(--dim)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:56px}
.metric{background:var(--ink);padding:32px}
.metric .big{font:500 clamp(40px,6vw,80px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--clear)}
.metric .cap{color:var(--mute);font-size:14px;margin-top:10px;font-weight:300}
@media (max-width:760px){.metrics{grid-template-columns:1fr}}

/* homepage-only: hero proof strip (4-up, smaller than .metrics) */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.proof .metric{padding:24px}
.proof .metric .big{font-size:clamp(26px,2.8vw,38px)}
@media (max-width:820px){.proof{grid-template-columns:repeat(2,1fr)}}

/* team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:48px}
.person{background:var(--ink);padding:24px;display:grid;gap:14px}
.face{aspect-ratio:4/5;max-width:100%;border-radius:6px;background:linear-gradient(160deg,var(--ink-3),var(--ink-2));display:grid;place-items:center;font:500 40px var(--sans);color:var(--dim);letter-spacing:-.03em}
.face img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.face:has(img){aspect-ratio:1;background:#F4F4F2}
.person span{color:var(--mute);font-size:14px}
.team.team3{grid-template-columns:repeat(3,minmax(0,1fr))}
.person.c-spacer{background:var(--ink)}
@media (max-width:860px){.team,.team.team3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.person{padding:16px;gap:10px}.person h3{font-size:17px}.person span{font-size:13px}}

/* game */
.game{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.deck{position:relative;height:460px;max-width:420px;width:100%;margin-inline:auto;touch-action:pan-y}
.card{position:absolute;inset:0;border-radius:18px;background:var(--ink-2);border:1px solid var(--line-2);padding:22px;display:flex;flex-direction:column;gap:14px;cursor:grab;user-select:none;will-change:transform;box-shadow:0 28px 60px -28px rgba(24,22,16,.22)}
.card.back{transform:translateY(16px) scale(.95) rotate(-3deg);opacity:.55;pointer-events:none}
.card.back2{transform:translateY(30px) scale(.9) rotate(3deg);opacity:.3;pointer-events:none}
.card:active{cursor:grabbing}
.it{border:1px solid var(--line);border-radius:10px;padding:14px;font-family:var(--mono);font-size:13px;line-height:1.5}
.it small{display:block;color:var(--dim);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.stamp{position:absolute;top:20px;padding:6px 12px;border:2px solid;border-radius:8px;font:600 13px var(--mono);letter-spacing:.08em;opacity:0}
.stamp.y{right:20px;color:var(--ok)}.stamp.n{left:20px;color:var(--no)}
.meter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;font-size:15px}
/* the two calls are real buttons (ghost-button style), so they read as clickable, not as captions */
.meter button{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--navy);border-radius:999px;color:var(--navy);font:500 15px/1 var(--sans);cursor:pointer;padding:12px 20px;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.meter button:hover{background:var(--navy);color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,92,.55)}
.meter button:active{transform:scale(.97)}
.meter button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.meter button .ar{display:inline-block;transition:transform .2s}
.meter #bNo:hover .ar{transform:translateX(-3px)}.meter #bYes:hover .ar{transform:translateX(3px)}
@media (max-width:420px){.meter button{padding:11px 14px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.meter button,.meter button .ar{transition:none}}
.meter .n{font-family:var(--mono);font-size:28px;font-variant-numeric:tabular-nums;color:var(--clear)}
.why{margin-top:22px;min-height:96px;border-top:1px solid var(--line);padding-top:18px}
.why .t{font-weight:500}.why .t.ok{color:var(--ok)}.why .t.no{color:var(--no)}
.why p{margin:6px 0 0;color:#4E4B43;font-weight:300;font-size:15px}
@media (max-width:900px){.game{grid-template-columns:1fr}}
/* cta band */
.band{text-align:center;display:grid;gap:28px;justify-items:center}
.band h2{max-width:18ch}

/* pricing cards */
.pricegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:48px}
.pricecard{background:var(--ink);padding:clamp(28px,3.4vw,44px);display:grid;gap:18px;align-content:start}
.pricecard.hi{background:var(--navy);color:#fff}
.pricecard .ptag{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pricecard.hi .ptag{color:rgba(255,255,255,.6)}
.pricecard .pprice{font:500 clamp(32px,4vw,46px)/1 var(--sans);letter-spacing:-.02em}
.pricecard ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pricecard li{font-size:14.5px;color:var(--mute);padding-left:20px;position:relative}
.pricecard.hi li{color:rgba(255,255,255,.82)}
.pricecard li::before{content:"✓";position:absolute;left:0;color:var(--navy);font-weight:600}
.pricecard.hi li::before{color:#fff}
.pricegrid.pricegrid-3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto auto}
.pricegrid.pricegrid-3 .pricecard{grid-row:1/-1;display:grid;grid-template-rows:subgrid}
.pricecard .ptitle{font:500 clamp(20px,2.2vw,26px)/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.pricecard .pgood{margin-top:2px}
.pricecard .pgood .lbl{font-size:11px}
.pricecard .pgood p{margin:6px 0 0;font-size:14px;color:var(--mute)}
.pricecard.hi .pgood p{color:rgba(255,255,255,.82)}
@media (max-width:1020px){.pricegrid.pricegrid-3{grid-template-columns:1fr;grid-template-rows:none}.pricegrid.pricegrid-3 .pricecard{grid-row:auto;grid-template-rows:none;align-content:start}}
@media (max-width:820px){.pricegrid{grid-template-columns:1fr}}

/* FAQ accordion */
.faqlist{margin-top:48px;border-top:1px solid var(--line)}
.faqlist details{border-bottom:1px solid var(--line);padding:22px 0}
.faqlist summary{cursor:pointer;font:500 17px/1.4 var(--sans);color:var(--paper);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";font:400 22px/1 var(--sans);color:var(--dim);flex:none;transition:transform .2s}
.faqlist details[open] summary::after{content:"–"}
.faqlist p{margin:12px 0 0;color:var(--mute);font-weight:300;font-size:15px;line-height:1.6;max-width:64ch}

/* inline Claro icons — inherit currentColor, teal accent is baked in */
.ic{display:inline-block;vertical-align:middle;flex:none}

/* ===== demo page: See your workflow run in Claro ===== */
.demowrap{display:grid;grid-template-columns:1fr 1fr;margin-top:72px;min-height:calc(100svh - 72px)}
.demoform{padding:clamp(32px,5vw,72px) clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:center;max-width:640px;margin-left:auto;width:100%}
.demoform h1{font-family:var(--sans);font-weight:600;font-size:clamp(30px,3.6vw,50px);line-height:1.05;letter-spacing:-.03em;margin:0 0 clamp(24px,3vw,40px)}
.demoform h1 .mut{color:var(--dim)}
.dform{display:grid;gap:22px}
.dform .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dfield{display:grid;gap:0}
.dfield input,.dfield select{font:400 16px var(--sans);color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 0;width:100%}
.dfield select{cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.dfield input::placeholder{color:var(--dim)}
.dfield input:focus,.dfield select:focus{outline:none;border-bottom-color:var(--navy)}
.dfield.sel{position:relative}
.dfield.sel::after{content:"⌄";position:absolute;right:2px;top:8px;color:var(--dim);pointer-events:none;font-size:18px}
.dform .btn{width:100%;justify-content:center;margin-top:8px;padding:17px}
.dform .fine{font-size:12.5px;color:var(--mute);text-align:center;line-height:1.5}
.dform .fine a{color:var(--navy)}
.dform .booknow{font-size:13px;color:var(--mute);text-align:center;margin-top:-6px}
.dform .booknow a{color:var(--navy);border-bottom:1px solid currentColor}
.demoaside{position:relative;background:var(--navy);overflow:hidden;display:flex;flex-direction:column}
.demoaside .logos{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,48px);flex-wrap:wrap;padding:22px 28px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:2}
.demoaside .logos .lg{font:600 13px var(--sans);letter-spacing:-.01em;color:rgba(255,255,255,.55);text-align:center}
.demoaside .pic{position:relative;flex:1;min-height:0}
.demoaside .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demoaside .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,53,.15) 0%,rgba(0,0,53,.35) 55%,rgba(0,0,53,.9) 100%)}
.demoaside .quote{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(28px,3.5vw,52px);border-left:2px solid var(--mint)}
.demoaside .quote p{font:500 clamp(20px,2vw,29px)/1.25 var(--sans);letter-spacing:-.02em;color:#fff;margin:0 0 14px;max-width:24ch}
.demoaside .quote .who{font:500 13px var(--mono);letter-spacing:.06em;color:var(--mint)}
@media (max-width:900px){.demowrap{grid-template-columns:1fr;min-height:0}.demoaside{min-height:520px;order:2}.demoform{order:1;margin:0 auto}}

/* delivery modes — the same layer, four ways to run it */
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:40px}
.mode{background:#fff;padding:26px 24px;display:grid;gap:12px;align-content:start}
.mode .ic{color:var(--navy)}
.mode h3{margin:0;font:600 19px/1.2 var(--sans);letter-spacing:-.015em;color:var(--navy)}
.mode .for{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-top:-4px}
.mode p{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
.mode.lead{background:var(--navy)}
.mode.lead h3,.mode.lead .ic{color:#fff}
.mode.lead .for{color:var(--mint)}
.mode.lead p{color:#C9C7DD}
@media (max-width:960px){.modes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.modes{grid-template-columns:1fr}}

/* animated agent showcase — the six agents cycle, content swaps, active chip inverts */
.agentshow{margin-top:34px}
.agentstage{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:var(--navy);border-radius:14px;padding:32px 34px;min-height:172px}
.agentstage .mark{width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#fff;flex:none}
.agentstage .mark .ic{color:#fff}
.agentbody{min-width:0}
.agentbody .kicker{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.agentbody h3{margin:6px 0 8px;font:600 clamp(22px,2.4vw,30px)/1.1 var(--sans);letter-spacing:-.025em;color:#fff}
.agentbody p{margin:0;font-size:15px;line-height:1.5;color:#C9C7DD;max-width:52ch}
.agentio{display:grid;gap:8px;justify-items:end;flex:none;min-width:150px}
.agentio .row{font:500 12.5px var(--mono);color:#EDECFF;background:rgba(255,255,255,.08);border-radius:6px;padding:7px 11px;white-space:nowrap}
.agentio .row b{color:var(--mint);font-weight:600}
.agentstage.swap .agentbody,.agentstage.swap .agentio,.agentstage.swap .mark{opacity:0}
.agentstage .agentbody,.agentstage .agentio,.agentstage .mark{transition:opacity .22s ease}
.agentnav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.agentchip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 12px;cursor:pointer;transition:background .3s,border-color .3s,color .3s;font:500 13px var(--sans);color:var(--paper);text-align:left;width:100%}
.agentchip .ic{color:var(--navy);transition:color .3s}
.agentchip[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.agentchip[aria-selected="true"] .ic{color:var(--mint)}
.agentchip .cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* per-agent anatomy that swaps in sync with the stage — in → core → out */
.agentana{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1.02fr) 22px minmax(0,1.12fr);gap:12px;align-items:center;margin-top:12px;transition:opacity .22s ease}
.agentstage.swap ~ .agentana,.agentana.swap{opacity:0}
.agentana .col{display:grid;gap:9px;align-content:center}
.agentana .eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.agentana .core{background:var(--navy);border-radius:12px;padding:18px 20px}
.agentana .core .eyebrow{color:#9C9AAF}
.agentana .core ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.agentana .core li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.3;color:#fff}
.agentana .core li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);margin-top:5px}
.agentana .core li.off{color:#9C9AAF}.agentana .core li.off::before{background:#5A5A82}
.agentana .verdict{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--mint-line);box-shadow:0 0 0 1px var(--mint-line) inset}
.agentana .verdict strong{font:500 18px/1.15 var(--sans);letter-spacing:-.02em;color:var(--navy)}
.agentana .ev{display:grid;gap:5px}
.agentana .ev .e{font:500 12.5px var(--mono);color:var(--paper)}
.agentana .routed{font-size:12.5px;color:var(--mute);line-height:1.4}
@media (max-width:820px){.agentana{grid-template-columns:1fr;gap:10px}.agentana .dg-arrow{transform:rotate(90deg);padding-block:2px}}
@media (max-width:900px){.agentstage{grid-template-columns:auto 1fr;gap:18px}.agentio{grid-column:1/-1;justify-items:start;flex-direction:row;display:flex;flex-wrap:wrap}.agentnav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.agentnav{grid-template-columns:repeat(2,1fr)}.agentchip .cap{display:none}.agentchip{justify-content:center}}
@media (prefers-reduced-motion:reduce){.agentstage .agentbody,.agentstage .agentio,.agentstage .mark{transition:none}}
.iconlbl{display:inline-flex;align-items:center;gap:9px}

/* industry split hero — text left at standard margins, a big image on the right */
.indhero{border-bottom:1px solid var(--line)}
.indhero .wrap{padding-block:clamp(116px,13vw,150px) clamp(48px,6vw,84px)}
.indhero .indcrumb{margin-bottom:clamp(26px,3.4vw,40px)}
.indsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
.indhero .txt .sublbl{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin:14px 0}
.indhero .txt h1.page{max-width:17ch}
.indhero .txt p{margin-top:16px;max-width:52ch;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--mute)}
.indhero .txt .btn{margin-top:26px}
.indhero .pic{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--navy);border:1px solid var(--line)}
.indhero .pic img{width:100%;height:100%;object-fit:cover;display:block}
.indhero .pic.tile{display:grid;place-items:center;padding:22px}
.indhero .pic.tile img{width:auto;height:100%;object-fit:contain;border-radius:8px}
@media (max-width:860px){.indsplit{grid-template-columns:1fr}.indhero .pic{aspect-ratio:16/10}}

/* industries hub — horizontal lanes, text left at standard margins, image right */
.indlanes{border-top:1px solid var(--line)}
.indlane{display:grid;grid-template-columns:44px minmax(0,1fr) clamp(150px,20vw,280px);gap:clamp(20px,3.5vw,48px);align-items:center;padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line);cursor:pointer;transition:background .25s,padding-left .25s;position:relative}
.indlane:hover,.indlane:focus-visible{background:var(--ink);outline:none}
.indlane .num{font:500 12px var(--mono);letter-spacing:.1em;color:var(--dim);align-self:start;padding-top:6px}
.indlane .lt .sublbl{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:8px}
.indlane .lt h2{margin:0;font:500 clamp(22px,2.6vw,32px)/1.08 var(--sans);letter-spacing:-.025em;color:var(--navy)}
.indlane .lt p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--mute);max-width:52ch}
.indlane .lt .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:500 13px var(--sans);color:var(--navy)}
.indlane:hover .lt .go .arr{transform:translateX(4px)}
.indlane .lp{height:clamp(118px,13vw,172px);min-height:0;align-self:center;border-radius:10px;overflow:hidden;background:var(--navy);border:1px solid var(--line)}
.indlane .lp img{width:100%;height:100%;object-fit:cover;display:block}
.indlane .lp.tile{display:grid;place-items:center;padding:10px;height:clamp(118px,13vw,172px)}
.indlane .lp.tile img{height:clamp(98px,11vw,150px);width:auto;max-width:100%;object-fit:contain;border-radius:6px}
.indlane.cta{background:var(--navy)}
.indlane.cta:hover{background:var(--navy-2)}
.indlane.cta .num{color:var(--mint)}
.indlane.cta .lt h2{color:#fff}
.indlane.cta .lt p{color:#C9C7DD}
.indlane.cta .lt .sublbl{color:var(--mint)}
.indlane.cta .lt .go{color:#fff}
.indlane.cta .lp{background:transparent;border:0;display:grid;place-items:center}
.indlane.cta .lp .ic{color:var(--mint)}
@media (max-width:760px){.indlane{grid-template-columns:1fr;gap:14px}.indlane .num{display:none}.indlane .lp{aspect-ratio:16/9;order:-1}}

/* soft integrated logo band — before "why it matters" */
.softlogos{border-bottom:1px solid var(--line);background:var(--ink)}
.softlogos .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap;padding-block:22px}
.softlogos .cap{font:400 13px var(--sans);color:var(--mute)}
.softlogos .cap em{font-style:italic;color:var(--paper)}
.softlogos .row{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);flex-wrap:wrap;justify-content:center;opacity:.45}
.softlogos .row span.lg{font:600 15px var(--sans);letter-spacing:-.02em;color:var(--mute);white-space:nowrap}
.softlogos .row img.lg{display:block;flex:none;object-fit:contain;filter:brightness(0) invert(46%)}
@media (max-width:600px){.softlogos .row img.lg{zoom:.8}}

/* value-chain stat tiles (illustrative placeholders) */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:40px}
.stat{background:#fff;padding:30px 26px;display:grid;gap:10px;align-content:start;min-height:150px}
.stat .v{font:500 clamp(34px,4vw,52px)/1 var(--sans);letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.stat .c{font-size:13.5px;line-height:1.4;color:var(--mute);max-width:22ch}
.statgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.statgrid,.statgrid.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}.statgrid .stat:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:560px){.stat{padding:22px 16px;min-height:0}.stat .v{font-size:clamp(26px,8vw,34px)}}

/* from first call to pilot — the 11-day timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:36px}
.tl .step{background:#fff;padding:24px 22px;display:grid;gap:8px;align-content:start}
.tl .step .day{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.tl .step h3{margin:0;font:500 17px/1.2 var(--sans);letter-spacing:-.015em;color:var(--navy)}
.tl .step p{margin:0;font-size:13.5px;line-height:1.45;color:var(--mute)}
@media (max-width:860px){.tl{grid-template-columns:1fr}}

/* improve-over-time callout */
.calloutband{background:var(--navy);border-radius:14px;padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.calloutband .lbl{color:var(--mint)}
.calloutband h2{color:#fff;max-width:22ch}
.calloutband p{color:#C9C7DD;margin-top:10px;max-width:54ch;font-size:15px;line-height:1.5}
@media (max-width:760px){.calloutband{grid-template-columns:1fr}}

/* merged who + how */
.mergegrid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(28px,4vw,56px);margin-top:8px;align-items:start}
.mergegrid .col-h{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
@media (max-width:900px){.mergegrid{grid-template-columns:1fr;gap:36px}}

/* industry hero — big photographic band with a navy scrim and white title over it (legacy) */
.ind-hero{position:relative;min-height:clamp(400px,52vw,560px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);background:var(--navy)}
.ind-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ind-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,53,.92) 0%,rgba(0,0,53,.72) 38%,rgba(0,0,53,.28) 70%,rgba(0,0,53,.15) 100%)}
.ind-hero .in{position:relative;z-index:2;padding-block:clamp(36px,5vw,64px)}
.ind-hero .crumb a,.ind-hero .crumb .cur{color:#EDECFF}
.ind-hero .crumb .sep{color:#9C9AC8}
.ind-hero .lbl{color:var(--mint)}
.ind-hero h1.page{color:#fff;max-width:20ch}
.ind-hero .sublbl{color:#C9C7E8;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ind-hero p{color:#DAD9F0;max-width:56ch;margin-top:16px;font-size:clamp(16px,1.4vw,19px);line-height:1.5}
@media (max-width:700px){.ind-hero::after{background:linear-gradient(180deg,rgba(0,0,53,.55) 0%,rgba(0,0,53,.86) 60%,rgba(0,0,53,.95) 100%)}}

/* "what that looks like on a real file" — a concrete proof card, teal-marked */
.realfile{margin-top:28px;border:1px solid var(--mint-line);background:var(--mint-soft);border-radius:10px;padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.realfile .ic{color:var(--navy);margin-top:2px}
.realfile .lbl{color:#3F6B57;margin-bottom:7px}
.realfile p{margin:0;font-size:15px;line-height:1.5;color:var(--paper);max-width:64ch}

/* trust / logo strip — space for consented customer logos */
.trustband{margin-top:clamp(40px,5vw,64px)}
.logostrip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:22px}
.logoslot{background:var(--surface-raised,#fff);min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center}
.logoslot b{font:600 15px/1.15 var(--sans);letter-spacing:-.01em;color:var(--navy)}
.logoslot span{font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.logoslot.placeholder b{color:var(--dim);font-weight:500}
@media (max-width:900px){.logostrip{grid-template-columns:repeat(2,1fr)}}

/* inputs / outputs / works-with, on the use-case pages */
.iogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:44px}
.iocol{background:var(--ink);padding:26px 24px;display:grid;gap:14px;align-content:start}
.iocol .lbl{color:var(--mute)}
@media (max-width:900px){.iogrid{grid-template-columns:1fr}}

/* two-column partner / resource cards */
.twogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:48px}
.twogrid .sol{grid-template-columns:1fr}
@media (max-width:820px){.twogrid{grid-template-columns:1fr}}
/* Legal center and shared editorial document layout */
.legal-hero{padding-bottom:clamp(56px,8vw,100px)}
/* Legal pages use the same left-hand grid and measure as every other subpage.
   Constrain the copy, not the whole wrapper, so the hero never appears centred. */
.legal-hero .in{max-width:1480px}.legal-hero .page{max-width:16ch}.legal-hero .in>p{max-width:52ch}
.legal-subline{margin-top:18px!important;font-size:15px!important;color:var(--mute)!important}
.legal-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:0}
.legal-card{display:flex;min-height:210px;padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:16px;background:#fff;flex-direction:column;color:var(--navy);text-decoration:none;box-shadow:0 16px 40px -36px rgba(0,0,53,.45);transition:transform .2s,border-color .2s,box-shadow .2s}
.legal-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 22px 48px -32px rgba(0,0,53,.38)}.legal-card h2{font-size:clamp(22px,2vw,28px);margin:0 0 12px}.legal-card p{margin:0;color:var(--mute);line-height:1.65}.legal-card .arr{margin-top:auto;padding-top:28px;font-weight:500}
.legal-procurement{margin-top:64px;padding:clamp(28px,5vw,52px);border-radius:18px;background:var(--navy);color:#fff}
.legal-procurement>p{max-width:760px;color:rgba(255,255,255,.7);line-height:1.7}.legal-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:34px 0}.legal-info{border-top:1px solid rgba(255,255,255,.24);padding-top:20px}.legal-info h3{font-size:18px;margin:0 0 10px}.legal-info p{font-size:14px;margin:0;color:rgba(255,255,255,.7)}.legal-procurement a{color:var(--teal)}
.legal-document{padding:clamp(52px,7vw,96px) 0}.legal-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(180px,240px);gap:clamp(50px,8vw,110px);align-items:start}.legal-copy{font-size:16px;line-height:1.78;color:var(--navy)}.legal-copy h2{font-size:clamp(25px,3vw,34px);margin:58px 0 18px;letter-spacing:-.025em}.legal-copy h3{font-size:19px;margin:30px 0 10px}.legal-copy p{margin:0 0 18px}.legal-copy ul{padding-left:22px;margin:0 0 24px}.legal-copy li{margin:7px 0}.legal-copy a,.legal-other a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}.legal-address{font-style:normal;line-height:1.75;margin-bottom:20px}.legal-toc{position:sticky;top:110px;border-top:1px solid var(--line);padding-top:18px}.legal-toc .lbl{margin-bottom:12px}.legal-toc a{display:block;padding:6px 0;color:var(--mute);font-size:13px;text-decoration:none}.legal-other{margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}.legal-other h2{font-size:20px;margin:0 0 15px}.legal-other nav{display:flex;flex-wrap:wrap;gap:10px 22px}.legal-table-wrap{overflow-x:auto;margin:24px 0 34px}.legal-table{border-collapse:collapse;width:100%;min-width:720px;font-size:13px;line-height:1.5}.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:14px;border-bottom:1px solid var(--line)}.legal-table th{background:var(--ink);font-weight:600}
@media(max-width:760px){.legal-cards,.legal-info-grid{grid-template-columns:1fr}.legal-layout{grid-template-columns:1fr}.legal-toc{display:none}.legal-card{min-height:175px}.legal-document{padding-top:42px}.legal-copy{font-size:15px}.legal-copy h2{margin-top:44px}}

/* Phones: one column. The two-column grid (copy + sticky contents) has fixed track widths,
   so without this the copy is wider than the screen. */
@media (max-width:900px){.legal-layout{grid-template-columns:minmax(0,1fr);gap:32px}.legal-aside{position:static;order:-1}}
/* footer */
footer{padding-block:64px 40px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1fr 1fr;gap:28px}
.fgrid .fhead{margin:0 0 14px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fgrid a{display:block;text-decoration:none;padding:4px 0;opacity:.85;cursor:pointer}.fgrid a:hover{opacity:1;color:var(--clear)}
.fgrid button.flink{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;text-decoration:none;padding:4px 0;opacity:.85;cursor:pointer}.fgrid button.flink:hover{opacity:1;color:var(--clear)}
/* wordmark at the left edge, social icons stacked hard against the right edge; the wordmark's
   own height is an inline style on the <img>, because an inline style beats every rule in here. */
.fbrand{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);margin-top:56px}
.giant{font:600 clamp(60px,16vw,240px)/.8 var(--sans);letter-spacing:-.06em;color:var(--ink-3);user-select:none;min-width:0}
.giant img{display:block;max-width:100%}
.socials{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--navy);transition:background .2s,border-color .2s}
.socials a:hover{background:#fff;border-color:var(--line-2)}
.socials svg{width:18px;height:18px;fill:currentColor}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:13px;margin-top:24px}
@media (max-width:1180px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
.mdpanel{margin-top:20px;background:var(--paper);border-radius:14px;overflow:hidden}
.mdpanel .mdhead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);font:500 13px var(--mono);color:var(--dim)}
.mdpanel .mdhead button.copy{font:500 12px var(--sans);color:var(--ink);background:rgba(255,255,255,.1);border:0;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .2s}
.mdpanel .mdhead button.copy:hover{background:rgba(255,255,255,.2)}
.mdpanel pre{margin:0;padding:20px;font:400 13px/1.7 var(--mono);color:#D8D6CC;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto}
.mdpanel pre a{color:#fff}

/* lead capture modal — shared shell, reused for the supplier-file form and (later) the partner application */
.leadbackdrop{position:fixed;inset:0;background:rgba(24,22,16,.55);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s}
.leadbackdrop.open{opacity:1;pointer-events:auto}
.leadmodal{background:var(--bg);border-radius:16px;max-width:460px;width:100%;max-height:88vh;overflow:auto;padding:36px 32px 32px;position:relative;transform:translateY(12px) scale(.98);transition:transform .25s;box-shadow:0 40px 80px -30px rgba(24,22,16,.4)}
.leadbackdrop.open .leadmodal{transform:translateY(0) scale(1)}
.leadmodal .lclose{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.leadmodal .lclose:hover{background:var(--ink);color:var(--paper)}
.leadmodal .lbl{margin-bottom:10px}
.leadmodal h3{margin:0 0 8px;font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em}
.leadmodal .lsub{color:var(--mute);font-size:14px;margin:0 0 22px;line-height:1.5}
.lfield{display:grid;gap:6px;margin-bottom:14px}
.lfield label{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.lfield input[type=text],.lfield input[type=email],.lfield textarea{font:400 15px/1.4 var(--sans);color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:12px 14px;width:100%;box-sizing:border-box;resize:vertical;font-family:var(--sans)}
.lfield input:focus,.lfield textarea:focus{outline:none;border-color:var(--navy)}
.lfield .lfile{display:flex;align-items:center;gap:12px;background:var(--ink);border:1px dashed var(--line-2);border-radius:8px;padding:12px 14px;flex-wrap:wrap}
.lfield .lfile .lfilebtn{cursor:pointer;color:var(--navy);font:500 13px var(--sans)}
.lfield .lfile input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.lfield .lfilename{font-size:13px;color:var(--mute)}
.lform .btn{width:100%;justify-content:center;margin-top:6px;font:500 15px/1 var(--sans);border:1px solid var(--navy)}
.lnote{font-size:12px;color:var(--dim);margin-top:14px;line-height:1.5}
.lsuccess{display:none;text-align:center;padding:6px 0 0}
.lsuccess.show{display:block}
.lsuccess p{color:var(--mute);font-size:14px;line-height:1.6;margin:0 0 22px}
.lsuccess a.btn{width:100%;justify-content:center}
/* ===================== diagrams =====================
   Coded, not exported images: they stay sharp, reflow on a phone, and the copy
   inside them is real text a crawler and a screen reader can read. */
.dg{margin-top:clamp(34px,4vw,52px)}
.dg-intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.dg-intro h3{margin:0;font-weight:500;font-size:clamp(24px,2.9vw,40px);line-height:1.1;letter-spacing:-.03em;color:var(--navy);max-width:24ch}
.dg-intro .aside{color:var(--mute);font-size:15px;line-height:1.55;max-width:38ch;padding-top:6px}
@media (max-width:860px){.dg-intro{grid-template-columns:1fr;gap:12px}}

.dg-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.dg-card.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.dg-card.flag{border-color:var(--gold)}
.dg-card.ghost{background:transparent;border-style:dashed;border-color:var(--line-2);color:var(--mute)}
.dg-card.mint{background:var(--mint-soft);border-color:var(--mint-line)}
.dg-t{font:400 14px/1.4 var(--mono);color:var(--paper)}
.dg-card.navy .dg-t{color:#fff}
.dg-s{font-size:12.5px;line-height:1.45;color:var(--mute);margin-top:5px}
.dg-badge{display:inline-flex;align-items:center;font:500 13px/1 var(--mono);background:var(--mint);color:var(--navy);border-radius:5px;padding:5px 9px;font-variant-numeric:tabular-nums}
.dg-badge.mid{background:var(--lilac)}
.dg-badge.low{background:var(--amber-soft);color:#7A5209}
.dg-chip{display:inline-block;font:400 12px/1 var(--mono);background:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 9px;color:var(--mute)}
.dg-card.navy .dg-chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#E8E6DD}
.dg-chip.on,.dg-card.navy .dg-chip.on{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.dg-chips{display:flex;flex-wrap:wrap;gap:7px}
.dg-eyebrow{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dg-arrow{display:grid;place-items:center;color:var(--navy);font-size:19px;line-height:1}
@media (max-width:900px){.dg-arrow{transform:rotate(90deg);padding-block:4px}}

/* --- A. platform architecture: what arrives → four layers → where it lands --- */
.dg-arch{display:grid;grid-template-columns:minmax(150px,.85fr) 28px minmax(0,3fr) 28px minmax(130px,.72fr);gap:14px;align-items:center;margin-top:30px}
.dg-arch .col{display:grid;gap:9px;align-self:stretch;align-content:start}
.dg-layer{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,.78fr);gap:18px;align-items:center}
.dg-layer .who{font:400 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.dg-layer.navy-row .who{color:var(--mint)}
.dg-layer h3{margin:0 0 9px;font:500 17px/1.25 var(--sans);letter-spacing:-.015em}
.dg-layer .rail{border-left:1px solid var(--line);padding-left:18px;font-size:13px;line-height:1.45;color:var(--mute)}
.dg-card.navy .rail,.dg-layer.navy-row .rail{border-left-color:rgba(255,255,255,.2);color:#C9C7BD}
@media (max-width:1100px){.dg-layer{grid-template-columns:86px minmax(0,1fr);gap:14px}.dg-layer .rail{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:11px 0 0}.dg-layer.navy-row .rail{border-top-color:rgba(255,255,255,.2)}}
@media (max-width:900px){.dg-arch{grid-template-columns:1fr}.dg-arch .col{gap:9px}}

/* --- B. anatomy of one agent --- */
.dg-io{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1.15fr) 30px minmax(0,1.25fr);gap:14px;align-items:center;margin-top:28px}
.dg-io .col{display:grid;gap:10px;align-self:stretch;align-content:start}
.dg-weigh{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.dg-weigh li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.35;color:#fff}
.dg-weigh li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);margin-top:6px}
.dg-weigh li.off{color:#9C9AAF}
.dg-weigh li.off::before{background:#5A5A82}
.dg-verdict{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dg-verdict strong{font:500 20px/1.2 var(--sans);letter-spacing:-.02em;color:var(--navy)}
.dg-card.verdict{border-color:var(--mint-line);box-shadow:0 0 0 1px var(--mint-line) inset}
.dg-agents{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:22px}
.dg-agent{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px}
.dg-agent.on{background:var(--navy);border-color:var(--navy)}
.dg-agent b{display:block;font:500 14px/1.2 var(--sans);letter-spacing:-.01em}
.dg-agent.on b{color:#fff}
.dg-agent span{display:block;margin-top:6px;font:400 11.5px/1.4 var(--mono);color:var(--mute);word-break:break-word}
.dg-agent.on span{color:var(--mint)}
@media (max-width:1040px){.dg-agents{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.dg-io{grid-template-columns:1fr}}
@media (max-width:560px){.dg-agents{grid-template-columns:repeat(2,1fr)}}

/* --- C. governance: one change, three lanes --- */
.dg-gov{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2.5fr);gap:56px;align-items:center;margin-top:28px}
.dg-lanes{display:grid;gap:12px}
.dg-lane{position:relative;display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,2fr) minmax(0,.82fr);gap:20px;align-items:center;border-radius:10px;padding:20px 22px;border:1px solid var(--line);background:#fff}
/* each lane draws its own arrowhead, so the fork lines up exactly whatever the lane heights */
.dg-lane::before{content:"";position:absolute;left:-34px;top:50%;transform:translateY(-50%);border-left:8px solid var(--line-2);border-top:6px solid transparent;border-bottom:6px solid transparent}
.dg-lane::after{content:"";position:absolute;left:-34px;top:50%;width:22px;border-top:1px solid var(--line-2);transform:translate(-22px,-50%)}
.dg-lane h4{margin:0;font:500 18px/1.2 var(--sans);letter-spacing:-.02em}
.dg-lane .mode{display:block;margin-top:6px;font:400 12px var(--mono);color:var(--mute)}
.dg-lane p{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
.dg-lane .rail{border-left:1px solid var(--line);padding-left:20px;font-size:13px;line-height:1.45;color:var(--mute)}
.dg-lane.auto{background:var(--mint-soft);border-color:var(--mint-line)}
.dg-lane.auto p,.dg-lane.auto .rail{color:#3F6B57}
.dg-lane.auto .rail{border-left-color:var(--mint-line)}
.dg-lane.human{background:var(--navy);border-color:var(--navy)}
.dg-lane.human h4{color:#fff}
.dg-lane.human .mode{color:var(--mint)}
.dg-lane.human p{color:#C9C7DD}
.dg-lane.human .rail{color:#C9C7DD;border-left-color:rgba(255,255,255,.22)}
.dg-fork{position:relative;align-self:stretch}
.dg-fork svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@media (max-width:1100px){.dg-lane{grid-template-columns:minmax(130px,.8fr) minmax(0,2fr)}.dg-lane .rail{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:11px 0 0}.dg-lane.human .rail{border-top-color:rgba(255,255,255,.22)}.dg-lane.auto .rail{border-top-color:var(--mint-line)}}
@media (max-width:900px){.dg-gov{grid-template-columns:1fr;gap:18px}.dg-lane{grid-template-columns:1fr;gap:12px}.dg-lane::before,.dg-lane::after{display:none}}

/* --- D. the loop --- */
.dg-loop{position:relative;width:100%;max-width:760px;aspect-ratio:1;margin:26px auto 0}
.dg-loop svg.ring{position:absolute;inset:0;width:100%;height:100%}
.dg-loop .node{position:absolute;width:26%;min-width:150px;transform:translate(-50%,-50%)}
.dg-loop .centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;text-align:center}
.dg-loop .centre h3{margin:8px 0 10px;font:500 clamp(19px,2.1vw,26px)/1.18 var(--sans);letter-spacing:-.025em;color:var(--navy)}
.dg-loop .centre p{margin:0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.dg-return{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;margin-top:26px;max-width:34ch}
.dg-return .bar{height:2px;background:var(--mint);border-radius:2px;margin-top:9px}
.dg-return b{display:block;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.dg-return p{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
@media (max-width:820px){
  .dg-loop{aspect-ratio:auto;max-width:none;display:grid;gap:10px}
  .dg-loop svg.ring{display:none}
  .dg-loop .node,.dg-loop .centre{position:static;transform:none;width:auto}
  .dg-loop .centre{text-align:left;order:-1;padding-bottom:6px}
}

/* --- E. three supplier records → one canonical record --- */
.dg-canon{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1.35fr);gap:14px;align-items:center;margin-top:28px}
.dg-canon .col{display:grid;gap:10px;align-self:stretch;align-content:start}
.dg-sup{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.dg-sup .from{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.dg-warn{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:11px;font-size:13px;line-height:1.4;color:var(--tbd);font-weight:500}
.dg-hl{color:var(--tbd);font-weight:600}
.dg-rows{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);margin-top:16px}
.dg-row{display:grid;grid-template-columns:minmax(96px,.85fr) minmax(76px,.72fr) minmax(0,1.5fr) auto;gap:14px;align-items:center;background:#fff;padding:11px 0}
.dg-row .k{font-size:13.5px;color:var(--paper)}
.dg-row .v{font:500 13.5px var(--mono);color:var(--navy)}
.dg-row .v.rev{color:var(--tbd)}
.dg-row .src{font-size:12.5px;color:var(--mute);line-height:1.35}
.dg-canon .foot{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--paper)}
.dg-canon .foot .tick{color:var(--navy)}
.dg-cycle{display:grid;place-items:center;gap:8px}
.dg-cycle .knob{width:40px;height:40px;border-radius:9px;background:var(--navy);display:grid;place-items:center;color:var(--mint);font-size:17px}
@media (max-width:1000px){.dg-row{grid-template-columns:minmax(90px,1fr) minmax(70px,1fr) auto;row-gap:4px}.dg-row .src{grid-column:1/-1;order:3}}
@media (max-width:900px){.dg-canon{grid-template-columns:1fr}.dg-cycle{grid-auto-flow:column;gap:14px;padding-block:4px}}

.tbd{color:var(--tbd)}
/* ---- AI Research Agent — standalone self-serve product surface ---- */
.raghero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);text-align:center;background:radial-gradient(120% 90% at 50% 0%,var(--mint-soft) 0%,rgba(222,244,236,0) 55%),var(--bg)}
.raghero .wrap{padding-block:clamp(120px,14vw,168px) clamp(48px,6vw,80px);display:grid;justify-items:center;gap:20px}
.ragbadge{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:#fff;border:1px solid var(--mint-line);border-radius:999px;padding:8px 16px}
.ragbadge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint)}
.raghero h1{font-family:var(--sans);font-weight:600;font-size:clamp(38px,5vw,68px);line-height:1.04;letter-spacing:-.03em;max-width:24ch;margin:0}
.raghero .sub{max-width:66ch;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--mute);margin:0}
.raghero .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.raghero .free{font:400 13px var(--mono);color:var(--mute)}
.ragmock{max-width:1000px;margin:clamp(24px,3vw,48px) auto 0;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -40px rgba(0,0,92,.45);overflow:hidden;text-align:left}
.ragmock .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ragmock .mhead b{font:600 15px var(--sans);letter-spacing:-.01em}
.ragmock .mhead .req{font:400 12px var(--mono);color:var(--mint)}
.ragmock .mbody{padding:20px}
.ragchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ragchip{display:inline-flex;align-items:center;gap:7px;font:500 13px var(--sans);color:var(--paper);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.ragchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.ragchip svg{width:15px;height:15px;flex:none}
.ragprompt{border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-height:88px;color:var(--dim);font-size:15px;background:var(--bg)}
.ragctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.ragpill{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--sans);color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px}
.ragsend{margin-left:auto;width:44px;height:44px;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:18px}
.ragsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);margin-top:44px}
.ragcard{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,36px);background:var(--ink)}
.ragcard.hi{background:var(--navy);color:#fff;border-color:var(--navy)}
.ragcard .k{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ragcard.hi .k{color:var(--mint)}
.ragcard h3{font:600 clamp(20px,2vw,26px)/1.1 var(--sans);letter-spacing:-.02em;margin:12px 0 10px}
.ragcard p{color:var(--mute);font-weight:300;margin:0 0 18px;max-width:42ch}
.ragcard.hi p{color:rgba(255,255,255,.72)}
.ragcard ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ragcard li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.ragcard li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);margin-top:7px;flex:none}
@media (max-width:560px){.ragsend{margin-left:0}}
@media (max-width:820px){.ragsplit{grid-template-columns:1fr}}
/* research-agent playful light-blue theme */
.raghero.play{background:radial-gradient(120% 90% at 50% 0%,#E3E6FB 0%,rgba(227,230,251,0) 58%),linear-gradient(180deg,#EEF0FC 0%,var(--bg) 60%)}
.ragbadge.blue{color:#2A2AA8;border-color:#C4C8F2;background:#fff}
.ragbadge.blue::before{background:#4A4AE0}
.ragmock.play{box-shadow:0 34px 70px -40px rgba(0,0,92,.55)}
.ragchip.on.blue{background:#3A3AC4;border-color:#3A3AC4}
.ragsend.blue{background:#3A3AC4}
/* ready-to-use agent templates */
.agcats{display:grid;gap:clamp(28px,3.4vw,44px);margin-top:44px}
.agcat .ch{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#3A3AC4;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.agcat .ch::after{content:"";flex:1;height:1px;background:var(--line)}
.agcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.agtile{border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px 22px 20px;display:grid;gap:9px;align-content:start;text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s}
.agtile:hover{border-color:#C4C8F2;transform:translateY(-2px);box-shadow:0 18px 34px -22px rgba(0,0,92,.35)}
.agtile .dot{width:8px;height:8px;border-radius:50%;background:#4A4AE0;box-shadow:0 0 10px rgba(74,74,224,.5)}
.agtile h3{margin:0;font:600 16px/1.25 var(--sans);letter-spacing:-.015em;color:var(--paper)}
.agtile p{margin:0;font-size:13.5px;line-height:1.45;color:var(--mute)}
.agtile .go{margin-top:4px;font:500 13px var(--sans);color:#3A3AC4;display:inline-flex;align-items:center;gap:6px}
@media (max-width:860px){.agcards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.agcards{grid-template-columns:1fr}}
/* ERP integration grid + implementation timeline (Platform / Home) */
.erpgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:36px}
.erpgrid .e{background:#fff;min-height:90px;display:grid;place-items:center;padding:16px;font:600 15px var(--sans);letter-spacing:-.01em;color:var(--mute);text-align:center}
.erpgrid .e img{max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain}
@media (max-width:860px){.erpgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.erpgrid{grid-template-columns:repeat(2,1fr)}}
.impl{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:8px}
.impl .lead h2{margin-top:10px}
.impl .lead p{margin-top:16px}
.impltl{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.impltl details{border-bottom:1px solid var(--line)}
.impltl details:last-child{border-bottom:0}
.impltl summary{display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:center;padding:19px 24px;cursor:pointer;list-style:none}
.impltl summary::-webkit-details-marker{display:none}
.impltl .day{font:500 12px var(--mono);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;color:var(--mute)}
.impltl .ttl{font:500 16px var(--sans);letter-spacing:-.01em;color:var(--paper)}
.impltl summary::after{content:"+";font:300 22px/1 var(--sans);color:var(--dim);justify-self:end}
.impltl details[open] summary::after{content:"×"}
.impltl .d{padding:0 24px 22px 118px;color:var(--mute);font-size:14px;line-height:1.5;margin:0;max-width:60ch}
@media (max-width:820px){.impl{grid-template-columns:1fr}.impltl summary{grid-template-columns:72px 1fr auto;gap:12px}.impltl .d{padding-left:24px}}
/* structured final CTA — build once / deploy / improve (like industries) */
.finalcta{background:var(--navy);border-radius:16px;padding:clamp(34px,4.5vw,64px);display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3vw,44px);align-items:end}
.finalcta .lead h2{color:#fff;font-size:clamp(30px,3.6vw,52px);line-height:1.05;max-width:16ch}
.finalcta .lead h2 span{color:var(--mint)}
.finalcta .lead p{color:#C9C7DD;margin-top:16px;max-width:46ch;font-size:15px;line-height:1.5}
.finalcta .acts{display:flex;gap:12px;flex-wrap:wrap}
.finalcta .btn{background:#fff;color:var(--navy);border-color:#fff}
.finalcta .btn:hover{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.finalcta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.finalcta .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:760px){.finalcta{grid-template-columns:1fr;align-items:start}}
/* soft top CTA strip */
.softcta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;background:var(--ink);padding:16px 22px;margin-top:36px}
.softcta p{margin:0;font-size:15px;color:var(--paper)}
.softcta a{font:500 14px var(--sans);color:var(--navy);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* green "get in touch" nav CTA */
.btn.green{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.btn.green:hover{background:var(--mint-line);border-color:var(--mint-line);color:var(--navy)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.mission .w{opacity:1}h1 .ln>span{transform:none!important}}
/* ---------- cookie consent card ----------
   Bottom-right, ~320px, no overlay and no backdrop: the page stays readable and usable behind it.
   On phones it spans the gutter but still sits at the bottom and never covers the whole screen. */
.ccard{position:fixed;right:16px;bottom:16px;z-index:9000;width:320px;max-width:calc(100vw - 32px);
  padding:18px;border:1px solid var(--line-2);border-radius:14px;background:#fff;
  box-shadow:0 12px 32px rgba(0,0,92,.14);opacity:0;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease}
.ccard.in{opacity:1;transform:none}
.cc-t{margin:0 0 6px;font:500 15px/1.3 var(--sans);color:var(--navy)}
.cc-b{margin:0;font:400 13px/1.55 var(--sans);color:var(--mute)}
.cc-b a{color:var(--navy);text-decoration:underline;cursor:pointer}
.cc-acts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
/* .btn sets display:inline-flex, which beats the UA rule for [hidden] */
.ccard [hidden]{display:none}
.cc-accept{justify-content:center;padding:11px 18px;font-size:14px}
.cc-manage{padding:8px 4px;border:0;background:none;font:400 13px/1 var(--sans);color:var(--navy);
  text-decoration:underline;cursor:pointer}
.cc-manage:hover{color:var(--navy-2)}

.cc-prefs{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0}
.cc-row+.cc-row{border-top:1px solid var(--line)}
.cc-n{display:block;font:500 13px/1.3 var(--sans);color:var(--navy)}
.cc-d{display:block;margin-top:3px;font:400 12px/1.45 var(--sans);color:var(--mute)}
.cc-always{flex:0 0 auto;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);padding-top:3px}
.cc-save{width:100%;justify-content:center;margin-top:12px;padding:11px 18px;font-size:14px}

/* switch — a real checkbox, restyled, so the label and keyboard behaviour come for free */
.cc-sw{flex:0 0 auto;appearance:none;-webkit-appearance:none;margin:2px 0 0;width:38px;height:22px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--ink-3);cursor:pointer;
  position:relative;transition:background .18s ease,border-color .18s ease}
.cc-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,92,.3);transition:transform .18s ease}
.cc-sw:checked{background:var(--mint);border-color:var(--mint-line)}
.cc-sw:checked::after{transform:translateX(16px)}

@media (prefers-reduced-motion:reduce){
  .ccard,.cc-sw,.cc-sw::after{transition:none}
}
@media (max-width:640px){
  .ccard{right:12px;left:12px;bottom:12px;width:auto;max-width:none;padding:16px}
}

/* the one place to reopen the card after a decision: /legal/cookies § "Your choices".
   Keep an entry point somewhere — without it a saved choice can never be withdrawn, and the
   Cookie Policy says it can. build/audit_consent.py clicks this. */
.cookie-reopen{margin:4px 0 8px}
/* ---------- how it works: a pinned scene, copy scrolling past it ----------
   The scene sticks for the height of the step column, so one drawing carries every step instead
   of six illustrations stacking up. Below 900px the pin moves to the top of the viewport and the
   steps run underneath it, which keeps both readable on a phone. */
.hiw{padding-block:clamp(36px,6vw,80px)}
.hiw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}

.hiw-scene{position:sticky;top:clamp(84px,12vh,132px);align-self:start;z-index:2;
  aspect-ratio:600/460;border:1px solid var(--line);border-radius:14px;background:var(--ink);
  overflow:hidden;display:grid;place-items:stretch}
.hiw-scene canvas{width:100%;height:100%;display:block}
.hiw-caption{position:absolute;left:16px;bottom:14px;font:500 11px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.hiw-steps{display:grid;gap:clamp(40px,9vh,92px);padding-block:clamp(16px,6vh,56px)}
.hiw-step{max-width:52ch}
.hiw-step h2{margin:10px 0 0;font:500 clamp(21px,2.5vw,29px)/1.2 var(--sans);
  letter-spacing:-.025em;color:var(--navy);text-wrap:balance}
.hiw-step p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--mute)}
.hiw-step .hiw-meta{margin-top:12px;font:400 12px/1.6 var(--mono);color:var(--dim)}
.hiw-step .hiw-meta b{font-weight:500;color:var(--navy)}
/* the step the scene is currently drawing */
.hiw-step{opacity:.42;transition:opacity .4s ease}
.hiw-step.on{opacity:1}

@media (max-width:900px){
  .hiw-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  /* pinned at the top with the steps running underneath it, so it needs a solid ground
     and a lip to separate it from the copy passing behind */
  .hiw-scene{top:64px;aspect-ratio:600/360;box-shadow:0 10px 22px -16px rgba(0,0,92,.5)}
  .hiw-steps{gap:clamp(32px,7vh,64px);padding-block:24px}
  .hiw-step{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hiw-step{opacity:1;transition:none}
}
/* enrichment demo: before/after comparison slider (.enr-*) */
.enr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(40px,6vw,96px);align-items:start;--p:0}
.enr-copy{display:grid;gap:22px;align-content:start;position:sticky;top:120px}
.enr-count{display:flex;align-items:center;gap:20px;padding:22px 0;border-block:1px solid var(--line)}
.enr-count > div{display:grid;gap:6px;transition:opacity .2s}
.enr-count .n{font:500 clamp(44px,5vw,72px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--clear)}
.enr-count .enr-n0 .n{color:var(--dim)}
/* the hero counter follows the divider: 7 while the feed shows, 32 once the record is enriched */
.enr-count .enr-n0{opacity:calc(1 - var(--p) * .6)}
.enr-count .enr-n1{opacity:calc(.3 + var(--p) * .7)}
.enr-count .c{font-size:13px;color:var(--mute);font-weight:300;max-width:16ch}
.enr-to{font-size:28px;color:var(--mute)}
.enr-note{margin:0;font-size:13px;color:var(--mute);font-weight:300}
.enr-grid{display:grid;gap:clamp(56px,7vw,112px);margin-top:clamp(48px,6vw,80px)}
/* one panel per row, copy beside it, alternating sides like the 7 → 32 section */
.enr-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(40px,6vw,96px);align-items:center}
.enr-card:nth-child(even){grid-template-columns:minmax(0,600px) minmax(0,1fr)}
.enr-card:nth-child(even) .enr-head{order:2}
.enr-head{display:grid;gap:8px}
.enr-head p{margin:0;color:#4E4B43;font-weight:300;max-width:40ch;font-size:clamp(17px,1.5vw,20px)}
@media (max-width:900px){
  .enr-split{grid-template-columns:minmax(0,1fr)}
  .enr-copy{position:static}
  .enr-card,.enr-card:nth-child(even){grid-template-columns:minmax(0,1fr);gap:20px}
  .enr-card:nth-child(even) .enr-head{order:0}
}

/* The stage: a raised warm panel on a faint dot grid, holding the two cards. */
.enr-box{position:relative;display:grid;gap:14px;width:100%;max-width:600px;padding:clamp(14px,2.2vw,26px);border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(circle at 1px 1px,rgba(0,0,92,.07) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(180deg,var(--ink),var(--ink-2));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 24px 48px -32px rgba(0,0,92,.28)}
.enr-legend{display:flex;justify-content:space-between;gap:8px}
.enr-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.enr-tag i{width:6px;height:6px;border-radius:50%}
.enr-tag.b{background:rgba(255,255,255,.6);border:1px solid var(--line);color:var(--mute);opacity:calc(.4 + (1 - var(--p)) * .6)}
.enr-tag.b i{background:var(--dim)}
.enr-tag.a{background:var(--navy);color:#fff;opacity:calc(.4 + var(--p) * .6)}
.enr-tag.a i{background:var(--mint)}
.enr-hint{display:flex;justify-content:center;font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* The two layers are the same size; each is clipped to its own side of --pos. */
.enr-cmp{position:relative;margin:0;width:100%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.enr-cmp.on{cursor:grabbing}
.enr-cmp img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.enr-a{clip-path:inset(0 0 0 var(--pos))}
.enr-b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);filter:saturate(.35)}
/* mint wash trailing the beam into the enriched side, as if just processed */
.enr-cmp::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:min(90px,18%);pointer-events:none;border-radius:0 8px 8px 0;
  background:linear-gradient(90deg,rgba(75,208,160,.22),rgba(75,208,160,0));opacity:calc(min(1, var(--p) * 12) * min(1, (1 - var(--p)) * 12))}
.enr-bar{position:absolute;top:-6px;bottom:-6px;left:var(--pos);width:3px;margin-left:-1.5px;border-radius:3px;outline:none;
  background:linear-gradient(180deg,transparent,var(--mint) 10%,#EAFFF6 50%,var(--mint) 90%,transparent);box-shadow:0 0 14px 2px rgba(75,208,160,.55)}
.enr-knob{position:absolute;top:min(50%,220px);left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--navy);
  box-shadow:0 0 0 3px var(--mint),0 0 0 7px rgba(75,208,160,.18),0 8px 22px rgba(0,0,92,.3);transition:transform .2s ease}
.enr-knob::before,.enr-knob::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid #fff;border-width:0 0 2px 2px}
.enr-knob::before{left:13px;transform:rotate(45deg)}
.enr-knob::after{right:13px;transform:rotate(-135deg)}
.enr-cmp:hover .enr-knob,.enr-cmp.on .enr-knob{transform:scale(1.1)}
.enr-bar:focus-visible .enr-knob{box-shadow:0 0 0 3px var(--mint),0 0 0 6px var(--clear)}
.enr-card,.enr-box,.enr-legend{min-width:0}
@media (max-width:420px){.enr-tag{padding:6px 9px;gap:6px;letter-spacing:.06em}}
/* ---------- HS code finder (/tools/hs-code-finder) ---------- */
.hs-sec{padding-block:clamp(48px,6vw,88px)}
.hs-tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:start}
@media (max-width:900px){.hs-tool{grid-template-columns:minmax(0,1fr)}}

.hs-form{display:grid;gap:10px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(0,0,92,.03),0 18px 40px -28px rgba(0,0,92,.25)}
.hs-label{font:500 14px/1.3 var(--sans);color:var(--paper);margin-top:8px}
.hs-label:first-child{margin-top:0}
.hs-label span{color:var(--mute);font-weight:400}
.hs-form textarea,.hs-form select,.hs-email input[type=email]{width:100%;font:400 16px/1.5 var(--sans);color:var(--paper);background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.hs-form textarea{resize:vertical;min-height:132px}
.hs-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.hs-form textarea:focus,.hs-form select:focus,.hs-email input[type=email]:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,0,92,.1)}
.hs-meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--mute)}
.hs-len{font-family:var(--mono);flex:none}
.hs-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.hs-try .lbl{font-size:11px;margin-right:2px}
.hs-try button{font:400 13px/1 var(--sans);color:var(--navy);background:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .2s,border-color .2s}
.hs-try button:hover{background:var(--ink-2);border-color:var(--line-2)}
.hs-ts:empty{display:none}
.hs-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:10px}
.hs-go .btn:disabled{opacity:.55;cursor:progress}
.hs-runs{font:500 12px/1.3 var(--mono);color:var(--mute);letter-spacing:.02em}
.hs-fine{margin:4px 0 0;font-size:12px;color:var(--dim)}

.hs-out{display:grid;gap:14px;min-width:0;scroll-margin-top:96px}
.hs-out [hidden]{display:none!important}
.hs-status{font-size:15px;padding:12px 16px;border-radius:10px;background:var(--ink);border:1px solid var(--line)}
.hs-status[data-kind=err]{background:#FBEDE8;border-color:#F0C9BC;color:#8A3620}
.hs-status[data-kind=ok]{background:var(--mint-soft);border-color:var(--mint-line);color:#1C5B43}
.hs-progress{display:flex;align-items:center;gap:12px;font:500 14px/1.3 var(--sans);color:var(--navy)}
.hs-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-3);border-top-color:var(--navy);animation:hs-spin .8s linear infinite;flex:none}
@keyframes hs-spin{to{transform:rotate(360deg)}}

.hs-card{position:relative;padding:clamp(20px,2.6vw,36px);border-radius:16px;background:var(--ink);border:1px solid var(--line);transition:opacity .3s}
.hs-card.dim{opacity:.45}
.hs-card.pop{animation:hs-pop .45s ease}
@keyframes hs-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hs-cardtop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.hs-tag{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#1C5B43;background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:999px;padding:6px 10px}
.hs-card.is-example .hs-tag{color:var(--mute);background:#fff;border-color:var(--line)}
.hs-nom{font:500 12px/1 var(--mono);color:var(--mute)}
.hs-code{font:500 clamp(44px,6vw,72px)/1 var(--mono);color:var(--navy);letter-spacing:-.02em}
.hs-name{margin:12px 0 0;font-size:17px;line-height:1.45;color:var(--paper);max-width:60ch}
.hs-path{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.hs-path li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4}
.hs-path li span{font:500 13px/1.4 var(--mono);color:var(--navy)}
.hs-path li b{font-weight:400;color:#55524A}
.hs-path li:nth-child(2){padding-left:14px}
.hs-path li:nth-child(3){padding-left:28px}
.hs-path li:nth-child(3) b{color:var(--paper);font-weight:500}
@media (max-width:520px){.hs-path li{grid-template-columns:58px minmax(0,1fr)}.hs-path li:nth-child(2){padding-left:8px}.hs-path li:nth-child(3){padding-left:16px}}

.hs-conf{margin-top:22px}
.hs-confhead{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--mute)}
.hs-confhead b{font:500 13px/1.4 var(--mono);color:var(--paper)}
.hs-meter{height:6px;border-radius:99px;background:#fff;border:1px solid var(--line);margin-top:8px;overflow:hidden}
.hs-meter i{display:block;height:100%;border-radius:inherit;background:var(--mint);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.hs-conf[data-level=mid] .hs-meter i{background:#8C8CE0}
.hs-conf[data-level=low] .hs-meter i{background:var(--gold)}
.hs-more{margin:10px 0 0;font-size:14px;color:var(--tbd)}

.hs-why,.hs-alt{margin-top:22px}
.hs-card h2{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.hs-why p,.hs-alt p{margin:0;font-size:15px;line-height:1.55;color:var(--paper)}
.hs-alt b{font:500 14px var(--mono);color:var(--navy);margin-right:6px}
.hs-alt .hs-altwhy{margin-top:4px;color:#55524A}
.hs-src{margin:22px 0 0;font-size:12px;color:var(--mute)}

.hs-email{display:grid;gap:10px;padding:clamp(20px,2.4vw,28px);border-radius:16px;border:1px solid var(--navy);background:#fff}
.hs-email h3{margin:0;font-size:19px;font-weight:500;color:var(--navy)}
.hs-email p{margin:0;color:#55524A}
.hs-emailrow{display:flex;gap:10px;flex-wrap:wrap}
.hs-emailrow input{flex:1 1 220px;min-width:0}
.hs-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute)}
.hs-check input{margin-top:3px;accent-color:var(--navy)}

.hs-disclaimer{margin:0;font-size:13px;color:var(--mute)}
.hs-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:18px 20px;border-radius:14px;border:1px dashed var(--line-2)}
.hs-cta div{display:grid;gap:4px;flex:1 1 280px;min-width:0}
.hs-cta b{font-weight:500;color:var(--navy)}
.hs-cta span{font-size:14px;color:#55524A}

.hs-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.hs-steps li{padding:24px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.hs-steps .n{font:500 13px var(--mono);color:var(--mint)}
.hs-steps h3{margin:10px 0 8px;font-size:19px;font-weight:500;color:var(--navy)}
.hs-steps p{margin:0;font-size:15px;color:#55524A}
@media (max-width:820px){.hs-steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hs-card.pop{animation:none}.hs-spin{animation-duration:2s}}
/* ---------- research list preview (/ai-research-agent) ---------- */
.rl .ragchip{cursor:pointer;font-family:var(--sans);transition:background .2s,border-color .2s,color .2s}
.rl .ragchip:not(.on):hover{border-color:var(--line-2);background:var(--ink)}
.rl textarea.ragprompt{display:block;width:100%;resize:vertical;min-height:88px;font:400 15px/1.5 var(--sans);color:var(--paper);transition:border-color .2s,box-shadow .2s}
.rl textarea.ragprompt::placeholder{color:var(--dim)}
.rl textarea.ragprompt:focus{outline:none;border-color:#3A3AC4;box-shadow:0 0 0 3px rgba(58,58,196,.12)}
.rl-tpls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.rl-tpls .lbl{font-size:11px;margin-right:2px}
.ragtpl{font:400 13px/1 var(--sans);color:#2A2AA8;background:#F1F2FD;border:1px solid #D9DCF7;border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .2s,border-color .2s}
.ragtpl:hover{background:#E6E8FB;border-color:#C4C8F2}
.ragtpl.on{background:#3A3AC4;border-color:#3A3AC4;color:#fff}
.ragtpl[hidden]{display:none}
.rl-ts:empty{display:none}
.rl-ts{margin-top:12px}
.rl .ragsend{border:0;cursor:pointer;font:500 18px/1 var(--sans);transition:background .2s,opacity .2s}
.rl .ragsend:hover{background:#2A2AA8}
.rl .ragsend:disabled{opacity:.5;cursor:progress}
.rl-runs{margin-left:auto;font:500 12px/1.3 var(--mono);color:var(--mute)}
.rl-runs:empty{display:none}
.rl-runs:not(:empty)+.ragsend{margin-left:0}

/* Locked pills: a tooltip on hover, focus or tap, never a redirect. */
.rl-lock{position:relative;cursor:help}
.rl-lock::after{content:"";width:10px;height:10px;margin-left:2px;flex:none;background:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.rl-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:260px;padding:10px 12px;border-radius:10px;background:var(--navy);color:#fff;font:400 13px/1.45 var(--sans);text-align:left;box-shadow:0 12px 30px -12px rgba(0,0,92,.5);display:none;pointer-events:none;z-index:5}
.rl-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--navy)}
.rl-lock:hover .rl-tip,.rl-lock:focus-visible .rl-tip,.rl-lock.show .rl-tip{display:block;transform:translate(-50%,0);animation:rl-tip .15s ease}
@keyframes rl-tip{from{opacity:0}}
.rl-lock:hover,.rl-lock.show{border-color:#C4C8F2;color:#2A2AA8}
/* the first pill sits at the card's edge (overflow:hidden): anchor its tip left */
.rl-lock:first-child .rl-tip{left:0}
.rl-lock:first-child:hover .rl-tip,.rl-lock:first-child.show .rl-tip,.rl-lock:first-child:focus-visible .rl-tip{transform:none}
.rl-lock:first-child .rl-tip::after{left:32px}

/* Output */
.rl-out{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 20px 20px;background:#FCFCFE}
.rl-out [hidden]{display:none!important}
.rl-out:not(:has(>:not([hidden]))){display:none}
.rl-status{font-size:15px;padding:12px 16px;border-radius:10px;background:var(--ink);border:1px solid var(--line)}
.rl-status[data-kind=err]{background:#FBEDE8;border-color:#F0C9BC;color:#8A3620}
.rl-status[data-kind=ok]{background:var(--mint-soft);border-color:var(--mint-line);color:#1C5B43}
.rl-progress{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font:500 14px/1.3 var(--sans);color:#2A2AA8}
.rl-progress .hs-spin{border-top-color:#3A3AC4}
.rl-eta{font:400 12px var(--mono);color:var(--mute)}
.rl-email{display:grid;gap:8px;padding:18px;border-radius:12px;border:1px solid #3A3AC4;background:#fff}
.rl-email b{font-weight:500;color:var(--navy)}
.rl-email>span{color:#55524A;font-size:14px}
.rl-emailrow{display:flex;gap:10px;flex-wrap:wrap}
.rl-emailrow input{flex:1 1 220px;min-width:0;font:400 16px/1.5 var(--sans);border:1px solid var(--line-2);border-radius:10px;padding:10px 14px}

.rl-result.dim{opacity:.45}
.rl-result.pop{animation:hs-pop .45s ease}
.rl-rhead{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;flex-wrap:wrap;margin-bottom:12px}
.rl-title{font:600 15px/1.35 var(--sans);letter-spacing:-.005em;color:var(--paper)}
.rl-meta{font:400 11.5px var(--mono);color:var(--mute);white-space:nowrap}
.rl-tablewrap{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.rl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rl-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.45}
.rl-table th{position:sticky;top:0;text-align:left;font:500 12px/1.3 var(--mono);letter-spacing:.02em;color:#4A4AA0;background:linear-gradient(180deg,#F3F4FD,#ECEEFB);padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.rl-table td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top;min-width:110px;max-width:340px;overflow-wrap:break-word;color:var(--paper)}
.rl-table tbody:not(.rl-ghost) td:first-child{font-weight:500}
.rl-table tbody:not(.rl-ghost) tr:nth-child(even) td{background:#FAFAFE}
.rl-table tbody:not(.rl-ghost) tr{transition:background .15s}
.rl-table tbody:not(.rl-ghost) tr:hover td{background:#F4F5FD}
.rl-url{display:block;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--mute)}
.rl-srccol{white-space:nowrap}
td.rl-srccol{min-width:0}
.rl-srclink{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:999px;background:#F1F2FD;border:1px solid #E1E3F8;color:#2A2AA8;font-size:12.5px;text-decoration:none;transition:background .15s,border-color .15s}
.rl-srclink:hover{background:#E6E8FB;border-color:#C4C8F2}
.rl-srclink::after{content:"↗";font-size:11px;opacity:.7}
.rl-srclink .rl-ico{width:18px;height:18px;font-size:10px}
/* entity column: site icon on a monogram tinted from the host name */
.rl-ent{display:inline-flex;align-items:flex-start;gap:9px}
.rl-ent>span:last-child{padding-top:1px}
.rl-ico{--h:240;position:relative;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;overflow:hidden;
  background:hsl(var(--h) 70% 94%);color:hsl(var(--h) 45% 34%);font:600 11px/1 var(--sans);box-shadow:inset 0 0 0 1px hsl(var(--h) 40% 86%)}
.rl-ico img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;opacity:0;transition:opacity .2s}
.rl-ico.img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.rl-ico.img img{opacity:1}
.rl-num{font-weight:500;font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}
.rl-tag{display:inline-block;padding:2px 9px;border-radius:999px;background:#F1F2FD;border:1px solid #E1E3F8;color:#2A2AA8;font-size:12.5px;white-space:nowrap}
/* Placeholder rows: bars only, no data, blurred under the gate. */
.rl-ghost td{height:39px}
.rl-ghost i{display:block;height:9px;border-radius:5px;background:#DCDFF3}
.rl-ghost td:first-child i{background:#D3D6F2}
.rl-ghost td:last-child i{background:#E1E3F8}
.rl-ghost{filter:blur(3px);opacity:.8;user-select:none;pointer-events:none}
.rl-gate{position:absolute;left:0;right:0;bottom:0;height:215px;display:flex;align-items:flex-end;justify-content:center;gap:12px 20px;flex-wrap:wrap;padding:24px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.82) 38%,#fff 70%)}
.rl-gate>div{display:grid;gap:4px;max-width:46ch;text-align:left}
.rl-gate b{font:600 17px/1.3 var(--sans);color:var(--navy)}
.rl-gate span{font-size:14px;color:#55524A}
.rl-gate .btn{background:#3A3AC4;border-color:#3A3AC4;color:#fff}
.rl-gate .btn .arr{color:#fff}
.rl-gate .btn:hover{background:#2A2AA8;border-color:#2A2AA8}
.rl-src{margin:12px 0 0;font-size:12px;color:var(--mute)}
@media (max-width:560px){.rl .ragpill{font-size:12px;padding:7px 11px}.rl-table td{max-width:240px}.rl-gate{position:relative;height:auto;margin-top:-150px;padding-top:96px;align-items:stretch;flex-direction:column;justify-content:flex-end}.rl-gate .btn{justify-content:center}.rl-out{padding:18px 14px}}
/* phones: pills wrap unpredictably, so the tip spans the whole pill row instead */
@media (max-width:560px){.rl .ragctrls{position:relative}.rl .rl-lock{position:static}
  .rl .rl-lock .rl-tip,.rl .rl-lock:first-child .rl-tip{left:0;right:0;max-width:none;width:auto;transform:none!important}
  .rl .rl-tip::after{display:none}}
/* The tour: a live dot while examples play, a pressed send button. */
.rl-tour .mhead .req{display:inline-flex;align-items:center;gap:7px}
.rl-tour .mhead .req::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);animation:rl-live 1.6s ease-in-out infinite}
@keyframes rl-live{50%{opacity:.35;transform:scale(.8)}}
.rl .ragsend{transition:background .2s,opacity .2s,transform .12s}
.rl .ragsend.press{transform:scale(.9);background:#2A2AA8}
/* ---------- product page report (/tools/product-page-report) ----------
   Reuses the HS finder's form, status, progress, email and CTA pieces (17-hs-code.css). */
.pr-form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(0,0,92,.03),0 18px 40px -28px rgba(0,0,92,.25)}
.pr-row{display:flex;gap:10px;flex-wrap:wrap}
.pr-row input{flex:1 1 260px;min-width:0;font:400 16px/1.5 var(--sans);color:var(--paper);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.pr-row input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,0,92,.1)}
.pr-row .btn:disabled{opacity:.55;cursor:progress}
.pr-meta{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.pr-runs{font:500 12px/1.5 var(--mono)}
.pr-ts:empty{display:none}

.pr-out{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px;scroll-margin-top:96px}
.pr-out [hidden]{display:none!important}
.pr-card{padding:clamp(20px,2.6vw,36px);border-radius:16px;background:var(--ink);border:1px solid var(--line);transition:opacity .3s}
.pr-card.dim{opacity:.45}
.pr-card.pop{animation:hs-pop .45s ease}
.pr-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center}
@media (max-width:560px){.pr-top{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* score ring: green / indigo / amber by band, grey when not measured */
.pr-score{position:relative;width:132px;height:132px;flex:none}
.pr-score svg{width:100%;height:100%;transform:rotate(-90deg)}
.pr-score circle{fill:none;stroke-width:10}
.pr-score .trk{stroke:#fff}
.pr-score .val{stroke:var(--line-2);stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.2,.7,.2,1),stroke .3s}
.pr-score[data-level=high] .val{stroke:var(--mint)}
.pr-score[data-level=mid] .val{stroke:#6C6CD9}
.pr-score[data-level=low] .val{stroke:var(--gold)}
.pr-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.pr-num b{font:500 40px/1 var(--mono);color:var(--navy)}
.pr-num span{font:400 11px/1.4 var(--mono);color:var(--mute);letter-spacing:.04em}
.pr-card.is-rubric .pr-num b{font-size:34px}
.pr-head{display:grid;gap:8px;justify-items:start;min-width:0}
.pr-head h2{font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.02em;max-width:40ch;overflow-wrap:anywhere}
.pr-url{margin:0;font-size:14px;color:var(--mute);overflow-wrap:anywhere}
.pr-card:not(.is-rubric) .pr-url{font:400 13px var(--mono)}
.pr-facts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.pr-facts div{display:flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px}
.pr-facts dt{color:var(--mute)}
.pr-facts dd{margin:0;color:var(--paper);font-weight:500;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pr-secs{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:980px){.pr-secs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pr-secs{grid-template-columns:minmax(0,1fr)}}
.pr-secs li{padding:14px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.pr-sechead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pr-sechead b{font-weight:500;color:var(--navy);font-size:15px}
.pr-sechead span{font:500 12px var(--mono);color:var(--mute);white-space:nowrap}
.pr-bar{height:6px;border-radius:99px;background:var(--ink-2);overflow:hidden}
.pr-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--line-2);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.pr-secs li[data-level=high] .pr-bar i{background:var(--mint)}
.pr-secs li[data-level=mid] .pr-bar i{background:#6C6CD9}
.pr-secs li[data-level=low] .pr-bar i{background:var(--gold)}
.pr-secs p{margin:0;font-size:13px;line-height:1.45;color:#55524A}
.pr-secs .pr-q{font-weight:500;color:var(--paper)}
.pr-card:not(.is-rubric) .pr-secs p{display:none}

.pr-card h3{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.pr-fixes{margin-top:26px}
.pr-fixes ol{margin:0;padding:0;list-style:none;counter-reset:fx;display:grid;gap:8px}
.pr-fixes li{counter-increment:fx;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:15px;line-height:1.45}
.pr-fixes li::before{content:counter(fx);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:500 12px/1 var(--mono)}

.pr-findings{margin-top:26px}
.pr-group{border-top:1px solid var(--line)}
.pr-group:last-child{border-bottom:1px solid var(--line)}
.pr-group summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px;cursor:pointer;list-style:none}
.pr-group summary::-webkit-details-marker{display:none}
.pr-group summary b{font-weight:500;color:var(--paper)}
.pr-group summary span{font:400 12px var(--mono);color:var(--mute);margin-left:auto}
.pr-group summary::after{content:"+";font:300 20px/1 var(--sans);color:var(--dim)}
.pr-group[open] summary::after{content:"−"}
.pr-find{display:grid;gap:6px;padding:12px 14px;margin:0 0 10px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.pr-fhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr-fhead b{font-weight:500;font-size:15px}
.pr-pts{margin-left:auto;font:400 12px var(--mono);color:var(--mute)}
.pr-badge{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid}
.pr-find[data-status=found] .pr-badge{color:#1C5B43;background:var(--mint-soft);border-color:var(--mint-line)}
.pr-find[data-status=missing] .pr-badge{color:#7A5410;background:var(--amber-soft);border-color:#E9CF94}
.pr-find[data-status=conflict] .pr-badge{color:#8A3620;background:#FBEDE8;border-color:#F0C9BC}
.pr-find[data-status=na] .pr-badge{color:var(--mute);background:var(--ink);border-color:var(--line)}
.pr-find[data-status=na]{opacity:.7}
.pr-find p{margin:0;font-size:14px;line-height:1.5;color:#55524A}
.pr-ev{display:block;font:400 12.5px/1.5 var(--mono);color:var(--navy);background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere;white-space:pre-wrap}
.pr-fix{color:var(--paper)!important}
.pr-fix::before{content:"Fix · ";font:500 12px var(--mono);color:var(--navy)}
.pr-src{margin:22px 0 0;font-size:12px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.pr-card.pop{animation:none}.pr-score .val,.pr-bar i{transition:none}}