/* Cloud Migration Assistant case study. Inter on the page, one Atlassian blue accent, and three pillar colours for
   trust: violet for predictable, teal for reliable, amber for transparent. Product screens (.app) are HTML in an
   Atlassian-like system font and tokens, with their own light and dark values. Diagrams are inline SVG on page tokens. */
:root{--rule:#e6e8eb;--rule2:#d3d7dd;--panel:#f7f8f9;--card:#fff;--chip:#f0f1f3;--acc:#0c66e4;--acc-s:#e9f2ff;--on-acc:#fff;--pp:#6e5dc6;--pr:#1d7f8c;--pt:#a8650a;--bad:#c9372c;--ok:#1f845a}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--rule:#25272a;--rule2:#33363b;--panel:#17181a;--card:#121212;--chip:#222428;--acc:#579dff;--acc-s:#0e2448;--on-acc:#0b1220;--pp:#a395f2;--pr:#5cc4d0;--pt:#e2b203;--bad:#f87168;--ok:#4bce97}}
:root[data-theme=dark]{--rule:#25272a;--rule2:#33363b;--panel:#17181a;--card:#121212;--chip:#222428;--acc:#579dff;--acc-s:#0e2448;--on-acc:#0b1220;--pp:#a395f2;--pr:#5cc4d0;--pt:#e2b203;--bad:#f87168;--ok:#4bce97}

body:has(main.at){font-family:InterVariable,Inter,Arial,Helvetica,sans-serif;font-feature-settings:"cv01","ss03","cv11"}
html:has(main.at){overflow-x:clip}
main.at{max-width:1248px;padding-inline:40px}
.at .back{margin-bottom:112px}
.at article{line-height:1.7;min-width:0}
.at section{margin-top:200px;scroll-margin-top:40px}
.at .prose{max-width:640px}
.at h2{font-size:32px;line-height:1.25;font-weight:500;color:var(--strong);letter-spacing:-.02em;margin-bottom:24px}
.at h3{font-size:16px;line-height:1.4;font-weight:500;color:var(--strong);margin-bottom:6px}
.at .prose p{font-size:18px;color:var(--text);margin-bottom:20px}
.at .prose p:last-child{margin-bottom:0}
.at .prose.after{margin-top:96px}
.at figure{margin:0}
.at figcaption{font-size:14px;line-height:1.6;color:var(--soft);margin:20px 0 0;max-width:640px}
.at .defs{position:absolute}
.at .ic{display:inline-flex;vertical-align:-2px;color:currentColor}
.at .ic svg{width:16px;height:16px;display:block}
.at .spot{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--acc-s);color:var(--acc);margin-bottom:20px}
.at .spot svg{width:24px;height:24px;display:block}

/* Hero */
.at h1{font-size:72px;line-height:1;font-weight:500;letter-spacing:-.04em;color:var(--strong);margin-bottom:28px}
.at .lede{font-size:24px;line-height:1.45;max-width:780px;color:var(--text);margin-bottom:72px;letter-spacing:-.005em}
.at .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid var(--rule);padding-top:24px;margin:0 0 88px}
.at .facts dt{font-size:13px;color:var(--muted);margin-bottom:4px}
.at .facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--strong)}
.at .hero-fig.sub{margin-top:72px}

/* Screens sit in a browser window */
.at .shot{border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--rule),0 2px 4px rgba(9,30,66,.04),0 28px 64px -28px rgba(9,30,66,.3)}
.at .win{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--rule)}
.at .win i{width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
.at .win i:nth-child(2){background:#febc2e}.at .win i:nth-child(3){background:#28c840}
.at .win .url{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:26px;padding:0 72px;border-radius:7px;background:var(--card);box-shadow:0 0 0 1px var(--rule);font-size:12px;color:var(--soft);white-space:nowrap}
.at .win .url svg{width:11px;height:11px;color:var(--muted)}

/* Contents rail, wide screens only, once the hero has scrolled away */
.at .toc{display:none}
@media(min-width:1560px){
  .at .toc{display:block;position:fixed;z-index:5;top:96px;left:max(24px,calc((100vw - 1168px) / 2 - 196px));width:150px;max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:none;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
  html.toc-on .at .toc{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}
}
.at .toc ol{list-style:none;margin:0 0 20px;padding:0}
.at .toc a{display:block;font-size:13px;line-height:1.35;padding:4px 0 4px 12px;color:var(--muted);text-decoration:none;border-left:1px solid var(--rule);transition:color .2s,border-color .2s}
.at .toc a:hover{color:var(--strong)}
.at .toc a.on{color:var(--strong);border-left-color:var(--acc)}
.at .toc-h{font-size:12px;color:var(--strong);margin:0 0 6px;font-weight:500}

/* Parts: one per journey */
.at .part{margin-top:240px;padding-top:40px;border-top:1px solid var(--strong)}
.at .part h2 .jn{display:inline-grid;vertical-align:.32em;width:40px;height:40px;font-size:20px;letter-spacing:0;margin:0 18px 0 0}
.at .part h2{font-size:56px;line-height:1.05;letter-spacing:-.04em;margin-bottom:20px}
.at .part p{font-size:20px;line-height:1.5;color:var(--text);max-width:640px;margin:0}
.at .part+section{margin-top:120px}

/* Columns and notes */
.at .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:72px}
.at .cols p{font-size:15px;line-height:1.6;color:var(--soft);margin:0}
.at .note{display:flex;gap:14px;align-items:flex-start;margin:48px 0 0;padding:18px 22px;border-radius:14px;border:1px solid var(--rule);font-size:15px;line-height:1.55;color:var(--text);max-width:860px}
.at .note .ic{color:var(--acc);margin-top:2px}
.at .note .ic svg{width:18px;height:18px}
.at .thanks{font-size:15px!important;color:var(--soft)!important;margin-top:40px}

/* Context: from the server to Cloud */
.at .ctx{margin-top:72px}
.at .ctx-row{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr;align-items:stretch}
.at .ctx-card{border:1px solid var(--rule);border-radius:18px;padding:28px 26px 30px;background:var(--card)}
.at .ctx-card.on{border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 4%,var(--card))}
.at .ctx-card p{font-size:15px;line-height:1.55;color:var(--soft);margin:0}
.at .ctx-arrow{position:relative;align-self:center;height:1px;margin:0 10px;background:var(--line)}
.at .ctx-arrow::after{content:'';position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--line);border-right:0}
.at .ctx-time{list-style:none;margin:40px 0 0;padding:20px 0 0;display:grid;grid-template-columns:1fr 2fr 1fr;border-top:1px dashed var(--rule2);font-size:14px;line-height:1.5}
.at .ctx-time li{display:flex;flex-direction:column;gap:2px}
.at .ctx-time li.mid{text-align:center}
.at .ctx-time li:last-child{text-align:right}
.at .ctx-time b{font-weight:500;color:var(--strong)}
.at .ctx-time span{color:var(--soft)}

