/* One-take home (2026-10).
   The public home is a black void with one fixed 3D scene behind it (js/one-take-home.js); the page is type on black.
   Scope: body.overhouse-public-home only, and only while the login screen is not showing. New elements use the ot- prefix.
   The shared header and footer, the login screen, the product window and the support modal keep their own styles;
   the product section (#ecosystem) keeps its markup and behaviour and is only re-dressed near the end of this file.
   Loaded last on index.html so it can outrank the older home sheets without touching them.

   Type: Sora sets every Latin letter and numeral (it is also the lettering behind the glass), Noto Sans KR sets the Korean.
   One rule runs through the page: a statement is set light, and what it lands on is set semibold - the same
   split as the product names themselves (Over + View). Text sits in the same column as the shared header (--ot-edge),
   titles on the left edge, what to read or press next on the right. */

body.overhouse-public-home {
  --ot-fg: #F5F4F0;
  --ot-2: #A9A8A3;
  --ot-3: #6E6D69;
  --ot-muted: var(--ot-2);
  --ot-dim: var(--ot-3);
  --ot-line: rgba(245, 244, 240, .14);
  --ot-line-strong: rgba(245, 244, 240, .32);
  --ot-c1: #6C9BFF;
  --ot-c2: #46D6B4;
  --ot-c3: #F0B45E;
  --ot-c4: #F2688E;
  --ot-font: "Sora", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --ot-edge: max(var(--site-shell-padding, 32px), calc((100% - var(--site-shell-width, 1184px)) / 2));
  --ot-ease: cubic-bezier(.16, 1, .3, 1);
}
html body.overhouse-public-home:not(.auth-locked) { background: #000 !important; }
/* The older sheets make <body> its own scroll container (overflow auto), which stops position:sticky from holding to the viewport.
   <html> already clips sideways overflow, so the body can simply be visible. */
html body.overhouse-public-home:not(.auth-locked) { overflow: visible !important; }
html:has(body.overhouse-public-home:not(.auth-locked)) { background: #000; scrollbar-color: #2e2e2c #000; }
body.overhouse-public-home:not(.auth-locked) ::selection { background: var(--ot-fg); color: #000; }

/* ---------- the scene ---------- */
#otScene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#otLabels { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ot-tag3d { position: absolute; left: 0; top: 0; padding-top: 18px; font: 600 13px/1 var(--ot-font); letter-spacing: -.01em; color: var(--ot-fg); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.ot-tag3d i { font-style: normal; font-weight: 300; }
.ot-tag3d::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 10px; background: var(--ot-line-strong); }
body.auth-locked #otScene, body.auth-locked #otLabels, body.auth-locked .ot-corner,
body.is-loading #otScene, body.is-loading #otLabels, body.is-loading .ot-corner { visibility: hidden; }
body.overhouse-public-home:not(.auth-locked) .site { position: relative; z-index: 1; background: none; }
body.overhouse-public-home:not(.auth-locked) .site > main { background: none; }

/* the shared header: clear over the opening, frosted once the page moves */
body.overhouse-public-home:not(.auth-locked) .site-header { background: rgba(0, 0, 0, .55); border-bottom-color: var(--ot-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .5s, border-color .5s; }
body.overhouse-public-home.ot-js:not(.auth-locked):not(.ot-scrolled) .site-header { background: rgba(0, 0, 0, 0); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.overhouse-public-home:not(.auth-locked) .site-header .site-header__account button { border-color: var(--ot-line-strong); background: none; color: var(--ot-fg); transition: border-color .3s, background-color .3s; }
body.overhouse-public-home:not(.auth-locked) .site-header .site-header__account button:hover { border-color: var(--ot-fg); }
body.overhouse-public-home:not(.auth-locked) .site-header .site-header__signup { background: var(--ot-fg); border-color: var(--ot-fg); color: #000; }

/* ---------- type and the shared pieces ---------- */
.ot { position: relative; z-index: 1; color: var(--ot-fg); font-family: var(--ot-font); font-weight: 400; font-size: 16px; line-height: 1.7; letter-spacing: -.01em; word-break: keep-all; -webkit-font-smoothing: antialiased; }
.ot *, .ot *::before, .ot *::after { box-sizing: border-box; }
.ot h1, .ot h2, .ot h3, .ot p, .ot ul, .ot ol, .ot li { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; list-style: none; text-wrap: initial; }
.ot a { color: inherit; text-decoration: none; }
.ot svg { flex: none; }
.ot :focus-visible { outline: 1px solid var(--ot-fg); outline-offset: 5px; }
/* statements: light, landing on semibold */
.ot .ot-display { font-weight: 300; font-size: clamp(34px, 5vw, 76px); line-height: 1.16; letter-spacing: -.042em; }
.ot .ot-display .ot-b { font-weight: 600; }
.ot .ot-lead { max-width: 27em; font-size: clamp(15px, 1.22vw, 18px); line-height: 1.75; letter-spacing: -.015em; color: var(--ot-2); text-wrap: pretty; }
/* a title on the left edge, what follows on the right; the same grid opens and closes the page */
.ot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 384px); align-items: end; gap: 28px clamp(32px, 6vw, 96px); width: 100%; padding-inline: var(--ot-edge); }
.ot-side { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.6vh, 26px); min-width: 0; }
.ot-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.ot a.ot-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid var(--ot-line-strong); border-radius: 999px; font: 500 15px/1 var(--ot-font); letter-spacing: -.01em; transition: background-color .3s, color .3s, border-color .3s; }
.ot-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ot a.ot-btn-solid { border-color: var(--ot-fg); background: var(--ot-fg); color: #000; }
.ot a.ot-btn-solid:hover { background: rgba(245, 244, 240, 0); color: var(--ot-fg); }
.ot a.ot-btn-line:hover { background: var(--ot-fg); color: #000; border-color: var(--ot-fg); }
.ot a.ot-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.site-layout .ot .ot-actions a.ot-video-link { width: var(--ui-feature-action-height, 52px); height: var(--ui-feature-action-height, 52px); padding: 0; justify-content: center; flex: none; }
.ot .ot-video-link svg { width: 32px; height: 32px; }
.ot .ot-video-link svg path { fill: currentColor; stroke: none; }
.ot-word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-block: .12em; margin-block: -.12em; }
.ot-char { display: inline-block; }

/* ---------- opening: the cube in the middle, the line under its left, what to do under its right ---------- */
.ot-hero { min-height: calc(100svh - var(--site-header-height, 76px)); display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 96px 0 clamp(92px, 12.5vh, 128px); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
/* the intro: Over, and under it what each family gets past; the word turns, one sentence in Korean says what that means */
.ot .ot-over { display: flex; flex-direction: column; align-items: flex-start; font-weight: 300; font-size: clamp(54px, 7.8vw, 118px); line-height: 1.02; letter-spacing: -.055em; }
.ot-rot { display: inline-grid; overflow: hidden; padding: .1em .08em .14em 0; margin: -.1em 0 -.14em; }
.ot-rot b { grid-area: 1 / 1; font-weight: 600; white-space: nowrap; transform: translateY(124%); }
.ot-rot b.is-on { transform: none; transition: transform 1.05s var(--ot-ease) .14s; }
.ot-rot b.is-out { transform: translateY(-124%); transition: transform .7s cubic-bezier(.6, 0, .85, .35); }
body:not(.ot-js) .ot-rot b:first-child { transform: none; }
.ot .ot-cap { display: grid; margin-top: clamp(16px, 2.6vh, 26px); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.025em; color: var(--ot-fg); }
.ot-cap span { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s; }
.ot-cap span.is-on { opacity: .9; transform: none; transition: opacity .7s .4s, transform .9s var(--ot-ease) .4s; }
body:not(.ot-js) .ot-cap span:first-child { opacity: .9; transform: none; }
.ot-js .ot-hero h1 .ot-char { transform: translateY(116%); }
.ot-js.ot-ready .ot-hero h1 .ot-char { transform: none; transition: transform 1.3s var(--ot-ease); transition-delay: calc(var(--i) * 28ms + 1.3s); }
.ot-hero .ot-side { position: relative; display: block; }
.ot-hero .ot-side > * { transition: opacity .5s, transform .8s var(--ot-ease); }
.ot-js .ot-hero .ot-side { opacity: 0; transform: translateY(16px); }
.ot-js.ot-ready .ot-hero .ot-side { opacity: 1; transform: none; transition: opacity 1.4s 2s, transform 1.6s var(--ot-ease) 2s; }
.ot-tag-a { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.6vh, 26px); }
.ot .ot-hold { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--ot-3); }
.ot-hold svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.ot-hold circle { fill: none; stroke-width: 1.2; }
.ot-hold .r0 { stroke: var(--ot-line-strong); }
.ot-hold .r1 { stroke: var(--ot-fg); stroke-dasharray: 63; stroke-dashoffset: 63; }
.ot-hold .dot { fill: var(--ot-fg); stroke: none; animation: otPulse 2.4s ease-in-out infinite; }
/* held open, the right side becomes the key to the four colours inside */
.ot .ot-legend { position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-content: end; border-top: 1px solid var(--ot-line-strong); opacity: 0; transform: translateY(10px); pointer-events: none; }
.ot .ot-legend li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ot-line); }
.ot-legend li::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ot-legend b { font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.ot-legend span { margin-left: auto; font-size: 13px; color: var(--ot-2); }
.ot-side.is-open .ot-tag-a { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.ot-side.is-open .ot-legend { opacity: 1; transform: none; }
.ot-hero::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: clamp(40px, 6vh, 56px); background: linear-gradient(var(--ot-fg), var(--ot-fg)) no-repeat 0 0 / 100% 40%, var(--ot-line); animation: otDrip 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes otDrip { 0% { background-position: 0 -70%; } 100% { background-position: 0 240%; } }
@keyframes otPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- pinned story: one product family comes forward at a time ---------- */
.ot-pin { height: 440svh; }
.ot-pin-inner { position: sticky; top: var(--site-header-height, 76px); height: calc(100svh - var(--site-header-height, 76px)); overflow: hidden; }
/* the family's text keeps the left; the stones come out of the dark beside it */
.ot-pin-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, 0) 58%); pointer-events: none; }
.ot-stage { position: absolute; top: 0; bottom: 0; left: var(--ot-edge); right: var(--ot-edge); }
/* where we are among the four, by name; each is also the way to it */
.ot-fam { position: absolute; left: 0; top: clamp(20px, 3.6vh, 36px); display: flex; gap: clamp(18px, 2.2vw, 32px); }
.ot-fam button { appearance: none; position: relative; margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 400 14px/1.4 var(--ot-font); letter-spacing: -.015em; color: var(--ot-3); cursor: pointer; transition: color .4s; }
.ot-fam button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ot-ease); }
.ot-fam button:hover { color: var(--ot-2); }
.ot-fam button.is-on { color: var(--ot-fg); }
.ot-fam button.is-on::after { transform: scaleX(1); }
.ot-js .ot-fam, .ot-js .ot-pin-inner::before { opacity: 0; transition: opacity .5s; }
.ot-js.ot-story-on .ot-fam, .ot-js.ot-story-on .ot-pin-inner::before { opacity: 1; transition: opacity .9s .15s; }
.ot-panel { position: absolute; left: 0; bottom: clamp(104px, 14.5vh, 148px); display: flex; flex-direction: column; gap: clamp(22px, 3.6vh, 38px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
.ot-panel.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s .1s; }
.ot-p-title { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 22px); min-width: 0; }
.ot .ot-panel h2 { font-weight: 600; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -.05em; white-space: nowrap; }
.ot-panel .ot-char { transform: translateY(116%); transition: transform 0s .4s; }
.ot-panel.is-on .ot-char { transform: none; transition: transform 1.1s var(--ot-ease); transition-delay: calc(var(--i) * 34ms + 120ms); }
.ot .ot-panel .ot-lead { opacity: 0; transform: translateY(12px); transition: opacity 0s .4s, transform 0s .4s; }
.ot .ot-panel.is-on .ot-lead { opacity: 1; transform: none; transition: opacity .8s .3s, transform 1s var(--ot-ease) .3s; }
.ot .ot-apps { width: min(100%, 400px); border-top: 1px solid var(--c, var(--ot-line-strong)); }
.ot .ot-panel .ot-lead { max-width: 400px; text-wrap: balance; }
.ot .ot-apps li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 17px 0 18px; border-bottom: 1px solid var(--ot-line); opacity: 0; transform: translateY(14px); transition: opacity 0s .4s, transform 0s .4s; }
.ot .ot-panel.is-on .ot-apps li { opacity: 1; transform: none; transition: opacity .7s .28s, transform .9s var(--ot-ease) .28s; }
.ot .ot-panel.is-on .ot-apps li + li { transition-delay: .37s; }
.ot-name { font-weight: 600; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.2; letter-spacing: -.035em; }
.ot-name i { font-style: normal; font-weight: 300; }
.ot-role { font-size: 15px; line-height: 1.5; color: var(--ot-2); text-align: right; }

