/* Kanvo skin: the homepage's look (one motif, the lime dot) over every marketing page.
   Loaded last, after landing.css and tools.css. It restyles; it does not move layouts. */
:root{--field:#0F2A1F;--deep:#0B3D2E;--lime:#B9EC6E;--soft:#4F6057;--soft-dark:#A9BDB2;--on-dark:#fff;--m:clamp(16px,3.2vw,48px);--ease:cubic-bezier(.23,1,.32,1)}
::selection{background:var(--lime);color:var(--ink)}
html{scrollbar-color:#9FB5A8 var(--bg);caret-color:var(--brand)}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
p{text-wrap:pretty}

/* Bar: wordmark, a few links, one action, on the dark field. */
.bar{display:flex;align-items:center;gap:32px;padding:20px var(--m);background:var(--field);color:var(--on-dark);position:relative;z-index:20}
.wordmark{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.035em;text-decoration:none;color:var(--on-dark)}
.wordmark i{width:34px;height:34px;border-radius:10px;background:url(/assets/kanvo-mark.svg) center/cover;flex:none}
.bar nav{display:flex;gap:28px;margin-left:16px}
.bar nav a{text-decoration:none;font-size:16px;font-weight:600;color:var(--soft-dark);transition:color .15s ease}
.bar nav a:hover{color:var(--on-dark)}
.bar-acts{margin-left:auto;display:flex;align-items:center;gap:24px}
.link-plain{font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;transition:color .15s ease}
.bar-acts .link-plain{color:var(--on-dark);text-decoration:none}
.bar-acts .link-plain:hover{color:var(--lime)}

/* Buttons: fully round with the dot. Ink with a lime dot on light ground; lime on the dark field. */
.btn,.btn.primary{height:52px;padding:0 28px;border-radius:999px;border:0;background:var(--field);color:var(--on-dark);box-shadow:none;gap:10px;font-weight:700;font-size:16px}
.btn::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);flex:none}
.btn:hover,.btn.primary:hover{background:var(--deep);border-color:transparent}
.btn.sm{height:44px;padding:0 20px;font-size:16px}
/* the second action reads as a quieter pill, no dot */
.btn:where(:not(.primary):not(.dark):not(.light):not(.ghost)){background:var(--card);color:var(--ink)}
.btn:where(:not(.primary):not(.dark):not(.light):not(.ghost))::before{display:none}
.btn:where(:not(.primary):not(.dark):not(.light):not(.ghost)):hover{background:var(--card-2)}
.bar .btn,.foot .btn,.plan.pop .btn,.flow .btn{background:var(--lime);color:var(--ink)}
.bar .btn::before,.foot .btn::before,.plan.pop .btn::before,.flow .btn::before{display:block;background:var(--ink)}
.bar .btn:hover,.foot .btn:hover,.plan.pop .btn:hover{background:#CBF38E}

/* Headlines: one face, one colour; the words carry the emphasis. Small labels above headings are gone. */
.hero h1 span,.tool-hero h1 span,.h-hero h1 span,h1 span{color:inherit}
.eyebrow,.tag,.kicker{display:none}
h1,h2,h3{letter-spacing:-.035em}
.hero h1,.tool-hero h1,.h-hero h1,.legal h1{font-weight:800}

/* Heroes keep their layout; the lime dot sits in the corner. */
.hero.for-hero,.tool-hero,.h-hero{position:relative;isolation:isolate;overflow:clip}
@media (min-width:1081px){
  .hero.for-hero::before,.tool-hero::before,.h-hero::before{content:"";position:absolute;z-index:-1;width:26vw;height:26vw;border-radius:50%;background:var(--lime);top:-12vw;right:-9vw;pointer-events:none}
}
.tool-hero .badges span{background:none;border:0;padding:0;font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.tool-hero .badges span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--brand)}
.tool-hero .badges{gap:18px}

