/* GoodSigning — generated from the design system tokens.json + components/bundle.css */
:root {
  --navy: #1b1564;
  --navy-deep: #120e47;
  --gold: #c69a37;
  --surface: #f3f5f8;
  --surface-raised: #ffffff;
  --surface-sunken: #f3f5f8;
  --surface-strong: #e8ecf2;
  --ink: #1b1564;
  --ink-muted: #44516b;
  --ink-on-navy: #ffffff;
  --ink-on-navy-muted: #d6ddea;
  --ink-on-gold: #1b1564;
  --line: #d4dae5;
  --line-control: #b8c2d3;
  --brand: var(--navy);
  --on-brand: var(--ink-on-navy);
  --accent: #8a5a0c;
  --focus: #1b1564;
  --success: #1e6b3a;
  --success-bg: #e3f2e8;
  --warning: #4a3a05;
  --warning-bg: #fff4d6;
  --warning-line: #e8c766;
  --danger: #9b1c1c;
  --danger-ink: #6b1f1f;
  --danger-bg: #fdecec;
  --danger-line: #e8a3a3;
  --camera: #100d36;
  --camera-card: #2c2866;
  --shadow-card: 0 1px 2px rgba(27,21,100,0.08);
  --shadow-lift: 0 18px 40px rgba(16,12,63,0.22);
  --space-1: 4px;
  --space-2: 8px;
  --space-2\.5: 10px;
  --space-3: 12px;
  --space-3\.5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-7: 28px;
  --space-10: 40px;
  --space-16: 64px;
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --control-sm: 44px;
  --control-md: 48px;
  --control-lg: 52px;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Saira Condensed", "Arial Narrow", Inter, sans-serif;
}


/* GoodSigning components — plain CSS on tokens.css. Prefix: gs- */

body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.gs-root, .gs-root * { box-sizing: border-box; }
.gs-root { font-family: var(--font-sans); color: var(--ink); }
.gs-root a { color: var(--ink); }
.gs-root a:hover { color: var(--navy-deep); }
.gs-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.gs-btn { font: 600 14px/1.2 var(--font-sans); height: var(--control-sm); padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-control); background: var(--surface-raised); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.gs-btn:hover { border-color: var(--ink-muted); }
.gs-btn:active { transform: translateY(1px); }
.gs-btn--primary { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.gs-btn--primary:hover { background: var(--navy-deep); }
[data-theme="dark"] .gs-btn--primary:hover { background: #d2a945; }
.gs-btn--gold { background: var(--gold); border-color: transparent; color: var(--ink-on-gold); font-weight: 700; }
.gs-btn--gold:hover { background: #d2a945; }
.gs-btn--lg { height: var(--control-lg); border-radius: var(--radius-md); font-size: 16px; font-weight: 700; }
.gs-btn--md { height: var(--control-md); font-size: 15px; }
.gs-btn--block { width: 100%; }
.gs-btn--pill { border-radius: var(--radius-pill); }
.gs-btn[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.gs-btn:disabled { background: var(--surface-strong); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; }
.gs-btn-row { display: flex; gap: var(--space-2); }
.gs-btn-row > .gs-btn { flex: 1; }

/* ---------- Chip ---------- */
.gs-chip { display: inline-flex; align-items: center; flex-shrink: 0; font: 700 11px/1.3 var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-strong); border-radius: var(--radius-pill); padding: 3px 8px; }
.gs-chip--gold { background: var(--gold); color: var(--ink-on-gold); }
.gs-chip--success { background: var(--success-bg); color: var(--success); }
.gs-chip--danger { background: var(--danger-bg); color: var(--danger); }

/* ---------- AppHeader (navy band) ---------- */
.gs-band { background: var(--navy); padding: 52px var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.gs-band__eyebrow { font: 600 13px/1.3 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--ink-on-navy-muted); }
.gs-band__title { font: 700 22px/1.25 var(--font-sans); color: var(--ink-on-navy); margin: 0; }
.gs-band--brand { padding: var(--space-16) var(--space-7) var(--space-10); gap: var(--space-2\.5); }
.gs-band__brand { font: 700 30px/1.15 var(--font-sans); letter-spacing: -.5px; color: var(--ink-on-navy); }
.gs-band__bar { width: 48px; height: 4px; border-radius: 2px; background: var(--gold); }
.gs-band__tagline { font: 400 15px/1.45 var(--font-sans); color: var(--ink-on-navy-muted); }

/* ---------- Section label ---------- */
.gs-section-label { font: 700 13px/1.3 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Card ---------- */
.gs-card { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2\.5); box-shadow: var(--shadow-card); }
.gs-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.gs-card__title { font: 700 17px/1.3 var(--font-sans); margin: 0; }
.gs-card__meta { font: 600 13px/1.3 var(--font-sans); color: var(--ink-muted); }
.gs-card__body { font: 400 14px/1.45 var(--font-sans); color: var(--ink-muted); margin: 0; }
.gs-card__status { font: 600 13px/1.4 var(--font-sans); color: var(--ink); }
.gs-card--offer { border: 2px solid var(--gold); box-shadow: none; }
.gs-card--flag { border-left: 4px solid var(--gold); }
.gs-price { font: 700 26px/1.15 var(--font-sans); }

/* ---------- Progress (OrderCard) ---------- */
.gs-progress { display: flex; gap: var(--space-1); }
.gs-progress > span { flex: 1; height: 6px; border-radius: var(--radius-xs); background: var(--line); }
.gs-progress > span.is-done { background: var(--brand); }

/* ---------- Stat ---------- */
.gs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); text-align: center; }
.gs-stat { background: var(--surface-raised); border-radius: var(--radius-md); padding: 10px 4px; }
.gs-stat--sunken { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 8px 4px; }
.gs-stat__value { font: 700 20px/1.2 var(--font-sans); }
.gs-stat--sunken .gs-stat__value { font-size: 17px; }
.gs-stat__label { font: 400 12px/1.3 var(--font-sans); color: var(--ink-muted); }

/* ---------- Callout ---------- */
.gs-callout { border-radius: var(--radius-md); padding: 10px var(--space-3\.5); font: 400 14px/1.4 var(--font-sans); border: 1px solid; }
.gs-callout strong { font-weight: 700; }
.gs-callout--warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning); }
.gs-callout--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); }
.gs-callout--danger strong { color: var(--danger); }

