/* MyDigitalJourneyman: shared styles. Paper pages with ink bands; signal orange for the one main action,
   TAK friendly-blue for links and highlights; status pills by maturity only.
   Fonts are self-hosted (SIL OFL, licenses in /fonts). No third-party requests from any page. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* Option B: TAK blue + signal orange */
  --ink:#0b1a2b; --ink-2:#13263a; --paper:#f3f6f9; --paper-2:#e6ecf2; --card:#ffffff;
  --slate:#4a5a6a; --rule:#cfd9e2;
  --accent:#0b65a8;      /* links, ticks and highlights on light paper */
  --accent-dk:#5fb4ea;   /* the same role on ink */
  --action:#f29a38; --action-fg:#0b1a2b;   /* the one main button per band */
  --on-ink:#eef3f7; --on-ink-dim:#a3b6c8; --rule-ink:#22394f;
  --run:#1d6a3a; --run-bg:#dcefe1; --lab:#8a5a00; --lab-bg:#fbe9c8; --dev:#4a5a6a; --dev-bg:#e6ecf2;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(1rem,4vw,2.5rem); --max:68rem; --read:40rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:var(--accent)}
.ink a:not(.btn):not(.email),.ink-2 a:not(.btn):not(.email){color:var(--accent-dk)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--action);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--action);color:var(--action-fg);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.read{max-width:var(--read)}

h1,h2,h3{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,6.4vw,4.2rem);font-weight:800;font-stretch:80%;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:750;font-stretch:85%}
h3{font-size:1.25rem;font-weight:650;font-stretch:90%}
p{margin:0}
.eyebrow{font:500 .75rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.ink .eyebrow,.ink-2 .eyebrow{color:var(--accent-dk)}
.lede{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--slate);max-width:38rem}
.ink .lede,.ink-2 .lede{color:var(--on-ink-dim)}

/* header */
.site-head{background:var(--ink);color:var(--on-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:10;border-bottom:1px solid var(--rule-ink)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding-block:.8rem;flex-wrap:wrap}
.brand{color:var(--on-ink);text-decoration:none;font:800 1.15rem/1 var(--display);font-stretch:80%;letter-spacing:.02em}
.brand span{color:var(--accent-dk)}
.site-head nav{display:flex;gap:.2rem 1.1rem;flex-wrap:wrap}
.site-head nav a{color:var(--on-ink-dim);text-decoration:none;font:500 .95rem/1.8 var(--body)}
.site-head nav a:hover,.site-head nav a[aria-current="page"]{color:var(--on-ink)}
.site-head nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--action)}
/* on a phone the nav wraps to two lines, so the header scrolls away instead of covering the page */
@media (max-width:40rem){
  .site-head{position:static}
  .site-head nav{gap:.1rem .9rem}
}

/* bands */
.band{padding-block:clamp(3rem,8vw,5.5rem)}
.band.tight{padding-block:clamp(2rem,5vw,3.5rem)}
.ink{background:var(--ink);color:var(--on-ink)}
.ink-2{background:var(--ink-2);color:var(--on-ink)}
.paper-2{background:var(--paper-2)}
.stack{display:grid;gap:1.1rem}
.stack-lg{display:grid;gap:2.2rem}

.hero{padding-block:clamp(3.2rem,9vw,6.5rem) clamp(2.8rem,7vw,5rem)}
.hero.short{padding-block:clamp(2.6rem,7vw,4.5rem)}
.hero h1 em{font-style:normal;color:var(--accent-dk)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem}
.btn{display:inline-block;text-decoration:none;font:600 1rem/1 var(--body);padding:.85rem 1.25rem;border-radius:3px;border:2px solid var(--action);background:var(--action);color:var(--action-fg)}
.btn.ghost{background:none;color:var(--on-ink);border-color:var(--on-ink)}
.band:not(.ink):not(.ink-2) .btn.ghost{color:var(--ink);border-color:var(--ink)}
.btn:hover{filter:brightness(1.06)}
button.btn{cursor:pointer}

/* grids and cards */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.card{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:1.2rem 1.2rem 1.3rem;display:grid;gap:.6rem;align-content:start;min-width:0}
.ink .card,.ink-2 .card{background:var(--ink-2);border-color:var(--rule-ink)}
.ink-2 .card{background:var(--ink)}
.card p{color:var(--slate);font-size:.98rem}
.ink .card p,.ink-2 .card p{color:var(--on-ink-dim)}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.card > a{font-weight:600;text-decoration:none}
.card > a:hover{text-decoration:underline}

/* pills say how mature something is; .offer is a plain label for what something costs or how you get it */
.pill{font:500 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.35rem .5rem;border-radius:2px;white-space:nowrap}
.pill.run{color:var(--run);background:var(--run-bg)}
.pill.lab{color:var(--lab);background:var(--lab-bg)}
.pill.dev{color:var(--dev);background:var(--dev-bg)}
.pill.offer{color:var(--slate);background:none;box-shadow:inset 0 0 0 1px var(--rule)}

