/* ============================================================================
   flavor.css  (theme update v8, 2026-10-12, design approved)
   Flavour profile page. The hero rules at the top are unchanged; the hero's
   colours live in brand-refresh.css (section 2a).

   v8.1 (2026-10-12): below the hero the cookie colour is used PURE, at full
   strength, never washed out and never mixed toward black. Sections
   alternate: colour band (menu bar, layers, FAQ), white with colour panels
   (quick facts, nutrition, reviews score), dark (our call). Text on a
   colour fill always uses --on / --on-inv from the contract, so every
   flavor passes contrast. Nothing is set per cookie by hand.
   ========================================================================== */

/* ---------- hero (unchanged) ---------- */
.flavor-profile__hero { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: var(--space-8) var(--space-10); }
.flavor-profile__title { margin-top: var(--space-4); font-size: var(--text-title); }
.flavor-profile__lede { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; }
.flavor-profile__figure { position: relative; display: grid; place-items: center; }
.flavor-profile__glow { display: none; }
.flavor-profile__image { position: relative; width: min(340px, 80%); aspect-ratio: 1/1; object-fit: contain; }
@media (min-width: 860px) {
    .flavor-profile__hero { grid-template-columns: .8fr 1.2fr; padding-block: var(--space-10) var(--space-12); }
}

