/* ═════ Hexa Studio ═════ */

.studio {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px 120px;
}

.studio-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 16px;
}

.display {
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-transform: none;
  margin: 0;
}
.display-2 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 900;
  text-transform: none;
  margin: 0;
}
.hl {
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* On the merged homepage the studio wrapper repeats between full-bleed
 * sections; flush variants drop the trailing page padding. */
.studio-flush { padding-bottom: 0; }

/* ───── Composer hero ───── */
.composer-hero {
  padding: 90px 0 30px;
}
.composer-hero .hero-sub {
  margin: 22px 0 0;
  max-width: 560px;
}
.composer-hero .stat-chips {
  justify-content: flex-start;
  margin-top: 28px;
}
/* The shell. The border, the glow and the rounding belong to the container
   now, not to the link field, so all three sources sit in the same box instead
   of each drawing its own. */
.composer {
  margin-top: 44px;
  max-width: 860px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow:
    0 30px 80px -30px rgba(255, 77, 109, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  /* Deliberately no overflow:hidden: it clips anything a child opens past the
     shell edge. The footer rounds its own bottom corners instead, being the
     only child that paints a background all the way to the edge. */
}
.composer:focus-within {
  border-color: rgba(255, 77, 109, 0.6);
  box-shadow:
    0 30px 90px -26px rgba(255, 77, 109, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Source strip */
.composer-source {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.composer-source-label {
  flex: none;
  padding-left: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
}

/* Field row: no chrome of its own any more. */
.composer-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

/* The action sits at the end of its own field row. margin-left:auto pins it to
   the right whatever precedes it, so the link input, the photo chips and the
   .myshopify.com add-on all end at the same place. */
.composer-bar .composer-go { margin-left: auto; flex: none; }

.composer-foot {
  margin: 0;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0 0 19px 19px;   /* 20px shell radius less the 1px border */
  font-size: 12.5px;
  color: var(--text-faint);
}
.composer-foot b { font-weight: 500; color: var(--text-mute); }
.composer-ico {
  width: 22px;
  height: 22px;
  color: var(--text-faint);
  flex: none;
}
.composer-bar input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  padding: 14px 0;
}
.composer-bar input::placeholder { color: var(--text-faint); }
/* Measured against 40 production buttons in the Origin UI registry and
   shadcn/ui's own source, because "this looks AI generated" turned out to be
   four specific conventions broken at once:
     uppercase        0 of 40 references use it, and the house type direction
                      already says sentence case
     weight 800       references run font-medium (500) to font-normal
     coloured bloom   0 of 40 carry any shadow at all
     hover floats     shadcn darkens the fill (bg-primary/90) and never moves
   Also gains what the old rule never had: a pressed state and a focus ring,
   which shadcn ships as focus-visible:ring-[3px]. */
.composer-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-control);
  min-height: 44px;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.composer-go:hover { background: #f03a5d; }
.composer-go:active { background: var(--accent-deep); }
.composer-go:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.45); }
.composer-hint {
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 14px 4px 0;
}
#composer-link.is-ghost { color: var(--text-faint); }
.composer-nolink {
  display: inline;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft);
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 122, 142, 0.4);
  transition: color 0.25s;
}
.composer-nolink:hover { color: var(--accent); }

/* ── Product step: link / photos / describe ── */
.ptabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.ptab {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mute);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  /* Listed, not `all`. transform is in the list because .ptab:active further
     down scales to 0.97 and only overrides transition-duration; with `all`
     gone, dropping transform here would have silently killed the press. */
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ptab:hover { color: var(--text); border-color: var(--border-strong); }
.ptab.sel {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(255, 77, 109, 0.14);
}
.pdesc {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 13px 16px;
  outline: none;
  resize: vertical;
  transition: border-color 0.3s;
}
.pdesc:focus { border-color: rgba(255, 77, 109, 0.55); }

.photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.photo-drop:hover {
  border-color: rgba(255, 77, 109, 0.5);
  background: rgba(255, 77, 109, 0.05);
}
.photo-drop-cta {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.photo-drop-hint {
  font-size: 12.5px;
  color: var(--text-faint);
}
.photo-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.photo-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(7,5,10,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}

/* ───── Rails ───── */
.rail-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 20px;
}
.rail-head p {
  font-size: 14px;
  color: var(--text-mute);
  margin: 0;
}
/* Phones keep two columns: one giant card per row reads as 12 screens of
 * scroll. Type and badges scale down to fit the narrower tile. */
@media (max-width: 440px) {
  .style-tile .style-name { font-size: 13px; }
  .style-tile .style-tag { font-size: 11px; margin-top: 2px; }
  .style-tile .style-meta { left: 11px; right: 11px; bottom: 10px; }
  .style-tile .style-badge { font-size: 9px; padding: 3px 7px; }
}

.style-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #0d080c;
  aspect-ratio: 4 / 5;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.style-tile:hover {
  border-color: rgba(255, 77, 109, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -24px rgba(255, 77, 109, 0.35);
}
.style-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.style-tile .style-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,5,10,0.1) 30%, rgba(7,5,10,0.94) 100%);
}
.style-tile .style-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  text-align: left;
}
.style-tile .style-name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.1;
}
.style-tile .style-tag {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-mute);
}
.style-tile .style-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
  background: rgba(7,5,10,0.7);
  border: 1px solid rgba(255, 77, 109, 0.4);
  border-radius: 999px;
  padding: 4px 9px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* price chip shared by mode tiles, style tiles and chooser cards */
.mode-price {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(7,5,10,0.7);
  border: 1px solid rgba(255, 77, 109, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ───── Steps ─────
 * Scoped under .steps-band: styles.css has its own .steps/.step-num used by
 * the offer landing pages; these must not collide once both load together. */
.steps-band { padding: 80px 0 0; }
.steps-band .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
@media (max-width: 900px) { .steps-band .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-band .steps { grid-template-columns: 1fr; } }
.steps-band .steps li {
  border-top: 1px solid var(--border-strong);
  padding: 18px 6px 0;
}
.steps-band .step-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 10px;
}
.steps-band .steps h3 {
  font-size: 16px;
  font-weight: 800;
  text-transform: none;
  margin: 0 0 6px;
}
.steps-band .steps p {
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 0;
}

/* ───── Closer ───── */
.closer {
  padding: 110px 0 30px;
  text-align: center;
}
.closer .display { font-size: clamp(32px, 5vw, 64px); }
.closer-cta {
  margin-top: 36px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--on-accent);
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: none;
  border-radius: 16px;
  padding: 18px 44px;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 18px 50px -14px rgba(255, 77, 109, 0.6);
}
.closer-cta:hover { transform: translateY(-2px); box-shadow: 0 26px 64px -14px rgba(255, 77, 109, 0.8); }

/* ═════ Done-for-you band ═════
 * The hands-off lane for brands that want volume, placed right after
 * pricing so anyone hesitating at the tiers sees a way to skip the tool
 * entirely. One card, one CTA: book a call. */
.dfy { padding: 26px 0 64px; }
.dfy-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: clamp(28px, 4.5vw, 52px);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(255, 77, 109, 0.13), transparent 55%),
    rgba(255, 255, 255, 0.025);
}
.dfy-copy { max-width: 640px; }
.dfy .c-sub { margin-top: 14px; }
.dfy-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dfy-points li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-mute);
}
.dfy-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.dfy-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.dfy-cta {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--on-accent);
  text-decoration: none;
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 14px;
  padding: 15px 34px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 14px 40px -12px rgba(255, 77, 109, 0.55);
}
.dfy-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 52px -12px rgba(255, 77, 109, 0.75); }
.dfy-note { font-size: 13px; color: var(--text-mute); }

/* ═════ Configurator drawer ═════ */
.config-overlay[hidden] { display: none; }

/* chooser mode: hide the price footer, show the example grid */
.config-overlay.chooser .config-foot { display: none; }
.chooser-intro {
  font-size: 14.5px;
  color: var(--text-mute);
  margin: 0 0 4px;
}
.chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 520px) { .chooser-grid { grid-template-columns: 1fr; } }
.chooser-grid .style-tile { aspect-ratio: 5 / 4; }
.chooser-auto {
  background: linear-gradient(160deg, rgba(255,77,109,0.16), rgba(255,77,109,0.04));
  border-color: rgba(255, 77, 109, 0.4);
}
.chooser-auto .style-meta { top: 16px; bottom: auto; }
.style-badge-auto {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
  border: 1px solid rgba(255, 77, 109, 0.4);
  border-radius: 999px;
  padding: 4px 9px;
}
.config-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  background: rgba(5, 3, 7, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: overlay-in 0.3s ease;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.config {
  width: min(680px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0d0810 0%, #0a0608 100%);
  border-left: 1px solid var(--border-strong);
  box-shadow: -40px 0 120px -40px rgba(0,0,0,0.8);
  animation: config-in 0.45s var(--ease);
}
@keyframes config-in {
  from { transform: translateX(48px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--border);
}
.config-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 6px;
}
.config-head h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}
.config-close {
  font-size: 26px;
  line-height: 1;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.25s;
}
.config-close:hover { color: var(--text); }

.config-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.config-step h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-mute);
  margin: 0 0 12px;
}
.config-step h3 .step-n {
  color: var(--accent);
  margin-right: 8px;
}

