@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --resource-navy: #101c2c;
  --resource-navy-soft: #1a2b3f;
  --resource-mint: #baf5df;
  --resource-teal: #18bca5;
  --resource-teal-dark: #087c71;
  --resource-cloud: #f2f6f5;
  --resource-white: #ffffff;
  --resource-ink: #172232;
  --resource-muted: #526171;
  --resource-line: #d5dfdc;
  --resource-warm: #f1e4ca;
  --resource-shell: min(1160px, calc(100% - 40px));
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--resource-white); color: var(--resource-ink); font-family: "DM Sans", sans-serif; }
.resources-main { overflow: hidden; }
.resources-shell { width: var(--resource-shell); margin-inline: auto; }
.resource-section { padding: 108px 0; scroll-margin-top: 90px; }
.resources-eyebrow { margin: 0 0 14px; color: var(--resource-teal-dark); font: 800 .75rem/1.2 "Manrope", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.resources-eyebrow-light { color: var(--resource-mint); }
.section-heading { max-width: 510px; }
.section-heading-wide { max-width: 780px; margin-bottom: 48px; }
.section-heading h2, .professional-safety h2, .professional-faq h2 { margin: 0; color: var(--resource-navy); font: 700 clamp(2rem, 4vw, 3.55rem)/1.05 "Space Grotesk", sans-serif; letter-spacing: 0; }
.section-heading > p:last-child { margin: 20px 0 0; color: var(--resource-muted); font: 400 1.04rem/1.75 "Manrope", sans-serif; }
.resources-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; box-sizing: border-box; padding: 0 24px; border: 1px solid transparent; color: var(--resource-navy); text-decoration: none; font: 800 .88rem/1 "Manrope", sans-serif; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.resources-button:hover { transform: translateY(-2px); }
.resources-button:focus-visible, .resources-text-link:focus-visible, .resource-links a:focus-visible, .hero-index a:focus-visible, summary:focus-visible { outline: 3px solid var(--resource-teal); outline-offset: 4px; }
.resources-button-mint { background: var(--resource-mint); }
.resources-button-mint:hover { background: var(--resource-white); }
.resources-button-outline { border-color: rgba(255,255,255,.5); color: var(--resource-white); }
.resources-button-outline:hover { border-color: var(--resource-mint); color: var(--resource-mint); }
.resources-button-light { background: var(--resource-white); }
.resources-button-light:hover { background: var(--resource-mint); }
.resources-button-dark-outline { border-color: var(--resource-navy); color: var(--resource-navy); }
.resources-button-dark-outline:hover { background: var(--resource-navy); color: var(--resource-white); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.resources-text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; color: var(--resource-teal-dark); text-decoration: none; font: 800 .9rem/1.3 "Manrope", sans-serif; }
.resources-text-link span { font-size: 1.2rem; transition: transform .2s ease; }
.resources-text-link:hover span { transform: translateX(4px); }

.resources-hero { position: relative; padding: 94px 0 88px; background: var(--resource-navy); color: var(--resource-white); }
.resources-hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(186,245,223,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(186,245,223,.24) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 82%); }
.resources-hero::after { content: ""; position: absolute; right: max(-160px, calc((100vw - 1160px) / 2 - 230px)); bottom: -270px; width: 610px; height: 610px; border: 1px solid rgba(186,245,223,.23); border-radius: 50%; box-shadow: 0 0 0 86px rgba(186,245,223,.035), 0 0 0 172px rgba(186,245,223,.025); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); align-items: end; gap: 90px; }
.hero-copy h1 { max-width: 760px; margin: 0; font: 700 clamp(3rem, 5.8vw, 5.7rem)/.96 "Space Grotesk", sans-serif; letter-spacing: 0; }
.hero-copy > p:last-of-type { max-width: 670px; margin: 28px 0 0; color: #dce5e7; font: 400 1.12rem/1.7 "Manrope", sans-serif; }
.hero-index { padding: 28px 28px 20px; border: 1px solid rgba(255,255,255,.18); background: rgba(16,28,44,.72); backdrop-filter: blur(8px); }
.index-label { display: block; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.18); color: var(--resource-mint); font: 800 .72rem/1.2 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hero-index ol { margin: 0; padding: 0; list-style: none; }
.hero-index li { border-bottom: 1px solid rgba(255,255,255,.13); }
.hero-index li:last-child { border-bottom: 0; }
.hero-index a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 17px 0; color: var(--resource-white); text-decoration: none; font: 700 .9rem/1.35 "Manrope", sans-serif; }
.hero-index a span { color: var(--resource-teal); font: 700 .72rem/1.4 "Space Grotesk", sans-serif; }
.hero-index a:hover { color: var(--resource-mint); }

