/* ==========================================================================
Design System
Premium editorial dating platform
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9.144,300;0,9.144,400;0,9.144,500;0,9.144,600;0,9.144,700;0,9.144,800;1,9.144,400;1,9.144,500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
/* Palette */
--hm-forest: #1f3b2e;
--hm-forest-deep: #15281f;
--hm-forest-soft: #2d4f3f;
--hm-cream: #f4ede0;
--hm-cream-warm: #ebe1ce;
--hm-paper: #fbf7ee;
--hm-terracotta: #d96b3f;
--hm-terracotta-deep: #b8552e;
--hm-clay: #e89a72;
--hm-ink: #1a1a17;
--hm-ink-soft: #4a4a44;
--hm-mist: #d8d2c4;
--hm-line: rgba(31, 59, 46, 0.12);
--hm-blue: #2a4d6e;
--hm-blue-deep: #1c374f;

/* Type */
--hm-display: 'Fraunces', 'Georgia', serif;
--hm-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

/* Effects */
--hm-shadow-sm: 0 2px 8px rgba(20, 30, 25, 0.06);
--hm-shadow-md: 0 12px 32px rgba(20, 30, 25, 0.10);
--hm-shadow-lg: 0 24px 60px rgba(20, 30, 25, 0.18);
--hm-radius-sm: 10px;
--hm-radius-md: 18px;
--hm-radius-lg: 28px;
--hm-radius-pill: 999px;

/* Layout */
--hm-container: 1200px;
--hm-container-wide: 1320px;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--hm-sans);
font-size: 16px;
line-height: 1.6;
color: var(--hm-ink);
background: var(--hm-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--hm-display);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0 0 0.5em 0;
color: var(--hm-forest-deep);
}
p { margin: 0 0 1em 0; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---------- Utility ---------- */

.hm-container {
width: 100%;
max-width: var(--hm-container);
margin: 0 auto;
padding: 0 24px;
min-width: 0;
}
.hm-container-wide {
width: 100%;
max-width: var(--hm-container-wide);
margin: 0 auto;
padding: 0 24px;
min-width: 0;
}
.hm-eyebrow {
display: inline-block;
font-family: var(--hm-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hm-terracotta);
margin-bottom: 16px;
}
.hm-section-title {
font-size: clamp(32px, 4vw, 52px);
font-weight: 400;
margin-bottom: 20px;
}
.hm-section-title em { font-style: italic; color: var(--hm-terracotta); font-weight: 400; }
.hm-section-lead {
font-size: 18px;
color: var(--hm-ink-soft);
max-width: 620px;
margin: 0 auto 48px;
text-align: center;
}

/* ---------- Buttons ---------- */

.hm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: var(--hm-radius-pill);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.hm-btn-primary {
background: var(--hm-terracotta);
color: #fff;
box-shadow: 0 8px 20px rgba(217, 107, 63, 0.28);
}
.hm-btn-primary:hover {
background: var(--hm-terracotta-deep);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(217, 107, 63, 0.36);
}
.hm-btn-ghost {
background: transparent;
color: var(--hm-forest-deep);
border: 1.5px solid var(--hm-forest-deep);
}
.hm-btn-ghost:hover {
background: var(--hm-forest-deep);
color: var(--hm-cream);
}
.hm-btn-ghost-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.6);
}
.hm-btn-ghost-light:hover {
background: #fff;
color: var(--hm-forest-deep);
}
.hm-btn-block { width: 100%; }
.hm-btn-lg { padding: 18px 36px; font-size: 16px; }

/* ==========================================================================
HEADER / NAVIGATION
========================================================================== */

.hm-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 24px 0;
}
.hm-header.hm-header-solid {
position: sticky;
background: var(--hm-paper);
border-bottom: 1px solid var(--hm-line);
}
.hm-nav {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-width: 0;
}
.hm-logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--hm-display);
font-weight: 600;
font-size: 24px;
color: #fff;
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
border-radius: 10px;
transition: opacity 0.2s ease, color 0.2s ease;
}
.hm-logo:hover {
opacity: 0.88;
}
.hm-logo:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
.hm-logo:focus:not(:focus-visible) {
outline: none;
}
.hm-header-solid .hm-logo,
.hm-header.hm-on-light .hm-logo { color: var(--hm-forest-deep); }
.hm-logo-mark {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hm-nav-links {
display: flex;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.hm-nav-links a {
color: #fff;
font-weight: 500;
font-size: 15px;
position: relative;
padding: 6px 0;
}
.hm-header-solid .hm-nav-links a,
.hm-header.hm-on-light .hm-nav-links a { color: var(--hm-forest-deep); }
.hm-nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--hm-terracotta);
transition: width 0.25s ease;
}
.hm-nav-links a:hover::after { width: 100%; }
.hm-nav-actions { display: flex; gap: 12px; align-items: center; }
.hm-nav-actions .hm-btn { padding: 10px 22px; font-size: 14px; }

