/* ==========================================================================
   Faithful Intelligence - site stylesheet
   Hand-written CSS. No build step, no framework.
   1 tokens · 2 reset · 3 typography · 4 layout · 5 buttons · 6 header
   7 hero · 8 sections · 9 audit · 10 blog · 11 footer · 12 forms
   13 animation · 14 responsive · 15 print
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  --navy: #102a43;
  --navy-deep: #0d2940;
  --navy-darkest: #071b2b;
  --navy-hover: #163d5a;
  --teal: #167d7f;
  --teal-dark: #0f6567;
  --copper: #b66a3c;
  --copper-light: #cc7948;
  --copper-dark: #98532e;
  --copper-pale: #ffd4b9;
  --aqua: #5bc0be;
  --warm-white: #f8faf9;
  --charcoal: #172b3a;
  --sand: #e9e1d7;
  --mist-cool: #f3f6f5;

  --border-soft: rgb(16 42 67 / 10%);
  --border-line: rgb(16 42 67 / 14%);

  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, 'Times New Roman', serif;

  --wrap: 1280px;
  --wrap-narrow: 1120px;
  --wrap-text: 760px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.2, 0.72, 0.2, 1);

  --scroll-progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
}

/* 2. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* A <picture> is only a wrapper for format selection: let the <img> inside it
   be laid out by the parent exactly as a bare <img> would be. */
picture { display: contents; }
/* Its <source> has no box of its own; without this it counts as an empty
   item in a flex or grid parent and adds a gap. */
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
fieldset { border: 0; }

/* The browser's own rule for the hidden attribute is a plain display: none,
   which any rule here that sets a display beats - and most components set
   one. Without this, hiding a card by adding hidden does nothing visible. */
[hidden] { display: none !important; }

::selection { background: rgb(91 192 190 / 35%); }

:focus-visible { outline: 3px solid rgb(91 192 190 / 45%); outline-offset: 2px; }

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

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: top 200ms ease;
}
.skip-link:focus { top: 0; }

/* 3. Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.1;
  color: var(--navy);
  /* Long unbroken strings such as "F.A.I.T.H." must not push the page wider
     than the screen when text is enlarged to 200%. */
  overflow-wrap: break-word;
}

p, li, legend, dd, dt, blockquote { overflow-wrap: break-word; }

.eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
}
.eyebrow-teal { color: var(--teal); }
.eyebrow-aqua { color: var(--aqua); }

.lede { font-size: 1.125rem; line-height: 1.75; color: rgb(23 43 58 / 68%); }

.section-title { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; }

/* 4. Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin-inline: auto; }

.section { position: relative; overflow: hidden; padding: 4.5rem 20px; }

.text-center { text-align: center; }
.relative { position: relative; }

.dark-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 96%);
}

.blob { position: absolute; z-index: 0; border-radius: 999px; pointer-events: none; }

/* 5. Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding-inline: 1.6rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 520ms var(--ease-out),
    box-shadow 520ms var(--ease-out),
    border-color 420ms ease,
    background-color 420ms ease,
    color 420ms ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 20%) 48%, transparent 74%);
  transform: translateX(-130%);
  transition: transform 760ms var(--ease-out);
}
.btn .icon { transition: transform 480ms var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateX(130%); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 120ms; }
.btn:disabled, .btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.btn-lg { padding-inline: 1.75rem; }
.btn-sm { padding-inline: 1.15rem; }
.btn-block { width: 100%; }

.btn-copper {
  border-color: rgb(255 255 255 / 14%);
  color: #fff;
  box-shadow: 0 12px 26px rgb(104 52 25 / 22%), inset 0 1px 0 rgb(255 255 255 / 20%);
}
.btn-copper:hover { box-shadow: 0 18px 34px rgb(104 52 25 / 28%), inset 0 1px 0 rgb(255 255 255 / 24%); }

.btn-navy {
  border-color: rgb(16 42 67 / 8%);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 28px rgb(7 27 43 / 18%);
}
.btn-navy:hover { background: var(--navy-hover); box-shadow: 0 18px 36px rgb(7 27 43 / 24%); }

.btn-light {
  border-color: rgb(255 255 255 / 60%);
  background: #fff;
  color: var(--teal);
  box-shadow: 0 15px 34px rgb(7 27 43 / 20%);
}
.btn-light:hover { background: var(--warm-white); box-shadow: 0 20px 40px rgb(7 27 43 / 26%); }

.btn-ghost { background: transparent; color: var(--navy); box-shadow: none; }
.btn-ghost:hover { background: rgb(16 42 67 / 5%); }

.btn-outline { border-color: var(--border-line); background: #fff; color: var(--navy); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }

.btn-danger { border-color: rgb(182 106 60 / 40%); background: #fff; color: var(--copper-dark); box-shadow: none; }
.btn-danger:hover { background: rgb(182 106 60 / 10%); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal);
  transition: color 260ms ease;
}
.link-arrow:hover { color: var(--teal-dark); }
.link-arrow .icon { transition: transform 400ms var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

.icon { flex: none; width: 1rem; height: 1rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 80;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
  background: linear-gradient(90deg, var(--aqua), var(--copper));
  box-shadow: 0 0 14px rgb(91 192 190 / 55%);
}

.floating-cta {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 44px);
  padding: 9px 14px 9px 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(16 42 67 / 94%);
  color: #fff;
  box-shadow: 0 18px 45px rgb(7 24 38 / 28%);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  pointer-events: none;
  transition: opacity 420ms ease, transform 620ms var(--ease-out);
}
.floating-cta.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.floating-cta .fc-mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 15%);
}
.floating-cta strong { display: block; font-size: 0.85rem; }
.floating-cta small { display: block; color: rgb(255 255 255 / 62%); }

/* 6. Header -------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-inline: 20px;
  border-bottom: 1px solid var(--border-soft);
  background: rgb(248 250 249 / 94%);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 35px rgb(16 42 67 / 6%);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: var(--wrap);
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding-block: 0.5rem; }
.brand img {
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgb(7 27 43 / 14%));
  transition: transform 300ms ease;
}
.brand:hover img { transform: translateY(-2px); }
.brand-text { min-width: 0; line-height: 1; }
.brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--navy);
}
.brand-sub {
  display: block;
  margin-top: 0.25rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.brand-tag {
  display: none;
  margin-top: 0.35rem;
  font-weight: 800;
}

.nav-desktop { display: none; align-items: center; gap: 0.75rem; }

.nav-shell {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgb(16 42 67 / 7%);
  border-radius: 999px;
  background: rgb(16 42 67 / 5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}

.nav-link {
  display: inline-flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 760;
  transition: background-color 380ms ease, color 380ms ease,
              box-shadow 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.nav-link:hover { color: var(--navy); transform: translateY(-1px); }
.nav-link.is-active { background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgb(16 42 67 / 10%); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 21px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 24px rgb(7 27 43 / 18%);
  font-weight: 780;
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), background-color 360ms ease;
}
.nav-cta:hover { transform: translateY(-2px); background: var(--navy-hover); box-shadow: 0 16px 30px rgb(7 27 43 / 24%); }
.nav-cta .icon { transition: transform 440ms var(--ease-out); }
.nav-cta:hover .icon { transform: translateX(3px); }

.nav-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}

.nav-mobile { display: none; padding: 0.5rem 0 1.25rem; border-top: 1px solid var(--border-soft); }
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 800;
  color: var(--navy);
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile .nav-mobile-cta {
  display: flex;
  height: 3rem;
  margin-top: 1rem;
  padding: 0 1.15rem;
  border-bottom: 0;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: #fff;
}

.header-actions { display: flex; flex: none; align-items: center; gap: 0.6rem; }

/* 7. Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3.5rem 20px 0;
  background: var(--navy);
  color: #fff;
}
.hero .dark-grid { opacity: 0.55; }
.hero-blob-a { left: -10rem; top: 0; width: 520px; height: 520px; }
.hero-blob-b { right: -10rem; bottom: 0; width: 560px; height: 560px; }

.hero-watermark {
  position: absolute;
  right: 7%; top: 7%;
  font-family: var(--font-heading);
  font-size: clamp(8rem, 20vw, 18rem);
  line-height: 1;
  color: rgb(255 255 255 / 2.5%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--wrap);
  margin-inline: auto;
}

.hero-copy, .hero-visual { min-width: 0; }
.hero-copy { max-width: 760px; }

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--aqua);
}
.hero-kicker > span {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border: 1px solid rgb(91 192 190 / 40%);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: #fff;
}

.hero-title {
  font-weight: 500;
  color: #fff;
}
.hero-title em { font-style: italic; font-weight: 400; }

.hero-text {
  padding-left: 1.25rem;
  border-left: 1px solid rgb(91 192 190 / 45%);
  font-size: 1.125rem;
  line-height: 1.8;
}

.hero-actions { display: flex; flex-direction: column; gap: 1rem; }

.hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 0.75rem;
  font-weight: 800;
  transition: color 260ms ease;
}
.hero-secondary:hover { color: var(--aqua); }
.hero-secondary .icon { transition: transform 300ms ease; }
.hero-secondary:hover .icon { transform: translateY(2px); }

.hero-proof {
  /* Sized in rem so the row folds to fewer columns as text is enlarged, or as
     the screen narrows, rather than letting a label run into its neighbour. */
  grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
  max-width: 660px;
  margin-top: 2.25rem;
  padding-block: 1.25rem;
  border-block: 1px solid rgb(255 255 255 / 12%);
  font-weight: 800;
}
.hero-proof span { display: flex; min-width: 0; align-items: center; gap: 0.5rem; }
.icon-aqua { color: var(--aqua); }
.icon-copper { color: var(--copper); }

.hero-visual { position: relative; width: 100%; }

.profile-stage {
  overflow: hidden;
  border-left: 1px solid rgb(255 255 255 / 10%);
  transition: transform 300ms ease-out;
}
.profile-stage img { width: 100%; height: 100%; object-fit: cover; }
.profile-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.profile-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 8%) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: stage-glint 7s ease-in-out 1.4s infinite;
}

.stage-caption {
  z-index: 10;
  padding-left: 1rem;
  border-left: 2px solid var(--copper);
  font-weight: 800;
  text-transform: uppercase;
}
.stage-caption em { display: block; font-style: normal; }



/* 8. Content sections ---------------------------------------------------- */

/* Overview */
.overview { border-block: 1px solid var(--border-soft); background: var(--mist); scroll-margin-top: 7rem; }
.overview-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(16 42 67 / 2.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(16 42 67 / 2.5%) 1px, transparent 1px),
    radial-gradient(circle at 16% 45%, rgb(91 192 190 / 9%), transparent 26%),
    radial-gradient(circle at 87% 20%, rgb(182 106 60 / 7%), transparent 24%);
  background-size: 52px 52px, 52px 52px, 100% 100%, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}

.step-grid { display: grid; }

.step-card {
  padding: 1.5rem;
  border-radius: 1rem;
  transition: transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out), border-color 420ms ease;
}
.step-card:hover { border-color: rgb(91 192 190 / 30%); }
.step-card .num { font-weight: 800; letter-spacing: 0.16em; }
.step-card h3 { margin-top: 0.5rem; }
.step-card p { margin-top: 0.5rem; line-height: 1.6; }

