/* Complete AI Training — site design.
   Brand: blue #0852A8, logo orange #F7941E, green #208746. Type: Bricolage Grotesque (headings),
   Hanken Grotesk (text), JetBrains Mono (prompts, times, counts). Light and dark follow the OS. */
:root{
  --blue:#0852A8;--blue-ink:#063F82;--blue-50:#F1F6FD;--blue-100:#C5D9F7;--blue-200:#6FB1FC;--on-blue:#FFFFFF;
  --orange:#F7941E;--orange-ink:#A35A06;--orange-50:#FEF3E5;
  --green:#208746;--green-50:#E7F5EC;--red:#B42318;
  --ink:#202832;--ink-2:#4D5866;--muted:#7F8A98;--line:#E2E7EE;--line-2:#EEF2F7;
  --ground:#F6F8FB;--paper:#FFFFFF;--paper-2:#FAFBFD;
  --band:#0852A8;--on-band:#FFFFFF;--band-soft:rgba(255,255,255,.78);
  --shadow:0 1px 2px rgba(20,34,56,.05),0 10px 30px rgba(20,34,56,.07);
  --shadow-lift:0 30px 80px -34px rgba(8,82,168,.38),0 1px 2px rgba(20,34,56,.06);
  --display:"Bricolage Grotesque","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,40px);--top-h:72px;
  --ghost-accent-color:#0852A8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --blue:#5E9CEB;--blue-ink:#8CB9F3;--blue-50:#122540;--blue-100:#1E3B62;--blue-200:#3F74B8;--on-blue:#07111F;
  --orange:#F7A13F;--orange-ink:#F7B266;--orange-50:#2E210F;--green:#4DB873;--green-50:#11281A;--red:#F97066;
  --ink:#E9EEF5;--ink-2:#B3BDCA;--muted:#8591A0;--line:#233146;--line-2:#1B2739;
  --ground:#0B1320;--paper:#111B2A;--paper-2:#152133;--band:#0D2C55;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3);--shadow-lift:0 30px 80px -30px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);font-optical-sizing:auto;color:var(--ink);letter-spacing:-.022em;line-height:1.1;text-wrap:balance;margin:0;font-weight:700}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue-200);outline-offset:2px;border-radius:8px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:780px}
.eyebrow{font:600 12px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin:0}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.soft{color:var(--ink-2)}.small{font-size:14px}.tnum{font-variant-numeric:tabular-nums}
.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.h-xl{font-size:clamp(34px,4.8vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
.h-l{font-size:clamp(28px,3.8vw,46px);font-weight:750;letter-spacing:-.03em}
.h-m{font-size:clamp(22px,2.4vw,28px)}.h-s{font-size:20px;letter-spacing:-.012em}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:40em}
.sec{padding-block:clamp(56px,8vw,100px)}
.sec.paper,.paper{background:var(--paper);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:12px;max-width:760px;margin-bottom:32px}
.sec-head.with-more{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px}
.sec-head .more,.more{font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{flex:none;vertical-align:middle}
mark{background:color-mix(in srgb,var(--orange) 32%,transparent);color:inherit;border-radius:3px;padding:0 1px}

/* buttons, chips, tags */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font:600 15px/1.1 var(--sans);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s,border-color .15s}
.btn:hover{text-decoration:none}.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:var(--on-blue)}.btn-primary:hover{background:var(--blue-ink)}
.btn-soft{background:var(--blue-50);color:var(--blue)}.btn-soft:hover{background:var(--blue-100)}
.btn-line{background:var(--paper);border-color:var(--line);color:var(--ink)}.btn-line:hover{border-color:var(--blue-100)}
.btn-danger{background:var(--paper);border-color:var(--line);color:var(--red)}
.btn-lg{padding:16px 26px;font-size:17px}.btn-sm{padding:8px 14px;font-size:14px}.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:default}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 13px;font:500 14px/1.1 var(--sans);background:var(--paper);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--blue-100);color:var(--ink);text-decoration:none}
.chip.on,.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--blue-50);color:var(--blue);white-space:nowrap}
.tag.orange{background:var(--orange-50);color:var(--orange-ink)}.tag.green{background:var(--green-50);color:var(--green)}.tag.plain{background:var(--line-2);color:var(--ink-2)}
.pill-ok{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:999px;background:var(--green-50);color:var(--green);font:700 12px/1 var(--sans)}
li.check{display:flex;gap:10px;align-items:flex-start}
.link-quiet{color:var(--ink-2);font-weight:500}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:var(--top-h)}
.brand{justify-self:start;display:flex;align-items:center}.brand img{height:40px;width:auto;display:block}
.nav{justify-self:center;align-self:stretch;display:flex;gap:2px}
.nav-item{display:flex;align-items:center}
.nav .nav-top{color:var(--ink-2);font-weight:500;font-size:15px;padding:8px 11px;border-radius:999px;white-space:nowrap}
.nav .nav-top:hover,.nav .nav-top.on{color:var(--ink);background:var(--blue-50);text-decoration:none}
.nav .nav-top.nav-cta{color:var(--blue);font-weight:650}
.nav .nav-top.nav-cta::before,.mnav .nav-cta::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%)}
/* label and caret are two halves of one pill, so hovering either lights the whole area.
   The pill lives on them rather than on .nav-item, which is as tall as the whole header. */
.has-menu .nav-top{padding-right:2px;border-radius:999px 0 0 999px}
.has-menu:hover .nav-top,.has-menu.open .nav-top,.has-menu:hover .nav-caret,.has-menu.open .nav-caret,.has-menu .nav-top.on~.nav-caret{background:var(--blue-50)}
.has-menu:hover .nav-top,.has-menu.open .nav-top{color:var(--ink);text-decoration:none}
.has-menu:hover .nav-caret,.has-menu.open .nav-caret{color:var(--ink)}
.nav-caret{display:grid;place-items:center;width:25px;height:40px;padding:0 9px 0 2px;margin-left:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:0 999px 999px 0}
.nav-caret svg{transition:transform .15s}
.has-menu:hover .nav-caret svg,.has-menu.open .nav-caret svg{transform:rotate(180deg)}
/* the short dropdown (Become AI Expert) and the full-width mega panels */
.has-menu:not(.has-mega){position:relative}
.nav-drop,.mega{opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;z-index:45}
.has-menu:hover>.nav-drop,.has-menu:hover>.mega,.has-menu.open>.nav-drop,.has-menu.open>.mega,.has-menu:focus-within>.nav-drop,.has-menu:focus-within>.mega{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
.nav-drop{position:absolute;top:calc(100% - 6px);left:0;width:320px;display:grid;gap:2px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lift)}
.nav-drop a{display:grid;gap:2px;padding:10px 12px;border-radius:11px;color:var(--ink)}
.nav-drop a:hover{background:var(--blue-50);text-decoration:none}
.nav-drop b{font-weight:650}.nav-drop span{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.nav-drop a:first-child b{color:var(--blue)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 34px 60px -34px rgba(20,34,56,.4)}
.mega-in{display:flex;gap:34px;padding-block:26px 30px}
.mega-col{flex:1;min-width:0}
.mega-t{font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mega-col ul{display:grid;gap:1px}
.mega-col li a{display:block;padding:6px 0;color:var(--ink-2);font-size:15px;line-height:1.3}
.mega-col li a:hover{color:var(--blue);text-decoration:none}
.mega-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:650;font-size:14px}
.mega-feature{flex:0 0 280px;align-self:start;display:grid;gap:8px;justify-items:start;padding:20px;border-radius:18px;background:var(--blue-50)}
.mega-feature h3{font-size:19px;line-height:1.2}.mega-feature p:not(.mega-t){font-size:14px;color:var(--ink-2);margin-bottom:6px}
.mega-feature .mega-t{margin-bottom:0}
.top-cta{justify-self:end;display:flex;align-items:center;gap:14px}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.mnav{padding-block:6px 14px;border-top:1px solid var(--line);max-height:calc(100vh - var(--top-h));overflow:auto}
.mnav-link,.mnav-group summary{display:block;padding:12px 4px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2);cursor:pointer;list-style:none}
.mnav-group summary::-webkit-details-marker{display:none}
.mnav-group summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
.mnav-group[open] summary::after{content:"–"}
.mnav-group a{display:block;padding:9px 4px 9px 18px;color:var(--ink-2);font-size:15px;border-bottom:1px solid var(--line-2)}
.mnav .nav-cta{color:var(--blue);font-weight:650}
.acct{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#1b1206;display:grid;place-items:center;font:700 15px var(--sans);border:0;cursor:pointer}
.acct-menu{position:absolute;right:0;top:48px;min-width:240px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:8px;display:grid;z-index:60}
.acct-menu a,.acct-menu button{display:block;text-align:left;padding:9px 10px;border-radius:9px;color:var(--ink);font-size:15px;background:none;border:0;cursor:pointer;width:100%}
.acct-menu a:hover,.acct-menu button:hover{background:var(--blue-50);text-decoration:none}
.acct-who{padding:8px 10px 10px;border-bottom:1px solid var(--line-2);margin-bottom:6px;display:grid}
.acct-who span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){.top-in{grid-template-columns:1fr auto auto}.nav{display:none}.menu-btn{display:inline-flex}.hide-sm{display:none!important}}
@media (max-width:420px){.top-cta .btn{padding:10px 14px;font-size:14px}.brand img{height:34px}}
body.mode-focus .top{display:none}

