/* Utility: one stylesheet for every page.
   Starts from the samcedar.com language: off-white page, hairline rules, full-width 4.375rem bars,
   Neue Haas for content, Doto for labels and readouts. Layout runs on a 12-column grid with 1.875rem
   page margins (1.125rem on phones) and an 0.5rem spacing scale. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F7F7F5;
  --ink: #111110;
  --mid: #72716C;
  --rule: #CCCAC4;
  --fill: #FFFFFF;          /* raised surfaces: picked license, inputs */
  --tint: #EEEDE9;          /* quiet panels */
  --blue: #235AA0;          /* the bundle disks' blue */
  --red: #C8402A;
  --face: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif;
  --head: 'Xanh Mono', 'Courier New', monospace;   /* headings and product names */
  --body: 'IBM Plex Mono', 'Courier New', monospace;   /* reading text, buttons and links */
  --doto: 'Doto', 'neue-haas-grotesk-display', monospace;
  --m: 1.875rem;                /* page margin */
  --g: 1.5rem;                /* column gutter */
  --bar: 4.375rem;
}
:root[data-theme="dark"] {
  --bg: #121211; --ink: #ECEBE6; --mid: #8E8D88; --rule: #2E2D2A;
  --fill: #1C1C1A; --tint: #191917; --red: #EE7A62;
  color-scheme: dark;
}
@media (max-width: 600px) { :root { --m: 1.125rem; --g: 1rem; } }

/* headings in Xanh Mono. Sam prefers the look where later rules give some headings more weight (hero 500, card
   names 600) and smaller sizes: Xanh Mono has one weight, so the browser thickens those itself. Keep this block
   ahead of those rules. */
.hero h1, .page-intro h1, .pdp-buy h1, .multibuy h2, .sampler-copy h2, .footer .f-news h3, .prose h1, .prose h2,
.su-copy h2, .card-name, .tile-name, .upsell .u-name, .bs-name, .cart-name, .faq summary, .lic-grid h3 {
  font-family: var(--head); font-weight: 400; letter-spacing: -.005em;
}
.card-name, .tile-name { font-size: 1rem; }
.pdp-buy h1 { font-size: 2.125rem; }



html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
/* Everything is sized in rem, so on big monitors the whole layout grows with the window instead of leaving 11px
   text on a 2500px page. 16px (the size it was designed at, on a 1440 x 900 screen) up to 1500px wide, then in
   proportion to whichever of width or height is tighter, so a wide monitor scales like the layout it was designed
   at; never below 16px, never above 30px. */
@media (min-width: 1500px) { html { font-size: max(16px, min(calc(100vw / 93.75), calc(100vh / 56.25), 30px)); } }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
html.ut-fade, html.ut-fade *, html.ut-fade *::before, html.ut-fade *::after {
  transition: background-color 1.5s ease, color 1.5s ease, border-color 1.5s ease, fill 1.5s ease, stroke 1.5s ease !important;
}

/* ── Type roles ──
   label: Doto 0.8125rem caps grey (bars, kickers, the name, the clock)
   meta:  Doto 0.6875rem caps grey (small data inside components)
   link:  Neue Haas 0.6875rem caps wide (anything you click in a bar) */
.label, .bar, .clock, .brand, .kicker, .num {
  font-family: var(--doto); font-weight: 900; font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mid);
}
.meta { font-family: var(--doto); font-weight: 900; font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.link, .nav a, .nav button { font-family: var(--body); font-weight: 400; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; }
.price { font-family: var(--doto); font-weight: 900; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.price s, s.was { color: var(--mid); font-weight: 900; text-decoration: line-through; margin-right: 0.25rem; }

/* ── Layout ── */
.wrap { padding-left: var(--m); padding-right: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.bar {
  min-height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--m); border-bottom: 1px solid var(--rule);
}
.bar a.more { font-family: var(--body); font-weight: 400; font-size: 0.6875rem; letter-spacing: .14em; color: var(--mid); }
.bar a.more:hover { color: var(--ink); }
.rule-top { border-top: 1px solid var(--rule); }

/* ── Header ── */
.top-bar {
  position: sticky; top: 0; z-index: 800; background: var(--bg);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--bar); padding: 0 var(--m); border-bottom: 1px solid var(--rule);
}
.top-left { display: flex; align-items: center; gap: 1.125rem; }
.brand { color: var(--ink); display: inline-flex; align-items: center; }
/* the wordmark and sunflower mark (brand/utility-lockup.svg, Sam's file slimmed to two paths), drawn as a mask so it
   takes the text color and flips with dark mode; one cached file instead of ~300 dots inline on every page */
.brand-lockup { display: block; aspect-ratio: 1624.96 / 630.8; background: currentColor;
  -webkit-mask: url(/brand/utility-lockup.svg) center / contain no-repeat; mask: url(/brand/utility-lockup.svg) center / contain no-repeat; }
/* earlier wordmarks stay in brand/: utility-wordmark.svg (">UTILITY"), utility-wordmark-b.svg (without the prompt,
   2026-10-10) and utility-wordmark-ruderal-10.svg */
/* the wordmark: Sam's final Ruderal caps (Downloads/UTILITY WORDMARK FINAL.svg, 2026-10-13; it replaced Asset 10,
   brand/utility-wordmark-ruderal-10.svg, the same day) */
.brand-wordmark { display: block; aspect-ratio: 1292.67 / 294.6; background: currentColor;
  -webkit-mask: url(/brand/utility-wordmark-final.svg) center / contain no-repeat; mask: url(/brand/utility-wordmark-final.svg) center / contain no-repeat; }
.brand-mark { display: block; aspect-ratio: 626 / 630.8; background: currentColor;
  -webkit-mask: url(/brand/utility-mark.svg) center / contain no-repeat; mask: url(/brand/utility-mark.svg) center / contain no-repeat; }
.top-left .brand-wordmark { height: 0.9375rem; }
/* the wordmark alone, in the footer's top-right corner beside Shop and Info */
.f-brand { grid-column: 11 / span 2; grid-row: 1; justify-self: end; align-self: start; color: var(--ink); }
.f-brand .brand-wordmark { height: 1.25rem; }
.clock { font-family: 'Doto Digits', 'Silkscreen', var(--body); font-synthesis: none; text-align: center; user-select: none; }
.nav { display: flex; justify-content: flex-end; align-items: center; gap: 1.75rem; list-style: none; }
/* each item centered in its own row, so the cart button (icon first) sits level with the text links */
.nav > li { display: flex; align-items: center; }
.nav a, .nav button { color: var(--mid); position: relative; padding-bottom: 0.125rem; background: none; border: 0; cursor: pointer; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ink); transition: width .22s ease; }
.nav a:hover, .nav a.active, .nav button:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.cart-btn { display: inline-flex; align-items: center; gap: 0.375rem; }
.cart-btn svg { width: 0.9375rem; height: 0.9375rem; margin-top: -0.125rem; }
.cart-count { font-family: var(--doto); font-weight: 900; letter-spacing: .03em; }
.cart-count:empty { display: none; }
.menu-btn { display: none; }

