/* Landing experience layer — hand-written vanilla CSS, loaded after
   landing.built.css and deliberately OUTSIDE the Tailwind build (no build
   step, no processing; postbuild.js copies it to dist as-is). It reads the
   press tokens landing.built.css defines.

   Section reveals, the timeline, and the theme wipe carry
   the existing experience. The homepage now adds restrained movement to
   oversized edge marks, without changing the hero or footer.

   Everything here is progressive enhancement driven by landing-fx.js:
   the page must render complete and legible if this file or the script is
   missing. Hidden "prep" states are therefore gated on classes the script
   adds (.fx-term-prep, .fx-tl-prep) or on .reveal-enabled, which
   landing.html's head script owns and withdraws on failure.

   Motion: landing-fx.js returns early under prefers-reduced-motion, so the
   prep classes are never added there; the media block at the bottom is the
   belt-and-braces for CSS-only animation and for a preference that flips
   mid-session. Every transition names the properties it moves. */

/* ---------------------------------------------------------------- */
/* Section headings: settle in; eyebrows are plate labels with rules */
/* ---------------------------------------------------------------- */
.reveal-enabled .reveal .fx-title {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease,
    transform 0.8s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: 0.08s;
}
.reveal-enabled .reveal.active .fx-title {
  opacity: 1;
  transform: none;
}

/* A centred eyebrow carries a hairline on each side; a left-set one runs a
   single rule off its end, like every plate label on the site. */
.fx-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.fx-eyebrow::before,
.fx-eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.fx-eyebrow.fx-eyebrow-left { justify-content: flex-start; }
.fx-eyebrow.fx-eyebrow-left::before { display: none; }

/* ---------------------------------------------------------------- */
/* CLI terminal: lines "execute" one by one                         */
/* ---------------------------------------------------------------- */
#fx-terminal > p {
  transition:
    opacity 0.25s ease,
    transform 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
#fx-terminal.fx-term-prep > p {
  opacity: 0;
  transform: translateY(6px);
}
#fx-terminal.fx-term-prep > p.fx-on {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- */
/* Pipeline timeline: markers land in sequence (path draw is scripted) */
/* ---------------------------------------------------------------- */
#how-it-works #tl-dot-1,
#how-it-works #tl-dot-2,
#how-it-works #tl-dot-3 {
  transition: opacity 0.3s ease;
}
#how-it-works.fx-tl-prep #tl-dot-1,
#how-it-works.fx-tl-prep #tl-dot-2,
#how-it-works.fx-tl-prep #tl-dot-3 {
  opacity: 0;
}
#how-it-works.fx-tl-go #tl-dot-1 { opacity: 1; transition-delay: 0.15s; }
#how-it-works.fx-tl-go #tl-dot-2 { opacity: 1; transition-delay: 0.7s; }
#how-it-works.fx-tl-go #tl-dot-3 { opacity: 1; transition-delay: 1.25s; }

/* ---------------------------------------------------------------- */
/* Animated stat counters                                           */
/* ---------------------------------------------------------------- */
/* Tabular digits so the number doesn't jitter sideways mid-count. */
.fx-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- */
/* Theme toggle: circular wipe via the View Transitions API         */
/* ---------------------------------------------------------------- */
/* The script animates a clip-path circle on the new snapshot; the UA's
   default cross-fade would fight it, so both defaults are disabled. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2147483646; }

/* ---------------------------------------------------------------- */
/* Reduced motion: neutralize every effect in this file             */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-enabled .reveal .fx-title { opacity: 1; transform: none; transition: none; }
  #fx-terminal > p,
  #fx-terminal.fx-term-prep > p { opacity: 1; transform: none; transition: none; }
  #how-it-works.fx-tl-prep #tl-dot-1,
  #how-it-works.fx-tl-prep #tl-dot-2,
  #how-it-works.fx-tl-prep #tl-dot-3 { opacity: 1; transition: none; }
}

