/* Keep controls above the story's transparent drag surface. */
.story-canvas { z-index:301; pointer-events:none; }
/* Leave space before the laptop frame when supporting copy grows. */
#section-004 .numbered-copy { width:min(28vw,640px); }
#section-004 .dashboard-visual { overflow:visible; }

/* Original photo: 1920 x 1066. Crop: (180,125), 1540 x 905.
   Screen: (318,154), 1259 x 757. Both layers share the same scaling. */
.dashboard-laptop {
  position:absolute; top:50%; left:50%; width:100%;
  max-width:min(1700px,calc((100svh - 100px) * 1540 / 905));
  aspect-ratio:1540 / 905; transform:translate(-50%,-50%); overflow:hidden;
}
.dashboard-laptop-frame {
  position:absolute; top:calc(-125 / 905 * 100%); left:calc(-180 / 1540 * 100%);
  width:calc(1920 / 1540 * 100%); height:calc(1066 / 905 * 100%); max-width:none; pointer-events:none;
}
.dashboard-screen {
  position:absolute; top:calc(29 / 905 * 100%); left:calc(138 / 1540 * 100%);
  width:calc(1259 / 1540 * 100%); height:calc(757 / 905 * 100%);
  overflow:hidden; container-type:size; border-radius:.8% .8% 0 0;
  /* Leave the original photographed camera notch exposed. */
  clip-path:polygon(0 0,44.6% 0,44.6% 1.5%,45.1% 2.3%,54.6% 2.3%,55.1% 1.5%,55.1% 0,100% 0,100% 100%,0 100%);
}
.dashboard-demo {
  --dashboard-teal:#24766b;
  --metric-accent:#416dc2; --metric-soft:#eef3fd; --metric-bar:#9ab6e9; --metric-line:#9fb9e6; --metric-flash:#d6e3fb;
  display:flex; flex-direction:column; width:100%; height:100%; overflow:hidden;
  background:#f5f7fa; color:#203039;
  font-size:clamp(12px,1.55cqw,18px); line-height:1.25; letter-spacing:0;
}
.dashboard-demo [hidden] { display:none !important; }
.dashboard-demo button { color:inherit; cursor:pointer; }
.dashboard-demo.is-interactive button { pointer-events:auto; }
.dashboard-demo button:focus-visible { outline:2px solid #267f70; outline-offset:-3px; }
.dashboard-topbar {
  display:flex; flex:0 0 9%; align-items:center; gap:1em; min-height:0;
  padding:.7em 1.35em .4em; border-bottom:1px solid #dfe8e6; background:#fff;
}
.dashboard-brand { display:flex; align-items:center; gap:.8em; font-weight:650; white-space:nowrap; }
.dashboard-brand img, .dashboard-phone-brand img { display:block; width:3.9em; height:auto; filter:brightness(0); }
.dashboard-brand > span { padding-left:.8em; border-left:1px solid #d3dfdd; font-size:.9em; }
.dashboard-sample { margin-left:auto; color:#718480; font-size:.67em; white-space:nowrap; }
.dashboard-account { display:flex; align-items:center; gap:.5em; font-size:.8em; }
.dashboard-account img { width:2.3em; height:2.3em; border-radius:50%; object-fit:cover; object-position:center 20%; }
.dashboard-account strong { font-weight:600; white-space:nowrap; }
.dashboard-play { display:grid; flex:0 0 2.35em; place-items:center; width:2.35em; height:2.35em; padding:.6em; border:1px solid #ded5ed; border-radius:50%; background:#f1edf8; }
.dashboard-play svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-play-icon, .dashboard-play[aria-pressed="true"] .dashboard-pause-icon { display:none; }
.dashboard-play[aria-pressed="true"] .dashboard-play-icon { display:block; }
.dashboard-body { display:grid; grid-template-columns:minmax(0,.29fr) minmax(0,.71fr); flex:1; min-height:0; gap:1.25em; padding:1.05em 1.25em; }
.dashboard-preview { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; gap:.7em; padding:.9em .9em .6em; border-radius:.8em; background:#153b3f; }
.dashboard-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:.5em; color:#d4e8e2; font-size:.72em; font-weight:600; }
.dashboard-live-dot { display:inline-block; flex:0 0 .5em; width:.5em; height:.5em; border-radius:50%; background:#50ae8a; }
/* Fit the preview by height using the same proportions as the other phones. */
.dashboard-phone {
  display:flex; flex-direction:column; justify-self:center;
  width:auto; height:100%; max-width:100%; aspect-ratio:9 / 19.42;
  min-width:0; min-height:0; overflow:hidden;
  border:.27em solid #071d22; border-radius:1.65em; background:#fff; color:#1b353a; box-shadow:0 .5em 1.2em #04172050;
}
.dashboard-phone-status { position:relative; display:flex; flex:0 0 4.3%; justify-content:space-between; align-items:center; padding:.3em 1.3em; font-size:.6em; font-weight:650; }
.dashboard-phone-status i { position:absolute; top:.35em; left:34%; width:32%; height:1.2em; border-radius:2em; background:#071d22; }
.dashboard-phone-brand { display:flex; flex:0 0 6.8%; align-items:center; justify-content:space-between; padding:.35em .7em; border-bottom:1px solid #e9eeeb; }
.dashboard-phone-brand img { width:3.2em; }
.dashboard-phone-brand > span { font-size:.63em; font-weight:600; }
.dashboard-profile-cover { position:relative; flex:0 0 33%; min-height:0; overflow:hidden; }
.dashboard-profile-cover > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.dashboard-profile-cover > span { position:absolute; left:1em; bottom:.8em; padding:.35em .5em; background:#fff; font-size:.52em; font-weight:650; letter-spacing:.07em; }
.dashboard-profile-info { flex:0 0 auto; padding:.7em .8em .55em; }
.dashboard-profile-info h3 { margin:0; font-size:1.2em; font-weight:650; line-height:1.2; letter-spacing:-.035em; }
.dashboard-profile-info .dashboard-verified { display:inline-grid; place-items:center; width:1.4em; height:1.4em; margin-left:.15em; border-radius:50%; background:#eee8f7; color:#7950a8; font-size:.52em; vertical-align:middle; }
.dashboard-profile-handle { margin:.4em 0 0; color:#587b73; font-size:.66em; overflow-wrap:anywhere; }
.dashboard-profile-bio { margin:.65em 0 .8em; color:#61766f; font-size:.72em; line-height:1.45; white-space:pre-line; }
.dashboard-profile-social { display:flex; align-items:center; justify-content:space-between; gap:.4em; font-size:.62em; color:#667e73; }
.dashboard-profile-social strong { color:#274a3f; font-weight:650; font-variant-numeric:tabular-nums; }
.dashboard-follow-preview { display:inline-flex; align-items:center; justify-content:center; gap:.8em; min-width:5.2em; padding:.55em .6em; border-radius:2em; background:#153b3f; color:#fff; font-weight:600; }
.dashboard-profile-picks { display:flex; flex:1; flex-direction:column; gap:.45em; min-height:0; padding:0 .8em .6em; }
.dashboard-profile-picks > strong { display:block; flex:0 0 auto; font-size:.7em; font-weight:650; }
.dashboard-profile-picks > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; gap:.45em; min-height:0; }
.dashboard-profile-picks img { display:block; width:100%; height:100%; min-height:0; border-radius:.4em; object-fit:cover; }
.dashboard-phone-prompt { display:flex; flex:0 0 6%; justify-content:space-between; align-items:center; gap:.3em; padding:.4em .8em; border-top:1px solid #e7eeea; color:#6b7c75; font-size:.64em; }
.dashboard-phone-prompt > span { color:#317e6b; }
.dashboard-preview-caption { margin:0; color:#b8d6cc; font-size:.6em; text-align:center; }
.dashboard-analytics { display:flex; flex-direction:column; gap:.6em; min-width:0; min-height:0; }
.dashboard-data-heading { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:1em; padding:.1em 0 .35em; }
.dashboard-eyebrow { margin:0 0 .4em; color:#727e8f; font-size:.65em; font-weight:600; letter-spacing:.065em; text-transform:uppercase; }
.dashboard-data-heading h3 { margin:0; font-size:1.8em; font-weight:620; letter-spacing:-.045em; line-height:1.1; }
.dashboard-period { align-self:flex-end; margin-bottom:.2em; padding:.5em .75em; border:1px solid #dfe4ec; border-radius:.4em; color:#68758a; background:#fff; font-size:.68em; white-space:nowrap; }
.dashboard-table-heading { display:flex; flex:0 0 auto; justify-content:space-between; gap:.5em; padding:0 .2em; color:#798395; font-size:.63em; }
.dashboard-table-heading > span:first-child { font-weight:600; color:#59677a; }
.dashboard-stats { display:grid; grid-template-rows:repeat(8,minmax(0,1fr)); flex:1; gap:.32em; min-height:0; margin:0; padding:0; list-style:none; }
/* Match the reference's blue activity, purple profiles, pink try-ons and warm
   commerce accents. The live message shares the active entry's palette. */
.dashboard-stat[data-dashboard-row="views"], .dashboard-stat[data-dashboard-row="clicks"],
.dashboard-demo[data-highlight="views"], .dashboard-demo[data-highlight="clicks"] {
  --metric-accent:#416dc2; --metric-soft:#eef3fd; --metric-bar:#9ab6e9; --metric-line:#9fb9e6; --metric-flash:#d6e3fb;
}
.dashboard-stat[data-dashboard-row="followers"], .dashboard-stat[data-dashboard-row="saves"],
.dashboard-demo[data-highlight="followers"], .dashboard-demo[data-highlight="saves"] {
  --metric-accent:#8252b6; --metric-soft:#f4eefb; --metric-bar:#b59ad5; --metric-line:#bea2da; --metric-flash:#e8d8f6;
}
.dashboard-stat[data-dashboard-row="tryons"], .dashboard-demo[data-highlight="tryons"] {
  --metric-accent:#b93688; --metric-soft:#fceef6; --metric-bar:#dfa1c9; --metric-line:#df9ac6; --metric-flash:#f5d3e8;
}
.dashboard-stat[data-dashboard-row="visits"], .dashboard-demo[data-highlight="visits"] {
  --metric-accent:#9c6a18; --metric-soft:#fff6e7; --metric-bar:#ddbb7c; --metric-line:#dec08a; --metric-flash:#f7e5bd;
}
.dashboard-stat[data-dashboard-row="purchases"], .dashboard-demo[data-highlight="purchases"] {
  --metric-accent:#b8632b; --metric-soft:#fff1e7; --metric-bar:#e4ac83; --metric-line:#dfa57b; --metric-flash:#f8ddc8;
}
.dashboard-stat[data-dashboard-row="sales"], .dashboard-demo[data-highlight="sales"] {
  --metric-accent:#24766b; --metric-soft:#eaf5f1; --metric-bar:#8bbfb2; --metric-line:#98c9bd; --metric-flash:#cfe9e0;
}
.dashboard-stat { min-height:0; }
.dashboard-stat > button { display:grid; grid-template-columns:1.9em minmax(0,1fr) 4.5em 5em 3.9em; align-items:center; gap:.6em; width:100%; height:100%; min-height:0; padding:.3em .7em; border:1px solid #e1e5ed; border-radius:.5em; background:#fff; box-shadow:inset .16em 0 0 var(--metric-accent); text-align:left; transition:background .5s,border-color .5s; }
.dashboard-stat > button[aria-pressed="true"] { border-color:var(--metric-line); background:var(--metric-soft); }
.dashboard-stat > button:focus-visible { outline-color:var(--metric-accent); }
.dashboard-stat-icon { display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:.4em; background:var(--metric-soft); color:var(--metric-accent); }
.dashboard-stat-icon svg { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-stat-label { font-size:.94em; font-weight:550; white-space:nowrap; }
.dashboard-stat-value { font-size:1.32em; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; letter-spacing:-.035em; }
.dashboard-sparkline { display:flex; align-items:flex-end; gap:.2em; height:1.6em; margin-inline:.5em; overflow:hidden; }
.dashboard-sparkline i { flex:1; height:100%; border-radius:2px 2px 0 0; background:var(--metric-bar); transform:scaleY(var(--bar)); transform-origin:bottom; transition:transform .9s ease,background .6s; }
.dashboard-stat > button[aria-pressed="true"] .dashboard-sparkline i { background:var(--metric-accent); }
.dashboard-trend { justify-self:end; padding:.28em .45em; border-radius:.4em; color:var(--metric-accent); background:var(--metric-soft); font-size:.71em; font-weight:600; white-space:nowrap; }
.dashboard-activity { display:flex; flex:0 0 auto; align-items:center; gap:.65em; min-height:2.65em; padding:.55em .8em; border-radius:.45em; color:var(--metric-accent); background:var(--metric-soft); font-size:.7em; transition:color .5s,background .5s; }
.dashboard-activity > span { flex:1; min-width:0; }
.dashboard-activity > small { flex:0 0 auto; color:#748093; font-size:.8em; }
/* Exchange profile and analytics together, inside the fixed laptop screen. */
.dashboard-demo[data-creator-phase="leaving"] :is(.dashboard-body,.dashboard-account) { animation:dashboard-creator-out .3s ease both; }
.dashboard-demo[data-creator-phase="entering"] :is(.dashboard-body,.dashboard-account) { animation:dashboard-creator-in .45s ease both; }
.dashboard-demo[data-running="true"] .dashboard-live-dot { animation:dashboard-live 2s ease-in-out infinite; }
.dashboard-demo[data-running="true"] .dashboard-stat.is-updating .dashboard-trend { animation:dashboard-update .9s ease both; }
.dashboard-demo[data-running="true"] .dashboard-stat.is-updating .dashboard-stat-value { animation:dashboard-value .7s ease both; }
.dashboard-demo[data-running="true"][data-highlight="followers"] .dashboard-profile-social strong { animation:dashboard-profile-pulse 1s ease both; }
.dashboard-demo[data-running="true"][data-highlight="saves"] .dashboard-profile-picks { animation:dashboard-profile-pulse 1s ease both; }
.dashboard-demo[data-running="false"] *, .dashboard-demo[data-running="false"] *::after { animation-play-state:paused !important; }
@keyframes dashboard-live { 50% { box-shadow:0 0 0 .25em #5dab8425; } }
@keyframes dashboard-update { 0% { background:var(--metric-flash); transform:translateY(3px); } 100% { background:var(--metric-soft); transform:translateY(0); } }
@keyframes dashboard-value { from { color:var(--metric-accent); transform:translateY(2px); } to { color:#203039; transform:translateY(0); } }
@keyframes dashboard-profile-pulse { 40% { opacity:.55; } }
@keyframes dashboard-creator-out { to { opacity:0; transform:translateY(-.35em); } }
@keyframes dashboard-creator-in { from { opacity:0; transform:translateY(.35em); } to { opacity:1; transform:translateY(0); } }

@container (max-width:760px) {
  .dashboard-body { gap:.9em; padding:.85em; }
  .dashboard-preview { padding:.7em .7em .5em; gap:.5em; }
  .dashboard-stat > button { grid-template-columns:1.8em minmax(0,1fr) 4.2em 3.6em; gap:.45em; padding-inline:.6em; }
  .dashboard-sparkline { display:none; }
  .dashboard-data-heading h3 { font-size:1.65em; }
  .dashboard-profile-bio { margin-block:.5em; font-size:.65em; }
  .dashboard-profile-info { padding-block:.55em; }
  .dashboard-profile-handle { margin-top:.25em; }
  .dashboard-table-heading { font-size:.58em; }
}
@container (max-width:560px) {
  .dashboard-demo { font-size:clamp(7px,2cqw,11px); }
  .dashboard-topbar { padding:.3em .75em; gap:.65em; }
  .dashboard-brand > span { font-size:.85em; }
  .dashboard-account { display:none; }
  .dashboard-sample { font-size:.75em; }
  .dashboard-play { flex-basis:2em; width:2em; height:2em; padding:.45em; }
  .dashboard-body { grid-template-columns:minmax(0,.31fr) minmax(0,.69fr); gap:.7em; padding:.65em; }
  .dashboard-preview { padding:.6em .45em .4em; gap:.45em; grid-template-rows:auto minmax(0,1fr); }
  .dashboard-preview-heading { font-size:.7em; }
  .dashboard-preview-caption, .dashboard-table-heading, .dashboard-eyebrow, .dashboard-profile-bio, .dashboard-profile-cover > span, .dashboard-phone-brand > span, .dashboard-follow-preview { display:none; }
  .dashboard-phone { border-width:.2em; border-radius:1.1em; }
  .dashboard-profile-cover { flex-basis:35%; }
  .dashboard-profile-info { padding:.55em .5em; }
  .dashboard-profile-info h3 { font-size:1.1em; }
  .dashboard-profile-handle { font-size:.7em; }
  .dashboard-profile-social { margin-top:.45em; font-size:.7em; }
  .dashboard-profile-picks { padding-inline:.5em; gap:.35em; }
  .dashboard-profile-picks > strong { font-size:.72em; }
  .dashboard-phone-prompt { font-size:.62em; }
  .dashboard-data-heading { gap:.35em; padding-bottom:.1em; }
  .dashboard-data-heading h3 { font-size:1.35em; }
  .dashboard-period { padding:.3em .45em; font-size:.6em; }
  .dashboard-analytics { gap:.4em; }
  .dashboard-stats { gap:.2em; }
  .dashboard-stat > button { grid-template-columns:minmax(0,1fr) 3.6em 3em; gap:.3em; padding:.1em .45em; border-width:.5px; border-radius:.35em; }
  .dashboard-stat-icon { display:none; }
  .dashboard-stat-label { font-size:.85em; }
  .dashboard-stat-value { font-size:1.1em; }
  .dashboard-trend { padding:.2em .25em; font-size:.63em; }
  .dashboard-activity { min-height:2.4em; padding:.3em .5em; font-size:.65em; }
  .dashboard-activity > small { display:none; }
}
@media (max-width:1023px), (max-height:680px), (max-aspect-ratio:4/3), (min-aspect-ratio:5/2) {
  #section-004 .numbered-copy { width:100%; }
  #section-004 .dashboard-visual { width:calc(100% - 2 * var(--mobile-gutter)); height:auto; aspect-ratio:1540 / 905; margin:96px auto 20px; border-radius:0; }
  .dashboard-laptop { position:relative; inset:auto; width:100%; max-width:none; transform:none; }
}
@media (min-width:701px) and (max-width:1100px) {
  .mobile-ready #section-004 { display:flex; padding:90px 32px 60px; gap:30px; }
  .mobile-ready #section-004 .dashboard-visual { width:100%; margin:0; }
  .mobile-ready #section-004 .numbered-copy { max-width:680px; }
}
@media (min-width:1101px) {
  .mobile-ready #section-004 { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
  .mobile-ready #section-004 .dashboard-visual { width:100%; margin:0; }
}
@media (prefers-reduced-motion:reduce) {
  .dashboard-demo *, .dashboard-demo *::after { animation:none !important; transition:none !important; }
}