/* 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 X over paynow's checkout. its 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 X sits just off the frame's top right corner,
   pulled back onto the screen when there is no room beside it */
.checkout-close {
  position: fixed; z-index: 1000000;
  top: max(12px, calc(50% - 380px)); left: min(calc(50% + 412px), calc(100% - 52px));
  display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, background-color var(--motion);
}
.checkout-close.on { opacity: 1; pointer-events: auto; }
.checkout-close:hover { background: var(--surface-3); }
.checkout-close svg { width: 16px; height: 16px; 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; isolation: isolate; 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, and 120px under,
   into the gap before the next section. the squares thin out over the last stretch into that
   section rather than stopping on a line (jack, 2026-10-07) */
.lander-fx {
  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); margin-left: -50vw; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(180px, 24vw, 280px)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(180px, 24vw, 280px)), transparent);
}
/* the same grid behind the plans (jack, 2026-10-07): edge to edge, from 96px over the section to
   96px under it, faded in and out by main.js, the cards over it */
.has-squares { position: relative; isolation: isolate; }
.squares-plans { position: absolute; z-index: -1; top: -96px; left: 50%; display: block; width: 100vw; height: calc(100% + 192px); 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); } }
.plan-name { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; }
/* 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: 8px; }
.plan-desc.text-content li { margin-bottom: 2px; }
.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-gift, .buy > .buy-cart { grid-column: span 1; padding: 0; }
/* a gift with no Subscribe beside it keeps to the last quarter, over the cart */
.buy > .buy-gift.is-alone { grid-column: -2 / -1; }
/* 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 {
  -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;
}

/* 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 (jack, 2026-10-07): a switch of its three views like the plans' tags, over cards of
   rows. orders sit under their months and open on their detail, subscriptions are cards of their
   own, and what is active sits over what ended */
.acct-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin-bottom: 24px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a { flex: none; padding: 6px 14px; border-radius: var(--r); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; white-space: nowrap; transition: background-color var(--motion), color var(--motion); }
.acct-tabs a:hover { color: var(--ink); }
.acct-tabs a.on { background: var(--surface-3); color: var(--ink); }
.acct-tabs a:focus-visible { outline-offset: -2px; }
.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 view, over its card: Active now, Ended */
.acct-sec { margin: 36px 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 18px; }
.acct-sec.is-first { margin-top: 0; }
.acct-list.is-ended .acct-main b { color: var(--text); font-weight: 400; }
.acct-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--muted); font-size: 14px; }
.acct-back:hover { color: var(--ink); }
.acct-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* 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;
}

/* finding an order: a search box and a row of filter pills, radios underneath */
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 28px; }
.find-box { position: relative; flex: 1 1 280px; max-width: 420px; }
.find-box svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; translate: 0 -50%; fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.find-box input { padding-left: 36px; }
.find-box input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-opt span { display: block; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--muted); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; transition: background-color var(--motion), color var(--motion), border-color var(--motion); }
.chip-opt:hover span { color: var(--ink); }
.chip-opt input:checked + span { border-color: var(--border-strong); background: var(--surface-3); color: var(--ink); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
.find-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -12px 0 24px; color: var(--muted); font-size: 14px; }
.find-note[hidden] { display: none; }
.find-note b { color: var(--ink); font-weight: 500; }
.find-none { padding: 48px 24px; border: 1px dashed var(--border-strong); border-radius: var(--r-card); text-align: center; }
.find-none p { margin-bottom: 16px; color: var(--muted); }

/* the months, newest first, each a card of its orders */
.month + .month { margin-top: 28px; }
.month-title { margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.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; }
.order-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.order-link:hover { color: var(--ink); text-decoration-color: currentColor; }
/* the order a link from the active tab lands on */
.order.is-lit > .order-row { animation: plan-lit 1.6s var(--std); }

/* a subscription: its name and how it stands, its price, the dates that matter, and what can be
   done with it along the bottom */
.subs > .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-alert, .sub-note { margin-top: 14px; padding: 10px 12px; border-radius: var(--r); font-size: 13px; line-height: 19px; }
.sub-alert { background: var(--danger-soft); color: var(--danger-text); }
.sub-note { background: var(--wash); color: var(--muted); }
.sub-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin: 18px 0 0; }
.sub-facts dt { color: var(--faint); font-size: 12px; line-height: 16px; }
.sub-facts dd { margin: 4px 0 0; color: var(--ink); font-size: 14px; line-height: 20px; }
.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; }
.subs > .basket-empty + .acct-sec, .subs > .sub-card + .acct-sec { margin-top: 40px; }

/* an item: on now with how long it has, the time left drawn under one that runs out, or ended */
.item-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.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); }
.items-none { padding: 20px; color: var(--muted); font-size: 14px; }
.items-none a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 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 .card-lead { margin-top: 10px; }
.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; }
}

@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; }
  .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-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .acct-tabs a { padding: 7px 8px; }
  .find-box { flex-basis: 100%; max-width: none; }
  .chips { flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .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, .item-act > .btn-quiet:first-child { margin-left: -8px; }
}