/* ============================================================
   The Portugal Residency Blueprint — sales page
   Montserrat throughout. Premium, flat, editorial.
   ============================================================ */

:root {
  --ink: #14211c;
  /* Body copy sits only one step off full ink. Anything lighter stops being
     comfortable over the length of a page like this one. */
  --ink-soft: #27322c;
  --green: #0e3b2e;
  --green-mid: #1c5443;
  --green-pale: #eef3ef;
  /* Deep enough that the eyebrows, part numbers and "Included" tags clear
     4.5:1 on white, cream and brass-pale alike. The old brass sat at 3.9. */
  --brass: #8c5f2d;
  --brass-light: #c6965f;
  --brass-pale: #f8f1e7;
  --blue: #2c5b86;
  --blue-pale: #eef3f8;
  --clay: #9b4a32;
  --clay-pale: #fbf0ec;
  --cream: #faf7f1;
  --paper: #ffffff;
  --rule: #e4ddd2;
  --rule-soft: #f0ebe3;
  --muted: #6e6b64;

  --max: 1180px;
  /* 19px type over 700px lands near 68 characters a line. */
  --narrow: 700px;
  --radius: 3px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---------- layout ---------- */

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

.narrow {
  max-width: var(--narrow);
  margin-left: auto;
  margin-right: auto;
}

section {
  padding: 84px 0;
}

section.tight {
  padding: 56px 0;
}

.band-cream {
  background: var(--cream);
}

.band-green {
  background: var(--green);
  color: rgba(255, 255, 255, 0.91);
}

.band-pale {
  background: var(--green-pale);
}

.rule-top {
  border-top: 1px solid var(--rule);
}

/* ---------- typography ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--green);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(27px, 3.6vw, 41px);
  line-height: 1.12;
}

h3 {
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.2;
  font-weight: 700;
}

h4 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 700;
  color: var(--ink);
}

em {
  font-style: italic;
}

.band-green h1,
.band-green h2,
.band-green h3,
.band-green h4 {
  color: #fff;
}

.ty-hero h1,
.ty-hero h2,
.ty-hero h3,
.ty-hero h4 {
  color: var(--green);
}

.band-green strong {
  color: #fff;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 20px;
  line-height: 1.5;
}

.eyebrow-c {
  text-align: center;
}

.lede {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--green-mid);
}

.band-green .lede {
  color: rgba(255, 255, 255, 0.89);
}

.ty-hero .lede {
  color: var(--ink-soft);
}

.small {
  font-size: 15px;
  line-height: 1.6;
}

.tiny {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.center {
  text-align: center;
}

.hl {
  background: linear-gradient(
    to bottom,
    transparent 58%,
    rgba(169, 118, 60, 0.26) 58%
  );
  padding: 0 1px;
}

.u {
  border-bottom: 2px solid var(--brass);
  padding-bottom: 1px;
}

/* ---------- hero ---------- */

/* The hero used to be a slab of green with a tiled pattern running behind the
   headline. Nothing survives being read over an ornament, so the texture is
   gone and the type sits on paper at full contrast. Green now belongs to the
   band sections further down, where it breaks the page up instead of opening
   it. */
.hero {
  background: var(--cream);
  color: var(--ink);
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* A warm bloom behind the book only, well clear of the words. */
.hero::after {
  content: "";
  position: absolute;
  top: -14%;
  right: -8%;
  width: 54%;
  height: 128%;
  background: radial-gradient(
    ellipse at 60% 45%,
    rgba(169, 118, 60, 0.13),
    rgba(169, 118, 60, 0) 68%
  );
  pointer-events: none;
}

/* Vertical padding only. This element also carries .wrap, and the shorthand
   would zero out the gutter it supplies at widths below the max-width. */
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 76px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  color: var(--green);
  font-size: clamp(31px, 3.8vw, 49px);
}

.hero h1 .brass,
.ty-hero h1 .brass {
  color: var(--brass);
}

.hero-sub {
  margin-top: 26px;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.58;
  font-weight: 500;
  color: var(--ink-soft);
}

.hero-prehead {
  display: inline-block;
  border: 1px solid rgba(169, 118, 60, 0.32);
  background: var(--brass-pale);
  padding: 8px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
  line-height: 1.5;
}

.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  max-width: 620px;
}

.hero-bullets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}

.hero-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}

