/* ==========================================================================
   page-pricing.css
   ==========================================================================
   Loads after page-home.css and inherits its tokens, bar, buttons, questions
   and footer. Only the plan cards and the billing toggle are new — a pricing
   page that looks like a different site from the homepage that sent you there
   is a reason to hesitate at exactly the wrong moment.
   ========================================================================== */

/* page-home.css caps its column at 1080px, which is right for reading and one
   card too narrow for five plans — they wrapped four-and-one, leaving Scale
   stranded on its own row looking like an afterthought. Widened for the header
   and the cards only. */
.pr-head .hm-wrap,
.pr-plans-sec .hm-wrap { max-width: 1240px; }

.pr-head { padding: clamp(44px, 6vw, 72px) 0 clamp(24px, 3vw, 34px); }
.pr-head h1 {
    margin: 0 0 14px;
    max-width: 20ch;
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}
.pr-head-sub {
    margin: 0 0 28px;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   Billing period
   -------------------------------------------------------------------------- */

.pr-billing {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--h-line);
    border-radius: 999px;
    background: #fff;
}
.pr-billing-opt {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--h-ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.pr-billing-opt.is-on { background: var(--h-accent); color: #fff; }
.pr-billing-opt:not(.is-on):hover { color: var(--h-ink); }

/* --------------------------------------------------------------------------
   The plan cards

   Five plans. auto-fit rather than a fixed count: forcing five onto one row
   makes each too narrow to read, and forcing them into fours strands the fifth
   on a line of its own looking like an afterthought.
   -------------------------------------------------------------------------- */

.pr-plans-sec { padding: 0 0 clamp(48px, 6vw, 76px); }
.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border: 1px solid var(--h-line);
    border-radius: var(--h-r, 12px);
    background: #fff;
}
/* a border, not a colour wash: a wash makes the other plans look broken rather
   than making this one look chosen */
.pr-card.is-featured { border-color: var(--h-accent); box-shadow: 0 0 0 1px var(--h-accent); }
.pr-card.is-current  { border-color: var(--h-ink-3); }

.pr-tag {
    position: absolute;
    top: -10px; left: 20px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--h-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pr-tag.is-now { background: var(--h-ink-2); }

.pr-card h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 680; letter-spacing: -.02em; }
.pr-blurb {
    margin: 0 0 16px;
    min-height: 2.6em;          /* keeps the prices level across the row */
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--h-ink-3);
}

.pr-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 4px; min-height: 44px; }
.pr-price strong { font-size: 32px; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pr-price span { font-size: 11.5px; line-height: 1.35; color: var(--h-ink-3); }

.pr-doors {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--h-line);
    font-size: 13.5px;
    color: var(--h-ink-2);
}
.pr-doors b { color: var(--h-ink); font-weight: 680; }

/* ⚠️ `flex: 1 1 auto` IS LOAD-BEARING. It is what makes each card fill its
   equal-height row so every button lands on the same line. Removing this list
   collapsed the cards to their content height and produced a visible jump on
   load; several attempts to move the job to another element each broke
   something else — stretching `.pr-doors` dragged its border-bottom down with
   it. Leave the list in place. */
.pr-specs {
    flex: 1 1 auto;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.pr-specs li { padding: 5px 0; font-size: 12.5px; line-height: 1.45; color: var(--h-ink-2); }

.pr-card .hm-btn { width: 100%; }
.pr-card .hm-btn.is-disabled {
    background: var(--h-bg-2);
    border-color: var(--h-line);
    color: var(--h-ink-3);
    cursor: default;
}

/* --------------------------------------------------------------------------
   Included lists
   -------------------------------------------------------------------------- */

.pr-included {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 24px;
    margin-bottom: 8px;
}
.pr-included div {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 14.5px;
    color: var(--h-ink-2);
}
.pr-included div::before {
    content: "";
    position: absolute;
    left: 2px; top: 15px;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--h-ink-3);
}
.pr-included.is-open div::before { background: var(--h-accent); }

.pr-second-head { margin-top: clamp(36px, 5vw, 52px); }

/* --------------------------------------------------------------------------
   RESPONSIVE — KEEP LAST
   A plain rule written after a media query beats it at equal specificity.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .pr-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-blurb { min-height: 0; }
    .pr-price { min-height: 0; }
    .pr-billing { width: 100%; }
    .pr-billing-opt { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 13px; }
}

/* Checkout failure notice. Amber rather than red: nothing has been charged and
   nothing of theirs is broken — it is our configuration that failed. */
.pr-error {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 165, 36, .38);
    border-left: 4px solid #f5a524;
    border-radius: 10px;
    background: #FFF8EC;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--h-ink-2, #4E585E);
}
.pr-error strong { color: var(--h-ink, #12171A); font-weight: 650; }
.pr-error a { color: var(--h-accent, #2F6FDB); font-weight: 600; }

/* The technical reference. Small and grey — it is for whoever fixes it, not for
   the customer, but putting it on screen saves a trip into server logs. */
.pr-error-ref {
    flex-basis: 100%;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--h-ink-3, #7C868C);
}

/* A plain informational line — not a failure, so no amber, no icon, no apology.
   'You do not have a subscription to manage yet' is a fact, not a fault. */
.pr-note {
    margin: 0 0 22px;
    padding: 12px 0;
    border-bottom: 1px solid var(--h-line, #E3E6E4);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--h-ink-2, #4E585E);
}

/* The switch form must not disturb the card layout — it replaces a link that
   was sitting in the same place, so it has to behave like one. */
.pr-switch { margin: 0; display: block; }
.pr-switch .hm-btn {
    width: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
}