/* ---------- launcher: the eight stones in a row, then the three steps in order ---------- */
.ot-launcher { padding: clamp(120px, 20vh, 220px) 0 clamp(96px, 15vh, 160px); }
.ot .ot-note { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; line-height: 1.5; color: var(--ot-3); }
.ot-note span + span { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--ot-line-strong); }
.ot-dockspace { height: clamp(170px, 30vh, 300px); margin: clamp(12px, 2.4vh, 28px) var(--ot-edge); }
.ot .ot-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin-inline: var(--ot-edge); }
.ot .ot-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 18px; padding: 22px 0 0; border-top: 1px solid var(--ot-line); min-width: 0; }
.ot-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ot-fg); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.ot-steps li.is-on::before { transform: scaleX(1); transition: transform 1.6s linear; }
.ot-steps .n { grid-row: 1 / span 2; font-weight: 300; font-size: clamp(30px, 2.9vw, 44px); line-height: 1; letter-spacing: -.04em; color: var(--ot-3); transition: color .5s; }
.ot-steps li.is-on .n { color: var(--ot-fg); }
.ot .ot-steps h3 { font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.03em; }
.ot .ot-steps p { grid-column: 2; font-size: 15px; line-height: 1.65; color: var(--ot-2); }

/* ---------- closing: the cube comes back together over the same grid the page opened on ---------- */
html body.overhouse-public-home:not(.auth-locked) #contact.ot-closing { position: relative; z-index: 1; min-height: 126svh !important; padding: 0 0 clamp(96px, 15vh, 150px) !important; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; background: none; border: 0; overflow: visible; }

