/* ═══════════════════════════════════════════════════════════════
   EmailGPT - pricing.css (loaded ONLY by /pricing/)
   Same brand tokens as styles.css, its own layout. All classes are
   .price-* / .plan-* / .buy-* / .faq-* so nothing collides with the
   homepage or with for-business.css.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   HERO - dark band, one column, text-led
══════════════════════════════════════ */
.price-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
}

.price-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13,148,136,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, black 0%, transparent 72%);
}

/* No max-width here: this element carries .container, so capping it would
   re-centre the block and leave the hero on a different left edge from the
   sections below. The measure is capped on the text itself instead. */
.price-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.price-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
}

.price-hero-title em {
  font-style: italic;
  color: var(--teal-light);
}

.price-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 56ch;
}

.price-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
}

.price-hero-meta li {
  font-size: 0.82rem;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  padding: 5px 14px;
}

/* ══════════════════════════════════════
   PLANS - two cards, yearly is the accent
══════════════════════════════════════ */
.price-plans {
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  background: var(--surface);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin-inline: auto;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
}

.plan--featured {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.plan--featured .plan-name { color: rgba(255,255,255,.6); }

.plan-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  border-radius: 99px;
  padding: 4px 12px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.plan-amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
}

.plan--featured .plan-amount { color: var(--white); }

.plan-unit {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.plan--featured .plan-unit { color: rgba(255,255,255,.6); }

.plan-note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-light);
}

.plan--featured .plan-note { color: rgba(255,255,255,.72); }

/* The difference block. Both cards list the SAME two lines: absent on
   Standard, present on Premium. That symmetry is the message, so the two
   lists share every rule except the mark. */
.plan-diff {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.plan--featured .plan-diff { border-top-color: rgba(255,255,255,.12); }

.plan-diff-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.plan--featured .plan-diff-label { color: rgba(255,255,255,.55); }

/* Client deck 25-08-2026 slide 5: "it is not clear what the differences are".
   Both cards listed the SAME two lines and the only difference was one word and
   a 12px glyph, so a scanner saw two identical lists. The label now names the
   state ("Not in Standard" / "Only in Premium"), the plain-language summary
   above says it in a sentence, and the not-included list is visually receded so
   the two cards no longer read the same at a glance. */
.plan-summary {
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}

.plan--featured .plan-summary { color: #fff; }

.plan-diff-label--plus { color: var(--teal); }

.plan--featured .plan-diff-label--plus { color: var(--teal-light); }

/* Not-included stays a fact, not a failure: receded, never red. */
.plan-list--minus li {
  color: var(--ink-muted);
  text-decoration-line: line-through;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-light);
}

.plan--featured .plan-list li { color: rgba(255,255,255,.75); }

.plan-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--teal-muted);
  color: var(--teal);
}

/* Not-included is a fact, not a failure: slate, never red. */
.plan-mark--minus {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.plan--featured .plan-mark--plus {
  background: rgba(13,148,136,.25);
  color: var(--teal-light);
}

.plan-action {
  margin-top: auto;
  padding-top: 8px;
}

.plan-foot {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.plan--featured .plan-foot { color: rgba(255,255,255,.6); }

.plan-foot a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;   /* the link wraps to its own line, never splits in two */
}

.plan--featured .plan-foot a { color: var(--teal-light); }

.price-tax {
  max-width: 900px;
  margin: 20px auto 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
}

.price-tax a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════
   HOW TO SUBSCRIBE - three steps
══════════════════════════════════════ */
.buy {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--white);
}

.buy-steps {
  list-style: none;
  counter-reset: buy-step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.buy-step {
  counter-increment: buy-step;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.buy-step::before {
  content: counter(buy-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
}

.buy-step h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.buy-step p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.buy-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}

/* The base .version-label is white-on-dark (hero); this section is white. */
.buy-cta .version-label {
  color: var(--ink-muted);
  padding-left: 4px;
}

/* ══════════════════════════════════════
   FAQ - plain, everything visible
══════════════════════════════════════ */
.faq {
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--surface);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-item h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.faq-item p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--ink-light);
  max-width: 58ch;
}