.theme-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--mid); display: inline-flex; position: relative; top: -1px; }
.theme-toggle svg { width: 2.25rem; height: 1.125rem; display: block; overflow: visible; }
.theme-toggle .track { fill: none; stroke: currentColor; stroke-width: .75; }
.theme-toggle .knob { fill: currentColor; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
:root[data-theme="dark"] .theme-toggle .knob { transform: translateX(18px); }   /* SVG user units (the 36 x 18 viewBox), so px on purpose: it must not scale with rem */
.theme-toggle .icon { fill: none; stroke: currentColor; stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme="dark"]) .theme-toggle .sun, :root[data-theme="dark"] .theme-toggle .moon { stroke: var(--bg); }

/* announcement bar: a running line under the header, set in data/shop.json */
.ticker { height: 2.5rem; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--ink); color: var(--bg); }
.ticker[hidden] { display: none; }
.tk-track { display: flex; flex: none; animation: tk 40s linear infinite; }
.tk-item { flex: none; white-space: nowrap; font-family: var(--doto); font-weight: 900; font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; }
.tk-item::after { content: ''; width: 0.25rem; height: 0.25rem; margin: 0 2rem; border-radius: 50%; background: currentColor; opacity: .5; }
@keyframes tk { to { transform: translateX(-50%); } }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  height: 2.875rem; padding: 0 1.625rem; border-radius: 62.4375rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg); cursor: pointer;
  font-family: var(--body); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .2s, background .2s, color .2s;
}
.btn:hover { opacity: .86; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); opacity: 1; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.btn .price { font-size: 0.8125rem; }

/* ── Floppy disks: tilt follows the pointer, lift on hover, a slow bob forever ── */
.disk-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; perspective: 56.25rem; }
.disk-tilt { width: 70%; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.disk-lift { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.disk { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
.disk img { width: 100%; height: auto; }
.disk-shadow {
  position: absolute; left: 27%; bottom: 5%; width: 46%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17,17,16,.26), rgba(17,17,16,0));
  animation: shadow 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); transition: opacity .6s;
}
:root[data-theme="dark"] .disk-shadow { background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); }
@keyframes bob { 0%, 100% { transform: translateY(-2.5%) rotate(-1.2deg); } 50% { transform: translateY(2.5%) rotate(.8deg); } }
@keyframes shadow { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1); } }
.card:hover .disk-lift, .tile:hover .disk-lift { transform: translateY(-3.5%) scale(1.04); }
.card:hover .disk-shadow, .tile:hover .disk-shadow { opacity: .55; }
.disk-stage video { width: 90%; height: auto; mix-blend-mode: multiply; }
.disk-stage video[data-dark] { mix-blend-mode: normal; }   /* the transparent version: nothing to blend away */
:root[data-theme="dark"] .disk-stage video { mix-blend-mode: normal; background: #F7F7F5; border-radius: 1.125rem; }
:root[data-theme="dark"] .disk-stage video[data-dark] { background: none; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .disk, .disk-shadow, .tk-track { animation: none; } .disk-tilt, .disk-lift { transition: none; } }

/* ── Grids of cells (product cards, category tiles) ──
   Every cell draws its own right and bottom rule as a shadow just outside its box, so each line sits exactly on
   the boundary between two cells, the same pixel the borders of the bars and bands use. Lines meet cleanly at
   every corner, whatever the column widths round to. The grid clips the rightmost column's line at the page edge.
   The column count comes from the build (--c, --c-md, --c-sm, --c-xs), picked so the rows come out full. */
.cards, .tiles { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); overflow: clip; padding-bottom: 1px; }
.card, .tile { box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule), 1px 1px 0 var(--rule); }
.card { display: flex; flex-direction: column; position: relative; }
/* one product on its own: disk on the left, details on the right, instead of one giant card */
.cards.solo .card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.cards.solo .card > a { box-shadow: 1px 0 0 var(--rule); align-self: stretch; display: grid; place-items: center; }   /* on the boundary, like every other column line */
.cards.solo .disk-stage { width: min(100%, 35rem); }
.cards.solo .card-meta { align-self: center; padding: 2rem var(--m); }
.cards.solo .card-name { font-size: 1.375rem; }
.cards.solo .card-sub { font-size: 0.875rem; }
.cards.solo .card-meta { grid-template-columns: 1fr; gap: 0.5rem; }
.cards.solo .card-price, .cards.solo .card-save { grid-column: 1; text-align: left; }
.cards.solo .card-sub { grid-row: 2; } .cards.solo .card-price { grid-row: 3; } .cards.solo .card-save { grid-row: 4; } .cards.solo .card-add { grid-row: 5; }
.cards.solo .card-price { font-size: 1.125rem; margin-top: 0.5rem; }
.card .disk-stage { width: 100%; }
.card-meta { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: start; padding: 0.75rem var(--m) 1.125rem; }
.card-name { font-size: 0.875rem; font-weight: 600; letter-spacing: .01em; }
.card-sub { grid-column: 1; font-size: 0.75rem; color: var(--mid); line-height: 1.45; }
.card-price { grid-column: 2; grid-row: 1; font-size: 0.8125rem; text-align: right; white-space: nowrap; }
.card-save { grid-column: 2; grid-row: 2; text-align: right; color: var(--red); white-space: nowrap; }
.card-add {
  grid-column: 1 / -1; margin-top: 0.625rem; justify-self: start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--doto); font-weight: 900; font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mid);
}
.card-add:hover { color: var(--ink); }
.card-add[hidden] { display: none; }
.badge {
  display: inline-block; margin-left: 0.5rem; vertical-align: 0.125rem; padding: 0.125rem 0.4375rem 0.125rem 0.5rem; border-radius: 62.4375rem;
  font-family: var(--doto); font-weight: 900; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--blue);
}
.badge.free { background: #D2C09C; color: #3B3020; }
.badge.everything { background: #fff; color: #111110; box-shadow: inset 0 0 0 1px #CCCAC4; }
.badge.soon { background: transparent; color: var(--mid); box-shadow: inset 0 0 0 1px var(--rule); }

/* ── Home: hero ──
   Text centred at the top; the dandelion scene runs full width along the bottom. The scene's top fades into
   the page, and its bottom edge (the front of the concrete) is the line where the next section starts. */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100svh - var(--bar)); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  max-width: 76rem; margin: 0 auto; padding-top: clamp(2rem, 3.2vw, 3rem); padding-bottom: 1rem; }
