/* tradescaleplus.com: the one stylesheet every page links (was copied into each page; 17 Oct 2026).
   A page keeps inline only the rules no other page has (index.html, about.html). */
/* ============ TOKENS ============ */
/* Every colour on the site is a token. Dark (below) is the site's own look and the default; the light set further
   down takes over only when a visitor picks light with the switch (assets/theme.js keeps the choice on their device).
   Pages use these tokens and never a written-out colour, so both themes stay right everywhere. */
:root{
  --bg:#05070c;
  --w:#f3f6fa;
  --dim:rgba(243,246,250,.52);
  --mut:#96a0b0;
  --sub:#b9c2d0;
  --code:#c9d4e3;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --blue:#3b9eff;
  --teal:#34d8c8;
  --amber:#ffb454;
  --red:#ff8a8a;
  --red2:#ff6b6b;
  --orange:#ff8a5c;
  --err:#ffc2c2;
  --ink:#060a12;
  --on-accent:#04101f;
  /* the see-through shades: each colour's red, green and blue, used as rgba(var(--x-rgb),alpha) */
  --fg-rgb:255,255,255;
  --bg-rgb:5,7,12;
  --blue-rgb:59,158,255;
  --teal-rgb:52,216,200;
  --amber-rgb:255,180,84;
  --red-rgb:255,107,107;
  /* surfaces */
  --glass-a:rgba(13,18,28,.6);
  --glass-b:rgba(8,11,18,.52);
  --glass-hi:rgba(255,255,255,.07);
  --glass-edge:rgba(255,255,255,.14);
  --panel:rgba(10,14,22,.6);
  --panel2:rgba(10,14,22,.55);
  --chip-bg:rgba(9,13,20,.66);
  --field:rgba(255,255,255,.05);
  --code-bg:rgba(0,0,0,.35);
  --option-bg:#0a0f18;
  --tel-line:rgba(255,255,255,.24);
  --nav-bg:rgba(5,7,12,.55);
  --foot-bg:rgba(5,7,12,.6);
  --shadow:rgba(0,0,0,.4);
  --btn-shadow:rgba(0,0,0,.35);
  --lift-shadow:rgba(0,0,0,.45);
  --chip-shadow:rgba(0,0,0,.42);
  --float-shadow:rgba(0,0,0,.5);
  --grain:.05;
  --hex-glow:rgba(59,158,255,.10);
  --hex:url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%233b9eff' fill-opacity='.13' fill-rule='evenodd'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2396a0b0' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --disp:'Bricolage Grotesque','Inter',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* light: the AI Guard draft's palette (docs/drafts/ai-guard-page.html in the app repo), with the text colours a shade
   deeper (dim, mut, blue, teal, amber) so small text still reads at 4.5:1 where it crosses a hexagon line */
:root[data-theme="light"]{
  --bg:#f3f5f9;--w:#0b1220;--dim:rgba(11,18,32,.64);--mut:#4d5867;--sub:#36414f;--code:#2a3646;
  --line:rgba(11,18,32,.1);--line2:rgba(11,18,32,.2);
  --blue:#1256a8;--teal:#08635a;--amber:#844b00;--red:#ad2e22;--red2:#b42318;--orange:#c2410c;--err:#a12a1f;
  --ink:#ffffff;--on-accent:#ffffff;
  --fg-rgb:11,18,32;--bg-rgb:243,245,249;--blue-rgb:18,86,168;--teal-rgb:8,99,90;--amber-rgb:132,75,0;--red-rgb:173,46,34;
  --glass-a:rgba(255,255,255,.82);--glass-b:rgba(255,255,255,.7);--glass-hi:rgba(255,255,255,.9);--glass-edge:rgba(255,255,255,.8);
  --panel:rgba(255,255,255,.82);--panel2:rgba(255,255,255,.78);--chip-bg:rgba(255,255,255,.86);--field:rgba(255,255,255,.92);
  --code-bg:rgba(11,18,32,.04);--option-bg:#ffffff;--tel-line:rgba(11,18,32,.28);
  --nav-bg:rgba(243,245,249,.8);--foot-bg:rgba(243,245,249,.85);
  --shadow:rgba(20,32,56,.1);--btn-shadow:rgba(20,32,56,.16);--lift-shadow:rgba(20,32,56,.14);--chip-shadow:rgba(20,32,56,.1);--float-shadow:rgba(20,32,56,.22);
  --grain:.03;
  --hex-glow:rgba(23,105,201,.10);--hex:url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%231769c9' fill-opacity='.12' fill-rule='evenodd'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2355606f' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{position:relative;font-family:var(--sans);background:var(--bg);color:var(--w);font-size:15px;line-height:1.6;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block}
::selection{background:rgba(var(--blue-rgb),.35)}

/* ============ BACKGROUND LAYERS: VEIL, HEX SURFACE, GRAIN, CONTENT (front) ============ */
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(130% 100% at 50% 0%,rgba(var(--bg-rgb),.25),rgba(var(--bg-rgb),.9) 78%),
  linear-gradient(180deg,rgba(var(--bg-rgb),.5),rgba(var(--bg-rgb),.62));
  opacity:.85}
.hexbg{position:absolute;inset:0;z-index:2;pointer-events:none;background-color:var(--bg);background-image:radial-gradient(120% 70% at 50% 0%,var(--hex-glow),rgba(5,7,12,0) 58%),var(--hex);background-size:auto,44px 77px}
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.content{position:relative;z-index:4}
/* Words on the hexagons: a halo in the page colour clears the lines around each letter; the pattern stays everywhere else */
.content :is(h1,h2,h3,h4,p,li,dt,dd,.kick,.lead,.hsub,.hline,.hnote,.disp,.plead,.pbody){text-shadow:0 0 1px rgba(var(--bg-rgb),.95),0 0 6px rgba(var(--bg-rgb),.9),0 0 14px rgba(var(--bg-rgb),.75)}
.content :is(.glass,.btn,.pill,.chip) :is(h1,h2,h3,h4,p,li,span,.kick){text-shadow:none}

/* ============ TYPE SYSTEM: TWO REGISTERS ONLY ============ */
.disp{font-family:var(--disp);font-weight:700;font-size:clamp(2.5rem,5.6vw,4.7rem);line-height:.99;letter-spacing:-.035em}
.dm{color:inherit}
.kick{display:flex;align-items:baseline;gap:14px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:28px}
.lead{font-size:15px;color:var(--mut);max-width:46ch;margin-top:24px;line-height:1.7}

/* ============ LAYOUT ============ */
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
section{padding:9vh 0;position:relative}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.head-l{grid-column:1/span 7}
.head-r{grid-column:6/span 7}
@media(max-width:920px){.head-l,.head-r{grid-column:1/-1}}

/* ============ THE ONE GLASS SYSTEM ============ */
.glass{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 22px 60px var(--shadow);
  transition:transform .5s var(--ease),border-color .5s}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--glass-edge),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(var(--blue-rgb),.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.glass:hover{transform:translateY(-4px);border-color:var(--line2)}

/* card interiors: one recipe */
.card{padding:30px 28px}
.card h3{font-size:15px;font-weight:600;line-height:1.35;color:var(--w);margin:18px 0 8px;letter-spacing:-.01em}
.card p{font-size:13.5px;color:var(--mut);line-height:1.6}
svg.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.c-blue .ic{color:var(--blue)}.c-teal .ic{color:var(--teal)}.c-amber .ic{color:var(--amber)}

/* grids of cards */
.cards4{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.tile-full{grid-column:1/-1;display:flex;gap:26px;align-items:flex-start;padding:34px 32px}
.tile-full h3{margin-top:2px}
.tile-full p{max-width:78ch}
.steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.step .n{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3vw,2.7rem);line-height:1;letter-spacing:-.03em;color:var(--dim);font-variant-numeric:tabular-nums}
.step h3{margin-top:20px}
@media(max-width:920px){.cards4{grid-template-columns:repeat(2,1fr)}.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards4,.tiles,.steps{grid-template-columns:1fr}.tile-full{flex-direction:column;gap:16px}}

/* chips */
.chips{grid-column:1/span 9;display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;font-size:12px;font-weight:500;color:var(--w);transform:none}
.chip:hover{transform:none}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.chip.t .d{background:var(--teal);box-shadow:0 0 10px var(--teal)}
.chip.a .d{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.chip.core{color:var(--teal);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
@media(max-width:920px){.chips{grid-column:1/-1}}

/* work panel */
.panel{grid-column:1/-1;margin-top:48px;padding:clamp(34px,5vw,64px)}
.panel:hover{transform:none}
.plead{font-size:16px;font-weight:600;color:var(--w);max-width:50ch;line-height:1.55}
.pbody{font-size:14px;color:var(--mut);max-width:62ch;margin-top:14px;line-height:1.7}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;padding-top:38px;border-top:1px solid var(--line)}
.stat b{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1;letter-spacing:-.03em;color:var(--w);font-variant-numeric:tabular-nums}
.stat.s1 b{color:var(--blue)}.stat.s2 b{color:var(--teal)}.stat.s3 b{color:var(--amber)}
.stat small{display:block;font-size:12px;color:var(--mut);margin-top:10px}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============ BUTTONS + LINKS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--w);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.02em;padding:17px 28px;border-radius:999px;transition:background .35s,transform .35s var(--ease),box-shadow .35s;box-shadow:0 14px 44px var(--btn-shadow)}
.btn:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 18px 54px rgba(var(--blue-rgb),.35)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--w)}
.tlink .c{color:var(--blue);transition:transform .3s var(--ease)}
.tlink:hover .c{transform:translateX(4px)}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:80;border-bottom:1px solid transparent;transition:background .4s,border-color .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s}
nav.on{background:var(--nav-bg);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-color:var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:var(--disp);font-weight:700;font-size:28px;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;flex:0 0 auto;display:block}
.brand b{color:var(--blue);font-weight:700}
.nlinks{display:flex;align-items:center;gap:30px}
.nlinks a{font-size:12px;font-weight:500;color:var(--mut);letter-spacing:.02em;transition:color .25s}
.nlinks a:hover{color:var(--w)}
.nlinks .go{background:var(--w);color:var(--ink);font-weight:600;padding:10px 18px;border-radius:999px;transition:background .3s}
.nlinks .go:hover{background:var(--blue);color:var(--ink)}
/* The menu button and the phone drawer, and the width at which the links give way to them: assets/mobile-nav.css.
   Phones (2026-09-23): the logo and the pills did not fit at 375px, so a pill's words wrapped onto two lines.
   Smaller logo, tighter pill, no wrapping; under 360px the pill goes too (that rule is last in this file), since
   "Book a demo" is the first thing in the drawer. #nav for specificity: the later .nlinks rules must not win. */
