/* ShinyPost website — index.html (landing) styles, Story v2. Reads site.css tokens and the .sp-* kit; adds the
   landing sections, the dark bands, the product demos (autoplay figures and hover-play cards), the tile detail panel
   and the reveal groups.
   Every colour is a token: light on :root, dark under prefers-color-scheme (unless pinned light) and again under
   [data-theme="dark"]. The dark bands (.ld-dark) stay dark in both themes by carrying the dark token set themselves. */

/* ═══════════════════════════ LANDING TOKENS ═══════════════════════════ */
:root{
  --ld-stage:#08122a; --ld-stage-2:#0b1633;
  --ld-tile:#eef3ff; --ld-tile-line:rgba(8,18,42,.06);
  --ld-section:clamp(56px,4vw + 24px,104px);
  --hero-reserve:40px;
  --ld-ink-light:#08122a; --ld-ink-light-muted:#5f6c83; --ld-ink-light-faint:#56637c; --ld-ink-light-accent:#2f5fe0;
  --ld-ink-dark:#f4f2ef; --ld-ink-dark-muted:#b5bed1; --ld-ink-dark-faint:#9faac2; --ld-ink-dark-accent:#8ba4ec;
  --ld-card-ring:transparent;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --ld-tile:#162640; --ld-tile-line:rgba(185,201,246,.12); --ld-card-ring:rgba(185,201,246,.16) }
}
:root[data-theme="dark"]{ --ld-tile:#162640; --ld-tile-line:rgba(185,201,246,.12); --ld-card-ring:rgba(185,201,246,.16) }

/* dark bands: the design-system dark set, whatever the page theme (site.css tokens, dark values) */
.ld-dark{
  color-scheme:dark;
  --sp-ui-canvas:#08122a; --sp-ui-nav:#101c34; --sp-ui-surface:#162640; --sp-ui-surface-hi:#1e3050; --sp-ui-raised:#22375c; --sp-ui-surface-hover:#1e3050;
  --sp-ui-border:#334460; --sp-ui-line-soft:#223252; --sp-ui-hair:rgba(244,242,239,.08);
  --sp-ui-text:#f4f2ef; --sp-ui-muted:#b5bed1; --sp-ui-faint:#9faac2;
  --sp-ui-icon:#8ba4ec; --sp-ui-link:#8ba4ec; --sp-ui-focus:#8ba4ec;
  --sp-ui-selected:#1c315a; --sp-ui-selected-foreground:#b9c9f6; --sp-ui-selected-ring:rgba(185,201,246,.22);
  --sp-ui-softer:rgba(185,201,246,.045); --sp-ui-soft:rgba(185,201,246,.08); --sp-ui-soft-strong:rgba(185,201,246,.14);
  --sp-ui-track:rgba(185,201,246,.07); --sp-ui-track-thumb:#1c315a; --sp-ui-track-thumb-shadow:inset 0 0 0 1px rgba(185,201,246,.18);
  --sp-ui-field:rgba(185,201,246,.045);
  --sp-ui-btn-bg:rgba(185,201,246,.08); --sp-ui-btn-line:transparent; --sp-ui-btn-hover:rgba(185,201,246,.14); --sp-ui-chrome-line:transparent;
  --sp-ui-card-bg:#101c34; --sp-ui-card-shadow:inset 0 1px 0 rgba(185,201,246,.05),0 10px 30px -18px rgba(2,6,18,.8);
  --sp-ui-success-bg:#173b35; --sp-ui-success-foreground:#bfeedb; --sp-ui-success-line:rgba(127,214,178,.30);
  --sp-ui-warning:#ffd79a; --sp-ui-warning-bg:rgba(242,184,90,.09); --sp-ui-warning-line:rgba(242,184,90,.25);
  --sp-ui-glass:rgba(14,24,48,.72); --sp-ui-glass-line:rgba(185,201,246,.18); --sp-ui-glass-top:rgba(244,242,239,.14);
  --sp-ui-shadow-card:0 18px 44px rgba(2,6,18,.5),0 1px 3px rgba(2,6,18,.4);
  --sp-ui-shadow-float:0 24px 60px rgba(2,6,18,.55),0 2px 10px rgba(2,6,18,.35);
  --sp-ui-shadow-window:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(185,201,246,.12),inset 0 1px 0 rgba(244,242,239,.08);
  --sp-ui-media-keyline:0 1px 0 rgba(255,255,255,.06),0 0 0 .5px rgba(0,0,0,.6);
  --sp-ui-stage:#08122a; --sp-ui-stage-dot:rgba(185,201,246,.09);
  --ld-card-ring:rgba(185,201,246,.16); --ld-tile:#162640; --ld-tile-line:rgba(185,201,246,.12);
  background:var(--ld-stage);color:var(--sp-ui-text)
}

/* ═══════════════════════════ COMMON ═══════════════════════════ */
.page-landing main{overflow-x:clip}
.page-landing .site-section{padding-block:var(--ld-section)}
.band{padding-block:var(--ld-section)}
.site-h2{letter-spacing:-.035em}
/* section head: the heading on the left, the lede on the right, both on the same baseline */
.ld-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;margin-bottom:clamp(30px,4vw,52px)}
.ld-head .site-h2{max-width:16ch}
.ld-head .site-lede{max-width:46ch;padding-bottom:.3em}
.ld-capture{width:100%;height:auto}
picture{display:block}
.ld-crop{position:relative;overflow:hidden;width:100%}
.ld-crop img{display:block;height:auto;transform-origin:0 0}
.ld-rec{width:7px;height:7px;border-radius:50%;background:var(--sp-ui-rec);box-shadow:0 0 0 3px rgba(239,79,76,.22);display:inline-block}
.arr{width:16px;height:16px;flex-shrink:0;color:var(--sp-ui-icon);transition:transform var(--sp-ui-motion-standard) var(--sp-ui-ease-move)}
@media (max-width:860px){.ld-head{grid-template-columns:1fr;gap:12px}.ld-head .site-lede{padding-bottom:0}}

