:root { color-scheme:light; --paper:#f7f2ee; --ink:#261c20; --red:#c51f3e; --line:#e3d6d9; --muted:#6f5a60; --wip:#78414e; --pass:#2c6e49; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-size:1rem; line-height:1.5; background:var(--paper); }
a { color:inherit; text-underline-offset:.25em; }
button { font:inherit; color:inherit; cursor:pointer; }
a:focus-visible, button:focus-visible, .panel:focus-visible { outline:2px solid var(--red); outline-offset:3px; }

.demo-shell { width:min(1200px,100%); margin:auto; padding:clamp(1rem,3vw,3rem); }
.demo-header { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-bottom:2rem; }
.demo-header a, .eyebrow { font-size:.875rem; }
.eyebrow { color:var(--muted); margin:0 0 .5rem; }
h1 { font-weight:500; font-size:clamp(1.8rem,4vw,3rem); line-height:1.15; letter-spacing:-.045em; margin:0; }

.workflow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.25rem,3vw,2.5rem); align-items:start; }
.workflow-main { min-width:0; }

.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-bottom:1.25rem; }
.steps [role="tab"] { border:0; border-top:2px solid var(--line); background:none; padding:.55rem 0 .2rem; min-height:44px; text-align:left; font-size:.875rem; color:var(--muted); transition:color .2s, border-color .2s; }
.steps [role="tab"] span { display:block; font-family:'Courier New',Courier,monospace; font-size:.7rem; letter-spacing:.03em; }
.steps [role="tab"]:hover { color:var(--ink); }
.steps [role="tab"][aria-selected="true"] { border-top-color:var(--red); color:var(--ink); font-weight:500; }

