* {
  box-sizing: border-box;
}

:root {
  --brand-green: #1D5F31;
  --brand-green-hover: #174C27;
  --brand-green-pressed: #123B1E;
  --brand-green-soft: #EFF5F0;
  --brand-green-deep: #153F22;
  --brand-aubergine: #742574;
}

/* Dedicated email verification uses the shared card, navigation and buttons. */
.email-confirmation-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f6f6f3;
}

.email-confirmation-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(32px, 7vw, 80px) 7%;
}

.email-confirmation-page .email-confirmation-card {
  width: 100%;
  max-width: 560px;
  padding: clamp(26px, 5vw, 48px);
  text-align: center;
}

.email-confirmation-card h1 {
  margin: 20px 0;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1.2;
}

.email-confirmation-card .button {
  min-width: min(100%, 220px);
  max-width: 100%;
}

.email-confirmation-card [hidden] {
  display: none;
}

.email-confirmation-check {
  width: 64px;
  height: 64px;
  margin-top: 16px;
  color: var(--brand-green);
}

.email-confirmation-card a:not(.button) {
  color: var(--brand-aubergine);
}

.email-confirmation-card :focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 4px;
}

.email-confirmation-page footer {
  background: white;
}

.notification-management-page .email-confirmation-card {
  text-align: left;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #202020;
  background: #ffffff;
}

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

h2,
h3 {
  color: var(--brand-aubergine);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 76px;
  padding: 0 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
}

.foundation-name {
  font-size: 1.5rem;
  font-weight: 700;
}

nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav a,
.footer-links a {
  color: #222;
  text-decoration: none;
  font-size: 0.95rem;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
  line-height: 1.5;
  transition: background-color 160ms ease;
}

@media (pointer: coarse) {
  .site-header nav a {
    min-height: 44px;
  }
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  background-color: var(--brand-green-soft);
  text-decoration: none;
}

.site-header nav a:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.site-header nav .nav-support {
  padding: 6px 14px;
  margin: -6px 0;
  background: var(--brand-green);
  color: #fff;
  border-radius: 3px;
}

.site-header nav .nav-support:hover,
.site-header nav .nav-support:focus-visible {
  background-color: var(--brand-aubergine);
}

.site-header nav .nav-support:active {
  background-color: var(--brand-green-pressed);
}

/* Current-page links stay text-only while retaining keyboard focus outlines. */
.site-header nav a[aria-current="page"],
.site-header nav a[aria-current="page"]:is(:hover, :focus-visible, :active) {
  color: var(--brand-green);
  font-weight: 700;
  background: transparent;
  transition: none;
  cursor: default;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links a:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}

.hero {
  position: relative;
  min-height: clamp(28rem, 40vw, 40rem);
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(29, 95, 49, 0.9) 0%,
      rgba(29, 95, 49, 0.65) 40%,
      rgba(29, 95, 49, 0.15) 100%
    ),
    #527A5C;
  display: flex;
  align-items: center;
}

.hero-overlay {
  width: 58%;
  padding: clamp(3rem, 6vw, 5rem) 7%;
  position: relative;
  z-index: 2;
}

.hero-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  /* Reveal the existing hero background at both side edges. */
  -webkit-mask-image: linear-gradient(to right, transparent, black 18%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 18%, black 88%, transparent);
}

.hero-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  max-width: 650px;
  color: white;
}

.hero h1 {
  color: white;
  margin: 0;
  font-size: clamp(1.84rem, 4vw, 3.6rem);
  letter-spacing: -0.025em;
  /* Match GraManna's fluid 15-16px root using OAF's existing 16px root. */
  line-height: calc(1.03em + clamp(0px, calc(clamp(0.703125rem, 1.2vw, 0.75rem) - 1vw), 0.12em));
  overflow-wrap: anywhere;
}

.hero-headline-ending {
  display: block;
}

.hero p {
  margin: clamp(1.171875rem, 2vw, 1.25rem) 0 0;
  font-size: clamp(0.95rem, 1.625vw, 1.3875rem);
  line-height: 1.4;
}

.image-label {
  position: absolute;
  right: 7%;
  bottom: 25px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.content-section {
  padding: 95px 7%;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--brand-green);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h2 {
  margin-top: 0;
  font-size: 2.2rem;
}

.placeholder-text {
  max-width: 700px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #555;
}

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

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.gramanna-logo {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gramanna-logo img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
}

.how-it-works-section {
  /* Match GraManna's responsive rem sizing within this section only. */
  --how-rem: clamp(0.9375rem, 1.6vw, 1rem);
  padding: calc(2.5 * var(--how-rem)) max(calc(1.5 * var(--how-rem)), calc((100% - 1072px) / 2)) calc(3.5 * var(--how-rem));
  font-size: var(--how-rem);
  line-height: 1.6;
}

.how-it-works-section .section-inner {
  max-width: none;
}

.how-it-works-section .eyebrow {
  margin: 0 0 10px;
  font-size: calc(0.85 * var(--how-rem));
}

.how-it-works-section .how-it-works-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(0.5 * var(--how-rem)) calc(0.75 * var(--how-rem));
  margin: 0 0 var(--how-rem);
  font-size: calc(2.2 * var(--how-rem));
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}