.resource-navigation { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--resource-line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.resource-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.resource-links a { position: relative; flex: 0 0 auto; min-height: 64px; display: inline-flex; align-items: center; padding: 0 17px; color: #53606c; text-decoration: none; font: 800 .78rem/1 "Manrope", sans-serif; }
.resource-links a::after { content: ""; position: absolute; right: 17px; bottom: 0; left: 17px; height: 3px; background: transparent; }
.resource-links a:hover { color: var(--resource-teal-dark); }
.resource-links a:hover::after { background: var(--resource-teal); }

.start-section { background: var(--resource-cloud); }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--resource-navy); list-style: none; }
.onboarding-steps li { min-height: 190px; display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 30px 28px; border-right: 1px solid var(--resource-line); border-bottom: 1px solid var(--resource-line); box-sizing: border-box; }
.onboarding-steps li:nth-child(3n) { border-right: 0; }
.onboarding-steps li > span, .profile-guidance article > span, .opportunity-flow article > span { color: var(--resource-teal-dark); font: 700 .73rem/1.4 "Space Grotesk", sans-serif; }
.onboarding-steps h3, .profile-guidance h3, .opportunity-flow h3 { margin: 0 0 10px; color: var(--resource-navy); font: 700 1.12rem/1.3 "Space Grotesk", sans-serif; letter-spacing: 0; }
.onboarding-steps p, .profile-guidance p, .opportunity-flow p { margin: 0; color: var(--resource-muted); line-height: 1.65; }

