/* @font-face: generated by scripts/fonts.mjs, do not edit */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* end @font-face */

/* ============================================================
   Landing pages: /individuals and /pro

   Split out of pro.css. Those two pages are public marketing surfaces that
   a stranger reaches first, and they were loading the whole 108KB
   professional dashboard stylesheet to use about a fifth of it.

   Everything here is the source of truth for the landing layer: the
   .ind-* and .lp-* sections, the copied site header, the pricing tiers
   and the landing typography have been moved out of pro.css, not copied.
   The small shared base above them (the palette, the reset, .pro-btn)
   necessarily exists in both files; scripts/verify.mjs compares the two
   token blocks so they cannot drift apart unnoticed.
   ============================================================ */

/* ============================================================
   Pro tier interface

   Deliberately separate from style.css. The consumer site is a marketing
   surface and this is a tool someone uses with a client sitting next to
   them, so it is denser, quieter, and built for repeat use rather than
   first impressions. Loading it only on /pro pages also means none of the
   264 consumer pages carry a byte of it.

   Same palette as the consumer site, no purple in the chrome. The one
   colour a professional controls is their own accent, and that appears
   only on their client-facing result page, never in here.
   ============================================================ */
:root {
  --pro-ink: #1A1214;
  --pro-soft: #6B5B60;
  --pro-line: #EDE4E1;
  --pro-bg: #FBF7F6;
  --pro-card: #FFFFFF;
  /* Taken from style.css rather than approximated, so a button here is the
     same colour as the same button on the consumer site. The primary
     button on both is rose-deep hovering to rose-dark; coral is the
     secondary accent. */
  --pro-rose: #BE3B57;        /* --rose-deep  */
  --pro-rose-dark: #A8324B;   /* --rose-dark  */
  --pro-coral: #FF8674;       /* --coral      */
  --pro-coral-deep: #D14257;  /* --coral-deep */
  --pro-green: #2E7D5B;
  --pro-amber: #9A6B15;
  /* The orange out of the logo itself, which is a gradient circle running
     #FFE0B0, #FFAE7B, #FF8064, #EE5A63, #C93F6A. This is the middle stop,
     the point where it is unmistakably orange and still dark enough to
     read as a line on white. Used as a border and never as text or a
     fill behind text: at 2.9:1 on white it draws well and fails every
     contrast rule going. Ink sits inside it. */
  --pro-logo-orange: #FF8064;
  --pro-r: 12px;
}

* { box-sizing: border-box; }

body.pro {
  margin: 0;
  background: var(--pro-bg);
  color: var(--pro-ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* style.css sets this on body and this file did not, which is why the
     logo looked heavier here than on the homepage despite being the same
     family, size and weight. On macOS the default is subpixel-antialiased,
     which thickens strokes; antialiased thins them. It never shows up in a
     computed style comparison unless you go looking for this property by
     name, so the two headers measured identical while looking different. */
  -webkit-font-smoothing: antialiased;
}

.center { text-align: center; }

.muted { color: var(--pro-soft); }

.tiny { font-size: .8rem; }

/* ---------- buttons ---------- */
.pro-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1.2rem; border-radius: 100px;
  background: var(--pro-rose); color: #fff; border: 1.5px solid var(--pro-rose);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  white-space: normal; text-align: center;
}

.pro-btn:hover { background: var(--pro-rose-dark); border-color: var(--pro-rose-dark); }

/* Ghost matches .btn-ghost on the consumer site: rose text, neutral border,
   and the same faint rose wash on hover. */
.pro-btn.ghost { background: transparent; color: var(--pro-rose); border-color: var(--pro-line); }

.pro-btn.ghost:hover { border-color: var(--pro-rose); color: var(--pro-rose); background: rgba(190, 59, 87, .04); }

.pro-btn.big { padding: .9rem 1.7rem; font-size: 1.02rem; }

@media (max-width: 560px) {
  .pro-btn { width: 100%; }
}

/* ---------- Skip link ----------
   The accessibility pass adds this markup to every page, but the styling
   lived only in style.css, which the pro app deliberately does not load.
   The result was a visible "Skip to content" link sitting at the top of
   all six pro pages. Same behaviour as the consumer site: present in the
   tab order, off screen until focused, moved up rather than off to the
   left so focusing it cannot scroll the page sideways. */
.pro .skip-link {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  z-index: 200;
  background: var(--pro-rose);
  color: #fff;
  padding: .85rem 1.3rem;
  border-radius: 0 0 var(--pro-r) 0;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .12s ease;
}

/* The :not(.skip-link) in the generic link rule below matters: without it that
   rule outranks .pro .skip-link and paints rose on rose, so the first control a
   keyboard user meets is invisible. */
