/* Workflow pages share the landing page's type, spacing and material tokens. */
.sg-guide { --sg-section-space:var(--space-24); font-optical-sizing:auto; }
.sg-inner { max-width:var(--width-content); margin-inline:auto; }
.sg-intro,.sg-section,.sg-close { padding:var(--sg-section-space) var(--page-gutter); }
.sg-guide h1 { max-width:var(--measure-display); margin:var(--space-6) 0 var(--space-8); font-size:var(--type-display-size); font-weight:var(--type-display-weight); line-height:var(--type-display-leading); letter-spacing:var(--type-display-tracking); text-wrap:balance; }
.sg-guide h2 { margin:0 0 var(--space-4); max-width:var(--measure-h2); font-size:var(--type-h2-size); font-weight:var(--type-h2-weight); line-height:var(--type-h2-leading); letter-spacing:var(--type-h2-tracking); text-wrap:balance; }
.sg-guide h3 { margin:0 0 var(--space-3); font-size:var(--type-body-lg-size); font-weight:var(--weight-bold); line-height:1.35; letter-spacing:var(--type-body-lg-tracking); text-wrap:pretty; }
.sg-guide p { margin-top:0; text-wrap:pretty; }
.sg-back,.sg-link,.sg-buy { display:inline-flex; align-items:center; gap:var(--space-2); min-height:var(--hit-min); color:var(--link); text-decoration-thickness:1px; text-underline-offset:.22em; }
.sg-back { font-size:var(--type-small-size); color:var(--text-secondary); text-decoration:none; }
.sg-hero { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; gap:var(--column-gap); }
.sg-hero-copy { min-width:0; }
.sg-lede { max-width:var(--measure-lede); margin:0 0 var(--space-8); font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); letter-spacing:var(--type-body-lg-tracking); color:var(--text-secondary); }
.sg-workflow-link { margin-top:var(--space-4); font-size:var(--type-small-size); }
.sg-media { min-width:0; max-width:34rem; width:100%; margin:0; justify-self:end; }
.sg-media figcaption { margin-top:var(--space-4); color:var(--text-secondary); font-size:var(--type-caption-size); line-height:1.5; letter-spacing:var(--type-caption-tracking); }
.sg-io { margin:0; padding:var(--space-10); background:var(--bg-feature-band); border-radius:var(--radius-media); }
.sg-io>div+div { border-top:1px solid color-mix(in srgb,var(--text-primary) 20%,transparent); margin-top:var(--space-6); padding-top:var(--space-6); }
.sg-io dt { margin-bottom:var(--space-3); color:color-mix(in srgb,var(--text-primary) 80%,var(--bg-feature-band)); font-size:var(--type-small-size); line-height:var(--type-small-leading); font-weight:var(--weight-medium); }
.sg-io dd { margin:0; font-size:var(--type-h3-size); font-weight:var(--weight-bold); line-height:1.35; letter-spacing:var(--type-h3-tracking); text-wrap:pretty; }
.sg-io-note { font-size:var(--type-small-size); line-height:1.5; color:color-mix(in srgb,var(--text-primary) 80%,var(--bg-feature-band)); }
.sg-workflow { background:var(--bg-delivery); scroll-margin-top:calc(var(--header-height) + var(--space-4)); }
.sg-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--column-gap); margin:var(--space-10) 0 0; padding:0; list-style:none; counter-reset:steps; }
.sg-steps li { counter-increment:steps; }
.sg-steps li::before { content:counter(steps,decimal-leading-zero); display:block; margin-bottom:var(--space-4); color:var(--text-secondary); font-size:var(--type-small-size); font-weight:var(--weight-medium); letter-spacing:var(--type-small-tracking); font-variant-numeric:tabular-nums; }
.sg-steps p,.sg-details p,.sg-faq p { margin-bottom:0; max-width:var(--measure-body); color:var(--text-secondary); line-height:1.6; }
.sg-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8) var(--column-gap); }
.sg-reference { grid-column:1/-1; font-size:var(--type-small-size); }
.sg-reference a { color:var(--link); text-underline-offset:.2em; }
.sg-faq-section { padding-top:0; scroll-margin-top:calc(var(--header-height) + var(--space-4)); }
.sg-faq-grid,.sg-related-grid,.sg-close-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--column-gap); align-items:start; }
.sg-faq details { border-top:1px solid var(--border-hairline); }
.sg-faq details:last-child { border-bottom:1px solid var(--border-hairline); }
.sg-faq summary { display:flex; justify-content:space-between; align-items:center; gap:var(--space-6); min-height:3.5rem; padding-block:var(--space-4); font-weight:var(--weight-strong); cursor:pointer; list-style:none; touch-action:manipulation; }
.sg-faq summary::-webkit-details-marker { display:none; }
.sg-faq svg { flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.sg-faq details[open] .sg-plus { display:none; }
.sg-faq p { padding-bottom:var(--space-6); }
.sg-related { padding-top:0; }
.sg-related a { display:flex; justify-content:space-between; gap:var(--space-6); align-items:center; padding-block:var(--space-4); border-top:1px solid var(--border-hairline); min-height:3.5rem; color:var(--text-primary); text-decoration:none; line-height:1.5; }
.sg-related a:last-child { border-bottom:1px solid var(--border-hairline); }
.sg-related svg,.sg-directory svg { flex-shrink:0; }
.sg-close { background:var(--bg-purchase); }
.sg-actions { max-width:28rem; }
.sg-action-row { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.sg-buy { font-size:var(--type-small-size); font-weight:var(--weight-medium); }
.sg-actions p { margin:0; }
.sg-trial-note { padding-top:var(--space-3); font-size:var(--type-small-size); font-weight:var(--weight-medium); line-height:1.5; }
.sg-action-details { padding-top:var(--space-1); color:var(--text-secondary); font-size:var(--type-caption-size); letter-spacing:var(--type-caption-tracking); line-height:1.5; }
.sg-standard { margin-top:var(--space-8); max-width:100%; }
.sg-standard label { display:block; margin-bottom:var(--space-2); font-size:var(--type-small-size); font-weight:var(--weight-strong); }
.sg-standard-controls { display:flex; gap:var(--space-3); }
.sg-standard select { min-width:0; width:100%; flex:1; padding:var(--space-3); min-height:3rem; background:var(--bg-page); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-control); font:inherit; font-size:var(--type-small-size); }
.sg-standard button { min-height:3rem; border:0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-control); background:var(--button-fill); color:var(--button-text); font:inherit; font-size:var(--type-small-size); font-weight:var(--weight-strong); cursor:pointer; }
.sg-standard p { margin:var(--space-3) 0 0; color:var(--text-secondary); font-size:var(--type-caption-size); line-height:1.5; }
.sg-index .sg-intro { padding-bottom:var(--space-10); }
.sg-index h1 { margin-top:0; }
.sg-index .sg-lede { max-width:48ch; margin-bottom:0; }
.sg-directory { width:calc(100% - var(--page-gutter) * 2); padding-bottom:var(--sg-section-space); }
.sg-directory>a { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr) 20px; gap:var(--column-gap); align-items:start; padding:var(--space-10) 0; border-top:1px solid var(--border-hairline); text-decoration:none; color:var(--text-primary); }
.sg-directory h2 { font-size:var(--type-h3-size); font-weight:var(--weight-bold); line-height:var(--type-h3-leading); letter-spacing:var(--type-h3-tracking); margin:0; text-wrap:pretty; }
.sg-directory p { margin:0; color:var(--text-secondary); line-height:1.6; }
.sg-directory svg { margin-top:var(--space-1); }
.sg-guide :is(a,button,select,summary) { -webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 18%,transparent); touch-action:manipulation; }
.sg-guide :is(a,button,select,summary):focus-visible { outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--radius-inline); }
.sg-guide ::selection { background:var(--bg-purchase); color:var(--text-primary); }
.sg-guide :is(.growth-button,.sg-standard button) { transition:transform var(--motion-press-duration) cubic-bezier(.23,1,.32,1),background-color var(--motion-press-duration) ease-out; }
.sg-guide :is(.growth-button,.sg-standard button):active { background:var(--button-active); }
.sg-guide :is(.growth-button,.sg-standard button):active:not(:focus-visible) { transform:scale(.98); }
@media(hover:hover) and (pointer:fine) {
  .sg-back:hover,.sg-link:hover,.sg-buy:hover,.sg-reference a:hover { color:var(--accent-press); text-decoration:underline; }
  .sg-directory>a:hover h2,.sg-related a:hover span { color:var(--accent-press); text-decoration:underline; text-underline-offset:.2em; }
  .sg-directory svg,.sg-related svg { transition:transform .16s cubic-bezier(.23,1,.32,1); }
  .sg-directory>a:hover svg,.sg-related a:hover svg { transform:translate(2px,-2px); }
  .sg-standard button:hover { background:var(--button-hover); }
  .sg-faq summary:hover { color:var(--accent-press); }
}
@media(max-width:1023px) {
  .sg-hero { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); }
  .sg-action-row { gap:var(--space-2) var(--space-4); }
  .sg-directory>a { gap:var(--space-8); }
}
@media(max-width:767px) {
  .sg-guide { --sg-section-space:var(--space-16); }
  .sg-guide h1 { margin:var(--space-4) 0 var(--space-6); }
  .sg-hero,.sg-details,.sg-faq-grid,.sg-related-grid,.sg-close-grid { grid-template-columns:1fr; gap:var(--space-8); }
  .sg-lede { margin-bottom:var(--space-6); }
  .sg-media { justify-self:start; max-width:32rem; }
  .sg-io { padding:var(--space-8); }
  .sg-steps { grid-template-columns:1fr; gap:var(--space-8); margin-top:var(--space-8); }
  .sg-directory { margin-inline:var(--page-gutter); }
  .sg-directory>a { grid-template-columns:minmax(0,1fr) 20px; gap:var(--space-3) var(--space-4); padding-block:var(--space-8); }
  .sg-directory h2 { grid-column:1; grid-row:1; }
  .sg-directory p { grid-column:1/-1; grid-row:2; }
  .sg-directory svg { grid-column:2; grid-row:1; }
  .sg-index h1 { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  .sg-guide :is(a,button,svg) { transition:none !important; }
  .sg-guide :is(a,button):active,.sg-guide :is(a:hover,button:hover) svg { transform:none !important; }
}