/* ==========================================================================
   English With Samar — VSL funnel landing pages
   Shared stylesheet for the opt-in, survey, calendar and thank-you pages.
   Values are lifted from the Claude Design prototypes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts

   Open Sauce One ships with the repo (SIL Open Font License — see
   assets/fonts/OpenSauceOne-OFL.txt).

   Brastika is the display face, used for the wordmark and every headline.
   The demo cut carries no comma and no full stop, so those fall back to Open
   Sauce One mid-headline — worth remembering when writing new headline copy.
   See assets/fonts/README.md for that and for its licence terms.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Brastika';
  src: url('../fonts/Brastika-Black.woff2') format('woff2'),
       url('../fonts/Brastika-Black.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --navy: #2d417d;
  --navy-dark: #233460;
  --navy-link-hover: #1c2c5e;
  --ink: #1c2436;
  --body: #3d4a66;
  --muted: #7c88a3;
  --slot-label: #6d7ea3;
  --slot-label-faint: #96a5c2;
  --sky: #c2ddf2;
  --sky-tint: #eef5fb;
  --card-border: #dfeaf5;
  --page: #fdfdfc;

  --shadow-cta: 0 14px 30px -14px rgba(45, 65, 125, .55);
  --shadow-card: 0 12px 28px -22px rgba(45, 65, 125, .35);
  --shadow-panel: 0 16px 36px -26px rgba(45, 65, 125, .4);

  --stripe-pale: repeating-linear-gradient(-45deg, #e8f1fa, #e8f1fa 14px, #f2f7fc 14px, #f2f7fc 28px);
  --stripe-blue: repeating-linear-gradient(-45deg, #dcebf7, #dcebf7 14px, #eaf3fa 14px, #eaf3fa 28px);
  --stripe-blue-tight: repeating-linear-gradient(-45deg, #dcebf7, #dcebf7 12px, #eaf3fa 12px, #eaf3fa 24px);

  --font-display: 'Brastika', 'Open Sauce One', Helvetica, Arial, sans-serif;
  --font-body: 'Open Sauce One', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* The funnel steps pin their footer to the bottom on short pages. */
body.is-column {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.is-column main {
  flex: 1;
}

/* Set by JS while the opt-in modal is open. */
body.is-locked {
  overflow: hidden;
}

a {
  color: var(--navy);
}

a:hover {
  color: var(--navy-link-hover);
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--page);
}

.section--tint {
  background: var(--sky-tint);
}

.shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 22px;
  position: relative;
  z-index: 1;
}

.shell--760 { max-width: 760px; }
.shell--820 { max-width: 820px; }
.shell--860 { max-width: 860px; }

/* Vertically stacked, centre-aligned shell used by the hero and funnel steps. */
.shell--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.shell--hero {
  padding: 60px 22px 64px;
  gap: 22px;
}

.shell--step { padding: 52px 22px 64px; }
.shell--confirm { padding: 56px 22px 20px; }
.shell--steps-list { padding: 48px 22px; }
.shell--quotes { padding: 56px 22px; }

/* Decorative background circles. */
.blob {
  position: absolute;
  border-radius: 50%;
  background: var(--sky);
  pointer-events: none;
}

.blob--hero-tr {
  top: -120px;
  right: -120px;
  width: 340px;
  height: 340px;
  opacity: .45;
}

.blob--hero-bl {
  bottom: -140px;
  left: -140px;
  width: 360px;
  height: 360px;
  opacity: .3;
}

.blob--tr {
  top: -130px;
  right: -130px;
  width: 320px;
  height: 320px;
  opacity: .4;
}

.blob--tl {
  top: -130px;
  left: -130px;
  width: 320px;
  height: 320px;
  opacity: .4;
}

.blob--confirm {
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  opacity: .4;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--navy);
}

.brand--sm {
  font-size: 22px;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 50px);
  line-height: 1.14;
  margin: 0 auto;
  max-width: 820px;
  color: var(--navy);
  text-wrap: balance;
}

.h1--step {
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.16;
  margin: 0;
}

.h1--confirm {
  font-size: clamp(30px, 5vw, 46px);
  margin: 0;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--navy);
  margin: 0 0 34px;
  text-align: center;
  text-wrap: balance;
}

.h2--sm {
  font-size: clamp(24px, 3.6vw, 34px);
  margin: 0 0 30px;
}

.lede {
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--body);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.copy {
  font-size: 16px;
  color: var(--body);
  margin: 0;
  line-height: 1.65;
  max-width: 520px;
}

.copy--540 { max-width: 540px; }

.copy--confirm {
  font-size: 17px;
  max-width: 560px;
}

.watch-prompt {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.fineprint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pills & badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--sky);
  border-radius: 999px;
  padding: 8px 18px;
}

.pill__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy);
}

.pill__text {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.eyebrow {
  align-self: flex-start;
  background: var(--sky);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

.chip {
  background: var(--sky-tint);
  border: 1px solid var(--sky);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  border: none;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 18px 40px;
  box-shadow: var(--shadow-cta);
}

.btn:hover {
  background: var(--navy-dark);
}

.btn--sm {
  font-size: 17px;
  padding: 17px 36px;
}

.btn--block {
  width: 100%;
  height: 54px;
  padding: 0;
  border-radius: 9px;
  font-size: 17px;
  box-shadow: none;
  margin-top: 4px;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cta--start {
  align-items: flex-start;
}

.cta--after-grid {
  margin-top: 36px;
}

.cta__note {
  font-size: 12px;
  color: var(--muted);
}

.textlink {
  font-size: 13px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Embed slots — swap the inner markup for the real video / agenci.io snippet
   -------------------------------------------------------------------------- */
.slot {
  width: 100%;
  border-radius: 14px;
  background: var(--stripe-pale);
  border: 1px solid var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.slot--video {
  max-width: 780px;
  aspect-ratio: 16 / 9;
}

.slot--video-sm {
  max-width: 720px;
  aspect-ratio: 16 / 9;
}

.slot__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slot-label);
}

.play {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding-left: 5px;
}

.play--sm {
  width: 42px;
  height: 42px;
  font-size: 14px;
  padding-left: 3px;
}

/* White card that frames an agenci.io widget. */
.panel {
  width: 100%;
  background: #fff;
  border: 1px solid var(--sky);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-panel);
}

/* Third-party widget iframes (survey, booking). form_embed.js sets an inline
   height once the widget reports its own size; the min-height holds the panel
   open until then so the page does not jump as it loads. The two min-heights
   match what the design reserved for each widget. */
.embed {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  min-height: 520px;
}

.embed--calendar {
  min-height: 600px;
}

/* --------------------------------------------------------------------------
   Authority section
   -------------------------------------------------------------------------- */
.authority {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  align-items: center;
}

.authority__portrait {
  flex: 0 0 290px;
  max-width: 310px;
}

.authority__body {
  flex: 1;
  min-width: 300px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portrait-card {
  background: #fff;
  border: 1px solid var(--sky);
  border-radius: 16px;
  padding: 10px;
}

.portrait-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: var(--stripe-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-card__caption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  padding: 8px 6px;
  font-size: 12px;
  color: var(--body);
  line-height: 1.45;
}

.portrait-card__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.authority__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--navy);
  margin: 0 0 6px;
}

.authority__role {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.authority__bio {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  margin: 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--sky);
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--body);
}

.stat b {
  color: var(--navy);
  font-weight: 700;
}

.pullquote {
  border-left: 3px solid var(--navy);
  padding: 6px 18px;
  margin: 0;
  font-style: italic;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.7;
}

.social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-proof__text {
  font-size: 13px;
  color: var(--body);
}

.avatars {
  display: flex;
}

/* 34px, not 30px: the prototype sized these content-box, so the 2px ring sat
   outside the 30px circle. 34px under border-box reproduces what it rendered. */
.avatars span {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--sky-tint);
}

.avatars span + span {
  margin-left: -9px;
}

.avatars span:nth-child(1) { background: linear-gradient(135deg, #9db6d6, #c2ddf2); }
.avatars span:nth-child(2) { background: linear-gradient(135deg, #8aa6cb, #b5d4ee); }
.avatars span:nth-child(3) { background: linear-gradient(135deg, #7796c0, #a8cbe9); }
.avatars span:nth-child(4) { background: linear-gradient(135deg, #6486b5, #9bc2e4); }
.avatars span:nth-child(5) { background: linear-gradient(135deg, #5176aa, #8eb9df); }

/* --------------------------------------------------------------------------
   Story / testimonial cards
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.story {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
}

.story__quote {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

.story__thumb {
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  background: var(--stripe-blue-tight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.story__who {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.story__detail {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

.quote-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
}

.quote-card__text {
  font-size: 14px;
  color: var(--body);
  line-height: 1.65;
  margin: 0;
}

.quote-card__attrib {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Funnel step indicator
   -------------------------------------------------------------------------- */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.steps__bar {
  width: 34px;
  height: 6px;
  border-radius: 99px;
  background: var(--sky);
}

.steps__bar.is-done {
  background: var(--navy);
}

.steps__label {
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Thank-you page
   -------------------------------------------------------------------------- */
.check {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}

.next-step {
  background: #fff;
  border: 1px solid var(--sky);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.next-step__num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.next-step__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.next-step__text {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  width: 100%;
  background: var(--navy);
  color: var(--sky);
}

.footer__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 22px;
  text-align: center;
  font-size: 12px;
}

.footer__inner--tall {
  padding: 34px 22px;
}

.footer__disclaimer {
  margin: 12px auto 0;
  max-width: 760px;
  font-size: 11px;
  line-height: 1.7;
  opacity: .8;
}

/* --------------------------------------------------------------------------
   Opt-in modal
   -------------------------------------------------------------------------- */
.modal {
  border: none;
  padding: 0;
  background: #fff;
  border-radius: 16px;
  width: calc(100% - 40px);
  max-width: 440px;
  max-height: calc(100% - 40px);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
}

.modal::backdrop {
  background: rgba(28, 36, 54, .55);
}

.modal__inner {
  padding: 32px 28px;
  position: relative;
  text-align: left;
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
}

.modal__close:hover {
  color: var(--navy);
}

.modal__intro {
  font-size: 15px;
  color: var(--body);
  margin: 0 0 6px;
  text-align: center;
  line-height: 1.6;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--sky);
  border-radius: 9px;
  padding: 0 14px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
}

.form input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(45, 65, 125, .15);
}

.form button[type="submit"]:disabled {
  opacity: .7;
  cursor: default;
}

/* Dial-code selector sitting alongside the phone field. The select is capped
   so a long country name truncates after the dial code rather than crowding
   out the number, which is why the option text leads with "+<code>". */
.field-phone {
  display: flex;
  gap: 8px;
}

.field-phone__country {
  flex: 0 0 116px;
  width: 116px;
  height: 48px;
  border: 1px solid var(--sky);
  border-radius: 9px;
  padding: 0 6px 0 10px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}

.field-phone__country:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(45, 65, 125, .15);
}

.field-phone input {
  flex: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}