.field input[type="url"],
.field input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.3s;
}
.field input:focus { border-color: rgba(255, 77, 109, 0.55); }
.field .hint {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 8px 2px 0;
}

/* option pickers */
.picker { display: grid; gap: 10px; }
.picker-avatars { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.picker-media   { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.picker-chips   { display: flex; flex-wrap: wrap; gap: 8px; }

.opt {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.opt:hover { border-color: var(--border-strong); }
.opt.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 28px -12px rgba(255, 77, 109, 0.5);
}
.opt .opt-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 7px 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opt-avatar img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.opt-media .opt-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0d080c;
}
/* static ad creatives are square; cropping them loses the headline */
.opt-format .opt-frame { aspect-ratio: 1 / 1; }
.opt-media img,
.opt-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.opt-media video { opacity: 0; transition: opacity 0.25s; }
.opt-media:hover video { opacity: 1; }

.chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  /* box-shadow is in the list because a second .chip.sel rule near the aspect
     glyphs adds a glow, and transform because .chip:active scales to 0.97. */
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease);
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.sel {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(255, 77, 109, 0.14);
}
.chip-price {
  color: var(--text-faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip.sel .chip-price { color: var(--accent-soft); }

.picker-note {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 10px 2px 0;
}

.config-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 30px;
  border-top: 1px solid var(--border);
  background: rgba(10, 6, 8, 0.6);
}
.config-total { display: flex; flex-direction: column; }
.config-total-label {
  font-size: 12px;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
}
.config-total-price {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.config-total-eta {
  font-size: 11.5px;
  color: var(--text-faint);
}
.config-act {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.config-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}
.config-hint[hidden] { display: none; }
.config-submit {
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: none;
  border-radius: var(--radius-control);
  padding: 14px 34px;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.3s;
  box-shadow: 0 12px 34px -12px rgba(255, 77, 109, 0.55);
}
.config-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 44px -12px rgba(255, 77, 109, 0.7); }
.config-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* The card fallback beside "Use N credits". Quiet on purpose: it is the second
 * way to pay for someone who can already afford the order from their balance,
 * so it must not compete with the button that costs them nothing extra. */
.config-alt {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  background: none;
  border: 0;
  padding: 8px 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.config-alt:hover { color: var(--text); }

/* ───── Homepage pricing: one card per format ─────
 * Reuses the .tier card language from styles.css (the offer-page cards);
 * these rules only add the button reset, the responsive 4-up grid, the
 * "From" price prefix and the CTA pill. */
.pack-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  max-width: 1080px;
  margin: 8px auto 0;
}
@media (min-width: 640px) {
  .pack-track { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1060px) {
  /* Three tiers, not the four this was built for. Left at 4 it kept a
   * whole empty column and squeezed the cards to 277px in a 1400px
   * viewport, which is what made the row read as cramped. */
  .pack-track { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* .tier is a <div> in styles.css; here each card is a clickable <button>. */
.pack-card {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pack-card:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}
/* Sits inside a 46px line with -0.045em tracking, which is what pulled it into
 * the figure. A flex row on .tier-price plus a real gap keeps them apart at any
 * digit count; "From 11,000" was the case that broke. */
.pack-from {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-mute);
  margin-right: 7px;
}
.pack-from:empty { display: none; }
.tier-features [data-price-extra-n] { color: var(--accent-soft); font-weight: 600; }
.pack-cta {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 13px 16px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pack-card:hover .pack-cta {
  border-color: rgba(255, 77, 109, 0.5);
  background: rgba(255, 77, 109, 0.12);
  color: #fff;
}
.tier-featured .pack-cta {
  background: #fff;
  border-color: #fff;
  color: #12070b;
  box-shadow: 0 14px 40px -16px rgba(255, 255, 255, 0.55);
}
.tier-featured:hover .pack-cta {
  background: #fff;
  color: #12070b;
  transform: translateY(-1px);
}
.price-band-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 22px auto 0;
  max-width: 560px;
}
.price-band-note strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ───── Loading, error and touch-preview states ───── */
.tile-skeleton {
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  background: rgba(255,255,255,0.03);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.tile-skeleton-style { aspect-ratio: 4 / 5; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.rail-error {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  background: rgba(255,255,255,0.02);
}
.rail-error p {
  font-size: 14px;
  color: var(--text-mute);
  margin: 0;
}
.mode-tile.previewing video,
.hook-card.previewing video,
.opt-media.previewing video { opacity: 1; }

/* ───── Press states: buttons feel physical ───── */
.composer-go:active,
.closer-cta:active,
.config-submit:active:not(:disabled),
.more-tile:active,
.delivery-confirm:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.08s;
}
.chip:active, .ptab:active, .opt:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* ───── Reduced motion: calm, not thrashing ───── */
@media (prefers-reduced-motion: reduce) {
  .config, .config-overlay { animation: none; }
  .tile-skeleton { animation: none; }
  .mode-tile, .style-tile, .hook-card, .more-tile, .mq-item,
  .composer-go, .closer-cta, .config-submit { transition: none; }
}

@media (max-width: 640px) {
  .studio { padding: 0 18px 80px; }
  .composer-hero { padding: 56px 0 20px; }
  .composer-bar { flex-wrap: wrap; padding: 12px; }
  .composer-bar input { padding: 8px 4px; }
  .composer-go { width: 100%; }
  /* Every row inside the shell follows the field row down to a 12px gutter,
     or the note and the chips sit inset from the field above them. */
  .composer-source { padding: 10px 12px; }
  /* On a phone the field row wraps, so the action drops below the input and
     takes the full width. margin-left:auto is dropped or it would sit alone
     against the right edge of its own wrapped line. */
  .composer-bar .composer-go { margin-left: 0; margin-top: 4px; }
  .composer-foot { padding: 11px 14px; }
  .shop-note, .shop-steps, .composer-try { padding-left: 12px; padding-right: 12px; }
  .config-head, .config-body, .config-foot { padding-left: 20px; padding-right: 20px; }

  /* the drawer becomes a bottom sheet on phones */
  .config-overlay { align-items: flex-end; justify-content: stretch; }
  .config {
    width: 100%;
    height: 94dvh;
    margin-top: auto;
    border-left: none;
    border-top: 1px solid var(--border-strong);
    border-radius: 20px 20px 0 0;
    animation: config-up 0.45s var(--ease);
  }
  .config-head { position: relative; padding-top: 30px; }
  .config-head::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
  }
}
@keyframes config-up {
  from { transform: translateY(48px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC SYSTEM (body.home scoped; offer pages never load this)
   ═══════════════════════════════════════════════════════════════ */

/* ── Background: one lighting setup, no template grid ── */
body.home .bg-grid { display: none; }
body.home .bg-glow {
  background:
    radial-gradient(ellipse 70% 46% at 72% 6%, var(--crimson-glow) 0%, rgba(122, 13, 34, 0.5) 22%, rgba(58, 8, 20, 0.28) 42%, transparent 68%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #050307 100%);
}

/* ── Film grain: static SVG turbulence, one fixed layer ── */
body.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ── Type system ── */
.c-kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
/*
 * Instrument Serif has one weight, 400. Asking for 800 does not fail loudly:
 * the browser synthesises a bold by smearing the outline, which on a
 * high-contrast serif turns the thin strokes to mush. So weight is 400 and
 * presence comes from size instead.
 *
 * Sizes go up ~12% against the old Bricolage numbers. A serif at 400 sits
 * visually smaller than a grotesque at 800 at identical px, and matching the
 * old numbers would have quietly shrunk every headline on the site.
 *
 * Tracking loosens from -0.028em to -0.015em for the same reason: tight
 * tracking suits a grotesque and closes up a serif's counters.
 */
.c-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0;
  color: var(--text);
}
.c-display-xl { font-size: clamp(40px, 5.2vw, 80px); line-height: 1.0; }
.c-display-l  { font-size: clamp(36px, 4.8vw, 66px); }
.c-display-m  { font-size: clamp(26px, 3.2vw, 42px); }
.c-display .hl-line {
  display: block;
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--text-mute);
  margin: var(--s-5) 0 0;
  max-width: 56ch;
}
/* A section deck can run to more than one paragraph. The 24px that separates
   the first one from the heading is the wrong gap between two paragraphs of
   the same thought: it reads as three separate decks rather than one argument
   in three beats. */
.c-sub + .c-sub { margin-top: var(--s-3); }

/* ── Technical badge: camera-metadata chip ── */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
  background: rgba(7, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 5px 9px;
  white-space: nowrap;
}
.c-badge-accent { color: var(--accent); border-color: rgba(255, 77, 109, 0.35); }
.c-badge-solid  { color: var(--on-accent); background: var(--accent-deep); border-color: transparent; }

/* ── Section rhythm: numbered slate heads ── */
.c-head { margin: 0 0 var(--s-7); }
.c-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.c-head-row .c-sub { margin-top: var(--s-3); }
.c-head-meta {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
  padding-bottom: 8px;
  white-space: nowrap;
}

/* ── Vignette utility ── */
.c-vignette { position: relative; }
.c-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.42);
}

/* ── Reveal system ──
 *
 * Scoped to .js on purpose. The hidden state is what makes the animation
 * possible, but it is also what makes a slow or blocked script look like a
 * broken page: 29 elements at opacity 0 waiting on the LAST of six scripts.
 * The class is set inline in <head> before first paint, so if JS never arrives
 * the content is simply visible. Content first, choreography second.
 *
 * `.is-instant` is applied by the observer to anything already on screen at
 * load, so the first screen appears as one page rather than fading in piece by
 * piece. Only content scrolled to later animates. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal].is-instant {
  opacity: 1;
  transform: none;
  transition: none;
  --d: 0ms;
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ── Focus on borderless media tiles ── */
body.home .style-tile:focus-visible,
body.home .mode-tile:focus-visible,
body.home .hook-card:focus-visible,
body.home .tile:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ═════ Hero: the master monitor ═════ */
.c-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: clamp(28px, 3.5vw, 60px);
  align-items: center;
}
.c-hero-copy { min-width: 0; }
.c-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
@keyframes rec-blink { 50% { opacity: 0.25; } }
.pdp-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 12px;
  background: #e7e4de;
}
.pdp-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c5bd; }
.pdp-bar span {
  flex: 1;
  margin-left: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  background: #f4f2ee;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  color: #8a857c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 18px 20px 20px;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  overflow: hidden;
}
.pdp-body img {
  align-self: center;
  height: 40%;
  min-height: 0;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}
