/* Static guide pages, shares tokens.css with the app but not style.css:
   these are documents, not the studio UI, so they get their own reading layout. */
:root{ color-scheme: dark; }
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg,#000);color:var(--color-text,#fff);
     font-family:var(--font-sans,Inter,system-ui,sans-serif);
     -webkit-font-smoothing:antialiased}

/* g-top removed in favor of unified .topbar from style.css */

.g-wrap{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,60px) 22px 90px}
.g-crumbs{margin:0 0 26px;color:var(--color-text-dim,#666);font-size:12px}
.g-crumbs a{color:var(--color-text-dim,#666);text-decoration:none}
.g-crumbs a:hover{color:var(--color-text-sub,#999)}

.g-wrap h1{margin:0 0 16px;font-size:clamp(30px,5vw,44px);line-height:1.08;letter-spacing:-.035em}
.g-lede{margin:0 0 34px;color:var(--color-text-sub,#999);font-size:17px;line-height:1.6}
.g-meta{margin:0 0 38px;padding-bottom:26px;border-bottom:1px solid var(--color-border,rgba(229,231,235,.14));
        color:var(--color-text-dim,#666);font-size:12px}

.g-wrap h2{margin:46px 0 14px;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.g-wrap h3{margin:32px 0 10px;font-size:17px;letter-spacing:-.015em}
.g-wrap p{margin:0 0 17px;color:#d6d6d6;font-size:16px;line-height:1.72}
.g-wrap ul,.g-wrap ol{margin:0 0 20px;padding-left:22px;color:#d6d6d6;font-size:16px;line-height:1.72}
.g-wrap li{margin-bottom:9px}
.g-wrap a{color:var(--color-primary,#0075ff)}
.g-wrap strong{color:#fff;font-weight:650}

.g-steps{counter-reset:step;display:grid;gap:48px;list-style:none;padding:0;margin:12px 0 42px}
.g-steps>li{counter-increment:step;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;position:relative;padding:0;margin:0}
.g-steps>li::before{content:counter(step);grid-column:1;grid-row:1;display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--color-primary,#0075ff);border-radius:50%;background:var(--color-primary,#0075ff);color:#fff;font-size:13px;font-weight:750;line-height:1}
.g-steps>li>strong,.g-steps>li>p,.g-steps>li>div{grid-column:2}
.g-steps>li>strong{grid-row:1;align-self:center;display:block;margin:0;color:#fff;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.015em}
.g-steps>li>p{grid-row:2;margin:8px 0 0;color:#dedede;font-size:17px;line-height:1.7}

.g-note{margin:26px 0;padding:16px 18px;border-left:2px solid var(--color-primary,#0075ff);
        border-radius:0 8px 8px 0;background:rgba(255,255,255,.03);color:#c8c8c8;font-size:14.5px;line-height:1.65}
.g-note strong{color:#fff}

.g-panel{margin:44px 0;padding:26px 26px 24px;border:1px solid var(--color-border,rgba(229,231,235,.14));
         border-radius:16px;background:linear-gradient(162deg,#1c1c1e,#111112)}
.g-panel h2{margin:0 0 8px;font-size:21px}
.g-panel .g-cta, .g-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 700;
  color: #101828 !important;
  text-decoration: none !important;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.g-panel .g-cta:hover, .g-cta:hover {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #101828 !important;
  box-shadow: none;
}
.g-panel .g-cta:active, .g-cta:active {
  background: #cbd5e1;
  border-color: #cbd5e1;
}

.g-faq details{border-bottom:1px solid var(--color-border,rgba(229,231,235,.14));padding:16px 0}
.g-faq summary{cursor:pointer;font-size:16px;font-weight:600;list-style:none}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"+";float:right;color:var(--color-text-dim,#666)}
.g-faq details[open] summary::after{content:"−"}
.g-faq p{margin:12px 0 0;font-size:15px}

.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:32px 0 0}
.g-card{display:block;padding:22px;border:1px solid var(--color-border,rgba(229,231,235,.14));
        border-radius:14px;background:#141415;text-decoration:none;transition:border-color .2s,background .2s}
.g-card:hover{border-color:var(--color-border-strong,rgba(229,231,235,.28));background:#191919}
.g-card strong{display:block;margin-bottom:7px;color:#fff;font-size:16px;letter-spacing:-.015em}
.g-card span{color:var(--color-text-sub,#999);font-size:13.5px;line-height:1.55}

.g-foot{max-width:720px;margin:0 auto;padding:26px 22px 60px;
        border-top:1px solid var(--color-border,rgba(229,231,235,.14));
        color:var(--color-text-dim,#666);font-size:12px}
.g-foot a{color:var(--color-text-dim,#666)}

/* ── Full site footer (ported from style.css; vars remapped to tokens.css equivalents) ── */
.site-footer{margin:96px clamp(1rem,4vw,2.5rem) 0;padding:54px 0 24px;border-top:1px solid var(--color-border,rgba(229,231,235,.14));color:var(--color-text-sub,#999)}
.site-footer-shell{max-width:1200px;margin:0 auto}
.site-footer-grid{display:grid;grid-template-columns:minmax(210px,.72fr) minmax(0,2.5fr);gap:clamp(36px,5vw,72px);align-items:start}
.site-footer-brand{max-width:250px;padding-top:27px}
.site-footer-kicker,.site-footer-group h3,.site-footer-tools>h3{color:var(--color-text-dim,#666);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.site-footer-brand h2{margin:12px 0 10px;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.04em;color:var(--color-text,#fff)}
.site-footer-brand p:last-child{color:var(--color-text-sub,#999);font-size:13px;line-height:1.6}
.site-footer-group{display:grid;align-content:start;gap:11px}
.site-footer-group h3{margin-bottom:4px}
.site-footer-group a,.site-footer-action,.site-footer-note{color:var(--color-text-sub,#999);font:inherit;font-size:13px;line-height:1.35;text-align:left}
.site-footer-group a,.site-footer-action{transition:color .16s ease}
.site-footer-group a:hover,.site-footer-group a:focus-visible,.site-footer-action:hover,.site-footer-action:focus-visible{color:var(--color-text,#fff)}
.site-footer-action{padding:0;border:0;background:none;cursor:pointer}
.site-footer-tools{display:grid;gap:24px;min-width:0}
.site-footer-tools-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--color-border,rgba(229,231,235,.14))}
.site-footer-tools-head h3{margin:0}
.site-footer-tools-groups{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(150px,.9fr) minmax(340px,2fr) minmax(160px,1fr);gap:clamp(22px,2.4vw,38px)}
.site-footer-tools .site-footer-group h4{margin:0 0 3px;color:var(--color-text,#fff);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
.site-footer-link-columns{display:grid;grid-template-columns:repeat(2,minmax(155px,1fr));gap:11px 30px}
.site-footer-group--notation{min-width:0}
.site-footer-group--notation a{white-space:normal;text-wrap:balance}
.site-footer-note{color:var(--color-text-dim,#666)}
.site-footer a:focus-visible{outline:2px solid var(--color-primary,#0075ff);outline-offset:3px;border-radius:4px}
.site-footer-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:18px;border-top:1px solid var(--color-border,rgba(229,231,235,.14));color:var(--color-text-dim,#666);font-size:11px}
.site-footer-utility{display:flex;align-items:center;gap:18px}
.site-footer-utility a{color:var(--color-text-sub,#999);font-size:11px}
.site-footer-meta span:last-child{margin-left:auto}

@media(max-width:1400px){
  .site-footer-tools-groups{grid-template-columns:repeat(2,minmax(190px,1fr));gap:34px 40px}
  .site-footer-group--notation{grid-column:1/-1}
  .site-footer-link-columns{grid-template-columns:repeat(2,minmax(190px,1fr))}
}
@media(max-width:900px){
  .site-footer{margin-top:72px}
  .site-footer-grid{grid-template-columns:1fr;gap:40px}
  .site-footer-brand{max-width:520px;padding-top:0}
  .site-footer-tools-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 36px}
  .site-footer-group--notation{grid-column:1/-1}
  .site-footer-link-columns{grid-template-columns:repeat(2,minmax(190px,1fr))}
  .g-top nav{position:static;translate:0;margin-left:auto;gap:15px}
}
@media(max-width:560px){
  .site-footer{margin-top:56px;padding-top:34px}
  .site-footer-grid{gap:32px}
  .site-footer-tools-head{align-items:flex-end}
  .site-footer-tools-groups{grid-template-columns:1fr;gap:26px}
  .site-footer-link-columns{grid-template-columns:1fr}
  .site-footer-group--notation{grid-column:auto}
  .site-footer-meta{display:grid;gap:8px;margin-top:34px}
  .site-footer-utility{flex-wrap:wrap;margin:4px 0}
  .site-footer-meta span:last-child{margin-left:0}
}

@media(max-width:640px){
  .g-top{height:112px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 48px;gap:0 8px;padding:0 12px}
  .g-top .g-brand{grid-column:1;grid-row:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden}
  .g-top .g-wave{flex:0 0 30px}
  .g-top .account{grid-column:2;grid-row:1;margin-left:0;justify-self:end}
  .g-top nav{grid-column:1 / -1;grid-row:2;position:static;translate:none;width:100%;height:48px;margin:0;gap:0;justify-content:space-around}
  .g-top nav a{flex:1;justify-content:center;padding:0;font-size:13px}
  .g-top nav a.active::after{bottom:0}
  .g-wrap p,.g-wrap ul,.g-wrap ol{font-size:15.5px}
  .g-steps{gap:36px}
  .g-steps>li{grid-template-columns:34px minmax(0,1fr);column-gap:13px}
  .g-steps>li::before{width:32px;height:32px;font-size:12px}
  .g-steps>li>strong{font-size:16px}
  .g-steps>li>p{font-size:15.5px}
}

/* Feature flow diagrams on tool pages */
.g-diagram{max-width:600px!important;margin:24px auto 32px!important;border:1px solid var(--color-border,rgba(229,231,235,.14));border-radius:14px;overflow:hidden;background:#0c0d10;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.g-diagram img,.g-diagram svg{display:block;width:100%;height:auto;aspect-ratio:960/200!important}