/* ============================================================================
   CTAurl HIGH-COST craft layer — deliberate, named rules (not one generic frame).
   Glass depth · tab pill · per-shot crops · ambient bleeds · section lighting.
   Prefer transform/opacity. will-change only while animating. Respects reduced-motion.
   ============================================================================ */

.craft-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* —— CreateTool section tokens —— */
.tool-stage {
  --tool-pad-x: clamp(36px, 4.2vw, 48px);
  --tool-pad-y: clamp(36px, 4vw, 44px);
  --tool-gap: 22px;
  --tool-glass: color-mix(in srgb, var(--bg-surface) 78%, transparent);
  --tool-glass-edge: color-mix(in srgb, #fff 72%, var(--border));
  --tool-inner-glow: color-mix(in srgb, var(--brand) 14%, transparent);
  --tool-shadow-deep: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --tool-radius: 20px;
  --tool-focus: var(--focus-ring);
  --preview-flash: color-mix(in srgb, var(--brand) 22%, transparent);
  perspective: 1200px;
}

.tool-aura {
  position: absolute;
  inset: -18% -12% -8% -12%;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 70% 30%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 40% at 20% 80%, color-mix(in srgb, var(--creative-iris) 22%, transparent), transparent 72%);
  filter: blur(28px);
  opacity: 0.85;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.tool-card {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #fff 92%, var(--brand-subtle)) 0%,
      var(--tool-glass) 42%,
      color-mix(in srgb, var(--bg-surface) 94%, var(--bg-muted)) 100%
    );
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--tool-glass-edge);
  border-radius: var(--tool-radius);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent) inset,
    0 2px 4px color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 14px 36px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 40px 80px var(--tool-shadow-deep),
    0 0 48px color-mix(in srgb, var(--brand) 10%, transparent);
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  transition:
    box-shadow 280ms var(--ease-standard),
    border-color 280ms var(--ease-standard);
}

.tool-card[data-mode="qr"] {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--tool-glass-edge));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent) inset,
    0 2px 4px color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 14px 36px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 40px 80px var(--tool-shadow-deep),
    0 0 64px color-mix(in srgb, var(--brand) 18%, transparent);
}

.tool-card-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      125deg,
      transparent 0%,
      color-mix(in srgb, #fff 55%, transparent) 28%,
      transparent 52%,
      color-mix(in srgb, var(--brand) 8%, transparent) 78%,
      transparent 100%
    );
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.tool-card-inner-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    inset 0 -40px 60px -20px var(--tool-inner-glow);
  pointer-events: none;
  opacity: 0.9;
}

.tool-card[data-mode="qr"] .tool-card-inner-glow {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
    inset 0 -48px 72px -16px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Tabs + sliding brand pill indicator */
.tool-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  padding-inline: var(--tool-pad-x);
  gap: 4px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-muted) 70%, var(--bg-surface)),
      color-mix(in srgb, var(--bg-muted) 25%, var(--bg-surface))
    );
}

.tool-tab-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 40%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #0D9D3F));
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 55%, transparent);
  transform: translateX(0);
  transition: transform 280ms var(--ease-standard), width 280ms var(--ease-standard);
  pointer-events: none;
  z-index: 2;
}

.tool-tabs button {
  position: relative;
  z-index: 1;
  font-size: 0.8125rem;
  font-weight: 650;
  min-height: 56px;
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-2);
  margin-bottom: -1px;
  transition:
    color var(--motion-hover) var(--ease-standard),
    background var(--motion-hover) var(--ease-standard);
}

.tool-tabs button:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-subtle) 35%, transparent);
}

.tool-tabs button .tab-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--bg-muted) 80%, transparent);
  color: var(--text-secondary);
  vertical-align: -1px;
  transition: background var(--motion-hover) var(--ease-standard), color var(--motion-hover) var(--ease-standard);
}

.tool-tabs button[aria-selected="true"] {
  border-color: transparent; /* indicator handles underline */
  color: var(--link);
}

.tool-tabs button[aria-selected="true"] .tab-ico {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}

.tool-tabs button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
  border-radius: 8px 8px 0 0;
}

/* Body — generous Stripe/Linear rhythm */
.tool-body {
  position: relative;
  z-index: 1;
  padding: var(--tool-pad-y) var(--tool-pad-x) calc(var(--tool-pad-y) + 8px);
  display: flex;
  flex-direction: column;
  gap: var(--tool-gap);
}

.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.field-shell {
  position: relative;
  display: block;
}

.field-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--bg-surface) 92%, var(--bg-muted)));
  padding: 15px 16px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  transition:
    border-color var(--motion-hover) var(--ease-standard),
    box-shadow var(--motion-hover) var(--ease-standard),
    background var(--motion-hover) var(--ease-standard);
}

.field-input:hover {
  border-color: color-mix(in srgb, var(--border-strong) 60%, var(--brand));
}

.field-input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent),
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset;
}

.field-focus-ring {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: opacity 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.field-shell:focus-within .field-focus-ring {
  opacity: 1;
  box-shadow: 0 0 24px color-mix(in srgb, var(--brand) 22%, transparent);
}

.field-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23355247' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  font-weight: 650;
}

/* Typed preview — morph between link & QR */
.link-preview {
  --preview-pad: 18px 20px;
  position: relative;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bg-muted) 70%, #fff) 0%,
      color-mix(in srgb, var(--brand-subtle) 65%, var(--bg-muted)) 100%
    );
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--brand));
  border-radius: 14px;
  padding: var(--preview-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  min-height: 76px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    0 8px 20px color-mix(in srgb, var(--brand) 8%, transparent);
  transition:
    min-height 320ms var(--ease-standard),
    background 320ms var(--ease-standard),
    border-color 320ms var(--ease-standard),
    box-shadow 320ms var(--ease-standard);
}

.link-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--preview-flash), transparent);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.link-preview[data-preview-state="flash"]::before {
  animation: preview-sheen 480ms var(--ease-standard);
}

@keyframes preview-sheen {
  0% { transform: translateX(-120%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.preview-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.preview-url {
  display: block;
  font-weight: 750;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
  color: var(--link);
  word-break: break-all;
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}

.link-preview[data-preview-state="updating"] .preview-url {
  opacity: 0.45;
  transform: translateY(2px);
}

.preview-glyph {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.preview-chip-link,
.preview-qr {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity 280ms var(--ease-standard),
    transform 320ms var(--ease-standard);
}

.icon-chip--brand {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 800;
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--brand) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}

.preview-qr {
  color: var(--on-brand);
  background: var(--brand);
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.72) rotate(-8deg);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 40%, transparent);
}

.preview-qr svg { width: 26px; height: 26px; }

.tool-card[data-mode="qr"] .preview-chip-link {
  opacity: 0;
  transform: scale(0.72) rotate(8deg);
}

.tool-card[data-mode="qr"] .preview-qr {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.tool-card[data-mode="qr"] .link-preview {
  min-height: 92px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--brand-subtle) 80%, #fff),
      color-mix(in srgb, var(--bg-muted) 40%, var(--brand-subtle))
    );
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}

.tool-card[data-mode="qr"] #preview-label {
  color: var(--link);
}

.tool-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 8px;
  transition: color var(--motion-hover) var(--ease-standard);
}

.tool-check:hover { color: var(--text-primary); }

.tool-check input {
  margin-top: 3px;
  accent-color: var(--brand);
  width: 17px;
  height: 17px;
}

.btn-create {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  gap: 10px;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 30%, transparent) inset,
    0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent);
}

.btn-create::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #fff 35%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: none;
}

.btn-create:hover::after {
  animation: btn-sheen 700ms var(--ease-standard);
}

@keyframes btn-sheen {
  to { transform: translateX(120%); }
}

.btn-create-arrow {
  display: inline-block;
  transition: transform var(--motion-hover) var(--ease-standard);
}

.btn-create:hover .btn-create-arrow {
  transform: translateX(3px);
}

.tool-note {
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.55;
}

.under-tool {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  margin-top: 18px;
  color: var(--text-secondary);
}

/* Hero blob depth bump */
.hero-blobs .blob--mint {
  opacity: 0.62;
  filter: blur(64px);
}

.hero-blobs .blob--iris {
  opacity: 0.5;
  filter: blur(58px);
}

.hero .blob {
  transform: translate3d(0, 0, 0);
}

/* ============================================================================
   PRODUCT SCREENS — per-image treatment (NOT one scale for all)
   ============================================================================ */

.product-frame {
  --frame-pad: 14px;
  --frame-radius: 18px;
  --bleed-color: color-mix(in srgb, var(--brand) 35%, transparent);
  --shot-scale: 1;
  --shot-origin-x: center;
  --shot-origin-y: top;
  --shot-pos-x: center;
  --shot-pos-y: top;
  position: relative;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-muted) 55%, var(--bg-surface)),
      var(--bg-surface) 42%
    );
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--text-primary));
  border-radius: var(--frame-radius);
  overflow: hidden;
  padding: 0 var(--frame-pad) var(--frame-pad);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 12px 32px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 36px 80px color-mix(in srgb, var(--text-primary) 12%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 50%, transparent) inset;
  transition: box-shadow 320ms var(--ease-standard), transform 320ms var(--ease-standard);
}

.product-frame:hover {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 16px 40px color-mix(in srgb, var(--text-primary) 10%, transparent),
    0 44px 96px color-mix(in srgb, var(--text-primary) 14%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent) inset,
    0 0 40px color-mix(in srgb, var(--bleed-color) 40%, transparent);
}

.product-bleed {
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.55;
  background: radial-gradient(ellipse at 50% 0%, var(--bleed-color), transparent 70%);
}

.product-bleed--mint { --bleed-color: color-mix(in srgb, var(--brand) 55%, #9EF0B8); }
.product-bleed--jade { --bleed-color: color-mix(in srgb, var(--creative-jade) 50%, var(--brand)); }
.product-bleed--iris { --bleed-color: color-mix(in srgb, var(--creative-iris) 60%, #E8D0E0); }
.product-bleed--amber { --bleed-color: color-mix(in srgb, var(--creative-amber) 45%, #F5E0C0); }
.product-bleed--brand-dark {
  inset: -10% -15% auto -15%;
  height: 40%;
  opacity: 0.4;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--brand) 50%, transparent), transparent 70%);
}

.product-chrome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 calc(var(--frame-pad) * -1) var(--frame-pad);
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-muted) 80%, var(--bg-surface)),
      color-mix(in srgb, var(--bg-muted) 28%, var(--bg-surface))
    );
}

.chrome-traffic {
  display: none; /* reserved for future traffic-light bar styling */
}

.product-shot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--bg-muted);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 8px 24px color-mix(in srgb, var(--text-primary) 6%, transparent);
  clip-path: inset(0 round 12px);
}

.shot-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.product-shot img,
.shot-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--shot-pos-x) var(--shot-pos-y);
  transform: scale(var(--shot-scale));
  transform-origin: var(--shot-origin-x) var(--shot-origin-y);
  display: block;
  will-change: auto;
}

/* Per-shot hand-tuned crops */
.product-frame--s01,
.product-shot--s01 {
  --shot-scale: 1;
  --shot-origin-x: center;
  --shot-origin-y: top;
  --shot-pos-x: center;
  --shot-pos-y: top;
  --bleed-color: color-mix(in srgb, var(--creative-tide) 40%, transparent);
  --frame-radius: 20px;
}

.product-frame--s04,
.product-shot--s04 {
  --shot-scale: 1;
  --shot-origin-x: center;
  --shot-origin-y: top;
  --shot-pos-x: center;
  --shot-pos-y: top;
  --bleed-color: color-mix(in srgb, var(--creative-amber) 35%, transparent);
}

.product-frame--s06,
.product-shot--s06 {
  --shot-scale: 1.02;
  --shot-origin-x: center;
  --shot-origin-y: center;
  --shot-pos-x: center;
  --shot-pos-y: center;
  --bleed-color: color-mix(in srgb, var(--creative-plum) 42%, transparent);
}

.product-frame--s08,
.product-shot--s08,
.product-frame--s08-dark {
  --shot-scale: 1;
  --shot-origin-x: center;
  --shot-origin-y: top;
  --shot-pos-x: center;
  --shot-pos-y: top;
  --bleed-color: color-mix(in srgb, var(--creative-iris) 40%, transparent);
}

.product-frame--s01 .product-shot {
  aspect-ratio: 16 / 10.2;
  mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
}

.product-frame--s04 .product-shot {
  aspect-ratio: 16 / 10.15;
}

.product-frame--s06 .product-shot {
  aspect-ratio: 16 / 10.4;
}

.product-frame--s08 .product-shot,
.product-frame--s08-dark .product-shot {
  aspect-ratio: 16 / 10;
}

.product-shot--use { min-height: 380px; }

.product-frame--on-dark {
  background: linear-gradient(180deg, #18241D, #0E1712 52%);
  border-color: color-mix(in srgb, #fff 16%, transparent);
  box-shadow:
    0 4px 14px color-mix(in srgb, #000 24%, transparent),
    0 32px 80px color-mix(in srgb, #000 48%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 10%, transparent) inset,
    0 0 60px color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Ken-burns lite initial state (GSAP drives to rest) */
.product-frame[data-kenburns] .shot-mask img {
  transform: scale(1.02);
}

.product-frame.is-revealed[data-kenburns] .shot-mask img {
  transform: scale(var(--shot-scale));
  transition: transform 1.15s var(--ease-standard);
}

/* ============================================================================
   HOW ROWS — editorial Slack storytelling
   ============================================================================ */

.how-section {
  --how-accent: var(--brand);
}

.how-row {
  position: relative;
}

.how-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 80%, var(--brand)) 20%,
    color-mix(in srgb, var(--border) 80%, var(--brand)) 80%,
    transparent
  );
  opacity: 0.7;
  pointer-events: none;
}

.how-row:last-child::after { display: none; }

.how-copy {
  --how-line: var(--brand);
  border-left: 3px solid transparent;
  background-image: linear-gradient(var(--how-line), var(--how-line));
  background-size: 3px 0%;
  background-position: left top;
  background-repeat: no-repeat;
  transition: background-size 700ms var(--ease-standard);
}

.how-row.is-inview .how-copy,
.how-row[data-reveal="shown"] .how-copy,
[data-reveal="shown"] .how-copy {
  background-size: 3px 100%;
}

.how-row:nth-child(1) .how-copy { --how-line: var(--creative-tide); }
.how-row:nth-child(2) .how-copy { --how-line: var(--creative-amber); }
.how-row:nth-child(3) .how-copy { --how-line: var(--creative-plum); }

.how-index {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-primary) 14%, transparent),
    color-mix(in srgb, var(--text-primary) 4%, transparent)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.how-row--soft::before {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--bg-muted) 90%, var(--brand-subtle)),
      var(--bg-muted)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent),
    0 20px 48px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* ============================================================================
   PAIN CARDS — unique lighting / accent draw
   ============================================================================ */

.pain-band {
  position: relative;
  overflow: hidden;
}

.pain-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 8% 0%, color-mix(in srgb, var(--creative-coral) 12%, transparent), transparent),
    radial-gradient(ellipse 35% 45% at 55% 10%, color-mix(in srgb, var(--creative-amber) 10%, transparent), transparent),
    radial-gradient(ellipse 40% 50% at 92% 100%, color-mix(in srgb, var(--creative-tide) 12%, transparent), transparent);
  pointer-events: none;
}

.pain-card {
  position: relative;
  border-top: 1px solid transparent;
  padding-top: 28px;
  transition: transform 280ms var(--ease-standard);
}

.pain-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--border-strong),
    color-mix(in srgb, var(--brand) 50%, var(--border-strong)),
    var(--border-strong)
  );
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 500ms var(--ease-standard);
}

.pain-card[data-reveal="shown"]::before,
.pain-card:hover::before {
  transform: scaleX(1);
}

.pain-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  border-radius: 0 0 3px 0;
  background: var(--brand);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
}

.pain-card[data-reveal="shown"] .pain-accent {
  opacity: 1;
  transform: scaleX(1);
}

.pain-card:nth-child(1) .pain-accent { background: var(--creative-coral); }
.pain-card:nth-child(2) .pain-accent { background: var(--creative-amber); }
.pain-card:nth-child(3) .pain-accent { background: var(--creative-tide); }

.pain-card:hover {
  transform: translateY(-3px);
}

.story-pill {
  transition:
    background var(--motion-hover) var(--ease-standard),
    border-color var(--motion-hover) var(--ease-standard),
    color var(--motion-hover) var(--ease-standard),
    box-shadow var(--motion-hover) var(--ease-standard);
}

.pain-card:hover .story-pill {
  background: var(--brand-subtle);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  color: var(--link);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 12%, transparent);
}

/* ============================================================================
   TRUST STRIP — soft brand pulse dots
   ============================================================================ */

.trust-strip {
  position: relative;
}

.trust-strip > span::before {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent);
  animation: trust-dot 3.2s ease-in-out infinite;
}

.trust-strip > span:nth-child(2)::before { animation-delay: 0.4s; }
.trust-strip > span:nth-child(3)::before { animation-delay: 0.8s; }
.trust-strip > span:nth-child(4)::before { animation-delay: 1.2s; }

@keyframes trust-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); opacity: 0.7; }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 0%, transparent); opacity: 1; }
}

/* ============================================================================
   USE-CASES — plate-reactive ambient
   ============================================================================ */

.use-visual {
  position: relative;
}

.use-visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% -8% -6%;
  z-index: 0;
  border-radius: 28px;
  filter: blur(28px);
  opacity: 0.45;
  pointer-events: none;
  transition: background 320ms var(--ease-standard), opacity 320ms var(--ease-standard);
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 70%);
}

.use-visual[data-plate="sell"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%);
}
.use-visual[data-plate="book"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--creative-tide) 40%, transparent), transparent 70%);
}
.use-visual[data-plate="try"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--creative-amber) 40%, transparent), transparent 70%);
}
.use-visual[data-plate="read"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--creative-plum) 40%, transparent), transparent 70%);
}

.use-visual .product-frame { position: relative; z-index: 1; }

.use-tabs {
  position: relative;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent);
}

.use-tabs .tab[aria-selected="true"] {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--text-primary) 18%, transparent);
}

.use-link {
  position: relative;
  padding: 10px 14px;
  margin-top: var(--space-6);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-subtle) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
}

/* ============================================================================
   QR DARK BAND — radial brand bloom + timeline pulse
   ============================================================================ */

.qr-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 88% 18%, color-mix(in srgb, var(--creative-plum) 28%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 55% at 12% 85%, color-mix(in srgb, var(--creative-iris) 24%, transparent), transparent 60%),
    radial-gradient(ellipse 30% 40% at 50% 50%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
    #0A1610;
}

.qr-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 3%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}

.qr-layout { position: relative; z-index: 1; }

.qr-timeline span {
  position: relative;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent);
}

.qr-timeline li[data-reveal="shown"] span,
.qr-band.is-inview .qr-timeline span {
  animation: qr-node 2.8s ease-in-out infinite;
}

.qr-timeline li:nth-child(2) span { animation-delay: 0.35s; }
.qr-timeline li:nth-child(3) span { animation-delay: 0.7s; }

@keyframes qr-node {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 0%, transparent); }
}

/* ============================================================================
   COMPARISON — winner elevation
   ============================================================================ */

.compare-winner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      var(--brand-subtle),
      color-mix(in srgb, var(--brand-subtle) 60%, #fff)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent),
    0 12px 28px color-mix(in srgb, var(--brand) 12%, transparent);
}

.compare-winner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: winner-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes winner-sheen {
  0%, 70%, 100% { transform: translateX(-100%); }
  85% { transform: translateX(100%); }
}

/* ============================================================================
   CLOSING — mesh lighting
   ============================================================================ */

.closing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 60% at 20% 20%, color-mix(in srgb, #fff 28%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 50% at 85% 80%, color-mix(in srgb, var(--creative-berry) 25%, transparent), transparent 60%),
    var(--creative-iris);
}

.closing::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(
      from 210deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, #fff 12%, transparent) 60deg,
      transparent 120deg,
      color-mix(in srgb, var(--creative-plum) 18%, transparent) 200deg,
      transparent 280deg
    );
  opacity: 0.55;
  animation: closing-rotate 28s linear infinite;
  pointer-events: none;
}

@keyframes closing-rotate {
  to { transform: rotate(360deg); }
}

.closing .wrap { position: relative; z-index: 1; }

