/* Shubh Vivah Planners: cream, marigold, vermilion and deep maroon. Yeseva One for headings, Karla for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FBF3E4;
  --surface: #FFFBF3;
  --soft: #F6E3C6;
  --ink: #3B1414;
  --muted: #6E4B42;
  --line: #EBD6B8;
  --line-strong: #D9BC94;
  --brand: #7A1F1F;
  --brand-hover: #5E1515;
  --brand-ink: #FFF6E6;
  --brand-text: #7A1F1F;
  --marigold: #E9A23B;
  --vermilion: #D9541E;
  --eyebrow: #B4421A;
  --head: "Yeseva One", Georgia, serif;
  --body: "Karla", system-ui, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --btn-radius: 999px;
  --wrap: 1200px;
  --out-bg: #3B1414;
  --out-ink: #FFF1DD;
  --out-accent: #F5B94F;
  --out-btn: #E9A23B;
  --out-btn-ink: #3B1414;
}
h1, h2, h3 { font-weight: 400; letter-spacing: -.005em; }
h1 em { font-style: normal; color: var(--vermilion); }
.btn { font-weight: 700; }

/* the garland: marigolds and mango leaves drawn with gradients */
.garland { height: 22px; background:
  radial-gradient(circle at 11px 9px, #E9A23B 7px, transparent 7.5px) 0 0 / 44px 22px repeat-x,
  radial-gradient(circle at 33px 9px, #D9541E 7px, transparent 7.5px) 0 0 / 44px 22px repeat-x,
  radial-gradient(ellipse 4px 7px at 22px 15px, #4F7A3A 98%, transparent) 0 0 / 44px 22px repeat-x,
  #7A1F1F; }

/* header */
.header { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 44px; height: 44px; flex: none; }
.logo span { display: grid; line-height: 1.05; }
.logo b { font: 400 1.45rem var(--head); color: var(--brand); }
.logo small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.nav a { font-weight: 600; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); background: var(--soft); }
@media (max-width: 1100px) and (min-width: 961px) { .nav a { padding: 8px 8px; font-size: .94rem; } }

/* hero */
.hero { padding-block: clamp(36px, 6vw, 84px); background: radial-gradient(60% 70% at 85% 30%, #F6D9A8 0%, transparent 70%), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #F6D9A8; color: #7A3A0E; font-weight: 700; font-size: .86rem; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.06; margin: 18px 0 18px; color: var(--brand); }
.hero-actions { margin-top: 26px; }
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; color: var(--muted); }
.hero-proof b { font: 400 1.5rem var(--head); color: var(--brand); margin-right: 4px; }
.hero-arch { position: relative; margin: 0; padding: 14px; border-radius: 200px 200px 24px 24px; background: var(--brand); box-shadow: 0 30px 60px -30px rgba(59,20,20,.55); }
.hero-arch > svg { border-radius: 190px 190px 14px 14px; width: 100%; height: auto; aspect-ratio: 4 / 4.2; }
.hero-note { position: absolute; left: -18px; bottom: 28px; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; max-width: 280px; padding: 14px 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 18px 40px -18px rgba(59,20,20,.45); }
.hero-note span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--soft); color: var(--brand); }
.hero-note b { font-size: .95rem; line-height: 1.2; }
.hero-note small { color: var(--muted); }
@media (max-width: 880px) { .hero-arch { max-width: 460px; margin-inline: auto; } .hero-note { left: 8px; } }

/* the five functions */
.fn-band { background: var(--soft); }
.fn-row { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .fn-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } }
.fn-row li { display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; padding: 30px 18px 22px; border-radius: 120px 120px 18px 18px; background: var(--surface); border-top: 8px solid var(--fn); }
.fn-num { font: 400 1.6rem var(--head); color: var(--fn); }
.fn-row h3 { font-size: 1.3rem; }
.fn-row p { color: var(--muted); font-size: .95rem; }
.data-table { background: var(--surface); border-radius: var(--radius); }
.data-table th[scope="row"] { font-family: var(--head); font-weight: 400; font-size: 1.05rem; color: var(--brand); }

/* numbers + weddings */
.stats-band { background: var(--brand); color: var(--brand-ink); padding-block: clamp(28px, 4vw, 48px); }
.stats-band .stats dd { color: var(--marigold); }
.stats-band .stats dt { color: #F3D9C4; }
.stats div { border-left: 1px solid rgba(255,255,255,.15); }
.stats div:first-child { border-left: 0; }
.numbers-band { background: var(--soft); }
.numbers-band .stats div { border-color: var(--line-strong); }
.numbers-band .stats dd { color: var(--brand); }
.wd-mini { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.wd-mini figure, .g-item figure { margin: 0; border-radius: 160px 160px 18px 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.wd-mini svg { width: 100%; height: auto; aspect-ratio: 4 / 3.4; }
.wd-mini figcaption, .g-item figcaption { display: grid; gap: 2px; padding: 14px 20px 18px; text-align: center; }
.wd-mini figcaption b, .g-item figcaption b { font: 400 1.25rem var(--head); color: var(--brand); }
.wd-mini figcaption span { color: var(--muted); font-size: .9rem; }
.g-item svg { aspect-ratio: 4 / 3.4; }
.quotes-band { background: var(--soft); }
.quotes li { border-radius: 20px; }
.quotes blockquote p::before { content: "“"; display: block; font: 400 3rem/0.8 var(--head); color: var(--vermilion); }
.ci-icon { background: var(--soft); color: var(--vermilion); border-radius: 50%; }
.pk.is-featured { border-color: var(--vermilion); }
.pk-flag { background: var(--vermilion); color: #fff; }
.steps li::before { color: var(--vermilion); }

/* budget planner */
.bcats { display: grid; gap: 10px; }
.bcat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 16px; align-items: center; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); }
.bcat-on { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 40px; }
.bcat-on input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand); flex: none; }
.bcat-on span { display: grid; }
.bcat-on small { color: var(--muted); font-size: .84rem; }
.bcat.is-off .seg, .bcat.is-off .bcat-amt { opacity: .4; }
.seg { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; padding: 0 12px; font-size: .86rem; font-weight: 700; color: var(--muted); }
.seg input:checked + span { background: var(--brand); color: var(--brand-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--vermilion); outline-offset: -3px; }
.bcat-amt { min-width: 92px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .bcat { grid-template-columns: minmax(0, 1fr) auto; } .bcat-on { grid-column: 1 / -1; } .seg span { padding: 0 9px; } }
.bbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.bbar i { display: block; height: 100%; }
.sum-lines dt i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.tool-msg.is-ok { color: #9FE0B2; }

/* inner pages */
.page-head { background: linear-gradient(180deg, var(--soft), var(--bg)); margin-bottom: clamp(24px, 4vw, 40px); }
.page-head h1 { color: var(--brand); }

/* CTA + footer */
.cta-band { padding-block: clamp(44px, 6vw, 80px); background: var(--vermilion); color: #fff; }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.cta-band p { margin-top: 6px; max-width: 54ch; color: #FFE7D6; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn-primary { background: var(--ink); color: #fff; }
.cta-band .btn-ghost { border-color: #fff; color: #fff; }
.footer { background: var(--ink); color: #E8D3C2; --footer-line: rgba(255,255,255,.14); padding-top: 0; }
.footer > .wrap { padding-top: 48px; }
.footer .logo b { color: #fff; }
.footer .logo small { color: #E8D3C2; }
.footer h2 { color: #fff; }
.f-about { margin-top: 12px; max-width: 34ch; }
.footer .credit a { color: #fff; }
.logo b { white-space: nowrap; }
@media (max-width: 440px) { .logo small { display: none; } .logo b { font-size: 1.2rem; } .logo-mark { width: 38px; height: 38px; } .hero-tag { font-size: .8rem; } }
.logo { min-height: 44px; }
@media (max-width: 520px) { .header .wrap { gap: 10px; } .header-cta .btn { padding: 8px 14px; min-height: 42px; font-size: .9rem; } }
@media (max-width: 400px) { .header-cta { display: none; } }