/* NF-190: public landing page only (components/pages/landing-page.tsx; copy and sections: docs/06-products/landing.md). Loads after the
   design and brand tokens. Colour chapters: each section is one flat field of colour; the product shows up as real, working app cards and
   docs (landing-live.tsx brings them and the app's own stylesheets) inside chat messages drawn in the room's own message style. The page
   stays light. No inline styles (CSP style-src 'self'): per-item colours, poll bars and reveal delays are classes. */
/* The element resets sit in the lowest layer (the app's own order), so the app's styles win inside its cards, docs and dialogs. */
@layer theme, legacy, base, components, utilities;
.landing{
  --paper:#fafaf8;--ink:#1f1d1a;--muted:#6b665e;--soft:#cfcac0;--line:#e2dfd8;
  --yellow:#f5db81;--coral:#e27666;--mint:#98bcaa;--sky:#99bce5;--rust:#963b25;--green:#24573a;--blue:#2a56c6;--sand:#ece4cf;--plum:#c9b3d6;
  --serif:var(--nf-font-display);--sans:var(--nf-font-ui);
  --m:clamp(16px,2.2vw,32px);
  --ease:cubic-bezier(.22,1,.36,1);
  margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
@layer theme{
.landing *,.landing *::before,.landing *::after{box-sizing:border-box}
.landing :where(img,svg):not(:where(.lv *,dialog *)){display:block;max-width:100%}
.landing a{color:inherit}
.landing :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0}
.landing :where(ul,ol){padding:0;list-style:none}
.landing :where(button,input,textarea,select){font:inherit;color:inherit}
.landing button{cursor:pointer}
.landing :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.landing ::selection{background:var(--ink);color:var(--paper)}
.landing :where(h1,h2,h3):not(:where(.lv *,dialog *)){font-family:var(--serif);font-weight:600;letter-spacing:-.025em;line-height:.95}
}
.landing [hidden]{display:none!important}
.landing .skip{position:absolute;top:-100px;left:16px;z-index:20;padding:12px;background:var(--ink);color:var(--paper)}
.landing .skip:focus{top:8px}