@media(max-width:420px){#nav .brand{font-size:24px}#nav .brand-mark{width:28px;height:28px}#nav .nlinks{gap:8px}#nav .nlinks .go{white-space:nowrap;padding:9px 13px}}

/* ============ HERO ============ */
header{min-height:82svh;display:flex;align-items:center;position:relative;padding:104px 0 5vh}
header::before{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;background:linear-gradient(180deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.74) 82%)}
header .wrap{position:relative;width:100%}
.hkick{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:34px}
.hkick .d{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.9rem,7vw,6.2rem);line-height:.97;letter-spacing:-.04em;max-width:20ch}
.hsub{font-size:15px;color:var(--sub);max-width:44ch;margin:26px 0 34px;line-height:1.7}
.hcta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hnote{display:block;font-size:12px;color:var(--dim);margin-top:20px}

/* ============ VIDEO WINDOW BANDS ============ */
.band{height:40vh;display:flex;align-items:flex-end;padding-bottom:54px}
.band .cap{display:flex;align-items:center;gap:16px;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(243,246,250,.8)}
.band .cap::before{content:"";width:46px;height:1px;background:rgba(243,246,250,.4)}
@media(max-width:820px){.band{height:30vh}}

/* statement */
.statement{min-height:52vh;display:flex;align-items:center}
.statement .sh{font-family:var(--disp);font-weight:700;font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:1;letter-spacing:-.04em;max-width:15ch}