/* reveal groups: hidden only when the page was marked by the head gate (JS + observer + motion allowed) */
.js-rv .rv .rv__i{opacity:0;transform:translateY(16px)}
.js-rv .rv.is-in .rv__i{opacity:1;transform:none;transition:opacity 540ms var(--sp-ui-ease-enter),transform 540ms var(--sp-ui-ease-enter);transition-delay:calc(var(--i,0) * 75ms)}
@media (prefers-reduced-motion:reduce){.rv .rv__i{opacity:1!important;transform:none!important;transition:none!important}}

/* ═══════════════════════════ 1 · HERO ═══════════════════════════ */
.hero{padding:clamp(36px,5.5vw,68px) 0 clamp(24px,3vw,36px)}
.hero__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(280px,4fr);gap:28px 56px;align-items:end}
.hero__h1{font:800 clamp(2.5rem,1.35rem + 4.3vw,4.5rem)/1.02 var(--sp-ui-font);letter-spacing:-.045em;text-wrap:balance;max-width:16ch}
.hero__h1 span{display:inline}
.hero__h1-b{color:var(--sp-ui-muted)}
/* "CREATORS": bold caps in the ShinyPost blue-to-mint gradient. site-shared.js splits it into letters
   that each paint their slice of one gradient; a slow wave of light passes through them, lifting and gently enlarging
   each letter in turn (about 1 s per letter, 0.11 s apart: one pass in about 1.8 s), then rests. Without JS it is the plain gradient word. */
.hero__h1-script{display:inline-block;font-weight:800;font-size:1.07em;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  background-image:linear-gradient(100deg,#2f5fe0 0%,#5d84ea 38%,#8ba4ec 62%,#7fd6b2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}
.hero__h1-script.is-split{background:none}
.hero__h1-script .sw{display:inline-block;background-image:linear-gradient(100deg,#2f5fe0 0%,#5d84ea 38%,#8ba4ec 62%,#7fd6b2 100%);
  background-size:var(--w,100%) 100%;background-position:calc(var(--x,0px) * -1) 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  transform-origin:50% 78%;animation:sp-wave 5.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i,0) * .11s)}
@keyframes sp-wave{0%,20%,100%{transform:none;filter:brightness(1)}10%{transform:translateY(-.03em) scale(1.08);filter:brightness(1.22)}}
@media (prefers-reduced-motion:reduce){.hero__h1-script .sw{animation:none}}
.hero__aside{display:flex;flex-direction:column;gap:22px;padding-bottom:.4em}
.hero__sub{font:500 clamp(1.0625rem,1rem + .35vw,1.1875rem)/1.55 var(--sp-ui-font);color:var(--sp-ui-muted);max-width:40ch;text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.hero__tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(32px,4.5vw,56px)}
.hero__tile{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:22px;overflow:hidden;background:var(--ld-tile);box-shadow:0 0 0 1px var(--ld-tile-line);color:var(--sp-ui-text);text-decoration:none;isolation:isolate;transition:box-shadow var(--sp-ui-motion-standard)}
.hero__tile:hover{text-decoration:none;box-shadow:0 0 0 1px var(--ld-tile-line),var(--sp-ui-shadow-lift)}
.hero__tile:hover .arr{transform:translateY(3px)}
.hero__tile:focus-visible{outline:2px solid var(--sp-ui-focus);outline-offset:3px}
.hero__tile-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:20px 22px 0}
.hero__tile-head b{font:800 1.0625rem/1.2 var(--sp-ui-font);letter-spacing:-.01em}
.hero__tile-head>span{font:500 14px/1.45 var(--sp-ui-font);color:var(--sp-ui-muted);text-wrap:pretty}
.hero__tile-head .arr{align-self:center}
.hero__shot{position:relative;display:flex;align-items:center;flex:1;margin:18px 22px 22px}
.hero__cap{width:100%;height:auto;border-radius:10px;box-shadow:0 24px 60px -20px rgba(8,18,42,.35),var(--sp-ui-media-keyline)}
.hero__thumb{position:absolute;right:-8px;bottom:-12px;width:36%;max-width:200px;filter:drop-shadow(0 18px 30px rgba(8,18,42,.28));pointer-events:none}
.hero__thumb-img{width:100%;height:auto}
.hero__tile--record{background:var(--ld-stage)}
.hero__stage{display:flex;flex:1;align-items:center;min-width:0}
.hero__slot{position:relative;display:block;width:100%;padding:var(--hero-reserve)}
.hero__finish{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:0}
.hero__window{position:relative;z-index:1;display:block;border-radius:10px;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 .5px rgba(185,201,246,.14)}
.hero__img{width:100%;height:auto;border-radius:10px;display:block}
.hero__caption{margin-top:14px;font:var(--sp-ui-type-small);font-size:13px;color:var(--sp-ui-faint)}
@media (max-width:1000px){.hero__top{grid-template-columns:1fr;gap:20px}.hero__aside{padding-bottom:0}.hero__h1{max-width:18ch}}
@media (max-width:759px){
  :root{--hero-reserve:26px}
  .hero__tiles{display:flex;gap:12px;margin-inline:calc(var(--site-gutter) * -1);padding:4px var(--site-gutter) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--site-gutter);scrollbar-width:none}
  .hero__tiles::-webkit-scrollbar{display:none}
  .hero__tile{flex:0 0 86%;scroll-snap-align:start}
  .hero__tile-head{grid-template-columns:minmax(0,1fr) auto;padding:16px 18px 0}
  .hero__tile-head>span{grid-column:1/-1}
  .hero__tile-head .arr{grid-area:1/2}
  .hero__shot{margin:14px 18px 18px}
  .hero__thumb{width:40%;right:-4px}
  .hero__actions .sp-btn{flex:1 1 auto}
}

