/* Standalone landing styles. Existing legal pages keep style.css. */

:root{

  color-scheme:light;

  --paper:#f7f6f2;

  --ink:#282e31;

  --muted:#5c666b;

  --brand:#526d79;

  --wine:#ad4d71;

  --line:#dedfda;

  --radius:30px;

  font-family:Inter,"Segoe UI",Arial,sans-serif;

  color:var(--ink);

  background:var(--paper);

  font-synthesis:none

}

*{

  box-sizing:border-box

}

html{

  scroll-behavior:smooth;

  scroll-padding-top:105px

}

body{

  margin:0

}

img{

  display:block;

  max-width:100%;

  height:auto

}

a{

  color:inherit;

  text-underline-offset:5px

}

button{

  font:inherit

}

a,button{

  -webkit-tap-highlight-color:transparent

}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{

  outline:3px solid var(--wine);

  outline-offset:6px

}

button:disabled{

  opacity:.35;

  cursor:default

}

.container{

  width:min(1220px,calc(100% - 80px));

  margin-inline:auto

}

h1,h2,h3,p,figure{

  margin:0

}

h1,h2,h3{

  font-weight:650;

  letter-spacing:-.05em;

  line-height:1.07

}

h1{

  font-size:clamp(3.25rem,5.6vw,5.25rem)

}

h2{

  font-size:clamp(2.25rem,4vw,3.65rem)

}

h3{

  font-size:clamp(2.15rem,3.5vw,3.2rem)

}

p{

  font-size:1.0625rem;

  line-height:1.75;

  color:var(--muted)

}

.eyebrow{

  color:var(--brand);

  font-size:.75rem;

  font-weight:750;

  letter-spacing:.14em;

  line-height:1.6

}

.skip-link{

  position:fixed;

  top:8px;

  left:12px;

  z-index:10;

  padding:12px;

  background:white;

  transform:translateY(-150%)

}

.skip-link:focus{

  transform:translateY(0)

}

/* Header and hero */

.site-header{

  position:sticky;

  top:0;

  z-index:5;

  background:rgba(247,246,242,.96);

  border-bottom:1px solid var(--line);

  backdrop-filter:blur(12px)

}

.nav{

  min-height:92px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px

}

.brand{

  display:flex;

  gap:11px;

  align-items:center;

  text-decoration:none;

  font-size:1.25rem;

  font-weight:730;

  letter-spacing:-.035em;

  flex-shrink:0

}

.brand img{

  border-radius:10px

}

.brand small{

  display:block;

  font-size:.625rem;

  letter-spacing:.19em;

  color:var(--muted);

  margin-top:3px;

  font-weight:600

}

.nav-links{

  display:flex;

  gap:34px;

  margin-left:auto;

  margin-right:35px

}

.nav-links a,.site-footer nav a{

  text-decoration:none;

  font-size:.875rem;

  font-weight:550

}

.nav-links a:hover,.site-footer nav a:hover{

  color:var(--wine)

}

.button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:24px;

  background:var(--brand);

  color:white;

  min-height:48px;

  padding:12px 23px;

  border-radius:10px;

  text-decoration:none;

  font-weight:600;

  font-size:.875rem;

  transition:background .2s,transform .2s

}

.button:hover{

  background:#3f5965;

  transform:translateY(-2px)

}

.hero{

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:22px;

  min-height:720px;

  padding-block:55px 48px

}

.hero-copy{

  padding-bottom:25px;

  position:relative;

  z-index:1

}

.hero h1{

  margin-block:23px 27px

}

.hero h1 span{

  color:var(--ink)

}

.intro{

  max-width:450px;

  font-size:1.1875rem;

  line-height:1.7

}

.store-links{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:12px;

  margin-top:32px

}

.store-links a{

  display:block;

  border-radius:8px;

  transition:transform .2s

}

.store-links a:hover{

  transform:translateY(-3px)

}

.store-links img{

  height:48px;

  width:auto

}

.small-note{

  font-size:.8125rem;

  margin-top:13px

}

.text-link{

  font-weight:600;

  font-size:.875rem;

  text-decoration:none;

  display:inline-flex;

  align-items:center;

  gap:22px

}

.text-link:hover{

  color:var(--wine)

}

.hero-explore{

  margin-top:38px

}

.hero-visual{

  height:600px;

  position:relative;

  min-width:0;

  isolation:isolate

}

.hero-backdrop{

  position:absolute;

  inset:65px -10px 32px 20px;

  background:#e5eaeb;

  border-radius:48% 48% 28px 28px

}

