/* Guide pages and the /guides/ hub, in the site's original light look (#efeeed paper, #424956 ink, #e2276f accent, Lato + Montserrat). */
* { box-sizing: border-box; }
body { margin: 0; background: #efeeed; color: #424956; font: 400 18px/1.7 "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #e2276f; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; position: sticky; top: 0; background: rgba(239, 238, 237, .92); backdrop-filter: blur(8px); z-index: 5; }
.bar .back { text-decoration: none; font: 700 12px "Lato", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #697377; }
.bar .start, .btn { white-space: nowrap; display: inline-block; text-decoration: none; background: #e2276f; color: #fff; font: 700 15px "Lato", sans-serif; padding: 12px 24px; border-radius: 999px; transition: background .2s, transform .15s; }
.bar .start:hover, .btn:hover { background: #e80f5a; transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #e2276f; outline-offset: 3px; }
main { max-width: 760px; margin: 0 auto; padding: 4px 20px 64px; }
article { background: #fff; border-radius: 18px; padding: 28px 40px 36px; box-shadow: 0 1px 0 #e1e1e1; }
.crumbs { font-size: 13px; color: #8a9096; } .crumbs a { color: #697377; text-decoration: none; }
.head { text-align: center; padding: 10px 0 6px; }
.hero-sticker { display: block; margin: 0 auto -6px; width: 168px; height: 168px; object-fit: contain; }
.kicker { font: 700 12px "Lato", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #e2276f; margin: 8px 0 0; }
h1 { font: 900 clamp(28px, 5vw, 42px)/1.15 "Montserrat", sans-serif; letter-spacing: -.01em; margin: 10px 0 8px; color: #373d48; }
.meta { font-size: 14px; color: #8a9096; margin: 0; }
.answer { background: #fbf3f6; border-left: 4px solid #e2276f; border-radius: 10px; padding: 14px 18px; margin: 22px 0 8px; }
.answer .k { font: 900 11px "Montserrat", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #e2276f; margin: 0 0 4px; }
.answer p:last-child { margin: 0; font-size: 19px; color: #373d48; }
h2 { font: 700 24px/1.25 "Montserrat", sans-serif; color: #373d48; margin: 38px 0 10px; }
h3 { font: 700 19px/1.3 "Montserrat", sans-serif; color: #373d48; margin: 26px 0 6px; }
p, li { color: #4b5260; } strong { color: #373d48; }
ul, ol { padding-left: 22px; } li { margin: 4px 0; }
.cite a { text-decoration: none; font-size: 12px; font-weight: 700; padding: 0 2px; }
.table { overflow-x: auto; margin: 16px 0; border: 1px solid #ecebea; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0efee; vertical-align: top; }
th { font: 700 12px "Lato", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #697377; background: #f8f7f6; }
tr:last-child td { border-bottom: 0; }
.callout { background: #f6f5f4; border-radius: 12px; padding: 14px 18px; margin: 18px 0; font-size: 17px; }
.cta { margin: 34px 0 10px; background: #373d48; color: #fff; border-radius: 16px; padding: 22px 24px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta p { color: #e9e9ec; margin: 0; flex: 1 1 320px; font-size: 16px; } .cta b { color: #fff; }
.faq details { border-bottom: 1px solid #efeeed; padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: #373d48; list-style: none; position: relative; padding-right: 26px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 22px; color: #e2276f; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 8px 0 0; font-size: 17px; }
.sources ol { font-size: 15px; } .sources li span { color: #8a9096; font-size: 13px; }
.related ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.related a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #373d48; font-weight: 700; font-size: 15px; line-height: 1.3; background: #f8f7f6; border-radius: 12px; padding: 8px 12px 8px 6px; }
.related a:hover { background: #fbf3f6; }
.related img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.hub .cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 24px; }
.hub { max-width: 1040px; }
.hub .cards a { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; text-decoration: none; background: #fff; border: 1px solid #e1e1e1; border-radius: 16px; padding: 14px; height: 100%; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hub .cards a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(55, 61, 72, .12); border-color: #e2276f; }
.hub .cards img { grid-row: span 2; width: 96px; height: 96px; object-fit: contain; }
.hub .cards b { font: 700 18px/1.3 "Montserrat", sans-serif; color: #373d48; }
.hub .cards span { font-size: 15px; line-height: 1.5; color: #697377; margin-top: 4px; }
.foot { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; font-size: 13px; color: #8a9096; text-align: center; } .foot a { color: #697377; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  article { padding: 18px 18px 26px; border-radius: 14px; }
  main { padding: 4px 12px 48px; }
  .bar .start { padding: 10px 16px; font-size: 14px; }
  .hero-sticker { width: 132px; height: 132px; }
  .hub .cards { grid-template-columns: 1fr; }
}