:root { --fg: #172b4d; --muted: #626f86; --bg: #ffffff; --accent: #0c66e4; --accent-fg: #ffffff; --line: #dcdfe4; --soft: #f7f8f9; --good: #1f845a; --hero: #f1f6ff; }
@media (prefers-color-scheme: dark) { :root { --fg: #dee4ea; --muted: #9fadbc; --bg: #1d2125; --accent: #579dff; --accent-fg: #1d2125; --line: #2c333a; --soft: #22272b; --good: #4bce97; --hero: #1c2b41; } }
* { box-sizing: border-box; }
body { margin: 0; overflow-wrap: break-word; background: var(--bg); color: var(--fg); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
header, main, footer, .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
header { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
header a { color: var(--fg); text-decoration: none; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
nav a { font-weight: 400; color: var(--muted); }
nav a.nav-buy { color: var(--accent-fg); background: var(--accent); padding: 4px 12px; border-radius: 6px; font-weight: 600; }
main { padding-top: 24px; padding-bottom: 48px; }
h1 { font-size: 32px; line-height: 1.2; } h2 { margin-top: 32px; line-height: 1.25; }
a { color: var(--accent); }
img { max-width: 100%; height: auto; }
code { overflow-wrap: anywhere; background: var(--soft); padding: 1px 5px; border-radius: 3px; font-size: 14px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
footer { border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 32px; color: var(--muted); font-size: 14px; }

.btn { display: inline-block; background: var(--accent); color: var(--accent-fg); text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: 8px; border: 2px solid var(--accent); }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }

.hero { background: var(--hero); border-radius: 12px; padding: 32px 24px; margin: 8px 0 24px; }
.hero h1 { font-size: 38px; margin: 0 0 12px; }
.hero p.lead { font-size: 19px; margin: 0; max-width: 680px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 8px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.facts li { background: var(--soft); border-radius: 8px; padding: 12px 14px; font-size: 15px; }
.facts strong { display: block; font-size: 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.product { border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; }
.product h3 { margin: 0 0 6px; font-size: 20px; }
.product p { margin: 0 0 12px; }
.product .price { font-size: 15px; color: var(--muted); margin-top: auto; padding-top: 8px; }
.product .price strong { font-size: 24px; color: var(--fg); }
.product .btns { margin: 12px 0 0; }
.product.featured { border: 2px solid var(--accent); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 0 8px; margin-bottom: 8px; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; margin: 0 0 28px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 700; text-align: center; line-height: 30px; }
.steps h3 { margin: 0 0 6px; }
.shot { border: 1px solid var(--line); border-radius: 6px; display: block; margin: 10px 0; }
.pair { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pair figure { margin: 0; }
figcaption { font-size: 14px; color: var(--muted); }

.compare { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.compare th, .compare td { text-align: left; border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.compare th { background: var(--soft); }
.table-scroll { overflow-x: auto; }

.buybox { border: 2px solid var(--accent); border-radius: 12px; padding: 24px; margin: 32px 0; }
.buybox .amount { font-size: 44px; font-weight: 800; line-height: 1; }
.buybox ul { padding-left: 20px; }
.check { list-style: none; padding-left: 0; }
.check li { padding-left: 26px; position: relative; margin: 4px 0; }
.check li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }

details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; }

.stickybuy { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; z-index: 5; }
.stickybuy .btn { padding: 8px 18px; }

@media (max-width: 560px) { .hero { padding: 24px 16px; } .hero h1 { font-size: 30px; } .buybox .amount { font-size: 36px; } }

.signup-row { display: flex; flex-wrap: wrap; gap: 8px; }
.signup-row input { flex: 1 1 220px; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.small-btn { padding: 2px 10px; font-size: 14px; }

.product .tag { align-self: flex-start; }

/* Home page: AI lessons hero with the illustration */
.hero-lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.hero-lessons img { border-radius: 12px; display: block; }
.hero-lessons .btns { margin: 16px 0 8px; }
details.more { margin: 32px 0 0; border: 0; padding: 0; }
details.more > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; padding: 10px 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; content: "+" / ""; display: inline-block; width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid var(--line); border-radius: 50%; }
details.more[open] > summary::before { content: "\2212"; content: "\2212" / ""; }
details.more > summary:hover { color: var(--fg); }
@media (max-width: 760px) { .hero-lessons { grid-template-columns: 1fr; } }

/* Home page: the AutoCAD Pilot demo video inside the hero */
.demo-video { margin: 24px 0 0; }
.demo-video video { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #222831; box-shadow: 0 12px 32px rgba(9, 30, 66, .25); }
.demo-video figcaption { margin-top: 10px; display: flex; gap: 8px; align-items: baseline; }
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .live-dot { display: none; } }

/* Home page: the AutoCAD Pilot install prompt (paste into Claude Code) */
.install { margin: 22px 0 12px; max-width: 720px; border: 1px solid var(--accent); border-radius: 12px; background: var(--bg); overflow: hidden; }
.install-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.install-title { font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.step-num { flex: none; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 13px; font-weight: 800; text-align: center; line-height: 24px; }
.install pre { margin: 0; padding: 16px; white-space: pre-wrap; background: var(--soft); }
.install pre code { background: none; padding: 0; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg); }
.install pre code::before { content: "> "; content: "> " / ""; color: var(--accent); font-weight: 700; }
.install-foot { margin: 0; padding: 12px 16px; font-size: 14px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.install-foot .step-num { transform: translateY(-1px); }
.copy-btn { padding: 6px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.copy-btn.copied { background: var(--good); border-color: var(--good); }

/* Home page: the AutoCAD path from the free Pilot to the paid tools */
.ladder { margin: 8px 0 32px; }
.ladder h2 { margin: 0 0 16px; font-size: 26px; }
.ladder-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; counter-reset: rung; }
.rung { counter-increment: rung; position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; background: var(--bg); }
.rung::before { content: counter(rung); position: absolute; top: -14px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800; font-size: 14px; text-align: center; line-height: 28px; }
.rung + .rung::after { content: "→"; content: "→" / ""; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 800; font-size: 20px; }
.rung h3 { margin: 4px 0 6px; font-size: 19px; }
.rung p { margin: 0 0 10px; font-size: 15px; }
.rung .price { margin-top: auto; padding-top: 6px; color: var(--muted); }
.rung .price strong { font-size: 20px; color: var(--fg); }
.rung .btn { padding: 8px 16px; }
.rung .btns { margin: 4px 0 0; gap: 8px; }
.rung.featured { border: 2px solid var(--accent); }
.ladder-also { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.ladder-also strong { color: var(--fg); }
@media (max-width: 760px) {
  .ladder-steps { grid-template-columns: 1fr; gap: 24px; }
  .rung + .rung::after { content: "↓"; content: "↓" / ""; left: 50%; top: -24px; transform: translateX(-50%); }
}

/* Home page: phones can't run Pilot, so offer to send the install prompt to the visitor's computer */
.on-phone { display: none; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--hero); font-size: 15px; }
.send-btn { font: inherit; font-weight: 700; cursor: pointer; padding: 10px 18px; width: 100%; }
@media (pointer: coarse), (max-width: 760px) {
  .on-phone { display: flex; }
  .install .copy-btn { background: transparent; color: var(--accent); }
}
.hero-gift { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.cert { transform: rotate(2deg); }
.cert-in { position: relative; text-align: center; padding: 28px 18px; background: var(--bg); border: 2px solid var(--accent); border-radius: 10px; outline: 1px solid var(--accent); outline-offset: -8px; box-shadow: 0 10px 24px rgba(9,30,66,.18); }
.cert-in p { margin: 0; }
.cert-k { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--accent); }
.cert-t { font-size: 26px; font-weight: 800; line-height: 1.15; margin: 8px 0 !important; }
.cert-s { font-size: 14px; color: var(--muted); }
.cert-f { font-size: 13px; font-weight: 700; margin-top: 14px !important; }
.cert-bow { display: block; width: 36px; height: 36px; margin: -44px auto 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--hero); position: relative; }
.cert-bow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--accent-fg), var(--accent-fg)) center/3px 100% no-repeat, linear-gradient(var(--accent-fg), var(--accent-fg)) center/100% 3px no-repeat; }
@media (max-width: 760px) { .hero-gift { grid-template-columns: 1fr; } .cert { margin: 20px 8px 0; } }
@media (max-width: 560px) { .stickybuy .muted { display: none; } }
.hero-gift > * { min-width: 0; }

.journey { list-style: none; padding: 0; margin: 16px 0 28px; position: relative; }
.journey li { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
.journey li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 2px; background: var(--line); }
.journey .jn { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800; display: grid; place-items: center; }
.journey strong { display: block; font-size: 17px; }
.journey div > span { color: var(--muted); display: block; }


.door-ico { font-size: 28px; line-height: 1; }

/* Round 8: project picks */
.art { position: relative; height: 84px; border-radius: 8px; background: var(--hero); border: 1px solid var(--line); overflow: hidden; margin-bottom: 4px; }
.art i { position: absolute; display: block; background: var(--accent); border-radius: 3px; }
.art-web::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--line); }
.art-web i:nth-child(1) { left: 12px; top: 24px; width: 45%; height: 8px; }
.art-web i:nth-child(2) { left: 12px; top: 40px; width: 70%; height: 6px; opacity: .45; }
.art-web i:nth-child(3) { right: 12px; bottom: 10px; width: 30px; height: 14px; background: var(--good); }
.art-game i:nth-child(1) { left: 14px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; }
.art-game i:nth-child(2) { right: 18px; top: 14px; width: 18px; height: 18px; background: var(--good); transform: rotate(45deg); }
.art-game i:nth-child(3) { left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0; opacity: .45; }
.art-tool i { left: 12px; width: 14px; height: 14px; }
.art-tool i:nth-child(1) { top: 12px; } .art-tool i:nth-child(2) { top: 36px; } .art-tool i:nth-child(3) { top: 60px; background: var(--good); }
.art-tool::after { content: ""; position: absolute; left: 36px; right: 14px; top: 16px; height: 6px; border-radius: 3px; background: var(--muted); opacity: .5; box-shadow: 0 24px 0 var(--muted), 0 48px 0 var(--muted); }

/* Round 9: side-by-side price cards */
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px; background: var(--soft); }
.plan p { margin: 0; }
.plan .btn { margin-top: auto; text-align: center; }
.plan-early { border: 2px solid var(--accent); background: var(--bg); position: relative; }
.plan-tag { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--accent); }
.plan-price { display: flex; align-items: baseline; gap: 10px; }
.plan-price s { font-size: 20px; }

/* Round 10: parent FAQ accordion */
.faq { margin: 8px 0 28px; border-top: 1px solid var(--line); }
.faq details { padding: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 2px; min-height: 24px; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; flex: none; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-weight: 700; }
.faq details[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq details p { margin: 0 0 16px; padding-right: 36px; color: var(--muted); }
/* Most visitors come for the lessons (Facebook): lead with them on every screen, then one AutoCAD door, then Pilot. The chooser's lessons door would repeat the hero, so it is hidden. */
@media all {
  main:has(> .hero-lessons) { display: flex; flex-direction: column; }
  .hero-lessons { order: -2; margin-top: 0; }
}
/* Round 12: focused gift page: header drops the AutoCAD/Jira/Support links, leaving brand + Give the gift; project picks become rows on phones */
header.focus { flex-wrap: nowrap; }
header.focus nav a:not(.nav-buy) { display: none; }
@media (max-width: 560px) {
}

/* Async Estimate: reveal illustration (round 13) */
.est { border: 1px solid var(--line); background: var(--hero); border-radius: 12px; padding: 20px; margin: 20px 0; }
.est-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 14px; }
.est-card { text-align: center; perspective: 700px; }
.est-who { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.est-face { position: relative; display: block; height: 96px; font-size: 34px; font-weight: 800; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.7,.3,1); }
.est-back, .est-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.est-back { border: 2px solid var(--accent); color: var(--accent-fg); background: repeating-linear-gradient(45deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 82%, #fff) 8px 16px); }
.est-val { transform: rotateY(180deg); border: 2px solid var(--accent); background: var(--bg); color: var(--fg); }
.est-card[data-v="5"] .est-val { background: var(--accent); color: var(--accent-fg); }
.est-cards.open .est-face { transform: rotateY(180deg); }
.est-cards.open .est-card:nth-child(2) .est-face { transition-delay: .12s; }
.est-cards.open .est-card:nth-child(3) .est-face { transition-delay: .24s; }
.est-cards.open .est-card:nth-child(4) .est-face { transition-delay: .36s; }
.est-msg { font-weight: 700; min-height: 3em; margin: 0; }
/* est scale: shown after reveal */
.est-scale { display: none; margin: 0 0 14px; }
.est-cards.open ~ .est-scale { display: block; }
.est-sl { font-size: 12px; color: var(--muted); }
.est-scale ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.est-scale li { text-align: center; padding: 8px 0 6px; border-radius: 8px; border: 1px solid var(--line); font-weight: 700; color: var(--muted); min-height: 52px; }
.est-scale li.in { background: var(--bg); color: var(--fg); border-color: var(--accent); }
.est-scale li.sug { background: var(--accent); color: var(--accent-fg); }
.est-scale small { display: block; font-size: 11px; font-weight: 600; }
@media (max-width: 500px) { .est { padding: 16px 12px; } .est-cards { gap: 8px; } .est-face { height: 80px; font-size: 28px; } .est-who { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .est-face, .est-cards.open .est-card .est-face { transition: none; transition-delay: 0s; } }

/* repo-docs: file-in-Git to page-in-Confluence illustration (CSS-only tabs) */
.rd { background: var(--hero); border-radius: 12px; padding: 20px; margin: 20px 0; }
.rd > input { position: absolute; opacity: 0; pointer-events: none; }
.rd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.rd-tabs label { cursor: pointer; padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font-weight: 600; font-size: 15px; }
#rd-a:checked ~ .rd-tabs label[for=rd-a], #rd-b:checked ~ .rd-tabs label[for=rd-b] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
#rd-a:focus-visible ~ .rd-tabs label[for=rd-a], #rd-b:focus-visible ~ .rd-tabs label[for=rd-b] { outline: 3px solid var(--fg); outline-offset: 2px; }
.rd-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.rd-pane { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.rd-cap { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rd pre { margin: 0; overflow-x: auto; }
.rd pre code { background: none; padding: 0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: normal; }
.rd-arrow { align-self: center; font-size: 28px; font-weight: 800; color: var(--accent); }
.rd-page { align-self: start; box-shadow: 0 8px 22px rgba(9,30,66,.15); }
.rd-page > div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rd-h { font-size: 18px; margin-bottom: 4px; }
.rd-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 6px 8px; background: var(--soft); border-radius: 6px; }
.rd-row em { font-style: normal; color: var(--muted); margin-left: auto; }
.m { font-style: normal; font-weight: 800; font-size: 12px; padding: 1px 7px; border-radius: 4px; color: var(--accent-fg); }
.m.g { background: var(--accent); } .m.p { background: var(--good); }
.rd-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rd-flow u { text-decoration: none; border: 2px solid var(--accent); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.rd-flow s { text-decoration: none; color: var(--accent); font-weight: 800; }
.rd-br { align-items: center; margin-top: -6px; }
.rd-br span { font-size: 14px; color: var(--muted); font-weight: 600; }
.rd-br label { padding: 3px 12px; font-size: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; }
#rd-m:checked ~ .rd-br label[for=rd-m], #rd-v:checked ~ .rd-br label[for=rd-v] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
#rd-m:focus-visible ~ .rd-br label[for=rd-m], #rd-v:focus-visible ~ .rd-br label[for=rd-v] { outline: 3px solid var(--fg); outline-offset: 2px; }
.rd-vv { display: none; }
#rd-v:checked ~ .rd-grid .rd-vm { display: none; }
#rd-v:checked ~ .rd-grid span.rd-vv, #rd-v:checked ~ .rd-grid .rd-vv.rd-row, #rd-v:checked ~ .rd-grid .rd-vv.rd-li { display: inline; }
#rd-v:checked ~ .rd-grid .rd-row.rd-vv { display: flex; }
#rd-v:checked ~ .rd-grid .rd-li.rd-vv { display: block; }
#rd-a:checked ~ .rd-grid .rd-b, #rd-b:checked ~ .rd-grid .rd-a { display: none; }
@media (max-width: 700px) { .rd-grid { grid-template-columns: 1fr; } .rd-arrow { transform: rotate(90deg); justify-self: center; } .rd { padding: 16px 14px; } }
/* Hotpaths hero: real record -> script -> replay strip (round 15) */
.hero-hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px; align-items: center; }
.hp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: none; }
.hp-flow li { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 8px; box-shadow: 0 6px 18px rgba(9, 30, 66, .12); }
.hp-flow li + li::before { content: "↓"; content: "↓" / ""; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); color: var(--accent); font-weight: 800; font-size: 18px; line-height: 20px; }
.hp-n { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.hp-flow img { display: block; max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.hp-flow small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.hp-script { font-size: 14px; line-height: 1.5; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
@media (max-width: 860px) { .hero-hp { grid-template-columns: minmax(0, 1fr); } }

/* Round 16: phone header becomes a sticky app-style bar: brand on top, nav as one swipeable row of pills (was a wrapping, cut-off text list). Focused gift header (header.focus) keeps its own layout. */
@media (max-width: 760px) {
  html { scroll-padding-top: 92px; }
  header:not(.focus) { position: sticky; top: 0; z-index: 20; background: var(--bg); flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; padding-right: 0; }
  header:not(.focus) > a:first-child { font-size: 18px; padding-right: 16px; }
  header:not(.focus) nav { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px 16px 2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  header:not(.focus) nav::-webkit-scrollbar { display: none; }
  header:not(.focus) nav a { flex: none; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--fg); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
  header:not(.focus) nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* Support page: product picker that opens a prefilled email */
.support-hero h1 { font-size: 34px; }
.reply-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; font-weight: 600; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 14px; }
@media (max-width: 560px) { .support-hero h1 { font-size: 28px; } .support-hero { padding: 24px 18px; } }
.btn-lg { padding: 14px 26px; font-size: 18px; box-shadow: 0 6px 16px rgba(9,30,66,.25); }
.btn-sub { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--accent-fg); color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }
.hero-free{margin:18px 0 12px;padding:16px;border:2px solid var(--accent,#4f8cff);border-radius:12px;background:rgba(79,140,255,.08)}
.hero-free label{display:block;margin-bottom:8px}
.hero-free ol{padding-left:20px}

/* Round 21: phone buy bar on the home page (lessons), shown after the hero button scrolls away */
.homebuy { display: none; }
@media (max-width: 760px) {
  .homebuy:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
  .homebuy .btn { padding: 10px 22px; white-space: nowrap; }
  body:has(.homebuy:not([hidden])) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Round 82: "What will they build?" is one static terminal with all three examples (was round 22's tabbed, animated one) */
.term { border-radius: 12px; overflow: hidden; background: #161b22; color: #e6edf3; box-shadow: 0 12px 28px rgba(9,30,66,.25); margin: 16px 0 24px; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #21262d; font: 12px ui-monospace, Menlo, monospace; color: #9fadbc; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #484f58; display: block; }
.term-bar span { margin-left: 8px; }
.term-body { list-style: none; margin: 0; padding: 6px 16px 10px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.term-body li { padding: 10px 0; border-top: 1px solid #30363d; }
.term-body li:first-child { border-top: 0; }
.tq { display: block; padding-left: 18px; text-indent: -18px; }
.tq::before { content: "> "; color: #79c0ff; font-weight: 700; }
.tl { display: block; color: #7ee787; margin-top: 4px; padding-left: 18px; }

/* Round 84: Hotpaths demo is a static numbered walkthrough (was radio tabs, one step at a time); all four steps are visible, text left and pictures right on desktop */
.hs { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: hs; }
.hs-p { counter-increment: hs; position: relative; padding: 0 0 28px 52px; }
.hs-p::before { content: counter(hs); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800; display: grid; place-items: center; }
.hs-p::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 6px; width: 2px; background: var(--line); }
.hs-p:last-child { padding-bottom: 0; }
.hs-p:last-child::after { display: none; }
.hs-p h3 { margin: 0 0 6px; }
.hs-p > p { margin: 0 0 12px; }
.hs-p .shot { background: var(--bg); max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.hs-p .pair { margin: 12px 0; }

.cert-to { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 15px; margin-top: 12px; color: var(--muted); }
.cert-to input { width: 70%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 20px; font-weight: 700; text-align: center; color: var(--fg); background: transparent; border: 0; border-bottom: 2px dashed var(--accent); border-radius: 0; padding: 4px 2px; }
.cert-to input::placeholder { color: var(--muted); font-weight: 400; }
.cert-to input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-bottom-style: solid; }
.cert-note { grid-column: 2; margin: 0; }
.hero-gift > div:first-child { grid-row: 1 / span 2; }
.hero-gift > .cert { align-self: end; }
@media (max-width: 760px) { .cert-note { grid-column: 1; margin: 14px 8px 0; } .hero-gift > div:first-child { grid-row: auto; } .hero-gift > .cert { align-self: auto; } }



.eb { margin: 12px 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.eb-head, .eb-row { display: grid; grid-template-columns: 76px 1fr 1fr; gap: 12px; align-items: center; }
.eb-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 10px 8px; }
.eb-row { padding: 10px; margin-top: 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--good); }
.eb-row.hot { border-left-color: var(--accent); }
.eb-v { display: flex; gap: 6px; }
.eb-v i { font-style: normal; font-weight: 700; min-width: 26px; padding: 2px 0; text-align: center; border-radius: 6px; border: 1px solid var(--line); font-size: 14px; }
.eb-s { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.eb-s u { display: block; height: 6px; border-radius: 3px; background: var(--good); text-decoration: none; }
.eb-row.hot .eb-s u { background: var(--accent); }
.eb-s em { font-style: normal; font-weight: 700; }
.eb figcaption { margin: 10px 0 0; }
@media (max-width: 500px) { .eb { padding: 10px; } .eb-head { display: none; } .eb-row { grid-template-columns: 1fr 1fr; } .eb-row b { grid-column: 1 / -1; } }
/* Repo Docs setup steps (round 29) */
.rs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 16px; }
.rs > li { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--soft); }
.rs-t { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.rs-t h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.rs-t p { margin: 0; }
.rs-n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800; display: grid; place-items: center; }
.rs p { margin: 8px 0; }
.rs-hosts { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rs-hosts li { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.45; }
.rs-hosts b { display: block; font-size: 15px; margin-bottom: 4px; }
.rs-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.rs-form span { background: var(--bg); border: 1px solid var(--line); border-bottom: 2px solid var(--accent); border-radius: 6px; padding: 8px 10px; font: 14px/1.3 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.rs-form small { display: block; font: 12px/1.3 -apple-system, "Segoe UI", sans-serif; color: var(--muted); margin-bottom: 2px; }
@media (max-width: 700px) { .rs-hosts { grid-template-columns: 1fr; } .rs-form { grid-template-columns: 1fr 1fr; } }


/* Round 32: brand mark in front of the wordmark on every page (pure CSS, no extra request). A path with a start dot and an end node. */
header > a:first-child { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: -.01em; }
header > a:first-child::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 2px 8px rgba(12, 102, 228, .35);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230c66e4'/%3E%3Cstop offset='1' stop-color='%234c9aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='30' height='30' rx='9' fill='url(%23g)'/%3E%3Cpath d='M8 21 L8 12 L15 12 L15 19 L22 19 L22 10' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='21' r='2.2' fill='%23fff'/%3E%3Ccircle cx='22' cy='9' r='2.6' fill='%23ffd166'/%3E%3C/svg%3E") center / cover no-repeat; }

/* Site map footer (round 33) */
.sitemap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.4fr); gap: 4px 32px; margin-bottom: 20px; }
.sm-brand { font-size: 20px; font-weight: 800; color: var(--fg); text-decoration: none; align-self: end; }
.sm-tag { grid-column: 1; margin: 0; color: var(--muted); }
.sitemap nav { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.sitemap nav div { display: flex; flex-direction: column; gap: 6px; }
.sitemap h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); margin: 0 0 4px; }
.sitemap nav a { color: var(--accent); overflow-wrap: anywhere; padding: 2px 0; }
.sm-legal { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 700px) { .sitemap { grid-template-columns: 1fr; } .sitemap nav { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; margin-top: 12px; } .sitemap nav a { padding: 6px 0; } }
.sitemap nav { align-items: start; align-content: start; }
.sitemap nav div { align-self: start; }
.sitemap h2 { margin: 0 0 4px !important; line-height: 1.3; }
.sitemap nav a { text-decoration: none; line-height: 1.35; }
.sitemap nav a:hover { text-decoration: underline; }
.sm-brand { align-self: start; }
@media (max-width: 700px) { .sitemap nav { gap: 20px 16px; } }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 24px; }
.who-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 10px; background: var(--soft); color: var(--fg); text-decoration: none; }
.who-card:hover, .who-card:focus-visible { border-color: var(--accent); }
.who-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-size: 16px; }
.who-card strong { font-size: 17px; }
.who-pain { font-size: 14px; color: var(--muted); }
.who-fix { font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.who-fix::before { content: "\2192  "; color: var(--good); }
@media (max-width: 760px) { .who { grid-template-columns: 1fr; } }
/* round 48: persona cards collapse to one compact bordered list (pain, then fix, per row) */
.who { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow: hidden; }
.who-card { display: grid; grid-template-columns: 170px 1fr; column-gap: 20px; row-gap: 2px; align-items: baseline; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 14px 18px; }
.who-card:first-child { border-top: 0; }
.who-card strong { grid-row: 1 / span 2; }
.who-ico { display: none; }
.who-fix { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 760px) { .who-card { grid-template-columns: 1fr; padding: 12px 14px; } .who-card strong { grid-row: auto; font-size: 16px; } }
section.tools { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
.fmt-card { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; position: relative; }
.fmt-card h3 { margin: 0 0 8px; }
.fmt-ext { margin: 0 0 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.fmt-max { margin: 0 0 10px; font-size: 14px; opacity: .85; }
.fmt-card ul { margin: 0; padding-left: 18px; font-size: 15px; }
.fmt-card li { margin: 0 0 4px; }
@media (max-width: 700px) {
  .fmt { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow: hidden; }
  .fmt-card { border: 0; border-radius: 0; background: none; padding: 14px 16px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .fmt-card + .fmt-card { border-top: 1px solid var(--line); }
  .fmt-card h3 { margin: 0; flex: 1 0 100%; }
  .fmt-ext, .fmt-max { margin: 0; }
  .fmt-card ul { flex: 1 0 100%; margin-top: 6px; font-size: 14px; }
  .fmt-card li { margin: 0 0 2px; }
}
/* Async Estimate: three-step round flow */
.flow { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: none; }
.flow > li { padding-top: 48px; }
.flow-n { position: absolute; left: 18px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800; text-align: center; line-height: 28px; }
.flow > li:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 14px; width: 12px; color: var(--muted); font-weight: 700; line-height: 28px; text-align: center; z-index: 1; }
.flow p { margin: 0 0 8px; font-size: 15px; }
@media (max-width: 700px) { .flow { grid-template-columns: 1fr; } .flow > li:not(:last-child)::after { content: "\2193"; right: 18px; } }

/* Round 38: tutoring top ribbon merged into the bottom bar: one persistent early-bird buy bar (price, days left, direct PayPal link); the ribbon is gone. */
.stickybuy s { opacity: .7; }
@media (max-width: 560px) { .stickybuy .muted { display: inline; font-size: 13px; } .stickybuy { gap: 8px 12px; flex-wrap: nowrap; } .stickybuy > span { line-height: 1.25; } }
/* Home: Jira/Confluence app cards: price and buttons share one row, so each card is compact (round 41) */
section.tools .product { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
section.tools .product > .pv, section.tools .product > .tag, section.tools .product > h3, section.tools .product > p:not(.price) { grid-column: 1 / -1; }
section.tools .product .price { grid-column: 1; margin: 12px 0 0; padding: 0; line-height: 1.2; }
section.tools .product .price strong { display: block; font-size: 22px; }
section.tools .product .btns { grid-column: 2; margin: 12px 0 0; justify-content: flex-end; flex-wrap: wrap; }
section.tools .product .btns .btn { padding: 9px 14px; }
@media (max-width: 480px) { section.tools .product { grid-template-columns: 1fr; } section.tools .product .btns { grid-column: 1; justify-content: flex-start; } section.tools .product .price { display: flex; gap: 6px; align-items: baseline; } section.tools .product .price strong { display: inline; } }
section.tools .product > .tag { justify-self: start; }
.buybox-one { border: 0; padding: 0; margin: 32px 0; }
.buybox-one .plan-early { align-items: flex-start; }
.buybox-one .plan-early .btn { margin-top: 8px; width: 100%; box-sizing: border-box; }
.plan-reg { margin: 12px 4px 0; font-size: 15px; }

/* Round 44: support picker is one compact row per product (text left, actions right; phones: tighter card, Docs as a text link) */
.support-list { grid-template-columns: 1fr; gap: 10px; }
.support-list .product { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center; padding: 14px 18px; }
.support-list .product > .tag { grid-column: 1; justify-self: start; margin-bottom: 4px; }
.support-list .product > h3 { grid-column: 1; margin: 0; font-size: 19px; }
.support-list .product > p { grid-column: 1; margin: 2px 0 0; }
.support-list .product > .btns { grid-column: 2; grid-row: 1 / span 3; margin: 0; flex-wrap: nowrap; align-items: center; }
/* Round 95: button columns line up across support rows on desktop */
@media (min-width: 701px) { .support-list .product > .btns { display: grid; grid-template-columns: 210px 110px; gap: 8px; } .support-list .btns .btn { text-align: center; justify-content: center; } }
.support-list .btn.ghost { border-color: transparent; padding-left: 6px; padding-right: 6px; text-decoration: underline; }
@media (max-width: 560px) {
  .support-list .product { grid-template-columns: 1fr; padding: 14px; }
  .support-list .product > .btns { grid-column: 1; grid-row: auto; margin-top: 10px; }
}

/* Round 70: phones: support picker is one bordered list (rows split by hairlines, compact actions) instead of four cards */
@media (max-width: 560px) {
  .support-list { gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .support-list .product { border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 12px 14px; }
  .support-list .product:first-child { border-top: 0; }
  .support-list .product > h3 { font-size: 18px; }
  .support-list .product > .btns { margin-top: 8px; gap: 6px; align-items: center; }
  .support-list .btn:not(.ghost) { padding: 8px 14px; font-size: 15px; }
}
/* Round 47: on desktop the Pilot hero is two columns (install steps left, real demo video right) so the page is a screen shorter; phones stay stacked. */
@media (min-width: 900px) {
  .hero#pilot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .hero#pilot > .eyebrow, .hero#pilot > h1, .hero#pilot > .lead { grid-column: 1 / -1; }
  .hero#pilot > .install, .hero#pilot > .small { grid-column: 1; max-width: none; }
  .hero#pilot > .demo-video { grid-column: 2; grid-row: 4 / span 2; margin: 22px 0 0; }
}

/* Round 49: Hotpaths hero flow on phones (<=560px) is one swipeable row of three cards (record / script / replay) instead of three stacked cards, so the facts and demo are about 400px closer. Arrows between cards are dropped; the cards peek to show there is more. */
@media (max-width: 560px) {
  .hp-flow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hp-flow::-webkit-scrollbar { display: none; }
  .hp-flow li { flex: 0 0 82%; scroll-snap-align: center; display: flex; flex-direction: column; }
  .hp-flow li + li::before { content: none; }
  .hp-flow li > img, .hp-flow li > .hp-script { margin-top: auto; margin-bottom: auto; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) { .hp-flow { scroll-behavior: smooth; } }
/* Round 50: the AutoCAD and Atlassian block is one disclosure; collapsed on phones (set in index.html), open on desktop */
.more-tools { border: 0; padding: 0; margin: 16px 0 0; }
.more-tools > summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--accent); border-radius: 12px; background: var(--soft); color: var(--fg); cursor: pointer; }
.more-tools > summary::-webkit-details-marker { display: none; }
.more-tools > summary::after { content: "+"; content: "+" / ""; margin-left: auto; flex: none; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-weight: 700; }
.more-tools[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.more-tools > summary strong { display: block; line-height: 1.25; }
.more-tools > summary span span { display: block; font-size: 14px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.more-tools > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-tools[open] > summary { margin-bottom: 16px; }

/* Hotpaths hero: one action (free key); the demo is a text link, buying lives in the bottom bar and buy box */
.hp-see { margin: 14px 0 0; font-weight: 600; }

/* Round 53: Async Estimate round flow on phones (<=700px) is one compact bordered list (number left, text right, no arrows) instead of three tall cards, about 150px shorter. */
@media (max-width: 700px) {
  .flow { gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow: hidden; }
  .flow > li.fmt-card { border: 0; border-radius: 0; background: none; padding: 14px 16px 6px 56px; }
  .flow > li + li { border-top: 1px solid var(--line); }
  .flow > li { padding-top: 14px; }
  .flow > li:not(:last-child)::after { content: none; }
  .flow-n { left: 16px; top: 14px; }
  .flow h3 { margin: 0 0 4px; font-size: 17px; }
}

.rs input[name=rsh] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rs-tabs { display: none; }
@media (max-width: 700px) {
  .rs-tabs { display: flex; gap: 8px; margin: 10px 0 0; }
  .rs-tabs label { padding: 8px 14px; min-height: 40px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-weight: 600; font-size: 15px; cursor: pointer; }
  #rsh-a:checked ~ .rs-tabs [for=rsh-a], #rsh-b:checked ~ .rs-tabs [for=rsh-b], #rsh-c:checked ~ .rs-tabs [for=rsh-c] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  #rsh-a:focus-visible ~ .rs-tabs [for=rsh-a], #rsh-b:focus-visible ~ .rs-tabs [for=rsh-b], #rsh-c:focus-visible ~ .rs-tabs [for=rsh-c] { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rs-hosts li { display: none; }
  #rsh-a:checked ~ .rs-hosts .h-a, #rsh-b:checked ~ .rs-hosts .h-b, #rsh-c:checked ~ .rs-hosts .h-c { display: block; }
}

/* Tutoring: the sticky buy bar steps aside while the hero or price-card button is on screen (round 55) */
.stickybuy { transition: transform .2s ease, opacity .2s ease, visibility .2s; }
.stickybuy.away { transform: translateY(100%); opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .stickybuy { transition: none; } }

/* Round 57: Hotpaths four fact cards become one row of compact chips (details already in the buy box and FAQ). */
.facts.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.facts.chips li { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
/* Round 60: keyboard access: skip-to-content link and one visible focus ring for links, buttons and form fields */
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 0; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, nav a.nav-buy:focus-visible { outline-color: var(--fg); }

/* Privacy page: at-a-glance strip */
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 20px; }
.glance div { background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 8px; padding: 12px 14px; }
.glance strong { display: block; margin-bottom: 2px; }
.glance span { color: var(--muted); font-size: 14px; line-height: 1.4; }
@media (max-width: 600px) { .glance { grid-template-columns: 1fr; gap: 8px; } }

/* Privacy pages: readable rhythm, scope names stay whole */
.legal { line-height: 1.6; }
.legal h2 { margin: 36px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal h3 { margin: 24px 0 6px; font-size: 18px; }
.legal p, .legal ul { margin: 0 0 14px; }
.legal li { margin: 0 0 6px; }
.legal td:first-child code { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 520px) { .legal .compare td, .legal .compare th { padding: 8px 8px; } .legal .compare td:first-child code { font-size: 12.5px; padding: 1px 3px; } }

/* Round 67: home phone header is just the brand bar; the pill row repeated the page's own sections and was cut off (footer sitemap and the AutoCAD/Jira door cover navigation). Desktop keeps its nav. */
@media (max-width: 760px) { html:has(header.bare) { scroll-padding-top: 56px; } header.bare nav { display: none; } header.bare { padding-top: 12px; padding-bottom: 12px; } }

/* Round 68: same bare brand-bar header on phones for support, Hotpaths, Repo Docs and Async Estimate (each has the site-map footer; Hotpaths keeps its sticky buy bar). */

/* Round 73: phone site map is a compact ruled list, one row per section (label left, links wrap beside it) instead of a 2x2 grid with uneven gaps. Desktop unchanged. */
@media (max-width: 700px) {
  .sitemap nav { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .sitemap nav div { display: grid; grid-template-columns: 108px 1fr; column-gap: 12px; row-gap: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .sitemap h2 { grid-row: 1 / span 4; margin: 0 !important; padding-top: 6px; }
  .sitemap nav a { padding: 5px 0; }
}

/* Round 74: Hotpaths fact chips are one swipeable row on phones instead of wrapping to four lines (copy unchanged) */
@media (max-width: 560px) {
  .facts.chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; margin: 12px -16px 4px; padding: 2px 16px 8px; scrollbar-width: none; }
  .facts.chips::-webkit-scrollbar { display: none; }
  .facts.chips li { flex: none; white-space: nowrap; scroll-snap-align: start; font-size: 13px; padding: 5px 12px; }
}

/* Phones: the lessons animation shows whole (the call tiles and the Game/Website/App track are part of the story); was a 170px crop of the old desk illustration (round 75) */
@media (max-width: 600px) {
  .hero-lessons img { width: 100%; height: auto; }
}

/* Support: security report is a compact bordered card (text left, action right; stacks on phones) */
.sec{display:flex;gap:16px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:28px 0 8px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px}
.sec h2{margin:0 0 6px;font-size:1.15rem}
.sec p{margin:0;max-width:52ch}
.sec .btn{white-space:nowrap}
.glance.two { grid-template-columns: repeat(2, 1fr); }
.glance.two div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) { .glance.two { grid-template-columns: 1fr; } }

/* Round 80: site-wide type pass. Display headings are heavier and tighter with balanced line breaks (no one-word last lines on phones); body copy avoids orphans; prices use tabular figures. */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-weight: 800; letter-spacing: -.025em; }
h2 { font-weight: 750; letter-spacing: -.015em; }
h3 { letter-spacing: -.01em; }
.hero h1 { font-size: clamp(32px, 5.2vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.hero p.lead, .lead { text-wrap: pretty; }
p, li, figcaption { text-wrap: pretty; }
.amount, .price strong, .buy-price, .btn { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .hero h1 { font-size: clamp(29px, 8.4vw, 34px); } }

/* Round 83: Batch Plot (home) is a bordered row like the ladder cards above it: tag, name and one line on the left, the pricing email as a button on the right (stacks on phones). Replaces the loose sentence under the cards. */
.ladder-also { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 18px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.ladder-also > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ladder-also strong { font-size: 18px; }
.ladder-also .btn { flex: none; }
@media (max-width: 600px) { .ladder-also { flex-direction: column; align-items: flex-start; } }
.hs-p .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.hs-p .pair figure { margin: 0; min-width: 0; }
.hs-p .pair .shot { width: 100%; }
@media (max-width: 560px) { .hs-p { padding-left: 44px; } .hs-p .btns { flex-direction: column; align-items: flex-start; } }
/* Round 85: Async Estimate demo: message and Reveal button share one row (no dead gap under the message); step cards hug their text on desktop. */
.est-act { display: flex; align-items: flex-start; gap: 16px; }
.est-act .est-msg { flex: 1; min-height: 0; }
.est-act .btn { flex: none; margin: 0; }
.flow { align-items: start; }
@media (max-width: 500px) { .est-act { flex-direction: column; gap: 12px; } .est-act .btn { width: 100%; } }
@media (max-width: 700px) { .flow { align-items: stretch; } }

/* Round 86: home Jira/Confluence app cards get a small decorative strip (what the app shows) above the tag; aria-hidden, CSS only */
.pv { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; width: 100%; box-sizing: border-box; height: 46px; padding: 10px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; overflow: hidden; }
.pv code { font-size: 13px; color: var(--muted); }
.pv b { color: var(--muted); margin: 0 4px; }
.pv i:not(.m) { font-style: normal; font-weight: 800; min-width: 28px; padding: 3px 0; text-align: center; border-radius: 6px; }
.pv .q { background: var(--accent); color: var(--accent-fg); }
.pv .v { border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.plan-assure { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; font-size: 15px; }
.plan-assure span { color: var(--accent); margin-right: 4px; }

/* Round 89: Async Estimate round steps on phones: the fmt-card flex layout (round 53 reused it) spread each step's title and text apart; steps are plain blocks again, with a vertical rail joining the numbered dots so it reads as one sequence. */
@media (max-width: 700px) {
  .flow > li.fmt-card { display: block; padding: 14px 16px 4px 56px; }
  .flow > li.fmt-card p { margin: 0 0 10px; }
  .flow > li:not(:last-child)::before { content: ""; position: absolute; left: 29px; top: 46px; bottom: -14px; width: 2px; background: var(--accent); opacity: .35; }
  .flow-n { z-index: 1; }
}
/* Round 90: Hotpaths demo step 2: Before/After dialogs read as a change. Captions become pills (After in green) and an arrow sits between the two pictures. */
.hs-p .pair:has(figure + figure) figure { position: relative; display: flex; flex-direction: column; }
.hs-p .pair:has(figure + figure) figcaption { order: -1; align-self: flex-start; margin: 0 0 -2px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted, inherit); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hs-p .pair:has(figure + figure) figure:last-child figcaption { border-color: var(--good); color: var(--good); }
.hs-p .pair:has(figure + figure) figure:last-child .shot { border-color: var(--good); box-shadow: 0 0 0 2px var(--good); }
.hs-p .pair:has(figure + figure) figure:first-child::after { content: "\2192"; content: "\2192" / ""; position: absolute; right: -22px; top: 55%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800; font-size: 18px; line-height: 34px; text-align: center; box-shadow: 0 2px 8px rgba(9,30,66,.3); }
.hs-p .pair:has(figure + figure) { gap: 22px; }

/* Round 94: free-tier box on the Jira/Confluence app pages is one slim row on desktop (text left, buttons right) */
.buybox-free { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
@media (min-width: 761px) {
  .buybox-free { display: grid; grid-template-columns: 1fr auto; column-gap: 28px; align-items: center; padding: 18px 24px; margin: 24px 0; }
  .buybox-free .eyebrow { grid-column: 1; margin: 0 0 4px; }
  .buybox-free > p:not(.eyebrow) { grid-column: 1; margin: 0; }
  .buybox-free .btns { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; }
  .buybox-free .btn { white-space: nowrap; }
}

/* Round 98: Hotpaths phone hero drops the swipeable 1-2-3 strip (clipped on phones, repeats the numbered demo directly below); the demo link stays. Desktop unchanged. */
@media (max-width: 600px) { .hp-flow { display: none; } }

/* Round 99: 404 page: three whole-row links instead of three tall cards */
.nf-list { display: grid; gap: 10px; margin: 20px 0; }
.nf-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.nf-list a::after { content: "\2192"; grid-column: 3; grid-row: 1 / span 2; color: var(--accent); font-weight: 700; }
.nf-list b { font-size: 1.05rem; }
.nf-list .muted { grid-column: 1 / span 2; }
.nf-list a:hover { border-color: var(--accent); }

/* Round 100: ladder heading clears the numbered badges that overhang the cards (they touched the heading); the closing three-fact row gets a divider-free breathing gap above the footer. */
.ladder h2 { margin-bottom: 30px; }
.ladder + .ladder-also, .ladder .ladder-also { margin-top: 22px; }

/* Pilot hero: an animated sketch of the workflow (img/pilot-flow.svg) instead of the video; the real recording is on pilot/ */
.flow-anim img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 32px rgba(9, 30, 66, .25); }
.flow-anim .watch-btn { margin-top: 12px; }
.watch-btn span { font-size: .8em; }
/* Pause control for the looping SVG art (WCAG 2.2.2); on the lessons art it sits over the bottom-right corner */
.anim-toggle { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; }
.anim-toggle:hover { color: var(--fg); }
.anim-fig { margin: 0; position: relative; }
.anim-fig .anim-toggle { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(8, 21, 37, .75); color: #fff; text-decoration: none; }

/* Pilot page: download block, subscribe box, changelog */
.pl-dl, .pl-sub, #whats-new, #see-it, .pl-more { margin-top: 28px; }
.pl-dl .btns .btn { text-align: center; }
.pl-steps { padding-left: 22px; max-width: 720px; }
.pl-sub { max-width: 720px; padding: 16px; border: 2px solid var(--accent); border-radius: 12px; background: var(--soft); }
.pl-sub label { display: block; margin-bottom: 8px; }
.pl-sub p { margin: 8px 0 0; }
details.rel { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 8px 0; max-width: 820px; }
details.rel > summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
details.rel h3 { margin: 14px 0 4px; }
details.rel ul { margin: 0; padding-left: 20px; }
details.rel li { margin: 4px 0; overflow-wrap: anywhere; }
#see-it .demo-video { max-width: 820px; }
@media (max-width: 560px) { .pl-dl .btns { flex-direction: column; } .pl-dl .btns .btn, .pl-sub .signup-row .btn { width: 100%; box-sizing: border-box; } }