:root {
   color-scheme: light;
   --ink: #0b1b4d;
   --muted: #61708e;
   --blue: #2962ff;
   --blue-deep: #1b3fd6;
   --paper: #f6f8ff;
   --line: #dfe6f5;
   --teal: #13b6ad;
   --shadow: 0 24px 65px -30px #23498c35;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
   scroll-padding-top: 28px;
   -webkit-text-size-adjust: 100%;
}
body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   -webkit-font-smoothing: antialiased;
}
a {
   color: inherit;
   text-decoration: none;
}
button,
input {
   font: inherit;
}
button,
a,
input,
summary {
   -webkit-tap-highlight-color: transparent;
}
button {
   cursor: pointer;
}
button:disabled {
   cursor: wait;
   opacity: 0.6;
}
img {
   display: block;
   max-width: 100%;
}
svg {
   width: 24px;
   height: 24px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
}
h1,
h2,
h3,
p,
figure {
   margin: 0;
}
h1,
h2,
h3 {
   text-wrap: balance;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
   outline: 3px solid var(--blue);
   outline-offset: 5px;
}
input:focus-visible {
   outline: none;
}
.symbol-library {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
}
.wrap {
   width: min(1200px, calc(100% - 80px));
   margin-inline: auto;
}
.visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}
[hidden] {
   display: none !important;
}
.skip-link {
   position: fixed;
   top: 12px;
   left: 12px;
   z-index: 20;
   padding: 12px 18px;
   background: var(--ink);
   color: #fff;
   border-radius: 10px;
   transform: translateY(-180%);
}
.skip-link:focus {
   transform: translateY(0);
}
.site-header {
   height: 104px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
}
.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 25px;
   font-weight: 750;
   letter-spacing: -1px;
   flex-shrink: 0;
}
.brand img {
   border-radius: 11px;
   box-shadow: 0 4px 10px #102c7a14;
}
.brand-dot {
   color: var(--blue);
}
.desktop-nav {
   display: flex;
   gap: 30px;
   font-size: 14px;
   font-weight: 550;
   color: #4a5876;
}
.desktop-nav a:hover,
.site-footer a:hover {
   color: var(--blue);
}
.header-actions {
   display: flex;
   align-items: center;
   gap: 22px;
}
.language-switch {
   display: flex;
   gap: 2px;
   padding: 4px;
   border: 1px solid var(--line);
   border-radius: 12px;
   font-size: 12px;
   font-weight: 650;
}
.language-switch a {
   padding: 7px 9px;
   border-radius: 8px;
   color: var(--muted);
}
.language-switch a[aria-current] {
   background: #fff;
   color: var(--ink);
   box-shadow: 0 2px 6px #102c7a0c;
}
.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 54px;
   padding: 14px 23px;
   border-radius: 14px;
   border: 0;
   background: var(--blue);
   color: #fff;
   font-size: 15px;
   font-weight: 650;
   line-height: 1.3;
   box-shadow: 0 8px 20px -10px #2962ff99;
   transition:
      background 0.18s,
      transform 0.18s;
}
.button:hover {
   background: var(--blue-deep);
   transform: translateY(-2px);
}
.button svg:last-child {
   width: 20px;
   height: 20px;
}
.button-small {
   min-height: 42px;
   border-radius: 11px;
   font-size: 13px;
   padding: 11px 16px;
   gap: 14px;
}
.apple-icon {
   fill: currentColor;
   stroke: none;
   width: 23px;
   height: 23px;
}
.hero {
   position: relative;
   overflow-x: clip;
   display: grid;
   grid-template-columns: 1.08fr 1fr;
   align-items: center;
   gap: 14px;
   padding-top: 64px;
   padding-bottom: 94px;
}
.hero:before {
   content: '';
   position: absolute;
   z-index: -1;
   width: 80%;
   height: 85%;
   right: 0;
   top: 2%;
   background: radial-gradient(ellipse at 55% 40%, #dce8ff 0%, #e7eeff70 47%, transparent 75%);
   pointer-events: none;
}
.eyebrow {
   color: var(--blue);
   font-size: 11px;
   font-weight: 750;
   line-height: 1.6;
   letter-spacing: 1.4px;
   text-transform: uppercase;
}
.hero > .hero-content > .eyebrow {
   display: flex;
   align-items: center;
   gap: 9px;
}
.live-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--blue);
   box-shadow: 0 0 0 5px #2962ff0b;
}
h1 {
   font-size: clamp(44px, 4.4vw, 65px);
   line-height: 1.13;
   letter-spacing: -3.3px;
   font-weight: 780;
   margin-top: 22px;
   max-width: 650px;
}
.ink-highlight {
   position: relative;
   display: inline-block;
   color: var(--blue);
   white-space: nowrap;
}
.ink-highlight:after {
   content: '';
   display: block;
   height: 8px;
   background: #bfd1ff7d;
   border-radius: 50%;
   transform: rotate(-1.4deg);
   margin-top: 3px;
}
.hero-intro {
   max-width: 465px;
   font-size: 17px;
   line-height: 1.7;
   color: var(--muted);
   margin-top: 24px;
}
.hero-install {
   margin-top: 26px;
}
.hero-install > p {
   font-size: 12px;
   color: var(--muted);
   margin-top: 11px;
}
.forecast-launch {
   margin-top: 36px;
   max-width: 500px;
   border-top: 1px solid #dbe4f3;
   padding-top: 24px;
}
.forecast-heading-row {
   display: flex;
   align-items: center;
   gap: 9px;
}
.spark {
   width: 19px;
   height: 19px;
   color: var(--teal);
}
.forecast-heading-row h2 {
   font-size: 17px;
   line-height: 1.45;
   letter-spacing: -0.4px;
}
.forecast-form {
   display: flex;
   gap: 6px;
   background: #fff;
   border: 1px solid #d4dff5;
   border-radius: 13px;
   padding: 6px;
   margin-top: 15px;
   box-shadow: 0 5px 20px #18376f06;
   transition:
      box-shadow 0.2s,
      border-color 0.2s;
}
.forecast-form:focus-within {
   border-color: var(--blue);
   box-shadow: 0 0 0 3px #2962ff13;
}
.forecast-form input {
   min-width: 0;
   flex: 1;
   background: none;
   border: 0;
   padding: 10px 12px;
   color: var(--ink);
   font-size: 14px;
}
.forecast-form input::placeholder {
   color: #8791a7;
}
.forecast-form button {
   border: 0;
   background: #edf2ff;
   color: var(--blue);
   border-radius: 8px;
   padding: 12px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
   min-height: 43px;
}
.forecast-form button:hover {
   background: #e0e9ff;
}
.forecast-form button svg {
   width: 17px;
   height: 17px;
}
.examples {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
   margin-top: 11px;
}
.example-chip {
   min-height: 28px;
   border: 1px solid #dfe6f2;
   border-radius: 7px;
   padding: 6px 9px;
   font-size: 10px;
   line-height: 1.4;
   background: transparent;
   color: #566682;
   transition:
      border-color 0.15s,
      color 0.15s;
}
.example-chip:hover {
   border-color: var(--blue);
   color: var(--blue);
}
.fine-print {
   font-size: 11px !important;
   line-height: 1.65 !important;
   color: #61708e !important;
   margin-top: 11px !important;
   max-width: 480px;
}
.hero-art {
   position: relative;
   min-width: 0;
   isolation: isolate;
   padding: 35px 0 0;
   margin-left: -8px;
   align-self: center;
}
.hero-ui {
   position: relative;
   width: 112%;
   max-width: none;
   margin-left: -5%;
   z-index: 1;
   height: auto;
}
.hero-art figcaption {
   position: relative;
   margin-top: 0;
   text-align: center;
   font-size: 10px;
   color: #63718a;
   z-index: 2;
}
.art-kicker {
   position: absolute;
   top: 10px;
   right: 30px;
   display: flex;
   align-items: center;
   gap: 7px;
   color: #63718a;
   font-size: 10px;
   letter-spacing: 0.15px;
   transform: rotate(4deg);
}
.art-kicker > span {
   height: 5px;
   width: 5px;
   border-radius: 50%;
   background: var(--teal);
}
.orbit {
   position: absolute;
   border: 1px solid #cad7f273;
   border-radius: 50%;
   z-index: -1;
   pointer-events: none;
}
.orbit-one {
   inset: 8% -1% 7% 1%;
   transform: rotate(-25deg);
}
.orbit-two {
   inset: 0 10% 0 4%;
   transform: rotate(22deg);
}
.art-cross {
   position: absolute;
   font-size: 24px;
   line-height: 1;
   color: #8eaff5;
   font-weight: 300;
}
.cross-one {
   top: 16%;
   left: 12%;
   transform: rotate(12deg);
}
.cross-two {
   right: 0;
   bottom: 15%;
   color: #57cbb9;
   transform: rotate(18deg);
}
.forecast-result {
   padding-bottom: 60px;
}
.result-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 26px;
   box-shadow: var(--shadow);
   padding: 32px 38px;
}
.result-top {
   display: flex;
   align-items: center;
   gap: 15px;
}
.result-icon {
   display: grid;
   place-items: center;
   width: 48px;
   height: 48px;
   color: var(--blue);
   background: #eef3ff;
   border-radius: 14px;
}
.result-top #forecast-habit {
   font-size: 16px;
   font-weight: 650;
   margin-top: 4px;
   overflow-wrap: anywhere;
}
.result-year {
   margin-left: auto;
   font-size: 34px;
   color: #c3d2ee;
   letter-spacing: -2px;
   font-weight: 700;
}
.forecast-results {
   padding: 0;
   margin: 25px 0 0;
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}
.forecast-results li {
   position: relative;
   padding-left: 30px;
   font-size: 18px;
   line-height: 1.5;
   font-weight: 600;
   overflow-wrap: anywhere;
}
.forecast-results li:before {
   content: '✓';
   display: grid;
   place-items: center;
   position: absolute;
   left: 0;
   top: 2px;
   width: 21px;
   height: 21px;
   font-size: 12px;
   background: #e6f8f3;
   color: #189d84;
   border-radius: 50%;
}
.result-actions {
   display: flex;
   align-items: center;
   gap: 25px;
   flex-wrap: wrap;
   margin-top: 28px;
}
.text-button {
   background: none;
   border: 0;
   padding: 10px 0;
   color: var(--muted);
   font-size: 13px;
   font-weight: 600;
}
.text-button:hover {
   color: var(--blue);
}
.forecast-message {
   padding-top: 20px;
   color: #b8324e;
   line-height: 1.5;
}
.forecast-results .skeleton {
   height: 34px;
   background: linear-gradient(90deg, #f0f4fb, #e5ecf8, #f0f4fb);
   background-size: 200% 100%;
   border-radius: 10px;
   animation: shimmer 1.3s linear infinite;
}
.forecast-results .skeleton:before {
   display: none;
}
.features-section {
   padding-top: 48px;
}
.section-heading {
   text-align: center;
   max-width: 750px;
   margin: 0 auto 50px;
}
.section-heading h2 {
   font-size: clamp(32px, 3.3vw, 47px);
   line-height: 1.16;
   font-weight: 750;
   letter-spacing: -1.9px;
   margin-top: 15px;
}
.section-heading > p:last-child:not(.eyebrow) {
   color: var(--muted);
   line-height: 1.7;
   max-width: 505px;
   margin: 19px auto 0;
   font-size: 15px;
}
.line-breaks {
   white-space: pre-line;
}
.feature-surface {
   overflow: hidden;
   border: 1px solid #e2e8f4;
   border-radius: 28px;
   background: #fff;
}
.customize {
   display: grid;
   grid-template-columns: 0.84fr 1.16fr;
   gap: 10px;
   background: linear-gradient(120deg, #f0ecff 0%, #f3f3ff 52%, #ecf3ff 100%);
   min-height: 420px;
}
.feature-copy {
   padding: 45px 42px;
}
.feature-copy h3 {
   font-size: 34px;
   line-height: 1.16;
   letter-spacing: -1.2px;
   margin-top: 15px;
   font-weight: 730;
}
.feature-copy > p:not(.eyebrow):not(.fine-print) {
   font-size: 14px;
   line-height: 1.8;
   color: var(--muted);
   max-width: 390px;
   margin-top: 17px;
}
.customize-art {
   display: flex;
   align-items: center;
   padding: 22px 0;
}
.customize-art img {
   width: 100%;
   max-width: none;
   margin-left: 0;
   height: auto;
}
.swatch-row {
   display: flex;
   gap: 9px;
   margin-top: 26px;
}
.swatch-row span {
   height: 23px;
   width: 23px;
   border-radius: 50%;
   background: #2962ff;
   box-shadow: 0 0 0 3px #ffffff80;
}
.swatch-row span:nth-child(2) {
   background: #8c62f2;
}
.swatch-row span:nth-child(3) {
   background: #39b6a4;
}
.swatch-row span:nth-child(4) {
   background: #ffb463;
}
.swatch-row span:nth-child(5) {
   background: #f1809e;
}
.swatch-row span:nth-child(6) {
   background: #91b9f4;
}
.customize .fine-print {
   max-width: 310px;
}
.bento-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
   margin-top: 22px;
}
.progress {
   background: linear-gradient(150deg, #edf4ff, #e7f4f3);
   display: flex;
   flex-direction: column;
}
.progress .feature-copy {
   padding-bottom: 8px;
}
.progress > img {
   width: 90%;
   align-self: center;
   margin-top: auto;
   margin-bottom: 26px;
   height: auto;
}
.friends {
   background: linear-gradient(140deg, #eff3ff, #edf0ff);
}
.friends .feature-copy {
   padding-bottom: 22px;
}
.leaderboard {
   margin: 2px 34px 0;
   background: #fff;
   border: 1px solid #e2e8f5;
   border-radius: 20px;
   padding: 18px;
   box-shadow: 0 18px 35px -25px #1835624d;
   transform: rotate(-2deg);
}
.leaderboard-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 11px;
   font-weight: 650;
   padding: 1px 3px 14px;
}
.leaderboard-title > span:last-child {
   color: var(--blue);
   font-size: 18px;
}
.rank {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 9px;
   font-size: 12px;
}
.rank-number {
   color: #95a0b3;
   font-size: 11px;
   width: 16px;
}
.rank-avatar {
   display: grid;
   place-items: center;
   width: 26px;
   height: 26px;
   background: #dbe6ff;
   color: var(--blue);
   border-radius: 50%;
   font-size: 11px;
}
.avatar-one {
   background: #f9eedc;
   color: #d0a466;
}
.avatar-three {
   background: #e1f4f0;
   color: #38a99c;
}
.rank-code {
   font-weight: 650;
   letter-spacing: 1px;
}
.rank-points {
   margin-left: auto;
   color: #7b88a1;
   font-size: 10px;
   white-space: nowrap;
}
.rank-you {
   background: #e8efff;
   border: 1.5px solid var(--blue);
   border-radius: 11px;
   color: var(--blue);
   margin: 3px -24px;
   box-shadow: 0 5px 15px #2962ff09;
   padding-inline: 15px;
}
.rank-you .rank-number,
.rank-you .rank-points {
   color: var(--blue);
}
.rank-you .rank-code {
   letter-spacing: 0;
}
.rank-you > svg {
   width: 15px;
   height: 15px;
}
.rest {
   display: grid;
   grid-template-columns: 0.85fr 1.15fr;
   margin-top: 22px;
   background: #f0f2fc;
   min-height: 330px;
}
.rest .feature-copy {
   padding-left: 24px;
}
.rest-art {
   position: relative;
   min-height: 310px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   transform: rotate(-7deg);
}
.rest-orbit {
   position: absolute;
   width: 220px;
   height: 220px;
   border: 1px dashed #bfcdee;
   border-radius: 50%;
}
.moon {
   position: absolute;
   top: 45px;
   right: 77px;
   display: grid;
   place-items: center;
   width: 65px;
   height: 65px;
   border-radius: 20px;
   background: #e0e7fc;
   color: #6c85d3;
   font-size: 52px;
   line-height: 1;
   transform: rotate(18deg);
   box-shadow: 0 15px 30px -20px #4762a760;
}
.calendar-pill {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
   justify-content: center;
   background: #fff;
   box-shadow: 0 16px 30px -19px #40557d55;
   border: 1px solid #e3e9f7;
   border-radius: 19px;
   width: 77px;
   height: 104px;
   font-size: 27px;
   font-weight: 650;
   letter-spacing: -1px;
}
.calendar-pill svg {
   width: 22px;
   height: 22px;
   color: #bfd0ff;
}
.calendar-active {
   height: 125px;
   width: 87px;
   border: 2px solid var(--blue);
   color: var(--blue);
}
.calendar-active svg {
   width: 28px;
   height: 28px;
   padding: 4px;
   background: var(--blue);
   color: white;
   border-radius: 50%;
}
.calendar-last {
   transform: translateY(13px);
}
.feature-chips {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
   margin-top: 23px;
   max-width: 430px;
}
.feature-chips > span {
   background: #fff9;
   border: 1px solid #dee5f4;
   border-radius: 7px;
   padding: 7px 9px;
   font-size: 10px;
   color: #6b7c9b;
}
.final-section {
   padding-bottom: 48px;
}
.final-card {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   text-align: center;
   background: #244feb;
   color: #fff;
   border-radius: 30px;
   padding: 58px 24px 44px;
}
.final-card:before {
   position: absolute;
   z-index: -1;
   content: '';
   inset: 0;
   background: radial-gradient(ellipse at 90% 100%, #20c2b599, transparent 63%),
      radial-gradient(ellipse at 0% 0%, #132d9c90, transparent 60%);
}
.final-card > img {
   border-radius: 18px;
   margin: 0 auto 22px;
   box-shadow: 0 14px 25px -15px #08226c80;
}
.final-card h2 {
   font-size: 46px;
   line-height: 1.12;
   letter-spacing: -1.8px;
   max-width: 700px;
   margin-inline: auto;
}
.final-card > p:not(.final-note) {
   font-size: 14px;
   line-height: 1.7;
   color: #cbd8ff;
   margin-top: 18px;
}
.button-white {
   background: #fff;
   color: var(--blue);
   box-shadow: 0 10px 25px -15px #142d7c80;
   margin-top: 26px;
}
.button-white:hover {
   background: #f0f4ff;
}
.final-note {
   font-size: 10px;
   color: #c3d4ff;
   margin-top: 15px;
}
.final-orbit {
   position: absolute;
   width: 850px;
   height: 850px;
   border: 1px solid #ffffff12;
   border-radius: 50%;
   top: -340px;
   left: calc(50% - 425px);
   z-index: -1;
}
.site-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
   padding-bottom: 48px;
}
.site-footer .brand {
   font-size: 21px;
   gap: 8px;
}
.site-footer .brand img {
   border-radius: 8px;
}
.site-footer > div > p {
   font-size: 10px;
   color: #66758f;
   margin-top: 8px;
}
.site-footer nav {
   display: flex;
   flex-wrap: wrap;
   gap: 23px;
   font-size: 11px;
   color: #61708e;
}
.copyright {
   font-size: 10px;
   color: #66758f;
}
.toast {
   position: fixed;
   left: 50%;
   bottom: max(24px, env(safe-area-inset-bottom));
   transform: translate(-50%, 20px);
   background: var(--ink);
   color: #fff;
   padding: 12px 20px;
   border-radius: 12px;
   font-size: 13px;
   opacity: 0;
   pointer-events: none;
   transition:
      opacity 0.15s,
      transform 0.15s;
   z-index: 10;
   max-width: 90%;
   text-align: center;
}
.toast.is-visible {
   opacity: 1;
   transform: translate(-50%, 0);
}
@keyframes shimmer {
   from {
      background-position: 200% 0;
   }
   to {
      background-position: -200% 0;
   }
}
@media (min-width: 1500px) {
   .hero {
      padding-top: 80px;
      padding-bottom: 115px;
   }
}
@media (max-width: 1100px) {
   .wrap {
      width: calc(100% - 56px);
   }
   .desktop-nav {
      gap: 20px;
      font-size: 12px;
   }
   .hero {
      grid-template-columns: 1.05fr 1fr;
      gap: 0;
      padding-top: 45px;
   }
   h1 {
      font-size: clamp(40px, 5.2vw, 60px);
      letter-spacing: -2.6px;
   }
   .hero-intro {
      font-size: 15px;
   }
   .header-actions {
      gap: 14px;
   }
   .feature-copy {
      padding: 32px;
   }
   .feature-copy h3 {
      font-size: 29px;
   }
   .customize {
      grid-template-columns: 0.95fr 1.05fr;
      min-height: 380px;
   }
   .friends .feature-copy {
      padding-bottom: 20px;
   }
   .leaderboard {
      margin-inline: 25px;
      padding: 15px;
   }
   .rank {
      gap: 8px;
   }
   .rank-you {
      margin-inline: -20px;
   }
   .rank-code {
      font-size: 10px;
   }
   .rank-points {
      font-size: 9px;
   }
   .rest-art {
      gap: 10px;
   }
   .calendar-pill {
      width: 62px;
   }
   .calendar-active {
      width: 73px;
   }
   .rest .feature-copy {
      padding-left: 15px;
   }
   .hero-ui {
      width: 100%;
      margin-left: 0;
   }
   .art-kicker {
      right: 8px;
      font-size: 9px;
   }
}
@media (max-width: 800px) {
   .wrap {
      width: calc(100% - 40px);
      max-width: 620px;
   }
   .site-header {
      height: 83px;
      gap: 14px;
   }
   .brand {
      font-size: 23px;
   }
   .brand img {
      width: 34px;
      height: 34px;
      border-radius: 10px;
   }
   .desktop-nav {
      display: none;
   }
   .header-actions {
      gap: 13px;
   }
   .button-small {
      font-size: 11px;
      min-height: 38px;
      padding: 10px 12px;
   }
   .button-small svg {
      display: none;
   }
   .language-switch {
      font-size: 10px;
      border-radius: 9px;
   }
   .language-switch a {
      padding: 6px;
   }
   .hero {
      grid-template-columns: 1fr;
      padding-top: 48px;
      padding-bottom: 36px;
      gap: 30px;
   }
   .hero-content {
      max-width: 560px;
   }
   .hero .eyebrow {
      font-size: 10px;
   }
   h1 {
      font-size: clamp(39px, 8.5vw, 61px);
      letter-spacing: -2.6px;
      line-height: 1.12;
      margin-top: 22px;
   }
   .hero-intro {
      font-size: 16px;
      max-width: 480px;
      margin-top: 24px;
   }
   .hero-install {
      margin-top: 25px;
   }
   .forecast-launch {
      margin-top: 30px;
      max-width: none;
      padding-top: 25px;
   }
   .hero-art {
      margin: 0 auto;
      width: 100%;
      max-width: 510px;
      padding-top: 22px;
      overflow: clip;
   }
   .hero-ui {
      width: 100%;
      margin: 0;
   }
   .hero-art figcaption {
      margin-top: -6px;
   }
   .art-kicker {
      right: 30px;
      top: 7px;
   }
   .cross-one {
      left: 10%;
   }
   .cross-two {
      right: 5%;
   }
   .hero:before {
      top: 48%;
      width: 100%;
      height: 45%;
      right: 0;
   }
   .hero-content > .eyebrow {
      justify-content: flex-start;
   }
   .features-section {
      padding-top: 55px;
   }
   .section-heading {
      margin-bottom: 32px;
   }
   .section-heading h2 {
      font-size: 34px;
      letter-spacing: -1.3px;
      margin-top: 13px;
   }
   .section-heading > p:last-child:not(.eyebrow) {
      font-size: 14px;
      margin-top: 16px;
   }
   .customize {
      grid-template-columns: 1fr;
      gap: 0;
   }
   .feature-copy {
      padding: 31px 28px;
   }
   .feature-copy h3 {
      font-size: 31px;
      max-width: 450px;
   }
   .customize-art {
      padding: 0 0 20px;
   }
   .customize-art img {
      width: 100%;
      margin: 0;
   }
   .swatch-row {
      margin-top: 22px;
   }
   .customize .fine-print {
      max-width: 400px;
   }
   .bento-grid {
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 18px;
   }
   .feature-surface {
      border-radius: 23px;
   }
   .progress > img {
      max-width: 440px;
      margin-top: 12px;
      margin-bottom: 25px;
   }
   .leaderboard {
      max-width: 440px;
      margin: 0 auto;
      width: calc(100% - 64px);
      padding: 19px;
      transform: rotate(-1.5deg);
   }
   .rank {
      padding: 14px 9px;
      gap: 12px;
   }
   .rank-code {
      font-size: 12px;
   }
   .rank-points {
      font-size: 11px;
   }
   .rank-you {
      margin-inline: -23px;
   }
   .friends .feature-copy {
      padding-bottom: 27px;
   }
   .rest {
      grid-template-columns: 1fr;
      margin-top: 18px;
   }
   .rest-art {
      min-height: 245px;
      order: 2;
   }
   .rest .feature-copy {
      padding: 31px 28px 0;
   }
   .moon {
      right: 27%;
      top: 12px;
   }
   .calendar-pill {
      width: 75px;
   }
   .calendar-active {
      width: 86px;
   }
   .feature-chips {
      max-width: none;
   }
   .final-card {
      padding-top: 40px;
      padding-bottom: 35px;
      border-radius: 24px;
   }
   .final-card h2 {
      font-size: 35px;
      letter-spacing: -1.2px;
   }
   .final-card > p:not(.final-note) {
      font-size: 13px;
      max-width: 330px;
      margin-inline: auto;
   }
   .site-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      padding-bottom: 30px;
   }
   .site-footer nav {
      grid-column: 1/-1;
      grid-row: 2;
      gap: 20px;
      font-size: 10px;
   }
   .copyright {
      grid-column: 2;
      grid-row: 1;
   }
   .forecast-results {
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .result-card {
      padding: 26px;
   }
   .forecast-results li {
      font-size: 17px;
   }
   .result-actions {
      gap: 18px;
   }
   .result-year {
      font-size: 29px;
   }
   .forecast-result {
      padding-top: 5px;
      padding-bottom: 15px;
   }
   .result-actions .button {
      width: 100%;
      font-size: 13px;
   }
}
@media (max-width: 480px) {
   .wrap {
      width: calc(100% - 36px);
   }
   .site-header {
      height: 77px;
   }
   .header-actions {
      gap: 9px;
   }
   .header-actions > .button {
      display: none;
   }
   .hero {
      padding-top: 35px;
      gap: 27px;
   }
   h1 {
      font-size: clamp(34px, 9.3vw, 45px);
      letter-spacing: -2px;
   }
   .ink-highlight:after {
      height: 6px;
   }
   .hero-intro {
      font-size: 14px;
      line-height: 1.75;
      max-width: 345px;
   }
   .hero-install .button {
      width: 100%;
      font-size: 14px;
      min-height: 52px;
   }
   .hero-install > p {
      text-align: center;
      font-size: 11px;
   }
   .forecast-heading-row h2 {
      font-size: 16px;
   }
   .forecast-form {
      flex-wrap: wrap;
      padding: 7px;
      gap: 3px;
   }
   .forecast-form input {
      width: 100%;
      flex-basis: 100%;
      font-size: 15px;
      padding: 12px 9px;
   }
   .forecast-form button {
      justify-content: center;
      width: 100%;
      min-height: 43px;
      font-size: 12px;
   }
   .examples {
      gap: 5px;
   }
   .example-chip {
      font-size: 11px;
      padding: 6px 7px;
   }
   .fine-print {
      font-size: 10px !important;
   }
   .hero-art {
      max-width: 390px;
   }
   .art-kicker {
      right: 10px;
   }
   .section-heading h2 {
      font-size: 29px;
   }
   .section-heading > p:last-child:not(.eyebrow) {
      font-size: 13px;
   }
   .eyebrow {
      font-size: 9px;
      letter-spacing: 1.1px;
   }
   .feature-copy {
      padding: 28px 24px;
   }
   .feature-copy h3 {
      font-size: 29px;
      letter-spacing: -1px;
   }
   .feature-copy > p:not(.eyebrow):not(.fine-print) {
      font-size: 13px;
      line-height: 1.8;
   }
   .customize-art {
      padding-top: 0;
      padding-bottom: 15px;
   }
   .feature-copy .fine-print {
      font-size: 10px !important;
   }
   .final-card h2 {
      font-size: 31px;
   }
   .final-card > img {
      width: 59px;
      height: 59px;
      border-radius: 15px;
   }
   .final-card .button {
      font-size: 13px;
      padding-inline: 18px;
   }
   .site-footer nav {
      gap: 16px;
   }
   .result-card {
      padding: 24px 20px;
   }
   .result-year {
      display: none;
   }
   .result-top {
      gap: 11px;
   }
   .result-top #forecast-habit {
      font-size: 14px;
   }
   .result-top .eyebrow {
      font-size: 9px;
   }
   .forecast-results li {
      font-size: 16px;
   }
   .result-actions {
      margin-top: 24px;
   }
}
@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }
   *,
   *:before,
   *:after {
      animation: none !important;
      transition: none !important;
   }
}