.split{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}
.split > *{min-width:0}

ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
ul.ticks li{padding-left:1.4rem;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:2px;background:var(--accent)}
.ink ul.ticks li::before,.ink-2 ul.ticks li::before{background:var(--accent-dk)}

/* numbered steps, used wherever the order matters */
ol.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:1rem}
ol.steps li{counter-increment:step;padding-left:2.5rem;position:relative}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:-.05rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ink);color:var(--on-ink);font:600 .85rem/1.75rem var(--mono);text-align:center}

.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font:600 .78rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);background:var(--paper-2)}
td:first-child{font-weight:600;white-space:nowrap}
/* on a phone each table row becomes a short block that reads left to right, top to bottom */
@media (max-width:40rem){
  .tablewrap thead{display:none}
  .tablewrap tr{display:block;padding:.75rem .9rem;border-bottom:1px solid var(--rule)}
  .tablewrap tr:last-child{border-bottom:0}
  .tablewrap td{display:block;padding:0;border:0;white-space:normal}
  .tablewrap td:first-child{margin-bottom:.2rem}
  .tablewrap td + td{margin-top:.25rem}
  .tablewrap td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font:500 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
  .ink .tablewrap tr,.ink-2 .tablewrap tr{border-color:var(--rule-ink)}
  .ink .tablewrap td[data-label]::before,.ink-2 .tablewrap td[data-label]::before{color:var(--on-ink-dim)}
}

.callout{border-left:4px solid var(--accent);padding:.2rem 0 .2rem 1rem;max-width:var(--read)}
.ink .callout{border-color:var(--accent-dk)}
.note{font-size:.9rem;color:var(--slate)}
.ink .note,.ink-2 .note{color:var(--on-ink-dim)}

.contact-box{display:grid;gap:.9rem;max-width:var(--read)}
.email{font:500 clamp(1.1rem,3.4vw,1.6rem)/1.2 var(--mono);color:var(--accent-dk);word-break:break-all;text-decoration:none}
.band:not(.ink):not(.ink-2) .email{color:var(--accent)}

/* plans */
.card .price{color:var(--ink);font:800 clamp(2rem,5vw,2.6rem)/1 var(--display);font-stretch:80%}
.card .price .per{font-size:.5em}
.card .price small{font:500 .95rem/1.3 var(--body);color:var(--slate);display:block;margin-top:.35rem;font-stretch:100%}
.plan{gap:.9rem}
.plan.pick{border:2px solid var(--action)}
.plan .ticks{font-size:.98rem}
.plan .btn{justify-self:start;margin-top:.3rem}

/* questions and answers */
details{border-bottom:1px solid var(--rule);padding:.9rem 0}
details:first-of-type{border-top:1px solid var(--rule)}
summary{cursor:pointer;font:650 1.08rem/1.3 var(--display);font-stretch:90%}
details p{margin-top:.6rem;color:var(--slate);max-width:var(--read)}

/* plain reading pages (privacy) */
.prose{display:grid;gap:1rem;max-width:var(--read)}
.prose h2{font-size:clamp(1.35rem,3vw,1.7rem);margin-top:1.2rem}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}

/* footer */
.site-foot{background:var(--ink);color:var(--on-ink-dim);font-size:.88rem;padding-block:2.2rem;border-top:1px solid var(--rule-ink)}
.site-foot .wrap{display:grid;gap:.6rem}
.site-foot a{color:var(--on-ink-dim)}
.site-foot .links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}

/* tables on dark bands */
.ink .tablewrap,.ink-2 .tablewrap{background:var(--ink-2);border-color:var(--rule-ink)}
.ink table,.ink-2 table{color:var(--on-ink)}
.ink th,.ink-2 th{background:var(--ink);color:var(--on-ink-dim)}
.ink th,.ink td,.ink-2 th,.ink-2 td{border-color:var(--rule-ink)}

/* real screenshots */
.shot{margin:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:#000;min-width:0;align-self:start}
.ink .shot,.ink-2 .shot{border-color:var(--rule-ink)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font:400 .8rem/1.45 var(--mono);padding:.6rem .8rem;background:var(--ink-2);color:var(--on-ink-dim)}
.hero-shot{align-self:center}

/* keep banner and contact text on the page's left edge, with a readable line length */
.wrap.read,.wrap.contact-box{max-width:var(--max)}
.wrap.read > *,.wrap.contact-box > *{max-width:var(--read)}

/* back to top: always visible without JS; with JS it fades in after a screen of scrolling */
.to-top{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:15;display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .95rem;border-radius:999px;background:var(--ink);color:var(--on-ink);border:1px solid var(--accent-dk);font:600 .85rem/1 var(--display);letter-spacing:.04em;text-decoration:none;box-shadow:0 4px 14px rgba(11,26,43,.28);transition:opacity .2s,transform .2s}
.to-top:hover{background:var(--ink-2)}
.to-top.js{opacity:0;transform:translateY(.5rem);pointer-events:none}
.to-top.js.shown{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* inline marker legend (Training page) */
.affil-row{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font:500 .8rem/1 var(--mono);color:var(--slate)}
.affil-row span{display:inline-flex;align-items:center;gap:.35rem}