.panel-kicker { margin:0 0 .5rem; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.panel h2 { margin:0 0 .75rem; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:700; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.panel-lede { margin:0 0 1rem; font-size:.875rem; color:var(--muted); }
.panel-note { margin:1rem 0 0; font-size:.875rem; color:var(--muted); }
.panel-subhead { margin:1.25rem 0 .5rem; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

.facts { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; margin:0; font-size:.875rem; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; }

.evidence, .targets, .checks { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.evidence li, .checks li { padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.875rem; }
.evidence li { display:grid; grid-template-columns:2rem minmax(0,1fr); }
.evidence li > span { font-family:'Courier New',Courier,monospace; font-size:.7rem; color:var(--red); padding-top:.2rem; }

.targets li { border-bottom:1px solid var(--line); }
.target { display:block; width:100%; border:0; border-left:3px solid transparent; background:none; text-align:left; padding:.75rem .7rem; transition:background-color .2s, border-color .2s; }
.target:hover { background:rgba(255,255,255,.55); }
.target.is-current { background:#fff; border-left-color:var(--red); }
.target-meta { display:flex; justify-content:space-between; gap:1rem; margin:0; font-family:'Courier New',Courier,monospace; font-size:.68rem; letter-spacing:.04em; color:var(--muted); }
.field { display:block; margin-top:.45rem; }
.field-head { display:flex; justify-content:space-between; gap:1rem; font-size:.75rem; color:var(--muted); }
.field-count { font-variant-numeric:tabular-nums; }
.field-copy, .status-copy { display:block; margin:.15rem 0 .35rem; font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:1rem; line-height:1.3; }
.meter { display:block; height:3px; background:var(--line); }
.meter span { display:block; height:100%; background:var(--red); }
.field-evidence { display:block; margin:.55rem 0 0; font-size:.78rem; color:var(--muted); }
.field-evidence strong { display:block; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.status-field { padding:.75rem .7rem; border-bottom:1px solid var(--line); border-left:3px solid var(--wip); }
.status-copy { font-family:Arial,Helvetica,sans-serif; font-size:.8rem; letter-spacing:.12em; color:var(--wip); }
.scene-copy { display:block; margin-top:.3rem; font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:.95rem; line-height:1.3; }
.scene-bar { display:block; position:relative; height:3px; margin-top:.55rem; background:var(--line); }
.scene-bar span { position:absolute; top:0; bottom:0; background:var(--red); }

.check-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:500; }
.pill { flex:none; font-size:.66rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:.05rem .55rem; border:1px solid currentColor; border-radius:100px; }
.pill.pass { color:var(--pass); }
.pill.pending { color:var(--wip); }
.checks p { margin:.2rem 0 0; color:var(--muted); }

.next-step { margin-top:1.25rem; border:1px solid var(--ink); border-radius:100px; background:none; padding:.5rem 1.1rem; min-height:44px; font-size:.875rem; transition:background-color .2s, color .2s; }
.next-step:hover { background:var(--ink); color:var(--paper); }

.reel { position:sticky; top:1.5rem; width:clamp(210px,24vw,280px); }
.phone { aspect-ratio:9 / 16; border:7px solid #1f181a; border-radius:26px; overflow:hidden; background:#1f181a; box-shadow:0 18px 40px -24px rgba(38,28,32,.5); }
.phone video { display:block; width:100%; height:100%; object-fit:cover; background:#ac012d; }
.segments { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; margin:.75rem 0 .5rem; }
.segment { position:relative; height:24px; border:0; padding:0; background:none; }
.segment::before, .segment span { content:''; position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; }
.segment::before { background:var(--line); transition:background-color .2s; }
.segment span { background:var(--red); transform:scaleX(var(--fill,0)); transform-origin:left; }
.segment:hover::before, .segment.is-current::before { background:#d3bfc4; }
.transport { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.transport button { border:1px solid var(--ink); border-radius:100px; background:none; min-height:40px; padding:.3rem .9rem; font-size:.8rem; transition:background-color .2s, color .2s; }
.transport button:hover { background:var(--ink); color:var(--paper); }
.reel-time { font-family:'Courier New',Courier,monospace; font-size:.75rem; font-variant-numeric:tabular-nums; }
.reel-now { margin:.5rem 0 0; font-size:.8rem; color:var(--muted); }
.open-demo { display:none; margin-top:.4rem; font-size:.8rem; }

html.embedded, html.embedded body { height:100%; }
html.embedded body { overflow:hidden; }
html.embedded .demo-shell { height:100%; padding:1.25rem; display:flex; flex-direction:column; }
html.embedded .demo-header { display:none; }
html.embedded .workflow { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); align-items:stretch; }
html.embedded .workflow-main { display:flex; flex-direction:column; min-height:0; }
html.embedded .panels { flex:1; min-height:0; overflow-y:auto; padding-right:.5rem; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; }
html.embedded .reel { position:static; width:clamp(200px,min(30vw,calc((100vh - 230px) * 9 / 16)),300px); align-self:start; }
html.embedded .open-demo { display:inline-block; align-self:flex-start; margin-top:.75rem; }

@media (max-width:600px) {
  .workflow, html.embedded .workflow { display:flex; flex-direction:column; align-items:stretch; }
  .workflow-main, html.embedded .workflow-main { flex:1; min-height:0; width:100%; }
  .reel, html.embedded .reel { order:-1; position:static; width:100%; display:grid; grid-template-columns:clamp(110px,34vw,160px) minmax(0,1fr); grid-template-rows:repeat(4,auto) 1fr; column-gap:1rem; align-items:start; }
  .phone { grid-row:1 / -1; border-width:5px; border-radius:18px; }
  .segments { margin-top:0; }
  .transport { flex-wrap:wrap; }
  .steps { gap:.3rem; }
  .steps [role="tab"] { font-size:.8rem; }
  .demo-header { flex-direction:column; align-items:flex-start; }
}

/* In the portfolio card, the card's own phone plays the reel. */
html.embedded .workflow { grid-template-columns:minmax(0,1fr); }
html.embedded .reel { display:none; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }