/* Long-form sales letter: one editorial column of argument, broken by full-width proof bands. Black stone, aqua glass, gold leaf. */
:root {
  --ink: #050707; --stone: #0D1314; --stone2: #111A1B; --pearl: #F3F4F0; --mist: #BCC7C6;
  --aqua: #3CCFCB; --gold: #D4AF5A; --line: rgba(212, 175, 90, .28); --aline: rgba(60, 207, 203, .2);
  --display: "Cinzel", "Trajan Pro", Georgia, serif; --serif: "Cormorant Garamond", Garamond, Georgia, serif; --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--pearl); font-family: var(--sans); font-size: 16px; line-height: 1.65; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
img { max-width: 100%; }
.wrap { width: min(1120px, 100%); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { width: min(760px, 100%); }
.gold { background: linear-gradient(100deg, #A9833A 0%, #F3DC97 38%, #C9A04B 60%, #FFF1C4 82%, #A9833A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.label { font-size: 11.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--aqua); }
.h2 { font-family: var(--serif); font-size: clamp(36px, 4.8vw, 60px); line-height: 1.02; }
.lede { color: var(--mist); font-size: clamp(16px, 1.7vw, 19px); max-width: 58ch; }
.lede b { color: var(--pearl); font-weight: 600; }
.head { display: grid; gap: 14px; margin-bottom: 44px; }
.head.center { text-align: center; justify-items: center; }
section { padding-block: 96px; }
.alt { background: var(--stone); border-block: 1px solid var(--aline); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

/* Top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: rgba(5, 7, 7, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.on { border-color: var(--aline); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 12.5px; letter-spacing: .3em; color: var(--pearl); text-decoration: none; }
.brand img { height: 34px; width: auto; }
.brand b { font-weight: 500; color: var(--aqua); }
.top .right { display: flex; align-items: center; gap: 18px; }
.hero .date { margin-bottom: -14px; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; font: 700 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--gold); background: linear-gradient(100deg, #B8913F, #F0D58A 50%, #C9A04B); color: var(--ink); cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(212, 175, 90, .7); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn.sm { padding: 11px 16px; font-size: 10.5px; }
.btn.ghost { background: transparent; color: var(--gold); }

/* Hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 620px; border-bottom: 1px solid var(--line); padding: 0; }
.hero .copy { display: grid; align-content: center; gap: 24px; padding-block: 56px 64px; padding-left: max(20px, calc((100vw - 1120px) / 2 + 20px), env(safe-area-inset-left, 0px)); padding-right: 44px; position: relative; z-index: 1; min-width: 0; }
.hero h1 { font-family: var(--serif); font-size: clamp(40px, 5.4vw, 74px); line-height: .98; letter-spacing: -.01em; }
.hero .pic { position: relative; overflow: hidden; }
.hero .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.9) contrast(1.05); }
.hero .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(5, 7, 7, 0) 38%), linear-gradient(0deg, rgba(5, 7, 7, .7), rgba(5, 7, 7, 0) 40%); }
.hero .sig { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: 22px; z-index: 1; text-align: right; }
.hero .sig b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: .22em; font-size: 15px; }
.hero .sig span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pearl); }
.facts span::before { content: "◆"; color: var(--gold); font-size: 8px; margin-right: 9px; vertical-align: 2px; }

/* Form */
.signup { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) auto; gap: 8px; max-width: 700px; }
@media (max-width: 1180px) and (min-width: 901px) { .signup { grid-template-columns: 1fr 1fr; } .signup .btn { grid-column: 1 / -1; } }
input { font: inherit; font-size: 16px; color: var(--pearl); background: rgba(255, 255, 255, .04); border: 1px solid var(--aline); padding: 15px 14px; width: 100%; border-radius: 0; min-width: 0; }
input:focus { border-color: var(--aqua); outline: none; }
input::placeholder { color: #7A8786; }
.fine { font-size: 13px; color: var(--mist); }
.fine b { color: var(--gold); font-weight: 600; }
.err { color: #F2A9A0; font-size: 14px; margin-top: 8px; }
.done { display: grid; gap: 10px; max-width: 600px; border-left: 2px solid var(--gold); padding: 6px 0 6px 18px; text-align: left; }
.done .big { font-family: var(--serif); font-size: 30px; line-height: 1.15; }
.done p { color: var(--mist); }

/* Pain */
.pain { text-align: center; }
.pain .wrap { display: grid; gap: 34px; justify-items: center; }
.pain h2 { font-family: var(--display); font-size: clamp(26px, 4.2vw, 50px); letter-spacing: .04em; line-height: 1.1; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: min(720px, 100%); text-align: left; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; }
.checks li:first-child { border-top: 1px solid var(--line); }
.checks li::before { content: ""; width: 14px; height: 14px; margin-top: 8px; border: 1px solid var(--gold); transform: rotate(45deg); }
.pain .need { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.25; max-width: 30ch; }
.pain p.lede { margin-inline: auto; }

/* What it is */
.what .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.what .quote { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; }
.what .body { display: grid; gap: 18px; color: var(--mist); font-size: 17px; }
.what .body b { color: var(--pearl); font-weight: 600; }
.pillars { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pillars div { padding: 26px 26px 0 0; display: grid; gap: 10px; align-content: start; }
.pillars div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.pillars h3 { font-family: var(--display); font-size: 26px; letter-spacing: .14em; }
.pillars p { color: var(--mist); font-size: 15px; }
.verse { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 24px); color: var(--pearl); text-align: center; margin-top: 64px; }
.verse cite { display: block; font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: .3em; color: var(--gold); margin-top: 8px; }
.verse small { display: block; font-style: normal; font-family: var(--sans); font-size: 14px; color: var(--mist); margin-top: 12px; }

/* Who */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.door { border: 1px solid var(--aline); background: var(--ink); padding: 30px 28px; display: grid; gap: 10px; align-content: start; }
.door .rn { font-family: var(--display); color: var(--gold); font-size: 14px; letter-spacing: .2em; }
.door h3 { font-family: var(--display); font-size: 22px; letter-spacing: .08em; }
.door p { color: var(--mist); }
.door p b { color: var(--pearl); font-weight: 600; }
.tags { margin-top: 30px; text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); }
.any { margin-top: 18px; text-align: center; color: var(--mist); max-width: 64ch; margin-inline: auto; }
.not { margin-top: 64px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; align-items: start; border-top: 1px solid var(--line); padding-top: 44px; }
.not h3 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; }
.not ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.not li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--mist); }
.not li::before { content: "✕"; color: var(--gold); font-size: 14px; line-height: 1.7; }
.not li b { color: var(--pearl); font-weight: 600; }

/* Outcomes */
.outs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.outs div { display: grid; grid-template-columns: 90px minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding-block: 24px; border-bottom: 1px solid var(--line); }
.outs .n { font-family: var(--display); font-size: 40px; color: var(--gold); line-height: 1; }
.outs h3 { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; line-height: 1.1; }
.outs p { color: var(--mist); font-size: 17px; }

/* Six weeks */
.weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wk { border: 1px solid var(--aline); padding: 26px 24px; display: grid; gap: 10px; align-content: start; background: var(--ink); }
.wk .meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk h3 { font-family: var(--display); font-size: 21px; letter-spacing: .06em; }
.wk p { color: var(--mist); font-size: 15px; }
.wk .leave { border-top: 1px solid var(--aline); padding-top: 12px; margin-top: 4px; font-size: 13px; color: var(--mist); }
.wk .leave b { display: block; color: var(--aqua); font-size: 15px; font-weight: 600; }
.every { margin-top: 30px; text-align: center; color: var(--mist); }
.every b { color: var(--pearl); font-weight: 600; }
.cs-note { margin: 18px auto 0; max-width: 720px; border: 1px solid var(--line); padding: 16px 20px; text-align: center; color: var(--pearl); }
.cs-note span { color: var(--gold); font-size: 11px; letter-spacing: .24em; font-weight: 700; margin-right: 8px; }

/* What you get */
.get .grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.books { position: relative; aspect-ratio: 1 / 1.05; max-width: 460px; width: 100%; justify-self: center; }
.books img { position: absolute; width: 62%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 175, 90, .25); }
.books .b1 { left: 0; top: 0; transform: rotate(-4deg); }
.books .b2 { right: 0; bottom: 0; transform: rotate(3deg); }
.books.one { aspect-ratio: auto; display: grid; justify-items: center; gap: 22px; }
.books.one img { position: static; width: 72%; transform: rotate(2deg); }
.wb-tag { text-align: center; font-size: 13px; color: var(--mist); }
.wb-tag b { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: .1em; color: var(--gold); }
.list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.list div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; padding-block: 15px; border-bottom: 1px solid var(--line); }
.list b { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.list span { color: var(--mist); font-size: 15px; }

/* Katy */
.katy .grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.katy .side { position: sticky; top: 90px; display: grid; gap: 28px; }
.portrait { width: 100%; max-width: 380px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }

/* Photo band */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.shots figure { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; max-width: 100%; }
.shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.shots figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 7, 7, .9) 0%, rgba(5, 7, 7, 0) 50%); }
.shots figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; font-size: 13px; color: var(--mist); line-height: 1.4; }
.shots figcaption b { display: block; font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .08em; color: var(--pearl); margin-bottom: 2px; }
.story { display: grid; gap: 18px; font-size: 17px; color: var(--mist); margin-bottom: 30px; }
.story b { color: var(--pearl); font-weight: 600; }
.story .pull { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; color: var(--pearl); border-left: 2px solid var(--gold); padding-left: 18px; }
.lines { display: grid; }
.lines p { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; }
.lines p span { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.lines p:first-child { border-top: 1px solid var(--line); }
.so { margin-top: 28px; font-size: 18px; color: var(--mist); }
.so b { color: var(--pearl); font-weight: 600; }

/* Price */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 960px; margin-inline: auto; }
.tier { position: relative; border: 1px solid var(--aline); background: var(--ink); padding: 34px 28px; display: grid; gap: 14px; align-content: start; }
.tier.prem { border-color: var(--line); box-shadow: 0 30px 80px -50px rgba(212, 175, 90, .6); }
.flag { position: absolute; top: -1px; right: 20px; background: var(--gold); color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; }
.tier .k { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--aqua); font-weight: 600; }
.tier.prem .k { color: var(--gold); }
.tier h3 { font-family: var(--display); font-weight: 500; font-size: 26px; letter-spacing: .06em; }
.amt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.amt b { font-family: var(--display); font-size: 56px; font-weight: 500; line-height: 1; }
.amt span { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.tier .pw { color: var(--mist); }
.tier .pw b { color: var(--gold); font-weight: 600; }
.pay { display: grid; border: 1px solid var(--aline); font-variant-numeric: tabular-nums; }
.pay div { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 14px; border-top: 1px solid var(--aline); align-items: center; }
.pay div:first-child { border-top: 0; }
.pay .best { background: rgba(212, 175, 90, .07); }
.pay span { font-weight: 600; font-size: 14px; }
.pay em { font-style: normal; color: var(--gold); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-left: 6px; }
.pay b { grid-row: span 2; font-family: var(--display); font-size: 24px; font-weight: 500; }
.pay small { color: var(--mist); font-size: 12px; }
.inc { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--aline); display: grid; gap: 10px; }
.inc li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; color: var(--mist); }
.inc li::before { content: "◆"; color: var(--gold); font-size: 9px; line-height: 2.3; }
.inc li b { color: var(--pearl); font-weight: 600; }
.tier .btn { margin-top: 6px; }
.after { max-width: 960px; margin: 22px auto 0; display: grid; grid-template-columns: auto 1fr 1fr; gap: 0; border: 1px solid var(--aline); }
.after > * { padding: 18px 22px; }
.after .t { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--aqua); align-self: center; }
.after div { border-left: 1px solid var(--aline); }
.after div b { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--gold); margin-right: 8px; }
.after div span { color: var(--mist); font-size: 14px; }
.price-note { margin-top: 24px; text-align: center; color: var(--mist); }
.price-note b { color: var(--pearl); font-weight: 600; }

