/* KaddieIQ Flight Plan guide. Sits on top of kiq-page.css (hero, card, buttons) and
 * kiq-legal.css (the contents list beside a long document, heading anchors, print
 * rules). Adds only what a how-to guide needs: friendlier section headings,
 * phone-screenshot figures that follow the visitor's theme, tables and callouts.
 * Tokens only, so light and dark both work.
 */

.fg-hero-actions{justify-content:center;margin-top:clamp(14px,2vw,20px)}

.fg-doc{padding:clamp(22px,4.4vw,52px)}
.fg-intro{max-width:70ch;margin-bottom:clamp(8px,2vw,16px)}
.fg-lede{margin:0 0 .9em;font:400 clamp(16.5px,1.9vw,19px)/1.65 var(--body);color:var(--ink)}
.fg-lede strong{color:var(--ink)}

/* section headings: sentence case, numbered, bigger than the legal documents' */
.fg-body{max-width:none;counter-reset:fgsec}
.fg-body > h2{counter-increment:fgsec;display:flex;align-items:center;gap:.7em;margin:2.4em 0 .7em;padding-top:1.6em;border-top:1px solid var(--hair);
  font:var(--fw-display) clamp(22px,3vw,30px)/1.2 var(--head);letter-spacing:-.015em;text-transform:none}
.fg-body > h2:first-child{margin-top:.4em}
.fg-body > h2::before{content:counter(fgsec);flex:none;display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;
  background:var(--gold-fill);color:var(--on-gold);font:var(--fw-label) .6em/1 var(--head)}
.fg-body > h2 .lg-anchor{position:static;margin-left:.4em;font-size:.6em}
.fg-body h3{margin:1.8em 0 .5em;font:var(--fw-title) 19px/1.3 var(--head);letter-spacing:0;color:var(--gold-hi)}
.fg-body p,.fg-body li{font-size:16.5px;line-height:1.72}
.fg-body ol{margin:0 0 1.2em;padding-left:1.5em;color:var(--soft)}
.fg-body ol li{margin-bottom:.55em;padding-left:.2em}
.fg-body ol li::marker{color:var(--gold-hi);font-weight:700}
.fg-body code{font:500 .92em/1 ui-monospace,monospace}
.fg-body :where(h2,h3):target{animation:none}

/* the numbered points under the dial picture: a touch more room */
.fg-body h2 ~ ol{max-width:68ch}

.fg-sign{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--hair);text-align:center;font:var(--fw-title) 15px/1.5 var(--head);color:var(--gold-hi)}
.fg-sign em{font-style:normal;letter-spacing:.04em}

/* callouts and questions */
.fg-note{margin:1.4em 0;padding:16px 20px;border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:var(--r,14px);background:var(--panel)}
.fg-note p{margin:0}
.fg-q{margin:0 0 .8em;padding:14px 18px;border:1px solid var(--hair);border-radius:var(--r,14px);background:var(--panel)}
.fg-q p{margin:0}
.fg-q strong{display:block;margin-bottom:.25em;font:var(--fw-title) 16px/1.4 var(--head);color:var(--gold-hi)}

/* tables (Free vs Pro) */
.fg-table{margin:1.3em 0 1.6em;overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r,14px);background:var(--panel)}
.fg-table table{width:100%;border-collapse:collapse;font-size:15px}
.fg-table th,.fg-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hair);color:var(--soft);vertical-align:top}
.fg-table thead th{font:var(--fw-label) 11px/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.fg-table tbody th{font-weight:500;color:var(--ink)}
.fg-table tbody tr:last-child th,.fg-table tbody tr:last-child td{border-bottom:0}
.fg-table td strong{color:var(--gold-hi)}

/* screenshots */
.fg-shots{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,40px);margin:1.6em 0 2em}
.fg-shot{margin:0;width:min(100%,300px)}
.fg-frame{border:1px solid var(--hair);border-radius:30px;overflow:hidden;line-height:0;background:var(--bg-2);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.6),0 0 0 6px color-mix(in srgb,var(--ink) 5%,transparent)}
.fg-frame img{display:block;width:100%;height:auto}

/* themed pairs: follow the site theme; the Light / Dark switch overrides it per picture */
.fg-shot[data-themed] .is-dark{display:none}
:root[data-theme="dark"] .fg-shot[data-themed] .is-light{display:none}
:root[data-theme="dark"] .fg-shot[data-themed] .is-dark{display:block}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"] .fg-shot[data-themed] .is-light{display:none}
  :root[data-theme="system"] .fg-shot[data-themed] .is-dark{display:block}
}
:root .fg-shot[data-themed][data-view="light"] .is-light{display:block}
:root .fg-shot[data-themed][data-view="light"] .is-dark{display:none}
:root .fg-shot[data-themed][data-view="dark"] .is-light{display:none}
:root .fg-shot[data-themed][data-view="dark"] .is-dark{display:block}

.fg-switch{display:none;justify-content:center;gap:4px;margin:14px auto 0;width:fit-content;padding:4px;border:1px solid var(--hair);border-radius:999px;background:var(--panel)}
.fg-js .fg-switch{display:flex}
.fg-switch button{border:0;cursor:pointer;padding:6px 16px;border-radius:999px;background:transparent;color:var(--soft);font:var(--fw-title) 12.5px/1 var(--head)}
.fg-switch button:hover{color:var(--ink)}
.fg-switch button[aria-pressed="true"]{background:var(--gold-fill);color:var(--on-gold)}
.fg-switch button:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:2px}

@media (max-width:640px){
  .fg-body p,.fg-body li{font-size:16px}
  .fg-body > h2{padding-top:1.3em}
}
@media print{
  .fg-switch,.fg-hero-actions{display:none!important}
  .fg-body > h2::before{background:#ddd;color:#000}
  .fg-note,.fg-q,.fg-table,.fg-frame{background:none;box-shadow:none}
  .fg-shot{break-inside:avoid}
  .fg-sign,.fg-body h3,.fg-q strong{color:#000}
}

.pg-hero h1{text-wrap:balance}

/* let the single column shrink to the screen: the Free / Pro table scrolls inside its own box */
.lg-wrap{grid-template-columns:minmax(0,1fr)}
@media (max-width:1039px){.lg-cols{grid-template-columns:minmax(0,1fr)}}

@media (max-width:640px){.fg-table table{font-size:13.5px}.fg-table th,.fg-table td{padding:10px 9px}.fg-table td{white-space:nowrap}.fg-table thead th{letter-spacing:.06em}}