/* ============================================================
   site.css — the public pages under /features/, /guides/, /commanders/ and the use cases.
   Loaded after /css/01-tokens.css, which brings the fonts, colours and
   base styles of the app. The pages are generated by tools/build_pages.py.
   ============================================================ */
.site{position:relative; z-index:1;}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px;}
.narrow{max-width:760px;}

/* ---------- header ---------- */
.s-head{position:sticky; top:0; z-index:5; background:rgba(8,11,18,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.s-head .wrap{display:flex; align-items:center; gap:18px; height:64px;}
.s-brand{display:flex; align-items:center; gap:10px; color:var(--accent-hi); text-decoration:none !important;}
.s-brand img{height:34px; width:auto; flex:0 0 auto; display:block;}
.s-brand span{font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:16px; letter-spacing:.11em; text-transform:uppercase;}
.s-nav{display:flex; gap:4px; margin-left:auto; align-items:center;}
.s-nav a{color:var(--text-dim); font-size:14px; font-weight:500; padding:8px 12px; border-radius:var(--r1);}
.s-nav a:hover, .s-nav a[aria-current]{color:var(--text); background:var(--surface); text-decoration:none;}
.s-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:var(--r1); border:1px solid var(--accent); background:var(--accent); color:var(--on-accent) !important;
  text-decoration:none !important; transition:background .2s, transform .2s;}
.s-btn:hover{background:var(--accent-hi); transform:translateY(-1px);}
.s-btn.ghost{background:transparent; color:var(--text) !important; border-color:var(--line-2);}
.s-btn.ghost:hover{background:var(--surface); border-color:var(--line-3);}
.s-btn.sm{padding:8px 14px; font-size:14px;}
.s-nav .s-btn{margin-left:8px; color:var(--on-accent);}
/* the other language's version of the page (German pages and their English twins) */
.s-lang{font-size:13px !important; letter-spacing:.04em;}
.s-langpick{position:relative; margin-left:4px;}
.s-langbtn{display:inline-flex; align-items:center; padding:4px; border-radius:50%; background:none; border:1px solid transparent; cursor:pointer;}
.s-langbtn:hover, .s-langbtn[aria-expanded="true"]{background:var(--surface); border-color:var(--line-2);}
.s-langbtn:focus-visible, .s-nav a.s-langopt:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.s-langmenu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:10; min-width:160px; padding:5px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r2); box-shadow:var(--shadow);
}
.s-langopt, .s-nav a.s-langopt{display:flex; align-items:center; gap:10px; padding:7px 10px 7px 7px; border-radius:var(--r1); font-size:14px; color:var(--text); text-decoration:none;}
.s-langopt .lang-flag{width:24px; height:24px; flex-basis:24px;}
.s-nav a.s-langopt:hover{background:var(--surface-3);}
.s-langopt.on{color:var(--accent-hi); font-weight:600;}
.s-nav .s-btn{white-space:nowrap;}
.s-nav .s-btn:hover{background:var(--accent-hi);}

/* ---------- hero ---------- */
.s-hero{position:relative; padding:74px 0 56px; overflow:hidden; border-bottom:1px solid var(--line);}
.s-hero.art{background:linear-gradient(90deg, rgba(8,11,18,.97) 0%, rgba(8,11,18,.86) 48%, rgba(8,11,18,.35) 100%), url(/assets/hero-forge.jpg) 78% 10% / cover no-repeat;}
/* 78% 10% is the face in the uncropped artwork; it stays in frame from tall phone heroes (0.37:1) to 4K-wide ones (7.3:1). */
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.s-hero h1{font-size:clamp(34px, 5vw, 56px); text-transform:uppercase; letter-spacing:.02em; margin:10px 0 16px; max-width:780px;}
.s-hero .lead{font-size:18px; line-height:1.6; color:var(--text-dim); max-width:640px; margin:0 0 28px;}
.s-cta{display:flex; flex-wrap:wrap; gap:12px;}
.crumbs{font-size:13px; color:var(--text-faint); margin-bottom:18px;}
.crumbs a{color:var(--text-dim);}

