/* =============================================================
   /free-review/ - one free digital review, October 2026
   Ported from the "Free Review" Claude Design file. Tokens come from
   tokens.css, chrome from site.css, colours from the five service pages
   handoff. Everything here is prefixed fr- (or scoped to .fr) so it
   cannot leak into other pages.

   Two states, switched by data-state on <main>: "open" while
   applications are open, "closed" from 5pm Monday 12 October.
   ============================================================= */

.fr { background: var(--warm-white); color: var(--navy); }
.fr[data-state="open"] .fr-closed,
.fr[data-state="closed"] .fr-open { display: none; }

.fr-wrap { max-width: 780px; margin: 0 auto; }
.fr-section { padding: 56px 24px; }
.fr-section--hero { padding: 56px 24px 44px; }
.fr-section--get { padding: 44px 24px 56px; }
.fr-section--fit { padding: 0 24px 56px; }
.fr-section--apply { background: #F3F3F1; scroll-margin-top: 76px; }
.fr-section--pick { padding-bottom: 72px; }

.fr a:not(.fr-btn) { color: #3A5B8C; text-decoration: underline; text-underline-offset: 2px; }
.fr a:not(.fr-btn):hover { color: var(--navy); }
.fr a:focus-visible,
.fr button:focus-visible,
.fr input:focus-visible,
.fr textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ------------------------------------------------------------ hero */

.fr-eyebrow {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3A5B8C;
}
.fr h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.fr-lede { margin: 0 0 24px; font-size: 18px; line-height: 1.68; color: #4A4A5A; }
.fr-deadline { margin: 0 0 28px; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.55; color: var(--navy); }
p.fr-closed.fr-deadline { margin-bottom: 0; }

.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  background: var(--navy);
  color: var(--warm-white);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out);
}
.fr-btn:hover { background: var(--navy-light); color: var(--warm-white); }

/* ------------------------------------------------------- headings */

.fr-h2 { margin: 0 0 24px; font-size: 24px; line-height: 1.2; }
.fr-h2--lg { margin-bottom: 10px; font-size: clamp(24px, 3vw, 32px); }
.fr h3 { font-size: 18px; line-height: 1.3; }

/* ---------------------------------------------- what you get grid */

.fr-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  background: hsl(220 20% 90%);
  border: 1px solid hsl(220 20% 90%);
  border-radius: var(--radius);
  overflow: hidden;
}
.fr-cell { background: var(--white); padding: 24px; }
.fr-cell h3 { margin: 0 0 10px; }
.fr-cell p { margin: 0; font-size: 16px; line-height: 1.7; color: #4A4A5A; }

/* ------------------------------------------------ who it is for */

.fr-fit {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.fr-fit__head {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #3A5B8C;
  font-size: 19px;
}
.fr-fit p { margin: 0; font-size: 16px; line-height: 1.72; color: #4A4A5A; }
.fr-fit__not .fr-fit__head { border-bottom-color: #C9C9C2; }
.fr-fit__not p { color: var(--muted-foreground); }

/* ---------------------------------------------------- apply, prose */

.fr-intro { margin: 0 0 28px; font-size: 17px; line-height: 1.7; color: #4A4A5A; }
.fr-aside { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }
.fr-prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: #4A4A5A; }
.fr-prose p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ MailerLite embed

   MailerLite injects its own stylesheet scoped to an id, with !important
   (#mlb2-NNNN.ml-form-embedContainer .ml-form-embedWrapper ...). The
   overrides below are anchored on #main.fr with one more class than
   MailerLite's selectors, so they win, and need !important too. The target is
   the site's form look: transparent container, white inputs with the
   blue hairline, navy button, muted privacy line. Hold the space while
   the embed loads so the page does not jump. */

#main.fr .ml-embedded { min-height: 420px; }
#main.fr .ml-embedded:has(.ml-form-embedContainer) { min-height: 0; }

#main.fr .ml-embedded .ml-form-embedContainer,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 0 !important; }

#main.fr .ml-embedded .ml-form-embedContainer,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper p,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper label,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper input,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper textarea,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper button {
  font-family: var(--font-body) !important;
}

#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-fieldRow { margin-bottom: 16px !important; }
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-fieldRow label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--navy) !important;
}

#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper input.form-control,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper textarea.form-control {
  box-sizing: border-box !important;
  width: 100% !important;
  background: var(--white) !important;
  border: 1px solid #CBD8E8 !important;
  border-radius: 2px !important;
  padding: 12px 14px !important;
  font-size: 16px !important; /* 16px or iOS zooms on focus */
  line-height: 1.5 !important;
  color: var(--navy) !important;
  height: auto !important;
}
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper textarea.form-control {
  min-height: calc(3 * 1.5em + 26px) !important; /* three lines */
  resize: vertical !important;
}
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper input.form-control::placeholder,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper textarea.form-control::placeholder { color: var(--muted-foreground) !important; }
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper input.form-control:focus,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper textarea.form-control:focus {
  border-color: #3A5B8C !important;
  outline: 3px solid var(--navy) !important;
  outline-offset: 2px !important;
}
/* Error state: MailerLite's own red border stays. */

/* reCAPTCHA is left as MailerLite renders it. MailerLite scales it down on
   small screens; keep the box from being clipped inside the measure. */
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-recaptcha {
  float: none !important;
  overflow: visible !important;
  margin: 0 0 20px !important;
}
/* The box is empty until Google fills it, so hold its height or the
   button rides up underneath it. MailerLite scales it to .78 below 480px. */
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .g-recaptcha { min-height: 78px; }
@media (max-width: 480px) {
  #main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .g-recaptcha { min-height: 61px; }
}

#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedPermissions,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedPermissionsContent p {
  float: none !important;
  margin: 0 0 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--muted-foreground) !important;
}
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedPermissionsContent a { color: #3A5B8C !important; }

#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit { float: none !important; clear: both !important; margin: 0 !important; text-align: left !important; }
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit button,
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit button.primary {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 28px !important;
  background: var(--navy) !important;
  color: var(--warm-white) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: var(--fw-semibold) !important;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit button:hover { background: var(--navy-light) !important; }
@media (min-width: 640px) {
  #main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit button,
  #main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit button.primary { width: auto !important; }
}

/* Success block: same measure as the form, no box. The copy itself
   ("Got it." and the reply line) is set in MailerLite. */
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody h4 {
  margin: 0 0 12px !important;
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1.2 !important;
  color: var(--navy) !important;
}
#main.fr .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody p {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #4A4A5A !important;
}