/* Logika website prototype — built on Logika App Design System 2.0 tokens (Logika V2/Logika App Design System 2.0.html).
   Token values are copied verbatim; the website layer only adds larger type, wider rhythm and page chrome. */
:root{
  --canvas:#f4f6f8; --surface:#ffffff; --hover:#eef2f6; --active:#e4ebf2; --border:#e1e7ee; --border-strong:#c9d3de;
  --primary:#0b1f36; --secondary:#4f5b6b; --tertiary:#66748a;
  --brand:#0b1f36; --accent:#5ebdee; --accent-hover:#7fcbf2; --accent-deep:#1b6fa3; --accent-tint:#e4f3fc;
  --action:#5ebdee; --action-hover:#7fcbf2; --action-pressed:#3fa3d9; --action-fg:#0b1f36;
  --link:#1b6fa3; --link-hover:#155a86; --selected:#1b6fa3; --selected-bg:#e4f3fc; --focus:#1b6fa3;
  --success-bg:#e3f3ea; --success-fg:#1a6e45; --success-dot:#22a35b;
  --info-bg:#e4f3fc; --info-fg:#1b6fa3; --info-dot:#5ebdee;
  --warning-bg:#fbf0dc; --warning-fg:#8a5f0a; --warning-dot:#e0a116;
  --danger-bg:#fbe7e5; --danger-fg:#a5423c; --danger-dot:#c0554e;
  --neutral-bg:#eef2f6; --neutral-fg:#4f5b6b; --neutral-dot:#8c9aad;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-popover:0 12px 32px -12px rgba(11,31,54,.28); --sh-modal:0 24px 64px -24px rgba(11,31,54,.4);
  --glass:blur(18px) saturate(170%);
  --grad-brand:radial-gradient(70% 90% at 88% 100%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%),linear-gradient(135deg,#0b1f36 0%,#143058 42%,#2c5a8a 76%,#6fa7d4 100%);
  --grad-text:linear-gradient(120deg,#0b1f36,#1b6fa3 60%,#2a86bd);
  --grad-text-dark:linear-gradient(120deg,#ffffff,#5ebdee);
  --grad-progress:linear-gradient(90deg,#1b6fa3,#5ebdee);
  --grad-tint:linear-gradient(180deg,#ffffff,#e4f3fc);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px; --gutter:32px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--canvas);color:var(--primary);font-family:var(--sans);font-size:16px;line-height:1.55;letter-spacing:-.006em}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:14px;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
/* on navy and over the hero video the focus ring is the light accent, so it stays visible */
.ax :focus-visible,.nd :focus-visible,.navy :focus-visible,.site-head.is-on-dark :focus-visible{outline-color:var(--accent)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--tertiary)} .fg-2{color:var(--secondary)}
.eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary)}
.t-column{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tertiary)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top);background:rgba(244,246,248,.78);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.is-scrolled{border-bottom-color:var(--border)}
.site-head .wrap{display:flex;align-items:center;gap:32px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.brand__mark{display:block;flex:none;width:32px;height:auto}
.nav{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--secondary)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--primary)}
.nav a[aria-current="page"]{position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:2px;background:var(--selected)}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------- buttons (DS 2.0: one sky action per screen, navy label) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,transform .15s var(--ease),box-shadow .15s}
.btn--primary{background:var(--action);color:var(--action-fg)}
.btn--primary:hover{background:var(--action-hover)} .btn--primary:active{background:var(--action-pressed)}
.btn--secondary{background:var(--surface);color:var(--primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn--secondary:hover{background:var(--hover)}
.btn--ghost{background:none;color:var(--secondary)} .btn--ghost:hover{background:var(--hover);color:var(--primary)}
.btn--sm{height:36px;padding:0 14px;font-size:13px}
.btn--on-navy{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.btn--on-navy:hover{background:rgba(255,255,255,.14)}
.btn .ic{width:16px;height:16px;stroke-width:2.2}
.link{color:var(--link);font-weight:500}
.link:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
.link-arrow{display:inline-flex;align-items:center;gap:6px}
.link-arrow .ic{width:15px;height:15px;transition:transform .2s var(--ease)}
.link-arrow:hover .ic{transform:translateX(3px)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%}
.chip--success{background:var(--success-bg);color:var(--success-fg)} .chip--success i{background:var(--success-dot)}
.chip--info{background:var(--info-bg);color:var(--info-fg)} .chip--info i{background:var(--info-dot)}
.chip--warning{background:var(--warning-bg);color:var(--warning-fg)} .chip--warning i{background:var(--warning-dot)}
.chip--neutral{background:var(--neutral-bg);color:var(--neutral-fg)} .chip--neutral i{background:var(--neutral-dot)}

/* ---------- sections ---------- */
.sec{padding:112px 0}
.sec + .sec{border-top:1px solid var(--border)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(32px,4vw,48px);line-height:1.04;font-weight:700;letter-spacing:-.035em;margin-top:14px}
.sec-head p{font-size:17px;line-height:1.6;color:var(--secondary);max-width:52ch}

/* ---------- shared action row ---------- */
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}


/* ---------- feature grid (flat, hairlines) ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.feature{padding:32px 32px 36px 0;border-bottom:1px solid var(--border)}
.feature:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--border)}
.feature__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);color:var(--primary)}
.feature h3{margin-top:20px;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.feature p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--secondary)}
.feature ul{margin-top:14px;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--secondary)}
.feature li{display:flex;gap:8px} .feature li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--accent-deep)}

/* ---------- five senses (flat rows, hairlines) ---------- */
.senses{border-top:1px solid var(--border)}
.sense{display:grid;grid-template-columns:200px minmax(0,.9fr) minmax(0,1.3fr);gap:32px;align-items:start;padding:36px 0;border-bottom:1px solid var(--border)}
.sense__name{display:flex;align-items:center;gap:14px}
.sense__name h3{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.035em}
.sense__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);flex:none}
.sense__ic .ic{width:22px;height:22px}
.sense__lead{padding-top:6px;font-size:20px;line-height:1.4;font-weight:500;letter-spacing:-.02em;color:var(--primary)}
.sense__list{padding:6px 0 0;list-style:none;display:grid;gap:12px;font-size:16px;line-height:1.6;color:var(--secondary)}
.sense__list b{color:var(--primary);font-weight:600}
.sense--brain .sense__ic{background:var(--brand);color:var(--accent)}

