/* ── ROI Calculator styles (Webflow Code Component, Shadow DOM) ─────────────
   Everything below the reset matches the Next.js site's port of this component
   (src/components/roi-calculator/ROICalculator.css), with its CSS variables
   swapped for their literal values: this stylesheet lives inside a shadow root
   on a Webflow page, where the Next.js site's --border / --radius-panel /
   --font-geist variables don't exist.

   THE RESET IS LOAD-BEARING. On the Next.js site this component sits in the
   normal page and inherits Tailwind's preflight plus a Geist 16px/24px
   #131314 body. Inside Webflow's shadow root it gets neither: without them,
   h1/p pick up browser-default margins, buttons get grey UA backgrounds and
   system fonts, SVGs sit inline, and inherited text comes from Webflow's own
   body. So Tailwind v4.3's preflight is reproduced here (its :host selector is
   Tailwind's own; it is written for shadow roots), followed by the body
   values measured on the Next.js page. */

/* ── Tailwind v4 preflight (verbatim rules, theme() calls resolved) ── */
*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box; margin: 0; padding: 0; border: 0 solid;
  /* the Next.js site's own base layer: `* { border-color: var(--border) }` */
  border-color: #e5e5e7;
}
:host {
  display: block; width: 100%;
  line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  /* the Next.js page's <body>, measured */
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px; color: #131314; letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
hr { height: 0; color: inherit; border-top-width: 1px; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1em; }
small { font-size: 80%; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit; font-feature-settings: inherit; font-variation-settings: inherit;
  letter-spacing: inherit; color: inherit; border-radius: 0;
  background-color: transparent; opacity: 1;
}
::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
textarea { resize: vertical; }
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[hidden]:where(:not([hidden='until-found'])) { display: none !important; }

/* ── The Next.js site's other global UI rules (globals.css) ── */
::selection { background: #ccccff; color: #131314; }
:where(:focus-visible) { outline: 2px solid #5F46FF; outline-offset: 2px; }

/* ── Hero entrance — the Next.js hero's fadeUp (opacity 0→1, y 16→0, 0.6s
   easeOut; subtitle delayed 0.15s via inline animation-delay) ── */
@keyframes roi-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.roi-hero-rise { animation: roi-hero-rise 0.6s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .roi-hero-rise { animation: none; }
}

/* ── Keyframe animations referenced by the component ── */
@keyframes roi-pulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes slideDown {
  from { max-height: 0;     opacity: 0; }
  to   { max-height: 200px; opacity: 1; }
}

@keyframes slideUp {
  from { max-height: 200px; opacity: 1; }
  to   { max-height: 0;     opacity: 0; }
}

/* ── Animation utility classes ── */
.stale-alert {
  max-height: 200px;
  overflow: hidden;
  animation: slideDown 220ms ease-out;
}

.stale-alert.leaving {
  animation: slideUp 180ms ease-in forwards;
}

/* ── Stale panel dimming ── */
.panel-body--stale {
  opacity: 0.45;
  transition: opacity 200ms ease;
}

/* ── Accessibility: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .stale-alert,
  .stale-alert.leaving {
    animation: none;
  }
}

/* ── Form grids ── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.form-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px 24px; }
/* Single field, capped rather than stretched full-width. */
.form-grid-shareholders { display: grid; grid-template-columns: minmax(0, 260px); gap: 16px; }

/* Allow grid items to shrink below their content width (prevents overflow on narrow screens) */
.form-grid-2 > *,
.form-grid-4 > *,
.form-grid-shareholders > * { min-width: 0; }

/* ── Form cards — this site's plain-card recipe (border-border, radius-panel) ── */
.form-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e5e5e7;
  padding: 24px 40px;
  box-shadow: 0 1px 4px rgba(19,19,20,0.04);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.form-card:focus-within {
  border-color: rgba(95, 70, 255, 0.3);
  box-shadow: 0 4px 24px rgba(19,19,20,0.08);
}

/* ── Main layout grid ── */
/* `align-items: stretch` (the grid default) is load-bearing, not cosmetic:
   the right column's `<aside style="position: sticky">` (the Live Estimate
   panel) can only stick within its own immediate parent's box. With
   `align-items: flex-start` that parent grid item shrinks to the aside's own
   content height — exactly as tall as the sticky child — which leaves zero
   room for it to ever actually stick; it just scrolls away with the page like
   a `position: static` box, and drifts under the floating navbar the moment
   its natural position scrolls above the bar. Stretching the grid item to the
   full row height (i.e. to match the much taller form column on the left)
   gives the sticky child real room to hold its position while you scroll
   through the form. Verified in-browser via getBoundingClientRect() — this
   doesn't show up from reading the CSS alone. */
.roi-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: stretch;
}

/* ── Responsive ── */
@media (max-width: 1099px) {
  .roi-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .form-card { padding: 20px 24px; }
  .form-grid-2 { grid-template-columns: 1fr; gap: 20px; }
  .form-grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-grid-shareholders { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-card { padding: 20px 16px; }
  .form-grid-4 { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Remove number input spinners ── */
.roi-calculator-root input[type='number']::-webkit-outer-spin-button,
.roi-calculator-root input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.roi-calculator-root input[type='number'] {
  -moz-appearance: textfield;
}

/* ── Typography ── (Geist is loaded by the Webflow site; document-level
   @font-face rules reach into this shadow root) */
.roi-calculator-root {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: normal;
  color: #3f3f42;
}

.roi-calculator-root h1 {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  vertical-align: middle;
  color: #131314;
}

.roi-calculator-root h2 {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #131314;
}

.roi-calculator-root p {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  vertical-align: middle;
  color: #3f3f42;
}