/*
  Hardness site layer.

  clearwave.css (TemplateMo 622 Clearwave) provides the design system: tokens,
  typography, nav, section labels, buttons, cards, reveal animations, FAQ,
  stats, CTA and footer. This file only adds what the template does not cover:
  the landscape application-screenshot presentation, the Brinell/Vickers
  content components, the demo request form and the hardness calculator page.
  Everything below reuses the template tokens so the two layers stay in step.
*/

/* ── Contrast corrections to the template palette ──
   The template's muted grey (#6B8C88) and its accent at small sizes fall below
   WCAG AA 4.5:1 on the light backgrounds. These keep the same hues but darken
   them enough to pass, so the design language is unchanged. */
:root {
  --text-3: #526F6B;      /* was #6B8C88 - 3.25:1 on --bg */
  --accent-text: #14655B; /* accent darkened for small label text */
}
.section-label,
.feature-number,
.process-step-num,
.eyebrow,
.technical-image-cta,
.text-accent-link,
.calculation-details summary,
.phone-card[data-pos="center"] .screen-caption { color: var(--accent-text); }
.ticker-section .ticker-item { color: var(--text-2); }
.footer .footer-legal a { color: #BDD5D1; }
/* The CTA banner sits on the dark accent fill, so its label needs a light tone. */
.cta-label { color: #D7EDE9; }
.footer-brand-desc,
.footer-copy,
.footer-links a,
.footer-col-label { color: #CFE2DF; }
.footer-copy a { color: #EAF4F2; text-decoration: underline; }

/* The template reset sets `img { max-width: 100% }` but not `height: auto`, so any
   image carrying width/height attributes renders stretched once it is scaled down.
   Every application screenshot has those attributes for layout-shift control. */
img { height: auto; }

/* ── Accessibility helpers ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 16px; top: 10px; z-index: 2000;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 100px; font-weight: 600;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The template's scroll-reveal starts every element at opacity 0 and relies on JS
   to add .visible. Without scripting, or if IntersectionObserver never fires, the
   page renders blank. Content is shown by default and only hidden once the script
   has confirmed it is running. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* The template hides the closed mobile menu with opacity and pointer-events only,
   which leaves its links in the tab order and exposed to screen readers. Toggling
   visibility removes them, with a delayed transition so the fade out is kept. */
.mobile-menu { visibility: hidden; transition: opacity 0.4s var(--silk), visibility 0s linear 0.4s; }
.mobile-menu.open { visibility: visible; transition: opacity 0.4s var(--silk), visibility 0s linear 0s; }

/* ── Nav logo lockup ── */
.nav-logo-mark {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap;
}
.nav-logo-mark img {
  width: 32px; height: auto; border-radius: 7px;
  background: #fff; padding: 2px; box-shadow: var(--shadow-sm);
}
/* Six nav items plus a CTA need tighter spacing than the template's default. */
.nav-inner { gap: 20px; }
.nav-links { gap: 22px; flex-wrap: nowrap; }
.nav-links a { font-size: 0.875rem; white-space: nowrap; }
.nav-cta .btn-primary { white-space: nowrap; }
.nav-logo-mark span { color: var(--accent); }
.footer .nav-logo-mark { color: #fff; }
.footer .nav-logo-mark span { color: var(--accent-light); }

/* ══════════════════════════════════════════
   HERO — real product screenshot
   The template ships a mocked dashboard; this replaces it with the actual
   application window while keeping the same frame, radius and shadow.
   ══════════════════════════════════════════ */
.hero-shot {
  width: 100%;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin: 0;
  transition: transform var(--silk-dur) var(--silk);
}
.hero-shot:hover { transform: scale(1.01); }
.hero-shot .dashboard-bar { padding: 10px 14px; }
.hero-shot img {
  width: 100%; height: auto; display: block;
  object-fit: contain;
  aspect-ratio: 1400 / 744;
}
.hero-visual { width: 100%; }
/* The hero gets a wider shell than the template's 1160px content column so the
   product screenshot reads as the main demonstration rather than an inset image. */
.hero .container { max-width: 1320px; }
.hero-inner { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 56px; }
.hero-title { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.hero-sub { max-width: 540px; }

/* ══════════════════════════════════════════
   APPLICATION SCREENS CAROUSEL
   Reuses the template's 3D carousel, resized from portrait phone frames to
   landscape application screenshots. contain, never cover, so no UI is cropped.
   ══════════════════════════════════════════ */
.phone-shell { border-radius: 14px; padding: 6px; }
.phone-screen {
  aspect-ratio: 1400 / 744;
  border-radius: 9px;
  background: var(--surface-2);
}
.phone-screen img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; width: 100%; margin-top: 40px;
}
.section-sub-wide { max-width: none; text-align: center; margin-top: 40px; }
.text-accent-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-accent-link:hover { color: var(--accent-mid); }
.screen-caption {
  margin-top: 14px; text-align: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-2);
}
.phone-card[data-pos="center"] .screen-caption { color: var(--accent); }
.carousel-stage { height: clamp(340px, 34vw, 520px); }

/* ══════════════════════════════════════════
   TEST METHOD CARDS (Brinell / Vickers)
   ══════════════════════════════════════════ */
.methods-section { padding: 120px 0; background: var(--bg); }
.methods-header { text-align: center; margin-bottom: 56px; }
.methods-header .section-sub { margin: 16px auto 0; text-align: center; }
.methods-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;
  align-items: start;
}
.method-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
  transition: transform var(--silk-dur) var(--silk), box-shadow var(--silk-dur) var(--silk);
}
.method-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.method-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.method-badge {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-ghost); border: 1px solid var(--accent-border);
  color: var(--accent); font-weight: 700; font-size: 0.9375rem;
}
.method-card h3 {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1);
}
.method-card > p { color: var(--text-2); line-height: 1.7; margin-bottom: 20px; }
.method-list { display: grid; gap: 12px; }
.method-list div { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 0.9375rem; }
.method-list .check-icon { flex-shrink: 0; }
.method-figure {
  margin: 0 0 20px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
}
.method-figure img { width: 100%; height: auto; object-fit: contain; aspect-ratio: 1400 / 744; }