/* Homepage story — the editor's paper, ink, and blue carried across an
   asymmetric series of work surfaces. Decoration is clipped locally, and
   every product screenshot comes from the shipping app. */
.home-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 76px 32px;
}
.home-title {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-top: 18px;
}
.home-title--small { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.home-intro { color: var(--paper-ink-soft); font-size: 1.0625rem; line-height: 1.75; max-width: 33rem; margin-top: 24px; }
.home-heading { margin-bottom: 38px; }
.home-heading--split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; }
.home-heading--split > .home-intro { margin: 0 0 4px; max-width: 28rem; justify-self: end; }
.home-text-link { display: inline-flex; gap: 12px; align-items: center; width: fit-content; font-size: .875rem; line-height: 1.6; color: var(--paper-spot-text); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.home-text-link:hover { color: var(--paper-ink); }
.home-text-link:focus-visible, .home-directory > summary:focus-visible { outline: 2px solid var(--paper-spot); outline-offset: 5px; }
.home-spot-text { color: var(--paper-spot-text); }

/* The kicker, edge art, watermark and orbit are shared editorial primitives:
   they live in tailwind.landing.css (.site-*) so interior pages use them too. */

/* First spread: a real editor capture and a useful map of the delivery. */
.home-workflow { padding-top: 20px; }
.home-workbench { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); border: 1px solid var(--paper-hairline); background: var(--paper-sheet); }
.home-product-shot { min-width: 0; align-self: stretch; display: flex; flex-direction: column; border-right: 1px solid var(--paper-hairline); }
.home-product-shot > img { width: 100%; height: auto; display: block; flex: 1; object-fit: contain; object-position: center; background: var(--paper-stock); }
.home-product-shot figcaption { padding: 20px 24px; border-top: 1px solid var(--paper-hairline); color: var(--paper-ink-soft); font-size: .875rem; line-height: 1.65; }
.home-product-shot figcaption strong { display: block; color: var(--paper-ink); margin-bottom: 3px; }
.home-kit { padding: 30px; }
.home-kit > h3 { font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 16px 0; }
.home-kit > p:not(.plate-label) { color: var(--paper-ink-soft); font-size: .9375rem; line-height: 1.7; }
.home-kit-files { margin: 24px 0; }
.home-kit-files > div { padding: 13px 0; border-top: 1px solid var(--paper-hairline); }
.home-kit-files dt { font: 500 .875rem/1.6 var(--font-mono); }
.home-kit-files dt > span { display: inline-block; color: var(--paper-spot-text); width: 30px; font-size: .75rem; }
.home-kit-files dd { font-size: .875rem; line-height: 1.5; color: var(--paper-ink-soft); margin: 5px 0 0 30px; }
.home-refine-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 32px; border-bottom: 1px solid var(--paper-hairline); padding-bottom: 28px; }
.home-refine-tools > div { position: relative; padding: 0 24px; border-left: 1px solid var(--paper-hairline); }
.home-refine-tools > div:first-child { padding-left: 0; border-left: 0; }
.home-refine-tools h3 { font-size: 1rem; font-weight: 700; margin: 12px 0 7px; }
.home-refine-tools p { font-size: .875rem; color: var(--paper-ink-soft); line-height: 1.65; }
.home-tool-symbol { font: 400 1.5rem/1 var(--font-mono); color: var(--paper-spot-text); }
.home-privacy-line { display: flex; gap: 18px; align-items: center; margin-top: 22px; }
.home-privacy-icon { color: var(--paper-spot-text); font-size: 1.5rem; }
.home-privacy-line p { color: var(--paper-ink-soft); font-size: .875rem; line-height: 1.6; flex: 1; }
.home-privacy-line strong { color: var(--paper-ink); }
.home-privacy-line a { flex: 0 0 auto; }

