/* ==========================================================================
   Subtitl — PRICING, redesigned (index.html only; loaded after styles.css)
   --------------------------------------------------------------------------
   Owner brief 2026-09-25: rethink the pricing section — layout, cards,
   colours, motion, something creative. This file only RESTYLES and ADDS;
   every hook the checkout depends on keeps its element and its place
   (data-checkout*, data-device-sel, .now/.was rollers, .pc-stack states,
   .price-seg, data-monthly-plan, the gate states). The rollers in
   styles.css are untouched — they measure the DOM, so nothing here changes
   the box they live in beyond font size.

   New:
     · Lifetime card — deep navy with a slow light SWEEP across it, a cursor
       SPOTLIGHT (app.js initPriceFx), a faint glyph corner, a bigger price
     · Monthly card — the site's tactile light card (as in the bento)
     · "Monthly adds up. Lifetime doesn't." — the break-even, drawn as 12
       growing bars against Lifetime's flat line (app.js initPriceChart)
     · billing terms — the same text, set as two tidy columns (it stays
       fully visible: gateways need the recurring charge disclosed plainly)
   ========================================================================== */

/* ==========================================================================
   CRAFTED (owner's pick from /pricing-lab round 2, 2026-09-25 — after
   rejecting themed objects as gimmicky and plain cards as too simple).
   Richness from detail that carries information:
     · a recessed dark-glass PRICE PANEL (.cr-panel) — plan, price rollers,
       launch-price line, CTA
     · the features as illustrated TILES (.cr-tiles); the device tile holds
       the real stepper (data-device-sel), so the price, the launch-price line and
       checkout's device count follow it (initDeviceTiers scopes to
       .price-head, which is why the tiles live inside it)
     · a rim that lights only near the cursor (app.js initPriceFx → --mx/--my)
   Lifetime is glossy black with a machined rim; Monthly is the bento's
   tactile light card. No objects, no themes.
   ========================================================================== */
.price-card--featured,.price-card--monthly{border-radius:30px;border:1.5px solid transparent;overflow:hidden;padding:12px}
.price-card--featured::before{content:none}
.price-card--featured::after{border-radius:30px}
.price-card .price-head{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0}
.cr-panel{position:relative;border-radius:22px;padding:24px 24px 22px}
.cr-panel .ph-row{margin:0}
.cr-panel .price-amount{margin-top:20px}
.cr-panel .ph-sub{margin:8px 0 0}
.cr-panel .btn{margin-top:22px !important}
.price-card .price-flag{font:600 12px/1 var(--sans);padding:7px 11px;border-radius:999px}

