/* Automation demo pages. Colours and fonts come from the theme class on <html>. */
.t-posy {
  color-scheme: light;
  --bg: #F6F0E8; --fg: #16183A; --muted: #64657E; --card: #FFFCF7; --soft: #EEE6DB; --line: rgba(22, 24, 58, .13);
  --acc: #2436D9; --acc-ink: #fff; --ok: #157A4B; --bubble: #E6ECFF; --hi: rgba(36, 54, 217, .09);
  --serif: "Instrument", Georgia, serif; --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --h-size: 1.08;
}
.t-crumbo {
  color-scheme: dark;
  --bg: #1A110C; --fg: #F3EADC; --muted: #B9A794; --card: #241710; --soft: #2F2017; --line: rgba(243, 234, 220, .14);
  --acc: #D58C45; --acc-ink: #1A110C; --ok: #8FD4A9; --bubble: #3A281D; --hi: rgba(213, 140, 69, .14);
  --serif: "DM Serif", Georgia, serif; --sans: "Bricolage", "Avenir Next", system-ui, sans-serif; --h-size: 1;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-synthesis: none; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root { --pad: clamp(18px, 4vw, 56px); }

.demo-strip { height: 34px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; background: #000; color: #E6E2DE; font-size: .8rem; white-space: nowrap; }
.demo-strip a { color: inherit; font-weight: 700; }
.demo-strip .tiers { display: inline-flex; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px; }
.demo-strip .tiers a { text-decoration: none; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.demo-strip .tiers a[aria-current="page"] { background: #fff; color: #000; }
@media (max-width: 520px) { .demo-strip .long { display: none; } }

.top { display: flex; align-items: center; gap: 16px; padding: 18px var(--pad); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.6rem/1 var(--serif); }
.brand svg { width: 32px; height: 32px; }
#brand-mark { display: block; width: 32px; height: 32px; flex: none; }
#brand-mark svg { display: block; }
.tag { margin-left: auto; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.intro { padding: clamp(24px, 5vw, 64px) var(--pad) clamp(28px, 4vw, 48px); max-width: 1240px; margin: 0 auto; }
.kicker { display: flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kicker i { width: 28px; height: 1px; background: currentColor; }
.intro h1 { margin-top: 16px; font: 400 clamp(2.9rem, 7vw, 6.4rem)/.98 var(--serif); letter-spacing: -.015em; max-width: 14ch; text-wrap: balance; }
.intro h1 em { font-style: italic; color: var(--acc); }
.intro .lede { margin-top: 18px; max-width: 36rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------------ the run: order on the left, the jobs on the right */
.run { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: clamp(22px, 4vw, 56px); align-items: start; max-width: 1240px; margin: 0 auto; padding: 0 var(--pad) clamp(60px, 8vw, 110px); }
.side { position: sticky; top: 20px; display: grid; gap: 14px; }
.order { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 20px; position: relative; overflow: hidden; }
.order .o-label { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.order .o-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.order.paid .o-label i { background: var(--ok); }
.o-item { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.o-pic { width: 76px; height: 76px; flex: none; border-radius: 16px; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.o-pic > svg { width: 92%; height: 92%; }
.o-item b { display: block; font: 400 1.5rem/1.1 var(--serif); }
.o-item span { color: var(--muted); font-size: .92rem; }
.o-lines { display: grid; gap: 8px; margin-top: 14px; font-size: .94rem; }
.o-lines div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.o-lines dt { color: var(--muted); }
.o-lines dd { font-weight: 600; }
.go { margin-top: 18px; width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .2s, opacity .2s; }
.go:hover { transform: translateY(-1px); }
.go:disabled { opacity: .55; cursor: default; transform: none; }
.o-note { margin-top: 10px; font-size: .82rem; color: var(--muted); text-align: center; }
.stamp { position: absolute; right: 16px; top: 14px; padding: 4px 10px; border: 2px solid var(--ok); color: var(--ok); border-radius: 8px; font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transform: rotate(6deg) scale(1.4); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.order.paid .stamp { opacity: 1; transform: rotate(6deg) scale(1); }

.saved { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px 20px; }
.saved p { color: var(--muted); font-size: .9rem; }
.saved strong { display: block; font: 400 clamp(2.4rem, 4vw, 3.2rem)/1 var(--serif); color: var(--acc); margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.saved .bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 10px; }
.saved .bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .6s cubic-bezier(.2, .8, .2, 1); }

.flow { position: relative; display: grid; gap: 12px; }
.flow::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); display: grid; place-items: center; font: 400 1.05rem/1 var(--serif); color: var(--muted); transition: background-color .3s, border-color .3s, color .3s; }
.dot svg { width: 20px; height: 20px; display: none; }
.step.run .dot { border-color: var(--acc); color: var(--acc); }
.step.run .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--acc); animation: spin .8s linear infinite; }
.step.done .dot { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.step.done .dot span { display: none; }
.step.done .dot svg { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.s-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; transition: border-color .3s, box-shadow .3s; }
.step:not(.run):not(.done) .s-card { border-style: dashed; }
.step:not(.run):not(.done) .s-card h2 { color: var(--muted); }
.step.run .s-card { border-color: var(--acc); box-shadow: 0 0 0 4px var(--hi); }
.s-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.when { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.tool { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.status { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--muted); }
.step.done .status { color: var(--ok); }
.s-card h2 { margin-top: 8px; font: 400 clamp(1.35rem, 2vw, 1.65rem)/1.15 var(--serif); }
.out { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1); }
.out > div { overflow: hidden; min-height: 0; }
.step.done .out { grid-template-rows: 1fr; }
.out-in { padding-top: 12px; }
.was { margin-top: 10px; font-size: .84rem; color: var(--muted); }
.was b { color: var(--fg); font-weight: 600; }
.skip { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px 58px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .4; transition: opacity .3s; }
.skip::before, .skip::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.skip.on { opacity: 1; }

/* ------------------------------------------------ previews inside the steps */
.bubble { max-width: 420px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--bubble); font-size: .95rem; line-height: 1.45; }
.bubble small { display: block; margin-top: 6px; font-size: .74rem; color: var(--muted); }
.bubble .typing::after { content: "|"; margin-left: 1px; animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bubble .pic { margin: -2px -4px 8px; border-radius: 12px; overflow: hidden; background: var(--soft); }
.bubble .pic > svg { width: 100%; height: auto; }
.sheet { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--bg); border-radius: 12px; overflow: hidden; }
.sheet th { text-align: left; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sheet td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet tr.new td { background: var(--hi); font-weight: 700; animation: rowIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.sheet .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .up { color: var(--ok); font-weight: 700; }
.sheet-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cardprint { display: flex; align-items: flex-end; gap: 16px; }
.printer { position: relative; width: 230px; height: 150px; flex: none; }
.printer .slot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.printer .card { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 22px; height: 118px; border-radius: 4px; background: #FFFDF8; color: #16183A; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .4); padding: 12px 14px; font: italic 400 1.05rem/1.25 "Instrument", "DM Serif", Georgia, serif; transform: translateY(70%); clip-path: inset(0 0 0 0); }
.step.done .printer .card { animation: print 1.1s cubic-bezier(.3, .7, .3, 1) .2s both; }
@keyframes print { from { transform: translateY(80%); } to { transform: translateY(0); } }
.printer .card small { display: block; margin-top: 6px; font: 600 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8A8CA6; font-style: normal; }
.route { display: grid; grid-template-columns: 1fr 150px; gap: 14px; align-items: center; }
.route ol { display: grid; gap: 6px; font-size: .9rem; }
.route li { display: flex; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.route li b { font-variant-numeric: tabular-nums; min-width: 58px; }
.route li.new { background: var(--hi); border-color: var(--acc); font-weight: 700; animation: rowIn .6s both; }
.route p { grid-column: 1 / -1; font-size: .84rem; color: var(--muted); }
.route svg { width: 100%; height: auto; }
.route .ping { transform-box: fill-box; transform-origin: center; animation: ping 1.4s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.mail { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); max-width: 460px; }
.mail .m-top { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.mail .m-top b { color: var(--fg); }
.mail .m-body { padding: 12px 14px; font-size: .92rem; }
.stars { display: flex; gap: 4px; margin-top: 8px; color: var(--acc); font-size: 1.3rem; letter-spacing: 2px; }
.cal { display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.cal .day { width: 54px; border-radius: 10px; overflow: hidden; text-align: center; background: var(--card); border: 1px solid var(--line); }
.cal .day i { display: block; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--acc); color: var(--acc-ink); padding: 3px 0; }
.cal .day b { display: block; font: 400 1.5rem/1.3 var(--serif); }
.cal p { font-size: .92rem; }
.cal p span { display: block; color: var(--muted); font-size: .84rem; }
.note-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); max-width: 460px; }
.note-card .app { width: 34px; height: 34px; border-radius: 9px; background: var(--acc); flex: none; display: grid; place-items: center; }
.note-card .app svg { width: 22px; height: 22px; }
.note-card b { display: block; font-size: .9rem; }
.note-card p { font-size: .9rem; }
.note-card small { color: var(--muted); font-size: .76rem; }
.tile { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); max-width: 420px; }
.tile .pic { width: 70px; height: 56px; flex: none; }
.tile .pic > svg { width: 100%; height: 100%; }
.tile b { display: block; font: 400 1.2rem/1.15 var(--serif); }
.tile .badge { display: inline-block; white-space: nowrap; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: .78rem; font-weight: 700; animation: rowIn .5s .5s both; }
.tile s { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats div { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.stats b { display: block; font: 400 1.5rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.stats span { font-size: .78rem; color: var(--muted); }
@media (max-width: 400px) { .sheet .opt { display: none; } .tile .badge { white-space: normal; } .tile .pic { width: 54px; height: 44px; } }
@media (max-width: 560px) { .sheet { font-size: .8rem; } .sheet th, .sheet td { padding: 7px 8px; white-space: normal; } .stats { grid-template-columns: repeat(2, 1fr); } .route { grid-template-columns: 1fr; } .route svg { max-width: 220px; } .cardprint { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------ before and after, and the ask */
.compare { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.compare h2 { font: 400 clamp(2.2rem, 4.4vw, 3.8rem)/1.02 var(--serif); grid-column: 1 / -1; max-width: 18ch; text-wrap: balance; }
.compare h2 em { font-style: italic; color: var(--acc); }
.col { border-radius: 24px; padding: 22px; border: 1px solid var(--line); background: var(--card); }
.col h3 { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.col.after h3 { color: var(--acc); }
.col ul { display: grid; gap: 10px; margin-top: 14px; }
.col li { display: flex; gap: 12px; align-items: baseline; font-size: 1rem; }
.col li::before { content: "\2715"; color: var(--muted); font-size: .8rem; flex: none; }
.col.after li::before { content: "\2713"; color: var(--ok); font-weight: 800; }
.col .big { margin-top: 18px; font: italic 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--serif); }
.ask { text-align: center; padding: clamp(60px, 9vw, 120px) var(--pad); border-top: 1px solid var(--line); }
.ask h2 { font: 400 clamp(2.4rem, 5.4vw, 4.8rem)/1 var(--serif); max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.ask h2 em { font-style: italic; color: var(--acc); }
.ask p { margin: 18px auto 0; max-width: 32rem; color: var(--muted); }
.ask .btns { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); }
.pill.solid { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px var(--pad) 28px; font-size: .86rem; color: var(--muted); border-top: 1px solid var(--line); }
.foot a { color: var(--acc); font-weight: 700; }

@media (max-width: 860px) {
  .run { grid-template-columns: 1fr; }
  .side { position: relative; top: 0; }
  .compare { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .step.run .dot::after, .bubble .typing::after, .route .ping { animation: none; }
  .out, .saved .bar i { transition: none; }
  .step.done .printer .card { animation: none; transform: none; }
}