/* =============================================================================
   Area 661 Outpost: public Field Guide layer
   -----------------------------------------------------------------------------
   Loaded after styles.css. It re-themes ONLY the public website shell (.app.public-shell):
   cream paper, Outpost green, signal orange, atomic lime, condensed signage type, field notes,
   chapter labels and the oilfield scene. Customer Mission Control, the staff and owner shells and
   every shared component class keep the dark operational system in styles.css untouched.

   Rules this file lives by (see DESIGN-SYSTEM.md):
   - Additive: no content, price, SKU, fee or business rule lives here. It only styles them.
   - Signal orange (#ed5318) is for artwork and large graphics. Text and buttons use the
     text-safe shades below (WCAG AA is asserted by tests/field-guide-tokens.test.mjs).
   - Nothing is ever painted behind the hero logo (scripts/brand_assets.py enforces it).
   - Colours come from the tokens in :root and the role tokens per surface. No stray hex values.
   ============================================================================= */

/* ---------- 1. palette and type tokens ---------- */
:root {
  /* Recovered from the approved catalog prototype */
  --fg-forest: #083b2c;
  --fg-forest-deep: #052c22;
  --fg-forest-light: #174e3c;
  --fg-paper: #f6f1dd;
  --fg-ivory: #fffdf3;
  --fg-orange: #ed5318; /* artwork and large graphics only: 3.2:1 on paper */
  --fg-orange-deep: #b73b0c; /* small orange text on cream: 5.1:1 */
  --fg-lime: #c4e942;
  --fg-ink: #123e30;
  --fg-muted: #526a5d;
  --fg-line: #dadbc6;

  /* Derived, same family */
  --fg-btn: #c84310; /* text-safe orange for buttons: 4.9:1 with ivory text */
  --fg-btn-hover: #a9320c;
  --fg-ink-soft: #35574a; /* secondary copy: 7.8:1 on ivory */
  --fg-sand: #ecebd5; /* soft band behind cards */
  --fg-pale: #e6eacb; /* selected and highlight tint */
  --fg-field: #fffefa; /* form field fill */
  --fg-field-border: #6f8a7b; /* 3.7:1 on ivory, so a field edge is visible */
  --fg-soft: #f4f0dc; /* soft inset surface */
  --fg-warm: #fff7e6; /* accent card tint */
  --fg-pale-edge: #cfd9a6;

  /* Feedback colours, each pair checked for AA */
  --fg-error-text: #7a271f;
  --fg-error-bg: #ffe1dd;
  --fg-error-edge: #b9473a;
  --fg-notice-text: #5d3b04;
  --fg-notice-bg: #fff0c8;
  --fg-notice-edge: #b7791f;
  --fg-success-text: #214d17;
  --fg-success-bg: #e1f2d8;
  --fg-success-edge: #4c8a12;
  --fg-on-dark: #f6f1dd;
  --fg-on-dark-soft: #cddac9;
  --fg-on-dark-muted: #a9bdb0;

  /* DIN Condensed is on every Apple device; Barlow Condensed (loaded in index.html) covers the rest. */
  --fg-display: "DIN Condensed", "Barlow Condensed", "Arial Narrow", "Noto Sans Display", Impact, sans-serif;
  --fg-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --fg-radius: 16px;
  --fg-shadow: 0 18px 48px rgba(7, 46, 33, 0.1);
}

/* Public pages are light: native controls, scrollbars and overscroll should match the paper. */
:root:has(.public-shell) {
  color-scheme: light;
  background: var(--fg-paper);
}

/* ---------- 2. surface tokens: light by default, dark inside the green bands ---------- */
.public-shell,
.public-shell :is(.page-hero-aside, .oilfield-stage, .hero-stat-strip, .coverage-field-guide) {
  --fg-heading: var(--fg-forest);
  --fg-text: var(--fg-ink);
  --fg-text-soft: var(--fg-ink-soft);
  --fg-text-muted: var(--fg-muted);
  --fg-label: var(--fg-orange-deep);
  --fg-link: var(--fg-orange-deep);
  --fg-focus: var(--fg-orange-deep);
  --fg-rule: var(--fg-line);
  --fg-btn2-border: var(--fg-forest);
  --fg-btn2-text: var(--fg-forest);
  --fg-btn2-hover-bg: var(--fg-forest);
  --fg-btn2-hover-text: var(--fg-ivory);
  --fg-chip-bg: var(--fg-sand);
  --fg-chip-border: var(--fg-line);
  --fg-chip-text: var(--fg-ink-soft);

  /* The shared app tokens, remapped so every existing component re-themes without being rewritten */
  --io-bg: var(--fg-paper);
  --io-bg-elevated: var(--fg-sand);
  --io-surface: var(--fg-ivory);
  --io-surface-soft: var(--fg-soft);
  --io-surface-bright: var(--fg-pale);
  --io-border: var(--fg-rule);
  --io-border-strong: var(--fg-forest);
  --io-action: var(--fg-link);
  --io-action-dark: var(--fg-ivory);
  --io-text: var(--fg-text);
  --io-text-secondary: var(--fg-text-soft);
  --io-text-muted: var(--fg-text-muted);
  --io-cyan: var(--fg-focus);
  --io-orange: var(--fg-orange);
  --io-sand: var(--fg-paper);
  --io-warning: var(--fg-notice-edge);
  --io-success: var(--fg-success-edge);
  --io-danger: var(--fg-error-edge);
  --io-radius-sm: 8px;
  --io-radius-md: 12px;
  --io-radius-lg: var(--fg-radius);
  --io-radius-xl: 22px;
  --io-shadow: var(--fg-shadow);
  --io-font-display: var(--fg-display);
  --io-font-body: var(--fg-body);

  color: var(--fg-text);
}

