:root {
    --color-primary: #155f5c;
    --color-primary-deep: #0b4645;
    --color-secondary: #477e71;
    --color-accent: #d8a85f;
    --color-background: #fbfaf5;
    --color-surface-tint: #eef5f0;
    --color-text: #18312f;
    --color-muted: #5a706d;
    --color-card: #ffffff;
    --color-border: #d7e3df;
    --radius-card: 1.35rem;
    --shadow-card: 0 1.25rem 3.5rem rgba(24, 49, 47, 0.09);
    --font-heading: ui-serif, Georgia, Cambria, "Times New Roman", "Noto Serif Malayalam", serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans Malayalam", sans-serif;
    --font-size-base: 1rem;
    --section-spacing: clamp(4rem, 9vw, 7.5rem);
    --animation-speed: 700ms;
    --container: 74rem;
}

.cms-page__header .cms-rich-text {
    margin-top: 1.5rem;
}

.cms-section {
    background: var(--cms-section-background, transparent);
}

.cms-section__inner {
    max-width: 58rem;
}

.cms-section--align-center .cms-section__inner {
    margin-inline: auto;
    text-align: center;
}

.cms-section--align-right .cms-section__inner {
    margin-left: auto;
    text-align: right;
}

.cms-section--bg-soft {
    --cms-section-background: #f1f6f2;
}

.cms-section--bg-primary {
    --cms-section-background: #dcece4;
}

.cms-section--bg-secondary {
    --cms-section-background: #edf1e7;
}

.cms-section--bg-accent {
    --cms-section-background: #fff2d9;
}

.cms-section--bg-muted {
    --cms-section-background: #eef1ef;
}

.cms-section--bg-transparent {
    --cms-section-background: transparent;
}

.cms-rich-text > :first-child {
    margin-top: 0;
}

.cms-rich-text > :last-child {
    margin-bottom: 0;
}

.cms-rich-text a {
    color: var(--color-primary-deep);
    font-weight: 700;
}

.desktop-nav__group {
    position: relative;
}

.desktop-nav__submenu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.65rem);
    left: 0;
    display: none;
    min-width: 13rem;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.desktop-nav__submenu a {
    display: block;
    padding: 0.55rem 0.65rem;
    border-radius: 0.45rem;
}

.desktop-nav__group:hover .desktop-nav__submenu,
.desktop-nav__group:focus-within .desktop-nav__submenu {
    display: block;
}

.mobile-nav__panel nav .mobile-nav__child {
    padding-left: 2rem;
    font-size: 0.9em;
}

.cms-section {
    position: relative;
    overflow: hidden;
}

.cms-section__inner {
    position: relative;
    z-index: 2;
}

.cms-section--image-left .cms-section__inner,
.cms-section--image-right .cms-section__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
}

.cms-section--image-left .managed-image--foreground {
    grid-column: 1;
    grid-row: 1;
}

.cms-section--image-left .cms-section__content {
    grid-column: 2;
}

.cms-section--image-right .managed-image--foreground {
    grid-column: 2;
}

.cms-section--image-above .cms-section__inner {
    display: flex;
    flex-direction: column;
}

.cms-section--image-above .managed-image--foreground {
    order: -1;
}

.managed-image {
    margin: 1.5rem 0 0;
}

.managed-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    object-fit: cover;
}

.managed-image figcaption {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.managed-image--background {
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: 0;
}

.managed-image--background,
.managed-image--background picture,
.managed-image--background img {
    width: 100%;
    height: 100%;
}

.managed-image--background img {
    border-radius: 0;
}

.cms-section:has(.managed-image--background)::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(251, 250, 245, 0.78);
    content: "";
}

@media (max-width: 48rem) {
    .cms-section--image-left .cms-section__inner,
    .cms-section--image-right .cms-section__inner {
        grid-template-columns: 1fr;
    }

    .cms-section--image-left .managed-image--foreground,
    .cms-section--image-left .cms-section__content,
    .cms-section--image-right .managed-image--foreground {
        grid-column: 1;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.68;
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

img,
picture {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-primary);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-primary-deep);
}

button,
input,
textarea {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

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

h1,
h2,
h3 {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.55rem, 7vw, 5.8rem);
}

h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
}

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

.container--narrow {
    max-width: 49rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    transform: translateY(-160%);
    border-radius: 0.6rem;
    background: var(--color-text);
    color: #fff;
}

.skip-link:focus {
    transform: translateY(0);
}

.announcement {
    background: var(--color-primary-deep);
    color: #eaf4f1;
    font-size: 0.82rem;
}

.announcement__inner {
    display: flex;
    min-height: 2.4rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
}

.announcement p {
    margin: 0;
}

.announcement__mark {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #96cabb;
    box-shadow: 0 0 0 0.28rem rgba(150, 202, 187, 0.18);
}

.site-header {
    position: relative;
    z-index: 50;
    border-bottom: 1px solid rgba(21, 95, 92, 0.11);
    background: rgba(251, 250, 245, 0.95);
}

.site-header__inner {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-primary-deep);
    text-decoration: none;
}

.brand__mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 0.85rem 0.85rem 0.85rem 0.25rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    place-items: center;
    transform: rotate(-3deg);
}

