/**
 * Computek landing pages: program pages and the homepage.
 *
 * Taken verbatim from the delivered pages' <helmet> <style> blocks. The design
 * itself lives in each element's inline style, exactly as handed off, so this
 * file is only the resets, the sticky-CTA toggle and the two breakpoints.
 *
 * It selects on the delivered id hooks — r-* on a program page, h-* on the
 * homepage — and on [data-r="nbrow"], so the templates reproduce those ids
 * exactly. Renaming one silently drops that element out of the mobile layout.
 *
 * Do not "tidy" this into classes: the inline styles would then have nothing to
 * be overridden from, and the mobile layout is built entirely out of these
 * !important overrides.
 */

/* ---------------------------------------------------- program pages (r-*) */
body { margin: 0; background: #F7F3EC; font-family: 'Figtree', sans-serif; color: #113A6C; min-width: 1100px; }
  a { color: #144F82; text-decoration: none; }
  a:hover { color: #082B57; }
  textarea::placeholder, input::placeholder { color: #93A7BC; }
  textarea:focus, input:focus { outline: 2px solid #D7A11E; outline-offset: -1px; }
  #r-stickycta { display: none; }
@media (max-width: 1099px) {
  body { min-width: 0 !important; padding-bottom: 78px !important; }
  #r-stickycta { display: block !important; }
  #r-hero { min-height: 0 !important; display: block !important; }
  #r-photo { position: relative !important; inset: auto !important; height: 340px; display: block; }
  #r-photo .r-img-desk, #r-bphoto .r-img-desk { display: none !important; } #r-photo .r-img-mob, #r-bphoto .r-img-mob { display: block !important; }
  #r-plane { position: relative !important; inset: auto !important; width: 100% !important; clip-path: none !important; padding: 26px 20px !important; box-sizing: border-box; }
  #r-plane h1 { font-size: 36px !important; }
  #r-formzone { position: relative !important; width: 100% !important; padding: 24px 16px !important; box-sizing: border-box; }
  #r-facts { grid-template-columns: 1fr 1fr !important; row-gap: 16px !important; }
  #r-facts > div { border-right: none !important; padding: 4px 8px !important; }
  #r-nbsec { padding: 32px 16px !important; }
  #r-nbgrid { grid-template-columns: 1fr !important; }
  [data-r="nbrow"] { grid-template-columns: 1fr !important; gap: 14px !important; padding: 28px 0 !important; }
  [data-r="nbrow"] > div:first-child { font-size: 54px !important; }
  #r-bwrap { padding: 0 !important; }
  #r-bridge { display: block !important; min-height: 0 !important; }
  #r-bgold { display: none !important; }
  #r-bphoto { position: relative !important; inset: auto !important; width: 100% !important; height: 340px !important; clip-path: none !important; }
  #r-bstats { grid-template-columns: 1fr 1fr !important; }
  #r-bplane { width: 100% !important; padding: 28px 20px 32px !important; }
  #r-bplane p, #r-bplane div[style*="max-width: 38ch"] { max-width: none !important; }
  #r-bplane div[style*="font-size: 40px"] { font-size: 30px !important; }
  #r-ctagrid { grid-template-columns: 1fr !important; gap: 20px !important; }
  #r-ctainner { grid-template-columns: 1fr !important; }
  #r-footgrid { grid-template-columns: 1fr !important; gap: 20px !important; justify-items: center; text-align: center; }
  #r-topbar { padding: 10px 16px !important; }
  #r-topbar img { width: 170px !important; height: 40px !important; }
  #r-topbar a, #r-topbar button { display: none !important; }
}
@media (max-width: 560px) {
  #r-plane h1 { font-size: 30px !important; }
  #r-ctainner div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  #r-facts { grid-template-columns: 1fr !important; }
  #r-namerow, #r-modalnames, #r-modalcontact, #r-modaltopics { grid-template-columns: 1fr !important; }
  #hero-form > div[style*="justify-content: space-between"] { flex-direction: column !important; gap: 10px !important; }
}
/* -------------------------------------------------------- homepage (h-*) */
body { margin: 0; font-family: 'Figtree', sans-serif; background: #F7F3EC; color: #113A6C; -webkit-font-smoothing: antialiased; }
a { color: #144F82; text-decoration: none; }
a:hover { color: #D7A11E; }
textarea::placeholder, input::placeholder { color: #93A7BC; }
textarea:focus, input:focus, select:focus { outline: 2px solid #D7A11E; outline-offset: -1px; }
#h-stickycta { display: none; }
@media (max-width: 1099px) {
  body { padding-bottom: 78px !important; }
  #h-stickycta { display: block !important; }
  #h-hero { min-height: 0 !important; display: block !important; }
  #h-photo { position: relative !important; inset: auto !important; height: 340px; display: block; }
  #h-photo .h-img-desk, #h-bphoto .h-img-desk { display: none !important; } #h-photo .h-img-mob, #h-bphoto .h-img-mob { display: block !important; }
  #h-plane { position: relative !important; inset: auto !important; width: 100% !important; clip-path: none !important; padding: 26px 20px !important; box-sizing: border-box; }
  #h-plane h1 { font-size: 36px !important; }
  #h-formzone { position: relative !important; width: 100% !important; padding: 24px 16px !important; box-sizing: border-box; }
  #hero-form { max-width: none !important; }
  #h-bwrap { padding: 0 !important; }
  #h-bridge { display: block !important; min-height: 0 !important; }
  #h-bgold { display: none !important; }
  #h-bphoto { position: relative !important; inset: auto !important; width: 100% !important; height: 340px !important; clip-path: none !important; }
  #h-bplane { width: 100% !important; padding: 28px 20px 32px !important; }
  #h-bplane div[style*="max-width: 38ch"] { max-width: none !important; }
  #h-bplane div[style*="font-size: 40px"] { font-size: 30px !important; }
  #h-heroimg { aspect-ratio: 16 / 10 !important; }
  #h-facts { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  #h-facts > div { border-right: none !important; padding: 0 !important; }
  .h-grid { grid-template-columns: 1fr !important; }
  .h-pad { padding-left: 20px !important; padding-right: 20px !important; }
  #h-ctagrid { grid-template-columns: 1fr !important; gap: 20px !important; }
  #h-ctainner { grid-template-columns: 1fr !important; }
  #h-footgrid { grid-template-columns: 1fr !important; text-align: left !important; gap: 18px !important; }
  #h-footgrid > div { text-align: left !important; }
  #h-topbar { padding: 10px 16px !important; }
  #h-topbar img { width: 170px !important; height: 44px !important; }
  #h-topbar button { display: none !important; }
}
@media (max-width: 560px) {
  #h-plane h1 { font-size: 30px !important; }
  #h-ctainner div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  #h-facts { grid-template-columns: 1fr !important; }
  #h-modalnames, #h-modalcontact, #h-modaltopics { grid-template-columns: 1fr !important; }
  #hero-form > div[style*="justify-content: space-between"] { flex-direction: column !important; gap: 10px !important; }
}
/*
 * The handoff expresses hover with a style-hover attribute, a feature of its
 * own renderer. These are the same states as plain CSS, so the markup needs no
 * inline event handlers.
 */
#r-topbar button:hover, #h-topbar button:hover,
button[data-lp-next]:hover, button[data-lp-submit]:hover,
button[data-lp-next-1]:hover, button[data-lp-next-2]:hover,
#r-stickycta button:hover, #h-stickycta button:hover { background: #C08F15 !important; }
button[data-lp-back]:hover { background: #E6E0D2 !important; }

/*
 * The privacy panel's content. It is editor HTML rather than delivered markup,
 * so it is the one block styled by class; the values match the delivered panel.
 */
.lp-policy h2 { font-size: 24px; font-weight: 800; color: #113A6C; margin: 0; }
.lp-policy h3 { font-size: 14.5px; font-weight: 800; color: #144F82; margin: 18px 0 0; }
.lp-policy p { font-size: 13.5px; line-height: 1.75; color: #4A5E76; margin: 6px 0 0; }

/*
 * Make [hidden] actually hide.
 *
 * The delivered markup styles every element inline, and an inline
 * `display: flex` beats the [hidden] attribute's UA `display: none`.
 * Everything this build shows and hides — the two overlays, the three modal
 * step panels, the picks summary, the step buttons — is toggled by `hidden`,
 * so without this they render all at once: the modal and privacy panel open on
 * page load, and all three form steps visible together.
 *
 * Deliberately a blanket rule rather than a list of selectors. Naming them one
 * by one is how the step panels were missed after the overlays were fixed.
 */
[hidden] { display: none !important; }