/* Recovery Roadmap landing page — WordPress integration layer */ html, body { margin: 0; padding: 0; } body { overflow-x: hidden; background: #fafaf8; } /* ========================================================= 01 — HERO ========================================================= */ .rr-hero { --cream: #f7f1e8; /* Existing UI colors retained */ --navy: #06243e; --copper: #cc744c; --text: #102a44; /* Title system borrowed from finalized section */ --title-ink: #142b45; --title-bronze: #cc744c; width: 100%; overflow: hidden; background: #fafaf8; color: var(--text); } .rr-hero *, .rr-hero *::before, .rr-hero *::after { box-sizing: border-box; } .rr-hero__inner { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; } /* ========================================================= MOBILE CONTENT ========================================================= */ .rr-hero__content { position: relative; z-index: 5; padding: 16px 29px 10px; } /* ========================================================= HEADLINE ========================================================= */ .rr-hero__title { margin: 0; color: var(--title-ink); font-family: "EB Garamond", Georgia, serif; font-size: clamp( 44px, 11.3vw, 58px ); line-height: 0.98; font-weight: 500; letter-spacing: -0.015em; } .rr-hero__title span { display: block; } .rr-hero__title .rr-hero__accent { color: var(--title-bronze); font-style: italic; font-weight: 500; } /* MOBILE: "3-step Recovery Roadmap" is always one line. */ @media (max-width: 899px) { .rr-hero__title { margin-top: 0; font-size: clamp( 36.01px, 9.57vw, 43.92px ); line-height: 0.99; letter-spacing: -0.025em; } .rr-hero__title .rr-hero__accent { display: block; white-space: nowrap; font-size: clamp( 28.11px, 7.82vw, 37.77px ); line-height: 1.02; letter-spacing: -0.015em; } } /* ========================================================= BODY COPY ========================================================= */ .rr-hero__copy { width: 100%; max-width: 520px; margin: 20px 0 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.46; font-weight: 400; letter-spacing: -0.015em; color: #536979; } /* ========================================================= PROOF ROW ========================================================= */ .rr-hero__proof { position: relative; z-index: 10; width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: -0.02em; color: #536979; } .rr-hero__proof-item { display: flex; align-items: center; gap: 6px; } .rr-hero__check { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient( 145deg, #ce7b58, #ba6545 ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 1px 3px rgba(117, 65, 43, 0.075); font-family: Inter, sans-serif; font-size: 9px; line-height: 1; font-weight: 600; color: #fffaf4; opacity: 0.82; } /* ========================================================= MOBILE IMAGE ========================================================= */ .rr-hero__visual { position: relative; z-index: 1; margin-top: 0; } .rr-hero__photo { position: relative; width: 100%; overflow: hidden; } .rr-hero__photo img { display: block; width: 100%; height: auto; object-fit: initial; object-position: initial; transform: none; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.04) 1.5%, rgba(0,0,0,.10) 3%, rgba(0,0,0,.18) 4.5%, rgba(0,0,0,.30) 6.5%, rgba(0,0,0,.46) 8.5%, rgba(0,0,0,.62) 10.5%, rgba(0,0,0,.78) 12.5%, rgba(0,0,0,.90) 14%, rgba(0,0,0,.97) 15.5%, #000 17%, #000 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.04) 1.5%, rgba(0,0,0,.10) 3%, rgba(0,0,0,.18) 4.5%, rgba(0,0,0,.30) 6.5%, rgba(0,0,0,.46) 8.5%, rgba(0,0,0,.62) 10.5%, rgba(0,0,0,.78) 12.5%, rgba(0,0,0,.90) 14%, rgba(0,0,0,.97) 15.5%, #000 17%, #000 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* ========================================================= MOBILE TOP FADE ========================================================= */ .rr-hero__photo::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 20%; pointer-events: none; background: linear-gradient( to bottom, rgba(250,250,248,.22) 0%, rgba(250,250,248,.16) 4%, rgba(250,250,248,.10) 8%, rgba(250,250,248,.055) 12%, rgba(250,250,248,.02) 16%, rgba(250,250,248,0) 20% ); } /* ========================================================= BOTTOM IMAGE SUPPORT ========================================================= */ .rr-hero__photo::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; background: linear-gradient( to top, rgba(3,17,31,.10) 0%, rgba(3,17,31,.03) 48%, rgba(3,17,31,0) 100% ); } /* ========================================================= MOBILE QUOTE ========================================================= */ .rr-hero__quote { --quote-side-rail: 22px; position: absolute; z-index: 6; left: 50%; bottom: 70px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px); display: grid; grid-template-columns: var(--quote-side-rail) minmax(0, max-content) var(--quote-side-rail); align-items: start; padding: 14px 0 14px 0; background: linear-gradient( 135deg, rgba(5,31,49,.13) 0%, rgba(5,31,49,.07) 100% ); -webkit-backdrop-filter: blur(26px) saturate(116%); backdrop-filter: blur(26px) saturate(116%); border: 1px solid rgba(255,255,255,.055); border-radius: 15px; box-shadow: 0 8px 24px rgba(2,20,34,.035), inset 0 1px 0 rgba(255,255,255,.045); } .rr-hero__quote::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( 180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.030) 42%, rgba(255,255,255,0) 76% ); } /* ========================================================= MOBILE QUOTE MARK ========================================================= */ .rr-hero__quote-mark { position: relative; z-index: 1; grid-column: 1; justify-self: center; align-self: start; top: auto; left: auto; margin: 1px 0 0; color: var(--title-bronze); font-family: "EB Garamond", Georgia, serif; font-size: clamp( 22px, 6vw, 27px ); line-height: .8; font-weight: 400; } /* ========================================================= MOBILE QUOTE CONTENT ========================================================= */ .rr-hero__quote-content { position: relative; z-index: 1; grid-column: 2; width: max-content; max-width: 100%; margin: 0 auto; min-width: 0; } .rr-hero__quote-text { margin: 0; width: max-content; max-width: 100%; font-family: "Source Sans 3", Arial, sans-serif; font-size: clamp( 10px, 3.3vw, 13px ); line-height: 1.38; font-weight: 400; letter-spacing: -0.015em; color: rgba( 255, 255, 255, .92 ); text-align: left; transform: none; } .rr-hero__quote-line { display: block; white-space: nowrap; } /* ========================================================= MOBILE ATTRIBUTION ========================================================= */ .rr-hero__attribution { width: max-content; max-width: 100%; margin: 8px 0 0; display: flex; align-items: baseline; gap: 2px; font-family: "Source Sans 3", Arial, sans-serif; font-size: 10px; line-height: 1.2; letter-spacing: -0.005em; text-align: left; transform: none; } .rr-hero__attribution strong { font-weight: 600; color: rgba( 255, 255, 255, .90 ); } .rr-hero__attribution span { font-weight: 400; color: rgba( 255, 255, 255, .54 ); } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 390px) { .rr-hero__content { padding-top: 12px; padding-left: 20px; padding-right: 20px; } .rr-hero__title { font-size: clamp( 35.14px, 9.49vw, 41.28px ); line-height: 0.99; letter-spacing: -0.023em; } .rr-hero__title .rr-hero__accent { font-size: clamp( 27.23px, 7.64vw, 35.14px ); line-height: 1.02; letter-spacing: -0.012em; } .rr-hero__copy { margin-top: 18px; } .rr-hero__proof { margin-top: 16px; gap: 10px; font-size: 10.5px; letter-spacing: -0.035em; } .rr-hero__proof-item { gap: 5px; } .rr-hero__check { width: 16px; height: 16px; flex: 0 0 16px; font-size: 9px; } } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 900px) { .rr-hero { min-height: 760px; --desktop-gutter: max( 64px, calc( (100vw - 1440px) / 2 + 64px ) ); } .rr-hero__inner { position: relative; width: 100%; max-width: none; margin: 0; min-height: 760px; display: block; } /* --------------------------------------------------------- CONTENT --------------------------------------------------------- */ .rr-hero__content { width: 59%; padding: clamp( 125px, calc(8vw + 35px), 165px ) 0 80px var(--desktop-gutter); } .rr-hero__title { max-width: 820px; font-size: clamp( 60px, 4.7vw, 65px ); line-height: 0.99; letter-spacing: -0.022em; } .rr-hero__title .rr-hero__accent { font-size: 0.88em; line-height: 1; letter-spacing: -0.015em; white-space: nowrap; } .rr-hero__copy { max-width: 610px; margin-top: 34px; font-size: 18px; line-height: 1.5; } /* --------------------------------------------------------- PROOF --------------------------------------------------------- */ .rr-hero__proof { max-width: 620px; margin-top: 32px; justify-content: flex-start; gap: 24px; font-size: 14px; letter-spacing: -0.015em; } .rr-hero__proof-item { gap: 7px; } .rr-hero__check { width: 22px; height: 22px; flex: 0 0 22px; font-size: 12px; } /* --------------------------------------------------------- IMAGE PANEL --------------------------------------------------------- */ .rr-hero__visual { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 52%; min-height: 100%; margin: 0; } .rr-hero__photo { position: absolute; inset: 0; overflow: hidden; } /* --------------------------------------------------------- DESKTOP PORTRAIT --------------------------------------------------------- */ .rr-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 24%; -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.58) 16%, rgba(0,0,0,.88) 28%, #000 39%, #000 100% ); mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.58) 16%, rgba(0,0,0,.88) 28%, #000 39%, #000 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* --------------------------------------------------------- DESKTOP CREAM → PHOTO BLEND --------------------------------------------------------- */ .rr-hero__photo::before { content: ""; display: block; position: absolute; z-index: 2; inset: 0; height: auto; pointer-events: none; /* Paint the exact offer-section surface over the left edge of the portrait, then fade it away using the ORIGINAL 0–40% blend distances. Because this surface matches the hero itself, the image-panel boundary cannot create a flat-color seam. */ background: #fafaf8; -webkit-mask-image: linear-gradient( to right, #000 0%, rgba(0,0,0,.90) 8%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.08) 32%, transparent 40% ); mask-image: linear-gradient( to right, #000 0%, rgba(0,0,0,.90) 8%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.08) 32%, transparent 40% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* --------------------------------------------------------- DESKTOP BOTTOM IMAGE SUPPORT --------------------------------------------------------- */ .rr-hero__photo::after { content: ""; display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; background: linear-gradient( to top, rgba(3,17,31,.08) 0%, rgba(3,17,31,.025) 48%, rgba(3,17,31,0) 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.08) 8%, rgba(0,0,0,.42) 18%, rgba(0,0,0,.82) 30%, #000 42%, #000 100% ); mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.08) 8%, rgba(0,0,0,.42) 18%, rgba(0,0,0,.82) 30%, #000 42%, #000 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* ========================================================= DESKTOP QUOTE ========================================================= */ .rr-hero__quote { left: auto; right: -1px; width: 370px; max-width: none; top: 66%; bottom: auto; transform: none; display: block; padding: 18px 16px 17px 36px; border-radius: 18px 0 0 18px; background: linear-gradient( 90deg, rgba(5,31,49,.13) 0%, rgba(5,31,49,.085) 58%, rgba(5,31,49,.055) 100% ); -webkit-backdrop-filter: blur(26px) saturate(116%); backdrop-filter: blur(26px) saturate(116%); border: 1px solid rgba(255,255,255,.05); border-right: 0; box-shadow: -3px 6px 18px rgba(2,20,34,.03), inset 0 1px 0 rgba(255,255,255,.04); } .rr-hero__quote-content { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; } .rr-hero__quote-mark { position: absolute; top: 17px; left: 12px; margin: 0; font-size: 35px; line-height: .8; } .rr-hero__quote-text { margin: 0; width: auto; max-width: none; font-size: 13.5px; line-height: 1.38; font-weight: 400; letter-spacing: -0.018em; color: rgba( 255, 255, 255, .92 ); } .rr-hero__quote-line { display: block; white-space: nowrap; } .rr-hero__attribution { width: auto; max-width: none; margin-top: 9px; font-size: 11px; line-height: 1.2; } } /* ========================================================= 02 — WHY NOTHING HAS WORKED ========================================================= */ /* ========================================================= GLOBAL / SQUARESPACE SAFE ========================================================= */ #dpdr-break-code, #dpdr-break-code * { box-sizing: border-box; } .dpdr-break-stage { position: relative; left: 50%; width: 100vw; max-width: 100vw; transform: translateX(-50%); margin: 0 !important; padding: 96px 0 96px; overflow: hidden; background: #fafaf8; } #dpdr-break-code { --section-bg: #fafaf8; --ink: #142b45; --body: #667889; --body-serif: #40586b; --body-dark: #2a3d51; --bronze: #cc744c; --bronze-soft: #d17d59; --icon: #8295a4; --card-bg: #ffffff; --card-border: #e5e5e1; --reveal-bg: #f1ece4; --reveal-border: #e3d9cc; width: min( 1150px, calc(100% - 40px) ); max-width: 1150px !important; margin: 0 auto !important; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; text-wrap: pretty; } #dpdr-break-code h1, #dpdr-break-code h2, #dpdr-break-code h3, #dpdr-break-code p { font-family: inherit; } /* ========================================================= HEADER ========================================================= */ #dpdr-break-code .break-header { max-width: 920px; margin: 0 auto; text-align: center; } #dpdr-break-code .break-title { max-width: 980px; margin: 0 auto !important; font-family: "EB Garamond", Georgia, serif !important; font-size: clamp( 56px, 6vw, 65px ) !important; line-height: 0.98 !important; font-weight: 500 !important; letter-spacing: -0.018em !important; text-align: center; text-wrap: balance; color: var(--ink) !important; } #dpdr-break-code .break-title em { color: var(--bronze) !important; font-style: italic !important; font-weight: inherit !important; } #dpdr-break-code .break-subtitle { max-width: 640px; margin: 30px auto 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 19px !important; line-height: 1.48 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-align: center; color: var(--body-serif) !important; } /* ========================================================= ORNAMENT ========================================================= */ #dpdr-break-code .break-ornament { display: grid; grid-template-columns: 86px 8px 86px; gap: 16px; align-items: center; width: fit-content; margin: 46px auto 0; } #dpdr-break-code .break-ornament__line { display: block; width: 86px; height: 1px; } #dpdr-break-code .break-ornament__line--left { background: linear-gradient( 90deg, rgba(209, 125, 89, 0), var(--bronze-soft) ); } #dpdr-break-code .break-ornament__line--right { background: linear-gradient( 90deg, var(--bronze-soft), rgba(209, 125, 89, 0) ); } #dpdr-break-code .break-ornament__diamond { display: block; width: 8px; height: 8px; background: var(--bronze); transform: rotate(45deg); } /* The ornament now lives inside the story bridge. Remove the standalone-section margin so it sits cleanly between the two story blocks at the bridge's own gap. */ #dpdr-break-code .break-ornament--story { margin: 0 !important; } /* ========================================================= I TRIED IT ALL ========================================================= */ #dpdr-break-code .tried-heading { margin: 40px 0 0 !important; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 28px !important; line-height: 1.1 !important; font-weight: 400 !important; color: var(--bronze) !important; } #dpdr-break-code .tried-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 20px; width: 880px; max-width: 100%; margin: 34px auto 0; } #dpdr-break-code .tried-card { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 72px; padding: 20px 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 2px 6px rgba(20, 43, 69, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.95); } #dpdr-break-code .tried-card__label { min-width: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 17px !important; line-height: 1.25 !important; font-weight: 400 !important; color: var(--body-dark) !important; } /* ========================================================= PHOSPHOR ICON SYSTEM ========================================================= */ #dpdr-break-code .tried-card__icon { display: flex; flex: 0 0 27px; align-items: center; justify-content: center; width: 27px; height: 27px; color: var(--icon); font-size: 27px; line-height: 1; font-weight: 400; -webkit-font-smoothing: antialiased; opacity: 0.94; } #dpdr-break-code .tried-card--mindfulness .tried-card__icon { font-size: 25px; } #dpdr-break-code .tried-card--grounding .tried-card__icon { font-size: 26px; } #dpdr-break-code .tried-card--sound .tried-card__icon { font-size: 28px; } /* ========================================================= STORY BRIDGE ========================================================= */ #dpdr-break-code .story-bridge { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; margin: 64px auto 0; } #dpdr-break-code .story-bridge__copy { max-width: 640px; margin: 0 !important; text-align: center; text-wrap: pretty; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 19px !important; line-height: 1.48 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: var(--body-serif) !important; } #dpdr-break-code .story-line--answer { color: var(--body-serif) !important; font-weight: 500 !important; opacity: 1 !important; } #dpdr-break-code .story-bridge__diamond { display: block; flex: 0 0 auto; width: 6px; height: 6px; background: var(--bronze-soft); transform: rotate(45deg); } #dpdr-break-code .story-copy-desktop { display: inline; } #dpdr-break-code .story-copy-mobile { display: none; } /* ========================================================= DESKTOP DISCOVERY LINE CONTROL ========================================================= */ #dpdr-break-code .story-line { display: block; } #dpdr-break-code .story-line--sources { margin-top: 2px; } #dpdr-break-code .story-line--research { margin-top: 2px; color: var(--body-serif) !important; font-weight: 500 !important; } /* ========================================================= LOOP REVEAL ========================================================= */ #dpdr-break-code .loop-reveal { width: 880px; max-width: 100%; margin: 40px auto 0; padding: 60px 48px 64px; display: flex; flex-direction: column; align-items: center; background: var(--reveal-bg); border: 1px solid var(--reveal-border); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62); } #dpdr-break-code .loop-reveal__icon { display: block; width: 48px; height: 48px; } #dpdr-break-code .loop-reveal__pretitle { margin: 28px 0 0 !important; text-align: center; font-size: 18px !important; line-height: 1.5 !important; font-weight: 500 !important; color: var(--ink) !important; } #dpdr-break-code .loop-reveal__title { max-width: 700px; margin: 12px 0 0 !important; text-align: center; text-wrap: balance; font-family: "EB Garamond", Georgia, serif !important; font-size: 38px !important; line-height: 1.12 !important; font-weight: 400 !important; color: var(--ink) !important; } #dpdr-break-code .loop-reveal__title em { color: var(--bronze) !important; font-style: italic !important; } #dpdr-break-code .loop-reveal__copy { max-width: 500px; margin: 26px 0 0 !important; text-align: center; text-wrap: balance; font-size: 18px !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--ink) !important; } /* ========================================================= TABLET ========================================================= */ @media ( max-width: 1000px ) and ( min-width: 721px ) { .dpdr-break-stage { padding: 78px 0 78px; } #dpdr-break-code { width: calc( 100% - 24px ); } #dpdr-break-code .break-title { max-width: 900px; font-size: clamp( 46px, 5.5vw, 54px ) !important; } #dpdr-break-code .break-subtitle { margin-top: 25px !important; font-size: 18px !important; line-height: 1.48 !important; } #dpdr-break-code .tried-grid { width: 760px; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 14px; } #dpdr-break-code .tried-card { min-height: 66px; padding: 18px 21px; } #dpdr-break-code .story-bridge { margin-top: 56px; } #dpdr-break-code .story-bridge__copy { font-size: 18px !important; line-height: 1.48 !important; } #dpdr-break-code .loop-reveal { width: 820px; padding: 54px 40px 58px; } #dpdr-break-code .loop-reveal__title { font-size: 35px !important; } } /* ========================================================= MOBILE ========================================================= */ @media ( max-width: 720px ) { .dpdr-break-stage { padding: 50px 0 50px; } #dpdr-break-code { width: calc( 100% - 24px ); } /* ----------------------------------------------------- HEADER ----------------------------------------------------- */ #dpdr-break-code .break-header { width: 100%; max-width: 100%; } #dpdr-break-code .break-title { max-width: 430px; margin-left: auto !important; margin-right: auto !important; padding-left: 17px; padding-right: 17px; font-size: clamp( 27.2px, 7.38vw, 30.74px ) !important; line-height: 1.03 !important; letter-spacing: -0.018em !important; text-align: left; text-wrap: normal; } #dpdr-break-code .break-subtitle { max-width: 430px; margin: 18px auto 0 !important; padding-left: 17px; padding-right: 17px; font-size: 17px !important; line-height: 1.42 !important; font-weight: 400 !important; letter-spacing: -0.01em !important; text-align: left; text-wrap: normal; } /* ----------------------------------------------------- ORNAMENT ----------------------------------------------------- */ #dpdr-break-code .break-ornament { grid-template-columns: 58px 7px 58px; gap: 12px; margin-top: 27px; } #dpdr-break-code .break-ornament__line { width: 58px; } #dpdr-break-code .break-ornament__diamond { width: 7px; height: 7px; } /* ----------------------------------------------------- TRIED HEADING ----------------------------------------------------- */ #dpdr-break-code .tried-heading { max-width: 430px; margin: 26px auto 0 !important; padding-left: 17px; padding-right: 17px; font-size: 22px !important; text-align: left; } /* ----------------------------------------------------- MOBILE GRID ----------------------------------------------------- */ #dpdr-break-code .tried-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 9px; width: 100%; margin-top: 16px; } #dpdr-break-code .tried-card--grounding { display: none; } #dpdr-break-code .tried-card--sound { grid-column: 1 / -1; } #dpdr-break-code .tried-card { gap: 9px; min-height: 57px; padding: 10px 11px; border-radius: 8px; } #dpdr-break-code .tried-card--sound { justify-content: center; min-height: 56px; } #dpdr-break-code .tried-card__label { font-size: 14px !important; line-height: 1.18 !important; } #dpdr-break-code .tried-card__icon { flex: 0 0 23px; width: 23px; height: 23px; font-size: 23px; } #dpdr-break-code .tried-card--mindfulness .tried-card__icon { font-size: 21px; } #dpdr-break-code .tried-card--sound .tried-card__icon { font-size: 24px; } /* ----------------------------------------------------- STORY ----------------------------------------------------- */ #dpdr-break-code .break-ornament--story { display: none !important; } #dpdr-break-code .story-bridge { gap: 14px; margin-top: 34px; } #dpdr-break-code .story-bridge__copy { width: 100%; max-width: 430px; padding-left: 17px; padding-right: 17px; font-size: 17px !important; line-height: 1.42 !important; font-weight: 400 !important; text-align: left; text-wrap: normal; } #dpdr-break-code .story-line--answer, #dpdr-break-code .story-line--research { font-weight: 400 !important; } #dpdr-break-code .story-bridge__copy--discovery .story-copy-mobile .story-line--answer { font-weight: 600 !important; } #dpdr-break-code .story-bridge__diamond { width: 5px; height: 5px; } #dpdr-break-code .story-copy-desktop { display: none; } #dpdr-break-code .story-copy-mobile { display: inline; } #dpdr-break-code .story-copy-mobile .story-line { display: inline; } #dpdr-break-code .story-copy-mobile .story-line::after { content: " "; } #dpdr-break-code .story-copy-mobile .story-line--sources, #dpdr-break-code .story-copy-mobile .story-line--research { display: inline; margin-top: 0; } #dpdr-break-code .story-copy-mobile .story-line--sources::after, #dpdr-break-code .story-copy-mobile .story-line--research::after { content: " "; } /* ----------------------------------------------------- REVEAL ----------------------------------------------------- */ #dpdr-break-code .loop-reveal { width: 100%; margin-top: 22px; padding: 34px 16px 38px; border-radius: 14px; } #dpdr-break-code .loop-reveal__icon { width: 37px; height: 37px; } #dpdr-break-code .loop-reveal__pretitle { max-width: 360px; margin-top: 18px !important; font-size: 16.5px !important; line-height: 1.42 !important; font-weight: 400 !important; color: var(--body-serif) !important; text-wrap: normal !important; } #dpdr-break-code .loop-reveal__title { max-width: 350px; margin-top: 8px !important; font-size: clamp( 23px, 6.4vw, 26px ) !important; line-height: 1.07 !important; } #dpdr-break-code .loop-reveal__copy { max-width: 360px; margin-top: 17px !important; font-size: 16.5px !important; line-height: 1.42 !important; font-weight: 400 !important; color: var(--body-serif) !important; text-wrap: normal !important; } } /* ========================================================= HERO-MATCHED MOBILE SIDE GUTTERS Hero uses 20px at <=390px. Root already contributes 12px, so these blocks add 8px. ========================================================= */ @media (max-width: 390px) { #dpdr-break-code .break-title, #dpdr-break-code .break-subtitle, #dpdr-break-code .tried-heading, #dpdr-break-code .story-bridge__copy { padding-left: 8px; padding-right: 8px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media ( max-width: 350px ) { #dpdr-break-code .loop-reveal__pretitle, #dpdr-break-code .loop-reveal__copy { font-size: 16px !important; } .dpdr-break-stage { padding: 46px 0 46px; } #dpdr-break-code { width: calc( 100% - 18px ); } #dpdr-break-code .break-title { font-size: 26.35px !important; } #dpdr-break-code .break-subtitle { font-size: 16.5px !important; } #dpdr-break-code .tried-heading { font-size: 21px !important; } #dpdr-break-code .tried-card { min-height: 54px; padding: 9px 9px; } #dpdr-break-code .tried-card__label { font-size: 13.25px !important; } #dpdr-break-code .tried-card__icon { flex-basis: 21px; width: 21px; height: 21px; font-size: 21px; } #dpdr-break-code .story-bridge { margin-top: 30px; } #dpdr-break-code .story-bridge__copy { font-size: 16.5px !important; } #dpdr-break-code .loop-reveal { margin-top: 20px; padding: 31px 14px 35px; } #dpdr-break-code .loop-reveal__title { font-size: 23px !important; } } /* ========================================================= 03 — ONCE YOU UNDERSTAND / STUCK PATTERN ========================================================= */ /* ========================================================= SQUARESPACE SAFE / ROOT ========================================================= */ #stuck-pattern-code, #stuck-pattern-code *, #stuck-pattern-code *::before, #stuck-pattern-code *::after { box-sizing: border-box; } .stuck-pattern-stage { position: relative; left: 50%; width: 100vw; max-width: 100vw; transform: translateX(-50%); margin: 0 !important; padding: 0 0 104px; overflow: hidden; background: #fafaf8; } #stuck-pattern-code { --ink: #142b45; --body: #667889; --body-serif: #40586b; --body-dark: #2a3d51; --bronze: #cc744c; --bronze-soft: #d17d59; --card: #ffffff; --card-border: #e5e5e1; --icon-bg: #faf7f3; --diagram-bg: #0c4368; --diagram-line: rgba(196, 128, 79, .72); width: min( 1150px, calc(100% - 40px) ); max-width: 1150px; margin: 0 auto; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-wrap: pretty; } #stuck-pattern-code h1, #stuck-pattern-code h2, #stuck-pattern-code h3, #stuck-pattern-code p { margin-top: 0; } /* ========================================================= HEADER ========================================================= */ #stuck-pattern-code .sp-header { width: 100%; max-width: 960px; margin: 0 auto; text-align: center; } /* MAIN TITLE */ #stuck-pattern-code .sp-title { max-width: 980px; margin: 0 auto; font-family: "EB Garamond", Georgia, serif; font-size: clamp( 56px, 6vw, 65px ); line-height: 0.98; letter-spacing: -0.018em; font-weight: 500; color: var(--ink); text-align: center; text-wrap: balance; } #stuck-pattern-code .sp-title__desktop, #stuck-pattern-code .sp-title__mobile { display: block; } #stuck-pattern-code .sp-title__mobile { display: none; } #stuck-pattern-code .sp-title__line { display: block; } #stuck-pattern-code .sp-title__desktop .sp-title__line { white-space: nowrap; } #stuck-pattern-code .sp-title em { color: var(--bronze); font-style: italic; font-weight: inherit; } /* ========================================================= INTRO PROSE SYSTEM UI BODY TYPE ========================================================= */ #stuck-pattern-code .sp-intro { max-width: 760px; margin: 26px auto 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.48; font-weight: 500; letter-spacing: -0.01em; color: var(--body-serif); text-align: center; text-wrap: balance; } #stuck-pattern-code .sp-intro__paragraph { margin: 0; } #stuck-pattern-code .sp-intro__paragraph + .sp-intro__paragraph { margin-top: 9px; } /* ========================================================= "SO YOU FEEL THE NEED TO" ========================================================= */ #stuck-pattern-code .sp-need-heading { margin: 34px 0 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 28px; line-height: 1.1; font-weight: 400; color: var(--ink); text-align: center; } /* ========================================================= REACTION CARDS ========================================================= */ #stuck-pattern-code .sp-reactions { display: grid; grid-template-columns: repeat( 4, minmax(0, 1fr) ); gap: 16px; width: min( 1040px, calc(100% - 48px) ); margin: 26px auto 0; } #stuck-pattern-code .sp-reaction { min-width: 0; min-height: 196px; padding: 24px 20px 25px; display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 2px 6px rgba(20, 43, 69, .025); text-align: center; } /* ICON */ #stuck-pattern-code .sp-reaction__icon { width: 62px; height: 62px; flex: 0 0 62px; margin: 0 auto 19px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--icon-bg); color: var(--bronze); font-size: 29px; line-height: 1; } /* CARD TITLE */ #stuck-pattern-code .sp-reaction__title { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: .14em; color: var(--ink); text-transform: uppercase; } /* CARD COPY */ #stuck-pattern-code .sp-reaction__copy { max-width: 190px; margin: 15px auto 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.35; font-weight: 400; color: var(--body); } /* ========================================================= PROBLEM PIVOT ========================================================= */ #stuck-pattern-code .sp-problem { margin-top: 42px; text-align: center; } /* DIAMOND DIVIDER */ #stuck-pattern-code .sp-divider { display: grid; grid-template-columns: 76px 7px 76px; gap: 14px; align-items: center; width: fit-content; margin: 0 auto 24px; } #stuck-pattern-code .sp-divider__line { display: block; width: 76px; height: 1px; } #stuck-pattern-code .sp-divider__line--left { background: linear-gradient( 90deg, rgba(209,125,89,0), rgba(209,125,89,.72) ); } #stuck-pattern-code .sp-divider__line--right { background: linear-gradient( 90deg, rgba(209,125,89,.72), rgba(209,125,89,0) ); } #stuck-pattern-code .sp-divider__diamond { width: 7px; height: 7px; background: var(--bronze-soft); transform: rotate(45deg); } /* TITLE */ #stuck-pattern-code .sp-problem__title { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 28px; line-height: 1.1; letter-spacing: -0.012em; font-weight: 500; color: var(--ink); text-align: center; } /* ========================================================= PROBLEM PROSE SYSTEM UI BODY TYPE ========================================================= */ #stuck-pattern-code .sp-problem__copy { max-width: 760px; margin: 17px auto 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.48; font-weight: 500; letter-spacing: -0.01em; color: var(--body-serif); text-align: center; text-wrap: balance; } /* ========================================================= CONSEQUENCES COMPACT WRAPPER GRID ========================================================= */ #stuck-pattern-code .sp-consequences { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 12px; width: min( 820px, calc(100% - 48px) ); margin: 28px auto 0; } #stuck-pattern-code .sp-consequence { display: flex; align-items: center; min-height: 76px; margin: 0; padding: 17px 20px; background: rgba(255,255,255,.72); border: 1px solid var(--card-border); border-radius: 9px; box-shadow: 0 2px 5px rgba(20,43,69,.018); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: var(--body); text-align: left; } #stuck-pattern-code .sp-consequence__text { display: block; width: 100%; } #stuck-pattern-code .sp-consequence strong { color: var(--ink); font-weight: 600; } /* Desktop only: slightly quieter wrapper treatment. Mobile intentionally retains the current stronger card contrast. */ @media (min-width: 721px) { #stuck-pattern-code .sp-consequence { background: rgba(255,255,255,.64); border-color: #e9e8e4; box-shadow: 0 1px 3px rgba(20,43,69,.010); } } /* ========================================================= STUCK PATTERN REVEAL HEADING ========================================================= */ /* Desktop-only precision frame. Hidden everywhere by default, then explicitly enabled inside the desktop media query. */ #stuck-pattern-code .sp-frame-top-svg { display: none; } #stuck-pattern-code .sp-pattern-reveal-heading { display: grid; grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr); align-items: center; gap: 18px; width: min( 880px, calc(100% - 48px) ); margin: 46px auto 0; } #stuck-pattern-code .sp-pattern-reveal-heading__line { display: block; width: 100%; height: 1px; } #stuck-pattern-code .sp-pattern-reveal-heading__line--left { background: linear-gradient( 90deg, rgba(209,125,89,0), rgba(209,125,89,.62) ); } #stuck-pattern-code .sp-pattern-reveal-heading__line--right { background: linear-gradient( 90deg, rgba(209,125,89,.62), rgba(209,125,89,0) ); } #stuck-pattern-code .sp-pattern-reveal-heading__text { margin: 0; font-family: "EB Garamond", Georgia, serif; font-size: clamp( 29px, 2.6vw, 32px ); line-height: 1.05; letter-spacing: -0.012em; font-weight: 500; color: var(--bronze); white-space: nowrap; } /* The mobile title is split into two spans. On desktop they remain inline and inherit the existing one-line treatment. */ #stuck-pattern-code .sp-pattern-reveal-heading__lead, #stuck-pattern-code .sp-pattern-reveal-heading__accent { display: inline; color: inherit; font-size: inherit; line-height: inherit; font-style: normal; font-weight: inherit; } /* ========================================================= STUCK PATTERN DIAGRAM WORKING VERSION — REFINEMENT LATER ========================================================= */ #stuck-pattern-code .sp-diagram { width: min( 1080px, calc(100% - 20px) ); margin: 18px auto 0; padding: 36px 46px 34px; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); overflow: visible; } /* MAIN FLOW */ #stuck-pattern-code .sp-diagram__flow { display: grid; grid-template-columns: 1fr 36px 1fr 36px 2.35fr 36px 1.2fr; align-items: center; gap: 6px; } /* FLOW BLOCK */ #stuck-pattern-code .sp-diagram__node { min-width: 0; text-align: center; } #stuck-pattern-code .sp-diagram__node-title { margin: 0; font-size: 18px; line-height: 1.1; font-weight: 500; letter-spacing: .13em; color: var(--ink); text-transform: uppercase; } #stuck-pattern-code .sp-diagram__node-copy { margin: 9px auto 0; max-width: 130px; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--body); } /* FLOW ARROW */ #stuck-pattern-code .sp-diagram__arrow { color: rgba(204,116,76,.80); line-height: 1; text-align: center; } #stuck-pattern-code .sp-diagram__arrow svg { display: block; width: 28px; height: 12px; overflow: visible; } #stuck-pattern-code .sp-diagram__arrow path { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* THREAT BOX */ #stuck-pattern-code .sp-threat { padding: 22px 24px 25px; background: transparent; border: 1px solid rgba(204,116,76,.40); border-radius: 14px; } #stuck-pattern-code .sp-threat__title { margin: 0 0 23px; font-size: 17px; line-height: 1; font-weight: 500; letter-spacing: .16em; color: var(--bronze); text-align: center; text-transform: uppercase; } #stuck-pattern-code .sp-threat__items { display: grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap: 17px; } #stuck-pattern-code .sp-threat__item { text-align: center; } #stuck-pattern-code .sp-threat__icon { display: flex; align-items: center; justify-content: center; min-height: 42px; color: var(--bronze); font-size: 36px; line-height: 1; } #stuck-pattern-code .sp-threat__copy { margin: 11px auto 0; font-size: 13px; line-height: 1.35; color: var(--body); } /* BOTTOM LOOP */ #stuck-pattern-code .sp-diagram__loop { position: relative; margin: 24px 40px 0; height: 70px; } #stuck-pattern-code .sp-diagram__loop-line { position: absolute; left: 0; right: 0; bottom: 12px; height: 46px; border-left: 1px solid rgba(204,116,76,.42); border-right: 1px solid rgba(204,116,76,.42); border-bottom: 1px solid rgba(204,116,76,.42); border-radius: 0 0 45px 45px; } #stuck-pattern-code .sp-diagram__loop-label { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); margin: 0; padding: 0 20px; background: #fafaf8; font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .18em; color: var(--bronze); text-transform: uppercase; white-space: nowrap; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) and (min-width: 721px) { .stuck-pattern-stage { padding: 0 0 88px; } #stuck-pattern-code .sp-title { max-width: 900px; font-size: clamp( 46px, 5.5vw, 54px ); } #stuck-pattern-code .sp-intro { max-width: 700px; font-size: 18px; line-height: 1.48; } #stuck-pattern-code .sp-reactions { width: min( 900px, calc(100% - 32px) ); gap: 12px; } #stuck-pattern-code .sp-reaction { min-height: 190px; padding-left: 16px; padding-right: 16px; } #stuck-pattern-code .sp-problem__copy { max-width: 700px; font-size: 18px; line-height: 1.48; } #stuck-pattern-code .sp-diagram { padding-left: 28px; padding-right: 28px; } #stuck-pattern-code .sp-diagram__flow { grid-template-columns: .9fr 28px .9fr 28px 2.2fr 28px 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 720px) { #stuck-pattern-code .sp-divider { display: none; } .stuck-pattern-stage { padding: 0 0 62px; } #stuck-pattern-code { width: calc( 100% - 24px ); } /* HEADER */ #stuck-pattern-code .sp-title { max-width: 430px; margin-left: auto; margin-right: auto; padding-left: 17px; padding-right: 17px; font-size: clamp( 27.2px, 7.38vw, 30.74px ); line-height: 1.03; letter-spacing: -0.018em; text-align: left; text-wrap: normal; } #stuck-pattern-code .sp-title__desktop { display: none; } #stuck-pattern-code .sp-title__mobile { display: block; } #stuck-pattern-code .sp-title__line { display: inline; white-space: normal; } #stuck-pattern-code .sp-title__line::after { content: " "; } /* INTRO SERIF PROSE */ #stuck-pattern-code .sp-intro { max-width: 430px; margin: 20px auto 0; padding: 0 17px; font-size: 17px; line-height: 1.42; font-weight: 400; letter-spacing: -0.004em; text-align: left; text-wrap: normal; } #stuck-pattern-code .sp-intro__paragraph + .sp-intro__paragraph { margin-top: 10px; } /* NEED */ #stuck-pattern-code .sp-need-heading { max-width: 430px; margin: 28px auto 0; padding: 0 17px; font-size: 22px; text-align: left; } /* CARDS */ #stuck-pattern-code .sp-reactions { grid-template-columns: repeat( 2, minmax(0,1fr) ); width: 100%; gap: 10px; margin-top: 18px; } #stuck-pattern-code .sp-reaction { min-height: 168px; padding: 20px 11px 21px; border-radius: 9px; } #stuck-pattern-code .sp-reaction__icon { width: 52px; height: 52px; flex-basis: 52px; margin-bottom: 16px; font-size: 24px; } #stuck-pattern-code .sp-reaction__title { font-size: 13px; letter-spacing: .13em; } #stuck-pattern-code .sp-reaction__copy { max-width: 150px; margin-top: 12px; font-size: 14px; line-height: 1.32; } /* PROBLEM */ #stuck-pattern-code .sp-problem { max-width: 430px; margin: 40px auto 0; padding: 0 17px; text-align: left; } #stuck-pattern-code .sp-divider { grid-template-columns: 48px 6px 48px; gap: 10px; margin: 0 0 21px; } #stuck-pattern-code .sp-divider__line { width: 48px; } #stuck-pattern-code .sp-divider__diamond { width: 6px; height: 6px; } #stuck-pattern-code .sp-problem__title { font-size: 22px; line-height: 1.08; text-align: left; } /* PROBLEM SERIF PROSE */ #stuck-pattern-code .sp-problem__copy { max-width: 390px; margin: 15px 0 0; font-size: 17px; line-height: 1.42; font-weight: 400; letter-spacing: -0.004em; text-align: left; /* Override the root text-wrap: pretty. Use ordinary greedy browser wrapping so each line fills the available width before breaking. */ text-wrap: wrap; text-wrap-style: auto; overflow-wrap: normal; word-break: normal; } /* CONSEQUENCES */ #stuck-pattern-code .sp-consequences { grid-template-columns: 1fr; width: 100%; margin-top: 22px; gap: 9px; } #stuck-pattern-code .sp-consequence { min-height: 0; padding: 14px 16px; border-radius: 8px; font-size: 15px; line-height: 1.4; letter-spacing: 0; text-align: left; } #stuck-pattern-code .sp-consequence__text { width: 100%; } /* STUCK PATTERN REVEAL HEADING Purpose-built mobile composition: left-aligned two-line title with no side rules. */ #stuck-pattern-code .sp-pattern-reveal-heading { position: relative; display: block; width: 100%; max-width: 430px; height: auto; margin: 52px auto 0; padding: 0 17px; text-align: left; } /* Desktop precision frame must never participate in mobile. */ #stuck-pattern-code .sp-frame-top-svg { display: none !important; } /* The desktop side rules are intentionally removed on mobile. */ #stuck-pattern-code .sp-pattern-reveal-heading__line { display: none !important; } #stuck-pattern-code .sp-pattern-reveal-heading__text { position: static; width: auto; margin: 0; padding: 0; font-family: "EB Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.018em; text-align: left; white-space: normal; } #stuck-pattern-code .sp-pattern-reveal-heading__lead { display: block; color: var(--ink); font-size: clamp( 24px, 6.5vw, 26px ); line-height: .96; font-style: normal; } #stuck-pattern-code .sp-pattern-reveal-heading__accent { display: block; margin-top: 0px; color: var(--bronze); font-size: clamp( 22.5px, 6vw, 24.5px ); line-height: .96; font-style: italic; } /* DIAGRAM */ #stuck-pattern-code .sp-diagram { width: 100%; margin-top: 36px; padding: 25px 18px 27px; border-radius: 13px; } #stuck-pattern-code .sp-diagram__flow { display: flex; flex-direction: column; gap: 18px; } #stuck-pattern-code .sp-diagram__arrow { transform: rotate(90deg); font-size: 25px; } #stuck-pattern-code .sp-diagram__node-copy { max-width: 220px; } #stuck-pattern-code .sp-threat { width: 100%; padding: 22px 15px 23px; } #stuck-pattern-code .sp-threat__items { gap: 9px; } #stuck-pattern-code .sp-threat__icon { font-size: 29px; } #stuck-pattern-code .sp-threat__copy { font-size: 12px; } #stuck-pattern-code .sp-diagram__loop { display: none; } } /* ========================================================= HERO-MATCHED MOBILE SIDE GUTTERS Hero total inset = 20px at <=390px. Root already contributes 12px, so text blocks add 8px. ========================================================= */ @media (max-width: 390px) { #stuck-pattern-code .sp-title, #stuck-pattern-code .sp-intro, #stuck-pattern-code .sp-need-heading, #stuck-pattern-code .sp-problem, #stuck-pattern-code .sp-pattern-reveal-heading, #stuck-pattern-code .sp-resolution { padding-left: 8px; padding-right: 8px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 370px) { #stuck-pattern-code .sp-need-heading { font-size: 21px; } #stuck-pattern-code .sp-title { font-size: 26.35px; } #stuck-pattern-code .sp-intro { font-size: 16.5px; } #stuck-pattern-code .sp-reaction { min-height: 162px; padding-left: 8px; padding-right: 8px; } #stuck-pattern-code .sp-reaction__copy { font-size: 13px; } #stuck-pattern-code .sp-problem__title { font-size: 21px; } #stuck-pattern-code .sp-problem__copy { font-size: 16.5px; } #stuck-pattern-code .sp-pattern-reveal-heading__lead { font-size: 23.5px; } #stuck-pattern-code .sp-pattern-reveal-heading__accent { font-size: 22px; } } /* ========================================================= MOBILE DIAGRAM — adapted from the supplied 1024×1365 vertical DPDR-loop composition. The source was originally framed at 552px wide. Here it scales to the available mobile width, while its text is modestly enlarged so the reduced viewport does not make the supporting copy too small. ========================================================= */ #stuck-pattern-code .sp-mobile-diagram { display: none; } @media (max-width: 720px) { #stuck-pattern-code .sp-diagram { display: none; } #stuck-pattern-code .sp-mobile-diagram { display: block; width: 100%; margin-top: 2px; overflow: hidden; border-radius: 0; background: #fafaf8; } #stuck-pattern-code .sp-mobile-diagram svg { display: block; width: 100%; height: auto; } #stuck-pattern-code .rr-mv-label-title { fill: #142b45; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 600; letter-spacing: 0; } #stuck-pattern-code .rr-mv-label-body { fill: #667889; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 400; letter-spacing: 0; } #stuck-pattern-code .rr-mv-panel-title { fill: #cc744c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 34px; font-weight: 600; letter-spacing: 0.16em; } #stuck-pattern-code .rr-mv-step-number { fill: #d17d59; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 27px; font-weight: 400; } #stuck-pattern-code .rr-mv-step-title { fill: #142b45; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 61px; font-weight: 500; letter-spacing: 0; } #stuck-pattern-code .rr-mv-step-sub { fill: #667889; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; } #stuck-pattern-code .rr-mv-icon { fill: none; stroke: #cc744c; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #stuck-pattern-code .rr-mv-arrow { fill: none; stroke: rgba(204,116,76,.58); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #stuck-pattern-code .rr-mv-arrow-soft { fill: none; stroke: rgba(204,116,76,.48); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #stuck-pattern-code .rr-mv-divider { fill: none; stroke: rgba(204,116,76,.28); stroke-width: 1.1; stroke-linecap: round; } } @media (max-width: 390px) { #stuck-pattern-code .rr-mv-label-title { font-size: 38px; } #stuck-pattern-code .rr-mv-label-body { font-size: 28px; } #stuck-pattern-code .rr-mv-step-sub { font-size: 27px; } } /* ========================================================= DESKTOP DIAGRAM — PRECISE BROKEN FRAME SVG paths establish each turn before the vertical tips fade. Mobile heading + mobile diagram remain unchanged. ========================================================= */ @media (min-width: 721px) { /* ------------------------------------------------------- SHARED FULL-WIDTH GEOMETRY The diagram is 1080px at full desktop width with 46px horizontal padding. With the unified desktop flow below, the first and final node centers sit at approximately x=118 and x=953 at the full 1080px diagram width. ------------------------------------------------------- */ #stuck-pattern-code .sp-diagram { --sp-diagram-pad-x: 46px; } /* ------------------------------------------------------- TOP BROKEN FRAME ------------------------------------------------------- */ #stuck-pattern-code .sp-pattern-reveal-heading { position: relative; display: block; width: min( 1080px, calc(100% - 20px) ); height: 90px; margin: 46px auto 0; padding: 0; } /* Existing spans remain in the HTML for the mobile heading. */ #stuck-pattern-code .sp-pattern-reveal-heading__line { display: none; } #stuck-pattern-code .sp-frame-top-svg { position: absolute; inset: 0 0 auto 0; display: block; width: 100%; height: 90px; overflow: visible; pointer-events: none; } #stuck-pattern-code .sp-pattern-reveal-heading__text { position: relative; z-index: 2; width: fit-content; margin: 0 auto; padding: 0 24px; background: #fafaf8; font-family: "EB Garamond", Georgia, serif; font-size: clamp( 29px, 2.6vw, 32px ); line-height: 1.05; letter-spacing: -0.012em; font-weight: 500; color: var(--bronze); white-space: nowrap; } /* ------------------------------------------------------- DIAGRAM POSITION ------------------------------------------------------- */ #stuck-pattern-code .sp-diagram { margin: -12px auto 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* ------------------------------------------------------- BOTTOM RETURN FRAME Make the loop wrapper span the complete 1080px diagram, including its horizontal padding. This makes the two outer tips line up with STRESS and MORE STRESS rather than with the padded content box. ------------------------------------------------------- */ #stuck-pattern-code .sp-diagram__loop { position: relative; width: calc( 100% + (2 * var(--sp-diagram-pad-x)) ); height: 90px; margin: 18px calc(-1 * var(--sp-diagram-pad-x)) 0; } #stuck-pattern-code .sp-diagram__loop-line { display: none; } #stuck-pattern-code .sp-diagram__loop-svg { position: absolute; inset: 0 0 auto 0; display: block; width: 100%; height: 90px; overflow: visible; pointer-events: none; } /* The label is centered on the exact midpoint of the two inner SVG line endings (x=430 and x=650 around x=540). */ #stuck-pattern-code .sp-diagram__loop-label { position: absolute; left: 50%; top: 70px; bottom: auto; transform: translate( -50%, -50% ); margin: 0; padding: 0 18px; background: #fafaf8; font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .18em; color: var(--bronze); text-transform: uppercase; white-space: nowrap; } } /* ========================================================= LARGE DESKTOP FLOW — TRUE VISIBLE-EDGE SPACING The three connector gaps are now measured from the actual supporting-prose block (or threat-response border), not from oversized invisible wrappers. Each prose node collapses to the width of its longest visible supporting-copy line. Its title is taken out of horizontal sizing and centered above that prose block. Therefore: STRESS prose edge ↔ DPDR prose edge DPDR prose edge ↔ THREAT RESPONSE border THREAT RESPONSE border ↔ MORE STRESS prose edge all use the exact same connector gutter. ========================================================= */ @media (min-width: 1001px) { /* DESKTOP VERTICAL RHYTHM */ #stuck-pattern-code .sp-pattern-reveal-heading { margin-top: 70px; } #stuck-pattern-code .sp-resolution { margin-top: 28px; } #stuck-pattern-code .sp-diagram__flow { --sp-visible-gap: 80px; --sp-flow-threat-width: 410px; display: grid; grid-template-columns: max-content var(--sp-visible-gap) max-content var(--sp-visible-gap) var(--sp-flow-threat-width) var(--sp-visible-gap) max-content; align-items: center; justify-content: center; column-gap: 0; row-gap: 0; width: 100%; margin: 0 auto; } /* ------------------------------------------------------- PROSE NODES Width is controlled by the supporting prose only. Titles are absolutely centered so a wider title such as "MORE STRESS" does not enlarge the connector distance. ------------------------------------------------------- */ #stuck-pattern-code .sp-diagram__node { position: relative; display: block; width: max-content; min-width: 0; margin: 0; padding-top: 31px; overflow: visible; text-align: center; } #stuck-pattern-code .sp-diagram__node-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max-content; margin: 0; white-space: nowrap; } #stuck-pattern-code .sp-diagram__node-copy { display: block; width: max-content; max-width: none; margin: 9px 0 0; white-space: nowrap; } /* ------------------------------------------------------- THREAT RESPONSE Its visible border is the exact edge used by the same connector gutter on both sides. ------------------------------------------------------- */ #stuck-pattern-code .sp-threat { width: var(--sp-flow-threat-width); margin: 0; padding: 19px 26px 22px; border-color: rgba(204,116,76,.34); border-radius: 12px; } #stuck-pattern-code .sp-threat__title { margin-bottom: 19px; } #stuck-pattern-code .sp-threat__items { gap: 16px; } #stuck-pattern-code .sp-threat__icon { min-height: 39px; font-size: 34px; } #stuck-pattern-code .sp-threat__copy { margin-top: 9px; } /* ------------------------------------------------------- CONNECTOR GUTTERS Every arrow occupies the exact same shared visible gap and sits mathematically in its center. ------------------------------------------------------- */ #stuck-pattern-code .sp-diagram__arrow { display: flex; width: var(--sp-visible-gap); height: 100%; margin: 0; padding: 0; align-items: center; justify-content: center; color: rgba(204,116,76,.80); text-align: center; } } /* Tablet uses narrower diagram padding. Keep the full-width bottom SVG aligned with the outside edge of that diagram. */ @media (max-width: 1000px) and (min-width: 721px) { #stuck-pattern-code .sp-diagram { --sp-diagram-pad-x: 28px; } } /* ========================================================= POST-DIAGRAM RESOLUTION Quiet editorial landing after the Stuck Pattern diagram. ========================================================= */ #stuck-pattern-code .sp-resolution { width: min( 920px, calc(100% - 48px) ); margin: 58px auto 0; text-align: center; } /* PRIMARY IMPLICATION */ #stuck-pattern-code .sp-resolution__claim { max-width: 780px; margin: 0 auto; font-family: "EB Garamond", Georgia, serif; font-size: clamp( 36px, 3.5vw, 42px ); line-height: 1.08; letter-spacing: -0.016em; font-weight: 500; color: var(--ink); text-wrap: balance; } #stuck-pattern-code .sp-resolution__claim em { color: var(--bronze); font-style: italic; font-weight: inherit; } /* SUPPORTING EXPLANATION */ #stuck-pattern-code .sp-resolution__support { max-width: 860px; margin: 24px auto 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.48; font-weight: 500; letter-spacing: -0.01em; color: var(--body-serif); text-wrap: wrap; } /* ROADMAP TRANSITION */ #stuck-pattern-code .sp-resolution__roadmap { max-width: 880px; margin: 30px auto 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.48; font-weight: 500; letter-spacing: -0.01em; color: var(--body-serif); text-wrap: wrap; } #stuck-pattern-code .sp-resolution__roadmap strong { font-weight: 600; color: inherit; } #stuck-pattern-code .sp-resolution-copy-desktop { display: inline; } #stuck-pattern-code .sp-resolution-copy-mobile { display: none; } /* ========================================================= POST-DIAGRAM RESOLUTION — TABLET ========================================================= */ @media (max-width: 1000px) and (min-width: 721px) { #stuck-pattern-code .sp-resolution { margin-top: 52px; } #stuck-pattern-code .sp-resolution__claim { font-size: clamp( 33px, 4vw, 39px ); } #stuck-pattern-code .sp-resolution__support, #stuck-pattern-code .sp-resolution__roadmap { font-size: 18px; line-height: 1.48; } } /* ========================================================= POST-DIAGRAM RESOLUTION — MOBILE ========================================================= */ @media (max-width: 720px) { #stuck-pattern-code .sp-resolution { width: 100%; max-width: 430px; margin: 2px auto 0; padding: 0 17px; text-align: left; } #stuck-pattern-code .sp-resolution__claim { max-width: 390px; margin-left: 0; margin-right: 0; font-size: clamp( 21px, 5.65vw, 23px ); line-height: 1.1; letter-spacing: -0.014em; text-align: left; text-wrap: normal; } #stuck-pattern-code .sp-resolution__support { max-width: 390px; margin: 18px 0 0; font-size: 17px; line-height: 1.42; font-weight: 400; letter-spacing: -0.004em; text-align: left; text-wrap: normal; } #stuck-pattern-code .sp-resolution__roadmap { max-width: 390px; margin: 22px 0 0; font-size: 17px; line-height: 1.42; font-weight: 400; letter-spacing: -0.004em; text-align: left; text-wrap: normal; } #stuck-pattern-code .sp-resolution__roadmap strong { display: inline; margin-bottom: 0; font-weight: 600; } #stuck-pattern-code .sp-resolution-copy-desktop { display: none; } #stuck-pattern-code .sp-resolution-copy-mobile { display: inline; } #stuck-pattern-code .sp-resolution-mobile-line { display: inline; white-space: normal; } #stuck-pattern-code .sp-resolution-mobile-line--gap { margin-top: 0; } } /* ========================================================= POST-DIAGRAM RESOLUTION — VERY SMALL MOBILE ========================================================= */ @media (max-width: 370px) { #stuck-pattern-code .sp-resolution { margin-top: 2px; } #stuck-pattern-code .sp-resolution__claim { font-size: 22px; } #stuck-pattern-code .sp-resolution__support, #stuck-pattern-code .sp-resolution__roadmap { font-size: 16.5px; } } /* ========================================================= 04 — OFFER / WHAT’S INCLUDED ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .rr-offer { --rr-bg: #faf7f1; --rr-ink: #15212b; --rr-ink-soft: #58636c; --rr-clay: #cc744c; position: relative; padding: clamp(54px, 6vw, 90px) 20px; box-sizing: border-box; color: var(--rr-ink); background: radial-gradient( circle at 80% 5%, rgba(200, 203, 184, 0.055), transparent 32% ), linear-gradient( 180deg, #faf7f1 0%, #f6f1e9 100% ); } .rr-offer, .rr-offer *, .rr-offer *::before, .rr-offer *::after { box-sizing: border-box; } /* ========================================================= INVISIBLE LAYOUT WRAPPER ========================================================= */ .rr-offer-card { width: min(1040px, 100%); margin: 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .rr-offer-body { padding: 0; background: transparent; } /* ========================================================= INTRO ========================================================= */ .rr-intro { width: min(760px, 100%); margin: 0 auto; text-align: center; } .rr-title { margin: 0; font-family: "EB Garamond", Georgia, serif; font-size: clamp(54px, 6.2vw, 88px); line-height: 0.91; letter-spacing: -0.042em; font-weight: 500; color: var(--rr-ink); } .rr-title-dot { color: var(--rr-clay); } .rr-subtitle { margin: 16px 0 0; font-family: "Cormorant Garamond", "Iowan Old Style", Baskerville, Georgia, serif; font-size: clamp(25px, 2.8vw, 36px); line-height: 1.12; font-weight: 500; color: #40586b; } .rr-subtitle em { color: var(--rr-clay); font-weight: 500; } /* ========================================================= THREE STAGES ========================================================= */ .rr-stages { width: min(900px, 100%); list-style: none; padding: 0; margin: clamp(52px, 5.5vw, 68px) auto clamp(60px, 6vw, 78px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(58px, 6.5vw, 84px); } .rr-stage { position: relative; text-align: center; } /* --------------------------------------------------------- CONNECTORS --------------------------------------------------------- */ .rr-stage:not(:last-child)::after { content: ""; position: absolute; top: 60px; left: calc(100% + 8px); width: clamp(54px, 5.5vw, 76px); height: 1px; background: linear-gradient( 90deg, rgba(21, 33, 43, 0.06), rgba(21, 33, 43, 0.22) 55%, rgba(21, 33, 43, 0.31) ); } .rr-stage:not(:last-child)::before { content: ""; position: absolute; top: 56px; left: calc( 100% + 8px + clamp(54px, 5.5vw, 76px) - 7px ); width: 8px; height: 8px; border-top: 1px solid rgba(21, 33, 43, 0.31); border-right: 1px solid rgba(21, 33, 43, 0.31); transform: rotate(45deg); } /* --------------------------------------------------------- STAGE CIRCLES --------------------------------------------------------- */ .rr-stage-node { width: clamp(106px, 10.5vw, 126px); aspect-ratio: 1; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--node-border); background: var(--node-bg); box-shadow: 0 18px 34px rgba(35, 38, 34, 0.10), 0 5px 10px rgba(35, 38, 34, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.38); transform: translateY(-3px); } .rr-stage:nth-child(1) { --node-bg: #c7b9a3; --node-border: rgba(104, 89, 70, 0.14); } .rr-stage:nth-child(2) { --node-bg: #d17d59; --node-border: rgba(137, 73, 45, 0.15); } .rr-stage:nth-child(3) { --node-bg: #949b82; --node-border: rgba(74, 83, 65, 0.15); } .rr-stage-number { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(44px, 4.1vw, 52px); line-height: 0.82; letter-spacing: -0.025em; font-weight: 300; color: #f8f4ec; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .rr-stage-title { margin: 0 0 11px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rr-ink); } .rr-stage-copy { max-width: 270px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.55; font-weight: 400; color: var(--rr-ink-soft); } /* ========================================================= UNIFIED LOWER PRODUCT CARD ========================================================= */ .rr-product-card { width: min(1040px, calc(100% - 24px)); margin: 0 auto; position: relative; background: transparent; filter: none; } /* ========================================================= RASTERIZED INCLUDED SECTION ========================================================= */ .rr-delivery-wrap { position: relative; width: 100%; margin: 0; isolation: isolate; } .rr-delivery-raster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow( 0 3px 8px rgba(63, 48, 35, 0.075) ) drop-shadow( 0 14px 28px rgba(63, 48, 35, 0.032) ); } /* Increased top room because the sculpted plateau now contains both an eyebrow and a proper headline. */ .rr-delivery-content { position: relative; z-index: 1; padding: 76px clamp(30px, 4.2vw, 48px) 0; } /* ========================================================= INSIDE THE ROADMAP — SELLING HEADER ========================================================= */ .rr-tools-section { width: 100%; margin: 0 auto; padding: 0 0 18px; } /* The whole title composition is pulled upward into the raised central plateau. */ .rr-tools-heading { width: 100%; margin: 0 auto 24px; text-align: center; transform: translateY(-32px); } /* --------------------------------------------------------- EYEBROW --------------------------------------------------------- */ .rr-tools-eyebrow { display: flex; align-items: center; justify-content: center; gap: 17px; margin: 0 0 15px; } .rr-tools-eyebrow::before, .rr-tools-eyebrow::after { content: ""; width: clamp(34px, 4.5vw, 52px); height: 1px; flex: 0 0 auto; } .rr-tools-eyebrow::before { background: linear-gradient( 90deg, rgba(199, 105, 69, 0) 0%, rgba(199, 105, 69, 0.24) 42%, rgba(199, 105, 69, 0.62) 100% ); } .rr-tools-eyebrow::after { background: linear-gradient( 90deg, rgba(199, 105, 69, 0.62) 0%, rgba(199, 105, 69, 0.24) 58%, rgba(199, 105, 69, 0) 100% ); } .rr-section-label { margin: 0; flex: 0 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: 0.205em; text-transform: uppercase; color: #bb6949; } /* --------------------------------------------------------- MAIN SELLING HEADLINE --------------------------------------------------------- */ .rr-tools-title { max-width: 590px; margin: 0 auto; font-family: "EB Garamond", Georgia, serif; font-size: clamp(41px, 4.3vw, 53px); line-height: 0.91; font-weight: 500; letter-spacing: -0.034em; color: #15212b; } /* ========================================================= TOOL GRID ========================================================= */ .rr-tools { width: 100%; margin-top: 2px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 12px; } .rr-tool { min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 13px; border: 1px solid rgba(103, 79, 58, 0.042); background: rgba(233, 223, 212, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(88, 66, 49, 0.015); } .rr-tool:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(88, 66, 49, 0.015); } .rr-tool-check { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient( 145deg, #ce7b58, #ba6545 ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 1px 3px rgba(117, 65, 43, 0.075); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1; font-weight: 600; color: #fffaf4; } .rr-tool-name { min-width: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.35; font-weight: 400; color: #48535a; white-space: nowrap; } /* ========================================================= PRODUCT MOCKUP ========================================================= */ .rr-preview { width: min(900px, 100%); margin: 18px auto 0; display: flex; justify-content: center; } /* --------------------------------------------------------- DESKTOP MOCKUP SCALE --------------------------------------------------------- The V6 tablet PNG itself is already correctly proportioned. On desktop we simply display the entire PNG larger inside the offer composition so the device, video thumbnail, cards, type, icons and controls all scale together proportionally. */ @media (min-width: 901px) { .rr-preview { width: min(1000px, calc(100vw - 40px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); margin: 10px 0 0; } .rr-preview-crop { width: 100%; } .rr-preview picture, .rr-preview img { width: 100%; } } .rr-preview-crop { width: 100%; overflow: hidden; } .rr-preview picture { width: 100%; display: block; } .rr-preview img { display: block; width: 100%; height: auto; margin: 0; filter: none; } /* --------------------------------------------------------- DESKTOP PNG SHADOW CORRECTION --------------------------------------------------------- */ @media (min-width: 761px) { .rr-preview img { -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 94%, rgba(0, 0, 0, 0.98) 95.5%, rgba(0, 0, 0, 0.82) 97%, rgba(0, 0, 0, 0.36) 98.5%, transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 94%, rgba(0, 0, 0, 0.98) 95.5%, rgba(0, 0, 0, 0.82) 97%, rgba(0, 0, 0, 0.36) 98.5%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .rr-preview-crop { margin-bottom: 8px; } } /* ========================================================= PURCHASE SECTION ========================================================= */ .rr-purchase { position: relative; width: 100%; margin: 0; padding: clamp(38px, 4.2vw, 46px) clamp(28px, 5vw, 64px) clamp(40px, 4.4vw, 48px); border-radius: 0 0 24px 24px; overflow: hidden; color: #fffaf2; background: radial-gradient( circle at 18% 0%, rgba(209, 125, 89, 0.045), transparent 34% ), linear-gradient( 135deg, #343632 0%, #292c29 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .rr-purchase-inner { width: min(720px, 100%); margin: 0 auto; text-align: center; } .rr-price { margin: 0; font-family: "EB Garamond", Georgia, serif; font-size: clamp(50px, 5vw, 62px); line-height: 0.84; letter-spacing: -0.035em; font-weight: 400; color: #fffaf2; } .rr-payment-label { margin: 8px 0 20px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; color: #e9e3d8; } .rr-cta { width: min(410px, 100%); min-height: 52px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 24px; border-radius: 999px; text-decoration: none; background: linear-gradient( 135deg, #d77b53, #ca6943 ); box-shadow: 0 10px 24px rgba(135, 72, 43, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.17); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12.5px; line-height: 1; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: #fffaf5; } .rr-cta-arrow { font-size: 19px; } /* ========================================================= CHECKOUT STEPS ========================================================= */ .rr-checkout-steps { list-style: none; padding: 0; margin: 23px auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12.5px; color: #d8d3c9; } .rr-checkout-steps li { display: flex; align-items: center; gap: 9px; } .rr-checkout-steps li:not(:last-child)::after { content: "→"; margin-left: 3px; color: #c5c1b7; opacity: 0.46; } .rr-step-dot { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 600; color: #f5f0e7; } .rr-stripe { margin: 20px 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color: #cbc7be; } .rr-stripe__item { display: inline-flex; align-items: center; gap: 6px; } .rr-stripe__shield { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rr-stripe strong { color: #f7f3eb; font-weight: 600; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .rr-stages { column-gap: 48px; } .rr-stage:not(:last-child)::after { width: 42px; left: calc(100% + 4px); } .rr-stage:not(:last-child)::before { left: calc( 100% + 4px + 42px - 7px ); } .rr-product-card { width: min(760px, calc(100% - 16px)); } .rr-delivery-content { padding: 68px 20px 0; } .rr-tools-heading { transform: translateY(-28px); margin-bottom: 24px; } .rr-tools-eyebrow { gap: 14px; } .rr-tools-title { font-size: clamp(35px, 4.8vw, 46px); } .rr-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 760px) { .rr-offer { padding: 40px 12px; } .rr-title { font-size: clamp(48px, 15vw, 66px); } .rr-subtitle { margin-top: 17px; font-size: clamp(23px, 7vw, 29px); } .rr-stages { width: min(390px, 100%); grid-template-columns: 1fr; row-gap: 70px; margin: 48px auto 58px; } .rr-stage:not(:last-child)::before { display: none; } .rr-stage:not(:last-child)::after { content: "↓"; top: auto; left: 50%; bottom: -49px; width: auto; height: auto; transform: translateX(-50%); background: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 23px; color: rgba(21, 33, 43, 0.34); } .rr-stage-node { width: 114px; } .rr-product-card { width: 100%; filter: none; } .rr-delivery-content { padding: 50px 8px 0; } .rr-tools-heading { transform: translateY(-22px); margin-bottom: 22px; } .rr-tools-eyebrow { gap: 9px; margin-bottom: 10px; } .rr-tools-eyebrow::before, .rr-tools-eyebrow::after { width: 26px; } .rr-section-label { font-size: 9.5px; letter-spacing: 0.14em; } .rr-tools-title { max-width: 340px; font-size: clamp(29px, 9vw, 36px); line-height: 1; } .rr-tools { grid-template-columns: 1fr; gap: 8px; margin-top: 0; } .rr-tool { min-height: 46px; } .rr-preview { width: 100%; margin-top: 16px; } .rr-preview-crop { margin-bottom: 0; } .rr-preview img { -webkit-mask-image: none; mask-image: none; } .rr-purchase { padding: 36px 18px 40px; border-radius: 0 0 20px 20px; } .rr-price { font-size: 54px; } .rr-payment-label { font-size: 22px; } .rr-cta { width: min(360px, 100%); min-height: 52px; padding: 13px 20px; font-size: 11.5px; } .rr-checkout-steps { max-width: 290px; flex-direction: column; align-items: stretch; gap: 11px; } .rr-checkout-steps li:not(:last-child)::after { display: none; } } /* ========================================================= FINAL MOBILE COMPOSITION OVERRIDES ========================================================= */ @media (max-width: 760px) { /* --------------------------------------------------------- 1. TIGHTER THREE-STAGE SYSTEM --------------------------------------------------------- */ .rr-stages { width: min(360px, 100%); row-gap: 46px; margin: 42px auto 42px; } .rr-stage-node { width: 96px; margin-bottom: 16px; } .rr-stage-title { margin-bottom: 8px; font-size: 12.5px; } .rr-stage-copy { max-width: 310px; font-size: 14px; line-height: 1.42; } .rr-stage:not(:last-child)::after { content: ""; display: block; position: absolute; top: auto; left: 50%; bottom: -28px; width: 1px; height: 20px; transform: translateX(-50%); background: linear-gradient( to bottom, rgba(21, 33, 43, 0.025) 0%, rgba(21, 33, 43, 0.11) 38%, rgba(21, 33, 43, 0.31) 100% ); } .rr-stage:not(:last-child)::before { content: ""; display: block; position: absolute; top: auto; left: 50%; bottom: -29px; width: 6px; height: 6px; border: 0; border-right: 1px solid rgba(21, 33, 43, 0.31); border-bottom: 1px solid rgba(21, 33, 43, 0.31); transform: translateX(-50%) rotate(45deg); } /* --------------------------------------------------------- 2. TIGHTER INSIDE-THE-ROADMAP HEADER --------------------------------------------------------- */ .rr-tools-heading { transform: translateY(-34px); margin-bottom: 8px; } .rr-tools-eyebrow { gap: 6px; margin-bottom: 11px; } .rr-tools-eyebrow::before, .rr-tools-eyebrow::after { width: 12px; } /* --------------------------------------------------------- 3. TWO TOOL CARDS PER ROW --------------------------------------------------------- */ .rr-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; margin-top: 0; } .rr-tool { min-width: 0; min-height: 40px; gap: 5px; padding: 4px 8px; border-radius: 10px; } .rr-tool-check { width: 16px; height: 16px; flex: 0 0 16px; font-size: 9px; } .rr-tool-name { min-width: 0; font-size: clamp(9px, 2.6vw, 10.5px); line-height: 1.1; letter-spacing: -0.012em; white-space: nowrap; overflow-wrap: normal; } /* --------------------------------------------------------- 4. MOCKUP --------------------------------------------------------- */ .rr-tools-section { padding-bottom: 8px; } .rr-preview { width: calc(100% + 56px); max-width: none; position: relative; left: 50%; transform: translateX(-50%); margin-top: 8px; } .rr-preview-crop { width: 100%; } /* --------------------------------------------------------- 5. TIGHTER MOBILE PURCHASE AREA --------------------------------------------------------- */ .rr-purchase { padding: 32px 16px 34px; border-radius: 0 0 20px 20px; } .rr-price { font-size: 48px; line-height: 0.86; } .rr-payment-label { margin: 6px 0 18px; font-size: 18px; line-height: 1.15; } /* --------------------------------------------------------- 6. SMALLER, MORE DESKTOP-LIKE CTA --------------------------------------------------------- */ .rr-cta { width: min(320px, calc(100% - 24px)); min-height: 50px; gap: 12px; padding: 12px 18px; font-size: 10.75px; letter-spacing: 0.15em; } .rr-cta-arrow { font-size: 17px; } /* --------------------------------------------------------- 7. HORIZONTAL 3-STEP CHECKOUT FLOW --------------------------------------------------------- */ .rr-checkout-steps { width: 100%; max-width: 330px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; font-size: 9px; line-height: 1.15; letter-spacing: -0.01em; } .rr-checkout-steps li { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; text-align: center; } .rr-checkout-steps li:not(:last-child)::after { display: block; content: "→"; position: absolute; top: 5px; right: -7px; margin: 0; font-size: 12px; line-height: 1; color: #c5c1b7; opacity: 0.32; } .rr-step-dot { width: 25px; height: 25px; font-size: 10px; } /* --------------------------------------------------------- 8. TIGHTER STRIPE PROOF LINE --------------------------------------------------------- */ .rr-stripe { margin: 16px 0 0; column-gap: 14px; row-gap: 6px; font-size: 11px; } } /* ========================================================= 05 — FOR YOU IF ========================================================= */ .program-fit-section { --page-bg: #f3f0ea; --paper-bg: #fbfaf6; --navy: #08283f; --blue-accent: #5f9fc8; --clay: #b1847b; --clay-soft: #cfb8b1; --clay-dot-glow: rgba(177, 132, 123, 0.12); --body-text: #39576c; --rule-cool: rgba(8, 40, 63, 0.028); --rule-warm: rgba(177, 132, 123, 0.038); --paper-border: rgba(8, 40, 63, 0.05); /* Balanced outer card padding */ --sheet-pad-top: clamp(48px, 5vw, 74px); --sheet-pad-right: clamp(34px, 4.2vw, 64px); --sheet-pad-bottom: clamp(48px, 5vw, 74px); --sheet-pad-left: clamp(34px, 4.2vw, 64px); /* Tightened internal composition */ --title-good-gap: clamp(22px, 2.6vw, 42px); /* Replaces the old center-gap + 1px rule + center-gap system. This keeps the two columns separated without the long vertical line. */ --comparison-gap: clamp(28px, 2.8vw, 44px); --dot-col: 12px; --dot-gap: 14px; } .program-fit-section, .program-fit-section * { box-sizing: border-box; } .program-fit-section { background: radial-gradient( circle at 80% 5%, rgba(200, 203, 184, 0.055), transparent 32% ), linear-gradient( 180deg, #faf7f1 0%, #f6f1e9 100% ); padding: clamp(56px, 7vw, 104px) clamp(18px, 3.5vw, 52px); color: var(--navy); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .program-fit-section .serif { font-family: "EB Garamond", Georgia, serif; font-weight: 500; } .desktop-break { display: inline; } .mobile-break, .mobile-only { display: none; } .desktop-only { display: inline; } .program-fit-sheet { max-width: 1210px; margin: 0 auto; background: var(--paper-bg); border: 1px solid var(--paper-border); box-shadow: 0 24px 64px rgba(8, 40, 63, 0.04); padding: var(--sheet-pad-top) var(--sheet-pad-right) var(--sheet-pad-bottom) var(--sheet-pad-left); display: grid; /* 1 = title 2 = title-to-good spacer 3 = good column 4 = comparison gap 5 = poor column */ grid-template-columns: minmax(210px, 0.62fr) var(--title-good-gap) minmax(0, 1fr) var(--comparison-gap) minmax(0, 1fr); column-gap: 0; grid-template-rows: auto auto auto auto auto auto; align-items: start; position: relative; } .program-fit-title { grid-column: 1; grid-row: 2 / 7; margin: 0; max-width: 285px; color: var(--navy); font-size: clamp(44px, 4.35vw, 68px); line-height: 0.94; letter-spacing: -0.062em; } .fit-label { margin: 0; padding-bottom: 22px; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; } .fit-label::after { content: ""; display: block; width: 38px; height: 1px; margin-top: 14px; background: currentColor; opacity: 0.42; } .fit-label-good { grid-column: 3; grid-row: 1; color: var(--blue-accent); } .fit-label-poor { grid-column: 5; grid-row: 1; color: var(--clay); } .fit-heading { margin: 0; padding-bottom: 30px; color: var(--navy); font-size: clamp(32px, 2.65vw, 44px); line-height: 0.98; letter-spacing: -0.05em; } .fit-heading-good { grid-column: 3; grid-row: 2; } .fit-heading-poor { grid-column: 5; grid-row: 2; white-space: nowrap; } .fit-item { display: grid; grid-template-columns: var(--dot-col) minmax(0, 1fr); column-gap: var(--dot-gap); align-items: start; position: relative; padding-bottom: 21px; margin-bottom: 23px; color: var(--body-text); font-size: 16px; line-height: 1.54; font-weight: 400; } .program-fit-section .program-fit-sheet .fit-item p, .program-fit-section .program-fit-sheet .fit-item p span { margin: 0; max-width: 360px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-synthesis: none; } .fit-good { grid-column: 3; } .fit-poor { grid-column: 5; } .fit-row-1 { grid-row: 3; } .fit-row-2 { grid-row: 4; } .fit-row-3 { grid-row: 5; } .fit-row-4 { grid-row: 6; margin-bottom: 0; padding-bottom: 0; } .fit-item::after { content: ""; position: absolute; left: calc(var(--dot-col) + var(--dot-gap)); right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, var(--rule-cool) 0%, var(--rule-cool) 82%, transparent 100% ); } .fit-poor::after { background: linear-gradient( 90deg, var(--rule-warm) 0%, var(--rule-warm) 82%, transparent 100% ); } .fit-row-4::after { display: none; } .fit-dot { width: 5px; height: 5px; margin-top: 10px; border-radius: 999px; background: rgba(95, 159, 200, 0.78); box-shadow: 0 0 0 4px rgba(95, 159, 200, 0.085); } .fit-poor .fit-dot { background: var(--clay-soft); box-shadow: 0 0 0 4px var(--clay-dot-glow); } @media (max-width: 1120px) { .program-fit-section { --title-good-gap: clamp(22px, 2.5vw, 36px); --comparison-gap: clamp(24px, 2.8vw, 40px); } .program-fit-sheet { grid-template-columns: minmax(190px, 0.58fr) var(--title-good-gap) minmax(0, 1fr) var(--comparison-gap) minmax(0, 1fr); } .program-fit-title { font-size: clamp(42px, 4.8vw, 60px); max-width: 270px; } .fit-heading { font-size: clamp(30px, 2.8vw, 40px); } .fit-item { font-size: 15.5px; } } @media (max-width: 900px) { .program-fit-section { padding: 44px 16px; } .program-fit-sheet { display: block; padding: 34px 24px; box-shadow: 0 18px 48px rgba(8, 40, 63, 0.04); } .desktop-break, .desktop-only { display: none; } .mobile-break { display: inline; } .mobile-only { display: inline; } .program-fit-title { max-width: 420px; margin-bottom: 42px; font-size: clamp(36px, 8vw, 50px); line-height: 0.97; } .fit-label { padding-bottom: 20px; font-size: 10.5px; letter-spacing: 0.16em; } .fit-label::after { width: 34px; margin-top: 13px; } .fit-heading { padding-bottom: 26px; font-size: clamp(30px, 6.7vw, 40px); line-height: 1; } .fit-heading-poor { white-space: normal; } .fit-item { --dot-col: 11px; --dot-gap: 12px; font-size: 15px; line-height: 1.5; grid-template-columns: var(--dot-col) minmax(0, 1fr); column-gap: var(--dot-gap); padding-bottom: 18px; margin-bottom: 18px; } .program-fit-section .program-fit-sheet .fit-item p, .program-fit-section .program-fit-sheet .fit-item p span { max-width: none; } .fit-item::after, .fit-poor::after { left: calc(var(--dot-col) + var(--dot-gap)); right: 0; background: linear-gradient( 90deg, var(--rule-cool) 0%, var(--rule-cool) 86%, transparent 100% ); } .fit-poor::after { background: linear-gradient( 90deg, var(--rule-warm) 0%, var(--rule-warm) 86%, transparent 100% ); } .fit-label-poor { margin-top: 42px; padding-top: 36px; border-top: 1px solid rgba(8, 40, 63, 0.035); } .fit-dot { width: 4.5px; height: 4.5px; margin-top: 9.5px; box-shadow: 0 0 0 3.75px rgba(95, 159, 200, 0.08); } .fit-poor .fit-dot { box-shadow: 0 0 0 3.75px rgba(177, 132, 123, 0.11); } } @media (max-width: 520px) { .program-fit-section { padding: 32px 12px; } .program-fit-sheet { padding: 30px 18px; box-shadow: 0 14px 38px rgba(8, 40, 63, 0.04); } .program-fit-title { margin-bottom: 36px; font-size: clamp(34px, 10.5vw, 44px); max-width: 320px; } .fit-heading { padding-bottom: 22px; font-size: clamp(28px, 8vw, 35px); } .fit-label { font-size: 10px; letter-spacing: 0.15em; } .fit-label::after { width: 30px; margin-top: 12px; } .fit-item { --dot-gap: 11px; font-size: 14.5px; line-height: 1.48; padding-bottom: 16px; margin-bottom: 16px; } .fit-label-poor { margin-top: 36px; padding-top: 32px; } .fit-dot { width: 4px; height: 4px; margin-top: 9.5px; box-shadow: 0 0 0 3.25px rgba(95, 159, 200, 0.075); } .fit-poor .fit-dot { box-shadow: 0 0 0 3.25px rgba(177, 132, 123, 0.1); } } /* ========================================================= 06 — CREATOR’S NOTE ========================================================= */ .rr-founder-section, .rr-founder-section * { box-sizing: border-box; } .rr-founder-section { --rr-navy-top: #3D3D38; --rr-navy: #343632; --rr-navy-deep: #292C29; --rr-paper: #F4F1EB; --rr-panel: #FBFAF7; --rr-cream: #F8F5EC; --rr-ink: #061728; --rr-body: #30475A; --rr-muted: #30475A; --rr-blue: #CC744C; --rr-blue-light: #D17D59; --rr-blue-soft: rgba(204, 116, 76, 0.30); --rr-paper-line: rgba(6, 24, 39, 0.04); --rr-panel-border: rgba(6, 24, 39, 0.075); --rr-panel-shadow: rgba(5, 23, 40, 0.055); --rr-dark-line: rgba(248, 245, 236, 0.13); position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 24px clamp(76px, 8vw, 118px); /* Match the visible bottom tone of the preceding "For You If" section. Using the same gradient here would restart at #faf7f1 and create a visible seam, so this section continues with the prior end color. */ background: #f6f1e9; color: var(--rr-ink); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .rr-founder-shell { width: min(1240px, 100%); margin: 0 auto; } .rr-founder-panel { display: grid; grid-template-columns: 0.42fr 0.58fr; min-height: 570px; overflow: hidden; border-radius: 24px; border: 1px solid var(--rr-panel-border); background: var(--rr-panel); box-shadow: 0 18px 46px rgba(5, 23, 40, 0.045), 0 4px 14px rgba(5, 23, 40, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .rr-founder-thesis-panel { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: clamp(54px, 5vw, 70px) clamp(44px, 4.6vw, 68px) clamp(46px, 4.6vw, 60px); background: radial-gradient( circle at 14% 0%, rgba(209, 125, 89, 0.13) 0%, rgba(209, 125, 89, 0.055) 28%, transparent 58% ), linear-gradient( 180deg, var(--rr-navy-top) 0%, var(--rr-navy) 46%, var(--rr-navy-deep) 100% ); color: var(--rr-cream); } .rr-founder-thesis-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-right: 1px solid var(--rr-dark-line); } .rr-founder-kicker { margin: 0; font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--rr-blue-light); } .rr-founder-kicker::after { content: ""; display: block; width: 54px; height: 1px; margin-top: 22px; background: var(--rr-blue-soft); } .rr-founder-mobile-title, .rr-founder-mobile-banner-note { display: none; } .rr-founder-quote-wrap { margin: clamp(74px, 6.8vw, 86px) 0 clamp(84px, 7.4vw, 104px); } .rr-founder-quote { margin: 0; max-width: 500px; font-family: "EB Garamond", Georgia, serif; font-size: clamp(34px, 3vw, 46px); line-height: 1.04; letter-spacing: -0.024em; font-weight: 400; font-style: italic; color: var(--rr-cream); } .rr-founder-signature { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--rr-dark-line); max-width: 460px; } .rr-founder-signature-row { display: flex; align-items: center; gap: 28px; } .rr-founder-portrait-frame { display: flex; align-items: center; justify-content: center; width: 132px; height: 156px; padding: 6px; border: 1px solid var(--rr-dark-line); border-radius: 24px; background: rgba(248, 245, 236, 0.04); flex: 0 0 auto; } .rr-founder-portrait { display: block; width: 118px; height: 142px; border-radius: 18px; object-fit: cover; object-position: center center; filter: saturate(0.94) contrast(0.98); } .rr-founder-signature-text { min-width: 0; } .rr-founder-name { margin: 0; font-size: 18px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; color: var(--rr-cream); } .rr-founder-role { margin: 8px 0 0; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: rgba(248, 245, 236, 0.70); } .rr-founder-note { margin: 26px 0 0; max-width: 360px; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: rgba(248, 245, 236, 0.58); } .rr-founder-rationale-panel { min-width: 0; padding: clamp(54px, 5vw, 70px) clamp(48px, 5.4vw, 78px) clamp(78px, 6.6vw, 96px); background: var(--rr-panel); color: var(--rr-ink); } .rr-founder-rationale-label { margin: 0; font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--rr-ink); } .rr-founder-rationale-label::after { content: ""; display: block; width: 42px; height: 1px; margin-top: 20px; background: var(--rr-blue-soft); } .rr-founder-title { margin: 44px 0 0; max-width: 560px; font-family: "EB Garamond", Georgia, serif; font-size: clamp(38px, 3.5vw, 54px); line-height: 1; letter-spacing: -0.018em; font-weight: 500; color: var(--rr-ink); } .rr-founder-rows { margin-top: 44px; border-top: 0; } .rr-founder-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 28px; padding: 24px 0 25px; border-bottom: 1px solid var(--rr-paper-line); } .rr-founder-row:last-child { border-bottom: 0; } .rr-founder-row--cta { row-gap: 0; } .rr-founder-number { padding-top: 4px; font-size: 13px; line-height: 1; letter-spacing: 0.08em; font-weight: 760; color: var(--rr-blue); } .rr-founder-row-body { min-width: 0; } .rr-founder-row-title { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 680; color: var(--rr-ink); } .rr-founder-row-copy { margin: 15px 0 0; max-width: 600px; } .rr-founder-row-copy p { margin: 0; font-size: 17px; line-height: 1.56; letter-spacing: -0.012em; font-weight: 400; color: var(--rr-body); } .rr-founder-row-copy p + p { margin-top: 11px; } .rr-founder-row-copy strong { font-weight: 690; color: var(--rr-ink); } /* CTA after "Why this exists" */ .rr-founder-row--cta .rr-founder-cta-wrap { grid-column: 1 / -1; margin: 92px auto 0; width: 100%; max-width: 360px; } .rr-founder-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 24px; border-radius: 9px; background: #061728; color: #f8f5ec; text-decoration: none; text-align: center; white-space: nowrap; font-size: 12px; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 780; transition: transform 180ms ease, background 180ms ease; } .rr-founder-cta-button:hover { transform: translateY(-1px); background: #343632; color: #f8f5ec; } .rr-founder-cta-button span { position: static; display: inline-block; margin: 0; font-size: 14px; line-height: 1; transform: none; } .rr-founder-mobile-signature { display: none; } @media (max-width: 980px) { .rr-founder-panel { grid-template-columns: 1fr; min-height: 0; border-radius: 24px; } .rr-founder-thesis-panel { padding: 54px 46px 48px; } .rr-founder-quote-wrap { margin: 58px 0 60px; } .rr-founder-quote { max-width: 680px; font-size: clamp(34px, 5.4vw, 46px); } .rr-founder-rationale-panel { padding: 54px 46px 76px; } .rr-founder-title { margin-top: 44px; max-width: 620px; } } @media (max-width: 720px) { .rr-founder-section { padding: 0 16px 58px; } .rr-founder-panel { border-radius: 22px; box-shadow: 0 18px 46px rgba(5, 23, 40, 0.045), 0 4px 14px rgba(5, 23, 40, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .rr-founder-thesis-panel { padding: 30px 24px 32px; min-height: 188px; } .rr-founder-kicker { font-size: 9.5px; letter-spacing: 0.16em; } .rr-founder-kicker::after { width: 44px; margin-top: 14px; } .rr-founder-mobile-title { display: block; margin: 30px 0 0; max-width: 320px; font-family: "EB Garamond", Georgia, serif; font-size: clamp(29px, 7.6vw, 35px); line-height: 1.02; letter-spacing: -0.018em; font-weight: 500; color: var(--rr-cream); } .rr-founder-mobile-banner-note { display: block; margin: 12px 0 0; max-width: 330px; font-family: "EB Garamond", Georgia, serif; font-size: 18px; line-height: 1.32; letter-spacing: -0.008em; font-weight: 500; font-style: italic; color: rgba(248, 245, 236, 0.86); } .rr-founder-quote-wrap, .rr-founder-thesis-panel .rr-founder-signature { display: none; } .rr-founder-rationale-panel { padding: 34px 24px 60px; } .rr-founder-rationale-label { display: none; } .rr-founder-title { display: none; } .rr-founder-rows { margin-top: 0; border-top: 0; } .rr-founder-row { grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; padding: 23px 0 24px; } .rr-founder-row:last-child { border-bottom: 0; } .rr-founder-number { font-size: 12px; padding-top: 5px; } .rr-founder-row-title { font-size: 18px; } .rr-founder-row-copy { margin-top: 12px; max-width: 100%; } .rr-founder-row-copy p { font-size: 16px; line-height: 1.55; } .rr-founder-row-copy p + p { margin-top: 10px; } .rr-founder-row--cta .rr-founder-cta-wrap { grid-column: 1 / -1; margin: 36px auto 0; width: 80%; max-width: none; } .rr-founder-cta-button { min-height: 52px; padding: 0 16px; gap: 8px; font-size: 10.4px; letter-spacing: 0.045em; white-space: nowrap; } .rr-founder-mobile-signature { display: block; margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(6, 24, 39, 0.08); } .rr-founder-mobile-signature-row { display: flex; align-items: center; gap: 20px; } .rr-founder-mobile-portrait-frame { display: flex; align-items: center; justify-content: center; width: 104px; height: 124px; padding: 5px; border: 1px solid rgba(6, 24, 39, 0.12); border-radius: 21px; background: rgba(6, 24, 39, 0.025); flex: 0 0 auto; } .rr-founder-mobile-portrait { display: block; width: 92px; height: 112px; border-radius: 16px; object-fit: cover; object-position: center center; filter: saturate(0.96) contrast(0.99); } .rr-founder-mobile-name { margin: 0; font-size: 17px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 680; color: var(--rr-ink); } .rr-founder-mobile-role { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; letter-spacing: -0.01em; color: var(--rr-body); } .rr-founder-mobile-note { display: none; } } @media (max-width: 420px) { .rr-founder-section { padding: 0 14px 56px; } .rr-founder-thesis-panel { padding: 28px 20px 30px; min-height: 178px; } .rr-founder-kicker { font-size: 9px; letter-spacing: 0.155em; } .rr-founder-kicker::after { margin-top: 13px; } .rr-founder-mobile-title { margin-top: 28px; font-size: 29px; line-height: 1.02; } .rr-founder-mobile-banner-note { margin-top: 11px; max-width: 300px; font-size: 17px; line-height: 1.32; } .rr-founder-rationale-panel { padding: 34px 20px 56px; } .rr-founder-row { grid-template-columns: 1fr; row-gap: 12px; } .rr-founder-number { padding-top: 0; } .rr-founder-row--cta .rr-founder-cta-wrap { grid-column: 1 / -1; margin: 36px auto 0; width: 80%; max-width: none; } .rr-founder-cta-button { min-height: 52px; padding-left: 12px; padding-right: 12px; font-size: 9.8px; letter-spacing: 0.04em; gap: 7px; white-space: nowrap; } .rr-founder-mobile-signature-row { align-items: center; gap: 16px; } .rr-founder-mobile-portrait-frame { width: 92px; height: 108px; padding: 5px; border-radius: 18px; } .rr-founder-mobile-portrait { width: 80px; height: 96px; border-radius: 14px; } } /* ========================================================= 07 — FAQ ========================================================= */ #rr-faq-section, #rr-faq-section * { box-sizing: border-box; } #rr-faq-section { --rr-faq-navy-top: #3D3D38; --rr-faq-navy-bottom: #292C29; --rr-faq-cream: #f8f5ec; --rr-faq-blue: #D17D59; --rr-faq-serif: "EB Garamond", Georgia, serif; --rr-faq-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --rr-faq-max-width: 1220px; --rr-faq-title-col: 260px; --rr-faq-list-width: 700px; --rr-faq-line-left: 18px; --rr-faq-line-right: 14px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(70px, 7vw, 104px) 24px clamp(82px, 8vw, 118px); background: linear-gradient( 180deg, var(--rr-faq-navy-top) 0%, var(--rr-faq-navy-bottom) 100% ); color: var(--rr-faq-cream); font-family: var(--rr-faq-sans); } .rr-faq-section__inner { width: min(var(--rr-faq-max-width), 100%); margin: 0 auto; display: grid; grid-template-columns: var(--rr-faq-title-col) minmax(0, var(--rr-faq-list-width)); justify-content: space-between; align-items: start; } .rr-faq-section__header { position: sticky; top: 80px; padding-top: 22px; } .rr-faq-section__title { margin: 0; max-width: 260px; font-family: var(--rr-faq-serif); font-size: clamp(30px, 2.9vw, 40px); line-height: 1; letter-spacing: -0.018em; font-weight: 500; color: var(--rr-faq-cream); } .rr-faq-section__title::after { content: ""; display: block; width: 36px; height: 1px; margin: 22px 0 0; background: rgba(209, 125, 89, 0.38); } .rr-faq-list { counter-reset: faq; width: 100%; } .rr-faq-item { counter-increment: faq; position: relative; border-bottom: 0; } .rr-faq-item::after { content: ""; position: absolute; left: var(--rr-faq-line-left); right: var(--rr-faq-line-right); bottom: 0; height: 1px; background: rgba(248, 245, 236, 0.075); pointer-events: none; } .rr-faq-item:last-child::after { display: none; } .rr-faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; column-gap: 20px; align-items: center; padding: 22px 0; color: var(--rr-faq-cream); } .rr-faq-item summary::-webkit-details-marker { display: none; } .rr-faq-item summary::before { content: counter(faq, decimal-leading-zero); font-size: 10px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 760; color: rgba(209, 125, 89, 0.78); } .rr-faq-item summary::after { content: "+"; font-size: 15px; line-height: 1; font-weight: 340; color: rgba(248, 245, 236, 0.42); text-align: right; } .rr-faq-item[open] summary::after { content: "–"; } .rr-faq-question { margin: 0; font-family: var(--rr-faq-sans); font-size: 16.5px; line-height: 1.38; letter-spacing: -0.012em; font-weight: 620; color: rgba(248, 245, 236, 0.88); } .rr-faq-answer { max-width: 640px; margin-left: 54px; padding: 0 0 24px; } .rr-faq-answer p { margin: 0; font-size: 15.25px; line-height: 1.64; letter-spacing: -0.006em; font-weight: 400; color: rgba(248, 245, 236, 0.62); } .rr-faq-answer p + p { margin-top: 13px; } .rr-faq-answer strong { font-weight: 650; color: rgba(248, 245, 236, 0.84); } .rr-faq-item[open] summary { padding-bottom: 15px; } .rr-faq-item[open] .rr-faq-question { color: var(--rr-faq-cream); } @media (max-width: 1080px) { #rr-faq-section { --rr-faq-max-width: 1040px; --rr-faq-title-col: 260px; --rr-faq-list-width: 660px; } } @media (max-width: 860px) { #rr-faq-section { --rr-faq-line-left: 18px; --rr-faq-line-right: 18px; } .rr-faq-section__inner { grid-template-columns: 1fr; justify-content: stretch; row-gap: 34px; width: min(720px, 100%); } .rr-faq-section__header { position: static; text-align: center; padding-top: 0; } .rr-faq-section__title { max-width: none; margin: 0 auto; font-size: 36px; } .rr-faq-section__title::after { margin-left: auto; margin-right: auto; } } @media (max-width: 720px) { #rr-faq-section { --rr-faq-line-left: 22px; --rr-faq-line-right: 22px; padding: 58px 16px 72px; } .rr-faq-section__inner { row-gap: 30px; } .rr-faq-section__title { font-size: 32px; line-height: 1; } .rr-faq-section__title::after { width: 34px; margin-top: 18px; } .rr-faq-item summary { grid-template-columns: 30px minmax(0, 1fr) 16px; column-gap: 13px; padding: 20px 22px; } .rr-faq-question { font-size: 15.8px; line-height: 1.4; font-weight: 600; } .rr-faq-answer { margin-left: 65px; padding: 0 22px 23px 0; } .rr-faq-answer p { font-size: 14.7px; line-height: 1.62; } } @media (max-width: 430px) { #rr-faq-section { --rr-faq-line-left: 18px; --rr-faq-line-right: 18px; padding: 54px 14px 68px; } .rr-faq-section__title { font-size: 30px; } .rr-faq-item summary { grid-template-columns: 1fr 16px; row-gap: 8px; column-gap: 14px; padding: 20px 18px; } .rr-faq-item summary::before { grid-column: 1 / -1; display: block; } .rr-faq-question { font-weight: 500; } .rr-faq-answer { margin-left: 0; padding: 0 18px 23px; } }