/* Value */
.ledgers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 960px; margin-inline: auto; }
.ledger { border-top: 2px solid var(--gold); padding-top: 18px; display: grid; gap: 0; align-content: start; font-variant-numeric: tabular-nums; }
.ledger h3 { font-family: var(--display); font-size: 20px; letter-spacing: .1em; margin-bottom: 10px; }
.ledger .r { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding-block: 10px; border-bottom: 1px solid var(--aline); font-size: 15px; }
.ledger .r small { display: block; color: var(--mist); font-size: 12.5px; }
.ledger .r b { font-weight: 600; }
.ledger .tot { font-family: var(--display); font-size: 18px; border-bottom: 0; padding-top: 14px; }
.ledger .tot b { font-size: 24px; font-weight: 500; }
.ledger .you { font-family: var(--display); font-size: 18px; border: 1px solid var(--line); background: rgba(212, 175, 90, .07); padding: 14px 16px; }
.ledger .you b { font-size: 28px; font-weight: 500; }
.ledger .sum { color: var(--mist); font-size: 14px; margin-top: 12px; }
.disc { max-width: 760px; margin: 30px auto 0; text-align: center; color: var(--mist); font-size: 13px; }

/* Why now */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.why div { padding: 24px 22px 0 0; display: grid; gap: 8px; align-content: start; }
.why div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.why h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; }
.why p { color: var(--mist); font-size: 15px; }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; padding-block: 20px; font-family: var(--serif); font-size: clamp(21px, 2.3vw, 26px); font-weight: 600; line-height: 1.2; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 26px; color: var(--gold); text-align: center; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details .a { padding-bottom: 22px; color: var(--mist); max-width: 64ch; display: grid; gap: 12px; }
details .a b { color: var(--pearl); font-weight: 600; }