.brand__logo {
    display: grid;
    width: clamp(2.5rem, 9vw, 8.5rem);
    max-height: 3.2rem;
    flex: 0 0 auto;
    place-items: center;
}

.brand__logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 3.2rem;
    object-fit: contain;
}

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

.brand strong {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1;
}

.brand small {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    line-height: 1.1;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.desktop-nav a {
    position: relative;
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.desktop-nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.55rem;
    left: 0;
    height: 2px;
    transform: scaleX(0);
    background: var(--color-primary);
    content: "";
    transition: transform 180ms ease-out;
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.header-actions,
.language-switcher {
    display: flex;
    align-items: center;
}

.language-switcher {
    padding: 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
}

.language-switcher a {
    display: grid;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 50%;
    color: var(--color-muted);
    font-size: 0.73rem;
    font-weight: 800;
    place-items: center;
    text-decoration: none;
}

.language-switcher a[aria-current="true"] {
    background: var(--color-primary);
    color: #fff;
}

.nav-toggle {
    display: none;
    min-height: 2.8rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
}

.nav-toggle__lines,
.nav-toggle__lines::before,
.nav-toggle__lines::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    content: "";
}

.nav-toggle__lines {
    position: relative;
}

.nav-toggle__lines::before {
    position: absolute;
    top: -0.35rem;
}

.nav-toggle__lines::after {
    position: absolute;
    top: 0.35rem;
}

.mobile-nav {
    position: fixed;
    z-index: 200;
    inset: 0;
    background: rgba(12, 45, 43, 0.55);
    backdrop-filter: blur(5px);
}

.mobile-nav__panel {
    width: min(88%, 23rem);
    min-height: 100%;
    margin-left: auto;
    padding: 1.25rem;
    background: var(--color-background);
    box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.15);
}

