/* Landing page */

/* ================= HERO ================= */
.hero { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 84px) clamp(56px, 8vw, 104px); }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(20, 21, 25, .16) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 78% 42%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 70% at 78% 42%, #000 15%, transparent 72%);
}
.hero-inner {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
}
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero h1 { font-size: clamp(40px, 4.9vw, 68px); }
.hero .lead { max-width: 50ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .ico {
  width: 18px; height: 18px; padding: 3px; border-radius: 50%;
  background: var(--lime); color: var(--ink); stroke-width: 2.6; box-shadow: 0 0 0 1px rgba(20, 21, 25, .14) inset;
}

.hero-in { animation: hero-in .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-in { animation: none; } }

/* ================= THE DROP ================= */
.drop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.drop-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  /* reveal (opacity/transform, staggered) + hover (translate/shadow, immediate) */
  transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s),
              translate .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.drop-card:hover { translate: 0 -3px; box-shadow: var(--shadow); border-color: #D2CEC3; }
.drop-art {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 36px 22px 16px;
  background-color: var(--bone);
  background-image: radial-gradient(rgba(20, 21, 25, .13) 1px, transparent 1.3px);
  background-size: 16px 16px; background-position: 8px 8px;
  border-bottom: 1px solid var(--line);
}
.drop-art svg { width: 100%; height: 100%; max-height: 230px; overflow: visible; }
.drop-code, .drop-status { position: absolute; top: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.drop-code { left: 14px; color: var(--ink-3); }
.drop-status { right: 12px; padding: 2px 7px; border-radius: 5px; color: var(--lime-deep); background: var(--lime-tint); box-shadow: 0 0 0 1px rgba(75, 102, 0, .16) inset; }
.drop-body { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; }
.drop-body h3 { font-size: 19px; }
.drop-body p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.drop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.drop-tags li {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line);
}
/* A drop item that's out: its render on the render's own background, and the whole card links */
.drop-card.is-live { position: relative; }
.drop-card.is-live .drop-art { padding: 0; background: var(--graphite); border-bottom-color: transparent; }
.drop-card.is-live .drop-art img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.drop-card.is-live:hover .drop-art img { scale: 1.035; }
.drop-card.is-live .drop-code, .drop-card.is-live .drop-status { z-index: 1; }
.drop-card.is-live .drop-code { color: var(--on-dark-2); }
.drop-card.is-live .drop-status { color: var(--ink); background: var(--lime); box-shadow: none; font-weight: 600; }
.drop-link { color: inherit; text-decoration: none; }
.drop-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.drop-link:focus-visible { outline: none; }
.drop-card.is-live:focus-within { box-shadow: var(--focus); }
.drop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 28px; font-size: 15px; color: var(--ink-3); }

/* The drop on the Halloween night (components/night.css): a moonlit band, like the sellers band,
   with the moon in the heading's empty side (its own strip of sky on smaller screens, so it is never
   behind words) and the cards lit by candlelight */
