/* ==========================================================================
   Serenes Academy — Ian Lin
   One stylesheet for the whole site. Change something here and it changes
   on every page. Nothing else needs touching.
   ========================================================================== */

/* --- 1. Brand colours ---------------------------------------------------
   These are the only colours the site uses. Change a value here and it
   updates everywhere. --primary is the clay orange on buttons and labels. */

:root {
  /* Colours matched to the live Starter Kit page at serenesacademy.com.
     Near-white base, warm cream bands, espresso text, terracotta actions,
     caramel bronze headlines. */
  --background: #FCFCFC;         /* Near white. The base canvas. */
  --cream:      #F3ECDB;         /* Warm cream. Alternating section bands. */
  --card:       #FFFFFF;         /* Cards sit white on cream. */
  --foreground: #2A2018;         /* Espresso. All body text. No black anywhere. */
  --bronze:     #8B6E4C;         /* Caramel bronze. Headlines. Never body text. */
  --gold:       #E4B45C;         /* Honey gold. Underlines and accents only. Never text. */
  --primary:    #C4633F;         /* Terracotta clay. Buttons, links, eyebrow labels. */

  --oat:    #F3ECDB;             /* same warm cream, kept for the sign-up block */
  --border: #E7DECB;
  --input:  #E7DECB;

  --primary-hover: #A9522F;
  --primary-foreground: #F3ECDB; /* cream text on a terracotta button */
  --ink-soft: #2A2018;           /* body paragraphs stay espresso */
  --muted-foreground: #4A3D31;   /* espresso lightened, for small print only */

  --radius: 1rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2rem;

  --shadow-soft: 0 1px 2px rgba(42, 32, 24, .04), 0 12px 30px -18px rgba(42, 32, 24, .18);
  --shadow-lift: 0 2px 6px rgba(42, 32, 24, .05), 0 24px 48px -24px rgba(42, 32, 24, .25);

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- 2. Reset and base -------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

/* Big headlines carry the caramel bronze. Card titles stay espresso so they
   do not compete with the section heading above them. */
h1, h2, blockquote { color: var(--bronze); }
h3, h4 { color: var(--foreground); }

p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

/* --- 3. Layout helpers -------------------------------------------------- */

.wrap      { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap-mid  { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.wrap-slim { max-width: 840px;  margin: 0 auto; padding: 0 20px; }

.section        { padding: 60px 0; }
.section-tight  { padding: 56px 0; }
.bg-cream { background: var(--cream); }
.bg-oat   { background: var(--oat); }
.border-bottom { border-bottom: 1px solid var(--border); }

.stack > * + * { margin-top: 22px; }   /* even spacing between paragraphs */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* --- 4. Type ------------------------------------------------------------ */

.eyebrow {
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}

h1, .h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2, .h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3, .h3 { font-size: 1.25rem; }

.lead      { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); }
.body-text { font-size: 1.0625rem; line-height: 1.7;  color: var(--ink-soft); }
.body-lg   { font-size: 1.25rem;   line-height: 1.7;  color: var(--ink-soft); }
.small     { font-size: .975rem;   line-height: 1.65; color: var(--muted-foreground); }
.center    { text-align: center; }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-outline { background: var(--card); color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }

/* --- 6. Cards ----------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.card-plain { border: none; }

a.card { text-decoration: none; display: block; transition: box-shadow .2s ease; }
a.card:hover { box-shadow: var(--shadow-lift); }

.card h3 { margin-bottom: 12px; }

/* --- 7. Header and navigation ------------------------------------------ */

.site-header {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 16px;
}

.brand { text-decoration: none; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.brand-sub {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 3px;
}

.site-nav ul { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  text-decoration: none;
  font-size: .975rem;
  color: var(--foreground);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--primary); }
.site-nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }

/* The two items on the far right: a plain log-in link, then the free offer
   as a button. Same pattern the big personal-brand sites use. */
.site-nav .nav-sep { margin-left: 10px; padding-left: 30px; position: relative; }
.site-nav .nav-sep::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  border-left: 1px solid var(--border);
}
.site-nav .nav-cta a,
.site-nav .nav-cta button { border-bottom: none; padding: 11px 24px; font-size: .9rem; color: var(--primary-foreground); }
.site-nav .nav-cta a:hover,
.site-nav .nav-cta button:hover { color: var(--primary-foreground); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--foreground);
}

/* --- 8. Hero ------------------------------------------------------------ */

.hero { padding: 64px 0; }
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.align-start { align-items: flex-start; }

/* A hero that is a photograph, with the text sitting on top of it.
   The gradient is what keeps the words readable over a bright picture. */
