/* Team Family - home page layout and components (PL index.html and EN com/index.html share it).
   Visual language of the app's 2026 redesign: Nunito everywhere, Caveat for the "teamfamily." wordmark and
   the hand-written accents, ink #13293D, cobalt #2A64AD, sky #40A2DD (the dot of the logo), white cards.
   The background canvas (sky gradient, silk ribbons, light pools) and the header veil live in ambient.css. */
:root{
  --ink:#13293D;
  --ink-soft:#2B415A;
  --muted:#5A6A7E;
  --accent:#2A64AD;
  --accent-hover:#21548F;
  --sky:#40A2DD;
  --tint:#EAF0F7;
  --soft:#D9E3F0;
  --ground:#EEF2F6;
  --line:rgba(19,41,61,.1);
  --glass-edge:rgba(255,255,255,.92);
  --float-bg:rgba(234,240,247,.94);
  --surface:linear-gradient(150deg,rgba(255,255,255,.9) 0%,rgba(234,242,251,.74) 100%);
  --shadow-card:0 1px 0 #fff inset,0 40px 80px -52px rgba(27,72,128,.55),0 4px 18px -8px rgba(19,41,61,.1);
  --shadow-float:0 24px 48px -20px rgba(19,41,61,.35),0 4px 12px -4px rgba(19,41,61,.1);
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --radius:32px;
}

/* ── Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:17px;font-weight:500;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:900;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
p{text-wrap:pretty}
button,summary{font:inherit;color:inherit}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:10px}
::selection{background:#cde0f5;color:var(--ink)}
.icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:50;padding:12px 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:800}
.skip-link:focus{top:16px}
.dot{color:var(--sky)}
.hand{font-family:var(--hand);font-weight:700;letter-spacing:0}

/* ── Brand: the app icon "tf." + the "teamfamily." wordmark in Caveat Bold, exactly like the app's TFWordmark */
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.brand-icon{width:44px;height:44px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px rgba(19,41,61,.06),0 8px 18px -8px rgba(19,41,61,.4)}
.wordmark{padding-bottom:5px;font-family:var(--hand);font-size:38px;font-weight:700;line-height:1;letter-spacing:0;color:var(--ink)}

/* ── Header (its frosted veil is in ambient.css) */
.site-header{position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:32px;height:84px}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:700;color:var(--ink-soft)}
.nav-links a{padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:8px}
.lang-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:800;color:var(--accent);transition:background-color .2s}
.lang-link:hover{background:rgba(255,255,255,.75)}
.label-short{display:none}

/* ── Buttons: pills like TFButton in the app */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:14px 28px;border-radius:999px;font-size:16px;font-weight:800;line-height:1.25;white-space:nowrap;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.button .icon{width:20px;height:20px;transition:transform .2s ease}
.button:hover{transform:translateY(-2px)}
.button:hover .icon{transform:translateX(3px)}
.button-primary{background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 28px -14px rgba(42,100,173,.85)}
.button-primary:hover{background:var(--accent-hover)}
.button-small{min-height:46px;padding:10px 20px;gap:10px;font-size:15px}
.store-button{display:inline-flex;align-items:center;gap:12px;min-height:62px;padding:10px 28px 10px 20px;border-radius:999px;background:var(--ink);color:#fff;text-align:left;box-shadow:0 16px 30px -16px rgba(19,41,61,.75);transition:transform .2s ease,background-color .2s ease}
.store-button:hover{transform:translateY(-2px);background:#1d3b59}
.store-button .icon{width:26px;height:26px}
.store-button .icon-apple{width:30px;height:30px;margin-top:-3px;fill:currentColor;stroke:none}
.store-button>span{display:flex;flex-direction:column;line-height:1.15}
.store-button small{font-size:12px;font-weight:600;opacity:.78}
.store-button strong{font-size:19px;font-weight:800;letter-spacing:-.01em}

/* ── Shared bits */
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 14px;border:1px solid var(--glass-edge);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 10px 24px -16px rgba(27,72,128,.6);font-size:14px;font-weight:800;color:var(--accent)}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(64,162,221,.2)}
.kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:15px;font-weight:800;color:var(--accent)}
.kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--sky)}
.tile{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:16px;background:var(--tint);color:var(--accent)}
.tile .icon{width:24px;height:24px}
.hand-word{position:relative;display:inline-block;padding-right:.04em;font-family:var(--hand);font-size:1.3em;font-weight:700;line-height:.8;letter-spacing:0;color:var(--accent)}
.hand-line{display:block;margin-top:8px;font-family:var(--hand);font-size:1.3em;font-weight:700;line-height:.95;letter-spacing:0;color:var(--accent)}
.section{padding-block:120px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:56px}
.section-head h2,.start h2,.faq-intro h2{font-size:clamp(34px,3.8vw,50px)}
.section-head>p{max-width:380px;padding-bottom:6px;color:var(--muted)}