.hero-cta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-price {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.hero-price b {
  display: block;
  font-size: 19px;
  color: var(--green);
  font-weight: 700;
}

/* ---------- book mockup ---------- */

.book {
  position: relative;
  perspective: 1600px;
  width: 100%;
  max-width: 352px;
  margin-left: auto;
  margin-right: auto;
}

/* lifts the dark cover off the dark ground */
.book::before {
  content: "";
  position: absolute;
  left: -34%;
  right: -34%;
  top: -16%;
  bottom: -16%;
  background: radial-gradient(
    closest-side at 50% 50%,
    rgba(198, 150, 95, 0.3),
    rgba(198, 150, 95, 0)
  );
  pointer-events: none;
}

.book-inner {
  position: relative;
  transform: rotateY(-13deg) rotateX(2deg);
  transform-style: preserve-3d;
  box-shadow: -26px 30px 60px rgba(0, 0, 0, 0.5);
  outline: 1px solid rgba(255, 255, 255, 0.22);
}

.book-inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 4px 4px 2px;
}

/* page block on the fore edge */
.book-pages {
  position: absolute;
  top: 0.7%;
  bottom: 0.7%;
  right: -8px;
  width: 9px;
  z-index: 2;
  background: repeating-linear-gradient(
    to right,
    #e8e2d8 0 1px,
    #c2b9a9 1px 2px
  );
  box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.35);
}

.book-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.book-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 7px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 3;
}

.book-badge {
  position: absolute;
  right: -14px;
  bottom: 26px;
  z-index: 5;
  background: var(--brass);
  color: #fff;
  padding: 13px 17px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.book-badge b {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.book-badge span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--brass);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 19px 38px;
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: background 0.16s ease, transform 0.16s ease;
}

.btn:hover {
  background: #96682f;
  transform: translateY(-1px);
}

.btn-lg {
  font-size: 19px;
  padding: 23px 48px;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-green {
  background: var(--green);
}

.btn-green:hover {
  background: #0a2d23;
}

.btn-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- stat strip ---------- */

.strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip-grid > div {
  padding: 30px 26px;
  border-left: 1px solid var(--rule);
  text-align: center;
}

.strip-grid > div:first-child {
  border-left: none;
}

.strip-grid b {
  display: block;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--green);
  line-height: 1;
}

.strip-grid span {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- cards & boxes ---------- */

.box {
  border: 1px solid var(--rule);
  padding: 32px 34px;
  background: var(--paper);
}

.box-cream {
  background: var(--cream);
}

.box-pale {
  background: var(--green-pale);
  border-color: #d4e2da;
}

.box-blue {
  background: var(--blue-pale);
  border-color: #d6e3ee;
}

.box-warn {
  background: var(--clay-pale);
  border-color: #efd8d0;
}

.box-brass {
  background: var(--brass-pale);
  border-color: #ecdcc4;
}

.box-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 15px;
  line-height: 1.5;
}

.box-warn .box-label {
  color: var(--clay);
}

.box-blue .box-label {
  color: var(--blue);
}

.box-pale .box-label {
  color: var(--green-mid);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 46px;
}

/* ---------- lists ---------- */

ul.ticks,
ul.crosses,
ul.dashes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1em;
}

ul.ticks li,
ul.crosses li,
ul.dashes li {
  position: relative;
  padding-left: 31px;
  margin-bottom: 13px;
  line-height: 1.58;
}

ul.ticks li:last-child,
ul.crosses li:last-child,
ul.dashes li:last-child {
  margin-bottom: 0;
}

ul.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--green-mid);
  border-bottom: 2px solid var(--green-mid);
  transform: rotate(-45deg);
}

ul.crosses li::before {
  content: "\00D7";
  position: absolute;
  left: 3px;
  top: -3px;
  font-size: 23px;
  font-weight: 500;
  color: var(--clay);
}

ul.dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 15px;
  height: 2px;
  background: var(--brass);
}

.band-green ul.ticks li::before,
.ty-hero ul.ticks li::before {
  border-color: var(--brass);
}

/* ---------- what's inside ---------- */

.inside-part {
  border-top: 1px solid var(--rule);
  padding: 34px 0;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 36px;
}

.inside-part:last-child {
  border-bottom: 1px solid var(--rule);
}

.inside-part .pno {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.6;
}

.inside-part .pno b {
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}