/* Hire Katy */
.hire-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.hire-copy { display: grid; gap: 14px; }
.helps { margin-block: 40px 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.helps span { border: 1px solid var(--aline); padding: 8px 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pearl); }
.rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rate { border: 1px solid var(--aline); background: var(--ink); padding: 26px 22px; display: grid; gap: 10px; align-content: start; font-variant-numeric: tabular-nums; }
.rate.prem { border-color: var(--line); box-shadow: 0 30px 80px -50px rgba(212, 175, 90, .6); }
.rate .k { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--aqua); font-weight: 600; }
.rate.prem .k { color: var(--gold); }
.rate h3 { font-family: var(--display); font-size: 19px; letter-spacing: .05em; line-height: 1.25; }
.fee { display: grid; gap: 2px; border-block: 1px solid var(--aline); padding-block: 12px; }
.fee b { font-family: var(--display); font-size: 30px; font-weight: 500; color: var(--gold); line-height: 1.1; }
.fee span { font-size: 12px; color: var(--mist); letter-spacing: .06em; }
.rate > p:last-child { color: var(--mist); font-size: 14.5px; }
.hire-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hire-cta .fine { max-width: 60ch; }

/* Final */
.final { position: relative; overflow: hidden; padding-block: 110px; border-top: 1px solid var(--line); }
.final::before { content: ""; position: absolute; left: 50%; top: -40%; width: 900px; height: 900px; max-width: 200vw; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(60, 207, 203, .16), rgba(60, 207, 203, 0) 70%); pointer-events: none; }
.final .wrap { position: relative; display: grid; gap: 24px; justify-items: center; text-align: center; }
.final .mark { width: 96px; filter: drop-shadow(0 0 22px rgba(60, 207, 203, .4)); }
.final h2 { font-family: var(--serif); font-size: clamp(40px, 6vw, 76px); line-height: 1; }
.final .lede { margin-inline: auto; }
.final [data-slot] { width: min(600px, 100%); }
footer { border-top: 1px solid var(--aline); padding-block: 28px 96px; text-align: center; display: grid; gap: 6px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
footer small { color: var(--mist); font-size: 12px; }

/* Sticky phone CTA */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(13, 19, 20, .96); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s; }
.dock.on { transform: none; }
.dock p { font-size: 12px; color: var(--mist); line-height: 1.35; }
.dock p b { display: block; color: var(--pearl); font-size: 13px; }


