/* ==========================================================================
   Cardetta's pages on the Mirentha app page kit (/apps/kit/kit.css).

   The app's look, "The Pile" (Docs/design/design-system.md): white card faces
   on a warm grey table, one evergreen accent, New York for the user's own
   words and SF Pro for the app's. The grade colours are label text only.
   Display sizes use New York through ui-serif (Georgia elsewhere).
   ========================================================================== */

body.k-page.k-cardetta {
  --k-bg: #E7E5E0;              /* the table */
  --k-bg-2: #DCE9E4;            /* a pale tint of the evergreen */
  --k-ink: #16181D;
  --k-ink-2: #565A61;
  --k-accent: #1F6F5B;          /* evergreen */
  --k-accent-ink: #FFFFFF;
  --k-card: #FFFFFF;
  --k-line: rgba(22, 24, 29, .12);
  --k-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;

  --cd-deep: #1F6F5B;
  --cd-deep-2: #17594A;
  --cd-sage: #CBDED6;
  --cd-edge: #8C877D;
  --cd-again: #B3352A;
  --cd-hard: #86580E;
  --cd-good: #1F6F5B;
  --cd-easy: #2B5EA7;
  --cd-card-font: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --cd-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--k-bg);
}
.k-cardetta main { font-family: var(--cd-ui); }
.k-cardetta .k-btn-primary { background: var(--k-accent); color: #fff; }
.k-cardetta .k-btn-primary:hover { background: var(--cd-deep-2); }
.k-cardetta .k-eyebrow { letter-spacing: .08em; }
.k-cardetta .k-lockup img { border-radius: 22.5%; }

/* ---------- The hero ---------- */
.cd-hero-pin { width: 100%; }
.cd-price { font-size: 17px; line-height: 1.45; color: var(--k-ink); max-width: 38ch; }
.cd-hero .k-lead { max-width: 34ch; }
.cd-hero .k-h1 { font-size: min(var(--k-fs-hero), 84px); text-wrap: balance; }
@media (min-width: 900px) and (min-height: 820px) {
  html.k-motion .cd-hero { display: block; height: 185svh; min-height: 0; padding: 0; }
  html.k-motion .cd-hero-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center;
    padding: 100px 0 28px; box-sizing: border-box; }
}
.cd-hero .k-hero-copy > * + *, .cd-hero .k-hero-head > * + *, .cd-hero .k-hero-more > * + * { margin-top: 22px; }
@media (max-width: 899px) {
  .cd-hero .k-hero-head > * + * { margin-top: 18px; }
  .cd-hero .k-hero-more > * + * { margin-top: 18px; }
}

/* The showpiece: the five decks held as a hand of cards, on the app icon's evergreen. Each deck
   is a pile: its face on the edges of the cards it has to study today, as the Study screen draws
   its pile (each edge lower and narrower than the one above, outlined in the app's card-edge grey).
   Scrolling studies the day: the deck being studied lifts out of the hand, its pile thins as its
   count comes down, and it settles back into the hand with nothing due. */
