/* Sightglass — "Industry" design system, warm palette.
   Extracted from the approved redesign mockups (Claude Design export, Aug 2026):
   Industry grammar (blueprint frames, tags, condensed headings) + the Sightglass
   warm token override (foam/stout/amber/copper/oxblood/bottle-green).
   Plain CSS on plain HTML — no JavaScript required, no build step.
   Fonts: Barlow Condensed (headings) + Barlow (body), loaded via Google Fonts. */

:root {
  /* — warm palette: neutrals carry, accents mean something —
     Amber = attention/action · Oxblood = decline · Green = growth/trust · Copper = structure */
  --color-bg: #F6F2EA;            /* foam */
  --color-surface: #E8DFC9;       /* kraft */
  --color-text: #1A1310;          /* stout */
  --color-accent: #C8842B;        /* amber — fills only on light */
  --color-accent-2: #B87333;      /* copper */
  --color-divider: color-mix(in srgb, #1A1310 16%, transparent);

  --color-neutral-100: #FAF7F1;
  --color-neutral-200: #F0EADD;
  --color-neutral-300: #DED3BF;
  --color-neutral-400: #C2B49A;   /* cork */
  --color-neutral-500: #A6947A;
  --color-neutral-600: #8A755B;
  --color-neutral-700: #7A5C3E;   /* oak — secondary text, 5.5:1 */
  --color-neutral-800: #4A3728;
  --color-neutral-900: #2E1F19;   /* cellar */

  --color-accent-100: #F7ECD9;
  --color-accent-200: #EFDCB9;
  --color-accent-300: #E2C48D;
  --color-accent-400: #D5A95F;
  --color-accent-500: #C8842B;
  --color-accent-600: #AD7222;
  --color-accent-700: #96601A;    /* amber-text — the text-safe amber on light */
  --color-accent-800: #6F4713;
  --color-accent-900: #3F2A0C;

  --color-accent-2-100: #F5E7DA;
  --color-accent-2-200: #EAD2BB;
  --color-accent-2-300: #DBB694;
  --color-accent-2-400: #CB9464;
  --color-accent-2-500: #B87333;
  --color-accent-2-600: #9C5F28;
  --color-accent-2-700: #7E4C20;
  --color-accent-2-800: #5C3717;
  --color-accent-2-900: #3A230E;

  /* semantic tokens — colour carries information */
  --sg-risk: #6E1F2A;             /* oxblood: decline, at-risk (9.9:1 on foam) */
  --sg-grow: #1F4B3F;             /* bottle green: growth, trust (8.8:1 on foam) */
  --sg-copper: #B87333;           /* structure, keylines — never body text on light */
  --sg-cellar: #2E1F19;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* flat fills, hairline rules — shadows stay whispers */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #1A1310 10%, transparent);
  --shadow-md: 0 2px 8px color-mix(in srgb, #1A1310 11%, transparent);
  --shadow-lg: 0 8px 24px color-mix(in srgb, #1A1310 13%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; }
h4 { font-size: 20px; } h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: #6F4713; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — blueprint frame: components are wireframe objects — square, transparent,
     hairline-bordered, with registration marks at the corners — */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 0;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #1A1310; }
.btn-primary:hover { background: #B37526; color: #1A1310; }
.btn-primary:active { background: #96601A; }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); border-color: transparent; }
.btn-ghost:hover { color: #6F4713; background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* Grid and flex children default to min-width:auto, which means they will not shrink
   below their content — so a single long unbroken string (a hostname, a select option)
   pushes the whole page wider than the viewport and the BODY scrolls sideways. This is
   what broke the signup section on mobile. Fixing it at the source rather than per
   component, because the next long string would do it again. */
.g-hero > *, .g-2col > *, .g-start > *, .g-signup > *, .g-tiers > *,
.g-stats > *, .g-loop > *, .g-mondays > *, .g-posts > *,
.g-article > *, .g-featured > * { min-width: 0; }

/* — forms — */
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input::placeholder { color: var(--color-neutral-600); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
/* A select sizes to its longest option unless told otherwise, and ours carry a plan
   name, a rep range and a price. */
select.input { max-width: 100%; text-overflow: ellipsis; }
.field { display: block; margin-bottom: var(--space-3); }
.field > .label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.field > .hint { display: block; margin-top: 4px; font-size: 12.5px; line-height: 18px;
  color: var(--color-neutral-700); overflow-wrap: anywhere; }
/* Form feedback. Oxblood for a problem and bottle green for success, matching the
   product's semantic split, so an error on the marketing site reads the same way an
   at-risk account does inside the app. */
.form-note { margin: var(--space-3) 0 0; padding: 10px 12px; font-size: 13.5px;
  line-height: 20px; border: 1px solid var(--color-divider); }
.form-note[hidden] { display: none; }

/* `hidden` means hidden, whatever else says otherwise. The user-agent rule for it is
   a plain [hidden]{display:none} that ANY inline display beats — which is how the
   sign-in page shipped two provider buttons that were marked hidden, were visible to
   every visitor, and led to a WorkOS 404. One line so the mistake cannot recur. */
[hidden] { display: none !important; }
.form-note.is-error { border-color: var(--sg-risk); color: var(--sg-risk);
  background: color-mix(in srgb, var(--sg-risk) 7%, transparent); }
.form-note.is-ok { border-color: var(--sg-grow); color: var(--sg-grow);
  background: color-mix(in srgb, var(--sg-grow) 7%, transparent); }
.form-note.is-info { color: var(--color-neutral-700); }
.form-note a { color: inherit; }
/* Slug alternatives offered when a company name is taken — chips, not a wall of text. */
.alts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.alts button {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 3px 8px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.alts button:hover { border-color: var(--color-accent); }

/* iOS Safari ZOOMS IN when a form control with font-size < 16px receives focus. The
   zoom makes the visual viewport narrower than the layout viewport, and the page can
   then be panned left and right — which reads as the layout being broken, and happens
   the moment a customer taps the email field on the signup form.
   16px is the exact threshold; anything at or above it suppresses the zoom.

   The other "fix" for this is maximum-scale=1 / user-scalable=no on the viewport meta.
   That works by taking pinch-zoom away from everyone, including people who need it to
   read the page at all, so it is not on the table. Sizing the controls properly costs
   nothing and breaks nobody.

   Targeted at coarse pointers so the desktop form keeps its 14px scale. */
@media (pointer: coarse) {
  .input, select.input, textarea.input { font-size: 16px; }
}
/* Belt and braces: some Android browsers and desktop Safari in responsive mode report
   a fine pointer at phone widths, and the cost of 16px controls on a small screen is
   nil — they are easier to hit either way. */
@media (max-width: 640px) {
  .input, select.input, textarea.input { font-size: 16px; }
}

/* — the sightglass motif — */
/* The object the product is named for, mounted in the outer margin like a gauge on a
   brewery wall. In the MARGIN specifically, so it never participates in layout: it
   cannot push, wrap or reflow anything, and it cannot be the thing that makes a page
   scroll sideways.
   Hidden entirely until the gutter is genuinely wide enough to hold it — .shell is
   1200px + 64px padding, so the free margin is (100vw - 1200px)/2 + 64px, and below
   ~1400px there isn't room for a motif big enough to read. Better absent than cramped.
   The bubbles are r 2.1-4.1 in a 200-unit viewBox, so the rendered radius is
   r x width/200: at 132px the largest is ~2.7px and at 168px ~3.4px. Below about
   120px wide the motion stops being legible, which is the whole point of it. */
.motif { display: none; }
@media (min-width: 1400px) {
  .motif {
    display: block; position: absolute; top: var(--motif-top, 40px);
    width: 132px; height: auto; opacity: .55;
    pointer-events: none; user-select: none;
  }
  /* A constant offset, not a viewport calc: the section's own edge already sits at
     the gutter, so the motif only needs to step back its own width plus a gap. The
     gutter is (100vw - 1200px)/2 + 64px — 164px at the 1400px gate — so a 132px motif
     set back 148px leaves 16px clear of the viewport edge. */
  .motif-l { left: -148px; }
  .motif-r { right: -148px; }
}
@media (min-width: 1600px) {
  .motif { width: 168px; opacity: .6; }
  .motif-l { left: -188px; }
  .motif-r { right: -188px; }
}
/* The SVG carries its own prefers-reduced-motion rule, which applies because it is
   loaded as an <img> and inherits the viewer's setting. This is belt and braces for
   the element itself. */
@media (prefers-reduced-motion: reduce) { .motif { opacity: .4; } }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--sg-copper); color: var(--color-neutral-700); }

/* — elevation — */
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; margin-right: auto; color: var(--color-text); text-decoration: none;
}
/* Plain nav links only. A .btn in the nav keeps its own padding and colors —
   this rule outranks .btn on specificity and used to strip the header CTA to
   "6px 2px", cramming the label against the button edge. */
.nav a:not(.nav-brand):not(.btn) { color: inherit; text-decoration: none; font-size: 14px; padding: 6px 2px; }
.nav a:not(.nav-brand):not(.btn):hover, .nav a[aria-current='page']:not(.nav-brand):not(.btn) { color: var(--color-accent-700); }
/* The header CTA carries the same side padding as the hero CTA (20px) so the
   label sits with the same breathing room off the button edge. */
.nav .btn { padding: 10px 20px; }

/* — page scaffolding used across the pages — */
.shell { max-width: 1200px; margin: 0 auto; padding: 0 64px; }
.kicker {
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700); margin: 0 0 12px; line-height: 1.4;
}
.rule { height: 1px; background: var(--color-divider); }

/* ══════════ responsive — the mockups are 1200px artboards; these collapse them ══════════ */
@media (max-width: 1020px) {
  .shell { padding: 0 32px; }
  .g-hero, .g-2col, .g-featured, .g-article { grid-template-columns: 1fr !important; }
  .g-hero { gap: 40px !important; padding-top: 48px !important; padding-bottom: 56px !important; }
  .g-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .g-loop { grid-template-columns: repeat(2, 1fr) !important; }
  .g-mondays { grid-template-columns: 1fr 1fr !important; }
  .g-tiers { grid-template-columns: 1fr !important; max-width: 460px; }
  .g-signup { grid-template-columns: 1fr !important; gap: 28px !important; }
  .g-posts { grid-template-columns: repeat(2, 1fr) !important; }
  .loop-bracket { display: none !important; }
  h1 { font-size: 40px !important; }
}
@media (max-width: 640px) {
  .shell { padding: 0 20px; }
  .tag { font-size: 11px !important; }
  .nav { gap: 12px; }
  .nav .btn { width: 100%; order: 9; }
  .g-stats, .g-loop, .g-mondays, .g-posts, .g-start, .g-signup {
    grid-template-columns: 1fr !important; }
  /* A form is the one thing that must never be squeezed: max-width caps it on a wide
     screen, and on a phone it should simply be the column. */
  #signupForm { max-width: none !important; }
  /* The hero headline is written to read as exactly two lines:
       "The accounts you're losing" / "aren't in your report."
     Each line is its own block, so the only thing that breaks it is a line being wider
     than its column. MEASURED in the real face (Barlow Condensed 600, uppercase, with
     the .01em tracking): line 1 costs 10.84px of width per 1px of font-size. At the
     shipped 58px it needed 629px in a 532px column — it was never close.

     Sized to fit rather than forced with white-space:nowrap. A nowrap headline that
     ever does NOT fit becomes horizontal page scroll, which is the exact bug fixed
     twice already in this file. Too large merely wraps; it can never overflow. */
  h1 { font-size: clamp(24px, 7.6vw, 33px) !important; }
  .slack-stack > div { transform: none !important; margin-left: 0 !important; }
}
/* The hero headline is written to read as two lines — "The accounts you're losing" /
   "aren't in your report." Each line is its own block, so the only thing that breaks it
   is a line being wider than its column. Measured: it misses by 15px at desktop and by
   29px on a 360-and-under phone. Sized to fit rather than forced with nowrap, because a
   nowrap headline that ever DOESN'T fit becomes horizontal page scroll — the exact bug
   fixed twice already. Too big simply wraps; it never overflows. */
@media (max-width: 380px) {
  h1 { font-size: 29px !important; }
  /* The hero's "11,340 · 96 accounts" row is a nowrap tag next to a 40px number and
     cannot fit a narrow phone on one line. Let it wrap rather than push the page. */
  .g-hero .tag { white-space: normal !important; }
}
/* Belt and braces for the narrowest phones: a tag is a label, not a layout element,
   and should never be the thing that makes a page scroll sideways. */
.tag { max-width: 100%; }