/* Production-only refinements for the public site (public/home.html), loaded
   after every demo stylesheet so the design reference (public/index.html) stays
   untouched. Keeps DM Sans and the page structure; removes
   ornament that carries no information: kicker labels, index numbers, hairline
   rules, glass blur, the floating pill bar and gradient fills. Type uses five
   sizes: 14 (small), 17 (body), 22 (item heading), 36 (section heading) and the
   display size of the home headline. */
#app .public-shell:is(:has(.public-hero),:has(.public-copy)):not(:has(form)),
#app .public-shell:has(.public-copy) {
  /* The "Bone and green" palette (production-light.css paints over these). */
  --taste-ground: #EBE9E4;
  --taste-hero: #EBE9E4;
  --taste-tone-1: #F4F3F0;
  --taste-tone-2: #EBE9E4;
  --taste-tone-3: #EBE9E4;
  --taste-ink: #2A1D17;
  --taste-soft: #5E5047;
  --taste-muted: #5E5047;
  --taste-accent: #2F5D3A;

  /* A plain bar fixed to the top edge of the page, not a floating pill. */
  .public-nav {margin-top: -24px; border: 0; border-radius: 0 0 24px 24px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 24px; box-shadow: none;} /* taste-skill-ignore: removes the effect */
  .public-nav .links a {font-size: 14px;}
  .public-nav .brand-name {font-size: 22px;}
  .public-nav .brand small {display: none;}
  * {backdrop-filter: none; -webkit-backdrop-filter: none;} /* taste-skill-ignore: removes the effect */

  /* No hairline rules: neighbouring surfaces differ by one tone step instead. */
  .public-section + .public-section {border-top: 0;}
  .public-cards .card,.public-copy > .card,.faq details {border: 0;}
  .public-footer,.public-footer * {border-color: transparent;}
  .public-footer .social-icons a {border: 0; background: #DFDCD5;}

  /* Running text is set to a readable measure. */
  p,li,address {max-width: 36em;}
  .public-cards .card p {max-width: 36em;}
}

