/* site.css: THE PUBLIC DRIVER PAGES (`/` landing.html, `/apply` apply.html).
 *
 * ONE COPY for every public page, so they cannot drift from each other. The
 * app (index.html) never loads this, and these pages never load styles.css:
 * its body rules belong to the map shell.
 *
 * PAINTED AS THE APP'S SIGN-IN SCREEN, BY VALUE (owner 2026-10-19: "that is
 * not the same color scheme as the driver app"). A first cut took styles.css
 * :root's --bg/--card, which is not what a driver sees at the door: #s-login
 * paints a near-black 160deg gradient, its card is the dark glass
 * (--bar-glass, --pill-edge, --pill-blur, --panel-depth) and its button is
 * Rajdhani over --grad-btn with a green glow. Change them there and here
 * together: tests/landing.test.js compares the painted values with the real
 * sign-in screen, in one browser. */
:root{
  --text:#e8f4f0; --text2:#c3dcd2; --text3:#aecabe;
  --green:#318f71; --green-ink:#6fd2ae; --red-ink:#ff8f8f;
  --grad:linear-gradient(135deg,#318f71 0%,#3babc4 100%);
  --grad-btn:linear-gradient(135deg,#236751 0%,#2a7b8d 100%);
  --bar-glass:none,rgba(8,17,13,.82);
  --pill-glass:rgba(8,17,13,.72);
  --pill-edge:1px solid rgba(255,255,255,.13);
  --pill-blur:blur(22px);
  --panel-depth:0 14px 40px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.20);
  --gutter:20px;
  --logo:clamp(120px,36vw,190px);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;min-height:100%;background:#030806 linear-gradient(160deg,#030806 0%,#071410 55%,#0a1a14 100%);}
body{margin:0;min-height:100vh;color:var(--text);font:400 17px/1.55 'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--green-ink);}
:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px;border-radius:10px;}
[hidden]{display:none !important;}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:10;background:var(--bar-glass);border:var(--pill-edge);color:var(--text);
      padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;}
.skip:focus{top:calc(12px + env(safe-area-inset-top));}

/* Safe areas ADD to the gutter, never replace it (CLAUDE.md: calc, not max). */
.wrap{
  width:100%; max-width:1180px; margin:0 auto;
  padding-left:calc(var(--gutter) + env(safe-area-inset-left));
  padding-right:calc(var(--gutter) + env(safe-area-inset-right));
}
/* The brand is the page's header, above <main>: on a phone it stacks over
   the content exactly as it did inside the first section. */
.site-head{padding-top:calc(16px + env(safe-area-inset-top));}
main{display:grid;gap:28px;padding-bottom:40px;}

/* The sign-in screen's brand stack: the logo over the spread DRIVER, on the
   same faint radial glow. A link home on pages other than `/`. */
.brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0 20px;color:inherit;text-decoration:none;}
.brand::before{content:'';position:absolute;top:42%;left:50%;width:320px;height:320px;transform:translate(-50%,-50%);
     background:radial-gradient(ellipse at 50% 50%,rgba(49,143,113,.10) 0%,rgba(59,171,196,.03) 60%,transparent 75%);pointer-events:none;}
.brand-logo{position:relative;width:var(--logo);height:var(--logo);}
/* Never narrower than its own six letters: background-clip:text paints only
   inside the box, so a box narrower than the word cuts the last letter off. */
.brand-word{position:relative;display:flex;justify-content:space-between;width:max(calc(var(--logo) * .86), 4.4em);
     font:700 clamp(30px,9vw,44px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase;
     background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.panel{background:var(--bar-glass);-webkit-backdrop-filter:var(--pill-blur);backdrop-filter:var(--pill-blur);
     border:var(--pill-edge);border-radius:16px;box-shadow:var(--panel-depth);}
.hero-card{padding:24px 20px 26px;}

/* What kind of work this is goes where the eye lands (owner 2026-10-19:
   "make sure they know it is the pilot driver program and that it is 1099").
   Every public page carries it: Indeed links straight to /apply. */
.tags{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.tags li{font:700 14px/1 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--green-ink);
     padding:8px 12px;border-radius:999px;border:1px solid rgba(111,210,174,.35);background:rgba(49,143,113,.12);}
h1{margin:0;font:700 clamp(36px,10vw,58px)/1 'Barlow Condensed',sans-serif;letter-spacing:.01em;text-transform:uppercase;}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lead{margin:14px 0 0;font-size:clamp(17px,2.2vw,19px);color:var(--text2);max-width:34em;}
.lead strong{color:var(--text);font-weight:600;}

.ctas{display:grid;gap:10px;margin-top:22px;}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:14px 22px;border-radius:12px;text-decoration:none;text-align:center;}
.btn-primary{background:var(--grad-btn);color:#fff;font:700 17px/1.2 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;
     text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 18px rgba(49,143,113,.28),inset 0 1px 0 rgba(255,255,255,.22);}
.btn-secondary{background:transparent;border:var(--pill-edge);color:var(--text2);font:600 16px/1.2 'Barlow',sans-serif;}
/* A third way on that is not a third button: one primary per card, the
   secondary beside it, and this below them both. */
.cta-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:600;color:var(--green-ink);}
.note{margin:14px 0 0;font-size:15px;color:var(--text3);}

h2{margin:0 0 12px 2px;font:700 15px/1.2 'Rajdhani',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--text2);}

footer.wrap{padding-top:18px;padding-bottom:calc(24px + env(safe-area-inset-bottom));color:var(--text3);font-size:15px;
     display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);}
footer a{color:var(--text3);display:inline-flex;align-items:center;min-height:44px;}

@media (min-width:480px){
  .ctas{grid-template-columns:auto auto;justify-content:start;}
}
@media (min-width:768px){
  :root{--gutter:32px;}
  .hero-card{padding:28px 28px 30px;}
}

/* A COMPUTER GETS ONE SCREEN, NOT A TALL PAGE (owner 2026-10-19: "that is
   not optimized for desktop" / "i should not have to scroll"). The stacked
   200px logo and the footer ran every public page off a 1440x900 screen.
   The brand becomes a slim header row, the page is the window's height with
   the content centred in it, and the footer is one line at the bottom.
   tests/landing, apply and install measure that nothing scrolls at the
   common laptop and desktop sizes. */
@media (min-width:1024px){
  body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
  .wrap{max-width:1320px;}
  .site-head{padding-top:calc(14px + env(safe-area-inset-top));}
  .site-head .brand{--logo:40px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 0 10px;width:max-content;}
  .site-head .brand::before{top:50%;left:20px;width:140px;height:140px;}
  .site-head .brand-word{font-size:26px;}
  main{flex:1 0 auto;align-content:center;padding-bottom:8px;}
  footer.wrap{padding-top:0;padding-bottom:env(safe-area-inset-bottom);}
}