/* Paper Web_Final_08 Oct: public/disconnected navbar and footer controls. */
:root{--paper-text:#000829;--paper-text-secondary:#636a6b;--paper-muted:rgb(108 114 115 / 75%);--paper-surface:rgb(241 242 242 / 50%);--paper-border:#eaebeb}
:root:not([data-theme="dark"]) #header.paper-header{background:rgb(255 255 255 / 50%);background-image:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none}
#header.paper-header .nav-row{display:flex;align-items:center;gap:24px;height:64px;min-height:64px;padding:0}
#header.paper-header .wordmark{flex:1;min-width:144px}
#header.paper-header .wordmark img{display:block;width:144px;height:31.24px;filter:none}
#header.paper-header .nav-actions{flex:1;justify-content:flex-end}
#header.paper-header nav{display:flex;align-items:center;gap:4px;width:auto;padding:0}
.paper-nav-item{position:relative;flex:none}
#header.paper-header .paper-nav-trigger{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border:0;border-radius:999px;background:transparent;color:var(--paper-muted);font-size:14px;line-height:18px;letter-spacing:-.01em;font-weight:450;white-space:nowrap;cursor:pointer}
#header.paper-header .paper-nav-trigger:hover,#header.paper-header .paper-nav-trigger[aria-expanded=true]{background:var(--paper-surface)}
.paper-nav-trigger svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1;flex:none}
.paper-nav-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
#header.paper-header .nav-cta-primary{height:44px;padding:0 12px 0 20px;gap:4px;background:#0100ff;color:white;font-size:14px;line-height:18px;font-weight:450;letter-spacing:-.01em}
.nav-cta-primary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
#header.paper-header .nav-cta-primary:hover{background:#0d00d9}
#header.paper-header .paper-nav-menu{position:absolute;top:calc(100% + 24px);left:0;width:336px;max-width:calc(100vw - 32px);padding:6px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--paper-border);border-radius:16px;background:rgb(255 255 255 / 50%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 32px -8px #0008291a,0 2px 6px -2px #0008290f;z-index:30}
#header.paper-header .paper-nav-menu[hidden]{display:none}
.paper-nav-menu::before{content:"";position:absolute;left:0;right:0;top:-25px;height:25px}
#header.paper-header .paper-nav-menu :is(a,button){display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:auto;min-height:56px;padding:8px 8px 8px 6px;border:0;border-radius:10px;background:none;color:var(--paper-text-secondary);text-align:left;text-decoration:none;cursor:pointer;font-weight:450;letter-spacing:-.01em}
#header.paper-header .paper-nav-menu :is(a,button):hover,#header.paper-header .paper-nav-menu :is(a,button):focus-visible{background:var(--paper-surface);color:var(--paper-text)}
.paper-menu-icon{width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:var(--paper-surface)}
.paper-menu-copy{display:flex;flex-direction:column;min-width:0;gap:0}
.paper-menu-copy>span{font-size:14px;line-height:16.8px}
.paper-menu-copy>small{font-size:12px;line-height:14.4px;font-weight:450}
.paper-menu-badge{display:inline-flex;align-items:center;padding:0 8px;height:20px;background:var(--paper-surface);border-radius:999px;font-size:12px;font-weight:450;line-height:16px;margin-left:4px}
#header.paper-header :is(a,button):focus-visible{outline:2px solid #0100ff;outline-offset:3px}
@media(max-width:900px){#header.paper-header .nav-row{flex-wrap:wrap;height:auto;min-height:64px;padding-block:10px;gap:8px}#header.paper-header nav{order:3;justify-content:center;width:100%}#header.paper-header .paper-nav-menu{position:fixed;left:16px;top:112px}}
.footer-social-tooltip{display:none}
@media(min-width:901px){
 .site-footer-bottom{min-height:60px;padding-block:13px;gap:24px;border-color:rgb(234 235 235 / 50%)}
 .site-footer-bottom-links,.site-footer-utilities{gap:16px}
 .site-footer .site-footer-status{height:26px;line-height:26px;letter-spacing:-.01em}
 .site-footer-status>span{position:relative}
 .site-footer-status>span::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:#0100ff14;animation:paper-status-halo 4s ease-in-out infinite}
 .site-footer-utilities :is(a,button){display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 8px;border-radius:999px;color:var(--paper-muted);letter-spacing:-.01em;white-space:nowrap}
 .site-footer-utilities :is(a,button):hover,.site-footer-utilities :is(a,button):focus-visible{background:var(--paper-surface);color:var(--paper-text);text-decoration:none}
 .site-footer-social{gap:4px}
 .site-footer-social button{position:relative;width:32px;height:32px;padding:6px;border-radius:50%;flex:none}
 .site-footer-social img{opacity:.15}
 .site-footer-social button:hover,.site-footer-social button:focus-visible{background:var(--paper-surface)}
 .site-footer-social button:is(:hover,:focus-visible) img{opacity:1}
 .footer-social-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);height:24px;display:none;align-items:center;padding:0 8px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--paper-border),0 4px 12px -4px #0008291a;color:var(--paper-text);font-size:12px;line-height:16px;letter-spacing:-.01em;white-space:nowrap;pointer-events:none}
 .site-footer-social button:is(:hover,:focus-visible):not([data-tooltip-dismissed]) .footer-social-tooltip{display:flex}
}
@keyframes paper-status-halo{0%,65%,100%{transform:scale(.8);opacity:0}30%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.site-footer-status>span::after{animation:none}}
/* Keep the navbar glass on its own layer so dropdown blur samples the page. */
:root:not([data-theme="dark"]) #header.paper-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
#header.paper-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(255 255 255 / 50%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
/* Fit all four navigation choices within the compact shared grid. */
@media(max-width:600px){
 #header.paper-header nav{gap:0}
 #header.paper-header .paper-nav-trigger{font-size:12px;padding-inline:8px 6px;gap:4px}
}