/* Five-hours band */
.band { background: var(--navy); color: #fff; }
.band::after {
  content: 'STEWARDSHIP';
  position: absolute;
  right: -1vw; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-heading);
  font-size: clamp(5rem, 10vw, 9rem);
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 3%);
  pointer-events: none;
}
.band-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(91 192 190 / 8%) 8% 8.08%, transparent 8.08% 92%, rgb(182 106 60 / 9%) 92% 92.08%, transparent 92.08%),
    linear-gradient(0deg, transparent 0 50%, rgb(255 255 255 / 5%) 50% 50.15%, transparent 50.15%);
}
.band-inner { position: relative; display: grid; align-items: center; gap: 2.5rem; max-width: 1200px; margin-inline: auto; }

.hours-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
  border-block: 1px solid rgb(255 255 255 / 12%);
  border-left: 4px solid var(--copper);
}
.hours-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgb(91 192 190 / 10%), transparent 48%),
    radial-gradient(circle at 78% 22%, rgb(182 106 60 / 18%), transparent 27%);
}
.hours-labels {
  position: absolute;
  inset: 2rem 2rem auto;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 36%);
}
.hours-counter { position: relative; text-align: center; }
.hours-counter .value {
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 15vw, 9.5rem);
  line-height: 1;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 18px 46px rgb(0 0 0 / 20%);
  color: #fff;
}
.hours-counter .value .unit {
  margin-left: 0.5rem;
  font-size: 0.28em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--copper);
}
.hours-counter .caption {
  margin-top: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--aqua);
}
.hours-bars { position: absolute; inset: auto 2rem 2rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.hours-bars span { display: block; height: 4px; background: rgb(255 255 255 / 12%); }
.hours-bars span i { display: block; height: 100%; background: var(--copper); }

.band-copy .kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.19em; text-transform: uppercase; color: var(--aqua); }
.band-copy h2 {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
}
.band-copy .body { max-width: 680px; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.8; color: rgb(255 255 255 / 68%); }
.band-copy .pull {
  max-width: 680px;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--copper);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.8;
  color: rgb(255 255 255 / 92%);
}

/* Framework */
.framework { background: var(--mist-cool); }
.framework::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(22 125 127 / 5%), transparent 28%),
    radial-gradient(circle at 88% 18%, rgb(182 106 60 / 10%), transparent 22%);
}
.framework-watermark {
  position: absolute;
  right: -0.02em; top: 0.08em;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgb(16 42 67 / 3.5%);
  white-space: nowrap;
  pointer-events: none;
}
.framework-head { position: relative; display: grid; gap: 1.5rem; }
.framework-head h2 {
  max-width: 550px;
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.framework-head .lede { max-width: 650px; }

/* The framework, animated: a wide, dark card between the heading and the list. */
.framework-video {
  position: relative;
  margin: 3rem 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  background: var(--navy-darkest);
  box-shadow: 0 30px 70px rgb(16 42 67 / 22%);
}
.framework-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.framework-video-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(7 27 43 / 72%);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 700 .78rem/1 var(--font-body);
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease;
}
.framework-video-toggle[hidden] { display: none; }
.framework-video-toggle:hover { background: rgb(7 27 43 / 88%); border-color: rgb(91 192 190 / 55%); }
.framework-video-toggle:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.framework-video-toggle .icon { width: .9rem; height: .9rem; }
/* On a phone the button is a small round one in the top corner, clear of the
   words along the bottom. Its label stays for screen readers. */
@media (max-width: 640px) {
  .framework-video { margin-top: 2rem; border-radius: 1rem; }
  .framework-video-toggle { top: .6rem; right: .6rem; bottom: auto; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; }
  .framework-video-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .framework-video-toggle { transition: none; }
}

.framework-list { position: relative; margin-top: 3.5rem; border-top: 1px solid rgb(16 42 67 / 18%); }

.framework-row {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border-line);
  transition: background 320ms ease;
}
.framework-row:hover { background: linear-gradient(90deg, rgb(91 192 190 / 7%), transparent 72%); }
.framework-row .letter {
  font-family: var(--font-heading);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(22 125 127 / 75%);
  transition: transform 420ms var(--ease-out), color 320ms ease;
}
.framework-row:hover .letter { transform: translateX(8px); color: var(--copper); }
.framework-row h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--navy);
}
.framework-row p { max-width: 720px; font-size: 0.875rem; line-height: 1.6; color: rgb(23 43 58 / 60%); }
.framework-row .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgb(16 42 67 / 12%);
  color: var(--copper);
  transition: background 320ms ease, color 320ms ease, border-color 320ms ease;
}
.framework-row:hover .badge { border-color: var(--teal); background: var(--teal); color: #fff; }

/* Outcomes */
.profile-band { background: var(--navy-deep); color: #fff; }
.profile-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px),
    radial-gradient(circle at 22% 26%, rgb(91 192 190 / 13%), transparent 24%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
.profile-network {
  position: absolute;
  right: 4%; top: 8%;
  width: 36%; height: 84%;
  border: 1px solid rgb(91 192 190 / 13%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-spin 42s linear infinite;
}
.profile-network::before, .profile-network::after {
  content: '';
  position: absolute;
  inset: 16%;
  border: 1px solid rgb(182 106 60 / 12%);
  border-radius: 50%;
}
.profile-network::after { inset: 34%; border-color: rgb(91 192 190 / 16%); }
.profile-network span {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 18px rgb(91 192 190 / 50%);
}
.profile-network span:nth-child(1) { left: 8%; top: 25%; }
.profile-network span:nth-child(2) { right: 12%; top: 18%; background: var(--copper); }
.profile-network span:nth-child(3) { left: 20%; bottom: 12%; background: var(--copper); }
.profile-network span:nth-child(4) { right: 2%; bottom: 34%; }
.profile-network span:nth-child(5) { left: 49%; top: -4px; }

.profile-inner { position: relative; display: grid; gap: 3rem; max-width: 1200px; margin-inline: auto; }
.profile-inner h2 {
  margin-top: 1.5rem;
  font-size: clamp(2.25rem, 5vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
}
.profile-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgb(91 192 190 / 35%);
  color: var(--aqua);
}
.outcome-list { display: grid; border-top: 1px solid rgb(255 255 255 / 15%); }
.outcome-row { padding: 1.5rem; border-bottom: 1px solid rgb(255 255 255 / 15%); transition: background 240ms ease; }
.outcome-row:hover { background: rgb(91 192 190 / 6%); }
.outcome-row .num { font-family: var(--font-heading); font-size: 2.25rem; color: var(--copper); }
.outcome-row h3 {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
}
.outcome-row p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: rgb(255 255 255 / 56%); }

/* About */
.about { background: var(--sand); }
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 72%, rgb(22 125 127 / 7%) 72% 72.1%, transparent 72.1%),
    radial-gradient(circle at 82% 68%, rgb(182 106 60 / 13%), transparent 25%);
}
.about-watermark {
  position: absolute;
  left: -0.03em; bottom: -0.08em;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: rgb(16 42 67 / 4.5%);
  white-space: nowrap;
  pointer-events: none;
}
.about-inner { position: relative; display: grid; align-items: center; gap: 3rem; max-width: 1200px; margin-inline: auto; }
.about-figure { position: relative; border-left: 4px solid var(--copper); }
.about-figure img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; box-shadow: 0 25px 60px rgb(16 42 67 / 18%); }
.about-figure figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 1rem;
  background: var(--navy);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
}
.about-copy .role { margin-top: 1rem; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); }
.about-copy h2 {
  margin-top: 1rem;
  letter-spacing: -0.035em;
}
.about-copy p.body { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.8; color: rgb(23 43 58 / 70%); }
.about-quote {
  margin-top: 2rem;
  padding: 1.5rem;
  border-block: 1px solid rgb(16 42 67 / 12%);
  border-left: 4px solid var(--copper);
  background: rgb(255 255 255 / 65%);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--navy);
}

/* Work with us */
.work { background: var(--navy); color: #fff; scroll-margin-top: 6rem; }
.work .dark-grid { opacity: 0.35; }
.work-inner { position: relative; z-index: 1; }
.work h2 {
  max-width: 660px;
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #fff;
}
.work-grid { display: grid; gap: 0.75rem; margin-top: 2.75rem; }
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 5.5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  transition: transform 640ms var(--ease-out), border-color 420ms ease,
              background-color 420ms ease, box-shadow 640ms var(--ease-out);
}
.work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(91 192 190 / 8%), transparent 42%, rgb(182 106 60 / 8%));
  opacity: 0;
  transition: opacity 500ms ease;
}
.work-card:hover {
  transform: translateY(-7px);
  border-color: rgb(91 192 190 / 28%);
  background: rgb(255 255 255 / 8%);
  box-shadow: 0 24px 50px rgb(4 16 26 / 24%), inset 0 1px 0 rgb(255 255 255 / 8%);
}
.work-card:hover::before { opacity: 1; }
.work-card .tier { font-size: 9px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--aqua); }
.work-card h3 { margin-top: 1rem; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.work-card p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.6; color: rgb(255 255 255 / 58%); }
.work-card .price {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--copper);
}
.work-card-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--aqua);
}
.work-card-ask .icon { transition: transform 440ms var(--ease-out); }
.work-card-ask:hover .icon, .work-card-ask:focus-visible .icon { transform: translateX(3px); }
.work-footnote {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
}
.work-footnote p { max-width: 700px; font-size: 0.875rem; line-height: 1.6; color: rgb(255 255 255 / 52%); }

/* FAQ page --------------------------------------------------------------- */
.faq-section { background: var(--warm-white); }
.faq-body { max-width: 800px; }

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  margin-bottom: 3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}
.faq-jump a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-jump a:hover { color: var(--teal-dark); }

.faq-group { scroll-margin-top: 6rem; }
.faq-group + .faq-group { margin-top: 3.5rem; }
.faq-group > h2 {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-line);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15;
}

/* Each question is a native <details>, so the accordion needs no JavaScript
   and keeps keyboard and screen-reader behaviour for free. Answers stay in
   the DOM while collapsed, so they are still indexed and still match the
   FAQPage schema. */
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item summary {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.125rem 0;
  cursor: pointer;
  list-style: none; /* Firefox */
}
.faq-item summary::-webkit-details-marker { display: none; } /* Safari */
.faq-item summary:hover h3 { color: var(--teal); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 0.25rem;
}
.faq-item h3 {
  display: inline;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--navy);
  transition: color 200ms ease;
}
.faq-marker {
  flex: none;
  display: inline-flex;
  color: var(--copper);
  transition: transform 300ms var(--ease-out);
}
/* The plus becomes a close mark rather than swapping icons. */
.faq-item[open] .faq-marker { transform: rotate(45deg); }
.faq-item[open] h3 { color: var(--teal); }
.faq-item p {
  margin: 0;
  padding: 0 0 1.5rem;
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgb(23 43 58 / 74%);
}
.faq-item a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.faq-item a:hover { color: var(--teal-dark); }

/* Reuses the article table styles, which live under .prose. */
.faq-table { margin-top: 2.5rem; }
.faq-table table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.95rem; }
.faq-table th, .faq-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.faq-table th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom-color: var(--border-line);
}
.faq-table td { vertical-align: top; color: rgb(23 43 58 / 74%); }

.faq-cta {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  margin-top: 4rem;
  padding: 2.25rem;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--copper);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 14px 34px rgb(16 42 67 / 5%);
}
.faq-cta-title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--navy);
}
.faq-cta p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.65; color: rgb(23 43 58 / 66%); }

/* Final decision */
.decision {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(120deg, #167d7f 0%, #126b70 48%, #102a43 100%);
  scroll-margin-top: 6rem;
}
.decision::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to right, black, transparent 76%);
}
.decision-rings {
  position: absolute;
  right: -8%; top: 50%;
  width: 520px; height: 520px;
  transform: translateY(-50%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  pointer-events: none;
}
.decision-rings::before, .decision-rings::after {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px solid rgb(91 192 190 / 22%);
  border-radius: 50%;
}
.decision-rings::after { inset: 31%; border-color: rgb(182 106 60 / 28%); }
.decision-rings span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); }
.decision-rings span:nth-child(1) { left: 12%; top: 23%; }
.decision-rings span:nth-child(2) { right: 2%; top: 48%; background: var(--aqua); }
.decision-rings span:nth-child(3) { left: 38%; bottom: 2%; }

.decision-inner { position: relative; display: grid; align-items: center; gap: 2.5rem; max-width: 1200px; margin-inline: auto; }
.decision-inner h2 {
  max-width: 720px;
  margin-top: 1.25rem;
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  letter-spacing: -0.04em;
  color: #fff;
}
.decision-inner h2 span { color: var(--copper-pale); }
.decision-panel {
  position: relative;
  padding: 1.75rem;
  border: 1px solid rgb(255 255 255 / 22%);
  background: rgb(16 42 67 / 24%);
  backdrop-filter: blur(6px);
  box-shadow: 24px 24px 0 rgb(7 27 43 / 16%);
}
.decision-panel::before { content: ''; position: absolute; left: -1px; top: -1px; width: 5rem; height: 4px; background: var(--copper); }
.decision-panel .statement { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.5; color: #fff; }
.decision-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* 9. Audit --------------------------------------------------------------- */
.audit-section { background: var(--mint); scroll-margin-top: 6rem; }
.audit-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(22 125 127 / 12%) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to right, black, transparent 38%, transparent 62%, black);
}
.audit-glow { position: absolute; border-radius: 999px; filter: blur(2px); opacity: 0.7; pointer-events: none; }
.audit-glow-one { left: -130px; top: 15%; width: 280px; height: 280px; background: rgb(91 192 190 / 16%); animation: glow-drift 9s ease-in-out infinite; }
.audit-glow-two { right: -160px; bottom: 10%; width: 340px; height: 340px; background: rgb(182 106 60 / 12%); animation: glow-drift 11s ease-in-out 1.4s infinite reverse; }

.audit-head { position: relative; margin-bottom: 2.5rem; text-align: center; }
.audit-head h2 {
  max-width: 820px;
  margin: 1rem auto 0;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.audit-head p { max-width: 720px; margin: 1.25rem auto 0; }

.audit-shell { position: relative; isolation: isolate; scroll-margin-top: 7rem; }

.audit-intro {
  padding: 1.75rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 1.75rem;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 30px 70px rgb(7 24 38 / 22%);
}
.audit-intro-grid { display: grid; align-items: center; gap: 2.5rem; }
.audit-intro h3 { max-width: 680px; margin-top: 1rem; font-size: 2rem; line-height: 1.2; color: #fff; }
.audit-intro p.body { max-width: 680px; margin-top: 1.25rem; font-size: 1rem; line-height: 1.75; color: rgb(255 255 255 / 70%); }
.audit-benefits { padding: 1.5rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1.25rem; background: rgb(255 255 255 / 7%); }
.audit-benefits > p { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 45%); }
.audit-benefits ul { display: grid; gap: 1rem; margin-top: 1.25rem; }
.audit-benefits li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255 255 255 / 82%); }
.audit-benefits li .icon { margin-top: 0.15rem; color: var(--aqua); }
.audit-benefits .note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 48%);
}

.audit-flow {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 25px 70px rgb(16 42 67 / 12%);
}
/* minmax(0, 1fr) rather than a bare column: without it the column takes its
   width from the widest child's minimum, and the five progress chips push it
   past the container, clipping the questions on a 320px screen. */
.audit-layout { display: grid; grid-template-columns: minmax(0, 1fr); }

.audit-aside, .audit-main { min-width: 0; }

.audit-aside { padding: 1.25rem; border-bottom: 1px solid var(--border-soft); background: var(--navy); color: #fff; }
.audit-aside > p { font-size: 10px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--aqua); }
.audit-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin-top: 1rem; }
.audit-step-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.4rem 0.25rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 55%);
  transition: background 300ms ease, color 300ms ease;
}
.audit-step-chip .dot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 50%);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
}
.audit-step-chip .label { display: none; font-weight: 600; }
.audit-step-chip.is-complete .dot { background: rgb(91 192 190 / 20%); color: var(--aqua); }
.audit-step-chip.is-current { background: #fff; color: var(--navy); box-shadow: 0 6px 14px rgb(0 0 0 / 14%); }
.audit-step-chip.is-current .dot { background: var(--teal); color: #fff; }
.audit-aside-note {
  display: none;
  margin-top: 1.25rem;
  padding: 0.75rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 5%);
  line-height: 1.5;
}

.audit-main { padding: 1.25rem; }

.audit-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.audit-progress-label { font-weight: 800; color: var(--teal); }
.audit-progress-count { margin-left: auto; font-weight: 600; color: rgb(16 42 67 / 50%); }
.audit-progress-track { width: 100%; height: 6px; margin-top: 0.65rem; overflow: hidden; border-radius: 999px; background: rgb(16 42 67 / 8%); }
.audit-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--aqua)); transition: width 520ms var(--ease-out); }

.audit-prompt { margin-top: 1.75rem; max-width: 760px; font-size: 1.75rem; line-height: 1.2; }
.audit-prompt-note { margin-top: 0.75rem; line-height: 1.6; }

.question-list { display: grid; gap: 1rem; margin-top: 1.75rem; }

.question-card {
  padding: 1rem;
  border: 1px solid rgb(16 42 67 / 9%);
  border-radius: 1rem;
  background: var(--warm-white);
  transition: border-color 360ms ease, box-shadow 480ms var(--ease-out);
}
.question-card:focus-within { border-color: rgb(22 125 127 / 38%); box-shadow: 0 12px 35px rgb(16 42 67 / 7%); }
.question-text { font-weight: 600; color: var(--navy); }
.question-text .n { margin-right: 0.5rem; color: var(--copper); }

.scale-hint {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgb(16 42 67 / 38%);
}

.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin-top: 0.5rem; }
.scale input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scale label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48px keeps the tap target comfortably above the 44px guideline even if
     the browser's root font size is below 16px. */
  padding: 0.6rem 0.35rem;
  border: 1px solid rgb(16 42 67 / 10%);
  border-radius: 0.75rem;
  background: #fff;
  color: rgb(23 43 58 / 65%);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 420ms var(--ease-out), border-color 320ms ease,
              background-color 320ms ease, color 320ms ease, box-shadow 420ms var(--ease-out);
}
.scale label:hover { transform: translateY(-2px); border-color: rgb(22 125 127 / 45%); }
.scale label .scale-word { display: none; }
.scale input:checked + label {
  border-color: var(--teal-dark);
  background: var(--teal);
  color: #fff;
  /* The inner ring reads as "chosen" even for someone who cannot rely on the
     colour change alone. */
  box-shadow: 0 8px 18px rgb(22 125 127 / 20%), inset 0 0 0 2px rgb(255 255 255 / 45%);
  font-weight: 800;
  animation: choice-pop 380ms var(--ease-out);
}

/* A tick alongside the wording, where there is room for it. */
.scale input:checked + label .scale-word::before {
  content: '✓ ';
  font-weight: 800;
}

.scale input:focus-visible + label {
  border-color: var(--teal);
}

.audit-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(16 42 67 / 8%);
}

.audit-results {
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 25px 70px rgb(16 42 67 / 12%);
  scroll-margin-top: 7rem;
}
.results-head { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-soft); }
.results-head .eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--teal); letter-spacing: 0.18em; }
.results-head h3 { margin-top: 0.75rem; font-size: 2rem; }

