/* ==========================================================================
   Nexify marketing site — visual system v6 ("editorial collage")
   Warm cream paper, editorial serif headlines, handwritten annotations,
   tilted postcards and sticky notes, and four bold section bands
   (clay, pine, lime, ink). The product interface stays the hero: every
   dashboard in here is built in HTML/CSS, never a raster screenshot.
   Shared by /, /how-it-works, /validation, /tracking, /why-nexify, /faq,
   /privacy and /terms.
   ========================================================================== */

:root {
  /* Paper + ink */
  --cream: #FAF7F1;
  --paper: #FFFFFF;
  --ink: #171918;
  --sub: #626863;

  /* Brand greens */
  --green: #16A05D;
  --green-ink: #0B7A45;
  --pine: #0B6B41;
  --pine-deep: #085534;

  /* Band colors (one per section, never mixed inside a band) */
  --clay: #F2B4A4;
  --lime: #B9D23C;
  --note: #D8E96A;

  /* Lines */
  --line: #E8E3D8;
  --hair: #ECEAE3;
  --hair-dark: rgba(23, 25, 24, .16);

  /* Data tints inside product mocks (functional, not decorative) */
  --tint-hi: #DFF3E6;
  --tint-hi-ink: #0B7A45;
  --tint-md: #FBF0CB;
  --tint-md-ink: #8A6A00;
  --tint-lo: #FBDFD8;
  --tint-lo-ink: #A03A2A;

  /* Elevation */
  --sh-card: 0 10px 30px rgba(23, 25, 24, .08);
  --sh-mock: 0 28px 70px rgba(23, 25, 24, .14);
  --sh-note: 0 10px 24px rgba(23, 25, 24, .18);
  --sh-tight: 0 1px 2px rgba(23, 25, 24, .06);

  /* Radius */
  --r-btn: 9px;
  --r-card: 12px;
  --r-mock: 14px;
  --r-chip: 6px;
  --r-note: 3px;

  /* Layout */
  --wrap: 1200px;
  --sec: 104px;
  --sec-sm: 76px;

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--sub);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.08;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Layout primitives ---------- */

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

.sec { padding: var(--sec) 0; }
.sec-sm { padding: var(--sec-sm) 0; }

/* Section bands — exactly one accent color per band */
.band-clay { background: var(--clay); }
.band-pine { background: var(--pine); }
.band-lime { background: var(--lime); }
.band-ink { background: var(--ink); }

.band-clay .sub-t, .band-lime .sub-t { color: rgba(23, 25, 24, .74); }
.band-pine .sub-t { color: rgba(255, 255, 255, .8); }
.band-ink .sub-t { color: rgba(255, 255, 255, .66); }

/* Dark bands invert the type defaults (headings + handwriting go white) */
.band-pine h1, .band-pine h2, .band-pine h3, .band-pine h4,
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: #fff; }
.band-pine .hand, .band-ink .hand { color: #fff; }
.band-pine .lead { color: rgba(255, 255, 255, .8); }
.band-pine .link-more { color: var(--note); }
.band-pine .link-more:hover { color: #fff; }

/* Two-column section. The three variants are each self-sufficient so a
   template can use one class alone (they were previously modifiers that only
   set grid-template-columns, which silently collapsed to one column). */
.split, .split-wide, .split-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.split-wide { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.split-copy { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
/* Top-align instead of centre: for columns of very unequal height (forms). */
.split-top { align-items: start; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type scale ---------- */

.eyebrow {
  display: inline-block;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.band-pine .eyebrow, .band-ink .eyebrow { color: var(--note); }

.h-hero {
  max-width: 620px;
  margin-top: 22px;
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.018em;
}

.h-sec {
  max-width: 560px;
  margin-top: 18px;
  font-size: clamp(2rem, 3.7vw, 2.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.016em;
}

.hl { color: var(--green); }
.band-pine .hl, .band-ink .hl { color: var(--note); }

.lead {
  max-width: 470px;
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--sub);
}

.hand {
  font-family: var(--hand);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--green-ink);
  font-size: 15px;
  font-weight: 620;
  text-decoration: none;
  transition: gap .18s var(--ease), color .15s var(--ease);
}
.link-more:hover { gap: 12px; color: var(--green); }
.link-more svg { width: 15px; height: 15px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .16s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { transform: translateY(-1px); }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-ink); }

.btn-paper {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.btn-paper:hover { border-color: var(--sub); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }

.btn-on-pine { background: var(--paper); color: var(--pine-deep); }
.btn-on-pine:hover { background: var(--note); color: var(--pine-deep); }

.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.btn-ghost-light:hover { border-color: #fff; }

.btn-sm { height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; }

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 241, .92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--green);
  flex: none;
}
.brand-mark svg { width: 16px; height: 16px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 32px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--sub);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s var(--ease);
}

.nav-link:hover,
.nav-link.active {
  color: var(--ink);
}

.nav-link.active {
  font-weight: 600;
}

.nav-cta { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-cta .btn { min-height: 44px; }

.nav-login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--sub);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.nav-login:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero { padding: 84px 0 96px; }

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 48px;
  align-items: start;
}

/* min-width:0 keeps a long headline from pushing the grid column wider */
.hero-copy { min-width: 0; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Handwritten margin note with a drawn arrow */
.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
}
.hero-note svg { position: relative; width: 34px; height: 40px; flex: none; color: var(--ink); }
.hero-note .hand { max-width: 220px; }

/* Collage: tilted Reddit postcard + sticky note + drawn arrows */
.collage {
  position: relative;
  min-height: 300px;
}

.postcard {
  position: relative;
  padding: 18px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: var(--sh-card);
}
.postcard-a {
  max-width: 330px;
  margin-left: auto;
  transform: rotate(-4deg);
}
.postcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  flex: none;
}
.avatar svg { width: 15px; height: 15px; }
.postcard-sub {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
}
.postcard-quote {
  margin-top: 12px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.5;
}
.postcard-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  color: var(--sub);
  font-size: 12px;
  font-weight: 500;
}
.postcard-foot .stat { display: inline-flex; align-items: center; gap: 6px; }
.postcard-foot svg { width: 13px; height: 13px; }
.postcard-foot .from {
  margin-left: auto;
  color: var(--green-ink);
  font-weight: 620;
  text-decoration: none;
}
.postcard-foot .from:hover { text-decoration: underline; }
.postcard-flag {
  margin-left: auto;
  color: var(--sub);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.note {
  position: absolute;
  right: 6%;
  bottom: -6px;
  width: 168px;
  padding: 16px 16px 18px;
  background: var(--note);
  border-radius: var(--r-note);
  box-shadow: var(--sh-note);
  transform: rotate(3deg);
  font-family: var(--hand);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
}

.draw { position: absolute; color: var(--ink); }
.draw-spark { top: 66px; right: -6px; width: 26px; height: 30px; }
.draw-swoop { left: 6%; bottom: -58px; width: 120px; height: 62px; }

/* ---------- Browser / app mocks ---------- */

.mock {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-mock);
  box-shadow: var(--sh-mock);
  text-align: left;
}
.mock-tilt { transform: rotate(-1.6deg); }

