.guide-root { height: auto; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 100px; }
body.guide-page { display: block; height: auto; overflow: visible; padding: 0; background: var(--glass); font-size: 15px; line-height: 1.75; }
.guide-page a { color: var(--accent); text-underline-offset: 4px; }
.guide-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: var(--shell); position: sticky; top: 0; z-index: 10; }
.guide-header a { text-decoration: none; }
.guide-brand { display: flex; align-items: center; gap: 10px; }
/* The same mark the workspace header carries, rather than a text glyph
   standing in for it - these pages are the same product. */
.guide-brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: white; background: linear-gradient(150deg,#37a6e0,var(--accent)); box-shadow: 0 1px 3px #0088cc33; }
/* Only the size; app.css already gives every svg the stroke this needs. */
.guide-brand-mark svg { width: 19px; height: 19px; }
.guide-brand strong { font-size: 16px; color: var(--text); }
.guide-brand-page { font-size: 12px; color: var(--dim); border-left: 1px solid var(--line-hi); padding-left: 12px; }
.guide-header nav { display: flex; gap: 22px; font-size: 12px; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 820px); gap: 72px; max-width: 1180px; margin: auto; padding: 0 24px; }
.guide-sidebar { align-self: start; position: sticky; top: 90px; padding: 24px 0; max-height: calc(100vh - 90px); overflow: auto; }
.guide-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.guide-eyebrow { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; color: var(--accent); }
.guide-sidebar .guide-eyebrow { margin: 24px 12px 8px; color: var(--faint); }
.guide-sidebar nav a { padding: 7px 12px; border-radius: 8px; color: var(--dim); font-size: 12px; text-decoration: none; }
.guide-sidebar nav a:hover, .guide-sidebar nav a[aria-current="location"] { background: var(--accent-wash); color: var(--accent); }
.guide-sidebar p { font-size: 11px; color: var(--faint); padding: 20px 12px; border-top: 1px solid var(--line); margin-top: 28px; }
.guide-hero { padding: 70px 0 48px; border-bottom: 1px solid var(--line); }
.guide-hero h1 { font-size: clamp(34px, 4.5vw, 55px); line-height: 1.12; letter-spacing: -2px; font-weight: 500; margin: 20px 0 24px; }
.guide-hero > p { font-size: 17px; color: var(--dim); max-width: 620px; }
.guide-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0; }
.guide-page .btn { text-decoration: none; height: 39px; }
.guide-page .btn.primary { color: white; }
.guide-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 44px; font-size: 12px; color: var(--dim); }
.guide-flow b { font-weight: 400; color: var(--accent); }
.guide-flow span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; }
.guide-page section { padding: 48px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 22px; }
.guide-page h2 { font-size: 29px; line-height: 1.25; font-weight: 500; letter-spacing: -.7px; margin: 12px 0 22px; }
.guide-page h3 { font-size: 19px; font-weight: 500; margin: 30px 0 12px; }
.guide-page h4 { font-size: 17px; margin: 8px 0; font-weight: 500; }
.guide-page p { margin: 14px 0; }
.guide-steps { padding-left: 24px; }
.guide-steps li { padding: 5px 0 5px 8px; }
.guide-steps li::marker { color: var(--accent); font-weight: 600; }
.guide-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 25px 0; }
.guide-cards article { padding: 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--shell); }
.guide-cards p { color: var(--dim); font-size: 13px; margin-bottom: 0; }
.guide-pill { color: var(--accent); font-size: 9px; letter-spacing: 1px; }
.guide-note { background: var(--accent-wash); padding: 19px 22px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; margin: 24px 0; font-size: 13px; line-height: 1.8; }
.guide-table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: 10px; }
.guide-page table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.guide-page th { padding: 13px 16px; background: var(--shell); font-weight: 500; }
.guide-page td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.guide-page td:first-child { min-width: 135px; }
.guide-page code { font-size: 12px; overflow-wrap: anywhere; }
.guide-page pre { position: relative; overflow: auto; max-height: 550px; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 47px 20px 20px; margin: 20px 0; line-height: 1.75; }
.guide-page pre code { padding: 0; background: transparent; color: var(--text); white-space: pre; overflow-wrap: normal; }
.guide-copy { position: absolute; right: 12px; top: 10px; font-size: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--glass); padding: 3px 9px; }
.guide-page details { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0; padding: 16px 20px; }
.guide-page summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.guide-page details p { font-size: 13px; }
.guide-footer { padding: 35px 0 60px; display: flex; flex-wrap: wrap; gap: 12px 25px; font-size: 13px; }
.guide-footer p { width: 100%; font-size: 23px; }
.guide-skip { position: fixed; top: -100px; left: 16px; background: var(--glass); padding: 12px; z-index: 20; }
.guide-skip:focus { top: 10px; }
@media (max-width: 850px) {
  .guide-layout { display: block; max-width: 760px; }
  .guide-sidebar { position: static; max-height: none; padding: 16px 0 0; }
  .guide-sidebar nav { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; }
  .guide-sidebar .guide-eyebrow, .guide-sidebar p { display: none; }
  .guide-sidebar nav a { padding: 5px 8px; font-size: 11px; }
  .guide-hero { padding-top: 35px; }
}
@media (max-width: 520px) {
  .guide-header { padding: 14px 18px; gap: 8px; }
  .guide-header nav { gap: 12px; font-size: 10px; }
  .guide-brand-page { display: none; }
  .guide-cards { grid-template-columns: 1fr; }
  .guide-page h2 { font-size: 25px; }
  .guide-flow { gap: 7px; }
  .guide-flow span { padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) { .guide-root { scroll-behavior: auto; } }

/* The site footer. Built by js/footer.js and shared by the guide, the API
   reference and the legal page, so there is one copy of every statement in it.

   Appended to the body, after the layout grid rather than inside it: the
   footer belongs to the site rather than to the article, and one that lined up
   with the body text would read as another section of it. */
.site-footer {
  margin-top: 70px;
  padding: 54px max(24px, calc((100vw - 1180px) / 2)) 40px;
  border-top: 1px solid var(--line);
  background: var(--shell);
  font-size: 13px;
}
.site-footer-columns {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 1180px; margin: auto;
}
.site-footer-column h2 { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.site-footer-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer-column a { color: var(--dim); text-decoration: none; font-size: 13px; }
.site-footer-column a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.site-footer-base {
  max-width: 1180px; margin: 38px auto 0; padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
}
.site-footer-rights { margin: 0; font-size: 12px; color: var(--dim); }
.site-footer-version { color: var(--faint); }
.site-footer-note { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.7; max-width: 74ch; }

/* The plan table, filled from /cloud/config so its numbers cannot drift from
   the ones the server enforces. */
.guide-plans-note { margin: 0; padding: 18px 20px; font-size: 13px; color: var(--dim); }
#plan-table td { vertical-align: top; }
.guide-plan-summary { display: block; margin-top: 4px; font-size: 11.5px; color: var(--faint); font-weight: 400; }
.guide-plan-features { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.75; color: var(--dim); }
.guide-plan-features li::marker { color: var(--accent); }
.guide-plan-cadences { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.guide-plan-cadences li { font-size: 12.5px; line-height: 1.5; }
.guide-plan-cadences strong { font-weight: 600; white-space: nowrap; }
.guide-plan-cadences span { color: var(--faint); font-size: 11.5px; }