/* BOXO.SHOW — Platform marketing landing page.
 *
 * Theatrical restyle from the design handoff (boxo-homepage-mockup.html /
 * boxo-style-guide.html). EVERY rule is scoped under `.platform-landing`
 * (the body class set by templates/tenants/platform_landing.html) so this
 * dark, gold-on-ink theme applies ONLY to the boxo.show marketing page and
 * its shared header/footer chrome — tenant storefronts and the staff
 * dashboard keep app.css's neutral, per-tenant-branded look untouched.
 *
 * Tokens come from boxo-tokens.css (loaded just before this file). The
 * `.platform-landing` prefix also raises specificity above app.css's
 * single-class rules, so these win regardless of stylesheet order.
 */

/* -- page shell -------------------------------------------------------- */

.platform-landing {
  background: var(--boxo-ink);
  color: var(--boxo-cream);
  font-family: var(--boxo-font-body);
}

.platform-landing p,
.platform-landing li {
  text-wrap: pretty;
}

.platform-landing h1,
.platform-landing h2,
.platform-landing h3 {
  text-wrap: balance;
}

.platform-landing a {
  color: inherit;
}

.platform-landing a:hover {
  text-decoration: none;
}

/* Let the marketing sections run full-bleed (edge-to-edge gradients and
   hairline dividers, like the mockup) instead of being boxed by
   app.css's max-width'd .site-main; each section centers its own content
   with an inner .boxo-wrap. */
.platform-landing .site-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.platform-landing .boxo-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Global focus ring — gold, never the browser default (spec: States). */
.platform-landing a:focus-visible,
.platform-landing button:focus-visible,
.platform-landing .button:focus-visible {
  outline: 2px solid var(--boxo-gold-bright);
  outline-offset: 3px;
  border-radius: var(--boxo-radius-sm);
}

/* Skip link — slides in from off-screen, gold on ink. */
.platform-landing .skip-link {
  left: -9999px;
  background: var(--boxo-gold-bright);
  color: var(--boxo-ink);
  padding: 14px 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 0 0 4px 0;
}

.platform-landing .skip-link:focus {
  left: 0;
}

/* -- shared header / footer chrome (from base.html) -------------------- */

.platform-landing .site-header {
  background: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--boxo-line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.platform-landing .site-header__inner {
  max-width: 1180px;
  padding: 22px 32px;
}

/* Wordmark: Josefin Sans, uppercase, wide tracking — no dedicated logo
   font (spec). base.html renders a single "Boxo.show" span; uppercased
   here it reads BOXO.SHOW in spotlight gold. */
.platform-landing .site-header__brand,
.platform-landing .site-header__brand span {
  color: var(--boxo-gold-bright);
}

.platform-landing .site-header__brand span {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.platform-landing .site-header__brand:hover {
  opacity: 1;
}

.platform-landing .site-nav__link {
  color: var(--boxo-cream);
  opacity: 0.95;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.platform-landing .site-nav__link:hover,
.platform-landing .site-nav__link:focus-visible {
  color: var(--boxo-gold-bright);
  opacity: 1;
}

.platform-landing .site-footer {
  border-top: 1px solid var(--boxo-line);
  color: var(--boxo-text-muted);
  padding: 8px 0;
}

.platform-landing .site-footer__inner {
  max-width: 1180px;
  padding: 20px 32px;
  justify-content: center;
  gap: 24px;
}

.platform-landing .site-footer__nav a,
.platform-landing .site-footer a {
  color: var(--boxo-text-muted);
}

.platform-landing .site-footer__nav a:hover {
  color: var(--boxo-gold-bright);
}

.platform-landing .site-footer__version {
  max-width: 1180px;
  color: var(--boxo-text-muted);
  text-align: center;
}

/* -- buttons ----------------------------------------------------------- */

.platform-landing .button,
.platform-landing .btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-family: var(--boxo-font-body);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 14px 28px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--boxo-radius-sm);
  cursor: pointer;
  transition: background var(--boxo-transition-fast),
    color var(--boxo-transition-fast), border-color var(--boxo-transition-fast);
}

.platform-landing .button--sm,
.platform-landing .btn-sm {
  padding: 10px 18px;
  font-size: 11px;
  min-height: 40px;
}

/* Primary — solid gold on ink (default .button). */
.platform-landing .button,
.platform-landing .btn-primary {
  background: var(--boxo-gold);
  color: var(--boxo-ink);
}

.platform-landing .button:hover,
.platform-landing .btn-primary:hover {
  background: var(--boxo-gold-bright);
  opacity: 1;
  text-decoration: none;
}

/* Outline — gold hairline, bright-gold label (.button--secondary). */
.platform-landing .button--secondary,
.platform-landing .btn-outline {
  background: transparent;
  color: var(--boxo-gold-bright);
  border-color: var(--boxo-gold);
}

.platform-landing .button--secondary:hover,
.platform-landing .btn-outline:hover {
  background: rgba(201, 162, 75, 0.1);
  color: var(--boxo-gold-bright);
  opacity: 1;
  text-decoration: none;
}

/* -- hero -------------------------------------------------------------- */

.platform-landing .hero--landing {
  position: relative;
  text-align: center;
  max-width: none;
  margin: 0;
  padding: 64px 32px 52px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(124, 28, 43, 0.55), transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(201, 162, 75, 0.05) 0deg 10deg, transparent 10deg 20deg);
  border-bottom: 2px solid var(--boxo-gold);
}

