/* Standalone marketing surface: the Ekansh blue/ink token family, flat — solid
   colours, no gradients, no blur. Teal is the brand's second colour and it is
   used for shapes and accents, never for body text on white (the bright end fails
   contrast there; text uses the deep end). Two themes: the light canvas, and a
   night palette that re-maps the same token names. Both are isolated from the
   authenticated application's theme on purpose. */
/* One palette, named twice. --L-* holds the light values and never changes; the
   short names are what every rule uses. Night re-maps the short names, and
   .on-light maps them straight back — so a picture of a screen stays lit while
   the page around it goes dark, without duplicating a single hex. */
:root{
  --L-canvas:#f6f8fa;--L-surface:#fff;--L-surface-2:#fafbfd;--L-line:#e7ebf2;--L-line-2:#dfe6ef;
  --L-ink:#0b1220;--L-ink-2:#46506a;--L-ink-3:#5d6b81;
  --L-primary:#1f6feb;--L-blue-700:#1857c4;--L-blue-50:#eaf2fe;
  --L-teal:#21c2b7;--L-teal-text:#0a7770;--L-teal-50:#e6f7f5;
  --L-green-text:#16634b;--L-green-50:#e9f6ef;
  --L-line-hover:#b9cce9;--L-dot:#c8d3e2;--L-chip-bg:#f0f2f6;--L-chip-fg:#526077;
  --L-tint-a:#f7f5fc;--L-tint-b:#f0f8f5;--L-tint-c:#fdf7f1;--L-cta:#eaf2fe;--L-cta-deco:#dbe8fa;
  /* The four colours the hero rhythm strip paints with, and the crosshair.
     Opaque in both themes: marketing.js owns every alpha, so a token can never
     be read back as a colour the canvas cannot draw. */
  --L-trace-ecg:#1f6feb;--L-trace-rule:#1f6feb;--L-trace-head:#0f9e94;--L-trace-text:#4b5a72;
  --canvas:var(--L-canvas);--surface:var(--L-surface);--surface-2:var(--L-surface-2);--line:var(--L-line);--line-2:var(--L-line-2);
  --ink:var(--L-ink);--ink-2:var(--L-ink-2);--ink-3:var(--L-ink-3);
  --primary:var(--L-primary);--blue-700:var(--L-blue-700);--blue-50:var(--L-blue-50);
  --teal:var(--L-teal);--teal-text:var(--L-teal-text);--teal-50:var(--L-teal-50);
  --green-text:var(--L-green-text);--green-50:var(--L-green-50);
  --line-hover:var(--L-line-hover);--dot:var(--L-dot);--chip-bg:var(--L-chip-bg);--chip-fg:var(--L-chip-fg);
  --tint-a:var(--L-tint-a);--tint-b:var(--L-tint-b);--tint-c:var(--L-tint-c);--cta:var(--L-cta);--cta-deco:var(--L-cta-deco);
  --trace-ecg:var(--L-trace-ecg);--trace-rule:var(--L-trace-rule);--trace-head:var(--L-trace-head);--trace-text:var(--L-trace-text);
  --ink-night:#0a1018;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1240px;
  --radius:16px;--radius-sm:11px;--radius-xs:8px;
  --shadow-sm:0 2px 10px rgb(15 23 42 / 5%);
  --shadow-pop:0 30px 80px rgb(38 62 109 / 16%);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--surface);font-synthesis:none;color-scheme:light
}

/* ── Night shift ───────────────────────────────────────────────────────────
   The same page after lights-out: only the chrome flips. Contrast is the rule —
   body text on --surface clears 7:1, the accent colours step up a tone because
   the light-theme teal and blue both fail on a dark ground. */
html[data-theme="night"]{
  --canvas:#0d141d;--surface:#131c27;--surface-2:#18222e;--line:#243040;--line-2:#2f3e51;
  --ink:#eaf0f7;--ink-2:#a9b7c8;--ink-3:#8b9cae;
  --primary:#4d8bf4;--blue-700:#93b9f7;--blue-50:#16273e;
  --teal-text:#4fdcd0;--teal-50:#0f2f2e;
  --green-text:#63d3a4;--green-50:#10291f;
  --line-hover:#3d5878;--dot:#3b4b60;--chip-bg:#1e2937;--chip-fg:#a9b7c8;
  --tint-a:#1a1b2b;--tint-b:#0f2320;--tint-c:#241a12;--cta:#101f33;--cta-deco:#1b2f4a;
  --trace-ecg:#93b9f7;--trace-rule:#93b9f7;--trace-head:#3ed8cb;--trace-text:#a9b7c8;
  color-scheme:dark
}
.on-light{
  --canvas:var(--L-canvas);--surface:var(--L-surface);--surface-2:var(--L-surface-2);--line:var(--L-line);--line-2:var(--L-line-2);
  --ink:var(--L-ink);--ink-2:var(--L-ink-2);--ink-3:var(--L-ink-3);
  --primary:var(--L-primary);--blue-700:var(--L-blue-700);--blue-50:var(--L-blue-50);
  --teal:var(--L-teal);--teal-text:var(--L-teal-text);--teal-50:var(--L-teal-50);
  --green-text:var(--L-green-text);--green-50:var(--L-green-50);
  --line-hover:var(--L-line-hover);--dot:var(--L-dot);--chip-bg:var(--L-chip-bg);--chip-fg:var(--L-chip-fg);
  --tint-a:var(--L-tint-a);--tint-b:var(--L-tint-b);--tint-c:var(--L-tint-c);--cta:var(--L-cta);--cta-deco:var(--L-cta-deco);
  /* color, not just the tokens: a picture is a subtree, and an element that inherits
     its text colour would otherwise take the night ink onto its white card. */
  color:var(--ink);
  color-scheme:light
}
html[data-theme="night"] ::selection{background:#1f4d55;color:#eaf0f7}
*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth;scroll-padding-top:104px}
a{color:inherit;text-decoration:none}button,summary{font:inherit;line-height:round(1.65em,1px)}img{max-width:100%;display:block}
p,h1,h2,h3,figure{margin:0}p{color:var(--ink-2);line-height:1.75;line-height:round(1.75em,1px)}
/* The page has no `normal` line-height anywhere. A unitless multiplier is the thing that puts
   half a pixel into a box: 1.65 × 13px is 21.45, and a row that height makes every row under it
   land between device pixels, which is what reads as fuzz rather than as design. round() asks
   the browser for the same leading, snapped — and an older browser keeps the multiplier it
   understands, because the declaration is simply dropped. */
