/* ============================================================
   FieldPix — fieldpix.org
   Palette and type are lifted directly from the app's own design
   tokens (apps/mobile/src/theme/tokens.ts) so the site and the
   product read as one brand: warm ivory ground, charcoal ink,
   deep navy, and a muted "Site Blue" accent used sparingly.
   Fraunces (display serif) + Inter (UI/body), same as the app.
   ============================================================ */

:root {
  /* Base surfaces */
  --ivory: #faf8f4;
  --surface: #ffffff;
  --sunken: #f3f0e9;

  /* Ink */
  --ink: #1b1b18;
  --ink-muted: #6b6559;
  --ink-faint: #9c9384;
  --on-dark: #fdfbf7;
  --on-dark-muted: #c9cbd6;

  /* Brand */
  --navy: #17233b;
  --navy-deep: #0e1626;
  --blue: #2b4570;
  --blue-muted: #3d5a85;
  --blue-soft: #dce4f0;

  /* Lines */
  --hairline: #e7e2d9;
  --hairline-dark: rgba(255, 255, 255, 0.14);

  /* Accent. The palette had no accent -- "blue" (#2b4570) is a second navy,
     which is why the page read flat. This is the colour of the job site
     itself: hi-vis vests, hard hats, caution tape. Used sparingly, on rules,
     markers and live states -- never as body text, where it would fail
     contrast on cream. */
  --amber: #e08a1e;
  --amber-bright: #f5a524;
  --amber-soft: #fbe6c4;
  --amber-wash: rgba(224, 138, 30, 0.12);

  /* Status */
  --success: #4c7a5a;
  --success-soft: #e4eee6;
  --warning: #b8842f;
  --warning-soft: #f5ead5;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shadow-soft: 0 6px 16px rgba(23, 35, 59, 0.06);
  --shadow-raised: 0 12px 28px rgba(23, 35, 59, 0.12);
  --shadow-float: 0 28px 60px rgba(23, 35, 59, 0.18);

  /* Display stays Fraunces -- it carries the app and the PDF reports, and it
     is the opposite of a default. Text moves off Inter to IBM Plex Sans:
     engineered, slightly industrial, and legible at small sizes on a phone in
     sunlight. Mono is not decoration -- this product burns coordinates and
     timestamps into photographs, so metadata on this page is set the way the
     product sets it. */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  /* Mono, matching the hero chip and the metadata line -- the page now has
     one voice for labels and data, and a different one for prose. The amber
     lands as a mark rather than as the text colour: #e08a1e on cream is about
     2.6:1, which is fine for a 2px rule and nowhere near enough for 11px
     type. */
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--amber);
  flex: none;
}
.section-head.center .eyebrow {
  justify-content: center;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: #22385c;
  box-shadow: var(--shadow-raised);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: #d6cfc2;
}
.btn-on-dark {
  background: var(--on-dark);
  color: var(--navy);
}
.btn-on-dark:hover {
  background: #fff;
}
.btn-ghost-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--hairline-dark);
}
.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solid, not a frosted blur: a backdrop blur re-renders everything under
     the bar on every scrolled frame, which made scrolling stutter on Macs. */
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand:hover {
  text-decoration: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-muted);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--amber) 0 0);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.18s ease, color 0.18s ease;
}
.nav-links a:hover {
  color: var(--ink);
  text-decoration: none;
  background-size: 100% 2px;
}
.nav-links a.btn {
  color: #fff;
  background-image: none;
}
.nav-links a.btn.btn-sm {
  padding: 10px 18px;
}
.nav-links a.btn:hover {
  background-size: 0 0;
}

/* ---------- hero ---------- */
.hero {
  /* Asymmetric on purpose: more air above the headline than below the note,
     so the block sits high and the eye lands on the first line rather than
     floating in the middle of the viewport. */
  padding: 76px 0 72px;
  position: relative;
}

.hero-grid {
  display: grid;
  /* The phone column is fixed and the text column takes the rest. Previously
     both the grid gap and the phone were sized so the right column carried
     dead space; this gives the type the room instead. */
  grid-template-columns: minmax(0, 1.2fr) 360px;
  gap: 64px;
  align-items: center;
  position: relative;
}

/* Structural marker, not ornament: a short amber rule that starts the page
   and is repeated at the head of each numbered section further down. */
.hero-mark {
  width: 52px;
  height: 3px;
  background: var(--amber);
  border-radius: 2px;
  margin-bottom: 26px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 30px;
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-bright);
  /* A live status light, the way the app shows an active upload. */
  box-shadow: 0 0 0 3px var(--amber-wash);
}