/* A live theme specimen shares one spread with its explanation. */
.home-theme-section { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.65fr); gap: 52px; align-items: center; }
.home-theme-heading .home-title { font-size: clamp(2rem, 3.2vw, 3rem); }
.home-theme-heading .home-intro { font-size: 1rem; }
.home-interaction-hint { color: var(--paper-spot-text); font-size: .875rem; line-height: 1.65; font-weight: 600; margin-top: 25px; }
.home-theme-stage { gap: 12px; }
.home-theme-stage .h-72 { height: 250px; }
.home-theme-stage .landing-specimen-tag { font-size: .6875rem; }
.home-theme-stage .absolute.top-5 { top: 14px; left: 14px; }
.home-theme-stage .absolute.top-5.right-5 { left: auto; right: 10px; top: 48px; }
.home-theme-notes { gap: 24px; margin-top: 24px; }
.home-theme-notes .size-10 { display: none; }
.home-theme-notes p { font-size: .875rem; }

/* Keep the app-to-package timeline, but cut the repeated empty margins. */
.home-handoff-wrap { margin-top: 36px; margin-bottom: 36px; }
.home-handoff { padding: 64px 22px; }
.home-handoff .home-title { font-size: clamp(2rem, 3.3vw, 3rem); }
.home-handoff .mt-10 { margin-top: 28px; }
.home-handoff .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 20px; }
.home-handoff .text-lg\/8 { font-size: 1rem; line-height: 1.75; }
.home-handoff .text-base\/7 { font-size: .9375rem; line-height: 1.7; }
.home-handoff .landing-plate-card { padding: 20px; }

/* An editorial sidebar gives the use cases a different pace. */
.home-use-cases { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.65fr); gap: 64px; align-items: start; }
.home-use-heading { position: sticky; top: 120px; }
.home-use-heading .home-title { font-size: clamp(2rem, 3vw, 2.8rem); }
.home-use-heading .home-intro { font-size: 1rem; }
.home-use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 30px; }
.home-use-card { border-top: 1px solid var(--paper-hairline); padding-top: 20px; }
.home-use-card .home-use-icon { width: fit-content; padding: 0; margin-bottom: 16px; color: var(--paper-spot-text); background: transparent; }
.home-use-card h3 { font-size: 1.0625rem; }
.home-use-card p { font-size: .875rem; line-height: 1.75; }

/* Visual launch board: 3D is the lead, QR and social are smaller specimens. */
.home-launch-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.home-3d-feature { grid-row: span 2; border: 1px solid var(--paper-hairline); background: var(--paper-sheet); position: relative; }
.home-3d-shot { border-bottom: 1px solid var(--paper-hairline); }
.home-3d-shot img { display: block; width: 100%; height: auto; }
.home-3d-shot figcaption { padding: 11px 20px; color: var(--paper-ink-soft); border-top: 1px solid var(--paper-hairline); font: 400 .75rem/1.5 var(--font-mono); }
.home-3d-copy { padding: 32px; }
.home-3d-copy > h3 { font-size: 1.7rem; line-height: 1.2; }
.home-3d-copy > p:not(.plate-label) { color: var(--paper-ink-soft); }
.home-3d-copy .site-btn { margin-top: 0; }
.home-export-list { display: flex; flex-wrap: wrap; gap: 10px 24px; border-top: 1px solid var(--paper-hairline); border-bottom: 1px solid var(--paper-hairline); padding: 18px 0; margin: 20px 0; color: var(--paper-ink-soft); font-size: .875rem; line-height: 1.6; }
.home-export-list p { flex: 1 1 130px; }
.home-export-list strong { display: block; color: var(--paper-ink); }
.home-launch-card { border: 1px solid var(--paper-hairline); background: var(--paper-sheet); padding: 28px; }
.home-launch-card > .plate-label { margin-bottom: 22px; }
.home-launch-card h3 { font-size: 1.4rem; line-height: 1.25; margin-bottom: 14px; }
.home-launch-card > p:not(.plate-label) { font-size: .9375rem; line-height: 1.7; margin-bottom: 18px; }
.home-launch-card > p.text-sm { font-size: .875rem; }
.home-qr-shot { float: right; width: 42%; max-width: 190px; margin: 0 0 20px 22px; }
.home-qr-shot img { display: block; width: 100%; height: auto; }
.home-qr-shot figcaption { font: 400 .6875rem/1.6 var(--font-mono); margin-top: 8px; color: var(--paper-ink-soft); text-align: center; }
.home-qr-feature > a { clear: both; }
.home-social-preview { border: 1px solid var(--paper-hairline); margin-bottom: 24px; }
.home-social-art { display: flex; gap: 24px; align-items: center; padding: 28px 22px; background: var(--paper-spot-wash); color: var(--paper-ink); }
.home-social-art > img { width: 70px; height: 70px; flex: 0 0 auto; object-fit: contain; }
.home-social-art > span { min-width: 0; font-weight: 700; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.025em; }