/* ---------- tokens for this page ---------- */
.fp {
    --fp-ink: #16100C;
    --fp-dark: #2B1B12;
    --fp-cream: #FFF9F5;
    --fp-rose: #E4738E;
    --fp-rose-text: #A83C57;
    --fp-blush: #FFB9CD;
    --fp-date: #D95A7B;
    --fp-muted: var(--color-text-muted, #5E524B);
    --fp-light: var(--color-text-light, #8A7E77);
    --fp-border: var(--color-border, #EDE6E1);
    --fp-fill: var(--flavor-color);
    --fp-on: var(--on);
    --fp-on-inv: var(--on-inv, #FFFFFF);
    --fp-on-line: color-mix(in srgb, var(--on) 18%, transparent);
    --fp-on-soft: color-mix(in srgb, var(--on) 76%, transparent);
    --fp-edge: rgba(22, 16, 12, 0.10);   /* hairline that keeps pale fills visible on white */
}

.fp-narrow { max-width: 1180px; }
.fp-sec { padding-block: clamp(48px, 7vw, 96px); scroll-margin-top: 130px; }
.fp-sec--flush { padding-top: 0; }
.fp-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--fp-fill);
    box-shadow: inset 0 0 0 1px var(--fp-edge);
    color: var(--fp-on);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fp-fill .fp-kicker { background: var(--fp-on); color: var(--fp-on-inv); box-shadow: none; }
.fp-sec > .container > .fp-kicker,
.fp-sec > .container > div > .fp-kicker { display: inline-flex; }
.fp-fill { background: var(--fp-fill); color: var(--fp-on); }
.fp-fill h2 { color: var(--fp-on); }
.fp h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
}
.fp-sec > .container > h2 { margin-bottom: 0; }

.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.fp-btn--ink { background: var(--fp-ink); color: var(--fp-cream); }
.fp-btn--ink:hover { background: var(--fp-dark); color: var(--fp-cream); }
.fp-btn--ghost { border: 1.5px solid color-mix(in srgb, var(--fp-ink) 25%, transparent); color: var(--fp-ink); }
.fp-btn--ghost:hover { border-color: var(--fp-ink); }
.fp-btn--blush { align-self: flex-start; background: var(--fp-blush); color: var(--fp-ink); }
.fp-btn--blush:hover { background: #FFCAD9; color: var(--fp-ink); }


/* ---------- section menu ---------- */
.fp-nav {
    position: sticky;
    top: 70px;
    z-index: 20;
    background: var(--fp-fill);
    border-top: 1px solid var(--fp-on-line);
    border-bottom: 1px solid var(--fp-on-line);
    box-shadow: 0 10px 24px -18px rgba(22, 16, 12, 0.45);
}
.fp-nav__in { display: flex; align-items: center; gap: 4px; min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.fp-nav__in::-webkit-scrollbar { display: none; }
.fp-nav a {
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-on);
    text-decoration: none;
}
.fp-nav a:hover { background: var(--fp-on); color: var(--fp-on-inv); }
.fp-nav__order { display: none; }


/* ---------- overview + quick facts ---------- */
.fp-ov { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.fp-prose h2 { margin-bottom: 20px; }
.fp-prose p { font-size: 1.0625rem; line-height: 1.75; color: #3A302A; max-width: 64ch; }
.fp-prose p + p { margin-top: 14px; }
.fp-status {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 64ch;
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px solid var(--fp-border);
    border-left: 6px solid var(--fp-fill);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px -24px rgba(22, 16, 12, 0.5);
}
.fp-status__dot { flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--fp-date); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fp-date) 18%, transparent); }
.fp-status p { font-size: 15px; color: var(--fp-muted); }
.fp-status b { color: var(--fp-ink); }

.fp-facts { padding: 24px 24px 20px; border-radius: 26px; background: var(--fp-fill); color: var(--fp-on); box-shadow: inset 0 0 0 1px var(--fp-edge), 0 24px 50px -30px rgba(22, 16, 12, 0.45); }
.fp-facts__title { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.015em; }
.fp-facts dl { margin-top: 10px; }
.fp-facts dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--fp-on-line); font-size: 14.5px; }
.fp-facts dt { color: var(--fp-on-soft); }
.fp-facts dd { margin: 0; font-weight: 700; text-align: right; }
.fp-facts dd small { display: block; font-size: 12px; font-weight: 500; color: var(--fp-on-soft); }
.fp-facts__more > dl { margin-top: 0; }
.fp-facts__more p { margin-top: 16px; font-size: 13px; font-weight: 700; }
.fp-facts__more p + ul,
.fp-facts__more p + ul + p { margin-top: 8px; }
.fp-facts__more ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.fp-facts__more li { padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--fp-ink); font-size: 12.5px; font-weight: 700; }
.fp-facts__more ul[data-may] li { border: 1.5px dashed var(--fp-on-soft); background: transparent; color: var(--fp-on); }
.fp-facts__more small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--fp-on-soft); }
.fp-facts__more a { color: var(--fp-on); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fp-facts .fp-btn--ink { background: var(--fp-on); color: var(--fp-on-inv); }
.fp-facts .fp-btn--ink:hover { background: var(--fp-on); color: var(--fp-on-inv); opacity: .88; }
.fp-facts .fp-btn--ghost { border-color: var(--fp-on-soft); color: var(--fp-on); }
.fp-facts .fp-btn--ghost:hover { border-color: var(--fp-on); }
.fp-facts__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 18px; }


/* ---------- layer by layer ---------- */
.fp-layers { background: var(--fp-fill); color: var(--fp-on); }
.fp-layers h2 { color: var(--fp-on); }
.fp-layers .fp-kicker { background: var(--fp-on); color: var(--fp-on-inv); box-shadow: none; }
.fp-layers__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.fp-layers__head p { max-width: 44ch; font-size: 15px; color: var(--fp-on-soft); }
.fp-slice ol {
    list-style: none;
    margin: 36px auto 0;
    padding: clamp(22px, 3.5vw, 40px);
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 30px;
    background: #fff;
    color: var(--fp-ink);
    box-shadow: 0 30px 60px -36px rgba(22, 16, 12, 0.55);
}
.fp-slice li {
    --mix: 30%;
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 16px;
    align-items: center;
}
.fp-slice li::before {
    content: "";
    grid-row: span 2;
    align-self: center;
    height: 36px;
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--flavor-color) var(--mix), #fff);
    box-shadow: inset 0 0 0 1px var(--fp-edge), inset 0 -6px 0 rgba(22, 16, 12, 0.07);
}
/* counted from the base: the base is the pure cookie colour, each layer above a step lighter */
.fp-slice li:nth-last-child(1) { --mix: 100%; }
.fp-slice li:nth-last-child(2) { --mix: 74%; }
.fp-slice li:nth-last-child(3) { --mix: 52%; }
.fp-slice li:nth-last-child(4) { --mix: 34%; }
.fp-slice li:nth-last-child(5) { --mix: 22%; }
.fp-slice li:nth-last-child(6) { --mix: 14%; }
.fp-slice li:last-child::before { height: 64px; }
.fp-slice li[data-shape="dollop"]::before { width: 40%; justify-self: center; border-radius: 40px 40px 12px 12px; }
.fp-slice li[data-shape="thin"]::before { height: 22px; }
.fp-slice li[data-texture="sprinkles"]::before {
    background-image:
        radial-gradient(circle at 20% 40%, var(--fp-rose) 0 2.6px, transparent 3px),
        radial-gradient(circle at 65% 70%, var(--fp-ink) 0 2.2px, transparent 2.6px);
    background-size: 22px 18px;
}
.fp-slice li[data-texture="chips"]::before {
    background-image: radial-gradient(circle at 50% 50%, #2A170D 0 3.4px, rgba(255, 249, 245, 0.7) 3.6px 4.6px, transparent 5px);
    background-size: 26px 20px;
}
.fp-slice li[data-texture="drizzle"]::before {
    background-image: repeating-linear-gradient(120deg, transparent 0 13px, var(--flavor-color) 13px 18px, rgba(22, 16, 12, 0.35) 18px 19px);
}
.fp-slice b { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.fp-slice li > span { font-size: 14px; color: var(--fp-muted); }
.fp-layers__note { max-width: 1080px; margin: 22px auto 0; font-size: 13px; color: var(--fp-on-soft); }


/* ---------- our call ---------- */
.fp-call {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(26px, 4vw, 52px);
    border-radius: 32px;
    background: var(--fp-dark);
    color: var(--fp-cream);
}
.fp-call::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--flavor-color), transparent 70%);
    opacity: .5;
    pointer-events: none;
}
.fp-call .fp-kicker { background: var(--fp-fill); color: var(--fp-on); box-shadow: none; }
.fp-call h2 { color: var(--fp-cream); }
.fp-call__lead { margin-top: 16px; }
.fp-call__lead p { max-width: 48ch; color: rgba(255, 249, 245, 0.78); }
.fp-call__lead p + p { margin-top: 10px; }
.fp-call__lead a { color: var(--fp-cream); text-decoration-color: var(--fp-blush); }
.fp-sig { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-sig__card { padding: 20px 18px; border: 1px solid rgba(255, 249, 245, 0.1); border-radius: 20px; background: rgba(255, 249, 245, 0.06); }
.fp-sig__card:first-child { grid-column: 1 / -1; }
.fp-sig__card--on { background: var(--flavor-color); color: var(--on); border-color: transparent; }
.fp-sig__label { font-size: 13px; font-weight: 700; opacity: .8; }
.fp-sig__num { margin-top: 14px; font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; }
.fp-sig__num small { font-size: .45em; opacity: .7; }
.fp-sig__num--pending { font-size: 1.45rem; line-height: 1.15; color: var(--fp-blush); }
.fp-sig__card--on .fp-sig__num--pending { color: var(--on); }
.fp-sig__sub { margin-top: 8px; font-size: 13px; opacity: .78; }
.fp-sig__sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--fp-blush); text-underline-offset: 3px; }
.fp-sig .stars { display: block; margin-top: 8px; color: var(--fp-blush); letter-spacing: 2px; font-size: 14px; }
.fp-sig__card--on .stars,
.fp-sig__card--on .stars__empty { color: var(--on); }
.fp-sig .stars__empty { opacity: .35; }


