/* SOUND FRAME — inner pages (GUIDE / CONTACT / 404). Editorial rows, hairlines, no cards, no pills, no markers. */
.pg-intro { padding: clamp(56px, 8vw, 128px) var(--gutter) clamp(48px, 6vw, 96px); }
.pg-intro h1 { font-weight: 300; font-size: clamp(30px, 5vw, 76px); line-height: 1.16; letter-spacing: -.03em; max-width: 18ch; }
.pg-intro h1 span { display: block; }
.pg-intro h1 span + span { padding-left: clamp(0px, 4vw, 64px); color: var(--muted); }
.pg-intro p.sub { margin-top: clamp(24px, 3vw, 40px); max-width: 52ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; color: rgba(244, 239, 231, .8); }
.pg-index { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 4px 26px; }
.pg-index a { font-size: 11px; letter-spacing: .2em; color: var(--muted); padding: 8px 0; transition: color .25s; }
.pg-index a:hover, .pg-index a:focus-visible { color: var(--ivory); }

.g-sec { padding: var(--sec) var(--gutter); scroll-margin-top: 56px; }
.g-sec--ivory { background: var(--ivory); color: var(--ink); }
.g-sec--ivory .label, .g-sec--ivory .meta, .g-sec--ivory .muted { color: var(--muted-dark); }
.g-sec--charcoal { background: var(--charcoal); }
.g-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 80px); }
.g-head h2 { font-weight: 300; font-size: clamp(26px, 3.6vw, 56px); line-height: 1.2; letter-spacing: -.03em; }
.g-head p.lead { max-width: 56ch; font-size: 15px; line-height: 1.8; color: var(--muted); }
.g-sec--ivory .g-head p.lead { color: var(--muted-dark); }
@media (min-width: 900px) { .g-head { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); } }

/* products */
.prod-grp { margin: clamp(48px, 6vw, 96px) 0 clamp(20px, 2.5vw, 32px); }
.prod { border-top: 1px solid var(--line); padding: clamp(32px, 4vw, 64px) 0; display: grid; gap: clamp(24px, 3vw, 40px); }
.prod__n { font-weight: 400; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.02em; line-height: 1.2; }
.prod__p { margin-top: 10px; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -.01em; }
.prod__purpose { margin-top: 10px; }
.prod__copy { max-width: 58ch; font-size: 15px; line-height: 1.8; color: rgba(244, 239, 231, .86); }
.prod__hl { margin-bottom: 14px; font-weight: 300; font-size: clamp(20px, 2vw, 30px); line-height: 1.4; letter-spacing: -.02em; }
.plain { margin-top: 20px; display: grid; gap: 0; max-width: 460px; }
.plain li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.plain li:last-child { border-bottom: 1px solid var(--line); }
.g-sec--ivory .plain li { border-color: rgba(8, 8, 8, .16); color: var(--muted-dark); }
.prod__proof { margin-top: clamp(24px, 3vw, 40px); display: flex; align-items: flex-end; gap: clamp(8px, 1.2vw, 16px); }
.prod__proof .pf { min-width: 0; }
.prod__proof .pf--w { flex: 8 1 0; } .prod__proof .pf--m { flex: 2.4 1 0; }
.prod__proof .pf--sq { flex: 3 1 0; } .prod__proof .pf--mood { flex: 4 1 0; } .prod__proof .pf--feedp { flex: 1.6 1 0; }
.prod__proof .pf--mood img, .prod__proof .pf--w img, .prod__proof .pf--m img { aspect-ratio: auto; }
.prod__proof--feeds .pf:nth-child(even) { margin-bottom: clamp(0px, 2vw, 28px); }
.prod__live { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.addon--g { margin-top: 22px; }
@media (min-width: 900px) { .prod { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); } }

/* system equation */
.eq { display: grid; gap: 0; margin-top: clamp(32px, 4vw, 56px); max-width: 560px; }
.eq li { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.eq li:last-child { border-bottom: 1px solid var(--line); color: var(--ivory); }
.how { display: grid; gap: clamp(32px, 4vw, 56px); }
.how h2 { font-weight: 300; font-size: clamp(28px, 4.6vw, 72px); line-height: 1.14; letter-spacing: -.03em; }
.how p { max-width: 58ch; font-size: 15px; line-height: 1.85; color: rgba(244, 239, 231, .84); }
.how .strong { margin-top: 24px; font-size: clamp(18px, 1.8vw, 26px); font-weight: 300; line-height: 1.5; color: var(--ivory); }
@media (min-width: 900px) { .how { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* fits */
.fits li { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid rgba(8, 8, 8, .16); }
.fits li:last-child { border-bottom: 1px solid rgba(8, 8, 8, .16); }
.fits .q { font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -.01em; }
.fits .r { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); }
@media (min-width: 900px) { .fits li { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: baseline; } }

/* definition rows */
.defs div { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); }
.defs div:last-child { border-bottom: 1px solid var(--line); }
.defs dt { font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.defs dd { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.8; }
.defs dd .meta { display: block; margin-top: 8px; }
@media (min-width: 900px) { .defs div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); } }
.defs--sub { margin-top: clamp(48px, 7vw, 112px); }

/* steps */
.steps li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps h3 { margin: 0; font-weight: 400; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .02em; }
.steps p { color: var(--muted); font-size: 14px; max-width: 52ch; }
@media (min-width: 900px) { .steps li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: baseline; } }

/* three columns */
.cols3 { display: grid; gap: clamp(32px, 4vw, 56px); }
.cols3 h3 { font-size: 11px; letter-spacing: .18em; font-weight: 400; text-transform: uppercase; color: var(--muted); }
.g-sec--ivory .cols3 h3 { color: var(--muted-dark); }
@media (min-width: 900px) { .cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); } }

/* faq */
.faq { border-top: 1px solid rgba(8, 8, 8, .16); }
.faq:last-child { border-bottom: 1px solid rgba(8, 8, 8, .16); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 24px; max-width: 62ch; font-size: 15px; line-height: 1.8; color: var(--muted-dark); }

/* contact + closing */
.close-sec { padding: var(--sec) var(--gutter); }
.close-sec h2 { font-weight: 300; font-size: clamp(30px, 5.4vw, 88px); line-height: 1.14; letter-spacing: -.03em; }
.close-sec p { margin-top: clamp(20px, 2.5vw, 32px); max-width: 52ch; font-size: 15px; line-height: 1.8; color: var(--muted); }
.close-sec .lnk { margin-top: clamp(20px, 2.5vw, 32px); }
.qb { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(28px, 3.5vw, 48px); padding: 20px 0; border-top: 1px solid var(--ivory); border-bottom: 1px solid var(--ivory); font-size: 13px; letter-spacing: .24em; transition: gap .4s var(--ease), opacity .3s; }
.qb:hover, .qb:focus-visible { gap: 28px; }
.ct-links { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 24px; }
.nf { min-height: 60vh; display: grid; align-content: center; }