/* Silan inner pages. Loaded after css/site.css and uses its tokens and classes.
   Only page-level parts live here: the page hero, big scaled drawings, step cards, detail grids,
   feature cards, use-case parts, tables, code blocks, plan cards and the legal article. */

/* Page hero: left aligned */
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.p-hero { padding: 80px 0 80px; background: radial-gradient(ellipse 60% 70% at 20% 0%, #FFFFFF0A, transparent); }
.p-hero .wrap { display: flex; flex-direction: column; align-items: flex-start; }
.p-hero h1 { margin-top: 24px; max-width: 940px; }
.p-hero .lede { margin-top: 24px; max-width: 660px; }
.p-hero .btns { justify-content: flex-start; margin-top: 32px; }
.p-hero-short { padding-bottom: 56px; }
.p-hero .chips { margin-top: 28px; }
code { font-family: var(--mono); font-size: .9em; padding: 1px 5px; border-radius: 5px; background: #FFFFFF0F; color: #FFFFFFE0; }

/* A fixed-size drawing scaled to its column. Unlike .fit it may grow, up to data-max (pages.js sets --k). */
.pfit { position: relative; width: 100%; }
html:not(.js) .pfit { overflow: hidden; }
.js .pfit { height: var(--fit-h, auto); }
.js .pfit > .fit-in { position: absolute; top: 0; left: var(--fit-x, 0px); transform: scale(var(--k, 1)); transform-origin: 0 0; }
.p-story { padding: 0 0 96px; }

/* How it works: numbered step cards */
.hiw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.hiw li { display: flex; flex-direction: column; gap: 56px; min-height: 200px; padding: 24px 28px 40px; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; }
.hiw-n { font-family: var(--mono); font-size: 12px; color: var(--tag); }
.hiw p { font-size: 18px; line-height: 26px; font-weight: 500; text-wrap: balance; }

/* Details: a 2 x 2 grid of small facts */
.det { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: #FFFFFF0D; border: 1px solid #FFFFFF0D; border-radius: 16px; }
.det-cell { padding: 32px 32px 34px; background: var(--surface); }
/* An odd number of cells: the last one takes the full row, so no empty cell shows. */
.det > .det-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
.det-ic { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: 9px; background: #FFFFFF05; }
.det-ic .i { width: 16px; height: 16px; color: #FFFFFFCC; }
.det-cell h3 { margin-top: 22px; font-size: 18px; line-height: 26px; font-weight: 500; }
.det-cell p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--muted); }

/* Feature cards: a small still scene on top, the whole card is one link */
.p-grid { padding: 0 0 96px; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fcard { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.fcard:hover { border-color: #FFFFFF26; background: #141414; }
.fcard:has(.fc-link:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.fc-scene { flex: none; overflow: hidden; background: #0D0D0D; border-bottom: 1px solid var(--line); pointer-events: none; }
.fc-scene .frame { background: transparent; border-color: transparent; }
.fc-text { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; }
.fc-text h3 { font-size: 20px; line-height: 26px; font-weight: 500; }
.fc-text p { margin-top: 6px; font-size: 15px; line-height: 24px; color: var(--muted); text-wrap: pretty; }
.fc-text .more { margin-top: 18px; }
.fc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fc-link:focus-visible { outline: none; }
.fcard:hover .more { gap: 10px; }
.fcard-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-top: 16px; }
.fcard-wide .fc-text { justify-content: center; padding: 48px; }
.fcard-wide .fc-text h3 { font-size: 26px; line-height: 32px; }
.fcard-wide .fc-scene { border-bottom: 0; border-left: 1px solid var(--line); }

/* Use cases: the run window (terminal + phone), two-panel runs, the drawn window stage */
.uc-window { padding: 8px; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 28px; }
.uc-term-run { display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: 560px; overflow: hidden; background: #0B0B0B; border: 1px solid var(--line); border-radius: 20px; }
.uc-term { display: flex; flex-direction: column; min-width: 0; font-family: var(--mono); font-size: 14px; line-height: 22px; color: #FFFFFFCC; }
.uc-term-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: #FFFFFF80; }
.uc-dots { display: inline-flex; gap: 7px; }
.uc-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF26; }
.uc-term-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 28px; }
.uc-term-body p { display: flex; gap: 12px; }
.uc-term-body p > span { flex: none; width: 12px; color: #FFFFFF73; }
.uc-prompt { padding: 14px 16px; background: #FFFFFF08; border: 1px solid #FFFFFF1A; border-radius: 10px; color: #fff; }
.uc-dim { color: #FFFFFF80; padding-left: 18px; }
.uc-dim > span { width: auto !important; }
.uc-say { color: #fff; }
.uc-say > span { color: #fff !important; font-size: 10px; }
.uc-out { padding-left: 24px; }
/* Round-2 batch 3: the RC-4b edit diff and the answer's list, drawn from RC-4b-terminal.txt. */
.uc-diff { padding: 8px 0; margin-left: 24px; background: #FFFFFF05; border: 1px solid #FFFFFF12; border-radius: 8px; font-size: 13px; line-height: 20px; }
.uc-term-body .uc-diff p { display: grid; grid-template-columns: 3ch 2ch minmax(0, 1fr); gap: 0; padding: 0 12px; color: #FFFFFFB3; }
.uc-diff b { font-weight: 400; color: #FFFFFF59; text-align: right; padding-right: 1ch; }
.uc-diff i { font-style: normal; }
.uc-diff code { font: inherit; padding: 0; border-radius: 0; background: none; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.uc-diff .del { background: #F8717124; color: #FECACA; }
.uc-diff .add { background: #4ADE8024; color: #BBF7D0; }
.uc-diff .del b, .uc-diff .add b { color: inherit; opacity: .7; }
.uc-list { display: flex; flex-direction: column; gap: 6px; }
.uc-list li { display: flex; gap: 10px; }
.uc-list li::before { content: '-'; flex: none; color: #FFFFFF73; }
.uc-dev { display: grid; place-items: center; padding: 40px 0; border-left: 1px solid var(--line); background: radial-gradient(ellipse 70% 60% at 50% 40%, #FFFFFF08, transparent); }
.uc-phone { width: 248px; --lift: 0 24px 64px #000000CC; }
.uc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.uc-pair figure { margin: 0; min-width: 0; }
.uc-pair figcaption { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--muted); }
.uc-pair figcaption span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%; font-family: var(--mono); font-size: 11px; color: #FFFFFFCC; }
.uc-stage-fit { margin-top: 0; }
.uc-bubble { max-width: 470px; }
.uc-working { margin-top: 16px; }
@media (min-width: 761px) {
  .uc-stage { height: 820px; }
  .uc-stage .hero-app, .uc-stage::before { top: 90px; }
  .uc-stage .hero-phone { top: 0; }
  .uc-stage .control-card { top: 600px; }
}

/* Use cases: the three step cards */
.uc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uc-steps li { display: flex; flex-direction: column; gap: 22px; min-height: 300px; padding: 26px 28px 32px; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; }
.uc-k { display: flex; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tag); }
.uc-task { padding: 14px 16px; background: #0B0B0B; border: 1px solid #FFFFFF14; border-radius: 10px; font-family: var(--mono); font-size: 13px; line-height: 21px; color: #FFFFFFE0; white-space: pre-line; }
.uc-v { font-size: 18px; line-height: 26px; font-weight: 500; text-wrap: pretty; }
.uc-note { margin-top: 20px; font-size: 14px; color: var(--muted); }

/* Use cases: the facts table */
.uc-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.facts { margin: 0; overflow: hidden; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; }
.facts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 18px 24px; border-top: 1px solid #FFFFFF0D; }
.facts > div:first-of-type { border-top: 0; }
.facts dt { font-size: 14px; line-height: 24px; color: var(--muted); }
.facts dd { margin: 0; font-size: 15px; line-height: 24px; color: var(--fg); }
.facts dd a { text-decoration: underline; text-decoration-color: #FFFFFF4D; text-underline-offset: 4px; transition: text-decoration-color .2s var(--ease); }
.facts dd a:hover { text-decoration-color: #fff; }

/* Platform pages: a drawn Silan window in plain HTML (it reflows, it is not scaled). The sidebar uses the home classes. */
.p-win { display: flex; min-height: 600px; overflow: hidden; background: #0F0F0F; border: 1px solid #FFFFFF1A; border-radius: 20px; box-shadow: 0 24px 64px #000000CC; }
.ph-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dvc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.dvc { display: flex; gap: 18px; min-height: 252px; padding: 16px; background: #141414; border: 1px solid #FFFFFF0D; border-radius: 14px; }
.dvc-thumb { width: 150px; flex: none; display: grid; place-items: center; }
.dvc-phone { width: 104px; }
.dvc .dvc-pad { width: 150px; }
.dvc-blank { display: block; width: 104px; aspect-ratio: 466 / 968; border-radius: 17px; background: #0B0B0B; border: 3px solid #262626; }
.dvc-android { border-radius: 12px; }
.dvc-text { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.dvc-name { font-size: 15px; font-weight: 600; color: #fff; }
.dvc-kind { margin-top: 2px; font-size: 12.5px; color: #FFFFFF80; }
.dvc-chip { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11.5px; color: #FFFFFFB3; }
.dvc-chip .i { width: 12px; height: 12px; }
.dvc-st { margin-top: 10px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #FFFFFFCC; }
.dvc-st .dot { margin-left: 0; flex: none; }
.dvc-ok { background: var(--success); }
.conn { display: flex; flex-direction: column; padding: 16px 20px 20px; }
.conn-th { display: flex; justify-content: space-between; padding: 0 14px 10px 58px; font-family: var(--mono); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #FFFFFF66; }
.conn-row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px; border-top: 1px solid var(--line); }
.conn-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: #1A1A1A; border: 1px solid #FFFFFF0D; }
.conn-ic .i { width: 15px; height: 15px; color: #FFFFFFCC; }
.conn-name { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conn-name b { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.conn-name em { display: inline-flex; align-items: center; gap: 7px; font-style: normal; font-size: 12px; color: #FFFFFF99; white-space: nowrap; }
.conn-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF33; }
.conn-dot.is-on { background: var(--success); }
.conn-ask { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: #161616; border: 1px solid var(--border-strong); border-radius: 12px; }
.conn-ask p { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #FFFFFFCC; }
.conn-ask p b { color: #fff; font-weight: 600; }
.conn-ask p .i { width: 16px; height: 16px; color: #FFFFFFB3; }
.conn-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 7px; font-size: 12px; color: #FFFFFFCC; white-space: nowrap; }
.cb .i { width: 12px; height: 12px; }
.cb-on { background: var(--fg); border-color: transparent; color: var(--bg); }
.soon-chip { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; font-weight: 400; color: var(--muted); vertical-align: 2px; }
.p-station .stage-fit { margin-top: 0; }

/* Tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; font-size: 15px; line-height: 22px; }
.tbl th, .tbl td { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid #FFFFFF0D; }
.tbl thead th { padding-block: 14px; border-top: 0; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .6px; color: var(--muted); }
.tbl tbody th { font-weight: 500; color: var(--fg); }
.tbl td { color: var(--muted); }
.tbl-dev { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tbl-dev .i { color: #FFFFFFB3; }
.tbl-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.tbl-notes li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 22px; color: var(--muted); }
.tbl-notes .i { width: 15px; height: 15px; margin-top: 3px; }

/* Code blocks with Copy buttons, and code tabs (js/pages.js) */
.code-set { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.code-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.code-tabs button { height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: #FFFFFF05; color: #FFFFFFB3; font-size: 14px; font-weight: 500; transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
.code-tabs button:hover { color: #fff; border-color: #FFFFFF33; }
.code-tabs button[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.code-panel { display: flex; flex-direction: column; gap: 12px; }
.code-panel[hidden] { display: none; }
.code-box { overflow: hidden; background: #0B0B0B; border: 1px solid #FFFFFF14; border-radius: 16px; }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: #FFFFFF80; }
.code-bar > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.code-copy { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 7px; font-family: var(--sans); font-size: 12.5px; color: #FFFFFFCC; transition: color .2s var(--ease), border-color .2s var(--ease); }
.code-copy:hover { color: #fff; border-color: #FFFFFF40; }
.code-copy .i { width: 13px; height: 13px; }
.code-copy.is-done { color: var(--success); }
.code-box pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 22px; color: #FFFFFFE0; tab-size: 2; }
.code-box pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; color: inherit; }
.code-note { font-size: 14px; line-height: 22px; color: var(--muted); }

/* Download page */
.dl-grid, .dl-devs { display: grid; gap: 1px; overflow: hidden; background: #FFFFFF0D; border: 1px solid #FFFFFF0D; border-radius: 16px; }
.dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-card, .dl-devs > div { display: flex; align-items: center; gap: 16px; padding: 24px; background: var(--surface); }
.dl-card .det-ic, .dl-devs .det-ic { flex: none; }
.dl-name, .dl-devs p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-name b, .dl-devs b { font-size: 16px; line-height: 24px; font-weight: 500; }
.dl-name span, .dl-devs span { font-size: 14px; line-height: 21px; color: var(--muted); }
.is-off .dl-name b { color: #FFFFFFB3; }
.dl-get { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.dl-get:hover { background: #fff; transform: translateY(-1px); }
.dl-get .i { width: 18px; height: 18px; }
.dl-more { margin-top: 24px; }
.dl-needs { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.next-card { position: relative; display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.next-card:hover { border-color: #FFFFFF26; background: #141414; }
.next-card h3 { margin-top: 56px; font-size: 18px; line-height: 26px; font-weight: 500; }
.next-card p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--muted); }
.next-go { position: absolute; top: 24px; right: 24px; width: 18px; height: 18px; color: #FFFFFF80; transition: transform .3s var(--ease), color .3s var(--ease); }
.next-card:hover .next-go { color: #fff; transform: translateX(2px); }

/* Team page */
.p-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 1px; margin-top: 40px; overflow: hidden; background: #FFFFFF0D; border: 1px solid #FFFFFF0D; border-radius: 14px; }
.p-facts span { display: grid; place-items: center; min-height: 64px; padding: 8px 20px; background: var(--surface); font-size: 15px; font-weight: 500; text-align: center; }
.team-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.team-cards > div { padding: 24px 24px 28px; background: var(--surface); border: 1px solid #FFFFFF0D; border-radius: 16px; }
.team-cards h3 { margin-top: 28px; font-size: 18px; line-height: 26px; font-weight: 500; }
.team-cards p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--muted); }
.hiw-t li { gap: 40px; }
.hiw-t h3 { font-size: 18px; line-height: 26px; font-weight: 500; text-wrap: balance; }
.hiw-t li p { margin-top: 4px; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--muted); }
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; padding: 32px; background: var(--surface); border: 1px solid #FFFFFF14; border-radius: 20px; }
.pcard.is-team { background: var(--fg); border-color: transparent; color: var(--bg); }
.pc-name { font-size: 18px; font-weight: 600; }
.pc-line { margin-top: 12px; font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.6px; text-wrap: balance; }
.pc-btn { width: 100%; margin-top: 28px; }
.btn-ink { background: var(--bg); color: var(--fg); }
.btn-ink:hover { background: #262626; transform: translateY(-1px); }
.pc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #FFFFFF14; }
.is-team .pc-list { border-top-color: #0A0A0A1F; }
.pc-list li { display: flex; gap: 10px; font-size: 15px; line-height: 22px; }
.pc-list .i { margin-top: 3px; color: #FFFFFFB3; }
.is-team .pc-list .i { color: #0A0A0AB3; }
.pc-foot { margin-top: auto; padding-top: 24px; font-size: 14px; color: var(--muted); }
.is-team .pc-foot { color: #0A0A0AA6; }
.faq-head a { text-decoration: underline; text-decoration-color: #FFFFFF4D; text-underline-offset: 4px; }
.faq-head a:hover { text-decoration-color: #fff; }
.final-note { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* Builders page */
.ways .det-cell .more { margin-top: 18px; }
.b-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.b-run-text .lede { margin-top: 16px; }

/* Legal article: a list of sections on the left, the text on the right. Grey bars stand in for text that is not signed off. */
.legal { padding: 72px 0 128px; }
.legal-in { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 72px; align-items: start; }
.toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; }
.toc-head { margin-bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.toc a, .toc-m a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 20px; color: var(--muted); transition: color .2s var(--ease); }
.toc a:hover, .toc a.is-on, .toc-m a:hover { color: var(--fg); }
.legal-doc { max-width: 760px; }
.legal-doc h1 { margin-top: 24px; font-size: 64px; line-height: 68px; letter-spacing: -1.9px; }
.legal-meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.legal-meta .ph-label.inline { margin-left: 0; }
.legal-note { margin-top: 10px; font-size: 14px; line-height: 22px; color: #FFFFFF66; }
.toc-m { display: none; }
/* Short legal page (Privacy, walkthrough fix S6): one column, real text, no table of contents. */
.legal-short .legal-doc { margin: 0 auto; max-width: 680px; }
.legal-short .legal-doc h1 { margin-top: 0; }
.legal-short .legal-sec { padding-top: 36px; }
.legal-short .legal-sec:first-of-type { margin-top: 40px; padding-top: 40px; }
.legal-short .legal-sec h2 { font-size: 22px; line-height: 30px; }
.legal-short .legal-sec p { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--muted); }
.legal-short .legal-sec a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #FFFFFF55; transition: text-decoration-color .2s var(--ease); }
.legal-short .legal-sec a:hover { text-decoration-color: currentColor; }
.legal-sec { padding-top: 44px; scroll-margin-top: 88px; }
.legal-sec:first-of-type { margin-top: 36px; border-top: 1px solid var(--line); }
.legal-sec h2 { font-size: 26px; line-height: 34px; font-weight: 500; letter-spacing: -0.5px; }
/* Real legal text (Terms, 9 Nov): paragraphs and lists, same look as the Privacy page. */
.legal-sec p, .legal-sec ul, .legal-sec ol { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--muted); }
.legal-sec ul, .legal-sec ol { padding-left: 22px; }
.legal-sec ul { list-style: disc; }
.legal-sec ol { list-style: decimal; }
.legal-sec li { margin-top: 6px; padding-left: 4px; }
.legal-sec li::marker { color: #FFFFFF55; }
.legal-sec a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #FFFFFF55; }
.legal-sec a:hover { text-decoration-color: currentColor; }
.sk { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.sk span { display: block; height: 9px; border-radius: 5px; background: #FFFFFF14; }
.sk > span:nth-child(4n+2) { width: 91%; }
.sk > span:nth-child(4n+3) { width: 96%; }
.sk > span:nth-child(4n), .sk > span:last-child:not(:first-child) { width: 58%; }
.sk-list { gap: 18px; }
.sk-list li { position: relative; padding-left: 22px; }
.sk-list li::before { content: ""; position: absolute; left: 4px; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF40; }
.sk-list li:nth-child(odd) span { width: 94%; }
.sk-list li:nth-child(3n+2) span { width: 78%; }
.sk-list li:nth-child(4n) span { width: 64%; }

/* 404: the mark, the line and two ways back */
.nf { padding: 128px 0 152px; text-align: center; background: radial-gradient(ellipse 50% 60% at 50% 20%, #FFFFFF0D, transparent); }
.nf-in { display: flex; flex-direction: column; align-items: center; }
.nf-tile { display: grid; place-items: center; width: 112px; height: 112px; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: 0 16px 48px #000000B3; }
.nf .ph-label.inline { margin: 20px 0 0; }
.nf h1 { margin-top: 24px; }
.nf .lede { margin-top: 20px; }
.nf .btns { margin-top: 40px; }

/* Call to action at the end of a page */
.p-final h2 { max-width: 900px; font-size: 64px; line-height: 68px; letter-spacing: -1.9px; }
.p-final .btns { margin-top: 40px; }

@media (max-width: 960px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcard-wide { grid-template-columns: minmax(0, 1fr); }
  .fcard-wide .fc-scene { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
  .fcard-wide .fc-text { padding: 22px 24px 24px; }
  .fcard-wide .fc-text h3 { font-size: 20px; line-height: 26px; }
  .uc-term-run { grid-template-columns: minmax(0, 1fr); }
  .uc-dev { border-left: 0; border-top: 1px solid var(--line); }
  .uc-pair, .uc-steps, .uc-facts { grid-template-columns: minmax(0, 1fr); }
  .uc-steps li { min-height: 0; }
  .p-win .sb { display: none; }
  .team-cards, .next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next > .next-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .b-run { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .legal-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .toc-m { display: block; margin-top: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .toc-m summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; list-style: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
  .toc-m[open] summary .i { transform: rotate(180deg); }
  .toc-m ol { padding: 0 18px 14px; }
  .toc-m + .legal-sec { margin-top: 28px; }
}
@media (max-width: 760px) {
  .p-hero { padding: 40px 0 48px; }
  .p-hero h1 { margin-top: 20px; }
  .p-hero .lede { margin-top: 18px; }
  .p-story { padding-bottom: 64px; }
  .hiw, .det, .fgrid { grid-template-columns: minmax(0, 1fr); }
  .hiw li { min-height: 0; gap: 28px; padding: 20px 22px 26px; }
  .det-cell { padding: 24px 22px 26px; }
  .p-grid { padding-bottom: 64px; }
  .p-final h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.1px; }
  .uc-window { padding: 6px; border-radius: 22px; }
  .uc-term-run { min-height: 0; border-radius: 16px; }
  .uc-term { font-size: 13px; line-height: 20px; }
  .uc-term-body { padding: 18px 16px 22px; }
  .uc-diff { margin-left: 0; font-size: 12px; line-height: 18px; }
  .uc-term-body .uc-diff p { padding: 0 8px; }
  .uc-out { padding-left: 12px; }
  .uc-dev { padding: 28px 0; }
  .uc-phone { width: 210px; }
  .p-story .uc-stage-fit { margin: 0; }
  .uc-steps li { padding: 22px 20px 24px; gap: 18px; }
  .uc-v { font-size: 17px; line-height: 25px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 18px; }
  .p-win { min-height: 0; border-radius: 16px; }
  .dvc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .dvc { min-height: 0; gap: 14px; padding: 12px; }
  .dvc-thumb { width: 92px; }
  .dvc-phone, .dvc-blank { width: 70px; }
  .dvc .dvc-pad { width: 92px; }
  .dvc-chip { margin-top: 14px; }
  .conn { padding: 12px; }
  .conn-row { gap: 10px; padding: 0 8px; }
  .conn-th { padding: 0 8px 10px 50px; }
  .conn-ask { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tbl thead { display: none; }
  .tbl tr { display: block; padding: 16px 18px; border-top: 1px solid #FFFFFF0D; }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl th, .tbl td { display: block; padding: 0; border: 0; }
  .tbl td { margin-top: 10px; }
  .tbl td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; line-height: 18px; color: #FFFFFF66; }
  .code-box pre { padding: 16px; font-size: 12.5px; line-height: 20px; }
  .code-bar { padding-left: 14px; }
  .dl-grid, .dl-devs, .next, .team-cards, .pcards { grid-template-columns: minmax(0, 1fr); }
  .dl-card, .dl-devs > div { padding: 20px; }
  .next-card { min-height: 0; }
  .p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pcard { padding: 24px; }
  .pc-line { font-size: 24px; line-height: 30px; }
  .legal { padding: 40px 0 88px; }
  .legal-doc h1 { margin-top: 20px; font-size: 44px; line-height: 46px; letter-spacing: -1.3px; }
  .legal-sec { padding-top: 36px; }
  .legal-sec h2 { font-size: 22px; line-height: 30px; }
  .nf { padding: 88px 0 104px; }
  .nf-tile { width: 96px; height: 96px; border-radius: 22px; }
}