/* Problem statement, with the questions behind each phrase */
.at .ps{margin-top:72px;background:var(--panel);border-radius:24px;padding:64px 56px 48px}
.at .ps-text{font-size:36px;line-height:1.35;letter-spacing:-.025em;color:var(--strong);max-width:960px;margin:0 0 56px;font-weight:500}
.at .ps-text mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 55%,transparent);text-decoration-thickness:2px;text-underline-offset:8px;border-radius:4px;transition:background .25s,text-decoration-color .25s}
.at .ps:has([data-q=trust]:is(:hover,:focus-visible)) mark[data-q=trust],
.at .ps:has([data-q=journey]:is(:hover,:focus-visible)) mark[data-q=journey],
.at .ps:has([data-q=users]:is(:hover,:focus-visible)) mark[data-q=users],
.at .ps:has([data-q=pain]:is(:hover,:focus-visible)) mark[data-q=pain]{background:var(--acc-s);text-decoration-color:var(--acc)}
.at .ps-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.at .ps-qs a{display:flex;flex-direction:column;justify-content:space-between;gap:16px;height:100%;padding:18px 18px 16px;border-radius:14px;background:var(--card);border:1px solid var(--rule);text-decoration:none;font-size:15px;line-height:1.45;color:var(--strong);transition:border-color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.at .ps-qs small{font-size:12px;color:var(--muted);transition:color .2s}
.at .ps-qs small::after{content:' →'}
.at .ps-qs a:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.at .ps-qs a:hover small{color:var(--acc)}
.at .ps figcaption{margin-top:28px}

/* Process: four phases */
.at .phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:72px;position:relative;padding-top:36px}
.at .phases::before{content:'';position:absolute;left:6px;right:0;top:6px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--acc),var(--pp))}
.at .phases>div{position:relative}
.at .phases>div::before{content:'';position:absolute;left:0;top:-36px;width:10px;height:10px;margin-top:2px;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--acc)}
.at .phases>div:nth-child(3)::before{box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 40%,var(--pp))}
.at .phases>div:nth-child(4)::before{box-shadow:0 0 0 2px var(--pp)}
.at .phases h3{font-size:20px;letter-spacing:-.01em;margin-bottom:16px}
.at .phases ul{list-style:none;margin:0;padding:0}
.at .phases li{font-size:15px;line-height:1.5;color:var(--soft);padding:7px 0;border-top:1px solid var(--rule)}

/* Diagrams */
.at .diagram{background:var(--panel);border-radius:24px;padding:56px 48px 44px;margin-top:72px}
.at .diagram>figcaption{margin-top:32px}
.at .diagram svg{display:block;width:100%;height:auto;max-width:880px;margin:0 auto;overflow:visible}
.at svg text{font-family:InterVariable,Inter,Arial,sans-serif}
.at .n{fill:var(--card);stroke:var(--rule2)}
.at .n-a{fill:var(--acc);stroke:none}
.at .n-s{fill:color-mix(in srgb,var(--acc) 8%,var(--card));stroke:color-mix(in srgb,var(--acc) 45%,transparent)}
.at .n-r{fill:color-mix(in srgb,var(--bad) 5%,var(--card));stroke:color-mix(in srgb,var(--bad) 45%,transparent);stroke-dasharray:4 4}
.at .p-p{fill:color-mix(in srgb,var(--pp) 9%,var(--card));stroke:color-mix(in srgb,var(--pp) 50%,transparent)}
.at .p-r{fill:color-mix(in srgb,var(--pr) 9%,var(--card));stroke:color-mix(in srgb,var(--pr) 50%,transparent)}
.at .p-t{fill:color-mix(in srgb,var(--pt) 9%,var(--card));stroke:color-mix(in srgb,var(--pt) 50%,transparent)}
.at .zone-a{fill:color-mix(in srgb,var(--acc) 3%,transparent);stroke:color-mix(in srgb,var(--acc) 40%,transparent);stroke-dasharray:5 5}
.at .t{fill:var(--strong);font-size:14px;font-weight:500}
.at .t2{fill:var(--strong);font-size:14px}
.at .ts{fill:var(--muted);font-size:12px}
.at .tz{fill:var(--soft);font-size:12px;font-weight:500}
.at .tz.a,.at .ta{fill:var(--acc)}
.at .ta{font-size:12px;font-weight:500}
.at .tk{fill:var(--on-acc);font-size:14px;font-weight:500}
.at .tk2{fill:var(--on-acc);font-size:12px;opacity:.8}
.at .tp{fill:var(--pp);font-size:15px;font-weight:600}
.at .tr2{fill:var(--pr);font-size:15px;font-weight:600}
.at .tt{fill:var(--pt);font-size:15px;font-weight:600}
.at .tr{fill:var(--bad);font-size:12px;font-weight:500}
.at .tb{fill:var(--on-acc);font-size:12px;font-weight:600}
.at .badge{fill:var(--acc)}
.at .l{stroke:var(--line);stroke-width:1.25;fill:none}
.at .la{stroke:var(--acc);stroke-width:1.5;fill:none}
.at .lr{stroke:var(--bad);stroke-width:1.5;fill:none;stroke-dasharray:5 4}
.at .mk{fill:var(--line)}
.at .mk-a{fill:var(--acc)}
.at .mk-r{fill:var(--bad)}
.at .lbl{fill:var(--panel)}
.at .trk{stroke:url(#trk);stroke-width:2;fill:none}
.at .g0{stop-color:var(--acc)}
.at .g1{stop-color:var(--pp)}
.at .dot{fill:var(--card);stroke:var(--acc);stroke-width:2}
.at .dot.a{fill:var(--acc)}
/* Six pages and one page */
.at .pg{fill:var(--card);stroke:var(--rule2)}
.at .tpg{fill:var(--strong);font-size:11px;font-weight:500}
.at .bar{fill:var(--rule2)}
.at .bar2{fill:var(--chip)}
.at .btn{fill:var(--acc)}
.at .pl{stroke:var(--rule);fill:none}
.at .tab{fill:transparent}
.at .tab.on{fill:var(--acc-s)}
.at .ttab{fill:var(--soft);font-size:11px}
.at .ttab.on{fill:var(--acc);font-weight:500}

/* Users: size and complexity */
.at .seg{margin-top:72px;background:var(--panel);border-radius:24px;padding:56px 48px 44px}
.at .seg-grid{display:grid;grid-template-columns:28px repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,176px) 28px;gap:12px;max-width:880px;margin:0 auto}
.at .seg-y{grid-row:1/3;grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:space-between;font-size:12px;color:var(--muted);text-align:center;position:relative}
.at .seg-y::before{content:'Standard';font-size:12px}
.at .seg-y::after{content:'Complex';font-size:12px}
.at .seg-y{color:transparent}
.at .seg-y::before,.at .seg-y::after{color:var(--muted)}
.at .seg-x{grid-row:3;grid-column:2/4;display:flex;justify-content:space-between;font-size:12px;color:transparent;align-items:center;padding:0 8px}
.at .seg-x::before{content:'SMB';color:var(--muted)}
.at .seg-x::after{content:'Enterprise';color:var(--muted)}
.at .seg-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px;border-radius:16px;background:var(--card);border:1px solid var(--rule);overflow:hidden}
.at .seg-cell i{position:absolute;right:22px;top:22px;width:calc(112px * var(--s));height:calc(112px * var(--s));border-radius:50%;background:color-mix(in srgb,var(--acc) 14%,var(--card))}
.at .seg-cell b{font-weight:500;color:var(--strong);font-size:16px;position:relative}
.at .seg-cell small{font-size:13px;color:var(--muted);position:relative}
.at .seg-cell.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.at .seg-cell.on i{background:var(--acc)}
.at .seg-cell.on small{color:var(--acc)}