.hero h1 {
  /* Was capped at 3.9rem, which renders 62px on a desktop -- a section
     heading, not a hero. Fraunces has an optical-size axis and is built to be
     set large; at this size the leading has to come in under 1 and the
     tracking has to go negative or the lines drift apart. */
  font-size: clamp(2.75rem, 5.9vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
  margin-bottom: 28px;
}
.hero h1 em {
  /* A real italic now -- the font link never loaded an italic axis, so this
     was a faux slant the browser sheared itself. */
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  /* The accent lands here, as a rule under the word rather than as coloured
     text: amber on cream fails contrast as type, and works as a mark. */
  background-image: linear-gradient(var(--amber) 0 0);
  background-size: calc(100% - 0.22em) 5px;
  background-position: 0 92%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-muted);
  /* ~58 characters. The old 30em ran to roughly 75, which is long for a
     paragraph someone skims standing up. */
  max-width: 34rem;
  margin-bottom: 36px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* The secondary action was a second outlined pill competing with the primary
   one for the same attention. A link with a mark reads as secondary without
   having to shout about it. */
.hero-cta .btn-ghost {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.hero-cta .btn-ghost::after {
  content: " \2192";
  color: var(--amber);
}
.hero-cta .btn-ghost:hover {
  border-bottom-color: var(--amber);
  background: none;
}

.hero-note {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.hero-note b {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 920px) {
  .hero { padding: 64px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); }
}

/* ---------- phone mockup ---------- */
.phone {
  width: 300px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(150deg,#5a5c60 0%,#232427 10%,#6b6c70 22%,#18191b 42%,#48494d 58%,#1e1f21 76%,#5f6064 90%,#232427 100%);
  border-radius: 54px;
  padding: 5px;
  box-shadow: var(--shadow-float);
}
.phone::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 49px;
  background: #000;
  z-index: 0;
}
.phone-side-btn {
  position: absolute;
  z-index: 2;
  background: linear-gradient(90deg, #141516, #4a4b4e 45%, #141516);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone-side-btn.action { left: -3px; top: 96px; width: 3px; height: 24px; border-radius: 2px 0 0 2px; }
.phone-side-btn.vol-up { left: -3px; top: 138px; width: 3px; height: 34px; border-radius: 2px 0 0 2px; }
.phone-side-btn.vol-down { left: -3px; top: 180px; width: 3px; height: 34px; border-radius: 2px 0 0 2px; }
.phone-side-btn.power { right: -3px; top: 160px; width: 3px; height: 58px; border-radius: 0 2px 2px 0; }
.phone-screen {
  background: var(--ivory);
  border-radius: 46px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  background: #000;
  border-radius: var(--r-pill);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9px;
}
.phone-notch::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a5f8f, #0d1524 70%);
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}

.app-header {
  padding: 8px 18px 13px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.app-header .app-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.app-header .app-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 3px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 12px 12px 76px;
  background: var(--ivory);
}
.photo-tile {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sunken);
}
.photo-tile svg {
  width: 100%;
  height: 100%;
}
.photo-stamp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 5px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
  font-size: 5.5px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.photo-stamp b {
  display: block;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.tile-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-pill);
}
.app-fab {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-raised);
  border: 3px solid var(--ivory);
  z-index: 2;
}

/* ---------- pain strip ---------- */
.strip {
  background: var(--navy);
  color: var(--on-dark);
  padding: 64px 0 60px;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.strip-item {
  padding: 4px 36px;
  border-left: 1px solid var(--hairline-dark);
}
.strip-item:first-child {
  padding-left: 0;
  border-left: none;
}
.strip-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber-bright);
  margin-bottom: 14px;
}
.strip-item h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--on-dark);
  margin-bottom: 10px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.strip-item h3 em {
  font-style: italic;
  font-weight: 600;
}
.strip-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* ---------- section frame ---------- */
.section {
  padding: 96px 0;
}
.section--sunken {
  background: var(--sunken);
}
.section--surface {
  background: var(--surface);
}
.section-head {
  max-width: 660px;
  margin-bottom: 64px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  /* Was capped at 2.7rem (43px) on every section, so the hero was the only
     thing with any weight and the five sections below it all spoke at exactly
     the same volume. 52px gives a genuine second level, and Fraunces wants
     the leading and tracking pulled in as it grows. */
  font-size: clamp(2.15rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 18px 0 18px;
}
.section-head p:not(.eyebrow) {
  font-size: 18px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ---------- alternating feature rows ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
}
.feature-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.feature-row.flip .feature-copy {
  order: 2;
}
.feature-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.feature-copy h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  margin-bottom: 14px;
}
.feature-copy > p {
  font-size: 17px;
  color: var(--ink-muted);
  margin-bottom: 22px;
  line-height: 1.6;
}
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.5;
}
.check-list .tick {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* ---------- mock panels used as feature art ---------- */
.mock {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--ivory);
}
.mock-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ded7ca;
}
.mock-bar span {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.mock-body {
  padding: 18px;
  display: grid;
  gap: 10px;
  background: var(--ivory);
}

/* project card mock */
.proj-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 15px;
  box-shadow: var(--shadow-soft);
}
.proj-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.proj-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.proj-addr {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.proj-client {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.proj-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-faint);
}
.assigned-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--blue-soft);
  color: var(--blue-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-top: 9px;
}
.star {
  color: var(--blue);
}

