/* The public homepage and pricing page. Everything is scoped to html.landing.
   Display type is the visitor's own system face, set large and tight. */
.landing {
  --ink: #0a0a0f; --ink-2: #55555f; --line: #e2e0d9; --paper: #f7f6f1; --card: #ffffff; --night: #0a0a0f;
  --biz: #3a68fb; --biz-soft: color-mix(in srgb, var(--biz) 11%, #fff); --biz-mid: color-mix(in srgb, var(--biz) 28%, #fff);
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.3, 1.5, .5, 1);
  scroll-behavior: smooth; overflow-x: clip;
}
.landing body { background: var(--paper); color: var(--ink); overflow-x: clip; }
.landing main { font-family: var(--display); }
.landing section { padding: clamp(4rem, 9vw, 8rem) 0; }
.landing .site-wrap { max-width: 1160px; }
.landing .narrow-wrap { max-width: 46rem; }

/* Header: a bar that turns to frosted glass once the page moves. */
.landing .site-head { position: sticky; top: 0; z-index: 40; background: transparent; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.landing .site-head.is-stuck { background: rgba(247, 246, 241, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--line); }
.landing .site-foot { background: var(--paper); }

.hp-h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; max-width: 16ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); text-wrap: balance; }
.hp-h2-xl { font-size: clamp(2.4rem, 6vw, 4.75rem); max-width: 14ch; }
.hp-h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.025em; font-weight: 650; margin: clamp(3rem, 6vw, 5rem) 0 1.5rem; }

