/* Website-only styles. Tokens, buttons, cards and chips come from app/shared/brand.css,
   so the site and the tools always look like one brand. */

@property --active { syntax: '<color>'; inherits: true; initial-value: #FF6B4A; }

html { scroll-behavior: smooth; }
/* The tilted marquee bands are wider than the screen on purpose; clip them so phones cannot pan sideways. */
/* clip, never hidden: hidden turns the body into its own scroll box, and the showcase picture
   (position: sticky) then scrolls away instead of following the text. */
html, body.site { overflow-x: clip; }
.progress { position: fixed; top: 0; left: 0; height: 5px; width: 100%; z-index: 60; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--tomato), var(--sun), var(--mint), var(--sky), var(--grape), var(--pink)); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 2px solid transparent; }
.nav.solid { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-color: var(--border); }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 72px; }
.nav .links { display: flex; gap: 6px; margin-left: auto; }
.nav .links a { font-weight: 750; text-decoration: none; padding: 8px 12px; border-radius: 99px; }
.nav .links a:hover { background: color-mix(in srgb, var(--sun) 35%, transparent); }
@media (max-width: 760px) { .nav .links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100vh - 72px); display: grid; place-items: center; text-align: center; padding: 40px 16px 90px; overflow: hidden; }
.hero .blob { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(1px); opacity: var(--blob-o, .55); animation: morph 14s ease-in-out infinite; z-index: 0; }
@keyframes morph { 50% { border-radius: 58% 42% 35% 65% / 55% 62% 38% 45%; transform: translate(30px, -20px) rotate(20deg) scale(1.08); } }
.hero-copy { position: relative; z-index: 2; max-width: 980px; }
.hero h1 { font-size: clamp(2.8rem, 9vw, 7rem); line-height: .95; letter-spacing: -.045em; font-weight: 950; }
.hero .swap { display: inline-block; position: relative; color: var(--ink); }
.hero .swap span { display: inline-block; padding: 0 .18em; border: 3px solid var(--border); border-radius: .25em; box-shadow: 6px 6px 0 var(--shadow-c); transform: rotate(-2deg); transition: background .4s; }
.hero .swap.flip span { animation: flip .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes flip { 0% { transform: rotateX(90deg) rotate(-2deg); opacity: 0; } 100% { transform: rotateX(0) rotate(-2deg); opacity: 1; } }
.hero .lead { font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--ink-2); max-width: 680px; margin: 26px auto 34px; }
.hero .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .ctas .btn { font-size: 1.1rem; padding: 15px 26px; min-height: 58px; }
.hero .note { margin-top: 18px; font-size: .92rem; color: var(--ink-3); font-weight: 700; }
.sticker {
  position: absolute; z-index: 1; width: 86px; height: 86px; display: grid; place-items: center; font-size: 2.6rem;
  background: var(--c); border: 3px solid var(--border); border-radius: 26px; box-shadow: 5px 5px 0 var(--shadow-c);
  transition: transform .2s ease-out; will-change: transform;
}
.sticker:hover { animation: wiggle .6s ease; }
@media (max-width: 760px) { .sticker { width: 58px; height: 58px; font-size: 1.7rem; border-radius: 18px; } }
@media (max-width: 720px) { .scroll-hint { display: none; } }
.scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-weight: 800; color: var(--ink-3); animation: float 2s ease-in-out infinite; z-index: 2; }

