/* ==========================================================================
   Pakker — landing-only styles (page--front.html.twig), Parcel redesign
   --------------------------------------------------------------------------
   Section rhythm down the page:

     LIGHT   hero (white → mist, yellow glow)
     LIGHT   partners strip (white)
     INK     ai — the AI / automation flagship band
     LIGHT   process — parcel-tracking timeline + photo
     MIST    benefits grid
     LIGHT   feature splits (checkout, tracking)
     INK     stats
     LIGHT   pricing
     MIST    trust / clients
     LIGHT   faq
     MIST    demo form
     INK     footer (style.css)

   The signature motif is parcel tracking: mono "waybill" eyebrows,
   status chips from the app's own vocabulary, and a timeline that reads
   like a shipment's journey.
   ========================================================================== */

/* Generic section spacing & shared building blocks ------------------ */
.section {
  padding-block: var(--space-7);
  position: relative;
}
@media (min-width: 768px) { .section { padding-block: var(--space-8); } }

/* Eyebrow — waybill-style mono label above every section title */
.section__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #35415a;
  font-weight: 600;
  font-size: .76rem;
  margin-bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* Little barcode-ish tick before each eyebrow */
.section__eyebrow::before {
  content: "";
  width: 18px;
  height: 12px;
  background:
    linear-gradient(90deg,
      currentColor 0 2px, transparent 2px 4px,
      currentColor 4px 5px, transparent 5px 8px,
      currentColor 8px 11px, transparent 11px 13px,
      currentColor 13px 14px, transparent 14px 16px,
      currentColor 16px 18px);
  opacity: .85;
}

.on-ink .section__eyebrow { color: var(--c-yellow); }

.section__title {
  margin-bottom: var(--space-3);
  max-width: 24ch;
}
.section__title--small { font-size: 1.5rem; text-align: center; max-width: none; }

.section__lead {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 58ch;
  margin-bottom: var(--space-5);
}

/* Yellow label-sticker highlight inside headings — the signature mark.
   A slightly rotated parcel label behind the word. */
.accent {
  position: relative;
  display: inline-block;
  padding: 0 .18em;
  color: var(--c-ink);
  font-style: normal;
  /* Own stacking context so the ::before (z-index:-1) stays inside the
     span instead of dropping behind the section background. */
  z-index: 0;
}
.accent::before {
  content: "";
  position: absolute;
  inset: .04em -.06em -.02em -.06em;
  background: var(--c-yellow);
  border-radius: .18em;
  transform: rotate(-1.2deg);
  z-index: -1;
}
.on-ink .accent { color: var(--c-ink); }

/* Ink sections */
.on-ink {
  background: var(--c-ink);
  color: var(--c-text-invert);
}
.on-ink h1, .on-ink h2, .on-ink h3,
.on-ink p, .on-ink li { color: var(--c-text-invert); }
.on-ink .section__lead { color: var(--c-text-invert-muted); }

/* Hero ------------------------------------------------------------- */
.section--hero {
  background:
    radial-gradient(48rem 26rem at 85% 0%,
      rgba(255, 212, 58, .22), transparent 65%),
    linear-gradient(var(--c-bg), var(--c-mist));
  padding-block: var(--space-6) var(--space-7);
  overflow: hidden;
}
@media (min-width: 960px) {
  .section--hero { padding-block: var(--space-7) var(--space-8); }
}

.section--hero__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
}
@media (min-width: 960px) {
  .section--hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-6); }
}

.section--hero__badge { margin-bottom: var(--space-4); }

.section--hero__title {
  margin-bottom: var(--space-4);
  font-size: clamp(2.6rem, 5.8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
  font-weight: 800;
}
.section--hero__lead {
  font-size: 1.18rem;
  color: var(--c-muted);
  max-width: 47ch;
  margin-bottom: 0;
}
.section--hero__cta-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block: var(--space-5) var(--space-4);
}

/* Micro-trust line under the CTAs */
.section--hero__proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: .92rem;
  color: var(--c-muted);
}
.section--hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.section--hero__proof li::before {
  content: "";
  width: 1.1rem; height: 1.1rem;
  flex: 0 0 auto;
  background: var(--c-green-soft);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7a3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

/* Hero media — real app screenshot in a light browser frame,
   with floating status chips (the app's own status vocabulary). */
.section--hero__media { position: relative; }

.app-frame {
  background: #fff;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.app-frame__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-mist);
}
.app-frame__bar i {
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--c-rule-strong);
}
.app-frame__bar .mono {
  margin-left: .5rem;
  color: #35415a;
  letter-spacing: .06em;
  text-transform: none;
}
.app-frame img { width: 100%; height: auto; }

