@import url("css/grigsi-help.css");

:root{
  --primary:   #A693EF;
  --success:   #7CD17B;
  --warning:   #FFC64B;
  --danger:    #F08B83;
  --neutral:   #83819B;
  --surface:   #5A7064;
  --purple:    #A693EF;
  --green:     #7CD17B;
  --red:       #F08B83;
  --gray:      #83819B;
  --yellow:    #FFC64B;
  --yellow-btn-text: #5c4d0a;
  --blue:      #A693EF;
  --bg: #ffffff;
  --text: #1a1a24;
  --dark:      #1a1a2e;
  --trust-dark: #0f1628;
  --trust-blue: #1e3a5f;
  --shield-gold: #FFC64B;
  --safe-green: #7CD17B;
  --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,149,0,.14);
}

/* 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:#fff;
  border-bottom:1px solid #eee;
  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}
.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}
.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:#8177F0!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(--green);
  color:#333;
  font-weight:700;
  font-size:0.7rem;
  text-decoration:none;
  border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  line-height:1.15;
  vertical-align:middle;
}
.grigsi-top-bar .btn-nav:hover{background:var(--yellow);color:#333}
.grigsi-top-bar .btn-nav:active,.grigsi-top-bar .btn-nav:focus{background:var(--yellow);color:#fff}
.grigsi-top-bar .btn-nav.btn-nav-yellow{background:var(--warning);color:#333}
.grigsi-top-bar .btn-nav.btn-nav-yellow:hover{background:#EAB44D;color:#333}
.grigsi-top-bar .btn-nav.btn-nav-yellow:active,.grigsi-top-bar .btn-nav.btn-nav-yellow:focus{background:#D9A63E;color:#333}
/* Keep Info Noise Index + About visually same as standard nav buttons. */
.grigsi-top-bar .nav-buttons a[href="/info-index/"].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(--green);
  color:#333;
}
.grigsi-top-bar .nav-buttons a[href="/info-index/"].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(--yellow);
  color:#333;
}
.grigsi-top-bar .nav-buttons a[href="/info-index/"].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="/info-index/"].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(--yellow);
  color:#fff;
}
.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(255,149,0,.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:#ececf0;
  border:1px solid rgba(0,0,0,.1);
  border-radius:11px;
  box-shadow:0 12px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  text-align:left;
  color:#1a1a24;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.28) transparent;
}
.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 tint = colour zone; chips stay stronger hue inside */
.grigsi-top-bar .nav-more-group-indexes{
  background:rgba(0,122,255,.09);
  border-color:rgba(0,122,255,.2);
}
.grigsi-top-bar .nav-more-group-product{
  background:rgba(124,209,123,.12);
  border-color:rgba(45,120,60,.22);
}
.grigsi-top-bar .nav-more-group-build{
  background:rgba(129,119,240,.1);
  border-color:rgba(90,80,180,.2);
}
.grigsi-top-bar .nav-more-group-community{
  background:rgba(255,149,0,.1);
  border-color:rgba(200,100,0,.22);
}
.grigsi-top-bar .nav-more-group-about{
  background:rgba(25,64,37,.06);
  border-color:rgba(25,64,37,.16);
}
/* 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{
  color:#3d5a80;
}
.grigsi-top-bar .nav-more-link .nav-more-link-icons .fa-coins{
  color:#b8860b;
}
.grigsi-top-bar .nav-more-group-indexes .nav-more-link{
  background:rgba(0,122,255,.1);
  border-color:rgba(0,122,255,.28);
  color:#053063;
}
.grigsi-top-bar .nav-more-group-indexes .nav-more-link:hover{
  background:rgba(0,122,255,.18);
  color:#021a38;
}
.grigsi-top-bar .nav-more-group-product .nav-more-link{
  background:rgba(124,209,123,.18);
  border-color:rgba(45,120,60,.28);
  color:#145214;
}
.grigsi-top-bar .nav-more-group-product .nav-more-link:hover{
  background:rgba(124,209,123,.28);
  color:#0d3a0d;
}
.grigsi-top-bar .nav-more-group-build .nav-more-link{
  background:rgba(129,119,240,.14);
  border-color:rgba(90,80,180,.28);
  color:#2d2466;
}
.grigsi-top-bar .nav-more-group-build .nav-more-link:hover{
  background:rgba(129,119,240,.22);
  color:#1a1540;
}
.grigsi-top-bar .nav-more-group-community .nav-more-link{
  background:rgba(255,149,0,.12);
  border-color:rgba(200,100,0,.25);
  color:#6b3d00;
}
.grigsi-top-bar .nav-more-group-community .nav-more-link:hover{
  background:rgba(255,149,0,.2);
  color:#4a2900;
}
.grigsi-top-bar .nav-more-group-about .nav-more-link{
  background:rgba(25,64,37,.08);
  border-color:rgba(25,64,37,.2);
  color:#0d2818;
}
.grigsi-top-bar .nav-more-group-about .nav-more-link:hover{
  background:rgba(25,64,37,.14);
  color:#06140c;
}
.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:#fff !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:#fff !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:#fff !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}
/* 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-green{
  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){
  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(124,209,123,.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-green{
  background:var(--green);
  color:#fff;
  border:none;
  box-shadow:var(--shadow-btn);
}
.btn-hero-green:hover{box-shadow:0 4px 12px rgba(124,209,123,.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(124,209,123,.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%, #5cb85c 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 .btn-outline{margin-left:10px}
.btn-group .btn-outline:first-of-type{margin-left:0}

/* 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-tabs{
  display:flex;
  background:#1f1f35;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.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-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);
}

/* Services 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(124,209,123,.15);
  transform:translateY(-4px);
}
.service-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--green) 0%, #5cb85c 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(124,209,123,.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);
}

/* 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:#b8860b;
  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-green:focus{
  outline:none;
}
.btn-outline:focus{background:var(--purple);color:#fff}
.btn-primary:focus,
.btn-hero-green:focus{background:var(--green);color:#fff}
.btn-hero-yellow:focus{background:var(--yellow);color:#fff}

/* ========================================
   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:#5cb85c}
.result-score .score-number.negative{color:#e67e22}
.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(124,209,123,.12);color:var(--green)}
.result-status.danger{background:rgba(255,126,112,.12);color:var(--red)}
.result-status.positive{background:rgba(92,184,92,.12);color:#5cb85c}
.result-status.negative{background:rgba(230,126,34,.12);color:#e67e22}
.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-green);
  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(16,185,129,.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(16,185,129,.15);
  color:var(--safe-green);
}

/* 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-green)}
.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-green)}
.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-green)}
.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(16,185,129,.2);color:var(--safe-green)}
.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-green)}
.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-green)}

.alert-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}
.btn-safe{
  padding:10px 20px;
  background:var(--safe-green);
  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(16,185,129,.2);
  color:var(--safe-green);
  padding:4px 10px;
  border-radius:12px;
}
.space-tabs-bar{
  display:flex;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.space-tabs-bar span{
  flex:1;
  padding:12px;
  text-align:center;
  color:rgba(255,255,255,.5);
  transition:all .2s;
  cursor:pointer;
}
.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(16,185,129,.2);
  color:var(--safe-green);
  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-green);
}

/* 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 — Info Noise Index: 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){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}
  #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-tabs{flex-wrap:wrap}
  .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:#FF9500;
  --ios-indigo:#194025;
  --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 green + 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%,#0d2818 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: dark green gradient aligned with purple-bar / hero (all ios-theme pages) */
