/* Website Clarity — guide pages. Extends home.css (the locked design system).
   Uses only home.css variables: no new colours, no serif, no gradients in the design.
   (The gradients below are scroll shadows on tables, not decoration.) */

/* ---- breadcrumb ---- */
.breadcrumb{padding:1rem 0 0;font-size:.88rem;color:var(--grey);display:flex;flex-wrap:wrap;align-items:center}
.breadcrumb a{color:var(--grey);text-decoration:none}
.breadcrumb a:hover{color:var(--indigo)}
.breadcrumb span{margin:0 .45rem}

/* ---- hero ---- */
.ghero{padding:2.2rem 0 2rem;border-bottom:1px solid var(--line)}
.ghero h1{font-size:clamp(1.9rem,7vw,3.4rem);max-width:20ch;overflow-wrap:break-word}
.ghero .lede{max-width:60ch;font-size:1.08rem;color:var(--ink);margin-bottom:1.4rem}
.gmeta{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;font-size:.88rem;color:var(--grey)}
.gmeta span{display:inline-flex;align-items:flex-start;gap:.45rem;max-width:100%}
.gmeta svg{flex:0 0 auto;margin-top:.28em}
@media(min-width:700px){.ghero{padding:2.6rem 0 2.2rem}.ghero .lede{font-size:1.18rem}}

/* ---- layout ----
   minmax(0,1fr) at EVERY width: without it the grid column sizes to its widest
   child, so a wide table drags the whole page past the screen edge on a phone. */
.glayout{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem;padding:2rem 0 3rem;align-items:start}
@media(min-width:920px){.glayout{grid-template-columns:minmax(0,1fr) 320px;gap:3.4rem;padding:2.8rem 0 4rem}}

/* ---- article body ---- */
.gbody{min-width:0}
.gbody h2{font-size:clamp(1.35rem,4.6vw,2rem);margin:2.2rem 0 .7rem;overflow-wrap:break-word;scroll-margin-top:90px}
.gbody h2:first-child{margin-top:0}
.gbody h3{margin:1.6rem 0 .5rem;overflow-wrap:break-word;scroll-margin-top:90px}
.gbody p{max-width:66ch}
.gbody ul,.gbody ol{max-width:66ch;padding-left:1.15rem;margin:0 0 1.1em}
.gbody li{margin-bottom:.45rem}
.gbody a{color:var(--indigo);font-weight:600;text-decoration:underline;text-decoration-color:var(--indigo-pale);text-underline-offset:3px;overflow-wrap:break-word}
.gbody a:hover{text-decoration-color:var(--indigo)}
@media(min-width:700px){.gbody h2{margin:2.6rem 0 .7rem}.gbody h3{margin:1.8rem 0 .5rem}}

/* ---- callout ---- */
.callout{background:var(--teal-pale);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:1.1rem 1.2rem;margin:1.6rem 0;max-width:66ch}
.callout p{margin:0;max-width:none}
.callout p+p{margin-top:.7rem}
.callout ul{margin:.6rem 0 0;max-width:none}

/* ---- tables ----
   Columns kept wide enough to read a sentence in; the table scrolls inside its own
   box. The background gradients are scroll shadows: they appear on whichever side
   there is more table to see, and vanish at each end. No markup needed. */
.tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6rem 0;max-width:100%;
  scroll-snap-type:x proximity;
  background:
    linear-gradient(to right,var(--bg) 30%,rgba(252,251,249,0)) left center,
    linear-gradient(to right,rgba(252,251,249,0),var(--bg) 70%) right center,
    radial-gradient(farthest-side at 0 50%,rgba(20,23,26,.14),rgba(20,23,26,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(20,23,26,.14),rgba(20,23,26,0)) right center;
  background-repeat:no-repeat;
  background-size:32px 100%,32px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
.ctable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px;background:transparent}
.ctable th{background:var(--indigo);color:#fff;padding:.6rem .7rem;text-align:left;font-weight:600;font-size:.84rem;letter-spacing:.02em;scroll-snap-align:start}
.ctable td{padding:.65rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;scroll-snap-align:start}
.ctable tr:last-child td{border-bottom:none}
.ctable tr:nth-child(even) td{background:var(--bg)}
.ctable td:first-child,.ctable th:first-child{min-width:7.5rem}
.ctable td:first-child{font-weight:600}
@media(min-width:700px){.ctable{font-size:.97rem}.ctable th,.ctable td{padding:.7rem .85rem}.ctable th{font-size:.88rem}}
@media(min-width:920px){.ctable{min-width:440px}}

/* ---- FAQ ---- */
.faqs{display:grid;gap:1rem;margin:.6rem 0 0;max-width:66ch}
.faq{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;background:var(--white)}
.faq dt{font-weight:600;letter-spacing:-.01em;font-size:1.02rem;margin-bottom:.45rem;overflow-wrap:break-word}
.faq dd{margin:0;color:var(--grey)}
@media(min-width:700px){.faq{padding:1.2rem 1.35rem}.faq dt{font-size:1.05rem}}

/* ---- sidebar ----
   Static and full width on a phone (it sits under the article); sticky alongside on desktop. */
.gside{display:grid;gap:1.2rem;min-width:0}
@media(min-width:920px){.gside{position:sticky;top:94px}}
.gcta{background:var(--indigo);color:#fff;border-radius:20px;padding:1.4rem}
.gcta h3{color:#fff;margin-bottom:.5rem;font-size:1.15rem}
.gcta p{color:rgba(255,255,255,.78);font-size:.95rem;margin-bottom:.9rem;max-width:none}
.gcta ul{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.5rem}
.gcta li{font-size:.9rem;color:rgba(255,255,255,.88);padding-left:1.1rem;position:relative;line-height:1.5}
.gcta li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.gcta .btn{width:100%;justify-content:center;margin-bottom:.6rem;text-align:center}
.gcta .btn-out{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);margin-bottom:0}
.gcta .btn-out:hover{background:rgba(255,255,255,.12)}
@media(min-width:700px){.gcta{padding:1.6rem}}

.gwho{border:1px solid var(--line);border-radius:16px;padding:1.3rem;background:var(--white)}
.gwho h4{margin:0 0 .5rem;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.gwho p{font-size:.9rem;color:var(--grey);margin-bottom:.8rem;max-width:none}
.gwho .links{display:flex;flex-wrap:wrap;gap:.45rem}
.gwho .links a{font-size:.85rem;padding:.35rem .8rem;border:1px solid var(--line);border-radius:20px;font-weight:600;text-decoration:none;color:var(--ink)}
.gwho .links a:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---- closing band ---- */
.gband{background:var(--indigo);color:#fff;padding:2.6rem 0}
.gband-in{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:center}
.gband h2{color:#fff;margin-bottom:.5rem;font-size:clamp(1.35rem,4.6vw,2.15rem)}
.gband p{color:rgba(255,255,255,.78);max-width:54ch;margin:0}
.gband .acts{display:grid;gap:.7rem}
.gband .btn{justify-content:center;text-align:center}
.gband .btn-out{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.gband .btn-out:hover{background:rgba(255,255,255,.12)}
@media(min-width:760px){.gband{padding:3.4rem 0}.gband-in{grid-template-columns:minmax(0,1fr) auto;gap:2rem}.gband .btn{justify-content:flex-start}}

/* ---- safety net ----
   Nothing in a guide may be wider than the screen except a table, which scrolls
   inside its own container. */
.gbody img,.gbody iframe,.gbody pre{max-width:100%}
.gbody pre{overflow-x:auto}
/* A long URL or key inside <code> has no break opportunity, so it pushed the
   whole page 2px past a 390px phone. Let it break anywhere. 15 Sep 2026. */
.gbody code{overflow-wrap:anywhere;word-break:break-word}
.gbody a{overflow-wrap:anywhere}