/* ---- Home ------------------------------------------------------------- */
#app .public-shell:has(.public-hero) {
  .public-hero {background: var(--taste-hero); padding: 56px 48px 56px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); grid-template-rows: auto auto 1fr; gap: 28px 56px; align-items: start;}
  .public-hero > div {grid-column: 1 / -1; display: contents;}
  .public-hero h1 {grid-column: 1 / -1; font-size: clamp(30px, 6.1vw, 92px); line-height: 1.02; letter-spacing: -.045em; margin: 0; max-width: none; text-wrap: balance;}
  .public-hero p {grid-column: 1; font-size: 22px; line-height: 1.5; color: var(--taste-ink); max-width: 30em; margin: 0;}
  .public-hero .taste-actions {grid-column: 1; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 0;}
  .public-hero .taste-actions .btn {background: #2F5D3A; color: #FFFFFF !important; border-color: #2F5D3A; font-size: 17px;}
  .public-hero .taste-actions a:not(.btn) {color: var(--taste-ink); font-size: 17px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px;}
  .public-hero .taste-figure {grid-column: 2; grid-row: 2 / span 2;}
  .public-hero h1 {grid-row: 1;} .public-hero p {grid-row: 2;} .public-hero .taste-actions {grid-row: 3;}
  .public-hero::before {opacity: .16;}
  .public-hero h1,.public-hero p,.public-hero .taste-actions {position: relative; z-index: 1;}

  .taste-figure {margin: 0; display: grid; gap: 10px; position: relative; z-index: 1;}
  .taste-figure .taste-frame {overflow: hidden; border-radius: 20px; background: #DFDCD5;}
  .taste-figure img {display: block; width: 100%; height: 100%; object-fit: cover;}
  .taste-figure figcaption {font-size: 14px; line-height: 1.45; color: var(--taste-muted); max-width: 40em;}
  .public-hero .taste-frame {aspect-ratio: 23 / 20;}

  /* Benefits: heading and three statements beside a tall tile panel. */
  .public-section {padding: 64px 48px;}
  .public-section.taste-benefits {background: var(--taste-tone-1); display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); grid-template-rows: auto 1fr; gap: 0 64px; align-items: start;}
  .taste-benefits > .exterior-heading,.taste-benefits > .public-cards {grid-column: 1;}
  .taste-benefits > .taste-figure {grid-column: 2; grid-row: 1 / span 2;}
  .taste-benefits .taste-frame {aspect-ratio: 1 / 1;}
  .public-section.taste-benefits .public-cards {display: grid; grid-template-columns: 1fr; gap: 32px; align-content: start; margin-top: 16px;}
  .public-section.taste-benefits .public-cards .card {display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: 8px 40px; padding: 0; border: 0;}

  /* Process: a room where families receive guests, beside the three steps. */
  .public-section.taste-steps {background: var(--taste-tone-2); display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); grid-template-rows: auto 1fr; gap: 0 64px; align-items: start;}
  .taste-steps > .taste-figure {grid-column: 1; grid-row: 1 / span 2;}
  .taste-steps > .exterior-heading,.taste-steps > .public-cards {grid-column: 2;}
  .taste-steps .taste-frame {aspect-ratio: 4 / 5;}
  .public-section.taste-steps .public-cards {display: grid; grid-template-columns: 1fr; gap: 28px; align-content: start;}
  .public-section.taste-steps .card {display: block; border: 0; padding: 0 0 0 24px; box-shadow: none;} /* taste-skill-ignore: removes the effect */
  .public-section.taste-steps .card .cardtop {margin: 0 0 6px;}

  /* Workspace: a stone card, with its drawing beside it. */
  .public-section.taste-workspace {background: var(--taste-tone-3);}
  .public-section.taste-workspace > .card {display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); grid-template-rows: 1fr auto auto auto 1fr; gap: 0 40px; align-items: start; background: #DFDCD5; padding: 40px; overflow: hidden;}
  .taste-workspace .card > :not(.taste-figure) {grid-column: 1;}
  .taste-workspace .card > .cardtop {grid-row: 2; margin: 0 0 12px;}
  .taste-workspace .card > p {grid-row: 3; margin: 0 0 24px !important;}
  .taste-workspace .card > .btn {grid-row: 4;}
  .taste-workspace .card > .taste-figure {grid-column: 2; grid-row: 1 / -1; justify-self: end; width: 100%; max-width: 420px;}
  .taste-workspace .taste-frame {aspect-ratio: 1 / 1; max-width: 420px;}
  .taste-workspace .taste-figure figcaption {color: #5E5047;}
  .public-section.taste-workspace > .card h2 {font-size: 36px; line-height: 1.15; margin: 0;}
  .public-section.taste-workspace > .card p {font-size: 17px; margin: 0;}
  .public-section.taste-workspace > .card .btn {justify-self: start; font-size: 17px;}

  .exterior-heading h2 {font-size: 36px;}
  :is(.taste-benefits,.taste-steps) > .exterior-heading {margin-bottom: 24px;}
  :is(.taste-benefits,.taste-steps) .card .cardtop,:is(.taste-benefits,.taste-steps) .card h2 {margin: 0;}
  :is(.taste-benefits,.taste-steps) .card p {margin: 0;}
  .public-cards .card h2,.public-cards .card h3 {font-size: 22px;}
  .public-cards .card p {font-size: 17px;}
}