@media (max-width: 900px) {
  section { padding-block: 72px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .pic { order: -1; height: 60vh; min-height: 360px; max-height: 540px; }
  .hero .pic::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 7, 0) 55%); }
  .hero .copy { padding-block: 0 56px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); margin-top: -110px; }
  .hero .sig { top: 18px; bottom: auto; }
  .what .grid, .katy .grid, .get .grid, .not { grid-template-columns: 1fr; gap: 30px; }
  .katy .side { position: static; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hire-top { grid-template-columns: 1fr; gap: 20px; }
  .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: 1fr; }
  .pillars div, .pillars div + div { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers, .ledgers { grid-template-columns: 1fr; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .why div:nth-child(3) { padding-left: 0; border-left: 0; }
  .outs div { grid-template-columns: 60px 1fr; }
  .outs p { grid-column: 2; }
  .after { grid-template-columns: 1fr; }
  .after div { border-left: 0; border-top: 1px solid var(--aline); }
  .dock { display: flex; }
}
@media (max-width: 640px) {
  .brand span { display: none; }
  .signup { grid-template-columns: 1fr; }
  .doors, .weeks, .why, .rates { grid-template-columns: 1fr; }
  .why div, .why div + div { padding: 18px 0 0; border-left: 0; }
  .lines p, .list div { grid-template-columns: 1fr; gap: 4px; }
  .tier { padding: 32px 18px; }
  .outs .n { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .dock, .top { transition: none; } }

/* Site pages: nav, hire teaser, intake form, thank-you */
.navlink { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pearl); text-decoration: none; }
.navlink:hover { color: var(--gold); }
footer a { color: var(--gold); }
.teaser .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.tz-copy { display: grid; gap: 22px; justify-items: start; }
.hire-hero { padding-top: 72px; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps3 li { padding: 24px 24px 0 0; display: grid; gap: 8px; align-content: start; }
.steps3 li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps3 .n { font-family: var(--display); color: var(--gold); font-size: 30px; line-height: 1; }
.steps3 h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.steps3 p { color: var(--mist); font-size: 15px; }
.intake { display: grid; gap: 20px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.f > span, .f legend { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--pearl); padding: 0; margin-bottom: 8px; }
select, textarea { font: inherit; font-size: 16px; color: var(--pearl); background: rgba(255, 255, 255, .04); border: 1px solid var(--aline); padding: 14px; width: 100%; border-radius: 0; min-width: 0; }
select option { background: var(--stone); color: var(--pearl); }
textarea { resize: vertical; line-height: 1.5; }
select:focus, textarea:focus { border-color: var(--aqua); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--aline); padding: 10px 14px; font-size: 14px; cursor: pointer; }
.chips label:has(input:checked) { border-color: var(--gold); background: rgba(212, 175, 90, .08); }
.chips input { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; }
.hp { position: absolute; left: -9999px; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.thanks { min-height: 70vh; display: grid; align-items: center; padding-block: 96px; }
.thanks .wrap { display: grid; gap: 22px; justify-items: center; text-align: center; }
.thanks .mark { width: 96px; filter: drop-shadow(0 0 22px rgba(60, 207, 203, .4)); }
.thanks .lede { margin-inline: auto; }
.thanks .verse { margin-top: 30px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 900px) {
  .teaser .wrap, .steps3 { grid-template-columns: 1fr; gap: 24px; }
  .steps3 li, .steps3 li + li { padding: 20px 0 0; border-left: 0; }
}
@media (max-width: 640px) {
  .two { grid-template-columns: 1fr; }
  .navlink { display: none; }
}
.steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rates-note { margin-bottom: 24px; }
@media (max-width: 900px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps4 { grid-template-columns: 1fr; } }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.role { border: 1px solid var(--aline); background: var(--ink); padding: 30px 26px; display: grid; gap: 12px; align-content: start; }
.role .k { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.role h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; }
.role ul { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--aline); display: grid; gap: 9px; }
.role li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; color: var(--mist); font-size: 14.5px; }
.role li::before { content: "◆"; color: var(--gold); font-size: 8px; line-height: 2.4; }
.proof { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pearl); text-align: center; }
.proof .t { color: var(--aqua); font-weight: 700; flex-basis: 100%; }
.proof span:not(.t)::before { content: "◆"; color: var(--gold); font-size: 8px; margin-right: 9px; vertical-align: 2px; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }
/* PMO showcase (hire page) */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.case { border: 1px solid var(--aline); background: var(--stone); padding: 24px 20px; display: grid; gap: 14px; align-content: start; }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ind { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.case h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; }
.badge { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--aqua); padding: 4px 8px; }
.viz { background: var(--ink); border: 1px solid var(--aline); padding: 14px; display: grid; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--pearl); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.kpis div { border: 1px solid var(--aline); padding: 6px 2px; }
.kpis b { display: block; font-family: var(--display); font-size: 20px; color: var(--pearl); font-weight: 500; }
.ok { color: #6FD7A3 !important; } .warn { color: #F0C463 !important; } .bad { color: #F29A8E !important; }
.ws { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--aline); }
.ws span { font-weight: 600; }
.ws small, .ms small { grid-column: 1 / -1; color: var(--mist); font-size: 12px; }
.pill { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; padding: 2px 6px; }
.bar { grid-column: 1 / -1; height: 6px; background: rgba(255, 255, 255, .08); }
.bar em { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua), var(--gold)); }
.gantt { display: grid; gap: 4px; }
.g-months, .g-row { display: grid; grid-template-columns: 74px repeat(6, minmax(0, 1fr)); gap: 3px; align-items: center; }
.g-months span { font-size: 10.5px; color: var(--mist); text-align: center; }
.g-row span { font-size: 12px; grid-column: 1; }
.g-row i { display: block; height: 12px; background: var(--aqua); grid-row: 1; }
.g-row i.soft { background: rgba(79, 216, 212, .35); }
.g-row .diamond { color: var(--gold); text-align: center; grid-row: 1; font-size: 14px; }
.raid { display: grid; gap: 6px; }
.raid div { border-top: 1px solid var(--aline); padding-top: 6px; font-size: 12.5px; }
.raid b { color: var(--gold); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }
.raid em { color: var(--mist); font-style: normal; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kanban h4 { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 4px; }
.kanban div { min-width: 0; }
.kanban p { overflow-wrap: anywhere; border: 1px solid var(--aline); padding: 6px; font-size: 12px; margin-bottom: 4px; }
.kanban div:first-child p { color: var(--mist); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.ms { display: grid; grid-template-columns: 1fr; gap: 4px; }
.ms span { font-weight: 600; }
.did { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.did li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.did li::before { content: "◆"; color: var(--gold); font-size: 8px; line-height: 2.4; }
.case-note { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--mist); }
@media (max-width: 980px) { .cases { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
/* Approved review block (only rendered when review.json exists) */
.review { margin: 0; border: 1px solid var(--line); padding: 20px; display: grid; gap: 12px; }
.rv { margin: 0; display: grid; gap: 8px; }
.rv dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.rv dd { margin: 0; }
.review blockquote { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.25; color: var(--pearl); }
.review figcaption { font-size: 13px; color: var(--mist); }
.ps, .ask { border-left: 2px solid var(--gold); padding-left: 10px; font-size: 13px; }
.ps b, .ask b, .sh b, .cf b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 2px; }
.cf { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.cf div { border: 1px solid var(--aline); padding: 8px; font-size: 12px; min-width: 0; }
.cf span { color: var(--gold); }
.sh { display: flex; flex-wrap: wrap; gap: 5px; }
.sh b { flex-basis: 100%; }
.sh span { border: 1px solid var(--aline); padding: 3px 7px; font-size: 11.5px; }
.sh span.hi { border-color: var(--gold); color: var(--gold); }
.moscow { display: grid; gap: 4px; }
.moscow div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; font-size: 12.5px; }
.moscow i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 2px 0; border: 1px solid currentColor; }
.must { color: #F29A8E; } .should { color: #F0C463; } .could { color: #6FD7A3; }
.sc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sc-grid div { border: 1px solid var(--aline); padding: 8px 6px; display: grid; gap: 4px; justify-items: start; min-width: 0; }
.sc-grid b { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.sc-grid small { font-size: 11px; color: var(--mist); line-height: 1.3; }
.ask { background: rgba(217, 184, 98, .07); padding: 8px 10px; }
.title-tag { font-family: var(--display); font-size: clamp(17px, 1.8vw, 21px); letter-spacing: .08em; color: var(--gold); line-height: 1.3; }
.title-tag span { display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--pearl); margin-top: 6px; }
@media (max-width: 640px) {
  .top .right { gap: 8px; }
  .top .btn.sm { padding: 9px 10px; font-size: 9.5px; letter-spacing: .1em; }
}
@media (max-width: 380px) { .top .right { gap: 6px; } .top .btn.sm { padding: 8px 7px; font-size: 8.5px; letter-spacing: .04em; } .brand img { height: 28px; } }
@media (max-width: 420px) { main .btn { white-space: normal; text-align: center; } }
.brand, .brand img { flex-shrink: 0; }
@media (max-width: 430px) { .top .wrap { gap: 10px; } .top .right { gap: 6px; } .top .btn.sm { padding: 9px 8px; font-size: 9px; letter-spacing: .05em; } .brand img { height: 28px; } }
.agree { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--pearl); cursor: pointer; }
.agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
.chips label { text-transform: none; letter-spacing: 0; }
.legal { padding-block: 72px 40px; }
.legal .wrap { max-width: 760px; }
.legal h1 { margin: 10px 0 24px; }
.legal h2 { font-family: var(--display); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 36px 0 10px; font-weight: 600; }
.legal p, .legal li { color: var(--pearl); font-size: 16px; line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; margin: 0; }
.legal a { color: var(--gold); }
.legal .toc { margin: 28px 0 8px; padding: 20px 24px; border: 1px solid var(--aline); background: var(--stone); }
.legal .toc ol { margin: 10px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.legal .toc li { font-size: 14px; line-height: 1.8; break-inside: avoid; }
.legal h2 { scroll-margin-top: 80px; }
@media (max-width: 640px) { .legal .toc ol { columns: 1; } }
.price-note.guarantee { margin-top: 10px; } .price-note a { color: var(--gold); }