/* footer */
.foot{padding-block:48px 32px;border-top:1px solid var(--line);background:var(--paper);margin-top:40px}
.foot-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,3.6fr);gap:40px}
.foot-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 28px}
.foot-brand{display:flex;flex-direction:column;gap:14px}.foot-cta{gap:14px;align-items:center}
.foot-brand .foot-social{gap:8px;flex-wrap:nowrap}.foot-brand .foot-social a{width:36px;height:36px}
.foot-more{display:inline-flex;align-items:center;gap:5px;color:var(--blue)!important;font-weight:600}
@media (max-width:1000px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:640px){.foot-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}
.foot h4{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot li a{color:var(--ink-2);font-size:14.5px;line-height:1.9}
.foot-logo{height:40px;width:auto;align-self:flex-start}
.foot-legal{margin-top:28px;max-width:68em}
.band+.foot,.sec.paper+.foot{margin-top:0}

/* hero + home */
.hero{position:relative;padding-block:clamp(32px,6vw,72px) clamp(40px,6vw,72px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1 .blue{color:var(--blue)}.hero .lede{margin-top:18px}
.jobform{margin-top:26px;display:flex;align-items:center;gap:6px;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;box-shadow:var(--shadow);max-width:580px}
.jobform:focus-within{border-color:var(--blue)}
.jobform label{font:500 16px var(--sans);color:var(--muted);white-space:nowrap}
.jobform input{flex:1;min-width:0;border:0;background:transparent;font:600 18px var(--sans);color:var(--ink);padding:11px 4px;outline:none}
.jobform input::placeholder{color:var(--muted);font-weight:500}
@media (max-width:560px){.jobform{flex-wrap:wrap;border-radius:20px;padding:10px 10px 10px 16px}.jobform input{flex-basis:60%}.jobform .btn{width:100%}}
.formnote{margin-top:12px;font-size:14px;color:var(--muted)}
.try{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.try>span{font-size:14px;color:var(--muted)}
.counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.counts div{display:grid;gap:4px;align-content:start;min-width:0}
.counts b{font:700 18px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.counts span{font-size:12px;line-height:1.3;color:var(--muted);text-wrap:balance}
@media (max-width:560px){.counts{gap:8px}.counts b{font-size:13.5px}.counts span{font-size:10.5px}}
.press{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:18px;font-size:13px;color:var(--muted)}
.press b{font:700 15px/1 var(--display);letter-spacing:-.01em;color:var(--ink-2)}
.demo{position:relative}
.tri{position:absolute;width:var(--s);height:var(--s);background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(var(--r));opacity:.92;pointer-events:none}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-8px) rotate(calc(var(--r) + 6deg))}}
.demo>.tri{animation:drift 9s ease-in-out infinite}.demo>.tri:nth-child(2){animation-duration:11s}.demo>.tri:nth-child(3){animation-duration:13s}
.chat{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lift);overflow:hidden}
.chat-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.seg{display:flex;gap:4px;margin-inline:auto;background:var(--ground);padding:3px;border-radius:999px;border:1px solid var(--line)}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font:600 13px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.replay{border:0;background:none;color:var(--muted);font:600 12px/1 var(--sans);cursor:pointer;padding:6px 8px;border-radius:8px}.replay:hover{color:var(--blue);background:var(--blue-50)}
.chat-body{padding:20px 18px;display:grid;gap:14px;align-content:start}
.msg{max-width:92%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.5}
.msg p{margin:0}
.msg.me{justify-self:end;background:var(--blue);color:var(--on-blue);border-bottom-right-radius:6px}
.msg.ai{justify-self:start;background:var(--ground);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg .who{display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--mono);color:var(--muted);margin-bottom:8px}
.msg .who i{width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.chat .st{transition:opacity .35s ease,transform .35s ease}
.chat.playing .st:not(.in){opacity:0;transform:translateY(6px);visibility:hidden}
.blk{display:grid;gap:7px;margin-top:12px}.blk>.tag{justify-self:start}
.blk ul{display:grid;gap:5px}
.blk ul li{font-size:14px;line-height:1.45;padding-left:14px;position:relative}
.blk ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--blue-100)}
.loaded{display:flex;flex-wrap:wrap;gap:6px}
.sk{font:500 12px/1.2 var(--mono);padding:5px 8px;border-radius:7px;background:var(--green-50);color:var(--green)}
.sys{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper)}.sys b{font-size:14px}
.pipe{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;padding:0}
.pipe li{font:500 12px/1.2 var(--sans);padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--ground);transition:background .3s,color .3s,border-color .3s}
.pipe li.on{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.pipe li:not(:last-child)::after{content:"→";margin-left:8px;color:var(--muted)}
.chat-foot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
/* Gemini CLI in the home demo: a terminal */
.chat.is-cli{background:#0E1116;border-color:#0E1116}
.chat.is-cli .chat-top{background:#161B22;border-color:#232A33}.chat.is-cli .dots i{background:#3A4350}
.chat.is-cli .seg{background:#0E1116;border-color:#2B333D}.chat.is-cli .seg button{color:#9AA4B2}.chat.is-cli .seg button.on{background:#2B333D;color:#fff;box-shadow:none}
.chat.is-cli .replay{color:#9AA4B2}.chat.is-cli .replay:hover{background:#2B333D;color:#fff}
.chat.is-cli .chat-body{font-family:var(--mono);gap:10px}
.chat.is-cli .msg{max-width:100%;justify-self:start;padding:0;border:0;border-radius:0;background:none;color:#E6EDF3;font-size:13.5px}
.chat.is-cli .msg.me{color:#8AB4F8}.chat.is-cli .msg.me::before{content:"> ";color:#4ADE80}
.chat.is-cli .msg .who,.chat.is-cli .muted{color:#9AA4B2}
.chat.is-cli .blk ul li{font-size:13px;color:#C9D1D9}.chat.is-cli .blk ul li::before{background:#8AB4F8}
.chat.is-cli .sys{background:#161B22;border-color:#2B333D}.chat.is-cli .sys b{color:#E6EDF3}
.chat.is-cli .pipe li{background:#0E1116;border-color:#2B333D;color:#9AA4B2}.chat.is-cli .pipe li.on{border-color:#8AB4F8;color:#8AB4F8;background:rgba(138,180,248,.1)}.chat.is-cli .pipe li:not(:last-child)::after{color:#5B6573}
.chat.is-cli .chat-foot{border-color:#232A33}.chat.is-cli .fake-input{border-radius:8px;border-color:#2B333D;color:#9AA4B2;font:13px var(--mono)}
@media (max-width:480px){.chat-top{gap:6px;padding:10px}.chat-top .dots{display:none}.chat-top .seg{margin-inline:0}.chat-top .seg button{padding:6px 8px;font-size:12px}}
.fake-input{flex:1;padding:10px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-note{position:relative;display:table;margin:16px auto 0;padding:8px 16px;border-radius:999px;font-size:13px;color:var(--ink-2);text-align:center;background:color-mix(in srgb,var(--paper) 78%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.week-list{display:grid;border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,.9fr);gap:28px;padding-block:26px;border-bottom:1px solid var(--line);align-items:center}
.wrow .when{font:600 14px/1.35 var(--mono);color:var(--blue)}.wrow .when small{display:block;font-weight:400;color:var(--muted);margin-top:4px}
.wrow h3{font-size:23px;margin-bottom:8px}.wrow p{color:var(--ink-2)}
@media (max-width:900px){.wrow{grid-template-columns:minmax(0,1fr);gap:12px}}
.mini{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14px;box-shadow:var(--shadow)}
.mini .l1{font-weight:600}.mini .l2{color:var(--muted);font-size:13px}
.mini-mail{display:grid;gap:4px}.mini-mail .from{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.skillchips{display:flex;flex-wrap:wrap;gap:6px}
.skillchips span{font:500 13px var(--mono);padding:5px 9px;border-radius:7px;background:var(--ground);border:1px solid var(--line);color:var(--ink-2)}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--blue);border-radius:999px}
.stamp{display:flex;align-items:center;gap:12px}
.stamp .seal,.seal{width:44px;height:44px;border-radius:50%;background:var(--green-50);color:var(--green);display:grid;place-items:center;font:700 18px var(--display);flex:none}
.fake-field{display:grid;gap:4px}.fake-field span{font-size:13px;font-weight:600}.fake-field i{display:block;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--ground)}
.chan-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start}
@media (max-width:900px){.chan-grid{grid-template-columns:minmax(0,1fr)}}
.chan-tabs{display:grid;gap:10px}
.chan-tab{display:grid;gap:4px;text-align:left;padding:18px 20px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper);cursor:pointer}
.chan-tab b{font:700 19px var(--display);letter-spacing:-.01em}.chan-tab span{color:var(--ink-2);font-size:15px}
.chan-tab[aria-selected="true"]{border-color:var(--blue);box-shadow:var(--shadow)}
.chan-view{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);min-height:340px}
.prompt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--ground);border:1px solid var(--line);font:500 14px/1.5 var(--mono);color:var(--ink)}
.prompt .copy{margin-left:auto;flex:none}
.prompt-n{flex:none;width:24px;height:24px;border-radius:6px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font:700 12px var(--mono)}
.news-item{display:grid;gap:4px;padding-block:8px;border-bottom:1px solid var(--line-2)}
.cert-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:900px){.cert-grid{grid-template-columns:minmax(0,1fr)}}
.certificate{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow-lift);overflow:hidden}
.certificate::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--blue) 0 70%,var(--orange) 70% 100%)}
.cert-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cert-org{font:700 15px var(--display);color:var(--blue)}
.cert-name{font:800 32px/1.1 var(--display);letter-spacing:-.025em;margin-top:18px}
.cert-title{font-weight:600;color:var(--blue);margin-top:6px;font-size:17px}
.cert-skills{display:grid;gap:8px;margin-top:18px}
.cert-skills li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.cert-skills li span:last-child{color:var(--muted);font-family:var(--mono);font-size:12px;white-space:nowrap}
.cert-foot{display:flex;flex-wrap:nowrap;gap:5px;align-items:center;margin-top:18px;container-type:inline-size}
.cert-demos{display:flex;flex-wrap:nowrap;gap:5px}
.cert-foot .li-btn,.cert-foot .cert-demo{padding:6px 9px;font-size:12px;gap:4px;white-space:nowrap}.cert-foot .li-btn{border:1px solid #0A66C2}.cert-foot svg{width:12px;height:12px}
/* All four on one row: on a narrow certificate the demo buttons show their icon only (label in the tooltip). */
@container (max-width:409px){.cert-foot .cert-demo{padding:6px 8px}.cert-demo .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.cert-demo{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font:600 13px/1 var(--sans)}
.li-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#0A66C2;color:#fff;font:600 14px/1 var(--sans);border:0;cursor:pointer}
.li-btn:hover{text-decoration:none;opacity:.92}
.live{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mono);color:var(--green)}.live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-50)}
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.lib-grid{grid-template-columns:minmax(0,1fr)}}
.lib-col{display:flex;flex-direction:column;gap:12px}.lib-col h3{font-size:21px}
.lib-list{display:grid}
.lib-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);color:var(--ink);font:500 15px/1.4 var(--sans)}
.lib-list a:hover{color:var(--blue);text-decoration:none}.lib-list .m{font-size:13px;color:var(--muted);white-space:nowrap}
.lib-cats{display:flex;flex-wrap:wrap;gap:6px}.lib-cats .chip{padding:6px 11px;font-size:13px}.lib-cats .chip .n{font:500 11px var(--mono);color:var(--muted)}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px}
@media (max-width:700px){.price-grid{grid-template-columns:minmax(0,1fr)}}
.price-card{display:grid;gap:14px;align-content:start;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px}
.price-card.best{border:2px solid var(--blue);box-shadow:var(--shadow-lift)}
.price-wrap{display:grid;gap:22px;max-width:900px}
.bill-switch{position:relative;display:inline-flex;justify-self:start;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.bill-switch input{position:absolute;opacity:0;pointer-events:none}
.bill-switch label{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font:600 14px var(--sans);cursor:pointer;color:var(--ink-2)}
.bill-switch input:checked+label{background:var(--blue);color:var(--on-blue)}
.bill-switch input:focus-visible+label{outline:2px solid var(--blue);outline-offset:2px}
.price-wrap:has(.bill-m:checked) .p-y,.price-wrap:not(:has(.bill-m:checked)) .p-m{display:none}
.plan-group{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 -4px}
.price{font:800 46px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font:500 16px var(--sans);color:var(--muted);letter-spacing:0;margin-left:4px}
.band{background:var(--band);color:var(--on-band)}
.band h2{color:var(--on-band)}.band .lede{color:var(--band-soft)}
.band-in{display:grid;gap:16px;justify-items:start}
.band .jobform{border-color:transparent;box-shadow:none}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}}
.step-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:10px;align-content:start}
.step-card h3{font-size:20px}.step-card p{color:var(--ink-2)}
.step-num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue);color:var(--on-blue);font:700 15px var(--mono)}
.faq{display:grid;gap:10px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font:700 17px/1.4 var(--display);display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--ink-2);line-height:1.7}

