:root {
  --primary: #558185;
  --primary-dark: #44676a;
  --primary-deep: rgba(85,129,133,1);
  --secondary: #253c33;
  --tertiary: #A09779;
  --background: #fdfcfa;
  --surface: #ffffff;
  --surface-soft: #f3f6f4;
  --text: #172B36;
  --text-secondary: #253c33;
  --muted: #6F797D;
  --border: rgba(23,43,54,.12);
  --shadow: 0 18px 50px rgba(23,43,54,.10);
  --radius: 18px;
  --radius-small: 12px;
  --container: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:Roboto,Arial,sans-serif; color:var(--text); background:var(--background); line-height:1.6; }
a { color:inherit; text-decoration:none; }
.material-symbols-outlined { font-size:22px; line-height:1; vertical-align:middle; }
.container { width:min(calc(100% - 40px),var(--container)); margin:auto; }
.breadcrumbs { display:flex; align-items:center; gap:9px; padding-top:14px; color:var(--muted); font-size:12px; }
.breadcrumbs a { color:var(--primary-dark); }
.breadcrumbs a:hover { text-decoration:underline; }
.topbar { position:sticky; top:0; z-index:50; background:rgba(253,252,250,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav { min-height:72px; display:flex; align-items:center; gap:28px; }

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--primary-deep);
    text-decoration: none; 
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1;
}

