/* Website layout (form page, reading preview, admin). Light brand palette only. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--burgundy); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 12px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
.small { font-size: 12px; }

/* top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 32px; background: #FFFFFF; border-bottom: 1px solid var(--line);
}
.brand { text-decoration: none; color: var(--espresso); display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; }
.brand-sub { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--burgundy); }
.topbar-note { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe); }

/* buttons */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--burgundy); color: var(--cream); font-family: var(--sans); font-weight: 500;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 30px; border-radius: 999px;
  transition: background .2s ease;
}
.btn:hover { background: var(--espresso); }
.btn.small { padding: 10px 18px; font-size: 11px; }
.btn[disabled] { opacity: .6; cursor: wait; }
.link { font-size: 14px; }

/* hero with form card (layout modelled on myhumandesign.com) */
.hero { position: relative; background: var(--rose); }
.hero-visual {
  position: absolute; inset: 0; background-color: var(--rose);
  background-image: url("/static/img/hero.jpg"), linear-gradient(135deg, var(--rose) 0%, var(--blush) 55%, var(--cream) 100%);
  background-size: cover; background-position: center;
}
.hero-form { position: relative; max-width: 580px; margin: 0 auto; padding: 44px 24px 56px; }
.hero-quote {
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 34px;
  line-height: 1.15; color: var(--burgundy); text-align: center; margin: 0 0 26px;
}
.card { text-align: left; }
.card > .eyebrow, .card > h1, .card > .intro { text-align: center; }
.card {
  background: rgba(255, 255, 255, 0.94); border-radius: 18px; padding: 34px 32px 26px;
  box-shadow: 0 18px 50px rgba(59, 42, 34, 0.14);
}
.card h1 { font-size: 36px; font-weight: 400; margin-top: 8px; }
.card .intro { font-size: 15px; color: var(--taupe); margin: 0 0 18px; }

