/* Stand-ins shown for the moment before the web fonts arrive: a local font stretched to the same width and height as the
   real one, so the text doesn't move or re-flow when the real font swaps in (measured against Arial, 1 Oct 26). */
@font-face{font-family:'PJS Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:101%;ascent-override:103%;descent-override:21.8%;line-gap-override:0%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:112%;ascent-override:86.6%;descent-override:22.3%;line-gap-override:0%}
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/montserrat-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-normal-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: 'Plus Jakarta Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-italic-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-italic-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-italic-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: 'Plus Jakarta Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-italic-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/plusjakartasans-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/plusjakartasans-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plusjakartasans-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plusjakartasans-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plusjakartasans-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plusjakartasans-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plusjakartasans-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plusjakartasans-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plusjakartasans-normal-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/plusjakartasans-normal-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; }
/* Propic voice-first site — tokens from the design handoff (black → blue theme). */
:root{
  /* surfaces, darkest to lightest: page, alternate section, card, elevated/interactive */
  --base:#14171C; --alt:#191D24; --panel:#222833; --raised:#293241; --deep:#191D24;
  --blue:#0073CF; --blue-hover:#0066B8; /* hover darkens: white on the old lighter hover was 3.9:1, under AA */ --blue-mid:#55A2DF; --blue-light:#AAD0EF; --purple:#918FF9; --teal:#1DD8D3;
  --text:#F3F5F7; --text-2:#C3CAD4; --text-3:#96A0AD; /* all ≥4.5:1 on every surface, including --raised (text-2 brightened from #B4BDC9 for comfort) */
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  /* restrained depth: an 8% border, a faint top-edge highlight and one soft shadow — no bevels */
  --edge:inset 0 1px 0 rgba(255,255,255,.055);
  --lift:0 12px 32px rgba(0,0,0,.28);
  --card:var(--edge),var(--lift);
  /* background light: neutral, never blue — blue is Claire's alone */
  --top-light:radial-gradient(1400px 620px at 50% -12%,rgba(255,255,255,.05),transparent 70%),linear-gradient(180deg,#181B22 0%,var(--base) 100%);
  --alt-shade:linear-gradient(180deg,#1C2029 0%,var(--alt) 38%,#171A21 100%);
  --grad:linear-gradient(135deg,#0073CF,#918FF9); /* decorative only: white text on its purple end is 2.8:1 */
  --grad-text:linear-gradient(135deg,#006CC4,#6663DA); /* same hues, deep enough that white text holds ≥4.8:1 end to end */
  --display:'Plus Jakarta Sans','PJS Fallback',system-ui,sans-serif; --body:'Montserrat','Montserrat Fallback',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* layout: content up to 1440px wide; side padding scales from 16px on a phone to 64px on a wide screen */
  --max:1440px; --gutter:clamp(16px,4.4vw,64px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--base);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
main{overflow-x:clip} /* wide elements (the journey hub) may run past the column; never past the screen */
main>section:nth-of-type(even){background:var(--alt-shade)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--text-2)}

/* type */
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-mid);font-weight:600} /* blue, widely spaced — the film's kicker */
.eyebrow.blue{color:var(--blue-mid)} .eyebrow.center{text-align:center;margin-bottom:28px}
h1,h2,h3,blockquote{font-family:var(--display);margin:0}
h1{font-weight:700;font-size:clamp(2.6rem,5vw,4.125rem);line-height:1.04;letter-spacing:-.03em;margin:18px 0 22px}
h1 em{font-style:italic;color:var(--blue-mid)}
.h1-demo{font-size:clamp(2.5rem,4.6vw,3.75rem)}
h2{font-weight:700;font-size:clamp(2rem,3.4vw,2.6875rem);line-height:1.08;letter-spacing:-.03em}
h3{font-weight:700;font-size:20px;letter-spacing:-.02em;margin:10px 0 0}
.lede{font-size:18.5px;line-height:1.6;color:var(--text-2);max-width:46ch;margin:0}
.intro{color:var(--text-2);font-size:17.5px;line-height:1.6;margin:18px 0 0;max-width:58ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:999px;font-weight:600;font-size:15px;transition:background .2s,border-color .2s,transform .1s,filter .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-solid{background:var(--blue);color:#fff} .btn-solid:hover{background:var(--blue-hover)}
/* gradient = talk to Claire, and only that; other primary actions are solid; secondary are ghost */
.btn-grad{background:var(--grad-text);color:#fff} .btn-grad:hover{filter:brightness(.92)} /* darken, never lighten, under white text */
.btn-ghost{border:1px solid var(--line-strong);font-weight:500} .btn-ghost:hover{border-color:rgba(255,255,255,.28);background:var(--raised)}
.btn-block{width:100%;padding:14px;margin-top:6px}
.ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .ctas.center{justify-content:center}
:focus-visible{outline:2px solid var(--blue-mid);outline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(20,23,28,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-plain{position:relative;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* brand: the Claire by Propic logo (white script) */
.brand{display:block;line-height:0}.brand img{height:30px;width:auto;display:block}
@media (max-width:640px){.brand img{height:26px}}
.wordmark{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.06em}
.wordmark span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--text-2)} .nav-links a:hover,.back:hover{color:#fff}
.back{font-size:14.5px;color:var(--text-2)}

/* hero */
.hero{position:relative;padding:88px 0 80px;overflow:hidden;background:var(--top-light)}
.glow{display:none} /* page-level glow retired: blue light is reserved for Claire's panel */
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero-copy{max-width:600px}

/* voice panel */
.voice-panel{background:linear-gradient(168deg,rgba(0,115,207,.24),rgba(24,31,46,.96));border:1px solid rgba(85,162,223,.22);border-radius:16px;padding:38px 34px 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.34),0 0 72px -8px rgba(0,115,207,.30);position:relative}
.vp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.vp-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);transition:background .3s,box-shadow .3s}
.dot.grey{background:#6B7280;box-shadow:none} .dot.red{background:#E5484D;box-shadow:0 0 10px #E5484D} .dot.blue{background:var(--blue-mid);box-shadow:0 0 10px var(--blue-mid)}
.orb-wrap{position:relative;width:132px;height:132px;display:grid;place-items:center;margin:6px auto 18px;border-radius:50%}
.orb-ring{position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(85,162,223,.4);animation:ringOut 3.2s ease-out infinite}
.orb{width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--blue-light),var(--blue) 45%,#1E2F7A 85%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 30px rgba(0,115,207,.30);animation:orbPulse 5.5s ease-in-out infinite;display:grid;place-items:center;transition:transform .12s linear}
.orb-sm{width:44px;height:44px;flex:none;box-shadow:0 6px 18px rgba(0,115,207,.28)}
.orb-wrap:hover .orb{filter:brightness(1.08)}
.wave{display:flex;align-items:center;gap:4px;height:36px}
.wave i{display:block;width:4px;border-radius:2px;background:#fff;transform-origin:center;transform:scaleY(.3);transition:height .08s linear}
.wave i:nth-child(1){height:12px}.wave i:nth-child(2){height:24px}.wave i:nth-child(3){height:34px}.wave i:nth-child(4){height:18px}.wave i:nth-child(5){height:28px}.wave i:nth-child(6){height:14px}
.wave.idle i{animation:bar 1.1s ease-in-out infinite} .wave.idle i:nth-child(2n){animation-delay:.15s}.wave.idle i:nth-child(3n){animation-delay:.3s}.wave.idle i:nth-child(5n){animation-delay:.45s}
.wave.live i{animation:none;transform:none}
.voice-panel.is-live .orb-ring{border-color:rgba(29,216,211,.45)}
.voice-panel.is-speaking .orb{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 36px rgba(145,143,249,.34)}
.vp-end{display:block;margin:-4px auto 16px;font-size:12.5px;color:var(--text-2);padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px}
.vp-end:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.chips{display:flex;flex-direction:column;gap:9px}
.chip{text-align:left;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:14px;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--line-strong);background:rgba(255,255,255,.07)}
.chip-hi{background:rgba(0,115,207,.14);border-color:rgba(85,162,223,.55);color:var(--blue-light)} .chip-hi:hover{background:rgba(0,115,207,.22);border-color:var(--blue-mid)}
.vp-foot{font-size:13px;line-height:1.6;color:var(--text-2);border-top:1px solid var(--line);padding-top:18px}
.vp-fallback{text-align:center;padding:10px 0 24px} .vp-fallback p{color:var(--text-2);font-size:15px;line-height:1.6;margin:0 0 18px}
.vp-booking{margin:0 0 20px;padding:14px 16px;border-radius:8px;background:rgba(29,216,211,.08);border:1px solid rgba(29,216,211,.35);font-size:14px;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vp-booking[hidden],.vp-end[hidden],.vp-fallback[hidden],[data-voice-live][hidden]{display:none}


/* voice stage: canvas visualiser behind the orb */
.stage{position:relative;height:300px;display:grid;place-items:center;margin:-22px -10px 4px}
.viz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage .orb-wrap{margin:0;z-index:1}
.orb-sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,255,255,.22) 70%,transparent 80%);animation:spin 7s linear infinite;mix-blend-mode:screen}
.orb{position:relative;overflow:hidden}
.orb .wave{position:relative;z-index:1}
.voice-panel[data-state=speaking] .orb{background:radial-gradient(circle at 34% 30%,#D8D7FF,#7A78F0 42%,#1E2F7A 88%)}
.voice-panel[data-state=listening] .orb{background:radial-gradient(circle at 34% 30%,#C9FBF9,#12A8B8 45%,#123A6A 88%)}
.voice-panel[data-state=listening] .orb-ring{border-color:rgba(29,216,211,.6)}
.voice-panel.is-live .orb-ring{animation-duration:1.8s}
.vp-state{display:flex;align-items:center;justify-content:center;gap:10px;min-height:22px;margin:0 auto 14px;font-size:13.5px;color:var(--text-2);letter-spacing:.01em}
.vp-timer{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:12.5px}
.vp-timer:empty{display:none}
.vp-timer::before{content:"·";margin-right:10px;color:var(--text-3)}
.vp-booking{justify-content:flex-start}
.bk-tick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#062a2a;font-weight:800;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* overview video */
.watch{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:14.5px;color:var(--text-2);transition:color .2s}
.watch:hover{color:#fff}
.watch-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:#fff;background:rgba(255,255,255,.04);transition:background .2s,border-color .2s}
.watch:hover .watch-icon{background:var(--blue);border-color:var(--blue)}
.watch-len{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.no-scroll{overflow:hidden}
.vmodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:0}
.vmodal-back{position:absolute;inset:0;background:#000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .25s ease}
.vmodal-box{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#000;animation:pop .35s var(--ease)}
.vmodal-box video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.vmodal-x{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(20,23,28,.7);border:1px solid var(--line-strong);color:#fff;font-size:24px;line-height:1}
.vmodal-x:hover{background:var(--blue)}
.vmodal-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(20,23,28,.82);text-align:center;padding:20px}
.vmodal-end p{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;margin:0}
@media (max-width:760px){
  .vmodal{padding:0 12px}
  .vmodal-box{width:100%;max-width:100%;height:auto;max-height:80dvh;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line-strong)}
  .vmodal-end p{font-size:1.15rem}
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}

/* customer logo reel (video) */
.logo-reel{position:relative;max-width:1100px;margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.logo-reel video{display:block;width:100%;height:auto;aspect-ratio:1600/520;object-fit:cover;background:transparent;border-radius:0}
.trusted .logo-reel{max-width:none;margin:0 calc(50% - 50vw);width:100vw;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.trusted .logo-reel video{aspect-ratio:1600/520}
.trusted{overflow:hidden}



/* trusted */
.trusted{padding:52px 0}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 52px;font-family:var(--display);font-size:19px;font-weight:600;color:var(--text-2)}

/* voice: click-to-talk affordance */
.orb-wrap{cursor:pointer}
.orb-ping{position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(85,162,223,.34);animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.orb-ping-2{animation-delay:1.3s}
.voice-panel.is-live .orb-ping{display:none}
@keyframes ping{0%{transform:scale(.92);opacity:.7}70%{opacity:0}100%{transform:scale(1.9);opacity:0}}
.orb-cta{position:absolute;left:50%;top:calc(50% + 86px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:11px 20px;border-radius:999px;background:var(--grad-text);color:#fff;font-weight:600;font-size:15px;box-shadow:0 8px 22px rgba(0,115,207,.26);transition:filter .2s,transform .15s}
.orb-wrap:hover .orb-cta{filter:brightness(.92);transform:translateX(-50%) translateY(-1px)}
.voice-panel.is-live .orb-cta{opacity:0;pointer-events:none;transition:opacity .2s}
.vp-body{display:block}
.chips-head{margin-bottom:12px;color:var(--text-3)}
.vp-side{margin-top:26px}

/* voice: full-screen takeover while talking */
body.voice-on{overflow:hidden}
.voice-stand-in{border:1px dashed var(--line);border-radius:16px;min-height:520px}
.voice-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:0;background:radial-gradient(1200px 700px at 70% 10%,rgba(0,115,207,.22),transparent 70%),linear-gradient(180deg,#111419,#171C25);animation:fade .35s ease}
.voice-overlay .voice-panel{width:min(1320px,100%);height:100%;max-height:100vh;border:0;border-radius:0;background:none;box-shadow:none;padding:28px 48px;display:flex;flex-direction:column;gap:0}
.voice-overlay .vp-head{margin-bottom:0}
.voice-overlay .vp-live{flex:1;display:flex;align-items:center;overflow-y:auto;overscroll-behavior:contain}
.voice-overlay .vp-body{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;width:100%}
.voice-overlay .vp-main{display:flex;flex-direction:column;align-items:center}
.voice-overlay .stage{height:min(58vh,540px);width:100%;margin:0}
.voice-overlay .orb-wrap,.voice-overlay .orb{width:210px;height:210px}
.voice-overlay .orb-ring{inset:-28px}
.voice-overlay .wave{height:54px;gap:6px}
.voice-overlay .wave i{width:6px}
.voice-overlay .vp-state{font-size:clamp(1.05rem,1.8vw,1.5rem);color:var(--text);margin-top:8px;font-family:var(--display);letter-spacing:-.01em}
.voice-overlay .vp-timer{font-size:14px}
.voice-overlay .vp-end{margin-top:20px;padding:11px 22px;font-size:14px}
.voice-exit{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:95;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(20,23,28,.72);border:1px solid var(--line-strong);color:#fff;font-size:24px;line-height:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.voice-exit:hover{background:var(--blue);border-color:var(--blue)}
.voice-overlay .vp-side{margin-top:0}
.voice-overlay .chips{gap:12px}
.voice-overlay .chip{padding:15px 18px;font-size:15px}
.voice-overlay .vp-foot,.voice-overlay .orb-cta,.voice-overlay .orb-ping{display:none}
.voice-overlay .vp-booking{margin-top:20px}
@media (max-width:900px){
  .voice-overlay .voice-panel{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .voice-overlay .vp-body{grid-template-columns:1fr;gap:18px;align-content:start;padding:8px 0 24px}
  .voice-overlay .vp-live{align-items:flex-start}
  .voice-overlay .stage{height:min(38vh,320px)}
  .voice-overlay .orb-wrap,.voice-overlay .orb{width:150px;height:150px}
  .voice-overlay .chip{padding:12px 14px;font-size:14px}
  .voice-overlay .vp-status{display:none} /* the big state line says it; keeps clear of the × */
  .voice-overlay .vp-end{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));margin:16px auto 0;background:rgba(20,23,28,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* nav right side */
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-pulse{border-color:var(--line-strong);color:var(--text-2)}
.nav-pulse:hover{color:#fff;border-color:rgba(255,255,255,.34)}

/* Pulse: free for agents */
.pulse-band{}
.pulse-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.pulse-copy .eyebrow{color:var(--teal)}
.pulse-copy h2{margin-top:14px}
.pulse-bullets{margin:26px 0 30px}
.pulse-bullets .dash{background:var(--teal)}
.pulse-art{position:relative;display:grid;place-items:center}
.pulse-3d{width:100%;max-width:420px;height:520px;background:transparent;--poster-color:transparent;--progress-bar-color:transparent;--progress-bar-height:0px;--progress-mask:transparent;cursor:grab}
.pulse-3d:active{cursor:grabbing}
.pulse-loading{display:grid;place-items:center;height:100%;background:transparent}
.pulse-loading .pulse-phone{opacity:.5;animation:breathe 2.6s ease-in-out infinite;transform:none;height:min(100%,420px);width:min(50vw,210px)}
@keyframes breathe{50%{opacity:.8}}
.pulse-phone{width:210px;height:420px;border-radius:34px;border:1px solid var(--line-strong);background:linear-gradient(168deg,rgba(29,216,211,.16),rgba(12,18,36,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.55);padding:16px;display:grid;align-content:start;gap:14px;transform:rotate(-3deg)}
.pulse-screen{display:grid;gap:14px;padding:18px 14px;border-radius:22px;background:rgba(20,23,28,.55);height:100%}
.pulse-line{height:10px;border-radius:6px;background:rgba(255,255,255,.12)}
.pulse-line.w60{width:60%}.pulse-line.w80{width:80%}.pulse-line.w40{width:40%}
.pulse-big{height:46px;border-radius:10px;background:linear-gradient(135deg,rgba(29,216,211,.55),rgba(0,115,207,.5))}
.pulse-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pulse-row i{display:block;height:64px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--line)}

/* contact */
.contact-form-title{font-size:20px;margin:0 0 4px}
.demo-form textarea{width:100%;padding:13px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.045);font:inherit;font-size:14px;color:var(--text);outline:none;resize:vertical;min-height:120px;transition:border-color .2s}
.demo-form textarea::placeholder{color:var(--text-3)} .demo-form textarea:focus{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(85,162,223,.28)} .demo-form textarea.bad{border-color:#E5484D}
.contact-demo{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.contact-demo h2{font-size:22px;margin:0 0 10px}
.contact-demo p{color:var(--text-2);font-size:15.5px;line-height:1.6;margin:0 0 20px;max-width:46ch}

/* about: vision film + strategy statement */
.vision{padding-top:0}
.eyebrow.center{text-align:center;margin-bottom:22px}
.vision-frame{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--card);background:var(--panel);max-width:1100px;margin:0 auto}
.vision-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.statements{padding-top:72px;display:block}
.statement{max-width:min(60ch,62%);margin:0 0 64px}
.statement:last-child{margin-bottom:0}
.statement-right{margin-left:auto;text-align:right}
.statement .eyebrow{margin-bottom:10px}
.statement-line{font-family:var(--display);font-size:clamp(1.2rem,1.95vw,1.72rem);line-height:1.5;font-weight:300;letter-spacing:-.02em;color:var(--text);margin:0}
@media (max-width:1000px){.statement{max-width:none;margin-bottom:48px}}
@media (max-width:760px){.statement-right{text-align:left}}

@media (max-width:1000px){.about-grid-2{grid-template-columns:1fr}.strategy-line{max-width:none}}

/* about */
.about-hero{padding:96px 0 72px}
.about-h1{max-width:18ch}
.about-lede{max-width:62ch;font-size:19px}




.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.person{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 24px;box-shadow:var(--card)}
.person-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--grad-text);font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;margin-bottom:18px}
.person h3{font-size:19px;margin:0}
.person-role{color:var(--blue-mid);font-size:13.5px;margin:6px 0 12px}
.person p{color:var(--text-2);font-size:14.5px;line-height:1.6;margin:0}
.link{color:var(--blue-mid);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){.pulse-in{grid-template-columns:1fr;gap:28px}.pulse-3d{height:400px;max-width:320px}.pulse-art{order:-1}.team{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.team{grid-template-columns:1fr}.nav-pulse{display:none}.about-hero{padding:56px 0 48px}}

/* live stats band */
.live-band{}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);margin-right:10px;vertical-align:middle;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.live-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.live-stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--card)}
.live-num{font-family:var(--display);font-size:clamp(1.55rem,2.35vw,2.9rem);font-weight:700;letter-spacing:-.035em;line-height:1;background:linear-gradient(135deg,#fff 30%,var(--blue-light));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.live-stat:first-child .live-num{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.live-stat p{color:var(--text-2);font-size:14.5px;line-height:1.5;margin:14px 0 0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.fact b{display:block;font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--blue-mid)}
.fact span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.live-foot{margin:28px 0 0;font-size:12.5px;color:var(--text-3)}
@media (max-width:1000px){.live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.live-grid{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.live-stat{padding:20px 22px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}.live-num{font-size:2.1rem;letter-spacing:-.03em}.live-stat p{font-size:13.5px;margin:0;text-align:right;max-width:46%}}

/* sections */
.section{padding:104px 0}
.head{max-width:62ch;margin-bottom:56px} .head .eyebrow{margin-bottom:16px}

.cell{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;min-height:212px;box-shadow:var(--card)}
.cell .eyebrow{color:var(--blue-mid)}





.cell p{color:var(--text-2);font-size:15px;line-height:1.6;margin:10px 0 0}


.band{}
.goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.goal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px 30px;box-shadow:var(--card)}
.goal-icon{color:var(--blue-mid);margin-bottom:22px;display:block}
.goal h3{font-size:21px;margin:0 0 12px;line-height:1.25}
.goal p{color:var(--text-2);font-size:15px;line-height:1.6;margin:0}
@media (max-width:1000px){.goals{grid-template-columns:1fr}}
.evidence{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 36px}
.num{font-family:var(--display);font-size:54px;font-weight:300;letter-spacing:-.035em;line-height:1} .num.hi{color:var(--blue-mid)}
.evidence p{color:var(--text-2);font-size:15px;line-height:1.6;margin:16px 0 0;max-width:30ch}
.tracks-title{margin-bottom:56px}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.track{border:1px solid var(--line);border-radius:16px;padding:44px 38px;display:flex;flex-direction:column;background:var(--panel);box-shadow:var(--card)}
.track-accent{background:var(--raised);border-color:rgba(255,255,255,.1)}
.track h3{font-size:28px;margin:0 0 14px} .track>p{color:var(--text-2);font-size:16px;line-height:1.6;margin:0 0 28px}
.track .btn{align-self:flex-start;margin-top:auto}
.bullets{display:grid;gap:14px;margin-bottom:34px;font-size:15.5px;line-height:1.5}
.bullet{display:flex;gap:12px;align-items:baseline}
.dash{width:8px;height:1px;background:var(--blue-mid);flex:none;transform:translateY(-4px)}
.quote{text-align:center;border-top:1px solid var(--line)}
blockquote{margin:0 auto;max-width:24ch;font-size:clamp(2rem,3.6vw,2.875rem);font-weight:300;letter-spacing:-.025em;line-height:1.18}
.cite{margin-top:32px;font-size:14.5px;color:var(--text-2)}
.close{text-align:center}
.close-in{max-width:38ch;margin:0 auto} .close h2{font-size:clamp(2.1rem,3.6vw,2.875rem)} .close .intro{margin-left:auto;margin-right:auto}
.foot{border-top:1px solid var(--line);color:var(--text-2);font-size:13.5px;background:var(--base)}
.foot-privacy{padding-bottom:36px;margin-top:-18px;font-size:12.5px;color:var(--text-3);line-height:1.6}
.foot-privacy button{color:var(--blue-mid);text-decoration:underline;text-underline-offset:3px;font-size:12.5px}
.foot-privacy button:hover{color:#fff}
.foot-in{padding-top:44px;padding-bottom:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* book a demo */
.demo-page{position:relative;min-height:100vh;background:var(--top-light);overflow:hidden}
.glow-demo{display:none}
.nav-plain{border-bottom:1px solid var(--line)}
.demo-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;padding-top:88px;padding-bottom:96px;align-items:start}
.demo-copy{max-width:560px} .demo-copy .lede{max-width:none}
.demo-points{margin-top:40px;margin-bottom:0} .demo-points strong{font-weight:600}

.demo-card{padding:34px;display:flex;flex-direction:column;gap:18px}
.book-voice{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:8px;border:1px solid rgba(85,162,223,.55);background:rgba(0,115,207,.14);text-align:left;transition:background .2s,border-color .2s}
.book-voice:hover{background:rgba(0,115,207,.22);border-color:var(--blue-mid)}
.bv-text{flex:1;display:flex;flex-direction:column} .bv-title{font-weight:600;font-size:15px} .bv-sub{font-size:13px;color:var(--text-2);line-height:1.5}
.bv-mic{display:grid;place-items:center}
.demo-card.is-live .book-voice{border-color:rgba(29,216,211,.55);background:rgba(29,216,211,.08)}
.demo-card .vp-end{margin:-6px auto 0}
.demo-card .vp-booking{margin:0}
.divider{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)} .divider span{flex:1;height:1px;background:var(--line)}
.demo-form{display:flex;flex-direction:column;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-form input{width:100%;padding:13px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.045);font:inherit;font-size:14px;color:var(--text);outline:none;transition:border-color .2s}
.demo-form select{width:100%;padding:13px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.045);font:inherit;font-size:14px;color:var(--text);outline:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.demo-form select:invalid{color:var(--text-3)} .demo-form select option{color:#111}
.demo-form select.bad{border-color:#E5484D}
.slots{display:flex;flex-direction:column;gap:14px}
.slots-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.slots-tz{font-size:12.5px;color:var(--text-3)}
.slot-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.slot-day{flex:none;padding:9px 14px;border-radius:999px;border:1px solid var(--line-strong);font-size:13px;white-space:nowrap}
.slot-day[aria-selected=true]{border-color:var(--blue-mid);background:rgba(0,115,207,.18)}
.slot-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:44px}
.slot-time{padding:12px 8px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.045);font-size:14px;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s}
.slot-time:hover{border-color:var(--blue-mid);background:rgba(0,115,207,.14)}
.slot-time[disabled]{opacity:.5}
.slots-skip{font-size:13px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;align-self:center}
.slots-empty{grid-column:1/-1;color:var(--text-2);font-size:14px}
@media (max-width:640px){.slot-times{grid-template-columns:repeat(2,1fr)}}
.demo-form input::placeholder{color:var(--text-3)} .demo-form input:focus{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(85,162,223,.28)}
.demo-form input.bad{border-color:#E5484D}
.bands{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.band-chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line-strong);font-size:13px;transition:border-color .2s,background .2s}
.band-chip.on{border-color:var(--blue-mid);background:rgba(0,115,207,.18)}
.form-err{min-height:0;font-size:13px;color:#FF8A8D}
.form-foot{font-size:12.5px;color:var(--text-3);text-align:center;margin-top:8px}
.thanks{text-align:center;padding:24px 8px;display:flex;flex-direction:column;align-items:center;gap:14px} .thanks[hidden]{display:none}
.thanks h2{font-size:30px} .thanks p{color:var(--text-2);line-height:1.6;margin:0 0 8px;max-width:38ch}

/* motion */
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes ringOut{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes bar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1000px){
  .hero-grid,.demo-grid{grid-template-columns:1fr;gap:44px}

  .evidence{grid-template-columns:1fr 1fr}
  .tracks{grid-template-columns:1fr}
}
@media (max-width:900px){.nav-links{display:none}}
@media (max-width:640px){
  .hero{padding:56px 0 56px} .section{padding:72px 0} .demo-grid{padding-top:48px;padding-bottom:64px}
  .voice-panel{padding:28px 20px 22px} .demo-card{padding:22px}
  .evidence{grid-template-columns:1fr} .track{padding:32px 24px}
  .row2{grid-template-columns:1fr}
  .logos{gap:14px 28px;font-size:17px}
  .ctas .btn{flex:1 1 auto}
}

/* pages built in the CMS */
.prose{max-width:74ch}
.prose p{color:var(--text-2);font-size:17px;line-height:1.75;margin:0 0 22px}
.prose p:last-child{margin-bottom:0}
.intro.center{text-align:center;margin-left:auto;margin-right:auto}
.notice-bar{background:rgba(0,115,207,.16);border-bottom:1px solid rgba(85,162,223,.35);color:var(--blue-light);text-align:center;padding:10px 16px;font-size:13.5px}
.draft-bar{background:rgba(245,165,36,.14);border-bottom:1px solid rgba(245,165,36,.4);color:#F7C570;text-align:center;padding:10px 16px;font-size:13.5px}
@media (max-width:760px){.prose p{font-size:16px}}

/* a stats block in the CMS has however many numbers the editor wrote, not always four */
.cms-stats{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}

/* numbered steps and pull quotes, for pages built in the CMS */
.steps-title{margin-bottom:28px}
.steps{list-style:none;counter-reset:step;margin:40px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:step;position:relative;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--card);padding:28px 32px 28px 92px}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:32px;top:28px;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--blue-mid);opacity:.85}
.steps h3{font-size:20px;margin:0 0 8px;letter-spacing:-.02em}
.steps p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.6;max-width:70ch}
.pquote{margin:0;max-width:60ch}
.pquote blockquote{margin:0;border-left:3px solid var(--teal);padding-left:26px}
.pquote blockquote p{font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:300;line-height:1.55;letter-spacing:-.02em;color:var(--text);margin:0 0 18px}
.pquote figcaption{margin-top:22px;padding-left:29px}
.pquote-name{display:block;font-weight:600;font-size:14.5px}
.pquote-role{display:block;margin-top:3px;font-size:13.5px;color:var(--text-3)}
@media (max-width:760px){.steps li{padding:24px 22px 24px 22px}.steps li::before{position:static;display:block;margin-bottom:10px}}

/* ---- built-in graphics for CMS pages ---- */
.figure-title{margin-bottom:34px}
.figure-caption{margin:20px 0 0;font-size:13.5px;color:var(--text-3);text-align:center}
.art-house{width:56%;max-width:170px;color:var(--blue-light);opacity:.8}

/* a listing on one side, the buyers it matched on the other */
.mflow{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1.15fr);align-items:center;gap:0}
.lcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--card)}
.lcard-photo{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:linear-gradient(150deg,rgba(0,115,207,.35),rgba(29,216,211,.12) 60%,rgba(10,21,48,.9))}
.lcard-tag{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(20,23,28,.66);border:1px solid rgba(255,255,255,.18);padding:5px 10px;border-radius:999px}
.lcard-body{padding:20px 22px 24px}
.lcard-body h3{font-family:var(--display);font-size:19px;margin:0 0 6px;letter-spacing:-.02em}
.lcard-body p{margin:0;color:var(--text-2);font-size:14px}
.mflow-links{height:320px}
.mflow-links svg{width:100%;height:100%}
.mflow-links path{fill:none;stroke:var(--blue-mid);stroke-width:1.2;opacity:.5;stroke-dasharray:5 7;animation:flow 2.6s linear infinite}
.mflow-links path:nth-child(2){animation-delay:.3s}.mflow-links path:nth-child(3){animation-delay:.6s}.mflow-links path:nth-child(4){animation-delay:.9s}
@keyframes flow{to{stroke-dashoffset:-48}}
.mflow-buyers{display:grid;gap:10px}
.bcard{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--card)}
.bavatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;letter-spacing:.04em;background:linear-gradient(140deg,rgba(0,115,207,.5),rgba(145,143,249,.4));border:1px solid rgba(255,255,255,.16)}
.bwho{min-width:0;flex:1}
.bwho b{display:block;font-size:14.5px}
.bwho span{display:block;margin-top:3px;font-size:12.5px;color:var(--text-3);line-height:1.4}
.bscore{flex:none;font-family:var(--display);font-size:16px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.bmore{font-size:13px;color:var(--text-3);padding:6px 4px 0}

/* the email a matched buyer actually receives */

/* what the agent can show the vendor */
.rcard{max-width:720px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 38px;box-shadow:var(--card)}
.rcard-head h3{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.03em;margin:12px 0 10px;background:linear-gradient(135deg,#fff 30%,var(--blue-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.rcard-head p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6;max-width:52ch}
.rbars{margin-top:28px;display:grid;gap:14px}
.rbar{display:grid;grid-template-columns:150px minmax(0,1fr) 54px;align-items:center;gap:16px;font-size:13.5px}
.rbar-l{color:var(--text-2)}
.rbar-t{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.rbar-t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-mid))}
.rbar b{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--display);font-size:16px}

/* the logo reel and the overview video, used inside a page */

.vframe-click{position:relative}
.vposter{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.vposter img{display:block;width:100%;height:auto}
.vposter-play{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;background:linear-gradient(0deg,rgba(20,23,28,.85),transparent);font-size:14.5px;font-weight:600}

@media (prefers-reduced-motion:reduce){.mflow-links path{animation:none}}
@media (max-width:900px){
  .mflow{grid-template-columns:minmax(0,1fr);gap:22px}
  .mflow-links{display:none}
  .lcard{max-width:460px;margin:0 auto}
  .rcard{padding:26px 22px}
  .rbar{grid-template-columns:minmax(0,1fr) 54px;gap:10px}
  .rbar-t{grid-column:1 / -1;order:3}
}

/* questions and answers — visible on the page, which is what makes the FAQ schema honest */
.faq{max-width:860px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(1rem,1.4vw,1.17rem);font-weight:600;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue-light);background:linear-gradient(90deg,rgba(255,255,255,.025),transparent)}
.faq-item summary i{flex:none;position:relative;width:16px;height:16px}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;background:var(--blue-mid);transition:transform .2s ease}
.faq-item summary i::before{top:7px;left:0;width:16px;height:2px}
.faq-item summary i::after{left:7px;top:0;width:2px;height:16px}
.faq-item[open] summary i::after{transform:scaleY(0)}
.faq-a{padding:0 4px 24px;max-width:72ch}
.faq-a p{margin:0 0 14px;color:var(--text-2);font-size:15.5px;line-height:1.7}
.faq-a p:last-child{margin-bottom:0}

/* the State dropdown removes the outline, so it needs the same ring as the text fields */
.demo-form select:focus{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(85,162,223,.28)}

/* the homepage Claire box, kept simple: no "Claire, live" / "Ready to talk" header and just two prompts. The header stays in
   the page (the voice code updates its status) and comes back, status only, once the conversation takes over the screen. */
.voice-panel:not(.demo-card) .vp-head{display:none}
.voice-overlay .voice-panel:not(.demo-card) .vp-head{display:flex;justify-content:flex-end}
.voice-overlay .voice-panel .vp-head .eyebrow{display:none}
.voice-panel .chip-full{display:none}
.voice-overlay .voice-panel .chip-full{display:block}
.voice-overlay .voice-panel .chip-quick{display:none}

/* six key metrics: two rows of three on desktop (the tablet and phone rules above still apply) */
@media (min-width:1001px){.live-band .live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* leading brands strip (design: leading-brands-strip.html), fitted to the charcoal palette */
.trusted{padding:44px 0 36px}
.trusted .eyebrow.center{margin-bottom:14px}
.brands-strip{overflow:hidden;font-family:var(--body)}
.trusted .brands-strip{margin:0 calc(50% - 50vw);width:100vw}
.brands-strip__mask{padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.brands-strip__track{display:flex;align-items:center;width:max-content;animation:brands-scroll var(--dur,60s) linear infinite}
.brands-strip:hover .brands-strip__track{animation-play-state:paused}
.brands-strip__set{display:flex;align-items:center}
.brands-strip__item{flex:0 0 auto;height:48px;padding:0 clamp(22px,2.4vw,36px);display:flex;align-items:center}
.brands-strip__item img{display:block;opacity:.86;transition:opacity .2s}
.brands-strip:hover .brands-strip__item img{opacity:1}
.brands-strip__more{margin:0;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--blue-mid);white-space:nowrap} /* the site blue for text: 6.5:1 on the page */
.brands-inline{border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--card)}
@keyframes brands-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.brands-strip__track{animation:none}}
@media (max-width:640px){.brands-strip__item{height:40px}.brands-strip__item img{max-height:38px;width:auto}}

/* hero: the product shot rises behind Claire's panel, top right (concept A). The panel stays the thing you touch, in front. */
.hero-visual{position:relative}
.hero-phones{position:absolute;right:-16%;top:-70px;width:101%;height:auto;z-index:0;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)) saturate(.92) brightness(.9);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%);mask-image:linear-gradient(180deg,#000 55%,transparent 96%)}
.hero-visual>.voice-panel{position:relative;z-index:1;margin:150px 0 0 80px} /* its right edge sits on the content edge, in line with the menu bar's (moved right 90px, 2 Oct 26) */
@media (max-width:1000px){
  .hero-phones{width:70%;right:-4%;top:-30px}
  .hero-visual>.voice-panel{margin:130px 0 0}
}
@media (max-width:640px){
  .hero-phones{width:80%;right:-8%;top:-20px}
  .hero-visual>.voice-panel{margin-top:118px}
}

/* ---- the film's treatments: two-tone headings, blue kickers ----
   A heading written as "Working while *you read this.*" renders light white with the starred payoff in bold gradient.
   Gradient text is for large headings only (its blue end is ~3.9:1 — fine at this size, never for body copy). */
.tt{font-weight:300;letter-spacing:-.035em}
.tt b{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h1.tt{font-size:clamp(2.7rem,5.2vw,4.25rem)}
h1 em{font-style:normal}
.trusted .eyebrow,.divider{color:var(--text-3)}

/* ---- live figures: four large typographic numbers, no cards ---- */
.live-band .live-grid.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:8px;border-top:1px solid var(--line)}
.figs .fig{padding:40px 28px 0 0;min-width:0}
.figs .fig+.fig{padding-left:28px;border-left:1px solid var(--line)}
.figs .live-num{font-weight:300;font-size:clamp(2.3rem,4.1vw,4rem);letter-spacing:-.045em;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--text)}
.figs .fig:first-child .live-num{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.figs .fig p{margin:16px 0 0;font-size:16px;font-weight:500;color:var(--text);line-height:1.4}
.figs .fig small{display:block;margin-top:6px;font-size:13px;color:var(--text-3)}
@media (max-width:1000px){.live-band .live-grid.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.figs .fig{padding:32px 20px 28px 0}.figs .fig:nth-child(odd){padding-left:0;border-left:0}.figs .fig:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:640px){.live-band .live-grid.figs{grid-template-columns:minmax(0,1fr)}.figs .fig,.figs .fig+.fig{padding:26px 0;border-left:0;display:block}.figs .fig+.fig{border-top:1px solid var(--line)}.figs .live-num{font-size:2.6rem}.figs .fig p{text-align:left;max-width:none}}

/* ---- Claire's goals: no cards, a gradient rule and type ---- */
.goals.flat{gap:48px}
.goals.flat .goal{background:none;border:0;box-shadow:none;border-radius:0;padding:26px 0 0;position:relative}
.goals.flat .goal::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--purple) 60%,transparent)}
.goals.flat .goal h3{font-size:22px;margin:10px 0 10px}
.goals.flat .goal p{font-size:15.5px}
@media (max-width:1000px){.goals.flat{gap:36px}}

/* ---- What Claire does: the journey hub (design handoff "Claire journey hub animation") ----
   Everything is laid out on the handoff's 1920×1080 artboard in artboard pixels; the script scales the stage to the width
   available (a little wider than the text column, so the cards line up with it). The resting styles are the finished,
   fully lit state; the script dims and plays them. Below 1200px it becomes a stacked list. */
.hub{position:relative;width:calc((min(100vw, var(--max)) - 2 * var(--gutter)) / .875);left:50%;transform:translateX(-50%);margin-top:8px;aspect-ratio:1920/1080}
.hub-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;transform:scale(var(--hub-s,.7))}
.hub-wires{position:absolute;inset:0;width:1920px;height:1080px;overflow:visible}
.hub-wire-base{fill:none;stroke:rgba(255,255,255,.07);stroke-width:2}
.hub-wire{fill:none;stroke:url(#hubgrad);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.hub-dot{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--teal);box-shadow:0 0 16px var(--teal);opacity:0;pointer-events:none}
.hub-orb,.hub-ring-in,.hub-ring-out,.hub-ringpulse{position:absolute;border-radius:50%;pointer-events:none}
.hub-orb{left:845px;top:355px;width:230px;height:230px;background:radial-gradient(circle at 34% 28%,#AAD0EF 0%,#55A2DF 20%,#0073CF 52%,#918FF9 100%);box-shadow:0 0 40px rgba(0,115,207,.28)}
.hub-ring-in{left:810.5px;top:320.5px;width:299px;height:299px;border:1.5px solid rgba(145,143,249,.18)}
.hub-ring-out{left:776px;top:286px;width:368px;height:368px;border:1px dashed rgba(145,143,249,.12)}
.hub-ringpulse{left:845px;top:355px;width:230px;height:230px;border:1.5px solid rgba(145,143,249,.5);opacity:0}
.hub-caption{position:absolute;left:740px;top:665px;width:440px;margin:0;text-align:center;font-family:var(--body);font-size:22px;line-height:1.5;color:#B4BDC9}
.hub-card{position:absolute;width:530px;height:290px;box-sizing:border-box;padding:26px 30px;border-radius:24px;display:flex;flex-direction:column;background:var(--panel);border:1px solid rgba(85,162,223,.08);box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.hub-eyebrow{font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-mid)}
.hub-card h3{font-family:var(--display);font-weight:700;font-size:29px;letter-spacing:-.01em;color:var(--text);margin:12px 0 0;line-height:1.2}
.hub-card p{font-family:var(--body);font-size:20px;line-height:1.45;color:#B4BDC9;margin:8px 0 0;text-wrap:pretty}
.hub-row{margin-top:auto;height:78px;box-sizing:border-box;border-radius:16px;background:var(--alt);border:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 22px}
.hub-row-t{flex:1;min-width:0}
.hub-row-l{font-family:var(--body);font-size:21px;line-height:1.3;color:var(--text)}
.hub-row-s{font-family:var(--body);font-size:17px;color:#8D97A6;margin-top:3px}
.hub-val{font-family:var(--display);font-weight:700;font-size:30px;color:var(--blue-mid);font-variant-numeric:tabular-nums}
.hub-val.teal{color:var(--teal)}
.hub-pill{flex:none;width:110px;box-sizing:border-box;padding:6px 16px;border-radius:999px;border:1.5px solid var(--teal);font-family:var(--body);font-weight:600;font-size:18px;line-height:1.2;color:var(--teal)}
.hub-check{flex:none;width:30px;height:30px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.hub-check::after{content:"";width:8px;height:14px;border-right:3px solid var(--base);border-bottom:3px solid var(--base);transform:translateY(-2px) rotate(45deg)}
.hub-tiles{margin-top:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hub-tile{height:78px;box-sizing:border-box;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(0,115,207,.42);border:1px solid rgba(85,162,223,.45)}
.hub-tile span{font-family:var(--body);font-size:15px;line-height:1.15;color:#B4BDC9}
.hub-tile b{font-family:var(--display);font-weight:700;font-size:22px;color:var(--text)}
.hub-rail{position:absolute;left:0;top:972px;width:1920px;height:80px}
.hub-rail-line,.hub-rail-fill{position:absolute;left:125px;top:11px;height:2px}
.hub-rail-line{width:1670px;background:rgba(255,255,255,.1)}
.hub-rail-fill{width:1670px;background:var(--blue)}
.hub-rail-dot{position:absolute;top:4px;width:16px;height:16px;border-radius:50%;background:var(--blue-mid)}
.hub-rail-label{position:absolute;top:40px;width:200px;text-align:center;font-family:var(--body);font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.hub-rail-label.first{text-align:left}.hub-rail-label.last{text-align:right}
/* stacked: orb and caption on top, the six cards in order, no wires or rail */
@media (max-width:1199px){
  .hub{width:auto;left:auto;transform:none;aspect-ratio:auto;max-width:620px}
  .hub-stage{position:relative;width:auto;height:auto;transform:none;display:flex;flex-direction:column;gap:16px}
  .hub-wires,.hub-dot,.hub-ringpulse,.hub-ring-out,.hub-rail{display:none}
  .hub-orb{position:relative;left:auto;top:auto;width:72px;height:72px;margin:6px 0 0 6px}
  .hub-ring-in{left:0;top:0;width:84px;height:84px}
  .hub-caption{position:relative;left:auto;top:auto;width:auto;text-align:left;font-size:15px;margin:-80px 0 0 106px;min-height:56px;display:flex;align-items:center}
  .hub-cards{display:flex;flex-direction:column;gap:14px}
  .hub-card{position:relative;left:auto!important;top:auto!important;width:auto;height:auto;padding:20px 22px;border-radius:16px}
  .hub-eyebrow{font-size:11.5px}
  .hub-card h3{font-size:20px;margin-top:8px}
  .hub-card p{font-size:15px;margin-top:6px}
  .hub-row,.hub-tiles{margin-top:16px}
  .hub-row{height:auto;min-height:60px;padding:10px 16px;border-radius:12px}
  .hub-row-l{font-size:15px}.hub-row-s{font-size:13px}
  .hub-val{font-size:22px}
  .hub-pill{width:auto;font-size:13.5px;padding:5px 12px}
  .hub-check{width:24px;height:24px}.hub-check::after{width:6px;height:11px}
  .hub-tile{height:64px;padding:7px 8px}.hub-tile span{font-size:11.5px}.hub-tile b{font-size:18px}
}
@media (max-width:520px){.hub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Type to Claire: a switch on the panel, and the typed conversation ---- */
.vp-mode{display:flex;width:max-content;margin:0 auto 6px;padding:4px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid var(--line);position:relative;z-index:2}
.vp-mode button{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s}
.vp-mode button[aria-pressed=true]{background:rgba(0,115,207,.3);color:#fff;box-shadow:inset 0 0 0 1px rgba(85,162,223,.5)}
.vp-mode button:hover{color:#fff}
.voice-overlay .vp-mode{display:none}
.chat{display:flex;flex-direction:column;gap:12px}
.chat[hidden]{display:none}
.chat-thread{display:flex;flex-direction:column;gap:10px;min-height:220px;max-height:340px;overflow-y:auto;padding:14px 2px 4px;overscroll-behavior:contain}
.msg{max-width:88%;padding:11px 14px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:rgba(0,115,207,.22);border-color:rgba(85,162,223,.4)}
.msg.claire::before{content:"Claire";display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--blue-light);margin-bottom:3px}
.page-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:10px;border:1px solid rgba(85,162,223,.5);background:rgba(0,115,207,.14);color:var(--text);text-decoration:none;transition:background .2s,border-color .2s}
.page-card:hover{background:rgba(0,115,207,.24);border-color:var(--blue-mid)}
.page-card .pc-t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}.page-card b{font-family:var(--display);font-weight:600;font-size:15px}.page-card small{color:var(--text-2);font-size:12px;line-height:1.35}
.page-card .pc-a{font-size:18px;color:var(--blue-light);flex:none}
.vp-pages{margin:14px 0 0;width:100%;animation:pcIn .45s cubic-bezier(.16,1,.3,1) both}.vp-pages:empty{display:none}
.voice-overlay .vp-pages{width:min(460px,100%);margin:18px auto 0}.voice-overlay .vp-pages .page-card{padding:14px 18px;background:rgba(0,115,207,.22);border-color:rgba(85,162,223,.7);box-shadow:0 10px 30px rgba(0,0,0,.35)}.voice-overlay .vp-pages b{font-size:17px}
@keyframes pcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.vp-pages{animation:none}}.msg+.page-card,.page-card+.msg{margin-top:2px}.chat-thread .page-card,[data-chat-thread] .page-card{align-self:stretch}
/* the forms' spam trap: a field nobody sees (lib/render.js TRAP) */
.also{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.msg.note{align-self:center;background:none;border:0;color:var(--text-3);font-size:12.5px;padding:2px}
.msg.typing{color:var(--text-3)}
.msg.typing i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--blue-light);animation:blink 1.2s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}.msg.typing i:nth-child(3){animation-delay:.4s}
.chat-form{display:flex;gap:8px}
.chat-form input{flex:1;min-width:0;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);font:inherit;font-size:14.5px;color:var(--text);outline:none}
.chat-form input::placeholder{color:var(--text-3)}
.chat-form input:focus{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(85,162,223,.28)}
.chat-form button{flex:none;width:48px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center}
.chat-form button:hover{background:var(--blue-hover)} .chat-form button[disabled]{opacity:.6}
.chat-foot{font-size:12px;color:var(--text-3);text-align:center}

/* ---- Book a demo: two named routes, a stepper, a four-field first step, then time, then confirm ---- */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.route{text-align:left;border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.route:hover{border-color:rgba(255,255,255,.28)}
.route[aria-selected=true]{border-color:var(--blue-mid);background:rgba(0,115,207,.18);box-shadow:inset 0 0 0 1px rgba(85,162,223,.4)}
.route b{display:flex;align-items:center;gap:9px;font-size:15px}
.route small{display:block;margin-top:6px;font-size:12.5px;color:var(--text-2);line-height:1.45}
.route .ric{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.route[aria-selected=true] .ric{background:var(--blue)}
.stepper{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3);letter-spacing:.04em}
.stepper span{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.stepper span i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;border:1px solid var(--line-strong);font-size:11px}
.stepper span.on{color:#fff}.stepper span.on i{background:var(--blue);border-color:var(--blue)}
.stepper span.done i{background:rgba(29,216,211,.18);border-color:var(--teal);color:var(--teal)}
.stepper hr{flex:1;border:0;height:1px;background:var(--line);margin:0}
.route-pane[hidden]{display:none}
.route-pane{display:flex;flex-direction:column;gap:18px}
.confirm{display:flex;flex-direction:column;gap:10px}
.confirm[hidden]{display:none}
.confirm-sum{border:1px solid rgba(29,216,211,.4);background:rgba(29,216,211,.08);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;display:flex;gap:12px;align-items:center}
.confirm-sum small{display:block;color:var(--text-2);font-size:12.5px}
.confirm .lbl{font-size:12.5px;color:var(--text-2);margin-top:6px}
.confirm .confirm-back{font-size:13px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;align-self:center}
.cb-lede{font-size:14px;color:var(--text-2);line-height:1.55;margin:0}
@media (max-width:520px){.routes{grid-template-columns:1fr}.stepper{font-size:11px;gap:6px}}
.figs + .live-foot{margin-top:36px}
/* typed conversation sits in front of the product shot: solid surfaces so nothing shows through the words */
.voice-panel[data-mode=type]{background:linear-gradient(168deg,#1A2B42,#181E2A 60%)}
.msg{background:#262D39}
.msg.me{background:#173558}
/* the Speak / Type switch sits over the product shot: solid, so nothing shows through behind "Type" */
.vp-mode{background:#111722;border-color:rgba(255,255,255,.12);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vp-mode button[aria-pressed=false]{color:var(--text-2)}

/* ---- Propic Pulse page (/pulse): the site's look, with Pulse's teal marking what's free ---- */
.pp-hero{padding:80px 0 72px}
.pp-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.pp-copy{max-width:620px}
.pp-kick{color:var(--teal)}
.pp-lede{font-family:var(--display);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.pp-note{display:flex;align-items:center;gap:9px;margin:16px 0 0;font-size:13.5px;color:var(--text-2)}
.pp-hero .pulse-3d{height:560px}
.pp-tools{display:grid;gap:72px}
.pp-tool{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.pp-flip .pp-tool-copy{order:2}
.pp-tool-copy{max-width:560px}
.pp-tool-copy h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em;margin:12px 0 10px;line-height:1.15}
.pp-tool-lead{font-family:var(--display);font-size:18px;font-weight:600;color:#fff;margin:0 0 12px}
.pp-tool-copy p:last-child{color:var(--text-2);font-size:16.5px;line-height:1.65;margin:0}
.pp-tool-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--card);padding:28px 30px}
.pp-tool-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pp-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--blue-mid);background:rgba(0,115,207,.14);border:1px solid rgba(85,162,223,.3)}
.pp-icon.teal{color:var(--teal);background:rgba(29,216,211,.1);border-color:rgba(29,216,211,.35)}
.pp-badge{padding:6px 14px;border-radius:999px;border:1.5px solid var(--blue-mid);color:var(--blue-mid);font-size:13px;font-weight:600}
.pp-badge.teal{border-color:var(--teal);color:var(--teal)}
.pp-tool-card ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pp-tool-card li{display:flex;gap:12px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5}
.pp-tool-card li::before{content:"";width:8px;height:1px;background:var(--blue-mid);flex:none;transform:translateY(-4px)}
.pp-tool:first-child .pp-tool-card li::before{background:var(--teal)}
@media (max-width:1000px){
  .pp-hero-in,.pp-tool{grid-template-columns:1fr;gap:28px}
  .pp-hero .pulse-art{order:-1}.pp-hero .pulse-3d{height:400px}
  .pp-flip .pp-tool-copy{order:0}
  .pp-tools{gap:56px}
}
@media (max-width:640px){.pp-hero{padding:48px 0 56px}.pp-tool-card{padding:22px 20px}}
.pulse-page .close-in{max-width:52ch}
/* six menu links: never wrap a label; on laptop widths tighten the gaps and leave "Pulse login" to the Pulse page */
.nav-links a{white-space:nowrap}
@media (max-width:1180px){.nav-links{gap:20px;font-size:14px}.nav-pulse{display:none}}
/* Pulse tools with their app screenshots (from the Pulse launch email) */
.pp-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.pp-points li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;line-height:1.5;color:var(--text)}
.pp-points li::before{content:"";width:8px;height:1px;background:var(--blue-mid);flex:none;transform:translateY(-4px)}
.pp-tool:first-child .pp-points li::before{background:var(--teal)}

/* ---- footer: brand + address (ABN), link groups, then the memory note ---- */
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(var(--foot-cols,3),minmax(0,1fr));gap:40px;padding-top:56px;padding-bottom:40px}
.foot-brand .brand img{height:28px}
.foot-brand p{margin:16px 0 0;color:var(--text-2);font-size:14px;line-height:1.55;max-width:34ch}
.foot-brand address{font-style:normal;margin-top:18px;color:var(--text-3);font-size:13.5px;line-height:1.7}
.foot-brand address a{color:var(--text-2)} .foot-brand address a:hover{color:#fff}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col h2{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-mid);margin:0 0 4px}
.foot-col a{color:var(--text-2);font-size:14.5px} .foot-col a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:22px;padding-bottom:32px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3);line-height:1.6}
.foot-base .foot-privacy{padding:0;margin:0;max-width:78ch}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---- legal pages (privacy policy, terms): readable prose with a contents list ---- */
.legal-hero{padding:80px 0 40px}
.legal-updated{margin:18px 0 0;font-size:13.5px;color:var(--text-3)}
.legal-body{padding-top:32px}
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;align-items:start}
.legal-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:9px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:8px}
.legal-toc .eyebrow{margin-bottom:6px}
.legal-toc a{font-size:13.5px;color:var(--text-2);line-height:1.4} .legal-toc a:hover{color:#fff}
.legal-doc{max-width:76ch;font-size:16px;line-height:1.75;color:var(--text-2)}
.legal-doc h2{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:700;letter-spacing:-.02em;color:var(--text);margin:48px 0 14px;scroll-margin-top:96px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-family:var(--display);font-size:17px;font-weight:600;color:var(--text);margin:28px 0 10px;scroll-margin-top:96px}
.legal-doc p{margin:0 0 16px}
.legal-doc strong{color:var(--text);font-weight:600}
.legal-doc ul{margin:0 0 18px;padding-left:22px} .legal-doc ul li{margin:0 0 8px}
.legal-doc ol.clauses{margin:0 0 18px;padding-left:34px} .legal-doc ol.clauses>li{margin:0 0 10px;padding-left:4px}
.legal-doc ol.clauses>li::marker{color:var(--blue-mid);font-weight:600}
.legal-doc ol.subclauses{list-style:none;margin:8px 0 0;padding-left:8px}
.legal-doc ol.subclauses li{margin:0 0 6px;display:flex;gap:10px}
.legal-doc .sc{flex:none;color:var(--text-3);font-variant-numeric:tabular-nums}
@media (max-width:1000px){.legal-grid{grid-template-columns:1fr;gap:28px}.legal-toc{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:20px}}
@media (max-width:640px){.legal-hero{padding:48px 0 24px}.legal-doc{font-size:15.5px}.legal-doc ol.clauses{padding-left:26px}}
.foot-base{border-top:0;position:relative}
.foot-base::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
/* Speak and Type share one space, so the panel is the same size whichever is showing: the voice view sets the height
   and the typed conversation fills it, scrolling inside. The one not in use is invisible (and out of the tab order). */
.vp-modes{display:grid}
.vp-modes>.vp-live,.vp-modes>.chat{grid-area:1/1;min-width:0}
.voice-panel[data-mode=speak] .vp-modes>.chat{visibility:hidden}
.voice-panel[data-mode=type] .vp-live{display:block;visibility:hidden}
.vp-modes>.chat{min-height:0;display:flex;flex-direction:column}
.vp-modes>.chat .chat-thread{flex:1 1 0;min-height:0;max-height:none}
.voice-overlay .vp-modes{flex:1;display:flex;min-height:0}
.voice-overlay .vp-modes>.chat{display:none}

/* the Buyer Match film, as a silent loop on its page: 16:9, square on phones (it has its own square cut) */
.loopfilm{max-width:1200px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--card);background:var(--base);aspect-ratio:16/9;line-height:0}
.loopfilm video{display:block;width:100%;height:100%;object-fit:cover;background:var(--base)}
@media (max-width:700px){.loopfilm{aspect-ratio:1/1;border-radius:14px}}
/* the journey hub's orb is Claire: tap it (or the prompt under it) to talk to her — the gradient means "talk to Claire" */
.hub-orb{border:0;padding:0;cursor:pointer;transition:filter .2s}
.hub-orb:hover{filter:brightness(1.08)}
.hub-talk{position:absolute;left:960px;top:600px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;padding:16px 32px;border-radius:999px;background:var(--grad-text);color:#fff;font-family:var(--body);font-weight:600;font-size:22px;white-space:nowrap;box-shadow:0 10px 28px rgba(0,115,207,.3);z-index:2;transition:filter .2s}
.hub-talk:hover{filter:brightness(.92)}
.hub-caption{top:690px}
@media (max-width:1199px){
  .hub-talk{position:relative;left:auto;top:auto;transform:none;align-self:flex-start;font-size:14px;padding:10px 18px;gap:8px;margin:-6px 0 4px}
  .hub-talk svg{width:16px;height:16px}
}

/* ---- About: our vision, built into the page (from the "Propic Vision Intro" design) ---- */
.vis{position:relative;aspect-ratio:16/9;max-width:1320px;margin:0 auto;container-type:inline-size;cursor:pointer}
.vis-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vis-field{transform-origin:50% 45%;opacity:.28}
.vis-sl{stroke-width:1.4;stroke-opacity:.26;stroke-dasharray:1}
.vis-l{stroke:url(#vislk);stroke-width:2.4;stroke-dasharray:1}
.vis-dot{fill:rgba(255,255,255,.75)}
.vis-node text{font-family:var(--body);font-size:19px;font-weight:700;letter-spacing:.24em;fill:rgba(255,255,255,.82)}
.vis-ring{fill:none;stroke:rgba(29,216,211,.35);stroke-width:1;transform-box:fill-box;transform-origin:center}
.vis-pulses circle{fill:#1DD8D3}
.vis-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 12%;font-family:var(--display)}
.vis-kick{color:var(--text-2);margin-bottom:clamp(14px,1.8cqw,34px)}
.vis-line{margin:0;font-size:clamp(20px,3.96cqw,76px);line-height:1.18;font-weight:300;letter-spacing:-.03em;color:var(--text)}
.vw{display:inline-block;will-change:opacity,transform}
.vw.hl{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.vis-gap{height:clamp(8px,1.4cqw,26px)}
.vis-sign{position:absolute;left:0;right:0;bottom:clamp(14px,4.4cqw,84px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1cqw,18px)}
.vis-sign i{display:block;width:clamp(40px,4.8cqw,92px);height:3px;border-radius:2px;background:var(--grad)}
.vis-sign img{height:clamp(18px,1.8cqw,32px);width:auto}
@media (max-width:700px){.vis{aspect-ratio:4/5}.vis-copy{padding:0 4%}.vis-line{font-size:clamp(20px,6.4cqw,34px)}}
.vis-field{transform-box:view-box}.vis-node{transform-box:view-box}
.vis-field{opacity:.14}
.vis-copy{padding:0 5%}
/* hub card types for the AI Buyer Match hub: tag chips and a comparison bar */
.hub-chips{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.hub-chip{padding:9px 18px;border-radius:12px;border:1.5px solid var(--teal);background:rgba(29,216,211,.1);font-family:var(--display);font-weight:600;font-size:19px;color:var(--text)}
.hub-bars{margin-top:auto;display:grid;gap:10px}
.hub-bar{display:grid;grid-template-columns:96px 1fr 52px;align-items:center;gap:14px;font-family:var(--body);font-size:18px;color:var(--text-2)}
.hub-bar i{display:block;height:16px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.hub-bar i b{display:block;height:100%;border-radius:999px;background:#5A6475}
.hub-bar.hi i b{background:var(--grad)}
.hub-bar em{font-style:normal;font-family:var(--display);font-weight:700;font-size:22px;color:var(--teal)}
.hub-bars-foot{font-family:var(--body);font-size:16px;color:var(--teal)}
@media (max-width:1199px){
  .hub-chips{margin-top:14px;gap:7px}.hub-chip{font-size:12.5px;padding:6px 11px;border-radius:9px}
  .hub-bars{margin-top:14px;gap:8px}.hub-bar{grid-template-columns:62px 1fr 34px;gap:10px;font-size:13px}.hub-bar i{height:10px}.hub-bar em{font-size:15px}.hub-bars-foot{font-size:12.5px}
}

/* Pulse screens in device frames, on the page's own charcoal (replaces the campaign images' pink backgrounds) */
.pp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pp-meta .pp-badge{padding:4px 12px;font-size:12px}
.pp-visual{display:flex;justify-content:center}
.pp-device{margin:0;line-height:0;background:#0B0E13;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.45)}
.pp-device img{display:block;width:100%;height:auto}
.pp-device.phone{width:min(340px,86%);padding:10px;border-radius:48px}
.pp-device.phone img{border-radius:38px}
.pp-device.phone.cut{max-height:540px;overflow:hidden;border-radius:48px 48px 0 0;border-bottom:0;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.pp-device.phone.cut img{border-radius:38px 38px 0 0}
.pp-device.browser{width:100%;max-width:640px;border-radius:14px;overflow:hidden}
.pp-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#1A1F28;border-bottom:1px solid var(--line);line-height:1}
.pp-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.pp-bar em{font-style:normal;margin-left:10px;font-size:12px;color:var(--text-3)}
.pp-hero-phone{width:min(330px,80%);margin:0 auto}
@media (max-width:1000px){.pp-hero .pp-hero-phone{order:-1;width:min(280px,70%)}.pp-device.phone.cut{max-height:440px}}
/* the Buyer Match film sits straight on the page, like the homepage's animation: no frame, on the page colour, edges feathered */
main>section.film-section{background:var(--base)}
.loopfilm{border:0;border-radius:0;box-shadow:none;background:transparent;max-width:1320px;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%)}
.loopfilm video{background:transparent}
@media (max-width:700px){.loopfilm{border-radius:0}}
/* phone frames at iPhone proportions: the screenshots are full-height (19.5:9), corners ~14% of the width, a Dynamic Island */
.pp-device.phone{position:relative;width:min(320px,82%);padding:9px;border-radius:52px}
.pp-device.phone img{border-radius:43px}
.pp-device.phone:not(.cut)::before{content:"";position:absolute;left:50%;top:calc(9px + 1.1%);width:29%;height:2.9%;transform:translateX(-50%);border-radius:999px;background:#000;z-index:1}
.pp-hero-phone{width:min(320px,78%)}
@media (max-width:1000px){.pp-hero .pp-hero-phone{width:min(260px,64%)}}


/* ---- AI Buyer Match: the buyer's email, as Claire sends it, in a phone you can scroll ---- */
.mailphone{position:relative;width:min(360px,92vw);margin:0 auto;padding:10px;border-radius:54px;background:#0B0E13;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.45)}
.mailphone::before{content:"";position:absolute;left:50%;top:21px;width:31%;height:30px;transform:translateX(-50%);border-radius:999px;background:#000;z-index:3}
.mailphone-screen{position:relative;height:min(740px,78vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:44px;background:#F2F3F6;color:#1F2733;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;scrollbar-width:none}
.mailphone-screen::-webkit-scrollbar{display:none}
.mailphone-screen:focus-visible{outline:2px solid var(--blue-mid);outline-offset:3px}
.mp-status{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 28px 8px;background:#F2F3F6;font-size:14px}
.mp-status span{font-size:9px;letter-spacing:2px;color:#1F2733}
.mp-head{padding:6px 18px 12px;background:#F2F3F6;border-bottom:1px solid #E1E4EA}
.mp-back{font-size:15px;color:#0A64D8}
.mp-from{display:flex;align-items:center;gap:10px;margin-top:12px}
.mp-from i{font-style:normal;width:34px;height:34px;border-radius:50%;background:#0C1B52;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.mp-from b{display:block;font-size:14px}.mp-from small{display:block;font-size:12px;color:#6B7483}
.mp-head h3{font-family:inherit;margin:10px 0 0;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:0;color:#1F2733}
.em{background:#fff;margin:0 0 14px;padding-bottom:18px}
.em-brand{background:#0C1B52;color:#fff;text-align:center;padding:16px 0 13px;font-weight:800;letter-spacing:.34em;font-size:17px;line-height:1}
.em-brand small{display:block;margin-top:5px;font-size:8.5px;letter-spacing:.5em;font-weight:600;opacity:.8}
.em-photo{position:relative;aspect-ratio:16/10;overflow:hidden}
.em-addr{padding:12px 16px 4px}
.em-addr h4{margin:0;font-size:16px;font-weight:700;color:#1F2733;font-family:inherit;letter-spacing:0}
.em-feat{display:flex;gap:16px;margin-top:8px;font-size:13px;color:#39424F}
.em-feat span{display:inline-flex;align-items:center;gap:5px}
.em-agent{display:flex;gap:11px;align-items:center;margin:12px 16px 4px;padding:11px 12px;border:1px solid #E6E9EE;border-radius:12px}
.em-agent i{font-style:normal;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#1E2F7A,#0073CF);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.em-agent b{display:block;font-size:13.5px}.em-agent small{display:block;font-size:11px;color:#6B7483;line-height:1.45}
.em-body{padding:6px 16px 0;font-size:13.5px;line-height:1.6;color:#2A3340}
.em-body p{margin:0 0 10px}
.em-body mark{background:#DFF4F1;color:#0C5C52;border-radius:3px;padding:0 2px}
.em-body ul{margin:0 0 12px;padding-left:18px}.em-body li{margin:0 0 5px}
.em-body h5{font-family:inherit;font-size:14px;font-weight:700;margin:14px 0 8px;color:#1F2733;letter-spacing:0}
.em-price{padding-top:4px;border-top:1px solid #EEF0F3}
.em-btn{display:block;margin:12px 16px 0;padding:12px;border-radius:10px;background:#0C1B52;color:#fff;text-align:center;font-size:14px;font-weight:600}
.em-btn.ghost{background:#fff;color:#0C1B52;border:1.5px solid #0C1B52}
.em-insp{margin:14px 16px 0;padding:12px 14px;border-radius:12px;background:#F4F6FA;font-size:13px;display:grid;gap:3px}
.em-insp u{color:#0A64D8;text-decoration:underline}
.em-cta{margin-top:16px;padding-top:12px;border-top:1px solid #EEF0F3}
.em-cta p{margin:0 16px;font-size:13.5px;font-weight:600;text-align:center}
.em-sign{padding:18px 16px 0;font-size:13px;line-height:1.5}.em-sign p{margin:0 0 6px}.em-sign b,.em-sign small{display:block}.em-sign small{color:#6B7483}
.em-foot{margin:16px 16px 0;font-size:11px;color:#8A93A1;text-align:center}
.mp-hint{position:sticky;bottom:14px;left:0;display:block;width:max-content;margin:-40px auto 0;padding:6px 14px;border-radius:999px;background:rgba(12,27,82,.86);color:#fff;font-size:12px;font-weight:600;pointer-events:none;transition:opacity .3s}
[data-mailphone].scrolled .mp-hint{opacity:0}
.mp-note{margin:16px auto 0;text-align:center;font-size:12.5px;color:var(--text-3)}
.em-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* the demo promise under the closing buttons, and a demo prompt at the moment of interest */
.promise{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin:20px 0 0;font-size:14px;color:var(--text-2)}
.promise i{font-style:normal;color:var(--blue-mid)}
.nudge{max-width:760px;margin:36px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 24px;border-radius:16px;background:var(--panel);border:1px solid rgba(85,162,223,.3);box-shadow:var(--card)}
.nudge p{margin:0;font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:600;letter-spacing:-.01em;color:var(--text)}
@media (max-width:640px){.nudge{justify-content:center;text-align:center}}

/* ---- the floating menu (2 Oct 26; split in three on 3 Oct 26 — see "menu in three pieces" at the end of this file) ----
   The menu floats clear of the top edge, exactly as wide as the page content. A highlight rests on the current page and
   follows the pointer along the links. The backdrop is a plain blur: a lens filter was tried and made the bar repaint
   constantly, which is what made hover feel slow. */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(calc(var(--max) - 2*var(--gutter)),calc(100% - 2*var(--gutter)));z-index:40;border:0;isolation:isolate;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav .nav-in{max-width:none}
.nav .nav-links a{position:relative;z-index:1;transition:color .08s}
.nav .nav-links a:hover,.nav .nav-links a.is-on{color:#fff}
.nav-blob{position:absolute;left:0;width:0;pointer-events:none;will-change:transform,width}
.nav .btn-solid{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(0,115,207,.45)}
/* phones: the links fold into a panel under the bar, opened with the menu button (a 44px target) */
.nav-menu{display:none;width:44px;height:44px;margin-left:2px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:rgba(255,255,255,.06);cursor:pointer;place-items:center;align-content:center;gap:5px}
.nav-menu i{display:block;width:18px;height:2px;border-radius:1px;background:var(--text);transition:transform .18s,opacity .18s}
.nav-menu[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-menu[aria-expanded="true"] i:nth-child(2){opacity:0}.nav-menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;display:grid;gap:2px;padding:8px;border-radius:var(--r-card);background:#171B22;border:1px solid var(--line-strong);box-shadow:0 22px 60px rgba(0,0,0,.55);animation:navPanel .18s cubic-bezier(.2,.8,.2,1)}
.nav-panel[hidden]{display:none}
.nav-panel a{display:block;padding:14px 16px;border-radius:var(--r-ctl);font-family:var(--body);font-size:16px;font-weight:500;color:var(--text-2)}
.nav-panel a:hover,.nav-panel a.is-on{background:rgba(255,255,255,.07);color:#fff}
.nav-panel-out{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 var(--r-ctl) var(--r-ctl)!important;color:var(--blue-light)!important}
@keyframes navPanel{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:900px){.nav-menu{display:grid}}
@media (min-width:1236px){.nav-panel{display:none}}   /* the bar folds at 1235px (below): the panel must be there for every width that shows the menu button */
/* the bar no longer takes up room in the page, so the first section leaves space for it (and runs up behind it) */
main>section:first-child::before{content:'';display:block;height:84px}
main.demo-grid{padding-top:180px} /* Contact and Book a demo have no hero section */
@media (max-width:1180px){.nav .nav-links a{padding:9px 11px}}
@media (max-width:900px){.nav{top:10px}.nav .nav-in{height:54px;padding:0 7px 0 18px}main>section:first-child::before{height:70px}main.demo-grid{padding-top:124px}}

/* ---- corners (2 Oct 26): no pills. Everything takes its corner from the cards — 16px on cards and the menu bar, 10px on
   buttons and controls, 8px on small tags — so an inner corner always sits parallel to the one around it. True circles
   (the orb, dots, step markers) and the phones' own notches stay round. ---- */
:root{--r-card:16px;--r-ctl:10px;--r-chip:8px}
.btn,.vp-end,.orb-cta,.hub-talk{border-radius:var(--r-ctl)}
.slot-day,.band-chip,.lcard-tag,.hub-pill,.pp-badge,.mp-hint{border-radius:var(--r-chip)}
.vp-mode{border-radius:12px}.vp-mode button{border-radius:9px}
.rbar-t,.rbar-t i,.hub-bar i,.hub-bar i b{border-radius:3px}

/* ---- the product tour in the hero (2 Oct 26; replaces the single hero picture) ----
   A turning ring of four product shots standing on water, centred on the page behind the headline and Claire's panel.
   Nothing in it has a hard edge: the water and its ripples run the full width and fade out at the logo strip, the
   reflections fade as they go deeper, and the stage is never clipped. */
.hero{overflow:visible;overflow-x:clip}
.hero-copy{position:relative;z-index:2;pointer-events:none}.hero-copy a,.hero-copy button{pointer-events:auto}
/* a soft shadow behind the words so they stay readable where a phone passes behind them */
.hero-copy::before{content:'';position:absolute;inset:-70px -90px -60px -120px;z-index:-1;background:radial-gradient(closest-side,rgba(20,23,28,.9),rgba(20,23,28,.62) 62%,rgba(20,23,28,0))}
.hero-tour{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the grid is 1.08fr / .92fr with a 64px gap, so the page centre sits 8.7% + 32px to the left of this column's edge */
.tour-stage{position:absolute;left:calc(-8.696% - 32px);top:6px;width:80%;aspect-ratio:1400/1232;transform:translateX(-50%);perspective:1900px;perspective-origin:50% 34%;animation:tourFloat 9s ease-in-out infinite}
@keyframes tourFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.tour-ring{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.tour-item{position:absolute;inset:0;opacity:0;transform-style:preserve-3d;will-change:transform,opacity;transition:transform 1.5s cubic-bezier(.5,0,.15,1),opacity 1.5s cubic-bezier(.5,0,.15,1)}
.tour-item.is-front{opacity:1}.tour-item.is-side{opacity:.3} /* the background shots stay well back (dimmed from .5, 2 Oct 26) */
.tour-item.is-side.is-under{opacity:0} /* the right-hand neighbour is wholly behind the glass voice panel at every desktop width; it showed through the globe's dots as a pale box (4 Oct 26) */
/* no filters on anything that moves: a drop-shadow or blur here would be redrawn on every frame of the turn */
.hero-tour .hero-phones{position:absolute;inset:0;right:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:none;-webkit-mask-image:none;mask-image:none}
.tour-item.is-side>picture .hero-phones{pointer-events:auto;cursor:pointer}
.tour-refl{position:absolute;top:100%;left:0;right:0;height:100%}
.tour-refl-in{position:absolute;inset:0;transform:scaleY(-1);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.3) 0%,rgba(0,0,0,.09) 24%,transparent 48%);mask-image:linear-gradient(to top,rgba(0,0,0,.3) 0%,rgba(0,0,0,.09) 24%,transparent 48%)}
/* the water: drawn straight onto the page's own background — no band and no waterline. It starts a little above the
   phones' feet so the waves are whole, and its bottom edge is the top of the logo strip (--water-h is measured by the
   script), so waves run right to that edge and never over it. */
.tour-rip{position:absolute;top:calc(100% - 230px);left:calc(50% - 50vw);width:100vw;height:calc(var(--water-h,520px) + 230px);overflow:hidden;z-index:0}
.tour-ring{z-index:1} /* the phones and their reflections sit on top of the water, never under it */
.pulse-rip{z-index:0} /* ends at the logo strip, never over it */
.tour-rip canvas,.pulse-rip canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
/* the panel is glass over the scene: a little more see-through than before, so the water carries on behind it */
.hero-visual>.voice-panel{background:linear-gradient(168deg,rgba(0,115,207,.20),rgba(24,31,46,.88) 76%)}
/* one column (tablet and phone): the turn only, small above the panel — no water, reflections or background shots */
@media (max-width:1000px){.hero{overflow:hidden}.hero-copy::before{display:none}.tour-stage{left:54%;top:-36px;width:70%;animation:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%);mask-image:linear-gradient(180deg,#000 55%,transparent 96%)}
  .tour-rip,.tour-refl{display:none}.tour-item.is-side{opacity:0}.tour-item.is-side>picture .hero-phones{pointer-events:none}}
@media (max-width:640px){.tour-stage{width:84%;top:-24px}}
@media (prefers-reduced-motion:reduce){.tour-stage{animation:none}.tour-item,.tour-ring{transition:none}.tour-rip{display:none}}

/* ---- the Pulse phone on the home page (2 Oct 26; replaces the 3D model): a real screenshot in the site's phone frame,
   standing at a slight angle, leaning towards the pointer, with ripples spreading from under it on hover ---- */
.pulse-stage{perspective:1400px;padding-bottom:40px}
.pulse-stage .pp-device.phone{width:min(290px,70%);transform:rotateY(var(--py,-14deg)) rotateX(var(--px,4deg));transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),-24px 34px 70px rgba(0,0,0,.5)}
/* 12 Oct 26: the Pulse section's water lies under the whole section (claire.js stretches this box to it) and softens out at
   the section's top and bottom edges; it was a pool around the phone */
.pulse-rip{top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.pulse-stage .pp-device{position:relative;z-index:1}
.pulse-band .pulse-copy{position:relative;z-index:1} /* the words and buttons sit above the section's water */
@media (max-width:1000px){.pulse-stage{padding-bottom:0}.pulse-stage .pp-device.phone{transform:none;width:min(260px,64%)}}

/* ---- Pulse page hero (2 Oct 26) — a faint pulse spreading from behind the phone (three rings, one every 2.4s) ---- */
.pp-pulse-wrap{position:relative;display:grid;justify-items:center}
.pp-pulse-wrap>.pp-device{position:relative;z-index:1}
.pp-pulse{position:absolute;inset:0;pointer-events:none}
.pp-pulse i{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;border:1.5px solid rgba(29,216,211,.7);box-shadow:0 0 26px rgba(29,216,211,.3),inset 0 0 26px rgba(29,216,211,.18);opacity:0;animation:ppPulse 7.2s cubic-bezier(.2,.6,.3,1) infinite;will-change:transform,opacity}
.pp-pulse i:nth-child(2){animation-delay:2.4s}.pp-pulse i:nth-child(3){animation-delay:4.8s}
@keyframes ppPulse{0%{opacity:0;transform:scale(.75)}18%{opacity:.3}60%{opacity:.14}100%{opacity:0;transform:scale(2.3)}}
@media (prefers-reduced-motion:reduce){.pp-pulse{display:none}}

/* ---- gradient words catch a pulse of light as they scroll into view ----
   When a heading comes into view, a band of light sweeps once, left to right, through its gradient words, and each letter
   swells a little as the light passes over it — a wave following the light. The light is a separate layer over the
   gradient, and when the pulse ends claire.js puts the original text back, so the words finish exactly as the plain
   gradient they started as. For the length of the pulse the words are split into letters; everything that moves is driven
   by one number, --tt-t, running from 0 to 1. Plays each time the heading comes onto the screen, scrolling down or up (right
   to left on the way up); not at all under reduced motion. */
@property --tt-t{syntax:'<number>';inherits:true;initial-value:0}
@keyframes ttLight{from{--tt-t:0}to{--tt-t:1}}
.tt b.tt-lit{background:none;animation:ttLight 1.9s cubic-bezier(.4,.1,.3,1) both}
.tt-lit .tw{white-space:nowrap}
.tt-lit .tl{display:inline-block;padding:.14em .07em;margin:-.14em -.07em; /* room for the ink that overhangs a letter's box */
  /* where the band's left edge is on this letter's line (px), how far its centre is from this letter's, and 1→0 closeness */
  --L:calc(var(--tt-t) * (var(--lw) + var(--bw)) - var(--bw));
  --d:calc(var(--L) + var(--bw) / 2 - var(--cx));
  --k:max(0, 1 - max(var(--d), -1 * var(--d)) / (var(--bw) * .5));
  color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 32%,#fff 50%,rgba(255,255,255,.85) 68%,rgba(255,255,255,0) 100%),var(--grad);
  /* the gradient runs half an em past each end of the line, so a letter that leans out of it (the tail of a y) keeps its colour */
  background-size:calc(var(--bw) * 1px) 100%,calc(var(--lw) * 1px + 1em) 100%;
  background-position:calc((var(--L) - var(--lx)) * 1px) 0,calc(var(--lx) * -1px - .5em) 0;
  transform-origin:50% 78%;transform:translateY(calc(var(--k) * -.045em)) scale(calc(1 + var(--k) * .14));
  filter:drop-shadow(0 0 calc(var(--k) * .22em) rgba(170,208,239,calc(var(--k) * .75)))}

/* the highlighted card in "Built for how you buy": a wash of Claire's blue, a brighter edge and a soft glow, so it reads as
   the one to look at first (the other card stays quiet) */
.track-accent{background:linear-gradient(168deg,rgba(0,115,207,.20),var(--raised) 62%);border-color:rgba(85,162,223,.5);box-shadow:var(--card),0 0 70px -14px rgba(0,115,207,.45)}

/* ---- the hub's orb is the same Claire as the one at the top: the same sheen, voice bars and visualiser ring ---- */
.hub-viz{position:absolute;left:640px;top:150px;width:640px;height:640px;pointer-events:none}
.hub-orb{display:grid;place-items:center;overflow:hidden}
.hub-orb .wave{transform:scale(1.7)}
.hub:has(.hub-viz) .hub-ring-in{visibility:hidden} /* the visualiser's ring takes its place */
@media (max-width:900px){.hub-viz{display:none}.hub:has(.hub-viz) .hub-ring-in{visibility:visible}.hub-orb .wave{transform:scale(.6)}}

/* ---- "hello" in 58 languages drifting up through Claire's panel ----
   One word at a time rises from the bottom of the panel to the top and fades away — behind the panel's content, faint, and
   slow. claire.js adds a word every second or so and removes it when it has gone; each only ever moves and fades. */
.hero-visual>.voice-panel{isolation:isolate}
.vp-hellos{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.vp-hellos span{position:absolute;bottom:-1.6em;white-space:nowrap;font-family:var(--body);font-weight:500;color:var(--blue-light);opacity:0;will-change:transform,opacity;animation:helloRise var(--dur,12s) linear forwards}
@keyframes helloRise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:var(--o,.16)}80%{opacity:var(--o,.16)}100%{transform:translate3d(var(--dx,0),calc(var(--rise) * -1px),0);opacity:0}}
@media (prefers-reduced-motion:reduce){.vp-hellos{display:none}}

/* the hero's paragraph is no wider than the headline above it, so it stops where the headline stops and stays clear of the
   product pictures (claire.js measures the headline's longest line into --head-w; 31rem until it has) */
@media (min-width:1001px){.hero-copy .lede{max-width:var(--head-w,31rem)}}

/* ---- menu in three pieces (3 Oct 26): the logo (top left) and the two buttons (top right) sit straight on the page; only
   the links live in the glass, centred. The glass is flat and clear: a faint tint over a light blur, so the page shows through, with no border, no
   highlights and no shading (a lit rim, a top highlight and inner shading were all tried and removed: less is more). ---- */
/* once the page is scrolled, a soft shade across the very top keeps the logo and buttons readable over whatever is behind them */
.nav::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:calc(50% - 50vw);width:100vw;top:-16px;height:128px;opacity:0;background:linear-gradient(180deg,rgba(14,17,22,.92),rgba(14,17,22,.55) 55%,rgba(14,17,22,0));transition:opacity .35s}
.nav.is-condensed::before{opacity:1}
.nav .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0;gap:20px}
.nav .brand{justify-self:start}.nav .brand img{height:36px;width:auto}
.nav .nav-cta{justify-self:end}
.nav .back{grid-column:3;justify-self:end}
.nav .nav-links{justify-self:center;position:relative;isolation:isolate;gap:2px;padding:7px;border-radius:18px;font-size:15px;background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(8px) saturate(170%) brightness(1.06);backdrop-filter:blur(8px) saturate(170%) brightness(1.06);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.nav .nav-links a{padding:10px 18px;border-radius:12px;font-weight:500;color:rgba(255,255,255,.86)}
.nav .nav-links a.is-on{color:#fff}
.nav .nav-links a:hover{color:#fff}
/* the highlight under a link is a drop of liquid, moved by the script (its two edges travel separately, so the stylesheet
   only fades it). At rest, on the page you're on, it is a flat light chip; under the pointer it fills with the brand
   gradient and glows. */
.nav-blob{top:7px;bottom:7px;border-radius:14px;overflow:hidden;transform-origin:50% 50%;background:rgba(255,255,255,.1);transition:opacity .12s,box-shadow .2s}
.nav-blob::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity .18s}
.nav-links:hover .nav-blob{box-shadow:0 8px 26px rgba(0,115,207,.5),0 0 30px rgba(145,143,249,.4)}
.nav-links:hover .nav-blob::before{opacity:1}
/* inside the glass a soft light follows the pointer */
.nav-liquid{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.nav-sheen{position:absolute;top:-30px;left:-130px;width:260px;height:calc(100% + 60px);background:radial-gradient(closest-side,rgba(190,220,255,.16),transparent);opacity:0;transition:opacity .35s;will-change:transform}
.nav-links:hover .nav-sheen{opacity:1}
/* Pulse login: the same flat glass, lit with the gradient under the pointer */
.nav .btn-ghost{position:relative;isolation:isolate;overflow:hidden;border-color:transparent;background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(8px) saturate(170%) brightness(1.06);backdrop-filter:blur(8px) saturate(170%) brightness(1.06);box-shadow:none;transition:box-shadow .2s,color .2s}
.nav .btn-ghost::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:0;transition:opacity .18s}
.nav .btn-ghost:hover{color:#fff;border-color:transparent;box-shadow:0 8px 26px rgba(0,115,207,.5),0 0 30px rgba(145,143,249,.35)}
.nav .btn-ghost:hover::before{opacity:1}
main>section:first-child::before{height:92px}
/* the buttons are the same height, corner and type size as the glass, so the three pieces read as one row */
@media (min-width:901px){.nav .nav-cta .btn{height:53px;padding:0 24px;border-radius:18px;font-size:15px;display:inline-flex;align-items:center}}
@media (max-width:1180px){.nav .nav-links a{padding:10px 12px}.nav .nav-links{font-size:14.5px}}
@media (max-width:900px){.nav .nav-in{display:flex;height:56px}.nav .brand img{height:28px}.nav::before{top:-10px;height:104px;opacity:1}main>section:first-child::before{height:74px}}
@media (prefers-reduced-motion:reduce){.nav-blob,.nav-blob::before,.nav .btn-ghost::before{transition:none}.nav-sheen{display:none}}

/* the voice panel sits level with the text on the left — both are centred on the same line */
@media (min-width:1001px){.hero-visual>.voice-panel{margin-top:0}.tour-stage{top:-70px}}

/* ---- Pulse, voice-first (3 Oct 26) ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Pulse in talking mode on a phone: the same screen as this site's own voice mode. One turn of an example conversation shows
   at a time; the orb is teal while the agent talks and purple while Pulse answers. */
.tphone{position:relative;z-index:1;margin:0;width:min(320px,82%)}
.tp-screen{position:relative;aspect-ratio:9/19;padding:9px;border-radius:52px;background:#0B0E13;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.5);display:grid;grid-template-rows:auto auto auto 1fr;overflow:hidden}
.tp-screen::before{content:"";position:absolute;inset:9px;border-radius:43px;z-index:-1;background:radial-gradient(90% 46% at 50% 30%,rgba(0,115,207,.3),transparent 70%),linear-gradient(180deg,#0E2238,#14171C 62%)}
.tp-screen::after{content:"";position:absolute;left:50%;top:20px;width:29%;height:22px;transform:translateX(-50%);border-radius:999px;background:#000}
.tp-screen{isolation:isolate}
.tp-top{display:flex;align-items:center;gap:8px;justify-content:center;padding:62px 0 0;font-family:var(--display);font-size:13px;color:var(--text-2)}
.tp-top img{height:15px;width:auto}.tp-top b{font-weight:600}
.tp-orb{position:relative;width:62%;aspect-ratio:1;margin:18px auto 0;display:grid;place-items:center}
.tp-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--tp,var(--teal)) 0 1.3deg,transparent 1.3deg 4.5deg);-webkit-mask:radial-gradient(closest-side,transparent 80%,#000 81% 97%,transparent 98%);mask:radial-gradient(closest-side,transparent 80%,#000 81% 97%,transparent 98%);opacity:.75;animation:tpSpin 40s linear infinite,tpBreathe 2.4s ease-in-out infinite;transition:background .5s}
.tp-ball{width:66%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),transparent 42%),radial-gradient(circle at 50% 50%,var(--tp,var(--teal)),#0A4E7A 130%);box-shadow:0 0 44px -6px var(--tp,var(--teal)),inset 0 -10px 24px rgba(0,0,0,.25);animation:tpBeat 1.6s ease-in-out infinite;transition:background .5s,box-shadow .5s}
.tp-wave{display:flex;align-items:center;gap:4px;height:34px}
.tp-wave i{width:4px;height:100%;border-radius:2px;background:#fff;transform:scaleY(.3);animation:tpBar 1s ease-in-out infinite}
.tp-wave i:nth-child(2){animation-delay:-.2s}.tp-wave i:nth-child(3){animation-delay:-.55s}.tp-wave i:nth-child(4){animation-delay:-.35s}.tp-wave i:nth-child(5){animation-delay:-.75s}.tp-wave i:nth-child(6){animation-delay:-.1s}
@keyframes tpSpin{to{rotate:360deg}}@keyframes tpBreathe{50%{scale:1.05}}@keyframes tpBeat{50%{transform:scale(1.045)}}@keyframes tpBar{50%{transform:scaleY(1)}}
.tphone[data-who="pulse"]{--tp:var(--purple)}
.tp-state{display:grid;margin:14px 0 0;text-align:center;font-family:var(--display);font-size:14px;color:#fff}
.tp-state span{grid-area:1/1;transition:opacity .4s}.tp-state span:last-child,.tphone[data-who="pulse"] .tp-state span:first-child{opacity:0}.tphone[data-who="pulse"] .tp-state span:last-child{opacity:1}
.tp-turns{list-style:none;margin:16px 0 0;padding:0 20px 26px;display:grid;align-content:start}
.tp-turn{grid-area:1/1;display:grid;gap:9px;align-content:start;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.tp-turn.on,.tphone:not([data-who]) .tp-turn:first-child{opacity:1;visibility:visible}
.tp-turn p{margin:0;font-size:13.5px;line-height:1.45;padding:10px 13px;border-radius:14px}
.tp-q{justify-self:end;max-width:88%;background:rgba(29,216,211,.14);border:1px solid rgba(29,216,211,.3);color:#fff;border-bottom-right-radius:4px!important}
.tp-a{justify-self:start;max-width:94%;background:rgba(255,255,255,.07);border:1px solid var(--line-strong);color:var(--text);border-bottom-left-radius:4px!important;transition:opacity .45s,transform .45s}
.tphone[data-who] .tp-turn:not(.said) .tp-a{opacity:0;transform:translateY(6px)}
.tp-claire .tp-a{background:rgba(145,143,249,.14);border-color:rgba(145,143,249,.4)}
.tp-a a{display:block;margin-top:7px;font-weight:600;color:var(--blue-light)}
.tphone figcaption{margin-top:14px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--text-3)}
/* hero: the talking phone in front, the suburb screen behind it and to the right */
.pp-talk-wrap{grid-template-columns:1fr;padding-right:90px}
.pp-talk-wrap>.pp-device.pp-back-phone{position:absolute;z-index:0;right:0;top:9%;width:min(250px,60%);opacity:.5;transform:rotate(5deg);filter:saturate(.8)}
@media (max-width:1000px){.pp-talk-wrap{order:-1;padding-right:0}.pp-talk-wrap>.pp-device.pp-back-phone{display:none}.tphone{width:min(280px,74%)}}
@media (prefers-reduced-motion:reduce){.tp-ticks,.tp-ball,.tp-wave i{animation:none}.tp-wave i{transform:scaleY(.7)}}
/* ask, don't search */
.pp-ask{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:stretch}
.pp-ask>div{border:1px solid var(--line);border-radius:var(--r-card);padding:30px 32px;background:var(--panel);box-shadow:var(--card)}
.pp-ask-old ol{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:grid;gap:0}
.pp-ask-old li{counter-increment:s;display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);color:var(--text-3);font-size:15.5px}
.pp-ask-old li::before{content:counter(s);font-family:var(--display);font-size:12px;color:var(--text-3);width:14px;flex:none}
.pp-ask-new{display:grid;align-content:center;border-color:rgba(29,216,211,.35)!important;background:radial-gradient(80% 90% at 0% 0%,rgba(29,216,211,.12),transparent 60%),var(--panel)!important}
.pp-ask-new blockquote{margin:20px 0 0;max-width:none;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;line-height:1.22;letter-spacing:-.02em}
.pp-ask-new blockquote svg{box-sizing:content-box;padding:12px;border-radius:50%;background:var(--teal);color:#062a2a;margin-top:2px}
.pp-ask-new blockquote p{margin:0}
.pp-ask-note{margin:22px 0 0;color:var(--text-2);font-size:16px;line-height:1.6}
/* when agents ask */
.pp-when{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-when-item{border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px;background:var(--panel)}
.pp-when-item h3{margin:0 0 8px;font-size:15px;font-family:var(--body);font-weight:600;color:var(--teal);letter-spacing:0}
.pp-when-item p{margin:0;font-family:var(--display);font-size:19px;line-height:1.35;color:#fff}
/* Pulse and Claire */
.pp-further{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pp-fcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);padding:30px 32px;background:var(--panel);box-shadow:var(--card)}
.pp-free{border-color:rgba(29,216,211,.35)}.pp-paid{border-color:rgba(85,162,223,.35)}
.pp-fcard .pp-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-fcard .pp-tool-lead{margin:16px 0 6px}
.pp-asks{list-style:none;margin:0 0 26px;padding:0;flex:1}
.pp-asks li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:16px;color:var(--text)}
.pp-asks em{flex:none;font-style:normal;font-size:12.5px;font-weight:600;color:var(--blue-mid)}
@media (max-width:1000px){.pp-ask,.pp-further{grid-template-columns:1fr}.pp-when{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pp-when{grid-template-columns:1fr}.pp-ask>div,.pp-fcard{padding:22px 20px}.pp-asks li{flex-direction:column;gap:2px}}
/* the "Placeholder" tag on an invented quote (shown only on the preview site) */
.quote-ph{position:absolute;top:-10px;right:16px;padding:3px 10px;border-radius:var(--r-chip);background:#F2C94C;color:#1c1500;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* the talking phone on the home page leans and sits on the water like the screenshot phone did */
.pulse-stage .tphone{width:min(290px,70%);transform:rotateY(var(--py,-14deg)) rotateX(var(--px,4deg));transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
.pulse-stage .tphone .tp-screen{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),-24px 34px 70px rgba(0,0,0,.5)}
@media (max-width:1000px){.pulse-stage .tphone{transform:none;width:min(280px,74%)}}
/* smaller phones: a smaller orb and text, so a long answer still fits on the screen */
.tphone{container-type:inline-size}
@container (max-width:300px){.tp-top{padding-top:48px}.tp-orb{width:50%;margin-top:12px}.tp-state{margin-top:10px;font-size:13px}.tp-turns{margin-top:12px;padding:0 14px 20px}.tp-turn p{font-size:12.5px;padding:9px 11px}}
@media (max-width:420px){.tphone,.pulse-stage .tphone{width:min(280px,88%)}}
@container (max-width:250px){.tp-orb{width:44%}.tp-top{padding-top:42px}.tp-turn p{font-size:12px}}
/* home Pulse band: a second paragraph, and the line to Claire under the buttons */
.pulse-copy .intro+.intro{margin-top:14px}
.pulse-claire{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);max-width:34rem;font-size:15px;line-height:1.55;color:var(--text-2)}
.pulse-claire a{font-weight:600;color:var(--blue-light);white-space:nowrap}

/* ---- AI Buyer Match, lifted (3 Oct 26): hero numbers and buttons, numbered cards, the difference as a contrast, steps beside the buyer email, vendor results beside their words ---- */
/* hero: the headline numbers beside the words, and the two buttons under them */
.cms-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;align-items:end}
.cms-hero .ctas{margin-top:30px}
.cms-hero-stats{display:grid;gap:14px;padding-bottom:6px}
.cms-hero-stats .eyebrow{margin-bottom:2px}
.chs{padding:22px 26px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(34,40,51,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chs b{display:block;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chs span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--text-2)}
.chs-foot{margin:0;font-size:12.5px;color:var(--text-3)} /* when the figures above were last updated */
@media (max-width:1000px){.cms-hero{grid-template-columns:1fr;gap:36px;align-items:start}.cms-hero-stats{grid-template-columns:1fr 1fr}.cms-hero-stats .eyebrow,.chs-foot{grid-column:1/-1}}
@media (max-width:560px){.cms-hero-stats{grid-template-columns:1fr}}
/* the film follows straight on */
.about-hero+.film-section{padding-top:8px}
/* cards: three in a row when there are three; each numbered */
.cms-cards.n3{grid-template-columns:repeat(3,1fr)}
.cms-cards .track{position:relative;padding:34px 32px;transition:border-color .2s,transform .2s}
.cms-cards .track:hover{border-color:rgba(85,162,223,.35);transform:translateY(-2px)}
.card-n{display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:22px;border-radius:var(--r-ctl);border:1px solid rgba(85,162,223,.35);background:rgba(0,115,207,.1);font-family:var(--display);font-size:13px;font-weight:700;color:var(--blue-light)}
.cms-cards .track h3{margin-top:0}
@media (max-width:1000px){.cms-cards.n3{grid-template-columns:1fr}}
/* the difference: what somebody typed once, faded, against what they actually did */
.contrast{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;margin-top:22px;align-items:stretch}
.contrast p{margin:0;padding:34px 36px;border-radius:var(--r-card);font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.35;letter-spacing:-.02em}
.contrast-old{border:1px dashed var(--line-strong);color:var(--text-3);font-weight:300}
.contrast-new{border:1px solid rgba(85,162,223,.4);background:radial-gradient(90% 120% at 0% 0%,rgba(0,115,207,.18),transparent 60%),var(--panel);color:#fff;font-weight:500;box-shadow:var(--card)}
@media (max-width:860px){.contrast{grid-template-columns:1fr}}
/* steps down the left as a timeline, the buyer's email beside them */
.steps-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:start;margin-top:36px}
.steps-tl{margin:0;gap:0;position:relative}
.steps-tl::before{content:'';position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,var(--blue),var(--purple))}
.steps-tl li{border:0;background:none;box-shadow:none;padding:12px 0 26px 64px}
.steps-tl li::before{left:0;top:10px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--base);border:2px solid var(--blue-mid);font-size:13px;opacity:1;color:#fff}
.steps-tl li:last-child{padding-bottom:0}
.steps-fig{position:sticky;top:110px}
.steps-fig-t{margin:0 0 16px;text-align:center;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-mid)}
@media (max-width:1000px){.steps-split{grid-template-columns:1fr;gap:44px}.steps-fig{position:static}}
@media (max-width:760px){.steps-tl li{padding:10px 0 24px 58px}.steps-tl li::before{position:absolute;display:grid;margin:0}}
/* the vendor's results beside their words; the bars fill as it comes into view */
.split-fig{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.split-fig .rcard{margin:0;max-width:none}
.reveal .rbar-t i{transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.22,1,.36,1) .25s}
.reveal.in .rbar-t i{transform:none}
.reveal.in .rbar:nth-child(2) .rbar-t i{transition-delay:.45s}.reveal.in .rbar:nth-child(3) .rbar-t i{transition-delay:.65s}
@media (max-width:1000px){.split-fig{grid-template-columns:1fr;gap:28px}}
@media (prefers-reduced-motion:reduce){.reveal .rbar-t i{transform:none;transition:none}}
/* logos straight on the page, as on the home page */
.logos-section .brands-inline{background:none;border:0;box-shadow:none}
/* the founder's words, centred like the home page quote */
.pquote-c{margin:0 auto;max-width:44ch;text-align:center}
.pquote-c blockquote{border:0;padding:0}
.pquote-c blockquote p{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.3}
.pquote-c figcaption{padding:0}
.pquote-c{max-width:880px}
main>section.film-section:has(+section){padding-bottom:40px}
/* ---- 3 Oct 26: more room, Australia in dots, rotating quotes, Pulse as a way in, bigger logos ---- */
/* more empty space around every section, for a calmer, more confident page */
.section{padding:140px 0}
.head{margin-bottom:68px}
@media (max-width:1000px){.section{padding:96px 0}}
@media (max-width:640px){.section{padding:80px 0}.head{margin-bottom:48px}}
/* the live band: figures on the left, Australia on the right */
.live-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.live-split .live-grid.figs{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-split .figs .fig:nth-child(odd){padding-left:0;border-left:0}
.live-split .figs .fig:nth-child(n+3){border-top:1px solid var(--line);margin-top:36px}
.live-split .figs .live-num{font-size:clamp(2.2rem,3.4vw,3.4rem)}
.au-map{position:relative;margin:0}
.au-map::before{content:'';position:absolute;inset:-12% -8%;z-index:-1;background:radial-gradient(50% 50% at 70% 62%,rgba(0,115,207,.18),transparent 70%);pointer-events:none}
.au-map canvas{display:block;width:100%}
.au-map figcaption{margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--text-3);max-width:46ch}
@media (max-width:1000px){.live-split{grid-template-columns:1fr;gap:48px}.au-map{order:-1;max-width:560px}}
@media (max-width:640px){.live-split .live-grid.figs{grid-template-columns:minmax(0,1fr)}.live-split .figs .fig:nth-child(n+3){margin-top:0}}
/* customer quotes, one at a time */
.qrot{display:grid}
.qr{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .7s,transform .7s,visibility .7s}
.qr.on{opacity:1;visibility:visible;transform:none}
.qr blockquote{max-width:26ch}
.qr .quote-ph{position:static;display:inline-block;margin-left:8px;vertical-align:middle}
.qr-dots{grid-area:2/1;display:flex;justify-content:center;gap:10px;margin-top:40px}
.qr-dots button{width:28px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .3s,width .3s}
.qr-dots button[aria-current]{width:44px;background:var(--grad)}
@media (prefers-reduced-motion:reduce){.qr{transition:none}}
/* who it is for: three ways in, Pulse among them */
.tracks.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.track .pp-badge{align-self:flex-start;margin-bottom:14px}
.track-pulse{border-color:rgba(29,216,211,.35);background:linear-gradient(168deg,rgba(29,216,211,.1),var(--panel) 60%)}
.track-pulse .dash{background:var(--teal)}
@media (max-width:1000px){.tracks.n3{grid-template-columns:1fr}}
/* customer logos: bigger, with more room around them */
.trusted{padding:84px 0 76px}
.trusted .eyebrow.center{margin-bottom:28px}
.trusted .brands-strip__item{height:72px;padding:0 clamp(36px,3.8vw,60px)}
.trusted .brands-strip__item img{zoom:1.4}
@media (max-width:640px){.trusted{padding:56px 0 48px}.trusted .brands-strip__item{height:56px;padding:0 28px}.trusted .brands-strip__item img{zoom:1.15}}

/* ---- behind the buyer's email (AI Buyer Match): the match happening ---- */
.mail-stage{position:relative;isolation:isolate}
.mail-stage>.mailphone{position:relative;z-index:1}
.mail-aura{position:absolute;inset:-6% -30%;z-index:0;pointer-events:none}
.mail-aura::before{content:'';position:absolute;inset:8% 14%;background:radial-gradient(closest-side,rgba(0,115,207,.26),rgba(145,143,249,.1) 55%,transparent);filter:blur(10px)}
.ma-ring{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;border:1.5px solid rgba(85,162,223,.55);box-shadow:0 0 24px rgba(85,162,223,.22),inset 0 0 24px rgba(145,143,249,.14);opacity:0;animation:ppPulse 7.5s cubic-bezier(.2,.6,.3,1) infinite}
.ma-ring:nth-child(2){animation-delay:2.5s}.ma-ring:nth-child(3){animation-delay:5s}
.ma-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ma-lines line{stroke:url(#none);stroke:rgba(85,162,223,.45);stroke-width:.25;stroke-dasharray:1.2 1.6;vector-effect:non-scaling-stroke;stroke-width:1.2;animation:maFlow 3.2s linear infinite}
.ma-lines line:nth-child(even){stroke:rgba(145,143,249,.45);animation-duration:4.1s}
@keyframes maFlow{to{stroke-dashoffset:-28}}
.ma-av{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;border-radius:50%;font-family:var(--display);font-weight:700;font-size:17px;color:#fff;background:var(--grad);box-shadow:0 0 0 3px rgba(255,255,255,.12),0 0 26px rgba(85,162,223,.55);animation:maFloat 6s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
.ma-av:nth-of-type(3n){background:linear-gradient(135deg,#1DD8D3,#0073CF)}
.ma-av:nth-of-type(3n+1){background:linear-gradient(135deg,#918FF9,#E58EE8)}
@keyframes maFloat{50%{transform:translateY(-10px)}}
.ma-chip{position:absolute;right:-2%;top:30%;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:999px;background:rgba(20,24,31,.86);border:1px solid rgba(29,216,211,.45);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 24px rgba(29,216,211,.2);font-size:13px;font-weight:600;color:#fff;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:maChip 7.5s ease-in-out infinite}
.ma-chip b{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#1DD8D3,#0073CF);font-size:12px}
@keyframes maChip{0%,8%{opacity:0;transform:translateY(8px)}16%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
@media (max-width:1000px){.mail-aura{inset:-4% -4%}.ma-av{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:14px}.ma-chip{right:auto;left:50%;top:auto;bottom:-3%;transform:translateX(-50%);animation:none}}
@media (max-width:520px){.ma-av,.ma-lines{display:none}}
@media (prefers-reduced-motion:reduce){.ma-ring,.ma-lines line,.ma-av,.ma-chip{animation:none}.ma-ring{opacity:.18}.ma-chip{opacity:1}}
/* the buyers sit in the space to the left of the phone (the steps are on the far left); the chip rides the phone's edge */
@media (min-width:1001px){.steps-split{gap:150px}.mail-aura{inset:-4% -4% -4% -42%}.ma-chip{right:-1%;top:28%}}
@media (max-width:1000px){.ma-av,.ma-lines,.ma-chip{display:none}}
.ma-chip{z-index:2}
@media (min-width:1001px){.steps-split .steps-tl{max-width:600px}.ma-chip{right:-46px;top:30%}}
/* who it is for: the Free tag sits in the corner so all three titles line up; each card rises a little under the pointer */
.track{position:relative}
.track>.pp-badge{position:absolute;top:26px;right:26px;margin:0}
.track>.pp-badge+h3{padding-right:76px} /* the badge sits in the corner: keep the heading clear of it */
.tracks .track{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.tracks .track:hover{transform:translateY(-6px);border-color:rgba(85,162,223,.45);box-shadow:var(--card),0 24px 50px rgba(0,0,0,.35),0 0 50px -14px rgba(0,115,207,.45)}
.tracks .track-pulse:hover{border-color:rgba(29,216,211,.55);box-shadow:var(--card),0 24px 50px rgba(0,0,0,.35),0 0 50px -14px rgba(29,216,211,.4)}
@media (prefers-reduced-motion:reduce){.tracks .track{transition:none}.tracks .track:hover{transform:none}}
/* the quote bars: big enough to hit with a mouse or a thumb (each is a 56×36 target; the bar itself is drawn inside it) */
.qr-dots{gap:4px;margin-top:32px}
.qr-dots button{position:relative;width:56px;height:36px;background:none;border-radius:var(--r-chip)}
.qr-dots button::before{content:'';position:absolute;left:10px;right:10px;top:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .3s,left .3s,right .3s}
.qr-dots button:hover::before{background:rgba(255,255,255,.45)}
.qr-dots button[aria-current]{width:56px;background:none}
.qr-dots button[aria-current]::before{left:4px;right:4px;background:var(--grad)}
.qr-dots button:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px}

/* the Buyer Match film: feathered all the way to transparent before any edge, so no line of the frame shows on the page */
.loopfilm{-webkit-mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%)}
/* Pulse page cards: they rise into place one after another as they come into view, and lift a little under the pointer */
.pp-fcard,.pp-when-item,.pp-ask>div{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s,opacity .6s}
.reveal:not(.in) .pp-fcard,.reveal:not(.in) .pp-when-item{opacity:0;transform:translateY(26px)}
.reveal.in .pp-fcard:nth-child(2),.reveal.in .pp-when-item:nth-child(2){transition-delay:.08s}.reveal.in .pp-when-item:nth-child(3){transition-delay:.16s}
.reveal.in .pp-when-item:nth-child(4){transition-delay:.12s}.reveal.in .pp-when-item:nth-child(5){transition-delay:.2s}.reveal.in .pp-when-item:nth-child(6){transition-delay:.28s}
.pp-fcard:hover,.pp-when-item:hover,.pp-ask>div:hover{transform:translateY(-6px);transition-delay:0s;box-shadow:var(--card),0 24px 50px rgba(0,0,0,.35),0 0 50px -14px rgba(0,115,207,.45)}
.pp-free:hover,.pp-when-item:hover,.pp-ask-new:hover{border-color:rgba(29,216,211,.55)!important;box-shadow:var(--card),0 24px 50px rgba(0,0,0,.35),0 0 50px -14px rgba(29,216,211,.4)}
.pp-paid:hover{border-color:rgba(85,162,223,.55)}
@media (prefers-reduced-motion:reduce){.pp-fcard,.pp-when-item,.pp-ask>div{transition:none}.reveal:not(.in) .pp-fcard,.reveal:not(.in) .pp-when-item{opacity:1;transform:none}.pp-fcard:hover,.pp-when-item:hover,.pp-ask>div:hover{transform:none}}

/* Pulse, powered by Claire: the eyebrow names where it comes from, a small teal tag says it is free; the first line leads */
.pulse-kick{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:16px}
.pulse-kick .eyebrow{margin:0}
.pulse-kick .pp-badge{padding:4px 10px;font-size:12px;line-height:1.3}
.pulse-copy .pulse-lead{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:#fff}

/* Claire's voice globe (3 Oct 26): where it draws, the orb steps back to an invisible tap target over it */
.has-gl-globe .orb{background:none!important;box-shadow:none!important;overflow:visible}
.has-gl-globe .orb-sheen,.has-gl-globe .orb-ring,.has-gl-globe .orb-ping,.has-gl-globe .orb .wave{display:none}
.has-gl-globe .orb-wrap{width:200px;height:200px}
.voice-panel .orb-wrap:focus-visible{outline:2px solid var(--blue-mid);outline-offset:6px}
/* the voice panel's globe, centred in the stage behind the tap target; larger in the full-screen conversation */
.claire-globe{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);pointer-events:none;display:none}
.has-gl-globe .claire-globe{display:block}
.voice-panel.is-live .claire-globe{width:min(460px,90%);height:auto;aspect-ratio:1}
.has-gl-globe .orb-cta{top:calc(50% + 146px)}
/* the Pulse phone: the voice globe in place of the drawn orb */
.tp-globe{position:absolute;left:50%;top:50%;width:145.5%;height:145.5%;transform:translate(-50%,-50%);pointer-events:none;display:none}
.has-gl-globe .tp-globe{display:block}
.has-gl-globe .tp-ticks,.has-gl-globe .tp-ball{display:none}
/* the "What Claire does" hub: the voice globe in place of the orb (the button stays the tap target), sized so the
   connecting lines just meet its edge */
.hub-globe{position:absolute;left:50%;top:50%;width:132%;height:132%;transform:translate(-50%,-50%);pointer-events:none;display:none}
.has-gl-globe .hub-globe{display:block}
.has-gl-globe .hub-orb{background:none!important;box-shadow:none!important;overflow:visible}
.has-gl-globe .hub-orb .orb-sheen,.has-gl-globe .hub-orb .wave,.has-gl-globe .hub-ring-in,.has-gl-globe .hub-ring-out{display:none}
@media (max-width:900px){.has-gl-globe .hub-ring-in{display:none!important}}
/* room between the globe and the talk buttons; on phones the diagram's globe is larger, since its orb is small there */
@media (min-width:901px){.has-gl-globe .hub-talk{top:612px}}
@media (max-width:900px){.has-gl-globe .hub-globe{width:240%;height:240%}}
@media (min-width:901px){.has-gl-globe .hub-caption{top:692px}}

/* the voice panel (3 Oct 26): Type sits beside the talk button under the globe; the Speak/Type switch at the top shows only while typing (to get
   back to speaking); the globe takes the room the switch used */
.voice-panel[data-mode=speak] .vp-mode{display:none}
.vp-actions{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;margin:2px 0 4px}
.vp-actions .orb-cta{position:static;transform:none;border:0;cursor:pointer;font-family:inherit}
.vp-actions .orb-cta:hover{filter:brightness(.92);transform:translateY(-1px)}
.vp-type{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.vp-type:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.vp-type svg{width:16px;height:16px}
.voice-panel.is-live .vp-actions,.voice-overlay .vp-actions{display:none}
.voice-panel[data-mode=speak] .stage{height:350px;margin-top:-6px}
.has-gl-globe .claire-globe{width:350px;height:350px}
.has-gl-globe .orb-wrap{width:240px;height:240px}
.voice-panel.is-live .claire-globe{width:min(460px,90%);height:auto}
@media (max-width:640px){.voice-panel[data-mode=speak] .stage{height:300px}.has-gl-globe .claire-globe{width:300px;height:300px}.vp-actions .orb-cta,.vp-type{font-size:14px;padding:10px 14px}}

/* the burst layer (4 Oct 26). Full screen, above the page and the talking screen; its background is the talking screen's own,
   fading in as the dots fly (so everything else fades away) and off again once the globe has rebuilt */
.globe-burst{position:fixed;inset:0;z-index:120;pointer-events:none}
.globe-burst::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .9s ease;background:radial-gradient(1200px 700px at 70% 10%,rgba(0,115,207,.22),transparent 70%),linear-gradient(180deg,#111419,#171C25)}
.globe-burst.on::before{opacity:1}
.globe-burst canvas{position:absolute;inset:0;width:100%;height:100%}
.globe-burst.done{opacity:0;transition:opacity .5s ease}
.globe-away .claire-globe,.globe-away .hub-globe{opacity:0}

/* voice mode (4 Oct 26): the globe is 10% bigger where there is room, always sized to the stage it sits in (so its ripples
   can't reach the words under it, however short the window), and sat a little above centre. The small panel's own stage
   height no longer applies once the conversation is full screen. */
.voice-overlay .voice-panel[data-mode] .stage{height:min(58vh,560px)}
.voice-overlay .voice-panel .claire-globe{top:46%;width:min(506px,90%,calc(min(58vh,560px) * 1.08));height:auto;aspect-ratio:1}
.voice-overlay .vp-state{margin-top:22px}
@media (max-width:900px){
  .voice-overlay .voice-panel[data-mode] .stage{height:min(42vh,360px)}
  .voice-overlay .voice-panel .claire-globe{width:min(506px,92%,calc(min(42vh,360px) * 1.08))}
  .voice-overlay .vp-state{margin-top:14px}
}

/* ---- phone audit (4 Oct 26) ----
   Fields are 16px on small screens: an iPhone zooms the whole page in when a smaller field is tapped, and doesn't zoom back.
   Tap targets are brought up to 44px where they fell short — by padding, so nothing looks different. */
@media (max-width:760px){
  .demo-form input,.demo-form select,.demo-form textarea,.chat-form input{font-size:16px}
}
@media (max-width:900px){
  .nav .nav-cta .btn{min-height:44px}
  .nav .brand{padding:8px 0}
  .nav .back{display:inline-flex;align-items:center;min-height:44px}
  .watch{min-height:44px}
  .hub-talk{min-height:44px}
  .voice-overlay .vp-end{min-height:44px}
  .foot-col{gap:0}.foot-col h2{margin-bottom:8px}.foot-col a{padding:8px 0}
  .legal-toc{gap:0}.legal-toc a{padding:7px 0}
  .foot .brand,.foot-brand a[href^="mailto"]{display:inline-block;padding:8px 0}.foot-privacy button{padding:10px 0}
}
.vmodal-x{width:44px;height:44px}
.qr-dots button{height:44px}.qr-dots button::before{top:20px}

/* Property Management page (5 Oct 26): the renter's text conversation, its two hand-over labels, and a Pulse phone beside the steps */
.chatphone .mailphone-screen{background:#fff}
.chatphone .mp-head{padding-bottom:10px}
.ch{display:flex;flex-direction:column;gap:8px;padding:14px 14px 26px;background:#fff}
.ch p{margin:0;max-width:84%;padding:9px 13px;border-radius:18px;font-size:14px;line-height:1.45}
.ch-them{align-self:flex-start;background:#E9EBEF;color:#1F2733;border-bottom-left-radius:6px}
.ch-me{align-self:flex-end;background:#0A64D8;color:#fff;border-bottom-right-radius:6px}
.ch p.ch-day{align-self:center;max-width:none;padding:8px 0 2px;font-size:11.5px;color:#6B7483}
.ch-btn{display:block;margin-top:8px;padding:9px 12px;border-radius:10px;background:#0C1B52;color:#fff;text-align:center;font-size:13.5px;font-weight:600}
.ch-note{padding:12px 14px;border-radius:12px;background:#F4F6FA;border:1px solid #E1E4EA;font-size:13px;line-height:1.5;color:#2A3340}
.ch-note b{display:block;margin-bottom:3px;color:#0C1B52}
.ch p.ch-hand{align-self:flex-start;padding:0 4px 4px;font-size:11.5px;font-weight:600;color:#0A64D8}
.ch p.ch-hand::before{content:"↗ "}
.side-device{display:grid;place-items:center}
.side-device .pp-device.phone{position:relative;z-index:1;width:340px;max-width:86vw}
.side-device .pp-pulse{position:absolute;inset:-6% -18%;z-index:0}
/* seven menu items (Property Management joined, 5 Oct 26): the links tighten step by step as the window narrows, and below
   1235px they fold into the menu button, with "Pulse login" and "Book a demo" still showing beside it (the fold was at 900px,
   where six items already ran under the button). Each step is where the row, measured, stops fitting inside the bar. */
@media (max-width:1430px){.nav .nav-links a{padding:10px 13px}}
@media (max-width:1350px){.nav .nav-links a{padding:10px 10px}.nav .nav-links{font-size:14.5px}}
@media (max-width:1285px){.nav .nav-links a{padding:10px 8px}.nav .nav-links{font-size:14px}}
@media (max-width:1235px){.nav .nav-links{display:none}.nav-menu{display:grid}.nav .nav-in{display:flex}}

/* the blog, long-form articles and the registration form (5 Oct 26) */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post-card{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line);box-shadow:var(--card);transition:transform .25s var(--ease),border-color .25s}
.post-card:hover{transform:translateY(-4px);border-color:rgba(85,162,223,.4)}
.post-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:6px}
.post-meta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-mid)}
.post-card h2,.post-card h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0}
.post-card p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6}
.post-more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--blue-light)}
.post-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 28px}
.post-search input{flex:1 1 260px;max-width:460px;padding:13px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.045);font:inherit;font-size:16px;color:var(--text);outline:none;transition:border-color .2s}
.post-search input::placeholder{color:var(--text-3)}.post-search input:focus{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(85,162,223,.28)}
.post-cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.post-cat{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);color:var(--text-2);font-size:14px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.post-cat:hover{color:var(--text);border-color:rgba(255,255,255,.28)}.post-cat.on{background:rgba(0,115,207,.18);border-color:rgba(85,162,223,.6);color:var(--blue-light)}.post-cat span{color:var(--text-3);font-size:12.5px}
.post-hero .eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.post-clear{color:var(--text-2);font-size:14px;text-decoration:underline;padding:10px 6px}
.post-found{color:var(--text-2);margin:0 0 22px}.post-found a{color:var(--blue-light);text-decoration:underline}
.post-pages{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;color:var(--text-3);font-size:14px}
.about-news-more{margin-top:32px}
.posts-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.posts-3{grid-template-columns:1fr}}
.post-card p{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.post-back{display:inline-block;margin-bottom:22px;font-size:14px;color:var(--text-3)}.post-back:hover{color:#fff}
.post-h1{max-width:22ch;font-size:clamp(2rem,4.4vw,3.4rem)}
.post-cover{display:block;width:100%;max-width:920px;height:auto;margin-top:36px;border-radius:var(--r-card);border:1px solid var(--line)}
.article-section{padding-top:56px;padding-bottom:56px}
.article-doc{font-size:17px}.article-doc ul{padding-left:22px;margin:0 0 16px}.article-doc li{margin:0 0 8px}
.reg-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:start}
.reg-card{padding:26px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line);box-shadow:var(--card)}
.reg-thanks strong{display:block;font-family:var(--display);font-size:20px;margin-bottom:6px}.reg-thanks p{margin:0;color:var(--text-2)}
@media (max-width:900px){.reg-wrap{grid-template-columns:1fr;gap:28px}}
/* Customer reviews (lib/render.js reviewsSection): a strip of cards, switched on in Admin → Settings */
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.rv-grid.rv-few{grid-template-columns:repeat(auto-fit,minmax(280px,440px))}
.rv{margin:0;display:flex;flex-direction:column;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px;box-shadow:var(--card)}
.rv blockquote{margin:0;flex:1;max-width:none;font-family:inherit;font-size:16px;font-weight:400;letter-spacing:0;line-height:1.65} /* the site's blockquote is a display-size pull quote: a review is body text */
.rv blockquote p{margin:0 0 12px;color:var(--text);font-size:16px;line-height:1.65}.rv blockquote p:last-child{margin-bottom:0}
.rv figcaption{display:flex;flex-direction:column;gap:3px;padding-top:18px;border-top:1px solid var(--line)}
.rv-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--text)}
.rv-role{font-size:13.5px;color:var(--text-2)}
.rv-src{font-size:12.5px;color:var(--text-3);margin-top:4px}.rv-src a{color:var(--blue-light);text-decoration:underline;text-underline-offset:3px}.rv-src a:hover{color:var(--text)}
.rv-stars{display:inline-flex;gap:3px;line-height:0}.rv-stars svg{display:block}.rv-stars .on svg{fill:var(--teal)}.rv-stars .off svg{fill:rgba(255,255,255,.16)}
.rv-avg{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--text-2);font-size:15px}.rv-avg b{color:var(--text);font-family:var(--display);font-size:18px;font-weight:600}
.rv-note{margin:0 0 28px;padding:12px 16px;border:1px dashed var(--line-strong);border-radius:var(--r-ctl);color:var(--text-2);font-size:14px}
@media (max-width:1000px){.rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rv-grid,.rv-grid.rv-few{grid-template-columns:1fr}.rv{padding:26px 22px}}
/* The hero without the rotating phones (9 Oct 26). The panel no longer leaves room above
   itself for them, and the copy loses the dark wash that kept it readable over them. */
.hero-visual.no-tour>.voice-panel{margin-top:0}
/* the water, back without the phones: the same ripple simulation under the whole hero (12 Oct 26: it was the lower half),
   drawn on the page's own background (no band, no waterline), ending at the logo strip. The pointer leads it and
   Claire's globe pulses it. The dark wash
   behind the copy stays, so the words stay readable over the waves. */
.hero-rip{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-rip canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
@media (max-width:1000px){.hero-rip{display:none}}
@media (prefers-reduced-motion:reduce){.hero-rip{display:none}}

/* ── The menu's drop-down (13 Oct 26). Sales opens a solid panel under the glass bar, as the brand book has it: the six
   sales pages in the order of the journey, and a card beside them. The panel is centred under the bar, so it sits under
   the links at every width. Under 1236px the links fold into the menu button and Sales opens in place inside that panel. ── */
.nav-contact{padding:10px 14px;border-radius:12px;font-family:var(--body);font-size:15px;font-weight:500;color:rgba(255,255,255,.86);white-space:nowrap;transition:color .08s}
.nav-contact:hover,.nav-contact.is-on{color:#fff}
.nav-contact:focus-visible,.nav-drop a:focus-visible,.np-drop:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px}
.nav .nav-links a.nav-has-drop{display:inline-flex;align-items:center;gap:8px}
.nav-has-drop i{width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s cubic-bezier(.2,.8,.2,1),margin .18s;opacity:.8}
.nav-has-drop[aria-expanded="true"]{color:#fff}
.nav-has-drop[aria-expanded="true"] i{transform:rotate(-135deg);margin-top:3px}
.nav-drop{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:2;display:none;width:min(620px,100%);margin:0 auto;padding:8px;border-radius:var(--r-card);background:#171B22;border:1px solid var(--line-strong);box-shadow:0 22px 60px rgba(0,0,0,.55)}
.nav-drop.has-card{width:min(940px,100%);grid-template-columns:minmax(0,1fr) 300px;gap:8px}
.nav-drop.is-open,.nav-drop:target{display:grid;animation:navPanel .18s cubic-bezier(.2,.8,.2,1)}
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* so the pointer can cross the gap without the panel closing */
.nd-list{min-width:0;padding:6px 0 2px}
.nd-eyebrow{margin:8px 14px 10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-mid)}
.nd-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--nd-rows,3),auto);grid-auto-columns:minmax(0,1fr);gap:2px 6px}
.nd-row{display:flex;align-items:flex-start;gap:14px;min-height:44px;padding:11px 14px;border-radius:var(--r-ctl);color:var(--text-2)}
.nd-row:hover,.nd-row:focus-visible,.nd-row.is-on{background:rgba(255,255,255,.07);color:#fff}
.nd-n{flex:none;width:22px;padding-top:2px;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue-mid);font-variant-numeric:tabular-nums}
.nd-t{display:block;min-width:0}
.nd-t b{display:block;font-family:var(--body);font-size:15px;font-weight:600;line-height:1.35;color:#fff}
.nd-t small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--text-3);text-wrap:pretty}
.nd-row:hover .nd-t small,.nd-row.is-on .nd-t small{color:var(--text-2)}
.nd-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:22px;border-radius:12px;background:linear-gradient(168deg,rgba(0,115,207,.2),var(--raised) 62%);border:1px solid rgba(85,162,223,.5)}
.nd-card.nd-pulse{background:linear-gradient(168deg,rgba(29,216,211,.12),var(--raised) 64%);border-color:rgba(29,216,211,.35);box-shadow:0 0 60px -22px rgba(29,216,211,.45)}   /* Pulse's own card: a teal wash, a teal hairline, a soft glow */
.nd-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:14px}
.nd-card .nd-eyebrow{margin:0}
.nd-pulse .nd-eyebrow{color:var(--teal)}
.nd-card .pp-badge{padding:3px 10px;font-size:12px;line-height:1.4}
.nd-card-t{margin:0;font-family:var(--display);font-size:1.3rem;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:#fff;text-wrap:balance}
.nd-card-t b{display:block;font-weight:700}
.nd-card-b{margin:10px 0 20px;font-size:14px;line-height:1.5;color:var(--text-2)}
.nd-card-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:auto}
/* outlined, not filled: Book a demo stays the only solid button on screen */
.nd-btn{padding:9px 16px;border:1.5px solid var(--blue-mid);background:rgba(0,115,207,.12);color:#fff}
.nd-btn:hover{background:rgba(0,115,207,.28)}
.nd-pulse .nd-btn{border-color:var(--teal);background:rgba(29,216,211,.08)}
.nd-pulse .nd-btn:hover{background:rgba(29,216,211,.2)}
.nd-more{padding-bottom:1px;border-bottom:1px solid var(--line-strong);font-size:14px;font-weight:500;color:var(--text-2)}
.nd-more:hover{color:#fff;border-color:rgba(255,255,255,.4)}
/* inside the menu button's panel: Sales opens in place */
.nav-panel{max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain}
.np-drop{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:14px 16px;border:0;border-radius:var(--r-ctl);background:none;font-family:var(--body);font-size:16px;font-weight:500;color:var(--text-2);text-align:left;cursor:pointer}
.np-drop:hover,.np-drop[aria-expanded="true"],.np-drop.is-on{background:rgba(255,255,255,.07);color:#fff}
.np-drop i{width:8px;height:8px;margin:-4px 4px 0 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s,margin .18s}
.np-drop[aria-expanded="true"] i{transform:rotate(-135deg);margin-top:4px}
.np-sub{display:grid;gap:2px;margin:2px 0 6px 18px;padding-left:10px;border-left:1px solid var(--line-strong)}
.np-sub[hidden]{display:none}
.nav-panel .np-sub a{display:flex;align-items:center;min-height:44px;padding:10px 14px;font-size:15px}
@media (max-width:1235px){.nav-drop,.nav-drop.is-open,.nav-drop:target{display:none}}
@media (max-width:560px){.nav-contact{display:none}}   /* on a phone Contact is in the menu panel… */
@media (min-width:561px){.nav-panel .np-contact{display:none}}   /* …and only there: wider than that it is already in the bar */
@media (prefers-reduced-motion:reduce){.nav-drop.is-open,.nav-drop:target{animation:none}.nav-has-drop i,.np-drop i{transition:none}}
/* Vendor Predictions' revenue churn section: the one figure on the left, what acting on predictions changes on the right */
.churn{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.churn .eyebrow{margin-bottom:18px}
.churn-big{display:flex;align-items:center;gap:22px;margin:28px 0 24px}
.churn-big b{flex:none;font-family:var(--display);font-size:clamp(3.6rem,7vw,5.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#fff 30%,var(--blue-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.churn-big span{max-width:26ch;font-size:16px;line-height:1.5;color:var(--text-2)}
.churn-card h3{margin:0;font-family:var(--display);font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#fff;text-wrap:balance}
.churn-set{margin:28px 0 14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.churn-card .rbars{margin-top:0}
.churn-card .rbar{grid-template-columns:190px minmax(0,1fr) 84px}
.churn-card .rbar b{white-space:nowrap}
.churn-card .rbar:not(.on) .rbar-t i{background:rgba(255,255,255,.3)}
.churn-card .rbar.on .rbar-l{color:#fff}
.churn-note{margin:24px 0 0;font-size:13px;color:var(--text-3)}
@media (max-width:1000px){.churn{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.churn-card .rbar{grid-template-columns:minmax(0,1fr) 84px}.churn-big{gap:16px}.churn-big span{font-size:15px}}
/* About: a quick way down to the news, beside the page's eyebrow. It is there only while a post is published. */
.about-top{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;margin-top:-9px}
.about-top+h1{margin-top:9px}   /* the link makes the row taller than the eyebrow alone: the heading stays where it was */
.about-jump{display:inline-flex;align-items:center;gap:9px;padding:8px 0;font-size:13px;font-weight:500;line-height:1.2;color:var(--text-2);transition:color .08s}
.about-jump::before{content:"";width:1px;height:14px;margin-right:7px;background:var(--line-strong)}
.about-jump i{width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.8}
.about-jump:hover{color:#fff}
.about-jump:focus-visible{outline:2px solid var(--blue-mid);outline-offset:3px;border-radius:4px}
@media (max-width:360px){.about-jump::before{display:none}}   /* on the narrowest phones the link wraps under the eyebrow: no divider at the start of a line */
/* the footer mirrors the menu (13 Oct 26): with four link columns the brand takes its own row sooner, so no column is squeezed */
@media (max-width:1180px){.foot-grid.foot-wide{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px}.foot-wide .foot-brand{grid-column:1/-1}}
@media (max-width:900px){.foot-grid.foot-wide{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:480px){.foot-grid.foot-wide{grid-template-columns:1fr}}
/* Book a demo: a line of context when the visitor came from a product page */
.demo-context{margin-top:26px;padding:4px 0 4px 18px;border-left:2px solid var(--blue-mid)}
.demo-context .eyebrow{margin-bottom:8px}
.demo-context p{margin:0;font-size:16px;line-height:1.6;color:var(--text-2)}
.demo-context+.demo-points{margin-top:32px}