/* Guides. Shared by every page under /guides/ so the look stays consistent and the file caches
   once. Mobile first: single column by default, columns only where there is genuinely room. */

/* !! padding-block ONLY, NEVER the shorthand. This element is `class="wrap g-hero"`, and .wrap
   carries `padding: 0 24px`. A shorthand here overrides BOTH axes, so the hero text rendered hard
   against the left edge at x=0 while every card beside it sat at 24px. Nothing overflowed, so an
   overflow check said the page was fine - it was measuring the wrong thing. */
.g-hero { padding-top: 40px; padding-bottom: 26px; }
@media (min-width: 900px) { .g-hero { padding-top: 60px; padding-bottom: 34px; } }
.g-crumb { font-size: .78rem; color: #64748b; margin-bottom: 14px; }
.g-crumb a { color: #64748b; text-decoration: none; }
.g-crumb a:hover { color: #1d4ed8; }
.g-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.5rem); line-height: 1.18; letter-spacing: -.02em; margin: 0 0 14px; }
.g-stand { font-size: 1.02rem; line-height: 1.7; color: #475569; max-width: 44rem; }
.g-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.g-pill { font-size: .74rem; font-weight: 600; color: #1d4ed8; background: rgba(37,99,235,.09);
  border: 1px solid rgba(37,99,235,.18); border-radius: 999px; padding: 5px 11px; }

/* The visual. An inline SVG so it needs no image request, scales on any screen and stays
   readable on a phone, which a screenshot of a dense table never does. */
.g-figure { background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 16px;
  padding: 20px; margin: 26px 0; box-shadow: 0 12px 34px -22px rgba(15,23,42,.5); }
.g-figure svg { width: 100%; height: auto; display: block; }
.g-fig-m { display: block; }
.g-fig-d { display: none; }
@media (min-width: 700px) { .g-fig-m { display: none; } .g-fig-d { display: block; } }
.g-figure figcaption { font-size: .78rem; color: #64748b; margin-top: 12px; line-height: 1.55; }

.g-toc { background: #f8fafc; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 16px 18px; margin: 26px 0; }
.g-toc h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin: 0 0 9px; }
.g-toc ol { margin: 0; padding-left: 18px; }
.g-toc li { margin-bottom: 5px; }
.g-toc a { font-size: .88rem; color: #1d4ed8; text-decoration: none; }
.g-toc a:hover { text-decoration: underline; }

.g-body { max-width: 44rem; }
.g-body > *:last-child { margin-bottom: 0; }
.g-body h2 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.3; margin: 34px 0 12px; letter-spacing: -.01em; }
.g-body h3 { font-size: 1.02rem; margin: 24px 0 8px; }
.g-body p { font-size: .95rem; line-height: 1.78; color: #475569; margin: 0 0 13px; }
.g-body ul, .g-body ol { font-size: .95rem; line-height: 1.78; color: #475569; margin: 0 0 15px; padding-left: 22px; }
.g-body li { margin-bottom: 7px; }
.g-body strong { color: #0f172a; font-weight: 650; }

/* Callouts: a tinted panel with an even, slightly darker border. No accent bar on one edge. */
.g-note { background: rgba(37,99,235,.055); border: 1px solid rgba(37,99,235,.28);
  border-radius: 12px; padding: 15px 17px; margin: 20px 0; }
.g-note p { margin-bottom: 8px; }
.g-note p:last-child { margin-bottom: 0; }
/* The stronger caution reads as DEEPER, not as a different brand. Navy from the palette rather
   than the orange, which sat outside the site's colours entirely. */
.g-warn { background: rgba(15,27,45,.055); border-color: rgba(15,27,45,.30); }
.g-warn p { color: #1e293b; }
.g-warn strong { color: #0f1b2d; }

/* Fact cards. The competitor pages all do a version of this and it works: the number a reader
   came for, visible without reading a paragraph to find it. */
.g-facts { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 22px 0; }
@media (min-width: 640px) { .g-facts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.g-fact { background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 14px; padding: 16px; }
.g-fact b { display: block; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.45rem; color: #0f172a; line-height: 1.1; }
.g-fact span { display: block; font-size: .8rem; color: #64748b; margin-top: 6px; line-height: 1.5; }

/* A table that becomes cards on a phone. A wide table squeezed to 390px is unreadable, and
   horizontal scroll inside body copy is worse. */
.g-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; }
.g-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: #64748b; padding: 9px 10px; border-bottom: 1px solid rgba(15,23,42,.12); }
.g-table td { padding: 11px 10px; border-bottom: 1px solid rgba(15,23,42,.07); color: #475569; line-height: 1.6; }
.g-table td:first-child { color: #0f172a; font-weight: 600; }
@media (max-width: 640px) {
  .g-table, .g-table tbody, .g-table tr, .g-table td { display: block; width: 100%; }
  .g-table thead { display: none; }
  .g-table tr { background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
  .g-table td { border: 0; padding: 4px 0; }
  .g-table td::before { content: attr(data-l); display: block; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .06em; color: #94a3b8; margin-bottom: 2px; }
  .g-table td:first-child::before { content: none; }
}

.g-faq { margin: 34px 0 0; }
.g-faq details { background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.g-faq summary { font-size: .93rem; font-weight: 600; color: #0f172a; cursor: pointer; list-style: none; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: '+'; float: right; color: #94a3b8; font-weight: 400; }
.g-faq details[open] summary::after { content: '\2212'; }
.g-faq p { font-size: .9rem; line-height: 1.72; color: #475569; margin: 10px 0 0; }

.g-sec-h { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: 44px 0 4px; letter-spacing: -.01em; }
.g-sources { background: #f8fafc; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 16px 18px; margin: 30px 0; }
.g-sources h2 { font-size: .8rem; margin: 0 0 8px; }
.g-sources ul { list-style: none; margin: 0; padding: 0; }
.g-sources li { margin-bottom: 6px; }
.g-sources a { font-size: .82rem; color: #1d4ed8; overflow-wrap: anywhere; }
.g-sources p { font-size: .76rem; color: #64748b; margin: 10px 0 0; line-height: 1.55; }

.g-cta { background: linear-gradient(135deg, #0f1b2d, #16233a); border-radius: 18px;
  padding: 30px 26px 32px; margin: 44px 0 56px; color: #fff; }
@media (min-width: 900px) { .g-cta { padding: 38px 36px 40px; } }
/* The button is the last thing in the panel and was sitting on its bottom edge, with the panel
   itself flush against the dark footer - two dark blocks touching, which read as one broken one. */
.g-cta .btn { margin-top: 4px; }
/* Every guide page ends with a section, and a section that ends where the footer begins looks
   like a rendering fault rather than a layout. */
main { padding-bottom: 8px; }
.g-cta h2 { font-size: 1.25rem; margin: 0 0 8px; color: #fff; }
.g-cta p { font-size: .92rem; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0 0 16px; max-width: 34rem; }

/* Related guides. Cards that look clickable at rest, same reasoning as the in app help centre. */
.g-rel { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 18px 0 56px; }
@media (min-width: 720px) { .g-rel { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.g-rel a { display: block; background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 14px;
  padding: 16px; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.g-rel a:hover { border-color: rgba(37,99,235,.45); transform: translateY(-2px); }
.g-rel b { display: block; font-size: .9rem; color: #0f172a; line-height: 1.35; }
.g-rel span { display: block; font-size: .8rem; color: #64748b; margin-top: 6px; line-height: 1.5; }
.g-rel em { display: inline-block; font-style: normal; font-size: .78rem; font-weight: 600; color: #1d4ed8; margin-top: 10px; }


/* "We can help" panel. Reassurance belongs next to the rule that worries people, not only on a
   contact page they would have to go looking for. */
.g-help { display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1px solid rgba(37,99,235,.28); border-radius: 14px; padding: 18px; margin: 26px 0; }
.g-help-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; background: rgba(37,99,235,.10); color: #1d4ed8; }
.g-help-ic svg { width: 20px; height: 20px; }
.g-help b { display: block; font-size: .92rem; color: #0f172a; margin-bottom: 5px; }
.g-help p { font-size: .88rem; line-height: 1.7; color: #475569; margin: 0 0 10px; }
.g-help a { font-size: .85rem; font-weight: 600; color: #1d4ed8; text-decoration: none; }
.g-help a:hover { text-decoration: underline; }
@media (max-width: 560px) { .g-help { flex-direction: column; } }