/* ============ END CTA ============ */
#contact{padding:12vh 0}
#contact h2{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,7.4vw,5.8rem);line-height:.97;letter-spacing:-.04em;max-width:12ch}
#contact .lead{margin-bottom:44px}
#contact .meta{font-size:12px;color:var(--dim);margin-top:22px}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:44px 0 60px;background:var(--foot-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .meta{font-size:12px;color:var(--mut);line-height:1.8}
footer .meta a{color:var(--blue)}

/* ============ CUSTOM CURSOR ============ */
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor input{cursor:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference;opacity:0}
.cur-dot{width:6px;height:6px;background:#fff}
.cur-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.75);transition:width .3s var(--ease),height .3s var(--ease)}
.cur-ring.big{width:56px;height:56px}

/* ============ ONE ENTRANCE RECIPE ============ */
/* No blur, and nothing at the top of a page animates in (2026-09-23). Every block used to
   fade up out of a 9px blur over 0.8s plus a stagger, so for the first one to six seconds
   the hero looked out of focus, which is the first thing anyone clicking through sees.
   The hero (#top) is shown at rest; lower sections keep a short, gentle fade. */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js #top .rv{opacity:1;transform:none;transition:none}
.js .rv.in{opacity:1;transform:translateY(0);filter:blur(0)}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;filter:none}
}

  /* --- refinement pass --- */
  .head-l,.head-r{grid-column:1/-1;text-align:center}
  .head-l .kick,.head-r .kick{justify-content:center}
  .head-l .lead,.head-r .lead{margin-left:auto;margin-right:auto}
  .tiles{counter-reset:tile}
  .tiles .card{counter-increment:tile;position:relative;transition:transform .32s cubic-bezier(.22,1,.36,1),background .32s,box-shadow .32s}
  .tiles .card .ic{display:none}
  /* the tile number sits on ::after: ::before is the glass edge (.glass::before), and a number drawn there was cut out by its mask */
  .tiles .card::after{content:counter(tile,decimal-leading-zero);position:absolute;top:26px;left:28px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--dim);font-variant-numeric:tabular-nums;pointer-events:none}
  /* a last card left alone in its row spans the row, so a grid never ends on an orphan */
  @media(min-width:921px){.tiles>.card:last-child:nth-child(3n+1){grid-column:1/-1}}
  @media(min-width:621px) and (max-width:920px){.tiles>.card:last-child:nth-child(odd){grid-column:1/-1}}
  .tiles .card h3{margin-top:44px;font-size:16px}
  .tiles .card:hover{transform:translateY(-5px);background:rgba(var(--fg-rgb),.03);box-shadow:0 22px 54px var(--lift-shadow)}

  #faq .kick{justify-content:center}
  #faq{text-align:center}
  #faq .faqs{text-align:left}
  .faqs{margin-top:44px;border-top:1px solid var(--line);max-width:860px;margin-left:auto;margin-right:auto}
  .faqs .faq{padding:26px 0;border-bottom:1px solid var(--line)}
  .faqs .faq h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .faqs .faq p{font-size:13.5px;color:var(--mut);line-height:1.7;max-width:80ch}

  /* --- capability page layout --- */
  .ph{min-height:0;display:block;padding:128px 0 4vh}
  .ph h1{font-size:clamp(2.4rem,5.4vw,4.5rem);max-width:24ch}
  .ph .hsub{max-width:54ch}
  .crumb{font-size:12px;color:var(--dim);margin-bottom:30px}
  .crumb a{color:var(--mut);transition:color .25s}
  .crumb a:hover{color:var(--w)}
  .crumb span{margin:0 6px;color:var(--dim)}
  section.tight{padding:7vh 0}
  .prose{grid-column:1/-1;max-width:820px;margin:36px auto 0;width:100%;text-align:left}
  .prose p{font-size:14.5px;color:var(--sub);line-height:1.85;margin-bottom:16px}
  .prose p strong,.prose li strong{color:var(--w);font-weight:600}
  .prose ul{list-style:none;margin:6px 0 18px;padding:0}
  .prose li{font-size:14px;color:var(--sub);line-height:1.7;padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--line)}
  .prose li::before{content:"\2192";position:absolute;left:0;color:var(--blue)}
  .status{grid-column:1/-1;max-width:860px;margin:40px auto 0;width:100%;text-align:left}
  .srow{display:flex;gap:20px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
  .srow:first-of-type{border-top:1px solid var(--line)}
  .stag{flex:0 0 150px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-align:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--mut);margin-top:2px}
  .stag.live{color:var(--teal);border-color:rgba(var(--teal-rgb),.45)}
  .stag.conf{color:var(--amber);border-color:rgba(var(--amber-rgb),.45)}
  .srow h3{font-size:14px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
  .srow p{font-size:13px;color:var(--mut);line-height:1.65;max-width:66ch}
  @media(max-width:620px){.srow{flex-direction:column;gap:10px}.stag{flex:none;align-self:flex-start}}
  .tiles a.card,.cards4 a.card{display:block}
  .rel{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
  .rel a{display:block;padding:24px 26px;text-align:left}
  .rel h3{font-size:14.5px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
  .rel p{font-size:12.5px;color:var(--mut);line-height:1.6}
  .rel .go2{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--blue);margin-top:12px;font-weight:500}
  @media(max-width:920px){.rel{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.rel{grid-template-columns:1fr}}
  .scn{grid-column:1/-1;max-width:820px;margin:40px auto 0;width:100%;padding:30px 32px;text-align:left}
  .scn:hover{transform:none}
  .scn h3{font-size:14px;font-weight:600;margin-bottom:10px}
  .scn p{font-size:13.5px;color:var(--sub);line-height:1.75}


  /* --- assistant conversation vignette (static mock) --- */
  .convo{max-width:430px;width:100%;padding:0;text-align:left}
  .convo:hover{transform:none}
  .cv-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line)}
  .cv-head .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:var(--on-accent);flex:none}
  .cv-head h5{font-size:13px;font-weight:600}
  .cv-head small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--teal)}
  .cv-head .d{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
  .cv-body{padding:16px;display:flex;flex-direction:column;gap:10px}
  .cv-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55}
  .cv-msg.ai{background:rgba(var(--fg-rgb),.06);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--w)}
  .cv-msg.me{background:var(--blue);color:var(--on-accent);align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
  .cv-msg .cta-line{display:inline-block;margin-top:6px;color:var(--teal);font-weight:600;font-size:12px}
  .cv-note{font-size:11px;color:var(--dim);padding:0 16px 14px}
  .convo.inflow{grid-column:1/-1;margin:40px auto 0}

  /* --- comparison table --- */
  .cmpwrap{grid-column:1/-1;margin-top:48px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px}
  .cmpwrap .cmp-inner{padding:6px 10px 12px;min-width:680px}
  .cmpwrap:hover{transform:none}
  table.cmp{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
  .cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
  .cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
  .cmp thead th{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:600;white-space:nowrap}
  .cmp thead th.us{color:var(--teal)}
  .cmp tbody th{font-weight:600;color:var(--w);font-size:13px;min-width:150px}
  .cmp td{color:var(--mut);line-height:1.55}
  .cmp td.us{color:var(--w);font-weight:500;background:rgba(var(--teal-rgb),.05)}
  .cmp .y{color:var(--teal);font-weight:600}
  .cmp .n{color:var(--dim)}

  /* --- booking email mock --- */
  .mail{grid-column:1/-1;max-width:600px;margin:40px auto 0;width:100%;padding:0;text-align:left}
  .mail:hover{transform:none}
  .mail .mh{padding:16px 20px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mut);line-height:1.9}
  .mail .mh b{color:var(--w);font-weight:600}
  .mail .mb{padding:18px 20px;font-size:13px;color:var(--sub);line-height:1.85}
  .mail .mb b{color:var(--w);font-weight:600}
  .mail .mnote{font-size:11px;color:var(--dim);padding:0 20px 16px}

  /* --- dashboard mock --- */
  .dash{grid-column:1/-1;margin-top:48px;padding:clamp(22px,3vw,34px);text-align:left}
  .dash:hover{transform:none}
  .dash .dh{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
  .dash .dh h3{font-size:15px;font-weight:600}
  .dash .dh small{font-size:10.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
  .dtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .dtile{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(var(--fg-rgb),.03)}
  .dtile b{display:block;font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--w)}
  .dtile.t1 b{color:var(--blue)}.dtile.t2 b{color:var(--teal)}.dtile.t3 b{color:var(--amber)}
  .dtile small{font-size:11px;color:var(--mut)}
  .drows{margin-top:14px;display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
  .dcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(var(--fg-rgb),.02)}
  .dcard h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:12px}
  .dlead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
  .dlead:last-child{border-bottom:0;padding-bottom:2px}
  .dlead b{color:var(--w);font-weight:600;display:block}
  .dlead span{color:var(--mut);font-size:11.5px}
  .dact{display:flex;gap:8px;flex:none}
  .dact i{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--teal);font-size:12px}
  .dbar{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mut);padding:7px 0}
  .dbar em{font-style:normal;min-width:11ch;color:var(--sub);font-size:12px}
  .dbar i{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--teal));display:block;flex:none}
  @media(max-width:920px){.dtiles{grid-template-columns:repeat(2,1fr)}.drows{grid-template-columns:1fr}}

  /* --- demo form --- */
  .form{grid-column:1/-1;max-width:660px;margin:40px auto 0;width:100%;padding:clamp(24px,3.4vw,40px);text-align:left}
  .form:hover{transform:none}
  .form label{display:block;font-size:12px;font-weight:600;color:var(--sub);margin:16px 0 7px;letter-spacing:.03em}
  .form label:first-of-type{margin-top:0}
  .form input,.form select,.form textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--w);font-family:var(--sans);font-size:13.5px;outline:none;transition:border-color .25s}
  .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue)}
  .form select{-webkit-appearance:none;appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 14px center}
  .form option{background:var(--option-bg);color:var(--w)}
  .form button.btn{margin-top:24px;border:0;cursor:pointer;font-family:var(--sans)}
  .form .fnote{font-size:12px;color:var(--dim);margin-top:16px;line-height:1.7}
  .form .fnote a{color:var(--blue)}

  /* --- CTA row + ghost buttons --- */
  .ctarow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:44px}
  .btn.ghost{background:transparent;color:var(--w);border:1px solid var(--line2);box-shadow:none}
  .btn.ghost:hover{background:rgba(var(--fg-rgb),.07);color:var(--w);box-shadow:none}
  #contact .ctarow{justify-content:flex-start}