.profile-layout { display: grid; grid-template-columns: 350px 1fr; align-items: start; gap: 90px; }
.profile-intro { position: sticky; top: 104px; }
.profile-guidance { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--resource-navy); }
.profile-guidance article { min-height: 185px; padding: 27px 24px; border-right: 1px solid var(--resource-line); border-bottom: 1px solid var(--resource-line); box-sizing: border-box; }
.profile-guidance article:nth-child(even) { border-right: 0; }
.profile-guidance article > span { display: block; margin-bottom: 26px; }
.copy-example { display: grid; grid-template-columns: .7fr .9fr 1.4fr; margin-top: 72px; border: 1px solid var(--resource-line); background: var(--resource-white); }
.example-label, .copy-comparison { min-height: 190px; padding: 28px; box-sizing: border-box; }
.example-label { background: var(--resource-navy); color: var(--resource-white); }
.example-label span, .copy-comparison > span { display: block; margin-bottom: 30px; font: 800 .7rem/1.2 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.example-label span { color: var(--resource-mint); }
.example-label strong { font: 700 1.5rem/1.2 "Space Grotesk", sans-serif; }
.copy-comparison { border-right: 1px solid var(--resource-line); }
.copy-comparison:last-child { border-right: 0; }
.copy-comparison p { margin: 0; font: 500 1rem/1.65 "Manrope", sans-serif; }
.weak-copy { color: #68717a; background: #f8f9f9; }
.weak-copy > span { color: #8a4b45; }
.better-copy { color: var(--resource-navy); background: var(--resource-mint); }
.better-copy > span { color: var(--resource-teal-dark); }

.matching-section { background: var(--resource-navy); color: var(--resource-white); }
.matching-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 78px; }
.matching-section .section-heading h2 { color: var(--resource-white); }
.matching-section .section-heading > p:last-child { color: #cdd9dc; }
.matching-diagram { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; gap: 8px; }
.match-input { min-height: 160px; display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid rgba(255,255,255,.2); background: var(--resource-navy-soft); box-sizing: border-box; }
.match-input span { margin-bottom: 14px; color: var(--resource-mint); font: 800 .66rem/1.2 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.match-input strong { font: 600 .82rem/1.4 "Manrope", sans-serif; }
.match-plus { display: flex; align-items: center; justify-content: center; color: var(--resource-teal); font: 500 1.5rem/1 "Space Grotesk", sans-serif; }
.match-result { grid-column: 1 / -1; min-height: 110px; display: grid; grid-template-columns: 50px 1fr; align-items: center; margin-top: 8px; padding: 20px 28px; background: var(--resource-mint); color: var(--resource-navy); box-sizing: border-box; }
.match-result > span { grid-row: 1 / 3; font-size: 1.8rem; }
.match-result strong { font: 700 1.05rem/1.3 "Space Grotesk", sans-serif; }
.match-result small { margin-top: 4px; color: #38504f; }

.opportunities-section { background: var(--resource-cloud); }
.opportunity-flow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--resource-navy); }
.opportunity-flow article { min-height: 230px; padding: 28px 24px; border-right: 1px solid var(--resource-line); border-bottom: 1px solid var(--resource-line); box-sizing: border-box; }
.opportunity-flow article:last-child { border-right: 0; }
.opportunity-flow article > span { display: block; margin-bottom: 38px; }
.opportunity-note { display: grid; grid-template-columns: 190px 1fr; gap: 34px; margin-top: 30px; padding: 24px 28px; border-left: 4px solid var(--resource-teal); background: var(--resource-white); }
.opportunity-note strong { color: var(--resource-navy); font: 700 1rem/1.5 "Space Grotesk", sans-serif; }
.opportunity-note p { margin: 0; color: var(--resource-muted); line-height: 1.7; }

.response-layout { display: grid; grid-template-columns: 1fr .9fr; align-items: start; gap: 90px; }
.response-tips { margin: 40px 0 0; padding: 0; border-top: 1px solid var(--resource-navy); list-style: none; }
.response-tips li { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--resource-line); }
.response-tips strong { color: var(--resource-navy); font-family: "Manrope", sans-serif; }
.response-tips span { color: var(--resource-muted); line-height: 1.55; }
.response-example { position: relative; margin: 0; padding: 44px 42px; background: var(--resource-warm); color: var(--resource-navy); }
.response-example::before { content: "“"; position: absolute; top: 18px; right: 28px; color: rgba(16,28,44,.16); font: 700 6rem/1 "Space Grotesk", sans-serif; }
.response-example > span { display: block; margin-bottom: 34px; color: #6c552d; font: 800 .7rem/1.2 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.response-example p { position: relative; margin: 0; font: 600 1.22rem/1.65 "Manrope", sans-serif; }
.response-example footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(16,28,44,.2); color: #5f594e; font-size: .83rem; }

.quoting-section { background: #eaf1ef; }
.quoting-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 90px; }
.quote-anatomy { padding: 36px; background: var(--resource-white); }
.quote-anatomy h3 { margin: 0 0 26px; color: var(--resource-navy); font: 700 1.45rem/1.2 "Space Grotesk", sans-serif; }
.quote-anatomy ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border-top: 1px solid var(--resource-navy); list-style: none; }
.quote-anatomy li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 15px 8px; border-bottom: 1px solid var(--resource-line); color: var(--resource-ink); font-weight: 600; }
.quote-anatomy li span { color: var(--resource-teal-dark); font: 700 .7rem/1.5 "Space Grotesk", sans-serif; }
.resource-disclaimer { margin: 24px 0 0; color: var(--resource-muted); font-size: .8rem; line-height: 1.6; }

.growth-columns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--resource-navy); }
.growth-columns article { padding: 38px 38px 40px 0; border-bottom: 1px solid var(--resource-line); }
.growth-columns article + article { padding-right: 0; padding-left: 38px; border-left: 1px solid var(--resource-line); }
.article-kicker { color: var(--resource-teal-dark); font: 800 .7rem/1.2 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.growth-columns h3 { max-width: 460px; margin: 20px 0; color: var(--resource-navy); font: 700 1.65rem/1.2 "Space Grotesk", sans-serif; }
.growth-columns p, .growth-columns li { color: var(--resource-muted); line-height: 1.7; }
.growth-columns ul { margin: 0; padding-left: 20px; }
.growth-columns li + li { margin-top: 7px; }
.marketing-checklist { display: grid; grid-template-columns: 280px 1fr; gap: 55px; margin-top: 56px; padding: 38px; background: var(--resource-navy); color: var(--resource-white); }
.marketing-checklist h3 { margin: 0; font: 700 1.7rem/1.2 "Space Grotesk", sans-serif; }
.marketing-checklist ul { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; margin: 0; padding: 0; list-style: none; }
.marketing-checklist li { position: relative; padding-left: 29px; color: #dae4e6; line-height: 1.45; }
.marketing-checklist li::before { content: ""; position: absolute; top: 2px; left: 0; width: 15px; height: 15px; border: 1px solid var(--resource-teal); }

.plans-section { background: var(--resource-cloud); }
.plans-layout { display: grid; grid-template-columns: 1fr .72fr .9fr; align-items: stretch; gap: 18px; }
.plans-layout .section-heading { padding-right: 50px; align-self: center; }
.plan-summary { min-height: 330px; display: flex; flex-direction: column; padding: 34px; box-sizing: border-box; }
.plan-summary > span { color: var(--resource-teal-dark); font: 800 .72rem/1.2 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.plan-summary > strong { margin: 26px 0; color: var(--resource-navy); font: 700 2.5rem/1 "Space Grotesk", sans-serif; }
.plan-summary > strong small { font-size: .8rem; }
.plan-summary p { margin: 0 0 18px; color: var(--resource-ink); font: 600 1rem/1.55 "Manrope", sans-serif; }
.plan-summary > small { margin-top: auto; color: var(--resource-muted); line-height: 1.55; }
.free-summary { border: 1px solid var(--resource-line); background: var(--resource-white); }
.premium-summary { background: var(--resource-mint); }

.hire-section { position: relative; background: var(--resource-navy); color: var(--resource-white); }
.hire-layout { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 100px; }
.hire-copy h2 { margin: 0; font: 700 clamp(2.4rem, 4.5vw, 4.2rem)/1 "Space Grotesk", sans-serif; }
.hire-copy > p:not(.resources-eyebrow) { max-width: 650px; margin: 20px 0 0; color: #d2dcdf; font: 400 1rem/1.75 "Manrope", sans-serif; }
.hire-flow { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.25); list-style: none; }
.hire-flow li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.hire-flow li span { color: var(--resource-teal); font: 700 .72rem/1.4 "Space Grotesk", sans-serif; }
.hire-flow li strong { font: 700 1rem/1.4 "Manrope", sans-serif; }

.help-section { background: var(--resource-white); }
.help-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 100px; }
.professional-safety ul { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--resource-navy); list-style: none; }
.professional-safety li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--resource-line); color: var(--resource-muted); }
.professional-safety li::before { content: ""; position: absolute; top: 20px; left: 4px; width: 7px; height: 7px; background: var(--resource-teal); transform: rotate(45deg); }
.professional-faq details { border-bottom: 1px solid var(--resource-line); }
.professional-faq details:first-of-type { margin-top: 28px; border-top: 1px solid var(--resource-navy); }
.professional-faq summary { position: relative; padding: 19px 44px 19px 0; color: var(--resource-navy); cursor: pointer; font: 700 1rem/1.45 "Manrope", sans-serif; list-style: none; }
.professional-faq summary::-webkit-details-marker { display: none; }
.professional-faq summary::before, .professional-faq summary::after { content: ""; position: absolute; top: 28px; right: 4px; width: 14px; height: 1px; background: var(--resource-navy); }
.professional-faq summary::after { transform: rotate(90deg); }
.professional-faq details[open] summary::after { transform: rotate(0); }
.professional-faq details p { margin: -3px 44px 20px 0; color: var(--resource-muted); line-height: 1.65; }