/* Trust rail polish */
.trust-rail {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 80%, #fff), var(--bg-raised));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}

.trust-item::before {
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* FAQ subtle hover */
.faq summary {
  transition: color var(--motion-hover) var(--ease-standard);
}
.faq summary:hover { color: var(--link); }

/* Header — solid black (no light glass edge) */
.site-header {
  box-shadow: 0 8px 28px color-mix(in srgb, #000 28%, transparent);
}

/* ============================================================================
   Responsive craft overrides
   ============================================================================ */

@media (max-width: 900px) {
  .tool-stage {
    --tool-pad-x: 28px;
    --tool-pad-y: 28px;
    --tool-gap: 18px;
  }
  .field-row { grid-template-columns: 1fr; }
  .product-frame--s01, .product-shot--s01 { --shot-scale: 1; }
  .product-frame--s04, .product-shot--s04 { --shot-scale: 1; }
  .product-frame--s06, .product-shot--s06 { --shot-scale: 1; }
  .product-frame--s08, .product-shot--s08, .product-frame--s08-dark { --shot-scale: 1; }
  .product-shot--use { min-height: 0; }
  .tool-aura { opacity: 0.55; }
}

@media (max-width: 599px) {
  .tool-stage {
    --tool-pad-x: 22px;
    --tool-pad-y: 24px;
  }
  .tool-tabs { padding-inline: 16px; }
  .tool-tabs button { font-size: 0.75rem; min-height: 48px; }
  .preview-url { font-size: 1rem; }
  .closing::before { animation: none; opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-tab-indicator,
  .link-preview,
  .preview-chip-link,
  .preview-qr,
  .preview-url,
  .btn-create-arrow,
  .pain-card,
  .product-frame,
  .how-copy {
    transition: none !important;
  }
  .trust-strip > span::before,
  .qr-timeline span,
  .compare-winner::before,
  .closing::before,
  .btn-create::after,
  .link-preview::before {
    animation: none !important;
  }
  .product-frame[data-kenburns] .shot-mask img,
  .product-frame.is-revealed[data-kenburns] .shot-mask img {
    transform: scale(var(--shot-scale)) !important;
    transition: none !important;
  }
  .tool-card,
  .tool-aura,
  .blob {
    transform: none !important;
  }
}

/* pointer-reactive highlight */
.product-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(600px circle at var(--pointer-x, 50%) var(--pointer-y, 40%), color-mix(in srgb, #fff 18%, transparent), transparent 42%);
  transition: opacity 220ms var(--ease-standard);
  mix-blend-mode: soft-light;
}
.product-frame:hover::after { opacity: 1; }
.product-frame--on-dark::after {
  background: radial-gradient(600px circle at var(--pointer-x, 50%) var(--pointer-y, 40%), color-mix(in srgb, var(--brand) 22%, transparent), transparent 42%);
}

/* ============================================================================
   MULTI-ACCENT MARKETING LAYER — Slack-pattern storytelling
   Brand green (#1ED760) stays on primary CTAs / CreateTool.
   Iris · Tide · Amber · Coral · Plum drive section color.
   ============================================================================ */

/* Hero: mint + iris + amber blobs */
.hero-blobs .blob--mint {
  opacity: 0.68;
  filter: blur(64px);
}
.hero-blobs .blob--iris {
  opacity: 0.58;
  filter: blur(58px);
}
.hero-blobs .blob--amber {
  opacity: 0.55;
  filter: blur(52px);
}

/* Tool aura: green CTA glow + iris + amber secondary */
.tool-aura {
  background:
    radial-gradient(ellipse 55% 50% at 70% 30%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 40% at 18% 78%, color-mix(in srgb, var(--creative-iris) 28%, transparent), transparent 72%),
    radial-gradient(ellipse 35% 35% at 88% 78%, color-mix(in srgb, var(--creative-amber) 20%, transparent), transparent 70%);
}

/* Extra product bleed variants */
.product-bleed--tide { --bleed-color: color-mix(in srgb, var(--creative-tide) 62%, #A8C4E8); opacity: 0.72; }
.product-bleed--coral { --bleed-color: color-mix(in srgb, var(--creative-coral) 50%, #F0C8BC); }
.product-bleed--plum { --bleed-color: color-mix(in srgb, var(--creative-plum) 62%, #D4C8F0); opacity: 0.72; }
.product-bleed--plum-dark {
  inset: -10% -15% auto -15%;
  height: 45%;
  opacity: 0.55;
  background:
    radial-gradient(ellipse at 30% 100%, color-mix(in srgb, var(--creative-plum) 55%, transparent), transparent 70%),
    radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--creative-iris) 40%, transparent), transparent 65%);
}
.product-bleed--iris { --bleed-color: color-mix(in srgb, var(--creative-iris) 65%, #E8D0E0); opacity: 0.65; }
.product-bleed--amber { --bleed-color: color-mix(in srgb, var(--creative-amber) 55%, #F5E0C0); opacity: 0.65; }
.product-bleed--mint { --bleed-color: color-mix(in srgb, var(--brand) 55%, #9EF0B8); }

/* Per-shot bleed color override — less all-green */
.product-frame--s01,
.product-shot--s01 {
  --bleed-color: color-mix(in srgb, var(--creative-tide) 72%, transparent);
}
.product-frame--s04,
.product-shot--s04 {
  --bleed-color: color-mix(in srgb, var(--creative-amber) 42%, transparent);
}
.product-frame--s06,
.product-shot--s06 {
  --bleed-color: color-mix(in srgb, var(--creative-plum) 72%, transparent);
}
.product-frame--s08,
.product-shot--s08,
.product-frame--s08-dark {
  --bleed-color: color-mix(in srgb, var(--creative-iris) 42%, transparent);
}

.product-frame--on-dark {
  box-shadow:
    0 4px 14px color-mix(in srgb, #000 24%, transparent),
    0 32px 80px color-mix(in srgb, #000 48%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 10%, transparent) inset,
    0 0 60px color-mix(in srgb, var(--creative-plum) 18%, transparent);
}

/* HOW — cycle tide / amber / plum (not brand/jade) */
.how-section { --how-accent: var(--creative-tide); }

.how-row::after {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 70%, var(--how-accent, var(--creative-tide))) 20%,
    color-mix(in srgb, var(--border) 70%, var(--how-accent, var(--creative-tide))) 80%,
    transparent
  );
}

.how-row[data-accent="tide"] { --how-accent: var(--creative-tide); }
.how-row[data-accent="amber"] { --how-accent: var(--creative-amber); }
.how-row[data-accent="plum"] { --how-accent: var(--creative-plum); }

.how-row[data-accent="tide"] .how-copy { --how-line: var(--creative-tide); }
.how-row[data-accent="amber"] .how-copy { --how-line: var(--creative-amber); }
.how-row[data-accent="plum"] .how-copy { --how-line: var(--creative-plum); }

.how-row:nth-child(1) .how-copy { --how-line: var(--creative-tide); }
.how-row:nth-child(2) .how-copy { --how-line: var(--creative-amber); }
.how-row:nth-child(3) .how-copy { --how-line: var(--creative-plum); }

.how-index {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.how-row[data-accent="tide"] .how-index,
.how-row:nth-child(1) .how-index {
  color: color-mix(in srgb, var(--creative-tide) 72%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--creative-tide) 72%, transparent);
}
.how-row[data-accent="amber"] .how-index,
.how-row:nth-child(2) .how-index {
  color: color-mix(in srgb, var(--creative-amber) 78%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--creative-amber) 78%, transparent);
}
.how-row[data-accent="plum"] .how-index,
.how-row:nth-child(3) .how-index {
  color: color-mix(in srgb, var(--creative-plum) 72%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--creative-plum) 72%, transparent);
}

.how-row--soft::before {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--mkt-amber-soft) 85%, var(--bg-muted)),
      color-mix(in srgb, var(--bg-muted) 88%, var(--creative-plum))
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--creative-amber) 18%, var(--border)),
    0 20px 48px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* PAIN — coral / amber / tide */
.pain-band::before {
  background:
    radial-gradient(ellipse 40% 50% at 8% 0%, color-mix(in srgb, var(--creative-coral) 14%, transparent), transparent),
    radial-gradient(ellipse 35% 45% at 55% 10%, color-mix(in srgb, var(--creative-amber) 12%, transparent), transparent),
    radial-gradient(ellipse 40% 50% at 92% 100%, color-mix(in srgb, var(--creative-tide) 14%, transparent), transparent);
}

.pain-card::before {
  background: linear-gradient(
    90deg,
    var(--border-strong),
    color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 55%, var(--border-strong)),
    var(--border-strong)
  );
}

.pain-card[data-accent="coral"] { --pain-accent-color: var(--creative-coral); }
.pain-card[data-accent="amber"] { --pain-accent-color: var(--creative-amber); }
.pain-card[data-accent="tide"] { --pain-accent-color: var(--creative-tide); }

.pain-accent {
  width: 56px;
  height: 4px;
  border-radius: 0 0 4px 0;
  background: var(--pain-accent-color, var(--creative-coral));
}

.pain-card:nth-child(1) .pain-accent,
.pain-card[data-accent="coral"] .pain-accent { background: var(--creative-coral); }
.pain-card:nth-child(2) .pain-accent,
.pain-card[data-accent="amber"] .pain-accent { background: var(--creative-amber); }
.pain-card:nth-child(3) .pain-accent,
.pain-card[data-accent="tide"] .pain-accent { background: var(--creative-tide); }

.pain-card:hover .story-pill {
  background: color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 14%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 40%, var(--border));
  color: color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 70%, var(--text-primary));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 14%, transparent);
}

.pain-card[data-accent="coral"]:hover .story-pill {
  background: var(--mkt-coral-soft);
  border-color: color-mix(in srgb, var(--creative-coral) 40%, var(--border));
  color: var(--creative-coral);
}
.pain-card[data-accent="amber"]:hover .story-pill {
  background: var(--mkt-amber-soft);
  border-color: color-mix(in srgb, var(--creative-amber) 40%, var(--border));
  color: color-mix(in srgb, var(--creative-amber) 70%, #2A1700);
}
.pain-card[data-accent="tide"]:hover .story-pill {
  background: var(--mkt-tide-soft);
  border-color: color-mix(in srgb, var(--creative-tide) 40%, var(--border));
  color: var(--creative-tide);
}

/* TRUST STRIP — multi pulse */
.trust-strip > span[data-accent="mint"]::before {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent);
  animation: trust-dot-mint 3.2s ease-in-out infinite;
}
.trust-strip > span[data-accent="tide"]::before {
  animation: trust-dot-tide 3.2s ease-in-out infinite;
  animation-delay: 0.4s;
}
.trust-strip > span[data-accent="amber"]::before {
  animation: trust-dot-amber 3.2s ease-in-out infinite;
  animation-delay: 0.8s;
}
.trust-strip > span[data-accent="plum"]::before {
  animation: trust-dot-plum 3.2s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes trust-dot-mint {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); opacity: 0.75; }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 0%, transparent); opacity: 1; }
}
@keyframes trust-dot-tide {
  0%, 100% { box-shadow: 0 0 0 0 transparent; opacity: 0.75; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}
@keyframes trust-dot-amber {
  0%, 100% { box-shadow: 0 0 0 0 transparent; opacity: 0.75; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}
@keyframes trust-dot-plum {
  0%, 100% { box-shadow: 0 0 0 0 transparent; opacity: 0.75; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}

/* USE-CASES — stronger multi ambient */
.use-visual::before {
  opacity: 0.55;
}
.use-visual[data-plate="sell"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%);
}
.use-visual[data-plate="book"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--creative-tide) 48%, transparent), transparent 70%);
}
.use-visual[data-plate="try"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--creative-amber) 78%, transparent), transparent 70%);
}
.use-visual[data-plate="read"]::before {
  background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--creative-plum) 48%, transparent), transparent 70%);
}