*{line-height:round(1.65em,1px)}
a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid var(--primary);outline-offset:5px;border-radius:4px}
[hidden]{display:none!important}::selection{background:#c9f0ea}
.wrap{width:min(1240px,calc(100% - 80px));margin-inline:auto}
.section{padding-block:104px}
.skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--surface);padding:14px;border:2px solid var(--primary)}
.skip:focus{top:12px}

/* ── Nav ────────────────────────────────────────────────────────────────── */
/* The header is not a bar. Over the hero it carries no surface and no rule, so the page
   opens on the brand instead of on chrome — but it is sticky, so it must earn a ground the
   moment real content travels under it. html.js owns the transparent half: a page with no
   script keeps the solid header it was painted with, because nothing will ever add the
   scrolled state. A solid ground, not a frosted one: this page has no blur anywhere. */
.nav{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
html.js .nav{background:transparent;border-bottom-color:transparent;transition:background .25s,border-color .25s}
html.js .nav.is-stuck{background:var(--surface);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;gap:32px;min-height:88px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:29px;font-weight:800;letter-spacing:-1.5px}
/* A logotype carries no body leading. The global snapped 1.65 gave the wordmark a 48px box for
   29px of type, so the small caps — which share its baseline — sat 12px above the box's bottom
   edge, and the lockup's height came from empty leading rather than from the 38px mark beside
   it. 1.2 leaves just enough room for the ascender. */
.brand>span{line-height:1.2;line-height:round(1.2em,1px);white-space:nowrap}
.brand img{border-radius:var(--radius-sm)}
.brand-word{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.18em;line-height:1;text-transform:uppercase;color:var(--blue-700)}
.desktop-nav{display:flex;gap:27px;margin:auto;font-size:13px;font-weight:500;color:var(--ink-2)}
/* The header is 88px tall and the links sat in a 16px box in the middle of it. Padding in the
   link, not a taller line: the hit area becomes the row the eye already reads, and the header
   does not grow by a pixel. */
.desktop-nav a{padding-block:14px;line-height:18px;white-space:nowrap}
.desktop-nav a:hover,.login:hover,.footer a:hover{color:var(--primary)}
/* The two header calls to action are one decision — in, or talk to us — so they sit close
   enough to read as a pair. The wide gap made the plain text link look like a leftover. */
.nav-actions{display:flex;gap:10px;align-items:center}
/* Header calls to action are compact: 40px, not the 48px hero buttons, so the pair reads as
   navigation rather than as a second hero. Log in is quiet (text + hairline), Book a demo is the
   one filled button on the bar. */
.nav-actions .login,.nav-actions .btn-primary{min-height:40px;padding:9px 16px;font-size:13px;line-height:20px;border-radius:10px}
.nav-actions .login{background:transparent;border-color:var(--line-2);color:var(--ink)}
.nav-actions .btn-primary{box-shadow:none}
.nav-actions .btn-primary:hover,.nav-actions .login:hover{transform:none}
.btn-primary,.btn-soft,.btn-light{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:48px;border:1px solid transparent;border-radius:var(--radius-sm);padding:13px 21px;font-size:14px;line-height:20px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 3px 0 rgb(15 23 42 / 8%)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px)}
.btn-soft{background:var(--surface);border:1px solid var(--line-2)}
.btn-soft:hover{background:var(--blue-50);transform:translateY(-2px)}
/* Log in is the same object as Book a demo at the same size, and differs only by having no
   fill. A bare text link next to a 48px button reads as an afterthought, and it is the one
   thing on this page a returning hospital actually came for. */
.login{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:13px 18px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font-size:14px;line-height:20px;font-weight:700;color:var(--ink-2);transition:transform .2s,border-color .2s,background .2s}
.login span{font-size:16px}
.login:hover{border-color:var(--line-hover);background:var(--blue-50);transform:translateY(-2px)}
/* The 3px hard shadow is what makes the button a physical object; seating it on press is
   the other half of that, and it costs nothing in either theme. */