/* Floating chips over the screenshot.
   Each slot is a 1-cell grid holding two faces stacked on top of each other,
   so the wrapper sizes itself to the wider label and neither face leaves the
   flow. justify-items follows the slot's anchor, otherwise the shorter label
   drifts off the edge it is pinned to.
   The wrapper carries the idle float (drift + slow tilt); the faces carry the
   label crossfade. Keeping the two motions on different elements lets them
   compose without fighting over `transform`. */
.hero-chip {
  position: absolute;
  display: grid;
  justify-items: start;
  animation: hero-chip-float 7s ease-in-out infinite;
}
.hero-chip--1 { top: 12%; left: -1rem; }
.hero-chip--2 { bottom: 18%; right: -.75rem; justify-items: end; animation-delay: -2.3s; }
.hero-chip--3 { bottom: -1rem; left: 12%; animation-delay: -4.6s; }
@media (max-width: 959px) {
  .hero-chip--1 { left: -.25rem; }
  .hero-chip--2 { right: -.25rem; }
}

/* The shadow belongs on the face, not the wrapper — on the wrapper it would
   paint a bare rectangle the size of the wider label behind a narrower chip. */
.hero-chip__face {
  grid-area: 1 / 1;
  box-shadow: var(--shadow-soft);
  animation: hero-chip-swap 14s ease-in-out infinite;
}

/* Base opacity 0 is the reduced-motion fallback: the global rule in style.css
   kills the animation, and without this both labels would stack visibly. */
.hero-chip__face--alt { opacity: 0; }

/* Half-cycle offset per face, plus a stagger per slot so they never flip
   in unison. Each label holds ~5.6s and crossfades over ~1.4s. */
.hero-chip--2 .hero-chip__face { animation-delay: -2.3s; }
.hero-chip--3 .hero-chip__face { animation-delay: -4.6s; }
.hero-chip--1 .hero-chip__face--alt { animation-delay: -7s; }
.hero-chip--2 .hero-chip__face--alt { animation-delay: -9.3s; }
.hero-chip--3 .hero-chip__face--alt { animation-delay: -11.6s; }

/* The outgoing label leaves upward and the incoming one arrives from below,
   so the two never sit on top of each other mid-crossfade. The jump from
   -8px to +8px happens at 51%, while the face is fully transparent. */
@keyframes hero-chip-swap {
  0%,  40% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0; transform: translateY(-8px); }
  51%, 90% { opacity: 0; transform: translateY(8px); }
  100%     { opacity: 1; transform: translateY(0); }
}

/* Idle float: a slow bob with a gentle tilt, one wavelength per 7s.
   Amplitudes stay small (5px / 1.6deg) so the chips read as drifting,
   not swinging. */
@keyframes hero-chip-float {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(-5px) rotate(1.2deg); }
}

/* Partners --------------------------------------------------------- */
.section--partners {
  background: var(--c-bg);
  padding-block: var(--space-6);
}
.section--partners__head {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.section--partners .section__title {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  max-width: none;
}
.section--partners__lead {
  color: var(--c-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-4);
}

.partner-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  align-items: center;
}
@media (min-width: 600px) { .partner-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .partner-list { grid-template-columns: repeat(5, 1fr); } }

.partner-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--c-mist);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-height: 76px;
}
.partner-list img {
  max-height: 30px;
  width: auto;
  filter: grayscale(1);
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease;
}
.partner-list li:hover img { opacity: 1; filter: none; }

/* AI / automation flagship band ------------------------------------ */
.section--ai {
  background:
    radial-gradient(40rem 24rem at 12% 110%,
      rgba(255, 212, 58, .14), transparent 60%),
    var(--c-ink);
  overflow: hidden;
}

.section--ai__head { max-width: 62ch; }
.section--ai .section__title { max-width: 22ch; }

.ai-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .ai-grid { grid-template-columns: repeat(3, 1fr); } }

.ai-card {
  background: var(--c-ink-soft);
  border: 1px solid rgba(244, 247, 251, .12);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai-card__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-bottom: var(--space-1);
}
.ai-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.ai-card__body {
  margin: 0;
  color: var(--c-text-invert-muted);
  font-size: .98rem;
  line-height: 1.55;
}
.ai-card__meta {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--c-text-invert-muted);
  letter-spacing: .04em;
}

.section--ai__cta { margin-top: var(--space-5); }

