/* ==================================================================
   Anuranjinee Guuptaa - premium consultation report design system.
   ONE consistent palette across web / PDF / Word.
   ================================================================== */
:root {
  --primary:    #6B1F3A;   /* Deep Bordeaux/Wine Burgundy - header, customer name, section headers */
  --secondary:  #7A1F3D;   /* Deep Burgundy - major titles (Numeroscope, Golden Seal) */
  --accent:     #C59D28;   /* Luxury Gold - icons, dividers, borders, highlights */
  --success:    #1E6A4E;   /* Emerald Green - lucky, positive, recommended */
  --warning:    #B33939;   /* Muted Red - avoid, unlucky, warnings */
  --body:       #333333;   /* Dark Charcoal - body text (never pure black) */
  --muted:      #6B6B6B;   /* neutral grey for small sub-notes */
  --border:     #E2E5EA;   /* very light grey borders */
  --box-bg:     #FBF9F4;   /* subtle warm off-white card fill */
  --page-bg:    #F4F1EA;   /* soft page background */
  --white:      #ffffff;
  --success-bg: #EAF4EF;   /* pale green card fill */
  --warning-bg: #FBECEC;   /* pale red card fill */
}

body {
  font-family: "Noto Sans Devanagari", "Segoe UI", sans-serif;
  background: var(--page-bg);
  margin: 0;
  padding: 2rem;
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.7;
}

.container {
  max-width: 780px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 10px;
  padding: 2.6rem 3rem;
  box-shadow: 0 2px 16px rgba(107, 31, 58, 0.08);
  border-top: 4px solid var(--primary);
}

h1 {
  color: var(--primary);
  margin-bottom: 0.1rem;
  letter-spacing: 0.3px;
}

.report-tagline {
  margin: 0 0 1.2rem;
  color: var(--secondary);
  font-size: 0.95rem;
  font-style: italic;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1.1rem;
}

.report-subtitle {
  margin: 0.1rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-style: italic;
}

.report-signoff {
  margin-top: 2.4rem;
  color: var(--secondary);
  font-weight: 600;
}

.report-footer {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--accent);
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

h2 {
  color: var(--secondary);
  margin-top: 0.2rem;
  font-weight: normal;
}

/* Section headers - Royal Blue with a gold divider, one consistent style. */
h3 {
  color: var(--primary);
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--accent);
  padding: 1.5rem 0 0.45rem;
  margin-top: 2.8rem;
  font-size: 1.28rem;
  letter-spacing: 0.2px;
}

p {
  margin: 0 0 1.1rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

label {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

input, select {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
}

.row {
  display: flex;
  gap: 1rem;
}

.row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.autocomplete-wrap {
  position: relative;
}

.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 20;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.suggestions:empty {
  display: none;
}

.suggestions li {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.suggestions li:last-child {
  border-bottom: none;
}

.suggestions li:hover {
  background: var(--box-bg);
}

button {
  background: var(--primary);
  color: var(--white);
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
}

button:hover {
  background: #4E1529;
}

.secondary-btn {
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  margin-left: 0.6rem;
}

.secondary-btn:hover {
  background: var(--box-bg);
}

/* Tables - white background, very light grey borders, blue header row. */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0 1.3rem;
  table-layout: fixed;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.info-table td, .info-table th {
  border: 1px solid var(--border);
  padding: 0.7rem 1rem;
  text-align: left;
  overflow-wrap: break-word;
}

.info-table th {
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
}

.info-table td:first-child {
  font-weight: 600;
  color: var(--secondary);
  width: 34%;
}

.error {
  color: var(--warning);
  font-style: italic;
}

.bala-legend {
  background: var(--box-bg);
}

.bala-legend td {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
}

.bala-legend td:first-child {
  font-weight: 600;
  color: var(--secondary);
  white-space: nowrap;
  width: 1%;
}

.bala-legend td:last-child {
  color: var(--muted);
}

.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--primary);
}

.chart-wrap {
  max-width: 340px;
  margin: 0.5rem auto 1rem;
}

.shadbala-chart-wrap {
  max-width: 560px;
}

.loshu-wrap {
  max-width: 260px;
}

.remedy-list {
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}

.remedy-list li {
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}

.chart-svg {
  width: 100%;
  height: auto;
}

.note {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin-top: -0.3rem;
}

/* Bhrigu Naadi line. */
.naadi-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  background: var(--box-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0 1rem;
  font-size: 1.05rem;
}

.naadi-item {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.naadi-item sup {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: normal;
}

.naadi-sep {
  color: var(--accent);
  font-weight: bold;
}

.naadi-lord {
  color: var(--muted);
  font-style: italic;
  text-decoration: underline dotted var(--accent);
}

.gati {
  font-weight: bold;
  margin-left: 2px;
}

.gati-forward {
  color: var(--success);
}

.gati-retro {
  color: var(--warning);
}

.verdict {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
}

.verdict-good {
  color: var(--success);
}

.verdict-warn {
  color: var(--warning);
}

.num-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0.6rem 0 1rem;
}

.num-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.num-label {
  font-weight: 600;
  color: var(--secondary);
  font-size: 0.9rem;
}

.num-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  cursor: default;
}

