/* The marketing site, in one place.
 *
 * It used to be a single 350-line index.html with eight sections and eight
 * anchors. Splitting it into pages means the styles have to be shared, or the
 * fourth page quietly stops looking like the other three -- which is a thing
 * I have done before by copying markup and not the stylesheet.
 */
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #234; background: #f6faf6; }
.splash-wrap { max-width: 62rem; margin: 0 auto; padding: 0 1rem; }

/* nav */
.sp-nav { position: sticky; top: 0; background: rgba(246,250,246,0.95); backdrop-filter: blur(6px); border-bottom: 1px solid #dfe9df; z-index: 50; }
/* side padding 1rem: the shorthand used to zero .splash-wrap's gutter, so the
   logo and the menu button sat flush against the screen edges on a phone */
.sp-nav-inner { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; position: relative; }
.sp-nav-inner img { height: 2.2rem; }
.sp-nav-links { display: flex; gap: 1rem; margin-left: auto; font-size: 0.82rem; font-weight: 600; align-items: center; }
.sp-nav-links a { color: #456; text-decoration: none; }
.sp-nav-links a:hover { color: var(--cg-primary); }
.sp-nav-links a.here { color: var(--cg-primary); text-decoration: underline; text-underline-offset: 5px; }
.sp-signin { background: var(--cg-primary); color: #fff !important; padding: 0.45rem 1rem; border-radius: 999px; white-space: nowrap; text-decoration: none !important; }
.sp-burger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 0.4rem; min-width: 44px; min-height: 44px; }
.sp-burger span { display: block; width: 1.4rem; height: 2px; background: var(--cg-primary); margin: 4px 0; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.sp-nav.open .sp-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sp-nav.open .sp-burger span:nth-child(2) { opacity: 0; }
.sp-nav.open .sp-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 760px) {
    .sp-burger { display: block; }
    .sp-nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #dfe9df; flex-direction: column; align-items: stretch; gap: 0; padding: 0.4rem 1rem 0.7rem; box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
    .sp-nav.open .sp-nav-links { display: flex; }
    .sp-nav-links a { padding: 0.6rem 0.2rem; border-bottom: 1px solid #eef4ee; font-size: 0.92rem; }
    .sp-nav-links a:last-child { border-bottom: none; }
    .sp-nav-links .sp-signin { text-align: center; margin-top: 0.4rem; }
}

/* hero */
.hero { text-align: center; padding: 3.2rem 1rem 2.2rem; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 0.6rem; color: var(--cg-primary); }
.hero h1 em { font-style: normal; color: var(--cg-primary); }
.hero p { font-size: 1.02rem; color: #456; max-width: 40rem; margin: 0 auto 1.4rem; line-height: 1.6; }
.hero .cta { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.eyebrow { margin: 0 0 0.6rem; font: 700 0.82rem/1.3 -apple-system, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cg-primary); opacity: 0.85; }
.btn-hero { display: inline-block; background: var(--cg-primary); color: #fff; font-weight: 800; text-decoration: none; padding: 0.8rem 1.6rem; border-radius: 999px; font-size: 0.95rem; box-shadow: 0 4px 14px rgba(22,43,66,0.35); border: 2px solid transparent; cursor: pointer; }
.btn-hero.ghost { background: #fff; color: var(--cg-primary); border: 2px solid var(--cg-primary); box-shadow: none; }

/* sections */
.sp-section { padding: 2.2rem 0; }
.sp-section h2 { text-align: center; font-size: 1.5rem; color: var(--cg-primary); margin: 0 0 0.6rem; }
.sp-lede { text-align: center; color: #567; font-size: 0.9rem; max-width: 38rem; margin: 0 auto 1.4rem; line-height: 1.6; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; }
.feature { background: #fff; border: 1px solid #e2ece2; border-radius: 14px; padding: 1.1rem 1rem; text-align: center; box-shadow: 0 1px 5px rgba(0,0,0,0.04); }
.feature .ic { font-size: 1.8rem; }
.feature h3 { font-size: 0.92rem; color: var(--cg-primary); margin: 0.5rem 0 0.3rem; }
.feature p { font-size: 0.78rem; color: #567; line-height: 1.5; margin: 0; }

/* the three doors on the front page */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.door { display: block; background: #fff; border: 2px solid #e2ece2; border-radius: 16px; padding: 1.3rem 1.1rem; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.door:hover { border-color: var(--cg-primary); transform: translateY(-2px); }
.door .ic { font-size: 1.9rem; }
.door h3 { margin: 0.5rem 0 0.35rem; font-size: 1.02rem; color: var(--cg-primary); }
.door p { margin: 0 0 0.7rem; font-size: 0.82rem; color: #567; line-height: 1.55; }
.door .go { font-size: 0.78rem; font-weight: 800; color: var(--cg-primary); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; }
.plan { background: #fff; border: 2px solid #e2ece2; border-radius: 16px; padding: 1.2rem 1rem; text-align: center; position: relative; }
.plan.hot { border-color: var(--cg-primary); box-shadow: 0 6px 20px rgba(22,43,66,0.15); }
.plan .tag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--cg-primary); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; border-radius: 999px; padding: 0.15rem 0.7rem; white-space: nowrap; }
@media (max-width: 380px) { .plan .tag { letter-spacing: 0.03em; padding: 0.15rem 0.5rem; } }
.plan h3 { margin: 0.3rem 0 0.2rem; font-size: 1rem; color: var(--cg-primary); }
.plan .price { font-size: 1.9rem; font-weight: 900; color: var(--cg-primary); }
.plan .per { font-size: 0.68rem; color: #5f6977; }
.plan ul { list-style: none; padding: 0; margin: 0.7rem 0 0; font-size: 0.76rem; color: #456; line-height: 1.9; }

.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; }
.how div { background: #fff; border: 1px solid #e2ece2; border-radius: 12px; padding: 0.9rem; font-size: 0.8rem; color: #456; line-height: 1.5; }
.how b { display: block; color: var(--cg-primary); margin-bottom: 0.25rem; }

.faq { max-width: 44rem; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid #e2ece2; border-radius: 12px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.faq summary { font-weight: 700; font-size: 0.88rem; color: var(--cg-primary); cursor: pointer; }
.faq p { font-size: 0.82rem; color: #567; line-height: 1.6; margin: 0.5rem 0 0; }

.contact { text-align: center; background: var(--cg-primary); color: #d9ecd9; border-radius: 18px; padding: 1.8rem 1rem; margin: 1rem 0 2.5rem; }
.contact h2 { color: #fff; margin-top: 0; }
.contact a { color: var(--cg-accent); }
.contact input, .contact select, .contact textarea { padding: 0.8rem 1rem; border: 2px solid #d5e3d5; border-radius: 10px; font-size: 0.95rem; font-family: inherit; background: #fff; color: #234; }
/* The fields were 215px -- an <input>'s intrinsic size=20 width -- sitting
   in a 448px column, so the form looked like a narrow strip down the
   middle of a wide card. Say it explicitly instead of relying on the
   default stretch. */
.contact input, .contact select, .contact textarea { width: 100%; box-sizing: border-box; display: block; }
.contact input:focus, .contact select:focus, .contact textarea:focus {
    outline: none; border-color: var(--cg-accent, #c8a24a);
    box-shadow: 0 0 0 3px rgba(200,162,74,0.25); }
.contact textarea { min-height: 7rem; resize: vertical; }
/* .btn-hero paints var(--cg-primary) on a card that IS var(--cg-primary):
   dark on dark, so "Send message" rendered as bare bold text with no
   button around it. The stylesheet already has a light treatment for
   exactly this situation. */
.contact .btn-hero { background: #fff; color: var(--cg-primary);
    border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    width: 100%; }
.contact .btn-hero:hover { background: var(--cg-accent, #c8a24a);
    border-color: var(--cg-accent, #c8a24a); color: var(--cg-primary); }

.sp-foot { text-align: center; font-size: 0.72rem; color: #5f6977; padding: 1.4rem 0 2rem; }
.sp-foot a { color: var(--cg-primary); }
.sp-foot .social { display: flex; gap: 0.9rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.sp-foot .social a { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--cg-primary); color: #fff; text-decoration: none; }
.sp-foot nav { margin-top: 0.5rem; display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }


/* The form column. grid-template-columns is stated explicitly because a
   single implicit `auto` track, with the justify-content:flex-start that
   arrives from a global rule, sizes itself to its content and leaves the
   rest of the 28rem empty -- which is why the fields were 235px in a
   448px box and width:100% on them changed nothing. */
.contact-form { max-width: 28rem; margin: 1rem auto; display: grid;
    grid-template-columns: 1fr; gap: 0.7rem; text-align: left;
    justify-content: stretch; justify-items: stretch; }

/* The home page also loads the app bridge, which applies the APP's dark
 * mode (an invert filter) when the phone is in dark mode. On the marketing
 * page that left a light nav over a navy body, with the hero text at 2.4:1.
 * The marketing pages are light-only, like the rest of them. */
html.cgDark { background: #f6faf6 !important; }
html.cgDark body[data-page="splash"],
html.cgDark body[data-page="splash"] img,
html.cgDark body[data-page="splash"] video { filter: none !important; }