/* BetterWebz service pages and search guide. Shared brand styles remain in styles.css. */
.resource-hero { position: relative; overflow: hidden; background: var(--ink); color: white; padding: 30px 0 90px; }
.resource-hero::before { content: ""; position: absolute; width: 700px; height: 700px; border: 1px solid #c9f07b15; border-radius: 50%; right: -170px; top: -350px; pointer-events: none; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #b0c4b9; font-size: .76rem; margin-bottom: 64px; }
.breadcrumbs a:hover { color: var(--lime); }
.resource-hero-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); gap: 76px; align-items: center; }
.resource-hero h1 { font-size: clamp(2.8rem,5.3vw,5rem); letter-spacing: -.057em; font-weight: 650; line-height: 1.01; margin: 0 0 27px; }
.resource-hero h1 em { color: var(--lime); font-style: normal; }
.resource-lede { color: #bed0c6; font-size: 1.08rem; max-width: 590px; line-height: 1.8; margin-bottom: 30px; }
.hero-fine-print { font-size: .77rem; color: #adc2b5; margin: 26px 0 0; }
.intent-board { padding: 28px; background: #f6f7f3; color: var(--ink); border-radius: 23px; box-shadow: 0 30px 60px #020f0966; transform: rotate(1deg); }
.board-top { display: flex; gap: 12px; align-items: center; font-size: .56rem; font-weight: 800; letter-spacing: .09em; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.board-mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: var(--lime); border-radius: 9px; font-size: .7rem; flex-shrink: 0; }
.board-caption { font-size: .8rem; color: var(--muted); margin: 22px 0 12px; }
.search-example { border: 1px solid var(--line); background: white; border-radius: 100px; padding: 13px 17px; display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: .94rem; box-shadow: 0 4px 14px #12351e06; }
.search-example > span:first-child { font-size: 1.6rem; line-height: 1; }
.intent-path { display: flex; gap: 18px; margin: 22px 18px; }
.intent-path > span { width: 1px; background: var(--line); position: relative; }
.intent-path > span::after { content: "↓"; position: absolute; bottom: -6px; left: -4px; background: var(--paper); color: var(--muted); }
.intent-path p { font-size: 1rem; line-height: 1.9; margin: 0; color: var(--muted); }
.intent-path strong { color: var(--ink); font-weight: 650; }
.intent-outcome { display: flex; gap: 14px; background: var(--lime); padding: 21px; border-radius: 12px; align-items: center; }
.outcome-icon { font-size: 1.9rem; font-weight: 400; }
.intent-outcome strong { font-size: .92rem; display: block; line-height: 1.4; }
.intent-outcome p { margin: 6px 0 0; font-size: .69rem; color: #345039; }
.board-disclaimer { margin: 18px 0 0; font-size: .66rem; line-height: 1.55; color: var(--muted); }
.resource-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.resource-card { padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.resource-number { display: inline-block; font-size: .8rem; color: var(--blue); font-weight: 700; margin-bottom: 34px; }
.resource-card h3 { font-size: 1.5rem; letter-spacing: -.04em; line-height: 1.18; margin-bottom: 18px; }
.resource-card p { color: var(--muted); font-size: .94rem; line-height: 1.8; margin: 0; }
.editor-note { display: flex; gap: 28px; padding: 26px 30px; border-left: 3px solid var(--blue); background: #edf0f9; margin: 36px 0 0; align-items: start; }
.editor-note strong { flex: 0 0 29%; line-height: 1.5; font-weight: 680; }
.editor-note p { margin: 0; color: #52635e; font-size: .94rem; }
.sample-section { background: #e8eee6; }
.sample-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 95px; align-items: center; }
.sample-layout h2 { font-size: clamp(2.3rem,4vw,3.7rem); line-height: 1.03; letter-spacing: -.05em; font-weight: 650; margin-bottom: 26px; }
.sample-layout p:not(.eyebrow) { color: #5c7063; }
.sample-layout .button { margin-top: 14px; }
.sample-disclaimer { font-size: .72rem; margin-top: 21px; max-width: 430px; }
.page-blueprint { background: white; border: 1px solid #d0ddce; border-radius: 14px; overflow: hidden; box-shadow: 0 25px 55px #12351e12; }
.blueprint-top { display: flex; gap: 5px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.blueprint-top > span { width: 6px; height: 6px; background: #c3cdbf; border-radius: 50%; }
.blueprint-top small { margin-left: auto; font-size: .56rem; font-weight: 700; color: var(--muted); letter-spacing: .1em; }
.blueprint-content { padding: 38px 30px; background: linear-gradient(120deg,#fcfcfa,#edf2e8); }
.blueprint-label { font-size: .6rem; letter-spacing: .09em; color: #5e735c; font-weight: 700; }
.blueprint-content > strong { display: block; font-size: 2rem; line-height: 1.1; letter-spacing: -.045em; margin: 19px 0 24px; font-weight: 650; }
.blueprint-button { display: inline-flex; gap: 30px; background: #133b2d; color: white; padding: 12px 18px; border-radius: 5px; font-size: .72rem; }
.blueprint-items { margin-top: 34px; display: grid; gap: 11px; font-size: .69rem; color: #4e6856; }
.blueprint-items span::before { content: "✓"; margin-right: 9px; }
.portal-preview { min-width: 0; }
.preview-label { font-size: .68rem; color: #a9c0b4; margin: 17px 14px 0; text-align: center; line-height: 1.65; }
.resource-page .faq-list p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.search-map { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.map-label { color: #afc6b9; font-size: .59rem; letter-spacing: .13em; font-weight: 650; margin-bottom: 23px; text-align: center; }
.map-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.map-cards > div { padding: 25px 20px; border: 1px solid #8aaf8b50; border-radius: 14px; background: #174033; }
.map-cards > div:last-child { background: #c9f07b; color: var(--ink); border-color: var(--lime); }
.map-cards small { font-size: .72rem; font-weight: 750; letter-spacing: .09em; }
.map-cards strong { display: block; font-size: 1.46rem; letter-spacing: -.045em; line-height: 1.14; margin: 27px 0 12px; }
.map-cards span { display: block; font-size: .71rem; opacity: .8; line-height: 1.55; }
.map-connector { width: 50%; height: 25px; border-inline: 1px solid #709879; border-bottom: 1px solid #709879; margin: 0 auto 25px; position: relative; border-radius: 0 0 9px 9px; }
.map-connector::after { content:""; position: absolute; left: 50%; bottom: -26px; height: 25px; width: 1px; background:#709879; }
.map-foundation { padding: 24px 26px; border: 1px solid #709879; border-radius: 14px; text-align: center; }
.map-foundation > span { color: #afc6b9; font-size: .59rem; letter-spacing: .11em; font-weight: 700; }
.map-foundation strong { display: block; font-size: 1.4rem; letter-spacing: -.03em; margin: 9px 0; }
.map-foundation p { color: #afc6b9; font-size: .79rem; line-height: 1.6; margin: 0; }
.article-layout { display: grid; grid-template-columns: 225px minmax(0,760px); gap: 80px; padding-block: 88px; align-items: start; justify-content: space-between; }
.article-sidebar { position: sticky; top: 120px; }
.article-sidebar nav { display: grid; gap: 12px; }
.article-sidebar nav > p { font-size: .65rem; font-weight: 750; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.article-sidebar a { font-size: .85rem; font-weight: 550; padding-block: 3px; }
.article-sidebar a:hover { color: var(--blue); }
.sidebar-note { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 25px; font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 175px; }
.guide-article > section { scroll-margin-top: 105px; padding-bottom: 62px; margin-bottom: 62px; border-bottom: 1px solid var(--line); }
.guide-article > section:last-child { margin: 0; padding: 0; border: 0; }
.guide-article h2 { font-size: clamp(2rem,3.4vw,3.25rem); line-height: 1.06; font-weight: 650; letter-spacing: -.045em; margin-bottom: 26px; }
.guide-article p { color: #52665d; line-height: 1.85; }
.guide-article .eyebrow { color: var(--blue); font-size: .65rem; }
.guide-article p a { color: #274fd2; text-decoration: underline; text-underline-offset: 4px; }
.comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 30px 0; }
.comparison > div { border: 1px solid var(--line); border-radius: 14px; padding: 27px; background: white; }
.comparison > div:last-child { background: #eaf1dd; }
.comparison-tag { font-size: .7rem; letter-spacing: .08em; font-weight: 750; color: #426e38; }
.comparison h3 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.03em; margin: 18px 0 13px; }
.comparison p { font-size: .9rem; margin: 0; }
.foundation-list { list-style: none; counter-reset: foundations; margin: 0; padding: 0; }
.foundation-list li { counter-increment: foundations; position: relative; padding: 21px 0 21px 61px; border-bottom: 1px solid var(--line); }
.foundation-list li:last-child { border: 0; padding-bottom: 0; }
.foundation-list li::before { content: "0" counter(foundations); position: absolute; left: 0; top: 20px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #cbd8c4; border-radius: 50%; background: #eaf1dd; font-size: .7rem; font-weight: 700; }
.foundation-list h3 { font-size: 1.15rem; line-height: 1.4; margin: 4px 0 10px; letter-spacing: -.02em; }
.foundation-list p { font-size: .96rem; margin: 0; }
.question-examples { display: grid; gap: 16px; margin: 30px 0; }
.question-examples > div { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 27px 30px; }
.question-examples span { color: var(--blue); font-size: .66rem; letter-spacing: .09em; font-weight: 750; }
.question-examples h3 { font-size: 1.4rem; line-height: 1.35; font-weight: 600; margin: 13px 0; letter-spacing: -.025em; }
.question-examples p { font-size: .94rem; margin: 0; }
.guide-article .editor-note { display: block; }
.guide-article .editor-note strong { display: block; margin-bottom: 9px; }
.measurement-line { display: flex; gap: 20px; align-items: center; padding: 24px; background: var(--green); color: white; border-radius: 12px; font-size: .85rem; font-weight: 600; margin-top: 30px; }
.measurement-line span:nth-child(even) { color: var(--lime); font-size: 1.1rem; }
.guide-article .faq-list summary { font-size: 1rem; }
.article-byline { font-size: .74rem; margin-top: 30px; }
.resource-links { background: #edf1e8; }
.resource-links .section-heading { margin-bottom: 36px; }
.resource-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.resource-link-card { position: relative; padding: 35px; border: 1px solid #d2dccb; border-radius: 18px; background: white; display: flex; flex-direction: column; align-items: start; transition: border-color 180ms, transform 180ms; }
.resource-link-card:hover { border-color: #66855c; transform: translateY(-3px); }
.resource-link-card > span:first-child { color: var(--blue); font-size: .66rem; letter-spacing: .11em; font-weight: 750; margin-bottom: 25px; }
.resource-link-card h3 { font-size: 2rem; line-height: 1.12; letter-spacing: -.045em; max-width: 420px; margin-bottom: 18px; font-weight: 650; }
.resource-link-card p { color: var(--muted); font-size: .95rem; max-width: 440px; margin-bottom: 30px; }
.resource-link-card strong { font-size: .86rem; margin-top: auto; color: #315b3d; }
@media (max-width: 1100px) { .resource-hero-grid { gap: 42px; } .article-layout { gap: 45px; grid-template-columns: 195px minmax(0,1fr); } .sample-layout { gap: 48px; } .resource-page .desktop-nav { gap: 18px; } }
@media (max-width: 920px) { .resource-hero { padding-bottom: 68px; } .resource-hero-grid { grid-template-columns: 1fr; gap: 45px; } .resource-hero h1 { max-width: 690px; font-size: clamp(3rem,8vw,4.8rem); } .breadcrumbs { margin-bottom: 44px; } .intent-board { max-width: 510px; width: 100%; margin: 0 auto; transform: none; } .search-map { max-width: 540px; width: 100%; margin: auto; } .resource-card-grid { gap: 14px; } .resource-card { padding: 25px; } .resource-card h3 { font-size: 1.3rem; } .sample-layout { gap: 32px; } .article-layout { grid-template-columns: 1fr; gap: 42px; padding-block: 50px; } .article-sidebar { position: static; } .article-sidebar nav { display: flex; flex-wrap: wrap; gap: 6px 22px; border-bottom: 1px solid var(--line); padding-bottom: 26px; } .article-sidebar nav > p { width: 100%; } .sidebar-note { display: none; } .guide-article { max-width: 760px; } }
@media (max-width: 650px) { .resource-hero { padding-top: 24px; } .breadcrumbs { font-size: .67rem; gap: 8px; margin-bottom: 38px; } .resource-hero h1 { font-size: clamp(2.7rem,11.5vw,4rem); } .resource-hero .eyebrow { font-size: .65rem; letter-spacing: .1em; } .resource-lede { font-size: 1rem; line-height: 1.75; } .hero-fine-print { font-size: .67rem; } .intent-board { padding: 22px; } .resource-card-grid, .sample-layout, .comparison, .resource-links-grid { grid-template-columns: 1fr; } .resource-card { padding: 28px; } .resource-number { margin-bottom: 22px; } .resource-card h3 { font-size: 1.6rem; } .editor-note { flex-direction: column; gap: 10px; padding: 23px; } .sample-layout { gap: 32px; } .blueprint-content { padding: 31px 25px; } .blueprint-content > strong { font-size: 1.75rem; } .map-cards { gap: 10px; } .map-cards > div { padding: 21px 16px; } .map-cards strong { font-size: 1.3rem; } .map-label { font-size: .5rem; } .guide-article > section { margin-bottom: 45px; padding-bottom: 45px; } .guide-article h2 { font-size: 2.1rem; } .foundation-list li { padding-left: 49px; } .foundation-list h3 { font-size: 1.08rem; } .foundation-list p { font-size: .93rem; } .question-examples > div { padding: 24px; } .measurement-line { padding: 20px 15px; gap: 12px; font-size: .71rem; justify-content: space-between; } .resource-link-card { padding: 29px; } .resource-link-card h3 { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { .resource-link-card { transition: none; } .resource-link-card:hover { transform: none; } }