.btn-primary:active,.btn-soft:active,.login:active{transform:translateY(1px)}
.btn-primary:active{box-shadow:0 1px 0 rgb(15 23 42 / 8%)}
.btn-soft:active,.login:active{background:var(--blue-50)}
/* Sits on the always-dark ABDM band, so it keeps its own palette in both themes. */
.btn-light{background:#fff;color:#0b1220}
.btn-light:hover{background:var(--blue-50);transform:translateY(-2px)}
.btn-light:active{transform:translateY(1px)}
/* A pill sized by its words is 96.91px wide, and its border lands between two device pixels.
   `max-content` is the width it already had; round() asks for that same width snapped UP, so the
   added fraction is always slack on the trailing edge and no glyph is ever clipped. calc-size()
   is the only place an intrinsic size can be rounded, and a browser without it keeps the line
   above — a pill that is half a pixel short of the grid is the older, still-correct picture.
   The menu label belongs here for a second reason: between 520 and 850 the header's right-hand
   cluster is pushed against the page edge by an auto margin, so it is measured from the right —
   and "Menu ☰" is 52.19px wide, which drags the Log in and Book-a-demo borders 0.81px off the
   grid with it. Snapping the label puts the whole cluster back on whole pixels. */
.btn-primary,.btn-soft,.btn-light,.login,.pill,.store-chip,.footer-follow a,.mobile-nav summary{width:max-content;width:calc-size(max-content,round(up,size,1px))}
/* Night lifts --primary to a tone that reads as a WORD on a dark ground — which is exactly
   why it cannot hold white text as a button ground (3.3:1), and why its hover pair, the
   light-step --blue-700, is worse still. A filled button is an object, not a word, so it
   keeps the light theme's blue: 4.6:1 at rest, 6.6:1 on hover. */
html[data-theme="night"] .btn-primary{background:#1f6feb}
html[data-theme="night"] .btn-primary:hover{background:#1857c4}
/* The arrow rides at 19px. On its own 1.65 line box it would make a button taller than the
   48 it asks for, and a bordered one two pixels taller than a filled one, so it is pinned to
   line-height:1 and every control now shares one border box: 20 + 13 + 13 + 1 + 1 = 48. */
.btn-primary span,.btn-soft span,.btn-light span,.login span{line-height:1}
.btn-primary span,.btn-soft span,.btn-light span{font-size:19px}
.mobile-nav{display:none}
#nav-user-chip{display:flex;align-items:center;gap:8px;font-size:13px}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* --scope-h is the hero's top padding, and the rhythm strip is drawn inside it:
   one value, so the strip can never sit over the headline or under the nav. */
.hero{position:relative;--scope-h:84px;padding-top:var(--scope-h);background:var(--surface)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr 1.12fr;grid-template-columns:round(down,calc((100% - 40px)*.471698),1px) round(down,calc((100% - 40px)*.528302),1px);justify-content:start;align-items:center;gap:40px;padding-bottom:80px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.4px;line-height:18px;color:var(--teal-text);display:flex;align-items:center;gap:9px}
.status-dot{display:inline-block;width:7px;height:7px;background:var(--teal);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgb(33 194 183 / .18)}
.hero h1{font-size:clamp(52px,5.8vw,86px);font-size:round(clamp(52px,5.8vw,86px),1px);line-height:1.04;line-height:round(1.04em,1px);font-weight:800;letter-spacing:-.048em;margin:25px 0 24px}
.hero h1>span{color:var(--primary)}
.hero-lead{font-size:24px;font-weight:600;letter-spacing:-.7px;color:var(--ink);line-height:34px}
.hero-description{font-size:15px;max-width:465px;margin-top:18px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.micro{font-size:11px;line-height:18px;color:var(--ink-3)}
.hero-copy>.micro{margin-top:15px}
.hero-proof{display:flex;flex-wrap:wrap;gap:22px;margin-top:28px;font-size:11px;font-weight:600;line-height:18px;color:var(--ink-2)}
.hero-proof b{color:var(--teal-text);margin-right:4px}

/* The product window: a plain white card with the page's deepest shadow. */
.product-scene{position:relative;min-width:0;padding:25px 0}
.scene-orbit{position:absolute;width:470px;max-width:100%;aspect-ratio:1;top:-28px;left:40px;border-radius:50%;border:1px solid #deebfb;box-shadow:0 0 0 32px rgb(225 236 250 / 25%);pointer-events:none}
.product-window{position:relative;background:#fff;border:1px solid #dfe6ef;border-radius:var(--radius);box-shadow:var(--shadow-pop);overflow:hidden}
.window-bar{height:40px;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 15px;color:var(--ink-3);font-size:11px}
.window-dots{font-size:11px;letter-spacing:3px;color:#b8c5d6}
.example-tag{font-size:11px;letter-spacing:1px;font-weight:600;color:var(--teal-text)}
.product-body{display:flex;min-height:360px}
.preview-side{width:52px;flex-shrink:0;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:17px 8px;gap:16px;color:#677892;font-size:20px}
/* The rail is 40px wide between 851 and 1100, which leaves 24px of content for a 26px square
   icon, and a flex item shrinks by default — so the icon was being squeezed to 0.88 of its own
   aspect. It keeps its width, and caps to the rail instead, so it squares down rather than
   flattening. */
.preview-side img{flex:none;max-width:100%;height:auto;border-radius:6px;margin-bottom:8px}
.preview-side>span{display:grid;place-items:center;width:32px;height:30px}
.preview-side .selected{background:var(--blue-50);border-radius:6px;color:var(--primary)}
.preview-side .side-bottom{margin-top:auto;font-size:11px;background:#eaf2fe;border-radius:50%;width:25px;height:25px}
.preview-main{padding:25px 19px 0;flex:1;min-width:0}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}
.preview-heading .micro{font-size:11px;letter-spacing:.7px}
.preview-heading p{color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.5px;margin-top:5px}
.preview-heading p>span{color:#b57a18;margin-left:4px}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;background:#eaf2fe;color:#2052a1;border-radius:50%;font-size:11px;font-weight:600;font-style:normal;flex-shrink:0}
.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-template-columns:repeat(3,round(down,calc((100% - 16px)/3),1px));justify-content:start;gap:8px;margin:25px 0 21px}
.preview-stats>div{border:1px solid var(--line);border-radius:var(--radius-xs);padding:12px 10px;background:var(--surface-2)}
.preview-stats>div>span{font-size:11px;color:var(--ink-2)}
.preview-stats b{display:block;font-size:28px;font-weight:800;letter-spacing:-1.2px;line-height:34px;margin-block:5px}
.preview-stats b span{font-size:13px;letter-spacing:0;color:var(--ink-3);font-weight:400}
.preview-stats small{font-size:11px;color:var(--ink-3)}
.preview-section-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding-bottom:13px}
.pill{background:#e9f6ef;color:#216246;border-radius:20px;font-size:11px;padding:5px 8px;white-space:nowrap;line-height:13px;font-weight:600}
.pill.blue{background:#edf3fe;color:#2456a9}
.pill.neutral{background:var(--chip-bg);color:var(--chip-fg)}
/* The patient-flow line in the mock: a rail, an arrow head, and one bright mark
   that runs the length of it and is delivered. The rail is a solid stroke and
   the running mark is a dash — the only motion in the picture of a screen, and
   it still says "the patient moves through departments" without a word. */
/* The hero mock's "patient flow" rail: a track that is always there, an arrow that
   says where the record ends up, and — with script — one marker running the length of
   it. Drawn in CSS rather than an SVG so the rail spans the card at every width; a
   fixed viewBox would either letterbox it or stretch the arrowhead. The marker is
   parked transparent, because a reduced-motion visitor should see a rail, not a
   blue pill stranded off its left edge. */
.flow{position:relative;display:block;height:2px;background:var(--line-2);margin-block:2px 15px}
.flow:after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--line-2)}
html.js .flow i{position:absolute;left:0;top:-2.5px;width:18px;height:7px;border-radius:4px;background:var(--primary);opacity:0;animation:travel 4.8s linear infinite}
@keyframes travel{0%{left:-18px;opacity:0}10%,90%{opacity:1}100%{left:calc(100% - 18px);opacity:0}}
.queue-labels,.queue-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;gap:5px}
.queue-labels{font-size:11px;color:var(--ink-3);letter-spacing:.7px;padding:9px 0;border-block:1px solid var(--line)}
.queue-row{font-size:11px;border-bottom:1px solid #eef1f6;padding-block:12px;color:var(--ink-2)}
.queue-row>span:first-child{display:flex;align-items:center;gap:8px}
.queue-row b{font-size:11px;color:var(--ink);font-weight:500}
.queue-row small{display:block;font-size:11px;font-weight:400;color:var(--ink-3);margin-top:4px}
.queue-row .pill{justify-self:start}
.queue-row .avatar{width:25px;height:25px;font-size:11px}
.lavender{background:#f0ebfc;color:#665196}.mint{background:#e3f4ee;color:#216246}.peach{background:#fff0e4;color:#9a5b28}
.preview-bottom{display:flex;align-items:center;justify-content:space-between;padding-block:15px;color:var(--ink-3);font-size:11px}
.preview-bottom .status-dot{width:5px;height:5px;margin-right:5px;box-shadow:none}
.floating-note{position:relative;margin:-2px 30px 0 auto;transform:translateY(-3px);width:max-content;width:calc-size(max-content,round(up,size,1px));max-width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;gap:12px;padding:15px 18px;box-shadow:var(--shadow-pop)}
.note-icon{background:var(--teal-50);color:var(--teal-text);border-radius:50%;display:grid;place-items:center;width:32px;height:32px}
.floating-note b{display:block;font-size:12px;font-weight:600}
.floating-note div>span{font-size:11px;color:var(--ink-3);display:block;margin-top:4px}
.note-route{color:var(--primary);margin-left:20px}
.product-scene figcaption{text-align:center;font-size:11px;color:var(--ink-3);margin-top:15px}
.connected-strip{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:30px;border-top:1px solid var(--line);font-size:16px;font-weight:700;letter-spacing:-.4px;color:var(--ink-2)}
.connected-strip>span{font-size:11px;line-height:18px;letter-spacing:1px;font-weight:700;color:var(--teal-text)}
.connected-strip b{font-weight:700}

/* ── Sections ────────────────────────────────────────────────────────────── */
h2{font-size:clamp(32px,3.5vw,50px);font-size:round(clamp(32px,3.5vw,50px),1px);font-weight:800;line-height:1.14;line-height:round(1.14em,1px);letter-spacing:-.04em}
.muted-heading{color:var(--ink-3)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:40px}
.section-heading .eyebrow,.section-copy>.eyebrow{margin-bottom:16px}
.section-heading>p{font-size:14px;max-width:350px}
/* Three cards across the measure, and the measure is fluid: `1fr` hands each card a third of
   what is left, which is very rarely a whole number, and a card whose left edge sits at
   .33 of a pixel draws its hairline across two. A track can instead be asked for as a
   percentage of the grid's OWN measure and snapped down to a whole pixel — `down` so the
   snapped tracks can never together exceed the measure, which leaves the last pixel of slack
   at the end of the row instead of smeared through it. Container units are the wrong tool
   here: an element's own `grid-template-columns` resolves `cqw` against its ANCESTOR
   container, so a third of the page came out of a third of the row. Each rule keeps the
   `1fr` list first as the fallback for a browser without `round()`. */
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-columns:repeat(3,round(down,calc((100% - 36px)/3),1px));justify-content:start;gap:18px}
.module-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);display:flex;flex-direction:column;align-items:flex-start;transition:border-color .2s}
.module-card:hover{border-color:var(--line-hover)}
.module-wide{grid-column:span 2;display:grid;grid-template-columns:1.1fr 1fr;grid-template-columns:round(down,calc((100% - 26px)*.523809),1px) round(down,calc((100% - 26px)*.476190),1px);justify-content:start;gap:26px;align-items:center;background:var(--blue-50)}
.module-icon{display:grid;place-items:center;width:42px;height:42px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:22px;color:var(--blue-700);margin-bottom:25px}
.module-card .eyebrow{font-size:11px;letter-spacing:1px;margin-bottom:12px}
.module-card h3{font-size:26px;line-height:32px;letter-spacing:-.9px;font-weight:700;margin-bottom:15px}
.module-card p:not(.eyebrow){font-size:13px;margin-bottom:22px;max-width:350px}
.text-link{font-size:12px;font-weight:700;color:var(--blue-700);display:inline-flex;align-items:center;gap:18px;line-height:20px;min-height:44px}
.text-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--teal)}
.text-link span{font-size:20px;line-height:1}
.module-card>.text-link{margin-top:auto}
/* The one card that is not a promise yet: it says so, and it holds its queue board. */
.module-broad{grid-column:span 2;display:grid;grid-template-columns:1.1fr 1fr;grid-template-columns:round(down,calc((100% - 34px)*.523809),1px) round(down,calc((100% - 34px)*.476190),1px);justify-content:start;gap:34px;align-items:center}
.module-broad .module-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.module-broad p:not(.eyebrow){max-width:460px}
.module-broad .card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:25px}
.module-broad .card-top .module-icon{margin-bottom:0}
.module-broad .card-top .pill{flex-shrink:0}
.soon-queue{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.soon-queue li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 16px;font-size:12px;font-weight:600;color:var(--ink-2)}
.soon-queue li>b{width:7px;height:7px;border-radius:50%;background:var(--dot);flex-shrink:0}
.soon-queue li>span{margin-left:auto;font-size:11px;letter-spacing:.7px;font-weight:700;color:var(--ink-3)}
.tint-lavender{background:var(--tint-a)}.tint-mint{background:var(--tint-b)}.tint-peach{background:var(--tint-c)}
.bed-preview{padding:18px 14px;background:white;border:1px solid #dde6f0;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transform:rotate(-2.5deg)}
.bed-preview>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.bed-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-columns:repeat(3,round(down,calc((100% - 14px)/3),1px));justify-content:start;gap:7px;margin-top:20px}
.bed-grid span{background:#eaf2fe;border:1px solid #d4e2f6;border-radius:7px;font-size:11px;line-height:21px;text-align:center;padding:13px 2px;color:#2c5c98}
.bed-grid span:nth-child(3n+2){background:#edf7f0;color:#216246;border-color:#d7ebdf}
.bed-preview>p{font-size:11px!important;margin:16px 0 0!important;text-align:center}

/* A sign letter has to survive the scale-down, and the frame is now half as wide in
   units (1000) but only half as wide on the page: 13 user units in a ~611px column is
   the same ~7.9 rendered pixels the old 9.5 in 1500 units came to across the full
   width. Read the plate widths against this size before changing either. */

/* The two lit things on a monitor, in both scenes: a waveform that runs and an
   LED that blinks. The waveform is a STROKE, and had to be said so out loud — the
   path carries fill="none" as an attribute, but a CSS fill beats an attribute, so
   painting it teal turned the heartbeat into a solid blob and left the marching
   dashes animating a stroke that was switched off. */

/* Staff blink and breathe. A stationary figure with marching legs is the one artifact flat
   illustration always shows, so the legs of everyone behind a desk simply hold. */

/* Every walking figure also drops and rises by the shortfall of its own stride, so a foot that
   reaches the floor at full split is ON the floor and not six units above its shadow. */

/* The far arm swings against the near leg; the doctor turns to face the way he walks. */

@keyframes rounds{0%,12.5%,100% { transform:translateX(60px) }15.625%,96.875% { transform:translateX(120px) }18.75%,93.75% { transform:translateX(180px) }21.875%,90.625% { transform:translateX(240px) }25%,87.5% { transform:translateX(300px) }28.125%,40.625%,84.375% { transform:translateX(360px) }43.75%,81.25% { transform:translateX(420px) }46.875%,78.125% { transform:translateX(480px) }50%,75% { transform:translateX(540px) }53.125%,71.875% { transform:translateX(600px) }56.25%,68.75% { transform:translateX(660px) }}

 

.steps-section{background:var(--canvas);border-block:1px solid var(--line)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-columns:repeat(3,round(down,calc((100% - 36px)/3),1px));justify-content:start;gap:18px}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;align-items:flex-start;transition:border-color .2s}
.step:hover{border-color:var(--line-hover)}
/* One hairline through the six numbers, broken only by the number itself: the
   cards are stops on the same route, not six separate features. */
.step:before{content:"";position:absolute;left:24px;right:24px;top:37px;height:1px;background:var(--line)}
.step>.n{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blue-50);color:var(--blue-700);font-family:var(--mono);font-size:12px;line-height:1;font-weight:600}
.step h3{font-size:19px;line-height:25px;letter-spacing:-.6px;font-weight:700;margin:18px 0 6px}
.step p{font-size:13px;color:var(--ink-2);line-height:23px;padding-bottom:14px}
.step .ph{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-family:var(--mono);font-size:11px;line-height:15px;letter-spacing:.03em;color:var(--green-text);background:var(--green-50);border-radius:8px;padding:5px 9px}
.step .ph svg{width:12px;height:12px;flex:none}
.steps-section .text-link{margin-top:34px}
@media(max-width:850px){.step-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,round(down,calc((100% - 18px)/2),1px))}}
@media(max-width:520px){.step-grid{grid-template-columns:1fr}}

