/* =============================================================================
   Event Trekker — single-page marketing layer (onepage.css)
   Visual language derived from ~/projects/themes/crafto (demo-application):
     · full-screen cover hero with staggered reveal (crafto data-anime)
     · alternating screen/text feature slides (crafto half-section split)
     · overlap/parallax translate on scroll (crafto data-bottom-top pattern)
   Hand-rolled on Event Trekker brand tokens (styles.css :root). Lightweight —
   no jQuery / anime.js bundle; reveal + parallax done in vanilla onepage.js so
   Core Web Vitals stay strong (LCP/CLS/INP). See THEME-LINEAGE.md.
   ========================================================================== */

:root {
  --op-ink:    var(--neutral-900);
  --op-ink-2:  var(--neutral-600);
  --op-coral:  var(--brand-primary);
  --op-teal:   var(--brand-accent-500);
  --op-navy:   var(--brand-accent-700);
  --op-cream:  var(--neutral-50);
  --op-line:   var(--neutral-200);
  --op-radius: 22px;
  --op-max:    1180px;
}

.onepage { background: var(--neutral-0); color: var(--op-ink); }
.onepage .container { max-width: var(--op-max); }

/* smooth in-page nav */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- shared section rhythm ---- */
.op-band { padding: clamp(56px, 8vw, 108px) 0; position: relative; }
/* r12 (BH 7832): body sections are LIGHT-ONLY. Rhythm = white ↔ a subtle WARM CREAM.
   --op-cream (#FAF7F4, L≈247.6) is nearly invisible against white; the tint band uses a
   slightly deeper warm cream (#F7F1E9, perceived-L ≈ 241.9 — well within the LIGHT range,
   L≥225) so the alternation READS while staying premium/subtle. Differentiation comes from
   the tint + section dividers, NOT from darkness. A hairline top/bottom warm rule crisps
   the seam between adjacent light bands. */
.op-band-tint  { background: #F7F1E9;
  border-top: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); }

/* =============================================================================
   r12 (BH 7832) · BODY SECTIONS ARE LIGHT-ONLY — mid-dark band DROPPED entirely
   -----------------------------------------------------------------------------
   BH said "sections still too dark" three times: the r10/r11 mid-dark #2A2320
   (perceived-L ≈ 37/255) reads as DARK, not "mid". So the entire dark/mid-dark
   body-band system is REMOVED. The hero is now the SINGULAR dark section (its own
   CSS is untouched); the footer stays dark as the closing anchor. Every BODY
   section is LIGHT — a tasteful white↔warm-cream alternation:

       HERO ......... DARK   (#1A1612 — the ONLY dark section, unchanged)
       feature-strip  cream  (#F7F1E9 · L≈241.9)   .op-trust
       #ai .......... white  (#FFFFFF · L 255)
       #why ......... cream  (#F7F1E9 · L≈241.9)   .op-band-tint
       #how ......... white  (#FFFFFF · L 255)
       #features .... cream  (#F7F1E9 · L≈241.9)   .op-band-tint
       #usecase ..... white  (#FFFFFF · L 255)     .op-band-story
       #get ......... cream  (#F7F1E9 · L≈241.9)   .op-band-tint
       FOOTER ....... DARK   (#0F0C0A, unchanged — closing anchor w/ the hero)

   All body-section bgs sit at perceived-L ≥ 241.9 (floor was 225). Differentiation
   comes from the SUBTLE cream tint + section dividers, NOT darkness. All body text
   uses the LIGHT-section treatment (dark ink #1A1612 / muted #605649 / coral-700
   #9F3A15 / teal-700 #2E6E8E — all ≥ 4.5:1 AA on both white and #F7F1E9). The old
   `.op-band-dark` class + its dark text/card re-theme + the bright-coral #FF8A5B /
   bright-teal #7FC1D9 accents (for-dark-only) are all GONE — nothing references them.
   Because #ai / #how / #get are now plain `.op-band` (+ tint), they inherit the exact
   same light-section rules as #why / #features / #usecase; no per-section overrides
   are needed for their text, cards, spine, or store chip. ---------------------------- */
.op-band-story { background: var(--neutral-0); }