.inside-part h4 {
  margin-bottom: 12px;
  font-size: 21px;
}

.inside-part ul {
  margin-bottom: 0;
  /* holds the line length near 70 characters on wide screens */
  max-width: 640px;
}

.inside-part ul li {
  font-size: 16.5px;
  line-height: 1.62;
  margin-bottom: 11px;
}

/* ---------- testimonials ---------- */

.quote {
  border-left: 3px solid var(--brass);
  padding: 4px 0 4px 28px;
}

.quote p {
  font-size: 19px;
  line-height: 1.62;
  font-weight: 500;
  color: var(--ink);
  font-style: italic;
}

.quote cite {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tcard {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
}

.tcard .tq {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 20px;
  flex: 1;
}

.tcard .tq b {
  font-weight: 700;
}

.tcard .tby {
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 600;
}

.tcard .tby b {
  display: block;
  color: var(--green);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}

.tcard .troute {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid #ecdcc4;
  background: var(--brass-pale);
  padding: 5px 11px;
}

/* ---------- story ---------- */

.story p {
  font-size: 18.5px;
}

.story .drop::first-letter {
  float: left;
  font-size: 68px;
  line-height: 0.82;
  font-weight: 800;
  color: var(--green);
  margin: 6px 12px 0 0;
}

/* ---------- price panel ---------- */

.price-panel {
  border: 2px solid var(--green);
  background: var(--paper);
  padding: 0;
  max-width: 660px;
  margin: 0 auto;
}

.price-head {
  background: var(--green);
  color: #fff;
  padding: 26px 34px;
  text-align: center;
}

.price-head .pt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 10px;
}

.price-head h3 {
  color: #fff;
  font-size: 25px;
}

.price-body {
  padding: 32px 34px 36px;
}

.price-rows {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.price-rows li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 16px;
  line-height: 1.45;
}

.price-rows li span:last-child {
  font-weight: 700;
  color: var(--brass);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.price-rows li.total {
  border-bottom: none;
  border-top: 2px solid var(--green);
  margin-top: 8px;
  padding-top: 16px;
  font-weight: 700;
  color: var(--green);
  font-size: 17px;
}

.price-rows li.total span:last-child {
  color: var(--clay);
  font-size: 17px;
  letter-spacing: -0.02em;
  text-transform: none;
}

.price-now {
  text-align: center;
  margin-bottom: 26px;
}

.price-now .was {
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}

.price-now .amt {
  display: block;
  font-size: 66px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--green);
  line-height: 1;
  margin: 6px 0 8px;
}

.price-now .amt sup {
  font-size: 30px;
  font-weight: 700;
  top: -22px;
  letter-spacing: 0;
}

.price-now .note {
  font-size: 14.5px;
  color: var(--muted);
  font-weight: 600;
}

.trust {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.trust span {
  position: relative;
  padding-left: 20px;
}

.trust span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--green-mid);
  border-bottom: 2px solid var(--green-mid);
  transform: rotate(-45deg);
}

/* ---------- spreads gallery ---------- */

.spreads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.spread figure {
  margin: 0;
}

.spread img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 754 / 1067;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(20, 33, 28, 0.1);
}

.spread figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
}

.spread figcaption b {
  display: block;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 3px;
}

.spread figcaption b {
  color: var(--green);
  display: block;
  font-size: 14.5px;
  margin-bottom: 3px;
}

/* ---------- faq ---------- */

.faq-item {
  border-top: 1px solid var(--rule);
  padding: 26px 0;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-item h4 {
  margin-bottom: 10px;
  font-size: 19.5px;
}

.faq-item p {
  font-size: 16.5px;
  margin-bottom: 0.8em;
}

/* ---------- author ---------- */

.author-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 54px;
  align-items: stretch;
}

.author-stats {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  padding: 34px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* equal bands so the panel fills the column instead of leaving a void */
.author-stats div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.author-stats div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.author-stats div:first-child {
  padding-top: 0;
}

.author-stats b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--brass-light);
  line-height: 1;
}

.author-stats span {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- footer ---------- */

footer {
  background: #0a2b21;
  color: rgba(255, 255, 255, 0.52);
  padding: 46px 0;
  font-size: 13.5px;
  line-height: 1.7;
}

footer a {
  color: rgba(255, 255, 255, 0.75);
}

footer .fgrid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

footer b {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

/* ---------- sticky bar ---------- */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--green);
  border-top: 2px solid var(--brass);
  transform: translateY(100%);
  transition: transform 0.26s ease;
}