/* Surfaces: separated by tone, not by lines or shadows. */
.pro,.pill,.plan,.tile,.step,.kit-card,.apply-card,.h-topic,.h-art,.tcard,.tool-list>a,.tool-list>div,.perks>*,.compare,.teams-in,.price-strip,.chip-btn,.h-search,.legal>.wrap>article{border-color:transparent;box-shadow:none}
details{border-color:transparent;box-shadow:none}
.shot{border:0;box-shadow:none;border-radius:24px}
.phone{box-shadow:none}
.pro:hover,.pill:hover,.h-topic:hover,.chip-btn:hover{border-color:transparent;background:var(--card)}
@media (hover:hover) and (pointer:fine){.pro:hover,.pill:hover,.h-topic:hover{background:#fff}}
.plan.pop .badge{background:var(--lime);color:var(--ink)}
.plan li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:.55em;flex:none}
.plan.pop li::before{background:var(--lime)}
.plan li.off::before{background:#C9D7CF}

/* Closing band: the dot, stretched into a stadium. */
.final{background:var(--lime);color:var(--ink);border-radius:999px;padding:clamp(56px,7vw,96px) clamp(28px,8vw,120px)}
.final p{opacity:1}
.final .btn.light{background:var(--field);color:var(--on-dark)}
.final .btn.light::before{display:block;background:var(--lime)}
.final .btn.light:hover{background:var(--deep)}
.final .btn.ghost{background:transparent;color:var(--ink);border:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;padding:0 12px}
.final .btn.ghost::before{display:none}
@media (max-width:760px){.final{border-radius:40px;padding:48px 24px}}

/* Footer: the name returns at full width, with its dot. */
.foot{background:var(--field);color:var(--on-dark);padding:clamp(56px,7vw,96px) var(--m) 32px;margin-top:clamp(80px,9vw,140px);border:0}
.foot-mark{display:flex;align-items:flex-end;gap:.06em;font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(88px,23vw,380px);letter-spacing:-.06em;line-height:.8;margin:0}
.foot-mark i{width:.2em;height:.2em;border-radius:50%;background:var(--lime);margin-bottom:.04em;flex:none}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.3fr;gap:32px;margin-top:72px}
.foot-cols h3{font-size:16px;font-weight:700;letter-spacing:0;color:var(--soft-dark);margin-bottom:14px}
.foot-cols nav,.foot-contact{display:flex;flex-direction:column;gap:10px}
.foot-cols a{font-size:16px;text-decoration:none;color:var(--on-dark);transition:color .15s ease}
.foot-cols a:hover{color:var(--lime)}
.foot-last{display:flex;justify-content:space-between;align-items:center;margin-top:72px;font-size:14px;color:var(--soft-dark)}

/* Cursor dot: the logo's dot follows the mouse (added by landing.js on fine pointers). */
.cursor{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);pointer-events:none;z-index:100;opacity:0;
  transition:opacity .2s ease,width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background-color .2s ease}
.cursor.on{opacity:1}
.cursor.big{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(185,236,110,.25)}

@media (max-width:1080px){.bar nav{display:none}.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .bar{padding:10px var(--m);gap:12px}.bar-acts{gap:16px}.bar-acts .link-plain{display:none}
  .wordmark{font-size:20px;gap:8px}.wordmark i{width:28px;height:28px;border-radius:8px}
  .bar .btn{height:38px;padding:0 16px;font-size:14px}.btn::before{width:8px;height:8px}
  .foot-mark{font-size:24vw}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:48px}
  .foot-contact{grid-column:1/3}.foot-last{margin-top:48px}
}
@media (pointer:coarse){.foot-cols a{padding:4px 0}}

