/* Editorial pages and the guide cards on the generator homepage. */
.site-navigation { display:flex; align-items:center; gap:18px; margin-left:auto; padding-right:26px; }
.site-navigation a { color:#59645a; font-size:12px; font-weight:650; text-decoration:none; text-underline-offset:4px; }
.site-navigation a:hover, .site-navigation a[aria-current="page"] { color:#263b2c; text-decoration:underline; }
.brand-link { color:inherit; text-decoration:none; }
.brand-link:focus-visible, .site-navigation a:focus-visible, .guide-card:focus-visible, .article-link:focus-visible { outline:3px solid #98b09d; outline-offset:4px; border-radius:3px; }

.guides-section { padding:42px 0 12px; }
.guides-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:23px; }
.guides-heading h2 { margin:8px 0 8px; font-size:25px; letter-spacing:-.85px; }
.guides-heading p { max-width:500px; color:#7d827c; font-size:13px; line-height:1.6; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.guide-card { display:flex; flex-direction:column; min-height:205px; padding:23px 22px 19px; border:1px solid #e5e8e2; border-radius:13px; background:#fff; color:inherit; text-decoration:none; transition:box-shadow .18s,border-color .18s,transform .18s; }
.guide-card:hover { border-color:#b7c9b9; transform:translateY(-2px); box-shadow:0 8px 25px #293d2b0c; }
.guide-card-number { color:#93a194; font-size:11px; font-weight:750; letter-spacing:1px; }
.guide-card h3 { margin:16px 0 9px; color:#2f3730; font-size:16px; font-weight:710; letter-spacing:-.35px; line-height:1.35; }
.guide-card p { color:#858b83; font-size:12px; line-height:1.65; }
.guide-card-action { margin-top:auto; padding-top:22px; font-size:11px; color:#3b6045; font-weight:730; }

/* Guide articles share the main app's typography, colors, header and footer. */
.article-shell { max-width:1010px; padding:0 36px; margin:0 auto; }
.article-breadcrumbs { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:27px 0 30px; color:#949a92; font-size:12px; }
.article-breadcrumbs a { color:#66776b; text-underline-offset:3px; }
.article-hero { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:50px; align-items:center; padding:17px 0 44px; border-bottom:1px solid var(--line); }
.article-hero h1 { max-width:650px; margin:15px 0 18px; font-size:clamp(32px,4.7vw,48px); line-height:1.12; letter-spacing:-1.85px; }
.article-dek { max-width:650px; color:#777f77; font-size:17px; line-height:1.6; }
.article-meta { margin-top:19px; color:#9b9e98; font-size:11px; }
.article-illustration { display:flex; justify-content:center; align-items:center; min-height:280px; padding:25px; background:#edf0ea; border:1px solid #e4e9e1; border-radius:19px; }
.sample-sheet { width:157px; height:236px; background:#fff; padding:10px; box-shadow:0 7px 24px #36453621, 0 2px 5px #36453612; display:grid; grid-template-columns:repeat(var(--sample-cols,2),minmax(0,1fr)); grid-template-rows:repeat(var(--sample-rows,3),minmax(0,1fr)); gap:5px; }
.sample-sheet span { position:relative; overflow:hidden; background:linear-gradient(140deg,#e3e4d8 30%,#a6b9a9 30%,#a6b9a9 60%,#789987 60%); }
.sample-sheet span::before { content:""; position:absolute; width:38%; aspect-ratio:1; border-radius:50%; background:#f8e5b4; top:13%; right:14%; }
.article-columns { display:grid; grid-template-columns:minmax(0,1fr) 255px; align-items:start; gap:65px; padding:40px 0 54px; }
.article-body { min-width:0; color:#475049; font-size:15px; line-height:1.82; }
.article-body h2 { margin:34px 0 12px; color:#252f28; font-size:23px; line-height:1.3; letter-spacing:-.7px; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:26px 0 9px; color:#2f3a31; font-size:17px; letter-spacing:-.3px; }
.article-body p + p { margin-top:15px; }
.article-body ul,.article-body ol { margin:13px 0 19px; padding-left:23px; }
.article-body li { margin-bottom:10px; padding-left:3px; }
.article-body strong { color:#2f382f; font-weight:700; }
.article-body a { color:#315d3e; text-underline-offset:3px; }
.article-tip { margin:26px 0; padding:18px 20px; border-left:3px solid #779680; border-radius:0 9px 9px 0; background:#f3f6f1; color:#4e6052; font-size:14px; line-height:1.7; }
.article-tip strong { display:block; margin-bottom:4px; }
.article-aside { position:sticky; top:24px; }
.preset-panel { border:1px solid #e1e7de; border-radius:14px; padding:22px; background:white; box-shadow:0 3px 15px #1d2c1e06; }
.preset-panel .step-kicker { font-size:10px; }
.preset-panel h2 { margin:9px 0 21px; font-size:18px; letter-spacing:-.4px; }
.preset-line { display:flex; justify-content:space-between; gap:9px; padding:11px 0; border-top:1px solid #eff1ed; font-size:12px; }
.preset-line span { color:#818a7e; }
.preset-line strong { color:#344539; font-weight:660; text-align:right; }
.preset-cta { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:20px; width:100%; min-height:46px; border-radius:8px; color:white; background:#34453a; text-decoration:none; font-size:12px; font-weight:720; }
.preset-cta:hover { background:#26382b; }
.preset-note { margin-top:13px; font-size:11px; line-height:1.5; color:#969f95; }
.article-bottom { border-top:1px solid var(--line); padding:35px 0 55px; }
.article-bottom-heading { display:flex; gap:14px; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.article-bottom h2 { font-size:21px; }
.article-related { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.article-related a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:86px; padding:19px; border:1px solid #e6eae4; border-radius:10px; background:white; color:#354438; text-decoration:none; font-size:13px; font-weight:690; line-height:1.5; }
.article-related a:hover { border-color:#a7bda8; }
.article-related a span { font-size:18px; color:#8ca68e; }
@media(max-width:800px) {
  .article-shell { padding:0 24px; }
  .article-hero { grid-template-columns:minmax(0,1fr) 195px; gap:25px; }
  .article-illustration { min-height:234px; padding:17px; }
  .sample-sheet { width:127px; height:191px; }
  .article-columns { grid-template-columns:minmax(0,1fr) 215px; gap:30px; }
  .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .site-navigation { gap:12px; padding-right:15px; }
  .site-navigation a { font-size:11px; }
  .article-shell { padding:0 17px; }
  .article-breadcrumbs { margin:20px 0 23px; }
  .article-hero { display:block; padding:5px 0 29px; }
  .article-hero h1 { font-size:clamp(29px,8vw,37px); }
  .article-dek { font-size:15px; }
  .article-illustration { display:none; }
  .article-columns { display:flex; flex-direction:column; gap:30px; padding:29px 0 41px; }
  .article-aside { position:static; order:-1; width:100%; }
  .preset-panel { padding:18px; }
  .preset-panel h2 { margin-bottom:12px; }
  .preset-line { padding:8px 0; }
  .preset-cta { min-height:49px; }
  .article-body { font-size:14px; line-height:1.8; }
  .article-body h2 { font-size:21px; margin-top:27px; }
  .article-bottom { padding:24px 0 34px; }
  .article-related { grid-template-columns:1fr; }
  .guides-section { padding:34px 0 4px; }
  .guides-heading h2 { font-size:24px; }
  .guide-grid { grid-template-columns:1fr; }
  .guide-card { min-height:0; padding:20px; }
  .guide-card h3 { margin-top:11px; }
  .guide-card-action { padding-top:12px; }
}
@media(prefers-reduced-motion:reduce) { .guide-card { transition:none; } }
@media print { .site-header, .article-aside, .article-bottom, .site-footer { display:none!important; } .article-shell { max-width:none; padding:0; } .article-columns { display:block; } .article-hero { display:block; } .article-illustration { display:none; } }