/* Page-level layouts and patterns (redesign Phase 3).
   What only one or two templates use lives here instead of in a per-page
   <style> block, so every page reads the same tokens and nothing drifts.
   Sections follow the page order in design/README.md. */

/* === App layout (signup, account, billing, status) ===================== */
.app-header { padding: 18px 0; border-bottom: 1px solid var(--color-border-subtle); }
.app-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-header__link { font-size: 14.5px; font-weight: 500; color: var(--color-text-secondary); }
.app-footer {
  margin-top: var(--space-section-sm); padding: 24px 0 32px;
  border-top: 1px solid var(--color-border-subtle); font-size: 13.5px; color: var(--color-text-secondary);
}
.app-footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.app-footer a { color: var(--color-text-secondary); }

.page-app { padding: 40px 0 0; }
.page-app--narrow { max-width: 520px; margin: 0 auto; }
.page-app__title { font-size: clamp(30px, 1.4rem + 2vw, 44px); margin-bottom: 10px; }
.page-app__lead { max-width: 520px; margin: 0 0 24px; font-size: 16.5px; }

/* Form on the left, a sticky summary on the right; stacks under 900px
   with the summary after the form, where it reads as reassurance instead
   of pushing the form below the fold. */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; }
.split__aside { position: sticky; top: 24px; display: grid; gap: 18px; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split__aside { position: static; }
}

/* === Signup ============================================================== */
.signup-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 14px 0 0; font-size: 13px; color: var(--color-text-secondary);
}
.availability--ok { color: var(--color-feedback-success-text); font-weight: 600; }
.availability--taken { color: var(--color-feedback-danger-text); }

/* Live preview: the artist sees their name on a store before paying. */
.store-preview .frame-browser { box-shadow: var(--shadow-lifted); }
.store-preview__page { padding: 14px; background: var(--color-bg-surface); }
.store-preview__nav {
  display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.store-preview__nav strong {
  margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 18px/1.2 var(--font-display); font-stretch: 88%; letter-spacing: -.02em;
}
.store-preview__nav span { width: 34px; height: 8px; border-radius: 4px; background: var(--color-bg-subtle); }
.store-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.store-preview__grid span { aspect-ratio: 1; border-radius: 8px; background: var(--color-bg-subtle); }
.store-preview__grid span:nth-child(2) { background: var(--color-feedback-info-bg); }
.store-preview__grid span:nth-child(4) { background: var(--color-accent-brand-fill); opacity: .35; }
.store-preview__grid span:nth-child(6) { background: var(--color-accent-data-fill); opacity: .6; }

.plan-summary__label {
  font: 500 11.5px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.plan-summary__price { margin: 10px 0 4px; font-size: 15px; color: var(--color-text-secondary); }
.plan-summary__price span {
  font: 700 48px/1 var(--font-display); letter-spacing: -.03em; color: var(--color-accent-data);
  font-variant-numeric: tabular-nums;
}
.plan-summary__terms { margin: 0 0 16px; font-size: 14px; color: var(--color-text-secondary); }
.plan-summary__debug { margin: 14px 0 0; font-size: 13px; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.checklist .icon { margin-top: 3px; color: var(--color-feedback-success-fg); }

/* === Provisioning status ===================================================== */
.status-card { text-align: center; }
.status-card__visual {
  position: relative; display: inline-flex; width: 64px; height: 64px; margin-bottom: 18px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--color-bg-subtle); color: var(--color-action-primary-bg);
}
.status-card__visual .icon { width: 28px; height: 28px; }
.status-card__visual--busy .icon { animation: spin 1.1s linear infinite; }
.status-card__visual--done { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); }
.status-card__visual--error { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); }
.status-card code { word-break: break-all; }
.status-card__actions { margin-top: 24px; }
.status-card__note { margin: 12px 0 0; font-size: 13.5px; color: var(--color-text-secondary); }
.page-app__foot { margin-top: 18px; text-align: center; font-size: 14px; color: var(--color-text-secondary); }
.progress-list { list-style: none; margin: 24px 0 0; padding: 0; text-align: left; display: grid; gap: 4px; }
.progress-list li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-control);
  font-size: 15px; color: var(--color-text-secondary);
}
.progress-list li::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--color-border-strong);
}
.progress-list .is-done { color: var(--color-text-primary); }
.progress-list .is-done::before { background: var(--color-feedback-success-fg); border-color: var(--color-feedback-success-fg); }
.progress-list .is-current { color: var(--color-text-primary); font-weight: 600; background: var(--color-bg-subtle); }
.progress-list .is-current::before { border-color: var(--color-action-primary-bg); }
/* The one moment of celebration in the flow: a sticker drops in when the
   store is ready. A deliberate exception to this layout's ornament budget,
   and skipped entirely with reduced motion. */