/* ---------- nutrition ---------- */
.fp-nut { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
.fp-cal { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 24px; padding: 28px; border-radius: 28px; background: var(--fp-fill); color: var(--fp-on); box-shadow: inset 0 0 0 1px var(--fp-edge), 0 24px 50px -30px rgba(22, 16, 12, 0.45); }
.fp-ring svg circle:first-child { stroke: var(--fp-on-line); }
.fp-ring { position: relative; width: 150px; height: 150px; }
.fp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fp-ring__val { stroke: var(--fp-on); }
.fp-ring__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.fp-ring__c b { font-family: var(--font-display); font-weight: 900; font-size: 2.3rem; line-height: 1; letter-spacing: -0.02em; }
.fp-ring__c span { display: block; margin-top: 4px; font-size: 12px; color: var(--fp-on-soft); }
.fp-mac { width: 100%; border-collapse: collapse; font-size: 14px; }
.fp-mac th { width: 70px; padding: 7px 12px 7px 0; text-align: left; font-weight: 600; color: var(--fp-on-soft); }
.fp-mac__bar span { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: var(--fp-on-line); }
.fp-mac__bar i { display: block; height: 100%; border-radius: 999px; background: var(--fp-on); }
.fp-mac__g { width: 60px; padding-left: 12px; text-align: right; font-weight: 700; white-space: nowrap; }
.fp-cal__foot { grid-column: 1 / -1; justify-self: stretch; padding-top: 14px; border-top: 1px solid var(--fp-on-line); font-size: 12.5px; line-height: 1.6; color: var(--fp-on-soft); }
.fp-cal--nocal { justify-items: stretch; }
.fp-mac-none { width: 100%; padding: 18px 20px; border: 1.5px dashed var(--fp-on-soft); border-radius: 18px; }
.fp-mac-none__t { font-weight: 800; font-size: .95rem; }
.fp-mac-none__d { margin-top: 4px; font-size: .88rem; color: var(--fp-on-soft); line-height: 1.55; }

.fp-cmp h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.015em; }
.fp-cmp__s { margin-top: 6px; font-size: 14px; color: var(--fp-muted); }
.fp-cmp ol { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fp-cmp li { display: grid; grid-template-columns: minmax(110px, 220px) 1fr 52px; gap: 12px; align-items: center; font-size: 13.5px; }
.fp-cmp__n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--fp-muted); }
.fp-cmp__n a { color: inherit; text-decoration: none; }
.fp-cmp__n a:hover { color: var(--fp-ink); text-decoration: underline; text-decoration-color: var(--fp-rose); }
.fp-cmp__t { position: relative; height: 22px; overflow: hidden; border-radius: 7px; background: #F6F1EE; }
.fp-cmp__t i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: #E3D9D3; }
.fp-cmp__v { text-align: right; font-weight: 700; color: var(--fp-muted); }
.fp-cmp li.is-me .fp-cmp__n,
.fp-cmp li.is-me .fp-cmp__v { color: var(--fp-ink); font-weight: 800; }
.fp-cmp li.is-me .fp-cmp__t i { background: var(--flavor-color); box-shadow: inset 0 0 0 1px var(--fp-edge); }
.fp-cmp li.is-na .fp-cmp__v { font-size: 12px; font-weight: 500; }


/* ---------- on the menu + coming back ---------- */
.fp-hist { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
.fp-hist--solo { margin-top: 0; }
.fp-tl { padding: 28px; border: 1px solid var(--fp-border); border-radius: 28px; background: #fff; }
.fp-tl__sum { display: flex; align-items: center; gap: 18px; }
.fp-tl__sum b { flex: none; display: grid; place-items: center; min-width: 72px; height: 72px; padding-inline: 12px; border-radius: 20px; background: var(--fp-fill); box-shadow: inset 0 0 0 1px var(--fp-edge); color: var(--fp-on); font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; }
.fp-tl__sum p { max-width: 42ch; font-size: 15px; color: var(--fp-muted); }
.fp-runs { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--fp-border); }
.fp-runs li { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--fp-border); }
.fp-runs__sw { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--flavor-color); box-shadow: inset 0 0 0 1px var(--fp-edge); color: var(--on); font-size: 13px; font-weight: 800; }
.fp-runs b { display: block; font-size: 15.5px; }
.fp-runs small { display: block; font-size: 13px; color: var(--fp-light); }
.fp-runs a { font-size: 14px; font-weight: 700; color: var(--fp-ink); text-decoration: underline; text-decoration-color: var(--fp-rose); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.fp-tl { box-shadow: 0 24px 50px -36px rgba(22, 16, 12, 0.4); }
.fp-back { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 28px; border-radius: 28px; background: var(--fp-ink); color: var(--fp-cream); }
.fp .fp-back__title { font-size: 1.6rem; line-height: 1.1; color: var(--fp-cream); }
.fp-back p { margin-top: 10px; font-size: 15px; color: rgba(255, 249, 245, 0.75); }


/* ---------- reviews (existing partial, framed) ---------- */
.fp-reviews .flavor-rating__grid { margin-top: 28px; }
.fp .fp-reviews .flavor-rating__score { background: var(--fp-fill); border-color: transparent; color: var(--fp-on); box-shadow: inset 0 0 0 1px var(--fp-edge), 0 24px 50px -30px rgba(22, 16, 12, 0.45); }
.fp .fp-reviews .flavor-rating__score * { color: var(--fp-on); }
.fp .fp-reviews .flavor-rating__score .stars__empty { opacity: .35; }
.fp-reviews .flavor-rating__form { border-color: var(--fp-border); }


/* ---------- similar (same card as the All Flavors grid) ---------- */
.fp-sim { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.fp-sim .hub-card { box-shadow: inset 0 0 0 1px var(--fp-edge); }
.fp-sim .hub-card {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    background-color: var(--flavor-color);
    color: var(--on);
    text-decoration: none;
    transition: background-color 400ms ease, border-color 400ms ease, transform 400ms ease;
}
.fp-sim .hub-card__tile { display: grid; place-items: center; aspect-ratio: 1 / 0.8; border-radius: 14px; background: var(--flavor-color); box-shadow: inset 0 0 0 1px var(--fp-edge); }
.fp-sim .hub-card__image { width: 58%; height: auto; aspect-ratio: 1; object-fit: contain; }
.fp-sim .hub-card__name { margin-top: 12px; padding-inline: 4px; font-weight: 800; font-size: 16px; line-height: 1.12; letter-spacing: -0.035em; }
.fp-sim .hub-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-inline: 4px; font-size: 12.5px; color: color-mix(in srgb, var(--on) 72%, transparent); }
.fp-sim .hub-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.fp-sim .hub-card__rate { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; margin: auto 4px 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--on) 22%, transparent); font-size: 13px; }
.fp-sim .hub-card__name + .hub-card__meta + .hub-card__rate { margin-top: 12px; }
.fp-sim .hub-card .stars { color: var(--on); font-size: 12px; letter-spacing: 1px; }
.fp-sim .hub-card__label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--on) 72%, transparent); }