/* ---------- navy brand block ---------- */
.navy{position:relative;border-radius:28px;padding:72px 64px;background:var(--grad-brand);color:#fff;overflow:hidden}
.navy .eyebrow{color:rgba(255,255,255,.7)}
.navy h2{font-size:clamp(32px,4vw,48px);line-height:1.04;font-weight:700;letter-spacing:-.035em;margin-top:14px;max-width:18ch}
.navy__lead{margin-top:18px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);max-width:58ch}
.navy .link{color:var(--accent)} .navy .link:hover{color:var(--accent-hover)}
.navy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:48px}
.mail-type{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.mail-type__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--accent)}
.mail-type__ic .ic{width:17px;height:17px}
.mail-type h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.mail-type p{margin-top:4px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.72)}
.mail-type code{font-family:var(--mono);font-size:12.5px;color:#fff;background:rgba(255,255,255,.1);padding:1px 6px;border-radius:5px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step}
.step{padding:28px 28px 0 0;border-top:2px solid var(--border);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-family:var(--mono);font-size:12px;color:var(--tertiary);margin-bottom:18px}
.step.is-key{border-top-color:var(--accent-deep)}
.step h3{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--secondary)}

/* ---------- email sample ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split h2{font-size:clamp(30px,3.6vw,44px);line-height:1.06;font-weight:700;letter-spacing:-.035em;margin-top:14px}
.split__lead{margin-top:16px;font-size:17px;line-height:1.6;color:var(--secondary);max-width:50ch}
.checks{margin-top:24px;padding:0;list-style:none;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:16px;line-height:1.55;color:var(--secondary)}
.checks li b{color:var(--primary);font-weight:600}
.checks .ic{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);stroke-width:2.4;margin-top:1px}
.email{border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);box-shadow:0 40px 90px -50px rgba(11,31,54,.4);overflow:hidden}
.email__meta{display:grid;gap:6px;padding:18px 22px;border-bottom:1px solid var(--border);font-size:13px}
.email__meta div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px}
.email__meta span{color:var(--tertiary)}
.email__meta code{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.email__body{padding:28px 28px 24px}
.email__logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;letter-spacing:-.02em}
.email__body h3{margin-top:26px;font-size:22px;letter-spacing:-.025em}
.email__body p{margin-top:10px;font-size:15px;color:var(--secondary)}
.email__body .btn{margin-top:22px}
.email__foot{padding:16px 28px 22px;border-top:1px solid var(--border);font-size:12px;line-height:1.6;color:var(--tertiary)}
.email__foot a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.email__note{margin-top:14px;font-size:13px;color:var(--tertiary)}

/* ---------- security ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sec-card{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.sec-card h3{margin-top:16px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.sec-card p{margin-top:6px;font-size:16px;line-height:1.6;color:var(--secondary)}
.sec-card .feature__ic{background:var(--accent-tint);box-shadow:none;color:var(--accent-deep)}

/* ---------- form ---------- */
.form-card{padding:36px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--secondary)}
.field input,.field select,.field textarea{width:100%;height:44px;padding:0 14px;border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);font-size:16px;color:var(--primary);transition:box-shadow .15s}
.field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--tertiary)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--accent-deep),0 0 0 4px var(--accent-tint)}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-md);background:var(--canvas);font-size:13.5px;line-height:1.55;color:var(--secondary)}
.consent input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--border-strong);background:#fff;cursor:pointer;display:grid;place-items:center}
.consent input:checked{background:var(--accent-deep);box-shadow:none}
.consent input:checked::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent b{color:var(--primary);font-weight:600}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.form-foot p{font-size:13px;color:var(--tertiary);max-width:46ch}
.form-ok{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--r-md);background:var(--success-bg);color:var(--success-fg);font-size:16px;font-weight:500}
.form-ok.is-on{display:block}
.form-ok.is-err{background:var(--danger-bg);color:var(--danger-fg)}
.form-ok a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-card{position:relative}


/* ---------- footer: beam wordmark ----------
   After the "Beam Wordmark Footer" reference, in DS 2.0: a midnight-navy closing section crossed by a diagonal shaft
   of light that leans toward the pointer (it does not drift on its own), link columns under accent hairlines, and the
   brand as a giant bottom-cropped wordmark that the light runs through. footer.js fits the word and aligns each
   letter's slice of the beam with the backdrop; without it the footer is static. */