/* ═══════════════════════════ ILLUSTRATION CARDS ═══════════════════════════ */
/* A card is its art's own background colour edge to edge, rounded, with the caption in the art's empty top third.
   Ink follows the card's tone, not the page theme. */
.ld-card{position:relative;display:flex;flex-direction:column;width:100%;margin:0;padding:0;border-radius:20px;overflow:hidden;background:var(--card-bg,var(--sp-ui-surface-hi));box-shadow:0 0 0 1px var(--ld-card-ring);border:0;text-align:left;isolation:isolate;--ink:var(--ld-ink-light);--ink-muted:var(--ld-ink-light-muted);--ink-faint:var(--ld-ink-light-faint);--ink-accent:var(--ld-ink-light-accent);color:var(--ink)}
.ld-card[data-tone="dark"]{--ink:var(--ld-ink-dark);--ink-muted:var(--ld-ink-dark-muted);--ink-faint:var(--ld-ink-dark-faint);--ink-accent:var(--ld-ink-dark-accent)}
.ld-card__t{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 20px 0}
.ld-card__art{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;margin-top:calc(var(--card-top,25%) * -1 + 8px);min-height:0}
.ld-card__img{display:block;width:100%;height:auto}
.ld-card__title{display:block;font:800 clamp(1.0625rem,.95rem + .45vw,1.3125rem)/1.18 var(--sp-ui-font);letter-spacing:-.025em;text-wrap:balance;color:var(--ink);max-width:19ch;margin:0}
.ld-card__line{font:var(--site-type-body-s);font-size:14px;color:var(--ink-muted);text-wrap:pretty;max-width:34ch}
.ld-card .site-tag{color:var(--ink-muted);margin-top:2px}
.ld-card .site-tag--pro{color:var(--ink-accent)}
@media (max-width:420px){.ld-card__t{padding:16px 16px 0}.ld-card__line{font-size:13px}}


/* ═══════════════════════════ PRODUCT DEMOS ═══════════════════════════ */
/* A demo is framed the way a hero demo is framed: one rounded media container with a soft shadow on the light page,
   no extra device chrome (the demos carry their own window frames), a quiet caption beneath. */
