/* Structural base, shared by all three directions. Everything that is a design
   decision lives in the direction's own style.css. This file only handles
   layout, reset and the motion contract. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 999; padding: 12px 18px; background: #000; color: #fff; }

.wrap { width: 100%; max-width: var(--max, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.s { padding: var(--section-y, 96px) 0; position: relative; }

.grid { display: grid; gap: var(--gap, 32px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap, 32px); }
.head { max-width: 62ch; margin-bottom: var(--section-y-half, 48px); }

.hd { position: sticky; top: 0; z-index: 100; }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hd__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav { display: flex; align-items: center; position: relative; }
.nav a { text-decoration: none; white-space: nowrap; }
.hd__burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.hd__burger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .3s; }

.hero__foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--gap, 32px); align-items: start; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* The label sits left and the value right, but on a narrow screen a long value
   has nowhere to go and pushes the row past the viewport. Let the row wrap and
   the value shrink rather than overflow. */
.spec__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; }
.spec__row dt { flex: 0 0 auto; }
.spec__row dd { text-align: right; min-width: 0; margin-left: auto; overflow-wrap: break-word; }

.cards { align-items: stretch; }
.card { display: flex; flex-direction: column; height: 100%; }
.card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__price { display: flex; flex-direction: column; align-items: flex-end; }
.ticks { margin-top: auto; }
.ticks li { padding: 10px 0; }

.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 32px 0; }
.case__shot { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }

.faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  cursor: pointer; list-style: none; padding: 24px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: 0 0 auto; position: relative; width: 14px; height: 14px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq summary i::before { width: 14px; height: 1.5px; }
.faq summary i::after { width: 1.5px; height: 14px; }
.faq details[open] summary i::after { transform: scaleY(0); }
.faq__a { padding-bottom: 24px; max-width: 66ch; }

.ft__in { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--gap, 32px); }
.ft__col li { padding: 5px 0; }
.ft__col a { text-decoration: none; }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }

/* ---- MOTION CONTRACT -------------------------------------------------------
   Elements declare intent with data-m. Content is VISIBLE by default. motion.js
   adds .js-motion to <html> only once it is actually running, and the reveal
   styles are all scoped under that class. So a script that fails to load, or is
   blocked, leaves a fully readable page rather than a blank one. JS then adds
   .in as each element first enters the viewport, once, and never removes it. */
[data-m] { --d: calc(var(--stagger, 60ms) * var(--delay, 0)); }

/* A hidden block still contains real links and buttons, so a keyboard user can
   tab into content they cannot see. Focus forces the revealed state. The motion
   profiles load after this file, so this has to win on !important rather than
   on order. */
[data-m]:focus-within,
[data-m]:focus-within .w {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-m] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .hero__foot { grid-template-columns: minmax(0, 1fr); }
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { display: none; }
  .hd__burger { display: flex; }
  .nav.is-open { display: flex; position: fixed; inset: 0; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 8px; padding: 32px; z-index: 200; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4, .ft__in { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .hero__cta .btn { width: 100%; text-align: center; }
}