/* breadcrumbs, pagination, empty states */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--ink-2)}.crumbs a:hover{color:var(--blue)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:34px 0 60px}
.pager .nums{display:flex;gap:6px;flex-wrap:wrap}
.pager a,.pager span.cur,.pager .gap{min-width:38px;height:38px;padding:0 10px;display:inline-grid;place-items:center;border-radius:10px;font:600 14px var(--sans);font-variant-numeric:tabular-nums}
.pager .nums a{border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.pager .nums a:hover{border-color:var(--blue-100);text-decoration:none}
.pager span.cur{background:var(--blue);color:var(--on-blue)}
.pager .gap{color:var(--muted)}
.pager .pp{display:inline-flex;align-items:center;gap:6px;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.pager .pp.off{opacity:.45}
.empty{padding:28px;border:1.5px dashed var(--line);border-radius:18px;background:var(--paper);margin-block:10px 40px}
.empty h3{font-size:20px;margin-bottom:6px}

/* cards */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.cgrid.four{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.cgrid.two{grid-template-columns:minmax(0,1fr)}}
a.card{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;padding:0;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100);text-decoration:none}
a.card h3{font-size:17px;line-height:1.28;letter-spacing:-.01em}
.card-body{display:grid;gap:8px;padding:14px 16px 16px;align-content:start}
.kind{font:600 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.kind .lock{color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:4px}
.stars{color:var(--orange-ink)}
.cover{position:relative;display:block;aspect-ratio:16/9;max-width:100%;background:var(--line-2);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.gen{background:var(--cv,var(--blue));display:flex;align-items:flex-end;padding:14px}
.cv-label{position:relative;font:700 20px/1 var(--display);color:#fff;letter-spacing:-.02em}
.ccard .cover{border-bottom:1px solid var(--line)}
.tcard{padding:18px!important;gap:10px}
.tcard-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tlogo{width:48px;height:48px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.tlogo.gen{display:grid;place-items:center;background:var(--cv,var(--blue));color:#fff;font:800 17px var(--display);border:0}
.tcard p,.lcard p{font-size:14px;color:var(--ink-2);line-height:1.5}
.certcard{padding:18px!important;gap:10px}
.certcard .seal{width:40px;height:40px}
.lcard{padding:18px!important;gap:8px}
.ncard .ncard-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--line-2)}
.ncard .ncard-img img{width:100%;height:100%;object-fit:cover;display:block}
.rows{display:grid;border-top:1px solid var(--line)}
.nrow{display:grid;grid-template-columns:minmax(0,1fr) auto 120px;gap:20px;align-items:center;padding-block:16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.nrow:hover h3{color:var(--blue)}.nrow:hover{text-decoration:none}
.nrow h3{font-size:18px;font-weight:650;line-height:1.3;transition:color .15s}
.nrow .when{font:500 13px var(--mono);color:var(--muted);white-space:nowrap}
.nrow .tags{margin-top:8px;gap:6px}
.nrow-img{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--line-2)}
.nrow-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.nrow{grid-template-columns:minmax(0,1fr) 90px;gap:6px 12px}.nrow-main{grid-row:1}.nrow .when{grid-column:1;grid-row:2}.nrow>:last-child{grid-column:2;grid-row:1/3}}
.side-list .nrow{grid-template-columns:minmax(0,1fr);gap:4px;padding-block:10px}
.side-list .nrow>*{grid-column:auto;grid-row:auto}.side-list .nrow .when{order:2}.side-list .nrow-img{display:none}.side-list .nrow h3{font-size:15px}
.side-list a.card{margin-top:10px}
.cta-card{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:22px;border-radius:18px;background:var(--band);color:var(--on-band)}
.cta-card h3{color:var(--on-band);font-size:21px}.cta-card p{color:var(--band-soft)}
.inline-cta{margin-block:14px;padding:22px;border-radius:18px;background:var(--blue-50);display:grid;gap:10px}

/* library: title with search beside it, filters (fold away) | results | call-to-action rail */
.lib-wide{max-width:1440px}
.lib-top{padding-block:clamp(20px,3vw,34px) 18px}
.lib-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-top:6px}
.lib-title-text{display:grid;gap:8px;min-width:0;flex:1 1 380px}
.lib-title .h-l{font-size:clamp(28px,3.2vw,40px)}
.lsearch{position:relative;display:flex;align-items:center;gap:10px;flex:0 1 600px;min-width:min(100%,320px);background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:6px 8px 6px 16px;box-shadow:var(--shadow)}
.lsearch:focus-within{border-color:var(--blue)}
.lsearch>.ic{color:var(--muted)}
.lsearch input{flex:1;min-width:0;border:0;background:transparent;font:500 17px var(--sans);color:var(--ink);padding:10px 0;outline:none}
.lsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.kbd-hint{flex:none;font:600 12px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--ground)}
.lsearch:focus-within .kbd-hint{display:none}
@media (hover:none){.kbd-hint{display:none}}
.lib-intro{margin-top:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:20px}
.tile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:15px}
.tile:hover{border-color:var(--blue-100);text-decoration:none}.tile b{font-weight:600}.tile span{font:500 12px var(--mono);color:var(--muted)}
.lib-tiles{padding-bottom:56px}.lib-tiles .tiles{margin-top:14px}
.tile.on{background:var(--blue-50);border-color:var(--blue)}
.lib-body{display:grid;grid-template-columns:220px minmax(0,1fr) 244px;gap:28px;align-items:start;padding-top:4px;padding-bottom:40px}
.nofilters .lib-body{grid-template-columns:minmax(0,1fr) 244px}
.nofilters .lib-body>.facets{display:none}
.facets{position:sticky;top:calc(var(--top-h) + 18px);max-height:calc(100vh - var(--top-h) - 36px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.facets-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.facets-head b{font:700 17px var(--display);margin-right:auto}
.facets-fold,.facets-close{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--ink-2)}
.facets-fold:hover{border-color:var(--blue-100);color:var(--blue)}
.facets-close{display:none;border-radius:50%}
.facet{border-bottom:1px solid var(--line-2);min-width:0}
.facet>summary{display:flex;align-items:center;gap:8px;padding:14px 0 10px;cursor:pointer;list-style:none;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary .ic{margin-left:auto;transition:transform .15s}
.facet:not([open])>summary .ic{transform:rotate(-90deg)}
.facet>summary:hover{color:var(--ink)}
.fbody{display:grid;gap:1px;padding-bottom:12px}
.fopt{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;margin-inline:-8px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1.3;color:var(--ink)}
.fopt:hover{background:var(--blue-50)}
.fopt input{width:16px;height:16px;accent-color:var(--blue);margin:0;cursor:pointer}
.fopt.extra{display:none}.facet.all .fopt.extra{display:grid}
.flinks{margin-top:4px;padding-top:4px;border-top:1px solid var(--line-2)}
.fopt.flink{color:var(--blue);text-decoration:none}.fopt.flink:hover{text-decoration:none}.fopt.flink svg{justify-self:center;color:var(--blue)}
.fcount{font:500 12px var(--mono);color:var(--muted)}
.fsel{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--blue);color:var(--on-blue);font:700 11px/1 var(--sans);letter-spacing:0;vertical-align:1px}
.linkbtn{border:0;background:none;color:var(--blue);font:600 14px var(--sans);cursor:pointer;padding:6px 0;justify-self:start;text-align:left}
.facets-foot{padding-top:14px}
.js .facets-foot{display:none}
.res-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-bottom:14px}
.res-count{font-size:15px;color:var(--ink-2);margin-right:auto}.res-count b{font:700 19px var(--display);color:var(--ink);margin-right:2px}
.filter-btn{display:none}
.nofilters .filter-btn{display:inline-flex}
.sortsel{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sortsel select{font:600 14px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.applied{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.lib-results{min-width:0}
.lib-results.loading{opacity:.55;transition:opacity .15s}
.lib-grid-res{grid-template-columns:repeat(auto-fill,minmax(204px,1fr))}
.lib-rail{position:sticky;top:calc(var(--top-h) + 18px);display:grid;gap:12px}
.rail-card{border-radius:18px;padding:20px;display:grid;gap:10px}
.rail-main{background:var(--band);color:var(--on-band)}
.rail-main .eyebrow{color:var(--band-soft)}
.rail-main h3{color:var(--on-band);font-size:21px;line-height:1.2}
.rail-main p{color:var(--band-soft);font-size:14.5px}
.rail-main ul{display:grid;gap:8px;margin:2px 0 4px}
.rail-main li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.rail-main li .ic{color:var(--orange);margin-top:3px}
.rail-job{display:grid;gap:8px}
.rail-job input{width:100%;padding:11px 12px;border-radius:12px;border:0;font:500 15px var(--sans);color:#202832;background:#fff}
.rail-main .btn-primary{background:#fff;color:#0852A8}.rail-main .btn-primary:hover{background:var(--orange-50)}
.rail-note{color:var(--band-soft)!important;font-size:12.5px!important;text-align:center}
.rail-link{color:var(--on-band);font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center;justify-self:center}
.rail-next{background:var(--paper);border:1px solid var(--line);color:var(--ink);grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
.rail-next:hover{border-color:var(--blue-100);text-decoration:none}
.rail-next b{grid-column:1;font-weight:650}.rail-next span{grid-column:1;font-size:14px;color:var(--ink-2)}.rail-next .ic{grid-column:2;grid-row:1/3;align-self:center;color:var(--blue)}
.scrim{position:fixed;inset:0;background:rgba(10,20,35,.45);z-index:79}
body.noscroll{overflow:hidden}
@media (max-width:1240px){
  .lib-body,.nofilters .lib-body{grid-template-columns:220px minmax(0,1fr)}
  .nofilters .lib-body{grid-template-columns:minmax(0,1fr)}
  .lib-rail{position:static;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the sticky filter column slides to the bottom of .lib-body, so a full-width rail there would sit under it */
  html:not(.nofilters) .lib-body>.lib-rail{grid-column:2}
}
@media (max-width:900px){
  .lib-body,.nofilters .lib-body{grid-template-columns:minmax(0,1fr)}
  .filter-btn{display:inline-flex}
  .facets-fold{display:none}
  .nofilters .lib-body>.facets{display:block}
  .facets{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);max-height:none;z-index:80;background:var(--paper);padding:calc(16px + env(safe-area-inset-top,0px)) 20px 0;box-shadow:var(--shadow-lift);transform:translateX(105%);transition:transform .25s ease;overflow:auto}
  .facets.open{transform:none}
  .facets-close{display:grid}
  .facets-foot,.js .facets-foot{display:block;position:sticky;bottom:0;padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));background:var(--paper)}
  .lib-rail,html:not(.nofilters) .lib-body>.lib-rail{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}
}
.tax-head{display:flex;gap:22px;align-items:flex-start}
.tax-img{width:96px;height:96px;border-radius:18px;object-fit:cover;flex:none}.tax-img.round{border-radius:50%}
@media (max-width:640px){.tax-head{flex-direction:column}}
.nf{padding-block:60px 90px;display:grid;gap:14px;justify-items:start}
.search-groups{display:grid;gap:40px;padding-bottom:60px}

/* detail pages */
.entry{padding-bottom:30px}
.ehead{padding-block:clamp(22px,4vw,44px) 22px;max-width:860px}
.etitle{margin-top:10px}.ehead .lede{margin-top:14px}
/* detail pages: the featured image sits to the right of the title and excerpt, capped so a tall
   image cannot push the text column down. It drops below the text on narrow screens. */
.ehead.has-media{max-width:none}
/* the same columns as .egrid below, so the title lines up with the text and the image with the sidebar */
.has-media .ehead-in{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
.ehead-media{margin:0;min-width:0}
.ehead-media img{width:100%;max-height:280px;object-fit:cover;border-radius:18px;display:block}
.ehead-media figcaption{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:1000px){.has-media .ehead-in{grid-template-columns:minmax(0,1fr)}.ehead-media{max-width:560px}.ehead-media img{max-height:260px}}
.emeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px;color:var(--ink-2)}
.emeta span{display:inline-flex;align-items:center;gap:6px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:16px;font-size:14px;color:var(--ink-2)}
.byline a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.byline img{border-radius:50%;object-fit:cover}
.byline .emeta{margin-top:0}
.egrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
@media (max-width:1000px){.egrid{grid-template-columns:minmax(0,1fr)}}
.emain{min-width:0}.emain.wide{max-width:820px}
.easide{position:sticky;top:calc(var(--top-h) + 20px);display:grid;gap:16px}
@media (max-width:1000px){.easide{position:static}}
.easide .card h3{font-size:17px;margin-bottom:6px}
.aside-cta{background:var(--blue-50);border-color:var(--blue-100)}
.aside-cta p{color:var(--ink-2);font-size:15px;margin-top:4px}
.aside-cta .jobform{flex-wrap:wrap;border-radius:16px;padding:8px 8px 8px 14px;margin-top:14px;box-shadow:none}
.aside-cta .jobform label{display:none}.aside-cta .jobform input{font-size:16px;padding:8px 4px}
.aside-cta .jobform .btn{width:100%}
.aside-cta .small{margin-top:8px}
.feature{margin:0 0 26px}.feature img{width:100%;border-radius:18px;display:block}
.feature figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.sharebar{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.related{padding-block:30px 20px}
.tool-top{display:flex;gap:clamp(20px,3vw,36px);align-items:flex-start;margin-top:4px}
.tool-txt{flex:1;min-width:0}
.alts-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}.alts-links .alts-link{margin-top:0}.alts-link.build svg{transform:none}
.side-build{padding:18px 18px 20px;margin-bottom:18px;border-left:4px solid var(--blue)}.side-build h3{margin:6px 0 6px;font-size:17px;line-height:1.3}.side-build p{margin:0 0 12px}.side-build .btn{white-space:normal;text-align:left}
.buildown .btn{white-space:normal;text-align:left}
.buildown{margin-top:36px;padding:22px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:16px}.buildown h3{margin:6px 0 8px}.buildown p{margin:0 0 10px}
.apptools{margin:22px 0 4px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:14px}.apptools p{margin:0}.apptools .eyebrow{margin-bottom:6px}
.toolfeat{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.toolfeat li{padding:14px;border:1px solid var(--line);border-radius:12px;font-size:14.5px;line-height:1.5}.toolfeat b{display:block;margin-bottom:2px}.toolfeat .soft{display:block;margin-top:6px;font-size:12.5px}
.alts-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;color:var(--blue);text-decoration:none}.alts-link svg{transform:rotate(90deg)}.alts-link:hover{text-decoration:underline}
.alts{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:90px}.alts .soft{margin:8px 0 18px}.alts-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* the tool's image sits right of the title and excerpt, capped in height */
.tool-media{margin:0;flex:none;width:min(300px,36%)}
.tool-media img{width:100%;max-height:180px;object-fit:contain;border-radius:20px;background:#fff;border:1px solid var(--line);display:block}
.tool-logo{width:84px;height:84px;border-radius:20px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.tool-logo.gen{display:grid;place-items:center;background:var(--blue);color:#fff;font:800 28px var(--display)}
.tool-head .actions,.book-head .actions{margin-top:18px}
.book-top{display:flex;gap:26px;align-items:flex-start}
.book-cover{width:190px;border-radius:12px;box-shadow:var(--shadow-lift);flex:none}
@media (max-width:640px){.tool-top,.book-top{flex-direction:column}.book-cover{width:150px}.tool-media{width:100%}.tool-media img{max-height:200px}}
.player{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;max-width:100%;border:0;border-radius:18px;background:#000 center/cover no-repeat;cursor:pointer;overflow:hidden;margin-bottom:18px;padding:0}
.player .play{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--blue);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .15s}
.player:hover .play{transform:scale(1.06)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.locked{cursor:default}
.player.locked::before{content:"";position:absolute;inset:0;background:rgba(8,20,40,.62)}
.lockbox{position:relative;display:grid;justify-items:center;gap:10px;color:#fff;text-align:center;padding:20px}
.credit{margin-bottom:22px;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.credit b{color:var(--ink)}.credit details{margin-top:8px}.credit summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:14px}
.cert-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:26px 0 8px;padding:18px 20px;border-radius:14px;background:var(--blue-50);border:1px solid var(--blue-100)}
.cert-cta strong{display:block;font:700 18px/1.3 var(--display);color:var(--ink);margin-bottom:2px}.cert-cta span{font-size:15px;color:var(--ink-2)}
.exam-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:24px;border-radius:18px;background:var(--paper);border:2px solid var(--blue);margin-bottom:28px;box-shadow:var(--shadow)}
.exam-card>div:first-child{max-width:520px;display:grid;gap:8px}
.steps-mini{counter-reset:s;display:grid;gap:8px;margin-top:8px}
/* the number sits in the margin, so links and bold words inside a step flow as ordinary text */
.steps-mini li{counter-increment:s;position:relative;display:block;padding-left:34px;min-height:24px;line-height:1.55;font-size:15px;color:var(--ink-2)}
.steps-mini li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;font:700 12px var(--mono)}
.lessons{margin-top:34px;display:grid;gap:10px}
.lesson-list{display:grid;gap:8px;margin-top:10px}
.lesson-list a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);color:var(--ink);font-weight:500}
.lesson-list a:hover{border-color:var(--blue-100);text-decoration:none}
.lesson-list .num{width:28px;height:28px;border-radius:8px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;font:700 12px var(--mono)}
.lesson-list .lock{color:var(--muted)}
.lesson-list.compact a{padding:8px 10px;font-size:15px}
.lesson-side ol{display:grid;gap:2px;margin-top:8px;max-height:60vh;overflow:auto}
.lesson-side li a{display:flex;gap:10px;padding:8px;border-radius:9px;color:var(--ink-2);font-size:14px;line-height:1.35}
.lesson-side li a:hover{background:var(--blue-50);text-decoration:none}
.lesson-side li.cur a{background:var(--blue-50);color:var(--ink);font-weight:600}
.lesson-side .num{font:600 12px var(--mono);color:var(--blue);min-width:18px}
.toc{margin:0 0 26px;padding:16px 18px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.toc ol{display:grid;gap:4px;margin-top:8px}
.toc li a{font-size:15px;color:var(--ink-2)}.toc li.l3{padding-left:14px}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.pn{display:grid;gap:4px;padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.pn:hover{border-color:var(--blue-100);text-decoration:none}
.pn span{font:600 12px var(--mono);color:var(--blue);display:inline-flex;align-items:center;gap:6px}.pn.next{text-align:right}.pn.next span{justify-content:flex-end}
.paywall{display:grid;gap:16px;margin-block:10px 20px}
.toc-teaser{padding:18px 20px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.toc-teaser ol{list-style:decimal;padding-left:20px;display:grid;gap:4px;margin-top:10px;color:var(--ink-2)}
.paywall-box{padding:28px;border-radius:18px;background:var(--band);color:var(--on-band);display:grid;gap:10px;justify-items:start}
.paywall-box h3{color:var(--on-band);font-size:24px}.paywall-box p{color:var(--band-soft)}
.paywall-box .link-quiet{color:var(--on-band)}
.paywall-box .btn-primary{background:#fff;color:#0852A8}
.lockicon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.path-steps{margin-block:10px 34px}
.path-steps>ol{counter-reset:p;display:grid;gap:14px;margin-top:14px}
.path-steps>ol>li{counter-increment:p;position:relative;padding:18px 18px 18px 64px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.path-steps>ol>li::before{content:counter(p);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font:700 14px var(--mono)}
.path-steps h3{font-size:19px;margin-bottom:10px}
.path-steps .card{max-width:420px}
.doc-embed{position:relative;width:100%;padding-top:141%;margin:1.4em 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.doc-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* post body (Ghost content) */
.prose{font-size:18px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin-top:1.8em;line-height:1.2}
.prose h3{font-size:clamp(20px,2vw,23px);margin-top:1.6em;line-height:1.25}
.prose h4{font-size:18px;margin-top:1.4em}
.prose p,.prose li{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul{list-style:disc;padding-left:1.4em}.prose ol{list-style:decimal;padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--blue);color:var(--ink-2);font-style:italic}
.prose code{font:500 .88em var(--mono);background:var(--line-2);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto;font-size:14px}
.prose pre code{background:none;padding:0}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2)}
.prose img{border-radius:12px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose iframe{max-width:100%}
.legal-sum{background:var(--blue-50);border-radius:16px;padding:20px 24px}.legal-sum ul{margin-top:10px}
.legal-toc{border:1px solid var(--line);border-radius:16px;padding:18px 24px;font-size:16px}.legal-toc ol{margin-top:8px;columns:2;column-gap:28px}.legal-toc li{break-inside:avoid}
.legal h2{scroll-margin-top:calc(var(--top-h) + 16px)}
@media (max-width:640px){.legal-toc ol{columns:1}}
.prose .kg-embed-card iframe[src*="youtube"],.prose iframe[src*="youtube.com/embed"]{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px}
.prose .kg-card{margin-block:1.6em}
.prose.with-anchors h2,.prose.with-anchors h3{scroll-margin-top:calc(var(--top-h) + 16px)}
.prose p:has(> strong:first-child)+p{margin-top:.4em}

/* member pages, forms, toasts */
.auth{min-height:calc(100vh - var(--top-h) - 200px);display:grid;place-items:center;padding-block:48px}
.auth-box{width:min(460px,100%);background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.auth-box h1{font-size:28px;margin-bottom:8px}
.or-rule{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--muted);font-size:13px}.or-rule::before,.or-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.field{display:grid;gap:6px;margin-top:14px}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);font:500 16px var(--sans);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.code6{letter-spacing:.35em;font:600 24px var(--mono)!important;text-align:center}
.err{color:var(--red);font-size:15px;margin-top:10px}
.ok-note{padding:12px 14px;border-radius:12px;background:var(--green-50);color:var(--ink);font-size:15px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:14px;font-size:15px;box-shadow:var(--shadow-lift);max-width:calc(100vw - 32px);animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* small shared bits */
.linkbtn{background:none;border:0;padding:0;color:var(--blue);font-weight:600;cursor:pointer}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
kbd{font:600 12px var(--mono);padding:2px 6px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2)}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--blue)}
.inline-form{display:inline}
.pblock{border:1px solid var(--line);border-radius:14px;background:var(--paper-2);overflow:hidden;margin-top:12px}
.pblock-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.pblock-top .mono{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.pblock pre{margin:0;padding:14px;max-height:340px;overflow:auto;font:500 13px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.pblock pre code{font:inherit}
body.nokeys [data-k="1"]{display:none}
body:not(.nokeys) [data-k="0"]{display:none}

/* the setup questions (focus mode) */
body.mode-focus{background:var(--paper)}
.quiz-top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:14px var(--gutter);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px)}
.quiz-top .brand img{height:34px}
.quiz-bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;max-width:560px;justify-self:center;width:100%}
.quiz-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .35s ease}
.quiz{max-width:720px;margin:0 auto;padding:clamp(20px,5vw,48px) var(--gutter) 80px}
.quiz-intro{display:grid;gap:12px;margin-bottom:34px}
.q{border:0;margin:0 0 44px;padding:0;min-width:0}
.q legend{display:flex;gap:12px;align-items:baseline;padding:0;margin-bottom:6px}
.q-n{color:var(--blue);font-size:15px;white-space:nowrap}
.q-title{font:700 clamp(26px,3.4vw,36px)/1.15 var(--display);letter-spacing:-.025em;color:var(--ink)}
.q-help{color:var(--ink-2);margin:4px 0 20px 34px}
.q>:not(legend):not(.q-help){margin-left:34px}
@media (max-width:560px){.q>:not(legend):not(.q-help),.q-help{margin-left:0}}
.q-input{width:100%;border:0;border-bottom:2px solid var(--blue-100);background:transparent;font:600 clamp(20px,2.6vw,26px) var(--sans);color:var(--ink);padding:10px 2px;outline:none;border-radius:0}
.q-input:focus{border-bottom-color:var(--blue)}
.q-input::placeholder{color:var(--muted);font-weight:500}
.q-input.small-input{font-size:17px;margin-top:14px}
.q .chips{margin-top:16px}
.opts{display:grid;gap:10px;max-width:560px}
.opts.compact{max-width:none;gap:8px}
.opt{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--blue-100)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .key{flex:none;width:26px;height:26px;border-radius:7px;border:1.5px solid var(--blue-100);color:var(--blue);display:grid;place-items:center;font:700 12px var(--mono)}
.opt-t{display:grid;gap:2px;flex:1;min-width:0;font-size:16px}
.opt-t small{color:var(--ink-2);font-size:14px}
.opt .tick{flex:none;opacity:0;color:var(--blue);transition:opacity .15s}
.opt:has(input:checked){border-color:var(--blue);background:var(--blue-50)}
.opt:has(input:checked) .key{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.opt:has(input:checked) .tick{opacity:1}
.opt:has(input:focus-visible){outline:3px solid var(--blue-200);outline-offset:2px}
.q-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.q-back{display:none}
.q-submit{display:grid;gap:10px;justify-items:start;margin-top:10px}
/* stepped: one question on screen at a time */
.quiz.stepped .q,.quiz.stepped .q-static{display:none}
.quiz.stepped .q.cur{display:block;animation:qin .35s ease both}
.quiz.stepped .quiz-intro.show{display:grid}
.quiz.stepped .q-back{display:block;margin:0 0 0 34px}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.quiz:not(.stepped) .q-nav{display:none}
.q.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.building{position:fixed;inset:0;z-index:80;background:var(--paper);display:grid;place-items:center;padding:24px}
.building-in{max-width:520px;display:grid;gap:14px}
.build-steps{display:grid;gap:12px;margin-top:10px}
.build-steps li{display:flex;gap:12px;align-items:center;color:var(--muted);transition:color .3s}
.build-steps li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);transition:all .3s}
.build-steps li.on{color:var(--ink)}
.build-steps li.on::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--green)}

/* the plan */
.plan-hero{padding-block:clamp(28px,5vw,56px) 26px;background:linear-gradient(180deg,var(--blue-50),transparent)}
.plan-hero .h-xl{max-width:17em}
.plan-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;padding-bottom:60px}
@media (max-width:980px){.plan-grid{grid-template-columns:minmax(0,1fr)}.plan-side{order:-1}}
.plan-main{display:grid;gap:18px}
.plan-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:14px}
.plan-card-head{display:flex;gap:14px;align-items:flex-start}
.plan-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center}
.mini-chat{display:grid;gap:12px;padding:16px;border-radius:16px;background:var(--paper-2);border:1px solid var(--line)}
.mini-chat .msg.ai{background:var(--paper)}
.skill-list{display:grid;gap:2px}
.skill-list li{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.skill-list li:last-child{border-bottom:0}
.skill-list b{text-transform:capitalize}
.skill-list.linked li{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.skill-list.linked a{display:grid;gap:2px;color:var(--ink)}
.skill-list.linked a:hover b{color:var(--blue)}
.weeks{display:grid;gap:10px}
.weeks li{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line-2)}
.build-sample{padding:14px 16px;border-radius:14px;background:var(--orange-50);display:grid;gap:6px}
.plan-side{position:sticky;top:20px;display:grid;gap:12px}
.trial-box{background:var(--paper);border:2px solid var(--blue);border-radius:22px;padding:22px;display:grid;gap:12px;box-shadow:var(--shadow-lift)}
.plan-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.plan-opt input{accent-color:var(--blue);width:18px;height:18px}
.plan-opt>span{display:grid;gap:2px}.plan-opt small{color:var(--muted);font-size:13px}
.plan-opt:has(input:checked){border-color:var(--blue);background:var(--blue-50)}
.plan-price{text-align:right}.plan-price b{font:800 22px/1 var(--display)}

/* dashboard */
body.mode-app{background:var(--ground)}
body.mode-app .foot{margin-top:0}
.dash{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding-block:28px 60px;align-items:start}
@media (max-width:900px){.dash{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:14px}}
.dash-side{position:sticky;top:calc(var(--top-h) + 18px);display:grid;gap:14px}
.dash-me{display:flex;gap:10px;align-items:center;padding:4px 6px}
.dash-me>div{display:grid;min-width:0}.dash-me b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dash-me span{font-size:13px;color:var(--muted)}
.dash-me .avatar{cursor:default}
.dash-nav{display:grid;gap:2px}
.dash-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;color:var(--ink-2);font-weight:500}
.dash-nav a:hover{background:var(--paper);color:var(--ink);text-decoration:none}
.dash-nav a.on{background:var(--paper);color:var(--blue);font-weight:650;box-shadow:var(--shadow)}
.dash-nav .nav-lock{margin-left:auto;display:inline-flex;color:var(--muted)}
.locked-card{margin-top:4px}
.dash-out{padding:4px 10px}
@media (max-width:900px){.dash-side{position:static}.dash-me,.dash-out{display:none}.dash-nav{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}.dash-nav a{white-space:nowrap;background:var(--paper);border:1px solid var(--line)}.dash-nav a.on{box-shadow:none;border-color:var(--blue)}}
.dash-main{display:grid;gap:20px;min-width:0;align-content:start}
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:4px}
.dash-head>div{display:grid;gap:8px}
.dash-head .lede{font-size:17px}
.dash-banner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--orange-50);color:var(--ink);font-size:14px}
.dash-banner a{font-weight:650}
.dash-banner.warn{background:var(--blue-50)}
.dash-flash{margin:0}
.dcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:10px;align-content:start;min-width:0}
.dcard-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.dsec{display:grid;gap:14px;margin-top:8px}
.dsec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dcard.next{background:var(--band);border-color:var(--band);color:var(--on-band);position:relative;overflow:hidden}
.dcard.next h2,.dcard.next .eyebrow{color:var(--on-band)}.dcard.next .soft{color:var(--band-soft)}
.dcard.next .btn-primary{background:#fff;color:#0852A8}
.dcard.next::after{content:"";position:absolute;right:-20px;bottom:-30px;width:130px;height:130px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(-14deg);opacity:.9}
.meter{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--green);border-radius:99px}
.setup-steps{display:grid;gap:4px}
.setup-steps a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border-radius:12px;color:var(--ink)}
.setup-steps a:hover{background:var(--blue-50);text-decoration:none}
.setup-steps small{display:block;color:var(--ink-2);font-size:14px}
.setup-steps li.done b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--blue-100);display:grid;place-items:center;flex:none}
li.done .dot,.done>.dot{background:var(--green);border-color:var(--green);color:#fff}
.learn-mini,.reqs{display:grid;gap:8px}
.learn-mini li,.reqs li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:15px}
.learn-mini li.done a{color:var(--muted);text-decoration:line-through}
.idea h2{font-size:21px}
.litems{display:grid;gap:14px}
.litem.done{opacity:.72}
.litem details summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:15px}
.lcourses{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--paper-2)}
.lcourses a{display:flex;gap:8px;align-items:center;font-weight:500}
.more-list{display:grid;gap:8px}
.more-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.more-list li>span:first-child{display:grid}
.rule-cta{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;color:var(--ink);background:var(--blue-50);border-color:var(--blue-100)}
.rule-cta:hover{text-decoration:none;border-color:var(--blue)}
.rule-cta small{display:block;color:var(--ink-2)}
.pace-form{display:flex;align-items:center;gap:8px}
.pace-form select{padding:9px 12px;border-radius:11px;border:1.5px solid var(--line);background:var(--paper);font:500 15px var(--sans);color:var(--ink)}
.rules{display:grid;gap:12px;counter-reset:none}
.rules>li{grid-template-columns:44px minmax(0,1fr);gap:14px;display:grid}
.rule-n{width:40px;height:40px;border-radius:12px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font-weight:700}
.example{padding:10px 12px;border-radius:10px;background:var(--paper-2);margin-top:6px}
.skeleton{margin:6px 0 0;padding:10px;border-radius:10px;background:var(--paper-2);font:500 12.5px/1.5 var(--mono);white-space:pre-wrap}
.levels{display:grid;gap:12px}
.jump-bar{display:flex;gap:6px;overflow-x:auto;position:sticky;top:var(--top-h);z-index:20;margin:-14px calc(-1 * var(--gutter)) 0;padding:10px var(--gutter);background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(8px);scrollbar-width:none}
.jump-bar::-webkit-scrollbar{display:none}
.jump-bar a{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.jump-bar a:hover{border-color:var(--blue-100);text-decoration:none}
.jump-bar a.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.dsec[data-spy]{scroll-margin-top:calc(var(--top-h) + 64px)}
.lvl{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:12px}
.lvl-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.lvl-top>div{display:grid;gap:2px}.lvl-top small{font-size:14px}
.lvl-n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:var(--line-2);color:var(--ink-2)}
.lvl.earned .lvl-n{background:var(--green);color:#fff}
.lvl.next{border:2px solid var(--blue)}.lvl.next .lvl-n{background:var(--blue);color:var(--on-blue)}
.lvl.locked{opacity:.7}
.cert-list{display:grid;gap:8px}
.cert-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.cert-row>a,.cert-row>span{display:grid;color:var(--ink);min-width:0}.cert-row small{color:var(--muted);font-size:13px}
.cert-ic{width:40px;height:40px;border-radius:12px;background:var(--orange-50);color:var(--orange-ink);display:grid;place-items:center}
.review-form{display:grid;gap:4px}
.quiz-res{display:grid;gap:10px}
.quiz-res li.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.quiz-res li.bad{border-color:color-mix(in srgb,var(--orange) 45%,var(--line))}
.exam{display:grid;gap:14px}
.exq{border:1px solid var(--line);margin:0}
.exq legend{display:grid;gap:4px;padding:0;margin-bottom:10px;font-size:17px;line-height:1.4;float:left;width:100%}
.exq .opts{clear:both}
.exam-page{padding-block:24px 60px}
.ai-pick{display:flex;flex-wrap:wrap;gap:8px}
.ai-pick a{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;font-size:15px}
.ai-pick a:hover{border-color:var(--blue-100);text-decoration:none}
.ai-pick a[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.connect{display:grid;gap:16px}
.keybar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--green-50);font-size:14px}
.keybar>span{display:inline-flex;gap:8px;align-items:center;margin-right:auto}
.csteps{display:grid;gap:14px}
.cstep-h{display:flex;gap:12px;align-items:center}
.cn{width:30px;height:30px;border-radius:50%;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.csteps details summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:14px;margin-top:6px}
.routines{display:grid;gap:10px}
.routines li{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--paper-2)}
.warn-card{background:var(--orange-50);border-color:transparent}
.connect-done{justify-items:start}
.settings-form .chips{margin-top:4px}
.chip.chk{cursor:pointer}
.chip.chk input{accent-color:var(--blue)}
.chip.chk:has(input:checked){background:var(--blue-50);border-color:var(--blue);color:var(--ink)}
.settings-form details summary{cursor:pointer;color:var(--blue);font-weight:600}
.price-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
@media (max-width:600px){.price-mini{grid-template-columns:minmax(0,1fr)}}
.team-plans>div{gap:6px}.team-plans form{margin-top:6px}
.seat-count{display:grid;justify-items:end;gap:2px}.seat-count b{font:800 30px/1 var(--display)}.seat-count b span{font-size:18px;color:var(--muted)}.seat-count small{color:var(--muted);font-size:13px}
.seat-list{display:grid;padding:4px 18px}
.seat-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.seat-row:last-child{border-bottom:0}
.seat-who{display:grid;gap:2px;min-width:0}.seat-who b,.seat-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-who small{color:var(--muted);font-size:13px}
.seat-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.seat-act form{margin:0}
.avatar.sm{width:32px;height:32px;font-size:14px}
.invite-result{margin-bottom:18px}
@media (max-width:640px){.seat-row{grid-template-columns:auto minmax(0,1fr) auto}.seat-act{grid-column:2/-1;justify-content:flex-start}}
.price-mini>div{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.small-prose{font-size:16px}
.small-prose h2{font-size:22px}.small-prose h3{font-size:19px}

/* certificate page: the document (.cd, always light, sized in container units so it keeps its shape) and the page around it */
.certpage{padding-block:28px 72px;display:grid;gap:22px;max-width:1120px}
.cert-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;text-align:center}
.cert-ok{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--green-50);color:var(--green);font:700 14px/1 var(--sans)}
.cert-status a{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.cd-wrap{container-type:inline-size;width:100%}
.cd{--cd-blue:#0852A8;--cd-orange:#F7941E;--cd-ink:#202832;--cd-soft:#4D5866;--cd-muted:#7F8A98;--cd-line:#D7DEE8;
  position:relative;aspect-ratio:297/210;background:#fff;color:var(--cd-ink);border:.3cqw solid var(--cd-orange);border-radius:1.4cqw;overflow:hidden;
  box-shadow:0 30px 80px -34px rgba(8,82,168,.38),0 1px 2px rgba(20,34,56,.06);text-align:center;font-family:var(--sans);display:flex}
.cd-band{position:absolute;pointer-events:none}
.cd-band-a{left:0;top:0;width:100%;height:5.2cqw;background:linear-gradient(to bottom right,var(--cd-orange) 50%,transparent 50.2%)}
.cd-band-b{left:0;top:0;width:46%;height:8.4cqw;background:linear-gradient(to bottom right,rgba(247,148,30,.22) 50%,transparent 50.2%)}
.cd-band-c{right:0;bottom:0;width:100%;height:5.2cqw;background:linear-gradient(to top left,var(--cd-blue) 50%,transparent 50.2%)}
.cd-band-d{right:0;bottom:0;width:46%;height:8.4cqw;background:linear-gradient(to top left,rgba(8,82,168,.16) 50%,transparent 50.2%)}
.cd-in{position:relative;flex:1;margin:3.4cqw 3.6cqw;padding:3cqw 5cqw 2.2cqw;border:.12cqw solid var(--cd-line);border-radius:.8cqw;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.92)}
.cd p{margin:0}
.cd-logo{height:5.6cqw;width:auto;display:block}
.cd-kicker{margin-top:2cqw!important;font:800 3.3cqw/1.05 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--cd-blue)}
.cd-lead{margin-top:1.6cqw!important;font-size:1.55cqw;line-height:1.3;color:var(--cd-soft)}
.cd-name{margin-top:.9cqw!important;padding:0 3cqw .5cqw;font:800 5.2cqw/1.08 var(--display);letter-spacing:-.02em;color:var(--cd-ink);border-bottom:.12cqw solid var(--cd-line);max-width:90%}
.cd-title{margin-top:.8cqw!important;font:700 2.5cqw/1.2 var(--display);color:var(--cd-blue);max-width:78%}
.cd-detail{margin-top:.8cqw!important;font-size:1.4cqw;line-height:1.35;color:var(--cd-soft);max-width:70%}
.cd-list{list-style:none;margin:1cqw 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5cqw .7cqw;max-width:88%}
.cd-list li{font-size:1.15cqw;line-height:1.2;padding:.45cqw .9cqw;border-radius:99cqw;background:#F1F6FD;color:var(--cd-blue);font-weight:600}
.cd-meta{margin-top:1.3cqw!important;font-size:1.45cqw;color:var(--cd-soft)}
.cd-meta i,.cd-verify i{font-style:normal;color:var(--cd-orange);padding:0 .4cqw}
.cd-sign{--cd-mark:14.4cqw;margin-top:auto;padding:1.4cqw 0 2.2cqw;width:100%;display:grid;grid-template-columns:1fr var(--cd-mark) 1fr;align-items:center;gap:2cqw}
.cd-qr{position:relative;width:calc(var(--cd-mark) * .72);height:calc(var(--cd-mark) * .72);justify-self:center}
.cd-qr img{box-sizing:border-box;width:100%;height:100%;display:block;padding:.35cqw;border:.25cqw solid #D4A72C;border-radius:.8cqw;background:#fff;box-shadow:0 0 0 .12cqw #F3D06A}
.cd-qr span{position:absolute;left:0;right:0;top:100%;margin-top:.7cqw;font:600 .9cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A97C12;text-align:center}
.cd-seal{position:relative;width:var(--cd-mark);height:var(--cd-mark);justify-self:center}
.cd-sign>.cd-seal:first-child{justify-self:end}.cd-sign>.cd-seal:last-child{justify-self:start}
.cd-seal-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cd-seal-in{position:absolute;inset:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55cqw;color:#fff;text-align:center}
.cd-seal-t{font:600 1.05cqw/1.2 var(--sans);letter-spacing:.01em;color:#fff;white-space:nowrap}
.cd-seal-t.two{font-size:.86cqw;margin-bottom:.15cqw}
.cd-seal-logo{width:7.2cqw;height:auto;display:block}
.cd-seal-ai{display:flex;align-items:center;gap:.4cqw;font:700 1.3cqw/1 var(--display);color:#fff}
.cd-seal-ai img{width:1.45cqw;height:1.45cqw;display:block}
.cd-verify{margin-top:1.4cqw!important;font:500 .95cqw/1.3 var(--mono);color:var(--cd-muted);letter-spacing:.02em}
.cert-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn-verify{background:var(--green);color:#fff}.btn-verify:hover{background:color-mix(in srgb,var(--green) 85%,#000)}
.cert-more{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:12px}
@media (max-width:820px){.cert-more{grid-template-columns:minmax(0,1fr)}}
.cert-side{gap:14px}
.cert-side .dcard.next{padding-right:max(22px,min(110px,22%))}
.cert-facts .tag{text-transform:none;letter-spacing:0}
.cert-facts{margin:14px 0 0;display:grid}
.cert-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.cert-facts>div:first-child{border-top:0}
.cert-facts dt{color:var(--muted);font-size:14px}.cert-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.cert-facts dd ul{margin:0;padding:0;list-style:none;font-weight:500;gap:6px}
.cert-facts .tag{display:inline-flex;align-items:center;gap:5px}
@media (max-width:520px){.cert-facts>div{grid-template-columns:minmax(0,1fr);gap:2px}}
.certverify{padding-block:36px 72px;max-width:1120px;display:grid;gap:18px}
.verify-box{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:var(--green-50);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 25%,transparent)}
.verify-box b{color:var(--ink);font:700 18px/1.3 var(--display)}.verify-box p{margin:4px 0 0}
.verify-box.bad{background:color-mix(in srgb,var(--red) 8%,var(--paper));color:var(--red);border-color:color-mix(in srgb,var(--red) 25%,transparent)}
.verify-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.verify-grid{grid-template-columns:minmax(0,1fr)}}
.verify-thumb{display:block;transition:transform .2s}.verify-thumb:hover{transform:translateY(-2px)}
.cert-lookup{display:grid;gap:6px;max-width:520px}.cert-lookup .row{flex-wrap:nowrap}.cert-lookup input{flex:1;min-width:0}
.cert-busy{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(11,19,32,.55);color:#fff;font:600 16px var(--sans)}
.btn[aria-busy="true"],a[aria-busy="true"]{opacity:.75;pointer-events:none}
.opts.cols{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
@media (max-width:520px){.opts.cols{grid-template-columns:minmax(0,1fr)}}
.q:focus{outline:none}
.btn-line.on{background:var(--blue-50);border-color:var(--blue);color:var(--blue)}

/* skills library */
.job-find{margin-top:18px;display:grid;gap:10px;padding:18px 20px;border-radius:18px;background:var(--paper);border:1px solid var(--line);max-width:980px}
.job-find label{display:grid;gap:2px}.job-find label b{font:700 17px var(--display)}.job-find label span{font-size:14.5px;color:var(--ink-2)}
.job-find-row{display:flex;gap:10px;flex-wrap:wrap}
.job-find-row input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);font:600 16px var(--sans);color:var(--ink);background:var(--paper-2)}
.job-find-row input:focus{outline:none;border-color:var(--blue);background:var(--paper)}
/* job title suggestions ([data-job-suggest] in app.js) */
.ac-wrap{position:relative;flex:1 1 280px;min-width:0}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:35;display:grid;gap:1px;padding:6px;max-height:320px;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift)}
.ac-opt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:15px;color:var(--ink)}
.ac-opt:hover,.ac-opt[aria-selected="true"]{background:var(--blue-50)}
.ac-opt mark{background:none;color:var(--blue);font-weight:700;padding:0}
.ac-opt small{flex:none;font:500 12px var(--mono);color:var(--muted)}
.skcard{display:flex;flex-direction:column;padding:0;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.skcard:hover{border-color:var(--blue-100);box-shadow:var(--shadow)}
.skcard-main{display:grid;gap:7px;padding:16px 16px 12px;color:var(--ink);align-content:start;flex:1}
.skcard-main:hover{text-decoration:none}.skcard-main:hover h3{color:var(--blue)}
.skcard h3{font-size:17px;line-height:1.25;letter-spacing:-.01em;transition:color .15s}
.skcard p{font-size:14px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.skcard-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line-2);background:var(--paper-2)}
.gb-link{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--sans);color:var(--ink-2);white-space:nowrap}
.gb-link:hover{color:var(--blue)}
.skgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.howto{display:grid;gap:10px;padding:18px 20px;border-radius:16px;background:var(--blue-50);border:1px solid var(--blue-100);margin-bottom:22px}
.say{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.say code{font:500 14px var(--mono);color:var(--ink);white-space:normal}
.skill-md{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.skill-md-head{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.skill-md .prose{padding:6px 20px 22px}
.gb-card{display:grid;gap:4px;color:var(--ink)}
.gb-card:hover{border-color:var(--blue-100);text-decoration:none}
.gb-card h3{display:flex;align-items:center;gap:6px}
.easide .lib-rail,.easide .rail-card{position:static}

/* prompt library: lesson pages, single prompts, the prompt box (.pbox; .prompt is the home page's) */
mark.ph{background:#fff3d6;color:#7a4b00;border-radius:4px;padding:0 3px;font-weight:600}
.pbox{margin-top:14px}
.pbox-body{padding:6px 18px 16px;font-size:15px}
.pbox-body.prose p,.pbox-body.prose li{font-size:15px}
.pbox.compact .pbox-body{max-height:300px;overflow:auto;scrollbar-width:thin}
.pteaser{margin-top:12px;padding:14px 16px;border:1px dashed var(--line);border-radius:14px;background:var(--paper-2)}
.pteaser-text{color:var(--ink-2);font-size:15px}
.pteaser-lock{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:14px;color:var(--muted)}
.plist{display:grid;gap:18px}
.pitem{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--paper);scroll-margin-top:calc(var(--top-h) + 16px)}
.pitem-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.pitem-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--blue-50);color:var(--blue);font-size:13px}
.pitem-head h2{line-height:1.25}.pitem-head h2 a{color:var(--ink)}
.pitem-head p{margin-top:4px;font-size:15px}
.pitem-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:12px;font-size:14px}
.pitem-foot a{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.pfollow{margin-top:28px}
.pfollow ul{display:grid;gap:8px;margin-top:12px;padding:0;list-style:none}
.pfollow li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:15px}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.pnav a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.pnav a:hover{border-color:var(--blue-100);text-decoration:none}
.pnav-next{text-align:right}
.pskills ul{display:grid;gap:2px;margin:10px 0 6px;padding:0;list-style:none}
.pskills li a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;color:var(--ink);font-size:14.5px}
.pskills li a:hover{background:var(--blue-50);text-decoration:none}
.pl-extra{margin-top:8px;max-width:760px}
.plesson .c-outline a{font-size:14px}
@media (max-width:640px){.pnav{grid-template-columns:1fr}.pnav-next{text-align:left}.pitem{padding:16px}.pfollow li{flex-direction:column;align-items:flex-start}}