.faq-item a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-item a:hover,
.faq-item a:focus-visible { color: var(--teal); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  .buy-steps { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .plan-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .buy-cta { align-items: stretch; }
  .buy-cta .btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAN CHOOSER - /pricing/?t=<signed link>
   The desktop app has ONE Subscribe button; it opens this page with a
   15-minute signed link that says which mailbox is buying. Everything
   below is that mode. Without the link the page above is what a reader
   gets, and none of these rules apply.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Utility face for the one piece of DATA on this page: the mailbox the
     subscription lands on. Installed faces only, so it costs no request. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* The head script sets .chooser-mode on <html> before the first paint, so a
   buyer never sees the marketing page flash past, and a visitor with no link
   never sees an empty chooser. */
.chooser-only { display: none; }
.chooser-mode .chooser-only { display: block; }
.chooser-mode .prospect-only { display: none; }
[hidden] { display: none !important; }

/* Plans stay off screen until the link has been checked: showing prices before
   we know WHOSE mailbox this is would invite a click that cannot work. */
.chooser-mode .price-plans { display: none; }
.chooser-mode.chooser-ready .price-plans { display: block; }

/* A link refused before we learn the mailbox has no plan to choose and no
   address to show, so the hero would read "Choose the plan for" and stop. The
   refusal panel becomes the page instead. */
.chooser-mode.chooser-blocked .chooser-hero { display: none; }
.chooser-mode.chooser-blocked .chooser-status { padding-top: clamp(28px, 4vw, 48px); }

/* Nothing sits between the plans and the questions in this mode, so the two
   section paddings would stack into a hole. */
.chooser-mode .faq { padding-top: clamp(32px, 4vw, 56px); }

/* ══════════════════════════════════════
   CHOOSER HERO - the mailbox is the headline
══════════════════════════════════════ */
.chooser-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(44px, 6vw, 76px) 0 clamp(36px, 5vw, 60px);
}

.chooser-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.chooser-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* The signature of this page: the address arrives from the app, so it is shown
   as data, not prose, and long addresses wrap instead of stretching the band. */
.chooser-mailbox {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  line-height: 1.35;
  color: var(--white);
  background: rgba(13,148,136,.16);
  border: 1px solid rgba(20,184,166,.4);
  border-left: 3px solid var(--teal-light);
  border-radius: 10px;
  padding: 10px 16px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.chooser-mailbox-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,.7);
}

.chooser-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: var(--teal-light);
  border-radius: 50%;
  animation: chooser-spin .8s linear infinite;
}

@keyframes chooser-spin { to { transform: rotate(360deg); } }

.chooser-lead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 56ch;
}

/* Under three minutes the countdown turns amber. It is the failure a buyer is
   most likely to meet, so it is said before it happens, not after. */
.chooser-clock.is-urgent {
  color: var(--amber);
  background: rgba(252,211,77,.12);
  border-color: rgba(252,211,77,.35);
}

/* ══════════════════════════════════════
   BILLING PERIOD - one switch, both cards
══════════════════════════════════════ */
.period {
  display: flex;
  justify-content: center;
  border: 0;
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  padding: 0;
}

.period-options {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-sm);
}

.period-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.period-option:hover { color: var(--ink); }

input[name="period"]:checked + .period-option {
  background: var(--ink);
  color: var(--white);
}

