/*
 * Bloomdata Data & AI Community — consistency polish v1.0.7
 *
 * Shared shell, typography, colour tokens, navigation, responsive breakpoints
 * and footer deliberately mirror the current bloomdata.com.my home page.
 * Community-specific layouts start after the "Community components" marker.
 */
:root{
  color-scheme: light dark;
  --background: #f6f7fa;
  --text: #4e4e4e;
  --text-strong: #464646;
  --surface: rgba(255,255,255,.62);
  --panel: #fafbfc;
  --panel-strong: #f6f7fa;
  --line: rgba(78,78,78,.14);
  --line-strong: rgba(78,78,78,.24);
  --muted: #626264;
  --muted-soft: #7b7b7d;
  --shadow: 0 24px 70px rgba(78,78,78,.09);
  --radius-lg: 28px;
  --radius-md: 20px;
  --container: 1160px;
  --success: #1f6b45;
  --danger: #9d3131;
}

@media (prefers-color-scheme: dark){
  :root{
    --background: #171717;
    --text: #c4c5c8;
    --text-strong: #f6f7fa;
    --surface: rgba(246,247,250,.06);
    --panel: #1f1f1f;
    --panel-strong: #272727;
    --line: rgba(246,247,250,.14);
    --line-strong: rgba(246,247,250,.24);
    --muted: #acacaf;
    --muted-soft: #939496;
    --shadow: 0 24px 70px rgba(0,0,0,.3);
    --success: #7dd9aa;
    --danger: #ffaaaa;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
section[id]{scroll-margin-top:92px}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--text-strong) 7%,transparent),transparent 28rem),
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--text-strong) 5%,transparent),transparent 24rem),
    var(--background);
  font-family:"Noto Sans",Arial,Helvetica,sans-serif;
  font-synthesis:none;
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
p{margin:0}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
.container{width:min(100% - 40px,var(--container));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 14px;border:2px solid var(--text-strong);border-radius:10px;background:var(--panel);color:var(--text-strong);font-size:.9rem;font-weight:700;transform:translateY(-150%);transition:transform 160ms ease}
.skip-link:focus{transform:translateY(0)}

/* Canonical Bloomdata header and navigation */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--background) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav{position:relative;display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;flex:0 0 auto;align-items:center;line-height:0}
.brand picture,.brand img{display:block;line-height:0}
.brand img,.nav-drawer-brand img{width:150px;height:17px;max-width:100%;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:clamp(9px,1vw,15px);color:var(--muted);font-size:clamp(.74rem,.72vw,.84rem);font-weight:600;white-space:nowrap}
.nav-primary-links{display:flex;align-items:center;gap:inherit}
.nav-links a{transition:color 180ms ease,background 180ms ease,border-color 180ms ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text-strong)}
.nav-contact{padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text-strong)}
.nav-toggle{display:none;width:42px;height:42px;flex:0 0 auto;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-strong);border-radius:13px;background:var(--panel);color:var(--text-strong);cursor:pointer;transition:background 180ms ease,transform 180ms ease}
.nav-toggle:hover{background:var(--panel-strong)}
.nav-toggle:focus-visible{outline:2px solid var(--text-strong);outline-offset:3px}
.nav-toggle:active{transform:scale(.97)}
.nav-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-toggle-close-icon{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-menu-icon{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-close-icon{display:block}
.nav-drawer-header,.nav-drawer-social,.nav-drawer-close,.nav-drawer-backdrop{display:none}

/* Canonical Bloomdata typography */
h1,h2,h3{margin:0;color:var(--text-strong)}
h1,h2{font-weight:500;letter-spacing:-.018em;line-height:1.12}
h1{max-width:610px;font-size:clamp(2.55rem,4.1vw,4rem)}
h2{margin-bottom:18px;font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.05rem;font-weight:600;letter-spacing:0;line-height:1.34}
.section-kicker{margin-bottom:12px;color:var(--muted-soft);font-size:.78rem;font-weight:800;letter-spacing:.14em;line-height:1.35;text-transform:uppercase}
.section-lead{max-width:920px;color:var(--muted);font-size:1.04rem;line-height:1.7}
.section-lead strong{color:var(--text-strong);font-weight:700}

/* Canonical Bloomdata hero language */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(72px,8vw,112px) 0 clamp(64px,7vw,88px)}
.hero>.container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(420px,.92fr);gap:clamp(30px,4.5vw,58px);align-items:start}
.hero-heading{max-width:610px}
.hero-content{max-width:650px;justify-self:end;padding-top:6px}
.hero-text{max-width:650px;color:var(--muted);font-size:clamp(.98rem,1.05vw,1.04rem);line-height:1.68}
.hero-text p+p,.section-lead p+p{margin-top:16px}

/* Shared social icon treatment from the main site */
.social-icon-link{display:inline-flex;width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;align-items:center;justify-content:center;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);line-height:0;transition:color 180ms ease,background 180ms ease,border-color 180ms ease}
.social-icon-picture,.social-icon-image{display:block;width:19px;height:19px}
.social-icon-picture{line-height:0}
.social-icon-image{max-width:none;object-fit:contain}
.social-icon-link:hover,.social-icon-link:focus-visible{border-color:var(--line-strong);background:var(--panel-strong);color:var(--text-strong)}
.social-icon-link:focus-visible,.nav-drawer-close:focus-visible{outline:2px solid var(--text-strong);outline-offset:3px}

