/* ============================================================
   ScolerAI — studio-mocks.css
   The drawn study-tool mockups, shared by BOTH marketing pages:
   the home deck's Study Studio slide and the tour page's studio,
   research and dashboard sections.

   Why drawn rather than screenshotted: a screenshot is English-only,
   so the one surface whose whole claim is "in your language" was the
   one surface that could not be translated. It is also ~40 KB of
   raster that goes soft the moment it is scaled into a small frame,
   and it goes stale the day the app is redesigned.

   Each composition is authored at a FIXED pixel size and scaled into
   whatever frame holds it by studio.js — the same fit
   VideoSlideHtmlService applies to a real video slide — so a long
   locale fills more of the line instead of reflowing the layout.

   `.mock` here is deliberately unstyled beyond its box: the dark home
   stage and the light tour page each supply their own rim and shadow.
   ============================================================ */

:root {
  --mono-mock: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mock { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #F4F6F8; }
/* The dashboard is a phone, so it carries its own ratio. */
.mock--phone { aspect-ratio: 420 / 900; border-radius: 0; background: none; }

.mk {
  position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0;
  --ground: #F4F6F8; --panel: #FFFFFF; --ink2: #171B22; --muted: #5B6470;
  --line2: #D5DAE1; --accent2: #0B7A75; --accent-soft2: #DCEFEC;
  background: var(--ground); color: var(--ink2); font-family: Inter, sans-serif; text-align: left;
}

/* 1 · Video lesson — the ledger slide, inside its player */
.vl__wash { position: absolute; inset: 0; background: linear-gradient(105deg, #F4F6F8 40%, #E8F4F0 72%, #DCEFEC 100%); }
.vl__art { position: absolute; right: 16px; top: 0; width: 560px; height: 720px; }
.vl__left { position: absolute; left: 74px; top: 48px; width: 626px; }
.vl__eyebrows { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vl__topic { font-family: var(--mono-mock); font-size: 18px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); }
.vl__kicker { font-family: var(--mono-mock); font-size: 18px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent2); white-space: nowrap; }
.vl__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 54px; line-height: 1.06; letter-spacing: -0.022em; margin: 24px 0 0; color: var(--ink2); }
.vl__ledger { margin-top: 34px; }
.vl__row { font-size: 25px; line-height: 1.3; margin: 0; padding: 17px 0; border-bottom: 1px solid var(--line2); color: var(--ink2); }
.vl__row:last-child { border-bottom: none; }
.vl__row--em { color: var(--accent2); font-weight: 600; }
.vl__sw { display: flex; gap: 20px; margin-top: 26px; border-left: 5px solid var(--accent2); padding-left: 20px; }
.vl__sw-l { font-family: var(--mono-mock); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 6px; white-space: nowrap; }
.vl__sw-b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 26px; line-height: 1.28; margin: 0; color: var(--ink2); }
/* player chrome */
.vp { position: absolute; inset: 0; pointer-events: none; }
.vp::before { content: ''; position: absolute; inset: 0; background: rgba(14,19,27,0.16); }
.vp__play { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 118px; height: 118px; border-radius: 999px; background: rgba(14,19,27,0.46); border: 2.5px solid rgba(255,255,255,0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,0.22); }
.vp__play svg { margin-left: 6px; }
.vp__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 44px 24px; background: linear-gradient(180deg, rgba(23,27,34,0) 0%, rgba(23,27,34,0.09) 58%, rgba(23,27,34,0.19) 100%); }
.vp__track { position: relative; height: 6px; border-radius: 999px; background: rgba(23,27,34,0.20); }
.vp__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 33%; border-radius: 999px; background: var(--accent2); }
.vp__knob { position: absolute; left: 33%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 999px; background: #FFFFFF; border: 3px solid var(--accent2); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.vp__times { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono-mock); font-size: 17px; color: #3E4854; }

/* 2 · Podcast — the app's player card */
.mk--pd { background: #EEF1F6; display: grid; place-items: center; }
.pdp { width: 1104px; border-radius: 30px; padding: 40px 44px 34px; background: linear-gradient(135deg, #4C52BC 0%, #5A60C9 55%, #4A50B8 100%); box-shadow: 0 26px 60px rgba(60,66,160,0.30); color: #fff; }
.pdp__top { display: flex; gap: 26px; align-items: center; }
.pdp__cover { position: relative; width: 104px; height: 104px; border-radius: 22px; flex: none; background: rgba(255,255,255,0.16); display: grid; place-items: center; }
.pdp__badge { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 999px; background: #6A70D6; display: grid; place-items: center; border: 3px solid #545ABF; }
.pdp__meta { min-width: 0; }
.pdp__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 33px; line-height: 1.2; letter-spacing: -0.018em; margin: 0; color: #fff; }
.pdp__sub { font-size: 21px; color: rgba(255,255,255,0.72); margin: 10px 0 0; }
.pdp__track { position: relative; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.34); margin-top: 34px; }
.pdp__knob { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 999px; background: #fff; }
.pdp__times { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--mono-mock); font-size: 18px; color: rgba(255,255,255,0.78); }
.pdp__ctl { display: flex; align-items: center; justify-content: center; gap: 34px; margin-top: 26px; }
.pdp__stop { width: 17px; height: 17px; border-radius: 4px; background: rgba(255,255,255,0.9); }
.pdp__play { width: 74px; height: 74px; border-radius: 999px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(20,24,90,0.28); }
.pdp__play svg { margin-left: 4px; }
.pdp__rate { border: 2px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 8px 20px; font-size: 19px; font-weight: 600; color: #fff; }

/* 3 · Interactive app — the enhanced animation and its control panel */
.mk--ap { background: #F5F7F3; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ap2__head { position: relative; overflow: hidden; flex: none; border-radius: 22px; padding: 20px 26px; color: #fff; background: linear-gradient(118deg, #34795A 0%, #3F8663 46%, #5FA07E 100%); }
.ap2__head::after { content: ''; position: absolute; right: -40px; top: -80px; width: 340px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,0.22), rgba(255,255,255,0)); }
.ap2__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.92); margin: 0; }
.ap2__eyebrow i { width: 11px; height: 11px; border-radius: 999px; background: #F2B33D; display: block; flex: none; }
.ap2__title { font-family: Poppins, sans-serif; font-weight: 700; font-size: 42px; line-height: 1.04; letter-spacing: -0.03em; margin: 10px 0 0; }
.ap2__desc { font-size: 17px; line-height: 1.42; color: rgba(255,255,255,0.9); margin: 9px 0 0; max-width: 920px; }
.ap2__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.ap2__chip { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; padding: 7px 15px; }
.ap2__chip i { width: 9px; height: 9px; border-radius: 999px; background: #F2B33D; display: block; flex: none; }
.ap2__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 434px; gap: 14px; }
.ap2__stage { background: #fff; border-radius: 20px; padding: 12px; overflow: hidden; }
.ap2__stage svg { width: 100%; height: 100%; display: block; border-radius: 12px; }
.ap2__side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ap2__panel { background: #fff; border-radius: 20px; padding: 15px 18px; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.ap2__panel--out { flex: none; }
.ap2__h { font-family: Poppins, sans-serif; font-weight: 600; font-size: 21px; margin: 0; color: #14211A; }
.ap2__sub { font-size: 14px; line-height: 1.4; color: #6B7A72; margin: 4px 0 0; }
.ap2__btns { display: flex; gap: 9px; margin: 12px 0 0; }
.ap2__btn { border-radius: 11px; padding: 10px 17px; font-size: 15px; font-weight: 600; color: #14211A; background: #fff; border: 1px solid #DFE5E0; }
.ap2__btn--on { background: #1D4633; color: #fff; border-color: #1D4633; }
.ap2__srow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; }
.ap2__slab { font-size: 15px; font-weight: 600; color: #14211A; }
.ap2__sval { font-size: 15px; font-weight: 600; color: #14211A; font-family: var(--mono-mock); }
.ap2__strack { position: relative; display: block; height: 8px; border-radius: 999px; margin-top: 5px; background: linear-gradient(90deg, #3F8663 0%, #7FB98C 46%, #E9C64A 100%); }
.ap2__strack b { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(20,33,26,0.32); display: block; }
.ap2__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.ap2__tile { border: 1px solid #E6EBE7; border-radius: 13px; padding: 10px 12px; }
.ap2__tl { display: block; font-size: 14px; font-weight: 600; color: #6B7A72; }
.ap2__tv { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: 25px; color: #14211A; margin-top: 4px; }
.ap2__ts { display: block; font-size: 12px; line-height: 1.3; color: #8A968F; margin-top: 4px; }

/* 4 · AI image — the visual generator's editorial diagram */
.mk--im { padding: 0; }
.im__art { position: absolute; inset: 0; width: 1280px; height: 720px; }
.im__chip { position: absolute; bottom: 26px; border-radius: 999px; padding: 11px 20px; font-size: 19px; background: rgba(31,41,51,0.82); color: #F6EFE0; }
.im__chip--l { left: 26px; max-width: 780px; }
.im__chip--r { right: 26px; font-family: var(--mono-mock); font-size: 16px; letter-spacing: 0.05em; }

/* 5 · Chart — the visual generator's radar, in the app's card */
.mk--ch { background: #FFFFFF; padding: 38px 56px 24px; }
.ch__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 33px; letter-spacing: -0.018em; margin: 0; }
.ch__legend { display: flex; justify-content: center; gap: 30px; margin-top: 10px; }
.ch__lg { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #4A5560; }
.ch__lg i { width: 34px; height: 16px; border-radius: 4px; border: 3px solid; display: block; }
.ch__svg { width: 100%; height: 478px; display: block; margin-top: -14px; }
.ch__key { display: flex; gap: 18px; align-items: flex-start; border-left: 5px solid #B45309; padding-left: 16px; }
.ch__key-l { font-family: var(--mono-mock); font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: #B45309; padding-top: 4px; white-space: nowrap; }
.ch__key-b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; margin: 0; line-height: 1.25; }

/* 6 · Study notes — the note page, its generated cover, and the tool menu */
.mk--nt { background: #F7F9FB; }
.nt2__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px 12px; }
.nt2__t { font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; color: #171B22; }
.nt2__kebab { display: flex; flex-direction: column; gap: 4px; }
.nt2__kebab i { width: 5px; height: 5px; border-radius: 999px; background: #5B6470; display: block; }
.nt2__cover { position: relative; margin: 0 22px; height: 258px; border-radius: 16px; overflow: hidden; }
.nt2__cover svg { width: 100%; height: 100%; display: block; }
.nt2__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,30,0) 42%, rgba(16,22,30,0.74) 100%); }
.nt2__pill { position: absolute; left: 16px; top: 16px; background: rgba(255,255,255,0.9); color: #2B3242; border-radius: 999px; padding: 8px 18px; font-size: 17px; font-weight: 500; }
.nt2__ct { position: absolute; left: 26px; right: 26px; bottom: 20px; }
.nt2__cth { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: 34px; color: #fff; letter-spacing: -0.02em; }
.nt2__cd { display: block; font-size: 17px; color: rgba(255,255,255,0.82); margin-top: 6px; }
.nt2__body { padding: 20px 26px 0; overflow: hidden; }
.nt2__h1 { display: flex; gap: 12px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.018em; color: #171B22; margin: 0; }
.nt2__p { font-size: 18px; line-height: 1.5; color: #414B58; margin: 12px 0 0; max-width: 880px; }
.nt2__h2 { display: flex; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; margin: 15px 0 0; color: #171B22; }
.nt2__ul { margin: 9px 0 0; padding-left: 26px; }
.nt2__ul li { font-size: 17px; line-height: 1.5; color: #414B58; margin-bottom: 7px; max-width: 860px; }
.nt2__ul li::marker { color: #2E77C4; }
.nt2__ul li b { color: #171B22; font-weight: 600; }
.nm { position: absolute; right: 26px; top: 58px; width: 322px; background: #EDF0F4; border-radius: 14px; padding: 8px 0; box-shadow: 0 18px 44px rgba(20,25,35,0.3); z-index: 3; }
.nm__row { display: flex; align-items: center; gap: 16px; padding: 13px 20px; font-size: 19px; color: #2B3242; }
.nm__row--gen { font-weight: 500; }
.nm__row svg { flex: none; }
.nm__sep { display: block; height: 1px; background: #DCE1E8; margin: 7px 0; }

/* 7 · Courses — the generated course, as the learner opens it */
.mk--cr { background: #F1F4F8; padding: 0; display: flex; flex-direction: column; }
.cs__hero { position: relative; height: 278px; flex: none; overflow: hidden; }
.cs__hero svg { width: 100%; height: 100%; display: block; }
.cs__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,26,0.34) 0%, rgba(12,18,26,0) 32%, rgba(12,18,26,0.8) 100%); }
.cs__back { position: absolute; left: 22px; top: 18px; }
.cs__chips { position: absolute; left: 26px; bottom: 84px; display: flex; flex-wrap: wrap; gap: 10px; }
.cs__chip { display: flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(22,28,38,0.62); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 16px; }
.cs__title { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 40px; text-align: center; font-family: Poppins, sans-serif; font-weight: 600; font-size: 37px; line-height: 1.16; color: #fff; margin: 0; letter-spacing: -0.02em; }
.cs__body { flex: 1; min-height: 0; padding: 18px 30px 0; overflow: hidden; }
.cs__about { background: #fff; border: 1px solid #E1E7EF; border-radius: 14px; padding: 17px 22px 19px; }
.cs__ah { display: flex; align-items: center; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; margin: 0; color: #171B22; }
.cs__ab { font-size: 17px; line-height: 1.5; color: #414B58; margin: 10px 0 0; }
.cs__ab b { color: #171B22; font-weight: 600; }
.cs__prow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 16px; }
.cs__pl { font-size: 18px; font-weight: 600; color: #171B22; }
.cs__pr { font-size: 17px; color: #6B7684; white-space: nowrap; }
.cs__ptrack { display: block; height: 9px; border-radius: 999px; background: #DDE3EB; margin-top: 9px; }
.cs__lh { display: flex; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; margin: 16px 0 0; color: #171B22; }
.cs__lesson { background: #fff; border: 1px solid #E1E7EF; border-radius: 14px; padding: 16px 22px 18px; margin-top: 12px; }
.cs__lt { font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; margin: 0; color: #171B22; }
.cs__ld { font-size: 16px; line-height: 1.45; color: #8A93A1; margin: 8px 0 0; }
.cs__view { display: block; width: max-content; margin: 12px auto 0; background: #EEF2F7; color: #2B3242; border-radius: 999px; padding: 12px 26px; font-size: 18px; font-weight: 600; }

/* 8 · Flashcards — the study view */
.mk--fc { background: #FFFFFF; padding: 0 30px 24px; display: flex; flex-direction: column; }
.fs__prog { height: 7px; background: #E6EAF0; margin: 0 -30px; }
.fs__prog span { display: block; width: 7%; height: 100%; background: #2B4A7E; }
.fs__count { text-align: center; font-size: 19px; color: #6B7684; margin: 16px 0 0; }
.fs__card { flex: 1; margin-top: 14px; background: #F5F8FD; border: 1px solid #CFDCF0; border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 70px; }
.fs__pill { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); background: #DEE8F6; color: #2B4A7E; border-radius: 999px; padding: 8px 20px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.fs__q { font-size: 37px; color: #1F2933; text-align: center; margin: 0; line-height: 1.3; }
.fs__flip { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 17px; color: #9AA3B0; }
.fs__dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.fs__dots i { width: 12px; height: 12px; border-radius: 999px; background: #D5DAE1; display: block; }
.fs__dots i.on { background: #2B4A7E; }
.fs__dots i.ok { background: #3DA35D; }
.fs__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.fs__btn { display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; padding: 19px; font-size: 22px; font-weight: 600; }
.fs__btn--still { background: #FFFFFF; border: 2px solid #E7C200; color: #C99400; }
.fs__btn--got { background: #3DA35D; color: #FFFFFF; }

/* 9 · Quizzes — the take view */
.mk--qz { background: #F8FAFC; padding: 0; display: flex; flex-direction: column; }
.qt__top { display: flex; justify-content: space-between; padding: 20px 30px 12px; font-size: 18px; color: #6B7684; }
.qt__pct { color: #2563EB; font-weight: 600; }
.qt__bar { height: 6px; background: #E6EAF0; margin: 0 30px; border-radius: 999px; }
.qt__scroll { flex: 1; overflow: hidden; padding: 22px 200px 0; }
.qt__card { background: #EEF2F8; border-radius: 16px; padding: 22px 26px; margin-bottom: 18px; }
.qt__chips { display: flex; align-items: center; gap: 12px; }
.qt__q { background: #DCE8F8; color: #1D4ED8; border-radius: 8px; padding: 5px 12px; font-size: 16px; font-weight: 600; }
.qt__type { display: flex; align-items: center; gap: 7px; font-size: 16px; color: #7A6B8E; }
.qt__type i { width: 14px; height: 14px; border-radius: 999px; border: 3px solid #8B6FA8; display: block; }
.qt__text { font-size: 24px; color: #1F2933; margin: 16px 0; }
.qt__opt { display: flex; align-items: center; gap: 16px; background: #FFFFFF; border: 1px solid #E4E8EF; border-radius: 10px; padding: 15px 20px; margin-bottom: 10px; font-size: 20px; color: #2B3242; }
.qt__radio { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #AEB9C6; display: block; flex: none; }
.qt__foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 30px; border-top: 1px solid #E6EAF0; background: #FFFFFF; font-size: 18px; color: #6B7684; }
.qt__send { display: flex; align-items: center; gap: 10px; background: #1E3A5F; color: #fff; border-radius: 10px; padding: 14px 26px; font-size: 19px; font-weight: 600; }

/* 10 · Web research — the synthesis with its sources docked beside it */
.mk--wr { background: #F5F7FA; display: flex; flex-direction: column; }
.wr__bar { flex: none; height: 56px; background: #FFFFFF; border-bottom: 1px solid #E6EAF0; display: flex; align-items: center; gap: 16px; padding: 0 22px; }
.wr__app { font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; color: #171B22; }
.wr__acts { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.wr__body { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 16px 22px 0; }

/* The panel is 320pt in the app; it docks only on a wide content box and
   becomes a bottom sheet on a narrow one. */
.wr__panel { width: 336px; flex: none; display: flex; flex-direction: column; min-height: 0; background: #FFFFFF; border: 1px solid #E6EAF0; border-radius: 14px; overflow: hidden; }
.wr__phead { flex: none; display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: #EDF1F7; border-bottom: 1px solid #E2E7EF; }
.wr__ptitle { font-weight: 600; font-size: 17px; color: #2B3242; }
.wr__count { margin-left: auto; font-family: var(--mono-mock); font-size: 15px; color: #5B6470; }
.wr__cards { flex: 1; min-height: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 11px; }
.wr__card { flex: none; display: flex; gap: 11px; background: #FFFFFF; border: 1px solid #E6EAF0; border-radius: 12px; padding: 13px 14px; box-shadow: 0 1px 3px rgba(23,27,34,0.05); }
.wr__n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #E3EAF8; color: #3B5BA5; display: grid; place-items: center; font-family: var(--mono-mock); font-size: 14px; font-weight: 500; }
.wr__cbody { flex: 1; min-width: 0; }
.wr__ct { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: #171B22; }
.wr__cmeta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.wr__cmeta em { font-style: normal; color: #7A8593; }
/* Green at 70%, orange at 50% — QualityScoreBadge's own thresholds. */
.wr__cmeta i { width: 7px; height: 7px; border-radius: 999px; display: block; margin-left: 4px; flex: none; }
.wr__cmeta b { font-weight: 600; color: #5B6470; }
.wr__cs { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: #8A93A1; }
.wr__ext { flex: none; margin-top: 2px; }

.wr__main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* primaryContainer → tertiaryContainer, top-left to bottom-right. */
.wr__hero { flex: none; border-radius: 18px; padding: 22px 26px; background: linear-gradient(135deg, #D7E5FB 0%, #E7E1FA 52%, #F7E3EF 100%); }
.wr__htitle { font-family: Poppins, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.22; letter-spacing: -0.015em; color: #2A3654; margin: 0; }
.wr__pills { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 16px; }
.wr__pill { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border-radius: 999px; padding: 9px 16px; font-size: 15px; color: #3B4252; box-shadow: 0 1px 3px rgba(20,25,40,0.08); white-space: nowrap; }
.wr__article { flex: 1; min-height: 0; overflow: hidden; margin-top: 14px; background: #FFFFFF; border: 1px solid #E6EAF0; border-radius: 14px; padding: 20px 26px; }
.wr__lead { font-size: 17px; line-height: 1.5; color: #2B3242; margin: 0; }
.wr__h { font-size: 17px; font-weight: 400; color: #2B3242; margin: 16px 0 0; }
.wr__ul { margin: 10px 0 0; padding-left: 24px; }
.wr__ul li { font-size: 16px; line-height: 1.55; color: #2B3242; }
.wr__ul li::marker { color: #8A93A1; }
.wr__cite { color: #2563EB; text-decoration: none; font-weight: 500; }

/* 11 · Dashboard — the hero-sheet dashboard, in a phone.
   Authored at 420x900 rather than 1280x720; studio.js reads each
   canvas's own width, so the two live side by side. */
.mk--dash { width: 420px; height: 900px; background: none; }
.dsh__phone { position: absolute; inset: 0; border-radius: 52px; background: #14161C; padding: 11px; box-shadow: 0 30px 70px rgba(20, 25, 35, 0.32); }
.dsh__screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #F2F4F8; display: flex; flex-direction: column; }

/* The photograph is the app's own night dashboard hero, so the tour and
   the product show the same room. */
.dsh__hero { position: relative; flex: none; height: 330px; display: flex; flex-direction: column; background-image: url('../assets/bg_night_sm.jpg'); background-size: cover; background-position: 62% 45%; padding: 20px 22px 78px; }
.dsh__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,22,0.52) 0%, rgba(10,14,22,0.18) 42%, rgba(10,14,22,0.30) 100%); }
.dsh__hero > .dsh__top,
.dsh__hero > .dsh__greet,
.dsh__hero > .dsh__name,
.dsh__hero > .dsh__meta { position: relative; }
.dsh__top { display: flex; align-items: center; justify-content: space-between; }
.dsh__avatar { width: 34px; height: 34px; border-radius: 999px; background: linear-gradient(140deg, #C9A88A, #8A6B52); border: 2px solid rgba(255,255,255,0.75); display: block; }
.dsh__greet { display: block; margin-top: auto; font-size: 17px; font-weight: 600; color: #FFFFFF; }
.dsh__name { display: block; font-family: Poppins, sans-serif; font-weight: 700; font-size: 38px; line-height: 1.1; color: #FFFFFF; letter-spacing: -0.02em; }
.dsh__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; padding-right: 2px; }
.dsh__time { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: rgba(255,255,255,0.88); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dsh__ins { font-size: 14px; font-weight: 600; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dsh__weekstrip { position: absolute; right: 22px; bottom: 112px; display: flex; gap: 9px; z-index: 2; }
.dsh__day { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55); }
.dsh__day--on { color: #FFFFFF; border-top: 2px solid #FFFFFF; padding-top: 4px; margin-top: -6px; }
/* DashboardPeekCard: standard glass ON the photograph. */
.dsh__peek { position: absolute; left: 50%; bottom: 27px; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.62); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); border-radius: 999px; padding: 11px 20px; font-size: 15px; font-weight: 600; color: #1F2530; white-space: nowrap; }

.dsh__sheet { flex: 1; min-height: 0; margin-top: -18px; border-radius: 22px 22px 0 0; background: #F2F4F8; padding: 16px 14px 0; overflow: hidden; }
.dsh__bar { background: #FFFFFF; border-radius: 18px; padding: 14px 15px 12px; box-shadow: 0 3px 14px rgba(23,27,34,0.08); }
.dsh__barhead { display: flex; align-items: center; gap: 11px; }
.dsh__spark { flex: none; width: 34px; height: 34px; border-radius: 999px; background: #EDF1F7; display: grid; place-items: center; }
.dsh__asktext { font-size: 15px; font-weight: 600; color: #1F2530; }
.dsh__barrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.dsh__barsp { flex: 1; }
.dsh__go { display: flex; align-items: center; gap: 7px; background: #2B4A7E; color: #FFFFFF; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; }
.dsh__chips { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.dsh__chip { display: flex; align-items: center; gap: 7px; background: #FFFFFF; border: 1px solid #E2E7EF; border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 500; color: #2B3242; }
.dsh__rhead { display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; padding: 0 2px; }
.dsh__rhead b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; color: #1F2530; }
.dsh__rhead i { font-style: normal; font-size: 14px; font-weight: 600; color: #2B4A7E; }
.dsh__notes { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.dsh__note { display: flex; gap: 11px; background: #F3E9F6; border-radius: 14px; overflow: hidden; }
.dsh__cover { flex: none; width: 76px; height: 76px; display: grid; place-items: center; }
.dsh__cover svg { width: 58px; height: 58px; }
.dsh__nbody { flex: 1; min-width: 0; padding: 9px 12px 9px 0; }
.dsh__nt { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: #1F2530; }
.dsh__pill { display: inline-block; font-style: normal; margin-top: 5px; background: rgba(255,255,255,0.8); border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 500; color: #4A5560; }
.dsh__ns { display: block; font-style: normal; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: #6B7280; }
.dsh__fab { position: absolute; right: 16px; bottom: 18px; width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,0.72); backdrop-filter: blur(12px) saturate(1.6); -webkit-backdrop-filter: blur(12px) saturate(1.6); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(23,27,34,0.16); }

/* ── Host framing ──────────────────────────────────────────────
   The tour page wraps each mock in its own `.shot` figure, which already
   supplies the rim, radius and shadow. The dashboard is the exception:
   it draws its own phone body, so it gets no frame — only a width. */
.mk-slot--drawn { display: block; }
.dashboard__visual .mk-slot { width: 100%; max-width: 340px; margin: 0 auto; }