/* the footer: its columns, their headings and links (were inline on every page) */
.fcols{display:flex;flex-wrap:wrap;gap:34px 60px;margin:30px 0 26px}
.fcol{display:flex;flex-direction:column;min-width:170px}
.fh{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;font-weight:600}
.fl{color:var(--mut);font-size:13px;line-height:1.9}

/* ============ THE LIGHT AND DARK SWITCH ============ */
/* A round button in the nav (over 480px wide) and in the footer on every page: the sun shows on dark, the moon on
   light. The site starts dark; a visitor's pick is kept on their device and applied in each page's head before it is
   drawn. The buttons are run by assets/theme.js. */
.theme{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:999px;border:1px solid var(--tel-line);background:transparent;color:var(--w);cursor:pointer;transition:border-color .25s}
.theme:hover{border-color:var(--blue)}
.theme:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.theme svg{width:16px;height:16px}
.theme .moon{display:none}
:root[data-theme="light"] .theme .sun{display:none}
:root[data-theme="light"] .theme .moon{display:block}
/* in the footer it has a line of its own under the columns, so they stay where they were */
.theme-row{display:flex;align-items:center;gap:12px;flex:0 0 100%;color:var(--mut);font-size:13px}

/* ---------- PHONES: the mobile pass (every rule for small screens that is not a page's own) ---------- */
/* No sideways wobble: the hero's moving background is drawn a little larger than the screen. */
html{overflow-x:hidden;overflow-x:clip}
@media(max-width:820px){
  /* a form box under 16px makes an iPhone zoom the whole page when it is tapped */
  .form input,.form select,.form textarea{font-size:16px}
  /* everything tapped is at least 44px tall, the size a thumb needs */
  #nav .nlinks .go{min-height:44px;display:inline-flex;align-items:center}
  .tlink{min-height:44px;font-size:14px}
  /* the breadcrumb's links: a full-height tap, the line itself unchanged */
  .crumb{font-size:13px;margin-bottom:18px}
  .crumb a{display:inline-block;padding:12px 0}
  /* the footer's links two columns across, each a full-height tap */
  .fcols{gap:22px 18px}
  .fcol{min-width:0;flex:1 1 140px}
  .fl{padding:11px 0;line-height:1.35;font-size:14px}
  /* the smallest words a touch larger */
  .hnote{font-size:13px}
  .cv-note{font-size:12px}
  footer .meta{font-size:13px}
  .chip{font-size:13px}
  /* the section labels and the top bar's buttons readable at arm's length */
  .kick,.hkick,.fh{font-size:12px}
  #nav .nlinks .go{font-size:13px}
}
@media(max-width:640px){
  /* the comparison table: each row a card, its column names from the table's own headings (data-label) */
  .cmpwrap{overflow-x:visible}
  .cmpwrap .cmp-inner{min-width:0;padding:2px 4px 6px}
  table.cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp thead{display:none}
  .cmp tbody tr{padding:16px 12px;border-bottom:1px solid var(--line)}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp th,.cmp td{border-bottom:0;padding:0}
  .cmp tbody th{min-width:0;font-size:15px;margin-bottom:10px}
  .cmp td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;font-size:13.5px}
  .cmp td::before{content:attr(data-label);color:var(--dim);flex:none}
  .cmp td>span{text-align:right}
  .cmp td.us{padding:8px 10px;margin:0 -10px 4px;border-radius:10px}
  .cmp td.us::before{color:var(--teal);font-weight:600}
}
@media(max-width:560px){
  /* the dashboard preview: one tile to a row, so its big words fit */
  .dtiles{grid-template-columns:1fr}
  .dtile{padding:14px 16px}
  .dtile b{font-size:22px}
  .dtile small{font-size:12px}
  .dash .dh small{font-size:11.5px}
}

