/* css/tokens.css */
/* Adology design tokens — "annotated evidence"
   Paper, ink and one restrained blue. A highlighter marks evidence and nothing else. */
:root {
  --paper: #f7f8f6;
  --white: #ffffff;
  --mist: #eef2f2;
  --ink: #12232e;
  --ink-2: #2f404a;
  --muted: #637079;
  --faint: #8f9ba2;
  --line: #e1e7e8;
  --line-2: #ccd6da;

  --blue: #2b5c79;       /* brand blue — headings accent, primary marks */
  --blue-2: #4a83a6;     /* threads, playheads */
  --blue-soft: #e7f0f5;  /* tags, chips */
  --blue-ghost: #f2f7fa;

  --mark: #ffe48a;       /* highlighter: evidence only */
  --mark-ink: #4b3b00;
  --pick: #2f7a5b;       /* the team's choice */
  --pick-soft: #e4f2ea;
  --alert: #b5532f;      /* change detected */

  --night: #10212b;
  --night-2: #172d3a;
  --night-3: #1f3a4a;
  --night-line: #2d4757;
  --night-text: #c4d3db;

  --f-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r-lg: 28px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-card: 0 1px 0 rgba(18, 35, 46, .04), 0 12px 32px -14px rgba(18, 35, 46, .18);
  --shadow-lift: 0 1px 0 rgba(18, 35, 46, .05), 0 24px 60px -24px rgba(18, 35, 46, .28);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-enter: 720ms;
}

/* css/site.css */
/* Adology website — page layout (draft 02). Scene styles live in motion.css. */
:where(.adl), :where(.adl) *, :where(.adl) *::before, :where(.adl) *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }

:where(.adl) { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.adl) img { max-width: 100%; display: block; }
:where(.adl) a { color: inherit; text-decoration: none; }
:where(.adl) button { font: inherit; }
:where(.adl) :focus-visible { outline: 2px solid var(--blue-2); outline-offset: 4px; }

.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--blue); letter-spacing: -.01em; }
.eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-2); }
:where(.adl) :is(h1, h2, h3) { font-weight: 400; margin: 0; }
:where(.adl) h2 { font-size: clamp(36px, 4.4cqw, 58px); line-height: 1.04; letter-spacing: -.035em; }
.lede { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 560px; margin: 0; }

/* Draft banner */
.draft-note { background: var(--ink); color: #c9d5db; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; text-align: center; padding: 8px 16px; }
.draft-note b { color: #fff; font-weight: 500; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(247, 248, 246, .86); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-bottom: 1px solid rgba(204, 214, 218, .55); }
.nav { height: 72px; display: flex; align-items: center; gap: 28px; }
.logo { width: 150px; height: auto; }
.navlinks { display: flex; gap: 28px; font-size: 14px; color: var(--muted); margin-left: auto; }
.navlinks a:hover { color: var(--ink); }
.menu { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: background 200ms, transform 200ms var(--ease-out), border-color 200ms; }
.btn:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.btn .arr { font-size: 16px; transition: transform 200ms var(--ease-out); }
.btn:hover .arr { transform: translate(2px, -2px); }
.btn.ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); background: var(--white); }
.btn.sm { padding: 10px 16px; font-size: 13.5px; gap: 10px; }

/* Hero */
.hero { padding: 76px 0 0; text-align: center; }
.hero .eyebrow { justify-content: center; }
.hero h1 { font-size: clamp(54px, 7.6cqw, 104px); line-height: .98; letter-spacing: -.055em; margin: 0 0 26px; }
.hero h1 .serif { letter-spacing: -.02em; }
.hero .lede { margin: 0 auto; max-width: 690px; font-size: 18px; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hero-stage { margin-top: 74px; position: relative; }

/* Trust */
.trust { padding: 84px 0 30px; text-align: center; }
.trust > p { font-size: 13px; color: var(--muted); margin: 0 0 28px; }
.logos { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.logos img { max-height: 28px; max-width: 128px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .66; }
.quote-slot { margin: 56px auto 0; max-width: 820px; border: 1px dashed var(--line-2); border-radius: 18px; padding: 26px 30px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; background: rgba(255,255,255,.5); }
.quote-slot .q-mark { font-family: var(--f-serif); font-size: 64px; line-height: .8; color: var(--line-2); grid-row: span 2; }
.quote-slot p { margin: 0; font-family: var(--f-serif); font-size: 26px; line-height: 1.2; color: var(--faint); }
.quote-slot small { font-size: 12.5px; color: var(--muted); }
.ph { display: inline-block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px dashed #b9c6cc; color: var(--muted); border-radius: 4px; padding: 4px 7px; vertical-align: middle; margin-right: 8px; }

/* Sections */
.section { padding: 128px 0; }
.section.white { background: var(--white); }
.section-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; margin-bottom: 60px; }
.section-head .lede { justify-self: end; }
.section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 22px; }
.section-head.center .lede { justify-self: center; }
.section-head.center .eyebrow { justify-content: center; }

/* Ways */
.ways-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 30px; }
.ways-cards h3 { font-size: 23px; letter-spacing: -.02em; margin: 0 0 8px; }
.ways-cards p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 340px; }
.support { text-align: center; color: var(--muted); font-size: 15px; margin: 56px 0 0; }
.support::before { content: "✦"; color: var(--blue-2); margin-right: 10px; }

