/* Skin modelled on the layout of omneseducation.com: deep purple header and hero with curved
   swooshes, a white search card overlapping the hero, wide uppercase headings with a short
   rule above, violet pill buttons, dark tiles with a round arrow, grey background swoosh.
   Loaded last; open the demo with ?skin=icg for the previous ICG look. */
:root[data-theme='light'] {
  --om-deep: #190038;
  --om-violet: #5d0282;
  --om-plum: #3e0056;
  --om-lilac: #d7b6f0;
  --md-primary: var(--om-violet);
  --md-primary-container: #f1e4fa;
  --md-on-primary-container: #2a0040;
  --md-primary-80: var(--om-lilac);
  --md-secondary: var(--om-deep);
  --md-secondary-container: #ebe5f2;
  --md-dark: var(--om-deep);
  --md-on-dark-variant: #cdc3dc;
  --md-on-surface: var(--om-deep);
  --md-on-surface-variant: #3d3550;
  --md-surface-container-low: #faf8fc;
  --md-surface-container: #f4f1f8;
  --md-surface-container-high: #ece8f2;
  --md-outline-variant: #d6d0de;
  --md-inverse-surface: #2a1f3d;
  --accent: var(--om-violet);
  --petrol: var(--om-deep);
  --fg: var(--om-deep);
  --fg-2: #3d3550;
  --fg-3: #686179;
  --border: #d6d0de;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-wide: 'Archivo', 'Inter', system-ui, sans-serif;
}
body { overflow-x: hidden; }

