/* The site's own guides for shop owners (/google-reviews/…). Phone first:
   owners read these between clients, many in their second language.
   Mobile pass 2026-10-07 (frontend review). */
.guide{max-inline-size:44rem;padding-block:1.25rem 3rem}
.guide h1,.guide h2,.guide h3{letter-spacing:-0.01em}
.guide h1{font-size:clamp(1.75rem,6vw,2.4rem);line-height:1.15;margin:0.5rem 0 0.5rem}
.guide h2{font-size:1.4rem;line-height:1.25;margin:2.25rem 0 0.75rem;scroll-margin-top:1rem}
.guide h3{font-size:1.2rem;font-weight:800;line-height:1.3;margin:1.5rem 0 0.5rem}
.guide p,.guide li{font-size:1.0625rem;line-height:1.65}
.g-body p,.g-next p,.g-faq details p{margin:0 0 1rem}
.guide ul,.guide ol{padding-inline-start:1.25rem;margin:0 0 1rem}
.guide li{margin-block:0.4rem}
.guide a{color:var(--accent-ink);text-underline-offset:2px}

.g-crumbs{margin:0;font-size:0.9rem;color:#78716c}
.g-crumbs a{color:#57534e}
.g-meta{margin:0 0 1.25rem;color:#78716c;font-size:0.9rem}
.g-meta a{font-weight:700}
.g-lede{font-size:1.125rem;color:#44403c;margin:0 0 1.25rem}

/* The three-line summary most owners read. */
.g-tldr{margin:0 0 1rem;padding:1rem 1.125rem;border-radius:16px;background:#fff7ed;border:1px solid #fed7aa}
.g-tldr-h{margin:0 0 0.35rem;font-size:0.8rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:#9a3412}
.g-tldr ul{margin:0;padding-inline-start:1.1rem}
.g-tldr li{margin-block:0.3rem;font-size:1rem;line-height:1.5}

/* "Jump to": closed until tapped, so it never pushes the guide down. */
.g-toc{margin:0 0 1.5rem;border:1px solid #e7e5e4;border-radius:14px;background:#fff}
.g-toc summary{min-block-size:2.75rem;padding:0.6rem 1rem;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.g-toc summary::-webkit-details-marker{display:none}
.g-toc summary::after{content:"+";font-size:1.25rem;color:#9a3412}
.g-toc[open] summary::after{content:"−"}
.g-toc ol{margin:0;padding:0 1rem 0.75rem 2.25rem}
.g-toc li{font-size:1rem;margin-block:0.35rem}

/* A quote: one box, however many lines. */
.g-note{margin:0 0 1rem;padding:0.85rem 1rem;border-inline-start:4px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0}
.g-note p{margin:0}
.g-note p+p{margin-block-start:0.4rem;color:#57534e}

/* A line to say out loud: the English big, its meaning under it. */
.g-say{position:relative;margin:1.25rem 0 0.5rem;padding:0.9rem 1rem 0.9rem 3.1rem;border-radius:16px;background:#fff;border:1px solid #e7e5e4;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.g-say-n{position:absolute;inset-inline-start:0.9rem;inset-block-start:0.95rem;inline-size:1.6rem;block-size:1.6rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:0.85rem;display:flex;align-items:center;justify-content:center}
.g-say .g-say-line{margin:0;font-size:1.15rem;font-weight:800;line-height:1.4;color:#1c1917}
.g-say .g-say-mean{margin:0.35rem 0 0;font-size:1rem;color:#57534e}

/* Tables; on a phone each row becomes a card, each cell led by its column. */
.g-table{overflow-x:auto;margin:1rem 0 1.25rem}
.g-table table{border-collapse:collapse;inline-size:100%;font-size:0.95rem}
.g-table th,.g-table td{border:1px solid #e7e5e4;padding:0.5rem 0.65rem;text-align:start;vertical-align:top}
.g-table th{background:#fafaf9}
@media (max-width:40rem){
  .g-table table,.g-table tbody,.g-table tr,.g-table td{display:block}
  .g-table thead{display:none}
  .g-table tr{margin-block-end:0.75rem;border:1px solid #e7e5e4;border-radius:14px;padding:0.6rem 0.8rem;background:#fff}
  .g-table td{border:0;padding:0.3rem 0}
  .g-table td::before{content:attr(data-label);display:block;font-size:0.8rem;font-weight:700;color:#78716c}
}
/* "Lines to avoid": the awkward line muted, the better line in green. */
.g-table-avoid td:first-child{color:#991b1b}
.g-table-avoid td:last-child{color:#14532d;font-weight:700}
@media (max-width:40rem){
  .g-table-avoid td:last-child{margin-block-start:0.35rem;padding:0.5rem 0.65rem;border-radius:10px;background:#f0fdf4}
}
/* "Allowed / not allowed": the OK column bold. */
.g-table-rules td:nth-child(2){font-weight:800;white-space:nowrap}

.g-fig{margin:1.25rem 0 1.5rem}
.g-fig img{display:block;inline-size:100%;block-size:auto;max-inline-size:22rem;margin-inline:auto;border-radius:18px;border:1px solid #e7e5e4}
.g-fig figcaption{margin-block-start:0.5rem;text-align:center;font-size:0.9rem;color:#78716c}

.g-faq{margin-block-start:2.25rem}
.g-faq details{border-block-end:1px solid #e7e5e4}
.g-faq summary{min-block-size:2.75rem;padding:0.75rem 2rem 0.75rem 0;position:relative;font-weight:700;font-size:1.0625rem;line-height:1.4;cursor:pointer;list-style:none}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"+";position:absolute;inset-inline-end:0.25rem;inset-block-start:0.6rem;font-size:1.35rem;color:#9a3412}
.g-faq details[open] summary::after{content:"−"}
.g-faq details p{margin-block-start:0}

.g-next{margin-block-start:2.5rem;padding:1.25rem;border-radius:18px;background:#fff7ed;border:1px solid #fed7aa}
.g-next-links{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem;margin:0}
.g-next-links .btn{font-size:1rem}
.g-next-2{display:inline-flex;align-items:center;min-block-size:2.75rem;font-weight:700}
.g-top{margin:1.5rem 0 0;font-size:0.95rem}
.g-top a{display:inline-flex;align-items:center;min-block-size:2.75rem}

.g-more{margin-block-start:1.5rem}
.g-more ul{list-style:none;padding:0}
.g-more li{margin-block:0.6rem}
.guide .g-list{list-style:none;padding-inline-start:0;display:grid;gap:0.75rem}
.g-list li{margin:0}
.g-list a{display:flex;flex-direction:column;gap:0.25rem;padding:1rem 1.125rem;border:1px solid #e7e5e4;border-radius:16px;background:#fff;text-decoration:none;color:inherit}
.g-list a:hover,.g-list a:focus-visible{border-color:var(--accent)}
.g-list span{color:#57534e;font-size:0.95rem}