/* Canonical Bloomdata footer */
footer{padding:30px 0 42px;color:var(--muted);font-size:clamp(.82rem,.9vw,.9rem);line-height:1.5}
.footer-row{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.footer-social{display:flex;align-items:center;justify-content:center;gap:10px}
.footer-row span{max-width:100%;min-width:0;text-wrap:balance}

/* ===================== Community components ===================== */
.community-hero-actions,.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:10px 15px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel-strong);color:var(--text-strong);font:inherit;font-size:clamp(.82rem,.9vw,.9rem);font-weight:700;line-height:1.35;cursor:pointer;transition:background 180ms ease,border-color 180ms ease,transform 180ms ease}
.button:hover{border-color:var(--text-strong);background:var(--panel);transform:translateY(-1px)}
.button:focus-visible{outline:2px solid var(--text-strong);outline-offset:3px}
.button.primary{border-color:var(--text-strong);background:var(--text-strong);color:var(--background)}
.button.primary:hover{background:color-mix(in srgb,var(--text-strong) 88%,transparent)}
.button.subtle{border-color:var(--line);background:transparent}
.button[disabled]{opacity:.55;cursor:not-allowed;transform:none}

.facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:20px 18px;border-right:1px solid var(--line)}
.fact:first-child{padding-left:0}.fact:last-child{border-right:0}
.fact strong{display:block;color:var(--text-strong);font-size:1.05rem;font-weight:600}
.fact span{display:block;margin-top:4px;color:var(--muted);font-size:clamp(.78rem,.86vw,.86rem)}

.section{padding:78px 0}
.section+.section{border-top:1px solid var(--line)}
.section-grid{display:grid;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);gap:60px;align-items:start}
.section-aside{position:sticky;top:106px;min-width:0}
.section-aside h2{margin-bottom:0;font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:1.16;letter-spacing:-.018em}
.section-body{display:grid;min-width:0;gap:26px}
.section-body>p{max-width:880px;color:var(--muted);font-size:1.04rem;line-height:1.7}
.lead-strong{color:var(--text-strong)!important;font-size:1.04rem!important;line-height:1.7!important;font-weight:500}

.flow{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow-step{min-width:0;padding:20px 16px;border-right:1px solid var(--line)}
.flow-step:first-child{padding-left:0}.flow-step:last-child{border-right:0}
.flow-step b{display:block;color:var(--muted-soft);font-size:.7rem;font-weight:800;letter-spacing:.11em}
.flow-step strong{display:block;margin-top:7px;color:var(--text-strong);font-weight:600}
.flow-step span{display:block;margin-top:6px;color:var(--muted);font-size:clamp(.8rem,.86vw,.86rem);line-height:1.6}

.two-col-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.list-item{min-width:0;padding:17px 16px 17px 0;border-bottom:1px solid var(--line)}
.list-item:nth-child(odd){border-right:1px solid var(--line);padding-right:22px}.list-item:nth-child(even){padding-left:22px}
.list-item strong{color:var(--text-strong);font-weight:600}.list-item p{margin-top:5px;color:var(--muted);font-size:clamp(.87rem,.92vw,.94rem);line-height:1.65}

.table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
.table-scroll:focus-visible{outline:2px solid var(--text-strong);outline-offset:4px}
.data-table{width:100%;min-width:690px;border-collapse:collapse;font-size:clamp(.84rem,.9vw,.9rem)}
.data-table th,.data-table td{text-align:left;vertical-align:top;padding:16px 14px;border-bottom:1px solid var(--line)}
.data-table th{color:var(--text-strong);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;line-height:1.45}
.data-table td:first-child{color:var(--text-strong);font-weight:600}.data-table td{color:var(--muted);line-height:1.6}

.note{padding:18px 20px;border-left:3px solid var(--line-strong);border-radius:0 14px 14px 0;background:var(--surface);color:var(--muted);font-size:clamp(.87rem,.92vw,.94rem);line-height:1.65}
.note strong{color:var(--text-strong)}
.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:52px 0}
.cta-strip h2{margin:0;max-width:760px;font-size:clamp(1.7rem,3vw,2.5rem)}
.cta-strip p{margin-top:8px;max-width:740px;color:var(--muted);font-size:1.04rem;line-height:1.7}