/* detail pages: actions under the title, "at a glance" in the sidebar */
.ehead .etitle.h-l{font-size:clamp(30px,3.6vw,46px);line-height:1.08;max-width:22em}
.eactions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.glance h3{font-size:17px;margin-bottom:10px}
.glance dl{display:grid;gap:0;margin:0}
.glance dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-size:14.5px}
.glance dl>div:first-child{border-top:0}
.glance dt{color:var(--muted);font-size:13px}.glance dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.easide .rail-card{border-radius:18px}
.gb-card{padding:16px 18px!important}
.job-find-side{display:grid;gap:10px;padding:18px!important}
.job-find-side label{display:grid;gap:4px}.job-find-side label b{font:700 17px/1.25 var(--display)}.job-find-side label span{font-size:14px;color:var(--ink-2);line-height:1.45}
.job-find-side input{width:100%;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);font:600 15px var(--sans);color:var(--ink);background:var(--paper-2)}
.job-find-side input:focus{outline:none;border-color:var(--blue);background:var(--paper)}
/* "Find the skills/prompts for your job" (a member feature): light Complete AI orange, so it is the one
   card in the sidebar that asks for attention. Dark text on the orange button: white on #F7941E fails contrast. */
.job-find-side{background:var(--orange-50)!important;border-color:color-mix(in srgb,var(--orange) 45%,transparent)!important}
.job-find-side label b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%);vertical-align:1px}
.job-find-side input{border-color:color-mix(in srgb,var(--orange) 40%,var(--line));background:var(--paper)}
.job-find-side input:focus{border-color:var(--orange)}
.job-find-btn{background:var(--orange);color:#2B1A00;font-weight:700;border:0}
.job-find-btn:hover{background:color-mix(in srgb,var(--orange) 88%,#000);color:#2B1A00;text-decoration:none}
.job-find-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--orange-ink);margin:0}
.job-find-note a{color:var(--orange-ink);text-decoration:underline}
.mega-note{margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted);max-width:26ch}
@media (max-height:780px){.skills .lib-rail{position:static}}
.skill-page .easide{position:static}