.hero-phone{

  position:absolute;

  width:48%;

  filter:drop-shadow(0 18px 15px #24394524)

}

.phone-center{

  width:53%;

  left:24%;

  top:12px;

  z-index:2

}

.phone-left{

  left:-2%;

  top:73px;

  transform:rotate(-10deg)

}

.phone-right{

  right:-4%;

  top:68px;

  transform:rotate(10deg)

}

.visual-caption{

  position:absolute;

  bottom:0;

  left:0;

  right:0;

  text-align:center;

  color:var(--brand);

  font-size:.8125rem;

  letter-spacing:.025em

}

/* Frames surround real, unaltered app captures. */

.hero-phone,.feature-phone,.dual-screens img{

  border:5px solid #303437;

  border-radius:30px;

  background:white;

  box-shadow:0 0 0 1px #a8aba9

}

.art-habit .feature-phone{

  width:320px;

  border-radius:20px;

  margin-top:26px

}

/* Product proof and alternating feature panels */

.proof{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-block:1px solid var(--line);

  padding-block:29px

}

.proof>a,.proof>div{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:5px;

  text-decoration:none;

  border-right:1px solid var(--line)

}

.proof>:last-child{

  border:0

}

.proof strong{

  font-size:1.85rem;

  letter-spacing:-.04em;

  font-weight:650

}

.proof span:not(.star){

  font-size:.8125rem;

  color:var(--muted)

}

.star{

  color:var(--wine);

  font-size:1.3rem

}

.features{

  padding-top:110px

}

.section-heading{

  text-align:center;

  margin-bottom:65px

}

.section-heading h2{

  margin:17px 0 20px

}

.section-heading>p:last-child:not(.eyebrow){

  max-width:530px;

  margin-inline:auto

}

.feature{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:95px;

  align-items:center;

  margin-bottom:80px

}

.feature-copy{

  padding-inline:28px 0

}

.feature-copy .eyebrow span{

  color:var(--wine);

  margin-right:13px

}

.feature h3{

  margin-block:21px 24px

}

.feature-copy>p:not(.eyebrow){

  max-width:425px

}

.feature .feature-detail{

  font-size:.875rem;

  margin-top:24px;

  border-top:1px solid var(--line);

  padding-top:21px

}

.feature.reverse .feature-copy{

  grid-column:2;

  grid-row:1;

  padding-inline:0 28px

}

.feature.reverse .feature-art{

  grid-column:1;

  grid-row:1

}

.feature-art{

  height:540px;

  border-radius:var(--radius);

  position:relative;

  display:flex;

  justify-content:center;

  align-items:flex-start;

  overflow:hidden;

  border:1px solid #283a4010

}

.feature-phone{

  width:270px;

  margin-top:21px;

  filter:drop-shadow(0 16px 12px #2539421a)

}

.art-study{

  background:#e7eceb

}

.art-mastery{

  background:#ebe7ee

}

.art-maps{

  background:#e5eaf0

}

.art-quiz{

  background:#e6ebed

}

.art-habit{

  background:#f0e6e4

}

.panel-caption{

  position:absolute;

  bottom:0;

  left:0;

  right:0;

  padding:24px 12px 23px;

  background:inherit;

  text-align:center;

  font-size:.8125rem;

  font-weight:550;

  color:var(--brand)

}

.dual-screens{

  align-items:center;

  gap:0

}

.dual-screens img{

  width:49%;

  flex-shrink:0;

  filter:drop-shadow(0 14px 12px #25394222)

}

.dual-screens img:first-child{

  transform:translate(10px,45px) rotate(-7deg)

}

.dual-screens img:last-child{

  transform:translate(-10px,-15px) rotate(7deg)

}

.tags{

  display:flex;

  gap:9px;

  flex-wrap:wrap;

  margin-top:25px

}

.tags span{

  border:1px solid #d2d8d9;

  border-radius:100px;

  padding:8px 14px;

  font-size:.8125rem;

  color:var(--brand)

}

/* Audience, reviews and gallery */

.audience{

  background:#e6ebeb;

  padding:85px 0;

  margin-top:30px

}

.audience-inner{

  text-align:center

}

.audience h2{

  margin:20px 0 25px

}

.audience p:not(.eyebrow){

  max-width:620px;

  margin:auto

}

.audience .tags{

  justify-content:center;

  margin-top:32px

}

.audience .tags span{

  border-color:#c2cdcf;

  background:#f7f6f266

}

.reviews{

  padding-block:110px 90px

}

.review-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px

}

.review{

  padding:28px 30px 30px;

  border:1px solid var(--line);

  border-radius:20px;

  display:flex;

  flex-direction:column;

  background:#fdfcf9

}

.quote-mark{

  color:var(--wine);

  font-size:4rem;

  line-height:1;

  height:55px;

  font-family:Georgia,serif

}

.review blockquote{

  font-size:1.6rem;

  letter-spacing:-.035em;

  line-height:1.4;

  font-weight:550;

  margin:0 0 35px

}

.review figcaption{

  margin-top:auto

}

.review figcaption strong{

  display:block;

  font-size:.875rem;

  margin-bottom:7px

}

.review figcaption a{

  font-size:.75rem;

  color:var(--muted);

  text-decoration:none

}

.reviews-note{

  text-align:center;

  font-size:.75rem;

  margin-top:28px

}

.reviews-note a{

  white-space:nowrap

}

.gallery-section{

  padding-block:65px 75px;

  background:#edeeea

}

.gallery-heading{

  display:flex;

  justify-content:space-between;

  gap:30px;

  align-items:end;

  margin-bottom:38px

}

.gallery-heading h2{

  margin-top:16px

}

.gallery-controls{

  display:flex;

  gap:10px

}

.gallery-controls[hidden]{

  display:none

}

.gallery-controls button{

  background:transparent;

  border:1px solid #c5cece;

  border-radius:50%;

  width:46px;

  height:46px;

  cursor:pointer;

  font-size:1.35rem;

  color:var(--brand)

}

.gallery-controls button:not(:disabled):hover{

  background:white

}

.gallery-track{

  display:grid;

  grid-auto-flow:column;

  grid-auto-columns:calc((100% - 60px)/4);

  gap:20px;

  overflow-x:auto;

  scroll-snap-type:x mandatory;

  scrollbar-color:#a0afb3 transparent;

  padding:2px 2px 20px

}

.gallery-track figure{

  scroll-snap-align:start;

  background:white;

  border-radius:16px;

  overflow:hidden;

  border:1px solid #dce0dd

}

.gallery-track img{

  width:100%

}

/* Download, footer and support */

.download{

  padding-block:90px

}

.download-panel{

  background:#435e6b;

  color:#fff;

  border-radius:32px;

  padding:58px 35px 55px;

  text-align:center

}

.download-icon{

  border-radius:17px;

  margin:0 auto 24px

}

.download .eyebrow{

  color:#d6e3e7

}

.download h2{

  font-size:clamp(2.75rem,5vw,4.4rem);

  margin-block:18px 20px

}

.download p{

  color:#e1e8eb

}

.download .store-links{

  justify-content:center;

  margin-top:28px

}

.download .small-note{

  color:#d0dbdf

}

.site-footer{

  padding-bottom:30px

}

.footer-top{

  display:flex;

  justify-content:space-between;

  gap:30px;

  align-items:center;

  padding-bottom:32px;

  border-bottom:1px solid var(--line)

}

.site-footer nav{

  display:flex;

  gap:25px;

  flex-wrap:wrap

}

.footer-bottom{

  display:flex;

  justify-content:space-between;

  gap:50px;

  padding-top:25px

}

.footer-bottom p{

  font-size:.75rem;

  line-height:1.6;

  max-width:590px

}

.footer-bottom p:last-child{

  flex-shrink:0

}

.support-main{

  max-width:780px;

  padding-block:85px 100px;

  min-height:65vh

}

.support-main h1{

  margin-block:20px 27px

}

.support-main h2{

  font-size:1.5rem;

  letter-spacing:-.025em;

  margin-bottom:12px

}

.support-main section{

  padding-block:30px;

  border-bottom:1px solid var(--line)

}

.support-main .button{

  margin-top:24px

}

.support-main a:not(.button){

  overflow-wrap:anywhere

}

@media(min-width:1500px){

  .gallery-track{

    grid-auto-columns:calc((100% - 100px)/6)

  }

}

@media(max-width:1100px){

  .container{

    width:calc(100% - 56px)

  }

  .hero{

    min-height:630px

  }

  .hero-visual{

    height:500px

  }

  .hero-backdrop{

    inset:65px 0 25px

  }

  .hero-phone{

    top:80px

  }

  .phone-center{

    top:30px

  }

  .feature{

    gap:45px

  }

  .feature-copy{

    padding-left:0

  }

  .feature-art{

    height:500px

  }

  .feature-phone{

    width:250px

  }

  .nav-links{

    margin-right:10px;

    gap:24px

  }

  .footer-bottom{

    gap:25px

  }

}

@media(max-width:800px){

  html{

    scroll-padding-top:90px

  }

  .container{

    width:calc(100% - 40px)

  }

  .nav{

    min-height:78px;

    gap:15px

  }

  .nav-links{

    gap:18px;

    margin-right:0

  }

  .nav-links a{

    font-size:.8125rem

  }

  .nav-links a:last-child{

    display:none

  }

  .brand{

    font-size:1.125rem

  }

  .brand img{

    width:36px

  }

  .button-small{

    min-height:43px;

    padding:10px 15px;

    gap:12px

  }

  .hero{

    grid-template-columns:1fr;

    text-align:center;

    padding-block:55px 35px;

    gap:5px

  }

  .hero-copy{

    padding:0

  }

  .hero h1{

    font-size:clamp(3rem,8vw,4.8rem);

    margin-block:18px 23px

  }

  .intro{

    margin-inline:auto;

    max-width:490px;

    font-size:1.0625rem

  }

  .hero .store-links{

    justify-content:center;

    margin-top:27px

  }

  .hero-explore{

    margin-top:24px

  }

  .hero-visual{

    width:min(510px,100%);

    height:555px;

    margin:0 auto

  }

  .hero-phone{

    top:55px

  }

  .phone-center{

    top:10px

  }

  .hero-backdrop{

    inset:50px 0 35px

  }

  .proof{

    padding-block:22px

  }

  .proof strong{

    font-size:1.6rem

  }

  .proof span:not(.star){

    font-size:.75rem

  }

  .features{

    padding-top:75px

  }

  .feature{

    gap:35px;

    margin-bottom:55px

  }

  .feature-art{

    height:420px;

    border-radius:22px

  }

  .feature-phone{

    width:220px;

    margin-top:15px

  }

  .feature h3{

    font-size:2rem

  }

  .feature-copy p{

    font-size:1rem;

    line-height:1.65

  }

  .feature .feature-detail{

    font-size:.8125rem;

    margin-top:18px;

    padding-top:15px

  }

  .feature.reverse .feature-copy{

    padding-right:0

  }

  .panel-caption{

    font-size:.75rem;

    padding-block:18px

  }

  .section-heading{

    margin-bottom:45px

  }

  .review-grid{

    gap:12px

  }

  .review{

    padding:24px 20px

  }

  .review blockquote{

    font-size:1.3rem

  }

  .reviews{

    padding-block:75px 65px

  }

  .gallery-track{

    grid-auto-columns:calc((100% - 40px)/3)

  }

  .footer-top{

    align-items:start

  }

  .site-footer nav{

    gap:16px

  }

  .footer-bottom{

    flex-direction:column;

    gap:15px

  }

  .audience{

    padding-block:65px

  }

  .download{

    padding-block:65px

  }

}

@media(max-width:600px){

  .nav-links{

    display:none

  }

  .nav{

    gap:10px

  }

  .nav .button{

    font-size:.8125rem

  }

  .hero{

    padding-top:42px

  }

  .eyebrow{

    font-size:.6875rem;

    letter-spacing:.12em

  }

  .hero-visual{

    height:470px;

    max-width:410px;

    margin-top:15px

  }

  .hero-backdrop{

    inset:35px 0 33px

  }

  .hero-phone{

    top:50px

  }

  .phone-center{

    top:10px

  }

  .phone-left{

    left:0

  }

  .phone-right{

    right:0

  }

  .visual-caption{

    font-size:.75rem

  }

  .proof{

    grid-template-columns:1fr 1fr;

    row-gap:23px;

    padding-block:25px

  }

  .proof>:nth-child(2){

    border-right:0

  }

  .proof strong{

    font-size:1.65rem

  }

  .proof span:not(.star){

    font-size:.8125rem

  }

  .features{

    padding-top:65px

  }

  .section-heading h2{

    font-size:2.25rem

  }

  .section-heading p{

    font-size:1rem

  }

  .feature,.feature.reverse{

    grid-template-columns:1fr;

    gap:25px;

    margin-bottom:60px

  }

  .feature-copy,.feature.reverse .feature-copy{

    grid-column:1;

    grid-row:1;

    padding:0 6px

  }

  .feature-art,.feature.reverse .feature-art{

    grid-column:1;

    grid-row:2;

    height:480px

  }

  .feature h3{

    font-size:2.4rem;

    margin-block:15px 19px

  }

  .feature-copy>p:not(.eyebrow){

    max-width:none

  }

  .feature-phone{

    width:250px;

    margin-top:10px

  }

  .dual-screens img{

    width:48%;

    max-width:235px

  }

  .feature-detail{

    max-width:100%

  }

  .audience{

    margin-top:0

  }

  .audience h2{

    font-size:2.3rem

  }

  .audience .tags{

    gap:8px

  }

  .tags span{

    font-size:.75rem;

    padding:8px 12px

  }

  .review-grid{

    grid-template-columns:1fr;

    gap:16px

  }

  .review{

    padding:27px

  }

  .review blockquote{

    font-size:1.65rem;

    margin-bottom:27px;

    max-width:370px

  }

  .quote-mark{

    height:46px

  }

  .review figcaption a{

    font-size:.8125rem

  }

  .reviews-note{

    font-size:.8125rem

  }

  .gallery-heading{

    gap:15px;

    align-items:center

  }

  .gallery-heading h2{

    font-size:2rem

  }

  .gallery-controls{

    gap:6px

  }

  .gallery-controls button{

    width:42px;

    height:42px

  }

  .gallery-track{

    grid-auto-columns:72%;

    gap:16px

  }

  .download{

    padding-block:55px

  }

  .download-panel{

    border-radius:24px;

    padding:43px 18px

  }

  .download .store-links{

    gap:8px

  }

  .download .store-links img{

    height:43px

  }

  .footer-top{

    flex-direction:column;

    gap:28px

  }

  .site-footer nav{

    gap:20px

  }

  .footer-bottom p{

    font-size:.75rem

  }

  .store-links img{

    height:44px

  }

  .small-note{

    font-size:.75rem

  }

  .support-main{

    padding-block:55px 70px

  }

  .support-main h1{

    font-size:3rem

  }

}

@media(max-width:380px){

  .hero-visual{

    height:410px

  }

  .hero h1{

    font-size:2.75rem

  }

  .container{

    width:calc(100% - 32px)

  }

  .store-links{

    gap:8px

  }

  .store-links img{

    height:40px

  }

  .feature-art,.feature.reverse .feature-art{

    height:440px

  }

  .feature-phone{

    width:225px

  }

  .gallery-heading h2{

    font-size:1.75rem

  }

  .gallery-controls button{

    width:38px;

    height:38px

  }

  .download .store-links img{

    height:38px

  }

}

/* Long headings and labels still reflow with enlarged browser text. */

/* Quieter copy and customer-review layout. */

.registered {

  font-size: .52em;

  vertical-align: super;

  margin-left: 2px;

  letter-spacing: 0;

}

.trust {

  padding: 8px 0 25px;

  text-align: center;

}

.trust p { font-size: 1rem; }

.trust strong { color: var(--ink); font-weight: 650; }

.proof .store-logo { width: 26px; height: 26px; margin-top: 5px; }

.proof strong .metric-number, .proof strong .metric-number span {

  font: inherit;

  color: inherit;

  font-variant-numeric: tabular-nums;

}

.proof strong { min-width: 5ch; text-align: center; }

.feature-art:not(.dual-screens) { align-items: center; }

.feature-art:not(.dual-screens) .feature-phone {

  margin-top: 0;

  max-height: calc(100% - 44px);

  width: auto;

  max-width: 85%;

  object-fit: contain;

}

.audience .creator-credentials {

  color: var(--brand);

  font-weight: 650;

  margin: 0 auto 22px;

  max-width: 720px;

}

.audience h2 { margin-top: 0; }

.reviews .section-heading { margin-bottom: 40px; }

.review-grid { align-items: start; }

.review {

  background: #fff;

  border-color: #e8ebe9;

  border-radius: 18px;

  box-shadow: 0 5px 18px #2539410b;

  padding: 29px;

}

.review-summary h3 { font-size: 1.55rem; letter-spacing: -.03em; margin-bottom: 22px; }

.rating-row { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-bottom: 18px; }

.rating-row strong { font-size: 1.35rem; }

.store-logo { width: 25px; height: 25px; flex: 0 0 auto; }

.review-stars { color: #d69d19; letter-spacing: .1em; font-size: 1.1rem; line-height: 1.2; }

.rating-row .review-stars { font-size: .95rem; }

.review-summary-links { display: grid; gap: 18px; margin-top: 22px; }

.review-summary-links .button { padding-inline: 12px; font-size: .8125rem; }

.review-summary-links .text-link { justify-content: center; font-size: .8125rem; }

.review .review-person { margin: 0 0 20px; display: flex; gap: 12px; align-items: center; }

.review-avatar { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #dce6e8; color: #466471; flex: 0 0 auto; font-size: 1.2rem; }

.avatar-wine { background: #f0e2e8; color: #95536d; }

.review-person strong { font-size: .9375rem; margin-bottom: 4px; }

.review-person time { display: block; color: var(--muted); font-size: .8125rem; }

.user-review > .review-stars { margin-bottom: 15px; }

.user-review blockquote { font-size: 1rem; letter-spacing: 0; font-weight: 400; line-height: 1.7; margin: 0 0 20px; }

.review .review-context { font-size: .875rem; margin: -6px 0 23px; }

.review-source { display: flex; gap: 10px; align-items: center; font-size: .8125rem; color: var(--muted); text-decoration: none; margin-top: auto; }

.review-source .store-logo { width: 19px; height: 19px; }

.review-source:hover { color: var(--brand); text-decoration: underline; }

.review details { margin-bottom: 20px; }

.review details summary { cursor: pointer; color: var(--brand); font-size: .875rem; }

.review details p { font-size: 1rem; line-height: 1.7; margin-top: 12px; }

.download h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }

@media(max-width:1000px) and (min-width:601px) {

  .review-grid { grid-template-columns: 1fr 1fr; }

  .review-summary { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

  .review-summary h3 { grid-column: 1 / -1; }

  .review-summary-links { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; }

}

@media(max-width:600px) {

  .trust { padding-block: 0 24px; }

  .trust p { font-size: .9375rem; max-width: 290px; margin: auto; }

  .review-grid { grid-template-columns: 1fr; }

  .review { padding: 26px; }

  .hero .eyebrow { font-size: .6875rem; }

  .creator-credentials { font-size: 1rem; }

}

h1,h2,h3,.nav,.gallery-heading{

  overflow-wrap:anywhere

}

.review-column { display: grid; gap: 20px; align-content: start; min-width: 0; }

.review-columns .review-summary { display: flex; grid-column: auto; }

.review-columns .review-summary-links { grid-template-columns: 1fr; }

@media(min-width:601px) and (max-width:1000px) {

  .review-columns { grid-template-columns: 1fr 1fr; }

  .review-column:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }

}

@media(max-width:600px) {

  .review-columns { grid-template-columns: 1fr; }

}

.nav .button{

  flex-shrink:1

}

.nav .brand{

  flex-shrink:1;

  min-width:0

}

.nav .brand img{

  flex-shrink:0

}

/* Keep the full hero composition inside its column at every breakpoint. */

.hero-phone{

  width:40%

}

.phone-left{

  left:5%;

  top:58px

}

.phone-right{

  right:2%;

  top:58px

}

.phone-center{

  width:44%;

  left:28%;

  top:8px

}

@media(max-width:1100px){

  .phone-left,.phone-right{

    top:42px

  }

  .phone-center{

    top:0

  }

}

@media(max-width:600px){

  .hero-visual{

    height:auto;

    aspect-ratio:.88

  }

  .phone-left,.phone-right{

    top:35px

  }

  .phone-center{

    top:0

  }

  .art-habit .feature-phone{

    width:min(280px,85%);

    margin-top:12px

  }

}

@media(prefers-reduced-motion:reduce){

  html{

    scroll-behavior:auto

  }

  *,*::before,*::after{

    animation:none!important;

    transition:none!important

  }

}



/* A single ratings card preserves the two independently sourced scores. */

.proof { grid-template-columns: 2fr 1fr 1fr; gap: 20px; border: 0; padding-top: 0; }

.proof > div { border: 1px solid var(--line); border-radius: 18px; padding: 24px 18px; justify-content: center; background: #fdfcf9; }

.proof > div:last-child { border: 1px solid var(--line); }

.proof .ratings-card { gap: 14px; }

.ratings-card-title { font-size: .8125rem; line-height: 1.3; }

.ratings-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }

.ratings-pair a, .proof .ratings-pair strong { min-width: 0; }

.ratings-pair a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }

.ratings-pair a + a { border-left: 1px solid var(--line); }

.ratings-pair a:hover .rating-store-name { text-decoration: underline; }

.rating-row { flex-wrap: wrap; gap: 10px; }

.rating-row .rating-store-name { min-width: 84px; font-size: .875rem; color: var(--muted); }

.rating-row .review-stars { margin-left: auto; font-size: .8rem; }

.download h2 .registered { font-size: .35em; vertical-align: super; margin-left: 3px; }

@media(max-width:600px) {

  .proof { grid-template-columns: 1fr 1fr; gap: 12px; }

  .proof .ratings-card { grid-column: 1 / -1; }

  .proof > div:nth-child(2) { border-right: 1px solid var(--line); }

}



/* Keep the ratings and three library metrics balanced across screen sizes. */

.proof { grid-template-columns: 2fr repeat(3, 1fr); }

.proof > div { min-width: 0; text-align: center; }

@media(min-width:601px) and (max-width:1000px) {

  .proof { grid-template-columns: repeat(3, 1fr); }

  .proof .ratings-card { grid-column: 1 / -1; }

}

/* Study guidance, three quiz examples and the full customer-review wall. */

#features-title .registered { font-size: .35em; vertical-align: super; letter-spacing: 0; }

.level-guidance { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 20px; }

.level-guidance p { font-size: .9375rem; line-height: 1.65; margin-bottom: 11px; }

.level-guidance strong { color: var(--ink); }

.level-guidance .level-note { font-size: .875rem; margin-bottom: 0; }

.proof .ratings-pair .rating-stars { display: block; position: relative; width: max-content; font-size: 16px; line-height: 1.1; letter-spacing: .12em; }

.proof .rating-stars > span { font: inherit; letter-spacing: inherit; color: #d8d4ca; white-space: nowrap; }

.proof .rating-stars .rating-stars-fill { position: absolute; inset: 0 auto 0 0; width: var(--rating-fill); overflow: hidden; color: #ffc124; }

#quiz { grid-template-columns: 1.2fr .8fr; gap: 50px; }

.feature .quiz-screens { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 12px; padding: 30px 18px; }

.quiz-shot { min-width: 0; }

.quiz-shot:nth-child(2) { transform: translateY(-23px); }

.quiz-shot img { width: 100%; height: auto; border: 4px solid #303437; border-radius: 23px; box-shadow: 0 12px 18px #2539421a; }

.quiz-shot figcaption { font-size: .75rem; color: var(--brand); text-align: center; margin-top: 15px; }

.reviews .all-reviews { grid-template-columns: repeat(3,minmax(0,1fr)); }

.all-reviews .review-person { align-items: center; }

.all-reviews .review-person > strong { margin: 0; overflow-wrap: anywhere; }

.review .review-title { font-size: 1.125rem; line-height: 1.45; letter-spacing: -.02em; margin: 0 0 12px; }

.all-reviews .review blockquote { margin-bottom: 0; }

@media(max-width:1000px) {

  #quiz { grid-template-columns: 1fr; gap: 25px; }

  #quiz .feature-copy { grid-column: 1; grid-row: 1; }

  #quiz .quiz-screens { grid-column: 1; grid-row: 2; height: auto; min-height: 0; padding: 48px 30px 25px; }

  .reviews .all-reviews { display: block; columns: 2; column-gap: 20px; }

  .all-reviews .review-column { display: contents; }

  .all-reviews .review { display: inline-flex; width: 100%; break-inside: avoid; margin-bottom: 20px; }

}

@media(max-width:600px) {

  .reviews .all-reviews { columns: 1; }

  #quiz .quiz-screens { display: flex; justify-content: flex-start; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; padding: 24px; scrollbar-color: #9eadb0 transparent; }

  .quiz-shot { flex: 0 0 75%; scroll-snap-align: center; }

  .quiz-shot:nth-child(2) { transform: none; }

  .quiz-shot figcaption { font-size: .8125rem; }

}

@media(max-width:600px) {

  .proof { grid-template-columns: 1fr 1fr; }

  .proof .map-quiz-metric { grid-column: 1 / -1; }

}



/* Curated references and the wine-study app guide. */

#maps .curated-screens { height: auto; min-height: 540px; align-items: center; gap: 18px; padding: 35px 25px; }

.curated-shot { width: calc(50% - 9px); min-width: 0; border: 4px solid #303437; border-radius: 25px; box-shadow: 0 14px 20px #25394222; }

.curated-shot:first-child { transform: translateY(-14px); }

.curated-shot:last-child { transform: translateY(14px); }

.guide-hero { padding-block: 85px 48px; max-width: 920px; }

.guide-hero h1 { font-size: clamp(2.8rem, 5.3vw, 4.8rem); max-width: 850px; margin-bottom: 24px; }

.guide-hero .intro { max-width: 700px; }

.guide-disclosure { margin-top: 28px; padding: 20px 24px; border-left: 3px solid var(--wine); background: #f0e7e9; border-radius: 0 14px 14px 0; font-size: .9375rem; }

.guide-content { max-width: 920px; padding-bottom: 70px; }

.guide-featured { display: grid; grid-template-columns: 1.45fr .65fr; gap: 40px; align-items: center; padding: 44px; background: #e7eceb; border: 1px solid var(--line); border-radius: var(--radius); }

.guide-featured h2 { margin: 15px 0 18px; }

.guide-featured h2 .registered { font-size: .35em; vertical-align: super; }

.guide-featured p + p { margin-top: 14px; }

.guide-featured > img { width: 100%; max-width: 220px; justify-self: center; border: 4px solid #303437; border-radius: 25px; box-shadow: 0 16px 20px #25394222; }

.guide-featured .button { margin-top: 24px; }

.guide-section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 50px 0 24px; }

.guide-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.guide-option { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }

.guide-option h3 { font-size: 1.8rem; margin: 12px 0 18px; }

.guide-option p { font-size: 1rem; }

.guide-option p + p { margin-top: 16px; }

.guide-option a { color: var(--brand); }

.guide-notes { margin-top: 35px; font-size: .875rem; }

@media(max-width:600px) {

  #maps .curated-screens { height: auto; min-height: 0; padding: 35px 14px; gap: 12px; }

  .curated-shot { width: calc(50% - 6px); border-width: 3px; border-radius: 17px; }

  .guide-hero { padding-top: 48px; }

  .guide-featured, .guide-options { grid-template-columns: minmax(0, 1fr); }

  .guide-featured { padding: 26px; gap: 32px; }

  .guide-option { padding: 26px; }

}



/* Exam credentials and stable-width animated customer counts. */

.trust-count { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }

.trust-count[data-count="1000"] { min-width: 6ch; }

.exam-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 780px; margin: 28px auto 32px; text-align: left; }

.exam-results > div { border-top: 1px solid #b8c7ca; padding-top: 22px; }

.exam-results h3 { font-size: 1.4rem; letter-spacing: -.025em; line-height: 1.3; margin-bottom: 12px; }

.audience .exam-results p { font-size: 1rem; margin: 0 0 10px; }

.audience .exam-results .exam-honour { color: var(--ink); font-weight: 550; }

@media(max-width:600px) {

  .exam-results { grid-template-columns: minmax(0, 1fr); gap: 20px; }

}



/* Compact optical spacing above the lowercase final headline line. */

.hero h1 { line-height: 1; }

.hero h1 .hero-last-line { display: block; margin-top: -.07em; }

.exam-results { position: relative; max-width: 980px; gap: 48px; }

.exam-results::before { content: ""; position: absolute; width: 1px; top: 20px; bottom: 20px; left: 50%; background: #bdcbce; }

.exam-results > div { position: relative; min-width: 0; padding: 28px; border: 1px solid #cbd6d7; border-radius: 20px; background: #f5f8f7; }

.exam-results > div:last-child { background: #f4f6f8; }

.exam-results h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

.audience .exam-results .exam-qualification { color: var(--muted); font-weight: 400; margin-bottom: 22px; }

.audience .exam-results .exam-honour { font-weight: 400; margin-bottom: 0; }

.exam-honour strong { font-weight: 650; color: var(--ink); }

@media(max-width:800px) {

  .exam-results { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 540px; }

  .exam-results::before { display: none; }

  .exam-results > div { padding: 24px; }

  .exam-results > div:last-child::before { content: ""; position: absolute; height: 1px; top: -21px; left: 20px; right: 20px; background: #bdcbce; }

}



/* Native swipe carousel, enhanced with mobile-only navigation. */

.quiz-carousel { grid-column: 1; grid-row: 1; min-width: 0; }

.quiz-carousel-controls { display: none; }

.carousel-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media(max-width:1000px) { .quiz-carousel { grid-column: 1; grid-row: 2; } }

@media(max-width:600px) {

  #quiz .quiz-screens { gap: 24px; scroll-padding-inline: 24px; }

  .quiz-carousel .quiz-shot { flex: 0 0 100%; scroll-snap-align: center; }

  .quiz-carousel .quiz-shot img { width: min(100%, 280px); margin-inline: auto; }

  .quiz-carousel.is-enhanced .quiz-screens { scrollbar-width: none; }

  .quiz-carousel.is-enhanced .quiz-screens::-webkit-scrollbar { display: none; }

  .quiz-carousel-controls:not([hidden]) { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 18px; }

  .quiz-carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--brand); padding: 0; }

  .carousel-arrow { background: #fdfcf9; border: 1px solid var(--line); border-radius: 50%; font-size: 1.25rem; }

  .carousel-arrow:disabled { cursor: default; }

  .carousel-dots { display: flex; }

  .carousel-dots button { border: 0; background: transparent; }

  .carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: #b7c3c7; }

  .carousel-dots [aria-current="true"] span { width: 22px; border-radius: 8px; background: var(--brand); }

}