/* Clarity layer (2026-10-26). Opt in with <body class="calm">. Layout, hierarchy and labels only:
   one idea per screen, one plain label per section, one accent per section, one primary CTA per screen.
   Every rule is scoped to .calm, so it outranks the page styles and the legibility layer (type.css)
   without depending on load order. */

/* Plain section labels: the brand sans, not mono; the label is the section's one accent. */
.calm .eyebrow{font-family:var(--Jak);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#994321;margin-bottom:12px}
.calm .sec-blue .eyebrow,.calm .sec-ink .eyebrow{color:#E7C9A0}
.calm .capband .eyebrow{color:#5a3a0a}
.calm .hld-faq .ey{font-family:var(--Jak);font-size:13px;font-weight:700;letter-spacing:.09em;color:#994321}

/* Headlines: one treatment. The italic stays (it is the brand face), the second color goes. */
.calm h1 em,.calm h2 em,.calm h3 em{color:inherit;font-size:1em}
.calm .sec-blue h2 em,.calm .sec-ink h2 em{color:inherit}
.calm h1 .ex{color:#994321}

/* Secondary options are quiet text links, never a second button. */
.calm .btn.ghost{display:inline-block;width:auto;background:none;border:0;box-shadow:none;padding:8px 2px;color:#994321;font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:4px;transform:none}
.calm .btn.ghost:hover{background:none;color:var(--ink)}
.calm .btn.ghost.block{display:block;width:100%;text-align:center}
.calm .sec-blue .btn.ghost,.calm .sec-ink .btn.ghost{color:#fff}
.calm .qlink{color:#994321;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.calm .sec-blue .qlink,.calm .sec-ink .qlink{color:#fff}

/* The repeated offer CTA: the same button at every decision point. */
.calm .again{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.calm .again .in{max-width:640px;margin:0 auto;padding:0 20px;text-align:center}
.calm .again .t{font-family:var(--Instr);font-size:clamp(24px,4.4vw,32px);line-height:1.1}
.calm .again .btn{margin-top:14px}
.calm .again .sub{margin-top:10px;font-size:14.5px;color:var(--slate)}
@media(max-width:720px){.calm .again .btn{display:block;width:100%;text-align:center}}

/* A quote band gets a plain label above it. */
.calm .qband .eyebrow{text-align:center}

/* Header: "Shop all" is a quiet text link, visible on phones too. */
.calm .nav a.shopall,.nav a.shopall{display:inline;font-family:var(--Jak);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){.nav a.shopall{display:inline!important}}