/* video course body: blocks, numbered segments that fold, questions, and an outline that follows you */
.cbody{display:grid;gap:22px;margin-top:6px}
.cb-sec{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.4vw,26px);scroll-margin-top:calc(var(--top-h) + 16px)}
.cb-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:16px}
.cb-h{font-size:clamp(22px,2.2vw,26px);margin-right:auto}
.cb-intro{font-size:16.5px;margin-bottom:16px;color:var(--ink-2)}
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.learn-grid li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--green-50);font-size:15.5px;line-height:1.45}
.lg-ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin-top:1px}
@media (max-width:640px){.learn-grid{grid-template-columns:minmax(0,1fr)}}
.segs{display:grid;gap:10px}
.segs>.seg{display:block;margin:0;padding:0;border:0;background:none;border-radius:0;scroll-margin-top:calc(var(--top-h) + 16px)}
.seg>details{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);transition:border-color .15s}
.seg>details[open]{background:var(--paper);border-color:var(--blue-100)}
.seg summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px 16px;cursor:pointer;list-style:none}
.seg summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none}
.seg-n{width:34px;height:34px;border-radius:10px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:13px}
.seg details[open] .seg-n{background:var(--blue);color:var(--on-blue)}
.seg-t{font:650 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.seg-m{font-size:12px;color:var(--muted);white-space:nowrap}
.seg summary .ic,.faq-item summary .ic{color:var(--muted);transition:transform .15s}
.seg details[open] summary .ic,.faq-item[open] summary .ic{transform:rotate(180deg)}
.seg-body{padding:0 18px 18px 62px;font-size:16.5px}
@media (max-width:640px){.seg-body{padding:0 14px 16px}.seg-m{display:none}.seg summary{grid-template-columns:auto minmax(0,1fr) auto}}
.cbody .pt{position:relative;margin:12px 0;padding:12px 14px 12px 36px;border-radius:12px;background:var(--ground);border:1px solid var(--line-2)}
.cbody .pt::before{content:"";position:absolute;left:14px;top:17px;width:10px;height:10px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%)}
.cbody .pt p{margin:0}.cbody .pt .pt-h{font-weight:700;color:var(--ink);margin-bottom:4px}
.cbody .prose>*+*{margin-top:.8em}
.cbody .prose ul{list-style:none;padding-left:0}
.cbody .prose ul>li{position:relative;padding-left:24px}
.cbody .prose ul>li::before{content:"";position:absolute;left:5px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--blue);transform:rotate(45deg)}
.cbody .prose h4{font-size:17px;margin-top:1.2em}
.faq-list{display:grid;border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2);scroll-margin-top:calc(var(--top-h) + 16px)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 2px;cursor:pointer;list-style:none;font:650 16.5px/1.35 var(--sans);color:var(--ink)}
.faq-item summary:hover{color:var(--blue)}
.faq-item .prose{padding:0 2px 16px;font-size:16px;color:var(--ink-2)}
.easide.has-outline{position:static;align-self:stretch;display:flex;flex-direction:column;gap:16px}
.c-outline{position:sticky;top:calc(var(--top-h) + 18px);max-height:calc(100vh - var(--top-h) - 36px);overflow:auto;padding:16px 12px 16px 16px;scrollbar-width:thin}
.c-outline-head{display:grid;gap:4px;padding:0 4px 10px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
.c-outline ol{display:grid;gap:1px}
.co-sec{display:block;padding:7px 8px;border-radius:9px;font-weight:650;font-size:14.5px;color:var(--ink)}
.co-segs{margin:2px 0 6px}
.co-segs a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;padding:5px 8px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.co-segs a .mono{font-size:11px;color:var(--muted);padding-top:2px}
.c-outline a:hover{background:var(--blue-50);text-decoration:none}
.c-outline a.on{background:var(--blue-50);color:var(--blue)}.c-outline a.on .mono{color:var(--blue)}
.c-bar{display:none}
@media (max-width:1000px){
  .c-outline{position:static;max-height:none}
  .c-bar{display:flex;gap:6px;overflow-x:auto;position:sticky;top:var(--top-h);z-index:20;margin:0 calc(-1 * var(--gutter)) 12px;padding:10px var(--gutter);background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(8px);scrollbar-width:none}
  .c-bar a{flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:600;color:var(--ink)}
  .c-bar a.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
  .cb-sec,.seg,.faq-item{scroll-margin-top:calc(var(--top-h) + 68px)}
}

/* ------------------------------------------------------------ favorites (heart button, dashboard list) */
.fav .ic{transition:transform .15s ease}
.fav.on{color:var(--orange-ink);border-color:var(--orange);background:var(--orange-50)}
.fav.on .ic{fill:currentColor}
.fav:active .ic{transform:scale(.88)}
.favfilter{margin:0 0 18px}
.favfilter .mono{font-size:12px;opacity:.75}
.favlist{display:grid;gap:10px;margin-bottom:40px}
.favcard{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:start;padding:12px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.favimg{display:grid;place-items:center;width:96px;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:var(--blue-50);color:var(--blue)}
.favimg img{width:100%;height:100%;object-fit:cover}
.favbody{display:grid;gap:4px;min-width:0}
.favbody h3{font-size:16.5px;line-height:1.3;margin:0}
.favbody h3 a{color:var(--ink)}
.favbody p{margin:0}
.favbody .soft{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.favkind{font:600 12px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.favx{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--orange-ink);cursor:pointer}
.favx .ic{fill:currentColor}
.favx:hover{border-color:var(--orange);background:var(--orange-50)}
.favx:disabled{opacity:.5}
@media (max-width:640px){.favcard{grid-template-columns:72px minmax(0,1fr) auto;gap:12px}.favimg{width:72px}}

/* library cards: categories as small filter links in the gray foot */
.skcard-cats{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.skcard-cats a{font:500 12.5px/1.2 var(--sans);color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap;text-decoration:none}
.skcard-cats a:hover{color:var(--blue);border-color:var(--blue-100);background:var(--blue-50)}

/* ------------------------------------------------------------ build AI apps (/build-ai-apps/) */
.appcard .skcard-main{padding-top:12px}
.appshot{display:block;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:var(--blue-50);border:1px solid var(--line-2);margin-bottom:6px}
.appshot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .3s ease}
.appcard:hover .appshot img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.appcard:hover .appshot img{transform:none}}
.fields-links{display:grid;gap:2px}
.fopt-link{display:block;padding:6px 8px;border-radius:8px;color:var(--ink-2);font-size:14.5px;text-decoration:none}
.fopt-link:hover{background:var(--blue-50);color:var(--blue)}
.fopt-link.on{color:var(--blue);font-weight:650;background:var(--blue-50)}
.appshot-lg img{max-height:320px;object-position:top left;border:1px solid var(--line)}
.appshot-lg > a{display:block}
.buildlock{border-left:4px solid var(--blue)}.buildlock h3{display:flex;align-items:center;gap:8px}.buildlock .row{gap:10px;margin-top:12px}
.demo-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px}.ehead-media .demo-cta span{font-size:13px;color:var(--muted)}
.app-main{display:grid;gap:34px}
.appglance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.appglance>div{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.appglance p{margin:0}.appglance p+p{margin-top:6px;color:var(--ink);font-size:15.5px;line-height:1.5}
@media (max-width:640px){.appglance{grid-template-columns:minmax(0,1fr)}}
.appsec h2{margin-bottom:10px}
.appsec p{color:var(--ink-2);line-height:1.65;margin:0 0 12px;max-width:44em}
.appsteps{counter-reset:s;display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.appsteps li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink)}
.appsteps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font:700 12px var(--mono)}
.appscreens{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.appscreens li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--blue-50);color:var(--blue-ink);font-weight:600;font-size:14px}
.appbuild-sec{padding:24px;border-radius:20px;background:var(--paper);border:1px solid var(--blue-100)}
.buildopt{padding-top:18px;margin-top:18px;border-top:1px solid var(--line-2)}
.buildopt h3{display:flex;align-items:center;gap:10px;font-size:17.5px;margin:0 0 6px}
.buildopt .cn{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--orange-50);color:var(--orange-ink);font-weight:700;font-size:13px}
.buildopt .pblock{margin-top:12px}
.buildopt.nexibeo p{margin-bottom:10px}
.packfiles{display:grid;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.packfiles li{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:9px 12px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line-2)}
.packfiles .mono{font-size:13.5px;color:var(--ink)}
@media (max-width:640px){.packfiles li{grid-template-columns:minmax(0,1fr) auto}.packfiles li .soft{grid-column:1/-1;order:3}}
.apppack-card ul{margin:10px 0 14px}
.nexibeo-card{display:block;text-decoration:none;color:var(--ink);border-color:var(--orange)}
.nexibeo-card:hover{background:var(--orange-50);text-decoration:none}
.nexibeo-card h3{display:flex;align-items:center;gap:6px}
.appbuild ol{margin:8px 0 14px}
.appbuild{background:var(--paper);border:1px solid var(--line)}
/* app page, written for people who copy and paste prompts */
.appfor{margin:4px 0 0;color:var(--ink-2);font-size:15.5px}
.app-page .ehead-txt .chips{margin-top:14px}
.appsub{margin:22px 0 4px}
.appglance .wide{grid-column:1/-1}
.appglance .chips{margin-top:8px}
.chip.plain{cursor:default;background:var(--paper-2)}
.howbadge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--green-50);color:var(--green);font:600 12px/1.2 var(--sans);letter-spacing:0;text-transform:none;margin-left:2px}
.buildopt h3{flex-wrap:wrap}
.tryblock{border-color:var(--blue-100)}
.tryblock pre{max-height:260px}
.buildopt#try{scroll-margin-top:calc(var(--top-h) + 20px)}
.packlist{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.packlist li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);line-height:1.5}
.packlist li .ic{color:var(--green);flex:none;margin-top:3px}
.techfiles{margin-top:14px}
.techfiles summary{cursor:pointer;color:var(--muted)}
.techfiles .packfiles{margin-top:10px}
.appfaq{display:grid;gap:8px}
.appfaq details{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:0 16px}
.appfaq summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--ink)}
.appfaq details p{margin:0 0 14px;color:var(--ink-2);line-height:1.6}
.appmore{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0 18px}
.appmore>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:16px 0}
.appmore[open]{padding-bottom:10px}
.appmore h3{margin:16px 0 6px}