/* Migration journey: six stages, what happens, the work, the assistant, my journeys */
.at .mj{margin-top:72px}
.at .mj-grid{display:grid;grid-template-columns:128px repeat(6,minmax(0,1fr))}
.at .mj-grid>*{margin:0;padding:16px 14px 18px;border-top:1px solid var(--rule);transition:background .25s}
.at .mj-grid>.mj-c,.at .mj-grid>.mj-s{border-top:0}
.at [data-c="2"]{--k:1}.at [data-c="3"]{--k:2}.at [data-c="4"]{--k:3}.at [data-c="5"]{--k:4}.at [data-c="6"]{--k:5}
.at .mj-s{position:relative;padding-top:40px;--col:color-mix(in srgb,var(--acc) calc(100% - var(--k,0) * 20%),var(--pp))}
.at .mj-s::before{content:'';position:absolute;left:0;right:0;top:10px;height:2px;background:var(--col)}
.at .mj-s i{position:absolute;left:14px;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--col);color:var(--on-acc);font-size:11px;font-style:normal;font-weight:600;box-shadow:0 0 0 4px var(--bg)}
.at .mj-s h3{font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.at .mj-s p{font-size:14px;line-height:1.5;color:var(--text);margin:0}
.at .mj-l{font-size:12px;font-weight:500;color:var(--muted);padding-left:0!important}
.at .mj-w{list-style:none}
.at .mj-w li{font-size:13px;line-height:1.45;color:var(--soft);padding:3px 0}
.at .mj-chip{display:inline-block;margin:0 6px 6px 0;padding:3px 9px;border-radius:6px;background:var(--acc-s);color:var(--acc);font-size:12.5px;font-weight:500;line-height:1.5}
.at .mj-out{font-size:13px;color:var(--muted)}
.at .mj-j a{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;line-height:1.3;color:var(--strong);text-decoration:none}
.at .mj-j a:hover{color:var(--acc)}
.at .mj-j b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:11px;font-weight:600}
.at .mj-grid:has([data-c="1"]:hover) [data-c="1"],.at .mj-grid:has([data-c="2"]:hover) [data-c="2"],.at .mj-grid:has([data-c="3"]:hover) [data-c="3"],.at .mj-grid:has([data-c="4"]:hover) [data-c="4"],.at .mj-grid:has([data-c="5"]:hover) [data-c="5"],.at .mj-grid:has([data-c="6"]:hover) [data-c="6"]{background:color-mix(in srgb,var(--acc) 4%,transparent)}

/* Three journeys */
.at .jcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.at .jcards a{display:block;padding:28px 26px 30px;border-radius:18px;border:1px solid var(--rule);text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.at .jcards a:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:color-mix(in srgb,var(--acc) 3%,var(--card))}
.at .jn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:13px;font-weight:600;margin-bottom:18px}
.at .jcards p{font-size:15px;line-height:1.6;color:var(--soft);margin:0}

/* Current flow: the five old screens, one at a time, with their pain points */
.at .flow{margin-top:72px}
.at .flow-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.at .flow-tabs button{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 8px;border:0;border-radius:12px;background:var(--panel);font:inherit;font-size:15px;font-weight:500;color:var(--soft);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.at .flow-tabs button:hover{color:var(--strong)}
.at .flow-tabs button[aria-selected=true]{background:var(--card);color:var(--strong);box-shadow:0 0 0 1px var(--rule2),0 2px 8px -2px rgba(9,30,66,.16)}
.at .flow-tabs button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.at .ft-n{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--chip);font-size:13px;color:var(--soft);transition:background .2s,color .2s}
.at [aria-selected=true] .ft-n{background:var(--acc);color:var(--on-acc)}
.at .ft-c{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);font-size:12px;font-weight:600}
.at .flow-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;margin-top:36px}
.at .flow-t{font-size:22px;letter-spacing:-.015em;margin-bottom:8px}
.at .flow-d{font-size:16px;line-height:1.6;color:var(--text);margin:0}
.at .flow-ph{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;font-size:13px;font-weight:500;color:var(--strong);margin:4px 0 10px}
.at .flow-ph .legend{margin:0;gap:14px;font-size:12px;font-weight:400}
.at .flow-pains{list-style:none;margin:0;padding:0}
.at .flow-pains li{display:flex;gap:12px;align-items:flex-start;padding:10px 10px;border-top:1px solid var(--rule);cursor:default;transition:background .2s}
.at .flow-pains li.on{background:color-mix(in srgb,var(--bad) 6%,transparent)}
.at .flow-pains li:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.at .flow-pains b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:11px;background:var(--bad);color:#fff;font-size:12px;font-weight:600}
.at .flow-pains span{font-size:15px;line-height:1.45;color:var(--strong)}
.at .flow-pains small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:3px}
.at .flow-pains small::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c)}
.at .k-p{--c:var(--pp)}.at .k-r{--c:var(--pr)}.at .k-t{--c:var(--pt)}
.at .legend{display:flex;gap:22px;font-size:13px;color:var(--soft);margin-bottom:20px}
.at .legend span{display:inline-flex;align-items:center;gap:8px}
.at .legend i{width:8px;height:8px;border-radius:50%}
.at .legend .lp i{background:var(--pp)}.at .legend .lr i{background:var(--pr)}.at .legend .lt i{background:var(--pt)}

/* Trust audit: pain points per step, stacked by pillar */
.at .chart{background:var(--panel);border-radius:24px;padding:48px 48px 40px;margin-top:72px}
.at .chart-h{margin:0 0 20px}
.at .chart-h .legend{margin:0}
.at .sbars{max-width:880px}
.at .sbar{display:grid;grid-template-columns:96px minmax(0,1fr) 32px;gap:16px;align-items:center;padding:9px 0}
.at .sb-l{font-size:15px;color:var(--text)}
.at .sb-t{display:flex;gap:2px;height:28px}
.at .sb-t i{width:calc(var(--n) / 7 * 100%);border-radius:5px;background:var(--c)}
.at .sbar:not(.on) .sb-t i{opacity:.5}
.at .sb-v{font-size:15px;text-align:right;color:var(--soft);font-variant-numeric:tabular-nums}
.at .sbar.on :is(.sb-l,.sb-v){color:var(--strong);font-weight:600}

/* Definitions */
.at .defs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin:48px 0 0;max-width:880px}
.at .defs2 dt{font-size:15px;font-weight:500;color:var(--strong);margin-bottom:4px}
.at .defs2 dd{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}