/* ══════════════════════════════════════════
   IMAGE PROCESSING FLOW
   ══════════════════════════════════════════ */
.process-section { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-header { text-align: center; margin-bottom: 56px; }
.process-header .section-sub { margin: 16px auto 0; text-align: center; }
.process-flow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
}
.process-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
}
.process-step-num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.process-step h3 { font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.process-step p { font-size: 0.875rem; line-height: 1.65; color: var(--text-2); }

/* ══════════════════════════════════════════
   BENEFITS
   ══════════════════════════════════════════ */
.benefits-section { padding: 120px 0; background: var(--bg); }
.benefits-header { text-align: center; margin-bottom: 56px; }
.benefits-header .section-sub { margin: 16px auto 0; text-align: center; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.benefit-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
}
.benefit-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.benefit-card p { font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); }

/* ══════════════════════════════════════════
   APPLICATION AREAS
   ══════════════════════════════════════════ */
.integration-tile .integration-name { text-align: center; }

/* ══════════════════════════════════════════
   DEMO REQUEST FORM
   ══════════════════════════════════════════ */
.request-section { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); }
.request-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.request-intro .section-sub { max-width: 420px; }
.request-note { margin-top: 20px; font-size: 0.875rem; color: var(--text-3); line-height: 1.7; }
.form-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: 0.875rem; font-weight: 600; color: var(--text-1); }
.field.full { margin-top: 16px; }
input, textarea, select {
  width: 100%; font: inherit; color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  transition: border-color 0.3s var(--silk), background 0.3s var(--silk);
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--surface-2); }
textarea { resize: vertical; }
.field span.field-validation-error, .validation-summary { color: #A3352B; font-size: 0.8125rem; font-weight: 600; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; font-size: 0.9375rem; color: var(--text-2); }
.consent input { width: auto; margin-top: 4px; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert.success {
  border: 1px solid var(--accent-border); background: var(--accent-ghost);
  color: var(--accent); padding: 14px 16px; border-radius: var(--radius);
  margin-bottom: 20px; font-weight: 600;
}
.form-card .btn-primary-lg { width: 100%; justify-content: center; margin-top: 8px; }

/* ══════════════════════════════════════════
   CALCULATOR PAGE
   ══════════════════════════════════════════ */
.calculator-hero { padding: 148px 0 56px; background: var(--bg); }
.calculator-hero h1 {
  font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 16px;
}
.calculator-hero p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.75; max-width: 720px; }
.technical-note {
  margin-top: 20px; padding: 14px 18px;
  border: 1px solid var(--accent-border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-ghost);
  color: var(--text-2); font-size: 0.9375rem;
}
.calculator-page { padding: 0 0 120px; background: var(--bg); }
.calculator-tabs { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.calculator-method-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-bottom: 32px;
}
.calculator-method-tabs a {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 16px 20px;
  font-weight: 600; font-size: 1rem; text-align: center;
  color: var(--text-2); box-shadow: var(--shadow-sm);
  transition: background 0.4s var(--silk), color 0.4s var(--silk), border-color 0.4s var(--silk);
}
.calculator-method-tabs a:hover { border-color: var(--accent-border); color: var(--accent); }
.calculator-method-tabs a[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 24px rgba(26,122,110,0.30);
}

.calculator-workspace {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-rows: auto auto 1fr;
  gap: 24px; align-items: start;
}
.calculator-workspace > .calculator-visual-card { grid-column: 1; grid-row: 1; }
.calculator-workspace > .calculator-disclaimer { grid-column: 1; grid-row: 2; }
.calculator-workspace > .calculator-card { grid-column: 2; grid-row: 1 / span 3; }
.calculator-visual-card, .calculator-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.calculator-visual-card { padding: 24px; }
.calculator-card { padding: 28px; }
.calculator-visual-card h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.calculator-card-header { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 22px; }
.calculator-card-header h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.calculator-card-header p:last-child { color: var(--text-2); margin-top: 8px; font-size: 0.9375rem; line-height: 1.7; }
.calculator-visual-card p { color: var(--text-2); line-height: 1.7; }
.visual-note { color: var(--text-3); font-size: 0.875rem; margin-top: 16px; }
.calculator-disclaimer {
  margin: 0; padding: 16px 18px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-light);
  border-radius: var(--radius); color: var(--text-3); font-size: 0.875rem; line-height: 1.7;
}

