/* The online subscription for Rutherford customers (FX, 1 Nov 2026): ru_plans() and RU_KEEP in tools/content.py, in the Pricing
   hero and on Rutherford customers (#subscribe); the thank-you page subscribed.html (.sb).
   Monthly or Yearly is two radios and the ColorLoop PC a checkbox: :has() shows the plan, the total and the one button that match,
   no script. Without :has() every plan, total and button shows, each with its own label. */
.rp{display:grid;gap:18px}
.rp-seg{display:flex;gap:6px;margin:0;padding:5px;border:0;border-radius:999px;background:#e9e7df;width:max-content;max-width:100%}
.rp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rp-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rp-seg label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:#2b2e31;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.rp-seg input:checked+label{background:#fff;color:#141416;box-shadow:0 1px 3px rgba(20,20,22,.12)}
.rp-seg input:focus-visible+label{outline:2px solid #141416;outline-offset:2px}
.rp-save{padding:3px 8px;border-radius:999px;background:#e3f1d6;color:#2f5c12;font-size:12px;font-weight:600;white-space:nowrap}
.rp-plans{display:grid;gap:18px}
.rp-price{display:flex;align-items:flex-end;gap:12px;margin:0;color:#141416}
.rp-price b{font-size:clamp(52px,5.4vw,68px);line-height:.9;letter-spacing:-.045em;font-weight:600;font-variant-numeric:tabular-nums}
.rp-price span{padding-bottom:4px;font-size:14px;line-height:1.3;color:#6a6f74}
.rp-note{margin:8px 0 0;font-size:15px;line-height:1.45;color:#4b5052}
.rp-note b{color:#141416;font-weight:600}

/* the ColorLoop PC (FX, 1 Nov 2026): an option bought once, with the first payment */
.rp-pc{display:grid;grid-template-columns:auto 72px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #e3e1d9;cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.rp-pc:hover{box-shadow:inset 0 0 0 1px #b9b7af}
.rp-pc:has(input:checked){background:#faf9f4;box-shadow:inset 0 0 0 2px #141416}
.rp-pc input{width:20px;height:20px;margin:0;accent-color:#141416;cursor:pointer}
.rp-pc input:focus-visible{outline:2px solid #141416;outline-offset:2px}
.rp-pc img{display:block;width:72px;height:auto}
.rp-pc-t{display:grid;gap:2px;font-size:13.5px;line-height:1.4;color:#4b5052}
.rp-pc-t b{font-size:15px;color:#141416}
.rp-pc-p{display:grid;justify-items:end;gap:2px;font-size:12px;line-height:1.3;color:#6a6f74;text-align:right}
.rp-pc-p b{font-size:17px;color:#141416;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-own{margin:-8px 0 0;font-size:13px;color:#6a6f74}
/* one license per press and its console (FX, 2 Nov 2026): the number of presses and PCs is chosen on the Stripe payment page */
.rp-many{margin:0;font-size:14px;line-height:1.45;color:#4b5052}
.rp-many b{color:#141416;font-weight:600}

.rp-go{display:grid;gap:12px}
.rp-total{margin:0;font-size:14.5px;line-height:1.45;color:#2b2e31}
.rp-total b{color:#141416;font-weight:600;font-variant-numeric:tabular-nums}
.rp-buy{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 20px;border-radius:999px;background:#141416;color:#fff;font-size:16.5px;font-weight:600;text-align:center;text-decoration:none;transition:background-color .2s ease,transform .16s ease}
.rp-buy:hover{background:#2b2b2e}
.rp-buy:active{transform:scale(.98)}
.rp-buy:focus-visible{outline:2px solid #141416;outline-offset:3px}
.rp-fine{margin:0;font-size:13px;line-height:1.5;color:#6a6f74}

/* the choice: Monthly or Yearly, with or without the PC */
.rp:has(input[value="yearly"]:checked) .rp-m{display:none}
.rp:not(:has(input[value="yearly"]:checked)) .rp-y{display:none}
.rp:has(.rp-pc input:checked) .rp-nopc{display:none}
.rp:not(:has(.rp-pc input:checked)) .rp-withpc{display:none}
@media (prefers-reduced-motion:reduce){.rp-seg label,.rp-buy,.rp-pc{transition:none}.rp-buy:active{transform:none}}
@media (max-width:480px){   /* a phone: no picture, the price under the text, on one line */
  .rp-pc{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .rp-pc img{display:none}
  .rp-pc input{margin-top:1px}
  .rp-pc-p{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;text-align:left}
  .rp-pc-p br{display:none}
}
@media (max-width:420px){.rp-seg{width:100%}.rp-seg label{flex:1 1 auto;justify-content:center;padding:0 10px;font-size:13.5px}}

/* the Rutherford license stays the customer's (FX, 1 Nov 2026): with no commitment, the switch is without risk */
.rp-keep{padding:14px 16px;border-radius:16px;background:#fff3c4}
.rp-keep p{margin:0;font-size:14px;line-height:1.45;color:#2b2e31}
.rp-keep b{display:block;margin-bottom:2px;font-size:15px;color:#141416}

/* Pricing v9: the Rutherford customers offer fills the hero, in the ring: the title and the gains on the left, the plans on the
   right (on a phone the plans come right after the title). New to ColorLoop is one line under it. */
body.page-pricing .pv-offer{max-width:1040px;margin:clamp(56px,7vw,88px) auto 0}
body.page-pricing .pv-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head buy" "more buy";column-gap:clamp(28px,4vw,56px);align-content:start}
body.page-pricing .pv-sub-head{grid-area:head}
body.page-pricing .pv-sub-more{grid-area:more}
body.page-pricing .pv-sub-buy{grid-area:buy;align-self:start;padding-left:clamp(28px,4vw,56px);border-left:1px solid #ecebe5}
body.page-pricing .pv-sub .pv-list{margin:22px 0 0}
body.page-pricing .pv-more{display:inline-block;margin:16px 0 0;font-size:15px;font-weight:600;color:#141416;text-underline-offset:3px}
body.page-pricing .pv-sub .rp-keep{margin-top:24px}
body.page-pricing .pv-new{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;max-width:1040px;margin:24px auto 0;padding:14px 22px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px #ecebe5;font-size:16px;line-height:1.45;color:#2b2e31;text-align:center}
body.page-pricing .pv-new a{color:#141416;font-weight:600;text-underline-offset:3px}
body.page-pricing .pv-new-ag{position:relative;display:inline-block;flex:none;width:44px}
body.page-pricing .pv-new-ag.agd{filter:drop-shadow(0 4px 6px rgba(20,20,22,.18))}   /* a small agent in a line: a light shadow */
@media (max-width:820px){
  body.page-pricing .pv-sub{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "buy" "more"}
  body.page-pricing .pv-sub-buy{margin-top:24px;padding:24px 0 0;border-left:0;border-top:1px solid #ecebe5}
  body.page-pricing .pv-sub-more{margin-top:8px}
}

/* Rutherford customers: the plans in a white card beside the price line, the license kept under it */
.rp-card{padding:clamp(24px,3vw,40px);border-radius:28px;background:#fff;box-shadow:0 1px 0 rgba(20,20,22,.04),0 24px 48px -28px rgba(20,20,22,.22)}
#subscribe .rp-keep{max-width:520px}

/* subscribed.html: the thank-you page */
.sb{position:relative;max-width:720px;margin:0 auto;padding:clamp(72px,10vw,128px) var(--pg-gut,24px) clamp(64px,8vw,112px)}
.sb-ag{display:block;width:104px;margin:0 0 20px}
.sb-ag img{display:block;width:100%;height:auto}
.sb-ag .agd-n{display:none}   /* the happy face only: the agent hover styles are not loaded on this page */
.sb-k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6a6f74}
.sb h1{margin:0;font-size:clamp(48px,8vw,104px);line-height:.95;letter-spacing:-.05em;font-weight:600;color:#141416}
.sb h1 span{color:#64A932}
.sb-lead{margin:20px 0 0;font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:#4b5052}
.sb-test{display:inline-block;margin:18px 0 0;padding:7px 13px;border-radius:999px;background:#fff3c4;font-size:13.5px;font-weight:600;color:#141416}
.sb-steps{display:grid;gap:0;margin:36px 0 0;padding:0;list-style:none;counter-reset:sb;border-top:1px solid #e3e1d9}
.sb-steps li{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid #e3e1d9;counter-increment:sb}
.sb-steps li::before{content:counter(sb,decimal-leading-zero);grid-row:span 2;font:600 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#6a6f74}
.sb-steps b{font-size:18px;font-weight:600;color:#141416}
.sb-steps span{font-size:16px;line-height:1.5;color:#4b5052}
.sb-help{margin:28px 0 0;font-size:15.5px;color:#4b5052}
.sb-help a{color:#141416;font-weight:600}
.sb .pg-actions{margin-top:28px}