/* What you get (/what-you-get) and How it works (/how-it-works).
   The same depth vocabulary as the partners page (partners.css): white panels on the warm
   background, the solid "emboss" offset shadow, blueprint grid paper, the floor-plan motif and the
   dog-ear sheet corner. Brand colours come from the tokens in main.css; the illustrations inside
   the panels use the same five brand colours and their tints. */

.explainer-page {
  --emboss: #E8E4DC;
  --paper-tint: #F0EDE7;
  --grid-paper: linear-gradient(rgba(20,26,34,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(20,26,34,.055) 1px, transparent 1px);
}

/* ---------- Hero ---------- */
.explainer-hero .motif { top: 70px; right: -140px; }
.explainer-hero .editorial-hero__visual { margin-right: 14px; }

/* The seven parts, as a contents strip under the hero */
.pack-contents { margin-top: clamp(40px, 6vw, 72px); }
.pack-contents ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 12px 12px 0 var(--emboss), var(--shadow-sm);
  overflow: hidden;
}
.pack-contents li { background: var(--card); }
.pack-contents a {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 18px 16px 18px;
  color: var(--ink); text-decoration: none;
  transition: background .25s ease;
}
.pack-contents a:hover { background: #F7F5F0; }
.pack-contents a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.pc-num { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--accent); line-height: 1; }
.pc-label { font-size: .86rem; font-weight: 600; line-height: 1.3; }
.pack-contents a:hover .pc-label { color: var(--accent-dark); }

/* ---------- What you get: one panel per part ---------- */
.parts-section { padding-top: clamp(24px, 4vw, 48px); }
.parts { display: grid; gap: clamp(32px, 4.5vw, 52px); }
.part {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2xl);
  box-shadow: 14px 14px 0 var(--emboss), 0 22px 48px rgba(20,26,34,.08);
  overflow: hidden;
  scroll-margin-top: 104px;
}
.part:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); box-shadow: -14px 14px 0 var(--emboss), 0 22px 48px rgba(20,26,34,.08); }
.part:nth-child(even) .part-art { order: -1; border-left: 0; border-right: 1px solid var(--line-soft); }

.part-copy { min-width: 0; align-self: center; padding: clamp(30px, 4.4vw, 58px); }
.part-num { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.part-num b {
  display: grid; place-items: center; width: 46px; height: 46px;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: var(--accent);
  background: var(--card); border: 1.5px solid rgba(31,78,140,.32); border-radius: 13px;
  box-shadow: 4px 4px 0 var(--emboss);
}
.part h2 { font-size: clamp(1.65rem, 2.7vw, 2.2rem); margin-bottom: .55em; }
.part p { color: var(--mid); }
.part .checklist, .part .chips { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--line); }
.part .checklist li { color: var(--ink); font-size: .96rem; }
.explainer-page .checklist li svg { width: 22px; height: 22px; padding: 5px; margin-top: 1px; border-radius: 50%; background: rgba(31,78,140,.1); }
.part .chip { color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: 2px 2px 0 var(--emboss); }
.part .chip:hover { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 2px 2px 0 rgba(31,78,140,.25); }
.part-note { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: .875rem; color: var(--mid); }
.part-note svg { flex: none; margin-top: 3px; color: var(--accent); }
.part p.part-note { color: var(--mid); }