/* AI recommendations on the tracking page -------------------------- */
.section--reco { background: var(--c-mist); }
.section--reco .section__title { max-width: 16ch; }
.section--reco .section__lead { margin-bottom: var(--space-3); }

.section--reco__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .section--reco__grid { grid-template-columns: .95fr 1.05fr; gap: var(--space-7); }
}

.section--reco__copy p { max-width: 52ch; }

/* Numbered points — mono index badge in the waybill motif, so the band
   does not read as a second copy of the benefit grid. */
.reco-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.reco-point {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  align-items: start;
}
.reco-point__num {
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-yellow);
  border-radius: var(--radius-sm);
  padding: .38rem .5rem;
}
.reco-point__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.reco-point__body {
  margin: 0;
  color: var(--c-muted);
  font-size: .93rem;
  line-height: 1.5;
}

/* Worked examples — order → pick → reason */
.reco-examples-wrap { margin-top: var(--space-6); }

.reco-examples {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .reco-examples { grid-template-columns: repeat(3, 1fr); } }

.reco-example {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.reco-example__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #35415a;
  margin-bottom: .25rem;
}
.reco-example__from,
.reco-example__to {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.reco-example__from { color: var(--c-muted); }
.reco-example__to { margin-top: var(--space-3); }
.reco-example__reason {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--c-yellow);
  color: var(--c-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.reco-examples__note {
  margin: var(--space-3) 0 0;
  color: var(--c-muted);
  font-size: .85rem;
  max-width: 62ch;
}

/* Process — parcel-tracking timeline ------------------------------- */
.section--process { background: var(--c-bg); }

.section--process__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .section--process__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-7); }
}

.process-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
}

/* Each step is a stop on the parcel's journey: dot + connecting line,
   exactly like the tracking view inside the app. */
.process-step {
  position: relative;
  padding: 0 0 var(--space-5) 2.4rem;
}
.process-step::before {
  /* the connecting line */
  content: "";
  position: absolute;
  left: .55rem;
  top: 1.35rem;
  bottom: -.15rem;
  width: 2px;
  background: var(--c-rule);
}
.process-step:last-child { padding-bottom: 0; }
.process-step:last-child::before { display: none; }

.process-step::after {
  /* the stop dot */
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--c-bg);
  border: 3px solid var(--c-ink);
}
.process-step--done::after {
  background: var(--c-green);
  border-color: var(--c-green);
}

.process-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}
.process-step__body {
  margin: 0;
  color: var(--c-muted);
  font-size: .98rem;
  line-height: 1.55;
  max-width: 52ch;
}
.process-step__chip { margin-top: var(--space-2); }

/* Photo beside the timeline */
.section--process__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: calc(72px + var(--space-4));
}
.section--process__media figure { margin: 0; }
.section--process__media img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 960px) {
  .section--process__media img { height: 420px; }
}
.section--process__media figcaption {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--c-muted);
  margin-top: var(--space-2);
}

/* Benefits --------------------------------------------------------- */
.section--benefits { background: var(--c-mist); }

.section--benefits .section__title { max-width: 24ch; }

.benefit-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .benefit-grid { grid-template-columns: repeat(4, 1fr); } }

.benefit {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  padding: var(--space-4);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.benefit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.benefit__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--c-yellow-soft);
  display: grid;
  place-items: center;
  color: var(--c-ink);
}
.benefit__icon svg { width: 1.3rem; height: 1.3rem; }

.benefit__title {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.benefit__body {
  margin: 0;
  color: var(--c-muted);
  font-size: .93rem;
  line-height: 1.5;
}

/* Feature splits (screenshot + copy) ------------------------------- */
.section--splits {
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.split {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .split--flip .split__copy  { order: 2; }
  .split--flip .split__media { order: 1; }
}

.split__copy h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.split__copy p {
  color: var(--c-muted);
  max-width: 52ch;
}
.split__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}
.split__list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--c-text);
  line-height: 1.5;
}
.split__list li::before,
.tote-specs li::before {
  content: "";
  position: absolute;
  left: 0; top: .22em;
  width: 1.2rem; height: 1.2rem;
  background: var(--c-yellow);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b2d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
}

.split__media .app-frame { box-shadow: var(--shadow-soft); }

/* Tote Light — Smart Warehouse hardware add-on --------------------- */
.section--tote { background: var(--c-mist); }
.section--tote .section__title { max-width: 22ch; }

.section--tote__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .section--tote__grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-7); }
}