.hm-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
width: 40px;
}
.hm-menu-toggle span {
width: 22px;
height: 2px;
background: #fff;
display: block;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hm-header-solid .hm-menu-toggle span,
.hm-header.hm-on-light .hm-menu-toggle span { background: var(--hm-forest-deep); }
.hm-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hm-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.hm-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hidden on desktop; shown via .is-open inside mobile breakpoint */
.hm-mobile-menu { display: none; }

/* ==========================================================================
HERO SECTION
========================================================================== */

.hm-hero {
position: relative;
min-height: 720px;
background: var(--hm-forest);
color: #fff;
overflow: hidden;
padding: 140px 0 100px;
}
.hm-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 75% 40%, rgba(232, 154, 114, 0.18) 0%, transparent 55%),
linear-gradient(120deg, var(--hm-forest-deep) 0%, var(--hm-forest) 50%, var(--hm-forest-soft) 100%);
z-index: 0;
}
.hm-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 60px;
align-items: center;
width: 100%;
min-width: 0;
}
.hm-hero-content { max-width: 580px; }
.hm-hero-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: var(--hm-radius-pill);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
margin-bottom: 28px;
backdrop-filter: blur(8px);
}
.hm-hero-tag-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--hm-clay);
box-shadow: 0 0 0 4px rgba(232, 154, 114, 0.25);
}
.hm-hero-title {
font-size: clamp(48px, 6.5vw, 88px);
font-weight: 400;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.0;
margin-bottom: 24px;
}
.hm-hero-title em {
font-style: italic;
color: var(--hm-clay);
font-weight: 400;
}
.hm-hero-sub {
font-size: 19px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
margin-bottom: 36px;
max-width: 480px;
}