/* Hypotheses */
.at .hyps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:72px}
.at .hyp{border-radius:20px;background:var(--panel);padding:32px 32px 30px}
.at .hyp h3{font-size:22px;letter-spacing:-.015em;margin-bottom:10px}
.at .hyp>p{font-size:16px;line-height:1.55;color:var(--text);margin:0 0 24px}
.at .hyp dl{margin:0;border-top:1px solid var(--rule2);padding-top:18px}
.at .hyp dt{font-size:14px;font-weight:500;color:var(--strong);margin-top:12px}
.at .hyp dt:first-child{margin-top:0}
.at .hyp dd{margin:2px 0 0;font-size:14px;line-height:1.55;color:var(--soft)}

/* Annotated screen */
.at .annot-fig{margin-top:56px}
.at .annot-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;align-items:start}
.at .pins-key{list-style:none;margin:0;padding:8px 0 0;counter-reset:k}
.at .pins-key li{position:relative;padding:12px 0 12px 40px;border-top:1px solid var(--rule);cursor:default;transition:opacity .25s}
.at .pins-key li::before{content:attr(data-k);position:absolute;left:0;top:12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:12px;font-weight:600}
.at .pins-key b{display:block;font-size:14px;font-weight:500;color:var(--strong)}
.at .pins-key span{display:block;font-size:13px;line-height:1.5;color:var(--soft)}
.at .annot-fig[data-on] .pins-key li:not(.on){opacity:.45}