/* ---- Footer ----------------------------------------------------------- */
#app .public-footer {
  font-size: 14px;
  h3,strong {font-size: 17px;}
  p,a,address,span {font-size: 14px;}
  .footer-logo-line strong {font-size: 22px;}
  .footer-address h3 {color: var(--taste-ink, #2A1D17);}
  .compact-footer-notices {border: 0;}
  .compact-footer-notices p,.taste-credits {font-size: 14px; color: #5E5047;}
}

/* ---- Service and legal pages ----------------------------------------- */
#app .public-shell:has(.public-copy) {
  /* Every reading page, the contact form included, sits on the bone page. */
  main {background: var(--taste-ground); border-radius: 40px; overflow: clip;}
  .public-copy {padding: 40px 48px;}
  .public-copy th {text-transform: none; letter-spacing: normal;}
  .public-copy label,.public-copy legend {color: var(--taste-ink);}
  .public-copy .footnote {color: var(--taste-muted);}
  .public-copy > .card .cardtop h2 {color: var(--taste-accent);}
  /* Four sizes on reading pages: title, heading, body, small. */
  .public-copy .header-frame h1 {font-size: clamp(30px, 4.6vw, 66px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance;}
  .public-copy h2,.public-copy h3 {font-size: 22px; line-height: 1.3;}
  .public-copy :is(p,li,b,strong,td,th,dd,dt,label,.notice,.btn,.service-flow span),.faq summary,.faq-answer {font-size: 17px;}
  .public-copy :is(small,.footnote,figcaption) {font-size: 14px;}
  /* Notes and the flow diagram are filled surfaces, not outlined boxes. */
  .public-copy .notice {border: 0; background: #DFDCD5; border-radius: 16px;}
  .public-copy .service-flow > span {border: 0; background: #DFDCD5;}
  .public-copy .service-flow > span.central {background: #DCE6D8;}
  .header-frame .taste-meta {font-size: 17px; color: var(--taste-soft); margin: 12px 0 0;}
  .header-frame {background: var(--taste-hero);}
  /* Reading pages read as one document: sections are spaced, not boxed. */
  .header-frame {border: 0;}
  .public-copy > .card {background: transparent; border: 0; border-radius: 0; padding: 0; margin: 40px 0 0; box-shadow: none;} /* taste-skill-ignore: removes the effect */
  .public-copy :is(.faq-intro,.faq-hadith) {border: 0; background: #DFDCD5; border-radius: 16px;}
  .public-copy table {table-layout: fixed; width: 100%;}
  .public-copy :is(th,td) {overflow-wrap: anywhere; vertical-align: top;}
  .work-steps .card,.service-flow .card {border: 0;}
  .faq details {background: transparent; padding: 18px 0;}
  .faq details + details {box-shadow: none;} /* taste-skill-ignore: removes the effect */
}

/* ---- Motion: each part of a section rises in once, as it enters --------
   Content is hidden only after the script marks the page (html.taste-motion),
   so nothing stays invisible if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
  html.taste-motion [data-reveal] {opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  html.taste-motion [data-reveal].is-in {opacity: 1; transform: none;}
  html.taste-motion [data-reveal="1"] {transition-delay: 80ms;}
  html.taste-motion [data-reveal="2"] {transition-delay: 160ms;}
  html.taste-motion [data-reveal="3"] {transition-delay: 240ms;}
  html.taste-motion [data-reveal="4"] {transition-delay: 320ms;}
  html.taste-motion [data-reveal="5"] {transition-delay: 400ms;}
  .taste-figure .taste-frame img {transition: transform 1.6s cubic-bezier(.2,.7,.2,1);}
  .public-hero .taste-frame img {animation: taste-drift 26s ease-in-out infinite alternate;}
  @keyframes taste-drift {from {transform: scale(1.06) translate3d(0,0,0);} to {transform: scale(1.12) translate3d(-2%, -2%, 0);}}
  @media (hover: hover) {
    .taste-figure:hover .taste-frame img {transform: scale(1.04);}
    #app .public-shell a.btn {transition: background-color .2s ease, color .2s ease, transform .2s ease;}
    #app .public-shell a.btn:active {transform: translateY(1px) scale(.98);}
  }
}

/* ---- Tablet and phone ------------------------------------------------- */
@media (max-width: 1023px) {
  #app .public-shell:has(.public-hero) {
    .public-hero {grid-template-columns: 1fr; padding: 40px 32px;}
    .public-hero .taste-figure {grid-column: 1; grid-row: auto;}
    .public-hero .taste-frame {aspect-ratio: 16 / 9;}
    .public-section.taste-benefits,.public-section.taste-steps {grid-template-columns: 1fr; gap: 32px;}
    .taste-benefits > .taste-figure,.taste-steps > .taste-figure,.taste-steps > .exterior-heading,.taste-steps > .public-cards {grid-column: 1; grid-row: auto;}
    .taste-steps .taste-frame {aspect-ratio: 16 / 9;}
    .taste-benefits .taste-figure,.taste-workspace .taste-figure {max-width: 520px;}
    .public-section.taste-workspace > .card {grid-template-columns: 1fr; grid-template-rows: none;}
    .taste-workspace .card > * {grid-row: auto !important;}
    .taste-workspace .card > .taste-figure {grid-column: 1; margin-top: 24px;}
  }
}
/* Tablets and phones: 24px from the benefits' introduction to the first statement. */
@media (max-width: 1023px) {
  #app .public-shell:has(.public-hero) {
    .public-section.taste-benefits {row-gap: 0;}
    .taste-benefits > .exterior-heading {margin-bottom: 24px;}
    .taste-benefits > .exterior-heading > :last-child {margin-bottom: 0;}
    .public-section.taste-benefits .public-cards {margin-top: 0;}
  }
}
/* Tablets: the benefits keep the envelope beside their rows, not under them. */
@media (min-width: 768px) and (max-width: 1023px) {
  #app .public-shell:has(.public-hero) {
    .public-section.taste-benefits {grid-template-columns: minmax(0, 1fr) 32cqw; grid-template-rows: auto auto; column-gap: 24px; row-gap: 0;}
    .taste-benefits > .exterior-heading,.taste-benefits > .public-cards {grid-column: 1;}
    .taste-benefits > .exterior-heading {grid-row: 1;}
    .taste-benefits > .public-cards {grid-row: 2;}
    .public-section.taste-benefits .public-cards .card {grid-template-columns: 1fr; gap: 6px;}
  }
}
@media (max-width: 767px) {
  #app .public-shell:is(:has(.public-hero),:has(.public-copy)):not(:has(form)),
  #app .public-shell:has(.public-copy) {
    .public-nav {margin-top: -16px; border-radius: 0 0 20px 20px; padding: 12px 16px;}
  }
  #app .public-shell:has(.public-hero) {
    .public-hero {padding: 32px 20px; gap: 20px;}
    /* Each sentence of the headline is 11em wide: keep it to one line each. */
    .public-hero h1 {font-size: min(44px, calc((100vw - 76px) / 11.2)); line-height: 1.08;}
    .public-hero p {font-size: 17px;}
    .public-section {padding: 40px 20px;}
    .public-section.taste-benefits .public-cards .card {grid-template-columns: 1fr;}
    .public-section.taste-workspace > .card {padding: 24px;}
    .public-section.taste-workspace > .card h2,.exterior-heading h2 {font-size: 28px;}

  }
  #app .public-shell:has(.public-copy) .public-copy {padding: 24px 16px;}
  #app .public-shell:has(.public-copy) main {border-radius: 24px;}
  #app .public-shell:has(.public-copy) .public-copy :is(h2,h3) {font-size: 22px;}
  #app .public-shell:has(.public-copy) .public-copy .notice {padding: 16px;}
  /* The page title stays the largest type on the phone too. */
  #app .public-shell:has(.public-copy) .public-copy .header-frame h1 {font-size: clamp(34px, 9vw, 40px); line-height: 1.08;}
}

@media (forced-colors: active) {
  #app .public-shell:has(.public-hero) .public-section.taste-steps .card {border-left-color: CanvasText;}
  #app .public-hero,.public-section.taste-workspace > .card {background: Canvas;}
}

@media print {
  [data-reveal] {opacity: 1 !important; transform: none !important;}
}

/* Public touch targets and small text found on phones (WCAG 2.5.8, Apple HIG 44pt). */
.public-nav a.brand-lockup {min-height: 48px;}
.faq-category-nav a {font-size: 14px;}
.faq-hadith cite {font-size: 14px;}
.faq-hadith cite a {display: inline-flex; align-items: center; min-height: 44px;}

/* ---- Small fixes from the final check ---------------------------------- */
/* The footer address keeps one column until there is room for two, so the email never breaks mid-word. */
@media (max-width: 860px) {
  #app .public-footer .footer-address-links {grid-template-columns: 1fr;}
}
/* The custom dropdown's focus ring matches every other control. */
#app .select-trigger:focus-visible,#app .select-trigger.label-focus:focus {outline: 2px solid #2F5D3A; outline-offset: 4px;}
/* Policy tables fit a 320px screen without splitting words. !important because the
   reading-page body size above is nested and more specific than this override. */
@media (max-width: 359px) {
  #app .public-shell:has(.public-copy) .public-copy :is(th,td) {font-size: 14px !important;}
}
/* While registration is closed the guard hides the plain "Sign in" link with the
   hidden attribute; public.css would otherwise display it next to the Sign in button. */
#app .public-nav a[hidden] {display: none !important;}

/* The contact page (the one reading page with a form) gets the same frame and header
   as the other reading pages; public-preserve.css leaves form pages out on purpose. */
#app .public-shell:has(.public-copy):has(form) {
  max-width: 1328px;
  padding: 24px 32px 48px;
  .public-nav {gap: 12px; margin-bottom: 28px;}
  .public-nav .links {flex-wrap: nowrap; gap: 4px;}
  .public-nav .links a {white-space: nowrap; padding: 10px 14px;}
}
@media (max-width: 1023px) {
  #app .public-shell:has(.public-copy):has(form) .public-nav {flex-wrap: wrap;}
}
@media (max-width: 767px) {
  #app .public-shell:has(.public-copy):has(form) {
    padding: 16px 16px 32px;
    .public-nav {gap: 14px;}
    .public-nav .links {width: 100%; flex-wrap: wrap; justify-content: start; gap: 4px;}
    .public-nav .links a {padding: 10px 12px;}
  }
}
@media (max-width: 480px) {
  #app .public-shell:has(.public-copy):has(form) {
    .public-nav {gap: 8px; margin-bottom: 20px;}
    .public-nav .links {display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 4px 8px;}
    .public-nav .links a {justify-content: center; padding: 8px; font-size: 13px;}
  }
}
/* On narrow phones each header link column is at least as wide as its label, so
   "Begin your journey" keeps its padding and a gap from "Sign in". */
