/* Self-hosted fonts (SIL Open Font License, via Fontsource). Nothing loads from Google. */
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/fraunces-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/fraunces-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/fraunces-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/fraunces-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:400;src:url(/assets/fonts/fraunces-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:400;src:url(/assets/fonts/fraunces-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:500;src:url(/assets/fonts/fraunces-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:500;src:url(/assets/fonts/fraunces-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:600;src:url(/assets/fonts/fraunces-latin-ext-600-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:600;src:url(/assets/fonts/fraunces-latin-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:700;src:url(/assets/fonts/fraunces-latin-ext-700-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:700;src:url(/assets/fonts/fraunces-latin-700-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:800;src:url(/assets/fonts/inter-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:800;src:url(/assets/fonts/inter-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* MidGuided shared styles, used by midguided.com and midguided.ro.
   Aubergine header + hero, intro and a three-column grid of cards with a peach top band,
   a light-blue band holding the guide card, dark aubergine footer with the disclaimer.
   Light-only: the Brand Book defines one palette. */
:root {
  --aubergine: #3e2845;
  --aubergine-dark: #2c1b33;
  --peach: #ffc56d;
  --gold: #f0a93c;
  --gold-dark: #9a6410;
  --cream: #fffbf6;
  --cream-warm: #f6f1ee;
  --blue: #e5e7eb;
  --ink: #2c1b33;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: 76rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream-warm);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.wordmark {
  font-family: var(--display);
  line-height: 1;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark b { font-weight: 700; }
.wordmark i { font-style: italic; font-weight: 400; }

/* ---------- header + hero ---------- */
.top { background: var(--aubergine); color: var(--cream); }

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.6rem;
}
.masthead .wordmark { font-size: 1.4rem; color: var(--cream); justify-self: start; }
.masthead .wordmark i { color: var(--peach); }
.masthead .home-link {
  color: var(--peach);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.masthead .home-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.subscribe {
  justify-self: end;
  background: var(--peach);
  color: var(--aubergine-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  border-radius: 4px;
}
.subscribe:hover { background: var(--gold); }

.hero { padding-block: 3.5rem 5rem; }
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.75rem;
  max-width: 18ch;
  text-wrap: balance;
}
.hero .sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  color: var(--peach);
  margin: 0 0 1.6rem;
  max-width: 40ch;
}
.hero .intro {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  margin: 0;
  max-width: 62rem;
}
.hero .intro em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  color: var(--peach);
  font-size: 1.08em;
}

/* ---------- intro + cards ---------- */
.lead { padding-block: 4rem 4.5rem; }
.lead h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.15;
  color: var(--gold-dark);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.lead > .wrap > p {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  max-width: 66rem;
}

.cards {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.25rem;
  align-items: stretch;
}
@media (max-width: 60rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .cards { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }

.card {
  background: var(--cream);
  border-radius: 12px;
  border-top: 12px solid var(--peach);
  padding: 1.75rem 1.6rem 1.6rem;
  min-width: 0;
  /* each card spans four rows of the parent grid, so labels, titles,
     descriptions and links line up across a row whatever the title length */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  align-content: start;
}
@supports not (grid-template-rows: subgrid) {
  .card { display: flex; flex-direction: column; }
  .card .more { margin-top: auto; }
}
.card .label {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--aubergine-dark);
  margin: 0 0 1rem;
}
.card h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.25;
  color: var(--gold-dark);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.card p {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--aubergine);
}
.card .more {
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--aubergine-dark);
  align-self: end;
}
.card .more:hover { color: var(--gold-dark); }

/* ---------- the guide ---------- */
.guide-band { background: var(--blue); padding-block: 3.25rem; }
.guide {
  background: var(--cream-warm);
  border-radius: 6px;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 54rem) { .guide { grid-template-columns: minmax(0, 1fr); } }

/* portrait cover, same proportions as midguided.ro (about 5:7):
   kicker at the top, title in the middle, tagline at the bottom */
.cover {
  background: var(--aubergine);
  color: var(--cream);
  border-radius: 12px;
  aspect-ratio: 5 / 7;
  width: 100%;
  max-width: 100%;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.25rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 54rem) { .cover { max-width: 26rem; justify-self: center; } }
.cover .kicker {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  color: var(--peach);
}
.cover .kicker .wordmark { font-size: 1.3em; color: var(--cream); }
.cover .kicker .wordmark i { color: var(--peach); font-weight: 400; }
.cover h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.3;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}
.cover h3 .peri { color: var(--peach); }
.cover .tag { margin: 0; font-size: clamp(0.9rem, 1.1vw, 1rem); line-height: 1.5; }

.guide-copy { text-align: center; }
.guide-copy .eyebrow {
  margin: 0 0 0.75rem;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gold-dark);
}
.guide-copy .warn { color: var(--gold-dark); font-weight: 700; }
.guide-copy h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
  color: var(--aubergine);
  margin: 0 0 1.4rem;
}
.guide-copy > p { margin: 0 auto 1rem; font-size: 1rem; line-height: 1.6; max-width: 44rem; }

.signup {
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 46rem;
}
.field {
  position: relative;
  flex: 1 1 15rem;
  min-width: 0;
}
.field svg {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  color: var(--gold-dark);
  pointer-events: none;
}
.field label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.field input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.9rem 1rem 0.9rem 3rem;
  border: 1px solid var(--aubergine);
  border-right: 0;
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  text-align: left;
}
.field input::placeholder { color: var(--gold-dark); opacity: 1; }
.signup button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: inherit;
  font-weight: 500;
  font-size: 1.05rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--aubergine);
  border-radius: 0;
  background: var(--aubergine);
  color: var(--peach);
  cursor: pointer;
}
.signup button svg { width: 1.3rem; height: 1.3rem; }
.signup button:hover { background: var(--aubergine-dark); }
@media (max-width: 30rem) {
  .field input { border-right: 1px solid var(--aubergine); }
  .signup button { flex: 1 1 100%; justify-content: center; }
}
.guide-copy .fine {
  margin: 1.4rem auto 0;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  max-width: 46rem;
}
.guide-copy .form-msg {
  margin: 0.9rem auto 0;
  max-width: 46rem;
  font-size: 0.95rem;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 0.6rem 0.9rem;
}

/* ---------- footer ---------- */
.foot { background: var(--aubergine-dark); color: var(--cream); padding-block: 3rem 1.75rem; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
}
@media (max-width: 52rem) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot .about .wordmark { font-size: 1.6rem; color: var(--peach); display: inline-block; margin-bottom: 1.25rem; }
.foot .about p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.6; max-width: 34rem; }
.foot .about p b { font-weight: 700; }
.foot .about a { color: var(--peach); text-decoration: none; font-size: 0.9rem; }
.foot .about a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot nav { text-align: center; }
@media (max-width: 52rem) { .foot nav { text-align: left; } }
.foot h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0.25rem 0 1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot ul a { color: var(--peach); text-decoration: none; font-size: 0.95rem; }
.foot ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.copy { margin: 2.5rem 0 0; color: var(--peach); font-size: 0.85rem; }

@media (max-width: 34rem) {
  .masthead { grid-template-columns: 1fr auto; }
  .masthead .home-link { display: none; }
  .hero { padding-block: 2.5rem 4rem; }
  .hero h1 { margin-bottom: 1.75rem; }
}

.guide-copy .form-msg.is-error { border-left-color: #b4432f; }
/* honeypot: hidden from people, visible to bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup button[disabled] { opacity: .7; cursor: progress; }
.skip { position: absolute; left: -10000px; top: 0; background: var(--peach); color: var(--aubergine-dark); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }
.page { padding-block: 4rem 5rem; }
.page h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; margin: 0 0 1.25rem; color: var(--aubergine); }
.page p { max-width: 40rem; font-size: 1.05rem; }