/* Layout: the picker is the hero; one stage below it shows the founder's page and their dashboard
   (side by side on desktop, a two-card swipe on a phone); then the two doors to start. */
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.nav .btn { height: 2.4rem; font-size: 0.875rem; }

.hero { display: grid; gap: 0.9rem; padding-block: clamp(0.5rem, 3vw, 2.5rem) 1rem; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 450; font-size: clamp(2.35rem, 1.6rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--muted); }
.hero p { margin: 0; color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); max-width: 34rem; }

/* Business-type picker: a swipe rail on phones, wrapping chips on desktop */
.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
.chips { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 0.25rem 1rem 0.6rem; margin-inline: -1rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 52rem) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip { scroll-snap-align: start; flex: none; display: inline-flex; align-items: center; gap: 0.55rem; height: 3rem; padding: 0 1rem 0 0.8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 0.95rem; white-space: nowrap; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--spring); }
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip .glyph { width: 1.15rem; height: 1.15rem; }

/* Stage */
.stage { margin-top: 0.5rem; }
.stage-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); margin-bottom: 0.75rem; }
.stage-tabs button { height: 2.2rem; padding: 0 1rem; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font-size: 0.875rem; }
.stage-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
.slides::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; min-width: 0; display: grid; gap: 0.5rem; }
.slide .browser { height: 27rem; }
html, body { overflow-x: clip; }
.cap { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 52rem) {
  .stage-tabs { display: none; }
  .slides { grid-auto-flow: row; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .slide .browser { height: 33rem; }
}
.frame-body > * { animation: morph-in 420ms var(--ease) both; }
@keyframes morph-in { from { opacity: 0; transform: translateY(8px) scale(0.99); filter: blur(3px); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }

/* Make it yours */
.yours { display: grid; gap: 0.75rem; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
@media (min-width: 52rem) { .yours { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; } }
.yours .label { white-space: nowrap; }
.yours input { width: 100%; min-width: 0; height: 3rem; padding: 0 0.9rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); font-size: 1.05rem; }
.yours input:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.yours .host { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yours .host b { color: var(--ink); font-weight: 500; }
.yours.what { margin-top: 0.75rem; }
.tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }

/* Two minutes, two doors */
.go { padding-block: clamp(3rem, 7vw, 5.5rem); display: grid; gap: 1.5rem; }
.go h2 { margin: 0; font-family: var(--serif); font-weight: 450; font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; max-width: 18ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: s; }
.steps li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.steps li::before { counter-increment: s; content: counter(s); width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font-size: 0.8rem; color: var(--muted); transition: all 240ms var(--ease); }
.steps li.done::before { content: "✓"; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.steps li span { min-width: 0; }
.steps li small { display: block; color: var(--muted); font-size: 0.875rem; }
.steps time { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.total { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.total b { color: var(--ink); font-weight: 500; }
.doors { display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .go-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; } .doors { grid-template-columns: 1fr; } }
.door { display: grid; gap: 0.75rem; padding: 1.25rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); }
.door h3 { margin: 0; font-family: var(--serif); font-weight: 450; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.015em; }
.door p { margin: 0; color: var(--muted); }
.door.agent { background: var(--d-bg); color: var(--d-ink); border-color: var(--d-bg); }
.door.agent p, .door.agent .works { color: var(--d-muted); }
.door.agent .btn { background: var(--d-ink); color: var(--d-bg); border-color: var(--d-ink); }
.copyline { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.35rem 0.35rem 0.35rem 0.8rem; border: 1px solid var(--d-line-2); border-radius: 10px; background: #0e0e0f; }
.copyline code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--d-ink); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.copyline code::before { content: "› "; color: var(--d-faint); }
.copyline button { flex: none; height: 2.1rem; padding: 0 0.8rem; border: 1px solid var(--d-line-2); border-radius: 7px; background: none; color: var(--d-ink); cursor: pointer; font-size: 0.8rem; }
.works { font-size: 0.8125rem; }

/* What you get, and the footer */
.get { display: grid; gap: 1.5rem; padding-block: 2.5rem 3rem; border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .get { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.get div { display: grid; gap: 0.35rem; }
.get b { font-family: var(--serif); font-weight: 450; font-size: 1.35rem; line-height: 1.15; }
.get span { color: var(--muted); }
footer { padding-block: 1.5rem 7rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
@media (min-width: 52rem) { footer { padding-bottom: 2rem; } }

/* Phone: a bottom bar that carries the one action once someone has picked */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: rgba(246, 245, 241, 0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 0.75rem; transform: translateY(110%); transition: transform 320ms var(--spring); }
.dock.show { transform: none; }
.dock div { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.3; }
.dock div b { display: block; color: var(--ink); font-weight: 500; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .btn { height: 2.75rem; }
@media (min-width: 52rem) { .dock { display: none; } }

/* Exploration aid: shows the tracked click each action would send */
.track-toast { position: fixed; right: 1rem; top: 3.5rem; z-index: 90; display: grid; gap: 0.35rem; pointer-events: none; }
.track-toast span { padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--d-bg); color: var(--sage); font-family: var(--mono); font-size: 0.72rem; animation: admin-in 260ms var(--ease) both; }
.explore-bar label { display: inline-flex; gap: 0.35rem; align-items: center; cursor: pointer; }
/* Phone app: three screens on a stack. Pick (tiles), Preview (swipe page / dashboard), Go (two doors). */
.a-hello { padding: 0.25rem 0.25rem 1rem; display: grid; gap: 0.35rem; }
.a-hello h1 { margin: 0; font-family: var(--serif); font-weight: 450; font-size: 2.35rem; line-height: 1; letter-spacing: -0.03em; }
.a-hello p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 0.6rem; }
.tile { display: grid; grid-template-rows: auto 1fr auto; gap: 0.45rem; min-height: 6.6rem; padding: 0.8rem; border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(29, 29, 27, 0.35); text-align: left; cursor: pointer; transition: transform 160ms var(--spring), box-shadow 160ms var(--ease); animation: tile-in 480ms var(--spring) both; }
.tile .mk { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 11px; }
.tile .mk .glyph { width: 1.2rem; height: 1.2rem; stroke-width: 1.8; }
.tile b { font-weight: 600; font-size: 0.95rem; line-height: 1.2; align-self: end; }
.tile small { color: var(--faint); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.a-seg { display: flex; margin: 0 1rem 0.6rem; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.a-seg button { flex: 1; height: 2.3rem; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease); }
.a-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.pager { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 2rem); gap: 0.6rem; padding: 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pager::-webkit-scrollbar { display: none; }
.pager.can-drag { cursor: grab; }
.pager.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.pager.dragging .pcard { pointer-events: none; }
.pager .pcard.peek { cursor: pointer; }
.pcard { scroll-snap-align: center; min-width: 0; position: relative; border-radius: 24px; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(29, 29, 27, 0.45); }
.pcard > .tag { position: absolute; z-index: 3; top: 0.7rem; right: 0.7rem; }
.pcard .pc-url { position: absolute; z-index: 3; left: 0.7rem; top: 0.7rem; max-width: 60%; height: 1.4rem; display: flex; align-items: center; padding: 0 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--ink); font-family: var(--mono); font-size: 0.66rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; backdrop-filter: blur(6px); }
.pcard .fsite { padding-top: 2rem; }
.pcard .fsite-feats { grid-template-columns: 1fr; }
.pcard .adm { padding-top: 1.6rem; }
.pcard .adm-tiles { grid-template-columns: 1fr 1fr; }
.pcard .pc-body { height: 100%; }
.pcard .pc-body > * { animation: morph-in 420ms var(--ease) both; }
.dots2 { display: flex; justify-content: center; gap: 6px; padding: 0.6rem 0 0; }
.dots2 i { cursor: pointer; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: width 240ms var(--ease), background 240ms var(--ease); }
.dots2 i.on { width: 18px; border-radius: 3px; background: var(--ink); }
.namefield { display: flex; align-items: center; gap: 0.6rem; height: 3.1rem; padding: 0 0.4rem 0 1rem; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.namefield label { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
#m-what-row { height: auto; min-height: 3.1rem; padding-block: 0.55rem; }
.namefield textarea { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font-size: 1rem; outline: none; }
.namefield input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 1rem; outline: none; }
.namefield:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.a-go h2 { margin: 0.25rem 0 0.4rem; font-family: var(--serif); font-weight: 450; font-size: 2.1rem; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.a-go .steps li { padding: 0.75rem 0; }
.a-go .door { border-radius: 20px; padding: 1.1rem; gap: 0.6rem; }
.a-go .door h3 { font-size: 1.45rem; }
.a-go .door .btn { height: 3.25rem; border-radius: 14px; }
.a-go .doors { margin-top: 1.1rem; }
.a-sum { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.a-sum .mk { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 11px; flex: none; }
.a-sum div { min-width: 0; }
.a-sum b { display: block; font-weight: 600; }
.a-sum small { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); overflow-wrap: anywhere; }