/* I1–I4 · course cards that show what each course is about.
   Tones reuse I's Noise & Gradient textures: orange for building, black for agents, green for teaching. */
body[data-covers] [data-tone='orange'] { --c-surface:#f8ddc7; --c-texture:url('/media/textures/g-orange.jpg'); --c-muted:#6b5445; --c-arrow:var(--ink); }
body[data-covers] [data-tone='black'] { --c-surface:#0a0909; --c-texture:url('/media/textures/g-ember.jpg'); --c-muted:#a9a9b0; --c-arrow:var(--orange); }
body[data-covers] [data-tone='green'] { --c-surface:#d9f3e9; --c-texture:url('/media/textures/g-green.jpg'); --c-muted:#46615a; --c-arrow:var(--ink); }
body[data-covers] .d-course:hover .v-course-art img { transform:none; }

/* ——— I1 · Objects: the cover becomes a textured tile, three clay objects rise out of it ——— */
body[data-covers='i1'] .v-course-art { --h:150px; position:relative; isolation:isolate; overflow:visible; height:var(--h); margin-top:22px; background:none; border-radius:0; direction:ltr; }
body[data-covers='i1'] .c-texture { position:absolute; inset:0; z-index:-1; border-radius:70px 70px 15px 15px; background:var(--c-surface) var(--c-texture) center/cover; }
body[data-covers='i1'] .v-course-art .c-obj { position:absolute; bottom:0; height:auto; object-fit:contain; filter:drop-shadow(0 8px 10px rgb(5 5 6 / .14)); }
body[data-covers='i1'] .c-obj-2 { z-index:2; left:50%; width:calc(var(--h) * 1.06); bottom:calc(var(--h) * .07); transform:translateX(-50%); }
body[data-covers='i1'] .c-obj-1 { left:7%; width:calc(var(--h) * .72); bottom:calc(var(--h) * .14); }
body[data-covers='i1'] .c-obj-3 { right:7%; width:calc(var(--h) * .72); bottom:calc(var(--h) * .24); }

/* ——— I2 · Illustrated: a flat scene on a white arch ——— */
body[data-covers='i2'] .v-course-art { height:150px; padding:18px 22px 0; background:var(--white); }
body[data-covers='i2'] .v-course-art img { object-fit:contain; object-position:center bottom; }

/* ——— I3 + I4 · the whole card is the tile; its drawing is cut by the bottom edge ——— */
body[data-covers] .d-course.c-tile { --pad-x:30px; position:relative; isolation:isolate; overflow:hidden; padding-bottom:0; border-radius:28px; background:var(--c-surface) var(--c-texture) center/cover; }
body[data-covers] .c-tile[data-tone='black'] { color:var(--white); }
body[data-covers] .c-tile[data-tone='black'] .d-course-link { color:var(--white); }
body[data-covers] .c-tile .d-course-category,
body[data-covers] .c-tile .d-course-description,
body[data-covers] .c-tile .d-course-end>span { color:var(--c-muted); }
body[data-covers] .c-tile .d-course-link>span:last-child { color:var(--c-arrow); }
body[data-covers] .c-stage { position:relative; flex:none; height:238px; margin:30px calc(-1 * var(--pad-x)) 0; }
body[data-covers] .c-set { position:relative; height:100%; width:min(100%, 420px); margin-inline:auto; }

/* I3 · the same clay objects, large; the middle one runs off the card */
body[data-covers='i3'] .c-set { direction:ltr; }
body[data-covers='i3'] .c-obj { position:absolute; height:auto; filter:drop-shadow(0 18px 18px rgb(5 5 6 / .18)); }
body[data-covers='i3'] .c-obj-2 { z-index:2; left:50%; bottom:-64px; width:min(74%, 290px); transform:translateX(-50%); }
body[data-covers='i3'] .c-obj-1 { z-index:3; left:1%; bottom:30px; width:min(40%, 158px); }
body[data-covers='i3'] .c-obj-3 { right:-2%; bottom:92px; width:min(40%, 158px); }

/* I4 · screens: text-free product surfaces, one piece lifted off the rest */
body[data-covers='i4'] .c-ui { position:absolute; display:flex; flex-direction:column; gap:7px; padding:14px; background:var(--white); border-radius:14px; }
/* D strips shadows inside #app; the lifted piece is the one surface allowed to keep one. */
body[data-covers='i4'] #app .c-lifted { z-index:3; box-shadow:0 1px 2px rgb(40 30 20 / .1), 0 24px 44px -14px rgb(40 30 20 / .45) !important; }
body[data-covers='i4'] #app [data-tone='black'] .c-lifted { box-shadow:0 18px 40px -14px rgb(0 0 0 / .7) !important; }
body[data-covers='i4'] .c-set { direction:ltr; --c-dir:ltr; }
html[dir='rtl'] body[data-covers='i4'] .c-set { --c-dir:rtl; }
body[data-covers='i4'] .c-ui>* { direction:var(--c-dir); }
body[data-covers='i4'] .c-line { display:block; width:var(--w); height:6px; flex:none; border-radius:9px; background:#e7e5e1; }
body[data-covers='i4'] .c-line.c-ink { height:7px; background:var(--ink); }
body[data-covers='i4'] .c-line.c-light { background:rgb(255 255 255 / .55); }

/* Zero to Shipped · a website, its mobile app, and the platform behind them */
body[data-covers='i4'] .c-browser { left:6%; top:46px; width:66%; height:260px; padding:0; gap:0; overflow:hidden; }
body[data-covers='i4'] .c-chrome { display:flex; align-items:center; gap:5px; height:30px; padding-inline:12px; background:#f3f2ef; direction:ltr; }
body[data-covers='i4'] .c-chrome i { width:7px; height:7px; border-radius:50%; background:#d9d6d0; }
body[data-covers='i4'] .c-chrome b { flex:1; height:12px; margin-inline:14px 20px; border-radius:6px; background:var(--white); }
body[data-covers='i4'] .c-hero { display:flex; flex-direction:column; gap:8px; padding:18px 16px 12px; }
body[data-covers='i4'] .c-button { width:58px; height:18px; margin-top:6px; border-radius:9px; background:var(--orange); }
body[data-covers='i4'] .c-media { flex:1; margin:4px 16px 0; border-radius:10px; background:#f8ddc7; }
body[data-covers='i4'] .c-phone { z-index:2; right:6%; top:14px; width:29%; max-width:116px; height:290px; padding:5px; border-radius:24px; background:var(--ink); }
body[data-covers='i4'] .c-screen { position:relative; display:flex; flex-direction:column; gap:10px; height:100%; padding:26px 9px 0; border-radius:19px; background:var(--white); }
body[data-covers='i4'] .c-island { position:absolute; top:7px; left:50%; width:30%; height:9px; border-radius:6px; background:var(--ink); transform:translateX(-50%); }
body[data-covers='i4'] .c-row { display:flex; align-items:center; gap:7px; }
body[data-covers='i4'] .c-row>div { flex:1; display:flex; flex-direction:column; gap:5px; }
body[data-covers='i4'] .c-row .c-line { height:5px; }
body[data-covers='i4'] .c-dot { width:20px; height:20px; flex:none; border-radius:50%; background:#f8ddc7; }
body[data-covers='i4'] .c-row:first-of-type .c-dot { background:var(--orange); }
body[data-covers='i4'] .c-tabs { display:flex; justify-content:space-around; margin-top:auto; padding:10px 0 40px; }
body[data-covers='i4'] .c-tabs i { width:12px; height:12px; border-radius:4px; background:#e7e5e1; }
body[data-covers='i4'] .c-tabs i:first-child { background:var(--ink); }
body[data-covers='i4'] .c-panel { left:16%; top:142px; width:48%; gap:10px; }
body[data-covers='i4'] .c-panel-head { display:flex; align-items:center; justify-content:space-between; }
body[data-covers='i4'] .c-panel-head .c-line { width:40%; }
body[data-covers='i4'] .c-chip { width:28px; height:12px; border-radius:6px; background:color-mix(in srgb,var(--green) 22%,white); }
body[data-covers='i4'] .c-bars { display:flex; align-items:flex-end; gap:6%; height:52px; }
body[data-covers='i4'] .c-bars i { flex:1; height:var(--h); border-radius:4px 4px 2px 2px; background:#f8ddc7; }
body[data-covers='i4'] .c-bars i:last-child { background:var(--orange); }

/* Hire Your AI Agents · a request to an agent, and the work it has done */
body[data-covers='i4'] .c-thread { left:7%; top:30px; width:80%; height:260px; gap:10px; }
body[data-covers='i4'] .c-thread-head { display:flex; align-items:center; gap:9px; padding-bottom:4px; }
body[data-covers='i4'] .c-thread-head .c-line { width:34%; }
body[data-covers='i4'] .c-agent { width:22px; height:22px; border-radius:50%; background:var(--orange); }
body[data-covers='i4'] .c-bubble { display:flex; flex-direction:column; gap:6px; width:58%; padding:10px 12px; border-radius:14px; }
body[data-covers='i4'] .c-mine { align-self:flex-end; background:var(--ink); border-end-end-radius:4px; }
body[data-covers='i4'] .c-theirs { background:#f3f2ef; border-end-start-radius:4px; }
body[data-covers='i4'] .c-theirs .c-line { background:#dcd9d3; }
body[data-covers='i4'] .c-tasks { right:4%; top:150px; width:62%; gap:0; padding:6px 14px; }
body[data-covers='i4'] .c-task { display:flex; align-items:center; gap:10px; height:34px; }
body[data-covers='i4'] .c-task+.c-task { background:linear-gradient(#eeecea,#eeecea) top/100% 1px no-repeat; }
body[data-covers='i4'] .c-check { display:grid; width:16px; height:16px; flex:none; border-radius:50%; background:var(--green); }
body[data-covers='i4'] :is(.c-check,.c-radio) svg { width:100%; height:100%; }
body[data-covers='i4'] .c-task.is-running .c-check { background:conic-gradient(var(--orange) 0 28%,#e7e5e1 0); -webkit-mask:radial-gradient(circle,transparent 5.4px,#000 6px); mask:radial-gradient(circle,transparent 5.4px,#000 6px); }
body[data-covers='i4'] .c-task.is-running .c-line { background:#dcd9d3; }

/* AI for Educators · a lesson plan, its slide, and a quiz question */
body[data-covers='i4'] .c-doc { left:6%; top:44px; width:62%; height:260px; gap:9px; padding:18px 16px; }
body[data-covers='i4'] .c-doc>.c-line.c-ink { margin-bottom:6px; }
body[data-covers='i4'] .c-doc-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
body[data-covers='i4'] .c-doc-list>div { display:flex; align-items:center; gap:8px; }
body[data-covers='i4'] .c-bullet { width:8px; height:8px; flex:none; border-radius:3px; background:var(--green); }
body[data-covers='i4'] .c-slide { right:5%; top:14px; width:44%; gap:7px; padding:10px; }
body[data-covers='i4'] .c-slide-art { aspect-ratio:16 / 8; margin-bottom:4px; border-radius:8px; background:var(--green); }
body[data-covers='i4'] .c-quiz { right:6%; top:124px; width:56%; gap:7px; padding:10px; }
body[data-covers='i4'] .c-option { display:flex; align-items:center; gap:9px; height:30px; padding-inline:10px; border-radius:9px; background:#f3f2ef; }
body[data-covers='i4'] .c-option.is-right { background:color-mix(in srgb,var(--green) 16%,white); }
body[data-covers='i4'] .c-radio { display:grid; width:14px; height:14px; flex:none; border-radius:50%; background:radial-gradient(circle,transparent 4.6px,#d9d6d0 5.2px); }
body[data-covers='i4'] .c-option.is-right .c-radio { background:var(--green); }

@media (max-width:1050px) {
  body[data-covers='i1'] .v-course-art { --h:124px; }
  body[data-covers] .d-course.c-tile { --pad-x:25px; }
  body[data-covers] .c-stage { height:210px; }
}
@media (max-width:760px) {
  body[data-covers='i1'] .v-course-art { --h:150px; }
  body[data-covers] .d-course.c-tile { --pad-x:33px; }
  body[data-covers] .c-stage { height:238px; }
}
@media (max-width:520px) {
  body[data-covers] .d-course.c-tile { --pad-x:26px; }
}

/* ——— I5 · Scenes: each course's real work, 3D clay meeting product mockups ———
   The set is drawn on a 34 × 27em board and scales with the card (1em = a 34th of its width),
   so every scene keeps its composition from a narrow tablet column to a wide desktop card. */
body[data-covers='i5'] .s-stage { container-type:inline-size; height:auto; }
/* Positions are logical, so each scene mirrors with the page and text never starts under another piece. */
body[data-covers='i5'] .s-stage>.c-set { width:min(100cqw, 440px); height:27em; font-size:calc(min(100cqw, 440px) / 34); }
body[data-covers='i5'] .s-ui { position:absolute; display:flex; flex-direction:column; background:var(--white); border-radius:1.3em; color:var(--ink); font-family:var(--sans); line-height:1.35; text-align:start; }
body[data-covers='i5'] .s-ui :is(p,ul,table) { margin:0; padding:0; list-style:none; }
body[data-covers='i5'] .s-ui b { font-weight:600; }
body[data-covers='i5'] .s-ui small { font-size:.72em; color:#7a7670; }
body[data-covers='i5'] #app .s-lifted { z-index:3; box-shadow:0 .1em .2em rgb(40 30 20 / .1), 0 2.2em 3.6em -1.2em rgb(40 30 20 / .45) !important; }
body[data-covers='i5'] #app [data-tone='black'] .s-lifted { box-shadow:0 2em 3.6em -1em rgb(0 0 0 / .75) !important; }
body[data-covers='i5'] .s-clay { position:absolute; z-index:5; height:auto; filter:drop-shadow(0 1em 1em rgb(5 5 6 / .2)); }
body[data-covers='i5'] .s-phone { padding:.45em; border-radius:2.3em; background:var(--ink); }
body[data-covers='i5'] .s-screen { position:relative; display:flex; flex-direction:column; height:100%; padding:2.5em .9em 0; border-radius:1.9em; background:var(--white); overflow:hidden; }
body[data-covers='i5'] .s-island { position:absolute; top:.7em; left:50%; width:3.4em; height:1em; border-radius:1em; background:var(--ink); transform:translateX(-50%); }

/* Zero to Shipped */
/* Zero to Shipped: each piece keeps its own room. The phone overlaps only the browser's empty margin, the stat card
   sits below the listings, and the rocket rises from behind the phone. */
body[data-covers='i5'] .s-browser { inset-inline-start:1.2em; top:3.4em; width:22.4em; height:26em; overflow:hidden; }
body[data-covers='i5'] .s-chrome { display:flex; align-items:center; gap:.45em; height:2.7em; padding-inline:1em; background:#f3f2ef; direction:ltr; }
body[data-covers='i5'] .s-chrome i { width:.65em; height:.65em; border-radius:50%; background:#d9d6d0; }
body[data-covers='i5'] .s-chrome b { flex:1; margin-inline:1.2em 2.4em; padding:.25em .8em; border-radius:1em; background:var(--white); font-size:.72em; font-weight:500; color:#7a7670; text-align:center; }
body[data-covers='i5'] .s-site { padding:1.3em 1.2em; }
body[data-covers='i5'] .s-headline { margin-bottom:1em !important; font-size:1.18em; font-weight:600; }
body[data-covers='i5'] .s-stays { display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
body[data-covers='i5'] .s-stay { display:flex; flex-direction:column; gap:.2em; font-size:.86em; }
body[data-covers='i5'] .s-stay small { font-size:.84em; }
body[data-covers='i5'] .s-photo { height:6.6em; margin-bottom:.4em; border-radius:.9em; background:linear-gradient(160deg,#ffcfa8,#ff9a57); }
body[data-covers='i5'] .s-photo-2 { background:linear-gradient(160deg,#bfe9d9,#46c49a); }
body[data-covers='i5'] .s-set-build .s-phone { z-index:2; inset-inline-end:.9em; top:6.2em; width:10.4em; height:24em; }
body[data-covers='i5'] .s-app { font-size:.74em; color:#7a7670; text-align:center; }
body[data-covers='i5'] .s-next { display:flex; flex-direction:column; align-items:center; margin:.7em 0 .9em; }
body[data-covers='i5'] .s-next small { font-size:.62em; }
body[data-covers='i5'] .s-next b { font-size:1.15em; }
body[data-covers='i5'] .s-next span { font-size:1.9em; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
body[data-covers='i5'] .s-prayers li { display:flex; justify-content:space-between; padding:.42em .6em; border-radius:.6em; font-size:.74em; font-variant-numeric:tabular-nums; }
body[data-covers='i5'] .s-prayers li.is-next { background:var(--orange); color:var(--white); font-weight:600; }
body[data-covers='i5'] .s-stat { inset-inline-start:.4em; top:19.4em; width:12.4em; padding:.9em 1em; gap:.25em; }
body[data-covers='i5'] .s-stat-row { display:flex; align-items:baseline; gap:.5em; }
body[data-covers='i5'] .s-stat-row b { font-size:2.1em; line-height:1; font-variant-numeric:tabular-nums; }
body[data-covers='i5'] .s-up { direction:ltr; unicode-bidi:isolate; font-size:.74em; font-weight:600; color:var(--green); }
body[data-covers='i5'] .s-spark { display:flex; align-items:flex-end; gap:.35em; height:2.6em; margin-top:.4em; }
body[data-covers='i5'] .s-spark i { flex:1; height:var(--h); border-radius:.25em .25em .1em .1em; background:#f8ddc7; }
body[data-covers='i5'] .s-spark i:last-child { background:var(--orange); }
body[data-covers='i5'] .s-rocket { z-index:1; inset-inline-end:4.4em; top:.2em; width:7.4em; }
html[dir='rtl'] body[data-covers='i5'] .s-rocket { transform:scaleX(-1); }

/* Hire Your AI Agents */
body[data-covers='i5'] .s-phone-chat { inset-inline-start:1.8em; top:1.8em; width:15.6em; height:27em; }
body[data-covers='i5'] .s-chat-head { display:flex; align-items:center; gap:.6em; padding-bottom:.8em; box-shadow:none; background:linear-gradient(#eeecea,#eeecea) bottom/100% 1px no-repeat; }
body[data-covers='i5'] .s-chat-head div { display:flex; flex-direction:column; }
body[data-covers='i5'] .s-chat-head b { font-size:.86em; }
body[data-covers='i5'] .s-chat-head small { font-size:.66em; color:var(--green); }
body[data-covers='i5'] .s-avatar { display:grid; place-items:center; width:2.5em; height:2.5em; flex:none; border-radius:50%; background:var(--orange); }
body[data-covers='i5'] .s-avatar img { width:88%; height:auto; }
body[data-covers='i5'] .s-message { position:relative; margin-top:.8em; padding:.8em .8em 1.5em; border-radius:1.1em; border-start-start-radius:.3em; background:#f3f2ef; font-size:.8em; }
body[data-covers='i5'] .s-message p { margin-bottom:.5em !important; font-weight:600; }
/* The marketing agent's weekly report: two figures, a 7-day chart with the peak day in orange, one suggestion. */
body[data-covers='i5'] .s-kpis { display:grid; grid-template-columns:1fr 1fr; gap:.45em; }
body[data-covers='i5'] .s-kpis>div { display:flex; flex-direction:column; padding:.5em .6em; border-radius:.6em; background:var(--white); line-height:1.2; }
body[data-covers='i5'] .s-kpis small { font-size:.7em; }
body[data-covers='i5'] .s-kpis b { font-size:1.2em; font-variant-numeric:tabular-nums; }
body[data-covers='i5'] .s-kpis .s-up { font-size:.68em; }
body[data-covers='i5'] .s-chart { margin-top:.45em; padding:.5em .6em .55em; border-radius:.6em; background:var(--white); }
body[data-covers='i5'] .s-chart small { font-size:.66em; }
body[data-covers='i5'] .s-chart-bars { display:flex; align-items:flex-end; gap:.3em; height:3.2em; margin-top:.35em; direction:ltr; }
body[data-covers='i5'] .s-chart-bars i { flex:1; height:var(--h); border-radius:.25em .25em .1em .1em; background:#fbd9c0; }
body[data-covers='i5'] .s-chart-bars i.is-peak { background:var(--orange); }
body[data-covers='i5'] .s-ui .s-insight { margin:.55em 0 0 !important; font-size:.84em; font-weight:500 !important; line-height:1.5; color:#3d3a36; }
body[data-covers='i5'] .s-message time { position:absolute; inset-inline-end:1em; bottom:.5em; font-size:.78em; color:#9a958e; }
body[data-covers='i5'] .s-badge { align-items:center; width:12em; padding:2.4em 1em 1.2em; gap:.25em; text-align:center; }
body[data-covers='i5'] .s-badge-content { inset-inline-end:6em; top:1.2em; transform:rotate(-5deg); }
body[data-covers='i5'] .s-badge-research { z-index:4; inset-inline-end:.8em; top:13.4em; transform:rotate(4deg); }
body[data-covers='i5'] .s-clip { position:absolute; top:.9em; left:50%; width:3.2em; height:.7em; border-radius:1em; background:#e7e5e1; transform:translateX(-50%); }
body[data-covers='i5'] .s-face { display:grid; place-items:center; width:5em; height:5em; margin-bottom:.5em; border-radius:50%; background:#fbe3d1; }
body[data-covers='i5'] .s-badge-research .s-face { background:color-mix(in srgb,var(--green) 18%,white); }
body[data-covers='i5'] .s-face img { width:82%; height:auto; }
body[data-covers='i5'] .s-badge small { font-size:.62em; letter-spacing:.08em; text-transform:uppercase; }
body[data-covers='i5'] .s-badge b { font-size:1em; }
body[data-covers='i5'] .s-task { font-size:.72em; color:#7a7670; }
body[data-covers='i5'] .s-duty { display:inline-flex; align-items:center; gap:.4em; margin-top:.6em; padding:.3em .8em; border-radius:1em; background:color-mix(in srgb,var(--green) 14%,white); font-size:.66em; font-weight:600; color:#067a58; }
body[data-covers='i5'] .s-duty i { width:.5em; height:.5em; border-radius:50%; background:var(--green); }

/* AI for Educators */
body[data-covers='i5'] .s-sheet { inset-inline-start:1.4em; top:4em; width:24.4em; height:26em; padding:1.2em 1.2em 0; }
body[data-covers='i5'] .s-sheet-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.9em; }
body[data-covers='i5'] .s-sheet-head b { font-size:1.05em; }
body[data-covers='i5'] .s-sheet table { width:100%; border-collapse:collapse; font-size:.8em; font-variant-numeric:tabular-nums; }
body[data-covers='i5'] .s-sheet th { padding:0 .4em .6em; font-size:.8em; font-weight:500; color:#7a7670; text-align:center; }
body[data-covers='i5'] .s-sheet th:first-child, body[data-covers='i5'] .s-sheet td:first-child { width:38%; text-align:start; }
body[data-covers='i5'] .s-sheet td { height:2.5em; padding:0 .4em; text-align:center; background:linear-gradient(#f0eeea,#f0eeea) top/100% 1px no-repeat; }
body[data-covers='i5'] .s-name { display:block; width:var(--w); height:.55em; border-radius:1em; background:#e2dfd9; }
body[data-covers='i5'] .s-sheet tr.is-low td:not(:first-child) { color:#d4661c; font-weight:600; }
body[data-covers='i5'] .s-sheet tr.is-low td:first-child { box-shadow:none; }
body[data-covers='i5'] .s-sheet tr.is-high td:last-child { color:#067a58; font-weight:600; }
body[data-covers='i5'] .s-analysis { inset-inline-start:.6em; top:15.4em; width:15em; padding:1.1em 1.1em 1em; gap:.55em; }
body[data-covers='i5'] .s-analysis>b { margin-bottom:.2em; font-size:.92em; }
body[data-covers='i5'] .s-level { display:grid; grid-template-columns:6.6em 1fr 2.4em; align-items:center; gap:.5em; font-size:.72em; }
body[data-covers='i5'] .s-level i { height:.6em; border-radius:1em; background:linear-gradient(90deg,var(--bar) var(--v),#eeecea 0); }
html[dir='rtl'] body[data-covers='i5'] .s-level i { background:linear-gradient(270deg,var(--bar) var(--v),#eeecea 0); }
body[data-covers='i5'] .s-level em { font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; text-align:end; }
body[data-covers='i5'] .s-level-excellent { --bar:var(--green); }
body[data-covers='i5'] .s-level-good { --bar:#8edcc3; }
body[data-covers='i5'] .s-level-support { --bar:var(--orange); }
body[data-covers='i5'] .s-plan { display:flex; align-items:center; gap:.5em; margin-top:.3em !important; padding:.55em .7em; border-radius:.8em; background:color-mix(in srgb,var(--green) 12%,white); font-size:.74em; font-weight:600; color:#067a58; }
body[data-covers='i5'] .s-tick { display:grid; width:1.4em; height:1.4em; flex:none; border-radius:50%; background:var(--green); }
body[data-covers='i5'] .s-tick svg { width:100%; height:100%; }
/* The pencil leans on the grade book's corner. */
body[data-covers='i5'] .s-pencil { inset-inline-end:4.4em; top:1.6em; width:6.6em; }
html[dir='rtl'] body[data-covers='i5'] .s-pencil { transform:scaleX(-1); }

/* Hover lifts the lifted piece a little further; nothing moves with motion off. */
body[data-covers='i5'] .s-lifted, body[data-covers='i5'] .s-clay { transition:translate .6s cubic-bezier(.2,.7,.2,1); }
body[data-covers='i5'] .d-course:hover .s-lifted { translate:0 -.5em; }
body[data-covers='i5'] .d-course:hover .s-rocket { translate:.5em -.7em; }
html[dir='rtl'] body[data-covers='i5'] .d-course:hover .s-rocket { translate:-.5em -.7em; }
body[data-covers='i5'] .d-course:hover .s-pencil { translate:0 -.5em; }
body.motion-off[data-covers='i5'] :is(.s-lifted,.s-clay) { transition:none; }
@media (prefers-reduced-motion:reduce) { body[data-covers='i5'] :is(.s-lifted,.s-clay) { transition:none; } }

/* Between phone and desktop, three columns would shrink the scenes past reading size:
   the cards stack and turn sideways — copy on one side, the scene cut by the bottom edge on the other. */
@media (min-width:761px) and (max-width:1050px) {
  body[data-covers='i5'] .d-course-grid { grid-template-columns:1fr; }
  body[data-covers='i5'] .d-course.c-tile { --pad-x:34px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-rows:auto auto auto 1fr; column-gap:44px; min-height:0; padding:34px var(--pad-x) 0; }
  body[data-covers='i5'] .c-tile>:not(.c-stage) { grid-column:1; }
  body[data-covers='i5'] .c-tile .d-course-end { align-self:end; padding-bottom:30px; }
  body[data-covers='i5'] .c-tile .s-stage { grid-column:2; grid-row:1 / 5; align-self:end; margin:18px calc(-1 * var(--pad-x)) 0 0; }
  html[dir='rtl'] body[data-covers='i5'] .c-tile .s-stage { margin:18px 0 0 calc(-1 * var(--pad-x)); }
}

/* ——— Calm scenes: one focal piece per card, larger and centred, cut by the bottom edge. ——— */
/* Zero to Shipped: the site, with the app overlapping its corner. */
body[data-covers='i5'] .s-set-build .s-browser { inset-inline-start:2.2em; top:4.6em; width:24.4em; }
body[data-covers='i5'] .s-set-build .s-phone { inset-inline-end:2em; top:8.4em; width:10.8em; height:24em; }
/* Hire Your AI Agents: the phone alone, centred. */
body[data-covers='i5'] .s-set-agents .s-phone-chat { inset-inline:0; margin-inline:auto; top:2.4em; width:17.4em; height:30em; }
/* AI for Educators: the analysis card alone, centred and larger. */
body[data-covers='i5'] .s-set-teach .s-analysis { inset-inline:0; margin-inline:auto; top:7.4em; width:23em; padding:1.6em 1.6em 1.5em; gap:.9em; font-size:1.18em; }
body[data-covers='i5'] .s-set-teach .s-level { grid-template-columns:7.4em 1fr 2.4em; }