/* ============================================================================
   cheapdrivingcourse.com — LONE STAR 25
   ----------------------------------------------------------------------------
   Texas-and-the-school identity (Luis, 2026-08-02): flag navy/red/white with
   the lone star carry official-Texas trust; GREEN IS RESERVED FOR MONEY ONLY
   (prices, savings). Gold survives solely for the TDLR seal, review stars and
   the Important warning box. Every word of copy is the site's own.

     navy   #14213D   structure, nav, ink            ~14:1 on white
     red    #B22234   the action colour (CTAs, star)  6.4:1 with white text
     money  #00713B   prices and savings ONLY         5.3:1 on white
     gold   #FFC72C   TDLR seal, stars, warnings
     concrete #F0F1F4 page ground
   ========================================================================= */
:root{
  --navy:#14213D;  --navy-dk:#0D1730; --red:#B22234;   --red-dk:#8E1B29;
  --money:#0E6B3C; --money-lt:#62CE96; --gold:#FFC72C; --asphalt:#1F1B16;
  --cream:#F7F2E8;  --card:#FFFFFF;   --line:#E4DCCB;  --muted:#6B6459;
  --sand:#EFE0BE;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--asphalt);
  font-family:Barlow,"Segoe UI",system-ui,sans-serif;line-height:1.6}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.cond{font-family:"Barlow Condensed",Barlow,sans-serif}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}

/* ---------- the $25 seal: round, official, self-explanatory ---------- */
.shield{display:grid;place-items:center;background:#fff;color:var(--navy);
  border-radius:50%;border:6px double var(--navy)}
.shield div{text-align:center;font-family:"Barlow Condensed",sans-serif;font-weight:700;line-height:.95}