.op-head { max-width: 760px; margin: 0 auto clamp(40px, 5.5vw, 68px); text-align: center; }
.op-head .op-sub { margin-top: .7rem; }
.op-eyebrow, .op-kicker, .op-slide-tag {
  display: inline-block; font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  /* DEF-A11Y-001: small (<18.66px) uppercase coral accent → AA-safe coral-700
     (#9F3A15 · 6.80:1 white / 6.37:1 warm-50). --op-coral (#E85D2B) is 3.48:1 —
     large-text-only floor. */
  color: var(--brand-primary-dark);
}
.op-head h2 { font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; margin: .5rem 0 .7rem; }
.op-sub { color: var(--op-ink-2); font-size: 1.06rem; line-height: 1.6; margin: 0; }
.hl-gradient { background: linear-gradient(100deg, var(--op-coral), var(--brand-secondary-500) 55%, var(--op-teal));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* device screens — device-only TRANSPARENT phones (iPhone frame baked in, NO
   caption, NO gradient panel). They sit directly on each section's own bg, under
   the section's own single headline. drop-shadow works on the transparent alpha. */
.op-phone { display: block; width: 100%; height: auto; max-width: 320px;
  filter: drop-shadow(0 30px 55px rgba(26,22,18,.22)); border-radius: 6px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
/* premium hover: the device lifts + shadow deepens (respects reduced-motion below) */
.op-step-media:hover .op-phone,
.op-feature-media:hover .op-phone,
.op-slide-media:hover .op-phone,
.op-hero-visual:hover .op-phone-hero {
  transform: translateY(-8px) scale(1.012);
  filter: drop-shadow(0 42px 70px rgba(26,22,18,.30));
}

/* ---- header CTA pill ---- */
.nav-cta { background: var(--op-coral); color: #fff !important; padding: 8px 16px; border-radius: 30px; }
.nav-cta:hover { background: var(--brand-primary-dark); }

/* ============================ 1 · HERO ============================ */
/* R5 (BH 7783) · DARK HERO. BH pasted the following .op-hero + hero-selector CSS
   to apply VERBATIM — his exact rgb() values are used as-is below (the dark
   base-color + 4-layer coral/teal radial+linear gradient + coral 2px bottom rule,
   and the light 240,240,240 text on the listed hero selectors). The reconcile
   block that follows adapts the REST of the hero (badges/pills/ghost-button
   border/QR-card-inner-text/phone) so nothing looks broken on the new dark bg.
   ------------------------------------------------------------------------- */
/* ---- BH VERBATIM (do not alter values) ---- */
.op-hero {
  background-color: rgb(26, 22, 18);
  background-image: radial-gradient(900px 480px at 15% 10%, rgba(232,93,43,.4), rgba(0,0,0,0) 65%), radial-gradient(600px 600px at 90% 90%, rgba(232,93,43,.35), rgba(0,0,0,0) 70%), radial-gradient(900px 520px at 92% 22%, rgba(46,110,142,.25), rgba(0,0,0,0) 62%), linear-gradient(135deg, rgb(35,25,20) 0%, rgb(15,12,10) 100%);
  color: rgb(255,255,255); opacity: 1; border-bottom: 2px solid rgb(232,93,43);
}
.op-kicker { color: rgb(240,240,240); }
.op-hero-copy h1 { color: rgb(240,240,240); }
.hl-gradient { color: rgb(240,240,240); }
.op-hero-tagline { color: rgb(240,240,240); }
.op-lede { color: rgb(240,240,240); }
.op-btn-primary { color: rgb(240,240,240); }
.op-btn-ghost { color: rgb(240,240,240); }
.op-hero-qr-img { color: rgb(240,240,240); }
.op-hero-qr-copy span { color: rgb(240,240,240); }
.op-hero-meta { color: rgb(240,240,240); }
/* ---- /BH VERBATIM ---- */

/* ---- R5 RECONCILE (dark-coherence, scoped to the hero) ----
   BH's verbatim block sets text light but leaves several hero sub-elements styled
   for the OLD light bg. These overrides (all scoped under .op-hero) fix them so the
   hero reads correctly on dark. Contrast verified against dark bg rgb(26,22,18):
     · light 240 text on dark ............... 15.78:1  (AAA)
     · coral #E85D2B as UI element on dark ... 5.17:1   (>3:1 UI floor)
     · light .45 translucent border on dark .. 4.5:1    (>3:1 UI floor)
     · QR white-card inner text kept dark ..... 17.99:1 / 7.18:1 on white          */

/* R5 CASCADE FIX — BH's verbatim block (lines above) sets these selectors light,
   but several are RE-DECLARED later in this file with the OLD dark/navy light-bg
   values (`.op-lede`, `.op-hero-meta`, `.op-hero-tagline`) and `.hl-gradient` still
   carries its gradient-clip (background-clip:text + color:transparent) which masks
   BH's `color`. Source-order alone lets those later plain-class rules win. We honor
   BH's INTENT (light hero text) by re-asserting it at higher specificity (.op-hero
   prefix = 0,2,0 > 0,1,0) so it beats the later redeclarations, and by neutralizing
   the gradient-clip inside the hero so BH's solid light `.hl-gradient` shows. */
.op-hero .op-hero-tagline { color: rgb(240,240,240); }
.op-hero .op-lede { color: rgb(240,240,240); }
.op-hero .op-hero-meta { color: rgb(240,240,240); }
.op-hero .hl-gradient {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; color: rgb(240,240,240); }

.op-hero { position: relative; overflow: hidden;
  padding: clamp(96px, 13vw, 150px) 0 clamp(60px, 8vw, 96px); }

/* the pre-existing top glow was a coral wash tuned for a light bg; soften + keep it
   from washing out the dark base, but let it add depth at the top edge. */
.op-hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 50% -10%, rgba(232,93,43,.18), transparent 70%); }
.op-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; position: relative; }
.op-hero-copy h1 { font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 800;
  font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -.03em; margin: .6rem 0 1rem; }
.op-lede { font-size: 1.16rem; line-height: 1.6; color: var(--op-ink-2); max-width: 34ch; margin: 0 0 1.4rem; }
.op-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1.5rem; }
/* R5: platform pills (iOS/Android/Web) were dark-on-white — on the dark hero they'd
   be near-invisible. Retint to translucent-light: faint light fill + light .45 border
   (4.5:1 on dark, clears the 3:1 UI floor) + light 240 text (15.78:1). */
.op-hero-badges li { font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .8rem;
  padding: 6px 13px; border-radius: 30px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.45);
  color: rgb(240,240,240); letter-spacing: .02em; }
/* R7 (BH 7796): the 3 platform indicators are now round-WHITE brand-color badges
   (@ui-designer r7-platform-badges.md) — filled white discs with the logo baked in its
   own brand color (Apple #000, Android #3DDC84, Web #2E6E8E). They are NOT pills, so the
   translucent .op-hero-badges-li pill chrome is stripped on these items (no fill/border/
   padding). The r6 currentColor light-tint no longer applies (colors are baked in). Each
   badge is ~44px medium and carries role=img + aria-label (self-contained a11y name). The
   badge row is vertically centered so the ~44px discs align with the AI pill's baseline. */
.op-hero-badges-r7 { align-items: center; gap: 10px; }
.op-badge-plat { display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important; background: none !important; border: 0 !important;
  border-radius: 0 !important; }
