/* The pricing page: a letter. Needs site.css. The two visualizations and the floor-plan comparison have their own
   stylesheets (losses.css, hunt.css). */

.letter { --measure: 34rem; }
.letter .wrap { max-width: 1040px; }
.letter .prose, .letter .opening, .letter .footnotes { max-width: calc(var(--measure) + 2 * clamp(16px, 4vw, 44px)); }

/* ---------- reveal: each line rises in once ---------- */
.reveal { opacity: 0; translate: 0 18px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; translate: none; }

/* ---------- opening: the greeting, then the question with the price in it ---------- */
.opening { padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.salutation {
  margin: 0 0 clamp(22px, 3vw, 34px); font-family: var(--f-display); font-weight: 600; font-variation-settings: "opsz" 48;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink-2);
}
.ask { margin: 0; font-weight: inherit; }
.ask-lead {
  display: block; font-family: var(--f-display); font-weight: 650; font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05; letter-spacing: -.028em; color: var(--ink);
}
.headline-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; margin-top: .06em; font-family: var(--f-display); }
.price-xl {
  display: inline-flex; align-items: baseline; font-weight: 750; font-variation-settings: "opsz" 96;
  font-size: clamp(88px, 15vw, 188px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  position: relative;
}
.ask { position: relative; z-index: 0; }
:is(.price-xl, .plan-price) .cur { font-size: .5em; letter-spacing: -.01em; margin-right: .04em; align-self: flex-start; margin-top: .14em; font-weight: 650; }
/* A three-letter code (CAD) sits smaller and in mono so it reads as a label, not a number. */
:is(.price-xl, .plan-price) .has-code .cur, .has-code > .cur { font-family: var(--f-mono); font-size: .26em; font-weight: 500; letter-spacing: .02em; margin: .5em .3em 0 0; color: var(--ink-2); }
:is(.price-xl, .plan-price) .dec { font-size: .5em; letter-spacing: -.02em; align-self: flex-start; margin-top: .14em; }
.per { font-size: clamp(26px, 3.2vw, 42px); font-weight: 650; letter-spacing: -.025em; }

/* the asterisk: hover, focus or a tap shows "when billed annually" (pricing.js); the footnote says it in full */
.fn-ref {
  position: relative; vertical-align: .55em; margin: 0 .02em 0 .04em; padding: 0 .06em;
  font: inherit; font-size: .62em; font-weight: 700; line-height: 1; color: var(--brass);
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fn-ref .tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; white-space: nowrap; pointer-events: none;
  font: 500 14px/1 var(--f-body); letter-spacing: 0; color: var(--bg); background: var(--ink);
  padding: 8px 11px; border-radius: 8px; box-shadow: var(--shadow); opacity: 0; transition: opacity .18s, translate .18s;
}
.fn-ref .tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.fn-ref:is(:hover, :focus-visible, .open) .tip { opacity: 1; translate: -50% 0; }


/* ---------- the letter's body ---------- */
.prose { padding-block: clamp(8px, 2vw, 24px); }
.prose p {
  margin: 0 0 1.05em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.62; color: var(--ink); text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.prose a { text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--hl); }
.viz { margin: .4em 0 1.6em; }

/* ---------- the comparison ---------- */
.compare { padding-block: clamp(26px, 4vw, 48px) clamp(40px, 6vw, 80px); }

/* ---------- plans ---------- */
.plans-sec { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 100px); display: grid; gap: 18px; }
.plans-sec > .body-l { max-width: 34em; }
.plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(14px, 2.4vw, 30px); align-items: stretch;
}
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; } }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(20px, 2.4vw, 28px); border-radius: 18px; background: var(--card); box-shadow: var(--shadow);
  transition: translate .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.plan:hover { translate: 0 -3px; box-shadow: var(--shadow-lg); }
.plan-main { box-shadow: 0 0 0 2px var(--hl), 0 0 26px -6px var(--hl), var(--shadow); }
.plan-main:hover { box-shadow: 0 0 0 2px var(--hl), 0 0 34px -4px var(--hl), var(--shadow-lg); }
.plan-name { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -.015em; }
.plan-for { margin: 0; font-size: 15px; color: var(--ink-2); }
.plan-price {
  margin: 14px 0 0; display: flex; align-items: baseline; font-family: var(--f-display); font-weight: 750;
  font-size: clamp(48px, 5vw, 62px); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.plan-price > span { display: inline-flex; align-items: baseline; }
.plan-term { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-3); }
.plan-btn { margin-top: auto; justify-content: center; border: 0; cursor: pointer; font-family: inherit; }
.plan-btn:disabled { opacity: .6; cursor: progress; }
.plan:not(.plan-main) .plan-btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), 0 0 0 0 transparent; }
.plan:not(.plan-main) .plan-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.checkout-note { margin: 4px 0 0; min-height: 1.5em; font-size: 15px; color: var(--ink-2); opacity: 0; translate: 0 6px; }
.checkout-note.show { opacity: 1; translate: none; transition: opacity .3s, translate .3s; }

/* ---------- closing ---------- */
.closing { padding-block: clamp(20px, 4vw, 40px) clamp(40px, 6vw, 70px); }
.call-me .live {
  display: inline-block; width: 8px; height: 8px; margin: 0 0 .12em .38em; border-radius: 50%; vertical-align: middle;
  background: #30A46C; box-shadow: 0 0 0 0 rgba(48, 164, 108, .5); animation: live 2.2s ease-out infinite;
}
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(48, 164, 108, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(48, 164, 108, 0); } }
.signoff {
  margin-top: 1.6em !important; font-family: var(--f-display); font-weight: 650; font-size: clamp(24px, 2.4vw, 30px) !important;
  letter-spacing: -.02em;
}

/* ---------- footnotes ---------- */
.footnotes { padding-block: 0 clamp(48px, 7vw, 90px); }
.footnotes p { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); max-width: 40em; }
.fn-back { color: var(--brass); font-weight: 700; text-decoration: none; margin-right: .2em; }
.footnotes :target, #fn-annual:target { color: var(--ink-2); }
.letter + .foot { background: transparent; }

/* room between the price (and its term) and the button, which sits at the bottom so the three line up */
.plan > :nth-last-child(2) { margin-bottom: 18px; }