/* the switch: a full thumb-sized tap on phones and tablets. Up to 480px wide the top bar has no room for it (the logo,
   Book a demo and the menu button fill it), so there the switch in the menu drawer and the footer does the job. */
@media(max-width:820px){.theme{width:44px;height:44px}}
@media(max-width:480px){#nav .theme{display:none}}

/* Under 360px "Book a demo" leaves the top bar (it is the first thing in the menu drawer). Last in the file: written
   beside the other phone nav rules, the 44px tap rule after it switched it back on, and the pill ran off a 320px screen. */
@media(max-width:359px){#nav .nlinks .go{display:none}}

/* ============ AGENTS FOR WEBSITES (November 2026) ============ */
/* The pages of the "AI agents for websites" site: the home page, the three product pages, the AI door page, and the
   parts they share. Every colour is a token, so the light and dark themes both stay right. */

/* a keyboard visitor can jump the menu, and every link and button shows where the focus is */
.skip{position:absolute;left:12px;top:-64px;z-index:200;background:var(--w);color:var(--ink);padding:12px 18px;border-radius:999px;font-size:13px;font-weight:600;transition:top .2s}
.skip:focus{top:10px}
main{display:block}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- hero: copy left, the agent right ---------- */
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,4vw,64px);align-items:center}
.hgrid h1{font-size:clamp(2.7rem,5.6vw,5rem)}
.hline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);margin:-12px 0 32px;max-width:52ch;line-height:1.6}
.hline::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
@media(max-width:980px){.hgrid{grid-template-columns:1fr}.hgrid .vwrap,.hgrid .convo{margin:16px auto 0}}

