/* Landing refinements: store actions, illustrated features, palettes and billing. */
.hero .stores { max-width: 520px; }
.stores .store, .stores .store:nth-child(n) { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; justify-content: start; column-gap: 16px; padding: 15px 20px; min-height: 82px; margin-top: 0; border-radius: 14px; background: linear-gradient(145deg, #25262B, #101115 72%); box-shadow: inset 0 1px 0 #ffffff20; border: 1px solid #ffffff24; transform: none; transition: none; animation: none; }
.stores .store .store-mark, .stores .store-ios .store-mark { display: block; width: 44px; height: 44px; margin: 0; object-fit: contain; align-self: center; animation: none; transform: none; transition: none; }
.store .store-copy { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 15px 26px; align-content: center; gap: 3px; min-width: 0; text-align: start; letter-spacing: 0; }
.store .store-copy small { display: block; color: #C7C8CF; font-size: 11px; line-height: 15px; font-weight: 500; opacity: 1; letter-spacing: 0; white-space: nowrap; }
.store .store-name { display: block; color: #fff; font-size: 21px; font-weight: 650; line-height: 26px; letter-spacing: -0.025em; white-space: nowrap; }
.store::after { content: none; }
.stores .store:hover, .stores .store:active { transform: none; transition: none; animation: none; box-shadow: inset 0 1px 0 #ffffff20; }
.wl-form .wl-status:empty { display: none; }
.wl-form .wl-status.err { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-top: 10px; border: 1px solid #B6334426; border-radius: 12px; background: #FFF2EF; color: #9C2938; font-size: 13px; font-weight: 550; line-height: 1.45; text-align: start; animation: feedback-in 0.22s ease-out; }
.wl-status.err::before { content: "!"; flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border: 1.3px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 750; }
.wl-form.invalid .wl-row { animation: none; box-shadow: 0 0 0 2px #B6334480; }
.wl-form input[aria-invalid=true] { caret-color: #9C2938; }
@keyframes feedback-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* A single duotone family, generous silhouettes and a restrained brand palette. */
.feature-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
#more .features { gap: 16px; }
#more .feature { position: relative; overflow: hidden; border-radius: 22px; padding: 24px; background: #FFFDFA; box-shadow: 0 0 0 1px var(--line); transition: opacity .6s ease, transform .5s var(--ease), box-shadow .3s; }
#more .feature .fi { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 20px; background: #F0EEFF; color: #3430C7; --feature-wash: #C6C0FF; box-shadow: none; transform: none; }
#more .feature:nth-child(4n+2) .fi { background: #EAF3E1; color: #31533D; --feature-wash: #C5E47C; }
#more .feature:nth-child(4n+3) .fi { background: #E9F1FB; color: #23548C; --feature-wash: #AECFEE; }
#more .feature:nth-child(4n) .fi { background: #FFF0E8; color: #9A4933; --feature-wash: #F6C0A3; }
.feature-icon { display: block; width: 42px; height: 42px; fill: currentColor; }
#more .feature:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #3430ed25, 0 16px 30px -26px #24223d60; }
#more .feature:hover .fi { transform: none; }
#more .feature:hover .feature-icon { animation: icon-settle .5s cubic-bezier(.2,.7,.2,1) both; }
#more .feature.art-enter { animation: feature-enter .65s var(--ease) both; }
@keyframes feature-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes icon-settle { 0% { transform: translateY(0); } 45% { transform: translateY(-3px) scale(1.08); } 100% { transform: translateY(0); } }

/* Compact, intrinsic palette rows beside one readable preview. */
#themes .themes { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,.8fr); grid-template-areas: "copy preview" "choices preview"; gap: 28px 56px; align-items: center; }
.theme-copy { grid-area: copy; align-self: end; min-width: 0; }
#themes .theme-copy h2 { margin-block: 18px; }
#themes .theme-copy .lede { margin: 0; }
#themes .theme-stage { grid-area: preview; order: 0; min-width: 0; padding: 12px 0; gap: 18px; }
#themes .theme-stage::before { display: none; }
#themes .theme-phone { width: 280px; max-width: 100%; box-shadow: 0 22px 40px -28px #0d0d1260; }
#themes .theme-name { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
#themes .theme-list { grid-area: choices; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 10px; margin: 0; align-self: start; }
#themes .theme-pill { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr) 16px; grid-template-rows: auto auto; gap: 3px 10px; align-content: center; align-items: center; min-width: 0; min-height: 78px; padding: 12px; border-radius: 16px; border: 1px solid #DDDDD5; background: #FFFDFA; color: var(--ink); text-align: start; box-shadow: none; transform: none; transition: border-color .2s, background .2s, box-shadow .2s; }
#themes .theme-pill:hover { transform: none; border-color: #9995DC; background: #FAF9FF; }
#themes .theme-pill[aria-pressed=true] { border-color: #6560D7; background: #F3F1FF; box-shadow: inset 0 0 0 1px #6560D7; }
.theme-swatch { grid-column: 1; grid-row: 1/3; position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--sample-bg); box-shadow: inset 0 0 0 1px #0000000d; }
.theme-swatch-accent { position: absolute; top: 7px; inset-inline-start: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--sample-ring); }
.theme-swatch-surface { position: absolute; bottom: 5px; inset-inline-end: 5px; width: 21px; height: 21px; border-radius: 50%; background: var(--sample-surface); box-shadow: 0 1px 2px #00000010; }
.theme-label { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 650; line-height: 1.25; overflow-wrap: normal; }
#themes .theme-pill small { grid-column: 2; grid-row: 2; justify-self: start; padding: 0; font-size: 10px; line-height: 1.3; font-weight: 500; background: transparent; color: #77737E; }
#themes .theme-pill small.free { color: #34623B; }
.theme-check { position: static; grid-column: 3; grid-row: 1/3; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid #D8D7DF; border-radius: 50%; color: transparent; font-size: 10px; font-weight: 800; box-shadow: none; opacity: 1; scale: 1; transition: background .2s, border-color .2s, color .2s; }
#themes [aria-pressed=true] .theme-check { color: #fff; background: #524DC7; border-color: #524DC7; }
#themes .theme-phone .mock-screen { display: flex; gap: 12px; padding: 48px 16px 18px; }
#themes .theme-phone .mtitle { font-size: 28px; margin-top: 6px; line-height: 1.15; }
#themes .theme-phone .rings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; align-items: end; }
#themes .theme-phone .rings > div { min-width: 0; display: grid; justify-items: center; }
#themes .theme-phone .rings svg { display: block; width: 54px; height: auto; max-width: 100%; margin-inline: auto; }
#themes .theme-phone .rings .big-ring svg { width: 70px; }
#themes .theme-phone .rlabel { font-size: 10px; line-height: 1.25; min-height: 1.4em; margin-top: 6px; width: max-content; white-space: nowrap; }
#themes .theme-phone .mcard { padding: 14px; gap: 8px; }
#themes .theme-phone .mcard small { font-size: 11px; line-height: 1.35; }
#themes .theme-phone .big { font-size: 36px; }
#themes .theme-phone .mbtn { padding: 10px 6px; }
#themes .theme-phone .mweek { flex: none; height: 48px; padding: 9px 10px; }

/* One moving selection surface; prices change with a short, quiet transition. */
.billing { position: relative; isolation: isolate; border: 1px solid #0d0d120b; background: #E9E7DF; padding: 5px; gap: 0; }
.billing-indicator { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px; background: var(--ink); box-shadow: 0 3px 7px #0d0d1218; z-index: -1; transition: transform .42s cubic-bezier(.22,.8,.25,1), width .42s cubic-bezier(.22,.8,.25,1); pointer-events: none; }
.billing button { position: relative; min-height: 46px; padding: 10px 20px; transition: color .25s; }
.billing.has-indicator button[aria-pressed=true] { background: transparent; }
.billing button b { font-size: 10px; padding: 4px 7px; }
#price-plus { display: inline-block; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) and (min-width: 621px) {
  #themes .themes { grid-template-columns: minmax(240px,.9fr) minmax(0,1.1fr); grid-template-areas: "copy copy" "preview choices"; gap: 28px; }
  #themes .theme-copy { max-width: 660px; }
  #themes .theme-list { grid-template-columns: 1fr; align-self: center; }
  #themes .theme-pill { min-height: 66px; padding: 10px 14px; }
  #themes .theme-phone { width: 260px; }
}
@media (max-width: 620px) {
  #themes .themes { grid-template-columns: minmax(0,1fr); grid-template-areas: "copy" "preview" "choices"; gap: 28px; }
  #themes .theme-stage { padding: 0; }
  #themes .theme-phone { width: 248px; }
  #themes .theme-phone .mock-screen { gap: 10px; padding-inline: 14px; }
  #themes .theme-phone .rings svg { width: 48px; }
  #themes .theme-phone .rlabel { font-size: 9px; }
  #themes .theme-phone .rings .big-ring svg { width: 62px; }
  #themes .theme-list { max-width: 440px; width: 100%; margin-inline: auto; }
  #themes .theme-pill { grid-template-columns: 32px minmax(0,1fr) 12px; gap: 3px 7px; padding: 11px 9px; min-height: 78px; }
  .theme-swatch { width: 32px; height: 32px; }
  .theme-swatch-accent { width: 7px; height: 7px; top: 5px; inset-inline-start: 5px; }
  .theme-swatch-surface { width: 17px; height: 17px; bottom: 4px; inset-inline-end: 4px; }
  .theme-label { font-size: 12px; }
  .theme-check { width: 12px; height: 12px; font-size: 8px; }
  #more .feature { padding: 20px; }
}
@media (max-width: 420px) {
  #more .features { grid-template-columns: 1fr; }
  #more .feature { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 6px 16px; }
  #more .feature .fi { grid-row: 1/3; width: 52px; height: 52px; margin: 0; border-radius: 16px; }
  #more .feature .feature-icon { width: 36px; height: 36px; }
  #more .feature b { align-self: end; }
  #more .feature span:last-child { line-height: 1.5; }
  .billing { max-width: 100%; }
  .billing button { padding: 9px 13px; gap: 6px; font-size: 13px; }
  .billing button b { font-size: 9px; }
}
@media (hover:none) { #more .feature:hover { transform: none; box-shadow: 0 0 0 1px var(--line); } #more .feature:hover .feature-icon { animation: none; } }
@media (prefers-reduced-motion:reduce) {
  .stores .store, #more .feature, #themes .theme-pill, .theme-check, .billing-indicator, .billing button { transition: none; }
  #more .feature.art-enter, #more .feature:hover .feature-icon, .wl-form .wl-status.err { animation: none; }
  #themes :is(.mock-screen,.ring-track,.ring,.mcard,.mbtn,.mstrip i,.mweek i) { transition: none; }
}
/* Theme switch: the new palette spreads over the phone as a circle from the chosen card (a painted copy of
   Today, clipped, with a glowing edge), and Today draws itself again inside it. While the block is on screen
   and untouched the themes take turns, with a progress bar on the chosen card. */
/* The same phone frame as the privacy diagram: a thin silver rim, a slim black bezel, the island and side keys
   (the keys follow the phone's width through --pw). */
#themes .theme-phone { --pw: 280px; width: var(--pw); max-width: none; aspect-ratio: 264 / 540; padding: 7px; border: 2px solid #B3B3BC; border-radius: 46px; background: #0B0C10; box-shadow: 0 0 0 1px rgba(13, 13, 18, 0.05), 0 34px 60px -34px rgba(13, 13, 18, 0.55); transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.6s var(--ease); }
#themes .theme-phone::before { top: 16px; width: 66px; height: 20px; border-radius: 12px; background: #040406; z-index: 3; }
#themes .theme-phone::after { content: ""; position: absolute; top: 116px; right: -5px; width: 3px; height: 54px; border-radius: 0 3px 3px 0; background: #B3B3BC; box-shadow: calc(-5px - var(--pw)) -26px 0 #B3B3BC, calc(-5px - var(--pw)) 34px 0 #B3B3BC; }
#themes .theme-phone .mock-screen { border-radius: 37px; }
@media (max-width: 1000px) and (min-width: 621px) { #themes .theme-phone { --pw: 260px; } }
@media (max-width: 620px) { #themes .theme-phone { --pw: 248px; } }
#themes .theme-phone.is-tilting { transition: transform 0.18s linear; }
#themes .theme-phone .mock-layer { position: absolute; inset: 7px; z-index: 2; height: auto; border-radius: 37px; pointer-events: none; will-change: clip-path; }
#themes .mock-layer .mweek i { transform-origin: bottom; }
#themes .mock-screen.is-still, #themes .mock-screen.is-still * { transition: none !important; }
.theme-wipe-edge { position: absolute; left: var(--x); top: var(--y); width: var(--d); height: var(--d); border: 2.5px solid var(--ring); border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#themes .theme-progress { position: absolute; inset-inline: 16px; bottom: 7px; height: 2px; border-radius: 2px; background: #6560D7; transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
[dir=rtl] #themes .theme-progress { transform-origin: right; }
#themes .is-touring [aria-pressed=true] .theme-progress { opacity: 0.75; animation: theme-progress 3.6s linear forwards; }
#themes .is-touring.is-paused [aria-pressed=true] .theme-progress { animation-play-state: paused; }
#themes [aria-pressed=true] .theme-check { animation: theme-check-pop 0.45s var(--spring); }
#themes [aria-pressed=true] .theme-swatch { animation: theme-swatch-pop 0.6s var(--spring); }
@keyframes theme-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes theme-check-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: none; } }
@keyframes theme-swatch-pop { 0% { transform: none; } 40% { transform: scale(0.84) rotate(-14deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #themes .theme-phone { transform: none; transition: none; }
  #themes .theme-progress, #themes .theme-check, #themes .theme-swatch { animation: none !important; }
}

/* Full-width badges on small phones keep both the marks and brand names readable. */
@media (max-width:560px) {
  .hero .stores, .stores.center { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .stores .store, .stores .store:nth-child(n) { grid-template-columns: 44px minmax(0,1fr); padding: 13px 20px; min-height: 76px; column-gap: 16px; }
}