.status-card .sticker { position: absolute; top: -10px; left: 44px; }
.status-card__visual--done .sticker { animation: drop var(--duration-slow) var(--ease-emphasized) both; }
@keyframes drop { from { transform: translateY(-24px) rotate(-14deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .status-card__visual--busy .icon, .status-card__visual--done .sticker { animation: none; }
}

/* === Shared marketing patterns ============================================ */
.section-more { margin: 28px 0 0; }

/* Numbered steps, number in mono like a ticket stub. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 18px; border-top: 2px solid var(--color-text-primary); }
.steps li::before {
  content: "0" counter(step); display: block; margin-bottom: 14px;
  font: 500 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--color-accent-brand);
}
.steps h3 { margin: 0 0 8px; font: 650 20px/1.2 var(--font-display); letter-spacing: -.01em; }
.steps p { margin: 0; font-size: 15px; color: var(--color-text-secondary); }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* Feature tiles: featured ones span half a row with their screenshot. */
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 36px; }
.feature-card { grid-column: span 2; display: flex; flex-direction: column; padding: 24px; }
.feature-card--wide { grid-column: span 3; padding: 0 0 24px; overflow: hidden; }
.feature-card--wide > :not(.feature-card__media) { margin-left: 24px; margin-right: 24px; }
.feature-card__media {
  display: block; width: 100%; height: 190px; object-fit: cover; object-position: top left;
  margin-bottom: 20px; border-bottom: 1px solid var(--color-border-subtle);
}
/* Icon inside a sticker circle: the one hard shadow outside the stickers. */
.feature-card__icon {
  display: inline-flex; width: 42px; height: 42px; margin-bottom: 16px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--color-bg-canvas); border: 1.5px solid var(--color-text-primary);
  box-shadow: var(--shadow-sticker); transform: rotate(-4deg);
}
.feature-card--wide .feature-card__icon { margin-top: -41px; position: relative; background: var(--color-bg-surface); }
.feature-card .card__title { font: 650 18px/1.25 var(--font-display); letter-spacing: -.01em; margin-bottom: 6px; }
.feature-card .card__meta { font-size: 14.5px; line-height: 1.55; }
[data-ornament="none"] .feature-card__icon { transform: none; box-shadow: none; }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-card, .feature-card--wide { grid-column: span 1; }
  .feature-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card, .feature-card--wide { grid-column: 1 / -1; }
}