.part-art {
  position: relative; min-width: 0;
  display: grid; place-items: center;
  padding: clamp(14px, 2.2vw, 28px);
  background-color: var(--paper-tint);
  background-image: var(--grid-paper);
  background-size: 24px 24px;
  border-left: 1px solid var(--line-soft);
}
.part-art svg { width: 100%; height: auto; }
.part-art--photo { padding: 0; background: var(--paper-tint); }
.part-art--photo img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.art-tag {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(20,26,34,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.art-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(31,78,140,.18); }

/* Sample screenshot: the browser frame sits on an embossed sheet */
.explainer-page .shot-figure .browser { border: 1px solid var(--line-soft); box-shadow: 14px 16px 0 var(--emboss), var(--shadow-lg); }

/* Closing call to action: the same deep panel as the partners page */
.explainer-page .cta-banner { background: radial-gradient(ellipse at top right, var(--accent-dark), var(--deep) 65%); box-shadow: 0 18px 36px rgba(20,26,34,.12); }
.explainer-page .cta-banner .motif { top: -60px; right: -60px; }
.explainer-page .cta-banner > :not(.motif) { position: relative; z-index: 1; }

/* ---------- How it works: the four steps as a process board ---------- */
.process-section { padding-top: clamp(24px, 4vw, 48px); }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.process-step { position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 80px; }
.process-node {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--accent);
  background: var(--card); border: 2px solid var(--accent);
  box-shadow: 4px 5px 0 var(--emboss);
}
.process-step:last-child .process-node { color: #fff; background: var(--accent); }
/* The rail between nodes: dashed before the schedule starts, solid through the 72-hour window */
.process-step:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 66px; right: -12px; border-top: 2px dashed rgba(31,78,140,.32); }
.process-step.is-window::after { top: 26px; border-top: 4px solid var(--accent); border-radius: 4px; }
.rail-label { position: absolute; z-index: 1; top: 14px; left: 66px; right: -12px; display: flex; justify-content: center; pointer-events: none; }
.rail-label span { padding: 3px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(31,78,140,.25); }

.process-card {
  flex: 1; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 22px;
  box-shadow: 10px 10px 0 var(--emboss), var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.process-card:hover { transform: translateY(-4px); box-shadow: 12px 14px 0 var(--emboss), var(--shadow-md); }
.process-step.is-window .process-card { border-color: rgba(31,78,140,.28); }
.process-art {
  display: grid; place-items: center; height: 148px; padding: 14px 16px;
  background-color: var(--paper-tint); background-image: var(--grid-paper); background-size: 20px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.process-art svg { width: 100%; height: 100%; }
.process-body { padding: 22px 22px 26px; }
.process-body .t-meta { margin-bottom: 10px; font-size: .72rem; line-height: 1.4; }
.process-body h3 { font-size: 1.3rem; margin-bottom: 10px; }
.process-body p { margin: 0; color: var(--mid); font-size: .95rem; line-height: 1.62; }

/* The remote-work band */
.explainer-page .remote-band .lead { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pack-contents ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pack-contents li:last-child { grid-column: span 2; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
  .process-step:nth-child(2)::after { display: none; }
}
@media (max-width: 900px) {
  .part, .part:nth-child(even) { grid-template-columns: 1fr; box-shadow: 10px 10px 0 var(--emboss), var(--shadow-sm); }
  .part-art, .part:nth-child(even) .part-art { order: -1; border: 0; border-bottom: 1px solid var(--line-soft); }
  .part-art--photo img { height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 680px) {
  .explainer-hero .motif { top: 24px !important; right: -250px !important; opacity: .05; }
  .explainer-hero .editorial-hero__visual { margin-right: 10px; box-shadow: 8px 10px 0 var(--emboss), 0 16px 32px rgba(20,26,34,.1); }
  .pack-contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: 8px 8px 0 var(--emboss), var(--shadow-sm); }
  .pack-contents li:last-child { grid-column: span 2; }
  .pack-contents a { flex-direction: row; align-items: baseline; gap: 10px; padding: 15px 14px; }
  .part, .part:nth-child(even) { border-radius: var(--r-xl); box-shadow: 7px 7px 0 var(--emboss), var(--shadow-sm); }
  .part-copy { padding: 26px 22px 30px; }
  .part-art { padding: 14px; }
  .art-tag { left: 12px; bottom: 12px; }

  .process { grid-template-columns: 1fr; gap: 26px; }
  .process-step { padding: 0 0 0 66px; }
  .process-node { width: 48px; height: 48px; font-size: 1.2rem; }
  .process-step:not(:last-child)::after, .process-step:nth-child(2)::after { display: block; top: 56px; bottom: -22px; left: 23px; right: auto; border-top: 0; border-left: 2px dashed rgba(31,78,140,.32); }
  .process-step.is-window::after { top: 54px; left: 22px; border-top: 0; border-left: 4px solid var(--accent); }
  .rail-label { display: none; }
  .process-card { box-shadow: 7px 7px 0 var(--emboss), var(--shadow-sm); }
  .process-art { height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-card, .process-card:hover { transition: none; transform: none; }
}