/* ---------- top strip + nav ---------- */
.strip{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--navy-dk);color:#C6BFAE;padding:6px 24px;font-size:11.5px;letter-spacing:.04em}
.strip a{color:#fff;text-decoration:none;font-weight:600}
.strip a:hover{color:var(--gold)}
.nav{background:#fff;color:var(--navy);position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--red);box-shadow:0 2px 14px rgba(20,33,61,.10)}
.nav-in{max-width:1140px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap}
/* the site's own logo, knocked out white for the navy bar */
.brand{display:flex;align-items:center;text-decoration:none;line-height:0}
.brand img{height:46px;width:auto;display:block}
.brand:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:4px}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{display:block;color:var(--navy);text-decoration:none;font-size:14px;font-weight:600;
  padding:8px 13px;border-radius:6px}
.nav ul a:hover,.nav ul a:focus-visible{background:var(--cream);color:var(--red)}

/* ---------- the Register button: a pressable object, not a flat rectangle ----
   Depth from a darker red-red base edge, a subtle top sheen, a gold hairline that
   ties to the seal, an arrow that travels on hover, and a light sweep. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#C82B3D 0%,var(--red) 55%,#9E1F2E 100%);
  color:#fff;text-decoration:none;border-radius:10px;padding:15px 30px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.07em;line-height:1;overflow:hidden;
  box-shadow:0 3px 0 #7E1624, 0 10px 22px rgba(178,34,52,.34),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.btn::after{content:"\2192";font-size:17px;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
/* light sweep on hover */
.btn::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.btn:hover{transform:translateY(-2px);filter:saturate(1.06);
  box-shadow:0 5px 0 #7E1624, 0 16px 30px rgba(178,34,52,.42),
             inset 0 1px 0 rgba(255,255,255,.34)}
.btn:hover::after{transform:translateX(4px)}
.btn:hover::before{left:115%}
.btn:active{transform:translateY(1px);
  box-shadow:0 1px 0 #7E1624, 0 6px 14px rgba(178,34,52,.34), inset 0 2px 4px rgba(0,0,0,.22)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::after,.btn::before{transition:none}
  .btn:hover{transform:none}
}
/* nav CTA: same family, sized for the bar */
.nav .cta{position:relative;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#C82B3D 0%,var(--red) 55%,#9E1F2E 100%);
  color:#fff;text-decoration:none;border-radius:8px;padding:11px 22px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.06em;line-height:1;
  box-shadow:0 2px 0 #7E1624, inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s,box-shadow .18s}
.nav .cta::after{content:"\2192";transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.nav .cta:hover{transform:translateY(-1px);box-shadow:0 4px 0 #7E1624, 0 10px 20px rgba(178,34,52,.3)}
.nav .cta:hover::after{transform:translateX(3px)}
.nav .cta:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- hero: full-bleed road photo under navy, price on a card ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1.35fr .95fr;gap:44px;align-items:center;
  padding:64px 24px 68px;color:#fff;
  background:linear-gradient(105deg,rgba(11,20,45,.96) 0%,rgba(15,28,60,.90) 46%,rgba(20,33,61,.62) 100%),
             var(--hero-img) center/cover no-repeat;
  border-bottom:4px solid var(--red)}
.hero>*{position:relative;z-index:1}
.hero .in{max-width:640px;justify-self:end;width:100%}
.hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(34px,5.2vw,60px);
  letter-spacing:.01em;line-height:.98;margin:0 0 22px;text-transform:uppercase;text-wrap:balance;color:#fff}
.hero h1 em{font-style:normal;display:block;color:var(--sand)}
.hero-list{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px 26px;font-size:14.5px;font-weight:500}
.hero-list li{padding:3px 0 3px 28px;position:relative;color:#EDE6D8}
/* one check-badge system across the page: a ring, a tick, one size */
.hero-list li::before{content:"\2713";position:absolute;left:0;top:3px;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.45);
  color:#fff;font-size:12px;font-weight:700;line-height:1}
.hero-list a{color:#fff;font-weight:600}

/* the price card — the hero's anchor, the pattern buyers expect */
.price-card{background:#fff;color:var(--asphalt);border-radius:14px;max-width:366px;width:100%;
  padding:22px 26px 26px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  border-top:6px solid var(--red)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pc-chip{background:var(--navy);color:#fff;border-radius:999px;padding:6px 13px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pc-seal{width:72px;height:72px;flex:none}
/* the hero price presented as one price tag: amount and the guarantee that
   qualifies it share a single object, split by a perforated rule, with a
   punched tag hole on the left edge. */
.pc-tag{position:relative;border-radius:14px;margin:0 0 18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,107,60,.12),rgba(14,107,60,.05));
  border:1px solid rgba(14,107,60,.24)}
.pc-price{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  line-height:1;color:var(--money);display:flex;align-items:baseline;justify-content:center;
  padding:16px 20px 12px}
.pc-price .only{font-size:26px;letter-spacing:.04em;text-transform:uppercase;
  color:#2E7D57;margin-right:10px}
.pc-price .cur{font-size:30px;align-self:flex-start;margin-top:8px;margin-right:2px}
.pc-price .num{font-size:clamp(58px,6.4vw,76px);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pc-price .exc{font-size:44px;margin-left:3px}
.pc-sub{position:relative;font-size:12.5px;color:#4A5A50;margin:0;padding:11px 16px 14px;
  line-height:1.55;text-align:center;font-style:italic;text-wrap:balance;
  border-top:1.5px dashed rgba(14,107,60,.32);background:rgba(255,255,255,.55)}
.pc-btn{display:block;text-align:center;font-size:15px;padding:15px 20px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:28px;padding:44px 22px 48px}
  .hero .in{justify-self:stretch}
  .price-card{max-width:none}
}
/* ---------- mile marker divider ---------- */
.marker{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px}
.marker::before,.marker::after{content:"";flex:1;border-top:4px double var(--line)}
.marker span{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--money)}

/* ---------- pricing ---------- */
.pricing{max-width:1140px;margin:0 auto;padding:36px 24px 10px}
.pricing h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(26px,3.6vw,38px);letter-spacing:.01em;text-transform:uppercase;margin:0 0 22px;text-align:center}
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start}
.offer{background:var(--card);border-radius:10px;border-top:8px solid var(--navy);
  padding:0;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 32px rgba(0,0,0,.08)}
.offer-img{aspect-ratio:16/9;overflow:hidden}
/* Source photos are full-frame portraits; the card window crops them here.
   The focal point sits at the subject's face height — rendition checks must
   confirm the subject is centred in every card window. */
.offer-img img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.offer:hover .offer-img img{transform:scale(1.045)}
.offer-body{padding:22px 26px 28px}
.offer.hot{background:var(--navy);color:#fff;border-top-color:var(--red);position:relative}
.offer.hot .offer-img{margin-top:0}
.offer.hot .flag{position:absolute;top:14px;right:14px;z-index:2;background:var(--red);color:#fff;
  font-family:"Barlow Condensed";font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px;border-radius:4px}
.offer h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.05;margin:0 0 4px}
.offer .promo{font-size:13px;font-weight:600;color:var(--navy);margin:0 0 10px}
.offer.hot .promo{color:var(--money-lt)}
/* ---------- price treatment: the number sits in its own price tag ----------
   Superscript currency, tabular figures so digits align across the three
   cards, a money-tinted band with a hairline, and a lift on card hover. */
.price-band{display:inline-flex;align-items:baseline;gap:12px;
  background:linear-gradient(180deg,rgba(14,107,60,.10),rgba(14,107,60,.05));
  border:1px solid rgba(14,107,60,.22);border-radius:12px;
  padding:10px 18px 12px;margin:0 0 14px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,background .3s}
.offer:hover .price-band{transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,107,60,.16);background:rgba(14,107,60,.13)}
.offer .price{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:26px;
  line-height:1;color:var(--money);letter-spacing:.01em;display:inline-flex;align-items:baseline}
.offer .price .cur{font-size:26px;align-self:flex-start;margin:6px 2px 0 6px;font-weight:700}
.offer .price .num{font-size:58px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-left:1px}
.offer.hot .price-band{background:rgba(98,206,150,.14);border-color:rgba(98,206,150,.38)}
.offer.hot:hover .price-band{background:rgba(98,206,150,.2);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.offer.hot .price{color:var(--money-lt)}
.offer .price small{font-family:Barlow;font-size:15px;font-weight:600;color:#A79E8C;
  text-decoration:line-through;letter-spacing:.01em}
/* the saving belongs to the arithmetic it describes: $50 reg -> $45, save $5 */
.save-badge{display:inline-block;margin:0 0 12px;background:var(--money-lt);color:#08301C;
  border-radius:999px;padding:6px 14px;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.offer p.desc{font-size:13.5px;color:#3A3733;line-height:1.6;margin:0 0 14px}
.offer.hot p.desc{color:#D9D2C4}
.offer .important{background:rgba(255,199,44,.14);border-left:4px solid var(--gold);
  padding:10px 14px;font-size:12.5px;margin:0 0 14px}
.offer ul{margin:0 0 18px;padding:0;list-style:none;font-size:13.5px;font-weight:500}
.offer li{padding:6px 0 6px 34px;position:relative}
.offer li::before{content:"\2713";position:absolute;left:0;top:4px;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--money);color:#fff;font-size:12px;font-weight:700;line-height:1;
  box-shadow:0 1px 3px rgba(14,107,60,.35)}
.offer.hot li::before{background:var(--money-lt);color:#08301C;box-shadow:none}
.offer .btn{width:100%;text-align:center}
.offer.hot .btn{background:var(--red);color:#fff}
.offer.hot .btn:hover{background:var(--red-dk)}

/* ---------- about brief + buckets ---------- */
.brief{max-width:820px;margin:0 auto;padding:34px 24px 8px;font-size:15px;color:#3A3733;line-height:1.7}
.brief strong span{color:var(--navy)}
.buckets{max-width:1140px;margin:0 auto;padding:22px 24px 10px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.bucket{background:var(--card);border-radius:10px;padding:18px 20px;display:flex;gap:16px;
  align-items:center;box-shadow:0 2px 4px rgba(0,0,0,.05),0 10px 24px rgba(0,0,0,.06)}
.bucket .tag{flex:none;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.08em;background:var(--navy);color:#fff;border-radius:999px;padding:8px 15px;
  text-transform:uppercase;min-width:70px;text-align:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.bucket.alt .tag{background:var(--red);color:#fff}
.bucket h3{font-size:15.5px;font-weight:700;margin:0 0 2px}
.bucket p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}

/* ---------- about ---------- */
.about{max-width:820px;margin:0 auto;padding:30px 24px 20px;font-size:15px;color:#3A3733;line-height:1.7}
.about p{margin:0 0 16px}
.about .easy{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;
  text-transform:uppercase;letter-spacing:.04em;text-align:center;color:var(--asphalt);margin:26px 0 14px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 26px}
.step{background:var(--card);border-radius:10px;padding:18px;text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,.05)}
.step .n{font-family:"Barlow Condensed";font-weight:700;font-size:15px;color:#fff;
  background:var(--navy);display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:50%;margin-bottom:8px}
.step b{display:block;font-size:14px}
.about .center{text-align:center}

/* ---------- testimonials ---------- */
.testimonials{background:var(--navy);color:#fff;padding:46px 0 54px;margin-top:36px}
.testimonials h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(26px,3.4vw,36px);letter-spacing:.02em;text-transform:uppercase;
  text-align:center;margin:0 0 4px}
.testimonials .sub{text-align:center;color:var(--sand);font-size:14px;margin:0 0 28px}
.t-grid{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.t-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:20px 22px}
.t-card .stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:8px}
.t-card blockquote{margin:0 0 10px;font-size:14.5px;line-height:1.55}
.t-card cite{font-style:normal;font-size:12.5px;color:var(--sand);font-weight:600}

/* ---------- cards accepted + footer ---------- */
.accepted{max-width:1140px;margin:0 auto;padding:34px 24px 8px;text-align:center}
footer{background:var(--navy);color:#C6BFAE;margin-top:40px;text-align:center}
.foot-logo{height:44px;width:auto;margin:26px auto 10px;display:block;
  background:#fff;border-radius:10px;padding:10px 16px}
.foot-nav{max-width:1140px;margin:0 auto;padding:22px 24px 6px;display:flex;gap:4px 22px;
  flex-wrap:wrap;justify-content:center;list-style:none}
.foot-nav a{color:#EDE6D8;text-decoration:none;font-size:13.5px;font-weight:600}
.foot-nav a:hover{color:var(--gold)}
.colophon{text-align:center;font-size:12px;padding:8px 24px 26px;line-height:1.7}

/* ---------- internal pages: style the site's own markup as-is ---------- */
.page-content{max-width:860px;margin:0 auto;padding:40px 24px 30px;font-size:15px;
  color:#3A3733;line-height:1.7}
.page-content h1{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--asphalt);
  font-size:clamp(26px,3.8vw,40px);letter-spacing:.01em;line-height:1.05;
  text-transform:uppercase;margin:0 0 6px;text-wrap:balance}
.page-content .h1-sub{display:block;font-family:Barlow,sans-serif;font-weight:500;
  font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:10px;line-height:1.6}
.page-content h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--navy);
  font-size:24px;letter-spacing:.02em;text-transform:uppercase;margin:30px 0 10px}
.page-content h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--asphalt);
  font-size:20px;letter-spacing:.02em;margin:28px 0 8px;padding-top:8px}
.page-content h3 span{float:right;font-family:Barlow;font-size:12px;font-weight:500;letter-spacing:0}
.page-content h3 span a,.page-content p a,.page-content li a{color:var(--red);font-weight:600}
.page-content h2 a{color:inherit;text-decoration:none}
.page-content h2 a:hover{color:var(--red)}
/* the legacy pages lean on <br> for spacing; cap the stacking so the pages
   don't open odd gaps between blocks */
.page-content br + br{display:none}
.page-content p:empty{display:none}
.page-content p{margin:0 0 14px}
.page-content ul,.page-content ol{margin:0 0 16px;padding-left:24px}
.page-content li{margin:4px 0}
.page-content hr{border:0;border-top:4px double var(--line);margin:26px 0}
.page-content strong span{color:var(--navy)}
/* legacy button class from the old template maps onto the Route 25 button */
.page-content .button{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  border-radius:6px;padding:14px 28px;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.04em}
.page-content .button:hover{background:var(--red-dk)}
/* FAQ index: the numbered question list becomes a card */
.page-content #left_panel ol{background:var(--card);border-radius:10px;padding:22px 26px 22px 44px;
  box-shadow:0 2px 4px rgba(0,0,0,.05),0 10px 24px rgba(0,0,0,.06);
  columns:2;column-gap:34px;font-size:13.5px}
.page-content #left_panel li{break-inside:avoid;margin:6px 0}
.page-content #left_panel h2{text-align:center;color:var(--asphalt)}
.page-content #right_panel h2 a{color:var(--navy)}
.page-content #right_panel h3{border-top:1px solid var(--line);padding-top:18px}
@media (max-width:640px){ .page-content #left_panel ol{columns:1} }

@media (max-width:640px){
  .hero{padding:36px 20px 30px;gap:26px}
  .hero .bigshield{width:140px;height:140px}
  .hero .bigshield .s2{font-size:44px}
  .nav ul{order:3;width:100%;justify-content:center;gap:0}
  .nav ul a{font-size:13px;padding:6px 9px}
  .nav-in{justify-content:center;padding:10px 14px;gap:10px}
  .brand{font-size:20px}
  .brand .shield{width:32px;height:36px;font-size:15px}
  .nav .cta{padding:8px 16px;font-size:12.5px}
  .strip{justify-content:center;text-align:center}
}

/* ============================================================================
   REGISTRATION / SIGN-UP — MOBILE FIT
   ----------------------------------------------------------------------------
   The registration flow (#registration_container, #login_container,
   #evaluation, #security_entry, #final_note, #post_shipping, #receipt, etc.)
   is styled by global.css with fixed pixel widths (500-650px) and floated
   panels, which run off the edge of a phone screen. global.css is not being
   touched — these overrides live here, scoped to small screens only, and use
   !important because the two stylesheets may load in either order on the
   pages that still use global.css and both target the same IDs.
   ========================================================================= */
@media (max-width:640px){

  /* kill the two-column float layout — stack instead */
  #registration_left_panel{
    width:100% !important;
    float:none !important;
    border-right:none !important;
    border-bottom:1px dotted #bbb;
    padding:0 0 12px 0 !important;
    margin:0 0 12px 0 !important;
  }
  #registration_panel{
    width:100% !important;
    float:none !important;
    padding:0 !important;
  }
  #registration_container{
    width:100% !important;
    padding:0 12px !important;
  }
  .registration_subdivision{
    width:auto !important;
    padding:10px 14px !important;
  }

  /* inputs/selects that were pinned to 250px */
  #registration_container .contact_field,
  .form_entry .contact_field,
  #refer input,
  #registration_container select{
    width:100% !important;
    max-width:100%;
  }
  #registration_container label{
    float:none !important;
    display:block !important;
  }
  #registration_container .row,
  #registration_container .row_err{
    text-align:left !important;
  }
  #registration_container .price_row{
    width:100% !important;
  }

  /* buttons/price boxes sized for desktop */
  .course_register_button{
    width:100% !important;
    max-width:280px;
  }
  .course_price{
    width:auto !important;
    min-width:100px;
  }

  /* login */
  #login_container{
    width:100% !important;
    max-width:100% !important;
    padding:0 12px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  /* the live login page embeds its own inline <style> block with
     #login_form, .row .form_entry and .security_entry all pinned to
     500px — override each explicitly */
  #login_form, .row .form_entry{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .form_entry input{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box !important;
  }
  .form_entry label{
    display:block !important;
    text-align:left !important;
    float:none !important;
  }
  #security_entry, .security_entry{
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    box-sizing:border-box !important;
  }
  #rememberme{
    position:static !important;
    left:0 !important;
    float:none !important;
    margin:10px 0 !important;
  }
  .row #forgot{
    width:100% !important;
  }

  /* final test / evaluation / shipping */
  #final_note{
    width:100% !important;
    padding:10px 12px !important;
  }
  #evaluation{
    width:100% !important;
  }
  #post_shipping{
    width:100% !important;
    padding:14px !important;
  }
  #receipt{
    width:100% !important;
  }

  /* testimonial layout also floats two fixed-width columns */
  .timg, .tcont{
    float:none !important;
    width:100% !important;
    padding-left:0 !important;
  }

  /* the OLD page header (#header_container/#header/#logo/#reg_log) is
     fixed at 800-900px with no mobile rules of its own in global.css —
     on any page still rendering it, this alone forces the sideways
     scroll regardless of what happens below it */
  #header_container{
    height:auto !important;
  }
  #header{
    width:100% !important;
  }
  #logo{
    width:90% !important;
    max-width:320px;
  }
  #reg_log{
    position:static !important;
    width:100% !important;
    text-align:center;
  }
  #reg_log ul{
    padding:0 !important;
  }

  /* order/shipping steps + misc fixed-width leftovers */
  #shipping_header,
  #shipping_container,
  .shipping_option,
  .shipping_option_existing,
  #fax, #email, #fax_email, #refer,
  #overwrite,
  #course_continue,
  #post_test,
  #post_social,
  #tvs_notes,
  #score,
  .reg_bread,
  #reg_bread{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  #tvs_notes ul{
    padding:0 20px !important;
  }

  /* belt-and-suspenders: nothing in the registration/eval flow should be
     wider than the viewport even if a width above was missed */
  #registration_container,
  #registration_panel,
  #registration_left_panel,
  #login_container,
  #evaluation,
  #final_note,
  #post_shipping,
  #receipt_container,
  #receipt{
    max-width:100% !important;
    box-sizing:border-box;
  }

  /* catch-all: nothing inside the registration form can render wider
     than the form itself, no matter what fixed widths global.css or
     register.css still declare on individual children */
  #registration_container,
  #registration_container *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* the date-of-birth row has three <select> elements sitting inline
     with no wrap — native selects won't shrink below their own
     content, so give them room to wrap onto their own lines instead
     of forcing the row wider than the screen */
  #registration_container .reg_row,
  #registration_container .row{
    display:block !important;
  }
  #registration_container .reg_row select,
  #registration_container .row select{
    width:auto !important;
    max-width:100% !important;
    margin:3px 4px 3px 0 !important;
  }

  /* hard guarantee: even if something is still miscalculated, the
     viewport itself won't scroll sideways */
  html, body{
    overflow-x:hidden !important;
    max-width:100vw;
  }
}