/* Before and after */
.at .ba{margin-top:72px}
.at .ba-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--chip);margin-bottom:20px}
.at .ba-seg button{font:inherit;font-size:14px;line-height:1;padding:9px 16px;border:0;border-radius:8px;background:none;color:var(--soft);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.at .ba-seg button[aria-pressed=true]{background:var(--card);color:var(--strong);box-shadow:0 1px 2px rgba(9,30,66,.12),0 0 0 1px var(--rule)}
.at .ba-seg button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* Both panes share one cell, so switching never changes the page height */
.at .ba-panes{display:grid}
.at .ba-panes>.app{grid-area:1/1;animation:at-fade .35s ease}
.at .ba-panes>[hidden]{display:grid;visibility:hidden;animation:none}
@keyframes at-fade{from{opacity:0}to{opacity:1}}
.at .ba-key{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;margin:20px 0 0;padding:0}
.at .ba-key[hidden]{display:none}
.at .ba-key li{position:relative;padding-left:34px;font-size:14px;line-height:24px;color:var(--text)}
.at .ba-key li::before{content:attr(data-k);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bad);color:#fff;font-size:12px;font-weight:600}

/* Journey 3: problems, then each problem beside its fix */
.at .pinb{fill:var(--bad)}
.at .tpin{fill:#fff;font-size:12px;font-weight:600}
.at .diagram.slim{padding:40px 48px 32px}
.at .probs{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.at .probs li{display:flex;gap:14px}
.at .probs li>b,.at .pf-p b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bad);color:#fff;font-size:12px;font-weight:600}
.at .probs p{font-size:15px;line-height:1.6;color:var(--soft);margin:0}
.at .pf{margin-top:56px;border-top:1px solid var(--rule)}
.at .pf-row{display:grid;grid-template-columns:minmax(0,280px) 72px minmax(0,1fr);gap:16px;align-items:start;padding:24px 0;border-bottom:1px solid var(--rule)}
.at .pf-p{display:flex;align-items:center;gap:12px;margin:0;font-size:15px;line-height:26px;color:var(--soft)}
.at .pf-to{position:relative;height:1.5px;margin-top:13px;background:var(--acc)}
.at .pf-to::after{content:'';position:absolute;right:-1px;top:-4px;border:4.75px solid transparent;border-left:7px solid var(--acc);border-right:0}
.at .pf-f h3{font-size:16px;margin-bottom:4px;line-height:26px}
.at .pf-f p{font-size:15px;line-height:1.6;color:var(--soft);margin:0;max-width:560px}

/* Next project */
.at .next{margin-top:200px}
.at .next-card{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:48px;padding:40px 40px 40px 48px;border-radius:24px;background:var(--panel);text-decoration:none;color:inherit;transition:background .25s}
.at .next-card:hover{background:color-mix(in srgb,var(--acc) 5%,var(--panel))}
.at .next-text{display:flex;flex-direction:column}
.at .next-label{font-size:13px;color:var(--muted);margin-bottom:10px}
.at .next-title{font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.03em;color:var(--strong);margin-bottom:12px}
.at .next-line{font-size:16px;line-height:1.5;color:var(--soft);margin-bottom:24px}
.at .next-go{font-size:14px;color:var(--acc)}
.at .next-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}

/* ───────────── Product screens ───────────── */
.app{--a-bg:#fff;--a-sub:#f7f8f9;--a-hov:#091e420f;--a-text:#172b4d;--a-mute:#626f86;--a-faint:#8590a2;--a-line:#dcdfe4;--a-line2:#091e4224;--a-blue:#0c66e4;--a-blue-h:#0055cc;--a-blue-s:#e9f2ff;--a-on:#fff;--a-ok:#22a06b;--a-ok-s:#dcfff1;--a-bad:#c9372c;--a-bad-s:#ffeceb;--a-warn:#a54800;--a-warn-s:#fff3eb;--a-skel:#ebecf0;--a-pin:#0c66e4;
  position:relative;container-type:inline-size;background:var(--a-bg);color:var(--a-text);font:14px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-feature-settings:normal;text-align:left;-webkit-font-smoothing:antialiased}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .app{--a-bg:#1d2125;--a-sub:#22272b;--a-hov:#a1bdd914;--a-text:#b6c2cf;--a-mute:#9fadbc;--a-faint:#8c9bab;--a-line:#a6c5e229;--a-line2:#a6c5e229;--a-blue:#579dff;--a-blue-h:#85b8ff;--a-blue-s:#1c2b41;--a-on:#1d2125;--a-ok:#4bce97;--a-ok-s:#164b35;--a-bad:#f87168;--a-bad-s:#42221f;--a-warn:#fea362;--a-warn-s:#3a2c1f;--a-skel:#2c333a;--a-pin:#579dff}}
:root[data-theme=dark] .app{--a-bg:#1d2125;--a-sub:#22272b;--a-hov:#a1bdd914;--a-text:#b6c2cf;--a-mute:#9fadbc;--a-faint:#8c9bab;--a-line:#a6c5e229;--a-line2:#a6c5e229;--a-blue:#579dff;--a-blue-h:#85b8ff;--a-blue-s:#1c2b41;--a-on:#1d2125;--a-ok:#4bce97;--a-ok-s:#164b35;--a-bad:#f87168;--a-bad-s:#42221f;--a-warn:#fea362;--a-warn-s:#3a2c1f;--a-skel:#2c333a;--a-pin:#579dff}
.app p{margin:0}
.app button{font:inherit;color:inherit}
.app svg{display:block}
.app :focus-visible{outline:2px solid var(--a-blue);outline-offset:1px;border-radius:3px}

/* Top bar: Jira Data Center, since the assistant runs on the customer's own server */
.app .ph{display:block;flex:none;width:16px;height:16px}
.a-top{display:flex;align-items:center;gap:2px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--a-line);font-size:14px;color:var(--a-mute);white-space:nowrap;overflow:hidden}
.a-apps{display:grid;place-items:center;width:32px;height:32px;border-radius:3px}
.app .a-apps .ph{width:20px;height:20px}
.a-logo{display:flex;align-items:center;padding:0 12px 0 6px;color:var(--a-text)}
.a-logo .jira{display:block;height:30px;width:auto}
.a-nav{display:flex;gap:2px}
.a-nav>span{display:flex;align-items:center;gap:4px;height:32px;padding:0 8px;border-radius:3px;font-weight:500}
.app .a-nav .ph{width:12px;height:12px}
.a-create{display:flex;align-items:center;height:32px;padding:0 12px;margin-left:8px;border-radius:3px;background:var(--a-blue);color:var(--a-on);font-weight:500}
.a-search{display:flex;align-items:center;gap:8px;width:220px;height:32px;padding:0 10px;margin:0 6px 0 auto;border-radius:3px;box-shadow:inset 0 0 0 1px var(--a-line2);background:var(--a-sub);color:var(--a-faint)}
.app .a-search .ph{width:14px;height:14px}
.a-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.app .a-ico .ph{width:20px;height:20px}
.a-av{display:grid;place-items:center;width:28px;height:28px;margin-left:6px;border-radius:50%;background:#6e5dc6;color:#fff;font-size:11px;font-weight:600}
@container (max-width:1000px){.a-nav>span:nth-child(n+4){display:none}.a-search{width:150px}}

/* Header: close, the progress tracker, help */
.a-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 20px;border-bottom:1px solid var(--a-line)}
.a-close{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--a-mute)}
.a-help{justify-self:end;display:flex;gap:8px}
.a-help span{display:flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:3px;background:var(--a-hov);font-size:13px;font-weight:500;color:var(--a-text)}
.app .a-help .ph{width:12px;height:12px}
.a-steps{display:flex;list-style:none;margin:0;padding:0}
.a-steps li{position:relative;width:104px;padding-top:22px;text-align:center;font-size:12px;line-height:16px;color:var(--a-faint)}
.a-steps li::before{content:'';position:absolute;top:6px;left:0;right:0;height:2px;background:var(--a-line)}
.a-steps li:first-child::before{left:50%}.a-steps li:last-child::before{right:50%}
.a-steps li.done::before{background:var(--a-blue)}
.a-steps li.cur::before{background:linear-gradient(90deg,var(--a-blue) 50%,var(--a-line) 50%)}
.a-steps li.cur:first-child::before{background:var(--a-line)}
.a-steps li::after{content:'';position:absolute;top:1px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--a-bg);box-shadow:inset 0 0 0 2px var(--a-line)}
.a-steps li.done::after{background:var(--a-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6.2l1.8 1.8 3.4-3.7' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.a-steps li.cur::after{box-shadow:inset 0 0 0 4px var(--a-blue)}
.a-steps li.done{color:var(--a-mute)}
.a-steps li.cur{color:var(--a-blue);font-weight:600}

/* Status glyphs, lozenges and avatars */
.si{display:block;flex:none;width:16px;height:16px}
.si circle,.si path:not(.m){fill:currentColor}
.si .m{fill:none;stroke:var(--a-bg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.si.ok{color:var(--a-ok)}.si.err{color:var(--a-bad)}.si.info{color:var(--a-blue)}.si.dot{color:var(--a-faint)}
.si.warn{color:#e2b203}.si.warn .m{stroke:#172b4d}
.si.spin{color:var(--a-blue);animation:a-spin 1s linear infinite}
.si.spin circle{fill:none;stroke:var(--a-line);stroke-width:2}
.si.spin path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@keyframes a-spin{to{transform:rotate(360deg)}}
.av{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--c);color:#fff;font-style:normal;font-size:11px;font-weight:600;line-height:1}

/* Body: tabs, main, summary */
.a-body{display:grid;grid-template-columns:224px minmax(0,1fr) 296px;height:620px}
.app[data-app=edit] .a-body{height:688px}
.a-tabs{border-right:1px solid var(--a-line);padding:20px 10px}
.a-tabs-h{font-size:11px;font-weight:600;color:var(--a-mute);text-transform:uppercase;letter-spacing:.04em;padding:0 10px;margin-bottom:2px}
.a-tabs-s{font-size:12px;color:var(--a-faint);padding:0 10px;margin-bottom:12px}
.a-tab{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:3px;font-size:14px;color:var(--a-text);cursor:pointer;position:relative;transition:background .15s}
.a-tab:hover{background:var(--a-hov)}
.a-tab[aria-current=true]{background:var(--a-blue-s);color:var(--a-blue);font-weight:500}
.a-tab[aria-current=true]::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--a-blue)}
.a-tab:focus-visible{outline:2px solid var(--a-blue);outline-offset:-2px}
.a-st{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--a-faint);display:grid;place-items:center;transition:background .2s,box-shadow .2s}
.a-st.ok{background:var(--a-ok);box-shadow:none}
.a-st.ok::after{content:'';width:6px;height:3px;border:solid var(--a-on);border-width:0 0 1.75px 1.75px;transform:translateY(-1px) rotate(-45deg)}
.a-st.skip{box-shadow:inset 0 0 0 1.5px var(--a-faint);background:linear-gradient(135deg,transparent 45%,var(--a-faint) 45%,var(--a-faint) 55%,transparent 55%)}
.a-tab small{margin-left:auto;font-size:12px;color:var(--a-faint);font-weight:400}

.a-main{overflow-y:auto;padding:20px 24px 24px;scrollbar-width:thin}
.a-title{font-size:20px;line-height:24px;font-weight:600;color:var(--a-text);margin-bottom:6px!important}
.a-desc{font-size:14px;color:var(--a-mute);max-width:560px;margin-bottom:16px!important}
.a-desc a{color:var(--a-blue);text-decoration:none}
.a-opts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;margin-bottom:16px}
.a-opt{display:flex;gap:10px;padding:10px 12px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--a-line2);cursor:pointer;transition:box-shadow .15s,background .15s}
.a-opt:hover{background:var(--a-hov)}
.a-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--a-blue);background:var(--a-blue-s)}
.a-opt input{appearance:none;flex:none;width:14px;height:14px;margin:3px 0 0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--a-faint);background:var(--a-bg);cursor:pointer;transition:box-shadow .15s}
.a-opt input:checked{box-shadow:inset 0 0 0 4.5px var(--a-blue)}
.a-opt span{min-width:0}
.a-opt b{display:block;font-size:13px;font-weight:600;line-height:18px}
.a-opt small{display:block;font-size:12px;line-height:16px;color:var(--a-mute)}
.a-reco{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:14px;border-radius:3px;background:var(--a-blue-s);font-size:13px}
.app .a-reco .ph{width:16px;height:16px;color:var(--a-blue)}
.a-reco span{flex:1}
.a-tools{display:flex;gap:8px;margin-bottom:6px}
.a-find{display:flex;align-items:center;gap:6px;width:220px;height:32px;padding:0 8px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--a-line2);background:var(--a-sub);color:var(--a-faint)}
.a-find svg{width:14px;height:14px;flex:none}
.a-find input{all:unset;flex:1;min-width:0;font-size:13px;color:var(--a-text)}
.a-find input::placeholder{color:var(--a-faint)}
.a-find:focus-within{box-shadow:inset 0 0 0 2px var(--a-blue);background:var(--a-bg)}
.app .a-chipf .ph{width:12px;height:12px}
.a-chipf{display:flex;align-items:center;gap:6px;white-space:nowrap;height:32px;padding:0 10px;border-radius:3px;background:var(--a-hov);font-size:13px;color:var(--a-mute)}
.a-tbl{width:100%;border-collapse:collapse;font-size:13px}
.a-tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--a-mute);padding:8px 8px;border-bottom:2px solid var(--a-line)}
.a-tbl td{padding:7px 8px;border-bottom:1px solid var(--a-line);white-space:nowrap}
.a-tbl th:first-child,.a-tbl td:first-child{width:28px;padding-right:0}
.a-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.a-tbl tr.sel td{background:color-mix(in srgb,var(--a-blue-s) 60%,transparent)}
.a-tbl tr.off td{color:var(--a-faint)}
.a-tbl tr[hidden]{display:none}
.a-tbl .nm{display:flex;align-items:center;gap:8px;font-weight:500}
.a-tbl .k{color:var(--a-mute)}
.a-tbl input[type=checkbox]{appearance:none;display:block;width:14px;height:14px;margin:0;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--a-faint);background:var(--a-bg);cursor:pointer;transition:background .12s,box-shadow .12s}
.a-tbl input[type=checkbox]:checked,.a-tbl input[type=checkbox]:indeterminate{background:var(--a-blue);box-shadow:none}
.a-tbl input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.a-tbl input[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
:root[data-theme=dark] .a-tbl input[type=checkbox]:is(:checked,:indeterminate){filter:invert(.88) hue-rotate(180deg)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .a-tbl input[type=checkbox]:is(:checked,:indeterminate){filter:invert(.88) hue-rotate(180deg)}}
.a-tbl input:disabled{cursor:default;opacity:.55}
.a-lz{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:3px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.a-lz.ok{background:var(--a-ok-s);color:var(--a-ok)}
.a-lz.bad{background:var(--a-bad-s);color:var(--a-bad)}
.a-lz.warn{background:var(--a-warn-s);color:var(--a-warn)}
.a-lz.prog{background:var(--a-blue-s);color:var(--a-blue)}
.a-lz.def{background:var(--a-hov);color:var(--a-mute)}
.a-dash{color:var(--a-faint)}

/* Summary */
.a-cart{border-left:1px solid var(--a-line);background:var(--a-sub);display:flex;flex-direction:column;min-height:0}
.a-cart-h{padding:20px 18px 10px}
.a-cart-h b{display:block;font-size:14px;font-weight:600}
.a-cart-h small{display:block;font-size:12px;color:var(--a-mute);line-height:16px;margin-top:2px}
.app .a-trim{display:flex;gap:8px;margin:0 12px 8px;padding:10px 12px;border-radius:3px;background:var(--a-blue-s);font-size:12px;line-height:17px;color:var(--a-text)}
.a-trim .si{margin-top:1px}
.a-trim button{all:unset;color:var(--a-blue);cursor:pointer;font-weight:500}
.a-trim button:hover{text-decoration:underline}
.a-groups{flex:1;overflow-y:auto;padding:0 12px;scrollbar-width:thin}
.a-g{border-radius:3px;margin-bottom:6px;background:var(--a-bg);box-shadow:inset 0 0 0 1px var(--a-line)}
.a-g-h{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto 14px;align-items:center;gap:8px;width:100%;padding:9px 10px;cursor:pointer;border-radius:3px}
.a-g-h:hover{background:var(--a-hov)}
.a-g-h b{font-size:13px;font-weight:600;line-height:16px}
.a-g-h small{display:block;font-size:11px;line-height:14px;color:var(--a-mute);font-weight:400}
.a-g-h em{font-style:normal;font-size:12px;color:var(--a-mute);text-align:right;font-variant-numeric:tabular-nums;line-height:15px}
.a-g-h svg{width:12px;height:12px;color:var(--a-mute);transition:transform .25s}
.a-g.open .a-g-h svg{transform:rotate(180deg)}
.a-g-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1)}
.a-g.open .a-g-b{grid-template-rows:1fr}
.a-g-b>div{overflow:hidden}
.a-g-b ul{list-style:none;margin:0;padding:2px 10px 8px}
.a-g-b li{display:grid;grid-template-columns:1fr 56px 78px;gap:6px;font-size:12px;line-height:22px;color:var(--a-mute);font-variant-numeric:tabular-nums}
.a-g-b li span:first-child{color:var(--a-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-g-b li span:not(:first-child){text-align:right}
.a-g-b li.more span{color:var(--a-faint)!important}
.a-total{padding:14px 18px 16px;border-top:1px solid var(--a-line)}
.a-total p{display:flex;justify-content:space-between;font-size:12px;color:var(--a-mute);font-variant-numeric:tabular-nums}
.a-total p b{font-weight:600;color:var(--a-text)}
.a-total .big{margin-top:6px;font-size:13px;color:var(--a-text)}
.a-total .big b{font-size:16px}
.a-num{display:inline-block;transition:opacity .2s}
.a-num.flash{animation:a-flash .5s ease}
@keyframes a-flash{from{color:var(--a-blue)}to{color:inherit}}

/* Footer */
.a-foot{display:flex;align-items:center;gap:16px;height:56px;padding:0 20px;border-top:1px solid var(--a-line)}
.a-dest{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--a-mute)}
.a-dest svg{width:16px;height:16px;color:var(--a-mute)}
.a-dest b{font-weight:500;color:var(--a-blue)}
.a-count{margin-left:auto;font-size:12px;color:var(--a-mute)}
.a-count b{font-weight:600;color:var(--a-text)}
.a-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:3px;font-size:14px;font-weight:500;color:var(--a-text);background:var(--a-hov);cursor:pointer;transition:background .15s}
.a-btn:hover{background:var(--a-line2)}
.a-btn.pri{background:var(--a-blue);color:var(--a-on)}
.a-btn.pri:hover{background:var(--a-blue-h)}
.a-btn.sub{height:28px;font-size:13px}
.app .a-btn .ph{width:12px;height:12px;margin-left:6px}
.a-btn:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px}