.hero-photo {
  position: relative;
  background-size: cover;
  background-position: center top;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 72px 0;
}
/* Programs hero only. Same height as every other photo hero. The 78% anchor
   holds Ian at the same spot in the frame at every width, matching where he
   sat on the original hero, under the Free Resource button. */
.hero-photo-tall { background-position: 78% top; }
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(42,32,24,.86) 0%, rgba(42,32,24,.72) 38%, rgba(42,32,24,.20) 70%, rgba(42,32,24,.05) 100%);
}
.hero-photo > * { position: relative; }
.hero-photo h1, .hero-photo .lead, .hero-photo .eyebrow { color: #F3ECDB; }
.hero-photo .eyebrow { color: #E4B45C; }
.hero-photo .hero-photo-text { max-width: 620px; }
@media (max-width: 860px) {
  .hero-photo { min-height: 380px; }
  .hero-photo::before { background: linear-gradient(180deg, rgba(42,32,24,.82) 0%, rgba(42,32,24,.66) 100%); }
}
.hero h1 { margin-top: 16px; }
.hero h1 { max-width: 22ch; }
.hero .lead { margin-top: 24px; max-width: 34em; }

.media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--oat);
}

/* Placeholder shown where a real photo or video will go.
   Delete the .placeholder div and drop an <img> in its place. */
.placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: var(--cream);
  border: 2px dashed var(--border);
  border-radius: var(--radius-xl);
  color: var(--muted-foreground);
  font-size: .9rem;
}

/* A photo that sits straight on the page with no card around it —
   used for the cut-out book image. */
.media-bare { background: none; box-shadow: none; border-radius: 0; }
.photo-portrait { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.placeholder-video { aspect-ratio: 16 / 9; }
.placeholder-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 1.25rem;
}

/* --- 9. Quote ----------------------------------------------------------- */

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3;
  margin: 24px 0 0;
}

/* --- 10. Numbered step cards ------------------------------------------- */

.step-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--primary);
  display: block;
  margin-bottom: 10px;
}

/* --- 11. Bullet list ---------------------------------------------------- */

.dot-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--muted-foreground);
  font-size: .975rem;
  line-height: 1.65;
}
.dot-list li + li { margin-top: 16px; }
.dot-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--primary);
}

/* --- 12. Course listing ------------------------------------------------- */

.course {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}
.course + .course { margin-top: 28px; }
.course:nth-child(even) .course-media { order: -1; }
.course-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--primary);
  margin-top: 6px;
}

/* --- 13. Pill row (socials) -------------------------------------------- */

.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--foreground);
}
.pill:hover { color: var(--primary); border-color: var(--primary); }

.tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 20px;
}

/* --- 14. Forms ---------------------------------------------------------- */

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--foreground);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.btn-full { width: 100%; justify-content: center; }

.form-error {
  color: var(--primary);
  font-size: .9rem;
  font-weight: 600;
  margin: -6px 0 20px;
}
.form-success h3 {
  color: var(--bronze);
  font-family: var(--font-display);
}

.form-note { font-size: .85rem; color: var(--muted-foreground); margin-top: 14px; }

/* Inline sign-up strip for the free guide */
.capture {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 44px;
}
.capture-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.capture-form input {
  flex: 1 1 260px;
  padding: 13px 18px;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 1rem;
}

/* --- 15. Footer --------------------------------------------------------- */