@media (max-width: 480px) {
  #app .public-shell:is(:has(.public-hero),:has(.public-copy)) .public-nav .links {grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 4px 8px;}
}

/* ---- Page headers without boxes --------------------------------------- */
/* The home hero and every page title sit on the page itself; the calligraphy is a
   faint background that fades downward, the same treatment as the footer. */
#app .public-shell :is(.public-hero, .public-copy .header-frame) {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; /* taste-skill-ignore: calligraphy fade as in the footer / removal / forced-colors */
}
#app .public-shell :is(.public-hero, .public-copy .header-frame)::before {
  inset: 0; opacity: 1; animation: none; transform: none; will-change: auto; z-index: -1;
  background: linear-gradient(180deg, rgba(42,29,23,.06), rgba(42,29,23,.03) 60%, transparent); /* taste-skill-ignore: calligraphy fade as in the footer / removal / forced-colors */
  -webkit-mask: url('dus-calligraphy.png') center top / cover no-repeat;
  mask: url('dus-calligraphy.png') center top / cover no-repeat;
}
/* Page titles line up with the text below them; the calligraphy reaches the panel edges. */
#app .public-shell:has(.public-copy) .public-copy .header-frame {padding: 8px 0 24px; margin-bottom: 8px;}
#app .public-shell:has(.public-copy) .public-copy .header-frame::before {inset: -40px -48px -24px;}
@media (max-width: 767px) {
  #app .public-shell:has(.public-copy) .public-copy .header-frame {padding: 4px 0 16px;}
  #app .public-shell:has(.public-copy) .public-copy .header-frame::before {inset: -24px -16px -16px;}
}
@media (prefers-contrast: more), (forced-colors: active) {
  #app .public-shell :is(.public-hero, .public-copy .header-frame)::before {display: none;}
}