/* Text beside a screenshot; alternates side with --reverse. */
.media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.media-split + .media-split { margin-top: 88px; }
.media-split--reverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.media-split--reverse > :first-child { order: 2; }
.media-split h2 { font-size: clamp(24px, 1.2rem + 1vw, 32px); margin: 0 0 12px; }
.media-split .checklist { margin-top: 20px; }
@media (max-width: 900px) {
  .media-split, .media-split--reverse { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .media-split--reverse > :first-child { order: 0; }
}

/* === Landing ================================================================ */
.hero {
  position: relative; overflow: hidden; padding: 72px 0 64px; text-align: center;
  background: var(--color-bg-canvas); color: var(--color-text-primary);
}
/* Glow from behind the headline, as before, plus a halftone fade at the
   bottom: printed dots, the brand's riso cue. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 0%, rgb(109 90 230 / .38), transparent 70%),
    radial-gradient(circle, rgb(255 72 176 / .11) 1.2px, transparent 1.5px) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(180deg, #000 0 35%, transparent 60%, transparent 80%, #000 100%);
          mask-image: linear-gradient(180deg, #000 0 35%, transparent 60%, transparent 80%, #000 100%);
}
.hero__tag { margin-bottom: 26px; }
.hero__title {
  margin: 0 auto 22px; max-width: 900px;
  font: 700 clamp(44px, 1.6rem + 5vw, 88px)/.95 var(--font-display); font-stretch: 86%; letter-spacing: -.03em;
}
.hero__title em { font-style: normal; color: var(--color-accent-brand); }
.hero__lead { max-width: 600px; margin: 0 auto 30px; font-size: 18.5px; color: var(--color-text-secondary); }
.hero__actions { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero__trust {
  margin: 22px 0 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.hero__media { position: relative; max-width: 900px; margin: 56px auto 0; padding: 0 0 40px; }
.hero__front { position: relative; z-index: 1; }
.hero__back {
  position: absolute; z-index: 0; width: 46%; right: -9%; bottom: -2%;
  transform: rotate(3deg); opacity: .9;
}
.hero__sticker { position: absolute; z-index: 2; font-size: 13px; padding: 7px 14px; }
.hero__sticker--a { top: -30px; left: -34px; transform: rotate(-8deg); }
.hero__sticker--b { bottom: 12px; left: 8%; transform: rotate(5deg); }
.hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 40px 0 0;
  padding-top: 32px; border-top: 1px solid var(--color-border-subtle); text-align: left;
}
.hero__stats .stat { display: flex; flex-direction: column; margin: 0; }
.hero__stats dd { order: -1; }
.hero__stats dd { margin: 0; color: var(--color-accent-data); }
.hero__stats dt { margin-top: 8px; }
@media (max-width: 760px) {
  .hero { padding-top: 48px; }
  .hero__back { display: none; }
  .hero__sticker--a { left: -6px; top: -22px; }
  .hero__sticker--b { display: none; }
  .hero__media { padding-bottom: 0; }
  .hero__stats { grid-template-columns: 1fr 1fr; }
}

.pos-band { background: var(--color-bg-canvas); color: var(--color-text-primary); }
.pos-band__title { margin: 18px 0 12px; font-size: clamp(26px, 1.2rem + 1.4vw, 38px); line-height: 1.08; }
.pos-band__points { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 16px; }
.pos-band__points li { display: flex; gap: 14px; font-size: 15px; color: var(--color-text-secondary); }
.pos-band__points .icon { margin-top: 2px; color: var(--color-accent-data); }
.pos-band__points strong { color: var(--color-text-primary); }
.pos-band__limit { display: flex; gap: 8px; margin: 0 0 20px; font-size: 13.5px; color: var(--color-text-secondary); }

.accounts { margin-top: 28px; border-top: 1px solid var(--color-border-subtle); }
.accounts__row {
  display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 16px; align-items: center;
  padding: 18px 16px; border-bottom: 1px solid var(--color-border-subtle);
}
.accounts__row--ours { background: var(--color-bg-surface); border-radius: var(--radius-control); border-bottom-color: transparent; box-shadow: var(--shadow-raised); }
.accounts__name { font-weight: 650; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.accounts__cell { font-size: 15px; font-variant-numeric: tabular-nums; }
.accounts__row--ours .accounts__cell { font-weight: 600; }
.accounts__label {
  display: block; margin-bottom: 2px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.accounts__note { margin-top: 14px; font-size: 13px; }
@media (max-width: 640px) { .accounts__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.tool-card { display: flex; flex-direction: column; gap: 6px; }
.tool-card > .icon { color: var(--color-action-primary-bg); margin-bottom: 10px; }
.tool-card__figure { font: 700 22px/1.1 var(--font-display); color: var(--color-accent-data); letter-spacing: -.01em; }
@media (max-width: 800px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }

.faq .accordion { max-width: 760px; margin: 32px auto 0; }

.pricing { background: var(--color-bg-canvas); color: var(--color-text-primary); }
.pricing-card {
  max-width: 440px; margin: 36px auto 0; padding: 32px; text-align: left;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-feature);
  background: var(--color-bg-raised); box-shadow: var(--shadow-raised);
}
.pricing-card__price { margin: 0 0 8px; font-size: 16px; color: var(--color-text-secondary); }
.pricing-card__price span {
  font: 700 clamp(56px, 2rem + 4vw, 76px)/1 var(--font-display); letter-spacing: -.04em;
  color: var(--color-accent-data); font-variant-numeric: tabular-nums;
}
.pricing-card__terms { margin: 0 0 22px; font-size: 14.5px; color: var(--color-text-secondary); }
.pricing-card__terms strong { color: var(--color-text-primary); }
.pricing-card .checklist { margin-bottom: 26px; }
.pricing-card__guarantees {
  margin: 16px 0 0; text-align: center; font: 500 11.5px/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary);
}
.pricing-card__debug { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--color-text-secondary); }

.closing { text-align: center; }
.closing__title { max-width: 720px; margin: 0 auto 14px; font-size: clamp(30px, 1.4rem + 2vw, 48px); line-height: 1.05; font-stretch: 88%; }
.closing p { max-width: 540px; margin: 0 auto 26px; font-size: 17px; }

/* === Directories ============================================================= */
.directory-head { padding-bottom: 28px; }
.directory-head .filter-bar { margin-top: 24px; }
.directory-count {
  margin: 10px 0 0; font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-accent-data);
}
.directory-body { padding-top: 40px; }
.month-label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font: 500 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary);
}
.month-label::after { content: ""; flex: 1; height: 1px; background: var(--color-border-subtle); }
.event-grid + .month-label { margin-top: 44px; }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.event-card { position: relative; }
.event-card__cover { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-subtle); overflow: hidden; }
.event-card__cover > img:not(.event-card__logo) { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No cover: the name set large over a halftone, instead of a grey box. */
.event-card__placeholder {
  display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 16px;
  font: 700 26px/1 var(--font-display); font-stretch: 82%; letter-spacing: -.02em; color: var(--color-text-primary);
  background:
    radial-gradient(circle, var(--color-accent-data-fill) 1.5px, transparent 1.8px) 0 0 / 9px 9px,
    var(--color-bg-subtle);
}
.event-card__cover .date-block { position: absolute; top: 12px; left: 12px; box-shadow: var(--shadow-raised); }
/* Event logo as an avatar straddling the cover's bottom edge. The cover
   no longer clips (the rounded corners come from the card itself), so the
   logo can hang half outside it. */
.event-card--with-logo .event-card__cover { overflow: visible; }
.event-card--with-logo .event-card__cover > img:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.event-card__logo {
  position: absolute; left: 16px; bottom: -26px; width: 56px; height: 56px; object-fit: cover;
  border-radius: 14px; background: var(--color-bg-surface);
  border: 3px solid var(--color-bg-surface); box-shadow: var(--shadow-raised);
}
.event-card--with-logo .card__body { padding-top: 38px; }
.event-card__placeholder--logo { align-items: center; justify-content: center; padding: 18px; }
.event-card__placeholder--logo img {
  max-width: 55%; max-height: 80%; object-fit: contain;
  border-radius: var(--radius-card); box-shadow: var(--shadow-raised); background: var(--color-bg-surface);
}
.event-card .card__body { display: grid; gap: 6px; justify-items: start; }
.event-card__title { margin: 4px 0 0; font: 650 18px/1.2 var(--font-display); }
.event-card__title a { color: inherit; }
.event-card__title a::after { content: ""; position: absolute; inset: 0; }
.event-card__title a:hover { text-decoration: none; }

/* Detail pages: content left, a sticky fact sheet right. */
.detail { padding-top: 32px; }
.detail .back-link + .detail-split { margin-top: 24px; }
.event-hero {
  margin: 20px 0 28px; aspect-ratio: 21 / 8; border-radius: var(--radius-feature); overflow: hidden;
  background: var(--color-bg-subtle);
}
.event-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-hero--with-logo { position: relative; overflow: visible; margin-bottom: 64px; }
.event-hero--with-logo .event-hero__cover { border-radius: var(--radius-feature); }
.event-hero__logo {
  position: absolute; left: clamp(16px, 3vw, 32px); bottom: -52px;
  width: clamp(84px, 9vw, 112px) !important; height: clamp(84px, 9vw, 112px) !important;
  border-radius: 22px; border: 4px solid var(--color-bg-canvas);
  background: var(--color-bg-surface); box-shadow: var(--shadow-lifted);
}
.event-hero .event-card__placeholder { font-size: clamp(34px, 1.4rem + 3vw, 64px); padding: 28px; }
.detail-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.detail-split__aside { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .detail-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .detail-split__aside { position: static; }
  .event-hero { aspect-ratio: 16 / 9; }
}
.detail-title { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.detail-title__logo { width: 72px; height: 72px; flex: none; border-radius: var(--radius-card); object-fit: cover; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
.detail-title__name { margin: 10px 0 6px; font-size: clamp(32px, 1.4rem + 2.4vw, 52px); font-stretch: 84%; }
.event-description { max-width: 68ch; margin-top: 8px; }
.event-description h2 { font-size: clamp(20px, 1rem + .8vw, 24px); margin: 0 0 12px; }
.event-description p { margin: 0 0 14px; line-height: 1.65; }
.fact-list { margin: 0; display: grid; gap: 16px; }
.fact-list div { display: grid; gap: 4px; }
.fact-list dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
.fact-list dd { margin: 0; font-weight: 600; }
.fact-list__dates { display: flex; align-items: center; gap: 12px; }
.fact-list__urgent { color: var(--color-feedback-warning-text); }
.detail-actions { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); }

.supplier + .supplier { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--color-border-subtle); }
.supplier__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.supplier__name { margin: 0; font-size: clamp(24px, 1.2rem + 1vw, 32px); font-stretch: 88%; }
.supplier__name a { color: inherit; }
.supplier__site { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.supplier__quote {
  margin: 0 0 20px; padding-left: 16px; border-left: 3px solid var(--color-accent-brand-fill);
  max-width: 720px; font-size: 16px; color: var(--color-text-primary);
}
.supplier__quote cite { font-style: normal; font-size: 13.5px; color: var(--color-text-secondary); }
.directory-head .detail-title__name { margin-top: 18px; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.product-card__body { display: grid; gap: 6px; align-content: start; }
.product-card__category {
  font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary);
}
.product-card .card__title { margin: 0; font-size: 15.5px; line-height: 1.3; }
.product-card__price { margin: 4px 0 0; font-size: 13px; color: var(--color-text-secondary); }
.product-card__price span {
  font: 700 26px/1 var(--font-display); letter-spacing: -.02em; color: var(--color-accent-data);
  font-variant-numeric: tabular-nums;
}
.product-card__spec { margin: 0; font-size: 13px; color: var(--color-text-secondary); white-space: pre-line; }
.product-card__quote { margin: 4px 0 0; font-size: 13.5px; font-style: italic; }
.product-card__credit { margin: 6px 0 0; font-size: 12.5px; color: var(--color-text-secondary); }

/* Data table: comparisons. Scrolls sideways on a phone with the first
   column pinned, so the supplier name never scrolls away. */
.comparison + .comparison { margin-top: 44px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-card); border: 1px solid var(--color-border-subtle); background: var(--color-bg-surface); }
.data-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.data-table th, .data-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }
.data-table tr:last-child > * { border-bottom: 0; }
.data-table thead th {
  font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-secondary); background: var(--color-bg-subtle);
}
.data-table tbody th { font-weight: 600; position: sticky; left: 0; background: var(--color-bg-surface); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table__spec { color: var(--color-text-secondary); font-size: 13.5px; }
.data-table__best > * { background: var(--color-feedback-success-row); }
.data-table__best .data-table__price { font-weight: 700; color: var(--color-feedback-success-text); }

/* === Sales pages ============================================================== */
.section-gap { margin-top: 48px; }
.tool-grid--four { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 0; }
.tool-card .badge { align-self: flex-start; }
.tool-card__cta { margin-top: auto; padding-top: 10px; font-size: 14px; color: var(--color-text-link); }
.feature-hero { padding-top: 32px; }
.feature-hero .media-split { margin-top: 24px; }
.feature-hero__title { font-size: clamp(34px, 1.4rem + 2.6vw, 56px); font-stretch: 84%; margin: 0 0 16px; }
.feature-hero__lead { margin: 0; font-size: 18.5px; color: var(--color-text-secondary); }
.feature-shot { margin: 0; }
.feature-shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--color-text-secondary); }
.feature-shot--evidence { margin: 40px 0 0; }
.prose-block { max-width: 780px; }
.prose-block > h2 { font-size: clamp(24px, 1.2rem + 1vw, 32px); margin: 8px 0 18px; }
.prose-block > p { font-size: 17px; }
.steps--vertical { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 8px; }
.callout {
  display: flex; gap: 16px; margin: 44px 0 0; padding: 22px 24px;
  border-radius: var(--radius-card); background: var(--color-feedback-info-bg);
}
.callout__icon { color: var(--color-feedback-info-text); margin-top: 2px; }
.callout h3 { margin: 4px 0 8px; font: 650 20px/1.2 var(--font-display); }
.callout ul { margin: 0; padding-left: 18px; }
.callout li { margin: 6px 0; font-size: 15px; }
.guide-card { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.guide-card > .icon:first-child { color: var(--color-action-primary-bg); }
.guide-card > span { flex: 1; display: grid; }
.guide-card__label { font-size: 13px; color: var(--color-text-secondary); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--color-border-subtle); }
.pager__link { display: grid; gap: 4px; font-weight: 600; color: var(--color-text-primary); }
.pager__link span { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
.pager__link--next { text-align: right; }
.pager__link:hover { color: var(--color-text-link); text-decoration: none; }

/* === Calculator (moved from _calculadora.html; its JS owns these class names) === */
.calc-entradas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; margin-bottom: 28px; }
.calc-campo { flex: 1 1 190px; }
.calc-campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.calc-campo .ayuda { font-size: 13px; color: var(--color-text-secondary); font-weight: 400; }
.calc-campo input {
  width: 100%; padding: 11px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
  background: var(--color-bg-surface); color: var(--color-text-primary);
}
.calc-campo input:focus { outline: 2px solid var(--color-action-primary-bg); outline-offset: 1px; }