.hm-hero-quiz {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(12px);
border-radius: var(--hm-radius-lg);
padding: 28px;
margin-bottom: 24px;
}
.hm-hero-quiz-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin-bottom: 16px;
}
.hm-hero-quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.hm-quiz-option {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: var(--hm-radius-md);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.hm-quiz-option:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); }
.hm-quiz-option input { display: none; }
.hm-quiz-radio {
width: 20px; height: 20px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.5);
position: relative;
flex-shrink: 0;
}
.hm-quiz-option input:checked + .hm-quiz-radio { border-color: var(--hm-clay); }
.hm-quiz-option input:checked + .hm-quiz-radio::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--hm-clay);
}
.hm-quiz-text { font-size: 15px; color: #fff; }

.hm-hero-visual {
position: relative;
min-height: 580px;
border-radius: var(--hm-radius-lg);
overflow: hidden;
max-width: 100%;
}
.hm-hero-img {
position: relative;
width: 100%;
height: 580px;
border-radius: var(--hm-radius-lg);
overflow: hidden;
background: linear-gradient(135deg, #d8c0a5 0%, #a08560 50%, #5a4a3c 100%);
box-shadow: var(--hm-shadow-lg);
}
.hm-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-trust-badge {
position: absolute;
bottom: 24px;
right: 12px;
background: var(--hm-paper);
color: var(--hm-forest-deep);
padding: 18px 22px;
border-radius: var(--hm-radius-md);
box-shadow: var(--hm-shadow-lg);
display: flex;
align-items: center;
gap: 14px;
max-width: 260px;
}
.hm-trust-badge-icon {
width: 44px; height: 44px;
background: var(--hm-terracotta);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--hm-display);
font-size: 20px;
flex-shrink: 0;
}
.hm-trust-badge-title { font-weight: 700; font-size: 14px; line-height: 1.2; margin-bottom: 2px; }
.hm-trust-badge-sub { font-size: 12px; color: var(--hm-ink-soft); line-height: 1.3; }

/* ==========================================================================
STATS STRIP
========================================================================== */

.hm-stats {
background: var(--hm-forest-deep);
padding: 56px 0;
color: #fff;
}
.hm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
align-items: center;
}
.hm-stat {
display: flex;
align-items: center;
gap: 20px;
padding: 0 12px;
border-right: 1px solid rgba(255,255,255,0.12);
}
.hm-stat:last-child { border-right: 0; }
.hm-stat-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(232, 154, 114, 0.18);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--hm-clay);
}
.hm-stat-text { line-height: 1.25; }
.hm-stat-title { font-family: var(--hm-display); font-size: 22px; color: #fff; margin-bottom: 4px; }
.hm-stat-sub { font-size: 13px; color: rgba(255,255,255,0.6); }

/* ==========================================================================
SUCCESS CARDS
========================================================================== */

.hm-section { padding: 100px 0; }
.hm-section-cream { background: var(--hm-cream); }
.hm-section-paper { background: var(--hm-paper); }

.hm-section-head {
text-align: center;
margin-bottom: 60px;
}
.hm-success-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.hm-success-card {
background: var(--hm-paper);
border-radius: var(--hm-radius-lg);
overflow: hidden;
box-shadow: var(--hm-shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hm-success-card:hover {
transform: translateY(-6px);
box-shadow: var(--hm-shadow-md);
}
.hm-success-img {
height: 280px;
position: relative;
overflow: hidden;
}
.hm-success-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-success-body { padding: 28px; }
.hm-success-tag {
display: inline-block;
font-size: 11px;
letter-spacing: 0.14em;
font-weight: 600;
text-transform: uppercase;
color: var(--hm-terracotta);
margin-bottom: 10px;
}
.hm-success-title {
font-family: var(--hm-display);
font-size: 24px;
color: var(--hm-forest-deep);
margin-bottom: 10px;
line-height: 1.15;
}
.hm-success-text {
font-size: 15px;
color: var(--hm-ink-soft);
margin: 0;
}

/* ==========================================================================
EXPERIENCE INTRO + VIDEO CARD
========================================================================== */

.hm-experience-card {
margin: 40px auto 0;
max-width: 760px;
background: var(--hm-forest);
border-radius: var(--hm-radius-lg);
padding: 48px 40px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: var(--hm-shadow-lg);
}
.hm-experience-media {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hm-experience-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-experience-card::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(31, 59, 46, 0.35) 0%, rgba(31, 59, 46, 0.82) 100%),
radial-gradient(circle at 80% 20%, rgba(232,154,114,0.25), transparent 50%),
radial-gradient(circle at 20% 80%, rgba(216,210,196,0.10), transparent 45%);
}
.hm-experience-logo {
position: relative;
z-index: 2;
font-family: var(--hm-display);
font-size: 30px;
font-weight: 500;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.hm-experience-title {
position: relative;
z-index: 2;
font-size: 44px;
color: #fff;
margin-bottom: 24px;
font-weight: 400;
}
.hm-play-btn {
position: relative;
z-index: 2;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--hm-terracotta);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 8px 24px rgba(217, 107, 63, 0.4);
transition: transform 0.3s ease;
}
.hm-play-btn:hover { transform: scale(1.08); }
.hm-experience-cite {
position: relative;
z-index: 2;
font-size: 12px;
color: rgba(255,255,255,0.55);
margin-top: 28px;
}

/* ==========================================================================
COMPATIBILITY SECTION
========================================================================== */

.hm-compat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.hm-compat-chart {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 440px;
margin: 0 auto;
}
.hm-compat-chart svg { width: 100%; height: 100%; }
.hm-compat-score {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--hm-paper);
border: 2px solid var(--hm-forest);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--hm-shadow-md);
}
.hm-compat-score-num {
font-family: var(--hm-display);
font-size: 44px;
color: var(--hm-forest-deep);
font-weight: 500;
line-height: 1;
}
.hm-compat-score-label {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hm-ink-soft);
margin-top: 4px;
text-align: center;
}
.hm-compat-text .hm-section-title { text-align: left; }
.hm-compat-text .hm-section-lead { text-align: left; margin: 0 0 32px; }

/* ==========================================================================
QUALITY SINGLES
========================================================================== */

.hm-quality-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.hm-quality-visual {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: center;
max-width: 100%;
}
.hm-quality-avatar {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
box-shadow: var(--hm-shadow-md);
flex-shrink: 0;
}
.hm-quality-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-quality-score {
width: 110px;
height: 110px;
border-radius: 50%;
background: var(--hm-paper);
border: 2px solid var(--hm-forest);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hm-quality-bars { margin-top: 32px; }
.hm-quality-bar { margin-bottom: 16px; }
.hm-quality-bar-label {
display: flex; justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: var(--hm-forest-deep);
margin-bottom: 6px;
}
.hm-quality-bar-track {
height: 8px;
background: var(--hm-mist);
border-radius: var(--hm-radius-pill);
overflow: hidden;
}
.hm-quality-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--hm-forest-soft), var(--hm-forest));
border-radius: var(--hm-radius-pill);
width: 0;
transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
SUPPORT STRIP
========================================================================== */

.hm-support {
background: linear-gradient(120deg, var(--hm-blue-deep), var(--hm-blue));
color: #fff;
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hm-support::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 50%, rgba(232,154,114,0.15), transparent 50%);
}
.hm-support-content { position: relative; }
.hm-support h2 {
color: #fff;
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
margin-bottom: 20px;
}
.hm-support p {
font-size: 18px;
color: rgba(255,255,255,0.78);
max-width: 600px;
margin: 0 auto 16px;
}
.hm-support-meta {
display: inline-block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hm-clay);
margin-bottom: 32px;
}