/* ---- How We Work: the application process ------------------------------- */
/* Numbered cards, two to a row: the number, then the step, then what happens. */
/* The numerals stay below the page title and the section title at every width: 36px at
   most (the section size), 28px on narrower screens; the step title carries the weight. */
#app .public-shell:has(.public-copy) .public-copy .taste-steps-intro {margin: 64px 0 28px; max-width: 62ch;}
#app .public-shell:has(.public-copy) .public-copy .taste-steps-intro h2 {font-size: 36px; line-height: 1.15; letter-spacing: -.02em; color: var(--taste-ink); margin: 0 0 14px;}
#app .public-shell:has(.public-copy) .public-copy .work-steps {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 56px;}
#app .public-shell:has(.public-copy) .public-copy .work-steps > .card {display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 32px 32px 28px; border: 0; border-radius: 20px; background: #F4F3F0; box-shadow: none;} /* taste-skill-ignore: operator-approved step cards */
#app .public-shell:has(.public-copy) .public-copy .work-steps .step-number {order: -1; display: block; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #5E5047; margin: 0 0 4px;} /* taste-skill-ignore: operator-approved step numbers */
#app .public-shell:has(.public-copy) .public-copy .work-steps h3 {font-size: 22px; line-height: 1.3; margin: 0; color: var(--taste-ink); font-weight: 600;}
#app .public-shell:has(.public-copy) .public-copy .work-steps p {margin: 0;}
#app .public-shell:has(.public-copy) .public-copy .work-steps .notice {margin-top: auto; background: transparent; font-size: 14px;}
@media (max-width: 1023px) {
  #app .public-shell:has(.public-copy) .public-copy .taste-steps-intro h2 {font-size: 28px;}
}
@media (max-width: 767px) {
  #app .public-shell:has(.public-copy) .public-copy .work-steps {grid-template-columns: minmax(0, 1fr); gap: 16px;}
  #app .public-shell:has(.public-copy) .public-copy .work-steps > .card {padding: 24px 20px 20px;}
  #app .public-shell:has(.public-copy) .public-copy .taste-steps-intro {margin-top: 48px;}
}
/* Tablets: the reading-page title stays above every section heading (46px at 768, 56px at 1000). */
@media (min-width: 768px) and (max-width: 1023px) {
  #app .public-shell:has(.public-copy) .public-copy .header-frame h1 {font-size: clamp(44px, 6vw, 56px);}
}
@media (forced-colors: active) {
  #app .public-shell:has(.public-copy) .public-copy .work-steps > .card {border: 1px solid CanvasText;} /* taste-skill-ignore: calligraphy fade as in the footer / removal / forced-colors */
}

