/* Start page (rescue/app/start.html): what Rescue Locator is, three entries, the 90 s tour, then what you will see and how it works. Paper look, colours only from tokens.css.
   One red on the page: the tour button. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--rl-bg);color:var(--rl-ink);font:var(--rl-fs)/1.5 var(--rl-font);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  radial-gradient(ellipse 900px 500px at 85% -10%,color-mix(in srgb,var(--rl-accent) 10%,transparent),transparent 70%),
  repeating-radial-gradient(circle at 78% 30%,transparent 0 38px,color-mix(in srgb,var(--rl-ink) 5%,transparent) 38px 39px),
  var(--rl-bg)}
a{color:var(--rl-accent)}
.st{max-width:1040px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:22px}
.st-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--rl-fs-l)}
.st-brand .logo{width:36px;height:25px;fill:var(--rl-ink)}
.st-brand .logo circle{fill:var(--rl-danger)}
.st-srv{margin-left:auto;font:var(--rl-fs-xs)/1.3 var(--rl-mono);color:var(--rl-mute)}
.st-srv i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rl-ok);margin-right:6px;vertical-align:1px}
.st-srv.off i{background:var(--rl-mute)}

.st-hero{background:var(--rl-panel);border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);box-shadow:var(--rl-shadow);padding:28px 28px 24px;backdrop-filter:blur(var(--rl-blur));-webkit-backdrop-filter:blur(var(--rl-blur))}
.st-hero h1{font:700 clamp(30px,5vw,46px)/1.05 var(--rl-font);margin:0 0 12px;letter-spacing:-.01em}
.st-lead{font-size:var(--rl-fs-l);max-width:760px;margin:0 0 8px;color:var(--rl-ink)}
.st-en{font-size:var(--rl-fs-s);color:var(--rl-mute);margin:0 0 18px;max-width:760px}
.st-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.st-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:24px;font-weight:700;font-size:var(--rl-fs-l);text-decoration:none}
.st-primary{background:var(--rl-danger);color:var(--rl-on-danger)}
.st-primary:hover{filter:brightness(1.08)}
.st-primary:focus-visible,.st-role:focus-visible{outline:3px solid var(--rl-accent);outline-offset:3px}
.st-cta-sub{color:var(--rl-ink-2);font-size:var(--rl-fs-s)}

.st-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st-role{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;background:var(--rl-panel-solid);border:1px solid var(--rl-line-strong);border-radius:var(--rl-radius-l);color:var(--rl-ink);text-decoration:none;transition:border-color .15s,transform .15s}
.st-role:hover{border-color:var(--rl-accent);transform:translateY(-2px)}
.st-role b{font-size:var(--rl-fs-xl);line-height:1.15}
.st-role span:last-child{color:var(--rl-ink-2);font-size:var(--rl-fs-s)}
.st-ico svg{width:30px;height:30px;fill:none;stroke:var(--rl-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* below the buttons: what you will see (real screenshots, deep links), how it works, footer */
.st-h{font-size:var(--rl-fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rl-mute);margin:0 0 10px}
.st-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st-card{display:flex;flex-direction:column;gap:4px;background:var(--rl-panel-solid);border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);overflow:hidden;color:var(--rl-ink);text-decoration:none;padding-bottom:14px;transition:border-color .15s,transform .15s}
.st-card:hover{border-color:var(--rl-accent);transform:translateY(-2px)}
.st-card:focus-visible{outline:3px solid var(--rl-accent);outline-offset:3px}
.st-shot{display:block;aspect-ratio:16/10;background:var(--rl-panel-2);border-bottom:1px solid var(--rl-line);margin-bottom:8px;overflow:hidden}
.st-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.st-shot-phone img{width:auto;margin:0 auto;object-fit:contain;padding:8px 0 0;filter:drop-shadow(var(--rl-shadow))}
.st-card b{padding:0 14px;text-wrap:balance;font-size:var(--rl-fs-l);line-height:1.2}
.st-card b::after{content:" \2192";color:var(--rl-accent)}
.st-card span:last-child{padding:0 14px;color:var(--rl-ink-2);font-size:var(--rl-fs-s);line-height:1.35}
.st-card-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto 1fr;padding-bottom:0;column-gap:4px}
.st-card-wide .st-shot{grid-row:1/4;margin:0;border-bottom:0;border-right:1px solid var(--rl-line)}
.st-card-wide b{grid-row:2;padding-top:0;font-size:var(--rl-fs-xl)}
.st-card-wide span:last-child{grid-row:3;align-self:start;padding-top:6px;font-size:var(--rl-fs)}

