/* ============================================================================
   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}
}