/* ── Prompt research ────────────────────────────────────── no comp ───── */

/* the research table */
.zr-rs{
  width:min(860px,100%); margin-inline:auto; overflow:hidden;
  background:#fff; border:1px solid #EDF1F7; border-radius:20px;
  box-shadow:0 24px 60px -24px rgba(16,49,110,.28), 0 2px 6px rgba(16,49,110,.06);
}
.zr-rs__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid #EEF1F5; }
.zr-rs__q{ flex:1 1 auto; display:flex; align-items:center; gap:10px; min-width:200px; height:38px; padding:0 12px; border:1px solid var(--pp-hair); border-radius:10px; font-size:14px; color:var(--pp-ink); }
.zr-rs__q svg{ width:16px; height:16px; color:#9AA1AC; flex:0 0 auto; }
.zr-rs__geo{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px solid var(--pp-hair); border-radius:10px; font-size:13px; color:var(--pp-body); }
.zr-rs__geo svg{ width:15px; height:15px; color:#9AA1AC; }
.zr-rs__go{ display:inline-flex; align-items:center; height:38px; padding:0 14px; border-radius:10px; background:var(--zr-blue); color:#fff; font-size:13.5px; font-weight:500; box-shadow:inset 0 3px 14px rgba(255,255,255,.35); }
.zr-rs__tbl{ width:100%; border-collapse:collapse; }
.zr-rs__tbl th{ padding:10px 14px; text-align:left; background:#FAFBFC; border-bottom:1px solid #EEF1F5; font-family:var(--pp-mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; white-space:nowrap; }
.zr-rs__tbl td{ padding:11px 14px; border-bottom:1px solid #F2F5F9; vertical-align:middle; font-size:13.5px; color:var(--pp-body); }
.zr-rs__tbl tr:last-child td{ border-bottom:0; }
.zr-rs__idea{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.zr-rs__idea b{ font-weight:500; color:var(--pp-ink); }
.zr-rs__idea span{ display:flex; gap:6px; flex-wrap:wrap; }
.zr-rs__vol{ font-family:var(--pp-mono); font-size:12.5px; white-space:nowrap; color:var(--pp-ink); }
.zr-rs__vol s{ display:block; text-decoration:none; font-size:11px; color:#9AA1AC; }
.zr-rs__spark{ width:64px; height:22px; display:block; }
.zr-rs__spark path{ fill:none; stroke:#22B573; stroke-width:1.6; stroke-linecap:round; }
.zr-rs__spark.is-flat path{ stroke:#C3C8CF; }
.zr-rs__srcs{ display:flex; gap:4px; }
.zr-rs__srcs i{ display:grid; place-items:center; height:20px; padding:0 5px; border-radius:5px; background:#F1F3F6; font-family:var(--pp-mono); font-size:10px; font-style:normal; color:#4B5563; }
.zr-rs__srcs i.is-ai{ background:#E8F0FE; color:#1D4ED8; }
.zr-rs__track{ display:inline-flex; align-items:center; height:28px; padding:0 10px; border:1px solid var(--pp-hair); border-radius:7px; font-size:12.5px; font-weight:500; color:var(--pp-ink); white-space:nowrap; }
.zr-rs__tbl tr.is-hot .zr-rs__track{ background:var(--zr-blue); border-color:var(--zr-blue); color:#fff; }
.zr-rs__tbl td:last-child{ text-align:right; }

/* five sources */
.zr-srcs{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
.zr-src{ padding:22px 20px; display:flex; flex-direction:column; }
.zr-src__ico{ display:grid; place-items:center; width:36px; height:36px; margin-bottom:14px; border-radius:10px; background:#F0F4FB; color:var(--zr-blue); }
.zr-src__ico svg{ width:18px; height:18px; }
.zr-src b{ display:block; font-size:16px; font-weight:500; line-height:1.3; color:var(--pp-ink); }
.zr-src p{ margin:6px 0 0; font-size:13.5px; line-height:20px; color:var(--pp-dim); text-wrap:pretty; }
.zr-src .zr-chip{ margin-top:auto; padding-top:0; align-self:flex-start; margin-top:14px; }

/* measured volumes: copy beside an annotated row */
.zr-split{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; }
.zr-feats{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; }
.zr-feats li{ display:flex; gap:14px; }
.zr-feats i{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:#E8F0FE; color:var(--zr-blue); }
.zr-feats i svg{ width:17px; height:17px; }
.zr-feats b{ display:block; font-size:16px; font-weight:500; color:var(--pp-ink); }
.zr-feats p{ margin:4px 0 0; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }
.zr-rowx{ padding:22px; }
.zr-rowx__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid #EEF1F5; }
.zr-rowx__top b{ font-size:16.5px; font-weight:500; color:var(--pp-ink); margin-right:auto; }
.zr-rowx__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; padding:18px 0; border-bottom:1px solid #EEF1F5; }
.zr-rowx__grid small{ display:block; font-family:var(--pp-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; margin-bottom:8px; }
.zr-rowx__grid b{ display:block; font-size:24px; font-weight:500; letter-spacing:-.02em; line-height:1; color:var(--pp-ink); font-family:var(--pp-mono); }
.zr-rowx__grid b em{ font-style:normal; font-size:13px; color:var(--pp-dim); }
.zr-rowx__grid s{ display:block; margin-top:8px; text-decoration:none; font-size:12.5px; color:var(--pp-dim); }
.zr-rowx__grid svg{ width:96px; height:26px; display:block; }
.zr-rowx__grid svg path{ fill:none; stroke:#22B573; stroke-width:1.6; stroke-linecap:round; }
.zr-rowx__sig{ padding-top:16px; }
.zr-rowx__sig small{ display:block; font-family:var(--pp-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; margin-bottom:10px; }
.zr-rowx__sig ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.zr-rowx__sig li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--pp-body); }

/* competitor + market, in one card */
.zr-mkt{ padding:clamp(20px,2.4vw,30px); }
.zr-mkt__mocks{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,2.6vw,38px); }
.zr-mkt__half{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zr-mkt__half + .zr-mkt__half{ position:relative; }
.zr-mkt__half + .zr-mkt__half::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(-1 * clamp(10px,1.3vw,19px));
  width:1px; background:linear-gradient(180deg, rgba(228,233,240,0) 0%, var(--pp-hair) 18%, var(--pp-hair) 82%, rgba(228,233,240,0) 100%);
}
.zr-mkt__lbl{ font-family:var(--pp-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; }
.zr-mkt__say{ margin-top:clamp(20px,2.4vw,28px); padding-top:clamp(18px,2vw,24px); border-top:1px solid #EEF1F5; }
.zr-mkt__say b{ display:block; font-size:19px; font-weight:500; color:var(--pp-ink); }
.zr-mkt__say p{ margin:8px 0 0; max-width:82ch; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }
.zr-mockin{ display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border:1px solid var(--pp-hair); border-radius:10px; font-size:14px; color:var(--pp-ink); }
.zr-mockin svg{ width:16px; height:16px; color:#9AA1AC; }
.zr-mockin .zr-chip{ margin-left:auto; }
.zr-two__cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.zr-two__cols small{ display:block; font-family:var(--pp-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; margin-bottom:8px; }
.zr-two__cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.zr-two__cols li{ display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; background:#F7F8FA; font-size:12.5px; color:var(--pp-ink); }
.zr-two__cols li em{ font-style:normal; font-family:var(--pp-mono); color:var(--pp-dim); }
.zr-geo{ display:flex; flex-direction:column; gap:10px; }
.zr-geo__list{ display:flex; flex-wrap:wrap; gap:8px; }
.zr-geo__list span{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--pp-hair); border-radius:10px; font-size:13px; color:var(--pp-body); }
/* assets/flags/*.svg — flag-icons 4x3. A 4:3 SVG in a 20x15 box, rounded and
   hairlined so a white field (Japan, Korea) still reads as a flag and not as
   a gap in the chip. */
.zr-geo__list span img{
  width:20px; height:15px; flex:0 0 auto; display:block;
  border-radius:3px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(31,35,40,.09), 0 1px 2px rgba(16,49,110,.12);
}
.zr-geo__list span.is-on{ border-color:var(--zr-blue); color:var(--zr-blue); background:#F4F8FF; }
.zr-geo__list span.is-more{ font-family:var(--pp-mono); font-size:11.5px; color:var(--pp-dim); border-style:dashed; }
.zr-geo__meta{ font-size:13px; color:var(--pp-dim); }
.zr-geo__meta b{ font-weight:500; color:var(--pp-ink); }

/* the plans band */
.zr-plans{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; align-items:center; gap:clamp(20px,3vw,48px); padding:clamp(24px,3vw,40px); border-radius:24px; background:#F6F7F9; border:1px solid #EEF1F5; }
.zr-plans p{ margin:10px 0 0; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }
.zr-plans .zr-pp__h3{ margin-top:12px; }
.zr-plans ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.zr-plans li{ padding:14px 16px; border-radius:14px; background:#fff; border:1px solid #EDF1F7; }
.zr-plans li b{ display:block; font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--pp-ink); }
.zr-plans li span{ display:block; margin-top:6px; font-size:12.5px; line-height:17px; color:var(--pp-dim); }

@media (max-width:1040px){
  .zr-mkt__mocks{ grid-template-columns:minmax(0,1fr); }
  .zr-mkt__half + .zr-mkt__half::before{ display:none; }
  .zr-mkt__half + .zr-mkt__half{ padding-top:20px; border-top:1px solid #EEF1F5; }
  .zr-srcs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-split{ grid-template-columns:minmax(0,1fr); }
  .zr-plans{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px){
  .zr-srcs{ grid-template-columns:minmax(0,1fr); }
  .zr-rs__tbl .is-opt{ display:none; }
  .zr-rowx__grid{ grid-template-columns:minmax(0,1fr); }
  .zr-two__cols{ grid-template-columns:minmax(0,1fr); }
  .zr-plans ul{ grid-template-columns:minmax(0,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HERO — the live panel, centred, locked on Prompts
   --------------------------------------------------------------------------
   The homepage puts the workspace under a centred column of copy, and this
   page is about one view of it, so it does the same. Three consequences:
   the copy stops being a hero column and becomes a measure; the hero stops
   being exactly one screen tall, because the panel is the reason to be here
   and has to be reachable; and the scroll cue goes, because there is now
   something under the fold you can see.
   ════════════════════════════════════════════════════════════════════════ */
.zr-pp--prompts .zr-pp__hero--shot{ align-content:start; }
@media (min-width:900px){
  .zr-pp--prompts .zr-pp__hero--shot{ min-height:0; }
}
.zr-pp--prompts .zr-pp__hero--shot::after{ display:none; }        /* the cue */
.zr-pp--prompts .zr-pp__hero--shot .zr-pp__copy{ gap:18px; }
.zr-pp--prompts .zr-pp__hero--shot .zr-pp__field{ width:min(560px,100%); }
.zr-pp--prompts .zr-pp__hero--shot .zr-pp__note{ margin:0; }

/* the panel, inside the hero card rather than in a section of its own */
.zr-pp__panel--hero{ margin-top:clamp(28px,3.4vw,52px); padding-bottom:0; }
.zr-pp__panel--hero .zr-shot{ width:min(1180px,100%); }

/* the slats read as rectangles behind the copy once it is centred over
   them, so this page's hero is the plain field, the burst and the veil. */
.zr-pp--prompts .zr-pp__slats{ display:none; }

/* Locked to Prompts: the other five entries keep their place so the app
   still looks like the app, but they are inert and say so. */
.zd__nav--lock a{ cursor:default; }
.zd__nav--lock a[aria-disabled="true"]{ opacity:.48; }

/* ══════════════════════════════════════════════════════════════════════════
   MEASURED VOLUMES — the row assembles itself
   --------------------------------------------------------------------------
   Driven entirely by the .is-in the page's one IntersectionObserver already
   adds to [data-reveal] — the same trick the vignettes use, so there is no
   second animation system and no script. Transform, opacity and dash only.
   ════════════════════════════════════════════════════════════════════════ */
.zr-rowx--anim .zr-rowx__grid > div,
.zr-rowx--anim .zr-rowx__sig li{
  opacity:0; translate:0 10px;
}
[data-reveal].is-in .zr-rowx--anim .zr-rowx__grid > div,
[data-reveal].is-in .zr-rowx--anim .zr-rowx__sig li{
  opacity:1; translate:0 0;
  transition:opacity .52s var(--zr-ease-out-quart) var(--_d,0ms),
             translate .58s var(--zr-ease-out-quart) var(--_d,0ms);
}
.zr-rowx--anim .zr-rowx__grid > div:nth-child(1){ --_d:120ms; }
.zr-rowx--anim .zr-rowx__grid > div:nth-child(2){ --_d:220ms; }
.zr-rowx--anim .zr-rowx__grid > div:nth-child(3){ --_d:320ms; }
.zr-rowx--anim .zr-rowx__sig li:nth-child(1){ --_d:460ms; }
.zr-rowx--anim .zr-rowx__sig li:nth-child(2){ --_d:560ms; }
.zr-rowx--anim .zr-rowx__sig li:nth-child(3){ --_d:660ms; }

/* the trend draws itself — pathLength="100" on the path, so the dash is the
   same two numbers whatever the curve */
.zr-rowx--anim .zr-rowx__grid svg path{ stroke-dasharray:100; stroke-dashoffset:100; }
[data-reveal].is-in .zr-rowx--anim .zr-rowx__grid svg path{
  stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--zr-ease-out-quart) .3s;
}

/* the two chips on the header land after the card has settled */
.zr-rowx--anim .zr-rowx__top .zr-chip{ opacity:0; scale:.9; }
[data-reveal].is-in .zr-rowx--anim .zr-rowx__top .zr-chip{
  opacity:1; scale:1;
  transition:opacity .34s linear var(--_d,0ms), scale .46s cubic-bezier(.2,1.4,.4,1) var(--_d,0ms);
}
.zr-rowx--anim .zr-rowx__top .zr-chip:nth-of-type(1){ --_d:40ms; }
.zr-rowx--anim .zr-rowx__top .zr-chip:nth-of-type(2){ --_d:120ms; }

/* the three claims beside it come in one after the other */
.zr-feats[data-reveal] li{ opacity:0; translate:0 14px; }
.zr-feats[data-reveal].is-in li{
  opacity:1; translate:0 0;
  transition:opacity .56s var(--zr-ease-out-quart) var(--_d,0ms),
             translate .62s var(--zr-ease-out-quart) var(--_d,0ms);
}
.zr-feats[data-reveal] li:nth-child(1){ --_d:60ms; }
.zr-feats[data-reveal] li:nth-child(2){ --_d:180ms; }
.zr-feats[data-reveal] li:nth-child(3){ --_d:300ms; }

@media (prefers-reduced-motion:reduce){
  .zr-rowx--anim .zr-rowx__grid > div,
  .zr-rowx--anim .zr-rowx__sig li,
  .zr-rowx--anim .zr-rowx__top .zr-chip,
  .zr-feats[data-reveal] li{ opacity:1; translate:none; scale:1; transition:none; }
  .zr-rowx--anim .zr-rowx__grid svg path{ stroke-dasharray:none; stroke-dashoffset:0; }
}