.results-scores {
  display: grid;
  margin-top: 1.75rem;
  padding: 0.75rem;
  border: 1px solid rgb(16 42 67 / 8%);
  border-radius: 1rem;
  background: var(--warm-white);
}
.results-scores div { text-align: center; }
.results-scores .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin-inline: auto;
  border-radius: 999px;
  background: rgb(16 42 67 / 7%);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
}
.results-scores .badge.is-strength { background: var(--teal); color: #fff; }
.results-scores .badge.is-opportunity { background: var(--copper); color: #fff; }
.results-scores small {
  margin-top: 0.5rem;
  font-weight: 800;
}

.results-disclaimer {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--aqua);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgb(91 192 190 / 10%);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgb(23 43 58 / 72%);
}

.results-summary {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid rgb(22 125 127 / 18%);
  border-radius: 1rem;
  background: rgb(22 125 127 / 5.5%);
}
.results-summary h4 { margin-top: 0.5rem; font-size: 1.5rem; }
.results-summary p { max-width: 760px; margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: rgb(23 43 58 / 65%); }

.email-wall {
  /* The blurred teaser and the real card share one grid cell, so whichever is
     taller sets the height. Absolute positioning clipped the card on narrow
     screens, where it is much taller than the teaser behind it. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.6rem;
  background: var(--warm-white);
}
.email-wall > * { grid-area: 1 / 1; }
.email-wall-blur {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem;
  opacity: 0.3;
  filter: blur(2px);
}
.email-wall-blur > div { padding: 1.25rem; border: 1px solid var(--border-soft); border-radius: 1rem; background: #fff; }
.email-wall-blur p { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.email-wall-blur i { display: block; height: 8px; margin-top: 0.75rem; border-radius: 999px; background: rgb(16 42 67 / 12%); }

.email-wall-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(248 250 249 / 82%);
  backdrop-filter: blur(7px);
}
.email-card {
  width: 100%;
  padding: 1.5rem;
  border-radius: 1.5rem;
  text-align: center;
}
.email-card .lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  margin-inline: auto;
  border-radius: 999px;
  background: rgb(22 125 127 / 10%);
  color: var(--teal);
}
.email-card h4 { margin-top: 0.5rem; font-size: 1.35rem; }
.email-card > p { max-width: 500px; margin: 0.75rem auto 0; font-size: 0.875rem; line-height: 1.6; color: rgb(23 43 58 / 62%); }
.email-benefits {
  display: grid;
  gap: 0.5rem;
  max-width: 420px;
  margin: 1.25rem auto 0;
  text-align: left;
}
.email-benefits li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgb(23 43 58 / 78%);
}
.email-benefits .icon { flex: none; margin-top: 0.15rem; color: var(--teal); }

.email-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 520px; margin: 1.5rem auto 0; }
.email-form input[type='email'] {
  min-width: 0;
  flex: 1;
  height: 3.25rem;
  padding-inline: 1rem;
  border: 1px solid rgb(16 42 67 / 15%);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--navy);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.email-form input[type='email']:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgb(22 125 127 / 10%); }
.email-note { margin-top: 0.75rem; font-size: 0.72rem; line-height: 1.5; color: rgb(23 43 58 / 42%); }
.email-error { margin-top: 0.75rem; font-size: 0.78rem; font-weight: 600; color: var(--copper-dark); }

.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.plan-card { min-width: 0; padding: 1.5rem; border-radius: 1rem; }
.plan-card h5 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.plan-card p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; }
.plan-strength { background: rgb(22 125 127 / 8%); }
.plan-strength h5 { color: var(--teal); }
.plan-opportunity { background: rgb(182 106 60 / 9%); }
.plan-opportunity h5 { color: var(--copper-dark); }
.plan-challenge { background: var(--navy); color: #fff; }
.plan-challenge h5 { color: var(--aqua); }
.plan-challenge blockquote { margin-top: 0.75rem; font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.6; }
.plan-action { border: 1px solid var(--border-soft); background: var(--warm-white); }
.plan-action h5 { color: rgb(16 42 67 / 50%); }
.plan-action p { font-weight: 600; color: var(--navy); }

.dimension-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.25rem; }
.dimension { border: 1px solid var(--border-soft); border-radius: 1rem; background: var(--warm-white); }
.dimension[open] { background: #fff; }
.dimension summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 1.25rem;
  list-style: none;
  cursor: pointer;
}
.dimension summary::-webkit-details-marker { display: none; }
.dimension summary > span:first-child {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}
.dimension summary > span:first-child > span:last-child { min-width: 0; }
.dimension .key {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  background: rgb(22 125 127 / 10%);
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}
.dimension strong { display: block; color: var(--navy); }
.dimension .status { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }
.dimension .toggle { font-size: 1.5rem; color: var(--teal); transition: transform 500ms ease; }
.dimension[open] .toggle { transform: rotate(45deg); }
.dimension-body { display: grid; gap: 1.25rem; padding: 1.25rem 1.25rem 1.5rem; border-top: 1px solid rgb(16 42 67 / 8%); }
.dimension-body h5 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(16 42 67 / 45%);
}
.dimension-body p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: rgb(23 43 58 / 75%); }
.dimension-body .quote { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.6; color: var(--navy); }
.dimension-body .action { font-weight: 600; color: var(--navy); }

.results-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.results-foot p { max-width: 36rem; font-size: 0.875rem; line-height: 1.6; color: rgb(23 43 58 / 60%); }

.is-hidden { display: none !important; }

/* 10. Blog --------------------------------------------------------------- */
.page-header { position: relative; overflow: hidden; padding: 3.5rem 20px 3rem; background: var(--navy); color: #fff; }
.page-header .dark-grid { opacity: 0.5; }
.page-header-inner { position: relative; z-index: 1; }
.page-header h1 {
  max-width: 900px;
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
}
.page-header p.lede { max-width: 680px; margin-top: 1.25rem; color: rgb(255 255 255 / 68%); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 50%);
}
.breadcrumbs a:hover { color: var(--aqua); }

.blog-body { padding: 3.5rem 20px; background: var(--warm-white); }

.post-grid { display: grid; gap: 1.5rem; }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 12px 30px rgb(16 42 67 / 5%);
  transition: transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out), border-color 420ms ease;
}
.post-card:hover { transform: translateY(-5px); border-color: rgb(22 125 127 / 24%); box-shadow: 0 22px 45px rgb(16 42 67 / 10%); }
.post-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.post-card h2, .post-card h3 { margin-top: 0.75rem; font-size: 1.4rem; line-height: 1.25; }
.post-card .excerpt { margin-top: 0.75rem; line-height: 1.65; }
.post-card .link-arrow { margin-top: auto; padding-top: 1.25rem; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(16 42 67 / 50%);
}
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--copper); }
.post-meta-light { color: rgb(255 255 255 / 55%); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding-inline: 0.75rem;
  border: 1px solid rgb(22 125 127 / 25%);
  border-radius: 999px;
  background: rgb(22 125 127 / 7%);
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 260ms ease, color 260ms ease;
}
.tag:hover, .tag.is-active { background: var(--teal); color: #fff; }
.tag-light { border-color: rgb(255 255 255 / 25%); background: rgb(255 255 255 / 10%); color: rgb(255 255 255 / 78%); }
.tag-light:hover { background: var(--aqua); color: var(--navy); }

.article-layout { display: grid; gap: 3rem; }
/* Grid items default to min-content width, which lets a wide table push the
   whole article sideways. Zero lets the .table-scroll container do its job. */
.article-layout > * { min-width: 0; }

.prose { font-size: 1.05rem; color: rgb(23 43 58 / 82%); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.9rem; }
.prose h3 { margin-top: 2rem; font-size: 1.45rem; }
.prose h4 { margin-top: 1.75rem; font-size: 1.15rem; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--teal-dark); }
.prose strong { font-weight: 700; color: var(--navy); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote {
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--copper);
  background: rgb(233 225 215 / 55%);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--navy);
}
/* Pictures in the writing stay inside the text column, centred, and a tall
   one is held to a sensible height instead of running down the page. Width
   and height are both left automatic so the shape never distorts. */
