/* No Show Rescue landing page styles, v1.2.
   Deploy target: served as /software-assets/no-show-rescue.css under the
   parent kollazsoftware.com app and its strict Content Security Policy.
   This is the page's only stylesheet: no inline styles exist in the HTML.
   Fonts are self-hosted by the parent host (Font Embedding Law): the
   @font-face block below mirrors the parent software.css declarations
   exactly, same families, same /software-assets/ woff2 files, so the
   served page makes zero font requests to any third-party origin.
   Palette and layout carry over from v1.1; headings no longer name
   Noto Serif Display, which the parent host does not serve. */

@font-face {
  font-family: "Carlito";
  src: url("/software-assets/carlito-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/software-assets/carlito-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/software-assets/noto-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/software-assets/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/software-assets/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  --cream:#FDECCB;
  --surface:#FFFFFF;
  --tint:#E6F4EE;
  --ink:#1A1A1A;
  --secondary:#5D584F;
  --border:#C4B89F;
  --border-soft:#E0D2B5;
  --emerald:#005E47;
  --emerald-dark:#004433;
  --gold:#C9A227;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans",Carlito,sans-serif;font-size:18px;line-height:1.5}
img{max-width:100%;height:auto}
h1,h2{font-family:"Noto Sans",Carlito,sans-serif;font-weight:700;line-height:1.25;margin:0}
h1{font-size:clamp(36px,6vw,48px)}
h2{font-size:30px;margin:0 0 16px}
h3{font-family:"Noto Sans",Carlito,sans-serif;font-size:20px;line-height:1.25;margin:0 0 8px}
p{margin:0 0 16px;max-width:65ch}
ul{margin:0;padding:0 0 0 24px}
li{margin:0 0 12px}
li:last-child{margin:0}
a{color:var(--emerald)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
[hidden]{display:none !important}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* Skip link, parent pattern. */
.skip-link{position:absolute;left:16px;top:-80px;z-index:60;background:var(--emerald-dark);color:var(--cream);padding:12px 18px;font-weight:700;text-decoration:none;border-radius:0 0 10px 10px}
.skip-link:focus{top:0;color:var(--cream)}

/* Header: dark emerald ground, light Gemstone master, as in v1.1.
   Brand clear space comes from the header and link padding around
   the mark; the wordmark renders 168px wide (floor is 90px). */
.site-header{background:var(--emerald-dark);color:var(--cream)}
.header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;padding:10px 12px;text-decoration:none}
.brand img{width:168px;display:block}
.header-nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.header-nav a{color:var(--cream);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:48px;display:inline-flex;align-items:center;padding:0 8px}
.header-nav a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.accent-bar{height:4px;background:var(--gold)}

/* Hero. */
.hero{background:var(--cream);padding:64px 0 48px;border-bottom:1px solid var(--border)}
.hero h1{max-width:20ch;margin:0 0 24px}
.hero p{font-size:18px;max-width:65ch;margin:0 0 32px}

/* Buttons: full state set (default, hover, focus-visible, active,
   disabled). Loading and selected do not apply: every button on this
   page is a link or a one-shot control that never loads or selects. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:10px;border:1px solid var(--emerald);background:var(--emerald);color:var(--surface);font-size:18px;font-weight:700;text-decoration:none;cursor:pointer;font-family:"Noto Sans",Carlito,sans-serif}
.btn:hover{background:var(--emerald-dark);border-color:var(--emerald-dark)}
.btn:active{background:var(--emerald-dark);transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{background:var(--border);border-color:var(--border);color:var(--secondary);cursor:not-allowed;pointer-events:none}
.btn-secondary{background:var(--surface);color:var(--emerald);border-color:var(--emerald)}
.btn-secondary:hover{background:var(--tint);color:var(--emerald-dark);border-color:var(--emerald-dark)}
.btn-secondary:active{background:var(--tint);transform:translateY(1px)}
.fineprint{font-size:16px;color:var(--secondary);margin:16px 0 0;max-width:65ch}

main section{padding:48px 0 16px}
.lead{font-size:18px}

/* Demo proof band: sits directly under the hero. The figures are the
   Bible demo week, labelled as a demo on invented data in the HTML. */
.proof{background:var(--surface);border-bottom:1px solid var(--border)}
.proof-inner{padding-top:40px;padding-bottom:40px}
.proof h2{margin:0 0 8px}
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;margin:24px 0 16px}
.proof-stat{border:1px solid var(--border-soft);border-top:4px solid var(--emerald);border-radius:10px;padding:20px;background:var(--surface)}
.proof-stat .num{display:block;font-size:36px;font-weight:700;color:var(--emerald);line-height:1.15;font-variant-numeric:tabular-nums;margin:0 0 4px}
.proof-stat .lab{display:block;font-size:16px;color:var(--secondary);margin:0}
.proof-note{font-size:16px;color:var(--secondary);margin:0;max-width:65ch}

.steps{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 16px}
.step{background:var(--surface);border:1px solid var(--border-soft);border-top:4px solid var(--emerald);border-radius:10px;padding:24px}
.step p{margin:0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:32px}
.card .card-label{font-size:16px;font-weight:700;margin:0 0 8px}
.card .price{font-family:"Noto Sans",Carlito,sans-serif;font-size:36px;font-weight:700;color:var(--emerald);margin:0 0 4px;font-variant-numeric:tabular-nums}
.card .per{font-size:16px;color:var(--secondary);margin:0 0 16px}
.card p{margin:0}
.privacy{background:var(--tint);border:1px solid var(--border-soft);border-radius:10px;padding:32px;margin:24px 0 16px}
details{border-bottom:1px solid var(--border);padding:16px 0}
details:first-of-type{border-top:1px solid var(--border)}
summary{font-size:18px;font-weight:700;cursor:pointer;padding:8px 0;min-height:48px}
details p{margin:8px 0 0}

/* Closing band. */
.cta-band{background:var(--emerald-dark);color:var(--cream);padding:48px 0;margin:48px 0 0}
.cta-band h2{color:var(--cream)}
.cta-band p{color:var(--cream)}
.cta-band .btn{background:var(--cream);color:var(--emerald-dark);border-color:var(--cream)}
.cta-band .btn:hover{background:var(--surface);border-color:var(--surface)}
.cta-band .btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cta-band .btn:active{background:var(--surface);transform:translateY(1px)}
.cta-band .btn:disabled,.cta-band .btn[disabled],.cta-band .btn[aria-disabled="true"]{background:var(--border);border-color:var(--border);color:var(--secondary);cursor:not-allowed;pointer-events:none}
.cta-band .fineprint{color:var(--cream)}
.cta-band a{color:var(--cream)}

/* Footer: light cream ground, dark Gemstone master. */
footer{padding:32px 0 48px;font-size:16px;color:var(--secondary)}
footer .brand{padding:10px 12px 10px 0;margin:0 0 8px}
footer .brand img{width:150px}
footer p{margin:0 0 12px;max-width:65ch}
footer p:last-child{margin:0}
.footer-link-btn{background:none;border:none;padding:0 8px;margin:0;font:inherit;font-size:16px;font-weight:700;color:var(--emerald);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:48px;display:inline-flex;align-items:center}
.footer-link-btn:hover{color:var(--emerald-dark)}
.footer-link-btn:active{transform:translateY(1px)}
.footer-link-btn:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}

