/* Shared layout. Mobile first, no external fonts or UI libraries. */
html:not([data-hub="enabled"]) [data-hub-link] {
  display:none!important;
}
:root {
  --ink:#1d3532;
  --muted:#576c66;
  --brand:#24594c;
  --brand-dark:#173f36;
  --paper:#f6f8f5;
  --white:#fff;
  --line:#dce5de;
  --soft:#eaf1ea;
  --accent:#c4d7a5;
  --radius:24px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:16px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:16px;
  line-height:1.75;
  word-break:keep-all;
  overflow-wrap:break-word;
}
a {
  color:inherit;
  text-underline-offset:4px;
}
button {
  font:inherit;
}
a,button,summary {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #916222;
  outline-offset:5px;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  line-height:1.35;
  letter-spacing:-.045em;
}
h1 {
  font-size:clamp(2rem,4.3vw,3.6rem);
  font-weight:750;
}
h2 {
  font-size:clamp(1.55rem,2.8vw,2.15rem);
}
h3 {
  font-size:1.25rem;
}
p {
  color:var(--muted);
}
img {
  max-width:100%;
  height:auto;
  display:block;
}
iframe {
  display:block;
  width:100%;
  border:0;
  background:white;
}
[hidden] {
  display:none!important;
}
.wrap {
  --gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
  width:min(1120px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  background:white;
  padding:12px;
  z-index:20;
}
.skip:focus {
  top:10px;
}
[data-hub-link],.hub-content {
  display:none;
}
html[data-hub="enabled"] [data-hub-link] {
  display:inline-flex;
}
html[data-hub="enabled"] .hub-content {
  display:block;
}
html[data-hub="enabled"] .standalone-brand,html[data-hub="enabled"] .hub-unavailable {
  display:none;
}
.header {
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav {
  min-height:68px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 12px;
  padding-block:8px;
}
.brand {
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.04em;
}
.standalone-brand {
  display:inline-flex;
}
.brand-mark {
  width:32px;
  height:32px;
  background:var(--brand);
  color:white;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:21px;
}
.nav-link {
  align-items:center;
  min-height:44px;
  font-size:.875rem;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
}
.section {
  padding-block:40px;
}
.eyebrow {
  display:block;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--brand);
  font-weight:750;
  margin-bottom:16px;
}
.hero {
  padding-block:32px 24px;
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  align-items:center;
}
.hero-grid>* {
  min-width:0;
}
.hero-copy>p {
  font-size:1rem;
  max-width:560px;
  margin-top:16px;
}
.hero-copy>p br,.card-body p br {
  display:none;
}
.hero-copy .button {
  margin-top:22px;
}
.hero-art {
  width:100%;
  border-radius:var(--radius);
  aspect-ratio:8/5;
  object-fit:cover;
}
.hero-visual {
  position:relative;
}
.image-frame {
  overflow:hidden;
  border-radius:var(--radius);
}
.hero .hero-art {
  max-height:140px;
  object-fit:contain;
  background:var(--soft);
}
.visual-label {
  display:inline-flex;
  position:absolute;
  left:12px;
  bottom:12px;
  max-width:calc(100% - 24px);
  background:#ffffffed;
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 12px;
  font-size:.8rem;
  color:var(--ink);
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:52px;
  padding:12px 24px;
  border:1px solid transparent;
  background:var(--brand);
  color:white;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  transition:background .18s,transform .18s;
}
.button.secondary {
  background:white;
  color:var(--brand);
  border-color:var(--line);
}
.button:active {
  transform:scale(.98);
}
.section-heading {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.section-heading>div:first-child {
  min-width:0;
}
.section-heading p {
  font-size:.94rem;
  margin-top:8px;
}
.count {
  font-size:.875rem;
  white-space:nowrap;
  color:var(--muted);
}
.cards {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.campaign-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 6px 24px #213d3105;
  transition:transform .2s,box-shadow .2s;
}
.card-image {
  position:relative;
  background:var(--soft);
  overflow:hidden;
}
.card-image img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.card-index {
  position:absolute;
  top:18px;
  left:20px;
  font-size:.8rem;
  font-weight:750;
  letter-spacing:.1em;
  color:var(--brand);
}
.card-body {
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  min-width:0;
}
.tag {
  display:inline-flex;
  background:var(--soft);
  color:var(--brand);
  font-size:.8rem;
  font-weight:650;
  padding:4px 10px;
  border-radius:6px;
  margin-bottom:14px;
}
.tag.pending {
  background:#f2f0e8;
  color:#726044;
}
.card-body h3 {
  font-size:1.5rem;
}
.card-body p {
  margin-block:12px 22px;
}
.card-body .button {
  width:100%;
  margin-top:auto;
}
.guide-band {
  display:grid;
  gap:24px;
  border-top:1px solid var(--line);
  padding-top:30px;
}
.guide-item {
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.step-number {
  flex-shrink:0;
  background:var(--soft);
  color:var(--brand);
  border-radius:50%;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  font-size:.8rem;
  font-weight:750;
}
.guide-item h3 {
  font-size:1rem;
  margin-bottom:5px;
}
.guide-item p {
  font-size:.9rem;
}
.footer {
  border-top:1px solid var(--line);
  padding-block:30px;
  font-size:.82rem;
}
.footer-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.footer-links {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.footer-links a {
  min-height:44px;
  align-items:center;
  display:inline-flex;
}
.footer p+p {
  margin-top:6px;
}
.landing-hero {
  padding-block:30px 24px;
}
.landing-hero h1 {
  font-size:clamp(1.9rem,4vw,3.2rem);
}
.landing-hero .hero-art {
  max-height:160px;
  object-fit:contain;
  background:var(--soft);
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.chips span {
  background:white;
  border:1px solid var(--line);
  padding:5px 11px;
  font-size:.82rem;
  border-radius:8px;
}
.hero-copy .hint {
  font-size:.875rem;
  margin-top:12px;
}
.landing-hero .button {
  width:100%;
}
.info-section {
  padding-block:30px 38px;
}
.carousel-tools {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.carousel-position {
  font-size:.85rem;
  color:var(--muted);
  min-width:68px;
  text-align:center;
}
.arrow {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:white;
  color:var(--brand);
  font-size:21px;
}
.arrow:disabled {
  opacity:.35;
  cursor:default;
}
.rail {
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:#afc1b4 transparent;
  padding:4px 2px 16px;
}
.info-card {
  flex:0 0 88%;
  min-width:0;
  scroll-snap-align:start;
  border:1px solid var(--line);
  background:white;
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  min-height:264px;
}
.info-card:nth-child(2) {
  background:#eaf1ea;
}
.info-card:nth-child(3) {
  background:#f0f2ec;
}
.info-card .card-number {
  font-size:.8rem;
  font-weight:750;
  color:var(--brand);
  letter-spacing:.06em;
  margin-bottom:20px;
}
.info-card h3 {
  margin-bottom:14px;
}
.info-card p,.info-card li {
  font-size:1rem;
}
.info-card ul,.info-card ol {
  padding-left:20px;
  margin:0;
  color:var(--muted);
}
.info-card li+li {
  margin-top:8px;
}
.info-card .mini-label {
  display:block;
  margin-top:auto;
  padding-top:20px;
  font-size:.8rem;
  color:var(--brand);
}
.rail-hint {
  font-size:.82rem;
  margin-top:10px;
}
.inline-cta {
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}
.text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:700;
  color:var(--brand);
}
.form-section {
  background:var(--soft);
  padding-block:38px;
  scroll-margin-top:18px;
}
.form-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.form-layout>* {
  min-width:0;
}
.form-copy h2 {
  margin-bottom:14px;
}
.form-copy>p {
  margin-top:12px;
}
.form-note {
  font-size:.875rem;
  line-height:1.7;
}
.form-copy .text-link {
  font-size:.9rem;
  margin-top:16px;
}
.form-host {
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px;
  min-width:0;
  scroll-margin-top:16px;
}
.form-host>.form-note {
  padding:12px 4px 0;
}
.form-placeholder {
  min-height:245px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-direction:column;
  padding:12px;
}
.form-placeholder strong {
  font-size:1.2rem;
  margin-bottom:10px;
}
.form-placeholder p {
  font-size:.95rem;
}
.live-section {
  padding-block:32px;
}
.live-layout {
  border:1px solid var(--line);
  border-radius:20px;
  background:white;
  padding:16px;
  min-width:0;
}
.live-layout h2 {
  font-size:1.25rem;
}
.live-layout p {
  font-size:.85rem;
  margin-block:8px 18px;
}
.live-frame {
  overflow:auto;
}
.live-frame iframe {
  min-width:0;
}
.faq-layout {
  display:grid;
  gap:24px;
}
.faq-intro p {
  margin-top:12px;
}
.faq {
  border-top:1px solid var(--line);
}
details {
  border-bottom:1px solid var(--line);
}
summary {
  cursor:pointer;
  font-weight:650;
  padding:19px 30px 19px 0;
  position:relative;
  list-style:none;
  min-height:60px;
}
summary::-webkit-details-marker {
  display:none;
}
summary::after {
  content:'+';
  position:absolute;
  right:3px;
  font-size:22px;
  top:15px;
  color:var(--brand);
}
details[open] summary::after {
  content:'−';
}
details p {
  padding-bottom:20px;
  font-size:.95rem;
  max-width:720px;
}
.mobile-cta {
  display:block;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:5;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:#f6f8f5f5;
  border-top:1px solid var(--line);
  transition:transform .2s,visibility .2s;
}
.mobile-cta .button {
  display:flex;
  width:100%;
  max-width:560px;
  margin-inline:auto;
  min-height:48px;
}
.mobile-cta.is-hidden {
  transform:translateY(110%);
  visibility:hidden;
}
.campaign-page {
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
}
.privacy {
  max-width:780px;
  padding-block:44px;
}
.privacy h2 {
  font-size:1.3rem;
  margin:30px 0 14px;
}
.privacy p {
  margin-top:14px;
}
.notice {
  padding:16px 20px;
  border-left:3px solid var(--brand);
  background:var(--soft);
  font-size:.94rem;
}
.privacy .button {
  margin-top:24px;
}
.hub-unavailable {
  padding-block:80px;
  min-height:50vh;
}
.hub-unavailable p {
  margin-top:18px;
}
.reveal.is-visible {
  animation:arrive .4s ease both;
}
@keyframes arrive {
  from {
    opacity:.35;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
/* Narrow covers, including split-screen and large text settings. */
@media(max-width:359px) {
  .brand {
    font-size:1rem;
    gap:7px;
  }
  .brand-mark {
    width:28px;
    height:28px;
  }
  .nav-link {
    font-size:.8rem;
  }
  .nav {
    column-gap:8px;
  }
  h1 {
    font-size:1.8rem;
  }
  .landing-hero h1 {
    font-size:1.8rem;
  }
  .hero-copy h1 br {
    display:none;
  }
  .card-body,.info-card {
    padding:18px;
  }
}
/* Unfolded / medium windows: two cards, but a full-width consultation form. */
@media(min-width:600px) {
  .hero-grid {
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:24px;
  }
  .visual-label {
    position:static;
    margin-top:10px;
    max-width:100%;
  }
  .wrap {
    --gutter:max(24px,env(safe-area-inset-left),env(safe-area-inset-right));
  }
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .info-card {
    flex-basis:calc((100% - 14px)/2);
    min-height:280px;
  }
  .form-layout {
    max-width:760px;
  }
  .form-host {
    padding:16px;
  }
  .guide-band {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  .guide-item {
    gap:10px;
  }
}
@media(min-width:700px) {
  .hero-grid {
    gap:28px;
  }
  .hero {
    padding-block:42px 32px;
  }
  .landing-hero {
    padding-block:38px 28px;
  }
  .hero .hero-art,.landing-hero .hero-art {
    max-height:250px;
  }
  .landing-hero .button {
    width:auto;
  }
  .hero-copy>p {
    font-size:1.05rem;
  }
  .section {
    padding-block:44px;
  }
  .live-layout {
    padding:24px;
  }
}
/* Room for three readable cards and a separate FAQ introduction. */
@media(min-width:1000px) {
  .wrap {
    --gutter:max(32px,env(safe-area-inset-left),env(safe-area-inset-right));
  }
  .nav {
    min-height:80px;
  }
  .hero-grid {
    gap:48px;
  }
  .hero {
    padding-block:60px 42px;
  }
  .landing-hero {
    padding-block:48px 32px;
  }
  .hero .hero-art,.landing-hero .hero-art {
    max-height:320px;
  }
  .info-card {
    flex-basis:calc((100% - 28px)/3);
  }
  .faq-layout {
    grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
    gap:36px;
  }
  .card-body {
    padding:28px;
  }
  .section {
    padding-block:50px;
  }
  .guide-item {
    gap:16px;
  }
}
/* Keep the external input form wide until a genuine desktop layout fits. */
@media(min-width:1100px) {
  .form-layout {
    max-width:1120px;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:48px;
    align-items:start;
  }
  .form-copy {
    padding-top:16px;
  }
  .form-section {
    padding-block:48px;
  }
  .mobile-cta {
    display:none;
  }
  .campaign-page {
    padding-bottom:0;
  }
}
/* Wide touch windows retain a reachable CTA, including unfolded landscape. */
@media(min-width:1100px) and (any-pointer:coarse) {
  .mobile-cta {
    display:block;
  }
  .campaign-page {
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }
}
/* Short landscape windows / software keyboards should retain usable height. */
@media(max-height:500px) {
  .mobile-cta {
    display:none;
  }
  .campaign-page {
    padding-bottom:0;
  }
  .hero,.landing-hero {
    padding-block:24px;
  }
  .hero-art {
    max-height:140px!important;
  }
}
@media(hover:hover) {
  .campaign-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 28px #213d310b;
  }
  .button:hover {
    background:var(--brand-dark);
  }
  .button.secondary:hover {
    background:var(--soft);
  }
  .arrow:not(:disabled):hover {
    background:var(--soft);
  }
  .nav-link:hover,.text-link:hover {
    color:var(--brand-dark);
    text-decoration:underline;
  }
}
/* Image motion stays inside its frame and only runs with a mouse-like pointer. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .image-frame .hero-art,.card-image img {
    transition:transform .3s ease,filter .3s ease;
  }
  .image-frame:hover .hero-art,.card-image:hover img {
    transform:scale(1.035);
    filter:brightness(1.025);
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .reveal.is-visible {
    animation:none;
  }
}