.cr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 0 2px}
.cr-tiles--mo{grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-tile{border-radius:16px;padding:14px 13px 13px;display:flex;flex-direction:column;gap:10px;min-width:0;
  transition:background .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine){ .cr-tile:hover{transform:translateY(-2px)} }
.cr-ic{height:28px;display:flex;align-items:center;gap:6px}
.cr-ic svg{width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cr-logos{display:flex;gap:6px}
.cr-logos img{width:26px;height:26px;border-radius:7px;display:block}
.cr-glyph{font:700 1.3rem/1 var(--sans-indic,var(--sans))}
.cr-glyph--sm{font-size:.95rem;opacity:.6}
.cr-t{font:600 .86rem/1.25 var(--sans)}
.cr-s{font:400 .76rem/1.35 var(--body);margin-top:2px}
/* the device tile: title + the stepper, compact */
.cr-tile--dev .dev-sel{margin:8px 0 0;width:100%;justify-content:space-between;padding:3px}
.cr-tile--dev .dev-btn{width:26px;height:26px;font-size:15px}
.cr-tile--dev .dev-read{font-size:.82rem}
.cr-tile--dev .dev-extra{margin:6px 0 0;font-size:.72rem}

/* ---- LIFETIME: glossy black ------------------------------------------------ */
.price-card--featured{color:#fff;
  background:
    radial-gradient(90% 50% at 50% -8%,rgba(120,160,255,.14),transparent 60%) padding-box,
    linear-gradient(180deg,#15171D 0%,#0A0B0F 100%) padding-box,
    linear-gradient(180deg,#6E7078 0%,#2A2C31 40%,#15161A 70%,#4A4C52 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 70px -34px rgba(0,0,0,.55)}
.price-card--featured .cr-panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -12px 24px rgba(0,0,0,.25)}
.price-card--featured .price-plan{color:#fff}
.price-card--featured .price-flag{color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.price-card--featured .price-amount .now{color:#fff;font-size:clamp(3rem,5vw,4rem)}
.price-card--featured .price-amount .per{color:rgba(228,233,244,.6)}
.price-card--featured .ph-sub{color:rgba(228,233,244,.62)}
.price-card--featured .cr-tile{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.price-card--featured .cr-tile:hover{background:rgba(255,255,255,.065)}
.price-card--featured .cr-ic svg{stroke:#CFDBF3}
.price-card--featured .cr-glyph{color:#CFDBF3}
.price-card--featured .cr-t{color:#EEF1F7}
.price-card--featured .cr-s{color:rgba(220,228,244,.55)}
/* the rim that lights near the cursor */
.price-card--featured > .pc-rim{position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;z-index:3;padding:1.5px;
  background:radial-gradient(200px circle at var(--mx,-300px) var(--my,-300px),rgba(140,190,255,.95),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease}
.price-card--featured.is-lit > .pc-rim{opacity:1}
.price-card--featured.is-monthly > .pc-rim{display:none}

/* ---- LIFETIME: liquid-metal stroke + "Best deal" badge (2026-09-27) ---------
   app.js initMetal lazy-loads vendor/metal-island.js (metal-fx) and paints the
   ring on .pc-metal, an EMPTY overlay laid exactly over the card — the card
   itself is never re-rendered. Without WebGL2 none of this mounts: the card
   keeps its machined CSS rim and the badge stays the CSS pill below. One metal
   accent only: the stroke + the badge; the CTA and the price stay as they are. */
.price-stagecol{position:relative}
.pc-metal{position:absolute;left:0;top:0;z-index:4;pointer-events:none;display:flex;line-height:0}
.pc-metal *{pointer-events:none !important}
/* the overlay is bare: metal-fx's own hairline/inner-shadow chrome is for
   buttons, and would draw a second edge on the card */
.pc-metal .metal-fx-root::before,.pc-metal .metal-fx-root::after{box-shadow:none !important}
.pc-metal .metal-fx-inner{display:none !important}
/* while metal is on, the cursor-lit rim would be a second accent on the same edge */
.price-card--featured.has-metal > .pc-rim{display:none}

/* "Best deal": the static pill IS the fallback (no JS / no WebGL2) — a white
   pill with a brand-gradient rim, so it reads as the card's headline badge on
   the black card either way. .is-metal = the island has taken it over. */
.price-card .price-flag--deal{display:inline-flex;align-items:center;justify-content:center;
  font:600 12.5px/1 var(--sans);letter-spacing:.01em;padding:7px 13px;border-radius:999px;
  color:var(--ink);text-shadow:none;border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--brand-gradient) border-box;
  box-shadow:0 4px 14px -4px rgba(0,136,255,.45)}
.price-card .price-flag--deal.is-metal{padding:0;border:0;background:none;box-shadow:none}

/* ---- MONTHLY: the bento's tactile light card -------------------------------- */
.price-card--monthly,.price-card--featured.is-monthly{color:var(--ink)}
.price-card--monthly{background:#EFEFF1;box-shadow:none}
.price-card--monthly .cr-panel,.price-card--featured.is-monthly .pc-monthly .cr-panel{
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F3F5 100%);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -2px 4px rgba(20,20,30,.05),0 0 0 1px rgba(20,20,30,.07),0 0 0 7px rgba(255,255,255,.6),0 0 0 8px rgba(20,20,30,.05),0 24px 36px -26px rgba(20,20,40,.4)}
.price-card--monthly .cr-tiles,.price-card--featured.is-monthly .pc-monthly .cr-tiles{padding-top:20px}
.price-card--monthly .cr-tile,.price-card--featured.is-monthly .cr-tile{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(20,30,60,.06)}
.price-card--monthly .cr-ic svg,.price-card--featured.is-monthly .cr-ic svg{stroke:var(--brand-blue)}
.price-card--monthly .cr-t,.price-card--featured.is-monthly .cr-t{color:var(--ink)}
.price-card--monthly .cr-s,.price-card--featured.is-monthly .cr-s{color:var(--ink-soft)}
.price-card--monthly .ph-desc{margin:6px 0 0}

/* ---- DESKTOP: side by side ------------------------------------------------- */
@media (min-width:821px){
  #pricing .price-grid{max-width:1080px;grid-template-columns:1.25fr 1fr;gap:22px;align-items:stretch}
  #pricing .price-grid:has(.price-card--monthly[hidden]){grid-template-columns:1fr;max-width:640px}
  .price-stagecol,.price-stagecol > .price-card--featured{height:100%}
}
/* ---- PHONES: no blocks (owner, 2026-09-25: "simpler instead of blocks").
   One clean surface per plan; the features become a plain list — small icon,
   title, one line — split by hairlines; the device tile is a single row with
   the stepper on the right. Desktop keeps the tiles. -------------------------- */
@media (max-width:820px){
  .price-card--featured,.price-card--monthly{padding:0}
  .cr-panel,.price-card--featured .cr-panel,.price-card--monthly .cr-panel,
  .price-card--featured.is-monthly .pc-monthly .cr-panel{background:none !important;box-shadow:none !important;border-radius:0;padding:26px 22px 6px}
  .cr-tiles,.cr-tiles--mo{display:flex;flex-direction:column;gap:0;padding:8px 22px 14px !important}
  .cr-tile,.price-card--featured .cr-tile,.price-card--monthly .cr-tile,.price-card--featured.is-monthly .cr-tile{
    flex-direction:row;align-items:center;gap:14px;padding:14px 0;border-radius:0;background:none !important;box-shadow:none !important;
    border-top:1px solid rgba(255,255,255,.08)}
  .price-card--monthly .cr-tile,.price-card--featured.is-monthly .cr-tile{border-top-color:rgba(20,30,60,.08)}
  .cr-tile:hover{transform:none}
  .cr-ic{height:auto;width:30px;flex:none;justify-content:center}
  .cr-ic svg{width:22px;height:22px}
  /* the two app icons overlap as a pair so they fit the 30px icon column
     (side by side they were 43px and ran into "Inside your editor") */
  .cr-logos{gap:0}
  .cr-logos img{width:20px;height:20px;border-radius:5px;box-shadow:0 0 0 1.5px #0d0d10}
  .cr-logos img + img{margin-left:-9px}
  .cr-glyph{font-size:1.1rem}
  .cr-glyph--sm{display:none}
  .cr-tile > div:last-child{flex:1;min-width:0}
  .cr-t{font-size:.95rem}
  .cr-s{font-size:.82rem}
  /* devices: one row — label left, stepper right, the per-device rate under the label */
  .cr-tile--dev{order:9}
  .cr-tile--dev > div:last-child{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
  .cr-tile--dev .cr-t{grid-column:1;grid-row:1}
  .cr-tile--dev .dev-extra{grid-column:1;grid-row:2;margin:2px 0 0}
  .cr-tile--dev .dev-sel{grid-column:2;grid-row:1 / span 2;width:auto;margin:0;gap:4px}
  .cr-tile--dev .cr-t{white-space:nowrap}
  .cr-tile--dev .dev-read{min-width:62px;text-align:center;font-size:.8rem}
  .cr-tile--dev .dev-btn{width:24px;height:24px}
}
@media (max-width:380px){ .cr-tile--dev .cr-ic{display:none} }   /* small phones: room for the stepper */

/* ---- "Monthly adds up. Lifetime doesn't." --------------------------------- */
.price-be{max-width:1080px;margin:clamp(22px,3vw,34px) auto 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,3vw,34px);border-radius:28px;
  background:#F4F6F9;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,30,60,.06)}
.price-be.is-empty{display:none}
#pricing.is-checking .price-be,
#pricing.owns-lifetime .price-be{display:none}
.pbe-kicker{font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pbe-copy h3{margin:10px 0 12px;font:800 clamp(1.5rem,2.4vw,2rem)/1.08 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.pbe-copy h3 span{color:var(--blue)}
.pbe-copy p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.55;max-width:34ch}
.pbe-copy p b{color:var(--ink);font-weight:700;white-space:nowrap}
.pbe-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font:500 12.5px/1 var(--body);color:var(--ink-soft)}
.pbe-legend span{display:inline-flex;align-items:center;gap:7px}
.pbe-legend span::before{content:"";width:12px;height:12px;border-radius:4px}
.lg-mo::before{background:linear-gradient(180deg,#AFC4DD,#8FA7C4)}
.lg-life::before{height:3px !important;border-radius:2px !important;width:16px !important;background:#1286E6}

.pbe-chart{min-width:0}
.pbe-plot{position:relative;height:clamp(170px,18vw,220px);border-bottom:1px solid rgba(20,30,60,.12)}
.pbe-bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,.8vw,9px);align-items:end}
.pbe-bars i{position:relative;height:100%;display:flex;align-items:flex-end}
.pbe-bars b{display:block;width:100%;height:calc(var(--h,0) * 100%);border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,#B9CBE0,#93AAC6);transform-origin:50% 100%;transform:scaleY(0);
  transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--k) * 70ms),height .5s cubic-bezier(.2,.8,.2,1),background .4s ease}
/* past break-even: every one of these is money Lifetime would have saved */
.pbe-bars i.is-over b{background:linear-gradient(180deg,#FFB27A,#FF8A1F)}
.price-be.in .pbe-bars b{transform:scaleY(1)}
/* Lifetime: one flat line at its price */
.pbe-life{position:absolute;left:-6px;right:-6px;bottom:calc(var(--y,0) * 100%);height:0;border-top:3px solid #1286E6;
  filter:drop-shadow(0 2px 6px rgba(18,134,230,.45));transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s,bottom .5s ease}
.price-be.in .pbe-life{transform:scaleX(1)}
.pbe-life span{position:absolute;left:10px;bottom:6px;white-space:nowrap;font:700 12px/1 var(--sans);color:#0E66CC;
  background:#fff;padding:5px 9px;border-radius:999px;box-shadow:0 0 0 1px rgba(18,134,230,.25)}
/* the crossing: where Monthly first costs more than Lifetime */
.pbe-cross{position:absolute;top:-8px;bottom:0;left:calc(var(--x,0) * 100%);width:0;border-left:2px dashed rgba(255,138,31,.8);
  opacity:0;transition:opacity .4s ease 1.1s,left .5s ease}
.price-be.in .pbe-cross{opacity:1}
.pbe-cross span{position:absolute;top:-22px;left:50%;translate:-50% 0;white-space:nowrap;font:700 11.5px/1 var(--sans);color:#C8620E;
  background:#FFF1E4;padding:5px 9px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,138,31,.35)}
.pbe-cross[hidden]{display:none}
.pbe-axis{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,.8vw,9px);margin-top:8px;
  font:500 11px/1 var(--body);color:var(--ink-faint);text-align:center}
.pbe-axis::after{content:"months";grid-column:1/-1;text-align:right;margin-top:4px;font-size:10.5px;letter-spacing:.04em}

/* ---- billing terms: same words, two columns ------------------------------ */
#pricing .price-terms{max-width:1080px;background:transparent;border:0;box-shadow:none;padding:clamp(18px,2.4vw,26px) 4px 0}
#pricing .price-terms ul{list-style:none;padding:0;columns:2;column-gap:40px}
#pricing .price-terms li{position:relative;padding-left:22px;margin:0 0 12px;break-inside:avoid}
#pricing .price-terms li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(18,134,230,.45)}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .price-be{grid-template-columns:1fr}
  .pbe-copy p{max-width:none}
}
@media (max-width:600px){
  #pricing .price-terms ul{columns:1}
  .pbe-chart{margin-top:14px}
  .price-be{padding:20px 16px;border-radius:22px}
  .pbe-life span{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .pbe-bars b{transform:none;transition:none}
  .pbe-life{transform:none;transition:none}
  .pbe-cross{opacity:1;transition:none}
  #pricing .price-grid.in .price-list li{animation:none}
}

/* ---- private beta card (2026-10-05) — replaces the plans while beta testers
   are asked what they'd pay. One centred card, the same blue-ring bullets as
   the billing terms, one CTA to /beta. --------------------------------------- */
#pricing .beta-card{max-width:620px;margin:clamp(22px,3vw,34px) auto 0;padding:clamp(24px,3.4vw,38px);
  border-radius:26px;background:#fff;border:1px solid rgba(15,30,60,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px -28px rgba(18,60,140,.35);text-align:center}
#pricing .beta-points{list-style:none;margin:0 0 26px;padding:0;text-align:left;display:grid;gap:14px}
#pricing .beta-points li{position:relative;padding-left:26px;line-height:1.55;color:var(--ink-soft)}
#pricing .beta-points li b{color:var(--ink)}
#pricing .beta-points li::before{content:"";position:absolute;left:3px;top:.5em;width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(18,134,230,.55)}
#pricing .beta-card .btn{min-width:min(100%,280px);justify-content:center}
#pricing .beta-req{margin:16px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-faint)}
#pricing .beta-req a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}