/* ---------- marquee ---------- */
.marquee { border-block: 3px solid var(--border); background: var(--ink); color: var(--bg); overflow: hidden; transform: rotate(-2deg) scale(1.04); margin: 10px 0 70px; }
.marquee.alt { background: var(--sun); color: var(--on-app); transform: rotate(1.5deg) scale(1.04); margin-top: -64px; }
.marquee .track { display: flex; gap: 46px; padding: 16px 0; width: max-content; animation: slide 40s linear infinite; font-weight: 900; font-size: 1.4rem; white-space: nowrap; }
.marquee.alt .track { animation-direction: reverse; animation-duration: 50s; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- showcase (sticky scrollytelling) ---------- */
.showcase { --active: var(--tomato); background: color-mix(in srgb, var(--active) 16%, var(--bg)); transition: --active .6s ease; padding: 40px 0 80px; }
.showcase-head { text-align: center; padding: 40px 16px 30px; }
.showcase-head h2, .section h2.big { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.035em; }
.showcase-head p, .section .lead { color: var(--ink-2); font-size: 1.15rem; margin-top: 10px; }
.story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: 0; } }
.stage { position: sticky; top: 110px; height: min(520px, calc(100vh - 150px)); }
@media (max-width: 900px) { .stage { top: 80px; height: 330px; z-index: 3; margin-bottom: 30px; } }
.mock { height: 100%; background: var(--surface); border: 3px solid var(--border); border-radius: 24px; box-shadow: 10px 10px 0 var(--shadow-c); overflow: hidden; display: flex; flex-direction: column; }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 3px solid var(--border); background: var(--active); transition: background .5s; }
.mock-bar i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); }
.mock-bar b { margin-left: 10px; color: var(--on-app); }
.scenes { position: relative; flex: 1; background-image: radial-gradient(var(--dots) 1.2px, transparent 1.6px); background-size: 20px 20px; }
.scene { position: absolute; inset: 0; padding: 26px; display: grid; place-items: center; opacity: 0; transform: translateY(30px) scale(.94) rotate(-1deg); transition: opacity .45s, transform .6s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.panels { padding: 6vh 0 20vh; }
.panel { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transform: translateX(30px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.panel.on { opacity: 1; transform: none; }
@media (max-width: 900px) { .panel { min-height: 46vh; } }
.panel .em { font-size: 3rem; width: 84px; height: 84px; display: grid; place-items: center; background: var(--c); border: 3px solid var(--border); border-radius: 24px; box-shadow: 5px 5px 0 var(--shadow-c); margin-bottom: 18px; }
.panel h3 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); letter-spacing: -.03em; }
.panel p { font-size: 1.15rem; color: var(--ink-2); margin: 10px 0 16px; max-width: 480px; }
.panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
.panel li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--c); border: 2px solid var(--border); font-size: .75rem; color: var(--on-app); }

