/* ---------- hero ---------- */
/* Full-screen photo (locked box and puzzle props on navy, props on the right) with the words over its empty left side. */
.hero { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: 0; height: calc(100svh - 68px); min-height: 540px; display: grid; align-items: center; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.hero::before { /* keeps the words readable where the photo runs under them */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #111e2bf2 0, #111e2bcc 30%, #111e2b00 58%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-copy { max-width: 620px; }
.hero .eyebrow { color: var(--brass); }
.kinetic { display: flex; flex-direction: column; gap: .04em; margin-bottom: 32px; font-size: clamp(2.4rem, 4.6vw, 4.1rem); }
.kinetic .k { display: block; opacity: 0; transform: translateY(.4em); animation: kin .7s var(--ease) forwards; font-variation-settings: "wght" 500; }
.kinetic .k:nth-child(1) { animation-delay: .05s; }
.kinetic .k:nth-child(2) { animation-delay: .25s; }
.kinetic .k:nth-child(3) { animation-delay: .45s; }
@keyframes kin { to { opacity: 1; transform: none; font-variation-settings: "wght" 800; } }
@media (prefers-reduced-motion: reduce) { .kinetic .k { opacity: 1; transform: none; font-variation-settings: "wght" 800; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn--tape { --bg: var(--brass); --fg: var(--night); border-color: var(--brass); }
.hero .btn:hover { box-shadow: 0 6px 0 -1px #0008; }
.btn--light { --fg: #fff; border-color: #ffffffb3; }
/* phones: still full screen; words at the top, props showing below them */
@media (max-width: 820px) {
  .hero { align-items: start; }
  .hero-img { inset: auto -20% 0 auto; width: 185%; max-width: none; height: auto; object-fit: initial; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
  .hero::before { display: none; }
  .hero .wrap { padding-top: 40px; }
}

/* ---------- how ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 28px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #111e2b10, 0 18px 36px -16px #111e2b55; }
.step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tape); font-weight: 700; margin-bottom: 16px; }
.step p { color: var(--ink-2); margin: 0; }
.split { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 20px; align-items: center; border: 2px solid var(--char); border-radius: var(--r); padding: 28px; background: #fff; }
.split ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--ink-2); }
.split-mid svg { width: 80px; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .split-mid { justify-self: center; transform: rotate(90deg); } }

/* ---------- duo ---------- */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.duo-grid > div { border-top: 3px solid var(--char); padding-top: 26px; }
.duo-grid p { color: var(--ink-2); }
@media (max-width: 760px) { .duo-grid { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--gray-2); background: transparent; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 650 1.1rem/1.3 var(--f-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 400 1.6rem/1 var(--f-body); transition: rotate .2s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--ink-2); margin: 0 0 20px; max-width: 60ch; }