/* ---------- sections ---------- */
.s-sec{padding:56px 0; border-bottom:1px solid var(--line);}
.s-sec h2{font-size:32px; text-transform:uppercase; letter-spacing:.03em; margin:0 0 12px;}
.s-sec > .wrap > p.intro{color:var(--text-dim); font-size:16.5px; max-width:680px; margin:0 0 28px;}
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:22px; display:flex; flex-direction:column; gap:8px;}
.tile h3{font-size:21px; letter-spacing:.02em;}
.tile p{margin:0; color:var(--text-dim); font-size:14.5px; line-height:1.6;}
.tile .ico{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-hi); display:grid; place-items:center; font-size:19px;}
a.tile{color:inherit; text-decoration:none; transition:border-color .2s, transform .2s;}
a.tile:hover{border-color:var(--line-3); transform:translateY(-2px); text-decoration:none;}
a.tile .more{margin-top:auto; padding-top:6px; color:var(--accent-hi); font-weight:600; font-size:14px;}
.steps{counter-reset:step; display:grid; gap:14px; margin:0; padding:0; list-style:none;}
.steps li{counter-increment:step; position:relative; padding:16px 18px 16px 62px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); color:var(--text-dim);}
.steps li strong{color:var(--text);}
.steps li::before{content:counter(step); position:absolute; left:16px; top:14px; width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); font-weight:800; display:grid; place-items:center; font-size:15px;}

/* a small picture of the app, drawn in HTML */
.mock{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r3); padding:18px; box-shadow:var(--shadow);}
.mock .row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.mock .st{flex:1 1 62px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:9px 12px;}
.mock .st b{display:block; font-family:'Barlow Condensed',sans-serif; font-size:24px; line-height:1; font-weight:600;}
.mock .st b small{font-size:14px; color:var(--text-faint);}
.mock .st span{font-size:11.5px; color:var(--text-faint);}
.mock .st.ok b{color:var(--ok);} .mock .st.acc b{color:var(--accent);}
.mock .li{display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface); border-radius:8px; margin-top:4px; font-size:14px;}
.mock .li i{font-style:normal; margin-left:auto; font-size:12px; font-weight:700; color:var(--ok);}
.mock .li i.buy{color:var(--accent); border:1px solid var(--line-3); border-radius:20px; padding:2px 9px;}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}

/* screenshots of the real app (build_pages.py shot()); the data in them is an example */
.shot{margin:0;}
.shot img{display:block; width:100%; height:auto; border-radius:var(--r3); border:1px solid var(--line-2); box-shadow:var(--shadow); background:var(--bg-2);}
.shot.phone{max-width:360px; margin:0 auto;}
.shot.wide{margin:24px 0;}
.shot figcaption{margin-top:10px; font-size:13px; line-height:1.5; color:var(--text-faint);}
.shot figcaption b{margin-right:7px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);}
.shot figcaption strong{color:var(--text-dim);}
.shots3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 22px;}
/* heading, text and picture of the three steps share rows, so the pictures line up however long the text */
.shot-step{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start;}
.shot-step h3{display:flex; align-items:center; gap:10px; font-size:21px; letter-spacing:.02em; margin:0 0 8px;}
.shot-step h3 .n{flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-family:'Inter',sans-serif; font-size:14px; font-weight:800;}
.shot-step > p{color:var(--text-dim); font-size:14.5px; line-height:1.6; margin:0 0 16px;}
.steps li h3{font-size:19px; letter-spacing:.02em; margin:3px 0 4px; color:var(--text);}
.steps li p{margin:0;}
h3.sub{font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin:26px 0 12px;}
h3.sub:first-of-type{margin-top:4px;}
.cta-hint{margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-faint);}
.cta-hint strong{color:var(--text-dim);}
.s-hero .cta-hint{max-width:640px;}
table.t .num{text-align:right;}