/* ---------- Check (ID verification) ---------- */
.gs-check { display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); padding: 9px 10px; font: 700 13px/1.3 var(--font-sans); background: var(--success-bg); color: var(--success); }
.gs-check--pending { background: var(--warning-bg); color: var(--warning); }
.gs-check svg { flex-shrink: 0; }
.gs-check-row { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3\.5); display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
.gs-check-row__title { font: 700 14px/1.3 var(--font-sans); }
.gs-check-row__title.is-pass { color: var(--success); }
.gs-check-row__body { font: 400 13px/1.35 var(--font-sans); color: var(--ink-muted); }
.gs-check-row--fail { background: var(--danger-bg); border: 1px solid var(--danger-line); box-shadow: none; }
.gs-check-row--fail .gs-check-row__title { color: var(--danger); }
.gs-check-row--fail .gs-check-row__body { color: var(--danger-ink); }

/* ---------- TabBar ---------- */
.gs-tabbar { background: var(--surface-raised); border-top: 1px solid var(--line); display: flex; padding: 6px 8px 24px; }
.gs-tabbar a { flex: 1; min-height: var(--control-md); display: flex; align-items: center; justify-content: center; font: 500 13px/1 var(--font-sans); text-decoration: none; color: var(--ink-muted); }
.gs-tabbar a[aria-current="page"] { font-weight: 700; color: var(--ink); }

/* ---------- Field ---------- */
.gs-field { display: flex; flex-direction: column; gap: var(--space-2); }
.gs-field label, .gs-label { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.gs-input { height: 50px; border: 1px solid var(--line-control); border-radius: var(--radius-md); padding: 0 14px; font: 400 16px var(--font-sans); background: var(--surface-raised); color: var(--ink); width: 100%; }
.gs-input::placeholder { color: var(--ink-muted); opacity: .8; }
select.gs-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.gs-hint { font: 400 13px/1.4 var(--font-sans); color: var(--ink-muted); margin: 0; }
.gs-link-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-md); font: 600 15px/1.3 var(--font-sans); text-decoration: none; }