/* Feeds (dark) */
.feeds { background: var(--night); color: #f2f6f7; padding: 128px 0; overflow: hidden; }
.feeds .eyebrow { color: #8fa9b8; }
.feeds .lede { color: var(--night-text); }
.feeds .serif { color: #a9cbe0; }
.feeds-grid { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: center; }
.feeds-points { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.feeds-points li { display: flex; gap: 12px; font-size: 14.5px; color: var(--night-text); align-items: baseline; }
.feeds-points b { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; color: #8fa9b8; min-width: 54px; letter-spacing: .06em; text-transform: uppercase; }

/* Use cases */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.usecase { display: flex; flex-direction: column; }
.usecase .uc-index { font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.usecase h3 { font-size: 30px; letter-spacing: -.03em; margin: 14px 0 12px; }
.usecase > p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 26px; }
.usecase .deliverables { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.usecase .deliverables li { font-size: 12px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); padding: 5px 9px; border-radius: 99px; }
.usecase .am-host { margin-top: auto; }

/* Proof */
.proof { padding: 40px 0 128px; }
.proof-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.proof-card { border: 1px dashed var(--line-2); border-radius: 22px; padding: 34px; background: rgba(255,255,255,.55); }
.proof-card h3 { font-size: 30px; letter-spacing: -.03em; line-height: 1.1; margin: 22px 0 14px; }
.proof-card p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
.proof-flow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.proof-flow span { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); background: var(--white); padding: 6px 9px; border-radius: 6px; }
.proof-flow span + span::before { content: "→ "; color: var(--faint); }

/* Learning */
.learning-grid { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: center; }

/* Close */
.close { margin: 0 auto 72px; background: var(--white); border: 1px solid var(--line); border-radius: 34px; padding: 96px 32px 84px; text-align: center; position: relative; overflow: hidden; }
.close h2 { font-size: clamp(44px, 6cqw, 84px); letter-spacing: -.05em; margin-bottom: 22px; }
.close p { color: var(--muted); font-size: 17px; margin: 0 auto 32px; max-width: 520px; }
.close .eyebrow { justify-content: center; }
.close .sub { display: block; margin: 26px auto 0; font-size: 14.5px; color: var(--blue); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-2); }
.close .sub:hover { text-decoration-color: var(--blue); }
.close-trace { position: absolute; inset: 0; pointer-events: none; opacity: .55; }

:where(.adl) footer { border-top: 1px solid var(--line); padding: 30px 0 44px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.foot .logo { width: 116px; }

dialog { border: 1px solid var(--line); border-radius: 20px; padding: 34px; width: min(460px, calc(100% - 32px)); color: var(--ink); box-shadow: var(--shadow-lift); font-family: var(--f-sans); }
dialog::backdrop { background: rgba(18, 35, 46, .4); backdrop-filter: blur(4px); }
dialog h2 { font-size: 32px; margin: 10px 0 12px; }
dialog p { color: var(--muted); font-size: 15px; line-height: 1.65; }
dialog .am-kicker { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Tablet ---------- */
@container adl (max-width: 1040px) {
  .wrap { width: calc(100% - 48px); }
  .section-head { grid-template-columns: 1fr; gap: 22px; }
  .section-head .lede { justify-self: start; }
  .feeds-grid, .learning-grid { grid-template-columns: 1fr; gap: 48px; }
  .usecases { grid-template-columns: 1fr; gap: 64px; max-width: 620px; }
  .ways-cards { gap: 18px; }
  .logos { justify-content: center; gap: 28px 40px; }
}

/* ---------- Phone ---------- */
@container adl (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  .nav { height: 62px; gap: 12px; }
  .logo { width: 118px; }
  .navlinks { display: none; position: absolute; top: 62px; left: 0; right: 0; background: var(--paper); padding: 18px 16px 22px; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .navlinks.open { display: flex; }
  .menu { display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); cursor: pointer; font-size: 16px; color: var(--ink); }
  .nav .btn.sm { padding: 9px 12px; font-size: 13px; }
  .nav .btn.sm .arr { display: none; }
  .hero { padding-top: 48px; }
  .hero h1 { font-size: clamp(46px, 13.5cqw, 64px); }
  .hero .lede { font-size: 16px; }
  .actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero-stage { margin-top: 48px; }
  .section, .feeds { padding: 84px 0; }
  .lede { font-size: 16px; }
  .eyebrow { font-size: 10px; }
  .trust { padding: 70px 0 10px; }
  .logos { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 26px 16px; }
  .logos img { max-height: 22px; max-width: 92px; }
  .quote-slot { grid-template-columns: 1fr; padding: 22px; margin-top: 40px; }
  .quote-slot .q-mark { grid-row: auto; font-size: 48px; }
  .quote-slot p { font-size: 21px; }
  .ways-cards { grid-template-columns: 1fr; gap: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { padding: 24px; }
  .close { padding: 64px 20px 56px; border-radius: 24px; margin-bottom: 40px; }
  .close .btn { width: 100%; justify-content: center; }
}

/* css/motion.css */
/* ==========================================================================
   Adology Motion — shared scene styles
   Every class is prefixed (am-, hx-, fx-, ax-, fd-, wx-, cx-, uc-) so the file can be
   dropped into Framer custom code or an embed without colliding with site styles.
   ========================================================================== */

.am-host { position: relative; display: block; contain: layout paint; }
.am-host > .am-poster, .am-host > .am-poster img { width: 100%; height: 100%; object-fit: contain; display: block; }
.am-scene { position: relative; height: 100%; font-family: var(--f-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.am-scene *, .am-scene *::before, .am-scene *::after { box-sizing: border-box; }
.am-scene img { display: block; max-width: 100%; }
.am-scene p, .am-scene h3, .am-scene h4, .am-scene dl, .am-scene dd, .am-scene ul, .am-scene ol, .am-scene figure { margin: 0; padding: 0; }
.am-scene ul, .am-scene ol { list-style: none; }

/* State plumbing */
.am-instant, .am-instant *, .am-instant *::before, .am-instant *::after { transition: none !important; }
.am-static *, .am-static *::before, .am-static *::after { transition: none !important; animation: none !important; }
.am-paused *, .am-paused *::before, .am-paused *::after { animation-play-state: paused !important; }
.am-scene.am-out [data-fade] { opacity: 0 !important; transition: opacity 600ms var(--ease-in-out) !important; }
.am-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared atoms */
.am-kicker { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; }
.am-tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 3px 6px 2px; border-radius: 4px; white-space: nowrap; }
.am-cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: var(--ink); color: #fff; font: 500 9.5px/1 var(--f-mono); }
.am-mark { color: inherit; background-color: transparent; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 62%; background-size: 0% 80%; padding: 0 2px; margin: 0 -2px; border-radius: 2px; transition: background-size 700ms var(--ease-out); }
.am-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--blue-2); animation: am-blink 1s steps(2) infinite; }
@keyframes am-blink { 50% { opacity: 0; } }
.am-illus { position: absolute; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Threads */
.am-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.am-thread { fill: none; stroke: var(--blue-2); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; transition: stroke-dashoffset 900ms var(--ease-in-out); transition-delay: calc(var(--i) * 110ms); }
.am-thread-dot { fill: var(--blue-2); opacity: 0; transition: opacity 300ms; transition-delay: calc(var(--i) * 110ms + 800ms); }

/* Footer rail + controls */
.am-foot { display: flex; align-items: flex-end; gap: 16px; }
.am-rail { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.am-chapter { appearance: none; background: none; border: 0; padding: 8px 0 0; text-align: left; cursor: pointer; font: inherit; color: var(--faint); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 9px; align-items: baseline; transition: color 300ms; }
.am-chapter-n { font: 500 10px/1 var(--f-mono); }
.am-chapter-l { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-chapter-bar { grid-column: 1 / -1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.am-chapter-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.am-chapter.is-active, .am-chapter.is-done { color: var(--ink); }
.am-chapter:hover { color: var(--ink-2); }
.am-chapter:focus-visible, .am-btn-icon:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 4px; }
.am-ctrl { display: flex; gap: 6px; }
.am-btn-icon { appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 14px; line-height: 1; padding: 0; }
.am-btn-icon:hover { border-color: var(--ink); }
.am-i-pause { width: 8px; height: 10px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.is-paused .am-i-pause { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.am-static .am-ctrl [data-am-toggle] { display: none; }

/* Dark variant */
.am-dark { color: #f4f7f8; }
.am-dark .am-kicker { color: #8fa9b8; }
.am-dark .am-chapter { color: #6f8a99; }
.am-dark .am-chapter.is-active, .am-dark .am-chapter.is-done { color: #fff; }
.am-dark .am-chapter-bar { background: var(--night-line); }
.am-dark .am-chapter-bar i { background: #fff; }
.am-dark .am-btn-icon { background: transparent; border-color: var(--night-line); color: #fff; }
.am-dark .am-illus { color: #6f8a99; }

/* ==========================================================================
   USE CASES — small deliverables that loop
   ========================================================================== */
.am-host[data-am-scene^="uc-"] { height: 250px; }
.am-uc { background: var(--mist); border-radius: 18px; overflow: hidden; }
.am-uc .uc-in { position: absolute; inset: 0; padding: 18px; }
.am-uc .am-ctrl { position: absolute; right: 10px; top: 10px; }
.am-uc .am-btn-icon { width: 26px; height: 26px; font-size: 12px; }
.am-uc .am-illus { bottom: 10px; right: 14px; }
.up-map { position: absolute; left: 16px; top: 16px; bottom: 16px; width: 60%; background: var(--white); border-radius: 12px; box-shadow: var(--shadow-card); }
.up-h, .up-v { position: absolute; background: var(--line); }
.up-h { left: 12px; right: 12px; top: 50%; height: 1px; }
.up-v { top: 12px; bottom: 12px; left: 50%; width: 1px; }
.up-ax { position: absolute; font: 400 8.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.up-x1 { left: 8px; top: calc(50% + 5px); } .up-x2 { right: 8px; top: calc(50% + 5px); } .up-y1 { top: 7px; left: calc(50% + 5px); } .up-y2 { bottom: 7px; left: calc(50% + 5px); }
.up-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink); color: #fff; font: 500 9.5px/22px var(--f-mono); text-align: center; transform: scale(0); transition: transform 500ms var(--ease-out); transition-delay: calc(var(--i) * 160ms); }
.is-a .up-dot { transform: none; }
.up-gap { position: absolute; left: 76%; top: 74%; width: 74px; height: 50px; margin: -25px 0 0 -37px; border: 1.5px dashed var(--blue-2); border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity 400ms, transform 600ms var(--ease-out); }
.up-gap b { font-size: 10px; font-weight: 600; color: var(--blue); background: var(--white); padding: 0 3px; }
.is-b .up-gap { opacity: 1; transform: none; animation: up-pulse 2.4s 600ms infinite; }
@keyframes up-pulse { 50% { box-shadow: 0 0 0 7px rgba(74, 131, 166, .12); } }
.up-doc { position: absolute; right: 16px; top: 48px; width: calc(40% - 40px); background: var(--white); border-radius: 10px; padding: 14px; box-shadow: var(--shadow-lift); opacity: 0; transform: translateX(20px) rotate(2deg); transition: opacity 500ms, transform 800ms var(--ease-out); }
.up-doc p { font-family: var(--f-serif); font-size: 20px; line-height: 1.05; margin: 8px 0 0 !important; }
.up-doc em { color: var(--blue); }
.is-c .up-doc { opacity: 1; transform: rotate(1deg); }
.ub-brief { background: var(--white); border-radius: 12px; padding: 12px 14px; margin-right: 66px; box-shadow: var(--shadow-card); }
.ub-brief li { display: grid; grid-template-columns: 86px 1fr; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(4px); transition: opacity 400ms, transform 500ms var(--ease-out); transition-delay: calc(var(--i) * 260ms); }
.ub-brief .am-kicker + ul li:first-child { border-top: 0; }
.ub-brief li b { font: 400 9px/1.9 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--blue); }
.is-a .ub-brief li { opacity: 1; transform: none; }
.ub-vet { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-right: 8px; gap: 10px; opacity: 0; transition: opacity 500ms; }
.is-b .ub-vet { opacity: 1; }
.ub-faces { display: flex; gap: 10px; }
.ub-face { position: relative; }
.ub-face img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); }
.ub-face b { position: absolute; right: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; background: var(--pick); transform: scale(0); transition: transform 400ms var(--ease-out); transition-delay: calc(var(--i) * 200ms); }
.ub-face.no b { background: var(--alert); }
.ub-face em { position: absolute; right: 0; top: 46px; font-style: normal; font-size: 10px; white-space: nowrap; color: var(--alert); opacity: 0; transition: opacity 400ms 700ms; }
.is-c .ub-face b { transform: none; }
.is-c .ub-face.no img { opacity: .5; }
.is-c .ub-face em { opacity: 1; }
.uk-hooks { position: absolute; left: 16px; top: 16px; width: 48%; display: grid; gap: 7px; }
.uk-hook { background: var(--white); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; box-shadow: var(--shadow-card); border: 1.5px solid transparent; opacity: 0; transform: translateX(-10px); transition: opacity 400ms, transform 600ms var(--ease-out), border-color 300ms; transition-delay: calc(var(--i) * 180ms); }
.is-a .uk-hook { opacity: 1; transform: none; }
.is-b .uk-hook.h1, .is-b .uk-hook.h3 { border-color: var(--pick); transition-delay: 0ms; }
.is-b .uk-hook.h2 { opacity: .45; transition-delay: 0ms; }
.uk-plan { position: absolute; right: 16px; top: 48px; width: calc(52% - 40px); background: var(--white); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-lift); }
.uk-slots { display: grid; gap: 6px; margin-top: 9px; }
.uk-slot { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: center; border: 1px dashed var(--line-2); border-radius: 8px; padding: 7px 8px; font-size: 11.5px; min-height: 40px; }
.uk-slot b { font: 500 10px/1 var(--f-mono); color: var(--blue); }
.uk-slot em { font-style: normal; opacity: 0; transform: translateX(-14px); transition: opacity 400ms, transform 600ms var(--ease-out); }
.uk-slot.sb em { transition-delay: 250ms; }
.is-c .uk-slot { border-style: solid; }
.is-c .uk-slot em { opacity: 1; transform: none; }


/* css/scenes.css */
/* ==========================================================================
   Adology Motion — v3 single-focus scenes
   Grammar: one subject centre-stage per beat, one line on why it matters.
   Earlier items step aside (shrink to a rail, dim, or leave left); new ones arrive from the right.
   ========================================================================== */

.am-stage { position: relative; overflow: hidden; }
.am-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.am-canvas [data-k] { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform, opacity;
  transition: transform 1050ms var(--ease-in-out), opacity 650ms var(--ease-in-out), filter 650ms var(--ease-in-out);
  transition-delay: var(--d, 0ms); }
.am-instant .am-canvas [data-k] { transition: none !important; }
.am-host:not(.am-ready) > .am-poster { min-height: 320px; }

/* Benefit line: the "voice-over" of each beat */
.h2-why, .fx3-why, .ax3-why, .fd3-why, .wx3-why, .cx3-why { width: 760px; text-align: center; font-size: 27px; line-height: 1.22; letter-spacing: -.02em; font-weight: 400; margin: 0; color: var(--ink); }
.h2-why .am-kicker, .fx3-why .am-kicker, .ax3-why .am-kicker, .fd3-why .am-kicker, .wx3-why .am-kicker, .cx3-why .am-kicker { font-size: 11px; margin-bottom: 8px; color: var(--blue); }
.am-m .h2-why, .am-m .fx3-why, .am-m .ax3-why, .am-m .fd3-why, .am-m .wx3-why, .am-m .cx3-why { width: 330px; font-size: 21px; }

/* ---------- HERO ---------- */
.am-hero2 { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 10px 24px 18px; text-align: left; }
.am-hero2 .am-illus { top: -24px; right: 4px; }
.h2-stage { margin: 0 -24px; }
.am-hero2 .am-foot { margin-top: 6px; }

.h2-q { width: 780px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 22px 18px; }
.h2-q p { font-size: 30px; letter-spacing: -.02em; margin: 6px 0 0; min-height: 1.25em; }
.am-m .h2-q { width: 320px; padding: 12px 16px 14px; }
.am-m .h2-q p { font-size: 21px; min-height: 2.5em; }

.h2-item { width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.h2-lens { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 99px; padding: 6px 11px 6px 6px; }
.h2-lens i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 10px; }
.h2-sig { position: relative; overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-lift); border: 1px solid var(--line); }
.h2-video, .h2-ad { width: 220px; height: 280px; margin: 0; }
.h2-ad { width: 300px; }
.h2-video img, .h2-ad img { width: 100%; height: 100%; object-fit: cover; }
.h2-video img { object-position: 45% 30%; }
.h2-cap { position: absolute; left: 14px; right: 14px; top: 52%; color: #fff; font-weight: 600; font-size: 19px; line-height: 1.2; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.h2-cap u { text-decoration: none; background: #fff; color: var(--ink); padding: 0 4px; border-radius: 3px; text-shadow: none; }
.h2-tc { position: absolute; top: 12px; left: 12px; font: 500 10.5px/1 var(--f-mono); color: #fff; background: rgba(18,35,46,.6); padding: 5px 7px; border-radius: 5px; }
.h2-cmts { width: 400px; padding: 18px 22px; }
.h2-cmts p { font-size: 19px; line-height: 1.4; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.h2-cmts p:first-child { border-top: 0; padding-top: 2px; }
.h2-cmts b { font-size: 14px; font-weight: 600; color: var(--ink); margin-right: 6px; }
.is-mark .h2-cmts .am-mark { background-size: 100% 80%; }
.is-mark .h2-cmts p + p .am-mark { transition-delay: 380ms; }
.h2-spons { position: absolute; top: 12px; left: 12px; font-size: 10.5px; color: #fff; background: rgba(18,35,46,.55); padding: 4px 7px; border-radius: 5px; }
.h2-adline { position: absolute; left: 16px; bottom: 16px; font-family: var(--f-serif); font-size: 30px; line-height: 1; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.h2-search { width: 400px; padding: 22px 24px 18px; }
.h2-term { font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.h2-search svg { width: 100%; height: 90px; margin: 10px 0 4px; display: block; overflow: visible; }
.h2-spark { fill: none; stroke: var(--blue-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-in-out); }
.is-spark .h2-spark { stroke-dashoffset: 0; }
.h2-up { font-size: 14px; color: var(--muted); }
.h2-culture { width: 400px; padding: 22px 24px; }
.h2-culture div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.h2-culture img { height: 120px; width: 100%; object-fit: cover; border-radius: 10px; }
.am-m .h2-cmts, .am-m .h2-search, .am-m .h2-culture { width: 330px; }

.h2-find { width: 560px; background: var(--white); border: 1px solid var(--line-2); border-radius: 22px; padding: 26px 28px 24px; box-shadow: var(--shadow-lift); }
.h2-find h3 { font-size: 31px; line-height: 1.16; letter-spacing: -.025em; font-weight: 500; margin: 12px 0 16px; }
.h2-find em { font-style: normal; background-image: linear-gradient(var(--blue-soft), var(--blue-soft)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 40%; transition: background-size 900ms var(--ease-out) 600ms; }
.is-find .h2-find em { background-size: 100% 40%; }
.h2-cites { display: flex; gap: 5px; align-items: center; }
.h2-cites .am-cite { width: 22px; height: 22px; font-size: 11px; transform: scale(0); transition: transform 450ms var(--ease-out); }
.h2-cites .am-cite:nth-child(2) { transition-delay: 90ms; } .h2-cites .am-cite:nth-child(3) { transition-delay: 180ms; } .h2-cites .am-cite:nth-child(4) { transition-delay: 270ms; } .h2-cites .am-cite:nth-child(5) { transition-delay: 360ms; }
.is-find .h2-cites .am-cite { transform: none; }
.h2-cites > span:last-child { font-size: 13px; color: var(--muted); margin-left: 8px; }
.h2-oppwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 800ms var(--ease-in-out); }
.h2-oppwrap > .h2-opp { overflow: hidden; min-height: 0; }
.is-opp .h2-oppwrap { grid-template-rows: 1fr; }
.h2-opp { opacity: 0; transition: opacity 600ms 300ms; }
.h2-opp .h2-brand { margin-top: 18px; }
.h2-opp::before { content: ""; display: block; border-top: 1px solid var(--line); margin-top: 16px; }
.is-opp .h2-opp { opacity: 1; }
.h2-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); background: var(--paper); border: 1px dashed var(--line-2); border-radius: 99px; padding: 5px 12px 5px 5px; }
.h2-brand b { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: italic 400 13px/1 var(--f-serif); }
.h2-opp p { font-family: var(--f-serif); font-size: 30px; line-height: 1.08; color: var(--ink); margin: 12px 0 0; }
.h2-opp em { color: var(--blue); }
.am-m .h2-find { width: 330px; padding: 20px; }
.am-m .h2-find h3 { font-size: 24px; }
.am-m .h2-opp p { font-size: 24px; }

.h2-brief { width: 470px; background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: 22px 26px 22px; box-shadow: var(--shadow-lift); }
.h2-brief header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.h2-status { font-size: 11.5px; color: var(--pick); background: var(--pick-soft); padding: 4px 9px; border-radius: 99px; }
.h2-brief h4 { font-family: var(--f-serif); font-weight: 400; font-size: 50px; line-height: 1; margin: 18px 0 8px; }
.h2-brief > p { font-size: 16px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.h2-brief ul { list-style: none; margin: 14px 0 0; padding: 0; }
.h2-brief li { display: flex; align-items: center; gap: 6px; font-size: 15px; padding: 9px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 500ms var(--ease-out); }
.h2-brief li:nth-child(2) { transition-delay: 220ms; } .h2-brief li:nth-child(3) { transition-delay: 440ms; }
.h2-brief li b { font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); width: 90px; }
.is-brief .h2-brief li { opacity: 1; transform: none; }
.am-m .h2-brief { width: 330px; padding: 18px 20px; }
.am-m .h2-brief h4 { font-size: 40px; }

@container adl (max-width: 700px) {
  .am-hero2 { padding: 8px 12px 14px; border-radius: 22px; }
  .h2-stage { margin: 0 -12px; }
  .am-hero2 .am-illus { top: auto; bottom: -22px; left: 0; right: 0; text-align: center; }
  .am-hero2 .am-chapter:not(.is-active) .am-chapter-l { opacity: 0; }
  .am-hero2 .am-chapter-l { font-size: 11px; }
}

/* ---------- FRAMES ---------- */
.am-frames3 { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 56px; row-gap: 12px; align-items: center; }
.fx3-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx3-step { position: relative; appearance: none; width: 100%; background: none; border: 0; text-align: left; font: inherit; color: var(--faint); cursor: pointer; padding: 16px 0 16px 24px; display: grid; grid-template-columns: 34px 1fr; row-gap: 6px; transition: color 300ms; }
.fx3-n { font: 500 11px/1.9 var(--f-mono); }
.fx3-t { font-size: 22px; letter-spacing: -.02em; }
.fx3-b { grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--muted); display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 600ms var(--ease-in-out), opacity 500ms; }
.fx3-b { overflow: hidden; }
.fx3-step.is-active .fx3-b { grid-template-rows: 1fr; opacity: 1; }
.fx3-bar { position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.fx3-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.fx3-step.is-active, .fx3-step.is-done { color: var(--ink); }
.fx3-step.is-active .fx3-n { color: var(--blue); }
.fx3-step:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; border-radius: 8px; }
.fx3-ctrl { grid-column: 1; padding-left: 24px; }
.fx3-stage { grid-column: 2; grid-row: 1 / span 2; background: var(--mist); border-radius: var(--r-lg); }
.fx3-stage .am-illus { right: 18px; bottom: 14px; }

.fx3-phone { width: 250px; height: 444px; border-radius: 26px; overflow: hidden; background: #0d1a22; box-shadow: var(--shadow-lift); }
.fx3-fr { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms; }
.fx3-fr img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 3400ms linear; }
.fx3-fr span { position: absolute; left: 16px; right: 16px; top: 55%; color: #fff; font-weight: 600; font-size: 19px; line-height: 1.2; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.fx3-fr u { text-decoration: none; background: #fff; color: var(--ink); padding: 0 4px; border-radius: 3px; text-shadow: none; }
.fr1, .is-f2 .fr2, .is-f3 .fr3, .is-f4 .fr4 { opacity: 1; }
.is-play .fr1 img, .is-f2 .fr2 img, .is-f3 .fr3 img, .is-f4 .fr4 img { transform: scale(1); }
.fx3-prog { position: absolute; top: 11px; left: 11px; right: 11px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.fx3-prog b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--ph, 0)); }
.fx3-handle { position: absolute; top: 24px; left: 13px; font-style: normal; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.fx3-tag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 600; color: var(--ink); background: #fff; padding: 5px 8px; border-radius: 7px; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 500ms var(--ease-out); white-space: nowrap; }
.fx3-tag::before { content: "●"; color: var(--blue-2); margin-right: 5px; font-size: 8px; vertical-align: 2px; }
.fx3-phone .fx3-tag { font-size: 22px; left: 16px; bottom: 16px; border-radius: 12px; padding: 9px 14px; }
.is-tag .fx3-tag { opacity: 1; transform: none; }

.fx3-labels { width: 290px; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx3-labels li { position: relative; background: var(--white); border-radius: 14px; padding: 13px 44px 14px 16px; box-shadow: var(--shadow-card); opacity: .0; transform: translateX(14px); transition: opacity 500ms, transform 600ms var(--ease-out), box-shadow 400ms; }
.fx3-labels b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin-top: 4px; }
.fx3-labels i { position: absolute; right: 14px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; background: var(--line-2); transition: background 300ms; }
.is-l1 .l1, .is-l2 .l2, .is-l3 .l3, .is-l4 .l4 { opacity: 1; transform: none; }
.is-l2 .l1, .is-l3 .l2, .is-l4 .l3 { opacity: .55; }
.is-l2 .l1 i, .is-l3 .l2 i, .is-l4 .l3 i, .is-l4 .l4 i { background: var(--pick); }
.is-l1 .l1, .is-l2 .l2, .is-l3 .l3, .is-l4 .l4 { box-shadow: 0 0 0 2px var(--blue-2), var(--shadow-card); }
.is-l2 .l1, .is-l3 .l2, .is-l4 .l3 { box-shadow: var(--shadow-card); }

.fx3-post { width: 112px; height: 200px; margin: 0; border-radius: 14px; overflow: hidden; background: #0d1a22; box-shadow: var(--shadow-card); }
.fx3-post img { width: 100%; height: 100%; object-fit: cover; }

.fx3-proof { width: 520px; background: var(--white); border-radius: 22px; padding: 24px 26px; box-shadow: var(--shadow-lift); }
.fx3-nums { display: flex; gap: 34px; margin: 12px 0 16px; }
.fx3-nums span { font-size: 14px; color: var(--muted); }
.fx3-nums b { display: block; font-size: 52px; line-height: 1; font-weight: 500; color: var(--ink); letter-spacing: -.03em; margin-bottom: 4px; }
.fx3-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fx3-thumbs img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; }
.fx3-quote { font-size: 17px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.fx3-quote b { font-size: 13px; margin-right: 6px; }
.is-mark .fx3-quote .am-mark { background-size: 100% 80%; }

.fx3-check { width: 440px; background: var(--white); border-radius: 22px; padding: 22px 26px; box-shadow: var(--shadow-lift); }
.fx3-check .am-kicker { color: var(--blue); }
.fx3-check ul { list-style: none; margin: 12px 0 0; padding: 0; }
.fx3-check li { display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: -.015em; padding: 11px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateX(-10px); transition: opacity 400ms, transform 500ms var(--ease-out); }
.fx3-check li:first-child { border-top: 0; }
.fx3-check li:nth-child(2) { transition-delay: 800ms; } .fx3-check li:nth-child(3) { transition-delay: 1600ms; }
.fx3-check li i { width: 26px; height: 26px; border-radius: 7px; background: var(--pick); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; flex: none; }
.is-check .fx3-check li { opacity: 1; transform: none; }

.fx3-dir { width: 460px; background: var(--ink); color: #fff; border-radius: 22px; padding: 22px 26px 22px; box-shadow: var(--shadow-lift); }
.fx3-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #b7c8d2; }
.fx3-brand b { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font: italic 400 13px/1 var(--f-serif); }
.fx3-dir p { font-family: var(--f-serif); font-size: 38px; line-height: 1.04; margin: 14px 0 18px; }
.fx3-dir em { color: #a9cbe0; }
.fx3-test { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid #2c4553; opacity: 0; transition: opacity 500ms; }
.fx3-test .am-kicker { color: #8fa9b8; width: 100%; margin-bottom: 4px; }
.fx3-test span:not(.am-kicker):not(.fx3-vs) { font-size: 14px; border: 1px solid #3a5868; border-radius: 9px; padding: 7px 10px; }
.fx3-test b { font: 500 10px/1 var(--f-mono); color: #a9cbe0; margin-right: 6px; }
.fx3-vs { font: 400 10px/1 var(--f-mono); color: #6f8a99; }
.is-test .fx3-test { opacity: 1; }
.fx3-why { width: 640px; font-size: 24px; }

.am-m .fx3-labels { width: 170px; gap: 7px; }
.am-m .fx3-labels li { padding: 9px 30px 10px 11px; border-radius: 11px; }
.am-m .fx3-labels b { font-size: 14px; }
.am-m .fx3-labels .am-kicker { font-size: 8.5px; }
.am-m .fx3-labels i { width: 17px; height: 17px; right: 8px; margin-top: -8px; font-size: 9px; }
.am-m .fx3-post { width: 100px; height: 178px; }
.am-m .fx3-proof, .am-m .fx3-check, .am-m .fx3-dir { width: 340px; padding: 18px 20px; }
.am-m .fx3-nums b { font-size: 40px; }
.am-m .fx3-thumbs img { height: 64px; }
.am-m .fx3-check li { font-size: 18px; }
.am-m .fx3-dir p { font-size: 30px; }

@container adl (max-width: 1040px) {
  .am-frames3 { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .am-frames3 .fx3-steps { grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; padding-bottom: 54px; }
  .fx3-step { position: static; padding: 0; grid-template-columns: 1fr; row-gap: 7px; align-content: start; }
  .fx3-n { display: none; }
  .fx3-t { font-size: 14.5px; }
  .fx3-bar { position: static; width: auto; height: 2px; order: -1; }
  .fx3-bar i { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .fx3-b { position: absolute; left: 0; right: 0; bottom: 0; display: block; font-size: 13.5px; transition: opacity 400ms; }
  .fx3-stage { grid-column: 1; grid-row: 2; border-radius: 22px; }
  .fx3-ctrl { grid-row: 3; padding: 0; display: flex; justify-content: flex-end; }
  .fx3-stage .am-illus { left: 14px; right: auto; bottom: 10px; }
}

/* ---------- ASK ---------- */
.am-ask3 { display: grid; grid-template-columns: 270px minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lift); overflow: hidden; }
.ax3-menu { background: var(--paper); border-right: 1px solid var(--line); padding: 24px 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.ax3-menu > .am-kicker { padding-left: 10px; }
.ax3-tasks { display: grid; gap: 6px; }
.ax3-task { position: relative; appearance: none; font: inherit; color: var(--ink); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 11px 12px 13px; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; cursor: pointer; overflow: hidden; transition: background 300ms, border-color 300ms, box-shadow 300ms, opacity 300ms; opacity: .62; }
.ax3-task:hover { opacity: 1; }
.ax3-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--mist); display: grid; place-items: center; font-size: 15px; }
.ax3-tt b { display: block; font-size: 14.5px; font-weight: 500; }
.ax3-tt small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.ax3-short { display: none !important; }
.ax3-tbar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--line); opacity: 0; }
.ax3-tbar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.ax3-task.is-active { opacity: 1; background: var(--white); border-color: var(--line-2); box-shadow: var(--shadow-card); }
.ax3-task.is-active .ax3-ico { background: var(--ink); color: #fff; }
.ax3-task.is-active .ax3-tbar { opacity: 1; }
.ax3-task:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.ax3-foot { margin-top: auto; padding-left: 10px; }
.ax3-stage .am-illus { right: 20px; bottom: 14px; }

.ax3-q { width: 640px; border: 1px solid var(--line-2); background: var(--white); border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow-card); }
.ax3-q p { margin: 0; font-size: 26px; letter-spacing: -.02em; line-height: 1.25; min-height: 1.25em; }
.ax3-spark { color: var(--blue-2); margin-right: 10px; font-size: 20px; }
.ax3-crit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 700ms var(--ease-in-out), opacity 500ms 200ms, margin 700ms; }
.ax3-crit .am-kicker { margin-right: 4px; }
.ax3-crit span:not(.am-kicker) { font-size: 14px; padding: 5px 11px; border-radius: 99px; background: var(--blue-ghost); border: 1px solid var(--line-2); }
.ax3-crit span:not(.am-kicker)::before { content: "✓ "; color: var(--blue); }
.is-c1 .q1 .ax3-crit, .is-c2 .q2 .ax3-crit, .is-c3 .q3 .ax3-crit, .is-c4 .q4 .ax3-crit, .is-c5 .q5 .ax3-crit { max-height: 80px; opacity: 1; margin-top: 12px; }

.ax3-node { width: 400px; background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: 22px 26px 24px; box-shadow: var(--shadow-lift); }
.ax3-node.has-next::after { content: ""; position: absolute; left: 100%; top: 50%; width: 120px; height: 0; border-top: 1.5px dashed var(--blue-2); opacity: .7; }
.ax3-num { font: 500 12px/1 var(--f-mono); color: var(--blue); }
.ax3-node b { display: block; font-size: 28px; font-weight: 500; letter-spacing: -.025em; margin: 10px 0 8px; }
.ax3-node p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.ax3-stat { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted); background: var(--paper); border-radius: 99px; padding: 5px 11px; }

.ax3-res { width: 560px; background: var(--white); border: 1px solid var(--line-2); border-radius: 22px; padding: 20px 24px 22px; box-shadow: var(--shadow-lift); }
.ax3-res > .am-kicker { color: var(--blue); margin-bottom: 10px; }
.ax3-done { display: inline-block; font-size: 12px; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 4px 10px; margin-bottom: 14px; }
.ax3-faces { list-style: none; margin: 0; padding: 0; }
.ax3-faces li { display: grid; grid-template-columns: 46px 96px 1fr 24px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 16px; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 500ms var(--ease-out); }
.ax3-faces li:nth-child(2) { transition-delay: 200ms; } .ax3-faces li:nth-child(3) { transition-delay: 400ms; }
.ax3-faces img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ax3-faces span { color: var(--ink-2); }
.ax3-faces i { font-style: normal; color: var(--pick); font-weight: 700; }
.ax3-bars { list-style: none; margin: 0; padding: 0; }
.ax3-bars li { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: center; padding: 9px 0; font-size: 17px; }
.ax3-bars i { height: 12px; border-radius: 6px; width: var(--w); background: var(--blue-2); transform-origin: 0 50%; transform: scaleX(0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 180ms + 200ms); }
.ax3-bars li:first-child i { background: var(--ink); }
.ax3-bars li:first-child span { font-weight: 600; }
.ax3-title { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 12px; }
.ax3-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ax3-ads figure { position: relative; margin: 0; height: 130px; border-radius: 12px; overflow: hidden; }
.ax3-ads img { width: 100%; height: 100%; object-fit: cover; }
.ax3-ads figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(18,35,46,.86); color: #fff; font-size: 13px; font-weight: 500; padding: 6px 9px; }
.ax3-curve { position: relative; height: 150px; }
.ax3-curve svg { position: absolute; left: 0; right: 0; top: 12px; width: 100%; height: 110px; overflow: visible; }
.ax3-line { fill: none; stroke: var(--blue-2); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-in-out) 200ms; }
.ax3-fill { fill: var(--blue-soft); opacity: 0; transition: opacity 600ms 1200ms; }
.ax3-now { position: absolute; left: 40%; top: 0; bottom: 26px; border-left: 2px dashed var(--ink); opacity: 0; transition: opacity 400ms 1000ms; }
.ax3-now b { position: absolute; top: 0; left: 8px; white-space: nowrap; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.ax3-l1, .ax3-l2 { position: absolute; bottom: 0; font-size: 13px; color: var(--muted); }
.ax3-l1 { left: 0; } .ax3-l2 { right: 0; }
.ax3-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ax3-table th { font: 500 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; padding: 0 8px 8px 0; }
.ax3-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); }
.ax3-gap { margin: 12px 0 0; font-size: 16px; font-weight: 500; color: var(--blue); background: var(--blue-ghost); border-radius: 10px; padding: 10px 12px; }
.is-r1 .r1 .ax3-faces li, .is-r2 .r2 .ax3-faces li, .is-r3 .r3 .ax3-faces li, .is-r4 .r4 .ax3-faces li, .is-r5 .r5 .ax3-faces li { opacity: 1; transform: none; }
.is-r1 .r1 .ax3-bars i, .is-r2 .r2 .ax3-bars i, .is-r3 .r3 .ax3-bars i, .is-r4 .r4 .ax3-bars i, .is-r5 .r5 .ax3-bars i { transform: scaleX(1); }
.is-r1 .r1 .ax3-line, .is-r2 .r2 .ax3-line, .is-r3 .r3 .ax3-line, .is-r4 .r4 .ax3-line, .is-r5 .r5 .ax3-line { stroke-dashoffset: 0; }
.is-r1 .r1 .ax3-fill, .is-r2 .r2 .ax3-fill, .is-r3 .r3 .ax3-fill, .is-r4 .r4 .ax3-fill, .is-r5 .r5 .ax3-fill, .is-r1 .r1 .ax3-now, .is-r2 .r2 .ax3-now, .is-r3 .r3 .ax3-now, .is-r4 .r4 .ax3-now, .is-r5 .r5 .ax3-now { opacity: 1; }
.ax3-why { width: 720px; font-size: 25px; }
.ax3-why .am-kicker { color: var(--pick) !important; }

.am-m .ax3-q { width: 330px; padding: 14px 16px; }
.am-m .ax3-q p { font-size: 19px; min-height: 2.5em; }
.am-m .ax3-crit span:not(.am-kicker) { font-size: 12px; }
.am-m .ax3-node { width: 320px; padding: 18px 20px; }
.am-m .ax3-node b { font-size: 23px; }
.am-m .ax3-node p { font-size: 15px; }
.am-m .ax3-node.has-next::after { display: none; }
.am-m .ax3-res { width: 336px; padding: 16px 16px 18px; }
.am-m .ax3-faces li { grid-template-columns: 38px 1fr 18px; font-size: 14px; row-gap: 0; }
.am-m .ax3-faces img { width: 38px; height: 38px; grid-row: span 2; }
.am-m .ax3-faces span { grid-column: 2; font-size: 13px; }
.am-m .ax3-faces i { grid-row: 1 / span 2; grid-column: 3; }
.am-m .ax3-bars li { grid-template-columns: 1fr; gap: 5px; font-size: 15px; }
.am-m .ax3-ads figure { height: 96px; }
.am-m .ax3-ads figcaption { font-size: 11px; }
.am-m .ax3-table { font-size: 12.5px; }
.am-m .ax3-title { font-size: 18px; }

@container adl (max-width: 1040px) {
  .am-ask3 { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; border-radius: 22px; }
  .ax3-menu { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 12px 12px; position: relative; gap: 10px; }
  .ax3-tasks { display: flex; flex-wrap: wrap; gap: 6px; }
  .ax3-task { grid-template-columns: auto; padding: 7px 12px 9px; border: 1px solid var(--line); background: var(--white); border-radius: 99px; opacity: 1; }
  .ax3-ico, .ax3-tt small, .ax3-long { display: none !important; }
  .ax3-short { display: block !important; font-size: 13px !important; }
  .ax3-tbar { left: 10px; right: 10px; bottom: 3px; }
  .ax3-task.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
  .ax3-task.is-active .ax3-tbar { background: rgba(255,255,255,.25); }
  .ax3-task.is-active .ax3-tbar i { background: #fff; }
  .ax3-foot { position: absolute; right: 12px; top: 10px; margin: 0; }
  .ax3-stage .am-illus { left: 14px; right: auto; bottom: 10px; }
}

/* ---------- FEED (dark) ---------- */
.am-feed3 { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 26px; padding: 8px 8px 14px; }
.fd3-stage { border-radius: 20px; }
.fd3-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 0; }
.fd3-foot .am-illus { position: static; }
.am-feed3 .fd3-why, .am-feed3 .fd3-why { color: #fff; }
.am-feed3 .fd3-why .am-kicker { color: #a9cbe0; }
.fd3-q { width: 600px; background: var(--night-3); border: 1px solid #35566b; border-radius: 18px; padding: 18px 22px 18px 48px; color: #fff; }
.fd3-q p { margin: 6px 0 0; font-size: 26px; line-height: 1.22; letter-spacing: -.02em; }
.fd3-pin { position: absolute; left: 22px; top: 23px; width: 11px; height: 11px; border-radius: 50%; background: #9fd0b0; animation: fd-live 2.4s infinite; }
@keyframes fd-live { 0% { box-shadow: 0 0 0 0 rgba(159,208,176,.45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(159,208,176,0); } }
.fd3-line { width: 560px; display: flex; justify-content: space-between; border-top: 1px solid var(--night-line); padding-top: 10px; }
.fd3-line span { position: relative; font: 400 10.5px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: #6f8a99; transition: color 400ms; }
.fd3-line i { position: absolute; top: -16px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--night-2); border: 1.5px solid var(--night-line); transition: background 300ms, border-color 300ms; }
.is-d1 .d1, .is-d2 .d2, .is-d3 .d3, .is-d4 .d4 { color: #fff; }
.is-d1 .d1 i, .is-d2 .d2 i, .is-d3 .d3 i, .is-d4 .d4 i { background: #fff; border-color: #fff; }
.is-d3 .d3 i { background: var(--mark); border-color: var(--mark); }
.fd3-week { width: 400px; background: var(--night-3); border: 1px solid #35566b; border-radius: 18px; padding: 18px 20px; color: #fff; }
.fd3-tiles { display: flex; gap: 8px; margin: 12px 0 12px; min-height: 92px; }
.fd3-tile { position: relative; width: 62px; height: 88px; border-radius: 9px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; opacity: 0; transform: translateY(-10px); transition: opacity 400ms, transform 600ms var(--ease-out), outline-color 400ms; transition-delay: calc(var(--j) * 140ms + 200ms); }
.fd3-tile img { width: 100%; height: 100%; object-fit: cover; }
.fd3-tile b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; font-weight: 700; text-align: center; padding: 4px 0; background: var(--mark); color: var(--mark-ink); transform: translateY(100%); transition: transform 400ms var(--ease-out); transition-delay: calc(var(--j) * 120ms); }
.is-d1 .w1 .fd3-tile, .is-d2 .w2 .fd3-tile, .is-d3 .w3 .fd3-tile { opacity: 1; transform: none; }
.is-p .w3 .p { outline-color: var(--mark); }
.is-p .w3 .p b { transform: none; }
.fd3-status { margin: 0; font-size: 17px; color: var(--night-text); opacity: 0; transition: opacity 500ms; }
.fd3-status::before { content: "– "; color: #6f8a99; }
.is-change .fd3-status { color: var(--mark); font-weight: 600; }
.is-change .fd3-status::before { content: "● "; color: var(--mark); }
.is-s1 .w1 .fd3-status, .is-s2 .w2 .fd3-status, .is-s3 .w3 .fd3-status { opacity: 1; }
.fd3-alert { width: 440px; background: #fff; color: var(--ink); border-radius: 18px; padding: 20px 22px; border-left: 5px solid var(--mark); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); }
.fd3-alert .am-kicker b { color: var(--alert); font-weight: 500; }
.fd3-alert p { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; margin: 8px 0 12px; }
.fd3-ev { font-size: 13px; color: var(--blue); }
.fd3-brief { width: 440px; background: var(--night-3); border: 1px solid #35566b; border-radius: 18px; padding: 20px 22px; color: #fff; }
.fd3-brief ul { list-style: none; margin: 10px 0 0; padding: 0; }
.fd3-brief li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 16px; padding: 9px 0; border-top: 1px solid var(--night-line); }
.fd3-brief li:first-child { border-top: 0; }
.fd3-brief li b { font: 400 10px/1.9 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: #8fa9b8; }
.fd3-why { width: 640px; font-size: 24px; }
.am-m .fd3-q { width: 330px; padding: 14px 16px 14px 40px; }
.am-m .fd3-q p { font-size: 20px; }
.am-m .fd3-pin { left: 17px; top: 19px; }
.am-m .fd3-line { width: 320px; }
.am-m .fd3-week, .am-m .fd3-alert, .am-m .fd3-brief { width: 330px; }
.am-m .fd3-tile { width: 50px; height: 72px; }
.am-m .fd3-alert p { font-size: 20px; }
.am-m .fd3-brief li { grid-template-columns: 92px 1fr; font-size: 14px; }

/* ---------- WAYS ---------- */
.wx3-stage { border-radius: var(--r-lg); background: var(--mist); }
.wx3-foot { display: flex; align-items: flex-end; gap: 16px; margin-top: 10px; }
.wx3-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wx3-find { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line-2); border-radius: 99px; padding: 10px 17px; font-size: 16px; font-weight: 500; box-shadow: var(--shadow-card); white-space: nowrap; }
.wx3-find i { width: 9px; height: 9px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 3px #fff3c4; }
.wx3-win { width: 460px; height: 290px; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden; }
.wx3-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.wx3-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.wx3-bar em { font: normal 400 10.5px/1 var(--f-mono); color: var(--muted); margin-left: 8px; }
.wx3-body { padding: 18px; }
.wx3-plat .wx3-body { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; }
.wx3-plat aside i { display: block; width: 20px; height: 20px; border-radius: 6px; background: var(--mist); margin-bottom: 9px; }
.wx3-plat aside i.on { background: var(--ink); }
.wx3-win .wx3-find { font-size: 14px; padding: 8px 12px; box-shadow: none; white-space: normal; }
.wx3-ev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.wx3-ev img { width: 100%; height: 76px; object-fit: cover; border-radius: 8px; }
.wx3-btn { display: inline-grid; font-size: 14px; font-weight: 500; }
.wx3-btn > span { grid-area: 1 / 1; padding: 9px 14px; border-radius: 9px; transition: opacity 300ms, transform 400ms var(--ease-out); }
.wx3-btn .a { background: var(--ink); color: #fff; }
.wx3-btn .b { background: var(--pick-soft); color: var(--pick); opacity: 0; transform: scale(.9); }
.is-b1 .wx3-btn .a { opacity: 0; }
.is-b1 .wx3-btn .b { opacity: 1; transform: none; }
.wx3-msgs { display: flex; flex-direction: column; gap: 12px; }
.wx3-user { align-self: flex-end; max-width: 90%; background: var(--mist); border-radius: 13px 13px 3px 13px; padding: 9px 13px; font-size: 15px; min-height: 2.3em; margin: 0; }
.wx3-ai { border-left: 2px solid var(--blue-2); padding-left: 12px; opacity: 0; transform: translateY(6px); transition: opacity 500ms, transform 600ms var(--ease-out); }
.wx3-src { font: 500 10.5px/1 var(--f-mono); color: var(--blue); }
.wx3-ai p { font-size: 15.5px; line-height: 1.45; margin: 7px 0 9px; }
.wx3-cites { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.wx3-sugg { align-self: flex-start; font-size: 13px; border: 1px solid var(--line-2); border-radius: 99px; padding: 6px 12px; opacity: 0; transition: opacity 400ms; }
.wx3-sugg::before { content: "✦ "; color: var(--blue-2); }
.is-ans .wx3-ai { opacity: 1; transform: none; }
.is-sug .wx3-sugg { opacity: 1; }
.wx3-rep { background: transparent; box-shadow: none; overflow: visible; display: grid; place-items: center; }
.wx3-page { grid-area: 1 / 1; width: 330px; height: 290px; background: var(--white); border-radius: 8px; box-shadow: var(--shadow-lift); padding: 22px; position: relative; transform: rotate(-1.5deg); }
.wx3-p2 { transform: rotate(3deg) translateX(14px); background: #fbfbfa; transition: transform 900ms var(--ease-out); }
.is-fan .wx3-p2 { transform: rotate(7deg) translate(44px, 6px); }
.wx3-sched { position: absolute; top: 16px; right: 16px; font-size: 11px; color: var(--pick); background: var(--pick-soft); padding: 4px 8px; border-radius: 99px; }
.wx3-page h4 { font-family: var(--f-serif); font-weight: 400; font-size: 27px; line-height: 1.05; margin: 30px 0 12px; }
.wx3-page .wx3-ev { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.wx3-page .wx3-ev img { height: 48px; }
.wx3-lines { display: grid; gap: 7px; margin: 14px 0 12px; }
.wx3-lines i { height: 6px; border-radius: 3px; background: var(--line); }
.wx3-lines i.s { width: 55%; }
.wx3-why { width: 760px; }
.am-m .wx3-find { font-size: 14px; white-space: normal; }
.am-m .wx3-win { width: 320px; height: 270px; }
.am-m .wx3-rep { width: 320px; }
.am-m .wx3-page { width: 280px; height: 270px; padding: 18px; }
.am-m .wx3-ev img { height: 58px; }
@container adl (max-width: 700px) { .am-ways3 .am-chapter-l { font-size: 11px; } }

/* ---------- COMPOUND ---------- */
.cx3-stage { border-radius: var(--r-lg); background: var(--mist); }
.cx3-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cx3-foot .am-illus { position: static; }
.cx3-camp { width: 250px; background: var(--white); border-radius: 18px; padding: 12px 12px 14px; box-shadow: var(--shadow-lift); }
.cx3-camp div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx3-camp img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }
.cx3-camp b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.01em; margin: 12px 4px 0; }
.cx3-chip { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 16px; background: var(--white); border-radius: 99px; padding: 9px 15px; box-shadow: var(--shadow-card); }
.cx3-chip i, .cx3-start li i, .cx3-legend i { flex: none; width: 10px; height: 10px; }
.cx3-chip.m i, .cx3-start .m i, .cx3-legend .m i { background: var(--blue-2); border-radius: 3px; }
.cx3-chip.y i, .cx3-start .y i, .cx3-legend .y i { background: var(--ink); border-radius: 50%; }
.cx3-start { width: 300px; background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: 18px 20px 14px; box-shadow: var(--shadow-lift); }
.cx3-start .am-kicker { color: var(--blue); }
.cx3-start ul { list-style: none; margin: 10px 0 0; padding: 0; }
.cx3-start li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.3; max-height: 0; opacity: 0; overflow: hidden; border-top: 1px solid transparent; transition: max-height 600ms var(--ease-in-out), opacity 500ms 200ms, padding 600ms, border-color 600ms; }
.is-k1 .cx3-start .k1, .is-k2 .cx3-start .k2, .is-k3 .cx3-start .k3 { max-height: 60px; opacity: 1; padding: 8px 0; border-color: var(--line); }
.cx3-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.cx3-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cx3-why { width: 640px; font-size: 24px; }
.am-m .cx3-chip { font-size: 14px; }
.am-m .cx3-start { width: 320px; }

/* css/site-f.css */
/* ==========================================================================
   Version F — Tavily-inspired page sections (prefix f-) and mini-visuals (prefix mk-)
   Same tokens as the rest of the site: paper, ink, restrained blue.
   ========================================================================== */

/* ---------- section labels ---------- */
.f-eyebrow { font: 500 12px/1 var(--f-mono); letter-spacing: .02em; color: var(--blue); margin: 0 0 16px; }
.f-h2 { font-size: clamp(34px, 4.2cqw, 54px); line-height: 1.05; letter-spacing: -.035em; font-weight: 400; margin: 0; }
.f-h2 .serif { font-family: var(--f-serif); font-style: italic; color: var(--blue); letter-spacing: -.01em; }
.f-sub { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 620px; margin: 18px 0 0; }
.f-sec { padding: 112px 0; }
.f-sec.white { background: var(--white); }
.f-center { text-align: center; } .f-center .f-sub { margin-inline: auto; }
.ph-tag { display: inline-block; font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--alert); background: #f8e7df; border-radius: 5px; padding: 4px 6px; vertical-align: middle; }

/* ---------- hero band ---------- */
.f-band { margin-top: 56px; border-radius: 32px; padding: 34px 34px 30px; background:
  radial-gradient(60% 80% at 15% 20%, rgba(174, 207, 226, .55), transparent 70%),
  radial-gradient(50% 70% at 85% 30%, rgba(200, 226, 214, .6), transparent 70%),
  radial-gradient(70% 90% at 60% 100%, rgba(231, 240, 245, .9), transparent 70%),
  linear-gradient(180deg, #eef4f6, #f6f8f6); }
.f-band .fl-stage { box-shadow: 0 30px 80px -40px rgba(18, 35, 46, .35); border-color: rgba(255,255,255,.7); }
@container adl (max-width: 720px) { .f-band { padding: 14px; border-radius: 20px; margin-top: 36px; } }

/* ---------- logos marquee ---------- */
.f-logos { padding: 64px 0 24px; text-align: center; }
.f-logos p { font-size: 15px; color: var(--muted); margin: 0 0 26px; }
.f-marq { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.f-marq-track { display: flex; gap: 72px; width: max-content; animation: f-marq 36s linear infinite; align-items: center; }
.f-marq img { height: 28px; width: auto; opacity: .7; filter: grayscale(1); }
@keyframes f-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .f-marq-track { animation: none; } }

/* ---------- the problem ---------- */
.f-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.f-pain { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-card); }
.f-pain h3 { font-size: 21px; letter-spacing: -.02em; margin: 18px 0 6px; font-weight: 500; }
.f-pain p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.f-pain-vis { height: 150px; border-radius: 14px; background: var(--mist); position: relative; overflow: hidden; }
.pv-tabs { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 5px; }
.pv-tabs i { flex: 1; height: 18px; border-radius: 6px 6px 0 0; background: #dfe7eb; animation: f-blink 3s infinite; }
.pv-tabs i:nth-child(2n) { animation-delay: .6s; } .pv-tabs i:nth-child(3n) { animation-delay: 1.2s; }
.pv-feed { position: absolute; left: 12px; right: 12px; top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; animation: f-scroll 6s linear infinite; }
.pv-feed i { height: 46px; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(18,35,46,.08); }
@keyframes f-scroll { to { transform: translateY(-52px); } }
@keyframes f-blink { 50% { background: #cfdbe2; } }
.pv-cal { position: absolute; inset: 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pv-cal i { border-radius: 5px; background: #fff; }
.pv-cal i.on { background: #f3d9cd; } .pv-cal i.now { background: var(--ink); }
.pv-chat { position: absolute; inset: 16px; display: grid; gap: 8px; align-content: center; }
.pv-chat span { justify-self: start; background: #fff; border-radius: 12px 12px 12px 3px; padding: 9px 12px; font-size: 13px; color: var(--muted); box-shadow: 0 1px 3px rgba(18,35,46,.08); }
.pv-chat span:first-child { justify-self: end; background: var(--ink); color: #fff; border-radius: 12px 12px 3px 12px; }
@container adl (max-width: 860px) { .f-pains { grid-template-columns: 1fr; } }

/* ---------- who it's for ---------- */
.f-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.f-persona { position: relative; border-radius: 22px; overflow: hidden; background: var(--ink); color: #fff; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; isolation: isolate; }
.f-persona video, .f-persona img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transition: opacity .4s; }
.f-persona::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,33,43,.15) 0%, rgba(16,33,43,.92) 72%); }
.f-persona:hover video { opacity: .9; }
.f-persona .k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #9cc3dc; }
.f-persona h3 { font-family: var(--f-serif); font-weight: 400; font-size: 30px; line-height: 1.05; margin: 10px 0 10px; letter-spacing: -.01em; }
.f-persona p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--night-text); }
.f-persona .play { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 500; color: var(--ink); background: #fff; border-radius: 99px; padding: 6px 10px; }
@container adl (max-width: 980px) { .f-who { grid-template-columns: repeat(2, 1fr); } }
@container adl (max-width: 560px) { .f-who { grid-template-columns: 1fr; } .f-persona { min-height: 260px; } }

/* ---------- feature rows (how it works) ---------- */
.f-rows { display: grid; gap: 28px; margin-top: 56px; }
.f-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.f-row:nth-child(even) .f-vis { order: 2; }
.f-vis { border-radius: 26px; padding: 18px; background:
  radial-gradient(70% 90% at 20% 0%, rgba(174, 207, 226, .45), transparent 70%),
  radial-gradient(60% 80% at 100% 100%, rgba(200, 226, 214, .5), transparent 70%), #eef3f4; }
.f-copy .n { font: 500 12px/1 var(--f-mono); color: var(--blue); }
.f-copy h3 { font-size: clamp(26px, 2.6cqw, 34px); letter-spacing: -.03em; line-height: 1.1; font-weight: 400; margin: 12px 0 12px; }
.f-copy p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 440px; }
@container adl (max-width: 860px) { .f-row { grid-template-columns: 1fr; gap: 22px; } .f-row:nth-child(even) .f-vis { order: 0; } }

/* ---------- what you get back ---------- */
.f-gets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.f-get { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 24px 22px; box-shadow: var(--shadow-card); }
.f-get .big { font-size: 52px; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-weight: 400; }
.f-get .big small { font-size: 20px; letter-spacing: -.01em; color: var(--muted); margin-left: 4px; }
.f-get h3 { font-size: 18px; font-weight: 500; letter-spacing: -.015em; margin: 16px 0 6px; }
.f-get p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.f-get .ph-tag { margin-top: 14px; }
@container adl (max-width: 980px) { .f-gets { grid-template-columns: repeat(2, 1fr); } }
@container adl (max-width: 560px) { .f-gets { grid-template-columns: 1fr; } }

/* ---------- why not just ChatGPT ---------- */
.f-why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; margin-top: 48px; }
.f-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.f-checks li { display: grid; grid-template-columns: 1fr 72px 72px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); font-size: 16px; }
.f-checks li.hd { border-top: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }
.f-checks li span { text-align: center; }
.f-checks .no { color: var(--faint); } .f-checks .yes { color: var(--pick); font-weight: 600; }
@container adl (max-width: 860px) { .f-why { grid-template-columns: 1fr; } }

/* ---------- proof cards ---------- */
.f-proof { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: 44px; }
.f-pc { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.f-pc.case { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.f-pc.case .img { background: url(../assets/img/talk1.jpg) center/cover; min-height: 260px; }
.f-pc.case .txt { padding: 24px; display: flex; flex-direction: column; }
.f-pc h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; margin: 12px 0 auto; }
.f-pc .q { font-size: 19px; line-height: 1.45; color: var(--ink-2); margin: 10px 0 auto; }
.f-pc .who { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.f-pc .who i { width: 34px; height: 34px; border-radius: 50%; background: var(--mist); }
.f-pc .stat { font-size: 64px; letter-spacing: -.045em; line-height: 1; margin: 14px 0 8px; }
.f-pc .lbl { font-size: 15px; color: var(--muted); margin-bottom: auto; }
.f-pc .lnk { margin-top: 18px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
@container adl (max-width: 980px) { .f-proof { grid-template-columns: 1fr; } .f-pc.case { grid-template-columns: 1fr; } }

/* ---------- numbers strip ---------- */
.f-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.f-num { border-radius: 20px; padding: 24px 22px; background: linear-gradient(180deg, #f1f6f8, #fff); border: 1px solid var(--line); }
.f-num b { display: block; font-size: 44px; letter-spacing: -.04em; font-weight: 400; line-height: 1; }
.f-num span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); border-top: 2px solid var(--blue-2); padding-top: 10px; width: 60%; }
@container adl (max-width: 860px) { .f-nums { grid-template-columns: repeat(2, 1fr); } }

/* ---------- FAQ ---------- */
.f-faq { max-width: 820px; margin: 40px auto 0; }
.f-faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.f-faq details:last-child { border-bottom: 1px solid var(--line); }
.f-faq summary { cursor: pointer; font-size: 19px; letter-spacing: -.015em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.f-faq summary::after { content: '+'; color: var(--blue); font-size: 22px; line-height: 1; }
.f-faq details[open] summary::after { content: '–'; }
.f-faq p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 700px; }

/* ==========================================================================
   Mini-visuals (mk-)
   ========================================================================== */
.mk { height: auto; }
.mk-stage { border-radius: 18px; }
.mk .am-canvas { overflow: hidden; }
.mk-sk { display: inline-block; height: 8px; border-radius: 4px; background: #dfe7eb; vertical-align: middle; }
.mk-sk.lt { background: rgba(255,255,255,.2); display: block; margin-top: 8px; }
.mk-sk.dk { background: #cfdbe2; }
.mk-sk.dot { width: 16px !important; height: 16px; border-radius: 50%; background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue-2); }
.mk-card { position: absolute; background: var(--white); border-radius: 16px; box-shadow: 0 1px 0 rgba(18,35,46,.04), 0 14px 34px -18px rgba(18,35,46,.28); }
.mk-svg { position: absolute; inset: 0; width: 520px; height: 340px; }
.mk-p { fill: none; stroke: #a9c2d1; stroke-width: 1.6; stroke-linecap: round; }
.mk-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 0 4px rgba(74,131,166,.2); }
/* ask */
.mk-askbox { left: 40px; top: 96px; width: 440px; padding: 14px 16px 16px; }
.mk-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 6px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font: 500 11px/1 var(--f-mono); }
.mk-chip img { width: 16px; }
.mk-askbox p { margin: 12px 0 0; font-size: 22px; letter-spacing: -.02em; color: var(--ink); min-height: 1.2em; }
.mk-caret { display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.1em; background: var(--blue-2); animation: am-blink 1s steps(2) infinite; }
.mk-crit { position: absolute; left: 40px; top: 214px; width: 440px; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border-radius: 99px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-pill b { font-size: 12.5px; font-weight: 500; color: var(--ink); }
/* market */
.mk-c { position: absolute; left: 30px; width: 160px; height: 36px; display: flex; align-items: center; gap: 8px; background: var(--white); border-radius: 10px; padding: 0 10px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-c img { width: 15px; height: 15px; opacity: .75; }
.mk-c b { font-size: 13.5px; font-weight: 500; color: var(--ink); flex: 1; }
.mk-hub { position: absolute; left: 318px; top: 128px; width: 84px; height: 84px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 14px 34px -14px rgba(18,35,46,.35); }
.mk-hub img { width: 42px; }
.mk-big { position: absolute; left: 300px; top: 232px; width: 200px; text-align: center; }
.mk-big b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.mk-big span { font-size: 12.5px; color: var(--muted); }
/* frames */
.mk-phone { position: absolute; left: 34px; top: 28px; width: 160px; height: 284px; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px -14px rgba(18,35,46,.4); }
.mk-phone img { width: 100%; height: 100%; object-fit: cover; }
.mk-scan { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(rgba(255,228,138,0), rgba(255,228,138,.9)); box-shadow: 0 2px 10px rgba(255,228,138,.8); }
.mk-prog { position: absolute; left: 8px; right: 8px; top: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.mk-prog b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; }
.mk-strip { position: absolute; left: 216px; top: 66px; display: flex; gap: 10px; }
.mk-strip figure { margin: 0; width: 62px; background: var(--white); border-radius: 10px; padding: 5px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-strip img { width: 52px; height: 96px; object-fit: cover; border-radius: 7px; display: block; }
.mk-strip figcaption { padding: 7px 1px 2px; }
.mk-strip figcaption b { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.mk-strip figcaption span { display: block; font: 400 10px/1.4 var(--f-mono); color: var(--muted); margin-bottom: 6px; }
/* labels */
.mk-post { position: absolute; left: 34px; top: 34px; width: 150px; height: 272px; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px -14px rgba(18,35,46,.4); }
.mk-post img { width: 100%; height: 100%; object-fit: cover; }
.mk-lbs { position: absolute; left: 208px; top: 40px; width: 290px; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-lb { display: inline-flex; flex-direction: column; gap: 6px; background: var(--white); border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-lb b { font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.mk-lb.mk-more { justify-content: center; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; font-weight: 500; }
/* patterns */
.mk-row { position: absolute; left: 30px; width: 460px; display: grid; grid-template-columns: 150px 1fr 82px; gap: 14px; align-items: center; background: var(--white); border-radius: 12px; padding: 14px 14px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-row.r0 { top: 40px; } .mk-row.r1 { top: 110px; } .mk-row.r2 { top: 180px; } .mk-row.r3 { top: 250px; }
.mk-row .nm { font-size: 14px; font-weight: 500; color: var(--ink); }
.mk-row .bar { height: 8px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.mk-row .bar b { display: block; height: 100%; background: var(--blue-2); border-radius: 4px; transform-origin: 0 50%; }
.mk-row .tg { justify-self: start; font-size: 11.5px; font-weight: 500; padding: 4px 8px; border-radius: 99px; }
.mk-row .tg.up { color: var(--pick); background: var(--pick-soft); } .mk-row .tg.over { color: var(--alert); background: #f8e7df; } .mk-row .tg.rise { color: var(--blue); background: var(--blue-soft); } .mk-row .tg.fade { color: var(--muted); background: var(--mist); }
/* evidence */
.mk-grid { position: absolute; left: 30px; top: 24px; display: grid; grid-template-columns: repeat(6, 70px); gap: 8px; }
.mk-grid figure { position: relative; margin: 0; height: 110px; border-radius: 9px; }
.mk-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.mk-grid b { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 10.5px/20px var(--f-mono); text-align: center; }
.mk-grid b:empty { display: none; }
.mk-quote { left: 30px; top: 176px; width: 460px; padding: 16px 18px; }
.mk-quote p { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--ink); }
.mk-quote mark { color: inherit; background-color: transparent; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 62%; background-size: 0% 82%; padding: 0 3px; }
/* make */
.mk-brief { position: absolute; left: 44px; top: 70px; width: 218px; background: var(--ink); border-radius: 18px; padding: 18px; box-shadow: 0 20px 44px -20px rgba(18,35,46,.6); }
.mk-brief .k { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fb3d1; }
.mk-brief h4 { font-family: var(--f-serif); font-weight: 400; font-size: 38px; line-height: 1; color: #fff; margin: 10px 0 6px; }
.mk-brief small { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12px; color: var(--night-text); }
.mk-brief small i { font-style: normal; width: 19px; height: 19px; border-radius: 5px; background: #fff; color: var(--ink); font: 500 10px/19px var(--f-mono); text-align: center; }
.mk-out { position: absolute; left: 338px; width: 130px; height: 40px; display: flex; align-items: center; gap: 9px; background: var(--white); border-radius: 11px; padding: 0 13px; font-size: 14px; font-weight: 500; color: var(--ink); box-shadow: 0 1px 3px rgba(18,35,46,.1); transform: translateY(-50%); }
.mk-out.o0 { top: 96px; } .mk-out.o1 { top: 170px; } .mk-out.o2 { top: 244px; }
.mk-out i { width: 14px; height: 14px; border-radius: 4px; }
.mk-out .sl { background: conic-gradient(#e01e5a 0 25%, #36c5f0 0 50%, #2eb67d 0 75%, #ecb22e 0); }
.mk-out .em { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.mk-out .cl { background: #d97757; border-radius: 50%; }
/* why */
.mk-q { position: absolute; left: 30px; top: 26px; width: 460px; display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--ink); box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-ans { position: absolute; top: 96px; width: 222px; min-height: 210px; background: var(--white); border-radius: 16px; padding: 16px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mk-ans.gen { left: 30px; } .mk-ans.ado { left: 268px; }
.mk-ans .hd { display: flex; align-items: center; gap: 7px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mk-ans.ado .hd { color: var(--blue); } .mk-ans .hd img { width: 16px; }
.mk-ans p { margin: 12px 0 14px; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.mk-ans.ado p { font-family: var(--f-serif); font-size: 26px; line-height: 1.05; color: var(--ink); }
.mk-ans.ado em { color: var(--blue); }
.mk-ans .mk-sk { display: block; margin-top: 8px; }
.mk-ans small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.mk-ans small i { font-style: normal; width: 19px; height: 19px; border-radius: 5px; background: var(--ink); color: #fff; font: 500 10px/19px var(--f-mono); text-align: center; }
.am-static .mk-caret { display: none; }

/* problem cards v2: real thumbnails + a data table */
.pv-feed { grid-template-columns: repeat(5, 1fr); animation-duration: 9s; }
.pv-feed i { position: relative; height: 70px; background: #dfe7eb center/cover; border-radius: 8px; overflow: hidden; }
.pv-feed i b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); font-size: 8px; line-height: 20px; text-align: center; font-weight: 400; }
.pv-feed i em { position: absolute; left: 4px; bottom: 4px; font-style: normal; font: 500 8.5px/1 var(--f-mono); color: #fff; background: rgba(18,35,46,.6); padding: 2px 4px; border-radius: 3px; }
@keyframes f-scroll { to { transform: translateY(-76px); } }
.pv-table { position: absolute; inset: 12px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(18,35,46,.08); text-align: left; }
.pv-thead { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pv-thead span { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.pv-thead em { font-style: normal; font: 500 9.5px/1 var(--f-mono); color: var(--alert); background: #f8e7df; padding: 3px 5px; border-radius: 4px; animation: f-stale 2.4s ease-in-out infinite; }
@keyframes f-stale { 50% { opacity: .45; } }
.pv-table table { width: 100%; border-collapse: collapse; font-size: 10.5px; color: var(--ink-2); }
.pv-table th { font: 500 8.5px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 10px 5px; background: var(--paper); }
.pv-table td { padding: 5px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.pv-table td:last-child, .pv-table th:last-child, .pv-table td:nth-child(3), .pv-table th:nth-child(3) { text-align: right; }
.pv-table { filter: saturate(.6); }

/* numbers as a scrolling strip (like the logos) */
.f-statstrip { padding: 34px 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.f-stat-track { gap: 34px; animation-duration: 42s; }
.f-stat { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 16px; color: var(--muted); }
.f-stat b { font-size: 34px; font-weight: 400; letter-spacing: -.035em; color: var(--ink); }
.f-sep { font-style: normal; color: var(--line-2); font-size: 22px; }

/* combined visuals */
.mk-strip.sm { left: 214px; top: 28px; gap: 8px; }
.mk-strip.sm figure { width: 64px; padding: 4px; }
.mk-strip.sm img { width: 56px; height: 76px; }
.mk-strip.sm figcaption { padding: 5px 1px 1px; }
.mk-strip.sm figcaption span { margin-bottom: 0; }
.mk-lbs.sm { left: 214px; top: 182px; width: 290px; gap: 7px; }
.mk-lbs.sm .mk-lb { padding: 7px 9px; }
.mk-row.sm { left: 84px; width: 412px; grid-template-columns: 130px 1fr 74px; padding: 9px 12px; }
.mk-row.sm.r0 { top: 38px; } .mk-row.sm.r1 { top: 86px; } .mk-row.sm.r2 { top: 134px; } .mk-row.sm.r3 { top: 182px; }
.mk-row.sm .nm { font-size: 13px; }
.mk-proof { position: absolute; left: 84px; top: 236px; width: 412px; display: flex; gap: 8px; align-items: center; }
.mk-proof figure { position: relative; margin: 0; width: 54px; height: 76px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(74,131,166,.9); }
.mk-proof img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.mk-proof b { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; font: 500 10px/18px var(--f-mono); text-align: center; }
.mk-quote.sm { position: relative; left: auto; top: auto; flex: 1; margin-left: 6px; padding: 11px 13px; }
.mk-quote.sm p { margin: 8px 0 0; font-size: 15px; }

/* ---------- why not just ChatGPT (wy-) ---------- */
.f-whybox { margin-top: 44px; }
.wy { height: auto; }
.wy-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.wy-tab { position: relative; appearance: none; border: 1px solid var(--line-2); background: var(--white); color: var(--muted); font: 500 14px/1 var(--f-sans); padding: 11px 16px 13px; border-radius: 99px; cursor: pointer; overflow: hidden; transition: color .3s, background .3s, border-color .3s; }
.wy-tab i { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.wy-tab i b { display: block; height: 100%; background: #9cc3dc; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.wy-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.wy-tab.is-active i { background: rgba(255,255,255,.18); }
.wy-tab:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.wy-stage { position: relative; min-height: 400px; }
.wy-pane { position: absolute; inset: 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 22px; align-items: stretch; }
.wy-h { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
/* generic AI: flat, grey, muted */
.wy-ai { background: #eceeee; border: 1px dashed #c9cfd1; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; }
.wy-ai .wy-h { color: #8a9296; }
.wy-ai .wy-h i { width: 9px; height: 9px; border-radius: 50%; background: #aab2b5; }
.wy-bub { margin: 22px 0 0; align-self: flex-start; max-width: 92%; background: #f7f7f7; border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 17px; line-height: 1.45; color: #6f777b; }
.wy-miss { margin-top: auto; align-self: flex-start; font-size: 13.5px; font-weight: 500; color: #a2604a; background: #f3e4dd; border-radius: 99px; padding: 7px 12px; }
/* Adology: white, raised, outlined */
.wy-us { background: var(--white); border: 1.5px solid var(--blue-2); border-radius: 22px; padding: 24px; box-shadow: 0 30px 70px -36px rgba(18, 35, 46, .4); display: flex; flex-direction: column; }
.wy-us .wy-h { color: var(--blue); } .wy-us .wy-h img { width: 18px; }
.wy-body { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.wy-note { margin: 0; font-size: 14px; color: var(--muted); } .wy-note b { color: var(--ink); font-weight: 600; }
.wy-th { display: inline-block; width: 64px; height: 84px; border-radius: 10px; background: #dfe7eb center/cover; box-shadow: 0 1px 3px rgba(18,35,46,.12); }
.wy-thumbs { display: flex; gap: 8px; align-items: center; }
.wy-btn { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--ink); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 12px; }
.wy-dots { position: relative; height: 112px; border-radius: 12px; background: var(--paper); }
.wy-dots::before { content: ''; position: absolute; left: 3%; right: 3%; bottom: 34%; border-top: 1.5px dashed #a9c2d1; }
.wy-dots i { position: absolute; width: 9px; height: 9px; margin: 0 0 -4px -4px; border-radius: 50%; background: #b8c7cf; }
.wy-dots i.hot { width: 14px; height: 14px; margin: 0 0 -7px -7px; background: var(--blue); box-shadow: 0 0 0 5px rgba(43,92,121,.15); }
.wy-dots .avg { position: absolute; right: 4%; bottom: 36%; font: 400 10px/1 var(--f-mono); color: var(--muted); }
.wy-dots .lab { position: absolute; left: 82%; top: 4px; font-size: 13px; font-weight: 600; color: var(--blue); }
.wy-weeks { display: flex; gap: 12px; }
.wy-weeks div { display: grid; gap: 6px; justify-items: start; font-size: 12px; color: var(--muted); }
.wy-weeks b { font-size: 18px; font-weight: 500; color: var(--ink); }
.wy-rules { display: flex; flex-wrap: wrap; gap: 8px; }
.wy-rules span, .wy-know span { display: inline-flex; flex-direction: column; gap: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; font-size: 14.5px; color: var(--ink); }
.wy-rules em, .wy-know em { font-style: normal; font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.wy-know { display: grid; gap: 8px; }
.wy-know span { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.wy-know .wy-th { grid-row: 1 / span 2; width: 40px; height: 52px; border-radius: 8px; }
.wy-out { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: end; }
.wy-out span { grid-row: 1 / span 2; font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.wy-out em { display: block; font-style: normal; font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.wy-out b { font-size: 40px; font-weight: 400; letter-spacing: -.035em; line-height: 1; color: var(--blue); text-align: right; }
.wy-out small { font-size: 12.5px; color: var(--muted); text-align: right; }
.wy-foot { margin: 14px 0 0; }
@container adl (max-width: 820px) { .wy-stage { min-height: 640px; } .wy-pane { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .wy-ai { padding: 18px; } .wy-tabs { flex-wrap: nowrap; overflow-x: auto; } .wy-tab { flex: none; } }
.wy .wy-bub { margin: 22px 0 0; padding: 15px 17px; background: #f8f8f8; border-radius: 16px 16px 16px 4px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.wy .wy-note { margin: 0; }

/* why v2 — benefits first, bigger examples, the You cursor */
.wy-stage { min-height: 540px; }
.wy-pane { grid-template-columns: .78fr 1.22fr; }
.wy-ai { padding: 28px; }
.wy-ai .wy-h { font-size: 13px; }
.wy .wy-bub { font-size: 24px; line-height: 1.35; padding: 20px 22px; margin-top: 26px; max-width: 100%; }
.wy-miss { font-size: 15px; padding: 9px 14px; }
.wy-us { padding: 28px 30px; }
.wy-logo img { height: 30px; width: auto; display: block; }
.wy .wy-ben { margin: 18px 0 0; font-size: 32px; line-height: 1.12; letter-spacing: -.03em; font-weight: 400; color: var(--ink); }
.wy .wy-ben em { font-family: var(--f-serif); font-style: italic; color: var(--blue); letter-spacing: -.01em; }
.wy-body { margin-top: 22px; gap: 14px; }
.wy .wy-note { font-size: 15px; }
.wy-th { position: relative; width: 92px; height: 124px; border-radius: 12px; }
.wy-thumbs { gap: 10px; }
.wy-thumbs.sm .wy-th { width: 84px; height: 112px; }
.tgt { position: relative; }
.wy-cur { position: absolute; right: -18px; bottom: -22px; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; }
.wy-cur svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.wy-cur path { fill: var(--blue); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.wy-cur em { font-style: normal; margin: 18px 0 0 -4px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 500; padding: 4px 9px; border-radius: 7px 7px 7px 2px; white-space: nowrap; }
.wy-pop { position: absolute; z-index: 5; white-space: nowrap; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; padding: 8px 11px; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(18,35,46,.5); }
.wy-thumbs .wy-pop { left: 50%; top: -14px; transform: translate(-50%, -100%); }
.wy-dots { height: 168px; }
.wy-dots i { width: 11px; height: 11px; margin: 0 0 -5px -5px; }
.wy-dots i.hot { width: 18px; height: 18px; margin: 0 0 -9px -9px; }
.wy-dots .wy-cur { right: -22px; bottom: -26px; }
.wy-dots .tip { right: 8%; top: 10px; }
.wy-weeks { gap: 16px; }
.wy-weeks div { padding: 8px; border-radius: 14px; font-size: 13px; }
.wy-weeks .wy-th { width: 92px; height: 120px; }
.wy-weeks b { font-size: 22px; }
.wy-rules { gap: 10px; }
.wy-rules span { position: relative; font-size: 17px; padding: 12px 40px 12px 15px; }
.wy-rules span i { position: absolute; right: 12px; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--pick); color: #fff; font-style: normal; font-size: 11px; line-height: 20px; text-align: center; }
.wy-rules span:not(.on) i { background: var(--line-2); }
.wy-btn { position: relative; margin-left: 12px; font-size: 15px; padding: 11px 16px; border-radius: 11px; background: var(--white); }
.wy-thumbs.sm .toast { left: auto; right: 0; top: auto; bottom: -48px; transform: none; background: var(--pick); }
.wy-know { gap: 10px; }
.wy-know span { grid-template-columns: 54px 1fr; font-size: 16.5px; padding: 11px 14px; }
.wy-know .wy-th { width: 54px; height: 68px; }
.wy-out span { font-size: 17px; }
.wy-out b { font-size: 46px; }
@container adl (max-width: 820px) { .wy-stage { min-height: 820px; } .wy .wy-ben { font-size: 26px; } .wy-th { width: 70px; height: 94px; } .wy .wy-bub { font-size: 19px; } }
.wy-thumbs .wy-pop { top: auto; bottom: -12px; transform: translate(-50%, 100%); }
.wy-dots .tip { right: auto; left: 46%; top: 8px; }
.wy-rules { align-items: flex-start; }
.wy-thumbs.sm .toast { left: 412px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.wy .wy-rules .wy-cur, .wy .wy-know .wy-cur { display: flex; flex-direction: row; background: none; border: 0; padding: 0; grid-template-columns: none; }
.wy .wy-cur em { font: 500 12.5px/1.2 var(--f-sans); letter-spacing: 0; text-transform: none; color: #fff; background: var(--blue); margin: 18px 0 0 -4px; padding: 4px 9px; border-radius: 7px 7px 7px 2px; }
.wy-thumbs { margin-bottom: 30px; }

/* ---------- 3 ways to work (wf-) ---------- */
.wf { height: auto; }
.wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wf-card { cursor: pointer; display: flex; flex-direction: column; border-radius: 26px; padding: 22px 20px 20px; background:
  radial-gradient(70% 90% at 20% 0%, rgba(174, 207, 226, .4), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(200, 226, 214, .45), transparent 70%), #eef3f4; transform-origin: 50% 50%; }
.wf-card.c1 { background: radial-gradient(70% 90% at 20% 0%, rgba(217, 119, 87, .16), transparent 70%), #f5f1ea; }
.wf-card.c2 { background: radial-gradient(70% 90% at 80% 0%, rgba(174, 207, 226, .5), transparent 70%), #eef2f6; }
.wf-k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.wf-card.c1 .wf-k { color: #b4593a; }
.wf-who { margin: 8px 0 18px; font-size: 18px; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }
.wf-win { position: relative; height: 360px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(18,35,46,.04), 0 24px 50px -26px rgba(18,35,46,.4); text-align: left; }
.wf-sk { display: inline-block; height: 8px; border-radius: 4px; background: #e3e9ec; }
.wf-cur { position: absolute; right: -16px; bottom: -22px; display: flex; align-items: flex-start; z-index: 5; pointer-events: none; }
.wf-cur svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.wf-cur path { fill: var(--blue); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.wf-cur em { font-style: normal; margin: 16px 0 0 -4px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px 6px 6px 2px; }
/* platform */
.wf-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f1f3f3; border-bottom: 1px solid var(--line); }
.wf-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dadb; }
.wf-bar span { margin-left: 10px; font: 400 11px/1 var(--f-mono); color: var(--muted); background: #fff; padding: 4px 9px; border-radius: 6px; }
.wf-appin { position: absolute; inset: 30px 0 0 0; display: flex; }
.wf-rail { width: 44px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; }
.wf-rail img { width: 22px; } .wf-rail i { width: 16px; height: 16px; border-radius: 5px; background: #e7ecee; }
.wf-main { position: relative; flex: 1; padding: 12px 14px; background: var(--paper); }
.wf-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wf-wordmark { height: 20px; width: auto; } .wf-top span { font-size: 12px; color: var(--muted); }
.wf-moves { position: relative; background: #1d2834; border-radius: 12px; padding: 14px; color: #e9ecef; }
.wf-moves .k { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fb3d1; }
.wf-moves .mv { display: flex; gap: 10px; margin-top: 12px; }
.wf-moves .mv b { flex: none; width: 26px; height: 26px; border: 1px solid #8fb3d1; border-radius: 50%; font: 500 11px/24px var(--f-mono); text-align: center; color: #cfe0ee; }
.wf-moves .mv p { margin: 0; font-family: var(--f-serif); font-size: 21px; line-height: 1.1; color: #fff; }
.wf-moves .mv small { display: block; margin-top: 4px; font-size: 12px; color: #aebccb; }
.wf-moves .mv.dim { opacity: .4; } .wf-moves .mv.dim .wf-sk { background: rgba(255,255,255,.25); }
.wf-act { position: relative; display: inline-block; margin-top: 14px; background: #8fb3d1; color: #10202e; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 99px; }
.wf-done { position: absolute; left: 14px; bottom: 14px; background: var(--pick); color: #fff; font-size: 13px; font-weight: 500; padding: 7px 11px; border-radius: 9px; }
/* claude */
.wf-claude { background: #faf9f5; }
.wf-cltop { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #ece8de; }
.wf-spark svg { width: 24px; height: 24px; display: block; }
.wf-cltop b { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 20px; color: #1f1e1d; letter-spacing: -.01em; }
.wf-chat { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.wf .wf-you { margin: 0; align-self: flex-end; background: #efece3; border-radius: 14px; padding: 9px 13px; font-size: 14.5px; color: #2b2a27; }
.wf-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e3ded2; background: #fff; border-radius: 10px; padding: 7px 10px; font-size: 13px; color: #5f5c53; }
.wf-tool img { width: 16px; } .wf-tool em { font-style: normal; color: var(--pick); font-weight: 700; }
.wf .wf-ans { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 15.5px; line-height: 1.5; color: #2b2a27; min-height: 4.5em; }
.wf-comp { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 74px; background: #fff; border: 1px solid #ddd8cc; border-radius: 16px; }
.wf-comp span { position: absolute; left: 14px; top: 12px; font-size: 13px; color: #9a958a; }
.wf-chip { position: absolute; left: 10px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; background: #d8e6fb; color: #1f4f99; font-style: normal; font-size: 11.5px; }
.wf-chip img { width: 13px; }
.wf-comp b { position: absolute; right: 9px; bottom: 9px; width: 30px; height: 30px; border-radius: 9px; background: #d97757; color: #fff; font-size: 16px; line-height: 30px; text-align: center; }
/* email */
.wf-mtop { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wf-mtop b { font-size: 15px; color: var(--ink); }
.wf-clock { font: 500 12px/1 var(--f-mono); color: #fff; background: var(--ink); padding: 6px 9px; border-radius: 7px; }
.wf-list { display: flex; flex-direction: column; }
.wf-new { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; padding: 12px 14px 12px 20px; background: #f3f8fb; border-bottom: 1px solid var(--line); }
.wf-new .dot { position: absolute; left: 7px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2); }
.wf-new img { width: 26px; margin-top: 2px; }
.wf-new b { font-size: 14px; color: var(--ink); }
.wf .wf-new p { margin: 2px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.wf-att { display: inline-block; font-size: 11.5px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 3px 7px; }
.wf-new time { font: 500 11px/1 var(--f-mono); color: var(--blue); }
.wf-old { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 13px 54px; border-bottom: 1px solid var(--line); }
.wf-rep { position: absolute; left: 14px; right: 14px; bottom: 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; box-shadow: 0 20px 40px -18px rgba(18,35,46,.4); display: flex; flex-direction: column; gap: 8px; }
.wf-rep .k { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.wf .wf-rep h4 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--ink); }
.wf-repf { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.wf-repf .tag { font-size: 11px; font-weight: 500; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 3px 8px; }
.wf .wf-repf p { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.wf-repf .bar { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.wf-repf .bar b { display: block; width: 86%; height: 100%; background: var(--blue-2); border-radius: 4px; transform-origin: 0 50%; }
@container adl (max-width: 980px) { .wf-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* who it's for v2 — payoff visuals */
.f-persona2 { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.f-pvis { border-radius: 16px; padding: 10px; background: radial-gradient(70% 90% at 20% 0%, rgba(174, 207, 226, .45), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(200, 226, 214, .5), transparent 70%), #eef3f4; margin-bottom: 18px; }
.f-persona2 .k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); padding: 0 6px; }
.f-persona2 h3 { font-family: var(--f-serif); font-weight: 400; font-size: 27px; line-height: 1.06; margin: 10px 0 8px; letter-spacing: -.01em; color: var(--ink); padding: 0 6px; }
.f-persona2 p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); padding: 0 6px; }
.mw .mk-stage { border-radius: 10px; }
.mw-k { position: absolute; left: 18px; top: 16px; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mw-row { position: absolute; left: 16px; width: 328px; display: grid; grid-template-columns: 128px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 9px 11px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mw-row.r0 { top: 40px; } .mw-row.r1 { top: 84px; } .mw-row.r2 { top: 128px; } .mw-row.r3 { top: 172px; }
.mw-row .nm { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.mw-row .bar { height: 7px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.mw-row .bar b { display: block; height: 100%; background: var(--blue-2); border-radius: 4px; transform-origin: 0 50%; }
.mw-row .tg { font-size: 10.5px; font-weight: 500; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 3px 7px; white-space: nowrap; }
.mw-map { position: absolute; inset: 14px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mw-map .ax { position: absolute; background: var(--line-2); }
.mw-map .ax.h { left: 14px; right: 14px; top: 50%; height: 1px; } .mw-map .ax.v { top: 14px; bottom: 14px; left: 50%; width: 1px; }
.mw-map .al { position: absolute; font: 400 9px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.mw-map .al.t { left: calc(50% + 5px); top: 8px; } .mw-map .al.b { left: calc(50% + 5px); bottom: 8px; } .mw-map .al.l { left: 8px; top: calc(50% + 5px); } .mw-map .al.r { right: 8px; top: calc(50% + 5px); }
.mw-map .dt { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #b8c7cf; }
.mw-map .gap { position: absolute; left: 248px; top: 54px; width: 68px; height: 46px; margin: -23px 0 0 -34px; border: 2px dashed var(--blue-2); border-radius: 50%; background: rgba(231,240,245,.6); }
.mw-map .gl { position: absolute; right: 12px; top: 84px; font-size: 11px; font-weight: 600; color: var(--blue); background: #fff; padding: 2px 4px; white-space: nowrap; }
.mw-dir { position: absolute; left: 16px; top: 18px; width: 200px; height: 184px; background: var(--ink); border-radius: 14px; padding: 16px; box-shadow: 0 14px 30px -14px rgba(18,35,46,.6); }
.mw-dir span { font: 500 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fb3d1; }
.mw .mw-dir p { margin: 12px 0 0; font-family: var(--f-serif); font-size: 27px; line-height: 1.04; color: #fff; }
.mw-dir em { color: #9cc3dc; }
.mw-refs { position: absolute; left: 232px; top: 18px; display: grid; gap: 8px; }
.mw-refs figure { position: relative; margin: 0; width: 104px; height: 56px; border-radius: 9px; overflow: visible; }
.mw-refs img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; box-shadow: 0 1px 3px rgba(18,35,46,.15); }
.mw-refs b { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; font: 500 10px/18px var(--f-mono); text-align: center; }
.mw-week { position: absolute; left: 14px; right: 14px; top: 14px; height: 156px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mw-week .dy { background: #fff; border-radius: 10px; padding: 7px 6px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 3px rgba(18,35,46,.08); }
.mw-week .dy span { font: 500 10px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mw-week .emp { flex: 1; border-radius: 7px; border: 1.5px dashed var(--line-2); }
.mw-week .slot { position: relative; margin: 0; flex: 1; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px rgba(74,131,166,.9); }
.mw-week .slot img { width: 100%; height: 100%; object-fit: cover; }
.mw-week .slot em { position: absolute; left: 3px; right: 3px; bottom: 3px; font-style: normal; font-size: 8.5px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.92); border-radius: 4px; padding: 2px 3px; text-align: center; line-height: 1.15; }
.mw-why { position: absolute; left: 14px; bottom: 14px; font-size: 11.5px; font-weight: 500; color: var(--blue); background: var(--blue-soft); border-radius: 99px; padding: 5px 10px; }
.f-who:has(.f-persona2) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@container adl (max-width: 760px) { .f-who:has(.f-persona2) { grid-template-columns: 1fr; } }
.f-persona2 h3 { font-size: 32px; }
.f-persona2 p { font-size: 15.5px; max-width: 460px; }
.mw-map .al.r { top: calc(50% - 14px); }
.mw-map .al.r { top: calc(50% + 5px); }
.mw-map .gl { top: 78px; }
/* who: role names lead */
.f-persona2 .k { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin: 2px 6px 0; padding: 8px 14px 8px 12px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font: 600 22px/1 var(--f-sans); letter-spacing: -.02em; text-transform: none; }
.f-persona2 .k::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-2); }
.f-persona2 h3 { font-size: 28px; margin-top: 14px; }
@container adl (max-width: 760px) { .f-persona2 .k { font-size: 19px; } .f-persona2 h3 { font-size: 26px; } }
/* who: five cards, 3 + 2 */
.f-who:has(.f-persona2) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.f-who .f-persona2 { grid-column: span 2; }
.f-who .f-persona2:nth-child(n+4) { grid-column: span 3; }
.f-who .f-persona2:nth-child(-n+3) h3 { font-size: 25px; }
.f-who .f-persona2:nth-child(-n+3) .k { font-size: 19px; }
@container adl (max-width: 980px) { .f-who .f-persona2, .f-who .f-persona2:nth-child(n+4) { grid-column: span 3; } .f-who .f-persona2:last-child { grid-column: 1 / -1; } }
@container adl (max-width: 760px) { .f-who .f-persona2, .f-who .f-persona2:nth-child(n+4), .f-who .f-persona2:last-child { grid-column: 1 / -1; } }
.mw-cr { position: absolute; left: 16px; width: 328px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.mw-cr.c0 { top: 40px; } .mw-cr.c1 { top: 96px; } .mw-cr.c2 { top: 152px; }
.mw-cr img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.mw-cr .nm { display: grid; gap: 5px; flex: 1; }
.mw-cr .fit { font-size: 10.5px; font-weight: 600; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 3px 7px; white-space: nowrap; }
.mw-cr .fit.dim { background: none; padding: 0; }
.mw-cr .lift { font-size: 10.5px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.mw-add { position: absolute; right: 16px; top: 14px; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 99px; padding: 4px 9px; }

.wy .wy-know .wy-th, .wy .wy-th { background-size: cover; background-position: center 25%; background-repeat: no-repeat; }

/* under the hood */
.f-hood { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.f-hood article { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 24px; }
.f-hood .n { display: inline-flex; min-width: 44px; height: 32px; padding: 0 10px; align-items: center; justify-content: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font: 600 15px/1 var(--f-mono); }
.f-hood h3 { margin: 16px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.f-hood p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.f-hood-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.f-hood-also span { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.f-hood-also b { font-weight: 500; font-size: 14px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 7px 12px; }
.f-faq-k { margin: 28px 0 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.f-faq-k:first-child { margin-top: 0; }
@container adl (max-width: 900px) { .f-hood { grid-template-columns: 1fr 1fr; } }
@container adl (max-width: 560px) { .f-hood { grid-template-columns: 1fr; } }

/* why · creative DNA + AI visibility panes */
.wy-dna, .wy-geo { display: grid; gap: 10px; }
.wy-dna > div, .wy-geo > div { position: relative; display: grid; grid-template-columns: 74px 1fr 120px 54px; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--ink); }
.wy-dna em, .wy-geo em { font-style: normal; font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.wy-dna i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--blue-2) var(--w), var(--mist) var(--w)); }
.wy-dna b:not(.wy-pop), .wy-geo b:not(.wy-pop) { font-size: 17px; font-weight: 600; color: var(--pick); text-align: right; }
.wy-geo > div { grid-template-columns: 110px 1fr auto; }
.wy-geo b.no { color: var(--alert); font-size: 14px; }
.wy-geo .q { margin: 0 0 2px; font-family: var(--f-serif); font-size: 26px; color: var(--ink); }
.wy .wy-dna .wy-pop.tip, .wy .wy-geo .wy-pop.tip { position: absolute; right: 0; top: -34px; left: auto; bottom: auto; }
/* how · new chips */
.mk-match { position: absolute; left: 40px; top: 270px; font-size: 13px; font-weight: 500; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 6px 11px; }
.mk-c small { font-size: 10.5px; color: var(--muted); }
.mk-stats { position: absolute; left: 84px; top: 8px; display: flex; gap: 6px; }
.mk-stats span { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 4px 9px; white-space: nowrap; }
.mk-stats .mult { color: #fff; background: var(--blue); }
.mk-stats .dna { color: var(--ink); background: var(--mark); }
.mk-ev { position: absolute; left: 84px; top: 318px; font-size: 11px; font-weight: 500; color: var(--blue); }
/* feeds · slack ping */
.fd3-slack { border-left: 0; padding: 16px 18px 18px; border-radius: 14px; font-family: var(--f-sans); }
.fd3-slack .sl-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1d1c1d; }
.fd3-slack .sl-logo svg { width: 18px; height: 18px; }
.fd3-slack .sl-badge { position: absolute; left: 8px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: #e01e5a; color: #fff; font: 700 10.5px/18px var(--f-sans); text-align: center; font-style: normal; transform: scale(0); }
.is-ping .fd3-slack .sl-badge { animation: slPing .6s cubic-bezier(.3,1.6,.5,1) forwards; }
.is-ping .fd3-slack { animation: slNudge .5s ease-out; }
@keyframes slPing { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes slNudge { 0%,100% { rotate: 0deg; } 25% { rotate: -1.2deg; } 60% { rotate: 1deg; } }
.fd3-slack .sl-top { display: flex; justify-content: space-between; margin: 10px 0 10px; padding-bottom: 10px; border-bottom: 1px solid #ececec; font-size: 13px; color: #616061; }
.fd3-slack .sl-top span { font-weight: 700; color: #1d1c1d; }
.fd3-slack .sl-msg { display: flex; gap: 10px; text-align: left; }
.fd3-slack .sl-msg img { width: 36px; height: 36px; border-radius: 8px; background: var(--ink); padding: 6px; }
.fd3-slack p.sl-who { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; letter-spacing: 0; }
.fd3-slack .sl-who em { font-style: normal; font-size: 9.5px; font-weight: 700; color: #616061; background: #e8e8e8; border-radius: 3px; padding: 1px 4px; }
.fd3-slack p.sl-txt { margin: 3px 0 10px; font-size: 17px; line-height: 1.35; font-weight: 400; color: #1d1c1d; letter-spacing: 0; }
.fd3-slack .sl-att { display: inline-block; font-size: 12.5px; color: #1264a3; margin-right: 10px; }
.fd3-slack .sl-btn { display: inline-block; font-size: 12.5px; font-weight: 700; color: #1d1c1d; border: 1px solid #ccc; border-radius: 6px; padding: 4px 10px; }
.mk-match { top: 300px; }
.wy .wy-dna .wy-pop.tip, .wy .wy-geo .wy-pop.tip { top: calc(50% - 15px); right: 200px; left: auto; bottom: auto; white-space: nowrap; }
.mk-askbox { top: 58px; } .mk-crit { top: 196px; } .mk-match { top: 286px; }
.mk-askbox { top: 50px; } .mk-crit { top: 202px; } .mk-match { top: 292px; }

/* how · step 02 full width: the five Cs */
.f-rows .f-row:nth-child(even) .f-vis { order: 0; }
.f-rows .f-row:nth-child(odd):not(:first-child) .f-vis { order: 2; }
.f-row.wide { grid-template-columns: 1fr; gap: 28px; }
.f-row.wide .f-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.f-row.wide .f-copy h3 { margin-bottom: 0; }
.f-row.wide .f-copy p { max-width: 520px; }
.f-row.wide .f-vis { padding: 22px; }
@container adl (max-width: 860px) { .f-rows .f-row:nth-child(odd):not(:first-child) .f-vis { order: 0; } .f-row.wide .f-copy { grid-template-columns: 1fr; gap: 12px; } .f-rows .f-row .f-vis { order: 0; } .f-rows .f-row .f-copy { order: 1; } }
.c5-stage { position: relative; }
.c5-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c5-p { fill: none; stroke-width: 1.6; opacity: .55; }
.c5-lane { position: absolute; left: 0; width: 905px; height: 60px; display: flex; align-items: center; gap: 14px; }
.c5-lane.l0 { top: 24px; } .c5-lane.l1 { top: 96px; } .c5-lane.l2 { top: 168px; } .c5-lane.l3 { top: 240px; } .c5-lane.l4 { top: 312px; }
.c5-name { flex: none; width: 190px; display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; row-gap: 2px; align-items: center; }
.c5-name i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); grid-row: 1; }
.c5-name b { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.c5-name small, .c5-name .c5-k { grid-column: 2; }
.c5-name small { font-size: 12px; color: var(--muted); }
.c5-k { font: 500 11px/1.3 var(--f-mono); color: var(--c); }
.c5-k em { font-style: normal; font-weight: 600; }
.c5-track { flex: 1; height: 60px; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.45); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); }
.c5-run { display: flex; gap: 10px; width: max-content; height: 100%; align-items: center; animation: c5move var(--sp) linear infinite; animation-delay: var(--dl); padding-left: 10px; }
@keyframes c5move { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.am-paused .c5-run, .am-static .c5-run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .c5-run { animation: none; } }
.c5-it { flex: none; display: flex; align-items: center; gap: 9px; height: 48px; background: #fff; border-radius: 10px; padding: 5px 12px 5px 5px; box-shadow: 0 1px 3px rgba(18,35,46,.1); border-left: 3px solid var(--c); }
.c5-it img { width: 30px; height: 38px; object-fit: cover; border-radius: 6px; }
.c5-it.f img { width: 36px; height: 36px; border-radius: 50%; }
.c5-it span { display: grid; gap: 2px; }
.c5-it b { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.c5-it small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.c5-it.q { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-left: 12px; }
.c5-it.q b { font-family: var(--f-serif); font-weight: 400; font-size: 16px; }
.c5-dot { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; }
.c5-hub { position: absolute; left: 984px; top: 160px; width: 76px; height: 76px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -12px rgba(18,35,46,.4); }
.c5-hub img { width: 40px; }
.c5-total { position: absolute; left: 942px; top: 250px; width: 160px; text-align: center; }
.c5-total b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.c5-total span { font-size: 12px; color: var(--muted); line-height: 1.3; display: block; }
/* phone: lanes stack name over track, hub hidden */
.am-m .c5-svg, .am-m .c5-hub, .am-m .c5-dot { display: none; }
.am-m .c5-lane { width: 560px; height: 92px; flex-direction: column; align-items: stretch; gap: 6px; }
.am-m .c5-lane.l0 { top: 6px; } .am-m .c5-lane.l1 { top: 104px; } .am-m .c5-lane.l2 { top: 202px; } .am-m .c5-lane.l3 { top: 300px; } .am-m .c5-lane.l4 { top: 398px; }
.am-m .c5-name { width: auto; grid-template-columns: 12px auto auto 1fr; }
.am-m .c5-name small, .am-m .c5-name .c5-k { grid-column: auto; grid-row: 1; }
.am-m .c5-name .c5-k { justify-self: end; }
.am-m .c5-track { flex: none; }
.am-m .c5-total { left: 0; top: 500px; width: 560px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.am-m .c5-total b { display: inline; font-size: 26px; }
.am-m .c5-total span { display: inline; }
.am-m .c5-name i { grid-column: 1; grid-row: 1; } .am-m .c5-name b { grid-column: 2; grid-row: 1; font-size: 18px; } .am-m .c5-name small { grid-column: 3; grid-row: 1; font-size: 13px; } .am-m .c5-name .c5-k { grid-column: 4; grid-row: 1; font-size: 12px; }
.am-m .c5-name small { display: none; } .am-m .c5-name { grid-template-columns: 12px auto 1fr; } .am-m .c5-name .c5-k { grid-column: 3; justify-self: end; }

/* hero v2 · camera flow (flow2) — question → rail → panning world */
.f2 { text-align: left; }
.f2-stage { overflow: hidden; }
.f2-rail { position: absolute; left: 0; right: 0; top: 20px; display: flex; justify-content: center; gap: 8px; z-index: 5; }
.f2-rail span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #8a98a1; background: #fff; border: 1px solid #dfe6ea; border-radius: 99px; padding: 7px 14px 7px 8px; }
.f2-rail em { font: 500 10.5px/1 var(--f-mono); font-style: normal; opacity: .8; background: rgba(18,35,46,.06); border-radius: 99px; padding: 4px 6px; }
.f2-ask { position: absolute; left: 228px; top: 0; width: 680px; transform-origin: 50% 0; background: #fff; border-radius: 20px; padding: 16px 22px 20px; box-shadow: 0 18px 50px -24px rgba(18,35,46,.45); border: 1px solid var(--line); z-index: 6; text-align: center; }
.f2-chip { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--f-mono); color: var(--blue); background: var(--blue-soft); border-radius: 7px; padding: 6px 9px; }
.f2-chip img { width: 14px; }
.f2-ask p { margin: 12px 0 0; font-size: 30px; letter-spacing: -.02em; color: var(--ink); min-height: 1.25em; line-height: 1.2; }
.f2-caret { display: inline-block; width: 2px; height: 28px; background: var(--blue-2); vertical-align: -4px; margin-left: 2px; }
.f2-view { position: absolute; left: 0; right: 0; top: 146px; height: 380px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%); }
.f2-world { position: absolute; left: 0; top: 0; width: 2400px; height: 380px; }
.f2-svg { position: absolute; inset: 0; width: 2400px; height: 380px; overflow: visible; }
.f2-p { fill: none; stroke-width: 1.6; opacity: .7; }
.f2-p.x { stroke: #b9c9d2; }
.f2-dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; z-index: 3; }
.f2-c { position: absolute; left: 0; width: 290px; height: 56px; display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 12px; padding: 0 9px 0 12px; box-shadow: 0 1px 3px rgba(18,35,46,.08); }
.f2-c .ic { width: 16px; height: 16px; opacity: .75; }
.f2-c .nm { display: grid; gap: 3px; flex: 1; }
.f2-c .nm b { font-size: 15px; font-weight: 600; color: var(--ink); }
.f2-c .nm em { font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--c); }
.f2-c .nm em i { font-style: normal; }
.f2-c .sig { display: flex; gap: 4px; align-items: center; }
.f2-c .sig img { width: 28px; height: 38px; object-fit: cover; border-radius: 6px; }
.f2-c .sig img.f { width: 34px; height: 34px; border-radius: 50%; }
.f2-c .sig .q { font-family: var(--f-serif); font-size: 14px; color: var(--ink); background: var(--paper); border-radius: 6px; padding: 5px 8px; white-space: nowrap; }
.f2-pipe { position: absolute; left: 380px; top: 88px; width: 280px; background: var(--ink); color: #fff; border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 18px 40px -20px rgba(18,35,46,.6); z-index: 2; }
.f2-k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fb3d1; }
.f2-pipe ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.f2-pipe li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #dbe6ec; }
.f2-pipe li i { width: 19px; height: 19px; border-radius: 50%; background: var(--pick); color: #fff; font-style: normal; font-size: 10px; display: grid; place-items: center; flex: none; }
.f2-pipe li b { color: #fff; font-weight: 600; }
.f2-ins { position: absolute; left: 760px; top: 0; width: 760px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px 16px; box-shadow: 0 24px 60px -30px rgba(18,35,46,.45); z-index: 2; }
.f2-ins-h { display: flex; justify-content: space-between; align-items: center; }
.f2-tag { font-size: 12px; font-weight: 600; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 5px 10px; }
.f2-conf { font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.f2-ins h3 { margin: 12px 0 14px; font-family: var(--f-serif); font-weight: 400; font-size: 31px; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.f2-ins h3 em { color: var(--blue); }
.f2-ev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.f2-ev .e { position: relative; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 11px; padding: 10px 11px; min-height: 104px; }
.f2-ev .e span { font: 500 9.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
.f2-ev .e p { margin: 7px 0 5px; font-size: 13.5px; line-height: 1.3; color: var(--ink); font-weight: 500; }
.f2-ev .e p b { font-weight: 700; }
.f2-ev .e small { font-size: 11px; color: var(--muted); line-height: 1.3; display: block; }
.f2-ev .e.th { padding-right: 52px; }
.f2-ev .e.th img { position: absolute; right: 9px; top: 10px; width: 36px; height: 48px; object-fit: cover; border-radius: 7px; }
.f2-dna { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: #fbf6dc; border-radius: 12px; padding: 9px 11px; }
.f2-dna .lab { width: 100%; font: 500 9.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: #8a6d12; margin-bottom: 2px; }
.f2-dna .g { font-size: 12.5px; font-weight: 500; color: var(--ink); background: #fff; border-radius: 99px; padding: 5px 9px; }
.f2-dna i { font-style: normal; color: #8a6d12; font-weight: 600; }
.f2-dna b { margin-left: auto; font-size: 18px; font-weight: 600; color: var(--pick); }
.f2-foot { margin: 9px 0 0; font-size: 11.5px; color: var(--muted); }
.f2-foot b { color: var(--ink); font-weight: 600; }
.f2-brief { position: absolute; left: 1640px; top: 34px; width: 360px; background: var(--ink); color: #fff; border-radius: 18px; padding: 20px 22px 18px; box-shadow: 0 24px 50px -24px rgba(18,35,46,.7); z-index: 2; }
.f2-brief h4 { margin: 10px 0 14px; font-family: var(--f-serif); font-weight: 400; font-size: 32px; line-height: 1.05; }
.f2-brief h4 em { color: #9cc3dc; }
.f2-brief ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.f2-brief li { display: grid; grid-template-columns: 60px 1fr; font-size: 14px; color: #dbe6ec; line-height: 1.35; }
.f2-brief li b { font: 500 10px/1.9 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: #8fb3d1; }
.f2-brief small { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12px; color: #9fb4c0; }
.f2-brief small i { font-style: normal; font: 500 10.5px/1 var(--f-mono); background: #fff; color: var(--ink); border-radius: 4px; padding: 3px 5px; }
.f2-out { position: absolute; left: 2090px; width: 180px; height: 48px; display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.f2-out.o0 { top: 58px; } .f2-out.o1 { top: 156px; } .f2-out.o2 { top: 254px; }
.f2-out span { display: grid; gap: 2px; }
.f2-out b { font-size: 15px; font-weight: 600; color: var(--ink); }
.f2-out small { font-size: 11.5px; color: var(--muted); }
.f2-out i, .f2-toast i { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.f2 .sl { background: conic-gradient(#e01e5a 0 25%, #36c5f0 0 50%, #2eb67d 0 75%, #ecb22e 0); }
.f2 .em { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.f2 .cl { background: #d97757; border-radius: 50%; }
.f2-toast { position: absolute; left: 2090px; top: 322px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--ink); box-shadow: 0 14px 30px -16px rgba(18,35,46,.4); white-space: nowrap; z-index: 3; }
.f2-toast b { font-weight: 700; margin-right: 4px; }
.mk-find .mk-row.sm, .mk-row.sm { grid-template-columns: 196px 1fr 74px; }
.mk-row.sm .nm { font-size: 12.5px; white-space: nowrap; }
.mk-stats .gap { color: var(--alert); background: #f8e7df; }

/* css/scenes-v2.css */
/* ==========================================================================
   Adology Motion v2 — focus + call-out scenes (GSAP-driven).  Prefix: hv- (hero)
   Uses the site tokens (paper, ink, restrained blue; highlighter for evidence only).
   ========================================================================== */

/* ---------- HERO ---------- */
.hv .am-canvas { overflow: hidden; }
.hv .am-canvas > * { will-change: transform, opacity; }
.hv-kick { font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); display: block; }

.hv-ask { width: 820px; background: var(--white); border: 1px solid var(--line-2); border-radius: 22px; padding: 20px 26px 74px; box-shadow: var(--shadow-lift); z-index: 6; }
.hv-ask p { font-size: 36px; line-height: 1.2; letter-spacing: -.025em; margin: 10px 0 0; min-height: 1.2em; color: var(--ink); white-space: nowrap; }
.hv-caret { display: inline-block; width: 3px; height: .95em; margin-left: 3px; vertical-align: -.1em; background: var(--blue-2); animation: am-blink 1s steps(2) infinite; }
.hv-chip { position: absolute; left: 22px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font: 500 12.5px/1 var(--f-mono); letter-spacing: .02em; }
.hv-chip img { width: 20px; height: auto; }
.hv-send { position: absolute; right: 18px; bottom: 16px; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 22px; line-height: 44px; text-align: center; }

.hv-status { display: flex; align-items: center; gap: 10px; font: 400 14px/1 var(--f-mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; z-index: 3; }
.hv-status em { font-style: normal; color: var(--ink); font-weight: 500; }
.hv-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--blue-2); display: inline-block; }
.hv-ok { position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--pick); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

.hv-src { z-index: 1; }
.hv-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.hv-video { width: 260px; height: 340px; margin: 0; }
.hv-video img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
.hv-tc { position: absolute; top: 12px; left: 12px; font: 500 11px/1 var(--f-mono); color: #fff; background: rgba(18,35,46,.62); padding: 5px 7px; border-radius: 5px; }
.hv-vcap { position: absolute; left: 14px; right: 14px; top: 56%; color: #fff; font-weight: 600; font-size: 22px; line-height: 1.18; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hv-vcap u { text-decoration: none; background: #fff; color: var(--ink); padding: 0 4px; border-radius: 4px; text-shadow: none; }
.hv-cmts { width: 464px; padding: 18px 24px; }
.hv-cmts p { font-size: 20px; line-height: 1.38; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.hv-cmts p:first-child { border-top: 0; padding-top: 4px; }
.hv-cmts b { font-size: 14px; font-weight: 600; color: var(--ink); margin-right: 6px; }
.hv-mk { color: inherit; background-color: transparent; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 62%; background-size: 0% 82%; padding: 0 3px; margin: 0 -3px; border-radius: 3px; }
.hv-ad { width: 316px; height: 340px; margin: 0; }
.hv-ad img { width: 100%; height: 100%; object-fit: cover; }
.hv-spons { position: absolute; top: 12px; left: 12px; font-size: 11px; color: #fff; background: rgba(18,35,46,.58); padding: 4px 8px; border-radius: 5px; }
.hv-adline { position: absolute; left: 18px; bottom: 20px; font-family: var(--f-serif); font-size: 38px; line-height: 1; color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.hv-stamp { position: absolute; right: 14px; top: 46px; border: 2.5px solid #fff; color: #fff; background: rgba(181,83,47,.92); font: 500 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 6px; }
.hv-search { width: 464px; padding: 24px 26px 20px; }
.hv-q { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.hv-search svg { width: 100%; height: 110px; margin: 14px 0 6px; display: block; overflow: visible; }
.hv-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.hv-spark { fill: none; stroke: var(--blue-2); stroke-width: 4; stroke-linecap: round; }
.hv-sdot { fill: var(--blue); }
.hv-up { font-size: 14px; color: var(--muted); }
.hv-culture { width: 444px; padding: 22px 24px; }
.hv-culture div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.hv-culture img { height: 128px; width: 100%; object-fit: cover; border-radius: 10px; }

.hv-lens { position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%) scale(2.2); transform-origin: 50% 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 99px; padding: 6px 12px 6px 6px; }
.hv-lens i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 10px; }
.hv-lens .hv-n { font-weight: 500; color: var(--blue); margin-left: 4px; }
.hv-check { position: absolute; right: -16px; top: -16px; width: 52px; height: 52px; border-radius: 50%; background: var(--pick); color: #fff; font-size: 28px; line-height: 52px; text-align: center; box-shadow: 0 6px 18px -6px rgba(47,122,91,.6); }

.hv-callout { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hv-ring { position: absolute; border: 3px solid var(--blue-2); border-radius: 14px; box-shadow: 0 0 0 6px rgba(74,131,166,.16); }
.hv-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv-lead path { fill: none; stroke: var(--blue-2); stroke-width: 2.5; stroke-linecap: round; }
.hv-label { position: absolute; transform: translateY(-50%); max-width: 250px; background: var(--ink); color: #fff; border-radius: 12px; padding: 11px 14px; font-size: 16px; line-height: 1.28; font-weight: 500; letter-spacing: -.005em; box-shadow: var(--shadow-lift); }
.hv-label::before { content: ''; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 0 4px rgba(74,131,166,.25); }

.hv-threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.hv-th { fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-linecap: round; opacity: .7; }

.hv-find { width: 640px; background: var(--white); border: 1px solid var(--line-2); border-radius: 24px; padding: 26px 30px 24px; box-shadow: var(--shadow-lift); z-index: 6; }
.hv-find h3 { font-size: 34px; line-height: 1.14; letter-spacing: -.028em; font-weight: 500; margin: 12px 0 16px; color: var(--ink); }
.hv-cites { display: flex; gap: 6px; align-items: center; }
.hv-cite { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11.5px/1 var(--f-mono); font-style: normal; }
.hv-cites > span:last-child { font-size: 14px; color: var(--muted); margin-left: 8px; }
.hv-opp { overflow: hidden; }
.hv-opp .hv-kick { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hv-opp p { font-family: var(--f-serif); font-size: 34px; line-height: 1.08; margin: 8px 0 0; color: var(--ink); }
.hv-opp em { color: var(--blue); background-image: linear-gradient(var(--blue-soft), var(--blue-soft)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 40%; }

.hv-brand { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 18px 12px 12px; box-shadow: var(--shadow-lift); z-index: 7; white-space: nowrap; }
.hv-brand b { width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--ink); display: grid; place-items: center; font-family: var(--f-serif); font-size: 24px; font-weight: 400; }
.hv-brand span { font-size: 13px; color: var(--night-text); line-height: 1.3; }
.hv-brand strong { display: block; font-size: 16px; color: #fff; font-weight: 600; }

.hv-brief { width: 540px; background: var(--white); border: 1px solid var(--line-2); border-radius: 24px; padding: 22px 28px 20px; box-shadow: var(--shadow-lift); z-index: 7; }
.hv-brief header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hv-ready { font-size: 12px; font-weight: 500; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 5px 11px; }
.hv-brief h4 { font-family: var(--f-serif); font-weight: 400; font-size: 54px; line-height: 1; letter-spacing: -.01em; margin: 16px 0 6px; color: var(--ink); }
.hv-sub { font-size: 17px; color: var(--ink-2); margin: 0 0 12px; }
.hv-brief li { display: grid; grid-template-columns: 110px 1fr; align-items: center; font-size: 16px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.hv-brief li b { font: 400 11px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.hv-brief li span { display: flex; gap: 5px; }

.hv-cap { width: 940px; text-align: center; z-index: 9; }
.hv-cap .hv-kick { margin-bottom: 8px; }
.hv-cap p { font-size: 30px; line-height: 1.2; letter-spacing: -.022em; color: var(--ink); margin: 0; }

.hv-eye { position: absolute; left: 0; top: 0; width: 72px; height: 74px; z-index: 10; }
.hv-eye img { width: 72px; display: block; }
.hv-lid { position: absolute; left: 21.7px; top: 22.8px; width: 29.5px; height: 29.5px; border-radius: 50%; background: var(--white); transform-origin: 50% 0; }
.hv-pup { position: absolute; left: 31px; top: 32.5px; width: 10.8px; height: 10.8px; border-radius: 50%; background: var(--ink); }
.hv-pup b { position: absolute; left: 22%; top: 18%; width: 32%; height: 32%; border-radius: 50%; background: #fff; }
.hv-cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 11; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.hv-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }

.am-static .hv-caret { display: none; }

/* ---------- FRAMES v3 · node graph (prefix nv-) ---------- */
.nv .am-canvas { overflow: hidden; }
.nv-world { position: absolute; left: 0; top: 0; width: 1400px; height: 600px; }
.nv-wires { position: absolute; left: 0; top: 0; width: 1400px; height: 600px; overflow: visible; z-index: 0; }
.nv-wires path { fill: none; stroke: #9db7c7; stroke-width: 1.6; stroke-linecap: round; }
.nv-node { position: absolute; z-index: 1; }
.nv-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); letter-spacing: -.005em; }
.nv-tag i { width: 14px; height: 14px; border-radius: 4px; background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.nv-body { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }

.nv-phone { position: relative; width: 204px; height: 362px; background: #0d1a22; }
.nv-fr { position: absolute; inset: 0; }
.nv-fr img { width: 100%; height: 100%; object-fit: cover; }
.nv-fr span { position: absolute; left: 14px; right: 14px; top: 56%; color: #fff; font-weight: 600; font-size: 17px; line-height: 1.2; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.nv-fr u { text-decoration: none; background: #fff; color: var(--ink); padding: 0 4px; border-radius: 3px; text-shadow: none; }
.nv-prog { position: absolute; top: 10px; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.nv-prog b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

.nv-strip { display: flex; gap: 10px; padding: 12px; }
.nv-strip figure { margin: 0; width: 96px; border-radius: 10px; overflow: hidden; background: var(--paper); }
.nv-strip img { width: 96px; height: 150px; object-fit: cover; display: block; }
.nv-strip figcaption { padding: 8px 9px 9px; font: 400 11px/1.3 var(--f-mono); color: var(--muted); }
.nv-strip figcaption b { display: block; font: 600 13px/1.2 var(--f-sans); color: var(--ink); }

.nv-list { padding: 8px 18px; width: 300px; }
.nv-list li { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.nv-list li:first-child { border-top: 0; }
.nv-list b { font: 400 11px/1.9 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); font-weight: 400; }

.nv-find { width: 300px; padding: 18px 20px; }
.nv-find p { font-size: 21px; line-height: 1.22; letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px; }
.nv-find em { font-style: normal; color: var(--blue); }
.nv-find.sm { width: 290px; } .nv-find.sm p { margin: 0; }
.nv-cites { display: flex; gap: 5px; }
.nv-cites i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11px/1 var(--f-mono); }
.nv-grid { display: grid; grid-template-columns: repeat(3, 66px); gap: 6px; padding: 10px; }
.nv-grid img { width: 66px; height: 86px; object-fit: cover; border-radius: 8px; }
.nv-cmts { width: 300px; padding: 6px 16px; }
.nv-cmts p { font-size: 14.5px; line-height: 1.4; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); margin: 0; }
.nv-cmts p:first-child { border-top: 0; }
.nv-cmts b { font-weight: 600; color: var(--ink); margin-right: 4px; font-size: 13px; }
.nv-mk { color: inherit; background-color: transparent; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 62%; background-size: 0% 82%; padding: 0 2px; margin: 0 -2px; border-radius: 2px; }
.nv-search { width: 300px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
.nv-search span { grid-column: 1 / -1; font-size: 15px; font-weight: 500; color: var(--ink); }
.nv-search svg { width: 100%; height: 44px; overflow: visible; }
.nv-search path { fill: none; stroke: var(--blue-2); stroke-width: 3; stroke-linecap: round; }
.nv-search b { font: 500 20px/1 var(--f-sans); color: var(--blue); }

.nv-brand { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; width: 290px; }
.nv-brand b { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--f-serif); font-size: 24px; font-weight: 400; }
.nv-brand span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.nv-brand strong { display: block; font-size: 16px; color: var(--ink); font-weight: 600; }
.nv-dir { width: 380px; padding: 24px 24px; background: var(--ink); }
.nv-dir p { font-family: var(--f-serif); font-size: 38px; line-height: 1.04; color: #fff; margin: 0; }
.nv-dir em { color: #9cc3dc; }
.nC3 .nv-body { background: var(--ink); }
.nv-test { width: 240px; padding: 10px 14px; display: grid; gap: 8px; }
.nv-test span { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); padding: 8px 0; }
.nv-test span + span { border-top: 1px solid var(--line); }
.nv-test b { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font: 500 12px/24px var(--f-mono); text-align: center; }

.nv-cur { position: absolute; left: 0; top: 0; z-index: 9; display: flex; align-items: flex-start; }
.nv-cur svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.nv-cur path { fill: var(--blue); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.nv-cur span { margin: 16px 0 0 -4px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px 6px 6px 2px; }

/* ---------- HERO AMBIENT (prefix ab-) ---------- */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }
.hero-space { height: 230px; }
.hero-ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-ambient .am-scene { position: absolute; inset: 0; height: auto; }
.ab-card { position: absolute; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; will-change: transform, opacity, filter; }
.ab-src { position: absolute; left: 10px; top: 10px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 4px 6px; border-radius: 5px; z-index: 2; }
.ab-src.dark { color: #fff; background: rgba(18,35,46,.55); }
.ab-post { width: 158px; height: 220px; }
.ab-post img, .ab-ad img, .ab-ad2 img, .ab-frame img { width: 100%; height: 100%; object-fit: cover; }
.ab-cap { position: absolute; left: 11px; right: 11px; bottom: 16px; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.ab-cap u { text-decoration: none; background: #fff; color: var(--ink); padding: 0 3px; border-radius: 3px; text-shadow: none; }
.ab-cmt { width: 236px; padding: 36px 14px 14px; }
.ab-cmt p, .ab-search p, .ab-cult p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ab-cmt b { color: var(--ink); font-weight: 600; font-size: 12.5px; margin-right: 3px; }
.ab-cmt mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 2px; }
.ab-cult { width: 212px; padding: 36px 12px 12px; }
.ab-cult p { font-weight: 600; color: var(--ink); }
.ab-cult div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.ab-cult img { height: 58px; width: 100%; object-fit: cover; border-radius: 7px; }
.ab-ad { width: 170px; height: 214px; }
.ab-adl { position: absolute; left: 12px; bottom: 14px; font-family: var(--f-serif); font-size: 23px; line-height: 1; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.ab-search { width: 226px; padding: 36px 14px 12px; }
.ab-search p { font-weight: 500; color: var(--ink); }
.ab-search svg { width: 100%; height: 40px; margin-top: 8px; overflow: visible; }
.ab-search path { fill: none; stroke: var(--blue-2); stroke-width: 3; stroke-linecap: round; }
.ab-brand { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 11px; white-space: nowrap; }
.ab-brand b { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--f-serif); font-size: 20px; font-weight: 400; }
.ab-brand span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.ab-brand strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.ab-frame { width: 108px; height: 150px; }
.ab-ad2 { width: 128px; height: 160px; }

.ab-ask { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(720px, 90%); display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line-2); border-radius: 18px; padding: 12px 12px 12px 12px; box-shadow: var(--shadow-lift); }
.ab-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 7px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font: 500 12px/1 var(--f-mono); }
.ab-chip img { width: 19px; }
.ab-ask p { flex: 1; margin: 0; font-size: 18px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-align: left; }
.ab-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--blue-2); animation: am-blink 1s steps(2) infinite; }
.ab-send { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 19px; line-height: 38px; text-align: center; }
.ab-ans { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 15px; color: var(--ink); }
.ab-k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 5px 8px; border-radius: 6px; }

@container adl (max-width: 1180px) { .ab-frame, .ab-ad2 { display: none; } .ab-card { transform-origin: 50% 50%; } .ab-post, .ab-ad { width: 130px; height: 180px; } }
@container adl (max-width: 900px) { .ab-cmt, .ab-search, .ab-cult, .ab-brand { display: none; } .ab-post { left: 2% !important; top: 4% !important; opacity: .35; } .ab-ad { left: 78% !important; top: 4% !important; } }
@container adl (max-width: 720px) { .ab-card { display: none; } .hero-space { height: 190px; } .ab-ask { bottom: 84px; } .ab-ask p { font-size: 15px; } .ab-ans { font-size: 13px; } }
.am-static .ab-caret { display: none; }

/* ---------- PIPELINE v3 · the whole process (prefix pv-) ---------- */
.pv .am-canvas { overflow: hidden; }
.pv-steps .fx3-step { padding: 11px 0 11px 24px; }
.pv-steps .fx3-t { font-size: 19px; }
.pv-steps .fx3-b { font-size: 14px; }
.pv-s { position: absolute; inset: 0; }
.pv-k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: block; }
.pv-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); }
/* 01 */
.pv-ask { position: absolute; left: 70px; top: 190px; width: 620px; background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: 18px 22px 22px; box-shadow: var(--shadow-lift); }
.pv-ask p { margin: 10px 0 0; font-size: 27px; letter-spacing: -.02em; color: var(--ink); min-height: 1.2em; }
.pv-caret { display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.1em; background: var(--blue-2); animation: am-blink 1s steps(2) infinite; }
.pv-crit { position: absolute; left: 70px; top: 340px; width: 620px; display: flex; flex-wrap: wrap; gap: 8px; }
.pv-crit span { font-size: 14px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line-2); border-radius: 99px; padding: 8px 13px; }
/* 02 */
.pv-spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-spokes path { fill: none; stroke: #b9cdd9; stroke-width: 1.5; stroke-dasharray: 4 5; }
.pv-hub { position: absolute; left: 328px; top: 238px; width: 104px; height: 104px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lift); display: grid; place-items: center; z-index: 3; }
.pv-hub img { width: 52px; }
.pv-c { position: absolute; transform: translate(-50%, -50%); background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card); padding: 10px 14px 11px; text-align: center; z-index: 2; min-width: 128px; }
.pv-c b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.pv-c span { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 7px; }
.pv-c img { width: 18px; height: 18px; opacity: .8; }
.pv-c em { font-style: normal; font: 500 10px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--mist); padding: 4px 5px; border-radius: 4px; }
.pv-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 5px; background: var(--blue-2) center/cover; box-shadow: 0 2px 6px rgba(18,35,46,.25); z-index: 1; }
.pv-dot:nth-child(2n) { background-color: #c7dae6; border-radius: 50%; width: 12px; height: 12px; left: -6px; top: -6px; }
.pv-stats { position: absolute; left: 0; right: 0; top: 540px; display: flex; justify-content: center; gap: 36px; }
.pv-stats span { font-size: 13px; color: var(--muted); display: flex; align-items: baseline; gap: 7px; }
.pv-stats b { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
/* 03 */
.pv-wall { position: absolute; left: 58px; top: 40px; display: grid; grid-template-columns: repeat(4, 150px); gap: 12px; }
.pv-wall figure { position: relative; margin: 0; height: 146px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.pv-wall img, .pv-big img, .pv-frames img, .pv-mini img, .pv-ewall img, .pv-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-scan { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(rgba(255,228,138,0), rgba(255,228,138,.85)); box-shadow: 0 2px 10px rgba(255,228,138,.8); }
.pv-big { position: absolute; left: 60px; top: 70px; width: 250px; height: 410px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lift); }
.pv-big .pv-scan { height: 14px; }
.pv-frames { position: absolute; left: 340px; top: 200px; display: flex; gap: 10px; }
.pv-frames figure { margin: 0; width: 70px; }
.pv-frames img { height: 112px; border-radius: 9px; box-shadow: var(--shadow-card); }
.pv-frames span { display: block; margin-top: 6px; font: 400 11px/1 var(--f-mono); color: var(--muted); text-align: center; }
.pv-count { position: absolute; left: 0; right: 0; top: 548px; text-align: center; font-size: 14px; color: var(--muted); }
.pv-count b { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
/* 04 */
.pv-post { position: absolute; left: 56px; top: 70px; width: 220px; height: 390px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lift); }
.pv-post span { position: absolute; left: 14px; right: 14px; top: 58%; color: #fff; font-weight: 600; font-size: 19px; line-height: 1.2; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.pv-post u { text-decoration: none; background: #fff; color: var(--ink); padding: 0 3px; border-radius: 3px; text-shadow: none; }
.pv-labels { position: absolute; left: 306px; top: 70px; width: 410px; display: flex; flex-wrap: wrap; gap: 9px; }
.pv-labels .lb { background: var(--white); border-radius: 11px; box-shadow: var(--shadow-card); padding: 9px 12px; font-size: 14px; color: var(--ink); }
.pv-labels .lb b { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.pv-labels .lb.more { background: var(--blue-soft); color: var(--blue); font-weight: 500; align-self: center; }
.pv-mini { position: absolute; left: 74px; top: 70px; display: grid; grid-template-columns: repeat(4, 140px); gap: 14px; }
.pv-mini figure { position: relative; margin: 0; height: 200px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.pv-mini i { position: absolute; left: 8px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.pv-mini i:nth-of-type(1) { bottom: 50px; width: 70px; } .pv-mini i:nth-of-type(2) { bottom: 30px; width: 96px; } .pv-mini i:nth-of-type(3) { bottom: 10px; width: 54px; background: var(--blue-soft); }
/* 05 */
.pv-k5 { position: absolute; left: 60px; top: 66px; }
.pv-row { position: absolute; left: 60px; width: 640px; display: grid; grid-template-columns: 190px 200px 1fr; align-items: center; gap: 18px; background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 18px; }
.pv-row.r0 { top: 104px; } .pv-row.r1 { top: 200px; } .pv-row.r2 { top: 296px; } .pv-row.r3 { top: 392px; }
.pv-row .nm { font-size: 17px; font-weight: 500; color: var(--ink); }
.pv-row .bar { height: 10px; border-radius: 5px; background: var(--mist); overflow: hidden; }
.pv-row .bar b { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--blue-2); border-radius: 5px; transform-origin: 0 50%; }
.pv-row .tg { justify-self: start; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
.tg.up { color: var(--pick); background: var(--pick-soft); } .tg.over { color: var(--alert); background: #f8e7df; } .tg.rise { color: var(--blue); background: var(--blue-soft); } .tg.fade { color: var(--muted); background: var(--mist); }
.pv-chips i { position: absolute; left: 0; top: 0; width: 44px; height: 14px; border-radius: 5px; background: var(--white); box-shadow: 0 1px 5px rgba(18,35,46,.22); border-left: 3px solid var(--blue-2); z-index: 4; }
/* 06 */
.pv-k6 { position: absolute; left: 60px; top: 52px; right: 60px; font-size: 11.5px; }
.pv-ewall { position: absolute; left: 60px; top: 86px; display: grid; grid-template-columns: repeat(6, 98px); gap: 10px; }
.pv-ewall figure { position: relative; margin: 0; height: 128px; border-radius: 10px; overflow: visible; }
.pv-ewall img { border-radius: 10px; }
.pv-ewall b { position: absolute; right: -7px; top: -7px; width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: #fff; font: 500 12px/24px var(--f-mono); text-align: center; }
.pv-ewall b:empty { display: none; }
.pv-quote { position: absolute; left: 60px; top: 380px; width: 640px; background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card); padding: 16px 18px; }
.pv-quote p { margin: 8px 0 0; font-size: 19px; color: var(--ink-2); }
.pv-quote mark { color: inherit; background-color: transparent; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 62%; background-size: 0% 82%; padding: 0 2px; }
.pv-c6 { top: 520px; }
/* 07 */
.pv-out { position: absolute; top: 130px; width: 214px; min-height: 270px; background: var(--white); border-radius: 18px; box-shadow: var(--shadow-lift); padding: 18px; }
.pv-out.o0 { left: 46px; } .pv-out.o1 { left: 274px; } .pv-out.o2 { left: 502px; }
.pv-out h4 { font-family: var(--f-serif); font-weight: 400; font-size: 40px; line-height: 1; margin: 14px 0 8px; color: var(--ink); }
.pv-out p { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 0 0 10px; }
.pv-out ul { margin-top: 12px; display: grid; gap: 8px; }
.pv-out li { font-size: 14px; line-height: 1.35; color: var(--ink); background: var(--paper); border-radius: 9px; padding: 9px 10px; }
.pv-out.o2 p { display: flex; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; font-size: 15px; color: var(--ink); }
.pv-out.o2 .pv-k { margin-bottom: 8px; }
.pv-out.o2 b { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font: 500 12px/24px var(--f-mono); text-align: center; }
.pv-ev { display: flex; gap: 5px; }
.pv-ev i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11px/22px var(--f-mono); text-align: center; }
.pv-cur { position: absolute; left: 0; top: 0; z-index: 9; display: flex; align-items: flex-start; }
.pv-cur svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.pv-cur path { fill: var(--blue); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.pv-cur span { margin: 16px 0 0 -4px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px 6px 6px 2px; }
.am-static .pv-caret { display: none; }

/* ---------- SIMPLE HERO · the refinery strip (prefix fl-) ---------- */
.hero-flow { margin-top: 64px; }
.fl-stage { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.fl .am-canvas { overflow: hidden; }
.fl-svg { position: absolute; inset: 0; width: 1136px; height: 420px; }
.fl-p { fill: none; stroke: #b9cdd9; stroke-width: 1.6; stroke-linecap: round; }
.fl-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 0 4px rgba(74,131,166,.18); z-index: 3; }
.fl-k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: block; }
.fl-ask { position: absolute; left: 248px; top: 34px; width: 640px; display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 16px; padding: 10px 14px 10px 10px; text-align: left; }
.fl-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 7px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font: 500 11.5px/1 var(--f-mono); }
.fl-chip img { width: 18px; }
.fl-ask p { margin: 0; font-size: 18px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.fl-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--blue-2); animation: am-blink 1s steps(2) infinite; }
.fl-c { position: absolute; left: 40px; width: 186px; height: 38px; display: flex; align-items: center; gap: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; box-shadow: var(--shadow-card); }
.fl-c img { width: 16px; height: 16px; opacity: .75; }
.fl-c b { font-size: 14.5px; font-weight: 500; color: var(--ink); flex: 1; text-align: left; }
.fl-c em { font-style: normal; font: 500 11px/1 var(--f-mono); color: var(--blue); }
.fl-pipe { position: absolute; left: 312px; top: 160px; width: 176px; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 14px 10px; box-shadow: var(--shadow-lift); text-align: left; z-index: 2; }
.fl-pipe ul { margin: 10px 0 0; padding: 0; list-style: none; }
.fl-pipe li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.3; color: var(--ink-2); padding: 7px 0; border-top: 1px solid var(--line); }
.fl-pipe li:first-child { border-top: 0; }
.fl-pipe li i { flex: none; font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: var(--pick); color: #fff; font-size: 10px; line-height: 16px; text-align: center; margin-top: 1px; }
.fl-pipe b { color: var(--ink); font-weight: 600; }
.fl-ins { position: absolute; left: 534px; top: 186px; width: 202px; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-lift); text-align: left; z-index: 2; }
.fl-tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--pick); background: var(--pick-soft); border-radius: 99px; padding: 4px 9px; }
.fl-ins p { margin: 9px 0 10px; font-size: 18px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.fl-bar { display: block; height: 8px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.fl-bar b { display: block; width: 86%; height: 100%; background: var(--blue-2); border-radius: 4px; transform-origin: 0 50%; }
.fl-ins small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.fl-brief { position: absolute; left: 782px; top: 180px; width: 176px; background: var(--ink); border-radius: 16px; padding: 15px 15px 14px; box-shadow: var(--shadow-lift); text-align: left; z-index: 2; }
.fl-brief .fl-k { color: #8fb3d1; }
.fl-brief h4 { font-family: var(--f-serif); font-weight: 400; font-size: 34px; line-height: 1; color: #fff; margin: 10px 0 12px; }
.fl-brief small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--night-text); }
.fl-brief small i { font-style: normal; width: 19px; height: 19px; border-radius: 5px; background: #fff; color: var(--ink); font: 500 10px/19px var(--f-mono); text-align: center; }
.fl-out { position: absolute; left: 1002px; width: 100px; height: 36px; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; font-size: 13.5px; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-card); z-index: 2; }
.fl-out.o0 { top: 178px; } .fl-out.o1 { top: 230px; } .fl-out.o2 { top: 282px; }
.fl-out i { width: 14px; height: 14px; border-radius: 4px; }
.fl-out .sl { background: conic-gradient(#e01e5a 0 25%, #36c5f0 0 50%, #2eb67d 0 75%, #ecb22e 0); border-radius: 4px; }
.fl-out .em { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.fl-out .cl { background: #d97757; border-radius: 50%; }
.fl-lab { position: absolute; top: 386px; transform: translateX(-50%); font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.am-static .fl-caret { display: none; }
@container adl (max-width: 720px) { .hero-flow { margin-top: 40px; } }

/* css/site-v2.css */
/* Website V2 additions (Oct 19 feedback). Loaded after site-f.css; V1 does not load this file. */

/* Hero tagline: larger, close to the lede size */
.v2 .hero .v2-tagline { font: 500 clamp(17px, 1.6cqw, 21px)/1.3 var(--f-sans); letter-spacing: -.005em; text-transform: none; color: var(--blue); }
.v2 .hero .v2-tagline::before { width: 8px; height: 8px; }

.v2-sub-c { margin-left: auto !important; margin-right: auto !important; }
.draft-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Under the hood ---------- */
.v2-engine { margin-top: 44px; border-radius: 26px; padding: 18px; background: radial-gradient(70% 90% at 15% 0%, rgba(174,207,226,.4), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(200,226,214,.45), transparent 70%), #eef3f4; }
.mk-engine .eg-post { position: absolute; left: 20px; top: 95px; width: 112px; height: 190px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lift); background: #0d1a22; }
.mk-engine .eg-post img { width: 100%; height: 100%; object-fit: cover; }
.mk-engine .eg-post span { position: absolute; left: 8px; bottom: 8px; font: 500 10px/1 var(--f-mono); color: #fff; background: rgba(18,35,46,.65); padding: 4px 6px; border-radius: 4px; }
.mk-engine .eg-wire { position: absolute; inset: 0; width: 1120px; height: 380px; }
.eg-p { fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-dasharray: 4 6; opacity: .7; }
.mk-engine .eg-dot { position: absolute; left: -6px; top: 184px; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 4px rgba(255,228,138,.35), 0 0 18px rgba(255,228,138,.9); }
.mk-engine .eg-st { position: absolute; left: var(--x); top: 70px; width: 142px; min-height: 240px; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 14px 16px; box-shadow: var(--shadow-card); }
.eg-st .n { font: 500 11px/1 var(--f-mono); color: var(--blue); }
.eg-st b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 10px 0 10px; }
.eg-st em { display: inline-block; font: normal 500 11px/1.35 var(--f-mono); color: var(--ink); padding: 4px 6px; border-radius: 5px; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-size: 0% 100%; background-color: var(--blue-ghost); }
.eg-st p { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mk-engine .eg-out { position: absolute; left: 984px; top: 120px; width: 120px; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow-lift); }
.eg-out .k { font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #9db3c0; }
.eg-out b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 26px; margin: 10px 0 6px; }
.eg-out .mk-sk { background: rgba(255,255,255,.25); }
.eg-out small { display: flex; gap: 4px; margin-top: 10px; }
.eg-out small i, .m2-out small i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #fff; color: var(--ink); font: 500 10px/1 var(--f-mono); }
/* phone composition: the five steps stack vertically */
.mk-engine.am-m .eg-wire, .mk-engine.am-m .eg-dot { display: none; }
.mk-engine.am-m .eg-post { left: 124px; top: 10px; width: 112px; height: 120px; }
.mk-engine.am-m .eg-st { left: 20px !important; top: calc(150px + var(--i, 0) * 0px); width: 320px; min-height: 0; padding: 10px 14px; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; }
.mk-engine.am-m .eg-st .n { grid-row: span 3; padding-top: 3px; }
.mk-engine.am-m .eg-st b { margin: 0 0 6px; font-size: 16px; }
.mk-engine.am-m .eg-st p { margin-top: 6px; font-size: 12.5px; }
.mk-engine.am-m .s0 { top: 146px; } .mk-engine.am-m .s1 { top: 262px; } .mk-engine.am-m .s2 { top: 378px; } .mk-engine.am-m .s3 { top: 494px; } .mk-engine.am-m .s4 { top: 610px; }
.mk-engine.am-m .eg-st { min-height: 96px; }
.mk-engine.am-m .eg-out { left: 20px; top: 728px; width: 320px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.mk-engine.am-m .eg-out b { margin: 0; font-size: 20px; }
.mk-engine.am-m .eg-out .mk-sk { display: none; }
.mk-engine.am-m .eg-out small { margin: 0 0 0 auto; }

.v2-ip { list-style: none; margin: 22px 0 46px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v2-ip li { border-top: 2px solid var(--ink); padding-top: 14px; }
.v2-ip b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.v2-ip span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@container adl (max-width: 900px) { .v2-ip { grid-template-columns: 1fr 1fr; } }
@container adl (max-width: 560px) { .v2-ip { grid-template-columns: 1fr; } }

/* ---------- Who it's for ---------- */
.v2-cred { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; }
.v2-cred-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pick); box-shadow: 0 0 0 3px var(--pick-soft); }
#who .f-sub { margin-top: 14px; }

/* ---------- Proof ---------- */
.v2-proof { grid-template-columns: 1fr 1fr 1.4fr; }
.v2-stat .stat { font-size: 96px; color: var(--blue); }
.v2-stat .lbl { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
@container adl (max-width: 900px) { .v2-proof { grid-template-columns: 1fr; } }

/* ---------- 03 · video read ---------- */
.mk-phone.v2 video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-live { position: absolute; left: 8px; bottom: 8px; font: 500 9.5px/1 var(--f-mono); color: #fff; background: rgba(181,83,47,.85); padding: 4px 6px; border-radius: 4px; letter-spacing: .04em; }
.mk-read2 .v2-keys { position: absolute; left: 214px; top: 28px; display: flex; gap: 8px; }
.v2-keys figure { margin: 0; width: 66px; background: var(--white); border-radius: 10px; padding: 4px; box-shadow: 0 1px 3px rgba(18,35,46,.1); }
.v2-keys img { width: 58px; height: 80px; object-fit: cover; border-radius: 7px; display: block; }
.v2-keys figcaption { padding: 5px 1px 1px; }
.v2-keys b { display: block; font: 500 9px/1.2 var(--f-mono); color: var(--blue); letter-spacing: .02em; }
.v2-keys span { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-2); margin-top: 3px; }
.mk-read2 .mk-lbs.sm.v2 { top: 196px; }

/* ---------- 05 · know what to make next ---------- */
.v2-makesec .f-eyebrow .n { display: inline-block; margin-right: 6px; }
.v2-makevis { width: 100%; margin: 44px auto 0; max-width: 1180px; border-radius: 26px; padding: 18px; background: radial-gradient(70% 90% at 20% 0%, rgba(174,207,226,.45), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(200,226,214,.5), transparent 70%), #eef3f4; text-align: left; }
.mk-make2 .k { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.mk-make2 .m2-sigs { position: absolute; left: 360px; top: 120px; width: 400px; transform-origin: 0 50%; }
.m2-sig { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; font-size: 17px; box-shadow: var(--shadow-card); }
.m2-sig i { width: 9px; height: 9px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 3px #fff3c4; flex: none; }
.m2-sig b { font-weight: 600; }
.mk-make2 .m2-dirs { position: absolute; left: 460px; top: 90px; width: 420px; transform-origin: 0 50%; }
.m2-dir { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--line-2); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-lift); }
.m2-dir b { font: 500 13px/1 var(--f-mono); color: var(--blue); }
.m2-dir p { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.m2-dir span { font-size: 11.5px; font-weight: 600; color: var(--pick); background: var(--pick-soft); padding: 4px 9px; border-radius: 99px; }
.mk-make2 .m2-outs { position: absolute; left: 330px; top: 70px; display: flex; gap: 14px; transform-origin: 0 50%; }
.m2-out { width: 176px; background: var(--white); border-radius: 18px; padding: 16px 16px 14px; box-shadow: var(--shadow-lift); border-top: 4px solid var(--blue-2); }
.m2-out.o0 { border-top-color: var(--ink); } .m2-out.o2 { border-top-color: var(--pick); } .m2-out.o3 { border-top-color: var(--mark); }
.m2-out h4 { font-family: var(--f-serif); font-weight: 400; font-size: 26px; line-height: 1.02; margin: 0 0 12px; }
.m2-out ul { list-style: none; margin: 0; padding: 0; }
.m2-out li { font-size: 13px; line-height: 1.35; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.m2-out small { display: flex; align-items: center; gap: 4px; margin-top: 12px; font: 500 10px/1 var(--f-mono); color: var(--muted); }
.m2-out small i { background: var(--ink); color: #fff; }
.mk-make2 .m2-vol { position: absolute; left: 640px; top: 56px; width: 450px; background: var(--white); border-radius: 22px; padding: 20px 22px; box-shadow: var(--shadow-lift); }
.m2-tabs { display: flex; gap: 6px; background: var(--mist); padding: 4px; border-radius: 99px; }
.m2-tabs span { flex: 1; text-align: center; font-size: 12.5px; font-weight: 500; padding: 8px 6px; border-radius: 99px; color: var(--muted); }
.m2-rate { position: relative; height: 44px; margin: 16px 0 12px; }
.m2-rate b { position: absolute; left: 0; top: 0; font-size: 30px; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }
.m2-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.m2-grid i { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(160deg, var(--blue-2), var(--blue)); }
.m2-grid i:nth-child(3n) { background: linear-gradient(160deg, #3d8a68, var(--pick)); }
.m2-grid i:nth-child(4n) { background: linear-gradient(160deg, #2d4757, var(--ink)); }
.m2-note { display: block; margin-top: 12px; font: 400 10.5px/1.3 var(--f-mono); color: var(--faint); }
/* phone composition: one group at a time, stacked in the same spot */
.mk-make2.am-m .m2-sigs, .mk-make2.am-m .m2-dirs { left: 20px; top: 70px; width: 320px; }
.mk-make2.am-m .m2-sig { font-size: 15px; }
.mk-make2.am-m .m2-dir p { font-size: 16px; }
.mk-make2.am-m .m2-outs { left: 20px; top: 40px; width: 320px; flex-wrap: wrap; gap: 10px; }
.mk-make2.am-m .m2-out { width: 155px; padding: 12px; }
.mk-make2.am-m .m2-out h4 { font-size: 20px; }
.mk-make2.am-m .m2-out li { font-size: 11.5px; }
.mk-make2.am-m .m2-vol { left: 14px; top: 90px; width: 332px; padding: 16px; }
.mk-make2.am-m .m2-tabs span { font-size: 10.5px; padding: 7px 3px; }
.mk-make2.am-m .m2-rate b { font-size: 24px; }

.v2-deliver { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }
.v2-ctaband { margin: 46px auto 0; max-width: 1000px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: center; text-align: left; background: var(--ink); color: #fff; border-radius: 24px; padding: 28px 30px; }
.v2-ctaband h3 { font-size: 28px; letter-spacing: -.025em; font-weight: 400; margin: 0 0 8px; }
.v2-ctaband p { margin: 0; color: var(--night-text); font-size: 15.5px; line-height: 1.5; }
.v2-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.v2-form label { display: grid; gap: 6px; }
.v2-form label span { font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: #8fa9b8; }
.v2-form input { font: inherit; font-size: 15px; padding: 13px 14px; border-radius: 10px; border: 1px solid #35566b; background: var(--night-2); color: #fff; min-width: 0; }
.v2-form input::placeholder { color: #6f8a99; }
.v2-form input:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 1px; }
.v2-form .btn { background: #fff; color: var(--ink); border-color: #fff; white-space: nowrap; }
.v2-form .btn:hover { background: var(--mark); border-color: var(--mark); }
@container adl (max-width: 900px) { .v2-ctaband { grid-template-columns: 1fr; } .v2-form { grid-template-columns: 1fr; } .v2-form .btn { justify-content: center; } }

/* ---------- What changes: win / run / grow ---------- */
.v2-biz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.v2-biz article { display: flex; flex-direction: column; }
.v2-biz .n { font: 500 12px/1 var(--f-mono); color: var(--blue); }
.v2-biz h3 { font-size: 30px; letter-spacing: -.03em; font-weight: 400; margin: 12px 0 10px; }
.v2-biz .q { font-family: var(--f-serif); font-style: italic; font-size: 20px; line-height: 1.2; color: var(--blue); margin: 0 0 12px; }
.v2-biz p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.v2-biz .deliverables { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.v2-biz .deliverables li { font-size: 12px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); padding: 5px 9px; border-radius: 99px; }
.v2-biz .am-host { margin-top: auto; }
@container adl (max-width: 980px) { .v2-biz { grid-template-columns: 1fr; gap: 56px; max-width: 620px; } }

/* ---------- Adology Consulting Services ---------- */
.v2-acs { margin-top: 30px; display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: center; border: 1px solid var(--line-2); background: linear-gradient(180deg, #f6f9fa, #fff); border-radius: 22px; padding: 24px 26px; }
.v2-acs .k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.v2-acs h3 { font-size: 24px; letter-spacing: -.02em; font-weight: 500; margin: 8px 0 6px; }
.v2-acs-h p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.v2-acs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v2-acs li { font-size: 13.5px; line-height: 1.45; color: var(--muted); border-left: 2px solid var(--blue-2); padding-left: 12px; }
.v2-acs li b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
@container adl (max-width: 980px) { .v2-acs { grid-template-columns: 1fr; } .v2-acs ul { grid-template-columns: 1fr 1fr; } }
@container adl (max-width: 520px) { .v2-acs ul { grid-template-columns: 1fr; } }

/* ---------- Set up in one minute ---------- */
.v2-setupvis { width: 100%; margin: 44px auto 0; max-width: 1080px; border-radius: 26px; padding: 16px; background: radial-gradient(60% 90% at 50% 50%, rgba(174,207,226,.5), transparent 70%), #eef3f4; }
.mk-setup .su-url { position: absolute; left: 230px; top: 140px; width: 540px; background: var(--white); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lift); text-align: left; }
.su-url .k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.su-url p { margin: 8px 0 12px; font-size: 26px; letter-spacing: -.015em; min-height: 1.2em; }
.su-url .mk-caret { display: inline-block; }
.su-go { display: inline-block; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 10px; }
.mk-setup .su-svg { position: absolute; inset: 0; width: 1000px; height: 400px; }
.su-l { fill: none; stroke: var(--blue-2); stroke-width: 1.5; opacity: .6; }
.mk-setup .su-hub { position: absolute; left: 500px; top: 200px; transform: translate(-50%, -50%); width: 128px; height: 128px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; }
.su-hub b { font: italic 400 34px/1 var(--f-serif); }
.su-hub span { font-size: 10.5px; color: #b7c8d2; }
.mk-setup .su-n { position: absolute; transform: translate(-50%, -50%); background: var(--white); border-radius: 99px; box-shadow: var(--shadow-card); white-space: nowrap; }
.su-n em { display: block; font-style: normal; font-size: 13px; font-weight: 500; padding: 8px 12px; }
.su-c em::before { content: "◆ "; color: var(--blue-2); }
.su-s em { color: var(--ink-2); }
.su-r em::before { content: "● "; color: #d97757; }
.su-p { padding: 3px; }
.su-p img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.mk-setup .su-tag { position: absolute; transform: translate(-50%, -50%); font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.mk-setup .su-clock { position: absolute; right: 24px; top: 20px; background: var(--white); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow-card); display: flex; align-items: baseline; gap: 8px; }
.su-clock b { font: 500 20px/1 var(--f-mono); }
.su-clock span { font-size: 11px; color: var(--pick); }
.su-clock span::before { content: "● "; }
/* phone composition */
.mk-setup.am-m .su-svg, .mk-setup.am-m .su-tag { display: none; }
.mk-setup.am-m .su-url { left: 16px; top: 200px; width: 328px; }
.mk-setup.am-m .su-url p { font-size: 20px; }
.mk-setup.am-m .su-hub { left: 180px; top: 280px; width: 104px; height: 104px; }
.mk-setup.am-m .su-n:nth-of-type(1) { left: 70px !important; top: 120px !important; } .mk-setup.am-m .su-n:nth-of-type(2) { left: 180px !important; top: 90px !important; } .mk-setup.am-m .su-n:nth-of-type(3) { left: 290px !important; top: 120px !important; }
.mk-setup.am-m .su-n:nth-of-type(4) { left: 60px !important; top: 210px !important; } .mk-setup.am-m .su-n:nth-of-type(5) { left: 300px !important; top: 210px !important; } .mk-setup.am-m .su-n:nth-of-type(6) { left: 60px !important; top: 350px !important; }
.mk-setup.am-m .su-n:nth-of-type(7) { left: 180px !important; top: 430px !important; } .mk-setup.am-m .su-n:nth-of-type(8) { left: 120px !important; top: 480px !important; } .mk-setup.am-m .su-n:nth-of-type(9) { left: 250px !important; top: 380px !important; } .mk-setup.am-m .su-n:nth-of-type(10) { left: 300px !important; top: 350px !important; }
.mk-setup.am-m .su-n em { font-size: 11px; padding: 6px 9px; }
.mk-setup.am-m .su-clock { right: 14px; top: 14px; }
.v2-vidph { display: inline-block; margin-top: 18px; }
#setup .actions { margin-top: 26px; }

/* ---------- Closing CTA: make → do ---------- */
.v2-word { display: inline-flex; align-items: baseline; white-space: nowrap; }
.v2-make, .v2-do { display: inline-block; overflow: hidden; vertical-align: bottom; }
.v2-make { position: relative; max-width: 3.4em; transition: max-width 650ms var(--ease-in-out) 150ms, opacity 400ms 150ms; }
.v2-make::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; background: var(--alert); border-radius: 99px; transform: scaleX(0) rotate(-3deg); transform-origin: 0 50%; transition: transform 450ms var(--ease-out); }
.v2-do { max-width: 0; opacity: 0; color: var(--blue); font-family: var(--f-serif); font-style: italic; transition: max-width 650ms var(--ease-in-out), opacity 500ms 200ms; }
.v2-swap.is-struck .v2-make::after { transform: scaleX(1) rotate(-3deg); }
.v2-swap.is-swapped .v2-make { max-width: 0; opacity: 0; }
.v2-swap.is-swapped .v2-do { max-width: 2em; opacity: 1; }
.v2-swap.is-static .v2-make { max-width: 3.4em; opacity: .45; margin-right: .2em; }
.v2-swap.is-static .v2-make::after { transform: scaleX(1) rotate(-3deg); transition: none; }
.v2-swap.is-static .v2-do { transition: none; }

/* Who: 2 × 2, the V1 card sizing */
.v2 #who .f-who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.v2 #who .f-persona2 { padding: 16px 16px 26px; }
.v2 #who .f-persona2 .f-pvis { margin-bottom: 20px; }
.v2 #who .f-persona2, .v2 #who .f-persona2:nth-child(n) { grid-column: auto !important; }
.v2 #who .f-persona2 h3, .v2 #who .f-persona2:nth-child(n) h3 { font-size: 30px; }
.v2 #who .f-persona2 .k, .v2 #who .f-persona2:nth-child(n) .k { font-size: 17px; }
.v2 #who .f-persona2 p { font-size: 15.5px; max-width: 460px; }
@container adl (max-width: 760px) { .v2 #who .f-who { grid-template-columns: 1fr; } .v2 #who .f-persona2 h3 { font-size: 26px; } }

/* Full-width intro paragraphs */
.v2 .f-sub.v2-full { max-width: none; }

/* 01 · Ask: real values in the criteria pills */
.mk-pill .v2-val { font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 6px; display: block; }

/* 01 · Ask pills: one compact line each, all four in a row */
.mk-ask .mk-crit { width: 460px; gap: 6px; flex-wrap: nowrap; }
.mk-ask .mk-pill { padding: 7px 10px; gap: 6px; align-items: baseline; white-space: nowrap; }
.mk-ask .mk-pill b { font: 500 9px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-ask .mk-pill .v2-val { display: inline; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1; }

/* Setup headline highlight */
.v2-hl { background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-size: 100% 32%; background-position: 0 88%; padding: 0 .06em; }

/* ---------- Set up in five minutes (v2-setup) ---------- */
.mk-setup2 .k { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mk-setup2 .s2-clock { position: absolute; right: 22px; top: 18px; display: flex; align-items: baseline; gap: 8px; background: var(--white); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow-card); }
.s2-clock span { font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.s2-clock b { font: 500 20px/1 var(--f-mono); color: var(--ink); }
.mk-setup2 .s2-url { position: absolute; left: 240px; top: 150px; width: 520px; background: var(--white); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lift); text-align: left; transform-origin: 0 0; }
.s2-url p { margin: 8px 0 12px; font-size: 26px; letter-spacing: -.015em; min-height: 1.2em; }
.s2-url .mk-caret { display: inline-block; }
.s2-go { display: inline-block; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 10px; }
.mk-setup2 .s2-find { position: absolute; left: 150px; top: 62px; width: 400px; background: var(--white); border-radius: 18px; padding: 16px 18px 10px; box-shadow: var(--shadow-lift); text-align: left; }
.s2-find ul { list-style: none; margin: 10px 0 0; padding: 0; }
.s2-find li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.s2-find li:first-child { border-top: 0; }
.s2-find li b { font-weight: 600; }
.s2-find li span { color: var(--muted); font-size: 13px; }
.s2-find li em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--pick); background: var(--pick-soft); padding: 3px 8px; border-radius: 99px; }
.s2-ck { width: 18px; height: 18px; border-radius: 50%; background: var(--line-2); position: relative; }
.s2-ck::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-style: normal; }
.mk-setup2 .s2-prog { position: absolute; left: 590px; top: 150px; width: 280px; display: grid; gap: 14px; text-align: left; }
.s2-prog .pr { background: var(--white); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.s2-prog span { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.s2-prog b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 8px 0 10px; }
.s2-prog em { font-style: normal; font-variant-numeric: tabular-nums; }
.s2-prog i { display: block; height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.s2-prog u { display: block; height: 100%; background: var(--blue-2); transform-origin: 0 50%; text-decoration: none; }
.s2-prog .p1 u { background: var(--pick); }
.mk-setup2 .s2-lib { position: absolute; left: 60px; top: 60px; width: 620px; background: var(--white); border-radius: 18px; padding: 14px 16px 16px; box-shadow: var(--shadow-lift); text-align: left; }
.s2-libh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.s2-libh b { font-size: 16px; font-weight: 600; }
.s2-libh span { font: 400 11px/1 var(--f-mono); color: var(--muted); }
.s2-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.s2-grid figure { margin: 0; aspect-ratio: 9 / 13; border-radius: 8px; overflow: hidden; background: var(--mist); }
.s2-grid img { width: 100%; height: 100%; object-fit: cover; }
.mk-setup2 .s2-alert { position: absolute; left: 650px; top: 190px; width: 310px; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 24px 50px -20px rgba(18,35,46,.6); text-align: left; }
.s2-bell { color: var(--mark); font-size: 16px; display: inline-block; }
.s2-alert b { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #9db3c0; }
.s2-alert p { margin: 6px 0 0; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.s2-view { font-size: 12.5px; font-weight: 600; color: var(--mark); }
/* phone composition */
.mk-setup2.am-m .s2-url { left: 16px; top: 220px; width: 328px; }
.mk-setup2.am-m .s2-url p { font-size: 21px; }
.mk-setup2.am-m .s2-find { left: 16px; top: 60px; width: 328px; padding: 14px 14px 8px; }
.mk-setup2.am-m .s2-find li { font-size: 13px; grid-template-columns: 20px 1fr auto; }
.mk-setup2.am-m .s2-find li span { display: none; }
.mk-setup2.am-m .s2-prog { left: 16px; top: 440px; width: 328px; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-setup2.am-m .s2-prog .pr { padding: 10px 12px; }
.mk-setup2.am-m .s2-prog b { font-size: 17px; }
.mk-setup2.am-m .s2-lib { left: 16px; top: 60px; width: 328px; padding: 12px; }
.mk-setup2.am-m .s2-grid { grid-template-columns: repeat(4, 1fr); }
.mk-setup2.am-m .s2-alert { left: 16px; top: 470px; width: 328px; }
.mk-setup2.am-m .s2-clock { right: 14px; top: 12px; }

/* ---------- Under the hood: Generic AI vs Adology (replaces engine + list + tabs) ---------- */
.vs { margin-top: 40px; display: grid; grid-template-columns: 180px 1fr 1fr; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(90deg, transparent 0 calc(180px + (100% - 180px) / 2), var(--white) 0); background-color: #f6f8f8; overflow: hidden; box-shadow: var(--shadow-card); }
.vs > div:not(.vs-ask) { display: contents; }
.vs-head > span, .vs-ask, .vs-row > * { padding: 18px 24px; border-top: 1px solid var(--line); }
.vs-head > span { border-top: 0; display: flex; align-items: center; min-height: 64px; }
.vs-head .vs-g { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vs-head .vs-a img { height: 22px; width: auto; }
.vs-ask { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; background: var(--ink); color: #fff; border-top: 0; }
.vs-ask .k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #9db3c0; min-width: 132px; }
.vs-ask p { margin: 0; font-size: 22px; letter-spacing: -.015em; }
.vs-row > b { font: 500 11px/1.4 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; }
.vs-row .vs-g, .vs-row .vs-a { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.45; }
.vs-row .vs-g { color: var(--muted); }
.vs-row .vs-a { color: var(--ink); font-weight: 500; }
.vs-row i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; margin-top: 1px; }
.vs-row i.no { background: #e9eded; color: var(--faint); }
.vs-row i.yes { background: var(--pick); color: #fff; }
.vs-ans .vs-g, .vs-ans .vs-a { flex-direction: column; gap: 12px; }
.vs-quote { margin: 0; font-family: var(--f-serif); font-size: 23px; line-height: 1.2; font-weight: 400; }
.vs-ans .vs-g .vs-quote { color: var(--faint); }
.vs-quote mark { background: var(--mark); color: inherit; padding: 0 .1em; border-radius: 3px; }
.vs-ev { display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--f-mono); color: var(--muted); }
.vs-th { display: flex; }
.vs-th img { width: 34px; height: 44px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; margin-right: -8px; box-shadow: 0 2px 6px rgba(18,35,46,.18); }
/* reveal: rows land one by one; the Adology column lifts last */
.vs .vs-row > * { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms); }
.vs:not(.is-in) .vs-row > * { opacity: 0; transform: translateY(10px); }
.vs:not(.is-in) .vs-row .vs-a { transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .vs .vs-row > * { transition: none; opacity: 1 !important; transform: none !important; } }
@container adl (max-width: 820px) {
  .vs { grid-template-columns: 1fr 1fr; background: #f6f8f8; }
  .vs-head > span:first-child { display: none; }
  .vs-row > b { grid-column: 1 / -1; padding-bottom: 0; border-top: 1px solid var(--line); }
  .vs-row .vs-g, .vs-row .vs-a { border-top: 0; font-size: 14.5px; padding-top: 10px; }
  .vs-row .vs-a { background: var(--white); }
  .vs-head .vs-a { background: var(--white); }
  .vs-ask { flex-direction: column; gap: 8px; }
  .vs-ask p { font-size: 19px; }
  .vs-quote { font-size: 18px; }
  .vs-head > span, .vs-ask, .vs-row > * { padding-left: 16px; padding-right: 16px; }
}
.vs-th { padding-right: 8px; }
.vs-ev { flex-wrap: wrap; }

/* ---------- Under the hood: the creative intelligence engine (v2-engine2) ---------- */
.mk-eng2 .k, .mk-eng2 .e2-lab { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mk-eng2 .e2-q { position: absolute; left: 40px; top: 26px; width: 420px; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 18px; }
.e2-q .k { color: #9db3c0; }
.e2-q p { margin: 8px 0 0; font-size: 21px; letter-spacing: -.015em; }
.mk-eng2 .e2-gen { position: absolute; left: 500px; top: 34px; width: 580px; display: flex; align-items: center; gap: 12px; }
.e2-gen .e2-lab { width: 90px; }
.e2-gnode { background: var(--white); border: 1px solid var(--line-2); border-radius: 99px; padding: 9px 14px; font-size: 14px; white-space: nowrap; }
.e2-garrow { width: 34px; height: 2px; background: var(--line-2); position: relative; }
.e2-garrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--line-2); border-right: 0; }
.e2-gans { font-family: var(--f-serif); font-size: 19px; color: var(--muted); }
.mk-eng2 .e2-alab { position: absolute; left: 40px; top: 172px; display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 11px; }
.e2-alab img { width: 18px; }
.mk-eng2 .e2-svg { position: absolute; inset: 0; width: 1120px; height: 470px; }
.e2-path { fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-dasharray: 4 6; opacity: .65; }
.mk-eng2 .e2-dot { position: absolute; left: -6px; top: 294px; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 4px rgba(255,228,138,.35), 0 0 18px rgba(255,228,138,.9); }
.mk-eng2 .e2-hop { position: absolute; left: var(--x); top: 206px; width: 134px; min-height: 186px; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; padding: 13px 13px 14px; box-shadow: var(--shadow-card); }
.e2-hop .n { font: 500 10.5px/1 var(--f-mono); color: var(--blue); }
.e2-hop b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; margin: 9px 0 5px; line-height: 1.2; }
.e2-hop small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); min-height: 34px; }
.e2-hop em { display: block; margin-top: 12px; font: normal 500 11px/1.3 var(--f-mono); color: var(--ink); background: var(--blue-ghost); border-radius: 6px; padding: 5px 7px; }
.e2-hop u { text-decoration: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-eng2 .e2-out { position: absolute; left: 936px; top: 206px; width: 164px; min-height: 186px; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow-lift); }
.e2-out .k { color: #9db3c0; }
.e2-out p { margin: 10px 0 12px; font-family: var(--f-serif); font-size: 22px; line-height: 1.08; }
.e2-mult { display: inline-block; font: 500 11px/1 var(--f-mono); color: var(--ink); padding: 5px 7px; border-radius: 5px; background-color: rgba(255,255,255,.85); background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-size: 0% 100%; }
.e2-ev { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 400 10.5px/1.2 var(--f-mono); color: #b7c8d2; flex-wrap: wrap; }
.e2-ev .vs-th img { width: 24px; height: 32px; border-color: var(--ink); }
/* phone composition: generic lane on top, the path runs down */
.mk-eng2.am-m .e2-q { left: 16px; top: 14px; width: 328px; }
.mk-eng2.am-m .e2-q p { font-size: 18px; }
.mk-eng2.am-m .e2-gen { left: 16px; top: 118px; width: 328px; flex-wrap: wrap; gap: 8px; }
.mk-eng2.am-m .e2-gen .e2-lab { width: 100%; }
.mk-eng2.am-m .e2-gans { font-size: 16px; width: 100%; }
.mk-eng2.am-m .e2-svg, .mk-eng2.am-m .e2-dot, .mk-eng2.am-m .e2-garrow { display: none; }
.mk-eng2.am-m .e2-alab { left: 16px; top: 238px; }
.mk-eng2.am-m .e2-hop { left: 16px !important; width: 328px; min-height: 0; display: grid; grid-template-columns: 26px 1fr auto; column-gap: 8px; align-items: center; padding: 10px 12px; }
.mk-eng2.am-m .e2-hop .n { grid-row: span 2; }
.mk-eng2.am-m .e2-hop b { margin: 0; font-size: 14px; }
.mk-eng2.am-m .e2-hop small { grid-column: 2; min-height: 0; font-size: 11.5px; }
.mk-eng2.am-m .e2-hop em { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 10px; text-align: right; }
.mk-eng2.am-m .e2-hop u { display: block; font-size: 14px; }
.mk-eng2.am-m .h0 { top: 264px; } .mk-eng2.am-m .h1 { top: 330px; } .mk-eng2.am-m .h2 { top: 396px; } .mk-eng2.am-m .h3 { top: 462px; } .mk-eng2.am-m .h4 { top: 528px; } .mk-eng2.am-m .h5 { top: 594px; }
.mk-eng2.am-m .e2-out { left: 16px; top: 672px; width: 328px; min-height: 0; }

/* ---------- Under the hood: one post, inspected four ways (v2-engine3) ---------- */
.mk-eng3 .k { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mk-eng3 .e3-tabs { position: absolute; left: 24px; top: 24px; width: 300px; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.e3-tab { position: relative; background: var(--white); border-radius: 14px; padding: 12px 14px 14px 46px; box-shadow: var(--shadow-card); overflow: hidden; }
.e3-tab .n { position: absolute; left: 14px; top: 14px; font: 500 11px/1 var(--f-mono); color: var(--blue); }
.e3-tab b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.e3-tab em { display: block; font-style: normal; font: 500 11px/1.3 var(--f-mono); color: var(--blue); margin-top: 5px; }
.e3-tab small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.e3-tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.e3-tab .bar u { display: block; height: 100%; background: var(--blue-2); transform-origin: 0 50%; transform: scaleX(0); }
.mk-eng3 .e3-post { position: absolute; left: 352px; top: 24px; width: 236px; height: 452px; border-radius: 20px; overflow: hidden; background: #0d1a22; box-shadow: var(--shadow-lift); }
.e3-post video { width: 100%; height: 100%; object-fit: cover; display: block; }
.e3-id { position: absolute; left: 10px; bottom: 10px; font: 500 10.5px/1 var(--f-mono); color: #fff; background: rgba(18,35,46,.7); padding: 5px 7px; border-radius: 5px; }
.mk-eng3 .e3-insp { position: absolute; left: 616px; top: 24px; width: 480px; height: 452px; }
.mk-eng3 .e3-v { position: absolute; inset: 0; background: var(--white); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow-lift); }
.e3-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.e3-fields span { font: 400 12px/1 var(--f-mono); background: var(--blue-ghost); border: 1px solid var(--line); border-radius: 7px; padding: 7px 8px; color: var(--ink); }
.e3-fields span b { font-weight: 500; color: var(--blue); margin-right: 6px; }
.e3-fields .more { background: var(--ink); color: #fff; border-color: var(--ink); }
.e3-sc { width: 100%; height: 280px; display: block; overflow: visible; margin-top: 30px; }
.e3-sc text.hl { fill: var(--ink); font-weight: 600; }
.e3-sc circle { fill: #b9c9d1; }
.e3-sc .hot { fill: var(--mark); stroke: var(--ink); stroke-width: 2; }
.e3-sc .med { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 5; }
.e3-sc .spike { stroke: var(--ink); stroke-width: 2; }
.e3-sc text { font: 500 11px var(--f-mono); fill: var(--muted); }
.e3-mult { position: absolute; left: 22px; top: 50px; font-size: 14px; color: var(--muted); }
.e3-mult b { font-size: 40px; font-weight: 500; color: var(--ink); letter-spacing: -.03em; margin-right: 4px; }
.e3-note { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.e3-dna { display: grid; gap: 14px; margin-top: 6px; }
.e3-dna .row { display: grid; grid-template-columns: 170px 1fr 52px; gap: 12px; align-items: center; font-size: 14.5px; }
.e3-dna i { height: 12px; border-radius: 6px; background: var(--mist); overflow: hidden; }
.e3-dna u { display: block; height: 100%; width: var(--w); background: var(--pick); border-radius: 6px; transform-origin: 0 50%; }
.e3-dna .row:first-child u { background: var(--ink); }
.e3-dna .neg u { background: var(--alert); }
.e3-dna b { font: 500 14px/1 var(--f-mono); text-align: right; }
.e3-dna .neg b { color: var(--alert); }
.e3-fin { background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.e3-fin span { font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: #9db3c0; }
.e3-fin p { margin: 6px 0 0; font-family: var(--f-serif); font-size: 22px; }
.e3-ids { display: grid; gap: 6px; border-left: 2px solid var(--blue-2); padding-left: 14px; }
.e3-ids span { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--f-mono); padding: 7px 10px; background: var(--paper); border-radius: 8px; }
.e3-ids em { font-style: normal; font-size: 10px; background: var(--white); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; color: var(--muted); }
.e3-ids b { margin-left: auto; font-weight: 500; }
.e3-ids .more { color: var(--muted); background: transparent; }
.e3-n { margin: 12px 0 0; font: 500 12px/1 var(--f-mono); color: var(--ink); }
/* phone composition: tabs on top, small post, inspector below */
.mk-eng3.am-m .e3-tabs { left: 16px; top: 14px; width: 328px; }
.mk-eng3.am-m .e3-tab small { display: none; }
.mk-eng3.am-m .e3-tab { padding: 10px 12px 12px 40px; }
.mk-eng3.am-m .e3-tab b { font-size: 15px; }
.mk-eng3.am-m .e3-post { left: 56px; top: 330px; width: 248px; height: 380px; border-radius: 18px; }
.mk-eng3.am-m .e3-insp { left: 16px; top: 730px; width: 328px; height: 420px; }
.mk-eng3.am-m .e3-n { font-size: 10.5px; line-height: 1.45; }
.mk-eng3.am-m .e3-v { padding: 14px; }
.mk-eng3.am-m .e3-fields span { font-size: 10.5px; padding: 5px 6px; }
.mk-eng3.am-m .e3-dna .row { grid-template-columns: 1fr 70px 44px; font-size: 12.5px; }
.mk-eng3.am-m .e3-mult { top: 40px; right: 14px; }
.mk-eng3.am-m .e3-mult b { font-size: 30px; }
.mk-eng3.am-m .e3-sc { height: 200px; }

.e3-held { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.e3-held span { font: 400 11.5px/1 var(--f-mono); padding: 6px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.e3-held .lb { background: transparent; border: 0; padding-left: 0; color: var(--blue); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.mk-eng3.am-m .e3-sc { margin-top: 44px; height: 220px; }
.e3-tab { cursor: pointer; } .e3-tab:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }

/* Hero tagline on narrow screens: keep the dot beside the first word when the line wraps */
@container adl (max-width: 640px) {
  .v2 .hero .v2-tagline { display: block; text-align: center; font-size: 16px; }
  .v2 .hero .v2-tagline::before { display: inline-block; vertical-align: middle; margin: -3px 8px 0 0; }
}

/* css/site-v3.css */
/* Website V3: #5 as a How it works row, standalone free-report band, CTA strips throughout. */
.v3-bandsec { padding: 56px 0 72px; }
.v3-band { margin-top: 0; }

.v3-cta { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 20px; padding: 22px 26px; background: linear-gradient(90deg, var(--blue-ghost), var(--white)); text-align: left; }
.v3-cta h3 { margin: 0 0 4px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.v3-cta p { margin: 0; font-size: 15px; color: var(--muted); }
.v3-cta-b { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.v3-alt { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.v3-alt:hover { text-decoration-color: var(--blue); }
.v3-cta.dark { background: var(--night-3); border-color: #35566b; margin-top: 64px; }
.v3-cta.dark h3 { color: #fff; }
.v3-cta.dark p { color: var(--night-text); }
.v3-cta.dark .btn { background: #fff; color: var(--ink); border-color: #fff; }
.v3-cta.dark .v3-alt { color: #a9cbe0; text-decoration-color: #35566b; }
@container adl (max-width: 640px) { .v3-cta { padding: 18px; } .v3-cta-b { width: 100%; } .v3-cta-b .btn { width: 100%; justify-content: center; } }

/* 05 · row-sized make scene */
.mk-make3 .k { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.mk-make3 .m3-ideas { position: absolute; left: 40px; top: 46px; width: 440px; }
.m3-idea { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.m3-idea b { font: 500 12px/1 var(--f-mono); color: var(--blue); }
.m3-idea p { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.m3-idea span { font-size: 11px; font-weight: 600; color: var(--pick); background: var(--pick-soft); padding: 4px 8px; border-radius: 99px; }
.mk-make3 .m3-outs { position: absolute; left: 30px; top: 26px; width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m3-out { background: var(--white); border-radius: 14px; padding: 13px 14px; box-shadow: var(--shadow-lift); border-top: 4px solid var(--blue-2); }
.m3-out.o0 { border-top-color: var(--ink); } .m3-out.o2 { border-top-color: var(--pick); } .m3-out.o3 { border-top-color: var(--mark); }
.m3-out .k { margin-bottom: 8px; }
.m3-out h4 { margin: 0 0 8px; font-family: var(--f-serif); font-weight: 400; font-size: 21px; line-height: 1.05; }
.m3-out .mk-sk { display: block; margin-top: 6px; }
.m3-out small { display: flex; align-items: center; gap: 4px; margin-top: 10px; font: 500 9.5px/1 var(--f-mono); color: var(--muted); }
.m3-out small i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 9px; }
.mk-make3 .m3-vol { position: absolute; left: 50px; top: 56px; width: 420px; background: var(--white); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-lift); }
.m3-rate { position: relative; height: 40px; margin-bottom: 10px; }
.m3-rate b { position: absolute; left: 0; top: 0; font-size: 28px; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }
.m3-grid { grid-template-columns: repeat(10, 1fr); gap: 6px; }

/* Final CTA: strike-through in the brand highlighter yellow (was red) */
.v3 .v2-make::after { background: var(--mark); height: .11em; }

/* Hide illustrative / placeholder notes everywhere except the Customers section */
.v3 .am-illus, .v3 .m2-note { display: none !important; }
.v3 main .ph-tag { display: none; }
.v3 #proof .ph-tag { display: inline-block; }
.v3-quote .q { font-family: var(--f-serif); font-size: 23px; line-height: 1.25; color: var(--ink); }
.v3-quote .ph-tag { margin-top: 14px; align-self: flex-start; }
.v3-quote .who { gap: 12px; }
.v3-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.v3-quote .who b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; }

/* Nav: Log in (desktop button; inside the menu on phones) */
.v3 .nav { gap: 22px; }
.v3-login { background: var(--white) !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
.v3-login:hover { border-color: var(--ink) !important; }
.v3 .navlinks .nav-login-m { display: none; }
.v3 .navlinks a[aria-current="page"] { color: var(--ink); }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@container adl (max-width: 720px) { .v3 .v3-login { display: none; } .v3 .navlinks .nav-login-m { display: block; } }

/* ---------- Customer messages: Slack gallery (between Under the hood and Who it’s for) ---------- */
  .qg { padding: 112px 0; background: var(--mist); }
  .qg-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
  .qg-head > p { margin: 0; color: var(--muted); font-size: 16px; max-width: 420px; }
  .qg-head .f-eyebrow { font: 500 12px/1 var(--f-mono); letter-spacing: .02em; color: var(--blue); margin: 0 0 16px; max-width: none; }
  .qg-wall { margin-top: 44px; columns: 3 320px; column-gap: 18px; }
  .slk { break-inside: avoid; margin: 0 0 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 14px; box-shadow: var(--shadow-card); display: grid; grid-template-columns: 40px 1fr; gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  .slk.dark { background: #1a1d21; border-color: #2b2f35; color: #e8e8e8; }
  .qg.is-in .slk { opacity: 1; transform: none; }
  .qg.is-in .slk:nth-child(2) { transition-delay: 120ms; } .qg.is-in .slk:nth-child(3) { transition-delay: 240ms; } .qg.is-in .slk:nth-child(4) { transition-delay: 360ms; } .qg.is-in .slk:nth-child(5) { transition-delay: 480ms; } .qg.is-in .slk:nth-child(6) { transition-delay: 600ms; } .qg.is-in .slk:nth-child(7) { transition-delay: 720ms; }
  .av { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font: 600 15px/1 var(--f-sans); color: #fff; }
  .slk .hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
  .slk .hd b { font-size: 15.5px; font-weight: 700; }
  .slk .hd time { font-size: 12px; color: #8a8d91; }
  .slk .hd .via { margin-left: auto; font: 500 9.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #8a8d91; }
  .slk p { margin: 0 0 5px; font-size: 16px; line-height: 1.45; }
  .slk .rx { display: flex; gap: 6px; margin-top: 8px; }
  .slk .rx span { font-size: 12.5px; padding: 3px 8px; border-radius: 99px; background: #f1f3f4; border: 1px solid #e3e6e8; }
  .slk.dark .rx span { background: #2a2d31; border-color: #3a3e44; color: #d8d8d8; }
  .slk .rx span.on { background: #e8f2fb; border-color: #1d6fb8; color: #1d6fb8; }
  .slk.dark .rx span.on { background: #19324a; border-color: #2f7fc4; color: #cfe6fb; }
  .slk .hl { background: linear-gradient(transparent 58%, var(--mark) 58%); }
  .slk.dark .hl { background: none; color: var(--mark); }
  .slk-img { display: block; width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin: 6px 0 10px; }

  /* Slack-authentic message styling */
  .slk { font-family: Lato, "Slack-Lato", "Helvetica Neue", Arial, sans-serif; grid-template-columns: 36px 1fr; gap: 8px 10px; padding: 14px 16px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(29,28,29,.06), 0 8px 24px -16px rgba(29,28,29,.25); border-color: #e2e2e2; color: #1d1c1d; }
  .slk .av { width: 36px; height: 36px; border-radius: 6px; overflow: hidden; display: block; }
  .slk .av svg { width: 100%; height: 100%; display: block; }
  .slk .hd { gap: 6px; margin-bottom: 2px; }
  .slk .hd b { font-size: 15px; font-weight: 900; font-weight: 700; color: #1d1c1d; }
  .slk .hd time { font-size: 12px; color: #616061; }
  .slk p { font-size: 15px; line-height: 1.46668; margin: 0 0 4px; color: #1d1c1d; }
  .slk .rx span { font-size: 12px; background: #f8f8f8; border-color: #e2e2e2; color: #1d1c1d; padding: 2px 7px; }
  .slk .rx span.on { background: #e8f5fa; border-color: #1d9bd1; color: #1264a3; }
  .slk-img { border-radius: 8px; }
  .qg-note { margin: 28px 0 0; font: 400 12px/1.6 var(--f-mono); color: var(--faint); }
  @media (prefers-reduced-motion: reduce) { .slk { opacity: 1; transform: none; transition: none; } }

  /* three equal-height columns */
  .qg-wall { columns: auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .qg-col { display: flex; flex-direction: column; gap: 18px; }
  .qg-col .slk { flex: 1 1 auto; margin: 0; align-content: start; }
  .qg-col:last-child .slk > div { display: flex; flex-direction: column; }
  .qg-col:last-child .slk-img { max-width: none; width: 100%; aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; height: 0; }
  @container adl (max-width: 980px) { .qg-wall { grid-template-columns: 1fr 1fr; } .qg-col:last-child { grid-column: 1 / -1; } .qg-col:last-child .slk-img { height: auto; aspect-ratio: 1; max-width: 420px; flex: none; } }
  @container adl (max-width: 640px) { .qg-wall { grid-template-columns: 1fr; } }

  .qg-col:last-child .slk { align-content: stretch; grid-template-rows: 1fr; }
  .qg-col:last-child .slk > div { height: 100%; min-height: 0; }
  .qg-col:last-child .slk-img { object-position: 50% 78%; }

/* Customers: Fish River case study card */
.v3-case { text-decoration: none; color: inherit; transition: transform 200ms var(--ease-out), box-shadow 200ms; }
.v3-case:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.v3-case:hover .lnk { text-decoration: underline; text-underline-offset: 4px; }
.v3-case-vis { background: var(--mist); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 26px 18px; min-height: 260px; }
.v3-case-vis img { width: 170px; height: auto; }
.v3-case-stats { display: flex; gap: 10px; }
.v3-case-stats span { background: var(--white); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--muted); text-align: center; box-shadow: var(--shadow-card); }
.v3-case-stats b { display: block; font-size: 24px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; margin-bottom: 2px; }
.v3-case .k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.v3-case-vis img { width: 210px; }
.v3-case-vis img { width: min(180px, 78%); }

/* Free report band: button only (Oct 21) */
.v3-formbtn { display: flex; justify-content: flex-end; }
@container adl (max-width: 900px) { .v3-formbtn { justify-content: stretch; } .v3-formbtn .btn { width: 100%; justify-content: center; } }

/* css/about.css */
/* About page (website V3) */

.ab-hero { padding: 96px 0 88px; }
.ab-hero h1 { font-size: clamp(48px, 6.4cqw, 88px); line-height: 1; letter-spacing: -.05em; font-weight: 400; margin: 0 0 28px; max-width: 980px; }
.ab-lede { font-size: 20px; line-height: 1.6; color: var(--muted); max-width: 820px; margin: 0; }

.ab-shift { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.ab-shift article { border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: var(--paper); }
.ab-shift article.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ab-shift .k { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.ab-shift .on .k { color: #a9cbe0; }
.ab-shift h3 { font-size: 23px; font-weight: 500; letter-spacing: -.02em; margin: 14px 0 8px; line-height: 1.2; }
.ab-shift p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.ab-shift .on p { color: var(--night-text); }

.ab-story { display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: start; }
.ab-story img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.ab-story blockquote { margin: 0; font-family: var(--f-serif); font-size: clamp(26px, 2.8cqw, 36px); line-height: 1.2; color: var(--ink); max-width: 900px; }
.ab-cite { margin: 22px 0 0; font-size: 14.5px; color: var(--muted); }
.ab-cite b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }

.ab-loop { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-loop li { border-top: 2px solid var(--ink); padding-top: 16px; }
.ab-loop .n { font: 500 11px/1 var(--f-mono); color: var(--blue); }
.ab-loop b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 10px 0 6px; }
.ab-loop p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

.ab-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.ab-team article { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 22px; box-shadow: var(--shadow-card); }
.ab-team img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.ab-team h3 { font-size: 21px; font-weight: 500; letter-spacing: -.02em; margin: 0 6px 4px; }
.ab-team .role { display: block; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); margin: 0 6px 12px; }
.ab-team p { margin: 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.ab-why { max-width: 980px; }
.ab-big { font-size: clamp(28px, 3.4cqw, 44px); line-height: 1.15; letter-spacing: -.03em; margin: 0; }
.ab-sign { margin: 24px 0 0; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@container adl (max-width: 980px) { .ab-team { grid-template-columns: repeat(2, 1fr); } }
@container adl (max-width: 760px) {
  .ab-hero { padding: 56px 0 56px; }
  .ab-lede { font-size: 17px; }
  .ab-shift, .ab-loop { grid-template-columns: 1fr; }
  .ab-story { grid-template-columns: 1fr; gap: 20px; }
  .ab-story img { width: 96px; height: 96px; }
}
@container adl (max-width: 520px) { .ab-team { grid-template-columns: 1fr; } }

/* case-studies/case-study.css */
/* Customer story pages */
.cs-hero { padding: 88px 0 56px; }
.cs-logo { display: block; width: 220px; height: auto; margin: 6px 0 28px; }
.cs-hero h1 { font-size: clamp(44px, 5.6cqw, 78px); line-height: 1.02; letter-spacing: -.05em; font-weight: 400; margin: 0 0 26px; max-width: 1040px; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; }
.cs-meta div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.cs-meta dt { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.cs-meta dd { margin: 0; font-size: 15px; color: var(--ink); }

.cs-stats-sec { padding: 0 0 80px; }
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--ink); color: #fff; border-radius: 24px; overflow: hidden; }
.cs-stats div { padding: 30px 26px; border-left: 1px solid #2c4553; }
.cs-stats div:first-child { border-left: 0; }
.cs-stats b { display: block; font-size: clamp(40px, 4.4cqw, 60px); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin-bottom: 12px; }
.cs-stats div:first-child b { color: var(--mark); }
.cs-stats span { font-size: 15px; line-height: 1.45; color: var(--night-text); }
.cs-src { margin: 12px 0 0; font: 400 11px/1 var(--f-mono); color: var(--faint); }

.cs-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.cs-body p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.cs-pull { margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--mark); font-family: var(--f-serif); font-size: 26px; line-height: 1.2; color: var(--ink); }

.cs-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-steps li { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-card); }
.cs-steps .n { font: 500 11px/1 var(--f-mono); color: var(--blue); }
.cs-steps h3 { font-size: 19px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; margin: 12px 0 10px; }
.cs-steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.cs-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.cs-results article { border: 1px solid var(--line); border-radius: 22px; padding: 26px; background: var(--paper); }
.cs-results .k { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.cs-results h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 12px 0 8px; }
.cs-results p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.cs-results blockquote { margin: 16px 0 0; font-family: var(--f-serif); font-size: 20px; line-height: 1.25; color: var(--ink); }

.cs-quote { max-width: 980px; text-align: center; }
.cs-qlogo { display: block; margin: 0 auto 26px; width: 160px; height: auto; }
.cs-quote blockquote { margin: 0; font-family: var(--f-serif); font-size: clamp(28px, 3.4cqw, 44px); line-height: 1.15; color: var(--ink); }
.cs-quote .ab-cite { margin-top: 24px; }

@container adl (max-width: 1000px) { .cs-steps { grid-template-columns: repeat(2, 1fr); } .cs-stats { grid-template-columns: repeat(2, 1fr); } .cs-stats div:nth-child(3) { border-left: 0; } .cs-stats div:nth-child(n+3) { border-top: 1px solid #2c4553; } }
@container adl (max-width: 760px) {
  .cs-hero { padding: 56px 0 40px; }
  .cs-split, .cs-results { grid-template-columns: 1fr; gap: 24px; }
  .cs-steps { grid-template-columns: 1fr; }
  .cs-pull { font-size: 22px; }
}
@container adl (max-width: 480px) { .cs-stats { grid-template-columns: 1fr; } .cs-stats div { border-left: 0 !important; border-top: 1px solid #2c4553; } .cs-stats div:first-child { border-top: 0; } }

/* Two Blind Brothers */
.cs-logo.tbb { width: 240px; }
.cs-ph b, .cs-results .cs-ph h3 { color: var(--mark) !important; }
.cs-results .cs-ph { border: 1.5px dashed var(--line-2); background: var(--white); }
.cs-results .cs-ph h3 { color: var(--muted) !important; }
.tbb-compare { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-top: 40px; }
.tbb-compare figure { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.tbb-compare img { width: 100%; height: 300px; object-fit: cover; display: block; }
.tbb-compare figure:not(.win) img { filter: grayscale(.6); opacity: .85; }
.tbb-compare figcaption { padding: 16px 18px 18px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tbb-compare figcaption b { display: block; font-size: 18px; font-weight: 500; color: var(--ink); margin: 10px 0 4px; }
.tbb-compare .tag { font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; }
.tbb-compare .tag.w { background: var(--pick-soft); color: var(--pick); }
.tbb-compare .tag.l { background: #f6e6df; color: var(--alert); }
.tbb-findings { grid-template-columns: repeat(3, 1fr); }
@container adl (max-width: 860px) { .tbb-compare, .tbb-findings { grid-template-columns: 1fr; } .tbb-compare img { height: 260px; } }

/* css/pages.css */
/* Utility pages (Connect Claude, Install, Support, Thank you): shared pieces */
.pg-hero { padding: 88px 0 48px; }
.pg-kicker { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0 0 22px; }
.pg-hero h1 { font-size: clamp(44px, 5.6cqw, 78px); line-height: 1.02; letter-spacing: -.05em; font-weight: 400; margin: 0 0 24px; max-width: 980px; }

.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pg-steps li { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 26px; box-shadow: var(--shadow-card); }
.pg-steps h3 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 10px; }
.pg-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.pg-steps p + p { margin-top: 10px; }
.pg-code { display: inline-block; font: 500 14px/1.4 var(--f-mono); color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; margin: 2px 0 12px; overflow-wrap: anywhere; user-select: all; }

.pg-note { margin-top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.pg-note h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 10px; }
.pg-note p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 860px; }

@container adl (max-width: 760px) {
  .pg-hero { padding: 56px 0 36px; }
  .pg-steps { grid-template-columns: 1fr; }
}

/* Support: contact cards */
.pg-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-contact article { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px; }
.pg-contact .k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.pg-contact h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 6px 0 0; }
.pg-contact p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.pg-contact a, .pg-contact .addr { margin-top: auto; padding-top: 10px; font-size: 16px; color: var(--ink); font-weight: 500; }
.pg-contact a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.pg-contact .addr span { display: block; font-weight: 400; color: var(--ink-2); }
.pg-foot { margin: 28px 0 0; font-size: 15px; color: var(--muted); }
.pg-top { padding-top: 72px; }
@container adl (max-width: 900px) { .pg-contact { grid-template-columns: 1fr; } .pg-top { padding-top: 48px; } }

/* Thank you */
.pg-thanks { padding: 72px 0 0; }
.pg-thanks .close h2 { margin-bottom: 30px; }
.pg-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@container adl (max-width: 560px) { .pg-btns .btn { width: 100%; justify-content: center; } }

/* Free custom report */
.pg-left { justify-content: flex-start; margin-top: 32px; }
.pg-reads { margin-top: 36px; }
.pg-steps.pg-three { grid-template-columns: repeat(3, 1fr); }
@container adl (max-width: 900px) { .pg-steps.pg-three { grid-template-columns: 1fr; } }

/* Example report pages */
.pg-report { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.pg-report figure { margin: 0; }
.pg-report img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgba(18,35,46,.35); }
.pg-report-lead { margin-top: 36px; }
.pg-report-lead img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 18px 44px -24px rgba(18,35,46,.4); }
.pg-report figcaption { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.pg-report figcaption b { display: block; font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
@container adl (max-width: 900px) { .pg-report { grid-template-columns: 1fr; gap: 28px; } }

/* How it works: inbox mockup */
.pg-inbox { margin: 36px auto 0; max-width: 1040px; }
.pg-inbox img { width: 100%; height: auto; display: block; border-radius: 20px; }

/* How it works: steps left, image right, same height */
.pg-hiw { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: stretch; margin-top: 36px; }
.pg-hiw .pg-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; height: 100%; }
.pg-hiw .pg-steps li { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
.pg-hiw .pg-inbox { margin: 0; max-width: none; align-self: center; }
@container adl (max-width: 900px) { .pg-hiw { grid-template-columns: 1fr; } .pg-hiw .pg-steps li { flex: none; } }
.pg-hiw .pg-inbox { align-self: stretch; display: flex; }
.pg-hiw .pg-inbox img { height: 100%; object-fit: cover; object-position: center; background: #fff; }
@container adl (max-width: 900px) { .pg-hiw .pg-inbox img { height: auto; } }

/* wesbite-V3.html inline */

/* Framer adjustments: CTAs are links now */
.adl a.btn, .adl a.v3-alt, .adl a.sub { text-decoration: none; }
.adl .v2-sent { margin: 0; align-self: center; font-size: 18px; font-weight: 500; color: #fff; }
.adl .v2-form [aria-invalid="true"] { border-color: var(--mark) !important; box-shadow: 0 0 0 2px rgba(255,228,138,.35); }
.adl .foot-social { display: inline-flex; gap: 10px; align-items: center; }
.adl .foot-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--white); transition: color 160ms, border-color 160ms; }
.adl .foot-social a:hover { color: var(--blue); border-color: var(--blue); }
.adl a.v3-alt { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); display: inline; }
.adl { container-type: inline-size; container-name: adl; }
/* Keep the site header pinned: Framer publishes the header's sticky wrapper without a top offset, so give it one here */
div:has(> .adl > header.site-head) { top: 0; z-index: 30; }
/* Wider side margins: 20px on phones up to 112px on large screens, content max 1160px */
.adl .wrap { width: min(1160px, calc(100% - 2 * clamp(20px, 6cqw, 112px))); }
.adl { font-family: var(--f-sans); color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* Static export: page basics Framer used to provide */
html, body { margin: 0; padding: 0; background: var(--paper); }

/* Static export: keep the header pinned (it sat inside a Framer wrapper before) */
.adl-sticky { position: sticky; top: 0; z-index: 30; }

/* Short pages (/support, /thank-you): keep the footer at the bottom of the window, as on the Framer site. */
.adl-page.pin-foot { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.adl-page.pin-foot > :last-child { margin-top: auto; }