/* OBSEDIA / OPTICAL EDITION
   A sheet of glass is visible because light passes through it, its edge catches
   a reflection, and its shadow separates it from the scene underneath. */
:root {
  --glass-clear: linear-gradient(135deg, #ffffff5c 0%, #ffffff24 48%, #ffffff45 100%);
  --glass-frost: linear-gradient(130deg, #ffffff80 0%, #ffffff47 48%, #ffffff6b 100%);
  --glass-edge: #ffffffc9;
  --glass-shadow: 0 18px 50px #55547712, inset 0 1px 1px #fffffff0, inset 0 -1px 1px #ffffff80;
  --glass-fine-shadow: 0 8px 25px #55547710, inset 0 1px 0 #fffffff0, inset 0 -1px 0 #ffffff8a;
  --glass-blur: blur(18px) saturate(135%);
  --muted: #575869;
}

body {
  background:
    radial-gradient(ellipse 1000px 700px at 5% 19%, #dceaf166, transparent),
    radial-gradient(ellipse 1100px 750px at 94% 30%, #e5dcf399, transparent),
    radial-gradient(ellipse 900px 850px at 16% 70%, #f2ded366, transparent),
    #f5f5fa;
}

/* A transparent optical rail: the scene continues underneath the navigation. */
.site-header {
  background: linear-gradient(115deg, #ffffff54, #ffffff29 50%, #ffffff57);
  border-color: #ffffffd9;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 8px 30px #5554770e, inset 0 1px 1px #fff, inset 0 -1px 1px #ffffff9c;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border-top: 1px solid #ffffffad;
  border-bottom: 1px solid #ffffff61;
  pointer-events: none;
}
.header-inner { position: relative; }
.desktop-nav { gap: 28px; }
.desktop-nav > a, .nav-products > summary { padding-inline: 6px; }
.desktop-nav a[aria-current=page]::after { left: 6px; }
.products-menu {
  width: 368px;
  left: -142px;
  top: 57px;
  padding: 14px;
  background: linear-gradient(140deg, #fafbffcc, #f1effbcc 55%, #e8f1f5bd);
  border: 1px solid #ffffffeb;
  border-radius: 23px;
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  box-shadow: 0 24px 60px #3f365325, inset 0 1px 1px white, inset 0 -1px 1px #ffffffb0;
}
.products-menu a { padding: 11px; border: 1px solid transparent; }
.products-menu a small { display: block; color: #605d70; margin-top: 3px; line-height: 1.55; }
.products-menu a > span:last-child { min-width: 0; font-size: 12px; line-height: 1.4; }
.products-menu .mini-icon { background: var(--glass-clear); box-shadow: var(--glass-fine-shadow); }
.products-menu a:last-child { border-color: #a59dbb29; margin-top: 8px; }
.mobile-nav { position: relative; }
.button {
  background: linear-gradient(155deg, #4c4a60f2, #282733f5 75%);
  border: 1px solid #ffffff63;
  box-shadow: 0 8px 18px #45415620, inset 0 1px 1px #ffffff47, inset 0 -1px 1px #1817215e;
  transition: transform 100ms var(--ease-out);
}
.button.ghost, .button.light, .icon-button {
  background: var(--glass-frost);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-fine-shadow);
}
.button.ghost { color: var(--ink); }
.header-cta { background: linear-gradient(150deg,#5d596bef,#34313f); }
.material-toggle { flex: 0 0 44px; margin-right: -14px; color: #645976; }
.material-toggle svg { width: 18px; height: 18px; }
.material-toggle[aria-pressed=true] { box-shadow: inset 0 1px 2px #fff, 0 0 0 1px #b7acc53d; }

/* The hero sheet is its own material. The artwork remains behind the sheet. */
.home-hero {
  min-height: 900px;
  background:
    radial-gradient(ellipse at 12% 72%, #d8d3f2 0, transparent 50%),
    radial-gradient(ellipse at 50% 100%, #f3d6c3 0, transparent 44%),
    linear-gradient(112deg, #e8eff7, #e7e7f4 55%, #d2e4ed);
}
.hero-art {
  width: 90%; right: -9%; object-position: 60% center;
  mask-image: linear-gradient(90deg, transparent, #000 28%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
}
.hero-veil {
  background: linear-gradient(90deg, #e7edf75c 0%, #e5e9f430 32%, transparent 63%);
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.light-ribbon {
  position: absolute;
  width: 900px;
  height: 285px;
  left: -210px;
  top: 415px;
  border-radius: 50%;
  transform: rotate(-32deg);
  background: linear-gradient(135deg, #c2dcebd4 7%, #c5b8eebd 34%, #dfc9ead4 57%, #f1d6bed4 85%);
  box-shadow: 0 -4px 35px #f7eff07a, inset 0 2px 30px #fef2fe6b;
  filter: blur(5px);
}
.light-ribbon.second {
  width: 600px;
  height: 200px;
  top: 30px;
  left: 19%;
  transform: rotate(-40deg);
  opacity: .32;
  background: linear-gradient(130deg,#f1c7ca,#c1dbe9 60%,#c4b7ef);
  filter: blur(28px);
}
.hero-caustic {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 164px;
  left: 8%;
  width: 540px;
  height: 510px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 48% 40%, #ffffff7a, transparent 65%);
  opacity: .45;
}
.hero-content { padding-top: 155px; padding-bottom: 105px; position: relative; z-index: 2; }
.hero-copy {
  position: relative;
  width: min(660px, 59%);
  padding: 43px 40px 38px;
  border-radius: 32px;
  border: 1px solid #ffffffbf;
  background: linear-gradient(135deg, #ffffff3b, #ffffff14 45%, #ffffff33);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  box-shadow: 0 30px 60px #4b467b0e, inset 0 1px 1px #fffffff0, inset 0 -1px 1px #ffffff9e;
}
.hero-copy::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 27px;
  border-top: 1px solid #ffffff7a;
  border-left: 1px solid #ffffff35;
  pointer-events: none;
}
.hero-copy::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 42%;
  top: -1px;
  left: 10%;
  background: linear-gradient(90deg, transparent, white, transparent);
  pointer-events: none;
}
.hero-content .eyebrow { font-size: 9px; letter-spacing: .115em; margin-bottom: 29px; color: #595b6b; }
.hero-content h1 {
  font-size: clamp(3.4rem, 5.1vw, 4.75rem);
  line-height: 1.07;
  letter-spacing: -.066em;
  max-width: 100%;
}
.hero-content h1 em { color: #676284; }
.hero-content .hero-description { margin-top: 26px; max-width: 375px; font-size: 13px; line-height: 1.85; color: #545463; }
.hero-content .button-row { margin-top: 29px; gap: 15px; }
.hero-content .button { padding-inline: 22px; font-size: 11px; }
.hero-content .text-link { font-size: 11px; gap: 9px; }
.hero-copy-note { display: flex; align-items: center; gap: 9px; font-size: 9px; color: #656176; letter-spacing: .03em; margin-top: 33px; }
.hero-copy-note::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #7a7693; box-shadow: 0 0 0 4px #ffffff3b; }
.hero-cards { top: 32%; right: 5%; width: 365px; height: 380px; z-index: 3; }
.float-card {
  border-radius: 18px;
  background: linear-gradient(135deg,#ffffff66,#ffffff27 65%,#ffffff50);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid #ffffffd6;
  box-shadow: 0 16px 32px #4e4c7520, inset 0 1px 1px white, inset 0 -1px 1px #ffffffa8;
  padding: 17px 18px;
}
.float-card strong { color: #343140; }
.float-card small { color: #5c566d; font-size: 10px; }
.float-card.one { top: 20px; left: 0; transform: rotate(-4deg); }
.float-card.two { top: 165px; right: -5px; transform: rotate(4deg); }
.float-card.three { bottom: -7px; left: -22px; transform: rotate(-3deg); }
.mini-icon, .product-icon {
  border-color: #ffffffe0;
  background: linear-gradient(130deg,#ffffff9c,#d9d2f445);
  box-shadow: inset 0 1px 1px #fff, 0 6px 15px #77728d0d;
}
.float-card .mini-icon { background: #ffffff52; color: #706986; }
.float-card .mint { background: #e2f0ed61; color: #587b77; }
.float-card .peach { background: #f8ded252; color: #986c66; }
.tiny-check { background: #edf5efba; border: 1px solid #ffffffad; }
.neural-trace { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; opacity: .9; }
.neural-trace path { fill: none; stroke: #ffffffc4; stroke-width: 1; }
.neural-trace circle { fill: #eee7ff; stroke: #ffffff; stroke-width: 2; }
.neural-signal { position: absolute; top: 103px; left: 179px; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 12px 3px #ffffffb3; opacity: 0; }
.orbit-caption { top: 24%; right: 9%; color: #605c72; font-size: 9px; }
.hero-foot { bottom: 26px; padding: 16px 20px; border-top: 1px solid #ffffff85; }
.video-toggle { background: #ffffff38; border-color: #ffffffbf; }

/* The collection sits over a shared pool of colour, visible through each pane. */
.product-grid { position: relative; isolation: isolate; }
.product-grid::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40px -24px;
  background:
    radial-gradient(ellipse 550px 500px at 74% 15%, #c7b5e799, transparent 73%),
    radial-gradient(ellipse 520px 470px at 20% 50%, #b9dce199, transparent 73%),
    radial-gradient(ellipse 520px 450px at 85% 55%, #ecc3ce80, transparent 73%),
    radial-gradient(ellipse 700px 340px at 45% 90%, #d7cee8c4, transparent 75%);
  pointer-events: none;
}
.product-card, .product-card:nth-child(1), .product-card[data-category=Messaging],
.product-card[data-tone=supplements], .product-card[data-tone=cosmetics] {
  background: var(--glass-clear);
  border: 1px solid #ffffffd9;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.product-card::after, .workflow::after, .contact-form::after, .interactive-demo::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border-radius: 23px;
  border-top: 1px solid #ffffff8c;
  border-bottom: 1px solid #ffffff69;
}
.product-card:nth-child(1) {
  min-height: 460px;
  /* The inner preview owns refraction; avoid a second backdrop root above it. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card-category, .card-number { color: #646174; }
.product-filter {
  width: fit-content;
  padding: 5px;
  border-radius: 40px;
  border: 1px solid #ffffffde;
  background: linear-gradient(120deg,#ffffff66,#e9e5f438);
  box-shadow: var(--glass-fine-shadow);
}
.filter { color: #5b5768; border: 1px solid transparent; }
.filter[aria-pressed=true] { background: #ffffff9c; border-color: #ffffffdc; color: #383344; box-shadow: 0 3px 8px #56506b0e, inset 0 1px 0 white; }
.demo-window, .niche-preview, .sms-preview, .message-preview {
  background: linear-gradient(130deg,#ffffff7a,#ffffff2e 65%,#ffffff6b);
  border: 1px solid #ffffffeb;
  box-shadow: 0 18px 30px #66577d12, inset 0 1px 1px #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.demo-window-top, .chat-footer { border-color: #aaa0bd26; }
.demo-window-top small, .demo-product small { color: #625a71; }
.chat-bubble { background: #ede8f585; color: #524c63; border: 1px solid #ffffffa1; }
.chat-bubble.user { background: linear-gradient(125deg,#d5ccea80,#e5e0f580); border-color: #ffffff8c; color: #4f4662; }
.demo-product { background: #ffffff7a; border-color: #ffffffe0; }
.visual-tag { background: linear-gradient(140deg,#ffffff9e,#ece9f57a); border-color: white; color: #5e546e; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.demo-caption { color: #70657d; }
.niche-preview .mini-icon { background: #e5f1ec82; }
.niche-preview.pink .mini-icon { background: #f4d8d080; }
.niche-preview p { color: #625c70; }
.message-preview .chat-bubble { background: #dcece2a8; color: #496053; }
.sms-row svg { vertical-align: middle; }
.collection-note { color: #686075; }

/* A dark glass interlude uses the same original logo geometry. */
.philosophy-panel {
  background:
    radial-gradient(ellipse at 80% 100%,#8579a64d,transparent 55%),
    radial-gradient(ellipse at 80% 0%,#96b3c03b,transparent 52%),
    linear-gradient(115deg,#282835,#383544);
  border: 1px solid #ffffff61;
  box-shadow: inset 0 1px 1px #ffffff7a, 0 20px 50px #39314715;
}
.philosophy-art { overflow: visible; background: none; }
.philosophy-art::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 8%;
  right: 16%;
  border-radius: 28px;
  transform: rotate(-8deg);
  background: linear-gradient(145deg,#ffffff1c,#b7a8d729,#dbd0e311);
  border: 1px solid #ffffff59;
  box-shadow: 0 24px 50px #17182233, inset 0 1px 1px #ffffff63;
}
.philosophy-art::after {
  content: '';
  position: absolute;
  inset: 19% 12%;
  border: 1px solid #ffffff14;
  border-radius: 26px;
  transform: rotate(6deg);
  background: linear-gradient(135deg,#cedae614,#e4cee91f);
  pointer-events: none;
}
.brand-sculpture { z-index: 1; width: 280px; height: 280px; filter: drop-shadow(0 10px 20px #201d344d); }
.art-caption { z-index: 2; color: #d9d3e3; }

/* A shared glass language for every page, without placing body text on noise. */
.experience {
  position: relative;
  background:
    radial-gradient(ellipse at 67% 30%,#c5b6e4a6,transparent 50%),
    radial-gradient(ellipse at 85% 90%,#eccfbaa6,transparent 45%),
    radial-gradient(ellipse at 35% 100%,#bcdae380,transparent 50%),
    #ecedf6;
  border: 1px solid #ffffffb3;
  box-shadow: inset 0 1px 1px #fff;
}
.interactive-demo {
  position: relative;
  background: var(--glass-clear);
  border-color: #ffffffe0;
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  box-shadow: 0 25px 70px #6755791a, inset 0 1px 1px white;
}
.conversation-select { width: fit-content; padding: 5px; border-radius: 30px; border: 1px solid #ffffffbf; background: #ffffff26; }
.conversation-select .filter { background: none; border-color: transparent; }
.conversation-select .filter[aria-pressed=true] { background: linear-gradient(145deg,#4c475d,#383447); color: #fff; border-color: #ffffff52; }
.demo-disclaimer { color: #625a71; }
.chat-footer { color: #62596f; }
.journal-card {
  background: linear-gradient(140deg,#ffffff66,#ffffff1a);
  border: 1px solid #fffffff0;
  border-radius: 28px;
  padding: 12px 12px 17px;
  box-shadow: var(--glass-fine-shadow);
  overflow: hidden;
}
.journal-card .article-image { border: 1px solid #ffffffb3; border-radius: 18px; }
.journal-card .article-meta, .journal-card :is(h2,h3), .journal-card .article-excerpt { margin-inline: 12px; }
.journal-card .text-link { margin-left: 12px; }
.article-meta { color: #655d71; }
.journal-card :is(h2,h3) { font-size: 19px; }
.article-image img { transition: none; }
.search-wrap input { background: #ffffff4d; border-color: #ffffffeb; box-shadow: var(--glass-fine-shadow); }
.search-wrap input::placeholder { color: #675e76; }
.cta-panel {
  background:
    radial-gradient(ellipse at 15% 90%,#f0d2c566,transparent 50%),
    radial-gradient(ellipse at 85% 5%,#c0dce861,transparent 55%),
    linear-gradient(110deg,#e9e1f0,#e2ddf0 50%,#dce7ee);
  border: 1px solid #ffffffbf;
  box-shadow: inset 0 1px 1px white;
  padding: 38px 0;
}
.cta-inner {
  padding: 40px 43px;
  background: var(--glass-clear);
  border: 1px solid #ffffffcf;
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cta-inner > .button { margin-right: 0; }
.cta-panel h2 { font-size: clamp(2.5rem,3.8vw,3.6rem); }
.site-footer { margin: 20px 18px 14px; border-radius: 30px; border: 1px solid #ffffffcf; background: linear-gradient(140deg,#ffffff63,#e9e7f33b); box-shadow: inset 0 1px 1px white; }
.page-hero {
  background:
    radial-gradient(ellipse at 82% 40%,#c8b8e561,transparent 55%),
    radial-gradient(ellipse at 10% 90%,#eccfb980,transparent 45%),
    linear-gradient(120deg,#e3edf5,#e6e4f0 50%,#d8e7ef);
  padding: 143px 0 40px;
}
.page-hero > .container {
  position: relative;
  padding: 44px;
  border: 1px solid #ffffffcf;
  border-radius: 30px;
  background: var(--glass-clear);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.page-hero .lead { color: #575263; }
.product-detail-hero .container {
  gap: 50px;
  /* Nested backdrop roots clip the inner preview's refracted scene. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.product-detail-hero h1 { font-size: clamp(2.8rem,4.1vw,4.1rem); }
.product-detail-hero .card-visual { min-width: 0; }
.feature-item { padding: 30px 26px; border: 1px solid #ffffffe0; border-radius: 23px; background: var(--glass-clear); box-shadow: var(--glass-fine-shadow); }
.feature-item h3 { font-size: 19px; }
.workflow {
  position: relative;
  background: linear-gradient(135deg,#ffffff85,#e6e0f463 60%,#d9e8ed7a);
  border-color: #ffffffd6;
  box-shadow: var(--glass-shadow);
}
.workflow-steps .step-number { border-color: white; background: #ffffff5e; box-shadow: inset 0 1px 1px white; }
.faq-list details { padding: 20px 24px; margin-bottom: 12px; border: 1px solid #ffffffeb; background: var(--glass-clear); border-radius: 16px; box-shadow: var(--glass-fine-shadow); }
.faq-list details:first-child { padding-top: 20px; }
.faq-list summary { font-size: 13px; }
.contact-form { position: relative; background: linear-gradient(140deg,#ffffff70,#e2d9ef66 65%,#dae7ed61); border-color: #ffffffd9; box-shadow: var(--glass-shadow); }
.form-field input, .form-field textarea, .form-field select { background: #ffffff54; border-color: #ffffffed; box-shadow: inset 0 1px 5px #64537208, 0 1px 0 #ffffff75; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #60596d; }
.form-notice { color: #5d556b; }
.manifesto { border: 1px solid #ffffffd9; background: linear-gradient(120deg,#dce7ef73,#e3d9f075 55%,#edd1c54d); box-shadow: var(--glass-shadow); }

/* Retire legacy motion: optical-motion owns feedback and reveal timing. */
.hero-content .eyebrow, .hero-content h1, .hero-content .hero-description, .hero-content .button-row { animation: none; }
.button:active, .icon-button:active, .filter:active { transform: none; }
.filter, .product-card, .icon-button { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: linear-gradient(155deg,#59566ef2,#353140f5); box-shadow: 0 8px 18px #45415620, inset 0 1px 1px #ffffff47, inset 0 -1px 1px #1817215e; }
  .button.ghost:hover, .button.light:hover { background: var(--glass-frost); }
  .products-menu a:hover { background: #ffffff4d; border-color: #ffffffad; }
  .filter:hover { background: #ffffff59; }
  .filter[aria-pressed=true]:hover { background: #ffffff9c; }
  .conversation-select .filter[aria-pressed=true]:hover { background: linear-gradient(145deg,#4c475d,#383447); }
  .journal-card:hover .article-image img { transform: none; }
  .product-card:hover { border-color: #ffffff; }
}

@media (min-width:1600px) {
  .home-hero { min-height: 970px; }
  .hero-content { padding-top: 180px; }
  .hero-copy { width: 700px; max-width: 59%; padding: 50px; }
  .hero-cards { right: 12%; top: 35%; }
}
@media (max-width:1150px) {
  .hero-content h1 { font-size: 59px; }
  .hero-copy { width: 61%; padding: 36px 30px; }
  .hero-cards { right: 3%; width: 290px; }
  .float-card { padding: 14px; gap: 10px; }
  .float-card strong { font-size: 11px; }
  .float-card small { font-size: 9px; }
  .float-card.one { left: 5px; }
  .float-card.three { left: -4px; }
  .orbit-caption { right: 5%; }
  .cta-inner { padding: 35px; }
  .page-hero > .container { padding: 36px; }
  .product-detail-hero .container { gap: 32px; }
}
@media (max-width:900px) {
  .home-hero { min-height: 860px; }
  .hero-content { padding-top: 140px; padding-bottom: 110px; }
  .hero-copy { width: 73%; padding: 32px; }
  .hero-content h1 { font-size: 58px; }
  .hero-art { width: 110%; right: -25%; opacity: 1; }
  .hero-veil { background: linear-gradient(90deg,#e8eaf53b,transparent 60%); }
  .hero-cards { top: 53%; right: 3%; width: 245px; height: 265px; }
  .float-card.one { display: none; }
  .float-card.two { top: 20px; }
  .float-card.three { bottom: 0; left: -23px; }
  .neural-trace { opacity: .5; }
  .orbit-caption { top: 38%; right: 5%; max-width: 150px; font-size: 8px; }
  .hero-copy-note { max-width: 290px; }
  .product-detail-hero .container { gap: 22px; }
  .page-hero { padding-top: 132px; }
  .feature-item { padding: 25px 20px; }
  .feature-item h3 { font-size: 18px; }
  .cta-inner { padding: 31px; }
  .cta-panel h2 { font-size: 38px; }
}
@media (max-width:700px) {
  .material-toggle { margin-left: auto; margin-right: -12px; }
  .site-header { top: 12px; background: linear-gradient(115deg,#ffffff5c,#ffffff36); }
  .site-header:has(.mobile-nav:not([hidden])) { background: linear-gradient(140deg,#f4f7ffe0,#e9e3f4e3 62%,#dbeaf1e0); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
  .mobile-nav { padding-top: 5px; }
  .mobile-nav a { padding: 11px 14px; margin-top: 5px; border: 1px solid #ffffffad; border-radius: 12px; background: #ffffff30; }
  .home-hero { min-height: 1050px; }
  .hero-content { width: calc(100% - 32px); padding-top: 116px; padding-bottom: 370px; }
  .hero-copy { width: 100%; padding: 31px 24px 27px; border-radius: 26px; background: linear-gradient(130deg,#ffffff42,#ffffff24 60%,#ffffff38); }
  .hero-copy::before { border-radius: 21px; }
  .hero-content .eyebrow { font-size: 8px; letter-spacing: .095em; margin-bottom: 24px; }
  .hero-content h1 { font-size: clamp(39px,10vw,56px); letter-spacing: -.063em; }
  .hero-content .hero-description { font-size: 12px; margin-top: 22px; }
  .hero-content .button-row { gap: 8px 14px; margin-top: 24px; }
  .hero-content .button { min-height: 47px; padding-inline: 19px; font-size: 10px; }
  .hero-content .text-link { min-height: 40px; font-size: 10px; }
  .hero-copy-note { font-size: 8px; margin-top: 22px; }
  .hero-art { width: 154%; right: -10%; height: 660px; bottom: 0; top: auto; object-position: 70% center; mask-image: linear-gradient(to bottom,transparent,#000 26%); -webkit-mask-image: linear-gradient(to bottom,transparent,#000 26%); }
  .hero-veil { background: linear-gradient(180deg,#e6edf329 0,transparent 80%); }
  .light-ribbon { width: 680px; height: 220px; top: 340px; left: -260px; opacity: .9; transform: rotate(-40deg); }
  .light-ribbon.second { left: -100px; top: 50px; }
  .hero-caustic { width: 280px; height: 350px; top: 165px; left: 8%; }
  .hero-cards { top: auto; bottom: 125px; right: 6%; width: 265px; height: 210px; }
  .float-card { padding: 14px; }
  .float-card.two { top: 6px; right: -1px; }
  .float-card.three { bottom: 0; left: -19px; }
  .float-card strong { font-size: 10px; }
  .float-card small { font-size: 9px; }
  .neural-trace { opacity: .8; }
  .orbit-caption { top: auto; bottom: 371px; max-width: unset; right: 8%; }
  .hero-foot { width: calc(100% - 32px); padding: 16px 0 0; bottom: 25px; align-items: center; }
  .hero-foot-left { max-width: 140px; font-size: 8px; }
  .scroll-cue { display: none; }
  .product-grid::before { inset: -20px 0; background: radial-gradient(ellipse 350px 650px at 85% 10%,#c7b5e78c,transparent 70%),radial-gradient(ellipse 370px 750px at 15% 52%,#b9dce18c,transparent 70%),radial-gradient(ellipse 320px 850px at 95% 74%,#ebc8d166,transparent 70%); }
  .product-card:nth-child(1) { min-height: 0; }
  .product-filter { padding: 4px; gap: 1px; }
  .filter { padding-inline: 13px; }
  .philosophy-art { overflow: hidden; }
  .philosophy-art::before { inset: 6% 17% 15%; }
  .philosophy-art::after { inset: 10% 20% 19%; }
  .brand-sculpture { width: 218px; height: 218px; }
  .art-caption { font-size: 8px; left: 30px; }
  .conversation-select { gap: 2px; padding: 4px; }
  .conversation-select .filter { padding-inline: 11px; }
  .journal-card { padding: 11px 11px 16px; }
  .journal-card :is(h2,h3) { font-size: 21px; }
  .journal-toolbar .product-filter { border-radius: 22px; }
  .journal-toolbar .filter { font-size: 9px; padding-inline: 9px; }
  .cta-panel { padding: 18px 0; }
  .cta-inner { width: calc(100% - 32px); padding: 29px 24px; border-radius: 21px; }
  .cta-panel h2 { font-size: 34px; }
  .cta-panel p { font-size: 11px; }
  .site-footer { margin: 14px 8px 8px; padding-top: 40px; border-radius: 25px; }
  .page-hero { padding: 116px 0 22px; }
  .page-hero > .container { width: calc(100% - 32px); padding: 30px 23px; border-radius: 25px; }
  .page-hero h1 { font-size: clamp(35px,9vw,50px); }
  .page-hero .lead { font-size: 12px; }
  .page-hero .eyebrow { font-size: 8px; }
  .product-detail-hero .container { gap: 20px; }
  .product-detail-hero h1 { font-size: 38px; }
  .product-detail-hero .card-visual { padding-inline: 0; }
  .product-detail-hero .demo-window { transform: rotate(-2deg); }
  .product-detail-hero .hero-preview { padding-top: 7px; }
  .product-detail-hero .niche-preview,.product-detail-hero .sms-preview,.product-detail-hero .message-preview { padding: 21px 18px; }
  .product-detail-hero .niche-preview strong { font-size: 11px; }
  .product-detail-hero .niche-preview p { font-size: 9px; }
  .product-detail-hero .sms-row { font-size: 10px; }
  .product-detail-hero .visual-tag.bottom { right: -4px; bottom: 0; font-size: 8px; }
  .feature-item { padding: 25px; }
  .feature-item h3 { font-size: 21px; }
  .faq-list details { padding: 18px; }
  .faq-list details:first-child { padding-top: 18px; }
  .contact-form { padding: 28px 23px; }
  .article-hero h1 { font-size: 36px; }
  .article-cover { margin-top: 24px; }
}

/* Material fallbacks are opaque enough to preserve the hierarchy and contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,.products-menu,.hero-copy,.float-card,.product-card,.interactive-demo { background: #edf0f8ed; }
}
@media (prefers-reduced-transparency: reduce) {
  html:not([data-glass-appearance="clear"]) :is(.site-header,.site-header:has(.mobile-nav:not([hidden])),.products-menu,.hero-copy,.float-card,
  .product-card,.product-card:nth-child(1),.product-card[data-category=Messaging],
  .product-card[data-tone=supplements],.product-card[data-tone=cosmetics],
  .demo-window,.niche-preview,.sms-preview,.message-preview,.interactive-demo,.cta-inner,
  .page-hero > .container,.contact-form,.workflow,.journal-card,.site-footer,.faq-list details) {
    background: #f6f5fa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #d9d3e4;
  }
  html:not([data-glass-appearance="clear"]) :is(.light-ribbon,.hero-caustic) { display: none; }
}
html[data-glass-appearance="solid"] :is(.site-header,.site-header:has(.mobile-nav:not([hidden])),.products-menu,.hero-copy,.float-card,
  .product-card,.demo-window,.niche-preview,.sms-preview,.message-preview,.interactive-demo,.cta-inner,
  .page-hero > .container,.contact-form,.workflow,.journal-card,.site-footer,.faq-list details) {
  background: #f6f5fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #d9d3e4;
}
html[data-glass-appearance="solid"] :is(.light-ribbon,.hero-caustic) { display: none; }
@media (prefers-contrast: more) {
  :root { --muted: #40374c; }
  .site-header,.site-header:has(.mobile-nav:not([hidden])),.products-menu,.hero-copy,.float-card,
  .product-card,.product-card:nth-child(1),.product-card[data-category=Messaging],
  .product-card[data-tone=supplements],.product-card[data-tone=cosmetics],
  .demo-window,.niche-preview,.sms-preview,.message-preview,.interactive-demo,.cta-inner,
  .page-hero > .container,.contact-form,.workflow,.journal-card,.site-footer,.faq-list details {
    background: #fcfbff;
    border-color: #887992;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-copy-note,.hero-content .eyebrow,.hero-content .hero-description,.float-card small,
  .card-category,.card-number,.article-meta,.status-note,.demo-caption,.chat-footer,
  .collection-note,.demo-disclaimer { color: #40374c; }
  .form-field input,.form-field textarea,.form-field select { background: #fff; border-color: #887992; }
}