/* ── IPD ─────────────────────────────────────────────────────────────────── */
/* An odd gap between two equal columns puts a half pixel into the second column at every
   width, and that half pixel is a soft hairline on everything inside it. 84, not 85. */
.ipd-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:84px}
.ipd-visual{padding:36px;background:#f2f6fb;border:1px solid var(--line);border-radius:var(--radius)}
.visual-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:30px}
.visual-top .eyebrow{font-size:11px;letter-spacing:.7px}
.care-row{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:21px 16px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow-sm)}
.care-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-sm);background:#e9f6ef;color:#216246;font-size:23px;flex-shrink:0}
.care-icon.blue{background:var(--blue-50);color:var(--blue-700)}
.care-icon.peach{background:#fff0e4;color:#9a5b28}
.care-row b{font-size:13px;font-weight:700}
.care-row p{font-size:11px;margin-top:5px}
.flow-line{font-size:22px;color:#8ba6c8;padding:6px 0;text-align:center}
.ipd-visual>.micro{font-size:11px;margin-top:25px;text-align:center}
.section-copy>p:not(.eyebrow){font-size:14px;margin-top:20px}
.check-list{list-style:none;padding:0;margin:24px 0;font-size:13px;color:var(--ink-2);line-height:22px}
.check-list li{position:relative;padding-left:26px;margin-bottom:16px}
.check-list li:before{content:"✓";color:var(--teal-text);font-weight:700;position:absolute;left:0}
.check-list b{color:var(--ink);font-weight:600}

/* ── ABDM band: one dark band, flat ──────────────────────────────────────── */
.abdm-section{position:relative;background:var(--ink-night);color:white;padding:84px 0}
.abdm-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:75px;align-items:center}
.abdm-section .eyebrow{color:#7fd8cf;font-size:11px;margin-bottom:22px}
.abdm-section h2{font-size:40px;letter-spacing:-1.5px}
.abdm-section h2 span{color:#7fd8cf}
.abdm-section p:not(.eyebrow){color:#c6d5e9;font-size:14px;margin-top:20px;max-width:490px}
.abdm-section .btn-light{margin-top:30px}
.abdm-seal{margin-top:34px;max-width:490px;background:#fff;border-radius:var(--radius);padding:20px 22px}
.abdm-seal .seal-row{display:flex;align-items:center;gap:18px}
.abdm-seal .seal-img{width:150px;height:118px;flex:none;border:1px solid #eef0f3;border-radius:10px;object-fit:contain;background:#f4f5f7}
.abdm-seal figcaption{font-size:13px;line-height:21px;color:#0b1220}
.abdm-seal figcaption b{display:block;font-size:14px;line-height:21px;letter-spacing:-.2px;margin-bottom:4px}
.abdm-seal .mark-row{display:flex;align-items:center;gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid #eef0f3}
.abdm-seal .mark-row span{font-size:11px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#5b6b7d}
.abdm-seal .mark-row img{height:38px;width:auto}
.abdm-list>div{display:flex;gap:20px;align-items:center;padding:25px 0;border-bottom:1px solid #22384f}
.abdm-list>div:first-child{border-top:1px solid #22384f}
.abdm-list>div>span{font-size:12px;color:#7fd8cf;font-weight:700}
.abdm-list h3{font-size:16px;font-weight:600;letter-spacing:-.3px}
.abdm-list p{font-size:12px!important;line-height:19px;margin-top:7px!important}
.abdm-list b{margin-left:auto;color:#7fd8cf;font-weight:400}

/* ── Team / FAQ / CTA / footer ───────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px}
.team-grid article{border-top:2px solid var(--primary);padding-top:22px}
.team-grid article>span{font-size:11px;letter-spacing:.9px;color:var(--teal-text);font-weight:700}
.team-grid h3{font-size:18px;font-weight:700;letter-spacing:-.5px;margin:16px 0 12px}
.team-grid p{font-size:13px}
.faq-section{background:var(--canvas);border-block:1px solid var(--line);padding:84px 0}
.faq-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:80px}
.faq-grid .eyebrow{margin-bottom:18px}
.faq-grid>div>p:not(.eyebrow){font-size:13px;margin:23px 0 8px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:22px;font-size:14px;font-weight:600;line-height:22px;padding:22px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";font-size:20px;font-weight:400;color:var(--ink-3);flex-shrink:0;line-height:1}
.faq-list details[open] summary:after{content:"−"}
.faq-list details[open] summary{color:var(--blue-700)}
.faq-list details p{font-size:13px;padding:0 35px 24px 0}
.final-cta{position:relative;overflow:hidden;background:var(--cta);border:1px solid var(--line);border-radius:var(--radius);padding:58px 64px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.final-cta>div{position:relative;z-index:1}
.final-cta .eyebrow{margin-bottom:18px}
.final-cta h2{font-size:52px;letter-spacing:-2.2px}
.final-cta h2 span{color:var(--primary)}
.final-cta p:not(.eyebrow){font-size:14px;margin-top:18px;max-width:390px}
.final-cta .btn-primary{min-width:215px}
/* The phone number under the demo button is a real action on a page most visitors will read
   on a phone, so it gets a target rather than a line of text: 44px of its own, centred. */
.call-link{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:12px;line-height:18px;margin-top:16px;text-align:center;color:var(--ink-2)}
.cta-decoration{position:absolute;right:140px;top:-72px;font-size:380px;line-height:1;transform:rotate(15deg);pointer-events:none;color:var(--cta-deco)}
.footer{border-top:1px solid var(--line);padding-top:55px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.footer-grid h2{font-size:12px;letter-spacing:0;font-weight:700;margin-bottom:20px}
/* A footer link is a tap target even though it is a line of text, so its leading is the
   target: 28px of it, with the gap between lines taken back off the margin so the column
   ends up the same height it was. */
.footer-grid>div>a:not(.brand){display:block;font-size:12px;line-height:28px;color:var(--ink-2);margin-bottom:6px}
.footer-grid p{font-size:12px;line-height:20px;margin-top:17px}
.footer-grid .brand{font-size:26px}
.footer-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:11px;color:var(--ink-3)}
.footer-bottom>div{display:flex;gap:25px}
.footer-bottom a{line-height:28px}
/* Following Ekansh and installing the phone app sit at the foot of the brand column:
   out there is a way to stay in touch, in here it is not a second call to action. Each
   chip is its own link with its own words, so the text is what a screen reader and a
   crawler read and the glyph is only decoration. */
.footer-follow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:20px}
.footer-follow a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--radius-xs);font-size:11px;line-height:16px;font-weight:700;color:var(--ink-2);transition:border-color .2s,color .2s}
.footer-follow a:hover{border-color:var(--line-hover);color:var(--primary)}
.footer-follow svg{width:15px;height:15px;flex:none}
/* The Play chip is the same shape as the four profile chips: one line, one height. A
   two-line badge would stretch every chip in its flex line to match it. Its two words
   are one label, so they sit closer than the icon-to-text gap the profile chips use.
   "Get it on" is 11px like the rest of the chip — a smaller label is a second voice,
   and the floor here is one voice at the size the page already uses. */
.store-chip{gap:6px}
.store-chip small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(min-width:1500px){.hero{--scope-h:98px}.hero-grid{padding-bottom:94px}}
@media(max-width:1000px){.desktop-nav{display:none}.nav-actions{margin-left:auto}.mobile-nav{display:block}.mobile-nav summary{list-style:none;cursor:pointer;font-size:12px;padding:12px 0}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary span{margin-left:6px}.mobile-nav nav{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 24px;box-shadow:var(--shadow-sm)}.mobile-nav nav a{display:block;padding:13px 0;font-size:14px}}
@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.nav-inner{gap:20px}.desktop-nav{gap:17px;font-size:12px}.nav-actions{gap:9px}.nav-actions .login,.nav-actions .btn-primary{font-size:12px;padding-inline:13px}.hero-grid{gap:25px;grid-template-columns:1fr 1.1fr;grid-template-columns:round(down,calc((100% - 25px)*.476190),1px) round(down,calc((100% - 25px)*.523809),1px)}.hero h1{font-size:58px;letter-spacing:-2.8px}.hero-lead{font-size:20px}.hero-description{font-size:14px}.actions{gap:8px}.actions .btn-primary,.actions .btn-soft{font-size:12px;padding-inline:15px;gap:10px}.preview-main{padding:20px 12px 0}.preview-side{width:40px}.preview-heading p{font-size:14px}.preview-stats small{font-size:11px}.scene-orbit{left:0}.module-card{padding:25px}.module-wide{gap:16px}.module-broad{gap:20px}.module-card h3{font-size:23px}.section{padding-block:78px}.ipd-grid{gap:40px}.ipd-visual{padding:25px}.abdm-grid{gap:40px}.faq-grid{gap:40px}.connected-strip{font-size:14px}.section-heading{gap:25px}.section-heading>p{max-width:300px}.team-grid{gap:20px}}
@media(max-width:850px){.nav-inner{min-height:76px}.hero{--scope-h:55px}.hero-grid{grid-template-columns:1fr;gap:45px}.hero-copy{max-width:620px}.hero h1{font-size:66px}.hero-lead br{display:none}.hero-description{font-size:15px;max-width:550px}.product-scene{width:100%;max-width:620px;margin-inline:auto}.preview-main{padding:25px 22px 0}.preview-side{width:52px}.preview-heading p{font-size:18px}.preview-stats small{font-size:11px}.queue-row{font-size:11px}.queue-row b{font-size:12px}.queue-labels{font-size:11px}.preview-stats>div>span{font-size:12px}.product-body{min-height:380px}.scene-orbit{left:10%}.connected-strip{flex-wrap:wrap;justify-content:center;gap:18px 30px;font-size:14px}.connected-strip>span{width:100%;text-align:center}.connected-strip>span br{display:none}.connected-strip>span b{margin-left:5px}.section-heading{display:block}.section-heading>p{max-width:560px;margin-top:20px}.module-grid{grid-template-columns:1fr 1fr;grid-template-columns:repeat(2,round(down,calc((100% - 18px)/2),1px))}.module-wide,.module-broad{grid-column:span 2}.module-broad{grid-template-columns:1fr;gap:24px}.ipd-grid{grid-template-columns:1fr;gap:35px}.ipd-visual{max-width:620px;width:100%}.section-copy{grid-row:1}.abdm-grid{grid-template-columns:1fr;gap:35px}.abdm-section h2{font-size:36px}.abdm-section p:not(.eyebrow){max-width:600px}.team-grid{grid-template-columns:1fr 1fr;gap:36px}.faq-grid{grid-template-columns:1fr;gap:32px}.final-cta{padding:38px;gap:25px}.final-cta h2{font-size:40px}.footer-grid{grid-template-columns:1fr 1fr;gap:36px}.section{padding-block:66px}}
@media(max-width:520px){.wrap{width:calc(100% - 36px)}.nav-inner{gap:13px;min-height:70px}.brand{font-size:24px;gap:7px}.brand img{width:30px;height:30px;border-radius:8px}.nav-actions>.login{display:none}.nav-actions .btn-primary{font-size:11px;padding:10px 12px;min-height:44px;gap:6px}.nav-actions .btn-primary span{font-size:15px}.mobile-nav summary{font-size:0}.mobile-nav summary span{font-size:20px;margin:0}.mobile-nav summary{padding:10px}.mobile-nav nav{padding-inline:18px}.hero{--scope-h:40px}.hero h1{font-size:54px;letter-spacing:-2.6px;margin-top:20px}.hero .eyebrow{font-size:11px;letter-spacing:1.1px}.hero-lead{font-size:19px}.hero-lead br{display:block}.hero-description{font-size:14px}.hero-proof{gap:16px;font-size:11px}.hero-grid{gap:28px;padding-bottom:30px}.actions .btn-primary,.actions .btn-soft{padding:13px 12px;font-size:11px;gap:8px;min-height:46px}.hero-copy>.micro{font-size:11px}.product-scene{padding-top:15px}.scene-orbit{max-width:85%;left:7%;top:0;box-shadow:0 0 0 15px rgb(225 236 250 / 25%)}.preview-side{display:none}.preview-main{padding:20px 12px 0}.window-bar{font-size:11px;padding-inline:10px}.window-dots{font-size:7px;letter-spacing:1px}.example-tag{font-size:11px}.preview-heading p{font-size:15px}.preview-heading .micro{font-size:11px}.preview-stats{gap:6px;margin:18px 0;grid-template-columns:repeat(3,round(down,calc((100% - 12px)/3),1px))}.preview-stats>div{padding:10px 7px}.preview-stats>div>span{font-size:11px}.preview-stats small{font-size:11px}.queue-row{font-size:11px}.queue-row b{font-size:11px}.queue-row>span:first-child{gap:5px}.queue-labels{font-size:11px}.pill{font-size:11px;padding:5px 6px}.floating-note{padding:12px;margin:0 10px 0 auto;gap:10px}.floating-note b{font-size:11px}.floating-note div>span{font-size:11px}.note-route{margin-left:8px}.product-body{min-height:355px}.connected-strip{gap:15px 23px;font-size:12px;padding-block:24px}.section{padding-block:52px}h2{font-size:31px;letter-spacing:-1.3px}.eyebrow{font-size:11px;letter-spacing:1px}.section-heading{margin-bottom:28px}.section-heading>p{font-size:13px}.module-grid{grid-template-columns:1fr;gap:14px}.module-wide{grid-column:auto;grid-template-columns:1fr}.module-broad{grid-column:auto}.module-card{padding:25px}.module-card h3{font-size:26px}.module-icon{margin-bottom:20px}.bed-preview{margin:15px 4px 8px;max-width:300px;width:95%;justify-self:center}.ipd-visual{padding:20px 14px}.care-row{gap:10px;padding:18px 12px}.care-row b{font-size:12px}.care-row p{font-size:11px}.care-icon{width:35px;height:35px}.abdm-section{padding-block:52px}.abdm-section h2{font-size:30px}.abdm-list>div{gap:14px}.abdm-list h3{font-size:15px}.team-grid{gap:25px 20px;margin-top:30px}.team-grid h3{font-size:17px}.team-grid article>span{font-size:11px;letter-spacing:.5px}.team-grid p{font-size:12px}.faq-section{padding-block:52px}.faq-list summary{font-size:13px;gap:16px;padding-block:20px}.final-cta{display:block;padding:30px 25px}.final-cta h2{font-size:40px}.final-cta>div+div{margin-top:28px;width:max-content;max-width:100%}.final-cta .eyebrow{font-size:11px}.final-cta p:not(.eyebrow){font-size:13px}.cta-decoration{font-size:260px;right:-60px;top:-25px}.footer-grid{gap:30px 20px}.footer-grid>div:first-child{grid-column:span 2}.footer-bottom{flex-direction:column;gap:15px}.footer-grid>div>a:not(.brand){font-size:11px}.footer-grid p{font-size:11px}.footer-grid{padding-bottom:30px}.footer{padding-top:35px}#nav-user-chip{display:none}}
/* Under 430px the header cannot hold the wordmark and a filled action. .nav-inner is a nowrap
   flex row, so a wide CTA does not shove the brand aside — it shrinks it, and .brand then keeps
   a 90px box while its ink runs past the right edge and paints over the button: a 17px overlap
   at 320px, 12px at 360px, and 2px even at 390px once a live session swaps in the longer
   "Open dashboard". Nothing is deleted — the logo stays whole and the action moves into the
   menu that already carries the page's links, where the label has the room it needs.
   The empty .nav-actions would still take its gap slot, so the auto margin that pushed the
   right-hand cluster across the header moves onto the menu itself. */
/* Owner, 2026-10-01: a phone must still SEE how to log in. Under 520px the guest bar keeps a
   compact "Log in" and hands "Book a demo" to the menu; a signed-in visitor gets the avatar,
   which is itself the dashboard link, instead of the wide "Open dashboard" button. */
@media(max-width:520px){#nav-cta-guest>.login{display:inline-flex;min-height:40px;padding:8px 12px;font-size:12px}#nav-cta-guest>.login span{display:none}#nav-cta-guest>.btn-primary{display:none}#nav-cta-authed>.btn-primary{display:none}#nav-cta-authed #nav-user-chip{display:flex}#nav-user-label{display:none}}
@media(max-width:430px){.nav-actions{margin-left:auto}#nav-cta-guest>.login{padding:7px 10px}.nav-inner .brand .brand-word{display:none}}
/* Even with the action gone, 320px is 2.5px short: the row holds a 178.5px lockup, a 38px
   "Menu" label and a 44px theme button in 284px, and a nowrap flex row pays for a shortfall by
   shrinking the one item that can shrink — the wordmark — so "PORTAL" drops under "ekansh".
   The header's own gaps are the cheapest thing to give; 3px off each keeps the name on one line
   without moving anything a person aims at. */
@media(max-width:340px){.nav-inner{gap:10px}}
/* ── Progressive enhancement: what the script switches on ──────────────────
   Everything below is gated on html.js, which marketing.js adds only once its
   observers are actually wired. No script, no class, and the page is exactly the
   flat document it was — nothing is left hidden waiting for an engine that never
   arrived. The surface rule still holds: solid colours only, no gradients, no blur.
   The strip's brightening near the cursor is steps of per-stroke alpha in the
   canvas, not a mask. */

/* The rhythm strip under the headline: ECG paper, one lead, and the numbers a
   monitor prints. The canvas covers the whole hero, because the paper is the
   point — it runs on past the strip and dissolves down through the copy. The
   strip itself stays inside the hero's top padding (--scope-h), which the script
   reads back out of this box: one value, so the trace can never climb over the
   headline or hide under the nav. aria-hidden decoration; it never takes a click.
   width:100% is not redundant: a canvas is a replaced element, so left/right
   alone would not stretch it — it would keep its intrinsic 2:1. */
.hero-scope{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Blueprint crosshair: two hairlines tracking the pointer across a section, the
   way a cursor moves over a drawing. */
.xh{position:relative}
.xh-guide{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s ease}
html.js .xh:hover>.xh-guide{opacity:.45}
.xh-guide:before,.xh-guide:after{content:"";position:absolute;background:var(--trace-rule)}
.xh-guide:before{left:0;right:0;top:var(--my,0);height:1px}
.xh-guide:after{top:0;bottom:0;left:var(--mx,0);width:1px}

/* Card tilt and the magnetic button: 3 degrees, 6 pixels. Enough to answer the
   pointer, not enough to make the words swim. Unwired, the custom properties sit
   at 0 and the transform is the lift the page already had. */
html.js .module-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .2s}
html.js .btn-primary{transition:transform .16s ease-out,background .2s,box-shadow .2s}
html.js .btn-primary:hover{transform:translate(var(--dx,0px),calc(var(--dy,0px) - 2px))}

/* Line-mask reveal: the heading rises out of its own clip. clip-path hides
   pixels, never text, so the sentence is in the document either way. */
html.js .reveal{clip-path:inset(0 0 102% 0);transform:translateY(12px);opacity:.001;transition:clip-path .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1),opacity .6s ease}
html.js .reveal.in{clip-path:inset(0 0 -12% 0);transform:none;opacity:1}

/* Night shift control. With no script there is nothing to switch, so it is not
   offered rather than offered dead. */
.theme-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s,transform .2s}
.theme-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.theme-btn .i-sun{display:none}
html[data-theme="night"] .theme-btn .i-sun{display:inline}
html[data-theme="night"] .theme-btn .i-moon{display:none}
html:not(.js) .theme-btn{display:none}
@media(max-width:520px){.theme-btn{width:44px;height:44px;font-size:15px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}
  /* A heading that never animates must still never be hidden. */
  html.js .reveal{clip-path:none;transform:none;opacity:1}
}

/* Product landing pages: the hero carries copy only, so it spans the row. */
.hero-grid.hero-single{grid-template-columns:minmax(0,820px)}
.hero-single .hero-description{max-width:640px}
.page-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}
@media(max-width:520px){.hero-single h1{font-size:40px;line-height:44px;letter-spacing:-1.6px}}

/* Guide pages: one readable column of article text. */
.prose{max-width:760px;font-size:16px;line-height:28px;color:var(--ink-2)}
.prose h2{font-size:30px;line-height:36px;letter-spacing:-.8px;color:var(--ink);margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose b{color:var(--ink)}
.prose .check-list{font-size:15px;line-height:24px}
.related{padding-top:0}
.related-title{font-size:30px;letter-spacing:-.8px;margin-top:10px}
@media(max-width:520px){.prose{font-size:15px;line-height:26px}.prose h2{font-size:24px;line-height:30px;margin-top:36px}}