.bwf{--acc:94,189,238;--bg:#050d1a;--b:58%;--px:50%;--py:50%;--g:0;--ang:118deg;position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;margin-top:24px;background:var(--bg);color:#eef1f8}
.bwf-rule{position:absolute;left:0;right:0;top:0;z-index:3;height:1px;background:linear-gradient(90deg,rgba(var(--acc),.15),rgba(var(--acc),.6) var(--b),rgba(var(--acc),.15))}
.bwf-sky,.bwf-sky>div{position:absolute;inset:0;pointer-events:none}
.bwf-sky{z-index:0}
.bwf-wash{background:radial-gradient(120% 90% at 8% 0%,rgba(var(--acc),.18),transparent 55%),radial-gradient(90% 70% at 92% 8%,rgba(var(--acc),.12),transparent 60%)}
.bwf-bands{background:repeating-linear-gradient(90deg,rgba(var(--acc),.05) 0 1.6cqw,transparent 1.6cqw 4.2cqw);-webkit-mask-image:linear-gradient(100deg,#000,transparent 55%);mask-image:linear-gradient(100deg,#000,transparent 55%)}
.bwf-beam{filter:blur(calc(1px + 1.6cqw));background:linear-gradient(var(--ang),transparent calc(var(--b) - 11%),rgba(var(--acc),.1) calc(var(--b) - 5%),rgba(var(--acc),.32) var(--b),rgba(var(--acc),.08) calc(var(--b) + 4%),transparent calc(var(--b) + 9%)),linear-gradient(var(--ang),transparent calc(var(--b) - 34%),rgba(var(--acc),.09) calc(var(--b) - 27%),transparent calc(var(--b) - 20%))}
.bwf-glow{opacity:var(--g);background:radial-gradient(circle 26cqw at var(--px) var(--py),rgba(var(--acc),.16),transparent 70%)}
.bwf-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.9fr));gap:44px clamp(24px,4cqw,48px);max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8cqw,104px) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.bwf-col{min-width:0}
.bwf-label{position:relative;display:block;padding-bottom:13px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--acc))}
.bwf-label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(var(--acc),.55),rgba(var(--acc),.2));transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.7,.1,1) .1s}
.bwf[data-in="false"] .bwf-label::after{transform:scaleX(0)}
.bwf-fade{transition:opacity .9s ease .15s,translate .9s cubic-bezier(.2,.7,.1,1) .15s}
.bwf[data-in="false"] .bwf-fade{opacity:0;translate:0 14px}
.bwf-brand{margin-top:20px;color:#fff}
.bwf-about{margin-top:12px;max-width:40ch;font-size:15px;line-height:1.6;color:rgba(238,241,248,.66)}
.bwf-socials{display:flex;gap:12px;margin:20px 0 0;padding:0;list-style:none}
.bwf-soc{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;color:rgba(238,241,248,.72);background:linear-gradient(180deg,rgba(238,241,248,.09),rgba(238,241,248,.025));box-shadow:inset 0 0 0 1px rgba(238,241,248,.16),inset 0 1px 0 rgba(238,241,248,.14),0 6px 14px -8px rgba(0,0,0,.8);transition:color .25s,box-shadow .35s,translate .35s var(--ease),background .35s}
.bwf-soc .ic{width:18px;height:18px}
.bwf-soc:hover,.bwf-soc:focus-visible{color:#fff;translate:0 -2px;background:linear-gradient(180deg,rgba(var(--acc),.32),rgba(var(--acc),.08));box-shadow:inset 0 0 0 1px rgba(var(--acc),.75),0 10px 26px -8px rgba(var(--acc),.7)}
.bwf-tip{position:absolute;left:50%;top:calc(100% + 9px);z-index:5;padding:6px 8px;border-radius:4px;background:rgb(var(--acc));color:var(--brand);font-size:11px;font-weight:600;line-height:1;white-space:nowrap;opacity:0;translate:-50% -4px;pointer-events:none;transition:opacity .2s,translate .25s}
.bwf-soc:hover .bwf-tip,.bwf-soc:focus-visible .bwf-tip{opacity:1;translate:-50% 0}
.bwf-credit{margin-top:22px;font-size:14px;line-height:1.5;color:rgba(238,241,248,.6)}
.bwf-credit b{font-weight:500;color:#eef1f8}
.bwf-links{display:flex;flex-direction:column;margin:13px 0 0;padding:0;list-style:none}
.bwf-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:15px;color:rgba(238,241,248,.8);overflow-wrap:anywhere;transition:color .25s}
.bwf-link span{transition:translate .35s var(--ease)}
.bwf-link::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:rgb(var(--acc));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.bwf-arrow{flex:none;width:12px;height:12px;fill:none;stroke:rgb(var(--acc));stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;translate:-6px 0;transition:opacity .25s,translate .35s var(--ease)}
.bwf-link:hover,.bwf-link:focus-visible{color:#fff}
.bwf-link:hover::before,.bwf-link:focus-visible::before{transform:scaleX(1)}
.bwf-link:hover span,.bwf-link:focus-visible span{translate:12px 0}
.bwf-link:hover .bwf-arrow,.bwf-link:focus-visible .bwf-arrow{opacity:1;translate:10px 0}
.bwf-word{position:relative;z-index:1;overflow:hidden;height:calc(21cqw * .92);margin-top:clamp(32px,7cqw,96px)}
.bwf-word-box{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.bwf-word-in{display:inline-flex;font-size:21cqw;font-weight:700;line-height:1;letter-spacing:-.045em;white-space:nowrap;user-select:none;-webkit-user-select:none}
.bwf-lw{display:inline-block;transition:translate 1.25s cubic-bezier(.16,.84,.2,1) var(--d,0ms)}
.bwf[data-in="false"] .bwf-lw{translate:0 85%}
.bwf-l{display:inline-block;color:#173a6b;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.9,.25,1.2),filter .4s}
.bwf.is-lit .bwf-l{color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;background-size:var(--rw) var(--rh);background-position:calc(var(--x) * -1) calc(var(--y) * -1);
  background-image:radial-gradient(circle 22cqw at var(--px) var(--py),rgba(var(--acc),calc(var(--g) * .85)),transparent 70%),linear-gradient(var(--ang),transparent calc(var(--b) - 9%),rgba(var(--acc),.55) calc(var(--b) - 1.5%),rgba(var(--acc),.7) var(--b),rgba(var(--acc),.2) calc(var(--b) + 3.5%),transparent calc(var(--b) + 8%)),linear-gradient(180deg,#1b4a86 var(--top),var(--bg) var(--bot))}
.bwf-l:hover{transform:translateY(-.045em);filter:brightness(1.35)}
.bwf-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;height:34%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,13,26,.55) 55%,var(--bg))}
@container (max-width:760px){
  .bwf-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px}
  .bwf-col--brand,.bwf-col:last-child{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .bwf[data-in="false"] .bwf-fade,.bwf[data-in="false"] .bwf-lw{opacity:1;translate:none}
  .bwf[data-in="false"] .bwf-label::after{transform:none}
}

/* ---------- legal / policy pages ---------- */
.doc-hero{padding:72px 0 40px}
.doc-hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.02;font-weight:700;letter-spacing:-.04em;margin-top:14px;max-width:18ch}
.doc-hero p{margin-top:16px;font-size:18px;line-height:1.55;color:var(--secondary);max-width:62ch}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:13px;color:var(--tertiary)}
.doc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;padding-bottom:112px}
.toc{position:sticky;top:96px;align-self:start;display:grid;gap:2px;font-size:13.5px}
.toc p{margin-bottom:8px}
.toc a{padding:6px 10px;border-radius:var(--r-sm);color:var(--secondary);font-weight:500}
.toc a:hover{background:var(--hover);color:var(--primary)}
.prose{max-width:72ch;font-size:16px;line-height:1.7;color:var(--secondary)}
.prose h2{margin:56px 0 14px;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.025em;color:var(--primary)}
.prose h2:first-child{margin-top:0}
.prose > .callout:first-child{margin-top:0}
.prose > .callout:first-child + h2{margin-top:36px}
.prose h3{margin:28px 0 8px;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--primary)}
.prose p + p,.prose p + ul,.prose ul + p,.prose p + ol,.prose ol + p,.prose ul + ul{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose b,.prose strong{color:var(--primary);font-weight:600}
.prose a{color:var(--link);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:var(--mono);font-size:13.5px;color:var(--primary);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);padding:1px 6px;border-radius:5px}
.callout{margin:22px 0;padding:18px 20px;border-radius:var(--r-lg);background:var(--grad-tint);box-shadow:inset 0 0 0 1px var(--border);font-size:16px;line-height:1.65}
.callout b{color:var(--primary)}
.tbl-wrap{margin:18px 0;overflow-x:auto;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.tbl th{padding:12px 16px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tertiary);border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--secondary)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--primary);font-weight:500}