/* ==========================================================================
REAL STORIES
========================================================================== */

.hm-stories-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.hm-stories-collage {
position: relative;
height: 480px;
}
.hm-collage-img {
position: absolute;
border-radius: var(--hm-radius-md);
overflow: hidden;
box-shadow: var(--hm-shadow-md);
}
.hm-collage-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-collage-1 { top: 0; left: 0; width: 55%; height: 240px; }
.hm-collage-2 { top: 40px; right: 0; width: 42%; height: 200px; }
.hm-collage-3 { bottom: 0; left: 8%; width: 48%; height: 220px; }
.hm-collage-4 { bottom: 30px; right: 0; width: 44%; height: 230px; }

/* ==========================================================================
TRUSTED BRAND CALLOUT
========================================================================== */

.hm-trusted-callout {
background: var(--hm-forest);
color: #fff;
padding: 100px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hm-trusted-callout::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(232,154,114,0.16), transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(216,210,196,0.06), transparent 50%);
}
.hm-trusted-content { position: relative; max-width: 720px; margin: 0 auto; }
.hm-trusted-seal {
width: 100px; height: 100px;
margin: 0 auto 24px;
border-radius: 50%;
background: var(--hm-paper);
display: flex;
align-items: center;
justify-content: center;
color: var(--hm-forest-deep);
}
.hm-trusted-callout h2 {
color: #fff;
font-size: clamp(36px, 5vw, 56px);
margin-bottom: 20px;
font-weight: 400;
}
.hm-trusted-callout p {
font-size: 18px;
color: rgba(255,255,255,0.78);
margin-bottom: 36px;
}

/* ==========================================================================
DATING ADVICE CAROUSEL
========================================================================== */

.hm-advice-head {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 48px;
gap: 40px;
flex-wrap: wrap;
}
.hm-advice-head .hm-section-title { text-align: left; margin-bottom: 8px; }
.hm-advice-intro { max-width: 540px; }
.hm-advice-intro p { color: var(--hm-ink-soft); font-size: 16px; margin: 0; }
.hm-advice-nav { display: flex; gap: 10px; }
.hm-arrow-btn {
width: 48px; height: 48px;
border-radius: 50%;
border: 1.5px solid var(--hm-forest-deep);
background: transparent;
color: var(--hm-forest-deep);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;
}
.hm-arrow-btn:hover { background: var(--hm-forest-deep); color: var(--hm-cream); }
.hm-arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.hm-advice-track-wrap { overflow: hidden; max-width: 100%; min-width: 0; }
.hm-advice-track {
display: flex;
gap: 24px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 100%;
}
.hm-advice-card {
flex: 0 0 calc((100% - 48px) / 3);
background: var(--hm-paper);
border-radius: var(--hm-radius-lg);
overflow: hidden;
box-shadow: var(--hm-shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hm-advice-card:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-md); }
.hm-advice-img { height: 220px; overflow: hidden; }
.hm-advice-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-advice-body { padding: 24px; }
.hm-advice-meta {
display: flex; gap: 12px; align-items: center;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hm-terracotta);
font-weight: 600;
margin-bottom: 12px;
}
.hm-advice-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hm-mist); }
.hm-advice-title {
font-family: var(--hm-display);
font-size: 22px;
color: var(--hm-forest-deep);
margin-bottom: 12px;
line-height: 1.2;
}
.hm-advice-text {
font-size: 14px;
color: var(--hm-ink-soft);
margin: 0;
}

/* ==========================================================================
SEO CONTENT BLOCK
========================================================================== */

.hm-seo-content {
padding: 80px 0;
background: var(--hm-cream);
border-top: 1px solid var(--hm-line);
}
.hm-seo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.hm-seo-block h3 {
font-family: var(--hm-display);
font-size: 26px;
color: var(--hm-forest-deep);
margin-bottom: 12px;
}
.hm-seo-block p {
font-size: 14.5px;
line-height: 1.7;
color: var(--hm-ink-soft);
margin-bottom: 14px;
}
.hm-seo-block ol, .hm-seo-block ul {
font-size: 14.5px;
line-height: 1.7;
color: var(--hm-ink-soft);
padding-left: 20px;
margin-bottom: 14px;
}
.hm-seo-block li { margin-bottom: 6px; }

/* ==========================================================================
FOOTER
========================================================================== */