/* tag chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
}
.chip.on {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* checklist mock rows */
.ck-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 14.5px;
}
.ck-box {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 1.5px solid #d6cfc2;
  display: grid;
  place-items: center;
}
.ck-row.done .ck-box {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.ck-row.done span {
  color: var(--ink-faint);
  text-decoration: line-through;
}

/* sync queue mock */
.sync-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.sync-thumb {
  flex: none;
  width: 40px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sunken);
}
.sync-meta {
  flex: 1;
  min-width: 0;
}
.sync-meta strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}
.sync-meta small {
  font-size: 11.5px;
  color: var(--ink-faint);
}
.sync-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.sync-tag.queued {
  background: var(--warning-soft);
  color: var(--warning);
}
.sync-tag.synced {
  background: var(--success-soft);
  color: var(--success);
}
.offline-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 500;
}

/* report page mock */
.report-page {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.report-brand {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--navy);
}
.report-brand .rb-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.report-brand .rb-sub {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.report-brand .rb-meta {
  font-size: 10px;
  color: var(--ink-faint);
  text-align: right;
  line-height: 1.45;
  white-space: nowrap;
}
.report-h {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-muted);
  margin: 15px 0 8px;
}
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.report-grid .rg-tile {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sunken);
  position: relative;
}
.report-grid .rg-tile svg {
  width: 100%;
  height: 100%;
}
.report-lines {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}
.report-lines i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--sunken);
}

/* ---------- pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 840px;
  margin: 0 auto;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}
.price-card.featured {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-dark);
  box-shadow: var(--shadow-float);
  position: relative;
}
.price-card.featured h3,
.price-card.featured .amount {
  color: var(--on-dark);
}
.price-tag {
  /* The only "pick this one" signal on the pricing section, and it was set in
     the same muted grey as disabled text. Amber is legible here because it
     sits on navy, not on cream -- the contrast problem that keeps it off body
     copy elsewhere does not apply on a dark card. */
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--amber-bright);
  padding: 6px 11px;
  border-radius: var(--r-pill);
}
.price-card h3 {
  font-size: 22px;
  margin-bottom: 6px;
}
.price-card .plan-for {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.price-card.featured .plan-for {
  color: var(--on-dark-muted);
}
.amount {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.amount small {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.price-card.featured .amount small {
  color: var(--on-dark-muted);
}
.price-card .feats {
  list-style: none;
  padding: 0;
  margin: 24px 0 28px;
  display: grid;
  gap: 11px;
  font-size: 15px;
}
.price-card .feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}
.price-card .feats .tick {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.price-card.featured .feats {
  color: var(--on-dark);
}
.price-card.featured .feats .tick {
  background: rgba(255, 255, 255, 0.15);
  color: #a9bde0;
}
.price-card .btn {
  margin-top: auto;
  width: 100%;
}
.price-foot {
  text-align: center;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--ink-muted);
}

/* ---------- comparison ---------- */
.compare {
  max-width: 800px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 15px 26px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}
.compare-row.head {
  border-top: 0;
  background: var(--ivory);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.compare-row .lbl {
  font-weight: 500;
}
.compare-row .val {
  text-align: center;
  color: var(--ink-muted);
  font-size: 14.5px;
}
.compare-row .val.ours {
  color: var(--ink);
  font-weight: 600;
}
.compare-row.head .val.ours {
  color: var(--blue);
}
.compare-note {
  max-width: 800px;
  margin: 18px auto 0;
  font-size: 13.5px;
  color: var(--ink-faint);
  line-height: 1.6;
  text-align: center;
}

/* ---------- faq ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq details[open] summary {
  color: var(--ink);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-family: var(--serif);
  font-size: 18.5px;
  font-weight: 600;
  position: relative;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--amber);
  line-height: 1;
  transition: transform 0.18s ease;
}
.faq summary:hover::after {
  transform: translateY(-50%) scale(1.15);
}
.faq details[open] summary::after {
  content: "\2013";
  color: var(--blue);
}
.faq .answer {
  padding: 0 40px 22px 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.65;
}
.faq .answer p + p {
  margin-top: 12px;
}

/* ---------- cta band ---------- */
.cta-band {
  background: var(--navy-deep);
  color: var(--on-dark);
  padding: 92px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(61, 90, 133, 0.38),
    transparent 62%
  );
  pointer-events: none;
}
.cta-band .inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band .eyebrow {
  color: #93a6c8;
}
.cta-band h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--on-dark);
  line-height: 1.12;
  margin: 14px 0 18px;
}
.cta-band p:not(.eyebrow) {
  font-size: 18px;
  color: var(--on-dark-muted);
  margin-bottom: 32px;
}
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- footer ---------- */
.footer {
  background: var(--navy);
  color: var(--on-dark-muted);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hairline-dark);
}
.footer .brand {
  color: var(--on-dark);
  margin-bottom: 14px;
}
.footer-about {
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 30em;
}
.footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93a6c8;
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.footer ul a {
  color: var(--on-dark-muted);
  font-size: 14.5px;
}
.footer ul a:hover {
  color: var(--on-dark);
  text-decoration: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 13.5px;
  color: #7f8ba4;
}