.calc-monedas { display: flex; gap: 8px; }
.calc-moneda {
  flex: 1; border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); color: var(--color-text-primary);
  border-radius: var(--radius-control); padding: 11px 12px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.calc-moneda[aria-pressed="true"] { border-color: var(--color-action-primary-bg); background: var(--color-action-primary-bg); color: var(--color-action-primary-fg); }

.calc-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calc-tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.calc-tabla th, .calc-tabla td {
  padding: 13px 14px; text-align: right; border-bottom: 1px solid var(--color-border-strong);
}
.calc-tabla th:first-child, .calc-tabla td:first-child { text-align: left; }
.calc-tabla th {
  font-weight: 600; font-size: 12px; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: .07em;
}
.calc-tabla tr.mejor td { background: var(--color-feedback-success-row); font-weight: 600; }
.calc-tabla tr.na td { color: var(--color-text-secondary); }
.calc-tabla .queda { font-variant-numeric: tabular-nums; }
.calc-nota-fila { font-size: 13px; color: var(--color-text-secondary); padding-top: 0 !important; }
.calc-nota-fila a { font-size: 13px; }
/* The row note is prose, not a figure: left-aligned, unlike the numeric
   cells the .calc-tabla td rule right-aligns. */
.calc-tabla td.calc-nota-fila { text-align: left; }
.calc-desglose-linea { color: var(--color-text-primary); font-weight: 600; }
.calc-usd { font-size: 13px; font-weight: 400; color: var(--color-text-secondary); }
.calc-veredicto {
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-strong);
  border-radius: 16px; padding: 22px 26px; margin-top: 28px; font-size: 16px;
}
.calc-veredicto:empty { display: none; }
.calc-modo { margin-bottom: 22px; }
.calc-modo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.calc-card { padding: clamp(18px, 3vw, 32px); }
.calc-tabla th { font-family: var(--font-mono); font-weight: 500; }
.calc-veredicto { background: var(--color-feedback-info-bg); border-color: transparent; color: var(--color-text-primary); }
.checklist--prose li { font-size: 16px; }
.checklist--prose .icon { color: var(--color-action-primary-bg); }
.verified-stamp {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 6px 12px;
  border-radius: var(--radius-pill); background: var(--color-feedback-success-bg); color: var(--color-feedback-success-text);
  font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em;
}
.comparison-table { min-width: 860px; }
.comparison-table thead th { vertical-align: bottom; text-transform: none; letter-spacing: 0; font: 600 14px/1.3 var(--font-body); color: var(--color-text-primary); }
.comparison-table thead th small { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--font-body); color: var(--color-text-secondary); }
.comparison-table__name { display: block; font: 650 17px/1.2 var(--font-display); }
.comparison-table .sticker { margin-bottom: 10px; }
.comparison-table tbody th { width: 22%; }
.comparison-table__note { display: block; margin-top: 6px; font-weight: 400; font-size: 12.5px; color: var(--color-text-secondary); }
.comparison-table .comparison-table__ours { background: var(--color-bg-highlight); font-weight: 600; }
.honest-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* === Account, billing, domain, error pages ================================ */
.page-app--narrow > .status-card__visual { margin-bottom: 16px; }
.page-app__text { margin-top: 0; }
.page-app__small { margin: 14px 0; font-size: 14px; color: var(--color-text-secondary); }
.page-app .card + .page-app__small { margin-top: 18px; }
.status-card .button { margin-top: 20px; }
.fact-list--rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); }
.fact-list--rows div:last-child { border-bottom: 0; }
.fact-list--rows { gap: 0; }
.account .card + .card { margin-top: 18px; }
.account__heading { margin: 0 0 12px; font-size: 18px; }
.account__card-form { margin-top: 16px; }
.account__card-form .button { margin-top: 14px; }
.account__card-form .err { margin-top: 8px; font-size: 13.5px; color: var(--color-feedback-danger-text); }
.button-row { display: flex; gap: 10px; margin-top: 18px; }
.button-row > form { flex: 1; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.invoice-table td { padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); }
.invoice-table tr:last-child td { border-bottom: 0; }
.invoice-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.domain-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; }
.dns-value code { font-size: 15px; padding: 6px 10px; }
.checkout-lines { margin: 22px 0; }
.checkout-lines dt { text-transform: none; letter-spacing: 0; font: 400 14.5px/1.4 var(--font-body); color: var(--color-text-secondary); }
.checkout-lines__total dt, .checkout-lines__total dd { font: 700 18px/1.3 var(--font-body); color: var(--color-text-primary); }
.input-code { text-transform: uppercase; }
.sim-event { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-event .button { min-width: 210px; justify-content: flex-start; }
.sim-event .page-app__small { margin: 0; }
.fact-list--rows dt { align-self: center; }

/* === Guides (class names are used inside every guide template) ============= */
.guia { max-width: 720px; margin: 0 auto; padding: 40px 0 24px; }
.guia h1 { font-size: clamp(32px, 1.4rem + 2vw, 46px); font-stretch: 86%; margin: 18px 0 10px; }
.guia h2 { font-size: 24px; margin: 44px 0 12px; }
.guia h3 { font-size: 18px; margin: 28px 0 8px; }
.guia p, .guia li { color: var(--color-text-primary); }
.guia ol, .guia ul { padding-left: 22px; }
.guia li { margin-bottom: 9px; }
.guia table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 15px; }
.guia th, .guia td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.guia th { font: 500 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-secondary); }
/* The last column is for typing, not reading. */
.guia td:last-child { font-family: var(--font-mono); font-size: 14px; }
.guia .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--color-text-secondary); font-size: 15px; margin-bottom: 28px; }
.ruta {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-chip);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle);
  font: 13.5px/1.6 var(--font-mono); color: var(--color-text-primary);
}
.aviso {
  margin: 22px 0; padding: 14px 18px; border-radius: 0 var(--radius-control) var(--radius-control) 0;
  border-left: 3px solid var(--color-action-primary-bg); background: var(--color-feedback-info-bg);
}
.aviso p { margin: 0; }
.aviso.ojo { border-left-color: var(--color-feedback-warning-border); background: var(--color-feedback-warning-bg); }

