/* Styles of the current page on top of style.css (started as the full.html draft). */

/* ---------- hero: own use note ---------- */
.own{max-width:640px;margin:26px auto 0;padding:18px 20px;border:1px solid #F6CFC8;border-radius:var(--radius);background:var(--accent-soft);text-align:left;font-size:1rem}
.own p+p{margin-top:6px}
.own b{font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
.own a{color:var(--accent-ink);font-weight:700;display:inline-block;padding:6px 0}
@media (min-width:640px){.own{padding:20px 26px;text-align:center}}

/* ---------- extras: collapsed groups ---------- */
.groups{display:grid;gap:12px;max-width:860px;margin:0 auto}
.group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.group summary{display:flex;align-items:center;gap:12px;min-height:60px;padding:14px 20px;cursor:pointer;list-style:none;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;border-radius:var(--radius)}
.group summary::-webkit-details-marker{display:none}
.group summary>span:first-child{flex:1}
.group summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.group[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.group .count{flex:none;min-width:30px;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:.85rem;font-weight:700;text-align:center;letter-spacing:0}
.group ul{list-style:none;padding:0 20px 14px}
.group li{position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:1rem;line-height:1.5}
.group li::before{content:"";position:absolute;left:2px;top:1.15em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (min-width:640px){.group summary{padding:16px 26px}.group ul{padding:0 26px 18px}}
@media (prefers-reduced-motion:reduce){.group summary::after{transition:none}}

/* ---------- extras: one real screen per group (phone first on mobile, beside the list on wider screens) ---------- */
.group-body{display:grid;gap:18px;padding:6px 20px 14px}
.group .group-body ul{padding:0}
.group-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.group-shot .phone{flex:none;width:min(220px,60vw);margin:0}
.group-shot figcaption{max-width:240px;color:var(--muted);font-size:.85rem;line-height:1.4;text-align:center}
@media (min-width:760px){
  .group-body{grid-template-columns:minmax(0,1fr) 220px;align-items:start;gap:36px;padding:4px 26px 22px}
  .group-shot{grid-column:2;grid-row:1}
  .group-body ul{grid-column:1;grid-row:1}
  .group-shot .phone{width:100%}
}

/* ---------- questions ---------- */
.questions{list-style:none;counter-reset:q;display:grid;gap:14px;grid-template-columns:1fr;max-width:980px;margin:0 auto}
@media (min-width:760px){.questions{grid-template-columns:repeat(2,1fr)}}
.questions li{counter-increment:q;position:relative;padding:20px 22px 20px 70px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);font-weight:600;font-size:1.05rem;line-height:1.45}
.questions li::before{content:counter(q,decimal-leading-zero);position:absolute;left:20px;top:18px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;background:var(--ombre);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-note{max-width:640px;margin:36px auto 0;text-align:center;color:var(--muted);font-size:1.02rem}
.q-note a{color:var(--accent-ink);font-weight:700}

/* ---------- status on soft background ---------- */
.soft .nope li{background:#fff}

/* ---------- footer: note for agents ---------- */
.foot .for-agents{color:rgba(255,255,255,.55);font-size:.85rem}
.dark .split p{color:rgba(255,255,255,.72)}
.foot .for-agents a{white-space:nowrap}

/* Orphans: Polish short words are bound with   in the copy; browsers that can also avoid a lone last word */
p, li, summary, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- extras: a group with two screens (side by side on mobile and in a wider column on desktop) ---------- */
.group-shots{display:flex;justify-content:center;align-items:flex-start;gap:14px}
.group-shots .group-shot{flex:0 1 200px;min-width:0}
.group-shots .phone{width:100%}
@media (min-width:760px){
  .group-body.two{grid-template-columns:minmax(0,1fr) 400px}
  .group-body.two .group-shots{grid-column:2;grid-row:1}
}