.public-shell :is(.hero, .good-intel-band, .mission-planning-home, .page-hero, .catalog-footer) {
  --fg-heading: var(--fg-ivory);
  --fg-text: var(--fg-on-dark);
  --fg-text-soft: var(--fg-on-dark-soft);
  --fg-text-muted: var(--fg-on-dark-muted);
  --fg-label: var(--fg-lime);
  --fg-link: var(--fg-lime);
  --fg-focus: var(--fg-lime);
  --fg-rule: rgba(246, 241, 221, 0.22);
  --fg-btn2-border: var(--fg-lime);
  --fg-btn2-text: var(--fg-ivory);
  --fg-btn2-hover-bg: rgba(196, 233, 66, 0.16);
  --fg-btn2-hover-text: var(--fg-ivory);
  --fg-chip-bg: rgba(5, 44, 34, 0.45);
  --fg-chip-border: rgba(246, 241, 221, 0.3);
  --fg-chip-text: var(--fg-on-dark);

  --io-border: var(--fg-rule);
  --io-action: var(--fg-link);
  --io-text: var(--fg-text);
  --io-text-secondary: var(--fg-text-soft);
  --io-text-muted: var(--fg-text-muted);
  --io-cyan: var(--fg-focus);

  color: var(--fg-text);
}

/* ---------- 3. page, type and focus ---------- */
.public-shell {
  min-height: 100vh;
  font-family: var(--fg-body);
  background:
    radial-gradient(rgba(8, 59, 44, 0.045) 0.7px, transparent 0.7px) 0 0 / 8px 8px,
    var(--fg-paper);
}

.public-shell ::selection {
  color: var(--fg-forest);
  background: var(--fg-lime);
}

