/* Canonical landing primitives. Read DESIGN.md before changing or adding variants. */
:root{color-scheme:dark;--bg:#101010;--panel:#181818;--line:#303030;--ink:#f2f1ed;--muted:#aaa9a6}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 Manrope,Arial,sans-serif}
em{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
h2{font-size:31px;letter-spacing:-1.1px;line-height:1.15;font-weight:500}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:#b4b3af;margin-bottom:17px}
.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid #f5f5f5;background:#f5f5f5;color:#111;border-radius:999px;padding:11px 16px;font-size:12px;font-weight:600;min-height:44px;transition:background .2s}
.button:hover{background:#fff;color:#111}
:root{--content-width:1364px;--content-gutter:28px;--radius-media:14px;--space-section:110px;--font-body:Manrope,Arial,sans-serif;--font-editorial:'Cormorant Garamond',Georgia,serif}
.ripli-container,main>.wrap,footer.wrap{max-width:var(--content-width);width:calc(100% - var(--content-gutter)*2);margin-inline:auto}
.section-heading{font-size:31px;letter-spacing:-1.1px;line-height:1.15;font-weight:500;margin:0}.section-heading em{font-size:1.12em}
.quiet-link{font-size:13px;color:#deded9;text-decoration:none;border:0;padding-bottom:0}
.editorial-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.editorial-media{position:relative;overflow:hidden;border-radius:var(--radius-media);margin:0}.editorial-media>img{display:block;width:100%;height:100%;object-fit:cover}
/* Focus is a filled surface, never a bright frame or underline. */
a,a:hover,a:focus-visible,button:focus-visible,.faq-list p a,.preset-tile:focus-visible .preset-tile-caption strong,.composer-upload:focus-within span,.composer-formats input:focus-visible+span{text-decoration:none}
:focus-visible{outline:none!important}
:is(a,button,summary,select):focus-visible{background-color:#373737;color:#f2f1ed;border-radius:6px}
.button:focus-visible{background:#d5d3ca;color:#111;border-radius:999px;filter:none}
.preset-tile:focus-visible{background:transparent}.preset-tile:focus-visible .preset-tile-caption{background:#373737;border-radius:6px}
.composer-upload:focus-within{outline:none;background:#373737}.composer-upload:focus-within span{background:#373737;color:#fff}.composer-formats input:focus-visible+span{outline:none;background:#555;color:#fff}
.composer-close,.composer-upload,.composer-formats span{border-color:transparent}.preset-composer{border-color:#272727}
@media(max-width:700px){:root{--content-gutter:18px;--space-section:72px}.editorial-split{grid-template-columns:1fr;gap:28px}}
@media(max-width:650px){h2,.section-heading{font-size:28px}.eyebrow{font-size:9px;margin-bottom:13px}.section-intro{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:24px}}

/* Shared floating header: one content edge, clear navigation and account actions. */
.site-header,.updates-body .site-header{position:fixed;z-index:30;top:24px;left:0;right:0;width:calc(100% - var(--content-gutter)*2);max-width:var(--content-width);height:64px;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:space-between;gap:24px;pointer-events:none}
.site-header>*{pointer-events:auto}.site-header .header-brand{display:flex;align-items:center;min-height:48px}.site-header .header-brand img{width:148px;height:auto}
.header-menu{display:flex;align-items:center;gap:20px;padding:6px 6px 6px 20px;background:rgba(24,24,24,.94);backdrop-filter:blur(18px);border-radius:999px;box-shadow:0 8px 24px #0002}
.site-header .primary-nav{display:flex;align-items:center;gap:4px;margin:0}.site-header .primary-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:12px;color:var(--muted);border-radius:999px}.site-header .primary-nav a:hover,.site-header .primary-nav a:focus-visible{background:#303030;color:var(--ink)}
.site-header .header-actions{display:flex;align-items:center;gap:8px;margin:0}.sign-in{padding:12px;font-size:12px;color:var(--ink);border-radius:999px}.sign-in:hover{background:#303030}.site-header .button.small{min-height:44px;padding:11px 18px;font-size:12px}.menu-toggle{display:none}
.retained-copy{left:0;right:0;width:calc(100% - var(--content-gutter)*2);max-width:var(--content-width);margin-inline:auto}.updates-body main{padding-top:112px}html{scroll-padding-top:120px}
.site-header.is-scrolled .header-brand{background:#181818ed;border-radius:12px;padding:10px 14px;margin-left:-14px;backdrop-filter:blur(18px)}
@media(max-width:1100px){
 .site-header,.updates-body .site-header{top:16px;height:56px;gap:16px;padding:0;margin-top:0}.site-header .header-brand img{width:120px}
 .menu-toggle{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
 .menu-mark{position:relative;width:16px;height:10px}.menu-mark:before,.menu-mark:after{content:'';position:absolute;left:0;width:16px;height:1px;background:currentColor;transition:transform .2s}.menu-mark:before{top:2px}.menu-mark:after{bottom:2px}.menu-open .menu-mark:before{top:5px;transform:rotate(45deg)}.menu-open .menu-mark:after{bottom:4px;transform:rotate(-45deg)}
 .header-menu{display:none;position:absolute;top:72px;right:0;width:min(420px,100%);box-sizing:border-box;padding:24px;border-radius:18px;background:#181818;max-height:calc(100svh - 112px);overflow:auto}
 .menu-open .header-menu{display:block}.site-header .primary-nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:static;width:auto;max-width:none;padding:0;background:none;box-shadow:none}.site-header .primary-nav a{font-size:18px;letter-spacing:-.3px;padding:8px 0;min-height:44px;border-radius:6px;color:var(--ink)}
 .site-header .header-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.site-header .sign-in{padding:12px 0;font-size:13px}.site-header .button.small{font-size:12px;padding:11px 18px}.retained-copy{width:calc(100% - var(--content-gutter)*2)}.updates-body main{padding-top:96px}
}
@media(prefers-reduced-motion:reduce){.menu-mark:before,.menu-mark:after{transition:none}}

/* Preset collections: an image-led disclosure within the shared header. */
.preset-nav{position:relative}.preset-menu-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}.preset-menu-toggle:hover,.preset-menu-toggle[aria-expanded=true]{background:#303030;color:var(--ink)}.preset-menu-toggle span{font-size:16px;font-weight:400}.preset-menu[hidden]{display:none}.preset-menu{position:absolute;top:calc(100% + 18px);right:-180px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;width:540px;padding:26px;background:var(--panel);border-radius:18px;box-shadow:0 16px 40px #0004}.preset-menu-links .eyebrow{font-size:8px;margin:0 0 14px}.site-header .preset-menu-links a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 8px;font-size:15px;border-radius:8px;color:var(--ink)}.preset-menu-links a span{font-size:11px;color:var(--muted);margin-top:3px}.site-header .preset-menu-links .all-presets{font-size:12px;margin-top:14px}.site-header .primary-nav .preset-menu-feature{display:block;padding:0;position:relative;overflow:hidden;border-radius:10px}.preset-menu-feature img{width:100%;height:100%;object-fit:cover;display:block}.preset-menu-feature>span{position:absolute;bottom:0;left:0;right:0;padding:36px 16px 16px;background:linear-gradient(transparent,#000b);color:var(--ink);font-size:17px;line-height:1.2}.preset-menu-feature em{font-size:21px}
@media(max-width:1100px){.preset-nav{width:100%}.preset-menu-toggle{width:100%;justify-content:space-between;border-radius:6px;min-height:44px;padding:8px 0;font-size:18px;letter-spacing:-.3px;color:var(--ink)}.preset-menu{position:static;width:auto;display:block;padding:12px 8px 12px 14px;margin:4px 0 12px;background:#222;box-shadow:none;border-radius:10px}.site-header .primary-nav .preset-menu-feature{display:none}.site-header .preset-menu-links a{font-size:14px;min-height:44px;padding:8px}.preset-menu-links .eyebrow{display:none}.site-header .preset-menu-links .all-presets{margin-top:4px}}

/* Disclosure chevrons are functional, not decorative link arrows. */
.header-menu{position:relative}.preset-nav{position:static}.preset-menu{top:calc(100% + 8px);right:0;width:480px}.dropdown-chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s}.preset-menu-toggle[aria-expanded=true] .dropdown-chevron{transform:rotate(180deg)}
@media(max-width:1100px){.header-menu{position:absolute}.preset-menu{width:auto}}

.preset-menu.text-menu{width:260px;grid-template-columns:1fr;padding:18px}.site-header .text-menu .preset-menu-links a{font-size:14px;min-height:40px}.site-header .primary-nav{gap:0}.site-header .primary-nav>a,.preset-menu-toggle{padding-inline:10px}.header-menu{gap:12px}
@media(max-width:1100px){.preset-menu.text-menu{width:auto;padding:8px 14px}.site-header .primary-nav>a,.preset-menu-toggle{padding-inline:0}.site-header .text-menu .preset-menu-links a{padding:8px;min-height:44px}.header-menu{gap:0}}

.preset-menu.tools-menu{width:780px;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:16px;padding:24px}.site-header .tools-menu .preset-menu-links a{font-size:12px;min-height:40px;padding:8px}.site-header .primary-nav .tools-all{grid-column:1/-1;font-size:12px;min-height:32px;padding:4px 8px}.tools-menu .eyebrow{letter-spacing:1px}
@media(max-width:1100px){.preset-menu.tools-menu{width:auto;grid-template-columns:1fr;gap:16px;padding:16px}.tools-menu .eyebrow{display:block}.site-header .tools-menu .preset-menu-links a{font-size:14px;min-height:44px}}

/* All dropdown destinations use one typography and hit-area treatment. */
.site-header .preset-menu .preset-menu-links a,.site-header .primary-nav .tools-all{font-family:var(--font-body);font-size:14px;font-weight:400;letter-spacing:0;line-height:1.5;min-height:44px;padding:8px}.site-header .preset-menu .preset-menu-links .all-presets{font-size:14px}.preset-menu-links a span{font-size:11px}

.site-header .primary-nav .nav-updates{color:var(--ink);gap:7px}.updates-dot{display:inline-block;flex:none;width:4px;height:4px;border-radius:50%;background:#c5c0ad;align-self:center}

/* Anchor the Connectors disclosure to its own label. */
@media(min-width:1101px){.preset-nav:has(>#connectors-menu){position:relative}#connectors-menu{top:calc(100% + 14px);left:0;right:auto}}

/* Reuse Studio brand marks in compact overlapping groups. */
.preset-menu#connectors-menu{width:340px}.site-header #connectors-menu .connector-menu-row{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;min-height:52px}.site-header #connectors-menu .connector-menu-label{font-size:14px;color:var(--ink);margin:0}.connector-icon-stack{display:flex;align-items:center;flex-shrink:0;margin:0!important}.connector-icon-stack .connector-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#282828;box-shadow:0 0 0 2px var(--panel);margin:0 0 0 -7px;position:relative}.connector-icon-stack .connector-icon:first-child{margin-left:0}.connector-icon img{display:block;width:18px;height:18px;object-fit:contain}.site-header #connectors-menu .connector-menu-row:hover .connector-icon{box-shadow:0 0 0 2px #303030}
@media(max-width:1100px){.preset-menu#connectors-menu{width:auto}.site-header #connectors-menu .connector-menu-row{gap:10px}.connector-icon-stack .connector-icon{width:26px;height:26px;margin-left:-8px;background:#303030;box-shadow:0 0 0 2px #222}.connector-icon img{width:16px;height:16px}.site-header #connectors-menu .connector-menu-label{font-size:14px}}

/* Anchor Presets to its trigger; keep connector marks and labels together. */
@media(min-width:1101px){.preset-nav:has(>#preset-menu){position:relative}#preset-menu{top:calc(100% + 14px);left:0;right:auto}}
.preset-menu#connectors-menu{width:300px}.site-header #connectors-menu .connector-menu-row{justify-content:flex-start;gap:12px}.connector-icon-stack{order:-1;min-width:66px;justify-content:flex-end}.connector-icon-stack .connector-icon{width:28px;height:28px;margin-left:-9px;background:#242424;box-shadow:none}.connector-icon-stack .connector-icon:nth-child(1){z-index:3}.connector-icon-stack .connector-icon:nth-child(2){z-index:2}.connector-icon-stack .connector-icon:nth-child(3){z-index:1}.connector-icon img{width:19px;height:19px}.site-header #connectors-menu .connector-menu-row:hover .connector-icon{box-shadow:none}.site-header #connectors-menu .connector-menu-label{white-space:nowrap}
@media(max-width:1100px){.header-menu{padding:20px}.preset-menu#connectors-menu{width:auto;padding:8px}.site-header #connectors-menu .connector-menu-row{gap:8px;padding:8px 0}.connector-icon-stack{min-width:58px}.connector-icon-stack .connector-icon{width:26px;height:26px;margin-left:-10px;box-shadow:none}.connector-icon img{width:18px;height:18px}.site-header #connectors-menu .connector-menu-label{font-size:14px}}

/* Compact mobile navigation and a shared connector text edge. */
.site-header #connectors-menu .preset-menu-links>a:not(.connector-menu-row){padding-left:86px}
@media(max-width:1100px){.header-menu{padding:16px 20px}.site-header .primary-nav>a,.site-header .primary-nav>.preset-nav>.preset-menu-toggle{font-size:14px;letter-spacing:0;min-height:40px;padding-block:6px}.site-header .primary-nav{gap:0}.site-header .preset-menu{margin-block:2px 8px}.site-header .preset-menu .preset-menu-links a,.site-header .tools-menu .preset-menu-links a,.site-header .primary-nav .tools-all{font-size:13px;min-height:36px;padding-block:6px}.site-header #connectors-menu .connector-menu-row{min-height:38px;padding-block:5px}.site-header #connectors-menu .connector-menu-label{font-size:13px}.site-header #connectors-menu .preset-menu-links>a:not(.connector-menu-row){padding-left:66px;font-size:13px}.site-header .header-actions{margin-top:16px}}

/* One restrained dropdown type scale, with smaller connector marks. */
.site-header .preset-menu .preset-menu-links a,.site-header .preset-menu .preset-menu-links .all-presets,.site-header .primary-nav .tools-all,.site-header #connectors-menu .connector-menu-label{font-size:13px}.site-header #connectors-menu .connector-menu-row{min-height:42px;gap:10px}.connector-icon-stack{min-width:56px}.connector-icon-stack .connector-icon{width:24px;height:24px;margin-left:-8px}.connector-icon img{width:16px;height:16px}.site-header #connectors-menu .preset-menu-links>a:not(.connector-menu-row){padding-left:74px}.preset-menu#connectors-menu{width:280px}
@media(max-width:1100px){.preset-menu#connectors-menu{width:auto}.site-header #connectors-menu .connector-menu-row{min-height:36px;gap:8px}.connector-icon-stack{min-width:50px}.connector-icon-stack .connector-icon{width:22px;height:22px;margin-left:-8px}.connector-icon img{width:15px;height:15px}.site-header #connectors-menu .preset-menu-links>a:not(.connector-menu-row){padding-left:58px}}

/* Shared image-led request-access dialog. */
#access-dialog{width:min(820px,calc(100vw - 40px));max-width:820px;max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:20px;background:#181818;color:var(--ink);overflow:auto;text-align:left}#access-dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}.access-layout{display:grid;grid-template-columns:.9fr 1fr}.access-photo{position:relative;margin:0;min-height:520px;overflow:hidden}.access-photo img{width:100%;height:100%;position:absolute;object-fit:cover}.access-photo:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0009)}.access-photo figcaption{position:absolute;z-index:1;bottom:28px;left:28px;font-size:23px;line-height:1.2;letter-spacing:-.5px}.access-content{padding:48px 36px 32px}.access-content h2{font-size:42px;line-height:1;margin:0 0 20px}.access-content h2 em{font-size:1.15em}#access-description{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 26px}#access-form{display:flex;flex-direction:column;gap:9px}#access-form label{font-size:11px;color:#c5c3bd}#access-form input{width:100%;min-width:0;box-sizing:border-box;min-height:48px;border:0;border-radius:9px;background:#242424;color:var(--ink);font:inherit;font-size:13px;padding:13px 14px;margin:0 0 12px}#access-form input:focus{outline:none;background:#303030}#access-form .button{width:100%;margin-top:5px}#access-form p{font-size:10px;line-height:1.6;color:var(--muted);margin:4px 0 0}.access-privacy a{color:#d9d7d0}#access-form #access-status{font-size:12px;color:var(--ink)}#access-status:empty{display:none}#access-dialog .dialog-close{position:absolute;z-index:2;top:10px;right:10px;width:36px;height:36px;padding:9px;border:0;border-radius:50%;display:grid;place-items:center;background:#292929;color:#ccc}#access-dialog .dialog-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}#access-submit:disabled{opacity:.7;cursor:default}@media(max-width:650px){#access-dialog{width:calc(100vw - 28px);max-height:calc(100dvh - 28px);border-radius:16px}.access-layout{grid-template-columns:1fr}.access-photo{min-height:145px;max-height:145px}.access-photo img{object-position:50% 37%}.access-photo figcaption{font-size:18px;bottom:16px;left:24px}.access-content{padding:26px 24px}.access-content h2{font-size:34px}.access-content h2 br{display:none}.access-content h2 em{margin-left:6px}#access-description{margin-bottom:20px}#access-form input{font-size:16px}}

/* Founder-approved popup composition, neutral black form surface. */
#access-dialog,.access-content{background:#101010}#access-form input{background:#202020;color:#f2f2f2}#access-form input:focus{background:#2b2b2b}#access-description,#access-form p{color:#aaa}.access-privacy a{color:#d8d8d8}

/* Four tool families; restrained emphasis and slim navigation selections. */
.site-header .tools-menu .tool-surprise{flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;background:transparent;color:var(--ink);font-weight:400}
.site-header .tools-menu .tool-surprise:hover,.site-header .tools-menu .tool-surprise:focus-visible{background:#303030}
.surprise-spark{width:15px;height:15px;flex:none;fill:none;stroke:#c8bca4;stroke-width:1.3;animation:surprise-gleam 5.5s ease-in-out infinite}
@keyframes surprise-gleam{0%,68%,100%{opacity:.7;transform:scale(1)}78%{opacity:1;transform:scale(1.12);stroke:#f2eadb}88%{opacity:.7;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.surprise-spark{animation:none}}
.tools-coming{font-size:10px;color:var(--muted);padding:4px 8px;margin:4px 0 0}
@media(min-width:1101px){.site-header .preset-menu-toggle{min-height:34px;border-radius:8px;padding-inline:9px}.site-header .primary-nav>a{min-height:34px;border-radius:8px}.preset-menu-toggle:hover,.preset-menu-toggle[aria-expanded=true]{background:#262626}}

/* Shared request form (founder-approved 2 November, first used on /signup): labels above filled dark fields,
   fill-only focus and the white submit pill, as in the Request access pop-up. Page CSS sets width and placement. */
.request-form{display:flex;flex-direction:column;gap:9px;text-align:left}
.request-form label{font-size:11px;color:#c5c3bd}
.request-form input{width:100%;min-width:0;box-sizing:border-box;min-height:48px;border:0;border-radius:9px;background:#202020;color:#f2f2f2;font:inherit;font-size:13px;padding:13px 14px;margin:0 0 12px}
.request-form input::placeholder{color:#8d8c88}
.request-form input:focus,.request-form input:focus-visible{outline:none;background:#2b2b2b}
.request-form .button{width:100%;margin-top:5px}
.request-form .button:disabled{cursor:default}
/* The pill border follows its fill, so hover and keyboard focus never show a light rim (founder no-edges rule). */
.request-form .button:hover{border-color:#fff}
.request-form .button:focus-visible{border-color:#d5d3ca}
.request-form p{font-size:10px;line-height:1.6;color:#aaa;margin:4px 0 0}
.request-form .request-form-privacy a{color:#d8d8d8;text-decoration:none}
.request-form .request-form-status{font-size:12px;color:var(--ink)}
.request-form .request-form-status:empty{display:none}
@media(max-width:650px){.request-form input{font-size:16px}}