/* ---- FAQs and the reading pages: a title column beside the content ---------------
   The FAQ and every other reading page (How We Work, Contact, Privacy, Terms, Safety,
   Accessibility) share one composition: the title, a drawing and, on long pages, an
   "On this page" list in a column on the header's left edge, with the cards beside it.
   The column sticks while it fits the window (production-guard.js adds .is-sticky). */
@media (min-width: 1024px) {
  #app .public-shell:has(.public-copy) .public-copy:is(.expanded-faq, .taste-read) {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; max-width: none;}
  #app .public-shell:has(.public-copy) .public-copy > :is(.taste-faq-aside, .taste-read-aside) {grid-column: 1; grid-row: 1 / span 30;}
  #app .public-shell:has(.public-copy) .public-copy > :is(.taste-faq-aside, .taste-read-aside).is-sticky {position: sticky; top: 24px;}
  #app .public-shell:has(.public-copy) .public-copy:is(.expanded-faq, .taste-read) > :not(.taste-faq-aside, .taste-read-aside) {grid-column: 2;}
  /* The page title keeps the display size of the reading pages (66px at 1440), so it leads the first screen. */
  #app .public-shell:has(.public-copy) .public-copy :is(.taste-faq-aside, .taste-read-aside) .header-frame h1 {font-size: clamp(38px, 4.6vw, 66px); line-height: 1.05; overflow-wrap: normal; word-break: normal; hyphens: manual;}
  /* The topics are chips of one width, in the column under the introduction. */
  #app .public-shell:has(.public-copy) .expanded-faq .faq-category-nav {display: grid; gap: 4px; justify-items: stretch; max-width: 300px;}
  /* Contact: the masjid's address under the title, beside the form. */
  #app .public-shell:has(.public-copy) .taste-read[data-page=contact] > .taste-read-aside {grid-row: 1;}
  #app .public-shell:has(.public-copy) .taste-read[data-page=contact] > .taste-visit {grid-column: 1; grid-row: 2; margin-top: 8px;}
  #app .public-shell:has(.public-copy) .taste-read[data-page=contact] > .card {grid-row: 1 / span 2;}
  /* A sticky item is held by the whole grid, not its row: Contact's title would slide over the
     address below it, so that column stays put (nothing ever sits under a sticky column). */
  #app .public-shell:has(.public-copy) .taste-read[data-page=contact] > .taste-read-aside.is-sticky {position: static;}
}
/* Tablets and phones: one column; the drawing sits beside the title (or, on the long
   policy pages, beside the "On this page" list under the title). */
