:root {
  --ink: #1a1a1a;
  --surface: #222222;
  --surface-2: #292929;
  --line: #404040;
  --text: #ffffff;
  --muted: #d3d2d7;
  --orange: #ff5322;
  --orange-2: #ff4727;
  --max: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Kanit, Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}
.home-page h1,
.home-page h2,
.home-page h3 {
  font-family: Kanit, Arial, sans-serif;
}
.home-page .hero h1 { letter-spacing: .01em; }
.home-page h1 { font-weight: 500; }
.home-page h2 { font-weight: 500; }
.home-page h3 { font-weight: 500; }
body::before {
  background: radial-gradient(circle, rgba(255,83,34,.22) 0, transparent 68%);
  content: "";
  height: 620px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -350px;
  transform: translateX(-50%);
  width: min(100%, 1000px);
}
a { color: inherit; }
img, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip-link { background: var(--orange); left: 1rem; padding: .6rem 1rem; position: fixed; top: -5rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
.container { margin-inline: auto; max-width: var(--max); padding-inline: 24px; }
.site-header { backdrop-filter: blur(18px); background: rgba(26,26,26,.88); border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; z-index: 20; }
.nav { align-items: center; display: flex; min-height: 76px; gap: 28px; }
.brand { align-items: center; display: inline-flex; font-size: 1.45rem; font-weight: 600; gap: 10px; letter-spacing: 0; text-decoration: none; }
.brand-logo { height: auto; width: 176px; }
.nav-menu { align-items: center; display: flex; gap: 28px; margin-left: auto; }
.nav-menu a, .nav-menu summary { color: var(--muted); cursor: pointer; font-size: .88rem; font-weight: 400; list-style: none; text-decoration: none; }
.nav-menu a:hover, .nav-menu summary:hover { color: var(--orange); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: " +"; color: var(--orange); }
.nav-menu details { position: relative; }
.dropdown { background: #202020; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.45); display: grid; gap: 2px; left: 50%; min-width: 290px; padding: 10px; position: absolute; top: 36px; transform: translateX(-50%); }
.dropdown a { border-radius: 10px; padding: 8px 12px; }
.dropdown a:hover { background: var(--surface-2); }
.nav-cta { margin-left: 0 !important; }
.menu-toggle { background: none; border: 0; color: white; display: none; font-size: 1.5rem; margin-left: auto; padding: 8px; }
.button { align-items: center; background: linear-gradient(90deg,var(--orange),var(--orange-2)); border: 0; border-radius: 999px; color: #fff !important; display: inline-flex; font-size: .9rem; font-weight: 500; justify-content: center; line-height: 1.2; padding: 15px 24px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.button:hover { box-shadow: 0 10px 30px rgba(255,83,34,.28); transform: translateY(-2px); }
.button-small { padding: 11px 18px; }
.button-ghost { background: transparent; border: 1px solid var(--line); }
.eyebrow { color: var(--orange); font-size: .72rem; font-weight: 600; letter-spacing: .18em; margin: 0 0 16px; text-transform: uppercase; }
.hero { overflow: hidden; padding: 110px 0 72px; text-align: left; }
.hero h1 { font-size: clamp(2.35rem,5vw,4rem); font-weight: 600; letter-spacing: .01em; line-height: 1.08; margin: 0; max-width: 900px; text-wrap: balance; }
.title-nowrap { white-space: nowrap; }
.hero-subtitle-group { margin: 28px 0 24px !important; max-width: 820px; }
.home-page .hero-subtitle-group { margin: 4px 0 24px !important; max-width: 720px; }
.hero-support-title,
.hero-audience { display: block; }
.hero-support-title { color: var(--muted); display: block; font-size: clamp(1.35rem,2.3vw,1.8rem); font-weight: 500; letter-spacing: .02em; line-height: 1.2; margin-top: 13px; }
.hero-verticals { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px auto 0; max-width: 820px; }
.hero-vertical { border: 1px solid rgba(255,83,34,.55); border-radius: 999px; color: var(--text); font-size: clamp(.9rem,1.4vw,1rem); font-weight: 400; letter-spacing: .01em; line-height: 1; padding: 8px 13px; }
.hero p.hero-audience { color: var(--text); font-size: clamp(.95rem,1.5vw,1.15rem); line-height: 1.3; margin: 0; white-space: normal; }
.hero p:not(.eyebrow) { color: var(--muted); font-size: clamp(1.05rem,2vw,1.35rem); margin: 28px 0; max-width: 820px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
.hero-contact-prompt { color: var(--muted); flex-basis: 100%; font-size: 1rem; line-height: 1.45; max-width: 760px; }
.contact-hero-phone { color: var(--text) !important; }
.contact-top-block { margin: 0 auto; max-width: 820px; text-align: left; }
.contact-top-block h2 { font-size: clamp(2rem,4vw,3.7rem); font-weight: 500; line-height: 1.08; margin: 0 0 20px; text-wrap: balance; }
.contact-top-block > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; margin: 0 0 28px; max-width: 700px; }
.contact-top-block .contact-primary-actions { justify-content: flex-start; }
.contact-intro-block { border-top: 1px solid var(--line); margin: 88px auto 0; max-width: 900px; padding-top: 54px; text-align: right; }
.contact-intro-section .contact-intro-block { margin-top: 0; }
.contact-intro-block h1 { margin-left: auto; margin-right: 0; }
.contact-intro-block > p:not(.eyebrow) { margin-left: auto; margin-right: 0; }
.hero-trust { color: #888; font-size: 0.72rem; line-height: 1; margin: 0; }
.trial-trust { color: #888; font-size: 0.72rem; line-height: 1; margin: 0; }
.hero-product-shot { margin: 62px auto 0; max-width: 1080px; }
.hero-product-shot img { border: 1px solid #42464d; border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.35); height: auto; width: 100%; }
.hero-product-shot figcaption { color: #999; font-size: .78rem; margin-top: 12px; }
.hero-benefits { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 58px auto 0; max-width: 960px; text-align: left; }
.hero-benefit { background: rgba(34,34,34,.82); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.hero-benefit h2 { color: var(--orange); font-size: 1rem; font-weight: 500; line-height: 1.2; margin: 0 0 8px; }
.hero-benefit ul { color: var(--muted); font-size: .82rem; line-height: 1.4; list-style: none; margin: 0; padding: 0; }
.hero-benefit li { padding-left: 16px; position: relative; }
.hero-benefit li::before { color: var(--orange); content: "•"; left: 0; position: absolute; }
.trust-note { color: #999; font-size: .78rem; }
.video-section { padding: 40px 0 110px; }
.video-frame { aspect-ratio: 16/9; background: #111; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; position: relative; }
.video-frame iframe { border: 0; height: 100%; width: 100%; }
.video-label { color: var(--orange); font-size: .75rem; font-weight: 500; letter-spacing: .14em; margin-bottom: 14px; text-align: center; text-transform: uppercase; }
.section { padding: 100px 0; }
.section-alt { background: #141414; border-block: 1px solid #272727; }
.section-head { margin-bottom: 50px; max-width: 760px; }
.section-head h2, .copy h2 { font-size: clamp(2rem,4vw,3.7rem); font-weight: 500; letter-spacing: 0; line-height: 1.08; margin: 0 0 20px; text-wrap: balance; }
.section-head p, .copy p { color: var(--muted); }
.split { align-items: start; display: grid; gap: 70px; grid-template-columns: .8fr 1.2fr; }
.split .kicker { color: var(--orange); font-size: 1rem; font-weight: 500; position: sticky; top: 120px; }
.copy > :first-child { margin-top: 0; }
.copy p { font-size: 1.08rem; }
.cards { display: grid; gap: 18px; grid-template-columns: repeat(3,1fr); }
.card { background: linear-gradient(145deg,#292929,#202020); border: 1px solid var(--line); border-radius: 18px; min-height: 280px; padding: 28px; }
.card-num { color: var(--orange); display: block; font-family: monospace; font-size: 1rem; font-weight: 500; letter-spacing: .04em; }
.card h3 { font-size: 1.25rem; letter-spacing: .01em; line-height: 1.2; margin: 58px 0 12px; }
.card p { color: var(--muted); font-size: .9rem; letter-spacing: .01em; margin: 0; }
.feature-card:nth-child(1), .feature-card:nth-child(5) { grid-column: span 2; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-list summary { cursor: pointer; font-size: 1.15rem; font-weight: 500; list-style: none; padding-right: 40px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--orange); content: "+"; font-size: 1.5rem; position: absolute; right: 8px; top: -4px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { color: var(--muted); margin-bottom: 0; max-width: 850px; }
.price-panel { align-items: center; background: linear-gradient(140deg,#292929 0%,#1d1d1d 75%); border: 1px solid var(--line); border-radius: 28px; display: grid; gap: 40px; grid-template-columns: .8fr 1.2fr; padding: clamp(28px,5vw,64px); }
.price { color: var(--orange); font-size: clamp(3.5rem,8vw,7rem); font-weight: 600; letter-spacing: 0; line-height: .8; }
.price small { color: var(--muted); display: block; font-size: 1rem; letter-spacing: 0; margin-top: 24px; }
.quote { font-size: 1.25rem; }
.quote footer { color: var(--orange); font-size: .8rem; margin-top: 24px; }
.cta-band { padding: 100px 0; text-align: center; }
.cta-band-inner { background: linear-gradient(120deg,rgba(255,83,34,.20),rgba(255,71,39,.04)); border: 1px solid rgba(255,83,34,.45); border-radius: 28px; padding: clamp(38px,7vw,80px) 24px; }
.cta-actions { align-items: center; display: flex; flex-direction: column; gap: 10px; }
.pricing-note { padding: 0 0 70px; }
.pricing-note p { color: #999; font-size: .8rem; line-height: 1.5; margin: 0 auto; max-width: 900px; }
.cta-band h2 { font-size: clamp(2rem,5vw,4.3rem); font-weight: 500; letter-spacing: 0; line-height: 1.08; margin: 0 auto 30px; max-width: 850px; }
.contact-grid { display: grid; gap: 60px; grid-template-columns: .8fr 1.2fr; }
.contact-grid-single { grid-template-columns: minmax(0, 820px); }
.contact-primary-card { margin: 0 auto; max-width: 820px; text-align: center; }
.contact-primary-card h2, .contact-demo-card h2 { font-size: clamp(2rem,4vw,3.7rem); font-weight: 500; line-height: 1.08; margin: 0 0 20px; text-wrap: balance; }
.contact-primary-card > p:not(.eyebrow), .contact-demo-card > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; margin: 0 auto 28px; max-width: 700px; }
.contact-primary-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contact-demo-section { text-align: center; }
.contact-demo-card { background: linear-gradient(145deg,#292929,#202020); border: 1px solid var(--line); border-radius: 24px; margin: 0 auto; max-width: 900px; padding: clamp(30px,6vw,64px) 24px; }
.contact-email-link { color: var(--muted); display: block; margin-top: 18px; }
.contact-links { display: grid; gap: 12px; }
.site-chat-launcher { align-items: center; background: var(--orange); border: 0; border-radius: 999px; bottom: 22px; box-shadow: 0 12px 28px rgba(0,0,0,.3); color: #fff; cursor: pointer; display: inline-flex; font: inherit; font-weight: 600; gap: 9px; padding: 13px 18px; position: fixed; right: 22px; z-index: 25; }
.site-chat-launcher:hover { background: #ff704c; transform: translateY(-1px); }
.site-chat-launcher svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
@media (max-width: 560px) { .site-chat-launcher { bottom: 14px; right: 14px; } }
.contact-links a { color: var(--muted); }
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
label { display: grid; font-size: .82rem; gap: 7px; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: white; padding: 13px 15px; width: 100%; }
textarea { min-height: 160px; resize: vertical; }
.site-footer { border-top: 1px solid var(--line); padding: 70px 0 30px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 2fr repeat(3,1fr); }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col strong { font-size: .8rem; margin-bottom: 8px; }
.footer-col a { color: var(--muted); font-size: .8rem; text-decoration: none; }
.footer-col a:hover { color: var(--orange); }
.copyright { color: #888; font-size: .72rem; margin-top: 50px; }
.privacy-settings-link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; padding: 0; text-align: left; }
.privacy-settings-link:hover { color: var(--orange); }
.privacy-panel { align-items: center; background: rgba(0,0,0,.68); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 20; }
.privacy-panel[hidden] { display: none; }
.privacy-panel-inner { background: #171717; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.5); max-width: 520px; padding: 28px; position: relative; width: 100%; }
.privacy-panel-inner h2 { font-size: 1.35rem; margin: 0 30px 10px 0; }
.privacy-panel-inner p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0 0 20px; }
.privacy-panel-close { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.8rem; line-height: 1; padding: 0; position: absolute; right: 20px; top: 18px; }
.privacy-toggle { align-items: center; display: flex; gap: 10px; }
.privacy-toggle input { accent-color: var(--orange); width: auto; }
.privacy-panel-actions { display: flex; justify-content: flex-end; margin-top: 24px; }

/* Benefit-led product stories */
.feature-module { overflow: hidden; }
.feature-text { max-width: 860px; }
.feature-text-right { margin-left: auto; text-align: right; }
.feature-text h2 { font-size: clamp(2rem,4vw,3.7rem); font-weight: 500; letter-spacing: 0; line-height: 1.08; margin: 0 0 20px; text-wrap: balance; }
.feature-text p { color: var(--muted); font-size: 1.08rem; margin: 0 0 18px; }
.feature-text p:last-child { margin-bottom: 0; }
.feature-module-layout { align-items: center; display: grid; gap: clamp(32px,6vw,84px); grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr); }
.feature-module-layout-reverse { grid-template-columns: minmax(0,1.22fr) minmax(280px,.78fr); }
.feature-module-layout-reverse .feature-text { order: 2; }
.product-visual { isolation: isolate; min-height: 360px; overflow: hidden; position: relative; }
.product-visual::before { background: radial-gradient(circle,rgba(255,83,34,.2),transparent 66%); content: ""; inset: 10% 0 auto; height: 80%; pointer-events: none; position: absolute; z-index: -1; }
/* Mobile-width product UI cards */
.request-card, .age-settings-card, .age-staff-card, .message-phone { box-shadow: 0 22px 46px rgba(0,0,0,.4); }
/* Shared request inbox */
.request-phone { aspect-ratio: 9 / 16; background: #f4f5f6; border: 1px solid #d7d9dc; border-radius: 22px; box-shadow: 0 22px 46px rgba(0,0,0,.4); color: #252a31; font-family: Arial,sans-serif; margin: 0 auto; max-width: 280px; min-height: 480px; padding: 18px 15px 20px; width: 100%; }
.request-phone-header { align-items: center; display: flex; font-size: .86rem; justify-content: space-between; margin-bottom: 12px; }
.request-phone-header b { color: #737b85; font-size: .68rem; letter-spacing: .1em; }
.request-phone-search { background: #fff; border: 1px solid #dce0e3; border-radius: 6px; color: #89919a; font-size: .62rem; margin: 0 0 14px; padding: 8px 9px; }
.request-phone-label { color: #69717b; font-size: .58rem; font-weight: 700; margin: 0 0 7px; text-transform: uppercase; }
.request-card { background: #fff; border: 1px solid #d8dadd; border-radius: 10px; color: #252a31; margin: 0 0 12px; min-height: 106px; padding: 15px 13px 14px; width: 100%; }
.request-card:last-child { margin-bottom: 0; }
.request-card-meta { align-items: center; display: flex; font-family: Arial,sans-serif; font-size: .57rem; justify-content: space-between; margin: 0 0 9px; text-transform: uppercase; }
.request-card-meta span { background: #fff1cf; border-radius: 4px; color: #8a5b0b; font-weight: 700; padding: 3px 6px; }
.request-card-claim .request-card-meta span { background: #e8e9ff; color: #5a5798; }
.request-card-timeoff .request-card-meta span { background: #dff4f7; color: #377d86; }
.request-card-meta small { color: #757b84; text-transform: none; }
.request-person { align-items: center; display: flex; gap: 9px; margin-bottom: 9px; }
.request-person i, .conversation-row i { align-items: center; background: #f08342; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-family: Arial,sans-serif; font-size: .55rem; font-style: normal; font-weight: 700; height: 27px; justify-content: center; width: 27px; }
.request-card-claim .request-person i { background: #e6c84a; color: #4d3d00; }
.request-card-timeoff .request-person i { background: #86a6bf; }
.cartoon-avatar { background-color: transparent !important; color: transparent !important; font-size: 0 !important; position: relative; }
.cartoon-avatar::before { background-image: url('/assets/avatar-sprite.png'); background-repeat: no-repeat; background-size: 400% 200%; border-radius: inherit; content: ""; inset: 0; position: absolute; }
.avatar-sprite-1::before { background-position: 0 0; }
.avatar-sprite-2::before { background-position: 33.333% 0; }
.avatar-sprite-3::before { background-position: 66.667% 0; }
.avatar-sprite-4::before { background-position: 100% 0; }
.avatar-sprite-5::before { background-position: 0 100%; }
.avatar-sprite-6::before { background-position: 33.333% 100%; }
.avatar-sprite-7::before { background-position: 66.667% 100%; }
.avatar-sprite-8::before { background-position: 100% 100%; }
.request-person p { font-family: Arial,sans-serif; line-height: 1.25; margin: 0; }
.request-person strong { display: block; font-size: .7rem; }
.request-person span { color: #616974; display: block; font-size: .6rem; }
.request-detail { color: #555e68; font-family: Arial,sans-serif; font-size: .59rem; line-height: 1.2; margin: 5px 0 0 36px; }
/* Age limitations — separate mobile-width settings and staff surfaces */
.age-limits-visual { min-height: 430px; }
.age-mobile-pair { align-items: center; display: flex; gap: 14px; justify-content: center; }
.age-settings-card, .age-staff-card { background: #fafafa; border: 1px solid #d7d9dc; border-radius: 12px; color: #242a31; font-family: Arial,sans-serif; max-width: 280px; padding: 13px; width: 100%; }
.age-settings-card header, .age-staff-card header { align-items: flex-start; border-bottom: 1px solid #e4e5e7; display: flex; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; }
.age-settings-card header span, .age-staff-card header span { color: #737d88; display: block; font-size: .57rem; font-weight: 700; text-transform: uppercase; }
.age-settings-card header strong { display: block; font-size: .65rem; }
.age-staff-card header b { color: #626d78; font-size: .54rem; font-weight: 400; white-space: nowrap; }
.age-threshold { align-items: center; background: #eef3ff; border: 1px solid #ccdcff; border-radius: 6px; color: #1647a5; display: flex; font-size: .58rem; justify-content: space-between; margin-bottom: 9px; padding: 7px 8px; }
.age-threshold b { font-size: .75rem; }
.age-setting-row { align-items: center; border-bottom: 1px solid #eceeef; display: flex; font-size: .54rem; gap: 8px; justify-content: space-between; padding: 7px 0; }
.age-setting-row span { line-height: 1.2; }
.age-setting-row b { border: 1px solid #d9dce0; border-radius: 4px; font-size: .55rem; font-weight: 400; padding: 3px 5px; white-space: nowrap; }
.age-setting-row small { color: #737d88; font-size: .48rem; }
.age-setting-note { color: #53616e; font-size: .54rem; line-height: 1.3; margin: 9px 0 0; }
.age-staff-row { align-items: center; border: 1px solid #e4e7ea; border-radius: 8px; display: flex; gap: 8px; margin-bottom: 7px; min-height: 52px; padding: 7px; }
.age-staff-row:last-child { margin-bottom: 0; }
.age-staff-row p { line-height: 1.25; margin: 0; min-width: 0; }
.age-staff-row p strong, .age-staff-row p small { display: block; }
.age-staff-row p strong { font-size: .64rem; }
.age-staff-row p small { color: #6d7782; font-size: .53rem; margin-top: 2px; }
.age-staff-row em { color: #b06c00; display: block; font-size: .5rem; font-style: normal; margin-top: 4px; white-space: nowrap; }
.avatar { align-items: center; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: .55rem; font-weight: 700; height: 29px; justify-content: center; position: relative; width: 29px; }
.avatar-james { background: #5cc59a; }
.avatar-emma { background: #d9c9b1; color: #66594b; }
.avatar-sarah { background: #8498b5; }
.age-badge { align-items: center; background: #1647a5; border: 2px solid #fff; border-radius: 50%; bottom: -5px; color: #fff; display: flex; font-size: .48rem; height: 19px; justify-content: center; position: absolute; right: -6px; width: 19px; }
.staff-check { align-items: center; background: #e5f7ef; border-radius: 50%; color: #188553; display: inline-flex; font-size: .63rem; height: 18px; justify-content: center; margin-left: auto; width: 18px; }
.staff-check-warning { background: #fff1d6; color: #b06c00; }
.age-warning { border-color: #f0c979; }
.age-callout { bottom: 0; color: var(--orange); font-family: Kanit,Arial,sans-serif; font-size: .92rem; font-weight: 500; line-height: 1.05; margin: 0; position: absolute; right: 1%; text-align: right; transform: translateY(100%); }
/* Messaging — two separate Framer-style mobile components */
.message-visual { padding: 8px 0 16px; }
.message-mobile-pair { align-items: flex-start; display: flex; gap: 16px; justify-content: center; }
.message-phone { aspect-ratio: 9 / 16; background: #f6f7f8; border: 1px solid #d7d9dc; border-radius: 22px; color: #28303a; font-family: Arial,sans-serif; max-width: 220px; min-height: 500px; overflow: hidden; width: 100%; }
.message-phone > header { align-items: center; background: #fff; border-bottom: 1px solid #d9dce0; display: flex; font-size: .72rem; justify-content: space-between; padding: 13px 13px 10px; }
.message-phone > header strong { font-size: .72rem; }
.message-phone > header span { color: #77808a; font-size: .58rem; }
.message-phone > header div small { color: #77808a; display: block; font-size: .5rem; font-weight: 400; margin-top: 3px; }
.message-channels-card { box-shadow: 0 22px 46px rgba(0,0,0,.4); padding: 0 0 78px; position: relative; }
.message-channels-card::after { background: #1d1d1d; border-radius: 999px; bottom: 18px; box-shadow: 0 8px 18px rgba(0,0,0,.22); color: #fff; content: "✎  New conversation"; font-size: .6rem; font-weight: 700; left: 50%; padding: 9px 13px; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.message-channels-card .message-search, .message-channels-card .message-heading, .message-channels-card .conversation-row { margin-left: 11px; margin-right: 11px; }
.message-search { background: #fff; border: 1px solid #dce0e3; border-radius: 5px; color: #89919a; font-size: .57rem; margin: 11px 0 13px; padding: 7px; }
.message-heading { color: #69717b; font-size: .52rem; font-weight: 700; margin: 11px 0 6px; text-transform: uppercase; }
.conversation-row { align-items: center; display: flex; gap: 6px; margin: 0 0 7px; min-width: 0; }
.conversation-row i { background: #8498b5; font-size: .48rem; height: 22px; position: relative; width: 22px; }
.message-channels-card .conversation-row i::after { align-items: center; background: #f4f5f6; border: 1px solid #fff; border-radius: 50%; color: #69717b; content: "+1"; display: flex; font-family: Arial,sans-serif; font-size: .44rem; font-weight: 700; height: 16px; justify-content: center; position: absolute; right: -9px; top: 3px; width: 16px; z-index: 2; }
.message-channels-card .conversation-row:nth-of-type(3) i::after { content: "+57"; }
.message-channels-card .conversation-row:nth-of-type(4) i::after { content: "+4"; }
.message-channels-card .conversation-row:nth-of-type(6) i::after { content: "+1"; }
.message-channels-card .conversation-row:nth-of-type(7) i::after { content: "+12"; }
.message-channels-card .conversation-row:nth-of-type(9) i::after { display: none; }
.conversation-row:nth-of-type(5) i { background: #e09a56; }
.conversation-row span { min-width: 0; }
.conversation-row b, .conversation-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row b { font-size: .57rem; }
.conversation-row small { color: #707984; font-size: .49rem; margin-top: 2px; }
.message-thread-card { box-shadow: 0 22px 46px rgba(0,0,0,.4); display: flex; flex-direction: column; }
.message-thread { flex: 1; padding: 13px 12px 6px; }
.message-entry { align-items: flex-start; display: flex; gap: 5px; margin-bottom: 4px; }
.message-entry > div { flex: 1; min-width: 0; }
.message-entry-right { justify-content: flex-end; }
.message-entry-right > div { flex: 0 1 auto; min-width: 0; }
.message-avatar { height: 20px; margin-top: 2px; width: 20px; }
.message-bubble { background: #e4e6e9; border-radius: 9px 9px 9px 2px; font-size: .54rem; line-height: 1.35; margin: 0 12% 4px 0; padding: 7px; }
.message-entry .message-bubble { margin-bottom: 3px; margin-right: 0; }
.message-bubble-alt { margin-right: 22%; }
.message-bubble-blue { background: #d9ecf8; border-radius: 9px 9px 2px 9px; margin-left: 12%; margin-right: 0; }
.message-entry-right .message-bubble-blue { margin-left: 0; }
.message-thread small { color: #7a838d; display: block; font-size: .45rem; margin: 0 0 8px; }
.message-bubble-blue + small { text-align: right; }
.message-compose { background: #fff; border-top: 1px solid #d9dce0; color: #89919a; font-size: .52rem; margin-top: auto; padding: 10px 12px; }
.message-compose b { color: #1d4ed8; float: right; font-size: .7rem; }
.unified-schedule-showcase { margin: 0 auto; max-width: 1120px; }
.unified-schedule-heading { margin: 0 auto 14px; max-width: 780px; text-align: center; }
.unified-schedule-heading .eyebrow { margin-bottom: 6px; }
.unified-schedule-heading h2 { color: var(--text); font-size: clamp(1.35rem,2.7vw,2rem); line-height: 1.15; margin: 0; }
.unified-schedule-cards { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.unified-shift-card { background: #f7f7f6; border: 1px solid #d9d9d7; border-radius: 9px; box-shadow: 0 20px 45px rgba(0,0,0,.22); color: #20252c; min-width: 0; overflow: hidden; padding: 0; }
.unified-shift-program { background: #116fae; color: #fff; font-size: .55rem; font-weight: 700; letter-spacing: .04em; margin: 0; padding: 7px 9px 0; text-transform: uppercase; }
.unified-shift-card:nth-child(2) .unified-shift-program, .unified-shift-card:nth-child(2) .unified-shift-details { background: #168b96; }
.unified-shift-card:nth-child(3) .unified-shift-program, .unified-shift-card:nth-child(3) .unified-shift-details { background: #5f61a8; }
.unified-shift-details { background: #116fae; border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; display: grid; gap: 2px 7px; grid-template-columns: 1fr auto; padding: 2px 9px 8px; }
.unified-shift-details span { color: rgba(255,255,255,.78); font-size: .53rem; }
.unified-shift-details span:nth-child(2) { text-align: right; }
.unified-shift-details b { font-size: .68rem; font-weight: 600; grid-column: 1 / -1; }
.unified-shift-staff { background: #f7f7f6; display: grid; gap: 5px; margin: 0; padding: 8px 9px 9px; }
.unified-shift-staff > div { align-items: center; display: flex; gap: 7px; min-width: 0; }
.unified-staff-avatar { border-radius: 50%; flex: 0 0 auto; height: 20px; width: 20px; }
.unified-shift-staff strong, .unified-shift-staff small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unified-shift-staff strong { font-size: .57rem; font-weight: 600; }
.unified-shift-staff small { color: #707984; font-size: .47rem; margin-top: 0; }
.unified-schedule-copy { margin: 28px auto 0; max-width: 760px; text-align: center; }
.unified-schedule-copy > p { color: var(--muted); font-size: 1rem; line-height: 1.5; margin: 0 auto; }
.unified-schedule-points { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 24px; text-align: left; }
.unified-schedule-points article { background: #202020; border: 1px solid #343434; border-radius: 8px; min-height: 100px; padding: 16px; }
.unified-schedule-points article > span { color: var(--orange); display: block; font-size: .95rem; margin-bottom: 19px; }
.unified-schedule-points p { color: var(--text); font-size: .68rem; line-height: 1.35; margin: 0; }
.unified-schedule-section { padding-bottom: 92px; }
.home-benefits-section { border-top-color: #343434; padding-top: 86px; }
.home-benefits-heading { margin-bottom: 44px; max-width: 820px; }
.home-benefits-heading h2 { max-width: 700px; }
.home-benefits-heading::after { background: var(--orange); content: ""; display: block; height: 3px; margin-top: 26px; width: 58px; }
.home-feature-cards { margin-top: 0; }
/* Pricing page */
.pricing-page { background: var(--ink); color: var(--text); }
.pricing-page .hero { padding: 86px 0 42px; }
.pricing-page .hero h1 { color: var(--text); }
.pricing-page .hero p:not(.eyebrow) { color: var(--muted); margin-top: 20px; max-width: 700px; }
.pricing-page .hero-actions, .pricing-page .hero .trial-trust { display: none; }
.pricing-page .eyebrow { color: var(--orange); }
.pricing-section { padding: 16px 0 92px; }
.pricing-grid { align-items: stretch; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.pricing-card { background: linear-gradient(145deg,#292929,#202020); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.25); display: flex; flex-direction: column; min-height: 540px; padding: 24px; }
.pricing-card-featured { background: linear-gradient(145deg,rgba(255,83,34,.025),rgba(255,71,39,.006)); border-color: rgba(255,83,34,.18); }
.pricing-card-header { align-items: center; display: flex; gap: 14px; margin-bottom: 24px; }
.pricing-icon { align-items: center; background: rgba(255,83,34,.18); border-radius: 9px; color: var(--orange); display: flex; height: 50px; justify-content: center; width: 50px; }
.pricing-icon svg { fill: none; height: 27px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 27px; }
.pricing-card h2 { color: var(--text); font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1; margin: 0; }
.pricing-users { color: var(--muted); font-size: .95rem; line-height: 1.2; margin: -12px 0 24px 64px; }
.pricing-amount { color: var(--text); font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 500; line-height: 1; }
.pricing-amount small { color: var(--muted); font-size: 1rem; font-weight: 300; margin-left: 4px; }
.pricing-detail { color: #999; font-size: 1.35rem; line-height: 1.25; margin: 12px 0 22px; min-height: 42px; }
.pricing-button { align-items: center; background: transparent; border: 1px solid var(--orange); border-radius: 8px; color: var(--text); display: flex; font-size: 1rem; font-weight: 500; justify-content: center; min-height: 42px; padding: 8px 14px; text-decoration: none; }
.pricing-button:hover { background: var(--orange); color: #fff; }
.pricing-card-featured .pricing-button { background: transparent; color: var(--text); }
.pricing-card-featured .pricing-button:hover { background: var(--orange); color: #fff; }
.pricing-features { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; }
.pricing-features-title { color: var(--text); font-size: .95rem; font-weight: 500; margin: 0 0 14px; }
.pricing-features ul { list-style: none; margin: 0; padding: 0; }
.pricing-features li { color: var(--muted); font-size: .9rem; line-height: 1.3; margin: 0 0 13px; padding-left: 22px; position: relative; }
.pricing-features li::before { color: var(--orange); content: "✓"; font-weight: 500; left: 0; position: absolute; }
.pricing-features li.pricing-feature-more { padding-left: 0; }
.pricing-features li.pricing-feature-more::before { content: none; }
.pricing-page .section-alt { background: #141414; border-color: #272727; }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav-menu { align-items: stretch; background: #1a1a1a; border-bottom: 1px solid var(--line); display: none; inset: 76px 0 auto; padding: 24px; position: fixed; }
  .nav-menu.open { display: grid; }
  .dropdown { box-shadow: none; margin-top: 10px; min-width: 0; position: static; transform: none; }
  .nav-cta { justify-self: start; }
  .cards { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; margin-inline: auto; max-width: 520px; }
  .feature-card:nth-child(1), .feature-card:nth-child(5) { grid-column: auto; }
  .split, .contact-grid, .price-panel, .unified-schedule-layout, .feature-module-layout, .feature-module-layout-reverse { grid-template-columns: 1fr; }
  .unified-schedule-cards { grid-template-columns: 1fr; margin-inline: auto; max-width: 520px; }
  .unified-schedule-points { grid-template-columns: 1fr 1fr; }
  .split .kicker { position: static; }
  .feature-module-layout-reverse .feature-text { order: initial; }
  .feature-text-right { margin-left: 0; text-align: left; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 76px 0 48px; }
  .hero h1 { font-size: clamp(2.4rem,13vw,4rem); }
  .title-nowrap { white-space: normal; }
  .hero .hero-audience { white-space: normal; }
  .hero-verticals { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .hero-vertical { font-size: .78rem; padding: 8px 5px; white-space: nowrap; }
  .video-section { padding-bottom: 70px; }
  .video-frame { border-radius: 16px; }
  .section { padding: 70px 0; }
  .cards, .footer-grid, .form-row { grid-template-columns: 1fr; }
  .card h3 { margin-top: 24px; }
  .hero-benefits { grid-template-columns: 1fr; margin-top: 32px; max-width: 420px; }
  .hero-product-shot { margin-top: 42px; }
  .hero-product-shot img { border-radius: 12px; min-height: 190px; object-fit: cover; object-position: left top; }
  .product-visual { min-height: 320px; }
  .hero-product-shot { max-width: 720px; }
  .hero-product-shot img { height: auto; min-height: 0; object-fit: contain; }
  .age-mobile-pair, .message-mobile-pair { flex-direction: column; }
  .age-settings-card, .age-staff-card { max-width: 360px; }
  .message-phone { max-width: min(100%, 280px); }
  .age-callout { font-size: .9rem; margin-top: 12px; position: static; transform: none; }
  .message-visual { min-height: 740px; }
  .unified-schedule-heading { margin-bottom: 20px; text-align: left; }
  .unified-schedule-copy { text-align: left; }
  .unified-schedule-points { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}