/* titles and what sits beside them come in as they are reached (the script marks body.ot-js; without it everything is simply visible) */
.ot-js [data-ot-rv] { opacity: 0; transform: translateY(20px); transition: opacity 1s, transform 1.3s var(--ot-ease); }
.ot-js [data-ot-rv].ot-in { opacity: 1; transform: none; }
.ot-js [data-ot-rv][data-ot-split] { opacity: 1; transform: none; }
.ot-js [data-ot-rv][data-ot-split] .ot-char { transform: translateY(116%); transition: transform 1.2s var(--ot-ease); transition-delay: calc(var(--i) * 26ms); }
.ot-js [data-ot-rv][data-ot-split].ot-in .ot-char { transform: none; }

/* ---------- corner controls: sound, and where we are ---------- */
.ot-corner { position: fixed; z-index: 120; left: var(--ot-edge); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); font: 400 13px/1 var(--ot-font); letter-spacing: -.01em; color: var(--ot-2); opacity: 0; }
.ot-ready .ot-corner { opacity: 1; transition: opacity 1.2s .9s; }
.ot-ready.ot-at-end .ot-corner, .ot-ready.ot-over-products .ot-corner { opacity: 0; pointer-events: none; transition: opacity .4s; }
.ot-corner button.ot-sound { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .3s; }
.ot-corner button.ot-sound:hover, .ot-sound[aria-pressed="true"] { color: var(--ot-fg); }
/* the existing script writes ON / OFF into the button; here it reads as a word */
.ot-sound b { font-size: 0; font-weight: inherit; }
.ot-sound b::after { content: "\AEBC\C9D0"; font-size: 13px; color: var(--ot-3); }
.ot-sound[aria-pressed="true"] b::after { content: "\CF1C\C9D0"; color: var(--ot-fg); }
.ot-eq { display: flex; align-items: flex-end; gap: 3px; height: 12px; }
.ot-eq i { width: 1px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.25); transition: transform .4s; }
.ot-sound[aria-pressed="true"] .ot-eq i { animation: otEq 1s ease-in-out infinite alternate; }
.ot-sound[aria-pressed="true"] .ot-eq i:nth-child(2) { animation-delay: -.35s; }
.ot-sound[aria-pressed="true"] .ot-eq i:nth-child(3) { animation-delay: -.7s; }
.ot-sound[aria-pressed="true"] .ot-eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes otEq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.ot-count { display: flex; align-items: center; gap: 12px; }
.ot-count .bar { width: 64px; height: 1px; background: var(--ot-line); display: block; }
.ot-count .bar i { display: block; height: 100%; background: var(--ot-fg); transform-origin: left; transform: scaleX(0); }

