/* Mecavoy — the pricing page (pricing.html, body.page-pricing).
 *
 * Loaded after /styles.css and /ui.css, and built on the ui.css tokens and
 * components (.section, .section-head, .surface, .btn, .kicker, .ico-tile).
 * What ui.css has no component for is here: the heading band, the plan
 * cards and the guarantee panel. Class names avoid the legacy styles.css
 * names (.price, .perks, .offer, .fine and friends), whose rules are global.
 *
 * Motion: none. The page is read once, and read closely.
 */

/* The inline icon sprite: present for <use>, invisible and out of flow. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Running text breaks without leaving a single word alone on its last line. */
.page-pricing main p{text-wrap:pretty}

/* ══ 1. heading band ══════════════════════════════════════════════════════
   The photograph under a navy wash, as on the legal pages' heading. */
.price-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--c-navy-900);
  color:var(--c-on-navy-2);
}
.price-hero__bg,
.price-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.price-hero__bg{z-index:-2}
.price-hero__bg img{filter:saturate(.9) sepia(.07) contrast(1.03)}
.price-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,rgba(20,26,61,.95) 0%,rgba(20,26,61,.86) 52%,rgba(20,26,61,.7) 100%);
}
.price-hero__inner{padding-block:clamp(56px,8vw,104px)}
.price-hero .kicker{color:#F2B77A}
.price-hero .display-xl{max-width:16ch;margin-top:18px;font-size:clamp(38px,5.4vw,64px);color:#FBF7EF}
.price-hero__line{max-width:52ch;margin-top:20px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#FBF7EF}

/* ══ 2. plan cards ════════════════════════════════════════════════════════
   Three across for travelers and two for advisors; one column on phones.
   The Plus card is set apart by its border only, because it holds the
   founding offer. */
.plans{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,24px);
  align-items:start;
}
.plans--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}

.plan{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(22px,2.6vw,32px);
}
.plan--plus{border-color:var(--c-navy-400);box-shadow:var(--sh-3)}
.plan__name{font-size:clamp(20px,2vw,24px);font-weight:750;line-height:1.25;letter-spacing:-.012em;color:var(--c-ink)}
.plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.plan__amount{
  font-family:var(--f-display);
  font-size:clamp(40px,4.4vw,52px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--c-navy);
}
.plan__per{font-size:15px;font-weight:600;line-height:1.4;color:var(--c-ink-3)}
.plan__line{font-size:16px;line-height:1.55;color:var(--c-ink-2)}

.plan__list{
  display:grid;
  gap:10px;
  margin:4px 0 0;
  padding:16px 0 0;
  border-top:1px dashed var(--c-line-2);
  list-style:none;
}
.plan__list li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  align-items:start;
  font-size:16px;
  line-height:1.5;
  color:var(--c-ink-2);
}
.plan__list .ico{width:18px;height:18px;margin-top:3px;stroke-width:2.2;color:var(--c-ok)}

/* The founding offer on the Plus card: the claim, every condition beside it,
   then the button. */
.plan__offer{
  display:grid;
  gap:14px;
  margin-top:6px;
  padding:16px;
  border-radius:var(--r-md);
  background:var(--c-sun-100);
}
.plan__offer p{font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.plan__offer strong{color:var(--c-ink)}
.plan__offer .link{white-space:nowrap}
.plan__offer .btn{white-space:normal;text-align:center}

/* What applies to every card above it. */
.plans__notes{
  display:grid;
  gap:10px;
  max-width:72ch;
  margin-top:clamp(24px,3vw,32px);
}
.plans__notes p{font-size:15.5px;line-height:1.6;color:var(--c-ink-3)}
.plans__notes strong{color:var(--c-ink)}
.plans__cta{margin-top:clamp(24px,3vw,32px)}

/* ══ 3. the guarantee ═════════════════════════════════════════════════════ */
.guarantee{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:18px;
  align-items:start;
  max-width:880px;
  padding:clamp(22px,2.8vw,32px);
}
.guarantee .ico-tile .ico{width:22px;height:22px}
.guarantee__copy p{max-width:66ch;margin-top:10px;font-size:16px;line-height:1.6;color:var(--c-ink-2)}

/* ══ 4. narrower screens ══════════════════════════════════════════════════ */
@media (max-width:959px){
  .plans{grid-template-columns:minmax(0,1fr);max-width:560px}
  .plans--two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .guarantee{grid-template-columns:minmax(0,1fr)}
}

/* Phones: running text never below 16px, and 44px tap targets. */
@media (max-width:600px){
  .page-pricing :is(.plan__per,.plan__offer p,.plans__notes p){font-size:16px}
  .page-pricing .plan__offer .link{display:inline-flex;align-items:center;min-height:44px}
  .page-pricing .site-footer nav{gap:0}
  .page-pricing .site-footer nav a{padding-block:10px}
  .page-pricing .site-header__logo{padding-block:10px}
  body.ui.page-pricing .btn-sm{min-height:44px}
}