/* MCCore product walkthroughs: shared surface.
   Light "paper" product chrome, one accent hue shared with the marketing brand. */
:root{
  --paper: oklch(0.975 0.006 80);
  --surface: oklch(0.993 0.003 80);
  --panel: oklch(0.955 0.008 80);
  --line: oklch(0.89 0.01 80);
  --line-2: oklch(0.93 0.008 80);
  --ink: oklch(0.25 0.018 262);
  --ink-2: oklch(0.43 0.016 262);
  --ink-3: oklch(0.58 0.012 262);
  --accent: oklch(0.46 0.12 266);
  --accent-ink: oklch(0.38 0.11 266);
  --accent-soft: oklch(0.94 0.025 266);
  --ok: oklch(0.55 0.11 152);
  --ok-soft: oklch(0.95 0.035 152);
  --warn: oklch(0.66 0.13 70);
  --warn-soft: oklch(0.955 0.045 80);
  --bad: oklch(0.54 0.16 28);
  --bad-soft: oklch(0.95 0.03 28);
  --info: oklch(0.52 0.11 220);
  --info-soft: oklch(0.95 0.025 220);
  --radius: 8px;
  --ease: cubic-bezier(.22,1,.36,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.5;
}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Page chrome ─────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:20px;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}
.back{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13px;font-weight:500;text-decoration:none;color:var(--ink-2);padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.back:hover{background:var(--panel);color:var(--ink)}
.brand{display:flex;flex-direction:column;min-width:0}
.brand b{font-size:15px}
.brand span{font-size:12px;color:var(--ink-3)}
.top .spacer{flex:1}
.top .apps-nav{display:flex;gap:2px;flex-wrap:wrap}
.top .apps-nav a{font-size:12.5px;text-decoration:none;color:var(--ink-2);padding:5px 9px;border-radius:6px}
.top .apps-nav a:hover{background:var(--panel)}
.top .apps-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:6px 12px;font-size:13px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.seg-label{font-size:12px;color:var(--ink-3);margin-right:8px}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:7px 13px;font-size:13px;font-weight:500;transition:background .15s var(--ease),border-color .15s var(--ease);display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--panel)}
.btn:disabled{opacity:.45}
.btn.primary{background:var(--accent);border-color:var(--accent);color:oklch(0.99 0.004 266)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.danger{color:var(--bad);border-color:oklch(0.85 0.05 28)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--panel)}

.intro{max-width:1440px;margin:0 auto;padding:28px 28px 8px}
.intro h1{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.intro p{margin:0;color:var(--ink-2);max-width:86ch}

.stage{scroll-margin-top:72px;max-width:1440px;margin:0 auto;padding:18px 28px 28px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.tour{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tour .num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent);min-width:56px}
.tour .txt{flex:1}
.tour .txt b{display:block;font-size:14px}
.tour .txt span{color:var(--ink-2);font-size:13px}
.tour .chap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.progress{grid-column:1 / -1;height:3px;background:var(--line-2);border-radius:2px;margin-top:-12px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transition:width .25s var(--ease)}

/* ── App frame ───────────────────────────────────────────────────────────── */
.frame{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;display:grid;grid-template-columns:208px minmax(0,1fr);min-height:660px}
.side{background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.side .mod{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-weight:600}
.side .mod i{width:22px;height:22px;border-radius:6px;background:var(--accent);display:grid;place-items:center;color:var(--surface);font-style:normal;font-size:12px}
.side h6{margin:12px 8px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.side button{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:transparent;padding:7px 9px;border-radius:6px;color:var(--ink-2);font-size:13px}
.side button:hover:not(:disabled){background:oklch(0.92 0.01 80)}
.side button:disabled{opacity:.45}
.side button[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600}
.side .count{font-size:11px;background:var(--accent);color:var(--surface);border-radius:9px;padding:0 6px;font-weight:600}
.side .count.bad{background:var(--bad)}
.side .who{margin-top:auto;padding:10px 8px 2px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);display:flex;gap:9px;align-items:center}
.side .who b{display:block;color:var(--ink);font-size:13px}

.screen{padding:22px 26px 28px;min-width:0}
.screen h2{font-size:19px;margin:0 0 4px;letter-spacing:-.01em}
.screen .sub{color:var(--ink-2);margin:0 0 18px}
.crumbs{font-size:12px;color:var(--ink-3);margin-bottom:6px}
.crumbs a{color:var(--ink-3)}

.notes{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px}
.notes .box{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 16px}
.notes h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.note{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--line-2);font-size:13px}
.note:first-of-type{border-top:0;padding-top:0}
.note .k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding-top:2px}
.note.privacy .k{color:var(--accent)}
.note.notify .k{color:oklch(0.55 0.12 65)}
.note.link .k{color:var(--info)}
.note.ai .k{color:oklch(0.5 0.13 300)}
.legend{font-size:12px;color:var(--ink-3)}