.platform-landing .hero__eyebrow {
  /* max-width:none releases app.css's `.hero p { max-width:40em }`, which
     otherwise shrinks this short label to a 40em box that — lacking auto
     margins — pins left instead of centering (headline/lede escape it via
     their own margin:0 auto). */
  max-width: none;
  letter-spacing: 0.5em;
  font-size: 11px;
  font-weight: 400;
  color: var(--boxo-gold);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.platform-landing .hero__headline {
  font-family: var(--boxo-font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--boxo-gold-bright);
  text-shadow: 0 0 40px rgba(228, 198, 112, 0.2);
  max-width: 760px;
  margin: 0 auto;
}

.platform-landing .hero__lede {
  max-width: 620px;
  margin: 16px auto 22px;
  color: var(--boxo-text-primary);
  font-size: 16px;
  font-weight: 400;
}

.platform-landing .hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
}

.platform-landing .hero--landing .button {
  padding: 14px 28px;
}

.platform-landing .hero__note {
  /* Same as .hero__eyebrow: release app.css's .hero p max-width so this
     short line centers instead of pinning left. */
  max-width: none;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--boxo-text-muted);
}

/* Marquee bulb strip — decorative (aria-hidden in the template). */
.platform-landing .marquee-strip {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--boxo-line) 15%, var(--boxo-line) 85%, transparent);
}

.platform-landing .marquee-strip .bulbs {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.platform-landing .marquee-strip span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--boxo-gold);
  box-shadow: 0 0 8px var(--boxo-gold-bright);
  flex-shrink: 0;
}

.platform-landing .marquee-strip span:nth-child(even) {
  opacity: 0.55;
  box-shadow: 0 0 4px var(--boxo-gold);
}

/* -- content sections -------------------------------------------------- */

.platform-landing .landing-section {
  margin: 0;
  padding: 44px 0;
  border-top: none;
  border-bottom: 1px solid var(--boxo-line);
}

.platform-landing .landing-section__eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--boxo-gold);
  margin: 0 0 8px;
}

.platform-landing .landing-section__title,
.platform-landing .landing-section h2 {
  font-family: var(--boxo-font-body);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--boxo-gold-bright);
}

.platform-landing .landing-section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

/* Optional lede paragraph under a section head (spec: pricing section). */
.platform-landing .landing-section__lede {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--boxo-text-secondary);
}

/* -- feature grid ------------------------------------------------------ */

.platform-landing .landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 0;
}

.platform-landing .landing-card {
  background: linear-gradient(180deg, rgba(124, 28, 43, 0.16), rgba(0, 0, 0, 0));
  border: 1px solid var(--boxo-line);
  border-radius: var(--boxo-radius-sm);
  padding: 20px;
  transition: border-color var(--boxo-transition-fast);
}

.platform-landing .landing-card:hover {
  border-color: var(--boxo-gold);
  box-shadow: none;
  transform: none;
}

/* Highlight variant — the lead pricing claim gets a permanent gold border
   and glow instead of only on hover, so it reads first in the grid (spec:
   pricing section, "the low/no platform fee" card). */
.platform-landing .landing-card--highlight {
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.14), rgba(0, 0, 0, 0));
  border-color: var(--boxo-gold);
  box-shadow: 0 0 32px rgba(201, 162, 75, 0.1);
}

.platform-landing .landing-card h3 {
  font-family: var(--boxo-font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--boxo-gold-bright);
  margin: 0 0 6px;
}

.platform-landing .landing-card p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--boxo-text-primary);
  margin: 0;
}

/* -- how-it-works steps ------------------------------------------------ */

.platform-landing .landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top gold rule replaces the numbered circles — sequence is carried by
   copy + DOM order (spec: Components / .step). */
.platform-landing .landing-step {
  display: block;
  text-align: center;
  padding: 0 12px;
  border-top: 2px solid var(--boxo-gold);
}

.platform-landing .landing-step h3 {
  font-family: var(--boxo-font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--boxo-gold-bright);
  margin: 16px 0 6px;
}

.platform-landing .landing-step p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--boxo-text-primary);
  margin: 0;
}

