/*
  MotoRev Pro: a membership plate. The hero is a license plate stamped PRO with the three
  rates under it. Then the perks as a numbered grid with what stays free in the last cell,
  Free and Pro side by side, the plans as three price columns with Yearly ruled in the
  signal color, and Good to Know as lettered fine print with the renewal note.
*/

.fp--pro { --rule: rgba(244,243,238,0.14); --rule-2: rgba(244,243,238,0.4); }

.xkick { margin: 0 0 clamp(20px, 2vw, 32px); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.xhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(30px, 5vw, 140px); align-items: end; padding-bottom: clamp(28px, 2.6vw, 44px); margin-bottom: clamp(36px, 3.4vw, 60px); border-bottom: 1px solid var(--rule-2); }
.fp--pro main section:not(.ffinale) h2 { font-size: clamp(2.3rem, 3.8vw, 5.2rem); font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; margin: 0; }
.xhead p { margin: 0; font-size: clamp(1.05rem, 1.2vw, 1.45rem); line-height: 1.6; color: #cfd2d6; max-width: 40rem; }

/* ---------- Hero: the plate ---------- */

.xhero { padding: clamp(124px, 14vh, 180px) 0 clamp(70px, 7vw, 140px); }
.xhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 140px); align-items: center; }
.xhero h1 { font-size: clamp(2.9rem, 5.6vw, 8rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; margin: 0; max-width: 11ch; }
.xhero__lede { font-size: clamp(1.1rem, 1.25vw, 1.55rem); line-height: 1.6; color: #dcdee2; max-width: 40rem; margin: clamp(22px, 2vw, 34px) 0 clamp(26px, 2.4vw, 40px); }

.xplate-wrap { width: min(100%, 980px); justify-self: end; }
.xplate { position: relative; aspect-ratio: 2 / 1; border: clamp(3px, 0.28vw, 5px) solid #d6d8db; border-radius: clamp(14px, 1.4vw, 26px); background: var(--asphalt-2); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 2vw, 38px) clamp(22px, 2.6vw, 50px); container-type: inline-size; }
.xplate::before { content: ""; position: absolute; inset: clamp(6px, 0.6vw, 11px); border: 1px solid rgba(244,243,238,0.22); border-radius: clamp(9px, 0.9vw, 16px); pointer-events: none; }
.xplate p { margin: 0; }
.xplate__bolt { position: absolute; top: 9%; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; border: 2px solid #5b636e; background: var(--asphalt); }
.xplate__bolt--l { left: 22%; }
.xplate__bolt--r { right: 22%; }
.xplate__top, .xplate__foot { display: flex; justify-content: space-between; font-size: 3cqw; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--legend-dim); }
.xplate__top span:first-child { color: var(--legend); }
.xplate__foot { justify-content: center; gap: 5cqw; color: var(--legend-mute); font-size: 2.4cqw; }
.xplate__mark { align-self: center; text-align: center; font-size: 30cqw; font-weight: 900; line-height: 0.82; letter-spacing: 0.04em; color: var(--legend); padding: 2cqw 0 0 0.04em; }
.xplate__tag { position: absolute; right: 5%; bottom: 13%; display: grid; gap: 0.5cqw; padding: 1.3cqw 1.8cqw; border: 2px solid var(--signal); border-radius: 4px; text-align: center; transform: rotate(-4deg); }
.xplate__tag small { font-size: 1.6cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.xplate__tag b { font-size: 2.4cqw; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }

.xrates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(22px, 2vw, 34px) 0 0; border-top: 1px solid var(--rule-2); }
.xrates div { padding: 16px 0 0; }
.xrates div + div { padding-left: clamp(16px, 1.6vw, 30px); border-left: 1px solid var(--rule); }
.xrates dt { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); margin-bottom: 8px; }
.fp .xrates dd { font-family: var(--font); font-variant-numeric: tabular-nums; margin: 0; font-size: clamp(1.4rem, 1.9vw, 2.6rem); font-weight: 700; color: var(--legend); }
.xrates .is-best dt { color: var(--signal); }

/* ---------- Perks and Free next to Pro ---------- */

.xperks { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.xperks .xhead { border-bottom: 0; padding-bottom: 0; }
.xgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--legend); }
.xgrid li { position: relative; padding: clamp(24px, 2.2vw, 40px) clamp(20px, 2vw, 40px) clamp(30px, 2.6vw, 48px) 0; border-bottom: 1px solid var(--rule); }
.xgrid li:not(:nth-child(4n + 1)) { padding-left: clamp(20px, 2vw, 40px); border-left: 1px solid var(--rule); }
.xgrid__no { display: block; font-size: 13px; color: var(--legend-mute); margin-bottom: clamp(26px, 2.4vw, 44px); }
.xgrid__ic { position: absolute; top: clamp(20px, 2vw, 36px); right: clamp(20px, 2vw, 40px); width: clamp(28px, 2.2vw, 40px); height: clamp(28px, 2.2vw, 40px); color: var(--signal); }
.xgrid h3 { margin: 0 0 10px; font-size: clamp(1.3rem, 1.5vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.xgrid p { margin: 0; font-size: clamp(1rem, 1.05vw, 1.25rem); line-height: 1.6; color: #cfd2d6; max-width: 30rem; }
.xgrid__free .xgrid__no { color: var(--legend); }
.xgrid__free h3 { color: var(--legend-dim); }

.xcmp { width: 100%; margin-top: clamp(60px, 6vw, 110px); border-collapse: collapse; table-layout: fixed; }
.xcmp th, .xcmp td { text-align: left; padding: clamp(14px, 1.2vw, 20px) 20px clamp(14px, 1.2vw, 20px) 0; border-bottom: 1px solid var(--rule); font-weight: 400; font-size: clamp(15px, 1vw, 18px); color: var(--legend-dim); vertical-align: baseline; }
.xcmp thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); border-bottom: 3px solid var(--legend); }
.xcmp thead th:last-child { color: var(--signal); }
.xcmp tbody th { font-weight: 700; color: var(--legend); width: 26%; }
.xcmp td:last-child { color: var(--legend); }

/* ---------- Plans ---------- */

.xplans { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.xcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 32px); }
.xcol { padding: clamp(26px, 2.4vw, 46px); border: 1px solid var(--rule-2); border-radius: 6px; display: flex; flex-direction: column; }
.xcol--best { border: 2px solid var(--signal); }
.xcol h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: clamp(1.2rem, 1.3vw, 1.6rem); font-weight: 800; }
.xcol h3 span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.xcol__price { display: flex; align-items: baseline; gap: 12px; margin: clamp(30px, 3vw, 56px) 0 clamp(14px, 1.2vw, 22px); }
.fp .xcol__price b { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: clamp(3.4rem, 5.4vw, 7.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--legend); }
.xcol__price span { font-size: 15px; color: var(--legend-mute); }
.xcol p:last-child { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: clamp(1rem, 1.05vw, 1.25rem); color: #cfd2d6; }
.xnote { margin: clamp(26px, 2.4vw, 40px) 0 0; font-size: 15px; line-height: 1.6; color: var(--legend-dim); max-width: 52rem; }

/* ---------- Good to Know: the fine print ---------- */

.xfine { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.xfine__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 30px clamp(40px, 5vw, 140px); align-items: start; }
.xterms { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 3vw, 70px); border-top: 3px solid var(--legend); }
.xterms div { padding: clamp(20px, 1.8vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.xterms dt { display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px; font-size: clamp(1.1rem, 1.2vw, 1.45rem); font-weight: 800; color: var(--legend); }
.xterms dt span { font-size: 13px; color: var(--signal); }
.xterms dd { margin: 0; padding-left: 27px; font-size: clamp(1rem, 1.05vw, 1.2rem); line-height: 1.6; color: #cfd2d6; }
.xfine__note { grid-column: 2; margin-top: 0; }

/* ---------- Narrower screens ---------- */

@media (max-width: 1280px) {
  .xhero__grid { grid-template-columns: minmax(0, 1fr); }
  .xplate-wrap { justify-self: start; width: min(100%, 760px); }
  .xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xgrid li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .xgrid li:nth-child(2n) { padding-left: clamp(20px, 2vw, 40px); border-left: 1px solid var(--rule); }
  .xfine__grid { grid-template-columns: minmax(0, 1fr); }
  .xfine__note { grid-column: auto; }
}

@media (max-width: 900px) {
  .xhead { grid-template-columns: minmax(0, 1fr); }
  .xcols { grid-template-columns: minmax(0, 1fr); }
  .xterms { grid-template-columns: minmax(0, 1fr); }
  .xcmp tbody th { width: 34%; }
}

@media (max-width: 600px) {
  .xgrid { grid-template-columns: minmax(0, 1fr); }
  .xgrid li, .xgrid li:nth-child(2n) { padding-left: 0; padding-right: 56px; border-left: 0; }
  .xgrid__ic { right: 0; }
  .xcmp th, .xcmp td { padding-right: 12px; font-size: 14px; }
  .xcmp tbody th { width: 30%; }
  .xrates dd { font-size: 1.3rem; }
}