.brand-logo {
       height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.brand-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tag-line {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .035em;
    color: var(--muted);
    white-space: nowrap;
}


.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--primary); }
.brand-mark .material-symbols-outlined { font-size:23px; }
.desktop-nav { display:flex; align-items:center; gap:25px; margin-left:auto; font-size:14px; color:#516168; }
.desktop-nav a:hover,.desktop-nav summary:hover { color:var(--primary); }
.nav-dropdown { position:relative; }
.nav-dropdown summary { display:flex; align-items:center; gap:3px; cursor:pointer; list-style:none; white-space:nowrap; }
.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary .material-symbols-outlined { font-size:18px; transition:transform .18s ease; }
.nav-dropdown[open] summary .material-symbols-outlined { transform:rotate(180deg); }
.nav-dropdown-menu { position:absolute; top:calc(100% + 12px); left:-14px; z-index:60; display:grid; min-width:210px; padding:7px; border:1px solid var(--border); border-radius:12px; background:var(--background); box-shadow:var(--shadow); }
.nav-dropdown-menu a { display:block; padding:10px 12px; border-radius:8px; color:#516168; white-space:nowrap; }
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible { background:var(--surface-soft); color:var(--primary-dark); }
.nav-dropdown-divider { height:1px; margin:5px 9px; background:var(--border); }
.nav-dropdown-label { padding:4px 12px 2px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nav-actions { display:flex; align-items:center; gap:16px; margin-left:12px; }
.header-social { display:flex; align-items:center; gap:5px; }
.header-social a { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--primary-dark); transition:background .2s ease,color .2s ease; }
.header-social a:hover { background:var(--surface-soft); color:var(--secondary); }
.header-social svg { width:18px; height:18px; fill:none; }
.header-social a:first-child svg { fill:currentColor; }
.sign-in { font-size:14px; font-weight:500; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 20px; border-radius:12px; background:var(--primary); color:#fff; font-weight:600; box-shadow:0 6px 18px rgba(85,129,133,.22); transition:.2s ease; }
.button:hover { transform:translateY(-1px); background:var(--primary-dark); }
.button-small { min-height:40px; padding:0 16px; font-size:14px; }
.button-outline { background:transparent; color:var(--primary-deep); border:1px solid var(--border); box-shadow:none; }
.button-outline:hover { background:var(--surface-soft); }
.icon-button { border:0; background:none; color:var(--text); padding:8px; cursor:pointer; }
.menu-button,.mobile-nav { display:none; }
.section { padding:104px 0; }
.hero { padding:90px 0 92px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--tertiary); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-.045em; margin:18px 0 24px; max-width:650px; }
h2 { font-size:clamp(32px,4vw,46px); line-height:1.1; letter-spacing:-.035em; margin:12px 0 18px; }
h3 { line-height:1.2; }
.hero-lead { max-width:620px; font-size:19px; color:#53636a; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-note { display:flex; align-items:center; gap:8px; margin-top:23px; color:#65737a; font-size:13px; }
.hero-note .material-symbols-outlined { font-size:18px; color:var(--primary); }
.hero-product { border:1px solid rgba(85,129,133,.18); border-radius:24px; background:#fff; box-shadow:var(--shadow); overflow:hidden; transform:rotate(1deg); }
.window-bar { height:48px; padding:0 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#f3f6f4; border-bottom:1px solid var(--border); color:#68767b; font-size:12px; }
.window-bar > .material-symbols-outlined { justify-self:end; font-size:19px; }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:7px; height:7px; border-radius:50%; background:#c6cfcc; }
.product-body { display:grid; grid-template-columns:60px 1fr; min-height:390px; }
.product-sidebar { padding:20px 0; display:flex; align-items:center; flex-direction:column; gap:24px; background:var(--primary-deep); color:#a8c3c3; }
.product-sidebar .active { color:#fff; }
.mini-logo { width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.13);color:#fff;margin-bottom:15px; }
.mini-logo .material-symbols-outlined { font-size:18px; }
.product-main { padding:25px; background:#fff; }
.sdp-app { font-family:'Roboto',Arial,sans-serif; background:#fdfcfa; color:#17323a; font-size:11px; line-height:1.3; overflow:hidden; border-radius:0 0 10px 10px; }
.sdp-topbar { display:flex; align-items:center; gap:8px; padding:8px 14px; background:#fdfcfa; border-bottom:1px solid #ece7d9; }
.sdp-topbar .material-symbols-outlined { font-size:16px; }
.sdp-burger { color:#44676a; }
.sdp-turtle { color:#558185; font-size:18px; }
.sdp-brand { margin-right:auto; color:#253c33; font-size:12px; font-weight:600; }
.sdp-beta { margin-left:3px; color:#a09779; font-size:7px; font-weight:700; vertical-align:super; }
.sdp-topbar-right { display:flex; align-items:center; gap:10px; }
.sdp-org,.sdp-user { display:flex; align-items:center; gap:4px; color:#253c33; font-size:9.5px; font-weight:600; white-space:nowrap; }
.sdp-caret { color:#8a9490; font-size:13px; }
.sdp-body { display:flex; min-height:280px; }
.sdp-sidebar { width:104px; flex-shrink:0; padding:10px 0; border-right:1px solid #ece7d9; background:#fdfcfa; }
.sdp-nav-label { padding:8px 12px 3px; color:#a09779; font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.sdp-nav-item { display:flex; align-items:center; gap:6px; padding:5px 12px; color:#44676a; font-size:10px; font-weight:500; cursor:default; }
.sdp-nav-item .material-symbols-outlined { font-size:14px; }
.sdp-nav-item.is-active { margin-right:8px; border-radius:0 14px 14px 0; background:#eef1ee; color:#253c33; font-weight:700; }
.sdp-main { flex:1; min-width:0; padding:14px 16px; background:#fff; }
.dojo-member-preview { min-height:365px; }
.dojo-member-heading { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 8px; margin-bottom:11px; }
.dojo-member-heading .sdp-code { grid-column:1/-1; }
.dojo-member-heading h3 { margin:0; color:#17323a; font-size:18px; font-weight:500; }
.dojo-member-heading > span:last-child { color:#558185; font-size:10px; }
.dojo-package-list { display:grid; gap:7px; }
.dojo-package-row { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:58px; padding:8px; border:1px solid #e7e7e4; border-radius:8px; background:#fff; }
.dojo-package-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#eef3f1; color:#558185; font-size:16px!important; }
.dojo-package-row > div { min-width:0; }
.dojo-package-row strong,.dojo-package-row > div > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dojo-package-row strong { color:#253c33; font-size:10px; }
.dojo-package-row > div > span { margin-top:3px; color:#72807c; font-size:8px; }
.dojo-discount-tag,.dojo-no-discount { padding:4px 6px; border:1px solid #b9d8c8; border-radius:999px; color:#258354; font-size:8px; font-weight:600; white-space:nowrap; }
.dojo-discount-tag { background:#f0f8f3; }
.dojo-no-discount { border-color:#dededb; color:#72807c; }
.dojo-package-footer { display:flex; align-items:center; gap:5px; margin-top:9px; color:#687a75; font-size:8px; }
.dojo-package-footer .material-symbols-outlined { color:#558185; font-size:13px; }
.dojo-manage-button { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:9px; padding:6px; border:1px solid #9ab6b7; border-radius:5px; color:#558185; font-size:9px; font-weight:700; text-transform:uppercase; }
.dojo-manage-button .material-symbols-outlined { font-size:14px; }
.sdp-weekly-agenda { padding:12px 13px; font-size:9px; }
.sdp-agenda-actions { display:flex; justify-content:flex-end; margin-bottom:9px; }
.sdp-agenda-actions > span { display:flex; align-items:center; gap:4px; padding:5px 7px; border:1px solid #31464d; border-right:0; color:#243a40; font-size:8px; font-weight:600; text-transform:uppercase; white-space:nowrap; }
.sdp-agenda-actions > span:first-child { border-radius:5px 0 0 5px; }
.sdp-agenda-actions > span:last-child { border-right:1px solid #31464d; border-radius:0 5px 5px 0; }
.sdp-agenda-actions > span.is-selected { background:#eef3f2; }
.sdp-agenda-actions .material-symbols-outlined { font-size:13px; }
.sdp-week-strip { display:grid; grid-template-columns:14px repeat(7,minmax(0,1fr)) 14px; align-items:center; gap:1px; margin-bottom:8px; text-align:center; }
.sdp-week-strip > div { display:grid; justify-items:center; gap:2px; color:#243a40; }
.sdp-week-strip b { font-size:8px; }
.sdp-week-strip strong { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:10px; font-weight:500; }
.sdp-week-strip > div.is-today strong { background:#558185; color:#fff; }
.sdp-week-arrow { color:#81888a; font-size:15px!important; }
.sdp-agenda-range { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; color:#243a40; font-size:10px; font-weight:500; }
.sdp-agenda-range > span { display:flex; align-items:center; gap:4px; color:#9aa3a5; font-size:8px; text-transform:uppercase; }
.sdp-agenda-range .material-symbols-outlined { font-size:13px; }
.sdp-agenda-days { display:grid; }
.sdp-agenda-day { padding:4px 0 6px; }
.sdp-day-heading { display:flex; align-items:center; gap:5px; min-height:25px; padding:0 3px 4px; border-bottom:2px solid #dedfdd; color:#253c43; font-size:9px; }
.sdp-day-heading strong { font-size:10px; }
.sdp-day-heading > .material-symbols-outlined { margin-left:auto; color:#558185; font-size:15px; }
.sdp-day-heading em { margin-left:3px; padding:3px 6px; border-radius:999px; background:#f1f5f4; color:#558185; font-size:8px; font-style:normal; }
.sdp-agenda-day.is-today .sdp-day-heading { border-color:#558185; }
.sdp-agenda-day > p { margin:5px 3px 0; color:#52636a; font-size:8px; }
.sdp-swim-session { display:grid; gap:3px; margin-top:5px; padding:6px 7px; border:1px solid #d5d9d8; border-left:3px solid #558185; border-radius:5px; background:#f1f4f4; color:#263d43; }
.sdp-swim-session > b { font-size:9px; }
.sdp-swim-session .sdp-session-time { color:#558185; font-size:9px; font-weight:600; }
.sdp-session-badges { display:flex; flex-wrap:wrap; gap:4px; }
.sdp-session-badges em { padding:3px 6px; border:1px solid #ef9f2b; border-radius:999px; color:#d47b08; font-size:8px; font-style:normal; }
.sdp-session-badges em.is-blue { border-color:#5bafff; color:#1681d4; }
.sdp-swim-session > span:last-child { display:flex; align-items:center; gap:3px; color:#31464d; font-size:8px; }
.sdp-swim-session > span:last-child .material-symbols-outlined { font-size:12px; }
.sdp-title { margin:0 0 10px; color:#17323a; font-size:17px; font-weight:600; }
.sdp-cards { display:flex; gap:8px; margin-bottom:10px; }
.sdp-card { flex:1; padding:7px 10px; border:1px solid #e6e2d6; border-radius:8px; }
.sdp-card-label { display:block; margin-bottom:2px; color:#7d8a86; font-size:9px; }
.sdp-card strong { color:#17323a; font-size:13px; }
.sdp-filters { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.sdp-chip { padding:3px 10px; border:1px solid #dcd6c6; border-radius:999px; color:#556; font-size:9px; font-weight:600; }
.sdp-chip.is-all { border-color:#253c33; background:#253c33; color:#fff; }
.sdp-chip.is-owing { border-color:#e7c98d; color:#b57d1f; }
.sdp-chip.is-credit { border-color:#2e9e6b; background:#2e9e6b; color:#fff; }
.sdp-search { display:flex; align-items:center; gap:4px; margin-left:auto; padding:3px 8px; border:1px solid #e6e2d6; border-radius:6px; color:#9aa39d; font-size:9px; }
.sdp-search .material-symbols-outlined { font-size:12px; }
.sdp-table { width:100%; border-collapse:collapse; }
.sdp-table th { padding:5px 6px; border-bottom:1px solid #ece7d9; color:#8a9490; font-size:8.5px; font-weight:700; letter-spacing:.03em; text-align:left; text-transform:uppercase; }
.sdp-table td { padding:6px; border-bottom:1px solid #f2efe6; vertical-align:middle; }
.sdp-table td strong { display:block; color:#17323a; font-size:10.5px; }
.sdp-code { color:#9aa39d; font-size:8.5px; }
.sdp-member-chip { display:inline-block; margin:1px 3px 1px 0; padding:2px 7px; border-radius:999px; background:#f1efe6; color:#44676a; font-size:8.5px; }
.sdp-balance { color:#c07a1f; font-size:10.5px; font-weight:700; }
.sdp-status { padding:2px 9px; border-radius:999px; background:#2e9e6b; color:#fff; font-size:8.5px; font-weight:700; }
.attendance-sdp .sdp-body { min-height:440px; }
.sdp-family-list { margin-top:10px; }
.sdp-family-list td { padding:8px 6px; }
.sdp-family-summary { display:flex; align-items:center; gap:8px; margin:8px 0 11px; padding:9px 11px; border:1px solid #e6e2d6; border-radius:8px; background:#fdfcfa; }
.sdp-family-summary .material-symbols-outlined { color:#558185; font-size:17px; }
.sdp-family-summary strong { color:#253c33; font-size:10px; }
.sdp-family-summary span:last-child { margin-left:auto; color:#7d8a86; font-size:9px; }
.sdp-balance-card { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:9px 11px; border-radius:8px; background:#f5f1e7; color:#48544f; font-size:9px; }
.sdp-balance-card strong { color:#253c33; font-size:10px; }
.sdp-directory-main { max-height:440px; overflow:hidden; padding:15px 17px; }
.sdp-directory-heading h3 { margin:0 0 5px; color:#172b36; font-size:23px; font-weight:500; }
.sdp-directory-heading p { margin:0 0 10px; color:#35484e; font-size:10px; }
.sdp-directory-panel { padding:11px 10px 8px; border:1px solid #ececec; border-radius:9px; }
.sdp-directory-toolbar-title { display:flex; align-items:center; gap:7px; margin:0 0 9px; color:#558185; }
.sdp-directory-toolbar-title strong { font-size:14px; }
.sdp-directory-count { padding:3px 7px; border:1px solid #d9d9d9; border-radius:999px; color:#45565c; font-size:9px; }
.sdp-directory-controls { display:flex; align-items:center; gap:5px; margin-bottom:9px; }
.sdp-directory-filter,.sdp-directory-search,.sdp-directory-button { display:flex; align-items:center; gap:4px; min-height:28px; padding:4px 6px; border:1px solid #dcdfe0; border-radius:5px; background:#fff; color:#33474d; font:inherit; font-size:8px; white-space:nowrap; }
.sdp-directory-filter { min-width:48px; justify-content:space-between; }
.sdp-directory-search { flex:1; min-width:50px; color:#909a9d; }
.sdp-directory-controls .material-symbols-outlined { font-size:13px; }
.sdp-directory-button { color:#558185; font-weight:600; text-transform:uppercase; }
.sdp-directory-button.is-primary { border-color:#558185; background:#558185; color:#fff; }
.sdp-directory-table { table-layout:fixed; }
.sdp-directory-table th { padding:5px 3px; font-size:7px; }
.sdp-directory-table th:nth-child(1) { width:37%; }
.sdp-directory-table th:nth-child(2) { width:8%; }
.sdp-directory-table th:nth-child(3) { width:19%; }
.sdp-directory-table th:nth-child(4) { width:29%; }
.sdp-directory-table th:nth-child(5) { width:7%; }
.sdp-directory-table td { padding:6px 3px; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.sdp-directory-table td:first-child { display:flex; align-items:center; gap:4px; }
.sdp-directory-table td:first-child strong { flex:1; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.sdp-household td { background:#f1f2f2; color:#586b70; }
.sdp-household td:first-child .material-symbols-outlined { color:#558185; font-size:13px; }
.sdp-household .sdp-code { flex:none; font-size:7px; }
.sdp-family-pill { flex:none; padding:2px 4px; border:1px solid #8ec9ff; border-radius:999px; color:#2385d4; font-size:6.5px; }
.sdp-household td[colspan] { color:#637479; font-size:7px; }
.sdp-initials { display:inline-grid; flex:none; place-items:center; width:18px; height:18px; border-radius:50%; background:#558185; color:#fff; font-size:6px; }
.sdp-directory-table .sdp-student td:last-child { color:#558185; text-align:center; }
.sdp-directory-table .sdp-student td:last-child .material-symbols-outlined { font-size:12px; }
.sdp-directory-table .sdp-member-chip { overflow:hidden; max-width:100%; margin:0; padding:2px 5px; text-overflow:ellipsis; white-space:nowrap; }
.attendance-preview { padding:13px 17px; font-size:11px; line-height:1.35; }
.attendance-title,.attendance-session-top,.attendance-register-head,.attendance-actions { display:flex; align-items:center; gap:8px; }
.attendance-title { justify-content:space-between; margin-bottom:10px; }
.attendance-title h3 { margin:0; color:var(--text); font-size:22px; }
.attendance-complete { padding:6px 10px; border:1px solid #e4e8e8; border-radius:6px; color:#a9b0b2; text-transform:uppercase; font-size:9px; font-weight:600; }
.attendance-session { padding:12px; border:1px solid var(--border); border-radius:11px; }
.attendance-session-top { justify-content:space-between; gap:8px; }
.attendance-session-top strong { color:var(--text); font-size:14px; }
.attendance-status { flex:none; padding:4px 8px; border:1px solid #e6a64b; border-radius:999px; color:#cf831d; font-size:9px; }
.attendance-date { display:flex; align-items:center; gap:5px; padding:8px 0; border-bottom:1px solid var(--border); color:#4c5e63; font-size:10px; }
.attendance-date .material-symbols-outlined { color:var(--primary-dark); font-size:15px; }
.attendance-detail { display:grid; grid-template-columns:82px 1fr; gap:5px; padding:8px 0; color:#506068; font-size:10px; }
.attendance-detail strong { color:var(--text); }
.attendance-warning { display:flex; align-items:center; gap:8px; padding:8px 9px; border:1px solid #efa43b; border-radius:7px; color:#bd7417; font-size:9px; }
.attendance-warning .material-symbols-outlined { flex:none; font-size:18px; }
.attendance-register-head { flex-wrap:wrap; margin:12px 0 8px; color:var(--primary-dark); }
.attendance-register-head > strong { font-size:15px; }
.attendance-count { padding:4px 7px; border:1px solid var(--border); border-radius:999px; color:#44545a; font-size:9px; }
.attendance-copy,.attendance-add-walkin,.attendance-add-member { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:6px 8px; border:1px solid #8ba7a7; border-radius:6px; background:#fff; color:var(--primary-dark); text-transform:uppercase; font-size:8px; font-weight:700; white-space:nowrap; }
.attendance-copy { margin-left:auto; }
.attendance-copy .material-symbols-outlined,.attendance-add-walkin .material-symbols-outlined,.attendance-add-member .material-symbols-outlined { font-size:14px; }
.attendance-actions { margin-bottom:8px; }
.attendance-add-walkin { flex:1; border-color:var(--secondary); background:var(--secondary); color:#fff; }
.attendance-add-member { flex:1; border-color:#809094; color:#31464d; }
.attendance-search { display:flex; align-items:center; gap:6px; padding:5px 3px; border-bottom:1px solid var(--border); color:#9aa4a7; font-size:10px; }
.attendance-search .material-symbols-outlined { font-size:16px; color:#607176; }
.attendance-list { margin-top:6px; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.attendance-list-title,.attendance-member { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.attendance-list-title { border-bottom:1px solid var(--border); color:#384c52; font-size:10px; }
.attendance-list-title .material-symbols-outlined { color:#2e9e6b; font-size:17px; }
.attendance-list-title > span:last-child { display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid #43c685; border-radius:50%; color:#24945b; font-size:9px; }
.attendance-member { min-height:31px; justify-content:space-between; border-bottom:1px solid #edf0ef; color:#35484e; font-size:10px; }
.attendance-member:last-child { border-bottom:0; }
.attendance-member-actions { display:flex; align-items:center; gap:8px; margin-left:auto; color:#7c8587; white-space:nowrap; }
.attendance-member-actions .material-symbols-outlined { font-size:16px; }
.attendance-member-actions .material-symbols-outlined:last-child { color:#e75045; }
.attendance-member-pending { padding:3px 6px; border:1px solid #e7a447; border-radius:999px; color:#bd7417; font-size:8px; white-space:nowrap; }
.product-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.product-heading h3 { margin:3px 0 0; font-size:23px; }
.micro-label { display:block; font-size:9px; letter-spacing:.12em; font-weight:700; color:#8a979b; }
.avatar { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e8eeee;color:var(--primary-dark);font-size:10px;font-weight:700; }
.session-card { display:flex; align-items:center; gap:13px; padding:13px; border:1px solid var(--border); border-radius:13px; margin-bottom:11px; }
.session-icon { width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#edf4f3;color:var(--primary); }
.session-icon .material-symbols-outlined { font-size:19px; }
.session-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.session-info strong { font-size:13px; }
.session-info span { font-size:10px; color:#859095; }
.status { font-size:9px; padding:5px 7px; border-radius:99px; background:#eaf2ec; color:#466852; white-space:nowrap; }
.balance-card { margin-top:19px; padding:16px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; background:#f5f1e7; color:#48544f; }
.balance-card strong { display:block; font-size:24px; color:var(--secondary); margin-top:2px; }
.balance-card > .material-symbols-outlined { color:var(--tertiary); font-size:27px; }
.trust-strip { background:var(--primary-deep); color:#d9e5e4; }
.trust-inner { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:13px; }
.trust-inner > span { color:#9eb2b2; }
.trust-inner div { display:flex; align-items:center; gap:7px; font-weight:500; }
.trust-inner .material-symbols-outlined { font-size:18px; color:#b7c9a9; }
.section-heading { max-width:720px; margin-bottom:45px; }
.section-heading.centered { text-align:center; margin-left:auto; margin-right:auto; }
.section-heading.centered .eyebrow { justify-content:center; }
.section-heading p { color:#66757b; font-size:17px; max-width:650px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:27px; box-shadow:0 7px 25px rgba(23,43,54,.045); }
.feature-icon { width:45px;height:45px;display:grid;place-items:center;border-radius:13px;background:#e9f1f0;color:var(--primary);margin-bottom:22px; }
.feature-icon .material-symbols-outlined { font-size:23px; }
.feature-card h3 { font-size:19px; margin-bottom:10px; }
.feature-card p { color:#68777c; font-size:14px; min-height:112px; }
.feature-card a,.text-link { display:inline-flex; align-items:center; gap:5px; color:var(--primary-dark); font-size:13px; font-weight:700; }
.feature-card a .material-symbols-outlined,.text-link .material-symbols-outlined { font-size:16px; }
.usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.usecase-card { padding:27px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:0 7px 25px rgba(23,43,54,.045); }
.usecase-card h3 { margin:12px 0 10px; font-size:19px; }
.usecase-card p,.usecase-split p,.usecase-answers p { color:#68777c; font-size:14px; margin-bottom:0; }
.usecase-number { color:var(--primary-dark); text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700; }
.usecase-icon { display:block; color:var(--primary); font-size:27px; }
.usecase-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.usecase-split h2 { margin:12px 0 18px; }
.usecase-split .usecase-lead { color:#53636a; font-size:18px; }
.usecase-split p + p { margin-top:16px; }
.usecase-callout { padding:32px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-soft); }
.usecase-callout > .material-symbols-outlined { color:var(--primary); font-size:30px; }
.usecase-callout h3 { margin:12px 0; font-size:21px; }
.usecase-callout p,.usecase-callout li { color:#68777c; font-size:14px; }
.usecase-callout .text-link { margin-top:20px; }
.usecase-callout ul { padding-left:20px; margin:14px 0 20px; }
.family-account-label,.term-history { display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:9px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--secondary); font-size:13px; }
.family-account-label .material-symbols-outlined { color:var(--primary); }
.term-history { justify-content:space-between; }
.term-history span { color:var(--muted); }
.term-history strong { color:var(--secondary); font-size:12px; }
.usecase-grid-three { max-width:1000px; margin:0 auto; }
.usecase-footnote { max-width:760px; margin:24px auto 0; color:#68777c; text-align:center; font-size:14px; }
.usecase-answers { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.usecase-answers article { padding-top:20px; border-top:2px solid var(--primary); }
.usecase-answers h3 { margin:0 0 10px; font-size:17px; }
.tinted { background:#f0f4f2; border-top:1px solid rgba(85,129,133,.08); border-bottom:1px solid rgba(85,129,133,.08); }
.steps { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr; align-items:start; }
.step { text-align:center; position:relative; }
.step-number { color:#8b9a9a; font-size:11px; font-weight:700; letter-spacing:.12em; margin-bottom:10px; }
.step-icon { width:68px;height:68px;margin:auto;display:grid;place-items:center;border-radius:20px;background:#fff;color:var(--primary);border:1px solid var(--border);box-shadow:0 7px 20px rgba(23,43,54,.06); }
.step-icon .material-symbols-outlined { font-size:29px; }
.step h3 { margin:17px 0 7px; font-size:18px; }
.step p { color:#6a797d; font-size:13px; margin:0 auto; max-width:190px; }
.step-line { height:1px; background:#c7d2d0; margin-top:101px; }
.audience-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.audience-copy p { color:#64747a; font-size:16px; }
.audience-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.audience-list div,.audience-list a { min-height:100px; padding:19px; border:1px solid var(--border); border-radius:15px; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:12px; background:#fff; }
.audience-list a:hover,.audience-list a:focus-visible { border-color:var(--primary); box-shadow:0 7px 25px rgba(23,43,54,.08); }
.audience-list .material-symbols-outlined { grid-row:1 / span 2; width:40px;height:40px;border-radius:11px;background:#f0f4f2;color:var(--primary);display:grid;place-items:center;font-size:21px; }
.audience-list strong { align-self:end; font-size:14px; }
.audience-list span:last-child { color:#879398; font-size:11px; }
.story { background:var(--secondary); color:#f7f2df; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.story .eyebrow { color:#b8c9c2; }
.story-copy p { color:#c2cdc8; font-size:16px; }
.turtle-card { height:400px; border-radius:24px; overflow:hidden; position:relative; background:linear-gradient(180deg,#9ab6b4 0%,#d8ddd1 50%,#c5b890 51%,#a89770 100%); }
.turtle-card .turtle-image { width:100%; height:100%; object-fit:cover; }

.story-label { position:absolute;left:26px;bottom:23px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#fff;font-weight:700; }
.promise-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.promise-grid > div:first-child { display:flex; align-items:flex-start; gap:18px; }
.promise-grid h2 { margin:0; }
.promise-icon { font-size:36px;color:var(--primary); }
.promise-grid p { color:#66757b;font-size:16px; }
.roadmap-section { background:#f7f9f8; }
.roadmap-heading { max-width:760px; margin-bottom:48px; }
.roadmap-group { margin-top:34px; }
.roadmap-group-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.roadmap-group-heading > div { display:flex; align-items:center; gap:10px; }
.roadmap-group-heading h3 { margin:0; color:var(--text); font-size:20px; }
.roadmap-group-heading > span { color:var(--muted); font-size:12px; }
.roadmap-status-dot { width:10px; height:10px; border-radius:50%; background:#a6b2b0; box-shadow:0 0 0 4px #e9eeec; }
.roadmap-status-dot.is-progress { background:#d79a35; box-shadow:0 0 0 4px #f8eedb; }
.roadmap-status-dot.is-planned { background:#558185; }
.roadmap-status-dot.is-exploring { background:#85939c; }
.roadmap-card-grid { display:grid; gap:14px; }
.roadmap-planned-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.roadmap-exploring-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.roadmap-card { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; gap:14px; min-height:100%; padding:22px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 7px 25px rgba(23,43,54,.045); }
.roadmap-card-featured { border-color:rgba(215,154,53,.35); background:linear-gradient(115deg,#fffdf8,#fff 60%); }
.roadmap-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#eaf1ef; color:var(--primary); font-size:22px; }
.roadmap-card-featured .roadmap-icon { background:#fbf0dc; color:#b4771a; }
.roadmap-card h4 { margin:1px 0 8px; color:var(--text); font-size:16px; line-height:1.35; }
.roadmap-card p { margin:0; color:#68777c; font-size:13px; line-height:1.65; }
.roadmap-contact { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:20px; margin-top:42px; padding:30px; border-radius:20px; background:var(--secondary); color:#f7f2df; }
.roadmap-contact-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:rgba(255,255,255,.12); color:#d6e5df; font-size:25px; }
.roadmap-contact .eyebrow { margin-bottom:7px; color:#b8c9c2; }
.roadmap-contact h3 { margin:0 0 8px; color:#fff; font-size:21px; }
.roadmap-contact p { max-width:720px; margin:0; color:#c2cdc8; font-size:14px; }
.roadmap-contact .button { white-space:nowrap; }
.cta-section { padding:75px 0; background:var(--primary); color:#fff; }
.cta { display:flex; align-items:center; justify-content:space-between; gap:50px; }
.cta .eyebrow { color:#d6e5df; }
.cta h2 { margin-top:10px; margin-bottom:12px; }
.cta p { color:#d8e6e1; max-width:650px; margin-bottom:0; }
.contact-section { background:var(--primary); color:#fff; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); gap:72px; align-items:center; }
.contact-copy .eyebrow { color:#d6e5df; }
.contact-copy h2 { margin-top:10px; }
.contact-copy p { max-width:620px; margin-bottom:24px; color:#d8e6e1; }
.contact-details { display:flex; flex-wrap:wrap; gap:16px 26px; margin-top:25px; }
.contact-detail { display:flex; align-items:center; gap:10px; color:#fff; font-size:14px; }
.contact-detail > .material-symbols-outlined { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.12); color:#d6e5df; font-size:19px; }
.contact-detail span:last-child { display:grid; gap:2px; }
.contact-detail small { color:#b8c9c2; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.contact-detail address { font-style:normal; }
.contact-detail a { color:#fff; }
.contact-detail a:hover { text-decoration:underline; }
.contact-form { display:grid; gap:17px; padding:30px; border-radius:20px; background:#fff; color:var(--text); box-shadow:0 18px 50px rgba(23,43,54,.18); }
.contact-form label { display:grid; gap:7px; color:#33474d; font-size:13px; font-weight:600; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid #d5dfdc; border-radius:9px; padding:11px 12px; background:#fff; color:var(--text); font:inherit; font-size:15px; }
.contact-form input { min-height:46px; }
.contact-form textarea { min-height:140px; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { outline:3px solid rgba(85,129,133,.2); border-color:var(--primary); }
.contact-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-form button { justify-self:start; border:0; cursor:pointer; font:inherit; }
.contact-form button:disabled { cursor:wait; opacity:.65; }
#contact-status { min-height:1.6em; margin:0; color:#44545a; font-size:14px; }
#contact-captcha { min-height:0; }
.button-light { background:#fff;color:var(--primary-deep);box-shadow:none;white-space:nowrap; }
.button-light:hover { background:#f2f6f5;color:var(--primary-deep); }
.footer { padding:52px 0 35px; background:var(--primary-deep); color:#d6e0de; }
.footer-grid { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:35px 55px; align-items:start; }
.footer-brand { color:#fff; }
.footer-brand .tag-line { color:#d6e5df; }
.footer p { color:#91a6a5; font-size:13px; margin:14px 0 0; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; max-width:640px; gap:12px 20px; align-items:center; font-size:13px; }
.footer-links a:hover,.footer-small a:hover { color:var(--secondary);
  text-decoration:underline; }

.social { margin-top:26px; }
.social h2 { margin:0 0 13px; color:var(--secondary); font-size:15px; font-weight:600; }
.social-links { display:flex; gap:10px; }
.social-links a { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; color:var(--primary-dark); font-size:12px; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.social-links a:hover { background:var(--surface-soft); border-color:var(--primary); color:var(--secondary); }
.social-links svg { width:17px; height:17px; fill:none; flex:none; }
.social-links a:first-child svg { fill:currentColor; }
.footer .social { margin-top:22px; }
.footer .social h2 { color:#fff; }
.footer .social-links a { border-color:rgba(255,255,255,.18); color:#d6e0de; }
.footer .social-links a:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); color:#fff; }

.footer-small { grid-column:1/-1; padding-top:25px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; font-size:11px; }

.footer-small a{
  text-decoration:underline;
}

.pricing-hero { padding-bottom:55px; }
.pricing-hero-copy { max-width:820px; margin:0 auto; text-align:center; }
.pricing-hero-copy .eyebrow { justify-content:center; }
.pricing-hero-copy h1 { max-width:780px; margin:20px auto; }
.pricing-hero-copy .hero-lead { max-width:700px; margin:0 auto 25px; }
.pricing-trust-note { display:flex; justify-content:center; align-items:center; gap:8px; margin:34px auto 0; color:#68777c; font-size:13px; }
.pricing-trust-note .material-symbols-outlined { color:var(--primary); font-size:18px; }
.pricing-plans-section { padding-top:50px; }
.pricing-section-heading { margin-bottom:38px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.pricing-card { display:flex; flex-direction:column; min-width:0; padding:27px; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:0 9px 28px rgba(23,43,54,.06); }
.pricing-card-featured { position:relative; border:2px solid var(--primary); box-shadow:0 16px 38px rgba(37,60,51,.13); }
.pricing-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; min-height:59px; }
.pricing-plan-kicker { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:600; }
.pricing-card h3 { margin:0; color:var(--text); font-size:25px; }
.pricing-badge { flex:none; padding:6px 10px; border-radius:999px; background:#eaf2f0; color:var(--primary-dark); font-size:10px; font-weight:700; }
.pricing-price-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; margin:17px 0 4px; color:var(--text); }
.pricing-price { font-size:34px; line-height:1.15; letter-spacing:-.04em; }
.pricing-interval { color:#65737a; font-size:14px; }
.pricing-promotion { margin:6px 0 12px; padding:12px; border-radius:10px; background:#eff5f4; color:#435b5e; }
.pricing-promotion > p { margin:4px 0 0; font-size:11px; line-height:1.5; }
.pricing-old-price { color:#6f797d; font-size:11px; text-decoration:line-through; }
.pricing-limits { display:grid; gap:7px; margin:13px 0 17px; padding:13px 0 16px; border-bottom:1px solid var(--border); color:#43565d; font-size:12px; }
.pricing-limits > span { display:flex; align-items:center; gap:7px; }
.pricing-limits .material-symbols-outlined { color:var(--primary); font-size:17px; }
.pricing-features { display:grid; gap:12px; padding:0; margin:0 0 25px; list-style:none; }
.pricing-features li { display:flex; align-items:flex-start; gap:8px; color:#4b5d63; font-size:12px; line-height:1.45; }
.pricing-features .material-symbols-outlined { flex:none; color:var(--primary); font-size:17px; }
.pricing-cta { width:100%; margin-top:auto; }
.pricing-data-note { display:flex; align-items:center; justify-content:center; gap:6px; margin:22px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.pricing-data-note .material-symbols-outlined { color:var(--primary); font-size:16px; }
.pricing-faq-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.pricing-faq-grid article { padding-top:18px; border-top:2px solid var(--primary); }
.pricing-faq-grid h3 { margin:0 0 8px; font-size:17px; }
.pricing-faq-grid p { margin:0; color:#68777c; font-size:13px; }
.pricing-faq-grid a { color:var(--primary-dark); text-decoration:underline; }
.pricing-contact-section { padding-top:60px; }
.pricing-contact { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px; border-radius:20px; background:var(--secondary); color:#f7f2df; }
.pricing-contact .eyebrow { margin-bottom:8px; color:#b8c9c2; }
.pricing-contact h2 { margin:0 0 10px; color:#fff; font-size:30px; }
.pricing-contact p { max-width:720px; margin:0; color:#c2cdc8; font-size:14px; }
.pricing-contact .button { flex:none; background:#fff; color:var(--secondary); white-space:nowrap; }
.pricing-contact .button:hover { background:#f2f6f5; }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .menu-button { display:block; }
  .hero-grid,.audience-grid,.story-grid,.promise-grid { grid-template-columns:1fr; }
  .hero-grid { gap:55px; }
  .hero-product { max-width:700px; width:100%; margin:auto; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pricing-card-featured { grid-column:1/-1; }
  .pricing-faq-grid { grid-template-columns:1fr 1fr; }
  .pricing-contact { align-items:flex-start; flex-direction:column; }
  .usecase-split { grid-template-columns:1fr; }
  .usecase-answers { grid-template-columns:1fr 1fr; }
  .usecase-grid { grid-template-columns:1fr 1fr; }
  .feature-card p { min-height:0; }
  .audience-grid,.story-grid,.promise-grid { gap:45px; }
  .roadmap-exploring-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roadmap-contact { grid-template-columns:48px minmax(0,1fr); }
  .roadmap-contact .button { grid-column:2; justify-self:start; }
  .contact-layout { grid-template-columns:1fr; gap:38px; }
  .contact-form { width:100%; }
}
@media (max-width: 900px) {
  .sdp-sidebar { display:none; }
  .sdp-topbar-right { display:none; }
}
@media (max-width: 700px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .nav { min-height:64px; gap:12px; }
  .nav-actions { margin-left:auto; gap:8px; }
  .sign-in,.nav-actions .button { display:none; }
  .mobile-nav { padding:0 14px 14px; flex-direction:column; gap:3px; }
  .mobile-nav.open { display:flex; }
  .mobile-nav a { padding:11px 10px; border-radius:8px; font-size:14px; }
  .mobile-nav a:hover { background:#eef3f1; }
  .mobile-nav .nav-dropdown summary { padding:11px 10px; border-radius:8px; font-size:14px; }
  .mobile-nav .nav-dropdown summary:hover { background:#eef3f1; }
  .mobile-nav .nav-dropdown-menu { position:static; min-width:0; margin:0 0 5px 12px; padding:3px; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
  .mobile-nav .nav-dropdown-menu a { padding:9px 12px; }
  .mobile-nav .nav-dropdown-label { display:block; padding:8px 12px 3px; }
  .section { padding:75px 0; }
  .hero { padding:62px 0 70px; }
  h1 { font-size:43px; }
  .hero-lead { font-size:17px; }
  .hero-product { transform:none; }
  .dojo-member-preview { min-height:0; }
  .dojo-package-row { grid-template-columns:23px minmax(0,1fr) auto; }
  .product-body { grid-template-columns:48px 1fr; }
  .product-main { padding:17px; }
  .product-sidebar { gap:20px; }
  .trust-inner { flex-wrap:wrap; justify-content:flex-start; padding:16px 0; gap:12px 18px; }
  .trust-inner > span { width:100%; }
  .feature-grid { grid-template-columns:1fr; }
  .pricing-grid,.pricing-faq-grid { grid-template-columns:1fr; }
  .pricing-card-featured { grid-column:auto; }
  .pricing-contact { padding:24px; }
  .pricing-trust-note { align-items:flex-start; text-align:left; }
  .usecase-grid,.usecase-answers { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:20px; }
  .step-line { width:1px;height:25px;margin:0 auto; }
  .audience-list { grid-template-columns:1fr; }
  .story-grid { gap:25px; }
  .turtle-card { height:300px; }
  .promise-grid > div:first-child { display:block; }
  .promise-icon { margin-bottom:16px; }
  .cta { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
  .social-links { flex-wrap:wrap; }
  .footer-small { grid-column:auto; flex-direction:column; gap:7px; }
  .roadmap-group-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .roadmap-planned-grid,.roadmap-exploring-grid { grid-template-columns:1fr; }
  .roadmap-contact { grid-template-columns:1fr; gap:14px; padding:24px; }
  .roadmap-contact .button { grid-column:auto; }
}
@media (prefers-color-scheme: dark) {
  body.dark-mode-auto { background:#101D27;color:#F7F2DF; }
}
