/* The plan (site_src/partials/plans.html), shared by the home page and the pricing page. Round 7 v4 (owner, Oct 31:
   "pricing UI is so important and it sucks"), after the SurplusOS plan card (components/plan-page/plan-page.css,
   plan-includes.css, MetalNumber): one hairline card in two halves. Left: the plan, its price in chrome lettering, a short
   rate ledger that puts $0.17 beside $0 so the usage reads as fair rather than open-ended, and the one action. Right: what
   is included, in three groups of hairline rows with a filled check. No fill, no glow, no colour: the chrome is graphite in
   the light theme and silver in the dark one. No cost slider (owner, Oct 31). */
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);max-width:1080px;margin:0 auto;overflow:hidden;border:1px solid var(--hl);border-radius:28px;text-align:left}
.plan-main{display:flex;flex-direction:column;min-width:0;padding:40px 48px 40px}
.plan-incl{display:flex;flex-direction:column;justify-content:center;gap:22px;min-width:0;padding:36px 48px 38px;border-left:1px solid var(--hl)}

.plan-name{margin:0;color:var(--ink);font:600 21px/1.25 var(--font);letter-spacing:-.015em}
.plan-line{margin:6px 0 0!important;color:var(--muted);font-size:15px;line-height:1.5}

/* The price in chrome lettering, after the SurplusOS marketing site's MetalNumber and price chrome (metal-number.css,
   .price-chrome__num): a gradient clipped to the glyphs, a bright band across the middle like light on brushed metal,
   graphite in the light theme and silver in the dark one. A second copy of the number (.metal-spot) carries a soft patch
   of light that crosses the figure once when it is first seen and then follows a mouse pointer (plans.js). The visible
   figures are hidden from screen readers; the sentence beside each is read instead. */
.plan-price{display:flex;align-items:flex-end;gap:10px;margin:26px 0 0!important;line-height:.9}
.metal{position:relative;display:inline-flex;cursor:default}
.metal-num{color:var(--ink);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#5d5d63 0%,#1d1d20 30%,#2b2b2f 44%,#6e6e74 50%,#28282c 56%,#141416 78%,#3b3b40 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme=dark] .metal-num{background:linear-gradient(180deg,#fff 0%,#e3e3e7 28%,#b7b8bf 45%,#fafafb 50%,#a3a4ac 57%,#d4d5da 80%,#f3f3f5 100%);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.plan-figure{padding:0 .04em .06em 0;font:650 96px/.92 var(--font);letter-spacing:-.055em}
.metal .metal-num.metal-spot{position:absolute;left:0;top:0;pointer-events:none;opacity:0;filter:none;
  background:radial-gradient(circle .62em at var(--x,50%) var(--y,50%),rgba(255,255,255,.62),rgba(255,255,255,.18) 45%,transparent 72%);
  -webkit-background-clip:text;background-clip:text}
html[data-theme=dark] .metal .metal-num.metal-spot{filter:none;
  background:radial-gradient(circle .62em at var(--x,50%) var(--y,50%),rgba(255,255,255,.95),rgba(255,255,255,.3) 45%,transparent 72%);
  -webkit-background-clip:text;background-clip:text}
.metal.is-sweep .metal-num.metal-spot{opacity:1}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .metal .metal-num.metal-spot{transition:opacity .35s ease}
  .metal:hover .metal-num.metal-spot{opacity:1}}
@media (prefers-reduced-motion:reduce){.metal .metal-num.metal-spot{display:none}}
.plan-per{margin-bottom:.7em;color:var(--muted);font:500 20px/1 var(--font);letter-spacing:-.01em}
@media (forced-colors:active){.metal-num,html[data-theme=dark] .metal-num{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText;filter:none}.metal .metal-num.metal-spot{display:none}}

/* The rate ledger: what a search costs, beside what nothing costs. */
.plan-rates{margin:26px 0 0;border-top:1px solid var(--hl)}
.plan-rate{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hl)}
.plan-rate dt{color:var(--ink);font-size:15px;line-height:1.4}
.plan-rate dt span{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.plan-rate dd{flex:none;margin:0;color:var(--ink);font:600 17px/1.4 var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.plan-rate-fig{padding:0 .03em .04em 0;font:600 28px/1.05 var(--font);letter-spacing:-.025em}

.plan-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto;padding-top:28px}
.plan-cta{min-height:44px;padding:0 24px;font-size:15px}

/* What is included: three short groups, each a label over hairline rows. */
.plan-group{min-width:0}
.plan-h{margin:0;padding-bottom:10px;border-bottom:1px solid var(--hl);color:var(--muted);font:600 13px/1.3 var(--font);letter-spacing:-.003em}
.plan-list{margin:0;padding:0;list-style:none}
.plan-list li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--hl);color:var(--ink);font-size:15px;line-height:1.4}
.plan-list svg{flex:none;width:17px;height:17px}
.plan-list svg circle{fill:var(--ink)}
.plan-list svg path{fill:none;stroke:var(--bg);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .plan{grid-template-columns:minmax(0,1fr)}
  .plan-incl{border-left:0;border-top:1px solid var(--hl)}}
@media (max-width:640px){
  .plan{border-radius:22px}
  .plan-main{padding:28px 22px 26px}
  .plan-incl{gap:22px;padding:24px 22px 26px}
  .plan-figure{font-size:84px}
  .plan-rate-fig{font-size:26px}
  .plan-per{font-size:18px}
  .plan-price{margin-top:24px!important}
  .plan-rates{margin-top:24px}
  .plan-act{padding-top:24px}
  .plan-cta{flex:1 1 100%}
  .plan-list li{font-size:15px}}

/* Home: the plan under a centred heading, the privacy line under it. */
#pricing .section-head{margin-bottom:44px}
#pricing .privacy-line{justify-content:center;max-width:none;margin:28px 0 0}
@media (max-width:640px){#pricing .section-head{margin-bottom:28px}#pricing .privacy-line{margin-top:24px;justify-content:flex-start}}
/* Round 7 v5 (unslop): a thin line check in the text color instead of a heavy filled circle. */
.plan-list svg circle{fill:none}
.plan-list svg path{stroke:var(--ink-2);stroke-width:1.7}