.mock-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hair);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-url {
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
  padding: 5px 12px;
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-tools { display: flex; gap: 6px; margin-left: auto; }
.mock-tools i { width: 12px; height: 12px; border-radius: 50%; border: 1.4px solid var(--line); }

.mock-flag {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
  color: var(--sub);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mock-flag.is-live {
  border-color: rgba(22, 160, 93, 0.3);
  background: rgba(22, 160, 93, 0.08);
  color: var(--green-ink);
}

/* Dashboard body: rail + main */
.app { display: grid; grid-template-columns: 196px minmax(0, 1fr); }

.app-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  border-right: 1px solid var(--hair);
}
.rail-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 650;
}
.rail-brand .brand-mark { width: 22px; height: 22px; border-radius: 7px; }
.rail-brand .brand-mark svg { width: 13px; height: 13px; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 500;
}
.rail-item svg { width: 14px; height: 14px; flex: none; }
.rail-item.is-active {
  background: var(--green);
  color: #fff;
  font-weight: 620;
}

.app-main { min-width: 0; padding: 20px 22px 24px; }

.app-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 16px;
  align-items: stretch;
}
.searchbar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--sub);
  font-size: 13px;
}
.searchbar svg { width: 14px; height: 14px; flex: none; }

.stat-card {
  padding: 12px 16px 10px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: var(--sh-tight);
}
.stat-card .k {
  color: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.stat-card .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}
