/* EasyClippers 13.11: the pricing cards come back, as glass. The owner, Nov 4 2026: "Lets restore cards for the
   pricing, cards look good for pricing ... i want something next level something like this but as pricing cards",
   with a picture of three frosted glass cards. Only the plans are cards again: the home page's (.hm-plan, landing.js)
   and Plan & usage's (.bp-plans .lp-plan, studio.js). Each is frosted glass with a thick clear rim, a soft sheen, a
   light that follows the pointer and a glass mark at the top (SF.planGlass: layers, a cube, a ball); the recommended
   plan is larger and raised, its label plain small text. Light: white glass on the off-white page. Dark: smoky navy
   glass with the same rims. Loaded after flat.css and home-light.css, so these rules outrank the card-free layer's
   !important ones, here and nowhere else. */

/* ---------- the glass, per theme ---------- */
.hm-plans > .hm-plan, .bp-plans > .lp-plan {
  --pc-r: 30px; --pc-rim: 8px;
  --pc-face: linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(249, 251, 254, .6) 46%, rgba(240, 244, 250, .74) 100%);
  --pc-sheen: radial-gradient(120% 70% at 100% -6%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 54%);
  --pc-arc: radial-gradient(66% 42% at 104% -4%, rgba(255, 255, 255, 0) 86%, rgba(255, 255, 255, .8) 92%, rgba(255, 255, 255, 0) 98.5%);
  --pc-ring: linear-gradient(155deg, #ffffff 0%, rgba(196, 207, 223, .85) 12%, rgba(255, 255, 255, .96) 30%, rgba(205, 214, 228, .62) 54%,
    rgba(255, 255, 255, .97) 76%, rgba(188, 199, 216, .85) 100%);
  --pc-out: rgba(7, 18, 38, .13);         /* the hairline outside the rim */
  --pc-in: rgba(7, 18, 38, .085);         /* the hairline inside it */
  --pc-glint: rgba(255, 255, 255, .95);   /* the rim's bright inner edge */
  --pc-lift: 0 44px 80px -46px rgba(7, 18, 38, .45), 0 18px 34px -22px rgba(7, 18, 38, .2);
  --pc-glow: .55;                         /* the pointer's light */
  --pc-ink: #071226; --pc-soft: #33415a; --pc-tick: #1b2a44;
}
:root[data-theme="dark"] :is(.hm-plans > .hm-plan, .bp-plans > .lp-plan) {
  --pc-face: linear-gradient(180deg, rgba(34, 58, 102, .6) 0%, rgba(16, 33, 64, .46) 46%, rgba(10, 23, 48, .62) 100%);
  --pc-sheen: radial-gradient(120% 70% at 100% -6%, rgba(170, 210, 255, .2), rgba(170, 210, 255, 0) 54%);
  --pc-arc: radial-gradient(66% 42% at 104% -4%, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .11) 92%, rgba(255, 255, 255, 0) 99%);
  --pc-ring: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(140, 170, 220, .12) 14%, rgba(255, 255, 255, .3) 32%,
    rgba(120, 150, 205, .08) 56%, rgba(255, 255, 255, .34) 78%, rgba(140, 170, 220, .16) 100%);
  --pc-out: rgba(255, 255, 255, .13); --pc-in: rgba(255, 255, 255, .1); --pc-glint: rgba(255, 255, 255, .22);
  --pc-lift: 0 44px 90px -44px rgba(0, 0, 0, .92), 0 18px 36px -22px rgba(0, 0, 0, .6);
  --pc-glow: .1;
  --pc-ink: #ffffff; --pc-soft: #d6e0ee; --pc-tick: #e9f0fa;
}