/* ── Phone: a CSS frame around a real app screenshot (923 × 2000). The status bar of the capture is covered with a
   clean one (9:41, full battery) and the Dynamic Island is drawn on top. Everything scales with --w. */
.phone{--w:280px;position:relative;width:var(--w);padding:calc(var(--w)*.032);border-radius:calc(var(--w)*.165);background:linear-gradient(155deg,#33414f 0%,#0b131c 16%,#04080c 50%,#0b131c 84%,#33414f 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 calc(var(--w)*.011) #121c27,0 50px 90px -42px rgba(19,41,61,.6),0 24px 40px -26px rgba(19,41,61,.42)}
.phone-screen{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:923/2000;border-radius:calc(var(--w)*.135);background:var(--ground)}
.phone-screen img{width:100%;height:100%;object-fit:cover}
.phone-screen::after{content:"";position:absolute;z-index:2;top:calc(var(--w)*.026);left:50%;width:calc(var(--w)*.29);height:calc(var(--w)*.086);border-radius:999px;background:#020509;transform:translateX(-50%)}
.phone-status{position:absolute;z-index:1;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:6.4%;padding:0 7% 0 13%;background:var(--status-bg,#EEF2F5);color:#0b1520;font:600 calc(var(--w)*.05)/1 -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;letter-spacing:-.01em}
.phone-status svg{width:calc(var(--w)*.21);height:auto;fill:currentColor}

/* Floating cards around the phones echo the app's own UI (notification, "Zajmuje się" chip); cards and chip share
   the same see-through tint, so the icon tile inside a card turns white */
.float-card{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;max-width:290px;text-align:left;padding:12px 20px 12px 12px;border:1px solid var(--glass-edge);border-radius:22px;background:var(--float-bg);box-shadow:var(--shadow-float);font-size:13px;line-height:1.35;color:var(--muted)}
.float-card strong{display:block;margin-bottom:2px;font-size:15px;font-weight:800;color:var(--ink)}
.float-card small{display:block;font-size:13px;font-weight:600}
.float-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:15px;background:#fff;color:var(--accent)}
.float-icon .icon{width:22px;height:22px;stroke-width:2}
.float-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:10px 18px 10px 12px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--float-bg);box-shadow:var(--shadow-float);font-size:14px;font-weight:700;white-space:nowrap;color:var(--accent)}
.float-chip .icon{width:20px;height:20px;stroke-width:2}

/* ── Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:32px;padding-block:40px 64px}
.hero-copy{position:relative;z-index:2}
.hero h1{margin-top:26px;font-size:clamp(46px,5.4vw,76px);line-height:1.04;letter-spacing:-.035em;text-wrap:wrap}
.hero h1 .accent{color:var(--accent)}
.hero h1 .hand-word{font-size:1.34em}
.swoosh{position:absolute;left:-1%;bottom:-.15em;width:102%;height:auto;overflow:visible;fill:none;stroke:var(--sky);stroke-width:7;stroke-linecap:round}
.swoosh path{stroke-dasharray:1}
.hero-lead{max-width:500px;margin-top:28px;font-size:19px;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px;font-size:14px;font-weight:700;color:var(--muted)}
.hero-note li{display:inline-flex;align-items:center;gap:6px}
.hero-note .icon{width:17px;height:17px;stroke-width:2.6;color:var(--accent)}
.hero-visual{position:relative;min-width:0;display:flex;justify-content:center}
.hero-visual::before{content:"";position:absolute;z-index:-1;inset:6% -8% 0;background:radial-gradient(closest-side,rgba(64,162,221,.34),rgba(64,162,221,.1) 60%,rgba(64,162,221,0))}
.hero-phones{position:relative;width:100%;max-width:560px;height:650px}
.hero-phones .phone{position:absolute;left:50%;top:50%}
.phone-main{--w:290px;z-index:3;transform:translate(-50%,-50%)}
.phone-side{--w:244px;z-index:1}
.phone-left{transform:translate(calc(-50% - 156px),calc(-50% + 30px)) rotate(-8deg)}
.phone-right{transform:translate(calc(-50% + 156px),calc(-50% + 30px)) rotate(8deg)}
/* The notification sits up and to the left of the main phone, its right edge 20 px over the phone's frame (the frame
   curves away at that corner, so it needs more than the chip's 12 px to read as crossing it) and still clear of the
   list (50% - half the phone + 20 px - the card's width); the % cap keeps it clear of the headline. */
.float-nudge{left:max(calc(50% - 415px),-32%);top:5.5%}
/* Its mirror: the chip sits down and to the right, its left edge 12 px over the phone's other side (--chip-w is the
   chip's measured width, shorter in English). Where the page margin is too narrow for that, it stops 16 px from
   the window edge and lies on the phone's empty band above the buttons (top 72% below 1420 px). */
.float-confirm{--chip-w:256px;right:max(calc(50% - 133px - var(--chip-w)),min(-32px,calc(625px - 50vw)));top:77%}
:lang(en) .float-confirm{--chip-w:242px}

/* ── Benefit strip */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;border:1px solid var(--glass-edge);border-radius:28px;background:rgba(255,255,255,.62);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.benefits li{display:flex;align-items:center;gap:14px;padding:10px 14px;font-size:16px;font-weight:800;line-height:1.3}
.benefits .tile{width:44px;height:44px;border-radius:14px}
.benefits .tile .icon{width:22px;height:22px}

/* ── Features */
.feature,.bento-card,.life,.steps>li{position:relative;isolation:isolate;border:1px solid var(--glass-edge);background:var(--surface);box-shadow:var(--shadow-card)}
.feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px;padding:56px 64px;border-radius:var(--radius);overflow:hidden}
.feature+.feature{margin-top:28px}
.feature-reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.feature-reverse .feature-copy{order:2}
.feature-copy,.bento-copy{min-width:0}
.feature-label{display:flex;align-items:center;gap:14px}
.feature-label .hand{padding-bottom:4px;font-size:44px;line-height:1;color:var(--ink)}
.feature h3{margin-top:22px;font-size:clamp(30px,3.1vw,42px)}
.feature-copy>p:not(.feature-label){max-width:480px;margin-top:18px;color:var(--muted)}
.flow{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;counter-reset:flow}
.flow li{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(19,41,61,.06),0 8px 18px -12px rgba(19,41,61,.3);font-size:15px;font-weight:800;counter-increment:flow}
.flow li::before{content:counter(flow);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:900}
.points{display:grid;gap:12px;margin-top:26px}
.points li{display:flex;align-items:flex-start;gap:12px;font-weight:700;line-height:1.5;color:var(--ink-soft)}
.points .icon{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--tint);color:var(--accent);stroke-width:3}
.feature-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.feature-visual::before{content:"";position:absolute;z-index:-1;width:min(460px,120%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(64,162,221,.3),rgba(64,162,221,0))}
.feature-visual .phone{--w:270px}
.float-recipe{left:-2%;bottom:16%}
.float-reminder{right:-4%;top:20%}

/* Bento: two cards side by side, phones rising from their bottom edge */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.bento-card{display:flex;flex-direction:column;overflow:hidden;padding:52px 52px 0;border-radius:var(--radius)}
.bento-card h3{margin-top:20px;font-size:clamp(28px,2.6vw,36px)}
.bento-copy>p:not(.feature-label){margin-top:16px;color:var(--muted)}
.bento-copy>.bento-note{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 18px 14px 14px;border-radius:20px;background:rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(19,41,61,.05);font-size:15px;line-height:1.55;color:var(--muted)}
.bento-note strong{color:var(--ink);font-weight:800}
.bento-note .icon{width:34px;height:34px;padding:7px;border-radius:12px;background:var(--tint);color:var(--accent);stroke-width:2}
.bento-visual{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:20px;height:380px;margin-top:auto;padding-top:44px}
.bento-visual::before{content:"";position:absolute;z-index:-1;left:50%;top:40px;width:420px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(64,162,221,.28),rgba(64,162,221,0));transform:translateX(-50%)}
.bento-visual .phone{--w:262px;flex:none}
.bento-visual-pair .phone{--w:220px}
.bento-visual-pair .phone:last-child{margin-top:48px}