.landing .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--ink);color:var(--paper);font:600 17px/1 var(--sans);text-decoration:none;border:0;transition:transform .15s var(--ease),background .15s}
.landing .btn:hover{background:#343029;transform:translateY(-2px)}
.landing .btn:active{transform:none;background:#000}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.link:hover{text-decoration-thickness:4px}
.ch{position:relative;padding:clamp(64px,10vh,120px) var(--m)}

/* Chat pieces, in the room's own message style */
.cm{--u:15px;font:400 var(--u)/1.42 var(--sans);color:var(--ink);display:grid;gap:.9em;text-align:left}
.cm *:not(.lv *){min-width:0}
.m{display:grid;grid-template-columns:2em minmax(0,1fr);column-gap:.65em;align-items:start}
.av{display:grid;place-items:center;width:2.75em;height:2.75em;border-radius:50%;color:#fff;font:600 .72em/1 var(--sans);letter-spacing:.02em}
.av.br{background:#8a5a2b}.av.pl{background:#7a4b84}.av.bl{background:#4b5fa8}.av.gr{background:#6b665e}
.m .who{font-weight:600;font-size:.88em}
.m .who time{margin-left:.45em;color:var(--muted);font-weight:400}
.m .tx{margin-top:.1em}
.m.nota .bub{background:#f6efdb;border:1px solid #e8dcb6;border-radius:1em;padding:.75em .85em .85em;display:grid;gap:.6em;justify-self:start;max-width:100%}
.nface{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--yellow);color:var(--ink)}
.nface svg{width:1.45em;height:1.45em}
.face .blush{fill:#ed4339}
.face .eyes{transition:transform .12s linear}
.face .eyes ellipse{transform-box:fill-box;transform-origin:center;animation:lp-blink 7s infinite}
@keyframes lp-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
/* Where an app or doc will be, before landing-live.tsx draws it (and on the prerendered page). */
.slot{min-height:320px;border-radius:13px;background:rgb(255 255 255/.55)}
.doc-slot{min-height:100%;border-radius:0}
.lv{position:relative;min-width:0;font-size:15px;line-height:1.45}

/* The hero poll: the room's own poll, answered here in memory */
.poll{background:#fff;border:1px solid var(--line);border-radius:.8em;padding:.8em;display:grid;gap:.45em}
.poll b{font-weight:600;font-size:.95em;margin-bottom:.15em}
.opt{--w:0%;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6em;align-items:center;width:100%;padding:.5em .7em;border:0;border-radius:.45em;background:#f2f1ed;font-size:.93em;text-align:left;overflow:hidden}
.opt.w1{--w:25%}.opt.w2{--w:50%}.opt.w3{--w:75%}.opt.w4{--w:100%}
.opt::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:#e3ddc9;transition:width .45s var(--ease)}
.opt>*{position:relative}
.opt:hover::before{background:#d9d2ba}
.opt[aria-pressed="true"]{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.opt .n{font-weight:600;font-variant-numeric:tabular-nums}
.pfoot{color:var(--muted);font-size:.84em}

/* 1. Hero: two fields meet at a waterline; the room sits across it */
.hero{--hfs:clamp(44px,4.9vw,80px);--hh:max(100svh,820px);--top:calc(var(--hh)/2 - 1.42*var(--hfs));--seam:calc(var(--top) + 1.42*var(--hfs));position:relative;height:var(--hh);overflow:hidden;background:var(--paper)}
.hf-dn{position:absolute;left:0;right:0;top:var(--seam);bottom:0;background:var(--sky)}
.nav{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px var(--m)}
.nav>div{display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px}
.brand .badge{width:40px;height:40px}
.brand .word{height:30px;width:auto}
.hl{position:absolute;z-index:3;top:var(--top);left:var(--m);white-space:nowrap;font:600 var(--hfs)/.95 var(--serif);letter-spacing:-.03em}
.hl .ln{display:block;overflow:hidden;padding:0 .04em .14em;margin-bottom:-.14em}
.hl .ln>span{display:block}
.hero-flow{position:absolute;z-index:2;left:var(--m);top:calc(var(--seam) + 48px);display:grid;gap:18px;justify-items:start;max-width:min(48vw,40em)}
.hero-flow p{font-size:clamp(18px,1.35vw,21px);line-height:1.45}
.hero-flow .easy{font:600 clamp(24px,2.1vw,32px)/1.1 var(--serif);letter-spacing:-.015em;margin-bottom:6px}
.hero-chat{position:absolute;z-index:3;right:calc(var(--m) + 2vw);top:calc(var(--seam) - 290px);width:min(36vw,480px);background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
/* Nota's answer to "where are we?": what is decided, what is still open (the poll) and the plan so far */
.hero-chat .m.nota .bub{justify-self:stretch}
.where{display:grid;gap:.75em}
.where h4{margin:0 0 .3em;font:700 .72em/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7a6a3a}
.where .done{display:grid;gap:.2em}
.where .done li{display:flex;align-items:center;gap:.45em}
.where .done svg{width:1em;height:1em;flex:none;fill:none;stroke:#24573a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 2. Meet Nota: three steps */
.c-nota{background:var(--yellow);display:grid;gap:clamp(32px,6vh,64px)}
.who-is{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.bigface{width:clamp(96px,9vw,150px);height:auto;flex:none}
.c-nota h2{font-size:clamp(56px,7.2vw,120px)}
.nota-line{margin-top:14px;font:500 clamp(21px,1.8vw,28px)/1.25 var(--serif);max-width:40ch}
.how{--pic:clamp(380px,34vw,500px);--gap:clamp(28px,3.4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--gap);row-gap:20px;align-items:start}
/* The words sit above each picture; subgrid lines the pictures up whatever the words' length. */
.how li{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:20px}
.how-txt{display:grid;gap:8px;align-content:start}
.how h3{font-size:clamp(26px,2.3vw,36px);line-height:1.02}
.how-txt p{font-size:clamp(17px,1.25vw,19px);max-width:32ch}
.how-fig{position:relative}
.how-pic{background:var(--paper);border-radius:16px;padding:16px;height:var(--pic);overflow:hidden}
.how-pic.chat{align-content:start;gap:.8em}
.arr{position:absolute;left:calc(2px - var(--gap));top:calc(50% - 12px);width:calc(var(--gap) - 4px);height:24px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* 3. The gallery: one real app per conversation */
.c-gal{background:var(--ink);color:var(--paper);padding:clamp(64px,10vh,112px) 0 clamp(48px,8vh,88px)}
.gal-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--m);margin-bottom:clamp(28px,5vh,48px)}
.gal-top h2{font-size:clamp(44px,5.6vw,92px)}
.arrows{display:flex;gap:10px;flex:none}
.arrows button{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--paper);background:transparent;color:var(--paper);transition:background .15s,color .15s,transform .15s var(--ease)}
.arrows button:hover{background:var(--paper);color:var(--ink)}
.arrows button:active{transform:scale(.94)}
.arrows svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.filters{display:flex;flex-wrap:wrap;gap:10px;padding:0 var(--m);margin:-8px 0 24px}
.filters button{min-height:44px;padding:0 18px;border:2px solid var(--paper);background:transparent;color:var(--paper);font-weight:600;font-size:16px;transition:background .15s,color .15s}
.filters button:hover{background:rgb(250 250 248 / .12)}
.filters button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.reel{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--m);padding:0 var(--m) 4px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 clamp(300px,30vw,440px);scroll-snap-align:start;height:min(70svh,640px);min-height:520px;background:var(--sky);color:var(--ink);display:flex;flex-direction:column;overflow:hidden}
.tile.green{background:var(--green)}.tile.coral{background:var(--coral)}.tile.yellow{background:var(--yellow)}.tile.mint{background:var(--mint)}
.tile.sand{background:var(--sand)}.tile.plum{background:var(--plum)}.tile.rust{background:var(--rust)}.tile.dk{color:var(--paper)}
.tile .q{padding:24px 24px 0;font:600 clamp(28px,2.4vw,38px)/1.02 var(--serif);letter-spacing:-.02em}
/* A gallery card shows one interaction and its result: the app's own header and footer, its explanatory labels and who has taken part stay off.
   The Friday launch keeps its header (its title). */
.bare :is(.ra-foot,.ra-line:not([role=alert]),.rav-b-label,.rav-b-private,.rav-i-total,.rav-f-hush,.rav-f-q-count,.rav-g-meter,.rav-g-meter-line),.tile .bare .ra-head{display:none}
.tile .cm{--u:14px;padding:20px 18px 0;align-content:start}
.tile .m:not(.nota){background:var(--paper);border-radius:12px;padding:.65em .75em}
.engine{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(48px,9vh,96px) var(--m) 0}
.engine h3{font-size:clamp(40px,4.4vw,72px);color:var(--yellow)}
.engine p{margin-top:18px;font-size:clamp(18px,1.4vw,21px);max-width:36ch}
/* The Friday launch plays in a fixed window, newest at the bottom, the way a chat scrolls. */
.engine-demo{background:var(--paper);border-radius:16px;padding:18px;max-width:560px}
.engine-demo.play{height:740px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.engine-demo .cm>*{animation:lp-msg .45s var(--ease) both}
@keyframes lp-msg{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.typing{grid-auto-flow:column;justify-content:start;gap:5px;padding:.9em 1em}
.typing i{width:7px;height:7px;border-radius:50%;background:#7a6a3a;animation:lp-dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes lp-dot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* What just changed, lit once: the job the launch gained, the message the notebook's new time came from. */
.landing .ld-new,.m.lit{animation:lp-lit 2.4s var(--ease) both}
@keyframes lp-lit{0%,40%{background:#fdeca6}100%{background:transparent}}


/* 4. The notebook that keeps up: the chat beside the notebook it changes */
.c-docs{background:var(--mint);display:grid;row-gap:clamp(28px,5vh,48px)}
.docs-top{display:grid;gap:18px}
.docs-top h2{font-size:clamp(44px,6vw,100px)}
.docs-top p{font-size:clamp(19px,1.5vw,22px);max-width:44ch}
.keep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
.src{background:var(--paper);border-radius:16px;padding:18px}
.src .m{border-radius:12px;margin:-.35em;padding:.35em}
.src .m:last-child:not(.nota){animation:lp-msg .45s var(--ease) both}
.doc{background:#fff;border-radius:14px;overflow:hidden}
.c-docs .doc{transform:rotate(.6deg)}
.ld-page{padding:clamp(28px,4vw,40px) clamp(24px,4vw,40px) 28px}
.reading-surface[data-style] .prose>.ld-meta{margin-top:4px;color:var(--note-muted);font:var(--st-small)}
.reading-surface .ld-upd{background:#fdeca6;color:inherit;padding:0 .2em;border-radius:.2em;animation:lp-mark 2.4s var(--ease) both}
@keyframes lp-mark{from{background:#f5c842}to{background:#fdeca6}}
.reading-surface .ld-src{margin-left:.4em;padding:.1em .55em;border-radius:999px;background:var(--mint);color:#1f3a2c;font:600 .78em/1.6 var(--sans);text-decoration:none;vertical-align:.1em;white-space:nowrap;transition:background .15s}
.reading-surface .ld-src:hover{background:#7fae97}

/* 5. Bring your favourite AI along: one exchange from an AI app into the notebook, a teammate's comment, the supported apps small underneath */
.c-mcp{background:var(--sky);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,4vw,72px);row-gap:clamp(32px,5vh,56px);align-items:center}
.c-mcp h2{font-size:clamp(44px,4.6vw,80px)}
.mcp-copy p{margin:20px 0 28px;font-size:clamp(19px,1.5vw,22px);max-width:40ch}
.relay{position:relative;display:grid;gap:18px;max-width:600px;width:100%;justify-self:center;margin-bottom:26px}
.ask{justify-self:start;width:min(100%,380px);background:var(--ink);color:var(--paper);border-radius:16px;padding:16px;display:grid;gap:10px;font-size:15px;line-height:1.4}
.ask-app{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.ask-me{justify-self:end;max-width:85%;background:#3a3631;border-radius:12px 12px 4px 12px;padding:8px 12px}
.ask-it{max-width:90%}
.doc-launch{margin-left:clamp(0px,6vw,80px);box-shadow:0 1px 0 rgb(31 29 26/.08)}
.remark{position:absolute;right:-12px;bottom:-26px;z-index:1;display:flex;gap:10px;align-items:start;max-width:250px;background:var(--paper);border:2px solid var(--ink);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:15px;line-height:1.35}
.remark .av{font-size:12px;width:30px;height:30px;flex:none}
.remark b{display:block;font-size:13px}
.works{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:8px;border-top:2px solid rgb(31 29 26/.18)}
.works p{font-weight:600;font-size:15px}
.works ul{display:flex;flex-wrap:wrap;gap:8px}
.works li{display:flex;align-items:center;gap:7px;padding:6px 12px;background:rgb(250 250 248/.6);border-radius:999px;font-weight:600;font-size:15px}
.works li img{width:18px;height:18px}

/* 6. Questions */
.c-faq{background:var(--paper);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,72px)}
.c-faq h2{font-size:clamp(44px,5.6vw,92px)}
.c-faq dt{font:600 clamp(24px,2vw,30px)/1.15 var(--serif);letter-spacing:-.015em;padding-top:26px}
.c-faq dd{margin-top:6px;padding-bottom:26px;border-bottom:2px solid var(--ink);font-size:18px}

/* 7. Start with one message */
.c-cta{background:var(--blue);color:var(--paper);min-height:80svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,72px);align-items:center}
.c-cta h2{font-size:clamp(56px,7vw,116px);line-height:.92}
.c-cta .fr{display:grid;gap:14px;max-width:520px}
.c-cta p{font-size:16px}
.composer{display:flex;align-items:center;gap:.7em;padding:.55em .55em .55em .7em;background:var(--paper);border-radius:.9em;font-size:17px;color:var(--ink)}
.composer input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);padding:.4em 0}
.composer .send{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--ink);color:var(--paper);flex:none}
.composer .send svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Footer */
.foot-w{background:var(--ink);color:var(--paper);padding:clamp(40px,8vh,96px) var(--m) 28px}
.foot-brand{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px)}
.foot-badge{width:clamp(64px,12vw,180px);height:auto;flex:none}
.foot-brand .word{flex:1;min-width:0;height:auto}
.foot-w .row{margin-top:40px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-w .places{display:flex;gap:28px;font:600 clamp(22px,2vw,30px)/1.15 var(--serif)}
.foot-w .places a{text-decoration:none}
.foot-w .places a:hover{text-decoration:underline;text-underline-offset:6px}
.foot-w .note{font-size:15px;color:var(--soft);max-width:60ch}

/* The gallery's links to the use-case pages (use-case-page.tsx) */
.gal-more{display:flex;flex-wrap:wrap;gap:10px 24px;padding:24px var(--m) 0}
.gal-more a{color:var(--paper);font-weight:600;font-size:17px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.gal-more a:hover{text-decoration-thickness:4px}

/* The footer's links to the use-case pages and Bring your AI */
.foot-w .uses{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:48px;font-size:17px;font-weight:600}
.foot-w .uses a{text-decoration:none;color:var(--soft)}
.foot-w .uses a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}

/* Motion: the headline rises, then each section's parts rise in once as they scroll into view (only once the page's script runs). */
@media (prefers-reduced-motion:no-preference){
  .hl .ln>span{animation:lp-rise 1s var(--ease) both}
  .hl .ln:nth-child(2)>span{animation-delay:.11s}
  .hero-flow{animation:lp-fade .8s var(--ease) .8s both}
  .lp-live .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .lp-live .rv.d1{transition-delay:.08s}.lp-live .rv.d2{transition-delay:.16s}.lp-live .rv.d3{transition-delay:.7s}
  .lp-live .rv.in{opacity:1;transform:none}
}
@keyframes lp-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes lp-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.landing *,.landing *::before,.landing *::after{animation:none!important;transition:none!important}}

/* Phone */
@media (max-width:860px){
  .landing{font-size:17px}
  .nav{padding:16px}
  .nav>div{gap:12px}
  .brand{gap:6px}
  .brand .badge{width:32px;height:32px}
  .brand .word{height:20px}
  .nav .link,.nav .btn{white-space:nowrap}
  .nav .btn{min-height:40px;padding:0 12px;font-size:14px}
  .hero{--hfs:8.6vw;--top:100px;--hh:auto;--seam:calc(100px + 2.3*var(--hfs));height:auto;padding-bottom:40px}
  .hero-flow{position:relative;left:auto;top:auto;margin:calc(var(--seam) + 24px) 16px 0}
  .hero-flow{max-width:none}
  .hero-flow p{font-size:18px}
  .hero-flow .easy{font-size:24px}
  .hero-flow .btn{width:100%}
  .hero-chat{position:relative;right:auto;top:auto;width:auto;margin:28px 16px 0;padding:14px}
  .how{grid-template-columns:1fr;grid-template-rows:none;row-gap:40px}
  .how li{grid-row:auto;grid-template-rows:none;row-gap:16px}
  .how-pic{height:auto;max-height:520px}
  .arr{display:none}
  .gal-top{flex-direction:column;align-items:flex-start}
  .gal-top h2{font-size:12vw}
  .arrows{display:none}
  .tile{flex-basis:86vw;height:auto;min-height:0;max-height:640px}
  .engine,.c-mcp,.keep,.c-faq,.c-cta{grid-template-columns:1fr}
  .engine-demo{padding:14px}
  .engine-demo.play{height:680px}
  .doc-launch{margin-left:0}
  .remark{right:-4px}
  .engine h3{font-size:10vw}
  .docs-top h2{font-size:12.5vw}
  .c-mcp h2{font-size:13vw}
  .c-faq,.c-cta{row-gap:28px}
  .c-cta{min-height:0}
  .c-cta h2{font-size:15vw}
  .foot-w .places{flex-direction:column;gap:8px}
}