/* The pricing page under one service.
 *
 * There is one price, so there is one number on this page. The old grid of
 * eight cards taught people to shop between our own products and to ask why
 * one costs more than another. A single figure removes both questions, and the
 * only remaining one, why does mine differ from theirs, is answered in a
 * sentence rather than a table.
 *
 * Tokens come from premium.css. Nothing is redeclared here.
 */

.pr-wrap{max-width:var(--rs-max);margin:0 auto;padding:0 clamp(22px,3.4vw,48px)}

/* ---------- the ground ---------- */
.pr-hero{position:relative;background:var(--rs-ink);color:var(--rs-cream);
  padding:clamp(74px,9vw,132px) 0 clamp(46px,5vw,72px);overflow:hidden}
.pr-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2 L90 2 L120 52 L90 102 L30 102 L0 52 Z' fill='none' stroke='%23D8FF47' stroke-opacity='0.045' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size:110px 95px;
  -webkit-mask-image:linear-gradient(#000 58%,transparent);
  mask-image:linear-gradient(#000 58%,transparent)}
.pr-hero .pr-wrap{position:relative;z-index:1}
.pr-kicker{margin:0 0 14px;font-family:var(--rs-font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rs-label)}
.pr-hero h1{margin:0;font-family:var(--rs-font-display);font-weight:700;
  font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.048em;
  max-width:15em}
.pr-lead{margin:22px 0 0;max-width:34em;font-size:clamp(15px,1.3vw,17px);
  line-height:1.62;color:rgba(244,240,230,.74)}

/* ---------- the figure ---------- */
.pr-plate{background:var(--rs-cream);color:var(--rs-ink);
  padding:clamp(34px,4.2vw,62px) 0 clamp(38px,4.6vw,70px)}
.pr-known{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,70px);align-items:start}
.pr-for{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;
  padding-bottom:16px;border-bottom:1px solid rgba(5,19,13,.13)}
.pr-for b{font-family:var(--rs-font-display);font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.03em;color:var(--rs-signal-deep)}
.pr-for button{border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:11.5px;color:#5C6B60;text-decoration:underline;text-underline-offset:3px}
.pr-for button:hover{color:var(--rs-ink)}

/* The switch. Term is a decision people revisit, so it is a control that stays
   on screen rather than two links that navigate. */
.pr-term{display:inline-flex;margin:26px 0 0;padding:4px;gap:4px;
  background:rgba(5,19,13,.055);border-radius:3px}
.pr-term button{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  padding:9px 18px;border-radius:2px;background:transparent;color:#3A4A40;
  transition:background .2s,color .2s}
.pr-term button[aria-pressed=true]{background:var(--rs-ink);color:var(--rs-signal)}
.pr-term .save{margin-left:7px;font-family:var(--rs-font-mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--rs-signal-deep)}
.pr-term button[aria-pressed=true] .save{color:var(--rs-signal)}

.pr-figure{margin:24px 0 0;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pr-num{font-family:var(--rs-font-display);font-weight:700;
  font-size:clamp(58px,8.4vw,120px);line-height:.86;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums lining-nums}
.pr-per{padding-bottom:10px;font-size:14px;color:#5C6B60}
.pr-alt{margin:14px 0 0;font-size:13.5px;color:#3A4A40}
.pr-alt b{color:var(--rs-signal-deep)}
.pr-saveline{display:inline-block;margin:16px 0 0;padding:7px 13px;
  background:rgba(61,107,18,.09);border-left:2px solid var(--rs-signal-deep);
  font-size:13px;color:#2C3A31}
.pr-saveline[hidden]{display:none}

.pr-acts{margin:30px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.pr-go{border:0;cursor:pointer;font:inherit;font-size:15.5px;font-weight:600;
  background:var(--rs-ink);color:var(--rs-signal);padding:15px 26px;border-radius:2px;
  text-decoration:none;display:inline-block}
.pr-go:hover{background:var(--rs-panel)}
.pr-note{margin:0;font-size:12.5px;color:#5C6B60;max-width:22em;line-height:1.5}
.pr-note b{color:var(--rs-ink)}

/* ---------- what the price buys ---------- */
.pr-inc{border-left:1px solid rgba(5,19,13,.13);padding-left:clamp(20px,2.4vw,38px)}
.pr-inc h2{margin:0 0 4px;font-family:var(--rs-font-display);font-size:15px;
  font-weight:700;letter-spacing:-.02em}
.pr-inc>p{margin:0 0 18px;font-size:13px;line-height:1.6;color:#3A4A40}
.pr-streams{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(5,19,13,.11);border-top:1px solid rgba(5,19,13,.11);
  border-bottom:1px solid rgba(5,19,13,.11)}
.pr-streams li{background:var(--rs-cream);padding:11px 0 11px 22px;position:relative;
  font-size:13.5px;line-height:1.45}
.pr-streams li:before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;
  background:var(--rs-signal-deep)}
.pr-streams li b{font-weight:600}
.pr-streams li span{color:#5C6B60}
.pr-inc-foot{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:#5C6B60}

/* ---------- no pack yet ---------- */
.pr-ask{max-width:640px}
.pr-ask .pr-field{display:flex;gap:8px;margin:22px 0 0;flex-wrap:wrap}
.pr-ask input{flex:1 1 260px;min-width:0;border:1px solid rgba(5,19,13,.2);
  background:#fff;color:var(--rs-ink);font:inherit;font-size:15px;padding:14px 16px;
  border-radius:2px}
.pr-ask input:focus{outline:2px solid var(--rs-signal-deep);outline-offset:1px}
.pr-ask .pr-go{padding:14px 22px}
.pr-status{margin:12px 0 0;font-size:12.5px;color:#5C6B60;min-height:1em}
.pr-status.error{color:#8C3A22}
.pr-range{margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(5,19,13,.13);
  font-size:14px;line-height:1.65;color:#3A4A40;max-width:38em}
.pr-range b{color:var(--rs-ink)}
.pr-jump{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.pr-jump a{border:1px solid rgba(5,19,13,.16);background:transparent;cursor:pointer;
  font:inherit;font-size:11.5px;color:#3A4A40;padding:7px 12px;border-radius:2px;
  text-decoration:none;display:inline-block}
.pr-jump a:hover{border-color:var(--rs-signal-deep);color:var(--rs-signal-deep)}
.pr-jump a .p{font-family:var(--rs-font-mono);color:#5C6B60;margin-left:6px}

/* ---------- the honest bits ---------- */
.pr-terms{background:var(--rs-ink);color:var(--rs-cream);
  padding:clamp(40px,4.6vw,72px) 0}
.pr-terms h2{margin:0 0 26px;font-family:var(--rs-font-display);
  font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.04em}
.pr-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:rgba(244,240,230,.12);border:1px solid rgba(244,240,230,.12)}
.pr-tgrid div{background:var(--rs-ink);padding:20px 22px}
.pr-tgrid p:first-child{margin:0 0 8px;font-family:var(--rs-font-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rs-signal)}
.pr-tgrid p:last-child{margin:0;font-size:13.5px;line-height:1.6;
  color:rgba(244,240,230,.76)}

@media (max-width:860px){
  .pr-known{grid-template-columns:1fr}
  .pr-inc{border-left:0;padding-left:0;border-top:1px solid rgba(5,19,13,.13);
    padding-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .pr-term button{transition:none}
}

/* [hidden] is one attribute selector and loses to any class rule that sets
   display, so an element the code believes is hidden keeps rendering and
   keeps its place in the tab order. tests/hidden-attribute.test.mjs now
   fails the build when a guard is missing. */
.pr-known[hidden]{display:none}
.pr-ask[hidden]{display:none}