.resources-cta { position: relative; padding: 100px 0; background: var(--resource-teal); color: var(--resource-navy); text-align: center; }
.resources-cta::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(var(--resource-navy) .8px, transparent .8px); background-size: 16px 16px; }
.resources-cta .resources-shell { position: relative; }
.resources-cta .resources-eyebrow { color: var(--resource-navy); }
.resources-cta h2 { max-width: 850px; margin: 0 auto; font: 700 clamp(2.4rem, 5vw, 4.5rem)/1 "Space Grotesk", sans-serif; letter-spacing: 0; }
.resources-cta > div > p:not(.resources-eyebrow) { max-width: 680px; margin: 22px auto 0; font: 500 1.08rem/1.65 "Manrope", sans-serif; }
.button-row-centred { justify-content: center; }

@media (max-width: 1050px) {
  .hero-layout { gap: 55px; }
  .profile-layout, .matching-layout, .quoting-layout { gap: 60px; }
  .profile-layout { grid-template-columns: 300px 1fr; }
  .matching-layout { grid-template-columns: 1fr; }
  .matching-section .section-heading { max-width: 720px; }
  .plans-layout { grid-template-columns: 1fr 1fr; }
  .plans-layout .section-heading { grid-column: 1 / -1; max-width: 720px; margin-bottom: 28px; padding-right: 0; }
}