.prose img {
  width: auto;
  max-width: 100%;
  max-height: min(80vh, 640px);
  margin-inline: auto;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgb(16 42 67 / 12%);
}
.prose hr { height: 1px; border: 0; background: var(--border-line); }
.prose code {
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: rgb(16 42 67 / 7%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.prose pre { padding: 1.25rem; overflow-x: auto; border-radius: 1rem; background: var(--navy); color: #e6f1f0; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose figure { margin-block: 2rem; text-align: center; }
.prose figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgb(23 43 58 / 55%);
}
.prose .table-scroll { overflow-x: auto; margin-block: 2rem; }
.prose table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.prose th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom-color: var(--border-line);
}
.prose td { vertical-align: top; }

/* Video embeds from the [youtube:] and [vimeo:] shortcodes. */
.embed {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--navy);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article-aside { display: grid; gap: 1.5rem; align-content: start; }
.aside-card { padding: 1.5rem; border: 1px solid var(--border-soft); border-radius: 1.25rem; background: #fff; }
.aside-card h3 { font-size: 1.15rem; }
.aside-card p { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.6; color: rgb(23 43 58 / 62%); }
.aside-card.is-dark { background: var(--navy); border-color: rgb(255 255 255 / 12%); }
.aside-card.is-dark h3 { color: #fff; }
.aside-card.is-dark p { color: rgb(255 255 255 / 62%); }
/* A post's sidebar: the shop's featured guide. */
.aside-featured-eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.aside-card.is-dark .aside-featured-eyebrow { margin-top: 0; color: var(--aqua); }
.aside-featured-media { display: block; margin-top: .9rem; overflow: hidden; border-radius: .75rem; background: rgb(255 255 255 / 6%); }
.aside-featured-media img { width: 100%; max-height: 220px; object-fit: contain; }
.aside-featured h3 { margin-top: .9rem; }
.aside-featured h3 a:hover { color: var(--aqua); }
.aside-card.is-dark .aside-featured-price { font-family: var(--font-heading); font-size: 1.25rem; color: var(--copper-light); }

.aside-list { display: grid; gap: 0.85rem; margin-top: 1rem; }
.aside-list a { font-size: 0.9rem; font-weight: 600; line-height: 1.45; color: var(--navy); }
.aside-list a:hover { color: var(--teal); }
.aside-list small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(16 42 67 / 45%);
}

.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}
.pagination a:hover { border-color: var(--teal); color: var(--teal); }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .is-disabled { opacity: 0.4; }

.empty-state { padding: 3rem 1.5rem; border: 1px dashed var(--border-line); border-radius: 1.25rem; background: #fff; text-align: center; }
.empty-state h2 { font-size: 1.5rem; }
.empty-state p { margin-top: 0.75rem; color: rgb(23 43 58 / 62%); }

.article-hero-image { margin-bottom: 2.5rem; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 22px 50px rgb(16 42 67 / 14%); }
.article-hero-image img { width: 100%; }

/* A resource's cover: about phone-width and centred over the description,
   rather than stretched across the column. The frame is exactly as wide as
   the text below it (.prose: 70ch at 1.05rem), so the two line up. The
   image's own width and height attributes hold its shape while it loads. */
.resource-cover { max-width: 70ch; margin: 0 0 2.5rem; font-size: 1.05rem; }
.resource-cover img {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  border-radius: 1rem;
  box-shadow: 0 22px 50px rgb(16 42 67 / 16%);
}

.article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 720px;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}

/* 11. Footer ------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 3rem 20px;
  border-top: 4px solid var(--copper);
  background: var(--navy-darkest);
  color: #fff;
  scroll-margin-top: 6rem;
}
.footer-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px),
    radial-gradient(circle at 83% 18%, rgb(91 192 190 / 12%), transparent 21%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  mask-image: linear-gradient(to right, black, transparent 60%, black);
}
.footer-inner { position: relative; z-index: 1; }
.footer-top { display: grid; align-items: center; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.footer-logo { display: flex; justify-content: center; }
.footer-logo img { width: 210px; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 24%)); }
.footer-statement { max-width: 430px; font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.7; color: rgb(255 255 255 / 70%); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 55%);
}
.footer-links a:hover { color: var(--aqua); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  padding-top: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 38%);
}
.footer-bottom .privacy { display: flex; align-items: center; gap: 0.5rem; }
.footer-bottom .privacy .icon { color: var(--aqua); }
.footer-bottom a:hover { color: var(--aqua); }

/* 12. Forms and notices -------------------------------------------------- */
.notice { padding: 0.9rem 1.1rem; border: 1px solid transparent; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.5; }
.notice-success { border-color: rgb(22 125 127 / 30%); background: rgb(22 125 127 / 8%); color: var(--teal-dark); }
.notice-error { border-color: rgb(182 106 60 / 35%); background: rgb(182 106 60 / 9%); color: var(--copper-dark); }
.notice-info { border-color: var(--border-line); background: rgb(16 42 67 / 4%); color: rgb(23 43 58 / 75%); }

.field { display: grid; gap: 0.45rem; }
.field label, .field .field-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(16 42 67 / 60%); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgb(16 42 67 / 15%);
  border-radius: 0.65rem;
  background: #fff;
  font-size: 0.95rem;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.field textarea {
  min-height: 320px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.7;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgb(22 125 127 / 10%);
}
.field .hint { font-size: 0.75rem; color: rgb(23 43 58 / 55%); }

.contact-form { display: grid; gap: 1.25rem; max-width: 620px; }
.contact-form textarea { min-height: 180px; font-family: var(--font-body); font-size: 0.95rem; }

/* 13. Animation ---------------------------------------------------------- */
.motion-ready [data-reveal] { opacity: 1; transform: none; }
.motion-ready [data-reveal].is-visible { animation: reveal-once 920ms var(--ease-out) both; }

.audit-step-enter, .results-enter { animation: audit-enter 720ms var(--ease-out) both; }
.unlock-enter { animation: unlock-enter 900ms var(--ease-out) both; }

@keyframes reveal-once {
  from { opacity: 0.56; transform: translateY(18px) scale(0.995); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stage-glint {
  0%, 58%, 100% { transform: translateX(-125%); }
  72% { transform: translateX(125%); }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(28px, -20px, 0) scale(1.08); }
}
@keyframes audit-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes unlock-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes choice-pop { 50% { transform: scale(1.035); } }

/* 14. Responsive --------------------------------------------------------- */
@media (min-width: 640px) {
  .section { padding: 5.5rem 32px; }
  .masthead { padding-inline: 32px; }
  .masthead-inner { min-height: 92px; }
  .brand { gap: 0.875rem; }
  .brand img { width: 66px; height: 66px; }
  .brand-name { font-size: 1.42rem; letter-spacing: 0.07em; }
  .brand-sub { font-size: 0.82rem; letter-spacing: 0.24em; }
  .brand-tag { display: block; }
  .hero { padding: 4.5rem 32px 0; }
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .hero-proof span:nth-child(2) { justify-content: center; border-inline: 1px solid rgb(255 255 255 / 10%); }
  .hero-proof span:nth-child(3) { justify-content: flex-end; }
  .page-header { padding: 4.5rem 32px 4rem; }
  .blog-body { padding: 4.5rem 32px; }
  .site-footer { padding: 4rem 32px; }
  .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome-row { min-height: 210px; padding: 2rem; }
  .outcome-row:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / 15%); }
  .scale label { min-height: 3.5rem; flex-direction: column; padding-inline: 0.75rem; }
  .scale label .scale-num { display: none; }
  .scale label .scale-word { display: block; }
  .scale-hint { display: none; }
  .audit-intro { padding: 2.5rem; }
  .audit-intro h3 { font-size: 2.5rem; }
  .audit-main { padding: 2rem; }
  .audit-results { padding: 2.25rem; }
  .audit-prompt { font-size: 2.25rem; }
  .audit-nav-status { display: block; }
  .results-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .results-head h3 { font-size: 2.75rem; }
  .results-scores { gap: 0.75rem; padding: 1rem; }
  .results-scores .badge { width: 2.75rem; height: 2.75rem; }
  .results-scores small { display: block; }
  .email-wall-blur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .email-wall-panel { padding: 2rem; }
  .email-card { padding: 2rem; }
  .email-card h4 { font-size: 1.75rem; }
  .email-form { flex-direction: row; }
  .dimension-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .work-footnote { flex-direction: row; align-items: center; justify-content: space-between; }
  .framework-row { grid-template-columns: 90px 170px 1fr 36px; gap: 1.75rem; padding-block: 1.75rem; }
  .decision-panel { padding: 2.25rem; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 5rem; }
  .hero-inner { gap: 2rem; }
  .hero-copy { padding-bottom: 6rem; }
  .hero-visual { min-height: 690px; }
  .nav-desktop { display: flex; }
  .header-actions { display: none; }
  .band-inner { grid-template-columns: 0.85fr 1.15fr; }
  .band-copy { padding-left: 2.5rem; }
  .framework-head { grid-template-columns: 0.82fr 1.18fr; gap: 5rem; }
  .framework-head > div:last-child { display: flex; align-items: flex-end; }
  .profile-inner { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; }
  .about-inner { grid-template-columns: 0.92fr 1.08fr; gap: 5rem; }
  .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .decision-inner { grid-template-columns: 1.08fr 0.92fr; gap: 5rem; }
  .faq-item p { padding-right: 3rem; }
  .faq-cta { grid-template-columns: 1fr auto; gap: 2.5rem; padding: 2.25rem 2.5rem; }
  .audit-intro-grid { grid-template-columns: 1fr 0.72fr; }
  .audit-layout { grid-template-columns: 215px minmax(0, 1fr); }
  .audit-aside { border-bottom: 0; border-right: 1px solid var(--border-soft); padding: 1.5rem; }
  .audit-steps { grid-template-columns: 1fr; gap: 0.375rem; }
  .audit-step-chip { justify-content: flex-start; padding: 0.5rem 0.6rem; }
  .audit-step-chip .label { display: block; }
  .audit-aside-note { display: block; }
  .audit-main { padding: 2.5rem; }
  .audit-results { padding: 3rem; }
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 4rem; }
  .footer-top { grid-template-columns: 250px 1fr auto; }
  .footer-logo { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .floating-cta { right: 14px; bottom: 14px; }
  .profile-stage { transform: none; }
  .band::after { display: none; }
  .decision-rings { display: none; }
  .profile-network { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}

/* 15. Print -------------------------------------------------------------- */
@media print {
  .masthead, .site-footer, .floating-cta, .scroll-progress,
  .no-print, .audit-nav, .results-foot { display: none !important; }
  body { background: #fff; }
  .audit-results { border: 0; box-shadow: none; padding: 0; }
  .section { padding: 0; }
  .faq-item:not([open]) > *:not(summary) { display: block !important; }
  .faq-marker, .faq-jump { display: none !important; }
}


/* 16. Clarity and reading comfort --------------------------------------- */
:root { --mist: #f2f6f8; --mint: #e7f2f3; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
section[id], .audit-prompt { scroll-margin-top: 8rem; }
.btn, .btn-sm, .btn-lg, .nav-cta {
  min-height: 3rem; height: auto; padding-block: .9rem;
  font-size: .875rem; line-height: 1.4; letter-spacing: .015em; text-transform: none;
}
.btn-copper { background: linear-gradient(135deg, #a35b34, #824423); }
.btn-copper:hover { background: #824423; }
.btn::before { display: none; }
.nav-link, .nav-mobile a { font-size: .875rem; letter-spacing: 0; text-transform: none; }
.nav-link { color: #405365; padding-inline: .85rem; }
.brand-sub { font-size: .875rem; color: #98532e; }
.brand-tag { font-size: .75rem; text-transform: none; letter-spacing: 0; color: #24676b; }
.brand img { width: 52px; height: 52px; }
.masthead-inner { min-height: 84px; }
.nav-mobile { max-height: calc(100dvh - 100px); overflow-y: auto; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #167d7f; outline-offset: 4px;
}
.hero a:focus-visible, .audit-intro button:focus-visible { outline-color: #75d9d3; }
.hero { padding-block: clamp(2.5rem, 5vw, 5rem); }
.hero-inner { align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hero-copy { padding-bottom: 0; }
.hero-title { font-size: clamp(2.7rem, 5.3vw, 4.9rem); line-height: 1.08; letter-spacing: -.035em; }
.hero-title em { color: #e5a278; }
.hero-kicker { font-size: .875rem; letter-spacing: .13em; margin-bottom: 1.35rem; }
.hero-text { border: 0; padding: 0; color: #d2e0e8; margin-top: 1.5rem; max-width: 48ch; }
.hero-actions { flex-wrap: wrap; margin-top: 1.75rem; }
.hero-secondary { font-size: .9375rem; color: #ecf4f7; text-transform: none; letter-spacing: 0; min-height: 44px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .875rem; color: #d2e0e8; letter-spacing: 0; text-transform: none; }
.hero-proof span:nth-child(n) { justify-content: flex-start; border: 0; }
.hero-visual { min-height: 0; border: 1px solid #375467; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 28px 65px #0004; }
.profile-stage { position: relative; inset: auto; height: clamp(19rem, 30vw, 27rem); border: 0; transform: none; }
.profile-stage img { object-position: 68% center; }
/* A light shade at the very bottom only, so it meets the caption without dimming the face. */
.profile-stage::before { background: linear-gradient(0deg, #071b2b80 0%, transparent 28%); }
.profile-stage::after { display: none; }
.stage-caption { position: relative; top: auto; left: auto; margin: 0; padding: 1.5rem; background: #0b2234; border: 0; font-size: .875rem; letter-spacing: .06em; color: #afc6d4; }
.stage-caption em { margin-top: .25rem; font: 2rem/1.2 var(--font-heading); text-transform: none; color: #fff; }
.stage-caption > span { display: block; margin-top: .6rem; font-size: .9375rem; text-transform: none; letter-spacing: 0; color: #d2e0e8; }
.stage-caption > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .5rem; text-transform: none; letter-spacing: 0; color: #83d8d3; }
/* A portrait photo (Work with me) needs a taller frame so the whole face shows. */
.hero-visual.is-portrait .profile-stage { width: 100%; height: auto; aspect-ratio: 1; max-height: 30rem; }
.hero-visual.is-portrait .profile-stage img { object-position: 50% 40%; }
/* Tablets: the photo beside the caption, rather than a short strip across the face. */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-visual { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; background: #0b2234; }
  .hero-visual .profile-stage, .hero-visual.is-portrait .profile-stage { height: auto; aspect-ratio: 4 / 5; max-height: none; }
}
.hero-kicker, .hero-title, .hero-text, .hero-actions, .hero-proof, .hero-visual { opacity: 1; animation: none; }
.hero-blob-a, .hero-blob-b { filter: none; opacity: .25; background: radial-gradient(ellipse, #358d90, transparent 70%); }
.step-grid { margin-top: 2rem; gap: 1rem; }
.step-card { background: #fff; color: var(--charcoal); border: 1px solid #d6e1e6; border-top: 3px solid #167d7f; box-shadow: 0 8px 24px #102a4308; }
.step-card h3 { color: var(--navy); font-size: 1.5rem; }
.step-card p { color: #435b6a; font-size: 1rem; }
.step-card .num { font-size: .875rem; color: #98532e; }
.step-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px #102a4310; }
.audit-expectation { margin-top: 1rem; font-size: .9375rem; line-height: 1.7; color: #cbdde7; }
.audit-aside-note, .audit-nav-status, .audit-prompt-note { color: #506373; font-size: .875rem; }
.audit-progress-label, .audit-progress-count { font-size: .875rem; letter-spacing: 0; text-transform: none; }
.question-text { font-size: 1.0625rem; line-height: 1.65; }
.scale label { min-height: 3.5rem; font-size: .875rem; }
.scale label .scale-word { font-size: .875rem; letter-spacing: 0; text-transform: none; }
.scale input:focus-visible + label { outline: 3px solid #167d7f; outline-offset: 3px; }
.audit-nav { flex-wrap: wrap; }
.audit-nav-status { display: block; }
.email-card > .email-note { font-size: .875rem; line-height: 1.75; color: #526676; }
.email-note a { text-decoration: underline; text-underline-offset: 3px; }
.email-wall-blur { display: none; }
.email-wall-panel { position: relative; padding: 0; }
.email-card { max-width: none; box-shadow: none; border: 1px solid #d4e1e7; background: #f3f7f9; }
.email-form input[type="email"] { font-size: 1rem; }
.email-form .btn { flex-shrink: 0; }
.results-scores { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; }
.results-scores small { display: block; font-size: .875rem; color: #40586b; letter-spacing: 0; text-transform: none; }
.about-copy h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.15; }
.about-links { display: flex; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-quote cite { display: block; margin-top: .75rem; font: .875rem/1.6 var(--font-body); color: #23656b; }
.case-note { margin-top: 1rem; font-size: .875rem; color: #b6cbd7; }
.hours-labels { flex-wrap: wrap; gap: .5rem; font-size: .875rem; }
.hours-counter .caption { font-size: .875rem; letter-spacing: 0; }
.post-card { border-top: 3px solid #167d7f; }
.post-card .excerpt { font-size: 1rem; color: #486070; }
.post-meta, .post-meta-light { font-size: .875rem; }
.post-meta a { text-decoration: underline; text-underline-offset: 4px; }
.author-note { display: flex; gap: 1.25rem; margin-top: 3rem; padding: 1.5rem; border-block: 1px solid #d4e1e7; background: #f2f6f8; }
.author-note img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; }
.author-note h2 { font-size: 1.4rem; }
.author-note p { margin-block: .5rem .75rem; font-size: 1rem; color: #486070; }
.prose { max-width: 70ch; line-height: 1.85; }
.prose h2, .prose h3 { line-height: 1.3; }
.footer-links a, .footer-bottom, .floating-cta small { font-size: .875rem; }
.footer-bottom { flex-wrap: wrap; gap: 1rem; }
.site-footer { padding-bottom: 6rem; }
.decision-inner h2 { line-height: 1.1; }
.decision-meta { font-size: .875rem; letter-spacing: 0; color: #d5e7e9; }
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.15fr 1fr; }
  .brand-tag { display: none; }
  .nav-mobile, .nav-mobile.is-open { display: none; }
}
@media (min-width: 1200px) { .brand-tag { display: block; } }
@media (max-width: 639px) {
  .hero-visual { max-width: 32rem; margin-inline: auto; }
  .hero-actions > a { width: 100%; }
  .hero-proof { flex-direction: column; gap: .6rem; }
  .audit-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .audit-nav-status { grid-column: 1 / -1; grid-row: 1; }
  .audit-nav .btn { padding-inline: .9rem; min-width: 0; }
  .scale { grid-template-columns: 1fr; gap: .5rem; }
  .scale label { flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: 44px; }
  .scale label .scale-word { display: inline; }
  .scale label .scale-num { display: inline; min-width: 1rem; }
  .scale-hint { display: none; }
  .author-note { flex-direction: column; }
  .email-form { flex-direction: column; }
  .results-head .eyebrow { letter-spacing: .04em; }
}
@media print {
  .audit-page main > section:not(.audit-section), .audit-head, .audit-glow,
  [data-email-wall], [data-subscribe-status] { display: none !important; }
  .audit-section { background: white; }
  .audit-results, .dimension { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   The resource store
   --------------------------------------------------------------------------- */
.resource-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgb(23 43 58 / 62%);
}
.resource-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.resource-price {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--copper);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
/* Free is the aqua accent, so a reader can tell the two apart down a whole
   column of cards without reading a single price. */
.resource-price.is-free { background: var(--teal); }
.post-meta-light .resource-price { color: #fff; }

.resource-card .post-card-body h2 { margin-top: .6rem; }
/* A cover in the store grid stays card-sized and is shown whole: a portrait
   cover cropped into a wide strip would lose its title. */
.resource-card .post-card-media { aspect-ratio: 4 / 3; padding: 1.25rem; }
.resource-card .post-card-media img { object-fit: contain; filter: drop-shadow(0 10px 18px rgb(16 42 67 / 18%)); }

.resource-get h2 { font-size: 1.35rem; margin: 0; }
.resource-get p { margin-top: .75rem; }

.resource-form { margin-top: 1.25rem; display: grid; gap: .75rem; }
.resource-form input[type="email"] {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  font: inherit;
  font-size: .95rem;
}
.resource-form input[type="email"]::placeholder { color: rgb(255 255 255 / 45%); }
.resource-form input[type="email"]:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
  background: rgb(255 255 255 / 12%);
}
.resource-form-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 62%);
}
.resource-form-note.is-error { color: var(--copper-pale); }
.resource-form-note:empty { display: none; }

@media (max-width: 720px) {
  .resource-get h2 { font-size: 1.2rem; }
}

/* -- The shop: category chips and Sort by ----------------------------------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.shop-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .4rem .55rem .4rem 1rem;
  border: 1px solid var(--border-line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.shop-chip:hover { border-color: var(--teal); color: var(--teal-dark); }
.shop-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.shop-chip.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.shop-chip-count {
  min-width: 1.5rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--mist-cool);
  color: rgb(23 43 58 / 62%);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shop-chip.is-active .shop-chip-count { background: var(--copper); color: #fff; }

.shop-sort { display: flex; flex: none; align-items: center; gap: .6rem; }
.shop-sort label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(23 43 58 / 55%);
}
.shop-sort select {
  min-height: 2.5rem;
  padding: .45rem 2rem .45rem .8rem;
  border: 1px solid var(--border-line);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.shop-sort select:hover { border-color: var(--teal); }
.shop-sort select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.shop-status { margin: 1.25rem 0 1.5rem; font-size: .88rem; color: rgb(23 43 58 / 62%); }

.shop .post-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.shop-empty { border-color: rgb(182 106 60 / 35%); }
.shop-empty strong { color: var(--copper-dark); }

.resource-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .85rem;
}
.tag-sm { padding: .15rem .5rem; font-size: .68rem; }

@media (max-width: 720px) {
  .shop-toolbar { flex-direction: column; align-items: stretch; gap: .9rem; }
  /* One row of chips that scrolls sideways, edge to edge, rather than a stack
     of them pushing the products down. The fade says there is more. */
  .shop-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -20px;
    /* The room on the right is wider than the fade, so the last chip comes
       clear of it once the row is scrolled to the end. */
    padding: .2rem 2.75rem .35rem 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  .shop-chips::-webkit-scrollbar { display: none; }
  .shop-chip { flex: none; }
  .shop-sort label { flex: none; }
  .shop-sort select { flex: 1 1 auto; min-width: 0; }
  .shop-status { margin: 1rem 0 1.25rem; }
}

/* ---------------------------------------------------------------------------
   The "What's inside" preview on a resource page
   A slow look through the pages chosen in the editor, and a viewer for
   reading one close up. See assets/js/resource-preview.js.
   --------------------------------------------------------------------------- */
/* Centred over the description rather than the whole column, like a cover:
   the frame is as wide as the text below it (.prose: 70ch at 1.05rem). */
.pdf-preview-frame { max-width: 70ch; margin: 0 0 2.5rem; font-size: 1.05rem; }
.pdf-preview { max-width: 26rem; margin: 0 auto; font-size: 1rem; }

.pdf-preview-stage { position: relative; aspect-ratio: var(--pdf-preview-ratio, 900 / 1165); }
.pdf-preview-stage.is-openable { cursor: zoom-in; touch-action: pan-y; }

.pdf-preview-cover,
.pdf-preview-slide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
  border-radius: 0.6rem;
  background: #fff;
  box-shadow: 0 22px 50px rgb(16 42 67 / 16%);
}

/* The plain list: what is shown with the script off. */
.pdf-preview-list { margin-top: 1.5rem; }
.pdf-preview-list ul { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.pdf-preview-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.pdf-preview-list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  transform: translateY(-2px);
}

/* Enhanced */
.pdf-preview.is-enhanced .pdf-preview-list,
.pdf-preview.is-enhanced .pdf-preview-cover { display: none; }

.pdf-preview-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition:
    opacity 600ms var(--ease-soft),
    transform 800ms var(--ease-out),
    visibility 0s linear 800ms;
}
.pdf-preview-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Leaving pages drift out one side; arriving pages come in from the other. */
.pdf-preview-slide.to-prev,
.pdf-preview-slide.from-prev { transform: translateX(-7%) rotate(-1.5deg); }
.pdf-preview-slide.to-next,
.pdf-preview-slide.from-next { transform: translateX(7%) rotate(1.5deg); }
.pdf-preview-slide.no-anim { transition: none; }

/* The closing fan of pages */
.pdf-preview-slide.is-stack img {
  position: absolute;
  top: 7%;
  left: 13%;
  width: 74%;
  transition: transform 900ms var(--ease-out) 150ms;
}
.pdf-preview-slide.is-stack.is-active img:nth-child(1) { transform: translate(-15%, 4%) rotate(-8deg); }
.pdf-preview-slide.is-stack.is-active img:nth-child(2) { transform: translate(14%, 2%) rotate(6deg); }
.pdf-preview-slide.is-stack.is-active img:nth-child(3) { transform: translateY(-2%) rotate(-1deg); }

.pdf-preview-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.pdf-preview.is-held .pdf-preview-badge { opacity: 1; }

.pdf-preview-caption {
  min-height: 1.6em;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--navy);
  text-wrap: balance;
}
.pdf-preview-caption.is-changing { animation: pdf-preview-caption 500ms var(--ease-out) both; }
@keyframes pdf-preview-caption {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.pdf-preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.pdf-preview-arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.pdf-preview-arrow:hover { color: var(--teal); border-color: rgb(22 125 127 / 40%); }
.pdf-preview-arrow .icon { width: 18px; height: 18px; }

.pdf-preview-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pdf-preview-dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pdf-preview-dot span {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(16 42 67 / 22%);
  transition: width 300ms var(--ease-out), background 300ms ease;
}
.pdf-preview-dot:hover span { background: rgb(16 42 67 / 40%); }
.pdf-preview-dot[aria-current='true'] { width: 40px; }
.pdf-preview-dot[aria-current='true'] span { width: 26px; background: rgb(16 42 67 / 14%); }
.pdf-preview-dot span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
}
/* The active dot's fill is the clock: when it ends, the next page comes up. */
.pdf-preview-dot.is-running span::after { animation: pdf-preview-fill var(--pdf-preview-ms, 3000ms) linear forwards; }
.pdf-preview.is-paused .pdf-preview-dot.is-running span::after { animation-play-state: paused; }
@keyframes pdf-preview-fill { to { transform: scaleX(1); } }

.pdf-preview-toggle {
  min-height: 44px;
  margin-left: 0.25rem;
  padding: 0 0.75rem;
  border: 0;
  background: none;
  color: var(--teal);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pdf-preview-toggle:hover { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }

/* The viewer: one chosen page, as large as the screen allows. */
.pdf-viewer {
  /* The reset zeroes every margin, and a dialog is centred by margin: auto. */
  margin: auto;
  width: min(100% - 1.5rem, 54rem);
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: var(--warm-white);
  color: var(--charcoal);
  box-shadow: 0 30px 80px rgb(7 27 43 / 40%);
}
.pdf-viewer::backdrop { background: rgb(7 27 43 / 78%); }
.pdf-viewer-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  max-height: calc(100dvh - 1.5rem);
  padding: 0.75rem 1rem 1rem;
}
.pdf-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pdf-viewer-count {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgb(23 43 58 / 62%);
  font-variant-numeric: tabular-nums;
}
.pdf-viewer-close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.pdf-viewer-close:hover { background: rgb(16 42 67 / 6%); }
.pdf-viewer-close .icon { width: 20px; height: 20px; }
.pdf-viewer-page { display: grid; place-items: center; min-height: 0; touch-action: pan-y pinch-zoom; }
.pdf-viewer-page img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 11rem);
  border: 1px solid var(--border-soft);
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 14px 34px rgb(16 42 67 / 14%);
}
.pdf-viewer-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pdf-viewer-caption {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: var(--navy);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .pdf-preview-slide, .pdf-preview-slide img, .pdf-preview-caption { transition: none; animation: none; }
}

@media print {
  .pdf-preview-controls, .pdf-preview-badge { display: none; }
}

/* ---------------------------------------------------------------------------
   Selling: the product page's buy area, the phone buy bar, and the home
   page's featured resource
   --------------------------------------------------------------------------- */

/* The buy box's price is a heading on navy; it was inheriting navy text. */
.aside-card.is-dark h2 { color: #fff; }

.resource-hero .eyebrow { margin-top: 1.5rem; }
.resource-hero-copy { min-width: 0; }

.resource-buy { margin-top: 1.75rem; }
.resource-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.resource-price-lg { padding: .5rem .95rem; font-size: 1rem; letter-spacing: .01em; }
.resource-buy .post-meta { margin-top: 1.1rem; }
.resource-buy .post-meta:empty { display: none; }

/* The action itself, wherever it sits. */
.resource-form.resource-action { margin: 0; }
.resource-get .resource-form.resource-action { margin-top: 1.25rem; }
.resource-buy .resource-unlock {
  display: flex;
  flex: 1 1 22rem;
  flex-wrap: wrap;
  gap: .6rem;
  max-width: 34rem;
}
.resource-buy .resource-unlock input[type="email"] { flex: 1 1 13rem; width: auto; }
.resource-buy .resource-unlock .resource-form-note { flex-basis: 100%; }
/* A remembered visitor's free download is one button, not a form. */
.resource-buy .resource-unlock.is-remembered { flex: 0 1 auto; }
.buy-bar .resource-form.resource-action { flex: none; }

/* "Remembered as da•••@gmail.com. Not you?" under a button that uses it. */
.remembered-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.remembered-note a:hover { color: var(--aqua); }
.resource-buy .remembered-note { margin-top: .75rem; }
.field .remembered-note { margin: 0; font-size: .95rem; color: rgb(23 43 58 / 78%); }
.field .remembered-note a:hover, .my-downloads .remembered-note a:hover { color: var(--teal); }

/* Under every Buy button: the refund line and where to ask a question. */
.resource-buy-notes {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
  margin: .85rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 72%);
}
.resource-buy-notes a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.resource-buy-notes a:hover { color: var(--aqua); }
.aside-card.is-dark .resource-buy-notes { flex-direction: column; margin-top: 1rem; font-size: .8rem; }

/* Beside the price: what a buyer can count on, each with a tick. */
.resource-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin-top: .9rem;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 86%);
}
.resource-assurances li { display: flex; align-items: center; gap: .4rem; }
.resource-assurances .icon { color: var(--aqua); }

/* An optional hero image beside the title, in place of the plain cover. */
.resource-hero-image { margin: 2.25rem 0 0; }
.resource-hero-image img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 30px 70px rgb(4 16 26 / 40%);
}

/* The optional "everything you get" picture, above "What's inside". */
.prose .resource-everything { margin: 2rem 0 1.5rem; }
.prose .resource-everything img { width: 100%; max-height: none; border-radius: 1rem; box-shadow: 0 18px 44px rgb(16 42 67 / 14%); }
.prose .resource-everything:first-child { margin-top: 0; }

@media (min-width: 1024px) {
  .resource-hero.has-image .resource-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 3.5rem;
    align-items: center;
  }
  .resource-hero.has-image .resource-hero-image { margin: 0; }
}

@media (max-width: 640px) {
  .resource-hero p.lede { font-size: 1rem; line-height: 1.65; }
  .resource-buy { margin-top: 1.4rem; }
}

/* The buy bar: phones and narrow tablets only, where the buy box is not
   beside the description. Shown by site.js once the top button scrolls away. */
.buy-bar { display: none; }
@media (max-width: 1023px) {
  .buy-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(255 255 255 / 12%);
    background: rgb(16 42 67 / 97%);
    box-shadow: 0 -14px 32px rgb(7 27 43 / 24%);
    transform: translateY(110%);
    transition: transform 380ms var(--ease-out);
  }
  .buy-bar.is-visible { transform: none; }
  .buy-bar .resource-price { flex: none; }
  .buy-bar-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: rgb(255 255 255 / 82%);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .buy-bar .btn { flex: none; min-height: 2.6rem; padding-block: .55rem; }
  body.has-buy-bar { padding-bottom: 4.25rem; }
}
/* On a phone the title has no room beside the price and a descriptive button,
   so the bar is just the two, and a long button label wraps rather than
   pushing off the screen. */
@media (max-width: 479px) {
  .buy-bar { justify-content: space-between; }
  .buy-bar-title { display: none; }
  .buy-bar .resource-action, .buy-bar .resource-form.resource-action { flex: 0 1 auto; min-width: 0; }
  .buy-bar .btn { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .buy-bar { transition: none; }
}

/* One floating button at a time: on a wide screen the header's own "Ask a question"
   button is always in view, so the floating one is for phones. */
@media (min-width: 1024px) {
  .floating-cta { display: none; }
}

/* The home page's featured resource, right after the top section. */
.featured-resource { background: var(--warm-white); }
.featured-inner { display: grid; gap: 2rem; align-items: center; }
.featured-media {
  display: block;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--navy);
  box-shadow: 0 26px 60px rgb(16 42 67 / 18%);
}
.featured-media img { width: 100%; height: auto; transition: transform 700ms var(--ease-out); }
.featured-media:hover img { transform: scale(1.02); }
.featured-copy h2 { margin-top: .85rem; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; }
.featured-copy h2 a { color: var(--navy); }
.featured-copy h2 a:hover { color: var(--teal-dark); }
.featured-summary { max-width: 34rem; margin-top: 1rem; font-size: 1.05rem; line-height: 1.7; color: rgb(23 43 58 / 72%); }
.featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(16 42 67 / 55%);
}
.featured-meta .resource-price { letter-spacing: .01em; text-transform: none; }
.featured-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--copper); }
.featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }

@media (min-width: 900px) {
  .featured-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; }
  .featured-inner.no-image { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
}

/* The store: a shorter header, so the products are on screen straight away. */
.page-header.store-header { padding-block: 2.5rem 2.25rem; }
.store-header h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.store-header p.lede { margin-top: .85rem; font-size: 1.05rem; }
.store-body { padding-top: 2.25rem; }

/* Every resource card is one link: the title's link stretches over the card.
   The media link stays for anyone who clicks the picture without a mouse. */
.resource-card { position: relative; cursor: pointer; }
.resource-card .resource-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.resource-card:focus-within { outline: 3px solid #167d7f; outline-offset: 3px; }
.resource-card .resource-card-link:focus-visible { outline: none; }
.resource-card:hover .resource-card-link { color: var(--teal-dark); }

/* The home page's shop and writing sections share a heading row. */
.home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.home-section-head .section-title { margin-top: .75rem; font-size: clamp(2rem, 4vw, 3rem); }
.home-shop { background: #fff; border-top: 1px solid var(--border-soft); }
.about-short .about-copy h2 { margin-top: 1rem; }

/* Reviews and the sold count: shown only when switched on per product. */
.review-stars { color: #e3a15f; letter-spacing: .08em; }
.resource-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin: 0 0 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: rgb(255 255 255 / 85%);
}
.resource-proof a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; }
.resource-proof a:hover .resource-proof-count { text-decoration: underline; text-underline-offset: 3px; }
.resource-proof-count { font-weight: 500; color: rgb(255 255 255 / 65%); }
.resource-proof-sold { padding: .2rem .65rem; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; }

.resource-reviews { max-width: 70ch; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-soft); scroll-margin-top: 7rem; }
.resource-reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.resource-reviews-head h2 { font-size: 1.9rem; color: var(--navy); }
.resource-reviews-head p { font-size: .95rem; color: rgb(23 43 58 / 70%); }
.resource-reviews-head .review-stars { color: var(--copper); }
.review-list { display: grid; gap: 1rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.review { padding: 1.25rem 1.4rem; border: 1px solid var(--border-soft); border-radius: 1rem; background: #fff; }
.review .review-stars { color: var(--copper); }
.review-text { margin-top: .6rem; font-size: 1rem; line-height: 1.7; color: rgb(23 43 58 / 85%); }
.review-by { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .85rem; font-size: .85rem; color: rgb(23 43 58 / 60%); }
.review-by strong { color: var(--navy); }
.review-verified { display: inline-flex; align-items: center; gap: .3rem; color: var(--teal-dark); font-weight: 600; }
.review-verified .icon { width: .9rem; height: .9rem; }

/* The star picker on the review form: five radio buttons, right to left so
   the stars up to the one chosen can light up together. */
.review-form fieldset.field { border: 0; padding: 0; margin: 0; }
.review-form legend { margin-bottom: .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(16 42 67 / 60%); }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: .2rem; justify-self: start; width: max-content; }
.rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-input label { font-size: 2.1rem; line-height: 1; color: rgb(16 42 67 / 22%); cursor: pointer; transition: color 160ms ease, transform 160ms ease; }
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: var(--copper); }
.rating-input input:focus-visible + label { outline: 3px solid #167d7f; outline-offset: 3px; border-radius: .25rem; }

/* The audit's unlock for a remembered visitor: the button alone, centred. */
.email-form[data-remembered] { align-items: center; justify-content: center; }

/* My downloads: everything a remembered visitor has had, ready again. */
.my-downloads .aside-card p a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.my-downloads-who { margin: 0; font-size: .95rem; color: rgb(23 43 58 / 70%); }
.my-downloads-card h2 { font-size: 1.2rem; margin: 0; }
.my-downloads-card p { font-size: .92rem; }
.my-downloads-list { display: grid; gap: .85rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.my-download {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  background: #fff;
}
.my-download-cover { flex: none; width: 4rem; height: 4rem; object-fit: contain; }
.my-download-body { flex: 1; min-width: 0; }
.my-download-body h2 { margin: .2rem 0 0; font-size: 1.1rem; line-height: 1.35; }
.my-download-body h2 a { color: var(--navy); }
.my-download-body h2 a:hover { color: var(--teal); }
.my-download-kind { margin: 0; font-size: .78rem; color: rgb(23 43 58 / 58%); }
.my-download .btn { flex: none; }
@media (max-width: 560px) {
  .my-download { flex-wrap: wrap; }
  .my-download .btn { width: 100%; }
}

/* 16. Sales --------------------------------------------------------------
   Only ever on screen while a sale is really on (or an editor previews one).
   Lora carries the sale figures; it is loaded only then. Every movement here
   is slow and small, and none of it happens with reduced motion asked for. */
:root { --font-sale: 'Lora', Georgia, 'Times New Roman', serif; }

/* The price: sale price large in copper, the old one struck through, and a
   "Save $5" pill. */
.sale-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; line-height: 1.1; }
.sale-price-now { font-family: var(--font-sale); font-weight: 600; letter-spacing: -.01em; color: var(--copper); }
.sale-price-was {
  position: relative;
  font-weight: 500;
  text-decoration: none;
  color: rgb(23 43 58 / 52%);
  white-space: nowrap;
}
/* A fine copper line, drawn in once, at a slight angle: a strikethrough
   that looks set by hand rather than by the browser. */
.sale-price-was::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 54%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--copper);
  transform: rotate(-6deg);
  transform-origin: left center;
  animation: sale-strike 700ms var(--ease-out) 250ms both;
}
@keyframes sale-strike { from { transform: rotate(-6deg) scaleX(0); } to { transform: rotate(-6deg) scaleX(1); } }

.save-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: .22rem .6rem;
  border: 1px solid rgb(22 125 127 / 28%);
  border-radius: 999px;
  background: rgb(22 125 127 / 10%);
  color: var(--teal-dark);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Sizes. On navy the copper is the lighter one, so it stays easy to read. */
.resource-card-sale + .resource-meta { margin-top: .4rem; }
.sale-price-sm .sale-price-now { font-size: 1.3rem; }
.sale-price-sm .sale-price-was { font-size: .82rem; }
.sale-price-sm .save-pill { font-size: .66rem; padding: .16rem .5rem; }

.sale-price-lg .sale-price-now { font-size: clamp(2rem, 4.5vw, 2.6rem); color: var(--copper-light); }
.sale-price-lg .sale-price-was { font-size: 1.05rem; color: rgb(255 255 255 / 62%); }
.sale-price-lg .sale-price-was::after { background: var(--copper-pale); }
.sale-price-lg .save-pill { border-color: rgb(91 192 190 / 35%); background: rgb(91 192 190 / 14%); color: var(--aqua); }

.sale-price-lg-light .sale-price-now { font-size: clamp(1.9rem, 3.6vw, 2.3rem); }
/* The featured resource's details are small capitals; its sale price is not. */
.featured-meta .sale-price, .featured-meta .save-pill { text-transform: none; letter-spacing: normal; }
.featured-meta .sale-price-now { letter-spacing: -.01em; }
.sale-price-lg-light .sale-price-was { font-size: 1rem; }

.sale-price-md .sale-price-now { font-size: 1.9rem; color: var(--copper-light); }
.sale-price-md .sale-price-was { font-size: .95rem; color: rgb(255 255 255 / 60%); }
.sale-price-md .sale-price-was::after { background: var(--copper-pale); }
.sale-price-md .save-pill { border-color: rgb(91 192 190 / 35%); background: rgb(91 192 190 / 14%); color: var(--aqua); }

.sale-price-bar { flex: none; flex-direction: column; align-items: flex-start; gap: 0; }
.sale-price-bar .sale-price-now { font-size: 1.15rem; color: var(--copper-light); }
.sale-price-bar .sale-price-was { font-size: .72rem; color: rgb(255 255 255 / 60%); }
.sale-price-bar .sale-price-was::after { background: var(--copper-pale); }

.resource-buy-row.is-on-sale { gap: 1rem 1.5rem; }
.resource-get h2 .sale-price { font-family: var(--font-body); }

/* The countdown to the sale's real end. */
.sale-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: 1rem;
  padding: .7rem .95rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  background: rgb(255 255 255 / 5%);
  color: rgb(255 255 255 / 78%);
  font-size: .82rem;
  max-width: 34rem;
}
.sale-countdown-label { font-weight: 700; letter-spacing: .02em; color: #fff; }
.sale-countdown-clock { display: inline-flex; gap: .45rem; }
.sale-countdown-unit { display: inline-flex; align-items: baseline; gap: .18rem; }
.sale-countdown-unit[hidden] { display: none; }
.sale-countdown-unit b {
  min-width: 2ch;
  font-family: var(--font-sale);
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--copper-pale);
  text-align: right;
}
.sale-countdown-unit small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgb(255 255 255 / 55%); }
.sale-countdown-when { flex-basis: 100%; font-size: .78rem; color: rgb(255 255 255 / 58%); }
.sale-countdown.is-over .sale-countdown-clock { display: none; }

/* The ribbon across a cover's corner in the shop. */
.resource-card .post-card-media, .featured-media { position: relative; }
.sale-ribbon {
  position: absolute;
  top: 1.15rem;
  left: -2.6rem;
  z-index: 1;
  width: 9.5rem;
  padding: .38rem 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--copper-light), var(--copper) 55%, var(--copper-dark));
  box-shadow: 0 6px 16px rgb(152 83 46 / 30%);
  color: #fff;
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1;
  text-align: center;
  text-indent: .24em;
  text-transform: uppercase;
  transform: rotate(-45deg);
}
/* A slow, faint sheen across the ribbon now and then. */
.sale-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 35%) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sale-sheen 6s ease-in-out 1.5s infinite;
}
.featured-media .sale-ribbon { top: 1.5rem; left: -2.4rem; font-size: .7rem; }

/* The banner across the top of the site. */
.sale-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--navy-darkest), var(--navy) 50%, var(--navy-darkest));
  color: rgb(255 255 255 / 86%);
}
.sale-banner[hidden] { display: none; }
.sale-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 212 185 / 13%) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: sale-sheen 8s ease-in-out 1s infinite;
  pointer-events: none;
}
.sale-banner::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--copper-light) 50%, var(--teal));
  opacity: .75;
}
@keyframes sale-sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.sale-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .5rem 16px;
}
.sale-banner p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  text-align: center;
}
.sale-banner-name {
  margin-right: .5rem;
  font-family: var(--font-sale);
  font-weight: 600;
  font-style: italic;
  color: var(--copper-pale);
}
.sale-banner-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .6rem;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgb(255 212 185 / 55%);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.sale-banner-link:hover { color: var(--copper-pale); }
.sale-banner-link .icon { width: .85rem; height: .85rem; transition: transform 300ms var(--ease-out); }
.sale-banner-link:hover .icon { transform: translateX(2px); }
.sale-banner-close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 70%);
  cursor: pointer;
}
.sale-banner-close:hover, .sale-banner-close:focus-visible { background: rgb(255 255 255 / 10%); color: #fff; }
.sale-banner-close:focus-visible { outline: 2px solid var(--aqua); outline-offset: 1px; }
.sale-banner-close .icon { width: 1rem; height: 1rem; }
.sale-banner.is-closing { animation: sale-banner-close 320ms var(--ease-out) forwards; }
@keyframes sale-banner-close { to { opacity: 0; margin-top: calc(-1 * var(--sale-banner-height, 3rem)); } }
@media (max-width: 640px) {
  .sale-banner p { font-size: .78rem; text-align: left; }
  .sale-banner-name { display: block; margin: 0; }
  .sale-banner-link { margin-left: 0; }
}

/* An editor's preview of a sale. */
.sale-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
  padding: .6rem 16px;
  background: var(--copper-pale);
  color: var(--copper-dark);
  font-size: .82rem;
  line-height: 1.5;
}
.sale-preview-bar p { margin: 0; }
.sale-preview-actions { display: flex; gap: 1rem; }
.sale-preview-actions a { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sale-price-was::after { animation: none; transform: rotate(-6deg); }
  .sale-ribbon::after, .sale-banner::before { animation: none; display: none; }
  .sale-banner.is-closing { animation: none; }
  .sale-banner-link .icon { transition: none; }
}