/* transitions-dev dropdown recipe; transitions-polish open/close timing. */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

#header.paper-header .paper-nav-trigger svg{transition:transform var(--dropdown-open-dur) var(--dropdown-ease)}
@media(prefers-reduced-motion:reduce){#header.paper-header .paper-nav-trigger svg{transition:none}}

/* Desktop footer: Paper 29I6-1: identity 1–4, navigation 5–12, legal row below. */
.site-footer{display:none}
@media(min-width:901px){
 .site-footer{display:block;margin:0;padding:0;position:relative;overflow:hidden;isolation:isolate;background:transparent;color:var(--ink);border:0;--footer-muted:#737373;--footer-line:#e4e4e4;--footer-hover:#f0f0f0}
 [data-theme="dark"] .site-footer{background:transparent;--footer-muted:#a5a5a5;--footer-line:#282828;--footer-hover:#202020}
 /* Anchor decorative artwork to the full footer width, outside the content grid. */
 .site-footer>.container{position:static}
 .site-footer-layout{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:80px 40px;border-top:0}
 .site-footer-identity{grid-column:1/5;grid-row:1;min-width:0}
 .site-footer-logo{display:flex;align-items:center;width:fit-content;height:24px}
 .site-footer-logo .umbra-logo{width:160px;height:auto;filter:none}
 [data-theme="dark"] .site-footer-logo .umbra-logo{filter:brightness(0) invert(.93)}
 [data-theme="dark"] .site-footer-status,[data-theme="dark"] .site-footer-status:hover{color:var(--umbra-blue-1)}
 .site-footer-tagline{margin:16px 0 0;color:var(--footer-muted);font-size:16px;line-height:24px}
 .site-footer button{font:inherit;letter-spacing:normal;cursor:pointer}
 .site-footer .site-footer-status{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;border-radius:0;background:none;color:#0100FF;font-size:12px;line-height:16px;white-space:nowrap;flex:none}
 .site-footer-status span{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
 .site-footer-social{display:flex;flex:none;flex-wrap:nowrap;gap:16px;margin:0}
 .site-footer-social button{display:grid;place-items:center;width:20px;height:28px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--footer-muted)}
 .site-footer-social img{display:block;width:20px;height:20px;object-fit:contain;filter:brightness(0);opacity:.3}
 [data-theme="dark"] .site-footer-social img{filter:brightness(0) invert(1);opacity:.35}
 .site-footer-social button:hover{background:var(--footer-hover)}
 .site-footer-social button:hover img{opacity:1}
 .site-footer-nav{grid-column:5/13;grid-row:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px;align-items:start}
 .site-footer-column{grid-column:span 2;min-width:0}
 .site-footer-column h2{font-size:16px;line-height:24px;letter-spacing:normal;margin:0 0 16px;color:var(--footer-muted)}
 .site-footer-column ul{display:grid;gap:16px;list-style:none;margin:0;padding:0}
 .site-footer-column :is(a,button){display:inline-block;font-size:16px;line-height:24px;text-align:left;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);transition:none}
 .site-footer-nav button::after{content:none}
 .site-footer-column :is(a,button):hover{background:transparent;color:#000;text-decoration:none}
 .site-footer-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--footer-line);padding-block:24px 48px;color:var(--footer-muted)}
 .site-footer-copyright{display:block;margin-top:32px;color:var(--footer-muted);font-size:12px;line-height:16px}
 .site-footer-bottom-links{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;min-width:0}
 .site-footer-utilities{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:16px 24px}
 .site-footer-utilities :is(a,button){display:inline-block;font-size:12px;line-height:16px;padding:0;border:0;border-radius:0;background:transparent;color:var(--footer-muted)}
 .site-footer-utilities :is(a,button):hover{color:var(--ink);text-decoration:none}
 .site-footer .site-footer-status:hover{color:#0000bb;text-decoration:none}
 .site-footer :is(a,button):focus-visible{outline:2px solid var(--ink);outline-offset:5px}
}
/* Override the legacy global dark navbar-button treatment within this nav. */
@media(min-width:901px){
 [data-theme="dark"] .site-footer-nav button,[data-theme="dark"] .site-footer-nav button:hover{color:var(--ink);background:transparent}
}

@media(min-width:901px){
 .site-footer-watermark{position:absolute;z-index:0;pointer-events:none;left:0;right:0;bottom:-68px;line-height:0;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
 .site-footer-wordmark-mask{position:relative;width:100%;aspect-ratio:494.823/122.819;mask:url('assets/umbra-logo.svg') center / 100% 100% no-repeat;-webkit-mask:url('assets/umbra-logo.svg') center / 100% 100% no-repeat}
 .site-footer-wordmark-mask canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
}

/* Progressive backdrop blur, bounded by the utility row's top divider. */
@media(min-width:901px){
 .site-footer-bottom-blur{position:absolute;z-index:0;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none}
 .site-footer-bottom-blur span{position:absolute;inset:0;pointer-events:none}
 .site-footer-bottom-blur span:nth-child(1){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(to bottom,transparent,#000 40%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%)}
 .site-footer-bottom-blur span:nth-child(2){backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(to bottom,transparent 25%,#000 75%);-webkit-mask-image:linear-gradient(to bottom,transparent 25%,#000 75%)}
 .site-footer-bottom-blur span:nth-child(3){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);mask-image:linear-gradient(to bottom,transparent 55%,#000);-webkit-mask-image:linear-gradient(to bottom,transparent 55%,#000)}
 .site-footer-bottom>.site-footer-bottom-links,.site-footer-bottom>.site-footer-social{position:relative;z-index:1}
}

:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* Prototype 4: light-only composition; shared Book 450 and 120px section rhythm. */
:root{color-scheme:light;--duration-stagger:40ms;--duration-fast:250ms;--duration-quick:150ms;--duration-very-slow:500ms;--ease-smooth-out:cubic-bezier(.22,1,.36,1);--ease-in-out:ease-in-out;--hero-stagger:40ms;--hero-h1-at:40;--hero-pill-at:80;--hero-subtitle-at:120;--hero-settle-at:620;--stagger-dur:500ms;--stagger-distance:12px;--stagger-blur:3px;--stagger-ease:ease-in-out}
.hero-announcement,.hero-subtitle{--stagger-dur:500ms;--stagger-distance:12px;--stagger-blur:3px}
.home-logo-story{min-height:calc(100svh - 64px)}
.prototype-controls>span,.grid-column{font-family:var(--font-family);font-weight:450}
.ruler-panel,.ruler-panel button,.ruler-position input,.ruler-handle{font-weight:450}

/* Footer ink fades consistently from top to bottom. */
.site-footer-watermark{mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%)}

/* Begin the reading section before the hero's trailing empty space. */
@media(min-width:901px){
 #manifesto{margin-top:-120px}
 .site-footer-watermark{inset:0;height:100%;mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%)}
 .site-footer-wordmark-mask{position:absolute;left:0;right:0;bottom:-68px}
}

/* Plain hero ink; supporting copy follows the app preview. */
.home-content h1.hero-heading,.hero-heading-ink{color:#000829;-webkit-text-fill-color:#000829;background:none;filter:none;text-shadow:none}
.home-content .hero-subtitle{margin:16px 0 0;max-width:600px}
#header.paper-header .nav-cta-primary,.hero-swap-actions :is(button,a){display:flex;align-items:center;justify-content:center;gap:4px;width:fit-content;height:44px;min-height:44px;padding:0 12px 0 20px;border:0;border-radius:999px;background:#0100ff;background-image:none;color:#fff;box-shadow:none;text-shadow:none;font:450 14px/18px var(--font-family);letter-spacing:-.01em}
.nav-cta-primary svg,.hero-swap-actions :is(button,a) svg{display:block;flex-shrink:0;width:16px;height:16px;fill:currentColor;stroke:none}
.hero-swap-actions{display:flex;justify-content:center}
.hero-scroll-cue{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:45;padding-left:16px;cursor:pointer;background:rgb(255 255 255 / 70%);transition:opacity var(--duration-quick) var(--ease-smooth-out)}
.hero-scroll-cue.is-dismissed{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-scroll-cue{transition:none}}

/* Keep the reading block toward the top of the pinned desktop panel. */
@media(min-width:901px){#manifesto .manifesto-panel{align-items:flex-start}}

/* Paper primary transaction action, with the requested Get Started label. */
.hero-swap-actions :is(button,a){width:512px;max-width:100%;height:48px;min-height:48px;flex-shrink:0;padding-inline:24px;gap:0;background-color:#0100ff;background-image:linear-gradient(180deg in oklab,rgb(0 8 41 / 2%) 0%,rgb(0 8 41 / 0%) 60%,rgb(0 8 41 / .4%) 100%);background-origin:border-box;border:.5px solid #0100db;border-radius:999px;box-shadow:inset 0 .5px 0 rgb(255 255 255 / 34.9%),inset 0 -1px 1px rgb(13 0 217 / 25%),0 3px 6px -2px rgb(13 0 217 / 10.2%);color:#fff;font:450 16px/20px var(--font-family);letter-spacing:-.01em;text-align:center;text-shadow:0 3px 3px rgb(255 255 255 / 50%)}

.hero-scroll-cue{bottom:40px}

.hero-swap-actions :is(button,a){border-radius:16px}

:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}

/* Centered reading stage; circle canvas takes over only after full reveal. */
@media(min-width:901px){#manifesto .manifesto-panel{align-items:center}.manifesto-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.manifesto-paragraphs{position:relative;z-index:1}}
.umbra-guide-item{background:rgb(247 247 247 / 50%)}
.umbra-guide-item:hover{background:rgb(241 242 242 / 50%)}
.t-acc-head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:68px;padding:18px 24px;gap:24px;border:0;background:transparent;color:var(--faq-ink);font:450 18px/24.75px var(--font-family);letter-spacing:-.025em;text-align:left;cursor:pointer}
.t-acc-chevron{width:16px;height:16px;flex-shrink:0;color:var(--faq-ink)}
.t-acc-head:focus-visible{outline:2px solid #0100ff;outline-offset:-3px;border-radius:16px}

.site-footer-logo{height:auto}.site-footer-logo .umbra-logo{width:120px;height:auto}

@media(min-width:901px){#manifesto p{font-size:44px;line-height:52px}#manifesto .manifesto-paragraphs{grid-column:2/12}}

/* One footer gradient only: the full-height watermark fade. */
.site-footer-bottom-blur{display:none}

.site-footer-watermark{mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%)}

/* One full-footer overlay above the dot artwork, below footer content. */
.site-footer-watermark{mask-image:none;-webkit-mask-image:none}
.site-footer-watermark::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#fff 0%,rgb(255 255 255 / 85%) 35%,rgb(255 255 255 / 0%) 100%)}

.footer-background-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.site-footer-watermark::after{z-index:2}

#header.paper-header .wordmark .umbra-logo{width:120px;height:auto}

:root {
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
}

.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap { transition: none !important; }
}

.nimbus-cta{position:relative;isolation:isolate;overflow:hidden;background:#0100ff;color:#fff;scroll-margin-top:64px}
.nimbus-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.nimbus-cta-content{position:relative;min-height:440px;padding-block:120px;display:flex;align-items:center;justify-content:space-between;gap:48px}
.nimbus-cta h2{margin:0;max-width:780px;min-height:122px;font:450 clamp(48px,3.6vw,64px)/1 var(--font-family);letter-spacing:-.02em;color:#fff}
.nimbus-cta-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nimbus-cta-actions button{height:48px;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font:450 16px/20px var(--font-family);letter-spacing:-.01em;white-space:nowrap}
.nimbus-primary{background:#fff;color:#0100ff;min-width:212px}.nimbus-secondary{background:rgb(255 255 255 / 18%);color:#fff;min-width:194px}
.nimbus-primary img{display:block;width:20px;height:20px}
.nimbus-cta-switch{position:absolute;top:24px;right:24px;display:flex;padding:3px;border-radius:999px;background:rgb(255 255 255 / 12%)}
.nimbus-cta-switch button{border:0;border-radius:999px;background:none;color:#fff;padding:7px 16px;font:450 14px/20px var(--font-family)}
.nimbus-cta-switch button[aria-pressed=true]{background:#fff;color:#0100ff}
.nimbus-pause{position:absolute;bottom:20px;right:24px;border:1px solid #ffffff40;background:#0100ff80;color:#fff;padding:6px 12px;border-radius:999px;font:450 12px/16px var(--font-family)}
.nimbus-cta button:focus-visible{outline:2px solid #fff;outline-offset:4px}

.nimbus-cta-switch{top:auto;bottom:24px;right:24px;gap:12px;padding:8px 12px;background:#fff;border-radius:999px}
.nimbus-cta-switch button{padding:0;width:14px;height:14px;border-radius:50%;background:#ebebeb}
.nimbus-cta-switch button[aria-pressed=true]{background:#395fff}
.nimbus-cta-switch button:focus-visible{outline-color:#0100ff;outline-offset:3px}
.nimbus-pause{right:120px;bottom:27px}
/* Match the selected Paper banner's dimensions and type. */
.nimbus-cta{background:#0000ff}.nimbus-cta-content{max-width:1440px;min-height:378px;height:378px;padding:128px 64px;gap:64px;justify-content:flex-start}
.nimbus-cta h2{font-size:56px;line-height:60px;width:720px;max-width:720px;min-height:120px;flex-shrink:0}
.nimbus-primary,.nimbus-secondary{min-width:0}.nimbus-secondary{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nimbus-cta-switch{background:transparent;gap:4px}.nimbus-cta-switch button{width:10px;height:10px;background:rgb(235 235 235 / 40%)}.nimbus-cta-switch button[aria-pressed=true]{background:#ebebeb}

/* Palette sampled from the supplied animation recording. */
.nimbus-cta{background:#0500fe}

.nimbus-cta-switch{flex-direction:column;gap:5px;padding:4px;right:24px;bottom:24px}.nimbus-cta-switch button{width:5px;height:5px}.nimbus-pause{right:48px}

/* CTA heading shares the navbar container’s outer content edge. */
.nimbus-cta-content{max-width:1448px;padding-inline:24px}.nimbus-cta-switch button{width:4px;height:4px}.nimbus-cta-switch{gap:4px;padding:4px}

.nimbus-cta-switch{left:50%;right:auto;transform:translateX(-50%)}

/* Red authoring guides and selected ruler handles. */
.ruler-guide{color:#ff3344}.ruler-guide.is-selected .ruler-handle{background:#ff3344;border-color:#ff3344;color:#fff}

/* Permanent placement captured from the user’s ruler intersection. */
.nimbus-cta-switch{left:auto;right:24.5px;top:189.8px;bottom:auto;transform:translate(50%,-50%)}
/* Local navbar theme follows dark Nimbus sections without changing the page theme. */
#header.paper-header.over-dark-section{--paper-text:#f4f4f7;--paper-text-secondary:#d0d3dd;--paper-muted:#b8bdca;--paper-surface:#ffffff0d;--paper-border:#ffffff1a}
#header.paper-header.over-dark-section::before{background:rgb(11 12 16 / 75%)}
#header.paper-header.over-dark-section .wordmark img{filter:brightness(0) invert(1)}
#header.paper-header.over-dark-section .paper-nav-menu{background:rgb(21 23 29 / 90%);box-shadow:0 12px 32px -8px #0008}

/* App destinations preserve the existing CTA presentation. */
.nav-cta-primary,.hero-swap-actions a,.mobile-hero-action a{text-decoration:none;cursor:pointer}
.mobile-hero-action a{display:flex;align-items:center;justify-content:center}
.hero-swap-actions a:focus-visible,.mobile-hero-action a:focus-visible{outline:2px solid #0100ff;outline-offset:3px}

/* Paper dot geometry and navbar-only mobile scope, Prototype 4. */
#header.paper-header .nav-cta-primary{height:auto;min-height:32px;padding:7px 10px;font:450 14px/18px var(--font-family)}
#header.paper-header .nav-cta-primary>span{font:inherit}
#header.paper-header .nav-cta-primary svg{width:12px;height:12px}
#header.paper-header .paper-nav-trigger svg{fill:currentColor;stroke:none}
#header.paper-header .paper-menu-icon{display:flex;align-items:center;justify-content:center;color:var(--paper-text)}
#header.paper-header .paper-menu-icon svg{width:24px;height:24px;stroke:none;flex:none}
.mobile-brand,.mobile-menu-toggle{display:none}
@media(max-width:900px){
 #header.paper-header>.container{width:100%;max-width:none;padding:0 16px;margin:0}
 #header.paper-header .nav-row{height:60px;min-height:60px;padding:0;gap:6px;flex-wrap:nowrap}
 #header.paper-header .wordmark{min-width:0;flex:1;color:var(--paper-text)}
 #header.paper-header .wordmark .umbra-logo{display:none}
 #header.paper-header .mobile-brand{display:block;width:24px;height:24px}
 #header.paper-header .nav-actions{flex:0;gap:6px}
 #header.paper-header .nav-cta-primary{position:relative;height:44px;min-height:44px;padding:0 10px;background:transparent;isolation:isolate}
 #header.paper-header .nav-cta-primary::before{content:"";position:absolute;inset:6px 0;border-radius:999px;background:#0100ff;z-index:-1}
 #header.paper-header .nav-cta-primary:hover{background:transparent}
 #header.paper-header .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:100px;background:transparent;color:var(--paper-text-secondary);cursor:pointer}
 .mobile-menu-toggle .menu-close-icon{display:none}
 .mobile-menu-toggle[aria-expanded=true] .menu-close-icon{display:block}
 .mobile-menu-toggle[aria-expanded=true] .menu-open-icon{display:none}
 #header.paper-header nav{display:none}
 #header.paper-header.mobile-menu-open nav{display:flex;position:fixed;top:60px;left:0;right:0;width:100%;height:calc(100dvh - 60px);padding:16px 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:#fff;color:#000829}
 #header.paper-header.mobile-menu-open{--paper-text:#000829;--paper-text-secondary:#636a6b;--paper-surface:rgb(241 242 242 / 50%);--paper-border:#eaebeb}
 #header.paper-header.mobile-menu-open::before{background:#fff}
 #header.paper-header .paper-nav-item{width:100%;flex:none}
 #header.paper-header .paper-nav-trigger{width:100%;height:48px;min-height:48px;padding:0 12px;justify-content:space-between;border-radius:0;border-bottom:.5px solid rgb(234 235 235 / 50%);font-size:16px;line-height:22px;color:var(--paper-text-secondary)}
 #header.paper-header .paper-nav-trigger[aria-expanded=true]{border-radius:8px}
 #header.paper-header .paper-nav-trigger svg{width:16px;height:16px}
 #header.paper-header .paper-nav-menu{position:static;top:auto;left:auto;width:100%;max-width:none;padding:0;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;transform:none;transition:none}
 #header.paper-header .paper-nav-menu::before{display:none}
 #header.paper-header .paper-nav-menu :is(a,button){min-height:60px;padding:8px 12px;gap:12px}
 #header.paper-header .paper-menu-copy>span{font-size:14px;line-height:20px;color:var(--paper-text)}
 #header.paper-header .paper-menu-copy>small{font-size:12px;line-height:18px;color:var(--paper-text-secondary)}
}

/* Dot gestures stay inside fixed icon slots; text and row geometry never move. */
#header svg circle{transform-box:fill-box;transform-origin:center}

/* Hover/focus keeps the symbol geometry, with a varied blue dot palette. */
#header.paper-header .paper-nav-menu :is(a,button):is(:hover,:focus-visible) .paper-menu-icon{color:#0100ff}
#header.paper-header .paper-nav-menu :is(a,button):is(:hover,:focus-visible) [data-dot-icon] circle[opacity="1"]{opacity:1}
#header.paper-header .paper-nav-menu :is(a,button):is(:hover,:focus-visible) [data-dot-icon] circle[opacity="1"]:nth-child(3n+2){opacity:.72}
#header.paper-header .paper-nav-menu :is(a,button):is(:hover,:focus-visible) [data-dot-icon] circle[opacity="1"]:nth-child(4n){opacity:.48}
#header.paper-header .paper-nav-menu :is(a,button):is(:hover,:focus-visible) [data-dot-icon] circle[opacity="0.2"]{opacity:.14}
#header.paper-header :is(.paper-nav-trigger,.mobile-menu-toggle):is(:hover,:focus-visible) svg{color:#0100ff}

/* Brand downloads: a compact surface aligned to the visible logo. */
#header.paper-header .logo-download-menu{position:absolute;z-index:35;display:flex;flex-direction:column;gap:4px;width:232px;padding:6px;border:1px solid var(--paper-border);border-radius:16px;background:rgb(255 255 255 / 95%);box-shadow:0 12px 32px -8px #0008291a,0 2px 6px -2px #0008290f}
#header.paper-header .logo-download-menu[hidden]{display:none}
#header.paper-header .logo-download-menu::before{content:"";position:absolute;left:0;right:0;top:-5px;height:5px}
#header.paper-header .logo-download-menu a{display:flex;align-items:center;min-height:44px;padding:12px 14px;border-radius:10px;color:#000829;text-decoration:none;font:450 14px/20px var(--font-family)}
#header.paper-header .logo-download-menu a:is(:hover,:focus-visible){background:var(--paper-surface);color:#0100ff}
@media(max-width:900px){#header.paper-header .logo-download-menu{display:none}}

.cta-dot-matrix{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('/legal-pages/assets/p4-shell/cta-motion/dots-poster.svg?v=right-shift-1') center/100% 100% no-repeat}
.cta-dot-matrix canvas{display:block;width:100%;height:100%;opacity:0}
.nimbus-cta-content{z-index:1}
@media(prefers-reduced-motion:reduce){.cta-dot-matrix canvas{animation:none;transition:none}}

.cta-dot-matrix.is-ready{background-image:none}

/* Quick surface feedback; all movement is transform-only. */
.nimbus-cta-actions button{cursor:pointer;transition:background-color 140ms ease,box-shadow 140ms ease,transform 100ms cubic-bezier(.215,.61,.355,1);transform:translateY(0) scale(1)}
@media(hover:hover) and (pointer:fine){
 .nimbus-cta-actions .nimbus-primary:hover{background:#efedff;box-shadow:0 4px 16px rgb(0 0 70 / 20%);transform:translateY(-1px)}
 .nimbus-cta-actions .nimbus-secondary:hover{background:rgb(255 255 255 / 28%);border:0;box-shadow:none;transform:translateY(0) scale(1)}
}
.nimbus-cta-actions .nimbus-primary:active{background:#dcd7ff;box-shadow:inset 0 2px 5px rgb(5 0 80 / 18%);transform:translateY(1px) scale(.98);transition-duration:70ms}
.nimbus-cta-actions .nimbus-secondary:active{background:rgb(255 255 255 / 34%);box-shadow:inset 0 2px 5px rgb(0 0 65 / 24%),inset 0 0 0 1px rgb(255 255 255 / 28%);transform:translateY(1px) scale(.98);transition-duration:70ms}
@media(prefers-reduced-motion:reduce){.nimbus-cta-actions button{transition:none}.nimbus-cta-actions button:hover,.nimbus-cta-actions button:active{transform:none}}

/* transitions-dev / transitions-polish: shared motion scale, P4 only. */
:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --distance-micro: 4px;
  --distance-medium: 12px;
  --scale-large: .96;
  --scale-medium: .97;
  --scale-tiny: .99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --dropdown-pre-scale: var(--scale-medium);
  --dropdown-closing-scale: var(--scale-tiny);
  --dropdown-ease: var(--ease-smooth-out);
  --modal-open-dur: var(--duration-fast);
  --modal-close-dur: var(--duration-quick);
  --modal-scale: var(--scale-large);
  --modal-scale-close: var(--scale-large);
  --modal-ease: var(--ease-smooth-out);
  --acc-expand: var(--duration-fast);
  --acc-collapse: var(--duration-fast);
  --acc-chevron: var(--duration-fast);
  --acc-ease: var(--ease-smooth-out);
  --text-swap-dur: var(--duration-quick);
  --text-swap-translate-y: var(--distance-micro);
  --text-swap-blur: var(--blur-small);
  --text-swap-ease: var(--ease-in-out);
}

/* Reversible disclosures retain one duration; dismissal has no delay. */
#header.paper-header .paper-nav-trigger[aria-expanded=false] svg {
  transition-duration: var(--dropdown-close-dur);
}
/* Frequent pointer feedback stays small, with a softer return. */
.nimbus-cta-actions button {
  transition: background-color var(--duration-quick) var(--ease-out),
    box-shadow var(--duration-quick) var(--ease-out),
    transform 200ms var(--ease-smooth-out);
}
@media (hover:hover) and (pointer:fine) {
  .nimbus-cta-actions button:hover { transition-duration: 150ms, 150ms, 150ms; }
}
.nimbus-cta-actions .nimbus-primary:active,
.nimbus-cta-actions .nimbus-secondary:active { transition-duration: 70ms; }
/* 70ms presses and ambient artwork have no matching token usage. */
@media (prefers-reduced-motion:reduce) {
  .nimbus-cta-actions button { transition: none; }
}

/* Fade text ink independently of the footer's entrance opacity and artwork. */
.site-footer { --footer-text-opacity: 65%; }
.site-footer :is(.site-footer-column a,.site-footer-column button) { --footer-text-ink: #000829; }
.site-footer :is(.site-footer-tagline,.site-footer-column h2,.site-footer-copyright,.site-footer-utilities a,.site-footer-utilities button) { --footer-text-ink: #636a6b; }
.site-footer .site-footer-status { --footer-text-ink: #0100ff; }
.site-footer :is(.site-footer-tagline,.site-footer-column h2,.site-footer-column a,.site-footer-column button,.site-footer-copyright,.site-footer-utilities a,.site-footer-utilities button,.site-footer-status) {
  color: color-mix(in srgb, var(--footer-text-ink) var(--footer-text-opacity), transparent);
  transition: color var(--duration-quick) var(--ease-out);
}
.site-footer :is(.site-footer-tagline,.site-footer-column h2,.site-footer-column a,.site-footer-column button,.site-footer-copyright,.site-footer-utilities a,.site-footer-utilities button,.site-footer-status):is(:hover,:focus-visible) {
  color: var(--footer-text-ink);
}
.site-footer .site-footer-status>span { color: #0100ff; }
@media (prefers-reduced-motion:reduce) {
  .site-footer :is(.site-footer-tagline,.site-footer-column h2,.site-footer-column a,.site-footer-column button,.site-footer-copyright,.site-footer-utilities a,.site-footer-utilities button,.site-footer-status) { transition: none; }
}

/* A slightly clearer version of the existing static 12px dot grid. */
:root {
  --page-dot-pattern: radial-gradient(rgba(1,0,255,.2) .75px, transparent .75px);
  --page-dot-pattern-dark: radial-gradient(rgba(164,177,255,.16) .75px, transparent .75px);
}
html body, html body:has(.privacy-document) {
  background-image: var(--page-dot-pattern);
  background-size: 12px 12px;
}
/* Let the page texture continue behind the light SDK sections. */
.sdk-section { background-color: transparent; }
/* Match the same rhythm on dark section grounds, outside their card surfaces. */
.compliance-section, .nimbus-qualities, .paper-exact-reference,
.paper-exact-reference #paper-exact-root {
  background-image: var(--page-dot-pattern-dark);
  background-size: 12px 12px;
}
@media(max-width:900px) {
  .site-footer { background-color: transparent; }
}