/* -- brand / white-label split ----------------------------------------- */

.platform-landing .landing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Stack the label above the preview frame (app.css lays .landing-split__panel
   out as a centered flex ROW, which would put them side by side). order:0
   overrides app.css's `order:-1` so that on mobile the copy stays ABOVE the
   preview (spec: Responsive — "copy stacks above the rotating preview"),
   rather than app.css pulling the preview to the top. */
.platform-landing .landing-split__panel {
  display: block;
  order: 0;
}

.platform-landing .landing-split__lede {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--boxo-text-primary);
  margin: 0 0 18px;
}

.platform-landing .landing-split .landing-section__title {
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 20px;
}

.platform-landing .landing-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.platform-landing .landing-checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(243, 233, 214, 0.96);
}

/* Deco star bullet — CSS background, decorative (spec: Accessibility). */
.platform-landing .landing-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L15 9 L24 12 L15 15 L12 24 L9 15 L0 12 L9 9 Z' fill='%23C9A24B'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
}

/* -- storefront preview rotator ---------------------------------------- */

.platform-landing .example-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(243, 233, 214, 0.7);
}

.platform-landing .example-label .venue-name {
  color: var(--boxo-gold-bright);
  font-weight: 600;
  transition: opacity var(--boxo-transition-swap);
}

.platform-landing .example-progress {
  display: flex;
  gap: 6px;
}

.platform-landing .example-progress span {
  width: 18px;
  height: 2px;
  background: var(--boxo-line);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.platform-landing .example-progress span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--boxo-gold);
  transform: scaleX(0);
  transform-origin: left;
}

.platform-landing .example-progress span.active::after {
  animation: boxo-fillbar 5s linear forwards;
}

.platform-landing .example-progress span.done::after {
  transform: scaleX(1);
}

@keyframes boxo-fillbar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.platform-landing .preview-frame {
  --pf-ink: var(--boxo-ink);
  --pf-border: var(--boxo-gold);
  --pf-accent: var(--boxo-gold);
  --pf-accent-bright: var(--boxo-gold-bright);
  --pf-card1: var(--boxo-oxblood);
  --pf-card2: var(--boxo-oxblood-dark);
  --pf-text: rgba(243, 233, 214, 0.9);
  background: var(--pf-ink);
  border: 1px solid var(--pf-border);
  border-radius: var(--boxo-radius-md);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(201, 162, 75, 0.12);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.platform-landing .preview-frame[data-theme="blackbox"] {
  --pf-ink: #0A0A0A;
  --pf-border: #B23A48;
  --pf-accent: #C4485A;
  --pf-accent-bright: #E2637A;
  --pf-card1: #1C1C1C;
  --pf-card2: #0A0A0A;
  --pf-text: rgba(255, 255, 255, 0.9);
}

.platform-landing .preview-frame[data-theme="empire"] {
  --pf-ink: #082423;
  --pf-border: #1E7A75;
  --pf-accent: #4FB3AC;
  --pf-accent-bright: #8CE0D9;
  --pf-card1: #12504C;
  --pf-card2: #082423;
  --pf-text: rgba(243, 233, 214, 0.92);
}

.platform-landing .preview-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--boxo-line);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(243, 233, 214, 0.82);
}

.platform-landing .preview-chrome .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--boxo-line);
}

.platform-landing .preview-frame .ticket-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-card1) 22%, transparent), rgba(0, 0, 0, 0));
  border: none;
  border-radius: 0;
}

.platform-landing .preview-frame .ticket-card .art {
  height: 170px;
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--pf-accent) 35%, transparent), transparent 55%),
    linear-gradient(135deg, var(--pf-card1), var(--pf-card2));
}

.platform-landing .preview-frame .ticket-card .art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--pf-accent) 14%, transparent) 0 2px, transparent 2px 22px);
}

.platform-landing .preview-frame .ticket-card .body {
  padding: 18px;
}

.platform-landing .preview-frame .ticket-card .eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pf-accent);
  margin-bottom: 6px;
  transition: color var(--boxo-transition-swap);
}

/* Show title forced to one line + ellipsis — stops layout shift as the
   rotator cycles titles of different lengths (spec: do not remove). */
.platform-landing .preview-frame .ticket-card .show-title {
  font-family: var(--boxo-font-body);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--pf-accent-bright);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--boxo-transition-swap), opacity var(--boxo-transition-swap);
}

.platform-landing .preview-frame .ticket-card .venue {
  font-size: 13px;
  font-weight: 400;
  color: var(--pf-text);
  margin-bottom: 14px;
  transition: color var(--boxo-transition-swap), opacity var(--boxo-transition-swap);
}