.hm-footer {
background: var(--hm-forest-deep);
color: rgba(255,255,255,0.7);
padding: 80px 0 32px;
}
.hm-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 56px;
}
.hm-footer-brand p {
font-size: 14px;
color: rgba(255,255,255,0.55);
margin: 16px 0 24px;
max-width: 280px;
}
.hm-footer-brand .hm-logo { color: #fff; margin-bottom: 0; }
.hm-footer-col h4 {
font-family: var(--hm-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hm-clay);
margin-bottom: 20px;
}
.hm-footer-col ul { list-style: none; padding: 0; margin: 0; }
.hm-footer-col li { margin-bottom: 12px; }
.hm-footer-col a {
color: rgba(255,255,255,0.7);
font-size: 14px;
transition: color 0.2s ease;
}
.hm-footer-col a:hover { color: var(--hm-clay); }
.hm-app-badges { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hm-app-badge {
padding: 10px 14px;
background: rgba(255,255,255,0.08);
border-radius: var(--hm-radius-sm);
font-size: 12px;
color: #fff;
display: inline-flex;
align-items: center;
gap: 8px;
}
.hm-footer-bottom {
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.10);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,0.4);
flex-wrap: wrap;
gap: 16px;
}
.hm-social { display: flex; gap: 12px; }
.hm-social a {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: #fff;
transition: background 0.2s ease;
}
.hm-social a:hover { background: var(--hm-terracotta); }

/* ==========================================================================
AUTH PAGES (login + register)
========================================================================== */

.hm-auth {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--hm-paper);
}
.hm-auth-form-side {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 80px;
}
.hm-auth-visual-side {
position: relative;
background-color: var(--hm-forest);
background-image: url('./img/couple3.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
}
.hm-auth-visual-side::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(232,154,114,0.22), transparent 50%),
radial-gradient(circle at 70% 70%, rgba(216,210,196,0.10), transparent 50%);
}
.hm-auth-visual-content {
position: relative;
z-index: 1;
text-align: center;
color: #fff;
max-width: 380px;
}
.hm-auth-visual-content h2 {
color: #fff;
font-size: 44px;
font-weight: 400;
margin-bottom: 16px;
line-height: 1.1;
}
.hm-auth-visual-content em { font-style: italic; color: var(--hm-clay); }
.hm-auth-visual-content p {
color: rgba(255,255,255,0.7);
font-size: 16px;
line-height: 1.5;
}
.hm-auth-quote {
margin-top: 36px;
padding: 24px;
background: rgba(255,255,255,0.06);
border-radius: var(--hm-radius-md);
border: 1px solid rgba(255,255,255,0.12);
text-align: left;
}
.hm-auth-quote-text {
font-family: var(--hm-display);
font-style: italic;
font-size: 17px;
line-height: 1.45;
color: #fff;
margin-bottom: 14px;
}
.hm-auth-quote-author {
font-size: 13px;
color: rgba(255,255,255,0.6);
}

.hm-auth-card { max-width: 440px; width: 100%; margin: 0 auto; }
.hm-auth-card .hm-logo { color: var(--hm-forest-deep); margin-bottom: 40px; }
.hm-auth-card h1 {
font-size: 38px;
font-weight: 400;
color: var(--hm-forest-deep);
margin-bottom: 8px;
}
.hm-auth-card > p {
color: var(--hm-ink-soft);
margin-bottom: 36px;
font-size: 16px;
}
.hm-field { margin-bottom: 18px; }
.hm-field label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--hm-forest-deep);
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.hm-field input {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--hm-line);
border-radius: var(--hm-radius-sm);
background: #fff;
font-size: 15px;
color: var(--hm-ink);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hm-field input:focus {
outline: none;
border-color: var(--hm-forest);
box-shadow: 0 0 0 3px rgba(31, 59, 46, 0.10);
}
.hm-field-error {
color: #b8552e;
font-size: 13px;
margin-top: 6px;
display: none;
}
.hm-field.has-error input { border-color: #b8552e; }
.hm-field.has-error .hm-field-error { display: block; }
.hm-auth-foot {
margin-top: 28px;
text-align: center;
font-size: 14px;
color: var(--hm-ink-soft);
}
.hm-auth-foot a { color: var(--hm-terracotta); font-weight: 600; }
.hm-auth-foot a:hover { color: var(--hm-terracotta-deep); }

/* ==========================================================================
PROFILES PAGE
========================================================================== */

.hm-profiles-page { background: var(--hm-paper); min-height: 100vh; }
.hm-profiles-header {
background: var(--hm-forest-deep);
color: #fff;
padding: 100px 0 60px;
position: relative;
overflow: hidden;
}
.hm-profiles-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 100%, rgba(232,154,114,0.18), transparent 60%);
z-index: 0;
pointer-events: none;
}
.hm-profiles-header > .hm-container {
position: relative;
z-index: 1;
}
.hm-profiles-header-content { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.hm-welcome {
font-family: var(--hm-display);
font-size: clamp(36px, 5vw, 52px);
color: #fff;
font-weight: 400;
margin: 0;
line-height: 1.1;
}
.hm-welcome em { font-style: italic; color: var(--hm-clay); }
.hm-welcome-sub {
color: rgba(255,255,255,0.7);
margin: 12px 0 0;
font-size: 16px;
max-width: 480px;
}
.hm-logout {
padding: 12px 24px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--hm-radius-pill);
color: #fff;
font-weight: 600;
font-size: 14px;
transition: background 0.2s ease;
}
.hm-logout:hover { background: rgba(255,255,255,0.2); }

