/* Revurank shared styles for content pages (tools, guides). Same tokens as index.html. */
:root {
  --bg: #ffffff; --white: #ffffff; --mist: #f2f3f5; --ink: #1a1c20; --gray: #6b6f76; --soft: #9a9ea5; --line: #e3e5e8;
  --star: #ffb400; --brand: #00d658; --brand-hover: #00bf4e; --on-brand: #04210f; --green-ink: #007a33; --brand-50: #e5faee;
  --amber-50: #fff4d9; --rose-50: #fdebf0; --err-bg: #fdecec; --err-fg: #a3201a;
  --nav-bg: rgb(255 255 255 / .82);
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px; --ease: cubic-bezier(.2, .7, .1, 1);
}
:root[data-theme="dark"] {
  --bg: #0b0c0e; --white: #16181c; --mist: #111316; --ink: #f2f3f5; --gray: #a3a8b0; --soft: #70757d; --line: #2a2d33;
  --green-ink: #3ee08a; --brand-50: rgb(0 214 88 / .13); --amber-50: rgb(255 180 0 / .12); --rose-50: rgb(255 92 138 / .12);
  --err-bg: rgb(255 82 82 / .14); --err-fg: #ff9c94; --nav-bg: rgb(11 12 14 / .76);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 40px, 820px); margin-inline: auto; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.h1 { font-size: clamp(40px, 6.4vw, 72px); font-weight: 650; letter-spacing: -.045em; }
.h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 650; }
.h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--gray); max-width: 36em; text-wrap: pretty; }
.muted { color: var(--gray); }
.small { font-size: 14px; color: var(--gray); }
.prose p, .prose li { color: var(--gray); }
.prose p + p { margin-top: 14px; }
.prose ol, .prose ul { padding-left: 22px; display: grid; gap: 8px; margin-top: 12px; }
.prose strong { color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .15s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--brand-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-quiet:hover { background: var(--mist); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.link { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav-in { height: 60px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 20px; letter-spacing: -.03em; }
.brand svg { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--gray); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--gray); display: grid; place-items: center; cursor: pointer; }
.theme-btn:hover { background: var(--mist); color: var(--ink); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .moon, :root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (max-width: 760px) { .nav-links { display: none; } .theme-btn { margin-left: auto; } }

/* Page sections */
.crumbs { font-size: 14px; color: var(--gray); padding-top: 28px; }
.crumbs a { text-decoration: none; color: var(--gray); }
.crumbs a:hover { color: var(--ink); }
.page-hero { padding: clamp(28px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.page-hero .lead { margin: 18px auto 0; }
.page-hero .note { margin-top: 14px; font-size: 14px; color: var(--gray); }
section.block { padding: clamp(56px, 8vw, 96px) 0; }
section.tint { background: var(--mist); }

/* Tool panel */
.panel { background: var(--white); border-radius: 28px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgb(26 28 32 / .25); }
:root[data-theme="dark"] .panel { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgb(0 0 0 / .7); }
.stack { display: grid; gap: 18px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 220px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px); align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .label { font-size: 14px; font-weight: 600; }
.input, .textarea, .select { width: 100%; padding: 0 16px; height: 50px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.textarea { height: auto; min-height: 130px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 4px rgb(0 214 88 / .18); }
.hint { font-size: 13px; color: var(--gray); }
.output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; word-break: break-all; padding: 14px 16px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); }
.msg { border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.msg.err { background: var(--err-bg); color: var(--err-fg); }
.msg.ok { background: var(--brand-50); color: var(--green-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.chip[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.results { display: grid; gap: 8px; }
.result { text-align: left; width: 100%; border: 0; background: var(--mist); border-radius: 14px; padding: 12px 16px; cursor: pointer; transition: box-shadow .2s; }
.result:hover { box-shadow: inset 0 0 0 1.5px var(--green-ink); }
.result small { display: block; color: var(--gray); font-size: 13px; }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.star-pick { display: flex; gap: 4px; }
.star-pick button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--line); transition: transform .15s, color .15s; }
.star-pick button.on { color: var(--star); }
.star-pick button:hover { transform: scale(1.12); }
.star-pick svg { width: 30px; height: 30px; }
.divider { height: 1px; background: var(--line); }

/* Big numbers (calculator) */
.stat-big { font-size: clamp(56px, 9vw, 96px); font-weight: 650; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-grid > div { background: var(--mist); border-radius: 18px; padding: 16px; }
.stat-grid b { display: block; font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-grid small { color: var(--gray); font-size: 13px; }
@media (max-width: 600px) { .stat-grid { grid-template-columns: 1fr; } }

/* Tools hub */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card { display: grid; gap: 10px; text-decoration: none; padding: 30px; border-radius: 28px; background: var(--mist); transition: transform .3s var(--ease), box-shadow .3s; }
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--green-ink); }
.tool-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--white); color: var(--green-ink); margin-bottom: 6px; }
.tool-card .ic svg { width: 24px; height: 24px; }
.tool-card p { color: var(--gray); }
.tool-card .go { color: var(--green-ink); font-weight: 600; font-size: 15px; margin-top: 4px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); margin-top: 28px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--green-ink), var(--green-ink)) center / 100% 2px no-repeat, linear-gradient(var(--green-ink), var(--green-ink)) center / 2px 100% no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gray); padding-bottom: 22px; max-width: 42em; }