.pdp-title { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; color: #2b2822; }
.pdp-stars { margin: 0; font-size: 12.5px; letter-spacing: 2px; color: #e2a33d; }
.pdp-stars span { letter-spacing: 0; color: #8a857c; }
.pdp-price { margin: 0; font-size: 18px; font-weight: 700; color: #2b2822; }
.pdp-btn {
  padding: 10px 26px;
  border-radius: 8px;
  background: #dedad2;
  font-size: 12.5px;
  font-weight: 600;
  color: #55514a;
}
.pdp-line { display: block; width: 100%; height: 8px; border-radius: 4px; background: #e4e1da; }
.pdp-line.short { width: 58%; }

body.home .composer-hero { padding: 64px 0 30px; }

/* keep the output proof on screen as long as the columns fit;
 * the monitor IS the pitch, so it only stacks on genuinely small screens */
@media (max-width: 1100px) {
  .c-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.5fr); gap: 28px; }
}
@media (max-width: 800px) {
  .c-hero-grid { grid-template-columns: 1fr; }
  .c-display-xl { font-size: clamp(40px, 10.5vw, 64px); }
}

/* ═════ Full-bleed cinematic sections ═════ */
.c-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* ═════ Rails: Higgsfield media-surface tiles (homepage) ═════ */
/* Section heads read top-down on every screen: kicker, heading, then the
 * description underneath (Chris: never beside the heading). The count meta
 * keeps the top-right corner. */
.rail-head-c {
  display: block;
  position: relative;
  margin: 0 0 26px;
}
.rail-head-c .c-kicker { margin-bottom: 8px; }
.rail-desc {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 14px;
  color: var(--text-mute);
}
.rail-head-c .c-head-meta {
  position: absolute;
  top: 6px;
  right: 0;
}

/* media-surface conversion: borderless, edge-fade label zone */
body.home .style-tile,
body.home .mode-tile,
body.home .hook-card {
  border: 0;
  border-radius: 14px;
  background: var(--surface-media);
  box-shadow: var(--shadow-2);
}
body.home .style-tile:hover,
body.home .mode-tile:hover,
body.home .hook-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: var(--shadow-3), var(--glow-accent);
}
/* hover scales the media inside, not the card */
body.home .style-tile img,
body.home .mode-tile img,
body.home .mode-tile video,
body.home .hook-card img,
body.home .hook-card video {
  transition: transform 0.6s var(--ease);
}
body.home .style-tile:hover img,
body.home .mode-tile:hover img,
body.home .mode-tile:hover video,
body.home .hook-card:hover img,
body.home .hook-card:hover video {
  transform: scale(1.045);
}
body.home .style-tile .style-shade,
body.home .mode-tile .mode-shade,
body.home .hook-card .hook-shade {
  background: var(--edge-fade);
}

/* names go title-card: Archivo, all-caps */
body.home .style-tile .style-name,
body.home .mode-tile .mode-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-transform: none;
}
body.home .hook-card .hook-name {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.005em;
}
body.home .style-tile .style-tag,
body.home .mode-tile .mode-kicker {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.012em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
}

/* price + badge become technical chips */
body.home .style-tile .mode-price,
body.home .mode-tile .mode-price {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(7, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 4px 8px;
}
body.home .style-tile .style-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(7, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
body.home .style-tile.is-new .style-badge {
  color: var(--on-accent);
  background: var(--accent-deep);
  border-color: transparent;
}

/* the OPEN chip: Higgsfield's "Try now" pattern */
.tile-open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: #0a0608;
  background: #fff;
  border-radius: 999px;
  padding: 6px 11px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.style-tile:hover .tile-open,
.style-tile:focus-visible .tile-open,
.mode-tile:hover .tile-open,
.mode-tile:focus-visible .tile-open,
.hook-card:hover .tile-open,
.hook-card:focus-visible .tile-open {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .tile-open { display: none; }
}

/* marquee cards: borderless, mono names */
body.home .mq-item {
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
body.home .mq-item span {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.012em;
  text-transform: none;
}

/* rails get edge fade on both ends */
body.home .mode-rail,
body.home .hook-rail {
  mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
  padding-left: 2px;
}

/* ═════ Mid-page: spec sheet, pricing, reviews, reel, faq, closer ═════ */
.c-head-center { text-align: center; }
.c-head-center .c-sub { margin-left: auto; margin-right: auto; }

/* spec sheet */
.c-spec { padding: 100px 0; }
.c-spec-sheet {
  margin: var(--s-7) 0 0;
  border-top: 1px solid var(--border);
}
.c-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.c-spec-row dt {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
  padding-top: 3px;
}
.c-spec-row dd {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .c-spec-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 2px; }
}

/* pricing */
.c-price-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}

/* reviews band */
body.home .reviews { padding-top: 40px; }
body.home .proof-bar {
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
body.home .proof-bar-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body.home .proof-bar-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.012em;
  text-transform: none;
}
body.home .review-card {
  border: 0;
  box-shadow: var(--shadow-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

/* reel mosaic */
body.home .gallery .tile { border: 0; box-shadow: var(--shadow-1); }

/* steps band: mono slate numbers */
body.home .steps-band .step-num {
  font-family: var(--font-mono);
  background: none;
  border: 1px solid rgba(255, 77, 109, 0.4);
  color: var(--accent);
}
body.home .steps-band h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* results */
body.home .results .metric-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
body.home .case { border: 0; box-shadow: var(--shadow-3); }
body.home .case-shot img { filter: saturate(0.92); }

/* faq: hairlines instead of boxes */
body.home .faq-item {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
body.home .faq-item summary { font-weight: 600; }
body.home .faq-item summary::after {
  font-family: var(--font-mono);
  color: var(--accent);
}

/* closer: full-bleed still + giant type */
.c-closer {
  position: relative;
  margin-top: 90px;
  padding: 104px 0 112px;
  overflow: hidden;
  text-align: center;
}
.c-closer-bg {
  position: absolute;
  inset: -40px;
  background-image: url("https://ik.imagekit.io/6z6aflfem/assets/film/closer-still.jpg?tr=orig-true");
  background-size: cover;
  background-position: center 30%;
  filter: blur(26px) brightness(0.32) saturate(0.9);
  transform: scale(1.15);
}
.c-closer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent, rgba(5, 3, 7, 0.6) 90%),
    linear-gradient(180deg, var(--bg-0) 0%, transparent 22%, transparent 78%, var(--bg-0) 100%);
}
.c-closer-inner { position: relative; z-index: 1; }
.c-closer .closer-cta { margin-top: 38px; }
.c-closer-sub {
  max-width: 56ch;
  margin: 18px auto 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--text-mute);
}

/* The offer, stated rather than alluded to. Three columns that collapse to one,
 * each a claim we can actually stand behind: two need no account, and the third
 * says what the credits buy instead of just how many there are. */
.closer-offer {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 940px;
  margin: 40px auto 0;
  padding: 0;
  text-align: left;
}
.closer-offer li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--tile-radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(6px);
}
.closer-offer-tag {
  padding: 4px 11px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
}
.closer-offer li strong { font-size: 16px; font-weight: 700; line-height: 1.25; }
.closer-offer li span:not(.closer-offer-tag) {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mute);
}
.closer-note { margin: 18px 0 0; font-size: 13px; color: var(--text-faint); }