.pro .skip-link:focus { transform: translateY(0); outline: 3px solid var(--pro-coral); outline-offset: 2px; }

/* Landing page eyebrow: names the buyer before the headline does. */
.eyebrow-pro {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--pro-rose); margin: 0 0 .7rem;
}

.lp-wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.15rem; }

.lp-section { padding: 4rem 1.15rem; }

.center { text-align: center; }

.lp-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 2rem; max-width: 24ch;
}

.lp-h2.center { margin-inline: auto; text-align: center; }

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

.lead {
  font-size: 1.06rem; line-height: 1.7; color: var(--pro-soft);
  max-width: 54ch; margin: 0 0 1.6rem;
}

/* ---------- hero ---------- */
.lp-hero {
  padding: 3.5rem 0 4rem;
  background:
    radial-gradient(1100px 420px at 12% -10%, #FFF1EC 0%, transparent 70%),
    radial-gradient(900px 380px at 92% 0%, #FDF3F5 0%, transparent 65%);
  border-bottom: 1px solid var(--pro-line);
}

.hero-grid {
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.03em;
  margin: 0 0 1rem; max-width: 17ch;
}

.hero-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.hero-fine { font-size: .84rem; color: var(--pro-soft); }

.tick-row {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-size: .87rem; color: var(--pro-soft);
}

.tick-row li { position: relative; padding-left: 1.15rem; }

.tick-row li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pro-rose);
}

/* ---------- the phone demo ----------
   A miniature of the real branded result, built from the same tokens the
   server renderer uses, so it cannot quietly drift from the product. */
.hero-demo { display: flex; flex-direction: column; align-items: center; }

.phone {
  width: 100%; max-width: 300px;
  border: 9px solid #241B1E; border-radius: 30px;
  background: #241B1E;
  box-shadow: 0 24px 50px -18px rgba(52, 30, 38, .38), 0 4px 12px rgba(52, 30, 38, .1);
}

.phone-screen {
  background: #fff; border-radius: 21px; overflow: hidden;
  font-size: 11px; line-height: 1.45;
}

.demo-brand {
  background: var(--demo-accent); color: var(--demo-on-accent);
  padding: 1.15rem .95rem 1rem; text-align: center;
}

.demo-logo {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto .5rem;
  background: linear-gradient(#FFD9A0, #FF8064 55%, #C93F6A);
}

.demo-brand strong { display: block; font-size: 12.5px; line-height: 1.3; }

.demo-brand span { display: block; opacity: .72; font-size: 10px; margin-top: .18rem; }

.demo-chips { display: flex; gap: .25rem; justify-content: center; flex-wrap: wrap; margin-top: .55rem; }

.demo-chips i {
  font-style: normal; font-size: 8.5px; padding: .12rem .38rem; border-radius: 100px;
  background: rgba(26, 18, 20, .07); border: 1px solid rgba(26, 18, 20, .18);
}

.demo-body { padding: .8rem .8rem 1rem; }

.demo-step + .demo-step { margin-top: .75rem; }

.demo-step-h { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: 10.5px; }

.demo-step-h em { font-style: normal; font-weight: 400; color: #77686C; margin-left: auto; font-size: 9px; }

.demo-num {
  width: 15px; height: 15px; border-radius: 50%; background: var(--demo-mark); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px;
}

.demo-card {
  border: 1px solid #EDE4E1; border-radius: 8px; padding: .45rem .55rem;
  margin-top: .35rem; position: relative;
}

.demo-card.top { border-color: var(--demo-mark); margin-top: .6rem; }

.demo-pick {
  position: absolute; top: -6px; left: .5rem; font-size: 7px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--demo-mark); color: #fff; padding: .08rem .28rem; border-radius: 100px;
}

.demo-card b { font-size: 10px; }

.demo-card i { font-style: normal; float: right; color: #77686C; font-size: 9.5px; }

.demo-card p { margin: .2rem 0 0; font-size: 9px; color: #6B5B60; line-height: 1.4; }

.demo-caption {
  font-size: .78rem; color: var(--pro-soft); text-align: center;
  margin: 1rem 0 0; max-width: 30ch;
}

/* ---------- bands ---------- */
.lp-band { background: var(--pro-card); border-block: 1px solid var(--pro-line); padding: 4rem 0; }

.prob-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.prob-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pro-bg); border: 1px solid var(--pro-line);
  color: var(--pro-rose); font-weight: 700; font-size: .88rem; margin-bottom: .7rem;
}

.prob h3 { margin: 0 0 .35rem; font-size: 1.02rem; }

.prob p { margin: 0; color: var(--pro-soft); font-size: .93rem; }

/* ---------- steps ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: step;
}

.steps li {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-r); padding: 1.5rem 1.4rem 1.3rem; position: relative;
}

.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pro-rose); color: #fff; font-weight: 700;
  margin-bottom: .8rem;
}

.steps h3 { margin: 0 0 .4rem; font-size: 1.05rem; }

.steps p { margin: 0 0 .9rem; color: var(--pro-soft); font-size: .93rem; }

.step-tag {
  display: inline-block; font-size: .76rem; font-weight: 600;
  color: var(--pro-rose); background: #FDF4F6;
  border: 1px solid #F3D9E0; border-radius: 100px; padding: .22rem .6rem;
}

/* ---------- features ---------- */
.feat-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.feat { padding-left: 1rem; border-left: 2px solid var(--pro-rose); }

.feat h3 { margin: 0 0 .35rem; font-size: 1rem; }

.feat p { margin: 0; color: var(--pro-soft); font-size: .93rem; }

.price-fine { margin: 1.2rem 0 0; max-width: 42ch; margin-inline: auto; }

/* ---------- faq ---------- */
.faq { max-width: 720px; margin: 0 auto; }

.faq details {
  border-bottom: 1px solid var(--pro-line);
}

.faq summary {
  cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 600; list-style: none; min-height: 44px;
  display: flex; align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--pro-soft); border-bottom: 2px solid var(--pro-soft);
  transform: rotate(45deg); transition: transform .18s ease;
}