.cd-hand { position: relative; margin: 0; width: 100%; height: min(calc(100svh - 170px), 650px); min-height: 440px;
  border-radius: 34px; overflow: hidden; container-type: size;
  background: radial-gradient(120% 90% at 30% 0%, #2E8A71 0%, var(--cd-deep) 48%, var(--cd-deep-2) 100%);
  box-shadow: 0 30px 60px -34px rgba(16, 52, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.cd-fan { position: absolute; left: 50%; top: 51%; width: 0; height: 0; }
.cd-deck { --w: 31.5cqmin; --h: calc(var(--w) * 1.34); --dx: 0; --dy: 0; --a: 0deg; --k: 1; --lift: 0cqmin;
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h);
  transform: translate(calc((var(--dx) + var(--out, 0) * var(--ox, 0)) * 1cqmin), calc(var(--dy) * 1cqmin + var(--lift))) rotate(calc(var(--a) * var(--k)));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1); font-family: var(--cd-ui); color: var(--k-ink); }
.cd-deck.cd-left.cd-far   { --dx: -27.5; --dy: 4.7; --a: -18deg; --ox: -3.6; z-index: 1; }
.cd-deck.cd-left.cd-near  { --dx: -14.2; --dy: 1.15; --a: -9deg; --ox: -17.6; z-index: 2; }
.cd-deck.cd-right.cd-far  { --dx: 27.5; --dy: 4.7; --a: 18deg; --ox: 3.6; z-index: 1; }
.cd-deck.cd-right.cd-near { --dx: 14.2; --dy: 1.15; --a: 9deg; --ox: 17.6; z-index: 2; }
.cd-deck.cd-front { --w: 33.5cqmin; --h: calc(var(--w) * 1.18); --dy: -2; z-index: 3; }
/* The deck being studied comes up out of the hand, clear of the front deck and in front of everything.
   The hand fills the panel's width, so it comes out sideways (--ox) and rises only as far as the day's total allows. */
.cd-hand .cd-fan .cd-deck.is-active { --lift: -13cqmin; --k: .3; --out: 1; z-index: 8; }
.cd-hand .cd-fan .cd-deck.cd-far.is-active { --lift: -16cqmin; --k: .15; }
.cd-hand .cd-fan .cd-deck.cd-front.is-active { --lift: -5cqmin; }
.cd-deck.is-done { --lift: 1.6cqmin; }
.cd-deck.cd-front.is-done { --lift: 0cqmin; }
.cd-pile { position: absolute; inset: 0; }
.cd-pile i { position: absolute; left: calc(var(--e) * .45cqmin); right: calc(var(--e) * .45cqmin); top: calc(var(--e) * 1.2cqmin);
  bottom: calc(var(--e) * -1.2cqmin); background: #fff; border-radius: 3cqmin; box-shadow: 0 0 0 1px var(--cd-edge);
  transition: transform .4s cubic-bezier(.3, .6, .3, 1), opacity .35s ease; }
.cd-pile i:first-child { box-shadow: 0 0 0 1px var(--cd-edge), 0 1.2cqmin 2.6cqmin rgba(8, 36, 29, .3); }
.cd-pile i.is-gone { transform: translateX(9cqmin) rotate(5deg); opacity: 0; }
.cd-face { position: relative; height: 100%; box-sizing: border-box; padding: 2.8cqmin; display: flex; flex-direction: column; gap: 1.2cqmin;
  background: #fff; border-radius: 3cqmin; text-align: left;
  box-shadow: 0 .8cqmin 2.4cqmin rgba(8, 36, 29, .22), 0 0 0 1px rgba(22, 24, 29, .06); }
.cd-right .cd-face { align-items: flex-end; text-align: right; }
.cd-right .cd-deck-name { max-width: 11cqmin; }
.cd-deck-icon { width: 8.5cqmin !important; height: 8.5cqmin !important; object-fit: contain; }
.cd-deck-name { font-size: max(1.95cqmin, 11px); line-height: 1.2; font-weight: 600; max-width: 12.5cqmin; }
.cd-front .cd-deck-name { max-width: none; font-size: max(2.7cqmin, 13px); }
.cd-deck:not(.cd-front) .cd-pill-word, .cd-deck:not(.cd-front) .cd-done-n { display: none; }
.cd-deck:not(.cd-front) .cd-pill { min-width: 3.4em; justify-content: center; }
.cd-deck-foot { display: block; }
.cd-pill { display: inline-flex; align-items: center; gap: .45em; padding: .8cqmin 1.6cqmin; border-radius: 999px;
  background: rgba(31, 111, 91, .14); color: var(--k-accent); font-size: max(2cqmin, 11px); font-weight: 600;
  white-space: nowrap; transition: background-color .3s ease, color .3s ease; }
.cd-pill i { font-style: normal; font-variant-numeric: tabular-nums; }
.cd-deck.is-active .cd-pill { background: var(--k-accent); color: #fff; }
.cd-done { display: none; font-size: max(1.9cqmin, 10px); color: var(--k-ink-2); max-width: 13cqmin; line-height: 1.25; }
.cd-front .cd-done { max-width: none; }
.cd-deck.is-done .cd-pill { display: none; }
.cd-deck.is-done .cd-done { display: inline-block; }
.cd-deck.is-done .cd-done.cd-tick { display: inline-flex; }
.cd-tick { align-items: center; justify-content: center; min-width: 3.4em; padding: .55cqmin 1.6cqmin; border-radius: 999px;
  background: rgba(31, 111, 91, .14); color: var(--k-accent); }
.cd-tick svg { width: max(2.4cqmin, 13px); height: max(2.4cqmin, 13px); }
.cd-exam { display: grid; gap: .9cqmin; margin-top: auto; padding-top: 1.6cqmin; border-top: 1px solid #E3E0D9; width: 100%; }
.cd-exam-head { font-size: max(2.2cqmin, 11px); font-weight: 600; }
.cd-exam-bar { height: max(.8cqmin, 3px); border-radius: 9px; background: #ECEAE5; overflow: hidden; }
.cd-exam-bar i { display: block; height: 100%; background: var(--k-accent); transform-origin: 0 50%;
  transform: scaleX(var(--seen, .811)); transition: transform .35s ease; }
.cd-exam-seen { font-size: max(2cqmin, 10px); color: var(--k-ink-2); line-height: 1.3; }
.cd-exam-seen i { font-style: normal; font-variant-numeric: tabular-nums; }
.cd-allseen { display: none; color: var(--k-accent); font-weight: 600; }
.cd-deck.is-allseen .cd-unseen { display: none; }
.cd-deck.is-allseen .cd-allseen { display: inline; }
/* The day's total above the hand, as the app's medium widget heads it: "55 to study today" */
.cd-hand-day { position: absolute; left: 6.5cqmin; right: 6.5cqmin; top: 6cqmin; color: #fff; font-family: var(--cd-ui); z-index: 9; }
.cd-hand-day > b { display: flex; align-items: baseline; gap: 1.6cqmin; font-weight: 600; font-size: max(3.6cqmin, 16px); }
.cd-hand-day i { font: 700 max(8cqmin, 30px)/1 var(--cd-ui); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cd-hand-day i:empty { display: none; }
/* A phone's stage: the side decks keep their icon, count and pile; the front deck keeps everything. */
@container (max-width: 520px) {
  .cd-deck { --w: 31cqmin; }
  .cd-deck.cd-front { --w: 35cqmin; --h: calc(var(--w) * 1.34); --dy: -3; }
  .cd-deck.cd-left.cd-far   { --dx: -29; --dy: 4.6; --a: -18deg; --ox: -2.5; }
  .cd-deck.cd-left.cd-near  { --dx: -15; --dy: 1.2; --a: -9deg; --ox: -16; }
  .cd-deck.cd-right.cd-far  { --dx: 29; --dy: 4.6; --a: 18deg; --ox: 2.5; }
  .cd-deck.cd-right.cd-near { --dx: 15; --dy: 1.2; --a: 9deg; --ox: 16; }
  .cd-hand .cd-fan .cd-deck.is-active { --lift: -20cqmin; }
  .cd-hand .cd-fan .cd-deck.cd-far.is-active { --lift: -20cqmin; --k: .1; }
  .cd-face { padding: 2.6cqmin; }
  .cd-deck-icon { width: 9.5cqmin !important; height: 9.5cqmin !important; }
  .cd-deck:not(.cd-front) .cd-deck-name, .cd-deck:not(.cd-front) .cd-pill-word, .cd-deck:not(.cd-front) .cd-done-n { display: none; }
  .cd-deck:not(.cd-front) .cd-done { font-size: 11px; max-width: 12cqmin; }
  .cd-front .cd-deck-name { font-size: 14px; }
  .cd-pill { font-size: 12px; padding: 3px 8px; }
  .cd-exam-head { font-size: 12px; }
  .cd-exam-seen { font-size: 11px; }
  /* the front deck's lines each fit on one line: the exam date gets its own, and the done line is a pixel smaller */
  .cd-exam-date { display: block; }
  .cd-exam-dot { display: none; }
  .cd-front .cd-done { font-size: 9px; }
  .cd-fan { top: 56%; }
}
/* On arrival the hand fans out from the icon's closed stack, once; the scroll takes over from there. */
@keyframes cd-deal { from { transform: translate(0, 0) rotate(0deg); } }
html.k-motion .cd-deck:not(.cd-front) { animation: cd-deal .95s cubic-bezier(.2, .75, .2, 1) .2s backwards; }
html.k-motion .cd-deck.cd-far { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .cd-deck, .cd-exam-bar i, .cd-pill, .cd-pile i { transition: none; animation: none !important; } }

/* ---------- Scenes: each visual at chapter size beside the phone, on the side the story needs ---------- */
.cd-study-visual, .cd-exam-visual, .cd-anki-visual { gap: clamp(20px, 2vw, 32px); }
.cd-road, .cd-plan, .cd-pack { flex: none; }
@media (max-width: 899px) {
  .k-visual > .cd-road, .k-visual > .cd-plan, .k-visual > .cd-pack { display: none; }
  /* Where a step's caption is about the bottom of its screen (the grades, the pile, the export rows),
     the phone slides up inside its window to show it; cardetta.js sets how far. */
  html.k-motion .cd-study .k-visual, html.k-motion .cd-anki .k-visual { overflow: clip; }
  html.k-motion .cd-study .k-device, html.k-motion .cd-anki .k-device { transform: translateY(calc(var(--low, 0) * var(--cd-crop, 0px) * -1)); }
}

/* 1. When Osmosis comes back: a track as tall as the phone, today at the top, six months at the foot */
.cd-road { width: clamp(240px, 19vw, 290px); height: calc(var(--k-device-w) / .4603); background: #fff; border-radius: 26px;
  padding: 24px 22px 30px; box-sizing: border-box; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px var(--k-line), 0 24px 50px -30px rgba(0, 0, 0, .35); }
.cd-road p { margin: 0; }
.cd-road-title { font: 500 clamp(19px, 1.5vw, 22px)/1.2 var(--k-display); color: var(--k-ink); }
.cd-road-track { position: relative; flex: 1; margin: 30px 0 4px; container-type: size; }
.cd-road-axis { position: absolute; left: 76px; top: 0; bottom: 0; width: 2px; background: #E3E0D9; border-radius: 2px; }
.cd-road-scale, .cd-road-tick { position: absolute; top: 0; transform: translateY(calc(var(--y) * 100cqh - 50%)); line-height: 1.15;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-road-scale { left: 0; width: 66px; font-size: 13px; color: var(--k-ink-2); }
.cd-road-tick { right: 0; min-width: 62px; padding: 7px 10px; border-radius: 12px; background: #fff; text-align: center; font-size: 15px;
  box-shadow: 0 0 0 1px var(--k-line); transition: background-color .3s ease, color .3s ease; }
.cd-road-tick b { display: block; font-weight: 600; }
.cd-road-tick small { display: block; font-size: 12px; color: var(--k-ink-2); }
.cd-t-again b { color: var(--cd-again); } .cd-t-hard b { color: var(--cd-hard); } .cd-t-good b { color: var(--cd-good); } .cd-t-easy b { color: var(--cd-easy); }
.cd-t-good.is-on { background: var(--k-accent); box-shadow: none; }
.cd-t-good.is-on b, .cd-t-good.is-on small { color: #fff; }
.cd-road-card { --p: 0; position: absolute; left: 68px; top: 0; transform: translateY(calc(var(--p) * 100cqh - 50%));
  background: #fff; border-radius: 10px; padding: 10px 13px; font: 400 18px/1.1 var(--cd-card-font); color: var(--k-ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14), 0 0 0 1px rgba(22, 24, 29, .1); white-space: nowrap; z-index: 2; }
.cd-road-next { opacity: 0; }
html:not(.k-motion) .cd-road-osmosis { --p: .55; }
html:not(.k-motion) .cd-road-next { opacity: 1; }
html:not(.k-motion) .cd-t-good { background: var(--k-accent); }
html:not(.k-motion) .cd-t-good b, html:not(.k-motion) .cd-t-good small { color: #fff; }

/* Studying, on a phone: the four grades, then the pile's count */
.cd-study-strip { gap: 6px !important; }
.cd-ss-grades { display: flex; gap: 6px; }
.cd-g { display: inline-flex; flex-direction: column; align-items: center; min-width: 62px; padding: 7px 10px; border-radius: 12px;
  background: #fff; font-size: 14px; font-weight: 600; line-height: 1.15; box-shadow: 0 0 0 1px var(--k-line); transition: background-color .3s ease, color .3s ease; }
.cd-g small { font-size: 12px; font-weight: 400; color: var(--k-ink-2); font-variant-numeric: tabular-nums; }
.cd-g-again { color: var(--cd-again); } .cd-g-hard { color: var(--cd-hard); } .cd-g-good { color: var(--cd-good); } .cd-g-easy { color: var(--cd-easy); }
.cd-g-good.is-on { background: var(--k-accent); color: #fff; }
.cd-g-good.is-on small { color: rgba(255, 255, 255, .85); }
.cd-ss-pile { display: none; align-items: center; gap: 12px; font-size: 15px; color: var(--k-ink-2); }
.cd-ss-pile b { color: var(--k-ink); font-variant-numeric: tabular-nums; }
.cd-mini-pile { position: relative; width: 46px; height: 40px; }
.cd-mini-pile i { position: absolute; left: calc(var(--i) * 2px); right: calc(var(--i) * 2px); top: calc(var(--i) * 4px); height: 26px;
  background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px var(--cd-edge); }
.cd-mini-pile i:nth-child(1) { --i: 3; } .cd-mini-pile i:nth-child(2) { --i: 2; } .cd-mini-pile i:nth-child(3) { --i: 1; } .cd-mini-pile i:nth-child(4) { --i: 0; box-shadow: 0 0 0 1px rgba(22,24,29,.12), 0 3px 6px rgba(0,0,0,.08); }
.cd-study-strip.is-pile .cd-ss-grades { display: none; }
.cd-study-strip.is-pile .cd-ss-pile { display: inline-flex; }

/* ---------- 2. Why this card: the sheet and the card's recall ---------- */
.cd-why { min-height: 100svh; display: flex; align-items: center; box-sizing: border-box; }
.cd-why .k-wrap { width: 100%; }
.cd-why .k-band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.cd-why-visual { display: flex; justify-content: center; }
.cd-sheet { width: 100%; max-width: 540px; background: #fff; border-radius: 30px; padding: 26px 30px 24px; box-sizing: border-box;
  box-shadow: 0 30px 70px -40px rgba(16, 52, 43, .5), 0 0 0 1px rgba(22, 24, 29, .05); container-type: inline-size; }
.cd-sheet p { margin: 0; }
.cd-sheet-nav { text-align: center; font-weight: 600; font-size: 16px; padding-bottom: 16px; border-bottom: 1px solid #EFEDE8; }
.cd-sheet-head { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin-top: 20px !important; font-variant-numeric: tabular-nums; }
.cd-sheet-line { font-size: 17px; line-height: 1.4; margin-top: 6px !important; min-height: 2.8em; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.cd-curve-wrap { --x: 0.8000; --y: 0.7356; --draw: 80.00%; position: relative; height: 190px; margin: 18px 0 28px; container-type: size; }
.cd-curve-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cd-curve { clip-path: inset(-6px calc(100% - var(--x) * 100%) -6px -6px); }
.cd-curve-goal { stroke: #CFCBC2; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.cd-curve-due { stroke: #DEDAD2; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cd-curve-path { fill: none; stroke: var(--k-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cd-cl { position: absolute; left: 0; font-size: 12px; line-height: 1; color: var(--k-ink-2); white-space: nowrap; transform: translateY(-140%); }
.cd-cl-last { top: 100%; transform: translateY(8px); }
.cd-cl-due { top: 100%; transform: translate(-50%, 8px); }
.cd-curve-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--k-accent); box-shadow: 0 0 0 5px rgba(31, 111, 91, .2);
  transform: translate(calc(var(--x) * 100cqw), calc(var(--y) * 100cqh)); }
.cd-sheet-rows { margin: 34px 0 0; display: grid; border-radius: 16px; background: #F6F5F2; }
.cd-sheet-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; font-size: 16px; border-top: 1px solid #ECEAE5; }
.cd-sheet-rows div:first-child { border-top: 0; }
.cd-sheet-rows dt { color: var(--k-ink); }
.cd-sheet-rows dd { margin: 0; color: var(--k-ink-2); font-variant-numeric: tabular-nums; }

/* ---------- 3. The run-up: a wall planner you can read, on the left of the story ---------- */
@media (min-width: 900px) {
  .cd-exam-scene.k-flip .k-stage-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.cd-plan { width: clamp(280px, 25vw, 380px); background: #fff; border-radius: 26px; padding: 24px 22px 20px; box-sizing: border-box;
  box-shadow: 0 0 0 1px var(--k-line), 0 24px 50px -30px rgba(0, 0, 0, .35); }
.cd-plan p { margin: 0; }
.cd-plan-title { font: 500 clamp(19px, 1.5vw, 22px)/1.2 var(--k-display); color: var(--k-ink); margin-bottom: 16px !important; }
.cd-board { position: relative; width: 100%; aspect-ratio: 100 / 82; container-type: inline-size; font-family: var(--cd-ui); }
.cd-board > * { position: absolute; box-sizing: border-box; }
.cd-dow { width: 14.2857cqw; text-align: center; font-size: 4cqw; font-weight: 600; color: var(--k-ink-2); top: 0; }
.cd-day { width: 13.2cqw; height: 13.2cqw; border-radius: 2.4cqw; background: #F4F3EF; }
.cd-day b { position: absolute; left: 1.3cqw; top: .7cqw; font-size: 3.6cqw; line-height: 1; font-weight: 600; color: var(--k-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-day.is-past { background: transparent; }
.cd-day.is-past b { color: #B4B0A7; font-weight: 400; }
.cd-day.is-today { box-shadow: inset 0 0 0 2px var(--k-accent); }
.cd-day.is-today b { color: var(--k-accent); }
.cd-day.is-exam { background: var(--k-accent); }
.cd-day.is-exam b { color: #fff; }
.cd-day.is-exam::after { content: "Exam"; position: absolute; left: 0; right: 0; bottom: 1.6cqw; text-align: center; font-size: 3.6cqw; font-weight: 600; color: #fff; }
.cd-day.is-after { background: transparent; box-shadow: inset 0 0 0 1px #E3E0D9; }
.cd-day.is-after b { color: var(--k-ink-2); font-weight: 400; }
.cd-chip { width: 2.2cqw; height: 3cqw; border-radius: .5cqw; background: #fff; box-shadow: inset 0 0 0 .35cqw var(--k-accent); }
.cd-chip.is-fwd { background: var(--k-accent); left: 0; top: 0;
  transform: translate(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw)); transition: transform .55s cubic-bezier(.3, .6, .2, 1); }
.cd-chip.is-fwd.is-moved, html:not(.k-motion) .cd-chip.is-fwd { transform: translate(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw)); }
.cd-tray-line { left: 0; right: 0; height: 0; border-top: 1.5px dashed #CFCBC2; }
.cd-tray-label { left: 0; font-size: 3.8cqw; color: var(--k-ink-2); }
.cd-after { display: none; }
.is-after .cd-before { display: none; }
.is-after .cd-after { display: inline; }
html:not(.k-motion) .cd-before { display: none; }
html:not(.k-motion) .cd-after { display: inline; }
.cd-plan-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px !important; font-size: 13px; color: var(--k-ink-2); }
.cd-plan-key span::before { content: ""; display: inline-block; width: 8px; height: 11px; border-radius: 2px; margin-right: 7px; vertical-align: -1px;
  box-shadow: 0 0 0 1.5px var(--k-accent); background: #fff; }
.cd-plan-key .cd-k-fwd::before { background: var(--k-accent); }

.cd-exam-strip { flex-wrap: wrap !important; gap: 8px 10px !important; font-size: 13px; color: var(--k-ink-2); position: relative; }
.cd-xs-days, .cd-xs-late { display: inline-flex; gap: 3px; }
.cd-xs-days i, .cd-xs-late i { width: 9px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1.5px var(--k-accent); background: transparent; }
.cd-xs-late i { background: var(--k-accent); transition: opacity .25s ease; }
.cd-xs-days i { transition: background-color .25s ease; }
.cd-xs-days i.is-on { background: var(--k-accent); }
.cd-xs-late i.is-gone { opacity: .12; }
.cd-xs-line { font-weight: 600; color: var(--k-accent); padding: 2px 8px; border-radius: 6px; background: rgba(31, 111, 91, .12); }
.cd-xs-note { flex-basis: 100%; display: none; }
html:not(.k-motion) .cd-xs-days i { background: var(--k-accent); }
html:not(.k-motion) .cd-xs-late i { opacity: .12; }

/* ---------- 4. What you write: the numbered words lift out of the sentence into their cards' gaps ---------- */
.cd-words { background: var(--cd-deep); min-height: 100svh; display: flex; align-items: center; box-sizing: border-box; }
.cd-words .k-wrap { width: 100%; }
.cd-words .k-band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.cd-words :is(.k-h2) { color: #fff; }
.cd-words .k-lead { color: rgba(255, 255, 255, .86); }
.cd-words .k-body { color: rgba(255, 255, 255, .8); }
.cd-words .k-eyebrow { color: rgba(255, 255, 255, .72); }
.cd-words-visual { position: relative; max-width: 580px; width: 100%; justify-self: center; }
.cd-cloze { position: relative; background: #fff; border-radius: 22px; padding: 22px 26px 26px;
  box-shadow: 0 0 0 2px #2E8A71, 0 24px 50px -30px rgba(0, 0, 0, .5); }
.cd-cloze p { margin: 0; }
.cd-cloze-label { font-size: 13px; color: var(--k-accent); font-weight: 600; }
.cd-cloze-text { font: 400 clamp(22px, 2.1vw, 28px)/1.35 var(--cd-card-font); color: var(--k-ink); margin-top: 6px !important; }
.cd-c { color: var(--k-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cd-c sup { font: 600 12px/1 var(--cd-ui); text-decoration: none; display: inline-block; margin-left: 2px; vertical-align: 10px;
  color: #fff; background: var(--k-accent); border-radius: 999px; padding: 2px 5px; }
.cd-cloze-cards { position: relative; margin-top: 18px; display: grid; gap: 10px; }
.cd-cloze-preview { display: flex; justify-content: space-between; color: rgba(255, 255, 255, .78); font-size: 14px; margin: 0 4px 2px !important; }
.cd-ccard { position: relative; background: #fff; border-radius: 16px; padding: 14px 18px 14px 52px; box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .55); }
.cd-cnum { position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--k-accent); color: #fff;
  font: 600 13px/24px var(--cd-ui); text-align: center; }
.cd-ccard p { margin: 0; font: 400 clamp(17px, 1.4vw, 19px)/1.4 var(--cd-card-font); color: var(--k-ink); }
.cd-gap { color: var(--k-accent); font-weight: 700; transition: opacity .2s ease; }
.cd-fly { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cd-fly span { --t: 0; position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 8px; border-radius: 8px; background: #fff;
  font: 600 clamp(18px, 1.6vw, 22px)/1.2 var(--cd-card-font); color: var(--k-accent); box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transform: translate(calc(var(--x0, 0px) + (var(--x1, 0px) - var(--x0, 0px)) * var(--t)), calc(var(--y0, 0px) + (var(--y1, 0px) - var(--y0, 0px)) * var(--t)))
    scale(calc(1 + (var(--k1, 1) - 1) * clamp(0, (var(--t) - .45) / .45, 1)));
  opacity: 0; }
/* over the second half of its flight the word shrinks to its gap's width (--k1), so a word at the gap never covers the words beside it */
html.k-motion .cd-words .cd-gap { opacity: var(--g, 1); }

/* ---------- 5. Anki in, Anki out: on the deep evergreen, the deck filling up as a pile ---------- */
.cd-anki { background: var(--cd-deep-2); }
.cd-anki .k-h2 { color: #fff; }
.cd-anki .k-body { color: rgba(255, 255, 255, .84); }
.cd-anki .k-eyebrow { color: rgba(255, 255, 255, .72); }
.cd-anki .k-pips i { background: rgba(255, 255, 255, .22); }
.cd-anki .k-pips i.is-on { background: #fff; }
.cd-pack { width: clamp(270px, 22vw, 320px); height: calc(var(--k-device-w) / .4603); box-sizing: border-box; padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: 26px; font-family: var(--cd-ui);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
.cd-pack p { margin: 0; }
.cd-pack-title { font: 500 clamp(19px, 1.5vw, 22px)/1.2 var(--k-display); color: var(--k-ink); }
.cd-pack-file { display: flex; gap: 14px; align-items: center; background: #F4F3EF; border-radius: 16px; padding: 14px 16px; }
.cd-pkg { flex: none; width: 34px; height: 42px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 2px var(--k-accent); position: relative; }
.cd-pkg::after { content: ".apkg"; position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 8px/1 var(--cd-ui); color: var(--k-accent); }
.cd-pack-file b { display: block; font-size: 16px; }
.cd-pack-file small { display: block; font-size: 13px; line-height: 1.35; color: var(--k-ink-2); white-space: nowrap; }
.cd-pack-flow { position: relative; flex: 1; min-height: 60px; container-type: size; }
.cd-pack-line { position: absolute; left: 50%; top: 6px; bottom: 6px; border-left: 2px dashed #CFCBC2; }
/* as the import ends, the app's own words land on the line: "37 cards added." */
.cd-pack-added { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 5px 11px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--k-line); font: 600 13px/1.2 var(--cd-ui); color: var(--k-accent); transition: opacity .3s ease; }
html.k-motion .cd-pack-added { opacity: 0; }
html.k-motion .cd-pack-added.is-on { opacity: 1; }
.cd-pack-flow i { --t: 0; position: absolute; left: 50%; top: 0; width: 40px; height: 28px; margin-left: -20px; border-radius: 6px; background: #fff;
  box-shadow: 0 0 0 1px var(--cd-edge), 0 4px 10px rgba(0, 0, 0, .12);
  transform: translateY(calc(var(--t) * (100cqh - 28px))) rotate(calc((var(--t) - .5) * 12deg)); opacity: 0; }
.cd-pack-deck { position: relative; height: 104px; margin-bottom: 52px; }
.cd-pack-deck .cd-pile i { position: absolute; left: calc(var(--e) * 3px); right: calc(var(--e) * 3px); top: calc(var(--e) * 6px); bottom: calc(var(--e) * -6px);
  background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--cd-edge); transition: transform .35s ease, opacity .3s ease; }
.cd-pack-deck .cd-pile i.is-gone { opacity: 0; transform: translateY(-8px); }
.cd-pack-face { position: absolute; inset: 0; display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 0 0 1px rgba(22, 24, 29, .14), 0 10px 22px -12px rgba(0, 0, 0, .3); }
.cd-plain { flex: none; width: 40px; height: 28px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--k-ink-2); }
.cd-pack-face b { display: block; font-size: 18px; }
.cd-pack-face span span { font-size: 15px; color: var(--k-ink-2); }
.cd-pack-face i { font-style: normal; font-variant-numeric: tabular-nums; }
.cd-pack-out { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cd-file { display: inline-block; padding: 8px 12px; border-radius: 10px; background: #fff; font: 600 13px/1 var(--cd-ui); color: var(--k-accent);
  box-shadow: inset 0 0 0 1.5px var(--k-accent); }
.cd-pack-out .cd-file { --o: 0; opacity: var(--o); transform: translateY(calc((1 - var(--o)) * -10px)); }
html:not(.k-motion) .cd-pack-out .cd-file { --o: 1; }

.cd-anki-strip { gap: 8px !important; font-size: 14px; }
.cd-deckchip { display: inline-flex; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--k-line); font-weight: 600; }
.cd-deckchip i { font-style: normal; color: var(--k-ink-2); font-variant-numeric: tabular-nums; }
.cd-anki-strip .cd-file { padding: 5px 9px; font-size: 13px; }
.cd-anki-strip .cd-out { opacity: var(--o, 0); transition: opacity .3s ease; }
.cd-arrow { color: rgba(255, 255, 255, .7); }
html:not(.k-motion) .cd-anki-strip .cd-out { --o: 1; }

/* ---------- The rest: tiles with pictures made of the app ---------- */
.cd-rest .k-h2 { max-width: 16ch; }
.k-cardetta .k-tile { box-shadow: 0 0 0 1px var(--k-line); }
.k-cardetta .k-tile .k-h3 { font-family: var(--k-display); }
.cd-widgets { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 10px; }
.cd-w { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--k-line), 0 14px 30px -22px rgba(0, 0, 0, .4); box-sizing: border-box; }
.cd-w p { margin: 0; }
.cd-w-small { width: 150px; height: 160px; padding: 14px 16px; display: grid; align-content: start; }
.cd-w-small img { width: 30px !important; height: 30px !important; }
.cd-w-small b { font-size: 34px; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cd-w-small span { font-size: 13px; color: var(--k-ink-2); }
.cd-w-small small { font-size: 12px; color: var(--k-ink-2); margin-top: auto; padding-top: 10px; }
.cd-w-medium { width: 330px; min-height: 150px; padding: 14px 16px; display: grid; align-content: start; gap: 6px; }
.cd-wm-head { font-size: 14px; color: var(--k-ink-2); }
.cd-wm-head b { font-size: 20px; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.cd-wm-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.cd-wm-row img { width: 26px !important; height: 26px !important; }
.cd-wm-row b { color: var(--k-accent); font-variant-numeric: tabular-nums; }
.cd-wm-exam { font-size: 12px; color: var(--k-ink-2); margin-top: 2px !important; }
.cd-w-ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #23262A; color: #fff;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .22); position: relative; align-self: center; }
.cd-w-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#fff 0 81%, transparent 81% 100%);
  -webkit-mask: radial-gradient(circle, transparent 31px, #000 32px); mask: radial-gradient(circle, transparent 31px, #000 32px); }
.cd-w-ring span { display: grid; text-align: center; font-size: 11px; line-height: 1.05; }
.cd-w-ring b { font-size: 22px; }
.cd-row-art { margin-top: auto; }
.cd-row-art p { margin: 0; }
.cd-row-label { font-size: 13px; color: var(--k-ink-2); margin: 0 0 6px 4px !important; }
.cd-row { display: grid; gap: 3px; background: #F6F5F2; border-radius: 14px; padding: 12px 14px; }
.cd-row b { font-size: 15px; }
.cd-row span { font-size: 13px; color: var(--k-ink-2); line-height: 1.35; }
.cd-media-art { margin-top: auto; }
.cd-mcard { margin: 0; display: grid; gap: 14px; background: #F6F5F2; border-radius: 14px; padding: 16px; }
.cd-mcard > span:first-child { font: 400 24px/1.1 var(--cd-card-font); }
.cd-rec { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--cd-again); box-shadow: 0 0 0 1px var(--k-line); font-variant-numeric: tabular-nums; }
.cd-rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--cd-again); }
.cd-ret-art { margin-top: auto; display: flex; gap: 12px; align-items: center; background: #F6F5F2; border-radius: 14px; padding: 14px; }
.cd-ret-art img { width: 34px !important; height: 34px !important; }
.cd-ret-art p { margin: 0; display: grid; gap: 2px; }
.cd-ret-art b { font-size: 15px; }
.cd-ret-art span { font-size: 13px; color: var(--k-ink-2); }
.cd-label-art { margin-top: auto; }
.cd-label-art p { margin: 0; display: grid; gap: 4px; background: #F6F5F2; border-radius: 14px; padding: 14px 16px; }
.cd-label-art b { font-size: 17px; }
.cd-label-art span { font-size: 13px; color: var(--k-ink-2); }
@media (max-width: 899px) {
  .cd-widgets { gap: 14px 18px; justify-content: center; align-items: center; }
  .cd-w-medium { width: 100%; order: 3; }
}

/* ---------- How it compares, plans, questions ---------- */
.cd-compare .k-teaser li b { font-family: var(--k-display); }
.cd-compare .k-stack .k-body { max-width: 34ch; }
.k-cardetta .k-plan.k-plus { background: var(--cd-deep); color: #fff; }
.k-cardetta .k-plan.k-plus li::before { border-color: #fff; }
.k-cardetta .k-plan .k-h3 { font-family: var(--k-display); }
.cd-plan-terms { margin-top: 22px !important; max-width: 70ch; }

/* ---------- The close (evergreen) ---------- */
.cd-close { background: var(--cd-deep); color: #fff; }
.cd-close .k-h2 { color: #fff; }
.cd-close .k-lockup b { color: #fff; }
.cd-close .k-lockup span { color: rgba(255, 255, 255, .78); }
.cd-close-line { color: rgba(255, 255, 255, .86); margin: 18px auto 0 !important; max-width: none; }
.cd-close .k-btn-primary { background: #fff; color: var(--cd-deep); }
.cd-close .k-subnav { justify-content: center; margin-top: 40px; }
.cd-close .k-subnav a { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.cd-close .k-subnav a[aria-current="page"] { background: #fff; color: var(--cd-deep); }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  .cd-hand { height: auto; min-height: 0; aspect-ratio: 1 / 1.02; border-radius: 26px; }
  .cd-why, .cd-words { min-height: 0; }
  .cd-why .k-band-grid, .cd-words .k-band-grid { grid-template-columns: 1fr; }
  .cd-sheet { padding: 20px 20px 18px; border-radius: 24px; }
  .cd-sheet-head { font-size: 23px; }
  .cd-curve-wrap { height: 160px; }
  .cd-cloze-text { font-size: 21px; }
  .cd-xs-note { display: block; }
}

/* ==========================================================================
   Child pages: compare, support, privacy, terms
   ========================================================================== */
.k-cardetta.k-child-page .k-sub-hero { background: var(--k-bg-2); }
.k-cardetta .k-doc { background: var(--k-bg); }
.k-cardetta .k-doc .k-wrap > :first-child { margin-top: 0; }
.k-cardetta .k-doc h2 { scroll-margin-top: 100px; }
.k-cardetta .k-doc .em-ui { font-style: normal; font-weight: 600; color: var(--k-ink); }
.k-cardetta .k-table td.is-us { background: rgba(31, 111, 91, .1); }
/* The legal pages' contents list: beside the text on wide screens, folded above it on phones. */
.cd-doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.cd-doc-layout .k-toc { position: sticky; top: 104px; font-size: 15px; }
.cd-doc-layout .k-toc ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.cd-doc-layout .k-toc a { color: var(--k-ink-2); text-decoration: none; }
.cd-doc-layout .k-toc a:hover { color: var(--k-ink); text-decoration: underline; }
.cd-doc-layout .k-toc-title { font-weight: 600; color: var(--k-ink); margin: 0; }
.k-toc-m { display: none; }
.k-toc-m details { background: var(--k-card); border-radius: 16px; padding: 14px 18px; box-shadow: 0 0 0 1px var(--k-line); margin-bottom: 28px; }
.k-toc-m summary { cursor: pointer; font-weight: 600; color: var(--k-ink); }
.k-toc-m ol { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.k-toc-m a { color: var(--k-ink-2); }
@media (max-width: 1023px) {
  .cd-doc-layout { grid-template-columns: 1fr; gap: 0; }
  .cd-doc-layout .k-toc { display: none; }
  .k-toc-m { display: block; }
}
.k-cardetta .k-doc.cd-wide-doc .k-wrap { max-width: 1160px; }
.k-cardetta .k-sub-hero .cd-sub-updated { margin-top: 18px !important; font-size: 15px; color: var(--k-ink-2); }
.k-cardetta .k-sub-hero .k-h1 { max-width: 18ch; }
.cd-doc-main > h2:first-child, .cd-doc-main > .k-toc-m + h2, .cd-doc-main > .k-toc-m + .k-note { margin-top: 0; }
.cd-doc-main .cd-short { margin-top: 0; }
.cd-doc-main .cd-short h2 { font-size: 22px; margin: 0 0 10px; }
.cd-doc-main .cd-body > h2:first-child { margin-top: 44px; }
.cd-doc-main code { font-size: .92em; background: var(--k-card); padding: 1px 6px; border-radius: 6px; box-shadow: 0 0 0 1px var(--k-line); }
.cd-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.cd-limits .k-note { margin: 0; }
.cd-limits h3 { margin: 0 0 6px !important; }
@media (max-width: 759px) { .cd-limits { grid-template-columns: 1fr; } }
.cd-form { background: var(--k-card); border-radius: 22px; padding: 26px 26px 18px; box-shadow: 0 0 0 1px var(--k-line); margin: 22px 0 8px; }
@media (max-width: 759px) { .cd-form { padding: 20px 18px 12px; } }