.content-page { max-width: 1200px; margin: 1rem auto; padding: 1.5rem; background: rgba(255, 255, 255, 0.98); border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } :root[data-theme="dark"] .content-page { background: var(--color-surface-glass-strong); box-shadow: var(--shadow-surface); } .page-header { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--gray-200); } .page-title { font-size: 1.8rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: var(--primary-blue); margin-bottom: 0.5rem; } .page-subtitle { font-size: 1rem; color: var(--gray-600); font-weight: 500; } .section-title { font-size: 1.4rem; font-weight: 700; color: var(--primary-blue); margin-bottom: 1rem; font-family: 'Outfit', sans-serif; text-align: center; } .mission-box { background: linear-gradient(135deg, var(--blue-50), var(--lighter-blue)); padding: 1.25rem; border-radius: 0.5rem; margin-bottom: 1.5rem; border-left: 3px solid var(--primary-blue); } .mission-quote { font-size: 1.05rem; font-style: italic; color: var(--gray-700); line-height: 1.6; text-align: center; } .features-section { margin-bottom: 1.5rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .feature-card { background: var(--gray-50); padding: 1.25rem; border-radius: 0.5rem; transition: all var(--transition); border-top: 2px solid var(--primary-blue); } .feature-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1); } .feature-title { font-size: 1.1rem; font-weight: 600; color: var(--primary-blue); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .feature-icon { font-size: 1.2rem; } .feature-description { color: var(--gray-600); line-height: 1.7; } .feature-list { list-style: none; padding-left: 0; margin-top: 0.5rem; } .feature-list li { padding: 0.25rem 0; color: var(--gray-700); display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; } :root[data-theme="dark"] .mission-quote, :root[data-theme="dark"] .feature-description, :root[data-theme="dark"] .feature-list li { color: var(--color-text-secondary); } .feature-list li::before { content: '✓'; color: var(--success); font-weight: bold; } .advantages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .advantage-item { background: white; padding: 1rem; border-radius: 0.5rem; text-align: center; border: 1px solid var(--gray-200); transition: all var(--transition); } .advantage-item:hover { border-color: var(--primary-blue); transform: translateY(-2px); } .advantage-icon { font-size: 1.5rem; color: var(--primary-blue); margin-bottom: 0.5rem; } .advantage-text { font-weight: 600; color: var(--gray-700); font-size: 0.9rem; } .tech-section { background: var(--blue-50); padding: 1.25rem; border-radius: 0.5rem; margin-bottom: 1.5rem; } .tech-list { list-style: none; padding-left: 0; } .tech-list li { padding: 0.4rem 0; color: var(--gray-700); display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; } .tech-list li i { color: var(--primary-blue); font-size: 1rem; } .vision-section { background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)); color: white; padding: 1.5rem; border-radius: 0.5rem; text-align: center; margin-bottom: 1.5rem; } .vision-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; font-family: 'Outfit', sans-serif; } .vision-text { font-size: 1.05rem; line-height: 1.6; font-style: italic; } .contact-section { background: var(--gray-50); padding: 1.25rem; border-radius: 0.5rem; text-align: center; } .contact-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 0.75rem; } .contact-grid .contact-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--gray-700); } .contact-grid .contact-item i { color: var(--primary-blue); font-size: 1.1rem; } .contact-grid .contact-item a { color: var(--primary-blue); text-decoration: none; font-weight: 600; } .contact-grid .contact-item a:hover { text-decoration: underline; } .legal-section { background: white; border: 1px solid var(--gray-200); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; } .legal-content { color: var(--gray-600); line-height: 1.6; font-size: 0.95rem; } .legal-content ul { padding-left: 2rem; margin-left: 0.5rem; } .legal-content ul li { margin-bottom: 0.5rem; } .faq-section { margin-bottom: 1rem; } .faq-item { background: var(--gray-50); padding: 1rem; border-radius: 0.5rem; margin-bottom: 0.75rem; border-left: 2px solid var(--primary-blue); transition: all var(--transition); } .faq-item:hover { transform: translateX(2px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); } .faq-question { font-size: 1rem; font-weight: 600; color: var(--primary-blue); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .faq-question i { font-size: 1rem; } .faq-answer { color: var(--gray-700); line-height: 1.6; padding-left: 1.5rem; font-size: 0.95rem; } .scoring-grid { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; } .score-card { display: flex; align-items: center; padding: 0.875rem; background: var(--gray-50); border-radius: 0.5rem; border-left: 3px solid; transition: all var(--transition); } .score-card:hover { transform: translateX(3px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); } .score-number { font-size: 1.5rem; font-weight: 700; margin-right: 1rem; min-width: 45px; text-align: center; font-family: 'Outfit', sans-serif; } .score-content { flex: 1; } .score-label { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--gray-800); } .score-description { color: var(--gray-600); line-height: 1.5; font-size: 0.9rem; } .score-0 { border-color: #dc2626; } .score-0 .score-number { color: #dc2626; } .score-1 { border-color: #ea580c; } .score-1 .score-number { color: #ea580c; } .score-2-4 { border-color: #f59e0b; } .score-2-4 .score-number { color: #f59e0b; } .score-5-6 { border-color: #84cc16; } .score-5-6 .score-number { color: #84cc16; } .score-7-8 { border-color: #22c55e; } .score-7-8 .score-number { color: #22c55e; } .score-9 { border-color: #06b6d4; } .score-9 .score-number { color: #06b6d4; } .score-10 { border-color: #6366f1; } .score-10 .score-number { color: #6366f1; } .factors-section, .disclaimer-section { background: var(--blue-50); padding: 1.25rem; border-radius: 0.5rem; margin-bottom: 1rem; } .factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; } .factor-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: white; border-radius: 0.375rem; font-size: 0.9rem; } .factor-icon { color: var(--primary-blue); font-size: 1rem; } .disclaimer-content { color: var(--gray-700); line-height: 1.6; font-size: 0.95rem; } :root[data-theme="dark"] .page-header, :root[data-theme="dark"] .advantage-item, :root[data-theme="dark"] .legal-section { border-color: var(--color-border); } :root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .contact-section, :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .score-item { background: var(--color-surface-muted); } :root[data-theme="dark"] .advantage-item, :root[data-theme="dark"] .legal-section, :root[data-theme="dark"] .language-item { background: var(--color-surface); } :root[data-theme="dark"] .advantage-text, :root[data-theme="dark"] .tech-list li, :root[data-theme="dark"] .contact-grid .contact-item, :root[data-theme="dark"] .legal-content, :root[data-theme="dark"] .faq-answer, :root[data-theme="dark"] .score-description, :root[data-theme="dark"] .disclaimer-content { color: var(--color-text-secondary); } :root[data-theme="dark"] .score-title { color: var(--color-text); } .disclaimer-content ul { list-style: none; padding-left: 0; margin-top: 0.5rem; } .disclaimer-content li { padding: 0.25rem 0; padding-left: 1.5rem; position: relative; font-size: 0.9rem; } .disclaimer-content li::before { content: '⚠️'; position: absolute; left: 0; font-size: 0.9rem; } .content-page { --sp-bg: rgba(255, 255, 255, 0.94); --sp-fill: #f5f5f7; --sp-text: #1d1d1f; --sp-label: #86868b; --sp-separator: rgba(60, 60, 67, 0.1); --sp-hover: rgba(255, 255, 255, 0.88); --sp-border: rgba(68, 93, 239, 0.38); --sp-accent: #445def; --sp-accent-soft: rgba(68, 93, 239, 0.12); --sp-radius: 20px; --sp-card-radius: 16px; --sp-shadow: 0 8px 28px rgba(68, 93, 239, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.1); --sp-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; max-width: 1400px; margin: 1.25rem auto 2rem; padding: 1.75rem 1.5rem 1.5rem; background: var(--sp-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); } .container > .content-page { max-width: none; width: 100%; box-sizing: border-box; margin-top: 0.5rem; } :root[data-theme="dark"] .content-page { --sp-bg: var(--color-surface-glass-strong); --sp-fill: var(--color-control); --sp-text: var(--color-text); --sp-label: var(--color-text-secondary); --sp-separator: var(--color-border-subtle); --sp-hover: var(--color-surface-raised); --sp-shadow: var(--shadow-surface); } :root[data-theme="dark"] .content-page .page-subtitle { color: var(--color-text-secondary); } .page-header { margin-bottom: 1.5rem; padding-bottom: 0; border-bottom: none; text-align: center; } .page-title { margin: 0 0 0.375rem; font-family: var(--sp-font); font-size: clamp(1.5rem, 4vw, 1.75rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; color: var(--sp-text); } .page-subtitle { margin: 0; font-family: var(--sp-font); font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.45; color: var(--sp-label); } .section-title { margin: 0 0 0.875rem; font-family: var(--sp-font); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--sp-text); text-align: left; } .content-page .section-title { text-align: center; text-transform: none; } .mission-box, .tech-section, .vision-section, .legal-section, .factors-section, .disclaimer-section, .contact-section { margin-bottom: 1rem; padding: 1.125rem 1rem; border: 1px solid var(--sp-separator); border-radius: var(--sp-card-radius); background: var(--sp-fill); } .mission-quote, .vision-text, .legal-content, .disclaimer-content, .disclaimer-content p { margin: 0; font-family: var(--sp-font); font-size: 0.875rem; line-height: 1.55; letter-spacing: -0.01em; color: var(--sp-label); } .mission-quote, .vision-text { font-style: normal; text-align: center; } .vision-section { background: rgba(68, 93, 239, 0.08); border-color: rgba(68, 93, 239, 0.22); text-align: center; } .vision-title { margin: 0 0 0.5rem; font-family: var(--sp-font); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--sp-text); } .vision-text { color: var(--sp-text); } .features-section { margin-bottom: 1.25rem; } .features-grid { gap: 0.625rem; } .feature-card { padding: 1rem 1.125rem; border: 1px solid var(--sp-separator); border-radius: var(--sp-card-radius); border-top: 1px solid var(--sp-separator); background: var(--sp-fill); box-shadow: none; transition: border-color 0.22s ease, background-color 0.22s ease; } .feature-card:hover { transform: none; border-color: rgba(68, 93, 239, 0.28); background: var(--sp-hover); box-shadow: 0 4px 16px rgba(68, 93, 239, 0.06); } .feature-title { display: flex; align-items: center; margin: 0 0 0.5rem; font-family: var(--sp-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--sp-text); gap: 0.625rem; } .feature-icon, .advantage-icon, .factor-icon, .content-page .sp-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sp-accent-soft); color: var(--sp-accent); margin-bottom: 0; } .content-page .sp-icon svg, .feature-icon svg, .advantage-icon svg, .factor-icon svg { width: 0.875rem; height: 0.875rem; display: block; } .tech-list li .sp-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sp-accent-soft); color: var(--sp-accent); } .tech-list li .sp-icon svg { width: 0.875rem; height: 0.875rem; display: block; } .feature-description, .feature-list li { font-family: var(--sp-font); font-size: 0.875rem; color: var(--sp-label); } .feature-list li::before { color: var(--sp-accent); } .advantages-grid { gap: 0.625rem; } .advantage-item { padding: 0.875rem 0.75rem; border: 1px solid var(--sp-separator); border-radius: 14px; background: var(--sp-fill); transition: border-color 0.22s ease; } .advantage-item:hover { transform: none; border-color: rgba(68, 93, 239, 0.28); } .advantage-icon, .advantage-item .help-icon { margin: 0 auto 0.5rem; } .advantage-text { font-family: var(--sp-font); font-size: 0.8125rem; font-weight: 600; color: var(--sp-text); } .tech-list { margin: 0; } .tech-list li { display: flex; align-items: center; padding: 0.5rem 0; font-family: var(--sp-font); font-size: 0.875rem; color: var(--sp-label); gap: 0.625rem; } .scoring-grid { gap: 0.625rem; margin-bottom: 1.25rem; } .score-card { padding: 0.875rem 1rem; border: 1px solid var(--sp-separator); border-left: 1px solid var(--sp-separator); border-radius: var(--sp-card-radius); background: var(--sp-fill); box-shadow: none; transition: border-color 0.22s ease, background-color 0.22s ease; } .score-card:hover { transform: none; border-color: rgba(68, 93, 239, 0.28); background: var(--sp-hover); box-shadow: 0 4px 16px rgba(68, 93, 239, 0.06); } .score-number { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; margin-right: 0.875rem; padding: 0 0.375rem; border-radius: 12px; background: var(--sp-hover); font-family: var(--sp-font); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } .score-label { font-family: var(--sp-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--sp-text); } .score-description { font-family: var(--sp-font); font-size: 0.8125rem; color: var(--sp-label); line-height: 1.5; } .factors-grid { gap: 0.5rem; } .factor-item { padding: 0.625rem 0.75rem; border: 1px solid var(--sp-separator); border-radius: 12px; background: var(--color-surface-glass); font-family: var(--sp-font); font-size: 0.8125rem; color: var(--sp-text); } .disclaimer-content li { position: relative; padding-left: 1.125rem; font-family: var(--sp-font); font-size: 0.875rem; color: var(--sp-label); } .disclaimer-content li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--sp-accent); } .faq-section { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.5rem; } .faq-item { margin-bottom: 0; padding: 1rem 1.125rem; border: 1px solid var(--sp-separator); border-left: 1px solid var(--sp-separator); border-radius: var(--sp-card-radius); background: var(--sp-fill); box-shadow: none; transition: border-color 0.22s ease, background-color 0.22s ease; } .faq-item:hover { transform: none; border-color: rgba(68, 93, 239, 0.28); background: var(--sp-hover); box-shadow: 0 4px 16px rgba(68, 93, 239, 0.06); } .faq-question { display: flex; align-items: center; margin: 0 0 0.5rem; font-family: var(--sp-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--sp-text); gap: 0.625rem; } .help-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sp-accent-soft); color: var(--sp-accent); } .help-icon i { font-size: 0.9375rem; line-height: 1; display: block; } .faq-answer { margin: 0; padding-left: 2.375rem; font-family: var(--sp-font); font-size: 0.875rem; color: var(--sp-label); line-height: 1.55; } .faq-answer strong { color: var(--sp-text); font-weight: 600; } .contact-section { text-align: center; } .contact-grid { gap: 1rem 1.5rem; margin-top: 0; } .contact-grid .contact-item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sp-font); font-size: 0.875rem; color: var(--sp-label); } .contact-grid .contact-item a { color: var(--sp-text); font-weight: 500; text-decoration: none; } .contact-grid .contact-item a:hover { color: var(--sp-accent); text-decoration: none; } @media (max-width: 640px) { .content-page { margin: 0.75rem 0.75rem 1.5rem; padding: 1.25rem 1rem 1rem; border-radius: 18px; } .container > .content-page { margin: 0.5rem 0 1.5rem; } .faq-answer { padding-left: 0; padding-top: 0.375rem; } .score-card { align-items: flex-start; } } body.broker-route { --broker-accent: #11877f; --broker-ink: var(--color-text, #1d1d1f); --broker-muted: var(--color-text-muted, #727278); --broker-line: var(--color-border-subtle, rgba(60, 60, 67, 0.16)); --hm-font-display: "Archivo", "Helvetica Neue", arial, sans-serif; --hm-accent: #445def; --hm-accent-ink: #0b1028; --hm-ease: cubic-bezier(0.22, 1, 0.36, 1); background: var(--color-canvas-subtle); } :root[data-theme="dark"] body.broker-route { --broker-accent: #49c8bf; background: var(--color-canvas); } main.broker-page.content-page { width: min(calc(100% - clamp(2rem, 5vw, 4.5rem)), 1180px); max-width: 1180px; margin: 0 auto; padding: 0 0 clamp(2.5rem, 5vw, 4.5rem) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--broker-ink); } :root[data-theme="dark"] main.broker-page .feature-card, :root[data-theme="dark"] main.broker-page .features-section, :root[data-theme="dark"] main.broker-page .features-grid { background: transparent; box-shadow: none; } main.broker-page .page-header-icon, main.broker-page .sp-icon { display: none !important; } main.broker-page .page-header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; margin: 0; padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--broker-line); text-align: left; } main.broker-page .page-title { margin: 0; max-width: 9ch; color: var(--broker-ink); font-size: clamp(3.6rem, 7vw, 6.25rem); font-weight: 620; line-height: 0.9; letter-spacing: -0.068em; } main.broker-page .broker-hero-copy { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.35rem; } main.broker-page .page-subtitle { margin: 0; max-width: 28rem; color: var(--broker-muted); font-size: clamp(0.98rem, 1.35vw, 1.12rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.015em; } main.broker-page .broker-hero-cta { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--broker-line); background: transparent; color: var(--broker-ink); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } main.broker-page .broker-hero-cta:hover { border-color: rgba(68, 93, 239, 0.45); color: var(--broker-accent); background: rgba(68, 93, 239, 0.08); } main.broker-page .features-section, main.broker-page .broker-registration-form { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin: 0; padding: clamp(2.25rem, 4vw, 3.5rem) 0; border: 0; border-bottom: 1px solid var(--broker-line); border-radius: 0; background: transparent; } main.broker-page .section-title { display: block; align-self: start; margin: 0; padding-top: 0.15rem; color: var(--broker-muted); font-size: 0.72rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; } main.broker-page .features-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--broker-line); } main.broker-page .feature-card { min-width: 0; margin: 0; padding: 1.25rem 1.2rem 1.35rem 0; border: 0; border-bottom: 1px solid var(--broker-line); border-radius: 0; background: transparent; box-shadow: none; } main.broker-page .feature-card:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--broker-line); } main.broker-page .feature-title { margin: 0 0 0.65rem; color: var(--broker-ink); font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 630; line-height: 1.25; letter-spacing: -0.025em; } main.broker-page .feature-description { margin: 0; padding: 0; color: var(--broker-muted); font-size: 0.875rem; line-height: 1.5; } main.broker-page .broker-form-aside { display: flex; flex-direction: column; gap: 0.875rem; align-self: start; } main.broker-page .form-intro, main.broker-page .broker-login-hint { margin: 0; color: var(--broker-muted); font-size: 0.875rem; line-height: 1.5; } main.broker-page .broker-login-hint a { color: var(--broker-accent); font-weight: 600; text-underline-offset: 0.18em; } main.broker-page .broker-form-panel { min-width: 0; } @media (max-width: 820px) { main.broker-page .page-header, main.broker-page .features-section, main.broker-page .broker-registration-form { grid-template-columns: 1fr; } main.broker-page .features-grid { grid-template-columns: 1fr; } main.broker-page .feature-card:nth-child(even) { padding-left: 0; border-left: 0; } } @media (max-width: 620px) { main.broker-page.content-page { width: min(calc(100% - 2rem), 1160px); } main.broker-page .page-title { font-size: clamp(3.4rem, 16vw, 5.25rem); } main.broker-page .page-header { padding-top: clamp(1.75rem, 6vw, 2.5rem); } } .broker-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; } .broker-form-grid .form-group { margin-bottom: 1.125rem; } .broker-form-grid .form-group--full { grid-column: 1 / -1; } .broker-form-fieldset-label { grid-column: 1 / -1; margin: 0.5rem 0 0.875rem; padding-top: 1rem; border-top: 1px solid var(--broker-line, var(--color-border-subtle)); color: var(--broker-muted, var(--color-text-muted)); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .broker-form-fieldset-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .broker-registration-form .form-label { display: block; margin-bottom: 0.4rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--broker-ink, var(--color-text)); } .broker-registration-form .required { color: var(--broker-accent, #11877f); } .broker-registration-form .optional { font-weight: 400; color: var(--broker-muted, var(--color-text-muted)); } .broker-registration-form .form-control { width: 100%; min-height: 2.875rem; padding: 0.7rem 0.95rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-control); font-size: 0.9375rem; color: var(--broker-ink, var(--color-text)); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .broker-registration-form .form-control:focus { outline: none; border-color: rgba(68, 93, 239, 0.5); box-shadow: 0 0 0 4px rgba(68, 93, 239, 0.12); } .broker-registration-form .form-control.is-invalid { border-color: rgba(239, 68, 68, 0.55); } .broker-registration-form .form-help { display: block; margin-top: 0.35rem; font-size: 0.75rem; color: var(--broker-muted, var(--color-text-muted)); } .broker-registration-form .invalid-feedback { display: none; margin-top: 0.35rem; font-size: 0.75rem; color: #b91c1c; } .broker-registration-form .form-control.is-invalid ~ .invalid-feedback { display: block; } .broker-registration-form .form-actions { margin: 0.75rem 0 0; } .broker-registration-form .btn-primary, .broker-registration-form .btn.btn-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; padding: 0 1.5rem; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; background: linear-gradient(135deg, var(--hm-accent, #445def), #5e7eff); color: var(--hm-accent-ink, #0b1028); font-family: var(--hm-font-display, inherit); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; box-shadow: 0 12px 30px rgba(68, 93, 239, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.32); transition: transform 0.3s var(--hm-ease, ease), box-shadow 0.3s var(--hm-ease, ease), opacity 0.2s ease; } .broker-registration-form .btn-primary:hover, .broker-registration-form .btn.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(68, 93, 239, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.36); } .broker-registration-form .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .broker-registration-form .form-notes { margin-top: 1rem; padding: 0.95rem 0 0; border-top: 1px solid var(--broker-line, var(--color-border-subtle)); background: transparent; border-radius: 0; } .broker-registration-form .form-notes p { display: block; margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--broker-muted, var(--color-text-muted)); } .broker-registration-form .alert { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--broker-line, var(--color-border-subtle)); background: var(--color-control); } .broker-registration-form .alert-success { border-color: rgba(68, 93, 239, 0.28); background: rgba(68, 93, 239, 0.08); color: var(--broker-ink, var(--color-text)); } .broker-registration-form .alert-error { border-color: rgba(239, 68, 68, 0.24); background: rgba(254, 226, 226, 0.45); color: #991b1b; } .broker-registration-form .alert-icon { flex-shrink: 0; color: var(--broker-accent, #11877f); } .broker-registration-form .alert-error .alert-icon { color: #b91c1c; } .broker-registration-form .alert-content h3 { margin: 0 0 0.35rem; font-size: 0.975rem; font-weight: 650; } .broker-registration-form .alert-content p { margin: 0 0 0.35rem; font-size: 0.8125rem; line-height: 1.5; } .broker-registration-form .alert-content p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .broker-form-grid { grid-template-columns: 1fr; } } .broker-country-mount { width: 100%; } .broker-registration-form .profile-country-field__trigger { width: 100%; min-height: 2.75rem; margin: 0; padding: 0.625rem 0.875rem; gap: 0.5rem; justify-content: space-between; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-control); color: var(--broker-ink, var(--color-text)); font-family: var(--sp-font); font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.01em; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .broker-registration-form .profile-country-field__trigger:hover { border-color: var(--color-border-strong, rgba(68, 93, 239, 0.35)); } .broker-registration-form .profile-country-field__picker.is-open .profile-country-field__trigger, .broker-registration-form .profile-country-field__trigger:focus-visible { outline: none; border-color: rgba(68, 93, 239, 0.45); box-shadow: 0 0 0 4px rgba(68, 93, 239, 0.12); } .broker-registration-form .profile-country-field.is-invalid .profile-country-field__trigger, .broker-registration-form .profile-country-field__trigger.is-invalid { border-color: rgba(239, 68, 68, 0.55); background: rgba(254, 226, 226, 0.35); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); } .broker-registration-form .profile-country-field__trigger .prebook-country-picker__trigger-label { color: var(--sp-label); font-size: 0.9375rem; } .broker-registration-form .profile-country-field__trigger.has-selection .prebook-country-picker__trigger-label, .broker-registration-form .profile-country-field__trigger .prebook-country-picker__trigger-label:not(.is-placeholder) { color: var(--broker-ink, var(--color-text)); } .broker-registration-form .profile-country-field__trigger .prebook-country-picker__chevron { color: var(--sp-label); font-size: 0.75rem; } .broker-registration-form .profile-country-field__trigger .prebook-country-picker__trigger-flag { width: 1.25rem; height: 1.25rem; } .broker-registration-form .profile-country-field__error { margin: 0.35rem 0 0; font-family: var(--sp-font); font-size: 0.75rem; color: #b91c1c; } body > .prebook-country-picker__menu { z-index: 10100; border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-surface-raised); box-shadow: var(--shadow-surface-lg); overflow: hidden; } body > .prebook-country-picker__menu .prebook-country-picker__search-wrap { background: var(--color-surface-raised); } body > .prebook-country-picker__menu .prebook-country-picker__search { background: var(--color-control); border-color: var(--color-border-subtle); color: var(--color-text); } body > .prebook-country-picker__menu .prebook-country-picker__options { background: var(--color-surface-raised); } body > .prebook-country-picker__menu .prebook-country-picker__option { color: var(--color-text); } body > .prebook-country-picker__menu .prebook-country-picker__option:hover, body > .prebook-country-picker__menu .prebook-country-picker__option:focus-visible { background: var(--color-control-hover); } .broker-page .prebook-country-picker__menu { z-index: 40; border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-surface-raised); box-shadow: var(--shadow-surface-lg); } .broker-page .prebook-country-picker__search { background: var(--color-control); border-color: var(--color-border-subtle); color: var(--broker-ink, var(--color-text)); } .broker-page .prebook-country-picker__option { color: var(--broker-ink, var(--color-text)); } @media (max-width: 640px) { .broker-registration-form .profile-country-field__trigger, .broker-registration-form .profile-country-field__trigger .prebook-country-picker__trigger-label { font-size: 1rem; } } main.about-page.content-page { --about-accent: #00bda5; --about-ink: var(--color-text, #1d1d1f); --about-muted: var(--color-text-muted, #727278); --about-line: var(--color-border-subtle, rgba(60, 60, 67, 0.16)); width: min(calc(100% - clamp(2rem, 5vw, 4.5rem)), 1180px); max-width: 1180px; margin: 0 auto; padding: 0 0 clamp(2.5rem, 5vw, 4.5rem) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } body.about-route main.about-page.content-page { --about-accent: #11877F; } :root[data-theme="dark"] body.about-route main.about-page.content-page { --about-accent: #49c8bf; } main.about-page .help-icon { display: none !important; } main.about-page .page-header { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin: 0; padding: clamp(2.25rem, 4vw, 3.25rem) 0; border-bottom: 1px solid var(--about-line); text-align: left; } main.about-page .page-title { margin: 0; color: var(--about-ink); max-width: 7ch; font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 640; line-height: 0.9; letter-spacing: -0.068em; } main.about-page .page-subtitle { max-width: 24rem; margin: 0; color: var(--about-muted); font-size: clamp(0.98rem, 1.35vw, 1.1rem); font-weight: 500; line-height: 1.45; } main.about-page .mission-box { margin: 0; padding: clamp(2.5rem, 4.5vw, 3.75rem) 0; border: 0; border-bottom: 1px solid var(--about-line); border-radius: 0; background: transparent; box-shadow: none; } main.about-page .mission-quote { max-width: 38ch; margin: 0 0 0 calc(10rem + clamp(2rem, 5vw, 4.5rem)); color: var(--about-ink); font-size: clamp(1.55rem, 2.8vw, 2.55rem); font-weight: 540; line-height: 1.16; letter-spacing: -0.038em; text-align: left; } main.about-page .features-section, main.about-page .tech-section, main.about-page .vision-section, main.about-page .legal-section, main.about-page .contact-section { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin: 0; padding: clamp(2.25rem, 4vw, 3.5rem) 0; border: 0; border-bottom: 1px solid var(--about-line); border-radius: 0; background: transparent; box-shadow: none; } main.about-page .section-title, main.about-page .vision-title { display: block; align-self: start; margin: 0; color: var(--about-muted); padding-top: 0.15rem; font-size: 0.72rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; } main.about-page .features-grid, main.about-page .advantages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--about-line); } main.about-page .feature-card, main.about-page .advantage-item { min-width: 0; margin: 0; padding: 1.25rem 1.2rem 1.3rem 0; border: 0; border-bottom: 1px solid var(--about-line); border-radius: 0; background: transparent; box-shadow: none; } main.about-page .feature-card:not(:nth-child(3n + 1)), main.about-page .advantage-item:not(:nth-child(3n + 1)) { padding-left: 1.2rem; border-left: 1px solid var(--about-line); } main.about-page .feature-title { min-height: 2.5rem; margin: 0 0 1rem; color: var(--about-ink); font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 630; line-height: 1.25; letter-spacing: -0.025em; } main.about-page .feature-description { color: var(--about-muted); } main.about-page .feature-list { display: block; margin: 0; padding: 0; list-style: none; } main.about-page .feature-list li { position: relative; margin: 0.5rem 0 0; padding-left: 0.85rem; color: var(--about-muted); font-size: 0.875rem; line-height: 1.48; } main.about-page .feature-list li::before { position: absolute; top: 0.65em; left: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--about-accent); content: ""; } main.about-page .advantage-item { display: flex; min-height: 4.4rem; align-items: center; } main.about-page .advantage-text { color: var(--about-ink); font-size: 0.94rem; font-weight: 600; letter-spacing: -0.015em; } main.about-page .tech-list { counter-reset: technology; margin: 0; padding: 0; border-top: 1px solid var(--about-line); list-style: none; } main.about-page .tech-list li { counter-increment: technology; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 3.65rem; margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--about-line); color: var(--about-ink); font-size: 0.94rem; } main.about-page .tech-list li::before { color: var(--about-accent); font-size: 0.65rem; font-weight: 700; content: counter(technology, decimal-leading-zero); } main.about-page .vision-text { max-width: 38ch; margin: 0; color: var(--about-ink); font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 540; line-height: 1.2; letter-spacing: -0.035em; text-align: left; } main.about-page .legal-content { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } main.about-page .legal-content p { max-width: 58rem; margin: 0; padding: 1rem 0; border-top: 1px solid var(--about-line); color: var(--about-muted); font-size: 0.94rem; line-height: 1.58; } main.about-page .legal-content p:last-child { border-bottom: 1px solid var(--about-line); } main.about-page .legal-content strong { color: var(--about-ink); font-weight: 630; } main.about-page a { color: var(--about-accent); text-underline-offset: 0.18em; } main.about-page .contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--about-line); } main.about-page .contact-item { display: block; min-height: 5.25rem; margin: 0; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--about-line); color: var(--about-muted); font-size: 0.84rem; line-height: 1.5; } main.about-page .contact-item:not(:first-child) { padding-left: 1rem; border-left: 1px solid var(--about-line); } main.about-page .contact-item a { display: block; margin-bottom: 0.35rem; color: var(--about-ink); font-size: 0.94rem; font-weight: 620; text-decoration: none; } main.about-page .contact-item > span:not(.help-icon) { color: var(--about-muted); } main.about-page .contact-section > .legal-content { grid-column: 2; } :root[data-theme="dark"] main.about-page .feature-card, :root[data-theme="dark"] main.about-page .advantage-item, :root[data-theme="dark"] main.about-page .features-section, :root[data-theme="dark"] main.about-page .tech-section, :root[data-theme="dark"] main.about-page .vision-section, :root[data-theme="dark"] main.about-page .legal-section, :root[data-theme="dark"] main.about-page .contact-section, :root[data-theme="dark"] main.about-page .legal-content, :root[data-theme="dark"] main.about-page .contact-item { background: transparent !important; } @media (max-width: 820px) { main.about-page .page-header, main.about-page .features-section, main.about-page .tech-section, main.about-page .vision-section, main.about-page .legal-section, main.about-page .contact-section { grid-template-columns: 1fr; } main.about-page .mission-quote { margin-left: 0; } main.about-page .features-grid, main.about-page .advantages-grid { grid-template-columns: 1fr; } main.about-page .feature-card:not(:nth-child(3n + 1)), main.about-page .advantage-item:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } main.about-page .contact-section > .legal-content { grid-column: 1; } } @media (max-width: 620px) { main.about-page.content-page { width: min(calc(100% - 2rem), 1160px); } main.about-page .page-title { font-size: clamp(3.6rem, 18vw, 5.5rem); } main.about-page .contact-grid { grid-template-columns: 1fr; } main.about-page .contact-item:not(:first-child) { padding-left: 0; border-left: 0; } } body.empty-leg-guide-route, body.scoring-route { --reference-accent: #11877f; --reference-ink: var(--color-text, #1d1d1f); --reference-muted: var(--color-text-muted, #727278); --reference-line: var(--color-border-subtle, rgba(60, 60, 67, 0.16)); background: var(--color-canvas-subtle); } :root[data-theme="dark"] body.empty-leg-guide-route, :root[data-theme="dark"] body.scoring-route { --reference-accent: #49c8bf; background: var(--color-canvas); } body.empty-leg-guide-route > .container:has(> .search-container), body.scoring-route > .container:has(> .search-container) { display: none; } body.empty-leg-guide-route > .content-page, body.scoring-route > .content-page { width: min(calc(100% - clamp(2rem, 5vw, 4.5rem)), 1240px); max-width: 1240px; margin: 0 auto; padding: 0 0 clamp(4rem, 8vw, 7rem); border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--reference-ink); } :root[data-theme="dark"] body.empty-leg-guide-route > .content-page, :root[data-theme="dark"] body.scoring-route > .content-page { background: transparent; box-shadow: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } body.empty-leg-guide-route .page-header, body.scoring-route .page-header { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; margin: 0; padding: clamp(3.25rem, 8vw, 7.5rem) 0 clamp(2.75rem, 6vw, 5rem); border-bottom: 1px solid var(--reference-line); text-align: left; } body.empty-leg-guide-route .page-title, body.scoring-route .page-title { max-width: 11ch; margin: 0; color: var(--reference-ink); font-size: clamp(4rem, 8.8vw, 8rem); font-weight: 520; line-height: 0.88; letter-spacing: -0.075em; } body.empty-leg-guide-route .page-subtitle, body.scoring-route .page-subtitle { max-width: 28rem; margin: 0 0 0.45rem; color: var(--reference-muted); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 400; line-height: 1.55; letter-spacing: -0.02em; } body.empty-leg-guide-route .legal-content { max-width: 850px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.empty-leg-guide-route .legal-content .section-title { display: block; margin: clamp(3.75rem, 8vw, 7rem) 0 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--reference-line); color: var(--reference-ink); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 540; line-height: 1.02; letter-spacing: -0.05em; text-align: left; } body.empty-leg-guide-route .legal-content > .section-title:first-child { margin-top: clamp(3rem, 6vw, 5rem); } body.empty-leg-guide-route .legal-content p, body.empty-leg-guide-route .legal-content li { color: var(--reference-muted); font-size: 1rem; line-height: 1.75; } body.empty-leg-guide-route .legal-content p { max-width: 47rem; margin: 0 0 1.35rem; } body.empty-leg-guide-route .legal-content strong { color: var(--reference-ink); font-weight: 630; } body.empty-leg-guide-route .legal-content ul, body.empty-leg-guide-route .legal-content ol { max-width: 47rem; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; } body.empty-leg-guide-route .legal-content ul { border-top: 1px solid var(--reference-line); } body.empty-leg-guide-route .legal-content ul li { position: relative; margin: 0; padding: 0.9rem 0 0.9rem 1.25rem; border-bottom: 1px solid var(--reference-line); } body.empty-leg-guide-route .legal-content ul li::before { position: absolute; top: 1.65rem; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--reference-accent); content: ""; } body.empty-leg-guide-route .legal-content ol { counter-reset: guide-step; border-top: 1px solid var(--reference-line); } body.empty-leg-guide-route .legal-content ol li { position: relative; counter-increment: guide-step; margin: 0; padding: 0.9rem 0 0.9rem 3.5rem; border-bottom: 1px solid var(--reference-line); } body.empty-leg-guide-route .legal-content ol li::before { position: absolute; top: 1.15rem; left: 0; color: var(--reference-accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.75; content: counter(guide-step, decimal-leading-zero); } body.empty-leg-guide-route .legal-content a:not(.hm-btn), body.scoring-route .content-page a:not(.hm-btn) { color: var(--reference-accent); text-underline-offset: 0.2em; } body.empty-leg-guide-route, body.scoring-route, body.about-route, body:has(.kh-faq-hub) { --hm-font-display: "Archivo", "Helvetica Neue", arial, sans-serif; --hm-accent: #445def; --hm-accent-ink: #0b1028; --hm-ease: cubic-bezier(0.22, 1, 0.36, 1); } body.empty-leg-guide-route a.hm-btn.hm-btn--primary, body.scoring-route a.hm-btn.hm-btn--primary, body.about-route a.hm-btn.hm-btn--primary, body:has(.kh-faq-hub) a.hm-btn.hm-btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(135deg, var(--hm-accent), #5e7eff); color: var(--hm-accent-ink); font-family: var(--hm-font-display); font-size: 1rem; font-weight: 600; font-stretch: 105%; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 12px 30px rgba(68, 93, 239, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32); transition: transform 0.35s var(--hm-ease), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.35s var(--hm-ease); } body.empty-leg-guide-route a.hm-btn.hm-btn--primary:hover, body.scoring-route a.hm-btn.hm-btn--primary:hover, body.about-route a.hm-btn.hm-btn--primary:hover, body:has(.kh-faq-hub) a.hm-btn.hm-btn--primary:hover { border-color: rgba(0, 0, 0, 0.12); background: linear-gradient(135deg, #5e7eff, var(--primary-hover, #5e7eff)); color: var(--hm-accent-ink); transform: translateY(-2px); box-shadow: 0 17px 36px rgba(68, 93, 239, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.38); } body.empty-leg-guide-route a.hm-btn.hm-btn--primary:active, body.scoring-route a.hm-btn.hm-btn--primary:active, body.about-route a.hm-btn.hm-btn--primary:active, body:has(.kh-faq-hub) a.hm-btn.hm-btn--primary:active { color: var(--hm-accent-ink); transform: translateY(0); box-shadow: 0 7px 18px rgba(68, 93, 239, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24); } body.empty-leg-guide-route a.hm-btn .hm-btn__glyph, body.scoring-route a.hm-btn .hm-btn__glyph, body.about-route a.hm-btn .hm-btn__glyph, body:has(.kh-faq-hub) a.hm-btn .hm-btn__glyph { position: relative; width: 22px; height: 1px; background: currentcolor; transition: width 0.35s var(--hm-ease); } body.empty-leg-guide-route a.hm-btn .hm-btn__glyph::after, body.scoring-route a.hm-btn .hm-btn__glyph::after, body.about-route a.hm-btn .hm-btn__glyph::after, body:has(.kh-faq-hub) a.hm-btn .hm-btn__glyph::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1px solid currentcolor; border-right: 1px solid currentcolor; transform: translateY(-50%) rotate(45deg); } body.empty-leg-guide-route a.hm-btn:hover .hm-btn__glyph, body.scoring-route a.hm-btn:hover .hm-btn__glyph, body.about-route a.hm-btn:hover .hm-btn__glyph, body:has(.kh-faq-hub) a.hm-btn:hover .hm-btn__glyph { width: 32px; } @media (max-width: 760px) { body.empty-leg-guide-route > .content-page, body.scoring-route > .content-page { width: min(calc(100% - 2rem), 1240px); } body.empty-leg-guide-route .page-header, body.scoring-route .page-header { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 3.5rem; } body.empty-leg-guide-route .page-title, body.scoring-route .page-title { font-size: clamp(3.7rem, 18vw, 6rem); } body.empty-leg-guide-route .legal-content { max-width: none; } } body.scoring-route .page-title { max-width: 12ch; font-size: clamp(3.7rem, 7.5vw, 7rem); } body.scoring-route .content-page .sp-icon { display: none; } body.scoring-route .scoring-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: clamp(3rem, 7vw, 6rem) 0 0 auto; max-width: 960px; border-top: 1px solid var(--reference-line); } body.scoring-route .score-card { display: grid; grid-template-columns: minmax(7rem, 0.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem) 0; border: 0; border-bottom: 1px solid var(--reference-line); border-radius: 0; background: transparent; box-shadow: none; transition: padding 180ms ease; } :root[data-theme="dark"] body.scoring-route .score-card, :root[data-theme="dark"] body.scoring-route .score-card:hover, :root[data-theme="dark"] body.scoring-route .factor-item, :root[data-theme="dark"] body.scoring-route .factors-section, :root[data-theme="dark"] body.scoring-route .disclaimer-section, :root[data-theme="dark"] body.scoring-route .disclaimer-content { background: transparent; box-shadow: none; } body.scoring-route .score-card:hover { padding-inline: 0.5rem; border-color: var(--reference-line); background: transparent; box-shadow: none; transform: none; } body.scoring-route .score-number { display: block; min-width: 0; height: auto; margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--reference-accent); font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: 520; font-variant-numeric: tabular-nums; line-height: 0.9; letter-spacing: -0.07em; } body.scoring-route .score-0, body.scoring-route .score-1 { --score-from: var(--reference-ink); --score-to: var(--reference-muted); } body.scoring-route .score-2-4 { --score-from: var(--status-cancelled); --score-to: var(--status-cancelled-border); } body.scoring-route .score-5-6 { --score-from: var(--status-warning); --score-to: var(--status-pending); } body.scoring-route .score-7-8 { --score-from: var(--status-pending); --score-mid: var(--status-pending); --score-to: var(--primary-green); } body.scoring-route .score-9, body.scoring-route .score-10 { --score-from: var(--primary-green-deep); --score-to: var(--primary-green); } body.scoring-route .score-card .score-number { color: var(--score-from); } @supports (background-clip: text) { body.scoring-route .score-card .score-number { background: linear-gradient( 135deg, var(--score-from) 0%, var(--score-mid, var(--score-to)) 48%, var(--score-to) 100% ); background-clip: text; color: transparent; } } body.scoring-route .score-content { display: grid; grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline; } body.scoring-route .score-label { color: var(--reference-ink); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.03em; } body.scoring-route .score-description { max-width: 34rem; color: var(--reference-muted); font-size: 0.92rem; line-height: 1.65; } body.scoring-route .factors-section, body.scoring-route .disclaimer-section { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); margin: 0; padding: clamp(3rem, 6vw, 5.5rem) 0; border: 0; border-bottom: 1px solid var(--reference-line); border-radius: 0; background: transparent; } body.scoring-route .content-page .section-title { display: block; align-self: start; margin: 0; padding: 0.15rem 0 0; color: var(--reference-accent); font-size: 0.7rem; font-weight: 700; line-height: 1.45; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; } body.scoring-route .factors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--reference-line); } body.scoring-route .factor-item { display: block; margin: 0; padding: 1rem 1rem 1rem 0; border: 0; border-bottom: 1px solid var(--reference-line); border-radius: 0; background: transparent; color: var(--reference-ink); font-size: 0.92rem; line-height: 1.45; } body.scoring-route .factor-item:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--reference-line); } body.scoring-route .disclaimer-content { max-width: 760px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--reference-muted); box-shadow: none; } body.scoring-route .disclaimer-content p, body.scoring-route .disclaimer-content li { color: var(--reference-muted); font-size: 0.95rem; line-height: 1.7; } body.scoring-route .disclaimer-content p { margin: 0 0 1.25rem; } body.scoring-route .disclaimer-content strong { color: var(--reference-ink); font-weight: 630; } body.scoring-route .disclaimer-content ul { margin: 1.25rem 0; padding: 0; border-top: 1px solid var(--reference-line); list-style: none; } body.scoring-route .disclaimer-content li { position: relative; margin: 0; padding: 0.85rem 0 0.85rem 1.2rem; border-bottom: 1px solid var(--reference-line); } body.scoring-route .disclaimer-content li::before { top: 1.55rem; width: 4px; height: 4px; background: var(--reference-accent); } @media (max-width: 760px) { body.scoring-route .score-card, body.scoring-route .score-content, body.scoring-route .factors-section, body.scoring-route .disclaimer-section { grid-template-columns: 1fr; } body.scoring-route .score-card, body.scoring-route .score-content { gap: 0.9rem; } body.scoring-route .factors-grid { grid-template-columns: 1fr; } body.scoring-route .factor-item:nth-child(even) { padding-left: 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { body.scoring-route .score-card { transition-duration: 0.01ms; } }