html, body { margin: 0; padding: 0; background: #060A18; }
body { color: #C8D8F0; font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; padding: 0 24px; min-height: 100vh; }
a { color: #5BA8A0; text-decoration: none; border-bottom: 1px solid rgba(91,168,160,0.35); }
a:hover { color: #7FC4BC; border-bottom-color: rgba(127,196,188,0.6); }
a.plain { color: inherit; border-bottom: none; }
::selection { background: rgba(201,151,63,0.25); }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 500; color: #E4EDFA; }
img { display: block; width: 100%; height: auto; border: 1px solid rgba(58,84,112,0.5); }

.page { max-width: 58rem; margin: 0 auto; padding: 26px 0 88px; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.dim { color: #5A7AA0; }
.gold-text { color: #C9973F; }

.top { display: flex; align-items: baseline; gap: 10px; padding-bottom: 96px; }
.wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; letter-spacing: 0.06em; color: #C8D8F0; border-bottom: none; }
.tag { font-size: 11px; letter-spacing: 0.14em; color: #5A7AA0; }

.eyebrow { font-size: 11.5px; letter-spacing: 0.16em; color: #5A7AA0; margin: 0 0 22px; }

.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 48px; align-items: center; padding-bottom: 104px; }
.hero .eyebrow { margin-bottom: 26px; }
h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(42px, 6.8vw, 72px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 28px; color: #E4EDFA; text-wrap: pretty; }
h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.15; margin: 0 0 16px; color: #E4EDFA; }
.gold { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 3.4vw, 32px); font-style: italic; color: #C9973F; line-height: 1.2; margin: 0 0 8px; }
.sub { font-size: 12px; letter-spacing: 0.1em; color: #5A7AA0; margin: 0 0 32px; }
.button { display: inline-block; color: #C9973F; border: 1px solid #C9973F; padding: 14px 28px; font-size: 15px; min-height: 44px; box-sizing: border-box; }
.button:hover { background: rgba(201,151,63,0.1); color: #DEAE58; border-color: #C9973F; }
figure { margin: 0; }
figcaption { font-size: 11.5px; letter-spacing: 0.06em; color: #5A7AA0; padding-top: 10px; }

.quote { padding-bottom: 104px; }
blockquote { margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4.6vw, 44px); font-style: italic; line-height: 1.28; color: #E4EDFA; max-width: 38rem; text-wrap: pretty; }
.cite { font-size: 11.5px; letter-spacing: 0.08em; color: #5A7AA0; }

.four { display: flex; flex-direction: column; padding-bottom: 104px; }
.row { display: flex; gap: 20px; border-top: 1px solid #1A2740; padding: 26px 0; }
.row.last { border-bottom: 1px solid #1A2740; }
.num { font-size: 11.5px; color: #C9973F; padding-top: 6px; }
.lead { margin: 0 0 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(23px, 3.2vw, 29px); font-style: italic; color: #E4EDFA; line-height: 1.3; }
.row p:not(.lead) { max-width: 34rem; }
.mark { font-style: normal; color: #E4EDFA; box-shadow: inset 0 -1px 0 rgba(201,151,63,0.55); }

.receipts { padding-bottom: 104px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.pair { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 44px; padding-bottom: 104px; }
.two .eyebrow { margin-bottom: 14px; }

.costs { padding-bottom: 96px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.cell { border-top: 1px solid #1A2740; padding-top: 16px; }
.price { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.06em; color: #C8D8F0; }
.note { margin-top: 36px; max-width: 40rem; color: #8FA6C4; }

.from-her { padding-bottom: 96px; max-width: 30rem; border-left: 1px solid #1A2740; padding-left: 24px; }
.from-her .eyebrow { margin-bottom: 18px; }
.from-her p + p { margin-top: 16px; }

.talk { padding-bottom: 72px; }
.talk .two { padding-bottom: 0; gap: 40px; align-items: start; }
.rule { height: 1px; background: #1A2740; margin-bottom: 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding-top: 6px; }
.actions a:not(.button) { font-size: 15px; }

footer { border-top: 1px solid #1A2740; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
.tiny { font-size: 11.5px; letter-spacing: 0.1em; color: #3A5470; }

/* terms page */
.terms { max-width: 41rem; }
.terms h1 { font-size: clamp(36px, 5.4vw, 56px); }
.terms section { padding-bottom: 56px; }
.terms h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(24px, 3.2vw, 30px); color: #E4EDFA; margin: 0 0 12px; line-height: 1.3; }
.terms p + p { margin-top: 14px; }
.terms table { border-collapse: collapse; margin: 18px 0 0; width: 100%; }
.terms td { border-top: 1px solid #1A2740; padding: 12px 16px 12px 0; vertical-align: top; }
.terms td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.04em; color: #C9973F; white-space: nowrap; }

/* the free hour form */
.hour { display: flex; flex-direction: column; gap: 18px; }
.hour label { display: flex; flex-direction: column; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em; color: #5A7AA0; }
.hour input, .hour select, .hour textarea { background: transparent; border: none; border-bottom: 1px solid #1A2740; color: #C8D8F0; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; padding: 10px 0; outline: none; min-height: 44px; letter-spacing: 0; border-radius: 0; }
.hour select { color: #C8D8F0; }
.hour select option { background: #060A18; color: #C8D8F0; }
.hour textarea { border: 1px solid #1A2740; padding: 12px; line-height: 1.6; resize: vertical; }
.hour input:focus, .hour select:focus { border-bottom-color: #5A7AA0; }
.hour textarea:focus { border-color: #5A7AA0; }
.hour ::placeholder { color: #3A5470; }
.hour fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hour legend { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em; color: #5A7AA0; padding: 0; margin-bottom: 8px; }
.hour .check { flex-direction: row; align-items: center; gap: 12px; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 0; color: #C8D8F0; cursor: pointer; }
.hour .check input { min-height: 0; width: 16px; height: 16px; margin: 0; accent-color: #C9973F; }
.hour .checks { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hour .hidden { display: none; }
.hour .button { background: transparent; cursor: pointer; font-family: inherit; }
.hour .button:disabled { opacity: 0.5; cursor: default; }
.hour .status { font-size: 12px; letter-spacing: 0.08em; color: #C9973F; min-height: 1.4em; }
.hour input:disabled, .hour select:disabled, .hour textarea:disabled { opacity: 0.6; }

/* the ladder */
.ladder { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px 22px; }
.ladder .step { flex: 1 1 200px; border-top: 1px solid #1A2740; padding-top: 16px; }
.ladder .step .lead { margin: 0 0 4px; }
.ladder .step p:last-child { color: #8FA6C4; }
.ladder .arrow { align-self: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; line-height: 1; color: #C9973F; padding-top: 12px; }
.then { margin-top: 44px; }
.monthly { display: flex; flex-direction: column; }
.monthly .line { display: flex; gap: 20px; align-items: baseline; border-top: 1px solid #1A2740; padding: 16px 0; }
.monthly .price { flex: 0 0 170px; margin: 0; }
.monthly .line + .line { border-top: 1px solid #1A2740; }
@media (max-width: 720px) { .ladder .arrow { display: none; } .monthly .price { flex-basis: 96px; } }

/* what the house includes */
.house { padding-bottom: 104px; }
.six { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px 40px; }
.six .item { border-top: 1px solid #1A2740; padding-top: 16px; }
.six .lead { margin: 0 0 4px; }
.six .item p:last-child { color: #8FA6C4; }