/* Warm, less generic type system: Fraunces gives the story a distinctly human editorial voice,
   while Familjen Grotesk keeps product details direct and readable. */
:root {
  --awaira-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --awaira-sans: "Familjen Grotesk", "Avenir Next", "Segoe UI", sans-serif;
}

body { font-family: var(--awaira-sans); }
.primary-nav, .header-actions, .hero-benefits, .app-preview-section,
.testimonials-section, .about-section, .final-cta, .faq, footer { font-family: var(--awaira-sans); }
#top .section-head h2, #top .about-section h2, #top .final-cta h2, #top .faq h2 {
  font-family: var(--awaira-display);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.04;
}

/* Light landing-page redesign: warm editorial typography, restrained lilac accents, and a
   real-product dashboard preview. This file follows styles.min.css so it intentionally owns the
   public landing page's visual direction without changing the app itself. */
:root[data-theme="light"] {
  --accent: #a976ac;
  --accent-2: #cf9dd0;
  --accent-strong: #8b568d;
  --accent-grad: linear-gradient(135deg, #b57fb7, #c99bce);
  --on-accent: #fff;
  --bg: #fcf8ed;
  --bg-2: #fbf7f8;
  --desktop: #f4eeee;
  --surface: #fffefe;
  --surface-strong: #fff;
  --chrome: rgba(255, 255, 255, 0.94);
  --line: rgba(58, 47, 57, 0.12);
  --line-strong: rgba(119, 82, 116, 0.24);
  --text: #34343d;
  --muted: #676571;
  --soft: #8f8792;
  --field-bg: #fff;
  --field-text: #34343d;
  --hero-bg: #fcf8ed;
}

:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] .site-header {
  min-height: 78px;
  padding-inline: clamp(22px, 5vw, 104px);
  /* The header sits on the hero instead of becoming a separate white strip. */
  margin-bottom: -78px;
  background: transparent;
  /* Override the shared chrome's !important background color. */
  background-color: transparent !important;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

:root[data-theme="light"] .brand { gap: 10px; font-family: var(--awaira-display); font-weight: 650; }
:root[data-theme="light"] .brand img { width: 38px; height: 38px; border-radius: 10px; }
:root[data-theme="light"] .brand span { font-size: 1.4rem; letter-spacing: -0.05em; }
:root[data-theme="light"] .primary-nav { font-size: 0.94rem; overflow: visible; }
:root[data-theme="light"] .theme-switcher { border-color: var(--line); background: #fff; }
:root[data-theme="light"] .header-cta { border-radius: 12px; }

/* Product switcher: this stays in the navigation's quiet text treatment until a pointer or
   keyboard focus reveals the complete platform list. The invisible bridge prevents the menu from
   collapsing while the cursor moves from its label to the panel. */
.products-nav { position: relative; display: inline-block; }
.products-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  white-space: nowrap;
  list-style: none;
}
.products-toggle::-webkit-details-marker { display: none; }
.products-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.products-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 3px;
  min-width: 224px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 254, 254, .97);
  box-shadow: 0 18px 42px rgba(67, 44, 64, .16);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .16s ease, transform .16s ease;
}
.products-menu::before { content: ""; position: absolute; top: -13px; right: 0; left: 0; height: 14px; }
.products-menu a { padding: 9px 10px; border-radius: 8px; color: var(--text); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.products-menu a:hover, .products-menu a:focus-visible { background: #f5ebf4; color: #74467d; outline: 0; }
.products-nav:hover .products-menu,
.products-nav:focus-within .products-menu,
.products-nav[open] .products-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.products-nav:hover .products-toggle,
.products-nav:focus-within .products-toggle,
.products-nav[open] .products-toggle { color: var(--text); }
.products-nav:hover .products-toggle svg,
.products-nav:focus-within .products-toggle svg,
.products-nav[open] .products-toggle svg { transform: rotate(180deg); }

/* Every download now lives in the hero, so the action area is a stack rather than a row:
   desktop builds, then the two phone stores with their scan codes, then the tour link. Sized to
   fit the hero column without pushing the fold. */
:root[data-theme="light"] .awaira-light-hero .hero-actions.hero-downloads {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 470px;
  margin-top: 20px;
}
/* The three desktop builds share the compact button the download card used. */
:root[data-theme="light"] .awaira-light-hero .hero-downloads .hero-desktop-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
:root[data-theme="light"] .awaira-light-hero .hero-downloads .hero-desktop-row > * {
  min-height: 44px;
  padding: 0 10px;
  font-size: .85rem;
}
:root[data-theme="light"] .awaira-light-hero .hero-downloads .hero-desktop-row .hero-download { width: 100%; }
:root[data-theme="light"] .awaira-light-hero .hero-downloads .hero-desktop-row svg { width: 17px; height: 17px; }
/* Each store pill keeps its own scan code directly under it, so the pair reads as two columns. */
.hero-phone-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hero-phone-col {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.hero-phone-col .store-pill {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  gap: 9px;
  border-radius: 12px;
}
.hero-phone-col .store-pill-glyph { width: 20px; height: 20px; }
.hero-phone-col .store-pill span { font-size: .62rem; }
.hero-phone-col .store-pill strong { font-size: .9rem; }
.hero-phone-col img {
  width: 62px;
  height: auto;
  padding: 5px;
  border: 1px solid #e1dce4;
  border-radius: 10px;
  background-color: #fff;
}
.hero-phone-col small { color: #77717e; font-size: .68rem; font-weight: 600; }
.hero-actions-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 2px;
}
.hero-platform-details {
  display: inline-flex;
  gap: 7px;
  color: #86558f;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-platform-details:hover { color: #74467d; }
@media (max-width: 800px) {
  :root[data-theme="light"] .awaira-light-hero .hero-actions.hero-downloads { max-width: none; }
  :root[data-theme="light"] .awaira-light-hero .hero-downloads .hero-desktop-row { grid-template-columns: 1fr 1fr; }
  :root[data-theme="light"] .awaira-light-hero .hero-downloads .hero-desktop-row .hero-download { grid-column: 1 / -1; }
}

/* Reviews, directly under the hero and at the hero's own width — same padding, same 1500px
   inner measure, so the row of cards lines up with the headline above it. The warm wash under
   the hero image carries through the top of this band and fades out behind the cards.
   !important on the gradient: styles.min.css carries a global `body * { background-image: none
   !important }` reset that this file loads after but cannot otherwise outrank. */
.hero-reviews {
  padding: clamp(10px, 1.6vw, 22px) clamp(22px, 5vw, 104px) clamp(30px, 4vw, 58px);
  background-color: #fcf8ed;
  background-image: radial-gradient(74% 120% at 50% -18%, rgba(240, 173, 126, .30), transparent 72%) !important;
}
/* The window the reviews slide behind: the track inside it is wider than the page, and the edges
   fade so cards arrive and leave instead of being cut off. */
.review-marquee {
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.review-row {
  display: flex;
  width: max-content;
  gap: clamp(12px, 1.4vw, 20px);
  animation: review-marquee var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}
.review-row .review-card { flex: 0 0 clamp(280px, 27vw, 380px); }
/* Stop for anyone reading one, whether they got there with a pointer or the keyboard. */
.review-marquee:hover .review-row,
.review-marquee:focus-within .review-row { animation-play-state: paused; }
@keyframes review-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (clamp(12px, 1.4vw, 20px) / 2)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  /* No drift: the row becomes an ordinary horizontal scroller. */
  .review-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .review-row { animation: none; }
}
/* Deliberately quieter and smaller than the old panel: a line of quote, a face, a name. */
.review-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(114, 93, 121, .15);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
}
.review-card blockquote {
  margin: 0;
  color: #34313b;
  font-size: clamp(.98rem, 1.15vw, 1.1rem);
  font-weight: 540;
  line-height: 1.46;
  letter-spacing: -.012em;
}
.review-card figcaption {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
}
.review-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 1px;
  border: 1px solid rgba(114, 93, 121, .22);
  border-radius: 50%;
  color: #4a4450;
  fill: currentColor;
  background-color: #fffdfa;
}
.review-card figcaption strong {
  display: block;
  color: #302d38;
  font-size: .93rem;
  font-weight: 700;
}
.review-card figcaption em {
  display: block;
  color: #7c7583;
  font-size: .82rem;
  font-style: normal;
}
/* The warm wash belongs to the cream hero; in dark it would just be a smudge. */
:root[data-theme="dark"] .hero-reviews { background-color: var(--bg); background-image: none !important; }
:root[data-theme="dark"] .review-card { border-color: var(--line); background: var(--surface); }
:root[data-theme="dark"] .review-card blockquote { color: var(--text); }
:root[data-theme="dark"] .review-card figcaption strong { color: var(--text); }
:root[data-theme="dark"] .review-card figcaption em { color: var(--muted); }
:root[data-theme="dark"] .review-avatar { border-color: var(--line-strong); color: var(--text); background-color: var(--surface-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-reviews { background-color: var(--bg); background-image: none !important; }
  :root:not([data-theme="light"]) .review-card { border-color: var(--line); background: var(--surface); }
  :root:not([data-theme="light"]) .review-card blockquote,
  :root:not([data-theme="light"]) .review-card figcaption strong { color: var(--text); }
  :root:not([data-theme="light"]) .review-card figcaption em { color: var(--muted); }
  :root:not([data-theme="light"]) .review-avatar { border-color: var(--line-strong); color: var(--text); background-color: var(--surface-strong); }
}
@media (max-width: 860px) {
  .review-row .review-card { flex-basis: min(82vw, 320px); }
}

/* "How I use the app": the maker's own walkthrough, sitting between the reviews and the product
   preview. The player is a poster plus a play badge until it is clicked; the iframe that replaces
   it inherits the same box. */
.how-i-use {
  padding: clamp(30px, 3.8vw, 56px) clamp(20px, 5vw, 56px) clamp(24px, 3vw, 44px);
  background-color: #fcf8ed;
}
.how-i-use-head {
  max-width: 640px;
  margin: 0 auto clamp(16px, 2vw, 24px);
  text-align: center;
}
.how-i-use-head .eyebrow { margin: 0 0 8px; color: #8a5d91; font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.how-i-use-head h2 {
  margin: 0;
  color: #302d38;
  font-family: var(--awaira-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.how-i-use-head p { margin: 9px 0 0; color: #6d6663; font-size: clamp(.92rem, 1.15vw, 1.02rem); line-height: 1.55; }
.how-i-use-player,
.how-i-use iframe {
  display: block;
  width: min(100%, 880px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(114, 93, 121, .16);
  border-radius: 16px;
  background-color: #efe9f2;
}
.how-i-use-player { position: relative; }
.how-i-use-player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.how-i-use-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(54px, 6vw, 68px);
  height: clamp(54px, 6vw, 68px);
  border-radius: 50%;
  background: rgba(58, 47, 57, .82);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: background-color .16s ease, transform .16s ease;
}
.how-i-use-play svg { width: 40%; height: 40%; margin-left: 3px; }
.how-i-use-player:hover .how-i-use-play,
.how-i-use-player:focus-visible .how-i-use-play { background: #3a2f39; transform: translate(-50%, -50%) scale(1.06); }
.how-i-use iframe { border: 0; }
.how-i-use-note { margin: 12px auto 0; color: #8b8491; font-size: .78rem; text-align: center; }
:root[data-theme="dark"] .how-i-use { background-color: var(--bg); }
:root[data-theme="dark"] .how-i-use-head h2 { color: var(--text); }
:root[data-theme="dark"] .how-i-use-head p { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .how-i-use { background-color: var(--bg); }
  :root:not([data-theme="light"]) .how-i-use-head h2 { color: var(--text); }
  :root:not([data-theme="light"]) .how-i-use-head p { color: var(--muted); }
}

/* Trust band: a full-bleed lavender strip between the hero and the product preview. Three
   promises, one line of icon-plus-label each — the questions people weigh before downloading. */
.hero-trust {
  padding: clamp(16px, 2.2vw, 26px) clamp(18px, 5vw, 56px);
  border-block: 1px solid rgba(114, 93, 121, .16);
  background: #ebe3f6;
}
.hero-trust-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 48px);
  max-width: 1080px;
  margin: 0 auto;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
.hero-trust-item svg {
  width: clamp(28px, 3vw, 36px);
  height: clamp(28px, 3vw, 36px);
  flex: 0 0 auto;
  color: #7f5388;
}
.hero-trust-item p {
  margin: 0;
  color: #3b3542;
  font-size: clamp(.92rem, 1.15vw, 1.04rem);
  font-weight: 600;
  line-height: 1.32;
}
/* The second half of each label is its own line, the way the strip is set in the design. */
.hero-trust-item span { display: block; }
/* Dark comes two ways here, as everywhere else on the site: the explicit choice, and "auto" on a
   system that is dark. Both need the same band. */
:root[data-theme="dark"] .hero-trust {
  border-block-color: var(--line);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
:root[data-theme="dark"] .hero-trust-item svg { color: color-mix(in srgb, var(--accent) 72%, #fff); }
:root[data-theme="dark"] .hero-trust-item p { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-trust {
    border-block-color: var(--line);
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  }
  :root:not([data-theme="light"]) .hero-trust-item svg { color: color-mix(in srgb, var(--accent) 72%, #fff); }
  :root:not([data-theme="light"]) .hero-trust-item p { color: var(--text); }
}
@media (max-width: 760px) {
  .hero-trust-inner { grid-template-columns: 1fr; gap: 14px; }
}

/* The navbar gets out of the way on the way down and comes back on the way up, so the page reads
   without a bar over it but the nav is never more than a short scroll up. Driven by the inline
   scroll script in index.html, which is why this is landing-page only. */
.site-header { transition: transform .26s ease; }
body.nav-tucked .site-header { transform: translateY(-100%); }
/* An open mobile menu, or a focused control inside the header, keeps the bar put. */
body.nav-tucked .site-header.nav-open,
body.nav-tucked .site-header:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* The product image is intentionally the whole Patterns section: it lets the desktop and iPhone
   experiences be read together before the feature details begin. */
.patterns-hero { padding-top: clamp(26px, 4vw, 54px); padding-bottom: clamp(26px, 4vw, 54px); }
.patterns-hero-art { width: min(100%, 1500px); margin: 0 auto; overflow: hidden; border: 1px solid rgba(58, 47, 57, .10); border-radius: clamp(16px, 2vw, 26px); background: #fff; box-shadow: 0 24px 54px rgba(77, 51, 73, .13); }
.patterns-hero-art img { display: block; width: 100%; height: auto; }
.patterns-hero-dark { display: none !important; }
:root[data-theme="dark"] .patterns-hero-light { display: none !important; }
:root[data-theme="dark"] .patterns-hero-dark { display: block !important; }
@media (max-width: 680px) {
  .patterns-hero { padding: 24px 16px; }
  .patterns-hero-art { border-radius: 14px; }
}

/* User stories and the privacy promise share one continuous, two-column section. */
.experiences-privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(36px, 6vw, 88px);
  max-width: var(--maxw);
  margin-inline: auto;
}
#top .experiences-privacy-grid > section {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
}
#top .experiences-privacy .section-head {
  margin-inline: 0;
  text-align: left;
}
#top .experiences-privacy h2 {
  margin: 0 0 18px;
  font-family: var(--awaira-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.04;
}
.experiences-privacy .section-sub { margin-inline: 0; }
.experiences-privacy .eyebrow { margin: 0 0 10px; color: #8a5d91; }
/* Both headings reserve two lines so the two columns start their body copy on the same line,
   however each headline happens to wrap. "Privacy you can understand." always takes two lines
   at these column widths; the stories headline usually takes one, and this is its floor. */
#top .experiences-privacy h2 { min-height: 2.08em; }
@media (max-width: 800px) {
  .experiences-privacy-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  /* Stacked, there is no second column to line up with. */
  #top .experiences-privacy h2 { min-height: 0; }
}

.privacy-explainer {
  color: #34313b;
}
.privacy-explainer-inner { max-width: 660px; }
.privacy-explainer .eyebrow { margin: 0 0 10px; color: #8a5d91; }
.privacy-explainer h2 {
  margin: 0 0 18px;
  color: #34313b;
  font-family: var(--awaira-display);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: .98;
}
.privacy-explainer p:not(.eyebrow) { max-width: 48ch; margin: 0 0 10px; color: #69636e; font-size: clamp(.98rem, 1.35vw, 1.12rem); line-height: 1.55; }
.privacy-explainer a { display: inline-flex; gap: 8px; margin-top: 8px; color: #87578e; font-size: .94rem; font-weight: 720; text-decoration: none; }
.privacy-explainer a:hover { color: #6f4176; text-decoration: underline; text-underline-offset: 4px; }
.privacy-explainer small { display: block; margin-top: 22px; color: #908994; font-size: .73rem; line-height: 1.5; }

@media (max-width: 760px) {
  .products-nav { display: block; }
  .products-toggle { width: 100%; }
  .products-menu {
    position: static;
    display: none;
    min-width: 0;
    margin-top: 8px;
    transform: none;
    box-shadow: none;
  }
  .products-nav:hover .products-menu,
  .products-nav:focus-within .products-menu,
  .products-nav[open] .products-menu { display: grid; transform: none; }
}

:root[data-theme="light"] .awaira-light-hero {
  display: block;
  min-height: auto;
  padding: calc(78px + clamp(56px, 6vw, 94px)) clamp(22px, 5vw, 104px) 0;
  /* The macOS onboarding paper, carried onto the web. The app stretches one portrait sheet to
     fill its window; a landing hero is far wider than that, and stretching pushed the lilac
     headlands into the headline. So the sheet is cut into its two motifs and each is anchored to
     the corner it belongs in, at its own aspect ratio. The cream they sit on is --bg, so the
     crop rectangles are invisible.
     !important is required: styles.min.css carries a global `body * { background-image: none
     !important }` reset that this file loads after but cannot otherwise outrank. */
  background-color: #fcf8ed;
  background-image:
    linear-gradient(rgba(252, 248, 237, .5), rgba(252, 248, 237, .5)),
    image-set(url("/assets/awaira-paper-tl.avif") type("image/avif"),
              url("/assets/awaira-paper-tl.jpg") type("image/jpeg")),
    image-set(url("/assets/awaira-paper-br.avif") type("image/avif"),
              url("/assets/awaira-paper-br.jpg") type("image/jpeg")) !important;
  /* A 50% paper wash makes the hero fade into the page rather than ending at a hard edge. */
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, left top, right bottom;
  background-size: 100% 100%, clamp(190px, 20vw, 360px) auto, clamp(360px, 40vw, 820px) auto;
  text-align: left;
}
:root[data-theme="light"] .awaira-light-hero::before,
:root[data-theme="light"] .awaira-light-hero::after { display: none; }
:root[data-theme="light"] .awaira-light-hero .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(38px, 6vw, 94px);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
}
:root[data-theme="light"] .awaira-light-hero .hero-inner {
  display: block;
  max-width: 660px;
  margin: 0;
  text-align: left;
}
:root[data-theme="light"] .awaira-light-hero .eyebrow {
  margin-bottom: 14px;
  color: #936397;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
:root[data-theme="light"] .awaira-light-hero h1 {
  max-width: 680px;
  margin: 0;
  color: #34343d;
  font-family: var(--awaira-display);
  font-size: clamp(2.6rem, 3.6vw, 4.15rem);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.0;
  text-align: left;
}
:root[data-theme="light"] .awaira-light-hero h1 span,
:root[data-theme="light"] .awaira-light-hero h1 em { display: block; }
:root[data-theme="light"] .awaira-light-hero h1 em { color: #c28fc5; font-style: normal; }
:root[data-theme="light"] .awaira-light-hero .lede {
  max-width: 630px;
  margin: 24px 0 0;
  color: #4d4c55;
  font-size: clamp(1.08rem, 1.35vw, 1.34rem);
  line-height: 1.5;
  text-align: left;
}
:root[data-theme="light"] .awaira-light-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 18px;
  width: auto;
  margin-top: 24px;
}
:root[data-theme="light"] .awaira-light-hero .hero-download {
  width: auto;
  min-width: 0;
  min-height: 44px;
  gap: 9px;
  padding: 0 20px;
  /* Override the shared button reset to keep the reference's plum colour and rounded shape. */
  border-radius: 11px !important;
  border-color: #86558f !important;
  background-color: #86558f !important;
  color: #fff !important;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
}
:root[data-theme="light"] .awaira-light-hero .hero-download:hover {
  border-color: #74467d !important;
  background-color: #74467d !important;
}
:root[data-theme="light"] .awaira-light-hero .hero-download .btn-icon {
  width: 17px;
  height: 18px;
  flex: 0 0 auto;
}
:root[data-theme="light"] .awaira-light-hero .hero-tour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #86558f;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
:root[data-theme="light"] .awaira-light-hero .hero-play {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #af83b5;
  border-radius: 50%;
  transition: background-color .15s ease, border-color .15s ease;
}
:root[data-theme="light"] .awaira-light-hero .hero-play svg { width: 16px; height: 16px; }
:root[data-theme="light"] .awaira-light-hero .hero-tour:hover .hero-play { background-color: #f0e5f0; border-color: #86558f; }
:root[data-theme="light"] .awaira-light-hero .hero-tour:hover { color: #74467d; }
:root[data-theme="light"] .awaira-light-hero .hero-subnote { display: block; margin: 12px 0 0; color: #696071; font-size: .8125rem; font-weight: 400; line-height: 1.5; text-align: left; }
:root[data-theme="light"] .awaira-light-hero .hero-platforms { margin: 8px 0 0; font-size: .75rem; line-height: 1.5; }
:root[data-theme="light"] .awaira-light-hero .hero-platforms a { color: #86558f; text-decoration: underline; text-decoration-color: #c6accb; text-underline-offset: 3px; }
:root[data-theme="light"] .awaira-light-hero .hero-platforms a:hover { color: #74467d; text-decoration-color: currentColor; }
:root[data-theme="light"] .awaira-light-hero .hero-privacy { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; color: #817589; font-size: .75rem; line-height: 1.5; }
:root[data-theme="light"] .awaira-light-hero .hero-privacy svg { width: 21px; height: 23px; flex: 0 0 auto; color: #906999; }

:root[data-theme="light"] .hero-visual {
  position: relative;
  margin: 0;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(37, 45, 65, .72);
  border-radius: 24px;
  background: #101a2b;
  box-shadow: 0 28px 56px rgba(62, 44, 63, .2), 0 0 0 4px rgba(196, 145, 198, .1);
}
:root[data-theme="light"] .hero-visual-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  padding: 0 9px 7px;
  color: #b8c3d6;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}
:root[data-theme="light"] .hero-live { display: inline-flex; align-items: center; gap: 6px; color: #8fe0be; }
:root[data-theme="light"] .hero-live i { width: 7px; height: 7px; border-radius: 99px; background: #55d393; box-shadow: 0 0 0 4px rgba(85, 211, 147, .13); }
:root[data-theme="light"] .hero-visual img { display: block; width: 100%; height: auto; border-radius: 13px; }
:root[data-theme="light"] .hero-visual figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  padding: 13px 8px 3px;
  color: #c6cad2;
  font-size: .82rem;
  font-weight: 650;
}
:root[data-theme="light"] .hero-visual figcaption span::before { content: "✓"; margin-right: 6px; color: #59d695; }

:root[data-theme="light"] .hero-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1500px;
  margin: clamp(46px, 6vw, 82px) auto 0;
  padding: 27px 20px;
  border-top: 1px solid rgba(117, 91, 112, .13);
}
:root[data-theme="light"] .hero-benefits > div { display: flex; justify-content: center; gap: 12px; }
:root[data-theme="light"] .hero-benefits b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid #ebdceb;
  border-radius: 12px;
  color: #ad7db0;
  font-size: 1.35rem;
}
:root[data-theme="light"] .hero-benefits p { display: grid; gap: 1px; margin: 0; line-height: 1.25; }
:root[data-theme="light"] .hero-benefits strong { color: #45434c; font-size: .92rem; }
:root[data-theme="light"] .hero-benefits span { color: #77727b; font-size: .8rem; }

/* The first viewport tells one clear story: a real moment being noticed. */
.hero-demo { align-self: center; min-width: 0; max-width: 100%; }
.hero-demo-primary {
  margin: 0;
  /* The product image belongs directly to the hero — no card edge or shadow around it. */
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-demo-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: transparent; }
.hero-demo-primary img { display: block; width: 100%; height: 100%; border-radius: 22px; object-fit: cover; object-position: center; }
.hero-demo-primary figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px 14px; color: var(--text); font-size: .9rem; }
.hero-demo-primary figcaption span { color: var(--accent); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hero-demo-primary figcaption strong { font-weight: 750; }


@media (max-width: 1060px) {
  :root[data-theme="light"] .awaira-light-hero .hero-layout { grid-template-columns: 1fr; max-width: 760px; }
  :root[data-theme="light"] .awaira-light-hero .hero-inner { max-width: 720px; }
  :root[data-theme="light"] .hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .hero-demo { max-width: 720px; }
}
@media (max-width: 680px) {
  :root[data-theme="light"] .awaira-light-hero { padding: 42px 20px 0; }
  :root[data-theme="light"] .awaira-light-hero h1 { font-size: clamp(2.85rem, 13vw, 4.2rem); }
  :root[data-theme="light"] .awaira-light-hero .hero-actions { gap: 12px 10px; }
  :root[data-theme="light"] .awaira-light-hero .hero-download { padding-inline: 12px; }
  :root[data-theme="light"] .awaira-light-hero .hero-tour { gap: 8px; font-size: .75rem; }
  :root[data-theme="light"] .awaira-light-hero .hero-play { width: 32px; height: 32px; }
  :root[data-theme="light"] .hero-visual { border-radius: 18px; }
  :root[data-theme="light"] .hero-benefits { grid-template-columns: 1fr; gap: 20px; padding: 25px 6px; }
  :root[data-theme="light"] .hero-benefits > div { justify-content: flex-start; }
  .hero-demo-primary { border-radius: 17px; }
  .hero-demo-primary figcaption { padding: 11px 13px 12px; font-size: .82rem; }
}

/* Dark mode carries the same new composition instead of falling back to the old hero. The palette
   moves to midnight ink, blue-lilac typography, and a quieter version of the product frame. */
:root[data-theme="dark"] {
  --accent: #bf8fc6;
  --accent-2: #d8a9df;
  --accent-strong: #efc5ee;
  --accent-grad: linear-gradient(135deg, #a978b1, #d29bd5);
  --on-accent: #211a25;
  --bg: #121017;
  --bg-2: #1a1620;
  --desktop: #211b29;
  --surface: #211b29;
  --surface-strong: #2a2232;
  --chrome: rgba(20, 17, 25, .94);
  --line: rgba(232, 219, 237, .12);
  --line-strong: rgba(232, 219, 237, .22);
  --text: #f6eff6;
  --muted: #c1b7c3;
  --soft: #95899a;
  --field-bg: #27202e;
  --field-text: #f6eff6;
  --hero-bg: #121017;
}

:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .site-header {
  min-height: 78px;
  padding-inline: clamp(22px, 5vw, 104px);
  margin-bottom: -78px;
  background: transparent;
  background-color: transparent !important;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
:root[data-theme="dark"] .brand { gap: 10px; font-family: var(--awaira-display); font-weight: 650; }
:root[data-theme="dark"] .brand img { width: 38px; height: 38px; border-radius: 10px; }
:root[data-theme="dark"] .brand span { font-size: 1.4rem; letter-spacing: -0.05em; }
:root[data-theme="dark"] .primary-nav { font-size: .94rem; overflow: visible; }
:root[data-theme="dark"] .theme-switcher { border-color: var(--line); background: #211b29; }
:root[data-theme="dark"] .header-cta { border-radius: 12px; }

:root[data-theme="dark"] .awaira-light-hero {
  display: block;
  min-height: auto;
  padding: calc(78px + clamp(56px, 6vw, 94px)) clamp(22px, 5vw, 104px) 0;
  background:
    linear-gradient(rgba(18, 16, 23, .5), rgba(18, 16, 23, .5)),
    radial-gradient(46% 66% at 16% 38%, rgba(141, 83, 159, .23), transparent 72%),
    radial-gradient(34% 48% at 83% 25%, rgba(65, 104, 169, .19), transparent 73%),
    #121017;
  text-align: left;
}
:root[data-theme="dark"] .awaira-light-hero::before,
:root[data-theme="dark"] .awaira-light-hero::after { display: none; }
:root[data-theme="dark"] .awaira-light-hero .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(38px, 6vw, 94px);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
}
:root[data-theme="dark"] .awaira-light-hero .hero-inner { display: block; max-width: 660px; margin: 0; text-align: left; }
:root[data-theme="dark"] .awaira-light-hero .eyebrow {
  margin-bottom: 14px;
  color: #deb0e4;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
:root[data-theme="dark"] .awaira-light-hero h1 {
  max-width: 680px;
  margin: 0;
  color: #f6eff6;
  font-family: var(--awaira-display);
  font-size: clamp(2.6rem, 3.6vw, 4.15rem);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.0;
  text-align: left;
}
:root[data-theme="dark"] .awaira-light-hero h1 span,
:root[data-theme="dark"] .awaira-light-hero h1 em { display: block; }
:root[data-theme="dark"] .awaira-light-hero h1 em { color: #dfa8df; font-style: normal; }
:root[data-theme="dark"] .awaira-light-hero .lede {
  max-width: 630px;
  margin: 24px 0 0;
  color: #d5cbd7;
  font-size: clamp(1.08rem, 1.35vw, 1.34rem);
  line-height: 1.5;
  text-align: left;
}
:root[data-theme="dark"] .awaira-light-hero .hero-actions { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 12px; width: min(100%, 560px); margin-top: 32px; }
:root[data-theme="dark"] .awaira-light-hero .btn { width: 100%; min-height: 54px; padding: 0 18px 0 22px; border-radius: 14px; font-size: 1rem; font-weight: 750; letter-spacing: -.012em; }
:root[data-theme="dark"] .awaira-light-hero .btn-primary { background: var(--accent-grad); box-shadow: 0 15px 30px rgba(189, 118, 190, .16); }
:root[data-theme="dark"] .awaira-light-hero .btn-ghost { border-color: rgba(225, 196, 227, .26); background: rgba(255, 255, 255, .04); color: #f6eff6; }
:root[data-theme="dark"] .awaira-light-hero .hero-actions .btn:last-child { grid-column: 1 / -1; }
:root[data-theme="dark"] .awaira-light-hero .hero-action-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 1rem; line-height: 1; }
:root[data-theme="dark"] .awaira-light-hero .btn-ghost .hero-action-icon { background: rgba(255, 255, 255, .10); color: #efc5ee; font-size: .84rem; }
:root[data-theme="dark"] .awaira-light-hero .btn:hover .hero-action-icon { transform: translateX(2px); }
:root[data-theme="dark"] .awaira-light-hero .btn:last-child:hover .hero-action-icon { transform: translateY(2px); }
:root[data-theme="dark"] .awaira-light-hero .hero-subnote { margin: 16px 0 0; color: #aea3b1; font-size: .85rem; text-align: left; }

:root[data-theme="dark"] .hero-visual {
  position: relative;
  margin: 0;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(165, 133, 196, .5);
  border-radius: 24px;
  background: #0d1524;
  box-shadow: 0 28px 62px rgba(0, 0, 0, .42), 0 0 0 4px rgba(185, 129, 190, .1);
}
:root[data-theme="dark"] .hero-visual-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  padding: 0 9px 7px;
  color: #c4c7d4;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}
:root[data-theme="dark"] .hero-live { display: inline-flex; align-items: center; gap: 6px; color: #9ce1bb; }
:root[data-theme="dark"] .hero-live i { width: 7px; height: 7px; border-radius: 99px; background: #5bd596; box-shadow: 0 0 0 4px rgba(91, 213, 150, .13); }
:root[data-theme="dark"] .hero-visual img { display: block; width: 100%; height: auto; border-radius: 13px; }
:root[data-theme="dark"] .hero-visual figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  padding: 13px 8px 3px;
  color: #c9c4ce;
  font-size: .82rem;
  font-weight: 650;
}
:root[data-theme="dark"] .hero-visual figcaption span::before { content: "✓"; margin-right: 6px; color: #67d99d; }

:root[data-theme="dark"] .hero-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1500px;
  margin: clamp(46px, 6vw, 82px) auto 0;
  padding: 27px 20px;
  border-top: 1px solid rgba(225, 196, 227, .12);
}
:root[data-theme="dark"] .hero-benefits > div { display: flex; justify-content: center; gap: 12px; }
:root[data-theme="dark"] .hero-benefits b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(225, 196, 227, .16);
  border-radius: 12px;
  color: #d7a8dd;
  font-size: 1.35rem;
}
:root[data-theme="dark"] .hero-benefits p { display: grid; gap: 1px; margin: 0; line-height: 1.25; }
:root[data-theme="dark"] .hero-benefits strong { color: #eee7ef; font-size: .92rem; }
:root[data-theme="dark"] .hero-benefits span { color: #aea4b0; font-size: .8rem; }

@media (max-width: 1060px) {
  :root[data-theme="dark"] .awaira-light-hero .hero-layout { grid-template-columns: 1fr; max-width: 760px; }
  :root[data-theme="dark"] .awaira-light-hero .hero-inner { max-width: 720px; }
  :root[data-theme="dark"] .hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 680px) {
  :root[data-theme="dark"] .awaira-light-hero { padding: 42px 20px 0; }
  :root[data-theme="dark"] .awaira-light-hero h1 { font-size: clamp(2.85rem, 13vw, 4.2rem); }
  :root[data-theme="dark"] .awaira-light-hero .hero-actions { display: grid; grid-template-columns: 1fr; }
  :root[data-theme="dark"] .hero-visual { border-radius: 18px; }
  :root[data-theme="dark"] .hero-benefits { grid-template-columns: 1fr; gap: 20px; padding: 25px 6px; }
  :root[data-theme="dark"] .hero-benefits > div { justify-content: flex-start; }
}

/* Final download panel — keep Light mode airy and legible, instead of inheriting
   the dark campaign band used by the night theme. */
.final-inner::before { display: none; }
.final-logo {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border: 1px solid rgba(223, 196, 225, .32);
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* Mobile visitors see this instead of receiving a desktop installer. */
.mobile-waitlist-modal {
  width: min(440px, calc(100vw - 32px));
  border-color: rgba(119, 115, 183, .24);
  background: #fffaf2;
}
.mobile-waitlist-modal .modal-inner { padding: clamp(28px, 7vw, 38px); }
.mobile-waitlist-modal .modal-kicker { color: #7773b7; }
.mobile-waitlist-modal h3 {
  color: #33323d;
  font-family: var(--awaira-display);
  font-size: clamp(2rem, 7vw, 2.7rem);
  font-weight: 560;
  letter-spacing: -.05em;
  line-height: .98;
}
.mobile-waitlist-modal .modal-lead {
  margin-top: 15px;
  color: #62616c;
  font-size: 1rem;
  line-height: 1.55;
}
.mobile-waitlist-continue { width: 100%; margin-top: 12px; }

:root[data-theme="light"] .final-cta {
  background: #fffaf8 !important;
  border-block-color: #eadfe6 !important;
}
:root[data-theme="light"] .final-cta h2 { color: #34323c !important; }
:root[data-theme="light"] .final-cta > .final-inner > p,
:root[data-theme="light"] .final-cta .cta-subnote,
:root[data-theme="light"] .final-cta .form-note { color: #6c6873 !important; }
:root[data-theme="light"] .final-cta .btn-ghost {
  color: #3b3741;
  background: #fffefe;
  border-color: #e5d4e4;
}
:root[data-theme="light"] .final-cta .linux-trigger { color: #674569; }
:root[data-theme="light"] .final-cta .linux-trigger:hover,
:root[data-theme="light"] .final-cta .linux-trigger:focus-visible { color: #a969aa; }
:root[data-theme="light"] .final-logo {
  border-color: #ead9e9;
  box-shadow: 0 14px 30px rgba(74, 47, 72, .13);
}

/* ── Vertical density ────────────────────────────────────────────────────────────────────────
   The page had been reading as a stack of near-full-viewport bands: the shared `.section`
   rhythm alone spent ~88px above and below every one, the explainer headline was set at 4vw
   inside a narrow column (eight lines, 532px tall on its own), the seven collapsed FAQ rows sat
   on a 76px floor, and the desktop screenshot ran to 650px. Tightening the rhythm and capping
   the oversized media takes the full page from ~7670px to ~5930px at a 1600px viewport, with no
   change to layout structure. Deliberately unscoped by theme: light and dark share the rhythm. */
#top .section {
  padding-top: clamp(28px, 3vw, 46px);
  padding-bottom: clamp(28px, 3vw, 46px);
}
#top .testimonials-section {
  padding-top: clamp(26px, 2.7vw, 40px);
  padding-bottom: clamp(26px, 2.7vw, 40px);
}
#top .final-cta {
  padding-top: clamp(36px, 4vw, 58px);
  padding-bottom: clamp(36px, 4vw, 58px);
}
#top .section-head { margin-bottom: clamp(16px, 2vw, 26px); }
#top .section-sub { margin-top: 8px; }

/* Keep the paper behind the overlaid header while reserving room for navigation. */
:root[data-theme="light"] .awaira-light-hero,
:root[data-theme="dark"] .awaira-light-hero { padding-top: calc(78px + clamp(34px, 3.6vw, 58px)); }
:root[data-theme="light"] .hero-benefits,
:root[data-theme="dark"] .hero-benefits {
  margin-top: clamp(28px, 3vw, 46px);
  padding-block: 20px;
}

/* Seven collapsed FAQ rows on a 76px floor were 546px of mostly empty space. */
#top #faq .faq summary { min-height: 52px; padding-top: 13px; padding-bottom: 13px; }
#top .faq { gap: 8px; }

/* Product showcase — the tallest band on the page. Both media caps are widths, so the
   screenshots scale with their aspect ratios intact. */
#top .app-preview-heading { margin-bottom: clamp(16px, 2vw, 26px); }
#top .platform-showcase {
  margin-top: clamp(16px, 2vw, 24px);
  gap: clamp(18px, 2.2vw, 28px);
}
#top .platform-desktop .app-shot { max-width: 700px; margin-inline: auto; }
#top .mobile-native-screens { max-width: 460px; margin-inline: auto; }
#top .mobile-refresh {
  margin-top: clamp(12px, 1.6vw, 18px);
  gap: clamp(24px, 3.2vw, 52px);
}
#top .ios-app-store-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
  max-width: 880px;
  margin: clamp(20px, 3vw, 34px) auto 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #e4d7e4;
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf9, #f9f2fa);
  box-shadow: 0 18px 42px rgba(80, 55, 74, .10);
}
#top .ios-app-store-copy .platform-label { margin: 0 0 8px; color: #85558d; }
#top .ios-app-store-copy h3 {
  margin: 0;
  color: #393541;
  font-family: var(--awaira-display);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 560;
  letter-spacing: -.05em;
  line-height: 1;
}
#top .ios-app-store-copy > p:not(.platform-label) { max-width: 48ch; margin: 12px 0 18px; color: #69636e; line-height: 1.55; }
#top .ios-app-store-link { display: inline-flex; gap: 9px; min-height: 48px; padding-inline: 18px; }
#top .ios-app-store-link svg { width: 19px; height: 21px; flex: 0 0 auto; }
#top .ios-app-store-qr {
  display: grid;
  gap: 8px;
  place-items: center;
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid #e2d9e4;
  border-radius: 16px;
  background: #fff;
  color: #6e6573;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
#top .ios-app-store-qr:hover { border-color: #a87fb0; box-shadow: 0 10px 24px rgba(111, 69, 118, .12); }
#top .ios-app-store-qr img { display: block; width: 132px; height: 132px; image-rendering: pixelated; }
@media (max-width: 640px) {
  #top .ios-app-store-note { grid-template-columns: 1fr; padding: 24px; }
  #top .ios-app-store-qr { display: none; }
}

/* Keep the two product platforms in one compact, side-by-side showcase on wide screens.
   Each platform keeps its own label, so the comparison remains clear without a second tall band. */
@media (min-width: 1061px) {
  #top .platform-showcase {
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, .85fr);
    align-items: start;
    max-width: 1420px;
    gap: clamp(28px, 4vw, 64px);
  }
  #top .platform-desktop .app-shot { max-width: none; }
  #top .platform-mobile { width: 100%; }
  #top .mobile-refresh {
    grid-template-columns: 1fr;
    max-width: none;
    margin-top: 0;
    padding: 0;
    gap: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #top .mobile-showcase-intro > span { display: none; }
  #top .mobile-showcase-intro h3 { max-width: 15ch; font-size: clamp(2rem, 2.8vw, 3rem); }
  #top .mobile-showcase-intro p { max-width: 43ch; margin-top: 12px; }
  #top .mobile-native-screens { max-width: none; }
}

/* About / blogs */
#top .about-section .app-preview-heading { margin-top: clamp(24px, 2.6vw, 40px); }
#top .about-section .app-shot { margin-top: clamp(16px, 2vw, 26px); }

/* ── Awareness story ──────────────────────────────────────────────────────
   A small narrative, not a row of interchangeable feature cards. The illustrated
   objects make the product's boundary (a private cue, on one computer) legible
   before the visitor reaches the explanatory copy. */
#top .about-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(78px, 9vw, 132px);
  padding-bottom: clamp(70px, 8vw, 118px);
  border-bottom: 0;
  background:
    radial-gradient(circle at 9% 70%, rgba(185, 225, 212, .38), transparent 18%),
    radial-gradient(circle at 94% 28%, rgba(207, 194, 239, .28), transparent 22%),
    #fbf7ef;
}
#top .about-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(24px, calc((100% - var(--maxw)) / 2));
  right: max(24px, calc((100% - var(--maxw)) / 2));
  height: 1px;
  background: rgba(54, 53, 65, .14);
}
#top .about-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr);
  column-gap: clamp(40px, 9vw, 146px);
  align-items: end;
  max-width: var(--maxw);
  margin: 0 auto clamp(46px, 6vw, 78px);
}
#top .about-intro .eyebrow {
  grid-column: 1;
  margin: 0 0 18px;
  color: #7773b7;
  font-size: .73rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}
#top .about-intro h2 {
  grid-column: 1;
  margin: 0;
  color: #30303a;
  font-family: var(--awaira-display);
  font-size: clamp(3rem, 5.5vw, 5.7rem);
  font-weight: 530;
  letter-spacing: -.062em;
  line-height: .93;
}
#top .about-intro h2 em {
  color: #7773b7;
  font-weight: 530;
}
#top .about-intro > p:last-child {
  grid-column: 2;
  margin: 0 0 5px;
  color: #62616c;
  font-size: clamp(1.05rem, 1.35vw, 1.27rem);
  line-height: 1.53;
}

#top .awareness-story {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  max-width: var(--maxw);
  margin: 0 auto;
}
#top .principle-card {
  position: relative;
  min-height: 345px;
  padding: clamp(16px, 1.6vw, 24px);
  border: 1px solid rgba(54, 53, 65, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .42);
}
#top .story-visual {
  position: relative;
  height: 176px;
  margin: 0 0 clamp(21px, 2.2vw, 30px);
  overflow: hidden;
  border-radius: 16px;
}
#top .desk-scene { background: #dcecdf; }
#top .scene-sun {
  position: absolute; top: 24px; right: 31px; width: 40px; height: 40px;
  border-radius: 50%; background: #f8d890;
}
#top .scene-window {
  position: absolute; top: 0; left: 28px; width: 75px; height: 83px;
  border: 8px solid rgba(255,255,255,.68); border-top: 0; border-radius: 0 0 36px 36px;
}
#top .scene-window::before, #top .scene-window::after {
  content: ""; position: absolute; background: rgba(255,255,255,.68);
}
#top .scene-window::before { width: 7px; height: 75px; left: 26px; top: 0; }
#top .scene-window::after { width: 60px; height: 7px; left: 0; top: 34px; }
#top .scene-screen {
  position: absolute; right: 31px; bottom: 24px; width: 119px; height: 77px;
  border: 7px solid #46465b; border-radius: 8px; background: #aab8df;
  box-shadow: 0 10px 0 -4px #46465b;
}
#top .scene-screen::after { content: ""; position: absolute; width: 58px; height: 6px; bottom: -15px; left: 23px; border-radius: 4px; background: #46465b; }
#top .scene-arm {
  position: absolute; left: -8px; bottom: 12px; width: 140px; height: 43px;
  border: 18px solid #c88672; border-bottom: 0; border-left: 0; border-radius: 0 56px 0 0;
  transform: rotate(-12deg);
}
#top .scene-cup {
  position: absolute; left: 39px; bottom: 20px; width: 25px; height: 31px;
  border-radius: 4px 4px 10px 10px; background: #f3b8a8;
}
#top .scene-cup::after { content: ""; position: absolute; right: -12px; top: 6px; width: 12px; height: 13px; border: 4px solid #f3b8a8; border-left: 0; border-radius: 0 10px 10px 0; }

#top .cue-scene { background: #eee7f5; }
#top .cue-face {
  position: absolute; top: 27px; left: 50%; width: 84px; height: 106px;
  border: 6px solid #4b4b5c; border-radius: 45% 45% 48% 48%; transform: translateX(-50%);
}
#top .cue-face::before { content: ""; position: absolute; top: 37px; left: 20px; width: 8px; height: 8px; border-radius: 50%; background: #4b4b5c; box-shadow: 31px 0 #4b4b5c; }
#top .cue-face::after { content: ""; position: absolute; bottom: 21px; left: 27px; width: 22px; height: 10px; border-bottom: 4px solid #4b4b5c; border-radius: 0 0 16px 16px; }
#top .cue-hand {
  position: absolute; right: 26px; bottom: 5px; width: 84px; height: 68px;
  border: 18px solid #c88672; border-left: 0; border-bottom: 0; border-radius: 0 65px 0 0;
  transform: rotate(-36deg);
}
#top .cue-path { position: absolute; right: 95px; bottom: 49px; width: 43px; height: 38px; border-top: 2px dashed #8a7bb5; border-radius: 50%; transform: rotate(-31deg); }
#top .cue-ring { position: absolute; border: 1px solid rgba(119,115,183,.55); border-radius: 50%; }
#top .cue-ring-one { width: 138px; height: 138px; left: 50%; top: 10px; transform: translateX(-50%); }
#top .cue-ring-two { width: 166px; height: 166px; left: 50%; top: -4px; transform: translateX(-50%); opacity: .42; }

#top .private-scene { display: grid; place-items: center; background: #dce9e6; }
#top .private-device {
  position: relative; z-index: 1; width: 138px; height: 92px; padding: 14px;
  border: 7px solid #424957; border-radius: 9px; background: #f8faf7;
  box-shadow: 0 12px 0 -5px #424957;
}
#top .private-device::after { content: ""; position: absolute; bottom: -19px; left: 39px; width: 47px; height: 6px; border-radius: 5px; background: #424957; }
#top .private-device span { display: block; width: 35px; height: 7px; border-radius: 8px; background: #b0cbca; box-shadow: 0 15px #dedebd, 0 30px #c9b9db; }
#top .private-shield {
  position: absolute; z-index: 3; right: calc(50% - 91px); top: 36px; display: grid; place-items: center;
  width: 51px; height: 51px; border-radius: 50%; color: #fff; background: #7773b7; box-shadow: 0 0 0 7px rgba(119,115,183,.14);
}
#top .private-shield svg { width: 26px; height: 26px; }
#top .private-dots { position: absolute; top: 31px; left: 27px; color: #758e8d; font-size: 1.4rem; letter-spacing: 5px; }

#top .principle-copy h3 {
  margin: 0 0 9px;
  color: #33323d;
  font-family: var(--awaira-display);
  font-size: clamp(1.6rem, 2.05vw, 2.15rem);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1.02;
}
#top .principle-copy p { max-width: 31ch; margin: 0; color: #62616c; font-size: 1rem; line-height: 1.56; }

@media (max-width: 760px) {
  #top .about-section { padding-top: 70px; }
  #top .about-intro { display: block; margin-bottom: 42px; }
  #top .about-intro .eyebrow { margin-bottom: 14px; }
  #top .about-intro h2 { font-size: clamp(2.9rem, 13vw, 4.5rem); }
  #top .about-intro > p:last-child { max-width: 38ch; margin-top: 25px; }
  #top .awareness-story { grid-template-columns: 1fr; }
  #top .principle-card { display: grid; grid-template-columns: minmax(150px, .78fr) 1fr; gap: 23px; min-height: 0; padding: 16px; }
  #top .story-visual { height: 154px; margin: 0; }
  #top .principle-copy { align-self: center; padding-right: 16px; }
  #top .principle-copy h3 { font-size: clamp(1.58rem, 6vw, 2rem); }
  #top .principle-copy p { font-size: .93rem; }
}
@media (max-width: 480px) {
  #top .principle-card { display: block; padding: 16px; }
  #top .story-visual { height: 175px; margin-bottom: 22px; }
  #top .principle-copy { padding-right: 0; }
}

/* ── Footer ──────────────────────────────────────────────────────────────────────────────────
   A dark, rounded closing card that carries the product's private-by-design story instead of
   ending on a generic row of legal links. */
footer {
  max-width: none;
  margin: clamp(20px, 4vw, 64px) clamp(16px, 4vw, 74px) 0;
  padding: clamp(34px, 5vw, 68px) clamp(24px, 6vw, 88px) 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: clamp(26px, 3vw, 42px) clamp(26px, 3vw, 42px) 0 0;
  /* The footer is dark by design and all its text is white. Both global resets in styles.min.css
     hit it — the gradient is stripped and `footer` is on the `background-color: var(--bg)
     !important` list — which left white text on cream, i.e. an invisible footer. */
  background-color: #0d0e10 !important;
  background-image: radial-gradient(55% 90% at 92% 8%, rgba(55, 133, 155, .15), transparent 66%) !important;
  color: rgba(255, 255, 255, .72);
}
footer .footer-top {
  display: grid;
  grid-template-columns: minmax(180px, .82fr) minmax(270px, 1.12fr) minmax(250px, 1fr);
  gap: clamp(34px, 6vw, 92px);
  max-width: 1380px;
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom-color: rgba(255, 255, 255, .12);
}
footer .footer-brand { gap: 14px; max-width: 260px; }
footer .footer-brand .brand { color: #fff; }
footer .footer-brand .brand img { width: 42px; height: 42px; border-radius: 12px; }
footer .footer-brand .brand span { font-family: var(--awaira-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.05em; }
footer .footer-brand > p { color: rgba(255, 255, 255, .52); font-size: .93rem; line-height: 1.5; }
footer .footer-social { gap: 8px; margin-top: 4px; }
footer .footer-social a { width: 34px; height: 34px; border-color: rgba(255, 255, 255, .15); border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .78); }
footer .footer-social a:hover { border-color: #8ed5dc; background: rgba(142, 213, 220, .12); color: #a9edf2; }
footer .footer-social svg { width: 16px; height: 16px; }
footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(108px, 1fr)); align-content: start; gap: 28px clamp(26px, 4vw, 68px); }
footer .footer-link-group { display: grid; align-content: start; gap: 9px; }
footer .footer-link-group strong { margin-bottom: 3px; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
footer .footer-links a { color: rgba(255, 255, 255, .67); font-size: .96rem; font-weight: 590; line-height: 1.35; }
footer .footer-links a:hover { color: #9de2e9; }
footer .footer-app-note { max-width: 345px; }
footer .footer-app-kicker { margin: 0 0 11px; color: #82d7df; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
footer .footer-app-note h2 { max-width: 12ch; margin: 0; color: #fff; font-family: var(--awaira-display); font-size: clamp(1.6rem, 2.35vw, 2.35rem); font-weight: 550; letter-spacing: -.055em; line-height: 1.02; }
footer .footer-app-note > p:not(.footer-app-kicker) { margin: 16px 0 0; color: rgba(255, 255, 255, .56); font-size: .94rem; line-height: 1.5; }
footer .footer-app-note ul { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .74); font-size: .83rem; line-height: 1.35; }
footer .footer-app-note li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
footer .footer-app-note li span { color: #8bdbe2; font-size: .95rem; line-height: 1; }
footer .footer-bottom { max-width: 1380px; padding-top: 19px; color: rgba(255, 255, 255, .42); font-size: .81rem; }
footer .footer-bottom a { color: rgba(255, 255, 255, .72); }
@media (max-width: 960px) {
  footer .footer-top { grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr); }
  footer .footer-app-note { grid-column: 1 / -1; max-width: 560px; }
  footer .footer-app-note h2 { max-width: none; }
}
@media (max-width: 600px) {
  footer { margin: 18px 12px 0; padding: 34px 24px 20px; border-radius: 26px 26px 0 0; }
  footer .footer-top { grid-template-columns: 1fr; gap: 34px; }
  footer .footer-links { max-width: 360px; }
  footer .footer-app-note { grid-column: auto; }
  footer .footer-bottom { display: grid; gap: 9px; }
}

/* ── Feature tour ────────────────────────────────────────────────────────────────────────────
   The cards embed the app's real dashboard widgets (.dash-*) instead of screenshots. Those
   widgets take every colour from the --s* custom properties that styles.min.css declares on
   .app-shot for the dark product mock, so re-declaring the same set here is all it takes to
   render them on the light landing page. */
.features-section .feature-grid {
  --sbg: transparent;
  --srail: #f6f1ea;
  --scard: #fffdfa;
  --sline: rgba(58, 47, 57, .14);
  --stext: #34343d;
  --smut: #6b6673;
  --sfaint: #928c98;
  --steal: #a976ac;
  --sblue: #6c4ff0;
  --sflame: #ff8116;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1240px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.4;
  color: var(--stext);
}
.features-section .feature-card-wide { grid-column: span 2; }
.features-section .feature-card-full { grid-column: 1 / -1; }

.features-section .feature-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(74, 48, 72, .05);
}
.features-section .feature-visual {
  display: block;
  margin: 0 0 clamp(14px, 1.6vw, 18px);
  padding: clamp(10px, 1.2vw, 14px);
  border-radius: 13px;
  background: var(--srail);
}
.features-section .feature-card h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--awaira-display);
  font-size: clamp(1.06rem, 1.15vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.features-section .feature-card > p {
  margin: 7px 0 0;
  color: var(--muted);
  font-family: var(--awaira-sans);
  font-size: .92rem;
  line-height: 1.5;
}

/* The mock sizes these for a 1120px window; inside a card they need to sit flush and drop the
   fixed heights they carry for the app-window grid. */
.features-section .feature-visual .dash-card,
.features-section .feature-visual .dash-top {
  min-height: 0;
  margin: 0;
  border: 0;
  background: 0 0;
  grid-column: auto;
  grid-row: auto;
}
.features-section .feature-visual .dash-card-title {
  color: var(--stext);
  font-family: var(--awaira-sans);
  font-size: 13px;
  font-weight: 700;
}
.features-section .feature-visual .dash-card-sub { color: var(--smut); font-size: 10.5px; }
.features-section .feature-visual .dash-head img { filter: none; }
.features-section .feature-visual .dash-zones-note b { color: var(--stext); font-weight: 700; }

/* Goal progress: the app draws a current→goal range rather than a single fill. */
.features-section .dash-goal { border: 0; }
.features-section .dash-goal > small { color: var(--steal); }
.features-section .dash-goal strong { font-size: 15px; }
.features-section .dash-goal strong em { color: var(--steal); font-style: normal; font-weight: 700; }
.features-section .dash-bar-range {
  position: relative;
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(58, 47, 57, .1);
  /* .dash-bar clips its children; the handles and their labels sit outside the track. */
  overflow: visible;
}
.features-section .dash-bar-range i {
  position: absolute;
  inset: 0 32% 0 48%;
  /* .dash-bar i sets width:82% for the mock's single-fill bar; that beats the right inset. */
  width: auto;
  height: auto;
  border-radius: 999px;
  background: var(--steal);
}
.features-section .dash-bar-range u {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid var(--steal);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  text-decoration: none;
}
.features-section .dash-bar-range u:first-of-type { left: 48%; }
.features-section .dash-bar-range u:last-of-type { left: 68%; }
.features-section .dash-bar-range u::after {
  content: attr(data-label);
  position: absolute;
  top: 15px;
  left: 50%;
  color: var(--steal);
  font-size: 8.5px;
  transform: translateX(-50%);
}

/* Year chart: twelve months instead of the mock's seven days. */
.features-section .dash-year-chart .dash-chart-bars,
.features-section .dash-year-chart .dash-chart-labels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}
.features-section .dash-year-chart .dash-chart-bars i { background: #c99bce; opacity: 1; }
.features-section .dash-year-chart .dash-chart-bars i:nth-child(10) { background: var(--sflame); }
.features-section .dash-year-chart .dash-chart-labels i { color: var(--sfaint); font-size: 8px; text-align: center; }
.features-section .dash-year-chart em { color: var(--sflame); }

/* Badges */
.features-section .badge-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.features-section .badge-row li {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid rgba(176, 122, 68, .22);
  border-radius: 50%;
  aspect-ratio: 1;
  align-content: center;
  background: radial-gradient(70% 70% at 50% 30%, #fff, #fbf3e8);
  text-align: center;
}
.features-section .badge-row li .badge-medal {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #c9c3ba;
}
.features-section .badge-row li .badge-medal svg { width: 24px; height: 24px; }
.features-section .badge-row li b {
  color: var(--smut);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
}
.features-section .badge-row li i {
  color: var(--sfaint);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.features-section .badge-row li.is-earned { border-color: rgba(176, 122, 68, .5); }
.features-section .badge-row li.is-earned .badge-medal { color: #b07a44; }
.features-section .badge-row li.is-earned b { color: var(--stext); }
.features-section .badge-row li.is-earned i { color: #b07a44; }

@media (max-width: 1060px) {
  .features-section .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .features-section .feature-card-wide { grid-column: 1 / -1; }
  .features-section .badge-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .features-section .feature-grid { grid-template-columns: 1fr; }
  .features-section .feature-card-wide,
  .features-section .feature-card-full { grid-column: auto; }
  .features-section .badge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Light-mode corrections for the embedded widgets.
   The breakdown bars are drawn as a linear-gradient in styles.min.css, which the global
   `body * { background-image: none !important }` reset erases — so they are rebuilt here out of
   solid background-colours, which that reset does not touch. */
.features-section .dash-breakdown u {
  position: relative;
  min-width: 60px;
  overflow: hidden;
  background: rgba(58, 47, 57, .09);
}
.features-section .dash-breakdown u::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--share, .5) * 100%);
  border-radius: 999px;
  background: var(--series, #a976ac);
}
.features-section .dash-breakdown em { color: var(--sfaint); }
.features-section .dash-breakdown strong { color: var(--stext); }

/* The rate/total toggle ships with a dark pill. */
.features-section .dash-chart-title > span {
  background: rgba(58, 47, 57, .07);
  border: 1px solid var(--sline);
}
.features-section .dash-chart-title i { color: var(--smut); }
.features-section .dash-chart-title i.on { background: var(--steal); color: #fff; }

/* Months with no activity should read as empty, not as stubs. */
.features-section .dash-year-chart .dash-chart-bars i[style*="height: 0"] { min-height: 0; opacity: 0; }

/* Cards share a row height, and each card's visual box takes the slack with its widget centred
   inside. Letting the cards hug their content instead left the row ragged; letting the visual
   stay fixed left a hole under the copy. */
.features-section .feature-grid { align-items: stretch; }
.features-section .feature-visual {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
}

/* Goal progress: label the two handles under the range. */
.features-section .dash-bar-range { margin-bottom: 14px; }

/* ── Scroll reveal ───────────────────────────────────────────────────────────────────────────
   Sections and their items ease in as they enter the viewport. The hidden starting state is
   gated behind .js-reveal on <html>, which app.js sets only once it is running — without it the
   page renders fully visible, so content is never hidden from a crawler or a failed script.
   Honouring prefers-reduced-motion is handled in JS by revealing everything immediately. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .62s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; }
}

/* ── Landing-page blog feature ───────────────────────────────────────────────────────────────
   One generous lead card and two companion cards make the reading area feel editorial rather
   than like a directory. Scoped to the landing page; the /blogs archive remains unchanged. */
/* !important throughout this block is required, not decorative: styles.min.css carries two global
   resets — `body * { background-image: none !important }` and a `.section, .section-alt { ...
   background-color: var(--bg) !important }` list — which between them strip both the gradient and
   the colour off every tile here, leaving white text on cream. The hero carries the same note. *//* Blog row: the same card language as the rest of the page — the page's cream underneath, white
   cards with a thin plum line, dark ink and a plum kicker. The saturated tiles this replaced sat
   outside the palette and ran about twice this tall. */
.blog-feature-section {
  max-width: none;
  padding: clamp(30px, 3.6vw, 52px) clamp(20px, 5vw, 7vw);
  background-color: #fcf8ed !important;
  background-image: none !important;
  border-block: 1px solid rgba(114, 93, 121, .13);
}
.blog-feature-section .section-head { max-width: 680px; margin: 0 auto clamp(16px, 2vw, 24px); text-align: center; }
.blog-feature-section .section-head .eyebrow { margin-bottom: 8px; color: #8a5d91; font-family: var(--awaira-sans); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.blog-feature-section .section-head h2 { margin: 0; color: #302d38; font-family: var(--awaira-display); font-size: clamp(1.5rem, 2.3vw, 2.05rem); font-weight: 560; letter-spacing: -.045em; line-height: 1.08; }
.blog-feature-section .section-head .section-sub { max-width: 600px; margin: 9px auto 0; color: #6d6663; font-size: clamp(.9rem, 1.1vw, .98rem); line-height: 1.5; }
.blog-feature-section .blog-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.blog-feature-section .blog-index li { min-width: 0; }
.blog-feature-section .blog-index a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid rgba(114, 93, 121, .15);
  border-radius: 14px;
  background-color: #fffdfa;
  color: #34313b;
  text-decoration: none;
  transition: border-color .16s ease;
}
.blog-feature-section .blog-index a:hover,
.blog-feature-section .blog-index a:focus-visible { border-color: #b186b8; }
.blog-feature-section .blog-index-kicker { align-self: flex-start; color: #8a5d91; font-size: .68rem; font-weight: 750; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.blog-feature-section .blog-index-kicker i { margin: 0 .5em; font-style: normal; opacity: .55; }
.blog-feature-section .blog-index h3 { max-width: 22ch; margin: 0; color: #302d38; font-family: var(--awaira-display); font-size: clamp(1.05rem, 1.35vw, 1.28rem); font-weight: 560; letter-spacing: -.035em; line-height: 1.16; }
.blog-feature-section .blog-index p { max-width: 38ch; margin: 0; color: #6d6673; font-size: .87rem; line-height: 1.45; }
.blog-feature-section .blog-index-go {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: auto;
  border-radius: 50%;
  background: #f2e9f4;
  color: #84558c;
  font-size: 1rem;
  transition: transform .16s ease;
}
.blog-feature-section .blog-index a:hover .blog-index-go { transform: translateX(3px); }
.blog-feature-section .post-list-more { margin: clamp(16px, 2vw, 24px) auto 0; text-align: center; }
.blog-feature-section .post-list-more .btn { border-color: rgba(114, 93, 121, .22); background: #fffdfa; color: #4a4140; }
@media (max-width: 860px) {
  .blog-feature-section .blog-index { grid-template-columns: 1fr; }
  .blog-feature-section .blog-index h3 { max-width: none; }
}

/* A clear final fork: visitors choose a device before they choose a plan. */
.device-chooser {
  padding: clamp(34px, 4.6vw, 62px) clamp(20px, 6vw, 48px);
  background: radial-gradient(circle at 50% 0, rgba(255,255,255,.9), transparent 48%), linear-gradient(135deg, #f5ebf7, #eee7fb);
  text-align: center;
}
.device-chooser-heading h2 {
  margin: 0;
  color: #2e2b36;
  font-family: var(--awaira-display);
  font-size: clamp(1.9rem, 3.1vw, 3rem);
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.device-chooser-heading p { margin: 7px 0 0; color: #65606d; font-size: clamp(.95rem, 1.3vw, 1.1rem); }
.device-chooser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); max-width: 1000px; margin: clamp(18px, 2.2vw, 28px) auto 0; text-align: left; }
.device-choice { min-height: 0; padding: clamp(18px, 2.2vw, 26px); border: 1px solid rgba(114, 93, 121, .13); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 14px 32px rgba(81, 55, 83, .09); }
.device-choice h3 { margin: 0 0 13px; color: #302d38; font-family: var(--awaira-display); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 560; letter-spacing: -.05em; }
.device-choice-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.device-choice-actions a, .device-choice-actions button, .device-choice-android { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid #e1dce4; border-radius: 9px; background: #fff; color: #413d49; font: inherit; font-size: .94rem; font-weight: 680; text-decoration: none; cursor: pointer; }
.device-choice-actions a:hover, .device-choice-actions button:hover, .device-choice-android:hover { border-color: #a983af; background: #fffafd; }
.device-choice-actions svg, .device-choice-android svg { width: 22px; height: 22px; flex: 0 0 auto; }
.device-choice > p { margin: 14px 0 0; color: #76707d; font-size: .9rem; text-align: center; }
.device-choice-link { display: flex; justify-content: center; gap: 8px; margin-top: 9px; color: #84558c; font-size: .9rem; font-weight: 720; text-decoration: underline; text-underline-offset: 4px; }
.phone-choice-actions { display: grid; gap: 8px; max-width: 300px; margin: 0 auto; }
/* Store-badge pills: one dark shape for both platforms, with the small line over the big one the
   way app-store badges are set. Replaces the earlier mismatched pair (a half-sized App Store
   lockup beside a plain Android button). */
.store-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid #3a2f39;
  border-radius: 999px;
  background: #3a2f39;
  color: #fff;
  text-decoration: none;
}
.store-pill:hover { border-color: #4b3d4a; background: #4b3d4a; }
.store-pill-glyph { width: 23px; height: 23px; flex: 0 0 auto; }
.store-pill span {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: left;
}
.store-pill strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.16;
}
/* Scan codes sit under the pair, small enough to read as a detail rather than a second CTA. */
.store-qr-row {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 18px);
  margin-top: 12px;
}
.store-qr-row figure {
  margin: 0;
  text-align: center;
}
.store-qr-row img {
  display: block;
  width: clamp(64px, 7vw, 82px);
  height: auto;
  padding: 6px;
  border: 1px solid #e1dce4;
  border-radius: 12px;
  background-color: #fff;
}
.store-qr-row figcaption {
  margin-top: 6px;
  color: #77717e;
  font-size: .72rem;
  font-weight: 600;
}
/* The quiet third option, in the reference's muted style rather than as another button. */
.web-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 13px;
  color: #6f6a77;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.web-continue svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: #8a5d91;
}
.web-continue:hover { color: #3a2f39; text-decoration: underline; text-underline-offset: 4px; }
:root[data-theme="dark"] .store-qr-row img,
:root:not([data-theme="light"]) .store-qr-row img { border-color: var(--line); }
@media (max-width: 430px) {
  .store-pill { padding: 0 18px; }
  .store-pill strong { font-size: 1.05rem; }
}
@media (max-width: 700px) { .device-chooser-grid { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .device-choice { padding: 22px 16px; } .device-choice-actions { gap: 6px; } .device-choice-actions a, .device-choice-actions button { gap: 5px; padding: 0 6px; font-size: .82rem; } .device-choice-actions svg { width: 18px; height: 18px; } }

/* The line under the hero blends halfway into the background too, so the hero and the band below
   it read as one surface. */
.hero.awaira-light-hero { border-bottom-color: color-mix(in srgb, var(--line) 50%, transparent); }