/* The public view intentionally retains the original Martha Flora FAQ design. */
.public-page {
  --cream: #f6f2eb;
  --cream-soft: #fbf8f3;
  --paper: #fff;
  --teal: #16878a;
  --teal-deep: #096d70;
  --teal-soft: #55a4a7;
  --coral: #db3e3e;
  --coral-soft: #fff0ef;
  --ink: #174f51;
  --body-ink: #4e5f60;
  --muted-ink: #748182;
  --line: #e2dcd2;
  --shadow: 0 18px 42px rgba(47,73,70,.08);
  background: radial-gradient(circle at 10% 0%, rgba(22,135,138,.05), transparent 28rem), var(--cream);
}
.public-page .site-shell { width: min(100%,1540px); min-height: 100vh; margin: 0 auto; padding: 22px 22px 110px; }
.public-page .hero { position: relative; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(340px,.9fr); gap: clamp(28px,4vw,64px); min-height: 360px; padding: clamp(34px,5vw,68px); overflow: hidden; border-radius: 40px; background: linear-gradient(124deg,var(--teal-deep),#249497); box-shadow: var(--shadow); color: #fff; }
.public-page .hero::before,.public-page .hero::after { position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.13); border-radius: 44px; content: ""; pointer-events: none; }
.public-page .hero::before { top: -150px; right: 39%; transform: rotate(18deg); }
.public-page .hero::after { bottom: -180px; left: 42%; transform: rotate(34deg); }
.public-page .hero-copy,.public-page .contact-card { position: relative; z-index: 1; }
.public-page .hero-copy { display: flex; flex-direction: column; justify-content: center; }
.public-page .eyebrow { margin: 0 0 14px; color: rgba(255,255,255,.75); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.public-page .hero h1 { max-width: 800px; margin: 0; color: #fff; font-size: clamp(2.7rem,5.5vw,5.6rem); font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.public-page .hero-intro { max-width: 820px; margin: 24px 0 0; color: rgba(255,255,255,.9); font-size: clamp(1rem,1.45vw,1.35rem); line-height: 1.65; }
.public-page .faq-search { width: min(100%,760px); margin-top: 28px; }
.public-page .faq-search > label { display: block; margin-bottom: 9px; color: #fff; font-size: .92rem; font-weight: 800; }
.public-page .search-input-wrap { position: relative; display: flex; align-items: center; }
.public-page .search-icon { position: absolute; left: 18px; z-index: 1; color: var(--teal-deep); font-size: 2rem; line-height: 1; pointer-events: none; transform: rotate(-20deg); }
.public-page .search-input-wrap input { width: 100%; height: 60px; padding: 0 56px 0 53px; border: 2px solid transparent; border-radius: 19px; background: #fff; color: #253f40; font-size: 1rem; box-shadow: 0 15px 35px rgba(2,49,51,.18); }
.public-page .search-input-wrap input:focus { border-color: #a9dcda; outline: 3px solid rgba(255,255,255,.48); outline-offset: 3px; }
.public-page .search-clear { position: absolute; right: 11px; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: var(--cream); color: var(--teal-deep); font-size: 1.45rem; cursor: pointer; }
.public-page .search-hint { margin: 10px 0 0; color: rgba(255,255,255,.76); font-size: .82rem; line-height: 1.45; }
.public-page .search-hint button { padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; cursor: pointer; }
.public-page .topic-pills { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.public-page .topic-pills a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 19px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: .94rem; font-weight: 700; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.public-page .topic-pills a:hover { background: rgba(255,255,255,.23); transform: translateY(-1px); }
.public-page .contact-card { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; min-height: 250px; padding: clamp(24px,3vw,36px); border: 1px solid rgba(255,255,255,.28); border-radius: 30px; background: rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.public-page .contact-kicker { margin: 0 0 18px; color: #fff; font-size: clamp(1.35rem,2.2vw,2rem); font-weight: 800; letter-spacing: -.03em; }
.public-page .contact-title { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.public-page .contact-card a:not(.contact-button) { display: block; width: fit-content; color: rgba(255,255,255,.94); font-size: clamp(1rem,1.3vw,1.2rem); line-height: 1.75; text-decoration: none; }
.public-page .contact-card a:not(.contact-button):hover { text-decoration: underline; text-underline-offset: 4px; }
.public-page .contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.public-page .contact-button,.public-page .results-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 14px; border: 0; border-radius: 17px; font-size: .95rem; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.public-page .button-coral { background: var(--coral); color: #fff; }
.public-page .button-coral:hover { background: #c83232; }
.public-page .button-light { background: #fff; color: var(--teal-deep); }
.public-page .button-light:hover { background: #f0f8f7; }
.public-page .topic-overview { display: grid; grid-template-columns: repeat(auto-fit,minmax(235px,1fr)); gap: 18px; margin: 30px 0; }
.public-page .topic-card { position: relative; display: flex; min-height: 175px; flex-direction: column; padding: 26px 72px 24px 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--paper); box-shadow: 0 12px 30px rgba(47,73,70,.045); text-decoration: none; transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.public-page .topic-card:hover { border-color: rgba(22,135,138,.35); box-shadow: 0 16px 38px rgba(47,73,70,.09); transform: translateY(-3px); }
.public-page .topic-card h2 { margin: 0 0 12px; color: var(--teal-deep); font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.public-page .topic-card p { margin: 0; color: var(--body-ink); font-size: .98rem; line-height: 1.55; }
.public-page .topic-number { position: absolute; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-size: .72rem; font-weight: 800; }
.public-page .topic-count { margin-top: auto; padding-top: 16px; color: var(--muted-ink); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.public-page .faq-sections { display: grid; gap: 30px; }
.public-page .faq-section,.public-page .search-results { scroll-margin-top: 24px; padding: clamp(26px,3.2vw,44px); border: 1px solid var(--line); border-radius: 32px; background: var(--paper); box-shadow: 0 12px 36px rgba(47,73,70,.045); }
.public-page .section-heading { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.public-page .section-heading > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 15px; background: var(--teal-deep); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .08em; }
.public-page .section-heading h2,.public-page .search-results-heading h2 { margin: 0; color: var(--teal-deep); font-size: clamp(2rem,3vw,3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.public-page .section-heading p { max-width: 800px; margin: 9px 0 0; color: var(--body-ink); font-size: 1rem; line-height: 1.55; }
.public-page .faq-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px; }
.public-page .faq-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--cream-soft); transition: border-color .16s ease,box-shadow .16s ease; }
.public-page .faq-card[data-state="open"] { border-color: rgba(22,135,138,.34); box-shadow: 0 12px 28px rgba(47,73,70,.07); }
.public-page .faq-trigger { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; color: var(--teal-deep); font-size: 1.02rem; font-weight: 800; line-height: 1.35; cursor: pointer; list-style: none; }
.public-page .faq-trigger::-webkit-details-marker { display: none; }
.public-page .faq-trigger:hover { background: #fff; }
.public-page .faq-question { display: flex; align-items: flex-start; gap: 13px; }
.public-page .faq-question > span { flex: 0 0 auto; padding-top: 2px; color: var(--teal-soft); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.public-page .faq-plus { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-size: 1.7rem; font-weight: 400; transition: transform .18s ease,background .18s ease,color .18s ease; }
.public-page .faq-card[data-state="open"] .faq-plus { background: var(--coral); color: #fff; transform: rotate(45deg); }
.public-page .faq-answer { padding: 0 22px 22px; color: var(--body-ink); font-size: .98rem; line-height: 1.65; }
.public-page .faq-answer > p { margin: 0; padding: 18px 18px 0; border-top: 1px solid var(--line); white-space: pre-line; }
.public-page .answer-missing { padding: 17px 18px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; background: rgba(255,240,239,.55); }
.public-page .answer-missing > span { display: inline-flex; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #fff; color: var(--coral); font-size: .7rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.public-page .answer-missing p { margin: 0; }
.public-page .answer-missing a,.public-page .site-footer a { color: var(--teal-deep); font-weight: 800; text-underline-offset: 4px; }
.public-page .search-results { margin: 30px 0; }
.public-page .search-results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.public-page .search-results-heading h2 { font-size: clamp(1.8rem,3vw,2.7rem); }
.public-page .search-results-kicker { margin: 0 0 8px; color: var(--coral); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.public-page .search-results-summary { margin: 10px 0 0; color: var(--muted-ink); line-height: 1.5; }
.public-page .results-reset { min-height: 44px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--teal-deep); }
.public-page .search-result-list { display: grid; gap: 14px; }
.public-page .search-result-card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--cream-soft); }
.public-page .search-result-card.is-best { padding: clamp(24px,3vw,34px); border-color: rgba(22,135,138,.34); background: linear-gradient(135deg,#f1faf8,#fff); box-shadow: 0 14px 30px rgba(47,73,70,.07); }
.public-page .search-result-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.public-page .search-result-meta span,.public-page .search-result-meta strong { display: inline-flex; padding: 6px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.public-page .search-result-meta span { background: #e5f2f0; color: var(--teal-deep); }
.public-page .search-result-meta strong { background: var(--coral-soft); color: var(--coral); }
.public-page .search-result-card h3 { margin: 0; color: var(--teal-deep); font-size: clamp(1.08rem,2vw,1.35rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.public-page .search-result-answer,.public-page .search-result-missing { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--body-ink); line-height: 1.65; white-space: pre-line; }
.public-page .search-result-missing p { margin: 0; }
.public-page .search-no-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 24px; border: 1px dashed #c9c1b6; border-radius: 20px; background: var(--cream-soft); }
.public-page .search-empty-icon { color: var(--teal); font-size: 2.3rem; transform: rotate(-20deg); }
.public-page .search-no-result h3 { margin: 0 0 5px; color: var(--teal-deep); font-size: 1.05rem; }
.public-page .search-no-result p { margin: 0; color: var(--muted-ink); line-height: 1.5; }
.public-page .search-no-result .contact-button { min-height: 46px; border-radius: 14px; }
.public-page .site-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: auto; margin: 30px 0 0; padding: 32px 6px 0; color: var(--muted-ink); }
.public-page .site-footer p { margin: 0 0 7px; color: var(--teal-deep); font-size: 1.15rem; font-weight: 800; }
@media (max-width:1000px) { .public-page .hero { grid-template-columns:1fr; } .public-page .contact-card { min-height:0; } }
@media (max-width:780px) { .public-page .search-results-heading,.public-page .search-no-result { align-items:stretch; grid-template-columns:1fr; } .public-page .search-results-heading { flex-direction:column; } .public-page .faq-grid { grid-template-columns:1fr; } .public-page .site-footer { align-items:flex-start; flex-direction:column; } }
@media (max-width:620px) { .public-page .site-shell { padding:10px 10px 50px; } .public-page .hero { gap:28px; padding:30px 24px 24px; border-radius:28px; } .public-page .hero h1 { font-size:clamp(2.55rem,14vw,4rem); } .public-page .hero-intro { margin-top:18px; } .public-page .topic-pills { gap:8px; margin-top:22px; } .public-page .topic-pills a { min-height:40px; padding:8px 14px; font-size:.83rem; } .public-page .contact-card { padding:22px; border-radius:22px; } .public-page .contact-actions { grid-template-columns:1fr; } .public-page .topic-overview { grid-template-columns:1fr; margin:18px 0; } .public-page .faq-sections { gap:18px; } .public-page .faq-section,.public-page .search-results { padding:22px 17px; border-radius:24px; } .public-page .section-heading { gap:13px; margin-bottom:20px; } .public-page .section-heading > span { width:42px; height:42px; } .public-page .faq-trigger { min-height:82px; padding:17px; font-size:.94rem; } .public-page .faq-plus { width:38px; height:38px; } }