body.ios-theme .grigsi-top-bar{
  background:linear-gradient(180deg,var(--ios-indigo) 0%,#0d2818 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 2px 12px rgba(0,0,0,.14);
}
body.ios-theme .grigsi-top-bar .logo{color:var(--ios-orange)!important}
body.ios-theme .grigsi-top-bar .btn-nav{
  background:var(--ios-blue)!important;
  color:#fff!important;
  border-radius:var(--ios-radius-btn);
  box-shadow:var(--ios-shadow-subtle);
}
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{background:var(--ios-orange)!important;color:#fff!important}
body.ios-theme .grigsi-top-bar .btn-nav.btn-nav-yellow{background:var(--ios-orange)!important;color:#fff!important}
body.ios-theme .grigsi-top-bar .btn-nav.btn-nav-yellow:hover{opacity:.9}
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/info-index/"].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(--ios-blue)!important;
  color:#fff!important;
}
body.ios-theme .grigsi-top-bar .nav-buttons a[href="/info-index/"].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="/info-index/"].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="/info-index/"].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(--ios-orange)!important;
  color:#fff!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(255,149,0,.55)!important;
  outline-offset:1px;
}
body.ios-theme .purple-bar{
  background:linear-gradient(180deg,var(--ios-indigo) 0%,#0d2818 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 .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 .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:#fff!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:#fff!important}
body.ios-theme a.btn-primary,.ios-theme .btn.btn-primary{background:var(--ios-orange)!important;color:#fff!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: #FF9500;
  --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: 28; }
@property --lg-h2 { syntax: '<number>'; inherits: true; initial-value: 220; }

body.ios-theme{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,149,0,.25) 0%, rgba(255,149,0,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%);
  /* 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; }
}

body.ios-theme a{ color: var(--liquid-accent-1) !important; }

/* “More” menu: light panel + chip links — must beat global body.ios-theme link color */
body.ios-theme .grigsi-top-bar .nav-more-panel{
  background:#ececf0!important;
  border:1px solid rgba(0,0,0,.1)!important;
  box-shadow:0 16px 48px rgba(0,0,0,.22)!important;
  color:#1a1a24!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{
  background:rgba(0,122,255,.1)!important;
  border-color:rgba(0,122,255,.22)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-product{
  background:rgba(124,209,123,.14)!important;
  border-color:rgba(45,120,60,.24)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-build{
  background:rgba(129,119,240,.12)!important;
  border-color:rgba(90,80,180,.22)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-community{
  background:rgba(255,149,0,.12)!important;
  border-color:rgba(200,100,0,.24)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group.nav-more-group-span{
  background:rgba(0,0,0,.05)!important;
  border-color:rgba(0,0,0,.14)!important;
}
body.ios-theme .grigsi-top-bar .nav-more-panel .nav-more-heading{
  color:#3a3a42!important;
}
body.ios-theme .grigsi-top-bar .nav-more-panel .nav-more-group-soon .nav-more-heading{
  color:#777!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-indexes .nav-more-link{
  background:rgba(0,122,255,.1)!important;
  border-color:rgba(0,122,255,.28)!important;
  color:#053063!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-indexes .nav-more-link:hover{
  background:rgba(0,122,255,.18)!important;
  color:#021a38!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-product .nav-more-link{
  background:rgba(124,209,123,.18)!important;
  border-color:rgba(45,120,60,.28)!important;
  color:#145214!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-product .nav-more-link:hover{
  background:rgba(124,209,123,.28)!important;
  color:#0d3a0d!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-build .nav-more-link{
  background:rgba(129,119,240,.14)!important;
  border-color:rgba(90,80,180,.28)!important;
  color:#2d2466!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-build .nav-more-link:hover{
  background:rgba(129,119,240,.22)!important;
  color:#1a1540!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-community .nav-more-link{
  background:rgba(255,149,0,.12)!important;
  border-color:rgba(200,100,0,.25)!important;
  color:#6b3d00!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-community .nav-more-link:hover{
  background:rgba(255,149,0,.2)!important;
  color:#4a2900!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-about .nav-more-link{
  background:rgba(25,64,37,.08)!important;
  border-color:rgba(25,64,37,.2)!important;
  color:#0d2818!important;
}
body.ios-theme .grigsi-top-bar .nav-more-group-about .nav-more-link:hover{
  background:rgba(25,64,37,.14)!important;
  color:#06140c!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(0,0,0,.05)!important;
  border-color:rgba(0,0,0,.12)!important;
  color:#4a4a50!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(0,0,0,.08)!important;
  color:#2c2c32!important;
}

/* Glass surfaces (major containers) */
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),
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;
}

/* ========== 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: #0d2818 !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) */
body.ios-theme .space-type-block h2,
body.ios-theme .space-type-block p,
body.ios-theme .space-caps,
body.ios-theme .space-caps li{
  color: rgba(255,255,255,.92) !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-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;
}

/* 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;
}

/* Info Noise Index 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;
}

/* 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-green){
  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;
}

/* 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%,#0d2818 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;
}
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;
}

/* ========== 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,149,0,.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: Tools / Services / 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(124, 209, 123, 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, 149, 0, 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;
}