.st-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:st}
.st-steps li{counter-increment:st;display:grid;align-content:start;grid-template-columns:34px 1fr;column-gap:12px;row-gap:2px;align-items:start;padding:12px 14px;background:var(--rl-card);border:1px solid var(--rl-line);border-radius:var(--rl-radius)}
.st-steps .st-ico{grid-row:1/3;padding-top:2px}
.st-steps b::before{content:counter(st) ". ";color:var(--rl-accent)}
.st-steps span:last-child{color:var(--rl-ink-2);font-size:var(--rl-fs-s);line-height:1.35}

.st-foot{font-size:var(--rl-fs-xs);color:var(--rl-mute);border-top:1px solid var(--rl-line);padding-top:12px}
.st-foot p{margin:0 0 4px}
.st-foot a{color:inherit}

@media (max-width:900px){.st-cards{grid-template-columns:repeat(2,1fr)}.st-card-wide{grid-template-columns:1fr;grid-template-rows:auto;padding-bottom:14px}.st-card-wide .st-shot{grid-row:auto;border-right:0;border-bottom:1px solid var(--rl-line);margin-bottom:8px}.st-card-wide b,.st-card-wide span:last-child{grid-row:auto}}
@media (max-width:760px){
  .st{gap:16px;padding-top:14px}
  .st-hero{padding:20px 16px}
  .st-lead{font-size:var(--rl-fs)}
  .st-btn{width:100%;justify-content:center}
  .st-roles{grid-template-columns:1fr;gap:10px}
  .st-role{padding:14px 16px}
  .st-role b{font-size:var(--rl-fs-l)}
  .st-steps{grid-template-columns:1fr;gap:8px}
}
@media (max-width:480px){.st-cards{grid-template-columns:1fr;gap:10px}}
/* casual visitors: one line to the tourist/family landing (QA mobile) */
.st-casual{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;min-height:44px;padding:10px 16px;border:1px dashed var(--rl-line-strong);border-radius:var(--rl-radius);color:var(--rl-ink-2);text-decoration:none}
.st-casual b{color:var(--rl-ink)}
.st-casual:hover span{color:var(--rl-accent)}
/* phone: the fixed version stamp sat on top of the role cards; put it after the footer instead */
@media (max-width:760px){#rl-version{position:static!important;text-align:right;padding:0 16px 12px;text-shadow:none!important}.st-srv{margin-left:0}}
/* two audiences: rescuers and families (each a heading + one sentence + entry cards) */
.st-aud{display:flex;flex-direction:column;gap:10px}
.st-audh{font-size:var(--rl-fs-xl);line-height:1.2;margin:4px 0 0}
.st-auds{margin:0;color:var(--rl-ink-2)}
.st-aud-fam{padding:16px;border-radius:var(--rl-radius-l);background:color-mix(in srgb,var(--rl-danger) 6%,var(--rl-panel-solid));border:1px solid color-mix(in srgb,var(--rl-danger) 25%,transparent)}
.st-fam{border-color:var(--rl-danger)}.st-fam .st-ico svg{stroke:var(--rl-danger)}
/* phones (mobile QA, AI Mateusza #2): "Ktoś zaginął" sat 2 screens down at 360 px - the 112 call goes above the fold, under the
   header. Desktop: hidden, the family block below stays the way in */
/* laptop (sens-funkcji #21): the same 112 line as a narrow strip above the hero, not hidden under the fold */
.st-sos{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin-top:-10px;padding:8px 16px;border-radius:12px;background:color-mix(in srgb,var(--rl-danger) 8%,var(--rl-panel-solid));border:1px solid color-mix(in srgb,var(--rl-danger) 30%,transparent)}
.st-sos-call{color:var(--rl-danger);font-weight:700;text-decoration:none}
.st-sos-call small{font-size:inherit;font-weight:600;color:var(--rl-ink)}
.st-sos-more{color:var(--rl-danger);font-weight:600}
.st-foot .st-srv{margin-left:0}
@media (max-width:600px){
  .st-sos{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:-8px;padding:0;background:none;border:0}
  .st-sos-call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:6px 16px;border-radius:14px;background:var(--rl-danger);color:var(--rl-on-danger);font:700 22px/1.1 var(--rl-font);text-decoration:none;box-shadow:0 4px 14px color-mix(in srgb,var(--rl-danger) 30%,transparent)}
  .st-sos-call small{font-size:16px;font-weight:600;color:inherit}
  .st-sos-more{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-weight:600;color:var(--rl-danger)}
  .st-sos-call:focus-visible,.st-sos-more:focus-visible{outline:3px solid var(--rl-accent);outline-offset:3px}
}