/* The home pages (/, /pl/, /pt/): the app's own look, its screens, Free and Premium. The legal pages keep style.css only. */
main.home { max-width: none; padding: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

/* The top: lavender in the light theme, the app's purple in the dark one (as on the App Store screens) */
:root {
  --hero: linear-gradient(180deg, #e9e3ff 0%, var(--ground) 100%);
  --hero-end: var(--ground);
  --hero-text: #1d1b20;
  --hero-lead: #4a4458;
  --hero-pill: rgba(91, 63, 217, 0.08);
  --hero-pill-line: rgba(91, 63, 217, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero: linear-gradient(180deg, #5b3fd9 0%, #35218a 100%);
    --hero-end: #35218a;
    --hero-text: #ffffff;
    --hero-lead: #e6e0ff;
    --hero-pill: rgba(255, 255, 255, 0.12);
    --hero-pill-line: rgba(255, 255, 255, 0.28);
  }
}
:root[data-theme="dark"] {
  --hero: linear-gradient(180deg, #5b3fd9 0%, #35218a 100%);
  --hero-end: #35218a;
  --hero-text: #ffffff;
  --hero-lead: #e6e0ff;
  --hero-pill: rgba(255, 255, 255, 0.12);
  --hero-pill-line: rgba(255, 255, 255, 0.28);
}
.hero {
  color: var(--hero-text);
  background: var(--hero);
  padding-block: 24px 0;
  overflow: hidden;
  position: relative;
}
/* the phones fade out where the top of the page ends */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--hero-end));
}
.hero header a.brand { color: var(--hero-text); }
.hero .pill { background: var(--hero-pill); border-color: var(--hero-pill-line); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: end; margin-top: 40px; }
.hero h1 { font-size: clamp(34px, 5.5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
.hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--hero-lead); margin: 0 0 28px; max-width: 34em; }
.hero-text { padding-bottom: 72px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 14px;
  background: var(--hero-pill); border: 1px solid var(--hero-pill-line);
  color: inherit; font-weight: 600; text-decoration: none;
}
.hero .note { margin-top: 12px; font-size: 14px; color: var(--hero-lead); opacity: 0.8; }
.hero-phones { position: relative; height: 560px; }
.hero-phones img { position: absolute; width: 250px; height: auto; }
.hero-phones img:first-child { left: 0; top: 70px; transform: rotate(-6deg); }
.hero-phones img:last-child { right: 0; top: 0; transform: rotate(4deg); }

section { padding-block: 72px; }
section h2 { font-size: clamp(26px, 3.5vw, 36px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 8px; text-align: center; }
section p.sub { color: var(--muted); text-align: center; margin: 0 auto 40px; max-width: 36em; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--card); }
.card h3 { font-size: 18px; margin: 12px 0 6px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto; }
.plan { border: 1px solid var(--line); border-radius: 20px; padding: 26px; background: var(--card); }
.plan.premium { color: #fff; border: 0; background: linear-gradient(135deg, #5b3fd9, #a13fd9); }
.plan h3 { margin: 0 0 4px; font-size: 22px; }
.plan .price { margin: 0 0 16px; color: var(--muted); }
.plan.premium .price { color: #ece6ff; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { padding-left: 26px; position: relative; margin: 8px 0; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--accent); }
.plan.premium li::before { color: #fff; }
p.fine { text-align: center; color: var(--muted); font-size: 14px; margin: 20px auto 0; max-width: 40em; }

main.home footer { margin-top: 0; padding-block: 28px 48px; }
main.home footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }

@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .hero-text { padding-bottom: 0; }
  .hero-phones { height: 420px; max-width: 360px; width: 100%; margin: 0 auto; }
  .hero-phones img { width: 190px; }
  section { padding-block: 56px; }
}

/* The home pages' own look (main.home.b; the link pages share this file and stay as they are): screens with
   handwritten notes beside them, as in a cookbook someone has written in. The fonts are ours, nothing asks Google. */
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url(/fonts/figtree-latin.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url(/fonts/figtree-latin-ext.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Shantell Sans"; src: url(/fonts/shantell-latin.woff2) format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Shantell Sans"; src: url(/fonts/shantell-latin-ext.woff2) format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root { --paper: #e9e3ff; --paper-ink: #2b1c78; --hand: #4a2fc4; --arrow: #b4661f; --store: #5b3fd9; --store-text: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #231a4d; --paper-ink: #e9e3ff; --hand: #cfc3ff; --arrow: #efae6c; --store: #ffffff; --store-text: #3a2699; }
}
:root[data-theme="dark"] { --paper: #231a4d; --paper-ink: #e9e3ff; --hand: #cfc3ff; --arrow: #efae6c; --store: #ffffff; --store-text: #3a2699; }

main.home.b { font-family: "Figtree", -apple-system, "Segoe UI", sans-serif; }
.b h1, .b h2, .b h3 { font-family: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif; text-wrap: balance; }
.b .hero h1 { font-weight: 800; }
.b h2 { font-weight: 800; letter-spacing: -0.02em; }
/* Apple's own badge, unchanged */
.b .store { display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; }
.b .store img { display: block; width: auto; height: 54px; }
/* every screen sits in a phone's body */
.b .hero-phones img, .b .pair img { box-sizing: border-box; border-radius: 34px; border: 7px solid #17151b; box-shadow: 0 0 0 1.5px #5d566b; background: #141218; }

/* the screens and what is written beside them */
.b section.paper { max-width: none; background: var(--paper); color: var(--paper-ink); padding-inline: max(20px, calc((100% - 1040px) / 2)); }
.b section.paper p.sub { color: inherit; opacity: 0.8; }
.pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 40px; }
.b section.paper .run + .cards { margin-top: 48px; }
.pair { flex: 0 1 490px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 10px; align-items: center; min-width: 0; }
.pair img { display: block; width: 100%; height: auto; }
.hand { margin: 0; font: 500 clamp(17px, 2.3vw, 24px)/1.22 "Shantell Sans", "Segoe Print", cursive; color: var(--hand); text-align: right; transform: rotate(-1.5deg); }
.hand svg { display: block; width: 72%; height: auto; margin: 8px 0 0 auto; fill: none; stroke: var(--arrow); stroke-width: 3; stroke-linecap: round; }
.pair.flip { grid-template-columns: 1.05fr 1fr; }
.pair.flip .hand { order: 2; text-align: left; transform: rotate(1.5deg); }
.pair.flip .hand svg { margin: 8px auto 0 0; transform: scaleX(-1); }
.hand .no { display: block; font-size: 1.5em; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--arrow); }

/* the first step of a sequence: the phone's camera, with the gallery on the left of the shutter (drawn, not a screenshot) */
.pair { position: relative; }
.camera { position: relative; box-sizing: content-box; justify-self: stretch; aspect-ratio: 600 / 1304; border-radius: 34px; border: 7px solid #17151b; box-shadow: 0 0 0 1.5px #5d566b; background: #0e0d11; overflow: hidden; container-type: inline-size; }
.b .pair .camera img { border: 0; border-radius: 0; box-shadow: none; background: none; }
.camera::before { content: ""; position: absolute; left: 50%; top: 2.2%; width: 31%; height: 3.8%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.camera::after { content: ""; position: absolute; left: 50%; bottom: 5.5%; width: 21%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #0e0d11, 0 0 0 6px #fff; }
.camera svg { position: absolute; bottom: 7%; width: 14%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.camera .gallery { left: 10%; }
.camera .turn { right: 10%; }
.next { position: absolute; top: 50%; right: -44px; width: 48px; fill: none; stroke: var(--arrow); stroke-width: 2.5; stroke-linecap: round; }
@media (max-width: 1059px) { .next { display: none; } }

/* The sequence that stays in place (home.js adds .live): .run is as tall as the scroll it takes, .pairs stays on screen
   meanwhile, and display: contents puts every note and screen into one grid, each on top of the others. */
.run.live { --phone: min(calc(78svh / 2.173), 350px); height: calc(var(--steps) * 80vh + 100vh); }
.run.live .pairs { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr var(--phone) 1fr; grid-template-rows: auto auto; gap: 10px 36px; align-content: center; align-items: center; justify-items: stretch; }
.run.live .pair { display: contents; }
.b .run.live .pair > img, .b .run.live .camera { grid-area: 1 / 2; opacity: 0; transition: opacity 0.3s; }
.b .run.live .pair > img { width: var(--phone); }
.b .run.live .camera { width: calc(var(--phone) - 14px); justify-self: center; }
.b .run.live .hand { grid-area: 1 / 1; opacity: 0; translate: 0 14px; font-size: clamp(22px, 2.5vw, 31px); transition: opacity 0.3s, translate 0.3s; }
.b .run.live .flip .hand { grid-area: 1 / 3; }
.run.live .next { display: none; }
.b .run.live .on > img, .b .run.live .on > .camera, .b .run.live .on > .hand { opacity: 1; translate: 0; }
.run.live .hand path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s 0.1s; }
.run.live .hand path + path { transition-delay: 0.4s; transition-duration: 0.15s; }
.run.live .on .hand path { stroke-dashoffset: 0; }
/* the camera takes the photo: going from it to the list, and only forward */
.run.live .pairs::after { content: ""; grid-area: 1 / 2; width: var(--phone); height: 100%; max-height: calc((var(--phone) - 14px) * 2.173 + 14px); align-self: center; border-radius: 34px; background: #fff; opacity: 0; pointer-events: none; }
.run.live .pairs[data-step="1"]:not(.back)::after { animation: flash 0.5s ease-out; }
@keyframes flash { from { opacity: 0.95; } }
/* that there is more to scroll: the word and a nudging arrow, until the last step; the dots say how much */
.cue { display: none; }
.run.live .cue { grid-area: 2 / 2; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--hand); font: 700 26px/1 "Shantell Sans", "Segoe Print", cursive; }
.cue button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cue .more { display: inline-flex; align-items: center; gap: 4px; padding-block: 6px; }
.cue .more svg { width: 34px; fill: none; stroke: var(--arrow); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 0 7px; } }
.pairs.last .cue .more { visibility: hidden; }
.cue .dots { display: inline-flex; }
.cue .dots button { display: grid; place-items: center; padding: 14px 5px; }
.cue i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.25; transition: opacity 0.2s; }
.cue i.on, .cue button:hover i { opacity: 1; }
@media (max-width: 800px) {
  .run.live { --phone: min(calc((100svh - 225px) / 2.173), 76vw); }
  .run.live .pairs { grid-template-columns: 1fr; grid-template-rows: auto minmax(84px, auto) auto; gap: 10px 0; align-content: center; justify-items: center; }
  .run.live .cue { grid-area: 3 / 1; }
  .b .run.live .pair > img, .b .run.live .camera, .run.live .pairs::after { grid-area: 1 / 1; }
  .b .run.live .hand, .b .run.live .flip .hand { grid-area: 2 / 1; align-self: start; text-align: center; font-size: 20px; max-width: 22em; }
  .run.live .hand .no { display: inline; margin: 0 0.3em 0 0; font-size: 1.3em; }
  .run.live .hand svg { display: none; }
}

/* every block has its box and an icon */
.b .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .b .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .b .cards { grid-template-columns: 1fr; } }
.b .card h3 { font-size: 19px; font-weight: 700; margin: 12px 0 4px; }
.b section.paper .card p { color: inherit; opacity: 0.82; }
.ic { display: block; width: 44px; height: 44px; padding: 10px; border-radius: 13px; background: color-mix(in srgb, var(--hand) 14%, transparent); fill: none; stroke: var(--hand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan .ic { margin-bottom: 12px; }
.plan.premium .ic { background: rgba(255, 255, 255, 0.2); stroke: #fff; }

/* The photo in the camera, with what the AI finds on it. Without motion the labels are simply there. */
.shot { position: relative; margin-top: 28%; }
.tag { position: absolute; translate: -50% -50%; padding: 0.25em 0.6em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.94); color: #1d1b20; font: 600 4.4cqw/1.15 "Figtree", sans-serif; text-align: center; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.tag b { display: block; color: #4a2fc4; font-weight: 800; }
.scan { display: none; }
.run.live .scan { display: block; position: absolute; left: 0; right: 0; top: 0; height: 18%; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(207, 195, 255, 0.55)); border-bottom: 2px solid #cfc3ff; box-shadow: 0 2px 12px #cfc3ff; }
.run.live .seen .on .scan { animation: scan 1.1s ease-in-out 0.1s; }
@keyframes scan { 0% { opacity: 1; top: -18%; } 90% { opacity: 1; top: 100%; } 100% { opacity: 0; top: 100%; } }
.run.live .tag { opacity: 0; scale: 0.7; }
.run.live .seen .on .tag { opacity: 1; scale: 1; transition: opacity 0.2s, scale 0.3s cubic-bezier(0.3, 1.7, 0.6, 1); transition-delay: calc(0.8s + var(--n) * 0.14s); }

/* The opening at the top: the photo goes into the phone, the list fills, the recipe appears. Plays once, in CSS. */
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.qr { display: none; align-items: center; gap: 12px; }
.qr img { display: block; width: 88px; height: 88px; padding: 6px; border-radius: 12px; background: #fff; }
.qr p { margin: 0; max-width: 7.5em; font: 600 16px/1.2 "Shantell Sans", "Segoe Print", cursive; }
@media (hover: hover) and (min-width: 801px) { .qr { display: flex; } }

.intro { position: absolute; left: 0; top: 70px; width: 250px; transform: rotate(-6deg); }
.b .hero-phones .intro img { position: static; width: 100%; transform: none; }
.intro-list, .b .hero-phones .intro .print { display: none; }
@media (max-width: 800px) { .intro { width: 190px; } }
@media (prefers-reduced-motion: no-preference) {
  .intro-list { display: block; position: absolute; inset: 7px; border-radius: 27px; background: #141218; color: #e6e1e9; container-type: inline-size; animation: list-in 4s both; }
  .intro-list .in { display: flex; flex-direction: column; gap: 1.1em; padding: 26% 8% 0; font: 500 5.4cqw/1.2 "Figtree", sans-serif; }
  .intro-list b { margin-bottom: 0.4em; font-size: 1.25em; font-weight: 600; text-align: center; }
  .intro-list span { position: relative; padding-left: 1.2em; animation: row-in 0.3s calc(1.5s + var(--n) * 0.24s) both; }
  .intro-list span::before { content: ""; position: absolute; left: 0.1em; top: 0.4em; width: 0.45em; height: 0.45em; border-radius: 50%; background: #cfc3ff; }
  .b .hero-phones .intro .print { display: block; position: absolute; left: 6%; right: auto; top: 24%; width: 88%; padding: 0; box-sizing: border-box; border: 6px solid #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); background: #fff; animation: print-in 1.3s ease-in-out 0.25s both; }
  @keyframes print-in { 0% { opacity: 0; translate: -75% -22%; rotate: -14deg; scale: 1.1; } 14% { opacity: 1; } 72% { opacity: 1; translate: 0 0; rotate: 2deg; scale: 0.92; } 100% { opacity: 0; translate: 0 0; rotate: 0deg; scale: 0.7; } }
  @keyframes list-in { 0%, 28% { opacity: 0; } 34%, 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
  @keyframes row-in { from { opacity: 0; translate: 0 0.6em; } }
}

/* The day's kcal beside its screen; the ring and the number run up when the step comes on (home.js). */
.tally { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 4px 0 12px auto; rotate: 1.5deg; }
.b .hand .tally svg { grid-area: 1 / 1; display: block; width: 100%; margin: 0; rotate: -90deg; fill: none; stroke: color-mix(in srgb, var(--hand) 22%, transparent); stroke-width: 3; }
.b .hand .tally .val { stroke: var(--arrow); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--f)); transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); }
.b .run.live .pair:not(.on) .tally .val { stroke-dashoffset: 1; transition: none; }
.tally .v { grid-area: 1 / 1; text-align: center; line-height: 1.05; }
.tally b { display: block; font: 800 34px/1 "Bricolage Grotesque", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tally small { display: block; margin-top: 2px; font: 500 12px/1.2 "Figtree", sans-serif; }
@media (max-width: 800px) {
  .run.live .tally { display: inline; width: auto; height: auto; margin: 0; rotate: none; }
  .run.live .tally::after { content: ""; display: block; }
  .b .run.live .hand .tally svg { display: none; }
  .run.live .tally .v, .run.live .tally b, .run.live .tally small { display: inline; font-size: 1em; font-family: inherit; font-weight: 700; }
}

/* The list on two phones. Built in HTML because a row has to move: everything inside scales with the phone. */
.sync { display: grid; grid-template-columns: minmax(0, 290px) minmax(150px, 240px) minmax(0, 290px); justify-content: center; align-items: center; gap: 28px; margin-bottom: 44px; }
.who > p { margin: 0 0 10px; text-align: center; font: 700 22px/1 "Shantell Sans", "Segoe Print", cursive; color: var(--hand); }
.mock { aspect-ratio: 600 / 1304; box-sizing: content-box; border: 7px solid #17151b; border-radius: 34px; box-shadow: 0 0 0 1.5px #5d566b; background: #141218; color: #e6e1e9; overflow: hidden; container-type: inline-size; }
.mock .in { padding: 0 6% ; font: 400 4.7cqw/1.2 "Figtree", sans-serif; }
.mock .clock { padding: 1.2em 0.9em 0.6em; font-weight: 600; }
.mock .title { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; padding-bottom: 0.8em; }
.mock .title b { flex: 1; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; font-size: 1.1em; font-weight: 500; }
.mock .tabs { display: flex; margin-bottom: 0.9em; border: 1px solid #938f99; border-radius: 99px; overflow: hidden; font-size: 0.85em; text-align: center; }
.mock .tabs span { flex: 1; padding: 0.45em 0; }
.mock .tabs .sel { background: #4a4458; }
.mock .head { margin: 0.8em 0 0.35em; font-size: 0.86em; font-weight: 500; }
.mock .add { margin-top: 0.7em; padding: 0.55em 1.5em; border: 1px solid #2e2b33; border-radius: 0.7em; color: #cac4d0; font-size: 0.9em; }
.mock .row { display: flex; align-items: center; gap: 0.7em; max-height: 2.2em; padding: 0.32em 0; overflow: hidden; transition: max-height 0.35s, opacity 0.25s, padding 0.35s; }
.mock .row i { position: relative; flex: none; display: grid; place-items: center; width: 1.05em; height: 1.05em; border: 1.5px solid #cac4d0; border-radius: 50%; }
.mock .ok i { border-color: #cfc3ff; background: #cfc3ff; }
.mock .ok svg { width: 90%; fill: none; stroke: #141218; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mock .ok span { color: #938f99; text-decoration: line-through; }
.mock .row.done:not(.twin), .mock .twin:not(.done) { max-height: 0; padding-block: 0; opacity: 0; }
.mock .row.tap i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: #cfc3ff; animation: tap 0.8s ease-out; opacity: 0; }
@keyframes tap { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 3.4; } }
.sync .hand { text-align: center; rotate: -1.5deg; transform: none; }
.sync .hand svg { width: 80%; margin: 8px auto 0; }
@media (max-width: 800px) {
  .sync { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .sync .who:last-child { grid-area: 1 / 2; }
  .sync .hand { grid-area: 2 / 1 / 2 / 3; }
  .sync .hand svg { display: none; }
  .mock { border-width: 5px; border-radius: 26px; }
}