:root {
    --color-navy: #17233d;
    --color-navy-light: #263756;
    --color-green: #2f8f72;
    --color-green-dark: #24755d;
    --color-green-soft: #eaf6f1;
    --color-background: #f7f8fa;
    --color-surface: #ffffff;
    --color-text: #273247;
    --color-muted: #657086;
    --color-border: #e1e6ec;
    --color-warning: #d99b26;

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 32px;

    --shadow-soft: 0 24px 70px rgba(23, 35, 61, 0.12);
    --container-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(calc(100% - 40px), var(--container-width));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 248, 250, 0.92);
    border-bottom: 1px solid rgba(225, 230, 236, 0.8);
    backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-navy);
    font-size: 1.25rem;
    font-weight: 800;
}

.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--color-green);
    color: white;
}

.brand-accent {
    color: var(--color-green);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--color-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.main-nav a:hover {
    color: var(--color-navy);
}

.nav-button {
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--color-navy);
    color: white !important;
}

.hero {
    padding: 100px 0 90px;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    align-items: center;
    gap: 80px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 720px;
    margin-bottom: 26px;
    color: var(--color-navy);
    font-size: clamp(3rem, 7vw, 5.4rem);
    line-height: 0.99;
    letter-spacing: -0.055em;
}

h1 span {
    color: var(--color-green);
}

h2 {
    color: var(--color-navy);
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.hero-lead {
    max-width: 650px;
    margin-bottom: 34px;
    color: var(--color-muted);
    font-size: 1.2rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border-radius: 999px;
    font-weight: 750;
    transition: transform 180ms ease, background 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--color-green);
    color: white;
}

.button-primary:hover {
    background: var(--color-green-dark);
}

.button-secondary {
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-navy);
}

.button-light {
    background: white;
    color: var(--color-navy);
}

.hero-note {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.hero-card {
    position: relative;
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.hero-card::before {
    content: "";
    position: absolute;
    inset: -80px -80px auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(47, 143, 114, 0.11);
    filter: blur(10px);
    z-index: -1;
}

.hero-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.hero-card-header strong {
    display: block;
    color: var(--color-navy);
    font-size: 1.2rem;
}

.card-label {
    display: block;
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-green);
    box-shadow: 0 0 0 7px var(--color-green-soft);
}

.member-list {
    display: grid;
    gap: 12px;
}

.member {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: var(--radius-small);
    background: var(--color-background);
}

.avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-navy);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

.member strong,
.member small {
    display: block;
}

.member strong {
    color: var(--color-navy);
    font-size: 0.92rem;
}

.member small {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.member-status {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 900;
}

.status-ok {
    background: var(--color-green-soft);
    color: var(--color-green);
}

.status-wait {
    background: #fff4d8;
    color: var(--color-warning);
}

.checkin-button {
    width: 100%;
    min-height: 58px;
    margin-top: 20px;
    border: 0;
    border-radius: 16px;
    background: var(--color-green);
    color: white;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.section {
    padding: 100px 0;
}

.section-soft {
    background: var(--color-green-soft);
}

.section-heading {
    max-width: 730px;
    margin-bottom: 50px;
}

.section-heading p {
    color: var(--color-muted);
    font-size: 1.08rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-card {
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: white;
}

.feature-number {
    color: var(--color-green);
    font-size: 0.8rem;
    font-weight: 900;
}

.feature-card h3 {
    margin: 40px 0 12px;
    color: var(--color-navy);
    font-size: 1.35rem;
}

.feature-card p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.audience-card {
    min-height: 110px;
    display: flex;
    align-items: flex-end;
    padding: 22px;
    border: 1px solid rgba(47, 143, 114, 0.17);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.75);
    color: var(--color-navy);
    font-weight: 750;
}

.values-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
}

.values-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.values-list strong {
    display: block;
    margin-bottom: 6px;
    color: var(--color-navy);
    font-size: 1.1rem;
}

.values-list p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.cta-section {
    padding: 30px 0 100px;
}

.cta-box {
    padding: 70px;
    border-radius: var(--radius-large);
    background: var(--color-navy);
    color: white;
    text-align: center;
}

.cta-box h2 {
    max-width: 760px;
    margin-inline: auto;
    color: white;
}

.cta-box > p {
    max-width: 650px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, 0.72);
}

.waitlist-form {
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
    text-align: left;
}

.waitlist-field {
    display: grid;
    gap: 8px;
    color: white;
    font-weight: 700;
}

.waitlist-field input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: white;
    color: var(--color-text);
    font: inherit;
}

.waitlist-field input:focus {
    outline: 3px solid rgba(142, 215, 193, 0.45);
    outline-offset: 1px;
}

.waitlist-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
}

.waitlist-consent input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--color-green);
}

.waitlist-submit {
    width: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.cta-box .waitlist-note {
    max-width: none;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    text-align: center;
}

.waitlist-consent a,
.waitlist-note a {
    color: white;
    text-decoration: underline;
}

/* Privacy policy */
.privacy-policy {
    max-width: 800px;
}

.privacy-policy h1 {
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
}

.privacy-policy h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
}