.demo{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
.demo__frame{position:relative;border-radius:18px;overflow:hidden;background:#1d3f9c;box-shadow:0 36px 80px -30px rgba(8,18,42,.45),0 2px 8px rgba(8,18,42,.08),0 0 0 1px rgba(8,18,42,.06);isolation:isolate;transform:translateZ(0)}
.demo--dark .demo__frame{box-shadow:0 44px 110px -20px rgba(0,0,0,.65),0 0 0 .5px rgba(185,201,246,.16)}
.demo__video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#1d3f9c}
.demo__cap{font:var(--sp-ui-type-small);font-size:13px;color:var(--sp-ui-faint);text-wrap:pretty;max-width:70ch}
/* the labelled play control: visible under reduced motion, when autoplay was refused, and whenever it holds focus */
.demo__play{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 10px;border:0;border-radius:10px;background:rgba(8,18,42,.74);color:#f4f2ef;font:600 13px/1 var(--sp-ui-font);cursor:pointer;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);transition:opacity var(--sp-ui-motion-standard),background var(--sp-ui-motion-fast)}
.demo__play:hover{background:rgba(8,18,42,.9)}
.demo__play:focus-visible{outline:2px solid #fff;outline-offset:2px}
.demo__play:focus-visible,.demo-rm .demo__play,.is-refused .demo__play{opacity:1;pointer-events:auto}
.demo__play-ico{width:14px;height:14px;flex-shrink:0}
.demo__play-bars{display:none}
.is-playing .demo__play-bars{display:block}.is-playing .demo__play-tri{display:none}
@media (max-width:480px){.demo__frame{border-radius:12px}.demo__play{right:8px;bottom:8px}}

/* hover-play cards: the Higgsfield card is the resting state; the art box is 16:10 (the art's empty top third
   cropped away) so the demo fits it exactly; it crossfades in on hover, focus or tap and the title stays above it */
.ld-card--hover{cursor:default;transition:box-shadow var(--sp-ui-motion-standard),transform var(--sp-ui-motion-standard) var(--sp-ui-ease-move)}
.ld-card--hover .ld-card__t{padding-bottom:4px}
.ld-card__art--media{position:relative;flex:none;aspect-ratio:16/10;margin-top:10px;overflow:hidden;display:block}
.ld-card__art--media .ld-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.ld-card__demo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms var(--sp-ui-ease-move)}
.ld-card--hover.is-on .ld-card__demo,.ld-card--hover.is-playing .ld-card__demo{opacity:1}
.ld-card--hover.is-on{box-shadow:0 0 0 1px var(--ld-card-ring),var(--sp-ui-shadow-lift)}
.ld-card--hover .demo__play{right:10px;bottom:10px}
@media (prefers-reduced-motion:reduce){.ld-card__demo,.tile__demo{transition:none}}

/* ═══════════════════════════ 2 · CAPTURE (PILLAR 1) ═══════════════════════════ */
/* the Smart Select demo leads, with its card beside it; then the three hover-play ability cards */
.cap-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:stretch;margin-bottom:20px}
.cap-lead__demo{min-width:0}
.cap-lead__card{display:flex;min-width:0}
.cap-lead__card>.ld-card{flex:1}
.cap-card--smart .ld-card__line{max-width:40ch}
.cap-card--smart .ld-card__art{min-height:0}
.cap-card--smart .ld-card__img{height:100%;object-fit:contain;object-position:50% 100%}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cap-item{display:flex;min-width:0}
.cap-item>.ld-card{flex:1}
.cap-also{margin-top:24px;max-width:72ch;color:var(--sp-ui-muted)}
@media (max-width:980px){.cap-lead{grid-template-columns:1fr}.cap-card--smart .ld-card__img{height:auto;object-fit:fill}}
@media (max-width:860px){.cap-grid{grid-template-columns:1fr;gap:16px}}

/* ═══════════════════════════ 3 · RECORD (PILLAR 2, PRESENTER) ═══════════════════════════ */
.pr-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"stage stage" "outcomes cards";gap:32px 24px}
.pr-stage{grid-area:stage;min-width:0}
.pr-outcomes{grid-area:outcomes;display:grid;gap:16px;align-content:start;min-width:0}
.pr-outcome{padding-top:16px;border-top:1px solid var(--sp-ui-line-soft)}
.pr-outcome__t{font:var(--site-type-h4);font-size:1.125rem;letter-spacing:-.015em;color:var(--sp-ui-text)}
.pr-outcome p{margin-top:4px;font:var(--site-type-body-s);color:var(--sp-ui-muted);text-wrap:pretty;max-width:40ch}
.pr-cards{grid-area:cards;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;min-width:0}
.pr-card{display:flex;min-width:0}
.pr-card>.ld-card{flex:1}
.pr-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 48px;align-items:center;margin-top:40px;padding-top:32px;border-top:1px solid var(--sp-ui-line-soft)}
.pr-foot__text{display:flex;flex-direction:column;gap:10px;max-width:60ch}
.pr-pro{font:var(--site-type-body);color:var(--sp-ui-text);text-wrap:pretty}
.pr-note{color:var(--sp-ui-faint)}
/* the Director teaser: its card, linking down to the flagship block */
.pr-director{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;border-radius:20px}
.pr-director:hover{text-decoration:none}
.pr-director:hover .arr{transform:translateY(3px)}
.pr-director:focus-visible{outline:2px solid var(--sp-ui-focus);outline-offset:4px}
.pr-director__card .ld-card__title{font-size:1.125rem}
.pr-director__cta{display:inline-flex;align-items:center;gap:6px;font:600 14px/1.3 var(--sp-ui-font);color:var(--sp-ui-link);padding-left:2px}
@media (max-width:980px){.pr-body{grid-template-columns:1fr;grid-template-areas:"stage" "outcomes" "cards"}}
@media (max-width:640px){.pr-foot{grid-template-columns:1fr}.pr-director{flex-direction:row;align-items:center;gap:16px}.pr-director__card{flex:0 0 132px}.pr-director__card .ld-card__t{display:none}.pr-director__card .ld-card__art{margin-top:0}.pr-director__cta{font-size:15px}}
@media (max-width:520px){.pr-cards{grid-template-columns:1fr}}