/* r7e (BH 7808 #1): platform badges enlarged 44px → 56px so they read as prominent
   round brand-color badges on the dark hero, still balanced with the AI pill. Scales
   down to 50px on phones (≤520px) to avoid crowding / wrap at 360px. */
.op-plat-badge { width: 56px; height: 56px; display: block; }
/* legacy r6 rules kept as dead CSS for any page still referencing them; nothing on
   index.html uses .op-badge-platform / .op-platform-ico after r7. */
.op-badge-platform { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; }
.op-platform-ico { display: inline-flex; }
.op-platform-ico svg { width: 22px; height: 22px; color: rgb(240,240,240); display: block; }
/* the AI pill keeps its own coral→ochre gradient fill with white text — a self-
   contained filled badge, readable on any surrounding bg; its coral fill sits at
   5.17:1 against the dark hero so the pill edge stays crisp. Unchanged from BH intent. */
.op-badge-ai { display: inline-flex; align-items: center; gap: 7px;
  font-size: .86rem; padding: 9px 16px;
  background: linear-gradient(100deg, var(--op-coral), var(--brand-secondary-500)) !important;
  color: #fff !important; border-color: transparent !important; }
.op-badge-ai svg { width: 17px; height: 17px; }
/* R7 (BH 7796): the hero primary "Get the app" button was REMOVED (BH judgment-call (a):
   remove-the-button). The .op-cta-row div is gone from index.html; these rules are kept as
   dead CSS for any other page sharing onepage.css. After removal the hero flow re-spaces
   itself cleanly: platform badges (margin-bottom 1.5rem) → QR chip (margin-top .4rem) →
   meta — an intentional ~1.9rem gap, no awkward empty button row. */
.op-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1rem; }
.op-btn { font-family: 'Manrope',sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 14px 26px; border-radius: 32px; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.op-btn-primary { background: var(--op-coral); color: #fff; box-shadow: 0 12px 26px rgba(232,93,43,.30); }
.op-btn-primary:hover { background: var(--brand-primary-dark); transform: translateY(-2px); }
/* R6 (BH 7785): the ghost "See a real trip" hero CTA was REMOVED — hero now keeps only
   the primary "Get the app" action. The R5 ghost-on-dark reconcile block that lived here
   is dropped as dead CSS. (The harmless `.op-btn-ghost { color }` in the BH-verbatim
   block above is left as-is to honor "do not alter values"; no element uses it now.) */
.op-hero-meta { font-size: .9rem; color: var(--op-ink-2); margin: .4rem 0 0; }
.op-hero-visual { display: flex; justify-content: center; }
/* R5: the device on the dark hero. The shared .op-phone drop-shadow is a DARK
   shadow (rgba(26,22,18,…)) — invisible on the near-identical dark hero bg, so the
   phone edges would float/lose definition. Override with a soft light rim + a
   deeper ambient shadow so the device lifts cleanly off the dark backdrop. */
.op-phone-hero { max-width: 340px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.28))
          drop-shadow(0 30px 60px rgba(0,0,0,.55)); }
.op-hero-visual:hover .op-phone-hero {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.35))
          drop-shadow(0 42px 78px rgba(0,0,0,.62)); }

/* REVISION 3 · hero tagline (BH copy) */
.op-hero-tagline { font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--op-navy); margin: 0 0 1rem;
  letter-spacing: -.01em; }

/* REVISION 3 · hero QR — R6 (BH 7785): ONE LINE — [QR chip] + "Get the app" label only.
   The "Scan to get the app" heading + the "Point your phone camera…" instruction copy
   are REMOVED. The QR CARD stays white (intentional — high separation + shadow to lift
   it off the dark hero); base-board CONFIRMED the white chip needs DARK inner text, so
   the "Get the app" label sits inside the white card as DARK-on-white (var(--op-ink),
   17.99:1). BH's verbatim `.op-hero-qr-copy span { color:240 }` no longer applies (the
   .op-hero-qr-copy element is gone). */
.op-hero-qr { display: inline-flex; align-items: center; gap: 14px; margin: .4rem 0 0;
  padding: 12px 18px 12px 12px; background: #fff; border: 1px solid var(--op-line);
  border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.32); }
.op-hero-qr-img { display: block; line-height: 0; border-radius: 10px; overflow: hidden; }
.op-hero-qr-img img { width: 96px; height: 96px; display: block; }
.op-hero-qr-cta { font-family: 'Manrope',sans-serif; font-weight: 800; font-size: 1rem;
  color: var(--op-ink) !important; white-space: nowrap; letter-spacing: -.01em; }
.op-hero-qr-cta:hover { color: var(--brand-primary-dark) !important; }
/* PLACEMENT BUILD (BH ref 1788094627_575759-image.png): "Get the app" inside the QR chip is a
   styled coral-pill BUTTON matching the "AI Enabled" pill. Reuses the .op-badge-ai / .op-pill-ai
   coral→ochre gradient with white text; fully rounded; sits on the white chip → high contrast.
   White text on the coral fill (#E85D2B side) is ≥4.5:1 (5.17:1) — legible. The dark-on-white
   color from .op-hero-qr-cta above is overridden here (white text on the pill). */
.op-hero-qr-btn { display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: 32px;
  background: linear-gradient(100deg, var(--op-coral), var(--brand-secondary-500));
  color: #fff !important; border: 0;
  box-shadow: 0 8px 20px rgba(232,93,43,.30);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.op-hero-qr-btn:hover { color: #fff !important; transform: translateY(-1px);
  filter: brightness(1.04); box-shadow: 0 12px 26px rgba(232,93,43,.38); }
@media (prefers-reduced-motion: reduce) { .op-hero-qr-btn { transition: none; }
  .op-hero-qr-btn:hover { transform: none; } }

/* ==================== trust strip (under hero) ==================== */
/* r7e (BH 7808 #2): key-highlight feature strip enlarged — more vertical padding,
   bigger text, and each icon set inside a 44px tinted teal disc so it reads as a
   prominent icon (was a bare 1.15rem emoji). Readable + responsive; scales down at
   ≤520px (below). */
.op-trust { background: var(--op-cream); border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line); padding: clamp(34px, 4.5vw, 56px) 0; }

