/* =========================================================================
   VARNER FUNNEL — shared shell for the recruiting funnels.

   One stylesheet behind /apply (door knockers) and /clean (cleaning crew).
   They are the same machine with different words, so the only thing either
   page ships is its own copy.

   Locked to the 2026 brand system: red, black, white, no new hues. Red is
   about a tenth of the page and every use of it is a thing you press.
   ========================================================================= */
/* Locked to the 2026 brand system. Red, black, white — no new hues.
   Red is ~12% of the page and every use of it is a thing you press. */
:root{
  --red:#D80C11; --red-deep:#A8090D;
  --ink:#0A0A0A; --ink-1:#1C1C1A; --ink-2:#54544F; --ink-3:#82827C;
  --line:#E4E4DF; --soft:#F6F6F3; --white:#fff;
  --r:12px;
  --pad:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink);-webkit-font-smoothing:antialiased}
body{
  font-family:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink-1);
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
}

/* ---- shell ---------------------------------------------------------- */
.shell{
  width:100%;max-width:520px;background:var(--white);
  min-height:100svh;display:flex;flex-direction:column;
}
/* DESKTOP: A PAGE, NOT A FLOATING DIALOG.

   The card is deliberately narrow — it is a form, and a 520px column is where
   a question and its answer stay readable. Widening it on a big screen would
   make the funnel worse, not better.

   So the fix is not the card, it is everything around it. Centring it alone
   was not enough: a lone card on black still reads as a modal that has lost
   its page, whatever height it sits at. On a wide screen the card now sits
   beside a brand panel and the two together fill the frame, which is a layout
   rather than a dialog.

   THREE BREAKPOINTS, AND THEY DO DIFFERENT JOBS:
     < 560px   the shell IS the page, edge to edge. Untouched.
     560-899   the card is a rounded sheet, centred, no panel — there is not
               room for two columns and a squeezed one helps nobody.
     >= 900px  two columns.
   ------------------------------------------------------------------------ */
.stage{width:100%;display:flex;flex-direction:column;align-items:center}
.aside{display:none}

@media(min-width:560px){
  body{padding:32px 16px;justify-content:center}
  .shell{min-height:auto;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
  /* Decorative and duplicative of the logo above it, which is why it is
     generated rather than markup. Replaced by the panel at 900px. */
  body::after{
    content:"Varner Windows \00B7 Greater Houston";
    margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.05em;
    color:#6B6B66;text-align:center;
  }
}

/* A short viewport (a laptop, or a phone in landscape) must never centre the
   card, or the top of a long step scrolls off above the fold with no way back
   to it. Height, not width, decides this. */
@media(min-width:560px) and (max-height:760px){
  body{justify-content:flex-start}
}

@media(min-width:900px){
  body{padding:40px 32px}
  body::after{content:none}
  .stage{
    flex-direction:row;align-items:center;justify-content:center;
    gap:clamp(40px,6vw,88px);max-width:1080px;
  }
  .aside{
    display:block;flex:1 1 0;max-width:420px;color:#fff;
    /* Its own stacking context, so the card's shadow never falls across the
       type beside it. */
    position:relative;z-index:1;
  }
  .aside-mark{height:26px;width:auto;display:block;margin-bottom:34px}
  .aside-eyebrow{
    font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:var(--red);margin-bottom:14px;
  }
  .aside-h{
    font-size:clamp(34px,3.4vw,46px);line-height:1.02;font-weight:900;
    letter-spacing:-.035em;color:#fff;margin-bottom:26px;
  }
  .aside-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}
  .aside-list li{
    position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:#C6C6C0;
  }
  /* A red rule, not a bullet dot — the same mark the marketing site uses to
     open a section, so the two surfaces read as one brand. */
  .aside-list li::before{
    content:"";position:absolute;left:0;top:10px;width:12px;height:2px;background:var(--red);
  }
  .aside-foot{
    padding-top:22px;border-top:1px solid #2A2A28;
    font-size:13.5px;line-height:1.6;color:#82827C;max-width:36ch;
  }
  /* The card stops growing with the row and keeps its own column. */
  .shell{flex:0 0 auto}
}

/* The panel is decoration for a wide screen. If somebody is scrolling a long
   step on a short one, it must not push the card off the top. */
@media(min-width:900px) and (max-height:720px){
  .aside{display:none}
  .stage{max-width:none}
}