/* Forms */
.form-page{padding:78px 0}
.back-link{display:inline-flex;margin-bottom:28px;color:var(--muted);font-size:clamp(.82rem,.9vw,.9rem);font-weight:700}
.back-link:hover{color:var(--text-strong)}
.form-shell{display:grid;grid-template-columns:minmax(250px,.34fr) minmax(0,1fr);gap:60px;align-items:start}
.form-aside{position:sticky;top:106px;min-width:0}
.form-aside h1{max-width:500px;font-size:clamp(2rem,3.5vw,3.15rem);line-height:1.12}
.form-aside>p{max-width:460px;margin-top:18px;color:var(--muted);font-size:clamp(.94rem,1vw,1rem);line-height:1.68}
.form-meta{margin-top:26px;border-top:1px solid var(--line)}
.form-meta div{padding:13px 0;border-bottom:1px solid var(--line)}
.form-meta strong{display:block;color:var(--text-strong);font-size:.84rem;font-weight:600}.form-meta span{display:block;margin-top:3px;color:var(--muted);font-size:.8rem;line-height:1.55;overflow-wrap:anywhere}
.registry-form{display:grid;min-width:0;gap:30px}
.form-section{display:grid;gap:18px;margin:0;padding:0;border:0}
.form-section+.form-section{padding-top:30px;border-top:1px solid var(--line)}
.form-section legend{width:100%;margin:0 0 6px;padding:0;color:var(--text-strong);font-size:1.05rem;font-weight:600;line-height:1.34}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:grid;min-width:0;gap:7px}.field.full{grid-column:1/-1}
.field label,.field-label{color:var(--text-strong);font-size:.84rem;font-weight:600;line-height:1.45}
.required::after{content:" *";color:var(--danger)}
.hint{color:var(--muted-soft);font-size:.76rem;line-height:1.5}
input,textarea,select{width:100%;min-width:0;padding:12px 13px;border:1px solid var(--line-strong);border-radius:12px;outline:none;background:var(--surface);color:var(--text-strong);font:inherit;font-size:.92rem;line-height:1.5}
textarea{min-height:118px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--text-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--text-strong) 10%,transparent)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.choice{display:flex;min-width:0;align-items:flex-start;gap:9px;color:var(--muted);font-size:.88rem;line-height:1.55}
.choice input{width:auto;flex:0 0 auto;margin-top:5px;accent-color:var(--text-strong)}.choice span{min-width:0}
.consent{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-status{min-height:24px;color:var(--muted);font-size:.88rem;line-height:1.55}.form-status.success{color:var(--success)}.form-status.error{color:var(--danger)}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.submission-frame{position:absolute;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
.privacy-copy{color:var(--muted);font-size:.82rem;line-height:1.6}.privacy-copy a{text-decoration:underline;text-underline-offset:3px}

/* Main-site responsive breakpoints */
@media (max-width:1180px){
  :root{--container:1040px}
  .container{width:min(100% - 36px,var(--container))}
  .nav{min-height:72px;gap:18px}
  .brand img,.nav-drawer-brand img{width:142px;height:auto}
  .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(360px,1fr);gap:36px}
  h1{font-size:clamp(2.45rem,4.2vw,3.7rem)}
  h2{font-size:clamp(2rem,3.6vw,2.8rem)}
}

@media (max-width:980px){
  html{scroll-padding-top:82px}
  section[id]{scroll-margin-top:82px}
  :root{--radius-lg:24px;--radius-md:18px}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body,.site-header,.js .nav-drawer-header{background:var(--background)}
  @supports (overflow:clip){html,body{overflow-x:clip}}
  body.nav-drawer-open{overflow:hidden;overscroll-behavior:none}
  .site-header{z-index:100;backdrop-filter:none;-webkit-backdrop-filter:none}
  .container{width:min(100% - 32px,var(--container))}
  .nav{min-height:66px;flex-wrap:wrap}
  .brand img,.nav-drawer-brand img{width:142px;height:auto}
  .nav-links{display:block;width:100%;padding:10px 0 14px;white-space:normal}
  .nav-primary-links{display:grid;width:100%;gap:4px}
  .nav-primary-links>a{display:block;width:100%;padding:11px 12px;border-radius:12px;text-align:left}
  .js .nav{flex-wrap:nowrap}
  .js .nav-toggle{display:inline-flex}
  .js .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:102;display:flex;width:75vw;min-width:0;max-width:75vw;height:100vh;height:100dvh;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;border:0;border-left:1px solid var(--line-strong);border-radius:0;background:var(--panel);box-shadow:-24px 0 70px rgba(0,0,0,.28);color:var(--text);font-size:.94rem;text-align:left;white-space:normal;opacity:1;visibility:visible;pointer-events:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;contain:layout paint;transform:translate3d(100%,0,0);will-change:transform;transition:transform 220ms ease}
  .js .nav-links.is-open{pointer-events:auto;transform:translate3d(0,0,0)}
  .js .nav-drawer-header{position:sticky;top:0;z-index:2;display:flex;width:100%;min-height:70px;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
  .nav-drawer-brand{display:inline-flex;max-width:calc(100% - 58px);align-items:center;line-height:0}.nav-drawer-brand picture,.nav-drawer-brand img{display:block}
  .js .nav-drawer-close{display:inline-flex;width:42px;height:42px;flex:0 0 auto;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-strong);border-radius:13px;background:var(--panel-strong);color:var(--text-strong);cursor:pointer}
  .nav-drawer-close svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .js .nav-primary-links{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:6px;padding:18px}
  .js .nav-primary-links>a{display:flex;width:100%;min-height:48px;align-items:center;justify-content:flex-start;padding:13px 15px;border:1px solid transparent;border-radius:13px;color:var(--text);font-size:.96rem;text-align:left}
  .js .nav-primary-links>a:hover,.js .nav-primary-links>a:focus-visible,.js .nav-primary-links>a[aria-current="page"]{border-color:var(--line);background:var(--panel-strong);color:var(--text-strong)}
  .js .nav-primary-links>.nav-contact{border-color:var(--line-strong);background:var(--panel-strong)}
  .js .nav-drawer-social{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:10px;margin-top:auto;padding:18px;border-top:1px solid var(--line);background:var(--panel)}
  .js .nav-drawer-backdrop{position:fixed;inset:0;z-index:101;display:block;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;border:0;background:rgba(0,0,0,.82);opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity 220ms ease,visibility 220ms ease}
  .js .nav-drawer-backdrop.is-visible{opacity:1;visibility:visible;pointer-events:auto}
  .hero{padding:68px 0 56px}.hero-grid{grid-template-columns:1fr;gap:32px}.hero-heading,.hero-content{max-width:760px;justify-self:start}.hero-content{padding-top:0}h1{max-width:760px;font-size:clamp(2.45rem,7vw,3.55rem)}h2{font-size:clamp(2rem,5.6vw,2.75rem)}
  .section,.form-page{padding:68px 0}
  .section-grid,.form-shell{grid-template-columns:1fr;gap:32px}.section-aside,.form-aside{position:static}.section-aside h2{max-width:760px}
  .facts{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}.fact:nth-child(3){padding-left:0}
  .flow{grid-template-columns:1fr}.flow-step,.flow-step:first-child{padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}.flow-step:last-child{border-bottom:0}
  .cta-strip{align-items:flex-start;flex-direction:column}
}