@media (max-width: 820px) {
  .resource-section { padding: 82px 0; }
  .resources-hero { padding: 72px 0; }
  .hero-layout, .profile-layout, .response-layout, .quoting-layout, .hire-layout, .help-layout { grid-template-columns: 1fr; gap: 55px; }
  .hero-copy h1 { max-width: 690px; }
  .hero-index { max-width: 600px; }
  .profile-intro { position: static; max-width: 650px; }
  .copy-example { grid-template-columns: 1fr 1fr; }
  .example-label { grid-column: 1 / -1; min-height: 130px; }
  .onboarding-steps { grid-template-columns: 1fr 1fr; }
  .onboarding-steps li:nth-child(3n) { border-right: 1px solid var(--resource-line); }
  .onboarding-steps li:nth-child(even) { border-right: 0; }
  .opportunity-flow { grid-template-columns: 1fr 1fr; }
  .opportunity-flow article:nth-child(even) { border-right: 0; }
  .marketing-checklist { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  :root { --resource-shell: min(100% - 28px, 1160px); }
  html { scroll-padding-top: 70px; }
  .resource-section { padding: 64px 0; scroll-margin-top: 70px; }
  .resources-hero { padding: 57px 0 54px; }
  .resources-hero::after { display: none; }
  .hero-layout { gap: 42px; }
  .hero-copy h1 { font-size: clamp(2.45rem, 12vw, 3.8rem); }
  .hero-copy > p:last-of-type { margin-top: 22px; font-size: 1rem; }
  .button-row { align-items: stretch; }
  .button-row .resources-button { flex: 1 1 210px; }
  .hero-index { padding: 22px 20px 12px; }
  .resource-links { width: 100%; padding: 0 14px; box-sizing: border-box; }
  .resource-links a { min-height: 58px; padding-inline: 14px; }
  .section-heading h2, .professional-safety h2, .professional-faq h2 { font-size: 2rem; }
  .section-heading-wide { margin-bottom: 34px; }
  .onboarding-steps, .profile-guidance, .opportunity-flow, .plans-layout, .growth-columns { grid-template-columns: 1fr; }
  .onboarding-steps li, .onboarding-steps li:nth-child(3n), .profile-guidance article { min-height: 0; border-right: 0; }
  .profile-guidance article:nth-child(even) { border-right: 0; }
  .copy-example { grid-template-columns: 1fr; margin-top: 52px; }
  .example-label, .copy-comparison { min-height: 0; padding: 25px 22px; border-right: 0; border-bottom: 1px solid var(--resource-line); }
  .example-label span, .copy-comparison > span { margin-bottom: 18px; }
  .matching-diagram { grid-template-columns: 1fr; }
  .match-input { min-height: 0; }
  .match-plus { min-height: 28px; }
  .match-result { grid-column: 1; }
  .opportunity-flow article { min-height: 0; border-right: 0; }
  .opportunity-note { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .response-tips li { grid-template-columns: 1fr; gap: 5px; }
  .response-example { padding: 36px 26px; }
  .response-example p { font-size: 1.05rem; }
  .quote-anatomy { padding: 26px 20px; }
  .quote-anatomy ul { grid-template-columns: 1fr; }
  .growth-columns article, .growth-columns article + article { padding: 30px 0; border-right: 0; border-left: 0; }
  .marketing-checklist { padding: 28px 22px; }
  .marketing-checklist ul { grid-template-columns: 1fr; }
  .plan-summary { min-height: 0; padding: 28px 24px; }
  .plan-summary > small { margin-top: 16px; }
  .hire-layout { gap: 44px; }
  .resources-cta { padding: 76px 0; }
  .resources-cta h2 { font-size: 2.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}