/* the rotating example: a car conversation and a property conversation share one box, so the page never jumps */
.vwrap{width:100%;max-width:440px;margin:0 auto}
.vtabs{display:flex;gap:8px;margin-bottom:12px}
.vtab{flex:1;min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--mut);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.vtab:hover{color:var(--w)}
.vtab[aria-selected="true"]{color:var(--w);border-color:var(--blue);background:rgba(var(--blue-rgb),.12)}
.vstack{display:grid}
.vstack>.convo{grid-area:1/1;justify-self:center;max-width:none;transition:opacity .5s var(--ease),visibility .5s}
.vstack>.convo[data-off]{opacity:0;visibility:hidden}
.no-js .vtabs{display:none}
.no-js .vstack>.convo+.convo{display:none}

/* ---------- the doors: two markets, then any website ---------- */
.doors{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.door{display:flex;flex-direction:column;align-items:flex-start;padding:36px 34px 32px;text-align:left}
.dico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--blue);background:rgba(var(--blue-rgb),.1);border:1px solid rgba(var(--blue-rgb),.28)}
.dico svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.door .dname{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-top:26px}
.door h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.06;letter-spacing:-.03em;color:var(--w);margin:10px 0 12px}
.door p{font-size:14px;color:var(--mut);line-height:1.7;max-width:48ch}
.door .tlink{margin-top:auto;padding-top:26px}
.door-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:26px;padding:26px 32px}
.door-wide .dname{margin-top:0}
.door-wide h3{margin:6px 0 8px;font-size:clamp(1.35rem,2vw,1.7rem)}
.door-wide .dbody{flex:1}
.door-wide .tlink{margin-top:0;padding-top:0;flex:none}
@media(max-width:920px){.doors{grid-template-columns:1fr}.door-wide{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---------- bands, pills, pull-quotes ---------- */
section.alt{background:linear-gradient(180deg,rgba(var(--fg-rgb),.028),rgba(var(--fg-rgb),.012));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--line2);color:var(--mut)}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.live{color:var(--teal);border-color:rgba(var(--teal-rgb),.45)}
.pill.soon{color:var(--amber);border-color:rgba(var(--amber-rgb),.45)}
.pull{grid-column:1/-1;font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.12;letter-spacing:-.03em;color:var(--w);max-width:26ch;margin:34px auto 0;text-align:center}
.pull .dm{color:var(--blue)}
.note{font-size:12px;color:var(--dim);line-height:1.6}
#faq-all{text-align:center}
#faq-all .kick{justify-content:center}
#faq-all .faqs{text-align:left}
.panel.narrow{max-width:920px;margin-left:auto;margin-right:auto;width:100%}
.g>.ctarow{grid-column:1/-1}
.panel.center{text-align:center}
.panel.center .plead{margin-left:auto;margin-right:auto}
.panel.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:start;text-align:left}
@media(max-width:820px){.panel.cols{grid-template-columns:1fr}}

