/* resources.html — Free Tools (hand-built: templates/pages/resources.html). Scoped to the page. */
:root.page-resources body .rs-top {
position: relative; overflow: hidden; padding: 56px 0 88px;
background: linear-gradient(180deg, #fff, var(--paper)); border-bottom: 1px solid var(--rule);
}
:root.page-resources body .rs-top::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(rgba(7,24,39,.045) 1px, transparent 1px) 0 0 / 100% 64px;
}
:root.page-resources body .rs-top-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; }
:root.page-resources body .rs-title { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.02; margin: 18px 0 18px; }
:root.page-resources body .rs-title em, :root.page-resources body .rs-copy h2 em { font-style: italic; color: var(--blue); }
:root.page-resources body .rs-top .lede { margin: 0; }
:root.page-resources body .rs-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); background: #fff; box-shadow: 0 30px 50px -36px rgba(7,24,39,.45); }
:root.page-resources body .rs-index a {
display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: 4px 12px;
padding: 20px 22px; border: 1px solid var(--rule); border-top: 0; color: var(--ink); transition: background .25s;
}
:root.page-resources body .rs-index a::after { content: "\2193"; grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--blue-text); transition: transform .25s var(--ease); }
:root.page-resources body .rs-index a:hover { background: var(--paper); color: var(--ink); }
:root.page-resources body .rs-index a:hover::after { transform: translateY(3px); }
:root.page-resources body .rs-index span { grid-row: 1 / span 2; font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--blue); line-height: 1; }
:root.page-resources body .rs-index b { font-family: var(--serif); font-size: 19px; color: var(--navy); font-weight: 700; }
:root.page-resources body .rs-index small { grid-column: 2; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
/* tool rows */
:root.page-resources body .rs-tool { padding: 104px 0; scroll-margin-top: 70px; }
:root.page-resources body .rs-alt { background: #fff; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
:root.page-resources body .rs-tool-in { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
:root.page-resources body .rs-num { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-text); }
:root.page-resources body .rs-copy h2 { font-size: clamp(32px, 3.6vw, 46px); margin: 14px 0 16px; }
:root.page-resources body .rs-copy > p { font-size: 18px; max-width: 32em; margin: 0 0 22px; }
:root.page-resources body .rs-ticks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 30em; }
:root.page-resources body .rs-ticks li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--ink); }
:root.page-resources body .rs-ticks li::before {
content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 9px;
border-left: 2px solid var(--level-2); border-bottom: 2px solid var(--level-2); transform: rotate(-45deg);
}
/* workbook pages */
:root.page-resources body .rs-pages { position: relative; height: 440px; }
:root.page-resources body .rs-sheet {
position: absolute; width: 52%; height: auto; background: #fff; border: 1px solid var(--rule);
box-shadow: 0 30px 50px -24px rgba(7,24,39,.45); transition: transform .8s var(--ease);
}
:root.page-resources body .rs-sheet.p1 { left: 6%; top: 4%; transform: rotate(-5deg); }
:root.page-resources body .rs-sheet.p2 { right: 4%; top: 0; transform: rotate(4deg); }
:root.page-resources body .rs-pages:hover .p1 { transform: rotate(-7deg) translateX(-10px); }
:root.page-resources body .rs-pages:hover .p2 { transform: rotate(6deg) translateX(10px); }
/* the form */
:root.page-resources body .rs-form-wrap { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: 36px 34px 32px; box-shadow: 0 30px 50px -36px rgba(7,24,39,.45); }
:root.page-resources body .rs-form-title { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 20px; }
:root.page-resources body .rs-form input[type="text"], :root.page-resources body .rs-form input[type="email"] { margin-bottom: 16px; min-height: 48px; }
:root.page-resources body .rs-label { font-size: 13px; margin-bottom: 6px; }
:root.page-resources body .tt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:root.page-resources body .cc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-2); margin: 4px 0 22px; cursor: pointer; }
:root.page-resources body .cc-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
:root.page-resources body .rs-form button { width: 100%; min-height: 50px; }
/* calculators list */
:root.page-resources body .rs-calcs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
:root.page-resources body .rs-calcs li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--rule); }
:root.page-resources body .rs-calcs svg { width: 32px; height: 32px; color: var(--blue-text); }
:root.page-resources body .rs-calcs span { color: var(--ink-2); font-size: 15.5px; }
:root.page-resources body .rs-calcs b { display: block; font-family: var(--serif); font-size: 21px; color: var(--navy); margin-bottom: 2px; }
/* cta */
:root.page-resources body section.cta h2 { font-size: clamp(30px, 3.4vw, 44px); }
:root.page-resources body section.cta .btn-group { margin-top: 26px; }
:root.page-resources body .rs-risk { font-size: 13px; margin: 28px 0 0; max-width: 52em; color: #9FB0C2 !important; }
:root.page-resources body .rs-risk a { color: #fff; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
:root.page-resources body .rs-sheet { transition: none; }
}
@media (max-width: 960px) {
:root.page-resources body .rs-top-in, :root.page-resources body .rs-tool-in { grid-template-columns: 1fr; gap: 44px; }
:root.page-resources body .rs-pages { height: 380px; max-width: 520px; width: 100%; }
}
@media (max-width: 680px) {
:root.page-resources body .wrap { padding: 0 16px; }
:root.page-resources body .rs-top { padding: 36px 0 56px; }
:root.page-resources body .rs-tool { padding: 64px 0; }
:root.page-resources body .rs-pages { height: 300px; }
:root.page-resources body .rs-form-wrap { padding: 28px 20px 24px; }
:root.page-resources body .rs-index a { padding: 16px; }
:root.page-resources body section.cta .container { padding: 0 16px; }
}