.faq summary:hover { color: var(--pro-rose); }

.faq p { margin: 0 0 1.15rem; color: var(--pro-soft); font-size: .95rem; max-width: 62ch; }

/* ---------- final ---------- */
.lp-final {
  background: var(--pro-rose); color: #fff; padding: 4rem 0;
}

.lp-final h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 .7rem; letter-spacing: -.02em; }

.lp-final .lead { color: rgba(255, 255, 255, .92); }

/* .88 blended to 4.45 on the rose */
.lp-final .pro-btn {
  background: #fff; color: var(--pro-rose); border-color: #fff;
}

.lp-final .pro-btn:hover { background: #FDF4F6; border-color: #FDF4F6; color: var(--pro-rose); }

.lp-foot { padding: 2.5rem 0; border-top: 1px solid var(--pro-line); }

.lp-foot p { margin: 0 0 .6rem; max-width: 70ch; }

.lp-foot a { color: var(--pro-soft); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-copy h1, .lp-h2, .lead { max-width: none; }
  .hero-demo { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ---------- animated hero demo ----------
   The accent a professional would choose. Terracotta rather than the
   Beauty Match rose, so it reads as their colour and not ours, and warm
   enough to sit with the peach and coral in the logo. White text on it is
   6.57:1. */
:root {
  /* The accent a professional would pick, shown on their client's page.
     A light tan from the same family as the lightest stop in the logo.
     A tan header needs dark text: white on it is 1.43, dark ink is 12.88.
     The small badges sit on a white card, so they take a deeper warm tone
     of their own rather than the tan, which would disappear there. */
  --demo-accent: #E8D5BE;
  --demo-on-accent: #1A1214;
  --demo-mark: #7A5A42;
}

.phone-screen { position: relative; min-height: 356px; }

.demo-layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
}

/* One 12s loop: read the photo, then show what came out of it. Long dwells
   on both halves so it reads as a demonstration rather than a flicker. */
.demo-scan   { animation: demoScan 12s ease-in-out infinite; }

.demo-result { animation: demoResult 12s ease-in-out infinite; }

@keyframes demoScan {
  0%, 42%   { opacity: 1; }
  48%, 96%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes demoResult {
  0%, 42%   { opacity: 0; transform: translateY(8px); }
  50%, 94%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(8px); }
}

.scan-head {
  padding: .7rem .8rem .5rem; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--pro-rose);
  display: flex; justify-content: space-between; align-items: baseline;
}

.scan-head span { font-weight: 500; letter-spacing: 0; text-transform: none; color: #77686C; }

/* An abstract stand-in for the client's photo. Deliberately not a person:
   a real face here would need rights and would imply a customer we do not
   have. */
.scan-frame {
  position: relative; margin: 0 .8rem; height: 150px; border-radius: 10px;
  overflow: hidden; background: #F6EEEA; border: 1px solid #EDE4E1;
}

.scan-subject {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 50% 74%, #6B4536 0%, #59392C 45%, transparent 72%),
    radial-gradient(30% 24% at 50% 40%, #C9927A 0%, #B07F69 60%, transparent 78%),
    linear-gradient(#F6EEEA, #EDE1DB);
}

.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pro-rose), transparent);
  box-shadow: 0 0 12px 2px rgba(190, 59, 87, .45);
  animation: sweep 12s ease-in-out infinite;
}

@keyframes sweep {
  0%        { top: 0; opacity: 0; }
  4%        { opacity: 1; }
  30%       { top: 100%; opacity: 1; }
  34%, 100% { top: 100%; opacity: 0; }
}

.scan-readout { padding: .65rem .8rem; display: grid; gap: .3rem; }

.reading {
  font-size: 9.5px; color: #6B5B60;
  display: flex; justify-content: space-between; gap: .5rem;
  border-bottom: 1px dotted #EDE4E1; padding-bottom: .25rem;
  opacity: 0;
}

.reading b { color: var(--pro-ink); font-size: 10px; }

.reading { animation: readIn 12s ease-out infinite; }

.r1 { animation-delay: 0s; }

.r2 { animation-delay: .55s; }

.r3 { animation-delay: 1.1s; }

.r4 { animation-delay: 1.65s; }

@keyframes readIn {
  0%, 12%  { opacity: 0; transform: translateY(4px); }
  18%, 40% { opacity: 1; transform: translateY(0); }
  46%, 100%{ opacity: 0; transform: translateY(0); }
}

.demo-result { overflow: hidden; }

/* Motion is decoration here: the still frame carries the same meaning, so
   under a reduced-motion preference the routine simply sits there. */
@media (prefers-reduced-motion: reduce) {
  .demo-scan { display: none; }
  .demo-result, .scan-line, .reading { animation: none; opacity: 1; transform: none; }
}

/* ---------- pricing tiers ----------
   The middle tier is raised and outlined because it is the one we expect
   people on, and the ladder is built so that choosing it is obvious rather
   than clever: ten dollars more than solo for four times the scans. */
.tiers {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.tier {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: 16px; padding: 1.8rem 1.5rem 1.6rem; text-align: center;
  position: relative;
}

.tier.best {
  border-color: var(--pro-rose); border-width: 2px;
  padding-top: 2.1rem;
  box-shadow: 0 18px 40px -26px rgba(52, 30, 38, .35);
}

.tier-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--pro-rose); color: #fff; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 100px;
}