/* a tick list: what lands with the business */
.ticks{list-style:none;margin:0;padding:0;text-align:left}
.ticks li{position:relative;padding:18px 0 18px 42px;border-bottom:1px solid var(--line);font-size:15px;color:var(--sub);line-height:1.6}
.ticks li:first-child{border-top:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:4px;top:23px;width:17px;height:17px;border-radius:50%;background:rgba(var(--teal-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--teal-rgb),.5)}
.ticks li::after{content:"";position:absolute;left:11px;top:27px;width:4px;height:8px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ticks li b{font-weight:600;color:var(--w);letter-spacing:-.01em}

/* a text block beside a picture */
.split{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:44px;text-align:left}
.split .dash{margin-top:0;grid-column:auto}
.split .dtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.split .dtile b{font-size:19px;line-height:1.2}
@media(max-width:560px){.split .dtiles{grid-template-columns:1fr}}
.split .lead{margin-left:0;margin-top:20px}
@media(max-width:920px){.split{grid-template-columns:1fr}}

/* two cards side by side */
.pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;text-align:left}
.pair .card h3{margin-top:0;font-size:16px}
.pair .card p+p{margin-top:10px}
@media(max-width:760px){.pair{grid-template-columns:1fr}}

/* five cards in two rows: three across, then two wider */
.tiles.t5{grid-template-columns:repeat(6,minmax(0,1fr))}
.tiles.t5>.card{grid-column:span 2}
.tiles.t5>.card:nth-child(n+4){grid-column:span 3}
@media(max-width:920px){.tiles.t5{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.t5>.card,.tiles.t5>.card:nth-child(n+4){grid-column:auto}.tiles.t5>.card:last-child{grid-column:1/-1}}
@media(max-width:620px){.tiles.t5{grid-template-columns:1fr}.tiles.t5>.card:last-child{grid-column:auto}}

/* ---------- the two install lines ---------- */
.codeblock{grid-column:1/-1;max-width:860px;margin:36px auto 0;width:100%;text-align:left;padding:0}
.codeblock:hover{transform:none}
.cb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cb-copy{min-height:36px;padding:7px 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--w);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:border-color .25s,background .25s}
.cb-copy:hover{border-color:var(--blue);background:rgba(var(--blue-rgb),.1)}
.codeblock pre{margin:0;padding:20px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.85;color:var(--code);white-space:pre-wrap;overflow-wrap:anywhere}
.codeblock .cl{display:block}
.codeblock .cl+.cl{margin-top:14px}
.codeblock .t{color:var(--blue)}.codeblock .a{color:var(--teal)}.codeblock .s{color:var(--amber)}
.cb-note{padding:0 22px 18px;font-size:12px;color:var(--dim);line-height:1.6}

/* ---------- the AI door: what an AI reads, and the test result ---------- */
.seen{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:44px;text-align:left}
.seen .glass{padding:0}
.seen .glass:hover{transform:none}
.seen-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.seen-bar i{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.seen-bar span{margin-left:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.seen-body{padding:20px 18px 22px}
.seen-body h3{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--w)}
.seen-body p{font-size:13px;color:var(--mut);line-height:1.6;margin-bottom:16px}
.seen-empty{border:1px dashed var(--line2);border-radius:12px;padding:30px 14px;text-align:center;color:var(--dim);font-size:12px;letter-spacing:.04em}
.seen-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.seen-row i{width:34px;height:34px;flex:none;border-radius:8px;background:linear-gradient(135deg,rgba(var(--blue-rgb),.5),rgba(var(--teal-rgb),.4))}
.seen-row b{display:block;height:8px;width:62%;border-radius:99px;background:rgba(var(--fg-rgb),.2)}
.seen-row b+b{width:38%;margin-top:7px;background:rgba(var(--fg-rgb),.1)}
@media(max-width:760px){.seen{grid-template-columns:1fr}}

.result{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:44px;text-align:left}
.result .card{padding:34px 32px}
.result .card:hover{transform:none}
.ask{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.result .cv-msg{max-width:100%;align-self:flex-start;font-size:15px;padding:14px 18px}
.result p.after{font-size:14px;color:var(--mut);line-height:1.7;margin-top:18px}
.bn{display:flex;gap:clamp(26px,5vw,60px);align-items:flex-end;flex-wrap:wrap}
.bn b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(4.6rem,9vw,7.6rem);line-height:.86;letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums}
.bn div+div b{color:var(--teal)}
.bn small{display:block;margin-top:12px;font-size:12.5px;color:var(--mut)}
@media(max-width:820px){.result{grid-template-columns:1fr}}

/* ---------- the currency card (property and custom pages) ---------- */
.fx{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;padding:34px clamp(24px,4vw,44px);margin-top:44px;text-align:left}
.fx:hover{transform:none}
.fx-row{display:flex;align-items:center;gap:16px}
.fx-cur{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:16px 20px;border-radius:16px;border:1px solid var(--line2);background:rgba(var(--fg-rgb),.04);font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;color:var(--w)}
.fx-row .fx-cur+.fx-arrow+.fx-cur{color:var(--blue);border-color:rgba(var(--blue-rgb),.4);background:rgba(var(--blue-rgb),.08)}
.fx-arrow{font-size:22px;color:var(--teal)}
.fx h3{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.025em;margin:0 0 8px;color:var(--w)}
.fx p{font-size:14px;color:var(--mut);line-height:1.7;max-width:56ch}
@media(max-width:760px){.fx{grid-template-columns:1fr}}

/* ---------- live demos ---------- */
.demos{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.demo{display:flex;flex-direction:column;align-items:flex-start;padding:32px 32px 28px;text-align:left}
.demo h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.03em;color:var(--w);margin:18px 0 8px}
.demo p{font-size:14px;color:var(--mut);line-height:1.7;max-width:46ch}
.demo .tlink{margin-top:auto;padding-top:22px}
.demo.is-soon:hover{transform:none}
@media(max-width:820px){.demos{grid-template-columns:1fr}}

/* ---------- the four legal links ---------- */
.legal4{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:34px;text-align:left}
.legal4 a{display:block;padding:18px 20px}
.legal4 b{display:block;font-size:14px;font-weight:600;color:var(--w);margin-bottom:4px}
.legal4 span{font-size:12.5px;color:var(--mut);line-height:1.5}
@media(max-width:920px){.legal4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.legal4{grid-template-columns:1fr}}

/* ---------- founder line ---------- */
.founder{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.founder img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);flex:none}
.founder>div{flex:1 1 320px}