/* Back to top: one per page, labelled, lower right (checklist). */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:40;display:none;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--emerald);font-family:"Noto Sans",Carlito,sans-serif;font-size:16px;font-weight:700;cursor:pointer}
.back-to-top.is-visible{display:inline-flex}
.back-to-top:hover{background:var(--tint)}
.back-to-top:active{transform:translateY(1px)}
.back-to-top:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}

/* Consent banner: the Kollaz tool pattern. Accept and reject are
   equal buttons; nothing non-essential fires before a choice. The
   analytics file adds body bottom padding while the banner shows,
   so the banner never covers page content. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:2px solid var(--emerald);padding:20px 0}
.consent-card{max-width:1120px;margin:0 auto;padding:0 24px}
.consent-title{font-size:20px;margin:0 0 8px}
.consent-body{font-size:16px;margin:0 0 16px;max-width:65ch}
.consent-settings{margin:0 0 16px}
.consent-settings-title{font-size:18px;margin:0 0 8px}
.consent-toggle{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;min-height:48px;cursor:pointer}
.consent-toggle input{width:24px;height:24px;accent-color:var(--emerald)}
.consent-note{font-size:16px;color:var(--secondary);margin:4px 0 12px;max-width:65ch}
.consent-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.consent-btns:last-child{margin:0}
.consent-link{background:none;border:none;padding:0 8px;font:inherit;font-size:16px;font-weight:700;color:var(--emerald);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:48px;display:inline-flex;align-items:center}
.consent-link:hover{color:var(--emerald-dark)}
.consent-link:active{transform:translateY(1px)}
.consent-link:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}

@media (max-width:900px){
  .proof-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .header-inner{min-height:56px;padding-top:12px;padding-bottom:12px}
  .brand img{width:140px}
  h1{font-size:36px}
  h2{font-size:24px}
  .hero{padding:48px 0 32px}
  .container{padding:0 16px}
  .consent-card{padding:0 16px}
  .steps,.cards{grid-template-columns:1fr}
  .card,.privacy{padding:24px}
  main section{padding:32px 0 8px}
  .cta-band{padding:32px 0}
  .proof-inner{padding-top:32px;padding-bottom:32px}
  .back-to-top{right:16px;bottom:16px}
  .btn{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media (forced-colors:active){
  .btn,.btn-secondary,.card,.step,.privacy,.proof-stat,.back-to-top{border:1px solid ButtonText}
  .site-header,.cta-band,.consent{border:1px solid CanvasText}
}
@page{
  size:Letter;
  margin:20mm;
}
@media print{
  .back-to-top,.consent,.skip-link{display:none !important}
  .site-header,.cta-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details{break-inside:avoid}
}