.num-lucky {
  background: var(--success-bg);
  color: var(--success);
  border: 2px solid var(--success);
}

.num-unlucky {
  background: var(--warning-bg);
  color: var(--warning);
  border: 2px solid var(--warning);
}

.num-neutral {
  background: var(--box-bg);
  color: var(--muted);
  border: 2px solid var(--border);
}

.report-form {
  display: block;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--accent);
}

.manual-number-prompt {
  background: #fff8e6;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.2rem;
}

.manual-number-prompt label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.manual-number-prompt input {
  width: 5rem;
}

.top-actions button {
  margin-top: 0;
}

.top-actions .back-link {
  margin-top: 0;
  margin-left: 0.4rem;
  font-size: 0.9rem;
}

textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.baby-name-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
}

.baby-name-section summary {
  cursor: pointer;
  font-weight: 600;
}

.baby-name-section label,
.baby-name-section input,
.baby-name-section textarea {
  margin-top: 0.8rem;
}

.top-numbers {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.4rem;
}

.top-card {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.6rem;
  background: var(--box-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
}

.top-num {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.top-num-accent {
  color: var(--secondary);
}

.top-cap {
  margin-top: 0.4rem;
  font-weight: 600;
  color: var(--secondary);
}

.top-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

.mulank-rashi {
  background: var(--box-bg);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

/* ---- Lucky / Unlucky colour + day cards (two clean columns) ---- */
.dual-cards {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 1.3rem;
}

.dual-card {
  flex: 1;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.3rem 1.1rem;
}

.dual-card.is-lucky   { border-top: 3px solid var(--success); }
.dual-card.is-unlucky { border-top: 3px solid var(--warning); }

.dual-card h4 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.dual-card.is-lucky h4   { color: var(--success); }
.dual-card.is-unlucky h4 { color: var(--warning); }

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

.dual-card li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0;
  font-size: 0.98rem;
}

.dual-card li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dual-card.is-lucky li::before   { background: var(--success); }
.dual-card.is-unlucky li::before { background: var(--warning); }

.no-unlucky-note {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
}

.color-head {
  font-weight: 600;
  color: var(--secondary);
  margin: 0.6rem 0 0.3rem;
}

.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-bottom: 0.8rem;
}

.color-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.arrow-item {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.arrow-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}

h4 {
  color: var(--secondary);
  margin: 1rem 0 0.2rem;
  font-size: 0.95rem;
}

.rt-editor {
  background: var(--white);
  border-radius: 0 0 6px 6px;
  margin-bottom: 0.6rem;
}

.rt-editor .ql-toolbar.ql-snow {
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: var(--box-bg);
}

.rt-editor .ql-container.ql-snow {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-family: "Noto Sans Devanagari", "Segoe UI", sans-serif;
  font-size: 1rem;
  min-height: 260px;
}

.rt-editor .ql-editor {
  min-height: 260px;
}

/* ==================================================================
   Section helpers + premium boxes (consistent with PDF/DOCX).
   ================================================================== */

.centered { text-align: center; }
.centered-text { text-align: center; }
.underlined { text-decoration: underline; }

.section-h3-first {
  margin-top: 0.8rem;
  border-top: none;
  padding-top: 0;
}

.section-h3-sub {
  margin-top: 1.6rem;
  border-top: none;
  border-bottom: 1px solid var(--border);
  font-size: 1.08rem;
  padding-top: 0;
}

/* Major spiritual titles - Deep Burgundy. */
.section-h3-major,
.section-h3-gold,
.section-h3-yellow {
  color: var(--secondary);
}

.section-gap {
  height: 3.2rem;
}

.report-box {
  background: var(--box-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  margin: 0.8rem 0 1.2rem;
}

.report-box p:last-child {
  margin-bottom: 0;
}

.report-box-subtle {
  border-left-color: var(--border);
}

.report-box-orange {
  border-left-color: var(--accent);
}

.report-box-meditation {
  background: var(--white);
  border-left-color: var(--primary);
}

.report-box-accent {
  text-align: center;
  border-left: none;
  border-top: 3px solid var(--accent);
}

.usn-line {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}

.reinforcing {
  color: var(--success);
}

/* Number & Planet-in-sign merged write-up (repeated + missing numbers). */
.planet-merge {
  margin: 0.4rem 0 1.4rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}

.planet-merge p {
  margin: 0 0 0.7rem;
}

.ps-subhead {
  font-weight: 700;
  color: var(--secondary);
  margin: 0.9rem 0 0.3rem !important;
}

.numeroscope-congrats {
  color: var(--secondary);
  font-size: 1.8rem;
  font-weight: 700;
}

.arrow-quote {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--secondary);
}

.repetition-label {
  color: var(--secondary);
  font-weight: 700;
}

.mnp-heading {
  color: var(--secondary);
  text-decoration: underline;
  text-align: center;
  font-size: 1.3rem;
}

.golden-seal-title {
  color: var(--secondary);
}

.golden-seal-seq {
  color: var(--seal-color, var(--secondary));
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 1px;
  text-align: center;
}

.remedy-label {
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.3rem;
}

.remedy-line {
  color: var(--body);
}

.vaastu-remove {
  color: var(--warning);
}

/* Remedies section headings with a small gold icon. */
.remedy-section-h {
  color: var(--secondary);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 1.6rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.remedy-section-h::before {
  content: "";
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.remedy-bullets {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.remedy-bullets li {
  margin-bottom: 0.4rem;
}

.meditation-title {
  color: var(--primary);
  font-weight: 700;
}

.meditation-step {
  color: var(--body);
  font-size: 0.9rem;
}

.chart-caption {
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.charts-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
}

.charts-row .chart-block {
  flex: 1;
  min-width: 240px;
  max-width: 340px;
  text-align: center;
}

.charts-row .chart-wrap {
  max-width: 340px;
  margin: 0.3rem auto;
}

.chart-label {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.chart-sublabel {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.naadi-plain {
  margin-bottom: 0.2rem;
}

.disclaimer-text {
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.final-page {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--accent);
}

.thank-you {
  color: var(--secondary);
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Date of birth: day / month / year stay side by side even on a phone -
   three stacked fields would push the Continue button off the screen. */
.date-row {
  display: flex;
  gap: 0.5rem;
}

.date-row > * {
  flex: 1 1 0;
  min-width: 0;
}

/* The year is typed, not scrolled, so give it a little more room. */
.date-row > #dob-year { flex: 1.15 1 0; }

/* Two-step intake: a small "Step 1 of 2" marker above each step's fields. */
.step-badge {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* Step 1's fields aren't inside a <form> (the form lives in step 2), so give
   them the same column layout a form would. */
.step-fields {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Collapsible concern categories (step 2). Only the eight category names
   show at first; a category opens on tap. A small gold badge on a closed
   category shows how many options are ticked inside it, so a selection can
   never hide behind a collapsed section. */
details.cat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

details.cat > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
  user-select: none;
}

details.cat > summary::-webkit-details-marker { display: none; }

/* Chevron on the right, rotating when the category opens. */
details.cat > summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

details.cat[open] > summary::after { transform: rotate(-135deg); }
details.cat[open] > summary { border-bottom: 1px solid var(--border); }

details.cat.has-selection {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.cat-emoji { font-size: 1.15rem; line-height: 1; }
.cat-name { font-size: 1rem; }

.cat-count {
  background: var(--accent);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
}

details.cat .problem-checks {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.35rem 1rem 0.7rem;
}

details.cat .problem-check {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

details.cat .problem-check:last-child { border-bottom: none; }

/* ---- Bracelet Finder (public tool) ---- */
.optional-tag {
  font-weight: normal;
  font-style: italic;
  color: var(--muted);
  font-size: 0.85rem;
}

.problem-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.6rem;
  background: var(--box-bg);
}

.problem-group-title {
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.4rem;
}

.problem-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.problem-check {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.bracelet-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin: 0 0 1.2rem;
}

.bracelet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bracelet-name {
  margin: 0;
  border: none;
  padding: 0;
}

.bracelet-planet {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

.bracelet-problems {
  font-size: 0.88rem;
  color: var(--muted);
  font-style: italic;
}

.strength-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.strength-high {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}

.strength-medium {
  background: #FFF6E3;
  color: #8A6D1D;
  border: 1px solid var(--accent);
}

.strength-supportive {
  background: var(--box-bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

.buy-now-btn {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 0.4rem;
}

.buy-now-btn:hover {
  background: #4E1529;
}

.dhoopbatti-card {
  border-top-color: var(--secondary);
  border-top-width: 4px;
  background: var(--box-bg);
}

.most-important-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--secondary);
  color: var(--white);
}

/* ==================================================================
   Mobile / small screens.
   The private client-report pages are only ever used on Anuranjinee's
   own desktop, but the public Bracelet Finder is opened by customers
   on their phones (embedded in energizedremedy.com), so everything
   below only kicks in at phone widths and leaves the desktop layout
   untouched.
   ================================================================== */
@media (max-width: 600px) {
  body {
    padding: 0.75rem;
    font-size: 16px;
    line-height: 1.6;
  }

  .container {
    padding: 1.4rem 1.1rem 1.8rem;
    border-radius: 8px;
  }

  h1 { font-size: 1.45rem; line-height: 1.3; }
  h2 { font-size: 1.05rem; }
  h3 {
    font-size: 1.12rem;
    margin-top: 1.8rem;
    padding-top: 1rem;
  }

  /* Side-by-side field pairs (day/month/year, hour/minute, city/country,
     lat/long) stack into one tappable column. */
  .row {
    flex-direction: column;
    gap: 0.7rem;
  }

  /* 16px keeps mobile browsers from auto-zooming when a field is tapped. */
  input, select, textarea {
    font-size: 16px;
    padding: 0.65rem 0.6rem;
  }

  label { margin-bottom: 0.1rem; }

  button {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
  }

  /* Problem checkboxes: one per line, with a bigger tap target. */
  details.cat > summary { padding: 0.75rem 0.85rem; }
  details.cat .problem-checks { padding: 0.3rem 0.85rem 0.6rem; }
  .cat-name { font-size: 0.95rem; }

  .problem-group { padding: 0.8rem 0.9rem; }
  .problem-checks {
    flex-direction: column;
    gap: 0.15rem;
  }
  .problem-check {
    font-size: 0.97rem;
    padding: 0.4rem 0;
    align-items: flex-start;
  }
  .problem-check input {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
  }

  /* Result cards */
  /* Step 1 must land on one phone screen, so the header block above the
     fields is tightened up on mobile. */
  h1 { margin-top: 0.5rem; }

  .report-tagline {
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
  }


  .step-badge {
    margin-bottom: 0.7rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.74rem;
  }

  .step-fields { gap: 0.6rem; }

  .container { padding: 1.1rem 1rem 1.5rem; }

  .bracelet-card { padding: 1.1rem 1rem; }
  .bracelet-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .bracelet-name { font-size: 1.15rem; }
  .buy-now-btn {
    display: block;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 1.02rem;
  }

  .info-table td:first-child { width: 40%; }
  .info-table td, .info-table th { padding: 0.55rem 0.6rem; }

  .top-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .secondary-btn { margin-left: 0; }
  .top-actions .back-link { margin-left: 0; text-align: center; }
}