/* ---------- pricing page: three products ---------- */
.prices{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px;text-align:left}
.price{display:flex;flex-direction:column;padding:34px 30px 30px}
.price.feat{border-color:rgba(var(--blue-rgb),.5)}
.price .pname{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.price .pamt{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.04;letter-spacing:-.035em;color:var(--w);margin:16px 0 6px}
.price .pamt small{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;color:var(--mut)}
.price .pfor{font-size:13px;color:var(--mut);margin-bottom:18px}
.price p{font-size:13.5px;color:var(--mut);line-height:1.65}
.price .tlink{margin-top:auto;padding-top:24px}
@media(max-width:920px){.prices{grid-template-columns:1fr}}

/* ---------- the footer, five columns, and its legal line ---------- */
.fcols{gap:34px 48px}
.fcol{min-width:150px}
.flegal{display:flex;flex-wrap:wrap;gap:2px 18px;flex:0 0 100%;font-size:12px}
.flegal a{color:var(--blue);padding:4px 0}
.flegal a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.flegal a{padding:11px 0;font-size:13px}.fl{display:flex;align-items:center;min-height:44px;padding:0}}

/* ---------- the short notice under every form ---------- */
.privnote{font-size:12px;color:var(--dim);line-height:1.6;margin-top:12px}
.privnote a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.form [hidden]{display:none!important}

/* ---------- the ring of the agent's channels, round the moving core (home page) ---------- */
.orbit-wrap{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;margin-top:2vh}
.orbit-title{margin-bottom:10px}
.orbit{position:relative;width:min(600px,94vw);aspect-ratio:1/1;margin:0 auto}
.orbit .core-reveal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;aspect-ratio:1/1;margin:0}
.orbit .orbit-c{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;background:var(--chip-bg);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 6px 22px var(--chip-shadow)}
.orbit .p1{left:67%;top:9%}.orbit .p2{left:91%;top:33%}.orbit .p3{left:91%;top:67%}.orbit .p4{left:67%;top:91%}.orbit .p5{left:33%;top:91%}.orbit .p6{left:9%;top:67%}.orbit .p7{left:9%;top:33%}.orbit .p8{left:33%;top:9%}
.orbit-br{display:none}
@media(max-width:860px){.orbit{position:static;width:auto;aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.orbit .orbit-c{position:static;transform:none}.orbit .core-reveal{position:relative;top:auto;left:auto;transform:none;flex:none;width:min(250px,60vw);margin:2vh 0 1vh}.orbit .orbit-br{display:block;flex-basis:100%;height:0}}
.core-reveal{position:relative;width:min(360px,46vw);aspect-ratio:1/1;margin:1vh auto 0;pointer-events:none}
.core-reveal::after{content:"";position:absolute;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(var(--blue-rgb),.18),rgba(var(--teal-rgb),.05) 46%,rgba(var(--bg-rgb),0) 72%)}
.core-reveal img,.core-reveal video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,0) 74%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,0) 74%)}
/* the video fades in over its still picture once it is playing; on phones, saver mode and reduced motion it never loads */
.core-reveal video{opacity:0;transition:opacity .8s var(--ease)}
.core-reveal video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.core-reveal video{display:none}}
:root[data-theme="light"] .core-reveal img,:root[data-theme="light"] .core-reveal video{filter:invert(1) hue-rotate(180deg) saturate(1.4);mix-blend-mode:multiply}

/* ---------- small helpers for the new pages ---------- */
.disp.sm{font-size:clamp(2rem,4vw,3.2rem)}
.ctarow.mid{justify-content:center}

/* the floating link to the live demo on the home page (it moved here from the home page's own style block) */
.cw-live{position:fixed;bottom:26px;right:26px;z-index:90;display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:999px;background:var(--w);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 14px 44px var(--float-shadow);transition:transform .3s var(--ease),background .3s}
.cw-live:hover{transform:translateY(-3px);background:var(--blue)}
.cw-live:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cw-live .d{width:7px;height:7px;border-radius:50%;background:#12a594;box-shadow:0 0 8px var(--teal);animation:blink 1.8s infinite}
@media(max-width:420px){.cw-live{bottom:16px;right:16px;padding:12px 16px;font-size:13px}}
@media(max-width:820px){.cw-live{transition:transform .3s var(--ease),background .3s,opacity .3s,visibility .3s}.cw-live.away,.cw-live.tuck{opacity:0;visibility:hidden;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){.cw-live{transition:none}.cw-live .d{animation:none}}
footer .meta{flex:0 0 100%}