:root {
  --canvas: #F6F7FB;
  --surface: #FFFFFF;
  --surface-subtle: #F0F1F6;
  --text: #232136;
  --muted: #646579;
  --line: #E3E4EC;
  --control-border: #8B8C9F;
  --accent: #6D03FC;
  --accent-soft: #F1EAFE;
  --on-accent: #FFFFFF;
  --success: #326319;
  --success-surface: #EDF7E7;
  --warning: #845100;
  --warning-surface: #FFF4DB;
  --danger: #B32D43;
  --danger-surface: #FDEDF0;
  --focus: #6D03FC;
  --completion: #347519;
  --on-completion: #FFFFFF;
  --completion-border: #286011;
  --brand-violet: #6D03FC;
  --brand-violet-hover: #5800D4;
  --brand-lime: #BCFC30;
  --brand-ink: #232136;
  --brand-paper: #FFFFFF;
  --brand-canvas: #F6F7FB;
  --rail: #5A00DB;
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --radius-chip: 6px;
  --radius-control: 10px;
  --radius-panel: 16px;
  --radius-dialog: 24px;
  --radius-pill: 999px;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --ease-ui: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
  --canvas: #161621;
  --surface: #20202E;
  --surface-subtle: #2A2A3B;
  --text: #F5F4FD;
  --muted: #B3B2C6;
  --line: #39394E;
  --control-border: #828298;
  --accent: #C2A1FF;
  --accent-soft: #352551;
  --on-accent: #24133C;
  --success: #B5E596;
  --success-surface: #243C26;
  --warning: #F4CF83;
  --warning-surface: #40351F;
  --danger: #FFAFBC;
  --danger-surface: #44242E;
  --focus: #BCFC30;
  --completion: #BCFC30;
  --on-completion: #232136;
  --completion-border: #BCFC30;
  color-scheme: dark;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
  --motion-fast: 0ms;
  --motion-standard: 0ms;
}
}
:root {
  --text-title: 1.625rem;
  --text-title-weight: 750;
  --text-title-line: 1.25;
  --title-first-line: calc(var(--text-title) * var(--text-title-line));
  --text-item: 1rem;
  --text-item-line: 1.5;
  --text-item-weight: 500;
  --text-item-quantity-weight: 400;
  --row-first-line: calc(var(--text-item) * var(--text-item-line));
  --item-band: max(var(--control-h), calc(var(--row-first-line) + 2 * var(--space-12)));
  --item-text-inset: calc((var(--item-band) - var(--row-first-line)) / 2);
  --item-control-inset: calc((var(--item-band) - var(--control-h)) / 2);
  --list-band: max(var(--control-h), calc(var(--row-first-line) + 2 * var(--space-16)));
  --list-text-inset: calc((var(--list-band) - var(--row-first-line)) / 2);
  --list-control-inset: calc((var(--list-band) - var(--control-h)) / 2);
  --text-section: 1rem;
  --text-section-weight: 700;
  --text-meta: 0.875rem;
  --text-meta-weight: 500;
  --text-label: 0.8125rem;
  --text-label-weight: 650;
  --text-nav: 0.875rem;
  --text-nav-weight: 650;
  --text-group: 0.875rem;
  --text-group-weight: 650;
  --text-count: 0.8125rem;
  --text-count-weight: 650;
  --text-note-h1: var(--text-item);
  --text-note-h1-weight: 750;
  --text-note-h2: var(--text-item);
  --text-note-h2-weight: 650;
  --text-note-h3: var(--text-meta);
  --text-note-h3-weight: 650;
  --tap-min: 44px;
  --control-h: 48px;
  --settings-measure: 40rem;
  --setting-label-min: 12rem;
  --note-measure: 36rem;
  --activity-measure: var(--note-measure);
  --gap-rail-entry: var(--space-4);
  --gap-rail-label: var(--space-8);
  --gap-screen: var(--space-20);
  --gap-list-footer: var(--space-12);
  --gap-field-label: var(--space-8);
  --gap-form-field: var(--space-12);
  --gap-form-group: var(--space-24);
  --gap-note-block: var(--space-8);
  --gap-settings-section: var(--space-32);
  --menu-inset: var(--space-8);
  --radius-menu-entry: calc(var(--radius-panel) - var(--menu-inset));
  --gap-menu-group: var(--space-4);
  --tab-marker: 3px;
  --menu-offset: var(--space-4);
  --menu-edge: var(--space-8);
  --nav-height: calc(var(--control-h) + 2 * var(--space-8) + 1px + env(safe-area-inset-bottom));
  --gap-float: var(--space-12);
  --fab-size: 56px;
  --float-bottom: calc(var(--nav-height) + var(--gap-float));
  --page-clearance: calc(var(--float-bottom) + var(--fab-size) + var(--gap-float));
  --reorder-bar-height: calc(var(--control-h) + 2 * var(--space-8));
  --reorder-clearance: calc(var(--reorder-bar-height) + var(--space-8));
  --page-gutter: var(--space-20);
  --rail-width: 208px;
  --inspector-width: 320px;
  --pane-measure: 41rem;
  --pane-panel: calc(var(--pane-measure) + 2 * var(--page-gutter));
  --pane-min: 37.5rem;
  --short-height: 32rem;
  --topbar-height: calc(var(--control-h) + 1px);
  --rail-surface: var(--rail);
  --rail-current: var(--brand-paper);
  --rail-current-ink: var(--rail);
  --rail-edge: transparent;
  --environment-chip-surface: var(--completion);
  --environment-chip-ink: var(--on-completion);
  --environment-chip-rail-surface: var(--brand-lime);
  --environment-chip-rail-ink: var(--brand-ink);
  --text-display: 2.5rem;
  --text-display-weight: 800;
  --text-display-line: 1.1;
  --text-lede: 1.125rem;
  --site-measure: 66rem;
  --site-copy-measure: 36rem;
  --site-screen-width: 18rem;
  --site-turnstile-height: calc(var(--control-h) + var(--space-20));
  --site-turnstile-width: 300px;
  --text-page-title: 2rem;
  --text-page-title-weight: 800;
  --text-page-title-line: 1.15;
  --text-page-heading: 1.375rem;
  --text-page-heading-weight: 750;
  --text-page-heading-line: 1.25;
  --text-page-subheading: 1.125rem;
  --text-prose-line: 1.6;
  --site-screen-width-wide: 20rem;
  --site-media-wide: 44rem;
  --site-rail-width: 12rem;
  --site-shell-height: 100svh;
  --site-step-number: var(--space-32);
  --site-button-hover: color-mix(in srgb, var(--accent) 88%, var(--text));
}
@media (max-width: 359px) {
:root {
  --page-gutter: var(--space-16);
}
}
@media (min-width: 768px) {
:root {
  --nav-height: 0px;
  --page-gutter: var(--space-32);
}
}
@media (min-width: 1200px) {
:root {
  --rail-width: 224px;
}
}
@media (min-width: 1600px) {
:root {
  --inspector-width: 352px;
  --page-gutter: var(--space-40);
}
}
@media (max-width: 767px) {
:root {
  --gap-settings-section: var(--space-24);
}
}
@media (min-width: 768px) {
:root {
  --text-title: 1.875rem;
  --text-display: 3.75rem;
  --text-page-title: 2.5rem;
  --text-page-heading: 1.625rem;
  --text-page-subheading: 1.25rem;
}
}
@media (prefers-color-scheme: dark) {
:root {
  --rail-surface: #21172F;
  --rail-current: var(--accent);
  --rail-current-ink: var(--on-accent);
  --rail-edge: var(--line);
}
}
@font-face {
  font-family: Manrope;
  src: url("/assets/manrope-latin.b355d044e6.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-height: var(--site-shell-height);
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-item);
  font-weight: var(--text-item-weight);
  line-height: var(--text-item-line);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
figcaption {
  margin: 0;
  overflow-wrap: anywhere;
}

main {
  flex: 1;
}

main p,
main li {
  line-height: var(--text-prose-line);
}

[id] {
  scroll-margin-top: var(--space-24);
}

.wrap {
  width: min(var(--site-measure), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--page-gutter);
  top: var(--space-8);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-16);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.site-header {
  padding-top: max(var(--space-12), env(safe-area-inset-top));
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--tap-min);
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.wordmark .logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
}

.environment-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  border-radius: var(--radius-chip);
  background: var(--environment-chip-surface);
  color: var(--environment-chip-ink);
  font-size: var(--text-label);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-nav,
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-16);
}

.site-nav {
  order: 3;
  flex-basis: 100%;
}

.site-header .button {
  min-height: var(--tap-min);
  padding-inline: var(--space-12);
}

.site-nav a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--text);
  font-size: var(--text-nav);
  font-weight: var(--text-nav-weight);
  text-decoration: none;
}

.site-nav a:hover,
.footer-nav a:hover,
.site-nav a[aria-current="page"],
.footer-nav a[aria-current="page"],
.site-nav a.in-section,
.footer-nav a.in-section {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding-inline: var(--space-20);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding-block: var(--space-8);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.button.primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button.secondary {
  border-color: var(--control-border);
  background: var(--surface);
  color: var(--text);
}

@media (hover: hover) {
  .button {
    transition: background-color var(--motion-fast) var(--ease-ui);
  }

  .button.primary:hover {
    background: var(--site-button-hover);
  }

  .button.secondary:hover {
    background: var(--surface-subtle);
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.lede {
  max-width: var(--site-copy-measure);
  font-size: var(--text-lede);
}

.aside {
  max-width: var(--site-copy-measure);
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--text-meta-weight);
}

.opening {
  padding-block: var(--space-48);
}

.opening .wrap {
  display: grid;
  gap: var(--space-40);
}

.intro,
.ask {
  display: grid;
  gap: var(--space-16);
  justify-items: start;
  min-width: 0;
}

.intro {
  gap: var(--space-24);
}

.opening h1 {
  font-size: var(--text-display);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-line);
  letter-spacing: -0.03em;
}

.ask > p {
  max-width: var(--site-copy-measure);
}

.ask .panel {
  width: min(var(--site-copy-measure), 100%);
}

.eyebrow {
  color: var(--accent);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature {
  padding-block: var(--space-40);
  border-top: 1px solid var(--line);
}

.feature .wrap {
  display: grid;
  gap: var(--space-32);
  align-items: center;
}

.words {
  display: grid;
  gap: var(--space-16);
  max-width: var(--site-copy-measure);
}

.feature.band {
  background: var(--surface-subtle);
}

.facts {
  display: grid;
  gap: var(--space-24);
  align-items: start;
}

.fact {
  display: grid;
  gap: var(--space-8);
}

.fact h3 {
  font-size: var(--text-page-subheading);
  font-weight: var(--text-section-weight);
  line-height: var(--text-page-heading-line);
}

.panel {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-20);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.panel-label,
.contents-label {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.panel ul {
  padding-left: var(--space-20);
}

.request {
  padding-left: var(--space-12);
  border-left: var(--space-4) solid var(--accent);
  font-weight: 700;
}

.screen {
  margin: 0;
  padding: var(--space-8);
  border: 1px solid var(--line);
  background: var(--surface);
}

.screen img {
  border: 1px solid var(--line);
}

.screen.phone {
  width: min(var(--site-screen-width), 100%);
  justify-self: center;
  border-radius: var(--radius-dialog);
}

.screen.phone img {
  border-radius: var(--radius-panel);
}

.screen.desktop {
  border-radius: var(--radius-panel);
}

.screen.desktop img {
  border-radius: var(--radius-control);
}

.screen a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
}

.screen figcaption {
  padding: var(--space-8) var(--space-8) var(--space-4);
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--text-meta-weight);
}

h2 {
  font-size: var(--text-title);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line);
  letter-spacing: -0.02em;
}

.closing {
  padding-block: var(--space-48);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.closing .wrap,
.page .wrap,
.doc-head,
.doc-body {
  display: grid;
  gap: var(--space-16);
  justify-items: start;
  min-width: 0;
}

.closing p {
  max-width: var(--site-copy-measure);
}

.page {
  padding-block: var(--space-48);
}

.page h1 {
  font-size: var(--text-page-title);
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line);
  letter-spacing: -0.03em;
}

.page h2 {
  margin-top: var(--space-32);
  font-size: var(--text-page-heading);
  font-weight: var(--text-page-heading-weight);
  line-height: var(--text-page-heading-line);
  letter-spacing: -0.02em;
}

.page h3 {
  margin-top: var(--space-8);
  font-size: var(--text-page-subheading);
  font-weight: var(--text-section-weight);
  line-height: var(--text-page-heading-line);
  letter-spacing: 0;
}

.page p {
  max-width: var(--site-copy-measure);
}

.page .doc-layout {
  gap: var(--space-32);
}

.doc-head,
.doc-body {
  width: 100%;
}

.contents {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.contents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-20);
  padding: 0;
  list-style: none;
}

.contents a {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--text);
  font-size: var(--text-nav);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-item-line);
}

.policy .contents ul {
  flex-direction: column;
}