/* scene contents: little moving pictures of each tool */
.paper-mini { width: min(320px, 90%); background: #fff; color: #1E1B2E; border: 2px solid var(--border); border-radius: 10px; padding: 22px; position: relative; box-shadow: var(--shadow); }
.paper-mini::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--tomato); border-radius: 8px 8px 0 0; }
.paper-mini .t { font-weight: 950; font-size: 1.4rem; color: var(--tomato); text-align: right; }
.ln { height: 9px; border-radius: 9px; background: #ECE8F2; margin: 9px 0; }
.pill { margin-top: 14px; background: var(--tomato); color: var(--on-app); font-weight: 900; padding: 9px 12px; border-radius: 10px; display: flex; justify-content: space-between; }
.stamp { position: absolute; right: 18px; top: 70px; border: 4px solid var(--mint); color: #138a5a; font-weight: 950; font-size: 1.6rem; padding: 2px 12px; border-radius: 10px; transform: rotate(-14deg) scale(2); opacity: 0; }
.on .stamp { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) .7s forwards; }
@keyframes stamp { to { transform: rotate(-14deg) scale(1); opacity: 1; } }
.avs { display: flex; flex-direction: column; gap: 12px; width: min(320px, 90%); }
.avs div { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-sm); opacity: 0; transform: translateX(-30px); }
.on .avs div { animation: inLeft .5s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.on .avs div:nth-child(2) { animation-delay: .12s; } .on .avs div:nth-child(3) { animation-delay: .24s; }
@keyframes inLeft { to { opacity: 1; transform: none; } }
.ring { width: 210px; height: 210px; border-radius: 50%; border: 3px solid var(--border); display: grid; place-items: center; background: conic-gradient(var(--mint) var(--p, 0%), var(--surface) 0); box-shadow: var(--shadow); }
.ring .inner { width: 160px; height: 160px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border); display: grid; place-items: center; font: 900 1.7rem var(--mono); }
.slips { position: relative; width: 300px; height: 240px; }
.slip { position: absolute; width: 150px; background: #fff; color: #1E1B2E; border: 2px solid var(--border); border-radius: 6px; padding: 12px; font-size: .78rem; box-shadow: var(--shadow-sm); opacity: 0; }
.slip b { display: block; font-size: 1rem; }
.on .slip { animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes drop { from { opacity: 0; transform: translateY(-80px) rotate(var(--r)); } to { opacity: 1; transform: rotate(var(--r)); } }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 220px; width: min(360px, 92%); border-bottom: 2px solid var(--hair); padding: 0 6px; }
.bars span { flex: 1; border: 2px solid var(--border); border-bottom: 0; border-radius: 5px 5px 0 0; height: var(--h); transform-origin: bottom; transform: scaleY(0); transition: transform .7s cubic-bezier(.2, 1.3, .4, 1); }
.on .bars span { transform: none; }
.bars span:nth-child(odd) { background: var(--series-in); } .bars span:nth-child(even) { background: var(--series-out); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(380px, 95%); position: relative; }
.cols > div { background: color-mix(in srgb, var(--c) 18%, var(--surface)); border: 2px solid var(--border); border-radius: 12px; padding: 8px; min-height: 170px; font-size: .72rem; font-weight: 800; }
.cols i { display: block; height: 30px; border-radius: 8px; border: 2px solid var(--border); background: var(--surface); margin-top: 8px; }
.cols .mover { position: absolute; left: 8px; top: 66px; width: calc(33.3% - 22px); background: var(--sun); }
.on .cols .mover { animation: moveCard 3s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes moveCard { 0%, 15% { transform: none; } 45%, 60% { transform: translateX(calc(100% + 26px)) rotate(4deg); } 90%, 100% { transform: translateX(calc(200% + 52px)); } }
.letter { width: min(300px, 90%); background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 22px; box-shadow: var(--shadow); }
.letter .ln { width: 0; transition: width .5s ease; }
.on .letter .ln { width: var(--w); }
.on .letter .ln:nth-child(2) { transition-delay: .15s; } .on .letter .ln:nth-child(3) { transition-delay: .3s; } .on .letter .ln:nth-child(4) { transition-delay: .45s; } .on .letter .ln:nth-child(5) { transition-delay: .6s; } .on .letter .ln:nth-child(6) { transition-delay: .75s; }
.fan { position: relative; width: 300px; height: 220px; }
.fan span { position: absolute; left: 110px; top: 20px; width: 80px; height: 170px; border: 2px solid var(--border); border-radius: 14px; transform-origin: 50% 90%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); box-shadow: var(--shadow-sm); }
.on .fan span:nth-child(1) { transform: rotate(-36deg); } .on .fan span:nth-child(2) { transform: rotate(-18deg); } .on .fan span:nth-child(4) { transform: rotate(18deg); } .on .fan span:nth-child(5) { transform: rotate(36deg); }
.subs-mini { display: flex; flex-direction: column; gap: 10px; width: min(320px, 90%); }
.subs-mini div { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 10px 14px; font-weight: 800; box-shadow: var(--shadow-sm); }
.on .subs-mini .chip { animation: wiggle 1s ease 1s 2; }
.roadway { width: 100%; height: 80px; position: relative; border-block: 3px solid var(--border); background: #3a3650; }
.roadway::after { content: ""; position: absolute; left: 0; right: 0; top: 37px; height: 6px; background: repeating-linear-gradient(90deg, #FFC93C 0 26px, transparent 26px 46px); animation: road .6s linear infinite; }
@keyframes road { to { background-position: -46px 0; } }
.roadway .car { position: absolute; top: 4px; font-size: 3.2rem; transform: scaleX(-1); left: -20%; }
.on .roadway .car { animation: drive 3.6s ease-in-out infinite; }
@keyframes drive { 0% { left: -20%; } 100% { left: 110%; } }
.km { font: 900 2.4rem var(--mono); margin-top: 18px; text-align: center; }
.boxes { display: grid; grid-template-columns: repeat(3, 90px); gap: 12px; }
.boxes div { height: 100px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); display: grid; place-items: center; font-size: 2rem; box-shadow: var(--shadow-sm); }
.boxes div b { font-size: 1.1rem; }
.boxes .low { border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 15%, var(--surface)); }
.on .boxes div { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.on .boxes div:nth-child(2) { animation-delay: .1s; } .on .boxes div:nth-child(3) { animation-delay: .2s; } .on .boxes div:nth-child(4) { animation-delay: .3s; } .on .boxes div:nth-child(5) { animation-delay: .4s; } .on .boxes div:nth-child(6) { animation-delay: .5s; }

/* ---------- generic sections ---------- */
.section { padding: 100px 0; position: relative; }
.section .center { text-align: center; max-width: 760px; margin: 0 auto 50px; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s, transform .8s cubic-bezier(.2, 1.2, .4, 1); }
.reveal.from-left { transform: translateX(-60px) rotate(-3deg); }
.reveal.from-right { transform: translateX(60px) rotate(3deg); }
.reveal.pop { transform: scale(.7) rotate(-6deg); }
.reveal.shown { opacity: 1; transform: none; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 30px 26px; position: relative; }
.step .num { position: absolute; top: -26px; left: 22px; width: 58px; height: 58px; display: grid; place-items: center; font-size: 1.8rem; font-weight: 950; background: var(--c); border: 3px solid var(--border); border-radius: 18px; box-shadow: 4px 4px 0 var(--shadow-c); }
.step .big-e { font-size: 3rem; margin: 10px 0; display: block; }
.step h3 { font-size: 1.35rem; margin-bottom: 8px; }
.step p { color: var(--ink-2); }
.dark-band { background: #1E1B2E; color: #F7F2E8; --ink: #F7F2E8; --ink-2: #C2BCD6; --ink-3: #8580A0; --surface: #2A2638; --border: #F7F2E8; --shadow-c: #000; --dots: rgba(255,255,255,.06); background-image: radial-gradient(var(--dots) 1.2px, transparent 1.6px); background-size: 22px 22px; }
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 860px) { .privacy-grid { grid-template-columns: 1fr; } }
.vault { position: relative; height: 340px; display: grid; place-items: center; }
.vault .folder { font-size: 9rem; filter: drop-shadow(6px 6px 0 #000); animation: float 4s ease-in-out infinite; }
.vault .file { position: absolute; font-size: 2.2rem; animation: orbit 9s linear infinite; }
@keyframes orbit { from { transform: rotate(0deg) translateX(140px) rotate(0deg); } to { transform: rotate(360deg) translateX(140px) rotate(-360deg); } }
.vault .no { position: absolute; right: 4%; top: 6%; background: var(--tomato); color: #1E1B2E; border: 3px solid #F7F2E8; border-radius: 16px; padding: 8px 14px; font-weight: 900; transform: rotate(8deg); }
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 1.1rem; margin-top: 24px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks li span { font-size: 1.4rem; }
.soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.soon-card { padding: 24px; position: relative; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.soon-card:hover { transform: translateY(-6px) rotate(-1deg); }
.soon-card .e { font-size: 2.6rem; display: block; margin-bottom: 10px; }
.soon-card .chip { position: absolute; top: -12px; right: 16px; transform: rotate(5deg); }
.soon-card p { color: var(--ink-2); margin-top: 6px; }
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow-sm); }
.faq summary { font-weight: 850; font-size: 1.08rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "＋"; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--ink-2); }
.final { text-align: center; padding: 120px 16px; background: var(--sun); border-top: 3px solid var(--border); position: relative; overflow: hidden; color: #1E1B2E; --ink: #1E1B2E; --ink-2: #3c3852; }
.final h2 { font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -.04em; }
.final .btn { font-size: 1.2rem; padding: 16px 30px; min-height: 62px; margin-top: 30px; background: var(--ink); color: #FFF6E9; }
.footer { padding: 40px 0 60px; font-size: .92rem; color: var(--ink-2); }
.footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer a { font-weight: 700; }

/* ---------- ad slots (AdSense on the website only) ---------- */
.ad-slot { max-width: 970px; margin: 0 auto; padding: 20px 16px; text-align: center; }
.ad-slot .lbl { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.ad-slot .placeholder { border: 2px dashed var(--ink-3); border-radius: 16px; padding: 30px; color: var(--ink-3); font-weight: 750; }

/* ---------- simple pages ---------- */
.page { max-width: 820px; margin: 0 auto; padding: 50px 16px 80px; }
.page h1 { margin-bottom: 16px; }
.page h2 { margin: 34px 0 10px; }
.page p, .page li { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 10px; }
.dl-card { padding: 30px; text-align: center; margin: 30px 0; }
.dl-card .btn { font-size: 1.15rem; padding: 15px 28px; min-height: 58px; }
.how { counter-reset: s; list-style: none; padding: 0; }
.how li { counter-increment: s; position: relative; padding-left: 54px; margin-bottom: 20px; }
.how li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; display: grid; place-items: center; font-weight: 950; background: var(--sun); color: #1E1B2E; border: 2px solid var(--border); border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .panel { opacity: 1 !important; transform: none !important; }
  /* The gentle version. brand.css stops every animation for Reduce motion (stickers, bands and the
     movement inside the scenes stay still); two things fade instead of moving, because a fade is
     change without motion: the headline word, and the showcase picture as you scroll. */
  .hero .swap.fade span { animation: fadeWord .6s ease !important; }
  .showcase .scene { transform: none !important; transition: opacity .45s ease !important; }
}
@keyframes fadeWord { from { opacity: 0; } to { opacity: 1; } }

/* ---------- accessibility ---------- */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 800; }
.skip:focus { left: 16px; }

/* ---------- footer sitemap ---------- */
.footer.sitemap { border-top: 2px solid var(--border); background: var(--surface); padding: 50px 0 60px; margin-top: 0; }
.footer.sitemap .wrap { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 760px) { .footer.sitemap .wrap { grid-template-columns: 1fr; } }
.footer.sitemap ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.footer.sitemap a { text-decoration: none; font-weight: 650; }
.footer.sitemap a:hover { text-decoration: underline; }
.footer.sitemap p { margin-top: 10px; font-size: .9rem; }

/* ---------- product pages ---------- */
.tool-hero { position: relative; overflow: hidden; padding: 40px 0 70px; }
.tool-hero .blob { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; opacity: .35; animation: morph 14s ease-in-out infinite; }
.tool-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .tool-hero-grid { grid-template-columns: 1fr; } }
.tool-hero h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); letter-spacing: -.04em; line-height: 1; margin: 6px 0 16px; }
.tool-hero .lead { font-size: 1.15rem; color: var(--ink-2); max-width: 560px; }
.tool-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; }
.tool-hero .note { color: var(--ink-3); font-weight: 700; font-size: .9rem; }
.crumbs { display: inline-block; font-weight: 750; text-decoration: none; color: var(--ink-2); margin-bottom: 18px; }
.kicker { font-weight: 850; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-top: 16px; }
.em.big { font-size: 3rem; width: 92px; height: 92px; display: grid; place-items: center; background: var(--c); border: 3px solid var(--border); border-radius: 26px; box-shadow: 5px 5px 0 var(--shadow-c); animation: float 4s ease-in-out infinite; }
.stage.solo { position: relative; top: 0; height: 380px; }
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.feat { padding: 22px; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.feat:hover { transform: translateY(-4px) rotate(-.6deg); }
.feat .fe { font-size: 2rem; display: block; margin-bottom: 8px; }
.feat h3 { font-size: 1.15rem; margin-bottom: 6px; }
.feat p { color: var(--ink-2); }
.section.tint { background: color-mix(in srgb, var(--c) 14%, var(--bg)); border-block: 2px solid var(--border); }
.step h3 { margin-top: 18px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.checks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checks-list li { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 12px 16px 12px 50px; position: relative; font-weight: 700; box-shadow: var(--shadow-sm); }
.checks-list li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--app); border: 2px solid var(--border); font-size: .8rem; color: var(--on-app); }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.rel-grid.all { padding-bottom: 40px; }
.rel { display: flex; flex-direction: column; gap: 6px; padding: 22px; text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; }
.rel::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--c); opacity: .25; transition: transform .5s; }
.rel:hover { transform: translate(-4px, -4px) rotate(-1deg); box-shadow: 8px 8px 0 var(--shadow-c); }
.rel:hover::after { transform: scale(1.6); }
.rel .em { font-size: 2.2rem; }
.rel b { font-size: 1.15rem; }
.rel small { color: var(--ink-2); }
.rel .go { margin-top: 8px; font-weight: 800; }
.ghost-light { background: transparent !important; color: #1E1B2E !important; }

/* ---------- homepage additions ---------- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: -20px auto 60px; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr 1fr; } }
.proof div { text-align: center; padding: 18px 10px; }
.proof b { display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 950; letter-spacing: -.03em; }
.proof small { color: var(--ink-2); font-weight: 700; }
.panel .more { display: inline-block; margin-top: 16px; font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--c); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; position: relative; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; gap: 18px; } }
.flow .card { padding: 22px; margin: 0 10px; position: relative; text-align: center; }
.flow .card .e { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.flow .card p { color: var(--ink-2); font-size: .95rem; }
.flow .card:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 900; z-index: 2; }
@media (max-width: 860px) { .flow .card:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -26px; transform: translateX(50%); } }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .who { grid-template-columns: 1fr; } }
.who .card { padding: 26px; }
.who .e { font-size: 2.6rem; }
.who h3 { font-size: 1.3rem; margin: 10px 0 6px; }
.who p { color: var(--ink-2); }
.who .tools { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.who .tools a { font-size: .82rem; font-weight: 750; text-decoration: none; padding: 3px 10px; border: 1.5px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; padding: 30px; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .calc .opts { grid-template-columns: 1fr; } }
.calc label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--hair); border-radius: 12px; cursor: pointer; font-weight: 700; transition: border-color .2s, background .2s; }
.calc label:has(input:checked) { border-color: var(--border); background: color-mix(in srgb, var(--sun) 25%, var(--surface)); }
.calc input { width: 18px; height: 18px; accent-color: var(--ink); }
.calc label span { flex: 1; }
.calc label small { color: var(--ink-2); }
.calc .result { text-align: center; }
.calc .result .big { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 950; letter-spacing: -.04em; display: block; line-height: 1; margin: 8px 0; }
.calc .result small { color: var(--ink-2); }

/* ---------- Two ways to grow: the free toolbox or Olaf ---------- */
.hero-olaf { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; padding: 8px 16px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-weight: 650; transition: transform .2s; }
.hero-olaf:hover { transform: translate(-1px, -2px); }
@media (max-width: 640px) { .hero-olaf { max-width: 100%; border-radius: 18px; font-size: .92rem; text-align: center; } }
.hero-olaf .chip { transform: rotate(-4deg); }
.paths { display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.path { position: relative; padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.path > .chip { position: absolute; top: -14px; right: 20px; transform: rotate(4deg); }
.path .e { font-size: 2.6rem; line-height: 1; }
.path h3 { font-size: 1.45rem; line-height: 1.2; }
.path .path-sub { color: var(--ink-2); font-weight: 650; }
.path ul { list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-direction: column; gap: 9px; }
.path li { padding-left: 28px; position: relative; color: var(--ink-2); }
.path li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); color: #1E1B2E; font-size: .75rem; font-weight: 900; display: grid; place-items: center; border: 2px solid var(--border); }
.path li b { color: var(--ink); }
.path .price { margin-top: auto; padding-top: 8px; }
.path .price b { font-size: 2rem; font-weight: 900; }
.path .btn { align-self: flex-start; }
.path .fine { font-size: .88rem; color: var(--ink-3); }
.path.featured { background: color-mix(in srgb, var(--sun) 22%, var(--surface)); box-shadow: 7px 7px 0 var(--shadow-c); }
.path.featured li::before { background: var(--sun); }
.path.featured .btn-primary { --app: var(--grape); --on-app: #fff; }
.cmp { max-width: 1040px; margin: 34px auto 0; overflow-x: auto; border: 2px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.cmp table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.cmp thead th { font-weight: 850; background: color-mix(in srgb, var(--sun) 16%, var(--surface)); }
.cmp thead th:last-child { background: color-mix(in srgb, var(--sun) 34%, var(--surface)); }
.cmp td:first-child { font-weight: 700; color: var(--ink); width: 38%; }
.cmp td { color: var(--ink-2); }
.cmp tr:last-child td { border-bottom: none; }
.final-olaf { margin-top: 18px; font-weight: 650; }
.final-olaf a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 820px) { .paths { grid-template-columns: 1fr; } }
.olaf-strip { margin: 10px auto 60px; }
.olaf-strip .card { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: color-mix(in srgb, var(--sun) 20%, var(--surface)); }
.olaf-strip .e { font-size: 2.2rem; }
.olaf-strip p { color: var(--ink-2); margin-top: 2px; }
.olaf-strip .btn { margin-left: auto; }
@media (max-width: 640px) { .olaf-strip .card { flex-direction: column; align-items: flex-start; } .olaf-strip .btn { margin-left: 0; } }
.dl-olaf { display: flex; gap: 16px; align-items: center; padding: 20px 22px; margin: 34px 0 10px; background: color-mix(in srgb, var(--sun) 20%, var(--surface)); }
.dl-olaf .e { font-size: 2.2rem; }
.dl-olaf p { color: var(--ink-2); margin-top: 4px; }
@media (max-width: 640px) { .dl-olaf { flex-direction: column; align-items: flex-start; } }

/* ---------- Olaf page ---------- */
.olaf-mock { padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: .92rem; }
.olaf-mock .om-title { font-weight: 850; font-size: 1.05rem; }
.olaf-mock .om-stages { display: flex; gap: 6px; }
.olaf-mock .om-stages span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; border: 2px solid var(--border); background: var(--surface); }
.olaf-mock .om-stages .done { background: var(--mint); }
.olaf-mock .om-stages .now { background: var(--grape); color: #fff; }
.olaf-mock .om-h { font-weight: 800; color: var(--ink-2); margin-top: 4px; }
.olaf-mock ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.olaf-mock li { padding-left: 24px; position: relative; color: var(--ink-2); }
.olaf-mock li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--border); }
.olaf-mock li.done { text-decoration: line-through; }
.olaf-mock li.done::before { background: var(--mint); }
.olaf-mock .om-bubble { background: color-mix(in srgb, var(--grape) 16%, var(--surface)); border: 2px solid var(--border); border-radius: 14px; padding: 10px 12px; font-weight: 650; }
.steps.six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps.six { grid-template-columns: 1fr; } }
.sk-groups { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.sk-group { padding: 0; overflow: hidden; }
.sk-group summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 1.08rem; }
.sk-group summary small { color: var(--ink-3); font-weight: 700; }
.sk-group ul { list-style: none; margin: 0; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.sk-group li { display: flex; flex-direction: column; border-top: 1px solid var(--hair); padding-top: 10px; }
.sk-group li span { color: var(--ink-2); font-size: .95rem; }
.get-olaf { display: flex; gap: 18px; align-items: flex-start; padding: 26px 28px; max-width: 860px; margin: 0 auto; background: color-mix(in srgb, var(--grape) 14%, var(--surface)); }
.get-olaf .e { font-size: 2.6rem; }
.get-olaf p { color: var(--ink-2); margin-top: 8px; }
@media (max-width: 640px) { .get-olaf { flex-direction: column; } }

/* Dark mode: softer hero colours, so the headline stays the loudest thing. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { --blob-o: .3; } }
:root[data-theme="dark"] .hero { --blob-o: .3; }
/* The detailed comparison folds away on phones; it is always open on wider screens. */
.cmp-details > summary { display: none; }
@media (max-width: 700px) {
  .cmp-details > summary { display: block; cursor: pointer; text-align: center; font-weight: 800; margin: 26px auto 0; padding: 12px 18px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); width: max-content; max-width: 100%; }
  .cmp-details[open] > summary { margin-bottom: 0; }
}