@media (max-width: 1023px) {
  #app .public-shell:has(.public-copy) .public-copy > .taste-read-aside {display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; margin-bottom: 8px;}
  #app .public-shell:has(.public-copy) .taste-read-aside > .header-frame {grid-column: 1; grid-row: 1;}
  #app .public-shell:has(.public-copy) .taste-read-aside > .taste-page-doodle {grid-column: 2; grid-row: 1; align-self: center;}
  #app .public-shell:has(.public-copy) .taste-read-aside > .taste-toc {grid-column: 1 / -1; grid-row: 2; margin: 0 0 12px;}
  /* The FAQ drawing sits beside the title, introduction and topics, not on a row of its own. */
  #app .public-shell:has(.public-copy) .expanded-faq > .taste-faq-aside {display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; margin-bottom: 24px;}
  #app .public-shell:has(.public-copy) .taste-faq-aside > :not(.taste-faq-doodle) {grid-column: 1;}
  #app .public-shell:has(.public-copy) .taste-faq-aside > .taste-faq-doodle {grid-column: 2; grid-row: 1 / span 3; align-self: end;}
  #app .public-shell:has(.public-copy) .expanded-faq .faq-category-nav {display: flex; flex-wrap: wrap; gap: 8px;}
  /* Contact: the address follows the form, its envelope beside it. */
  #app .public-shell:has(.public-copy) .taste-visit {display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; margin-top: 28px;}
  #app .public-shell:has(.public-copy) .taste-visit > :not(.taste-page-doodle) {grid-column: 1;}
  #app .public-shell:has(.public-copy) .taste-visit > .taste-page-doodle {grid-column: 2; grid-row: 1 / span 3;}
}
#app .public-shell:has(.public-copy) .expanded-faq .taste-faq-aside .faq-intro {margin: 0 0 20px; background: transparent; padding: 0;}
#app .public-shell:has(.public-copy) .expanded-faq .taste-faq-doodle {display: block; width: min(300px, 70%); aspect-ratio: 1; margin: 28px 0 0 -12px; background: url('pictures/faq-doodle.svg?v=20261019u') left bottom / contain no-repeat;}
@media (max-width: 1023px) {
  #app .public-shell:has(.public-copy) .expanded-faq .taste-faq-doodle {width: 224px; margin: 0;}
}
/* Questions numbered 01, 02 … across the page, parted by space; an open question sits on
   a muted panel (production-light.css). */
