/* GENERATED by tools/website/build.py from design/board-v2/styles.css.
   Do not edit by hand. Phone mockups and the speaking line, exactly as on
   the approved board, scoped under .phone so nothing leaks into the site. */

.phone { position: relative; width: var(--pw); aspect-ratio: 393 / 852; background: #1C1B19; border-radius: 43px; padding: 7px; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 18px 38px -22px rgba(30,26,18,0.5); }
.phone .screen { position: relative; height: 100%; width: 100%; border-radius: 36px; overflow: hidden; font-size: calc(var(--pw) * 0.04326); line-height: 1.38; background: var(--sc-bg); color: var(--sc-ink); display: flex; flex-direction: column; }
.phone .screen--xl { font-size: calc(var(--pw) * 0.05854); }
.phone .screen--paper { --sc-bg: #F5F3EE; --sc-ink: #151515; --sc-ink2: #5C5A55; --sc-rule: #DAD6CC; --sc-btn: #151515; --sc-btn-ink: #F5F3EE; --sl-teal: #0A7F78; --sl-rule: #DAD6CC; --sc-island: #0D0D0C; }
.phone .screen--dark { --sc-bg: #141312; --sc-ink: #EDEAE3; --sc-ink2: #A09A8F; --sc-rule: #2E2C28; --sc-btn: #EDEAE3; --sc-btn-ink: #141312; --sl-teal: #4FD8BE; --sl-rule: #2E2C28; --sc-island: #000000; }
.phone .screen--upgrade { --sc-rule: #3A3730; --pw-rule: #1F1E1C; --pw-line: #232220; }
.phone .texture { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.phone .texture svg { display: block; width: 100%; height: 100%; }
.phone .pw-rule { stroke: var(--pw-rule); }
.phone .pw-line { stroke: var(--pw-line); stroke-linecap: butt; }
.phone .legalrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2em 1em; font-size: 0.72em; color: var(--sc-ink2); padding-top: 0.9em; }
.phone .island { position: absolute; top: 0.72em; left: 50%; transform: translateX(-50%); width: 7.1em; height: 2.05em; border-radius: 999px; background: var(--sc-island); z-index: 6; }
.phone .statusbar { position: relative; z-index: 5; height: 3.35em; padding: 0.92em 1.55em 0; display: flex; align-items: flex-start; justify-content: space-between; font-size: 0.86em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink); flex: 0 0 auto; }
.phone .statusbar .sb-icons { display: flex; align-items: center; gap: 0.42em; padding-top: 0.12em; }
.phone .homebar { position: absolute; bottom: 0.62em; left: 50%; transform: translateX(-50%); width: 7.8em; height: 0.31em; border-radius: 999px; background: var(--sc-ink); opacity: 0.34; z-index: 6; }
.phone .body { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 1.18em 2.5em; }
.phone .spacer { flex: 1 1 auto; min-height: 0.3em; }
.phone .caps { font-size: 0.63em; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink2); }
.phone .caps--ink { color: var(--sc-ink); }
.phone .disp { font-family: var(--serif); font-weight: 400; letter-spacing: -0.022em; line-height: 1.08; font-size: 2.2em; }
.phone .h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.018em; line-height: 1.14; font-size: 1.66em; }
.phone .h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.014em; line-height: 1.2; font-size: 1.28em; }
.phone .quote { font-family: var(--serif); font-style: italic; letter-spacing: -0.01em; line-height: 1.3; font-size: 1.1em; }
.phone .sub { font-size: 0.84em; line-height: 1.5; color: var(--sc-ink2); }
.phone .meta { font-size: 0.73em; color: var(--sc-ink2); font-variant-numeric: tabular-nums; }
.phone .num { font-variant-numeric: tabular-nums; }
.phone .hr { height: 1px; background: var(--sc-rule); border: 0; margin: 0; }
.phone .btn { display: block; width: 100%; border: 0; border-radius: 1.05em; background: var(--sc-btn); color: var(--sc-btn-ink); font-family: inherit; font-size: 0.97em; font-weight: 600; padding: 1em 1em; text-align: center; cursor: pointer; }
.phone .btn-text { display: block; width: 100%; border: 0; background: transparent; color: var(--sc-ink2); font-family: inherit; font-size: 0.82em; font-weight: 500; padding: 0.8em 0 0; text-align: center; cursor: pointer; }
.phone .btn-inline { border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 0.8em; font-weight: 600; color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; cursor: pointer; }
.phone .btn-round { width: 5em; height: 5em; border-radius: 999px; border: 0; background: var(--sc-btn); color: var(--sc-btn-ink); font-family: inherit; font-size: 1em; font-weight: 600; cursor: pointer; display: grid; place-items: center; margin: 0 auto; }
.phone .opt { display: flex; align-items: center; gap: 0.8em; border: 1px solid var(--sc-rule); border-radius: 0.9em; padding: 0.82em 0.95em; background: transparent; width: 100%; font-family: inherit; color: inherit; text-align: left; cursor: pointer; }
.phone .opt + .opt { margin-top: 0.48em; }
.phone .opt[aria-checked="true"] { border-color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-ink); }
.phone .opt-label { font-size: 0.92em; font-weight: 500; flex: 1 1 auto; }
.phone .opt-sub { font-size: 0.73em; color: var(--sc-ink2); display: block; font-weight: 400; margin-top: 0.1em; }
.phone .opt-tick { flex: 0 0 auto; color: var(--sc-ink); opacity: 0; }
.phone .opt[aria-checked="true"] .opt-tick { opacity: 1; }
.phone .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8em; padding: 0.55em 0; border-bottom: 1px solid var(--sc-rule); font-size: 0.82em; }
.phone .kv:last-child { border-bottom: 0; }
.phone .kv .k { color: var(--sc-ink2); }
.phone .kv .v { font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 0.4em; }
.phone .kv .from { color: var(--sc-ink2); }
.phone .kv .to { font-weight: 600; }
.phone .playrow { display: flex; align-items: center; gap: 0.55em; }
.phone .play { flex: 0 0 auto; width: 2em; height: 2em; border-radius: 999px; border: 1px solid var(--sc-ink); background: transparent; color: var(--sc-ink); display: grid; place-items: center; padding: 0; cursor: pointer; }
.phone .recdot { width: 0.46em; height: 0.46em; border-radius: 999px; background: var(--warm); flex: 0 0 auto; }
.phone .reclamp { display: inline-flex; align-items: center; gap: 0.45em; }
.phone .step { display: flex; align-items: center; gap: 0.6em; font-size: 0.84em; padding: 0.4em 0; }
.phone .step .mark { width: 1em; flex: 0 0 auto; color: var(--sc-ink); }
.phone .step--waiting { color: var(--sc-ink2); }
.phone .step--waiting .mark { color: var(--sc-ink2); }
.phone .marks { display: flex; align-items: center; gap: 0.6em; }
.phone .mk { width: 0.5em; height: 0.5em; border-radius: 999px; flex: 0 0 auto; }
.phone .mk--done { background: var(--sc-ink); opacity: 0.82; }
.phone .mk--repaired { border: 1px solid var(--sc-ink2); }
.phone .mk--today { border: 1.4px solid var(--sc-ink); }
.phone .cap-line { margin: 0.4em 0 0; font-size: 0.68em; line-height: 1.42; color: var(--sc-ink2); }
.phone .srow { display: flex; align-items: flex-end; gap: 0.5em; border-bottom: 1px solid var(--sc-rule); height: 1.32em; }
.phone .srow .sday { flex: 0 0 auto; width: 1.5em; font-size: 0.6em; color: var(--sc-ink2); font-variant-numeric: tabular-nums; line-height: 2.1; }
.phone .srow .sline { flex: 1 1 auto; min-width: 0; }
.phone .srow--today { border-bottom-color: var(--sc-ink); }
.phone .shollow { width: 0.45em; height: 0.45em; border-radius: 999px; border: 1px solid var(--sc-ink2); margin-bottom: 0.18em; }
.phone .chap { font-size: 0.6em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink); padding: 0.9em 0 0.35em; }
.phone .chap span { color: var(--sc-ink2); letter-spacing: 0.06em; }
.phone .tcol { font-size: 0.66em; line-height: 1.45; color: var(--sc-ink2); }
.phone .tcol b { color: var(--sc-ink); font-weight: 600; }
.phone .tcol u { text-decoration: none; border-bottom: 1.5px solid var(--sl-teal); }
.phone .concept { display: inline-block; font-size: 0.6em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink); border: 1px solid var(--sc-rule); border-radius: 999px; padding: 0.3em 0.7em; }
.phone .ruled { background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(1.32em - 1px), var(--sc-rule) calc(1.32em - 1px), var(--sc-rule) 1.32em); }
.sl { display: block; width: 100%; height: auto; }
.sl-track { stroke: var(--sl-rule); }
.sl-speech { stroke: var(--sl-teal); stroke-linecap: butt; }
.sl-main { stroke: var(--sl-teal); stroke-linecap: butt; }
.sl-hedge { stroke: var(--sl-teal); stroke-linecap: round; }
.sl-zone { stroke: var(--sl-rule); }
.sl-now { stroke: var(--sc-ink, var(--ink)); }
.sl-ztxt { fill: var(--sc-ink2, var(--ink2)); font-family: var(--sans); letter-spacing: 0.04em; }
.sl-lead { stroke: var(--ink2); }
.sl-axis { stroke: var(--board-rule-strong); }
.sl-txt { fill: var(--ink); font-family: var(--sans); font-weight: 600; }
.sl-txt2 { fill: var(--ink2); font-family: var(--sans); }

@media (prefers-color-scheme: dark) {
  .phone { background: #34322D; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 18px 38px -24px rgba(0,0,0,0.8); }
  .phone .screen--paper { --sc-bg: #141312; --sc-ink: #EDEAE3; --sc-ink2: #A09A8F; --sc-rule: #2E2C28; --sc-btn: #EDEAE3; --sc-btn-ink: #141312; --sl-teal: #4FD8BE; --sl-rule: #2E2C28; --sc-island: #000000; }
  .phone .screen--dark { --sc-bg: #0B0A09; --sc-rule: #26241F; --sl-rule: #26241F; }
  .phone .screen--upgrade { --sc-bg: #0B0A09; --sc-rule: #34312B; --pw-rule: #141312; --pw-line: #191817; }
}