.stat-card .v {
  color: var(--ink);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.spark { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.spark i { width: 7px; border-radius: 2px; background: var(--green); }
.spark i.dim { background: var(--line); }

.mock-h {
  margin-top: 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 660;
  letter-spacing: -.01em;
}

/* Product tables */
.tbl-scroll { overflow-x: auto; }
.tbl { width: 100%; min-width: 560px; font-size: 12.5px; }
.tbl th {
  padding: 10px 10px;
  border-bottom: 1px solid var(--hair);
  color: var(--sub);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
}
.tbl td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl th.num, .tbl td.num { text-align: right; }

.src { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.src .avatar { width: 22px; height: 22px; font-size: 10px; font-weight: 700; }
.av-ink { background: var(--ink); }
.av-blue { background: #2F6FED; }
.av-red { background: #D93025; }
.av-orange { background: #E8710A; }
.av-grey { background: #8A9089; }

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 620;
}
.chip-hi { background: var(--tint-hi); color: var(--tint-hi-ink); }
.chip-md { background: var(--tint-md); color: var(--tint-md-ink); }
.chip-lo { background: var(--tint-lo); color: var(--tint-lo-ink); }

.view-btn {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}
.view-btn.is-live { border-color: var(--green); color: var(--green-ink); }

/* Progress bars (green + neutral only) */
.bar {
  display: block;
  position: relative;
  height: 6px;
  min-width: 72px;
  border-radius: 3px;
  background: var(--hair);
  overflow: hidden;
}
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 40%);
  border-radius: 3px;
  background: var(--green);
}

.tbl-note {
  padding: 10px 14px;
  border-top: 1px solid var(--hair);
  color: var(--sub);
  font-size: 11.5px;
}
.tbl-note a { color: var(--green-ink); }

/* Hero dashboard sits wide and slightly tilted under the copy */
.stage {
  max-width: 1010px;
  margin: 64px auto 0;
}

/* Narrower stage for in-band panels (tracking table, legal index) */
.stage-sm { max-width: 900px; margin: 44px 0 0; }

/* Row of buttons that closes a band */
.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* ---------- Problem band (clay) ---------- */

.pains { margin-top: 46px; border-top: 1px solid var(--hair-dark); }
.pain-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair-dark);
}
.pain-item .n {
  padding-right: 22px;
  border-right: 1px solid var(--hair-dark);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pain-item h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 660;
  letter-spacing: -.012em;
  line-height: 1.4;
}
.pain-item p {
  margin-top: 4px;
  font-size: 14.5px;
  color: rgba(23, 25, 24, .72);
}

/* ---------- Asymmetrical 5-Step Workflow (Image 2 style) ---------- */

.asym-flow {
  position: relative;
  max-width: 860px;
  margin: 56px auto 44px;
  padding: 10px 12px 20px;
}

.asym-row {
  display: flex;
  align-items: center;
  position: relative;
}

.asym-row-top {
  justify-content: space-between;
  margin-bottom: 56px;
}

.asym-row-bottom {
  justify-content: flex-end;
  gap: 0;
}

/* Individual sticky note styling */
.asym-card {
  position: relative;
  background: #FFF9B8;
  background: linear-gradient(175deg, #FFF594 0%, #FFF9BA 24px, #FFFDED 100%);
  border: 1px solid rgba(224, 186, 50, 0.32);
  border-top: 2.5px solid rgba(220, 180, 40, 0.38);
  border-radius: 2px 2px 14px 2px;
  padding: 24px 22px 20px;
  box-shadow:
    0 1px 2px rgba(35, 30, 15, 0.05),
    0 4px 10px -1px rgba(35, 30, 15, 0.07),
    0 12px 24px -4px rgba(35, 30, 15, 0.09),
    2px 16px 30px -4px rgba(35, 30, 15, 0.08);
  width: 215px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
  cursor: default;
  z-index: 1;
}

/* Subtle top adhesive perforation line */
.asym-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.09) 0%, transparent 100%);
  border-bottom: 1px dashed rgba(210, 170, 40, 0.22);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  pointer-events: none;
}

/* Curled bottom-corner paper lift shadow */
.asym-card::after {
  content: '';
  position: absolute;
  bottom: 5px;
  right: 6px;
  width: 65%;
  height: 20px;
  background: transparent;
  box-shadow: 2px 10px 18px rgba(45, 35, 15, 0.20);
  transform: rotate(4deg) skew(-2deg);
  z-index: -1;
  filter: blur(2.5px);
  pointer-events: none;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.asym-card:hover {
  box-shadow:
    0 2px 4px rgba(35, 30, 15, 0.06),
    0 8px 18px -2px rgba(35, 30, 15, 0.10),
    4px 22px 38px -2px rgba(35, 30, 15, 0.14);
}

.asym-card:hover::after {
  transform: rotate(5.5deg) translate(2px, 3px);
  box-shadow: 4px 14px 24px rgba(45, 35, 15, 0.28);
}

.asym-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.asym-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(22, 160, 93, 0.35);
}

.asym-num-white {
  background: #fff;
  color: var(--pine);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.asym-doodle {
  display: flex;
  align-items: center;
  margin-left: 2px;
}

.asym-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.32;
  color: #1A1F1C;
  letter-spacing: -0.015em;
  position: relative;
  z-index: 2;
}

/* Specific Asymmetrical Tilts and Offsets */
.asym-c1, .asym-c1.reveal.is-in {
  transform: rotate(-3.2deg);
}
.asym-c1:hover, .asym-c1.reveal.is-in:hover {
  transform: rotate(-1.5deg) translateY(-6px) scale(1.02);
}

.asym-c2, .asym-c2.reveal.is-in {
  transform: rotate(2.4deg) translateY(6px);
}
.asym-c2:hover, .asym-c2.reveal.is-in:hover {
  transform: rotate(0.8deg) translateY(0px) scale(1.02);
}

.asym-c3, .asym-c3.reveal.is-in {
  transform: rotate(-2.6deg) translateY(-2px);
}
.asym-c3:hover, .asym-c3.reveal.is-in:hover {
  transform: rotate(-0.8deg) translateY(-6px) scale(1.02);
}

.asym-c4, .asym-c4.reveal.is-in {
  transform: rotate(-2deg) translateY(4px);
}
.asym-c4:hover, .asym-c4.reveal.is-in:hover {
  transform: rotate(-0.5deg) translateY(0px) scale(1.02);
}

