/* =========================================================
   portal.css — Front-end pubblico rTicket
   Design chiaro e sobrio, theme-aware. Il colore d'accento
   (--brand) è iniettato dal layout in base a brand.accent,
   così ogni azienda cambia identità senza toccare il CSS.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:#FFFFFF; --bg-soft:#F5F6F9; --surface:#FFFFFF;
  --border:#E5E8EF; --border-soft:#EDEFF4;
  --text:#171B24; --text-2:#535C6B; --text-3:#8A92A2;
  --brand:#E6B667;            /* sovrascritto inline dal layout */
  --brand-ink:#15130A;        /* testo sopra i pulsanti brand */
  --brand-txt:color-mix(in srgb, var(--brand) 82%, #0b0f14); /* accento leggibile come testo su bianco */
  --radius:14px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",system-ui,sans-serif;
  --shadow:0 20px 50px -28px rgba(23,27,36,.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0D0F14; --bg-soft:#14171D; --surface:#171A21;
    --border:#272E3B; --border-soft:#1E232D;
    --text:#E8EBF2; --text-2:#A0A8B8; --text-3:#6B7284;
    --brand-ink:#15130A;
    --brand-txt:var(--brand); /* su fondo scuro l'accento pieno è già leggibile */
    --shadow:0 24px 60px -30px rgba(0,0,0,.7);
  }
}

body {
  margin:0; font-family:var(--sans); color:var(--text); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
h1,h2 { letter-spacing:-.02em; text-wrap:balance; }

/* ---- header ---- */
.p-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(18px,5vw,48px);
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(8px); z-index:10;
}
.p-brand { display:flex; align-items:center; gap:11px; font-weight:680; font-size:17px; }
.p-mark {
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--brand); color:var(--brand-ink); font-weight:800; font-size:17px;
}
.p-logo { height:34px; width:auto; display:block; }
.p-cta {
  font-size:14px; font-weight:640; padding:9px 16px; border-radius:10px;
  background:var(--brand); color:var(--brand-ink);
  transition:filter .12s ease, transform .12s ease;
}
.p-cta:hover { filter:brightness(1.05); transform:translateY(-1px); }

.p-main { flex:1; width:100%; max-width:920px; margin:0 auto; padding:clamp(28px,6vw,64px) clamp(18px,5vw,48px); }

/* ---- hero ---- */
.p-hero { text-align:center; max-width:640px; margin:0 auto clamp(36px,7vw,60px); }
.p-hero h1 { font-size:clamp(34px,7vw,52px); margin:0 0 10px; font-weight:720; }
.p-hero-sub { font-size:clamp(16px,2.4vw,19px); color:var(--brand-txt); font-weight:640; margin:0 0 18px; }
.p-intro { font-size:16px; color:var(--text-2); margin:0 auto 26px; max-width:60ch; }

.p-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:var(--brand-ink); border:none;
  font:inherit; font-size:15px; font-weight:660; cursor:pointer;
  padding:12px 22px; border-radius:11px;
  transition:filter .12s ease, transform .12s ease;
}
.p-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.p-btn.ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.p-btn.ghost:hover { background:var(--bg-soft); filter:none; }

/* ---- categorie ---- */
.p-cats h2 { font-size:22px; text-align:center; margin:0 0 22px; font-weight:680; }
.p-cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.p-cat {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  font-weight:620; font-size:15.5px;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.p-cat:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow); }
.p-cat-arrow { color:var(--brand-txt); font-size:18px; transition:transform .14s ease; }
.p-cat:hover .p-cat-arrow { transform:translateX(3px); }

/* ---- blocco testo home (editabile da admin) ---- */
.p-home-content { max-width:640px; margin:0 auto; text-align:center; }
.p-home-content h2 { font-size:22px; font-weight:680; margin:0 0 16px; }
.p-home-content .p-prose-body { color:var(--text-2); font-size:16px; line-height:1.7; }
.p-home-content .p-prose-body p { margin:0 0 14px; }
.p-home-content .p-prose-body p:last-child { margin-bottom:0; }