@media (max-width: 900px) { .closer-offer { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 640px) { .c-closer { padding: 72px 0 80px; } }

/* float CTA: dark glass, on-system */
body.home .float-cta-link {
  background: rgba(13, 8, 12, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  font-weight: 700;
}
body.home .float-cta-link:hover {
  border-color: rgba(255, 77, 109, 0.5);
  box-shadow: var(--shadow-2), var(--glow-accent);
}
body.home .float-cta-link svg { color: var(--accent); }

/* ═════ Order ticket (drawer review step) ═════ */
.ticket { display: flex; flex-direction: column; gap: 18px; }
.ticket-back {
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.25s;
}
.ticket-back:hover { color: var(--accent-soft); }

.ticket-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.ticket-hero > img {
  width: 96px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 9px;
  flex: none;
}
.ticket-hero-shade { display: none; }
.ticket-hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ticket-hero-text strong {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.05;
}
.ticket-hero-text span {
  font-size: 13px;
  color: var(--text-mute);
}
.ticket-hero-product {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: #fff;
  flex: none;
}

.ticket-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 2px;
  scrollbar-width: none;
  position: relative;
}
.ticket-strip::-webkit-scrollbar { display: none; }
.ticket-strip::before,
.ticket-strip::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 6px;
  background-image: radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.2) 1.9px, transparent 2.3px);
  background-size: 20px 6px;
}
.ticket-strip::before { top: 2px; }
.ticket-strip::after { bottom: 2px; }
.ticket-cell {
  position: relative;
  flex: 1 0 64px;
  max-width: 96px;
  aspect-ratio: 9 / 15;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* colorful film frames: each cell a different warm-brand gradient so an
   * empty strip still reads as a living reel, not black boxes */
  background: linear-gradient(150deg, #ff4d6d, #ff8a5b);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.28);
}
.ticket-cell:nth-child(6n + 2) { background: linear-gradient(150deg, #ff5f9e, #ff4d6d); }
.ticket-cell:nth-child(6n + 3) { background: linear-gradient(150deg, #ff8a5b, #ffc061); }
.ticket-cell:nth-child(6n + 4) { background: linear-gradient(150deg, #c65cff, #ff5f9e); }
.ticket-cell:nth-child(6n + 5) { background: linear-gradient(150deg, #ff4d6d, #ffab5e); }
.ticket-cell:nth-child(6n + 6) { background: linear-gradient(150deg, #ff6b8b, #c65cff); }
.ticket-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%),
    linear-gradient(0deg, rgba(10, 6, 12, 0.55), transparent 55%);
  z-index: 1;
}
.ticket-cell img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ticket-cell figcaption {
  position: absolute;
  left: 5px;
  bottom: 4px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.ticket-cell-end {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
.ticket-cell-n { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }
.ticket-cell-n figcaption { position: static; z-index: 3; font-size: 10px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.55); color: #fff; text-align: center; padding: 0 4px; }
.ticket-caption {
  margin: -6px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.ticket-rows { margin: 0; border-top: 1px solid var(--border); }
.ticket-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.ticket-row dt {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
  padding-top: 2px;
}
.ticket-row dd { margin: 0; font-size: 14px; font-weight: 500; }

.ticket-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--text-mute);
}
.ticket-bullets li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

.ticket-price {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
}
.ticket-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--text-mute);
}
.ticket-line span:last-child { font-variant-numeric: tabular-nums; }
.ticket-line-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}

.config-hint-ok { color: var(--text-faint) !important; }

/* ═════ Peek reveal: the post-link takeover ═════ */
.config-overlay.revealing .config { display: none; }

.peek-stage[hidden] { display: none; }
.peek-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
}
.peek-card {
  width: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.peek-card.peek-in { opacity: 1; transform: none; }
.peek-card.peek-out {
  opacity: 0;
  transform: translateX(64px) scale(0.97);
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
}

.peek-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 109, 0.28), transparent 65%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
.peek-card.peek-found .peek-glow { opacity: 1; }

/* The frame exists only once a real photo is in hand; it never shows empty.
 * Unhiding restarts the entrance animation, so a photo that lands late still
 * arrives with the same settle. */
.peek-frame[hidden] { display: none; }
.peek-frame {
  position: relative;
  width: min(280px, 70vw);
  aspect-ratio: 1 / 1; /* JS fits this to the photo's own shape on load */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: #fff;
  box-shadow: var(--shadow-3);
  animation: peek-frame-in 0.55s var(--ease);
}
@keyframes peek-frame-in {
  from { opacity: 0; transform: scale(1.05) translateY(6px); }
}
.peek-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.peek-eyebrow {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
}
.peek-label {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  min-height: 24px;
  transition: opacity 0.25s;
}
.peek-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 27px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.16;
  color: var(--text);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(12px);
}
.peek-card.peek-found .peek-title {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease) 0.12s, transform 0.4s var(--ease) 0.12s;
}
.peek-price {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 12px;
  opacity: 0;
}
.peek-card.peek-found .peek-price { opacity: 1; transition: opacity 0.4s var(--ease) 0.25s; }

/* Indeterminate progress: the only motion while the studio reads a page or
 * waits on the photo rescue. Quiet, thin, deliberate. */
.peek-progress[hidden] { display: none; }
.peek-progress {
  width: 168px;
  height: 2px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.peek-progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  animation: peek-progress 1.5s var(--ease) infinite;
}
@keyframes peek-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(390%); }
}

.peek-note[hidden] { display: none; }
.peek-note {
  margin: 12px 0 0;
  max-width: 340px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
}

.peek-skip[hidden] { display: none; }
.peek-skip {
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  animation: peek-skip-in 0.5s var(--ease);
}
.peek-skip:hover { color: var(--text-mute); }
@keyframes peek-skip-in {
  from { opacity: 0; }
}

/* A photo that lands after the reveal stage is over gets its own moment:
 * a card that slides up over whatever step the customer is on. */
.peek-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #14090e;
  box-shadow: var(--shadow-2), var(--glow-accent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.peek-toast.show { opacity: 1; transform: none; }
.peek-toast img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  flex: none;
}
.peek-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.peek-toast-text strong {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
}
.peek-toast-text span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* product chip in the drawer header */
.product-chip[hidden] { display: none; }
.product-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  max-width: 100%;
}
.product-chip img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  flex: none;
}
.product-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-chip-text strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-chip-text em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
}
.product-chip-fix {
  flex: none;
  margin-left: 2px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: none;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-mute);
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.product-chip-fix:hover { color: var(--text); border-color: var(--border-strong); }
.product-chip-fix[hidden] { display: none; }
.product-chip-input {
  min-width: 0;
  width: 220px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 77, 109, 0.45);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font: 700 12.5px/1.3 var(--font-body, inherit);
}
.product-chip-input:focus { outline: none; border-color: var(--accent); }

/* chooser upgrades */
.chooser-group {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
}
.chooser-grid .style-tile.chooser-auto-hero {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 116px;
}
/* The free-sample band: quiet, one line, sits under the Auto hero */
.chooser-sample {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px dashed rgba(255, 77, 109, 0.45);
  border-radius: 14px;
  background: rgba(255, 77, 109, 0.05);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.chooser-sample:hover {
  border-color: rgba(255, 77, 109, 0.8);
  background: rgba(255, 77, 109, 0.09);
}
.chooser-sample-badge {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
}
.chooser-sample-copy {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-mute);
}
.chooser-sample-copy strong { color: var(--text); font-weight: 650; }
.chooser-sample-arrow { flex: 0 0 auto; color: var(--accent-soft); font-size: 16px; }
.chooser-grid .style-tile {
  animation: tile-in 0.4s var(--ease) both;
}
@keyframes tile-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.style-tile img.tile-product,
img.tile-product {
  position: absolute;
  inset: auto;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-2);
}
.chooser-grid .style-tile img.tile-product {
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
}
.style-tile.chooser-auto-hero img.tile-product {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  left: auto;
  right: 14px;
  width: 64px;
  height: 64px;
}