.hp-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 1.5rem; border-radius: 999px; font: 600 1rem/1 var(--display); text-decoration: none; transition: transform .25s var(--spring), background .2s, box-shadow .25s, border-color .2s; }
.hp-btn:active { transform: scale(.96); }
.hp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hp-btn-main { background: var(--ink); color: #fff; }
.hp-btn-main:hover { background: #000000; transform: scale(1.035); box-shadow: 0 10px 30px -10px rgba(10, 10, 15, .55); }
.hp-btn-line { color: var(--ink); border: 1px solid #cfcdc6; background: rgba(255, 255, 255, .6); }
.hp-btn-line:hover { border-color: var(--ink); background: #fff; }
.hp-btn-lg { height: 58px; padding: 0 2.1rem; font-size: 1.1rem; }

/* Hero */
.landing .hero { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); background: none; }
.hero-top { text-align: center; padding: 0 1.25rem; display: grid; justify-items: center; }
.landing .hero h1 { font: 680 clamp(2.4rem, 5.8vw, 4.6rem)/1 var(--display); letter-spacing: -.045em; max-width: none; text-wrap: balance; }
.hero-word { display: block; height: 1.12em; overflow: hidden; white-space: nowrap; color: var(--biz); transition: color .6s; }
.hero-word b { display: block; font-weight: inherit; }
.hero-word b.out { animation: word-out .34s var(--ease) forwards; }
.hero-word b.in { animation: word-in .5s var(--spring) both; }
@keyframes word-out { to { transform: translateY(-70%); opacity: 0; filter: blur(6px); } }
@keyframes word-in { from { transform: translateY(70%); opacity: 0; filter: blur(6px); } }
.hero-link { margin-top: 1.1rem; display: inline-flex; align-items: center; height: 46px; padding: 0 1.15rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 24px -14px rgba(10, 10, 15, .4); font: 500 1rem/1 var(--font-mono); color: var(--ink); max-width: 100%; overflow: hidden; white-space: nowrap; }
.hero-link-host { color: var(--ink-2); }
.hero-caret { width: 2px; height: 1.15em; margin-left: 2px; background: var(--biz); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.hero-actions { margin-top: 1.1rem; display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.hero-lede { margin-top: 1.25rem; font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.landing .hero-small { padding-bottom: 0; }
.landing .hero-small h1 { font-size: clamp(2.3rem, 6vw, 4.5rem); max-width: 14ch; }

/* The stage: a phone, the team's day and what happens next, all wired together. */
.stage { position: relative; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; width: min(1180px, calc(100% - 2rem)); display: grid; grid-template-columns: 300px minmax(0, 1fr) 290px; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: start; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: 40px; background: radial-gradient(120% 90% at 50% 0%, var(--biz-soft), #fff 62%); border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 50px 100px -50px rgba(10, 10, 25, .38), 0 20px 40px -30px rgba(10, 10, 25, .3); transition: background .6s; animation: stage-in 1s var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(40px) scale(.965); } }
.stage-cap { font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: .9rem; text-align: center; }
.stage-phone { display: grid; justify-items: center; }

.iphone { position: relative; width: 272px; padding: 9px; border-radius: 48px; background: linear-gradient(145deg, #5d646a, #23282c 45%, #4a5157); box-shadow: 0 0 0 1px #15191c, 0 30px 50px -25px rgba(10, 10, 15, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.ip-btn { position: absolute; width: 3px; background: #33393e; border-radius: 2px; }
.ip-act { left: -3px; top: 96px; height: 22px; } .ip-vu { left: -3px; top: 138px; height: 40px; } .ip-vd { left: -3px; top: 188px; height: 40px; } .ip-pwr { right: -3px; top: 156px; height: 64px; }
.ip-screen { position: relative; height: 496px; border-radius: 39px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.ip-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 6px; font: 600 .8125rem/1 var(--display); color: var(--ink); }
.ip-island { width: 82px; height: 24px; border-radius: 14px; background: #05080a; }
.ip-batt { width: 23px; height: 11px; border-radius: 3.5px; border: 1px solid rgba(10, 10, 15, .45); padding: 1px; } .ip-batt i { display: block; width: 78%; height: 100%; border-radius: 2px; background: var(--ink); }
.ip-home { position: absolute; bottom: 7px; left: 50%; width: 96px; height: 4px; margin-left: -48px; border-radius: 2px; background: #0b1114; }
.ip-app { flex: 1; padding: 10px 16px 22px; display: flex; flex-direction: column; min-height: 0; }
.ip-head { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ip-head div { display: grid; min-width: 0; } .ip-head strong { font-size: 1rem; letter-spacing: -.01em; } .ip-head span { font-size: .75rem; color: var(--ink-2); }
.ip-head .ip-logo { font-size: 1rem; color: #fff; }
.ip-logo { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--biz); color: #fff; font-weight: 700; transition: background .6s; }
.ip-view { flex: 1; display: flex; flex-direction: column; min-height: 0; animation: view-in .42s var(--ease) both; }
.ip-view[hidden] { display: none; }
@keyframes view-in { from { opacity: 0; transform: translateX(18px); } }
.ip-label { font-size: .6875rem; font-weight: 600; color: var(--ink-2); margin: 12px 0 7px; }
.ip-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ip-days button { display: grid; gap: 3px; justify-items: center; padding: 7px 0; border: 0; border-radius: 11px; background: none; font: 600 .875rem/1 var(--display); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .25s var(--spring); }
.ip-days button small { font-size: .625rem; font-weight: 500; color: var(--ink-2); }
.ip-days button:hover:not(:disabled) { background: var(--biz-soft); }
.ip-days button:disabled { color: #adadb5; cursor: default; } .ip-days button:disabled small { color: #c4c2bb; }
.ip-days button[aria-pressed="true"] { background: var(--biz); color: #fff; transform: scale(1.06); } .ip-days button[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.ip-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.ip-slots button { height: 38px; border-radius: 11px; border: 1px solid var(--biz-mid); background: #fff; color: var(--ink); font: 600 .8125rem/1 var(--display); cursor: pointer; transition: background .2s, border-color .2s, transform .25s var(--spring); animation: slot-in .4s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes slot-in { from { opacity: 0; transform: translateY(8px); } }
.ip-slots button:hover, .ip-slots button:focus-visible { background: var(--biz-soft); border-color: var(--biz); }
.ip-slots button:active, .ip-confirm:active { transform: scale(.95); }
.ip-slots p { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-2); }
.ip-days button:focus-visible, .ip-slots button:focus-visible, .ip-confirm:focus-visible, .ip-again:focus-visible, .ip-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ip-back { display: inline-flex; align-items: center; gap: 2px; align-self: start; margin-top: 10px; padding: 4px 6px 4px 0; border: 0; background: none; color: var(--ink-2); font: 600 .75rem/1 var(--display); cursor: pointer; }
.ip-chosen { margin: 10px 0 12px; padding: 12px; border-radius: 13px; background: var(--biz-soft); font-size: .875rem; font-weight: 600; line-height: 1.35; }
.ip-field { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; min-height: 52px; }
.ip-field span { font-size: .6875rem; color: var(--ink-2); } .ip-field b { font-size: .875rem; font-weight: 600; min-height: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-confirm { margin-top: auto; height: 46px; border: 0; border-radius: 14px; background: var(--biz); color: #fff; font: 650 .9375rem/1 var(--display); cursor: pointer; transition: transform .25s var(--spring), filter .2s; }
.ip-confirm:hover { filter: brightness(1.08); }
.ip-done { align-items: center; justify-content: center; text-align: center; gap: 6px; }
.ip-done strong { font-size: 1.25rem; letter-spacing: -.02em; margin-top: 8px; } .ip-done span { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; max-width: 22ch; }
.ip-tick { width: 68px; height: 68px; fill: none; stroke: var(--biz); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ip-tick circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: draw .6s var(--ease) forwards; }
.ip-tick path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw .35s .45s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ip-again { margin-top: 14px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 .8125rem/1 var(--display); cursor: pointer; }
.ip-again:hover { border-color: var(--ink); }

.board { background: rgba(255, 255, 255, .86); border: 1px solid var(--line); border-radius: 24px; padding: 1.25rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.board-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.board-head div { display: grid; } .board-head strong { font-size: 1.15rem; letter-spacing: -.02em; } .board-head span { font-size: .8125rem; color: var(--ink-2); }
.board-bell { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--biz-soft); color: var(--biz); transition: background .6s, color .6s; }
.board-bell.ring .bell { animation: ring .9s var(--ease); transform-origin: 50% 12%; }
.board-bell.ring { animation: bell-pop .5s var(--spring); }
@keyframes ring { 0% { transform: rotate(0); } 15% { transform: rotate(22deg); } 35% { transform: rotate(-18deg); } 55% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@keyframes bell-pop { 40% { transform: scale(1.22); } }
.board-hours { display: flex; justify-content: space-between; margin: 0 34px 6px 96px; font-size: .6875rem; color: var(--ink-2); }
.board-rows { list-style: none; display: grid; gap: 10px; }
.board-rows li { display: grid; grid-template-columns: 86px minmax(0, 1fr) 24px; gap: 10px; align-items: center; }
.board-who { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; min-width: 0; }
.board-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--biz-soft); color: var(--biz); font-size: .8125rem; font-weight: 700; transition: background .4s, color .4s, box-shadow .4s; }
li.is-pick .board-av { background: var(--biz); color: #fff; box-shadow: 0 0 0 4px var(--biz-soft); }
.board-track { position: relative; height: 40px; border-radius: 12px; background: repeating-linear-gradient(90deg, #f1f0eb 0 calc(12.5% - 1px), #fff calc(12.5% - 1px) 12.5%); overflow: hidden; }
.board-block { position: absolute; top: 5px; bottom: 5px; border-radius: 8px; background: var(--biz-mid); transition: background .6s; animation: block-in .5s var(--ease) both; }
@keyframes block-in { from { opacity: 0; transform: scaleX(.6); } }
.board-block.ghost { background: none; border: 1.5px dashed var(--biz); animation: ghost 1.4s ease-in-out infinite; }
@keyframes ghost { 50% { opacity: .45; } }
.board-block.fresh { background: var(--biz); animation: drop .6s var(--spring) both; box-shadow: 0 6px 14px -6px var(--biz); }
@keyframes drop { from { transform: scale(.3); opacity: 0; } }
.board-rows b { font-size: .875rem; font-weight: 700; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.board-rows b.bump { animation: bump .5s var(--spring); color: var(--biz); }
@keyframes bump { 40% { transform: scale(1.6); } }
.board-foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); min-height: 3.4em; line-height: 1.4; }
.board-foot strong { color: var(--ink); }

.feed { display: grid; gap: 10px; align-content: start; min-height: 340px; }
.feed-empty { font-size: .875rem; color: var(--ink-2); text-align: center; padding: 1.5rem 1rem; border: 1px dashed #d0cec6; border-radius: 18px; }
.feed-card { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(10, 10, 15, .5); animation: card-in .55s var(--spring) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.feed-card .icon { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--biz-soft); color: var(--biz); }
.feed-card strong { display: block; font-size: .875rem; letter-spacing: -.005em; } .feed-card span { display: block; font-size: .75rem; color: var(--ink-2); line-height: 1.35; }

.stage-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(10, 10, 15, .28); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(10, 10, 15, .3); pointer-events: none; opacity: 0; z-index: 5; transition: transform .75s var(--ease), opacity .3s; }
.stage-cursor.on { opacity: 1; }
.stage-cursor.tap::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--biz); animation: tap .5s var(--ease) forwards; }
@keyframes tap { to { transform: scale(2.4); opacity: 0; } }
.ticket { position: fixed; z-index: 60; width: 44px; height: 26px; margin: -13px 0 0 -22px; border-radius: 8px; background: var(--biz); box-shadow: 0 12px 24px -8px var(--biz); pointer-events: none; }
.swap { animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* Try it: the visitor fills in their own details and sees the real booking page, drawn with the app's own styles. */
.landing .try { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.try .hp-h2 { max-width: none; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.try-grid { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.try-grid > * { min-width: 0; }
.try-form .try-label:first-child { margin-top: 0; }
.try-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin: 1rem 0 .4rem; }
.try-input { width: 100%; min-width: 0; height: 46px; padding: 0 .9rem; border-radius: 13px; border: 1.5px solid #d0cec6; background: #fff; font: 500 1rem/1 var(--font-sans); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.try-input::placeholder { color: #a5a5ad; text-transform: none; }
.try-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.try-select { padding-right: 2.2rem; cursor: pointer; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2355555f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .9rem center; }
.try-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.try-color { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.try-color input[type="color"] { flex: none; width: 46px; height: 46px; padding: 3px; border: 1.5px solid #d0cec6; border-radius: 13px; background: #fff; cursor: pointer; }
.try-code { font-family: var(--font-mono); font-size: .9375rem; text-transform: lowercase; padding: 0 .6rem; }
.try-upload { position: relative; display: flex; gap: .5rem; flex-wrap: wrap; }
.try-file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.try-chip { display: inline-flex; align-items: center; height: 42px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid #d0cec6; background: #fff; font: 600 .9375rem/1 var(--display); color: var(--ink); cursor: pointer; transition: border-color .2s, transform .25s var(--spring); }
.try-chip:hover { border-color: var(--ink); } .try-chip:active { transform: scale(.95); }
.try-upload:focus-within label.try-chip { outline: 2px solid var(--ink); outline-offset: 3px; }

.try-real { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 50px 100px -55px rgba(10, 10, 25, .5); }
.try-bar { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #f1f0eb; border-bottom: 1px solid var(--line); }
.try-bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #d3d1ca; }
.try-bar span { flex: 1; min-width: 0; margin-left: 10px; font: 500 .8125rem/1.2 var(--font-mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .try-bar b { color: var(--ink); font-weight: 600; }
.try-fit { overflow: hidden; }
.try-scale { width: 900px; transform-origin: 0 0; }
/* From here down it is the real booking page: same classes, same stylesheet. Only the frame is ours. */
.try-public { min-height: 0; font-family: var(--font-sans); color: var(--text); background: var(--tbg, var(--surface)); transition: background .3s; }
.try-public .try-main { width: 100%; display: grid; justify-items: center; }
.try-public .badge-line { color: var(--pub-muted, var(--text-muted)); }
.try-public .try-h1 { font-size: var(--text-xl); line-height: var(--line-xl); font-weight: var(--weight-xl); letter-spacing: -.015em; overflow-wrap: anywhere; }
.try-public h2 { font-size: var(--text-lg); line-height: var(--line-lg); font-weight: var(--weight-lg); }
.try-public .book-org { cursor: default; min-width: 0; } .try-public .book-org span:last-child { overflow-wrap: anywhere; }
.try-mark:empty { display: none; } .try-mark img { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 4px; }
.try-where { display: inline-flex; } .try-where[hidden] { display: none; }
.try-public [data-try-step][hidden] { display: none; }
.try-public [data-try-step="form"] h2 { margin-top: var(--space-3); }
.try-done { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) 0; }
.try-done-tick { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.is-narrow .book { grid-template-columns: minmax(0, 1fr); }
.is-narrow .book-info { border-right: 0; border-bottom: 1px solid var(--border); }
.is-narrow .pick { grid-template-columns: minmax(0, 1fr); }
.is-narrow .slots [data-slots-list] { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); max-height: none; }
.is-narrow .try-public { padding: var(--space-4) var(--space-3); }

/* Feature tiles: each one holds a small working piece of the product. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.tile { position: relative; grid-column: span 2; display: flex; flex-direction: column; min-width: 0; background: var(--card); border-radius: 30px; border: 1px solid #ebe9e2; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; isolation: isolate; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.tile::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%); opacity: 0; transition: opacity .4s; }
.tile:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -38px rgba(10, 10, 25, .5); border-color: #dcdad3; } .tile:hover::after { opacity: 1; }
.tile-art { position: relative; flex: 1; min-height: 232px; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(180deg, #f7f6f1, #fff); --tc: var(--accent); }
.tile-copy { padding: 1.35rem 1.6rem 1.6rem; }
.tile h3 { font-size: 1.35rem; letter-spacing: -.025em; font-weight: 650; line-height: 1.15; margin-bottom: .45rem; text-wrap: balance; }
.tile p { font: 400 1rem/1.5 var(--font-sans); color: var(--ink-2); max-width: 44ch; }
.tile-art *, .how-art * { animation-play-state: paused; }
.is-live .tile-art *, .is-live .how-art * { animation-play-state: running; }

/* Team: the dark one. A booking arrives and goes to whoever has the fewest. */
.t-team { background: var(--night); border-color: transparent; color: #fff; }
.t-team .tile-art { background: radial-gradient(70% 90% at 85% 0%, rgba(58, 104, 251, .5), transparent 70%), radial-gradient(50% 70% at 10% 100%, rgba(34, 228, 208, .18), transparent 70%); grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; justify-items: stretch; padding: 2rem; min-height: 260px; }
.t-team p { color: #b9b9c6; } .t-team::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(34, 228, 208, .16), transparent 62%); }
.tm-chip { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 .8125rem/1.3 var(--font-sans); }
.tm-chip i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(34, 228, 208, .2); }
.tm-chip span { color: var(--aqua); } .tm-chip b { font-weight: 600; color: #fff; }
.tm-chip.go { animation: tm-go 1.1s var(--ease); }
@keyframes tm-go { 0% { opacity: 0; transform: translateX(-24px) scale(.94); } 35% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateX(10px); } 100% { opacity: 1; transform: none; } }
.tm-rows { list-style: none; display: grid; gap: .65rem; min-width: 0; }
.tm-rows li { display: grid; grid-template-columns: 38px 3.4rem minmax(0, 1fr) 1.4rem; gap: .7rem; align-items: center; padding: .55rem .8rem; border-radius: 14px; border: 1px solid transparent; transition: background .4s, border-color .4s; }
.tm-rows li.got { background: rgba(255, 255, 255, .09); border-color: rgba(34, 228, 208, .5); }
.tm-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-weight: 700; transition: background .4s, color .4s; } li.got .tm-av { background: var(--aqua); color: var(--night); }
.tm-name { font: 600 .9375rem/1 var(--font-sans); }
.tm-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; } .tm-bar i { display: block; height: 100%; width: calc(var(--n, 3) * 12.5%); max-width: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--aqua)); transition: width .7s var(--spring); }
.tm-rows b { font: 700 .9375rem/1 var(--font-sans); text-align: right; font-variant-numeric: tabular-nums; color: #b9b9c6; } li.got b { color: var(--aqua); }

/* Three taps */
.tp { position: relative; width: min(100%, 15rem); display: grid; gap: .55rem; }
.tp-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; }
.tp-row span { height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid #e2e0d9; font: 600 .8125rem/1 var(--font-sans); color: var(--ink-2); }
.tp-row .tp-on { animation: tp-on 6s infinite; } .tp-row + .tp-row .tp-on { animation-delay: 1.1s; }
@keyframes tp-on { 0%, 10% { background: #fff; color: var(--ink-2); border-color: #e2e0d9; transform: scale(1); } 13% { transform: scale(.92); } 17%, 86% { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); transform: scale(1); } 94%, 100% { background: #fff; color: var(--ink-2); border-color: #e2e0d9; } }
.tp-btn { position: relative; height: 44px; border-radius: 13px; background: var(--ink); color: #fff; font: 650 .875rem/1 var(--display); overflow: hidden; animation: tp-btn 6s infinite; }
.tp-btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .35rem; animation: tp-a 6s infinite; } .tp-btn span + span { animation-name: tp-b; }
@keyframes tp-btn { 0%, 44% { background: var(--ink); } 50%, 88% { background: var(--accent); } 96%, 100% { background: var(--ink); } }
@keyframes tp-a { 0%, 44% { opacity: 1; transform: none; } 50%, 88% { opacity: 0; transform: translateY(-60%); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes tp-b { 0%, 44% { opacity: 0; transform: translateY(60%); } 50%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(60%); } }
.tp-dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(10, 10, 15, .22); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(10, 10, 15, .25); animation: tp-dot 6s var(--ease) infinite; }
@keyframes tp-dot { 0% { transform: translate(180px, 150px); opacity: 0; } 8%, 16% { transform: translate(92px, 19px); opacity: 1; } 26%, 34% { transform: translate(120px, 64px); opacity: 1; } 42%, 50% { transform: translate(120px, 112px); opacity: 1; } 60%, 100% { transform: translate(190px, 150px); opacity: 0; } }

/* Brand: drag the slider and the page changes colour. */
.br { width: min(100%, 15rem); display: grid; gap: .9rem; --tc: hsl(var(--hue, 225) 78% 52%); --tcs: hsl(var(--hue, 225) 90% 95%); }
.br-page { padding: .9rem; border-radius: 16px; background: #fff; border: 1px solid #e2e0d9; display: grid; gap: .7rem; box-shadow: 0 16px 30px -22px rgba(10, 10, 25, .5); }
.br-head { display: flex; align-items: center; gap: .55rem; } .br-head i { width: 30px; height: 30px; border-radius: 9px; background: var(--tc); } .br-head span { height: 9px; width: 55%; border-radius: 5px; background: #e2e0d9; }
.br-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; } .br-days b { aspect-ratio: 1; border-radius: 50%; background: var(--tcs); } .br-days b.on { background: var(--tc); }
.br-btn { height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tc); color: #fff; font: 650 .75rem/1 var(--display); }
.br-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 7px; cursor: pointer; background: linear-gradient(90deg, hsl(0 78% 52%), hsl(45 78% 52%), hsl(90 78% 45%), hsl(180 78% 42%), hsl(225 78% 52%), hsl(280 78% 52%), hsl(330 78% 52%), hsl(360 78% 52%)); }
.br-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--tc); box-shadow: 0 4px 12px rgba(10, 10, 25, .3); cursor: grab; }
.br-hue::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--tc); box-shadow: 0 4px 12px rgba(10, 10, 25, .3); cursor: grab; }
.br-hue:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Email */
.ml { width: min(100%, 15.5rem); padding: 1rem; border-radius: 18px; background: #fff; border: 1px solid #e2e0d9; display: grid; gap: .6rem; box-shadow: 0 16px 30px -22px rgba(10, 10, 25, .5); font-family: var(--font-sans); }
.ml-pill { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .6875rem; font-weight: 700; }
.ml-date { display: flex; align-items: center; gap: .7rem; padding: .55rem; border-radius: 12px; background: var(--accent-soft); }
.ml-cal { flex: none; width: 46px; border-radius: 10px; background: #fff; text-align: center; overflow: hidden; display: grid; } .ml-cal b { background: var(--accent); color: #fff; font-size: .5625rem; line-height: 15px; letter-spacing: .06em; } .ml-cal strong { font-size: 1.15rem; line-height: 1.3; } .ml-cal span { font-size: .5625rem; color: var(--ink-2); padding-bottom: 3px; }
.ml-when { display: grid; min-width: 0; } .ml-when strong { font-size: .8125rem; } .ml-when span { font-size: .6875rem; color: var(--ink-2); }
.ml-note { padding: .5rem .65rem; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: #f7f6f1; font-size: .6875rem; line-height: 1.4; } .ml-note b { display: block; color: var(--accent-text); }
.ml-chip { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 9px; background: var(--ink); color: #fff; font-size: .6875rem; font-weight: 650; animation: ml-chip 5s var(--spring) infinite; }
@keyframes ml-chip { 0%, 12% { opacity: 0; transform: translateY(10px) scale(.9); } 22%, 100% { opacity: 1; transform: none; } }

/* Open times */
.ct { width: min(100%, 15rem); display: grid; gap: .8rem; }
.ct-top { display: flex; align-items: flex-end; gap: .6rem; } .a-count { font: 700 4rem/.85 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .ct-cap { font: 500 .8125rem/1.25 var(--font-sans); color: var(--ink-2); padding-bottom: 2px; }
.ct-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 64px; }
.ct-bars i { height: calc(var(--h) * 10px + 4px); border-radius: 4px; background: var(--accent); opacity: .85; transform-origin: bottom; animation: ct-bar 5s var(--spring) infinite; animation-delay: calc(var(--i) * 45ms); }
.ct-bars i.none { background: #e9b949; height: 4px; opacity: 1; }
@keyframes ct-bar { 0% { transform: scaleY(0); } 14%, 100% { transform: scaleY(1); } }
.ct-warn { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font: 650 .75rem/1 var(--font-sans); } .ct-warn i { width: 7px; height: 7px; border-radius: 50%; background: #e9b949; }

/* Calendar sync */
.sy { width: min(100%, 26rem); display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; align-items: center; gap: .5rem; }
.sy-src { display: grid; gap: .5rem; } .sy-src span { padding: .5rem .9rem; border-radius: 999px; background: #fff; border: 1px solid #e2e0d9; font: 600 .8125rem/1 var(--font-sans); box-shadow: 0 8px 16px -12px rgba(10, 10, 25, .4); }
.sy-flow { display: grid; gap: .5rem; align-self: stretch; align-content: space-around; } .sy-flow i { height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent) 0 0 / 50% 100% no-repeat, #e2e0d9; animation: sy-flow 2.2s linear infinite; } .sy-flow i:nth-child(2) { animation-delay: .5s; } .sy-flow i:nth-child(3) { animation-delay: 1s; }
@keyframes sy-flow { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }
.sy-week { display: grid; grid-template-columns: repeat(5, 30px); gap: 5px; padding: .7rem; border-radius: 16px; background: #fff; border: 1px solid #e2e0d9; box-shadow: 0 16px 30px -22px rgba(10, 10, 25, .5); }
.sy-week i { height: 24px; border-radius: 7px; background: var(--accent-soft); } .sy-week i.busy { animation: sy-busy 6s infinite; } .sy-week i.busy:nth-of-type(3n) { animation-delay: .8s; } .sy-week i.busy:nth-of-type(4n) { animation-delay: 1.6s; }
@keyframes sy-busy { 0%, 12% { background: var(--accent-soft); } 22%, 88% { background: repeating-linear-gradient(135deg, #d3d1ca 0 4px, #eceae4 4px 8px); } 96%, 100% { background: var(--accent-soft); } }

.span-6 { grid-column: 1 / -1; }
.t-sync.span-6 { flex-direction: row; align-items: stretch; } .t-sync.span-6 .tile-art { order: 2; flex: 1.3; min-height: 210px; background: linear-gradient(90deg, #fff, #f7f6f1); } .t-sync.span-6 .tile-copy { flex: 1; align-self: center; padding: 2rem; }

/* Lives on your website: a prompt for the visitor's coding agent, or the two lines of HTML. */
.landing .embed { padding-top: 0; }
.embed-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.embed-grid > * { min-width: 0; }
.embed .hp-h2 { margin-bottom: 1.25rem; }
.embed-lede { font: 400 1.15rem/1.55 var(--font-sans); color: var(--ink-2); max-width: 40ch; }
.embed-steps { list-style: none; counter-reset: es; margin-top: 2rem; display: grid; gap: 1.1rem; }
.embed-steps li { counter-increment: es; display: grid; grid-template-columns: 2rem 1fr; column-gap: .9rem; }
.embed-steps li::before { content: counter(es); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: .875rem; }
.embed-steps b { font-weight: 650; letter-spacing: -.01em; } .embed-steps span { font: 400 .9375rem/1.45 var(--font-sans); color: var(--ink-2); }
.codebox { border-radius: 24px; background: #fff; color: var(--ink); border: 1px solid #e2e0d9; box-shadow: 0 50px 100px -55px rgba(10, 10, 25, .45); overflow: hidden; }
.codebox-tabs { display: flex; gap: .25rem; padding: .6rem .6rem 0; border-bottom: 1px solid #e2e0d9; background: #f7f6f1; }
.codebox-tabs button { padding: .7rem 1rem .8rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); font: 600 .875rem/1 var(--font-sans); cursor: pointer; transition: color .2s, border-color .2s; }
.codebox-tabs button:hover { color: var(--ink); } .codebox-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.codebox-panel { padding: 1.1rem; display: grid; gap: .9rem; } .codebox-panel[hidden] { display: none; }
.agent-copy { justify-self: start; display: inline-flex; align-items: center; gap: .7rem; height: 52px; padding: 0 1.15rem 0 1.05rem; border-radius: 999px; border: 1.5px solid #d6d4cc; background: #fff; color: var(--ink); font: 650 1rem/1 var(--font-sans); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s, background .2s, color .2s; }
.agent-copy:hover { border-color: var(--ink); box-shadow: 0 14px 28px -18px rgba(10, 10, 25, .5); transform: translateY(-1px); } .agent-copy:active { transform: scale(.97); }
.agent-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-copy.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.agent-logos { display: inline-flex; align-items: center; gap: .55rem; }
.agent-logos img { width: 26px; height: 26px; object-fit: contain; display: block; transition: filter .2s; }
.agent-logos i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #f1f0eb; color: var(--ink); font: 700 .7rem/1 var(--display); font-style: normal; }
.agent-copy.done .agent-logos img { filter: brightness(0) invert(1); } .agent-copy.done .agent-logos i { background: rgba(255, 255, 255, .2); color: #fff; }
.agent-copy > span:last-of-type { min-width: 6.4em; text-align: center; }
.agent-see summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; font: 600 .875rem/1 var(--font-sans); color: var(--accent-text); padding: .35rem 0; border-radius: 6px; }
.agent-see summary::-webkit-details-marker { display: none; }
.agent-see summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.agent-see[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.agent-see summary:hover { text-decoration: underline; } .agent-see summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-see .codebox-code { margin-top: .7rem; }
.agent-names { font-size: .8125rem; margin-top: -.3rem; }
.codebox-how { font: 400 .875rem/1.5 var(--font-sans); color: var(--ink-2); }
.codebox-code { position: relative; border-radius: 14px; background: #f7f6f1; border: 1px solid #e2e0d9; }
.codebox-code pre { margin: 0; padding: 1rem 1.1rem; max-height: 21rem; overflow: auto; font: 400 .8125rem/1.65 var(--font-mono); color: #23232b; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.codebox-code pre:focus-visible, .codebox-tabs button:focus-visible, .codebox-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.codebox-copy { position: absolute; top: .6rem; right: .6rem; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .75rem; border-radius: 9px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 600 .75rem/1 var(--font-sans); cursor: pointer; transition: background .2s, border-color .2s, transform .25s var(--spring); }
.codebox-copy:hover { background: #2a2a33; } .codebox-copy:active { transform: scale(.95); }
.codebox-copy.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.codebox-code:has(.codebox-copy) pre { padding-top: 3rem; }

/* Three steps: light cards that play one after another on a shared 12 second loop. */
.how-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.how-card { --d: 0s; position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 28px; animation: how-act 12s var(--d) infinite both; }
.how-2 { --d: 4s; } .how-3 { --d: 8s; }
.how-card + .how-card::before { content: ""; position: absolute; left: -1.75rem; top: 130px; width: 1.75rem; height: 2px; background: repeating-linear-gradient(90deg, #c9c7bf 0 5px, transparent 5px 9px); }
.how-art { position: relative; min-width: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; height: 262px; border-radius: 27px 27px 0 0; overflow: hidden; display: grid; place-items: center; padding: 1.25rem; background: linear-gradient(180deg, #f1f0ea, #fbfaf7); font: 500 .8125rem/1.3 var(--font-sans); color: var(--ink); }
.how-copy { padding: 1.4rem 1.6rem 1.7rem; }
.how-n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .8rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font: 700 .9375rem/1 var(--display); animation: how-n 12s var(--d) infinite both; }
.how-card h3 { font-size: 1.35rem; letter-spacing: -.025em; font-weight: 650; line-height: 1.15; margin-bottom: .45rem; text-wrap: balance; }
.how-card p { font: 400 1rem/1.5 var(--font-sans); color: var(--ink-2); }
.how-row .how-card, .how-row .how-n { animation-play-state: paused; } .how-row.is-live .how-card, .how-row.is-live .how-n { animation-play-state: running; }
.how-art * { animation-duration: 12s; animation-delay: var(--d); animation-iteration-count: infinite; animation-fill-mode: both; }
@keyframes how-act { 0%, 34%, 100% { border-color: var(--line); box-shadow: none; transform: none; } 3%, 31% { border-color: color-mix(in srgb, var(--accent) 55%, #fff); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-6px); } }
@keyframes how-n { 0%, 34%, 100% { background: var(--accent-soft); color: var(--accent-text); } 3%, 31% { background: var(--accent); color: #fff; } }
/* 1: a small event form fills itself in */
.hw-form { width: 100%; max-width: 250px; min-width: 0; display: grid; gap: 5px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 36px -24px rgba(10, 10, 25, .45); }
.hw-label { font-size: .6875rem; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.hw-input { height: 30px; display: flex; align-items: center; padding: 0 9px; border-radius: 8px; border: 1px solid #b9b7af; font-weight: 600; }
.hw-typed { font-style: normal; white-space: nowrap; animation-name: hw-type; animation-timing-function: steps(12); }
@keyframes hw-type { 0%, 10%, 100% { clip-path: inset(0 0 0 0); } 1.2% { clip-path: inset(0 100% 0 0); } }
.hw-chips { display: flex; align-items: center; gap: 5px; } .hw-chips i { font-style: normal; display: grid; place-items: center; width: 34px; height: 26px; border-radius: 8px; background: #f1f0ea; font-weight: 600; } .hw-chips em { font-style: normal; color: var(--ink-2); }
.hw-chips .hw-pick { animation-name: hw-pick; }
@keyframes hw-pick { 0%, 14%, 100% { background: var(--accent); color: #fff; transform: none; } 1.2%, 11% { background: #f1f0ea; color: var(--ink); } 12.5% { transform: scale(.88); } }
.hw-who { display: flex; align-items: center; gap: 6px; animation-name: hw-fade; } .hw-who i { font-style: normal; font-weight: 600; margin-right: 6px; }
@keyframes hw-fade { 0%, 19%, 100% { opacity: 1; } 1.2%, 15% { opacity: .25; } }
.hw-btn { justify-self: start; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 650; animation-name: hw-press; }
@keyframes hw-press { 0%, 23%, 28%, 100% { transform: none; background: var(--ink); } 25% { transform: scale(.9); } 26%, 27% { background: var(--accent); } }
/* 2: the link is copied and lands in three places */
.hw-share { width: 100%; max-width: 270px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hw-link { display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 32px -22px rgba(10, 10, 25, .45); color: var(--accent-text); }
.hw-link i { flex: 1; min-width: 0; font-style: normal; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-link b { position: relative; flex: none; width: 62px; height: 26px; border-radius: 999px; font-weight: 650; overflow: hidden; animation-name: hw-copy; }
.hw-link b span { position: absolute; inset: 0; display: grid; place-items: center; } .hw-link b span:first-child { animation-name: hw-swap-a; } .hw-link b span:last-child { animation-name: hw-swap-b; }
@keyframes hw-copy { 0%, 7%, 100% { background: var(--accent); color: #fff; transform: none; } 1.2%, 5% { background: var(--ink); color: #fff; } 6% { transform: scale(.88); } }
@keyframes hw-swap-a { 0%, 7%, 100% { opacity: 0; } 1.2%, 6% { opacity: 1; } }
@keyframes hw-swap-b { 0%, 7%, 100% { opacity: 1; } 1.2%, 6% { opacity: 0; } }
.hw-out { display: grid; grid-template-columns: 18px 1fr; column-gap: 9px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); animation-name: hw-pop-1; animation-timing-function: var(--spring); }
.hw-out .icon { grid-row: span 2; color: var(--accent-text); } .hw-out i { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--ink-2); } .hw-out em { font-style: normal; font-weight: 600; }
.hw-out-2 { animation-name: hw-pop-2; margin-left: 14px; } .hw-out-3 { animation-name: hw-pop-3; margin-left: 28px; }
@keyframes hw-pop-1 { 0%, 12%, 100% { opacity: 1; transform: none; } 1.2%, 9% { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes hw-pop-2 { 0%, 17%, 100% { opacity: 1; transform: none; } 1.2%, 14% { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes hw-pop-3 { 0%, 22%, 100% { opacity: 1; transform: none; } 1.2%, 19% { opacity: 0; transform: translateY(-10px) scale(.94); } }
/* 3: the customer's confirmation, then the business's notices */
.hw-got { width: 100%; max-width: 270px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hw-conf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 32px -22px rgba(10, 10, 25, .45); animation-name: hw-pop-a; animation-timing-function: var(--spring); }
.hw-tile { flex: none; width: 40px; display: grid; justify-items: center; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); } .hw-tile i { width: 100%; text-align: center; font: 700 .5625rem/1.5 var(--font-sans); font-style: normal; background: var(--accent); color: #fff; } .hw-tile b { font: 750 1.05rem/1.35 var(--display); }
.hw-conf-t { flex: 1; min-width: 0; display: grid; } .hw-conf-t b { font-weight: 650; font-size: .875rem; } .hw-conf-t i { font-style: normal; color: var(--ink-2); font-size: .75rem; }
.hw-ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; animation-name: hw-ok; animation-timing-function: var(--spring); }
.hw-note { display: grid; gap: 1px; margin-left: 18px; padding: 9px 12px; border-radius: 14px; background: var(--ink); color: #fff; animation-name: hw-pop-b; animation-timing-function: var(--spring); }
.hw-note b { font-size: .6875rem; color: var(--aqua); } .hw-note i { font-style: normal; }
.hw-note-2 { animation-name: hw-pop-c; margin-left: 36px; }
@keyframes hw-pop-a { 0%, 5%, 100% { opacity: 1; transform: none; } 1.2%, 2% { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes hw-ok { 0%, 10%, 100% { transform: none; } 1.2%, 7% { transform: scale(0); } }
@keyframes hw-pop-b { 0%, 16%, 100% { opacity: 1; transform: none; } 1.2%, 13% { opacity: 0; transform: translateY(-12px) scale(.94); } }
@keyframes hw-pop-c { 0%, 24%, 100% { opacity: 1; transform: none; } 1.2%, 21% { opacity: 0; transform: translateY(-12px) scale(.94); } }

/* The app tour: the real app's parts at real size, scaled to fit, played like a recording. */
.real .hp-h2 { margin-bottom: 1rem; }
.real-lede { font: 400 1.15rem/1.55 var(--font-sans); color: var(--ink-2); max-width: 52ch; margin-bottom: 2rem; }
.tour-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tour-chip, .tour-pause { height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid #d6d4cc; background: #fff; color: var(--ink); font: 600 .9375rem/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.tour-chip:hover, .tour-pause:hover { border-color: var(--ink); } .tour-chip:active, .tour-pause:active { transform: scale(.96); }
.tour-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tour-chip:focus-visible, .tour-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-pause { margin-left: auto; border-color: transparent; background: transparent; color: var(--ink-2); }
.tour-frame { position: relative; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 60px 120px -60px rgba(10, 10, 25, .5); min-height: 320px; }
.tour-stage { position: absolute; top: 0; left: 0; width: 1180px; height: 700px; transform-origin: 0 0; overflow: hidden; background: var(--surface); color: var(--text); font: var(--weight-base) var(--text-base)/var(--line-base) var(--font-sans); letter-spacing: normal; user-select: none; -webkit-user-select: none; cursor: default; }
.tour-stage p { max-width: none; }
.tour-screen { position: relative; height: 100%; overflow: hidden; background: var(--surface); }
.tour-status, .tour-home, .tour-ipb { display: none; }
.tour-status { height: 54px; padding: 18px 34px 8px; background: var(--bg); font-size: 1rem; } .tour-status .ip-island { width: 112px; height: 32px; border-radius: 18px; } .tour-status .ip-batt { width: 27px; height: 13px; }
.tour-home { bottom: 9px; width: 130px; margin-left: -65px; height: 5px; z-index: 6; }
.tour-ipb { width: 4px; } .tour-ipb-act { left: -4px; top: 150px; height: 30px; } .tour-ipb-vu { left: -4px; top: 210px; height: 58px; } .tour-ipb-vd { left: -4px; top: 282px; height: 58px; } .tour-ipb-pwr { right: -4px; top: 236px; height: 92px; }
.tour-bar { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #f1f0eb; border-bottom: 1px solid var(--line); } .tour-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3d1ca; } .tour-bar span { margin-left: 10px; font: 500 .75rem/1 var(--font-mono); color: var(--ink-2); }
.tour-top { display: none; height: 56px; align-items: center; justify-content: space-between; padding: 0 var(--space-4); background: var(--bg); border-bottom: 1px solid var(--border); }
.tour-burger { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
.tour-body { display: grid; grid-template-columns: var(--layout-sidebar) minmax(0, 1fr); height: calc(100% - 40px); }
.tour-side { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-3); background: var(--bg); border-right: 1px solid var(--border); }
.tour-nav { display: grid; gap: 2px; }
.tour-nav > span { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-muted); font-weight: 500; font-size: var(--text-sm); line-height: 1.5rem; transition: background .2s, color .2s, transform .15s; }
.tour-nav > span.is-on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.tour-me { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); }
.tour-main { position: relative; overflow: hidden; }
.tour-scene { position: absolute; inset: 0; padding: var(--space-6) var(--space-5); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .28s, transform .28s var(--ease), visibility 0s .28s; }
.tour-scene.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tour-h1 { font-size: var(--text-xl); line-height: var(--line-xl); font-weight: var(--weight-xl); letter-spacing: -.01em; }
.tour-h2 { font-size: 1.125rem; line-height: var(--line-lg); font-weight: 600; }
.tour-a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; font-size: var(--text-sm); }
.tour-small { font-size: var(--text-sm); line-height: var(--line-sm); }
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tour-stage .toggle { pointer-events: none; } .tour-stage .toggle .tour-on { background: var(--accent); } .tour-stage .toggle .tour-on::after { transform: translateX(1rem); }
.tour-stage .et-meta .icon { vertical-align: -2px; }
.tour-new { display: none; } .tour-new.is-in { display: flex; animation: tour-pop .55s var(--spring) both; box-shadow: 0 0 0 3px var(--accent-soft), 0 18px 36px -22px rgba(10, 10, 25, .5); }
@keyframes tour-pop { from { opacity: 0; transform: scale(.9) translateY(12px); } to { opacity: 1; transform: none; } }
.tour-card { padding: var(--space-5); display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.tour-field { display: grid; gap: 6px; min-width: 0; } .tour-field .label { font-size: var(--text-sm); font-weight: 600; }
.tour-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tour-input { position: relative; height: 2.625rem; display: flex; align-items: center; padding: 0 var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; white-space: nowrap; }
.tour-input i { font-style: normal; } .tour-ph { font-weight: 400; color: #8a8a94; } .tour-input.has-text .tour-ph { display: none; }
.tour-input.is-focus { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.tour-input.is-focus [data-type]::after { content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -3px; background: var(--text); animation: caret 1s steps(1) infinite; }
.tour-select { justify-content: space-between; } .tour-select .icon { transform: rotate(90deg); color: var(--text-muted); }
.tour-dots { display: flex; gap: 10px; align-items: center; height: 2.625rem; } .tour-dots i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); transition: box-shadow .2s, transform .15s; } .tour-dots i.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.tour-actions { display: flex; gap: var(--space-2); align-items: center; }
.tour-stage .is-pressed { transform: scale(.94); filter: brightness(.92); }
.tour-conn { display: none; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); } .tour-conn.is-in { display: flex; animation: tour-pop .55s var(--spring) both; }
.tour-conn-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); flex: none; } .tour-conn-t { flex: 1; min-width: 0; display: grid; font-size: var(--text-sm); } .tour-conn-t strong { font-size: var(--text-base); }
.tour-hours { gap: 0; } .tour-hours > .tour-h2 { margin-bottom: var(--space-3); } .tour-hours > div:last-child { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.tour-day { display: grid; grid-template-columns: 20px 118px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 53px; border-top: 1px solid var(--border); }
.tour-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-input); color: transparent; transition: background .15s, border-color .15s; } .tour-day.is-on .tour-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.tour-times { display: none; align-items: center; gap: var(--space-2); } .tour-day.is-on .tour-times { display: inline-flex; animation: tour-pop .35s var(--ease) both; } .tour-day.is-on .tour-off { display: none; }
.tour-times i { font-style: normal; padding: 6px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg); font-variant-numeric: tabular-nums; } .tour-times em { font-style: normal; }
.tour-off { font-size: var(--text-sm); }
.tour-tabs { margin-bottom: var(--space-4); } .tour-tabs span { padding: var(--space-3) 0; color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tour-tabs span.is-on { color: var(--text); border-bottom-color: var(--accent); }
.tour-date { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); margin: var(--space-4) 0 var(--space-2); }
.tour-meeting { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.tour-fresh { display: none; } .tour-fresh.is-in { display: block; animation: tour-drop .6s var(--spring) both; box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes tour-drop { from { opacity: 0; transform: translateY(-18px) scale(.97); } to { opacity: 1; transform: none; } }
.tour-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.tour-bars { height: 200px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--border); } .tour-bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 5px 5px 0 0; background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%; }
.tour-bars.is-in i { transform: none; transition: transform .7s var(--ease) calc(var(--k) * 45ms); }
.tour-toast { position: absolute; left: 50%; bottom: 22px; z-index: 4; display: flex; align-items: center; gap: var(--space-2); width: max-content; max-width: 86%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--text); color: var(--bg); font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-pop); opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s, transform .3s var(--spring); }
.tour-toast.is-on { opacity: 1; transform: translate(-50%, 0); } .tour-toast .icon { flex: none; color: var(--aqua); }
.tour-cursor { position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .3s; pointer-events: none; }
.tour-cursor.is-in { opacity: 1; } .tour-cursor svg { display: block; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transition: transform .12s; }
.tour-cursor i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; transform: scale(.3); }
.tour-cursor.is-down svg { transform: scale(.86); } .tour-cursor.is-down i { animation: tour-ring .4s ease-out; }
@keyframes tour-ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.5); } }
/* Phone layout: the app as it looks on a phone, inside a phone. */
.tour.is-phone .tour-frame { background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.tour.is-phone .tour-stage { overflow: visible; padding: 12px; border-radius: 64px; background: linear-gradient(145deg, #5d646a, #23282c 45%, #4a5157); box-shadow: 0 0 0 1px #15191c, 0 40px 70px -32px rgba(10, 10, 15, .65), inset 0 0 0 2px rgba(255, 255, 255, .16); }
.tour.is-phone .tour-screen { border-radius: 52px; }
.tour.is-phone .tour-status, .tour.is-phone .tour-home, .tour.is-phone .tour-ipb { display: flex; } .tour.is-phone .tour-home, .tour.is-phone .tour-ipb { display: block; }
.tour.is-phone .tour-toast { bottom: 30px; }
.tour.is-phone .tour-bar, .tour.is-phone .tour-side { display: none; } .tour.is-phone .tour-top { display: flex; }
.tour.is-phone .tour-body { grid-template-columns: minmax(0, 1fr); height: calc(100% - 110px); }
.tour.is-phone .tour-scene { padding: var(--space-5) var(--space-4); }
.tour.is-phone .page-head { margin-bottom: var(--space-4); } .tour.is-phone .page-head > .segmented { display: none; }
.tour.is-phone .tour-grid, .tour.is-phone .tour-row2 { grid-template-columns: minmax(0, 1fr); } .tour.is-phone .tour-grid { gap: var(--space-3); }
.tour.is-phone .tour-card { padding: var(--space-4); gap: var(--space-3); } .tour.is-phone .tour-hours { gap: 0; }
.tour.is-phone .tour-day { grid-template-columns: 20px 84px minmax(0, 1fr); gap: var(--space-2); min-height: 50px; } .tour.is-phone .tour-times i { padding: 5px 7px; font-size: var(--text-sm); }
.tour.is-phone .tour-meeting { flex-wrap: wrap; gap: 2px var(--space-3); } .tour.is-phone .meeting-time { min-width: 100%; } .tour.is-phone .meeting-more { display: none; }
.tour.is-phone .tour-date { margin-top: var(--space-3); }
.tour.is-phone .tour-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .tour.is-phone .stat { padding: var(--space-3); } .tour.is-phone .tour-bars { height: 130px; gap: 5px; }
.tour.is-phone .tour-cursor svg { display: none; } .tour.is-phone .tour-cursor i { opacity: .55; transform: none; } .tour.is-phone .tour-cursor.is-down i { animation: none; transform: scale(.75); opacity: .9; }
.tour.is-phone .tour-small { display: none; }

/* Pricing */
.landing .pricing-page { padding-top: clamp(2rem, 4vw, 3rem); }
.bill { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #eae8e1; margin-bottom: 1.75rem; }
.bill button { position: relative; z-index: 1; height: 38px; padding: 0 1.25rem; border: 0; background: none; border-radius: 999px; font: 600 .9375rem/1 var(--display); color: var(--ink-2); cursor: pointer; transition: color .25s; }
.bill button[aria-pressed="true"] { color: var(--ink); } .bill button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bill i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(10, 10, 15, .16); transition: transform .4s var(--spring); }
.bill[data-bill="year"] i { transform: translateX(100%); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.plan { background: #fff; border-radius: 28px; padding: 1.75rem; display: flex; flex-direction: column; border: 1px solid transparent; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(10, 10, 25, .45); border-color: var(--line); }
.plan-hot { background: var(--night); color: #fff; }
.plan h3 { font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.plan-flag { font-size: .75rem; font-weight: 650; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; background: var(--aqua); color: var(--night); }
.plan-blurb { font: 400 .9375rem/1.45 var(--font-sans); color: var(--ink-2); margin-top: .3rem; min-height: 2.9em; } .plan-hot .plan-blurb, .plan-hot .plan-price span, .plan-hot li { color: #b9b9c6; }
.plan-price { margin: 1.1rem 0 1.25rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-height: 4.2rem; }
.plan-price strong { font: 680 3.4rem/1 var(--display); letter-spacing: -.05em; } .plan-price span { font: 400 .9375rem/1.3 var(--font-sans); color: var(--ink-2); }
.plan-price .flip { animation: flip .45s var(--spring); display: inline-block; }
@keyframes flip { from { opacity: 0; transform: translateY(40%); } }
.plan-hot .hp-btn-main { background: #fff; color: var(--night); } .plan-hot .hp-btn-main:hover { background: var(--aqua); }
.plan-lead { margin: 1.5rem 0 .75rem; font-size: .875rem; font-weight: 650; }
.plan ul { list-style: none; display: grid; gap: .6rem; font: 400 .9375rem/1.4 var(--font-sans); color: var(--ink-2); }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: .6rem; align-items: start; } .plan li .icon { margin-top: 3px; color: var(--accent); } .plan-hot li .icon { color: var(--aqua); }
.plans-note { margin-top: 1.25rem; font: 400 .9375rem/1.5 var(--font-sans); color: var(--ink-2); max-width: 60ch; }

.seat { background: #fff; border-radius: 28px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.5rem; }
.seat-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: .75rem; } .seat-label output { font: 680 2rem/1 var(--display); letter-spacing: -.04em; }
.seat-range { width: 100%; accent-color: var(--accent); height: 28px; }
.seat-bars { display: grid; gap: 1rem; }
.seat-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 7.5rem 10.5rem; gap: 1rem; align-items: center; font: 400 .9375rem/1.3 var(--font-sans); }
.seat-row strong { font-weight: 650; } .seat-row em { font-style: normal; color: var(--ink-2); }
.seat-track { height: 14px; border-radius: 7px; background: #f1f0eb; overflow: hidden; } .seat-fill { height: 100%; border-radius: 7px; transition: width .5s var(--ease); }
.seat-fill-them { background: #9fb3ba; width: 40%; } .seat-fill-us { background: var(--accent); width: 12%; }
.cmp-wrap { overflow-x: auto; background: #fff; border-radius: 28px; padding: .5rem 1.5rem; }
.cmp { width: 100%; border-collapse: collapse; font: 400 .9375rem/1.4 var(--font-sans); min-width: 560px; }
.cmp th, .cmp td { padding: .85rem .5rem; border-bottom: 1px solid var(--line); text-align: center; } .cmp tr:last-child > * { border-bottom: 0; }
.cmp thead th { font: 650 1rem/1 var(--display); } .cmp th[scope="row"] { text-align: left; font-weight: 500; } .cmp td .icon { color: var(--accent); } .cmp-no { color: #adadb5; }

/* The link to the VINU website business */
.landing .studio { padding-top: 0; }
.studio-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.75rem, 5vw, 4rem); border-radius: clamp(28px, 4vw, 48px); background: var(--night); color: #fff; overflow: hidden; }
.studio-mark { display: block; margin-bottom: 1.5rem; color: #f4f3ee; }
.studio .hp-h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin-bottom: 1rem; max-width: 13ch; }
.studio-copy p { font: 400 1.0625rem/1.6 var(--font-sans); color: #b9b9c6; max-width: 44ch; margin-bottom: 1.75rem; }
.hp-btn-light { background: #fff; color: var(--night); } .hp-btn-light:hover { background: var(--aqua); transform: scale(1.035); }
.studio-card { position: relative; background: #07070a; isolation: isolate; }
.studio-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 20%, rgba(61, 107, 255, .42), transparent 70%), radial-gradient(50% 70% at 60% 100%, rgba(34, 228, 208, .2), transparent 70%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 100%; }
.studio-card::after { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; left: var(--mx, 70%); top: var(--my, 40%); margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 228, 208, .16), transparent); pointer-events: none; transition: left .25s var(--ease), top .25s var(--ease); }
.studio-art { display: block; perspective: 1200px; text-decoration: none; }
.studio-site { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #0a0a0f; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 50px 90px -30px rgba(61, 107, 255, .6), 0 0 0 1px rgba(0, 0, 0, .6); transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) scale(var(--sc, 1)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); will-change: transform; }
.studio-art:hover .studio-site, .studio-art:focus-visible .studio-site { --sc: 1.03; box-shadow: 0 60px 110px -30px rgba(34, 228, 208, .5), 0 0 0 1px rgba(0, 0, 0, .6); }
.studio-art:focus-visible { outline: 2px solid var(--aqua); outline-offset: 8px; border-radius: 18px; }
.studio-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #141419; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.studio-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .studio-bar i:nth-child(2) { background: #febc2e; } .studio-bar i:nth-child(3) { background: #28c840; }
.studio-bar span { margin-left: 8px; font: 500 .75rem/1 var(--font-mono); color: #9a9aa8; }
.studio-site img { display: block; width: 100%; height: auto; }
.studio-glare { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 60%); mix-blend-mode: screen; pointer-events: none; }

/* FAQ and the close */
.landing .faq { gap: 0; border-top: 1px solid var(--line); }
.landing .faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.landing .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; }
.landing .faq summary::-webkit-details-marker { display: none; }
.landing .faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease); }
.landing .faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.landing .faq p { margin: 0 0 1.25rem; font: 400 1rem/1.6 var(--font-sans); color: var(--ink-2); max-width: 62ch; }
.landing .faq summary:hover { color: var(--accent-text); }
.landing .final { text-align: center; padding-bottom: clamp(5rem, 10vw, 9rem); }
.landing .final h2 { font-size: clamp(2.4rem, 6vw, 4.75rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.02; margin-bottom: 2rem; }
.final-mark { display: block; margin-bottom: 1.5rem; } .final-mark svg { transition: transform .5s var(--spring); }
.final:hover .final-mark svg { transform: translateY(-6px) rotate(-4deg); }
.final-note { margin-top: 1rem; font: 400 .9375rem/1.4 var(--font-sans); color: var(--ink-2); }

@media (max-width: 1040px) {
  .stage { grid-template-columns: 290px minmax(0, 1fr); }
  .stage-feed { grid-column: 1 / -1; } .feed { min-height: 0; grid-template-columns: repeat(2, 1fr); } .feed-empty { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .stage { grid-template-columns: minmax(0, 1fr); border-radius: 30px; padding: 1.25rem .9rem; }
  .feed { grid-template-columns: 1fr; }
  .board-rows li { grid-template-columns: 74px minmax(0, 1fr) 18px; gap: 8px; } .board-hours { margin-left: 82px; margin-right: 26px; }
  .try-grid { grid-template-columns: minmax(0, 1fr); } .try-row { grid-template-columns: 1fr; } .try .hp-h2 { max-width: none; }
  .bento { grid-template-columns: minmax(0, 1fr); } .tile, .span-3, .span-4 { grid-column: auto; } .t-team .tile-art { grid-template-columns: minmax(0, 1fr); } .t-sync.span-6 { flex-direction: column; } .t-sync.span-6 .tile-art { order: 0; } .embed-grid { grid-template-columns: minmax(0, 1fr); } 
  .plans, .studio-card { grid-template-columns: 1fr; } .how-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .how-card { --d: 0s; } .how-card + .how-card::before { display: none; } .tour-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 2px 1rem 6px; scrollbar-width: none; } .tour-pause { margin-left: 0; } .studio-site { --rx: 0deg; --ry: 0deg; }
  .plan-blurb, .plan-price { min-height: 0; }
  .seat-row { grid-template-columns: 1fr auto; gap: .35rem 1rem; } .seat-row span, .seat-track { grid-column: 1 / -1; } .seat-row em { text-align: right; }
  .cmp-wrap { padding: .25rem .75rem; } .cmp { min-width: 0; font-size: .8125rem; } .cmp th, .cmp td { padding: .7rem .25rem; } .cmp thead th { font-size: .875rem; }
  .landing .site-head nav a[href="/pricing"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing { scroll-behavior: auto; }
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; }
  .ip-tick circle, .ip-tick path { stroke-dashoffset: 0; }
  .tp-dot { display: none; }
  .hero-caret, .stage-cursor { display: none; } .studio-site { transform: none; }
}