.public-shell h1,
.public-shell h2,
.public-shell h3,
.public-shell h4 {
  color: var(--fg-heading);
  font-family: var(--fg-display);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

.public-shell :focus-visible {
  outline: 3px solid var(--fg-focus);
  outline-offset: 3px;
}

/* The landmark is only a focus target for "Skip to content", never a visible control. */
.public-shell .page-main:focus {
  outline: none;
}

/* Section labels: small, tracked, uppercase. Plain text, not the app's pill. */
.public-shell .eyebrow,
.public-shell .catalog-chapter {
  display: block;
  min-height: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--fg-label);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.public-shell .label-caps {
  color: var(--fg-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.public-shell .text-link {
  color: var(--fg-link);
  font-weight: 700;
}

.public-shell .text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fg-burst {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--fg-orange);
}

.fg-icon {
  flex: none;
  width: 28px;
  height: 28px;
}

/* ---------- 4. buttons ---------- */
.public-shell .button {
  border: 1px solid transparent;
  color: var(--fg-ivory);
  background: var(--fg-btn);
}

.public-shell .button:hover {
  background: var(--fg-btn-hover);
  transform: translateY(-2px);
}

.public-shell .button-secondary {
  border: 1px solid var(--fg-btn2-border);
  color: var(--fg-btn2-text);
  background: transparent;
}

.public-shell .button-secondary:hover {
  color: var(--fg-btn2-hover-text);
  background: var(--fg-btn2-hover-bg);
  transform: translateY(-2px);
}

.public-shell .button-quiet {
  border: 1px solid var(--fg-field-border);
  color: var(--fg-text-soft);
  background: transparent;
}

.public-shell .button-quiet:hover {
  color: var(--fg-heading);
  border-color: var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .button-danger {
  border: 1px solid var(--fg-error-edge);
  color: var(--fg-error-text);
  background: var(--fg-error-bg);
}

.public-shell .button:disabled,
.public-shell .button-secondary:disabled,
.public-shell .button-quiet:disabled {
  opacity: 0.5;
}

/* ---------- 5. header and navigation ---------- */
.public-shell .site-header {
  border-bottom: 1px solid var(--fg-line);
  background: rgba(246, 241, 221, 0.97);
}

.public-shell .header-inner {
  min-height: 80px;
  gap: 24px;
}

.public-shell .brand-mark {
  width: 60px;
  height: 60px;
}

.public-shell .brand-copy strong {
  color: var(--fg-forest);
  font-family: var(--fg-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}

.public-shell .brand-copy small {
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.public-shell .nav-link {
  margin: 0 6px;
  padding: 10px 4px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--fg-ink);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.public-shell .nav-link:hover,
.public-shell .nav-link[aria-current="page"] {
  border-bottom-color: var(--fg-orange);
  color: var(--fg-forest);
  background: transparent;
}

/* The two header actions are hidden on phones; the menu repeats them (see core.js). */
.public-shell .nav-link-action {
  display: none;
}

.public-shell .header-actions :is(.button, .button-secondary) {
  white-space: nowrap;
}

.public-shell .mobile-nav-button {
  width: auto;
  min-width: 56px;
  padding: 0 16px;
  border: 1px solid var(--fg-forest);
  border-radius: 999px;
  color: var(--fg-forest);
  background: var(--fg-ivory);
  font-weight: 700;
}

/* ---------- 6. home hero ---------- */
.public-shell .hero {
  min-height: 0;
  padding: 56px 0;
  color: var(--fg-text);
  background: var(--fg-forest);
}

.public-shell .hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 40px;
}

.public-shell .hero h1 {
  max-width: none;
  margin: 18px 0 22px;
  font-size: clamp(52px, 6.8vw, 100px);
  line-height: 0.94;
  text-transform: uppercase;
}

.public-shell .hero h1 span {
  color: var(--fg-lime);
}

.public-shell .hero-lede {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--fg-text-soft);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
}

.public-shell .hero-actions {
  margin: 28px 0 22px;
}

.public-shell .hero-chips .chip {
  border-color: var(--fg-chip-border);
  color: var(--fg-chip-text);
  background: var(--fg-chip-bg);
}

.public-shell .hero-contractor-link {
  display: inline-block;
  margin-top: 18px;
}

/* The hero logo is the protected brand asset: no background, filter, mask or decoration. */
.public-shell .hero-visual {
  min-height: 0;
  padding: 8px 0;
}

.public-shell .hero-visual img {
  width: min(100%, 500px);
  min-height: 0;
  filter: none;
}

.public-shell .hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid var(--fg-rule);
}

.public-shell .hero-tagline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--fg-lime);
  font-family: var(--fg-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.public-shell .hero-place {
  margin: 0;
  color: var(--fg-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The Bakersfield oilfield scene: its own stage, a sibling of the hero grid, never behind the logo. */
.public-shell .oilfield-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--fg-rule);
  border-radius: 22px;
  color: var(--fg-text);
  background: var(--fg-ivory);
}

.oilfield-stage-art {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.public-shell .oilfield-stage-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 36px 34px;
}

.public-shell .oilfield-stage-copy .catalog-chapter {
  margin: 0;
}

.public-shell .oilfield-stage-copy h2 {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 0.98;
  text-transform: uppercase;
}

.public-shell .oilfield-stage-copy p {
  margin: 0;
  color: var(--fg-text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.public-shell .oilfield-stage-credit {
  color: var(--fg-text-muted);
  font-size: 12px;
}

.public-shell .hero-stat-strip {
  margin-top: 28px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: var(--fg-text);
  background: var(--fg-ivory);
  box-shadow: var(--fg-shadow);
}

.public-shell .hero-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 22px 28px;
  border-right: 1px solid var(--fg-line);
}

.public-shell .hero-stat:last-child {
  border-right: 0;
}

.public-shell .hero-stat strong {
  margin: 0;
  color: var(--fg-forest);
  white-space: nowrap;
  font-family: var(--fg-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

.public-shell .hero-stat span {
  color: var(--fg-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

/* ---------- 7. sections, headings, page heads ---------- */
.public-shell .section {
  padding: 88px 0;
  color: var(--fg-text);
  background: transparent;
}

.public-shell .section.compact {
  padding: 56px 0;
}

.public-shell .section-soft {
  border-color: var(--fg-line);
  background: var(--fg-sand);
}

.public-shell .section-heading {
  gap: 40px;
  margin-bottom: 36px;
}

.public-shell .section-heading h2 {
  max-width: 760px;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 0.98;
  text-transform: uppercase;
}

.public-shell .section-heading p {
  max-width: 440px;
  color: var(--fg-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.public-shell .section-actions {
  margin-top: 28px;
}

/* Inner pages open with a green chapter band, like the catalog's page heads. */
.public-shell .page-hero {
  position: relative;
  padding: 56px 0 52px;
  overflow: hidden;
  color: var(--fg-text);
  background: var(--fg-forest);
}

.public-shell .page-hero-grid {
  gap: 48px;
}

.public-shell .page-hero h1 {
  max-width: 820px;
  margin-top: 0;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.96;
  text-transform: uppercase;
}

.page-hero-burst {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 44px;
  height: 44px;
  color: var(--fg-lime);
  opacity: 0.4;
}

.public-shell .page-hero-aside {
  padding: 22px;
  border: 0;
  border-radius: var(--fg-radius);
  color: var(--fg-text-soft);
  background: var(--fg-ivory);
  font-size: 15px;
}

.public-shell .page-hero-aside p {
  margin: 0;
  color: var(--fg-text-soft);
}

.public-shell .source-block {
  border-left: 4px solid var(--fg-orange);
  color: var(--fg-text-soft);
  background: var(--fg-sand);
}

.public-shell .breadcrumb {
  color: var(--fg-text-muted);
}

.public-shell .breadcrumb a {
  color: var(--fg-text-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-shell .breadcrumb [aria-current="page"] {
  color: var(--fg-heading);
  font-weight: 700;
}

/* ---------- 8. cards and panels ---------- */
.public-shell :is(.card, .panel, .tool-card, .table-card, .timeline-card, .metric-card) {
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  color: var(--fg-text);
  background: var(--fg-ivory);
}

.public-shell :is(.card, .panel, .tool-card) h3 {
  margin-bottom: 10px;
  font-size: 27px;
  line-height: 1.08;
}

.public-shell :is(.card, .panel, .tool-card) p {
  color: var(--fg-text-soft);
}

.public-shell .card-accent {
  border-color: var(--fg-orange);
  background: var(--fg-warm);
}

.public-shell .feature-number {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--fg-orange-deep);
  font-family: var(--fg-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.question-card {
  display: flex;
  flex-direction: column;
}

.question-card p {
  flex: 1;
}

.question-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.question-top .fg-icon {
  color: var(--fg-forest-light);
}

.public-shell .chip {
  border-color: var(--fg-chip-border);
  color: var(--fg-chip-text);
  background: var(--fg-chip-bg);
}

.public-shell .chip.status-good::before {
  background: var(--io-success);
}

.public-shell .chip.status-limited::before {
  background: var(--io-warning);
}

.public-shell .chip.status-neutral::before {
  background: var(--fg-forest-light);
}

/* ---------- 9. material cards (the Field Guide plates) ---------- */
.public-shell .material-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(8, 59, 44, 0.04);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.public-shell .material-card:hover {
  border-color: var(--fg-forest);
  box-shadow: var(--fg-shadow);
  transform: translateY(-3px);
}

.public-shell .material-swatch {
  position: relative;
  height: 168px;
  border-bottom: 1px solid var(--fg-line);
}

.material-chapter {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--fg-forest);
  background: var(--fg-ivory);
  box-shadow: 0 2px 8px rgba(5, 44, 34, 0.2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-shell .material-card-body {
  flex: 1;
  min-height: 0;
  padding: 20px;
}

.public-shell .material-meta {
  margin-bottom: 10px;
  color: var(--fg-orange-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-shell .material-card h3 {
  margin-bottom: 10px;
  font-size: 29px;
  line-height: 1.04;
}

.public-shell .material-card p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
}

.public-shell .material-card .material-field-note {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--fg-line);
  color: var(--fg-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.material-field-note strong {
  display: block;
  margin-bottom: 3px;
  color: var(--fg-orange-deep);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.public-shell .demo-price {
  color: var(--fg-text-muted);
  font-size: 12px;
}

.public-shell .demo-price strong {
  color: var(--fg-heading);
  font-family: var(--fg-display);
  font-size: 28px;
  line-height: 1.1;
}

/* ---------- 10. search, filters, finder ---------- */
.public-shell .search-field input {
  border: 1px solid var(--fg-field-border);
  color: var(--fg-ink);
  background: var(--fg-field);
}

.public-shell :is(.search-field input, .input, .select, .textarea)::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

.public-shell .segmented-control {
  border: 1px solid var(--fg-field-border);
  background: var(--fg-ivory);
}

.public-shell .segmented-control button {
  color: var(--fg-text-soft);
}

.public-shell .segmented-control button:hover {
  color: var(--fg-heading);
  background: var(--fg-pale);
}

.public-shell .segmented-control button[aria-pressed="true"] {
  color: var(--fg-ivory);
  background: var(--fg-forest);
}

.public-shell .choice-card {
  border: 1px solid var(--fg-field-border);
  color: var(--fg-text-soft);
  background: var(--fg-ivory);
}

.public-shell .choice-card strong {
  color: var(--fg-heading);
}

.public-shell .choice-card:hover,
.public-shell .choice-card[aria-pressed="true"],
.public-shell .choice-card.selected {
  border-color: var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .choice-card[aria-pressed="true"],
.public-shell .choice-card.selected {
  box-shadow: inset 0 0 0 1px var(--fg-forest);
}

.public-shell .finder-title {
  margin: 0 0 12px;
  font-size: 46px;
  line-height: 1;
  text-transform: uppercase;
}

.public-shell .recommendation-title {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.04;
}

.public-shell .recommendation-note {
  margin: 14px 0 0;
}

.public-shell .recommendation .button,
.public-shell .recommendation-alt .button-secondary {
  margin-top: 18px;
}

.public-shell .recommendation-alt {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--fg-line);
}

.public-shell .recommendation-alt h4 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.1;
}

.public-shell .recommendation-alt p {
  margin: 0;
  color: var(--fg-text-soft);
  font-size: 14px;
  line-height: 1.55;
}

.public-shell .empty-state {
  border-color: var(--fg-field-border);
  color: var(--fg-text-muted);
  background: transparent;
}

/* ---------- 11. Good intel, Mission Planning, coverage ---------- */
.public-shell .good-intel-band {
  padding: 36px 0;
  color: var(--fg-text);
  background: var(--fg-forest-deep);
}

.public-shell .good-intel-grid {
  display: grid;
  grid-template-columns: auto minmax(220px, 0.6fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.good-intel-burst {
  width: 58px;
  height: 58px;
}

.public-shell .good-intel-band .catalog-chapter {
  margin-bottom: 10px;
}

.public-shell .good-intel-band h2 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1;
  text-transform: uppercase;
}

.public-shell .good-intel-band p {
  margin: 0;
  color: var(--fg-text-soft);
  line-height: 1.6;
}

.public-shell .good-intel-band .button {
  white-space: nowrap;
}

.public-shell .mission-planning-home {
  padding: 88px 0;
  color: var(--fg-text);
  background: var(--fg-forest);
}

.public-shell .mission-planning-home .section-heading p {
  color: var(--fg-text-soft);
}

.public-shell .mission-planning-home .tool-strip {
  gap: 0;
  border-top: 1px solid var(--fg-rule);
  border-bottom: 1px solid var(--fg-rule);
}

.public-shell .mission-planning-home .tool-card {
  min-height: 0;
  padding: 30px 26px;
  border: 0;
  border-left: 1px solid var(--fg-rule);
  border-radius: 0;
  color: var(--fg-text);
  background: transparent;
}

.public-shell .mission-planning-home .tool-card:first-child {
  padding-left: 0;
  border-left: 0;
}

.mission-number {
  display: block;
  margin-bottom: 14px;
  color: var(--fg-lime);
  font-family: var(--fg-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

.public-shell .mission-planning-home .tool-card .label-caps {
  display: block;
  margin-bottom: 8px;
  color: var(--fg-label);
}

.public-shell .mission-planning-home .tool-card h3 {
  font-size: 30px;
}

.public-shell .mission-planning-home .tool-card p {
  margin: 0;
  color: var(--fg-text-soft);
  font-size: 15px;
}

.public-shell .coverage-field-guide {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(300px, 1.3fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: var(--fg-radius);
  color: var(--fg-text);
  background: var(--fg-ivory);
}

.public-shell .coverage-field-guide .catalog-chapter {
  margin-bottom: 8px;
}

.public-shell .coverage-field-guide h3 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}

.public-shell .coverage-field-guide p {
  margin: 0;
  color: var(--fg-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.coverage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.coverage-stat {
  padding: 0 22px;
  border-left: 1px solid var(--fg-line);
}

.coverage-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.coverage-stat dt {
  margin-bottom: 4px;
  color: var(--fg-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coverage-stat dd {
  margin: 0;
}

.coverage-stat strong {
  color: var(--fg-heading);
  font-family: var(--fg-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

.coverage-stat small {
  color: var(--fg-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 12. reviews and clearing bands ---------- */
.review-placeholder {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 30px 34px;
}

.review-placeholder .fg-icon {
  width: 52px;
  height: 52px;
  color: var(--fg-orange-deep);
}

.review-placeholder .eyebrow {
  margin-bottom: 8px;
}

.public-shell .review-placeholder h2 {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1;
}

.public-shell .review-placeholder p {
  margin: 0;
  max-width: 820px;
}

.public-shell .clearing-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 38px 40px;
  border-color: var(--fg-pale-edge);
  background: var(--fg-pale);
}

.public-shell .clearing-band h2 {
  margin: 0 0 12px;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 0.98;
  text-transform: uppercase;
}

.public-shell .clearing-band p {
  margin: 0;
  max-width: 760px;
}

/* ---------- 13. forms ---------- */
.public-shell .field label,
.public-shell .field .field-label {
  color: var(--fg-text);
  font-size: 13px;
}

.public-shell :is(.input, .select, .textarea) {
  border: 1px solid var(--fg-field-border);
  border-radius: 10px;
  color: var(--fg-ink);
  background: var(--fg-field);
}

.public-shell :is(.input, .select, .textarea):focus {
  border-color: var(--fg-forest);
}

.public-shell .helper-text {
  color: var(--fg-text-muted);
  font-size: 13px;
}

.public-shell :is(.error-banner, .notice-banner, .success-banner) {
  border-radius: 12px;
}

.public-shell .error-banner {
  border: 1px solid var(--fg-error-edge);
  color: var(--fg-error-text);
  background: var(--fg-error-bg);
}

.public-shell .notice-banner {
  border: 1px solid var(--fg-notice-edge);
  color: var(--fg-notice-text);
  background: var(--fg-notice-bg);
}

.public-shell .success-banner {
  border: 1px solid var(--fg-success-edge);
  color: var(--fg-success-text);
  background: var(--fg-success-bg);
}

/* ---------- 14. product page ---------- */
.public-shell .product-detail-layout {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: 48px;
}

.public-shell .product-photo {
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  background: var(--fg-ivory);
}

.public-shell .product-photo .material-swatch {
  height: 380px;
  border-bottom: 1px solid var(--fg-line);
}

/* The photo credit is a licence attribution, so it sits in plain sight under the picture. */
.public-shell .product-photo-caption {
  position: static;
  display: block;
  padding: 12px 16px;
  border-radius: 0;
  color: var(--fg-text-soft);
  background: var(--fg-ivory);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-shell .product-photo-caption:hover {
  color: var(--fg-forest);
}

.public-shell .product-title {
  margin: 0 0 14px;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.96;
  text-transform: uppercase;
}

.public-shell .product-lede {
  margin: 0;
  color: var(--fg-text-soft);
  font-size: 19px;
  line-height: 1.55;
}

.public-shell .product-chips {
  margin: 20px 0;
}

.public-shell .product-price {
  margin-bottom: 22px;
}

.public-shell .product-price strong {
  font-size: 44px;
}

.public-shell .uses-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-shell .uses-list li {
  padding: 6px 12px;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  color: var(--fg-text-soft);
  background: var(--fg-ivory);
  font-size: 13px;
  font-weight: 700;
}

.public-shell .product-actions {
  margin-top: 26px;
}

.public-shell .product-note {
  margin: 14px 0 0;
  color: var(--fg-text-muted);
  font-size: 13px;
}

.public-shell .calc-embed {
  border: 1px solid var(--fg-line);
  background: var(--fg-ivory);
}

.public-shell .calc-embed-result {
  border: 1px solid var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .calc-embed-result strong {
  color: var(--fg-heading);
  font-family: var(--fg-display);
  font-size: 48px;
  line-height: 1;
}

.public-shell .field-note-section {
  padding-top: 18px;
  padding-bottom: 18px;
}

.public-shell .field-note-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border-radius: var(--fg-radius);
  color: var(--fg-on-dark);
  background: var(--fg-forest);
}

.public-shell .field-note-panel .catalog-chapter {
  margin-bottom: 6px;
  color: var(--fg-lime);
}

.public-shell .field-note-panel strong {
  color: var(--fg-ivory);
  font-family: var(--fg-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.public-shell .field-note-panel p {
  margin: 0;
  color: var(--fg-on-dark-soft);
  font-size: 17px;
  line-height: 1.55;
}

.public-shell .info-grid .label-caps {
  display: block;
  margin-bottom: 10px;
}

.public-shell .spec-note {
  color: var(--fg-text-muted);
  font-size: 12px;
}

.public-shell .fulfillment-cards h3 {
  font-size: 30px;
}

/* ---------- 15. guide pages ---------- */
.guide-stack {
  display: grid;
  gap: 28px;
}

.public-shell .guide-title {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 0.98;
  text-transform: uppercase;
}

.public-shell .guide-answer p {
  margin: 0;
  color: var(--fg-text);
  font-size: 20px;
  line-height: 1.55;
}

.public-shell .guide-product h2 {
  margin: 0 0 8px;
  font-size: 42px;
  line-height: 1;
}

.public-shell .detail-row {
  border-bottom-color: var(--fg-line);
}

.public-shell .detail-row span {
  color: var(--fg-text-muted);
}

.public-shell .detail-row strong {
  color: var(--fg-text);
}

/* ---------- 16. calculator and quote wizard ---------- */
.public-shell .quote-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--fg-field-border);
  border-radius: 12px;
  background: var(--fg-ivory);
}

.public-shell .quote-progress-step {
  min-height: 0;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--fg-line);
  border-radius: 0;
  color: var(--fg-text-muted);
  background: transparent;
}

.public-shell .quote-progress-step:last-child {
  border-right: 0;
}

.public-shell .quote-progress-step strong {
  color: var(--fg-orange-deep);
}

.public-shell .quote-progress-step.active {
  color: var(--fg-ivory);
  background: var(--fg-forest);
}

.public-shell .quote-progress-step.active strong {
  color: var(--fg-lime);
}

.public-shell .quote-progress-step.complete {
  color: var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .quote-stage h2 {
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
}

.public-shell .quote-stage > p {
  color: var(--fg-text-soft);
}

.public-shell .quote-stage > p a {
  color: var(--fg-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-shell .quote-material-option {
  border: 1px solid var(--fg-field-border);
  color: var(--fg-text-muted);
  background: var(--fg-ivory);
}

.public-shell .quote-material-option strong {
  color: var(--fg-heading);
}

.public-shell .quote-material-option:hover,
.public-shell .quote-material-option.selected {
  border-color: var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .quote-material-option.selected {
  box-shadow: inset 0 0 0 1px var(--fg-forest);
}

.public-shell .live-quantity {
  border: 1px solid var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .live-quantity strong {
  color: var(--fg-heading);
  font-family: var(--fg-display);
  font-size: 68px;
  font-weight: 700;
  line-height: 1;
}

.public-shell .live-quantity span {
  color: var(--fg-text-soft);
  font-size: 14px;
}

.public-shell .quote-item-list h3 {
  color: var(--fg-heading);
  font-size: 24px;
  text-transform: none;
}

.public-shell .quote-item-row {
  border-color: var(--fg-line);
  background: var(--fg-ivory);
}

.public-shell .quote-item-row strong {
  color: var(--fg-heading);
}

.public-shell .quote-item-row-actions strong {
  color: var(--fg-forest);
}

.public-shell .quote-footer {
  border-top-color: var(--fg-line);
}

.public-shell .quote-summary-head {
  border-bottom-color: var(--fg-line);
  background: var(--fg-sand);
}

.public-shell .quote-summary-head h3 {
  font-size: 30px;
}

.public-shell .summary-row {
  border-bottom-color: var(--fg-line);
  color: var(--fg-text-soft);
}

.public-shell .summary-row strong {
  color: var(--fg-text);
}

.public-shell .summary-row.total {
  color: var(--fg-text);
}

.public-shell .summary-row.total strong {
  color: var(--fg-forest);
  font-family: var(--fg-display);
  font-size: 32px;
  font-weight: 700;
}

.public-shell .success-screen-inner {
  border: 1px solid var(--fg-forest);
  border-radius: 22px;
  background: var(--fg-ivory);
  box-shadow: var(--fg-shadow);
}

.public-shell .success-code {
  width: auto;
  height: auto;
  min-width: 88px;
  padding: 14px 20px;
  border: 2px solid var(--fg-forest);
  border-radius: 999px;
  color: var(--fg-forest);
  font-family: var(--fg-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.public-shell .success-screen h1 {
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 0.98;
  text-transform: uppercase;
}

.public-shell .success-screen p {
  color: var(--fg-text-soft);
}

/* ---------- 17. delivery, payload and contractors ---------- */
.public-shell .delivery-result {
  border: 1px solid var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .delivery-result strong {
  color: var(--fg-forest);
  font-family: var(--fg-display);
  font-size: 30px;
}

.public-shell .payload-result {
  background: var(--fg-sand);
}

.public-shell .payload-result strong {
  color: var(--fg-heading);
}

.public-shell .payload-result.safe {
  border-color: var(--fg-success-edge);
}

.public-shell .payload-result.caution {
  border-color: var(--fg-notice-edge);
}

.public-shell .payload-result.unsafe {
  border-color: var(--fg-error-edge);
}

.public-shell .depot-status-card {
  border-color: var(--fg-line);
  background: var(--fg-ivory);
}

.public-shell .depot-status-card strong {
  color: var(--fg-heading);
  font-family: var(--fg-display);
  font-size: 28px;
  line-height: 1.05;
}

.public-shell .reorder-option {
  border: 1px solid var(--fg-field-border);
  color: var(--fg-text-muted);
  background: var(--fg-ivory);
}

.public-shell .reorder-option strong {
  color: var(--fg-heading);
}

.public-shell .reorder-option:hover,
.public-shell .reorder-option.selected {
  border-color: var(--fg-forest);
  background: var(--fg-pale);
}

.public-shell .dashboard-title h1,
.public-shell .dashboard-title h2 {
  text-transform: none;
}

/* ---------- 18. footer ---------- */
.public-shell .catalog-footer {
  padding: 0;
  border-top: 0;
  color: var(--fg-text);
  background: var(--fg-forest-deep);
}

.public-shell .footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--fg-rule);
}

.public-shell .footer-cta .catalog-chapter {
  margin-bottom: 8px;
}

.public-shell .footer-cta h2 {
  margin: 0 0 14px;
  color: var(--fg-lime);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.96;
  text-transform: uppercase;
}

.public-shell .footer-cta p {
  max-width: 720px;
  margin: 0;
  color: var(--fg-text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.public-shell .footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.public-shell .footer-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  padding-top: 34px;
  padding-bottom: 34px;
}

.public-shell .footer-brand .brand-copy strong {
  color: var(--fg-ivory);
}

.public-shell .footer-brand .brand-copy small {
  color: var(--fg-text-muted);
}

.public-shell .footer-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  margin: 18px 0 0;
  color: var(--fg-text-soft);
  font-size: 14px;
}

.public-shell .footer-tagline .fg-burst {
  width: 20px;
  height: 20px;
}

.public-shell .footer-links {
  justify-content: flex-end;
  gap: 8px 26px;
  color: var(--fg-text);
  font-size: 14px;
  font-weight: 700;
}

.public-shell .footer-links a {
  padding: 8px 0;
}

.public-shell .footer-links a:hover {
  color: var(--fg-lime);
}

.public-shell .footer-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  padding-bottom: 36px;
  border-top: 1px solid var(--fg-rule);
  color: var(--fg-text-muted);
  font-size: 12px;
}

/* ---------- 19. responsive ---------- */
@media (min-width: 1121px) and (max-width: 1279px) {
  .public-shell .brand-copy small {
    display: none;
  }
}

/* Tablet: logo, name, the main action and Menu fit on one line; the subtitle and the secondary
   action move into the menu and the footer. */
@media (max-width: 960px) {
  .public-shell .brand-copy small,
  .public-shell .header-actions .button-secondary {
    display: none;
  }
}

@media (max-width: 1120px) {
  .public-shell .site-header.mobile-open .primary-nav {
    top: calc(100% + 8px);
    right: 20px;
    left: 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-items: stretch;
    justify-content: stretch;
    max-height: calc(100vh - 110px);
    padding: 10px;
    overflow-y: auto;
    border: 1px solid var(--fg-line);
    background: var(--fg-ivory);
  }

  .public-shell .site-header.mobile-open .nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border-bottom: 0;
    border-radius: 10px;
  }

  .public-shell .site-header.mobile-open .nav-link:hover,
  .public-shell .site-header.mobile-open .nav-link[aria-current="page"] {
    color: var(--fg-ivory);
    background: var(--fg-forest);
  }

  /* Launch my quote is the filled button; Track my project (the last link) is the outline one. */
  .public-shell .site-header.mobile-open .nav-link-action {
    justify-content: center;
    margin-top: 6px;
    border: 1px solid transparent;
    color: var(--fg-ivory);
    background: var(--fg-btn);
  }

  .public-shell .site-header.mobile-open .nav-link-action:last-child {
    border-color: var(--fg-forest);
    color: var(--fg-forest);
    background: transparent;
  }

  .public-shell .site-header.mobile-open .nav-link-action:hover {
    color: var(--fg-ivory);
    background: var(--fg-btn-hover);
  }

  .public-shell .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  }

  .public-shell .tool-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-shell .mission-planning-home .tool-card:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .public-shell .mission-planning-home .tool-card:nth-child(n + 3) {
    border-top: 1px solid var(--fg-rule);
  }

  .public-shell .coverage-field-guide {
    grid-template-columns: 1fr 1fr;
  }

  .public-shell .coverage-field-guide .button-secondary {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .public-shell .hero {
    padding: 36px 0 44px;
  }

  .public-shell .hero-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* The sign is the brand: on a phone it leads, then the headline. */
  .public-shell .hero-visual {
    order: -1;
    padding: 0;
  }

  .public-shell .hero-visual img {
    width: min(64vw, 300px);
  }

  .public-shell .hero h1 {
    margin-top: 14px;
    font-size: clamp(46px, 11.5vw, 84px);
  }

  .public-shell .oilfield-stage {
    grid-template-columns: 1fr;
  }

  .public-shell .oilfield-stage-copy {
    padding: 26px 24px 28px;
  }

  .public-shell .section {
    padding: 64px 0;
  }

  .public-shell .section-heading {
    gap: 14px;
  }

  .public-shell .page-hero {
    padding: 44px 0 40px;
  }

  .public-shell .page-hero-grid {
    gap: 26px;
  }

  .public-shell .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .public-shell .product-photo .material-swatch {
    height: 300px;
  }

  .public-shell .good-intel-grid {
    grid-template-columns: auto 1fr;
    gap: 18px 20px;
  }

  .public-shell .good-intel-grid p,
  .public-shell .good-intel-grid .button {
    grid-column: 1 / -1;
  }

  .public-shell .good-intel-grid .button {
    justify-self: start;
  }

  .public-shell .field-note-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .public-shell .footer-cta {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .public-shell .footer-cta-actions {
    justify-content: flex-start;
  }

  .public-shell .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .public-shell .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 660px) {
  .public-shell .header-inner {
    min-height: 68px;
  }

  .public-shell .brand-mark {
    width: 52px;
    height: 52px;
  }

  .public-shell .brand-copy strong {
    font-size: 20px;
  }

  .public-shell .hero {
    padding-top: 28px;
  }

  .public-shell .hero-actions .button,
  .public-shell .hero-actions .button-secondary {
    flex: 1 1 100%;
  }

  .public-shell .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 30px;
  }

  .public-shell .hero-tagline {
    font-size: 19px;
  }

  .public-shell .oilfield-stage-copy h2 {
    font-size: 36px;
  }

  .public-shell .hero-stat-strip {
    margin-top: 22px;
  }

  .public-shell .hero-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 14px;
  }

  .public-shell .hero-stat strong {
    font-size: 36px;
  }

  .public-shell .hero-stat span {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .public-shell .section {
    padding: 54px 0;
  }

  .public-shell .section.compact {
    padding: 40px 0;
  }

  .public-shell .section-heading h2 {
    font-size: 38px;
  }

  .public-shell .page-hero h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .page-hero-burst {
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
  }

  .public-shell .material-swatch {
    height: 190px;
  }

  .public-shell .tool-strip,
  .public-shell .card-grid.four {
    grid-template-columns: 1fr;
  }

  .public-shell .mission-planning-home .tool-card,
  .public-shell .mission-planning-home .tool-card:nth-child(odd) {
    padding: 24px 0;
    border-left: 0;
  }

  .public-shell .mission-planning-home .tool-card + .tool-card {
    border-top: 1px solid var(--fg-rule);
  }

  .public-shell .coverage-field-guide {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px;
  }

  .coverage-stat {
    padding: 0 12px;
  }

  .coverage-stat strong {
    font-size: 42px;
  }

  .coverage-stat dt {
    font-size: 10px;
  }

  .review-placeholder {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px;
  }

  .public-shell .clearing-band {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 22px;
  }

  .public-shell .finder-title {
    font-size: 38px;
  }

  .public-shell .quote-progress-step {
    padding: 10px 8px;
    font-size: 11px;
  }

  .public-shell .quote-stage h2 {
    font-size: 34px;
  }

  .public-shell .live-quantity strong {
    font-size: 56px;
  }

  .public-shell .success-screen-inner {
    padding: 32px 22px;
  }

  .public-shell .footer-end {
    flex-direction: column;
  }
}