.privacy-policy p,
.privacy-policy li {
    color: var(--color-muted);
}

.privacy-policy ul {
    padding-left: 1.25rem;
}

.privacy-policy a {
    color: var(--color-green-dark);
    text-decoration: underline;
}

/* Interactive product demo */
.demo-body {
    --demo-blue: #246bd7;
    --demo-blue-dark: #124caa;
    --demo-blue-soft: #eaf3ff;
    --demo-orange: #9a6500;
    --demo-red: #ac3438;
    min-height: 100vh;
    background: #eef3f9;
    color: var(--color-navy);
}

.demo-header {
    border-bottom: 1px solid #e4eaf2;
    background: #fff;
}

.demo-header-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.demo-back-link {
    color: var(--demo-blue-dark);
    font-size: 0.9rem;
    font-weight: 700;
}

.demo-back-link:hover {
    text-decoration: underline;
}

.demo-shell {
    width: min(calc(100% - 20px), 620px);
    margin-inline: auto;
    padding: 16px 0 44px;
}

.demo-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
    color: #526178;
    font-size: 1rem;
    line-height: 1.5;
}

.demo-notice strong {
    color: var(--color-navy);
}

.demo-app-card {
    overflow: hidden;
    border: 1px solid #e2e8f1;
    border-radius: 28px;
    background: #f7f9fc;
    box-shadow: 0 20px 54px rgba(26, 46, 82, 0.11);
}

.demo-app-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    background: #fff;
}

.demo-group-context,
.demo-user-context {
    min-width: 0;
    display: flex;
    align-items: center;
}

.demo-group-context {
    gap: 10px;
}

.demo-user-context {
    flex: 0 0 auto;
    gap: 7px;
}

.demo-context-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--demo-blue-soft);
    color: var(--demo-blue-dark);
}

.demo-context-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.demo-context-copy {
    min-width: 0;
}

.demo-context-copy > span {
    display: block;
    margin-bottom: 1px;
    color: var(--color-muted);
    font-size: 0.91rem;
    font-weight: 750;
}

.demo-context-copy h1 {
    max-width: 230px;
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.12rem, 4.8vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-user-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #dfe9f6;
}

.demo-user-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

.demo-user-name {
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 800;
}

.demo-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: #718097;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.demo-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 16px;
    border-block: 1px solid #e8edf4;
    background: #fff;
}

.demo-tab {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 6px 5px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 800;
    cursor: pointer;
}

.demo-tab svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.demo-tab:hover,
.demo-tab[aria-selected="true"] {
    color: var(--demo-blue-dark);
}

.demo-tab[aria-selected="true"] {
    border-bottom-color: var(--demo-blue);
}

.demo-tab:focus-visible,
.demo-checkin-button:focus-visible,
.demo-back-link:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.38);
    outline-offset: 3px;
}

.demo-panel {
    padding: 18px 16px 24px;
}

.demo-panel[hidden] {
    display: none;
}

.demo-status-card {
    padding: 20px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(145deg, #edf6ff 0%, #e8f1ff 58%, #f6f9ff 100%);
    box-shadow: 0 12px 28px rgba(31, 91, 171, 0.1), inset 0 0 0 1px rgba(131, 178, 231, 0.24);
}

.demo-status-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-status-calendar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    color: var(--demo-blue);
    box-shadow: 0 8px 18px rgba(43, 103, 180, 0.1);
}

.demo-status-calendar svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.demo-status-heading h2 {
    margin: 0 0 2px;
    color: var(--color-navy);
    font-size: clamp(1.25rem, 4.9vw, 1.45rem);
    letter-spacing: -0.025em;
}

.demo-status-heading p {
    margin: 0;
    color: #50627c;
    font-size: 1rem;
    line-height: 1.5;
}

.demo-status-heading p strong {
    color: var(--color-navy);
    white-space: nowrap;
}

.demo-status-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-green-dark);
    font-size: 0.91rem;
    font-weight: 800;
}

.demo-status-live > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-green);
}

.demo-checkin-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 0;
    color: #50627c;
}

.demo-checkin-total strong {
    color: var(--color-navy);
    font-size: clamp(2rem, 10vw, 2.7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
}

.demo-checkin-total span {
    font-size: 1.05rem;
    font-weight: 700;
}

.demo-progress {
    height: 9px;
    overflow: hidden;
    margin-top: 15px;
    border-radius: 999px;
    background: rgba(115, 153, 198, 0.22);
}

.demo-progress span {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f9879, #4eb596);
}

.demo-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.demo-panel-heading h2 {
    margin-bottom: 4px;
    font-size: 1.45rem;
    letter-spacing: -0.025em;
}

.demo-panel-heading p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 1rem;
}

.demo-member-section {
    margin-top: 24px;
}

.demo-member-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-inline: 2px;
}

