/* =====================================================================
   Deziel's Tax Service — Static rebuild stylesheet
   Built per design-reference.md (Slice 2). All values from
   Technical Stack Reference v2.4.0 + Fluid Design System reproduction.
   ===================================================================== */

/* ---- Tokens ---- */
:root {
  /* Palette */
  --navy: #003857;
  --teal-active: #2E8980;
  --teal-muted: #A1C0BD;
  --white-on-navy: #F7FBFF;
  --white-on-teal: #F7FFFE;
  --slate: #3D5A73;
  --stone: #6B7D7D;
  --warm-white: #F5F3F0;

  /* Type — Fluid clamp() reproductions of Heebo presets */
  --type-s:    clamp(0.75rem, 0.6875rem + 0.3125vw, 0.875rem);
  --type-base: clamp(1rem, 0.875rem + 0.625vw, 1.125rem);
  --type-h-xs: clamp(1.125rem, 0.96875rem + 0.78125vw, 1.375rem);
  --type-h-s:  clamp(1.25rem, 1.0625rem + 0.9375vw, 1.5625rem);
  --type-h-m:  clamp(2rem, 1rem + 5vw, 3rem);
  --type-h-l:  clamp(3rem, 1rem + 10vw, 5rem);

  /* Spacing */
  --space-xs: clamp(0.5rem, 0.4375rem + 0.3125vw, 0.75rem);
  --space-s:  clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
  --space-m:  clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  --space-l:  clamp(3rem, 2rem + 5vw, 5rem);
  --space-xl: clamp(5rem, 3rem + 10vw, 7.5rem);

  --container-max: 1240px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --border-thin: 1px solid rgba(0, 56, 87, 0.12);

  /* Heebo via @font-face fallback */
  --font-stack: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Reset + base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--type-base);
  line-height: 1.55;
  color: var(--navy);
  background: #fff;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-active); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--teal-active); outline-offset: 2px; }
button { font: inherit; }

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--navy); color: var(--white-on-navy);
  padding: var(--space-s); z-index: 999;
}
.skip-link:focus { top: 0; }

/* ---- Heebo @font-face (self-hosted; falls back gracefully if files absent) ---- */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Heebo Thin"), local("Heebo-Thin");
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Heebo");
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Heebo Bold"), local("Heebo-Bold");
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Heebo Black"), local("Heebo-Black");
}

/* ---- Type hierarchy ---- */
h1, h2, h3, h4 { margin: 0 0 var(--space-s); line-height: 1.15; font-weight: 700; }
h1 { font-size: var(--type-h-l); font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: var(--type-h-m); }
h3 { font-size: var(--type-h-s); }
h4 { font-size: var(--type-h-xs); }
p  { margin: 0 0 var(--space-s); }
small, .text-s { font-size: var(--type-s); }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