@media (max-width:760px){
  .container{width:min(100% - 30px,var(--container))}
  .hero{padding:60px 0 50px}
  h1{font-size:clamp(2.25rem,8.2vw,3.15rem);letter-spacing:-.014em;line-height:1.13}
  h2{font-size:clamp(1.95rem,7.2vw,2.55rem);letter-spacing:-.012em;line-height:1.14}
  .hero-text,.section-body>p{font-size:.98rem;line-height:1.68}
  .field-grid,.choice-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .two-col-list{grid-template-columns:1fr}.list-item:nth-child(n){padding:15px 0;border-right:0}
}

@media (max-width:640px){
  html{scroll-padding-top:78px}section[id]{scroll-margin-top:78px}
  .container{width:min(100% - 28px,var(--container))}
  .nav{min-height:62px}.brand img,.nav-drawer-brand img{width:134px;height:auto}.nav-toggle{width:40px;height:40px;border-radius:12px}
  .js .nav-drawer-header{min-height:64px;padding:11px 14px}.js .nav-drawer-close{width:40px;height:40px;border-radius:12px}.js .nav-primary-links,.js .nav-drawer-social{padding:14px}
  .hero{padding:54px 0 44px}.hero-grid{gap:26px}.hero-content{padding-top:0}
  h1{max-width:100%;font-size:clamp(2.05rem,9vw,2.75rem);letter-spacing:-.012em;line-height:1.14}
  h2{font-size:clamp(1.78rem,8.2vw,2.3rem);letter-spacing:-.012em;line-height:1.15}
  h3{font-size:1rem}.hero-text,.section-body>p{font-size:.95rem;line-height:1.67}
  .section,.form-page{padding:54px 0}.section-grid,.form-shell{gap:26px}
  .facts{grid-template-columns:1fr;margin-top:34px}.fact,.fact:nth-child(n){padding:14px 0;border-right:0;border-bottom:1px solid var(--line)}.fact:last-child{border-bottom:0}
  .community-hero-actions,.hero-actions,.form-actions{align-items:stretch;flex-direction:column}.button{width:100%}
  .cta-strip{padding:42px 0}.cta-strip p{font-size:.95rem;line-height:1.65}
  .form-aside h1{font-size:clamp(1.95rem,8.2vw,2.5rem)}
  footer{font-size:.82rem}
}

