/* The guide keeps the landing typography and palette, with a quiet reading surface. */
.docs-body { background: #fbfcfa; }
.docs-layout { width: min(1272px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 64px; }
.docs-sidebar { position: sticky; top: 64px; align-self: start; height: calc(100dvh - 64px); padding: 46px 24px 24px 0; border-right: 1px solid var(--line); overflow-y: auto; }
.docs-contents summary { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; list-style: none; }
.docs-contents summary::-webkit-details-marker { display: none; }
.docs-contents summary span { display: none; }
.docs-contents nav { display: grid; gap: 5px; margin: 20px -10px 0; }
.docs-contents nav a { display: flex; gap: 12px; align-items: baseline; padding: 11px 10px; border-radius: 8px; font-size: .89rem; line-height: 1.45; text-decoration: none; color: var(--muted); }
.docs-contents nav a span { font: .72rem var(--mono); color: #84918b; }
.docs-contents nav a:hover { color: var(--teal); background: #eff4f0; }
.docs-contents nav a[aria-current] { color: var(--teal-deep); background: #e5f0e9; font-weight: 600; }
.docs-contents nav a[aria-current] span { color: var(--teal); }
.docs-sidebar-download { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 34px; font-size: .86rem; text-decoration: none; font-weight: 500; }
.docs-sidebar-platforms { font: .69rem/1.9 var(--mono); color: var(--muted); margin-top: 12px; }
.docs-main { min-width: 0; max-width: 864px; padding: 38px 0 54px; }
.docs-breadcrumb { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.docs-breadcrumb a { text-decoration: none; }
.docs-breadcrumb a:hover { color: var(--teal); }
.docs-breadcrumb > span { color: #b4c0b8; }
.docs-hero { padding: 38px 0 32px; scroll-margin-top: 90px; }
.docs-hero h1 { font-size: clamp(2.4rem, 3.9vw, 3.8rem); line-height: 1.12; letter-spacing: -.045em; margin: 14px 0 20px; text-wrap: balance; }
.docs-hero h1 > span { display: block; }
.docs-hero .accent { color: var(--teal); }
.docs-intro { font-size: 1.08rem; line-height: 1.7; color: var(--muted); max-width: 42rem; }
.docs-platforms { margin-top: 22px; display: flex; align-items: center; gap: 8px; color: var(--muted); font: .73rem/1.6 var(--mono); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.docs-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-bottom: 28px; }
.docs-quick a { display: flex; flex-direction: column; position: relative; gap: 6px; text-decoration: none; padding: 22px 20px; }
.docs-quick a:first-child { padding-left: 0; }
.docs-quick a + a { border-left: 1px solid var(--line); }
.docs-quick a:hover strong { color: var(--teal); }
.quick-number { font: .73rem var(--mono); color: var(--teal); margin-bottom: 6px; }
.docs-quick strong { font-size: .95rem; font-weight: 600; }
.docs-quick a > span:not(.quick-number):not(.quick-arrow) { font-size: .84rem; line-height: 1.6; color: var(--muted); }
.quick-arrow { position: absolute; top: 17px; right: 16px; color: var(--teal); }
.docs-callout { background: #edf4ee; border-left: 3px solid #6aa891; padding: 20px 23px; border-radius: 0 8px 8px 0; font-size: .91rem; line-height: 1.75; }
.docs-callout strong { display: block; color: var(--teal-deep); font-weight: 600; margin-bottom: 5px; }
.docs-callout p { color: #40574d; }
.docs-callout.compact { padding: 15px 18px; margin-top: 20px; font-size: .84rem; }
.docs-callout.success { background: #e4f3ec; }
.docs-section { padding-top: 64px; margin-top: 8px; scroll-margin-top: 84px; }
.docs-section + .docs-section { border-top: 1px solid var(--line); margin-top: 56px; }
.docs-section-head { display: flex; align-items: baseline; gap: 15px; }
.section-number { font: .83rem var(--mono); color: var(--teal); flex: none; }
.docs-section h2 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.docs-lede { color: var(--muted); margin: 15px 0 30px; line-height: 1.75; }
.docs-section h3 { font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.docs-os-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.docs-os-grid > div { padding: 26px; }
.docs-os-grid > div + div { border-left: 1px solid var(--line); }
.docs-os-grid h3, .docs-phone-install h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.docs-os-grid svg, .docs-phone-install svg { width: 23px; height: 23px; flex: none; color: var(--teal); }
.docs-os-grid p, .docs-phone-install p { font-size: .94rem; line-height: 1.85; color: var(--muted); }
.docs-phone-install { padding: 26px 0; }
.docs-small { font-size: .8rem; color: var(--muted); line-height: 1.75; margin-top: 18px; }
.docs-notes { list-style: none; margin: 25px 0; padding: 0; display: grid; gap: 23px; }
.docs-notes li { display: flex; gap: 14px; align-items: flex-start; }
.docs-notes p { font-size: .94rem; line-height: 1.85; margin-top: 6px; color: var(--muted); }
.step-number { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid #cbded3; border-radius: 50%; background: #f0f6f1; color: var(--teal); font: .72rem var(--mono); margin-top: 1px; }
.docs-split { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 36px; align-items: start; margin-bottom: 30px; }
.docs-split .docs-notes { margin-top: 0; }
.docs-subhead { margin: 34px 0 0; }
.docs-figure { margin: 28px 0; }
.docs-figure.docs-desktop { max-width: 800px; }
.docs-figure.docs-phone { max-width: 280px; margin: 0 auto; }
.shot-link { display: block; color: var(--muted); text-decoration: none; }
.device-mock { overflow: hidden; }
.desktop-mock { border: 1px solid #c8d2d0; border-radius: 12px; box-shadow: 0 8px 24px -14px #2a433e55; background: #f7f8fa; }
.mock-titlebar { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: linear-gradient(#f3f5f6, #e8eeec); border-bottom: 1px solid #d9e0de; font-size: 10px; font-weight: 500; color: #596c63; }
.mock-dots { display: flex; gap: 5px; }
.mock-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c2cec8; border: 1px solid #b3c1b9; }
.mock-bar-icon { width: 31px; text-align: right; font-size: 13px; }
.desktop-mock img { width: 100%; height: auto; }
.phone-mock { border: 5px solid #253630; border-radius: 32px; padding: 14px 2px 12px; background: #0d1613; box-shadow: 0 12px 30px -18px #1e3d3066, inset 0 0 0 1px #526159; }
.mock-earpiece { width: 36px; height: 4px; border-radius: 4px; margin: 0 auto 10px; background: #34453d; }
.phone-mock img { width: 100%; height: auto; }
.mock-home { width: 68px; height: 3px; border-radius: 4px; margin: 14px auto 0; background: #71877d; }
.shot-expand { display: block; text-align: right; margin-top: 10px; color: var(--teal); font-size: .71rem; }
.shot-link:hover .shot-expand { text-decoration: underline; }
.docs-figure figcaption { margin-top: 8px; font-size: .78rem; line-height: 1.7; color: var(--muted); }
.docs-faq { border-top: 1px solid var(--line); }
.docs-faq details { border-bottom: 1px solid var(--line); }
.docs-faq summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: 20px 0; font-size: .98rem; font-weight: 500; }
.docs-faq summary::-webkit-details-marker { display: none; }
.docs-faq summary > span { color: var(--teal); font-size: 1.3rem; line-height: 1.3; }
.docs-faq details[open] summary > span { transform: rotate(45deg); }
.docs-faq details p { color: var(--muted); line-height: 1.85; font-size: .94rem; padding: 0 28px 22px 0; }
.docs-end { display: flex; justify-content: space-between; gap: 18px; padding-top: 45px; font-size: .85rem; color: var(--teal); }
.docs-end a { text-decoration: none; }
.docs-skip { position: fixed; top: -100px; left: 12px; z-index: 30; background: white; color: var(--teal); border-radius: 6px; padding: 12px 18px; }
.docs-skip:focus { top: 8px; }
@media (min-width: 901px) { .docs-contents > summary { pointer-events: none; } .docs-contents:not([open]) > nav { display: grid; } }
@media (max-width: 1100px) { .docs-layout { gap: 36px; grid-template-columns: 206px minmax(0,1fr); } .docs-split { grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: 24px; } }
@media (max-width: 900px) {
  .docs-layout { width: min(760px, calc(100% - 40px)); display: block; }
  .docs-sidebar { position: sticky; top: 64px; z-index: 5; height: auto; overflow: visible; padding: 0; border-right: 0; background: #fbfcfaf5; backdrop-filter: blur(10px); }
  .docs-contents { border-bottom: 1px solid var(--line); }
  .docs-contents summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; height: 48px; }
  .docs-contents summary span { display: block; }
  .docs-contents[open] summary span { transform: rotate(180deg); }
  .docs-contents nav { margin: 0; padding-bottom: 10px; max-height: calc(100dvh - 140px); overflow-y: auto; }
  .docs-sidebar-download, .docs-sidebar-platforms { display: none; }
  .docs-main { padding-top: 24px; }
  .docs-hero { padding-top: 28px; }
  .docs-section, .docs-hero { scroll-margin-top: 134px; }
}
@media (max-width: 600px) {
  .docs-hero h1 { font-size: 2.5rem; }
  .docs-quick { grid-template-columns: 1fr; }
  .docs-quick a, .docs-quick a:first-child { padding: 18px 24px 18px 38px; }
  .docs-quick a + a { border-left: 0; border-top: 1px solid var(--line); }
  .quick-number { position: absolute; left: 0; top: 21px; }
  .docs-os-grid { grid-template-columns: 1fr; }
  .docs-os-grid > div { padding: 22px; }
  .docs-os-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .docs-split { grid-template-columns: 1fr; gap: 28px; }
  .docs-figure.docs-phone { width: min(280px,100%); }
  .docs-section { padding-top: 40px; }
  .docs-section + .docs-section { margin-top: 40px; }
  .docs-callout { padding: 17px 18px; }
  .docs-section-head { gap: 10px; }
  .docs-platforms { font-size: .64rem; }
}