/* ═══════════════════════════ 4 · TILES + DETAIL PANEL ═══════════════════════════ */
/* a tile rests as its card; hover, focus or a tap plays the micro-demo over the art while the label stays beneath;
   a click (fine pointer) or Enter opens the detail panel; on touch a separate More control opens it */
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px}
.tile-item{display:flex;min-width:0}
.tile{position:relative;display:flex;flex-direction:column;width:100%;min-width:0}
.tile__btn{display:flex;flex-direction:column;gap:12px;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;border-radius:18px;cursor:pointer}
.tile__art{position:relative;display:block;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--card-bg,var(--sp-ui-surface-hi));box-shadow:0 0 0 1px var(--ld-card-ring);transition:transform var(--sp-ui-motion-standard) var(--sp-ui-ease-move),box-shadow var(--sp-ui-motion-standard)}
.tile__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.tile__demo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms var(--sp-ui-ease-move)}
.tile.is-on .tile__demo,.tile.is-playing .tile__demo{opacity:1}
.tile__btn:hover .tile__art,.tile.is-on .tile__art{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ld-card-ring),var(--sp-ui-shadow-lift)}
.tile__btn:focus-visible{outline:2px solid var(--sp-ui-focus);outline-offset:4px}
.tile__label{font:600 15px/1.35 var(--sp-ui-font);letter-spacing:-.005em;color:var(--sp-ui-text);padding:0 2px;text-wrap:pretty}
/* the controls sit over the art box: the play control (reduced motion) and More (touch) */
.tile__ctl{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/10;pointer-events:none;z-index:3}
.tile__ctl>*{pointer-events:auto}
.tile__play{display:none;right:10px;bottom:10px}
.demo-rm .tile__play{display:inline-flex}
.tile__more{position:absolute;right:10px;bottom:10px;display:none}
.is-touch .tile__more{display:inline-flex}
@media (hover:none) and (pointer:coarse){.tile__more{display:inline-flex}}
@media (max-width:860px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.tile__label{font-size:14px}}

