@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 1 1000;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/fonts/google-sans-flex-latin-variable.woff2") format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

:root {
  --sg-color-ink: #202124;
  --sg-color-muted: #54595f;
  --sg-color-brand: #ff6600;
  --sg-color-highlight: #12cc5e;
  --sg-color-surface: #ffffff;
  --sg-color-canvas: #f6f8fa;
  --sg-color-border: #dfe3e6;
  --sg-font-sans: "Google Sans Flex", Inter, system-ui, sans-serif;
  --sg-font-display: var(--sg-font-sans);
  --sg-font-hero: var(--sg-font-display);
  --sg-shadow-sm: 0 1px 2px rgb(32 33 36 / 8%);
  --sg-shadow-lg: 0 22px 50px rgb(32 33 36 / 12%);
  --sg-radius-sm: 0.25rem;
  --sg-radius-md: 0.5rem;
  --sg-radius-lg: 1rem;
  --sg-space-1: 0.25rem;
  --sg-space-2: 0.5rem;
  --sg-space-3: 0.75rem;
  --sg-space-4: 1rem;
  --sg-space-5: 1.5rem;
  --sg-space-6: 2rem;
  --sg-space-8: 3rem;
  --sg-space-10: 4rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--sg-color-canvas); color: var(--sg-color-ink); font-family: var(--sg-font-sans); margin: 0; }
button { font: inherit; }
a { color: inherit; }