/* ============================================================
   Document pages (terms / privacy / delete-account)
   ============================================================ */
.doc-header {
  background: var(--navy);
  color: var(--on-dark);
  padding: 34px 0 56px;
}
.doc-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark-muted);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 28px;
}
.doc-header .back-link:hover {
  color: var(--on-dark);
  text-decoration: none;
}
.doc-header .eyebrow {
  color: #93a6c8;
}
.doc-header h1 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  color: var(--on-dark);
  margin: 12px 0 14px;
  line-height: 1.12;
}
.doc-meta {
  font-size: 14px;
  color: var(--on-dark-muted);
}

.doc-body {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 52px 56px;
  max-width: 800px;
  margin: -28px auto 80px;
  box-shadow: var(--shadow-soft);
  position: relative;
  font-size: 16.5px;
  line-height: 1.72;
  color: #2f2d28;
}
.doc-body h2 {
  font-size: 22px;
  margin: 40px 0 12px;
  line-height: 1.3;
}
.doc-body h2:first-of-type {
  margin-top: 8px;
}
.doc-body h3 {
  font-size: 18px;
  margin: 26px 0 8px;
}
.doc-body p {
  margin: 0 0 14px;
}
.doc-body ul,
.doc-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
.doc-body li {
  margin-bottom: 9px;
}
.doc-body strong {
  color: var(--ink);
  font-weight: 600;
}
.doc-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-notice {
  background: var(--warning-soft);
  border: 1px solid #e6d3ac;
  border-left: 4px solid var(--warning);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.62;
  color: #5c4718;
  margin-bottom: 32px;
}
.doc-notice strong {
  color: #4a3812;
}
.doc-foot,
.draft-foot-marker {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink-faint);
  line-height: 1.6;
}
.draft-foot-marker + .doc-foot {
  display: none;
}
.doc-body em {
  color: var(--ink-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero {
    padding: 56px 0 72px;
  }
  .hero-sub {
    max-width: none;
  }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feature-row.flip .feature-copy {
    order: 0;
  }
  .strip-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .strip-item {
    padding: 0;
    border-left: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .nav-links a:not(.btn) {
    display: none;
  }
  .doc-body {
    padding: 36px 28px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .section {
    padding: 64px 0;
  }
  .price-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .compare-row {
    padding: 13px 14px;
    font-size: 13.5px;
    gap: 8px;
  }
  .compare-row .val {
    font-size: 13px;
  }
  .cta-band {
    padding: 68px 0;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .doc-body {
    padding: 28px 20px;
    border-radius: var(--r-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Footer on the legal pages: the other policies + who runs FieldPix. */
.legal-foot { border-top: 1px solid var(--hairline); margin-top: 56px; padding: 28px 0 40px; font-size: 14px; color: var(--ink-muted); }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.legal-foot a { color: var(--blue); }
.legal-foot p { margin: 0; }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 48px 20px; }
.notfound h1 { font-family: var(--serif); font-size: clamp(34px, 6vw, 52px); line-height: 1.05; margin: 10px 0 12px; letter-spacing: -0.02em; }
.notfound p { color: var(--ink-muted); max-width: 440px; margin: 0 auto 24px; }
.notfound .eyebrow { justify-content: center; margin-bottom: 4px; }
.notfound .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Keyboard users: a way past the nav, and a visible focus ring everywhere. */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--navy); color: var(--on-dark); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }


/* Scrolling performance: keep the detailed phone mockup's painting to its
   own box. Menu links land with their heading just below the sticky bar. */
.phone { contain: layout paint; }
section[id] { scroll-margin-top: 84px; }