/* ── Primitives ──────────────────────────────────────────────────────────── */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.section{margin-top:22px}
.section > h4,.h4{font-size:13px;margin:0 0 8px;color:var(--ink-2);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--panel);color:var(--ink-2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:oklch(0.4 0.1 152)}
.pill.warn{background:var(--warn-soft);color:oklch(0.47 0.11 65)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}
.pill.info{background:var(--info-soft);color:oklch(0.4 0.09 220)}
.pill.ai{background:oklch(0.95 0.03 300);color:oklch(0.42 0.12 300)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
hr.sep{border:0;border-top:1px solid var(--line-2);margin:18px 0}
.tag-app{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;background:var(--panel);color:var(--ink-2);margin-right:6px;vertical-align:1px}
.tag-app.ai{background:oklch(0.95 0.03 300);color:oklch(0.42 0.12 300)}
.tag-app.link{background:var(--info-soft);color:oklch(0.4 0.09 220)}
.av{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;flex:none;letter-spacing:.02em}
.av.sm{width:22px;height:22px;font-size:9px}
.av.g{background:var(--ok-soft);color:oklch(0.4 0.1 152)}
.av.w{background:var(--warn-soft);color:oklch(0.47 0.11 65)}
.av.i{background:var(--info-soft);color:oklch(0.4 0.09 220)}

.list{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.list .li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line-2)}
.list .li:first-child{border-top:0}
.list .li .grow{flex:1;min-width:0}
.list .li .grow b{display:block;font-weight:600}
.list .li .grow span{display:block;font-size:12.5px;color:var(--ink-3)}
.list .li.hl{background:var(--accent-soft)}

table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tr.hl td{background:var(--accent-soft)}
table.t tr.grp td{background:var(--panel);font-weight:600;font-size:12.5px;color:var(--ink-2)}
.yes{color:var(--ok);font-weight:600}
.no{color:var(--ink-3)}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}

.kpis{display:flex;gap:28px;margin-bottom:20px;flex-wrap:wrap}
.kpis div span{display:block;font-size:12px;color:var(--ink-3)}
.kpis div b{font-size:20px;font-variant-numeric:tabular-nums}
.kpis div em{font-style:normal;font-size:12px;margin-left:6px}