.hm-profiles-section { padding: 60px 0 100px; }
.hm-profiles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 28px;
}
.hm-profile-card {
background: #fff;
border-radius: var(--hm-radius-lg);
overflow: hidden;
box-shadow: var(--hm-shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.hm-profile-card:hover { transform: translateY(-6px); box-shadow: var(--hm-shadow-md); }
.hm-profile-photo {
height: 320px;
position: relative;
overflow: hidden;
}
.hm-profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-profile-match {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
padding: 8px 14px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(6px);
border-radius: var(--hm-radius-pill);
font-size: 13px;
font-weight: 700;
color: var(--hm-forest-deep);
}
.hm-profile-match-pct { color: var(--hm-terracotta); }
.hm-profile-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.hm-profile-name {
font-family: var(--hm-display);
font-size: 24px;
color: var(--hm-forest-deep);
margin-bottom: 4px;
font-weight: 500;
}
.hm-profile-meta {
font-size: 14px;
color: var(--hm-ink-soft);
margin-bottom: 14px;
}
.hm-profile-meta span { color: var(--hm-terracotta); margin: 0 8px; }
.hm-profile-bio {
font-size: 14px;
color: var(--hm-ink-soft);
line-height: 1.55;
margin-bottom: 16px;
}
.hm-profile-interests {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.hm-interest {
padding: 5px 12px;
background: var(--hm-cream);
color: var(--hm-forest-deep);
border-radius: var(--hm-radius-pill);
font-size: 12px;
font-weight: 500;
}
.hm-profile-card .hm-btn { margin-top: auto; }

/* ==========================================================================
CHAT MODAL
========================================================================== */

.hm-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 30, 25, 0.55);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 20px;
}
.hm-modal-backdrop.is-active { display: flex; }
.hm-chat-modal {
background: var(--hm-paper);
border-radius: var(--hm-radius-lg);
width: 100%;
max-width: 460px;
height: 640px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: var(--hm-shadow-lg);
overflow: hidden;
animation: hm-modal-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes hm-modal-in {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hm-chat-header {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: var(--hm-forest);
color: #fff;
}
.hm-chat-avatar {
width: 46px; height: 46px;
border-radius: 50%;
overflow: hidden;
background: var(--hm-clay);
flex-shrink: 0;
}
.hm-chat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-chat-name {
font-family: var(--hm-display);
font-size: 18px;
font-weight: 500;
margin: 0;
color: #fff;
}
.hm-chat-status {
font-size: 12px;
color: rgba(255,255,255,0.7);
display: flex;
align-items: center;
gap: 6px;
margin: 2px 0 0;
}
.hm-chat-status::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: #6ed186;
}
.hm-chat-close {
margin-left: auto;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.hm-chat-close:hover { background: rgba(255,255,255,0.22); }
.hm-chat-notice {
background: rgba(217, 107, 63, 0.10);
color: var(--hm-terracotta-deep);
border-bottom: 1px solid rgba(217, 107, 63, 0.18);
padding: 12px 18px;
font-size: 12.5px;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: 500;
}
.hm-chat-notice svg { flex-shrink: 0; margin-top: 2px; }
.hm-chat-body {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--hm-paper);
}
.hm-msg {
max-width: 78%;
padding: 10px 14px;
border-radius: 18px;
font-size: 14.5px;
line-height: 1.4;
word-wrap: break-word;
}
.hm-msg-them {
background: #fff;
color: var(--hm-ink);
border-bottom-left-radius: 4px;
align-self: flex-start;
box-shadow: var(--hm-shadow-sm);
}
.hm-msg-me {
background: var(--hm-forest);
color: #fff;
border-bottom-right-radius: 4px;
align-self: flex-end;
}
.hm-msg-time {
font-size: 11px;
color: var(--hm-ink-soft);
margin: -4px 6px 0;
align-self: center;
}
.hm-chat-input-row {
display: flex;
gap: 8px;
padding: 14px 16px;
background: #fff;
border-top: 1px solid var(--hm-line);
}
.hm-chat-input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--hm-line);
border-radius: var(--hm-radius-pill);
font-size: 14px;
background: var(--hm-paper);
}
.hm-chat-input:focus { outline: none; border-color: var(--hm-forest); }
.hm-chat-send {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--hm-terracotta);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.hm-chat-send:hover { background: var(--hm-terracotta-deep); }