/* Card 5: Pine Green Sticky Note */
.asym-c5, .asym-c5.reveal.is-in {
  background: #0B6B41;
  background: linear-gradient(175deg, #07472A 0%, #0B6B41 24px, #0E7F4E 100%);
  border: 1px solid rgba(6, 60, 36, 0.55);
  border-top: 2.5px solid rgba(5, 50, 30, 0.65);
  border-radius: 2px 2px 14px 2px;
  color: #fff;
  transform: rotate(3.4deg) translateY(-2px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 14px -1px rgba(11, 107, 65, 0.25),
    0 14px 28px -4px rgba(11, 107, 65, 0.28),
    2px 18px 34px -4px rgba(11, 107, 65, 0.22);
}

.asym-c5::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, transparent 100%);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.asym-c5::after {
  box-shadow: 2px 12px 22px rgba(5, 55, 32, 0.42);
  transform: rotate(4deg) skew(-2deg);
}

.asym-c5 .asym-card-title {
  color: #fff;
}

.asym-c5:hover, .asym-c5.reveal.is-in:hover {
  transform: rotate(1.4deg) translateY(-6px) scale(1.02);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 12px 26px -2px rgba(11, 107, 65, 0.35),
    4px 24px 42px -2px rgba(11, 107, 65, 0.42);
}

.asym-c5:hover::after, .asym-c5.reveal.is-in:hover::after {
  transform: rotate(5.5deg) translate(2px, 3px);
  box-shadow: 4px 16px 26px rgba(5, 55, 32, 0.55);
}

/* Arrow styling */
.asym-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asym-arrow-right {
  width: 54px;
  margin: 0 4px;
}
.asym-arrow-right svg {
  width: 100%;
  height: 20px;
}

/* Swoop arrow curving from Step 3 down into Step 4 */
.asym-arrow-swoop {
  position: absolute;
  bottom: -48px;
  right: 185px;
  width: 80px;
  height: 56px;
  pointer-events: none;
  z-index: 3;
}
.asym-arrow-swoop svg {
  width: 100%;
  height: 100%;
}

/* ---------- Evidence band (pine) ---------- */

.evi-collage { position: relative; padding-bottom: 26px; }
.evi-card {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: var(--sh-card);
}
.evi-a { max-width: 400px; transform: rotate(-3deg); }
.evi-b {
  position: absolute;
  top: 26px;
  right: 0;
  width: 300px;
  transform: rotate(4deg);
}
.evi-head { display: flex; align-items: center; gap: 9px; }
.evi-head .avatar { width: 24px; height: 24px; }
.evi-head .avatar svg { width: 13px; height: 13px; }
.evi-head .postcard-flag { font-size: 10px; }
.evi-sub { color: var(--sub); font-size: 12px; font-weight: 600; }
.evi-title {
  margin-top: 11px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 640;
  line-height: 1.42;
  letter-spacing: -.012em;
}
.evi-body { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--sub); }
.evi-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 550;
}
.evi-foot .stat { display: inline-flex; align-items: center; gap: 6px; }
.evi-foot svg { width: 13px; height: 13px; }
.evi-foot .from {
  margin-left: auto;
  color: var(--green-ink);
  font-weight: 620;
  text-decoration: none;
}
.evi-foot .from:hover { text-decoration: underline; }
.evi-note {
  position: absolute;
  right: 4%;
  bottom: -14px;
  width: 158px;
  padding: 14px 15px 16px;
  background: var(--note);
  border-radius: var(--r-note);
  box-shadow: var(--sh-note);
  transform: rotate(-4deg);
  font-family: var(--hand);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- Validation mock ---------- */

.vp-mock { position: relative; }
.vp-body { padding: 28px 30px 22px; }
.vp-title {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.vp-sub { margin-top: 6px; font-size: 13.5px; color: var(--sub); }
.prices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 108px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.price.is-on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.price svg { width: 14px; height: 14px; margin-right: 6px; flex: none; }
.price.is-no { color: var(--sub); font-weight: 500; }
.vp-note {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--sub);
}
.vp-mock .draw-l { left: -46px; top: 46%; width: 30px; height: 44px; }
.vp-mock .draw-r { right: -44px; top: 30%; width: 26px; height: 46px; }

/* ---------- Tracking panel ---------- */

.panel {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  text-align: left;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 660;
  letter-spacing: -.012em;
}
.panel-head .mock-flag { margin-left: auto; }
.panel-body { padding: 6px 20px 14px; }
.panel-body .tbl { min-width: 480px; }

/* ---------- Internal page hero ---------- */

.page-hero { padding: 76px 0 60px; }
.page-hero .h-hero {
  max-width: 720px;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}
.page-hero .lead { max-width: 560px; }
.page-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.page-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero-visual img {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(23, 25, 24, 0.07));
  transition: transform .35s var(--ease);
}
.page-hero-visual img:hover {
  transform: translateY(-4px) scale(1.02);
}

/* ---------- Walkthrough (how it works) ---------- */