.callout{border-radius:9px;padding:12px 14px;background:var(--panel);font-size:13px;margin-top:12px}
.callout.warn{background:var(--warn-soft)}
.callout.ok{background:var(--ok-soft)}
.callout.accent{background:var(--accent-soft)}
.callout.ai{background:oklch(0.965 0.02 300)}
.callout b.t{display:block;margin-bottom:3px}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label,.field .lbl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--ink-3)}
.input,textarea.input,select.input{border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:var(--surface);width:100%}
textarea.input{min-height:92px;resize:vertical}
.input.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.choice{display:flex;gap:6px;flex-wrap:wrap}
.choice button,.choice span{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 11px;font-size:13px}
.choice [aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:14px 12px;text-align:left}
.tile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.tile b{display:block;font-size:13.5px}
.tile span{font-size:12px;color:var(--ink-3)}
.wfoot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs span{padding:8px 12px;font-size:13px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs span.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;font-size:13px;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}
.meta{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;padding:12px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-bottom:16px}
.meta div > span:first-child{display:block;font-size:11.5px;color:var(--ink-3)}
.hist{font-size:13px}
.hist div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line-2)}
.hist div:first-child{border-top:0}
.hist .when{color:var(--ink-3);font-size:12px}
.msg{max-width:84%;padding:9px 12px;border-radius:10px;margin-bottom:10px;font-size:13px;background:var(--panel)}
.msg small{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px}
.msg.me{background:var(--accent-soft);margin-left:auto}
.msg.ai{background:oklch(0.965 0.02 300)}
.mention{color:var(--accent-ink);font-weight:600}
.stepper{display:flex;align-items:center;margin:4px 0 18px;overflow-x:auto}
.stepper .s{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.stepper .s i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:10px;background:var(--surface)}
.stepper .s.done i{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.stepper .s.cur{color:var(--ink);font-weight:600}
.stepper .s.cur i{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stepper .bar{flex:1;height:1.5px;background:var(--line);margin:0 8px;min-width:12px}
.stepper .bar.done{background:var(--accent)}
.bars{display:flex;flex-direction:column;gap:8px}
.bars .b{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center;font-size:12.5px}
.bars .b i{display:block;height:9px;border-radius:5px;background:var(--accent)}
.bars .b em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.track{height:9px;border-radius:5px;background:var(--line-2);overflow:hidden}
.panel{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface)}
.panel h4{margin:0 0 10px;font-size:13px;color:var(--ink-2)}
.chart{width:100%;height:auto;display:block}
.flag{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.flag:first-child{border-top:0}
.flag .grow{flex:1}
.flag .grow b{display:block}
.flag .grow span{font-size:12.5px;color:var(--ink-3)}
.sw{width:34px;height:20px;border-radius:10px;background:var(--line);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:left .2s var(--ease)}
.sw.on{background:var(--accent)}
.sw.on::after{left:16px}
.toolbar{display:flex;gap:4px;padding:6px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--panel)}
.toolbar span{padding:3px 8px;border-radius:5px;font-size:12px;color:var(--ink-2)}
.doc{border:1px solid var(--line);border-radius:0 0 8px 8px;padding:16px 18px;font-size:13.5px;line-height:1.65;background:var(--surface)}
.doc h3{margin:0 0 6px;font-size:16px}
.doc h5{margin:14px 0 4px;font-size:13.5px}
.doc ol,.doc ul{margin:4px 0;padding-left:20px}
.doc mark{background:oklch(0.93 0.09 95);padding:0 2px;border-radius:2px}
.co{border-radius:8px;padding:9px 12px;margin:10px 0;font-size:13px}
.co.info{background:var(--info-soft)}
.co.warn{background:var(--warn-soft)}
.slash{position:absolute;width:230px;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:0 14px 34px -14px oklch(0.25 0.02 262 / .35);padding:6px;z-index:2}
.slash div{display:flex;justify-content:space-between;padding:6px 8px;border-radius:6px;font-size:12.5px}
.slash div.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.slash div span{color:var(--ink-3);font-size:11.5px}
.overlay{border:1px solid var(--accent);border-radius:10px;padding:16px 18px;margin-bottom:16px;background:var(--surface);box-shadow:0 18px 40px -22px oklch(0.25 0.02 262 / .45)}
.overlay h3{margin:0 0 4px;font-size:15px}

/* kanban */
.kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kcol{background:var(--panel);border-radius:9px;padding:10px}
.kcol h5{margin:0 0 8px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:8px;font-size:12.5px}
.kcard b{display:block;font-size:13px;margin-bottom:4px}
.kcard .row{gap:6px}

/* status cells */
.st{display:block;text-align:center;font-size:12px;font-weight:600;padding:5px 6px;border-radius:5px;color:oklch(0.99 0.004 266)}
.st.work{background:oklch(0.72 0.14 70)}
.st.stuck{background:oklch(0.6 0.17 25)}
.st.done{background:oklch(0.62 0.13 152)}
.st.empty{background:var(--line);color:var(--ink-3)}
.prog{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.prog .track{flex:1;height:6px}
.prog .track i{display:block;height:100%;background:var(--ok)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.cal .h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:6px 8px;background:var(--panel);border-bottom:1px solid var(--line)}
.cal .d{min-height:84px;padding:5px 6px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:11.5px}
.cal .d:nth-child(7n){border-right:0}
.cal .d .n{color:var(--ink-3);font-size:11px}
.cal .d.today .n{color:var(--accent);font-weight:700}
.cal .d.gap{background:repeating-linear-gradient(45deg,var(--bad-soft),var(--bad-soft) 5px,var(--surface) 5px,var(--surface) 10px)}
.ev{display:block;margin-top:3px;padding:2px 5px;border-radius:4px;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.c1{background:var(--accent-soft);color:var(--accent-ink)}
.ev.c2{background:var(--ok-soft);color:oklch(0.4 0.1 152)}
.ev.c3{background:var(--warn-soft);color:oklch(0.47 0.11 65)}
.ev.c4{background:var(--info-soft);color:oklch(0.4 0.09 220)}
.ev.new{outline:2px dashed var(--accent);outline-offset:1px}

/* builder */
.builder{display:grid;grid-template-columns:170px minmax(0,1fr) 230px;gap:14px}
.palette h6{margin:10px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.palette h6:first-child{margin-top:0}
.palette div{border:1px solid var(--line);border-radius:7px;padding:6px 9px;margin-bottom:5px;font-size:12.5px;background:var(--surface)}
.canvas{border:1px dashed var(--line);border-radius:10px;padding:14px;background:var(--paper)}
.fld{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.fld .lbl{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.fld .lbl em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:500}
.fld .ph{margin-top:6px;height:28px;border:1px solid var(--line-2);border-radius:6px;background:var(--paper)}
.fld.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld.cond{border-style:dashed}
.sig{height:70px;border:1px dashed var(--line);border-radius:8px;background:var(--surface);position:relative}
.sig svg{position:absolute;inset:0;width:100%;height:100%}

/* phone */
.phone{width:290px;border:10px solid oklch(0.22 0.015 262);border-radius:36px;background:var(--surface);overflow:hidden;box-shadow:0 30px 60px -30px oklch(0.25 0.02 262 / .6)}
.phone .ph-top{display:flex;justify-content:space-between;padding:8px 18px 4px;font-size:11px;font-weight:600}
.phone .ph-body{padding:8px 14px 18px}
.phone .ph-body h3{margin:4px 0 10px;font-size:17px}
.phone .list .li > b,.phone .list .li > span{display:block}
.phone-wrap{display:flex;gap:30px;align-items:flex-start}

/* below the stage */
.below{max-width:1440px;margin:0 auto;padding:12px 28px 60px}
.below h2{font-size:18px;margin:36px 0 6px}
.below > p{color:var(--ink-2);margin:0 0 16px;max-width:86ch}
.loop{display:flex;align-items:stretch;overflow-x:auto;padding-bottom:6px}
.loop button{flex:1;min-width:120px;text-align:left;border:1px solid var(--line);background:var(--surface);padding:12px;border-radius:9px;font-size:12.5px;color:var(--ink-2)}
.loop button:hover{border-color:var(--accent)}
.loop button[aria-current="step"]{border-color:var(--accent);background:var(--accent-soft)}
.loop button b{display:block;color:var(--ink);font-size:13px;margin-bottom:3px}
.loop button em{font-style:normal;font-size:11px;color:var(--accent);font-weight:600;display:block;margin-bottom:4px}
.loop .arr{display:grid;place-items:center;padding:0 4px;color:var(--ink-3)}

.fade{animation:fade .2s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}*{transition:none!important}}
@media (max-width:1100px){.stage{grid-template-columns:1fr}.notes{position:static}.grid3,.tiles{grid-template-columns:repeat(2,1fr)}.builder{grid-template-columns:1fr}.kan{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .frame{grid-template-columns:1fr}.side{display:none}.grid2{grid-template-columns:1fr}
  .top{position:static;flex-wrap:wrap;gap:10px;padding:10px 14px}
  .top .apps-nav,.top .spacer,.seg-label,.brand span{display:none}
  .brand{flex:1}
  .brand b{font-size:14px}
  .seg{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:1 0 auto;padding:8px 12px}
  #startTour{order:4;flex:1 1 100%;justify-content:center;padding:10px 13px}
  .intro{padding:18px 14px 4px}
  .intro h1{font-size:20px}
  .intro p{font-size:13.5px}
  .stage{padding:12px 10px 20px;gap:14px}
  .tour{flex-wrap:wrap;gap:8px 10px;padding:12px;position:sticky;top:0;z-index:4;box-shadow:0 8px 18px -14px oklch(0.25 0.02 262 / .5)}
  .tour .num{min-width:0;order:1}
  .tour .txt{flex:1 1 100%;order:2}
  .tour .txt span#tourText{display:block;max-height:4.5em;overflow:auto}
  #tourPrev,#tourNext{order:3;flex:1;justify-content:center;padding:9px 13px}
  #tourExit{order:1;margin-left:auto;padding:4px 8px}
  .progress{margin-top:-8px}
  .frame.app iframe{height:min(78vh,720px)}
  .notes .box{padding:12px 14px}
  .note{grid-template-columns:70px 1fr}
  .below{padding:6px 14px 40px}
  .below h2{margin-top:26px}
  .below table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── Screenshot mode (?shot=1): just the app frame, edge to edge ─────────── */
body.shot{background:var(--surface)}
body.shot .top,body.shot .intro,body.shot .tour,body.shot .progress,body.shot .notes,body.shot .below{display:none!important}
body.shot .stage{display:block;max-width:none;padding:0}
body.shot .frame{border:0;border-radius:0;min-height:100vh}
.frame.app{display:block;min-height:0}
.frame.app iframe{display:block;width:100%;height:780px;border:0}
body.shot .frame.app iframe{height:100vh}
body.shot .fade{animation:none}