.hm-typing {
align-self: flex-start;
background: #fff;
padding: 12px 16px;
border-radius: 18px;
border-bottom-left-radius: 4px;
box-shadow: var(--hm-shadow-sm);
display: flex;
gap: 4px;
}
.hm-typing span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--hm-ink-soft);
animation: hm-bounce 1.4s infinite ease-in-out;
}
.hm-typing span:nth-child(2) { animation-delay: 0.15s; }
.hm-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hm-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-6px); opacity: 1; }
}

/* ==========================================================================
INFO MODAL (demo confirmations)
========================================================================== */

.hm-info-modal {
background: #fff;
border-radius: var(--hm-radius-lg);
max-width: 380px;
width: 100%;
padding: 36px 32px;
text-align: center;
box-shadow: var(--hm-shadow-lg);
animation: hm-modal-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hm-info-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(110, 209, 134, 0.18);
color: #2e7d44;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.hm-info-title {
font-family: var(--hm-display);
font-size: 24px;
color: var(--hm-forest-deep);
margin-bottom: 10px;
}
.hm-info-text {
font-size: 15px;
color: var(--hm-ink-soft);
margin-bottom: 24px;
}

/* ==========================================================================
STATIC CONTENT PAGES (legal, about, contact, safety)
========================================================================== */

.hm-page-header {
background: var(--hm-forest);
color: #fff;
padding: 140px 0 80px;
position: relative;
overflow: hidden;
}
.hm-page-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 30%, rgba(232,154,114,0.18), transparent 55%);
}
.hm-page-header-content { position: relative; text-align: center; max-width: 760px; margin: 0 auto; }
.hm-page-header h1 {
color: #fff;
font-size: clamp(40px, 5.5vw, 64px);
font-weight: 400;
margin-bottom: 16px;
}
.hm-page-header h1 em { font-style: italic; color: var(--hm-clay); }
.hm-page-header p {
color: rgba(255,255,255,0.78);
font-size: 18px;
margin: 0;
}
.hm-page-header .hm-safety-byline {
font-size: 15px;
color: rgba(255,255,255,0.72);
margin-top: 8px;
}
.hm-page-body { padding: 80px 0 100px; }

/* Terms — PDF viewer + full extracted text */
.hm-terms-printline { margin-top: 8px; }
.hm-terms-printline .hm-btn { text-decoration: none; }
.hm-terms-lead {
max-width: 900px;
margin: 0 auto 24px;
text-align: center;
color: var(--hm-ink-soft);
font-size: 15px;
}
.hm-terms-pdf-wrap {
width: 100%;
max-width: 100%;
margin: 0 auto 48px;
border-radius: var(--hm-radius-md);
overflow: hidden;
box-shadow: var(--hm-shadow-md);
background: var(--hm-mist);
min-height: 720px;
}
.hm-terms-pdf {
display: block;
width: 100%;
max-width: 100%;
min-height: 85vh;
border: 0;
}
.hm-terms-text-heading {
font-family: var(--hm-display);
font-size: 28px;
color: var(--hm-forest-deep);
margin: 48px auto 20px;
max-width: 900px;
text-align: center;
font-weight: 500;
}
.hm-terms-prose > .hm-terms-text-heading:first-of-type {
margin-top: 28px;
}
.hm-terms-prose > .hm-terms-pre + .hm-terms-text-heading {
margin-top: 36px;
}
.hm-terms-prose > .hm-terms-text-heading + .hm-terms-pre {
margin-top: 0;
}
.hm-terms-prose {
max-width: 900px;
width: 100%;
margin: 0 auto;
min-width: 0;
}
.hm-terms-pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
min-width: 0;
background: var(--hm-paper);
border: 1px solid var(--hm-line);
border-radius: var(--hm-radius-md);
padding: 24px;
margin: 0;
color: var(--hm-ink);
}

.hm-prose {
max-width: 760px;
width: 100%;
min-width: 0;
margin: 0 auto;
font-size: 16px;
line-height: 1.75;
color: var(--hm-ink-soft);
}
.hm-prose h2 {
font-family: var(--hm-display);
font-size: 32px;
color: var(--hm-forest-deep);
margin: 48px 0 16px;
font-weight: 500;
}
.hm-prose h3 {
font-family: var(--hm-display);
font-size: 22px;
color: var(--hm-forest-deep);
margin: 32px 0 12px;
font-weight: 500;
}
.hm-prose p { margin-bottom: 16px; }
.hm-prose ul, .hm-prose ol { margin-bottom: 16px; padding-left: 24px; }
.hm-prose li { margin-bottom: 8px; }
.hm-prose strong { color: var(--hm-forest-deep); font-weight: 600; }