/* The flow before the redesign, and the migrations dashboard */
.o-body{height:470px;overflow:hidden;padding:28px 32px}
.o-col{max-width:520px;margin:0 auto}
.o-col.wide{max-width:none;margin:0}
.o-label{font-size:12px;font-weight:600;color:var(--a-mute);margin:8px 0 4px!important}
.o-label i{color:var(--a-bad);font-style:normal}
.o-select{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 10px 0 12px;border-radius:3px;box-shadow:inset 0 0 0 2px var(--a-line);background:var(--a-sub)}
.app .o-select .ph{width:14px;height:14px;color:var(--a-mute)}
.o-help{font-size:12px;color:var(--a-mute);margin:6px 0 18px!important}
.o-links{display:flex;gap:8px}
.o-pages{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 20px;padding:0}
.o-pages li{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 4px;border-radius:13px;background:var(--a-hov);font-size:12px;color:var(--a-mute)}
.o-pages b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--a-bg);font-size:11px;font-weight:600}
.o-pages li.on{background:var(--a-blue-s);color:var(--a-blue);font-weight:500}
.o-pages li.on b{background:var(--a-blue);color:var(--a-on)}
.o-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px;margin-top:4px}
.o-card{padding:18px 20px 20px;border-radius:3px;box-shadow:0 1px 1px #091e4240,0 0 1px #091e424f;background:var(--a-bg)}
.o-card>b{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.o-card>p{font-size:13px;color:var(--a-mute)}
.app .o-small{margin-top:14px;font-size:12px;font-weight:600;color:var(--a-text)}
.o-list,.o-checks{list-style:none;margin:6px 0 16px;padding:0}
.o-list li,.o-checks li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:20px;padding:3px 0}
.o-checks{margin:0}
.o-checks li{padding:9px 12px;border-bottom:1px solid var(--a-line)}
.o-checks li em{margin-left:auto;font-style:normal;font-weight:500;color:var(--a-blue)}
.o-run{margin-left:auto;font-size:12px;color:var(--a-mute)}
.o-checks.tight li{padding:1px 0;border:0}
.app .o-group{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--a-mute);margin:18px 0 2px}
.o-errs{order:-1;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--a-bad)}
.o-alert{display:flex;gap:12px;padding:14px 16px;margin:4px 0 18px;border-radius:3px;background:var(--a-bad-s)}
.o-alert .si{margin-top:2px}
.o-alert b{display:block;font-size:14px;font-weight:600}
.o-alert p{font-size:13px}
.o-alert em{font-style:normal;font-weight:500;color:var(--a-blue)}
.o-dl{margin:0;width:780px!important}
.o-dl div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:7px 0;border-bottom:1px solid var(--a-line);font-size:13px}
.o-dl dt{color:var(--a-mute)}
.o-dl dd{margin:0}
.d-title{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:4px}
.d-tbl td{vertical-align:top;padding:11px 8px}
.d-tbl tr.hl td{background:var(--a-blue-s)}
.d-n{font-weight:600}
.app [data-a]{position:relative;transition:box-shadow .2s}
.app :is(p,ol)[data-a],.app div[data-a=head]{width:fit-content;max-width:100%}
.pa-n{position:absolute;z-index:3;top:-10px;right:-8px;display:flex;gap:3px;transition:opacity .2s}
.pa-n b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--a-bad);color:#fff;font:600 11px/1 InterVariable,Inter,Arial,sans-serif;box-shadow:0 0 0 2px var(--a-bg)}
.d-head .pa-n{top:16px;right:auto;left:calc(50% - 10px)}
.app [data-a].on{border-radius:4px;box-shadow:0 0 0 2px var(--a-bad),0 0 0 6px color-mix(in srgb,var(--a-bad) 14%,transparent)}
.flow.hl .app [data-a]:not(.on) .pa-n{opacity:.3}