/* QR DARK BAND — iris + plum (not all green) */
.qr-band {
  background:
    radial-gradient(ellipse 55% 70% at 88% 18%, color-mix(in srgb, var(--creative-plum) 32%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 55% at 12% 85%, color-mix(in srgb, var(--creative-iris) 28%, transparent), transparent 60%),
    radial-gradient(ellipse 30% 40% at 50% 50%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
    #0A1610;
}

.qr-timeline span {
  background: color-mix(in srgb, var(--creative-iris) 14%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--creative-plum) 35%, transparent);
}

.qr-timeline li[data-accent="iris"] span { animation-name: qr-node-iris; }
.qr-timeline li[data-accent="plum"] span { animation-name: qr-node-plum; }
.qr-timeline li[data-accent="amber"] span { animation-name: qr-node-amber; }

.qr-timeline li[data-reveal="shown"] span,
.qr-band.is-inview .qr-timeline span {
  animation-duration: 2.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes qr-node-iris {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes qr-node-plum {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes qr-node-amber {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.qr-timeline li:not(:last-child)::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--creative-iris) 45%, transparent),
    color-mix(in srgb, var(--creative-plum) 40%, transparent)
  );
}

/* —— Premium custom dropdowns (CreateTool domain + link language) —— */
.premium-dd {
  position: relative;
  width: 100%;
  z-index: 40;
  font-family: var(--font-latin, Inter, ui-sans-serif, system-ui, sans-serif);
}
.premium-dd__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.premium-dd__trigger.field-input {
  padding-right: 36px;
}
.premium-dd__value {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 650;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.premium-dd__badge,
.premium-dd__code {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #1ED760) 16%, transparent);
  color: color-mix(in srgb, var(--brand, #1ED760) 70%, #0b0f0d);
  line-height: 1;
}
.premium-dd__code {
  background: color-mix(in srgb, #0b0f0d 8%, transparent);
  color: var(--text-secondary, #3d4650);
}
.premium-dd__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  transition: transform 0.15s ease;
  pointer-events: none;
}
.premium-dd.is-open .premium-dd__chevron { transform: translateY(-50%) rotate(180deg); }

/* —— Premium CreateTool domain dropdown: wide light panel, langs RIGHT column —— */
.premium-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #FFFEFB;
  border: 1px solid color-mix(in srgb, var(--border, #d7ddd8) 90%, #0b0f0d);
  border-radius: 16px;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 90%, transparent) inset,
    0 4px 14px color-mix(in srgb, #0b0f0d 7%, transparent),
    0 28px 56px color-mix(in srgb, #0b0f0d 14%, transparent);
  z-index: 90;
  max-height: min(360px, 60vh);
  overflow: auto;
  color: var(--text-primary, #121816);
}
.premium-dd__menu[hidden] { display: none !important; }

/* Wide domain menu: domains LEFT · languages RIGHT (column, not chips above) */
.premium-dd--domain .premium-dd__menu {
  left: 0;
  right: auto;
  width: min(460px, calc(100vw - 28px));
  min-width: min(460px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: stretch;
  gap: 0;
  padding: 10px;
  max-height: min(300px, 52vh);
  overflow: hidden;
}
.premium-dd--domain .premium-dd__options {
  grid-column: 1;
  grid-row: 1;
  list-style: none;
  margin: 0;
  padding: 2px 6px 2px 2px;
  overflow-y: auto;
  max-height: min(280px, 48vh);
  scrollbar-width: thin;
}
.premium-dd--domain .premium-dd__langbar {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 0 8px;
  padding: 2px 2px 2px 10px;
  border-bottom: 0;
  border-left: 1px solid color-mix(in srgb, var(--border, #d7ddd8) 85%, transparent);
  overflow: visible;
}
.premium-dd__langbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #d7ddd8) 85%, transparent);
}
.premium-dd__langchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #d7ddd8) 90%, transparent);
  background: #fff;
  color: var(--text-secondary, #3d4650);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.premium-dd--domain .premium-dd__langchip {
  width: 100%;
  justify-content: space-between;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  font-size: 0.7rem;
}
.premium-dd__langchip:hover,
.premium-dd__langchip:focus-visible {
  border-color: color-mix(in srgb, var(--brand, #1ED760) 45%, var(--border, #d7ddd8));
  color: var(--text-primary, #121816);
  outline: none;
}
.premium-dd__langchip.is-active {
  background: color-mix(in srgb, var(--brand, #1ED760) 16%, #fff);
  border-color: color-mix(in srgb, var(--brand, #1ED760) 50%, transparent);
  color: color-mix(in srgb, var(--brand, #1ED760) 35%, #0b0f0d);
}
.premium-dd__langchip-code {
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.premium-dd__options {
  list-style: none;
  margin: 0;
  padding: 0;
}
.premium-dd__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary, #121816);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.premium-dd__option:hover,
.premium-dd__option:focus-visible {
  background: color-mix(in srgb, var(--bg-muted, #f3f5f3) 92%, var(--brand, #1ED760));
  color: var(--text-primary, #121816);
  outline: none;
}
.premium-dd__option.is-active {
  background: color-mix(in srgb, var(--brand, #1ED760) 14%, #fff);
  color: var(--text-primary, #121816);
  font-weight: 650;
}
.premium-dd__option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.premium-dd__option-badge,
.premium-dd__option-code {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--brand, #1ED760) 55%, #0b0f0d);
}
.premium-dd__option.is-active .premium-dd__option-badge,
.premium-dd__option.is-active .premium-dd__option-code {
  color: var(--brand, #1ED760);
}

.field-row--tool-meta {
  display: none; /* language folded into domain dropdown */
}
.field--tool-lang { display: none; }
.premium-dd--on-light .premium-dd__trigger:focus-visible {
  outline: 2px solid var(--brand, #1ED760);
  outline-offset: 2px;
}

/* Don’t clip the wide domain menu */
.tool-card:has(.premium-dd.is-open),
.create-split:has(.premium-dd.is-open),
.tool-stage:has(.premium-dd.is-open) {
  overflow: visible;
}
.tool-card:has(.premium-dd.is-open) {
  z-index: 20;
}

/* —— Create split: demand fantasy LEFT · CreateTool RIGHT —— */
.create-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  align-items: stretch;
  width: 100%;
}

.demand-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.15rem 0.15rem 0.35rem;
}

.demand-rotator {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.demand-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(360px, 52vh, 520px);
  border-radius: 20px;
}

.demand-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 480ms var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 480ms var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 0s linear 480ms;
  height: 100%;
  overflow: hidden;
}

.demand-scene.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 480ms var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 480ms var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 0s;
  height: auto;
  min-height: 100%;
}

/* Social faux card — grand single-stage */
.faux-social {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, #fff 92%, var(--bg-muted)) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 75%, #fff);
  border-radius: 20px;
  padding: 1rem 1.05rem 1.05rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 85%, transparent) inset,
    0 18px 42px color-mix(in srgb, var(--text-primary) 9%, transparent),
    0 4px 12px color-mix(in srgb, var(--text-primary) 5%, transparent);
  text-align: left;
  overflow: hidden;
  transition: box-shadow 280ms var(--ease-standard, ease);
}
.faux-social.is-active:hover {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 85%, transparent) inset,
    0 22px 48px color-mix(in srgb, var(--text-primary) 12%, transparent),
    0 6px 14px color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.faux-social__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  flex: 0 0 auto;
}
.faux-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 30% 28%, #fff 0%, transparent 40%),
    linear-gradient(135deg, #1ED760 0%, #0ea5e9 55%, #6366f1 100%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}
.faux-avatar--shop {
  background:
    radial-gradient(circle at 32% 30%, #fff8 0 18%, transparent 42%),
    linear-gradient(145deg, #34d399, #10b981 40%, #059669);
}

.faux-avatar--travel {
  background:
    radial-gradient(circle at 32% 30%, #fff8 0 18%, transparent 42%),
    linear-gradient(145deg, #38bdf8, #6366f1 45%, #a78bfa);
}
.faux-avatar--try {
  background:
    radial-gradient(circle at 32% 30%, #fff8 0 18%, transparent 42%),
    linear-gradient(145deg, #f97316, #ef4444 50%, #ec4899);
}
.faux-avatar--read {
  background:
    radial-gradient(circle at 32% 30%, #fff8 0 18%, transparent 42%),
    linear-gradient(145deg, #0ea5e9, #14b8a6 50%, #22c55e);
}
.faux-avatar--apply {
  background:
    radial-gradient(circle at 32% 30%, #fff8 0 18%, transparent 42%),
    linear-gradient(145deg, #a78bfa, #8b5cf6 40%, #6366f1);
}
.faux-avatar--generic {
  background:
    radial-gradient(circle at 32% 30%, #fff8 0 18%, transparent 42%),
    linear-gradient(145deg, #38bdf8, #6366f1 45%, #22d3ee);
}
.demand-rotator[data-active-kind="book"] .demand-viewport {
  /* subtle cool wash behind IM */
}
.demand-dot[title] {
  position: relative;
}

.faux-social__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.faux-social__name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.faux-social__when {
  font-size: 0.6875rem;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}
.faux-social__more {
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.55;
  font-size: 0.75rem;
}
.faux-social__body {
  margin: 0 0 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.faux-social__caption {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.faux-social__cta-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.faux-social__emoji {
  flex: 0 0 auto;
  line-height: 1;
}
.faux-social__inline-url {
  color: var(--link, #08783B);
  font-weight: 700;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.faux-social__eng {
  display: flex;
  gap: 0.85rem;
  padding: 0.55rem 0 0;
  margin-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  flex: 0 0 auto;
}
.faux-eng__btn {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--text-muted);
}
.faux-social__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #e8ebe7;
  flex: 1 1 auto;
  min-height: 180px;
}
.faux-social__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.faux-thumb-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0b0f0d;
  background: color-mix(in srgb, #fff 90%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
}
.faux-social__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-top: none;
  background: color-mix(in srgb, var(--bg-muted) 45%, #fff);
  transition: border-color 180ms ease;
  flex: 0 0 auto;
}
.faux-social__card--below {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.faux-social__card:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
}
.faux-social__linkmeta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.85rem 1rem;
  min-width: 0;
  text-align: left;
}
.faux-social__host {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.faux-social__url {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faux-social__cta {
  font-size: 0.8125rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--brand) 55%, #0b0f0d);
  margin-top: 0.1rem;
}

/* IM / chat faux — grand single-stage */
.faux-im {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, #0f172a 96%, #1e293b) 0%,
      #0b1220 100%);
  border: 1px solid color-mix(in srgb, #94a3b8 22%, transparent);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
    0 18px 42px color-mix(in srgb, #020617 40%, transparent);
  color: #e2e8f0;
  text-align: left;
}
.faux-im__chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, #94a3b8 16%, transparent);
  background: color-mix(in srgb, #1e293b 55%, transparent);
  flex: 0 0 auto;
}
.faux-im__dots { display: inline-flex; gap: 4px; }
.faux-im__dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #475569;
}
.faux-im__dots i:nth-child(1) { background: #f87171; }
.faux-im__dots i:nth-child(2) { background: #fbbf24; }
.faux-im__dots i:nth-child(3) { background: #34d399; }
.faux-im__title {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #f1f5f9;
}
.faux-im__status {
  font-size: 0.625rem;
  font-weight: 650;
  color: #34d399;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.faux-im__thread {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.faux-im__bubble {
  max-width: 94%;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.faux-im__bubble--them {
  align-self: flex-start;
  background: color-mix(in srgb, #1e293b 88%, #334155);
  border: 1px solid color-mix(in srgb, #94a3b8 14%, transparent);
  border-bottom-left-radius: 5px;
  width: min(100%, 420px);
  max-width: 100%;
}
.faux-im__bubble--them > p { margin: 0 0 0.65rem; color: #e2e8f0; }
.faux-im__offer {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #94a3b8 18%, transparent);
  background: color-mix(in srgb, #0b1220 70%, #1e293b);
}
.faux-im__feat {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  background: #1e293b;
}
.faux-im__offer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem 0.8rem;
}
.faux-im__link {
  display: inline-block;
  font-weight: 700;
  font-size: 0.875rem;
  color: #6ee7b7;
  text-decoration: none;
  letter-spacing: -0.02em;
  border-bottom: 1px solid color-mix(in srgb, #6ee7b7 45%, transparent);
  word-break: break-all;
  width: fit-content;
}
.faux-im__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: color-mix(in srgb, #6366f1 22%, transparent);
  border: 1px solid color-mix(in srgb, #818cf8 30%, transparent);
}
.faux-im__offer-cta {
  font-size: 0.75rem;
  font-weight: 650;
  color: #94a3b8;
  margin-top: 0.1rem;
}
.faux-im__bubble--me {
  align-self: flex-end;
  background: linear-gradient(135deg, #1ED760, #12b85a);
  color: #06240f;
  font-weight: 650;
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 16px color-mix(in srgb, #1ED760 28%, transparent);
  max-width: 78%;
}


/* Screen-reader only — hide visually, keep accessible */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Dot pager */
.demand-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.15rem 0 0.1rem;
}
.demand-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #6b7280) 45%, transparent);
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transition:
    width 240ms var(--ease-standard, ease),
    background 240ms ease,
    box-shadow 240ms ease;
}
.demand-dot:hover {
  background: color-mix(in srgb, var(--text-primary) 45%, transparent);
}
.demand-dot:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
  outline-offset: 3px;
}
.demand-dot.is-active {
  width: 22px;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.demand-caption {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.05rem 0 0;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--text-muted, #6b7280);
  letter-spacing: -0.01em;
}
.demand-caption__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  animation: demand-pulse 2.4s ease-in-out infinite;
}
@keyframes demand-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 8%, transparent); }
}

/* Compact in-form preview (secondary to demand stage) */
.link-preview--compact {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  min-height: 0;
}
.link-preview--compact .preview-label { font-size: 0.65rem; }
.link-preview--compact .preview-url { font-size: 0.9375rem; }
.link-preview--compact .preview-glyph { transform: scale(0.9); }

/* Tool actions — right-align primary CTA (tool rule) */
.tool-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.15rem;
}
.tool-actions .btn-create {
  min-width: 11.5rem;
  justify-content: center;
}
.tool-note {
  text-align: right;
}

/* —— CTA alignment rule (homepage craft) ——
   Center primary CTAs in single-column / centered bands.
   Right-align tool + footer actions.
   Do not left-align orphan CTAs in centered sections. */
.section-intro .hero-actions,
.section-intro .cta-row,
.promise-cta-row,
.closing-actions,
.closing .hero-actions,
.more-band .hero-actions,
.hero--stitch .hero-actions {
  justify-content: center;
}
.site-footer .footer-cta,
.site-footer .cta-row,
.tool-actions {
  justify-content: flex-end;
}
/* Cards / left-rag copy+media splits keep natural start alignment */
.feat-actions {
  justify-content: center; /* Batch F: non-split feat CTAs */
}
.use-copy .text-action {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .create-split {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .demand-stage { order: -1; }
  .demand-viewport { min-height: 320px; }
  .premium-dd--domain .premium-dd__menu {
    width: min(420px, calc(100vw - 24px));
    min-width: 0;
    right: 0;
    left: 0;
  }
  .tool-note { text-align: left; }
  .tool-actions { justify-content: stretch; }
  .tool-actions .btn-create { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .demand-caption__dot { animation: none; }
  .demand-scene {
    transition: none;
    transform: none;
  }
  .demand-dot { transition: none; }
}



/* —— QR tab: hide link-only fields + distinct placement previews —— */
.tool-card[data-mode="qr"] .field-row--link-only,
.tool-card[data-mode="qr"] .tool-check--link-only {
  display: none !important;
}

.demand-stage[data-mode="link"] [data-preview-for="qr"],
.demand-stage:not([data-mode="qr"]) [data-preview-for="qr"] {
  display: none !important;
}
.demand-stage[data-mode="qr"] [data-preview-for="link"] {
  display: none !important;
}
/* Belt: Link demand carousel must never show under QR tab */
.demand-stage[data-mode="qr"] [data-demand-rotator]:not([data-preview-for="qr"]) {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.demand-stage[data-mode="qr"] [data-preview-for="qr"] {
  display: flex !important;
}
.demand-stage[data-mode="qr"] .demand-caption[data-preview-for="qr"] {
  display: flex !important;
}
.demand-caption[data-preview-for] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.qr-rotator {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}


.faux-qr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border) 70%, #fff);
  border-radius: 20px;
  padding: 0.7rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 85%, transparent) inset,
    0 18px 42px color-mix(in srgb, var(--text-primary) 9%, transparent);
  overflow: hidden;
  min-height: 100%;
}

/* Image-led QR placement card — scene fills most of the card */
.fq-scene {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  min-height: inherit;
}
.fq-scene__media {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(260px, 40vh, 380px);
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-muted, #f3f4f6) 80%, #fff);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 12%, transparent);
}
.fq-scene__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Foot: grid locks title/sub flush-left; URL sits in auto column */
.fq-scene__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.75rem;
  padding: 0.15rem 0 0.1rem; /* equal/zero horizontal — no asymmetric pad */
  flex: 0 0 auto;
}
.fq-scene__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* not stretch — shared left edge */
  gap: 0.1rem;
  min-width: 0;
}
.fq-scene__copy strong,
.fq-scene__copy span {
  display: block;
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: left;
  letter-spacing: 0; /* same on both — no title-only tracking skew */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fq-scene__copy strong {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}
.fq-scene__copy span {
  font-size: 0.71875rem;
  color: var(--text-muted, #6b7280);
  font-weight: 550;
  line-height: 1.3;
}
.fq-scene__foot [data-live-url],
.fq-scene__foot em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--brand, #1ED760);
  letter-spacing: 0;
  white-space: nowrap;
  justify-self: end;
  align-self: end;
}
/* Legacy .fq-poster* cards retired — do not let old rules restyle scene feet */
.fq-poster,
.fq-poster__foot,
.fq-poster__copy {
  /* no-op shield: scene markup uses .fq-scene__* only */
}

/* Booking hero fallback (create-tool fragment) — photo, not empty gradient */
.fq-illus {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  background:
    center / cover no-repeat url("../assets/mock/kind-book.webp"),
    linear-gradient(145deg, #1e293b 0%, #0f766e 55%, #1ED760 100%);
}
.fq-illus--kyoto {
  background:
    center / cover no-repeat url("../assets/mock/kind-book.webp"),
    linear-gradient(160deg, #1e293b 0%, #0f766e 42%, #1ED760 100%);
}

/* —— Batch G: HTML type overlay covering baked EN in QR scene WebPs —— */
.fq-scene__bake {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: color-mix(in srgb, #FFFEFB 92%, transparent);
  border: 1px solid color-mix(in srgb, #0b0f0d 8%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, #0b0f0d 14%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.fq-scene__bake[hidden] { display: none !important; }
.fq-scene__bake strong {
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-primary, #121816);
  line-height: 1.25;
}
.fq-scene__bake span {
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: left;
  font-size: 0.71875rem;
  font-weight: 550;
  color: var(--text-muted, #6b7280);
  line-height: 1.3;
}
/* Soft-scrub lower baked English strip on non-EN when overlay is active */
html[lang]:not([lang="en"]):not([lang^="en-"]) .demand-scene:has(.fq-scene__bake:not([hidden])) .fq-scene__img {
  /* keep full art; overlay plate carries locale type */
}


/* —— Locked: how phrase breaks + watermark clearance + domain nowrap —— */
.domain-keep {
  white-space: nowrap;
  display: inline;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.how-copy {
  position: relative;
  isolation: isolate;
}
.how-index {
  position: relative;
  z-index: 0;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
  pointer-events: none;
}
.how-copy h3,
.how-copy p {
  position: relative;
  z-index: 1;
}
.how-copy p {
  overflow-wrap: break-word;
  word-break: keep-all;
  hyphens: none;
}
/* CJK how titles: never force narrow ch that orphans after ， */
html[lang="zh-Hant"] .how-intro h2,
html[lang="ja"] .how-intro h2,
html[lang="ko"] .how-intro h2,
html[lang="th"] .how-intro h2,
html[lang="zh-Hant"] .how-copy h3,
html[lang="ja"] .how-copy h3,
html[lang="ko"] .how-copy h3,
html[lang="th"] .how-copy h3 {
  max-width: 100% !important;
  overflow-wrap: normal;
  word-break: keep-all;
  line-break: strict;
  hyphens: none;
}
/* Locked: CJK how-intro must clear first-row 01 watermark (multi-line titles) */
html[lang="zh-Hant"] .how-section,
html[lang="ja"] .how-section,
html[lang="ko"] .how-section,
html[lang="th"] .how-section {
  --how-copy-col: min(26rem, 44vw);
  --how-raise: clamp(5rem, 10vw, 8rem);
}
@media (min-width: 1000px) {
  html[lang="zh-Hant"] .how-stack > .how-row:first-child .how-copy,
  html[lang="ja"] .how-stack > .how-row:first-child .how-copy,
  html[lang="ko"] .how-stack > .how-row:first-child .how-copy,
  html[lang="th"] .how-stack > .how-row:first-child .how-copy {
    padding-top: 0.5rem;
  }
}

.phrase-keep { white-space: nowrap; }
@media (max-width: 999px) {
  .phrase-keep { white-space: normal; }
  .how-intro h2 .br-desk { display: none; }
}

/* Locked how-index soft watermark — never collide with title/sub */
.how-copy .how-index {
  opacity: 0.55 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
  line-height: 0.9 !important;
}
.how-copy h3 {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* —— Create equal-height preview frame lock (2026-09-29, locked) ——
   Left preview frame (.demand-stage) is the card: same top AND bottom edge as the
   right .tool-card on BOTH tabs (Link social / QR scan scenes). Scenes drop their
   own outer chrome; media flexes; carousel dots + caption sit INSIDE the frame bottom.
   Desktop (>=901px): the frame is size-contained, so the toolbox alone sets the row
   height and grid stretch gives the frame the exact same height. home.js keeps the
   Link-tab toolbox height on the QR tab (computed, not a fixed px) so switching tabs
   or rotating scenes never jumps. Mobile stacked: natural height, no forced equality.
   Do not re-add fixed min-heights on .demand-viewport / media at desktop widths. */
.create-split > .demand-stage {
  background:
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, #fff 92%, var(--bg-muted)) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 20px;
  padding: 1rem 1.05rem 0.8rem;
  gap: 0.65rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 85%, transparent) inset,
    0 18px 42px color-mix(in srgb, var(--text-primary) 9%, transparent),
    0 4px 12px color-mix(in srgb, var(--text-primary) 5%, transparent);
  overflow: hidden;
}
.create-split > .demand-stage[data-mode="qr"] {
  padding: 0.75rem 0.75rem 0.8rem;
}
.create-split > .demand-stage .faux-social,
.create-split > .demand-stage .faux-social.is-active:hover,
.create-split > .demand-stage .faux-qr {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.create-split > .demand-stage .demand-rotator { gap: 0.65rem; }
.create-split > .demand-stage .demand-caption {
  margin: 0;
  padding: 0 0.1rem;
  flex: 0 0 auto;
}
.create-split > .demand-stage .demand-pager { flex: 0 0 auto; }

@media (min-width: 901px) {
  .create-split { align-items: stretch; }
  /* No animated min-height on the in-form preview: an animating 92px->76px box
     would briefly push the toolbox past its locked height on QR->Link. */
  .create-split .tool-card .link-preview {
    transition:
      background 320ms var(--ease-standard),
      border-color 320ms var(--ease-standard),
      box-shadow 320ms var(--ease-standard);
  }
  .create-split > .demand-stage {
    contain: size;
    align-self: stretch;
    min-height: 0;
  }
  .create-split > .demand-stage .demand-rotator:not([hidden]) {
    flex: 1 1 0;
    min-height: 0;
  }
  .create-split > .demand-stage .demand-viewport {
    flex: 1 1 0;
    min-height: 0;
  }
  .create-split > .demand-stage .demand-scene,
  .create-split > .demand-stage .demand-scene.is-active {
    height: 100%;
    min-height: 0;
  }
  /* Link social: head + body + flexing media + engagement */
  .create-split > .demand-stage .faux-social__media {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }
  /* Link IM (book): thread flexes; offer image shrinks before anything clips */
  .create-split > .demand-stage .faux-im { height: 100%; min-height: 0; }
  .create-split > .demand-stage .faux-im__thread {
    flex: 1 1 0;
    min-height: 0;
    justify-content: flex-start;
  }
  .create-split > .demand-stage .faux-im__bubble--them {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .create-split > .demand-stage .faux-im__offer {
    flex: 1 1 auto;
    min-height: 0;
  }
  .create-split > .demand-stage .faux-im__feat {
    flex: 1 1 0;
    min-height: 72px;
    height: 0;
    aspect-ratio: auto;
  }
  .create-split > .demand-stage .faux-im__bubble--me { flex: 0 0 auto; }
  /* QR scan scenes: media flexes, foot stays inside */
  .create-split > .demand-stage .faux-qr { height: 100%; min-height: 0; }
  .create-split > .demand-stage .fq-scene { height: 100%; min-height: 0; }
  .create-split > .demand-stage .fq-scene__media {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }
  /* Taller-than-3:2 media crops sides: keep the tent card + phone in frame */
  .create-split > .demand-stage [data-qr-scene="tent"] .fq-scene__img { object-position: 28% 50%; }
}

/* —— QR tab placeholder QR draft (2026-09-29, locked; create-tool.md §5.8) ——
   Sits between the QR destination preview row and the create button. On desktop the
   toolbox is held at the Link height (equal-height lock); the draft flexes into that
   space (flex: 1 1 0 + small min-height, so the QR natural height never exceeds Link)
   and the button + note sit at the card bottom. Hidden on the Link tab. */
.qr-draft {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--brand) 42%, var(--border));
  background:
    radial-gradient(ellipse 60% 90% at 0% 50%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
    color-mix(in srgb, #fff 94%, var(--surface-mint-wash));
  box-sizing: border-box;
  min-width: 0;
}
.tool-card[data-mode="link"] .qr-draft { display: none; }
.qr-draft__code {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  display: block;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px color-mix(in srgb, var(--text-primary) 9%, transparent);
  box-sizing: border-box;
}
.qr-draft__svg { display: block; width: 100%; height: 100%; }
.qr-draft__bg { fill: #fff; }
.qr-draft__mod { fill: #16241C; opacity: 0.88; }
.qr-draft__eye { fill: #0F7A3D; }
.qr-draft__pupil { fill: #16241C; }
.qr-draft__badge { fill: var(--brand); }
.qr-draft__arrow { stroke: #fff; }
.qr-draft__copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-align: left;
}
.qr-draft__label {
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--brand) 55%, #0E3B22);
}
.qr-draft__to {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-secondary, #5b6660);
}
.qr-draft__dest {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 901px) {
  .create-split .tool-card { display: flex; flex-direction: column; }
  .create-split .tool-card > .tool-body { flex: 1 1 auto; }
  .create-split .tool-card[data-mode="qr"] .qr-draft {
    flex: 1 1 0;
    min-height: 92px;
    container-type: size;
  }
  .create-split .tool-card[data-mode="qr"] .qr-draft__code {
    width: clamp(72px, 100cqh, 176px);
    height: clamp(72px, 100cqh, 176px);
  }
  .create-split .tool-card[data-mode="qr"] .tool-actions { margin-top: auto; }
}

/* —— Promise band: clean centered free-plan band (2026-09-29, locked; DESIGN.md #29) ——
   v2 2026-09-30: headline + one supporting line + ONE primary CTA, all centered.
   No eyebrow, no ghost CTA, no check row, no star rating, no flow pills. */
.promise-band.promise-band--clean {
  margin-top: 0;
  background:
    radial-gradient(ellipse 55% 80% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    linear-gradient(180deg, #fff 0%, var(--surface-mint-wash) 100%);
  color: var(--text-primary);
  border-block: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}
.promise-band.promise-band--clean::before { content: none; display: none; }
.promise-band--clean .promise-panel {
  max-width: 58rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.promise-band--clean h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 40rem;
}
.promise-band--clean .promise-sub {
  margin: 0.95rem auto 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-secondary, #5b6660);
  text-wrap: pretty;
}
.promise-band--clean .promise-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
.promise-band--clean .promise-actions .btn { white-space: nowrap; }
/* v2: phrase units wrap whole at every width (break between phrases first, inside a
   phrase only if it alone overflows). Band-scoped; the global ≤999px phrase-keep reset
   gave 390px breaks like "Start free. The / essentials…". */
.promise-band--clean .phrase-keep { display: inline-block; white-space: normal; }
@media (max-width: 700px) {
  .promise-band--clean .promise-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 20rem; }
}

/* —— Homepage section rhythm lock (2026-09-29, locked; DESIGN.md #30) ——
   Every full-width homepage band uses ONE vertical padding: clamp(4rem, 8vw, 6.5rem)
   (the How lock value). No margin-top between bands (it showed as an empty gap:
   How → 產品導覽 had +64/72px, More → Comparison +128/136px). 產品導覽 stays a
   uniform full-block mint card with its locked tight inner padding. */
main > section.promise-band,
main > section.feat-band,
main > section.pain-band,
main > section.how-section,
main > section.metrics-band,
main > section.stories-band,
main > section.industry-band,
main > section.more-band,
main > section.comparison,
main > section.closing {
  margin-block: 0;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
main > section.use-section.section-space { margin-top: 0; }
/* Closing chapter had its own !important 8rem padding (premium.css); it joins the same rhythm. */
main > section.closing.closing--story { padding-block: clamp(4rem, 8vw, 6.5rem) !important; }
/* Comparison is a 2-column grid on desktop: the stacked-layout 2rem top margin on the
   rows column only pushed the band's first card down (extra gap under More). */
@media (min-width: 900px) {
  main > section.comparison .comparison-links { margin-top: 0; }
}

/* —— How heading lock v2 (2026-09-30, locked; DESIGN.md catch #32) ——
   The intro (eyebrow + H2) used to share grid row 1 with the step stack, cleared only by a
   fixed --how-raise. Any H2 taller than that raise (EN 4-line wrap) sat on top of the 01
   numeral and the step bar. Now the intro is its own row ABOVE the stack in every locale,
   so no line count can reach the numeral or bar. The first visual is no longer pulled up
   beside the intro. Enforced by ctaurl-build/lint-layout-overlap.mjs (5 locales, 1000/1280/1440). */
@media (min-width: 1000px) {
  html[lang] .how-section { --how-raise: 0px; }
  html[lang] .how-section > .wrap {
    grid-template-rows: auto auto;
    row-gap: clamp(2.5rem, 4vw, 3.5rem);
  }
  html[lang] .how-section .how-intro {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 40rem !important;
    overflow: visible;
  }
  html[lang] .how-section .how-stack {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
  }
  html[lang] .how-stack > .how-row:first-child .how-visual { margin-top: 0; }
}

/* —— CJK heading wrap lock (2026-09-30, locked; DESIGN.md catch #33) ——
   zh-Hant/ja headings use word-break: keep-all, and <600px hides every .br-desk, which removed
   the ONLY break opportunity: hero H1, pain/industry/closing H2 ran 150–250px past a 390
   viewport (clipped). Desktop: centred ja/zh H1/H2 wider than their max-width box sat
   off-centre (JP hero 132px, closing 153px). Fix: authored phrase breaks come back on mobile;
   a line that still cannot fit breaks by phrase (ja auto-phrase) or strict kinsoku (never a
   leading ，。) instead of clipping; centred CJK titles get a full-width box. .cjk-keep marks
   an unbreakable phrase unit. Enforced by lint-layout-overlap.mjs (390/1000/1280/1440). */
.cjk-keep { display: inline-block; white-space: nowrap; }
html[lang="ja"] main #closing-title,
html[lang="zh-Hant"] main #closing-title { max-width: 100% !important; margin-inline: auto; }
/* JP hero / stories: HPOVF 2026-10-23 — keep titles inside the copy column (no 13.5em widen hack).
   Phrase-break via r52 / auto-phrase; EN hero look untouched. */
@media (min-width: 600px) {
  html[lang="ja"] main #hero-title,
  html[lang="ja"] main #stories-title {
    width: 100%;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }
}
@media (max-width: 599px) {
  html[lang="zh-Hant"] main :is(h1, h2, h3, h4) br.br-desk,
  html[lang="ja"] main :is(h1, h2, h3, h4) br.br-desk,
  html[lang="zh-Hant"] main #use-title br.br-desk,
  html[lang="zh-Hant"] main #stories-title br.br-desk,
  html[lang="ja"] main #use-title br.br-desk,
  html[lang="ja"] main #stories-title br.br-desk { display: inline !important; }
  html[lang="zh-Hant"] main :is(h1, h2, h3, h4) { word-break: normal !important; line-break: strict !important; }
  html[lang="ja"] main :is(h1, h2, h3, h4) { word-break: normal !important; line-break: strict !important; }
  html[lang="ja"] main #hero-title { font-size: min(2.625rem, 10vw) !important; }
  @supports (word-break: auto-phrase) {
    html[lang="ja"] main :is(h1, h2, h3, h4) { word-break: auto-phrase !important; }
  }
}
/* Inner pages (ja): keep-all left the pricing H1 (1,259px of text in a 1,280 viewport) and plan
   card titles unbreakable; break by phrase instead (fallback: strict kinsoku). catch #33 */
html[lang="ja"] body.page-inner main :is(h1, h2, h3) { word-break: normal !important; line-break: strict !important; }
@supports (word-break: auto-phrase) {
  html[lang="ja"] body.page-inner main :is(h1, h2, h3) { word-break: auto-phrase !important; }
}

/* —— CJK body phrase units (2026-09-30, DESIGN.md catch #34) ——
   .cjk-phrase = a clause that should start on its own line when it cannot finish the current
   one (it may still wrap inside at 、，). Used in the zh How step-1 body so the domain list and the
   two trailing clauses break by meaning, never "用" alone at a line end. */
.cjk-phrase { display: inline-block; white-space: normal; max-width: 100%; }

/* —— JP body phrase breaking (2026-09-30, DESIGN.md catch #34) ——
   keep-all on ja body turns each run between punctuation into one unbreakable unit; in the 177–282px
   How columns that unit overflowed and overflow-wrap:anywhere then broke it at random, ignoring
   kinsoku (「、」 alone on a line at 390, 「追従す|る」, 「インターステ|ィシャル」). ja body uses
   phrase-aware breaking instead (Chrome auto-phrase = BudouX segments); strict kinsoku stays. */
@supports (word-break: auto-phrase) {
  html[lang="ja"] main :is(p, li, figcaption, blockquote, dd) { word-break: auto-phrase !important; line-break: strict; }
}

/* —— How clip safety + mobile step-2 stack (2026-09-30, DESIGN.md catch #34) ——
   1. ≥1000px: styles.css clipped .how-intro and the step-1 .how-copy on BOTH axes (legacy guard
      against copy bleeding into the raised visual). The text bottom sat 1–2px inside that clip, and
      the "01" numeral's line box already overflowed the top. Keep the horizontal guard, never clip
      vertically: body copy can grow (locale, zoom, font fallback) without being cut.
   2. ≤899px: `.how-row--soft.how-row--reverse` (0,2,0) out-ranked the mobile one-column rule
      (0,1,0), so step 2 stayed two columns at 390–899 (QR mock crushed to ~53px, 「QR 工作室」 stacked
      one glyph per line, body squeezed to 177px). Stack it like steps 1 and 3. */
@media (min-width: 1000px) {
  html[lang] .how-section .how-intro,
  html[lang] .how-section .how-stack > .how-row .how-copy { overflow: clip visible; }
}
@media (max-width: 899px) {
  html[lang] .how-section .how-row.how-row--soft.how-row--reverse { grid-template-columns: minmax(0, 1fr); }
  html[lang] .how-section .how-row--soft.how-row--reverse .how-copy,
  html[lang] .how-section .how-row--soft.how-row--reverse .how-visual { order: unset; }
}

/* —— Action domains never break (2026-09-30, DESIGN.md catch #34; lint-layout-overlap check 9) ——
   Chrome breaks after the hyphen in buy-it.now and auto-phrase / Thai segmentation split
   今すぐ|申込.me and สมัคร|เลย.online. Mock URL lines truncate with an ellipsis instead of wrapping. */
.domain-keep { white-space: nowrap; overflow-wrap: normal; hyphens: none; }
.ui-mock .mock-preview-url,
.ui-mock .mock-dest-chip strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.ui-mock .mock-dest-chip { min-width: 0; max-width: 100%; }

/* —— Batch #35 (2026-09-30 21:31) ——
   1. Closing band v2: the lead is two lines (offer, then no-ad promise), each its own block line,
      centred like the H2. CJK lines break only between .cjk-phrase clauses.
   2. Card / step titles balance their lines so no title ends on a lone token (「…產生 / QR」,
      "… / job"); lint-layout-overlap check 10 fails headings whose last line is ≤2 CJK chars or
      one Latin token.
   3. Inner pages ≤599px: buttons may wrap instead of running past the viewport (EN /product/
      PROOF button at 390 was 392px of nowrap text). */
html[lang] .closing .closing-lead .closing-line { display: block; }
html[lang] .closing .closing-lead .closing-line + .closing-line { margin-top: 0.25em; }
html[lang] main :is(.how-copy, .pain-card, .feat-card, .industry-card, .mkt-card, .belief-card, [class*="-card"]) :is(h3, h4) { text-wrap: balance; }
@media (max-width: 599px) {
  body.page-inner main .btn { max-width: 100%; white-space: normal; text-align: center; }
}
/* EN pain-card titles: the manual .br-desk left "job" alone on a 3rd line in the 1440 card
   ("The caption that / does the link’s / job"). EN lets balance pick the breaks instead. */
@media (min-width: 1000px) {
  html[lang="en"] .pain-card h3 .br-desk { display: none; }
}
/* CJK body tail (#35): the last word + closing punctuation never splits, so keep-all's emergency
   break can never leave 「。」 or 「。」」 alone on the last line. */
.cjk-tail { white-space: nowrap; }

/* ── Batch #37: heading line rhythm ─────────────────────────────────────────────────────────
   tokens.css sets `:lang(zh|ja|ko) { line-height: 1.65 }`, which matches EVERY element, so phrase
   units inside headings (.cjk-keep / .cjk-phrase / .phrase-keep, display:inline-block) took body
   leading (1.65) instead of the heading's ~1.05 and each one opened a ~1.6× line box: an empty-line
   gap between H2 lines (zh pain 「一般短網址什麼也沒說，｜所以說明全靠你貼」). Everything inside a
   heading inherits the heading's line-height. lint-layout-overlap check 11 guards it. */
html :is(h1, h2, h3, h4, h5, h6, [class*="title"]) * { line-height: inherit; }
/* #37: zh pain lead. Sentence 1 fits one line on desktop; phrase units keep clause breaks on mobile. */
html[lang^="zh"] .pain-band .section-lead { max-width: min(100%, 38em); }

/* ══ Batch #38: mobile homepage overhaul (< 900px only; ≥ 900px untouched) ═══════════════════
   Red line M1 (DESIGN.md): on phones the hero reads first, then a compact Create tool, then a
   small preview. lint-mobile.mjs guards order, first-viewport H1, tool height, header, tap
   targets and horizontal overflow at 360 / 390 / 430. Every rule below sits inside
   max-width: 899.98px, so desktop layout (R1 equal height, mega nav, section rhythm) is unchanged. */
.m-preview-toggle { display: none; }
@media (max-width: 899.98px) {
  /* ── Header: logo · language · menu. Never wraps, never squashes the language button. ── */
  html body .site-header .nav { flex-wrap: nowrap; gap: 0.5rem; min-width: 0; }
  html body .site-header .logo { flex: 0 1 auto; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; }
  html body .site-header .nav-actions { flex: 0 0 auto; margin-left: auto; gap: 0.5rem; min-width: 0; }
  html body .site-header .menu-toggle { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; }
  html body .site-header .lang-switcher { flex: 0 0 auto; width: auto; margin-left: 0; }
  html body .site-header .lang-switcher__menu { left: auto; right: 0; min-width: 200px; }
  html body .site-header .lang-switcher__trigger {
    flex: 0 0 auto; width: auto; min-width: 48px; height: 44px; min-height: 44px; padding: 0 0.6rem; gap: 0.3rem;
    white-space: nowrap; justify-content: center;
  }
  html body .site-header .lang-switcher__chevron { display: none; }
  html body .site-header .lang-switcher__current { overflow: visible; }
  html body .site-header .nav-actions .btn-primary { min-height: 44px; }
}
@media (max-width: 479.98px) {
  /* the hero carries the primary CTA right below; the header keeps logo · language · menu */
  html body .site-header .nav-actions .btn-primary { display: none; }
}
@media (max-width: 899.98px) {

  /* ── Hero order: copy → Create tool → preview (DOM order already hero copy → #create) ── */
  html body .hero.hero--stitch > .tool-stage { order: 0; max-width: 560px; width: 100%; min-width: 0; justify-self: stretch; margin-inline: auto; }
  html body .hero.hero--stitch .create-split { display: flex; flex-direction: column; gap: 0.85rem; }
  html body .hero.hero--stitch .create-split > .tool-card { order: 1; }
  html body .hero.hero--stitch .create-split > .demand-stage { order: 2; }
  html body .hero.hero--stitch { grid-template-columns: minmax(0, 1fr); padding-top: 1.25rem; row-gap: 1.25rem; }
  html body .hero.hero--stitch > * { min-width: 0; }
  html body .hero.hero--stitch .hero-copy { text-align: center; }
  html body .hero.hero--stitch #hero-title { font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.12; margin-bottom: 0.6rem; }
  html body .hero.hero--stitch .hero-domain { margin-block: 0 1rem; }
  html body .hero.hero--stitch .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; max-width: 420px; margin: 0 auto; }
  html body .hero.hero--stitch .hero-actions .btn { width: 100%; min-height: 48px; justify-content: center; }
  html body .hero.hero--stitch .hero-actions .btn-ghost { min-height: 44px; border-color: transparent; background: transparent; box-shadow: none; }
  html body .hero.hero--stitch .hero-note { margin-top: 0.6rem; text-wrap: balance; }
  html body .hero.hero--stitch .under-tool { display: none; }

  /* ── Compact Create tool ── */
  html body .tool-card { padding: 0.9rem; border-radius: 20px; }
  html body .tool-card { text-align: left; }
  /* segmented Link / QR switch: one line, 44px */
  html body .tool-card .tool-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-height: 0; height: auto;
    margin: 0 0 0.8rem; padding: 4px; border-radius: 14px; background: rgba(15, 31, 26, 0.06); border: 0;
  }
  html body .tool-card .tool-tabs [role="tab"] {
    min-height: 44px; height: 44px; padding: 0 0.5rem; margin: 0; font-size: 0.9rem; line-height: 1.1;
    white-space: nowrap; border-radius: 11px; justify-content: center; min-width: 0;
  }
  html body .tool-card .tool-tabs [role="tab"][aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(15, 31, 26, 0.14); }
  html body .tool-card .tool-tabs .tab-ico,
  html body .tool-card .tool-tabs .tool-tab-indicator { display: none; }
  html body .tool-card .tool-body { gap: 0.7rem; padding: 0; margin: 0; }
  html body .tool-card .field-label { font-size: 0.78rem; margin-bottom: 0.3rem; }
  html body .tool-card .field-input { min-height: 44px; height: 44px; }
  html body .tool-card .field-row--link-only { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  html body .tool-card .field-row--link-only > *, html body .tool-card #domain-dd { min-width: 0; max-width: 100%; }
  /* domain picker = one horizontally scrollable chip row (the same option buttons, always shown) */
  html body .tool-card .field--domain .field-label { display: none; }
  html body .tool-card #domain-trigger { display: none; }
  html body .tool-card #domain-dd .premium-dd__menu,
  html body .tool-card #domain-dd .premium-dd__menu[hidden] {
    display: block !important; position: static; inset: auto; width: auto; min-width: 0; max-width: none;
    margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: none; opacity: 1; visibility: visible;
  }
  html body .tool-card #domain-langbar { display: none; }
  html body .tool-card #domain-options {
    display: flex; flex-wrap: nowrap; gap: 0.45rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0; padding: 2px 1.5rem 2px 2px; list-style: none; max-height: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  html body .tool-card #domain-options::-webkit-scrollbar { display: none; }
  html body .tool-card #domain-options > li { flex: 0 0 auto; scroll-snap-align: start; }
  html body .tool-card #domain-options .premium-dd__option {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; width: auto;
    padding: 0 0.9rem; border-radius: 999px; border: 1px solid rgba(15, 31, 26, 0.14);
    background: #fff; white-space: nowrap; font-size: 0.9rem; font-weight: 600;
  }
  html body .tool-card #domain-options .premium-dd__option.is-active {
    border-color: var(--brand, #16a34a); background: color-mix(in srgb, var(--brand, #16a34a) 12%, #fff);
    color: var(--ink, #0f1f1a); box-shadow: inset 0 0 0 1px var(--brand, #16a34a);
  }
  /* suffix: small inline field */
  html body .tool-card .field--slug { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem; }
  html body .tool-card .field--slug .field-label { margin: 0; }
  /* result row + full-width create button; "also QR" folds away */
  html body .tool-card .link-preview { min-height: 0; padding: 0.55rem 0.75rem; gap: 0.6rem; }
  html body .tool-card .link-preview .preview-copy { min-width: 0; flex: 1 1 auto; text-align: left; }
  html body .tool-card .link-preview .preview-label { font-size: 0.72rem; margin: 0 0 0.15rem; text-align: left; }
  html body .tool-card .link-preview .preview-glyph { flex: 0 0 auto; }
  html body .tool-card .preview-url { font-size: 1rem; overflow-wrap: anywhere; }
  html body .tool-card .tool-check--link-only { display: none; }
  html body .tool-card .tool-actions .btn-create { width: 100%; min-height: 48px; }
  html body .tool-card .tool-note { font-size: 0.78rem; margin-top: 0.1rem; }
  html body .tool-card .qr-draft { padding: 0.6rem; gap: 0.7rem; }
  html body .tool-card .qr-draft__code { width: 72px; height: 72px; flex: 0 0 72px; }

  /* ── Preview: a quiet mini card by default; full scene on request ── */
  html body .create-split > .demand-stage { min-height: 0; height: auto; padding: 0.7rem; }
  html body .demand-stage .m-preview-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    min-height: 44px; width: 100%; margin-top: 0.4rem; border-radius: 12px;
    border: 1px solid rgba(15, 31, 26, 0.12); background: rgba(255, 255, 255, 0.7);
    font: inherit; font-size: 0.88rem; font-weight: 600; color: inherit; cursor: pointer;
  }
  html body .demand-stage:not(.is-mini) .demand-viewport { max-height: 60vh; min-height: 0; }
  html body .demand-stage:not(.is-mini) .faux-im__feat { max-height: min(24vh, 112px); object-fit: cover; }
  html body .demand-stage:not(.is-mini) .faux-social__media { max-height: 24vh; }
  html body .demand-stage:not(.is-mini) .faux-social__media img { height: 100%; object-fit: cover; }
  html body .create-split > .demand-stage.is-mini[data-mode] .demand-pager,
  html body .create-split > .demand-stage.is-mini[data-mode] .demand-caption[data-preview-for] { display: none !important; }
  html body .demand-stage.is-mini .demand-viewport { min-height: 0; max-height: 140px; overflow: hidden; border-radius: 16px; }
  html body .demand-stage.is-mini .demand-scene { position: relative !important; inset: auto !important; transform: none !important; }
  html body .demand-stage.is-mini .demand-scene[hidden] { display: none !important; }
  /* social post → thumbnail + caption + inline link */
  html body .demand-stage.is-mini .faux-social {
    display: grid !important; grid-template-columns: 96px 1fr; grid-template-rows: auto; column-gap: 0.75rem;
    align-items: center; padding: 0.6rem; max-height: 140px; min-height: 0; height: auto;
  }
  html body .demand-stage.is-mini .faux-social__head,
  html body .demand-stage.is-mini .faux-social__eng,
  html body .demand-stage.is-mini .faux-thumb-tag { display: none !important; }
  html body .demand-stage.is-mini .faux-social__media { grid-column: 1; grid-row: 1; width: 96px; height: 96px; min-height: 0; aspect-ratio: auto; margin: 0; border-radius: 12px; overflow: hidden; flex: none; }
  html body .demand-stage.is-mini .faux-social__img { width: 100%; height: 100%; object-fit: cover; }
  html body .demand-stage.is-mini .faux-social__body { grid-column: 2; grid-row: 1; padding: 0; min-width: 0; }
  html body .demand-stage.is-mini .faux-social__caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; margin: 0 0 0.35rem; }
  html body .demand-stage.is-mini .faux-social__caption { text-wrap: pretty; }
  /* the inline link is the point of the mini card: drop the emoji, keep the link on one line */
  html body .demand-stage.is-mini .faux-social__cta-line { margin: 0; font-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .demand-stage.is-mini .faux-social__inline-url { white-space: nowrap; font-size: 0.84rem; }
  /* #38b: the emoji slot (0px wide in mini) still left the flex gap (6.4px) → link indented vs caption */
  html body .demand-stage.is-mini .faux-social__cta-line { gap: 0; padding-left: 0; text-indent: 0; }
  html body .demand-stage.is-mini .faux-social__emoji { display: none; }
  html body .demand-stage.is-mini .faux-social__inline-url { margin-left: 0; padding-left: 0; }
  /* IM thread → first message + offer link */
  html body .demand-stage.is-mini .faux-im { max-height: 140px; min-height: 0; height: auto; padding: 0.6rem; }
  html body .demand-stage.is-mini .faux-im__chrome,
  html body .demand-stage.is-mini .faux-im__bubble--me { display: none !important; }
  html body .demand-stage.is-mini .faux-im__thread { padding: 0; gap: 0; }
  html body .demand-stage.is-mini .faux-im__bubble--them {
    display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; row-gap: 0.35rem;
    align-content: center; max-width: 100%; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: 0.86rem;
  }
  html body .demand-stage.is-mini .faux-im__offer,
  html body .demand-stage.is-mini .faux-im__offer-meta { display: contents; }
  html body .demand-stage.is-mini .faux-im__feat { grid-column: 1; grid-row: 1 / span 2; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; margin: 0; }
  html body .demand-stage.is-mini .faux-im__bubble--them > p { grid-column: 2; grid-row: 1; align-self: end; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body .demand-stage.is-mini .faux-im__link { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html body .demand-stage.is-mini .faux-im__chip,
  html body .demand-stage.is-mini .faux-im__offer-cta { display: none !important; }
  /* QR scan scenes → thumbnail + placement copy */
  html body .demand-stage.is-mini .fq-scene { display: grid; grid-template-columns: 96px 1fr; column-gap: 0.75rem; align-items: center; padding: 0.6rem; min-height: 0; height: auto; }
  html body .demand-stage.is-mini .fq-scene__media { width: 96px; height: 96px; min-height: 0; aspect-ratio: auto; border-radius: 12px; overflow: hidden; flex: none; }
  html body .demand-stage.is-mini .fq-scene__img { width: 100%; height: 100%; object-fit: cover; }
  html body .demand-stage.is-mini .fq-scene__bake { display: none !important; }
  html body .demand-stage.is-mini .fq-scene__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; position: static; padding: 0; background: none; min-width: 0; }
  html body .demand-stage.is-mini .fq-scene__copy strong,
  html body .demand-stage.is-mini .fq-scene__copy span { white-space: normal; overflow: visible; }
  html body .demand-stage.is-mini .fq-scene__copy strong { font-size: 0.9rem; }
  html body .demand-stage.is-mini .fq-scene__copy span { font-size: 0.8rem; }
  html body .demand-stage.is-mini .fq-scene__foot em { justify-self: start; align-self: flex-start; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 899.98px) {
  /* safety net only, added after the real culprits (header CTA + toggle, hero grid track, domain row)
     were fixed; lint-mobile.mjs disables it while measuring so new culprits still fail. */
  html, html body { overflow-x: clip; }
}
@media (max-width: 399.98px) {
  html body .demand-stage.is-mini .faux-social,
  html body .demand-stage.is-mini .faux-im__bubble--them,
  html body .demand-stage.is-mini .fq-scene { grid-template-columns: 76px 1fr; }
  html body .demand-stage.is-mini .faux-social__media,
  html body .demand-stage.is-mini .faux-im__feat,
  html body .demand-stage.is-mini .fq-scene__media { width: 76px; height: 76px; }
}
@media (max-width: 899.98px) {
  /* unified band rhythm, mobile clamp: same single value for every band (48px at phones → 64px at 899) */
  html body main > section.promise-band,
  html body main > section.feat-band,
  html body main > section.pain-band,
  html body main > section.how-section,
  html body main > section.metrics-band,
  html body main > section.stories-band,
  html body main > section.industry-band,
  html body main > section.more-band,
  html body main > section.comparison,
  html body main > section.closing { padding-block: clamp(3rem, 7.2vw, 4rem); }
  html body main > section.closing.closing--story { padding-block: clamp(3rem, 7.2vw, 4rem) !important; }
}

/* #38 copy helper: .m-phrase is a plain inline span on desktop and a CJK clause unit
   (.cjk-phrase behaviour) below 900px. (EN How domains now use the existing .domain-keep.)
   line-height: inherit beats the tokens.css :lang(zh/ja/ko) 1.65 on every element, so the span
   never makes a line box taller than its paragraph (desktop stays identical). */
.m-phrase { line-height: inherit; }
@media (max-width: 899.98px) {
  .m-phrase { display: inline-block; white-space: normal; max-width: 100%; }
}
@media (max-width: 800px) {
  /* #38 secondary overflow: the 1-column belief grid used a bare 1fr track, so a card's min-content
     (keep-all CJK line) widened it past a 360 viewport (zh/compare text clipped). */
  html body .belief-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
  /* #38b: expanded-preview pager dots get a 44×44 hit area; the visible dot (8px / 22px active)
     is drawn by ::before so it looks the same. */
  html body .create-split > .demand-stage .demand-pager { gap: 0; padding: 0; }
  html body .create-split > .demand-stage .demand-dot,
  html body .create-split > .demand-stage .demand-dot.is-active {
    position: relative; width: 44px; height: 44px; min-width: 44px; padding: 0;
    background: transparent; box-shadow: none; border-radius: 12px; overflow: visible;
  }
  html body .create-split > .demand-stage .demand-dot::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    transform: translate(-50%, -50%); border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted, #6b7280) 45%, transparent);
    transition: width 240ms var(--ease-standard, ease), background 240ms ease;
  }
  html body .create-split > .demand-stage .demand-dot:hover::before { background: color-mix(in srgb, var(--text-primary) 45%, transparent); }
  html body .create-split > .demand-stage .demand-dot.is-active::before {
    width: 22px; background: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  }
  html body .create-split > .demand-stage .demand-dot:focus-visible { outline-offset: -6px; }
}
@media (max-width: 899.98px) {
  /* #38c (2026-10-02, accepted with the mobile batch): one centred pill CTA, no secondary link,
     balanced hero rhythm (H1 → accent 8px → CTA 20px → note 14px → tool 24px). */
  html body .hero.hero--stitch { row-gap: 1.5rem; }
  html body .hero.hero--stitch #hero-title { margin-bottom: 0.5rem; }
  html body .hero.hero--stitch .hero-domain { margin: 0 0 1.25rem; }
  html body .hero.hero--stitch .hero-actions {
    flex-direction: row; justify-content: center; align-items: center; width: auto; max-width: none; margin: 0 auto;
  }
  html body .hero.hero--stitch .hero-actions .btn-primary {
    width: auto; min-height: 48px; padding: 0 1.75rem; border-radius: 999px;
  }
  html body .hero.hero--stitch .hero-actions .btn-ghost { display: none; }
  html body .hero.hero--stitch .hero-note { margin-top: 0.875rem; margin-bottom: 0; }
}

/* ==== #40 (2026-10-02) One shared site footer (L14) ====
   Homepage and every secondary page use the same <footer class="site-footer">
   markup (footer-grid). The secondary pages get these rules from site.css;
   the homepage does not load site.css, so the effective rules live here too.
   Columns: brand / Product / Solutions / Free tools / Company. The Compare
   column is hidden until the user says it is ready. */
.site-footer {
  margin-top: var(--section-gap-standard);
  padding-top: var(--space-16); padding-bottom: var(--space-10);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: var(--space-8);
}
.footer-brand p { color: var(--text-secondary); margin-top: var(--space-4); font-size: 0.875rem; }
.site-footer .prototype-label {
  display: inline-block; margin-top: var(--space-4);
  font-size: 0.75rem; color: var(--text-muted);
  background: var(--bg-muted); padding: 4px 8px; border-radius: 999px;
}
.site-footer h3 {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 750; margin-bottom: var(--space-4); color: var(--text-primary);
}
.site-footer .footer-sub { margin-top: var(--space-8); }
html[lang="zh-Hant"] .site-footer h3, html[lang="ja"] .site-footer h3, html[lang="ko"] .site-footer h3 { line-height: 1.12; }
.site-footer a {
  display: block; font-size: 0.8125rem; color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.site-footer a:hover { color: var(--link); }
.footer-legal {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted);
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-legal-links a { display: inline; margin: 0; }
.site-footer--minimal { margin-top: var(--space-10); padding-block: var(--space-6); }
/* Tablet and phone: brand on its own row, then two even columns
   (Product | Solutions, Free tools | Company). */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-8); }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
}

/* #46 locale headers (jp, zh, kr, th): labels such as (プロダクト, ソリューション, アクションドメイン) were breaking mid-word at 1440.
   Keep each top-level label, login and header CTA on one line. Enforced by lint-nav-wrap.mjs. */
html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header :is(.nav-links > a, .nav-item > a, .nav-login, .nav-actions a, .nav-actions button, .btn) { white-space: nowrap; word-break: keep-all; }
@media (min-width: 900px) and (max-width: 1439px) {
  /* One-line katakana labels need more room than EN; tighten non-EN headers below 1440 instead of wrapping words. */
  html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header .nav { gap: 16px !important; }
  html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header .nav-links { gap: 2px !important; }
  html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header :is(.nav-links > a, .nav-item > a) { padding-inline: 7px !important; font-size: 13px !important; }
  html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header .nav-actions { gap: 8px !important; }
  html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header .nav-actions .btn-ghost { display: none !important; }
  html:is([lang="ja"], [lang="zh-Hant"], [lang="ko"], [lang="th"]) .site-header .nav-actions .btn-primary { padding-inline: 12px !important; }
}

.site-header .nav-login { white-space: nowrap; }