.prereq {
  display: grid;
  gap: var(--space-12);
  width: min(var(--site-copy-measure), 100%);
  padding: var(--space-20);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.page .prereq h2,
.page .prereq h3 {
  margin-top: 0;
}

.prereq ul {
  display: grid;
  gap: var(--space-8);
  padding-left: var(--space-20);
}

.notice {
  padding-left: var(--space-16);
  border-left: var(--space-4) solid var(--accent);
}

.site-footer {
  padding-top: var(--space-32);
  padding-bottom: max(var(--space-32), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--text-meta-weight);
}

.site-footer .wrap {
  display: grid;
  gap: var(--space-8);
}

.site-footer a {
  color: var(--text);
}

.form {
  display: grid;
  gap: var(--space-20);
  width: min(var(--site-copy-measure), 100%);
}

.contact-layout {
  display: grid;
  gap: var(--space-32);
  align-items: start;
  width: 100%;
  margin-top: var(--space-8);
}

.contact-notes {
  display: grid;
  gap: var(--space-8);
  width: min(var(--site-copy-measure), 100%);
}

.page .contact-notes h2 {
  margin-top: var(--space-8);
  font-size: var(--text-page-subheading);
}

.page .contact-notes h2:first-child {
  margin-top: 0;
}

.field {
  display: grid;
  gap: var(--space-8);
}

.field label {
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-12);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.field textarea {
  resize: vertical;
}

.hint {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--text-meta-weight);
}

.trap {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send {
  display: grid;
  gap: var(--space-12);
  justify-items: start;
}

.cf-turnstile {
  justify-self: stretch;
  min-height: var(--site-turnstile-height);
  margin-inline: min(0px, calc((100% - var(--site-turnstile-width)) / 2));
}

.form .button {
  justify-self: start;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.choices {
  display: grid;
  gap: var(--space-32);
  align-items: start;
  width: 100%;
  margin-top: var(--space-16);
}

.choice {
  display: grid;
  gap: var(--space-12);
  min-width: 0;
}

.page .choice h2 {
  margin-top: 0;
}

.guides {
  display: grid;
  gap: var(--space-12);
  padding: 0;
  list-style: none;
}

.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-16);
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-16);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.guide strong {
  grid-column: 1;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.guide span {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--text-meta-weight);
}

.guide::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: var(--space-8);
  height: var(--space-8);
  margin-right: var(--space-4);
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .guide {
    transition: background-color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui);
  }

  .guide:hover {
    border-color: var(--accent);
    background: var(--surface-subtle);
  }
}