.tier h3 { margin: 0 0 .5rem; font-size: 1.05rem; }

.tier-price {
  margin: 0; font-size: 2.35rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
}

.tier-price span {
  display: block; font-size: .8rem; font-weight: 500;
  color: var(--pro-soft); margin-top: .35rem; letter-spacing: 0;
}

.tier-scans { margin: 1.1rem 0 .3rem; font-size: .95rem; }

.tier-scans b { font-size: 1.1rem; }

.tier-blurb {
  margin: 0 0 1.3rem; color: var(--pro-soft); font-size: .88rem;
  min-height: 2.6em;
}

.tier .pro-btn { width: 100%; }

@media (max-width: 560px) {
  .tier-blurb { min-height: 0; }
}

.scan-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }

/* ---------- links ----------
   Plain links inside the pro and me pages had no rule, so they fell back to
   the browser default: #0000EE, and #551A8B once visited. That second one
   is purple, which the palette does not use anywhere, and it appeared the
   moment somebody clicked a privacy link. Buttons and nav items carry their
   own colours and are excluded.

   .rail is the account page's sidebar. Its links are chrome: muted until
   you hover one, rose only on the view you are actually in. Without the
   exclusion this rule painted all ten of them rose, which did not look
   broken so much as look finished, while quietly making the current view
   indistinguishable from the other nine. Adding to this list is the fix
   rather than out-specifying it, because six :not() clauses already beat
   anything a component can reasonably write for itself. */
body.pro a:not(.pro-btn):not(.pro-logo):not([class*="nav"]):not(.stock-hit):not(.skip-link):not(.btn):not(.rail) {
  color: var(--pro-rose);
}

body.pro a:not(.pro-btn):not(.pro-logo):not([class*="nav"]):not(.stock-hit):not(.skip-link):not(.btn):not(.rail):visited {
  color: var(--pro-rose);
}

body.pro a:not(.pro-btn):not(.pro-logo):not([class*="nav"]):not(.stock-hit):not(.skip-link):not(.btn):not(.rail):hover {
  color: var(--pro-rose-dark);
}

/* ---------- /individuals ----------
   Its own namespace rather than more lp-* classes. The professional
   landing page and this one are read by different people with different
   questions, and sharing a stylesheet section is how a change meant for
   one quietly restyles the other. */
.ind-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 0%, #FFE7E0 0%, rgba(255,231,224,0) 62%),
    linear-gradient(180deg, #FFF7F5 0%, #FFFFFF 100%);
  padding: clamp(3rem, 7vw, 6rem) 1.5rem clamp(3rem, 6vw, 5rem);
}