@media (max-width:420px){
  .container{width:min(100% - 24px,var(--container))}
  .brand img,.nav-drawer-brand img{width:126px;height:auto}.nav-toggle{width:38px;height:38px;border-radius:11px}.nav-toggle svg{width:20px;height:20px}
  .js .nav-links{width:75vw;max-width:75vw}.js .nav-drawer-close{width:38px;height:38px;border-radius:11px}.js .nav-primary-links>a{padding:12px;font-size:.9rem}
  .hero{padding:46px 0 38px}h1{font-size:clamp(1.9rem,10vw,2.42rem)}h2{font-size:clamp(1.62rem,9vw,2.02rem)}.hero-text,.section-body>p{font-size:.9rem}
  .form-aside h1{font-size:clamp(1.75rem,9vw,2.2rem)}
  footer{font-size:.8rem;line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  *,html{scroll-behavior:auto!important}
  .skip-link,.nav-toggle,.nav-links,.nav-drawer-backdrop,.button{transition:none}
}


/* ===================== v1.0.2 editorial layout ===================== */
/* Align Community pages with the calmer, full-width editorial section pattern
   used on the main Bloomdata index rather than a left-rail microsite layout. */
.section-head{max-width:800px;margin-bottom:32px}
.section-intro-full{max-width:none}
.section-head h2{margin-bottom:16px}
.section-intro-full .section-lead{max-width:none}
.section-tail{max-width:920px;margin-top:28px;color:var(--muted);font-size:1.04rem;line-height:1.7}
.section-note{margin-top:28px}
.section-actions{margin-top:28px}

.community-hero-inner{position:relative;z-index:1}
.community-hero .section-kicker{margin-bottom:14px}
.community-hero h1{max-width:960px}
.community-hero-text{max-width:920px;margin-top:24px}
.community-hero-actions{margin-top:26px}
.community-hero .facts{margin-top:38px}

/* Old split-section classes remain supported for backwards compatibility, but
   current Community pages now use the same full-width section-head pattern as root. */
.section-grid{display:block}
.section-aside{position:static}
.section-aside h2{font-size:clamp(2rem,4vw,3rem)}
.section-body{display:block}
.section-body>*+*{margin-top:26px}

/* Simpler form pages: introduction first, summary band second, form third. */
.form-page{padding:78px 0}
.form-intro{max-width:none;margin-bottom:30px}
.form-intro h1{max-width:900px;margin-bottom:18px}
.form-intro .section-lead{max-width:900px}
.form-meta-inline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form-meta-inline div{min-width:0;padding:17px 18px;border-right:1px solid var(--line);border-bottom:0}
.form-meta-inline div:first-child{padding-left:0}
.form-meta-inline div:last-child{border-right:0}
.form-content{max-width:920px;margin-top:46px}
.registry-form{gap:34px}
.form-section+.form-section{padding-top:34px}
.form-section legend{font-size:1.08rem}

@media (max-width:980px){
  .community-hero h1{max-width:760px}
  .community-hero-text{max-width:760px}
  .form-meta-inline{grid-template-columns:1fr 1fr}
  .form-meta-inline div:nth-child(2){border-right:0}
  .form-meta-inline div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .form-meta-inline div:nth-child(3){padding-left:0}
  .form-content{max-width:none;margin-top:40px}
}
@media (max-width:640px){
  .community-hero-text{margin-top:20px}
  .community-hero-actions{margin-top:22px}
  .community-hero .facts{margin-top:30px}
  .section-head{margin-bottom:26px}
  .section-tail{margin-top:22px;font-size:.95rem;line-height:1.67}
  .form-intro{margin-bottom:24px}
  .form-meta-inline{grid-template-columns:1fr}
  .form-meta-inline div,.form-meta-inline div:nth-child(n){padding:13px 0;border-right:0;border-bottom:1px solid var(--line)}
  .form-meta-inline div:last-child{border-bottom:0}
  .form-content{margin-top:34px}
}


/* ===================== v1.0.3 contact + line icon refinement ===================== */


/* Root-site-aligned compact feature icon grammar.
 * Mirrors .architecture-marker from the Bloomdata homepage: bordered rounded
 * marker, strong foreground icon, strong title and muted supporting copy. */
.line-icon{
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  min-width:0;
}
.feature-marker{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  flex:0 0 42px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  color:var(--text-strong);
}
.feature-marker .line-icon{width:20px;height:20px}
.feature-copy{min-width:0}
.feature-copy strong{
  display:block;
  margin:0;
  color:var(--text-strong)!important;
  font-size:clamp(.91rem,.96vw,.98rem);
  font-weight:600;
  line-height:1.42;
}
.feature-copy>span,
.feature-copy>p{
  display:block;
  margin:6px 0 0!important;
  color:var(--muted)!important;
  font-size:clamp(.8rem,.86vw,.86rem)!important;
  font-weight:400;
  line-height:1.6!important;
}

/* Five-step learning cycle uses the same marker grammar rather than muted
 * floating glyphs. */
.flow-step .feature-row{grid-template-columns:40px minmax(0,1fr);gap:11px}
.flow-step .feature-marker{width:40px;height:40px;flex-basis:40px;border-radius:12px}
.flow-step .feature-marker .line-icon{width:19px;height:19px}
.flow-step .feature-copy strong{font-size:.9rem;color:var(--text-strong)!important}
.flow-step .feature-copy>span{font-size:clamp(.78rem,.83vw,.84rem)!important;line-height:1.55!important}

/* Two-column learning areas now read like compact versions of the main
 * homepage architecture layers. */
.list-item .feature-row{grid-template-columns:42px minmax(0,1fr);gap:13px}
.list-item .feature-copy strong{font-size:clamp(.92rem,.98vw,1rem)}
.list-item .feature-copy p{font-size:clamp(.84rem,.9vw,.92rem)!important;line-height:1.62!important}

/* WhatsApp spaces keep the table structure, but the title cell follows the
 * same bounded icon pattern. */
.table-title-icon{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-width:0;
  color:var(--text-strong);
  font-weight:600;
  line-height:1.45;
}
.table-title-icon .table-marker{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:11px;
}
.table-title-icon .table-marker .line-icon{width:17px;height:17px}
.table-title-text{min-width:0;color:var(--text-strong);font-weight:600}

/* Contact remains part of the participation CTA rather than becoming a
 * separate visual concept. */
.contact-section{border-top:1px solid var(--line)}
.contact-copy{max-width:790px}
.contact-email-line{
  margin-top:12px!important;
  color:var(--muted)!important;
  font-size:clamp(.88rem,.94vw,.96rem)!important;
  line-height:1.6!important;
}
.contact-email-line a{
  color:var(--text-strong);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.contact-email-line a:hover{text-decoration-thickness:2px}

@media (max-width:980px){
  .flow-step .feature-row{grid-template-columns:40px minmax(0,1fr)}
}
@media (max-width:640px){
  .feature-row,.list-item .feature-row{grid-template-columns:40px minmax(0,1fr);gap:11px}
  .feature-marker,.list-item .feature-marker{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  .table-title-icon{gap:9px}
  .table-title-icon .table-marker{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .contact-email-line{font-size:.9rem!important}
}


/* ===================== v1.0.5 cards + groups refinement ===================== */
/* Opaque hero summary panel, aligned with the root site's callout treatment. */
.community-hero .facts.summary-panel{
  overflow:hidden;
  margin-top:38px;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--panel);
  box-shadow:none;
}
.community-hero .facts.summary-panel .fact{padding:20px 22px;border-right:1px solid var(--line)}
.community-hero .facts.summary-panel .fact:first-child{padding-left:22px}
.community-hero .facts.summary-panel .fact:last-child{border-right:0}
.community-hero .facts.summary-panel .fact strong{font-size:clamp(1.02rem,1.18vw,1.12rem)}
.community-hero .facts.summary-panel .fact span{font-size:clamp(.8rem,.87vw,.88rem);line-height:1.55}

/* Opaque hero CTA surfaces so the technical grid never shows through buttons. */
.community-hero-actions .button{border-color:var(--line-strong);background:var(--panel);box-shadow:0 8px 24px color-mix(in srgb,var(--background) 58%,transparent)}
.community-hero-actions .button:hover{background:var(--panel-strong)}
.community-hero-actions .button.primary{border-color:var(--text-strong);background:var(--text-strong);color:var(--background)}
.community-hero-actions .button.primary:hover{background:color-mix(in srgb,var(--text-strong) 88%,var(--panel))}
.community-hero-actions .button.subtle{border-color:var(--line-strong);background:var(--panel)}

/* Learning cycle as architecture-style cards. */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;border:0}
.flow-step,.flow-step:first-child,.flow-step:last-child{min-width:0;min-height:100%;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel-strong)}
.flow-step .feature-row{grid-template-columns:44px minmax(0,1fr);gap:13px}
.flow-step .feature-marker{width:44px;height:44px;flex-basis:44px;border-radius:14px;background:var(--panel)}
.flow-step .feature-marker .line-icon{width:20px;height:20px}
.flow-step .feature-copy strong{color:var(--text-strong)!important;font-size:clamp(.92rem,.98vw,.99rem);font-weight:600}
.flow-step .feature-copy>span{margin-top:7px!important;color:var(--muted)!important;font-size:clamp(.8rem,.86vw,.87rem)!important;line-height:1.6!important}

/* Six foundation areas as two-column architecture-style cards. */
.two-col-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0}
.list-item,.list-item:nth-child(odd),.list-item:nth-child(even){min-width:0;min-height:100%;padding:19px;border:1px solid var(--line);border-radius:18px;background:var(--panel-strong)}
.list-item .feature-row{grid-template-columns:50px minmax(0,1fr);gap:16px}
.list-item .feature-marker{width:50px;height:50px;flex-basis:50px;border-radius:15px;background:var(--panel)}
.list-item .feature-marker .line-icon{width:23px;height:23px}
.list-item .feature-copy strong{font-size:clamp(.98rem,1.04vw,1.05rem)}
.list-item .feature-copy p{margin-top:8px!important;font-size:clamp(.86rem,.92vw,.94rem)!important;line-height:1.64!important}