@media print {
  .sale-banner, .sale-preview-bar, .sale-countdown { display: none; }
}

/* 17. Add-ons -------------------------------------------------------------
   A second product offered beside the first, at a lower price together. A
   small, warm card under the buy box, and a box under Buy now: no pop-ups,
   nothing that moves on its own. */
.addon-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--sand);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #fffaf5, #fff);
  box-shadow: 0 14px 34px rgb(16 42 67 / 7%);
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.addon-card.is-selected {
  border-color: rgb(22 125 127 / 45%);
  box-shadow: 0 0 0 3px rgb(22 125 127 / 10%), 0 14px 34px rgb(16 42 67 / 8%);
}
.addon-card-media {
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: .6rem;
  background: var(--navy);
  box-shadow: 0 8px 18px rgb(16 42 67 / 18%);
}
.addon-card-media img { width: 100%; height: 100%; object-fit: cover; }
.addon-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--copper-pale); }
.addon-card-placeholder .icon { width: 1.5rem; height: 1.5rem; }
.addon-card-eyebrow {
  margin: 0;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.addon-card-title { margin: .3rem 0 0; font-family: var(--font-sale); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.addon-card-title a { color: var(--navy); }
.addon-card-title a:hover { color: var(--teal-dark); }
.addon-card-line { margin: .35rem 0 0; font-size: .82rem; line-height: 1.55; color: rgb(23 43 58 / 70%); }
.addon-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; margin: .6rem 0 0; font-size: .78rem; color: rgb(23 43 58 / 58%); }
.addon-card-price .sale-price-was { font-size: .9rem; }
.addon-card-price strong { font-family: var(--font-sale); font-size: 1.35rem; font-weight: 600; color: var(--copper); }
.addon-card-note { margin: .5rem 0 0; font-size: .74rem; color: var(--copper-dark); }

/* The box itself, here and under Buy now. */
.addon-toggle {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .75rem;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  cursor: pointer;
}
.addon-toggle input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .12rem;
  accent-color: var(--teal);
  cursor: pointer;
}
.addon-toggle input:disabled { cursor: not-allowed; }
.addon-toggle input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.addon-total { margin: .55rem 0 0; font-size: .84rem; color: rgb(23 43 58 / 70%); }
.addon-total[hidden] { display: none; }
.addon-total strong { font-family: var(--font-sale); font-size: 1.05rem; font-weight: 600; color: var(--copper); }