.ind-wrap { max-width: 1080px; margin: 0 auto; }

.ind-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; }

@media (max-width: 860px) {
  .ind-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.ind-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -.035em;
  margin: .5rem 0 1rem; color: var(--pro-ink);
}

.ind-hero h1 em { font-style: normal; color: var(--pro-rose); }

.ind-lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--pro-ink);
  max-width: 46ch; margin: 0 0 1.6rem; }

.ind-cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

.ind-note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--pro-muted, #6B5B60); }

.ind-art { display: grid; place-items: center; }

.ind-art svg { width: 100%; max-width: 260px; height: auto;
  filter: drop-shadow(0 18px 40px rgba(190,59,87,.16)); }

@media (max-width: 860px) {
  .ind-art { display: none; }
}

.ind-section { max-width: 1080px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 1.5rem; }

.ind-section h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.025em; line-height: 1.15;
  margin: 0 0 .7rem;
}

.ind-sub { color: var(--pro-muted, #6B5B60); max-width: 58ch; margin: 0 0 2rem; font-size: 1.02rem; }

.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

@media (max-width: 860px) {
  .ind-grid { grid-template-columns: 1fr; }
}

.ind-card {
  background: #fff; border: 1px solid var(--pro-line); border-radius: 18px;
  padding: 1.6rem 1.5rem; transition: transform .18s ease, box-shadow .18s ease;
}

.ind-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26,18,20,.07); }

.ind-glyph {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: #FFF0EC; margin-bottom: .9rem;
}

.ind-glyph svg { display: block; }

.ind-card h3 { margin: 0 0 .4rem; font-size: 1.08rem; }