.platform-landing .preview-frame .ticket-card .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.platform-landing .preview-frame .ticket-card .price {
  font-weight: 600;
  font-size: 14px;
  color: var(--pf-accent);
  transition: color var(--boxo-transition-swap), opacity var(--boxo-transition-swap);
}

/* The preview's own outline button tracks the active theme's accent. */
.platform-landing .preview-frame .button--secondary {
  color: var(--pf-accent-bright);
  border-color: var(--pf-accent);
  transition: color var(--boxo-transition-swap), border-color var(--boxo-transition-swap);
}

.platform-landing .preview-frame .button--secondary:hover {
  background: transparent;
}

.platform-landing .fade-swap {
  opacity: 0;
}

/* -- closing CTA band -------------------------------------------------- */

.platform-landing .landing-cta {
  margin: 0;
  padding: 48px 32px;
  border-radius: 0;
  text-align: center;
  color: var(--boxo-cream);
  background: radial-gradient(ellipse at center, rgba(124, 28, 43, 0.35), transparent 70%);
  border-bottom: 2px solid var(--boxo-gold);
}

.platform-landing .landing-cta h2 {
  font-family: var(--boxo-font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--boxo-gold-bright);
  margin: 0 0 12px;
}

.platform-landing .landing-cta p {
  color: var(--boxo-text-secondary);
  font-weight: 400;
  margin: 0 0 20px;
}

.platform-landing .landing-cta .button {
  background: var(--boxo-gold);
  color: var(--boxo-ink);
}

.platform-landing .landing-cta .button:hover {
  background: var(--boxo-gold-bright);
}

/* -- contact form (replaces the old mailto CTA) ------------------------ */

.platform-landing .contact-form {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: left;
}

.platform-landing .contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.platform-landing .contact-form__field {
  margin-bottom: 16px;
}

.platform-landing .contact-form__field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--boxo-text-secondary);
}

.platform-landing .contact-form__field input,
.platform-landing .contact-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--boxo-font-body);
  font-size: 16px;
  font-weight: var(--boxo-weight-body);
  color: var(--boxo-text-primary);
  background: rgba(243, 233, 214, 0.06);
  border: 1px solid var(--boxo-line);
  border-radius: var(--boxo-radius-sm);
  transition: border-color var(--boxo-transition-fast);
}

.platform-landing .contact-form__field input::placeholder,
.platform-landing .contact-form__field textarea::placeholder {
  color: var(--boxo-text-muted);
  opacity: 0.6;
}

.platform-landing .contact-form__field input:focus,
.platform-landing .contact-form__field textarea:focus {
  outline: none;
  border-color: var(--boxo-gold-bright);
}

.platform-landing .contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.platform-landing .contact-form .button {
  margin-top: 4px;
}

/* Error text needs its own red -- the token palette has none -- picked
   light enough to hold >=7:1 contrast on the --boxo-ink background. */
.platform-landing .contact-form__error,
.platform-landing .contact-form__errors {
  color: #f2b8b5;
  font-size: 14px;
  margin: 6px 0 0;
}

.platform-landing .contact-form__errors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(242, 184, 181, 0.4);
  border-radius: var(--boxo-radius-sm);
}

.platform-landing .contact-form__errors p {
  margin: 0;
  color: inherit;
}

/* Honeypot: visually gone (not display:none -- some naive bots skip
   truly hidden fields, and we WANT them to fill it). */
.platform-landing .contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.platform-landing .contact-form__success {
  max-width: 640px;
  margin: 28px auto 0;
  padding: 24px 28px;
  border: 1px solid var(--boxo-gold);
  border-radius: var(--boxo-radius-sm);
  background: rgba(201, 162, 75, 0.08);
}

.platform-landing .contact-form__success h3 {
  margin: 0 0 8px;
  color: var(--boxo-gold-bright);
}

.platform-landing .contact-form__success p {
  margin: 0;
  color: var(--boxo-text-secondary);
}

@media (max-width: 767px) {
  .platform-landing .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* -- reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .platform-landing .example-progress span.active::after {
    animation: none;
    transform: scaleX(1);
  }
  .platform-landing .example-label .venue-name,
  .platform-landing .preview-frame,
  .platform-landing .preview-frame * {
    transition: none;
  }
}

/* -- responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
  .platform-landing .landing-split {
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .platform-landing .boxo-wrap {
    padding: 0 20px;
  }
  .platform-landing .site-header__inner {
    padding: 16px 20px;
  }
  .platform-landing .hero--landing {
    padding: 48px 20px 40px;
  }
  .platform-landing .landing-section {
    padding: 32px 0;
  }
  .platform-landing .landing-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .platform-landing .landing-grid {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .platform-landing .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-landing .hero__actions .button {
    width: 100%;
  }
  .platform-landing .example-label {
    flex-wrap: wrap;
    gap: 8px;
  }
}