/* Reference guides around the Miluim page (miluim-*.html). They load after alenu.css and borrow its header, FAQ,
   closing, footer and sticky bar. The selling pages speak in labels; a guide answers a search, so it may use short
   paragraphs, literal headings, tables and sources. Rules for these pages are in DESIGN.md under "Miluim guides". */

/* ---------- top band: where you are, the question, the short answer ---------- */
.g-hero{padding:0 24px 20px}
.g-shell{width:min(100%,1464px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:30px clamp(28px,5vw,72px) 38px;border-radius:var(--r-shell);background:var(--blue);color:#fff}
.g-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 18px;padding:0;list-style:none;font-size:15px;font-weight:500;color:#dbe8ff}
.g-crumbs li{display:inline-flex;align-items:center;gap:8px}
.g-crumbs li:not(:last-child)::after{content:"/";color:#a9c6f7}
.g-crumbs a{color:#fff}
.g-shell h1{max-width:21ch;font-size:clamp(36px,4.4vw,62px);font-weight:900;line-height:1.1;letter-spacing:-.025em}
.g-shell h1 em{color:var(--yellow);font-style:normal}
.g-answer{max-width:58ch;margin-top:16px;font-size:21px;font-weight:500;line-height:1.5}
.g-meta{margin-top:14px;font-size:15px;color:#dbe8ff}
.g-art{width:clamp(180px,22vw,320px);filter:drop-shadow(0 20px 26px rgb(0 0 0 / 26%))}

/* ---------- article and its side card ---------- */
.g-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:72px;align-items:start;padding-block:44px 72px}
.g-article{min-width:0}
.g-article>section+section{margin-top:44px}
.g-article h2{font-size:clamp(27px,2.6vw,36px);font-weight:900;line-height:1.2;letter-spacing:-.02em;scroll-margin-top:24px}
.g-article h3{margin-top:24px;font-size:21px;font-weight:800}
.g-article p,.g-article li{font-size:18px;line-height:1.7;color:var(--ink-soft)}
.g-article p{max-width:68ch;margin-top:12px}
.g-article a{color:var(--blue)}
.g-article strong{color:var(--ink);font-weight:700}
.g-article ul:not([class]){max-width:66ch;margin:12px 0 0;padding:0;list-style:none}
.g-article ul:not([class]) li{position:relative;margin-top:8px;padding-inline-start:26px}
.g-article ul:not([class]) li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--blue)}

.g-side{position:sticky;top:24px;display:grid;gap:16px}
.g-card{padding:22px 22px 24px;border-radius:var(--r-card);background:var(--soft)}
.g-card>b{display:block;font-size:20px;font-weight:800;line-height:1.3}
.g-card p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.g-card .button{width:100%;margin-top:14px;justify-content:space-between;font-size:17px}
.g-card .alt{display:block;margin-top:10px;font-size:15px;color:var(--blue)}
.g-toc ol{margin:8px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.4}
.g-toc li{margin-top:8px}
.g-toc a{color:var(--ink-soft);text-decoration:none}
.g-toc a:hover,.g-toc a:focus-visible{color:var(--blue);text-decoration:underline}

/* ---------- the short answer: facts first, for readers and for snippets ---------- */
.g-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.g-key div{min-width:0;padding:16px 18px;border-radius:var(--r-card);background:var(--soft)}
.g-key dt{font-size:15px;font-weight:700;line-height:1.35;color:var(--muted)}
.g-key dd{margin:4px 0 0;font-size:24px;font-weight:900;line-height:1.2;letter-spacing:-.015em;color:var(--blue)}
.g-key dd small{display:block;margin-top:4px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-soft)}

/* ---------- steps ---------- */
.g-steps{margin:18px 0 0;padding:0;list-style:none;counter-reset:g}
.g-steps li{position:relative;max-width:66ch;margin-top:14px;padding-inline-start:50px;counter-increment:g}
.g-steps li::before{content:counter(g);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:17px;font-weight:900;line-height:1}
.g-steps b{display:block;font-weight:800;color:var(--ink)}

/* ---------- callout ---------- */
.g-note{max-width:68ch;margin-top:18px;padding:14px 18px;border-inline-start:4px solid var(--yellow);border-radius:10px;background:var(--sun)}
.g-note p{margin:0;font-size:17px}

/* ---------- tables: rows on a screen, cards on a phone ---------- */
.g-table-box{margin-top:18px}
.g-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.g-table th{padding:10px 12px;border-bottom:2px solid var(--line-strong);font-size:15px;font-weight:800;text-align:start;color:var(--muted);white-space:nowrap}
.g-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
.g-table td:first-child{font-weight:800;color:var(--ink)}
.g-table a{color:var(--blue)}
.g-table .none{color:var(--muted)}

/* ---------- sources ---------- */
.g-sources ol{max-width:68ch;margin:12px 0 0;padding-inline-start:22px}
.g-sources li{margin-top:6px;font-size:16px;line-height:1.5;color:var(--muted)}
.g-sources a{color:var(--blue)}

/* ---------- related guides ---------- */
.g-related{padding-block:60px;background:var(--soft)}
.g-related h2{font-size:clamp(27px,2.6vw,36px);font-weight:900;letter-spacing:-.02em}
.g-related ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 0;padding:0;list-style:none}
.g-related a{display:flex;align-items:center;gap:12px;height:100%;padding:14px 16px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card);color:var(--ink);font-size:17px;font-weight:800;line-height:1.3;text-decoration:none;transition:transform .2s var(--ease-out),color .16s}
.g-related a:hover,.g-related a:focus-visible{color:var(--blue);transform:translateY(-2px)}
.g-related img{flex:none;width:52px;height:52px;object-fit:contain}

