/* Cold Approach AI web billing pages (/subscribe, /account), served by the coach server.
   Colors, type and the plan frame are COPIED from web/site.css (the marketing site, owned by
   another workstream), not imported, so the site can change without breaking these pages.
   One column, mobile first, at most 560px wide. No inline styles: the CSP is style-src 'self'. */

@font-face { font-family: "Cormorant Garamond"; src: url("/billing/assets/cormorant-garamond-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/billing/assets/outfit-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink-0: #050506;
  --ink-1: #1C1D20;
  --ink-2: #202124;
  --line: #494A4D;
  --line-soft: #2A2B2E;
  --text: #FFFFFF;
  --text-body: #E8E8EA;
  --text-2: #A7A8AD;
  --text-3: #8C8D92;
  --on-gold: #1C1D20;
  --gold: #F8D96B;
  --gold-2: #FFCB46;
  --gold-deep: #D89B00;
  --gold-grad: linear-gradient(85.82deg, #F8D96B 0%, #FFCB46 99.4%);
  --danger: #FF6B6B;
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Outfit", Arial, sans-serif;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --glow-btn: 0 0 0 1px rgba(248, 217, 107, 0.35), 0 10px 40px -12px rgba(255, 203, 70, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink-0); color: var(--text); font-family: var(--f-sans); font-weight: 300; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-body); background: linear-gradient(180deg, var(--ink-0) 0, var(--ink-1) 420px, var(--ink-0) 100%); min-height: 100vh; }
a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--gold-2); }
p { margin: 0 0 0.8em; }
h1, h2 { margin: 0; font-weight: 500; color: var(--text); }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { width: min(560px, 100% - 48px); margin-inline: auto; }

/* Header and wordmark, as on the site */
.top { border-bottom: 1px solid var(--line-soft); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--text); white-space: nowrap; }
.wm-name { font-family: var(--f-display); font-weight: 500; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.wm-ai { font-family: var(--f-sans); font-weight: 600; font-size: 13px; color: var(--gold); margin-left: 0.35em; }
.top-link { font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.top-link:hover { color: var(--gold); }

/* Type */
.kicker { font-weight: 500; font-size: 11px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.kicker--mute { color: var(--text-3); }
.h1 { font-family: var(--f-display); font-weight: 500; font-size: 44px; line-height: 1.04; letter-spacing: -0.005em; text-wrap: balance; }
.h2 { font-family: var(--f-display); font-weight: 500; font-size: 30px; line-height: 1.1; margin-bottom: 14px; text-wrap: balance; }
.lead { margin-top: 16px; font-size: 18px; color: var(--text-body); text-wrap: pretty; }
.fine { font-size: 14px; line-height: 1.6; color: var(--text-3); }
.fine a { color: var(--text-2); }
.note { font-size: 15px; color: var(--text-2); border-left: 2px solid var(--gold); padding: 4px 0 4px 12px; }
.error { color: var(--danger); font-size: 15px; }
strong { font-weight: 600; color: var(--text); }

main { padding: 40px 0 24px; }
.intro { margin-bottom: 28px; }
section + section { margin-top: 20px; }

/* Cards */
.card { background: rgba(28, 29, 32, 0.82); border: 1px solid var(--line-soft); padding: 24px 20px; }
.card > :last-child { margin-bottom: 0; }

/* Plans: the site's corner frame */
.plans { display: grid; gap: 14px; }
.frame { --c: var(--line); --arm: 14px; background:
    linear-gradient(var(--c), var(--c)) top left / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) top right / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) bottom left / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) bottom right / var(--arm) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--arm);
  background-repeat: no-repeat; }
.frame.is-gold, .frame[aria-pressed="true"] { --c: var(--gold); }
.plan { display: block; width: 100%; text-align: left; padding: 24px 22px; border: 0; color: inherit; background-color: rgba(28, 29, 32, 0.6); cursor: pointer; }
.plan .kicker { display: block; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; }
.amount { font-family: var(--f-display); font-weight: 500; font-size: 52px; line-height: 1; color: var(--text); font-variant-numeric: lining-nums; }
.per { font-weight: 300; font-size: 17px; color: var(--text-2); white-space: nowrap; }
.price-sub { display: block; margin-top: 8px; font-size: 15px; color: var(--text-2); }

/* Buttons, as on the site */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border: 0; border-radius: var(--r-pill); font-family: var(--f-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--gold-grad); color: var(--on-gold); transition: box-shadow 500ms var(--ease); }
.btn-primary:hover { color: var(--on-gold); box-shadow: var(--glow-btn); }
.btn-primary:active { background: var(--gold-deep); }
.btn-primary:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-outline:hover { background: rgba(248, 217, 107, 0.08); color: var(--gold-2); }
.btn-outline:disabled { opacity: 0.45; cursor: default; }
.btn-wide, .stack .btn { width: 100%; }
.link { background: none; border: 0; padding: 8px 0; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 15px; }

.stack { display: grid; gap: 12px; margin: 0 0 16px; }
.stack-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Long labels wrap instead of running out of the card on a 320px screen. */
.stack-row .btn { flex: 1 1 200px; min-width: 0; white-space: normal; height: auto; min-height: 56px; padding: 12px 24px; text-align: center; line-height: 1.3; }

/* Inputs, as on the site: a pill on ink-2 with a 1px rule */
label { font-size: 15px; color: var(--text-2); }
input[type="email"], input[inputmode="numeric"] { width: 100%; height: 52px; padding: 0 20px; background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-pill); }
input::placeholder { color: var(--text-3); }
input:focus { border-color: var(--gold); outline: none; }

.segmented { display: grid; gap: 8px; margin: 0 0 16px; }
.segmented label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-body); cursor: pointer; }
.segmented label:has(input:checked) { border-color: var(--gold); color: var(--text); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--gold); width: 20px; height: 20px; flex: none; }

.summary { margin: 0 0 12px; padding: 16px 16px 8px; background: var(--ink-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; color: var(--text-body); font-size: 16px; cursor: pointer; }
.check input { margin-top: 3px; }
.signed-in { color: var(--text-body); }
.notice { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); background: rgba(28, 29, 32, 0.82); }
.blocked { margin-top: 4px; }

.foot { border-top: 1px solid var(--line-soft); padding: 28px 0 calc(32px + env(safe-area-inset-bottom)); margin-top: 32px; font-size: 14px; color: var(--text-3); }
.foot p { margin-bottom: 8px; }
.foot a { color: var(--text-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (min-width: 640px) {
  .h1 { font-size: 56px; }
  .card { padding: 32px 32px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plans .fine { grid-column: 1 / -1; }
}
/* 320px phones: the wordmark and Account must not touch. */
@media (max-width: 359px) {
  .wm-name { font-size: 17px; letter-spacing: 0.05em; }
  .top-link { letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}