/* team insights (Business admins) */
.team-tabs{margin:0 0 20px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:grid;gap:4px;align-content:start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px}
.stat b{font:800 28px/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--ink-2)}.stat small{font-size:12px;color:var(--muted)}
.lvl-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--line-2);gap:2px}
.lvl-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;color:var(--ink-2)}
.lvl-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lvl-0{background:var(--line)}.lvl-1{background:var(--blue-200)}.lvl-2{background:var(--blue)}.lvl-3{background:var(--orange)}
.tag.lvl-tag-1{background:var(--blue-50);color:var(--blue-ink)}.tag.lvl-tag-2{background:var(--blue);color:var(--on-blue)}.tag.lvl-tag-3{background:var(--orange-50);color:var(--orange-ink)}
.table-wrap{padding:0;overflow-x:auto}
.team-table{width:100%;border-collapse:collapse;font-size:14px}
.team-table th{text-align:left;font:600 12px var(--sans);color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.team-table td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;white-space:nowrap}
.team-table tr:last-child td{border-bottom:0}
.team-table .num{text-align:right;font-variant-numeric:tabular-nums}
.person-link{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.person-link span:last-child{display:grid;gap:1px}.person-link small{color:var(--muted);font-size:12px}
.person-link:hover b{color:var(--blue)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
@media (max-width:860px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.rank{list-style:none;margin:0;padding:6px 16px;display:grid;counter-reset:r}
.rank li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);counter-increment:r}
.rank li:last-child{border-bottom:0}.rank li span::before{content:counter(r) ". ";color:var(--muted)}
.rank li small{color:var(--muted);white-space:nowrap}
.dcard .rank{padding:0}
.week-chart{margin:0}.week-chart svg{width:100%;height:120px;display:block}
.week-chart .bar{fill:var(--blue-200)}.week-chart .bar.rev{fill:var(--blue)}
.week-chart figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--blue-100);display:grid;gap:12px}
.timeline li{display:grid;gap:2px;position:relative}.timeline li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.timeline small{color:var(--muted)}
.privacy-note{display:flex;gap:6px;align-items:flex-start;margin-top:22px}
.note-box{background:var(--paper-2);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.enterprise-card{display:grid;gap:8px;background:var(--paper-2)}
.enterprise-strip{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 24px}
@media (max-width:700px){.enterprise-strip{grid-template-columns:minmax(0,1fr)}}
.ent-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.ent-grid{grid-template-columns:minmax(0,1fr)}}
.ent-block{display:grid;gap:8px}
.ent-form fieldset{border:0;padding:0;margin:0}.ent-form legend{font-weight:600;font-size:14px;margin-bottom:8px}
.ent-form select{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wh-row details{margin-top:6px}.wh-row code{word-break:break-all}

/* AI tool header: the same two columns as the content below it (.egrid): title, text, tags and buttons
   over the main column, the image over the sidebar. */
.ehead.tool-head{max-width:none}
@media (min-width:1001px){
  .tool-head{display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:40px;align-items:start}
  .tool-head>.crumbs{grid-column:1/-1;grid-row:1}
  .tool-head>.tool-top{display:contents}
  .tool-head .tool-txt{grid-column:1;grid-row:2}
  .tool-head>.chips{grid-column:1;grid-row:3}
  .tool-head>.eactions{grid-column:1;grid-row:4}
  .tool-head .tool-side{grid-column:2;grid-row:2/span 3;align-self:start;margin-top:4px}
  .tool-head .tool-media{width:auto}
  .tool-head .tool-media img{max-height:240px}
}
@media (max-width:1000px) and (min-width:641px){.tool-media{width:min(300px,40%)}}

/* ------------------------------------------------------------ AI tool screenshots (slideshow) */
.shots{margin:22px 0 28px}
.shots-stage{position:relative}
.shots-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:16px;border:1px solid var(--line);background:var(--paper-2);scrollbar-width:none;outline-offset:3px}
.shots-track::-webkit-scrollbar{display:none}
.prose .shot,.shot{flex:0 0 100%;scroll-snap-align:start;display:grid;place-items:center;aspect-ratio:16/9;text-decoration:none;background:var(--paper-2)}
.prose .shot img,.shot img{width:100%;height:100%;object-fit:contain;border-radius:0;margin:0;display:block}
.shots-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:opacity .15s}
.shots-nav.prev{left:12px}.shots-nav.next{right:12px}
.shots-nav:hover{color:var(--blue);border-color:var(--blue-100)}
.shots-nav:disabled{opacity:0;pointer-events:none}
.shots-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.shots-count{font:600 13px var(--mono);color:var(--muted)}
.shots-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.shots-dots button{width:8px;height:8px;border-radius:999px;border:0;background:var(--line);padding:0;cursor:pointer;transition:width .15s,background .15s}
.shots-dots button[aria-current="true"]{background:var(--blue);width:22px}
@media (prefers-reduced-motion:reduce){.shots-track{scroll-behavior:auto}.shots-dots button{transition:none}}
@media (max-width:640px){.shots-nav{width:36px;height:36px}.shots-nav.prev{left:6px}.shots-nav.next{right:6px}}
.tool .prose .player{margin:18px 0 24px}

