/* Reading content under the tools: how it works, guides and FAQs. Loaded
   after theme.css on every page that has it, and built on its tokens. */

.info{width:100%;max-width:1080px;margin:clamp(28px,5vw,56px) auto 0;padding:0 clamp(14px,2.2vw,28px);display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);color:var(--ink)}
.page>.info{padding:0}
.info section{display:flex;flex-direction:column;gap:14px}
.info h2{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.12;letter-spacing:-.01em}
.info h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.info p{margin:0;max-width:68ch;line-height:1.6}
.info .lede{font-size:1.125rem;color:var(--muted)}
.info a{color:var(--clean);text-underline-offset:3px}
.info ul,.info ol{margin:0;padding-left:1.25em;line-height:1.6;max-width:68ch}
.info li+li{margin-top:6px}

/* Numbered steps and feature cards. */
.info .steps,.info .cards{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr);max-width:none}
@media (min-width:720px){.info .steps{grid-template-columns:repeat(3,minmax(0,1fr))}.info .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.info .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.info .steps{counter-reset:step}
.info .steps li,.info .cards li{margin:0;background:var(--panel);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-soft-ink);font-weight:700;font-size:.9375rem}
.steps p,.cards p{color:var(--muted);font-size:.9688rem;line-height:1.55}

/* The six stages of the chain. */
.info .chain-list{list-style:none;counter-reset:stage;padding:0;margin:0;display:grid;gap:10px;max-width:none}
@media (min-width:720px){.info .chain-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.info .chain-list li{counter-increment:stage;margin:0;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 12px;align-items:center;padding:14px 16px;border-radius:var(--radius-well);background:var(--well)}
.chain-list li::before{content:counter(stage);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--primary-ink);font-weight:700}
.chain-list strong{font-weight:600}
.chain-list span{color:var(--muted);font-size:.9375rem;line-height:1.5}

/* Questions that open in place. */
.faq{display:flex;flex-direction:column;gap:10px;max-width:none}
.faq details{background:var(--panel);border-radius:var(--radius-well);box-shadow:var(--shadow);padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 0 16px;color:var(--muted);display:flex;flex-direction:column;gap:10px}
.faq details>div p{color:var(--muted)}

/* A call to action at the end of a guide. */
.cta{background:var(--panel);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:clamp(20px,3vw,30px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.cta p{flex:1 1 320px;margin:0}
.cta .btn{text-decoration:none}

/* Guide pages: a readable column with a table of measurements. */
.article{max-width:760px;margin-inline:auto;width:100%}
.article h1,.info-head h1{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:1.06;letter-spacing:-.015em}
.article .byline{color:var(--muted);font-size:.9375rem;margin-top:10px}
.info table{border-collapse:collapse;width:100%;font-size:.9375rem}
.info th,.info td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.info th{font-weight:600}
.table-wrap{overflow-x:auto;background:var(--panel);border-radius:var(--radius-well);box-shadow:var(--shadow);padding:6px 10px}

/* The home page has no footer of its own; this is the tool pages' one. */
.app-foot{width:100%;max-width:1080px;margin:clamp(28px,4vw,44px) auto 0;padding:16px clamp(14px,2.2vw,28px) clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}
.app-foot a{color:var(--muted)}
.app-foot a:hover{color:var(--ink)}
.site-foot a,.app-foot a{text-underline-offset:3px}