/* Notebot — product site. Tokens from the app's DESIGN.md (Playground). */
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Urbanist;src:url(assets/fonts/Urbanist-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --sheet:#f6f1eb; --linen:#efe8e0; --card:#ffffff; --ink:#141414; --on-ink:#ffffff; --text:#232323;
  --muted:rgba(20,20,20,.64); --faint:rgba(20,20,20,.48); --hair:#e6dfd6; --hair-ink:rgba(20,20,20,.12);
  --pink:#f9d3d1; --peach:#fbe0c0; --lav:#d9d4f7; --mint:#c5ecd6; --sky:#cfe3f4; --butter:#f7ecb8;
  --s-pink:#e29a95; --s-peach:#e2b26b; --s-lav:#a397e6; --s-mint:#6fc294; --s-sky:#7fb2dc; --s-butter:#d6bd4f;
  --font:Urbanist,"Avenir Next","Helvetica Neue",system-ui,sans-serif;
  --wrap:1120px; --r-frame:20px; --r-card:22px; --r-col:24px;
  --shadow-rest:0 1px 2px rgba(20,20,20,.05);
  --shadow-frame:0 24px 60px rgba(20,20,20,.12), 0 2px 6px rgba(20,20,20,.05);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--sheet);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
::selection{background:var(--lav);color:var(--ink)}
:focus-visible{outline:2px solid var(--s-mint);outline-offset:3px;border-radius:6px}
code{font-family:"SF Mono",Menlo,monospace;font-size:.88em;background:var(--linen);padding:1px 6px;border-radius:5px}
em{font-style:normal;font-weight:600;color:var(--ink)}
.wrap{width:min(100% - 48px, var(--wrap));margin-inline:auto}
.wrap.narrow{width:min(100% - 48px, 760px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:16px}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* type */
.display{font-weight:300;font-size:clamp(42px,6.4vw,84px);line-height:1.02;letter-spacing:-.02em}
h2{font-weight:300;font-size:clamp(32px,4vw,50px);line-height:1.08;letter-spacing:-.02em}
h3{font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--muted);max-width:62ch}
.lede-s{font-size:18px;color:var(--muted);max-width:60ch;margin-top:12px}
.quiet{color:var(--muted);font-size:14px}
.fine{font-size:13px;font-weight:500;color:var(--muted)}

/* brand */
.brand{display:inline-flex;align-items:baseline;font-size:17px;letter-spacing:-.035em;color:var(--ink)}
.brand b{font-weight:800}.brand span{font-weight:300;letter-spacing:-.01em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:16px;white-space:nowrap;transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{background:#2b2b2b;transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,20,20,.14)}
.btn:active{background:#000000;transform:none;box-shadow:none}
.btn.small{height:38px;padding:0 16px;font-size:14px}
.btn.big{height:56px;padding:0 28px;font-size:17px}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow-rest)}
.btn.ghost:hover{background:#fff;box-shadow:0 8px 20px rgba(20,20,20,.08)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;height:66px;z-index:50;transition:background .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease)}
.nav.scrolled{background:rgba(246,241,235,.82);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--hair)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.links{display:flex;gap:26px}
.links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .15s}
.links a:hover{color:var(--ink)}

/* hero */
.hero{padding-top:150px;position:relative;overflow-x:clip}
.hero-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero .display{max-width:900px}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* The stage fades out at its foot so the screenshot dissolves into the page
   instead of ending in a hard edge. The mask clips to the stage's box, so the
   pastel cards live INSIDE it: the box is padded 60/80/40 around the frame,
   and the negative inline margin keeps the frame centred and full width. */
.stage{position:relative;box-sizing:content-box;width:min(100% - 48px, 1180px);padding:60px 80px 40px;
  margin:56px calc((100% - min(100% - 48px, 1180px) - 160px) / 2) 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,0) 100%)}