.sticky.on {
  transform: translateY(0);
}

.sticky-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.sticky-txt {
  color: rgba(255, 255, 255, 0.89);
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 600;
}

.sticky-txt b {
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sticky .btn {
  padding: 14px 30px;
  font-size: 15.5px;
  white-space: nowrap;
}

/* ---------- thank you page ---------- */

/* Matches the sales page hero, so the funnel does not change character at the
   moment of purchase. */
.ty-hero {
  background: var(--cream);
  color: var(--ink);
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.ty-hero::after {
  content: "";
  position: absolute;
  top: -14%;
  right: -8%;
  width: 54%;
  height: 128%;
  background: radial-gradient(
    ellipse at 60% 45%,
    rgba(169, 118, 60, 0.13),
    rgba(169, 118, 60, 0) 68%
  );
  pointer-events: none;
}

.ty-check {
  width: 62px;
  height: 62px;
  border: 2px solid var(--brass);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.ty-check::after {
  content: "";
  width: 22px;
  height: 11px;
  border-left: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  transform: rotate(-45deg) translate(2px, -2px);
}

.dl-panel {
  border: 2px solid var(--green);
  background: var(--paper);
  padding: 0;
  max-width: 720px;
}

.dl-head {
  background: var(--green-pale);
  border-bottom: 1px solid #d4e2da;
  padding: 22px 30px;
}

.dl-body {
  padding: 28px 30px 32px;
}

.step-list {
  counter-reset: s;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-list > li {
  counter-increment: s;
  position: relative;
  padding-left: 54px;
  padding-bottom: 26px;
  border-left: 1px solid var(--rule);
  margin-left: 17px;
}

.step-list > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.step-list > li::before {
  content: counter(s);
  position: absolute;
  left: -17px;
  top: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-list h4 {
  margin-bottom: 7px;
}

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  body {
    font-size: 17px;
  }

  section {
    padding: 62px 0;
  }

  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-2-1,
  .author-grid,
  .spreads {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-grid {
    gap: 46px;
  }

  .book {
    max-width: 330px;
    margin: 0 auto;
  }

  .strip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .strip-grid > div:nth-child(3) {
    border-left: none;
  }

  .strip-grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }

  .inside-part {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .inside-part .pno b {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
    vertical-align: -3px;
  }

  .author-stats {
    padding: 24px 26px;
  }
}

@media (max-width: 620px) {
  .wrap {
    padding: 0 20px;
  }

  section {
    padding: 50px 0;
  }

  .box {
    padding: 24px 22px;
  }

  .btn,
  .btn-lg {
    width: 100%;
    padding: 18px 20px;
    font-size: 16.5px;
  }

  .hero-cta {
    gap: 16px;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .price-body,
  .price-head {
    padding-left: 22px;
    padding-right: 22px;
  }

  .price-now .amt {
    font-size: 54px;
  }

  .strip-grid {
    grid-template-columns: 1fr;
  }

  .strip-grid > div {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding: 22px;
  }

  .strip-grid > div:first-child {
    border-top: none;
  }

  .sticky-in {
    flex-direction: column;
    gap: 11px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .sticky-txt {
    text-align: center;
  }

  .sticky .btn {
    width: 100%;
  }

  .story .drop::first-letter {
    font-size: 54px;
  }

  .quote {
    padding-left: 20px;
  }
}

/* ============================================================
   LONG-FORM STORY COMPONENTS
   The page is read top to bottom in one sitting, so the narrative
   sections need their own furniture: chapter openers, scene breaks,
   full-bleed pull quotes and costed trap cards.
   ============================================================ */

.chap {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 0 0 30px;
}

.chap .cn {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
  padding-top: 4px;
}

.chap .cl {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.band-green .chap .cl {
  background: rgba(255, 255, 255, 0.18);
}

/* A scene break inside a story: three brass lozenges, centred. */
.scene {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 46px 0;
}

.scene span {
  width: 5px;
  height: 5px;
  background: var(--brass);
  transform: rotate(45deg);
  opacity: 0.55;
}

.story > p:first-of-type.dropcap::first-letter,
p.dropcap::first-letter {
  float: left;
  font-size: 68px;
  line-height: 0.82;
  font-weight: 800;
  color: var(--green);
  margin: 7px 13px 0 0;
}

/* A quote big enough to stop the eye and reset the rhythm. */
.pq {
  margin: 52px 0;
  padding: 0 0 0 30px;
  border-left: 4px solid var(--brass);
}

.pq p {
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.34;
  font-weight: 600;
  color: var(--green);
  margin: 0;
  letter-spacing: -0.012em;
}

.band-green .pq p {
  color: #fff;
}

.pq cite {
  display: block;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

.band-green .pq cite {
  color: var(--brass-light);
}

/* ---------- the costed traps ---------- */

.traps {
  display: grid;
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  margin-top: 44px;
}

.trap {
  display: grid;
  grid-template-columns: 64px 1fr 210px;
  gap: 30px;
  align-items: start;
  background: var(--paper);
  padding: 28px 30px;
}

.trap .tn {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--brass);
  opacity: 0.4;
  letter-spacing: -0.03em;
}

.trap h4 {
  margin: 0 0 9px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--green);
}

.trap p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
}

.trap .tcost {
  border-left: 2px solid var(--clay);
  padding-left: 18px;
}

.trap .tcost b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--clay);
  line-height: 1.25;
}

.trap .tcost span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- the two routes, side by side ---------- */

.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 44px;
}

.vs > div {
  background: var(--paper);
  padding: 34px 32px;
}

.vs > div.good {
  background: var(--green-pale);
}

.vs h4 {
  margin: 0 0 4px;
  font-size: 21px;
  color: var(--clay);
}

.vs > div.good h4 {
  color: var(--green);
}

.vs .vsub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}

.vs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 16.5px;
  line-height: 1.55;
}

.vs li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 13px;
  font-weight: 700;
  color: var(--clay);
}