/* r13 (BH 7835) · KEY-HIGHLIGHT TILES — icon+title ONLY.
   SUPERSEDES the r11 disc+caption treatment. BH: "keep only the symbol with a large size"
   + "remove the description under the title." So: NO disc/badge behind the icon (dropped
   the tinted background, ring, and fixed-circle box), the glyph is scaled up meaningfully
   and rendered standalone, and the caption paragraph is gone. Each tile = [large coral
   glyph] + [bold title]. Grid = 4-per-row desktop, 2-per-row ≤900px + phone (item-1
   balance rule). A min-height keeps the now-shorter title-only tiles looking intentional
   and vertically aligned. */
.op-hl-grid { list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px); max-width: 1120px; }
.op-hl-tile { background: #fff; border: 1px solid var(--op-line); border-radius: 16px;
  padding: clamp(26px, 3vw, 34px) clamp(16px, 1.8vw, 22px);
  min-height: clamp(150px, 15vw, 184px);
  text-align: center; box-shadow: 0 14px 34px rgba(26,22,18,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; transition: transform .25s ease, box-shadow .25s ease; }
.op-hl-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(26,22,18,.11); }
@media (prefers-reduced-motion: reduce) { .op-hl-tile:hover { transform: none; } }
/* r21 (BH 7865): RESTORE the OLD-SITE key-highlights look BH liked — soft-pastel
   rounded-square icon BADGE per tile (distinct pastel per tile: coral · sky · amber ·
   mint), colored line-glyph inside, bold title below. Content unchanged (same 4 titles,
   no subtitle). Supersedes the r13 "large standalone coral glyph" treatment. Badges are
   LIGHT pastel fills on the LIGHT band → no lightness regression. Each glyph stroke uses
   an AA-safe deep tone of its family (≥ 4.5:1 on its own pastel fill AND on #FFF; the
   badge itself is decorative so WCAG 1.4.11 non-text ≥ 3:1 is comfortably met). */