input[name="period"]:focus-visible + .period-option {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.period-save {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  border-radius: 99px;
  padding: 3px 8px;
}

/* A period the buyer cannot be sold. The server refuses to shorten a yearly
   subscription into a monthly one, so once it has said so the option stops
   being offered rather than being offered and refused again. The reason is on
   screen right under it, never in a tooltip. */
input[name="period"]:disabled + .period-option {
  opacity: .55;
  cursor: not-allowed;
  text-decoration: line-through;
}

input[name="period"]:disabled + .period-option:hover { color: var(--ink-muted); }

.period-lock {
  max-width: 620px;
  margin: -8px auto clamp(18px, 2.4vw, 24px);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: center;
}

/* Prices swap with the radio through :has(), so the switch works with no
   JavaScript at all; pricing-checkout.js mirrors the same state onto
   .is-yearly for browsers without :has(). The price on screen must always be
   the price the button charges, in every browser. */
.plan-period {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan-period.period-yearly { display: none; }
.price-plans:has(#period-yearly:checked) .plan-period.period-monthly { display: none; }
.price-plans:has(#period-yearly:checked) .plan-period.period-yearly { display: flex; }
.price-plans.is-yearly .plan-period.period-monthly { display: none; }
.price-plans.is-yearly .plan-period.period-yearly { display: flex; }

/* ══════════════════════════════════════
   IN BOTH PLANS - said once, above the cards
══════════════════════════════════════ */
.both {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto clamp(18px, 2.4vw, 24px);
  padding: clamp(18px, 2.4vw, 24px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.both-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.both-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.both-list li {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-light);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 6px 14px;
}

/* ══════════════════════════════════════
   BUY - the two actions
══════════════════════════════════════ */
.chooser-banner {
  max-width: 900px;
  margin: 0 auto clamp(18px, 2.4vw, 24px);
  padding: 12px 18px;
  background: rgba(252,211,77,.16);
  border: 1px solid rgba(252,211,77,.65);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

.btn-plan {
  width: 100%;
  justify-content: center;
  border: 0;
  padding: 14px 24px;
  font-size: 1rem;
  background: var(--teal-dark);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-plan:hover:not(:disabled) {
  background: #075e56;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-plan:active:not(:disabled) { transform: none; }

.btn-plan:disabled {
  opacity: .7;
  cursor: progress;
  transform: none;
}

/* On the ink card the same teal would sit too close to its background, so the
   featured action goes lighter and takes ink text: 7:1 either way. */
.btn-plan--on-dark {
  background: var(--teal-light);
  color: var(--ink);
}

.btn-plan--on-dark:hover:not(:disabled) { background: #2dd4bf; }

/* A plan you already hold is not a dead button: a permanently disabled control
   is skipped by the keyboard and says nothing out loud, so it becomes text. */
.plan-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
}

.plan--featured .plan-status {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
}

.plan-flag {
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--teal-muted);
  border-radius: 99px;
  padding: 4px 10px;
}

.chooser-mode .plan-flag { display: inline-flex; }

.plan--featured .plan-flag {
  color: var(--ink);
  background: var(--teal-light);
}

.plan-caveat {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.plan--featured .plan-caveat { color: rgba(255,255,255,.65); }

/* ══════════════════════════════════════
   PANELS - link refused, payment taken
══════════════════════════════════════ */
.chooser-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: clamp(32px, 5vw, 56px) auto;
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.chooser-panel--ok { border-left-color: var(--teal); }

/* The quote is a decision point, not an outcome: it borrows the ink of the
   plan cards rather than the green of a finished thing or the amber of a
   refusal. Nothing has happened yet when this is on screen. */
.chooser-panel--quote { border-left-color: var(--ink); }

/* The figures. A definition list because they are labelled values, which is
   also what makes them read correctly out loud: "Due today, zero dollars". */
.quote {
  display: grid;
  gap: 2px;
  margin: 4px 0;
  padding: 14px 18px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.quote-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 6px 0;
}

.quote-row + .quote-row { border-top: 1px solid var(--border); }

.quote-row dt {
  font-size: 0.92rem;
  color: var(--ink-light);
}

.quote-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.chooser-panel-note {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* The one promise on this panel that is good news rather than a caveat. */
.chooser-panel-note--on { color: var(--teal-dark); font-weight: 600; }

/* Second action on a panel that already has a primary one: present, reachable,
   and clearly not the thing being recommended. */
.btn-quiet {
  width: auto;
  padding: 14px 24px;
  background: transparent;
  color: var(--ink-light);
  border: 1px solid var(--border-dark);
}

.btn-quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.chooser-panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: var(--ink);
}

/* The script moves focus here so the change is announced. The heading is not
   in the tab order, so this focus is ALWAYS programmatic and a ring around it
   would mark something the reader cannot act on. */
.chooser-panel-title:focus,
.chooser-panel-title:focus-visible { outline: none; }

.chooser-panel-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-light);
}

/* The address gets its own line because three different endings share this
   panel, and every one of them has to say WHICH mailbox it happened to. */
.chooser-panel-line { line-height: 1.6; }

.chooser-panel-mailbox {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

.chooser-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chooser-panel-actions .btn-plan { width: auto; }

.chooser-panel-foot {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.chooser-panel-foot a,
.chooser-panel-body a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════
   RESPONSIVE - a forwarded link opens on a phone
══════════════════════════════════════ */
@media (max-width: 560px) {
  .period-options { width: 100%; }
  .period-option { flex: 1; justify-content: center; padding: 10px 14px; }
  .both-list li { width: 100%; border-radius: var(--radius-sm); }
  .chooser-panel { margin-inline: 0; }
}