.demo-member-section-heading h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.demo-member-section-heading > span {
    color: var(--color-muted);
    font-size: 0.95rem;
    font-weight: 700;
}

.demo-member-list {
    display: grid;
    gap: 10px;
}

.demo-member {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 128px;
    align-items: center;
    gap: 4px;
    min-height: 78px;
    padding: 10px 9px;
    border: 1px solid rgba(222, 229, 239, 0.85);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(30, 48, 79, 0.065);
}

.demo-member-avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #f3f6fa;
}

.demo-member-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

.demo-member-avatar circle:first-child { fill: #e7effa; }
.demo-avatar-skin { fill: #f0c5a2; }
.demo-avatar-hair { fill: #665167; }
.demo-avatar-shirt { fill: #4c76ad; }
.demo-avatar-janina circle:first-child { fill: #f7ead9; }
.demo-avatar-janina .demo-avatar-hair { fill: #c8c2bb; }
.demo-avatar-janina .demo-avatar-shirt { fill: #c47b62; }
.demo-avatar-marek circle:first-child { fill: #dff0ea; }
.demo-avatar-marek .demo-avatar-skin { fill: #dca97f; }
.demo-avatar-marek .demo-avatar-hair { fill: #4b3a32; }
.demo-avatar-marek .demo-avatar-shirt { fill: #397d6a; }
.demo-avatar-zofia circle:first-child { fill: #eee8f7; }
.demo-avatar-zofia .demo-avatar-hair { fill: #d1d4dc; }
.demo-avatar-zofia .demo-avatar-shirt { fill: #77639a; }

.demo-member-main {
    min-width: 0;
}

.demo-member-name {
    display: block;
    color: var(--color-navy);
    font-size: clamp(1.125rem, 4.6vw, 1.25rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.demo-member-status {
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 7px 5px;
    border-radius: 13px;
    font-size: 1rem;
    line-height: 1.25;
}

.demo-status-icon {
    min-width: 1em;
    font-size: 0.9em;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.demo-status-checked {
    background: #e5f6ee;
    color: var(--color-green-dark);
}

.demo-member-status strong,
.demo-member-status small {
    display: block;
}

.demo-member-status strong {
    font-size: inherit;
    font-weight: 850;
}

.demo-member-status small {
    margin-top: 2px;
    color: currentColor;
    font-size: 0.9375rem;
    font-weight: 700;
}

.demo-status-waiting {
    background: #fff3d8;
    color: var(--demo-orange);
}

.demo-status-missing {
    background: #fde9ea;
    color: var(--demo-red);
}

.demo-status-outside {
    background: #eeeef5;
    color: #565971;
}

.demo-help-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 4px 0;
    border: 0;
    border-top: 1px solid #e1e6ed;
    border-radius: 0;
    background: transparent;
}

.demo-help-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--demo-blue-dark);
}

.demo-help-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.demo-help-card h2 {
    margin-bottom: 2px;
    font-size: 1.125rem;
}

.demo-help-card p {
    margin-bottom: 0;
    color: #526178;
    font-size: 1rem;
    line-height: 1.5;
}

.demo-checkin-area {
    margin-top: 20px;
    text-align: center;
}

.demo-checkin-button {
    width: 100%;
    min-height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #1f70dd, #1559bc);
    color: white;
    font: inherit;
    font-size: 1.3rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(22, 87, 185, 0.26);
}

.demo-checkin-button svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.demo-checkin-button:hover {
    background: var(--demo-blue-dark);
}

.demo-action-note,
.demo-action-feedback {
    margin: 8px 0 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.demo-action-feedback {
    color: var(--demo-blue-dark);
    font-weight: 800;
}

.demo-feed {
    display: grid;
    gap: 12px;
}

.demo-entry {
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fafbfd;
}

.demo-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.demo-entry-header strong {
    color: var(--color-navy);
    font-size: 1rem;
}

.demo-entry-header time {
    color: var(--color-muted);
    font-size: 0.86rem;
}

.demo-entry p {
    margin-bottom: 0;
    color: var(--color-text);
    font-size: 1rem;
}

.demo-board-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--color-green-dark);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.demo-footer {
    padding: 22px 0 32px;
    color: #59657a;
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 480px) {
    .demo-app-context {
        padding-inline: 14px;
    }

    .demo-group-context {
        gap: 7px;
    }

    .demo-context-icon {
        width: 40px;
        height: 40px;
    }

    .demo-context-icon svg {
        width: 24px;
        height: 24px;
    }

    .demo-context-copy h1 {
        max-width: 168px;
        font-size: 1.12rem;
    }

    .demo-user-context {
        gap: 5px;
    }

    .demo-user-avatar {
        width: 38px;
        height: 38px;
    }

    .demo-user-name {
        font-size: 1rem;
    }

    .demo-chevron {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 370px) {
    .demo-header-inner {
        min-height: 66px;
    }

    .demo-header .brand {
        gap: 7px;
        font-size: 1.05rem;
    }

    .demo-header .brand-mark {
        width: 36px;
        height: 36px;
    }

    .demo-back-link {
        font-size: 0.8rem;
    }

    .demo-shell {
        width: min(calc(100% - 12px), 620px);
        padding-top: 10px;
    }

    .demo-user-name,
    .demo-user-context .demo-chevron {
        display: none;
    }

    .demo-context-copy h1 {
        max-width: 158px;
    }

    .demo-tabs {
        padding-inline: 8px;
    }

    .demo-tab {
        min-height: 64px;
        font-size: 1rem;
    }

    .demo-panel {
        padding-inline: 12px;
    }

    .demo-status-card {
        padding: 17px;
    }

    .demo-status-live {
        position: absolute;
        top: -4px;
        right: -3px;
    }

    .demo-status-heading {
        padding-top: 23px;
    }

    .demo-member {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .demo-member-avatar {
        width: 50px;
        height: 50px;
    }

    .demo-member-status {
        grid-column: 2;
        width: fit-content;
        min-height: 44px;
        margin-top: -5px;
    }
}

@media (max-width: 240px) {
    .demo-header-inner {
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        padding-block: 12px;
    }

    .demo-app-context {
        flex-wrap: wrap;
    }

    .demo-group-context {
        width: 100%;
    }

    .demo-context-copy h1 {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .demo-tabs {
        grid-template-columns: 1fr;
        padding-inline: 0;
    }

    .demo-tab {
        min-height: 52px;
        flex-direction: row;
        border-bottom-width: 2px;
    }

    .demo-status-heading,
    .demo-checkin-total {
        flex-wrap: wrap;
    }

    .demo-member {
        grid-template-columns: 44px minmax(0, 1fr);
        padding-inline: 8px;
    }

    .demo-member-avatar {
        width: 44px;
        height: 44px;
    }

    .demo-member-status {
        grid-column: 1 / -1;
        width: 100%;
        gap: 6px;
        margin-top: 0;
        padding-inline: 6px;
    }
}

@media (min-width: 700px) {
    .demo-shell {
        padding-top: 34px;
    }

    .demo-app-context {
        padding: 20px 24px;
    }

    .demo-panel {
        padding: 24px 26px 30px;
    }

    .demo-member {
        grid-template-columns: 56px minmax(0, 1fr) 144px;
        padding-inline: 14px;
    }
}

.app-body {
    --app-blue: #246bd7;
    --app-blue-dark: #124caa;
    --app-blue-soft: #eaf3ff;
    min-width: 0;
    background: #f4f7fb;
    color: var(--color-text);
    font-size: 1.125rem;
}

.app-header {
    border-bottom: 1px solid #e2e8f1;
    background: #fff;
}

.app-header .brand-accent {
    color: #23745c;
}

.app-header-inner {
    width: min(calc(100% - 28px), 720px);
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-inline: auto;
}

.app-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.app-user-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--app-blue-soft);
    color: var(--app-blue-dark);
    font-size: 1.15rem;
    font-weight: 850;
    box-shadow: 0 0 0 2px #d8e7fb;
}

.app-user-copy {
    min-width: 0;
    display: grid;
    line-height: 1.22;
}

.app-user-copy small {
    color: var(--color-muted);
    font-size: 0.9375rem;
    font-weight: 700;
}

.app-user-copy strong {
    max-width: 180px;
    overflow: hidden;
    color: var(--color-navy);
    font-size: 1.0625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell {
    width: min(calc(100% - 20px), 720px);
    min-height: calc(100vh - 156px);
    margin-inline: auto;
    padding: 20px 0 36px;
}

.app-workspace {
    overflow: hidden;
    border: 1px solid #e0e7f0;
    border-radius: 28px;
    background: #f8fafd;
    box-shadow: 0 20px 54px rgba(26, 46, 82, 0.11);
}

.app-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    background: #fff;
}

.app-group-context {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-context-icon,
.app-empty-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--app-blue-soft);
    color: var(--app-blue-dark);
}

.app-context-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
}

.app-context-icon svg,
.app-empty-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-context-copy {
    min-width: 0;
}

.app-context-copy > span {
    display: block;
    margin-bottom: 2px;
    color: var(--color-muted);
    font-size: 0.9375rem;
    font-weight: 750;
}

.app-context-copy h1 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.app-group-picker {
    flex: 0 1 300px;
}

.app-group-picker label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.9375rem;
    font-weight: 750;
}

.app-group-picker > div {
    display: flex;
    gap: 8px;
}

.app-group-picker select,
.app-group-picker button {
    min-height: 52px;
    border: 2px solid #d8e1ed;
    border-radius: 13px;
    background: #fff;
    color: var(--color-navy);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 750;
}

.app-group-picker select {
    min-width: 0;
    flex: 1 1 auto;
    padding: 8px 36px 8px 11px;
}

.app-group-picker button {
    flex: 0 0 auto;
    padding-inline: 14px;
    border-color: var(--app-blue);
    background: var(--app-blue);
    color: #fff;
    cursor: pointer;
}

.app-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: 16px;
    border-block: 1px solid #e7edf4;
    background: #fff;
}

.app-tab {
    min-width: 0;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 6px 6px;
    border: 0;
    border-bottom: 3px solid var(--app-blue);
    background: transparent;
    color: var(--app-blue-dark);
    font: inherit;
    font-size: 1.125rem;
    font-weight: 850;
}

.app-tab svg {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.app-tab > span {
    min-width: 0;
}

.app-tab small {
    display: block;
    margin-top: 1px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

.app-tab-unavailable {
    border-bottom-color: transparent;
    color: #6c778a;
}

.app-panel {
    padding: 24px 20px 28px;
}

.app-empty-state,
.app-no-group {
    text-align: center;
}

.app-empty-state {
    padding: 32px 20px;
    border: 1px solid #e0e8f2;
    border-radius: 22px;
    background: #fff;
}

.app-no-group {
    padding: 52px 24px;
    border: 1px solid #e0e7f0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 54px rgba(26, 46, 82, 0.1);
}

.app-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 20px;
}

.app-eyebrow {
    margin-bottom: 7px;
    color: var(--app-blue-dark);
    font-size: 0.9375rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-empty-state h2,
.app-no-group h1,
.app-admin-action h2 {
    color: var(--color-navy);
    letter-spacing: -0.03em;
}

.app-empty-state h2,
.app-no-group h1 {
    margin-bottom: 10px;
    font-size: clamp(1.55rem, 6vw, 2rem);
    line-height: 1.15;
}

.app-empty-state > p:last-child,
.app-no-group > p:last-child {
    max-width: 540px;
    margin: 0 auto;
    color: #58667b;
    font-size: 1.05rem;
    line-height: 1.55;
}

.app-schedule-feedback {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}

.app-schedule-feedback-success {
    border-color: #a9d9bd;
    background: #edf9f1;
    color: #17623a;
}

.app-schedule-feedback-error {
    border-color: #efb8b8;
    background: #fff3f3;
    color: #932929;
}

.app-schedule-feedback-neutral {
    border-color: #cbd5e1;
    background: #f4f7fa;
    color: #445269;
}

.app-member-schedule,
.app-schedules,
.app-group-statuses {
    padding: 22px;
    border: 1px solid #dfe8f3;
    border-radius: 22px;
    background: #fff;
}

.app-member-dashboard {
    display: grid;
    gap: 18px;
}

.app-member-today {
    position: relative;
    overflow: hidden;
    border: 0;
    background: linear-gradient(145deg, #edf6ff 0%, #e8f1ff 58%, #f7faff 100%);
    box-shadow: 0 12px 28px rgba(31, 91, 171, 0.1), inset 0 0 0 1px rgba(131, 178, 231, 0.28);
}

.app-member-today::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -85px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.48);
    pointer-events: none;
}

.app-member-today > * {
    position: relative;
    z-index: 1;
}

.app-member-today-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-member-today-heading .app-eyebrow {
    margin: 0 0 3px;
}

.app-member-today-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    color: var(--app-blue-dark);
    box-shadow: 0 7px 18px rgba(31, 91, 171, 0.1);
}

.app-member-today-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-group-statuses {
    margin-top: 0;
}

.app-group-statuses-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.app-group-statuses-heading > p {
    margin: 0;
    color: #58667b;
    font-size: 0.95rem;
    line-height: 1.4;
}

.app-group-status-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.app-group-status-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(190px, 1.2fr);
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid #dfe8f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(30, 48, 79, 0.055);
}

.app-group-status-card .app-schedule-member {
    min-width: 0;
    margin-bottom: 0;
}

.app-group-status-card h3 {
    overflow-wrap: anywhere;
}

.app-group-status-summary {
    min-width: 0;
    display: grid;
    justify-items: end;
    text-align: right;
}

.app-group-status-summary .app-group-window-time {
    font-size: 0.92rem;
}

.app-group-status-summary .app-window-status {
    justify-content: center;
    margin-top: 6px;
    text-align: left;
}

.app-group-window-time {
    margin: 0;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}

.app-group-status-card .app-window-status,
.app-manager-window .app-window-status {
    max-width: 100%;
    white-space: normal;
}

.app-member-schedule h2,
.app-schedules h2 {
    margin: 0;
    color: var(--color-navy);
    font-size: clamp(1.45rem, 5vw, 1.8rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.app-schedule-time {
    margin: 18px 0 2px;
    color: var(--app-blue-dark);
    font-size: clamp(2rem, 10vw, 2.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.app-schedule-timezone,
.app-schedule-empty,
.app-schedule-scope {
    color: #58667b;
    font-size: 1rem;
    line-height: 1.5;
}

.app-schedule-timezone {
    margin: 8px 0 0;
    font-weight: 750;
}

.app-schedule-change-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #dfe8f3;
}

.app-schedule-change-form label {
    min-width: 0;
    color: #58667b;
    font-size: 0.95rem;
    font-weight: 800;
}

.app-schedule-change-form label > span {
    display: block;
    margin-bottom: 5px;
}

.app-schedule-change-form input,
.app-schedule-change-form button {
    min-height: 52px;
    border-radius: 13px;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
}

.app-schedule-change-form input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 2px solid #d5dfeb;
    background: #fff;
    color: var(--color-navy);
}

.app-schedule-change-form button {
    padding: 9px 15px;
    border: 0;
    background: var(--app-blue);
    color: #fff;
    cursor: pointer;
}

.app-schedule-change-status {
    display: grid;
    gap: 4px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    background: #f4f7fa;
    color: #445269;
    font-size: 0.95rem;
    line-height: 1.4;
}

.app-schedule-change-status-approved {
    border-color: #a9d9bd;
    background: #edf9f1;
    color: #17623a;
}

.app-schedule-change-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.app-schedule-change-actions form {
    margin: 0;
}

.app-schedule-card .app-schedule-change-actions button {
    min-height: 44px;
}

.app-schedule-card .app-schedule-change-reject {
    border: 2px solid #9b3d48;
    background: #fff;
    color: #842f39;
}

.app-daily-window {
    margin-top: 18px;
}

.app-daily-window .app-schedule-time {
    margin-top: 0;
}

.app-window-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    margin: 16px 0 0;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.35;
}

.app-window-status-upcoming,
.app-window-status-ended {
    background: #eef2f7;
    color: #445269;
}

.app-window-status-open {
    background: #fff2c7;
    color: #765600;
}

.app-window-status-completed {
    gap: 6px;
    background: #e9f8ef;
    color: #17623a;
}

.app-window-status-missed {
    gap: 6px;
    background: #fff0f0;
    color: #8b1d1d;
}

.app-checkin-completed-time {
    margin: 8px 0 0;
    color: #17623a;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.2;
}

.app-checkin-completed-time span {
    font-size: 1rem;
    font-weight: 750;
}

.app-daily-window form {
    margin-top: 18px;
}

.app-checkin-action {
    width: 100%;
    min-height: 60px;
    padding: 12px 20px;
    border: 0;
    border-radius: 16px;
    background: var(--app-blue);
    color: #fff;
    font: inherit;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
}

.app-checkin-action span {
    margin-right: 6px;
}

.app-checkin-action:hover {
    background: var(--app-blue-dark);
}

.app-window-note {
    margin: 10px 0 0;
    color: #58667b;
    font-size: 1rem;
    line-height: 1.45;
}

.app-daily-window-empty {
    min-height: 118px;
    display: grid;
    align-content: center;
    justify-items: start;
}

.app-daily-window-empty .app-window-status {
    margin-top: 0;
}

.app-member-help {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 6px;
    color: #526178;
}

.app-member-help-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid #b9cbe3;
    border-radius: 50%;
    color: var(--app-blue-dark);
    font-weight: 900;
}

.app-member-help h2 {
    margin: 0 0 2px;
    color: var(--color-navy);
    font-size: 1.1rem;
}

.app-member-help p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.app-member-settings {
    padding: 18px 20px;
    border: 1px solid #dfe8f3;
    border-radius: 18px;
    background: #fff;
}

.app-member-settings h2 {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.3rem;
}

.app-member-settings-current {
    margin: 8px 0 0;
    color: #58667b;
    font-size: 1rem;
}

.app-member-settings-details {
    margin-top: 14px;
    border-top: 1px solid #dfe8f3;
}

.app-member-settings-details summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    color: var(--app-blue-dark);
    font-weight: 850;
    cursor: pointer;
}

.app-member-settings-details summary:focus-visible,
.app-schedule-change-form input:focus-visible,
.app-schedule-change-form button:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.4);
    outline-offset: 3px;
}

.app-member-settings-details .app-schedule-change-form {
    margin-top: 0;
    padding-top: 8px;
    border-top: 0;
}

.app-schedule-empty {
    margin: 18px 0 0;
}

.app-schedules-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.app-schedules-heading > p {
    margin: 0;
    color: #58667b;
    font-size: 0.95rem;
    line-height: 1.4;
}

.app-schedule-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.app-schedule-card {
    padding: 16px;
    border: 1px solid #dfe8f3;
    border-radius: 18px;
    background: #f8fafd;
}

.app-schedule-member {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.app-schedule-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--app-blue-soft);
    color: var(--app-blue-dark);
    font-size: 1.15rem;
    font-weight: 900;
}

.app-schedule-member h3 {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.2rem;
    line-height: 1.25;
}

.app-schedule-member p {
    margin: 2px 0 0;
    color: #58667b;
    font-size: 1rem;
    font-weight: 750;
}

.app-schedule-card .app-schedule-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.app-manager-window {
    display: grid;
    gap: 6px;
    margin: 0 0 14px 58px;
    color: #58667b;
    font-size: 1rem;
    line-height: 1.4;
}

.app-manager-window .app-window-status {
    justify-self: start;
    margin: 0;
}

.app-manager-completed-time {
    font-weight: 900;
}

.app-schedule-card label {
    min-width: 0;
    color: #58667b;
    font-size: 0.95rem;
    font-weight: 800;
}

.app-schedule-card label > span {
    display: block;
    margin-bottom: 5px;
}

.app-schedule-card input,
.app-schedule-card button {
    min-height: 52px;
    border-radius: 13px;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
}

.app-schedule-card input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 2px solid #d5dfeb;
    background: #fff;
    color: var(--color-navy);
}

.app-schedule-card button {
    padding: 9px 15px;
    border: 0;
    background: var(--app-blue);
    color: #fff;
    cursor: pointer;
}

.app-schedule-card input:focus-visible,
.app-schedule-card button:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.4);
    outline-offset: 3px;
}

.app-schedule-card button:hover {
    background: var(--app-blue-dark);
}

.app-schedule-lifecycle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: -5px 0 12px 58px;
    font-size: 0.92rem;
    font-weight: 850;
}

.app-schedule-lifecycle-active {
    color: #287451;
}

.app-schedule-lifecycle-disabled {
    color: #58667b;
}

.app-schedule-disable-note {
    margin: 13px 0 8px;
    color: #58667b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.app-schedule-card .app-schedule-disable {
    display: block;
}

.app-schedule-card .app-schedule-disable button {
    min-height: 44px;
    border: 2px solid #9b3d48;
    background: #fff;
    color: #842f39;
}

.app-schedule-card .app-schedule-disable button:hover {
    background: #fff2f3;
}

.app-schedule-scope {
    margin: 14px 4px 0;
}

.app-admin-action {
    display: grid;
    gap: 18px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dce6f2;
    border-radius: 20px;
    background: #fff;
}

.app-admin-action h2 {
    margin-bottom: 5px;
    font-size: 1.3rem;
}

.app-admin-action p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.app-primary-action {
    width: 100%;
    min-height: 56px;
    padding: 10px 18px;
    border: 0;
    border-radius: 16px;
    background: var(--app-blue);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 850;
    cursor: pointer;
}

.app-logout {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.app-logout button {
    min-height: 52px;
    padding: 8px 22px;
    border: 2px solid #d4dce7;
    border-radius: 999px;
    background: transparent;
    color: #4e5c72;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.app-group-picker select:focus-visible,
.app-group-picker button:focus-visible,
.app-tab:focus-visible,
.app-primary-action:focus-visible,
.app-checkin-action:focus-visible,
.app-logout button:focus-visible,
.app-header .brand:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.4);
    outline-offset: 3px;
}

.app-group-picker button:hover,
.app-primary-action:hover {
    background: var(--app-blue-dark);
}

.app-logout button:hover {
    border-color: #aeb9c8;
    background: #fff;
    color: var(--color-navy);
}

.app-footer {
    padding: 0 14px 28px;
    color: var(--color-muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 600px) {
    .app-header-inner {
        min-height: 70px;
    }

    .app-header .brand {
        gap: 7px;
        font-size: 1.08rem;
    }

    .app-header .brand-mark {
        width: 38px;
        height: 38px;
    }

    .app-user-copy small {
        display: none;
    }

    .app-user-copy strong {
        max-width: 100px;
    }

    .app-context {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .app-group-picker {
        flex-basis: auto;
    }

    .app-tabs {
        padding-inline: 8px;
    }

    .app-tab {
        min-height: 78px;
        flex-direction: column;
        gap: 3px;
        font-size: 1.125rem;
        line-height: 1.15;
    }

    .app-tab small {
        font-size: 0.9375rem;
    }

    .app-panel {
        padding: 16px 12px 20px;
    }

    .app-empty-state {
        padding: 28px 15px;
    }

    .app-member-schedule,
    .app-schedules,
    .app-group-statuses {
        padding: 18px 15px;
    }

    .app-member-settings {
        padding: 16px 15px;
    }

    .app-group-status-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 4px 10px;
    }

    .app-group-status-card .app-schedule-member {
        display: contents;
    }

    .app-group-status-card .app-schedule-avatar {
        grid-column: 1;
        grid-row: 1;
    }

    .app-group-status-card .app-schedule-member > div {
        grid-column: 2;
        grid-row: 1;
    }

    .app-group-status-summary {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .app-group-status-summary .app-window-status {
        justify-content: flex-start;
    }

    .app-group-statuses-heading {
        align-items: start;
        flex-direction: column;
        gap: 6px;
    }

    .app-schedules-heading {
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    .app-schedule-card form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-schedule-change-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-schedule-change-form button {
        grid-column: 1 / -1;
    }

    .app-manager-window {
        grid-template-columns: 1fr;
        gap: 3px;
        margin-left: 0;
    }

    .app-schedule-card button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 340px) {
    .app-header-inner {
        width: min(calc(100% - 18px), 720px);
    }

    .app-user-avatar {
        width: 40px;
        height: 40px;
    }

    .app-user-copy strong {
        max-width: 62px;
    }

    .app-shell {
        width: min(calc(100% - 12px), 720px);
    }

    .app-group-status-summary {
        width: 100%;
        grid-column: 1 / -1;
        justify-items: start;
        padding-top: 4px;
    }

    .app-group-status-summary .app-window-status {
        width: fit-content;
        max-width: 100%;
    }

    .app-tab {
        font-size: 1.0625rem;
    }

    .app-tab svg {
        width: 23px;
        height: 23px;
    }

    .app-group-picker > div {
        align-items: stretch;
        flex-direction: column;
    }
}

.waitlist-feedback {
    padding: 13px 15px;
    border-radius: var(--radius-small);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}

.waitlist-feedback-success {
    background: var(--color-green-soft);
    color: var(--color-green-dark);
}

.waitlist-feedback-error {
    background: #fff0f0;
    color: #9b2c2c;
}

.registration-main {
    min-height: 70vh;
    font-size: 1.125rem;
    background:
        radial-gradient(circle at top right, rgba(47, 143, 114, 0.14), transparent 34rem),
        var(--color-background);
}

.registration-shell {
    display: grid;
    gap: 32px;
    padding-block: 48px 72px;
}

.registration-intro {
    max-width: 680px;
}

.registration-intro h1,
.registration-confirmation h1 {
    color: var(--color-navy);
    font-size: clamp(2.2rem, 9vw, 4rem);
    line-height: 1.05;
}

.registration-form,
.registration-confirmation-card {
    width: 100%;
    max-width: 720px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.form-field {
    margin-bottom: 22px;
}

.form-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--color-navy);
    font-weight: 750;
}

.form-field input {
    width: 100%;
    min-height: 56px;
    padding: 13px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-small);
    background: white;
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
}

.form-field input:focus,
.consent-row input:focus-visible {
    border-color: var(--color-green);
    outline: 3px solid rgba(47, 143, 114, 0.22);
    outline-offset: 2px;
}

.form-field input[aria-invalid="true"] {
    border-color: #a32b2b;
}

.field-help,
.field-error,
.registration-note {
    margin: 7px 0 0;
    font-size: 1em;
}

.field-help,
.registration-note {
    color: var(--color-muted);
}

.field-error {
    color: #8b1d1d;
    font-weight: 700;
}

.registration-alert {
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: var(--radius-small);
    background: #fff0f0;
    color: #7f1d1d;
    font-weight: 750;
}

.registration-consents {
    display: grid;
    gap: 12px;
    margin: 8px 0 24px;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.consent-row input {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--color-green);
}

.consent-row a {
    color: var(--color-green-dark);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.registration-submit,
.registration-home-link {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--color-navy);
    color: white;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.registration-submit {
    width: 100%;
}

.registration-submit:hover,
.registration-home-link:hover {
    background: var(--color-green-dark);
}

.registration-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.registration-confirmation {
    display: grid;
    place-items: center;
    padding-block: 72px 96px;
}

.registration-confirmation-card {
    text-align: center;
}

.registration-confirmation-card p {
    max-width: 580px;
    margin-inline: auto;
}

.phone-code-form {
    max-width: 360px;
    margin: 28px auto 18px;
    text-align: left;
}

.registration-resend-form {
    display: inline-block;
    margin: 0 8px 12px 0;
}

@media (min-width: 760px) {
    .registration-shell {
        grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1fr);
        align-items: start;
        gap: 64px;
        padding-block: 80px 100px;
    }

    .registration-intro {
        position: sticky;
        top: 120px;
    }

    .registration-form,
    .registration-confirmation-card {
        padding: 36px;
    }

    .registration-pin-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}

.site-footer {
    padding: 70px 0 25px;
    background: #10192c;
    color: rgba(255, 255, 255, 0.68);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-brand {
    color: white;
}

.footer-description {
    margin: 14px 0 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    margin-top: 50px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .main-nav a:not(.nav-button) {
        display: none;
    }

    .hero {
        padding-top: 70px;
    }

    .hero-grid,
    .values-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .feature-grid,
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 620px) {
    .container {
        width: min(calc(100% - 28px), var(--container-width));
    }

    .header-inner {
        min-height: 68px;
    }

    .nav-button {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    .hero {
        padding: 60px 0 70px;
    }

    h1 {
        font-size: clamp(2.8rem, 15vw, 4rem);
    }

    .hero-grid {
        display: block;
    }

    .hero-card {
        margin-top: 50px;
        padding: 20px;
    }

    .feature-grid,
    .audience-grid,
    .values-list {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 75px 0;
    }

    .cta-box {
        padding: 48px 22px;
    }

    .footer-inner {
        flex-direction: column;
    }
}