@font-face { font-family:'Rund Display'; src:url('fonts/RundDisplay-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Rund Text'; src:url('fonts/RundText-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Rund Display Fallback'; src:local('Arial'); size-adjust:92.39%; ascent-override:102.83%; descent-override:27.06%; line-gap-override:0%; }
@font-face { font-family:'Rund Text Fallback'; src:local('Arial'); size-adjust:100.76%; ascent-override:94.29%; descent-override:24.81%; line-gap-override:0%; }

:root {
  --display:'Rund Display','Rund Display Fallback','Helvetica Neue',Arial,sans-serif;
  --text:'Rund Text','Rund Text Fallback','Helvetica Neue',Arial,sans-serif;
  --black:#0a0a0b;
  --muted:#858585;
  --soft:#ababab;
  --accent:#ca6100;
  --hair:rgba(10,10,11,.1);
  --frame:1436px;
  --page-gutter:24px;
  --pad:36px;
  --inset:12px;
  --gap:36px;
  --radius:12px;
  --ease:cubic-bezier(.165,.84,.44,1);
  --shot-shadow:0 22px 38px -16px rgba(12,12,12,.13);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:104px; }
html, body { margin:0; padding:0; }
body { background:#fff; color:var(--black); font:16px/1.5 var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
img { display:block; }
a { color:inherit; }
p, h1, h2, h3 { margin:0; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { color:#fff; background:var(--black); }
.sr-only, .fd-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:70; top:-100px; left:20px; padding:12px 18px; border-radius:999px; background:var(--black); color:#fff; font-size:16px; text-decoration:none; }
.skip-link:focus { top:16px; }
.page { width:calc(100% - var(--page-gutter) * 2); max-width:var(--frame); margin:0 auto; padding-bottom:138px; }
main { display:flex; flex-direction:column; gap:var(--gap); }
.label { font-size:16px; line-height:1.12; text-transform:uppercase; font-weight:400; }
.label::before, .feat-n::before { content:''; display:inline-block; width:7px; height:7px; margin-right:9px; background:var(--accent); vertical-align:2px; }
.h1, .h2, .h3 { font-family:var(--display); font-weight:400; }
.h1 { width:1000px; max-width:100%; font-size:clamp(64px,5.53vw,94px); line-height:.98; letter-spacing:-.035em; }
.h1 .soft { color:#d5d5d5; }
.h3 { font-size:34px; line-height:1.12; letter-spacing:-.015em; }
.soft { color:var(--soft); }
.lead { font-size:18px; line-height:1.55; }
.btns { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.btn-solid, .btn-line { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 24px; border-radius:999px; font-size:15px; text-decoration:none; transition:background .2s,border-color .2s; }
.btn-solid { background:var(--black); color:#fff; }
.btn-solid:hover { background:#303033; }
.btn-line { padding-inline:22px; border:1px solid #e3e3e3; background:#fafafa; }
.btn-line:hover { border-color:#a6a6a6; background:#f2f2f2; }

/* The hero artwork uses the original Figma curves at their intrinsic SVG sizes. */
.hero { --bleed:calc((100vw - min(var(--frame),100vw - var(--page-gutter) * 2)) / 2); position:relative; isolation:isolate; height:980px; display:flex; flex-direction:column; justify-content:center; gap:40px; margin-inline:calc(-1 * var(--bleed)); padding:64px var(--bleed) 0; overflow:clip; }
.hero-main, .hero-foot { position:relative; z-index:1; padding-inline:var(--pad); }
.hero-foot { display:flex; flex-direction:column; align-items:flex-start; gap:32px; width:772px; max-width:100%; }
.hero-foot .lead { width:700px; max-width:100%; font-size:21px; }
.hero-art { position:absolute; z-index:0; top:24px; left:calc(var(--bleed) + 773px); width:800.469px; height:857.786px; overflow:clip; pointer-events:none; }
.hero-curves-static { position:absolute; top:162.012px; left:85.609px; max-width:none; }
.hero-node { position:absolute; width:4.195px; height:4.188px; background:var(--accent); }
.hero-node-muted { background:#bbb; }
.hero-fade { position:absolute; left:36.23px; top:743.87px; width:882.154px; height:329.216px; background:#fff; filter:blur(127.727px); }
.hero-caption { position:absolute; color:#adadad; font:13px/1.55 var(--text); text-transform:uppercase; text-align:center; }
.hero-leader { position:absolute; top:26.42px; left:50%; transform:rotate(90deg); transform-origin:top left; }
.hero-caption.it { left:375.805px; top:142.441px; width:91.426px; }
.hero-caption.agents { left:640.41px; top:294.086px; width:max-content; transform:translateX(-50%); }
.hero-caption.finance { left:211.087px; top:549.234px; width:91.426px; }
.hero-flow-layer { position:absolute; inset:0; pointer-events:none; }
.hero-flow-particle { position:absolute; width:0; height:0; offset-rotate:0deg; offset-anchor:0px 0px; }
.hero-flow-marker { position:absolute; width:0; height:0; transform-origin:0 0; }
.hero-flow-node { left:0; top:0; transform:translate(-50%,-50%); outline:.638635px solid var(--accent); }
.hero-flow-node.hero-node-muted { outline-color:#c2c2c2; }
.hero-flow-caption { left:0; bottom:95px; width:max-content; transform:translateX(-50%); white-space:nowrap; }
.hero-flow-caption::after { content:''; position:absolute; top:calc(100% + var(--leader-gap)); left:50%; width:1px; height:var(--leader-height); background:#adadad; transform:translateX(-50%); }
.hero-art.is-flowing > .hero-node, .hero-art.is-flowing > .hero-caption { visibility:hidden; }
@media (prefers-reduced-motion:reduce) {
  .hero-flow-layer { display:none; }
  .hero-art.is-flowing > .hero-node, .hero-art.is-flowing > .hero-caption { visibility:visible; }
}

/* Original bronze artwork, cropped and layered in the same slots as the design. */
.manifesto, .closing { position:relative; isolation:isolate; overflow:clip; border-radius:var(--radius); margin-inline:var(--inset); background:var(--black); color:#fff; }
.band-art { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.band-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.manifesto-wave { position:absolute; left:-1.1475%; top:-2.919%; width:101.8773%; height:105.5787%; transform:scaleY(-1); isolation:isolate; }
.closing-wave { position:absolute; left:0; top:-3.6755%; width:111.8462%; height:106.6348%; isolation:isolate; }
.manifesto-wave::before, .closing-wave::before { content:''; position:absolute; z-index:1; inset:0; background:rgba(190,152,96,.1); }
.manifesto-wave::after, .closing-wave::after { content:''; position:absolute; z-index:2; inset:0; background:rgba(89,80,67,.11); mix-blend-mode:color; }
[data-wave-video] { opacity:0; }
[data-wave-video].is-playing { opacity:1; }
@media (prefers-reduced-motion:reduce) { [data-wave-video] { display:none; } }
.manifesto { display:grid; grid-template-columns:minmax(0,436fr) minmax(0,816fr); align-items:center; min-height:654px; padding:80px; }
.manifesto .rail { align-self:start; padding-top:72px; }
.manifesto .cell { min-width:0; }
.manifesto-text { font:46px/1.12 var(--display); letter-spacing:-.015em; }
.manifesto-teams { margin-top:40px; font-size:16px; line-height:1.12; text-transform:uppercase; color:rgba(255,255,255,.5); }
.backers { min-height:139.6px; margin:0 var(--inset) 80px; padding:32px 57.6px; display:grid; grid-template-columns:385px minmax(0,1fr); align-items:center; gap:65px; border-radius:var(--radius); background:#f5f5f5; }
.backers p { font-size:15px; line-height:1.5; color:var(--muted); }
.backers .backers-lead { color:var(--black); }
.team-logos { display:flex; align-items:center; justify-content:space-between; gap:28px; list-style:none; padding:0; margin:0; opacity:.35; }
.team-logos img { width:auto; height:18.71px; filter:brightness(0); }
.team-logos li:nth-child(1) img { height:17.717px; }
.team-logos li:nth-child(2) img { height:23.477px; }
.team-logos li:nth-child(4) img { height:16.965px; }
.team-logos li:nth-child(5) img { height:16.97px; }

.platform { display:flex; flex-direction:column; gap:var(--gap); }
.feat { display:grid; grid-template-columns:minmax(0,480fr) minmax(0,932fr); min-height:706px; margin-inline:var(--inset); overflow:clip; border-radius:var(--radius); background:#f8f8f8; }
.feat .rail { min-width:0; padding:60px 36px; }
.feat-copy { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.feat-n { color:#aaa; font-size:18px; line-height:1.4; letter-spacing:-.01em; }
.feat-copy p { color:#4e4e4f; font-size:16px; line-height:1.6; }
.feat-copy .h3 { width:max-content; max-width:calc(100% + 37px); }
.feat-shot { position:relative; isolation:isolate; display:flex; align-items:center; min-width:0; padding-left:50px; }
.feat-light .feat-shot { background:linear-gradient(90deg,#f8f8f8 40%,#d8d8d8 100%); }
.feat-shot .fdemo { flex:none; width:min(100%,926.215px); height:580px; border:1px solid #eee; border-radius:13.385px; box-shadow:var(--shot-shadow); --fd-zoom:1.04; pointer-events:none; user-select:none; }
.feat-shot .fd-thread-close, .feat-shot .fd-open-thread { pointer-events:auto; }
.feat-dark { grid-template-columns:minmax(0,915fr) minmax(0,497fr); background:#f1f1f1; }
.feat-dark .rail { grid-column:2; grid-row:1; }
.feat-dark .feat-copy .h3 { max-width:100%; }
.feat-dark .feat-copy p { max-width:365px; }
.feat-dark .feat-shot { grid-column:1; grid-row:1; justify-content:center; padding:50px clamp(32px,5.1vw,73px); background:#000; overflow:hidden; }
.demo-glass { width:769px; max-width:100%; position:relative; flex:none; padding:20px; border:1px solid #8f8f8f; border-radius:21px; background:rgba(224,224,224,.4); backdrop-filter:blur(10px); }
.demo-glass .fdemo { width:100%; height:auto; aspect-ratio:16/10; border-radius:11.1px; }
/* The original product scenes control their own typography, icons, and animation. */
#feat-cases .fdemo { height:400px; }

.platform-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:80px var(--inset); }
.note { display:flex; flex-direction:column; align-items:flex-start; gap:36px; min-width:0; min-height:455px; padding:40px; border-radius:var(--radius); background:#f5f5f5; }
.note-illustration { position:relative; width:152px; height:170px; flex:none; }
.note-illustration img { position:absolute; left:-4px; top:0; }
.note-copy { display:flex; flex-direction:column; gap:16px; width:100%; }
.note-h { font:400 31.68px/1.12 var(--text); letter-spacing:-.015em; }
.note p { color:#4e4e4f; font-size:16px; line-height:1.6; }
.note-logos { display:flex; flex-wrap:wrap; align-items:center; gap:20px; list-style:none; margin:0; padding:0; opacity:.35; }
.note-logos img { width:30px; height:30px; object-fit:contain; filter:grayscale(1) brightness(0); }
.note-link { font-size:15px; text-underline-offset:3px; }
.note-link span { display:inline-block; transition:transform .3s var(--ease); }
.note-link:hover span { transform:translateX(3px); }

.closing { min-height:606px; padding:40px; }
.closing-row { min-height:526px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }
.closing .label { margin:10px 0 24px; }
.closing .h2 { font:400 51.84px/1.06 var(--text); letter-spacing:-.02em; }
.closing-side { display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-top:44px; max-width:100%; }
.closing-side .lead { width:406.375px; max-width:100%; color:rgba(255,255,255,.75); }
.closing .btn-solid { color:var(--black); background:#fafafa; }
.closing .btn-solid:hover { background:#e6e6e6; }
.closing .btn-line { color:#fff; background:var(--black); border-color:rgba(255,255,255,.3); }
.closing .btn-line:hover { border-color:#fff; }
.footer { position:relative; height:415px; margin-top:36px; padding:100px 36px 36px; border-top:.5px solid rgba(0,0,0,.25); }
.footer-top { display:grid; grid-template-columns:442.56px minmax(0,1fr); gap:37.44px; }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.footer-brand img { width:124px; height:auto; filter:brightness(0); }
.footer-brand .label, .footer-h { color:var(--muted); font-size:13px; line-height:1.4; letter-spacing:.06em; text-transform:none; }
.footer .label::before { display:none; }
.footer-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:37.44px; }
.footer-h { margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; }
.footer-col a { display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:1.4; color:var(--black); text-decoration:none; transition:color .2s ease; }
.footer-col a::after { content:'→'; opacity:0; transform:translateX(-4px); transition:opacity .2s ease,transform .3s var(--ease); }
.footer-col a:hover::after, .footer-col a:focus-visible::after { opacity:1; transform:none; }
.footer-cols:has(a:hover) a:not(:hover) { color:rgba(10,10,11,.35); }
.footer-bottom { position:absolute; bottom:36px; left:37.44px; right:37.44px; display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:13px; color:var(--muted); }
.footer-bottom a { text-decoration:none; }
.footer-bottom a:hover { color:var(--black); }

  .reveal [data-reveal-01], .reveal [data-reveal-02] { visibility:hidden; }
  [data-reveal-01] > * { margin-bottom:-0.18em; }
  [data-reveal-01] .word-mask, [data-reveal-01] .char-mask { vertical-align:top; }
  [data-reveal-01] .line-mask, [data-reveal-01] .word-mask, [data-reveal-01] .char-mask { overflow:clip; overflow-clip-margin:0.06em; }
  [data-reveal-01] .line-mask > *, [data-reveal-01] .word-mask > *, [data-reveal-01] .char-mask > * { padding-bottom:0.18em; will-change:transform; }


@media (max-width:1400px) and (min-width:1101px) {
  .manifesto .desktop-break { display:none; }
  .manifesto { padding:64px; grid-template-columns:1fr 2fr; }
  .manifesto-text { font-size:clamp(35px,3vw,46px); }
  .backers { grid-template-columns:300px minmax(0,1fr); gap:36px; padding-inline:40px; }
  .team-logos { gap:24px; }
  .team-logos img { max-width:105px; object-fit:contain; }
  .feat .rail { padding-inline:28px; }
  .h3 { font-size:30px; }
  .feat-copy .h3 { max-width:100%; width:auto; }
  .hero-art { left:auto; right:calc(var(--bleed) - 150px); }
  .footer-top { grid-template-columns:1fr 2fr; }
}
@media (max-width:1100px) {
  .desktop-break { display:none; }
  :root { --page-gutter:16px; }
  .page { width:calc(100% - 32px); padding-bottom:64px; }
  .hero { height:900px; }
  .h1 { font-size:clamp(58px,7.4vw,80px); width:850px; }
  .hero-foot { width:650px; }
  .hero-foot .lead { font-size:19px; }
  .hero-art { left:auto; right:calc(var(--bleed) - 265px); top:80px; opacity:.75; }
  .manifesto { grid-template-columns:1fr; gap:40px; padding:64px 48px; }
  .manifesto .rail { padding:0; }
  .manifesto-text { font-size:40px; }
  .backers { grid-template-columns:1fr; gap:32px; padding:36px; margin-bottom:40px; }
  .team-logos { justify-content:space-between; gap:24px; }
  .feat, .feat-dark { grid-template-columns:minmax(0,1fr); min-height:0; }
  .feat .rail, .feat-dark .rail { grid-column:1; grid-row:auto; padding:40px; }
  .feat-copy .h3 { width:auto; max-width:100%; }
  .feat-copy p, .feat-dark .feat-copy p { max-width:600px; }
  .feat-shot, .feat-dark .feat-shot { grid-column:1; grid-row:auto; min-height:560px; padding:32px 40px 48px; justify-content:center; }
  .feat-light .feat-shot { background:linear-gradient(135deg,#f8f8f8,#e4e4e4); }
  .feat-shot .fdemo { width:100%; max-width:926.215px; height:540px; }
  .demo-glass { width:100%; }
  .demo-glass .fdemo { height:auto; }
  .feat-dark .feat-shot { min-height:560px; padding:64px 40px; }
  .platform-notes { padding-block:40px; }
  .note { padding:32px; }
  .note-h { font-size:28px; }
  .footer-top { grid-template-columns:1fr 2fr; gap:32px; }
  .footer-cols { gap:24px; }
}
@media (max-width:767px) {
  :root { --pad:20px; --inset:0px; --gap:24px; }
  .page { width:calc(100% - 32px); padding-bottom:40px; }
  .hero { height:870px; justify-content:flex-start; gap:28px; padding-top:165px; }
  .hero-main, .hero-foot { padding-inline:4px; }
  .h1 { font-size:clamp(36px,10.9vw,64px); letter-spacing:-.035em; }
  .hero-foot { gap:24px; width:100%; }
  .hero-foot .lead { font-size:17px; max-width:min(100%,410px); }
  .hero-art { top:410px; right:calc(var(--bleed) - 96px); transform:scale(.62); transform-origin:top right; opacity:1; }
  .hero-caption { color:#858585; }
  .manifesto { min-height:0; padding:40px 28px; gap:32px; }
  .manifesto-text { font-size:clamp(28px,5.3vw,36px); }
  .manifesto-teams { margin-top:28px; font-size:12px; line-height:1.5; }
  .label { font-size:13px; }
  .label::before { width:6px; height:6px; vertical-align:1px; }
  .backers { margin-bottom:24px; padding:32px 24px; gap:28px; }
  .backers p { font-size:14px; }
  .team-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; align-items:center; justify-items:center; }
  .team-logos img { max-width:100%; max-height:19px; object-fit:contain; }
  .team-logos li:nth-child(4) img { height:auto; width:105px; }
  .feat .rail, .feat-dark .rail { padding:32px 24px; }
  .h3 { font-size:30px; }
  .feat-copy { gap:14px; }
  .feat-copy p { font-size:15px; }
  .feat-shot, .feat-dark .feat-shot { min-height:0; padding:8px 16px 24px; }
  .feat-shot .fdemo { height:600px; border-radius:10px; }
  .feat-dark .feat-shot { padding:40px 16px; }
  .demo-glass { padding:10px; border-radius:16px; }
  .demo-glass .fdemo { height:600px; aspect-ratio:auto; }
  #feat-cases .demo-glass .fdemo { height:413px; aspect-ratio:auto; }
  .platform-notes { grid-template-columns:1fr; gap:24px; padding:24px 0; }
  .note { min-height:0; padding:28px; gap:28px; }
  .note-h { font-size:28px; }
  .note p { font-size:15px; }
  .closing { min-height:550px; padding:28px; }
  .closing-row { min-height:494px; }
  .closing .label { margin-top:4px; }
  .closing .h2 { font-size:clamp(34px,6vw,46px); }
  .closing-side .lead { width:300px; font-size:17px; }
  .footer { height:auto; margin-top:24px; padding:48px 4px 0; }
  .footer-top { grid-template-columns:1fr; gap:40px; }
  .footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
  .footer-bottom { position:static; margin-top:56px; gap:16px; font-size:11px; }
}
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* Retain production navigation colors without changing the page palette. */
[data-nav-view=top-morphing-navigation] { --ink-900:var(--black); --ink-2:rgba(10,10,11,.72); }
/* Top morphing navigation — adapted from details.so/vault/top-morphing-navigation */
  [data-nav-view=top-morphing-navigation] {
    --surface-3: #e9e9e8;
    --text-1: var(--ink-900);
    --text-2: var(--ink-2);
    font-family: var(--text);
    --focus-ring-color: color-mix(in srgb, var(--text-1) 60%, transparent);
    --focus-ring-width: 1.5px;
    --focus-ring-offset: 2px;
  }
  [data-nav-view=top-morphing-navigation], [data-nav-view=top-morphing-navigation] *, [data-nav-view=top-morphing-navigation] *::before, [data-nav-view=top-morphing-navigation] *::after { box-sizing:border-box; }
  [data-nav-view=top-morphing-navigation] * { margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  [data-nav-view=top-morphing-navigation] a { color:inherit; text-decoration:none; }
  [data-nav-view=top-morphing-navigation] a:hover { opacity:1; }
  [data-nav-view=top-morphing-navigation] svg, [data-nav-view=top-morphing-navigation] img { display:block; max-width:100%; }
  [data-nav-view=top-morphing-navigation] button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
  [data-nav-view=top-morphing-navigation] :where(a[href], button):focus-visible { outline:var(--focus-ring-width) solid var(--focus-ring-color); outline-offset:var(--focus-ring-offset); }

  [data-nav-view=top-morphing-navigation] .backdrop {
    position:fixed; inset:0; z-index:40;
    background:rgba(12, 12, 12, .12);
    opacity:0; visibility:hidden;
    transition:opacity 200ms, visibility 200ms;
  }
  [data-nav-view=top-morphing-navigation][data-open=true] .backdrop { opacity:1; visibility:visible; }
  [data-nav-view=top-morphing-navigation] header {
    position:fixed; inset:0 0 auto; z-index:50;
    padding:24px; pointer-events:none;
    display:flex; justify-content:center;
  }
  [data-nav-view=top-morphing-navigation] .morph-panel {
    position:relative;
    width:330px; height:60px; flex-shrink:0;
    contain:layout style;
    color:var(--text-1);
    pointer-events:auto;
    overflow:hidden;
    border-radius:12px;
    corner-shape:superellipse(1.5);
    background:#fff;
    box-shadow:inset 0 0 0 1px rgba(12, 12, 12, .1);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar { position:absolute; inset:0 0 auto; height:60px; z-index:2; pointer-events:none; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar a, [data-nav-view=top-morphing-navigation] .morph-panel .bar button { pointer-events:auto; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar a:focus-visible, [data-nav-view=top-morphing-navigation] .morph-panel .bar button:focus-visible { outline:none; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar a:focus-visible::after, [data-nav-view=top-morphing-navigation] .morph-panel .bar button:focus-visible::after {
    content:""; position:absolute; inset:10px; border-radius:8px; pointer-events:none;
    outline:var(--focus-ring-width) solid var(--focus-ring-color); outline-offset:var(--focus-ring-offset);
  }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .home { position:absolute; top:0; left:0; width:60px; height:60px; display:grid; place-items:center; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .wordmark { position:absolute; top:0; left:50%; height:60px; padding:0 8px; translate:-50% 0; display:grid; place-items:center; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .wordmark img { width:82px; height:22px; filter:brightness(0); }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .toggle { position:absolute; right:0; top:0; width:60px; height:60px; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .toggle::before { content:""; position:absolute; inset:10px; border-radius:8px; transition:background 200ms; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .toggle:hover::before { background:color-mix(in srgb, var(--surface-3) 60%, transparent); }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .toggle span { position:absolute; top:50%; left:50%; width:20px; height:2px; translate:-50% -50%; border-radius:2px; background:currentColor; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .toggle [data-top] { top:42%; }
  [data-nav-view=top-morphing-navigation] .morph-panel .bar .toggle [data-bottom] { top:58%; }
  [data-nav-view=top-morphing-navigation] .morph-panel .content {
    position:absolute; top:60px; left:50%; width:100%;
    padding:20px 24px 24px;
    transform:translateX(-50%);
    max-height:calc(100dvh - 108px);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  }
  [data-nav-view=top-morphing-navigation] .morph-panel .content::-webkit-scrollbar { display:none; }
  [data-nav-view=top-morphing-navigation] .morph-panel .content [data-enter] { opacity:0; transform:translateY(20px); filter:blur(4px); }
  [data-nav-view=top-morphing-navigation] .morph-panel .content [data-enter=fade] { transform:none; filter:none; }

  [data-nav-view=top-morphing-navigation] .spread {
    display:grid;
    grid-template-columns:1fr 398px;
    grid-template-areas:"links media" "footer footer";
    grid-template-rows:auto auto;
    align-items:start;
    gap:24px 32px;
    flex-shrink:0;
  }
  [data-nav-view=top-morphing-navigation] .spread .media {
    grid-area:media; position:relative; width:100%;
    aspect-ratio:398/212; overflow:hidden;
    border-radius:8px; corner-shape:superellipse(1.5);
    background:var(--surface-3);
  }
  [data-nav-view=top-morphing-navigation] .spread .media .preview { position:absolute; inset:0; opacity:0; background:var(--surface-3); }
  [data-nav-view=top-morphing-navigation] .spread .media .preview:first-child { opacity:1; }
  [data-nav-view=top-morphing-navigation] .spread .media .preview img { width:100%; height:100%; max-width:none; object-fit:cover; }
  /* the 3D objects are cut out, so they sit whole on the surface instead of filling it */
  [data-nav-view=top-morphing-navigation] .spread .media .preview.is-object img { padding:12px 0; object-fit:contain; }
  [data-nav-view=top-morphing-navigation] .spread .directory { grid-area:links; min-width:0; }
  [data-nav-view=top-morphing-navigation] .spread .directory nav { --link-size:28px; --link-height:40px; }
  [data-nav-view=top-morphing-navigation] .spread .morph-footer {
    grid-area:footer; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px;
  }
  [data-nav-view=top-morphing-navigation] .spread .morph-footer .tagline { font-size:15px; line-height:1.4; color:var(--text-2); }
  [data-nav-view=top-morphing-navigation] .spread .morph-footer .utility {
    display:flex; align-items:center; gap:24px; margin-left:auto;
    font-size:15px; line-height:1.4; color:var(--text-2);
  }
  [data-nav-view=top-morphing-navigation] .spread .morph-footer .utility a { display:inline-flex; align-items:center; min-height:24px; border-radius:4px; transition:color 180ms ease; }
  [data-nav-view=top-morphing-navigation] .spread .morph-footer .utility a:hover, [data-nav-view=top-morphing-navigation] .spread .morph-footer .utility a:focus-visible { color:var(--text-1); }

  [data-nav-view=top-morphing-navigation] [data-links] a {
    position:relative; display:flex; align-items:center; width:100%;
    min-height:var(--link-height, 60px);
    padding-right:.75em;
    color:var(--text-1);
    font-family:var(--display);
    font-size:var(--link-size, 40px);
    line-height:1.2;
    letter-spacing:-.01em;
    border-radius:8px;
  }
  /* the hovered link greys out; the rest stay put */
  [data-nav-view=top-morphing-navigation] [data-links] a .word { display:block; transition:opacity 200ms ease; }
  [data-nav-view=top-morphing-navigation] [data-links] a:hover .word, [data-nav-view=top-morphing-navigation] [data-links] a:focus-visible .word { opacity:.5; }
  [data-nav-view=top-morphing-navigation] [data-links] a:focus-visible { outline:var(--focus-ring-width) solid var(--focus-ring-color); outline-offset:var(--focus-ring-offset); }

  @media (max-width: 767px) {
    [data-nav-view=top-morphing-navigation] header { padding:16px; }
    [data-nav-view=top-morphing-navigation] .morph-panel { width:100%; }
    [data-nav-view=top-morphing-navigation] .morph-panel .content { height:calc(100dvh - 60px); max-height:calc(100dvh - 60px); display:flex; flex-direction:column; }
    [data-nav-view=top-morphing-navigation] .spread { grid-template-columns:.9fr 1.1fr; column-gap:24px; }
    [data-nav-view=top-morphing-navigation] .spread .directory nav { --link-size:32px; --link-height:56px; }
  }
  @media (max-width: 639px) {
    [data-nav-view=top-morphing-navigation] .spread { grid-template-columns:1fr; grid-template-areas:"links" "media" "footer"; grid-template-rows:auto; gap:20px; }
    [data-nav-view=top-morphing-navigation] .spread .media { height:160px; aspect-ratio:auto; }
    [data-nav-view=top-morphing-navigation] .spread .directory nav { --link-size:30px; --link-height:48px; }
    /* the menu fills the screen, so its footer sits at the bottom, stacked */
    [data-nav-view=top-morphing-navigation] .spread { flex:1; grid-template-rows:auto auto 1fr; }
    [data-nav-view=top-morphing-navigation] .spread .morph-footer { align-self:end; flex-direction:column; align-items:flex-start; gap:12px; }
    [data-nav-view=top-morphing-navigation] .spread .morph-footer .utility { margin-left:0; }
  }