.hero-frame{margin:0;position:relative;z-index:2}
.frame{margin:0;position:relative;border-radius:var(--r-frame);overflow:hidden;background:var(--card);box-shadow:var(--shadow-frame)}
.frame img{width:100%}
.frame.tint{background:var(--linen);padding:26px;box-shadow:var(--shadow-rest)}
.frame.tint img{border-radius:14px;box-shadow:var(--shadow-frame)}
.frame.tint.peach{background:linear-gradient(160deg,var(--peach),var(--linen) 70%)}
.hero-frame .shot{transition:opacity .6s var(--ease)}
.hero-frame .shot.dark{position:absolute;inset:0;opacity:0}
.hero-frame.is-dark .shot.dark{opacity:1}
.hero-frame.is-dark .shot.light{opacity:0}
.cap{margin:-8px auto 0;text-align:center;font-size:13px;color:var(--faint);font-weight:500;width:min(100% - 48px,1180px)}
.theme-switch{position:absolute;top:14px;right:14px;display:inline-flex;padding:3px;border-radius:999px;background:rgba(246,241,235,.86);backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(20,20,20,.12);gap:2px}
.theme-switch button{appearance:none;border:0;background:transparent;font:inherit;font-size:12px;font-weight:600;color:var(--ink);height:26px;padding:0 11px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s}
.theme-switch button.on{background:var(--ink);color:#fff}
.blob{position:absolute;border-radius:22px;z-index:1;opacity:.95;will-change:transform}
.b1{width:260px;height:180px;background:var(--peach);left:0;top:0;transform:rotate(-9deg);animation:drift 9s var(--ease) infinite alternate}
.b2{width:220px;height:160px;background:var(--lav);right:10px;top:20px;transform:rotate(8deg);animation:drift 11s var(--ease) infinite alternate-reverse}
.b3{width:180px;height:120px;background:var(--pink);left:40px;bottom:100px;transform:rotate(6deg);animation:drift 10s var(--ease) infinite alternate-reverse}
.b4{width:200px;height:140px;background:var(--mint);right:30px;bottom:150px;transform:rotate(-7deg);animation:drift 12s var(--ease) infinite alternate}
@keyframes drift{from{translate:0 0}to{translate:0 -14px}}

/* hero entrance */
[data-hero]{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
[data-hero="1"]{animation-delay:.1s}[data-hero="2"]{animation-delay:.2s}[data-hero="3"]{animation-delay:.3s}
[data-hero="4"]{animation-delay:.35s;transform:translateY(34px) scale(.985);animation-duration:1.1s}
@keyframes rise{to{opacity:1;transform:none}}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}

/* feature rows */
.features{padding:110px 0 40px}
.features .wrap{width:min(100% - 48px, 1360px)}
.row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:clamp(36px,5vw,72px);align-items:center;padding:56px 0}
.row.flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr)}
.row.flip .media{order:2}
.row .text{max-width:52ch}
.row .text p{margin-top:16px;color:var(--text)}
.row .text p:first-of-type{margin-top:22px}
.row h2{max-width:18ch}
.media.portrait{display:flex;justify-content:center}
.media.portrait .frame{width:min(100%,540px)}
.facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.facts li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--ink)}
.dot{width:12px;height:12px;border-radius:999px;flex:0 0 auto;display:inline-block}
.dot.peach{background:var(--s-peach)}.dot.pink{background:var(--s-pink)}.dot.lav{background:var(--s-lav)}.dot.mint{background:var(--s-mint)}.dot.sky{background:var(--s-sky)}.dot.butter{background:var(--s-butter)}

/* more grid */
.more{padding:100px 0 40px}
.more h2{max-width:20ch}
.more-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px}
.more-grid li{display:flex;flex-direction:column;gap:10px}
.more-grid h3{font-size:18px}
.more-grid p{font-size:15px;color:var(--muted);line-height:1.55}
.disc{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:4px}
.disc.peach{background:var(--peach)}.disc.pink{background:var(--pink)}.disc.lav{background:var(--lav)}.disc.mint{background:var(--mint)}.disc.sky{background:var(--sky)}.disc.butter{background:var(--butter)}

/* steps */
.how{padding:120px 0 60px}
.how h2{max-width:20ch}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--hair-ink)}
.num{font-weight:300;font-size:56px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.steps p{font-size:16px;color:var(--text)}

/* privacy */
.privacy{padding:100px 0 0}
.privacy-card{background:var(--linen);border-radius:var(--r-col);padding:clamp(28px,4vw,56px)}
.p-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px}
.p-cols h3{font-size:18px;margin-bottom:12px}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--text)}
.plain li{padding-left:18px;position:relative}
.plain li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:999px;background:var(--ink);opacity:.55}