/* ---------- FAQ and closing inside a guide ---------- */
.g-faq .faq{margin-top:14px}
.g-faq .faq summary{font-size:18px;padding:16px 0}
.g-closing .closing-shell{grid-template-columns:minmax(0,1fr) auto;padding-block:34px}
.g-closing h2{font-size:clamp(30px,3.2vw,46px)}
.g-closing p{margin-top:8px;font-size:19px;color:#eef4ff}
.g-closing .button{margin-top:0;min-width:300px}

@media (max-width:1040px){
  .g-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .g-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .g-hero{padding:0 0 4px}
  .g-shell{grid-template-columns:minmax(0,1fr);gap:0;padding:18px 20px 26px;border-radius:0 0 23px 23px}
  .g-crumbs{margin-bottom:12px;font-size:14px}
  .g-shell h1{font-size:clamp(31px,9.2vw,40px)}
  .g-answer{margin-top:10px;font-size:18px}
  .g-meta{font-size:14px}
  .g-art{display:none}
  .g-layout{padding-block:26px 40px;gap:30px}
  .g-article>section+section{margin-top:32px}
  .g-article p,.g-article li{font-size:17px;line-height:1.65}
  .g-article h3{margin-top:18px;font-size:19px}
  .g-key{grid-template-columns:minmax(0,1fr)}
  .g-key div{padding:12px 16px}
  .g-key dd{font-size:21px}
  .g-side{grid-template-columns:minmax(0,1fr)}
  .g-steps li{padding-inline-start:44px}
  .g-steps li::before{width:32px;height:32px;font-size:16px}
  .g-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .g-table,.g-table tbody,.g-table tr,.g-table td{display:block;width:100%}
  .g-table tr{margin-top:12px;padding:12px 14px;border-radius:var(--r-card);background:var(--soft)}
  .g-table td{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border:0;text-align:end}
  .g-table td:first-child{padding-bottom:6px;font-size:18px;text-align:start}
  .g-table td:not(:first-child):not([data-label]){display:block;text-align:start}
  .g-table td:not(:first-child)::before{content:attr(data-label);flex:none;max-width:45%;font-weight:700;text-align:start;color:var(--muted)}
  .g-related{padding-block:38px}
  .g-related ul{grid-template-columns:minmax(0,1fr)}
  .g-closing .closing-shell{grid-template-columns:minmax(0,1fr);gap:16px;padding:26px 20px}
  .g-closing .button{min-width:0;width:100%}
}

/* ---------- the commanders' calculator ---------- */
.g-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:18px;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)}
.g-calc-in{display:grid;align-content:center;gap:6px;padding:22px 24px;background:#fff}
.g-calc label{font-size:16px;font-weight:700;color:var(--ink)}
.g-calc input{width:100%;min-height:50px;margin-bottom:8px;padding:8px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.g-calc input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.g-calc-out{display:grid;align-content:center;padding:22px 24px;background:var(--blue);color:#fff}
.g-calc-out p{margin:0;max-width:none;font-size:17px;font-weight:700;color:#dbe8ff}
.g-calc-out output{display:block;margin:4px 0;font-size:clamp(40px,4.4vw,56px);font-weight:900;line-height:1.1;letter-spacing:-.02em;color:var(--yellow);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .g-calc{grid-template-columns:minmax(0,1fr)}
  .g-calc-in,.g-calc-out{padding:18px}
}