/* the store's own pages on top of style.css: the home page (lander, what everyone gets free, the
   plans, the table and the questions), then the cart, the account and payment complete. the look
   is the refined dark one jack picked on 2026-10-07; see the top of style.css */

/* the toast store.js fills sits in the page from the start, so it waits hidden and rises in when
   used; paynow's own notice, #notice, is drawn by the page and comes in on style.css's animation */
#toast {
  opacity: 0; pointer-events: none; animation: none;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.18s cubic-bezier(0, 0, 0.58, 1), transform 0.18s cubic-bezier(0, 0, 0.58, 1);
}
#toast.on { opacity: 1; pointer-events: auto; transform: none; transition-duration: 0.25s; }
#toast:empty { display: none; }

/* the Close button over paynow's checkout (jack, 2026-10-30: a slim one with words, standing on the
   frame). the frame is 800 by 760 in the middle of the screen (PayNow.js 1.3.0), under an overlay at
   z-index 999999, so the button's 28px stand 8px over the frame's top edge at its right end. a window
   too short for that, a laptop's, gets it beside the frame's top right corner, and one too narrow
   for that as well, under the frame's 800 and the button's 73 with room either side plus a scrollbar,
   gets it inside the corner */
.checkout-close {
  position: fixed; z-index: 1000000;
  top: max(12px, calc(50% - 416px)); right: max(12px, calc(50% - 400px));
  border-color: var(--border-strong); background: var(--surface-2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, background-color var(--motion);
}
@media (max-height: 855px) {
  .checkout-close { top: max(12px, calc(50% - 380px)); right: auto; left: calc(50% + 408px); }
}
@media (max-height: 855px) and (max-width: 1009px) {
  .checkout-close { top: max(12px, calc(50% - 368px)); right: calc(50% - 388px); left: auto; }
}
.checkout-close.on { opacity: 1; pointer-events: auto; }
.checkout-close:hover { background: var(--surface-3); }
.checkout-close svg { width: 16px; height: 16px; flex: none; margin-right: -4px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* the home page: the bar's width, so everything lines up under the logo, set left, no pictures
   (jack, 2026-10-05, and again 2026-10-07: a big centred hero reads as made by ai). /products and a
   product's own page wear the top of it */
.home { width: var(--band); margin: 0 auto; padding-top: clamp(48px, 7vw, 88px); }
.home-title { font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.home-lead { max-width: 560px; margin-top: 12px; color: var(--muted); font-size: 17px; line-height: 26px; text-wrap: pretty; }
/* /products and a product's own page: their heading centred over the plans, as the plans are */
.home-head { text-align: center; }
.home-head .home-lead { margin-inline: auto; }

/* the lander over the plans: what the server is and how to join. after the mrkr hero in jack's
   figma (2026-10-07): the name in white running on into what the server is in grey, set low on the
   left of a tall band, over a grid of small squares that fills the band edge to edge, from the bar
   down, brightest top right and gone behind the words. main.js draws and moves the squares */
.lander { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(360px, 44vw, 520px); }
/* a canvas is sized like an image, by its own width and height, not stretched between a top and a
   bottom, so its height is given outright: the lander's, the room up to the bar, 120px under, into
   the gap before the next section, and the tail on into that section, where the squares thin out
   to nothing rather than stopping on a line (jack, 2026-10-07, run on further 2026-10-14). the
   lander is not isolated, so the canvas sits behind that section rather than over it */
.lander-fx {
  --tail: clamp(180px, 24vw, 280px);
  position: absolute; z-index: -1; top: calc(-1 * clamp(48px, 7vw, 88px)); left: 50%;
  display: block; width: 100vw; height: calc(100% + clamp(48px, 7vw, 88px) + 120px + var(--tail)); margin-left: -50vw; pointer-events: none;
  -webkit-mask-image: var(--fade-out);
  mask-image: var(--fade-out);
}
/* the same grid behind the plans (jack, 2026-10-07): edge to edge, from 96px over the section to
   96px under it and a sixth of that height again each way, where main.js thins it out into the
   sections either side (2026-10-14), the cards over it. not isolated, so it sits behind those
   sections, the table's card included, rather than over them */
.has-squares { position: relative; }
.squares-plans { position: absolute; z-index: -1; top: calc(-96px - (100% + 192px) / 6); left: 50%; display: block; width: 100vw; height: calc((100% + 192px) * 4 / 3); margin-left: -50vw; pointer-events: none; }
.lander-title { max-width: 780px; color: var(--faint); font-family: var(--display); font-size: clamp(28px, 3.3vw, 38px); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; text-wrap: pretty; }
.lander-name { color: var(--ink); }
.lander-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; }
.lander-act .chip { height: 36px; }

.home-sec { margin-top: clamp(96px, 12vw, 144px); }
.sec-h2 { font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.sec-title { font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.sec-lead { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 22px; }

/* what every player gets: a plain list, each feature's name beside what it does, ruled off like a
   spec sheet, no icons and no cards (jack, 2026-10-07: an icon grid reads as made by ai) */
.free { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--border); }
.free li { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 32px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.free h3 { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 22px; }
.free p { color: var(--muted); font-size: 15px; line-height: 22px; text-wrap: pretty; }

/* the plans (jack, 2026-10-07): the section centred, a card a product with the name and description
   it has in the dashboard, and over the cards a switch of the store's tags. each tag's cards are a
   panel, only the picked one shown, at its own height, fading in. the radios pick the panel in css,
   so a price never waits on a script; eight tags is as many as these rules reach */
.home-sec.is-centred { text-align: center; }
.shop { margin-top: 24px; }
.panel { display: none; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; }
.panel.is-all,
.shop:has(.tab:nth-of-type(1) input:checked) .panel:nth-child(1),
.shop:has(.tab:nth-of-type(2) input:checked) .panel:nth-child(2),
.shop:has(.tab:nth-of-type(3) input:checked) .panel:nth-child(3),
.shop:has(.tab:nth-of-type(4) input:checked) .panel:nth-child(4),
.shop:has(.tab:nth-of-type(5) input:checked) .panel:nth-child(5),
.shop:has(.tab:nth-of-type(6) input:checked) .panel:nth-child(6),
.shop:has(.tab:nth-of-type(7) input:checked) .panel:nth-child(7),
.shop:has(.tab:nth-of-type(8) input:checked) .panel:nth-child(8) {
  display: flex; animation: panel-in 0.24s var(--std);
}
@keyframes panel-in { from { opacity: 0; } }

/* a card: the name, the description, then the price and buttons held to the bottom, so they sit
   level across the row whatever the descriptions run to. the words read from the left inside the
   centred row (jack's pick) */
.plan {
  flex: 0 1 340px; min-width: 0; display: flex; flex-direction: column;
  padding: 28px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); text-align: left; scroll-margin-bottom: 24px;
}
/* where a product link or a footer link lands, its card a shade lighter for a moment: no ring and
   no glow */
.plan.is-lit { animation: plan-lit 1.6s var(--std); }
@keyframes plan-lit { from { background-color: var(--surface-3); } }
/* the trial, edge to edge over the card in the logo's purple so it is seen (jack, 2026-11-03).
   the margins undo the card's padding, so they follow it */
.plan-trial {
  margin: -28px -28px 22px; padding: 11px 16px;
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  background: var(--brand); color: var(--ink);
  font-size: 19px; font-weight: 700; line-height: 24px; text-align: center;
}
.plan-head { position: relative; text-align: center; }
.plan-lasts { margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; }
.plan-name { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; }
/* the gift, a small quiet icon level with the name, its glyph on the card's right edge and out of
   the flow (jack, 2026-11-09). its tip held to that edge, since centred it runs off the card */
.plan-head > .buy-gift {
  position: absolute; top: -1px; right: -6px;
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color var(--motion), color var(--motion);
}
.plan-head > .buy-gift:hover { background: var(--surface-3); color: var(--ink); }
.plan-head > .buy-gift .gift-icon { width: 16px; height: 16px; }
.plan-head > .buy-gift::after { left: auto; right: 0; translate: none; }
/* the dashboard's rich text, set small and grey to sit under the name */
.plan-desc.text-content { max-width: none; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 21px; }
.plan-desc.text-content p, .plan-desc.text-content ul, .plan-desc.text-content ol { margin-bottom: 12px; }
/* a list as ticks, the comparison table's, tight so a plan reads at a glance (jack, 2026-11-03) */
.plan-desc.text-content ul { padding-left: 0; list-style: none; }
.plan-desc.text-content ul li { position: relative; margin-bottom: 5px; padding-left: 24px; color: var(--text); line-height: 20px; }
.plan-desc.text-content ul li::before { content: ""; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; background: var(--ink); }
.plan-desc.text-content > :last-child { margin-bottom: 0; }
/* the empty paragraphs a rich text box leaves round html typed into it */
.plan-desc.text-content p:empty { display: none; }
.plan-foot { margin-top: auto; padding-top: 24px; }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price-amount { color: var(--ink); font-family: var(--display); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-was { color: var(--faint); font-size: 16px; font-variant-numeric: tabular-nums; }
.price-cur { color: var(--faint); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.price .badge { align-self: center; }
.buy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.buy > * { grid-column: 1 / -1; }
.buy > .buy-main { grid-column: span 3; }
.buy > .buy-cart { grid-column: span 1; padding: 0; }
/* lucide's gift and shopping cart, at the arrow's weight: the stroke scales with the icon rather
   than holding to a hairline */
.gift-icon, .cart-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gift-icon path, .gift-icon rect, .cart-icon path, .cart-icon circle { vector-effect: none; }

/* the switch over the cards: a track with the picked tag raised in it on a thumb that slides across
   to it. the tabs are equal widths, which is what lets the thumb's place be a multiple of its own
   width */
.tabs {
  --n: 1; --i: 0;
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; max-width: 100%;
  margin: 0 auto 24px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.tabs[hidden] { display: none; }
.tabs:has(.tab:nth-of-type(2):last-of-type) { --n: 2; }
.tabs:has(.tab:nth-of-type(3):last-of-type) { --n: 3; }
.tabs:has(.tab:nth-of-type(4):last-of-type) { --n: 4; }
.tabs:has(.tab:nth-of-type(5):last-of-type) { --n: 5; }
.tabs:has(.tab:nth-of-type(6):last-of-type) { --n: 6; }
.tabs:has(.tab:nth-of-type(7):last-of-type) { --n: 7; }
.tabs:has(.tab:nth-of-type(8):last-of-type) { --n: 8; }
.tabs:has(.tab:nth-of-type(2) input:checked) { --i: 1; }
.tabs:has(.tab:nth-of-type(3) input:checked) { --i: 2; }
.tabs:has(.tab:nth-of-type(4) input:checked) { --i: 3; }
.tabs:has(.tab:nth-of-type(5) input:checked) { --i: 4; }
.tabs:has(.tab:nth-of-type(6) input:checked) { --i: 5; }
.tabs:has(.tab:nth-of-type(7) input:checked) { --i: 6; }
.tabs:has(.tab:nth-of-type(8) input:checked) { --i: 7; }
.tab-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  border-radius: var(--r); background: var(--surface-3);
  transform: translateX(calc(var(--i) * 100%)); transition: transform 0.35s var(--ease); pointer-events: none;
}
.tab { position: relative; z-index: 1; min-width: 0; }
.tab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tab span { display: block; overflow: hidden; padding: 7px 18px; border-radius: var(--r); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; transition: color var(--motion); }
.tab:hover span, .tab input:checked + span { color: var(--ink); }
.tab input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 0; }

/* the gift is a dialog, a popover centred over a dimmed page */
.gift-pop {
  width: min(420px, calc(100vw - 32px)); padding: 24px;
  border: 1px solid var(--border-strong); border-radius: 16px;
  background: var(--surface-2); color: var(--text);
}
.gift-pop:popover-open { animation: gift-in 0.18s var(--std); }
.gift-pop::backdrop { background: rgba(0, 0, 0, 0.6); }
@keyframes gift-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.gift-title { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; }
.gift-line { margin: 6px 0 20px; color: var(--muted); font-size: 14px; line-height: 20px; }
.gift-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* the table in a card. on a phone each feature turns into
   its name over the three values, each with its tier above it, since four columns do not fit */
.cmp-wrap { margin-top: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.cmp th, .cmp td { padding: 14px 20px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { padding-top: 16px; padding-bottom: 16px; background: rgba(255, 255, 255, 0.015); color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.cmp thead th.is-main { color: var(--ink); }
.cmp tbody th { width: 34%; color: var(--ink); font-weight: 500; }
.cmp td { width: 22%; color: var(--text); font-variant-numeric: tabular-nums; }
.cmp tbody tr { transition: background-color var(--motion); }
.cmp tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
/* lucide's check and minus. jack, 2026-10-07: a check wherever a tier has the thing, its detail
   beside it when there is one (how many raiders, which tag), the mark held to the first line when
   the words wrap */
.cmp-yes, .cmp-no { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; background: currentColor; }
.cmp-has { display: inline-flex; align-items: flex-start; gap: 8px; }
.cmp-has .cmp-yes, .cmp-has .cmp-no { margin-top: 2px; }
.cmp-yes, .plan-desc.text-content ul li::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cmp-no {
  color: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* favicon E in :echopremium: gold, not site palette. game draw that icon in place of tag text */
.cmp-tag {
  display: inline-block; flex: none; width: 10px; height: 15px; margin-top: 3px; background: #CCB448;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.79 25'%3E%3Cpath d='M0.317383 0.00500032L14.041 2.69836C14.166 2.72291 14.2568 2.83271 14.2568 2.96008V7.3468C14.2566 7.51428 14.1029 7.64058 13.9385 7.60852L3.64844 5.6007C3.48404 5.56863 3.33133 5.69402 3.33105 5.86145V9.80188C3.33117 9.94895 3.45056 10.0685 3.59766 10.0685H16.5215C16.6686 10.0685 16.7881 10.1879 16.7881 10.3351V14.6652C16.7878 14.812 16.6684 14.9317 16.5215 14.9318H3.59766C3.45049 14.9318 3.33105 15.0512 3.33105 15.1984V19.1388C3.33164 19.3059 3.48425 19.4315 3.64844 19.3995L13.9385 17.3917C14.103 17.3596 14.2567 17.4859 14.2568 17.6534V22.0402C14.2566 22.1673 14.1658 22.2774 14.041 22.3019L0.317383 24.9952C0.153116 25.0272 0.000343501 24.9008 0 24.7335V15.3453C0 15.1099 0.19084 14.9191 0.426254 14.9191H1.04933C1.28475 14.9191 1.47559 14.7282 1.47559 14.4928V10.4928C1.47559 10.2574 1.28475 10.0665 1.04933 10.0665H0.426254C0.19084 10.0665 0 9.87568 0 9.64027V0.266719C0 0.0990755 0.152894 -0.027054 0.317383 0.00500032Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.79 25'%3E%3Cpath d='M0.317383 0.00500032L14.041 2.69836C14.166 2.72291 14.2568 2.83271 14.2568 2.96008V7.3468C14.2566 7.51428 14.1029 7.64058 13.9385 7.60852L3.64844 5.6007C3.48404 5.56863 3.33133 5.69402 3.33105 5.86145V9.80188C3.33117 9.94895 3.45056 10.0685 3.59766 10.0685H16.5215C16.6686 10.0685 16.7881 10.1879 16.7881 10.3351V14.6652C16.7878 14.812 16.6684 14.9317 16.5215 14.9318H3.59766C3.45049 14.9318 3.33105 15.0512 3.33105 15.1984V19.1388C3.33164 19.3059 3.48425 19.4315 3.64844 19.3995L13.9385 17.3917C14.103 17.3596 14.2567 17.4859 14.2568 17.6534V22.0402C14.2566 22.1673 14.1658 22.2774 14.041 22.3019L0.317383 24.9952C0.153116 25.0272 0.000343501 24.9008 0 24.7335V15.3453C0 15.1099 0.19084 14.9191 0.426254 14.9191H1.04933C1.28475 14.9191 1.47559 14.7282 1.47559 14.4928V10.4928C1.47559 10.2574 1.28475 10.0665 1.04933 10.0665H0.426254C0.19084 10.0665 0 9.87568 0 9.64027V0.266719C0 0.0990755 0.152894 -0.027054 0.317383 0.00500032Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the questions: the heading and the Discord line beside an accordion, each row ruled off under
   it, a plus that turns to a cross as the answer opens */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 56px; align-items: start; }
.qa a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; transition: text-decoration-color var(--motion); }
.qa a:hover { text-decoration-color: currentColor; }
/* the first question's words level with the heading beside it, not its padding */
.qa .faq { margin-top: -14px; }
.faq { interpolate-size: allow-keywords; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 22px;
  text-underline-offset: 4px;
}
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--faint); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate 0.25s var(--ease), background-color var(--motion);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.2s ease-out, opacity 0.2s ease-out, content-visibility 0.2s allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq details > div { max-width: 64ch; padding: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 23px; }
.qa .faq details > div > p + .chip { margin-top: 12px; }

/* cart: the lines in one card, the total in another that follows the page down */
.basket-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.basket { min-width: 0; padding: 4px 24px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.basket-head { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.basket-count { margin-left: auto; color: var(--muted); font-size: 14px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--border); }
.item-info { min-width: 0; }
.item-title { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.item-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.item-opts { list-style: none; margin: 4px 0 0; padding: 0; color: var(--muted); font-size: 13px; line-height: 20px; }
.item-opts strong { color: var(--ink); font-weight: 500; }
.item-price { margin-top: 6px; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
/* the remove is a button: the browser's own button look comes off */
.item-remove { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted); cursor: pointer; transition: background-color var(--motion), color var(--motion); }
.item-remove:hover { background: var(--danger-soft); color: var(--danger); }
.item-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.summary {
  position: sticky; top: calc(var(--nav-h) + var(--sales-h, 0px) + 24px);
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface);
}
.summary-title { color: var(--muted); font-size: 13px; font-weight: 500; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--muted); font-size: 14px; }
.summary-total .value { color: var(--ink); font-family: var(--display); font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summary .buybox-list { margin-top: 0; }

/* the account, a page a tab (2026-11-03; three tabs from 2026-10-07), under the player and where
   they stand, with the tabs down the side. a plan is a card of its own over what ended, and a
   purchase is a row opening on its receipt */
.acct-me { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: clamp(40px, 6vw, 72px) 0 28px; }
.acct-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); }
.acct-who { display: grid; justify-items: start; gap: 8px; flex: 1 1 240px; min-width: 0; }
.acct-name { max-width: 100%; font-family: var(--display); font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
/* the border is the gap between the cells, so a row that wraps keeps its lines */
.acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 0 0 48px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--border); }
.acct-facts > div { padding: 16px 20px; background: var(--surface); }
.acct-facts dt { color: var(--faint); font-size: 12px; line-height: 16px; }
.acct-facts dd { margin: 6px 0 0; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 22px; }
.acct-facts dd span { display: block; overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.acct-grid { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 48px; align-items: start; }
.acct-nav { position: sticky; top: calc(var(--nav-h) + var(--sales-h, 0px) + 24px); display: grid; gap: 2px; }
.acct-nav a { padding: 6px 10px; border-radius: var(--r); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: background-color var(--motion), color var(--motion); }
.acct-nav a:hover { color: var(--ink); }
.acct-nav a[aria-current] { background: var(--surface-3); color: var(--ink); }
.acct-part-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.acct-part-title { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.acct-part-head a { color: var(--muted); font-size: 14px; transition: color var(--motion); }
.acct-part-head a:hover { color: var(--ink); }
.acct-none { padding: 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-card); color: var(--muted); font-size: 14px; line-height: 20px; }
.acct-none a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.acct-base { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); transition: background-color var(--motion); }
.acct-base:hover { background: var(--surface-2); }
.acct-base-shot { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-2); color: var(--faint); font-size: 13px; }
.acct-base-shot img { width: 100%; height: 100%; object-fit: cover; }
.acct-base-body { display: grid; gap: 2px; padding: 12px 14px 14px; }
.acct-base-body b { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
.acct-base-body span { color: var(--muted); font-size: 13px; line-height: 18px; }
.order-invoice { margin-left: auto; }
/* a tab while it loads: grey blocks pulsing, as the base browser's grid does (bases.css) */
.acct .skel { display: block; max-width: 100%; height: 14px; border-radius: 4px; background: var(--surface-3); animation: acct-pulse 1.6s ease-in-out infinite; }
.acct .acct-base-shot.skel { height: auto; border-radius: 0; }
@keyframes acct-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .acct .skel { animation: none; } }
[data-acct-body][aria-busy="true"] { pointer-events: none; }
.acct-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background-color var(--motion); }
.acct-row:last-child { border-bottom: 0; }
.acct-row:hover { background: rgba(255, 255, 255, 0.015); }
.acct-main { flex: 1 1 260px; display: grid; gap: 3px; min-width: 0; }
.acct-main b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 22px; }
.acct-main > span { color: var(--muted); font-size: 13px; line-height: 18px; }
.acct-row form { margin: 0; }
/* a part of a tab, over its card: Past plans */
.acct-sec { margin: 36px 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 18px; }
.acct-list.is-ended .acct-main b { color: var(--text); font-weight: 400; }

/* badges that say something: green for running, yellow for ending, red for money gone wrong */
.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-warn { background: rgba(240, 177, 0, 0.12); color: var(--warn); }
.badge-bad { background: var(--danger-soft); color: var(--danger-text); }

/* an order or subscription number: the mono, copied on a click, with the copy icon after it */
.copy-id {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--wash); color: var(--text);
  font-family: var(--mono); font-size: 12px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion), color var(--motion);
}
.copy-id:hover { background: var(--wash-hover); color: var(--ink); }
.copy-id::after {
  content: ""; width: 12px; height: 12px; flex: none; background: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1.5'/%3E%3Cpath d='M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1.5'/%3E%3Cpath d='M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* the purchases, newest first, each opening on its receipt */
.order { border-bottom: 1px solid var(--border); }
.order:last-child { border-bottom: 0; }
.order-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 72px 16px; align-items: center; gap: 4px 16px;
  min-height: 60px; padding: 12px 20px; list-style: none; cursor: pointer;
  transition: background-color var(--motion);
}
.order-row::-webkit-details-marker { display: none; }
.order-row:hover { background: rgba(255, 255, 255, 0.015); }
.order-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--r-card); }
.order-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.order-name { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 22px; }
.order-more { color: var(--muted); font-weight: 400; }
.order-when { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-total { color: var(--ink); font-size: 14px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-chev { width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--motion); }
.order[open] .order-chev { rotate: 90deg; }
.order[open] .order-row { background: rgba(255, 255, 255, 0.015); }
.order-body { padding: 4px 20px 18px; background: rgba(255, 255, 255, 0.015); }
.order-lines { margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--border); }
.order-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--text); font-size: 14px; line-height: 20px; }
.order-lines li > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-gift { display: block; color: var(--muted); font-size: 13px; }
.order-sums { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--border); }
.order-sums div { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.order-sums dd { margin: 0; font-variant-numeric: tabular-nums; }
.order-sums .is-total { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.order-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* a plan: its name and how it stands, how it is paid and what happens next, and what can be done
   about it along the bottom */
.sub-card + .sub-card { margin-top: 16px; }
.sub-card { padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.sub-card.is-bad { border-color: rgba(255, 100, 103, 0.35); }
.sub-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sub-name { color: var(--ink); font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.01em; }
.sub-price { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 22px; }
.sub-price b { color: var(--ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sub-cancel { margin: 0 0 0 auto; }

/* the time left on a plan that runs out */
.item-bar { display: block; width: 100%; max-width: 280px; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: var(--surface-3); visibility: hidden; }
.item-bar.on { visibility: visible; }
.item-bar i { display: block; width: var(--left, 0%); height: 100%; border-radius: inherit; background: var(--success); }
.item-bar.is-low i { background: var(--warn); }

/* payment complete: a green tick on a soft disc over the card's words */
.done-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--success-soft); }
.done-mark::before {
  content: ""; width: 20px; height: 20px; background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.done .buybox-list { margin-top: 24px; }
/* the same card as a pop-up when a payment in paynow's popup goes through, centred over a dimmed
   page as the gift is */
.done-pop { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: none; color: var(--text); }
.done-pop[open] { animation: gift-in 0.18s var(--std); }
.done-pop::backdrop { background: rgba(0, 0, 0, 0.6); }

@media (max-width: 900px) {
  .basket-page { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  /* the account's tabs go across the top */
  .acct-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .acct-nav { position: static; display: flex; gap: 4px; margin-inline: -24px; padding: 0 24px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
  .acct-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  .plan { flex-basis: 100%; }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .qa .faq { margin-top: 0; }
}

@media (max-width: 640px) {
  .home-title { font-size: 32px; }
  .lander-title { font-size: 26px; }
  .sec-h2 { font-size: 26px; }
  .sec-title { font-size: 24px; }
  /* the name over what it does, since the two do not fit side by side */
  .free li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 14px 0; }
  .tabs { width: 100%; }
  .tab span { padding: 7px 8px; }
  .plan { padding: 22px; }
  .plan-trial { margin: -22px -22px 18px; }
  .price-amount { font-size: 40px; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp th, .cmp td { width: auto; padding: 0; border: 0; }
  .cmp tbody th { grid-column: 1 / -1; }
  .cmp td::before { content: attr(data-tier); display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; line-height: 16px; }
  .basket { padding: 4px 16px; }
  .acct-row { padding: 14px 16px; }
  .acct-name { font-size: 28px; }
  .acct-avatar { width: 56px; height: 56px; }
  .acct-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-facts > div { padding: 14px 16px; }
  .acct-nav { margin-inline: -16px; padding-inline: 16px; }
  .order-row { grid-template-columns: minmax(0, 1fr) auto 16px; padding: 12px 16px; }
  .order-what { grid-column: 1; }
  .order-when { grid-row: 2; grid-column: 1; }
  .order-total { grid-row: 1 / span 2; grid-column: 2; }
  .order-chev { grid-row: 1 / span 2; grid-column: 3; }
  .order-body { padding: 4px 16px 16px; }
  .sub-card { padding: 18px 16px; }
  .sub-cancel { margin-left: 0; }
  /* a quiet link that wraps under its row lines up with the words over it */
  .acct-row > .btn-quiet { margin-left: -8px; }
}