/* WhatsApp groups: operational comparison stays text-only. */
#spaces .data-table td:first-child strong{color:var(--text-strong);font-weight:600}

/* Original participation CTA retained; contact is a supporting row underneath. */
.contact-section>.contact-container{padding-bottom:34px}
.contact-section .cta-strip{padding-bottom:24px}
.contact-question-row{padding:18px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:clamp(.88rem,.94vw,.96rem);line-height:1.65}
.contact-question-row a{color:var(--text-strong);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

@media (max-width:1180px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){
  .community-hero .facts.summary-panel{grid-template-columns:1fr 1fr}
  .community-hero .facts.summary-panel .fact,.community-hero .facts.summary-panel .fact:nth-child(n){padding:18px 20px;border-right:1px solid var(--line);border-bottom:0}
  .community-hero .facts.summary-panel .fact:nth-child(2){border-right:0}
  .community-hero .facts.summary-panel .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .community-hero .facts.summary-panel .fact:nth-child(4){border-right:0}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-step,.flow-step:first-child,.flow-step:last-child{padding:17px;border:1px solid var(--line)}
}
@media (max-width:760px){
  .two-col-list{grid-template-columns:1fr}
  .list-item,.list-item:nth-child(n){padding:17px;border:1px solid var(--line)}
}
@media (max-width:640px){
  .community-hero .facts.summary-panel{grid-template-columns:1fr;margin-top:30px}
  .community-hero .facts.summary-panel .fact,.community-hero .facts.summary-panel .fact:nth-child(n){padding:15px 17px;border-right:0;border-bottom:1px solid var(--line)}
  .community-hero .facts.summary-panel .fact:last-child{border-bottom:0}
  .flow{grid-template-columns:1fr}
  .flow-step,.flow-step:first-child,.flow-step:last-child{padding:16px}
  .contact-section>.contact-container{padding-bottom:28px}
  .contact-section .cta-strip{padding-bottom:20px}
  .contact-question-row{padding-top:16px;font-size:.9rem}
}

/* ===================== v1.0.6 form + hierarchy polish ===================== */
/* Community sections now flow continuously like the main editorial page. */
.section+.section{border-top:0}
.contact-section{border-top:0}

/* Learning cycle card grammar requested for v1.0.6:
   first row = icon + title, second row = supporting copy across full card width. */
.flow-step .feature-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:13px;row-gap:0;align-items:center}
.flow-step .feature-copy{display:contents}
.flow-step .feature-copy strong{grid-column:2;grid-row:1;margin:0!important;align-self:center}
.flow-step .feature-copy>span{grid-column:1/-1;grid-row:2;margin:14px 0 0!important;padding:0;color:var(--muted)!important;font-size:clamp(.8rem,.86vw,.87rem)!important;line-height:1.62!important}