/* A real photo, not a screenshot — no browser chrome, just a framed
   image like the process timeline's figure. */
.section--tote__media {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}
.section--tote__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.tote-chip {
  position: absolute;
  top: 22%;
  right: -.75rem;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 959px) {
  .tote-chip { right: .5rem; }
}

/* Device panel — layout only; colours come from .on-ink on the same
   element. */
.tote-device {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 960px) {
  .tote-device { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-6); }
}

.tote-device__stage {
  border-radius: var(--radius);
  overflow: hidden;
}
.tote-device__stage img {
  display: block;
  width: 100%;
  height: auto;
}

.tote-device__title {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: var(--space-3);
}
.tote-device__body {
  color: var(--c-text-invert-muted);
  max-width: 48ch;
}

/* Same yellow check bullet as .split__list (shared ::before above),
   but the text sits on ink — set the colour explicitly, otherwise the
   later .split__list rule would not apply and .on-ink li is too weak. */
.tote-specs {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}
.tote-specs li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--c-text-invert);
  line-height: 1.5;
}

/* Stats ----------------------------------------------------------- */
.section--stats .section__title { max-width: 24ch; }

.stats-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }

.stat {
  border-top: 2px solid var(--c-rule-invert);
  padding: var(--space-4) 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stat__value { margin: 0; }
.stat__num {
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 6.5vw, 5rem);
  font-weight: 800;
  color: var(--c-yellow);
  display: inline-block;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.stat__unit {
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-invert-muted);
  margin-left: .5rem;
  vertical-align: baseline;
}
.stat__label {
  margin: 0;
  color: var(--c-text-invert-muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34ch;
}

/* Pricing ---------------------------------------------------------- */
.section--pricing { background: var(--c-bg); }

.section--pricing .container { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .section--pricing .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-7);
  }
}
.section--pricing .section__title { max-width: 18ch; }

.price-card {
  max-width: 520px;
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.price-card__flag {
  position: absolute;
  top: -1rem;
  right: var(--space-4);
  transform: rotate(2deg);
}
.price-card__amount {
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.price-card__number {
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 6.5vw, 4.5rem);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.price-card__period {
  font-family: var(--font-mono);
  color: var(--c-muted);
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.price-card__body {
  color: var(--c-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.price-card__list li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .22em;
  width: 1.2rem; height: 1.2rem;
  background: var(--c-yellow);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b2d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
}
.price-card__note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Trust / clients -------------------------------------------------- */
.section--trust { background: var(--c-mist); }

.section--trust__lead {
  text-align: center;
  color: var(--c-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-5);
  font-size: 1.1rem;
}
.section--trust__lead strong { color: var(--c-ink); }

.client-strip {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-items: center;
}
@media (min-width: 600px) { .client-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .client-strip { grid-template-columns: repeat(5, 1fr); } }
.client-strip li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  min-height: 84px;
  padding: var(--space-3);
}
.client-strip img {
  max-height: 36px;
  width: auto;
  opacity: .75;
  filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease;
}
.client-strip li:hover img { opacity: 1; filter: none; }

/* FAQ ------------------------------------------------------------- */
.section--faq { background: var(--c-bg); }

.section--faq .container { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .section--faq .container {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-7);
    align-items: start;
  }
}
.section--faq .section__title { max-width: 16ch; }
.section--faq__head { position: sticky; top: calc(72px + var(--space-4)); }

.faq-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.faq-item {
  background: var(--c-mist);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item[open] { background: var(--c-bg); }

.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  line-height: 1.3;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+";
  margin-left: auto;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-blue);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.faq-item[open] .faq-item__q::after { content: "−"; }
.faq-item__q:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
  border-radius: var(--radius);
}
.faq-item__a {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--c-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 62ch;
}
.faq-item__a p { margin: 0; }

/* Demo ------------------------------------------------------------- */
.section--demo { background: var(--c-mist); }

.section--demo__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .section--demo__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-7); align-items: start; }
}
.section--demo__copy .section__title { max-width: 18ch; }
.section--demo__copy .section__lead strong { color: var(--c-ink); }

.section--demo__form {
  background: #fff;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-rule);
  box-shadow: var(--shadow-soft);
}

/* Demo form 2-col on wider screens */
@media (min-width: 600px) {
  .pakker-form .demo-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr 1fr;
  }
}

.form-fallback { color: var(--c-muted); font-family: var(--font-mono); font-size: .85rem; }

/* Pakker status messages wrapper inside demo card */
.pakker-messages { margin-bottom: var(--space-3); }