/* download */
.download{padding:120px 0 40px}
.dl-card{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);background:var(--card);border-radius:var(--r-col);padding:clamp(28px,4vw,56px);box-shadow:var(--shadow-frame)}
.dl-main{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.appicon{width:72px;height:72px;border-radius:18px;margin-bottom:6px}
.req{color:var(--muted);font-weight:500}
.beta{display:inline-block;vertical-align:middle;margin-left:10px;height:26px;line-height:26px;padding:0 11px;border-radius:999px;background:var(--butter);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:0}
.dl-main .btn{margin-top:10px}
.dl-links{font-size:14px;color:var(--muted)}
.dl-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--hair-ink);text-underline-offset:3px}
.dl-side{background:var(--linen);border-radius:18px;padding:24px 26px;align-self:center}
.dl-side h3{font-size:18px;margin-bottom:10px}
.dl-side p{font-size:15px}
.mini{margin:12px 0 0;padding-left:20px;font-size:15px;display:flex;flex-direction:column;gap:6px}
.dl-side .quiet{margin-top:12px}

/* faq */
.faq{padding:110px 0 80px}
.faq h2{max-width:18ch}
.acc{margin-top:40px;border-top:1px solid var(--hair-ink)}
.q{border-bottom:1px solid var(--hair-ink)}
.q button{appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;font:inherit;font-size:19px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;letter-spacing:-.01em}
.q button:hover{color:#000000}
.chev{width:28px;height:28px;border-radius:999px;background:var(--linen);position:relative;flex:0 0 auto;transition:background .2s,transform .35s var(--ease)}
.chev::before,.chev::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%)}
.chev::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease),opacity .2s}
.q.open .chev{transform:rotate(180deg);background:var(--mint)}
.q.open .chev::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.a p{min-height:0;overflow:hidden;margin:0;padding:0 4px;color:var(--text);font-size:16px;max-width:64ch;transition:padding .4s var(--ease)}
.q.open .a p{padding-bottom:22px}

/* footer */
.foot{border-top:1px solid var(--hair);padding:36px 0 48px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot p{font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:22px}
.foot nav a{font-size:14px;font-weight:500;color:var(--muted)}
.foot nav a:hover{color:var(--ink)}

/* responsive */
@media (max-width:980px){
  .row,.row.flip{grid-template-columns:1fr;gap:32px;padding:44px 0}
  .row.flip .media{order:0}
  .row h2{max-width:none}
  .more-grid{grid-template-columns:repeat(2,1fr);gap:32px 28px}
  .steps{grid-template-columns:1fr;gap:28px}
  .p-cols{grid-template-columns:1fr;gap:28px}
  .dl-card{grid-template-columns:1fr}
  .features{padding-top:120px}
}
@media (max-width:640px){
  .links{display:none}
  .hero{padding-top:116px}
  .hero-in{gap:20px;text-align:left;align-items:flex-start}
  .cta{justify-content:flex-start}
  .stage{box-sizing:border-box;width:min(100% - 48px,1180px);padding:0 0 30px;margin:40px auto 0}
  .blob{display:none}
  .theme-switch{top:8px;right:8px}
  .cap{position:static;padding:12px 18px 14px;line-height:1.4}
  .frame.tint{padding:16px}
  .features{padding-top:48px}
  .row{padding:28px 0;gap:22px}
  .more{padding:64px 0 16px}
  .more-grid{margin-top:32px;gap:28px}
  .how{padding:72px 0 24px}
  .steps{margin-top:36px}
  .privacy{padding-top:56px}
  .download{padding:72px 0 16px}
  .faq{padding:72px 0 48px}
  .more-grid{grid-template-columns:1fr}
  .dl-card{padding:24px}
  .q button{font-size:17px;padding:16px 2px}
  .foot-in{flex-direction:column;align-items:flex-start}
}
html.static [data-hero],html.static [data-reveal]{opacity:1;transform:none;animation:none;transition:none}
html.static .blob{animation:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-hero],[data-reveal]{opacity:1;transform:none;animation:none;transition:none}
  .blob{animation:none}
  .a,.a p{transition:none}
}