/* Public sales pages (landing, thanks, access expired, terms).
   Matches www.sherwoodestimates.com: pine/forest greens, gold buttons,
   Archivo headings, Public Sans body, cream page, large rounded cards,
   and the realistic forest photo behind the hero and the guarantee card.
   Loaded only by the marketing layout, not the signed-in tool shell. */

:root {
  --pine: #12281c;
  --forest: #1e3f2d;
  --canopy: #2b5a3f;
  --moss: #6f9449;
  --fern: #e3ecdb;
  --cream: #F4F7F1;
  --gold: #f6c521;
  --gold-hi: #ffd84d;
  --gold-edge: #b8900a;
  --ink: #18231d;
  --muted: #4f5f55;
  --line: #d5dfcf;
  --card: #ffffff;
  --mist-text: #dbe7d6;
  --max: 1200px;
  --head: "Archivo", "Arial Black", Arial, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.mkt {
  margin: 0;
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

.mkt-main { flex: 1 0 auto; }

a { color: var(--canopy); }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--head);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--gold); color: #000; padding: 8px 12px; border-radius: 8px; z-index: 100;
}
.skip:focus { left: 12px; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.mkt-header-inner,
.mkt-main,
.mkt-footer-inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.mkt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pine);
  text-decoration: none;
  white-space: nowrap;
}
.brand img { height: 34px; width: auto; display: block; }
.brand-name {
  font-family: var(--head);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-name span {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.mkt-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-weight: 600;
  font-size: 16px;
}
.mkt-nav .nav-link { color: var(--muted); text-decoration: none; }
.mkt-nav .nav-link:hover { color: var(--forest); }
/* v23: link back to the main site; a thin divider sets it apart from the Toolbox links.
   Hidden with the other section links at <=760px (the footer has it on phones). */
.mkt-nav .nav-mainsite { white-space: nowrap; padding-right: 26px; border-right: 1px solid var(--line, rgba(0, 0, 0, 0.14)); }
.foot-mainsite { white-space: nowrap; }
/* The full desktop nav only fits on one line from ~1010px; below 1041px the main-site link
   lives in the footer only (the brand sub-line still reads "by Sherwood Estimates"). */
@media (max-width: 1040px) { .mkt-nav .nav-mainsite { display: none; } }
/* Pre-v23 fix: Sign in / Get access wrapped at 761-780px; tighten the nav gap there. */
@media (min-width: 761px) and (max-width: 820px) { .mkt-nav { gap: 18px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.btn-sm { padding: 11px 18px; font-size: 15px; }
.btn-gold { background: var(--gold); color: #000; box-shadow: 0 3px 0 var(--gold-edge); }
.btn-gold:hover { background: var(--gold-hi); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn-line { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-line:hover { background: var(--fern); }
.btn-forest, .btn-primary { background: var(--forest); color: #fff; }
.btn-forest:hover, .btn-primary:hover { background: var(--pine); }

.hero-actions, .download-row, .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero-actions.centered { justify-content: center; }

.fine { margin: 14px 0 0; color: var(--muted); font-size: 0.9rem; }

/* ---------- photo cards (hero + guarantee) ---------- */
.photo-card {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--forest);
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  border-radius: 28px;
}

.hero { padding: 28px 0 12px; }

.hero-panel {
  background-image:
    linear-gradient(90deg, rgba(18, 40, 28, 0.85) 0%, rgba(22, 50, 34, 0.76) 50%, rgba(30, 63, 45, 0.58) 100%),
    url("../img/hero-forest-1920.jpg");
  background-image:
    linear-gradient(90deg, rgba(18, 40, 28, 0.85) 0%, rgba(22, 50, 34, 0.76) 50%, rgba(30, 63, 45, 0.58) 100%),
    image-set(url("../img/hero-forest-1920.webp") type("image/webp"), url("../img/hero-forest-1920.jpg") type("image/jpeg"));
  padding: 64px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: center;
}
.hero-panel-slim { grid-template-columns: minmax(0, 1fr); padding: 52px 56px; }

.hero-copy { min-width: 0; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 900;
  color: #fff;
  text-wrap: balance;
  max-width: 14em;
}
.hero-panel-slim h1 { font-size: clamp(34px, 4.2vw, 50px); }

.hero .lead {
  margin: 20px 0 0;
  max-width: 36em;
  font-size: 20px;
  color: var(--mist-text);
}
.hero .hero-actions { margin-top: 32px; }
.hero .fine, .hero .fine a { color: var(--mist-text); }

.hero-card {
  background: rgba(10, 22, 15, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.55);
}
.hero-card-price {
  margin: 0 0 14px;
  font-family: var(--head);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
}
.hero-card .checks li.hero-card-key { color: #fff; }
.hero-card .checks li.hero-card-key strong { color: var(--gold-hi); font-weight: 800; }
.hero-card-price span { font-family: var(--body); font-size: 18px; font-weight: 500; color: var(--mist-text); }
/* v26.4: one line per tool, with its features in a muted second line */
.hero-card .checks li.hero-card-tool strong { color: #fff; font-weight: 700; }
.hero-card .checks li.hero-card-tool span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--mist-text); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li {
  position: relative;
  padding-left: 30px;
  font-size: 16.5px;
  line-height: 1.45;
}
.checks li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold);
}
.checks li::after {
  content: "";
  position: absolute; left: 7px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--pine); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- sections ---------- */
.section { padding: 44px 0; }
.section > h2, .section h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 900;
  color: var(--pine);
}
.section-lead { margin: 0 0 24px; color: var(--muted); max-width: 44rem; font-size: 18px; }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
/* What you get: three equal-height cards side by side on desktop, stacked below 1000px
   (two columns would leave the third card alone on its own row). */
.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1000px) {
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tool-grid .card { display: flex; flex-direction: column; }
.tool-grid .card ul { margin-bottom: 14px; }
.tool-grid .card .card-link { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 26px;
}
.card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: var(--pine); }
.card p { margin: 0 0 10px; }
.card ul { margin: 0; padding-left: 1.15rem; }
.card li { margin: 5px 0; }
.card li::marker { color: var(--moss); }
.card .privacy-note { margin: 14px 0 0; padding: 10px 12px; border-left: 4px solid var(--moss); border-radius: 8px; background: var(--fern); color: var(--pine); font-size: 15px; line-height: 1.45; }

.sample-kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fern);
  color: var(--forest);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare {
  margin: 0 0 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
}
.compare h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--pine); }