/* Sponsored AI-access notice uses the same callout language as the CSR impact note. */
.sponsored-note{max-width:920px;margin-top:28px}

/* Form summary bands use the same opaque, bordered surface as the Community hero metrics. */
.form-meta-inline.summary-panel{
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--panel);
}
.form-meta-inline.summary-panel div,
.form-meta-inline.summary-panel div:first-child,
.form-meta-inline.summary-panel div:nth-child(n){
  min-width:0;
  padding:18px 20px;
  border-right:1px solid var(--line);
  border-bottom:0;
}
.form-meta-inline.summary-panel div:last-child{border-right:0}
.form-meta-inline.summary-panel strong{font-size:.9rem}
.form-meta-inline.summary-panel span{margin-top:5px;font-size:.8rem;line-height:1.55}

/* Consistent form-control geometry across About you and Availability & commitment. */
input:not([type="checkbox"]):not([type="radio"]),
select,
.custom-select-button{
  min-height:48px;
  height:48px;
  padding:11px 13px;
  border-radius:12px;
}
textarea{min-height:126px}
.field .hint{min-height:1.15em}

/* Native select fallback still follows the site palette where the browser allows it. */
select{color-scheme:light dark}
select option{background:var(--panel);color:var(--text-strong)}

/* Fully themed, accessible custom select. The native select remains the submitted value
   and is only visually suppressed after JavaScript successfully enhances it. */
.custom-select{position:relative;min-width:0}
.custom-select-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}
.custom-select-button{
  position:relative;
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line-strong);
  outline:none;
  background:var(--surface);
  color:var(--text-strong);
  font:inherit;
  font-size:.92rem;
  line-height:1.5;
  text-align:left;
  cursor:pointer;
  transition:border-color 160ms ease,box-shadow 160ms ease,background 160ms ease;
}
.custom-select-button::after{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin:-4px 3px 0 0;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  opacity:.72;
  transition:transform 160ms ease,margin 160ms ease;
}
.custom-select.is-open .custom-select-button::after{margin:4px 3px 0 0;transform:rotate(225deg)}
.custom-select-button:hover{background:var(--panel-strong)}
.custom-select-button:focus-visible,
.custom-select.is-open .custom-select-button{border-color:var(--text-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--text-strong) 10%,transparent)}
.custom-select.is-invalid .custom-select-button{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 12%,transparent)}
.custom-select-placeholder{color:var(--muted-soft)}
.custom-select-list{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  z-index:80;
  width:100%;
  max-height:270px;
  margin:0;
  padding:6px;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:var(--panel);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
  list-style:none;
}
.custom-select-list[hidden]{display:none}
.custom-select-option{
  display:block;
  width:100%;
  padding:10px 11px;
  border-radius:9px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.4;
  cursor:pointer;
  user-select:none;
}
.custom-select-option:hover,
.custom-select-option.is-active{background:var(--panel-strong);color:var(--text-strong)}
.custom-select-option[aria-selected="true"]{
  background:color-mix(in srgb,var(--text-strong) 10%,var(--panel));
  color:var(--text-strong);
  font-weight:600;
}
.custom-select-option[aria-disabled="true"]{color:var(--muted-soft);cursor:default;opacity:.75}