.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px var(--pad);background:var(--ink);color:var(--white);
}
.top img{height:19px;width:auto;display:block}
.top .step{font-size:11px;font-weight:800;letter-spacing:.16em;color:#8b8b86}

.bar{height:3px;background:#2a2a28}
.bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s ease}

.body{padding:26px var(--pad) 30px;flex:1}

/* ---- type ------------------------------------------------------------ */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
h1{font-size:34px;line-height:1.06;font-weight:900;letter-spacing:-.025em;text-wrap:balance;margin-bottom:14px}
h2{font-size:25px;line-height:1.14;font-weight:900;letter-spacing:-.02em;text-wrap:balance;margin-bottom:10px}
.lede{font-size:16px;line-height:1.55;color:var(--ink-2)}
.rd{color:var(--red)}
.note{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:14px}
.note a{color:var(--ink-2)}

/* ---- the honest list ------------------------------------------------- */
.truth{list-style:none;margin:22px 0 0;display:grid;gap:13px}
.truth li{display:flex;gap:11px;font-size:15px;line-height:1.45;color:var(--ink-1)}
.truth em{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--red);color:#fff;font-style:normal;font-weight:900;font-size:11px;
  display:grid;place-items:center;
}

/* ---- controls -------------------------------------------------------- */
.btn{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  font:inherit;font-weight:800;letter-spacing:.01em;
  border-radius:var(--r);padding:17px 20px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;transition:.16s;
}
.btn-red{background:var(--red);color:#fff;font-size:16px}
.btn-red:active{background:var(--red-deep)}
.btn-red[disabled]{opacity:.55;cursor:default}
.btn-line{background:#fff;color:var(--ink-1);border:1.5px solid var(--line);font-size:14px;padding:13px 18px;width:auto}
.acts{margin-top:26px;display:grid;gap:10px}
.back{margin-top:16px;display:flex}

/* choice chips — the four qualifying taps */
.q{margin-bottom:22px}
.q>span{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts.one{grid-template-columns:1fr}
.opt{
  -webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;
  text-align:left;padding:13px 14px;border-radius:var(--r);
  border:1.5px solid var(--line);background:#fff;color:var(--ink-1);
  font-size:14.5px;font-weight:700;transition:.14s;min-width:0;
}
.opt[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);color:var(--red-deep)}

/* fields */
.f{display:grid;gap:7px;margin-bottom:15px;min-width:0}
.f>*{min-width:0}
.f label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.f input,.f textarea{
  width:100%;font:inherit;font-size:16px;   /* 16px: anything less zooms iOS on focus */
  min-height:52px;padding:14px 15px;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r);outline:none;transition:.16s;
}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,12,17,.1)}
.f input::placeholder,.f textarea::placeholder{color:#AEAEA7}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- slot picker ------------------------------------------------------ */
.pick{border:1px solid var(--line);border-radius:var(--r);background:var(--soft);padding:12px;min-width:0}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;min-width:0}
.day{
  flex:0 0 auto;min-width:66px;padding:9px 11px;cursor:pointer;font:inherit;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;text-align:center;
}
.day u{display:block;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.day b{display:block;font-size:15px;font-weight:900;letter-spacing:-.02em}
.day[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.day[aria-pressed="true"] u,.day[aria-pressed="true"] b{color:var(--red-deep)}
.grp{margin-top:14px}
.grp u{display:block;text-decoration:none;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
/* Three across, not two: quarter-hour labels are short, and Grayson open all
   day means a single column would run for half a screen. */
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.time{font-size:14px;padding:12px 6px}
.time{
  cursor:pointer;font:inherit;font-size:15px;font-weight:800;padding:14px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink-1);
}
.time[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);color:var(--red-deep)}
/* STAGE ONE. Just the hour — the count of free quarters inside it came off on
   2026-09-08 (Grayson): it read as clutter on the one screen whose whole job is
   to feel like an easy choice. Whether an hour is busy is the applicant's
   problem for two seconds, not something to put on the button. */
.hour{line-height:1.2}
/* The way back out of an hour. Full width and above the times, because on a
   phone the thumb is at the bottom and the escape route must not sit where the
   next tap is about to land. */
.hourback{display:block;width:100%;margin-bottom:10px;padding:9px 12px;text-align:left;
  background:none;border:0;font:inherit;font-size:13px;font-weight:800;letter-spacing:-.01em;
  color:var(--red);cursor:pointer}
.hourback:hover{text-decoration:underline}
.pick-msg{font-size:14px;color:var(--ink-2);padding:8px 2px;line-height:1.5}

/* ---- confirmation ----------------------------------------------------- */
.tick{width:54px;height:54px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin-bottom:18px}
.tick svg{width:26px;height:26px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.when{
  margin-top:20px;padding:17px 18px;border-radius:var(--r);
  background:var(--ink);color:#fff;
}
.when u{display:block;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.14em;color:#8b8b86;margin-bottom:6px}
.when b{display:block;font-size:20px;font-weight:900;letter-spacing:-.02em}
.when i{display:block;font-style:normal;font-size:14px;color:#c9c9c4;margin-top:5px}

.err{
  margin-top:14px;padding:12px 14px;border-radius:var(--r);
  background:#FDECEC;border:1px solid #F5C2C2;color:#8B1113;
  font-size:14px;line-height:1.45;
}
[hidden]{display:none !important}