.op-hl-ico { display: inline-flex; align-items: center; justify-content: center;
  width: clamp(58px, 5.2vw, 68px); height: clamp(58px, 5.2vw, 68px);
  border-radius: clamp(16px, 1.6vw, 20px); line-height: 0; margin: 0;
  /* per-tile pastel badge + glyph tone, set by nth-child below (defaults = coral) */
  background: var(--et-hl-bg, #FFE7DC); color: var(--et-hl-fg, #B5431B); }
.op-hl-ico svg { width: clamp(30px, 2.8vw, 34px); height: clamp(30px, 2.8vw, 34px);
  display: block; }
/* Tile 1 · Time → coral/peach (matches old-site "One timeline") */
.op-hl-tile:nth-child(1) .op-hl-ico { --et-hl-bg:#FCE3D8; --et-hl-fg:#B5431B; }
/* Tile 2 · Tickets → sky-blue (old-site "iOS·Android·Web") */
.op-hl-tile:nth-child(2) .op-hl-ico { --et-hl-bg:#DCEAF7; --et-hl-fg:#1E5FA3; }
/* Tile 3 · Money/split → amber (old-site "Multi-currency") */
.op-hl-tile:nth-child(3) .op-hl-ico { --et-hl-bg:#FBEBCB; --et-hl-fg:#9A6B08; }
/* Tile 4 · AI/less-admin → mint-green (old-site "Free at launch") */
.op-hl-tile:nth-child(4) .op-hl-ico { --et-hl-bg:#DBEEDE; --et-hl-fg:#2C7A44; }
/* r21b (BH 7868): de-bold — match #ai "Create with AI" (.op-ai-cap) font style:
   Manrope 700, normal letter-spacing. Titles-text unchanged.
   r23b (BH 7883): exact style-sync to the #ai "Create with AI" <strong> per Chrome-AI DevTools —
   font-size 1.08rem, color muted-brown --op-ink-2 (#605649, ~5.6:1 on light tile → AA-safe),
   line-height 1.65, text-transform none. Titles-only. */
.op-hl-title { font-family: 'Manrope',sans-serif; font-weight: 700;
  font-size: 1.08rem; color: var(--op-ink-2); line-height: 1.65; text-transform: none;
  letter-spacing: normal; margin: 0; }

/* ==================== 2 · AI band — 4-SCREEN AI JOURNEY (R4 redesign) ====================
   Centered heading + a 4-up numbered flow-row (.op-ai-flow, CSS grid). Shows the real
   AI capability end-to-end: scope (09) → Create-with-AI (10) → summary list (06) →
   summary detail (07). 4 cols desktop → 2×2 tablet/phone. Clean grid, zero overlap. */
.op-pill { display: inline-flex; align-items: center; gap: 7px; font-family: 'Manrope',sans-serif;
  font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 30px; }
.op-pill-ai { background: linear-gradient(100deg, var(--op-coral), var(--brand-secondary-500)); color: #fff; }
.op-pill-ai svg { width: 15px; height: 15px; }
.op-fine { font-size: .9rem; opacity: .85; }

.op-ai { text-align: center; }
.op-ai-head { max-width: 720px; margin: 0 auto; }
.op-ai-head h2 { font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; margin: .8rem 0 1rem; }
.op-ai-head p { line-height: 1.65; font-size: 1.08rem; color: var(--op-ink-2); max-width: 60ch; margin: 0 auto 1rem; }
.op-ai-head .op-fine { color: var(--op-ink-2); }
/* R4 (BH 7781) · 4-SCREEN AI JOURNEY (replaces the old 2-phone overlap stage).
   Now that the app's REAL AI-scope (09) + AI-assisted add-event (10) screens exist, the
   showcase demonstrates the full flow: scope (09) → Create-with-AI (10) → summary list (06)
   → summary detail (07). A clean numbered flow-row — NO overlap at any width (the old
   overlapping-phone stage couldn't hold 4 devices cleanly). Explicit 800×1673 on every img
   keeps CLS ~0; all four are below-fold → lazy. */
.op-ai-flow { list-style: none; padding: 0; margin: clamp(30px,5vw,54px) auto 0;
  max-width: 1080px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 28px);
  align-items: start; }
.op-ai-step { display: flex; flex-direction: column; align-items: center; margin: 0; }
.op-ai-shot { position: relative; width: 100%; border-radius: 22px;
  padding: clamp(12px,1.6vw,18px) clamp(10px,1.4vw,16px) clamp(6px,1vw,10px);
  background:
    radial-gradient(320px 200px at 28% 6%, rgba(232,93,43,.10), transparent 66%),
    radial-gradient(320px 220px at 84% 94%, rgba(46,110,142,.12), transparent 62%),
    var(--neutral-0);
  border: 1px solid var(--op-line); box-shadow: 0 18px 46px rgba(26,22,18,.08);
  display: flex; justify-content: center; }
.op-ai-flow .op-ai-phone { display: block; width: 100%; height: auto; max-width: 220px;
  border-radius: 6px; filter: drop-shadow(0 20px 40px rgba(26,22,18,.22));
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.op-ai-shot:hover .op-ai-phone { transform: translateY(-6px); filter: drop-shadow(0 28px 52px rgba(26,22,18,.30)); }
.op-ai-cap { display: flex; align-items: flex-start; gap: 9px; justify-content: center;
  margin: 16px 4px 0; font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .95rem;
  line-height: 1.35; color: var(--op-ink); text-align: left; max-width: 26ch; }
.op-ai-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: .82rem; font-weight: 800;
  color: #fff; background: linear-gradient(100deg, var(--op-coral), var(--brand-secondary-500));
  margin-top: 1px; }

/* ==================== 4 · WHY — BENTO / ASYMMETRIC GRID (redesign) ====================
   Distinct skeleton: a bento grid — one tall "hero device" cell + four benefit cards,
   NOT a text-one-side / phone-other-side split. Crafto feature-box chrome (bg-white,
   border-radius, box-shadow-quadruple-large-hover) re-skinned to ET tokens. */
.op-why-bento { display: grid; gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-areas:
    "device pillar-a pillar-b"
    "device pillar-c pillar-d"; }
.op-why-device { grid-area: device; position: relative; overflow: hidden;
  border-radius: var(--op-radius); border: 1px solid var(--op-line);
  background:
    radial-gradient(360px 240px at 22% 6%, rgba(232,93,43,.10), transparent 62%),
    radial-gradient(360px 260px at 90% 96%, rgba(46,110,142,.12), transparent 60%),
    var(--neutral-0);
  box-shadow: 0 22px 54px rgba(26,22,18,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: clamp(22px,3vw,34px) clamp(18px,2.5vw,28px) 0; text-align: center; }
.op-why-device .op-why-device-cap { margin: 0 0 clamp(18px,2.5vw,26px); }
.op-why-device .op-why-device-cap strong { display: block; font-family: 'Schibsted Grotesk','Manrope',sans-serif;
  font-weight: 800; font-size: clamp(1.15rem,2vw,1.5rem); letter-spacing: -.02em; margin-bottom: .3rem; }
.op-why-device .op-why-device-cap span { font-size: .96rem; color: var(--op-ink-2); }
.op-why-device .op-phone { max-width: 250px; margin-bottom: -6px;
  filter: drop-shadow(0 24px 44px rgba(26,22,18,.22)); }
.op-why-card { grid-area: auto; background: #fff; border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: clamp(20px,2.4vw,26px) clamp(18px,2.2vw,22px); transition: transform .2s ease, box-shadow .2s ease; }
.op-why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26,22,18,.10); }
.op-why-card.a { grid-area: pillar-a; } .op-why-card.b { grid-area: pillar-b; }
.op-why-card.c { grid-area: pillar-c; } .op-why-card.d { grid-area: pillar-d; }
/* r10 (BH 7820 item 10): #why bento icons now hold the same inline-SVG line-icon set as the
   feature strip (was emoji). Coral stroke inside the coral-50 rounded chip — one consistent,
   professional icon language across the page. */
.op-why-ico { display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--brand-primary-50); border: 1px solid var(--brand-primary-100);
  color: var(--brand-primary); line-height: 0; margin-bottom: 14px; }
.op-why-ico svg { width: 25px; height: 25px; display: block; }
.op-why-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .4rem; }
.op-why-card p { font-size: .96rem; line-height: 1.55; color: var(--op-ink-2); margin: 0; }

/* ==================== 5 · HOW IT WORKS — CENTERED NUMBERED RAIL (redesign) ============
   Distinct skeleton: a single vertical spine down the CENTER with numbered nodes and
   cards that alternate left/right off the spine (crafto process-step-style-05 rail).
   NOT the same grid split as #why or #features. Device sits inside each card. */
.op-steps { list-style: none; padding: 0; margin: clamp(20px,3vw,34px) auto 0; max-width: 980px;
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); position: relative; }
.op-steps::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px;
  transform: translateX(-50%); background: linear-gradient(180deg, var(--brand-primary-100), var(--op-line));
  z-index: 0; }
/* r11 (BH 7822 item 12) · NUMBER-RAIL ALIGNMENT.
   BH: "the number is inconsistently placed." Root cause was `align-items: center` here —
   each coral number circle (.op-step-n, grid col 2) was vertically CENTRED against its
   card, so cards of different copy-lengths pushed their numbers to different vertical
   offsets. Fix: align every step's items to the START (top) so all 3 numbers sit at the
   same top offset = a clean numbered rail. .op-step-n gets a small top nudge (below) so it
   lines up with the card's first line of copy. Applies uniformly incl. reversed step-2. */
.op-step { position: relative; z-index: 1; display: grid; align-items: start;
  grid-template-columns: 1fr 64px 1fr; gap: clamp(14px,2.4vw,26px); }
.op-step-card { background: #fff; border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: clamp(20px,2.6vw,30px); box-shadow: 0 16px 40px rgba(26,22,18,.07);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(16px,2.4vw,26px); align-items: center;
  grid-column: 1; }
.op-step-rev .op-step-card { grid-column: 3; }
/* r10 (BH 7819 item 2) · FIX the reversed step-2 (circle) phone not showing at DESKTOP.
   The inner card is a `1fr auto` grid (copy | media). On a REVERSED step the media gets
   order:-1, so it becomes the FIRST grid item and lands in the `1fr` track while the copy
   (a long paragraph) lands in the content-sized `auto` track. The copy's min-content then
   claims the width and the `1fr` media track collapses toward 0 — and because .op-step-media
   is a flex box whose only child (.op-phone) is width:100%, the phone resolves to ~0px and
   DISAPPEARS (desktop-only; on ≤900px the L496 rule flattens both cards to one column so it
   was fine on mobile). Mirror the track order for reversed cards so the media always sits in
   the content-sized `auto` track (like the normal step) and the copy in `1fr`. */
.op-step-rev .op-step-card { grid-template-columns: auto 1fr; }
.op-step-n { grid-column: 2; justify-self: center; align-self: start; display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  /* r11 item 12: top-aligned to the card. margin-top ≈ card top-padding so the number
     centres against the card's first line of copy — identical offset on all 3 steps. */
  margin-top: clamp(14px, 1.9vw, 22px);
  background: var(--op-coral); color: #fff; font-family: 'Schibsted Grotesk',sans-serif; font-weight: 800;
  font-size: 1.35rem; box-shadow: 0 10px 22px rgba(232,93,43,.30); border: 4px solid var(--neutral-0); }
.op-step-copy h3 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 800; margin: 0 0 .45rem; }
.op-step-copy p { font-size: 1rem; line-height: 1.6; color: var(--op-ink-2); margin: 0; }
.op-step-media { display: flex; justify-content: center; }
.op-step-media .op-phone { max-width: 150px; }
.op-step-rev .op-step-card .op-step-media { order: -1; }

/* ==================== 6 · FEATURES — STAGGERED OFFSET CARDS (redesign) ================
   Distinct skeleton: three self-contained cards on the section's own surface, each
   vertically STAGGERED (offset margin) so the eye zig-zags — not a flat alternating
   split. Device tucked into a tinted media well inside each card. */
.op-features-stack { display: grid; gap: clamp(24px, 3.5vw, 44px); max-width: 1000px; margin: 0 auto; }
.op-feature { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(20px, 4vw, 48px);
  align-items: center; background: #fff; border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: clamp(20px,2.8vw,34px); box-shadow: 0 18px 46px rgba(26,22,18,.07);
  transition: transform .2s ease, box-shadow .2s ease; }
.op-feature:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(26,22,18,.11); }
/* zig-zag stagger — cards nudge off the centre line on desktop */
.op-feature:nth-child(odd)  { margin-right: clamp(0px, 6vw, 84px); }
.op-feature:nth-child(even) { margin-left:  clamp(0px, 6vw, 84px); }
.op-feature-rev .op-feature-media { order: 2; }
.op-feature-rev .op-feature-copy { order: 1; }
/* REVISION R2 (BH item 4): grey --neutral-50 fill removed — the phone now sits clean
   on the section background, consistent with the #ai / #how device stages (no one-off box). */