/* Annotated: numbered pins on six regions */
.app.annot [data-pin]{position:relative;transition:box-shadow .25s,background .25s}
.app.annot [data-pin]::after{content:attr(data-pin);position:absolute;z-index:3;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--a-pin);color:var(--a-on);font:600 12px/1 InterVariable,Inter,Arial,sans-serif;box-shadow:0 0 0 3px var(--a-bg);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.app.annot th[data-pin]::after{top:3px;right:auto;left:68px}
.app.annot .a-desc[data-pin]::after{top:-4px;right:-30px}
.app.annot .a-opts[data-pin]::after{top:-11px;right:-11px}
.app.annot .a-dest[data-pin]::after{top:-4px;right:-30px}
.annot-fig[data-on="1"] [data-pin="1"],.annot-fig[data-on="2"] [data-pin="2"],.annot-fig[data-on="3"] [data-pin="3"],.annot-fig[data-on="4"] [data-pin="4"],.annot-fig[data-on="5"] [data-pin="5"],.annot-fig[data-on="6"] [data-pin="6"]{box-shadow:inset 0 0 0 2px var(--a-pin),0 0 0 4px color-mix(in srgb,var(--a-pin) 18%,transparent);border-radius:3px}
.annot-fig[data-on="1"] [data-pin="1"]::after,.annot-fig[data-on="2"] [data-pin="2"]::after,.annot-fig[data-on="3"] [data-pin="3"]::after,.annot-fig[data-on="4"] [data-pin="4"]::after,.annot-fig[data-on="5"] [data-pin="5"]::after,.annot-fig[data-on="6"] [data-pin="6"]::after{transform:scale(1.18)}