.walk { display: grid; gap: 88px; }
.walk-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
}
.walk-row:nth-child(even) .walk-vis { order: -1; }
.walk-copy { min-width: 0; }
.walk-vis { min-width: 0; }
.walk-num {
  color: var(--sub);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 620;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.walk-copy h2 {
  max-width: 460px;
  margin-top: 14px;
  font-size: clamp(1.7rem, 2.9vw, 2.3rem);
}
.walk-copy .lead { margin-top: 14px; }

/* ---------- Flow chain ---------- */

.chain {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  text-align: left;
}
.chain-step {
  flex: 1 1 0;
  min-width: 148px;
  padding: 20px 18px;
  border-right: 1px solid var(--hair);
}
.chain-step:last-child { border-right: 0; }
.chain-k {
  color: var(--sub);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.chain-v {
  margin-top: 8px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -.02em;
}
.chain-d { margin-top: 4px; font-size: 13px; color: var(--sub); }
.chain-step.is-key { background: var(--cream); }
.chain-step.is-key .chain-v { color: var(--green-ink); }

/* Stacked variant for narrow columns (walkthrough visuals) */
.chain-stack { flex-direction: column; }
.chain-stack .chain-step { border-right: 0; border-bottom: 1px solid var(--hair); }
.chain-stack .chain-step:last-child { border-bottom: 0; }

/* ---------- Duo cards (uses / never uses) ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;
}
.duo-card {
  padding: 24px 26px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  text-align: left;
}
.duo-card h3 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sub);
}
.duo-card.is-good h3 { color: var(--green-ink); }
.duo-list { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.duo-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.duo-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.6px solid var(--sub);
}
.duo-card.is-good .duo-list li::before {
  background: var(--green);
  border-color: var(--green);
}

/* Duo cards inside a dark band: outlined, no elevation */
.band-pine .duo-card, .band-ink .duo-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: none;
}
.band-pine .duo-card h3, .band-ink .duo-card h3 { color: var(--note); }
.band-pine .duo-list li, .band-ink .duo-list li { color: rgba(255, 255, 255, .86); }
.band-pine .duo-list li::before, .band-ink .duo-list li::before { border-color: rgba(255, 255, 255, .45); }
.band-pine .duo-card.is-good .duo-list li::before,
.band-ink .duo-card.is-good .duo-list li::before { background: var(--note); border-color: var(--note); }
.band-pine .duo-card:not(.is-good) h3, .band-ink .duo-card:not(.is-good) h3 { color: rgba(255, 255, 255, .55); }

/* ---------- Note card (honest limits, terminology) ---------- */

.note-card {
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--green);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  text-align: left;
}
.note-card h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 680;
  letter-spacing: -.012em;
}
.note-card p { margin-top: 8px; font-size: 15px; color: var(--sub); }
.note-card ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.note-card li { font-size: 14.5px; color: var(--sub); }
.note-card li b { color: var(--ink); font-weight: 620; }

/* Note card inside a dark band */
.band-pine .note-card, .band-ink .note-card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  border-left-color: var(--note);
  box-shadow: none;
}
.band-pine .note-card h3, .band-ink .note-card h3 { color: #fff; }
.band-pine .note-card p, .band-ink .note-card p { color: rgba(255, 255, 255, .82); }
.band-pine .note-card li, .band-ink .note-card li { color: rgba(255, 255, 255, .82); }
.band-pine .note-card li b, .band-ink .note-card li b { color: #fff; }

/* ---------- FAQ ---------- */

.faq-group {
  max-width: none;
  margin-top: 56px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sub);
}
.faq-group:first-of-type { margin-top: 0; }
.faq-group + .faq { margin-top: 18px; }

.faq { max-width: 860px; margin-top: 44px; display: grid; gap: 12px; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -.014em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic {
  flex: none;
  width: 17px;
  height: 17px;
  margin-left: auto;
  color: var(--sub);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.faq details[open] summary .ic { transform: rotate(45deg); color: var(--green); }
.faq .a {
  max-width: 720px;
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sub);
}
.faq .a a { color: var(--green-ink); }

/* ---------- Legal pages ---------- */

.legal-index {
  max-width: 860px;
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.legal-index h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sub);
}
.legal-index ol {
  list-style: none;
  columns: 2;
  column-gap: 44px;
  margin-top: 14px;
}
.legal-index li { break-inside: avoid; margin-bottom: 8px; font-size: 14.5px; }
.legal-index a { color: var(--sub); text-decoration: none; transition: color .15s var(--ease); }
.legal-index a:hover { color: var(--green-ink); }

.legal { max-width: 860px; padding-bottom: var(--sec); }
.legal h2 {
  margin-top: 52px;
  font-size: 23px;
  scroll-margin-top: 92px;
}
.legal h3 {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 660;
}
.legal p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--sub); }
.legal ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.legal li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sub);
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.legal strong { color: var(--ink); font-weight: 640; }
.legal a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--sub);
}

.legal-at-glance {
  max-width: 820px;
  margin: 28px 0;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-left: 4px solid var(--green);
  border-radius: var(--r-card);
  box-shadow: var(--sh-tight);
}
.legal-at-glance h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.legal-at-glance p {
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sub);
}
.legal-at-glance ul {
  margin: 10px 0 12px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.legal-at-glance li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sub);
}
.legal-at-glance li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.legal-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 20px 0 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  min-width: 540px;
}
.legal-table th {
  padding: 14px 18px;
  background: #FAF7F1;
  font-weight: 650;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.legal-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  color: var(--sub);
  line-height: 1.55;
  vertical-align: top;
}
.legal-table tr:last-child td {
  border-bottom: none;
}
.legal-table td strong {
  color: var(--ink);
  display: inline-block;
  margin-bottom: 2px;
}

.legal-contact-card {
  max-width: 820px;
  margin: 36px 0 20px;
  padding: 30px 32px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.legal-contact-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.legal-contact-card p {
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sub);
}
.legal-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--green-ink);
  text-decoration: none;
  margin: 10px 0 14px;
}
.legal-contact-email:hover {
  text-decoration: underline;
}
.legal-contact-response {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--sub);
  font-weight: 500;
  padding: 4px 10px;
  background: #FAF7F1;
  border-radius: 6px;
  border: 1px solid var(--hair);
}