/* ---------- article (guides) ---------- */
.article{padding:48px 0 60px;}
.article h2{font-size:28px; text-transform:uppercase; letter-spacing:.03em; margin:38px 0 10px;}
.article h3{font-size:21px; margin:26px 0 6px;}
.article p, .article li{color:var(--text-dim); font-size:16.5px; line-height:1.7;}
.article p{margin:0 0 14px;}
.article ul, .article ol{padding-left:22px; margin:0 0 16px;}
.article li{margin-bottom:6px;}
.article strong{color:var(--text);}
.article .meta{color:var(--text-faint); font-size:13.5px; margin:-4px 0 26px;}
.toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:16px 20px; margin:0 0 26px;}
.toc b{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px;}
.toc ol{margin:0; padding-left:20px;} .toc li{font-size:15px; margin:3px 0;}
table.t{width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:15px; background:var(--surface); border-radius:var(--r2); overflow:hidden;}
table.t th, table.t td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line);}
table.t th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); background:var(--bg-2);}
table.t td{color:var(--text-dim);} table.t td:first-child{color:var(--text); font-weight:600;}
table.t tr:last-child td{border-bottom:none;}
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;}
.note{border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 var(--r2) var(--r2) 0; padding:14px 18px; margin:18px 0; color:var(--text-dim);}
.note strong{color:var(--accent-hi);}
.cta-box{margin:40px 0 0; padding:26px; border-radius:var(--r3); border:1px solid var(--line-3);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),.03)), var(--surface);}
.cta-box h2, .cta-box h3{margin:0 0 8px; font-size:24px; text-transform:uppercase;}
.cta-box p{margin:0 0 16px;}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:14px 18px; margin-bottom:10px;}
.faq summary{cursor:pointer; font-weight:600; color:var(--text);}
.faq details p{margin:10px 0 0; color:var(--text-dim);}
.related{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; margin-top:14px;}

/* ---------- footer ---------- */
.s-foot{padding:44px 0 60px; color:var(--text-faint); font-size:13.5px;}
.s-foot .cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:26px; margin-bottom:28px;}
.s-foot h4{font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin:0 0 10px;}
.s-foot ul{list-style:none; margin:0; padding:0;} .s-foot li{margin:0 0 7px;}
.s-foot a{color:var(--text-faint);} .s-foot a:hover{color:var(--text);}
.s-foot .fcp{border-top:1px solid var(--line); padding-top:18px; font-size:12px; line-height:1.6;}