.page-guides { max-width: 760px; margin: 0 auto; padding: 48px 0 0; }
.guide-list { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 12px; }
.guide-list__item { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.guide-list__number { font: 500 13px/1 var(--font-mono); color: var(--color-accent-brand); }
.guide-list__text { flex: 1; display: grid; gap: 2px; }
.guide-list__text strong { font: 650 17px/1.3 var(--font-display); }
.guide-list__text span { font-size: 14.5px; color: var(--color-text-secondary); }
.callout h2 { margin: 2px 0 6px; font-size: 18px; }
.callout p { margin: 0; color: var(--color-text-secondary); }
.guide-shot { margin: 30px 0 24px; }

/* === CTA band (components/cta_band.html) ================================== */
.cta-band { position: relative; text-align: center; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgb(109 90 230 / .34), transparent 70%);
}
.cta-band__title { max-width: 760px; margin: 0 auto 14px; font-size: clamp(30px, 1.4rem + 2vw, 48px); line-height: 1.05; font-stretch: 86%; }
.cta-band p { max-width: 540px; margin: 0 auto 28px; font-size: 17px; }

.security-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 0; }
.security-grid .card > .icon { color: var(--color-action-primary-bg); margin-bottom: 12px; }
.security-grid .card__title { font: 650 18px/1.25 var(--font-display); margin-bottom: 8px; }
.security-grid .card__meta { font-size: 14.5px; line-height: 1.55; }

