/* PetalKit · homepage. Measurements from the approved 1440 / 768 / 390
   Figma frames, captured 2026-09-05. Shared colours and fonts live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root { --site-content-width: 1600px; --site-page-gutter: 16px; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
img { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
main:focus { outline: none; }
section, .disc { scroll-margin-top: 88px; }
.skip {
  position: absolute;
  top: 12px;
  left: -9999px;
  z-index: 30;
  padding: 12px 16px;
  border: 1px solid var(--border-control);
  border-radius: 4px;
  background: var(--bg-base);
  color: var(--text-primary);
  font: 500 11px/16px var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none;
}
.skip:focus { left: 20px; }
.wrap { width: 100%; max-width: var(--site-content-width); margin-inline: auto; padding-inline: var(--site-page-gutter); }
.link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-color: var(--text-tertiary); }
.eyebrow, .fact-eyebrow, .plan-state, .road-name, .road-when {
  font: 500 11px/16px var(--font-mono);
  letter-spacing: .06em;
}
.eyebrow { color: var(--text-secondary); }
.publication-status { color: var(--text-secondary); font: 400 13px/1.55 var(--font-sans); }
.glyph {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  max-width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 4px;
  color: var(--text-primary);
  font: 500 11px/16px var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.btn-primary, .btn-live { background: var(--accent); }
.btn-primary:hover, .btn-live:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--bg-base); box-shadow: inset 0 0 0 1px var(--border); }
.btn-ghost:hover { background: var(--bg-card); }
.btn[aria-disabled="true"] { cursor: default; }

/* Content stays in normal flow; the native accordions retain keyboard support. */
.disc {
  position: relative;
  padding-block: 1px;
  border-radius: 8px;
  background: var(--bg-base);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.disc > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  list-style: none;
  cursor: pointer;
  transition: background 160ms ease;
}
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary:hover { background: var(--bg-card); }
.disc > summary:focus-visible { outline-offset: -2px; }
.disc[open] > summary { background: var(--accent); }
.faq .disc[open] > summary { background: var(--bg-base); }
.disc-title { min-width: 0; font-size: 19px; line-height: 22px; }
.glyph-caret { width: 12px; height: 12px; color: var(--text-tertiary); transition: transform 200ms ease; }
.disc[open] > summary .glyph-caret { transform: rotate(90deg); }
.disc-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; color: var(--text-secondary); font-size: 13px; }
.disc-body .mono { overflow-wrap: anywhere; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .disc::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
  }
  .disc[open]::details-content { block-size: auto; }
}
.ill { position: relative; aspect-ratio: 3 / 2; }
.ill img { width: 100%; height: 100%; object-fit: contain; }
.ill.is-missing { background: var(--bg-card); }
.ill.is-missing img { display: none; }
.js .reveal.is-armed {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease, transform 400ms ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.section { padding-block: 96px; }
.section > .wrap { display: flex; flex-direction: column; gap: 32px; }
.section-card { background: var(--bg-card); }
.section-title { font-size: 32px; line-height: 37px; }
.section-lede { color: var(--text-secondary); font-size: 15px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg-surface); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--site-content-width);
  min-height: 64px;
  margin-inline: auto;
  padding: 12px var(--site-page-gutter);
}
.nav-mark, .foot-mark { display: inline-flex; align-items: center; gap: .421053em; font-size: 19px; font-weight: 500; line-height: 22px; letter-spacing: -.02em; }
.nav-mark { display: flex; align-items: center; min-height: 40px; color: var(--text-primary); text-decoration: none; }
.brand-symbol { position: relative; display: block; flex: 0 0 1.368421em; width: 1.368421em; height: 1.368421em; overflow: hidden; }
.brand-symbol img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.nav-links { display: none; align-items: center; gap: 24px; }
.nav-links a, .foot-links a {
  display: inline-flex;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  padding-block: 12px;
  color: var(--text-secondary);
  font: 500 11px/16px var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none;
}
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.nav-signin { background: transparent; }
.nav-signin:hover { background: var(--bg-card); }
.nav-mark { flex-shrink: 0; }
.hero-sub, .section-lede { max-width: 64ch; }

/* Hero and product motion */
.hero { padding-block: 96px; }
.hero-grid { display: grid; gap: 64px; align-items: start; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero-title, .cta-title { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }
.hero-sub { color: var(--text-secondary); font-size: 15px; }
.hero-cta { display: flex; flex-direction: column; gap: 12px; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; }
.hero-media { width: 100%; }
.hero-motion { width: min(100%, 520px); margin-inline: auto; }
.hero-motion video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: transparent; }