/* ---------- Contact form (/contact) ---------- */

.cform {
  padding: 28px 28px 30px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.cfield { margin-bottom: 20px; }
.cfield:last-of-type { margin-bottom: 24px; }

.clabel {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--ink);
}

.cinput {
  width: 100%;
  padding: 11px 13px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.cinput::placeholder { color: rgba(98, 104, 99, .62); }
.cinput:hover { border-color: var(--hair-dark); }
.cinput:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 160, 93, .16);
}
.cinput[aria-invalid="true"] {
  border-color: #C2543F;
  background: rgba(194, 84, 63, .045);
}
.cinput[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 84, 63, .16); }

.ctextarea { resize: vertical; min-height: 132px; }

/* Native arrow hidden so the select matches the inputs */
.cselect {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5l6 6 6-6' stroke='%23626863' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  cursor: pointer;
}

.chelp { margin-top: 6px; font-size: 12.8px; line-height: 1.5; color: var(--sub); }
.cerr { margin-top: 6px; font-size: 13px; font-weight: 560; color: #A8432F; }

/* Form-level failure: expired CSRF token or rate limit hit */
.cform-alert {
  margin-bottom: 18px;
  padding: 13px 15px;
  background: rgba(194, 84, 63, .08);
  border: 1px solid rgba(194, 84, 63, .3);
  border-left: 3px solid #C2543F;
  border-radius: var(--r-chip);
  color: #8E3826;
  font-size: 14px;
  line-height: 1.55;
}

/* Success panel shown after the POST-redirect-GET */
.cok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: rgba(22, 160, 93, .07);
  border: 1px solid rgba(22, 160, 93, .28);
  border-left: 3px solid var(--green);
  border-radius: var(--r-chip);
}
.cok b { display: block; color: var(--pine); font-family: var(--serif); font-size: 17px; font-weight: 600; }
.cok p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.cok-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.cok-ic svg { width: 15px; height: 15px; }

/* Honeypot: off-screen rather than display:none, which bots check for.
   Kept focusable-out via tabindex="-1" and hidden from assistive tech. */
.chn {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cmail {
  color: var(--green-ink);
  font-weight: 620;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 122, 69, .32);
  transition: border-color .16s var(--ease);
}
.cmail:hover { border-bottom-color: var(--green-ink); }

.c-routes-h {
  margin-top: 44px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sub);
}
.c-routes { margin-top: 14px; }
.c-routes dt {
  margin-top: 18px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.012em;
}
.c-routes dt:first-child { margin-top: 0; }
.c-routes dd {
  margin: 5px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  font-size: 14.3px;
  line-height: 1.62;
  color: var(--sub);
}
.c-routes dd:last-child { border-bottom: 0; padding-bottom: 0; }
.c-routes a { color: var(--green-ink); }