/* Steps (a real sequence) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; counter-reset: st; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.steps li { list-style: none; background: var(--white); border-radius: 22px; padding: 24px; counter-increment: st; box-shadow: 0 0 0 1px var(--line); }
.steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.steps li p { color: var(--gray); margin-top: 6px; font-size: 16px; }

/* CTA band */
.cta { border-radius: 32px; padding: clamp(32px, 6vw, 64px); background: radial-gradient(70% 90% at 85% 10%, rgb(0 214 88 / .28), transparent 60%), linear-gradient(160deg, #0b3d24, #062012 80%); color: #fff; display: grid; gap: 16px; justify-items: start; }
.cta .lead { color: rgb(255 255 255 / .8); }

/* Related tools */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 760px) { .related { grid-template-columns: 1fr; } }
.related a { text-decoration: none; background: var(--mist); border-radius: 18px; padding: 18px; font-weight: 600; transition: box-shadow .2s; }
.related a:hover { box-shadow: inset 0 0 0 1.5px var(--green-ink); }
.related a small { display: block; color: var(--gray); font-weight: 400; font-size: 14px; margin-top: 4px; }

/* Footer */
.foot { background: var(--mist); padding: 40px 0 48px; font-size: 13px; color: var(--gray); }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot-line { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }

@media print {
  .nav, .foot, .no-print, .crumbs, .page-hero, section.block:not(.print-keep) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Guides (articles): one comfortable reading column */
:root { --body: #3a3d44; }
:root[data-theme="dark"] { --body: #c9cdd3; }
.col { width: min(100% - 40px, 720px); margin-inline: auto; }
.article { padding: 8px 0 clamp(56px, 8vw, 96px); }
.article h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 650; letter-spacing: -.04em; line-height: 1.05; margin-top: 28px; }
.article .meta { margin-top: 16px; font-size: 15px; color: var(--gray); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.article .meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--soft); }
.article h2 { font-size: clamp(26px, 3vw, 32px); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; margin: 64px 0 16px; scroll-margin-top: 84px; }
.article h3 { font-size: 20px; font-weight: 600; margin: 32px 0 6px; letter-spacing: -.015em; }
.article p, .article li { color: var(--body); font-size: 18px; line-height: 1.7; }
.article p + p { margin-top: 16px; }
.article ol, .article ul { padding-left: 22px; display: grid; gap: 14px; margin-top: 16px; }
.article li::marker { color: var(--green-ink); font-weight: 650; }
.article strong { color: var(--ink); font-weight: 650; }
.article .link { font-weight: 600; }
.answer { margin-top: 36px; border-radius: 22px; padding: 24px 28px; background: var(--brand-50); box-shadow: inset 4px 0 0 var(--brand); }
.answer b { display: block; color: var(--green-ink); font-size: 13px; font-weight: 650; letter-spacing: .01em; margin-bottom: 8px; }
.answer p { color: var(--ink) !important; font-size: 19px !important; line-height: 1.6 !important; }
.toc { margin-top: 24px; padding: 22px 26px; border-radius: 22px; background: var(--mist); }
.toc b { font-size: 14px; color: var(--gray); font-weight: 600; }
.toc ol { margin-top: 10px !important; gap: 6px !important; }
.toc li { font-size: 16px !important; line-height: 1.5 !important; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.quote { margin-top: 14px !important; padding: 16px 20px; border-radius: 16px; background: var(--mist); color: var(--ink) !important; font-size: 17px !important; }
.quote.good { background: var(--brand-50); }
.quote small { display: block; font-size: 13px; color: var(--gray); margin-bottom: 6px; font-weight: 600; }
.article .faq summary { font-size: 18px; }
.article .faq details p { font-size: 17px; }