/* A compact directory, not another oversized card grid. */
.home-tools { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.65fr); gap: 64px; align-items: start; }
.home-tools-heading .home-intro { font-size: 1rem; }
.home-directory { min-width: 0; border-top: 1px solid var(--paper-hairline); border-bottom: 1px solid var(--paper-hairline); }
.home-directory > summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; font-size: 1.0625rem; font-weight: 600; list-style: none; }
.home-directory > summary::-webkit-details-marker { display: none; }
.home-directory > summary > span { color: var(--paper-spot-text); font: 400 1.5rem/1 var(--font-mono); transition: transform .2s ease; }
.home-directory[open] > summary > span { transform: rotate(45deg); }
.home-directory .tool-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 10px 0 26px; }
.home-directory .tool-index-group { padding: 0; background: transparent; border: 0; }
/* Two columns: Image Tools spans two rows on the left so Social Media stacks
   directly under Developer on the right, instead of a stranded third row. */
.home-directory .tool-index-grid { align-items: start; }
.home-directory .tool-index-group:has(#mega-t-cat-image-tools) { grid-row: span 2; }
.home-directory .tool-index-list a { font-size: .875rem; }
.home-pricing { position: relative; isolation: isolate; padding-top: 64px; padding-bottom: 72px; }
.home-pricing > .text-center { max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 38px; }
.home-pricing > .grid { max-width: 1056px; gap: 24px; }
.home-pricing > .grid > div { padding: 36px; }

/* Questions and contact use the full page rails. */
.home-faq { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.65fr); gap: 64px; align-items: start; }
.home-faq-heading { position: sticky; top: 120px; }
.home-faq-heading .home-text-link { margin-top: 28px; }
.home-faq-list { border-top: 1px solid var(--paper-hairline); }
.home-faq-list .faq-item { border: 0; border-bottom: 1px solid var(--paper-hairline); background: transparent; }
.home-faq-list .faq-btn { padding: 19px 0; font-size: .9375rem; font-weight: 600; }
.home-faq-list .faq-content p { padding: 0 30px 22px 0; line-height: 1.75; }
/* The contact spread is shared by every page: .site-contact in tailwind.landing.css. */

