:root {
  --paper:#f8f7f2;
  --ink:#192d31;
  --muted:#626e6b;
  --coral:#e65a40;
  --line:#dedfd6;
  --green:#dfe9dc;
  --font:'Manrope','Trebuchet MS',sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  cursor:pointer}
button:disabled {
  cursor:default}
button,a,summary {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--coral);
  outline-offset:5px}
img {
  max-width:100%;
  height:auto}
h1,h2,h3,p {
  margin:0}
p {
  line-height:1.75;
  color:var(--muted)}
.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:104px;
  border-bottom:1px solid var(--line)}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:29px;
  font-weight:800;
  letter-spacing:-1.6px}
.brand img {
  border-radius:12px}
.brand-dot {
  color:var(--coral)}
nav {
  display:flex;
  gap:30px;
  font-size:13px;
  font-weight:650}
nav a:hover,.text-link:hover {
  color:var(--coral)}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border:0;
  background:var(--ink);
  color:white;
  border-radius:9px;
  padding:17px 23px;
  font-weight:700;
  transition:transform .2s,background .2s}
.button:hover {
  background:#30494a;
  transform:translateY(-2px)}
.button-small {
  padding:13px 19px;
  font-size:12px}
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  align-items:center;
  min-height:720px;
  gap:12px;
  padding-block:58px 72px}
.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:9px}
.status-dot {
  width:7px;
  height:7px;
  background:var(--coral);
  border-radius:100%}
h1 {
  font-size:clamp(46px,5.1vw,70px);
  letter-spacing:-3.9px;
  line-height:1.1;
  font-weight:800;
  margin-top:28px}
h1>span {
  color:var(--coral)}
.intro {
  font-size:16px;
  max-width:410px;
  margin-top:25px;
  line-height:1.85}
.hero-actions {
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:31px}
.store-button {
  text-align:left;
  gap:13px;
  padding:13px 20px;
  min-height:62px}
.store-button small {
  display:block;
  font-size:10px;
  font-weight:500;
  margin-bottom:1px}
.store-button .arrow {
  margin-left:20px}
.text-link {
  font-size:12px;
  font-weight:750;
  display:flex;
  gap:14px}
.hero-notes {
  display:flex;
  gap:18px;
  font-size:10px;
  color:var(--muted);
  margin-top:21px}
.hero-art {
  height:570px;
  position:relative;
  isolation:isolate}
.hero-art:before {
  content:'';
  position:absolute;
  width:460px;
  height:460px;
  border-radius:50%;
  background:#e6ebdf;
  left:15px;
  top:58px;
  z-index:-2}
.orbit {
  position:absolute;
  border:1px solid #d4dccd;
  border-radius:50%;
  z-index:-1}
.orbit-one {
  width:510px;
  height:510px;
  left:-10px;
  top:32px}
.orbit-two {
  width:558px;
  height:558px;
  left:-34px;
  top:8px;
  border-style:dashed;
  opacity:.6}
.phone {
  position:absolute;
  left:65px;
  top:37px;
  width:265px;
  height:518px;
  border-radius:39px;
  border:6px solid #273436;
  background:#fbfcf8;
  transform:rotate(-7deg);
  box-shadow:5px 11px 0 #a3aaa0,15px 22px 35px #18312426;
  overflow:hidden}
.phone-notch {
  position:absolute;
  left:86px;
  top:8px;
  width:83px;
  height:20px;
  background:#23302e;
  border-radius:15px}
.phone-time {
  font-size:10px;
  font-weight:800;
  padding:15px 18px 21px;
  display:flex;
  justify-content:space-between}
.phone-time span {
  font-size:8px;
  letter-spacing:2px}
.phone-content {
  padding:10px 15px}