/* ── Life */
.life{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);overflow:hidden;border-radius:var(--radius)}
.life-photo{min-width:0}
.life-photo img{width:100%;height:100%;object-fit:cover;object-position:47% center}
.life-copy{display:flex;flex-direction:column;justify-content:center;padding:56px 52px}
.life-copy h2{font-size:clamp(34px,3.4vw,46px)}
.life-copy>p:not(.kicker){max-width:400px;margin-top:18px;color:var(--muted)}

/* ── Getting started */
.start{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:64px}
.section-lead{max-width:480px;margin-top:18px;font-size:18px;color:var(--muted)}
.steps{display:grid;gap:16px;margin-top:40px}
.steps>li{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:26px 30px 24px 26px;border-radius:26px}
.step-num{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;font-weight:900;box-shadow:0 10px 22px -10px rgba(42,100,173,.85)}
.steps h3{padding-top:2px;font-size:21px;line-height:1.3;letter-spacing:-.02em}
.steps p{margin-top:6px;font-size:16px;color:var(--muted)}
.steps .step-note{margin-top:8px;font-family:var(--hand);font-size:25px;font-weight:700;line-height:1.1;color:var(--accent)}
.start-visual{position:relative;display:flex;justify-content:center}
.start-visual::before{content:"";position:absolute;z-index:-1;top:50%;left:50%;width:min(480px,130%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(64,162,221,.32),rgba(64,162,221,0));transform:translate(-50%,-50%)}
.start-visual .phone{--w:286px}
.float-families{left:-6%;bottom:14%}

/* ── FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);align-items:start;gap:72px;padding-top:40px}
.faq-intro{position:sticky;top:120px}
.faq-intro>p:last-child{margin-top:22px;color:var(--muted)}
.faq-intro a{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--accent)}
.faq-intro a .icon{width:18px;height:18px;transition:transform .2s ease}
.faq-intro a:hover .icon{transform:translateX(3px)}
.faq-list{display:grid;gap:12px}
.faq-list details{border:1px solid var(--glass-edge);border-radius:22px;background:rgba(255,255,255,.74);box-shadow:0 1px 0 #fff inset,0 18px 40px -30px rgba(27,72,128,.55);transition:background-color .2s}
.faq-list details[open]{background:rgba(255,255,255,.95)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px 20px 28px;cursor:pointer;list-style:none;font-size:17px;font-weight:800;line-height:1.45;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent)}
.faq-list summary .icon{width:36px;height:36px;padding:8px;border-radius:50%;background:var(--tint);color:var(--accent);stroke-width:2.4;transition:transform .25s ease,background-color .2s,color .2s}
.faq-list details[open] summary .icon{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq-list details>p{padding:0 28px 24px;font-size:16px;color:var(--muted)}

/* ── Download */
.download{position:relative;isolation:isolate;overflow:hidden;margin-top:8px;padding:72px 48px 64px;border-radius:40px;text-align:center;color:#fff;background:radial-gradient(ellipse 60% 70% at 50% -12%,rgba(64,162,221,.5),rgba(64,162,221,0) 72%),radial-gradient(ellipse 46% 56% at 100% 100%,rgba(124,138,255,.32),rgba(124,138,255,0) 72%),linear-gradient(150deg,#13293D 0%,#183a60 55%,#1e4d84 100%);box-shadow:0 50px 90px -50px rgba(19,41,61,.8)}
.download::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-40px;height:320px;background:url("assets/ribbon-silk-a.svg") repeat-x 0 0/1200px 100%;opacity:.55;mix-blend-mode:screen}
.download-logo{width:88px;height:88px;margin:0 auto;border-radius:24px;box-shadow:0 20px 40px -16px rgba(0,0,0,.55)}
.download .kicker{justify-content:center;margin:28px 0 0;color:#a8d4f3}
.download h2{margin-top:16px;font-size:clamp(36px,4.4vw,58px);line-height:1.08}
.download .hand-word{font-size:1.32em;color:#8fd0f7}
.download .hand-word .dot{color:#fff}
.download>p:not(.kicker){max-width:520px;margin:22px auto 0;font-size:18px;color:#c9d8e8}
.store-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
.download .store-button{background:#fff;color:var(--ink);box-shadow:0 18px 34px -18px rgba(0,0,0,.65)}
.download .store-button:hover{background:#eaf3fc}
.download-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:28px;font-size:14px;font-weight:700;color:#c9d8e8}
.download-notes li{display:inline-flex;align-items:center;gap:6px}
.download-notes .icon{width:17px;height:17px;stroke-width:2.6;color:#8fd0f7}

/* ── Footer */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding-block:56px 36px}
.site-footer .brand-icon{width:38px;height:38px;border-radius:11px}
.site-footer .wordmark{font-size:34px}
.footer-tagline{font-size:15px;font-weight:600;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto;font-size:14px;font-weight:700;color:var(--muted)}
.footer-links a{padding:6px 0;transition:color .2s}
.footer-links a:hover{color:var(--accent)}
.site-footer small{width:100%;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.site-footer small a:hover{color:var(--accent)}

/* ── Motion (progressive: without it everything is simply in place) */
@media (prefers-reduced-motion:no-preference){
  .swoosh path{stroke-dashoffset:1;animation:swoosh-draw 1.1s .55s cubic-bezier(.6,.1,.25,1) forwards}
  .pill-dot{animation:pill-pulse 2.6s ease-in-out infinite}
  .phone-main{animation:float 7s ease-in-out infinite alternate}
  .phone-left{animation:float 8s -2s ease-in-out infinite alternate}
  .phone-right{animation:float 9s -5s ease-in-out infinite alternate}
  .float-card,.float-chip{animation:float-soft 6s ease-in-out infinite alternate}
  .float-confirm,.float-reminder{animation-delay:-3s}
}
@keyframes swoosh-draw{to{stroke-dashoffset:0}}
@keyframes pill-pulse{50%{box-shadow:0 0 0 7px rgba(64,162,221,.08)}}
@keyframes float{from{translate:0 -7px}to{translate:0 9px}}
@keyframes float-soft{from{translate:0 -4px}to{translate:0 6px}}

/* Cards answer the pointer: a soft light follows the cursor (motion.js sets --mx / --my) and they lift a little */
.bento-card::before,.steps>li::before,.feature::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.9),rgba(255,255,255,0) 66%);transition:opacity .4s ease}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bento-card,.steps>li{transition:transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .45s ease}
  .bento-card:hover,.steps>li:hover{transform:translateY(-5px);box-shadow:0 1px 0 #fff inset,0 60px 100px -50px rgba(27,72,128,.6),0 14px 34px -14px rgba(19,41,61,.2)}
  .bento-card:hover::before,.steps>li:hover::before,.feature:hover::before{opacity:1}
  .life-photo{overflow:hidden}
  .life-photo img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .life:hover .life-photo img{transform:scale(1.04)}
}

/* ── Responsive */
@media (min-width:1500px){.hero{padding-block:64px 88px}}
@media (max-width:1419px){.float-confirm{top:72%}}
@media (max-width:1200px){.float-nudge{left:max(calc(50% - 387px),-32%);max-width:262px}}
@media (max-width:1100px){
  .wrap{width:calc(100% - 64px)}
  .nav-links{gap:22px}
  .hero{gap:16px}
  .hero-phones{height:600px}
  .phone-main{--w:262px}
  .phone-side{--w:216px}
  .phone-left{transform:translate(calc(-50% - 132px),calc(-50% + 28px)) rotate(-8deg)}
  .phone-right{transform:translate(calc(-50% + 132px),calc(-50% + 28px)) rotate(8deg)}
  .float-nudge{left:max(calc(50% - 373px),-34%);top:3%}
  .float-confirm{right:max(calc(50% - 119px - var(--chip-w)),-16px)}
  .benefits li{gap:10px;padding:8px;font-size:15px}
  .feature{gap:32px;padding:44px 40px}
  .feature-visual .phone{--w:250px}
  .bento-card{padding:40px 36px 0}
  .bento-visual-pair .phone{--w:196px}
  .life-copy{padding:44px 36px}
  .start{gap:40px}
  .faq{gap:48px}
}
@media (max-width:1023px){
  /* The phone fan needs ~480 px: below this width the hero stacks instead of squeezing the headline */
  .hero{grid-template-columns:1fr;gap:28px;padding-block:28px 56px;text-align:center}
  .hero-copy{max-width:640px;margin-inline:auto}
  .hero-lead{margin-inline:auto}
  .hero-actions,.hero-note{justify-content:center}
  .float-nudge{left:max(0px,calc(50% - 373px))}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-actions{margin-left:auto}
  .benefits{grid-template-columns:1fr 1fr}
  .section{padding-block:88px}
  .section-head{display:block;margin-bottom:40px}
  .section-head>p{max-width:520px;margin-top:18px}
  .feature,.feature-reverse{grid-template-columns:1fr;gap:40px;padding:44px 36px 48px}
  .feature-reverse .feature-copy{order:0}
  .feature-copy>p:not(.feature-label){max-width:600px}
  .bento{grid-template-columns:1fr}
  .bento-visual-pair .phone{--w:220px}
  .life{grid-template-columns:1fr}
  .life-photo img{height:auto;aspect-ratio:3/2}
  .start{grid-template-columns:1fr;gap:56px}
  .faq{grid-template-columns:1fr;gap:32px}
  .faq-intro{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .nav{height:72px;gap:12px}
  .brand{gap:9px}
  .brand-icon{width:38px;height:38px;border-radius:11px}
  .wordmark{font-size:32px}
  .lang-link{min-width:40px;padding:0 8px}
  .label-long{display:none}
  .label-short{display:inline}
  .nav .button{padding:9px 16px;gap:8px}
  .hero h1{font-size:clamp(40px,11.4vw,54px)}
  .hero-lead{margin-top:22px;font-size:17px}
  .hero-actions{gap:10px;margin-top:28px}
  .store-button{min-height:58px;padding:9px 22px 9px 16px}
  .store-button strong{font-size:17px}
  .hero-phones{height:480px}
  .phone-main{--w:212px}
  .phone-side{--w:172px}
  .phone-left{transform:translate(calc(-50% - 96px),calc(-50% + 22px)) rotate(-8deg)}
  .phone-right{transform:translate(calc(-50% + 96px),calc(-50% + 22px)) rotate(8deg)}
  .float-card{gap:10px;max-width:236px;padding:9px 14px 9px 9px;border-radius:18px}
  .float-card strong{font-size:14px}
  .float-card small{font-size:12px}
  .float-icon{width:36px;height:36px;border-radius:12px}
  .float-icon .icon{width:19px;height:19px}
  .float-chip{padding:8px 14px 8px 10px;font-size:12.5px}
  .float-chip .icon{width:17px;height:17px}
  .float-nudge{left:0;top:2%}
  .float-confirm{top:auto;right:0;bottom:4%}
  .hero{padding-bottom:36px}
  .benefits{gap:4px;padding:10px;border-radius:24px}
  .benefits li{flex-direction:column;justify-content:flex-start;gap:10px;padding:12px 6px;font-size:14px;text-align:center}
  .section{padding-block:72px}
  .feature,.feature-reverse{padding:32px 22px 40px;border-radius:28px}
  .feature-label{gap:12px}
  .feature-label .hand{font-size:38px}
  .tile{width:44px;height:44px;border-radius:14px}
  .feature h3{font-size:30px}
  .feature-visual .phone{--w:232px}
  .float-recipe{left:0;bottom:10%}
  .float-reminder{right:0;top:12%}
  .bento-card{padding:32px 22px 0;border-radius:28px}
  .bento-card h3{font-size:28px}
  .bento-visual{height:330px;padding-top:36px}
  .bento-visual .phone{--w:236px}
  .bento-visual-pair{gap:12px}
  .bento-visual-pair .phone{--w:158px}
  .bento-visual-pair .phone:last-child{margin-top:36px}
  .life{border-radius:28px}
  .life-copy{padding:34px 24px 38px}
  .start-visual .phone{--w:250px}
  .float-families{left:0;bottom:8%}
  .steps>li{grid-template-columns:44px 1fr;gap:14px;padding:22px 20px 20px 18px;border-radius:24px}
  .step-num{width:44px;height:44px;font-size:18px}
  .steps h3{font-size:19px}
  .steps p{font-size:15px}
  .steps .step-note{font-size:23px}
  .faq-list summary{padding:16px 16px 16px 20px;font-size:16px}
  .faq-list summary .icon{width:32px;height:32px;padding:7px}
  .faq-list details>p{padding:0 20px 20px;font-size:15px}
  .download{padding:52px 22px 44px;border-radius:30px}
  .download-logo{width:72px;height:72px;border-radius:20px}
  .download .kicker{text-align:center}
  .download .kicker::before{display:none}
  .download>p:not(.kicker){font-size:16px}
  .store-buttons{flex-direction:column;align-items:center;gap:12px}
  .store-buttons .store-button{width:232px}
  .site-footer{padding-block:44px 30px}
  .footer-links{width:100%;margin-left:0}
}
@media (max-width:380px){
  .wordmark{font-size:29px}
  .brand-icon{width:34px;height:34px}
  .nav .button{padding:8px 14px}
  .hero-phones{height:430px}
  .phone-main{--w:190px}
  .phone-side{--w:154px}
  .phone-left{transform:translate(calc(-50% - 84px),calc(-50% + 20px)) rotate(-8deg)}
  .phone-right{transform:translate(calc(-50% + 84px),calc(-50% + 20px)) rotate(8deg)}
  .bento-visual-pair .phone{--w:140px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .site-header,.hero-visual,.float-card,.float-chip{display:none}
}