.op-feature-media { display: flex; justify-content: center; align-items: center; }
.op-feature-media .op-phone { max-width: 230px; }
.op-feature-tag { display: inline-block; font-family: 'Manrope', sans-serif; font-weight: 700;
  /* DEF-A11Y-001: small (.72rem) uppercase coral accent on warm-50 tint → AA-safe
     coral-700 (#9F3A15 · 6.37:1 on #FFF4EF). --op-coral (#E85D2B) is only 3.26:1. */
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-primary-dark);
  background: var(--brand-primary-50); border: 1px solid var(--brand-primary-100);
  padding: 5px 12px; border-radius: 30px; margin-bottom: 14px; }
.op-feature-copy h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; margin: 0 0 .6rem; letter-spacing: -.01em; }
.op-feature-copy p { font-size: 1.04rem; line-height: 1.65; color: var(--op-ink-2); max-width: 46ch; }

/* ==================== 7 · USE-CASE — STORY RAIL (redesign) ============================
   Distinct skeleton: a single narrative SPINE on the left with numbered story nodes;
   each beat is a "slide chip" card offset to the right of the rail with the device
   inset. Reads as one continuous story, NOT the 50/50 alternating split it was. */
.op-story { position: relative; max-width: 900px; margin: clamp(20px,3vw,34px) auto 0;
  padding-left: clamp(30px, 5vw, 54px); }
.op-story::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: clamp(9px,1.6vw,18px);
  width: 2px; background: linear-gradient(180deg, var(--brand-primary-100), var(--op-line)); }
