@import url("/assets/css/oneanother-global.css?v=1");

:root {
  --coral: #F07058;
  --coral-dark: #F07058;
  --coral-soft: #FFF0EC;
  --charcoal: #191919;
  --charcoal-2: #454846;
  --ink: #191919;
  --muted: #454846;
  --mist: #FBF8F5;
  --warm: #FFF0EC;
  --stone: #ECEDEA;
  --white: #FFFFFF;
  --line: rgba(25,25,25,.10);
  --shadow: 0 24px 70px rgba(25,25,25,.12);
  --radius-lg: 34px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --font: "Museo Sans Rounded", "Nunito Sans", "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Museo Sans Rounded", "Nunito Sans", "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--charcoal);
  background: var(--mist);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
button, input, select, textarea { font: inherit; accent-color: var(--coral); caret-color: var(--coral); }

.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.narrow { width: min(860px, 100%); margin: 0 auto; text-align: center; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid rgba(240,112,88,.42); outline-offset: 2px; }
::selection { background: var(--coral-soft); color: var(--charcoal); }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--charcoal); color: white; border-radius: 10px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  background: rgba(251,248,245,.88);
  border-bottom: 1px solid rgba(25,25,25,.07);
}
.nav-wrap { min-height: 118px; display: grid; grid-template-columns: 420px 1fr auto; gap: 24px; align-items: center; }
.brand img { width: 380px; height: 104px; object-fit: contain; object-position: left center; }
.nav { display: flex; justify-content: center; gap: 30px; font-size: .92rem; color: #454846; font-weight: 800; }
.nav a:hover { color: var(--coral-dark); }
.menu-button { display: none; appearance: none; -webkit-appearance: none; width: 46px; height: 46px; align-items: center; justify-content: center; background: rgba(240,112,88,.10); border: 1px solid rgba(240,112,88,.28); border-radius: 14px; padding: 0; color: var(--charcoal); font-size: 1.72rem; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(25,25,25,.06); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.menu-button:hover, .menu-button:focus-visible { background: rgba(240,112,88,.16); border-color: rgba(240,112,88,.48); color: var(--coral-dark); transform: translateY(-1px); outline: none; }
.mobile-nav { padding: 8px 20px 22px; background: var(--mist); border-top: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 10px 0; font-weight: 800; }
.mobile-nav a:active, .mobile-nav a:focus-visible { color: var(--coral-dark); font-weight: 900; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  color: white;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(240,112,88,.25);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.button:hover { transform: translateY(-2px); background: var(--coral-dark); box-shadow: 0 16px 34px rgba(240,112,88,.3); }
.button-small { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.button-full { width: 100%; }
.text-link { font-weight: 700; }
.text-link span { color: var(--coral); margin-left: 5px; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 100px;
  background:
    radial-gradient(circle at 77% 20%, rgba(240,112,88,.14), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, var(--mist) 72%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 68px; align-items: center; }
.eyebrow { display: inline-block; margin-bottom: 18px; color: var(--coral-dark); font-size: .79rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.hero h1, .section h2, .statement h2, .join-section h2 { margin: 0; letter-spacing: -.055em; line-height: .98; font-family: var(--font-heading); font-weight: 900; }
.hero h1 { font-size: clamp(3.7rem, 7.3vw, 6.5rem); max-width: 780px; }
.hero h1 span { color: var(--coral); }
.hero-lead { max-width: 680px; margin: 28px 0 32px; color: #454846; font-size: clamp(1.12rem, 1.9vw, 1.35rem); }
.section h3, .feature-card h3, .step h3, .choice-title, .price-intro { font-family: var(--font-heading); }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.hero-trust span { padding: 8px 12px; border-radius: 999px; background: white; border: 1px solid var(--line); color: #454846; font-size: .82rem; }

.hero-visual { position: relative; min-height: 610px; }
.phone { position: absolute; width: 330px; border-radius: 42px; border: 8px solid #191919; background: white; box-shadow: var(--shadow); overflow: hidden; }
.phone::before { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:92px; height:19px; background:#191919; border-radius: 0 0 14px 14px; z-index:5; }
.phone-front { right: 24px; top: 10px; min-height: 595px; transform: rotate(1.5deg); }
.phone-back { left: 8px; top: 100px; min-height: 470px; padding: 68px 20px 20px; transform: rotate(-5deg); background: #FFF0EC; }
.app-bar { height: 62px; display:flex; align-items:center; gap:8px; padding: 20px 18px 8px; font-size:.9rem; font-weight:800; }
.app-mark { color: var(--coral); font-size: 1.5rem; }
.verified-dot { margin-left:auto; width:24px; height:24px; display:grid; place-items:center; color:white; background:#454846; border-radius:50%; font-size:.72rem; }
.profile-photo { height: 220px; margin: 5px 14px 0; border-radius: 20px; background: #ECEDEA; position: relative; overflow:hidden; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-copy { padding: 16px 18px 8px; }
.profile-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.profile-title strong { font-size:1.2rem; }
.profile-title span { font-size:.68rem; color:#454846; background:#ECEDEA; padding:5px 8px; border-radius:999px; }
.profile-copy p, .intro-reason p { margin: 8px 0; font-size:.83rem; color:#454846; line-height:1.45; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chips span { background:#FBF8F5; color:#454846; padding:5px 8px; border-radius:999px; font-size:.68rem; }
.intro-reason { margin: 8px 14px; padding: 12px; border-radius:16px; background:#FFF0EC; border:1px solid rgba(240,112,88,.25); }
.intro-reason strong { font-size:.78rem; }
.say-hello { display:block; width:calc(100% - 28px); margin:12px 14px 18px; border:0; border-radius:999px; background:var(--coral); color:white; padding:12px; font-weight:800; }
.phone-topline { width:80px; height:8px; background:rgba(25,25,25,.15); border-radius:999px; margin:0 auto 28px; }
.mini-card { margin-bottom:15px; padding:18px; border-radius:20px; background:white; box-shadow:0 12px 30px rgba(25,25,25,.07); }
.mini-card strong, .mini-card small { display:block; }
.mini-card strong { margin:4px 0; font-size:.98rem; }
.mini-card small { color:#454846; }
.mini-label { text-transform:uppercase; letter-spacing:.08em; color:var(--coral-dark); font-size:.66rem; font-weight:800; }
.muted-card { margin-top:10px; opacity:.82; }
.halo { position:absolute; border-radius:50%; filter:blur(1px); }
.halo-one { width:430px; height:430px; right:-70px; top:50px; background:rgba(240,112,88,.08); }
.halo-two { width:280px; height:280px; left:30px; bottom:0; background:rgba(25,25,25,.035); }

.statement { padding: 78px 0; background: var(--charcoal); color: white; }
.statement-kicker { color: var(--coral-soft); text-transform: uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:800; }
.statement h2 { max-width: 980px; margin: 12px auto 0; font-size: clamp(2rem, 4.2vw, 4.2rem); }

.section { padding: 100px 0; }
.section.soft { background: white; }
.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:flex-end; margin-bottom:45px; }
.section-heading.compact { margin-bottom: 34px; }
.section-heading h2, .two-column h2, .pricing-grid h2 { font-size: clamp(2.4rem, 4.5vw, 4.4rem); }
.section-heading > p { max-width:520px; margin:0; color:var(--muted); font-size:1.05rem; }
.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.feature-card {
  position:relative;
  min-height:260px;
  padding:30px;
  border-radius:var(--radius-md);
  background:white;
  border:1px solid var(--line);
}
.feature-card:nth-child(odd) {
  background:var(--coral);
  color:white;
  border-color:var(--coral);
}
.feature-card:nth-child(even) {
  background:white;
  color:var(--charcoal);
  border-color:var(--line);
}
.feature-card:nth-child(odd) p { color:rgba(255,255,255,.86); }
.feature-card:nth-child(even) p { color:var(--muted); }
.feature-icon {
  position:absolute;
  top:24px;
  right:24px;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#FFF0EC;
  color:var(--coral-dark);
  font-weight:900;
  font-size:1.6rem;
}
.feature-card:nth-child(odd) .feature-icon {
  background:rgba(255,255,255,.18);
  color:white;
}
.feature-card h3 {
  min-height:64px;
  margin:0 86px 20px 0;
  display:flex;
  align-items:center;
  font-size:1.48rem;
  line-height:1.08;
  font-weight:900;
}
.feature-card p { margin:0; }

.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.step {
  position:relative;
  min-height:280px;
  padding:30px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:white;
  color:var(--charcoal);
}
.step:nth-child(odd) {
  background:var(--coral);
  color:white;
  border-color:var(--coral);
}
.step:nth-child(even) {
  background:white;
  color:var(--charcoal);
  border-color:var(--line);
}
.step-number {
  position:absolute;
  top:24px;
  right:24px;
  min-width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  color:var(--coral);
  font-size:2rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}
.step:nth-child(odd) .step-number { color:white; }
.step h3 {
  min-height:64px;
  margin:0 84px 20px 0;
  display:flex;
  align-items:center;
  font-size:1.48rem;
  line-height:1.08;
  font-weight:900;
}
.step p { margin:0; color:var(--muted); }
.step:nth-child(odd) p { color:rgba(255,255,255,.86); }

.two-column { display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:center; }
.large-copy { font-size:1.28rem; color:#454846; }
.choice-card { border-radius:var(--radius-lg); background:white; border:1px solid var(--line); padding:30px; box-shadow:0 24px 70px rgba(25,25,25,.07); }
.choice-title { display:block; font-weight:800; margin-bottom:16px; }
.choice-list { display:flex; flex-wrap:wrap; gap:9px; }
.choice-list span { padding:10px 13px; border-radius:999px; background:#FBF8F5; font-size:.84rem; }
.choice-list span.active { background:var(--coral); color:white; }
.choice-divider { height:1px; background:var(--line); margin:24px 0; }
.choice-meta { display:flex; justify-content:space-between; gap:20px; padding:8px 0; }
.choice-meta span { color:var(--muted); }

.dark { background:var(--charcoal); color:white; }
.eyebrow.light { color:var(--coral-soft); }
.dark p { color:#ECEDEA; }
.safety-grid { align-items:start; }
.safety-stack {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.safety-item {
  position:relative;
  min-height:230px;
  padding:30px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.12);
  background:var(--charcoal-2);
  color:white;
}
.safety-item:nth-child(odd) {
  background:var(--coral);
  border-color:var(--coral);
}
.safety-item:nth-child(even) {
  background:#191919;
  border-color:rgba(255,255,255,.12);
}
.safety-item > span {
  position:absolute;
  top:24px;
  right:24px;
  min-width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  color:var(--coral-soft);
  font-size:2rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}
.safety-item:nth-child(odd) > span { color:white; }
.safety-item strong,
.safety-item small { display:block; }
.safety-item strong {
  min-height:64px;
  margin:0 78px 20px 0;
  display:flex;
  align-items:center;
  font-family:var(--font-heading);
  font-size:1.42rem;
  line-height:1.08;
  font-weight:900;
}
.safety-item small {
  margin-top:0;
  color:#ECEDEA;
  font-size:.9rem;
  line-height:1.5;
}
.safety-item:nth-child(odd) small { color:rgba(255,255,255,.86); }
.disclaimer { margin-top:26px; padding:18px; border:1px solid rgba(255,255,255,.14); border-radius:16px; font-size:.82rem; }

.pin-section { background: linear-gradient(140deg,#FBF8F5,#FFF0EC); }
.pin-grid { min-height:430px; }
.pin-visual { position:relative; display:grid; place-items:center; }
.pin-scene { width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; border-radius:32px; box-shadow:0 26px 70px rgba(25,25,25,.16); }
.clean-list { list-style:none; padding:0; margin:24px 0 0; }
.clean-list li { position:relative; padding:10px 0 10px 26px; border-bottom:1px solid var(--line); }
.clean-list li::before { content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:900; }

.pricing-section { background:white; }
.pricing-grid { display:grid; grid-template-columns:1fr 460px; gap:100px; align-items:center; }
.price-card { border-radius:var(--radius-lg); background:var(--charcoal); color:white; padding:34px; box-shadow:var(--shadow); }
.price-intro { color:var(--coral-soft); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:800; }
.price { margin:10px 0 0; font-size:5.3rem; line-height:1; letter-spacing:-.07em; font-weight:900; }
.price-after { margin:7px 0 24px; color:#ECEDEA; }
.price-card ul { list-style:none; padding:0; margin:0 0 28px; }
.price-card li { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.price-card li::before { content:"✓"; margin-right:10px; color:var(--coral-soft); }

.join-section { padding: 0 0 100px; background:white; }
.join-card { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; padding:62px; border-radius:40px; background:linear-gradient(135deg,#FFF0EC,#FBF8F5); border:1px solid rgba(240,112,88,.2); }
.join-section h2 { font-size:clamp(2.5rem,4.6vw,4.6rem); }
.join-copy > p { max-width:650px; color:#454846; font-size:1.08rem; }
.founding-note { margin-top:26px; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.67); color:#454846; }
.waitlist { padding:26px; background:white; border-radius:26px; box-shadow:0 18px 50px rgba(25,25,25,.07); }
.waitlist label { display:block; margin-bottom:15px; }
.waitlist label span { display:block; margin-bottom:6px; color:#454846; font-size:.78rem; font-weight:800; }
.waitlist input { width:100%; height:50px; border:1px solid #ECEDEA; border-radius:13px; padding:0 14px; background:#FBF8F5; color:var(--charcoal); outline:none; }
.waitlist input:focus { border-color:var(--coral); box-shadow:0 0 0 4px rgba(240,112,88,.10); }
.form-note { margin:12px 0 0; font-size:.72rem; color:#454846; }
.form-success { margin-top:14px; padding:12px; border-radius:12px; background:#ECEDEA; color:#454846; font-size:.84rem; }

.site-footer { padding:50px 0; background:#FBF8F5; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:40px; align-items:start; }
.footer-brand img { width: 300px; height: 98px; object-fit: contain; object-position: left; }
.footer-links { display:grid; gap:8px; }
.footer-links a:hover { color:var(--coral-dark); }
.footer-meta { display:grid; gap:8px; justify-items:end; color:var(--muted); font-size:.88rem; }

@media (max-width: 980px) {
  .nav { display:none; }
  .nav-wrap { grid-template-columns: 1fr auto auto; }
  .brand img { width: 350px; height: 96px; }
  .menu-button { display:flex; }
  .hero-grid, .two-column, .pricing-grid, .join-card { grid-template-columns:1fr; }
  .hero { padding-top:58px; }
  .hero-visual { width:min(620px,100%); margin:0 auto; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .step { min-height:260px; }
  .pricing-grid { gap:40px; }
  .price-card { max-width:560px; }
  .join-card { padding:42px; }
}

@media (max-width: 680px) {
  .shell { width:min(100% - 28px,1180px); }
  .site-header .button-small { display:none; }
  .nav-wrap { min-height:88px; grid-template-columns:1fr auto; }
  .brand img { width: 300px; height: 82px; }
  .menu-button { width: 48px; height: 48px; font-size: 1.9rem; border-radius: 15px; }
  .hero { padding:44px 0 72px; }
  .hero h1 { font-size:clamp(3rem,15vw,4.4rem); }
  .hero-lead { margin-top:20px; }
  .hero-visual { min-height:500px; transform:scale(.86); transform-origin:top center; margin-bottom:-70px; }
  .phone { width:300px; }
  .phone-back { left:-10px; }
  .phone-front { right:-10px; }
  .section, .statement { padding:72px 0; }
  .feature-grid, .steps { grid-template-columns:1fr; }
  .feature-card { min-height:auto; padding:26px; }
  .feature-icon { top:20px; right:20px; width:58px; height:58px; border-radius:16px; font-size:1.45rem; }
  .feature-card h3 { min-height:58px; margin-right:78px; }
  .step { min-height:auto; padding:26px; }
  .step-number { top:20px; right:20px; min-width:58px; height:58px; font-size:1.8rem; }
  .step h3 { min-height:58px; margin:0 78px 18px 0; }
  .two-column { gap:42px; }
  .safety-stack { grid-template-columns:1fr; }
  .safety-item { min-height:210px; }
  .price { font-size:4.4rem; }
  .join-card { padding:28px 20px; border-radius:26px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-meta { justify-items:start; }
  .pin-face { transform:scale(.82) rotate(-5deg); }
}

@media (max-width: 380px) {
  .nav-wrap { gap: 12px; }
  .brand img { width: min(72vw, 245px); height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}