/* CHERRY Help & FAQ — Apple × trusted-site accordion, site tokens */

.page-faq .faq-hero {
 padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2rem);
}

.faq-hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(200px, 0.85fr);
 gap: clamp(1.5rem, 4vw, 3rem);
 align-items: center;
}

.page-faq .faq-hero .eyebrow {
 margin-bottom: 0.75rem;
}

.page-faq .faq-hero h1 {
 margin: 0 0 0.75rem;
 font-family: var(--font-sans);
 font-size: clamp(2rem, 4.2vw, 2.85rem);
 font-weight: 600;
 letter-spacing: -0.04em;
 line-height: 1.08;
 color: var(--ink);
}

.page-faq .faq-lede {
 margin: 0;
 max-width: 38ch;
 font-size: clamp(13px, 1.2vw, 15px);
 line-height: 1.55;
 color: var(--body);
}

/* Thinking Lottie — homepage merge rules: page cream, no card */
.faq-hero-visual {
 justify-self: end;
 width: min(100%, 380px);
}

.faq-thinking-lottie.hero-lottie.hero-mask {
 clip-path: none;
 width: min(100%, 380px);
 max-height: clamp(200px, 26vw, 280px);
 aspect-ratio: 1 / 1;
 height: auto;
 margin: 0 auto;
 border-radius: 0;
 background: var(--page);
 box-shadow: none;
}

.faq-thinking-lottie .hero-lottie-stage {
 padding: 0;
 background: transparent;
}

.faq-thinking-lottie[data-ready="true"] {
 background: var(--page);
}

.faq-cats {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: clamp(1.25rem, 3vw, 2rem);
 padding: 0 0 clamp(2rem, 4vw, 3rem);
 border-bottom: 1px solid var(--line);
}

.faq-cat h2 {
 margin: 0 0 0.4rem;
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 650;
 letter-spacing: -0.02em;
 color: var(--ink);
}

.faq-cat p {
 margin: 0 0 0.75rem;
 font-size: 12.5px;
 line-height: 1.5;
 color: var(--body);
}

.faq-cat a {
 font-size: 12.5px;
 font-weight: 550;
 letter-spacing: -0.015em;
 color: var(--ink);
 text-decoration: none;
 border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}

.faq-cat a:hover {
 border-bottom-color: var(--ink);
}

.faq-accordion {
 padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
 max-width: 42rem;
 scroll-margin-top: 5rem;
}

.faq-group-label {
 margin: 1.75rem 0 0.35rem;
 font-size: 10px;
 font-weight: 550;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--muted);
 scroll-margin-top: 5rem;
}

.faq-group-label:first-child {
 margin-top: 0;
}

.faq-item {
 border-bottom: 1px solid var(--line);
 scroll-margin-top: 5.5rem;
}

.faq-trigger {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 width: 100%;
 margin: 0;
 padding: 1.05rem 0.85rem;
 border: 0;
 border-radius: 12px;
 background: transparent;
 font: inherit;
 font-size: clamp(14px, 1.35vw, 16px);
 font-weight: 550;
 letter-spacing: -0.02em;
 line-height: 1.35;
 color: var(--ink);
 text-align: left;
 cursor: pointer;
 transition: background 180ms ease;
}

.faq-item.is-open .faq-trigger {
 background: color-mix(in srgb, var(--surface) 88%, #fff);
}

.faq-trigger:hover {
 background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.faq-trigger:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.faq-chevron {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 color: var(--ink);
 transition: transform 200ms var(--hiw-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

.faq-item.is-open .faq-chevron {
 transform: rotate(180deg);
}

.faq-panel {
 padding: 0 0.85rem 1.15rem;
}

.faq-panel[hidden] {
 display: none;
}

.faq-panel p {
 margin: 0;
 font-size: 13.5px;
 line-height: 1.6;
 color: var(--body);
}

.faq-panel a {
 color: var(--ink);
}

.faq-links {
 margin: 0.65rem 0 0 !important;
 font-size: 12.5px !important;
}

.faq-still {
 margin: 0 0 clamp(3rem, 6vw, 4.5rem);
 max-width: 42rem;
 padding: 1.35rem 1.25rem 1.45rem;
 border-radius: 18px;
 background: color-mix(in srgb, var(--surface) 70%, #fff);
}

.faq-still h2 {
 margin: 0 0 0.4rem;
 font-family: var(--font-sans);
 font-size: 1.05rem;
 font-weight: 650;
 letter-spacing: -0.025em;
 color: var(--ink);
}

.faq-still p {
 margin: 0 0 0.95rem;
 max-width: 36ch;
 font-size: 13px;
 line-height: 1.5;
 color: var(--body);
}

@media (max-width: 800px) {
 .faq-hero-grid {
 grid-template-columns: 1fr;
 }

 .faq-hero-visual {
 justify-self: center;
 order: -1;
 width: min(100%, 280px);
 }

 .faq-thinking-lottie.hero-lottie.hero-mask {
 max-height: 220px;
 }

 .faq-cats {
 grid-template-columns: 1fr;
 }
}