.ind-card p { margin: 0; color: var(--pro-muted, #6B5B60); font-size: .94rem; line-height: 1.6; }

.ind-band { background: linear-gradient(155deg, var(--pro-rose) 0%, var(--pro-rose-dark) 100%); color: #fff; }

.ind-band .ind-section { padding-block: clamp(3rem, 6vw, 4.5rem); }

.ind-band h2 { color: #fff; }

.ind-band .ind-sub { color: rgba(255,255,255,.92); }

.ind-band .ind-card { background: rgba(0,0,0,.13); border-color: rgba(255,255,255,.22); }

.ind-band .ind-card h3 { color: #fff; }

.ind-band .ind-card p { color: rgba(255,255,255,.92); }

.ind-band .ind-glyph { background: rgba(0,0,0,.18); }

.ind-plans {
  display: grid; gap: 1.2rem; align-items: stretch;
  grid-template-columns: 1fr;
}

/* Four across only when there is room for a button label on one line;
   two by two before that, never three and a stranded fourth. */
@media (min-width: 620px) {
  .ind-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1060px) {
  .ind-plans { grid-template-columns: repeat(4, 1fr); }
}

/* Four plans now rather than two, generated from the plan settings. The
   buttons sit on one line across all four however long the lists above
   them run, so a price comparison reads straight across. */
.ind-plan { display: flex; flex-direction: column; }

.ind-plan ul { flex: 1; }

.ind-plan .pro-btn { align-self: flex-start; white-space: nowrap; }

.ind-plan { background: #fff; border: 1.5px solid var(--pro-line); border-radius: 20px; padding: 1.8rem 1.6rem; }

.ind-plan.on { border-color: var(--pro-rose); box-shadow: 0 16px 40px rgba(190,59,87,.12); }

.ind-plan h3 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }

.ind-amount { font-size: 2.6rem; letter-spacing: -.03em; margin: .3rem 0 1rem; line-height: 1; font-variant-numeric: tabular-nums; }

.ind-amount span { font-size: .9rem; letter-spacing: 0; color: var(--pro-muted, #6B5B60); }

.ind-plan ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }

.ind-plan li { padding: .42rem 0 .42rem 1.5rem; position: relative; font-size: .94rem; }

.ind-plan li::before {
  content: ""; position: absolute; left: 0; top: .78rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--pro-rose);
}

.ind-final { text-align: center; }

.ind-final .ind-sub { margin-inline: auto; }

/* The ghost button sits on the hero's peach wash, where rose text measures
   4.49 against the lightest stop of the gradient. An opaque white ground
   under it takes that to 5.31 and reads as a button rather than as text
   floating on a tint. Caught by the audit only because it now reads
   gradient stops; against a flat background it would have passed. */
.ind-hero .pro-btn.ghost { background: #fff; }

/* The drawn face, again. Its styles live in style.css, which this page does
   not load, so without these the paths fall back to a default black fill and
   the hero shows a solid blob. Restated here rather than pulling in a second
   stylesheet for six rules. */
.ind-art .mk-outline { fill: #FFF3F0; stroke: var(--pro-rose); stroke-width: 2.2; }

.ind-art .mk-feat { fill: var(--pro-ink); }

.ind-art .mk-feat-l { fill: none; stroke: var(--pro-ink); stroke-width: 2.4; stroke-linecap: round; }

.ind-art .mk-sweep {
  fill: none; stroke: #FF6A55; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .88;
  animation: mk-draw 1s ease forwards; animation-delay: calc(.45s + var(--i, 0) * .22s);
}

@keyframes mk-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ind-art .mk-sweep { animation: none; stroke-dashoffset: 0; }
}

/* ---------- The shared site header ----------
   Copied from style.css rather than written to look like it. Written from
   memory it came out with fifteen measured differences, including a logo
   at the wrong size and weight, a flat gradient disc where the real mark
   is an SVG sun, and For Individuals in rose with no separator where the
   real one is muted with a rule beside it.

   Every selector is scoped to .site-header, so copying .btn and .wrap
   cannot restyle a page built out of pro- classes, and the variables are
   resolved because they live in the other stylesheet's :root. Loading
   style.css itself was tried first and broke three unrelated things. */
.site-header .wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

.site-header .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: inherit; font-size: 1rem; font-weight: 600; padding: .95rem 1.7rem; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform.15s ease, box-shadow.2s ease, background.2s ease, color.2s ease; line-height: 1.2; }

.site-header .btn:active { transform: translateY(1px); }

.site-header .btn-primary { background: #BE3B57; color: #FFFFFF; box-shadow: 0 1px 2px rgba(190,59,87,.06), 0 3px 10px rgba(190,59,87,.06); }

.site-header .btn-primary:hover { background: #A8324B; box-shadow: 0 2px 6px rgba(190,59,87,.07), 0 12px 32px rgba(190,59,87,.10); }

.site-header .btn-sm { padding:.6rem 1.1rem; font-size:.875rem; }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #FBDFD8; }

.site-header .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; }

.site-header .logo { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #BE3B57; text-decoration: none; letter-spacing: 0; white-space: nowrap; display: flex; align-items: center; gap: .5rem; }

.site-header .logo-mark { width: 30px; height: 30px; flex: 0 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E %3Cdefs%3E %3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%23FFE0B0'/%3E %3Cstop offset='.30' stop-color='%23FFAE7B'/%3E %3Cstop offset='.58' stop-color='%23FF8064'/%3E %3Cstop offset='.82' stop-color='%23EE5A63'/%3E %3Cstop offset='1' stop-color='%23C93F6A'/%3E %3C/linearGradient%3E %3Cmask id='m'%3E %3Crect width='32' height='32' fill='%23fff'/%3E %3Crect x='0' y='18.7' width='32' height='1.35' fill='%23000'/%3E %3Crect x='0' y='22.4' width='32' height='1.75' fill='%23000'/%3E %3Crect x='0' y='26.4' width='32' height='2.2' fill='%23000'/%3E %3C/mask%3E %3C/defs%3E %3Ccircle cx='16' cy='16' r='15.4' fill='url(%23g)' mask='url(%23m)'/%3E %3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; }

.site-header .nav-links { display: flex; align-items: center; gap: .7rem; }

.site-header .nav-links a { color: #BE3B57; text-decoration: none; font-size: .84rem; font-weight: 500; white-space: nowrap; }

.site-header .nav-links a:hover { color: #D14257; }

.site-header .nav-links a.btn-primary { color: #FFFFFF; }

.site-header .nav-links a.btn-primary:hover { color: #FFFFFF; }

.site-header .nav-toggle { display: none; background: none; border: 0; color: #BE3B57; cursor: pointer; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }

.site-header .nav-toggle span, .site-header .nav-toggle span::before, .site-header .nav-toggle span::after { display: block; width: 20px; height: 1.5px; background: #BE3B57; border-radius: 2px; content: ""; }

.site-header .nav-toggle span { position: relative; }

.site-header .nav-toggle span::before { position: absolute; top: -6px; }

.site-header .nav-toggle span::after { position: absolute; top: 6px; }

.site-header .nav-links a.nav-pro { font-size: .82rem; color: #7D6068; border-left: 1px solid #FBDFD8; padding-left: .9rem; margin-left: .2rem; white-space: nowrap; }

.site-header .nav-links a.nav-pro:hover { color: #BE3B57; }

@media (max-width: 1099px) {
  .site-header .nav-toggle { display: flex; }
  .site-header .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; border-bottom: 1px solid #FBDFD8; box-shadow: 0 2px 6px rgba(190,59,87,.07), 0 12px 32px rgba(190,59,87,.10); }
  .site-header .nav-links.open { display: flex; }
  .site-header .nav-links a { padding:.8rem 0; border-bottom: 1px solid #FBDFD8; }
  .site-header .nav-links .btn { margin-top:.8rem; justify-content: center; }
}

/* ---------- Landing page typography ----------
   The two landing pages were set in system sans at weight 700 while the
   rest of the site is Cormorant Garamond at 600. Two typographic voices on
   one site, and the heavier one on the two pages a stranger is most likely
   to land on first.

   Neither page was loading the fonts at all, so even the copied logo rule,
   which asks for Cormorant, was falling through to Georgia.

   Scoped to body.lp, which is exactly these two pages. The professional
   dashboard is body.pro without lp and keeps its sans: it is a dense
   working interface rather than something being read, and a display serif
   is the wrong tool for a table of consultations. */
body.lp { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

body.lp h1, body.lp h2, body.lp h3, body.lp h4 {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-variant-numeric: lining-nums;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

/* The landing pages set their own sizes, which stay. Only the tighter
   tracking goes, because it was chosen for a heavy sans and reads as
   cramped on a serif. */
body.lp .ind-hero h1, body.lp .lp-hero h1,
body.lp .ind-section h2, body.lp .lp-section h2,
body.lp .lp-final h2, body.lp .ind-final h2 { letter-spacing: -0.005em; }

/* ---------- /pro adopts the /individuals visual language ----------
   The two landing pages were built a month apart and looked it: a flat
   two-stop wash against a warm radial one, a grey band against a rose
   gradient, 16px corners against 20px, and no lift on any card. Same
   site, two designs.

   Done as overrides on the lp- classes rather than by renaming them
   through 376 lines of markup, because the pricing cards are built by a
   script from PRO_CONFIG and rewriting their class names is how the plan
   table quietly stops rendering. Appended last, so these win at equal
   specificity without needing !important anywhere. */
.lp-hero {
  background:
    radial-gradient(120% 90% at 88% 0%, #FFE7E0 0%, rgba(255,231,224,0) 62%),
    linear-gradient(180deg, #FFF7F5 0%, #FFFFFF 100%);
  border-bottom: 0;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}

.lp-wrap { max-width: 1080px; padding-inline: 1.5rem; }

.lp-section { padding: clamp(3rem, 6vw, 5rem) 1.5rem; }

/* The grey card band becomes the rose one, so the page has the same
   rhythm of light section, colour section, light section. */
.lp-band {
  background: linear-gradient(155deg, var(--pro-rose) 0%, var(--pro-rose-dark) 100%);
  border-block: 0; color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.lp-band h2, .lp-band .lp-h2, .lp-band h3 { color: #fff; }

.lp-band p, .lp-band li { color: rgba(255,255,255,.92); }

.lp-band .prob-n {
  background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.24); color: #fff;
}

.lp-h2 { letter-spacing: -0.005em; max-width: 26ch; }

.lp-final { background: linear-gradient(155deg, var(--pro-rose) 0%, var(--pro-rose-dark) 100%); }

/* Pricing cards, matched to .ind-plan: rounder, left aligned, and lifted
   by shadow rather than by a heavier border. */
.tier {
  border-radius: 20px; border-width: 1.5px; text-align: left;
  padding: 1.8rem 1.6rem; background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tier:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26,18,20,.07); }

.tier.best {
  border-width: 1.5px; padding-top: 2.1rem;
  box-shadow: 0 16px 40px rgba(190,59,87,.12);
}

.tier-flag { left: 1.6rem; transform: none; }

.tier h3 { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }

.tier-price { font-size: 2.6rem; letter-spacing: -.03em; margin: .3rem 0 1rem; line-height: 1; }

.tier-price span { font-size: .9rem; letter-spacing: 0; }

/* The feature cards in the light sections, given the same lift as the
   individuals ones so hovering does the same thing on both pages. */
.lp-section .pro-card, .lp-section .card {
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.lp-section .pro-card:hover, .lp-section .card:hover {
  transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26,18,20,.07);
}

/* Rose measures 4.49 against the lightest stop of the hero wash, a hair
   under AA, exactly as the individuals hero did. The darker rose clears it
   at 5.51 and is already in the palette. */
.lp-hero .eyebrow-pro, .ind-hero .eyebrow { color: var(--pro-rose-dark); }

/* The professional hero at the same scale as the individuals one.
   Measured side by side they were two different designs: an eyebrow at
   11.8px uppercase bold against 15px sentence case, an h1 at 43px forced
   into a 350px measure so it broke over three lines against 64px running
   the full column, and a lead at 17px muted against 20px in ink. */
.lp-hero .eyebrow-pro {
  font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal;
  margin: 0 0 .5rem;
}

.lp-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.005em;
  max-width: none; margin: .5rem 0 1rem;
}

.lp-hero .lead {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55;
  color: var(--pro-ink); max-width: 46ch; margin: 0 0 1.6rem;
}

.lp-hero .hero-grid { grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; }

@media (max-width: 860px) {
  .lp-hero .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* The 24px that put the whole professional page to the right.

   Both pages have a 1080px wrap and 24px of page padding, but they hang it
   on different elements: .ind-hero carries the padding and .ind-wrap has
   none, while .lp-wrap carried it and .lp-hero had none. Same total, but
   the pro wrap then measured 1080 minus its own padding rather than 1080
   inside the padding, so its content sat 24px right and 30px narrower. */
.lp-hero { padding-inline: 1.5rem; }

.lp-hero .lp-wrap { padding-inline: 0; }

.lp-section { padding-inline: 1.5rem; }

.lp-section.lp-wrap { padding-inline: 1.5rem; }

.lp-band > .lp-wrap, .lp-final > .lp-wrap { padding-inline: 1.5rem; }

/* Section headings run the column rather than sitting in a 24ch measure,
   and the eyebrow above them uses the same rhythm as the hero one. */
.lp-section .lp-h2, .lp-band .lp-h2 { max-width: none; margin: 0 0 .7rem; }

.lp-section .eyebrow-pro, .lp-band .eyebrow-pro {
  font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal;
  margin: 0 0 .5rem;
}

.lp-section .muted, .lp-band .muted { max-width: 58ch; }

/* Same wrapping rules as style.css, for the pages that load only this. */
h1, h2, h3, h4 { text-wrap: balance; }

p, li { text-wrap: pretty; }

.prod-price, .pr-approx, .ind-amount { font-variant-numeric: tabular-nums; }

/* Press feedback, matching the site buttons. */
.pro-btn { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), background-color .2s, color .2s, border-color .2s; }

.pro-btn:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }

@media (prefers-reduced-motion: reduce) {
  .pro-btn:active { transform: none; }
}

/* Duplicated from style.css, like the palette, the reset and the
   button above: landing.css exists so /individuals does not pull the
   whole dashboard stylesheet, and there is no third file to import a
   shared rule from. test-stylesheet-split.mjs is what notices if the
   two copies drift. */
/* The offer bar, first thing inside the sticky header.

   Deliberately quiet: a thin line of small text on the brand colour
   rather than a shouting strip. It is a standing fact about postage, not
   a sale ending at midnight, and styling it as urgency would make it
   read as one. */
.topbar {
  margin: 0;
  /* --pro-rose, not --rose-deep: landing.css names the same colour
     differently, and the copied rule was painting with a variable this
     file does not define, so the bar rendered transparent here while
     looking right everywhere else. */
  background: var(--pro-rose);
  text-align: center;
  font-size: .78rem;
  letter-spacing: .01em;
}
.topbar a {
  display: block;
  padding: .42rem 1rem;
  color: #fff;
  text-decoration: none;
}
/* body.pro carries a long a:not(...) chain that sets every link on the
   page to --pro-rose, and its specificity beats a plain .topbar a. Left
   as it was, the bar rendered rose text on a rose background: present,
   correctly sized, and invisible. Matched rather than added to that
   chain, which would grow every time anything new appears on a landing
   page. */
/* !important, reluctantly. body.pro carries an a:not(...) chain with
   seven exclusions in it, which is eight class-weights: no selector
   worth writing beats it, and adding an eighth exclusion to that chain
   means growing it again for the next thing. Left alone the bar was
   rose text on a rose background: present, correctly sized, invisible. */
body.pro .topbar a { color: #fff !important; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 2px; }
.topbar a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Shorter on a phone. 33px of a 640px-tall viewport is worth more there
   than the same 33px on a laptop, and this line is one short sentence
   that does not need the room. The tap target rule the site applies
   elsewhere does not bite here: this is an inline-length link in a
   banner, not a control somebody has to hit, and the same destination is
   the Shop item in the nav directly below it. */
@media (max-width: 640px) {
  .topbar { font-size: .72rem; }
  .topbar a { padding: .28rem .8rem; }
}


.topbar { position: relative; }
.topbar-x {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; border: 0; background: none;
  color: rgba(255,255,255,.8); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.topbar-x svg { width: 13px; height: 13px; }
.topbar-x:hover { color: #fff; }
.topbar-x:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* The link is centred in the bar, so it has to clear the button at both
   ends or the text sits a little to the left of true centre. */
.topbar a { padding-inline: 2.4rem; }