/* story.css: the page as one argument (section rail, leader questions, closing lines,
 * the seven-layer index, grade bands, teachers, showcase and the first step). */

/* ── section rail (wide screens) ── */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.rail.show { opacity: 1; pointer-events: auto; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; padding: 4px 0; }
.rail i { width: 10px; height: 10px; border-radius: 50%; background: rgba(16,24,40,.22); box-shadow: 0 0 0 3px rgba(255,255,255,.7); transition: all .35s var(--swift); order: 2; }
.rail span { order: 1; font: 800 12px var(--body); letter-spacing: .06em; color: #475467; background: rgba(255,255,255,.9); padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 14px -8px rgba(16,24,40,.3);
             opacity: 0; transform: translateX(8px); transition: all .35s var(--swift); white-space: nowrap; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a.on i { background: #FF8A00; transform: scale(1.35); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 12px rgba(255,138,0,.7); }
.rail a.on span { color: #101828; }

/* ── leader question + closing line ── */
.ask { margin: 10px 0 0; font: italic 700 clamp(16px, 1.3vw, 19px) var(--body); color: #667085; }
.dark .ask { color: #9FB3D3; }
.center .ask, .sec-head.center .ask { text-align: center; }
.sub-title { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.15 var(--display); }
.conclude { max-width: 1240px; margin: 40px auto 0; font: 700 clamp(18px, 1.6vw, 24px)/1.45 var(--body); color: var(--muted); }
.conclude b { color: var(--ink); }
.conclude.light { color: #9FB3D3; } .conclude.light b { color: #fff; }

/* ── what you get: the seven layers ── */
.brands { max-width: 1240px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.brands div { padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 12px 26px -20px rgba(16,24,40,.4); }
.brands b { display: block; font: 700 20px var(--display); }
.brands span { font: 700 14px var(--body); color: var(--muted); }
.sys { max-width: 1240px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.sys-col { border-radius: 24px; padding: 18px; background: color-mix(in srgb, var(--c) 7%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #fff); }
.sys-for { margin: 2px 4px 12px; font: 900 13px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.lay { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; margin-top: 10px; border-radius: 16px; background: #fff; text-decoration: none; color: var(--ink);
       box-shadow: 0 10px 24px -18px rgba(16,24,40,.45); transition: transform .4s var(--swift), box-shadow .3s; }
.lay:hover { transform: translateX(4px); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 1.5px var(--c); }
.lay::after { content: '↓'; grid-row: 1 / 3; grid-column: 3; color: var(--c); font: 800 18px var(--body); }
.lay-n { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; font: 800 13px var(--mono); }
.lay b { font: 700 18px var(--display); }
.lay span:not(.lay-n) { font: 700 14px var(--body); color: var(--muted); }
a.lay[href^="tools/"]::after { content: '→'; }   /* this one leaves the page */
div.lay::after { content: ''; }                  /* not a link: no arrow, no hover (the empty cell keeps the text stacked) */
div.lay:hover { transform: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #fff); }
.lay.extra { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #fff); }
.lay.extra .lay-n { background: #F43F5E; }

/* ── students: grade bands + the three-languages demo ── */
.sec.path .sec-head { text-align: start; }
.path-track { height: 540px; margin-top: 10px; }
.band { display: block; margin: 12px 0 0; font: 900 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--c); vertical-align: middle; }
.eng-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.eng-tags span { font: 800 12px var(--body); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); }
.demo-row { max-width: 1240px; margin: 20px auto 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.demo-copy p { font: 700 17px/1.6 var(--body); color: var(--muted); margin: 14px 0 0; }
.demo-copy .try-hint { color: var(--muted); margin: 18px 0 0; font-size: 15px; }
.demo-copy .try-hint b { color: #0FBD8C; }
.demo-row .try-win { box-shadow: 0 50px 100px -50px rgba(16,24,40,.55), 0 0 0 1px rgba(16,24,40,.08); }

/* ── hands-on steps ── */
.stage-label { max-width: 1240px; margin: 40px auto 0; display: flex; align-items: center; gap: 12px; font: 800 18px var(--body); color: var(--ink); }
.stage-label b { font: 900 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #F59E0B; padding: 6px 10px; border-radius: 8px; flex: none; }
.make .make-grid { margin-top: 18px; }
.make .hw-in { margin-top: 22px; }
.make .hw-logo { margin-top: 0; }
.make .sub-title { margin-top: 8px; }

/* ── teachers ── */
.teach-grid { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.t-card { border-radius: 24px; padding: 26px; background: #fff; box-shadow: 0 30px 60px -36px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.06); border-top: 5px solid var(--c); }
.t-n { font: 900 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.t-card h3 { margin: 8px 0 0; font: 700 26px/1.15 var(--display); }
.t-card p { margin: 10px 0 0; font: 700 16px/1.55 var(--body); color: var(--muted); }
.pd { list-style: none; counter-reset: pd; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pd li { counter-increment: pd; position: relative; padding: 12px 14px 12px 52px; border-radius: 14px; background: #F4FBFA; font: 700 15px/1.45 var(--body); color: var(--muted); }
.pd li::before { content: counter(pd); position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0EA5A0; color: #fff; font: 800 14px var(--display); }
.pd b { display: block; color: var(--ink); font-weight: 900; }
.gov-list.light { grid-template-columns: 1fr; }
.gov-list.light li { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(16,24,40,.07); }

/* ── the share card (the tools page) ── */
.show-grid { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; }
.show-grid .pub-card { margin: 0; max-width: none; }
.show-grid .pub-card .sub-title { margin-top: 10px; }
.show-grid .qr { width: 180px; height: 180px; }

/* ── first step ── */
.cta .eyebrow { margin-top: 18px; }