.field { display: block; border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.field > span, .field legend, .field label > span {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--espresso); margin-bottom: 6px; padding: 0;
}
.field legend small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--taupe); font-size: 12px; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--espresso); background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; outline: none; appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--taupe) 50%), linear-gradient(135deg, var(--taupe) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 34px;
}
.field input:focus, .field select:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(110, 27, 35, 0.12); }
.field em, .consent-error { display: block; font-style: normal; font-size: 13px; color: var(--burgundy); margin-top: 5px; }
.has-error input, .has-error select { border-color: var(--burgundy); }
.row { display: grid; gap: 10px; }
.row.three { grid-template-columns: 0.8fr 1.6fr 1fr; }
.row.name { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.unsure-note { background: var(--blush); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.row.time { grid-template-columns: 76px 12px 76px auto; align-items: center; justify-content: start; }
.ampm { display: inline-flex; margin-left: 10px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; padding: 3px; }
.ampm label { position: relative; cursor: pointer; }
.field .ampm input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.field .ampm label > span {
  display: block; margin: 0; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: none; color: var(--taupe); line-height: 1.2;
}
.field .ampm input:checked + span { background: var(--burgundy); color: var(--cream); }
.ampm input:focus-visible + span { box-shadow: 0 0 0 3px rgba(110, 27, 35, 0.2); }
.has-error .ampm { border-color: var(--burgundy); }
.colon { text-align: center; font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-top: 10px; cursor: pointer; }
.check input, .field .check input {
  margin: 4px 0 0; padding: 0; accent-color: var(--burgundy); width: 16px; height: 16px; flex: none;
  appearance: auto; border-radius: 3px; box-shadow: none;
}
.consent { margin: 4px 0 4px; font-size: 13px; color: var(--taupe); }
.note { font-size: 12.5px; color: var(--taupe); margin: 6px 0 0; line-height: 1.5; }
.note.center { text-align: center; }
.form-error { background: var(--blush); color: var(--burgundy); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.card .btn { width: 100%; margin-top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.place { position: relative; }
.suggestions {
  position: absolute; z-index: 20; left: 0; right: 0; top: 74px; margin: 0; padding: 6px; list-style: none;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 30px rgba(59, 42, 34, 0.15);
  max-height: 290px; overflow-y: auto;
}
.suggestions li { padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 15px; }
.suggestions li small { color: var(--taupe); margin-left: 6px; font-size: 12px; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--blush); }

/* sections under the hero */
.band { background: #FFFFFF; padding: 72px 0; }
.band h2, .need h2 { font-size: 38px; font-weight: 300; margin-top: 8px; }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 28px; }
.mini { background: var(--cream); border-radius: 16px; padding: 22px 20px; }
.mini span { font-family: var(--serif); font-size: 30px; color: var(--burgundy); }
.mini h3 { font-size: 21px; margin: 6px 0 6px; }
.mini p { font-size: 14px; margin: 0; color: var(--taupe); }
.need { padding: 72px 0 90px; text-align: center; }
.need p { color: var(--espresso); font-size: 17px; }

.footer { background: var(--espresso); color: var(--rose); text-align: center; padding: 28px 24px; font-size: 13px; }
.footer p { margin: 4px 0; }

/* reading preview */
.reading-view { background: var(--grey); }
.ready { background: var(--burgundy); color: var(--cream); padding: 48px 0 44px; text-align: center; }
.ready .eyebrow { color: var(--rose); }
.ready h1 { font-size: 44px; font-weight: 300; margin: 10px 0 8px; color: var(--cream); }
.ready p { margin: 0 0 18px; color: var(--rose); }
.ready .actions { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ready .btn { background: var(--cream); color: var(--burgundy); }
.ready .btn:hover { background: var(--rose); }
.ready .link { color: var(--cream); }
.ready .note { color: var(--rose); margin-top: 16px; }
.sheets { padding: 40px 16px 120px; }
.sheets .page {
  max-width: 794px; margin: 0 auto 28px; padding: 64px 72px 56px; box-shadow: 0 10px 34px rgba(59, 42, 34, 0.12);
  border-radius: 4px; overflow: hidden;
}
.sheets .page.cover, .sheets .page.stop {
  min-height: 1060px; display: flex; flex-direction: column; justify-content: center;
}
.sheets .page.cover { justify-content: space-between; }
.sheets .page .chart-layout .graph svg { max-height: 520px; }
.sticky-download { display: none; }

/* admin */
.admin-wrap { padding: 40px 24px 80px; }
.admin-wrap h1 { font-size: 40px; }
.admin-search { display: flex; gap: 12px; align-items: center; margin: 12px 0 20px; flex-wrap: wrap; }
.admin-search input { font: inherit; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; min-width: 260px; }
.table-scroll { overflow-x: auto; background: #FFFFFF; border-radius: 12px; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.admin-table th { text-align: left; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burgundy); font-weight: 500; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--grey); vertical-align: top; }
.nowrap { white-space: nowrap; }

/* phones and small tablets */
@media (max-width: 900px) {
  .hero-quote { font-size: 25px; margin-bottom: 18px; }
  .row.three { grid-template-columns: 64px 1fr 100px; }
  .field select { padding-left: 14px; }
  .hero-form { padding: 28px 16px 36px; }
  .row.name { grid-template-columns: 1fr; gap: 0; }
  .card { padding: 26px 20px 22px; }
  .card h1 { font-size: 30px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .band h2, .need h2 { font-size: 30px; }
  .topbar { padding: 12px 16px; }
  .topbar-note { display: none; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .ready h1 { font-size: 32px; }
  .sheets { padding: 20px 8px 110px; }
  .sheets .page { padding: 32px 20px 28px; }
  .sheets .page.cover, .sheets .page.stop { min-height: 560px; }
  .sheets .page h1 { font-size: 25pt; }
  .sheets .page .chart-layout, .sheets .page .chart-layout tbody, .sheets .page .chart-layout tr, .sheets .page .chart-layout td { display: block; width: 100%; }
  .sheets .page .chart-layout .planets { display: none; }
  .sheets .page .facts, .sheets .page .facts tbody, .sheets .page .facts tr,
  .sheets .page .points, .sheets .page .points tbody, .sheets .page .points tr,
  .sheets .page .glance, .sheets .page .glance tbody, .sheets .page .glance tr,
  .sheets .page .lines, .sheets .page .lines tbody, .sheets .page .lines tr,
  .sheets .page .cross, .sheets .page .cross tbody, .sheets .page .cross tr,
  .sheets .page .blueprint, .sheets .page .blueprint tbody, .sheets .page .blueprint tr { display: block; width: 100%; }
  .sheets .page .lines td, .sheets .page .cross td { display: block; width: 100%; }
  .sheets .page .facts th, .sheets .page .facts td { display: block; width: 100%; border: 0; padding: 2px 0; }
  .sheets .page .facts td { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .sheets .page .points th, .sheets .page .points td { display: block; width: 100%; }
  .sheets .page .points th { padding-bottom: 0; border: 0; }
  .sheets .page .glance th, .sheets .page .glance td { display: block; width: 100%; }
  .sheets .page .glance th { border: 0; padding-bottom: 0; }
  .sheets .page .blueprint td { display: block; width: 100%; }
  .sheets .page .values li { font-size: 21pt; }
  .page.cover .cover-title { font-size: 40pt; }
  .sticky-download {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px;
    background: rgba(255, 248, 246, 0.96); border-top: 1px solid var(--line);
  }
  .sticky-download .btn { width: 100%; }
}

/* loading overlay */
.loader-open, .loader-open body { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: var(--cream); padding: 24px; text-align: center; opacity: 1; transition: opacity .45s ease;
}
.loader[hidden] { display: none; }
.loader.is-leaving { opacity: 0; }
.loader-inner { max-width: 420px; width: 100%; }
.loader-mark { width: 120px; height: 120px; margin: 0 auto 26px; }
.loader-mark svg { width: 100%; height: 100%; }
.loader-track { fill: none; stroke: var(--rose); stroke-width: 1.5; }
.loader-arc {
  fill: none; stroke: var(--burgundy); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 80 247; transform-origin: 60px 60px; animation: loader-spin 1.6s linear infinite;
}
.loader-shape {
  fill: var(--rose); stroke: var(--burgundy); stroke-width: 1.4; transform-origin: 60px 60px;
  animation: loader-breathe 2.4s ease-in-out infinite;
}
.loader-step {
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.2;
  color: var(--espresso); margin: 12px 0 22px; min-height: 2.4em;
}
.loader-bar { height: 2px; background: var(--rose); border-radius: 2px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--burgundy); transition: width .2s linear; }
.loader-note { font-size: 13px; color: var(--taupe); margin-top: 16px; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-breathe { 0%, 100% { transform: scale(0.86); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .loader-arc, .loader-shape { animation: none; }
  .loader-bar span { transition: none; }
}
@media (max-width: 640px) { .loader-step { font-size: 25px; } }