/* The image (or logo) with the "Alternatives for …" link centred underneath it */
.tool-side{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none;width:min(300px,36%)}
.tool-side .tool-media{width:100%}
.tool-side .alts-link{margin-top:0;text-align:center;justify-content:center}
@media (min-width:1001px){.tool-head .tool-side{width:auto}}
@media (max-width:1000px) and (min-width:641px){.tool-side{width:min(300px,40%)}.tool-side .tool-media{width:100%}}
@media (max-width:640px){.tool-side{width:100%}}

/* the questionnaire's way out: back to where you came from (app.js [data-quiz-close]) */
.quiz-end{display:flex;align-items:center;gap:14px}
.quiz-close{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);text-decoration:none;flex:none}
.quiz-close:hover{color:var(--ink);border-color:var(--ink-2);text-decoration:none}
@media (max-width:520px){.quiz-top{gap:12px}.quiz-end{gap:10px}.quiz-close{width:36px;height:36px}}
/* breathing room between the blue stripe and the "Sign in to see how to build it yourself" text */
.buildopt.buildlock{padding-left:24px;padding-bottom:4px}
@media (max-width:640px){.buildopt.buildlock{padding-left:16px}}
/* the demo button and its note, centred under the header image */
.ehead-media .demo-cta{align-items:center;text-align:center}
/* "Already a member? Sign in" on the blue sidebar card: the link must be visible on blue */
.rail-main .rail-note a{color:var(--on-band);text-decoration:underline;text-underline-offset:2px}