/* === About ================================================================== */
.team { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.team__member { display: flex; align-items: center; gap: 14px; }
.team__member > span:last-child { display: grid; }
.team__member strong { font: 650 18px/1.2 var(--font-display); }
.team__member span span { font-size: 14.5px; color: var(--color-text-secondary); }
/* Portraits cut from Messy Satanist's own illustration, framed as stickers. */
.team__avatar {
  display: block; flex: none; width: 60px; height: 60px; object-fit: cover;
  border-radius: 50%; border: 1.5px solid var(--color-text-primary); box-shadow: var(--shadow-sticker);
  background: var(--color-action-primary-bg); transform: rotate(-4deg);
}
.team__avatar--alt { transform: rotate(5deg); }
.about-head__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.about-head__art { width: 100%; max-width: 420px; height: auto; justify-self: center; }
.about-photo { position: relative; margin: 0; }
.about-photo img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-card);
  border: 1.5px solid var(--color-text-primary); box-shadow: var(--shadow-sticker); transform: rotate(1.5deg);
}
/* Name tags over each person, in the same sticker style as the hero's. */
.about-photo__name { position: absolute; z-index: 2; bottom: -14px; font-size: 13px; padding: 7px 14px; }
.about-photo__name--left { left: 14%; transform: rotate(-6deg); }
.about-photo__name--right { right: 12%; transform: rotate(5deg); }
@media (max-width: 860px) {
  .about-head__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-head__art { max-width: 300px; }
}
[data-ornament="none"] .about-photo img { transform: none; box-shadow: none; }
.principles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.principles .card__title { font: 650 18px/1.25 var(--font-display); margin-bottom: 6px; }
.about-teaser__in { display: flex; gap: 32px; align-items: center; max-width: 820px; }
.about-teaser h2 { font-size: clamp(24px, 1.2rem + 1vw, 32px); margin: 0 0 10px; }
.about-teaser p { margin: 0 0 16px; }
.team__avatars { display: flex; flex: none; }
.team__avatars .team__avatar { width: 80px; height: 80px; }
.team__avatars .team__avatar + .team__avatar { margin-left: -14px; }
@media (max-width: 640px) { .about-teaser__in { flex-direction: column; align-items: flex-start; gap: 18px; } }
[data-ornament="none"] .team__avatar { transform: none; box-shadow: none; }