.shot {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.shot figcaption {
  padding: 9px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--fern);
}
.shot img { display: block; width: 100%; background: #fff; }
.shot-note {
  display: none;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--forest);
  background: var(--cream);
}

.highlight-note {
  max-width: 820px;
  margin: 0 0 22px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold, #c9a227);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
}

.callouts { margin: 14px 0 0; padding-left: 1.15rem; color: var(--ink); font-size: 16px; }
.callouts li { margin: 5px 0; }
.callouts li::marker { color: var(--moss); }

.code-shot { max-width: 640px; }
/* code page beside its notes and the sample downloads */
.code-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.code-text .callouts { margin-top: 0; }
.code-text .download-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }

.download-row { margin-top: 8px; }

/* ---------- pricing ---------- */
.price-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: start;
}
.price-card {
  background: var(--card);
  border: 2px solid var(--forest);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 22px 46px -30px rgba(18, 40, 28, 0.45);
}
.price-amount {
  margin: 0;
  font-family: var(--head);
  font-size: 56px;
  line-height: 1;
  color: var(--pine);
  font-weight: 900;
}
.price-amount span { font-family: var(--body); font-size: 18px; font-weight: 500; color: var(--muted); }
.price-note { margin: 10px 0 14px; font-weight: 700; color: var(--forest); }

/* winter offer (shown only through pricing.OFFER_ENDS) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.offer-badge { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--gold); color: var(--pine); font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; }
.price-was { font-size: 0.5em; font-weight: 700; opacity: 0.7; margin-right: 4px; text-decoration-thickness: 2px; }
.offer-line { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--forest); }
.hero-card .offer-line { margin: -6px 0 14px; color: var(--gold-hi); }
.hero-card .price-was { display: block; font-size: 22px; line-height: 1.2; margin: 0 0 2px; }
.hero-card-price > span { white-space: nowrap; }
.price-card .price-was, .price-amount .price-was { display: block; font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.price-amount > span { white-space: nowrap; }

.field { margin: 0 0 12px; }
.field label { display: block; font-size: 0.88rem; margin-bottom: 4px; color: var(--muted); }
.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}

#paypal-button-container { min-height: 45px; max-width: 320px; }
.checkout-error { color: #8a2e24; font-size: 0.92rem; min-height: 1.2em; }

.sandbox-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fbf3e2;
  border: 1px solid #e4d3a4;
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--ink);
}

/* ---------- guarantee / bottom CTA ---------- */
.guarantee {
  margin: 20px 0 8px;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(16, 44, 28, 0.84) 0%, rgba(18, 46, 30, 0.78) 55%, rgba(24, 60, 38, 0.66) 100%),
    url("../img/hero-forest-1920.jpg");
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(16, 44, 28, 0.84) 0%, rgba(18, 46, 30, 0.78) 55%, rgba(24, 60, 38, 0.66) 100%),
    image-set(url("../img/hero-forest-1920.webp") type("image/webp"), url("../img/hero-forest-1920.jpg") type("image/jpeg"));
  padding: 64px 48px;
  text-align: center;
}
.guarantee h2 {
  margin: 0 auto;
  max-width: 15em;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 900;
  color: #fff;
}
.guarantee p:not(.eyebrow) {
  margin: 18px auto 0;
  max-width: 34em;
  color: var(--mist-text);
  font-size: 20px;
  line-height: 1.5;
}
.guarantee .hero-actions { margin-top: 30px; }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 10px 0;
}
.faq summary { cursor: pointer; font-weight: 700; color: var(--pine); }
.faq details p { margin: 10px 0 4px; color: var(--muted); }