.op-slide { position: relative; display: grid; grid-template-columns: 1fr auto; gap: clamp(18px,3vw,40px);
  align-items: center; background: #fff; border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: clamp(20px,2.6vw,30px); box-shadow: 0 16px 42px rgba(26,22,18,.07); }
.op-slide + .op-slide { margin-top: clamp(22px, 3vw, 36px); }
/* the story node dot sitting on the spine */
.op-slide::before { content: ""; position: absolute; left: calc(-1 * clamp(30px,5vw,54px) + clamp(3px,.9vw,11px));
  top: clamp(26px,3vw,34px); width: 16px; height: 16px; border-radius: 50%;
  background: var(--op-coral); border: 4px solid var(--neutral-0); box-shadow: 0 0 0 1px var(--op-line); }
.op-slide-rev .op-slide-media { order: -1; }
.op-slide-tag { color: var(--op-teal); }
.op-slide-text h3 { font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.16; letter-spacing: -.02em; margin: .5rem 0 .7rem; }
.op-slide-text p { font-size: 1.02rem; line-height: 1.66; color: var(--op-ink-2); max-width: 48ch; }
.op-slide-text strong { color: var(--op-ink); }
.op-slide-media { display: flex; justify-content: center; }
.op-slide-media .op-phone { max-width: 168px; }

/* ==================== Get the app ==================== */
.op-get-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.op-get h2 { font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.02em; margin: 0 0 .6rem; }
.op-get-sub { font-size: 1.1rem; margin: 0 0 1.8rem; }
.op-store { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
.op-store .store-btn { position: relative; display: inline-block; transition: transform .15s ease; }
.op-store .store-btn:hover { transform: translateY(-2px); }
.op-store .store-btn img { height: 52px; width: auto; display: block; }
/* REVISION 3 · links are wired (live-on-approval); subtle "coming soon" affordance until then */
.op-store .is-soon { opacity: .92; }
.op-store .is-soon::after { content: attr(data-soon); position: absolute; left: 50%; bottom: -16px;
  transform: translateX(-50%); white-space: nowrap; font-family: 'Manrope',sans-serif;
  font-weight: 700; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  /* r12: #get is now a light cream band — a white chip lifts cleanly off it (the old
     op-cream chip nearly matched the new cream band). navy text on white = 9.52:1 AA. */
  color: var(--op-navy); background: #fff; border: 1px solid var(--op-line);
  padding: 2px 8px; border-radius: 20px; }
.op-get-fine { font-family: 'Manrope',sans-serif; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: .78rem; margin-top: 1.4rem; color: var(--op-navy); }

/* ==================== reveal + parallax mechanics ==================== */
[data-reveal] { opacity: 0; transform: translateY(42px); filter: blur(6px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
  will-change: opacity, transform, filter; }
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
[data-reveal-delay="1"] { transition-delay: .12s; }
[data-reveal-delay="2"] { transition-delay: .22s; }
[data-parallax] { will-change: transform; }
/* staggered entrance for the "why" bento benefit cards */
.op-why-bento.is-visible .op-why-card { animation: opRise .6s cubic-bezier(.2,.7,.2,1) both; }
.op-why-bento.is-visible .op-why-card.a { animation-delay: .06s; }
.op-why-bento.is-visible .op-why-card.b { animation-delay: .15s; }
.op-why-bento.is-visible .op-why-card.c { animation-delay: .24s; }
.op-why-bento.is-visible .op-why-card.d { animation-delay: .33s; }
@keyframes opRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
  .op-phone { transition: none !important; }
  .op-step-media:hover .op-phone,
  .op-feature-media:hover .op-phone,
  .op-slide-media:hover .op-phone,
  .op-hero-visual:hover .op-phone-hero { transform: none !important; }
  .op-ai-shot:hover .op-ai-phone { transform: none !important; }
  .op-why-bento.is-visible .op-why-card { animation: none !important; }
}

/* ==================== responsive: TABLET (<=900px) ==================== */
@media (max-width: 900px) {
  .op-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .op-hero-copy .op-lede { margin-left: auto; margin-right: auto; }
  .op-hero-badges, .op-cta-row { justify-content: center; }
  .op-hero-qr { margin-left: auto; margin-right: auto; }
  .op-hero-visual { margin-top: 20px; }

  /* r11 item 13: highlight tiles 4→2 per row on tablet/mobile (item-1 balance rule;
     4 tiles ÷ 2 cols = clean 2×2, never an orphan). */
  .op-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }

  /* ---- #ai: 4-screen flow → 2×2 grid on tablet (no overlap) ---- */
  .op-ai-flow { grid-template-columns: repeat(2, 1fr); max-width: 620px; gap: clamp(16px,3vw,26px); }
  .op-ai-flow .op-ai-phone { max-width: 210px; }
  .op-ai-cap { font-size: .92rem; }

  /* ---- #why: bento collapses to a single column (device on top, cards stacked) ---- */
  .op-why-bento { grid-template-columns: 1fr; grid-template-areas: "device" "pillar-a" "pillar-b" "pillar-c" "pillar-d"; }
  .op-why-device { padding-top: clamp(20px,4vw,28px); }
  .op-why-device .op-phone { max-width: 240px; }

  /* ---- #how: rail collapses — number on top, card full width ---- */
  .op-steps { max-width: 560px; }
  .op-steps::before { left: 26px; }
  .op-step { grid-template-columns: 52px 1fr; align-items: start; gap: 16px; }
  .op-step-card, .op-step-rev .op-step-card { grid-column: 2; grid-template-columns: 1fr; text-align: left; }
  .op-step-n { grid-column: 1; align-self: start; }
  .op-step-rev .op-step-card .op-step-media { order: 0; }
  .op-step-media { margin-top: 16px; }
  .op-step-media .op-phone { max-width: 180px; }

  /* ---- #features: staggered cards collapse — no offset, text over media ---- */
  .op-feature { grid-template-columns: 1fr; margin-left: 0 !important; margin-right: 0 !important; }
  .op-feature .op-feature-copy, .op-feature-rev .op-feature-copy { order: 0; }
  .op-feature .op-feature-media, .op-feature-rev .op-feature-media { order: 1; margin-top: 18px; }
  .op-feature-copy p { max-width: 100%; }

  /* ---- #usecase: story rail — card full width, text over device ---- */
  .op-story { padding-left: clamp(24px, 6vw, 40px); }
  .op-slide { grid-template-columns: 1fr; text-align: left; }
  .op-slide .op-slide-text, .op-slide-rev .op-slide-media { order: 0; }
  .op-slide-media, .op-slide-rev .op-slide-media { order: 1; margin-top: 16px; }
  .op-slide-text p { max-width: 100%; }
}

/* ==================== responsive: PHONE (<=560px) ==================== */
@media (max-width: 560px) {
  /* r7e (BH 7808 #1): enlarged badges (56px desktop) scale to 50px on phones so the 3
     discs + the AI pill sit as a tidy centered row at 360/393/430 with no wrap-orphan or
     h-scroll. Slightly tighter gap keeps the group compact. */
  .op-hero-badges-r7 { gap: 8px; }
  .op-plat-badge { width: 50px; height: 50px; }
  /* r13 (BH 7835): title-only tiles stay 2-per-row on phones (item-1 rule). Tighten pad +
     min-height so two tiles fit 360/393/430 with no overlap / h-scroll; glyph stays large. */
  .op-hl-grid { gap: 12px; max-width: 420px; }
  .op-hl-tile { padding: 22px 12px; border-radius: 14px; min-height: 132px; gap: 13px; }
  .op-hl-ico { width: 56px; height: 56px; border-radius: 16px; }
  .op-hl-ico svg { width: 30px; height: 30px; }
  .op-hl-title { font-size: 1rem; }
}
@media (max-width: 430px) {
  /* r13 (BH 7835): keep the title-only highlight tiles 2-per-row even on very narrow phones
     (item-1 rule — 2×2 balances, single-col would waste the space). */
  .op-hl-grid { gap: 10px; max-width: 100%; }
  .op-hl-tile { padding: 20px 10px; min-height: 124px; }
  .op-hl-ico { width: 52px; height: 52px; border-radius: 15px; }
  .op-hl-ico svg { width: 28px; height: 28px; }
  /* #ai: keep 2×2 on phone (each screen still legible ~46% width); caption centered under each */
  .op-ai-flow { max-width: 100%; gap: 14px 10px; }
  .op-ai-shot { padding: 10px 8px 6px; border-radius: 16px; }
  .op-ai-flow .op-ai-phone { max-width: 100%; }
  .op-ai-cap { font-size: .82rem; gap: 7px; margin-top: 11px; max-width: 22ch; }
  .op-ai-num { width: 20px; height: 20px; font-size: .72rem; }
  .op-phone-hero { max-width: 280px; margin: 0 auto; }
  .op-feature-media .op-phone { max-width: 210px; }
  .op-story { padding-left: 22px; }
  .op-story::before { left: 7px; }
  .op-slide::before { left: -18px; top: 26px; }
}

/* ============================================================= */
/* FAQ - on-page accordion (r15 · BH 7843 item 1)                */
/*   Light WHITE band (previous #get is tint) - keeps the        */
/*   white<->cream body rhythm; hero+footer stay the only dark.  */
/*   CSS-only <details>; no JS, no scroll-jack. AA: q text uses  */
/*   --op-ink (#1A1612), meta uses coral-700 #9F3A15 (6.37:1).   */
/* ============================================================= */
.op-faq { background: var(--neutral-0); }
.op-faq-link { color: #9F3A15; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.op-faq-link:hover { color: var(--op-coral); }
.op-faq-groups { max-width: 820px; margin: 0 auto; }
.op-faq-group + .op-faq-group { margin-top: clamp(26px, 4vw, 40px); }
.op-faq-gh {
  font-family: 'Schibsted Grotesk','Manrope',sans-serif; font-weight: 800;
  font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase;
  color: #9F3A15; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--op-line);
}
.op-faq-item {
  border: 1px solid var(--op-line); border-radius: 14px; background: var(--op-cream);
  margin-bottom: 10px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
.op-faq-item[open] { border-color: rgba(232,93,43,.42); box-shadow: 0 6px 20px rgba(26,22,18,.06); }
.op-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; list-style: none; padding: 16px 18px;
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: 1.02rem;
  color: var(--op-ink); line-height: 1.4;
}
.op-faq-item > summary::-webkit-details-marker { display: none; }
.op-faq-item > summary:focus-visible { outline: 3px solid var(--op-coral); outline-offset: -3px; border-radius: 12px; }
.op-faq-q { flex: 1 1 auto; }
.op-faq-chev {
  flex: 0 0 auto; width: 18px; height: 18px; position: relative;
  color: #9F3A15; transition: transform .2s ease;
}
.op-faq-chev::before, .op-faq-chev::after {
  content: ""; position: absolute; top: 8px; width: 11px; height: 2.4px;
  background: currentColor; border-radius: 2px;
}
.op-faq-chev::before { left: 0; transform: rotate(45deg); }
.op-faq-chev::after  { right: 0; transform: rotate(-45deg); }
.op-faq-item[open] .op-faq-chev { transform: rotate(180deg); }
.op-faq-a { padding: 0 18px 18px; }
.op-faq-a p { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--op-ink-2); }
.op-faq-a a { color: #9F3A15; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.op-faq-a a:hover { color: var(--op-coral); }
.op-faq-a strong { color: var(--op-ink); }
@media (prefers-reduced-motion: reduce) {
  .op-faq-chev, .op-faq-item { transition: none; }
}
@media (max-width: 430px) {
  .op-faq-item > summary { padding: 14px 15px; font-size: .98rem; gap: 10px; }
  .op-faq-a { padding: 0 15px 15px; }
}