.site-footer {
  background: var(--foreground);      /* espresso */
  color: #F3ECDB;                     /* warm cream text */
  padding: 60px 0 44px;
  margin-top: 0;
}
.site-footer a { color: #F3ECDB; }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand-name { color: #F3ECDB; }
.site-footer .brand-sub,
.site-footer .small { color: rgba(243, 236, 219, .72); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-grid h4 {
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 236, 219, .62);
  margin-bottom: 14px;
}
.footer-grid a { text-decoration: none; font-size: .975rem; }
.footer-grid a:hover { color: var(--primary); }
.footer-grid li + li { margin-top: 10px; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(243, 236, 219, .18);
  font-size: .875rem;
  color: rgba(243, 236, 219, .62);
}

/* --- 16. Small screens -------------------------------------------------- */

@media (max-width: 1040px) and (min-width: 861px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .course { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .course:nth-child(even) .course-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .section { padding: 56px 0; }
  .capture { padding: 30px; }

  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px 22px;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-top: 1px solid var(--border); }
  .site-nav a { display: block; padding: 14px 0; }
  .site-nav .nav-sep { margin-left: 0; padding-left: 0; border-left: none; }
  .site-nav .nav-cta { border-top: none; padding-top: 16px; }
  .site-nav .nav-cta a { display: inline-flex; padding: 12px 26px; }
  .site-header .wrap { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* --- 14. Chart tool -----------------------------------------------------
   The live chart on the home page. Type a date of birth, get the triangle
   on the left and the reading on the right. */

.chart-tool {
  margin-top: 36px;
  padding: 34px 34px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}

.chart-form { display: grid; gap: 10px; }
.chart-label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}
.chart-selects { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.chart-field-btn label { visibility: hidden; }
.chart-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
  margin-top: 26px;
}
.chart-field { display: grid; gap: 6px; }
.chart-field:nth-child(1) { flex: 0 1 180px; }
.chart-field:nth-child(2) { flex: 0 1 92px; }
.chart-field:nth-child(3) { flex: 0 1 110px; }
.chart-field label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.chart-field select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
}
.chart-field select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chart-btn { flex: 0 0 auto; }
.chart-error { color: var(--primary); font-size: .9375rem; }

.chart-figure { margin-top: 0; }
.chart-svg { width: 100%; max-width: 400px; margin: 0 auto; }

.chart-apex-fill { fill: rgba(228, 180, 92, .18); }

/* Proportions, spacing and type sizes are measured off chart-triangle.png
   so the live chart matches the printed one. Do not eyeball these. */
.chart-outline {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 8.5;
  stroke-linejoin: round;
}
.chart-rules {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 8.5;
  stroke-linecap: butt;
}
.chart-num {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 600;
  fill: var(--foreground);
  text-anchor: middle;
}
.chart-num-core { }   /* same size as every other number. Measured, do not change. */
.chart-raw {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 600;
  fill: var(--foreground);
  text-anchor: middle;
}
.chart-cap {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  fill: var(--foreground);
  text-anchor: middle;
}

.chart-tool-right { align-self: start; }
.chart-empty { color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.7; }
.chart-readout .chart-kicker {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}
.chart-readout h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--bronze);
  margin-top: 6px;
}
.chart-readout .chart-body {
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.chart-readout .chart-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  color: var(--muted-foreground);
}
.chart-readout .chart-more {
  margin-top: 10px;
  font-size: .9375rem;
  color: var(--muted-foreground);
}
.chart-readout .chart-more a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .chart-tool { padding: 24px; }
  .chart-split { grid-template-columns: 1fr; gap: 28px; }
  .chart-tool-right { align-self: start; }
}

/* Photo in the free guide block. Portrait, so it is capped rather than
   stretched to the column. */
.guide-photo { max-width: 320px; margin-left: auto; margin-right: auto; }

/* --- 16. About page: mission block and story cards --------------------- */

.mission {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}
.mission .lead { color: var(--muted-foreground); }

/* Two cards carrying the story. The image and text swap sides between
   them, which is done by the order they sit in the HTML. */
.story-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
  padding: 44px;
}
.story-card + .story-card { margin-top: 32px; }
.story-card h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.story-card .body-text { font-size: 1.0625rem; }

/* The one line in the story that has to land. */
.story-highlight {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--bronze);
}

/* The quote sitting between the two cards. */
.quote-band {
  background: var(--bronze);
  border-radius: var(--radius-xl);
  padding: 48px 44px;
  margin: 32px 0;
  text-align: center;
}
.quote-band .pullquote { color: #F6EFE0; }
@media (max-width: 860px) { .quote-band { padding: 30px 24px; } }

@media (max-width: 860px) {
  .story-card { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .story-card .media { order: -1; }
  .mission { margin-bottom: 32px; }
}

/* Two photos stacked in the story card. */
.story-photos { display: grid; gap: 20px; }

/* Photo hero: the text sits further left and reads a size up, so it does
   not crowd whoever is in the picture. */
/* .wrap is a flex item inside .hero-photo, so without width:100% it shrinks
   to its own text and the auto margins centre it. This one line is what keeps
   the hero text on the same left edge as the logo in the header. */
.hero-photo .wrap { width: 100%; }
.hero-photo .hero-photo-text { max-width: 600px; }
.hero-photo .lead { font-size: 1.35rem; line-height: 1.55; }

/* Closing quote band. */
.bg-bronze { background: var(--bronze); }
.bg-bronze .pullquote { color: #F6EFE0; }

/* Two form fields side by side on desktop, stacked on a phone. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* Larger bullet list, used on the How It Works "What this is not" block.
   .dot-list li sets its own font-size, so the size must be set on the li. */
.dot-list-lg li { font-size: 1.25rem; line-height: 1.7; }

/* --- 17. Free guide popup ------------------------------------------------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 32, 24, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 40px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted-foreground);
  cursor: pointer;
}
.modal-close:hover { background: var(--cream); color: var(--foreground); }

@media (max-width: 480px) {
  .modal-panel { padding: 30px 24px; }
}