.sg-workbench-shell { margin: 0 auto; max-width: 1440px; padding: var(--sg-space-4); }
.sg-workbench-header { align-items: center; background: var(--sg-color-surface); border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-lg); display: flex; gap: var(--sg-space-4); justify-content: space-between; padding: var(--sg-space-3) var(--sg-space-5); position: sticky; top: var(--sg-space-3); z-index: 5; }
.sg-workbench-brand { align-items: center; display: inline-flex; font-family: var(--sg-font-display); font-weight: 700; gap: var(--sg-space-2); text-decoration: none; }
.sg-workbench-brand-mark { background: var(--sg-color-brand); border-radius: 50%; display: inline-block; height: 0.7rem; width: 0.7rem; }
.sg-workbench-nav { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sg-workbench-nav a { border-radius: var(--sg-radius-sm); color: var(--sg-color-muted); font-size: 0.875rem; font-weight: 600; padding: var(--sg-space-2) var(--sg-space-3); text-decoration: none; }
.sg-workbench-nav a[aria-current="page"], .sg-workbench-nav a:hover { background: #fff0e6; color: #bd4c00; }

.sg-workbench-main { padding: var(--sg-space-10) var(--sg-space-4); }
.sg-workbench-intro { display: grid; gap: var(--sg-space-5); grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr); margin-bottom: var(--sg-space-8); }
.sg-workbench-kicker { color: var(--sg-color-brand); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.09em; margin: 0 0 var(--sg-space-2); text-transform: uppercase; }
.sg-workbench-title { font-family: var(--sg-font-display); font-size: clamp(2.35rem, 5vw, 4.5rem); letter-spacing: -0.055em; line-height: 0.98; margin: 0; max-width: 12ch; }
.sg-workbench-lead { color: var(--sg-color-muted); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.65; margin: var(--sg-space-4) 0 0; max-width: 57ch; }
.sg-workbench-note { align-self: end; background: var(--sg-color-ink); border-radius: var(--sg-radius-lg); color: white; padding: var(--sg-space-5); }
.sg-workbench-note strong { color: #ff9d5c; display: block; font-family: var(--sg-font-display); font-size: 1.2rem; margin-bottom: var(--sg-space-2); }
.sg-workbench-note p { color: #dfe3e6; line-height: 1.5; margin: 0; }

.sg-workbench-section { margin-top: var(--sg-space-10); }
.sg-workbench-section-heading { align-items: end; display: flex; gap: var(--sg-space-5); justify-content: space-between; margin-bottom: var(--sg-space-5); }
.sg-workbench-section-heading h2 { font-family: var(--sg-font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.04em; margin: 0; }
.sg-workbench-section-heading p { color: var(--sg-color-muted); line-height: 1.5; margin: 0; max-width: 55ch; }

.sg-button { align-items: center; border: 1px solid transparent; border-radius: var(--sg-radius-sm); cursor: pointer; display: inline-flex; font-weight: 700; gap: var(--sg-space-2); justify-content: center; min-height: 2.75rem; padding: 0 var(--sg-space-4); transition: 160ms ease; }
.sg-button:focus-visible, a:focus-visible { outline: 3px solid rgb(255 102 0 / 40%); outline-offset: 3px; }
.sg-button--primary { background: var(--sg-color-brand); color: white; }
.sg-button--primary:hover { background: #d95600; transform: translateY(-1px); }
.sg-button--quiet { background: var(--sg-color-surface); border-color: var(--sg-color-border); color: var(--sg-color-ink); }
.sg-button--quiet:hover { border-color: var(--sg-color-brand); color: #bd4c00; }

.sg-section-catalog { display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-section-card { background: var(--sg-color-surface); border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-lg); display: grid; gap: var(--sg-space-4); padding: var(--sg-space-5); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.sg-section-card.is-selected { border-color: var(--sg-color-brand); box-shadow: 0 0 0 3px rgb(255 102 0 / 12%); }
.sg-section-card:hover { box-shadow: var(--sg-shadow-sm); transform: translateY(-2px); }
.sg-section-card h3 { font-family: var(--sg-font-display); font-size: 1.3rem; margin: 0; }
.sg-section-card p { color: var(--sg-color-muted); line-height: 1.55; margin: 0; }
.sg-section-card footer { align-items: center; display: flex; gap: var(--sg-space-3); justify-content: space-between; }
.sg-section-card small { color: var(--sg-color-muted); font-weight: 600; }

.sg-preview-toolbar { align-items: center; display: flex; gap: var(--sg-space-3); justify-content: space-between; margin-bottom: var(--sg-space-3); }
.sg-preview-label { color: var(--sg-color-muted); font-size: 0.875rem; font-weight: 700; }
.sg-preview-stage { background: #e9edf0; border: 1px dashed #bac2c8; border-radius: var(--sg-radius-lg); overflow: auto; padding: var(--sg-space-6); }
.sg-section-preview { background: white; box-shadow: var(--sg-shadow-lg); margin: 0 auto; min-height: 32rem; overflow: hidden; transition: max-width 240ms ease; }
.sg-section-preview[data-device="desktop"] { max-width: 1180px; }
.sg-section-preview[data-device="mobile"] { border-radius: 1.8rem; max-width: 390px; }
.sg-preview-block { display: none; min-height: 32rem; }
.sg-preview-block.is-active { display: block; }

.sg-demo-hero { background: linear-gradient(135deg, #202124 0%, #2c3135 55%, #ff6600 180%); color: white; min-height: 32rem; padding: clamp(2rem, 7vw, 6rem); position: relative; }
.sg-demo-hero::after { background: rgb(255 102 0 / 18%); border-radius: 50%; content: ""; height: 24rem; position: absolute; right: -9rem; top: -7rem; width: 24rem; }
.sg-demo-hero > * { position: relative; z-index: 1; }
.sg-demo-hero h3 { font-family: var(--sg-font-hero); font-size: clamp(2.7rem, 5.4vw, 6rem); font-optical-sizing: auto; font-stretch: 90%; font-weight: 700; letter-spacing: -0.07em; line-height: 0.91; margin: 3rem 0 var(--sg-space-4); max-width: 9.5ch; }
.sg-demo-hero p { color: #e6eaed; line-height: 1.6; max-width: 48ch; }
.sg-demo-hero .sg-button { margin-top: var(--sg-space-5); }
.sg-demo-planos { background: white; min-height: 32rem; padding: clamp(1.5rem, 5vw, 4rem); }
.sg-demo-planos h3 { font-family: var(--sg-font-display); font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.05em; margin: 0 0 var(--sg-space-5); }
.sg-demo-plan-grid { display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-demo-plan { border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-md); padding: var(--sg-space-4); }
.sg-demo-plan--featured { background: #fff7f2; border-color: var(--sg-color-brand); }
.sg-demo-plan strong { display: block; font-family: var(--sg-font-display); font-size: 2.5rem; letter-spacing: -0.06em; }
.sg-demo-plan span { color: var(--sg-color-muted); }
.sg-demo-plan b { color: var(--sg-color-brand); display: block; margin: var(--sg-space-4) 0; }
.sg-demo-benefits { background: #f0fbf5; display: grid; gap: var(--sg-space-5); grid-template-columns: 0.9fr 1.1fr; min-height: 32rem; padding: clamp(2rem, 6vw, 5rem); }
.sg-demo-benefits h3 { font-family: var(--sg-font-display); font-size: clamp(2.2rem, 4.5vw, 4.5rem); letter-spacing: -0.06em; line-height: 1; margin: 0; }
.sg-demo-benefit-list { display: grid; gap: var(--sg-space-3); }
.sg-demo-benefit { align-items: center; background: white; border-radius: var(--sg-radius-md); display: flex; font-weight: 700; gap: var(--sg-space-3); padding: var(--sg-space-4); }
.sg-demo-benefit i { background: var(--sg-color-highlight); border-radius: 50%; display: block; height: 0.8rem; width: 0.8rem; }
.sg-demo-cta { align-content: center; background: var(--sg-color-brand); color: white; display: grid; min-height: 32rem; padding: clamp(2rem, 7vw, 6rem); text-align: center; }
.sg-demo-cta h3 { font-family: var(--sg-font-display); font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -0.06em; line-height: 0.95; margin: 0 auto var(--sg-space-4); max-width: 10ch; }
.sg-demo-cta p { color: #fff4ed; line-height: 1.6; margin: 0 auto; max-width: 50ch; }
.sg-demo-cta .sg-button { justify-self: center; margin-top: var(--sg-space-5); }

.sg-token-grid { display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-token-card { background: var(--sg-color-surface); border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-lg); overflow: hidden; }
.sg-token-swatch { height: 7rem; }
.sg-token-info { padding: var(--sg-space-4); }
.sg-token-info strong, .sg-token-info code { display: block; }
.sg-token-info code { color: var(--sg-color-muted); font-size: 0.82rem; margin-top: var(--sg-space-1); }
.sg-type-specimens { background: var(--sg-color-surface); border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-lg); padding: clamp(1.5rem, 4vw, 3rem); }
.sg-type-row { border-bottom: 1px solid var(--sg-color-border); padding: var(--sg-space-5) 0; }
.sg-type-row:first-child { padding-top: 0; }
.sg-type-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sg-type-meta { color: var(--sg-color-muted); display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: var(--sg-space-2); text-transform: uppercase; }
.sg-type-display { font-family: var(--sg-font-hero); font-optical-sizing: auto; font-stretch: 90%; font-size: clamp(2rem, 4.5vw, 4.5rem); letter-spacing: -0.06em; line-height: 0.95; margin: 0; }
.sg-type-heading { font-family: var(--sg-font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.045em; margin: 0; }
.sg-type-body { color: var(--sg-color-muted); font-size: 1.05rem; line-height: 1.7; margin: 0; max-width: 65ch; }
.sg-pattern-grid { display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-pattern-card { background: var(--sg-color-surface); border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-lg); padding: var(--sg-space-5); }
.sg-pattern-card h3 { font-family: var(--sg-font-display); margin-top: 0; }
.sg-pattern-card .sg-button + .sg-button { margin-left: var(--sg-space-2); }
.sg-space-scale { align-items: end; display: flex; gap: var(--sg-space-3); min-height: 11rem; }
.sg-space-token { background: var(--sg-color-brand); color: white; display: grid; font-size: 0.75rem; font-weight: 800; min-width: 2.25rem; padding: var(--sg-space-2); place-items: end center; }

@media (max-width: 760px) {
  .sg-workbench-shell { padding: var(--sg-space-2); }
  .sg-workbench-header { align-items: flex-start; flex-direction: column; padding: var(--sg-space-3) var(--sg-space-4); position: static; }
  .sg-workbench-main { padding: var(--sg-space-8) var(--sg-space-2); }
  .sg-workbench-intro, .sg-demo-benefits { grid-template-columns: 1fr; }
  .sg-section-catalog, .sg-token-grid, .sg-pattern-grid { grid-template-columns: 1fr; }
  .sg-workbench-section-heading, .sg-preview-toolbar { align-items: flex-start; flex-direction: column; }
  .sg-preview-stage { padding: var(--sg-space-3); }
  .sg-demo-plan-grid { grid-template-columns: 1fr; }
}