/* Handwritten aside, echoing the hero margin note */
.c-aside {
  position: relative;
  margin-top: 38px;
  padding-left: 58px;
  color: var(--sub);
}
.c-aside .draw {
  position: absolute;
  left: 0;
  top: 2px;
  width: 40px;
  height: 46px;
  color: var(--green);
}
.c-aside .hand {
  margin: 0;
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- Footer (ink band, carries the closing CTA) ---------- */

.footer { padding: 84px 0 34px; color: rgba(255, 255, 255, .66); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .5fr) minmax(0, .4fr) minmax(0, .9fr);
  gap: 48px;
}
.footer .h-sec { color: #fff; max-width: 420px; }
.footer .btn { margin-top: 26px; }
.footer-copy { margin-top: 22px; font-size: 12px; color: rgba(255, 255, 255, .45); }

.f-col h4 {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .5);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.f-col a {
  display: block;
  padding: 5px 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.f-col a:hover { color: #fff; }

.f-aside { position: relative; padding-top: 6px; }
.f-aside .hand { color: #fff; font-size: 23px; max-width: 240px; }
.f-aside .draw { left: -52px; top: 4px; width: 44px; height: 40px; color: #fff; }
.f-aside .sub-t { margin-top: 26px; font-size: 13.5px; }
.f-aside .btn { margin-top: 12px; }

/* ---------- Utilities ---------- */

/* Inline code (tracking codes, cookie names, query params) */
code {
  padding: 1px 5px;
  background: rgba(23, 25, 24, .06);
  border-radius: 4px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
}
.note-card a, .duo-card a { color: var(--green-ink); }
.band-pine code, .band-ink code { background: rgba(255, 255, 255, .14); color: #fff; }

/* Cancels the built-in top margin of a component (declared last so it wins) */
.flush { margin-top: 0; }
.no-pad-top { padding-top: 0; }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Collage pieces & sticky notes keep their tilt once revealed */
.postcard-a.reveal.is-in, .evi-a.reveal.is-in { transform: rotate(-4deg); }
.evi-b.reveal.is-in { transform: rotate(4deg); }
.mock-tilt.reveal.is-in { transform: rotate(-1.6deg); }
.asym-c1.reveal.is-in { transform: rotate(-3.2deg); }
.asym-c2.reveal.is-in { transform: rotate(2.4deg) translateY(6px); }
.asym-c3.reveal.is-in { transform: rotate(-2.6deg) translateY(-2px); }
.asym-c4.reveal.is-in { transform: rotate(-2deg) translateY(4px); }
.asym-c5.reveal.is-in { transform: rotate(3.4deg) translateY(-2px); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .split, .split-wide, .split-copy, .hero-top, .page-hero-in, .walk-row {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .split-top { align-items: start; }
  .walk-row:nth-child(even) .walk-vis { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .f-aside .draw { display: none; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app-rail {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  .rail-brand { display: none; }
  .rail-item { white-space: nowrap; }
  .app-top { grid-template-columns: 1fr; }

  .evi-b { position: static; width: auto; max-width: 340px; margin: 18px 0 0 auto; }
  .asym-row-top { gap: 8px; margin-bottom: 44px; }
  .asym-card { width: 180px; padding: 18px 14px; min-height: 135px; }
  .asym-card-title { font-size: 15px; }
  .asym-arrow-right { width: 34px; margin: 0 2px; }
  .asym-arrow-swoop { right: 145px; width: 64px; height: 48px; bottom: -42px; }
}

@media (max-width: 760px) {
  :root { --sec: 76px; --sec-sm: 60px; }
  body { font-size: 16px; }
  .hero { padding: 60px 0 72px; }
  .collage { min-height: 0; margin-top: 8px; }
  .postcard-a { margin-left: 0; }
  .note { right: 0; bottom: -18px; }
  .draw-swoop { display: none; }
  .stage { margin-top: 44px; }
  .mock-tilt, .mock-tilt.reveal.is-in { transform: none; }
  .asym-flow { max-width: 380px; margin: 36px auto; }
  .asym-row { flex-direction: column; gap: 18px; }
  .asym-row-top { margin-bottom: 18px; padding-left: 0; }
  .asym-card { width: 100%; min-height: auto; transform: none !important; }
  .asym-arrow, .asym-arrow-swoop { display: none; }
  .prices .price { flex: 1 1 44%; min-width: 0; }
  .price.is-no { flex-basis: 100%; }
  .duo { grid-template-columns: 1fr; }
  .chain { flex-direction: column; }
  .chain-step { border-right: 0; border-bottom: 1px solid var(--hair); }
  .chain-step:last-child { border-bottom: 0; }
  .legal-index ol { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .band-actions { flex-direction: column; align-items: stretch; }
  .band-actions .btn { width: 100%; }
  .vp-mock .draw-l, .vp-mock .draw-r { display: none; }
  .cform { padding: 22px 18px 24px; }
  .c-aside { margin-top: 30px; padding-left: 0; }
  .c-aside .draw { display: none; }
  .c-routes-h { margin-top: 34px; }
}

@media (max-width: 768px) {
  .nav-links { gap: 18px; margin-left: 18px; }
  .nav-link { font-size: 13.5px; }
}

@media (max-width: 640px) {
  .nav-in { justify-content: space-between; }
  .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    justify-content: flex-start;
    gap: 20px;
  }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .nav-in { padding-top: 10px; padding-bottom: 10px; }
  .mock-bar { gap: 8px; padding: 0 12px; }
  .mock-url { display: none; }
  .pain-item { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .pain-item .n { padding-right: 14px; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .postcard-a, .evi-a, .evi-b, .evi-note, .note, .mock-tilt, .scard { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Visual framing & responsive image helpers
   ========================================================================== */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

.rounded-card {
  border-radius: var(--r-card);
  box-shadow: var(--sh-mock);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.rounded-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 80px rgba(23, 25, 24, .18);
}

.stage-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-graphic {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Full-width hero image block used on inner pages (how-it-works, validation, tracking, why-nexify) */
.hiw-hero-img {
  margin-top: 40px;
  margin-bottom: 16px;
  text-align: center;
}
.hiw-hero-img img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .hiw-hero-img { margin-top: 24px; }
  .hiw-hero-img img { border-radius: 10px; }
}

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 980px;
  margin: 30px auto;
}

.auth-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 780px) {
  .auth-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   How It Works — Refined Visual Product Tour Styles
   ========================================================================== */

.hiw-hero {
  padding: 56px 0 32px;
  background: var(--cream);
}

.hiw-hero-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hiw-hero-copy {
  max-width: 800px;
  margin: 0 auto 36px;
}

.hiw-hero .h-hero {
  max-width: 100%;
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  line-height: 1.12;
  overflow-wrap: break-word;
  margin-top: 10px;
  margin-bottom: 12px;
}

.hiw-hero-preview-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

/* Product Screenshot Gallery Frame */
.hiw-stage-frame {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(23, 25, 24, 0.09);
  border-radius: 12px;
  box-shadow: 0 20px 48px -12px rgba(23, 25, 24, 0.08), 0 1px 3px rgba(23, 25, 24, 0.03);
  overflow: visible;
  line-height: 0;
  transition: box-shadow 0.2s ease;
}

.hiw-frame-wide {
  max-width: 1140px;
  margin: 0 auto;
}

.hiw-frame-large {
  max-width: 1040px;
  margin: 0 auto;
}

.hiw-screenshot-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 11px;
  line-height: 1;
}

/* Hand-drawn Organic Annotations (Refined Black Ink System) */
.hiw-annotation-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.hiw-ink-circle {
  stroke: #171918;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.hiw-ink-arrow,
.hiw-ink-head {
  stroke: #171918;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.hiw-annotation-note {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.hiw-handwritten-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  color: #171918;
  line-height: 1;
  letter-spacing: 0.01em;
  background: #FFFFFF;
  border: 1px solid rgba(23, 25, 24, 0.18);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  box-shadow: 0 4px 14px rgba(23, 25, 24, 0.09), 0 1px 3px rgba(23, 25, 24, 0.04);
}

.hiw-handwritten-note::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
  flex-shrink: 0;
}

/* Slim Chapter Orientation Bar */
.hiw-journey-rail-wrap {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(250, 247, 241, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(23, 25, 24, 0.07);
  padding: 9px 0;
  box-shadow: 0 2px 10px rgba(23, 25, 24, 0.02);
}

.hiw-journey-rail-inner {
  display: flex;
  justify-content: center;
}

.hiw-journey-rail {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px;
}

.hiw-rail-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sub);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.16s ease;
}

.hiw-rail-num {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}

.hiw-rail-name {
  font-weight: 700;
}

.hiw-rail-item:hover {
  color: var(--ink);
  background: rgba(23, 25, 24, 0.04);
}

.hiw-rail-item.active {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: 0 1px 4px rgba(23, 25, 24, 0.04);
}

.hiw-rail-item.active .hiw-rail-num {
  color: var(--green-ink);
  opacity: 1;
}

.hiw-rail-sep {
  color: rgba(23, 25, 24, 0.2);
  font-size: 11px;
  user-select: none;
}

/* Walkthrough Container */
.hiw-walkthrough-container {
  padding: 24px 0 64px;
}

.hiw-section {
  padding: 56px 0;
  scroll-margin-top: 60px;
}

.hiw-ch-wrap {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}

.hiw-ch-header {
  max-width: 760px;
  margin: 0 auto 32px;
}

.hiw-stage-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-ink);
  background: #E8F5EC;
  border: 1px solid #BCE5CB;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}

.hiw-stage-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 600;
}

.hiw-stage-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--sub);
  margin: 0;
}

.hiw-takeaway-single {
  font-size: 14.5px;
  color: var(--sub);
  font-weight: 500;
  margin: 18px auto 0;
  text-align: center;
  max-width: 600px;
  line-height: 1.5;
}

/* Stage 03 — Minimal Horizontal Test Strip */
.hiw-test-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(23, 25, 24, 0.07);
  text-align: left;
}

.hiw-strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hiw-strip-num {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.hiw-strip-desc {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.45;
}

/* Stage 04 — Split Composition & Minimal Telemetry */
.hiw-split-wrap {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}

.hiw-split-copy {
  max-width: 440px;
}

.hiw-split-visual {
  width: 100%;
}

.hiw-telemetry-strip {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(23, 25, 24, 0.07);
}

.hiw-telemetry-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 10px;
}

.hiw-telemetry-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hiw-telemetry-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  width: fit-content;
  box-shadow: 0 1px 3px rgba(23, 25, 24, 0.02);
}

/* No Magic Score Section */
.hiw-not-section {
  padding: 56px 0;
  background: #F5F1E8;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hiw-not-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.hiw-not-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 600;
}

.hiw-not-sub {
  font-size: 16px;
  color: var(--sub);
  margin: 0 0 36px;
}

.hiw-not-triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}

.hiw-triad-item strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 700;
}

.hiw-triad-item p {
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.5;
  margin: 0;
}

/* Final Journey Summary CTA */
.hiw-final-loop {
  padding: 72px 0;
  background: var(--cream);
  text-align: center;
}

.hiw-final-inner {
  max-width: 720px;
  margin: 0 auto;
}

.hiw-final-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green-ink);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.hiw-final-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 600;
}

.hiw-final-lead {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--sub);
  margin: 0 0 28px;
}

.hiw-final-cta {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */

@media (max-width: 1024px) {
  .hiw-split-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  
  .hiw-split-copy {
    max-width: 760px;
    margin: 0 auto;
  }

  .hiw-telemetry-strip {
    text-align: center;
  }

  .hiw-telemetry-items {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .hiw-test-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .hiw-not-triad {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .hiw-hero {
    padding: 40px 0 24px;
  }
  
  .hiw-section {
    padding: 44px 0;
  }
  
  .hiw-stage-heading {
    font-size: 24px;
  }

  .hiw-stage-lead {
    font-size: 15.5px;
  }
  
  .hiw-test-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hiw-handwritten-note {
    font-size: 16px;
    padding: 2px 7px 1px;
  }
}

@media (max-width: 480px) {
  .hiw-stage-heading {
    font-size: 22px;
  }
  
  .hiw-rail-item {
    padding: 4px 8px;
    font-size: 11.5px;
  }

  .hiw-telemetry-pill {
    font-size: 10.5px;
    padding: 4px 8px;
  }

  .hiw-not-heading {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-stage-frame {
    transition: none;
  }
}