/* PawChapter Support — page-specific components. Global styling lives in site.css. */
.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.support-grid .doc-card { margin-bottom: 0; }

.feature-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
}
.feature-list strong { color: var(--ink); }

.faq-list { display: grid; gap: 10px; }
details {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
}
summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 15px 48px 15px 16px;
    font-weight: 750;
    color: var(--ink);
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    color: var(--terracotta);
    font-size: 23px;
    font-weight: 500;
}
details[open] summary::after { content: "−"; }
details[open] summary { border-bottom: 1px solid var(--line); }
summary:focus-visible { outline: 3px solid rgba(184,82,56,.25); outline-offset: -3px; }
.answer { padding: 14px 16px 16px; color: var(--muted); font-size: 14px; }
.answer p { margin: 0 0 10px; }
.answer p:last-child { margin-bottom: 0; }
.answer strong { color: var(--ink); }

.form-card { padding: 28px; }
.notice.success,
.notice.error {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 650;
}
.notice.success { color: var(--success); background: var(--success-bg); border: 1px solid rgba(40,121,76,.16); }
.notice.error { color: #a43a32; background: #fff1ef; border: 1px solid rgba(164,58,50,.16); }
.notice.success strong { color: var(--success); }
.notice.error strong { color: #a43a32; }
.notice:focus { outline: none; }
.notice:focus-visible { outline: 3px solid rgba(184,82,56,.22); outline-offset: 2px; }

form { display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
label { color: var(--ink); font-size: 13px; font-weight: 750; }
.required { color: var(--terracotta); }
input, select, textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(43,33,31,.13);
    border-radius: 14px;
    padding: 11px 13px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea { min-height: 155px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #a48f86; }
input:focus, select:focus, textarea:focus {
    border-color: rgba(184,82,56,.65);
    box-shadow: 0 0 0 4px rgba(184,82,56,.10);
    background: #fffdfc;
}
.hint { color: var(--muted-2); font-size: 12px; }
.button {
    appearance: none;
    width: 100%;
    min-height: 51px;
    border: 0;
    border-radius: 14px;
    padding: 13px 18px;
    color: #fff;
    background: var(--terracotta);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(184,82,56,.20);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.button:hover { background: var(--terracotta-dark); transform: translateY(-1px); box-shadow: 0 12px 25px rgba(184,82,56,.23); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 3px solid rgba(184,82,56,.28); outline-offset: 3px; }
.privacy-note {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 12px;
}
.direct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: var(--peach);
    border: 1px solid var(--line-strong);
}
.direct strong { display: block; margin-bottom: 2px; }
.direct span { color: var(--muted); font-size: 13px; }
.direct a { font-weight: 800; white-space: nowrap; }
.hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
#contact, #form-status { scroll-margin-top: 82px; }

@media (max-width: 720px) {
    .support-grid, .row { grid-template-columns: 1fr; }
    .doc-card, .form-card { padding: 20px; }
    .direct { align-items: flex-start; flex-direction: column; }
    .direct a { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}