.plans-page { background: #f8f7f3; }
.plans-header { width: min(620px, calc(100% - 48px)); margin: 20px auto 0; display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; border: 1px solid #e8e8df; border-radius: 999px; background: #fffefa; }
.plans-wordmark { font-family: "Instrument Serif", Georgia, serif; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.plans-header > a:not(.plans-wordmark) { font-size: 11px; color: #747b68; }
.plans-page main { max-width: 1120px; padding: 0 24px; }
.plans-intro { text-align: center; padding: 76px 0 32px; }
.plans-intro .home-kicker { font-size: 9px; color: #7d856f; margin-bottom: 20px; }
.plans-page .plans-intro h1 { font-size: clamp(50px, 5.5vw, 78px); line-height: 1.02; }
.plans-intro > p:last-child { font-size: 13px; line-height: 1.85; color: #777f6c; margin-top: 24px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan-option { display: flex; flex-direction: column; min-width: 0; padding: 28px 24px 22px; border: 1px solid #e4e7dc; border-radius: 19px; background: #fffefa; }
.plan-free { --plan-bg: url('assets/plans/free.jpg'); }
.plan-pro { --plan-bg: url('assets/plans/pro.jpg'); }
.plan-max { --plan-bg: url('assets/plans/max.jpg'); }
.plan-free, .plan-pro, .plan-max { background: var(--plan-bg) center/cover; transition: transform 220ms ease; }
.plan-free:hover, .plan-pro:hover, .plan-max:hover { transform: scale(1.025); z-index: 2; }
.plan-free *, .plan-pro *, .plan-max * { font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35); transition: color 200ms ease, text-shadow 200ms ease; }
.plan-free:hover *, .plan-pro:hover *, .plan-max:hover * { color: #000; text-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 26px rgba(255, 255, 255, .85); }
.plan-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 9px; margin-bottom: 22px; }
.plan-label > span { border: 1px solid #dbe2d2; padding: 3px 6px; border-radius: 4px; font-size: 8px; white-space: nowrap; background: #fffefa; color: #4b5340; text-shadow: none; }
.plans-page .plan-option h2 { font-size: 42px; margin-bottom: 21px; font-weight: 700; -webkit-text-stroke: .4px rgba(0, 0, 0, .12); }
.plan-price { display: flex; align-items: baseline; gap: 7px; font-size: 36px; font-weight: 700; letter-spacing: -.04em; line-height: 1.3; }
.plan-price-was { position: relative; display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: 0; text-decoration: none; }
.plan-price-was::after { content: ""; position: absolute; left: -8%; right: -8%; top: 50%; height: 2px; background: #d8382c; transform: translateY(-50%) rotate(-16deg); }
.plan-price > span { font-size: 10px; font-weight: 700; letter-spacing: 0; }
.plan-price-pending { font-size: 22px; letter-spacing: -.025em; min-height: 47px; align-items: center; }
.plan-description { margin-top: 14px; min-height: 45px; font-size: 12px; line-height: 1.8; }
.plan-option ul { list-style: none; padding: 22px 0; margin: 20px 0 26px; border-top: 1px solid #e5e8df; flex: 1; }
.plan-option li { font-size: 11px; padding: 6px 0 6px 19px; position: relative; line-height: 1.7; }
.plan-option li::before { content: "✓"; position: absolute; left: 0; }
.plan-action { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #33402c; border-radius: 16px; padding: 13px 15px; background: #33402c; color: #fffef5; font-size: 11px; font-weight: 500; }
.plan-action:hover { background: #46553c; }
.plan-action-outline { background: #fffdf680; color: #57634b; border-color: #d7dece; }
.plan-action-outline:hover { background: #eaf0e1; }
/* Each plan's download button sits as real glass over that plan's photo: no
   painted copy of the image, just a blur of whatever the card shows behind it. */
.plan-option .plan-action, .plan-option .plan-action-outline {
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .1));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -6px 14px rgba(255, 255, 255, .08), 0 8px 22px rgba(20, 30, 10, .18);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.plan-option .plan-action:hover, .plan-option .plan-action-outline:hover {
  background: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -6px 14px rgba(255, 255, 255, .12), 0 12px 28px rgba(20, 30, 10, .24);
  transform: scale(1.04);
}
.plan-option .plan-action *, .plan-option .plan-action-outline * { text-shadow: inherit; }
.plan-footnote { text-align: center; font-size: 9px; margin-top: 12px; }
.plans-disclosure { font-size: 11px; color: #7c8570; text-align: center; padding: 23px 8px; }
.plans-reassurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; padding: 58px 20px; }
.plans-reassurance span { display: block; font-size: 10px; color: #859475; margin-bottom: 16px; }
.plans-page .plans-reassurance h3 { font-size: 29px; }
.plans-reassurance p { color: #79856c; font-size: 11px; margin-top: 12px; line-height: 1.8; }
.plans-questions { width: min(640px, 100%); margin: 35px auto 80px; }
.plans-page .plans-questions h2 { font-size: 40px; text-align: center; margin-bottom: 35px; }
.plans-questions details { border-bottom: 1px solid #dfe4d6; padding: 18px 0; }
.plans-questions summary { cursor: pointer; font-size: 12px; }
.plans-questions p { color: #78846b; margin-top: 14px; font-size: 12px; }
.plans-footer { max-width: 1120px; margin: auto; padding: 26px 24px 35px; display: flex; align-items: center; gap: 25px; border-top: 1px solid #e2e6d8; }
.plans-footer p { margin-right: auto; color: #819073; font-size: 10px; }
.plans-footer > a:not(.plans-wordmark) { font-size: 11px; color: #7c8771; }

/* A portrait download card, with the reference's soft color wash and bold type. */
.plans-page .install-card { width: min(600px, 100%); padding: 32px 38px 30px; border-radius: 32px; background: radial-gradient(ellipse at 3% 0%, #bfdeffb3, transparent 49%), radial-gradient(ellipse at 100% 0%, #dff4b6c7, transparent 47%), #fff; box-shadow: 0 28px 100px #25334825; color: #292832; text-align: center; }
.plans-page .install-card .modal-close { top: 23px; right: 23px; width: 36px; height: 36px; background: #ffffff6e; color: #274243; font-size: 26px; }
.install-visual { position: relative; height: 260px; display: flex; align-items: center; justify-content: center; padding-top: 10px; }
.install-window { width: 256px; padding: 21px 16px 15px; background: #ffffffb3; border: 1px solid #ffffffbf; border-radius: 18px; box-shadow: 0 15px 45px #4157661a, 0 0 0 8px #ffffff26; text-align: left; transform: translateX(-18px); }
.install-window > strong { display: block; font-size: 12px; font-weight: 600; margin: 0 0 19px; color: #263939; }
.install-window > div { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 9px 6px; font-size: 10px; color: #7b8583; border-radius: 9px; }
.install-window small { font-size: 8px; margin-left: auto; }
.install-tick, .install-dot, .install-empty { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px #ffffff73; flex-shrink: 0; }
.install-tick { background: #57c268; color: #fff; }
.install-dot { background: linear-gradient(135deg, #5cdaec, #6572f2); }
.install-empty { background: #eaf0f2; }
.install-window > .install-current { background: #fff9; color: #354646; box-shadow: 0 4px 12px #25383806; }
.install-float { position: absolute; right: -2px; top: 147px; display: flex; align-items: center; gap: 9px; text-align: left; padding: 16px; border: 1px solid #fff9; background: #ffffffd9; border-radius: 14px; box-shadow: 0 9px 25px #2538380a; font-size: 10px; color: #304044; line-height: 1.5; }
.install-float > span { display: grid; place-items: center; width: 24px; height: 24px; background: #e4f5ec; border-radius: 50%; font-size: 17px; }
.install-steps { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 17px 0 35px; }
.install-steps li { width: 6px; height: 6px; border-radius: 999px; background: #e6e7e8; }
.install-steps [aria-current] { width: 17px; background: #292832; }
.install-plan { font-size: 8px; font-weight: 500; letter-spacing: .15em; color: #788581; margin-bottom: 13px; }
.plans-page .install-card h2 { font-family: "Geist", sans-serif; font-weight: 600; font-size: 34px; letter-spacing: -.045em; line-height: 1.12; margin: 0 0 18px; }
.install-copy > #dl-description { font-size: 13px; line-height: 1.85; color: #818b88; }
.install-version { display: inline-block; margin: 20px 0 8px; padding: 6px 12px; background: #f4f6f4; border-radius: 6px; font-size: 11px; color: #5c7167; }
.install-compatibility { font-size: 9px; color: #818b88; }
.install-actions { display: flex; justify-content: center; gap: 9px; margin-top: 27px; flex-wrap: wrap; }
.install-actions > * { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 13px 20px; border: 0; border-radius: 10px; font-size: 11px; font-weight: 500; }
.install-back { background: #f3f3f3; color: #484950; }
.install-download, .install-retry { background: #2c2832; color: #fff; }
.install-download:hover, .install-retry:hover { background: #46404e; }
.install-download:disabled { opacity: .6; cursor: wait; }
.install-bottom-note { font-size: 9px; color: #8a928f; margin-top: 17px; }
.install-status { font-size: 11px; color: #786959; line-height: 1.6; margin-top: 15px; }
.install-status:empty { display: none; }
.plans-page .plan-notify-card { background: #fffefa; padding: 40px; }
.plan-notify-card .home-kicker { margin-bottom: 18px; font-size: 9px; color: #83916f; }
.plan-notify-card > p:not(.home-kicker) { color: #758269; font-size: 13px; margin: 16px 0 24px; }
.plan-notify-card label { font-size: 11px; }
.plan-notify-card form { gap: 12px; }
.plan-notify-card .plan-action { justify-content: center; }
@media (max-width: 800px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 470px; margin: auto; }
  .plan-description { min-height: 0; }
  .plan-option ul { margin-bottom: 10px; }
  .plans-reassurance { grid-template-columns: 1fr; gap: 30px; max-width: 470px; margin: auto; padding: 42px 12px; }
}
@media (max-width: 620px) {
  .plans-header { width: calc(100% - 28px); margin-top: 14px; padding: 10px 16px; }
  .plans-header > a:last-child { display: none; }
  .plans-intro { padding-top: 52px; }
  .plans-page .install-card { padding: 35px 22px 25px; border-radius: 25px; }
  .install-visual { height: 225px; }
  .install-window { width: 220px; padding: 18px 12px 12px; transform: translateX(-8px); }
  .install-window > strong { font-size: 11px; }
  .install-window > div { font-size: 9px; gap: 7px; }
  .install-float { right: -6px; top: 160px; font-size: 9px; padding: 11px; }
  .install-float > span { display: none; }
  .install-steps { margin: 15px 0 28px; }
  .plans-page .install-card h2 { font-size: 29px; }
  .install-copy > #dl-description { font-size: 12px; }
  .install-copy br { display: none; }
  .install-copy h2 br { display: block; }
  .install-actions { gap: 7px; }
  .install-actions > * { padding: 12px; font-size: 10px; gap: 8px; }
  .plans-footer { flex-wrap: wrap; gap: 18px; }
  .plans-footer p { flex-basis: 60%; }
  .plans-page .plan-notify-card { padding: 35px 24px; }
}