.drop.night-scope {
  overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #07080C 0%, #0A0B10 60%, #0C0E13 100%);
  --moon-top: clamp(48px, 7vw, 104px); --moon-right: max(4vw, calc((100vw - var(--maxw)) / 2 + 24px)); --moon-size: clamp(150px, 17vw, 240px);
  --stars-inset: 0 0 62% 50%;
}
.drop.night-scope > .wrap { position: relative; z-index: 1; }
.drop.night-scope .fog { z-index: 0; }
.drop.night-scope .bat-1 { --y: 9%; }
.drop.night-scope .bat-2 { --y: 14%; }
.drop.night-scope .bat-3 { --y: 6%; }
.drop.night-scope .section-head { max-width: min(760px, 62%); }
.drop.night-scope .section-head h2 { padding-bottom: .36em; }
.night-scope .drop-card { background: var(--night-2); border-color: var(--line-2); }
.night-scope .drop-card:hover { border-color: rgba(242, 116, 30, .5); box-shadow: 0 34px 60px -30px rgba(242, 116, 30, .5); }
.night-scope .drop-card.is-live .drop-art img { filter: brightness(.94); transition: scale .5s var(--ease), filter .4s var(--ease); }
.night-scope .drop-card.is-live:hover .drop-art img { filter: brightness(1.05); }
.night-scope .drop-card.is-live .drop-status { color: #141519; }
.night-scope .drop-foot { color: var(--ink-2); }
@media (max-width: 980px) {
  .drop.night-scope { padding-top: calc(var(--section-y) + 110px); --moon-top: 28px; --moon-right: 6vw; --moon-size: 120px; --stars-inset: 0 0 auto 30%; }
  .drop.night-scope .night-stars { height: 190px; }
  .drop.night-scope .section-head { max-width: 760px; }
  .drop.night-scope .bat-1 { --y: 60px; }
  .drop.night-scope .bat-2 { --y: 110px; }
  .drop.night-scope .bat-3 { --y: 36px; }
}

/* Christmas 2026 on the winter night (components/snow.css): the same band, a bluer night with snow
   falling in the heading's empty side (fading out well before the cards), the cards lit warm and
   each price on a paper label */
.drop.snow-scope {
  overflow: hidden; isolation: isolate; border-top: 1px solid rgba(207, 228, 243, .08);
  background: linear-gradient(180deg, #050A12 0%, #07101B 60%, #08111C 100%);
}
.drop.snow-scope > .wrap { position: relative; z-index: 1; }
.drop.snow-scope .snowfall {
  inset: 0 0 auto 50%; height: 380px;
  -webkit-mask-image: radial-gradient(60% 80% at 62% 32%, #000 35%, transparent 80%);
  mask-image: radial-gradient(60% 80% at 62% 32%, #000 35%, transparent 80%);
}
.drop.snow-scope .section-head { max-width: min(760px, 62%); }
.drop.snow-scope .section-head h2 { padding-top: .14em; }
.snow-scope .drop-card { background: var(--winter-2); border-color: var(--line-2); }
.snow-scope .drop-card:hover { border-color: rgba(242, 169, 59, .5); box-shadow: 0 34px 60px -30px rgba(242, 169, 59, .45); }
.snow-scope .drop-card.is-live .drop-art img { filter: brightness(.95); transition: scale .5s var(--ease), filter .4s var(--ease); }
.snow-scope .drop-card.is-live:hover .drop-art img { filter: brightness(1.05); }
.snow-scope .drop-card.is-live .drop-status { color: #141519; background: #FFFFFF; font-weight: 600; letter-spacing: .02em; }
.snow-scope .drop-card.is-live .drop-code { color: rgba(243, 242, 237, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.snow-scope .drop-foot { color: var(--ink-2); }
@media (max-width: 980px) {
  .drop.snow-scope .snowfall { inset: 0 0 auto 30%; height: 220px; }
  .drop.snow-scope .section-head { max-width: 760px; }
}

/* Our Christmas designs on the home page (a showcase, not a collection): on wide screens the heading
   sits between the products of one wide photo, then the cards, 4 across with the lantern twice the size */
.xmas.section { padding-top: 0; }
.xmas-top { position: relative; z-index: 1; display: grid; align-content: start; aspect-ratio: 4 / 1; padding: clamp(22px, 2.5vw, 64px) 0 0 1.8%; margin-bottom: clamp(20px, 2.4vw, 40px); }
.xmas-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.drop.snow-scope .xmas-top .section-head { position: relative; max-width: none; margin: 0; gap: .5vw; justify-items: center; text-align: center; }
.drop.snow-scope .xmas-top :is(h1, h2) { font-size: clamp(30px, 2.7vw, 62px); line-height: 1.16; padding-top: 0; }
.xmas-top :is(h1, h2) .hl { display: block; }
.xmas-lead { max-width: 720px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.xmas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.xmas-grid .drop-body { padding: 14px 16px 18px; gap: 6px; }
.xmas-grid .drop-body h3 { font-size: 17px; }
.xmas-grid .drop-body p { font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.xmas-big { grid-column: span 2; grid-row: span 2; }
.xmas-big .drop-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.xmas-big .drop-art img { position: absolute; inset: 0; object-position: 78% 50%; }
.xmas-big .drop-body h3 { font-size: 22px; }
.xmas-big .drop-body p { font-size: 15.5px; -webkit-line-clamp: unset; }
/* the /christmas page: the header and the page behind it go dark with the band */
.theme-christmas { background: #08111C; }
.theme-christmas .site-header { background: rgba(6, 11, 19, .76); }
.theme-christmas .site-header.is-open { background: #08111C; }
.theme-christmas .acct-avatar { background: var(--lime); color: #141519; }
@media (max-width: 1099px) {
  .xmas.section { padding-top: var(--section-y); }
  .xmas-top { aspect-ratio: auto; padding: 0; margin-bottom: 18px; }
  .xmas-top img { display: none; }
  .drop.snow-scope .xmas-top .section-head { gap: 18px; justify-items: start; text-align: left; }
  .drop.snow-scope .xmas-top :is(h1, h2) { font-size: clamp(30px, 3.9vw, 50px); }
  .xmas-lead { margin-inline: 0; text-align: left; }
}
@media (max-width: 980px) {
  .xmas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .xmas-big { grid-row: auto; }
  .xmas-big .drop-art { aspect-ratio: 4 / 3; flex: none; }
}
/* phones: the small cards stay two across with the picture on top, not the drop cards side-by-side layout further down */
@media (max-width: 600px) {
  .drop-grid.xmas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xmas-grid .drop-card { flex-direction: column; }
  .xmas-grid .drop-art { width: auto; aspect-ratio: 4 / 3; flex: none; padding: 0; border-right: 0; }
  .xmas-grid .drop-status { display: block; right: 8px; top: 8px; }
  .xmas-grid .drop-body { padding: 11px 12px 14px; gap: 5px; }
  .xmas-grid .drop-body h3 { font-size: 15.5px; }
  .xmas-grid .drop-body p { font-size: 13.5px; -webkit-line-clamp: 4; }
  .xmas-big .drop-art { aspect-ratio: 1 / 1; }
  .xmas-big .drop-body h3 { font-size: 19px; }
  .xmas-big .drop-body p { font-size: 14.5px; }
}

/* Spec-sheet drawings */
.drop-art svg * { vector-effect: non-scaling-stroke; }
.d-body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.d-move, .d-move > * { fill: var(--lime); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.d-ink, .d-ink > * { fill: var(--ink); stroke: none; }
.d-inkdot circle { fill: var(--ink); }
.d-bone, .d-bone > * { fill: var(--f-bone); stroke: var(--ink); stroke-width: 1.2; }
.d-hole { fill: var(--bone-2); stroke: var(--ink); stroke-width: 1.3; }
.d-ring { fill: none; stroke: var(--ink-3); stroke-width: 2.2; }
.d-holes circle { fill: var(--bone-2); stroke: var(--ink-3); stroke-width: 1.1; }
.d-slot { fill: var(--bone-2); stroke: var(--ink); stroke-width: 1.3; }
.d-tick { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.d-inset { fill: none; stroke: rgba(20, 21, 25, .5); stroke-width: 1.1; }
.d-arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.d-label { font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .14em; fill: var(--ink-3); }
.d-engrave { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .14em; fill: var(--bone-2); stroke: var(--ink); stroke-width: .9; }

/* ================= SELLERS ================= */
.sellers { overflow: hidden; }
.sellers-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 12% 20%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 75% at 12% 20%, #000, transparent 70%);
  opacity: .8;
}
.sellers-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: start; }
.sellers-copy { display: grid; gap: 20px; justify-items: start; }
.sellers-copy .btn { margin-top: 8px; }
.section-dark .hl { background: none; color: var(--lime); padding: 0; }
.sellers-list { border-top: 1px solid var(--line-dark); }
.sellers-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line-dark); }
.sl-ic {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px;
  background: var(--graphite-2); border: 1px solid var(--line-dark); color: var(--lime);
}
.sellers-list h3 { color: var(--on-dark); }
.sellers-list p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-2); }

/* ================= SIGN UP ================= */
.signup-card {
  position: relative; overflow: hidden; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 5vw, 60px); border-radius: 24px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.signup-card::before { /* a corner of build-plate dots */
  content: ""; position: absolute; right: -40px; top: -40px; width: 320px; height: 240px; pointer-events: none;
  background-image: radial-gradient(rgba(20, 21, 25, .14) 1px, transparent 1.3px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.signup-copy { position: relative; display: grid; gap: 16px; }
.signup-copy h2 { font-size: clamp(30px, 3.6vw, 44px); max-width: 14ch; }
.signup-action { position: relative; display: grid; gap: 14px; justify-items: start; }
.fine { font-size: 13px; color: var(--ink-3); }

/* ================= FAQ ================= */
.faq-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none;
  font-stretch: var(--semi); font-weight: 650; font-size: clamp(17px, 1.6vw, 19px); letter-spacing: -0.012em; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: 6px; }
.faq-ic { position: relative; flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; border-radius: 2px; background: var(--ink);
  transform: translate(-50%, -50%); transition: transform .25s var(--ease);
}
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item summary:hover .faq-ic { border-color: #C9C5B9; }
.faq-item[open] .faq-ic { background: var(--lime); border-color: rgba(20, 21, 25, .25); }
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 56px 24px 0; color: var(--ink-2); }

/* ================= RELEASE LOG (the hero's panel) =================
   The last week of new designs by day, like a printer's job history: date, how many, thumbnails */
.log {
  position: relative; margin: 0; padding: 16px 16px 14px; border-radius: var(--r-xl);
  background: radial-gradient(120% 70% at 50% 0%, #22262C 0%, var(--graphite) 64%);
  color: var(--on-dark); box-shadow: var(--shadow-lg); border: 1px solid #0B0C0E; isolation: isolate;
}
.log::after { /* hairline inner edge, like a machined panel */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.log-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 12px; border-bottom: 1px solid var(--line-dark); }
.log-title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.log-count { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--on-dark); }
.log-count i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime-glow); animation: led 1.6s ease-in-out infinite; }
@keyframes led { 50% { opacity: .35; } }
.log-day { display: grid; grid-template-columns: 58px 50px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line-dark); }
.log-date { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 1.25; color: var(--on-dark-2); }
.log-date b { font-weight: 600; color: var(--on-dark); }
.log-n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--lime); white-space: nowrap; }
.log-thumbs { display: flex; gap: 8px; min-width: 0; }
.log-thumb, .log-more { flex: 0 1 64px; min-width: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.log-thumb { background: var(--graphite-3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.log-thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s var(--ease); }
.log-thumb:hover img { scale: 1.08; }
.log-thumb:focus-visible, .log-more:focus-visible, .log-foot a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.log-more {
  flex-basis: 44px; display: grid; place-items: center; border: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-2); text-decoration: none;
}
.log-more:hover { color: var(--on-dark); border-color: rgba(243, 242, 237, .22); }
.log-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 13px 4px 2px; font-size: 14px; color: var(--on-dark-2); }
.log-foot b { color: var(--on-dark); font-weight: 600; }
.log-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--lime); text-decoration: none; }
.log-foot a .ico { width: 16px; height: 16px; transition: translate .2s var(--ease); }
.log-foot a:hover .ico { translate: 3px 0; }
@media (prefers-reduced-motion: reduce) { .log-count i { animation: none; } }

/* ================= THE MEMBERSHIP IN NUMBERS ================= */
.pace-head { margin-bottom: clamp(28px, 4vw, 44px); }
.pace-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pace-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 22px 24px 0 0; }
.pace-stats > div + div { padding-left: 24px; border-left: 1px solid var(--line-2); }
.pace-stats dd { font-stretch: var(--wide); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pace-stats dt { max-width: 30ch; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pace-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 52px); }
.pace-plan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k amt" "d d"; align-items: baseline; gap: 10px 16px;
  padding: 20px 22px; border-radius: var(--r-lg); background: var(--bone); border: 1px solid var(--line);
  color: inherit; text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pace-plan:hover { border-color: #CFCBC0; box-shadow: var(--shadow); }
.pace-plan:focus-visible { outline: none; box-shadow: var(--focus); }
.pace-plan.is-best { background: var(--graphite); color: var(--on-dark); border-color: #0B0C0E; }
.pace-plan-k { grid-area: k; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.is-best .pace-plan-k { color: var(--lime); }
.pace-plan-amt { grid-area: amt; font-stretch: var(--wide); font-weight: 800; font-size: 26px; letter-spacing: -.03em; white-space: nowrap; }
.pace-plan-amt small { margin-left: 6px; font-stretch: 100%; font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-3); }
.is-best .pace-plan-amt small { color: var(--on-dark-2); }
.pace-plan-d { grid-area: d; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.is-best .pace-plan-d { color: var(--on-dark-2); }
.pace-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.pace-foot p { font-size: 15px; color: var(--ink-3); }

/* ================= SHOP BY CATEGORY ================= */
.shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 36px); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); background: var(--graphite); color: var(--on-dark); text-decoration: none;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 14, 0) 42%, rgba(10, 11, 14, .82) 100%); }
.tile-body { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.tile-name { font-stretch: var(--semi); font-weight: 700; font-size: 18px; line-height: 1.2; }
.tile-n { font-family: var(--font-mono); font-size: 12px; color: rgba(243, 242, 237, .82); }
.tile:hover img { scale: 1.04; }
.tile:focus-visible { outline: none; box-shadow: var(--focus); }

/* ================= WHAT YOU GET ================= */
.included .inc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.inc-list li { display: grid; gap: 10px; align-content: start; }
.inc-ic { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 12px; background: var(--bone); border: 1px solid var(--line); color: var(--ink); }
.inc-ic .ico { width: 22px; height: 22px; }
.inc-list h3 { font-size: 18px; }
.inc-list p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.inc-note { margin-top: 32px; font-size: 15px; color: var(--ink-3); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .tiles, .included .inc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 15ch; }
  .log { max-width: 560px; width: 100%; }
  .drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sellers-inner, .signup-card, .faq-inner { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
}
@media (max-width: 760px) {
  .pace-stats { grid-template-columns: minmax(0, 1fr); }
  .pace-stats > div, .pace-stats > div + div { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .pace-stats dd { font-size: 36px; white-space: nowrap; }
  .pace-stats dt { max-width: 20ch; }
  .pace-plans { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
}
@media (max-width: 600px) {
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-proof { flex-direction: column; gap: 10px; }
  .log { padding: 14px 12px 12px; }
  .log-day { grid-template-columns: 46px 42px minmax(0, 1fr); gap: 10px; padding: 8px 2px; }
  .log-day:nth-child(n+5) { display: none; } /* four days on a phone; the count still covers the week */
  .log-thumbs { gap: 6px; }

  .drop-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .drop-card { flex-direction: row; }
  .drop-art { aspect-ratio: auto; width: 42%; flex: none; padding: 30px 8px 10px; border-bottom: 0; border-right: 1px solid var(--line); }
  .drop-art svg { max-height: 120px; }
  .drop-code { left: 10px; top: 9px; font-size: 10px; }
  .drop-status { display: none; }
  .drop-body { padding: 14px 14px 14px 16px; gap: 6px; }
  .drop-body h3 { font-size: 16.5px; }
  .drop-body p { font-size: 14px; }
  .drop-tags li { font-size: 10px; padding: 2px 6px; }

  .pace-plan { padding: 18px; }
  .pace-foot .btn { width: 100%; }

  .tiles { gap: 10px; }
  .tile-body { left: 12px; right: 12px; bottom: 10px; flex-direction: column; align-items: flex-start; }
  .tile-name { font-size: 16px; }
  .tile-n { font-size: 11px; }

  .included .inc-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .inc-list li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
  .inc-ic { grid-row: span 2; margin-bottom: 0; }

  .sellers-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .sl-ic { width: 40px; height: 40px; border-radius: 10px; }

  .signup-card { border-radius: 18px; }
  .field-row .btn { width: 100%; }
  .faq-a { padding-right: 8px; }
}

/* ================= 404 ================= */
.notfound { min-height: calc(100vh - var(--header-h) - 320px); display: grid; align-items: center; }
.notfound-inner { display: grid; gap: 22px; justify-items: start; }
.notfound h1 { max-width: 14ch; }

/* ---------- Phone refinements ---------- */
@media (max-width: 960px) {
  /* On one column, put the release log right after the buttons and the proof list after it */
  .hero-copy { display: contents; }
  .hero-inner { gap: 22px; justify-items: start; }
  .hero-inner > * , .hero-copy > * { min-width: 0; }
  .hero h1 { order: 2; }
  .hero .lead { order: 3; }
  .hero-ctas { order: 4; }
  .log { order: 5; margin-top: 10px; }
  .hero-proof { order: 6; margin-top: 6px; }
}
@media (max-width: 600px) {
  .hero .lead { font-size: 17px; }
  .hero-ctas { width: 100%; }
  .d-label { display: none; }
}