@media (prefers-reduced-motion: reduce) {
  .peek-progress span, .peek-frame { animation: none; }
  .peek-card, .peek-card.peek-in, .peek-card.peek-out { transition: none; opacity: 1; transform: none; }
  .chooser-grid .style-tile { animation: none; }
}

/* ═════ Composer quick settings + product chip ═════ */
.composer-product[hidden] { display: none; }
.composer-product {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  flex: none;
}
.composer-product img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  flex: none;
}
.composer-product img[hidden] { display: none; }

/* Product photos in flight: a live skeleton instead of a dead white square.
 * White appears only UNDER a loaded photo (cutout PNGs sit on white).
 * The .style-tile variants out-rank the base tile rule's specificity. */
img.img-loading,
.style-tile img.tile-product.img-loading {
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.07) 35%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.07) 65%);
  background-size: 200% 100%;
  animation: img-skeleton 1.1s linear infinite;
}
img.img-loaded,
.style-tile img.tile-product.img-loaded {
  background: #fff;
}
@keyframes img-skeleton {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  img.img-loading { animation: none; }
}
.composer-product-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.composer-tool { position: relative; }
/* Mono and caps were doing the whole label here, which is most of why the row
   read as machine output. The label is Inter now and the mono is reserved for
   the value it actually belongs to: 15s, 9:16, 720p. */
.composer-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 13px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.composer-tool-btn:hover { border-color: var(--border-strong); color: var(--text); }
.composer-tool.set .composer-tool-btn { border-color: rgba(255, 77, 109, 0.45); }
.composer-tool-k { color: var(--text-faint); }
.composer-tool-v {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.composer-tool.set .composer-tool-v { color: var(--accent); }
.composer-tool-btn svg { color: var(--text-faint); }

.composer-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 210px;
  display: none;
  flex-direction: column;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(13, 8, 12, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-3);
}
.composer-pop.open { display: flex; }
.composer-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
}
.composer-pop-row:hover { background: rgba(255, 255, 255, 0.06); }
.composer-pop-row.sel { color: var(--accent); }
.composer-pop-row em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: var(--text-faint);
}

/* ═════ Avatar step: show the creator LARGE ═════ */
.step-opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-faint);
}
.avatar-preview[hidden] { display: none; }
.avatar-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(255, 77, 109, 0.35);
  border-radius: 14px;
  background: rgba(255, 77, 109, 0.06);
}
.avatar-preview img {
  width: 108px;
  height: 135px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
}
.avatar-preview img[hidden] { display: none; }
.avatar-preview-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avatar-preview-text strong {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.005em;
}
.avatar-preview-text span {
  font-size: 12.5px;
  color: var(--text-mute);
}

/* bigger, clearer creator cards */
body.home .picker-avatars { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
body.home .picker-avatars .opt-avatar .opt-name {
  font-size: 12.5px;
  font-weight: 700;
}
.opt-avatar-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 108px;
  border-style: dashed !important;
}
.opt-avatar-custom-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 77, 109, 0.12);
  color: var(--accent);
}
.opt-avatar-custom-ico svg { width: 20px; height: 20px; }
.avatar-upload[hidden] { display: none; }
.avatar-upload { margin-top: 12px; }

/* hero must stack above later sections so composer pops stay clickable:
 * the .studio wrapper and .c-proof both sit at z-index 1, so the later
 * section was winning hit-tests over the open pop */
body.home .composer-hero {
  position: relative;
  z-index: 6;
}
body.home .studio:has(.composer-hero) { z-index: 2; }

/* hero lead: editorial sub, key phrases lift to white */
.c-lead {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  max-width: 46ch;
}
.c-lead strong {
  color: var(--text);
  font-weight: 650;
}
.c-hero-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.c-hero-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-mute);
}
.c-hero-ticks li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent);
  transform: rotate(45deg);
}
/* Phones: two tidy pairs, never three ticks and an orphan */
@media (max-width: 520px) {
  .c-hero-ticks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
  }
}

/* ═════ Examples viewer: tiles open real footage, ordering is the CTA ═════ */
.viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(5, 3, 7, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.viewer-overlay[hidden] { display: none; }
body.viewer-open { overflow: hidden; }
.viewer {
  display: flex;
  gap: 26px;
  max-width: 980px;
  max-height: min(86vh, 820px);
  width: 100%;
  align-items: stretch;
}
.viewer-stage {
  position: relative;
  flex: 1.4;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0709;
  box-shadow: var(--shadow-3);
}
.viewer-stage video,
.viewer-stage img {
  max-width: 100%;
  max-height: min(86vh, 820px);
  width: auto;
  height: 100%;
  object-fit: contain;
}
.viewer-spin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.viewer-spin i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent);
  animation: viewer-spin 0.8s linear infinite;
}
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 5, 10, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.viewer-nav:hover { background: rgba(255, 77, 109, 0.28); border-color: rgba(255, 77, 109, 0.5); }
.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }
.viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 5, 10, 0.66);
  color: #fff;
  cursor: pointer;
}
.viewer-close:hover { background: rgba(255, 77, 109, 0.28); }
.viewer-side {
  flex: 1;
  min-width: 250px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.viewer-kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--accent);
}
.viewer-title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--text);
}
.viewer-tag {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mute);
}
.viewer-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.viewer-thumb {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.25s;
}
.viewer-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.viewer-thumb span {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-thumb.sel { border-color: var(--accent); }
.viewer-cta {
  margin-top: auto;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: var(--glow-accent);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.viewer-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-2), var(--glow-accent); }
.viewer-cta[hidden] { display: none; }
@media (max-width: 860px) {
  .viewer { flex-direction: column; max-height: none; height: 100%; gap: 14px; }
  .viewer-overlay { padding: 14px; }
  .viewer-stage { flex: 1; min-height: 0; }
  .viewer-stage video, .viewer-stage img { max-height: 100%; }
  .viewer-side { max-width: none; min-width: 0; flex: none; }
  .viewer-strip { grid-template-columns: repeat(5, 1fr); }
  .viewer-thumb span { display: none; }
}

/* hook rail: bigger, alive without hover */
body.home .hook-card { aspect-ratio: 9 / 13; min-width: 200px; }
body.home .hook-card video { opacity: 1; }
body.home .hook-card img { opacity: 1; transition: opacity 0.4s; }
body.home .hook-card.previewing img { opacity: 0; }

/* reel tiles: poster first, hover video fades in over it */
.tile-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile-hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s;
}
.tile-live .tile-hover-video { opacity: 1; }

/* chooser: an editorial pick, not a settings list */
.chooser-head { margin: 4px 0 18px; }
.chooser-headline {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.025em;
  color: var(--text);
}
.chooser-head .chooser-intro { margin: 0; }
.chooser-auto-collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.chooser-auto-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.75);
}
.chooser-auto-hero { min-height: 150px; }
.chooser-auto-hero .style-shade {
  background: linear-gradient(90deg, rgba(7, 5, 10, 0.92) 20%, rgba(7, 5, 10, 0.45) 70%, rgba(7, 5, 10, 0.75) 100%);
}
.chooser .style-tile .style-tag,
#config-overlay .style-tile .style-tag {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
}

/* ═════ Try-one chips: a working demo one click away ═════ */
.composer-try {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 20px 18px;
}
/* Was mono, caps and tracked out. These are two product names and the word
   "try one", none of which is machine output. */
.composer-try-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-faint);
}
.composer-try-chip {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.composer-try-chip:hover {
  color: #fff;
  border-color: rgba(255, 77, 109, 0.5);
  background: rgba(255, 77, 109, 0.1);
}

/* ═════ Ambient motion: grain + breathing glow ═════ */
.film-grain {
  position: fixed;
  inset: -60px;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain-jitter 0.9s steps(4) infinite;
}
@keyframes grain-jitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-18px, 12px); }
  50% { transform: translate(14px, -20px); }
  75% { transform: translate(-10px, -8px); }
  100% { transform: translate(0, 0); }
}
body.home .bg-glow {
  animation: glow-drift 26s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; opacity: 0.03; }
  body.home .bg-glow { animation: none; }
}
@keyframes hexa-sheen {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* ═════ Drawer: comprehension + trust (config polish) ═════ */
.config-step { margin-bottom: 34px; }
.picker-desc {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 52ch;
}
.picker-desc[hidden] { display: none; }
.chip .ratio-glyph {
  display: inline-block;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1.5px solid currentColor;
  border-radius: 2.5px;
  opacity: 0.75;
}
.chip.sel {
  box-shadow: 0 0 16px rgba(255, 77, 109, 0.28);
}
.config-step .step-n { transition: background 0.3s, color 0.3s; }
.config-step.step-done .step-n {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
@keyframes step-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}
.config-step.step-nudge { animation: step-nudge 0.4s var(--ease); }
@keyframes hint-flash {
  0%, 100% { color: var(--text-mute); }
  35% { color: var(--accent); }
}
.config-hint.hint-flash { animation: hint-flash 0.9s ease; }
.config-submit-ghost {
  opacity: 0.6;
  filter: saturate(0.6);
}
.config-summary {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-mute);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.config-trust li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.config-trust li::before {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 720px) {
  .config-trust { display: none; }
  .config-summary { max-width: 180px; }
}

/* ── Free-clip offer under the composer ───────────────────────────
 * First thing under the bar, styled as a real secondary CTA: the freebie
 * is the reason a cold visitor tries the bar at all, so it pairs with
 * Create instead of trailing the hint text as an afterthought. Friction
 * killers (no card, no sign-up) sit inside the button, under the verb. */
.composer-free {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 77, 109, 0.55);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.15), rgba(255, 77, 109, 0.07));
  box-shadow: 0 6px 22px rgba(255, 77, 109, 0.12);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
    transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.25s;
}
.composer-free:hover {
  border-color: rgba(255, 77, 109, 0.95);
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.2), rgba(255, 77, 109, 0.1));
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255, 77, 109, 0.18);
}
.composer-free:disabled { opacity: 0.55; cursor: default; transform: none; }
/* It stopped being a link the moment Create started running the read itself:
 * it now describes that click rather than offering a rival one, so it loses
 * the pointer and the hover lift and keeps only the accent frame. */