.tile-dialog{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.tile-dialog[hidden]{display:none}
.tile-dialog__scrim{position:absolute;inset:0;animation:sp-fade 160ms var(--sp-ui-ease-enter)}
.tile-dialog__panel{position:relative;width:min(100%,720px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px 24px 18px;gap:18px}
.tile-dialog__close{position:absolute;top:12px;right:12px}
.tile-dialog__content{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px 18px;align-items:start}
.tile-dialog__art{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card-bg,var(--sp-ui-surface-hi));box-shadow:0 0 0 1px var(--ld-card-ring)}
.tile-dialog__art img{width:100%;height:100%;object-fit:cover}
.tile-dialog__text{min-width:0;padding-right:36px}
.tile-dialog__title{font:var(--site-type-h3);letter-spacing:-.02em;text-wrap:balance}
.tile-dialog__body{margin-top:8px;font:var(--site-type-body-s);color:var(--sp-ui-muted);text-wrap:pretty}
.tile-dialog__tier{margin-top:10px}
.tile-dialog__demo{grid-column:1/-1;margin-top:4px}
.tile-dialog__demo .demo__frame{border-radius:12px;box-shadow:0 20px 50px -24px rgba(8,18,42,.5),0 0 0 1px rgba(8,18,42,.08)}
.tile-dialog__foot{display:flex;justify-content:flex-end;padding-top:4px}
body.tile-dialog-open{overflow:hidden}
@media (max-width:480px){.tile-dialog{padding:10px}.tile-dialog__panel{padding:20px 18px 14px}.tile-dialog__content{grid-template-columns:64px minmax(0,1fr);gap:14px}.tile-dialog__text{padding-right:30px}}


/* ═══════════════════════════ 4b · COMPARE ═══════════════════════════ */
/* one window: a card holding a real table that scrolls inside a fixed-height wrapper. The column header and each
   group header stay pinned; a bottom fade shows while rows remain (landing.js toggles it). Every product column
   has the same width, type and ink; ShinyPost gets a thin accent line over its header and a heavier name, nothing
   else. Cells are a symbol plus a word so no meaning rests on colour. */
:root{--cmp-accent:var(--sp-ui-accent);--cmp-head-h:60px;--cmp-row-h:44px;--cmp-gh-h:36px;--cmp-ink:var(--sp-ui-text);--cmp-hover:rgba(47,95,224,.04);--cmp-gh-bg:#f6f8fd;--cmp-thumb:rgba(8,18,42,.22);--cmp-label-w:150px;--cmp-col-w:104px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cmp-accent:var(--sp-ui-accent-hi);--cmp-hover:rgba(185,201,246,.06);--cmp-gh-bg:#162640;--cmp-thumb:rgba(244,242,239,.26)}}
:root[data-theme="dark"]{--cmp-accent:var(--sp-ui-accent-hi);--cmp-hover:rgba(185,201,246,.06);--cmp-gh-bg:#162640;--cmp-thumb:rgba(244,242,239,.26)}
.cmp__chart{display:flex;flex-direction:column;gap:14px}
/* the key: one small muted line, the same symbols as the cells */
.cmp__legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0 4px;list-style:none;font:500 13px/1.4 var(--sp-ui-font);color:var(--sp-ui-muted)}
.cmp__key{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.cmp__key .cmp__v{color:var(--cmp-ink)}
.cmp__key .cmp__w{font-weight:600}
.cmp__key .cmp__v--no .cmp__ico,.cmp__key .cmp__v--no .cmp__w{color:var(--sp-ui-faint)}
/* the window */
.cmp__frame{position:relative;border-radius:20px;background:var(--sp-ui-card-bg);border:1px solid var(--sp-ui-chrome-line);box-shadow:var(--sp-ui-card-shadow);overflow:hidden}
.cmp__frame::after,.cmp__frame::before{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity var(--sp-ui-motion-standard);z-index:5}
.cmp__frame::after{left:0;right:12px;bottom:0;height:64px;background:linear-gradient(180deg,transparent,var(--sp-ui-card-bg))}
.cmp__frame::before{top:0;bottom:12px;right:12px;width:56px;background:linear-gradient(90deg,transparent,var(--sp-ui-card-bg))}
.cmp__frame.is-more-y::after,.cmp__frame.is-more-x::before{opacity:1}
.cmp__scroll{max-height:clamp(440px,72vh,660px);overflow:auto;border-radius:inherit;scrollbar-width:thin;scrollbar-color:var(--cmp-thumb) transparent}
.cmp__scroll::-webkit-scrollbar{width:12px;height:12px}
.cmp__scroll::-webkit-scrollbar-thumb{background:var(--cmp-thumb);border:4px solid var(--sp-ui-card-bg);border-radius:8px}
.cmp__scroll::-webkit-scrollbar-track{background:transparent}
.cmp__scroll:focus-visible{outline:2px solid var(--sp-ui-focus);outline-offset:-2px;border-radius:inherit}
/* the table: fixed layout so the five product columns are equal */
.cmp__table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font:var(--site-type-body-s);color:var(--cmp-ink)}
.cmp__col-f{width:33%}
.cmp__table th,.cmp__table td{padding:8px 12px;text-align:left;vertical-align:middle;background:var(--sp-ui-card-bg);font-weight:500}
/* sticky column header: name plus a muted price line, opaque, with a hairline under it */
.cmp__table thead th{position:sticky;top:0;z-index:3;height:var(--cmp-head-h);box-sizing:border-box;padding:10px 12px 8px;vertical-align:bottom;border-bottom:1px solid var(--sp-ui-border);background:var(--sp-ui-card-bg)}
.cmp__app{font:600 15px/1.2 var(--sp-ui-font);color:var(--cmp-ink)}
.cmp__name{display:block;letter-spacing:-.01em;overflow-wrap:anywhere}
.cmp__price{display:block;margin-top:3px;font:500 12px/1.3 var(--sp-ui-font);color:var(--sp-ui-muted);white-space:nowrap}
.cmp__app--self{box-shadow:inset 0 3px 0 var(--cmp-accent)}
.cmp__app--self .cmp__name{font-weight:800}
/* sticky group headers sit directly under the column header */
.cmp__gh th{position:sticky;top:var(--cmp-head-h);z-index:2;height:var(--cmp-gh-h);box-sizing:border-box;padding:0 14px;background:var(--cmp-gh-bg);border-bottom:1px solid var(--sp-ui-line-soft);font:700 13px/1.2 var(--sp-ui-font);color:var(--sp-ui-text)}
.cmp__gh-in{display:flex;align-items:baseline;gap:10px}
.cmp__gh-n{font:500 12px/1.2 var(--sp-ui-font);color:var(--sp-ui-faint)}
/* rows: hairline dividers, a quiet hover tint across the whole row */
.cmp__row th,.cmp__row td{height:var(--cmp-row-h);box-sizing:border-box;border-bottom:1px solid var(--sp-ui-line-soft)}
.cmp__group:last-of-type .cmp__row:last-child th,.cmp__group:last-of-type .cmp__row:last-child td{border-bottom:0}
.cmp__row:hover th,.cmp__row:hover td{background:var(--cmp-hover)}
.cmp__label{padding-left:16px;font:500 14px/1.35 var(--sp-ui-font);color:var(--sp-ui-text);text-wrap:pretty}
/* cells: symbol + word in one ink; No in muted grey; Limited carries its qualifier on a second line */
.cmp__c{font:500 14px/1.25 var(--sp-ui-font)}
.cmp__v{display:inline-grid;grid-template-columns:18px auto;column-gap:6px;align-items:center}
.cmp__ico{width:16px;height:16px;justify-self:center}
.cmp__ico--t{display:inline-block;width:auto;height:auto;font:700 14px/1 var(--sp-ui-font);text-align:center}
.cmp__w{white-space:nowrap}
.cmp__q{grid-column:2;display:block;margin-top:2px;font:500 12px/1.3 var(--sp-ui-font);color:var(--sp-ui-muted);white-space:normal}
.cmp__c--no{color:var(--sp-ui-faint)}
/* phones and narrow tablets: the same window scrolls both ways; the feature column pins left, the header on top */
@media (max-width:720px){
  :root{--cmp-head-h:78px}
  .cmp__frame{border-radius:16px}
  .cmp__frame::before{bottom:12px}
  .cmp__table{width:auto;min-width:calc(var(--cmp-label-w) + 5 * var(--cmp-col-w))}
  .cmp__col-f{width:var(--cmp-label-w)}
  .cmp__col-p{width:var(--cmp-col-w)}
  .cmp__table th,.cmp__table td{padding:8px 10px}
  .cmp__label,.cmp__corner{position:sticky;left:0;z-index:2;width:var(--cmp-label-w);padding-left:14px;font-size:13.5px;line-height:1.3;box-shadow:1px 0 0 var(--sp-ui-line-soft)}
  .cmp__table thead th{z-index:4}
  .cmp__table thead .cmp__corner{z-index:5}
  .cmp__gh th{z-index:3}
  .cmp__gh-in{position:sticky;left:14px;width:max-content}
  .cmp__app{font-size:14px}
  .cmp__price{white-space:normal;font-size:11.5px}
  .cmp__c{font-size:13.5px}
  .cmp__q{font-size:11.5px}
}

/* ═══════════════════════════ 5 · FREE ═══════════════════════════ */
.free-band{background:var(--sp-ui-nav);border-top:1px solid var(--sp-ui-chrome-line);border-bottom:1px solid var(--sp-ui-chrome-line);padding-block:var(--ld-section)}
.free-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
.free-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.free-col+.free-col{padding-left:48px;border-left:1px solid var(--sp-ui-line-soft)}
.free-col__t{font:var(--site-type-h3);font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);letter-spacing:-.025em}
.free-col__note{font:var(--sp-ui-type-label);font-size:13.5px;color:var(--sp-ui-faint)}
/* what each free piece makes: three small use-case cards, art only, one word beneath */
.free-makes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.free-make{display:flex;flex-direction:column;gap:7px;margin:0;min-width:0}
.free-make__art{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--card-bg,var(--sp-ui-surface-hi));box-shadow:0 0 0 1px var(--ld-card-ring)}
.free-make__art img{width:100%;height:100%;object-fit:cover;object-position:50% 90%}
.free-make__t{font:600 13px/1.3 var(--sp-ui-font);color:var(--sp-ui-muted);padding-left:2px}
.free-list{display:flex;flex-direction:column;gap:11px;margin-top:18px;padding-top:18px;border-top:1px solid var(--sp-ui-line-soft)}
.free-list li{display:flex;gap:12px;align-items:flex-start;font:var(--site-type-body-s);color:var(--sp-ui-text);text-wrap:pretty}
.chk{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--sp-ui-success-foreground)}
.free-col__cta{align-self:flex-start;margin-top:22px}
.free-foot{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;align-items:start;margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--sp-ui-line-soft)}
.free-line{font:800 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--sp-ui-font);letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
.free-extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0}
.free-extra{display:flex;min-width:0}
.free-extra>.ld-card{flex:1}
.free-extra__card .ld-card__title{font-size:1.0625rem;max-width:16ch}
.free-extra__card .ld-card__line{font-size:13px;max-width:28ch}
@media (max-width:1100px){.free-foot{grid-template-columns:1fr}.free-line{max-width:26ch}}
@media (max-width:760px){.free-cols{grid-template-columns:1fr;gap:32px}.free-col+.free-col{padding-left:0;padding-top:32px;border-left:0;border-top:1px solid var(--sp-ui-line-soft)}}
@media (max-width:640px){.free-extras{grid-template-columns:1fr}}