/* ---------- FAQ (always last) ---------- */
.fp-faqwrap { background: var(--fp-fill); color: var(--fp-on); }
.fp-faqwrap h2 { color: var(--fp-on); }
.fp-faqwrap .fp-kicker { background: var(--fp-on); color: var(--fp-on-inv); box-shadow: none; }
.fp-faq { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.fp-faq__intro p { margin-top: 14px; max-width: 36ch; color: var(--fp-on-soft); }
.fp-faq__list .faq { margin: 0; padding: 6px clamp(20px, 3vw, 36px); border-radius: 28px; background: #fff; color: var(--fp-ink); box-shadow: 0 30px 60px -36px rgba(22, 16, 12, 0.55); }
.fp-faq__list .faq__item { border-bottom: 1px solid var(--fp-border); }
.fp-faq__list .faq__item:last-child { border-bottom: 0; }
.fp-faq__list .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    list-style: none;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
}
.fp-faq__list .faq__question::-webkit-details-marker { display: none; }
.fp-faq__list .faq__question::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        linear-gradient(var(--on), var(--on)) center / 12px 2px no-repeat,
        linear-gradient(var(--on), var(--on)) center / 2px 12px no-repeat,
        var(--flavor-color);
    box-shadow: inset 0 0 0 1px var(--fp-edge);
    transition: transform 300ms ease, background-color 300ms ease;
}
.fp-faq__list .faq__item[open] .faq__question::after { transform: rotate(45deg); }
.fp-faq__list .faq__answer { margin: 0; padding: 0 0 22px; max-width: 66ch; line-height: 1.75; color: var(--fp-muted); }
.fp-faq__list .faq__answer a { color: var(--fp-ink); text-decoration: underline; text-decoration-color: var(--fp-rose); text-decoration-thickness: 2px; text-underline-offset: 3px; }