/* Numbers */
.band { padding-block: 96px; background: var(--bg-surface); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.band-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.band-value { font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: .06em; }
.band-range { white-space: nowrap; }
.band-legend { color: var(--text-secondary); font-size: 13px; }

/* Manifesto */
.manifesto-card { display: grid; align-items: start; gap: 40px; padding: 24px; border-radius: 16px; background: var(--accent); }
.manifesto-copy, .manifesto-body { display: flex; flex-direction: column; gap: 24px; }
.manifesto-body { font-size: 15px; }

/* Editorial type strip */
.marquee { overflow: hidden; padding: 24px; }
.marquee-track { display: flex; width: max-content; animation: marquee 80s linear infinite; }
.marquee-run { flex: none; font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: .06em; white-space: nowrap; color: var(--bg-elevated); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Interactive station map */
.how-head { display: flex; flex-direction: column; gap: 32px; }
.how-stations { display: grid; gap: 64px; align-items: start; }
.how-steps, .pv-list, .faq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.how-step .disc-title { font-size: 15px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.how-map { position: relative; width: 100%; }
.pin {
  position: absolute;
  left: clamp(0px, calc(var(--x) - 22px), calc(100% - 44px));
  top: clamp(0px, calc(var(--y) - 22px), calc(100% - 44px));
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--text-primary);
  font: 500 12px/16px var(--font-mono);
  letter-spacing: .06em;
  cursor: pointer;
}
.pin::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-base); transition: background 160ms ease; }
.pin:hover::before { background: var(--bg-card); }
.pin.is-on::before, .pin[aria-pressed="true"]::before { border-color: var(--border-control); background: var(--accent); }

/* Six tools: compact thumbnail-led cards with equal heights per row. */
.tools-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 16px; }
.tools-grid > li { min-width: 0; }
.tool { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 16px; min-height: 320px; height: 100%; padding: 16px; border-radius: 8px; background: var(--bg-base); overflow: hidden; }
.tool::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--border); border-radius: inherit; }
.tool > .ill { width: 80px; aspect-ratio: 1; align-self: start; }
.tool-copy { display: flex; min-width: 0; height: 100%; flex-direction: column; gap: 12px; padding: 0; }
.tool-title { font-size: 19px; line-height: 22px; }
.tool-title a { color: inherit; text-decoration: none; }
.tool-title a::after { content: ""; position: absolute; inset: 0; }
.tool:has(.tool-title a:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.tool-title a:focus-visible { outline: none; }
.tool:hover::after { border-color: var(--border-hover); }
.tool-body { color: var(--text-secondary); font-size: 13px; }
.tool-benefits { display: flex; flex-direction: column; gap: 8px; margin-top: auto; color: var(--text-primary); font: 400 13px/20.15px var(--font-sans); }
.fact { display: flex; flex-direction: column; gap: 24px; grid-column: 1 / -1; padding: 32px; border-radius: 8px; background: var(--bg-base); }
.fact-value { flex: none; width: 80px; font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: .06em; }
.fact-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fact-eyebrow { color: var(--text-primary); }
.fact-legend { color: var(--text-secondary); font-size: 15px; }

/* Real plugin previews. On smaller screens the capture belongs to its accordion. */
.pv { display: grid; align-items: start; gap: 64px; }
.pv-stage { display: none; }
.pv-frame { position: relative; width: 400px; max-width: 100%; aspect-ratio: 1040 / 1560; border-radius: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.pv-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 200ms ease; }
.pv-layer.is-front { opacity: 1; }
.pv-shot { position: relative; border-radius: 0; overflow: hidden; }
.pv-shot img { width: 100%; height: auto; }
.pv-frame::after, .pv-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--border);
  border-radius: inherit;
}

/* Photographic handoffs */
.hand { display: grid; gap: 24px; }
.hand-card { min-width: 0; border-radius: 16px; background: var(--bg-card); overflow: hidden; }
.hand-shot { aspect-ratio: 1; }
.hand-shot img { object-fit: cover; }
.hand-cap { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--bg-elevated); }
.hand-cap-accent { background: var(--accent); }
.hand-title { font-size: 32px; font-weight: 500; line-height: 37px; letter-spacing: -.02em; }
.hand-body { color: var(--text-secondary); font-size: 13px; }

/* Pio /integrations: a visible title band opens upwards over the photo.
   Touch, reduced motion, print and no-JS keep the complete caption in flow. */
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hand-card[data-handoff-reveal] { position: relative; }
  .hand-card[data-handoff-reveal]:focus-visible { outline-offset: 4px; }
  .hand-card[data-handoff-reveal] .hand-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease-in-out;
  }
  .hand-card[data-handoff-reveal] .hand-cap {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: auto;
    max-height: var(--hand-rest-height, 96px);
    gap: 0;
    padding-top: 0;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transition: max-height 500ms ease-in-out;
  }
  .hand-card[data-handoff-reveal] .hand-title {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 96px;
    padding-block: 24px;
  }
  .hand-card[data-handoff-reveal] .hand-body { flex-shrink: 0; }
  .hand-card[data-handoff-reveal]:is(:hover, :focus-within):not([data-handoff-dismissed]) .hand-shot::after {
    opacity: .2;
  }
  .hand-card[data-handoff-reveal]:is(:hover, :focus-within):not([data-handoff-dismissed]) .hand-cap {
    max-height: min(100%, var(--hand-open-height, 100%));
    overflow-y: auto;
  }
}