/* Product experience: one check becomes visible progress. */
:root {
   --paper: #f3f6ff;
   --ink: #0a1b4c;
   --scene-blue: #2962ff;
}
body {
   overflow-x: clip;
   background: linear-gradient(180deg, #f3f6ff 0, #f8faff 1100px, #f8faff 100%);
}
.site-header { height: 96px; }
.hero {
   isolation: isolate;
   overflow: visible;
   grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
   gap: 36px;
   padding-top: 46px;
   padding-bottom: 86px;
}
.hero:before {
   width: 100%;
   height: 100%;
   right: 0;
   top: -6%;
   background: radial-gradient(ellipse at 64% 42%, #a9c7ff55, #d8e5ff35 43%, transparent 68%);
}
.hero-content { position: relative; z-index: 2; }
h1 {
   font-size: clamp(46px, 4.6vw, 68px);
   font-weight: 820;
   letter-spacing: -3.7px;
   line-height: 1.12;
}
html[lang='en'] .hero h1 { font-size: clamp(50px, 4.9vw, 74px); }
.ink-highlight {
   padding: 0.035em 0.12em 0.13em;
   margin: 0.09em -0.12em 0;
   border-radius: 0.2em;
   color: white;
   background: var(--blue);
   box-shadow: 0 13px 30px -20px #1945cfaa;
   transform: rotate(-1.2deg);
}
.ink-highlight:after { display: none; }
.hero-intro { max-width: 480px; font-size: 17px; line-height: 1.7; margin-top: 26px; }
.button { border-radius: 15px; box-shadow: 0 13px 26px -14px #1c4ceaa8; }
.button:active { transform: translateY(0) scale(0.98); }
.forecast-launch {
   margin-top: 29px;
   padding: 23px;
   border: 1px solid #d5e1f6;
   border-radius: 24px;
   background: #ffffffa6;
   box-shadow: 0 16px 40px -28px #1d3c7d36;
}
.forecast-form { box-shadow: none; border-color: #cfdbf1; }
.forecast-heading-row h2 { font-size: 16px; }
.forecast-launch .fine-print { margin-top: 13px; }
.forecast-results li:before { color: #245be9; background: #e8eeff; }

.hero-art.growth-stage {
   position: relative;
   display: grid;
   gap: 20px;
   width: 100%;
   max-width: none;
   min-width: 0;
   aspect-ratio: auto;
   margin: 0;
   padding: 38px 6px 0;
   perspective: 1200px;
   transform: none;
   isolation: isolate;
}
.growth-stage:before {
   content: '';
   position: absolute;
   inset: -5% 0 -2% -5%;
   z-index: -2;
   border-radius: 50%;
   background: radial-gradient(ellipse at 48% 49%, #9abaff55, #c9dcff55 36%, #d0f3f044 61%, transparent 73%);
   pointer-events: none;
}
.growth-stage .orbit {
   z-index: -1;
   left: 0;
   top: 3%;
   width: 100%;
   height: 95%;
   border-color: #adc8ff55;
   transform: rotate(-5deg);
}
.growth-stage .orbit-two { inset: 12% auto auto -5%; width: 105%; height: 78%; border-color: #a4bff43d; }
.growth-stage .art-kicker {
   position: absolute;
   top: 1%;
   right: 3%;
   font-size: 10px;
   letter-spacing: 0.4px;
   transform: rotate(4deg);
}
.growth-stage .art-kicker span { background: #2962ff; }
.growth-year {
   position: relative;
   z-index: 1;
   top: auto;
   left: auto;
   width: 100%;
   padding: 28px 24px 23px;
   border-radius: 28px;
   background: #fff;
   border: 1px solid #e6ecfa;
   box-shadow: 0 28px 36px -24px #162c6f47, 0 5px 16px -8px #182e5726;
   transform: rotate(-2deg) translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
   transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s;
   animation: year-float 8s ease-in-out infinite;
}
.growth-year-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.growth-year-top strong { font-size: clamp(16px, 1.55vw, 22px); letter-spacing: -0.75px; line-height: 1.2; }
.growth-year-top > span { font-size: 17px; font-weight: 700; letter-spacing: -0.7px; color: #172342; }
.growth-months { display: flex; justify-content: space-between; margin: 25px 0 10px; color: #748199; font-size: 11px; }
.growth-map {
   position: relative;
   display: grid;
   grid-template-columns: repeat(52, minmax(0, 1fr));
   grid-template-rows: repeat(7, auto);
   grid-auto-flow: column;
   gap: 2px;
   overflow: hidden;
   border-radius: 3px;
   isolation: isolate;
}
.growth-cell { min-width: 0; min-height: 0; aspect-ratio: 1; border-radius: 2px; background: #e7edf9; transition: opacity 0.7s, background-color 0.4s; }
.growth-cell[data-level='1'] { background: #d0deff; }
.growth-cell[data-level='2'] { background: #9dbbff; }
.growth-cell[data-level='3'] { background: #5d8ef7; }
.growth-cell[data-level='4'] { background: #2962ff; }
.growth-stage.is-enhanced:not(.is-complete) .growth-cell { opacity: 0.82; }
.growth-stage.is-complete .growth-cell { opacity: 1; }
.growth-cell.is-current {
   position: relative;
   z-index: 2;
   background: #2962ff;
   box-shadow: 0 0 0 2px white, 0 0 0 3.5px #2962ff;
}
.growth-map:after {
   content: '';
   pointer-events: none;
   position: absolute;
   z-index: 3;
   left: var(--growth-origin-x, 82%);
   top: var(--growth-origin-y, 50%);
   width: 32%;
   aspect-ratio: 1;
   border-radius: 50%;
   opacity: 0;
   background: radial-gradient(circle, #2962ff00 25%, #2962ff26 52%, #2962ff00 70%);
   transform: translate(-50%, -50%) scale(0);
}
.growth-stage.is-completing .growth-map:after,
.growth-stage.is-demoing .growth-map:after { animation: year-bloom 1.1s ease-out both; }
.growth-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 15px; color: #8e95a4; font-size: 9px; }
.growth-legend i { display: block; width: 10px; height: 10px; border-radius: 2px; background: #e7edf9; }
.growth-legend i:nth-of-type(2) { background: #d0deff; }
.growth-legend i:nth-of-type(3) { background: #9dbbff; }
.growth-legend i:nth-of-type(4) { background: #5d8ef7; }
.growth-legend i:nth-of-type(5) { background: #2962ff; }
.growth-habit,
.growth-water {
   position: relative;
   top: auto;
   left: auto;
   display: block;
   height: auto;
   padding: 0;
   border: 0;
   border-radius: 24px;
   background: none;
   filter: drop-shadow(0 22px 17px #17265a25);
   transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s;
}
.growth-habit {
   z-index: 3;
   overflow: hidden;
   width: 100%;
   transform: rotate(1deg) translate3d(calc(var(--scene-x, 0px) * -0.4), calc(var(--scene-y, 0px) * -0.4), 0);
   animation: habit-float 6.5s ease-in-out infinite;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
}
.growth-habit img,
.growth-water img { display: block; width: 100%; height: auto; border-radius: 24px; pointer-events: none; }
.growth-habit:focus-visible { outline: 3px solid var(--blue); outline-offset: 9px; }
.growth-check {
   display: grid;
   place-items: center;
   position: absolute;
   right: 3.88%;
   top: 28.75%;
   width: 9.92%;
   aspect-ratio: 1;
   color: white;
   border: 2px solid #2962ff;
   border-radius: 50%;
   background: #ebeaff;
   transition: background 0.3s, transform 0.35s;
}
.growth-check > svg { width: 59%; height: 59%; stroke-width: 2.7; opacity: 0; transform: scale(0.45); transition: opacity 0.2s, transform 0.35s cubic-bezier(0.2, 1.7, 0.4, 1); }
.growth-habit[aria-pressed='true'] .growth-check { background: #2962ff; transform: scale(1.04); }
.growth-habit[aria-pressed='true'] .growth-check > svg { opacity: 1; transform: scale(1); }
.growth-check:after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #2962ff; opacity: 0; pointer-events: none; }
.growth-stage.is-completing .growth-check:after { animation: check-impulse 0.85s ease-out both; }
.growth-water {
   z-index: 2;
   width: 93%;
   justify-self: end;
   transform: rotate(-1deg) translate3d(calc(var(--scene-x, 0px) * 0.45), calc(var(--scene-y, 0px) * 0.45), 0);
   animation: water-float 7.5s ease-in-out infinite;
}
.growth-stage.is-complete .growth-year { box-shadow: 0 35px 45px -24px #183da36b, 0 5px 18px -8px #2962ff33; }
.growth-stage.is-complete .growth-habit { filter: drop-shadow(0 28px 20px #284aba3d); }
.growth-hint {
   position: relative;
   right: auto;
   top: auto;
   justify-self: end;
   max-width: 275px;
   font-size: 12px;
   line-height: 1.45;
   color: #4d68a5;
   padding-left: 31px;
   transform: rotate(-3deg);
}
.growth-hint:before { content: '\2934'; position: absolute; left: 0; top: -10px; font-size: 35px; color: #2962ff; }
.hero-art.growth-stage > figcaption { position: absolute; top: 108%; left: 8%; width: 92%; margin: 0; text-align: center; color: #8793ac; font-size: 9px; line-height: 1.5; }
.growth-stage.motion-paused *,
.growth-stage:not(.is-visible) * { animation-play-state: paused !important; }
@keyframes year-float { 50% { translate: 0 -3px; } }
@keyframes habit-float { 50% { translate: 0 3px; } }
@keyframes water-float { 50% { translate: 0 -3px; } }
@keyframes check-impulse { 0% { opacity: 0.75; transform: scale(0.9); } 100% { opacity: 0; transform: scale(3); } }
@keyframes year-bloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); } }

/* Product surfaces and a working appearance preview. */
.section-heading h2 { font-size: clamp(36px, 4vw, 55px); font-weight: 790; letter-spacing: -2.5px; line-height: 1.12; }
.feature-surface { border-radius: 32px; box-shadow: 0 25px 60px -48px #18346d45; }
.customize {
   --preview-accent: #2962ff;
   --preview-light: #e6edff;
   --preview-pattern: #2962ff13;
   --preview-surface: #f1f3ff;
   background: radial-gradient(ellipse at 100% 0, #d7eaff99, transparent 65%), linear-gradient(120deg, #eee9ff, #f4f4ff 55%, #eaf2ff);
   min-height: 520px;
   transition: background-color 0.45s;
}
.customize[data-preview-theme='teal'] { --preview-accent: #0b9ca7; --preview-light: #d9f3f0; --preview-pattern: #13b6ad26; --preview-surface: #edf9f5; background-color: #dff4ee; }
.customize[data-preview-theme='violet'] { --preview-accent: #7547e6; --preview-light: #ebe1ff; --preview-pattern: #7547e626; --preview-surface: #f6f0ff; background-color: #ece2ff; }
.customize[data-preview-theme='sand'] { --preview-accent: #ee731f; --preview-light: #fff0dc; --preview-pattern: #ee731f24; --preview-surface: #fff8ec; background-color: #f7eddb; }
.customize .feature-copy { align-self: center; }
.theme-controls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
[data-preview-theme].theme-choice,
.swatch-row button,
.theme-controls button {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 37px;
   padding: 7px 10px;
   border: 1px solid #c6d2eb;
   border-radius: 11px;
   color: #52658d;
   background: #ffffff8c;
   font-size: 11px;
   font-weight: 600;
   transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.swatch-row button:before,
.theme-controls button:before { content: ''; width: 13px; height: 13px; background: #2962ff; border-radius: 50%; }
.swatch-row button[data-preview-theme='teal']:before,
.theme-controls button[data-preview-theme='teal']:before { background: #0b9ca7; }
.swatch-row button[data-preview-theme='violet']:before,
.theme-controls button[data-preview-theme='violet']:before { background: #7547e6; }
.swatch-row button[data-preview-theme='sand']:before,
.theme-controls button[data-preview-theme='sand']:before { background: #ee731f; }
.swatch-row button[aria-pressed='true'],
.theme-controls button[aria-pressed='true'] { border-color: var(--preview-accent); background: white; color: var(--preview-accent); box-shadow: 0 0 0 2px #ffffff80; transform: translateY(-2px); }
.theme-preview-card {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 12px;
   max-width: 350px;
   min-height: 81px;
   padding: 16px;
   margin-top: 20px;
   border: 1px solid #ffffffc9;
   border-radius: 18px;
   color: #10234b;
   background-color: var(--preview-surface);
   box-shadow: 0 12px 24px -17px #1b315d40;
   transition: background-color 0.4s, color 0.4s;
}
.theme-preview-card:before {
   content: '';
   position: absolute;
   z-index: -1;
   inset: -50% -10% -70% 25%;
   border-radius: 50%;
   background: repeating-linear-gradient(0deg, var(--preview-pattern) 0 9px, transparent 9px 15px);
   rotate: -20deg;
   transition: background 0.4s;
}
.preview-habit-icon { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; border-radius: 12px; color: var(--preview-accent); background: var(--preview-light); }
.preview-habit-icon svg { width: 21px; height: 21px; }
.preview-habit-copy { min-width: 0; flex: 1; }
.preview-habit-copy strong { display: block; font-size: 14px; line-height: 1.3; letter-spacing: -0.3px; }
.preview-habit-copy small { display: block; margin-top: 4px; font-size: 10px; color: #74819a; }
.preview-habit-check { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: white; background: var(--preview-accent); transition: background-color 0.4s; }
.preview-habit-check svg { width: 18px; height: 18px; stroke-width: 2.5; }
.theme-preview-name { color: var(--preview-accent); font-size: 11px; font-weight: 600; margin-top: 12px; }
.theme-changed .theme-preview-card { animation: theme-lift 0.45s ease-out; }
@keyframes theme-lift { 45% { transform: translateY(-5px) rotate(-1deg); } }
.customize-art { align-self: center; }
.customize-art > img { transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1); }
.customize:hover .customize-art > img { transform: translateY(-7px) rotate(0.8deg); }
.progress { background: linear-gradient(145deg, #ffffff, #eaf1ff); }
.friends { background: linear-gradient(145deg, #e9f6f7, #e2effc); }
.rest { background: linear-gradient(115deg, #edf2ff, #eef6ff); }
.is-revealable { opacity: 0; translate: 0 22px; transition: opacity 0.7s, translate 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.is-revealable.is-revealed { opacity: 1; translate: none; }

/* Clear, verifiable product facts and editorial entry points. */
.product-facts { position: relative; z-index: 2; margin-top: 13px; margin-bottom: 22px; }
.product-facts dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 28px 0; border-block: 1px solid #dbe4f6; }
.fact { padding: 0 27px; text-align: center; border-right: 1px solid #dbe4f6; }
.fact:first-child { padding-left: 0; }
.fact:last-child { padding-right: 0; border: 0; }
.fact dt { color: #183363; font-size: 22px; line-height: 1.2; letter-spacing: -0.7px; font-weight: 740; }
.fact dd { margin: 9px auto 0; max-width: 200px; color: #7a88a3; font-size: 11px; line-height: 1.5; }
.guides-section { padding-top: 90px; padding-bottom: 30px; }
.guides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.guide-link { display: flex; flex-direction: column; align-items: flex-start; position: relative; min-width: 0; min-height: 270px; padding: 33px; border: 1px solid #dce6f7; border-radius: 25px; background: #fff; transition: transform 0.25s, box-shadow 0.25s; }
.guide-link:hover { transform: translateY(-5px); box-shadow: 0 22px 35px -28px #244c9855; }
.guide-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eaf0ff; color: #2962ff; font-size: 12px; font-weight: 700; margin-bottom: 19px; }
.guide-link h3 { font-size: 24px; font-weight: 740; line-height: 1.2; letter-spacing: -0.7px; max-width: 390px; }
.guide-link p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 410px; }
.guide-cta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; color: #2962ff; font-size: 12px; font-weight: 650; }
.guide-cta:after { content: '\2197'; font-size: 19px; }
.guide-main { padding-top: 35px; padding-bottom: 90px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; color: #8691a6; font-size: 12px; line-height: 1.6; }
.breadcrumbs a { color: #2962ff; }
.guide-header { max-width: 900px; margin: 50px 0 55px; }
.guide-header h1 { max-width: 920px; font-size: clamp(40px, 5vw, 66px); line-height: 1.1; letter-spacing: -2.8px; margin-top: 17px; }
.guide-intro { margin-top: 26px; font-size: 20px; line-height: 1.7; color: #657594; max-width: 760px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: start; }
.guide-article { min-width: 0; }
.guide-article section + section { margin-top: 44px; }
.guide-article h2 { font-size: 29px; letter-spacing: -1px; line-height: 1.2; margin-bottom: 17px; }
.guide-article p,
.guide-article li { color: #576a8c; font-size: 16px; line-height: 1.85; }
.guide-article p + p { margin-top: 15px; }
.guide-article ol,
.guide-article ul { margin: 20px 0 0; padding-left: 23px; }
.guide-article li + li { margin-top: 14px; }
.guide-note { margin-top: 36px; border-left: 3px solid #2962ff; border-radius: 0 15px 15px 0; padding: 22px 25px; background: #e9f0ff; color: #4e6390; font-size: 14px; line-height: 1.8; }
.guide-article table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.guide-article th,
.guide-article td { padding: 15px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #dce5f5; color: #5c6e8e; overflow-wrap: anywhere; }
.guide-article th { color: #193567; background: #eaf0ff; font-weight: 650; }
.guide-aside { position: sticky; top: 28px; padding: 25px; border-radius: 26px; background: #eaf1ff; border: 1px solid #dbe6f8; }
.guide-aside figure { margin: 0 -12px; }
.guide-aside img { width: 100%; height: auto; }
.guide-aside figcaption { max-width: 255px; margin: 6px auto 22px; color: #8693aa; font-size: 10px; line-height: 1.6; text-align: center; }
.guide-aside > .button { width: 100%; font-size: 12px; gap: 8px; padding-inline: 12px; }
.guide-aside > p { margin-top: 13px; text-align: center; color: #7f8fab; font-size: 10px; line-height: 1.6; }

@media (min-width: 1400px) {
   .hero { padding-top: 52px; padding-bottom: 105px; }
   .hero-art.growth-stage { width: 100%; }
}
@media (max-width: 1100px) and (min-width: 901px) {
   .hero { gap: 28px; }
   .hero h1 { font-size: clamp(43px, 4.7vw, 55px); letter-spacing: -2.8px; }
   html[lang='en'] .hero h1 { font-size: clamp(46px, 5vw, 60px); }
   .hero-intro { font-size: 15px; }
   .growth-year { padding: 22px 17px 15px; border-radius: 23px; }
   .growth-year-top strong { font-size: 16px; }
   .growth-months { margin-top: 18px; font-size: 9px; }
   .growth-year-top > span { font-size: 14px; }
   .growth-legend { margin-top: 11px; font-size: 8px; }
   .growth-legend i { width: 8px; height: 8px; }
   .growth-hint { font-size: 10px; max-width: 210px; }
   .forecast-launch { padding: 20px; }
   .guide-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
}
@media (max-width: 900px) {
   .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 28px; padding-bottom: 72px; max-width: 620px; }
   .hero-content { display: contents; }
   .hero-content > * { position: relative; z-index: 2; min-width: 0; }
   .hero-content > .eyebrow { order: 1; margin-bottom: 16px; }
   .hero h1 { order: 2; font-size: clamp(37px, 8vw, 60px); letter-spacing: -2.5px; margin: 0; }
   html[lang='en'] .hero h1 { font-size: clamp(42px, 9vw, 65px); }
   .hero-intro { order: 3; font-size: 15px; line-height: 1.7; margin-top: 22px; max-width: 500px; }
   .hero-install { order: 4; margin-top: 23px; }
   .hero-install .button { min-height: 53px; }
   .hero-install > p { margin-top: 9px; }
   .hero-art.growth-stage { order: 5; width: 100%; max-width: 580px; margin: 30px 0 38px; justify-self: center; aspect-ratio: auto; }
   .forecast-launch { order: 6; width: 100%; max-width: none; margin: 0; padding: 23px; }
   .growth-year-top strong { font-size: 20px; }
   .growth-year-top > span { font-size: 17px; }
   .product-facts { margin-top: 0; }
   .product-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; padding-block: 26px; }
   .fact { padding-inline: 16px; }
   .fact:nth-child(2) { border-right: 0; }
   .fact:first-child { padding-left: 16px; }
   .fact:last-child { padding-right: 16px; }
   .fact dt { font-size: 22px; }
   .fact dd { font-size: 11px; max-width: 190px; }
   .customize { min-height: 0; }
   .customize .feature-copy { padding: 31px 28px; }
   .theme-preview-card { max-width: 370px; }
   .customize-art img { max-width: 720px; width: 100%; }
   .guides-section { padding-top: 65px; }
   .guides-grid { gap: 16px; }
   .guide-link { padding: 26px; min-height: 280px; }
   .guide-link h3 { font-size: 22px; }
   .guide-main { padding-top: 22px; padding-bottom: 65px; }
   .guide-header { margin-top: 34px; margin-bottom: 38px; }
   .guide-header h1 { font-size: clamp(38px, 7vw, 54px); letter-spacing: -2px; }
   .guide-intro { font-size: 17px; margin-top: 20px; }
   .guide-layout { grid-template-columns: 1fr; gap: 40px; }
   .guide-aside { position: static; max-width: 450px; width: 100%; margin-inline: auto; }
}
@media (max-width: 600px) {
   .hero { padding-top: 20px; padding-bottom: 50px; }
   .hero h1 { font-size: clamp(34px, 8.7vw, 48px); letter-spacing: -2px; line-height: 1.14; }
   html[lang='en'] .hero h1 { font-size: clamp(39px, 9.3vw, 54px); }
   .hero-content > .eyebrow { font-size: 9px; letter-spacing: 1.2px; margin-bottom: 16px; }
   .hero-intro { font-size: 13px; line-height: 1.7; margin-top: 20px; }
   .hero-install { margin-top: 21px; }
   .hero-install .button { width: 100%; font-size: 14px; }
   .hero-install > p { font-size: 10px; }
   .hero-art.growth-stage { margin-top: 25px; margin-bottom: 30px; gap: 17px; }
   .growth-year { padding: 21px 17px 16px; border-radius: 22px; }
   .growth-year-top strong { font-size: 15px; letter-spacing: -0.4px; }
   .growth-year-top > span { font-size: 14px; }
   .growth-months { margin-top: 19px; font-size: 8px; }
   .growth-map { gap: 1px; }
   .growth-cell { border-radius: 1px; }
   .growth-legend { font-size: 7px; gap: 3px; margin-top: 11px; }
   .growth-legend i { width: 7px; height: 7px; border-radius: 1px; }
   .growth-stage .art-kicker { font-size: 8px; top: 1%; right: 3%; }
   .growth-check { border-width: 1.5px; }
   .growth-check:after { border-width: 1.5px; }
   .growth-habit { top: auto; }
   .growth-water { top: auto; }
   .growth-hint { font-size: 10px; max-width: 235px; top: auto; right: auto; }
   .hero-art.growth-stage > figcaption { top: 121%; left: 4%; width: 92%; font-size: 8px; }
   .growth-habit, .growth-water { filter: drop-shadow(0 15px 12px #17265a25); }
   .forecast-launch { padding: 20px 17px; border-radius: 21px; }
   .forecast-heading-row h2 { font-size: 16px; }
   .forecast-form input { font-size: 16px; }
   .forecast-launch .fine-print { font-size: 10px !important; }
   .section-heading h2 { font-size: 33px; letter-spacing: -1.4px; }
   .feature-surface { border-radius: 27px; }
   .customize .feature-copy { padding: 29px 24px; }
   .theme-controls { gap: 7px; margin-top: 22px; }
   .swatch-row button, .theme-controls button { padding-inline: 9px; font-size: 10px; min-height: 36px; }
   .theme-preview-card { padding: 14px; min-height: 78px; margin-top: 18px; }
   .preview-habit-copy strong { font-size: 13px; }
   .preview-habit-copy small { font-size: 9px; }
   .product-facts { margin-bottom: 8px; }
   .fact dt { font-size: 19px; letter-spacing: -0.4px; }
   .fact dd { font-size: 10px; }
   .guides-grid { grid-template-columns: 1fr; }
   .guide-link { min-height: 0; padding: 27px; border-radius: 23px; }
   .guide-link h3 { font-size: 23px; }
   .guide-link p { font-size: 13px; }
   .guide-number { margin-bottom: 15px; }
   .guide-header h1 { font-size: clamp(34px, 8.5vw, 42px); line-height: 1.12; letter-spacing: -1.6px; }
   .guide-header .eyebrow { font-size: 9px; }
   .guide-intro { font-size: 16px; line-height: 1.75; }
   .breadcrumbs { font-size: 10px; gap: 8px; }
   .guide-article h2 { font-size: 25px; }
   .guide-article p, .guide-article li { font-size: 15px; line-height: 1.85; }
   .guide-note { padding: 19px; font-size: 13px; }
   .guide-article table { font-size: 11px; }
   .guide-article th, .guide-article td { padding: 12px 7px; }
}
@media (prefers-reduced-motion: reduce) {
   .growth-stage *, .is-revealable, .customize-art > img, .theme-preview-card { animation: none !important; transition: none !important; translate: none !important; }
   .growth-map:after, .growth-check:after { display: none !important; }
   .is-revealable { opacity: 1; }
}

/* Keep the DOM and keyboard order copy -> scene -> forecast on small screens. */
@media (min-width: 901px) {
   .hero {
      grid-template-areas: 'copy art' 'forecast art';
      grid-template-rows: auto auto;
      column-gap: 36px;
      row-gap: 27px;
      align-items: center;
   }
   .hero-content { grid-area: copy; align-self: end; }
   .hero-art.growth-stage { grid-area: art; align-self: center; }
   .hero > .forecast-launch { grid-area: forecast; align-self: start; margin: 0; width: 100%; }
}
@media (max-width: 900px) {
   .hero { grid-template-areas: 'copy' 'art' 'forecast'; }
   .hero-content { display: block; grid-area: copy; }
   .hero-content > .eyebrow { margin-bottom: 16px; }
   .hero-art.growth-stage { grid-area: art; }
   .hero > .forecast-launch { grid-area: forecast; }
}
@media (max-width: 600px) {
   .hero h1 { font-size: clamp(30px, 8.7vw, 48px); }
   html[lang='en'] .hero h1 { font-size: clamp(36px, 9.3vw, 54px); }
}

/* Keep the live preview above the real UI collage, never compressed beside it. */
.customize-art { position: relative; display: block; min-width: 0; padding: 80px 0 18px; }
.customize-art > .theme-preview-card { position: absolute; z-index: 2; top: 8px; left: 12%; width: 78%; max-width: 370px; margin: 0; }
.customize-art > img { display: block; width: 100%; height: auto; }
.swatch-row button span { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }
.theme-preview-label { font-size: 12px !important; line-height: 1.5 !important; margin-top: 23px !important; }
.theme-preview-label .theme-preview-name { margin-left: 4px; }
.theme-controls { margin-top: 13px; }
@media (max-width: 900px) {
   .customize-art { padding: 90px 0 14px; }
   .customize-art > .theme-preview-card { top: 5px; left: 11%; width: 78%; max-width: none; }
}
@media (max-width: 600px) {
   .customize-art > .theme-preview-card { top: 4px; left: 7%; width: 86%; }
   .customize-art { padding-top: 91px; }
}

.mobile-menu {
   display: none;
   position: relative;
}
.mobile-menu summary {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border: 1px solid #dfe6f5;
   border-radius: 12px;
   background: #fff;
   cursor: pointer;
   list-style: none;
}
.mobile-menu summary::-webkit-details-marker {
   display: none;
}
.mobile-menu-icon {
   display: grid;
   gap: 4px;
}
.mobile-menu-icon span {
   display: block;
   width: 18px;
   height: 2px;
   border-radius: 2px;
   background: var(--ink);
   transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu[open] .mobile-menu-icon span:nth-child(1) {
   transform: translateY(6px) rotate(45deg);
}
.mobile-menu[open] .mobile-menu-icon span:nth-child(2) {
   opacity: 0;
}
.mobile-menu[open] .mobile-menu-icon span:nth-child(3) {
   transform: translateY(-6px) rotate(-45deg);
}
.mobile-menu-panel {
   position: absolute;
   z-index: 30;
   top: calc(100% + 10px);
   right: 0;
   display: grid;
   gap: 2px;
   min-width: 230px;
   padding: 10px;
   border: 1px solid #dfe6f5;
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 24px 50px -24px #23498c55;
}
.mobile-menu-panel a:not(.button) {
   padding: 12px 14px;
   border-radius: 11px;
   color: var(--ink);
   font-size: 16px;
   font-weight: 600;
}
.mobile-menu-panel a:not(.button):hover {
   background: #f3f6ff;
}
.mobile-menu-panel .button {
   margin-top: 6px;
   min-height: 46px;
}
@media (max-width: 800px) {
   .mobile-menu {
      display: block;
   }
}

.desktop-nav {
   align-items: center;
}
.nav-dropdown {
   position: relative;
}
.nav-dropdown summary {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   cursor: pointer;
   list-style: none;
}
.nav-dropdown summary::-webkit-details-marker {
   display: none;
}
.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
   color: var(--blue);
}
.nav-dropdown-caret {
   width: 7px;
   height: 7px;
   margin-top: -3px;
   border-right: 1.8px solid currentColor;
   border-bottom: 1.8px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.2s, margin 0.2s;
}
.nav-dropdown[open] .nav-dropdown-caret {
   margin-top: 3px;
   transform: rotate(-135deg);
}
.nav-dropdown-panel {
   position: absolute;
   z-index: 30;
   top: calc(100% + 16px);
   left: 50%;
   display: grid;
   gap: 2px;
   width: 360px;
   padding: 10px;
   border: 1px solid #dfe6f5;
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 26px 55px -24px #23498c55;
   transform: translateX(-50%);
}
.nav-dropdown-panel::before {
   content: '';
   position: absolute;
   top: -18px;
   right: 0;
   left: 0;
   height: 18px;
}
.nav-dropdown-item {
   display: flex;
   align-items: flex-start;
   gap: 13px;
   padding: 12px;
   border-radius: 13px;
}
.nav-dropdown-item:hover {
   background: #f3f6ff;
}
.nav-dropdown-item strong {
   display: block;
   color: var(--ink);
   font-size: 14px;
   font-weight: 700;
}
.nav-dropdown-item small {
   display: block;
   margin-top: 3px;
   color: var(--muted);
   font-size: 12px;
   font-weight: 450;
   line-height: 1.5;
}
.nav-dropdown-mark {
   display: grid;
   flex-shrink: 0;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: #e8eeff;
   color: var(--blue);
   font-size: 16px;
}
.nav-dropdown-all {
   margin-top: 4px;
   padding: 11px 12px 6px;
   border-top: 1px solid #eef2fa;
   color: var(--blue);
   font-size: 13px;
   font-weight: 650;
}
.mobile-menu-panel a.mobile-menu-group {
   margin-top: 4px;
   border-top: 1px solid #eef2fa;
   border-radius: 0 0 11px 11px;
   padding-top: 14px;
}
.mobile-menu-panel a.mobile-menu-subitem {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 9px 14px 9px 18px;
   color: #4a5876;
   font-size: 15px;
   font-weight: 550;
}
.mobile-menu-subitem span {
   flex-shrink: 0;
   width: 18px;
   line-height: 1.4;
   color: var(--blue);
   text-align: center;
}
.nav-dropdown-item[aria-current='page'],
.mobile-menu-panel a.mobile-menu-subitem[aria-current='page'] {
   background: #eef3ff;
}
.mobile-menu-panel a.mobile-menu-subitem[aria-current='page'] {
   color: var(--blue);
}

:root {
   --page-top: 20px;
   --page-bottom: 72px;
   --header-gap: 26px;
   --header-bottom: 36px;
   --section-gap: 56px;
   --block-gap: 24px;
   --heading-gap: 16px;
}
.guide-main {
   padding-top: var(--page-top);
   padding-bottom: var(--page-bottom);
}
.guide-header {
   margin: var(--header-gap) 0 var(--header-bottom);
}
.guide-header h1,
.legal-article h1 {
   margin-top: 10px;
   font-size: clamp(32px, 3.6vw, 48px);
   line-height: 1.1;
   letter-spacing: -1.6px;
}
.guide-intro {
   max-width: 720px;
   margin-top: 14px;
   font-size: 18px;
   line-height: 1.6;
}
.guide-article h2 {
   margin-bottom: var(--heading-gap);
   font-size: 26px;
   letter-spacing: -0.8px;
}
.guide-article section + section {
   margin-top: var(--section-gap);
}
.guide-page .guides-section {
   margin-top: var(--section-gap);
   padding-top: 0;
}
@media (max-width: 900px) {
   :root {
      --page-top: 12px;
      --page-bottom: 56px;
      --header-gap: 20px;
      --header-bottom: 28px;
      --section-gap: 44px;
      --block-gap: 20px;
   }
}
@media (max-width: 600px) {
   :root {
      --header-gap: 16px;
      --header-bottom: 24px;
      --section-gap: 36px;
   }
   .guide-header h1,
   .legal-article h1 {
      font-size: clamp(28px, 8vw, 36px);
      letter-spacing: -1.1px;
   }
   .guide-intro {
      font-size: 16px;
   }
   .guide-article h2 {
      font-size: 22px;
   }
}
.final-section {
   padding-top: var(--section-gap);
}