/* Safety highlights */
.hm-safety-rules {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 32px 0 48px;
}
.hm-safety-rule {
padding: 24px;
background: var(--hm-cream);
border-radius: var(--hm-radius-md);
border-left: 4px solid var(--hm-terracotta);
}
.hm-safety-rule h3 {
font-family: var(--hm-display);
font-size: 20px;
color: var(--hm-forest-deep);
margin: 0 0 8px;
font-weight: 500;
}
.hm-safety-rule p {
font-size: 14.5px;
color: var(--hm-ink-soft);
margin: 0;
line-height: 1.55;
}

/* Contact */
.hm-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
max-width: 1000px;
width: 100%;
min-width: 0;
margin: 0 auto;
}
.hm-contact-info h3 {
font-family: var(--hm-display);
font-size: 26px;
color: var(--hm-forest-deep);
margin-bottom: 16px;
font-weight: 500;
}
.hm-contact-method {
display: flex;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--hm-line);
}
.hm-contact-method:last-child { border-bottom: 0; }
.hm-contact-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--hm-cream);
color: var(--hm-forest);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hm-contact-method strong {
display: block;
color: var(--hm-forest-deep);
margin-bottom: 4px;
}
.hm-contact-method span {
font-size: 14px;
color: var(--hm-ink-soft);
}
.hm-contact-form {
background: var(--hm-cream);
padding: 36px;
border-radius: var(--hm-radius-lg);
}
.hm-contact-form textarea {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--hm-line);
border-radius: var(--hm-radius-sm);
background: #fff;
font-size: 15px;
min-height: 120px;
resize: vertical;
font-family: inherit;
color: var(--hm-ink);
}
.hm-contact-form textarea:focus {
outline: none;
border-color: var(--hm-forest);
box-shadow: 0 0 0 3px rgba(31, 59, 46, 0.10);
}

/* ==========================================================================
RESPONSIVE
========================================================================== */

@media (max-width: 1024px) {
.hm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hm-hero-visual { max-width: 520px; margin: 0 auto; }
.hm-compat-grid, .hm-quality-grid, .hm-stories-grid { grid-template-columns: 1fr; gap: 50px; }
.hm-success-grid { grid-template-columns: 1fr 1fr; }
.hm-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.hm-footer-brand { grid-column: 1 / -1; }
.hm-stories-collage { height: 420px; }
.hm-auth { grid-template-columns: 1fr; }
.hm-auth-visual-side { display: none; }
.hm-auth-form-side { padding: 40px 24px; }
.hm-advice-card { flex: 0 0 calc((100% - 24px) / 2); }
.hm-seo-grid, .hm-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
.hm-nav-links { display: none; }
.hm-menu-toggle { display: flex; }
.hm-nav { gap: 16px; }
.hm-mobile-menu {
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--hm-paper);
box-shadow: var(--hm-shadow-md);
padding: 24px;
display: none;
flex-direction: column;
gap: 16px;
border-radius: 0 0 var(--hm-radius-md) var(--hm-radius-md);
}
.hm-mobile-menu.is-open { display: flex; }
.hm-mobile-menu a { color: var(--hm-forest-deep); font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--hm-line); }
.hm-mobile-menu a:last-of-type { border-bottom: 0; }
.hm-nav-actions .hm-btn-ghost-light,
.hm-nav-actions .hm-btn-ghost { display: none; }

.hm-hero { padding: 120px 0 80px; min-height: auto; }
.hm-hero-img { height: 420px; }
.hm-section { padding: 70px 0; }
.hm-stats-grid { grid-template-columns: 1fr; gap: 24px; }
.hm-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 24px; }
.hm-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.hm-success-grid { grid-template-columns: 1fr; }
.hm-advice-card { flex: 0 0 100%; }
.hm-footer-grid { grid-template-columns: 1fr 1fr; }
.hm-stories-collage { height: 380px; }
.hm-safety-rules { grid-template-columns: 1fr; }
.hm-profile-photo { height: 280px; }
.hm-experience-card { padding: 36px 24px; }
.hm-experience-title { font-size: 32px; }
.hm-trust-badge { right: 12px; bottom: 16px; }
.hm-auth-form-side { padding: 32px 20px; }
.hm-profiles-header { padding: 100px 0 50px; }
}

@media (max-width: 480px) {
.hm-container,
.hm-container-wide { padding-left: 16px; padding-right: 16px; }
.hm-footer-grid { grid-template-columns: 1fr; }
.hm-advice-head { flex-direction: column; align-items: flex-start; }
.hm-stories-collage { height: 340px; }
.hm-terms-text-heading { font-size: 22px; margin-left: 0; margin-right: 0; }
.hm-terms-pre { padding: 16px; font-size: 11px; }
.hm-terms-pdf-wrap { min-height: 50vh; border-radius: var(--hm-radius-sm); }
.hm-terms-pdf { min-height: 50vh; }
}