/* Homepage and Features, scheme B. Colours: generated tokens.css; illustration tints: palette.css --art-*. */
.hero-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:48px 0 32px}
.hero-b .eyebrow{margin:0 0 16px}
.hero-b .mug-title{align-items:flex-start}
.hero-b .mug-title .mug-mark{width:56px;height:56px;margin-top:6px}
.hero-b h1{font-size:48px;line-height:1.1;letter-spacing:-.03em;font-weight:600;margin:0}
.hero-lead{font-size:18px;line-height:1.55;color:var(--ink-2);margin:24px 0 12px}
.use-cases{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 24px}
.page-head .use-cases{margin:16px 0 0;max-width:720px}
.hero-b .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero-status{font-size:13px;line-height:1.5;color:var(--ink-2);margin:12px 0 0}
.hero-shot{margin:0}
.hero-shot img,.stage-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}

.numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:16px 0 64px}
.number-card{display:grid;gap:4px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.number-card strong{font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.number-card span{font-size:16px;font-weight:500;color:var(--ink)}
.number-card small{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:8px}

.workflow-b{scroll-margin-top:80px}
.workflow-head h2,.small-things h2,.files-pricing h2{font-size:28px;line-height:1.25;font-weight:600;margin:0 0 24px}
.flow{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:16px;margin-bottom:32px}
.flow-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.flow a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);text-decoration:none;min-width:0;transition:border-color var(--motion-quick) var(--ease-enter)}
.flow a:hover{border-color:var(--ink-3)}
.flow a:active{transform:scale(var(--press-scale))}
.flow .icon{width:18px;height:18px;color:var(--ink-2)}
.flow strong{font-size:15px;font-weight:500}
.flow .pill{grid-column:1/-1;justify-self:start}
.flow-num{grid-column:1/-1;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.flow .flow-library{grid-template-columns:auto auto 1fr;margin-top:8px}
.flow-library span{font-size:13px;color:var(--ink-2);justify-self:end}
.flow-loop{display:flex;align-items:center;gap:8px;margin:12px 4px 0;font-size:13px;color:var(--ink-2)}
.flow-loop .icon{width:16px;height:16px}

.stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:start;padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.stage-copy .eyebrow{margin:0 0 8px}
.stage-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.stage-title h2{font-size:28px;line-height:1.25;font-weight:600;margin:0}
.stage-title .pill{flex:none;margin-top:4px}
.stage-line{font-size:16px;line-height:1.55;color:var(--ink-2);margin:16px 0}
.stage-points{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.stage-points li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--ink)}
.stage-points .icon{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ink-2)}
.stage-note{font-size:13px;line-height:1.5;color:var(--ink-2);margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.stage-shot{margin:0}
.stage-shot-compare img{background:var(--card);padding:16px}
.loop-line{margin:0;padding:32px 0;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.loop-line strong{color:var(--ink);font-weight:600;margin-right:8px}

/* One caption demo: preview → apply → undo. */
.caption-demo{grid-column:1/-1;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:24px}
.cd-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cd-head p{margin:0;font-size:14px;color:var(--ink-2)}
.cd-head p strong{color:var(--ink);font-weight:500;margin:0 4px 0 0}
.cd-head p strong:not(:first-child){margin-left:16px}
.cd-steps{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.cd-steps button{font:inherit;font-size:14px;font-weight:500;padding:6px 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background var(--motion-quick) var(--ease-enter),color var(--motion-quick) var(--ease-enter)}
.cd-steps button[aria-pressed=true]{background:var(--card);border-color:var(--line);color:var(--ink)}
.cd-steps button:focus-visible{outline:2px solid var(--brand-fg);outline-offset:2px}
.cd-rows{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.cd-row{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:16px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.cd-row img{width:48px;height:48px;border-radius:6px;object-fit:cover;display:block}
.cd-file{display:block;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);margin-bottom:4px}
.cd-text{display:none;font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.cd-text del{color:var(--ink-2);margin-right:.3em}
.cd-text ins{text-decoration:none;color:var(--brand-fg);font-weight:500}
.cd-mark{width:16px;height:16px;border-radius:50%}
.cd-status{margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.cd-status span{display:none}
[data-step=preview] .cd-diff,[data-step=apply] .cd-after,[data-step=undo] .cd-row:not(.cd-edited) .cd-before,[data-step=undo] .cd-edited .cd-later{display:block;animation:cd-in var(--motion-normal) var(--ease-enter)}
[data-step=preview] [data-cd-for=preview],[data-step=apply] [data-cd-for=apply],[data-step=undo] [data-cd-for=undo]{display:inline}
[data-step=apply] .cd-mark{background:var(--ok)}
[data-step=undo] .cd-row:not(.cd-edited) .cd-mark{border:2px solid var(--ink-3)}
[data-step=undo] .cd-edited{border-color:var(--ink-3)}
[data-step=undo] .cd-edited .cd-mark{background:var(--warn)}
@keyframes cd-in{from{opacity:0}to{opacity:1}}

.small-things{padding:64px 0 32px;border-top:1px solid var(--line)}
.small-things ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px}
.small-things li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink)}
.small-things .icon{width:20px;height:20px;flex:none;color:var(--ink-2);margin-top:1px}

.files-pricing{padding:48px 0;border-top:1px solid var(--line)}
.files-pricing ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.files-pricing li{font-size:15px;line-height:1.5;color:var(--ink);padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--card)}

@media(max-width:960px){
 .hero-b,.stage{grid-template-columns:1fr;gap:24px}
 .flow-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
 .small-things ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .files-pricing ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .hero-b{padding:24px 0}
 .hero-b h1{font-size:36px}
 .hero-b .mug-title .mug-mark{width:40px;height:40px;margin-top:2px}
 .hero-lead{font-size:16px}
 .numbers{grid-template-columns:1fr;gap:12px;margin-bottom:40px}
 .number-card{padding:16px}
 .number-card strong{font-size:32px}
 .flow-stages,.small-things ul,.files-pricing ul{grid-template-columns:1fr}
 .flow .flow-library{grid-template-columns:auto 1fr}
 .flow-library span{grid-column:1/-1;justify-self:start}
 .stage{padding:32px 0}
 .stage-title{flex-direction:column;gap:8px}
 .stage-title h2,.workflow-head h2,.small-things h2,.files-pricing h2{font-size:24px}
 .caption-demo{padding:16px}
 .cd-row{grid-template-columns:40px minmax(0,1fr) 16px;gap:12px;padding:8px}
 .cd-row img{width:40px;height:40px}
 .stage-shot-compare img{padding:8px}
 .small-things{padding:40px 0 24px}
}
@media(prefers-reduced-motion:reduce){.cd-text{animation:none!important}}
[data-step=undo] .cd-edited .cd-file::after{content:" · edited later, kept";font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink-2)}
.point-soon .icon{color:var(--ink-3)}.point-soon .pill{margin-left:8px;vertical-align:middle}
.status-soon .dot{background:var(--ink-3)}.status-soon{color:var(--ink-2)}