/* Shared Ova website family. Reference measurements: 89px header, 48px desktop H1. */
.wrap {
  width:min(1040px,calc(100% - 48px))
}
.header-shell {
  position:sticky;
  top:0;
  z-index:30;
  background:white;
  transition:box-shadow .2s
}
.header-shell.scrolled {
  box-shadow:0 3px 18px #35202b0c
}
.site-header {
  height:89px;
  padding-block:0;
  gap:28px
}
.brand {
  font-size:31px;
  gap:7px;
  line-height:1
}
.brand img {
  width:30px;
  height:30px
}
.site-header nav {
  gap:30px;
  font-size:13px
}
.site-header .button-small {
  min-height:48px;
  padding:12px 27px
}
.menu-toggle {
  display:none
}
.hero-band {
  background:#fff6f8
}
.hero {
  min-height:500px;
  grid-template-columns:1.1fr .9fr;
  gap:12px
}
.hero-copy {
  padding:48px 0 55px;
  position:relative;
  z-index:2
}
.hero .eyebrow {
  font-size:12px;
  letter-spacing:.065em;
  margin-bottom:22px
}
.hero h1 {
  font-size:48px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.04em
}
.hero .lead {
  font-size:20px;
  line-height:1.55;
  max-width:545px;
  margin:22px 0 20px;
  color:#645963
}
.hero-art {
  height:480px;
  min-width:0;
  width:100%;
  margin:0;
  overflow:visible
}
.studio-hero {
  position:absolute;
  width:480px;
  max-width:none;
  height:520px;
  object-fit:contain;
  top:10px;
  left:-14px
}
.art-caption {
  position:absolute;
  bottom:8px;
  right:4px;
  z-index:2;
  background:#fff6f8df;
  color:#6b5964;
  padding:2px 5px;
  font-size:10px
}
.hero-assurance {
  font-size:12px;
  color:#6c626a;
  margin:9px 0 0
}
.store-buttons {
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px
}
.play-badge {
  display:flex;
  width:176px;
  height:62px;
  flex-shrink:0;
  margin-left:-10px
}
.play-badge img {
  width:176px;
  height:68px;
  max-width:none;
  margin-top:-6px
}
.ios-store {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:5px;
  gap:4px
}
.ios-coming-soon {
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  height:44px;
  border-radius:7px
}
.ios-coming-soon img {
  width:148px;
  height:44px
}
.ios-store>span {
  font-size:10px;
  color:#76616e;
  line-height:1.2
}
.play-badge,.ios-coming-soon {
  transition:transform .2s,opacity .2s
}
.play-badge:hover,.ios-coming-soon:hover {
  transform:translateY(-2px);
  opacity:.9
}
h2 {
  font-size:34px;
  line-height:1.25;
  letter-spacing:-.03em
}
.benefits {
  padding-block:34px
}
.benefits strong {
  font-size:14px
}
.benefits p {
  font-size:12px
}
.product {
  padding-block:80px
}
.section-heading {
  margin-bottom:40px
}
.section-heading>p:last-child {
  font-size:16px
}
.product-grid {
  gap:60px;
  grid-template-columns:.8fr 1.2fr
}
.product-stage {
  height:610px;
  background:transparent;
  border-radius:0;
  padding-top:15px
}
.product-stage .phone {
  width:247px;
  border:1px solid #e0d9dc;
  padding:5px;
  box-shadow:0 14px 45px #4b243b12
}
.feature-choice {
  border-radius:14px;
  padding:20px
}
.feature-choice .feature-title {
  font-size:21px;
  font-weight:600
}
.feature-choice .feature-description {
  font-size:14px
}
.everyday {
  min-height:510px
}
.everyday-copy {
  padding:55px max(30px,calc((100vw - 1040px)/2)) 55px 55px
}
.everyday-copy h2 {
  font-size:40px;
  line-height:1.2
}
.history-section {
  padding-block:80px
}
.history-art {
  background:#fcf8fa;
  border-radius:0;
  height:470px;
  padding-top:26px
}
.history-art .phone {
  width:260px;
  border:1px solid #e0d9dc;
  padding:4px;
  box-shadow:0 14px 45px #4b243b12;
  transform:none!important
}
figcaption h3 {
  font-size:22px
}
.data-section {
  background:#fff6f8;
  border-radius:0;
  padding:42px;
  gap:55px;
  margin-bottom:80px
}
.privacy-art {
  width:180px;
  height:180px;
  object-fit:contain;
  margin:-15px 0 18px
}
.data-intro .eyebrow,.data-list>div>span,.data-intro .text-link {
  color:var(--pink)
}
.data-intro h2 {
  font-size:34px
}
.data-list>div {
  border-color:#e9dce2
}
.data-list p {
  color:#6b626c
}
.faq {
  gap:60px;
  padding-bottom:80px
}
.closing {
  padding:45px;
  border-radius:0;
  margin-bottom:65px
}
.closing h2 {
  font-size:36px
}
.closing .store-buttons {
  flex-shrink:0
}
.footer-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:35px;
  border-bottom:1px solid var(--line);
  padding-bottom:32px
}
.footer-brand>p {
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  margin:21px 0 15px
}
.footer-brand .store-buttons {
  gap:4px
}
.footer-brand .play-badge {
  width:145px;
  height:53px;
  margin-left:-8px
}
.footer-brand .play-badge img {
  width:145px;
  height:56px
}
.footer-brand .ios-coming-soon,.footer-brand .ios-coming-soon img {
  width:123px;
  height:37px
}
.footer-brand .ios-store {
  padding-top:4px
}
.site-footer nav {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  font-weight:400
}
.site-footer nav h2 {
  font-size:11px;
  line-height:1.5;
  letter-spacing:.02em;
  font-weight:700;
  margin:7px 0 9px
}
.site-footer nav a {
  min-height:32px;
  display:block;
  line-height:1.6;
  overflow-wrap:anywhere
}
.footer-bottom {
  padding-top:23px;
  color:var(--muted);
  font-size:11px
}
.footer-bottom p:first-child {
  max-width:860px;
  margin-bottom:15px
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  max-width:calc(100% - 32px);
  width:max-content;
  display:flex;
  align-items:center;
  gap:20px;
  background:#30252e;
  color:white;
  padding:13px 17px 13px 22px;
  box-shadow:0 8px 35px #27182226;
  border-radius:14px;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s;
  font-size:14px
}
.toast.visible {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}
.toast button {
  background:none;
  border:0;
  color:white;
  font-size:24px;
  min-width:36px;
  min-height:36px;
  cursor:pointer
}
.document-band {
  background:#fff6f8;
  padding-block:24px;
  font-size:12px;
  color:#796b75
}
.breadcrumb {
  color:#ff3f73
}
.document-layout {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:65px;
  padding-block:55px 85px;
  align-items:start
}
.document-toc {
  position:sticky;
  top:120px;
  max-height:calc(100vh - 150px);
  overflow:auto
}
.document-toc>p {
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:#6f616b;
  margin-bottom:16px
}
.document-toc a {
  display:block;
  padding:6px 0;
  font-size:12px;
  line-height:1.6;
  color:#756872
}
.document-toc a:hover {
  color:var(--pink)
}
.document-content {
  max-width:740px;
  min-width:0
}
.document-content h1 {
  font-size:48px;
  font-weight:600;
  line-height:1.2
}
.document-content .lead {
  font-size:18px;
  margin:22px 0;
  max-width:none
}
.document-content .meta {
  font-size:12px;
  color:#7a6c75;
  padding-bottom:28px;
  border-bottom:1px solid var(--line)
}
.document-content h2 {
  font-size:23px;
  font-weight:600;
  margin:36px 0 15px;
  scroll-margin-top:115px
}
.document-content p,.document-content li {
  font-size:15px;
  line-height:1.85
}
.document-content a {
  color:var(--pink);
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}
.document-content ul,.document-content ol {
  padding-left:24px
}
.document-content li {
  padding:3px 0
}
.document-content .notice {
  background:#fff3f7;
  border-left:3px solid #f26798;
  padding:19px 22px;
  font-size:15px;
  line-height:1.8;
  margin:20px 0
}
.contact-hero {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:65px;
  align-items:center;
  padding-block:60px
}
.contact-hero h1 {
  font-size:54px;
  line-height:1.15;
  font-weight:600
}
.contact-hero .lead {
  font-size:18px;
  max-width:470px;
  margin:25px 0
}
.contact-hero>img {
  width:350px;
  height:350px;
  object-fit:contain
}
.contact-address {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 0
}
.support-content {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  padding-block:60px 85px;
  border-top:1px solid var(--line)
}
.support-content h2 {
  font-size:36px
}
.support-content p {
  color:var(--muted);
  font-size:15px;
  margin-top:20px
}
.support-content h3 {
  font-size:22px;
  margin:0 0 16px
}
.support-content ul,.support-content ol {
  padding-left:23px;
  font-size:15px;
  margin:0 0 24px
}
.support-content li {
  padding-block:5px
}
.support-note {
  background:#fff3f7;
  padding:20px 23px;
  margin:25px 0 35px!important
}
.support-content a {
  color:var(--pink);
  text-decoration:underline;
  text-underline-offset:4px
}
.medical-note {
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:13px!important
}
.motion-ready .reveal {
  opacity:1;
  transform:none
}
@keyframes hero-arrive {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.studio-hero {
  animation:hero-arrive .9s ease-out both
}
.hero-copy {
  animation:hero-arrive .65s ease-out both
}
@media(max-width:1050px) and (min-width:761px) {
  .hero h1 {
    font-size:42px
  }
  .hero .lead {
    font-size:18px
  }
  .studio-hero {
    width:430px;
    left:-30px
  }
  .site-header nav {
    gap:20px
  }
  .product-grid {
    gap:30px
  }
  .footer-grid {
    gap:20px
  }
  .data-section {
    padding:35px;
    gap:35px
  }
  .closing {
    padding:35px
  }
  .closing h2 {
    font-size:32px
  }
  .document-layout {
    gap:35px;
    grid-template-columns:180px minmax(0,1fr)
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    height:72px;
    padding:0;
    flex-wrap:nowrap;
    gap:14px
  }
  .brand {
    font-size:29px
  }
  .brand img {
    width:28px;
    height:28px
  }
  .site-header>.brand {
    position:absolute;
    left:50%;
    transform:translateX(-50%)
  }
  .site-header .button-small {
    margin-left:auto;
    font-size:12px;
    min-height:40px;
    padding:10px 17px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:44px;
    height:44px;
    padding:11px 8px;
    background:none;
    border:0;
    cursor:pointer;
    margin-left:-8px
  }
  .menu-toggle span {
    display:block;
    width:23px;
    height:2px;
    background:var(--ink);
    border-radius:2px
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    padding:15px 24px 23px;
    margin:0;
    background:white;
    border-top:1px solid #f0e8ec;
    box-shadow:0 12px 20px #4324360c;
    width:100%;
    flex-direction:column;
    gap:6px;
    font-size:15px
  }
  .site-header nav.is-open {
    display:flex
  }
  .site-header nav a {
    min-height:44px
  }
  .hero {
    display:block;
    min-height:0
  }
  .hero-copy {
    text-align:left;
    padding:38px 0 12px
  }
  .hero .eyebrow {
    font-size:10px;
    margin-bottom:18px;
    letter-spacing:.06em
  }
  .hero h1 {
    font-size:32px;
    line-height:1.25
  }
  .hero .lead {
    font-size:17px;
    line-height:1.6;
    margin:22px 0 18px
  }
  .hero-art {
    height:410px;
    width:100%;
    max-width:420px;
    margin:0 auto;
    overflow:hidden
  }
  .studio-hero {
    width:400px;
    height:440px;
    top:0;
    left:50%;
    margin-left:-200px
  }
  .art-caption {
    font-size:9px;
    right:0;
    bottom:6px
  }
  .hero-assurance {
    font-size:11px;
    margin-top:8px
  }
  .store-buttons {
    gap:8px
  }
  .play-badge {
    width:164px
  }
  .play-badge img {
    width:164px;
    height:63px;
    margin-top:-4px
  }
  .ios-store {
    padding-top:5px
  }
  .ios-coming-soon,.ios-coming-soon img {
    width:140px;
    height:42px
  }
  .benefits {
    padding-block:30px;
    gap:22px
  }
  .benefits strong {
    font-size:14px
  }
  .benefits p {
    font-size:12px
  }
  .product {
    padding-block:60px
  }
  .section-heading h2 {
    font-size:29px
  }
  .section-heading>p:last-child {
    font-size:15px
  }
  .product-stage {
    height:555px
  }
  .product-stage .phone {
    width:230px
  }
  .product-grid {
    gap:20px
  }
  .feature-choice {
    padding:20px 16px
  }
  .feature-choice .feature-title {
    font-size:19px
  }
  .feature-choice .feature-description {
    font-size:14px
  }
  .everyday-image {
    height:350px
  }
  .everyday-copy {
    padding:36px 25px 42px
  }
  .everyday-copy h2 {
    font-size:34px
  }
  .history-section {
    padding-block:60px
  }
  .history-heading h2 {
    font-size:30px
  }
  .history-art {
    height:450px
  }
  .history-art .phone {
    width:245px
  }
  .data-section {
    padding:28px 24px;
    gap:15px;
    margin-bottom:60px
  }
  .privacy-art {
    width:155px;
    height:155px;
    margin:0 0 20px
  }
  .data-intro h2 {
    font-size:30px
  }
  .faq {
    gap:25px;
    padding-bottom:60px
  }
  .faq-title h2 {
    font-size:30px
  }
  .closing {
    padding:30px 24px;
    gap:25px
  }
  .closing h2 {
    font-size:32px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:28px 22px
  }
  .footer-brand {
    grid-column:1/-1
  }
  .footer-brand .store-buttons {
    flex-wrap:nowrap
  }
  .site-footer nav {
    justify-content:flex-start;
    gap:7px
  }
  .site-footer nav a {
    font-size:12px;
    min-height:34px
  }
  .footer-bottom {
    font-size:11px
  }
  .document-band {
    padding-block:20px
  }
  .document-layout {
    display:block;
    padding-block:30px 55px
  }
  .document-toc {
    position:static;
    max-height:none;
    overflow:visible;
    padding-bottom:25px;
    border-bottom:1px solid var(--line);
    margin-bottom:30px;
    display:flex;
    gap:7px 15px;
    flex-wrap:wrap
  }
  .document-toc>p {
    width:100%;
    margin-bottom:5px
  }
  .document-toc a {
    padding:3px 0;
    font-size:11px
  }
  .document-content h1 {
    font-size:36px
  }
  .document-content .lead {
    font-size:17px
  }
  .document-content h2 {
    font-size:22px;
    scroll-margin-top:95px
  }
  .document-content p,.document-content li {
    font-size:14px
  }
  .contact-hero {
    grid-template-columns:1fr;
    gap:20px;
    padding-block:40px
  }
  .contact-hero h1 {
    font-size:40px
  }
  .contact-hero .lead {
    font-size:17px
  }
  .contact-hero>img {
    width:220px;
    height:220px;
    margin:0 auto
  }
  .support-content {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:40px 55px
  }
  .support-content h2 {
    font-size:30px
  }
  .toast {
    font-size:13px;
    bottom:15px;
    gap:12px
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size:28px
  }
  .hero h1 br {
    display:none
  }
  .hero .lead {
    font-size:16px
  }
  .hero-art {
    height:350px
  }
  .studio-hero {
    width:345px;
    height:380px;
    margin-left:-172px
  }
  .store-buttons {
    gap:5px
  }
  .play-badge {
    width:145px;
    height:56px
  }
  .play-badge img {
    width:145px;
    height:56px;
    margin-top:0
  }
  .ios-coming-soon,.ios-coming-soon img {
    width:125px;
    height:38px
  }
  .ios-store {
    padding-top:8px
  }
  .ios-store>span {
    font-size:9px
  }
  .site-header>.brand {
    font-size:25px
  }
  .site-header>.brand img {
    width:25px;
    height:25px
  }
  .site-header .button-small {
    padding-inline:13px
  }
  .footer-grid {
    gap:25px 15px
  }
  .product-stage {
    height:525px
  }
  .product-stage .phone {
    width:215px
  }
}
@media(prefers-reduced-motion:reduce) {
  .studio-hero,.hero-copy {
    animation:none
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .header-shell,.toast,.play-badge,.ios-coming-soon {
    transition:none
  }
  .play-badge:hover,.ios-coming-soon:hover {
    transform:none
  }
}

/* Hero v4: brand promise supported by inspectable product facts. */
.hero-trust {
  display:flex;
  flex-wrap:wrap;
  gap:5px 18px;
  padding:0;
  margin:12px 0 7px;
  list-style:none;
  color:#685863;
  font-size:12px;
}
.hero-trust li::before {
  content:'✓';
  color:#ff3f73;
  font-weight:700;
  margin-right:6px;
}
.hero-privacy-link {
  font-size:12px;
  color:#ff3f73;
  text-decoration:underline;
  text-underline-offset:4px;
}
@media(max-width:760px) {
  .hero-trust {font-size:11px;gap:5px 12px;}
  .hero-privacy-link {font-size:11px;}
}

/* Three-part hero composition: keep both feature panels fully visible. */
.studio-hero {width:560px;height:460px;top:10px;left:-40px;}
@media(max-width:1050px) and (min-width:761px) {
  .studio-hero {width:470px;height:450px;left:-30px;}
}
@media(max-width:760px) {
  .hero-art {height:320px;overflow:visible;}
  .studio-hero {width:100%;height:auto;max-width:100%;left:0;top:20px;margin-left:0;}
}
@media(max-width:360px) {
  .hero-art {height:260px;}
}

/* v5: real product UI and restrained surfaces. */
.hero h1 {
  font-size:52px;
  line-height:1.23;
  letter-spacing:-.04em;
  max-width:570px
}
.hero .lead {
  font-size:21px;
  max-width:530px
}
.hero-real {
  height:500px;
  overflow:visible
}
.hero-disc {
  position:absolute;
  width:415px;
  height:415px;
  left:50px;
  top:80px;
  background:#fbe1eb;
  border-radius:50%
}
.real-device {
  position:absolute;
  left:126px;
  top:32px;
  width:248px;
  background:#161619;
  border:5px solid #202023;
  border-radius:40px;
  box-shadow:0 0 0 1px #b9b6bc;
  overflow:hidden;
  z-index:2
}
.real-device>img {
  width:100%;
  height:auto;
  border-radius:34px
}
.device-island {
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:67px;
  height:18px;
  background:#111114;
  border-radius:20px
}
.hero-pattern,.hero-trend {
  position:absolute;
  background:#fff;
  border:1px solid #ece6e9;
  border-radius:12px;
  box-shadow:0 5px 14px #30202a0a;
  z-index:3
}
.hero-pattern {
  width:225px;
  left:-28px;
  top:326px;
  padding:13px 12px 12px
}
.hero-pattern>p,.hero-trend>p {
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  margin:0 0 9px;
  letter-spacing:-.025em
}
.hero-pattern-crop {
  position:relative;
  width:100%;
  aspect-ratio:1020/465;
  overflow:hidden
}
.hero-pattern-crop img {
  position:absolute;
  width:118.2353%;
  max-width:none;
  left:-9.8039%;
  top:-188.172%
}
.hero-trend {
  width:194px;
  right:-28px;
  top:106px;
  padding:14px 13px 10px
}
.hero-trend>p {
  margin-bottom:3px
}
.hero-trend>span {
  font-size:10px;
  color:#786d74;
  display:block
}
.hero-trend svg {
  width:100%;
  height:auto;
  margin-top:9px;
  display:block
}
.feature-stories {
  display:grid;
  gap:80px
}
.feature-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:70px
}
.feature-visual {
  height:510px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff3f7;
  overflow:hidden
}
.pattern-detail-crop {
  position:relative;
  width:380px;
  max-width:86%;
  aspect-ratio:1100/1235;
  overflow:hidden;
  border-radius:21px;
  background:white
}
.pattern-detail-crop img {
  position:absolute;
  width:109.6364%;
  max-width:none;
  left:-4.8182%;
  top:-40.8097%
}
.report-visual {
  background:#f6f3f8
}
.report-document-crop {
  position:relative;
  width:365px;
  max-width:83%;
  aspect-ratio:1006/1135;
  overflow:hidden;
  background:white;
  border:1px solid #e8e4e8;
  box-shadow:0 8px 18px #3e253310;
  transform:rotate(-2deg)
}
.report-document-crop img {
  position:absolute;
  width:119.8807%;
  max-width:none;
  left:-9.9404%;
  top:-34.0088%
}
.feature-story-copy h3 {
  font-size:34px;
  line-height:1.25;
  letter-spacing:-.035em;
  font-weight:600;
  margin-bottom:22px
}
.feature-story-copy>p:not(.eyebrow) {
  font-size:16px;
  line-height:1.8;
  color:var(--muted)
}
.feature-story-copy .feature-detail {
  font-size:12px!important;
  line-height:1.7!important;
  margin-top:23px
}
.feature-story-copy .text-link {
  display:inline-block;
  margin-top:5px
}
@media(max-width:1050px) and (min-width:761px) {
  .hero h1 {
    font-size:43px
  }
  .hero .lead {
    font-size:18px
  }
  .real-device {
    left:87px;
    width:225px;
    top:52px
  }
  .hero-pattern {
    left:-25px;
    width:190px;
    top:333px
  }
  .hero-trend {
    right:-14px;
    width:169px;
    top:100px
  }
  .hero-disc {
    width:335px;
    height:335px;
    left:26px;
    top:130px
  }
  .feature-story {
    gap:40px
  }
  .feature-story-copy h3 {
    font-size:30px
  }
  .feature-visual {
    height:460px
  }
}
@media(max-width:760px) {
  .hero h1 {
    font-size:32px;
    line-height:1.3
  }
  .hero h1 br {
    display:none
  }
  .hero .lead {
    font-size:17px
  }
  .hero-real {
    height:415px;
    max-width:420px;
    margin:0 auto
  }
  .real-device {
    left:calc(50% - 81px);
    width:192px;
    top:25px;
    border-width:4px;
    border-radius:32px
  }
  .real-device>img {
    border-radius:26px
  }
  .device-island {
    width:50px;
    height:14px;
    top:8px
  }
  .hero-disc {
    width:310px;
    height:310px;
    left:calc(50% - 155px);
    top:68px
  }
  .hero-pattern {
    width:158px;
    left:0;
    top:285px;
    padding:10px 9px
  }
  .hero-pattern>p,.hero-trend>p {
    font-size:11px
  }
  .hero-trend {
    width:142px;
    right:0;
    top:75px;
    padding:10px
  }
  .hero-trend>span {
    font-size:8px
  }
  .feature-stories {
    gap:45px
  }
  .feature-story {
    grid-template-columns:1fr;
    gap:28px
  }
  .feature-visual {
    height:460px
  }
  .feature-story-copy h3 {
    font-size:30px;
    margin-bottom:18px
  }
  .feature-story-copy>p:not(.eyebrow) {
    font-size:15px
  }
  .feature-story-copy .eyebrow {
    margin-bottom:15px
  }
  .report-story .feature-story-copy {
    grid-row:2
  }
  .feature-story-copy .feature-detail {
    margin-top:17px
  }
  .pattern-detail-crop {
    width:360px;
    max-width:88%
  }
  .report-document-crop {
    width:350px;
    max-width:82%
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size:30px
  }
  .hero-real {
    height:370px
  }
  .real-device {
    width:166px;
    left:calc(50% - 72px);
    top:24px;
    border-radius:28px
  }
  .real-device>img {
    border-radius:22px
  }
  .device-island {
    width:44px;
    height:12px;
    top:6px
  }
  .hero-disc {
    width:270px;
    height:270px;
    left:calc(50% - 135px);
    top:70px
  }
  .hero-pattern {
    width:132px;
    top:250px
  }
  .hero-trend {
    width:124px;
    top:80px
  }
  .hero-pattern>p,.hero-trend>p {
    font-size:10px
  }
  .feature-visual {
    height:390px
  }
  .feature-story-copy h3 {
    font-size:28px
  }
}
/* Keep the prediction readable while the feature excerpts overlap calendar space. */
.hero-trend {
  top:40px;
}
@media(max-width:1050px) and (min-width:761px) {
  .hero-trend {
    top:50px;
  }
}
@media(max-width:760px) {
  .hero-trend {
    top:12px;
  }
}
@media(max-width:360px) {
  .hero-trend {
    top:0;
  }
}
@media(min-width:761px) and (max-width:1000px) {
  .hero {
    grid-template-columns:1fr;
    gap:0;
  }
  .hero-copy {
    padding:40px 0 12px;
    max-width:620px;
  }
  .hero h1 {
    font-size:48px;
  }
  .hero-real {
    width:500px;
    margin:0 auto;
    height:500px;
  }
  .real-device {
    left:170px;
    top:30px;
    width:248px;
  }
  .hero-disc {
    left:50px;
    top:80px;
    width:415px;
    height:415px;
  }
  .hero-pattern {
    left:0;
    top:330px;
    width:225px;
  }
  .hero-trend {
    right:-20px;
    top:40px;
    width:194px;
  }
}

/* v6: app-matched brand color and balanced device presentation. */
:root {--pink:#ff3f73;}
.brand,.text-link,.hero-privacy-link,.hero-trust li::before {color:var(--pink);}
.button {background:var(--pink);border-color:var(--pink);}
.button:hover {background:var(--pink);filter:brightness(.96);}
.hero-real {height:460px;}
.hero-pattern {top:304px;}
.product-stage {height:auto;min-height:700px;overflow:visible;}
.product-stage .phone {width:280px;}
.carousel-controls {display:flex;align-items:center;justify-content:center;gap:14px;min-height:38px;margin-top:14px;}
.carousel-dots {display:flex;align-items:center;gap:2px;}
.carousel-dots button {position:relative;background:none;border:0;width:27px;height:32px;padding:0;cursor:pointer;}
.carousel-dots button::before {content:'';display:block;width:7px;height:7px;border-radius:50%;background:#d5cdd2;margin:auto;transition:background .2s;}
.carousel-dots button[aria-current=true]::before {background:var(--pink);}
.carousel-toggle {border:0;background:none;color:#756a72;width:32px;height:32px;cursor:pointer;font-size:16px;padding:0;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(min-width:761px) and (max-width:1000px) {.hero-real{height:460px;}}
@media(max-width:760px) {.hero-real{height:360px;}.hero-pattern{top:235px;}.product-stage{min-height:650px;}.product-stage .phone{width:258px;}}
@media(max-width:360px) {.hero-real{height:325px;}.hero-pattern{top:220px;}.product-stage{min-height:590px;}.product-stage .phone{width:230px;}}
@media(prefers-reduced-motion:reduce) {.carousel-dots button::before{transition:none;}}

/* Background-free canonical mark plus Ova wordmark. */
.brand {color:#ff3f73;gap:6px;font-size:32px;font-weight:700;letter-spacing:-.055em;}
.brand img {width:36px;height:36px;border-radius:0;}
@media(max-width:760px) {.brand{font-size:29px;}.brand img{width:32px;height:32px;}}
@media(max-width:360px) {.site-header>.brand{font-size:26px;}.site-header>.brand img{width:29px;height:29px;}}

.product-stage,.feature-choices {min-width:0;}
@media(max-width:760px) {.product-grid{grid-template-columns:minmax(0,1fr);}.product-stage{width:100%;max-width:460px;}}

/* v7 logo lettering and compact, neutral carousel indicators. */
@font-face {font-family:'Ova Wordmark';src:url('assets/LobsterTwo-BoldItalic.a462a2b527.woff2') format('woff2');font-style:italic;font-weight:700;font-display:swap;}
.brand {gap:5px;letter-spacing:0;}
.brand img {width:26px;height:26px;}
.brand>span {font-family:'Ova Wordmark',cursive;font-size:34px;font-style:italic;font-weight:700;letter-spacing:-.025em;line-height:1;}
.carousel-controls {gap:0;}
.carousel-dots {gap:0;}
.carousel-dots button {width:16px;height:32px;}
.carousel-dots button::before {width:7px;height:7px;background:#d5d5d5;}
.carousel-dots button[aria-current=true]::before {background:#252129;}
@media(max-width:760px) {.brand img{width:24px;height:24px;}.brand>span{font-size:32px;}}
@media(max-width:360px) {.site-header>.brand img{width:23px;height:23px;}.site-header>.brand>span{font-size:30px;}}

/* v8: equal visible store-button frames; original badge artwork stays proportional. */
.store-buttons {--store-width:164px;--store-height:50px;--store-art-height:44px;--google-art-height:65.4762px;gap:12px;}
.store-buttons .play-badge,.store-buttons .ios-coming-soon {position:relative;display:flex;align-items:center;justify-content:center;width:var(--store-width);height:var(--store-height);min-height:var(--store-height);background:#000;border:1px solid #a6a6a6;border-radius:8px;margin:0;padding:0;overflow:hidden;flex-shrink:0;}
.store-buttons .play-badge img {position:absolute;width:auto;height:var(--google-art-height);max-width:none;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;}
.store-buttons .ios-coming-soon img {position:static;width:auto;height:var(--store-art-height);max-width:100%;margin:0;object-fit:contain;}
.store-buttons .ios-store {padding-top:0;gap:5px;}
.footer-grid {grid-template-columns:1.5fr 1fr 1fr 1fr;}
.footer-brand .store-buttons {--store-width:134px;--store-height:44px;--store-art-height:36px;--google-art-height:53.5714px;gap:10px;}
@media(max-width:760px) {.footer-grid{grid-template-columns:1fr 1fr;}.closing .store-buttons{--store-width:134px;--store-height:44px;--store-art-height:36px;--google-art-height:53.5714px;gap:10px;}}
@media(max-width:360px) {.store-buttons{--store-width:134px;--store-height:44px;--store-art-height:36px;--google-art-height:53.5714px;gap:10px;}}

/* Use one shared frame rather than showing a second badge outline inside it. */
.store-buttons .play-badge img {clip-path:inset(calc((var(--google-art-height) - var(--store-art-height))/2 + 1px) calc(var(--google-art-height)*.164 + 1px) round 1px);}
.store-buttons .ios-coming-soon img {clip-path:inset(2px round 8px);}

.store-buttons .play-badge img {clip-path:inset(calc((var(--google-art-height) - var(--store-art-height))/2 + 3px) calc(var(--google-art-height)*.164 + 3px));}
.store-buttons .ios-coming-soon img {clip-path:inset(4px);}