@import url("css/grigsi-help.css?v=8");
@import url("css/grigsi-glass.css");
@import url("css/grigsi-card-guide.css?v=10");

:root{
  --primary:   #A693EF;
  --success:   #A693EF;
  --warning:   #FFC64B;
  --danger:    #F08B83;
  --neutral:   #83819B;
  --surface:   #FFC64B;
  --purple:    #A693EF;
  --green:     #A693EF;
  --red:       #F08B83;
  --gray:      #83819B;
  --yellow:    #FFC64B;
  --yellow-btn-text: #8A6D00;
  --blue:      #A693EF;
  --bg: #ffffff;
  --text: #1a1a24;
  --dark:      #1a1a2e;
  --trust-dark: #0f1628;
  --trust-blue: #1e3a5f;
  --shield-gold: #FFC64B;
  --safe-purple: #A693EF;
  --danger-red: #F08B83;
  --warning-orange: #FFC64B;
  --radius-card: 16px;
  --radius-btn: 12px;
  --shadow-card: 0 2px 10px rgba(166,147,239,.07);
  --shadow-btn: 0 1px 6px rgba(0,0,0,.07);
  --content-width: 900px;
  --section-bg-alt: #f8f9fa;
  /* Responsive spacing tokens (desktop → phone) */
  --page-gutter: clamp(12px, 3.6vw, 24px);
  --section-pad-y: clamp(40px, 7.5vw, 80px);
  --hero-pad-y-top: clamp(48px, 10vw, 100px);
  --hero-pad-y-bottom: clamp(40px, 8vw, 80px);
  --header-pad-y: clamp(32px, 6vw, 56px);
  /* Lighter than 20px blur — less GPU composite on nav + marketing glass */
  --nav-backdrop-blur: blur(10px) saturate(140%);
  /* Main-site liquid glass (body.ios-theme cards); static glow = cheaper than color-mix(animated accent) */
  --site-glass-backdrop: blur(10px) saturate(145%);
  --site-glass-card-shadow: 0 14px 40px rgba(0,0,0,.22), 0 0 24px rgba(255, 198, 75,.14);
  /* Shared top nav — matte glass on any background (Space gradient, cosmic ios-theme, white hubs) */
  --nav-matte-bg: rgba(255, 255, 255, 0.78);
  --nav-matte-border: rgba(129, 119, 240, 0.18);
  --nav-matte-shadow: 0 8px 32px rgba(15, 22, 36, 0.12);
  --nav-matte-backdrop: blur(16px) saturate(1.12);
  --nav-chrome-pill: rgba(166, 147, 239, 0.22);
  --nav-chrome-pill-border: rgba(129, 119, 240, 0.32);
  --nav-chrome-pill-text: #1a1530;
  --nav-chrome-pill-hover: rgba(255, 198, 75, 0.92);
}

/* Avoid horizontal layout shift when scrollbars appear (e.g. “More” panel / long pages). */
html{scrollbar-gutter:stable}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}

/* GriGsi top bar (shared on all pages). Sticky so it stays in flow: height grows when nav wraps to 2–3 rows, purple/green bar always starts below it. */
.grigsi-top-bar{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  display:flex;
  flex-wrap:wrap;
  /* Not inherited body line-height:1.6 — keeps bar height tight; center logo + .nav-buttons block */
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  padding:6px 14px;
  padding-top:max(6px, env(safe-area-inset-top));
  margin:0;
  background:var(--nav-matte-bg);
  border-bottom:1px solid var(--nav-matte-border);
  box-shadow:var(--nav-matte-shadow);
  backdrop-filter:var(--nav-matte-backdrop);
  -webkit-backdrop-filter:var(--nav-matte-backdrop);
  line-height:1.2;
}
/* Spacer only for safe-area; real space comes from header being in flow (sticky). */
.grigsi-top-bar-spacer{height:0;min-height:0}

/* e.g. /share/index: absolute "← Back" must sit below sticky site header (bar can wrap on narrow viewports). */
body:has(> header.grigsi-top-bar) > a.back-link{
  top:calc(env(safe-area-inset-top, 0px) + min(120px, max(56px, 18vw)));
}

/* --- Index bridge: Trust Check · Trust Index · Noise Text (same 3 tabs on every hub page) --- */
.index-switcher{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:8px;
  padding:12px 16px 14px;
  margin:0 auto;
  max-width:920px;
  box-sizing:border-box;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(0,0,0,.08);
}
body.ios-theme .index-switcher{
  background:rgba(61,40,96,.94);
  border-bottom-color:rgba(255,255,255,.12);
}
.index-switcher-link{
  flex:1 1 140px;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  font-size:0.8rem;
  font-weight:800;
  letter-spacing:0.01em;
  text-decoration:none;
  text-align:center;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  color:#1a1a24;
  background:#fff;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
body.ios-theme .index-switcher-link{
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  box-shadow:none;
}
.index-switcher-link i{font-size:1rem;opacity:.95}
.index-switcher-link:hover{
  border-color:rgba(129,119,240,.55);
  color:var(--purple);
  box-shadow:0 2px 10px rgba(129,119,240,.12);
}
body.ios-theme .index-switcher-link:hover{
  color:#fff;
  border-color:rgba(255, 198, 75,.55);
  background:rgba(255,255,255,.14);
}
.index-switcher-link.is-active,
.index-switcher-link[aria-current="page"]{
  background:linear-gradient(135deg,#8177f0 0%,#6b62d4 100%);
  color:#fff!important;
  border-color:rgba(107,98,212,.9);
  box-shadow:0 4px 14px rgba(107,98,212,.28);
  cursor:default;
}
body.ios-theme .index-switcher-link.is-active,
body.ios-theme .index-switcher-link[aria-current="page"]{
  background:linear-gradient(135deg,rgba(255, 198, 75,.42) 0%,rgba(255, 198, 75,.22) 100%);
  border-color:rgba(255, 198, 75,.55);
  box-shadow:0 4px 18px rgba(0,0,0,.22);
}
.index-switcher-link.is-active i,
.index-switcher-link[aria-current="page"] i{opacity:1}
@media (max-width:420px){
  .index-switcher-link{font-size:0.72rem;padding:9px 10px;gap:6px}
  .index-switcher-link i{font-size:0.9rem}
}
.grigsi-top-bar .logo{font-size:28px;font-weight:700;color:var(--purple);text-decoration:none;flex-shrink:0;white-space:nowrap;line-height:1.2;display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;position:relative;z-index:1;pointer-events:auto;min-height:44px;min-width:44px;-webkit-tap-highlight-color:rgba(166,147,239,.25)}
.grigsi-top-bar .logo-mark{box-sizing:border-box;width:28px;height:28px;min-width:28px;min-height:28px;flex-shrink:0;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:700;font-size:17px;line-height:1;color:#8177F0;background:rgba(255,255,255,.14)}
body.ios-theme .grigsi-top-bar .logo-mark{color:#fff!important;background:rgba(255,255,255,.12)!important}
.grigsi-top-bar .nav-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;justify-content:flex-end;line-height:1.2}
.grigsi-top-bar .btn-nav{
  display:inline-block;
  padding:4px 7px;
  background:var(--nav-chrome-pill);
  color:var(--nav-chrome-pill-text);
  font-weight:700;
  font-size:0.7rem;
  text-decoration:none;
  border-radius:8px;
  border:1px solid var(--nav-chrome-pill-border);
  box-shadow:0 1px 3px rgba(90,80,160,.08);
  line-height:1.15;
  vertical-align:middle;
}
.grigsi-top-bar .btn-nav:hover{background:var(--nav-chrome-pill-hover);color:var(--yellow-btn-text);border-color:rgba(255, 198, 75,.45)}
.grigsi-top-bar .btn-nav:active,.grigsi-top-bar .btn-nav:focus{background:var(--nav-chrome-pill-hover);color:var(--yellow-btn-text);border-color:rgba(255, 198, 75,.45)}
.grigsi-top-bar .btn-nav.btn-nav-yellow{background:rgba(255,198,75,.88);color:var(--yellow-btn-text);border-color:rgba(220,170,50,.4)}
.grigsi-top-bar .btn-nav.btn-nav-yellow:hover{background:#FFD966;color:#333;border-color:rgba(220, 175, 45,.45)}
.grigsi-top-bar .btn-nav.btn-nav-yellow:active,.grigsi-top-bar .btn-nav.btn-nav-yellow:focus{background:#FFCE4D;color:#333;border-color:rgba(220, 175, 45,.45)}
/* Instant CTA — yellow pill, purple label (not affected by ios-theme accent links) */
.grigsi-top-bar a.btn-nav.btn-nav-instant,
.grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]{
  background:#FFC64B!important;
  color:#3D2860!important;
  -webkit-text-fill-color:#3D2860!important;
  border:1px solid rgba(61,40,96,.45)!important;
  font-weight:800!important;
  box-shadow:0 1px 4px rgba(61,40,96,.2)!important;
}
.grigsi-top-bar a.btn-nav.btn-nav-instant:hover,
.grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]:hover{
  background:#FFD966!important;
  color:#2a1d45!important;
  -webkit-text-fill-color:#2a1d45!important;
  border-color:rgba(61,40,96,.55)!important;
}
.grigsi-top-bar a.btn-nav.btn-nav-instant:active,
.grigsi-top-bar a.btn-nav.btn-nav-instant:focus,
.grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]:active,
.grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]:focus{
  background:#FFCE4D!important;
  color:#2a1d45!important;
  -webkit-text-fill-color:#2a1d45!important;
}
/* Keep Trust Check + About visually same as standard nav buttons. */
.grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow,
.grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow,
.grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow{
  background:var(--nav-chrome-pill);
  color:var(--nav-chrome-pill-text);
  border-color:var(--nav-chrome-pill-border);
}
.grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow:hover,
.grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow:hover,
.grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow:hover{
  background:var(--nav-chrome-pill-hover);
  color:var(--yellow-btn-text);
  border-color:rgba(255, 198, 75,.45);
}
.grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow:active,
.grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow:active,
.grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow:active,
.grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow:focus,
.grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow:focus,
.grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow:focus{
  background:var(--nav-chrome-pill-hover);
  color:var(--yellow-btn-text);
  border-color:rgba(255, 198, 75,.45);
}
.grigsi-top-bar .coming-label{font-size:0.65rem;color:#666;margin:0 2px 0 4px;font-weight:700;line-height:1.2}

/* Landing bar + quick links (same as index; used on all synced subpages) */
header.grigsi-top-bar.home-min-bar{
  justify-content:space-between;
  align-items:center;
}
.home-min-bar .home-header-cluster{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:1;
  min-width:0;
}
@media (min-width:900px){
  .home-min-bar .home-header-cluster{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:8px 12px;
  }
}
.home-min-bar .nav-min{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 8px;
  font-size:0.78rem;
  font-weight:600;
  flex:0 1 auto;
  justify-content:flex-start;
}
.home-min-bar .nav-min a{
  color:rgba(255,255,255,.9);
  text-decoration:none;
}
.home-min-bar .nav-min a:hover{color:#fff;text-decoration:underline}
.home-min-bar .nav-min .nav-dot{opacity:.45;user-select:none}
.home-min-bar .nav-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  justify-content:flex-end;
  line-height:1.2;
}
body:not(.ios-theme) .home-min-bar .nav-min a{color:var(--purple)}
body:not(.ios-theme) .home-min-bar .nav-min a:hover{color:var(--purple);opacity:.85}

/* ——— “More” dropdown (grouped links; subpages nav) ——— */
.grigsi-top-bar .nav-dropdown{
  position:relative;
  list-style:none;
  align-self:center;
  flex-shrink:0;
}
.grigsi-top-bar summary.btn-nav.nav-more-summary{
  display:inline-block;
  list-style:none;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.grigsi-top-bar summary.btn-nav.nav-more-summary::-webkit-details-marker{display:none}
.grigsi-top-bar summary.btn-nav.nav-more-summary::marker{content:"";font-size:0}
.grigsi-top-bar summary.nav-more-summary::after{
  content:'\00a0▾';
  font-size:0.72em;
  opacity:.88;
}
.grigsi-top-bar .nav-dropdown[open] summary.btn-nav.nav-more-summary{
  outline:2px solid rgba(166,147,239,.45);
  outline-offset:1px;
}
.grigsi-top-bar .nav-more-panel{
  position:absolute;
  z-index:10050;
  right:0;
  /* Flush to summary (no gap): a gap breaks hover — pointer leaves <details> between button and panel */
  top:100%;
  width:min(100vw - 16px, 408px);
  max-width:min(100vw - 16px, 408px);
  min-width:0;
  max-height:min(70vh, calc(100dvh - 76px));
  padding:20px 14px 14px;
  background:rgba(248,247,252,.92);
  border:1px solid rgba(129,119,240,.16);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(15,22,36,.14),0 2px 8px rgba(90,80,160,.08);
  text-align:left;
  color:#1a1a24;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(90,80,140,.35) transparent;
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.grigsi-top-bar .nav-more-panel::-webkit-scrollbar{width:5px}
.grigsi-top-bar .nav-more-panel::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.22);
  border-radius:6px;
}
/* One column + minimal gaps — no empty grid cells */
.grigsi-top-bar .nav-more-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
.grigsi-top-bar .nav-more-group{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  align-content:flex-start;
  gap:8px 8px;
  min-width:0;
  padding:11px 12px 12px;
  border-radius:9px;
  border:1px solid transparent;
}
.grigsi-top-bar .nav-more-group .nav-more-heading{
  flex:0 0 100%;
  margin:0 0 6px;
  width:100%;
  line-height:1.2;
}
/* Section shells — one neutral “matte” family (accent = brand purple only) */
.grigsi-top-bar .nav-more-group-indexes,
.grigsi-top-bar .nav-more-group-instant,
.grigsi-top-bar .nav-more-group-product,
.grigsi-top-bar .nav-more-group-build,
.grigsi-top-bar .nav-more-group-community,
.grigsi-top-bar .nav-more-group-about{
  background:rgba(129,119,240,.06);
  border-color:rgba(129,119,240,.14);
}
/* Full-width “Coming soon” strip — same row as heading where space allows */
.grigsi-top-bar .nav-more-group.nav-more-group-span{
  grid-column:unset;
  padding:11px 12px;
  margin:0;
  border-top:none;
  background:rgba(0,0,0,.05);
  border:1px dashed rgba(0,0,0,.14);
}
.grigsi-top-bar .nav-more-group.nav-more-group-span .nav-more-heading{
  flex:0 0 auto;
  width:auto;
}
.grigsi-top-bar .nav-more-group.nav-more-group-span .nav-more-link{
  flex:0 1 auto;
}
.grigsi-top-bar .nav-more-heading{
  font-size:0.65rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#3a3a42;
  line-height:1.2;
}
/* Chip-style links: dark text on tinted fills (readable on white panel) */
.grigsi-top-bar .nav-more-link{
  display:inline-block;
  padding:7px 11px;
  font-size:0.78rem;
  font-weight:700;
  text-decoration:none;
  border-radius:7px;
  line-height:1.3;
  border:1px solid transparent;
  color:#142018;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.grigsi-top-bar .nav-more-link.nav-more-link-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.grigsi-top-bar .nav-more-link .nav-more-link-icons{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:0.95em;
}
.grigsi-top-bar .nav-more-link .nav-more-link-icons .fa-chart-line,
.grigsi-top-bar .nav-more-link .nav-more-link-icons .fa-coins{
  color:rgba(107,98,212,.85);
}
.grigsi-top-bar .nav-more-group-indexes .nav-more-link,
.grigsi-top-bar .nav-more-group-instant .nav-more-link,
.grigsi-top-bar .nav-more-group-product .nav-more-link,
.grigsi-top-bar .nav-more-group-build .nav-more-link,
.grigsi-top-bar .nav-more-group-community .nav-more-link,
.grigsi-top-bar .nav-more-group-about .nav-more-link{
  background:rgba(166,147,239,.14);
  border-color:rgba(129,119,240,.28);
  color:#2a2448;
}
.grigsi-top-bar .nav-more-group-indexes .nav-more-link:hover,
.grigsi-top-bar .nav-more-group-instant .nav-more-link:hover,
.grigsi-top-bar .nav-more-group-product .nav-more-link:hover,
.grigsi-top-bar .nav-more-group-build .nav-more-link:hover,
.grigsi-top-bar .nav-more-group-community .nav-more-link:hover,
.grigsi-top-bar .nav-more-group-about .nav-more-link:hover{
  background:rgba(166,147,239,.24);
  border-color:rgba(107,98,212,.38);
  color:#1a1530;
}
.grigsi-top-bar .nav-more-group-soon .nav-more-heading{color:#777}
.grigsi-top-bar .nav-more-group-soon .nav-more-link,
.grigsi-top-bar .nav-more-link-muted{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.12);
  color:#4a4a50;
  border-style:dashed;
  font-weight:600;
}
.grigsi-top-bar .nav-more-group-soon .nav-more-link:hover,
.grigsi-top-bar .nav-more-link-muted:hover{
  background:rgba(0,0,0,.08);
  color:#2c2c32;
}
.grigsi-top-bar .nav-more-link:focus-visible{
  outline:2px solid var(--ios-blue,#007AFF);
  outline-offset:2px;
}

a{color:inherit;text-decoration:none}
section{padding:var(--section-pad-y) var(--page-gutter)}
.container{
  max-width:var(--content-width);
  margin:0 auto;
  text-align:center;
  padding-left:max(var(--page-gutter), env(safe-area-inset-left));
  padding-right:max(var(--page-gutter), env(safe-area-inset-right));
}

/* Fixed Navigation */
.main-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(255,255,255,.98);
  backdrop-filter:var(--nav-backdrop-blur);
  -webkit-backdrop-filter:var(--nav-backdrop-blur);
  box-shadow:var(--shadow-card);
  padding:8px 16px;
  padding-top:max(8px, env(safe-area-inset-top));
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow:visible;
}
.nav-container{
  max-width:100%;
  margin:0 auto;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:visible;
}
.nav-logo{
  font-size:1.5rem;
  font-weight:700;
  color:var(--purple);
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  transition:color .2s;
}
.nav-logo:hover{
  color:var(--yellow);
}
.nav-logo i{
  color:var(--shield-gold);
}
.nav-links{
  list-style:none;
  display:flex;
  gap:4px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:4px 2px 8px 2px;
  flex:1;
  min-width:0;
}
.nav-links li{flex-shrink:0}
.nav-links a{
  color:var(--gray);
  font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{color:var(--purple)}
.nav-cta{
  background:var(--green);
  color:#333 !important;
  padding:4px 10px;
  border-radius:var(--radius-btn);
  transition:all .25s ease;
  font-size:0.78rem;
  white-space:nowrap;
  font-weight:600;
  box-shadow:var(--shadow-btn);
}
.nav-cta:hover{
  background:var(--yellow);
  color:#333 !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,198,75,.35);
}
.main-nav .nav-cta:focus,
.main-nav .nav-cta:focus-visible,
.main-nav .nav-logo:focus,
.main-nav .nav-logo:focus-visible,
.main-nav .nav-in-progress-label:focus{
  outline:none !important;
  box-shadow:none !important;
}
.nav-cta:focus,
.nav-cta:focus-visible{
  background:var(--yellow);
  color:#333 !important;
}
.nav-cta:hover:focus,
.nav-cta:hover:focus-visible,
.nav-cta.nav-highlight:hover:focus,
.nav-cta.nav-highlight:hover:focus-visible{
  background:var(--yellow);
  color:#333 !important;
}
.nav-single-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:1;
  min-width:0;
}
.nav-rows{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}
.nav-row-1{ margin:0; }
.nav-row-2{ margin:0; }
.nav-in-progress-label{
  font-size:0.78rem;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 10px;
  margin-left:12px;
  list-style:none;
  flex-shrink:0;
  line-height:1.4;
  display:inline-flex;
  align-items:center;
  border-radius:var(--radius-btn);
}
.nav-in-progress-label:focus{
  outline:none;
  box-shadow:none;
  background:#555;
  color:#fff;
}
.nav-disabled{
  background:#e8e8e8 !important;
  color:#888 !important;
}
.nav-disabled:hover{
  background:#ddd !important;
  color:#666 !important;
}
.nav-disabled:focus,
.nav-disabled:focus-visible{
  outline:none;
  background:#555 !important;
  color:#fff !important;
}
.nav-disabled:hover:focus,
.nav-disabled:hover:focus-visible{
  background:#555 !important;
  color:#fff !important;
}
.nav-highlight{
  background:var(--green) !important;
  color:#333 !important;
}
.nav-highlight:hover{
  background:var(--yellow) !important;
  color:#333 !important;
}
.nav-highlight:focus,
.nav-highlight:focus-visible{
  background:var(--yellow) !important;
  color:#333 !important;
}

/* Same width for all sections — centered, consistent */
.container-same-width{max-width:var(--content-width);margin-left:auto;margin-right:auto;text-align:center}
.container-same-width .section-layer-title,
.container-same-width .section-layer-desc,
.container-same-width .section-layer-desc p{text-align:center}
.container-same-width .front-sections-grid,
.container-same-width .feature-block{text-align:left}
/* Solutions: same-width container is centered by default — reset body text so cards & grids read left */
body.page-services .container-same-width{text-align:left}
body.page-live-check-index .container-same-width{text-align:left}

/* --- Index "bridge" callouts: links + colour cues between Check / Info Noise / Noise Text --- */
.index-bridge-group{
  width:100%;
  max-width:900px;
  margin:0 auto 16px;
  padding:0;
  box-sizing:border-box;
}
.info-index-container .index-bridge-group{max-width:100%}
.index-bridge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.index-bridge-grid--three{
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:0;
}
@media (max-width:900px){
  .index-bridge-grid--three{grid-template-columns:1fr}
}
@media (max-width:700px){
  .index-bridge-grid{grid-template-columns:1fr}
}
.index-bridge{
  margin:0;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.1);
  font-size:0.9rem;
  line-height:1.5;
  text-align:left;
  box-sizing:border-box;
}
.index-bridge h3{
  margin:0 0 8px;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}
.index-bridge p{
  margin:0 0 8px;
  color:#ffffff;
}
.index-bridge p:last-child{margin-bottom:0}
.index-bridge a{
  font-weight:700;
  text-decoration:none;
}
.index-bridge a:hover{text-decoration:underline}
.index-bridge--here-check{
  background:rgba(166, 147, 239,.18);
  border-color:rgba(45,107,69,.35);
  margin-bottom:12px;
}
.index-bridge--here-check h3{color:#ffffff}
.index-bridge--here-check a{color:#f0f0f0}
.index-bridge--here-info{
  background:rgba(166,147,239,.14);
  border-color:rgba(106,90,205,.3);
  margin-bottom:12px;
}
.index-bridge--here-info h3{color:#ffffff}
.index-bridge--here-info a{color:#f0f0f0}
.index-bridge--here-noise{
  background:rgba(255, 198, 75,.12);
  border-color:rgba(200,120,0,.32);
  margin-bottom:12px;
}
.index-bridge--here-noise h3{color:#ffffff}
.index-bridge--here-noise a{color:#f0f0f0}
.index-bridge--to-check{
  background:rgba(166, 147, 239,.1);
  border-color:rgba(45,107,69,.25);
}
.index-bridge--to-check h3{color:#ffffff}
.index-bridge--to-check a{color:#f0f0f0}
.index-bridge--to-info{
  background:rgba(166,147,239,.1);
  border-color:rgba(106,90,205,.22);
}
.index-bridge--to-info h3{color:#ffffff}
.index-bridge--to-info a{color:#f0f0f0}
.index-bridge--to-noise{
  background:rgba(255, 198, 75,.09);
  border-color:rgba(200,120,0,.25);
}
.index-bridge--to-noise h3{color:#ffffff}
.index-bridge--to-noise a{color:#f0f0f0}
/* Noise Text on dark ios-theme: solid tints for contrast */
body.ios-theme .ni-wrap .index-bridge--here-check{background:#1a2e1f;border-color:#98c9a8}
body.ios-theme .ni-wrap .index-bridge--here-info{background:#2a1f3d;border-color:#c4b8e8}
body.ios-theme .ni-wrap .index-bridge--here-noise{background:#3d2a1a;border-color:#e0c090}
body.ios-theme .ni-wrap .index-bridge--to-check{background:#1f2e23;border-color:#98c9a8}
body.ios-theme .ni-wrap .index-bridge--to-info{background:#2d1f3d;border-color:#c4b8e8}
body.ios-theme .ni-wrap .index-bridge--to-noise{background:#3d2a1a;border-color:#e0c090}

/* Optional: narrow content block (e.g. intro text) */
.content-narrow{max-width:720px;margin-left:auto;margin-right:auto}
.section-light-alt{background:var(--section-bg-alt)}

/* About — larger section, includes Features as subsection */
.section-about-standalone{
  padding:48px 24px;
  background:#fafafa;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.section-about-standalone .container{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.section-about-standalone .about-card{
  max-width:100%;
  background:#fff;
  padding:32px 28px;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  margin-bottom:24px;
}
.about-card-centered,
.about-card-centered p{
  text-align:center;
}
.about-card-centered .about-lead{max-width:560px;margin-left:auto;margin-right:auto}
.about-features-subsection{
  text-align:center;
  padding:28px 24px;
  margin:0;
}
.about-features-subsection h2{margin-bottom:12px}

/* Front page sections — one per row, all centered, same width */
.front-sections-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:900px;
  margin:0 auto;
  padding:24px 24px 40px;
}

.front-section-card{
  padding:0 !important;
  min-height:0;
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  border:1px solid rgba(0,0,0,.06);
  overflow:visible;
  position:relative;
}
/* In progress · Coming soon label (top-left of section) */
.in-progress-badge{
  position:absolute;
  top:12px;
  left:20px;
  padding:6px 12px;
  background:rgba(166,147,239,.12);
  color:var(--purple);
  border-radius:16px;
  font-size:.8rem;
  font-weight:600;
}
.front-section-card .container{
  max-width:100%;
  padding:28px 24px;
  text-align:center;
}
.front-section-card .feature-block{
  margin-bottom:0;
  text-align:center;
  display:block;
}
.front-section-card .feature-block .feature-icon-large{
  margin-left:auto;
  margin-right:auto;
  font-size:2rem;
  opacity:.9;
}
.front-section-card .feature-block h2,
.front-section-card .feature-block > p{
  text-align:center;
}
.front-section-card .feature-input-wrap,
.front-section-card .feature-block .feature-actions,
.front-section-card .feature-block .feature-result,
.front-section-card .feature-block .browser-downloads,
.front-section-card .feature-block .spaces-actions,
.front-section-card .feature-block > div[style*="display: flex"]{
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.front-section-card .about-card{ margin-bottom:0 }

/* Hero logo */
.hero-logo{
  width:120px;
  height:auto;
  margin-bottom:20px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
}

/* Styled tagline */
.tagline-styled{
  font-size:1.15rem;
  font-weight:500;
}
.tag-purple{
  color:#fff;
  font-weight:600;
}
.tag-red{
  color:#fff;
  font-weight:600;
}

/* Header — green background (all subpage hero strips under the top nav) */
header:not(.grigsi-top-bar):not(.hv1-header):not(.gv-header):not(.rd-admin-header):not(.rd-display-header):not(.rd-work-header):not(.vmcr-remote-top):not(.hx-hero):not(.sim-header):not(.odh-hero):not(.ist-hero):not(.ist-watch-header):not(.hp-head):not(.space-header){
  margin-top:60px;
  background:var(--green);
  color:#fff;
  padding:var(--header-pad-y) var(--page-gutter);
  text-align:center;
  box-shadow:0 4px 20px rgba(166, 147, 239,.25);
}
header h1{font-size:2.75rem;font-weight:700;margin-bottom:10px;letter-spacing:-0.02em}
header p{opacity:.95;font-size:1.15rem;font-weight:500}

/* Hero Section - iPhone Style */
.hero{
  margin-top:58px;
  background:linear-gradient(180deg, var(--purple) 0%, #6366f1 100%);
  color:#fff;
  padding:var(--hero-pad-y-top) var(--page-gutter) var(--hero-pad-y-bottom);
  text-align:center;
  position:relative;
}
.hero.hero-compact{
  padding-top:24px;
  padding-right:24px;
  padding-bottom:28px;
  padding-left:24px;
  border-radius:0 0 var(--radius-card) var(--radius-card);
}
.hero .container{position:relative;z-index:1}
.hero-title{
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:20px;
  letter-spacing:-0.02em;
}
.hero-two-cols{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:20px 58px;
  max-width:600px;
  margin:0 auto;
}
.hero-col{
  flex:1;
  min-width:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-title-single{
  font-size:2.8rem;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0 0 20px 0;
  text-align:center;
}
.hero-buttons-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.hero-subtitle-bottom{
  text-align:center;
  font-size:0.95rem;
  opacity:0.92;
  margin:20px 0 0 0;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}
.btn-hero-under{
  padding:10px 18px;
  font-size:0.95rem;
  font-weight:600;
  border-radius:var(--radius-btn);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
  display:inline-block;
}
.btn-hero-under:hover{transform:translateY(-2px);}
.btn-hero-yellow{
  background:var(--yellow);
  color:var(--yellow-btn-text);
  border:none;
  box-shadow:var(--shadow-btn);
}
.btn-hero-yellow:hover{box-shadow:0 4px 12px rgba(255,198,75,.4);}
.btn-hero-purple{
  background:var(--green);
  color:#fff;
  border:none;
  box-shadow:var(--shadow-btn);
}
.btn-hero-purple:hover{box-shadow:0 4px 12px rgba(166, 147, 239,.4);}
.hero-subtitle{
  font-size:1.15rem;
  opacity:.9;
  max-width:500px;
  margin:0 auto 40px;
  font-weight:400;
  line-height:1.7;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-large{
  padding:16px 32px;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn-primary{
  background:var(--yellow);
  color:var(--yellow-btn-text);
  border-radius:var(--radius-btn);
  font-weight:600;
  box-shadow:var(--shadow-btn);
  transition:all .25s ease;
  border:none;
}
.btn-primary:hover{
  background:var(--green);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(166, 147, 239,.35);
}
.btn-secondary{
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:14px;
  font-weight:600;
  backdrop-filter:var(--nav-backdrop-blur);
  transition:all .2s ease;
}
.btn-secondary:hover{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-2px);
}
.hero-features{
  display:flex;
  gap:40px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-feature{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  opacity:.9;
}
.hero-feature i{
  font-size:1.2rem;
  opacity:.8;
}

/* Sections */
.section-light{background:#fff}
.section-dark{background:#1a1a2e;color:#fff}
.section-accent{background:linear-gradient(135deg, var(--green) 0%, #8B7BD4 100%);color:#fff}
.section-title{
  font-size:2rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:12px;
  display:block;
  border:none;
  padding:0;
}
.section-title.light{color:#fff}
.section-subtitle{
  color:var(--gray);
  font-size:1.1rem;
  max-width:600px;
  margin:0 auto 48px;
}
.section-subtitle.light{color:rgba(255,255,255,.85)}
.section-layer-title{
  font-size:1.6rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:8px;
  display:block;
}
.section-layer-desc{
  font-size:1rem;
  color:var(--gray);
  max-width:640px;
  margin:0 auto;
  line-height:1.5;
}
/* Feature blocks inside sections — centered container, same width */
.section-inner-grid{
  display:block;
  max-width:var(--content-width);
  margin:0 auto;
}
.feature-block.feature-bordered{
  margin-bottom:16px;
  padding:20px 24px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-card);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.section-inner-grid .feature-block.feature-bordered{max-width:100%;margin-left:auto;margin-right:auto}
.feature-block.feature-bordered h3{font-size:1.1rem;margin-bottom:8px;color:var(--dark);display:flex;align-items:center;gap:8px}
.feature-block.feature-bordered h3 i{color:var(--purple)}
.feature-block.feature-bordered p{font-size:14px;color:var(--gray);line-height:1.5;margin:0 0 12px}
.feature-block.feature-bordered p:last-of-type{margin-bottom:0}
.section-subheading{font-size:1rem;color:var(--gray);margin:0 auto 16px;max-width:var(--content-width);text-align:center}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;max-width:var(--content-width);margin:0 auto 40px}
.plan-card{padding:20px;background:#fff;border:1px solid #eee;border-radius:var(--radius-btn);text-align:center;box-shadow:var(--shadow-card)}
.plan-card h3{font-size:1.1rem;color:var(--purple);margin-bottom:8px}
.plan-card p{font-size:13px;color:var(--gray);margin:0;line-height:1.5}
.btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
}
.btn-group .btn-outline{margin-left:0}
.hub-cta-row{margin-top:16px;text-align:center}
.hub-cta-row.hub-cta-row-spaced{margin-top:32px}

/* Check Index on site (landing) */
#check.check-section{padding-top:32px;padding-bottom:48px}
#check .check-container{max-width:560px}
#check .check-title{margin-bottom:8px;color:var(--dark);text-align:center}
#check .check-subtitle{margin:0 auto 20px;color:var(--gray);text-align:center;font-size:.9rem;font-weight:600}
#check .check-result-actions{margin-top:12px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#check .check-vote-btn{border:none;padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-btn)}
#check .check-vote-down{background:var(--danger);color:#fff}
#check .check-vote-up{background:var(--yellow);color:var(--yellow-btn-text)}
#check .check-vote-up:hover{background:var(--purple);color:#fff}
#check .check-error{margin-top:16px;padding:12px;border-radius:10px;background:rgba(240,139,131,.12);color:var(--danger-red);font-size:14px}

/* About section (landing) — same width, centered, brand colors */
#about.about-full{
  width:100%;
  max-width:var(--content-width);
  margin-left:auto;
  margin-right:auto;
  padding:48px 24px 56px;
  text-align:center;
  background:var(--section-bg-alt);
  box-sizing:border-box;
}
#about.about-full h2{
  font-size:1.6rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:16px;
}
#about.about-full p{
  font-size:1rem;
  color:var(--gray);
  line-height:1.7;
  margin-bottom:1rem;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
#about.about-full p:last-child{margin-bottom:0}

/* Space Demo */
.space-demo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:left;
}
.space-window{
  background:#1a1a2e;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.space-header{
  background:#252541;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.space-code{
  font-family:monospace;
  font-size:.95rem;
  color:var(--green);
  font-weight:600;
}
.space-status{
  font-size:.85rem;
  color:rgba(255,255,255,.7);
}
.space-window .space-tabs{
  display:flex;
  background:#1f1f35;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.space-window .space-tabs .tab{
  padding:12px 20px;
  color:rgba(255,255,255,.5);
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:all .2s;
}
.space-window .space-tabs .tab.active{
  color:#fff;
  background:#1a1a2e;
  border-bottom:2px solid var(--green);
}
.space-content{
  padding:20px;
  min-height:200px;
}
.chat-preview{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-msg{
  padding:10px 14px;
  border-radius:12px;
  font-size:.9rem;
  max-width:80%;
}
.chat-msg.received{
  background:#252541;
  color:#fff;
  align-self:flex-start;
}
.chat-msg.sent{
  background:var(--green);
  color:#fff;
  align-self:flex-end;
}
.chat-msg.system{
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  align-self:center;
  font-size:.85rem;
}
.space-features{display:flex;flex-direction:column;gap:24px}
.space-feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.space-feature .feature-icon{
  width:48px;
  height:48px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.space-feature .feature-icon i{
  font-size:1.2rem;
  color:#fff;
}
.space-feature .feature-content h3{
  color:var(--purple);
  font-size:1.1rem;
  margin-bottom:4px;
}
.space-feature .feature-content p{
  color:var(--gray);
  font-size:.95rem;
  margin:0;
}

/* Space Types Grid */
.space-types-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
.space-type-card{
  background:#fff;
  border-radius:16px;
  padding:32px 28px;
  text-align:center;
  position:relative;
  transition:all .25s;
  border:2px solid transparent;
}
.space-type-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.space-type-card.featured{
  border-color:var(--green);
  transform:scale(1.02);
}
.space-type-card.featured:hover{
  transform:scale(1.02) translateY(-4px);
}
.type-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:#fff;
  padding:6px 16px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
}
.type-icon{
  width:64px;
  height:64px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.type-icon i{
  font-size:1.8rem;
  color:#fff;
}
.space-type-card h3{
  color:#1a1a2e;
  font-size:1.3rem;
  margin-bottom:12px;
}
.type-desc{
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:20px;
  min-height:60px;
}
.type-features{
  list-style:none;
  text-align:left;
  margin-bottom:20px;
}
.type-features li{
  padding:8px 0;
  color:var(--text);
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:10px;
}
.type-features li i{
  color:var(--green);
  font-size:.85rem;
}
.type-price{
  display:block;
  font-size:1.4rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:16px;
}
.btn-outline{
  background:transparent;
  color:var(--purple);
  border:2px solid var(--purple);
  padding:10px 24px;
  border-radius:10px;
  font-weight:600;
  transition:all .2s;
  display:inline-block;
}
.btn-outline:hover{
  background:var(--purple);
  color:#fff;
}

/* Trust Section */
.trust-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:left;
}
.browser-mockup{
  background:#f5f5f7;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.1);
}
.browser-bar{
  background:#e8e8eb;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.browser-bar .dot{
  width:12px;
  height:12px;
  background:#ccc;
  border-radius:50%;
}
.browser-bar .url{
  flex:1;
  background:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:.85rem;
  color:var(--red);
  font-family:monospace;
}
.browser-bar .trust-badge{
  padding:4px 10px;
  border-radius:6px;
  font-size:.75rem;
  font-weight:600;
}
.browser-bar .trust-badge.danger{
  background:var(--red);
  color:#fff;
}
.browser-content{
  padding:24px;
  background:#fff;
}
.trust-popup{
  background:#fff;
  border:2px solid var(--purple);
  border-radius:12px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.popup-header{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--purple);
  font-weight:600;
  margin-bottom:12px;
}
.popup-domain{
  font-family:monospace;
  font-size:1.1rem;
  color:var(--text);
  margin-bottom:12px;
}
.popup-warning{
  background:rgba(255,126,112,.1);
  color:var(--red);
  padding:10px 14px;
  border-radius:8px;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.popup-similar{
  font-size:.9rem;
  color:var(--gray);
  margin-bottom:16px;
}
.popup-similar strong{
  color:var(--green);
}
.popup-score{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.score-label{
  font-size:.9rem;
  color:var(--gray);
}
.score-value{
  font-size:1.3rem;
  font-weight:700;
}
.score-value.danger{color:var(--red)}
.score-value.safe{color:var(--green)}
.popup-votes{
  display:flex;
  gap:16px;
}
.popup-votes .vote{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}
.popup-votes .vote.up{color:var(--green)}
.popup-votes .vote.down{color:var(--red)}
.trust-info h3{
  color:var(--purple);
  font-size:1.5rem;
  margin-bottom:24px;
}
.trust-steps{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:32px;
}
.trust-step{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.step-num{
  width:36px;
  height:36px;
  background:var(--purple);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}
.step-content h4{
  color:var(--text);
  margin-bottom:4px;
}
.step-content p{
  color:var(--gray);
  font-size:.9rem;
  margin:0;
}
.privacy-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gray);
  font-size:.9rem;
  margin-top:12px;
  transition:color .2s;
}
.privacy-link:hover{color:var(--purple)}

/* Organization Features */
.org-features{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-bottom:48px;
}
.org-feature{
  text-align:center;
  padding:24px;
}
.org-feature i{
  font-size:2.5rem;
  margin-bottom:16px;
  opacity:.9;
}
.org-feature h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.org-feature p{
  font-size:.9rem;
  opacity:.8;
}
.org-cta{
  text-align:center;
}
.btn-light{
  background:#fff;
  color:var(--green);
  border-radius:12px;
  font-weight:700;
  transition:all .25s;
}
.btn-light:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}

/* About Section */
.about-content{
  max-width:700px;
  margin:0 auto;
  text-align:left;
}
.about-content p{
  margin-bottom:16px;
  line-height:1.8;
  color:var(--gray);
}
.about-content .lead-text{
  font-size:1.15rem;
  color:var(--text);
  margin-bottom:24px;
}

/* Contact Grid */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:start;
  text-align:left;
}
.contact-info h2{
  color:#fff;
  font-size:2rem;
  margin-bottom:16px;
  border:none;
}
.contact-info p{
  color:rgba(255,255,255,.8);
  margin-bottom:24px;
}
.contact-methods{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-method{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}
.contact-method i{
  font-size:1.2rem;
  color:var(--green);
}
.contact-form-wrap{
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:32px;
  backdrop-filter:var(--nav-backdrop-blur);
}
.form-group{
  margin-bottom:20px;
}
.form-group label{
  display:block;
  color:rgba(255,255,255,.9);
  font-weight:500;
  margin-bottom:8px;
}
.form-group .required{color:var(--red)}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  border-radius:10px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  transition:all .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:rgba(255,255,255,.5);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(255,255,255,.15);
}
.form-group select option{
  background:#1a1a2e;
  color:#fff;
}

/* Footer updates */
.footer-brand{
  margin-bottom:20px;
}
.footer-logo{
  font-size:1.8rem;
  font-weight:700;
  color:var(--purple);
}
.footer-brand p{
  color:var(--gray);
  margin-top:4px;
}
.footer-copy{
  margin-top:24px;
  font-size:.9rem;
}

/* Section titles — yellow underline */
.section h2, .product-section h2,
.front-section-card h2, .about-card h2, .about-features-subsection h2{
  font-size:1.75rem;
  color:var(--purple);
  margin-bottom:24px;
  padding-bottom:12px;
  border-bottom:3px solid var(--yellow);
  display:inline-block;
}
.section h2 .beta, .product-section h2 .beta{color:var(--red);font-size:.85em;font-weight:600}

/* Lead text & tips */
.lead-text{color:var(--gray);max-width:680px;margin:0 auto 18px;line-height:1.8}

/* Features grid */
.features-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
  justify-content:center;
}
.feature-item{
  flex:1 1 240px;
  max-width:280px;
  padding:28px 24px;
  background:#fff;
  border-radius:14px;
  border:2px solid rgba(166,147,239,.1);
  transition:all .25s ease;
}
.feature-item:hover{
  border-color:var(--purple);
  box-shadow:0 8px 24px rgba(166,147,239,.12);
  transform:translateY(-4px);
}
.feature-item i{
  font-size:2rem;
  color:var(--purple);
  margin-bottom:14px;
}
.feature-item h3{
  color:var(--purple);
  font-size:1.1rem;
  margin-bottom:10px;
}
.feature-item p{
  color:var(--gray);
  font-size:.9rem;
  line-height:1.6;
}
.tip{
  font-size:.9rem;
  color:var(--text);
  background:linear-gradient(135deg, rgba(255,198,75,.12) 0%, rgba(127,209,123,.08) 100%);
  padding:14px 20px;
  border-radius:10px;
  margin:20px auto;
  max-width:600px;
  border-left:4px solid var(--yellow);
}

/* Solutions grid */
.services-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
  justify-content:center;
}
.service-card{
  flex:1 1 300px;
  max-width:360px;
  padding:32px 28px;
  background:#fff;
  border-radius:16px;
  border:2px solid rgba(166,147,239,.15);
  text-align:left;
  transition:all .25s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.service-card:hover{
  border-color:var(--green);
  box-shadow:0 12px 32px rgba(166, 147, 239,.15);
  transform:translateY(-4px);
}
.service-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--green) 0%, #8B7BD4 100%);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.service-icon i{
  font-size:1.5rem;
  color:#fff;
}
.service-card h3{
  color:var(--purple);
  font-size:1.2rem;
  margin-bottom:12px;
}
.service-card p{
  color:var(--gray);
  font-size:.95rem;
  line-height:1.6;
  margin-bottom:8px;
}
.browser-downloads{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.btn-browser{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  background:#fff;
  color:var(--text);
  border-radius:12px;
  font-size:.85rem;
  font-weight:500;
  border:1.5px solid rgba(0,0,0,.08);
  transition:all .2s ease;
}
.btn-browser:hover{
  border-color:var(--purple);
  color:var(--purple);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(166,147,239,.12);
}
.btn-browser i{
  font-size:1rem;
}

/* Product sections — alternating subtle backgrounds */
.product-section{
  background:linear-gradient(180deg, #f8f9ff 0%, #fff 100%);
  border-top:1px solid rgba(166,147,239,.1);
}

/* GriGsi Community — browser cards */
.lc-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:28px;
  justify-content:center;
}
.lc-item{
  flex:1 1 160px;
  max-width:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 20px;
  background:#fff;
  border:2px solid rgba(166,147,239,.15);
  border-radius:14px;
  transition:all .25s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.lc-item:hover{
  box-shadow:0 12px 28px rgba(166,147,239,.15);
  transform:translateY(-4px);
  border-color:var(--purple);
}
.lc-item i{font-size:2.5rem;margin-bottom:14px;color:var(--purple);transition:color .2s}

/* Browser-specific colors */
.browser-chrome:hover i{color:#4285F4}
.browser-firefox:hover i{color:#FF7139}
.browser-edge:hover i{color:#0078D7}
.browser-opera:hover i{color:#FF1B2D}
.browser-android:hover i{color:#3DDC84}
.browser-ios:hover i{color:#000}

/* Coming Soon badge */
.badge-soon{
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  color:#fff;
  background:var(--yellow);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:8px;
}
.lc-item strong{color:var(--purple);margin-bottom:10px;font-size:1.05rem;font-weight:600}
.lc-item p{color:var(--gray);font-size:.9rem;margin-bottom:14px;flex:1}
.lc-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none;border-style:dashed}
.lc-item.disabled .btn-privacy{pointer-events:auto;cursor:pointer}
.lc-item.disabled:hover{transform:none;box-shadow:0 4px 12px rgba(0,0,0,.04);border-color:rgba(166,147,239,.15)}

/* Form in meeting section */
#meeting{
  background:linear-gradient(180deg, #fff 0%, rgba(127,209,123,.06) 100%);
}
.contact-box{
  max-width:480px;
  margin:0 auto;
  padding:36px 40px;
  border:2px solid var(--purple);
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 8px 32px rgba(166,147,239,.12);
}
#meeting form{max-width:100%;margin:24px auto 0;text-align:left}
#meeting label{display:block;margin-bottom:10px;color:var(--purple);font-weight:600}
#meeting select{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(166,147,239,.2);
  border-radius:10px;
  margin-bottom:20px;
  font-size:1rem;
  transition:border-color .2s;
}
#meeting select:focus{outline:none;border-color:var(--purple)}
#meeting input[type="date"]{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(166,147,239,.2);
  border-radius:10px;
  margin-bottom:16px;
  font-size:1rem;
  font-family:inherit;
  transition:border-color .2s;
}
#meeting input[type="date"]:focus,
#meeting input[type="email"]:focus,
#meeting input[type="text"]:focus,
#meeting input[type="time"]:focus{outline:none;border-color:var(--purple)}
#meeting input[type="text"],
#meeting input[type="email"],
#meeting input[type="time"]{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(166,147,239,.2);
  border-radius:10px;
  margin-bottom:20px;
  font-size:1rem;
  font-family:inherit;
  transition:border-color .2s;
}
#meeting textarea{
  width:100%;
  min-height:100px;
  padding:12px 14px;
  border:2px solid rgba(166,147,239,.2);
  border-radius:10px;
  margin-bottom:16px;
  font-size:1rem;
  font-family:inherit;
  resize:vertical;
  transition:border-color .2s;
}
#meeting textarea:focus{outline:none;border-color:var(--purple)}
#meeting .required{color:var(--red)}
.meeting-note{
  font-size:.85rem;
  color:var(--gray);
  margin-bottom:16px;
}

/* Intro */
.intro{text-align:center;padding:40px 20px;color:var(--gray)}
.intro h1{
  font-size:3rem;font-weight:700;margin-bottom:16px;color:var(--purple);
}
.tagline{color:var(--gray);margin-top:12px}
.navlinks{margin-top:8px;color:var(--gray)}
.intro-link{color:var(--green);font-weight:600;margin:0 6px;font-size:2rem}

/* About area columns */
.about-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:10px}
.about-column{flex:1;min-width:300px;max-width:520px}
.about-toggle{
  background:transparent;border:none;color:var(--green);font-size:1.05rem;cursor:pointer;margin-bottom:8px;
}

/* About content scroll; collapsed by default */
.about-content{
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  text-align:left;
  background:#fafafa;
  border-left:4px solid var(--green);
  border-radius:8px;
  line-height:1.5;
  transition:max-height .45s ease,padding .25s ease;
}
.about-content.open{
  padding:18px;
  max-height:400px;
  overflow-y:auto;
}

/* Sections and cards */
h2{font-size:1.8rem;color:var(--purple);margin-bottom:8px}
.lead{color:var(--gray);margin-bottom:8px}
.note{font-size:0.95rem;color:var(--red);margin-bottom:10px}
.note-black{font-size:0.95rem;color:#000;margin-bottom:5px} /* tighter spacing */
.cards{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;justify-content:center}
.card{
  flex:1 1 200px;
  border:1px solid #eee;border-radius:12px;padding:18px;text-align:center;
  transition:box-shadow .25s ease,transform .15s ease;display:flex;flex-direction:column;justify-content:space-between;
}
.card:hover{box-shadow:0 8px 22px rgba(0,0,0,0.08);transform:translateY(-4px)}
.card h3{color:var(--green);margin-bottom:8px}
.card p{color:var(--gray);margin-bottom:8px}
.price{font-weight:700;color:var(--purple);margin-top:8px}

/* Buttons — default yellow, hover green (iPhone style) */
.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:var(--radius-btn);
  background:var(--yellow);
  color:var(--yellow-btn-text);
  font-weight:600;
  transition:all .25s ease;
  cursor:pointer;
  border:none;
  text-align:center;
  box-shadow:var(--shadow-btn);
}
.btn:hover{background:var(--green);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(166, 147, 239,.35)}

/* Modal styling */
.modal{
  display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;
  background-color:rgba(0,0,0,0.55);align-items:flex-start;justify-content:center;padding:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal[aria-hidden="false"]{display:flex}
.modal-content{
  background:#fff;border-radius:12px;padding:40px 28px 28px;width:100%;max-width:560px;text-align:center;position:relative;
  margin:max(20px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
  max-height:calc(100dvh - 40px);overflow:auto;
}
.modal-content h2{color:var(--purple);margin-bottom:14px}
.close-btn{position:absolute;top:10px;right:14px;font-size:22px;color:var(--gray);cursor:pointer;z-index:2}

@media(max-width:520px){
  .modal{padding:12px}
  .modal-content{padding:44px 18px 18px;max-width:100%;max-height:calc(100dvh - 24px)}
}
.modal-buttons .btn{display:block;width:85%;margin:10px auto}

/* Small helpers */
.form-message{padding:12px;background:var(--green);color:#fff;border-radius:8px;text-align:center;display:none}
footer{
  text-align:center;
  padding:56px 24px;
  background:#f8f8fa;
  color:var(--gray);
}
.footer-content{max-width:900px;margin:0 auto}
.footer-logo{
  font-size:1.5rem;
  font-weight:700;
  color:var(--purple);
}
.footer-tagline{
  color:var(--gray);
  font-size:.9rem;
  margin-top:6px;
}
.footer-links{
  margin:24px 0;
  display:flex;
  justify-content:center;
  gap:28px;
}
.footer-links a{
  color:var(--gray);
  font-weight:500;
  transition:color .2s;
}
.footer-links a:hover{color:var(--purple)}
.footer-copy{
  font-size:.85rem;
  color:rgba(117,117,117,.7);
}
a.footer-logo{
  display:inline-block;
  text-decoration:none;
}
a.footer-logo:hover{
  color:var(--yellow);
}
.footer-nav-groups{
  margin:24px 0;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.footer-nav-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:6px 12px;
  max-width:780px;
}
.footer-nav-label{
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#6a6580;
  width:100%;
  text-align:center;
  margin-bottom:2px;
}
.footer-nav-row a{
  color:var(--gray);
  font-weight:500;
  font-size:.88rem;
  text-decoration:none;
}
.footer-nav-row a:hover{
  color:var(--purple);
}

/* Back to top button */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:48px;
  height:48px;
  background:var(--purple);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
  box-shadow:0 4px 16px rgba(166,147,239,.3);
  z-index:999;
}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--blue);transform:translateY(-4px)}
.btn-privacy{
  background:transparent;
  color:var(--gray);
  border:2px solid rgba(117,117,117,.3);
  margin-top:8px;
  display:inline-block;
  padding:10px 20px;
}
.btn-privacy:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

.btn-service{
  display:inline-block;
  margin-top:12px;
  padding:12px 20px;
  background:var(--purple);
  color:#fff;
  border-radius:10px;
  font-weight:600;
  transition:all .2s ease;
}
.btn-service:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,192,230,.3)}
.privacy-content{max-width:640px;margin:0 auto;text-align:left}
.privacy-content p{margin-bottom:16px;line-height:1.7;color:var(--text)}

/* privacy.html — light yellow body copy on dark ios-theme background */
body.ios-theme.privacy-policy-page .privacy-main h2{
  color: #fff6c8 !important;
}
body.ios-theme.privacy-policy-page .privacy-content,
body.ios-theme.privacy-policy-page .privacy-content p{
  color: #fff3c0 !important;
  line-height: 1.72;
}
body.ios-theme.privacy-policy-page .privacy-content strong{
  color: #fffadf !important;
  font-weight: 700;
}
body.ios-theme.privacy-policy-page .privacy-content code{
  color: #ffe9a6 !important;
  background: rgba(0, 0, 0, 0.32) !important;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.92em;
}
body.ios-theme.privacy-policy-page .privacy-main .btn{
  color: #1a1608 !important;
  background: var(--yellow, #f0c14b) !important;
  border: none;
}
body.ios-theme.privacy-policy-page .privacy-main .btn:hover{
  filter: brightness(1.06);
}

/* What I Offer — compact intro */
#offer .lead-text{margin-bottom:0}

/* Who are we — soft blue tint */
#who{
  background:linear-gradient(180deg, rgba(79,192,230,.05) 0%, #fff 100%);
}
#who .lead-text:first-of-type{margin-top:8px}

/* ComAi — BETA styling */
#comai{
  background:linear-gradient(180deg, rgba(255,126,112,.04) 0%, #fff 100%);
}
#comai textarea{
  width:100%;
  max-width:600px;
  height:120px;
  margin:20px auto;
  display:block;
  padding:14px 18px;
  border-radius:10px;
  border:2px solid rgba(166,147,239,.2);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s;
}
#comai textarea:focus{outline:none;border-color:var(--purple)}

/* Research — chaty with yellow accent */
#research h3{
  color:#9A7B00;
  font-size:1.25rem;
  margin:24px 0 12px;
  padding:8px 16px;
  background:rgba(255,198,75,.2);
  border-radius:8px;
  display:inline-block;
  border-left:4px solid var(--yellow);
}
#research textarea{
  width:100%;
  max-width:600px;
  height:120px;
  margin-top:20px;
  padding:14px 18px;
  border-radius:10px;
  border:2px solid rgba(166,147,239,.2);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s;
}
#research textarea:focus{outline:none;border-color:var(--purple)}

/* Download title smaller */
.download-title{font-size:1.35rem;margin-bottom:16px}

/* Scroll animations */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;
}
.fade-in-visible{
  opacity:1;
  transform:translateY(0);
}

/* Focus: no purple outline; same principle as nav — hover = other color, focus = white text */
a:focus,button:focus,input:focus,select:focus,textarea:focus{
  outline:none;
}
.btn:focus{
  outline:none;
  background:var(--green);
  color:#fff;
}
.btn:focus:hover{
  background:var(--green);
  color:#fff;
}
.btn-outline:focus,
.btn-primary:focus,
.btn-hero-yellow:focus,
.btn-hero-purple:focus{
  outline:none;
}
.btn-outline:focus{background:var(--purple);color:#fff}
.btn-primary:focus,
.btn-hero-purple:focus{background:var(--green);color:#fff}
.btn-hero-yellow:focus{background:var(--yellow);color:var(--yellow-btn-text)}

/* ========================================
   SIMPLE CLEAN DESIGN
   ======================================== */

/* Hero tagline */
.hero-tagline{
  font-size:1.3rem;
  font-weight:600;
  color:rgba(255,255,255,.9);
  margin-bottom:32px;
  letter-spacing:1px;
}

/* Why Grid */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  margin-top:40px;
}
.why-card{
  background:#fff;
  border:2px solid rgba(166,147,239,.1);
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  transition:all .25s;
}
.why-card:hover{
  border-color:var(--purple);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(166,147,239,.12);
}
.why-icon{
  width:64px;
  height:64px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.why-icon i{
  font-size:1.6rem;
  color:#fff;
}
.why-card h3{
  color:var(--purple);
  font-size:1.15rem;
  margin-bottom:10px;
}
.why-card p{
  color:var(--gray);
  font-size:.95rem;
  line-height:1.6;
}

/* Extension Demo */
.extension-demo{
  max-width:400px;
  margin:0 auto 40px;
}
.extension-demo .browser-mockup{
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.extension-demo .browser-content{
  background:#f9f9f9;
  padding:20px;
}
.extension-demo .trust-popup{
  background:#fff;
  border:2px solid var(--purple);
  border-radius:12px;
  padding:20px;
  text-align:center;
}
.extension-demo .popup-header{
  color:var(--purple);
  font-weight:700;
  font-size:1rem;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.extension-demo .popup-score{
  margin-bottom:16px;
}
.extension-demo .popup-score .score{
  display:block;
  font-size:3rem;
  font-weight:800;
}
.extension-demo .popup-score .score.danger{color:var(--red)}
.extension-demo .popup-score .score.safe{color:var(--green)}
.extension-demo .popup-score .score-label{
  font-size:.85rem;
  color:var(--gray);
}
.extension-demo .popup-votes{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-bottom:12px;
}
.extension-demo .popup-votes .vote{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}
.extension-demo .popup-votes .vote.up{color:var(--green)}
.extension-demo .popup-votes .vote.down{color:var(--red)}
.extension-demo .popup-warning{
  font-size:.85rem;
  color:var(--red);
  background:rgba(255,126,112,.1);
  padding:10px 16px;
  border-radius:8px;
  margin:0;
}

/* Spaces Simple */
.spaces-simple{
  display:flex;
  justify-content:center;
  gap:48px;
  margin:40px 0;
  flex-wrap:wrap;
}
.spaces-simple .space-feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.spaces-simple .space-feature i{
  font-size:2.5rem;
  color:var(--purple);
}
.spaces-simple .space-feature span{
  font-size:1rem;
  color:var(--gray);
  font-weight:500;
}

/* Section Soft */
.section-soft{
  background:linear-gradient(180deg, rgba(166,147,239,.04) 0%, #fff 100%);
}

/* About Simple */
.about-simple{
  max-width:600px;
  margin:0 auto;
  text-align:center;
}
.about-simple .lead-text{
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:20px;
}
.about-simple p{
  color:var(--gray);
  margin-bottom:16px;
  line-height:1.8;
}

/* Contact Simple */
.contact-simple{
  max-width:400px;
  margin:0 auto;
}
.contact-form-minimal{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form-minimal input,
.contact-form-minimal textarea{
  width:100%;
  padding:14px 18px;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  border-radius:10px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  transition:all .2s;
}
.contact-form-minimal input::placeholder,
.contact-form-minimal textarea::placeholder{
  color:rgba(255,255,255,.5);
}
.contact-form-minimal input:focus,
.contact-form-minimal textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(255,255,255,.15);
}
.contact-form-minimal .btn{
  margin-top:8px;
}
.contact-direct{
  margin-top:24px;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
}
.contact-direct a{
  color:var(--green);
  font-weight:600;
}
.contact-direct a:hover{
  color:var(--yellow);
}

/* Feature Blocks - iPhone Style */
.feature-block{
  max-width:600px;
  margin:0 auto 64px;
  text-align:center;
}
.feature-block:last-child{margin-bottom:0}
.feature-block.feature-bordered{
  background:#f8f8fa;
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:var(--radius-card);
  padding:40px;
}
.front-section-card .feature-block.feature-bordered{
  background:transparent;
  border:none;
  padding:0;
}

/* Scroll offset for fixed navigation - applies to all sections */
section, [id] {
  scroll-margin-top: 40px;
}

/* Check, Poll, Space and Join need more offset (they're inside a section) */
#check, #section-poll, #section-spaces, #section-apps, #section-public-survey, #features {
  scroll-margin-top: 100px;
}

/* Feature input elements */
.feature-input-wrap{
  display:flex;
  gap:12px;
  margin-top:20px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
.feature-input{
  flex:1;
  padding:14px 18px;
  font-size:16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:var(--radius-btn);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.feature-input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(166,147,239,.15);
}
.feature-input-wrap .btn{
  white-space:nowrap;
  padding:14px 24px;
}

/* Home #check: Check always below the field (block layout — avoids mobile flex row bugs) */
#check .check-feature-stack{
  display:block;
  max-width:520px;
  width:100%;
  margin:20px auto 0;
  box-sizing:border-box;
}
#check .check-feature-stack .feature-input{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0 0 10px;
}
#check .check-feature-stack .check-feature-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#check .check-feature-stack .check-feature-submit-btn,
#check .check-feature-stack .btn{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  margin:0;
}

/* Spaces section: Enter + Create */
.spaces-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-top:24px;
}
.spaces-actions .feature-input-wrap{
  margin-top:0;
  width:100%;
  max-width:420px;
}
.spaces-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.spaces-buttons .btn{
  padding:12px 20px;
}

/* Feature loading state */
.feature-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:16px;
  color:var(--gray);
  font-size:14px;
}
.feature-spinner{
  width:20px;
  height:20px;
  border:2px solid #eee;
  border-top-color:var(--purple);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Feature result */
.feature-result{
  margin-top:20px;
  padding:20px;
  background:#fff;
  border-radius:12px;
  border:1.5px solid #eee;
}
.feature-result-value{
  font-size:18px;
  font-weight:700;
  color:#333;
  margin-bottom:8px;
  word-break:break-all;
}
.feature-result-stats{
  font-size:15px;
  font-weight:600;
  color:var(--purple);
  margin-bottom:16px;
}
.feature-actions{
  display:flex;
  justify-content:center;
  gap:12px;
}

/* Trust/Warn buttons */
.btn-trust{
  background:var(--yellow);
  color:var(--yellow-btn-text);
  border-radius:var(--radius-btn);
  font-weight:600;
  transition:all .25s ease;
}
.btn-trust:hover{
  background:var(--green);
  color:#fff;
  transform:translateY(-1px);
}
.btn-trust:disabled{opacity:.6;cursor:not-allowed}

.btn-warn{
  background:var(--red);
  color:#fff;
}
.btn-warn:hover{background:#ff6b5a}
.btn-warn:disabled{opacity:.6;cursor:not-allowed}

/* Feature error */
.feature-error{
  margin-top:16px;
  padding:12px 16px;
  background:rgba(255,126,112,.1);
  color:var(--red);
  border-radius:10px;
  font-size:14px;
}
.feature-icon-large{
  width:80px;
  height:80px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 8px 24px rgba(166,147,239,.25);
}
.feature-icon-large i{
  font-size:2rem;
  color:#fff;
}
.feature-block h2{
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
}
.feature-block p{
  color:var(--gray);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:20px;
}

/* Unified Feature Block */
.feature-unified{
  background:#f8f8fa;
  border-radius:24px;
  padding:48px;
  border:1.5px solid rgba(0,0,0,.06);
}
.feature-unified .feature-desc{
  color:var(--gray);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:8px;
}
.feature-unified .check-desc{
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:24px !important;
}

/* Check Card - iPhone Style (legacy, kept for compatibility) */
.check-card{
  background:#f8f8fa;
  border-radius:20px;
  padding:32px;
  margin-top:32px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.check-card h3{
  font-size:1.2rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
}
.check-desc{
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:24px !important;
}
.check-input-wrap{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}
.check-input-wrap input{
  flex:1;
  padding:16px 20px;
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:14px;
  font-size:1rem;
  font-family:inherit;
  background:#fff;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.check-input-wrap input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(166,147,239,.1);
}
.check-input-wrap .btn{
  white-space:nowrap;
  padding:16px 24px;
}
.check-types{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.check-types span{
  font-size:.8rem;
  color:var(--gray);
  display:flex;
  align-items:center;
  gap:6px;
}
.check-types i{
  color:var(--purple);
  font-size:.9rem;
}

.check-result{
  background:#fff;
  border-radius:16px;
  padding:28px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  border:1.5px solid rgba(0,0,0,.06);
}
.check-result.hidden{display:none}
.result-header{
  margin-bottom:20px;
}
.result-type{
  display:inline-block;
  background:var(--purple);
  color:#fff;
  padding:6px 14px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  margin-right:10px;
}
.result-value{
  font-family:'SF Mono', monospace;
  font-size:.95rem;
  color:var(--text);
  word-break:break-all;
}
.result-score-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:48px;
  margin-bottom:20px;
}
.result-score{
  text-align:center;
}
.result-score .score-number{
  display:block;
  font-size:3.5rem;
  font-weight:700;
  color:var(--gray);
  letter-spacing:-0.02em;
}
.result-score .score-number.trusted{color:var(--green)}
.result-score .score-number.danger{color:var(--red)}
.result-score .score-number.positive{color:#8B7BD4}
.result-score .score-number.negative{color:#C9A000}
.result-score .score-number.unknown{color:var(--gray)}
.result-score .score-label{
  font-size:.85rem;
  color:var(--gray);
}
.result-votes{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.result-votes .vote{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.1rem;
  font-weight:500;
}
.result-votes .vote.up{color:var(--green)}
.result-votes .vote.down{color:var(--red)}
.result-status{
  padding:14px 24px;
  border-radius:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.result-status.trusted{background:rgba(166, 147, 239,.12);color:var(--green)}
.result-status.danger{background:rgba(255,126,112,.12);color:var(--red)}
.result-status.positive{background:rgba(166,147,239,.12);color:#8B7BD4}
.result-status.negative{background:rgba(230,126,34,.12);color:#C9A000}
.result-status.unknown{background:rgba(117,117,117,.08);color:var(--gray)}
.result-note{
  font-size:.85rem;
  color:var(--gray);
  margin:0;
}
.result-note i{color:var(--blue)}

.check-error{
  background:rgba(255,126,112,.08);
  color:var(--red);
  padding:16px;
  border-radius:12px;
  text-align:center;
}
.check-error.hidden{display:none}

/* Check Loading (matches popup) */
.check-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  font-size:14px;
  color:var(--gray);
}
.check-loading.visible{display:flex}
.check-spinner{
  width:24px;
  height:24px;
  border:3px solid #eee;
  border-top-color:var(--purple);
  border-radius:50%;
  animation:grigsi-spin 0.8s linear infinite;
}
@keyframes grigsi-spin{to{transform:rotate(360deg)}}

/* Check Result (matches popup style) */
.check-result{
  margin-top:20px;
  padding:24px;
  background:#fff;
  border-radius:16px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  border:1.5px solid rgba(0,0,0,.06);
}
.check-result.hidden{display:none}
.check-result-value{
  font-size:18px;
  font-weight:600;
  word-break:break-word;
  color:var(--text);
  margin-bottom:8px;
}
.trust-stats{
  font-size:16px;
  font-weight:600;
  margin:12px 0 20px 0;
  color:var(--text);
}
.check-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:16px;
}
.btn-vote{
  flex:1;
  max-width:160px;
  padding:14px 20px;
  font-size:16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  transition:transform 0.15s ease,opacity 0.2s ease;
}
.btn-vote:hover{transform:scale(1.03);opacity:0.95}
.btn-vote:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-trust{background:var(--yellow);color:var(--yellow-btn-text)}
.btn-trust:hover{background:var(--green);color:#fff}
.btn-warn{background:var(--red)}

/* ========== Popup-style sections (identical to extension popup) ========== */
.popup-section{
  margin:0 auto 12px auto;
  max-width:360px;
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fafafa;
  text-align:center;
}
.popup-section-title{
  font-size:12px;
  color:#666;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:8px;
}
.current-domain{
  font-size:22px;
  font-weight:700;
  word-break:break-word;
  margin:4px 0;
  transition:color 0.2s ease;
}
.current-domain.domain-trust{color:var(--green)}
.current-domain.domain-warn{color:var(--yellow)}
.current-domain.domain-not-trusted{color:var(--red)}
.trust-percent-rating{
  font-size:14px;
  font-weight:600;
  margin:4px 0 2px 0;
  color:#333;
}
.trust-status-line{
  font-size:14px;
  margin:4px 0 8px 0;
  color:#333;
}
.popup-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
.popup-btn{
  flex:1;
  max-width:140px;
  padding:10px 14px;
  font-size:15px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:transform 0.15s ease,opacity 0.2s ease;
}
.popup-btn:hover{transform:scale(1.03);opacity:0.95}
.popup-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.popup-btn-trust{background:var(--green)}
.popup-btn-warn{background:var(--red)}

/* Check input wrap (popup style) */
.popup-check-input-wrap{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.popup-check-input-wrap input{
  flex:1;
  padding:8px 10px;
  font-size:14px;
  border:1px solid #ccc;
  border-radius:8px;
}
.popup-check-input-wrap input:focus{
  outline:none;
  border-color:var(--purple);
}
.popup-check-btn{
  padding:8px 16px;
  font-size:14px;
  border-radius:8px;
  background:var(--purple);
  color:#fff;
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.popup-check-btn:hover{opacity:0.9}
.popup-check-btn:disabled{opacity:0.6;cursor:wait}

/* Check loading (popup style) */
.popup-check-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  font-size:13px;
  color:#666;
}
.popup-check-loading.visible{display:flex}
.popup-check-spinner{
  width:20px;
  height:20px;
  border:2px solid #eee;
  border-top-color:var(--purple);
  border-radius:50%;
  animation:popup-spin 0.8s linear infinite;
}
@keyframes popup-spin{to{transform:rotate(360deg)}}

/* Check result (popup style) */
.popup-check-result{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee;
  text-align:center;
}
.popup-check-result.visible{display:block}
.popup-check-result-value{
  font-size:15px;
  font-weight:600;
  word-break:break-word;
  color:#333;
  margin-bottom:4px;
}
.popup-check-result .trust-percent-rating{margin:6px 0 10px 0}
.popup-check-result-actions{margin-top:8px}

/* Check error (popup style) */
.popup-check-error{
  background:rgba(255,126,112,.1);
  color:var(--red);
  padding:10px;
  border-radius:8px;
  font-size:13px;
  margin-top:8px;
}
.popup-check-error.hidden{display:none}

/* Poll result */
.popup-poll-result{
  margin-top:12px;
  padding:12px;
  background:#f8f8fa;
  border-radius:8px;
  border:1px solid #eee;
}

/* Extension Card */
.extension-card{
  background:#f8f8fa;
  border-radius:24px;
  padding:48px;
  border:1.5px solid rgba(0,0,0,.06);
  max-width:600px;
  margin:0 auto;
}

/* Report Block */
.report-block{
  text-align:center;
  padding-bottom:40px;
  border-bottom:1px solid rgba(0,0,0,.06);
  margin-bottom:40px;
}
.report-question{
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:20px;
  font-weight:500;
}

/* Extension Block */
.extension-block{
  text-align:center;
}
.extension-block h2{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
}
.extension-desc{
  font-size:1rem;
  color:var(--gray);
  margin-bottom:32px;
}
.extension-features{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  margin-bottom:32px;
}
.ext-feature{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gray);
  font-size:.9rem;
  font-weight:500;
}
.ext-feature i{
  font-size:.85rem;
  color:var(--purple);
}

/* About Block */
.about-block{
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.about-block h2{
  font-size:1.8rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:24px;
}
.about-lead{
  font-size:1.1rem;
  color:var(--text);
  margin-bottom:20px !important;
}
.about-block p{
  color:var(--gray);
  line-height:1.8;
  margin-bottom:16px;
}

/* About Card - styled section */
.about-card{
  max-width:600px;
  margin:0 auto;
  text-align:center;
  background:#f8f8fa;
  border-radius:24px;
  padding:48px;
  border:1.5px solid rgba(0,0,0,.06);
}
.about-card h2{
  font-size:1.6rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:24px;
}
.about-card .about-lead{
  font-size:1.05rem;
  color:var(--text);
  margin-bottom:16px;
}
.about-card p{
  color:var(--gray);
  line-height:1.7;
  margin-bottom:14px;
}
.about-highlight{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1.5px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:20px 24px;
  margin:28px 0;
  text-align:left;
}
.about-highlight i{
  font-size:1.4rem;
  color:var(--purple);
  margin-top:2px;
}
.about-highlight strong{
  display:block;
  color:var(--text);
  font-size:1rem;
  margin-bottom:6px;
}
.about-highlight p{
  color:var(--gray);
  font-size:.9rem;
  margin:0;
  line-height:1.6;
}

/* Contact Block */
.contact-block{
  max-width:400px;
  margin:0 auto;
  text-align:center;
}
.contact-block h2{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:28px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:16px 20px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:14px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  transition:all .2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.5);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.15);
}
.contact-form .contact-message-hint{
  margin:-4px 0 12px;
  font-size:.88rem;
  line-height:1.45;
  color:rgba(255,255,255,.55);
}
.contact-form .btn{
  margin-top:8px;
}
.contact-form-status{
  margin:12px 0 0;
  padding:10px 14px;
  border-radius:10px;
  font-size:.95rem;
  line-height:1.4;
}
.contact-form-status--ok{
  background:rgba(46,204,113,.2);
  border:1px solid rgba(46,204,113,.45);
  color:#b8f5c8;
}
.contact-form-status--err{
  background:rgba(231,76,60,.2);
  border:1px solid rgba(231,76,60,.4);
  color:#ffb3a8;
}
.feedback-form .contact-form-status{
  margin-top:12px;
}
.contact-direct{
  margin-top:24px;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
}
.contact-direct a{
  color:var(--yellow);
  font-weight:600;
}

/* Contact select dropdown */
.contact-select{
  width:100%;
  padding:16px 20px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:14px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.contact-select:focus{
  outline:none;
  border-color:rgba(255,255,255,.4);
  background-color:rgba(255,255,255,.15);
}
.contact-select option{
  background:#1a1a2e;
  color:#fff;
}

/* Contact divider */
.contact-divider{
  display:flex;
  align-items:center;
  margin:28px 0;
}
.contact-divider::before,
.contact-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,.2);
}
.contact-divider span{
  padding:0 16px;
  color:rgba(255,255,255,.5);
  font-size:.9rem;
}

/* Contact meeting option */
.contact-meeting-option{
  text-align:left;
  padding:16px;
  background:rgba(255,255,255,.05);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
}

.meeting-checkbox{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  color:rgba(255,255,255,.9);
  font-size:.95rem;
}
.meeting-checkbox input[type="checkbox"]{
  display:none;
}
.meeting-checkbox .checkmark{
  width:22px;
  height:22px;
  border:2px solid rgba(255,255,255,.3);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .2s;
}
.meeting-checkbox input:checked + .checkmark{
  background:var(--green);
  border-color:var(--green);
}
.meeting-checkbox input:checked + .checkmark::after{
  content:'✓';
  color:#fff;
  font-size:14px;
  font-weight:bold;
}

.meeting-date-picker{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.meeting-date-picker label{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
  margin-bottom:8px;
}
.contact-input{
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
}
.contact-input:focus{
  outline:none;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.15);
}

/* Fix datetime-local color scheme for dark bg */
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  cursor:pointer;
}
}

/* Buttons - iPhone Style */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:14px;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  border:none;
  transition:all .2s ease;
}
.btn-outline{
  background:transparent;
  color:var(--purple);
  border:1.5px solid var(--purple);
}
.btn-outline:hover{
  background:var(--purple);
  color:#fff;
}
.btn-light{
  background:#fff;
  color:var(--green);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.btn-light:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,.14);
}

/* Footer Simple */
.footer-tagline{
  color:var(--green);
  font-size:.95rem;
  margin-top:4px;
}

/* ========================================
   COMMUNITY GUARD THEME
   ======================================== */

/* Hero Trust Theme */
.hero-trust{
  background:linear-gradient(135deg, var(--trust-dark) 0%, var(--trust-blue) 100%);
  color:#fff;
  padding:120px 24px 80px;
  position:relative;
  overflow:hidden;
}
.hero-trust::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,215,0,0.1)"/></svg>');
  background-size:60px 60px;
  opacity:.5;
}
.hero-trust .container{position:relative;z-index:1}

.trust-shield-visual{margin-bottom:24px}
.shield-icon{
  position:relative;
  display:inline-block;
  font-size:80px;
  color:var(--shield-gold);
  animation:pulse-glow 2s infinite;
}
.shield-check{
  position:absolute;
  bottom:8px;
  right:-8px;
  background:var(--safe-purple);
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 2px 8px rgba(166,147,239,.4);
}

@keyframes pulse-glow{
  0%,100%{filter:drop-shadow(0 0 20px rgba(255,215,0,.3))}
  50%{filter:drop-shadow(0 0 40px rgba(255,215,0,.6))}
}

.hero-tagline{
  font-size:1.4rem;
  font-weight:600;
  color:var(--shield-gold);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.hero-trust-stats{
  display:flex;
  justify-content:center;
  gap:48px;
  margin:32px 0;
  flex-wrap:wrap;
}
.trust-stat{
  text-align:center;
}
.trust-stat .stat-number{
  display:block;
  font-size:2rem;
  font-weight:800;
  color:var(--shield-gold);
}
.trust-stat .stat-label{
  font-size:.85rem;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Section Header */
.section-header{
  margin-bottom:48px;
}
.section-badge{
  display:inline-block;
  padding:8px 16px;
  background:rgba(166,147,239,.15);
  color:var(--purple);
  border-radius:20px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:16px;
}
.section-badge.guard{
  background:rgba(255,215,0,.15);
  color:var(--shield-gold);
}
.section-badge.space{
  background:rgba(166,147,239,.15);
  color:var(--safe-purple);
}

/* Trust Score Section */
.section-trust-dark{
  background:linear-gradient(135deg, var(--trust-dark) 0%, var(--trust-blue) 100%);
  color:#fff;
}

.trust-score-demo{
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:48px;
}

.score-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:24px;
  width:200px;
  text-align:center;
  transition:all .3s;
}
.score-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.12);
}
.score-card.trusted{border-color:var(--safe-purple)}
.score-card.suspicious{border-color:var(--danger-red)}
.score-card.unknown{border-color:var(--warning-orange)}

.score-domain{
  font-size:.9rem;
  font-family:monospace;
  color:rgba(255,255,255,.8);
  margin-bottom:16px;
  padding:8px;
  background:rgba(0,0,0,.2);
  border-radius:6px;
}

.score-ring{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 16px;
}
.score-ring svg{
  transform:rotate(-90deg);
  width:100%;
  height:100%;
}
.score-bg{
  fill:none;
  stroke:rgba(255,255,255,.1);
  stroke-width:8;
}
.score-fill{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:283;
  transition:stroke-dashoffset .6s;
}
.score-card.trusted .score-fill{stroke:var(--safe-purple)}
.score-card.suspicious .score-fill{stroke:var(--danger-red)}
.score-card.unknown .score-fill{stroke:var(--warning-orange)}

.score-number{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:1.6rem;
  font-weight:800;
}
.score-card.trusted .score-number{color:var(--safe-purple)}
.score-card.suspicious .score-number{color:var(--danger-red)}
.score-card.unknown .score-number{color:var(--warning-orange)}

.score-label{
  font-size:.85rem;
  font-weight:600;
  padding:6px 12px;
  border-radius:20px;
  margin-bottom:12px;
  display:inline-block;
}
.score-label.trusted{background:rgba(166,147,239,.2);color:var(--safe-purple)}
.score-label.danger{background:rgba(239,68,68,.2);color:var(--danger-red)}
.score-label.unknown{background:rgba(245,158,11,.2);color:var(--warning-orange)}

.score-votes{
  display:flex;
  justify-content:center;
  gap:16px;
  font-size:.8rem;
  color:rgba(255,255,255,.6);
}
.vote-up i{color:var(--safe-purple)}
.vote-down i{color:var(--danger-red)}

.btn-vote{
  margin-top:12px;
  padding:8px 16px;
  background:var(--shield-gold);
  color:var(--trust-dark);
  border:none;
  border-radius:8px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.btn-vote:hover{background:#fff;transform:scale(1.05)}

/* Trust Principles */
.trust-principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.principle{
  text-align:center;
  padding:24px;
}
.principle-icon{
  width:60px;
  height:60px;
  background:rgba(255,215,0,.15);
  color:var(--shield-gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin:0 auto 16px;
}
.principle h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.principle p{
  font-size:.9rem;
  color:rgba(255,255,255,.7);
}

/* Community Guard Demo */
.guard-demo{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  align-items:start;
}

.guard-browser{
  background:var(--trust-dark);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.2);
}
.browser-top{
  background:#1e2a3a;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.browser-dots{
  display:flex;
  gap:6px;
}
.browser-dots span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#3a4a5a;
}
.browser-dots span:first-child{background:#FF5F56}
.browser-dots span:nth-child(2){background:#FFBD2E}
.browser-dots span:nth-child(3){background:#27C93F}
.browser-url{
  flex:1;
  background:rgba(0,0,0,.3);
  padding:8px 12px;
  border-radius:6px;
  font-size:.85rem;
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  gap:8px;
}
.browser-url i{color:var(--danger-red)}
.guard-indicator{
  margin-left:auto;
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
.guard-indicator.danger{
  background:var(--danger-red);
  color:#fff;
  animation:alert-pulse 1s infinite;
}

@keyframes alert-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}
}

.browser-body{
  padding:24px;
  min-height:320px;
}

.guard-alert{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.alert-header{
  background:linear-gradient(135deg, var(--trust-blue) 0%, var(--trust-dark) 100%);
  color:#fff;
  padding:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}
.alert-header i{color:var(--shield-gold)}
.alert-content{
  padding:24px;
  text-align:center;
}
.alert-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin:0 auto 16px;
}
.alert-icon.danger{
  background:rgba(239,68,68,.15);
  color:var(--danger-red);
}
.alert-content h3{
  color:var(--danger-red);
  margin-bottom:8px;
}
.alert-domain{
  font-family:monospace;
  font-size:.9rem;
  color:var(--gray);
  padding:8px 16px;
  background:#f5f5f5;
  border-radius:6px;
  display:inline-block;
  margin-bottom:16px;
}
.alert-details{
  text-align:left;
  background:#f9f9f9;
  padding:16px;
  border-radius:8px;
  margin-bottom:16px;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid #eee;
  font-size:.85rem;
}
.detail-row:last-child{border-bottom:none}
.detail-label{color:var(--gray)}
.detail-value.danger{color:var(--danger-red);font-weight:600}
.detail-value.safe{color:var(--safe-purple)}

.alert-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}
.btn-safe{
  padding:10px 20px;
  background:var(--safe-purple);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.btn-safe:hover{background:#0f9d58;transform:translateY(-2px)}
.btn-risk{
  padding:10px 16px;
  background:transparent;
  color:var(--gray);
  border:1px solid #ddd;
  border-radius:8px;
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s;
}
.btn-risk:hover{border-color:var(--danger-red);color:var(--danger-red)}

/* Guard Features */
.guard-features h3{
  font-size:1.3rem;
  margin-bottom:24px;
  color:var(--trust-dark);
}
.guard-feature-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.guard-feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
  text-align:left;
}
.guard-feature i{
  width:40px;
  height:40px;
  background:var(--shield-gold);
  color:var(--trust-dark);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.guard-feature h4{
  font-size:1rem;
  margin-bottom:4px;
}
.guard-feature p{
  font-size:.85rem;
  color:var(--gray);
}

.guard-downloads{
  margin-top:32px;
}
.downloads-label{
  font-size:.85rem;
  color:var(--gray);
  margin-bottom:12px;
}

/* Trust Flow */
.section-gradient{
  background:linear-gradient(135deg, var(--shield-gold) 0%, #FFB700 100%);
  color:var(--trust-dark);
}
.section-gradient .section-title{
  color:var(--trust-dark);
}

.trust-flow{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.flow-step{
  flex:1;
  min-width:180px;
  max-width:220px;
  text-align:center;
  position:relative;
}
.flow-icon{
  width:80px;
  height:80px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  position:relative;
  z-index:1;
}
.flow-number{
  position:absolute;
  top:-8px;
  right:-8px;
  width:32px;
  height:32px;
  background:var(--trust-dark);
  color:var(--shield-gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.9rem;
}
.flow-step h3{
  font-size:1rem;
  margin-bottom:8px;
}
.flow-step p{
  font-size:.85rem;
  opacity:.8;
}
.flow-arrow{
  color:var(--trust-dark);
  font-size:24px;
  opacity:.5;
  padding-top:24px;
}

/* Protected Spaces */
.spaces-showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.space-preview{
  perspective:1000px;
}
.space-window{
  background:var(--trust-dark);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.15);
  transform:rotateY(-5deg);
  transition:transform .3s;
}
.space-window:hover{transform:rotateY(0)}
.space-header-bar{
  background:rgba(255,255,255,.1);
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.space-code{
  font-family:monospace;
  font-size:.85rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
.space-code i{color:var(--shield-gold)}
.space-trust-badge{
  font-size:.75rem;
  background:rgba(166,147,239,.2);
  color:var(--safe-purple);
  padding:4px 10px;
  border-radius:12px;
}
.space-window .space-tabs-bar{
  display:flex;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.space-window .space-tabs-bar span{
  flex:1;
  padding:12px;
  text-align:center;
  color:rgba(255,255,255,.5);
  transition:all .2s;
  cursor:pointer;
}
.space-window .space-tabs-bar span.active{
  color:#fff;
  background:rgba(255,255,255,.1);
}
.space-chat-preview{
  padding:16px;
}
.space-chat-preview .msg{
  padding:8px 12px;
  border-radius:12px;
  margin-bottom:8px;
  font-size:.85rem;
  max-width:80%;
}
.space-chat-preview .msg.in{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.space-chat-preview .msg.out{
  background:var(--purple);
  color:#fff;
  margin-left:auto;
}
.space-chat-preview .msg.system{
  background:rgba(166,147,239,.2);
  color:var(--safe-purple);
  text-align:center;
  margin:0 auto;
  font-size:.75rem;
}

.spaces-features{
  text-align:left;
}
.space-feature-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:20px;
}
.feature-shield{
  width:44px;
  height:44px;
  background:linear-gradient(135deg, var(--trust-blue) 0%, var(--trust-dark) 100%);
  color:var(--shield-gold);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.space-feature-item h4{
  font-size:1rem;
  margin-bottom:4px;
}
.space-feature-item p{
  font-size:.85rem;
  color:var(--gray);
}

/* Space Types Compact */
.space-types-compact{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:48px;
  flex-wrap:wrap;
}
.type-compact{
  background:rgba(166,147,239,.05);
  border:2px solid rgba(166,147,239,.15);
  border-radius:16px;
  padding:24px;
  width:200px;
  text-align:center;
  transition:all .3s;
}
.type-compact:hover{
  border-color:var(--purple);
  transform:translateY(-4px);
}
.type-compact.featured{
  border-color:var(--shield-gold);
  background:linear-gradient(135deg, rgba(255,215,0,.05) 0%, rgba(255,215,0,.02) 100%);
}
.type-compact i{
  font-size:32px;
  color:var(--purple);
  margin-bottom:12px;
}
.type-compact.featured i{color:var(--shield-gold)}
.type-compact h4{
  font-size:1rem;
  margin-bottom:6px;
}
.type-compact p{
  font-size:.8rem;
  color:var(--gray);
  margin-bottom:8px;
}
.type-compact .price{
  font-size:.75rem;
  font-weight:600;
  color:var(--safe-purple);
}

/* Social Proof */
.social-proof-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:48px;
}
.proof-card{
  background:rgba(255,255,255,.08);
  border-radius:16px;
  padding:24px;
  text-align:center;
}
.proof-icon{
  font-size:32px;
  color:var(--shield-gold);
  margin-bottom:12px;
}
.proof-stat{
  font-size:2rem;
  font-weight:800;
  color:#fff;
  margin-bottom:4px;
}
.proof-label{
  font-size:.85rem;
  color:rgba(255,255,255,.6);
}

.testimonials{
  display:flex;
  gap:32px;
  justify-content:center;
  flex-wrap:wrap;
}
.testimonial{
  flex:1;
  min-width:280px;
  max-width:400px;
  background:rgba(255,255,255,.05);
  border-left:4px solid var(--shield-gold);
  padding:24px;
  border-radius:0 12px 12px 0;
}
.testimonial p{
  font-style:italic;
  color:rgba(255,255,255,.9);
  margin-bottom:12px;
}
.testimonial .author{
  font-size:.85rem;
  color:var(--shield-gold);
}

/* Vision Section */
.vision-content{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  text-align:left;
}
.vision-text .lead-text{
  font-size:1.4rem;
  color:var(--trust-dark);
  margin-bottom:20px;
}
.vision-text p{
  margin-bottom:16px;
  color:var(--gray);
}
.vision-cta{
  margin-top:24px;
}

.vision-values{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.value-card{
  background:linear-gradient(135deg, rgba(15,22,40,.05) 0%, rgba(30,58,95,.05) 100%);
  border-left:4px solid var(--shield-gold);
  padding:20px;
  border-radius:0 12px 12px 0;
}
.value-card i{
  font-size:24px;
  color:var(--shield-gold);
  margin-bottom:8px;
}
.value-card h4{
  font-size:1rem;
  color:var(--trust-dark);
  margin-bottom:4px;
}
.value-card p{
  font-size:.85rem;
  color:var(--gray);
}

/* Contact Badge */
.contact-badge{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
  padding:12px 20px;
  background:rgba(255,215,0,.15);
  border-radius:8px;
  color:var(--shield-gold);
  font-weight:600;
}

/* Footer Trust Theme */
.footer-trust{
  background:linear-gradient(135deg, var(--trust-dark) 0%, var(--trust-blue) 100%);
  color:#fff;
  padding:48px 24px;
}
.footer-trust .footer-logo{
  font-size:1.8rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:8px;
}
.footer-trust .footer-logo i{color:var(--shield-gold)}
.footer-tagline{
  font-size:.9rem;
  color:var(--shield-gold);
  margin-top:8px;
}
.footer-trust .footer-links{
  margin:24px 0;
}
.footer-trust .footer-links a{
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .2s;
}
.footer-trust .footer-links a:hover{color:var(--shield-gold)}
.footer-trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background:rgba(255,215,0,.15);
  border-radius:20px;
  font-size:.85rem;
  color:var(--shield-gold);
  margin-bottom:24px;
}
.footer-trust .footer-copy{
  color:rgba(255,255,255,.5);
  font-size:.85rem;
}

/* ========================================
   END COMMUNITY GUARD THEME
   ======================================== */

/* Feature Highlight — Trust Check: more space so badge/icon don't overlap */
.feature-highlight{
  background:linear-gradient(135deg, rgba(166,147,239,0.05) 0%, rgba(108,99,255,0.1) 100%);
  border:2px solid var(--purple) !important;
  position:relative;
  padding:32px 28px 28px !important;
  padding-top:48px !important;
  margin-top:8px;
}
.feature-highlight .feature-icon-large{
  margin-top:8px;
}
.feature-highlight::before{
  content:'NEW';
  position:absolute;
  top:24px;
  right:24px;
  background:var(--purple);
  color:#fff;
  padding:6px 14px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
}

/* responsive */
@media(max-width:1024px){
  .space-demo{grid-template-columns:1fr}
  .space-types-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr}
  .org-features{grid-template-columns:repeat(2, 1fr)}
  .contact-grid{grid-template-columns:1fr}
  .guard-demo{grid-template-columns:1fr}
  .spaces-showcase{grid-template-columns:1fr}
  .vision-content{grid-template-columns:1fr}
  .trust-principles{grid-template-columns:1fr 1fr}
  .social-proof-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  /* Keep legacy layout tweaks, but let tokens handle the spacing */
  section{padding:var(--section-pad-y) var(--page-gutter)}
  header:not(.grigsi-top-bar):not(.hv1-header):not(.gv-header):not(.rd-admin-header):not(.rd-display-header):not(.rd-work-header):not(.vmcr-remote-top):not(.hx-hero):not(.sim-header):not(.odh-hero):not(.ist-hero):not(.ist-watch-header):not(.hp-head):not(.space-header){padding:var(--header-pad-y) var(--page-gutter);margin-top:56px}
  header h1{font-size:2.2rem}
  .hero{padding:var(--hero-pad-y-top) var(--page-gutter) var(--hero-pad-y-bottom)}
  .hero.hero-compact{padding:20px var(--page-gutter) 24px}
  .hero-title,.hero-title-inline,.hero-title-single{font-size:2.2rem}
  .container-same-width,.content-narrow{padding-left:0;padding-right:0}
  .section-inner-grid,.front-sections-grid{padding-left:0;padding-right:0}
  .feature-block.feature-bordered{padding:16px}
  .plans-grid{gap:16px;margin-bottom:32px}
  .plan-card{padding:16px}
  .btn-group{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .btn-group .btn-outline{margin-left:0}
  .hub-cta-row{margin-top:14px}
  .hub-cta-row.hub-cta-row-spaced{margin-top:24px}
  #check.check-section{padding-top:24px;padding-bottom:40px}
  #check .check-container{max-width:100%}
  #about.about-full{padding:40px 16px 48px}
  #about.about-full h2{font-size:1.4rem}
  .why-grid{grid-template-columns:1fr}
  .spaces-simple{gap:32px}
  .check-input-wrap{flex-direction:column}
  .check-types{gap:12px}
  .result-score-wrap{flex-direction:column;gap:20px}
  .extension-features{grid-template-columns:1fr;gap:12px}
  .hero-title,.hero-title-inline,.hero-title-single{font-size:2.2rem}
  .hero-subtitle{font-size:1rem}
  .feature-block{margin-bottom:48px}
  .check-card{padding:24px}
  .ext-feature{padding:14px 16px}
  .hero-subtitle{font-size:1.1rem}
  .hero-features{gap:20px}
  .hero-feature{flex-direction:column;text-align:center;gap:6px}
  .hero-logo{width:80px}
  .section h2, .product-section h2{font-size:1.5rem}
  .section-title{font-size:1.6rem}
  .nav-links{gap:4px;padding:2px 0}
  .nav-cta{padding:3px 6px;font-size:0.65rem}
  .front-sections-grid{padding:20px 16px}
  .front-section-card .container{padding:24px 16px}
  .section-about-standalone{padding:32px 16px}
  .section-about-standalone .about-card{padding:24px 16px}
  .about-features-subsection{padding:24px 16px}
  .feature-highlight{padding:28px 20px 24px !important;padding-top:44px !important}
  .feature-highlight::before{top:20px;right:20px}
  .lc-item{max-width:none;flex:1 1 140px}
  .feature-item{flex:1 1 100%}
  .service-card{flex:1 1 100%;max-width:none}
  .browser-downloads{justify-content:center}
  .about-container{flex-direction:column}
  .intro h1{font-size:2.2rem}
  .cards{flex-direction:column}
  .contact-box{padding:28px 24px;margin:0 16px}
  .footer-links{flex-direction:column;gap:12px}
  .back-to-top{bottom:16px;right:16px;width:42px;height:42px}
  .space-types-grid{grid-template-columns:1fr}
  .space-type-card.featured{transform:none}
  .space-type-card.featured:hover{transform:translateY(-4px)}
  .org-features{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .space-demo .space-tabs,
  .space-window .space-tabs{flex-wrap:wrap}
  .space-demo .space-tabs .tab,
  .space-window .space-tabs .tab{padding:10px 14px;font-size:.8rem}
  .trust-info{order:-1}
  .trust-principles{grid-template-columns:1fr}
  .trust-flow{flex-direction:column;align-items:center}
  .flow-arrow{transform:rotate(90deg);padding:8px 0}
  .flow-step{max-width:280px}
  .social-proof-grid{grid-template-columns:1fr 1fr}
  .space-window{transform:none}
  .hero-trust-stats{gap:24px}
  .trust-stat .stat-number{font-size:1.6rem}
  .alert-actions{flex-direction:column}
}

/* ========== iOS theme (body.ios-theme) – site-wide ========== */
body.ios-theme{
  --ios-orange:#FFC64B;
  --ios-indigo:#3D2860;
  --ios-blue:#007AFF;
  --ios-gray:#8E8E93;
  --ios-bg-light:#F2F2F7;
  --ios-bg-dark:#000000;
  --ios-card-light:#FFFFFF;
  --ios-card-dark:#1C1C1E;
  --ios-radius-btn:12px;
  --ios-radius-card:20px;
  --ios-shadow-subtle:0 4px 12px rgba(0,0,0,.08);
  --ios-shadow-floating:0 8px 24px rgba(0,0,0,.12);
  --ios-tight:-0.4px;
  /* Brand mapping for iOS theme: dark purple + yellow accents */
  --primary: var(--ios-indigo);
  --purple: var(--ios-indigo);
  --blue: var(--ios-indigo);
  background:var(--ios-bg-light)!important;
}

/* Make all page heroes match the landing bar */
body.ios-theme .hero{
  background:linear-gradient(180deg,var(--ios-indigo) 0%,#1E1435 100%)!important;
}
body.ios-theme .hero.hero-compact{
  border-radius:0 0 var(--ios-radius-card) var(--ios-radius-card);
  box-shadow:var(--ios-shadow-floating);
}
/* Subpages: hero follows sticky grigsi-top-bar in flow — remove legacy margin (was for old fixed nav) */
body.ios-theme .grigsi-top-bar ~ header.hero{
  margin-top:0!important;
}
/* Top bar: matte glass — uses --nav-* (light on :root, dark on cosmic body.ios-theme) */
body.ios-theme .grigsi-top-bar{
  background:var(--nav-matte-bg)!important;
  border-bottom:1px solid var(--nav-matte-border)!important;
  backdrop-filter:var(--nav-matte-backdrop)!important;
  -webkit-backdrop-filter:var(--nav-matte-backdrop)!important;
  box-shadow:var(--nav-matte-shadow)!important;
}
body.ios-theme .grigsi-top-bar .logo{color:var(--ios-orange,#FFC64B)!important}
body.ios-theme .grigsi-top-bar .btn-nav,
body.ios-theme .grigsi-top-bar summary.btn-nav.nav-more-summary{
  background:var(--nav-chrome-pill)!important;
  color:var(--nav-chrome-pill-text)!important;
  border:1px solid var(--nav-chrome-pill-border)!important;
  border-radius:var(--ios-radius-btn);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
body.ios-theme .grigsi-top-bar .btn-nav:hover,
body.ios-theme .grigsi-top-bar .btn-nav:active,
body.ios-theme .grigsi-top-bar .btn-nav:focus,
body.ios-theme .grigsi-top-bar summary.btn-nav.nav-more-summary:hover{
  background:var(--nav-chrome-pill-hover)!important;
  color:var(--nav-chrome-hover-text)!important;
  border-color:rgba(166,147,239,.45)!important;
}
body.ios-theme .grigsi-top-bar .btn-nav.btn-nav-yellow{
  background:var(--nav-chrome-pill)!important;
  color:var(--nav-chrome-pill-text)!important;
  border-color:var(--nav-chrome-pill-border)!important;
}
body.ios-theme .grigsi-top-bar a.btn-nav.btn-nav-instant,
body.ios-theme .grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]{
  background:#FFC64B!important;
  color:#3D2860!important;
  -webkit-text-fill-color:#3D2860!important;
  border-color:rgba(61,40,96,.45)!important;
  font-weight:800!important;
}
body.ios-theme .grigsi-top-bar a.btn-nav.btn-nav-instant:hover,
body.ios-theme .grigsi-top-bar a.btn-nav.btn-nav-instant:active,
body.ios-theme .grigsi-top-bar a.btn-nav.btn-nav-instant:focus,
body.ios-theme .grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]:hover,
body.ios-theme .grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]:active,
body.ios-theme .grigsi-top-bar .nav-buttons a.btn-nav-instant[href="/connect/"]:focus{
  background:#FFD966!important;
  color:#2a1d45!important;
  -webkit-text-fill-color:#2a1d45!important;
  opacity:1!important;
}
body.ios-theme .grigsi-top-bar .btn-nav.btn-nav-yellow:hover{opacity:1}
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow{
  background:var(--nav-chrome-pill)!important;
  color:var(--nav-chrome-pill-text)!important;
  border-color:var(--nav-chrome-pill-border)!important;
}
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow:hover,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow:hover,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow:hover,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow:active,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow:active,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow:active,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/check-index.html"].btn-nav-yellow:focus,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/#about"].btn-nav-yellow:focus,
body.ios-theme .grigsi-top-bar .nav-buttons a[href="#about"].btn-nav-yellow:focus{
  background:var(--nav-chrome-pill-hover)!important;
  color:var(--nav-chrome-hover-text)!important;
  border-color:rgba(166,147,239,.45)!important;
  opacity:1;
}
body.ios-theme .grigsi-top-bar .coming-label{color:rgba(255,255,255,.68)!important}
body.ios-theme .grigsi-top-bar .nav-dropdown[open] summary.btn-nav.nav-more-summary{
  outline:2px solid rgba(166,147,239,.5)!important;
  outline-offset:1px;
}
body.ios-theme .purple-bar{
  background:linear-gradient(180deg,var(--ios-indigo) 0%,#1E1435 100%)!important;
  border-radius:0 0 var(--ios-radius-card) var(--ios-radius-card);
  box-shadow:var(--ios-shadow-floating);
}
body.ios-theme .purple-bar .purple-bar-hero{font-size:34px!important;line-height:41px!important;font-weight:700!important;letter-spacing:var(--ios-tight)}
body.ios-theme .purple-bar .purple-bar-body{font-size:17px!important;line-height:22px!important;font-weight:400!important}
body.ios-theme .purple-bar .purple-bar-bridge{font-size:12px!important;line-height:16px!important;font-weight:600!important;letter-spacing:0.02em;opacity:0.82}
body.ios-theme .four-cols .col,
body.ios-theme .three-cols .col{
  background:var(--ios-card-light)!important;
  border-radius:var(--ios-radius-card)!important;
  box-shadow:var(--ios-shadow-subtle)!important;
  border:none!important;
  padding:24px!important;
}
body.ios-theme .four-cols .col h3,
body.ios-theme .three-cols .col h3{font-size:22px!important;font-weight:700!important;letter-spacing:var(--ios-tight)}
body.ios-theme .four-cols .col p,
body.ios-theme .three-cols .col p,
body.ios-theme .col-subtitle{font-size:17px!important;line-height:22px!important}
body.ios-theme .four-cols .col a,
body.ios-theme .three-cols .col a,
body.ios-theme .col-icon{color:var(--ios-blue)!important}
body.ios-theme .four-cols .col a:hover,
body.ios-theme .three-cols .col a:hover{color:var(--ios-orange)!important}
body.ios-theme #check .container{background:var(--ios-card-light);border-radius:var(--ios-radius-card);padding:28px;box-shadow:var(--ios-shadow-subtle)}
body.ios-theme #check h2{font-size:28px!important;font-weight:700!important;letter-spacing:var(--ios-tight)}
body.ios-theme .btn-primary,
body.ios-theme #check-btn{
  background:var(--yellow)!important;
  color:var(--yellow-btn-text)!important;
  border-radius:var(--ios-radius-btn)!important;
  box-shadow:var(--ios-shadow-subtle);
}
body.ios-theme .btn-primary:hover,
body.ios-theme #check-btn:hover{
  background:var(--ios-indigo)!important;
  color:#fff!important;
}
body.ios-theme #about.about-full{background:var(--ios-card-light)!important;border-radius:var(--ios-radius-card);margin-left:auto!important;margin-right:auto!important;padding:32px 24px!important;box-shadow:var(--ios-shadow-subtle);max-width:var(--content-width);width:100%;box-sizing:border-box}
body.ios-theme #about.about-full h2{font-size:28px!important;font-weight:700!important;letter-spacing:var(--ios-tight);color:var(--ios-orange)!important}
body.ios-theme #about.about-full p{color:#1c1c1e!important}
body.ios-theme .contact-block{background:var(--ios-card-light);border-radius:var(--ios-radius-card);padding:28px!important;box-shadow:var(--ios-shadow-floating)}
body.ios-theme .contact-block h2{font-size:28px!important;font-weight:700!important;letter-spacing:var(--ios-tight);color:#1c1c1e!important}
body.ios-theme .contact-form input[type="text"],
body.ios-theme .contact-form input[type="email"],
body.ios-theme .contact-form textarea,
body.ios-theme .contact-form select,
body.ios-theme .contact-form .contact-select{
  border-radius:var(--ios-radius-btn)!important;
  border:1px solid rgba(0,0,0,.1)!important;
  padding:12px 16px!important;
  font-size:17px!important;
  background:#fff!important;
  color:#1c1c1e!important;
}
body.ios-theme .contact-form input::placeholder,
body.ios-theme .contact-form textarea::placeholder{color:var(--ios-gray)!important}
body.ios-theme .contact-form .contact-select option{background:#fff!important;color:#1c1c1e!important}
body.ios-theme .contact-form input:focus,
body.ios-theme .contact-form textarea:focus,
body.ios-theme .contact-form select:focus{outline:none;border-color:var(--ios-blue)!important;box-shadow:0 0 0 3px rgba(0,122,255,.2)}
body.ios-theme .contact-meeting-option{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.08)!important}
body.ios-theme .meeting-checkbox{color:#1c1c1e!important}
body.ios-theme .meeting-date-picker label{color:#1c1c1e!important}
body.ios-theme .contact-input{background:#fff!important;color:#1c1c1e!important;border:1px solid rgba(0,0,0,.1)!important}
body.ios-theme .contact-input::placeholder{color:var(--ios-gray)!important}
body.ios-theme .contact-form .contact-message-hint{color:var(--ios-gray)!important}
body.ios-theme .contact-direct{color:#1c1c1e!important}
body.ios-theme .contact-divider span{color:var(--ios-gray)!important}
body.ios-theme .contact-divider::before,
body.ios-theme .contact-divider::after{background:rgba(0,0,0,.12)!important}
body.ios-theme #check-error{border-radius:var(--ios-radius-btn)!important;background:rgba(255,59,48,.12)!important;color:#c00!important}
body.ios-theme .store-modal > div{border-radius:var(--ios-radius-card)!important;box-shadow:var(--ios-shadow-floating)!important}
body.ios-theme .store-modal button{border-radius:var(--ios-radius-btn)!important}
body.ios-theme .section.section-light{background:var(--ios-bg-light)!important}
body.ios-theme .section.section-dark{background:var(--ios-bg-light)!important}
body.ios-theme .section.section-dark .container{max-width:560px}
body.ios-theme #check .check-feature-stack{
  display:block;
  max-width:520px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
body.ios-theme #check .check-feature-stack .feature-input{
  display:block;
  width:100%;
  margin:0 0 10px;
  padding:14px 18px;
  border-radius:var(--ios-radius-btn);
  border:1px solid rgba(0,0,0,.1);
  font-size:17px;
  background:var(--ios-card-light);
  min-width:0;
  box-sizing:border-box;
}
body.ios-theme #check .check-feature-stack .check-feature-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.ios-theme #check .check-feature-stack .check-feature-submit-btn,
body.ios-theme #check .check-feature-stack .btn{width:100%;box-sizing:border-box;display:block;margin:0}
body.ios-theme #check .feature-input:focus{outline:none;border-color:var(--ios-blue);box-shadow:0 0 0 3px rgba(0,122,255,.2)}
body.ios-theme #check-result-actions .btn{border-radius:var(--ios-radius-btn)!important;padding:12px 18px!important}
body.ios-theme .col-subtitle{color:var(--ios-gray)!important;font-size:12px!important;line-height:16px!important}
body.ios-theme .four-cols .col p,
body.ios-theme .three-cols .col p{color:#1c1c1e!important}
body.ios-theme #about.about-full p{font-size:17px!important;line-height:22px!important}
body.ios-theme footer{
  background:var(--ios-card-light)!important;
  border-radius:var(--ios-radius-card) var(--ios-radius-card) 0 0;
  margin-top:48px;
  padding:32px 24px!important;
  box-shadow:0 -4px 12px rgba(0,0,0,.06);
}
body.ios-theme footer .footer-logo{color:var(--ios-orange)!important;font-weight:700}
body.ios-theme footer .footer-tagline{color:var(--ios-gray)!important}
body.ios-theme footer .footer-links a{color:var(--ios-blue)!important}
body.ios-theme footer .footer-links a:hover{color:var(--ios-orange)!important}
body.ios-theme footer .footer-nav-row a{color:var(--ios-blue)!important}
body.ios-theme footer .footer-nav-row a:hover{color:var(--ios-orange)!important}
body.ios-theme .back-to-top{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--ios-card-light)!important;
  color:var(--ios-blue)!important;
  box-shadow:var(--ios-shadow-floating);
  display:flex;align-items:center;justify-content:center;
  border:none;
}
body.ios-theme .back-to-top:hover{background:var(--ios-orange)!important;color:var(--yellow-btn-text)!important}
body.ios-theme .main-nav{background:rgba(255,255,255,.72)!important;backdrop-filter:var(--nav-backdrop-blur);-webkit-backdrop-filter:var(--nav-backdrop-blur);border-bottom:1px solid rgba(0,0,0,.06)}
body.ios-theme .nav-logo{color:var(--ios-orange)!important}
body.ios-theme .nav-cta,.main-nav .btn{background:var(--ios-blue)!important;color:#fff!important;border-radius:var(--ios-radius-btn);box-shadow:var(--ios-shadow-subtle)}
body.ios-theme .nav-cta:hover,.main-nav .btn:hover{background:var(--ios-orange)!important;color:var(--yellow-btn-text)!important}
body.ios-theme a.btn-primary,.ios-theme .btn.btn-primary{background:var(--ios-orange)!important;color:var(--yellow-btn-text)!important;border-radius:var(--ios-radius-btn)!important;box-shadow:var(--ios-shadow-subtle)}
body.ios-theme .check-card,.ios-theme .feature-block,.ios-theme .card-style{background:var(--ios-card-light)!important;border-radius:var(--ios-radius-card)!important;box-shadow:var(--ios-shadow-subtle)!important;border:none!important}
@media(max-width:768px){
  body.ios-theme .purple-bar .purple-bar-hero{font-size:28px!important;line-height:34px!important}
}
@media(max-width:480px){
  section{padding:var(--section-pad-y) var(--page-gutter)}
  .hero.hero-compact{padding:16px var(--page-gutter) 20px}
  .hero-title,.hero-title-inline,.hero-title-single{font-size:1.85rem}
  .section-layer-title{font-size:1.35rem}
  .feature-block.feature-bordered{padding:14px}
  .plan-card{padding:14px}
  .btn-group{gap:8px}
  #check .check-subtitle{font-size:.85rem}
  #about.about-full{padding:32px 12px 40px}
  #about.about-full h2{font-size:1.25rem}
  body.ios-theme .purple-bar .purple-bar-hero{font-size:22px!important;line-height:28px!important}
}

/* Liquid Glass override (iOS 19 style) + dynamic accent colors */
:root{
  --liquid-accent-1: #FFC64B;
  --liquid-accent-2: #007AFF;
  --liquid-glass-bg: rgba(255,255,255,.08);
  --liquid-glass-border: rgba(255,255,255,.22);
  --liquid-text: rgba(255,255,255,.92);
}

@property --lg-h1 { syntax: '<number>'; inherits: true; initial-value: 48; }
@property --lg-h2 { syntax: '<number>'; inherits: true; initial-value: 220; }

body.ios-theme{
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 198, 75,.25) 0%, rgba(255, 198, 75,0) 46%),
    radial-gradient(circle at 86% 80%, rgba(0,122,255,.28) 0%, rgba(0,122,255,0) 52%),
    linear-gradient(180deg, #0b1020 0%, #05070d 100%) !important;
  color: var(--liquid-text) !important;
  --liquid-accent-1: hsl(var(--lg-h1) 98% 62%);
  --liquid-accent-2: hsl(var(--lg-h2) 95% 58%);
  /* Matte nav on dark pages (same language as Space glass) */
  --nav-matte-bg: rgba(12, 14, 24, 0.5);
  --nav-matte-border: rgba(255, 255, 255, 0.12);
  --nav-matte-shadow: 0 10px 40px rgba(0, 0, 0, 0.32);
  --nav-matte-backdrop: blur(18px) saturate(1.12);
  --nav-chrome-pill: rgba(255, 255, 255, 0.1);
  --nav-chrome-pill-border: rgba(255, 255, 255, 0.16);
  --nav-chrome-pill-text: rgba(255, 255, 255, 0.94);
  --nav-chrome-pill-hover: rgba(166, 147, 239, 0.38);
  --nav-chrome-hover-text: #fff;
  /* Subtle accent drift — shorter than 14s so fewer style recalcs per minute if browser ties repaints to custom props */
  animation: lg-accent-shift 18s ease-in-out infinite alternate;
}

@keyframes lg-accent-shift{
  0%   { --lg-h1: 28;  --lg-h2: 220; }
  45%  { --lg-h1: 35;  --lg-h2: 205; }
  100% { --lg-h1: 22;  --lg-h2: 235; }
}

/* Accent links only — never top-nav chips or home hub tiles (those set their own colours) */
body.ios-theme a:not(.btn-nav):not(.nav-more-link):not(.home-quick-card):not(.home-connect-panel__cta):not(.gi-soft-download-hero):not(.gf-soft-download-hero):not(.lf-soft-download-hero):not(.avp-soft-download-hero):not(.avp-soft-open-app):not(.ac-soft-download-hero):not(.ac-soft-open-app):not(.tx-btn--dl):not(.tx-soft-download-hero):not(.tx-soft-open-app){
  color:var(--liquid-accent-1)!important;
  -webkit-text-fill-color:var(--liquid-accent-1)!important;
}

/* Transcribe Mac/Windows download chips — keep white on dark glass */
body.ios-theme a.tx-btn--dl,
body.ios-theme a.tx-btn--dl:visited,
body.ios-theme a.tx-btn--dl:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.ios-theme a.tx-soft-download-hero,
body.ios-theme a.tx-soft-download-hero:visited,
body.ios-theme a.tx-soft-download-hero:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Home connect CTAs — white label on colored pills (excluded from accent link rule above) */
body.ios-theme a.home-connect-panel__cta,
body.ios-theme a.home-connect-panel__cta:visited,
body.ios-theme a.home-connect-panel__cta:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.ios-theme .home-connect-panel--sendi a.home-connect-panel__cta,
body.ios-theme .home-connect-panel--sendi a.home-connect-panel__cta:visited,
body.ios-theme .home-connect-panel--sendi a.home-connect-panel__cta:hover,
body.ios-theme .home-connect-panel--names a.home-connect-panel__cta--primary,
body.ios-theme .home-connect-panel--names a.home-connect-panel__cta--primary:visited,
body.ios-theme .home-connect-panel--names a.home-connect-panel__cta--primary:hover {
  color: #1a1528 !important;
  -webkit-text-fill-color: #1a1528 !important;
}

/* Edge help tab: light glass — beat body.ios-theme liquid-text on hub / LCI pages */
body.ios-theme .grigsi-help-wrap .grigsi-help-chip,
body.ios-theme .grigsi-help-wrap .grigsi-help-glyph,
body.ios-theme .grigsi-help-wrap .grigsi-help-label{
  color:#0a0a0f !important;
  -webkit-text-fill-color:#0a0a0f !important;
}
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-chip,
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-glyph,
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-label{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* “More” menu — matte glass, unified chips (must beat body.ios-theme link color) */
body.ios-theme .grigsi-top-bar .nav-more-panel{
  background:rgba(22,24,36,.9)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.42)!important;
  color:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(20px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.12)!important;
  max-height:min(70vh, calc(100dvh - 76px))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  padding:20px 14px 14px!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-indexes,
body.ios-theme .grigsi-top-bar .nav-more-group-product,
body.ios-theme .grigsi-top-bar .nav-more-group-build,
body.ios-theme .grigsi-top-bar .nav-more-group-community,
body.ios-theme .grigsi-top-bar .nav-more-group-about{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(166,147,239,.22)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group.nav-more-group-span{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.14)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-panel .nav-more-heading{
  color:rgba(255,255,255,.55)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-panel .nav-more-group-soon .nav-more-heading{
  color:rgba(255,255,255,.42)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-indexes .nav-more-link,
body.ios-theme .grigsi-top-bar .nav-more-group-instant .nav-more-link,
body.ios-theme .grigsi-top-bar .nav-more-group-product .nav-more-link,
body.ios-theme .grigsi-top-bar .nav-more-group-build .nav-more-link,
body.ios-theme .grigsi-top-bar .nav-more-group-community .nav-more-link,
body.ios-theme .grigsi-top-bar .nav-more-group-about .nav-more-link{
  background:rgba(166,147,239,.16)!important;
  border-color:rgba(166,147,239,.28)!important;
  color:rgba(255,255,255,.92)!important;
  -webkit-text-fill-color:rgba(255,255,255,.92)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-indexes .nav-more-link:hover,
body.ios-theme .grigsi-top-bar .nav-more-group-instant .nav-more-link:hover,
body.ios-theme .grigsi-top-bar .nav-more-group-product .nav-more-link:hover,
body.ios-theme .grigsi-top-bar .nav-more-group-build .nav-more-link:hover,
body.ios-theme .grigsi-top-bar .nav-more-group-community .nav-more-link:hover,
body.ios-theme .grigsi-top-bar .nav-more-group-about .nav-more-link:hover{
  background:rgba(166,147,239,.3)!important;
  border-color:rgba(200,190,255,.4)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-instant .nav-more-heading{
  color:rgba(200,190,255,.95)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-soon .nav-more-link,
body.ios-theme .grigsi-top-bar .nav-more-panel .nav-more-link-muted{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.55)!important;
  border-style:dashed!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-soon .nav-more-link:hover,
body.ios-theme .grigsi-top-bar .nav-more-panel .nav-more-link-muted:hover{
  background:rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.78)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-link .nav-more-link-icons .fa-chart-line,
body.ios-theme .grigsi-top-bar .nav-more-link .nav-more-link-icons .fa-coins{
  color:rgba(200,190,255,.9)!important;
}

/* Glass surfaces (major containers) — never card-guide explainer panels */
body.ios-theme .front-section-card,
body.ios-theme .feature-block.feature-bordered,
body.ios-theme .plan-card,
body.ios-theme .service-card,
body.ios-theme .about-card,
body.ios-theme .contact-box,
body.ios-theme .modal-content,
body.ios-theme .check-card,
body.ios-theme .feature-item,
body.ios-theme .popup-box,
body.ios-theme .confirm-section,
body.ios-theme .main-box,
body.ios-theme footer,
body.ios-theme header:not(.grigsi-top-bar):not(.hero):not(.space-share-sheet__head),
body.ios-theme .trust-popup,
body.ios-theme .about-highlight,
body.ios-theme .extension-card{
  background: var(--liquid-glass-bg) !important;
  border: 0.5px solid var(--liquid-glass-border) !important;
  backdrop-filter: var(--site-glass-backdrop) !important;
  -webkit-backdrop-filter: var(--site-glass-backdrop) !important;
  box-shadow: var(--site-glass-card-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.ios-theme .front-section-card:hover,
body.ios-theme .feature-block.feature-bordered:hover,
body.ios-theme .plan-card:hover,
body.ios-theme .service-card:hover,
body.ios-theme .about-card:hover,
body.ios-theme .contact-box:hover,
body.ios-theme .modal-content:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.35) !important;
}

/* Make form controls match the glass look */
body.ios-theme input,
body.ios-theme textarea,
body.ios-theme select{
  background: rgba(0,0,0,.25) !important;
  border: 0.5px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.95) !important;
}
body.ios-theme input::placeholder,
body.ios-theme textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}
body.ios-theme input:focus,
body.ios-theme textarea:focus,
body.ios-theme select:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.22) inset;
}

/* Space code (tabs row) — white field, not glass/dark inputs above */
body.ios-theme #space-code,
body.ios-theme input#space-code.space-code-display,
body.ios-theme.space-shell #space-code,
body.ios-theme.space-shell input#space-code.space-code-display,
body.ios-theme:has(.space-share) #space-tabs input#space-code {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  color-scheme: light;
  caret-color: #1a1a24;
  box-shadow: none !important;
}
body.ios-theme #space-code::placeholder,
body.ios-theme input#space-code.space-code-display::placeholder {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
  opacity: 1 !important;
}
body.ios-theme #space-code:-webkit-autofill,
body.ios-theme #space-code:-webkit-autofill:hover,
body.ios-theme #space-code:-webkit-autofill:focus,
body.ios-theme input#space-code.space-code-display:-webkit-autofill,
body.ios-theme input#space-code.space-code-display:-webkit-autofill:hover,
body.ios-theme input#space-code.space-code-display:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1a1a24 !important;
  caret-color: #1a1a24;
}

/* ========== iOS cosmic: contrast fixes (readable text, contact success, light inputs) ========== */

/* Glass cards: headings were var(--dark) on dark glass — unreadable */
body.ios-theme .feature-block.feature-bordered h2,
body.ios-theme .feature-block.feature-bordered h3,
body.ios-theme .feature-block.feature-bordered p,
body.ios-theme .feature-block.feature-bordered li,
body.ios-theme .feature-block.feature-bordered .feature-block-header h3{
  color: rgba(255,255,255,.93) !important;
}
body.ios-theme .feature-block.feature-bordered .feature-block-header h3:hover{
  color: var(--liquid-accent-1) !important;
}
body.ios-theme .tool-info-link{
  color: rgba(255,255,255,.7) !important;
}
body.ios-theme .tool-info-link:hover{
  color: var(--liquid-accent-1) !important;
}

/* tools.html — Extensions grid: clickable titles dark-green on light card (not white on glass) */
body.ios-theme #extensions .feature-block.feature-bordered{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}
body.ios-theme #extensions .feature-block.feature-bordered .feature-block-header h3.js-open-store-modal{
  color: var(--ios-indigo) !important;
}
body.ios-theme #extensions .feature-block.feature-bordered .feature-block-header h3.js-open-store-modal:hover{
  color: #1E1435 !important;
}
body.ios-theme #extensions .feature-block.feature-bordered .feature-block-header h3.js-open-store-modal i{
  color: inherit !important;
}
body.ios-theme #extensions .feature-block.feature-bordered p{
  color: #3a3a3c !important;
}
body.ios-theme #extensions .feature-block.feature-bordered .tool-info-link{
  color: #636366 !important;
}
body.ios-theme #extensions .feature-block.feature-bordered .tool-info-link:hover{
  color: var(--ios-indigo) !important;
}
/* Dark glass / cosmic strips only — NOT inside light sections (overridden below) */
/* Spaces hub: light editorial cards — not cosmic glass (white-on-white bug). */
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered,
body.page-spaces.page-hub .section.section-light .content-narrow.feature-block {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(106, 90, 205, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 28px rgba(38, 33, 82, 0.08) !important;
}
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered h2,
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered h3,
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered p,
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered li,
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered strong,
body.page-spaces.page-hub .section.section-light .space-type-block h2,
body.page-spaces.page-hub .section.section-light .space-type-block p,
body.page-spaces.page-hub .section.section-light .space-caps,
body.page-spaces.page-hub .section.section-light .space-caps li {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.page-spaces.page-hub .section.section-light .space-caps .cap-icon,
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered h2 i {
  color: var(--ios-indigo) !important;
  -webkit-text-fill-color: var(--ios-indigo) !important;
}
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered a:not(.btn) {
  color: var(--ios-indigo) !important;
}
body.page-spaces.page-hub .section.section-light .feature-block.feature-bordered p[style],
body.page-spaces.page-hub .section.section-light .space-type-block p[style] {
  color: #48484a !important;
  -webkit-text-fill-color: #48484a !important;
}
body.ios-theme .section.section-light .section-layer-title,
body.ios-theme .section.section-light-alt .section-layer-title,
body.ios-theme .section.section-light .section-layer-desc,
body.ios-theme .section.section-light-alt .section-layer-desc,
body.ios-theme .section.section-light .section-subheading,
body.ios-theme .section.section-light-alt .section-subheading{
  color: #1c1c1e !important;
}
body.ios-theme .section.section-light .section-layer-desc,
body.ios-theme .section.section-light-alt .section-layer-desc{
  color: #3a3a3c !important;
}
body.ios-theme .section.section-light .browser-badge,
body.ios-theme .section.section-light-alt .browser-badge,
body.ios-theme .section.section-light .browser-badge span:last-child,
body.ios-theme .section.section-light-alt .browser-badge span:last-child{
  color: #1c1c1e !important;
}
body.ios-theme .feature-block.feature-bordered .browser-badge,
body.ios-theme .feature-block.feature-bordered .browser-badge span:last-child{
  color: rgba(255,255,255,.92) !important;
}

/* API / Trust Index / Pricing: main is cosmic bg but blocks are light editorial — dark text */
body.ios-theme main .dev-section,
body.ios-theme main .dev-section h2,
body.ios-theme main .dev-section h3,
body.ios-theme main .dev-section p,
body.ios-theme main .dev-section li,
body.ios-theme main .dev-section td,
body.ios-theme main .dev-section th{
  color: #1c1c1e !important;
}
body.ios-theme main .dev-section .dev-table th{
  background: #f2f2f7 !important;
  color: #48484a !important;
  border-bottom: 1px solid #e5e5ea !important;
}
body.ios-theme main .dev-section .dev-table td{
  border-bottom: 1px solid #e5e5ea !important;
  color: #1c1c1e !important;
}
body.ios-theme main .dev-section code:not(pre code){
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
body.ios-theme main .dev-section pre,
body.ios-theme main .dev-section pre code{
  background: #1a1a2e !important;
  color: #e8e8ed !important;
}
body.ios-theme main .dev-section .dev-badge-preview{
  background: #f2f2f7 !important;
  border: 1px solid #e5e5ea !important;
  color: #1c1c1e !important;
}
/* Trust Index — main on cosmic: white copy */
body.ios-theme main .ti-section h2,
body.ios-theme main .ti-tier strong{
  color: rgba(255,255,255,.96) !important;
}
body.ios-theme main .ti-section h2 i{
  color: var(--liquid-accent-1) !important;
}
body.ios-theme main .ti-section p,
body.ios-theme main .ti-section ul,
body.ios-theme main .ti-section li{
  color: rgba(255,255,255,.9) !important;
}
body.ios-theme main .ti-section strong{
  color: #fff !important;
}
body.ios-theme main .ti-section a{
  color: var(--liquid-accent-1) !important;
}
body.ios-theme main .ti-section a:hover{
  color: #fff !important;
}
body.ios-theme main .ti-section code{
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.95) !important;
}
body.ios-theme main .ti-tier{
  background: rgba(255,255,255,.1) !important;
  border-left-color: var(--liquid-accent-1) !important;
}
body.ios-theme main .ti-tier span{
  color: rgba(255,255,255,.82) !important;
}

/* Pricing — section titles & direct intro lines on cosmic = white; tables & .what-you-pay stay dark on light panels */
body.ios-theme main .pricing-section h2{
  color: rgba(255,255,255,.96) !important;
}
body.ios-theme main .pricing-section h2 i{
  color: var(--liquid-accent-1) !important;
}
body.ios-theme main .pricing-section > p:not(.pricing-note){
  color: rgba(255,255,255,.92) !important;
}
body.ios-theme main .pricing-decision-guide .plan-card h3{
  color: rgba(255,255,255,.98) !important;
}
body.ios-theme main .pricing-decision-guide .plan-card p{
  color: rgba(255,255,255,.92) !important;
}
body.ios-theme main .pricing-decision-guide .plan-card p strong{
  color: var(--yellow, #ffcc4b) !important;
}
body.ios-theme main .pricing-plans-grid .plan-card h3{
  color: var(--yellow, #ffcc4b) !important;
}
body.ios-theme main .pricing-plans-grid .plan-card li{
  color: rgba(255,255,255,.92) !important;
}
body.ios-theme main .pricing-section .what-you-pay h3,
body.ios-theme main .pricing-section .what-you-pay ul,
body.ios-theme main .pricing-section .what-you-pay li,
body.ios-theme main .pricing-section .what-you-pay p{
  color: #1c1c1e !important;
}
body.ios-theme main .pricing-table th,
body.ios-theme main .pricing-table td,
body.ios-theme main .pricing-table .plan-name,
body.ios-theme main .pricing-table .price{
  color: #1c1c1e !important;
}
body.ios-theme main .pricing-table th{
  background: #f2f2f7 !important;
  color: #48484a !important;
}
body.ios-theme main .pricing-table td{
  border-color: #e5e5ea !important;
}
body.ios-theme main .pricing-note{
  color: #3a3a3c !important;
}
body.ios-theme main .pricing-note code{
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
body.ios-theme main .community-check-label,
body.ios-theme main .community-check-group-title{
  color: #1c1c1e !important;
}

/* Hero text stays light on green gradient */
body.ios-theme .hero .hero-title-single,
body.ios-theme .hero .hero-title,
body.ios-theme .hero .hero-subtitle,
body.ios-theme .hero .hero-subtitle-bottom{
  color: rgba(255,255,255,.95) !important;
}

/* Contact / home check: light cards need dark text in fields (override global glass inputs) */
body.ios-theme .contact-form input[type="text"],
body.ios-theme .contact-form input[type="email"],
body.ios-theme .contact-form textarea,
body.ios-theme .contact-form select,
body.ios-theme .contact-form .contact-select,
body.ios-theme #check .feature-input,
body.ios-theme #check .check-feature-stack .feature-input{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: #1c1c1e !important;
  box-shadow: none !important;
}
body.ios-theme .contact-form input::placeholder,
body.ios-theme .contact-form textarea::placeholder,
body.ios-theme #check .feature-input::placeholder{
  color: #8e8e93 !important;
}
body.ios-theme .contact-form input:focus,
body.ios-theme .contact-form textarea:focus,
body.ios-theme .contact-form select:focus,
body.ios-theme #check .feature-input:focus{
  box-shadow: 0 0 0 3px rgba(0,122,255,.2) !important;
}

/* “Message sent” / errors: strong contrast on light contact card */
body.ios-theme .contact-form .contact-form-status--ok,
body.ios-theme .feedback-form .contact-form-status--ok{
  background: #d1fae5 !important;
  border: 1px solid #10b981 !important;
  color: #065f46 !important;
}
body.ios-theme .contact-form .contact-form-status--err,
body.ios-theme .feedback-form .contact-form-status--err{
  background: #fee2e2 !important;
  border: 1px solid #f87171 !important;
  color: #991b1b !important;
}

/* Store modal: white panel — dark text in links and fields */
body.ios-theme .store-modal-content,
body.ios-theme .store-modal-content h3{
  color: #1c1c1e !important;
}
body.ios-theme .store-modal-buttons a{
  color: #1c1c1e !important;
  border-color: #e5e5ea !important;
  background: #fff !important;
}
body.ios-theme .store-modal-buttons a:hover{
  background: #f2f2f7 !important;
}
body.ios-theme .store-modal-close{
  color: #1c1c1e !important;
  background: #e5e5ea !important;
}

/* Home hub tiles (light green panel on dark ios-theme body) */
body.ios-theme .home-hub-unified,
body.ios-theme .home-quick-actions.home-hub-unified {
  color: #123d25 !important;
}
body.ios-theme .home-hub-unified a.home-quick-card > span {
  color: #6a5acd !important;
  -webkit-text-fill-color: #6a5acd !important;
  font-weight: 800;
}
body.ios-theme .home-hub-unified a.home-quick-card--extensions > span {
  color: #6b4a08 !important;
  -webkit-text-fill-color: #6b4a08 !important;
}
body.ios-theme .home-hub-unified a.home-quick-card > small {
  color: rgba(23, 71, 47, 0.78) !important;
  -webkit-text-fill-color: rgba(23, 71, 47, 0.78) !important;
  text-align: center !important;
}
body.ios-theme .home-hub-unified a.home-quick-card > span {
  text-align: center !important;
}
/* Instant tile — dark card needs light text (beats hub lilac/green defaults above) */
body.ios-theme .home-hub-unified a.home-quick-card--instant,
body.ios-theme .home-hub-unified a.home-quick-card--instant > span,
body.ios-theme .home-hub-unified a.home-quick-card--instant > small {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
}
body.ios-theme .home-hub-unified a.home-quick-card--instant > small {
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
body.ios-theme .home-hub-unified a.home-quick-card--instant > i {
  color: #ffc64b !important;
  -webkit-text-fill-color: #ffc64b !important;
}

/* GriGsi Instant (/instant/) — section labels lilac on purple shell (not white on glass) */
body.ios-theme .cn-page .cn-sect__title,
body.ios-theme .cn-page .cn-sect__hint,
body.ios-theme .cn-page .cn-ready__title,
body.ios-theme .cn-page .cn-instant__hint,
body.ios-theme .cn-page .cn-more,
body.ios-theme .cn-page .cn-book__empty,
body.ios-theme .cn-page .cn-drawer h3,
body.ios-theme .cn-page .cn-drawer__heading {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}
body.ios-theme .cn-page .cn-sect__meta,
body.ios-theme .cn-page .cn-ready__wait {
  color: rgba(196, 181, 253, 0.85) !important;
  -webkit-text-fill-color: rgba(196, 181, 253, 0.85) !important;
}

/* Light sections: body uses liquid-text (light) — must force DARK copy on light backgrounds */
body.ios-theme .section.section-light,
body.ios-theme .section.section-light-alt,
body.ios-theme .section.section-alt,
body.ios-theme .section.section-dark{
  color: #1c1c1e !important;
}
body.ios-theme .section.section-light h1,
body.ios-theme .section.section-light h2,
body.ios-theme .section.section-light h3,
body.ios-theme .section.section-light h4,
body.ios-theme .section.section-light p,
body.ios-theme .section.section-light li,
body.ios-theme .section.section-light .section-title,
body.ios-theme .section.section-light-alt h1,
body.ios-theme .section.section-light-alt h2,
body.ios-theme .section.section-light-alt h3,
body.ios-theme .section.section-light-alt p,
body.ios-theme .section.section-light-alt li,
body.ios-theme .section.section-alt h1,
body.ios-theme .section.section-alt h2,
body.ios-theme .section.section-alt h3,
body.ios-theme .section.section-alt p,
body.ios-theme .section.section-alt li,
body.ios-theme .section.section-dark h1,
body.ios-theme .section.section-dark h2,
body.ios-theme .section.section-dark h3,
body.ios-theme .section.section-dark p,
body.ios-theme .section.section-dark li,
body.ios-theme .what-is-trust .section-title,
body.ios-theme .what-is-trust p{
  color: #1c1c1e !important;
}
body.ios-theme #check .check-title,
body.ios-theme #check .check-subtitle,
body.ios-theme #check .check-cta-links,
body.ios-theme #check .feature-loading,
body.ios-theme #check .feature-loading span{
  color: #1c1c1e !important;
}
body.ios-theme #check .check-subtitle{
  color: #48484a !important;
}
body.ios-theme .four-cols,
body.ios-theme .three-cols{
  color: #1c1c1e !important;
}
body.ios-theme .four-cols .col h3,
body.ios-theme .three-cols .col h3,
body.ios-theme .four-cols .col .col-subtitle,
body.ios-theme .three-cols .col .col-subtitle,
body.ios-theme .four-cols .col li,
body.ios-theme .three-cols .col li,
body.ios-theme .four-cols .col .col-tool-group-title,
body.ios-theme .three-cols .col .col-tool-group-title{
  color: #1c1c1e !important;
}
body.ios-theme .four-cols .col p,
body.ios-theme .three-cols .col p{
  color: #3a3a3c !important;
}
body.ios-theme .four-cols .tool-info-link,
body.ios-theme .three-cols .tool-info-link{
  color: #636366 !important;
}
body.ios-theme .four-cols .tool-info-link:hover,
body.ios-theme .three-cols .tool-info-link:hover{
  color: var(--ios-blue) !important;
}

/* Trust Check tool: white panels — undo global glass inputs */
body.ios-theme .info-index-container .input-textarea,
body.ios-theme .info-index-container .ft-panel-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.ios-theme .info-index-container .ft-panel-body textarea,
body.ios-theme .info-index-container .ft-panel-body select{
  background: #fff !important;
  color: #1c1c1e !important;
  border: 1px solid #d1d1d6 !important;
  box-shadow: none !important;
}
body.ios-theme .info-index-container .input-tab:not(.active){
  color: #1c1c1e !important;
  background: #fff !important;
}
body.ios-theme .info-index-container .ft-panel-header h2{
  color: #1c1c1e !important;
}
body.ios-theme .info-index-container .preview-text,
body.ios-theme .info-index-container .source-domain,
body.ios-theme .info-index-container .source-snippet{
  color: #3a3a3c !important;
}

/* Store modal (index + trust-index): inner panel is a plain <div>, not .store-modal-content */
body.ios-theme .store-modal > div:first-of-type{
  background: #fff !important;
}
body.ios-theme .store-modal #store-modal-title,
body.ios-theme .store-modal > div:first-of-type > h3,
body.ios-theme .store-modal > div:first-of-type > p{
  color: #1c1c1e !important;
}
body.ios-theme .store-modal > div:first-of-type a[style*="color: #333"]{
  color: #1c1c1e !important;
  border-color: #e5e5ea !important;
  background: #fff !important;
}
body.ios-theme .store-modal > div:first-of-type a[style*="color: #333"]:hover{
  background: #f2f2f7 !important;
}
body.ios-theme #store-modal-close{
  color: #1c1c1e !important;
  background: #e5e5ea !important;
}
body.ios-theme #store-modal .fab.fa-chrome{
  color: #c48a12 !important;
  -webkit-text-fill-color: #c48a12 !important;
}
body.ios-theme #store-modal .fab.fa-firefox-browser{
  color: #ff7139 !important;
  -webkit-text-fill-color: #ff7139 !important;
}
body.ios-theme #store-modal .fab.fa-opera{
  color: #ff1b2d !important;
  -webkit-text-fill-color: #ff1b2d !important;
}

/* Inline dark copy on cosmic pages (e.g. how.html) */
body.ios-theme main p[style*="color: #333"],
body.ios-theme main p[style*="color:#333"]{
  color: rgba(255,255,255,.93) !important;
}

/* Glass cards: outline buttons were purple/dark on dark glass */
body.ios-theme .feature-block.feature-bordered .btn-outline{
  color: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.06) !important;
}
body.ios-theme .feature-block.feature-bordered .btn-outline:hover{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* ========== iOS theme: button contrast (light fill → dark text; dark fill → light text) ========== */
/* Global link color must not break <a class="btn"> (yellow fill + dark text) */
body.ios-theme a.btn:not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-nav):not(.btn-hero-yellow):not(.btn-hero-purple){
  color: var(--yellow-btn-text) !important;
}
body.ios-theme a.btn:not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-nav):hover,
body.ios-theme a.btn:not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-nav):focus{
  color: #fff !important;
}

/* Outline on light / editorial blocks: light button, dark text */
body.ios-theme .section.section-light .btn-outline,
body.ios-theme .section.section-light-alt .btn-outline,
body.ios-theme .section.section-alt .btn-outline,
body.ios-theme #check .btn-outline,
body.ios-theme .four-cols .btn-outline,
body.ios-theme .three-cols .btn-outline,
body.ios-theme .contact-block .btn-outline,
body.ios-theme footer .btn-outline,
body.ios-theme main .dev-section .btn-outline,
body.ios-theme main .pricing-section .btn-outline,
body.ios-theme .what-is-trust .btn-outline{
  color: #1c1c1e !important;
  border-color: rgba(60,60,67,.45) !important;
  background: rgba(255,255,255,.94) !important;
}
body.ios-theme .section.section-light .btn-outline:hover,
body.ios-theme .section.section-light-alt .btn-outline:hover,
body.ios-theme .section.section-alt .btn-outline:hover,
body.ios-theme #check .btn-outline:hover,
body.ios-theme .four-cols .btn-outline:hover,
body.ios-theme .three-cols .btn-outline:hover,
body.ios-theme .contact-block .btn-outline:hover,
body.ios-theme footer .btn-outline:hover,
body.ios-theme main .dev-section .btn-outline:hover,
body.ios-theme main .pricing-section .btn-outline:hover,
body.ios-theme .what-is-trust .btn-outline:hover{
  background: rgba(0,0,0,.07) !important;
  color: #1c1c1e !important;
  border-color: #1c1c1e !important;
}

/* Pricing “Start simple” CTAs sit on cosmic main — not white editorial panels */
body.ios-theme main .pricing-section .pricing-links a.btn-outline{
  color: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.1) !important;
}
body.ios-theme main .pricing-section .pricing-links a.btn-outline:hover{
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-color: var(--yellow, #ffcc4b) !important;
  opacity: 1 !important;
}

/* Primary CTA on light cards / check / columns: yellow + dark text (not orange link styling) */
body.ios-theme #check .btn.btn-primary,
body.ios-theme #check a.btn-primary,
body.ios-theme #check-btn,
body.ios-theme .section.section-light .btn.btn-primary,
body.ios-theme .section.section-light a.btn-primary,
body.ios-theme .section.section-light-alt .btn.btn-primary,
body.ios-theme .section.section-light-alt a.btn-primary,
body.ios-theme .section.section-alt .btn.btn-primary,
body.ios-theme .section.section-alt a.btn-primary,
body.ios-theme .four-cols .btn.btn-primary,
body.ios-theme .four-cols a.btn-primary,
body.ios-theme .three-cols .btn.btn-primary,
body.ios-theme .three-cols a.btn-primary,
body.ios-theme .contact-block .btn.btn-primary,
body.ios-theme .contact-block a.btn-primary{
  background: var(--yellow) !important;
  color: var(--yellow-btn-text) !important;
  box-shadow: var(--ios-shadow-subtle) !important;
}
body.ios-theme #check .btn.btn-primary:hover,
body.ios-theme #check a.btn-primary:hover,
body.ios-theme #check-btn:hover,
body.ios-theme .section.section-light .btn.btn-primary:hover,
body.ios-theme .section.section-light a.btn-primary:hover,
body.ios-theme .section.section-light-alt .btn.btn-primary:hover,
body.ios-theme .section.section-light-alt a.btn-primary:hover,
body.ios-theme .section.section-alt .btn.btn-primary:hover,
body.ios-theme .section.section-alt a.btn-primary:hover,
body.ios-theme .four-cols .btn.btn-primary:hover,
body.ios-theme .four-cols a.btn-primary:hover,
body.ios-theme .three-cols .btn.btn-primary:hover,
body.ios-theme .three-cols a.btn-primary:hover,
body.ios-theme .contact-block .btn.btn-primary:hover,
body.ios-theme .contact-block a.btn-primary:hover{
  background: var(--ios-indigo) !important;
  color: #fff !important;
}

/* Secondary “glass” button on light background — dark text */
body.ios-theme .section.section-light .btn-secondary,
body.ios-theme .section.section-light-alt .btn-secondary,
body.ios-theme .section.section-alt .btn-secondary,
body.ios-theme #check .btn-secondary,
body.ios-theme .four-cols .btn-secondary,
body.ios-theme .three-cols .btn-secondary,
body.ios-theme .contact-block .btn-secondary{
  background: rgba(0,0,0,.06) !important;
  color: #1c1c1e !important;
  border-color: rgba(60,60,67,.35) !important;
}
body.ios-theme .section.section-light .btn-secondary:hover,
body.ios-theme .section.section-light-alt .btn-secondary:hover,
body.ios-theme .section.section-alt .btn-secondary:hover,
body.ios-theme #check .btn-secondary:hover,
body.ios-theme .four-cols .btn-secondary:hover,
body.ios-theme .three-cols .btn-secondary:hover,
body.ios-theme .contact-block .btn-secondary:hover{
  background: rgba(0,0,0,.1) !important;
  border-color: rgba(60,60,67,.5) !important;
  color: #1c1c1e !important;
}

/* Hero / bar / nav: filled button, light text on dark background */
body.ios-theme .hero .btn.btn-primary,
body.ios-theme .hero a.btn-primary,
body.ios-theme .purple-bar .btn.btn-primary,
body.ios-theme .purple-bar a.btn-primary,
body.ios-theme .grigsi-top-bar a.btn-primary{
  background: var(--ios-orange) !important;
  color: #fff !important;
}
body.ios-theme .hero .btn.btn-primary:hover,
body.ios-theme .hero a.btn-primary:hover,
body.ios-theme .purple-bar .btn.btn-primary:hover,
body.ios-theme .purple-bar a.btn-primary:hover,
body.ios-theme .grigsi-top-bar a.btn-primary:hover{
  background: var(--liquid-accent-2) !important;
  color: #fff !important;
}

/* API / developer.html — full page light surface (no cosmic / brown background) */
body.ios-theme.developer-page{
  background: #f2f2f7 !important;
  animation: none !important;
  color: #1c1c1e !important;
}
body.ios-theme.developer-page header.hero.hero-compact,
body.ios-theme.developer-page .hero.hero-compact{
  background: linear-gradient(180deg,var(--ios-indigo) 0%,#1E1435 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
}
/* Hub pages add a light ::after glow on .hero — clashes with developer’s solid dark strip */
body.ios-theme.developer-page header.hero.hero-compact::after,
body.ios-theme.developer-page .hero.hero-compact::after{
  display: none !important;
  content: none !important;
}
body.ios-theme.developer-page header.hero.hero-compact .hero-subtitle-bottom,
body.ios-theme.developer-page .hero.hero-compact .hero-subtitle-bottom{
  color: rgba(255,255,255,.92) !important;
}
body.ios-theme.developer-page footer{
  background: #fff !important;
  border-top: 1px solid #e5e5ea !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ios-theme.developer-page footer a{
  color: var(--ios-blue) !important;
}

/* Open Data Hub — full light surface (beats cosmic bg + white default link color) */
body.ios-theme.page-open-data-hub {
  background: linear-gradient(180deg, #f5f3fa 0%, #eee8f8 100%) !important;
  animation: none !important;
  color: #1c1c1e !important;
}
body.ios-theme.page-open-data-hub main,
body.ios-theme.page-open-data-hub main p,
body.ios-theme.page-open-data-hub main aside {
  color: #1c1c1e !important;
}
body.ios-theme.page-open-data-hub main a {
  color: #6B58A8 !important;
}
body.ios-theme.page-open-data-hub .site-footer-min a {
  color: var(--ios-blue) !important;
}

/* Hub pages (.page-hub): ::after glow clashes with solid dark iOS hero — tools, indexes, services, … */
body.ios-theme.page-hub header.hero.hero-compact::after,
body.ios-theme.page-hub .hero.hero-compact::after{
  display: none !important;
  content: none !important;
}

/* ========== Performance: lighter glass / shadows (touch + reduced motion) ========== */
@media (hover: none) and (pointer: coarse) {
  :root {
    --nav-backdrop-blur: blur(6px) saturate(130%);
    --site-glass-backdrop: blur(6px) saturate(125%);
    --site-glass-card-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 18px rgba(255, 198, 75,.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --nav-backdrop-blur: blur(0px);
    --site-glass-backdrop: blur(0px);
    --site-glass-card-shadow: 0 4px 14px rgba(0,0,0,.12);
  }
  body.ios-theme {
    animation: none !important;
  }
}

/* ========== Hub pages: Product / Solutions / Indexes / About (three columns + status) ========== */
.hub-three-cols,
.three-cols {
  display: grid;
  gap: 24px;
  margin: 0 auto;
  padding: 28px 24px 36px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
}
@media (max-width: 1024px) {
  .hub-three-cols,
  .three-cols {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}
.hub-three-cols .col,
.three-cols .col {
  padding: 20px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #eee;
}
.hub-three-cols .col h3,
.three-cols .col h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
  color: #1a1a2e;
}
.hub-three-cols .col .col-subtitle,
.three-cols .col .col-subtitle {
  font-size: 0.8rem;
  color: #666;
  margin: 0 0 10px 0;
  font-weight: 600;
}
.hub-three-cols .col p,
.three-cols .col p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
  margin: 0 0 12px 0;
}
.hub-three-cols .col a,
.three-cols .col a {
  font-size: 0.9rem;
  color: var(--purple);
  text-decoration: none;
}
.hub-three-cols .col a:hover,
.three-cols .col a:hover {
  text-decoration: underline;
}
.hub-three-cols .col .col-icon,
.three-cols .col .col-icon {
  font-size: 1.5rem;
  color: var(--purple);
  margin-bottom: 6px;
  display: block;
}
.hub-three-cols .col .col-links,
.three-cols .col .col-links {
  list-style: none;
  margin: 10px 0 12px 0;
  padding: 0;
}
.hub-three-cols .col .col-links li,
.three-cols .col .col-links li {
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.hub-three-cols .col .col-links a,
.three-cols .col .col-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.hub-three-cols .col .col-links .link-icon,
.three-cols .col .col-links .link-icon {
  color: var(--purple);
  width: 1em;
}
.hub-three-cols .col .col-tool-group,
.three-cols .col .col-tool-group {
  margin-top: 12px;
}
.hub-three-cols .col .col-tool-group:first-of-type,
.three-cols .col .col-tool-group:first-of-type {
  margin-top: 8px;
}
.hub-three-cols .col .col-tool-group-title,
.three-cols .col .col-tool-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.hub-three-cols .col .col-tool-group .col-links,
.three-cols .col .col-tool-group .col-links {
  margin: 0;
}
.hub-three-cols .col .col-tool-group .col-links li,
.three-cols .col .col-tool-group .col-links li {
  margin-bottom: 4px;
}
.hub-three-cols .col .tools-muted,
.three-cols .col .tools-muted {
  font-size: 0.8rem;
  color: #666;
  margin-top: 8px;
  line-height: 1.45;
}
.hub-three-cols .col .tools-status-line,
.three-cols .col .tools-status-line {
  font-size: 0.78rem;
  font-weight: 700;
  color: #166534;
  margin: 4px 0 10px;
}
.hub-three-cols .col .tools-status-line.soon,
.three-cols .col .tools-status-line.soon {
  color: #6b7280;
  font-weight: 600;
}
.tool-info-link {
  color: #666;
  font-size: 1rem;
}
.tool-info-link:hover {
  color: var(--purple);
}
/* Status chips — mirror nav More zones (hub pages, not scoped to .grigsi-top-bar) */
.tools-mirror-more {
  margin-top: 6px;
}
.tools-mirror-more .nav-more-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.tools-mirror-more .nav-more-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  margin: 0;
}
.tools-mirror-more .nav-more-group .nav-more-heading {
  flex: none;
  width: auto;
  margin: 0 0 2px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a3a42;
  line-height: 1.2;
}
.tools-mirror-more .nav-more-group p {
  margin: 0;
  font-size: 0.85rem;
  color: #444;
  line-height: 1.45;
}
.tools-mirror-more .nav-more-group a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}
.tools-mirror-more .nav-more-group a:hover {
  text-decoration: underline;
}
.tools-mirror-more .nav-more-group .tools-app-status {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}
.tools-mirror-more .nav-more-group-product {
  background: rgba(166, 147, 239, 0.12);
  border-color: rgba(45, 120, 60, 0.22);
}
.tools-mirror-more .nav-more-group-product .tools-app-status {
  color: #145214;
}
.tools-mirror-more .nav-more-group-build {
  background: rgba(129, 119, 240, 0.1);
  border-color: rgba(90, 80, 180, 0.2);
}
.tools-mirror-more .nav-more-group-build .tools-app-status {
  color: #2d2466;
}
.tools-mirror-more .nav-more-group-community {
  background: rgba(255, 198, 75, 0.1);
  border-color: rgba(200, 100, 0, 0.22);
}
.tools-mirror-more .nav-more-group-community .tools-app-status {
  color: #6b3d00;
}
.tools-mirror-more .nav-more-group-soon {
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14);
}
.tools-mirror-more .nav-more-group-soon .nav-more-heading {
  color: #777;
}
.tools-mirror-more .nav-more-group-soon .tools-app-status {
  color: #6b7280;
  font-weight: 700;
}
.store-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.store-modal.active {
  display: flex;
}
.store-modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.store-modal h3 {
  margin: 0 0 16px;
  font-size: 1.2rem;
}
.store-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-modal-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #eee;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
.store-modal-buttons a:hover {
  background: #f5f5f5;
  border-color: var(--purple);
  color: var(--purple);
}
.store-modal-close {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  border: none;
  background: #eee;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.store-modal-close:hover {
  background: #ddd;
}

/* --- GriGsi Phase 1: cross-site visual system --- */
.page-hub {
  --hub-bg-top: #f7f8fc;
  --hub-bg-bottom: #eff2f9;
  background: linear-gradient(180deg, var(--hub-bg-top) 0%, var(--hub-bg-bottom) 100%);
}
.page-home {
  --hub-bg-top: #f7f5fa;
  --hub-bg-bottom: #eee8f8;
}
.page-services { --hub-bg-top: #f5f3fa; --hub-bg-bottom: #eee8f8; }
.page-tools { --hub-bg-top: #f5f9ff; --hub-bg-bottom: #edf3ff; }
.page-indexes { --hub-bg-top: #f8f5ff; --hub-bg-bottom: #f1ecff; }
.page-trust { --hub-bg-top: #f5f8ff; --hub-bg-bottom: #eef2ff; }
.page-trust-global { --hub-bg-top: #f5f8ff; --hub-bg-bottom: #edf1ff; }
.page-check { --hub-bg-top: #fff9ef; --hub-bg-bottom: #fff3de; }
.page-info-noise { --hub-bg-top: #f8fbff; --hub-bg-bottom: #eef6ff; }
.page-about { --hub-bg-top: #f8fafb; --hub-bg-bottom: #eff4f6; }
.page-developer { --hub-bg-top: #f5f8ff; --hub-bg-bottom: #edf2ff; }
.page-spaces { --hub-bg-top: #f5f3fa; --hub-bg-bottom: #eee8f8; }

body.page-spaces.page-hub {
  background: linear-gradient(180deg, var(--hub-bg-top) 0%, var(--hub-bg-bottom) 100%) !important;
  color: #1c1c1e !important;
}
body.page-spaces.page-hub main,
body.page-spaces.page-hub .section.section-light {
  color: #1c1c1e !important;
}

/* Spaces hub: CTA rows stack on phones */
.page-spaces .space-block-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  align-items:stretch;
}
.page-spaces .space-block-actions--center{
  justify-content:center;
}
.page-spaces .space-block-actions .btn{
  margin-left:0!important;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (max-width: 720px) {
  body.page-spaces.page-hub .hero.hero-compact {
    padding: 16px var(--page-gutter, 16px) 20px;
  }
  body.page-spaces.page-hub .hero-title-single {
    font-size: 1.65rem;
  }
  body.page-spaces.page-hub .section.section-light {
    padding: 20px var(--page-gutter, 16px) 28px;
  }
  body.page-spaces.page-hub .container-same-width {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  body.page-spaces.page-hub .feature-block.feature-bordered,
  body.page-spaces.page-hub .content-narrow.feature-block {
    margin-bottom: 14px;
    padding: 16px 14px !important;
    border-radius: 16px;
  }
  body.page-spaces.page-hub .space-type-block h2 {
    font-size: 1.05rem;
    line-height: 1.3;
  }
  body.page-spaces.page-hub .space-caps {
    font-size: 13px;
    margin-bottom: 14px;
  }
  body.page-spaces.page-hub .space-type-block > p,
  body.page-spaces.page-hub .feature-block.feature-bordered > p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 560px){
  .page-spaces .space-block-actions{
    flex-direction:column;
  }
  .page-spaces .space-block-actions .btn{
    width:100%;
    min-height:44px;
  }
}
.page-privacy { --hub-bg-top: #f8f9fc; --hub-bg-bottom: #f0f2f8; }
.page-pricing { --hub-bg-top: #fffbf3; --hub-bg-bottom: #fdf4e7; }
.page-proof { --hub-bg-top: #f7f8fc; --hub-bg-bottom: #eef1f7; }
.page-community { --hub-bg-top: #f6fbff; --hub-bg-bottom: #eef7ff; }
.page-live-check-index { --hub-bg-top: #f5f7ff; --hub-bg-bottom: #edf1fb; }
.page-open-data-hub { --hub-bg-top: #f5f3fa; --hub-bg-bottom: #eee8f8; }

.page-hub .hero.hero-compact,
.page-hub .hero:not(.hero-large) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(166,147,239,.15) 0%, rgba(166, 147, 239,.12) 55%, rgba(255,198,75,.12) 100%);
  border-bottom: 1px solid rgba(106,90,205,.14);
}
.page-hub .hero.hero-compact::after,
.page-hub .hero:not(.hero-large)::after {
  content: "";
  position: absolute;
  inset: auto -10% -110px -10%;
  height: 170px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}

body.page-community .hero.hero-compact::after,
body.page-community .hero:not(.hero-large)::after,
body.page-community .hero::after {
  display: none !important;
}
.page-hub .hero-subtitle-bottom {
  font-size: 0.96rem;
  line-height: 1.55;
}

.page-hub .section.section-light,
.page-hub .section-light {
  background: transparent;
}
.page-hub .feature-block,
.page-hub .col,
.page-hub .ti-card,
.page-hub .content-narrow,
.page-hub .contact-block {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(106,90,205,.13);
  box-shadow: 0 8px 28px rgba(38,33,82,.06);
  backdrop-filter: saturate(130%) blur(2px);
}
.page-hub .feature-block:hover,
.page-hub .col:hover,
.page-hub .ti-card:hover {
  border-color: rgba(106,90,205,.28);
  box-shadow: 0 12px 34px rgba(38,33,82,.1);
}

.page-hub .tools-status-line,
.page-hub .tools-app-status,
.page-hub .home-ext-coming {
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-hub .tools-status-line {
  color: #2d6b45;
}
.page-hub .tools-app-status {
  color: #5a4a92;
}

.page-hub .section-layer-title,
.page-hub h2.section-title {
  letter-spacing: -0.01em;
}
.page-hub .btn.btn-primary {
  box-shadow: 0 4px 14px rgba(106,90,205,.22);
}

@media (max-width: 720px) {
  .page-hub .hero-subtitle-bottom {
    font-size: 0.9rem;
  }
  .page-hub .section {
    padding-top: 28px;
    padding-bottom: 30px;
  }
  .page-hub .three-cols,
  .page-hub .four-cols,
  .page-hub .hub-three-cols {
    gap: 14px;
    padding: 20px 12px;
  }
  .page-hub .col,
  .page-hub .feature-block,
  .page-hub .content-narrow,
  .page-hub .contact-block {
    padding: 16px;
  }
  .page-hub .col p,
  .page-hub .feature-block p,
  .page-hub .section-layer-desc,
  .page-hub .hero-subtitle-bottom {
    line-height: 1.5;
  }
  .page-hub .btn {
    padding: 9px 12px;
    font-size: 0.84rem;
  }
}

/* FINAL OVERRIDE: Remove hero glow on community.html */
html body.page-community header.hero.hero-compact::after,
html body.page-community .hero.hero-compact::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* FINAL: edge help tab — “G at a glance” + chevron black on light glass */
html body.ios-theme .grigsi-help-wrap #grigsi-help-launch.grigsi-help-chip--dark-label,
html body.ios-theme .grigsi-help-wrap #grigsi-help-launch.grigsi-help-chip--dark-label .grigsi-help-label,
html body.ios-theme .grigsi-help-wrap #grigsi-help-launch.grigsi-help-chip--dark-label .grigsi-help-glyph,
html body.ios-theme.page-hub .grigsi-help-wrap #grigsi-help-launch .grigsi-help-label,
html body.ios-theme.page-hub .grigsi-help-wrap #grigsi-help-launch .grigsi-help-glyph {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
html body.ios-theme.space-shell .grigsi-help-wrap #grigsi-help-launch .grigsi-help-label,
html body.ios-theme.space-shell .grigsi-help-wrap #grigsi-help-launch .grigsi-help-glyph,
html[data-grigsi-help="space"] body.ios-theme .grigsi-help-wrap #grigsi-help-launch .grigsi-help-label,
html[data-grigsi-help="space"] body.ios-theme .grigsi-help-wrap #grigsi-help-launch .grigsi-help-glyph {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
html body.ios-theme.page-spaces .grigsi-help-wrap #grigsi-help-launch .grigsi-help-label,
html body.ios-theme.page-spaces .grigsi-help-wrap #grigsi-help-launch .grigsi-help-glyph,
html body.ios-theme.page-spaces .grigsi-help-wrap #grigsi-help-launch.grigsi-help-chip--dark-label,
html body.ios-theme.page-spaces .grigsi-help-wrap #grigsi-help-launch.grigsi-help-chip--dark-label .grigsi-help-label,
html body.ios-theme.page-spaces .grigsi-help-wrap #grigsi-help-launch.grigsi-help-chip--dark-label .grigsi-help-glyph {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* /instant/ — same top bar as grigsi.com (do not override with separate nav CSS) */
body.ios-theme.cn-instant.cn-has-site-nav > header.grigsi-top-bar.home-min-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
body.ios-theme.cn-instant.cn-has-site-nav > .grigsi-top-bar-spacer {
  display: none;
}

/* Instant nav — last in file; beats ios-theme global accent on <a> */
html body.ios-theme .grigsi-top-bar .nav-buttons a.btn-nav.btn-nav-instant,
html body.ios-theme .grigsi-top-bar a.btn-nav.btn-nav-instant[href="/connect/"],
html body .grigsi-top-bar .nav-buttons a.btn-nav.btn-nav-instant {
  background: #FFC64B !important;
  color: #3D2860 !important;
  -webkit-text-fill-color: #3D2860 !important;
  border: 1px solid rgba(61, 40, 96, 0.5) !important;
  font-weight: 800 !important;
}
html body.ios-theme .grigsi-top-bar .nav-buttons a.btn-nav.btn-nav-instant:hover,
html body.ios-theme .grigsi-top-bar a.btn-nav.btn-nav-instant[href="/connect/"]:hover,
html body .grigsi-top-bar .nav-buttons a.btn-nav.btn-nav-instant:hover {
  background: #FFD966 !important;
  color: #2a1d45 !important;
  -webkit-text-fill-color: #2a1d45 !important;
}

/* ========== FINAL: site-wide contrast + overflow (light-on-light / clip fixes) ========== */

/* Light editorial sections: solid white cards — not cosmic glass (fixes white-on-white) */
body.ios-theme .section.section-light .feature-block.feature-bordered,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered,
body.ios-theme .section.section-alt .feature-block.feature-bordered,
body.ios-theme .section.section-light .content-narrow.feature-block,
body.ios-theme .section.section-light-alt .content-narrow.feature-block,
body.ios-theme .section.section-light .feature-block:not(.feature-bordered),
body.ios-theme .section.section-light-alt .feature-block:not(.feature-bordered),
body.ios-theme main.section.section-light .lci-dash .lci-card,
body.ios-theme .section.section-light .lci-example {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(106, 90, 205, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 28px rgba(38, 33, 82, 0.08) !important;
}

/* Dark copy inside light cards (beats cosmic glass white text) */
body.ios-theme .section.section-light .feature-block.feature-bordered h2,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered h2,
body.ios-theme .section.section-alt .feature-block.feature-bordered h2,
body.ios-theme .section.section-light .feature-block.feature-bordered h3,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered h3,
body.ios-theme .section.section-alt .feature-block.feature-bordered h3,
body.ios-theme .section.section-light .feature-block.feature-bordered .feature-block-header h3,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered .feature-block-header h3,
body.ios-theme .section.section-light .feature-block.feature-bordered p,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered p,
body.ios-theme .section.section-alt .feature-block.feature-bordered p,
body.ios-theme .section.section-light .feature-block.feature-bordered li,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered li,
body.ios-theme .section.section-light .feature-block.feature-bordered strong,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered strong,
body.ios-theme .section.section-light .lci-pull,
body.ios-theme .section.section-light-alt .lci-pull,
body.ios-theme .section.section-light .lci-example,
body.ios-theme .section.section-light-alt .lci-example,
body.ios-theme .section.section-light .lci-example .lci-sem,
body.ios-theme .section.section-light .lci-example .lci-sem-sub,
body.ios-theme .section.section-light .lci-example .lci-note,
body.ios-theme .section.section-light .lci-example .lci-line {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme .section.section-light .lci-example .lci-score {
  color: #5a4a92 !important;
  -webkit-text-fill-color: #5a4a92 !important;
}
body.ios-theme .section.section-light .feature-block.feature-bordered p,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered p,
body.ios-theme .section.section-light .lci-example .lci-sem-sub,
body.ios-theme .section.section-light .lci-example .lci-note,
body.ios-theme .section.section-light .lci-example .lci-line {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
body.ios-theme .section.section-light .feature-block.feature-bordered h2 i,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered h2 i,
body.ios-theme .section.section-light .feature-block.feature-bordered h3 i,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered h3 i {
  color: var(--ios-indigo) !important;
  -webkit-text-fill-color: var(--ios-indigo) !important;
}
body.ios-theme .section.section-light .feature-block.feature-bordered a:not(.btn),
body.ios-theme .section.section-light-alt .feature-block.feature-bordered a:not(.btn),
body.ios-theme .section.section-light .lci-example a {
  color: var(--ios-indigo) !important;
  -webkit-text-fill-color: var(--ios-indigo) !important;
}
body.ios-theme .section.section-light .feature-block.feature-bordered .browser-badge,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered .browser-badge,
body.ios-theme .section.section-light .feature-block.feature-bordered .browser-badge span:last-child,
body.ios-theme .section.section-light-alt .feature-block.feature-bordered .browser-badge span:last-child {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme .section.section-light .tool-info-link,
body.ios-theme .section.section-light-alt .tool-info-link {
  color: #636366 !important;
  -webkit-text-fill-color: #636366 !important;
}
body.ios-theme .section.section-light .tool-info-link:hover,
body.ios-theme .section.section-light-alt .tool-info-link:hover {
  color: var(--ios-indigo) !important;
  -webkit-text-fill-color: var(--ios-indigo) !important;
}

/* Hub columns + tools mirror on light sections */
body.ios-theme .section.section-light .hub-three-cols .col,
body.ios-theme .section.section-light .three-cols .col,
body.ios-theme .section.section-light-alt .hub-three-cols .col,
body.ios-theme .section.section-light-alt .three-cols .col,
body.ios-theme .section.section-light .tools-mirror-more .nav-more-group,
body.ios-theme .section.section-light-alt .tools-mirror-more .nav-more-group {
  color: #1c1c1e !important;
}
body.ios-theme .section.section-light .hub-three-cols .col h3,
body.ios-theme .section.section-light .three-cols .col h3,
body.ios-theme .section.section-light .hub-three-cols .col p,
body.ios-theme .section.section-light .three-cols .col p,
body.ios-theme .section.section-light .hub-three-cols .col li,
body.ios-theme .section.section-light .three-cols .col li,
body.ios-theme .section.section-light .hub-three-cols .col .col-subtitle,
body.ios-theme .section.section-light .three-cols .col .col-subtitle,
body.ios-theme .section.section-light .hub-three-cols .col .col-tool-group-title,
body.ios-theme .section.section-light .three-cols .col .col-tool-group-title,
body.ios-theme .section.section-light .hub-three-cols .col .tools-muted,
body.ios-theme .section.section-light .three-cols .col .tools-muted,
body.ios-theme .section.section-light .tools-mirror-more .nav-more-heading,
body.ios-theme .section.section-light .tools-mirror-more .nav-more-group p {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme .section.section-light .hub-three-cols .col p,
body.ios-theme .section.section-light .three-cols .col p,
body.ios-theme .section.section-light .hub-three-cols .col .tools-muted,
body.ios-theme .section.section-light .three-cols .col .tools-muted {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
body.ios-theme .section.section-light .hub-three-cols .col a:not(.btn),
body.ios-theme .section.section-light .three-cols .col a:not(.btn),
body.ios-theme .section.section-light .tools-mirror-more .nav-more-group a {
  color: var(--ios-indigo) !important;
  -webkit-text-fill-color: var(--ios-indigo) !important;
}

/* LCI dashboard on cosmic/ios-theme — white panels, dark fields */
body.ios-theme main.section.section-light .lci-dash,
body.ios-theme .section.section-light .lci-dash {
  color: #1a1a2e !important;
}
body.ios-theme .lci-dash .lci-card {
  background: #fff !important;
  border: 1px solid rgba(106, 90, 205, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 28px rgba(38, 33, 82, 0.08) !important;
}
body.ios-theme .lci-dash input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body.ios-theme .lci-dash textarea,
body.ios-theme .lci-dash select {
  background: #fff !important;
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
  border: 1px solid rgba(73, 73, 102, 0.35) !important;
  box-shadow: none !important;
}
body.ios-theme .lci-dash input::placeholder,
body.ios-theme .lci-dash textarea::placeholder {
  color: #6f7482 !important;
  -webkit-text-fill-color: #6f7482 !important;
  opacity: 1 !important;
}

/* Learn Index + other white editorial panels — beat global glass inputs */
body.ios-theme :is(
    .learn-wizard-card,
    .learn-student-bubble,
    .learn-student-own,
    .tools-icon-card,
    .contact-block,
    .check-card,
    .info-index-container,
    .store-modal > div:first-of-type
  ) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body.ios-theme :is(
    .learn-wizard-card,
    .learn-student-bubble,
    .learn-student-own,
    .tools-icon-card,
    .contact-block,
    .check-card,
    .info-index-container
  ) textarea,
body.ios-theme :is(
    .learn-wizard-card,
    .learn-student-bubble,
    .contact-block,
    .check-card,
    .info-index-container
  ) select {
  background: #fff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}
body.ios-theme .learn-wizard-card,
body.ios-theme .learn-student-bubble,
body.ios-theme .learn-student-own {
  color: #1c1c1e !important;
}
body.ios-theme .learn-wizard-card :is(h2, h3, p, li, label, span, .learn-section-title, .learn-wizard-sub),
body.ios-theme .learn-student-bubble,
body.ios-theme .learn-student-own :is(h3, p, li) {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme .learn-wizard-card .learn-wizard-sub,
body.ios-theme .learn-student-scenario-head .sub,
body.ios-theme .learn-student-noise-note {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}

/* Tools hub cards — keep dark labels (global accent link color on <a>) */
body.ios-theme .tools-icon-card,
body.ios-theme .tools-icon-card .tools-icon-label,
body.ios-theme .tools-icon-card .tools-icon-sub {
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
}
body.ios-theme .tools-icon-card .tools-icon-sub {
  color: #565d74 !important;
  -webkit-text-fill-color: #565d74 !important;
}
body.ios-theme .tools-names-dl dt,
body.ios-theme .tools-icon-grid-title {
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
}
body.ios-theme .tools-names-dl dd,
body.ios-theme .tools-icon-grid-note {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
}

/* Overflow: long words, symbols, labels — fit inside cards/grids */
.tools-icon-label,
.tools-icon-sub,
.tools-names-dl dt,
.tools-names-dl dd,
.hub-three-cols .col h3,
.three-cols .col h3,
.section-layer-title,
.feature-block.feature-bordered h2,
.feature-block.feature-bordered h3,
.page-hub .col h3,
.grigsi-top-bar .btn-nav,
.grigsi-top-bar summary.btn-nav.nav-more-summary,
.index-switcher-link {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.tools-icon-card,
.tools-icon-grid,
.hub-three-cols .col,
.three-cols .col,
.feature-block.feature-bordered,
.page-hub .col,
.page-hub .content-narrow,
.lci-dash .lci-card,
.container-same-width {
  min-width: 0;
}
.tools-icon-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nav-more-link .nav-more-link-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tools-names-dl {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 600px) {
  .tools-names-dl {
    grid-template-columns: 1fr;
  }
  .tools-names-dl dt,
  .tools-names-dl dd {
    max-width: 100%;
  }
}

/* Governance + feedback — white forms on cosmic ios-theme */
body.ios-theme .gov-container,
body.ios-theme .gov-container .create-section,
body.ios-theme .gov-container .gov-faq,
body.ios-theme .gov-container .gov-cta-box,
body.ios-theme .feedback-form {
  color: #1c1c1e !important;
}
body.ios-theme .gov-container :is(h1, h2, h3, h4, p, li, label, .back-link),
body.ios-theme .feedback-form :is(h1, h2, h3, p, label) {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme .gov-container .back-link,
body.ios-theme .gov-container .gov-faq,
body.ios-theme .gov-container .gov-header p {
  color: #444 !important;
  -webkit-text-fill-color: #444 !important;
}
body.ios-theme .gov-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ios-theme .gov-container textarea,
body.ios-theme .gov-container select,
body.ios-theme .feedback-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ios-theme .feedback-form textarea,
body.ios-theme .feedback-form select {
  background: #fff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}
body.ios-theme .gov-container input::placeholder,
body.ios-theme .gov-container textarea::placeholder,
body.ios-theme .feedback-form textarea::placeholder {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
  opacity: 1 !important;
}

/* Hero outline buttons on dark gradient (how, trust-index, live-check-index, …) */
body.ios-theme .hero .btn.btn-outline,
body.ios-theme .hero a.btn-outline {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
body.ios-theme .hero .btn.btn-outline:hover,
body.ios-theme .hero a.btn-outline:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}

/* Hub pages: pastel hero — dark copy (not white-on-light); skip dark-strip heroes */
body.ios-theme.page-hub:not(.developer-page) .hero .hero-title-single,
body.ios-theme.page-hub:not(.developer-page) .hero .hero-title,
body.ios-theme.page-hub:not(.developer-page) .hero .hero-subtitle,
body.ios-theme.page-hub:not(.developer-page) .hero .hero-subtitle-bottom {
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
}
body.ios-theme.page-hub:not(.developer-page) .hero .hero-subtitle-bottom {
  color: #3a3a42 !important;
  -webkit-text-fill-color: #3a3a42 !important;
}
body.ios-theme.developer-page .hero .hero-title-single,
body.ios-theme.developer-page .hero .hero-title,
body.ios-theme.developer-page .hero .hero-subtitle,
body.ios-theme.developer-page .hero .hero-subtitle-bottom {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

/* Proof + community white panels — beat glass inputs */
body.ios-theme .proof-textarea,
body.ios-theme .proof-expected-area,
body.ios-theme .proof-panel textarea,
body.ios-theme .community-option select,
body.ios-theme #community-extensions,
body.ios-theme #community-duration {
  background: #fff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}
body.ios-theme .proof-textarea::placeholder,
body.ios-theme .proof-expected-area::placeholder {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
}

/* Governance hub + create — light shell (like page-gov-vote) */
body.ios-theme.page-gov-hub {
  background: #f2f2f7 !important;
  animation: none !important;
  color: #1c1c1e !important;
}
body.ios-theme.page-gov-hub .gov-container,
body.ios-theme.page-gov-hub .gov-header h1,
body.ios-theme.page-gov-hub .gov-header p,
body.ios-theme.page-gov-hub .back-link,
body.ios-theme.page-gov-hub .gov-faq,
body.ios-theme.page-gov-hub .gov-faq h4,
body.ios-theme.page-gov-hub .gov-faq p {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme.page-gov-hub .gov-header p,
body.ios-theme.page-gov-hub .back-link,
body.ios-theme.page-gov-hub .gov-faq {
  color: #444 !important;
  -webkit-text-fill-color: #444 !important;
}
body.ios-theme.page-gov-hub .gov-header h1 {
  color: var(--purple, #A693EF) !important;
  -webkit-text-fill-color: var(--purple, #A693EF) !important;
}

/* Survey vote mode — light shell (mirror page-poll cards-on-dark pattern) */
body.ios-theme.page-survey {
  background: #f2f2f7 !important;
  animation: none !important;
  color: #1c1c1e !important;
}
body.ios-theme.page-survey .survey-page h1,
body.ios-theme.page-survey #survey-question,
body.ios-theme.page-survey .survey-foot {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme.page-survey .survey-foot {
  color: #636366 !important;
  -webkit-text-fill-color: #636366 !important;
}
body.ios-theme.page-survey .survey-foot a {
  color: var(--purple, #7a6bd8) !important;
  -webkit-text-fill-color: var(--purple, #7a6bd8) !important;
}

/* Noise Text — long extracted strings */
.ni-list p,
.ni-sentence-row,
#ni-rule-extracted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Noise Text bridge note on cosmic bg */
body.ios-theme .ni-bridge-note {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}
body.ios-theme .ni-bridge-note a {
  color: var(--liquid-accent-1, #ffc64b) !important;
}

/* Developer API tables — horizontal scroll on mobile */
.dev-section .dev-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pricing / trust-index / proof grids */
.home-business-model-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.proof-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ti-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ti-card {
  min-width: 0;
}
@media (max-width: 640px) {
  body.ios-theme main .pricing-table .price {
    white-space: normal;
  }
}

/* Community CTA row — wrap on narrow screens */
.community-options-row,
.community-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.community-cta-row .btn {
  margin-left: 0 !important;
}

/* Learn student bubble — long strings */
.learn-student-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Container unlock policy codes */
.unlock-policy code,
.unlock-key-pub {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Link Reach pledge — stronger contrast on dark */
.lr-pledge {
  color: #4ecdc4 !important;
}

/* Extension uninstalled reinstall hover */
body.ios-theme .btn-reinstall:hover {
  background: #6b62d4 !important;
  color: #fff !important;
}

/* Governance create — stack cramped grids on phone */
@media (max-width: 480px) {
  .gov-container .option-row,
  .gov-container .revote-row {
    grid-template-columns: 1fr !important;
  }
}

/* Admin tables — horizontal scroll (standard pattern) */
body.admin-console .table-scroll,
body.ios-theme.admin-console .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
body.admin-console .table-scroll table,
body.ios-theme.admin-console .table-scroll table {
  min-width: 520px;
}
body.admin-console .data-table,
body.ios-theme.admin-console .data-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.admin-console ul li,
body.ios-theme.admin-console ul li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Share hub — light shell when main site nav is present */
body.ios-theme.share-hub {
  background: #f2f2f7 !important;
  animation: none !important;
  color: #1c1c1e !important;
}
body.ios-theme.share-hub .popup-box,
body.ios-theme.share-hub .confirm-section,
body.ios-theme.share-hub .main-box,
body.ios-theme.share-hub #title,
body.ios-theme.share-hub #subtitle,
body.ios-theme.share-hub .section,
body.ios-theme.share-hub .section-title,
body.ios-theme.share-hub .label {
  color: #1c1c1e !important;
}
body.ios-theme.share-hub #title {
  color: #A693EF !important;
  -webkit-text-fill-color: #A693EF !important;
}
body.ios-theme.share-hub #subtitle,
body.ios-theme.share-hub .section-title {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
}
body.ios-theme.share-hub input,
body.ios-theme.share-hub textarea,
body.ios-theme.share-hub select {
  background: #fff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid #ccc !important;
  box-shadow: none !important;
}

/* Muted helper copy on light panels — minimum readable gray */
.section.section-light [style*="color:#888"],
.section.section-light [style*="color: #888"],
.section.section-light [style*="color:#999"],
.section.section-light [style*="color: #999"],
body.ios-theme.page-survey .survey-foot,
.popup-box [style*="color:#888"],
.popup-box [style*="color: #888"] {
  color: #5c5c5c !important;
  -webkit-text-fill-color: #5c5c5c !important;
}

/* iOS PWA install steps — local software overlays */
.lf-soft-download-meta .grigsi-ios-install-lead,
.gf-soft-download-meta .grigsi-ios-install-lead,
.gi-soft-download-meta .grigsi-ios-install-lead {
  margin: 0 0 10px;
  font-weight: 600;
  color: #333;
}
.grigsi-ios-install-steps {
  margin: 0 0 10px;
  padding-left: 1.25rem;
  line-height: 1.55;
}
.grigsi-ios-install-steps li { margin-bottom: 6px; }
.grigsi-ios-install-tip {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: #666;
}
.grigsi-ios-install-feature {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
  color: #555;
}

/* macOS DMG install — local software overlays */
.grigsi-macos-install {
  margin: 12px 0 0;
  border: 1px solid #e0e0e8;
  border-radius: 10px;
  background: #f8f8fb;
}
.grigsi-macos-install > summary {
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #2a1d45;
  cursor: pointer;
  list-style: none;
}
.grigsi-macos-install > summary::-webkit-details-marker { display: none; }
.grigsi-macos-install > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.grigsi-macos-install[open] > summary::before { transform: rotate(90deg); }
.grigsi-macos-install-body {
  padding: 0 12px 12px;
  font-size: 0.86rem;
  color: #555;
  line-height: 1.5;
}
.grigsi-macos-install-steps {
  margin: 0 0 10px;
  padding-left: 1.2rem;
}
.grigsi-macos-install-steps li { margin-bottom: 6px; }
.grigsi-macos-install-term {
  margin-top: 8px;
  border: 1px dashed #c4583a;
  border-radius: 8px;
  background: #fff7f4;
}
.grigsi-macos-install-term[open] {
  border-color: #d8d8de;
  background: #fff;
}
.grigsi-macos-install-term > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.84rem;
  color: #b85234;
  cursor: pointer;
  list-style: none;
}
.grigsi-macos-install-term[open] > summary {
  color: #444;
}
.grigsi-macos-install-term > summary::-webkit-details-marker { display: none; }
.grigsi-macos-install-term > summary::before {
  content: none;
}
.grigsi-macos-install-term > summary::after {
  content: "▼";
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1;
  color: #b85234;
  transition: transform 0.15s ease, color 0.15s ease;
}
.grigsi-macos-install-term[open] > summary::after {
  content: "▼";
  transform: rotate(180deg);
  color: #888;
}
.grigsi-macos-install-term-body {
  max-height: min(38dvh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: 4px;
}
.grigsi-macos-install-term-lead,
.grigsi-macos-install-term-label {
  margin: 0 10px 6px;
  font-size: 0.82rem;
}
.grigsi-macos-install-cmd-wrap {
  position: relative;
  margin: 0 10px 10px;
}
.grigsi-macos-install-cmd {
  margin: 0;
  padding: 8px 72px 8px 10px;
  background: #1e1e2e !important;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #e8e8f0 !important;
  -webkit-text-fill-color: #e8e8f0 !important;
}
.grigsi-macos-install-cmd-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #e8e8f0;
  font: 600 0.72rem/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.grigsi-macos-install-cmd-copy:hover,
.grigsi-macos-install-cmd-copy:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  outline: none;
}
.grigsi-macos-install-cmd-copy.is-copied {
  border-color: rgba(125, 255, 200, 0.45);
  color: #b8f0df;
}
.grigsi-macos-install-cmd code {
  color: #e8e8f0 !important;
  -webkit-text-fill-color: #e8e8f0 !important;
  background: transparent !important;
  white-space: pre-wrap;
  word-break: break-all;
}
/* Beat ios-theme / overlay meta colour on dark terminal blocks (AVP etc.) */
body.ios-theme .gf-soft-overlay .grigsi-macos-install-cmd,
body.ios-theme .gi-soft-overlay .grigsi-macos-install-cmd,
body.ios-theme .ac-soft-overlay .grigsi-macos-install-cmd,
body.ios-theme .avp-soft-overlay .grigsi-macos-install-cmd,
body.ios-theme .lf-soft-overlay .grigsi-macos-install-cmd,
body.ios-theme .payment-macos-install .grigsi-macos-install-cmd,
body.ios-theme .gf-soft-overlay .grigsi-macos-install-cmd code,
body.ios-theme .gi-soft-overlay .grigsi-macos-install-cmd code,
body.ios-theme .ac-soft-overlay .grigsi-macos-install-cmd code,
body.ios-theme .avp-soft-overlay .grigsi-macos-install-cmd code,
body.ios-theme .lf-soft-overlay .grigsi-macos-install-cmd code,
body.ios-theme .payment-macos-install .grigsi-macos-install-cmd code {
  color: #e8e8f0 !important;
  -webkit-text-fill-color: #e8e8f0 !important;
  background-color: #1e1e2e !important;
}
.grigsi-macos-install-tip {
  margin: 0 10px 10px;
  font-size: 0.8rem;
  color: #666;
}
.grigsi-soft-file {
  color: #2a1d45;
  font-weight: 600;
  margin: 0 0 8px;
}
.payment-macos-install {
  margin: 0 0 16px;
  max-width: 520px;
  max-height: min(70dvh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}