.mobile-nav__top,
.mobile-nav__language {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav__top {
    margin-bottom: 2rem;
}

.icon-button {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.6rem;
    place-items: center;
}

.mobile-nav nav {
    display: grid;
}

.mobile-nav nav a {
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    text-decoration: none;
}

.mobile-nav nav a[aria-current="page"] {
    color: var(--color-primary);
}

.mobile-nav__language {
    justify-content: flex-start;
    gap: 0.7rem;
    margin-top: 2rem;
    font-size: 0.88rem;
}

.mobile-nav__language a {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
}

.mobile-nav__language a[aria-current="true"] {
    background: var(--color-primary);
    color: #fff;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 7.8rem) 0;
    background:
        radial-gradient(circle at 14% 20%, rgba(216, 168, 95, 0.13), transparent 24rem),
        linear-gradient(135deg, #fbfaf5 20%, #edf5f0 100%);
}

.hero::after {
    position: absolute;
    right: -9rem;
    bottom: -11rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgba(21, 95, 92, 0.12);
    border-radius: 45% 55% 60% 40%;
    content: "";
    transform: rotate(25deg);
}

.hero__grid,
.page-hero__grid {
    display: grid;
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.8fr);
}

.hero__copy {
    position: relative;
    z-index: 2;
}

.eyebrow {
    margin-bottom: 0.8rem;
    color: var(--color-secondary);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 12ch;
    margin-bottom: 1.5rem;
}

.hero__lead,
.lead {
    max-width: 43rem;
    color: var(--color-muted);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.button,
.button-link {
    display: inline-flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.35rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.button:hover {
    transform: translateY(-2px);
    background: var(--color-primary-deep);
    color: #fff;
}

.button--secondary {
    background: transparent;
    color: var(--color-primary);
}

.button--compact {
    min-height: 2.55rem;
    padding: 0.45rem 1rem;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.availability-note {
    display: flex;
    max-width: 38rem;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.4rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.availability-note span {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    margin-top: 0.42rem;
    border-radius: 50%;
    background: var(--color-accent);
}

.hero-art {
    position: relative;
    min-height: 31rem;
    overflow: hidden;
    border: 1px solid rgba(21, 95, 92, 0.16);
    border-radius: 48% 48% 3rem 3rem;
    background: linear-gradient(160deg, #dbece2 0%, #94c1ad 48%, #3e786c 100%);
    box-shadow: var(--shadow-card);
}

.hero-art__sun {
    position: absolute;
    top: 12%;
    right: 13%;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(255, 237, 196, 0.82);
    box-shadow: 0 0 3rem rgba(255, 237, 196, 0.55);
}

.hero-art__path {
    position: absolute;
    right: 17%;
    bottom: -16%;
    width: 50%;
    height: 75%;
    border-radius: 50% 50% 0 0;
    background: rgba(249, 232, 196, 0.7);
    transform: rotate(13deg);
}

.hero-art__leaf {
    position: absolute;
    border-radius: 90% 0 90% 0;
    background: rgba(15, 78, 70, 0.72);
    transform: rotate(28deg);
}

.hero-art__leaf--one {
    bottom: 20%;
    left: -5%;
    width: 14rem;
    height: 7rem;
}

.hero-art__leaf--two {
    right: -8%;
    bottom: 7%;
    width: 17rem;
    height: 8rem;
    transform: rotate(-18deg);
}

.hero-art__card {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.87);
    backdrop-filter: blur(10px);
}

.hero-art__card span {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 0.5;
}

.hero-art__card p {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.section {
    padding: var(--section-spacing) 0;
}

.section--flush-top {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.section--tint {
    background: var(--color-surface-tint);
}

.section--dark {
    background: var(--color-primary-deep);
    color: #dcecea;
}

.section-heading {
    max-width: 45rem;
    margin-bottom: clamp(2rem, 5vw, 3.8rem);
}

.section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.section-heading > p:last-child {
    color: var(--color-muted);
    font-size: 1.05rem;
}

.card-grid {
    display: grid;
    gap: 1rem;
}

.card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.topic-card,
.value-card,
.article-preview,
.contact-card,
.urgent-card,
.form-card,
.statement-grid > article,
.limits-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: 0 0.8rem 2.5rem rgba(24, 49, 47, 0.055);
}

.topic-card {
    min-height: 16rem;
    padding: 1.6rem;
}

.topic-card p,
.value-card p,
.article-preview p,
.statement-grid p {
    color: var(--color-muted);
}

.topic-card__icon {
    position: relative;
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    background: var(--color-surface-tint);
    place-items: center;
}

.topic-card__icon::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-primary);
    border-radius: 50% 50% 50% 10%;
    content: "";
    transform: rotate(35deg);
}

.topic-card__icon--moon::before {
    border-width: 0 0 2px 2px;
    border-radius: 50%;
}

.topic-card__icon--path::before {
    border: 0;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 50%;
}

.steps {
    display: grid;
    max-width: 60rem;
    gap: 0;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.steps li {
    display: grid;
    gap: 1.5rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 4rem 1fr;
}

.steps li > span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    place-items: center;
}

.steps h3,
.steps p {
    margin-bottom: 0.35rem;
}

.steps p {
    color: var(--color-muted);
}

.split-layout,
.support-grid,
.contact-layout {
    display: grid;
    gap: clamp(2rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.benefit-list {
    display: grid;
    gap: 1rem;
}

.benefit-list article {
    display: grid;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2.5rem 1fr;
}

.benefit-list h3,
.benefit-list p {
    margin-bottom: 0.3rem;
}

.benefit-list p {
    color: var(--color-muted);
}

.check-mark {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--color-surface-tint);
    color: var(--color-primary);
    font-weight: 900;
    place-items: center;
}

.safety-panel {
    display: grid;
    align-items: start;
    gap: 2rem;
    grid-template-columns: 5rem 1fr;
}

.safety-panel h2 {
    max-width: 18ch;
    color: #fff;
}

.safety-panel p:not(.eyebrow) {
    max-width: 48rem;
}

.safety-panel .eyebrow {
    color: #9dcbbc;
}

.safety-panel__mark {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    place-items: center;
}

.text-link {
    font-weight: 800;
}

.text-link--light {
    color: #fff;
}

.article-preview {
    overflow: hidden;
    padding: 0 1.5rem 1.5rem;
}

.article-preview__art {
    height: 9rem;
    margin: 0 -1.5rem 1.5rem;
    background:
        radial-gradient(circle at 70% 40%, rgba(255, 235, 192, 0.9) 0 11%, transparent 12%),
        linear-gradient(145deg, #d9eade, #7aa896);
}

.article-preview:nth-child(2) .article-preview__art {
    background:
        linear-gradient(35deg, transparent 44%, rgba(255,255,255,.45) 45% 55%, transparent 56%),
        linear-gradient(145deg, #d8cfae, #74938a);
}

.article-preview:nth-child(3) .article-preview__art {
    background:
        radial-gradient(ellipse at 35% 60%, #4b7a6e 0 18%, transparent 19%),
        linear-gradient(145deg, #e9d4ac, #9dbbad);
}

.status-chip {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--color-surface-tint);
    color: var(--color-primary-deep);
    font-size: 0.72rem;
    font-weight: 750;
}

.support-grid {
    align-items: center;
}

.contact-card {
    padding: clamp(1.5rem, 4vw, 2.6rem);
}

.contact-card p {
    color: var(--color-muted);
}

.page-hero {
    padding: clamp(4rem, 9vw, 7rem) 0;
    background:
        radial-gradient(circle at 85% 10%, rgba(216, 168, 95, 0.13), transparent 23rem),
        linear-gradient(140deg, #fbfaf5, #edf5f0);
}

.page-hero--compact {
    padding-bottom: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.page-hero--safety {
    background: #fff3e5;
}

.page-hero h1 {
    max-width: 15ch;
    margin-bottom: 1.4rem;
}

.page-hero--compact h1,
.page-hero--compact .lead,
.page-hero--safety h1,
.page-hero--safety .lead {
    margin-inline: auto;
}

.orbital-art {
    position: relative;
    width: min(100%, 28rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid rgba(21, 95, 92, 0.16);
    border-radius: 50%;
}

.orbital-art::before,
.orbital-art::after {
    position: absolute;
    border: 1px solid rgba(21, 95, 92, 0.2);
    border-radius: 50%;
    content: "";
    inset: 15%;
}

.orbital-art::after {
    background: linear-gradient(145deg, rgba(216, 168, 95, 0.28), rgba(21, 95, 92, 0.23));
    inset: 31%;
}

.orbital-art span {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-radius: 50% 50% 50% 10%;
    background: var(--color-primary);
}

.orbital-art span:nth-child(1) {
    top: 12%;
    left: 23%;
}

.orbital-art span:nth-child(2) {
    right: 8%;
    bottom: 30%;
    background: var(--color-accent);
}

.orbital-art span:nth-child(3) {
    bottom: 3%;
    left: 29%;
    background: #8bb5a8;
}

.statement-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.statement-grid > article {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.value-card {
    min-height: 15rem;
    padding: 1.5rem;
}

.value-card > span {
    display: block;
    width: 2rem;
    height: 0.3rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    background: var(--color-accent);
}

.narrative {
    display: grid;
    gap: clamp(3rem, 7vw, 6rem);
}

.narrative > article:not(.limits-panel) {
    max-width: 52rem;
}

.narrative > article:nth-child(2) {
    margin-left: auto;
}

.narrative > article p {
    color: var(--color-muted);
    font-size: 1.05rem;
}

.limits-panel {
    padding: clamp(1.5rem, 5vw, 3.5rem);
    background: var(--color-primary-deep);
}

.limits-panel h2,
.limits-panel li {
    color: #fff;
}

.plain-check-list {
    display: grid;
    gap: 0.85rem;
    padding: 0;
    list-style: none;
}

.plain-check-list li {
    position: relative;
    padding-left: 1.8rem;
}

.plain-check-list li::before {
    position: absolute;
    left: 0;
    color: var(--color-accent);
    content: "—";
}

.search-field {
    max-width: 38rem;
    margin: 2.2rem auto 0;
    text-align: left;
}

.search-field label,
.field label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 800;
}

input,
textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #9eb5b0;
    border-radius: 0.7rem;
    background: #fff;
    color: var(--color-text);
}

textarea {
    resize: vertical;
}

.faq-list,
.legal-copy {
    display: grid;
    gap: 2.8rem;
}

.faq-category h2 {
    font-size: 1.5rem;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
    position: relative;
    padding: 1.25rem 3rem 1.25rem 0;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    position: absolute;
    top: 1.1rem;
    right: 0;
    display: grid;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-primary);
    content: "+";
    place-items: center;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item div {
    max-width: 43rem;
    padding: 0 2.5rem 1.25rem 0;
    color: var(--color-muted);
}

.faq-empty {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    text-align: center;
}

.contact-layout {
    align-items: start;
    grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
}

.urgent-card,
.form-card {
    padding: clamp(1.4rem, 4vw, 2.3rem);
}

.urgent-card {
    position: sticky;
    top: 1rem;
    background: #fff8ed;
}

.urgent-card > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #4e3819;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    place-items: center;
}

.form-card form,
.installer-card form,
.installer-card fieldset {
    display: grid;
    gap: 1.25rem;
}

.field-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-help {
    margin: 0.45rem 0 0;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.checkbox-field {
    display: grid;
    align-items: start;
    gap: 0.7rem;
    grid-template-columns: 1.25rem 1fr;
}

.checkbox-field input {
    width: 1.15rem;
    min-height: 1.15rem;
    margin-top: 0.25rem;
}

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

.alert,
.draft-notice,
.notice {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    background: var(--color-surface-tint);
}

.alert--error,
.notice--error {
    border-color: #d6a4a4;
    background: #fff1ef;
    color: #6e2929;
}

.alert--success,
.notice--success {
    border-color: #9bc8ae;
    background: #f1fbf5;
}

.draft-notice {
    margin-top: 1.8rem;
    border-color: #e2c58f;
    background: #fff8e9;
    color: #624d2b;
    font-weight: 700;
}

.legal-copy > section {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-copy h2 {
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.legal-copy p,
.legal-copy li {
    color: var(--color-muted);
}

.action-list {
    display: grid;
    gap: 1rem;
    padding-left: 1.4rem;
}

.site-footer {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.5rem;
    background: #102f2e;
    color: #bed0ce;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1.45fr 0.7fr 1fr 1.2fr;
}

.brand--footer strong,
.site-footer h2 {
    color: #fff;
}

.brand--footer small {
    color: #9db7b4;
}

.footer-brand p {
    max-width: 29rem;
    margin-top: 1.25rem;
}

.site-footer h2 {
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer nav {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
}

.site-footer a {
    color: #dce8e7;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom p:last-child {
    max-width: 45rem;
}

.cookie-notice {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 150;
    display: flex;
    width: min(calc(100% - 2rem), 55rem);
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-inline: auto;
    padding: 1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1rem 4rem rgba(12, 45, 43, 0.2);
}

.cookie-notice p {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.cookie-notice__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
    font-size: 0.83rem;
}

.installer-shell {
    display: grid;
    min-height: 68vh;
    padding: var(--section-spacing) 1rem;
    place-items: center;
}

.installer-card {
    width: min(100%, 48rem);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

.installer-card h1 {
    max-width: 18ch;
    font-size: clamp(2rem, 6vw, 3.5rem);
}

.installer-card h2,
.installer-card legend,
.installer-card label {
    font-weight: 700;
}

.installer-card fieldset {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
}

.check-list {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    list-style: none;
}

.check-pass {
    color: #19613f;
}

.check-fail {
    color: #8a2d2d;
}

code {
    overflow-wrap: anywhere;
}

@media (max-width: 64rem) {
    .desktop-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        margin-left: 0.6rem;
    }

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

    .footer-grid {
        grid-template-columns: 1.3fr 0.7fr 1fr;
    }

    .footer-safety {
        grid-column: 1 / -1;
    }
}

@media (max-width: 48rem) {
    .hero__grid,
    .page-hero__grid,
    .split-layout,
    .support-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .hero-art {
        min-height: 25rem;
    }

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

    .urgent-card {
        position: static;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand,
    .footer-safety {
        grid-column: 1 / -1;
    }

    .cookie-notice {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 36rem) {
    .announcement__mark,
    .brand small,
    .language-switcher {
        display: none;
    }

    .site-header__inner {
        min-height: 4.5rem;
    }

    .hero {
        padding-top: 3.5rem;
    }

    .hero h1,
    .page-hero h1 {
        font-size: clamp(2.4rem, 13vw, 3.8rem);
    }

    .hero-art {
        min-height: 21rem;
    }

    .button-row,
    .button-row .button {
        width: 100%;
    }

    .card-grid--three,
    .card-grid--four,
    .statement-grid,
    .field-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .steps li {
        gap: 0.8rem;
        grid-template-columns: 3.25rem 1fr;
    }

    .safety-panel {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-safety {
        grid-column: auto;
    }

    .footer-bottom,
    .cookie-notice__actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    .announcement,
    .site-header,
    .cookie-notice,
    .site-footer,
    .button {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .section,
    .page-hero {
        padding: 1rem 0;
    }
}

.floating-chat__panel .chat-clear {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Phase 9 visual system: reference palette navy -> sky -> white */
:root {
    --color-primary: #176fd1;
    --color-primary-deep: #123f8f;
    --color-secondary: #2c78c8;
    --color-accent: #79c6ff;
    --color-background: #f7fbff;
    --color-surface-tint: #eaf5ff;
    --color-text: #10294d;
    --color-muted: #526b89;
    --color-card: #ffffff;
    --color-border: #cfe2f5;
    --radius-card: 1.5rem;
    --shadow-card: 0 1.4rem 3.8rem rgba(17, 63, 143, 0.13);
    --font-heading: "Avenir Next", "Segoe UI", "Noto Sans Malayalam", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Segoe UI", "Noto Sans Malayalam", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
    background:
        radial-gradient(circle at 9% 12%, rgba(44, 132, 226, 0.10), transparent 26rem),
        linear-gradient(135deg, #edf7ff 0%, #f9fcff 46%, #ffffff 100%);
}

h1,
h2,
h3 {
    font-weight: 760;
    letter-spacing: -0.04em;
}

h1 { font-size: clamp(2.65rem, 6.3vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.15rem); }

.icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -0.2em;
}

.announcement { background: #0c3277; }
.announcement__mark { background: #79c6ff; box-shadow: 0 0 0 0.28rem rgba(121, 198, 255, 0.2); }
.site-header {
    position: sticky;
    top: 0;
    border-color: rgba(18, 63, 143, 0.1);
    background: rgba(248, 252, 255, 0.88);
    backdrop-filter: blur(16px);
}
.brand__mark {
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #123f8f, #4ba9f0);
    box-shadow: 0 0.65rem 1.3rem rgba(18, 63, 143, 0.22);
    font-family: var(--font-heading);
    transform: none;
}
.brand strong { font-family: var(--font-heading); font-weight: 800; }
.language-switcher { background: rgba(255, 255, 255, 0.82); }

.button { gap: 0.55rem; border-color: #176fd1; background: linear-gradient(135deg, #123f8f, #258ee7); box-shadow: 0 0.8rem 1.7rem rgba(18, 63, 143, 0.18); }
.button:hover { background: linear-gradient(135deg, #0c3277, #176fd1); }
.button--secondary { border-color: #b6d7f4; background: rgba(255, 255, 255, 0.72); color: #123f8f; box-shadow: none; }
.button--secondary:hover { background: #fff; color: #0c3277; }

.hero--phase9 {
    min-height: min(42rem, calc(100vh - 7.4rem));
    display: grid;
    align-items: center;
    padding: clamp(3.5rem, 8vw, 6.8rem) 0;
    background:
        radial-gradient(circle at 72% 34%, rgba(121, 198, 255, 0.42), transparent 25rem),
        linear-gradient(112deg, #123b86 0%, #247bcf 28%, #75c4f8 55%, #edf8ff 82%, #ffffff 100%);
}
.hero--phase9::after { border-color: rgba(255, 255, 255, 0.24); }
.hero--phase9 .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.78fr); }
.hero--phase9 .hero__copy { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.75rem; background: rgba(255, 255, 255, 0.9); box-shadow: 0 1.8rem 4.5rem rgba(8, 45, 105, 0.2); backdrop-filter: blur(18px); }
.hero--phase9 h1 { max-width: 13ch; margin-bottom: 1.15rem; font-size: clamp(2.8rem, 4.7vw, 4.35rem); }
.hero--phase9 .hero__lead { max-width: 36rem; margin-bottom: 0; }
.trust-line { display: flex; align-items: center; gap: 0.55rem; margin: 1.4rem 0 0; color: #45627f; font-size: 0.82rem; font-weight: 700; }
.trust-line .icon { color: #176fd1; }

.hero-visual {
    position: relative;
    min-height: 28rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 2.4rem;
    background: linear-gradient(150deg, rgba(14, 52, 125, 0.92), rgba(72, 168, 239, 0.78) 58%, rgba(244, 250, 255, 0.75));
    box-shadow: 0 2rem 5rem rgba(8, 45, 105, 0.28);
}
.hero-visual::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 3rem 3rem; content: ""; mask-image: linear-gradient(to bottom, #000, transparent); }
.hero-visual__orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.hero-visual__orb--one { top: 8%; right: 8%; width: 10rem; height: 10rem; background: rgba(255,255,255,.38); box-shadow: 0 0 4rem rgba(255,255,255,.45); }
.hero-visual__orb--two { bottom: 5%; left: -8%; width: 16rem; height: 16rem; background: rgba(18,63,143,.42); }
.hero-visual__path { position: absolute; right: -12%; bottom: -28%; width: 78%; height: 78%; border: 2rem solid rgba(255,255,255,.35); border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); }
.hero-visual__glass { position: absolute; z-index: 2; right: 1.4rem; bottom: 1.4rem; left: 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; align-items: center; padding: 1.25rem; border: 1px solid rgba(255,255,255,.58); border-radius: 1.25rem; background: rgba(255,255,255,.84); backdrop-filter: blur(18px); }
.hero-visual__glass > span { display: grid; width: 3.2rem; height: 3.2rem; grid-row: 1 / 3; border-radius: 1rem; background: #e5f4ff; color: #176fd1; place-items: center; }
.hero-visual__glass .icon { width: 1.7rem; height: 1.7rem; }
.hero-visual__glass strong { color: #10294d; font-size: 1rem; }
.hero-visual__glass small { color: #526b89; }

.section-heading--compact { max-width: 38rem; margin-bottom: 2rem; }
.feature-card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card { overflow: hidden; border: 1px solid #cfe2f5; border-radius: 1.6rem; background: #fff; box-shadow: 0 1.2rem 3rem rgba(18,63,143,.09); transition: transform 180ms ease, box-shadow 180ms ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 1.6rem 3.5rem rgba(18,63,143,.15); }
.feature-card__visual { display: grid; aspect-ratio: 3 / 2; min-height: 12rem; overflow: hidden; color: #fff; place-items: center; background: linear-gradient(140deg, #123f8f, #55b5f5); }
.feature-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
.feature-card:hover .feature-card__visual img { transform: scale(1.025); }
.feature-card__visual--2 { background: linear-gradient(140deg, #285aa7, #8acfff); }
.feature-card__visual--3 { background: linear-gradient(140deg, #0e347d, #4e9ee3 60%, #c9eaff); }
.feature-card__visual .icon { width: 4rem; height: 4rem; filter: drop-shadow(0 .6rem 1rem rgba(5,34,84,.22)); }
.feature-card__body { padding: 1.35rem; }
.feature-card__body h3 { margin-bottom: .55rem; }
.feature-card__body p { display: -webkit-box; min-height: 3.1em; margin-bottom: 1rem; overflow: hidden; color: #526b89; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.feature-card__body a, .text-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; text-decoration: none; }
.feature-card__body a .icon, .text-link .icon { width: 1rem; height: 1rem; }

.section--blue-wash { background: linear-gradient(125deg, #e4f3ff, #f9fcff 58%, #fff); }
.phase9-promise { display: grid; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: .62fr 1fr .72fr; }
.phase9-promise__visual { display: grid; aspect-ratio: 1; border-radius: 2rem; color: #fff; place-items: center; background: linear-gradient(145deg, #0e347d, #48a8ef); box-shadow: var(--shadow-card); }
.phase9-promise__visual .icon { width: 42%; height: 42%; }
.promise-points { display: grid; gap: .65rem; margin: 1.3rem 0; }
.promise-points span { display: flex; align-items: center; gap: .6rem; color: #314f72; font-weight: 700; }
.promise-points .icon { color: #176fd1; }
.phase9-promise__safety { padding: 1.4rem; border: 1px solid rgba(255,255,255,.34); border-radius: 1.4rem; background: #123f8f; color: #eaf6ff; box-shadow: 0 1.2rem 2.6rem rgba(18,63,143,.2); }
.phase9-promise__safety strong { display: block; margin-bottom: .5rem; color: #fff; font-size: 1.05rem; }
.phase9-promise__safety p { color: #d7edff; font-size: .9rem; }
.phase9-promise__safety a { color: #fff; font-weight: 800; }

.site-footer { background: #0c3277; }
.site-footer, .site-footer h2, .site-footer .brand, .site-footer a { color: #eff8ff; }
.site-footer p, .site-footer small { color: #c8e3f8; }

/* Floating chatbot */
.floating-chat { position: fixed; z-index: 300; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); display: grid; justify-items: end; gap: .8rem; pointer-events: none; }
.floating-chat > * { pointer-events: auto; }
.floating-chat__launcher { display: inline-flex; min-height: 4rem; align-items: center; gap: .65rem; padding: .45rem 1rem .45rem .45rem; border: 1px solid rgba(255,255,255,.66); border-radius: 999px; background: linear-gradient(135deg, #123f8f, #258ee7); color: #fff; box-shadow: 0 1rem 2.6rem rgba(8,45,105,.34); cursor: pointer; font-weight: 850; }
.floating-chat__avatar, .chat-avatar { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #e9f7ff, #b9e2ff); color: #176fd1; place-items: center; }
.floating-chat__avatar img, .chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.floating-chat__avatar .icon { width: 1.55rem; height: 1.55rem; }
.floating-chat__panel { width: min(26rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 7rem)); overflow: hidden; border-radius: 1.4rem; background: #fff; box-shadow: 0 1.8rem 5rem rgba(8,45,105,.3); }
.floating-chat__panel .chat-shell__header { padding: .8rem; background: linear-gradient(120deg, #0e347d, #258ee7); color: #fff; }
.floating-chat__panel .chat-shell__header strong, .floating-chat__panel .chat-shell__header small { color: #fff; }
.floating-chat__panel .chat-shell__header small { opacity: .82; }
.floating-chat__panel .chat-clear { margin-left: auto; color: #fff; }
.floating-chat__close { display: grid; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; font-size: 1.45rem; place-items: center; }
.floating-chat__boundary { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; background: #eaf5ff; color: #314f72; font-size: .72rem; }
.floating-chat__boundary > span { color: #176fd1; }
.floating-chat__boundary p { margin: 0; }
.floating-chat__boundary a { margin-left: auto; font-weight: 800; white-space: nowrap; }
.floating-chat__panel .chat-messages { min-height: 11rem; max-height: 16rem; padding: 1rem; }
.floating-chat__panel .chat-suggestions { padding: 0 .8rem .65rem; }
.floating-chat__panel .chat-suggestions button { min-width: 13rem; }
.floating-chat__panel .chat-composer { margin: 0 .8rem; }
.floating-chat__panel .chat-composer textarea { min-height: 3.2rem; max-height: 7rem; }
.floating-chat__panel .chat-privacy-note { padding: .6rem .8rem .8rem; }
.floating-chat__panel .chat-status { margin: .5rem; }
.chat-open .cookie-notice { z-index: 250; }

@media (max-width: 58rem) {
    .hero--phase9 .hero__grid { grid-template-columns: 1fr 0.75fr; gap: 1.5rem; }
    .phase9-promise { grid-template-columns: .5fr 1fr; }
    .phase9-promise__safety { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
    .site-header { position: relative; }
    .hero--phase9 { padding: 2rem 0 3rem; background: linear-gradient(145deg, #123b86, #55aef0 38%, #edf8ff 76%, #fff); }
    .hero--phase9 .hero__grid { grid-template-columns: 1fr; }
    .hero-visual { min-height: 20rem; }
    .feature-card-grid { grid-template-columns: 1fr; }
    .feature-card { display: grid; grid-template-columns: minmax(8rem, .75fr) 1.25fr; }
    .feature-card__visual { min-height: 100%; }
    .phase9-promise { grid-template-columns: 1fr; }
    .phase9-promise__visual { aspect-ratio: 2 / 1; }
    .floating-chat { right: .75rem; bottom: .75rem; left: .75rem; }
    .floating-chat__panel { width: 100%; max-height: calc(100dvh - 6rem); }
    .floating-chat__launcher span:last-child { display: none; }
    .floating-chat__launcher { min-width: 4rem; padding: .45rem; }
}

@media (max-width: 34rem) {
    .feature-card { grid-template-columns: 1fr; }
    .feature-card__visual { min-height: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .feature-card, .feature-card__visual img, .floating-chat__launcher { transition: none; }
    .feature-card:hover { transform: none; }
    .feature-card:hover .feature-card__visual img { transform: none; }
}

@media print {
    .floating-chat { display: none !important; }
}

/* Phase 8 safety, consent, and response feedback */
.chat-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.chat-consent input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.chat-message__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.chat-message__actions button {
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card);
    color: var(--color-text);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.chat-message__actions button:hover,
.chat-message__actions button:focus-visible {
    border-color: var(--color-primary);
}

.chat-sources--urgent {
    padding: 0.8rem 1rem 0.8rem 2rem;
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-tint);
}

/* Phase 7 chatbot */
.chat-page {
    min-height: calc(100vh - 8rem);
    padding: clamp(2rem, 6vw, 5rem) 0;
    background:
        radial-gradient(circle at 12% 16%, rgba(204, 228, 210, 0.75), transparent 34rem),
        linear-gradient(145deg, #f8fbf7 0%, #f0f6f2 100%);
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(24rem, 1.28fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 5rem);
}

.chat-introduction {
    position: sticky;
    top: 7rem;
}

.chat-introduction h1 {
    max-width: 12ch;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
}

.chat-safety-note {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-primary), transparent 72%);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.75);
}

.chat-safety-note p {
    margin: 0.45rem 0;
    color: var(--color-muted);
}

.chat-shell {
    overflow: hidden;
    border: 1px solid rgba(34, 89, 66, 0.16);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1.4rem 4rem rgba(35, 74, 58, 0.14);
}

.chat-shell__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.chat-shell__header > div {
    display: grid;
}

.chat-shell__header small {
    color: var(--color-muted);
}

.chat-avatar {
    display: grid;
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    place-items: center;
}

.chat-clear {
    margin-left: auto;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: 99rem;
    background: var(--color-surface-tint);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.chat-messages {
    display: flex;
    min-height: 23rem;
    max-height: 34rem;
    padding: 1.25rem;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.chat-message > div {
    max-width: min(85%, 38rem);
    padding: 0.9rem 1rem;
    border-radius: 0.35rem 1rem 1rem;
    background: var(--color-surface-tint);
    white-space: pre-wrap;
}

.chat-message p {
    margin: 0;
}

.chat-message--user {
    justify-content: flex-end;
}

.chat-message--user > div {
    border-radius: 1rem 1rem 0.35rem;
    background: var(--color-primary);
    color: #fff;
}

.chat-sources__heading {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.78rem;
}

.chat-sources {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.82rem;
}

.chat-status,
.chat-privacy-note {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.chat-status {
    align-self: center;
    max-width: 38rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    background: #fff8dc;
    text-align: center;
}

.chat-suggestions {
    display: flex;
    padding: 0 1.25rem 1rem;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.chat-suggestions button {
    min-width: min(18rem, 74vw);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--color-primary-deep);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.chat-suggestions button:hover,
.chat-suggestions button:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface-tint);
}

.chat-composer {
    margin: 0 1.25rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #fff;
}

.chat-composer textarea {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.35rem;
    resize: vertical;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
}

.chat-composer textarea:focus {
    outline: 0;
}

.chat-composer:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(34, 89, 66, 0.12);
}

.chat-composer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.chat-composer__actions > span {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.chat-composer .button {
    min-height: 2.5rem;
    padding: 0.55rem 1.1rem;
}

.chat-privacy-note {
    margin: 0;
    padding: 0.8rem 1.25rem 1.2rem;
    text-align: center;
}

@media (max-width: 50rem) {
    .chat-page {
        padding: 1.5rem 0 3rem;
    }

    .chat-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .chat-introduction {
        position: static;
    }

    .chat-introduction h1 {
        font-size: clamp(2.25rem, 11vw, 3.5rem);
    }

    .chat-shell {
        border-radius: 1.2rem;
    }

    .chat-messages {
        min-height: 21rem;
        max-height: 58vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-messages {
        scroll-behavior: auto;
    }
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.library-filters {
    display: grid;
    align-items: end;
    gap: 1rem;
    grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr)) auto;
}

.library-filters label {
    display: grid;
    gap: 0.45rem;
    font-weight: 800;
}

.library-language-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 0.88rem;
}

.library-language-filter span {
    font-weight: 800;
}

.knowledge-category-grid,
.knowledge-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-category-card,
.knowledge-card,
.review-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

.knowledge-category-card {
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem;
    color: inherit;
    text-decoration: none;
}

.knowledge-category-card strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.3rem;
}

.knowledge-category-card .managed-image {
    margin: -1.4rem -1.4rem 0.35rem;
}

.knowledge-category-card__image img {
    width: 100%;
    height: 10rem;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    object-fit: cover;
}

.knowledge-category-card span,
.knowledge-category-card small {
    color: var(--color-muted);
}

.knowledge-card {
    overflow: hidden;
}

.knowledge-card .managed-image {
    margin: 0;
}

.knowledge-card__image img {
    width: 100%;
    height: 13rem;
    object-fit: cover;
}

.knowledge-card__body {
    padding: 1.35rem;
}

.knowledge-card__body h2 {
    font-size: 1.45rem;
}

.knowledge-card__body h2 a {
    color: inherit;
    text-decoration: none;
}

.knowledge-card__body > p:not(.eyebrow, .knowledge-card__review) {
    color: var(--color-muted);
}

.knowledge-card__meta,
.article-taxonomy,
.article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.knowledge-card__meta span,
.article-taxonomy span {
    padding: 0.35rem 0.65rem;
    border-radius: 99rem;
    background: var(--color-surface-tint);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.knowledge-card__review {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
}

.pagination a {
    display: grid;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    place-items: center;
    text-decoration: none;
}

.pagination a[aria-current="page"] {
    background: var(--color-primary);
    color: #fff;
}

.article-container {
    width: min(calc(100% - 2rem), 54rem);
}

.knowledge-article__image {
    margin: -2rem 0 2rem;
}

.knowledge-article__image img {
    width: 100%;
    max-height: 35rem;
    border-radius: var(--radius-card);
    object-fit: cover;
}

.review-card {
    margin: 2rem 0;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-left: 0.35rem solid var(--color-primary);
}

.review-card h2 {
    margin-bottom: 0.35rem;
    font-size: 1.4rem;
}

.review-card dl {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.review-card dt {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.review-card dd {
    margin: 0.2rem 0 0;
    font-weight: 800;
}

.article-prepared {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.article-body {
    margin: 2.5rem 0;
    font-size: 1.08rem;
    line-height: 1.8;
}

.article-references {
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.article-references li {
    margin-bottom: 0.85rem;
    overflow-wrap: anywhere;
}

.article-actions {
    margin: 2rem 0 4rem;
}

.related-articles {
    background: var(--color-surface-tint);
}

@media (max-width: 56rem) {
    .library-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .knowledge-category-grid,
    .knowledge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 38rem) {
    .library-filters,
    .knowledge-category-grid,
    .knowledge-grid,
    .review-card dl {
        grid-template-columns: 1fr;
    }
}

@media print {
    .article-actions,
    .related-articles {
        display: none !important;
    }

    .knowledge-article__image {
        margin-top: 0;
    }

    .review-card {
        box-shadow: none;
    }
}