/* Contact support sits immediately below the original participation CTA, without a divider. */
.contact-section>.contact-container{padding-bottom:34px}
.contact-section .cta-strip{padding:48px 0 14px}
.contact-question-row.contact-support-note{
  max-width:920px;
  margin:0;
  padding:15px 18px;
  border:0;
  border-left:3px solid var(--line-strong);
  border-radius:0 14px 14px 0;
  background:var(--surface);
  color:var(--muted);
  font-size:clamp(.87rem,.92vw,.94rem);
  line-height:1.65;
}
.contact-question-row.contact-support-note a{color:var(--text-strong);font-weight:700}

@media (max-width:980px){
  .form-meta-inline.summary-panel{grid-template-columns:1fr 1fr}
  .form-meta-inline.summary-panel div,
  .form-meta-inline.summary-panel div:nth-child(n){padding:17px 18px;border-right:1px solid var(--line);border-bottom:0}
  .form-meta-inline.summary-panel div:nth-child(2){border-right:0}
  .form-meta-inline.summary-panel div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .form-meta-inline.summary-panel div:nth-child(4){border-right:0}
}
@media (max-width:640px){
  .form-meta-inline.summary-panel{grid-template-columns:1fr}
  .form-meta-inline.summary-panel div,
  .form-meta-inline.summary-panel div:nth-child(n){padding:14px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .form-meta-inline.summary-panel div:last-child{border-bottom:0}
  .flow-step .feature-row{grid-template-columns:42px minmax(0,1fr);column-gap:12px}
  .flow-step .feature-marker{width:42px;height:42px;flex-basis:42px}
  .flow-step .feature-copy>span{margin-top:12px!important}
  .contact-section .cta-strip{padding:40px 0 12px}
  .contact-question-row.contact-support-note{padding:14px 15px;font-size:.9rem}
  .custom-select-list{max-height:240px}
}


/* ===================== v1.0.7 consistency refinement ===================== */
/* Notes/callouts use the full content width consistently. */
.sponsored-note,
.contact-question-row.contact-support-note{
  width:100%;
  max-width:none;
}
.sponsored-note{margin-top:28px}

/* Match form summary typography to the Community hero metrics. */
.form-meta-inline.summary-panel strong{
  display:block;
  color:var(--text-strong);
  font-size:1.05rem;
  font-weight:600;
  line-height:1.4;
}
.form-meta-inline.summary-panel span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:clamp(.78rem,.86vw,.86rem);
  line-height:1.58;
}

/* The participation support note follows the same spacing rhythm as other section notes. */
.contact-section .cta-strip{padding:48px 0 24px}
.contact-question-row.contact-support-note{margin:0;padding:18px 20px}

/* Availability questions are deliberately full-width for robust label/control alignment
   on desktop, laptop and tablet layouts. */
#availability .field.full{grid-column:1/-1}

@media (max-width:640px){
  .contact-section .cta-strip{padding:40px 0 20px}
  .contact-question-row.contact-support-note{padding:16px 17px}
}


/* ===================== v1.0.9 content + responsive alignment ===================== */
/* At phone widths, the six foundation cards mirror the root homepage's architecture
   cards: icon marker becomes its own first row and the copy follows underneath. */
@media (max-width:760px){
  .two-col-list .list-item{padding:16px}
  .two-col-list .list-item .feature-row{grid-template-columns:1fr;gap:13px}
  .two-col-list .list-item .feature-marker{width:44px;height:44px;flex-basis:44px;border-radius:13px}
  .two-col-list .list-item .feature-marker .line-icon{width:21px;height:21px}
  .two-col-list .list-item .feature-copy strong{font-size:1rem}
  .two-col-list .list-item .feature-copy p{margin-top:8px!important}
}

/* Keep the participation actions and the support note visually distinct on all
   responsive layouts, especially when the buttons stack vertically. */
.contact-section .cta-strip{row-gap:24px}
.contact-section .contact-support-note{margin-top:10px}
@media (max-width:980px){
  .contact-section .cta-strip{row-gap:20px;padding-bottom:22px}
  .contact-section .contact-support-note{margin-top:8px}
}
@media (max-width:640px){
  .contact-section .cta-strip{row-gap:18px;padding-bottom:18px}
  .contact-section .contact-support-note{margin-top:8px}
}


/* ===================== v1.0.10 final content + responsive refinement ===================== */
/* Community hero intentionally has no technical grid; it now matches the plain Register/Contribute hero surface. */
.community-hero{background:var(--background)}

/* At tablet/phone widths, foundation topic cards follow the root site's five-layer mobile composition:
   marker first, then title/copy beneath it. */
@media (max-width:760px){
  .two-col-list .list-item .feature-row{grid-template-columns:1fr;gap:14px}
  .two-col-list .list-item .feature-marker{width:46px;height:46px;flex-basis:46px;border-radius:14px}
  .two-col-list .list-item .feature-marker .line-icon{width:22px;height:22px}
  .two-col-list .list-item .feature-copy strong{display:block;font-size:1rem}
  .two-col-list .list-item .feature-copy p{margin-top:9px!important}
}