/* ============================================================ DentalPlanner — Design tokens Colors ported 1:1 from dentalpro's Tailwind config (same logo-derived brand), so the marketing page and the product feel like the same company. ============================================================ */ :root { --color-cream: #f7f7f5; --color-cream-50: #fbfbfa; --color-cream-200: #eeeeec; --color-sand-100: #eef1f4; --color-sand-200: #e6ebf0; --color-sand-300: #b7c2d0; --color-sand-400: #96a3b3; --color-blue-50: #eef6ff; --color-blue-100: #dcedff; --color-blue-200: #b3d9ff; --color-blue-300: #8ac6ff; --color-blue-400: #63b8ff; --color-blue-500: #3f8fef; --color-blue-600: #2667d8; --color-blue-700: #1e52b0; --color-blue-800: #1a4189; --color-blue-900: #16346b; --color-warm-50: #f4f6f8; --color-warm-300: #adb9c7; --color-warm-400: #8b98a8; --color-warm-500: #69768a; --color-warm-600: #4a5568; --color-warm-700: #3a4354; --color-warm-800: #2d3542; --color-warm-900: #1f252e; --color-green-50: #f2f8f4; --color-green-100: #e0f0e5; --color-green-500: #4a7c59; --color-green-600: #3e6a4c; --color-green-700: #325840; --color-orange-50: #fff4ec; --color-orange-100: #ffe4cf; --color-orange-400: #ff8a3d; --color-orange-500: #f5721a; --color-orange-600: #d95e0f; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --shadow-soft: 0 2px 15px -3px rgba(22,52,107,0.08), 0 10px 30px -6px rgba(22,52,107,0.06); --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-glow: 0 20px 60px -10px rgba(63,143,239,0.35); --container-w: 1160px; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --rail-w: 84px; --dot-grid: radial-gradient(circle, rgba(58,67,84,0.14) 1px, transparent 1.4px); --line-pattern-dark: repeating-linear-gradient(135deg, rgba(38,103,216,0.06) 0px, rgba(38,103,216,0.06) 1px, transparent 1px, transparent 13px); } /* ============ Reset ============ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--color-warm-800); background: var(--color-cream); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; cursor: pointer; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--color-warm-900); } .btn, .eyebrow, .tag, .rail__wordmark, .float-card__title { font-family: var(--font-display); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-blue-600); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } /* Screen-reader-only: keeps content in the a11y tree + document outline, hidden visually. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* No-JS-safe reveal: only hidden when JS is confirmed running (see inline script in ) — progressive enhancement, never breaks no-JS. */ html.js .reveal { opacity: 0; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 760px; } section { padding: 96px 0; } @media (max-width: 640px) { section { padding: 64px 0; } } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-blue-700); margin-bottom: 16px; } .eyebrow--pill { background: #fff; border: 1px solid var(--color-blue-200); border-radius: 999px; padding: 7px 16px; box-shadow: var(--shadow-card); } .eyebrow--center { display: table; margin-left: auto; margin-right: auto; text-align: center; } .section-title { font-size: clamp(2.1rem, 4vw, 3.2rem); text-align: center; max-width: 800px; margin: 0 auto 56px; } .section-lead { text-align: center; max-width: 700px; margin: -34px auto 52px; color: var(--color-warm-600); font-size: 1.05rem; } @media (max-width: 640px) { .section-lead { margin: -18px auto 40px; font-size: 1rem; } } .text-gradient { background: linear-gradient(100deg, var(--color-blue-500), var(--color-blue-700)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; white-space: nowrap; } .btn--sm { padding: 10px 20px; font-size: 0.85rem; } .btn--lg { padding: 16px 32px; font-size: 1rem; } .btn--primary { background: linear-gradient(100deg, var(--color-orange-400), var(--color-orange-500)); color: #fff; box-shadow: 0 8px 24px -6px rgba(245,114,26,0.5); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(245,114,26,0.6); } .btn--ghost { background: rgba(63,143,239,0.08); color: var(--color-blue-700); } .btn--ghost:hover { background: rgba(63,143,239,0.15); } /* ============ Rail nav ============ */ body { padding-left: var(--rail-w); } .rail { position: fixed; top: 0; left: 0; z-index: 100; width: var(--rail-w); height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 22px 0; background: rgba(247,247,245,0.85); backdrop-filter: blur(12px); border-right: 1px solid var(--color-sand-200); } .rail__logo { display: flex; flex-direction: column; align-items: center; gap: 10px; } .rail__logo img { border-radius: 8px; } .rail__wordmark { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-warm-900); writing-mode: vertical-rl; text-orientation: mixed; } .rail__toggle { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--color-sand-200); border-radius: 10px; padding: 13px 11px; box-shadow: var(--shadow-card); } .rail__toggle span { width: 18px; height: 2px; background: var(--color-warm-800); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .rail__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rail__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rail__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { body { padding-left: 0; padding-top: 66px; } .rail { width: auto; height: auto; left: 0; right: 0; flex-direction: row; align-items: center; justify-content: space-between; padding: 13px 20px; border-right: none; border-bottom: 1px solid var(--color-sand-200); } .rail__logo { flex-direction: row; } .rail__wordmark { writing-mode: horizontal-tb; font-size: 1.05rem; } .rail__toggle { margin-top: 0; } } /* ============ Menu overlay ============ */ .menu-overlay { position: fixed; inset: 0; z-index: 150; background: var(--color-warm-900); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; } .menu-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s; } .menu-overlay__close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 1.1rem; line-height: 1; } .menu-overlay__links { display: flex; flex-direction: column; align-items: center; gap: 22px; } .menu-overlay__links a { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; color: #fff; opacity: 0.82; transition: opacity 0.2s ease, color 0.2s ease; } .menu-overlay__links a:hover { opacity: 1; color: var(--color-blue-300); } /* ============ Hero ============ */ .hero { position: relative; padding: 64px 0 96px; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(760px 480px at 78% 8%, var(--color-blue-100), transparent 60%), radial-gradient(600px 420px at 10% 90%, var(--color-orange-50), transparent 60%), var(--dot-grid), var(--color-cream); background-size: auto, auto, 22px 22px; } .hero__watermark { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 11rem); color: var(--color-blue-900); opacity: 0.05; white-space: nowrap; letter-spacing: -0.03em; z-index: -1; pointer-events: none; user-select: none; } .hero__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; } .hero__inner h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 22px; } .hero__subhead { font-size: 1.1rem; color: var(--color-warm-600); max-width: 520px; margin-bottom: 26px; } .hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .tag { font-size: 0.8rem; font-weight: 600; color: var(--color-blue-700); background: var(--color-blue-50); border: 1px solid var(--color-blue-200); border-radius: 999px; padding: 6px 14px; } .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(63,143,239,0.28), transparent 70%); filter: blur(10px); } .hero__visual img { position: relative; width: min(420px, 80vw); filter: drop-shadow(var(--shadow-glow)); transition: opacity 0.5s ease; } #heroTooth3D { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .hero__visual.is-3d-ready img { opacity: 0; } .hero__visual.is-3d-ready #heroTooth3D { opacity: 1; } .float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--color-sand-200); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-soft); } .float-card--top { top: 6%; left: -4%; } .float-card--bottom { bottom: 10%; right: -6%; } .float-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-green-500); flex-shrink: 0; } .float-card__icon { font-size: 1.2rem; flex-shrink: 0; } .float-card__title { font-size: 0.85rem; font-weight: 700; color: var(--color-warm-900); white-space: nowrap; } .float-card__sub { font-size: 0.75rem; color: var(--color-warm-500); white-space: nowrap; } @media (max-width: 900px) { .hero__row { grid-template-columns: 1fr; text-align: center; } .hero__inner { order: 2; } .hero__visual { order: 1; margin-bottom: 24px; } .hero__subhead { margin-left: auto; margin-right: auto; } .hero__tags { justify-content: center; } .hero__ctas { justify-content: center; } .float-card { display: none; } } /* ============ Pain ============ */ .pain { background: #fff; } .pain__grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center; } .pain__copy h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 28px; } /* Clean row list — no card backgrounds, just thin dividers */ .pain__list { border-top: 1px solid var(--color-sand-200); } .pain__item { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--color-sand-200); } .pain__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, white); border: 1px solid color-mix(in srgb, var(--accent) 30%, white); display: flex; align-items: center; justify-content: center; color: var(--accent); } .pain__icon svg { width: 22px; height: 22px; } .pain__item p { color: var(--color-warm-700); font-size: 1.02rem; } /* Expressive portrait visual */ .pain__visual { position: relative; z-index: 2; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 1; } .pain__visual img { width: 100%; height: 100%; object-fit: cover; } .pain__visual-tint { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(30,82,176,0.22), rgba(22,52,107,0.32)); mix-blend-mode: multiply; } @media (max-width: 800px) { .pain__grid { grid-template-columns: 1fr; } } /* ============ Features (interactive list + swapping image) ============ */ .features { position: relative; background: radial-gradient(700px 460px at 12% 0%, var(--color-orange-50), transparent 60%), radial-gradient(640px 440px at 94% 100%, var(--color-blue-100), transparent 60%), var(--dot-grid), var(--color-cream); background-size: auto, auto, 22px 22px; } .feat { position: relative; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; } .feat-list { position: relative; border-left: 1px solid var(--color-sand-200); } .feat-list__item { position: relative; border-bottom: 1px solid var(--color-sand-200); } .feat-list__item:last-child { border-bottom: none; } .feat-list__item::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--color-orange-500); transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease; } .feat-list__item.is-active::before { transform: scaleY(1); } .feat-list__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: none; border: none; text-align: left; padding: 22px 20px 22px 26px; position: relative; } .feat-list__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-warm-500); transition: color 0.25s ease; } .feat-list__item.is-active .feat-list__title { color: var(--color-warm-900); } .feat-list__num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--color-sand-400); flex-shrink: 0; } .feat-list__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.3s ease; } .feat-list__panel > p { overflow: hidden; padding: 0 20px 0 26px; color: var(--color-warm-500); font-size: 0.98rem; } .feat-list__item.is-active .feat-list__panel { grid-template-rows: 1fr; opacity: 1; } .feat-list__item.is-active .feat-list__panel > p { padding-bottom: 22px; } .feat-visual { position: relative; border-radius: var(--radius-2xl); overflow: hidden; min-height: 480px; background: var(--color-blue-50); box-shadow: var(--shadow-soft); } .feat-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); z-index: 1; clip-path: inset(0 100% 0 0); transition: opacity 0.4s ease, transform 0.7s ease, clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1); } .feat-visual__img.is-active { opacity: 1; transform: scale(1); z-index: 2; clip-path: inset(0 0% 0 0); } @media (max-width: 900px) { .feat { grid-template-columns: 1fr; gap: 32px; } .feat-visual { min-height: 320px; order: -1; } } /* ============ Marquee band ============ */ .marquee-band { background: #fff; padding: 56px 0; overflow: hidden; } .marquee-band__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee-scroll 32s linear infinite; } .marquee-band__word { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1; font-size: clamp(2.4rem, 5.5vw, 4.6rem); color: var(--color-warm-900); white-space: nowrap; } .marquee-band__word--soft { color: var(--color-warm-300); } .marquee-band__sep { font-size: clamp(1.2rem, 2.5vw, 2rem); color: var(--color-blue-200); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-band__track { animation: none; overflow-x: auto; } } /* ============ Highlights stats ============ */ .highlights { position: relative; background: #fff; padding: 76px 0; overflow: hidden; } .highlights__dots { position: absolute; inset: 0; background-image: var(--dot-grid); background-size: 22px 22px; } .highlights__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .stat { text-align: center; padding: 0 12px; border-left: 1px solid var(--color-sand-200); } .stat:first-child { border-left: none; } .stat__num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; background: linear-gradient(100deg, var(--color-blue-600), var(--color-orange-500)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; } .stat__num span { font-size: 0.5em; } .stat__label { color: var(--color-warm-600); font-size: 0.92rem; max-width: 220px; margin: 0 auto; } @media (max-width: 800px) { .highlights__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .stat:nth-child(3) { border-left: none; } } @media (max-width: 480px) { .highlights__grid { grid-template-columns: 1fr; } .stat { border-left: none !important; border-top: 1px solid var(--color-sand-200); padding-top: 28px; } .stat:first-child { border-top: none; padding-top: 0; } } /* ============ How it works ============ */ .how { background: #fff; } .how__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .how__step { position: relative; text-align: left; padding: 32px 26px; background: var(--color-cream-50); border: 1px solid var(--color-sand-200); border-radius: var(--radius-xl); } .how__num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-size: clamp(2.6rem, 4.4vw, 3.6rem); background: linear-gradient(100deg, var(--color-blue-500), var(--color-blue-700)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; } .how__step h3 { font-size: 1.4rem; margin-bottom: 10px; } .how__step p { color: var(--color-warm-500); font-size: 0.98rem; } @media (max-width: 700px) { .how__steps { grid-template-columns: 1fr; gap: 24px; } } /* ============ FAQ ============ */ .faq { position: relative; background: radial-gradient(1000px 800px at 50% 50%, rgba(220,237,255,0.55), transparent 72%), var(--color-cream); } .faq__list { position: relative; display: grid; gap: 12px; } .faq__item { background: #fff; border: 1px solid var(--color-sand-200); border-radius: var(--radius-lg); padding: 18px 22px; } .faq__item summary { cursor: pointer; font-weight: 600; color: var(--color-warm-800); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; font-size: 1.3rem; color: var(--color-blue-600); flex-shrink: 0; transition: transform 0.2s ease; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { margin-top: 12px; color: var(--color-warm-500); font-size: 0.95rem; } /* ============ Final CTA ============ */ .final-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--color-blue-700), var(--color-blue-900)); color: #fff; } .final-cta__watermark { position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 13vw, 10rem); color: #fff; opacity: 0.06; white-space: nowrap; letter-spacing: -0.03em; pointer-events: none; } .final-cta__bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: left; pointer-events: none; opacity: 1; mix-blend-mode: soft-light; } .final-cta__bg img { max-height: 100%; width: auto; padding: 30px 50px;} .final-cta__inner { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; text-align: center; } .eyebrow--dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; } .final-cta h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); } .final-cta__inner > p { color: var(--color-blue-100); font-size: 1.1rem; max-width: 480px; } .final-cta__float { position: absolute; z-index: 2; } .final-cta__float--left { top: 78%; left: 3%; } .final-cta__float--right { top: 10%; right: 3%; } @media (max-width: 1100px) { .final-cta__float { display: none; } } /* ============ Footer ============ */ .footer { position: relative; overflow: hidden; background: var(--color-warm-900); color: var(--color-warm-400); padding: 88px 0 48px; } .footer__dots { position: absolute; inset: 0; background: url('/assets/images/cta-bg-line.svg') center top / cover no-repeat; pointer-events: none; } .footer__inner { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; } .footer__wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.6rem, 9vw, 6.5rem); line-height: 1; margin-bottom: 8px; background: linear-gradient(100deg, var(--color-blue-500), var(--color-blue-300)); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer__tagline { font-size: 0.9rem; } .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 8px 0 26px; } .footer__nav a { display: inline-block; padding: 10px 22px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--color-warm-300); font-size: 0.92rem; font-weight: 500; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; } .footer__nav a:nth-child(odd) { transform: rotate(-3deg); } .footer__nav a:nth-child(even) { transform: rotate(2deg); } .footer__nav a:hover { background: rgba(255,255,255,0.14); color: #fff; transform: rotate(0deg) translateY(-2px); } .footer__copy { font-size: 0.8rem; opacity: 0.7; margin-top: 10px; } .footer__legal { font-size: 0.8rem; opacity: 0.75; } .footer__legal a { color: var(--color-warm-300); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .footer__legal a:hover { color: #fff; } @media (max-width: 600px) { .footer__nav a:nth-child(odd), .footer__nav a:nth-child(even) { transform: none; } } /* ============ Legal pages (privacidad / términos) ============ */ .legal { position: relative; padding: 72px 0 96px; background: radial-gradient(720px 460px at 88% -6%, var(--color-blue-100), transparent 60%), radial-gradient(560px 400px at 0% 100%, var(--color-orange-50), transparent 60%), var(--dot-grid), var(--color-cream); background-size: auto, auto, 22px 22px; } .legal__head { text-align: center; margin-bottom: 48px; } .legal__head h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin: 14px 0 12px; } .legal__updated { color: var(--color-warm-500); font-size: 0.88rem; } .legal__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; } .legal__body { background: #fff; border: 1px solid var(--color-sand-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); padding: clamp(26px, 5vw, 56px); } .legal__body > *:first-child { margin-top: 0; } .legal__body h2 { font-size: 1.35rem; margin: 40px 0 14px; padding-top: 28px; border-top: 1px solid var(--color-sand-200); } .legal__body h3 { font-size: 1.05rem; color: var(--color-warm-800); margin: 22px 0 8px; } .legal__body p { color: var(--color-warm-600); font-size: 0.98rem; margin-bottom: 14px; } .legal__body strong { color: var(--color-warm-800); font-weight: 600; } .legal__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; background: var(--color-blue-50); color: var(--color-blue-800); border: 1px solid var(--color-blue-100); border-radius: 6px; padding: 1px 6px; } .legal__body ul { margin: 0 0 16px; } .legal__body li { position: relative; color: var(--color-warm-600); font-size: 0.98rem; padding-left: 24px; margin-bottom: 10px; } .legal__body li::before { content: ''; position: absolute; left: 5px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-blue-500); } .legal__body a { color: var(--color-blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-blue-200); } .legal__body a:hover { color: var(--color-blue-600); text-decoration-color: currentColor; } .legal__toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; padding: 0; } .legal__toc a { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--color-blue-700); background: var(--color-blue-50); border: 1px solid var(--color-blue-100); border-radius: 999px; padding: 6px 13px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .legal__toc a:hover { background: var(--color-blue-100); color: var(--color-blue-800); } .legal__body :target { scroll-margin-top: 90px; } /* ============ Video section ============ */ .video-section { background: #fff; } .video-section__frame { max-width: 960px; margin: 0 auto; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--color-sand-200); box-shadow: var(--shadow-soft); background: var(--color-blue-50); } .video-section__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }