/*
 * Looks Aesthetic Academy landing pages: program and homepage templates.
 *
 * The handoff's own <style> blocks, merged: the program pages' and the
 * homepage's are identical but for whygrid, which is added here. Rules for a
 * component a page does not have simply match nothing there.
 *
 * The !important everywhere is the handoff's: its layout is inline styles, and
 * only !important beats those.
 */

@font-face{font-family:Figtree;src:url("../fonts/Figtree-Variable.ttf") format("truetype");font-weight:300 900;font-style:normal;font-display:swap}

/* Steps, dialogs, errors and the sticky bar are toggled with [hidden]; an
   inline display must never win over it (an Oxford lesson, three times). */
[hidden]{display:none!important}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F7FAFD;color:#1F2A6E;font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;text-align:left}
input,select,textarea{font:inherit;color:inherit}
a{color:#1098D8;text-decoration:underline;text-underline-offset:2px}
a:hover{color:#0B6FA3}
[data-obj]{transition:box-shadow .16s,border-color .16s,background .16s}
[data-obj]:hover{border-color:#1098D8!important;box-shadow:0 6px 18px rgba(31,42,110,.16)!important;transform:translateY(-1px)}
[data-obj]{transition:box-shadow .16s,border-color .16s,background .16s,transform .16s}
[data-obj][data-sel="1"]{border-color:#1098D8!important;background:#E6F4FC!important;box-shadow:0 0 0 2px #1098D8 inset!important}
[data-obj]:hover [data-tick]{border-color:#1098D8!important}
[data-obj][data-sel="1"] [data-tick]{background:#2F7A43!important;border-color:#2F7A43!important}
[data-obj][data-sel="1"] [data-tick] svg{stroke:#fff}
[data-objb]{transition:box-shadow .16s,border-color .16s,background .16s,transform .16s}
[data-objb]:hover{border-color:#1098D8!important;box-shadow:0 6px 18px rgba(31,42,110,.14)!important;transform:translateY(-1px)}
[data-objb]:hover [data-tickb]{border-color:#1098D8!important}
[data-objb][data-sel="1"]{border-color:#1098D8!important;background:#E6F4FC!important;box-shadow:0 0 0 2px #1098D8 inset!important}
[data-objb][data-sel="1"] [data-tickb]{background:#2F7A43!important;border-color:#2F7A43!important}
[data-objb][data-sel="1"] [data-tickb] svg{stroke:#fff}
/* The program cards' hover, which the handoff carried as a design-tool style-hover attribute. */
[data-pcard]{transition:box-shadow .16s,border-color .16s}
[data-pcard][href]:hover{border-color:#1098D8!important;box-shadow:0 10px 28px rgba(31,42,110,.12)!important;color:#1F2A6E}
/* The FAQ's "+" is its only marker; Safari draws its own triangle otherwise. */
summary::-webkit-details-marker{display:none}
@keyframes ccc-fade{from{opacity:0}to{opacity:1}}
@keyframes ccc-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ccc-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ccc-spin{to{transform:rotate(360deg)}}
/* The one thing on the page that moves while a lead is in flight. Reduced
   motion slows it rather than stopping it: a still spinner says nothing. */
[data-lp-submit-spinner] svg{animation:ccc-spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){[data-lp-submit-spinner] svg{animation-duration:2s}}

/* The privacy policy dialog's text, so a pasted policy looks as delivered without inline styles. */
.lp-policy h2{margin:0;font-family:Figtree,sans-serif;font-size:32px;line-height:1.2;font-weight:600;color:#1F2A6E}
.lp-policy h3{margin:22px 0 0;font-size:17px;font-weight:600;color:#1F2A6E}
.lp-policy p{margin:8px 0 0;font-size:16px;line-height:1.6;color:#3A4A7A}
.lp-policy h2+p{font-size:14.5px;line-height:normal;color:#5F6E9C}
.lp-policy h2+p+h3{margin-top:26px}
.lp-policy ul,.lp-policy ol{margin:8px 0 0;padding-left:22px;font-size:16px;line-height:1.6;color:#3A4A7A}

@media (max-width:1080px){
  [data-m=valuegrid]{grid-template-columns:repeat(2,1fr)!important}
  [data-m=valuegrid]>*{border-left:0!important}
  [data-m=careergrid]{grid-template-columns:1fr!important}
  [data-m=careergrid]>*{border-left:0!important;padding-left:0!important;padding-right:0!important;border-top:1px solid rgba(31,42,110,.12);padding-top:26px!important;margin-top:26px!important}
  [data-m=careergrid]>*:first-child{padding-top:0!important;margin-top:0!important}
  /* Stacked CPB card: icon above the text, whole block centred. */
  [data-m=cpbcard]{grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important;gap:12px!important}
  [data-m=careergrid]>*:first-child{border-top:0}
}
/* Hero, header and form stack together at 1100px so the desktop layout never
   compresses into a narrow-tablet column between 900 and 1100px. */
@media (max-width:1100px){
  [data-m=whygrid]{grid-template-columns:1fr!important}
  /* Bottom CTA form: heading stacks above its supporting line. */
  [data-m=ctahead]{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
  [data-m=ctasub]{max-width:none!important}
  [data-m=herogrid]{grid-template-columns:1fr!important;gap:0!important}
  [data-m=herophoto]{position:relative!important;left:auto!important;right:auto!important;width:100%!important;height:290px!important}
  [data-m=herodesktop]{display:none!important}
  [data-m=heroslot]{top:0!important;width:100%!important;height:100%!important}
  [data-m=heroleft]{padding-top:28px!important;padding-bottom:36px!important;padding-left:0!important}
  [data-m=heroright]{padding-top:0!important;max-width:560px}
  [data-m=headbar]{flex-wrap:wrap!important;gap:12px!important;justify-content:center!important}
  [data-m=headmeta]{border-left:0!important;padding-left:0!important;text-align:center!important;flex:0 0 auto!important}
}
@media (max-width:900px){
  [data-m=ctgrid]{grid-template-columns:1fr!important}
  [data-m=ctgrid]>*{grid-column:auto!important;grid-row:auto!important;border-left:0!important;padding-left:0!important}
  [data-m=ctgrid]>*+*{margin-top:30px!important}
  [data-m=road]{grid-template-columns:1fr!important;gap:0!important}
  [data-m=roadline]{display:none!important}
  /* Fixed text column so every icon lands in the same vertical line, with the
     whole block centred as one unit. */
  [data-m=roadstep]{display:grid!important;grid-template-columns:56px 1fr!important;gap:24px!important;align-items:center!important;text-align:left!important;padding:14px 0!important;border-top:1px solid rgba(31,42,110,.12);width:100%!important;max-width:310px!important;justify-self:center!important;margin-left:auto!important;margin-right:auto!important}
  [data-m=roadstep]:first-of-type{border-top:0!important}
  [data-m=objgrid2]{grid-template-columns:1fr!important}
  [data-m=trust]{flex-direction:column!important;gap:16px!important;align-items:flex-start!important}
  [data-m=footgrid]{grid-template-columns:1fr!important;gap:20px!important;text-align:left!important}
  [data-m=footgrid]>*{border-left:0!important;padding-left:0!important}
  [data-m=valuegrid]{grid-template-columns:1fr!important}
  [data-m=h1]{font-size:32px!important}
  [data-m=h2]{font-size:27px!important}
  [data-m=formh]{font-size:32px!important}
}
@media (max-width:900px){
  [data-m=modalgrid]{grid-template-columns:1fr!important}
  [data-m=pitchpanel]{padding:22px 24px 20px!important}
  [data-m=pitchpanel] h3{font-size:19px!important}
  [data-m=pitchstats]{flex-direction:row!important;flex-wrap:wrap!important;gap:12px 24px!important;margin-top:14px!important}
  [data-m=pitchstats]>div>div:first-child{font-size:21px!important}
  [data-m=pitchstats]>div>div:last-child{display:none!important}
  [data-m=pitchtrust],[data-m=pitchquote]{display:none!important}
  [data-m=formcol]{padding:28px 22px 24px!important}
  [data-m=modalcard] [data-m=formh]{font-size:24px!important}
}
@media (max-width:760px){
  [data-m=ctafoot]{grid-template-columns:1fr!important;gap:10px!important}
  [data-m=ctanote]{grid-column:1!important}
}
/* PHONE ONLY (<=640px). Nothing here can reach the desktop layout. */
@media (max-width:640px){
  /* Jump to the form instantly rather than animating a long scroll. */
  html{scroll-behavior:auto}
  [role=dialog]{padding:12px!important}
  [data-m=modalcard]{border-radius:14px!important}
  [data-m=modalcard] [data-m=formh]{font-size:28px!important}

  section{padding-left:18px!important;padding-right:18px!important}

  /* --- Compact one-row header on phones; the CTA repeats below the facts --- */
  [data-m=headbar]{padding:9px 18px!important;gap:12px!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important}
  [data-m=headlogo] img{height:34px!important}
  [data-m=headmeta]{flex:1 1 auto!important;border-left:1px solid rgba(31,42,110,.16)!important;padding-left:12px!important;text-align:left!important}
  [data-m=headmeta]>div{font-size:11.5px!important;letter-spacing:.03em!important;line-height:1.35!important}
  [data-cta=header]{display:none!important}

  /* --- Full-bleed navy hero: no gutter around it --- */
  [data-m=herosection]{padding-left:0!important;padding-right:0!important}
  [data-m=herogrid]{padding-left:0!important;padding-right:0!important}
  [data-m=heroleft]{padding-left:18px!important;padding-right:18px!important}
  [data-m=heroright]{padding-left:18px!important;padding-right:18px!important}

  /* Short mobile-only supporting line. */
  [data-m=subdesk]{display:none!important}
  [data-m=submob]{display:block!important}
  /* Objection tiles: smaller icon and tick give the description a real text column. */
  [data-obj]{grid-template-columns:42px 1fr 24px!important;gap:14px!important;padding:14px!important}
  [data-obj]>span:first-child{width:42px!important;height:42px!important}
  [data-obj] [data-tick]{width:24px!important;height:24px!important}
  [data-m=card],[data-m=ctgrid]{padding:26px 20px!important}
  [data-m=ctacards]{grid-template-columns:1fr!important}
  [data-m=formcard]{padding:22px 18px 20px!important;border-radius:14px!important}
  /* Stat row reads as two rows of two rather than four squeezed columns. */
  [data-m=herostats]{grid-template-columns:1fr 1fr!important;gap:18px 14px!important;margin-top:26px!important}
  /* Paired fields stack so each input keeps a comfortable tap width. */
  [data-m=fpair]{grid-template-columns:1fr!important}
  [data-m=h1]{font-size:27px!important;line-height:1.2!important;text-wrap:balance;letter-spacing:-.01em!important}
  [data-m=h2]{font-size:24px!important}
  [data-m=formh]{font-size:27px!important;text-wrap:balance}
  [data-m=heroleft] p{font-size:17px!important}
  [data-m=herophoto]{height:290px!important}
  /* Sticky CTA sits over the footer, so reserve room for it. */
  footer{padding:24px 18px 96px!important}
  footer a{display:inline-block;padding:11px 0}
}