/* ---------- the product section, re-dressed ----------
   Markup and behaviour are unchanged (js/experience-home.js builds the cards and opens the product window).
   Here it becomes an opaque black sheet that passes over the scene, set in the same type as the rest of the page. */
html body.overhouse-public-home:not(.auth-locked) .ecosystem { background: #000; padding-top: clamp(140px, 22vh, 230px); padding-bottom: clamp(120px, 18vh, 200px); font-family: var(--ot-font); color: var(--ot-fg); }
html body.overhouse-public-home:not(.auth-locked) .ecosystem::before,
html body.overhouse-public-home:not(.auth-locked) .ecosystem::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(90px, 16vh, 170px); pointer-events: none; }
html body.overhouse-public-home:not(.auth-locked) .ecosystem::before { bottom: 100%; background: linear-gradient(rgba(0, 0, 0, 0), #000); }
html body.overhouse-public-home:not(.auth-locked) .ecosystem::after { top: 100%; background: linear-gradient(#000, rgba(0, 0, 0, 0)); }
html body.overhouse-public-home:not(.auth-locked) .ecosystem__head { gap: clamp(26px, 4vh, 44px); padding-bottom: clamp(26px, 4vh, 44px); border-bottom: 1px solid var(--ot-line-strong); }
html body.overhouse-public-home:not(.auth-locked) .ecosystem__head > #ecosystemTitle { max-width: none; font-family: var(--ot-font); font-weight: 300; font-size: clamp(34px, 5vw, 76px); line-height: 1.16; letter-spacing: -.042em; }
html body.overhouse-public-home:not(.auth-locked) .ecosystem__title .word-reveal { color: var(--ot-fg); font-weight: 300; }
html body.overhouse-public-home:not(.auth-locked) .ecosystem__title .word-reveal--accent { color: var(--ot-fg); font-weight: 600; }
body.overhouse-public-home .ecosystem__aside :is(.ecosystem-launcher-cta, .guide-launch) { border-radius: 0; }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__surface,
body.overhouse-public-home .ecosystem__aside .guide-launch { border: 1px solid var(--ot-line); border-radius: 0; background: none; box-shadow: none; color: var(--ot-fg); font-family: var(--ot-font); transition: border-color .3s, background-color .3s; }
body.overhouse-public-home .ecosystem-launcher-cta:hover .hero-launcher-cta__surface,
body.overhouse-public-home .ecosystem-launcher-cta:focus-visible .hero-launcher-cta__surface,
body.overhouse-public-home .ecosystem__aside .guide-launch:hover { border-color: var(--ot-line-strong); background: rgba(245, 244, 240, .04); box-shadow: none; transform: none; }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__surface::before { background: var(--ot-fg); height: 1px; }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__mark,
body.overhouse-public-home .ecosystem__aside .guide-launch__mark { border: 1px solid var(--ot-line); border-radius: 0; background: none; }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__mark::after { display: none; }
body.overhouse-public-home .ecosystem__aside .guide-launch__mark svg { stroke: var(--ot-fg); }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__copy strong,
body.overhouse-public-home .ecosystem__aside .guide-launch__copy strong { font-weight: 500; font-size: 17px; letter-spacing: -.025em; }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__copy small,
body.overhouse-public-home .ecosystem__aside .guide-launch__copy small { color: var(--ot-2); font-weight: 400; font-size: 13px; letter-spacing: -.01em; }
body.overhouse-public-home .ecosystem-launcher-cta .hero-launcher-cta__action { border: 1px solid var(--ot-line-strong); border-radius: 999px; background: none; color: var(--ot-fg); font-weight: 500; letter-spacing: -.01em; }
body.overhouse-public-home .ecosystem-launcher-cta:hover .hero-launcher-cta__action,
body.overhouse-public-home .ecosystem-launcher-cta:focus-visible .hero-launcher-cta__action { border-color: var(--ot-fg); background: var(--ot-fg); color: #000; }
body.overhouse-public-home .ecosystem__aside .guide-launch__go { color: var(--ot-fg); }

body.overhouse-public-home .pshow { gap: 0; margin-top: 0; border-left: 1px solid var(--ot-line); }
body.overhouse-public-home .pshow-card { padding: 0 0 28px; border: 0; border-right: 1px solid var(--ot-line); border-bottom: 1px solid var(--ot-line); border-radius: 0; background: none; box-shadow: none; font-family: var(--ot-font); color: var(--ot-fg); transition: background-color .4s, opacity .9s, transform 1.2s var(--ot-ease); }
body.overhouse-public-home .pshow-card:hover,
body.overhouse-public-home .pshow-card:focus-visible { transform: none; border-color: var(--ot-line); background: rgba(245, 244, 240, .035); box-shadow: none; }
body.overhouse-public-home .pshow-card:focus-visible { outline: 1px solid var(--ot-fg); outline-offset: -1px; }
body.overhouse-public-home .pshow-card::after { inset: auto auto -1px 0; height: 1px; background: var(--accent); opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ot-ease); }
body.overhouse-public-home .pshow-card:hover::after,
body.overhouse-public-home .pshow-card:focus-visible::after { opacity: 1; transform: scaleX(1); }
body.overhouse-public-home .pshow-shot { margin: 22px 22px 0; border: 1px solid var(--ot-line); border-radius: 0; background: #050505; box-shadow: none; overflow: hidden; }
body.overhouse-public-home .pshow-card:hover .pshow-shot,
body.overhouse-public-home .pshow-card:focus-visible .pshow-shot { box-shadow: none; }
body.overhouse-public-home .pshow-shot::before { display: none; }
body.overhouse-public-home .pshow-shot img { filter: saturate(.82) brightness(.92); transition: filter .5s, transform 1.4s var(--ot-ease); }
body.overhouse-public-home .pshow-card:hover .pshow-shot img,
body.overhouse-public-home .pshow-card:focus-visible .pshow-shot img { filter: none; transform: scale(1.035); }
body.overhouse-public-home .pshow-card[data-demo="1"] .pshow-shot::after { border: 1px solid var(--ot-line-strong); border-radius: 999px; background: rgba(0, 0, 0, .7); color: var(--ot-fg); font: 500 12px/1.6 var(--ot-font); letter-spacing: -.01em; }
/* the card's running number says nothing the grid does not; the name carries the card, split the way every Over name is */
body.overhouse-public-home .pshow-head { align-items: baseline; gap: 0; padding: 24px 22px 0; }
body.overhouse-public-home .pshow-head em { display: none; }
body.overhouse-public-home .pshow-head strong { font-weight: 600; font-size: clamp(24px, 2vw, 29px); line-height: 1.2; letter-spacing: -.035em; }
body.overhouse-public-home .pshow-head strong .ot-ov { font-weight: 300; }
body.overhouse-public-home .pshow-status { display: flex; align-items: center; gap: 9px; padding: 8px 22px 0; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.015em; color: var(--ot-fg); }
body.overhouse-public-home .pshow-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body.overhouse-public-home .pshow-line { margin: 12px 22px 0; font-size: 14px; font-weight: 400; line-height: 1.7; letter-spacing: -.015em; color: var(--ot-2); }
body.overhouse-public-home .pshow-cta { margin: 22px 22px 0; font: 500 13px/1.5 var(--ot-font); letter-spacing: -.01em; color: var(--ot-fg); }
body.overhouse-public-home .pshow-card { display: flex; flex-direction: column; text-align: left; cursor: default; }
body.overhouse-public-home button.pshow-shot { display: block; width: calc(100% - 44px); padding: 0; cursor: pointer; }
body.overhouse-public-home .pshow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: auto 22px 0; padding-top: 20px; }
body.overhouse-public-home .pshow-actions .pshow-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 8px 0; border: 0; background: transparent; text-decoration: none; cursor: pointer; }
body.overhouse-public-home .pshow-actions .pshow-preview { color: var(--ot-2); }
body.overhouse-public-home .pshow-actions .pshow-cta:hover { color: var(--ot-fg); text-decoration: underline; text-underline-offset: 5px; }
body.overhouse-public-home .pshow-card :is(a, button):focus-visible { outline: 2px solid var(--ot-fg); outline-offset: 4px; }
/* the cards rise in one after another when their grid comes into view */
body.overhouse-public-home.ot-js .pshow:not(.ot-in) .pshow-card { opacity: 0; transform: translateY(34px); }
body.overhouse-public-home.ot-js .pshow.ot-in .pshow-card { transition-delay: 0s, calc(var(--ot-n, 0) * 70ms), calc(var(--ot-n, 0) * 70ms); }
body.overhouse-public-home .pshow-card:nth-child(2) { --ot-n: 1; } body.overhouse-public-home .pshow-card:nth-child(3) { --ot-n: 2; } body.overhouse-public-home .pshow-card:nth-child(4) { --ot-n: 3; }
body.overhouse-public-home .pshow-card:nth-child(5) { --ot-n: 2; } body.overhouse-public-home .pshow-card:nth-child(6) { --ot-n: 3; } body.overhouse-public-home .pshow-card:nth-child(7) { --ot-n: 4; } body.overhouse-public-home .pshow-card:nth-child(8) { --ot-n: 5; }

/* ---------- things around the scene, brought into the same language (their markup and scripts are unchanged) ---------- */
/* the opening loader (#preloader, driven by js/experience-home.js) */
body.overhouse-public-home .preloader, body.overhouse-public-home .preloader.is-revealing { background: #000; color: var(--ot-fg); font-family: var(--ot-font); }
body.overhouse-public-home .preloader { padding: 30px var(--ot-edge) 34px; }
body.overhouse-public-home .preloader__grid { opacity: .5; }
body.overhouse-public-home .preloader__top { font: 400 13px/1.5 var(--ot-font); letter-spacing: -.01em; text-transform: none; color: var(--ot-2); }
body.overhouse-public-home .preloader__top span:first-child { font-size: 0; }
body.overhouse-public-home .preloader__top span:first-child::after { content: "OverPlatform"; font-size: 13px; }
body.overhouse-public-home .preloader__stage { margin-bottom: clamp(18px, 3vh, 30px); font: 400 13px/1.5 var(--ot-font); letter-spacing: -.01em; color: var(--ot-2); }
body.overhouse-public-home .preloader__brand { gap: 0; padding: .08em .04em .2em; font-family: var(--ot-font); font-size: clamp(44px, 9.4vw, 148px); line-height: 1; }
body.overhouse-public-home .preloader__brand::after { left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(245, 244, 240, 0), rgba(245, 244, 240, .5) 30%, rgba(245, 244, 240, .5) 70%, rgba(245, 244, 240, 0)); }
body.overhouse-public-home .preloader__line:first-child { font-weight: 200; letter-spacing: -.045em; color: rgba(245, 244, 240, .78); }
body.overhouse-public-home .preloader__line--offset { font-weight: 600; letter-spacing: -.045em; color: var(--ot-fg); }
body.overhouse-public-home .preloader__bottom { gap: clamp(18px, 2.4vw, 34px); }
body.overhouse-public-home .preloader__rail { margin-bottom: 7px; background: var(--ot-line); }
body.overhouse-public-home .preloader__rail span { background: var(--ot-fg); }
body.overhouse-public-home .preloader__counter { font-family: var(--ot-font); font-weight: 200; font-size: clamp(40px, 5.4vw, 80px); line-height: .8; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
body.overhouse-public-home .preloader__counter sup { margin: 0 0 0 6px; font: 400 13px/1 var(--ot-font); letter-spacing: 0; color: var(--ot-2); }
body.overhouse-public-home .preloader.is-revealing :is(.preloader__top, .preloader__center, .preloader__bottom) { opacity: 0; transform: translateY(-18px); transition: opacity .5s, transform .86s var(--ot-ease); }

/* the pointer (#pointer): a hairline ring with its word, instead of a lime disc; plain again over the opening's own buttons */
body.overhouse-public-home .pointer::before { content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 1px solid rgba(245, 244, 240, .5); border-radius: 50%; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .6s var(--ot-ease), border-color .3s; }
body.overhouse-public-home .pointer.is-view::before { opacity: 1; transform: none; }
body.overhouse-public-home .pointer.is-view .pointer__dot { transform: scale(.01); opacity: 0; background: #fff; }
body.overhouse-public-home .pointer__label { color: var(--ot-fg); font: 500 11px/1 var(--ot-font); letter-spacing: .08em; text-indent: .08em; }
body.overhouse-public-home.ot-holding .pointer.is-view::before { transform: scale(.78); border-color: var(--ot-fg); }
body.overhouse-public-home.ot-on-link .pointer.is-view::before { opacity: 0; transform: scale(.3); }
body.overhouse-public-home.ot-on-link .pointer.is-view .pointer__label { opacity: 0; }
body.overhouse-public-home.ot-on-link .pointer.is-view .pointer__dot { transform: scale(1); opacity: 1; }

/* page progress: the corner counter shows it on wide screens; on phones a single white hairline */
body.overhouse-public-home:not(.auth-locked) .scroll-meter { top: 0; height: 1px; z-index: 300; }
body.overhouse-public-home:not(.auth-locked) .scroll-meter span { background: var(--ot-fg); opacity: .8; }
@media (min-width: 761px) { body.overhouse-public-home:not(.auth-locked) .scroll-meter { display: none; } }

/* the help button and its panel (js/site-footer.js) */
body.overhouse-public-home:not(.auth-locked) .site-quick-help { font-family: var(--ot-font); color: var(--ot-fg); }
body.overhouse-public-home:not(.auth-locked) .site-quick-help summary { border-color: var(--ot-line-strong); border-radius: 50%; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .3s, background-color .3s, color .3s; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help summary svg { width: 19px; height: 19px; stroke-width: 1.3; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help summary:hover,
body.overhouse-public-home:not(.auth-locked) .site-quick-help[open] summary { border-color: var(--ot-fg); background: var(--ot-fg); color: #000; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help__panel { bottom: 62px; padding: 22px 22px 10px; border-color: var(--ot-line-strong); border-radius: 0; background: rgba(6, 6, 6, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: none; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help__panel header strong { font-weight: 500; font-size: 20px; letter-spacing: -.03em; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help__panel header span { color: var(--ot-2); }
body.overhouse-public-home:not(.auth-locked) .site-quick-help__panel a { border-top-color: var(--ot-line); transition: padding-left .5s var(--ot-ease), color .3s; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help__panel a:hover { padding-left: 8px; color: #fff; }
body.overhouse-public-home:not(.auth-locked) .site-quick-help :is(summary, a):focus-visible { outline: 1px solid var(--ot-fg); }

/* the shared footer sits on black as well */
html body.overhouse-public-home:not(.auth-locked) [data-site-footer] .site-trust-footer { background: #000 !important; border-top-color: var(--ot-line) !important; }
html body.overhouse-public-home:not(.auth-locked) [data-site-footer] { background: #000; }

@media (max-width: 900px) {
  .ot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
@media (max-width: 760px) {
  .ot-count, .ot-sound .t { display: none; }
  .ot-grid { grid-template-columns: minmax(0, 1fr); }
  .ot-pin-inner::before { background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 62%, rgba(0, 0, 0, .7)); }
  .ot .ot-display { font-size: clamp(31px, 9.2vw, 44px); }
  .ot .ot-over { font-size: clamp(50px, 15.5vw, 70px); }
  .ot-hero .ot-lead { display: none; }
  .ot-hero { padding-bottom: 86px; }
  .ot .ot-legend li { padding: 9px 0; }
  .ot-legend b { font-size: 16px; line-height: 1.5; }
  .ot-side { width: 100%; }
  .ot a.ot-btn { min-height: 48px; padding: 0 22px; }
  .ot-fam { top: 16px; gap: 0 16px; flex-wrap: wrap; }
  .ot-fam button { font-size: 13px; padding: 8px 0; }
  .ot-panel { right: 0; bottom: 76px; gap: 16px; }
  .ot .ot-apps, .ot .ot-panel .ot-lead { width: 100%; max-width: none; }
  .ot .ot-panel h2 { font-size: clamp(36px, 11vw, 50px); }
  .ot-p-title { gap: 10px; }
  .ot .ot-apps li { padding: 12px 0 13px; }
  .ot-name { font-size: 21px; }
  .ot-role { font-size: 14px; }
  .ot .ot-steps { grid-template-columns: minmax(0, 1fr); }
  .ot .ot-steps li { padding: 18px 0 20px; }
  body.overhouse-public-home .pshow { border-left: 0; }
  body.overhouse-public-home .pshow-card { border-right: 0; }
  body.overhouse-public-home .pshow-shot { margin-inline: 0; }
  body.overhouse-public-home button.pshow-shot { width: 100%; }
  body.overhouse-public-home .pshow-actions { margin-inline: 0; }
  body.overhouse-public-home .pshow-head, body.overhouse-public-home .pshow-status { padding-inline: 0; }
  body.overhouse-public-home .pshow-line, body.overhouse-public-home .pshow-cta { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ot *, .ot *::before, .ot *::after, .ot-corner, .ot-corner *, [data-ot-rv], [data-ot-rv] .ot-char { animation: none !important; transition: none !important; }
}