/*
 * The site's light and dark themes (site/clarity). Hand-written, not built by
 * Tailwind: the pages that use it (home, download) style themselves with these
 * tokens and classes, and still load /css/site.css after it for the hero's
 * demo stage. Colors follow Shipyard's hype_colors.dart so the site and the
 * app look like one product; the dark ground keeps the site's navy.
 *
 * <html data-theme="light|dark"> is set before first paint by
 * partials/site/theme-head (System / Light / Dark, remembered per browser).
 */
:root {
    --laptop-bezel: #1a1d24; --laptop-edge: rgba(255, 255, 255, .14); --laptop-base-1: #3a3f4a; --laptop-base-2: #1d2027; --laptop-groove: #14161b; --laptop-shadow: .55;
  --ground: #141428;
  --ground-2: #10101f;
  --surface: rgba(255, 255, 255, .035);
  --surface-solid: #1b1b33;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);
  --text: rgba(255, 255, 255, .78);
  --strong: #ffffff;
  --muted: rgba(255, 255, 255, .55);
  --faint: rgba(255, 255, 255, .38);
  --link: #a5b4fc;
  --pro: #1fd4c4;
  --pro-soft: rgba(31, 212, 196, .12);
  --btn-bg: #ffffff;
  --btn-text: #141428;
  --btn-2-bg: rgba(255, 255, 255, .06);
  --btn-2-border: rgba(255, 255, 255, .16);
  --code-bg: #0d0d20;
  --orb-1: rgba(147, 51, 234, .20);
  --orb-2: rgba(37, 99, 235, .15);
  --orb-3: rgba(219, 39, 119, .10);
  --shadow: 0 20px 60px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="light"] {
    --laptop-bezel: #d3d6dc; --laptop-edge: rgba(0, 0, 0, .10); --laptop-base-1: #e6e8ed; --laptop-base-2: #b9bdc6; --laptop-groove: #a4a9b3; --laptop-shadow: .22;
  --ground: #f4f5f7;
  --ground-2: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --border: #dadde1;
  --border-strong: #c3c7cd;
  --text: #1f2328;
  --strong: #0d1117;
  --muted: #5b626b;
  --faint: #737a83;
  --link: #0969da;
  --pro: #0b9488;
  --pro-soft: rgba(11, 148, 136, .10);
  --btn-bg: #141428;
  --btn-text: #ffffff;
  --btn-2-bg: #ffffff;
  --btn-2-border: #c3c7cd;
  --code-bg: #141428;
  --orb-1: rgba(213, 196, 238, .55);
  --orb-2: rgba(169, 205, 235, .50);
  --orb-3: rgba(239, 195, 216, .40);
  --shadow: 0 16px 40px rgba(13, 17, 23, .10);
  color-scheme: light;
}
/* No script (or before it runs): follow the system. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ground: #f4f5f7; --ground-2: #ffffff; --surface: #ffffff; --surface-solid: #ffffff;
    --border: #dadde1; --border-strong: #c3c7cd; --text: #1f2328; --strong: #0d1117;
    --muted: #5b626b; --faint: #737a83; --link: #0969da; --pro: #0b9488; --pro-soft: rgba(11, 148, 136, .10);
    --btn-bg: #141428; --btn-text: #ffffff; --btn-2-bg: #ffffff; --btn-2-border: #c3c7cd; --code-bg: #141428;
    --orb-1: rgba(213, 196, 238, .55); --orb-2: rgba(169, 205, 235, .50); --orb-3: rgba(239, 195, 216, .40);
    --shadow: 0 16px 40px rgba(13, 17, 23, .10);
    color-scheme: light;
  }
}

html.themed { scroll-behavior: smooth; }
body.themed {
  background: var(--ground);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .36s ease, color .36s ease;
}
.themed ::selection { background-color: rgba(139, 92, 246, .3); }
.themed a { color: inherit; }
.themed :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .wrap { padding: 0 48px; } }
.narrow { max-width: 860px; }

/* ── Type ─────────────────────────────────────────────── */
.t-hero { font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; color: var(--strong); margin: 0; }
.t-2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12; font-weight: 750; letter-spacing: -.02em; color: var(--strong); margin: 0; }
.t-3 { font-size: 1.125rem; line-height: 1.35; font-weight: 650; color: var(--strong); margin: 0; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--muted); margin: 0; }
.body { font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0; }
.small { font-size: .875rem; line-height: 1.55; color: var(--muted); margin: 0; }
.tiny { font-size: .78rem; line-height: 1.5; color: var(--faint); margin: 0; }
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pro); margin: 0 0 14px; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.strong { color: var(--strong); font-weight: 600; }
.gradient-text {
  background: linear-gradient(135deg, #667eff 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .gradient-text { background-image: linear-gradient(135deg, #4c5fe0 0%, #8b3fd9 50%, #c42a7b 100%); }
.inline-link { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 3px; }
.inline-link:hover { text-decoration-color: var(--link); }
code.chip { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; padding: .1em .4em; border-radius: 6px; background: var(--pro-soft); color: var(--strong); }

/* ── Buttons ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.5rem; border-radius: 14px; font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:active { transform: scale(.98); }
.btn-1 { background: var(--btn-bg); color: var(--btn-text) !important; }
.btn-1:hover { opacity: .9; }
.btn-2 { background: var(--btn-2-bg); color: var(--strong) !important; border-color: var(--btn-2-border); }
.btn-2:hover { border-color: var(--strong); }
.btn-sm { padding: .55rem 1rem; font-size: .9rem; border-radius: 11px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn-note { display: block; margin-top: .6rem; font-size: .8rem; color: var(--faint); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ── Header ───────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; color: var(--strong) !important; text-decoration: none; }
.logo img { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 22px; margin-left: 10px; }
.nav a { font-size: .92rem; color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--strong); }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 760px) {
  .nav { display: none; }
  .site-header .wrap { gap: 10px; }
  .header-end .btn-sm { padding: .5rem .8rem; font-size: .85rem; }
}
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.theme-btn:hover { color: var(--strong); border-color: var(--border-strong); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn [data-icon] { display: none; }
:root[data-theme="light"] .theme-btn [data-icon="light"],
:root:not([data-theme="light"]) .theme-btn [data-icon="dark"] { display: block; }
.mobile-nav { display: none; }
@media (max-width: 760px) {
  .mobile-nav { display: flex; gap: 18px; overflow-x: auto; padding: 10px 24px; border-top: 1px solid var(--border); scrollbar-width: none; }
  .mobile-nav a { font-size: .88rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
}

/* ── Sections and cards ───────────────────────────────── */
.section { padding: 88px 0; position: relative; }
.section-tight { padding: 56px 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head .lede { margin-top: 14px; }
.alt { background: var(--ground-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px; }
.card .t-3 { margin-bottom: 8px; }
.card-foot { margin-top: 18px; }
.path-card { display: flex; flex-direction: column; }
.path-card .facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.path-card .facts li { position: relative; padding-left: 20px; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.path-card .facts li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--pro); }
.path-card .card-foot { margin-top: auto; padding-top: 20px; }
.tag-1 { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: .12rem .45rem; border-radius: 6px; color: var(--pro); background: var(--pro-soft); vertical-align: middle; }

/* ── Glow orbs (pastel in light mode) ─────────────────── */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 9999px; filter: blur(120px); }
.orb-1 { width: 600px; height: 600px; background: var(--orb-1); top: 50%; right: 12%; transform: translateY(-50%); }
.orb-2 { width: 420px; height: 420px; background: var(--orb-2); top: 24%; right: 26%; }
.orb-3 { width: 320px; height: 320px; background: var(--orb-3); bottom: 12%; right: 6%; }

/* ── Hero ─────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 56px 0 40px; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .hero { padding: 72px 0 56px; } }
.hero-copy { display: grid; gap: 26px; max-width: 580px; min-width: 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--faint); }
.hero-facts span { display: inline-flex; align-items: center; gap: 6px; }
.hero-facts span::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--pro); }
#hero .code-shell { border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(13, 13, 32, .95); box-shadow: var(--shadow); overflow: hidden; }
.qr-tile { display: block; width: 84px; height: 84px; border-radius: 12px; background: #fff; padding: 6px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.qr-label { font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--muted); }
.store-qrs { display: flex; align-items: center; gap: 14px; }
.store-qrs .qr-tile { flex: none; width: 96px; height: 96px; }
.store-qrs img { width: 100%; height: 100%; display: block; }
.store-qrs .tiny { line-height: 1.6; }
.tier-qr { margin-top: 22px; display: grid; gap: 12px; }
.tier-qr p, .start-qr p { margin: 0; color: var(--strong); }
.tier-qr b, .start-qr b { display: block; font-size: .95rem; }
.tier-qr .tiny { display: block; margin-top: 2px; }
.start-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 40px; }
.start-head .section-head { margin-bottom: 0; flex: 1 1 520px; }
.start-qr { flex: 0 1 340px; display: grid; gap: 14px; padding: 20px; }
.start-qr .small { display: block; margin-top: 4px; color: var(--text); }

#demo-replay { font-size: .85rem; padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer; justify-self: start; }
#demo-replay:hover { color: var(--strong); }
#demo-goal { color: var(--strong); }

/* ── How it works ─────────────────────────────────────── */
.steps { display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.how-step { display: flex; flex-direction: column; }
/* Long HAM lines (petBlue's, at launch) scroll inside their card rather than widening the column. */
.how-step { min-width: 0; }
.how-step pre.ham { overflow-x: auto; font-size: 11px; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-weight: 750; font-size: .9rem; color: var(--pro); background: var(--pro-soft); margin-bottom: 14px; }
.step-visual { margin-top: 20px; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.step-visual.step-code { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.ham { margin: 0; width: 100%; border-radius: 12px; background: var(--code-bg); border: 1px solid rgba(255, 255, 255, .07); padding: 14px 16px; overflow-x: auto; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); white-space: pre; }
.ham .t { color: #6ccf7a; } .ham .a { color: #4fc3f7; } .ham .s { color: #facc15; } .ham .c { color: rgba(255, 255, 255, .38); font-style: italic; }

/* A drawing of the Trailhead screen, in HTML: the screen the HAM beside it makes. */
.mini-phone { width: 200px; border-radius: 30px; padding: 8px; background: #0c0c12; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .1); }
.mini-shot { display: block; width: 100%; height: auto; border-radius: 22px; }
:root[data-theme="light"] .mini-shot-dark, :root:not([data-theme="light"]) .mini-shot-light { display: none; }
.mini-screen { border-radius: 23px; background: #111827; padding: 30px 10px 14px; font-family: -apple-system, 'Inter', system-ui, sans-serif; color: #fff; }
/* An iPhone 15 Pro's screen is 1179 × 2556: the drawn phones keep that shape, with the Dynamic Island at the top. */
.mini-screen { position: relative; aspect-ratio: 1179 / 2556; overflow: hidden; }
.mini-screen::before { content: ''; position: absolute; top: 7px; left: 50%; width: 32%; height: 11px; transform: translateX(-50%); border-radius: 99px; background: #000; }
.mini-bar { font-size: 11px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.mini-hero { border-radius: 9px; padding: 13px; background: linear-gradient(180deg, #6366f1, #9333ea); margin-bottom: 8px; }
.mini-hero b { display: block; font-size: 15px; }
.mini-hero span { font-size: 9.5px; opacity: .85; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-stat { border-radius: 9px; background: #1f2937; padding: 9px 4px; text-align: center; }
.mini-stat i { display: block; width: 14px; height: 14px; margin: 0 auto 5px; border-radius: 4px; }
.mini-stat b { display: block; font-size: 11px; }
.mini-stat span { font-size: 8.5px; color: #9ca3af; }
.mini-row { margin-top: 6px; border-radius: 9px; background: #1f2937; padding: 9px; display: flex; align-items: center; gap: 8px; }
.mini-row i { width: 14px; height: 14px; border-radius: 4px; background: #22c55e; flex: none; }
.mini-row b { display: block; font-size: 10px; }
.mini-row span { font-size: 8.5px; color: #9ca3af; }
.shot { width: 200px; border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.store-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.store-steps li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: .92rem; color: var(--text); }
.store-steps li b { color: var(--strong); font-weight: 650; }
.store-steps .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--pro); flex: none; }

/* ── Facts (What HAM is) ──────────────────────────────── */
.fact-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--pro-soft); color: var(--pro); margin-bottom: 16px; }
.fact-icon svg { width: 20px; height: 20px; }

/* ── Pricing strip ────────────────────────────────────── */
.tiers { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { display: flex; flex-direction: column; }
.tier.is-featured { border-color: color-mix(in srgb, #a855f7 45%, var(--border)); box-shadow: 0 20px 60px rgba(124, 58, 237, .16); }
.tier-name { font-weight: 700; color: var(--strong); font-size: 1.05rem; margin: 0; }
.tier-price { margin: 10px 0 2px; display: flex; align-items: baseline; gap: 10px; color: var(--strong); }
.tier-price b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; }
.tier-price s { font-size: 1.2rem; color: var(--faint); }
.tier ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.tier li { position: relative; padding-left: 24px; font-size: .92rem; line-height: 1.5; color: var(--text); }
.tier li::before { content: ''; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2.5px solid var(--pro); border-bottom: 2.5px solid var(--pro); transform: rotate(-45deg); }
.tier .card-foot { margin-top: auto; padding-top: 24px; }
/* The three buttons line up (the user, 2026-10-29): a note under a button hangs below it, in room every card keeps. */
.tier { padding-bottom: 50px; }
.tier .card-foot { position: relative; }
.tier .card-foot .btn-note { position: absolute; left: 0; right: 0; top: 100%; }
.tier .btn { width: 100%; }
/* Hype Apps 1.0's production app ticket, the same as /pricing's (its .ticket rules, copied): gold foil with a stub; the
   notches are a mask, so they show whatever is behind the card. */
.tier li.ticket-li { padding-left: 24px; display: grid; justify-items: start; gap: 3px; }
.tier li.ticket-li::before { display: none; }
.ticket { --stub: 40px; position: relative; display: flex; width: 236px; max-width: 100%; border-radius: 10px; color: #3B2A05;
          background: linear-gradient(115deg, #F7E38A 0%, #E7B547 28%, #FFF3C4 46%, #D9A53C 60%, #F4D570 82%, #E2AE45 100%);
          box-shadow: 0 3px 10px rgba(231, 181, 71, .16), inset 0 0 0 1px rgba(255, 255, 255, .4);
          -webkit-mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat,
                        radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
                  mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat,
                        radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          overflow: hidden; }
.ticket::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                 background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
                 transform: translateX(-120%); animation: ticket-shine 5s ease-in-out 1s infinite; }
@keyframes ticket-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .ticket::after { animation: none; display: none; } }
.ticket-main { flex: 1; padding: 13px 12px 13px 14px; }
.ticket-title { margin: 0; font-weight: 800; font-size: .84rem; line-height: 1.25; }
.ticket-sub { margin: 2px 0 0; font-size: .7rem; opacity: .75; line-height: 1.3; }
.ticket-stub { width: var(--stub); flex: none; border-left: 1.5px dashed rgba(59, 42, 5, .35); }
/* App Chad's endless tickets: rows of solid gold tickets on a floor tilted away (perspective), getting smaller toward the
   horizon until they meet the card's own color there, behind the card's lower part. */
.tier.has-field { position: relative; overflow: hidden; isolation: isolate; --card-bg: #1c1c30; }
:root[data-theme="light"] .tier.has-field { --card-bg: #ffffff; }
.tier.has-field > :not(.ticket-field) { position: relative; z-index: 1; }
.ticket-field { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0; pointer-events: none; overflow: hidden; perspective: 520px; perspective-origin: 50% -10%; }
.ticket-field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--card-bg) 0%, var(--card-bg) 12%, color-mix(in srgb, var(--card-bg) 55%, transparent) 40%, transparent 80%); }
.ticket-plane { position: absolute; left: 50%; bottom: -40px; width: 1400px; margin-left: -700px; height: 6000px;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='33' viewBox='0 0 56 33'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='.45'%3E%3Cstop offset='0' stop-color='%23F7E38A'/%3E%3Cstop offset='.28' stop-color='%23E7B547'/%3E%3Cstop offset='.46' stop-color='%23FFF3C4'/%3E%3Cstop offset='.6' stop-color='%23D9A53C'/%3E%3Cstop offset='.82' stop-color='%23F4D570'/%3E%3Cstop offset='1' stop-color='%23E2AE45'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='56' height='33' fill='white'/%3E%3Ccircle cx='37' cy='0' r='4' fill='black'/%3E%3Ccircle cx='37' cy='24' r='4' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect x='0' y='0' width='48' height='24' rx='4' fill='url%28%23g%29' mask='url%28%23m%29'/%3E%3Cline x1='37' y1='5' x2='37' y2='19' stroke='%233B2A05' stroke-opacity='.3' stroke-dasharray='2 2'/%3E%3C/svg%3E") 0 100% / 56px 33px repeat;
                transform-origin: 50% 100%; transform: rotateX(74deg); }
:root:not([data-theme="light"]) .ticket-plane { filter: brightness(.5) saturate(.85); }
:root[data-theme="light"] .ticket-plane { filter: brightness(.9); }
.tier.has-field .card-foot .btn-2 { background: var(--card-bg); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
/* App Chad's tickets, the same as /pricing's (its .ticket-fan / .ticket-pack / .vticket rules, copied): ten upright gold tickets
   fanned like the logo's cards, whole 10-packs behind, darker the further back; the front one carries the words. */
.ticket-fan { position: relative; height: 262px; margin: 18px 0 0; }
.ticket-pack { position: absolute; inset: 0; transform: translate(var(--px), var(--py)) rotate(var(--pr)) scale(.94); filter: brightness(.38) saturate(.8); pointer-events: none; }
.ticket-pack:nth-child(n+3) { filter: brightness(.28) saturate(.7); }
.vticket { position: absolute; left: 60%; bottom: 58px; width: 92px; height: 176px; margin-left: -46px; border-radius: 12px;
           display: flex; flex-direction: column; align-items: center; padding-top: 16px; color: #3B2A05; text-align: center;
           transform-origin: 50% 165%; transform: rotate(var(--a)); transition: transform .35s cubic-bezier(.2,.8,.2,1);
           background: linear-gradient(160deg, #F7E38A 0%, #E7B547 28%, #FFF3C4 46%, #D9A53C 60%, #F4D570 82%, #E2AE45 100%);
           box-shadow: -3px 4px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.45);
           -webkit-mask: radial-gradient(circle at 0 78%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
                         radial-gradient(circle at 100% 78%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
                   mask: radial-gradient(circle at 0 78%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
                         radial-gradient(circle at 100% 78%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat; }
.vticket::after { content: ""; position: absolute; top: 78%; left: 12px; right: 12px; border-top: 2px dashed rgba(59,42,5,.35); }
.vt-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; opacity: .8; }
.vt-num { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -.04em; margin: 6px 0 2px; }
.vt-sub { font-size: 10.5px; line-height: 1.3; opacity: .75; }
.vticket:last-child { box-shadow: -4px 6px 20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.6); }
.tier:hover .ticket-fan > .vticket { transform: rotate(calc(var(--a) * 1.15)); }
@media (prefers-reduced-motion: reduce) { .vticket { transition: none; } }

/* ── Bio, signup, footer ──────────────────────────────── */
.bio { display: flex; gap: 22px; align-items: center; }
.bio img { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; border: 1px solid var(--border); flex: none; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; max-width: 520px; }
.signup input[type=email] { flex: 1 1 240px; min-width: 0; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--strong); font: inherit; }
.signup input[type=email]::placeholder { color: var(--faint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { margin-top: 18px; font-weight: 650; color: var(--pro); }
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { font-size: .88rem; color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--strong); }

/* ── Download page ────────────────────────────────────── */
.get-box { display: grid; gap: 10px; justify-items: start; }
.os-others { display: flex; flex-wrap: wrap; gap: 8px; }
.os-chip { font-size: .82rem; padding: .35rem .75rem; border-radius: 99px; border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; }
.os-chip.is-off { color: var(--faint); border-style: dashed; }
.after { counter-reset: after; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.after li { counter-increment: after; position: relative; padding: 16px 18px 16px 58px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); line-height: 1.55; }
.after li::before { content: counter(after); position: absolute; left: 18px; top: 15px; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 750; font-size: .85rem; color: var(--pro); background: var(--pro-soft); }
pre.cmd { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--code-bg); color: rgba(255, 255, 255, .85); font-size: .88rem; overflow-x: auto; border: 1px solid rgba(255, 255, 255, .07); }

/* Grid children may shrink below their content (the HAM <pre> scrolls instead of widening the page). */
.steps > *, .grid-3 > *, .tiers > *, .hero-grid > * { min-width: 0; }
.logo { white-space: nowrap; }
@media (max-width: 420px) { .hide-sm { display: none; } }
/* The demo's goal line (streamed from the server, white text) needs ink on the light ground. */
:root[data-theme="light"] #demo-goal, :root[data-theme="light"] #demo-goal * { color: var(--strong) !important; }

/* ── Pages written in Tailwind's white-on-navy classes (body.legacy) ──────────
 * /pricing, /faq, /devices, /stores, /developers and /about keep their markup
 * (tests pin parts of it). In dark they look as they always did, on the shared
 * ground; in light these rules map their white-alpha classes onto the tokens. */
body.legacy { background: var(--ground); }
:root[data-theme="light"] .legacy .text-white { color: var(--strong); }
:root[data-theme="light"] .legacy .text-white\/90, :root[data-theme="light"] .legacy .text-white\/85,
:root[data-theme="light"] .legacy .text-white\/80, :root[data-theme="light"] .legacy .text-white\/75 { color: var(--text); }
:root[data-theme="light"] .legacy .text-white\/70, :root[data-theme="light"] .legacy .text-white\/65,
:root[data-theme="light"] .legacy .text-white\/60, :root[data-theme="light"] .legacy .text-white\/55,
:root[data-theme="light"] .legacy .text-white\/50 { color: var(--muted); }
:root[data-theme="light"] .legacy .text-white\/45, :root[data-theme="light"] .legacy .text-white\/40,
:root[data-theme="light"] .legacy .text-white\/35, :root[data-theme="light"] .legacy .text-white\/30,
:root[data-theme="light"] .legacy .text-white\/25 { color: var(--faint); }
:root[data-theme="light"] .legacy .hover\:text-white:hover { color: var(--strong); }
:root[data-theme="light"] .legacy .hover\:text-white\/75:hover, :root[data-theme="light"] .legacy .hover\:text-white\/70:hover,
:root[data-theme="light"] .legacy .hover\:text-white\/60:hover { color: var(--text); }
:root[data-theme="light"] .legacy [class*="decoration-white"] { text-decoration-color: color-mix(in srgb, var(--strong) 28%, transparent); }
:root[data-theme="light"] .legacy .hover\:decoration-white:hover { text-decoration-color: var(--strong); }
:root[data-theme="light"] .legacy [class*="border-white"] { border-color: var(--border); }
:root[data-theme="light"] .legacy .hover\:border-white\/\[0\.15\]:hover, :root[data-theme="light"] .legacy .hover\:border-white\/40:hover { border-color: var(--border-strong); }
:root[data-theme="light"] .legacy [class*="bg-white/"] { background-color: var(--surface); }
:root[data-theme="light"] .legacy .bg-black\/40 { background-color: #eef0f3; }
:root[data-theme="light"] .legacy .text-teal-400, :root[data-theme="light"] .legacy .text-teal-300,
:root[data-theme="light"] .legacy .text-\[\#5FFBF1\] { color: var(--pro); }
:root[data-theme="light"] .legacy .text-orange-400 { color: #c2410c; }
:root[data-theme="light"] .legacy .bg-teal-400\/15 { background-color: var(--pro-soft); }
:root[data-theme="light"] .legacy .bg-purple-600\/15 { background-color: var(--orb-1); }
:root[data-theme="light"] .legacy .bg-blue-600\/10 { background-color: var(--orb-2); }
:root[data-theme="light"] .legacy .border-purple-400\/40 { border-color: color-mix(in srgb, #a855f7 45%, var(--border)); }
:root[data-theme="light"] .legacy .bg-purple-500\/\[0\.06\] { background-color: #faf7ff; }
:root[data-theme="light"] .legacy details[open] { border-color: var(--border-strong); }
:root[data-theme="light"] .legacy details a, :root[data-theme="light"] .legacy .prose-a a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); }
:root[data-theme="light"] .legacy pre, :root[data-theme="light"] .legacy code { color: var(--strong); }
:root[data-theme="light"] body.legacy { color: var(--text); }
/* /pricing's big plan names start from white; on the light ground they need ink. */
:root[data-theme="light"] .legacy .plan-name-demo { background-image: linear-gradient(160deg, #1f2328 0%, #5b626b 100%); filter: none; }
:root[data-theme="light"] .legacy .plan-name-hero { background-image: linear-gradient(160deg, #4c5fe0 0%, #8b3fd9 55%, #c42a7b 100%); }
:root[data-theme="light"] .legacy .tip-btn { color: var(--muted); border-color: var(--border-strong); }
:root[data-theme="light"] .legacy .os-link, :root[data-theme="light"] .legacy .dl-btn, :root[data-theme="light"] .legacy .dl-chip { color: var(--text); border-color: var(--border-strong); }
:root[data-theme="light"] .legacy .dl-btn.is-off, :root[data-theme="light"] .legacy .dl-chip.is-off, :root[data-theme="light"] .legacy .dl-soon { color: var(--faint); }
.btn-tight { gap: 0; }

/* ── Launch home (site/clarity, launch-first): the product hero, Shipyard's window, Shipyard and the CLI side by side. ── */
.hero-launch { padding-bottom: 64px; }
.hero-launch .hero-copy { display: block; position: relative; z-index: 1; max-width: 820px; }
.hero-launch .lede { margin-top: 20px; max-width: 720px; }
.hero-launch .btn-row { margin-top: 28px; }
.btn .price { font-weight: 800; margin-left: .35em; }
.cli-line { margin-top: 22px; max-width: 640px; }
.cli-line p { margin: 0 0 8px; }
.cmd-row { display: flex; align-items: stretch; gap: 8px; }
.cmd-row pre.cmd { flex: 1; min-width: 0; white-space: pre; }
.cmd-row .btn { flex: none; }

/* Window dots, for the drawn terminal's title bar. */
.sy-dots { position: absolute; left: 14px; display: flex; gap: 8px; }
.sy-dots i { width: 12px; height: 12px; border-radius: 99px; background: #ff5f57; }
.sy-dots i:nth-child(2) { background: #febc2e; }
.sy-dots i:nth-child(3) { background: #28c840; }

/* The launch hero's real Shipyard still, and a labeled placeholder (APP_DEBUG only) where a real picture hasn't landed. */
.hero-shot { position: relative; z-index: 1; margin: 40px 0 0; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.media-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; border-radius: 12px; border: 2px dashed var(--border-strong); background: var(--surface); color: var(--muted); text-align: center; padding: 16px; }
.media-ph b { color: var(--strong); } .media-ph span { font-size: .8rem; }

/* Shipyard and the CLI, side by side. */
.products { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .products { grid-template-columns: 1fr 1fr; } }
.products > * { min-width: 0; display: flex; flex-direction: column; }
.product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-head .tiny { margin: 0; }
.does { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.does li { display: grid; gap: 2px; }
.does b { color: var(--strong); font-size: .97rem; }
.does span { color: var(--text); font-size: .92rem; line-height: 1.55; }
.products .card-foot > * { min-width: 0; }
.products .card-foot { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.split { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; } }
.split > * { min-width: 0; }
.split h3 { margin: 0 0 10px; }
.split ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--text); font-size: .92rem; line-height: 1.5; }

/* ── Showcase (launch home): apps made with Hype Apps, rising in as they scroll into view.
   Only opacity and transform move, so nothing shifts; without the script (or with reduced motion) they just show. ── */
.sy-cap { margin: 12px 0 0; font-size: .8rem; color: var(--faint); text-align: center; }
.hero-for { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; font-size: 1rem; color: var(--muted); }
.hero-for b { color: var(--strong); font-weight: 600; }
.hero-for small { color: var(--faint); font-size: .85em; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: .82rem; color: var(--faint); }
.dl-row .os-chip { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border-strong); color: var(--muted); text-decoration: none; }
.dl-row .os-chip:hover { color: var(--strong); border-color: var(--strong); }
.dl-row .os-chip[hidden] { display: none; }
.show-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 72px 28px; max-width: 1320px; margin: 40px auto 0; padding: 0 24px; }
.show-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.show-frame { background: #0b0b0f; padding: 9px; border-radius: 34px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.show-frame img, .show-ph { display: block; border-radius: 26px; }
.show-phone .show-frame img, .show-phone .show-ph { width: 220px; height: auto; background: #fff; }
.show-watch .show-frame { border-radius: 99px; padding: 10px; }
.show-watch .show-frame img, .show-watch .show-ph { width: 170px; height: auto; border-radius: 99px; }
.show-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(160deg, #4f46e5, #9333ea 60%, #db2777); color: #fff; text-align: center; }
.show-ph b { font-size: 1.1rem; } .show-ph span { font-size: .72rem; opacity: .75; }
.show-frame { position: relative; }
.show-video { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; border-radius: 26px; background: #fff; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.show-watch .show-video { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 99px; }
.show-item.is-playing .show-video { opacity: 1; }
.show-frame { transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.show-item.is-hot { position: relative; z-index: 2; }
.show-item.is-bw .show-frame { filter: grayscale(1); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, filter .6s ease; }
.show-item.is-bw.is-seen .show-frame { filter: none; }
.show-item.is-hot .show-frame { transform: scale(1.12); box-shadow: 0 36px 90px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: reduce) { .show-frame { transition: none; } }
.show-item[tabindex]:focus-visible { outline: 2px solid var(--pro); outline-offset: 6px; border-radius: 36px; }
.show-item figcaption { max-width: 220px; font-size: .85rem; color: var(--muted); text-align: center; line-height: 1.4; min-height: 2.8em; }
/* Two watches share one column, one above the other (the user, 2026-10-29). Captions keep two lines' room, so every phone and
   watch sits on the same line whatever its caption's length (the user: "why dont these line up?"). */
.show-stack { display: flex; flex-direction: column; align-items: center; gap: 40px; }
@media (max-width: 680px) { .show-stack { flex: none; gap: 24px; } } /* still a column: as a row it was wider than the screen and sat low (QA, 2026-10-29) */
.show-item figcaption b { color: var(--strong); }
.show-row.will-rise .show-item { opacity: 0; transform: translateY(48px) scale(.97); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 90ms); }
.show-row.will-rise .show-item.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .show-row.will-rise .show-item { opacity: 1; transform: none; transition: none; } }
@media (max-width: 680px) {
  .hero-for { font-size: .92rem; }
  /* One row to swipe, snapping to each app; the next one peeks in at the edge. */
  .show-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 0; padding: 64px 16px 12px; gap: 18px; scrollbar-width: none; }
  .show-row::-webkit-scrollbar { display: none; }
  .show-item { scroll-snap-align: center; flex: none; }
  .show-phone .show-frame img, .show-phone .show-ph { width: 200px; }
  .show-row.will-rise .show-item { transform: translateX(32px); }
}
.hero-sub { margin: 14px 0 0; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; color: var(--strong); letter-spacing: -.01em; }
.hero-launch .hero-for { margin-top: 12px; }
.hero-launch .lede { margin-top: 16px; }

/* ── Are you…: the two ways in (partials/site/paths), one panel at a time. ── */
/* The "Are you…" toggle as a nested bezel (the user, 2026-10-29, after a card with a soft outer ring): an outer ring and
   shell round an inset track, and a thumb that slides to the chosen tab (the script sets --x and --w; without it the
   chosen button fills). */
.seg { --shell: rgba(255, 255, 255, .045); --ring: rgba(255, 255, 255, .10); --track: rgba(0, 0, 0, .28);
       position: relative; display: inline-flex; gap: 0; padding: 4px; border-radius: 99px; margin: 7px;
       background: var(--track); border: 1px solid var(--border-strong);
       box-shadow: 0 0 0 6px var(--shell), 0 0 0 7px var(--ring), inset 0 1px 2px rgba(0, 0, 0, .25); }
:root[data-theme="light"] .seg { --shell: #f1f2f4; --ring: #e2e4e8; --track: #ffffff; box-shadow: 0 0 0 6px var(--shell), 0 0 0 7px var(--ring), inset 0 1px 2px rgba(15, 23, 42, .06); }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 650; font-size: 1.15rem;
              padding: .8rem 1.6rem; border-radius: 99px; cursor: pointer; transition: color .25s; }
.seg button:hover { color: var(--strong); }
.seg button[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-text); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 99px;
             background: var(--btn-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
             transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1); display: none; }
:root[data-theme="light"] .seg-thumb { box-shadow: 0 1px 2px rgba(15, 23, 42, .2), 0 4px 12px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
.seg.has-thumb .seg-thumb { display: block; }
/* Bigger and centred under the heading, with no focus ring on the chosen tab (the user, 2026-10-30): arrow keys move the
   choice and the focus together, so the sliding thumb already shows where focus is. */
.paths .seg { display: flex; width: fit-content; margin: 7px auto; }
.seg.has-thumb button[aria-selected="true"] { background: transparent; }
@media (prefers-reduced-motion: reduce) { .seg-thumb, .seg button { transition: none; } }
.seg button:focus-visible:not([aria-selected="true"]), .path:focus-visible { outline: 2px solid var(--pro); outline-offset: 2px; }
.seg button[aria-selected="true"]:focus-visible { outline: none; }
.path { margin-top: 32px; }
.path + .path { margin-top: 56px; }
.path[hidden] { display: none; }
.path-grid { display: grid; gap: 40px; }
.path-lede { max-width: 760px; margin: 0 0 28px; }
/* The demo takes the width; under it, the intro (with its button) beside the list. */
.path-text { display: grid; gap: 24px 56px; }
@media (min-width: 1000px) { .path-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; } .path-text .does, .path-text .how { margin-top: 4px; } }
.how code.chip, .path-text code.chip { white-space: nowrap; }
.path .card-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.how { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: how; }
.how li { position: relative; display: grid; gap: 6px; padding-left: 40px; counter-increment: how; min-width: 0; }
.how li::before { content: counter(how); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 750; font-size: .82rem; color: var(--pro); background: var(--pro-soft); }
.how b { color: var(--strong); font-size: .97rem; }
.how span { color: var(--text); font-size: .92rem; line-height: 1.55; }
.how li > *, .how .cmd-row > * { min-width: 0; }
.demo { position: relative; margin: 0; min-width: 0; }
.demo-video { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Hand-coding's recording on a generic laptop: a bezel round the 1600 × 956 screen, a thin base with a finger groove. */
.laptop { width: 84%; max-width: 1000px; margin: 0 auto; filter: drop-shadow(0 28px 40px rgba(0, 0, 0, var(--laptop-shadow))); }
.laptop-screen { background: var(--laptop-bezel); padding: 2.2% 2.2% 3%; border-radius: 18px 18px 6px 6px; box-shadow: inset 0 0 0 1px var(--laptop-edge); }
/* The recording is 1600 × 956 and its window's bottom corners are rounded (the wallpaper showed through them): the box
   matches the file, and all four corners round like the window's, so top and bottom line up (the user, 2026-10-29). */
.laptop-screen .demo-video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 956; border-radius: 1.6% / 2.7%; background: transparent; }
.laptop-base { position: relative; width: 112%; margin-left: -6%; height: 0; padding-bottom: 2.6%; background: linear-gradient(var(--laptop-base-1), var(--laptop-base-2)); border-radius: 2px 2px 14px 14px / 2px 2px 50% 50%; box-shadow: inset 0 1px 0 var(--laptop-edge); }
.laptop-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 14%; height: 38%; transform: translateX(-50%); background: var(--laptop-groove); border-radius: 0 0 10px 10px; }
@media (max-width: 720px) { .laptop { width: 92%; } .laptop-screen { border-radius: 10px 10px 4px 4px; } }
.demo-cap { margin: 10px 0 0; font-size: .78rem; color: var(--faint); text-align: center; }

@keyframes caret-blink { 50% { opacity: 0; } }

/* Fully AI-pilled: a terminal and a phone. */
.da-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 40px; align-items: center; max-width: 940px; margin: 0 auto; }
.da-term { --t-bg: #0d1117; --t-bar: #161b22; --t-text: #c9d1d9; --t-dim: #8b949e; --t-ok: #3fb950; --t-acc: #d2a8ff; --t-border: rgba(255, 255, 255, .12);
  border-radius: 12px; overflow: hidden; background: var(--t-bg); border: 1px solid var(--t-border); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); min-height: 380px; }
:root[data-theme="light"] .da-term { --t-bg: #ffffff; --t-bar: #f0f2f5; --t-text: #1f2328; --t-dim: #656d76; --t-ok: #1a7f37; --t-acc: #8250df; --t-border: #d0d7de; box-shadow: 0 30px 70px rgba(15, 23, 42, .14); }
.da-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; background: var(--t-bar); border-bottom: 1px solid var(--t-border); font-size: 12px; color: var(--t-dim); }
.da-bar .sy-dots { position: static; }
.da-out { padding: 16px 18px; font: 12.5px/1.65 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--t-text); }
.da-l { margin: 0; overflow-wrap: anywhere; }
.da-l + .da-l:not(.da-sub) { margin-top: 8px; }
.da-l b { font-weight: 600; color: var(--t-text); }
.da-sub { padding-left: 18px; color: var(--t-dim); }
.da-prompt { color: var(--t-text); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--t-border); margin-bottom: 12px; }
.da-g { color: var(--t-dim); }
.da-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 99px; background: var(--t-ok); }
.da-ok { color: var(--t-ok); } .da-dim { color: var(--t-dim); }
.demo-ai.is-anim .da-l:not(.da-prompt) { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.demo-ai.is-anim .da-l.is-on { opacity: 1; transform: none; }
.da-typed.is-typing::after { content: ''; display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px; margin-left: 1px; background: var(--t-text); animation: caret-blink 1s steps(1) infinite; }
.da-phone { display: flex; justify-content: center; }
.da-phone .mini-phone { width: 200px; }
.da-page { position: absolute; inset: 0; opacity: 0; transform: translateX(24%); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.da-page.is-on { opacity: 1; transform: none; }
.da-page.is-gone { transform: translateX(-24%); }
/* GrubTub's own hype shot frames fill the screen, under the drawn Dynamic Island. */
.da-screen { padding: 0; background: #fff; }
.da-screen::before { z-index: 2; }
.da-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .da-page { transition: none; } }
@media (max-width: 680px) {
  .seg, .paths .seg { display: flex; width: auto; margin: 7px; } .seg button { flex: 1; padding: .7rem .5rem; font-size: 1.05rem; }
  .da-grid { grid-template-columns: minmax(0, 1fr); }
  .da-term { min-height: 0; }
  .da-out { font-size: 10.5px; padding: 12px; }
  .da-phone .mini-phone { width: 180px; }
}
.da-grid.da-solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.mini-screen.da-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A picture with a light and a dark version: only the theme's one shows. */
:root[data-theme="light"] .when-dark, :root:not([data-theme="light"]) .when-light { display: none; }
/* The launch hero's one quiet row under the buttons (the user, 2026-10-29: the hero "feels like a wall of text"). */
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; font-size: .85rem; color: var(--faint); }
.hero-meta > span:not(.dl-row) { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta > span:not(.dl-row)::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--pro); }
.hero-meta .dl-row { margin: 0; font-size: inherit; }
.hero-meta .os-chip { padding: 2px 9px; }
.hero-launch .lede { font-size: 1.1rem; }
/* An iPad in landscape, as tall as a phone: a 693 × 478 screen (an 11" iPad Pro, 1210:834) in the phones' 9px frame, so tops and bottoms line up (Showcase::SIZE). */
.show-ipad .show-frame { border-radius: 30px; }
.show-ipad .show-frame img, .show-ipad .show-ph { width: 693px; height: 478px; object-fit: cover; border-radius: 22px; }
.show-ipad .show-frame img { background: #fff; }
.show-ipad .show-video { border-radius: 22px; }
.show-ipad figcaption { max-width: 693px; }
@media (max-width: 680px) { .show-ipad .show-frame img, .show-ipad .show-ph { width: 400px; height: auto; aspect-ratio: 1210 / 834; } }
/* Every showcase item grows on hover like the recorded ones, the iPad too, even before its recording exists (the user, 2026-10-29: "ipad should get bigger too"). */
@media (hover: hover) {
  .show-item:hover { position: relative; z-index: 2; }
  .show-item:hover .show-frame { transform: scale(1.12); box-shadow: 0 36px 90px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12); }
}
@media (prefers-reduced-motion: reduce) { .show-item:hover .show-frame { transform: none; } }
/* Wide screens: one grid with one gap all round (the user, 2026-10-30: "a perfect grid with sizes that fit the boxes and consistent
   padding"). Four columns a phone wide and four rows half a phone (with its caption) tall: the watches stacked in the first column,
   one per row, three phones beside them, then a phone and the iPad across the other three columns. Each fills its cell: a phone two
   rows, a watch one row less its caption, the iPad as tall as a phone, its screen centered in a frame as wide as its three columns. */
@media (min-width: 900px) {
  .show-row {
    --g: 24px; --c: min(238px, (100vw - 48px - 3 * var(--g)) / 4); --cap: calc(14px + .85rem * 2.8);
    --screen: calc((var(--c) - 18px) * 957 / 440); --row: calc((var(--screen) + 18px + var(--cap) - var(--g)) / 2);
    display: grid; grid-template-columns: repeat(4, var(--c)); grid-auto-rows: var(--row); grid-auto-flow: dense; gap: var(--g);
    justify-content: center; align-items: start; max-width: none;
  }
  .show-stack { display: contents; }
  .show-phone { grid-row: span 2; }
  .show-watch { grid-column: 1; }
  .show-ipad { grid-column: 2 / span 3; grid-row: 3 / span 2; }
  .show-item figcaption, .show-ipad figcaption { max-width: 100%; height: 2.8em; min-height: 0; }
  .show-phone .show-frame img, .show-phone .show-ph { width: calc(var(--c) - 18px); }
  .show-watch .show-frame img, .show-watch .show-ph { width: calc(var(--row) - var(--cap) - 20px); }
  .show-ipad .show-frame { width: 100%; box-sizing: border-box; padding: 9px calc((100% - var(--screen) * 1210 / 834) / 2); }
  .show-ipad .show-frame img, .show-ipad .show-ph { width: calc(var(--screen) * 1210 / 834); height: var(--screen); }
  .show-ipad .show-video { inset: 9px auto auto 50%; width: calc(var(--screen) * 1210 / 834); height: var(--screen); translate: -50% 0; }
}
/* An (i) beside a line, its note shown on hover, keyboard focus or a tap (a tap focuses the button), in either theme. */
.itip { position: relative; display: inline-flex; vertical-align: -3px; margin-left: 4px; }
.itip-btn { width: 18px; height: 18px; padding: 0; border-radius: 99px; font: italic 700 11px/16px Georgia, serif; text-align: center; color: var(--muted); border: 1px solid var(--border-strong); background: transparent; cursor: help; }
.itip-btn:hover, .itip-btn:focus-visible { color: var(--strong); border-color: var(--strong); outline: none; }
.itip-body { position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(240px, 70vw); padding: 10px 12px; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--border-strong); color: var(--text); font-size: .8rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.itip:hover .itip-body, .itip:focus-within .itip-body { opacity: 1; visibility: visible; }