/* ---------- thanks / token ---------- */
.panel-card { max-width: 760px; padding: 28px; }
.token-label { display: block; font-weight: 700; color: var(--pine); margin-bottom: 8px; }
.token-box {
  display: block;
  width: 100%;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  word-break: break-all;
}
.panel-card .button-row { margin: 16px 0 0; }
.expires { margin: 12px 0 0; }

/* ---------- terms ---------- */
.terms h1 { font-size: clamp(32px, 4vw, 44px); color: var(--pine); font-weight: 900; margin: 0 0 12px; }
.terms h2 { font-size: 1.3rem; margin: 26px 0 6px; }
.terms p, .terms li { color: var(--ink); }
.terms ul { padding-left: 1.2rem; }

/* ---------- footer ---------- */
.mkt-footer {
  margin-top: 40px;
  background: var(--pine);
  color: #c9d6c5;
  padding: 34px 0;
  font-size: 0.92rem;
}
.mkt-footer a { color: #fff; }
.mkt-footer-inner { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.foot-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-weight: 900; font-size: 18px; text-decoration: none;
}
.foot-brand img { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
/* v28.1: filled cream emblem, already light on the dark footer - no invert */
.foot-brand img.foot-emblem { width: 24px; height: 24px; filter: none; opacity: 1; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
/* v28.1: X and Instagram links, thin outline icons in the footer text colour */
.foot-social { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mkt-footer a.foot-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: #c9d6c5; border: 1px solid rgba(201, 214, 197, 0.28);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.mkt-footer a.foot-social-link:hover,
.mkt-footer a.foot-social-link:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }
.mkt-footer a.foot-social-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.foot-social-link svg { display: block; }
.mkt-footer p { margin: 6px 0 0; width: 100%; color: #a9bba6; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-panel { grid-template-columns: 1fr; gap: 32px; }
  .hero-card { max-width: 440px; }
}

@media (max-width: 760px) {
  body.mkt { font-size: 17px; }
  .mkt-header-inner, .mkt-main, .mkt-footer-inner { width: min(var(--max), calc(100% - 24px)); }
  .mkt-header-inner { min-height: 64px; gap: 10px; }
  .brand img { height: 28px; }
  .brand-name { font-size: 19px; }
  .brand-name span { display: none; }
  .mkt-nav { gap: 14px; font-size: 15px; }
  .mkt-nav .nav-link:not(.nav-signin) { display: none; }
  .btn-sm { padding: 9px 14px; font-size: 14px; }
  .mkt-nav .nav-link, .mkt-nav .btn, .brand-name { white-space: nowrap; }
  .token-box { font-size: 0.82rem; }

  .photo-card { border-radius: 22px; }
  .hero { padding-top: 14px; }
  .hero-panel, .hero-panel-slim {
    padding: 40px 24px;
    background-image:
      linear-gradient(180deg, rgba(18, 40, 28, 0.85) 0%, rgba(22, 50, 34, 0.76) 60%, rgba(30, 63, 45, 0.62) 100%),
      url("../img/hero-forest-960.webp");
  }
  .hero .lead { font-size: 18px; }
  .hero .hero-actions .btn, .guarantee .hero-actions .btn { width: 100%; }
  .hero-card-price { font-size: 44px; }

  .section { padding: 32px 0; }
  .tool-grid, .compare-grid, .price-layout { grid-template-columns: 1fr; }
  .compare { padding: 16px; border-radius: 18px; }
  .shot-note { display: block; }
  .download-row .btn { width: 100%; }

  .guarantee {
    padding: 44px 22px;
    background-image:
      radial-gradient(ellipse at 50% 45%, rgba(16, 44, 28, 0.84) 0%, rgba(18, 46, 30, 0.78) 55%, rgba(24, 60, 38, 0.66) 100%),
      url("../img/hero-forest-960.webp");
  }
  .guarantee p:not(.eyebrow) { font-size: 18px; }
  .mkt-footer-inner { flex-direction: column; align-items: flex-start; }
  .foot-social { margin-left: 0; }
}

@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand img { height: 24px; }
  .brand-name { font-size: 17px; }
  .mkt-nav { gap: 10px; font-size: 14px; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 359px) {
  /* 320px phones (iPhone SE 1st gen): brand + Sign in + Get access was 349px wide */
  .brand img { display: none; }
  .brand-name { font-size: 15px; }
  .mkt-nav { gap: 8px; font-size: 13px; }
  .btn-sm { padding: 7px 10px; font-size: 12px; }
  .price-card { padding: 22px 18px; }
  .price-amount { font-size: 48px; }
}
.price-layout > * { min-width: 0; }
.price-card, .price-layout .card { overflow-wrap: anywhere; }
.guarantee strong, .site-foot a { overflow-wrap: anywhere; }

/* ---------- IWS / Roof Waste samples ----------
   Column widths follow the images' aspect ratios so the columns come out the same height:
   IWS results 1260x911, eave diagram 692x642, PDF report 692x896.
   Any leftover (caption wrap, rounding) is taken up inside the last image's frame
   (object-fit: contain on white) rather than as empty space below a column. */
.sample-grid { display: grid; gap: 18px; align-items: stretch; }
.sample-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sample-grid .shot { display: flex; flex-direction: column; min-width: 0; }
.sample-stack .shot { flex: none; }
.sample-stack .shot:last-child { flex: 1 1 auto; }
.sample-grid picture { display: block; flex: 1 1 auto; min-height: 0; background: #fff; }
.sample-grid .shot img { height: 100%; object-fit: contain; object-position: center top; }
.sample-grid .shot-diagram img { object-position: center; }

/* Roof Waste: results | report, both images the same height */
.rw-layout { grid-template-columns: minmax(0, 1.3831fr) minmax(0, 0.7723fr); }

/* IWS, wide: [results over diagram] | report. Left height = 1.6508 wL + 2 captions + gap,
   right = 1.2948 wR + 1 caption, solved for wL. */
.iws-layout { grid-template-columns: minmax(0, calc(43.96% - 27px)) minmax(0, 1fr); }
/* IWS, tablet: results full width, then diagram | report at matched heights */
@media (max-width: 1099px) {
  .iws-layout {
    grid-template-columns: minmax(0, 1.0779fr) minmax(0, 0.7723fr);
    grid-template-areas: "b b" "d r";
  }
  .iws-layout .sample-stack { display: contents; }
  .iws-layout .shot-breakdown { grid-area: b; }
  .iws-layout .shot-diagram { grid-area: d; }
  .iws-layout .shot-report { grid-area: r; }
}
@media (max-width: 760px) {
  .iws-layout, .rw-layout { grid-template-columns: 1fr; grid-template-areas: none; }
  .iws-layout .sample-stack { display: flex; }
  .iws-layout .shot-breakdown, .iws-layout .shot-diagram, .iws-layout .shot-report { grid-area: auto; }
  .code-grid { grid-template-columns: 1fr; gap: 16px; }
  .code-grid .code-shot { max-width: 420px; }
  .code-text .download-row .btn { width: 100%; }
}

/* thanks page: one-click open + saved token; /login card */
.open-form { margin: 0 0 4px; }
.open-form .fine { margin-top: 10px; }
.btn-lg { padding: 15px 28px; font-size: 1.05rem; }
.soft-rule { border: 0; border-top: 1px solid rgba(18, 40, 28, 0.12); margin: 24px 0 20px; }
.token-hint { margin: 0 0 10px; }
.login-card { max-width: 560px; }
.login-card .token-box { width: 100%; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; }
.notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--fern); color: var(--pine); }
.notice-error { background: #fbe9e4; color: #8a2a12; }
.login-card .login-help { margin-top: 18px; line-height: 1.55; } .login-help a { color: inherit; text-decoration: underline; }

.adjusters-say {
  max-width: 820px;
  margin: 26px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--forest, #1f4d3a);
  background: rgba(31, 77, 58, 0.06);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- archer figure (hooded archer, bow drawn, arrow aimed right) ----------
   static/img/archer.svg is one solid path used as a mask, so it takes currentColor.
   The arrow sits about 30% down the figure; the offsets below line the arrow tip
   up with the middle of the heading's first letter. */
.archer {
  display: inline-block; flex: none; width: 0.95em; height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../img/archer.svg") center / contain no-repeat;
  mask: url("../img/archer.svg") center / contain no-repeat;
}
/* Archer stands on the heading's baseline (an empty inline-block's baseline is
   its bottom edge), head about level with the cap height, arrow at the letters. */
.with-archer { display: flex; align-items: baseline; gap: 0.2em; }
.with-archer .archer { color: var(--pine); width: 0.87em; height: 0.92em; }
.archer-divider { display: flex; align-items: flex-start; max-width: var(--max); margin: 8px auto 28px; padding: 0 20px; color: var(--pine); }
.archer-divider .archer { width: 52px; height: 55px; }
.archer-divider::after { content: ""; flex: 1; height: 2px; margin: 15px 0 0 8px; background: linear-gradient(90deg, var(--gold-edge), var(--line) 40%); }

/* ---------- value section ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.value-item { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 18px; padding: 22px 24px; }
.value-item h3 { margin: 0 0 8px; font-family: var(--head); font-weight: 800; font-size: 22px; color: var(--pine); }
.value-item p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- small phones: brand + one button; Sign in lives in the hero and the footer ---------- */
.foot-signin { display: none; }
@media (max-width: 400px) {
  .mkt-header-inner { min-height: 58px; }
  .mkt-nav .nav-signin { display: none; }
  .foot-signin { display: inline; }
  .brand img { height: 26px; display: block; }
  .brand-name { font-size: 18px; }
  .btn-sm { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 359px) {
  /* 320px phones: keep brand + Get access on one line without overlap */
  .brand { gap: 6px; }
  .brand img { height: 22px; }
  .brand-name { font-size: 15px; }
  .btn-sm { padding: 8px 11px; font-size: 13px; }
}

/* ---------- v26.5: compact tools overview (4 across, 2x2 on tablets and phones) ---------- */
.toolkit { padding-bottom: 8px; }
.toolkit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.toolkit-card a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 18px 18px 16px; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 18px;
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.toolkit-card a:hover, .toolkit-card a:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 40, 28, 0.12); border-color: var(--moss); border-top-color: var(--gold); }
.toolkit-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--fern); color: var(--forest); margin-bottom: 4px; }
.toolkit-card strong { font-family: var(--head); font-size: 18px; font-weight: 800; color: var(--pine); line-height: 1.2; }
.toolkit-line { color: var(--muted); font-size: 15px; line-height: 1.45; }
.toolkit-more { margin-top: auto; padding-top: 8px; color: var(--forest); font-size: 14px; font-weight: 700; }
@media (max-width: 999px) { .toolkit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .toolkit-grid { gap: 10px; }
  .toolkit-card a { padding: 14px 12px 12px; border-radius: 14px; }
  .toolkit-icon { width: 38px; height: 38px; }
  .toolkit-icon svg { width: 24px; height: 24px; }
  .toolkit-card strong { font-size: 16px; }
  .toolkit-line { font-size: 14px; }
  .toolkit-more { font-size: 13px; }
}

/* What you get: four detailed cards, 2x2 from 760px up (4 across is too narrow for the lists) */
@media (min-width: 761px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Paperwork samples: photo report + invoice + CoC. 3 across on wide desktops,
   2 across mid, stacked on phones so the thumbs stay readable. */
.doc-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) { .doc-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .doc-layout { grid-template-columns: 1fr; } }

/* Keep the Questions? FAB from covering the last toolkit card on desktop. */
@media (min-width: 521px) {
  .toolkit { padding-right: 168px; padding-bottom: 28px; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  /* 4-up toolkit is tight near the FAB; a little extra right pad helps. */
  .toolkit { padding-right: 180px; }
}

/* v27.3: photo link demo video in the "Photo references that click through" block */
.demo-shot { margin: 18px 0 4px; max-width: 900px; margin-left: auto; margin-right: auto; }
.demo-shot video, .demo-shot img { display: block; width: 100%; height: auto; aspect-ratio: 45 / 31; background: #e3ecdb; }

/* v28 brand tool icons: the parchment tile is part of the art, so no fern chip behind it */
.toolkit-icon.toolkit-icon-brand { width: 48px; height: 48px; background: none; border-radius: 9px; }
.toolkit-icon.toolkit-icon-brand svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(18, 40, 28, .18)); }
@media (max-width: 420px) {
  .toolkit-icon.toolkit-icon-brand { width: 40px; height: 40px; }
  .toolkit-icon.toolkit-icon-brand svg { width: 100%; height: 100%; }
}