/* Home: before and after */
.app.home{display:grid;grid-template-columns:minmax(0,1fr) 296px;grid-template-rows:auto 1fr;min-height:680px}
.app.home>.a-top{grid-column:1/-1}
.h-main{padding:28px 32px 32px}
.h-side{border-left:1px solid var(--a-line);background:var(--a-sub);padding:28px 22px}
.h-title{font-size:20px;line-height:24px;font-weight:600;margin-bottom:6px!important}
.h-desc{color:var(--a-mute);margin-bottom:20px!important;max-width:560px}
.h-sec{font-size:11px;font-weight:600;color:var(--a-mute);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 10px!important}
.h-side .h-sec:first-child,.h-side>div:first-child .h-sec{margin-top:0!important}
.h-sub{font-size:12px;color:var(--a-mute);margin:-4px 0 10px!important}
.h-card{display:flex;align-items:center;gap:16px;padding:14px 16px;margin-bottom:8px;border-radius:3px;box-shadow:0 1px 1px #091e4240,0 0 1px #091e424f;background:var(--a-bg)}
:root[data-theme=dark] .h-card{box-shadow:inset 0 0 0 1px var(--a-line)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .h-card{box-shadow:inset 0 0 0 1px var(--a-line)}}
.h-card>div{flex:1;min-width:0}
.h-card b{display:block;font-size:14px;font-weight:600}
.h-card p{font-size:12px;line-height:16px;color:var(--a-mute)}
.h-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:8px}
.app .h-ic .ic svg{width:20px;height:20px}
.h-ic.a{background:#e9f2ff;color:#0c66e4}.h-ic.b{background:#f3f0ff;color:#6e5dc6}.h-ic.c{background:#dcfff1;color:#1f845a}.h-ic.d{background:#fff7d6;color:#a54800}
:root[data-theme=dark] .h-ic.a{background:#1c2b41;color:#579dff}:root[data-theme=dark] .h-ic.b{background:#2b273f;color:#9f8fef}:root[data-theme=dark] .h-ic.c{background:#1c3329;color:#4bce97}:root[data-theme=dark] .h-ic.d{background:#332e1b;color:#f5cd47}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .h-ic.a{background:#1c2b41;color:#579dff}:root:not([data-theme=light]) .h-ic.b{background:#2b273f;color:#9f8fef}:root:not([data-theme=light]) .h-ic.c{background:#1c3329;color:#4bce97}:root:not([data-theme=light]) .h-ic.d{background:#332e1b;color:#f5cd47}}
.h-btn{flex:none;font-size:13px;font-weight:500;padding:5px 10px;border-radius:3px;background:var(--a-hov)}
.h-btn.pri{background:var(--a-blue);color:var(--a-on)}
.h-nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.h-nums li{font-size:18px;font-weight:600;padding:6px 0;border-bottom:1px solid var(--a-line)}
.h-link{font-size:13px;color:var(--a-blue);margin:0 0 8px!important;display:flex;align-items:center;gap:8px}
.lk{flex:none;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1.5px currentColor;position:relative}
.lk::after{content:'';position:absolute;left:4px;top:2px;width:4px;height:5px;border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0;transform:translateY(-3px)}
.app.home.before [data-pin]{position:relative}
.app.home.before [data-pin]::after{content:attr(data-pin);position:absolute;z-index:2;top:-8px;right:-8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--a-bad);color:#fff;font:600 12px/1 InterVariable,Inter,Arial,sans-serif;box-shadow:0 0 0 3px var(--a-bg)}
.app.home.before [data-pin]{box-shadow:inset 0 0 0 1.5px var(--a-bad);border-radius:4px}
.app.home.before .h-side [data-pin]{padding:10px;margin:-10px -10px 24px}
/* Treemap */
.tmap{position:relative;height:150px;border-radius:3px;overflow:hidden;margin-bottom:10px}
.app .tm{all:unset;box-sizing:border-box;position:absolute;display:flex;align-items:flex-start;padding:8px 10px;cursor:pointer;color:#fff;font-size:12px;font-weight:600;border:1px solid var(--a-bg);transition:filter .2s,opacity .25s}
.tm span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm:nth-child(1){background:#0055cc}.tm:nth-child(2){background:#0c66e4}.tm:nth-child(3){background:#1d7afc}.tm:nth-child(4){background:#388bff}.tm:nth-child(5){background:#579dff}
.tmap:is(:hover,.pinned) .tm:not(:hover):not(.on){opacity:.45}
.tm.on{opacity:1!important}
.tm:focus-visible{outline:2px solid var(--a-text);outline-offset:-3px}
.tm-read{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--a-mute);min-height:20px;margin-bottom:6px!important}
.tm-read b{font-weight:600;color:var(--a-text)}
.rm{margin-bottom:14px}
.rm p{display:flex;justify-content:space-between;font-size:12px;color:var(--a-mute)}
.rm p b{font-weight:600;color:var(--a-text)}
.rm svg{width:100%;height:36px;margin-top:2px}
.rm path{fill:none;stroke:var(--a-blue);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* Sideways scrolling for wide figures on small screens */
.at .hs{position:relative}
.at .hs-bar{display:none;position:relative;height:20px;margin:12px 0 0;cursor:pointer;touch-action:none}
.at .hs.wide+.hs-bar{display:block}
.at .hs-bar::before{content:'';position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:var(--rule2)}
.at .hs-bar i{position:absolute;left:0;top:6px;display:block;height:8px;border-radius:4px;background:var(--soft);transition:background .2s}
.at .hs-bar:active i{background:var(--strong)}

/* The annotated screen is laid out at a fixed width and scaled down to fit (see atlassian.js); the key sits below. */
.at .annot-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
.at .annot-box{min-width:0}
.at .pins-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.at .annot-wrap .shot{width:1280px;max-width:none}
@media(max-width:1000px){
  .at .ps-qs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .at .phases{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .at .phases::before,.at .phases>div::before{display:none}
  .at .phases{padding-top:0}
  .at .cols{gap:40px}
}
@media(max-width:700px){
  main.at{padding-inline:20px}
  .at .back{margin-bottom:64px}
  .at section{margin-top:128px}
  .at h1{font-size:44px;letter-spacing:-.035em}
  .at .lede{font-size:19px;margin-bottom:48px}
  .at .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;margin-bottom:56px}
  .at h2{font-size:26px}
  .at .prose p{font-size:17px}
  .at .part{margin-top:160px}
  .at .part h2{font-size:38px}
  .at .part h2 .jn{width:30px;height:30px;font-size:15px;margin-right:12px}
  .at .part p{font-size:18px}
  .at .part+section{margin-top:88px}
  .at .cols,.at .jcards,.at .hyps,.at .defs2,.at .probs,.at .flow-info{grid-template-columns:1fr;gap:36px}
  .at .flow-info{gap:24px}
  .at .flow-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px 16px;padding:2px 20px}
  .at .flow-tabs::-webkit-scrollbar{display:none}
  .at .flow-tabs button{flex:none;height:40px;font-size:14px;gap:8px}
  .at .chart{padding:28px 20px 24px;border-radius:20px}
  .at .sbar{grid-template-columns:72px minmax(0,1fr) 24px;gap:10px}
  .at .pf-row{grid-template-columns:1fr;gap:10px}
  .at .pf-to{display:none}
  .at .diagram.slim{padding:24px 0 20px}
  .at .jcards{gap:12px}
  .at .hyps{gap:12px}
  .at .ctx-row{grid-template-columns:1fr;gap:0}
  .at .ctx-arrow{justify-self:center;width:1px;height:28px;margin:6px 0}
  .at .ctx-arrow::after{right:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:7px solid var(--line);border-bottom:0}
  .at .ctx-time{grid-template-columns:1fr;gap:14px}
  .at .ctx-time li.mid,.at .ctx-time li:last-child{text-align:left}
  .at .ps{padding:36px 22px 28px;border-radius:20px}
  .at .ps-text{font-size:24px;margin-bottom:32px}
  .at .ps-text mark{text-underline-offset:5px}
  .at .ps-qs{grid-template-columns:1fr 1fr}
  .at .phases{grid-template-columns:1fr 1fr;gap:40px 20px}
  .at .diagram,.at .seg{padding:28px 0 24px;border-radius:20px}
  .at .diagram>figcaption,.at .seg>figcaption{padding:0 20px}
  .at .seg-grid{grid-template-rows:repeat(2,180px) 28px;padding:0 16px 0 8px;gap:8px}
  .at .seg-cell{padding:14px}
  .at .seg-cell i{right:12px;top:12px;width:calc(64px * var(--s));height:calc(64px * var(--s))}
  .at .seg-cell b{font-size:14px}
  .at .seg-cell small{font-size:12px}
  .at .pins-key{grid-template-columns:1fr 1fr}
  .at .next-card{grid-template-columns:1fr;padding:28px 24px;gap:24px}
  .at .next-title{font-size:30px}
  /* Wide figures keep their size and scroll sideways */
  .at .hs{overflow-x:auto;overflow-y:hidden;margin:0 -20px;padding:2px 20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .at .hs::-webkit-scrollbar{display:none}
  .at .diagram .hs{margin:0;padding:0 20px}
  .at .diagram .hs>svg{min-width:720px}
  .at .hs>.shot{min-width:1080px}
  .at .hs>.mj-grid{min-width:1080px}
  .at .hs.wide{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .at .hs.wide.at-start{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .at .hs.wide.at-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
  .at .diagram .hs-bar{margin:12px 20px 0}
}
@media(prefers-reduced-motion:reduce){
  .at *,.app *{transition:none!important;animation:none!important}
}

@media(max-width:699px){.at .annot-box{overflow-x:auto;scrollbar-width:thin}}