.how-it-works-section .how-it-works-overview {
  display: inline-flex;
  align-items: center;
  gap: calc(0.75 * var(--how-rem));
  color: #666;
  font-size: var(--how-rem);
  font-weight: 400;
}

.how-it-works-section .how-it-works-divider {
  height: 1.25em;
  border-left: 1px solid #CE9EC3;
}

.how-it-works-section .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(1.5 * var(--how-rem));
  margin-top: calc(1.75 * var(--how-rem));
}

.how-it-works-section .step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: .6em 0;
  padding: calc(1.75 * var(--how-rem));
  background: #f6f6f3;
  border: 1px solid #DCE5DF;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 14px rgba(0, 0, 0, 0.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  transform: translateY(0);
  text-align: left;
  font-size: clamp(calc(0.9375 * var(--how-rem)), 1.2vw, calc(1.0625 * var(--how-rem)));
}

.how-it-works-section .step:hover,
.how-it-works-section .step:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 14px 28px rgba(0, 0, 0, 0.10);
}

.how-it-works-section .step > span {
  display: flex;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin-bottom: calc(1.25 * var(--how-rem));
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-aubergine);
  color: white;
  font-weight: 700;
  font-size: clamp(calc(0.9 * var(--how-rem)), 1.1vw, var(--how-rem));
}

.how-it-works-section .step h3 {
  margin: 0 0 calc(0.75 * var(--how-rem));
  font-size: calc(1.25 * var(--how-rem));
  line-height: 1.35;
  font-weight: 600;
}

.how-it-works-section .step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .how-it-works-section .step {
    padding: calc(1.25 * var(--how-rem));
  }
}