.composer-free {
  text-decoration: none;
  color: inherit;
  cursor: default;
}
.composer-free:hover {
  border-color: rgba(255, 77, 109, 0.55);
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.15), rgba(255, 77, 109, 0.07));
  transform: none;
  box-shadow: 0 6px 22px rgba(255, 77, 109, 0.12);
}
/* The second free offer, quieter so the two do not compete. Research leads
 * because it is the step that decides what the clip should even say. */
.composer-free-alt {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}
.composer-free-alt:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}
.composer-free-alt .composer-free-badge { opacity: 0.75; }

/* ── Connected store picker ──
 * Quiet by default: it is a shortcut for people who connected a store, not a
 * competing call to action. Pasting a link is still the primary gesture. */
.composer-store { margin-top: 12px; }
.composer-store-toggle {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.composer-store-toggle:hover { color: var(--text); }
.composer-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.composer-store-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.composer-store-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.composer-store-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--surface-media);
}
.composer-store-card .cs-name {
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.composer-store-card .cs-price { padding: 0 9px; font-size: 11.5px; color: var(--text-faint); }
.composer-store-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }
.composer-free-badge {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
}
.composer-free-copy {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-mute);
}
.composer-free-copy strong { display: block; color: var(--text); font-weight: 700; font-size: 14.5px; }
.composer-free-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-mute); }
.composer-free-arrow { flex: 0 0 auto; color: var(--accent-soft); font-size: 16px; }

/* ═════════════════════════════════════════════════════════════
   The chain and the read (home page)

   Two sections added when research became the product rather than a side
   page. Both lean on tokens already in styles.css :root, and the read reuses
   the report components from validate.css rather than restating them, so the
   worked example on the home page and a real report cannot drift apart.
   ═════════════════════════════════════════════════════════════ */

/* ───── How it works: the rail ─────
 *
 * Replaced a 3x2 grid of six identical cards. A grid is the one shape that
 * cannot say "pipeline": every pass carried the same weight, nothing showed
 * sequence, and step three handed off to step four by wrapping onto a new
 * row. The argument is now pinned on the left and the six passes run down a
 * rail on the right, so the section performs the sequence it describes.
 *
 * Namespaced how-* throughout: .step already belongs to styles.css, and the
 * obvious names for the rest (.node, .out, .gate) are too generic to claim on
 * a page this size.
 */

.chain { position: relative; z-index: 1; padding: 96px 0 88px; }

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

/* ───── left: the argument, pinned ───── */

.how-pitch { position: sticky; top: 96px; }

/* The section head is the site's, but in a 0.92fr column rather than across
   the page, so the shared clamp tops out too large and the line breaks fight
   the hand-set ones. */
.how-pitch .c-display-l { font-size: clamp(32px, 3.6vw, 50px); }

.how-pitch .c-sub { margin-top: 20px; max-width: 46ch; }
.how-pitch .c-sub strong { color: var(--text); font-weight: 500; }

.how-cta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.how-cta-note {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--text-faint);
}

.how-cta-note b { color: var(--text-mute); font-weight: 500; }

.how-readout {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.how-readout-n { color: var(--text); font-weight: 600; }

.how-meter {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.how-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* ───── right: the pipeline ───── */

.how-pipeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 56px;
}

/* The unlit rail runs the full height; the lit one is drawn over it. Both are
   inset by the node's half height so the line starts and stops at the middle
   of the first and last nodes rather than floating past them. */
.how-pipeline::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 19px;
  width: 2px;
  background: var(--border);
}

.how-rail {
  position: absolute;
  top: 26px;
  left: 19px;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.4);
}

.how-step {
  position: relative;
  padding: 26px 0 34px;
  opacity: 0.32;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.how-step.is-lit { opacity: 1; transform: none; }

.how-node {
  position: absolute;
  left: -56px;
  top: 26px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.how-step.is-lit .how-node {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.13);
}

.how-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* The verb is the same on three of the six passes, so dimming it lets the
   object of each one carry the line: product, buyers, competitors. */
.how-step h3 .how-verb { color: var(--text-faint); font-weight: 500; }

.how-step p {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mute);
}

.how-step p strong { color: var(--text); font-weight: 500; }

/* The subtraction the whole product rests on, set as an equation rather than
   as another sentence. It is the one claim here that neither half of the
   tooling landscape can make: customer-research tools know what buyers say and
   cannot see the ads, ad-intelligence tools know the ads and cannot see the
   buyers. Writing it as prose buried it in the paragraph above. */
.how-step p.how-formula {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  max-width: none;
}
.how-step p.how-formula b {
  color: var(--accent);
  font-weight: 700;
  padding: 0 2px;
}

/* What the pass hands to the next one: a pipeline output, not a benefit
   bullet. That distinction is the whole difference between this section and
   the four-step band it replaced. */
.how-out {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-mute);
}

.how-out::before { content: "\2192"; color: var(--accent); }

/* ───── the gate: where the money starts ───── */

.how-gate {
  position: relative;
  margin: 6px 0 10px;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.how-gate::before {
  content: "";
  position: absolute;
  left: -45px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--bg-1);
  border: 2px solid var(--border-strong);
  transition: border-color 0.4s ease;
}

.how-gate.is-lit::before { border-color: var(--accent); }

.how-gate-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
  color: var(--text-faint);
}

.how-gate-label b { color: var(--text); font-weight: 600; }

.how-gate-rule { flex: 1; height: 1px; background: var(--border); }

/* The last pass is the only one that is a deliverable rather than a read, so
   it is the only one that carries the accent. */
.how-step.is-final {
  margin-left: -4px;
  padding: 26px 26px 30px;
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.05), transparent 80%);
}

.how-step.is-final .how-out {
  color: var(--accent-soft);
  border-color: rgba(255, 77, 109, 0.35);
  background: rgba(255, 77, 109, 0.13);
}

/* ───── narrower ───── */

@media (max-width: 980px) {
  .how-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Nothing to pin against once the columns stack: the pitch would stick over
     the pipeline it is meant to sit beside. */
  .how-pitch { position: static; }
  .how-readout { display: none; }
}

@media (max-width: 640px) {
  .chain { padding: 64px 0 56px; }
  .how-pipeline { padding-left: 44px; }
  .how-node { left: -44px; width: 34px; height: 34px; border-radius: 10px; }
  .how-gate::before { left: -33px; }
  /* The label wraps to two lines at this width and squeezes the rule to
     nothing, which reads as a rendering fault rather than a divider. The
     label carries the meaning on its own. */
  .how-gate-rule { display: none; }
  .how-step { padding: 20px 0 28px; }
  .how-step.is-final { padding: 22px 20px 24px; }
  .how-step p { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .how-step { opacity: 1; transform: none; transition: none; }
  .how-node, .how-gate::before, .how-meter i { transition: none; }
}

/* The reveal is a script's job. Without one, every pass is fully visible. */
html:not(.js) .how-step { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .chain-step { transition: none; }
  .chain-step:hover { transform: none; }
}

/* ───── The handoff into the read ─────
 *
 * Drawn on the peek card once the product has been named and shown. It asks
 * one question, and both answers are real destinations, so nothing here
 * auto-advances: a merchant who wants it decided and a marketer who wants the
 * controls are both first-class, and a timer would quietly serve one of them
 * the other one's product.
 */
.peek-next[hidden] { display: none; }
.peek-next {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  animation: peek-skip-in 0.5s var(--ease);
}
.peek-next-ask {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--text);
}
.peek-next-go,
.peek-next-skip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-control);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.peek-next-go strong,
.peek-next-skip strong { font-size: 14.5px; font-weight: 700; }
.peek-next-go span,
.peek-next-skip span { font-size: 12.5px; line-height: 1.45; }