.back {
  font-size: var(--text-meta);
  font-weight: var(--text-nav-weight);
}

.steps {
  display: grid;
  gap: var(--space-40);
  width: 100%;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  display: grid;
  gap: var(--space-12);
  justify-items: start;
  min-width: 0;
  counter-increment: step;
}

.step-text {
  display: grid;
  gap: var(--space-12);
  justify-items: start;
  min-width: 0;
}

.page .step-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-top: 0;
}

.step-title::before {
  content: counter(step);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--site-step-number);
  height: var(--site-step-number);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--text-item);
  font-weight: 800;
  line-height: 1;
}

.guide-page .screen.phone {
  justify-self: start;
}

.guide-page .screen.desktop {
  width: min(var(--site-copy-measure), 100%);
}

.guide-page .screen.desktop.wide {
  width: min(var(--site-media-wide), 100%);
}

.guide-page .screen img {
  margin-inline: auto;
}

.guide-page .panel {
  width: min(var(--site-copy-measure), 100%);
}

.recovery {
  display: grid;
  gap: var(--space-8);
  width: min(var(--site-copy-measure), 100%);
  padding-left: var(--space-24);
}

code {
  font: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.address {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.policy .doc-body ul {
  display: grid;
  gap: var(--space-8);
  max-width: var(--site-copy-measure);
  padding-left: var(--space-24);
}

.page .updated {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: var(--text-meta-weight);
}

.policy .address {
  padding-left: var(--space-16);
  border-left: 2px solid var(--line);
}

.page code {
  font-size: inherit;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  
  .site-nav {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }

  .site-header .button {
    min-height: var(--control-h);
    padding-inline: var(--space-20);
  }

  .opening {
    padding-block: var(--space-64);
  }

  .opening .wrap {
    grid-template-columns: minmax(0, 1fr) var(--site-screen-width);
    column-gap: var(--space-64);
  }

  .intro,
  .ask,
  .opening .words {
    grid-column: 1;
  }

  .opening .screen {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .feature {
    padding-block: var(--space-64);
  }

  .feature.beside .wrap {
    grid-template-columns: 1fr var(--site-screen-width);
    column-gap: var(--space-64);
  }

  .feature.flip .screen {
    order: -1;
  }

  .feature.flip .wrap {
    grid-template-columns: var(--site-screen-width) 1fr;
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-40);
  }

  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-40);
  }

  
  .steps > li.beside {
    grid-template-columns: minmax(0, 1fr) var(--site-screen-width);
    column-gap: var(--space-32);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .opening .wrap,
  .steps > li.beside {
    grid-template-columns: minmax(0, 1fr) var(--site-screen-width-wide);
  }

  .opening .screen.phone,
  .guide-page .screen.phone {
    width: min(var(--site-screen-width-wide), 100%);
  }

  .page .doc-layout {
    grid-template-columns: minmax(0, 1fr) var(--site-rail-width);
    grid-template-areas:
      "head rail"
      "body rail";
    column-gap: var(--space-48);
  }

  .doc-head {
    grid-area: head;
  }

  .doc-body {
    grid-area: body;
  }

  .doc-layout .contents {
    grid-area: rail;
    align-self: start;
    padding-left: var(--space-16);
    border-left: 1px solid var(--line);
  }

  .doc-layout .contents ul {
    flex-direction: column;
  }

  .contact-layout {
    grid-template-columns: minmax(0, var(--site-copy-measure)) minmax(0, 1fr);
    column-gap: var(--space-48);
  }

  .contact-layout .form {
    grid-column: 1;
    grid-row: 1;
  }

  .contact-layout .contact-notes {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 1024px) and (min-height: 600px) {
  .doc-layout .contents {
    position: sticky;
    top: var(--space-24);
    max-height: calc(var(--site-shell-height) - 2 * var(--space-24));
    overflow: auto;
  }
}