@media (max-width: 600px) {
  .how-it-works-section {
    padding: calc(2.25 * var(--how-rem)) calc(1.25 * var(--how-rem));
  }

  .how-it-works-section .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-it-works-section .step {
    padding: calc(1.5 * var(--how-rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works-section .step {
    transition: none;
  }

  .how-it-works-section .step:hover,
  .how-it-works-section .step:focus-within {
    transform: none;
  }
}

.difference-section {
  background: var(--brand-green);
  color: white;
}

.difference-section h2 {
  color: inherit;
}

.difference-section .eyebrow {
  color: #B7DE58;
}

.difference-section .placeholder-text {
  color: #dce7e2;
}

.contact-strip {
  padding: 80px 7%;
  text-align: center;
}

.button {
  display: inline-block;
  margin-top: 20px;
  padding: 13px 25px;
  background: var(--brand-green);
  color: white;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  background-color: var(--brand-aubergine);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(29, 95, 49, 0.18);
}

.button:active {
  background-color: var(--brand-green-pressed);
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(29, 95, 49, 0.14);
}

.button:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

footer {
  padding: 35px 7%;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

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

/* Informational pages: readable columns using the shared layout and palette. */
.faq-page,
.support-page,
.contact-page,
.legal-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.faq-page footer,
.support-page footer,
.contact-page footer,
.legal-page footer {
  margin-top: auto;
}

.faq-page .section-inner,
.support-page .section-inner,
.contact-page .section-inner,
.legal-page .section-inner {
  max-width: 800px;
}

.faq-intro,
.support-intro,
.contact-intro,
.legal-intro {
  background: var(--brand-green-soft);
}

.faq-intro h1,
.support-intro h1,
.contact-intro h1,
.legal-intro h1 {
  margin: 0;
  color: var(--brand-green);
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.faq-item + .faq-item {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #dce5df;
}

.faq-item h2,
.legal-content h2 {
  margin: 0 0 20px;
  color: var(--brand-aubergine);
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  line-height: 1.4;
}

.faq-item p,
.support-content p,
.legal-page article p,
.legal-content li {
  margin: 0 0 16px;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.7;
}

.faq-item > p:last-child,
.support-content > p:last-child {
  margin-bottom: 0;
}

.support-donation .button {
  margin-top: 0;
}

.faq-item a:not(.button),
.legal-content a,
.interface-note a:not(.button) {
  color: var(--brand-aubergine);
  text-underline-offset: 3px;
}

.faq-page a:focus-visible,
.support-page a:focus-visible,
.legal-page a:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}

#notification-form,
#confirmation-request-title,
#management-state {
  scroll-margin-top: 150px;
}

@media (max-width: 750px) {
  .faq-page .content-section,
  .support-page .content-section,
  .contact-page .content-section,
  .legal-page .content-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Legal documents reuse the informational-page layout and readable type. */
.legal-intro h1 {
  margin-bottom: 20px;
}

.legal-page article {
  overflow-wrap: anywhere;
}

.legal-content section + section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #dce5df;
}

.legal-content h3 {
  margin: 28px 0 16px;
  color: var(--brand-aubergine);
  font-size: 1.2rem;
  line-height: 1.4;
}

.legal-content ul {
  margin: 0 0 16px;
  padding-left: 1.5rem;
}

.legal-intro p:last-child,
.legal-content section > p:last-child {
  margin-bottom: 0;
}

.legal-page main {
  scroll-margin-top: 180px;
}

.legal-skip-link {
  position: fixed;
  top: -100px;
  left: 7%;
  z-index: 101;
  margin: 0;
}

.legal-skip-link:focus {
  top: 12px;
}

/* About page: build on the shared sections, typography, and components. */
.foundation-home {
  color: inherit;
  text-decoration: none;
}

.foundation-home:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 4px;
  border-radius: 3px;
}

.about-intro {
  background: var(--brand-green-soft);
}

.about-intro h1 {
  max-width: 800px;
  margin: 0 0 20px;
  color: var(--brand-green);
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.about-section-layout {
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
}

.about-section-layout h2 {
  margin-bottom: 0;
}

.about-story {
  background: #f6f6f3;
}

/* GraManna: shared section rhythm with access and future availability previews. */
.gramanna-page {
  --program-ink: var(--brand-green);
  --program-muted: #555;
  --program-surface: var(--brand-green-soft);
  --program-border: #dce5df;
}

.gramanna-page h1 {
  margin: 0 0 16px;
  color: var(--program-ink);
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.gramanna-page h2 {
  line-height: 1.15;
  text-wrap: balance;
}

.gramanna-page h3 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  line-height: 1.3;
}

.gramanna-page .eyebrow {
  margin-top: 0;
  line-height: 1.6;
}

.gramanna-page .placeholder-text {
  margin-bottom: 0;
}

.gramanna-intro,
.gramanna-notifications {
  background: var(--program-surface);
}

.gramanna-intro-layout {
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
}

.gramanna-lead {
  margin: 0;
  color: var(--program-ink);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.4;
}

.gramanna-brand-panel {
  padding: 45px 30px 30px;
  border: 1px solid var(--program-border);
  border-radius: 10px;
  background: white;
  text-align: center;
  box-shadow: 0 18px 40px rgba(29, 95, 49, 0.06);
}

.gramanna-brand-panel .gramanna-logo {
  min-height: 110px;
}

.gramanna-continuum {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 6px 16px 10px;
  border: 1px solid #c4d2c9;
}

.gramanna-brand-panel .eyebrow {
  margin: 0 auto;
  padding: 0 8px;
  letter-spacing: 0.03em;
  font-weight: 400;
}

.gramanna-brand-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--brand-green);
  font-size: 0.9rem;
  line-height: 1.6;
}

.gramanna-brand-panel p span {
  padding: 0 7px;
}

.gramanna-detail-layout {
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  gap: 60px;
}

.interface-card {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--program-border, #dce5df);
  border-radius: 8px;
  background: white;
}

.interface-card p,
.pilot-state-card p {
  color: var(--program-muted, #555);
  line-height: 1.65;
}

.interface-card > p:last-child {
  margin-bottom: 0;
}

.availability-badge {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 30px;
  background: #EEBE44;
  color: var(--brand-green-deep);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.development-update {
  border-left: 4px solid var(--brand-aubergine);
  background: #f6f6f3;
}

.development-update h3 {
  margin-top: 22px;
}

.interface-note,
.interface-card .interface-note {
  color: var(--program-muted, #555);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.6;
}


/* Reusable persistent action feedback. data-status selects success, error,
   information (default), or processing. Icons are decorative background masks;
   the existing live region announces only the original message text. */
.action-message:not(:empty) {
  position: relative;
  margin: 20px 0;
  padding: 16px 16px 16px 48px;
  border: 1px solid #666;
  border-radius: 8px;
  background: #f6f6f3;
  color: #202020;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}

.action-message:empty {
  margin: 0;
  border-width: 0;
}

.action-message:not(:empty)::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 16px;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6m0-10v1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.action-message[data-status="success"] {
  border-color: #496d60;
  background: #edf1ee;
  color: #233f36;
}

.action-message[data-status="success"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m7 12 3 3 7-7'/%3E%3C/g%3E%3C/svg%3E");
}

.action-message[data-status="error"] {
  border-color: #873d32;
  background: #fbefed;
  color: #873d32;
}

.action-message[data-status="error"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3zM12 9v5m0 3v1'/%3E%3C/g%3E%3C/svg%3E");
}

.action-message[data-status="processing"] {
  border-style: dashed;
}

.action-message[data-status="processing"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2v5l10 10v5M17 2v5L7 17v5'/%3E%3C/g%3E%3C/svg%3E");
}

@media (forced-colors: active) {
  .action-message:not(:empty)::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

.gramanna-access {
  background: var(--brand-green-soft);
  scroll-margin-top: 150px;
}

.gramanna-access-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 22px;
  margin-top: 38px;
}

.gramanna-access-grid .interface-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.access-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--brand-aubergine);
}

.gramanna-access-grid h3 {
  margin-top: 24px;
  margin-bottom: 0;
}

.gramanna-access-grid .button {
  width: 100%;
  margin-top: auto;
}

.gramanna-access-grid .interface-note {
  margin-top: 16px;
}

.gramanna-page .web-access-card {
  border-color: var(--program-ink);
  background: var(--program-ink);
  color: white;
}

.web-access-card h3 {
  color: inherit;
}

.web-access-card .access-icon,
.web-access-card p,
.web-access-card .interface-note {
  color: #dce7e2;
}

.web-access-card .availability-badge {
  background: #B7DE58;
  color: var(--brand-green-deep);
}

/* Native disabled buttons keep the same shape without hover or press effects. */
button.button {
  border: 0;
  font: inherit;
  line-height: 1.4;
  text-align: center;
}

.button:disabled {
  background: #edf1ee;
  color: #59645e;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.web-access-card .button:disabled {
  background: #dce7e2;
  color: #233f36;
}

.pilot-state-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.pilot-state-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  padding: 2px 6px;
  border: 1px dashed #8aa397;
  border-radius: 8px;
  background: var(--program-surface);
}

.gramanna-page .pilot-state-card h3 {
  margin: 0;
  color: var(--program-ink);
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.pilot-state-card p {
  margin: 0;
}

.state-request {
  background: #f6f6f3;
}

.field-label {
  display: block;
  margin: 22px 0 9px;
  font-size: 0.95rem;
  font-weight: 700;
}

.form-control {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--brand-green);
  border-radius: 4px;
  background: white;
  color: #202020;
  font: inherit;
}

.form-control:disabled {
  border-color: #cbd4ce;
  background: #f3f6f4;
  color: #59645e;
  opacity: 1;
  cursor: not-allowed;
}

.form-control::placeholder {
  color: #666;
  opacity: 1;
}

.form-control:focus-visible,
.preference-option input:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}

.notification-preferences {
  min-width: 0;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.notification-preferences legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
}

.notification-consent {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--program-border, #dce5df);
}

.notification-consent .notification-consent-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
}