/* ---------- preference center ---------- */
.pref{max-width:640px;margin:0 auto;padding:72px 0 112px}
.pref-card{padding:32px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border)}
.pref-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}
.pref-row:last-of-type{border-bottom:0}
.pref-row b{display:block;font-size:16px;font-weight:600}
.pref-row small{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--secondary)}
.toggle{appearance:none;-webkit-appearance:none;position:relative;width:42px;height:24px;margin:0;border-radius:999px;background:var(--border-strong);cursor:pointer;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,31,54,.25);transition:transform .2s var(--ease)}
.toggle:checked{background:var(--accent-deep)} .toggle:checked::after{transform:translateX(18px)}
.toggle:disabled{opacity:.55;cursor:not-allowed}

/* ---------- responsive: desktop → iPad → phone ---------- */
@media (max-width:1080px){
  .split{grid-template-columns:1fr;gap:48px}
  .mock__float{right:16px}
  .sec-head{grid-template-columns:1fr;gap:16px}
  .features{grid-template-columns:repeat(2,1fr)}
  .feature,.feature:not(:nth-child(3n+1)){padding:28px 28px 32px 0;border-left:0}
  .feature:nth-child(2n){padding-left:28px;border-left:1px solid var(--border)}
  .steps,.sec-grid{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .sense{grid-template-columns:200px minmax(0,1fr);gap:16px 28px}
  .sense__list{grid-column:2}
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc p{grid-column:1/-1}
}
@media (max-width:820px){
  .nav{display:none}
  .head-cta .btn--ghost{display:none}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .sec{padding:72px 0}
  .mock__body{grid-template-columns:1fr;min-height:0}
  .mock__sb{display:none}
  .mock__main{padding:16px}
  .mock__main{padding-bottom:16px}
  .mock__float{position:static;width:auto;margin:12px 0 0}
  .features,.steps,.sec-grid,.navy-grid,.form-grid{grid-template-columns:1fr}
  .sense{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .sense__list{grid-column:auto;padding-top:0}
  .sense__lead{padding-top:0;font-size:18px}
  .sense__name h3{font-size:28px}
  .feature,.feature:nth-child(2n),.feature:not(:nth-child(3n+1)){padding:24px 0 28px;border-left:0}
  .navy{padding:44px 22px;border-radius:22px}
  .form-card,.pref-card{padding:22px}
  .toc{grid-template-columns:1fr}
  .head-cta .btn--primary{height:38px;padding:0 14px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

/* ---------- section 2: patients go next door ----------
   Ported from the gomaximed.com hero (logika-sites, sites/maximed): typed headline, a crowd of "New patient" cursors
   that walk up to "Your practice" and then leave one by one to click the channels of the practice next door,
   whose counter grows while yours stays at 0. Pinned while its track scrolls by, tied to the scroll position. */
@property --nd-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.nd-track{--nd-scroll:140svh}
.nd-track.is-pinned{height:calc(var(--nd-h) + var(--nd-scroll))}
.nd-track.is-pinned .nd{position:sticky;top:min(0px,calc(100svh - var(--nd-h)))}
.nd{position:relative;isolation:isolate;min-height:max(760px,100svh);display:flex;flex-direction:column;padding-top:96px;overflow:hidden;color:#fff;
  background:radial-gradient(55% 65% at 10% 6%,rgba(94,189,238,.26),rgba(94,189,238,0) 60%),radial-gradient(70% 80% at 85% 65%,#17365f 0%,rgba(23,54,95,0) 70%),linear-gradient(180deg,#0d2442 0%,var(--brand) 100%)}
.nd__body{flex:1;display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%;max-width:1440px;margin:0 auto;padding:0 64px 48px}
.nd__left{position:relative;z-index:2;flex:0 1 600px;padding-top:16px}
.nd-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.nd-title{margin-top:16px;font-size:60px;line-height:1.02;font-weight:700;letter-spacing:-.04em}
.nd-type__dark{color:#fff}
.nd-type__light{color:rgba(255,255,255,.66)}
.nd-type .wd{display:inline-block}
.nd-caret{display:inline-block;width:3px;height:.86em;margin-left:3px;vertical-align:-.06em;border-radius:2px;background:var(--accent);animation:nd-caret .9s steps(1) infinite}
@keyframes nd-caret{50%{opacity:0}}
.nd-lead{margin-top:22px;max-width:46ch;font-size:18px;line-height:1.6;color:rgba(255,255,255,.74)}
.nd-actions{margin-top:30px}
.nd-border{position:relative;display:inline-flex;border-radius:var(--r-pill)}
.nd-border::before{content:"";position:absolute;inset:-3px;padding:3px;border-radius:999px;pointer-events:none;
  background:conic-gradient(from var(--nd-angle),rgba(255,255,255,0) 0deg,rgba(255,255,255,.95) 40deg,rgba(255,255,255,0) 95deg,rgba(255,255,255,0) 180deg,rgba(94,189,238,.95) 225deg,rgba(94,189,238,0) 280deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:nd-border 3s linear infinite}
@keyframes nd-border{to{--nd-angle:360deg}}

/* crowd */
.nd-crowd{position:relative}
.nd-cursor{--c:#ffffff;--on-c:var(--primary);display:flex;align-items:flex-start;gap:2px;width:max-content;margin:36px 0 0 290px}
.nd-cursor__arrow{opacity:.85;transform-origin:4px 3px}
.nd-cursor__arrow path{fill:var(--accent)}
.nd-cursor__tag{margin-top:20px;padding:8px 16px;border-radius:20px;background:var(--c);background:color-mix(in srgb,var(--c) 82%,transparent);color:var(--on-c);font-size:15px;font-weight:600;line-height:1.2}
.is-crowd .nd-crowd{--cw:148px;--ch:56px;--you-w:168px;--you-h:0px;position:relative;height:136px;margin-top:28px}
.is-crowd .nd-cursor{position:absolute;left:calc(var(--x) * (100% - var(--cw) - var(--you-w)));top:calc(var(--y) * (100% - var(--ch) - var(--you-h)));margin:0;transform-origin:4px 3px;will-change:transform,opacity}
.is-crowd .nd-cursor:nth-child(1){--x:.00;--y:.10}
.is-crowd .nd-cursor:nth-child(2){--x:.34;--y:.00}
.is-crowd .nd-cursor:nth-child(3){--x:.67;--y:.12}
.is-crowd .nd-cursor:nth-child(4){--x:1;--y:.02}
.is-crowd .nd-cursor:nth-child(5){--x:.16;--y:.55}
.is-crowd .nd-cursor:nth-child(6){--x:.50;--y:.48}
.is-crowd .nd-cursor:nth-child(7){--x:.84;--y:.58}
.is-crowd .nd-cursor:nth-child(8){--x:.03;--y:1}
.is-crowd .nd-cursor:nth-child(9){--x:.37;--y:.96}
.is-crowd .nd-cursor:nth-child(10){--x:.71;--y:1}
.nd-cursor.is-click .nd-cursor__arrow{animation:nd-press .35s ease}
@keyframes nd-press{40%{transform:scale(.72)}}
@keyframes nd-pop{from{opacity:0}}
.nd-you{position:absolute;right:0;top:50%;z-index:1;display:grid;place-content:center;justify-items:center;gap:2px;width:136px;height:136px;translate:0 -50%;border-radius:50%;text-align:center;font-size:18px;line-height:1.05;font-weight:700;letter-spacing:-.02em;color:#fff;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.14),rgba(255,255,255,.03) 60%),rgba(11,31,54,.55);box-shadow:inset 0 0 0 1px rgba(94,189,238,.6),0 0 44px rgba(94,189,238,.16)}
.nd-you__count{margin-top:8px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.nd-you__count b{font-size:14px;font-weight:700;color:#fff}
.nd-crowd:not(.is-crowd .nd-crowd) .nd-you{position:static;translate:none;margin-left:24px}

/* orbits */
.nd__right{flex:none;display:grid;place-items:center}
.nd-orbits{--s:1;position:relative;width:calc(720px * var(--s));height:calc(720px * var(--s))}
.nd-orbits__stage{position:absolute;left:0;top:0;width:720px;height:720px;transform:scale(var(--s));transform-origin:0 0}
.nd-orbit{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;animation:var(--spin) var(--dur) linear infinite}
.nd-orbit::before{content:"";position:absolute;inset:0;padding:1px;border-radius:50%;background:linear-gradient(180deg,rgba(94,189,238,0) 0%,rgba(94,189,238,1) 43%,rgba(94,189,238,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.nd-orbit--1{--d:353px;--dur:30s;--spin:nd-left;--counter:nd-right}
.nd-orbit--2{--d:501px;--dur:40s;--spin:nd-right;--counter:nd-left}
.nd-orbit--3{--d:649px;--dur:50s;--spin:nd-right;--counter:nd-left}
.nd-orbit--4{--d:797px;--dur:60s;--spin:nd-left;--counter:nd-right}
@keyframes nd-right{to{transform:rotate(360deg)}}
@keyframes nd-left{to{transform:rotate(-360deg)}}
.nd-sat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--a)) translate(calc(var(--d) / 2)) rotate(calc(var(--a) * -1))}
.nd-sat__spin{display:block;animation:var(--counter) var(--dur) linear infinite}
.nd-chip{position:relative;display:grid;place-items:center;width:var(--size,58px);height:var(--size,58px);border-radius:50%;color:#fff;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.24),rgba(255,255,255,.05) 58%),#132b4b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 28px var(--glow,rgba(94,189,238,.5));transition:box-shadow .4s ease;
  animation:nd-fly 1.1s cubic-bezier(.22,1,.36,1) var(--delay,.6s) both}
.nd-chip::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 3px var(--rc,#fff);opacity:0;pointer-events:none}
.nd-chip.is-clicked{box-shadow:inset 0 0 0 2px var(--rc,#fff),0 0 44px var(--rc,#fff)}
.nd-chip.is-clicked::after{animation:nd-ring .8s cubic-bezier(.2,.8,.2,1)}
@keyframes nd-ring{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.nd-chip .ic{width:44%;height:44%}
.nd-chip--brand{background:none;box-shadow:none}
.nd-chip--brand.is-clicked{box-shadow:none}
.nd-chip .chc{width:74%;height:74%;filter:drop-shadow(0 0 10px var(--glow,rgba(94,189,238,.5)))}
.nd-chip--brand.is-clicked .chc{filter:drop-shadow(0 0 16px var(--rc,#fff))}
.nd-sat--o1a{--a:270deg;--delay:.6s}
.nd-sat--o2a{--a:60deg;--delay:.8s}
.nd-sat--o2b{--a:180deg;--size:78px;--delay:1s}
.nd-sat--o2c{--a:300deg;--delay:1.2s}
.nd-sat--o3a{--a:130deg;--size:88px;--delay:1.4s}
.nd-sat--o4a{--a:30deg;--delay:1.7s}
.nd-sat--o4b{--a:95deg;--size:88px;--delay:1.9s}
.nd-sat--o4c{--a:220deg;--size:88px;--delay:2.1s}
.nd-sat--o4d{--a:320deg;--delay:2.3s}
@keyframes nd-fly{from{opacity:0;transform:scale(.3) rotate(-180deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.nd-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;animation:var(--counter) var(--dur) linear infinite}
.nd-count{position:absolute;left:50%;top:calc(50% + 46px + 10px / var(--s));display:flex;align-items:baseline;gap:calc(6px / var(--s));padding:calc(5px / var(--s)) calc(14px / var(--s));border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 calc(1px / var(--s)) rgba(255,255,255,.28);
  font-size:calc(var(--count-cap,14px) / var(--s));font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap;translate:-50% 0;transition:opacity .4s ease,scale .4s cubic-bezier(.22,1,.36,1)}
.nd-count b{font-size:calc(var(--count-num,22px) / var(--s));font-weight:700;font-variant-numeric:tabular-nums}
.nd-count.is-empty{opacity:0;scale:.8}
.nd-count.is-bump{animation:nd-bump .45s cubic-bezier(.22,1,.36,1)}
@keyframes nd-bump{40%{scale:1.12}}

/* pause: appears when the keyboard reaches it (Rule 42, WCAG 2.2.2; no visible Pause over moving art, Artem 2026-10-06),
   plus an automatic pause off screen */
.nd-pause{position:absolute;z-index:3;left:64px;bottom:32px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;color:#fff;background:rgba(11,31,54,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer}
.nd-pause:not(:focus-visible){opacity:0;pointer-events:none}
.nd-pause .ic{width:18px;height:18px}
.nd-paused .nd-orbit,.nd-paused .nd-sat__spin,.nd-paused .nd-center,.nd-paused .nd-border::before,
.nd.is-offscreen .nd-orbit,.nd.is-offscreen .nd-sat__spin,.nd.is-offscreen .nd-center{animation-play-state:paused}

@media (prefers-reduced-motion:no-preference){
  .js-typing .nd-type .ch{opacity:0}
  .js-typing .nd-type .ch.on{opacity:1}
  .js-typing .nd-lead,.js-typing .nd-actions,.js-typing .nd-crowd{opacity:0}
  .is-typed .nd-lead,.is-typed .nd-actions{animation:nd-up .8s cubic-bezier(.22,1,.36,1) both}
  .is-typed .nd-crowd{animation:nd-up .8s cubic-bezier(.22,1,.36,1) .4s both}
  .is-crowd.is-typed .nd-cursor{animation:nd-pop .5s cubic-bezier(.22,1,.36,1) calc(.4s + var(--i,0) * 70ms) backwards}
}
@keyframes nd-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .nd-orbit,.nd-sat__spin,.nd-chip,.nd-center,.nd-border::before,.nd-caret{animation:none}
  .nd-pause{display:none}
}
@media (max-width:1280px){.nd-orbits{--s:.85}}
@media (max-width:1024px){
  .nd__body{flex-direction:column;align-items:flex-start;gap:56px;padding-bottom:96px}
  .nd__right{align-self:center}
  .nd-title{font-size:48px}
  .nd-orbits{--s:.7}
  .nd__left{flex:none}
  .is-crowd .nd-crowd{--you-w:0px;--you-h:150px;height:clamp(300px,44svh,400px)}
  .nd-you{right:auto;left:50%;top:auto;bottom:0;translate:-50% 0}
  .is-crowd .nd-cursor:nth-child(1){--x:.02;--y:0}
  .is-crowd .nd-cursor:nth-child(2){--x:.86;--y:.05}
  .is-crowd .nd-cursor:nth-child(3){--x:.42;--y:.19}
  .is-crowd .nd-cursor:nth-child(4){--x:0;--y:.37}
  .is-crowd .nd-cursor:nth-child(5){--x:.96;--y:.4}
  .is-crowd .nd-cursor:nth-child(6){--x:.5;--y:.56}
  .is-crowd .nd-cursor:nth-child(7){--x:.06;--y:.74}
  .is-crowd .nd-cursor:nth-child(8){--x:.84;--y:.78}
  .is-crowd .nd-cursor:nth-child(9){--x:.3;--y:.98}
  .is-crowd .nd-cursor:nth-child(10){--x:1;--y:1}
}
@media (max-width:768px){
  .nd__body{padding-left:20px;padding-right:20px}
  .nd-pause{left:20px}
  .nd-title{font-size:36px;letter-spacing:-.035em}
  .nd-orbits{--s:.5}
  .nd-cursor{margin-left:140px}
}
@media (max-width:480px){
  .nd-title{font-size:30px}
  .nd-lead{font-size:16px}
  .nd-orbits{--s:.42}
  .nd-cursor{margin:28px 0 0 110px}
  .nd-cursor__tag{font-size:14px;padding:6px 12px}
  .is-crowd .nd-crowd{--cw:130px;--ch:50px;--you-h:130px}
  .nd-you{width:116px;height:116px;font-size:16px}
  .nd-count{--count-cap:11px;--count-num:17px}
}

/* ---------- services: bento grid ----------
   Layout after the FUI bento reference (six columns: two wide cards over three), drawn in DS 2.0: navy cards on the
   light page, a product-style illustration in each card and a frosted text panel over its lower edge. The
   illustrations are decorative (aria-hidden); the text panel carries the service. */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento-card{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;color:#fff;
  background:radial-gradient(90% 70% at 50% 0%,rgba(94,189,238,.16),rgba(94,189,238,0) 70%),linear-gradient(180deg,#123156 0%,var(--brand) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -30px 80px -30px rgba(94,189,238,.16),0 30px 60px -36px rgba(11,31,54,.55)}
.bento-card:nth-child(-n+2){grid-column:span 3}
.bento-card:nth-child(n+3){grid-column:span 2}
.bento-card:nth-child(1){border-top-left-radius:28px}
.bento-card:nth-child(2){border-top-right-radius:28px}
.bento-card:nth-child(3){border-bottom-left-radius:28px}
.bento-card:nth-child(5){border-bottom-right-radius:28px}
.bento-card__art{position:relative;height:300px;overflow:hidden}
.bento-card__body{position:relative;z-index:1;flex:1;margin-top:-72px;padding:24px 32px 32px;background:rgba(11,31,54,.5);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.bento-card__eyebrow{color:var(--accent-hover)}
.bento-card h3{margin-top:8px;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.bento-card__body p:last-child{margin-top:8px;max-width:56ch;font-size:16px;line-height:1.6;color:rgba(255,255,255,.74)}
.bento-cta{display:flex;justify-content:center;margin-top:36px}

/* the illustrations: small pieces of product UI, light on navy */
.art-ui{position:absolute;left:50%;top:44px;width:min(440px,calc(100% - 64px));transform:translateX(-50%);transition:transform .6s var(--ease)}
.art-line{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.16)}
.art-line--lg{width:72%;height:12px}
.art-line--md{width:56%}
.art-line--sm{width:36%}
.art-dot{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1)}
.art-toast,.art-chip{position:absolute;right:28px;bottom:96px;z-index:1;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transition:transform .6s var(--ease)}
.art-toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--canvas);color:var(--brand)}
.art-toast__mark{display:block;flex:none;width:26px;height:auto}
.art-toast b,.art-search__item b,.art-ads__call b,.art-gbp__head b{display:block;font-size:13.5px;font-weight:600}
.art-toast small,.art-ads__call small,.art-gbp__head small{display:block;font-size:12px;color:var(--secondary)}
.art-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--canvas);color:var(--brand);font-size:13px;font-weight:600}
.art-chip .ic,.art-gbp__row .ic{width:16px;height:16px;stroke-width:2.4;color:#1f9d63}
.art-site{overflow:hidden;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.art-site__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.art-site__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.art-site__bar span{margin-left:10px;padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.72)}
.art-site__page{display:grid;gap:10px;padding:22px 20px 20px}
.art-site__btn{justify-self:start;margin-top:6px;padding:7px 14px;border-radius:99px;background:var(--action);color:var(--action-fg);font-size:12px;font-weight:600}
.art-site__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.art-site__tiles i{height:44px;border-radius:8px;background:rgba(255,255,255,.07)}
.art-search{display:grid;gap:12px}
.art-search__box{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:var(--canvas);color:var(--brand);font-size:14px;font-weight:500;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.art-search__box .ic{width:16px;height:16px;color:var(--secondary)}
.art-search__list{display:grid;gap:6px;padding:10px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.art-search__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.art-search__item .art-line{flex:none}
.art-search__item.is-you{background:rgba(94,189,238,.16);box-shadow:inset 0 0 0 1px rgba(94,189,238,.45)}
.art-search__item.is-you .ic{width:22px;height:22px;color:var(--accent)}
.art-search__item small{display:block;font-size:12px;color:rgba(255,255,255,.7)}
.art-ads{display:grid;gap:12px;padding:16px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.art-ads__head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,.88)}
.art-ads__head .chc,.art-gbp__head .chc{flex:none;width:22px;height:22px}
.art-ads__head em{margin-left:auto;padding:3px 10px;border-radius:99px;background:rgba(52,199,123,.18);color:#86e3b4;font-size:11px;font-style:normal;font-weight:600}
.art-ads__call{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--canvas);color:var(--brand)}
.art-ads__ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep)}
.art-ads__ic .ic{width:16px;height:16px}
.art-wave{display:flex;align-items:center;gap:3px;height:22px;margin-left:auto}
.art-wave i{width:3px;height:40%;border-radius:2px;background:var(--accent-deep)}
.art-wave i:nth-child(2),.art-wave i:nth-child(6){height:75%}
.art-wave i:nth-child(3),.art-wave i:nth-child(5){height:55%}
.art-wave i:nth-child(4){height:100%}
.art-social{display:flex;align-items:flex-start;justify-content:center;gap:12px}
.art-post{display:grid;gap:8px;width:172px;padding:10px;border-radius:16px;background:var(--canvas);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.art-post__img{height:112px;border-radius:10px;background:radial-gradient(70% 60% at 30% 30%,var(--accent-hover),rgba(127,203,242,0) 70%),linear-gradient(135deg,var(--accent-deep),var(--brand))}
.art-post .art-line{background:var(--border)}
.art-post__nets{display:flex;gap:6px;margin-top:2px}
.art-post__nets .chc{width:18px;height:18px}
.art-cal{display:grid;gap:8px;margin-top:22px}
.art-cal span{padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:12px;font-weight:600;color:rgba(255,255,255,.74)}
.art-cal .is-on{background:var(--accent);box-shadow:none;color:var(--brand)}
.art-gbp{display:grid;gap:10px;padding:16px;border-radius:16px;background:var(--canvas);color:var(--brand);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.art-gbp__head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.art-gbp__row{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--secondary)}
.art-gbp__review{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--accent-tint);font-size:12.5px;font-weight:600}
.art-gbp__review .ic{width:16px;height:16px;color:#e2a11b;fill:#f2b33d}
.art-gbp__review .art-line{flex:1;max-width:84px;background:var(--border-strong)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bento-card:hover .art-ui{transform:translate(-50%,-6px)}
  .bento-card:hover .art-toast,.bento-card:hover .art-chip{transform:translateY(-4px)}
}
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-card:nth-child(n){grid-column:auto;border-radius:12px}
  .bento-card:nth-child(1){grid-column:1 / -1;border-radius:28px 28px 12px 12px}
  .bento-card:nth-child(4){border-bottom-left-radius:28px}
  .bento-card:nth-child(5){border-bottom-right-radius:28px}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);gap:12px}
  .bento-card:nth-child(n){border-radius:12px}
  .bento-card:nth-child(1){border-radius:24px 24px 12px 12px}
  .bento-card:nth-child(5){border-radius:12px 12px 24px 24px}
  .bento-card__art{height:270px}
  .bento-card__body{padding:22px 22px 26px}
  .art-ui{top:30px;width:calc(100% - 44px)}
  .art-toast,.art-chip{right:16px;bottom:90px}
}

/* ---------- quick actions (logika-sites Rule 2) ----------
   Bottom-right on every screen size: Call, Demo (the product's "Book") and Menu. Directions and Chat are left out on
   purpose: Logika has no public office to route to and no Website Chat on this site. Restrained glass; on a deliberate
   downward scroll the labels fold away and the capsule shrinks to icons, on the way back up the labels return. */
.action-bar{position:fixed;z-index:60;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));display:flex;gap:4px;padding:6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(11,31,54,.1),0 14px 34px -14px rgba(11,31,54,.45)}
.action-bar>a,.action-bar>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:48px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--primary);font:600 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:background .15s,padding .24s var(--ease),gap .24s var(--ease)}
.action-bar>a:hover,.action-bar>button:hover,.action-bar>[aria-expanded="true"]{background:var(--active)}
.action-bar .action-bar__primary{background:var(--action);color:var(--action-fg)}
.action-bar .action-bar__primary:hover{background:var(--action-hover)}
.action-bar .action-bar__primary:active{background:var(--action-pressed)}
.action-bar .ic{width:20px;height:20px}
.action-bar span{display:inline-block;max-width:72px;overflow:hidden;transition:max-width .24s var(--ease),opacity .18s ease}
.action-bar.is-compact>a,.action-bar.is-compact>button{gap:0;padding:0 14px}
.action-bar.is-compact span{max-width:0;opacity:0}
/* the menu needs the script; without it the footer carries every link */
html:not(.js) .nav-toggle{display:none}

.site-menu{position:fixed;z-index:65;right:max(20px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 32px));
  max-height:calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 20px;border-radius:var(--r-xl);
  background:var(--surface);box-shadow:0 0 0 1px var(--border),0 28px 64px -24px rgba(11,31,54,.45);transition:opacity .18s ease,transform .18s var(--ease)}
@starting-style{.site-menu{opacity:0;transform:translateY(8px)}}
.site-menu[hidden]{display:none}
.site-menu__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:6px}
.site-menu__head span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tertiary)}
.site-menu__close{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;border-radius:50%;background:none;color:var(--primary);cursor:pointer}
.site-menu__close:hover{background:var(--hover)}
.site-menu__close .ic{width:20px;height:20px}
.site-menu__nav{display:grid}
.site-menu__nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--border);font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--primary)}
.site-menu__nav a .ic{width:16px;height:16px;color:var(--tertiary);transition:transform .2s var(--ease)}
.site-menu__nav a:hover .ic{transform:translateX(3px);color:var(--primary)}
.site-menu__nav a[aria-current="page"]{color:var(--accent-deep)}
.site-menu__more{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px;font-size:14px;font-weight:500;color:var(--secondary)}
.site-menu__more a{display:inline-flex;align-items:center;min-height:32px}
.site-menu__more a:hover{color:var(--primary)}

@media (max-width:640px){
  .action-bar{right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));padding:5px}
  .action-bar>a,.action-bar>button{padding:0 15px}
  .action-bar.is-compact>a,.action-bar.is-compact>button{padding:0 12px}
  .site-menu{right:max(12px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}
}
@media print{.action-bar,.site-menu{display:none !important}}