/* ============================================================================
   COURSE PLAYER (chapters.css) & STUDENT MENU (menu.css) — MOBILE FIT
   ----------------------------------------------------------------------------
   home.php/show.php load chapters.css and menu.css directly (separate from
   the registration flow), and neither file has any mobile rules of its own.
   Per the same constraint as the registration fix: chapters.css and menu.css
   are not being touched — everything below lives here and uses !important
   since load order relative to those two files isn't guaranteed.
   ========================================================================= */
@media (max-width:640px){

  /* THE REAL PAGE WRAPPER on home.php/show.php is <div id="content"
     class="internal">, which wraps everything — the traffic light, the
     chapter table, the warning box, the heading, all of it. It's styled
     by a *different* global.css than the one reviewed locally (the live
     page loads it from cacourseprovider.com, a shared vendor path) and
     very likely still carries a fixed ~860px width there. Nothing below
     matters if this wrapper itself doesn't shrink first. */
  #content, #content.internal, .content, #aff_content, .aff_content{
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  /* the chapter warning box (#course_note) sits directly inside #content
     with no width of its own — it inherited #content's fixed width */
  #course_note{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:10px !important;
  }

  /* quiz boxes are hard-coded to 600px in a <style> block embedded in
     the chapter content itself. NOTE: deliberately NOT using
     overflow-x:auto / -webkit-overflow-scrolling:touch here — that
     combination is a known iOS Safari bug that swallows the first tap
     on buttons inside a scroll container (exactly the radio-then-submit
     sequence this quiz needs), which is what broke the Submit button. */
  .response-wrapper{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* IMPORTANT: the quiz radio-button grid + "Submit Response" button
     lives in a real <table class="response-table"> with colspan cells.
     The generic table→block reflow further down (for chapter-content
     layout tables) also caught this one and broke the button/input
     alignment the click handlers expect. Restore true table display
     here specifically — this selector is more specific (id + class)
     than the generic reflow rule, so it wins even though both use
     !important, and the quiz keeps working exactly as before while
     the surrounding page still can't overflow. */
  #course_content .response-table{
    display:table !important;
    width:100% !important;
    table-layout:auto !important;
  }
  #course_content .response-table tbody{
    display:table-row-group !important;
  }
  #course_content .response-table tr{
    display:table-row !important;
    width:auto !important;
  }
  #course_content .response-table td{
    display:table-cell !important;
    width:auto !important;
  }

  /* embedded <video> elements render at native pixel width if the
     source file is large and nothing constrains them */
  video{
    max-width:100% !important;
    height:auto !important;
  }

  /* ---------- chapters.css: the chapter/reading content ---------- */
  #content_container, #template_container, #course_content, #content_chapter_container{
    width:100% !important;
    max-width:100% !important;
    padding:10px !important;
    box-sizing:border-box !important;
  }

  /* the chapter title bar is a fixed-width background image at 680px with
     100px of left padding for a graphic — collapse the image/padding and
     let the text sit on its own */
  .chapter_title{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    background:none !important;
    padding:10px !important;
    font-size:18px !important;
    letter-spacing:normal !important;
    box-sizing:border-box !important;
  }

  #Timer{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* video player block */
  .movie_container, .movie_label, .movie_sub{
    width:100% !important;
    max-width:320px;
    box-sizing:border-box !important;
  }

  /* transcripts */
  div#transcript1, div#transcript2, div#transcript3,
  div#transcript4, div#transcript5, div#transcript6{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* one-liners / insurance claims / jokes side content — these float at
     645px and 600px; stack them full-width */
  .one_liners, .insurance_claims, .real_jokes{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    box-sizing:border-box !important;
  }
  div.joke_container{
    width:100% !important;
    max-width:100% !important;
  }
  .joke_guy, .joke_image, .trivia_image{
    float:none !important;
    width:100% !important;
    max-width:108px;
    margin:0 auto 10px !important;
  }

  /* generic left/right float images used throughout chapter content */
  .left, .img_l, .right, .img_r, .img_lt, .img_rt{
    float:none !important;
    display:block !important;
    margin:10px auto !important;
    max-width:100% !important;
  }

  /* footer utility dock */
  #dock{
    width:100% !important;
    height:auto !important;
    box-sizing:border-box !important;
  }
  .dock_content{
    float:none !important;
    width:100% !important;
    text-align:center !important;
  }

  /* Chapter content ($page_content) is loaded from the database per
     chapter and is old-style table-based layout (no way to edit that
     markup directly). Tables with fixed pixel widths and non-wrapping
     cells don't shrink just from max-width — reflow rows into stacked
     blocks instead, which is what actually stops headings, warning
     text and images from running off the right edge. */
  #course_content table, #course_content tbody,
  #course_content tr, #course_content td, #course_content th{
    display:block !important;
    width:100% !important;
    height:auto !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }
  #course_content img{
    max-width:100% !important;
    height:auto !important;
  }
  #course_content h1, #course_content h2, #course_content h3,
  #course_content h4, #course_content h5, #course_content h6,
  #course_content p{
    white-space:normal !important;
    max-width:100% !important;
  }

  /* Fallback for anything still wider than the screen: center it rather
     than clip it. NOT using overflow-x:auto / -webkit-overflow-scrolling
     here anymore — that combination on #course_content directly broke
     the quiz Submit button (iOS Safari swallows the first tap on a
     button inside a touch-scroll container). Now that the actual
     overflow source (#content) is fixed, a scroll container here isn't
     needed; centering plus the reflow/max-width rules above should be
     enough, and nothing here can intercept a tap. */
  #content_container, #template_container, #course_content,
  #content_chapter_container{
    margin-left:auto !important;
    margin-right:auto !important;
  }


  /* ---------- menu.css: the student "traffic light" menu ---------- */
  /* the real markup (menu_page.php): #stoplight_container wraps a plain
     <table height="150"> with three rows (red/yellow/green light) and
     #menu_table is a hard-coded width="606px" table with per-column
     pixel widths (128/295/100/72px). Neither shrinks on its own —
     reflow every table inside the menu into stacked blocks. */
  #menu_container table, #menu_container tbody,
  #menu_container tr, #menu_container td, #menu_container th,
  #stoplight_container table, #stoplight_container tbody,
  #stoplight_container tr, #stoplight_container td{
    display:block !important;
    width:100% !important;
    height:auto !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }
  #menu_table tr{
    border-bottom:1px solid #ddd !important;
    padding:6px 0 !important;
  }
  #menu_table td{
    text-align:left !important;
    padding:4px 10px !important;
  }
  #red_light, #yellow_light, #green_light{
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    min-height:60px;
    padding:14px !important;
    margin-bottom:6px !important;
  }
  .light_text{
    margin-left:0 !important;
    display:block !important;
    text-align:center !important;
    line-height:normal !important;
    white-space:normal !important;
  }
  #stoplight_container a{
    display:block !important;
    white-space:normal !important;
  }
  #menu_container, #menu_header, #sections_container{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #stoplight_container{
    float:none !important;
    width:100% !important;
    height:auto !important;
    text-align:center !important;
  }
  #red_light, #yellow_light, #green_light{
    width:100% !important;
    max-width:350px;
    margin:0 auto !important;
    background-size:contain !important;
  }
  .light_text{
    margin-left:0 !important;
    text-align:center !important;
  }

  #profile_container{
    float:none !important;
    width:100% !important;
    height:auto !important;
    box-sizing:border-box !important;
    margin-top:10px !important;
  }

  /* the "edit info / continue course / logout" links row at the top of
     the student home screen — stack these like everything else instead
     of leaving them inline */
  #link_continue, #link_edit, #link_logout{
    display:block !important;
    width:100% !important;
    text-align:left !important;
    padding:8px 10px !important;
    box-sizing:border-box !important;
    border-bottom:1px solid #ddd;
  }

  #change_reg{
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px !important;
  }
  .change_label{
    text-align:left !important;
    padding:2px 0 !important;
  }

  /* the chapter review popup is absolutely positioned assuming an 890px
     viewport (left:50%, margin-left:-449px) — it will sit half off-screen
     on a phone; re-anchor it to fill the width instead */
  #chapreview{
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    box-sizing:border-box !important;
  }
  #chapreview iframe{
    width:100% !important;
    max-width:100% !important;
  }
  #reviewbar{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* the "notice" popup uses the same 50%-plus-negative-margin centering
     trick at a fixed offset built for desktop */
  #notice{
    left:0 !important;
    right:0 !important;
    width:90% !important;
    max-width:320px;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  /* catch-all for anything else chapters.css/menu.css still pins wide */
  #content_container *, #menu_container *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* course/menu pages: some graphics and tables are still wider than the
     screen and aren't shrinking. Rather than clip that content (which was
     hiding the right-hand portion of tables, headings and images with no
     way to reach it), center it and allow horizontal scroll so everything
     stays reachable */
  html, body{
    max-width:none;
  }
  /* the progress-meter + chapter-table wrapper sits in its own <table>
     directly in the page markup, outside #menu_container — catch it too */
  div[align="center"] > table, div[align="center"] > table tr,
  div[align="center"] > table td{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
  #content_container, #menu_container, #course_content,
  #template_container, .chapter_title, table, #Timer,
  .light_text, #stoplight_container, #red_light, #yellow_light, #green_light{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  body{
    max-width:100vw;
  }
}