.vs > div.good li::before {
  content: "✓";
  color: var(--green);
}

.vs .vtot {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  font-weight: 700;
  color: var(--clay);
}

.vs > div.good .vtot {
  border-top-color: rgba(14, 59, 46, 0.18);
  color: var(--green);
}

/* ---------- what is inside: the full chapter list ---------- */

.parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 46px;
}

.part {
  background: var(--paper);
  padding: 30px 30px 32px;
}

.part .pn {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
}

.part h4 {
  margin: 0 0 7px;
  font-size: 23px;
  color: var(--green);
  letter-spacing: -0.015em;
}

.part > p {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.part ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.part li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 16px;
  line-height: 1.45;
}

.part li b {
  font-weight: 700;
  color: var(--brass);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding-top: 3px;
}

.part li span {
  color: var(--ink);
  font-weight: 500;
}

.part li i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- testimonials ---------- */

.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 46px;
}

.tgrid .tcard.wide {
  grid-column: span 3;
}

.tcard .tinit {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.tcard .tby {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tcard .tname {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.tcard .trole {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

.tcard .tres {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

/* ---------- value stack ---------- */

.stackv {
  margin-top: 40px;
  border: 1px solid var(--rule);
}

.stackv .srow {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 24px;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid var(--rule-soft);
}

.stackv .srow:last-child {
  border-bottom: 0;
}

.stackv .srow b {
  display: block;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.35;
}

.stackv .srow span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.stackv .sval {
  text-align: right;
  font-size: 17px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}

.stackv .stot {
  background: var(--green-pale);
  font-weight: 700;
}

.stackv .stot b {
  font-size: 19px;
}

.stackv .stot .sval {
  font-size: 21px;
}

/* ---------- for / not for ---------- */

.fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 42px;
}

.fit > div {
  background: var(--paper);
  padding: 34px 32px;
}

.fit h4 {
  margin: 0 0 20px;
  font-size: 20px;
  color: var(--green);
}

.fit.on > div:last-child h4 {
  color: var(--clay);
}

.fit ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 15px;
  font-size: 16.5px;
  line-height: 1.55;
}

.fit li:last-child {
  margin-bottom: 0;
}

.fit li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--green);
}

.fit > div:last-child li::before {
  content: "✕";
  color: var(--clay);
}

/* ---------- a dated scene heading inside a story ---------- */

.when {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
}

@media (max-width: 900px) {
  .trap {
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 24px;
  }

  .trap .tcost {
    grid-column: 2;
    border-left: 0;
    border-top: 2px solid var(--clay);
    padding: 14px 0 0;
  }

  .vs,
  .parts,
  .fit {
    grid-template-columns: 1fr;
  }

  .tgrid {
    grid-template-columns: 1fr;
  }

  .tgrid .tcard.wide {
    grid-column: span 1;
  }

  .stackv .srow {
    grid-template-columns: 1fr 110px;
    padding: 18px 20px;
  }

  .pq {
    margin: 40px 0;
    padding-left: 22px;
  }

  p.dropcap::first-letter {
    font-size: 56px;
  }
}

/* A price row can carry a second line of detail, so the offer panel can be
   the single manifest of what you get rather than a summary of one. */
.price-rows li {
  align-items: start;
}

.price-rows li > span:first-child {
  flex: 1;
}

.price-rows li i {
  display: block;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 3px;
}

/* ============================================================
   PHOTOGRAPHY
   ============================================================ */

/* A full-bleed band. Any copy sitting on a photograph gets a scrim heavy
   enough that the type is read against flat colour, not against the picture. */
.shot {
  position: relative;
  overflow: hidden;
  background: var(--green);
}

.shot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.shot-band {
  height: 520px;
}

.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(14, 59, 46, 0.93) 0%,
    rgba(14, 59, 46, 0.86) 34%,
    rgba(14, 59, 46, 0.42) 68%,
    rgba(14, 59, 46, 0.16) 100%
  );
}