/* header */
.site, .hero { background: var(--om-deep); }
.logo { flex-direction: column; align-items: flex-start; gap: 2px; }
.logo b { font-family: var(--font-wide); font-stretch: 125%; font-weight: 600; font-size: 30px; letter-spacing: 0.02em; line-height: 1; }
.logo span { font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: #fff; }
.textnav .rail-item { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.textnav .rail-item[aria-current='true'] { text-decoration-color: var(--om-lilac); }
.textnav .count:not(:empty) { background: #8e44c4; }
.persona { color: var(--md-on-dark-variant); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.persona select { background: rgba(146, 104, 190, 0.35); border: 0; border-radius: 22px; padding: 6px 14px; color: #fff; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* lifecycle timeline on purple */
.timeline li::before { background: #6e568c; }
.timeline li.past::before, .timeline li.now::before { background: #b98be6; }
.timeline .past .dot { background: #b98be6; border-color: #b98be6; }
.timeline .past .dot::after { border-color: var(--om-deep); }
.timeline .now .dot { background: #fff; border: 5px solid #b98be6; box-shadow: 0 0 0 5px rgba(185, 139, 230, 0.3); }
.timeline .next .dot { background: var(--om-deep); border-color: #8f7aa8; }
.timeline .lbl { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.timeline .next .lbl { color: #d9d1e4; font-weight: 500; }
.timeline .sub { color: #b9adc9; text-transform: none; letter-spacing: 0; font-size: 12px; }
.timeline .now .sub { color: #e3cdf7; }

/* hero with curved swooshes */
.streaks i { filter: none !important; opacity: 1 !important; transform-origin: center; }
.streaks i:nth-child(1) { width: 980px; height: 980px; left: 40%; top: -420px; border-radius: 50%; background: transparent; border: 110px solid var(--om-plum); opacity: 0.75 !important; transform: none; }
.streaks i:nth-child(2) { width: 1200px; height: 640px; left: -380px; top: -400px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.55); transform: rotate(-24deg); }
.streaks i:nth-child(3) { width: 760px; height: 1300px; left: 62%; top: -340px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); transform: rotate(22deg); }
.streaks i:nth-child(4) { width: 720px; height: 240px; left: 58%; top: 62%; border-radius: 0 220px 0 220px; background: #4b2a6b; opacity: 0.8 !important; transform: skewX(-32deg); }
.hero h1 { font-family: var(--font-wide); font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(26px, 3.3vw, 44px); line-height: 1.1; letter-spacing: 0.01em; max-width: 900px; }
.hero-kicker { color: var(--om-lilac); font-weight: 700; font-size: 12px; }
body[data-view='home'] .hero-inner { padding-bottom: 150px; }

/* white search card overlapping the hero */
.ask-card { position: relative; z-index: 2; margin: -150px 0 64px; background: #fff; box-shadow: 0 10px 28px rgba(25, 0, 56, 0.14); }
.ask-card #ask { display: grid; grid-template-columns: 1fr auto; margin: 0 !important; gap: 0; }
.ask-card .ac-label { grid-column: 1; grid-row: 1; padding: 20px 28px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--om-deep); }
.ask-card #ask .field { grid-column: 1; grid-row: 2; border: 0; border-radius: 0; background: transparent; min-height: 48px; padding: 6px 28px 20px; font-size: 17px; color: var(--om-deep); }
.ask-card #ask .field:focus { outline: none; box-shadow: inset 0 -3px 0 var(--om-violet); }
.ask-card #ask .btn-primary { grid-column: 2; grid-row: 1 / span 2; border-radius: 0; min-height: 96px; padding: 0 36px; display: flex; align-items: center; gap: 18px; text-align: left; line-height: 1.35; }
.ask-card #ask .btn-primary svg { width: 30px; height: 30px; flex: none; }

/* headings */
.section-head h2 { font-family: var(--font-wide); font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.2; letter-spacing: 0.01em; color: var(--om-deep); }
.section-head h2::before { content: ''; display: block; width: 80px; height: 1px; background: var(--om-deep); margin-bottom: 26px; }
.letter-grid .sub { color: var(--om-deep); font-weight: 600; }

/* buttons */
.btn-primary { background: var(--om-violet); border-color: var(--om-violet); border-radius: 26px; text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; padding: 12px 32px; }
.btn { border-color: var(--om-violet); color: var(--om-violet); border-radius: 26px; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.btn:hover { background: var(--om-violet); color: #fff; border-color: var(--om-violet); }
.link { color: var(--om-violet); }
.list > button::before { color: var(--om-violet); }

/* AI moments as dark tiles with a round arrow */
.try .list { border-top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.try .list > button { position: relative; overflow: hidden; min-height: 190px; padding: 20px; border: 0; border-radius: 4px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; background: linear-gradient(160deg, var(--om-violet) 0%, var(--om-deep) 85%); color: #fff; font-size: 15px; line-height: 1.4; }
.try .list > button::before { content: ''; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: none; }
.try .list > button:hover { color: #fff; filter: brightness(1.15); }
.try .list > button span[dir] { order: 1; position: relative; }
.try .list > button .meta { order: 2; display: flex !important; width: 100%; margin-left: 0; justify-content: space-between; align-items: center; color: #fff !important; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.try .list > button .meta::after { content: '→'; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--om-violet); display: grid; place-items: center; font-size: 15px; text-transform: none; }

/* grey background swoosh */
.content { position: relative; isolation: isolate; }
.content::before { content: ''; position: absolute; z-index: -1; top: 320px; right: -300px; width: 980px; height: 720px; border-radius: 60% 40% 0 60%; background: #f4f3f7; transform: rotate(-18deg); pointer-events: none; }

/* footer */
.site-foot { background: linear-gradient(135deg, var(--om-deep) 0%, var(--om-plum) 100%); position: relative; overflow: hidden; }
.site-foot::before { content: ''; position: absolute; right: -200px; top: -260px; width: 700px; height: 700px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); pointer-events: none; }
.foot-inner h2 { font-family: var(--font-wide); font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 32px); }
.foot-note { border-top-color: rgba(255, 255, 255, 0.2); color: #cdc3dc; }

@media (max-width: 860px) {
  .ask-card { margin: -60px 0 32px; }
  .ask-card #ask .btn-primary { padding: 0 18px; }
  .ask-card #ask .btn-primary span { display: none; }
  .askbar, body[data-view='home'] .askbar { display: none !important; }
  body[data-view='home'] .hero-inner { padding-bottom: 24px; }
  .content::before { display: none; }
  .try .list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .try .list > button { min-height: 150px; padding: 14px; font-size: 14px; }
}
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.svc { background: #fff; border: 1px solid #ddd6e6; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.svc.is-on { border-color: #6b3fa0; box-shadow: 0 0 0 1px #6b3fa0 inset; }
.svc header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.svc h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.svc p { margin: 0; }
.svc-data, .svc-last { font-size: 14px; color: #5b5568; }
.svc-status { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.switch { flex: none; width: 52px; height: 32px; min-height: 32px; border-radius: 16px; border: 2px solid #79747e; background: #e7e0ec; position: relative; padding: 0; cursor: pointer; }
.switch span { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: #79747e; transition: all .15s; }
.switch[aria-checked="true"] { background: #6b3fa0; border-color: #6b3fa0; }
.switch[aria-checked="true"] span { left: 26px; top: 4px; width: 24px; height: 24px; background: #fff; }