/* ---------- the card: frosted glass, its rim, and the pointer's light ---------- */
.hm-plans > .hm-plan, .bp-plans > .lp-plan {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  padding: 34px 32px 30px !important; min-height: 0 !important;
  border: 0 !important; border-radius: var(--pc-r) !important;
  background: radial-gradient(320px circle at var(--mx, -600px) var(--my, -600px), rgba(255, 255, 255, var(--pc-glow)), rgba(255, 255, 255, 0) 62%),
    var(--pc-arc), var(--pc-sheen), var(--pc-face) !important;
  box-shadow: 0 0 0 1px var(--pc-out), inset 0 1.5px 0 var(--pc-glint), var(--pc-lift) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important; backdrop-filter: blur(24px) saturate(165%) !important;
  color: var(--pc-ink);
}
/* the rim: a band of clear glass around the edge, brighter where it catches the light */
.hm-plans > .hm-plan::before, .bp-plans > .lp-plan::before {
  content: '' !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block;
  border-radius: inherit; padding: var(--pc-rim); background: var(--pc-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* where the rim meets the face: a bright edge and, just inside it, a hairline */
.hm-plans > .hm-plan::after, .bp-plans > .lp-plan::after {
  content: '' !important; position: absolute; inset: var(--pc-rim); z-index: -1; pointer-events: none; display: block;
  border-radius: calc(var(--pc-r) - var(--pc-rim)); box-shadow: 0 0 0 1px var(--pc-glint), inset 0 0 0 1px var(--pc-in);
}

/* ---------- the mark at the top (SF.planGlass), its shadow, and how Dark tints it ---------- */
.pc-ic { display: block; flex: none; overflow: visible; }
:root[data-theme="dark"] .pc-ic .f { fill-opacity: .44; }
:root[data-theme="dark"] .pc-ic .w { stroke-opacity: .55; }
:root[data-theme="dark"] .pc-ic .e { stroke: #ffffff; stroke-opacity: .5; }
:root[data-theme="dark"] .pc-ic .h { stroke: #ffffff; stroke-opacity: .24; }
:root[data-theme="dark"] .pc-ic .k-sh { stop-color: #000000; stop-opacity: .55; }

/* ---------- the home page ---------- */
.home .hm-plans { gap: 22px !important; margin-top: 44px; position: relative; isolation: isolate; }
/* a soft pool of colour behind the cards, for the glass to frost */
.home .hm-plans::before { content: ''; position: absolute; inset: 4% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 26% 52%, rgba(46, 230, 214, .2), rgba(46, 230, 214, 0) 70%),
    radial-gradient(40% 50% at 70% 40%, rgba(124, 92, 255, .16), rgba(124, 92, 255, 0) 70%),
    radial-gradient(36% 40% at 52% 86%, rgba(37, 99, 235, .1), rgba(37, 99, 235, 0) 70%);
  filter: blur(28px); }
:root[data-theme="dark"] .home .hm-plans::before { opacity: 1.4; }
.home .hm-plans > .hm-plan .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -12px 0 10px -12px; }
.home .hm-plans > .hm-plan .pc-ic { width: 86px; height: 86px; }
.home .hm-plans > .hm-plan .pop { margin-top: 16px; }
.home .hm-plans > .hm-plan h3 { font-size: 28px; line-height: 1.1; letter-spacing: -0.03em; color: var(--pc-ink); }
.home .hm-plans > .hm-plan .price { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.home .hm-plans > .hm-plan .price b { font: 800 54px/1 var(--font); letter-spacing: -0.05em; color: var(--pc-ink); }
.home .hm-plans > .hm-plan .price span { color: var(--pc-soft); font-size: 17px; }
.home .hm-plans > .hm-plan .pts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.home .hm-plans > .hm-plan .pts li { display: flex; align-items: flex-start; gap: 11px; color: var(--pc-ink); font-size: 16.5px; line-height: 1.4; }
.home .hm-plans > .hm-plan .pts li.hrs { font-weight: 650; }
.home .hm-plans > .hm-plan .pts .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--pc-tick); stroke-width: 2.4; }
.home .hm-plans > .hm-plan .hm-btn { margin-top: 28px; width: 100%; height: 54px; }
.home .hm-plans > .hm-plan .hm-btn:last-child { margin-bottom: 34px; }      /* room for the yearly price the others have */
.home .hm-plans > .hm-plan .yr { color: var(--pc-soft); }
/* the plan button: frosted glass (the recommended plan keeps the one main colour) */
.home .hm-plans > .hm-plan .hm-btn.line, :root:not([data-theme="dark"]) .home .hm-plans > .hm-plan .hm-btn.line {
  color: var(--pc-ink); border: 1px solid rgba(7, 18, 38, .13);
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(238, 242, 248, .82));
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -3px 6px rgba(7, 18, 38, .05), 0 12px 24px -16px rgba(7, 18, 38, .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home .hm-plans > .hm-plan .hm-btn.line:hover, :root:not([data-theme="dark"]) .home .hm-plans > .hm-plan .hm-btn.line:hover {
  color: var(--pc-ink); border-color: rgba(7, 18, 38, .22); background: linear-gradient(180deg, #ffffff, rgba(244, 247, 251, .92)); }
:root[data-theme="dark"] .home .hm-plans > .hm-plan .hm-btn.line {
  color: #ffffff; border-color: rgba(255, 255, 255, .24); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 24px -16px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .home .hm-plans > .hm-plan .hm-btn.line:hover { color: #ffffff; border-color: rgba(255, 255, 255, .38);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); }
@media (max-width: 899px) {
  .home .hm-plans { max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .hm-plans > .hm-plan { --pc-r: 26px; --pc-rim: 6px; padding: 28px 24px 26px !important; }
  .home .hm-plans > .hm-plan .price b { font-size: 50px; }
}
/* computers: three in a row, the recommended one larger and raised above the others */
@media (min-width: 900px) {
  .home .hm-plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 26px !important; margin-top: 84px; padding-bottom: 28px; }
  .home .hm-plans > .hm-plan.rec { margin: -28px 0 !important; padding: 46px 38px 40px !important; justify-content: center; }
  .home .hm-plans > .hm-plan.rec .pc-ic { width: 98px; height: 98px; }
  .home .hm-plans > .hm-plan.rec .top { margin: -14px 0 10px -14px; }
  .home .hm-plans > .hm-plan.rec h3 { font-size: 31px; }
  .home .hm-plans > .hm-plan.rec .price b { font-size: 62px; }
  .home .hm-plans > .hm-plan.rec .hm-btn { height: 58px; font-size: 17px; }
}

/* ---------- Plan & usage ---------- */
.bp-plans-card { container: bpplans / inline-size; }
.bp-plans.bp-plans-3 { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; max-width: 560px; margin: 6px auto 0; }
.bp-plans > .lp-plan .pc-ic { margin: -6px 0 12px -6px; }
.bp-plans > .lp-plan .lp-flag { position: absolute; top: 36px; right: 32px; }
.bp-plans > .lp-plan h3 { font-size: 24px; color: var(--pc-ink); }
.bp-plans > .lp-plan .lp-pline { color: var(--pc-soft); }
.bp-plans > .lp-plan .lp-price { margin-top: 18px; }
.bp-plans > .lp-plan .lp-price .amt { font-size: 44px; color: var(--pc-ink); }
.bp-plans > .lp-plan .lp-phours { margin-top: 18px; }
.bp-plans > .lp-plan .lp-pfeats { margin: 18px 0 22px; }
.bp-plans > .lp-plan .lp-pfeats li { color: var(--pc-ink); }
.bp-plans > .lp-plan .lp-pfeats .icon { color: var(--pc-tick); stroke-width: 2.4; }
.bp-plans > .lp-plan .btn.block { height: 48px; border-radius: 999px; font-size: 14.5px; font-weight: 650; }
.bp-plans > .lp-plan .btn.block:not(.primary) { color: var(--pc-ink); border: 1px solid rgba(7, 18, 38, .13);
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(238, 242, 248, .82));
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -3px 6px rgba(7, 18, 38, .05), 0 12px 24px -16px rgba(7, 18, 38, .45); }
:root[data-theme="dark"] .bp-plans > .lp-plan .btn.block:not(.primary) { color: #ffffff; border-color: rgba(255, 255, 255, .24);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 24px -16px rgba(0, 0, 0, .8); }
.bp-plans > .lp-plan .bp-yearly { margin-top: 12px; }
/* the plan picked on the home page: an aqua light around its glass */
.bp-plans > .lp-plan.want { box-shadow: 0 0 0 2px rgba(34, 214, 200, .6), 0 0 34px -6px rgba(34, 214, 200, .45), inset 0 1.5px 0 var(--pc-glint), var(--pc-lift) !important; }
@container bpplans (min-width: 860px) {
  .bp-plans.bp-plans-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) !important; max-width: none; gap: 22px !important;
    padding: 32px 0 30px; }
  .bp-plans > .lp-plan.rec { margin: -24px 0 !important; padding: 42px 36px 36px !important; }
  .bp-plans > .lp-plan.rec .lp-flag { top: 44px; right: 36px; }
  .bp-plans > .lp-plan.rec h3 { font-size: 27px; }
  .bp-plans > .lp-plan.rec .lp-price .amt { font-size: 52px; }
}
@media (max-width: 480px) {
  .bp-plans > .lp-plan { --pc-r: 26px; --pc-rim: 6px; padding: 28px 22px 24px !important; }
}

/* ---------- a gentle lift on computers; still for reduced motion ---------- */
@media (hover: hover) and (pointer: fine) {
  .hm-plans > .hm-plan, .bp-plans > .lp-plan { transition: opacity .7s var(--spring, ease), transform .7s var(--spring, ease), translate .35s var(--spring, ease);
    transition-delay: calc(var(--d, 0) * 70ms), calc(var(--d, 0) * 70ms), 0s; }
  .hm-plans > .hm-plan:hover, .bp-plans > .lp-plan:hover { translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-plans > .hm-plan:hover, .bp-plans > .lp-plan:hover { translate: none; }
}

/* 13.13: Hobbyist on a card of its own under the three (the owner, Nov 4 2026: "lets give hobbyist its own plaque at the
   bottom of the three. Its too buried in small print"): the same glass as the plans, the last card on a phone, and one
   row across the width on a computer, below the raised recommended card. Home page (.hm-plan.hb) and Plan & usage
   (.lp-plan.bp-hobby) alike */
.home .hm-plans > .hm-plan.hb .hb-id, .bp-plans > .lp-plan.bp-hobby .hb-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.home .hm-plans > .hm-plan.hb .hb-id { margin: -10px 0 0 -12px; }
.home .hm-plans > .hm-plan.hb .pc-ic { width: 76px; height: 76px; }
.home .hm-plans > .hm-plan.hb .hb-line, .bp-plans > .lp-plan.bp-hobby .hb-line { margin-top: 4px; color: var(--pc-soft); font-size: 15.5px; line-height: 1.4; }
.home .hm-plans > .hm-plan.hb .hm-btn:last-child { margin-bottom: 0; }        /* no yearly price under this one */
.bp-plans > .lp-plan.bp-hobby { grid-column: 1 / -1; }
.bp-plans > .lp-plan.bp-hobby .lp-phours { border-top: 0 !important; font-size: 14px; margin-bottom: 20px; }
.bp-plans > .lp-plan.bp-hobby .lp-phours b { font-size: 15px; color: var(--pc-ink); margin-bottom: 6px; }
.bp-plans > .lp-plan.bp-hobby .hb-more { display: block; color: var(--pc-soft); line-height: 1.4; }
.bp-plans > .lp-plan.bp-hobby .hb-id { margin: -6px 0 0 -6px; }
.bp-plans > .lp-plan.bp-hobby .pc-ic { width: 60px; height: 60px; }
@media (min-width: 900px) {
  .home .hm-plans > .hm-plan.hb { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 34px; margin-top: 34px !important;
    padding: 26px 36px !important; }
  .home .hm-plans > .hm-plan.hb .hb-id { flex: 1.6; margin: -6px 0 -6px -10px; }
  .home .hm-plans > .hm-plan.hb .price { margin-top: 0; flex: none; }
  .home .hm-plans > .hm-plan.hb .price b { font-size: 46px; }
  .home .hm-plans > .hm-plan.hb .pts { margin: 0; flex: 1.3; }
  .home .hm-plans > .hm-plan.hb .hm-btn { margin: 0; width: auto; min-width: 210px; flex: none; }
}
@container bpplans (min-width: 860px) {
  .bp-plans > .lp-plan.bp-hobby { flex-direction: row; align-items: center; gap: 28px; margin-top: 26px !important; padding: 24px 32px !important; }
  .bp-plans > .lp-plan.bp-hobby .hb-id { flex: 1.2; margin: -4px 0 -4px -6px; }
  .bp-plans > .lp-plan.bp-hobby .lp-price { margin-top: 0; flex: none; }
  .bp-plans > .lp-plan.bp-hobby .lp-phours { margin: 0; flex: 1.3; }
  .bp-plans > .lp-plan.bp-hobby .btn.block { width: auto; min-width: 220px; flex: none; }
}