.phone-date {
  font-size:7px;
  letter-spacing:1.3px;
  font-weight:700;
  color:#727c72}
.phone h2 {
  font-size:20px;
  letter-spacing:-.8px;
  margin:7px 0 16px}
.phone h2 span {
  float:right;
  font-size:18px;
  color:#ce7540}
.phone-greeting {
  display:flex;
  align-items:center;
  background:#f5ecdc;
  border-radius:11px;
  padding:9px 6px;
  margin-bottom:19px;
  gap:9px}
.phone-greeting img {
  width:47px}
.phone-greeting strong {
  font-size:10px}
.phone-greeting p {
  font-size:8px;
  margin-top:3px}
.phone-progress>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px}
.phone-progress>div>span {
  color:#638162;
  font-size:8px}
.progress-bars {
  height:24px;
  margin-top:10px;
  background:repeating-linear-gradient(90deg,#71956e 0 4px,transparent 4px 7px);
  position:relative}
.progress-bars:after {
  content:'';
  position:absolute;
  inset:0 0 0 65%;
  background:repeating-linear-gradient(90deg,#e5e8df 0 4px,#fbfcf8 4px 7px)}
.phone-progress small {
  font-size:8px;
  color:#7a827a}
.phone-task {
  display:flex;
  align-items:center;
  gap:9px;
  background:#f0f2eb;
  border-radius:10px;
  padding:13px 9px;
  margin-top:10px;
  font-size:13px}
.phone-task.active {
  margin-top:20px;
  background:var(--ink);
  color:white}
.phone-task strong {
  display:block;
  font-size:10px}
.phone-task small {
  display:block;
  font-size:7px;
  margin-top:4px;
  opacity:.7}
.phone-task>span:last-child {
  margin-left:auto}
.task-num {
  border:1px solid #b0b9ac;
  border-radius:50%;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:10px}
.phone-nav {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #e3e6df;
  margin-top:17px;
  padding-top:10px;
  text-align:center;
  font-size:18px;
  color:#7d897b}
.phone-nav>span:first-child {
  color:var(--coral)}
.phone-nav small {
  font-size:6px;
  display:block;
  margin-top:3px}
.hero-mascot {
  position:absolute;
  right:-22px;
  bottom:1px;
  width:270px;
  filter:drop-shadow(0 20px 13px #344c3020);
  transform:rotate(6deg)}
.floating-label {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fffef8;
  border:1px solid #e7e7dd;
  border-radius:10px;
  box-shadow:0 7px 20px #23372f09;
  font-size:10px;
  font-weight:750;
  padding:12px 15px}
.label-top {
  top:5px;
  right:3px;
  transform:rotate(4deg)}
.label-bottom {
  bottom:-8px;
  left:30px;
  transform:rotate(-4deg)}
.floating-label small {
  display:block;
  font-size:8px;
  font-weight:500;
  margin-top:4px;
  color:var(--muted)}
.mini-check {
  display:grid;
  place-items:center;
  background:#e5edde;
  color:#4e704e;
  border-radius:50%;
  width:25px;
  height:25px;
  font-size:15px}
.art-star {
  position:absolute;
  right:15px;
  top:137px;
  color:var(--coral);
  font-size:63px;
  transform:rotate(15deg)}
.promise-strip {
  border-block:1px solid var(--line);
  padding:23px 0}
.promise-strip .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
.promise-strip span {
  font-size:9px;
  font-weight:800;
  letter-spacing:1.3px}
.promise-strip p {
  font-size:13px;
  font-weight:650;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:27px}
.promise-strip i {
  color:var(--coral);
  font-style:normal;
  font-size:19px}
.section {
  padding-block:105px}
h2 {
  font-size:43px;
  line-height:1.18;
  letter-spacing:-1.9px;
  font-weight:800}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:42px}
.section-heading h2,.try-copy h2,.everyday h2,.faq h2 {
  margin-top:19px}
.section-heading>p {
  font-size:14px;
  width:280px}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:19px}
.feature {
  border-radius:17px;
  padding:28px;
  background:#eeeae0;
  overflow:hidden}
.feature-plan {
  background:#e8eddf}
.feature-learn {
  background:#f3e8de}
.feature-exam {
  background:#e8eae6}
.feature-index {
  font-size:9px;
  letter-spacing:1.5px;
  font-weight:800;
  color:#53634e}
.feature h3 {
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.7px;
  margin-bottom:12px}
.feature>p {
  font-size:13px;
  line-height:1.9}
.mini-plan {
  position:relative;
  margin:31px 0 32px;
  transform:rotate(-3deg)}
.mini-plan>div {
  position:relative;
  z-index:1;
  display:flex;
  gap:12px;
  align-items:center;
  background:#fbfcf5;
  border:1px solid #d7dfca;
  padding:12px 14px;
  border-radius:8px;
  font-size:11px;
  margin-top:7px;
  box-shadow:0 4px 0 #d9dfcf}
.mini-plan>div:nth-child(2) {
  margin-left:11px;
  margin-right:-3px}
.mini-plan>div>span:last-child {
  margin-left:auto;
  font-size:9px;
  color:#8e9b83}
.plan-tick,.plan-empty {
  width:19px;
  height:19px;
  background:#6c8564;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white}
.plan-empty {
  background:none;
  border:1px dashed #86977f}
.mini-answer {
  padding:19px;
  margin:31px 0 30px;
  background:#fffcf6;
  border:1px solid #e9d7c9;
  border-radius:10px;
  transform:rotate(3deg);
  box-shadow:0 6px 0 #e9d9cc;
  min-height:165px}
.answer-pill {
  background:#e5edde;
  color:#48654b;
  padding:5px 8px;
  border-radius:4px;
  font-size:8px;
  font-weight:800}
.mini-answer strong {
  display:block;
  font-size:12px;
  margin-block:17px 14px}
.fake-line {
  height:5px;
  background:#e8e3d9;
  border-radius:5px;
  width:92%;
  margin-top:7px}
.fake-line.short {
  width:70%}
.answer-note {
  display:block;
  text-align:right;
  color:#b06745;
  font-size:8px;
  margin-top:10px}
.mini-exam {
  height:165px;
  margin:31px 0 30px;
  position:relative;
  display:grid;
  place-items:center}
.clock-face {
  width:145px;
  height:145px;
  border:2px dashed #adb8ad;
  border-radius:50%;
  padding:9px}
.clock-face>span {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border:7px solid var(--ink);
  border-right-color:#c7d0c5;
  border-radius:50%;
  font-size:43px;
  font-weight:750;
  letter-spacing:-2px}
.clock-face small {
  font-size:8px;
  letter-spacing:1.6px}
.exam-tag {
  position:absolute;
  bottom:7px;
  right:6px;
  background:#fafff3;
  border:1px solid #d3dccb;
  padding:10px 15px;
  border-radius:6px;
  transform:rotate(-9deg);
  font-size:10px;
  font-weight:700}
.try-section {
  background:var(--ink);
  color:#fffdf4;
  padding:85px 0}
.try-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:95px;
  align-items:center}
.try-copy .eyebrow {
  color:#c4d0b7}
.try-copy h2 {
  font-size:52px;
  letter-spacing:-2px}
.try-copy>p {
  color:#b9c6c0;
  margin-top:24px;
  max-width:315px;
  font-size:14px}
.try-note {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:27px;
  font-size:11px;
  line-height:1.9;
  color:#b9c6c0}
.try-note img {
  width:67px;
  height:75px;
  object-fit:contain}
.try-note strong {
  color:#f7f9ee;
  font-weight:600}
.quiz {
  background:var(--paper);
  color:var(--ink);
  padding:32px;
  border-radius:17px;
  box-shadow:8px 8px 0 #ffffff0b}
.quiz-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px}
.quiz-top>span:first-child {
  color:#b75337}
.quiz-progress {
  height:3px;
  background:#e7e7dd;
  margin-block:15px 26px;
  border-radius:3px}
.quiz-progress span {
  display:block;
  height:100%;
  width:33.333%;
  background:var(--coral);
  transition:width .25s}
.quiz h3 {
  font-size:19px;
  letter-spacing:-.4px;
  line-height:1.6;
  margin-bottom:22px}
.answers {
  display:grid;
  gap:9px}
.answer {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:13px 14px;
  border:1px solid #dcded4;
  border-radius:7px;
  background:transparent;
  color:var(--ink);
  font-size:12px;
  line-height:1.5}
.answer:not(:disabled):hover {
  border-color:#6c8670;
  background:#eef1e8}
.answer-letter {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:24px;
  height:24px;
  border:1px solid #dcded4;
  border-radius:5px;
  font-size:10px;
  font-weight:700}
.answer.correct {
  background:#e4edde;
  border-color:#708b63}
.answer.incorrect {
  background:#f9e6df;
  border-color:#c26749}
.answer:disabled {
  opacity:1}
.feedback {
  font-size:12px;
  line-height:1.8;
  border-left:3px solid #6a8760;
  background:#eaf0e3;
  padding:14px;
  margin-top:16px}
.feedback strong {
  display:block;
  margin-bottom:5px}
.quiz-footer {
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:32px}
.quiz-footer>span {
  font-size:10px;
  color:#737f76}
.quiz [hidden] {
  display:none}
.everyday {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center}
.everyday-visual {
  background:#e8eddf;
  border-radius:150px 150px 16px 16px;
  height:440px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:46px;
  overflow:hidden}
.everyday-visual:before {
  content:'';
  position:absolute;
  width:4px;
  height:280px;
  background:#bcc5b4;
  top:101px;
  left:50%;
  transform:rotate(13deg)}
.sign-circle {
  position:absolute;
  top:40px;
  left:calc(50% - 66px);
  width:132px;
  height:132px;
  border:12px solid var(--coral);
  border-radius:50%;
  background:#fffef7;
  display:grid;
  place-items:center;
  font-size:64px;
  font-weight:800;
  letter-spacing:-5px;
  transform:rotate(13deg);
  box-shadow:3px 4px 0 #c94733}
.everyday-ticket {
  width:80%;
  background:#fffdf4;
  border-radius:10px;
  padding:28px;
  transform:rotate(-7deg);
  border:1px solid #d7ddcc;
  box-shadow:7px 8px 0 #d4dccc}
.everyday-ticket>span {
  font-size:9px;
  letter-spacing:2px}
.everyday-ticket strong {
  font-size:30px;
  letter-spacing:-1px;
  display:block;
  margin-top:7px}
.everyday-ticket small {
  font-size:10px;
  color:#727e6f}
.ticket-route {
  display:flex;
  align-items:center;
  margin-block:24px}
.ticket-route span {
  width:9px;
  height:9px;
  border:2px solid var(--coral);
  border-radius:50%}
.ticket-route span:last-child {
  background:var(--coral)}
.ticket-route i {
  flex:1;
  border-bottom:1px dashed #a6b79c}
.everyday>div>p {
  font-size:14px;
  margin-top:21px;
  max-width:390px}
.benefit-list {
  list-style:none;
  padding:0;
  margin:28px 0 0;
  display:grid;
  gap:20px}
.benefit-list li {
  display:flex;
  gap:15px}
.benefit-list li>span {
  display:grid;
  place-items:center;
  background:#e8ede1;
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:9px;
  font-size:19px}
.benefit-list strong {
  font-size:12px}
.benefit-list p {
  font-size:12px;
  max-width:310px;
  margin-top:4px}
.faq {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:80px;
  border-top:1px solid var(--line);
  padding-top:80px}
.faq>div>p {
  font-size:13px;
  margin-top:23px}
.faq a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px}
.faq-items details {
  border-bottom:1px solid var(--line)}
.faq-items summary {
  cursor:pointer;
  list-style:none;
  padding:23px 32px 23px 0;
  font-size:14px;
  font-weight:700;
  position:relative}
.faq-items details:first-child summary {
  padding-top:4px}
.faq-items summary::-webkit-details-marker {
  display:none}
.faq-items summary:after {
  content:'+';
  position:absolute;
  right:4px;
  font-size:19px;
  font-weight:400;
  top:20px}
.faq-items details:first-child summary:after {
  top:0}
.faq-items details[open] summary:after {
  content:'−'}
.faq-items p {
  font-size:13px;
  padding:0 28px 23px 0}
.final-cta {
  background:#e9ecdf;
  border-radius:22px;
  padding:53px 66px;
  position:relative;
  overflow:hidden;
  min-height:395px}
.final-cta h2 {
  font-size:64px;
  margin-top:15px;
  letter-spacing:-3px}
.final-cta h2 span {
  color:var(--coral)}
.final-cta .button {
  margin-top:26px;
  min-height:51px;
  font-size:12px}
.final-cta p {
  font-size:10px;
  margin-top:12px}
.final-cta>img {
  position:absolute;
  width:325px;
  bottom:-79px;
  right:115px;
  transform:rotate(-9deg)}
.cta-star {
  position:absolute;
  right:71px;
  top:52px;
  font-size:69px;
  color:var(--coral)}
.footer {
  padding-top:55px;
  padding-bottom:27px}
.footer-row {
  display:flex;
  align-items:center;
  gap:26px}
.footer-row>.brand {
  font-size:25px}
.footer-row>span {
  font-size:11px;
  color:var(--muted)}
.footer-row nav {
  margin-left:auto;
  font-size:11px;
  gap:24px}
.footer-fine {
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  font-size:9px;
  color:var(--muted)}
.footer-fine p {
  font-size:9px;
  max-width:650px;
  text-align:right}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:10}
.skip-link:focus {
  top:10px}
@keyframes enter {
  from {
  opacity:0;
  translate:0 18px}
to {
  opacity:1;
  translate:0 0}
}
.hero-copy {
  animation:enter .7s ease both}
.hero-art {
  animation:enter .9s .1s ease both}

@media(min-width:1500px) {
  .hero {
  min-height:790px}
.hero-art {
  transform:scale(1.04)}
}

@media(max-width:1100px) {
  .wrap {
  width:calc(100% - 64px)}
.hero {
  min-height:660px}
h1 {
  font-size:55px;
  letter-spacing:-3px}
.hero-art {
  transform:scale(.88);
  transform-origin:left center;
  width:480px;
  margin-left:-8px}
.hero-notes {
  gap:10px;
  font-size:9px}
.hero-actions {
  gap:18px}
.text-link {
  font-size:11px}
.promise-strip p {
  gap:15px;
  font-size:11px}
.promise-strip span {
  font-size:8px}
.feature {
  padding:23px}
.try-layout {
  gap:50px}
.everyday {
  gap:50px}
.final-cta>img {
  right:65px}
.header nav {
  gap:20px}
}

@media(max-width:850px) {
  .header nav {
  display:none}
.hero {
  grid-template-columns:1fr;
  padding-top:45px;
  padding-bottom:35px;
  text-align:center;
  gap:28px}
.hero-copy {
  max-width:610px;
  margin:auto}
h1 {
  font-size:68px;
  letter-spacing:-3.8px}
.intro {
  margin-inline:auto}
.hero-actions,.hero-notes {
  justify-content:center}
.hero-art {
  width:500px;
  max-width:100%;
  transform:none;
  margin:auto;
  height:580px;
  text-align:left}
.hero-mascot {
  right:-4px}
.promise-strip .wrap {
  flex-direction:column;
  gap:11px}
.promise-strip p {
  font-size:12px;
  gap:16px}
.section {
  padding-block:70px}
.section-heading {
  align-items:flex-start;
  gap:22px}
.section-heading>p {
  width:200px;
  font-size:12px}
h2 {
  font-size:36px}
.feature-grid {
  gap:12px}
.feature {
  padding:18px}
.feature h3 {
  font-size:19px}
.feature>p {
  font-size:12px}
.mini-plan>div {
  padding:11px 7px;
  gap:6px;
  font-size:9px}
.mini-answer {
  padding:14px}
.mini-answer strong {
  font-size:10px}
.try-layout {
  gap:30px}
.try-copy h2 {
  font-size:40px}
.quiz {
  padding:24px}
.quiz h3 {
  font-size:16px}
.everyday {
  gap:35px}
.everyday-visual {
  height:400px}
.everyday-ticket {
  padding:22px}
.everyday-ticket strong {
  font-size:23px}
.faq {
  gap:30px}
.final-cta {
  padding:45px}
.final-cta h2 {
  font-size:55px}
.final-cta>img {
  right:10px;
  width:270px;
  bottom:-40px}
.cta-star {
  right:25px;
  top:30px;
  font-size:45px}
.footer-row {
  gap:17px}
.footer-row nav {
  gap:14px}
.footer-fine p {
  max-width:420px}
}

@media(max-width:600px) {
  .wrap {
  width:calc(100% - 40px)}
.header {
  height:81px}
.brand {
  font-size:25px}
.brand img {
  width:35px;
  height:35px;
  border-radius:10px}
.header .button {
  font-size:10px;
  padding:12px;
  gap:12px}
.hero {
  padding-top:38px;
  gap:14px}
.hero .eyebrow {
  font-size:8px;
  letter-spacing:1.15px}
h1 {
  font-size:clamp(43px,11.3vw,64px);
  letter-spacing:-2.6px;
  margin-top:22px}
.intro {
  font-size:14px;
  max-width:340px;
  margin-top:21px}
.hero-actions {
  gap:21px;
  margin-top:25px}
.store-button {
  font-size:13px;
  padding:12px 15px;
  gap:9px;
  min-height:58px}
.store-button .arrow {
  margin-left:8px}
.text-link {
  font-size:10px;
  gap:8px}
.hero-notes {
  font-size:9px;
  gap:12px;
  margin-top:17px}
.hero-art {
  width:355px;
  height:445px;
  margin-top:12px}
.hero-art:before {
  width:320px;
  height:320px;
  top:58px;
  left:13px}
.orbit-one {
  width:347px;
  height:347px;
  left:0;
  top:45px}
.orbit-two {
  width:373px;
  height:373px;
  left:-13px;
  top:32px}
.phone {
  width:265px;
  height:518px;
  transform:rotate(-7deg) scale(.72);
  transform-origin:top left;
  left:40px;
  top:34px}
.hero-mascot {
  width:188px;
  right:-4px;
  bottom:30px}
.label-top {
  font-size:8px;
  padding:9px 10px;
  top:12px;
  right:0;
  gap:7px}
.mini-check {
  width:22px;
  height:22px;
  font-size:12px}
.label-bottom {
  left:15px;
  bottom:17px;
  font-size:9px;
  padding:10px 12px}
.art-star {
  font-size:45px;
  right:10px;
  top:108px}
.promise-strip {
  padding:19px 0}
.promise-strip p {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px 13px;
  font-size:10px;
  line-height:2}
.promise-strip i {
  font-size:13px}
.promise-strip span {
  font-size:8px}
.section {
  padding-block:58px}
.section-heading {
  display:block;
  margin-bottom:29px}
.section-heading>p {
  width:auto;
  font-size:13px;
  margin-top:18px}
.section-heading>p br {
  display:none}
h2 {
  font-size:34px;
  letter-spacing:-1.4px}
.eyebrow {
  font-size:8px;
  letter-spacing:1.5px}
.feature-grid {
  grid-template-columns:1fr;
  gap:15px}
.feature {
  padding:26px 28px}
.feature h3 {
  font-size:24px}
.feature>p {
  font-size:13px}
.mini-plan {
  max-width:300px;
  margin:25px auto 30px}
.mini-plan>div {
  font-size:11px;
  padding:12px 14px}
.mini-answer {
  max-width:300px;
  margin:25px auto 30px;
  padding:20px}
.mini-answer strong {
  font-size:12px}
.mini-exam {
  margin-block:20px 24px}
.try-section {
  padding:52px 0}
.try-layout {
  grid-template-columns:1fr;
  gap:29px}
.try-copy h2 {
  font-size:39px}
.try-copy h2 br:last-child {
  display:none}
.try-copy>p {
  max-width:100%;
  font-size:13px;
  margin-top:17px}
.try-note {
  margin-top:16px}
.try-note img {
  width:53px;
  height:58px}
.quiz {
  padding:23px}
.quiz h3 {
  font-size:17px}
.answer {
  font-size:12px}
.quiz-footer {
  flex-wrap:wrap}
.everyday {
  grid-template-columns:1fr;
  gap:34px}
.everyday-visual {
  height:350px;
  max-width:390px;
  width:100%;
  margin:auto;
  padding-bottom:29px}
.sign-circle {
  top:26px;
  width:117px;
  height:117px;
  font-size:52px;
  border-width:10px}
.everyday-ticket strong {
  font-size:28px}
.everyday h2 {
  font-size:33px}
.benefit-list p {
  max-width:100%}
.faq {
  grid-template-columns:1fr;
  gap:30px}
.faq-items summary {
  font-size:13px}
.final-cta {
  padding:33px 26px 0;
  min-height:580px}
.final-cta h2 {
  font-size:53px}
.final-cta>img {
  width:230px;
  bottom:-65px;
  right:30px}
.final-cta .eyebrow {
  font-size:7px;
  letter-spacing:1.2px}
.cta-star {
  top:auto;
  bottom:135px;
  right:auto;
  left:38px;
  font-size:55px}
.final-cta .button {
  position:relative;
  z-index:1}
.footer {
  padding-top:37px}
.footer-row {
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px 8px}
.footer-row nav {
  width:100%;
  margin:0;
  gap:22px}
.footer-row>span {
  font-size:10px}
.footer-fine {
  display:block;
  font-size:9px}
.footer-fine p {
  text-align:left;
  margin-top:11px}
.hero-art {
  isolation:isolate}
}

@media(max-width:370px) {
  .wrap {
  width:calc(100% - 32px)}
.hero-art {
  transform:scale(.9);
  transform-origin:top left;
  width:355px;
  max-width:none;
  margin-bottom:-44px}
.hero-actions {
  gap:14px}
.hero-notes {
  font-size:8px;
  gap:8px}
.text-link {
  font-size:9px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
}

@media (max-width:850px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { width: 100%; min-width: 0; }
}
@media (max-width:350px) {
  .hero-art { transform: scale(.76); margin-bottom: -105px; }
  .hero-actions { gap: 12px; }
}

@media (min-width:851px) and (max-width:1000px) {
  .hero-art { transform: scale(.76); }
}

.feature-scene {
  position: relative;
  display: grid;
  place-items: center;
  height: 208px;
  margin: 20px 0 25px;
  isolation: isolate;
}
.scene-halo {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #ffffff65;
  z-index: -1;
}
.feature-scene img {
  width: 180px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 9px 6px #192d3110);
}
.feature-learn .feature-scene img { transform: rotate(-6deg); }
.feature-exam .feature-scene img { transform: rotate(5deg); }
.scene-note {
  position: absolute;
  bottom: -3px;
  right: 0;
  padding: 9px 12px;
  border: 1px solid #192d3112;
  border-radius: 7px;
  background: #fffdf5;
  box-shadow: 0 4px 8px #192d3108;
  font-size: 10px;
  font-weight: 700;
  transform: rotate(-5deg);
}
.feature-learn .scene-note { transform: rotate(4deg); }
.faq-companion {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.faq-companion img {
  width: 115px;
  height: 125px;
  object-fit: contain;
}
.faq-companion span {
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  transform: rotate(-3deg);
}
@media (min-width:601px) and (max-width:850px) {
  .scene-note { font-size: 8px; padding: 8px; }
  .faq-companion { gap: 6px; }
  .faq-companion img { width: 90px; height: 105px; }
  .faq-companion span { padding: 10px; font-size: 10px; }
}

.topics { padding-bottom: 95px; }
.topics-heading { padding-top: 45px; border-top: 1px solid var(--line); }
.topics-heading h2 { margin-top: 15px; font-size: 34px; }
.topics-heading p { margin-top: 13px; font-size: 14px; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 34px; }
.topic { text-align: center; padding: 18px 12px 0; }
.topic img { display: block; width: 170px; height: 170px; object-fit: contain; margin: 0 auto 22px; }
.topic h3 { font-size: 16px; letter-spacing: -.4px; }
.topic p { font-size: 12px; line-height: 1.8; margin: 11px auto 0; max-width: 225px; }
@media (max-width:850px) {
  .topics { padding-bottom: 65px; }
  .topic-grid { gap: 22px 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px) {
  .topics-heading { padding-top: 32px; }
  .topics-heading h2 { font-size: 30px; }
  .topics-heading p { font-size: 13px; }
  .topic-grid { gap: 25px 10px; margin-top: 23px; }
  .topic { padding: 10px 0 0; }
  .topic img { width: 132px; height: 132px; margin-bottom: 16px; }
  .topic h3 { font-size: 13px; letter-spacing: -.3px; }
  .topic p { font-size: 11px; margin-top: 8px; }
}


/* Use the approved store composition; crop only its marketing headline. */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 58px; padding-block: 50px 62px; }
.store-hero { margin: 0; min-width: 0; }
.store-hero-image { display: block; position: relative; width: 100%; aspect-ratio: .82; overflow: hidden; border-radius: 26px; background: #dcebf6; box-shadow: 0 18px 45px #192d3110; }
.store-hero-image img { position: absolute; display: block; width: 100%; max-width: none; height: auto; top: -60%; left: 0; }
.store-hero figcaption { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 17px 3px 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.store-hero figcaption > span:first-child { font-weight: 800; color: var(--ink); }
.store-hero figcaption > span:last-child > span { margin-left: 8px; }
.coral-text { color: var(--coral); }
.watch-store-art { display: block; position: relative; width: min(100%, 440px); aspect-ratio: 1122 / 1402; margin-inline: auto; border-radius: 24px; overflow: hidden; background: #f8f7f2; }
.watch-store-art img { display: block; width: 100%; height: auto; }
@media (max-width:1100px) {
  .hero { gap: 35px; }
  .store-hero figcaption { font-size: 10px; gap: 8px; }
}
@media (max-width:850px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 35px; padding-top: 40px; }
  .store-hero { width: min(500px, 100%); margin-inline: auto; }
  .store-hero-image { aspect-ratio: .88; }
  .store-hero-image img { top: -63%; }
}
@media (max-width:600px) {
  .hero { gap: 30px; padding-block: 35px 37px; }
  .hero .intro { font-size: 14px; line-height: 1.75; }
  .store-hero-image { border-radius: 20px; aspect-ratio: .84; }
  .store-hero-image img { top: -61%; }
  .store-hero figcaption { padding-top: 12px; font-size: 9px; text-align: left; }
}