/* Kindorra site styles: fonts, theme tokens (light + dark) and components. Plain CSS (no build);
   Tailwind utilities come from the CDN (assets/js/tw-config.js maps its colours to these tokens). */
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(../fonts/fredoka_700.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url(../fonts/nunito_600.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url(../fonts/nunito_800.woff2) format("woff2"); }

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* light theme */
:root {
  --bg: 241 250 248; --bg2: 255 255 255; --surface: 255 255 255; --stroke: 220 239 234;
  --ink: 15 43 47; --ink2: 79 109 108; --brand: 15 143 127; --brandhi: 31 174 154; --brandink: 11 110 98;
  --gold: 242 183 5; --shadow: 15 143 127;
  color-scheme: light;
}
/* dark theme */
html.dark {
  --bg: 12 31 37; --bg2: 8 21 25; --surface: 19 44 51; --stroke: 31 63 71;
  --ink: 236 251 248; --ink2: 156 194 188; --brand: 23 160 142; --brandhi: 44 194 174; --brandink: 44 194 174;
  --gold: 255 211 77; --shadow: 0 0 0;
  color-scheme: dark;
}

/* base (body-prefixed: wins over the CDN's preflight, which loads later) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: rgb(var(--bg)); color: rgb(var(--ink)); font-family: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body h1, body h2, body h3 { font-family: Fredoka, ui-rounded, system-ui, sans-serif; font-weight: 700; color: rgb(var(--ink)); letter-spacing: -0.01em; }
body a { color: rgb(var(--brandink)); text-underline-offset: 4px; }
:focus-visible { outline: 3px solid rgb(var(--brandhi)); outline-offset: 3px; border-radius: 8px; }
/* the CDN's font utilities, defined here too so text never renders in a fallback font before it loads */
.font-display { font-family: Fredoka, ui-rounded, system-ui, sans-serif; }
.font-sans { font-family: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* no flash before the CDN has styled the page */
html:not(.no-js):not(.tw-ready) body { visibility: hidden; }

/* components */
.wrap { margin-left: auto; margin-right: auto; max-width: 72rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
.card { border-radius: 1.5rem; border: 1px solid rgb(var(--stroke)); background: rgb(var(--surface)); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(var(--shadow) / .35); }
.btn, .btn-brand, .btn-ghost { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: 0 1.5rem; font-weight: 800; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
/* buttons: primary (teal, a top sheen, a soft shadow) and outline */
body .btn-brand, body .btn-cta { color: #fff; background: linear-gradient(180deg, rgb(var(--brandhi)), transparent 55%), rgb(var(--brand));
  box-shadow: 0 4px 10px -6px rgb(var(--brand) / .55); border-radius: 30px; transition: transform .15s, box-shadow .2s, filter .2s; }
body .btn-brand:hover, body .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -7px rgb(var(--brand) / .6); filter: brightness(1.04); }
body .btn-brand:active, body .btn-cta:active { transform: scale(.98); }
body .btn-ghost { border: 1.5px solid rgb(var(--brand)); background: rgb(var(--surface)); color: rgb(var(--brandink)); border-radius: 30px; }
body .btn-ghost:hover { background: rgb(var(--brand) / .08); }
/* the Premium tag: a thin gold outline */
.ptag { display: inline-flex; align-items: center; gap: .3rem; border-radius: 20px; padding: .3rem .75rem; font-size: .8rem; font-weight: 800; border: 1.5px solid #F2B705; background: rgb(var(--surface)); color: rgb(var(--ink)); }
.chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; background: rgb(var(--brand) / .1); padding: .25rem .75rem; font-size: .875rem; font-weight: 800; color: rgb(var(--brandink)); }
.eyebrow { font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--brandink)); }
/* highlighted words: the app's wordmark gradient (wordmark_start → wordmark_end; brighter in dark) */
.mark, .wm { background: linear-gradient(90deg, #1FAE9A, #0F8F7F); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.dark .mark, html.dark .wm { background-image: linear-gradient(90deg, #4FD8C4, #2CC2AE); }

/* legal / help text */
.prose-k h2 { margin-top: 2.5rem; font-size: 1.5rem; line-height: 2rem; }
.prose-k h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.prose-k p, .prose-k li { margin-top: .75rem; line-height: 1.625; color: rgb(var(--ink2)); }
.prose-k ul { margin-top: .5rem; list-style: disc; padding-left: 1.5rem; }
.prose-k strong { color: rgb(var(--ink)); }
body .prose-k a { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; }
.prose-k table { margin-top: 1rem; width: 100%; text-align: left; font-size: .875rem; border-collapse: collapse; }
.prose-k th, .prose-k td { border-bottom: 1px solid rgb(var(--stroke)); padding: .5rem; vertical-align: top; color: rgb(var(--ink2)); }
.prose-k th { color: rgb(var(--ink)); }

/* the avatar player (assets/js/avatar.js): poster image until the canvas plays */
.kav { position: relative; display: block; }
.kav > img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.kav > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.kav.playing > canvas { opacity: 1; }
.kav.playing > img { visibility: hidden; }
.bubble { position: relative; width: max-content; max-width: 15rem; border-radius: 1rem; border: 1px solid rgb(var(--stroke)); background: rgb(var(--surface)); padding: .5rem .85rem; text-align: center; font-size: .875rem; font-weight: 800; color: rgb(var(--ink)); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35); transition: opacity .25s, transform .25s; }
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: .7rem; height: .7rem; transform: translate(-50%, -50%) rotate(45deg); border-bottom: 1px solid rgb(var(--stroke)); border-right: 1px solid rgb(var(--stroke)); background: rgb(var(--surface)); }
.bubble.hide { opacity: 0; transform: translateY(4px); }

/* hero: the Bird flies in and lands on the reminder card (the app's pop-up) */
.hero-blob { position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; }
.hero-scene { position: relative; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 768px) { .hero-scene { min-height: 34rem; justify-content: center; } }
.hero-bird { position: relative; z-index: 2; width: min(330px, 78vw); aspect-ratio: 437 / 464; margin-bottom: -2px; cursor: pointer; will-change: transform; }
.hero-bird .kav { width: 100%; height: 100%; }
.hero-shadow { position: relative; z-index: 1; width: 52%; height: 18px; margin-top: -12px; border-radius: 50%; background: rgb(var(--ink) / .14); filter: blur(4px); transition: opacity .6s, transform .6s; }
.hero-shadow.off { opacity: 0; transform: scale(.4); }
.reminder { position: relative; z-index: 1; width: min(360px, 92vw); border-radius: 20px; padding: 1rem; background: rgb(var(--surface));
  border: 1px solid rgb(var(--stroke)); box-shadow: 0 6px 18px -6px rgb(0 0 0 / .18), 0 2px 4px rgb(0 0 0 / .05);
  transition: opacity .45s, transform .55s cubic-bezier(.2, 1.3, .4, 1); }
.reminder.off { opacity: 0; transform: translateY(24px) scale(.97); }
.reminder .msg { font: 800 1.125rem/1.35 Nunito, sans-serif; color: rgb(var(--ink)); }
/* 19px: the app's teal on white passes the web's contrast rule as large text */
.reminder button { min-height: 46px; font: 800 1.1875rem Nunito, sans-serif; transition: transform .1s, background .15s; }
.reminder button:active { transform: scale(.97); }
.rm-later { border-radius: 30px; background: rgb(var(--surface)); border: 1.5px solid rgb(var(--brand)); color: rgb(var(--brand)); }
.rm-later:hover { background: rgb(var(--brand) / .08); }
.rm-done { border-radius: 30px; color: #fff; background: linear-gradient(180deg, rgb(var(--brandhi)), transparent 55%), rgb(var(--brand)); box-shadow: 0 4px 10px -6px rgb(var(--brand) / .55); }
.rm-done:hover { filter: brightness(1.05); }

/* the wordmark: the bird-K mark in place of the "K" */
.wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; }
.wordmark .kmark { height: .8em; width: auto; margin-right: .03em; align-self: baseline; transform: translateY(.02em); }

/* feature cards: each in one of the app's badge colours; hover / focus = a slight lift and the top stroke runs like a loader */
.feat { position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.feat:hover, .feat:has(:focus-visible) { transform: translateY(-4px) scale(1.012); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 22px 40px -24px rgb(var(--shadow) / .45); }
.feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tint); opacity: .3; }
/* hover: the stroke fills once, left to right, slowly and evenly (like a progress bar); it empties when you leave */
.feat::after { content: ""; position: absolute; inset: 0 auto auto 0; height: 4px; width: 100%; background: var(--tint); transform: scaleX(0); transform-origin: left; transition: none; }
.feat:hover::after, .feat:has(:focus-visible)::after { transform: scaleX(1); transition: transform 2.6s linear; }
.feat .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: var(--tint); box-shadow: 0 10px 20px -10px var(--tint); }
/* each card's live widget fills / centres in the space under its text */
.feat .vis { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 1.25rem; }
/* header: the icon with the title beside it (a card's tabs at the title's end); the text below, full width */
.fhead { display: flex; align-items: center; gap: .9rem; }
.fhead .ic { flex: none; }
.ftitle { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.ftitle h3 { margin: 0; line-height: 1.2; }
.mini { border-radius: 1rem; background: rgb(var(--bg)); border: 1px solid rgb(var(--stroke)); }
/* the app's badge colours (badge_violet/teal, blue, rose, coral, green) */
.t-teal { --tint: #0F8F7F; } .t-blue { --tint: #3E8EF0; } .t-rose { --tint: #E5708A; } .t-coral { --tint: #F2716B; } .t-green { --tint: #4CBF6B; }
html.dark .t-teal { --tint: #17A08E; }
.pick { border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 800; border: 1.5px solid rgb(var(--stroke)); background: rgb(var(--surface)); color: rgb(var(--ink2)); transition: all .15s; }
.pick:hover { border-color: var(--tint); }
.pick[aria-pressed="true"] { background: var(--tint); border-color: var(--tint); color: #fff; }
.tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(var(--stroke) / .7); }
.tabs button { min-height: 32px; padding: 0 .8rem; border-radius: 999px; font-size: .8rem; font-weight: 800; color: rgb(var(--ink2)); }
.tabs button[aria-selected="true"] { background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: 0 2px 6px -2px rgb(0 0 0 / .2); }
.mini-btn { min-height: 34px; padding: 0 .9rem; border-radius: 999px; font-size: .8rem; font-weight: 800; background: var(--tint); color: #fff; transition: transform .1s, filter .15s; }
.mini-btn:hover { filter: brightness(1.06); } .mini-btn:active { transform: scale(.96); }
.mini-btn.ghost { background: rgb(var(--surface)); color: rgb(var(--ink)); border: 1.5px solid rgb(var(--stroke)); }
.bar { height: 10px; border-radius: 99px; background: rgb(var(--brand)); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.in .bar { transform: scaleX(var(--v)); }
.bar.over { background: #F2716B; }
.bar { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.ring { --p: 0; --to: 100; --c: #F2716B; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgb(var(--stroke)) 0); display: grid; place-items: center; transition: --p 1.4s ease-out; }
.in .ring { --p: var(--to); }
.ring::after { content: attr(data-label); width: 64px; height: 64px; border-radius: 50%; background: rgb(var(--surface)); display: grid; place-items: center; font: 800 15px Nunito, sans-serif; color: rgb(var(--ink)); }
.eq { display: flex; align-items: center; gap: 4px; height: 34px; }
.eq i { width: 6px; height: 22%; border-radius: 4px; background: var(--tint); }
.eq.on i { animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.2s } .eq i:nth-child(3) { animation-delay: -.4s } .eq i:nth-child(4) { animation-delay: -.6s } .eq i:nth-child(5) { animation-delay: -.8s } .eq i:nth-child(6) { animation-delay: -.3s } .eq i:nth-child(7) { animation-delay: -.7s }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.toggle { width: 52px; height: 30px; border-radius: 99px; background: rgb(var(--stroke)); position: relative; transition: background .2s; flex: none; }
.toggle[aria-checked="true"] { background: var(--tint); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; transition: transform .2s cubic-bezier(.2, 1.3, .4, 1); width: 24px; height: 24px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
.toggle[aria-checked="true"]::after { transform: translateX(22px); }
.day { width: 36px; height: 36px; cursor: pointer; transition: background .15s, transform .1s; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgb(var(--stroke)); color: rgb(var(--ink2)); }
.day:active { transform: scale(.92); }
.day[aria-pressed="true"] { background: var(--tint); color: #fff; }

/* the customiser */
.av-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid rgb(var(--stroke)); background: rgb(var(--surface)); font-weight: 800; color: rgb(var(--ink)); transition: border-color .15s, background .15s; }
.av-chip:hover { border-color: rgb(var(--brand)); }
.av-chip[aria-checked="true"] { border-color: rgb(var(--brand)); background: rgb(var(--brand) / .1); }
.av-chip .pm { font-size: 11px; color: #A07800; }
html.dark .av-chip .pm { color: #FFD34D; }
.studio-av { transition: opacity .18s, transform .18s; }
.studio-av.swap { opacity: 0; transform: scale(.94); }
.hero-pick { border-radius: 1.25rem; border: 2px solid rgb(var(--stroke)); background: rgb(var(--surface)); padding: 6px; transition: border-color .15s, transform .15s; }
.hero-pick:hover { transform: translateY(-2px); }
.hero-pick[aria-checked="true"] { border-color: rgb(var(--brand)); }

/* the floating companion (like the app's pop-up over other apps) */
.buddy { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  transform: translateY(140%); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); pointer-events: none; }
.buddy.show { transform: none; pointer-events: auto; }
.buddy .kav { width: 92px; aspect-ratio: 3 / 4; cursor: pointer; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .25)); }
.buddy-x { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--surface)); color: rgb(var(--ink2)); border: 1px solid rgb(var(--stroke)); font-size: 14px; }
@media (min-width: 768px) { .buddy .kav { width: 132px; } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .feed { animation: none; }
  .bar { transition: none; }
}

/* pricing: the app's dark (lock_bg) teal for Premium, a slowly turning teal halo, the heroes peeking over the top */
.price-free { position: relative; }
.price-pro { position: relative; isolation: isolate; border-radius: 2rem; padding: 2px; background: conic-gradient(from var(--a, 0deg), #0F8F7F, #4FD8C4, #1FAE9A, #0F8F7F); animation: halo 10s linear infinite; box-shadow: 0 40px 90px -40px rgb(15 143 127 / .9); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes halo { to { --a: 360deg; } }
.price-pro > .inner { position: relative; height: 100%; border-radius: calc(2rem - 2px); padding: 2.25rem; color: #ECFBF8; overflow: hidden;
  background: radial-gradient(30rem 18rem at 100% 0, rgb(31 174 154 / .35), transparent 60%), linear-gradient(160deg, #0C1F25, #132C33 60%, #0C1F25); }
body .price-pro h3 { color: #fff; }
.price-pro .wm { background-image: linear-gradient(90deg, #4FD8C4, #2CC2AE); }
.price-pro .tick { background: rgb(79 216 196 / .16); color: #4FD8C4; }
.tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; flex: none; font-size: 12px; background: rgb(var(--brand) / .12); color: rgb(var(--brandink)); }
.chip-dark { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .75rem; font-size: .78rem; font-weight: 800; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #D3ECE7; }

/* closing band: ten seconds to the first reminder */
.ten { position: relative; overflow: hidden; border-radius: 2rem; color: #ECFBF8; background: radial-gradient(40rem 24rem at 90% 0, rgb(31 174 154 / .3), transparent 60%), linear-gradient(160deg, #0C1F25, #081519); }
body .ten h2 { color: #fff; }
.timer { --t: 0; position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#4FD8C4 calc(var(--t) * 1%), rgb(255 255 255 / .1) 0); box-shadow: 0 0 60px -10px rgb(79 216 196 / .5); }
.timer::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0E242A; }
.timer > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.timer b { position: relative; display: block; font: 700 56px/1 Fredoka, sans-serif; color: #fff; }
.timer svg { display: block; width: 56px; height: 56px; color: #4FD8C4; }
html:not(.dark) .timer svg { color: rgb(var(--brand)); }
.timer small { position: relative; display: block; text-align: center; font-size: .75rem; color: #9CC2BC; }
.step { display: flex; align-items: center; gap: .75rem; border-radius: 1rem; padding: .75rem 1rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); transition: background .3s, border-color .3s; }
.step .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; font-weight: 800; background: rgb(255 255 255 / .1); color: #9CC2BC; transition: all .3s; }
.step.on { background: rgb(79 216 196 / .12); border-color: rgb(79 216 196 / .4); }
.step.on .n { background: #4FD8C4; color: #06201c; }
.hop { animation: hop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes hop { 40% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .price-pro { animation: none; } }

.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid rgb(var(--stroke)); }
.cmp th { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--ink2)); }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; width: 7.5rem; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .yes { color: rgb(var(--brand)); font-weight: 800; } .cmp .no { color: rgb(var(--ink2) / .5); }
.cmp .pro { background: rgb(var(--brand) / .06); }
.price-tag { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .75rem; font-size: .78rem; font-weight: 800; background: rgb(var(--brand) / .1); color: rgb(var(--brandink)); }
@media (max-width: 640px) {
  .cmp th, .cmp td { padding: .75rem .5rem; }
  .cmp td:not(:first-child), .cmp th:not(:first-child) { width: 4.25rem; padding-left: .25rem; padding-right: .25rem; }
  .buddy .kav { width: 80px; }
}

.gang { display: flex; align-items: flex-end; justify-content: center; gap: 6px; max-width: 100%; }
.gang img { width: auto; object-fit: contain; object-position: bottom; }
.gang .h1 { height: 62px; } .gang .h2 { height: 68px; } .gang .h3 { height: 75px; }
@media (min-width: 640px) { .gang { gap: 10px; } .gang .h1 { height: 92px; } .gang .h2 { height: 102px; } .gang .h3 { height: 112px; } }

/* light mode: the closer and Premium in the app's light hero colours (hero_top → surface), teal halo; dark keeps the night look */
html:not(.dark) .ten { color: rgb(var(--ink)); background: radial-gradient(40rem 24rem at 90% 0, rgb(31 174 154 / .22), transparent 60%), linear-gradient(160deg, #DDF3EE, #F6FCFA); border: 1px solid rgb(var(--stroke)); }
html:not(.dark) body .ten h2 { color: rgb(var(--ink)); }
html:not(.dark) .ten .lead { color: rgb(var(--ink2)); }
html:not(.dark) .step { background: rgb(255 255 255 / .7); border-color: rgb(var(--stroke)); }
html:not(.dark) .step b { color: rgb(var(--ink)) !important; } html:not(.dark) .step .sub { color: rgb(var(--ink2)) !important; }
html:not(.dark) .step .n { background: rgb(var(--brand) / .12); color: rgb(var(--brandink)); }
html:not(.dark) .step.on { background: rgb(var(--brand) / .1); border-color: rgb(var(--brand) / .4); }
html:not(.dark) .step.on .n { background: rgb(var(--brand)); color: #fff; }
html:not(.dark) .timer { background: conic-gradient(rgb(var(--brand)) calc(var(--t) * 1%), rgb(var(--brand) / .12) 0); box-shadow: 0 0 50px -12px rgb(15 143 127 / .45); }
html:not(.dark) .timer::before { background: #fff; }
html:not(.dark) .timer b { color: rgb(var(--ink)); } html:not(.dark) .timer small { color: rgb(var(--ink2)); }
html:not(.dark) .ten .eyebrow { color: rgb(var(--brandink)) !important; }
html:not(.dark) .price-pro > .inner { color: rgb(var(--ink)); background: radial-gradient(30rem 18rem at 100% 0, rgb(31 174 154 / .2), transparent 60%), linear-gradient(160deg, #F6FCFA, #fff 60%, #E3F5F1); }
html:not(.dark) body .price-pro h3 { color: rgb(var(--ink)); }
html:not(.dark) .price-pro .wm { background-image: linear-gradient(90deg, #1FAE9A, #0F8F7F); }
html:not(.dark) .price-pro .tick { background: rgb(var(--brand) / .12); color: rgb(var(--brandink)); }
html:not(.dark) .price-pro .muted { color: rgb(var(--ink2)) !important; }
html:not(.dark) .chip-dark { background: rgb(var(--brand) / .08); border-color: rgb(var(--brand) / .25); color: rgb(var(--brandink)); }

[hidden] { display: none !important; }

/* the lock-screen picture follows the theme (light wallpaper in light mode) */
.lockmock { flex: 1; min-height: 12rem; display: flex; flex-direction: column; justify-content: center; color: #fff; background: linear-gradient(180deg, #16323A, #081519); }
html:not(.dark) .lockmock { color: rgb(var(--ink)); background: linear-gradient(180deg, #DDF3EE, #E6F0FD); border: 1px solid rgb(var(--stroke)); }
html:not(.dark) .lockmock .sub { color: rgb(var(--ink2)); }
html:not(.dark) .lockmock .note { background: rgb(255 255 255 / .85); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .2); }
.lockmock .sub { color: rgb(255 255 255 / .7); }
.lockmock .note { background: rgb(255 255 255 / .1); }
.okchip { border: 1.5px solid currentColor; }
.star { color: #F2B705; }

/* pictures can't be dragged out or long-pressed to save (iOS / Android) */
img, canvas { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }