/* ==========================================================================
   Plans & Pricing — this page only.
   Kept out of site.css on purpose: site.css is byte-identical with the Korean
   site and should stay that way (see portfolio.css for the same note).
   Everything here uses the shared brand tokens (--ink / --ink-2 / --muted /
   --line), the sizes already defined in site.css, and no second accent hue.
   ========================================================================== */

/* NOTE on the build price line: it needs no rule here. site.css sizes
   .card .price at 2.75rem, which is right for "$250/mo" and wrong for a
   66-character sentence — at that scale the new copy wrapped to two display
   lines. The site already has a class for exactly this case, .price--text
   (1.75rem, used on the home page's "Custom quote"), so plans.njk adds it to
   the markup and nothing needs to be written here. A clamp() up to 2.25rem was
   tried and removed: it only pushed the sentence back onto two lines. */

/* --- 24-month website build credit schedule -------------------------------
   The table borrows the "What's included" treatment verbatim — 2px ink rule
   under the header, 1px hairline between rows, .75rem/1rem vertical padding.
   Same meaning, same shape. The difference: that table is four dot columns at
   a fixed 4.25rem and centred, this one is money, so the amount column is
   right-aligned on tabular figures where the eye compares digits. */
.build-credit { margin-top: clamp(1.5rem, 3.2vw, 2.5rem); }
.build-credit h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.build-credit p { margin: 1rem 0 0; max-width: 44em; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.build-credit table { width: 100%; max-width: 28rem; margin-top: 1.5rem; border-collapse: collapse; }
.build-credit th { padding: .75rem 0; font-size: 1rem; text-align: left; }
.build-credit thead th { border-bottom: 2px solid var(--ink); }
/* the period cells are <th scope="row"> so a screen reader names the row when it
   reads an amount. They must still LOOK like body rows, though: site.css:1233
   (strong, b, th) would otherwise bold them and break the row rhythm §2.3 says
   to match. */
.build-credit :is(tbody th, td) { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.build-credit tbody th { font-weight: 400; }
.build-credit td { text-align: right; font-variant-numeric: tabular-nums; }
.build-credit .credit-note { margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--muted); }

/* --- pricing disclaimer ---------------------------------------------------
   Secondary, not hidden. It uses the small note size already defined in
   site.css (1rem / --muted), which measures 5.3:1 on the white band — above
   the 4.5:1 floor. The heading reuses the plan-name eyebrow treatment rather
   than inventing a style. The supersession sentence is the load-bearing line,
   so it alone steps up to --ink-2 at medium weight. */
.pricing-legal { max-width: 44em; }
.pricing-legal h2 { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pricing-legal p { margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.pricing-legal .legal-key { color: var(--ink-2); font-weight: 500; }