.hero h1 { font-size: 3.625rem; line-height: 1.04; font-weight: 500; letter-spacing: -.02em; max-width: 21em; }
.hero p.lede { font-size: 1.0625rem; line-height: 1.55; color: var(--mid); max-width: 41.25rem; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.hero-scene { position: relative; z-index: 1; flex: 1 0 auto; container-type: inline-size;
  /* The scene starts below the text and the plant never reaches into it. The video is 5:1 (3200x640; its middle 3:1
     is the original 1920x640 framing), so short wide screens get concrete edge to edge with the whole plant in view.
     Measured over the loop (utility-dandelion frames/v3-wide) the plant reaches 8.6% from the top of the frame (the
     open seed head, frame 227; loose seeds that blow off are left out) and its base sits at 78%. The frame is drawn at
     cover size hanging from the bottom of the scene, unless that would push the head above the top fade; then it hangs
     from the head and the near concrete crops off the bottom. The min-height keeps the base plus some concrete in
     view: (0.84 - 0.086) / 5 = 15.1% of the width. Heights are % of the scene (cqh reads 0 in Chrome when the scene's
     height comes from flex). */
  min-height: calc(15.1vw + 1.5rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1rem); mask-image: linear-gradient(to bottom, transparent 0, #000 1rem); }
.hero-scene img, .hero-scene video { position: absolute; left: 50%; transform: translateX(-50%);
  height: max(100cqw / 5, 100%); width: auto; max-width: none; aspect-ratio: 5 / 1; object-fit: cover;
  top: max(100% - max(100cqw / 5, 100%), 1.5rem - .086 * max(100cqw / 5, 100%)); }
@media (max-width: 700px) { .hero { min-height: 0; } .hero-scene { min-height: 0; aspect-ratio: 5 / 4; } }
/* Headings are fixed in rem like the text under them, so heading and body keep the same ratio at every width (the
   root size scales both together above 1500px). Phones take one step down: the desktop sizes can't fit 375px. */
@media (max-width: 700px) { .hero h1 { font-size: 2.25rem; } .page-intro h1 { font-size: 2rem; } }

/* ── Home: the featured banner (UltraTone) ──
   UltraTone's hero from its own page, full width: the haze panel with the logo, ULTRATONE drawn in Doto characters
   (ut.js fills pre[data-ascii]) passing behind the floating unit, then the description and the ways in. */
/* the panel is concrete grey, sampled from the dandelion render (#9C9688), pale at the top and shading down to it;
   in dark mode a black a few steps above the page, so it still reads as a panel */
:root { --fh-haze: linear-gradient(180deg, #D2CEC6 0%, #D6D2CA 42%, #C9C5BC 70%, #A9A497 100%); --fh-ascii: #FFFFFF; }
:root[data-theme="dark"] { --fh-haze: linear-gradient(180deg, #1D1D1B 0%, #20201E 45%, #1C1C1A 72%, #171716 100%); --fh-ascii: #A6A39B; }
.fh { padding: var(--m) var(--m) 3rem; border-bottom: 1px solid var(--rule); }
.fh-panel { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 2.1; border-radius: 0.875rem; background: var(--fh-haze); }
.fh-lockup { position: absolute; left: 3%; top: 6%; z-index: 4; display: flex; align-items: flex-end; gap: 1rem; color: var(--ink); }
.fh-lockup .ut-logo { width: clamp(8.75rem, 17vw, 17.5rem); height: auto; aspect-ratio: 8744.08 / 1083.86; fill: currentColor; display: block; }
.fh-lockup span { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; padding-bottom: .4em; opacity: .7; }
.fh-ascii { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0; text-align: center; white-space: pre;
  font: 900 calc(min(100vw, 100rem) * .0074)/1 var(--doto); color: var(--fh-ascii); opacity: .8; pointer-events: none; }
:root[data-theme="dark"] .fh-ascii { opacity: .3; }
/* the unit's silhouette in the panel's own haze, so the characters pass behind the clear casing */
.fh-block { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 79%; aspect-ratio: 1; background: var(--fh-haze);
  background-size: 100% calc(100% / .79); background-position: 50% 50%;
  -webkit-mask: url(/products/ultratone/assets/img/hero-mask.png) center / contain no-repeat; mask: url(/products/ultratone/assets/img/hero-mask.png) center / contain no-repeat; }
.fh-panel video { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 79%; width: auto; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.fh-panel video[data-dark] { mix-blend-mode: normal; }
.fh-panel:hover video { transform: translate(-50%, -52%) scale(1.03); }
.fh-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 1.25rem; padding-top: 1.75rem; }
.fh-lede { grid-column: 1 / span 7; color: var(--mid); line-height: 1.6; max-width: 40rem; }   /* section text, as in the Sampler and mix-and-match bands */
.fh-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.fh-notify { flex: 1 1 21.25rem; max-width: 28.75rem; margin-left: auto; }
.fh-copy .form-note { grid-column: 1 / -1; justify-self: end; margin-top: -0.625rem; }
.fh-meta { display: flex; gap: 1rem; font-family: var(--doto); font-weight: 900; font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.fh-meta span + span::before { content: '/'; margin-right: 1rem; color: var(--rule); }
@media (max-width: 860px) {
  .fh-lede { grid-column: 1 / -1; }
  .fh-notify { margin-left: 0; max-width: none; }
  .fh-copy .form-note { justify-self: start; }
}
@media (max-width: 700px) {
  .fh-panel { aspect-ratio: 4 / 5; }
  .fh-panel video { height: 70%; }
  .fh-block { height: 70%; background-size: 100% calc(100% / .7); }
  .fh-lockup { left: 1rem; top: 1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── Home: numbered categories ── */
.tile { display: flex; flex-direction: column; padding: 1rem 0 1.125rem; position: relative; }
.tile .num { padding: 0 1.125rem; }
.tile .disk-stage { width: 100%; }
.tile .disk-tilt { width: 64%; }
.tile-name { padding: 0 1.125rem; font-size: 0.875rem; font-weight: 600; }
.tile-count { padding: 0.125rem 1.125rem 0; }

/* ── Bundles, multibuy, sampler, FAQ, reviews ── */
.multibuy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 2.5rem var(--m); border-bottom: 1px solid var(--rule); align-items: center; }
.multibuy h2 { grid-column: 1 / span 5; font-size: 1.625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.multibuy p { grid-column: 1 / span 5; color: var(--mid); margin-top: 0.625rem; font-size: 0.875rem; }
.multibuy .steps { grid-column: 7 / span 6; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 0.625rem; overflow: hidden; }
.multibuy .step { padding: 1.25rem 1.125rem; display: flex; flex-direction: column; gap: 0.375rem; }
.multibuy .step + .step { border-left: 1px solid var(--rule); }
.multibuy .step b { font-family: var(--doto); font-weight: 900; font-size: 1.875rem; letter-spacing: .02em; }

.sampler-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; padding: 3rem var(--m); border-bottom: 1px solid var(--rule); background: var(--tint); }
.sampler-band .disk-stage { grid-column: 1 / span 5; width: 100%; max-width: 34rem; justify-self: center; }
.sampler-band .disk-tilt { width: 84%; }   /* the disk fills more of its stage here than in the grids */
.sampler-copy { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 1rem; }
.sampler-copy h2 { font-size: 2rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.1; }
.sampler-copy p { color: var(--mid); max-width: 32.5rem; }

.email-form { display: flex; gap: 0.5rem; max-width: 30rem; }
.email-form input[type=email] {
  flex: 1 1 auto; min-width: 0; height: 2.875rem; min-height: 2.875rem; padding: 0 1.125rem; border-radius: 62.4375rem; border: 1px solid var(--rule);
  background: var(--fill); color: var(--ink); font: inherit; font-size: 0.875rem; outline: none;
}
.email-form input[type=email]:focus { border-color: var(--ink); }
.form-note { font-size: 0.75rem; color: var(--mid); min-height: 1.2em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.faq { border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.25rem var(--m); font-size: 0.9375rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--doto); font-weight: 900; color: var(--mid); }
.faq details[open] summary::after { content: '−'; }
.faq .a { padding: 0 var(--m) 1.375rem; color: var(--mid); max-width: 47.5rem; font-size: 0.875rem; line-height: 1.65; }
.faq .a a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.125rem; }

.reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 1px solid var(--rule); }
.reviews::-webkit-scrollbar { display: none; }
/* the looping row (ut.js) puts a copied review before the first; its divider would show at the left edge */
.reviews { margin-left: -1px; }
.review { flex: 0 0 calc(100% / 3); min-width: 0; scroll-snap-align: start; padding: 1.75rem var(--m) 2rem; display: flex; flex-direction: column; gap: 1.125rem; }
/* the arrows in the Reviews bar, shown only when there are more reviews than fit */
.rv-arrows { display: flex; gap: 0.5rem; }
.rv-arrows[hidden] { display: none; }
.rv-arrows button { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color .15s, opacity .15s; }
.rv-arrows button:hover { border-color: var(--ink); }
.rv-arrows button:disabled { opacity: .3; cursor: default; border-color: var(--rule); }
.rv-arrows svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .review { flex-basis: 50%; } }
.review + .review { border-left: 1px solid var(--rule); }
.review q { quotes: none; font-size: 0.8125rem; line-height: 1.65; }
.review .who { margin-top: auto; display: flex; justify-content: space-between; gap: 0.75rem; }
.review .who a:hover { color: var(--ink); }
/* a review's image beside the quote, uncropped, and the image at full size when it's opened (ut.js) */
.rv-body { display: flex; gap: 1.125rem; align-items: flex-start; }
.rv-body q { flex: 1; min-width: 0; }
.rv-thumb { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.rv-thumb img { display: block; width: auto; height: auto; max-width: 6.875rem; max-height: 6.875rem; border: 1px solid var(--rule); transition: opacity .2s; }
.rv-thumb:hover img { opacity: .85; }
.rv-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* opened: the whole image fitted to the screen; a click shows it pixel for pixel, scrolled to where you clicked */
.rv-full { position: fixed; inset: 0; z-index: 1100; background: rgba(17,17,16,.94); overflow: auto; opacity: 0; transition: opacity .25s; overscroll-behavior: contain; }
.rv-full.on { opacity: 1; }
.rv-full .fit { min-height: 100%; display: grid; place-items: center; padding: 3.5rem 1.5rem 1.5rem; box-sizing: border-box; }
.rv-full img { display: block; max-width: 100%; max-height: calc(100vh - 5rem); cursor: zoom-in; }
.rv-full.big .fit { display: block; padding: 0; }
.rv-full.big img { max-width: none; max-height: none; cursor: zoom-out; }
.rv-x { position: fixed; top: 0.875rem; right: 0.875rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(17,17,16,.6); color: #fff; font-size: 0.9375rem; cursor: pointer; z-index: 1; }
@media (max-width: 600px) { .rv-thumb img { max-width: 5rem; max-height: 5rem; } .rv-body { gap: 0.875rem; } }

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.trust div { padding: 1.375rem var(--m); display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.trust div + div { border-left: 1px solid var(--rule); }
.trust span { color: var(--mid); font-size: 0.75rem; line-height: 1.5; }

/* ── Collection pages ── */
.page-intro { padding: 2.5rem var(--m) 2.25rem; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 0.75rem; }
.page-intro h1 { grid-column: 1 / span 7; font-size: 2.875rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
.page-intro p { grid-column: 1 / span 6; color: var(--mid); font-size: 0.9375rem; }
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1rem var(--m); border-bottom: 1px solid var(--rule); }
.filters a { font-family: var(--body); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; padding: 0.5rem 0.875rem; border: 1px solid var(--rule); border-radius: 62.4375rem; color: var(--mid); }
.filters a:hover { color: var(--ink); border-color: var(--ink); }
.filters a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filters .sep { width: 1px; align-self: stretch; margin: 0.25rem 0.25rem; background: var(--rule); }   /* between the families and the asset categories */

/* ── Product page ── */
.crumbs a:hover { color: var(--ink); }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 28.75rem; border-bottom: 1px solid var(--rule); }
.pdp-media { box-shadow: 1px 0 0 var(--rule); min-width: 0; }   /* the column line sits on the boundary */
.pdp-hero { display: grid; place-items: center; border-bottom: 1px solid var(--rule); }
.pdp-hero .disk-stage { width: min(100%, 45rem); }
.pdp-gallery { display: flex; flex-direction: column; }   /* one image under another, full width, to scroll through */
.pdp-gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--rule); background: var(--tint); }
.pdp-gallery img.dark { display: none; }
:root[data-theme="dark"] .pdp-gallery.has-dark img.light { display: none; }
:root[data-theme="dark"] .pdp-gallery.has-dark img.dark { display: block; }
.pdp-buy { position: sticky; top: var(--bar); align-self: start; max-height: calc(100vh - var(--bar)); overflow-y: auto; padding: 1.75rem var(--m) 2.25rem; display: flex; flex-direction: column; gap: 1.125rem; scrollbar-width: none; }
.pdp-buy::-webkit-scrollbar { display: none; }
.pdp-buy > * { flex-shrink: 0; }
.pdp-buy h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.pdp-sub { color: var(--mid); font-size: 0.875rem; margin-top: -0.5rem; }
.pdp-price { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.pdp-price .price { font-size: 1.375rem; }
.pdp-price .meta { color: var(--mid); }
.pdp-save { font-size: 0.75rem; color: var(--red); }
/* Pair It With: a second product and the saving for buying both, between the price and the licenses */
.pair { border: 1px solid var(--rule); border-radius: 0.625rem; padding: 0.875rem; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.25rem 0.875rem; align-items: center; }
.pair-art { grid-row: span 2; align-self: start; }
.pair-art img { width: 4.5rem; height: 4.5rem; object-fit: contain; display: block; }
.pair-body { display: grid; gap: 0.125rem; min-width: 0; }
.pair-body .meta { color: var(--mid); }
.pair-name { font-size: 0.875rem; font-weight: 600; }
.pair-name:hover { text-decoration: underline; }
.pair-why { font-size: 0.75rem; line-height: 1.5; color: var(--mid); }
.pair-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-top: 0.25rem; font-size: 0.875rem; }
.pair-save { font-size: 0.75rem; color: var(--red); }
.pair-add { justify-self: start; margin-top: 0.375rem; padding: 0.5rem 1rem; font-size: 0.6875rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chips span { font-size: 0.6875rem; letter-spacing: .04em; padding: 0.3125rem 0.625rem; border-radius: 62.4375rem; background: var(--tint); color: var(--mid); }
.tiers { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 0.625rem; overflow: hidden; }
.tier { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.8125rem 0.875rem; cursor: pointer; font-size: 0.875rem; }
.tier + .tier { border-top: 1px solid var(--rule); }
.tier input { accent-color: var(--ink); margin: 0; }
.tier .price { font-size: 0.9375rem; }
.tier .t-note { grid-column: 2 / -1; font-size: 0.75rem; color: var(--mid); line-height: 1.5; }
.tier:has(input:checked) { background: var(--fill); }
.tiers-more summary { list-style: none; cursor: pointer; font-size: 0.75rem; color: var(--mid); padding: 0.25rem 0; }
.tiers-more summary::-webkit-details-marker { display: none; }
.tiers-more summary:hover { color: var(--ink); }
.tiers-more[open] summary { margin-bottom: 0.625rem; }
.buy-actions { display: flex; flex-direction: column; gap: 0.625rem; }
.buy-msg { font-size: 0.75rem; min-height: 1em; }
.pdp-perks { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.8125rem; color: var(--mid); }
.pdp-perks li { list-style: none; display: flex; gap: 0.625rem; }
.pdp-perks li::before { content: ''; flex: none; width: 0.3125rem; height: 0.3125rem; margin-top: 0.5rem; background: var(--ink); }
.upsell { border: 1px solid var(--rule); border-radius: 0.625rem; padding: 0.875rem; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.875rem; align-items: center; }
.upsell img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.upsell .u-k { color: var(--mid); }
.upsell .u-name { font-size: 0.875rem; font-weight: 600; margin-top: 0.125rem; }
.upsell .u-line { font-size: 0.75rem; color: var(--mid); margin-top: 0.125rem; }
.upsell .u-line b { color: var(--red); font-weight: 500; }
.upsell:hover { border-color: var(--ink); }
.pdp-section { border-top: 1px solid var(--rule); padding-top: 1.125rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pdp-section p { font-size: 0.875rem; line-height: 1.65; }
.pdp-section ul.inc { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5; padding-left: 1.125rem; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.125rem; font-size: 0.8125rem; }
.specs dt { color: var(--mid); }
.apps { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.apps span { font-size: 0.75rem; padding: 0.1875rem 0.5625rem; border: 1px solid var(--rule); border-radius: 0.375rem; }
.optin { display: flex; gap: 0.5625rem; align-items: flex-start; font-size: 0.6875rem; line-height: 1.5; color: var(--mid); cursor: pointer; }
.optin input { margin: 1px 0 0; accent-color: var(--ink); flex: none; }

/* phones: a buy bar that follows once the main Buy button scrolls away */
.buy-sticky { display: none; }

/* ── Footer ── */
.footer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 2rem; padding: 2.5rem var(--m) 3rem; }
.footer .f-news { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 0.875rem; }
.footer .f-news h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.footer .f-news p { color: var(--mid); font-size: 0.8125rem; }
.footer .f-col { grid-column: span 2; display: flex; flex-direction: column; gap: 0.625rem; }
.footer .f-col:first-of-type { grid-column: 5 / span 2; }
.footer .f-col a { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.footer .f-col a:hover { color: var(--ink); }
.footer .f-end { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ── Prose pages (license, help, thanks) ── */
.prose { padding: 2.5rem var(--m) 4rem; max-width: 51.25rem; display: flex; flex-direction: column; gap: 1rem; }
.prose h1 { font-size: 2.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.25rem; }
.prose p, .prose li { font-size: 0.9375rem; line-height: 1.7; }
.prose ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.prose a { text-decoration: underline; text-underline-offset: 0.125rem; }
.prose .muted { color: var(--mid); }

/* ── Cart drawer ── */
.cart-shade { position: fixed; inset: 0; background: rgba(17,17,16,.18); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 900; }
:root[data-theme="dark"] .cart-shade { background: rgba(0,0,0,.45); }
.cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(27.5rem, 100vw); background: var(--bg); border-left: 1px solid var(--rule); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); z-index: 901; display: flex; flex-direction: column; }
.cart-open .cart-shade { opacity: 1; pointer-events: auto; }
.cart-open .cart-panel { transform: none; }
.cart-head { height: var(--bar); flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--m); border-bottom: 1px solid var(--rule); }
.cart-x { background: none; border: 0; cursor: pointer; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.cart-x:hover { color: var(--ink); }
.cart-progress { padding: 1rem var(--m); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.75rem; }
.cart-progress[hidden] { display: none; }
.cart-progress .track { height: 0.25rem; border-radius: 0.25rem; background: var(--rule); overflow: hidden; }
.cart-progress .fill { height: 100%; background: var(--ink); width: 0; transition: width .4s cubic-bezier(.2,.7,.2,1); }
.cart-list { flex: 1; overflow-y: auto; padding: 0 var(--m); }
.cart-item { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: start; padding: 1.125rem 0; border-bottom: 1px solid var(--rule); }
.cart-item img { width: 4rem; height: 4rem; object-fit: contain; }
.cart-name { font-size: 0.875rem; margin-bottom: 0.5rem; }
.cart-lic { font: inherit; font-size: 0.75rem; color: var(--ink); background: var(--fill); border: 1px solid var(--rule); border-radius: 0.375rem; padding: 0.375rem 0.5rem; max-width: 100%; }
.cart-rm { display: block; margin-top: 0.625rem; background: none; border: 0; padding: 0; cursor: pointer; font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.cart-rm:hover { color: var(--ink); }
.cart-price { font-size: 0.875rem; text-align: right; }
.cart-price .mb { display: block; color: var(--mid); font-family: var(--doto); font-size: 0.625rem; letter-spacing: .06em; margin-top: 0.25rem; }
.cart-empty { padding: 3.5rem 0; text-align: center; font-size: 0.875rem; color: var(--mid); line-height: 1.8; }
.cart-empty a { color: var(--ink); text-decoration: underline; }
.cart-suggest { padding: 1.125rem 0; display: flex; flex-direction: column; gap: 0.625rem; }
.cart-suggest .s-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.75rem; align-items: center; font-size: 0.8125rem; }
.cart-suggest img { width: 3rem; height: 3rem; object-fit: contain; }
.cart-suggest .s-row .meta { margin-left: 0.375rem; }
.cart-suggest button { background: none; border: 1px solid var(--rule); border-radius: 62.4375rem; padding: 0.375rem 0.75rem; cursor: pointer; font-family: var(--doto); font-weight: 900; font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.cart-suggest button:hover { border-color: var(--ink); }
.cart-foot { padding: 1.125rem var(--m) 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.625rem; flex: none; }
.cart-foot[hidden] { display: none; }
.cart-line { display: flex; justify-content: space-between; font-size: 0.8125rem; }
.cart-line.total { font-size: 0.9375rem; }
.cart-line.save { color: var(--red); }
.cart-note { font-size: 0.6875rem; color: var(--mid); line-height: 1.6; }
.cart-note a { color: var(--ink); text-decoration: underline; }
.cart-email { width: 100%; font: inherit; font-size: 0.875rem; color: var(--ink); background: var(--fill); border: 1px solid var(--rule); border-radius: 62.4375rem; padding: 0.75rem 1rem; outline: none; }
.cart-msg { font-size: 0.75rem; min-height: 1em; }
.code-row { display: flex; gap: 0.5rem; }
.code-row input { flex: 1; min-width: 0; font: inherit; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; padding: 0.5625rem 0.875rem; border: 1px solid var(--rule); border-radius: 62.4375rem; background: transparent; color: var(--ink); }
.code-row input::placeholder { text-transform: none; letter-spacing: 0; color: var(--mid); }
.code-row button, .code-on button { font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 1px solid var(--ink); color: var(--ink); border-radius: 62.4375rem; padding: 0 0.875rem; cursor: pointer; }
.code-on { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; font-size: 0.75rem; }
.code-on button { border: 0; padding: 0; color: var(--mid); }
.code-note { font-size: 0.6875rem; color: var(--mid); min-height: 1em; }

/* ── Mobile menu ── */
.m-panel { display: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cards, .tiles { grid-template-columns: repeat(var(--c-md, 3), minmax(0, 1fr)); }
  .pdp { grid-template-columns: minmax(0, 1fr) 25rem; }
}
@media (max-width: 860px) {
  .cards, .tiles { grid-template-columns: repeat(var(--c-sm, 2), minmax(0, 1fr)); }
  .multibuy h2, .multibuy p { grid-column: 1 / -1; }
  .multibuy .steps { grid-column: 1 / -1; grid-row: auto; margin-top: 1.5rem; }
  .sampler-band .disk-stage { grid-column: 1 / -1; max-width: 32rem; }
  .sampler-copy { grid-column: 1 / -1; margin-top: 1rem; }
  .review { flex-basis: 86%; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust div:nth-child(3) { border-left: 0; }
  .trust div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pdp { grid-template-columns: 1fr; }
  .pdp-media { border-right: 0; display: contents; }
  .pdp-hero { order: 1; }
  .pdp-buy { order: 2; position: static; max-height: none; overflow: visible; }
  .pdp-gallery { order: 3; border-top: 1px solid var(--rule); }
  .page-intro h1, .page-intro p { grid-column: 1 / -1; }
  .footer .f-news { grid-column: 1 / -1; }
  .footer .f-col, .footer .f-col:first-of-type { grid-column: span 3; }
  .f-brand { grid-column: 10 / span 3; grid-row: auto; }
  .buy-sticky {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 700; gap: 0.75rem; align-items: center; justify-content: space-between;
    padding: 0.75rem var(--m) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--rule);
    transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .buy-sticky.on { transform: none; }
  .buy-sticky .bs-name { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
  .buy-sticky .btn { height: 2.625rem; padding: 0 1.25rem; }
}
/* tablets and small laptops: the five menu links (Assets, Plugins, Bundles, Free, Help) plus the cart need about
   1040px beside a centered clock, so below that the clock steps aside and the menu takes the space */
@media (min-width: 601px) and (max-width: 1040px) {
  .top-bar { grid-template-columns: auto 1fr; gap: 1.5rem; }
  .clock { display: none; }
  .nav { gap: 1.25rem; }
}
@media (max-width: 600px) {
  .top-bar { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
  .top-left .theme-toggle { display: none; }
  .clock { text-align: left; }
  .nav { gap: 1.125rem; }
  .nav li.hide-sm { display: none; }
  .menu-btn { display: inline-flex; width: 1.375rem; height: 1.375rem; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--ink); }
  .cart-count { position: absolute; top: -0.4375rem; right: -0.5625rem; min-width: 0.875rem; height: 0.875rem; padding: 0 0.1875rem; border-radius: 0.4375rem; background: var(--ink); color: var(--bg); font-size: 0.5625rem; line-height: 0.875rem; text-align: center; }
  .cart-btn { position: relative; padding-bottom: 0 !important; }
  .cart-btn .cart-word { display: none; }
  .m-panel {
    display: flex; flex-direction: column; position: fixed; top: var(--bar); right: 0; bottom: 0; width: 100%; z-index: 799;
    background: var(--bg); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .menu-open .m-panel { transform: none; }
  .m-panel a { padding: 1.125rem var(--m); border-bottom: 1px solid var(--rule); font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em; }
  .m-panel .m-row { padding: 1.125rem var(--m); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); }
  .m-panel .theme-toggle { display: inline-flex; }
  .cards, .tiles { grid-template-columns: repeat(var(--c-xs, 2), minmax(0, 1fr)); }
  .cards.solo .card { grid-template-columns: 1fr; }
  .cards.solo .card > a { box-shadow: 0 1px 0 var(--rule); }
  .tile .num, .tile-name, .tile-count { padding-left: var(--m); padding-right: var(--m); }
  .multibuy .steps { grid-template-columns: 1fr; }
  .multibuy .step + .step { border-left: 0; border-top: 1px solid var(--rule); }
  .email-form { flex-direction: column; }
  .trust { grid-template-columns: 1fr; }
  .trust div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .footer .f-col, .footer .f-col:first-of-type { grid-column: span 6; }
  .f-brand { grid-column: 1 / -1; justify-self: start; }
  .footer .f-end { flex-direction: column; }
  .card-meta { padding-left: 0.875rem; padding-right: 0.875rem; }
  .card-name { font-size: 0.8125rem; }
}

/* ── Ruderal Sans: Sam's own face (2026-10-13) ──
   The Clean cut, Regular and Bold, sets the interface (menu, buttons, links, filters, forms, license names) and every
   label, tag and small caps line, numbers included. Product prices and the mix and match percentages stay in Doto, headings and product names in Xanh
   Mono, reading text in Plex Mono, and the header clock in Doto. Source: Ruderal Font/Fonts/Web on Art&Video. */
@font-face { font-family: 'Ruderal Sans'; font-weight: 400; font-display: swap; src: url(/fonts/ruderal/RuderalSans-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Ruderal Sans'; font-weight: 700; font-display: swap; src: url(/fonts/ruderal/RuderalSans-Bold.woff2) format('woff2'); }
:root { --rud: 'Ruderal Sans', 'Helvetica Neue', Arial, sans-serif; }

.link, .nav a, .nav button, .bar a.more, .btn, .card-add, .filters a, .email-form input, .tier > span:not(.t-note):not(.price),
.cart-x, .cart-suggest button, .crumbs a, .footer .f-col a {
  font-family: var(--rud); font-synthesis: none; letter-spacing: .1em; }
.m-panel a { font-family: var(--rud); font-synthesis: none; }
.btn, .card-add { font-weight: 700; }
.tier > span:not(.t-note):not(.price), .email-form input { letter-spacing: .02em; font-size: 0.875rem; }

.label, .bar, .kicker, .num, .meta, .badge, .cart-count, .tk-item, .fh-meta, .cart-price .mb, .faq summary::after {
  font-family: var(--rud); font-weight: 400; font-synthesis: none; letter-spacing: .08em; }
.cart-count, .badge { font-weight: 700; letter-spacing: .01em; }
.badge { letter-spacing: .06em; }
.chips span, .apps span { font-family: var(--rud); font-synthesis: none; letter-spacing: .02em; }

/* ── Footer: the Resources column is its own heading, and the heading is the link ── */
.footer .f-col a.label { font-family: var(--rud); font-weight: 400; font-synthesis: none; font-size: 0.8125rem; letter-spacing: .08em; color: var(--mid); }
.footer .f-col a.label:hover { color: var(--ink); }

/* ── Resources (/resources): two boxes, filters, then one row per link ── */
.r-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.r-box { display: flex; gap: 1.375rem; align-items: center; padding: 1.5rem var(--m); color: inherit; }
.r-box + .r-box { box-shadow: -1px 0 0 var(--rule); }
.r-box img { width: 7rem; height: 7rem; object-fit: contain; flex-shrink: 0; }
/* the GOAT's logo (an SVG named in the data), drawn in the ink color so it flips with dark mode */
.r-goat { width: 7rem; height: 7rem; flex-shrink: 0; background: var(--ink); -webkit-mask: var(--logo) center / 86% no-repeat; mask: var(--logo) center / 86% no-repeat; }
.r-box h3 { font-family: var(--head); font-weight: 400; font-size: 1.25rem; margin: 0.375rem 0 0.25rem; }
.r-box p { font-size: 0.8125rem; color: var(--mid); line-height: 1.6; }
.r-box .btn { margin-top: 0.875rem; height: 2.5rem; }
.filters button { font-family: var(--rud); font-synthesis: none; font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; padding: 0.5rem 0.875rem;
  border: 1px solid var(--rule); border-radius: 62.4375rem; color: var(--mid); background: none; cursor: pointer; }
.filters button:hover { color: var(--ink); border-color: var(--ink); }
.filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.r-sec[hidden], .r-rows li[hidden] { display: none; }
.r-rows { list-style: none; }
.r-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 7rem; gap: 1.5rem; align-items: center; padding: 0.8125rem var(--m); border-bottom: 1px solid var(--rule); color: inherit; transition: background .2s; }
.r-row:hover { background: var(--tint); }
.r-name { font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.r-name img { width: 2.125rem; height: 2.125rem; object-fit: contain; flex-shrink: 0; margin: -0.375rem 0; }
.r-note { font-size: 0.8125rem; color: var(--mid); line-height: 1.5; }
.r-tag { justify-self: end; font-family: var(--rud); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
  border: 1px solid var(--rule); border-radius: 62.4375rem; padding: 0.1875rem 0.5rem; white-space: nowrap; }
.r-tag.mine { font-family: var(--doto); font-weight: 900; color: #fff; background: var(--blue); border-color: var(--blue); }
.r-tag.free { color: #3B3020; background: #D2C09C; border-color: #D2C09C; }
@media (max-width: 800px) {
  .r-top { grid-template-columns: 1fr; }
  .r-box + .r-box { box-shadow: 0 -1px 0 var(--rule); }
  .r-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
  .r-note { grid-column: 1 / -1; grid-row: 2; font-size: 0.75rem; }
  .r-note:empty { display: none; }
}
@media (max-width: 600px) {
  .r-box { padding: 1.125rem var(--m); gap: 1.125rem; }
  .r-box img, .r-goat { width: 5.25rem; height: 5.25rem; }
}

/* ── Cookie banner (ut.js askConsent): a bar along the bottom, only when the site has ad tags to load ── */
.consent { position: fixed; left: var(--m); right: var(--m); bottom: var(--m); z-index: 900; max-width: 40rem; margin-left: auto;
  display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.125rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 0.625rem;
  box-shadow: 0 0.75rem 2rem rgba(17, 17, 16, .12); }
.consent p { font-size: 0.8125rem; line-height: 1.55; color: var(--mid); }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.125rem; }
.consent-btns { display: flex; gap: 0.5rem; flex-shrink: 0; }
.consent .btn { height: 2.5rem; padding: 0 1.125rem; }
@media (max-width: 600px) { .consent { flex-direction: column; align-items: stretch; } .consent-btns .btn { flex: 1; } }