.peek-next-go {
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow-accent);
}
.peek-next-go span { color: rgba(255, 255, 255, 0.86); }
.peek-next-go:hover { transform: translateY(-1px); }

.peek-next-skip {
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}
.peek-next-skip span { color: var(--text-mute); }
.peek-next-skip:hover { border-color: var(--text-faint); background: rgba(255, 255, 255, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .peek-next-go, .peek-next-skip { transition: none; }
  .peek-next-go:hover, .peek-next-skip:hover { transform: none; }
}

/* ═════ Hero entry: the two ways in ═════
 *
 * A link works for anyone selling anything anywhere, so it leads. Connecting
 * Shopify is the shortcut that removes the copy and paste for the merchants
 * who have one. The switch is a real tablist rather than two buttons that
 * swap content, so the relationship is announced instead of implied.
 */

.c-hero-micro {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
}

.entry-switch {
  position: relative;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  width: fit-content;
  max-width: 100%;
}
/* One thumb that slides, instead of three buttons that each recolour. Sized
   and positioned from the live button in studio.js, so it tracks the label
   swap at narrow widths. */
.entry-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-1);
  pointer-events: none;
  transition: transform 0.28s var(--ease), width 0.28s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .entry-thumb { transition: none; }
}
/* 44px floor. These are the first decision on the page and the most likely to
 * be tapped on a phone; 40px was close enough to look fine and small enough to
 * miss. */
.entry-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mute);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.entry-tab svg { opacity: 0.8; }
.entry-tab:hover { color: var(--text); }
/* The thumb draws the selected background; the button only changes weight and
   colour, or the two would stack into a double-lit pill. */
.entry-tab.is-on {
  color: var(--text);
  font-weight: 600;
}
.entry-tab.is-on svg { opacity: 1; color: var(--accent-soft); }

.entry-pane[hidden] { display: none; }

/* ── Photos as chips in the field row ──
   The drawer keeps the 84px tile grid, so these rules are scoped to the hero
   instance by id rather than restyling .photo-thumb everywhere. */
.photo-row { flex-wrap: wrap; gap: 10px; }
#hero-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#hero-thumbs .photo-thumb {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
#hero-thumbs .photo-thumb img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex: none;
}
/* Static, not pinned to the tile's top corner: in a chip the remove control
   reads as the last item in the row. */
#hero-thumbs .photo-x {
  position: static;
  width: 22px;
  height: 22px;
  font-size: 15px;
}
.photo-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-mute);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.photo-add:hover { border-color: rgba(255, 77, 109, 0.5); color: var(--text); }
.photo-add:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.16);
}
.photo-add-hint { font-size: 12.5px; color: var(--text-faint); }

/* ── Shopify connect ── */

.shop-form { display: block; }
/* Chrome stripped: this carries .composer-bar now and sits inside the shell,
   so its own border and fill would draw a second box inside the first. */
.shop-bar { padding: 18px 20px; }
.shop-bar input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16.5px;        /* >=16px stops iOS zooming the page on focus */
  color: var(--text);
}
.shop-bar input:focus { outline: none; }
.shop-bar input::placeholder { color: var(--text-faint); }
.shop-suffix {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-faint);
  padding-left: 4px;
}
.shop-go {
  padding: 15px 24px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--glow-accent);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.shop-go:hover { transform: translateY(-1px); box-shadow: var(--glow-accent-strong); }

/* Padded to the field row's gutter: these sit inside the shell now, and ran to
   its edge while the field above them was inset by 20px. */
.shop-note { margin: 0; padding: 0 20px; font-size: 13px; line-height: 1.55; color: var(--text-faint); }
.shop-note.is-err { color: #ff9d9d; }

/* What connecting leads to, so the ask is never a leap of faith. */
.shop-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0;
  padding: 12px 20px 18px;
}
.shop-steps span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12.5px;
  color: var(--text-mute);
}
.shop-steps span + span::before {
  content: '';
  width: 0;
}
.shop-steps span:not(:first-child) { position: relative; }

@media (max-width: 640px) {
  .entry-switch { width: 100%; }
  .entry-tab { flex: 1; justify-content: center; padding: 10px 12px; font-size: 13px; }
  .shop-go { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-go:hover { transform: none; }
}

/* ═════ Goals: the first question, in outcomes ═════
 *
 * Replaces "pick the format" as the opening screen. The style library still
 * exists and is one disclosure away; it is simply no longer the thing a
 * first-time merchant has to get right before anything can be made.
 */

.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.goal-tile {
  display: grid;
  /* Icon, then text. The third track held the price, which the tile no longer
     carries: the cost belongs on the button that spends it. */
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--tile-radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    background 0.2s var(--ease);
}
.goal-tile:hover {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  transform: translateY(-2px);
}

/* The default answer, and the one most first-time merchants should take. */
.goal-tile-lead {
  grid-column: 1 / -1;
  border-color: rgba(255, 77, 109, 0.5);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 77, 109, 0.15), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.goal-tile-lead:hover { border-color: rgba(255, 77, 109, 0.8); }

/* Drawn, so it sizes in px and takes the tile's colour instead of dragging a
   vendor's emoji palette into a two-colour design. */
.goal-ico {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.goal-tile-lead .goal-ico { color: var(--accent); }
.goal-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.goal-badge {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
}
.goal-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.goal-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-mute); }

/* The style library, folded. */
.chooser-lib { margin-top: 4px; }
.chooser-lib > summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mute);
  list-style: none;
}
.chooser-lib > summary::-webkit-details-marker { display: none; }
.chooser-lib > summary::before { content: '＋ '; color: var(--text-faint); }
.chooser-lib[open] > summary::before { content: '－ '; }
.chooser-lib > summary:hover { color: var(--text); }

.chooser-group-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body, inherit);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .goal-grid { grid-template-columns: 1fr; }
  .goal-tile { padding: 14px 16px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .goal-tile { transition: none; }
  .goal-tile:hover { transform: none; }
}

/* ── The onboarding question and the photos way in ── */

.entry-ask {
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.02em;
  color: var(--text);
}
.entry-switch { margin-top: 0; }

/* Three tabs is the tight case. At 390px the full labels wrap to two lines
 * each and the switch grows into a block, so small screens get the short ones.
 * Shrinking the type instead would have made the first decision on the page
 * the hardest thing to read. */
.entry-tab-short { display: none; }
@media (max-width: 640px) {
  .entry-tab-full { display: none; }
  .entry-tab-short { display: inline; }
}

.hero-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
  padding: 22px;
  border-radius: var(--tile-radius);
  border: 1px dashed var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.hero-drop:hover { border-color: var(--accent); background: rgba(255, 77, 109, 0.06); }
.hero-drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.16); }
.hero-drop.is-full { opacity: 0.5; pointer-events: none; }
.hero-drop .photo-drop-cta { font-size: 15px; font-weight: 700; color: var(--text); }
.hero-drop .photo-drop-hint { font-size: 12.5px; color: var(--text-mute); }

#hero-thumbs:empty { display: none; }
#hero-thumbs { display: flex; gap: 8px; margin-top: 12px; }

.hero-photos-go { margin-top: 14px; width: 100%; }

@media (max-width: 640px) {
  /* A drop zone on a phone is a tap target for the camera roll, not a place to
   * drag anything, so it gets height rather than instructions. */
  .hero-drop { min-height: 128px; }
}

/* Touch floors on the smaller composer controls. Each of these was between 25
 * and 35px, which is fine for a cursor and a miss for a thumb. Desktop keeps
 * the compact look; only pointer-coarse gets the extra height.
 *
 * This rule shipped dead: the selector list ended in a trailing comma with no
 * declaration block, so the browser discarded it and every control kept its
 * cursor-sized height. Measured 2026-08-15, uiaudit reported all four
 * selectors (35px tools, 25px try chips, 29px flip) at mobile and tablet. */
@media (pointer: coarse) {
  .composer-tools .ctool,
  .composer-tools button,
  .composer-try-chip,
  .c-monitor-flip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (pointer: coarse) {
  .reviews .closer-cta,
  .reel .gallery-more,
  .reviews a,
  [class*="gallery"] button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── The free tier, above the prices ──
 *
 * Deliberately not a fourth card in the row. A free option standing beside
 * three priced ones invites a comparison it should not be in: it is what
 * happens BEFORE anyone weighs $9 against $25, and it is the only offer here
 * that asks for nothing at all. So it gets the full width and reads first.
 */
.price-free {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 34px);
  border-radius: var(--tile-radius);
  border: 1px solid rgba(255, 77, 109, 0.45);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255, 77, 109, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: var(--shadow-2);
  text-align: left;
}
.price-free-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.012em;
  text-transform: none;
}
.price-free-title {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.price-free-sub { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-mute); }