/* ============================================================
   >= 860px
============================================================ */
@media (min-width: 860px) {
    .fp-nav { top: 76px; }
    .fp-nav__order { display: inline-flex; margin-left: auto; padding: 8px 18px; background: var(--fp-on); color: var(--fp-on-inv) !important; font-weight: 700 !important; }
    .fp-nav__order:hover { opacity: .88; }
    .fp-sec { scroll-margin-top: 150px; }

    .fp-ov { grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 80px); }
    .fp-facts { position: sticky; top: 156px; padding: 26px 26px 22px; }

    .fp-slice li { grid-template-columns: minmax(220px, 560px) 1fr; column-gap: 36px; }

    .fp-call { grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
    .fp-sig { grid-template-columns: repeat(3, 1fr); }
    .fp-sig__card:first-child { grid-column: auto; }

    .fp-nut { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
    .fp-cal { grid-template-columns: 150px 1fr; align-items: center; justify-items: stretch; gap: 30px; padding: 30px; }
    .fp-cal--nocal { grid-template-columns: 1fr; }

    .fp-hist { grid-template-columns: 1.2fr .8fr; }
    .fp-hist--solo { grid-template-columns: 1fr; max-width: 640px; }

    .fp-sim { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .fp-sim .hub-card { padding: 12px 12px 18px; border-color: var(--fp-border); border-radius: 22px; background-color: #fff; color: var(--fp-ink); box-shadow: 0 20px 44px -34px rgba(22, 16, 12, 0.5); }
    .fp-sim .hub-card__tile { background-color: var(--flavor-color); border-radius: 16px; }
    .fp-sim .hub-card__meta,
    .fp-sim .hub-card__label { color: var(--fp-light); }
    .fp-sim .hub-card__rate { border-top-color: var(--fp-border); }
    .fp-sim .hub-card .stars { color: var(--fp-date); }
    .fp-sim .hub-card:hover { background-color: var(--flavor-color); color: var(--on); border-color: transparent; transform: translateY(-4px); }
    .fp-sim .hub-card:hover .hub-card__tile { background-color: transparent; }
    .fp-sim .hub-card:hover .hub-card__meta,
    .fp-sim .hub-card:hover .hub-card__label { color: color-mix(in srgb, var(--on) 72%, transparent); }
    .fp-sim .hub-card:hover .stars { color: var(--on); }

    .fp-faq { grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 5vw, 80px); }
    .fp-faq__intro { position: sticky; top: 156px; }
    .fp-faq__list .faq__answer { padding-right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-sim .hub-card,
    .fp-faq__list .faq__question::after { transition: none; }
}