/* Pricing */
.plans { display: grid; gap: 16px; }
.plan { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-base); }
.plan:first-child { min-height: 350px; }
.plan-price { font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: .06em; }
.plan-unit, .plans-note { min-height: 16px; color: var(--text-tertiary); font-size: 10px; font-weight: 500; line-height: 16px; letter-spacing: .06em; }
.plan-body { color: var(--text-secondary); font-size: 13px; }
.plan > .eyebrow { color: var(--text-primary); }
.plan-state { color: var(--text-secondary); }

/* Roadmap */
.road { display: grid; align-items: start; gap: 16px; }
.road-rail { position: relative; }
.road-step { display: none; }
.road-step:first-child { display: flex; }
.road-rail.is-live .road-step { display: none; }
.road-rail.is-live .road-step.is-current { display: flex; }
.road-step { flex-direction: column; gap: 8px; }
.road-num { font-size: 72px; font-weight: 500; line-height: 1; letter-spacing: .06em; }
.road-name { color: var(--text-primary); }
.road-list { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.road-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); }
.road-when { color: var(--text-secondary); }
.road-what { font-size: 15px; }
.next { display: grid; gap: 16px; }
.next-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border-radius: 8px; background: var(--bg-card); }
.next-title { font-size: 19px; line-height: 22px; }
.next-summary { min-height: 41px; }
.next-body { color: var(--text-secondary); font-size: 13px; }

/* Full-width studio photo with the same .68 ink veil as the Figma component. */
.cta { position: relative; isolation: isolate; padding-block: 128px; color: var(--bg-base); }
.cta-shot { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
.cta-shot img { width: 100%; height: 100%; object-fit: cover; }
.cta-shot::after { content: ""; position: absolute; inset: 0; background: rgb(0 10 25 / 68%); }
.cta-inner > .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.cta-eyebrow, .cta .publication-status { color: var(--bg-base); }
.cta-act, .cta-btn { width: 100%; }
.cta-shot.is-missing::after { display: none; }
.cta-shot.is-missing ~ .cta-inner, .cta-shot.is-missing ~ .cta-inner .eyebrow, .cta-shot.is-missing ~ .cta-inner .publication-status { color: var(--text-primary); }

/* Footer */
.foot { padding-block: 64px 32px; }
.foot-inner { display: grid; align-items: start; gap: 48px; }
.foot-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-mark { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; }
.foot-description { max-width: 32ch; color: var(--text-secondary); font-size: 13px; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.foot-heading { margin-bottom: 12px; font-size: 15px; line-height: 24px; letter-spacing: 0; }
.foot-by, .foot-legal { color: var(--text-secondary); font-size: 13px; }
.foot-legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-tertiary); }
.foot-links { display: flex; flex-direction: column; gap: 0; }
.foot-links a { padding-block: 10px; font: 400 13px/20px var(--font-sans); letter-spacing: 0; overflow-wrap: anywhere; }

@media (max-width: 479px) {
  .nav-inner { gap: 8px; flex-wrap: wrap; }
  .nav-actions { margin-left: auto; flex-wrap: wrap; }
  .nav-actions .btn { padding-inline: 10px; }
}
@media (max-width: 359px) {
  .tool { grid-template-columns: 64px minmax(180px, 1fr); gap: 12px; padding: 16px; }
  .tool > .ill { width: 64px; }
}
@media (min-width: 560px) {
  .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  :root { --site-page-gutter: 24px; }
  .hero-actions { flex-direction: row; }
  .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-value { font-size: 48px; line-height: 1.05; }
  .manifesto-card { padding: 64px; }
  .marquee-run { font-size: 140px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool { grid-template-columns: 96px minmax(0, 1fr); }
  .tool > .ill { width: 96px; }
  .fact { flex-direction: row; }
  .fact-copy { flex: 1; }
  .hand, .next, .road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { min-height: 400px; }
  .road-num { font-size: 144px; }
  .next-summary { min-height: 61px; }
  .cta-act, .cta-btn { width: auto; }
}
@media (min-width: 1024px) {
  .section { padding-block: 128px; }
  .foot-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 80px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero-media { width: 420px; max-width: 100%; }
  .hero-motion { margin: 0; }
  .band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .manifesto-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-stage { grid-column: 2; grid-row: 1; }
  .how-steps { grid-column: 1; grid-row: 1; }
  .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool { grid-template-columns: 80px minmax(0, 1fr); }
  .tool > .ill { width: 80px; }
  .pv { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .js .pv-stage { display: block; position: sticky; top: 88px; }
  .js .pv-shot { display: none; }
  .plan { min-height: 350px; }
  .road-rail { position: sticky; top: 88px; }
  .next-summary { min-height: 41px; }
}
@media (min-width: 1200px) {
  .nav-links { display: flex; }
}
@media (min-width: 1280px) {
  :root { --site-page-gutter: 32px; }
  .tool { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 24px; }
  .tool > .ill { width: 112px; }
}
@media print {
  .nav { position: static; }
  .js .reveal.is-armed { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal.is-armed { opacity: 1; transform: none; }
}