/* The public /plans page, ported from the billing mockup's PUBLIC
   sections only (tiers, add-ons, Adslocal). Scoped under .t2a-plans so
   nothing here can restyle the shared chrome; loads only on
   site_plans.html via the head_extra block. */

  .t2a-plans{
    --bg:#0E1013; --surface:#181B21; --surface-2:#1F232B; --ink:#F2F3F5;
    --muted:#828C9B; --muted-2:#6C7686;
    --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.16);
    --live:#FF2A2A; --live-soft:rgba(255,42,42,0.5);
    --ok:#34E08A; --amber:#FFB020; --focus:#6FA8FF;
    --note:#7CC6FF; --note-bg:rgba(60,120,180,0.09); --note-line:rgba(124,198,255,0.4);
  }
  .t2a-plans{
    position:relative;
    background:var(--bg); color:var(--ink);
    font-family:'Archivo',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  .t2a-plans::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(40,46,56,0.55) 0%, rgba(14,16,19,0) 55%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  }
  .t2a-plans .mono{ font-family:'JetBrains Mono',monospace; }
  .t2a-plans .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--muted-2); }

  /* header */
  header { border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(14,16,19,0.86); backdrop-filter:blur(10px); z-index:20; }
  .t2a-plans .headrow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.85rem 0; }
  .t2a-plans .brand{ display:inline-flex; align-items:center; gap:0.6rem; }
  .t2a-plans .brand-mark{ height:34px; width:auto; display:block; }
  .t2a-plans .wm{ font-weight:900; letter-spacing:-0.03em; font-size:1.5rem; }
  .t2a-plans .wm .two{ color:var(--live); text-shadow:0 0 14px var(--live-soft); }
  .t2a-plans .tally{ display:inline-flex; align-items:center; gap:0.5rem; font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); }
  .t2a-plans .dot{ width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 9px var(--live-soft); animation:blink 1.6s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0.35; } }

  /* hero */
  .t2a-plans .hero{ padding:clamp(2.6rem,7vw,4.5rem) 0 clamp(1.6rem,4vw,2.4rem); }
  .t2a-plans .hero h1{ font-weight:900; letter-spacing:-0.03em; font-size:clamp(2rem,5.4vw,3.3rem); line-height:1.02; max-width:20ch; }
  .t2a-plans .hero p{ color:var(--muted); font-size:clamp(1rem,2vw,1.15rem); max-width:56ch; margin-top:1rem; }

  /* pricing thesis strip */
  .t2a-plans .thesis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:2rem; }
  .t2a-plans .thesis .cell{ background:var(--surface); padding:1.15rem 1.25rem; }
  .t2a-plans .thesis .cell h4{ font-size:0.9rem; font-weight:700; margin-bottom:0.35rem; display:flex; align-items:center; gap:0.5rem; }
  .t2a-plans .thesis .cell p{ color:var(--muted); font-size:0.85rem; margin:0; }
  .t2a-plans .chip{ font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; padding:3px 7px; border-radius:5px; }
  .t2a-plans .chip.base{ color:var(--focus); background:rgba(111,168,255,0.14); }
  .t2a-plans .chip.air{ color:var(--amber); background:rgba(255,176,32,0.14); }
  .t2a-plans .chip.over{ color:var(--live); background:rgba(255,42,42,0.14); }
  .t2a-plans .chip.ad{ color:var(--ok); background:rgba(52,224,138,0.14); }

  /* section frame */
  section { padding:clamp(2.2rem,5vw,3.4rem) 0; }
  .t2a-plans .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
  .t2a-plans .sec-head h2{ font-weight:900; letter-spacing:-0.02em; font-size:clamp(1.4rem,3vw,1.9rem); }
  .t2a-plans .sec-head p{ color:var(--muted); font-size:0.9rem; max-width:48ch; margin-top:0.3rem; }

  /* cycle toggle */
  .t2a-plans .cycle{ display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:3px; }
  .t2a-plans .cycle button{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); background:transparent; border:none; border-radius:7px; padding:8px 14px; cursor:pointer; }
  .t2a-plans .cycle button.on{ background:var(--ink); color:#0B0D10; font-weight:700; }
  .t2a-plans .save-tag{ font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ok); margin-left:0.6rem; }

  /* plan grid */
  .t2a-plans .plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0.9rem; align-items:stretch; }
  .t2a-plans .plan{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.25rem; display:flex; flex-direction:column; position:relative; }
  .t2a-plans .plan.feature{ border-color:var(--live-soft); box-shadow:0 0 0 1px var(--live-soft), 0 20px 60px rgba(255,42,42,0.08); }
  .t2a-plans .plan .rec{ position:absolute; top:-10px; left:1.25rem; font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:#0B0D10; background:var(--live); padding:4px 9px; border-radius:5px; font-weight:700; }
  .t2a-plans .plan .name{ font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; }
  .t2a-plans .plan .blurb{ color:var(--muted); font-size:0.82rem; margin-top:0.25rem; min-height:2.4em; }
  .t2a-plans .price{ margin:1rem 0 0.2rem; display:flex; align-items:baseline; gap:0.35rem; }
  .t2a-plans .price .amt{ font-weight:900; font-size:2rem; letter-spacing:-0.03em; }
  .t2a-plans .price .cur{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--muted-2); align-self:flex-start; margin-top:0.3rem; }
  .t2a-plans .price .per{ color:var(--muted-2); font-size:0.8rem; }
  .t2a-plans .allow{ font-family:'JetBrains Mono',monospace; font-size:0.74rem; color:var(--amber); margin-top:0.15rem; }
  .t2a-plans .allow .over{ color:var(--muted-2); }
  .t2a-plans .plan ul{ list-style:none; margin:1.1rem 0 1.3rem; display:flex; flex-direction:column; gap:0.5rem; }
  .t2a-plans .plan li{ font-size:0.84rem; color:var(--ink); display:flex; gap:0.55rem; align-items:flex-start; }
  .t2a-plans .plan li::before{ content:"›"; color:var(--live); font-weight:700; }
  .t2a-plans .plan li.off{ color:var(--muted-2); }
  .t2a-plans .plan li.off::before{ content:"·"; color:var(--muted-2); }
  .t2a-plans .plan .cta{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; font-weight:700; font-size:0.86rem; border-radius:10px; padding:11px 14px; cursor:pointer; border:1px solid transparent; text-decoration:none; }
  .t2a-plans .cta.solid{ background:var(--ink); color:#0B0D10; } .t2a-plans .cta.solid:hover{ background:#fff; }
  .t2a-plans .cta.ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); } .t2a-plans .cta.ghost:hover{ background:rgba(255,255,255,0.05); }

  /* add-ons */
  .t2a-plans .addons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0.9rem; }
  .t2a-plans .addon{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.2rem; }
  .t2a-plans .addon h4{ font-size:0.95rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
  .t2a-plans .addon .pr{ font-family:'JetBrains Mono',monospace; font-size:0.74rem; color:var(--amber); }
  .t2a-plans .addon p{ color:var(--muted); font-size:0.82rem; margin-top:0.4rem; }

  /* adslocal callout */
  .t2a-plans .adslocal{ background:linear-gradient(180deg, rgba(52,224,138,0.06), rgba(52,224,138,0.02)); border:1px solid rgba(52,224,138,0.25); border-radius:18px; padding:clamp(1.4rem,3vw,2rem); }
  .t2a-plans .adslocal .tag{ color:var(--ok); }
  .t2a-plans .adslocal h3{ font-weight:900; letter-spacing:-0.02em; font-size:clamp(1.3rem,2.6vw,1.6rem); margin-top:0.5rem; }
  .t2a-plans .adslocal p{ color:var(--muted); font-size:0.92rem; max-width:62ch; margin-top:0.6rem; }

  /* billing management preview */
  .t2a-plans .bp-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.25rem 1.35rem; border-bottom:1px solid var(--line); }
  .t2a-plans .bp-top .cur-plan{ display:flex; align-items:center; gap:0.7rem; }
  .t2a-plans .bp-top .cur-plan .nm{ font-weight:800; font-size:1.15rem; }
  .t2a-plans .bp-top .renew{ color:var(--muted); font-size:0.8rem; }
  .t2a-plans .bp-cell{ background:var(--surface); padding:1.35rem; }
  .t2a-plans .bp-cell h4{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1rem; }

  .t2a-plans .bars{ display:flex; gap:2px; height:16px; }
  .t2a-plans .bars i{ flex:1; border-radius:1px; background:rgba(255,255,255,0.07); }
  .t2a-plans .bars i.lit{ background:var(--ok); }
  .t2a-plans .bars i.lit.mid{ background:var(--amber); }
  .t2a-plans .bars i.lit.hot{ background:var(--live); box-shadow:0 0 7px var(--live-soft); }
  .t2a-plans .over-note{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--live); margin-top:0.3rem; }

  .t2a-plans .pay{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.85rem 0.95rem; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; margin-bottom:1rem; }
  .t2a-plans .pay .card{ font-family:'JetBrains Mono',monospace; font-size:0.82rem; }
  .t2a-plans .pay .edit{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--focus); background:none; border:none; cursor:pointer; }
  table.inv { width:100%; border-collapse:collapse; font-size:0.82rem; }
  table.inv th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); padding:0.5rem 0.4rem; border-bottom:1px solid var(--line); font-weight:500; }
  table.inv td { padding:0.6rem 0.4rem; border-bottom:1px solid var(--line); color:var(--ink); }
  table.inv td.amt { font-family:'JetBrains Mono',monospace; }
  .t2a-plans .paid{ color:var(--ok); font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; }
  .t2a-plans .dl{ color:var(--focus); font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-decoration:none; }

  .t2a-plans .admin-band{ background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:clamp(1.3rem,3vw,1.9rem); }
  .t2a-plans .admin-tag{ display:inline-flex; align-items:center; gap:0.5rem; font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--live); }
  .t2a-plans .admin-tag::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--live); }
  .t2a-plans .costgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:1.2rem 0; }
  .t2a-plans .costgrid .c{ background:var(--surface-2); padding:0.9rem 1rem; }
  .t2a-plans .costgrid .c label{ display:block; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:0.35rem; }
  .t2a-plans .costgrid .c .val{ font-weight:800; font-size:1.15rem; letter-spacing:-0.02em; }
  .t2a-plans .costgrid .c .val.floor{ color:var(--live); }
  .t2a-plans .costgrid .c .val.margin{ color:var(--ok); }
  .t2a-plans .costgrid .c .hint{ font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--muted-2); margin-top:0.2rem; }

  .t2a-plans .marginbar-wrap{ margin:1.4rem 0 0.4rem; }
  .t2a-plans .marginbar{ position:relative; height:44px; border-radius:9px; overflow:hidden; display:flex; border:1px solid var(--line-2); }
  .t2a-plans .marginbar .bite{ position:absolute; top:0; right:0; bottom:0; background:rgba(11,13,16,0.72); border-left:2px solid var(--ink); backdrop-filter:grayscale(1); transition:width .12s ease; display:flex; align-items:center; justify-content:center; }
  .t2a-plans .marginbar .bite .lbl{ font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
  .t2a-plans .marginbar.overext .bite{ border-left-color:var(--live); box-shadow:inset 3px 0 0 var(--live); }
  .t2a-plans .marker{ position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--ink); opacity:0.55; }
  .t2a-plans .marker .cap{ position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }

  .t2a-plans .ctrl{ margin-bottom:1.1rem; }
  .t2a-plans .ctrl label{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.82rem; margin-bottom:0.5rem; }
  .t2a-plans .ctrl label .rv{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--amber); }
  input[type=range].disc { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px; background:linear-gradient(90deg, var(--ok), var(--amber) 60%, var(--live)); outline:none; }
  input[type=range].disc::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--bg); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.5); }
  input[type=range].disc::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--ink); border:3px solid var(--bg); cursor:pointer; }
  .t2a-plans .life{ display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:3px; }
  .t2a-plans .life button{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.04em; color:var(--muted); background:transparent; border:none; border-radius:6px; padding:7px 11px; cursor:pointer; }
  .t2a-plans .life button.on{ background:var(--ink); color:#0B0D10; font-weight:700; }

  .t2a-plans .readout{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.25rem; }
  .t2a-plans .readout .rrow{ display:flex; justify-content:space-between; align-items:baseline; padding:0.5rem 0; border-bottom:1px solid var(--line); }
  .t2a-plans .readout .rrow:last-child{ border-bottom:none; }
  .t2a-plans .readout .rrow .k{ font-size:0.82rem; color:var(--muted); }
  .t2a-plans .readout .rrow .r{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.95rem; }
  .t2a-plans .readout .rrow .r.big{ font-size:1.3rem; }
  .t2a-plans .pl-pos{ color:var(--ok); } .t2a-plans .pl-neg{ color:var(--live); }
  .t2a-plans .status{ display:inline-flex; align-items:center; gap:0.5rem; font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; padding:6px 11px; border-radius:999px; margin-top:0.9rem; }
  .t2a-plans .status.ok{ color:var(--ok); background:rgba(52,224,138,0.12); border:1px solid rgba(52,224,138,0.4); }
  .t2a-plans .status.warn{ color:var(--live); background:rgba(255,42,42,0.12); border:1px solid var(--live-soft); }
  .t2a-plans .overext-panel{ margin-top:1rem; border:1px dashed var(--live-soft); border-radius:12px; padding:0.9rem 1.1rem; background:rgba(255,42,42,0.05); }
  .t2a-plans .overext-panel.hidden{ display:none; }
  .t2a-plans .overext-panel .oh{ font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--live); margin-bottom:0.6rem; }
  .t2a-plans .overext-panel .fig{ display:flex; justify-content:space-between; padding:0.3rem 0; font-size:0.86rem; }
  .t2a-plans .overext-panel .fig .fv{ font-family:'JetBrains Mono',monospace; font-weight:700; }
  .t2a-plans .est{ font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--muted-2); margin-top:0.6rem; }
  .t2a-plans .confirm-btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:0.8rem; font-family:inherit; font-weight:700; font-size:0.84rem; border-radius:9px; padding:10px; cursor:pointer; border:1px solid var(--live-soft); background:rgba(255,42,42,0.14); color:#ffd0d0; }

  footer { border-top:1px solid var(--line); padding:1.6rem 0; margin-top:1rem; }
  .t2a-plans .footrow{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-2); }
  a { color:inherit; }
  :focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }
  @media (prefers-reduced-motion:reduce){ .t2a-plans .dot{ animation:none; } html { scroll-behavior:auto; } }

  /* The tier strip scroller: the plan cards on one row that auto-scrolls when
     the cursor nears either edge. Every rule is pl- prefixed and scoped under
     .t2a-plans so nothing leaks into the chrome. Deliberate properties: no
     snap points (snapping fights the incremental auto-scroll), a base auto-scroll
     speed so motion starts as soon as the cursor enters the zone, and the
     script drives a persistent requestAnimationFrame loop. The fixed card
     width lets the next card peek past the right edge, the main affordance
     that the row scrolls; if every card fits, the chevrons and auto-scroll
     simply stay dormant. */
  .t2a-plans .pl-scroller { position:relative; }
  .t2a-plans .plans.pl-track {
    display:flex; gap:0.9rem; align-items:stretch; overflow-x:auto;
    padding:10px 4px 18px;
    scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:auto;
  }
  .t2a-plans .plans.pl-track::-webkit-scrollbar { height:0; width:0; }
  .t2a-plans .plans.pl-track:focus-visible { outline:2px solid var(--live); outline-offset:-4px; border-radius:12px; }
  .t2a-plans .plans.pl-track > .plan { flex:0 0 292px; }

  /* Edge fades */
  .t2a-plans .pl-fade { position:absolute; top:0; bottom:0; width:110px; pointer-events:none; z-index:2; opacity:0; transition:opacity .2s ease; }
  .t2a-plans .pl-fade.left  { left:0;  background:linear-gradient(90deg, var(--bg) 12%, transparent); }
  .t2a-plans .pl-fade.right { right:0; background:linear-gradient(270deg, var(--bg) 12%, transparent); }
  .t2a-plans .pl-fade.show { opacity:1; }

  /* Edge chevrons that live inside the scroll zones */
  .t2a-plans .pl-edge { position:absolute; top:0; bottom:18px; width:14%; max-width:150px; z-index:3; display:grid; place-items:center; pointer-events:none; }
  .t2a-plans .pl-edge.left { left:0; } .t2a-plans .pl-edge.right { right:0; }
  .t2a-plans .pl-chev { width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:rgba(14,16,19,0.7); backdrop-filter:blur(4px);
    display:grid; place-items:center; color:var(--muted); opacity:0; transform:scale(0.9); transition:opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }
  .t2a-plans .pl-chev svg { width:18px; height:18px; }
  .t2a-plans .pl-edge.show .pl-chev { opacity:1; transform:scale(1); }
  .t2a-plans .pl-edge.active .pl-chev { color:var(--live); border-color:rgba(255,42,42,0.6); background:rgba(255,42,42,0.12); box-shadow:0 0 24px -6px rgba(255,42,42,0.6); }
  .t2a-plans .pl-chev.nudge { animation:pl-cnudge 1.4s ease-in-out 3; }
  @keyframes pl-cnudge { 0%,100%{transform:scale(1) translateX(0);} 50%{transform:scale(1) translateX(4px);} }

  /* Progress bar */
  .t2a-plans .pl-progress { margin:4px 4px 0; height:3px; border-radius:999px; background:var(--line); position:relative; overflow:hidden; }
  .t2a-plans .pl-progress-bar { position:absolute; top:0; bottom:0; border-radius:999px; background:var(--live); left:0; width:30%; transition:left .05s linear, width .2s ease; box-shadow:0 0 10px var(--live-soft); }

  @media (hover:none) { .t2a-plans .pl-edge { display:none; } }
  @media (prefers-reduced-motion:reduce) { .t2a-plans .pl-chev.nudge { animation:none; } .t2a-plans .plans.pl-track { scroll-behavior:auto; } }