/* Plan cards and checkout components, shared by the landing (#plans) and /pay.
   Ported from checkout-demos/shared.css (demo C). Components only: page tokens, body, headings and
   the base .btn come from the page that loads this file (both use the same Ivory tokens). */
.num{font-variant-numeric:tabular-nums lining-nums}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.ox{background:var(--oxblood);border-color:var(--oxblood);color:#fff}
.btn.ox:hover{background:#5E211E;border-color:#5E211E}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:fp-spin .7s linear infinite}
@keyframes fp-spin{to{transform:rotate(360deg)}}

/* Period switch: segmented, the thumb slides */
.period{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--paper-2);border:1px solid var(--rule);border-radius:999px;padding:4px;isolation:isolate}
.period button{appearance:none;border:0;background:none;padding:11px 18px;border-radius:999px;font:600 14px/1 var(--ui);color:var(--ink-2);cursor:pointer;position:relative;z-index:1;white-space:nowrap;transition:color .3s}
.period button[aria-checked="true"]{color:var(--paper)}
.period .thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--ink);box-shadow:0 6px 16px -8px rgba(21,20,18,.6);transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1)}
.period .save{display:inline-block;margin-left:6px;font:700 10.5px/1 var(--ui);letter-spacing:.02em;padding:4px 7px;border-radius:999px;background:#E9D9B8;color:#6A4A12;vertical-align:1px}
.period button[aria-checked="true"] .save{background:var(--brass);color:#fff}

/* Rolling numerals: each digit is a strip of 0-9 that slides */
.roll{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums lining-nums}
.roll .slot{display:inline-block;height:1em;line-height:1;overflow:hidden;position:relative}
.roll .rstrip{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}
.roll .rstrip span{height:1em;line-height:1;text-align:center}
.roll .rstrip.moving{filter:blur(1.5px)}
.roll .ch{display:inline-block}

/* Usage meter: ten cells, honest proportions (Student 1, Professional 3, Chamber 10) */
.meter{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;height:8px}
.meter i{border-radius:2px;background:var(--rule)}
.meter i.on{background:var(--sage)}

/* Payment logos */
.pm-tile{display:inline-grid;place-items:center;height:28px;padding:0 6px;border-radius:6px;background:#fff;border:1px solid var(--rule)}
.pm-tile.dark{background:#1E3A2B;border-color:#1E3A2B}
.pm-tile img{height:18px;width:auto;display:block}
.pm-tile.card img{height:22px}
.mm{display:inline-grid;place-items:center;width:58px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--rule);flex:none}
.mm img{max-width:48px;max-height:28px;width:auto;height:28px;display:block;object-fit:contain}
.mm-card{color:var(--ink)}

/* Plan cards */
.plans-switch{display:flex;justify-content:center;margin:0 0 clamp(28px,4vw,44px)}
.plans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:28px 24px 24px;border-radius:22px;background:#FFFDF9;border:1px solid var(--rule);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .3s}
.plan:hover{transform:translateY(-4px);box-shadow:0 28px 50px -34px rgba(21,20,18,.45);border-color:rgba(21,20,18,.22)}
.plan.pop{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan .pbadge{position:absolute;top:-11px;left:24px;font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;background:var(--brass);color:#fff;padding:6px 10px;border-radius:999px}
.plan h3{margin:0;font-family:var(--display);font-weight:400;font-size:28px;line-height:1;letter-spacing:-.02em}
.plan .who{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2);min-height:2.6em}
.plan.pop .who{color:#CFC8BB}
.plan .price{display:flex;align-items:baseline;gap:6px;font-family:var(--display)}
.plan .price .cur{font-size:20px}
.plan .price .amt{font-size:52px;line-height:1;letter-spacing:-.03em}
.plan .price .per{font:500 13.5px/1 var(--ui);color:var(--ink-2)}
.plan .price .was{font:500 15px/1 var(--ui);color:var(--ink-2);opacity:.75;margin-left:4px}.plan.pop .price .was{color:#CFC8BB}
.plan.pop .price .per{color:#CFC8BB}
.plan .billed{margin:-10px 0 0;font-size:13px;color:var(--ink-2);min-height:2.8em;line-height:1.45}
.plan .billed em{display:block;font-style:normal;color:var(--sage);font-weight:600}
.plan.pop .billed{color:#CFC8BB}.plan.pop .billed em{color:#9FC3AE}
.plan .usage{display:grid;gap:8px;font-size:13px;font-weight:600;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plan.pop .usage{border-color:rgba(244,241,235,.16)}
.plan.pop .meter i{background:rgba(244,241,235,.14)}.plan.pop .meter i.on{background:#9FC3AE}
.plan .usage .free-use{font-weight:500;color:var(--ink-2)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;flex:1;align-content:start}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{width:16px;height:16px;margin-top:2px;color:var(--sage)}
.plan.pop li svg{color:#9FC3AE}
.plan li.inh{font-weight:600}
.plan li.inh svg{opacity:0}
.plan .btn{padding:15px 18px;font-size:14px}
.plan .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.plan.pop .btn.ox:hover{background:#fff;color:var(--ink);border-color:#fff}
.every{margin:22px 0 0;padding:22px 24px;border-radius:22px;background:var(--paper-2);border:1px solid var(--rule);display:grid;grid-template-columns:200px 1fr;gap:10px 28px;align-items:start}
.every>b{font:400 22px/1.15 var(--display);letter-spacing:-.01em}
.every ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px}
.every li{display:flex;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.45}
.every li svg{width:16px;height:16px;color:var(--sage);margin-top:2px}
.every li strong{display:block;color:var(--ink);font-size:14px;font-weight:600}
.pay-strip{margin-top:22px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.pay-strip>span:first-child{margin-right:6px;font-weight:600}
@media (max-width:1080px){
  .plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .every{grid-template-columns:1fr}.every ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .plans-grid{grid-template-columns:1fr;gap:22px}
  .plan.pop{order:-1}.plan[data-plan="free"]{order:9}
  .plan .who,.plan .billed{min-height:0}
  .period button{padding:10px 11px;font-size:13px}
  .period .save{display:block;margin:5px auto 0;width:max-content}
  .every ul{grid-template-columns:1fr}.every{padding:20px 18px}
}

/* Pull-up order summary (phones only) */
.peek,.peek-back{display:none}
@media (max-width:980px){
  .peek-back{display:block;position:fixed;inset:0;z-index:44;background:rgba(21,20,18,.45);opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .peek{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:82vh;background:var(--ink);color:var(--paper);border-radius:24px 24px 0 0;
    box-shadow:0 -18px 40px -20px rgba(21,20,18,.7);will-change:transform;transform:translate3d(0,100%,0)}
  .peek .ph{padding:8px 16px calc(12px + env(safe-area-inset-bottom));cursor:grab;user-select:none;-webkit-user-select:none}
  .peek.open .ph{padding-bottom:12px}
  .peek .grab{display:block;width:40px;height:5px;border-radius:5px;background:rgba(244,241,235,.28);margin:0 auto 10px}
  .peek .row{display:flex;align-items:center;gap:12px}
  .peek .tt{appearance:none;border:0;background:none;color:inherit;text-align:left;flex:1;min-width:0;padding:0;cursor:inherit;display:grid;grid-template-columns:1fr auto;align-items:center;line-height:1.15}
  .peek .tt>span{grid-column:1;font-size:12px;color:#CFC8BB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .peek .tt>b{grid-column:1;font:400 26px/1.05 var(--display);letter-spacing:-.01em}
  .peek .tt>em{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(244,241,235,.1);transform:rotate(180deg);transition:transform .5s cubic-bezier(.32,.72,0,1)}
  .peek.open .tt>em{transform:none}
  .peek .tt svg{width:16px;height:16px}
  .peek [data-btn] .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:14px 18px}
  .peek .pd{padding:6px 16px calc(20px + env(safe-area-inset-bottom));overflow:auto;max-height:calc(82vh - 90px);overscroll-behavior:contain}
  .peek .pd .period{width:100%;background:rgba(244,241,235,.08);border-color:rgba(244,241,235,.12)}
  .peek .pd .period button{color:#CFC8BB;padding:10px 6px;font-size:13px}
  .peek .pd .period button[aria-checked="true"]{color:var(--ink)}
  .peek .pd .period .thumb{background:var(--paper)}
  .peek .pd .period .save{display:block;margin:4px auto 0;width:max-content;font-size:10px}
  .peek .pl{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid rgba(244,241,235,.1);font-size:14px}
  .peek .pl:first-of-type{border-top:0}
  .peek .pl span{color:#CFC8BB}.peek .pl.save b{color:#9FC3AE}
  .peek .pd h4{margin:16px 0 4px;font:600 12px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:#9C958A}
}

/* A payment method switched off in the Admin Console: visible, explained, not selectable */
.off{cursor:not-allowed !important;opacity:.55;filter:grayscale(1)}
.off .t span{color:var(--oxblood) !important;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .roll .rstrip,.period .thumb,.plan,.peek{transition-duration:.01ms !important}
}