/* Under Buy now at the top of the page, on navy. */
.resource-buy .resource-form.has-addon { display: grid; justify-items: start; gap: 0; }
.resource-buy .has-addon .addon-toggle { max-width: 30rem; color: rgb(255 255 255 / 88%); }
.resource-buy .has-addon .addon-toggle input { accent-color: var(--aqua); }
.resource-buy .has-addon .addon-toggle input:focus-visible { outline-color: var(--aqua); }
.resource-buy .has-addon .addon-total { color: rgb(255 255 255 / 70%); }
.resource-buy .has-addon .addon-total strong { color: var(--copper-light); }

/* After paying for both: the second download, at the top of the page. */
.resource-also-bought { margin: .85rem 0 0; font-size: .9rem; color: rgb(255 255 255 / 72%); }
.resource-also-bought a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.resource-also-bought a:hover { color: var(--aqua); }
.resource-also-bought .icon { width: .95rem; height: .95rem; }
.resource-download-label { margin-top: 1.1rem !important; font-size: .78rem; font-weight: 700; color: rgb(255 255 255 / 82%); }

/* On the add-on's own page: what it goes with. */
.addon-pair { margin-top: 1rem; border-color: var(--sand); background: linear-gradient(180deg, #fffaf5, #fff); }
.addon-pair .addon-card-eyebrow { margin-top: 0; font-size: .64rem; color: var(--teal); }
.addon-pair h3 { margin-top: .35rem; font-size: 1.15rem; }
.addon-pair .link-arrow { font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  .addon-card { transition: none; }
}