/* Struers Solution Finder — foundations. Light only, by design. */

:root {
  color-scheme: light;

  /* ─────────────────────────────────────────────────────────────
     Palette lifted directly from struers.com's own stylesheet
     (/_next/static/css/197a3beafe743b6c.css). Token names on the
     right are the Struers originals.
     ───────────────────────────────────────────────────────────── */

  /* Ink — Struers neutral / primary-gray ramp */
  --ink:        #212121;   /* --color-neutral--900 */
  --ink-2:      #393939;   /* --color-primary-gray-90 */
  --ink-3:      #5f5f5f;   /* --color-primary-gray-60 */
  --ink-4:      #8d8d8d;   /* --color-primary-gray-50 */

  /* Ground — Struers warm neutrals */
  --paper:      #ffffff;   /* --color-white */
  --surface:    #f9f9f5;   /* --color-primary--neutral-50 */
  --surface-2:  #f2f2ee;   /* --color-primary--neutral-100 */
  --line:       #dedede;   /* --color-primary-gray-30 */
  --line-soft:  #e9e9e5;   /* --color-primary--neutral */

  /* Brand — Struers primary navy */
  --brand:      #213555;   /* --color-primary */
  --brand-dark: #0c1927;   /* --color-primary--900 */
  --brand-700:  #273e62;   /* --color-primary--700 */
  --brand-mid:  #354f75;   /* --color-primary--500 */
  --brand-300:  #718199;   /* --color-primary--300 */
  --brand-100:  #bfc8d4;   /* --color-primary--100 */
  --brand-tint: #e6e9ed;   /* --color-primary--50 */
  --sky:        #f0f4f7;   /* --color-supporting-sky-blue-10 */
  --sky-2:      #e6eaf1;   /* --color-supporting-sky-blue-20 */

  /* Struers red — logo only, plus the thinnest of accents */
  --logo-red:   #e2001a;   /* --color-logo */
  --logo-grey:  #58585a;   /* --color-primary--dark */

  /* Signal — the problem state */
  --signal:      #b33f34;  /* --color-secondary--800 */
  --signal-tint: #ffe5db;  /* --color-pale-orange */

  /* Resolution — the remedy state */
  --ok:      #1c764b;      /* --color-status-success */
  --ok-tint: #e8f5e9;      /* --color-status-success-light */

  --steel:   #718199;

  --r-sm: 2px;
  --r:    4px;
  --r-lg: 8px;

  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(33,33,33,.06), 0 1px 1px rgba(33,33,33,.04);
  --shadow:    0 2px 8px rgba(33,33,33,.09), 0 1px 2px rgba(33,33,33,.05);
  --shadow-lg: 0 12px 32px rgba(33,33,33,.14), 0 2px 8px rgba(33,33,33,.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(33,53,85,.3); }
a:hover { border-bottom-color: var(--brand); }

/* ── View switching ── */
.view { display: none; }
body[data-view="intake"] .view-intake { display: block; }
body[data-view="deck"]   .view-deck   { display: block; }
body[data-view="report"] .view-report { display: block; }
body[data-view="deck"]   { overflow: hidden; }
body[data-view="deck"]   .topbar { display: none; }

/* ── Top bar ── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.brandmark { display: flex; align-items: center; gap: 16px; border: none; text-decoration: none; }
.logo { display: block; width: 116px; height: auto; }
.brandrule { width: 1px; height: 26px; background: var(--line); }
.brandsub { font-size: 14px; color: var(--ink-3); letter-spacing: .01em; }

/* ── Buttons ── */
.btn {
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 11px 20px; border-radius: var(--r);
  border: 1px solid transparent; background: none; color: var(--ink);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: var(--line); color: var(--ink-2); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink-4); color: var(--ink); }
.btn-sm { font-size: 14px; padding: 8px 14px; }
.btn-icon { padding: 8px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper); }
.btn-icon:hover { border-color: var(--ink-4); color: var(--ink); }
.btn[disabled] { opacity: .4; cursor: default; }

/* ── Intake ── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.hero {
  padding: 72px 0 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 56px; align-items: center;
}
.hero-copy { max-width: 640px; }
.hero-figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.hero-figure img { display: block; width: 100%; height: 300px; object-fit: cover; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-mid); margin-bottom: 20px;
}
.hero h1 { font-size: 46px; letter-spacing: -0.03em; line-height: 1.12; }
.lede { margin-top: 20px; font-size: 18px; color: var(--ink-2); line-height: 1.6; max-width: 620px; }

.intake-card {
  margin: 8px 0 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
#challenge {
  width: 100%; font: inherit; font-size: 17px; line-height: 1.5;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink); resize: vertical;
}
#challenge:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(53,79,117,.16); }
.intake-actions {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.hint { font-size: 14px; color: var(--ink-3); }
.hint.is-match { color: var(--brand); }

.section-title {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}

.cases { padding-bottom: 64px; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.case:hover { border-color: var(--brand-mid); box-shadow: var(--shadow); transform: translateY(-2px); }
.case:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.case-meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-mid); font-weight: 600; }
.case h3 { font-size: 19px; letter-spacing: -0.01em; }
.case p { font-size: 15px; color: var(--ink-2); }
.case-img {
  display: block; margin: -24px -24px 4px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden; background: var(--surface-2);
}
.case-img img { display: block; width: 100%; height: 150px; object-fit: cover; }
.case-quote {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 14px; color: var(--ink-3); font-style: italic; line-height: 1.5;
}
.case-go { font-size: 14px; font-weight: 600; color: var(--brand); }

.how { padding-bottom: 80px; }
.how-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how-list li { display: flex; gap: 16px; }
.how-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.how-list h3 { font-size: 16px; margin-bottom: 6px; }
.how-list p { font-size: 15px; color: var(--ink-2); }

.sitefoot {
  border-top: 1px solid var(--line); background: var(--surface); padding: 28px 32px;
}
.sitefoot p { max-width: 1056px; margin: 0 auto; font-size: 13px; color: var(--ink-3); }

@media (max-width: 900px) {
  .case-grid, .how-list { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero-figure img { height: 200px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: 34px; }
  .wrap, .topbar-in { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}