.shot-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shot-inner .eyebrow {
  color: var(--brass-light);
}

.shot-inner h2 {
  color: #fff;
  max-width: 17em;
  font-size: clamp(26px, 3vw, 38px);
}

.shot-inner p {
  color: rgba(255, 255, 255, 0.93);
  max-width: 34em;
  margin-top: 18px;
  font-size: 18px;
}

/* An editorial figure inside running copy. Caption below, never over. */
figure.fig {
  margin: 40px 0;
}

figure.fig img {
  display: block;
  width: 100%;
  height: auto;
}

figure.fig figcaption {
  margin-top: 14px;
  padding-left: 16px;
  border-left: 2px solid var(--brass);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* The three places people actually land. */
.places {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 46px;
}

.place figure {
  margin: 0;
}

.place img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.place h3 {
  margin: 20px 0 0;
  font-size: 21px;
  color: var(--green);
}

.place .pmeta {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.place p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .places {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .shot-band {
    height: auto;
    min-height: 420px;
  }

  /* Only the vertical padding, or this overrides the horizontal padding that
     .wrap is supplying and the copy runs into the edge of the screen. */
  .shot-inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .shot::before {
    background: linear-gradient(
      180deg,
      rgba(14, 59, 46, 0.9) 0%,
      rgba(14, 59, 46, 0.88) 60%,
      rgba(14, 59, 46, 0.78) 100%
    );
  }
}

/* A photograph behind a whole section of centred copy. The scrim is close to
   uniform here, because unlike the band there is no safe column to hide in. */
.shot-cover::before {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(14, 59, 46, 0.84) 0%,
      rgba(14, 59, 46, 0.93) 100%
    );
}

.shot-cover > .wrap {
  position: relative;
  z-index: 2;
}

/* Brass at full strength is only 3.2:1 on the dark green, which is under the
   threshold for labels at this size. The lighter brass clears it. */
.band-green .eyebrow,
.shot .eyebrow,
.band-green .chap .cn,
.shot .chap .cn {
  color: var(--brass-light);
}

/* Every .box variant has a light background, so one dropped into a dark band
   must stop inheriting the band's white text or it disappears entirely. */
.band-green .box,
.shot .box {
  color: var(--ink);
}

.band-green .box h1,
.band-green .box h2,
.band-green .box h3,
.band-green .box h4,
.band-green .box strong,
.shot .box h1,
.shot .box h2,
.shot .box h3,
.shot .box h4,
.shot .box strong {
  color: var(--green);
}

.band-green .box .box-label,
.shot .box .box-label {
  color: var(--brass);
}

/* Email addresses and URLs are single unbreakable tokens. Left alone, their
   min-content width sets a floor under the grid column holding them and the
   whole page grows wider than a narrow screen. */
body {
  overflow-wrap: break-word;
}

.grid-2 > *,
.grid-3 > *,
.grid-2-1 > *,
.places > *,
.tgrid > *,
.parts > *,
.traps > *,
.vs > * {
  min-width: 0;
}