.price-free-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.price-free-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--text);
}
.price-free-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.price-free-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--glow-accent);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.price-free-cta:hover { transform: translateY(-1px); box-shadow: var(--glow-accent-strong); }

@media (max-width: 820px) {
  .price-free { grid-template-columns: 1fr; gap: 20px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .price-free-cta:hover { transform: none; }
}

/* ═════ The work ═════
 *
 * Replaced the execution layer, which was a parts catalogue: a style shelf,
 * three cells counting cast, formats and openers, and a four-button price
 * list. Two of those cells were dead. Their chips were <span> carrying
 * .chip:hover and .chip:active, so they recoloured and scaled under a press
 * and did nothing, and all three browse buttons resolved to one screen.
 *
 * This shows the output instead, and the filters are buttons that work. The
 * tile is one press target: the media, the format it ran in, the line it
 * carries and the finding that produced the line.
 */

.work { position: relative; z-index: 1; padding: 96px 0 100px; }

.work-bar {
  margin: 28px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
}

.work-filters { display: flex; flex-wrap: wrap; gap: 8px; }

/* A real button, and it looks pressed when it is. The thing it replaced was
   styled to look interactive and was not, which is worse than plain text. */
.work-filter {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.004em;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
              background-color 0.18s var(--ease);
}
.work-filter:hover { color: var(--text); border-color: var(--border-strong); }
/* --bg-0, not --bg. There is no --bg token on this site, and var() with no
   fallback resolves to nothing, so the label inherited --text and rendered
   white on a white pill: 1:1, the selected filter invisible. */
.work-filter[aria-pressed="true"] {
  color: var(--bg-0);
  background: var(--text);
  border-color: var(--text);
}
.work-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.work-note { margin: 0; font-size: 13px; color: var(--text-faint); }
.work-note b { color: var(--text-mute); font-weight: 600; }

/* Dense, like a contact sheet. The point is that there are many reads behind
   this, not that any one image is a hero. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.work-tile {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-media);
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.work-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.work-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Letterboxed, not cropped. These are finished ads: cutting the headline off
   to fill a square would hide the only part that carries the argument. */
.work-media {
  display: block;
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  aspect-ratio: 4 / 5;
}
.work-media img,
.work-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.work-fmt {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  backdrop-filter: blur(6px);
}

.work-cap { display: block; padding: 13px 14px 15px; }
.work-line {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.work-why {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint);
}

/* The video tabs carry a name and a one-line description, not an argument, so
   they do not need the taller caption the statics use. */
.work-grid[data-kind="formats"] .work-media,
.work-grid[data-kind="openers"] .work-media { aspect-ratio: 9 / 16; }

@media (max-width: 640px) {
  .work { padding: 64px 0 72px; }
  .work-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .work-cap { padding: 11px 11px 13px; }
  .work-why { display: none; }
}

@media (pointer: coarse) {
  .work-filter { padding: 12px 16px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-tile, .work-filter { transition: none; }
  .work-tile:hover { transform: none; }
}

/* ═════ Pricing: the sticker treatment ═════
 *
 * Same markup, same data-price bindings, different object. The cards were flat
 * panels that read like every other panel on the page; these are printed
 * things, with a hard offset shadow instead of a blur and a degree of rotation
 * each. Nothing here touches a number: every figure still comes from
 * catalog/pricing.json through studio.js.
 */

.pricing {
  --ink: rgba(255, 255, 255, 0.9);
  --drop: rgba(255, 255, 255, 0.16);
}

/* ── the free card ── */

.price-free {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface-media);
  box-shadow: 7px 7px 0 var(--drop);
  transform: rotate(-0.4deg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.price-free:hover {
  transform: rotate(-0.4deg) translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--drop);
}

.price-free-tag {
  position: absolute;
  top: -15px;
  left: 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 3px 3px 0 var(--drop);
  transform: rotate(-3deg);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
}

/* Was Caveat, a whole webfont loaded for this one rule. An editorial italic
 * makes the same aside without a third family and without the doodle. */
.price-free-hand {
  position: absolute;
  top: -34px;
  right: -6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 25px;
  color: var(--accent);
  transform: rotate(-2deg);
  pointer-events: none;
}

/* It points at a card that is no longer to its left once the layout stacks. */
@media (max-width: 1100px) { .price-free-hand { display: none; } }

.price-free-list li { display: flex; align-items: center; gap: 12px; }

/* A drawn ring rather than a tick glyph, to match the printed edges. */
.price-free-list li::before,
.tier-features li::before {
  content: "\2713";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}

.price-free-cta {
  border: 2px solid var(--ink);
  border-radius: 11px;
  box-shadow: 4px 4px 0 rgba(255, 77, 109, 0.35);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.price-free-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(255, 77, 109, 0.35); }
.price-free-cta:active { transform: none; box-shadow: 2px 2px 0 rgba(255, 77, 109, 0.35); }

/* ── the three tiers ── */

.pack-track .tier {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface-media);
  box-shadow: 6px 6px 0 var(--drop);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* A different tilt each, so the row reads as three printed cards rather than
   one card repeated. */
.pack-track .tier:nth-child(1) { transform: rotate(-0.8deg); }
.pack-track .tier:nth-child(2) { transform: rotate(0.7deg); }
.pack-track .tier:nth-child(3) { transform: rotate(-1.1deg); }

.pack-track .tier:nth-child(1):hover { transform: rotate(-0.8deg) translate(-4px, -4px); }
.pack-track .tier:nth-child(2):hover { transform: rotate(0.7deg) translate(-4px, -4px); }
.pack-track .tier:nth-child(3):hover { transform: rotate(-1.1deg) translate(-4px, -4px); }
.pack-track .tier:hover { box-shadow: 10px 10px 0 var(--drop); }

.pack-track .tier-featured {
  border-color: var(--accent);
  box-shadow: 6px 6px 0 rgba(255, 77, 109, 0.4);
}
.pack-track .tier-featured:hover { box-shadow: 10px 10px 0 rgba(255, 77, 109, 0.4); }

.tier-badge {
  position: absolute;
  top: -14px;
  right: -10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 3px 3px 0 var(--drop);
  transform: rotate(6deg);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: none;
}

.tier-badge-dot { display: none; }

.tier-features li { display: flex; align-items: center; gap: 11px; }

.pack-cta {
  border: 2px solid var(--ink);
  border-radius: 11px;
  box-shadow: 4px 4px 0 var(--drop);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.tier:hover .pack-cta { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--drop); }
.tier-featured .pack-cta { background: var(--accent); color: var(--on-accent); box-shadow: 4px 4px 0 rgba(255, 77, 109, 0.35); }
.tier-featured:hover .pack-cta { box-shadow: 7px 7px 0 rgba(255, 77, 109, 0.35); }

/* Rotation plus a hard shadow needs room, or the cards clip their neighbours
   and the section's own edge. */
.pricing-inner { padding-left: 6px; padding-right: 12px; }

@media (max-width: 940px) {
  .price-free, .pack-track .tier,
  .pack-track .tier:nth-child(1), .pack-track .tier:nth-child(2), .pack-track .tier:nth-child(3) {
    transform: none;
  }
  .price-free:hover,
  .pack-track .tier:nth-child(1):hover,
  .pack-track .tier:nth-child(2):hover,
  .pack-track .tier:nth-child(3):hover {
    transform: translate(-3px, -3px);
  }
  .tier-badge { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .price-free, .pack-track .tier, .pack-cta, .price-free-cta { transition: none; }
  .price-free:hover, .pack-track .tier:hover { transform: none; }
  .pack-track .tier:nth-child(1):hover { transform: rotate(-0.8deg); }
  .pack-track .tier:nth-child(2):hover { transform: rotate(0.7deg); }
  .pack-track .tier:nth-child(3):hover { transform: rotate(-1.1deg); }
}

/* Both of these override a base rule that set properties mine did not reset,
   so the new look was landing on top of the old geometry. */

/* styles.css pins the badge to the top centre with a translate; the sticker
   version hangs off the top-right corner and must clear both. */
.pricing .tier-badge { left: auto; transform: rotate(6deg); }

/* The base bullet is an 8px absolutely positioned dot. Without clearing the
   position and the fill, the ring rendered as a solid disc with the tick
   invisible inside it. */
.price-free-list li::before {
  position: static;
  background: none;
  top: auto;
  left: auto;
}

@media (max-width: 940px) {
  .pricing .tier-badge { left: auto; right: 12px; transform: rotate(6deg); }
}