/* Landing page only. The design system lives in app.css. */

/* The glow is wider than the column. Clipping it at .hero cut hard edges 16px inside a phone
   screen; main clips it instead, at the screen edge, and overflow-x: clip adds no scrollbar. */
main { overflow-x: clip; }
.hero { position: relative; padding: 70px 0 56px; text-align: center; }
.aura {
  position: absolute; left: 50%; top: -290px; width: 900px; height: 620px; transform: translateX(-50%);
  pointer-events: none; z-index: -1; filter: blur(66px); opacity: .6;
  background:
    radial-gradient(42% 46% at 34% 46%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 68%),
    radial-gradient(40% 44% at 66% 40%, color-mix(in srgb, var(--accent-2) 27%, transparent) 0%, transparent 70%);
  animation: drift 17s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translateX(-46%) translateY(26px) scale(1.1); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 6px 15px 6px 7px;
  border-radius: 30px; font-size: 13px; font-weight: 550; background: var(--surface);
  border: 1px solid var(--border); color: var(--muted); box-shadow: var(--shadow-sm);
}
.eyebrow b { background: var(--grad-fill); color: #fff; padding: 3px 9px; border-radius: 20px; font-size: 12px; }
.hero-copy h1 { font-size: clamp(34px, 6vw, 62px); font-weight: 800; letter-spacing: -.038em; line-height: 1.12; max-width: 17ch; margin: 0 auto 22px; }
/* background-clip:text only paints the line box, so descenders need room. */
.lit { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: .12em; margin-bottom: -.12em; }
.lede { font-size: clamp(16.5px, 2vw, 19px); color: var(--muted); max-width: 56ch; margin: 0 auto 30px; line-height: 1.6; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.trust { margin-top: 18px; font-size: 13px; color: var(--faint); }

/* Two phones from one team. The stage reserves their space, so nothing shifts when they fill in. */
.hero-stage { position: relative; width: 500px; max-width: 100%; height: 650px; margin: 48px auto 0; }
.hold { position: absolute; }
.hold-a { left: 0; bottom: 4px; z-index: 1; }
.hold-b { right: 6px; top: 0; }
.hold-a .phone { --s: .9; --ry: -13deg; --bob: 6.4s; }
.hold-b .phone { --s: .76; --ry: -22deg; --rx: 6deg; --bob: 7.9s; --bd: -3.2s; }
.phone-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 30px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.hold-a .phone-tag { left: 22px; top: -22px; }
.hold-b .phone-tag { right: 14px; bottom: -20px; }
@media (min-width: 960px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 500px; column-gap: 40px; align-items: center; padding: 26px 0 40px; text-align: left; }
  .hero-copy h1 { font-size: clamp(42px, 4.7vw, 58px); margin-inline: 0; }
  .hero .lede { margin-inline: 0; font-size: 18px; }
  .hero .hero-cta { justify-content: flex-start; }
  .hero-stage { margin: 0; }
}

/* the interactive demo */
/* In dark mode --danger-soft (#331817) reads as muddy brown behind a row; a little of the dark red mixed into the
   card reads as a clear, quiet rose instead. The phone mockup's sinking row below uses the same. */
:root[data-theme="dark"] .demo-row.sank { background: color-mix(in srgb, var(--danger) 20%, var(--surface)); }
@media (pointer: coarse) { .demo-up { width: var(--tap); height: var(--tap); } }

/* sections */
section { padding: 70px 0; scroll-margin-top: 70px; }
.head { text-align: center; max-width: 56ch; margin: 0 auto 36px; }
.head h2 { font-size: clamp(25px, 3.6vw, 36px); letter-spacing: -.035em; margin-bottom: 12px; line-height: 1.12; }
.head p { color: var(--muted); font-size: 16.5px; }
.kicker, .head .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }  /* .head p would otherwise win */
.story { background: var(--bg-sunk); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.quote { max-width: 760px; margin: 0 auto; font-size: clamp(19px, 2.6vw, 26px); font-weight: 600; letter-spacing: -.024em; line-height: 1.45; text-align: center; text-wrap: balance; }
.quote em { font-style: normal; color: var(--accent); }
.deadlist { max-width: 660px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 4px; }
.dead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.dead-x { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }  /* an SVG cross: a text x sat low in the circle */
.dead-t { font-size: 14.5px; font-weight: 550; }
.dead-w { margin-left: auto; font-size: 13px; color: var(--faint); white-space: nowrap; }

@media (min-width: 900px) { .grid.feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid.feats.three { margin-top: 26px; }  /* the three beats, under the list you can move */

/* Something to press at the end of a section, not only at the ends of the page. */
.section-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; text-align: center; }
.show .section-cta { grid-column: 1 / -1; }  /* the section is two columns; the call sits under both */
.section-cta .cta-note { font-size: 13.5px; color: var(--faint); }

/* The history screen closes the section it belongs to, with one line under it. */
.desk-note { margin-top: -6px; font-size: 14px; }
.feat { padding: 22px; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.feat-icon { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.feat h3 { margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 14.5px; }

.compare { max-width: 760px; margin: 0 auto; overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.compare-row span { padding: 13px 18px; font-size: 14.5px; }
.compare-row span:first-child { color: var(--muted); }
.compare-row span:last-child { font-weight: 600; border-left: 1px solid var(--border); }
.compare-row + .compare-row { border-top: 1px solid var(--border); }
.compare-head { background: var(--surface-2); }
.compare-head span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint) !important; }

/* Fields: the compare table, and Mia's tablet beside it (under it on narrow screens). */
.fields-show { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 56px; row-gap: 36px; align-items: center; }
.fields-show .compare { margin: 0; }
.slate { position: relative; isolation: isolate; padding-block: 16px; }
@media (max-width: 960px) {
  .fields-show { grid-template-columns: minmax(0, 1fr); }
  .fields-show .compare { margin-inline: auto; width: 100%; }
}

/* Templates: a window whose tabs are the three templates, building itself piece by piece. The height is
   fixed at what the tallest one needs, so nothing on the page moves as pieces arrive or the tab changes. */
.kits { max-width: 780px; margin: 0 auto; }
.board { position: relative; overflow: hidden; height: 302px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.board-tabs { display: flex; gap: 4px; padding: 7px 8px 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.kit-tab {
  flex: 1; min-width: 0; min-height: 38px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--muted); background: none; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.kit-tab.on { color: var(--accent); background: var(--surface); border-color: var(--border); }
.board-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px 18px 56px; }
.board-col { display: grid; gap: 7px; align-content: start; }
.board-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.board-label strong { color: var(--text); letter-spacing: 0; }

/* A piece waits out of sight until the build reaches it. */
.pop { opacity: 0; translate: 0 10px; transition: opacity .45s var(--ease), translate .45s var(--ease); }
.pop.in { opacity: 1; translate: none; }

.board-proj { display: flex; align-items: baseline; gap: 7px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); font-size: 13.5px; font-weight: 600; }
.board-proj span { font-size: 12px; font-weight: 400; color: var(--faint); margin-left: auto; }
.board-proj.open { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.board-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; }
.board-n { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.board-line { display: flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.board-line::before, .board-line::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
/* The payoff: once the team has built itself, the way to have one. Visible without JavaScript, and
   held back only while the build is actually running. */
.board-cta { position: absolute; left: 50%; bottom: 13px; translate: -50% 0; display: flex; align-items: center; gap: 11px; max-width: calc(100% - 24px); transition: opacity .45s var(--ease), translate .45s var(--ease); }
.board.live .board-cta { opacity: 0; translate: -50% 10px; }
.board.live.done .board-cta { opacity: 1; translate: -50% 0; }
.board-cta .btn { white-space: nowrap; box-shadow: var(--shadow-lg); }
.cta-note { font-size: 12px; color: var(--faint); white-space: nowrap; }
@media (max-width: 620px) {
  .board-cta { flex-direction: column; gap: 5px; text-align: center; }
  .cta-note { white-space: normal; }
}
@media (max-width: 620px) {
  .board { height: 505px; }
  .board-tabs { flex-wrap: wrap; }
  .kit-tab { flex: 1 0 auto; }
  .board-body { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 14px 64px; }
}

/* Reviews: a shelf of cards, each one somebody's own words. */
/* One review should not stretch across the page, and one card should not sit off to the left of an empty
   grid track either: a wrapping row centres whatever there is, from one card to six. */
.review-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.review-card { flex: 1 1 270px; max-width: 360px; }
.review-card { margin: 0; display: grid; gap: 10px; align-content: start; }
.review-stars { color: #f0a500; letter-spacing: 2px; font-size: 15px; }
.review-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.review-card figcaption { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }

.switch { position: relative; display: inline-flex; padding: 4px; margin: 0 auto 26px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 30px; }
.switch-glide { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .34s var(--spring), width .34s var(--spring); }
.switch button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); padding: 9px 18px; border-radius: 30px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.switch button.on { color: var(--text); }
.save { font-size: 12px; font-weight: 700; background: var(--money-soft); color: var(--money); padding: 3px 8px; border-radius: 20px; }
/* The price used to be one narrow card in the middle of an empty screen. Now it is the price on the left
   and what a team gets on the right, which is the shape people read on a pricing page. */
.price-grid { display: grid; gap: 18px; align-items: start; max-width: 940px; margin: 0 auto; }
@media (min-width: 900px) { .price-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.price-what { padding: 30px 28px; }
.price-what h3 { font-size: 17px; margin-bottom: 4px; }
.price-what .price-list { margin: 16px 0 14px; }
.price-what .hint { margin: 0; }
.price-card { margin: 0; text-align: center; padding: 36px 28px; position: relative; overflow: hidden; }
.price-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); }
.price-swap { min-height: 70px; display: grid; place-items: center; }
.price-fig { grid-area: 1 / 1; }
.price-num { font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.price-num small { font-size: 15px; font-weight: 550; color: var(--muted); letter-spacing: -.01em; }
.price-note { font-size: 13.5px; color: var(--muted); margin-top: 8px; min-height: 22px; }
.price-list { list-style: none; padding: 0; margin: 24px 0 26px; text-align: left; display: flex; flex-direction: column; gap: 11px; }
.price-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.price-list .ok { color: var(--money); font-weight: 800; }
/* The card stays centred; a small phone beside it shows the team growing on the same plan. */

.faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 18px 16px; color: var(--muted); }

/* See it move: the steps on the left, the phone on the right */
.show { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head stage" "steps stage"; column-gap: 72px; align-items: start; }
.show .head { grid-area: head; text-align: left; margin: 0 0 24px; align-self: end; }
.show-steps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: s; }
.show-steps button { display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px; width: 100%; padding: 11px 14px; text-align: left; font: inherit; font-size: 14px; color: var(--muted); background: none; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.show-steps button::before { counter-increment: s; content: counter(s); grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 750; background: var(--surface-3); color: var(--faint); }
.show-steps b { color: var(--text-2); font-weight: 650; font-size: 15px; }
.show-steps button:hover { background: var(--surface-2); }
.show-steps [aria-current] { background: var(--surface) !important; border-color: var(--border); box-shadow: var(--shadow); }
.show-steps [aria-current]::before { background: var(--grad-fill); color: #fff; }
.show-steps [aria-current] b { color: var(--text); }
.show-stage { grid-area: stage; align-self: center; position: relative; isolation: isolate; padding-block: 12px; }
.show-stage::before, .slate::before { content: ""; position: absolute; inset: 12% 0; z-index: -1; border-radius: 50%; filter: blur(40px); background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent); }

/* The phone: the real app at 375px, zoomed into a CSS frame. --s sizes it, --ry/--rx turn it, --bob/--bd float it. */
:root:not(.js) [data-stage] { display: none; }
.phone {
  zoom: var(--s, 1); position: relative; width: 300px; height: 620px; margin: 0 auto; padding: 11px; border-radius: 50px;
  background: linear-gradient(150deg, #4a4e5b, #16181e 38%, #0a0b0f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 6px #050608, 30px 40px 70px -30px rgba(10, 12, 30, .45), 0 30px 80px -40px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: perspective(1500px) rotateY(var(--ry, -17deg)) rotateX(var(--rx, 4deg));
  animation: bob var(--bob, 6s) ease-in-out var(--bd, 0s) infinite alternate;
}
@keyframes bob { to { translate: 0 -12px; } }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2f38; }
.phone::before { left: -2px; top: 120px; height: 50px; box-shadow: 0 66px #2c2f38; }
.phone::after { right: -2px; top: 150px; height: 80px; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 39px; background: var(--bg); color: var(--text); text-align: left; }  /* the hero centres its text on phones */
.phone-screen::before { content: ""; position: absolute; z-index: 4; top: 10px; left: 50%; width: 86px; height: 25px; translate: -50% 0; border-radius: 20px; background: #000; }
.phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 30%); }
.phone-status { position: relative; z-index: 2; background: var(--bg); height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 2px 28px 0 32px; font-size: 13px; font-weight: 700; }
.phone-status i { width: 22px; height: 11px; border-radius: 3.5px; border: 1.5px solid currentColor; box-shadow: inset 0 0 0 1.5px var(--bg); background: currentColor; opacity: .75; }
.phone-home { position: absolute; z-index: 4; bottom: 7px; left: 50%; width: 100px; height: 4px; translate: -50% 0; border-radius: 4px; background: var(--text); opacity: .3; }
.phone-app { zoom: .745; position: relative; padding: 0 16px; transition: translate .8s var(--ease); }
.phone-app > * + * { margin-top: 14px; }
.phone-nav { display: flex; align-items: center; justify-content: space-between; height: 50px; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.phone-app .crumbs { margin: 16px 0 0; }
.phone-app h1 { font-size: 26px; margin-top: 8px; }
.phone-app .muted { margin-top: 4px; font-size: 14.5px; }
.phone-app .notice { margin-bottom: 0; }
.phone-app .slots { list-style: none; margin: 18px 0 0; padding: 0; }
.phone-app .line-li { padding: 0 16px; }
.phone-app .slot { padding: 12px 14px; gap: 10px; flex-wrap: nowrap; }
.phone-app .slot > * { transition: translate .5s var(--ease), opacity .5s var(--ease); }
.phone-app:not(.pen) .slot > * { translate: -30px 0; }
.phone-app:not(.pen) .handle { opacity: 0; }
.phone-app .handle { position: relative; }
.phone-app .dragging .handle { color: var(--accent); }
.phone-app .dragging .handle::after { content: ""; position: absolute; inset: 2px -2px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 24%, transparent); animation: rise .3s var(--ease); }
.phone-app .hl { --hl: var(--accent-soft); animation: hl 2.6s var(--ease); }
.phone-app .sank { --hl: var(--danger-soft); animation: hl 2.6s var(--ease); }
:root[data-theme="dark"] .phone-app .sank { --hl: color-mix(in srgb, var(--danger) 20%, var(--surface)); }
@keyframes hl { 0%, 40% { background: var(--hl); } }
.phone-app .list-item { padding: 11px 14px; flex-wrap: nowrap; }
.phone-app .head-row h1 { margin: 0; }
.phone-toast { zoom: .745; position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 30px; }
/* Typing: a cover with a caret on its edge steps off the text. */
.phone-screen .input { min-height: 44px; padding: 9px 13px; font-size: 16px; line-height: 1.5; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; white-space: nowrap; }
.phone-screen .input.area { min-height: 70px; }
.typed { position: relative; display: inline-block; vertical-align: top; }
.typed::after { content: ""; position: absolute; inset: 0 -40px 0 0; background: var(--surface); border-left: 2px solid var(--accent); animation: type 1.1s steps(18) both; }
.typed.later::after { animation-delay: 1.2s; }
@keyframes type { to { transform: translateX(calc(100% - 40px)); } }
.tap .btn-primary { animation: tap .45s var(--ease); }
@keyframes tap { 45% { transform: scale(.93); } }
.phone-dialog { zoom: .745; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 20, .45); animation: fade .25s both; }
.phone-dialog > div { width: 100%; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: rise .35s var(--ease); }
@keyframes fade { from { opacity: 0; } }

/* The laptop and the tablet: the phone's screen in their own frame, at their own zoom. */
.laptop, .tablet {
  position: relative; margin: 0 auto;
  background: linear-gradient(150deg, #4a4e5b, #16181e 38%, #0a0b0f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 5px #050608, 30px 40px 70px -30px rgba(10, 12, 30, .45), 0 30px 80px -40px color-mix(in srgb, var(--accent) 60%, transparent);
}
.laptop .phone-screen::before, .tablet .phone-screen::before { display: none; }
.laptop .phone-status, .tablet .phone-status { height: 30px; font-size: 11px; }
.laptop .phone-dialog > div, .tablet .phone-dialog > div { max-width: 470px; }

/* Dana's laptop: the topic page at 1280px, the list beside its history, short enough that it never
   scrolls. The list spans two rows; 1fr lets the second take its height, so the history sits under the pen.
   --s sizes the whole desk. */
.desk { width: 900px; margin: 0 auto; padding: 4px 0 22px; zoom: var(--s, 1); }
.laptop { width: 800px; height: 500px; padding: 18px 16px 16px; border-radius: 22px 22px 6px 6px; transform: perspective(2400px) rotateX(8deg); transform-origin: 50% 100%; }
.laptop::before { content: ""; position: absolute; top: 7px; left: 50%; width: 5px; height: 5px; translate: -50% 0; border-radius: 50%; background: #2c2f38; }
.laptop::after { content: ""; position: absolute; left: -50px; right: -50px; top: 100%; height: 16px; border-radius: 2px 2px 16px 16px; background: linear-gradient(#0c0d11, #0c0d11) 50% 0 / 120px 5px no-repeat, linear-gradient(#5c606b, #2b2d34 55%, #15161b); }
.laptop .phone-screen { border-radius: 6px; }
.laptop .phone-status { justify-content: center; padding: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 550; }
.laptop .phone-status span { padding: 1px 60px; border-radius: 6px; background: var(--bg); }
.laptop .phone-home { display: none; }
.laptop .phone-app, .laptop .phone-dialog { zoom: .6; }
.laptop .phone-app { padding: 0 32px; display: grid; grid-template: repeat(5, auto) 1fr / minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.laptop .phone-app > * { grid-column: 1 / -1; }
.laptop .phone-nav { margin-inline: -32px; padding-inline: 32px; }
.laptop .pen-card { grid-area: 5 / 2; }
.laptop .slots { grid-area: 5 / 1 / span 2; margin-top: 14px; }
.laptop .slots + .card { grid-area: 6 / 2; }
@media (max-width: 948px) { .desk { --s: .65; } }
@media (max-width: 616px) { .desk { --s: .5; } }
@media (max-width: 481px) { .desk { --s: .38; } }

/* Mia's tablet: the topic page at about 600px. It turns and floats like the phones.
   ponytail: the view option in landing.js is (580 - 28 - 30) / .66; change them together. */
.tablet { zoom: var(--s, 1); width: 420px; height: 580px; padding: 14px; border-radius: 34px; transform: perspective(1500px) rotateY(var(--ry, -14deg)) rotateX(var(--rx, 4deg)); animation: bob 8.4s ease-in-out -2s infinite alternate; }
.tablet .phone-screen { border-radius: 22px; }
.tablet .phone-status { padding: 0 24px; }
.tablet .phone-app, .tablet .phone-dialog, .tablet .phone-toast { zoom: .66; }
@media (max-width: 480px) { .tablet { --s: .82; } }

.close-cta { text-align: center; padding: 70px 0; background: var(--bg-sunk); border-top: 1px solid var(--border); }
.close-cta h2 { font-size: clamp(28px, 4.2vw, 42px); letter-spacing: -.038em; margin-bottom: 12px; }
.close-cta p { margin-bottom: 24px; }
.center { text-align: center; }
body > footer.site { margin-top: 0; }

@media (max-width: 720px) {
  .show { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "steps"; }
  .show .head { text-align: center; margin-inline: auto; }
  .show-stage { margin-bottom: 20px; }
  .phone, .tablet { --ry: 0deg !important; --rx: 0deg !important; }
  .hero-stage { width: auto; height: auto; margin-top: 40px; padding-top: 18px; }
  .hold-b { display: none; }
  .hold-a { position: relative; left: auto; bottom: auto; width: fit-content; margin: 0 auto; }
  .hold-a .phone { --s: .86; }
  .hold-a .phone-tag { left: 50%; top: -18px; translate: -50% 0; }
}
@media (max-width: 640px) {
  .hero { padding: 44px 0 36px; }
  section { padding: 50px 0; }
  .hero-cta .btn { width: 100%; }
  .dead-w { display: none; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row span:last-child { border-left: 0; padding-top: 0; }
  .compare-head { display: none; }
  .compare-row span:first-child::before { content: "Frameworks: "; font-weight: 600; }
  .logwhen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aura, .phone, .tablet { animation: none; }
  .typed::after { display: none; }
}