/* ---- form ---- */
.p-formwrap { max-width:640px; margin:0 auto; }
.p-back { display:inline-block; font-size:13.5px; color:var(--text-2); font-weight:540; margin-bottom:14px; }
.p-back:hover { color:var(--brand-txt); }
.p-formwrap h1 { font-size:28px; margin:0 0 22px; font-weight:700; }
.p-form { display:flex; flex-direction:column; gap:18px; }
.p-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
.p-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.p-field > label { font-size:13.5px; font-weight:620; color:var(--text); }
.p-field .opt { color:var(--text-3); font-weight:400; }
.p-field input, .p-field select, .p-field textarea {
  font:inherit; font-size:15px; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:11px; padding:11px 13px; width:100%;
}
.p-field textarea { resize:vertical; min-height:120px; line-height:1.55; }
.p-field input:focus, .p-field select:focus, .p-field textarea:focus {
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
}
.p-err { font-size:12.5px; color:#D6473C; font-weight:540; }
.p-help { font-size:12.5px; color:var(--text-3); margin-top:-1px; }
.p-alert {
  padding:12px 15px; border-radius:11px; font-size:14px; font-weight:520;
  color:#D6473C; background:color-mix(in srgb,#D6473C 10%,transparent);
  border:1px solid color-mix(in srgb,#D6473C 28%,transparent);
}
.p-consent label { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-2); font-weight:400; cursor:pointer; }
.p-consent input { width:18px; height:18px; margin-top:1px; accent-color:var(--brand); flex:none; }
.p-actions { display:flex; justify-content:flex-end; margin-top:4px; }
/* honeypot: fuori schermo, invisibile all'utente */
.p-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- conferma ---- */
.p-sent { max-width:520px; margin:0 auto; text-align:center; padding-top:12px; }
.p-sent-icon {
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center;
  font-size:32px; color:var(--brand-ink); background:var(--brand);
}
.p-sent h1 { font-size:28px; margin:0 0 12px; }
.p-sent-msg { color:var(--text-2); font-size:16px; margin:0 auto 24px; max-width:46ch; }
.p-code {
  display:inline-flex; flex-direction:column; gap:4px; align-items:center;
  padding:16px 28px; border-radius:14px; border:1px dashed var(--border); background:var(--bg-soft);
  margin-bottom:26px;
}
.p-code-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.p-code-val { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:26px; font-weight:700; letter-spacing:.02em; }

/* ---- footer ---- */
.p-footer {
  border-top:1px solid var(--border-soft); padding:22px clamp(18px,5vw,48px);
  text-align:center; color:var(--text-3); font-size:13px; display:flex; flex-direction:column; gap:6px;
}
.p-foot-brand { font-weight:600; color:var(--text-2); }
.p-foot-note { max-width:70ch; margin:0 auto; }

/* ---- nav header ---- */
.p-nav { display:flex; align-items:center; gap:18px; }
.p-navlink { font-size:14px; font-weight:560; color:var(--text-2); }
.p-navlink:hover { color:var(--text); }

/* ---- FAQ / knowledge base ---- */
.p-faq { max-width:720px; margin:0 auto; }
.p-faq h1 { font-size:28px; margin:0 0 24px; }
.p-faq-cat { font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:640; margin:26px 0 12px; }
.p-faq-list { display:flex; flex-direction:column; gap:10px; }
.p-faq-item { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.p-faq-item summary {
  list-style:none; cursor:pointer; padding:15px 18px; font-weight:600; font-size:15.5px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.p-faq-item summary::-webkit-details-marker { display:none; }
.p-faq-item summary::after { content:"+"; color:var(--brand-txt); font-size:20px; font-weight:600; line-height:1; transition:transform .15s ease; }
.p-faq-item[open] summary::after { transform:rotate(45deg); }
.p-faq-item summary:hover { color:var(--brand-txt); }
.p-faq-ans { padding:0 18px 16px; color:var(--text-2); font-size:14.5px; }
.p-faq-ans p { margin:0 0 10px; }
.p-faq-ans p:last-child { margin-bottom:0; }
.p-faq-cta { text-align:center; margin-top:34px; padding-top:26px; border-top:1px solid var(--border-soft); }
.p-faq-cta p { color:var(--text-2); margin:0 0 14px; }
.p-muted { color:var(--text-3); text-align:center; padding:30px 0; }

/* ---- FAQ raggruppate per categoria (accordion a due livelli) ---- */
.p-faq-intro { text-align:center; color:var(--text-2); margin:0 0 24px; }
.faq-cats { display:flex; flex-direction:column; gap:12px; }
.faq-cat { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.faq-cat > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 20px; font-weight:640; font-size:16px; }
.faq-cat > summary::-webkit-details-marker { display:none; }
.faq-cat > summary:hover { color:var(--brand-txt); }
.faq-cat-count { font-size:12px; font-weight:600; color:var(--text-3); background:var(--bg-soft); border:1px solid var(--border); padding:1px 9px; border-radius:999px; }
.faq-cat-caret { margin-left:auto; color:var(--brand-txt); font-size:20px; font-weight:600; line-height:1; transition:transform .15s ease; }
.faq-cat[open] > summary .faq-cat-caret { transform:rotate(45deg); }
.faq-cat[open] > summary { border-bottom:1px solid var(--border-soft); }
.faq-cat > .p-faq-list { padding:6px 18px 14px; gap:0; }
.faq-cat .p-faq-item { border:none; border-radius:0; background:transparent; border-bottom:1px solid var(--border-soft); }
.faq-cat .p-faq-item:last-child { border-bottom:none; }
.faq-cat .p-faq-item summary { padding:13px 2px; font-size:15px; }
.faq-cat .p-faq-ans { padding:0 2px 13px; }

/* ---- pagine legali / prose ---- */
.p-prose { max-width:680px; margin:0 auto; }
.p-prose h1 { font-size:28px; margin:0 0 20px; }
.p-prose-body { color:var(--text-2); font-size:15.5px; line-height:1.7; }
.p-prose-body p { margin:0 0 16px; }

/* ---- footer link ---- */
.p-foot-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:4px; }
.p-foot-links a { color:var(--text-2); font-weight:540; }
.p-foot-links a:hover { color:var(--brand-txt); }

/* ---- passo 1: scelta argomento ---- */
.p-choose { max-width:680px; margin:0 auto; text-align:center; }
.p-choose h1 { font-size:clamp(26px,5vw,34px); margin:6px 0 10px; }
.p-choose-sub { color:var(--text-2); margin:0 auto 26px; max-width:52ch; }
.p-choose .p-cat-grid { text-align:left; }
.p-choose-foot { margin-top:24px; font-size:14px; }
.p-choose-foot a { color:var(--brand-txt); font-weight:600; }

/* ---- passo 2: chip argomento + deflection ---- */
.p-topic { font-size:14px; color:var(--text-2); margin:-8px 0 22px; }
.p-topic-chip { display:inline-block; background:color-mix(in srgb,var(--brand) 16%,transparent); color:var(--text); font-weight:600; padding:2px 12px; border-radius:999px; margin-left:4px; }
.p-deflect { background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:20px; }
.p-deflect h2 { font-size:18px; margin:0 0 4px; }
.p-deflect-sub { color:var(--text-2); font-size:14px; margin:0 0 14px; }
.p-divider { text-align:center; margin:22px 0; position:relative; color:var(--text-3); font-size:13px; }
.p-divider::before { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); }
.p-divider span { position:relative; background:var(--bg); padding:0 14px; }

/* ---- FAQ: elenchi puntati nelle risposte ---- */
.p-faq-ul { margin:6px 0 12px; padding-left:20px; }
.p-faq-ul li { margin:3px 0; color:var(--text-2); font-size:14.5px; line-height:1.5; }

/* ---- gate "prima di inviare una richiesta" ---- */
.p-gate { max-width:720px; margin:0 auto; }
.p-gate h1 { font-size:28px; margin:6px 0 20px; font-weight:700; }
.p-gate-stephead { margin:0 0 18px; }
.p-gate-stepnum { display:inline-block; font-size:12.5px; font-weight:640; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.p-gate-bar { height:6px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--border); overflow:hidden; }
.p-gate-bar span { display:block; height:100%; background:var(--brand); border-radius:999px; transition:width .2s ease; }
.p-gate-body { color:var(--text-2); font-size:15px; line-height:1.6; min-height:180px; }
.p-gate-body.is-final { min-height:0; background:var(--bg-soft); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:14px; padding:18px 20px; font-size:16px; color:var(--text); }
.p-gate-body .p-rt-h { font-size:18px; font-weight:700; color:var(--text); margin:26px 0 8px; }
.p-gate-body p { margin:0 0 12px; }
.p-gate-body a { color:var(--brand-txt); text-decoration:underline; }
.p-rt-ul { margin:6px 0 14px; padding-left:20px; }
.p-rt-ul li { margin:4px 0; }
.p-gate-form { margin-top:26px; padding-top:20px; border-top:1px solid var(--border); }
.p-gate-ack { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text); font-weight:520; cursor:pointer; }
.p-gate-ack input { width:19px; height:19px; margin-top:1px; accent-color:var(--brand); flex:none; }
.p-gate-ack.has-err input { outline:2px solid #D6473C; outline-offset:2px; }

/* ---- canale generico in coda alle card ---- */
.p-choose-generic {
  margin-top:26px; padding-top:22px; border-top:1px solid var(--border-soft);
  text-align:center;
}
.p-choose-generic p { color:var(--text-2); font-size:14.5px; margin:0 0 12px; }

/* ---- smistamento anti-bypass ---- */
.p-smist-yes { margin-bottom:8px; }
.p-smist-yes .p-btn { margin-top:12px; }

/* ---- box informativo/disclaimer d'area ---- */
.p-note-info {
  margin:0 0 20px; padding:12px 15px; border-radius:11px; font-size:13.5px; line-height:1.5;
  color:var(--text-2); background:var(--bg-soft); border:1px solid var(--border);
}

/* ---- FAQ: pulsante inline nella risposta ([[link:slug]]) ---- */
.p-faq-action-wrap { margin:14px 0; }
/* Compatto: poco più grande del testo, allineato al flusso della frase. */
.p-faq-action { display:inline-block; text-decoration:none; font-size:13px; font-weight:640; padding:2px 12px; border-radius:8px; vertical-align:middle; }

/* ---- FAQ: blocco "hai risolto?" in coda a ogni risposta ---- */
.p-faq-resolve { margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }
.p-faq-resolve-q { font-size:14.5px; font-weight:640; color:var(--text); margin:0 0 10px; }
.p-faq-resolve-actions { display:flex; gap:10px; flex-wrap:wrap; }
.p-faq-resolve .p-btn-yes, .p-faq-resolve .p-btn-no { padding:9px 18px; font-size:14px; }

/* ---- percorso guidato: risposta mirata + scelta risolto/non risolto ---- */
.p-answer { background:var(--bg-soft); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:14px; padding:18px 20px; margin-bottom:8px; }
.p-answer p { margin:0 0 12px; color:var(--text); line-height:1.6; font-size:15px; }
.p-answer p:last-child { margin-bottom:0; }
.p-resolve { margin-top:22px; text-align:center; }
.p-resolve-q { font-size:16px; font-weight:640; color:var(--text); margin:0 0 14px; }
.p-resolve-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.p-btn-yes, .p-btn-no {
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:15px; font-weight:640; padding:12px 22px;
  border-radius:11px; cursor:pointer; border:1px solid transparent; transition:transform .12s, filter .12s, background .12s;
}
.p-btn-yes { background:var(--brand); color:var(--brand-ink); }
.p-btn-yes:hover { filter:brightness(1.05); transform:translateY(-1px); }
.p-btn-no { background:transparent; color:var(--text); border-color:var(--border); }
.p-btn-no:hover { background:var(--bg-soft); }

/* ---- tracking lato cliente ---- */
.p-track-form { max-width:460px; }
.p-track-intro { color:var(--text-2); margin:-6px 0 22px; }
.p-track { max-width:680px; margin:0 auto; }
.p-note { padding:11px 15px; border-radius:11px; font-size:14px; font-weight:500; margin-bottom:18px; }
.p-note.ok { color:#1E9D62; background:color-mix(in srgb,#22C55E 12%,transparent); border:1px solid color-mix(in srgb,#22C55E 30%,transparent); }
.p-note.err { color:#D6473C; background:color-mix(in srgb,#D6473C 12%,transparent); border:1px solid color-mix(in srgb,#D6473C 28%,transparent); }
.trk-head { display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.trk-code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:15px; color:var(--text-3); font-weight:600; }
.trk-status { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; padding:3px 12px; border-radius:999px; }
.trk-status .dot { width:8px; height:8px; border-radius:50%; }
.trk-status.open { color:#2563EB; background:color-mix(in srgb,#3B82F6 14%,transparent); }
.trk-status.open .dot { background:#3B82F6; }
.trk-status.in_progress { color:#7C3AED; background:color-mix(in srgb,#8B5CF6 14%,transparent); }
.trk-status.in_progress .dot { background:#8B5CF6; }
.trk-status.resolved { color:#1E9D62; background:color-mix(in srgb,#22C55E 14%,transparent); }
.trk-status.resolved .dot { background:#22C55E; }
.trk-status.closed { color:var(--text-2); background:var(--bg-soft); }
.trk-status.closed .dot { background:var(--text-3); }
.trk-subject { font-size:24px; margin:0 0 8px; }
.trk-meta { display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--text-2); font-size:13.5px; margin-bottom:24px; }
.trk-thread { display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
.trk-msg { border:1px solid var(--border); border-radius:12px; padding:13px 16px; background:var(--surface); }
.trk-msg.cli { background:color-mix(in srgb,var(--brand) 8%,var(--surface)); border-color:color-mix(in srgb,var(--brand) 22%,var(--border)); }
.trk-msg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.trk-who { font-weight:640; font-size:13.5px; }
.trk-when { font-size:12px; color:var(--text-3); }
.trk-body { font-size:14.5px; line-height:1.6; color:var(--text); }
.trk-reply { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border-soft); padding-top:20px; }
.trk-reply label { font-weight:620; font-size:14px; }
.trk-reply textarea { font:inherit; font-size:15px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:11px 13px; resize:vertical; min-height:100px; }
.trk-reply textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); }
.p-sent-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- allegati (chip di download) ---- */
.att-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.att-chip { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:6px 11px; transition:border-color .14s ease; max-width:100%; }
.att-chip:hover { border-color:var(--brand); }
.att-chip svg { width:15px; height:15px; color:var(--text-3); flex:none; }
.att-chip .att-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.att-chip .att-size { color:var(--text-3); font-size:12px; flex:none; }
.trk-file { font-size:13px; color:var(--text-2); font-weight:600; display:flex; flex-direction:column; gap:6px; }
.trk-file span { color:var(--text-3); font-weight:400; }
.trk-file input { font:inherit; font-size:13px; }

:where(a,button,input,select,textarea):focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:8px; }
/* ---- menu kebab: nascosto su desktop, unico menu su mobile ---- */
.p-kebab { display:none; position:relative; }
.p-kebab > summary {
  list-style:none; cursor:pointer; width:40px; height:40px;
  display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--border); background:var(--surface);
  font-size:20px; line-height:1; color:var(--text);
}
.p-kebab > summary::-webkit-details-marker { display:none; }
.p-kebab > summary:hover { background:var(--bg-soft); }
.p-kebab-menu {
  position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  min-width:236px; padding:6px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  display:flex; flex-direction:column; gap:2px;
}
.p-kebab-menu a {
  display:block; padding:11px 13px; border-radius:9px;
  font-size:15px; font-weight:560; color:var(--text);
}
.p-kebab-menu a:hover { background:var(--bg-soft); }
.p-kebab-menu .is-cta {
  margin-top:4px; text-align:center; font-weight:640;
  background:var(--brand); color:var(--brand-ink);
}
.p-kebab-menu .is-cta:hover { background:var(--brand); filter:brightness(1.05); }

/* ---- responsive: titolo centrato + kebab ---- */
@media (max-width: 720px) {
  .p-header { justify-content:center; position:relative; padding:14px 60px; }
  .p-brand { font-size:17px; }
  .p-nav { display:none; }
  .p-kebab { display:block; position:absolute; right:14px; top:50%; transform:translateY(-50%); }
}

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