/* Resource pages extend the existing Refinelook marketing design. */
.resource-index-main .interior-hero { max-width: 1070px; padding-bottom: 65px; }
.resource-index-main .interior-content { max-width: 1160px; }
.resource-essentials { padding-bottom: 70px; }
.resource-essentials-heading { margin-bottom: 28px; }
.resource-essentials-heading h2 { font-size: 28px; letter-spacing: -.04em; }
.resource-essentials-heading .article-meta { margin-bottom: 12px; }
.resource-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.resource-featured { position: relative; display: block; padding: 40px; border: 1px solid #dceee5; border-radius: 22px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.resource-featured-manual { background: linear-gradient(135deg, #f6fcf9, #e4f5ed); }
.resource-featured-privacy { background: linear-gradient(135deg, #faf9fe, #f0ecfa); border-color: #e8e0f3; }
.resource-featured:hover { border-color: #96bdac; box-shadow: 0 14px 40px -24px #50827255; }
.resource-featured-privacy:hover { border-color: #bca6d4; }
.resource-featured-icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 32px; border: 1px solid #fff; border-radius: 20px; background: #ffffffa6; box-shadow: 0 6px 20px #46776009; color: #38765f; transition: transform .4s; }
.resource-featured:hover .resource-featured-icon { transform: translateY(-4px) rotate(-4deg); }
.resource-featured-privacy .resource-featured-icon { color: #7953a5; }
.resource-featured-icon .icon { width: 34px; height: 34px; }
.resource-featured .article-meta { font-size: 9px !important; letter-spacing: .13em; }
.resource-featured h2 { font-size: 42px; margin-bottom: 17px; }
.resource-featured > p:not(.article-meta) { font-size: 15px; line-height: 1.7; }
.resource-featured-tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 24px 0 30px; }
.resource-featured-tags > span { border: 1px solid #56886e23; border-radius: 20px; padding: 6px 11px; color: #4c695b; font-size: 10px; background: #ffffff64; }
.resource-featured-privacy .resource-featured-tags > span { border-color: #86699b2b; color: #725486; }
.resource-featured .text-link { display: flex; justify-content: space-between; border-top: 1px solid #366b4d20; padding-top: 22px; }
.resource-featured-privacy .text-link { border-top-color: #72548c22; }
.resource-featured .text-link:hover { border-bottom-color: transparent; }
.guide-hero { max-width: 1216px; margin: 0 auto; padding: 55px 0 65px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 58px; align-items: center; }
.guide-back { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #586d62; padding: 7px 0; margin-bottom: 36px; }
.guide-back .icon { width: 15px; height: 15px; }
.guide-hero .eyebrow { margin-bottom: 22px; font-size: 9px; letter-spacing: .16em; }
.guide-hero .eyebrow .icon { width: 17px; height: 17px; color: #5c937d; }
.guide-hero h1 { font-size: clamp(42px, 4.5vw, 65px); line-height: 1.08; letter-spacing: -.065em; margin-bottom: 24px; }
.guide-hero-copy > p:not(.eyebrow) { max-width: 525px; font-size: 16px; line-height: 1.75; }
.guide-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 19px; font-size: 10px; color: #5a6962; margin-top: 28px; }
.guide-hero-meta > span { display: flex; align-items: center; gap: 6px; }
.guide-hero-meta .icon { width: 15px; height: 15px; }
.guide-hero-visual { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 370px; border-radius: 30px; border: 1px solid #e2eee8; background: url('/assets/marketing/cloud-workspace.webp') center / cover; padding: 42px 20px; margin-top: 40px; }
.guide-hero-privacy .guide-hero-visual { background: linear-gradient(130deg, #effbf4, #eef7fc 50%, #f1ebfb); }
.guide-emblem { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 29px; background: #ffffffce; border: 1px solid #fff; box-shadow: 0 18px 50px -20px #438a7b44, inset 0 0 18px #ffffff; transform: rotate(-7deg); margin: 8px 0 25px; color: #4d8b74; }
.guide-emblem .icon { width: 51px; height: 51px; }
.guide-hero-privacy .guide-emblem { color: #7c60a8; }
.guide-visual-label { font-size: 21px; font-weight: 600; letter-spacing: -.04em; color: #315b4d; text-align: center; }
.guide-visual-subtitle { margin-top: 8px; font-size: 11px; color: #536f63; text-align: center; }
.guide-float { display: flex; align-items: center; gap: 8px; position: absolute; border: 1px solid #fff; background: #ffffffde; border-radius: 12px; padding: 11px 12px; box-shadow: 0 6px 30px #416c7710; font-size: 9px; color: #375e51; }
.guide-float .icon { width: 16px; height: 16px; color: #609885; }
.guide-float-one { top: 35px; left: -17px; transform: rotate(-6deg); }
.guide-float-two { bottom: 69px; right: -13px; transform: rotate(5deg); }
.guide-visual-icons { display: flex; gap: 25px; margin-top: 35px; color: #567e6e; }
.guide-visual-icons .icon { width: 18px; height: 18px; }
.resource-document-main > .interior-content { max-width: 1216px; }
.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 85px; align-items: start; padding: 48px 0 0; border-top: 1px solid var(--line); }
.guide-sidebar { position: sticky; top: 116px; align-self: start; max-height: calc(100dvh - 140px); overflow-y: auto; scrollbar-width: thin; padding: 0 5px 8px 0; }
.guide-contents > summary { list-style: none; font-size: 11px; font-weight: 650; color: #4c6458; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; min-height: 40px; }
.guide-contents > summary::-webkit-details-marker { display: none; }
.guide-contents > summary .icon { width: 14px; height: 14px; transition: transform .2s; }
.guide-contents[open] > summary .icon { transform: rotate(180deg); }
.guide-contents nav { display: flex; flex-direction: column; gap: 3px; margin-top: 15px; }
.guide-contents nav a { display: flex; align-items: baseline; gap: 12px; font-size: 11px; line-height: 1.55; color: #627068; padding: 9px 10px; border-radius: 7px; transition: background .2s, color .2s; }
.guide-contents nav a > span { font-size: 9px; color: #82988b; font-variant-numeric: tabular-nums; flex: none; }
.guide-contents nav a:hover, .guide-contents nav a[aria-current] { background: #edf7f1; color: #20513d; }
.guide-reading { margin: 24px 10px 0; height: 2px; background: #edf1ef; overflow: hidden; }
.guide-reading span { height: 100%; width: 100%; display: block; background: #639e82; transform-origin: left; transform: scaleX(0); }
.guide-crosslink { display: flex; align-items: center; gap: 8px; margin: 28px 0 0; border-top: 1px solid var(--line); padding: 22px 10px 0; font-size: 10px; color: #67746c; }
.guide-crosslink > .icon { width: 17px; height: 17px; color: #729483; }
.guide-crosslink > .icon:last-child { margin-left: auto; width: 13px; height: 13px; }
.guide-article { min-width: 0; max-width: 810px; }
.guide-chapter { padding: 0 0 54px; margin: 0 0 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.guide-chapter-heading { display: flex; gap: 17px; align-items: flex-start; margin-bottom: 28px; }
.guide-chapter-icon { width: 47px; height: 47px; border-radius: 14px; display: inline-grid; place-items: center; color: #4a896f; background: #edf7f1; flex: none; }
.guide-chapter-icon .icon { width: 23px; height: 23px; }
.guide-chapter-heading .article-meta { font-size: 9px !important; margin: 1px 0 9px; letter-spacing: .13em; }
.guide-chapter h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.guide-chapter > p, .guide-chapter li { font-size: 15px; line-height: 1.85; color: #5a6660; }
.guide-chapter a:not(.guide-jump), .guide-provider-list a { color: #256b50; text-decoration: underline; text-decoration-color: #afcdbf; text-underline-offset: 4px; }
.guide-chapter a:hover { text-decoration-color: currentColor; }
.guide-chapter strong { color: #304a3b; font-weight: 600; }
.guide-chapter > p:last-child { margin-bottom: 0; }
.guide-steps { padding: 0; margin: 24px 0; list-style: none; counter-reset: step; }
.guide-steps > li { position: relative; counter-increment: step; padding: 0 0 22px 42px; }
.guide-steps > li:last-child { padding-bottom: 0; }
.guide-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #f3f7f4; border: 1px solid #e7efe9; font-size: 10px; color: #5c7a66; font-variant-numeric: tabular-nums; }
.guide-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 27px 0; }
.guide-jump { display: flex; align-items: center; gap: 9px; padding: 17px 13px; border: 1px solid #e3ece6; background: #fcfefd; border-radius: 11px; font-size: 11px; font-weight: 550; color: #355b47; transition: background .2s, border-color .2s; }
.guide-jump:hover { background: #eff8f2; border-color: #a9cbb8; }
.guide-jump > .icon { width: 17px; height: 17px; }
.guide-jump > .icon:last-child { width: 13px; height: 13px; margin-left: auto; }
.guide-note { display: flex; align-items: flex-start; gap: 14px; padding: 23px; border-radius: 14px; border: 1px solid #e1eae5; background: #f5faf7; margin-top: 30px; }
.guide-note > .icon { color: #538a6a; width: 21px; height: 21px; margin-top: 1px; }
.guide-note strong { display: block; font-size: 13px; margin-bottom: 7px; }
.guide-note p { font-size: 13px; line-height: 1.8; margin: 0; color: #5e7163; }
.guide-tool-list, .privacy-data-list { border-top: 1px solid #e8eeea; }
.guide-tool-list > div, .privacy-data-list > div { display: grid; grid-template-columns: 155px 1fr; gap: 14px 20px; padding: 24px 0; border-bottom: 1px solid #e8eeea; }
.guide-tool-list h3, .privacy-data-list h3 { font-size: 14px; color: #3b5848; letter-spacing: -.025em; padding-top: 3px; }
.guide-tool-list p, .privacy-data-list p { font-size: 14px; line-height: 1.8; margin: 0; }
.privacy-data-list .privacy-purpose { grid-column: 2; font-size: 12px; color: #536d5d; background: #f4f8f5; padding: 10px 13px; border-radius: 7px; }
.guide-provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 28px 0; }
.guide-provider-list > div { padding: 25px; border: 1px solid #e3ece5; border-radius: 13px; background: #fcfefd; }
.guide-provider-list h3 { font-size: 16px; margin-bottom: 12px; color: #3b5848; }
.guide-provider-list p { font-size: 13px; line-height: 1.8; margin-bottom: 12px; }
.guide-provider-list a { display: block; font-size: 11px; line-height: 1.8; margin-top: 7px; }
.guide-chapter .faq-list summary { font-size: 14px; }
.guide-end { text-align: center; padding: 10px 10px 65px; }
.guide-end h2 { font-size: 34px; margin: 10px 0 18px; }
.guide-end > p { font-size: 14px; }
.guide-end .button { font-size: 12px; min-height: 46px; white-space: normal; }
.guide-back-top { display: inline-flex; align-items: center; gap: 4px; color: #5f7769; margin-top: 27px; padding: 5px; font-size: 11px; }
.guide-back-top .icon { width: 13px; height: 13px; }
.has-motion .guide-emblem { animation: guide-emblem-enter .8s ease-out both; }
.has-motion .guide-float { animation: guide-float 7s ease-in-out infinite; }
.has-motion .guide-float-two { animation-delay: -3s; animation-duration: 8s; }
@keyframes guide-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes guide-emblem-enter { from { opacity: 0; transform: translateY(12px) rotate(-12deg); } to { opacity: 1; transform: translateY(0) rotate(-7deg); } }
.motion-paused .guide-emblem, .motion-paused .guide-float { animation: none; }
.motion-paused .resource-featured-icon, .motion-paused .guide-contents nav a, .motion-paused .guide-jump { transition: none; }
@media (max-width: 1300px) {
  .guide-hero, .resource-document-main > .interior-content { margin-left: 65px; margin-right: 65px; }
  .guide-hero { gap: 45px; }
  .guide-layout { gap: 48px; grid-template-columns: 210px minmax(0, 1fr); }
  .guide-paths { grid-template-columns: 1fr; }
  .guide-jump { padding: 12px 15px; }
}
@media (max-width: 1000px) {
  .guide-hero { gap: 30px; grid-template-columns: 1.3fr 1fr; }
  .guide-hero h1 { font-size: 47px; }
  .guide-hero-visual { min-height: 330px; }
  .guide-visual-label { font-size: 18px; }
  .guide-float { font-size: 8px; padding: 10px; }
  .guide-layout { gap: 35px; grid-template-columns: 185px minmax(0, 1fr); }
  .guide-contents nav a { font-size: 10px; gap: 8px; }
  .guide-chapter h2 { font-size: 27px; }
  .guide-tool-list > div, .privacy-data-list > div { grid-template-columns: 1fr; gap: 10px; }
  .privacy-data-list .privacy-purpose { grid-column: auto; }
  .guide-provider-list { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .resource-index-main .interior-hero { padding-bottom: 40px; }
  .resource-essentials { padding-bottom: 40px; }
  .resource-essentials-heading h2 { font-size: 25px; line-height: 1.2; }
  .resource-featured-grid { grid-template-columns: 1fr; gap: 18px; }
  .resource-featured { padding: 29px; border-radius: 18px; }
  .resource-featured-icon { width: 59px; height: 59px; margin-bottom: 26px; border-radius: 17px; }
  .resource-featured h2 { font-size: 37px; }
  .resource-featured-tags { margin: 20px 0 24px; }
  .guide-hero, .resource-document-main > .interior-content { margin-left: 24px; margin-right: 24px; }
  .guide-hero { display: block; padding: 22px 0 38px; }
  .guide-back { margin-bottom: 26px; font-size: 11px; }
  .guide-hero h1 { font-size: clamp(36px, 8.8vw, 62px); }
  .guide-hero .eyebrow { font-size: 8px; margin-bottom: 20px; }
  .guide-hero-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
  .guide-hero-meta { font-size: 9px; gap: 12px; margin-top: 22px; }
  .guide-hero-visual { min-height: 260px; padding: 24px; margin-top: 32px; border-radius: 21px; }
  .guide-emblem { width: 76px; height: 76px; border-radius: 22px; margin: 8px 0 18px; }
  .guide-emblem .icon { width: 38px; height: 38px; }
  .guide-float-one { top: 28px; left: -8px; }
  .guide-float-two { top: 22px; right: -8px; bottom: auto; }
  .guide-visual-icons { margin-top: 25px; gap: 25px; }
  .guide-visual-icons .icon { width: 16px; height: 16px; }
  .guide-layout { display: block; padding-top: 24px; }
  .guide-sidebar { position: static; max-height: none; overflow: visible; padding: 0; margin-bottom: 36px; }
  .guide-contents { border: 1px solid #dfeae3; border-radius: 12px; background: #fbfefc; padding: 5px 16px; }
  .guide-contents > summary { min-height: 44px; font-size: 12px; }
  .guide-contents nav { margin: 5px 0 12px; }
  .guide-contents nav a { font-size: 12px; padding: 10px 5px; }
  .guide-reading { margin: 8px 0 16px; }
  .guide-crosslink { border: 0; padding: 0 4px; margin-top: 20px; font-size: 11px; }
  .guide-chapter { padding-bottom: 35px; margin-bottom: 35px; scroll-margin-top: 8px; }
  .guide-chapter-heading { gap: 12px; margin-bottom: 24px; }
  .guide-chapter-icon { width: 40px; height: 40px; border-radius: 12px; }
  .guide-chapter-icon .icon { width: 20px; height: 20px; }
  .guide-chapter-heading .article-meta { font-size: 8px !important; margin-bottom: 7px; }
  .guide-chapter h2 { font-size: 26px; }
  .guide-chapter > p, .guide-chapter li { font-size: 14px; }
  .guide-steps > li { padding-left: 35px; }
  .guide-steps > li::before { width: 23px; height: 23px; font-size: 9px; }
  .guide-paths { gap: 8px; }
  .guide-jump { font-size: 12px; min-height: 48px; }
  .guide-note { padding: 18px; gap: 10px; }
  .guide-note p { font-size: 12px; }
  .guide-note strong { font-size: 12px; }
  .guide-end { padding: 10px 0 38px; }
  .guide-end h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-emblem, .guide-float { animation: none !important; }
  .resource-featured-icon, .guide-contents nav a, .guide-jump { transition: none; }
}
@media print {
  .site-header, .site-footer, .guide-sidebar, .guide-hero-visual, .end-cta, .guide-back, .guide-end, .skip-link { display: none !important; }
  .guide-hero, .resource-document-main > .interior-content { display: block; margin: 0; padding: 20px 0; }
  .guide-layout { display: block; padding-top: 15px; }
  .guide-hero h1 { font-size: 36px; }
  .guide-chapter { margin-bottom: 20px; padding-bottom: 20px; }
  .guide-chapter-heading { break-after: avoid; }
  .guide-note, .guide-provider-list > div { break-inside: avoid; }
  .gradient-text { color: #235c45; background: none; }
}