/* ---- Header ---- */
.site-header {
  background: var(--navy);
  color: var(--white-on-navy);
  padding-block: var(--space-s);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--teal-active);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--white-on-navy);
}
.site-header__brand svg { width: clamp(120px, 18vw, 200px); height: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.site-nav a {
  color: var(--white-on-navy);
  font-size: var(--type-h-xs);
  font-weight: 400;
}
.site-nav a:hover, .site-nav a:focus { color: var(--teal-muted); }
.site-nav .cta {
  background: var(--teal-active);
  color: var(--white-on-teal);
  padding: 0.6em 1.1em;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.site-nav .cta:hover, .site-nav .cta:focus {
  background: var(--white-on-teal);
  color: var(--navy);
  text-decoration: none;
}
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-nav.is-mobile { display: flex; flex-direction: column; }
}

/* ---- Top banner (date-driven) ---- */
.top-banner {
  background: var(--teal-active);
  color: var(--white-on-teal);
  text-align: center;
  padding: var(--space-s) var(--space-m);
  font-weight: 700;
}
.top-banner--urgent { background: #B0392E; }
.top-banner a {
  color: var(--white-on-teal);
  text-decoration: underline;
}

/* ---- Hero ---- */
.hero {
  background:
    radial-gradient(ellipse at top right, rgba(46, 137, 128, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #002233 100%);
  color: var(--white-on-navy);
  padding-block: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-active), var(--teal-muted));
  opacity: 0.6;
}
.hero h1 {
  color: var(--white-on-navy);
  margin-bottom: var(--space-xs);
}
.hero__strap {
  color: var(--teal-muted);
  font-size: var(--type-h-s);
  font-weight: 400;
  margin: 0 0 var(--space-m);
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.btn {
  display: inline-block;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.btn--primary {
  background: var(--teal-active);
  color: var(--white-on-teal);
}
.btn--primary:hover, .btn--primary:focus {
  background: var(--white-on-teal);
  color: var(--navy);
  text-decoration: none;
}
.btn--ghost {
  border: 2px solid var(--teal-muted);
  color: var(--white-on-navy);
}
.btn--ghost:hover, .btn--ghost:focus {
  background: var(--teal-muted);
  color: var(--navy);
  text-decoration: none;
}

/* ---- Deadline countdown card ---- */
.deadline-card {
  background: var(--white-on-navy);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: center;
  margin-block: var(--space-l) 0;
  border: var(--border-thin);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 2;
}
.deadline-card__days {
  font-size: var(--type-h-l);
  font-weight: 900;
  color: var(--teal-active);
  line-height: 1;
  letter-spacing: -0.02em;
}
.deadline-card__label {
  font-size: var(--type-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  margin-bottom: 0.25em;
}
.deadline-card__event { font-size: var(--type-h-s); font-weight: 700; color: var(--navy); margin: 0; }
.deadline-card__date  { font-size: var(--type-base); color: var(--stone); margin: 0.25em 0 0; }
@media (max-width: 640px) {
  .deadline-card { grid-template-columns: 1fr; text-align: center; }
}

/* ---- Section wrapper ---- */
.section { padding-block: var(--space-l); }
.section--alt { background: var(--warm-white); }
.section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  flex-wrap: wrap;
}
.section__heading h2 { margin: 0; }
.section__heading .eyebrow {
  font-size: var(--type-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  margin: 0;
}

/* ---- Early-bird callout ---- */
.early-bird {
  background: var(--teal-active);
  color: var(--white-on-teal);
  padding: var(--space-m);
  border-radius: var(--radius-card);
  font-size: var(--type-h-s);
  font-weight: 700;
  text-align: center;
}
.early-bird small { display: block; font-size: var(--type-s); font-weight: 400; margin-top: var(--space-xs); }

/* ---- Fee tiers grid ---- */
.fee-tiers {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fee-tier {
  background: #fff;
  border: var(--border-thin);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}
.fee-tier h3 { color: var(--navy); }
.fee-tier ul { list-style: none; padding: 0; margin: 0; }
.fee-tier li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-bottom: 1px dashed rgba(0,56,87,0.10);
  font-size: var(--type-s);
}
.fee-tier li:last-child { border-bottom: none; }
.fee-tier li .label { flex: 1; }
.fee-tier li .price { font-weight: 700; color: var(--teal-active); white-space: nowrap; }

/* ---- BENTO GRID — CSS Grid named areas (no span counts) ---- */

/* Common to both bento sections */
.bento {
  display: grid;
  gap: var(--space-s);
}
.bento__cell {
  border-radius: var(--radius-card);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 180px;
  position: relative;
  isolation: isolate;
}
.bento__cell h3 { margin: 0; font-size: var(--type-h-s); }
.bento__cell p  { margin: 0; font-size: var(--type-base); }
.bento__cell .continue {
  font-weight: 700;
  align-self: flex-start;
  margin-top: auto;
}

/* Cell color rotation per design-reference §4 */
.bento__cell--slate      { background: var(--slate);       color: var(--white-on-navy); }
.bento__cell--stone      { background: var(--stone);       color: var(--white-on-navy); }
.bento__cell--warm       { background: var(--warm-white);  color: var(--navy); }
.bento__cell--teal       { background: var(--teal-active); color: var(--white-on-teal); }
.bento__cell--navy       { background: var(--navy);        color: var(--white-on-navy); }

.bento__cell--slate .continue,
.bento__cell--stone .continue,
.bento__cell--teal  .continue,
.bento__cell--navy  .continue { color: var(--teal-muted); }
.bento__cell--warm  .continue { color: var(--teal-active); }

/* Bento — CURRENT — 10 cells. 4-col desktop with two wide cards. */
.bento--current {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "a a b c"
    "d e f g"
    "h i j j";
}
.bento--current .bento__cell:nth-child(1)  { grid-area: a; }
.bento--current .bento__cell:nth-child(2)  { grid-area: b; }
.bento--current .bento__cell:nth-child(3)  { grid-area: c; }
.bento--current .bento__cell:nth-child(4)  { grid-area: d; }
.bento--current .bento__cell:nth-child(5)  { grid-area: e; }
.bento--current .bento__cell:nth-child(6)  { grid-area: f; }
.bento--current .bento__cell:nth-child(7)  { grid-area: g; }
.bento--current .bento__cell:nth-child(8)  { grid-area: h; }
.bento--current .bento__cell:nth-child(9)  { grid-area: i; }
.bento--current .bento__cell:nth-child(10) { grid-area: j; }

/* Bento — FUTURE — 3 cells. 4-col desktop with one wide card. */
.bento--future {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "fa fa fb fc";
}
.bento--future .bento__cell:nth-child(1) { grid-area: fa; }
.bento--future .bento__cell:nth-child(2) { grid-area: fb; }
.bento--future .bento__cell:nth-child(3) { grid-area: fc; }

/* Tablet — 2 columns */
@media (max-width: 1024px) {
  .bento--current {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f g"
      "h i"
      "j j";
  }
  .bento--future {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "fa fa"
      "fb fc";
  }
}

/* Mobile — 1 column */
@media (max-width: 640px) {
  .bento--current {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
  }
  .bento--future {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fa" "fb" "fc";
  }
  .bento__cell { min-height: auto; }
}

/* ---- FAQ ---- */
.faq details {
  border-bottom: var(--border-thin);
  padding: var(--space-s) 0;
}
.faq summary {
  font-size: var(--type-h-xs);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  color: var(--navy);
}
.faq summary::after {
  content: "+";
  font-size: var(--type-h-m);
  color: var(--teal-active);
  line-height: 1;
  transition: transform 0.15s;
}
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details > p { margin-top: var(--space-s); }

/* ---- Reviews / social proof ---- */
.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--warm-white);
  border-radius: var(--radius-card);
}
.reviews__stars { color: #E0A100; font-size: var(--type-h-m); letter-spacing: 0.05em; }
.reviews__rating { font-size: var(--type-h-s); font-weight: 700; color: var(--navy); }
.reviews__count  { font-size: var(--type-s); color: var(--stone); }

/* ---- About strip ---- */
.about-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 768px) {
  .about-strip { grid-template-columns: 2fr 3fr; }
}
.about-strip img { border-radius: var(--radius-card); }

/* ---- Refunds row ---- */
.refunds {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-m);
}
.refunds__card {
  background: #fff;
  border: var(--border-thin);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  text-align: center;
}
.refunds__card h3 { font-size: var(--type-h-xs); margin-bottom: var(--space-xs); }
.refunds__card a { display: inline-block; margin-top: var(--space-xs); }

/* ---- Resources teasers ---- */
.resources {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.resources__card {
  background: #fff;
  border: var(--border-thin);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}
.resources__card h3 { color: var(--navy); }

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: var(--white-on-navy);
  padding-block: var(--space-l);
  margin-top: var(--space-xl);
}
.site-footer .container {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer .container { grid-template-columns: 2fr 1fr 1fr; }
}
.site-footer h4 { color: var(--teal-muted); font-size: var(--type-h-xs); margin-bottom: var(--space-xs); }
.site-footer a { color: var(--white-on-navy); }
.site-footer a:hover, .site-footer a:focus { color: var(--teal-muted); }
.site-footer__address { font-style: normal; line-height: 1.7; }
.site-footer__legal {
  border-top: 1px solid rgba(247,251,255,0.15);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  font-size: var(--type-s);
  color: var(--teal-muted);
}

/* ---- Utility ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}