/* The Olaf waitlist */
.waitlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 14px; align-items: end; }
.waitlist .wl-field { display: flex; flex-direction: column; gap: 4px; font-weight: 750; font-size: .92rem; }
.waitlist .wl-field em { font-weight: 500; color: var(--ink-3); font-style: normal; }
.waitlist .wl-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); }
.waitlist .wl-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--grape); }
.waitlist .btn, .waitlist .wl-msg, .waitlist small { grid-column: 1 / -1; justify-self: start; }
.waitlist .wl-msg { margin: 0; font-weight: 750; min-height: 1.2em; }
.waitlist .wl-msg.ok { color: var(--mint-ink, #1b8a5a); }
.waitlist .wl-msg.err { color: var(--tomato); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) { .waitlist { grid-template-columns: 1fr; } }
/* Olaf's colour on the website: grape, with the compass. */
.btn-olaf { background: var(--grape); color: #fff; }
.soon-card.now { text-decoration: none; color: inherit; background: color-mix(in srgb, var(--grape) 16%, var(--surface)); border-color: var(--border); }
.soon-card.now .chip { transform: rotate(5deg); }
.olaf-hero-mark { display: block; width: 96px; height: 96px; margin-bottom: 10px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.08)); }
.cmp.vs { max-width: 1040px; }
.cmp.vs thead th:nth-child(2), .cmp.vs td:nth-child(2) { background: color-mix(in srgb, var(--grape) 14%, var(--surface)); font-weight: 750; color: var(--ink); }
.cmp.vs thead th:last-child { background: color-mix(in srgb, var(--sun) 16%, var(--surface)); }
.get-list { list-style: none; padding: 0; margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.get-list li { padding-left: 26px; position: relative; color: var(--ink); font-weight: 650; }
.get-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--grape); color: #fff; font-size: .7rem; font-weight: 900; display: grid; place-items: center; }

/* Project Planner scene: a small timeline whose last bars slide along when an earlier one moves */
.mini-gantt { position: relative; width: 100%; display: flex; flex-direction: column; gap: 8px; font-size: .72rem; font-weight: 800; }
.mini-gantt > div { position: relative; height: 22px; }
.mini-gantt > div span { display: inline-block; padding: 3px 0; }
.mini-gantt i { position: absolute; top: 2px; height: 18px; left: var(--l); width: var(--w); background: var(--c); border: 2px solid var(--border); border-radius: 7px; }
.on .mini-gantt i.slide { animation: ganttSlide 3.2s cubic-bezier(.6, 0, .3, 1) infinite; }
.mini-gantt .today { position: absolute; top: 0; bottom: 0; left: 46%; width: 2px; background: var(--tomato); }
@keyframes ganttSlide { 0%, 30% { transform: translateX(0); } 50%, 80% { transform: translateX(14%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .on .mini-gantt i.slide { animation: none; } }