/* ---------- Camera well ---------- */
.gs-camera { background: var(--camera); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; position: relative; }
.gs-camera__frame { position: relative; width: 300px; height: 190px; display: flex; align-items: center; justify-content: center; }
.gs-camera__corner { position: absolute; width: 28px; height: 28px; border: 0 solid var(--gold); }
.gs-camera__corner.tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 10px; }
.gs-camera__corner.tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 10px; }
.gs-camera__corner.bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 10px; }
.gs-camera__corner.br { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 10px; }
.gs-camera__card { width: 260px; height: 156px; background: var(--camera-card); border-radius: var(--radius-md); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; }
.gs-camera__barcode { height: 54px; display: flex; gap: 2px; }
.gs-camera__barcode i { background: #d6ddea; }
.gs-camera__line { height: 8px; background: #44516b; border-radius: 4px; }
.gs-camera__status { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font: 600 14px/1.3 var(--font-sans); color: var(--gold); }

/* ---------- Calendar / slots ---------- */
.gs-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.gs-cal__dow { font: 700 11px/1 var(--font-sans); letter-spacing: .3px; color: var(--ink-muted); padding: 4px 0 6px; }
.gs-cal button { font: 600 14px/1 var(--font-sans); height: 38px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; }
.gs-cal button:hover:not(:disabled) { background: var(--surface-strong); }
.gs-cal button:disabled { color: var(--ink-muted); opacity: .45; cursor: default; }
.gs-cal button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.gs-slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gs-slots button { font: 600 14px/1 var(--font-sans); height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.gs-slots button[aria-pressed="true"] { background: var(--brand); border-color: transparent; color: var(--on-brand); }

/* ---------- Dropzone ---------- */
.gs-drop { border: 2px dashed var(--line-control); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--surface-raised); cursor: pointer; transition: border-color .15s, background .15s; }
.gs-drop:hover, .gs-drop.is-over { border-color: var(--gold); background: var(--warning-bg); }
.gs-drop__title { font: 700 15px/1.3 var(--font-sans); }
.gs-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gs-files li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font: 400 14px/1.3 var(--font-sans); }

/* =========================================================
   Website — ServicePanels (goodsigning.com homepage)
   ========================================================= */
.gs-site { background: var(--surface); min-height: 100%; display: flex; flex-direction: column; }
.gs-site__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px 28px; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.gs-site__logo { height: 56px; width: auto; display: block; }
[data-theme="dark"] .gs-site__header { background: #f7f8fb; }
[data-theme="dark"] .gs-site__header .gs-btn { color: #1b1564; }
.gs-site__nav { display: flex; align-items: center; gap: var(--space-2); }
.gs-kicker { font: 600 13px/1.3 var(--font-display); letter-spacing: .32em; text-transform: uppercase; }

.gs-panels { flex: 1; display: flex; gap: 12px; padding: 12px; min-height: 560px; }
.gs-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--navy); color: #fff; cursor: pointer; isolation: isolate;
  transition: flex-grow .75s cubic-bezier(.7,0,.2,1), flex-basis .75s cubic-bezier(.7,0,.2,1), opacity .45s ease, margin .75s cubic-bezier(.7,0,.2,1), box-shadow .3s; }
.gs-panel:hover { box-shadow: var(--shadow-lift); }
.gs-panel__media { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gs-panel:hover .gs-panel__media { transform: scale(1.04); }
.gs-panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,12,63,.10) 0%, rgba(16,12,63,.35) 45%, rgba(16,12,63,.92) 100%); }
.gs-panel__slot { position: absolute; top: 14px; left: 14px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .3px; color: #d6ddea; background: rgba(16,12,63,.55); border: 1px dashed rgba(214,221,234,.5); border-radius: var(--radius-pill); padding: 4px 10px; z-index: 1; }
.gs-panel__cover { position: absolute; inset: auto 0 0 0; padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: opacity .35s ease, transform .5s ease; }
.gs-panel__num { font: 600 13px/1 var(--font-display); letter-spacing: .32em; color: var(--gold); }
.gs-panel__title { font: 700 40px/1 var(--font-display); text-transform: uppercase; margin: 0; letter-spacing: .5px; }
.gs-panel__blurb { font: 400 15px/1.5 var(--font-sans); color: #d6ddea; margin: 0; max-width: 34ch; }
.gs-panel__go { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-sans); color: var(--gold); margin-top: 4px; }
.gs-panel__go::after { content: "→"; transition: transform .25s; }
.gs-panel:hover .gs-panel__go::after { transform: translateX(4px); }

/* expanded state */
.gs-panels.has-open .gs-panel { flex-grow: 0; opacity: 0; pointer-events: none; margin-right: -12px; }
.gs-panels.has-open .gs-panel.is-open { flex-grow: 1; opacity: 1; pointer-events: auto; cursor: default; margin-right: 0; }
.gs-panel.is-open .gs-panel__cover { opacity: 0; transform: translateY(20px); pointer-events: none; }
.gs-panel__detail { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(360px, 6fr); opacity: 0; pointer-events: none; transition: opacity .4s ease .35s; }
.gs-panel.is-open .gs-panel__detail { opacity: 1; pointer-events: auto; }
.gs-panel__intro { padding: 28px 32px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.gs-panel__intro .gs-panel__title { font-size: 72px; line-height: .95; }
.gs-panel__back { position: absolute; top: 18px; left: 18px; z-index: 2; height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.35); background: rgba(16,12,63,.5); color: #fff; font: 600 14px/1 var(--font-sans); cursor: pointer; backdrop-filter: blur(6px); }
.gs-panel__back:hover { background: rgba(16,12,63,.8); }
.gs-panel__sheet { margin: 14px; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; transform: translateX(24px); transition: transform .6s cubic-bezier(.2,.7,.2,1) .35s; }
.gs-panel.is-open .gs-panel__sheet { transform: none; }
.gs-step { display: flex; flex-direction: column; gap: 10px; }
.gs-step__head { display: flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--font-sans); }
.gs-step__n { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 700 12px/24px var(--font-sans); text-align: center; flex-shrink: 0; }
.gs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gs-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gs-role { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.gs-role b { font: 700 14px/1.3 var(--font-sans); }
.gs-role span { font: 400 12px/1.4 var(--font-sans); color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .gs-panel, .gs-panel__media, .gs-panel__cover, .gs-panel__detail, .gs-panel__sheet { transition: none !important; }
}
@media (max-width: 760px) {
  .gs-panels { flex-direction: column; }
  .gs-panel { min-height: 220px; }
  .gs-panels.has-open .gs-panel { flex-basis: 0; min-height: 0; margin: 0 0 -12px; }
  .gs-panels.has-open .gs-panel.is-open { min-height: 100%; margin: 0; }
  .gs-panel__detail { grid-template-columns: 1fr; position: relative; }
  .gs-panel.is-open .gs-panel__detail { position: relative; }
  .gs-panel__intro .gs-panel__title { font-size: 44px; }
  .gs-grid-2, .gs-roles { grid-template-columns: 1fr; }
}
.gs-panel__sheet > * { flex-shrink: 0; }
.gs-panel__slot { transition: opacity .3s; }
.gs-panel.is-open .gs-panel__slot { opacity: 0; }
[data-theme="dark"] .gs-site__header .gs-btn:not(.gs-btn--gold) { background: #ffffff; border-color: #b8c2d3; }

/* Header as "All services": logo + empty header space close an open panel */
.gs-site__home { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; border-radius: var(--radius-md); }
.gs-site__back { font: 600 14px/1 var(--font-sans); color: #1b1564; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease .3s, transform .3s ease .3s; pointer-events: none; white-space: nowrap; }
.gs-site__header.is-panel-open { cursor: pointer; }
.gs-site__header.is-panel-open .gs-site__nav { cursor: default; }
.gs-site__header.is-panel-open .gs-site__back { opacity: 1; transform: none; }
.gs-site__header.is-panel-open .gs-site__home:hover .gs-site__back { text-decoration: underline; }
.gs-site__header.is-panel-open:hover { background: #f7f8fb; }

/* Contact details */
.gs-site__contact { font: 600 14px/1 var(--font-sans); color: #1b1564; text-decoration: none; padding: 0 8px; }
.gs-site__contact:hover { text-decoration: underline; }
.gs-hours { margin: 0; font: 500 13px/1.4 var(--font-sans); color: #d6ddea; }
@media (max-width: 760px) { .gs-site__contact { display: none; } }