#app .public-shell:has(.public-copy) .expanded-faq {counter-reset: faq-question;}
#app .public-shell:has(.public-copy) .expanded-faq .faq-group > h2 {margin: 48px 0 8px; font-size: 14px; letter-spacing: 0; text-transform: none;}
#app .public-shell:has(.public-copy) .expanded-faq .faq-group:first-of-type > h2 {margin-top: 0;}
#app .public-shell:has(.public-copy) .expanded-faq details {counter-increment: faq-question; padding: 0; border: 0; background: transparent; box-shadow: none;} /* taste-skill-ignore: removes the effect */
#app .public-shell:has(.public-copy) .expanded-faq summary {list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: baseline; gap: 0 12px; padding: 20px 0; min-height: 44px; font-size: 22px; line-height: 1.35; font-weight: 500; color: var(--taste-ink, #2A1D17); cursor: pointer;}
#app .public-shell:has(.public-copy) .expanded-faq summary::-webkit-details-marker {display: none;}
#app .public-shell:has(.public-copy) .expanded-faq summary::before {content: counter(faq-question, decimal-leading-zero); font: 500 14px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; color: #5E5047; letter-spacing: .04em;} /* taste-skill-ignore: operator-requested question numbers */
#app .public-shell:has(.public-copy) .expanded-faq summary::after {content: '+'; justify-self: end; font-size: 22px; font-weight: 400; line-height: 1; color: var(--taste-ink, #2A1D17);}
#app .public-shell:has(.public-copy) .expanded-faq details[open] summary::after {transform: rotate(45deg);}
#app .public-shell:has(.public-copy) .expanded-faq summary:hover {color: #2F5D3A;}
#app .public-shell:has(.public-copy) .expanded-faq summary:focus-visible {outline: 2px solid #2F5D3A; outline-offset: 4px; border-radius: 4px;}
#app .public-shell:has(.public-copy) .expanded-faq details > :not(summary) {margin-left: 56px; margin-right: 40px;}
#app .public-shell:has(.public-copy) .expanded-faq details > :last-child {margin-bottom: 24px;}
@media (prefers-reduced-motion: no-preference) {
  #app .public-shell:has(.public-copy) .expanded-faq summary::after {transition: transform 200ms ease;}
}
@media (max-width: 767px) {
  #app .public-shell:has(.public-copy) .expanded-faq summary {grid-template-columns: 34px minmax(0, 1fr) 24px; font-size: 17px; padding: 16px 0;}
  #app .public-shell:has(.public-copy) .expanded-faq details > :not(summary) {margin-left: 46px; margin-right: 0;}
  /* Phones, long policy pages: the title across the column, the drawing beside "On this page". */
  #app .public-shell:has(.public-copy) .taste-read-aside:has(.taste-toc) > .header-frame {grid-column: 1 / -1;}
  #app .public-shell:has(.public-copy) .taste-read-aside:has(.taste-toc) > .taste-toc {grid-column: 1; align-self: center; margin: 0;}
  #app .public-shell:has(.public-copy) .taste-read-aside:has(.taste-toc) > .taste-page-doodle {grid-row: 2;}
  /* Phones: the title across the column, the drawing beside the introduction only, and
     the topics across the column again, so the first questions come up sooner. */
  #app .public-shell:has(.public-copy) .taste-faq-aside > :is(.header-frame, .faq-category-nav) {grid-column: 1 / -1;}
  #app .public-shell:has(.public-copy) .taste-faq-aside > .faq-intro {grid-row: 2;}
  #app .public-shell:has(.public-copy) .taste-faq-aside > .taste-faq-doodle {grid-row: 2; align-self: center; width: clamp(104px, 40vw - 24px, 168px);}
}
@media (forced-colors: active) {
  #app .public-shell:has(.public-copy) .expanded-faq .taste-faq-doodle {display: none;}
}
#app .public-shell:has(.public-copy) .expanded-faq .faq-group > h2 {border: 0;}