/* ═══════════════════════════ 6 · PRO ═══════════════════════════ */
/* Director leads: a full-width flagship block, its demo autoplaying in view */
.director{display:flex;flex-direction:column;gap:28px;padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--sp-ui-line-soft)}
.director-band .director{padding-bottom:0;margin-bottom:0;border-bottom:0}
.director__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end}
.director__copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.director__h{font:800 clamp(1.75rem,1.3rem + 2vw,2.75rem)/1.08 var(--sp-ui-font);letter-spacing:-.035em;text-wrap:balance;max-width:16ch;color:var(--sp-ui-text)}
.director__body{font:var(--site-type-body);color:var(--sp-ui-muted);max-width:52ch;text-wrap:pretty}
.director__outcomes{display:grid;gap:0;min-width:0;padding-bottom:.3em}
.director__outcomes li{padding:12px 0;border-top:1px solid var(--sp-ui-line-soft);font:600 15px/1.45 var(--sp-ui-font);color:var(--sp-ui-text);text-wrap:pretty}
.director__outcomes li:last-child{padding-bottom:0}
.director__demo{min-width:0;display:flex;flex-direction:column;gap:14px}
.director__pane[hidden]{display:none}
.director__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.director__foot .demo__cap{margin:0}
.director__walk{appearance:none;border:0;background:none;padding:4px 2px;font:600 15px/1.3 var(--sp-ui-font);color:var(--sp-ui-link);cursor:pointer;border-radius:6px}
.director__walk:hover{text-decoration:underline}
.director__walk:focus-visible{outline:2px solid var(--sp-ui-focus);outline-offset:3px}
.pro-also{font:var(--sp-ui-type-label);font-size:13.5px;color:var(--sp-ui-faint);margin-bottom:20px}
.pro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pro-item{display:flex;min-width:0}
.pro-card{display:flex;flex-direction:row;gap:22px;align-items:flex-start;width:100%}
.pro-card__art{flex:0 0 40%}
.pro-card__t{padding-top:6px}
.pro-card__t{display:flex;flex-direction:column;gap:6px;min-width:0}
.pro-card__t .site-h3{font-size:1.1875rem}
.pro-card__body{font:var(--site-type-body-s);color:var(--sp-ui-muted);text-wrap:pretty}
.pro-card__note{color:var(--sp-ui-faint)}
.pro-plan{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,5fr);gap:32px 56px;align-items:start;margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--sp-ui-line-soft)}
.pro-plan__name{font:var(--site-type-h3);font-size:1.75rem;letter-spacing:-.03em}
.pro-plan__tagline{margin-top:8px;font:var(--site-type-body);color:var(--sp-ui-muted);max-width:40ch;text-wrap:pretty}
.pro-plan__platforms{margin-top:10px;font:var(--sp-ui-type-label);font-size:13.5px;color:var(--sp-ui-faint)}
.pro-plan__drop{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--sp-ui-line-soft);font:var(--site-type-body-s);color:var(--sp-ui-muted);max-width:56ch;text-wrap:pretty}
.pro-plan__drop b{color:var(--sp-ui-text)}
.pro-plan__drop-art{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card-bg,var(--sp-ui-surface-hi));box-shadow:0 0 0 1px var(--ld-card-ring)}
.pro-plan__drop-art img{width:100%;height:100%;object-fit:cover;object-position:50% 68%}
.pro-plan__price{display:flex;flex-direction:column;gap:18px;padding:22px 24px 20px}
.plan__price{display:flex;flex-direction:column;gap:6px}
.plan__amount{font:var(--site-type-price);letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.plan__figure{display:inline-flex;align-items:baseline}
.plan__unit{font:var(--site-type-h4);font-weight:600;color:var(--sp-ui-muted);letter-spacing:0;margin-left:2px}
.plan__note{font:var(--site-type-body-s);color:var(--sp-ui-muted)}
.plan__action .sp-btn{white-space:normal;text-align:center;height:auto;min-height:48px;padding-block:10px;line-height:1.25}
.plan__compare{text-align:center;font:var(--sp-ui-type-label);font-size:14px}
@media (max-width:980px){.director__head{grid-template-columns:1fr}.director__outcomes{padding-bottom:0}.pro-grid{grid-template-columns:1fr;gap:28px}.pro-plan{grid-template-columns:1fr}}
@media (max-width:600px){.pro-card{flex-direction:column;align-items:stretch;gap:14px}.pro-card__art{flex:none}.pro-card__t{padding:0 4px}}

/* ═══════════════════════════ 7 · FAQ ═══════════════════════════ */
.faq{display:flex;flex-direction:column;gap:18px}
.faq__list{display:flex;flex-direction:column;gap:6px;max-width:820px}
.disc{border-radius:var(--sp-ui-card-radius);background:var(--sp-ui-card-bg);border:1px solid var(--sp-ui-chrome-line);box-shadow:var(--sp-ui-card-shadow)}
.disc__summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;font:var(--site-type-h4);letter-spacing:-.01em;color:var(--sp-ui-text);border-radius:inherit;transition:background var(--sp-ui-motion-fast)}
.disc__summary:hover{background:var(--sp-ui-soft)}
.disc__summary:focus-visible{outline-offset:-2px;border-radius:inherit}
.disc__summary>span:first-child{flex:1;min-width:0}
.cat__chev{width:16px;height:16px;flex-shrink:0;color:var(--sp-ui-icon);transition:transform var(--sp-ui-motion-standard) var(--sp-ui-ease-move)}
details[open]>summary .cat__chev{transform:rotate(180deg)}
.disc__body{padding:4px 18px 20px;font:var(--site-type-body-s);color:var(--sp-ui-muted);max-width:78ch;text-wrap:pretty}

/* ═══════════════════════════ 8 · FINAL ═══════════════════════════ */
.final{padding-block:clamp(16px,2vw,24px) var(--ld-section)}
.final__inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:center;padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--sp-ui-line-soft)}
.final__copy{display:flex;flex-direction:column;gap:16px;max-width:640px}
.final__h{max-width:18ch}
.final__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
/* the four workflow cards, 2 × 2 */
.final__steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none;counter-reset:none}
.final__step{display:flex;min-width:0}
.final__step>.ld-card{flex:1}
.final__step-card .ld-card__t{padding:14px 16px 0}
.final__step-card .ld-card__title{font-size:.9375rem}
@media (max-width:860px){.final__inner{grid-template-columns:1fr}.final__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.final__step-card .ld-card__title{font-size:.8125rem}.final__step-card .ld-card__t{padding:10px 12px 0}}
@media (max-width:480px){.final__steps{grid-template-columns:1fr 1fr}}
.page-landing .site-footer{margin-top:0}

/* ═══════════════════════════ REDUCED MOTION ═══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .tile__art,.arr,.ld-card--hover{transition:none}
  .tile-dialog__scrim{animation:none}
}