/* Phone menu (2026-10-23): every page can reach Features, Pricing, Help and Sign in. */
.menu-b{display:none;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.1);flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:none;transition:background-color .15s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.menu-b i{display:block;width:16px;height:2px;border-radius:2px;background:#fff;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.menu-b:active{transform:scale(.94)}
.menu-b[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-b[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{position:fixed;left:0;right:0;bottom:0;top:var(--barh,58px);z-index:40;background:#0F2A1F;color:#fff;padding:20px var(--m) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:auto}
.mmenu[hidden]{display:none}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{padding:14px 0;font-size:24px;font-weight:800;letter-spacing:-.03em;text-decoration:none;color:#fff;display:flex;align-items:center;gap:12px}
.mmenu nav a::before{content:"";width:8px;height:8px;border-radius:50%;background:#B9EC6E;flex:none}
.mmenu-acts{margin-top:auto;display:flex;flex-direction:column;gap:16px;padding-top:28px}
.mmenu-acts .btn{justify-content:center;background:#B9EC6E;color:#0E1C15}
.mmenu-acts .btn::before{background:#0E1C15}
.mmenu-acts .link-plain{color:#fff;text-align:center;font-size:16px}
@media (max-width:1080px){.menu-b{display:inline-flex}}
@media (max-width:760px){.bar-acts{gap:10px}.bar{gap:10px}}
@media (prefers-reduced-motion:no-preference){.mmenu:not([hidden]){transition:opacity .2s ease,translate .25s cubic-bezier(.23,1,.32,1);@starting-style{opacity:0;translate:0 -8px}}}
body.menu-open{overflow:hidden}

/* Pricing comparison, compare pages, security, contact, changelog (2026-10-23) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-s,.fits-s,.pc-s,.pick-s{padding:clamp(56px,7vw,96px) 0 0}
.cmp-s .sec-h,.fits-s .sec-h{margin-bottom:10px}
.cmp-date{margin-top:20px;font-size:14px;color:var(--muted)}
.cmp-date a{color:var(--brand-2)}
.f-help{display:inline-block;margin-top:14px;font-weight:700;color:var(--brand-2);text-decoration:none}
.f-help::after{content:" →"}
.cmp-teaser{text-align:center}.cmp-teaser a{color:var(--brand-2);font-weight:700}
/* which plan fits */
.fits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.fit{background:#fff;border-radius:20px;padding:24px}
.fit-who{font-size:14px;color:var(--muted);font-weight:600}
.fit h3{font-size:24px;margin-top:6px}
.fit p:last-child{margin-top:8px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
/* plan comparison table */
.cmp{margin-top:28px;background:#fff;border-radius:22px;padding:8px 24px 16px;overflow:hidden}
.cmp-pick{display:none}
.cmp-t{width:100%;border-collapse:collapse;font-size:15px}
.cmp-t thead th{position:sticky;top:0;background:#fff;text-align:center;font-size:18px;font-weight:800;padding:18px 8px 14px;vertical-align:bottom}
.cmp-t thead th small{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-top:2px}
.cmp-t thead th:first-child{text-align:left}
.cmp-t tbody th{text-align:left;font-weight:500;padding:13px 8px 13px 0;color:var(--ink-2)}
.cmp-t td{text-align:center;padding:13px 8px;font-weight:600}
.cmp-t tbody tr+tr th,.cmp-t tbody tr+tr td{border-top:1px solid #EDF2EF}
.cmp-t tr.grp th{padding:26px 0 8px;font-size:13px;font-weight:800;color:var(--brand-2);letter-spacing:.02em}
.cmp-t td[data-p="pro"],.cmp-t th[data-p="pro"]{background:#F3FAEC}
i.yes,i.no{display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:middle}
i.yes{background:#E2F2EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m6.5 11.3 3 3 6-6.6' fill='none' stroke='%2312805C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
i.no{background:linear-gradient(#B9C6BF,#B9C6BF) center/10px 2px no-repeat}
/* vs table */
.vs-wrap{margin-top:24px;background:#fff;border-radius:22px;padding:8px 24px 12px;overflow-x:auto}
.vs-t{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.vs-t thead th{text-align:left;font-size:17px;font-weight:800;padding:16px 12px 12px}
.vs-t thead th:nth-child(2){color:var(--brand-2)}
.vs-t tbody th{text-align:left;font-weight:600;padding:14px 12px 14px 0;width:30%;vertical-align:top}
.vs-t td{padding:14px 12px;vertical-align:top;color:var(--ink-2);line-height:1.5}
.vs-t td:nth-of-type(1){background:#F3FAEC;font-weight:600;color:var(--ink)}
.vs-t tbody tr+tr>*{border-top:1px solid #EDF2EF}
/* strengths and picks */
.pcs,.picks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc,.pick{background:#fff;border-radius:22px;padding:28px}
.pc.us,.pick.us{background:var(--field);color:#fff}
.pc h2{font-size:22px}.pick h3{font-size:20px}
.pc ul{list-style:none;padding:0;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.pc li{display:flex;gap:10px;line-height:1.5;font-size:15.5px}
.pc li::before{content:"";width:8px;height:8px;border-radius:50%;background:#B9C6BF;margin-top:.55em;flex:none}
.pc.us li::before{background:var(--lime)}
.pick p{margin-top:8px;line-height:1.55;font-size:15.5px}
.pick.us p,.pc.us li{color:#E2ECE6}
/* hub cards, security, contact, changelog */
.vs-cards,.ct-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vs-card,.ct{display:block;background:#fff;border-radius:22px;padding:26px;text-decoration:none;color:var(--ink);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.vs-card h2,.ct h2{font-size:22px}
.vs-card p,.ct p{margin-top:6px;color:var(--ink-2);line-height:1.5}
.vs-card span,.ct span{display:block;margin-top:14px;font-weight:700;color:var(--brand-2);font-size:15px}
.vs-card span::after{content:" →"}
.ct span{font-weight:500;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.vs-card:hover,.ct:hover{transform:translateY(-2px)}}
.sec-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sec-i{background:#fff;border-radius:22px;padding:26px}
.sec-i h2{font-size:19px;display:flex;align-items:center;gap:10px}
.sec-i h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 2px var(--brand);flex:none}
.sec-i p{margin-top:8px;color:var(--ink-2);line-height:1.55;font-size:15.5px}
.cls{display:flex;flex-direction:column;gap:16px;max-width:820px}
.cl{display:grid;grid-template-columns:160px 1fr;gap:24px;background:#fff;border-radius:22px;padding:26px}
.cl time{font-weight:700;color:var(--brand-2);font-size:15px}
.cl h2{font-size:21px}
.cl ul{margin-top:10px;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2);line-height:1.5}
@media (max-width:900px){.fits,.pcs,.picks,.vs-cards,.ct-g,.sec-g{grid-template-columns:1fr}}
.cmp-s .sec-p,.fits-s .sec-p{text-align:left;margin-left:0}
.cmp-teaser .sec-p{text-align:center;margin:12px auto 0}
li{text-wrap:pretty}