@media (max-width: 1023px) {
  .home-heading--split { gap: 32px; }
  .home-workbench { grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); }
  .home-kit { padding: 24px; }
  .home-theme-section { grid-template-columns: 1fr; gap: 30px; }
  .home-theme-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .home-theme-heading .site-kicker { grid-column: 1 / -1; }
  .home-theme-heading .home-interaction-hint { grid-column: 2; margin-top: 0; }
  .home-theme-stage .h-72 { height: 280px; }
  .home-use-cases, .home-tools, .home-faq { gap: 36px; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.6fr); }
  .home-launch-grid { grid-template-columns: 1fr 1fr; }
  .home-3d-feature { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1.2fr 1fr; position: static; }
  .home-3d-shot { border-bottom: 0; border-right: 1px solid var(--paper-hairline); align-self: stretch; display: flex; flex-direction: column; }
  .home-3d-shot img { flex: 1; object-fit: contain; background: var(--paper-stock); }
  .home-3d-copy { padding: 24px; }
  .home-qr-shot { float: none; width: 180px; margin: 0 auto 24px; }
}
@media (max-width: 767px) {
  .home-section { padding: 48px 24px; }
  .home-title { font-size: clamp(2rem, 7vw, 2.8rem); }
  .home-heading { margin-bottom: 28px; }
  .home-heading--split { display: block; }
  .home-heading--split > .home-intro { margin-top: 20px; max-width: none; }
  .home-workflow { padding-top: 4px; }
  .home-workbench { grid-template-columns: 1fr; }
  .home-product-shot { border-right: 0; border-bottom: 1px solid var(--paper-hairline); }
  .home-product-shot > img { flex: none; }
  .home-product-shot figcaption { padding: 18px; }
  .home-kit { padding: 24px; }
  .home-kit > h3 br { display: none; }
  .home-refine-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; margin-top: 26px; }
  .home-refine-tools > div { padding: 0 16px; }
  .home-refine-tools > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .home-refine-tools h3 { line-height: 1.35; }
  .home-privacy-line { flex-wrap: wrap; gap: 10px; }
  .home-privacy-line a { margin-left: 30px; }
  .home-theme-heading { display: block; }
  .home-theme-heading .home-interaction-hint { margin-top: 18px; }
  .home-theme-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-theme-stage .h-72 { height: 200px; padding: 32px 12px 16px; }
  .home-theme-stage .landing-specimen-tag { font-size: .6875rem; line-height: 1.25; max-width: calc(100% - 20px); padding: 5px 6px; }
  .home-theme-stage .absolute.top-5 { left: 10px; top: 10px; }
  .home-theme-stage .absolute.top-5.right-5 { top: auto; bottom: 8px; right: 8px; }
  .home-theme-stage #sim-badge { display: none; }
  .home-theme-stage #sim-toggle-btn { padding: 8px; }
  .home-theme-notes { gap: 18px; }
  .home-handoff-wrap { margin: 20px auto; }
  .home-handoff { padding: 36px 0; }
  .home-handoff .gap-y-16 { row-gap: 32px; }
  .home-handoff .home-title { font-size: 2rem; }
  .home-handoff .landing-plate-card { padding: 15px; gap: 12px; }
  .home-handoff .w-14 { display: none; }
  .home-use-cases, .home-tools, .home-faq { grid-template-columns: 1fr; gap: 30px; }
  .home-use-heading, .home-faq-heading { position: static; }
  .home-use-grid { gap: 24px; }
  .home-use-card .home-use-icon { margin-bottom: 12px; }
  .home-launch-grid { grid-template-columns: 1fr; }
  .home-3d-feature { display: block; grid-column: auto; }
  .home-3d-shot { display: block; border-right: 0; border-bottom: 1px solid var(--paper-hairline); }
  .home-3d-copy, .home-launch-card { padding: 24px; }
  .home-qr-shot { width: 40%; float: right; margin: 0 0 16px 16px; }
  .home-export-list { display: block; }
  .home-export-list p + p { margin-top: 12px; }
  .home-directory .tool-index-grid { gap: 26px; }
  .home-pricing { padding-top: 48px; padding-bottom: 48px; }
  .home-pricing > .grid > div { padding: 28px; }
  .home-faq-heading .home-text-link { margin-top: 18px; }
}
@media (max-width: 374px) {
  .home-section { padding-left: 18px; padding-right: 18px; }
  .home-use-grid, .home-directory .tool-index-grid { grid-template-columns: 1fr; }
  .home-directory .tool-index-group:has(#mega-t-cat-image-tools) { grid-row: auto; }
  .home-qr-shot { float: none; width: 170px; margin: 0 auto 24px; }
  .home-social-art { padding: 22px 16px; gap: 16px; }
  .home-social-art > img { width: 48px; height: 48px; }
  .home-social-art > span { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-directory > summary > span { transition: none; }
}

.home-handoff .home-timeline { width: 100%; max-width: 32rem; min-width: 0; }