/* mega menu: a main column (bigger title, optional subtext) holding its own sub-columns of link groups */
.mega-h{font:700 16px/1.25 var(--display);color:var(--ink);margin-bottom:6px}
.mega-lede{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0 0 12px;max-width:34ch}
.mega-col>.mega-t+.mega-lede{margin-top:-4px}
.mega-main{padding-right:6px}
.mega-main+.mega-main{border-left:1px solid var(--line-2);padding-left:30px}
.mega-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:10px}
.mega-group+.mega-group{margin-top:18px}
.mega-main>.mega-h+ul,.mega-main>.mega-lede+ul{margin-top:2px}
/* ------------------------------------------------------------ MCP servers (/mcp-servers/) */
.mcp-badge{display:inline-flex;align-items:center;gap:4px;font:600 12px/1.2 var(--sans);color:var(--green);background:var(--green-50);border-radius:999px;padding:4px 9px;white-space:nowrap}
.mcp-badge.soft{color:var(--blue-ink);background:var(--blue-50)}
.mcp-what{margin-top:14px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);max-width:62em}
.mcp-what>summary{cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 0;font-weight:600;color:var(--ink);list-style:none}
.mcp-what>summary::-webkit-details-marker{display:none}
.mcp-what>summary .soft{font-weight:400;font-size:14px}
.mcp-what>summary .ic{transition:transform .15s;transform:rotate(-90deg)}.mcp-what[open]>summary .ic{transform:none}
.mcp-what p{margin:0 0 12px;color:var(--ink-2);line-height:1.6}
/* on a server page: the same small fold-out, in the page's blue accent, sitting in the text column */
.mcp-what-page{margin:0;max-width:44em;background:var(--blue-50);border-color:var(--blue-100);border-radius:12px}
.mcp-what-page>summary{padding:10px 0;font-size:15px;color:var(--blue-ink)}
.mcp-what-page>summary .ic{color:var(--blue)}
.mcp-what-page p{margin:0 0 12px;font-size:15px}
.mcp-asks{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.mcp-asks li{padding:10px 14px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink);font-style:italic}
.mcp-needs{margin:8px 0 0;padding-left:18px;color:var(--ink);line-height:1.55}.mcp-needs li+li{margin-top:4px}
.mcp-caution{border-color:var(--orange)!important;background:var(--orange-50)!important}
.mcp-cmd{margin:10px 0;padding:12px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line-2);overflow:auto;font-size:13px;max-height:280px}
.mcp-page .ehead-txt{max-width:52em}
/* AI Tools menu: no divider between the two main columns; the apps column's subtext uses its full width */
.mega-main+.mega-main{border-left:0;padding-left:0}
.mega-main .mega-lede{max-width:none}

/* "?" behind a menu title: explanation on hover, keyboard focus or tap (app.js [data-info]) */
.info-wrap{position:relative;display:inline-flex;vertical-align:middle;margin-left:6px}
.info-btn{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);font:700 11px/1 var(--sans);letter-spacing:0;padding:0;cursor:help;text-transform:none}
.info-btn:hover,.info-wrap.open .info-btn{color:var(--blue);border-color:var(--blue-100);background:var(--blue-50)}
.info-tip{position:absolute;z-index:60;top:calc(100% + 8px);left:-10px;width:270px;padding:12px 14px;border-radius:12px;background:var(--ink);color:var(--paper);font:400 13.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;box-shadow:0 14px 30px -12px rgba(20,34,56,.45);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;pointer-events:none}
.info-tip::before{content:"";position:absolute;top:-5px;left:16px;width:10px;height:10px;background:inherit;transform:rotate(45deg)}
.info-wrap:hover .info-tip,.info-wrap:focus-within .info-tip,.info-wrap.open .info-tip{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.info-tip{transition:none}}
/* phone menu: the "?" sits at the end of the row, the explanation opens underneath */
.mnav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mnav-row>a{flex:1}
.mnav-row .info-wrap{display:contents}
.mnav-row .info-btn{width:24px;height:24px;font-size:13px}
.mnav-row .info-tip{position:static;width:100%;flex-basis:100%;margin:2px 0 8px;display:none;transform:none}
.mnav-row .info-tip::before{display:none}
.mnav-row .info-wrap.open+.info-tip,.mnav-row .info-wrap.open .info-tip{display:block;opacity:1;visibility:visible}
/* home: eight highlights, four per row */
.counts.counts-8{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:20px}
@media (max-width:560px){.counts.counts-8{row-gap:14px}}
/* pricing: what every membership includes, above the plans */
.price-facts{margin:0;padding:18px 22px 20px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.price-facts .counts{margin-top:12px;padding-top:0;border-top:0}
/* course cards: a square (or tall) image shows whole on a light yellow ground instead of being cropped (app.js adds .fit) */
.ccard .cover.fit{background:#FFF6D8}
.ccard .cover.fit img{object-fit:contain}
.lib-head+.wrap>.price-wrap{margin-top:26px}
.mcp-by{font-size:13px;color:var(--muted);margin-top:-3px}
.mcp-page .mcp-by{font-size:14.5px;margin:6px 0 0}
/* MCP flow diagram + lightbox */
.mcp-flow{display:block;position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#F6F8FB;cursor:zoom-in;box-shadow:var(--shadow)}
.mcp-flow img{display:block;width:100%;height:auto}
.mcp-flow-wide img{aspect-ratio:16/10}
.mcp-flow .zoom-hint{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(32,40,50,.78);color:#fff;font:600 12.5px/1.2 var(--sans);opacity:.9}
.mcp-flow:hover .zoom-hint{opacity:1;background:var(--blue)}
.mcp-page .ehead-media .mcp-flow img{max-height:none;border-radius:0;object-fit:contain}
.mcp-page .has-media .ehead-in,.mcp-page.has-flow .ehead-in{grid-template-columns:minmax(0,1fr) 420px}
@media (max-width:1000px){.mcp-page .ehead-in{grid-template-columns:minmax(0,1fr)!important}}
.mcp-flow-wide{margin-top:16px;max-width:860px}
.zoombox{position:fixed;inset:0;z-index:1000;background:rgba(10,16,26,.88);display:grid;place-items:center;padding:clamp(12px,3vw,40px);cursor:zoom-out;animation:zf .15s ease-out}
.zoombox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#F6F8FB}
.zoom-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.zoom-x:hover,.zoom-x:focus-visible{background:rgba(255,255,255,.28)}
html.zooming{overflow:hidden}
@keyframes zf{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.zoombox{animation:none}}
.mcp-page .ehead-media .mcp-thumb{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:16px;border:1px solid var(--line);background:#F6F8FB;box-shadow:var(--shadow)}
.mcp-page .ehead-media .mcp-thumb{aspect-ratio:16/9;object-fit:cover}
.mcpshot{display:block;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#F6F8FB;border:1px solid var(--line-2);margin-bottom:6px}
.mcpshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.mcpcard:hover .mcpshot img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.mcpcard:hover .mcpshot img{transform:none}}

/* Setup videos (src/ui/setupVideos.ts): poster cards that open full screen (app.js playVideo) */
.svid-block{margin-top:40px}.svid-block .h-s{margin:6px 0 16px}
.svid-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.svid-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.svid-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svid-row{grid-template-columns:1fr}}
.svid{display:grid;gap:10px;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.svid-img{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;background:#0b1424 center/cover no-repeat;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.svid .play{position:absolute;left:12px;bottom:12px;width:54px;height:54px;border-radius:50%;background:rgba(8,82,168,.92);color:var(--on-blue);display:grid;place-items:center;box-shadow:0 6px 20px rgba(8,82,168,.35);transition:transform .15s}
.svid:hover .play{transform:scale(1.08)}
.svid:focus-visible .svid-img{outline:3px solid var(--blue);outline-offset:3px}
.svid-len{position:absolute;right:8px;bottom:8px;background:rgba(20,28,40,.82);color:#fff;font-size:12px;padding:2px 7px;border-radius:6px}
.svid-t{display:grid;gap:1px}.svid-t b{font:700 16px var(--sans)}.svid-t span{font-size:14px;color:var(--ink-2)}
.svid-sm{grid-template-columns:190px minmax(0,1fr);align-items:center;gap:14px}.svid-sm .play{width:40px;height:40px}
.svid-inline{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:2px 0 14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.svid-inline .svid{width:min(380px,100%)}.svid-inline p{margin:0;flex:1;min-width:200px}
.vlight{position:fixed;inset:0;z-index:1000;background:rgba(8,12,20,.78);display:grid;place-items:center;padding:24px;animation:vlight-in .18s ease-out}
.vlight-in{position:relative;width:min(1000px,100%,calc((100vh - 140px) * 16 / 9));box-shadow:0 30px 80px rgba(0,0,0,.5);border-radius:14px}
.vlight video,.vlight iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000}
.vlight-x{position:absolute;right:-14px;top:-14px;z-index:1;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ink,#202832);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vlight-x:hover,.vlight-x:focus-visible{background:var(--orange,#F7941E);color:#fff}
@keyframes vlight-in{from{opacity:0}to{opacity:1}}
@media (max-width:620px){.vlight{padding:16px}.vlight-x{right:0;top:-50px}}

/* footer social icons */
.foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);transition:color .15s,border-color .15s,background .15s}.foot-social a:hover,.foot-social a:focus-visible{color:var(--blue);border-color:var(--blue)}