/* ---------- commander themes (/commanders/, build_pages.py commander_page) ---------- */
.cmdrs{display:grid; gap:18px; margin-top:24px;}
.cmdr{display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; align-items:start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r3); padding:22px; scroll-margin-top:84px;}
.cmdr-art img{display:block; width:100%; height:auto; border-radius:4.8% / 3.4%; box-shadow:var(--shadow); background:var(--bg-2);}
/* partners and Backgrounds: the second card fanned over the lower part of the first */
.cmdr-art.pair img{width:82%;}
.cmdr-art.pair img + img{margin:-74% 0 0 18%; position:relative;}
.cmdr-head{display:flex; align-items:flex-start; gap:12px;}
.cmdr-head h3{font-size:24px; letter-spacing:.02em; margin:2px 0 0;}
.cmdr-head .rank{flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-weight:800; font-size:15px;}
.cmdr-with{display:block; font-size:14px; color:var(--text-dim); margin-top:3px;}
.cmdr-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:12px 0 4px; font-size:13.5px; color:var(--text-faint);}
.cmdr-meta b{color:var(--text-dim); font-weight:600;}
.cmdr p{color:var(--text-dim); font-size:15.5px; line-height:1.65; margin:10px 0 0;}
.cmdr .s-btn{margin-top:16px;}
.cmdr .buy{display:inline-block; margin:16px 0 0 16px; font-size:14px; font-weight:700; color:var(--accent-hi);}
/* the editorial themes: what the commander is for, under its name; a question that is also a heading */
.cmdr-plan{display:block; margin-top:5px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.4; color:var(--accent-hi);}
.faq summary h3{display:inline; margin:0; font:inherit; letter-spacing:normal; text-transform:none; color:inherit;}
.crumbs [aria-current]{color:var(--text-faint);}
.pips{display:inline-flex; gap:3px; vertical-align:middle;}
.pips img{display:block; width:18px; height:18px;}
.tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line-3); color:var(--text-dim); white-space:nowrap;}
.tag.power{color:var(--accent-hi); border-color:var(--accent); background:var(--accent-soft);}
.tag.budget{color:var(--ok); background:var(--ok-soft); border-color:transparent;}
.tag.beginner{color:var(--info); background:var(--info-soft); border-color:transparent;}
.pc{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px;}
.pc h4{font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin:0 0 6px;}
.pc ul{margin:0; padding-left:18px;} .pc li{color:var(--text-dim); font-size:14.5px; line-height:1.55; margin:0 0 4px;}
.cmdr p.fits{font-size:14.5px;} .fits strong{color:var(--text);}
.picknote p{margin:0 0 10px;}
.legend{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px;}
.legend .tag{margin-right:6px;}
table.cmp td, table.cmp th{white-space:nowrap;}
table.cmp td:nth-child(2){font-weight:600; white-space:normal; min-width:170px;}
table.cmp td:nth-child(4){white-space:normal; min-width:180px;}
table.cmp td.num{color:var(--text-faint); font-weight:600; width:1%;}
/* the editorial themes' table has no rank column: commander, colors, plan, complexity, budget */
table.cmp.ed td:nth-child(1){font-weight:600; white-space:normal; min-width:170px;}
table.cmp.ed td:nth-child(2){font-weight:inherit; white-space:nowrap; min-width:0;}
table.cmp.ed td:nth-child(3){white-space:normal; min-width:180px;}
table.cmp.ed td:nth-child(4){white-space:nowrap; min-width:0;}
.tbl-btn{display:inline-block; font-size:13px; font-weight:700; padding:5px 12px; border-radius:var(--r1); border:1px solid var(--line-3); color:var(--accent-hi);}
.tbl-btn:hover{background:var(--surface-2); text-decoration:none;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.keys ul{margin:6px 0 0; padding-left:18px;} .keys li{color:var(--text-dim); font-size:14.5px; line-height:1.55; margin:0 0 6px;}
.keys li a{font-weight:600;}
.tile.bud{flex-direction:row; align-items:flex-start; gap:16px;}
.tile.bud img{flex:0 0 96px; width:96px; height:auto; border-radius:4.8% / 3.4%;}
.tile.bud h3{font-size:18px; margin:0 0 6px;}
.tile.bud .more{display:inline-block; margin-top:8px; color:var(--accent-hi); font-weight:600; font-size:14px;}
.tile.arch{padding-top:0; overflow:hidden;}
.arch-art{display:block; margin:0 -22px 8px; aspect-ratio:626 / 457; overflow:hidden; background:var(--bg-2);}
.arch-art img{display:block; width:100%; height:100%; object-fit:cover;}
.tile .credit{font-size:11.5px; color:var(--text-faint);}
p.group-sub{color:var(--text-faint); font-size:14px; margin:-6px 0 12px;}
.s-sec h2.mt{margin-top:44px;}
.s-foot h4.mt{margin-top:22px;}
.s-sec .article{padding:0;}
.s-sec .article h2:first-child{margin-top:0;}

@media(max-width:640px){
  /* phones: the card beside the name, the text below both */
  .cmdr{display:block; padding:16px;}
  .cmdr-art{float:left; width:96px; margin:0 14px 8px 0;}
  .cmdr-art.pair{width:118px;}
  .cmdr-head h3{font-size:20px;}
  .cmdr-head .rank{flex-basis:28px; width:28px; height:28px; font-size:13px;}
  .cmdr p{clear:both; font-size:15px;}
  .cmdr .pc{clear:both; grid-template-columns:1fr;}
  .cmdr .s-btn{display:flex; justify-content:center; text-align:center;}
  .cmdr .buy{display:block; margin:12px 0 0; text-align:center;}
}

@media(max-width:900px){
  .grid3{grid-template-columns:1fr 1fr;}
  .shots3{column-gap:16px;}
  .split{grid-template-columns:1fr; gap:26px;}
  .s-foot .cols{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .s-nav a:not(.s-btn):not(.s-lang):not(.s-langopt){display:none;}
  .s-head .wrap{height:58px;}
  .s-brand span{font-size:14px;}
  .grid3, .grid2{grid-template-columns:1fr;}
  .s-hero{padding:48px 0 40px;}
  .s-hero .lead{font-size:16.5px;}
  .s-sec{padding:42px 0;}
  .s-sec h2{font-size:27px;}
  .article p, .article li{font-size:16px;}
  .s-cta .s-btn{flex:1 1 100%;}
  .shots3{grid-template-columns:1fr; gap:40px;}
  .shot-step{max-width:360px; margin:0 auto; width:100%;}
}