.preference-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
}

.preference-option input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand-green);
}

.gramanna-expansion .section-inner {
  max-width: 800px;
}

@media (max-width: 1000px) {
  .gramanna-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-access-card {
    grid-column: 1 / -1;
  }

  .gramanna-intro-layout,
  .gramanna-detail-layout {
    gap: 32px;
  }
}

@media (max-width: 750px) {
  .gramanna-page .content-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .gramanna-page h2 {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }

  .gramanna-intro-layout,
  .gramanna-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .gramanna-brand-panel {
    padding: 32px 24px;
  }

  .interface-card {
    padding: 26px;
  }
}

@media (max-width: 550px) {
  .pilot-state-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gramanna-access-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .site-header {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  nav {
    gap: 14px 18px;
    flex-wrap: wrap;
  }

  .hero {
    min-height: 0;
    flex-direction: column;
  }

  .hero-overlay {
    width: 100%;
    padding: clamp(2.5rem, 7vw, 4rem) 7% 2rem;
  }

  .hero-image {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 88%, transparent);
  }
}

@media (max-width: 750px) {
  .about-page .content-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-page .two-column {
    gap: 24px;
  }

  .about-page h2 {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }

  .two-column {
    grid-template-columns: 1fr;
  }

  footer {
    flex-direction: column;
  }

  .footer-links {
    flex-wrap: wrap;
  }
}

/* Contact uses the shared form controls and informational-page layout. */
.contact-page textarea {
  resize: vertical;
}

.contact-feedback {
  overflow-wrap: anywhere;
  scroll-margin-top: 180px;
}

.contact-feedback:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}

.contact-feedback[role="alert"] {
  color: #873d32;
}