.technical-image-button {
  width: 100%; margin: 16px 0; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
  cursor: zoom-in; text-align: left;
  transition: box-shadow 0.4s var(--silk), border-color 0.4s var(--silk);
}
.technical-image-button:hover { box-shadow: var(--shadow-md); border-color: var(--accent-border); }
.technical-image-button img { width: 100%; aspect-ratio: 1672 / 941; object-fit: contain; }
.technical-image-cta {
  display: block; margin: 10px 6px 2px;
  color: var(--accent); font-weight: 600; font-size: 0.8125rem;
}
.formula-box {
  border: 1px solid var(--accent-border); border-left: 3px solid var(--accent);
  background: var(--accent-ghost); border-radius: var(--radius);
  padding: 16px; color: var(--text-1);
  font-size: 1.0625rem; text-align: center; overflow-wrap: break-word;
}
.symbol-list {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px 12px; margin-top: 18px; font-size: 0.9375rem;
}
.symbol-list dt {
  font-weight: 700; font-style: italic; color: var(--accent);
  background: var(--accent-ghost); border: 1px solid var(--accent-border);
  border-radius: 8px; text-align: center; padding: 3px 0; align-self: start;
}
.symbol-list dd { margin: 0; color: var(--text-2); align-self: center; }

.calculator-form { display: grid; gap: 18px; }
.input-group-title { font-weight: 700; color: var(--text-1); font-size: 0.9375rem; }
.calculator-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.field-cell { min-width: 0; }
.field-cell[hidden] { display: none; }
.field-cell-full { grid-column: 1 / -1; }
.field small { color: var(--text-3); font-size: 0.8125rem; }
.field-validation-message { color: #A3352B; min-height: 18px; font-size: 0.8125rem; font-weight: 600; }
.field-validation-message:not(:empty)::before { content: "\26a0\fe0e  "; }
.calculator-form input[aria-invalid="true"], .calculator-form select[aria-invalid="true"] {
  border-color: #C0574C; background: #FDF6F5;
}

.segmented-fieldset { border: 0; padding: 0; margin: 0; }
.segmented-fieldset legend { font-weight: 700; color: var(--text-1); font-size: 0.9375rem; margin-bottom: 10px; }
.segmented-control {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px; padding: 4px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px;
}
.segmented-control label { position: relative; display: block; margin: 0; }
.segmented-control input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented-control span {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 14px; border-radius: 100px;
  font-size: 0.9375rem; font-weight: 600; color: var(--text-2);
  cursor: pointer; text-align: center;
  transition: background 0.35s var(--silk), color 0.35s var(--silk);
}
.segmented-control input:checked + span {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 16px rgba(26,122,110,0.28);
}
.segmented-control input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.method-helper { color: var(--text-3); font-size: 0.875rem; line-height: 1.65; }
.method-helper-alert {
  color: #7A5A12; background: #FDF6E3; border: 1px solid #E4C97A;
  border-left: 3px solid #B8912E; border-radius: var(--radius); padding: 12px 14px;
}

.calculator-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-calc-primary {
  font-size: 0.9375rem; font-weight: 600; color: #fff; background: var(--accent);
  padding: 13px 30px; border-radius: 100px;
  box-shadow: 0 6px 24px rgba(26,122,110,0.30);
  transition: background var(--silk-dur) var(--silk), transform var(--silk-dur) var(--silk);
}
.btn-calc-primary:hover { background: var(--accent-mid); transform: scale(1.02); }
.btn-calc-subtle {
  font-size: 0.9375rem; font-weight: 500; color: var(--text-2);
  border: 1.5px solid var(--border); background: transparent;
  padding: 12px 26px; border-radius: 100px;
  transition: border-color 0.4s var(--silk), color 0.4s var(--silk);
}
.btn-calc-subtle:hover { border-color: var(--accent-border); color: var(--accent); }
.btn-calc-secondary {
  font-size: 0.875rem; font-weight: 600; color: var(--accent);
  border: 1.5px solid var(--accent-border); background: var(--surface-2);
  padding: 11px 22px; border-radius: 100px;
  transition: background 0.4s var(--silk), border-color 0.4s var(--silk);
}
.btn-calc-secondary:hover { background: var(--accent-ghost); border-color: var(--accent); }
.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.preset-label { color: var(--text-3); font-size: 0.8125rem; font-weight: 600; }
.btn-preset {
  border: 1px dashed var(--accent-border); background: transparent; color: var(--accent);
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  border-radius: 100px; padding: 8px 16px; min-height: 34px;
}
.btn-preset:hover { border-style: solid; background: var(--accent-ghost); }

.calculator-result {
  margin-top: 24px; padding: 22px;
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.calculator-result h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text-1); }
.calculator-result.is-success { border-color: rgba(26,122,110,0.28); border-left-color: var(--accent); background: #F1F9F7; }
.calculator-result.is-error { border-color: #E4B5AF; border-left-color: #A3352B; background: #FDF6F5; }
.result-placeholder { color: var(--text-3); margin-top: 8px; font-size: 0.9375rem; }
.result-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0; padding: 6px 14px 6px 8px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.is-success .result-status { background: var(--accent-ghost); color: var(--accent-text); border: 1px solid var(--accent-border); }
.is-error .result-status { background: #FBE9E7; color: #A3352B; border: 1px solid #E4B5AF; }
.result-status-icon {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; color: #fff; font-size: 12px;
}
.is-success .result-status-icon { background: var(--accent); }
.is-error .result-status-icon { background: #A3352B; }
.calculator-result .result-label {
  color: var(--text-3); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.1em; margin-bottom: 6px;
}
.calculator-result .result-value {
  display: block; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05;
  font-weight: 700; letter-spacing: -0.03em; color: var(--accent);
  margin-bottom: 20px; overflow-wrap: anywhere;
}
.calculator-result.is-error .result-value { font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: #A3352B; }
.result-summary, .calculation-details-list {
  display: grid; grid-template-columns: minmax(140px, 0.42fr) 1fr;
  gap: 10px 14px; margin: 0;
}
.calculator-result dt { font-weight: 700; color: var(--text-1); font-size: 0.9375rem; }
.calculator-result dd { margin: 0; color: var(--text-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.result-warnings, .result-errors { margin-top: 16px; border-radius: var(--radius); padding: 12px 14px; font-size: 0.9375rem; }
.result-warnings:empty, .result-errors:empty { display: none; }
.result-warnings h4, .result-errors h4 { font-size: 0.9375rem; margin-bottom: 6px; }
.result-warnings ul, .result-errors ul { margin: 0; padding-left: 20px; list-style: disc; }
.result-warnings { color: #7A5A12; background: #FDF6E3; border: 1px solid #E4C97A; border-left: 3px solid #B8912E; }
.result-errors { color: #A3352B; background: #FBE9E7; border: 1px solid #E4B5AF; border-left: 3px solid #A3352B; }
.result-warnings h4::before { content: "\26a0\fe0e  "; }
.result-errors h4::before { content: "\2716\fe0e  "; }
.calculation-details { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.calculation-details summary {
  color: var(--accent); font-weight: 600; cursor: pointer;
  padding: 8px 6px; border-radius: var(--radius); list-style-position: inside;
}
.calculation-details summary:hover { background: var(--accent-ghost); }
.calculation-details-list { margin-top: 14px; }
.result-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.copy-confirmation { color: var(--accent); font-weight: 600; font-size: 0.875rem; margin-top: 10px; }

/* Technical image preview */
.calculator-image-preview {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(13,30,28,0.92);
  display: grid; place-items: center; padding: 32px;
}
.calculator-image-preview[hidden] { display: none; }
.calculator-image-preview figure { width: min(1200px, 94vw); margin: 0; color: #fff; }
.calculator-image-preview img {
  width: 100%; max-height: 82vh; object-fit: contain;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.calculator-image-preview figcaption { margin-top: 14px; font-weight: 600; font-size: 0.9375rem; }
.lightbox-close {
  position: fixed; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-1); font-size: 20px;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .methods-grid { grid-template-columns: minmax(0, 1fr); }
  .request-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 821px) and (max-width: 1120px) {
  .calculator-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .calculator-card-header h2 { font-size: 1.375rem; }
}
@media (max-width: 820px) {
  .calculator-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .calculator-workspace > .calculator-visual-card,
  .calculator-workspace > .calculator-card,
  .calculator-workspace > .calculator-disclaimer { grid-column: 1; grid-row: auto; }
}
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .calculator-hero { padding: 120px 0 40px; }
  .calculator-page { padding-bottom: 80px; }
  .methods-section, .process-section, .benefits-section, .request-section { padding: 80px 0; }
}
@media (max-width: 767px) {
  .calculator-tabs { padding: 0 20px; }
  .calculator-method-tabs, .calculator-input-grid, .segmented-control,
  .result-summary, .calculation-details-list, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-cell-full { grid-column: auto; }
  .calculator-card, .calculator-visual-card { padding: 20px; }
  .calculator-actions .btn-calc-primary, .calculator-actions .btn-calc-subtle,
  .result-buttons .btn-calc-secondary { width: 100%; justify-content: center; text-align: center; }
  .form-card { padding: 22px; }
  .method-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .mobile-menu, .footer, .calculator-form, .calculator-visual-card,
  .calculator-method-tabs, .skip-link, .calculator-image-preview, .technical-note { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .calculator-page, .calculator-hero { padding: 0; background: #fff; }
  .calculator-workspace { display: block; }
  .calculator-card { border: 0; box-shadow: none; padding: 0; }
  .calculator-result { border: 0; box-shadow: none; padding: 0; background: #fff; }
  .calculator-result .result-value { color: #000; }
  .calculator-result .result-buttons { display: none; }
  .calculation-details { display: block; }
  .calculation-details-list { display: grid; }
  .calculator-disclaimer { border: 0; border-left: 3px solid #666; padding: 0 0 0 10px; margin-top: 18px; }
}