/* Narrera site: shared tokens, nav with mega menus, footer and inner-page components.
   Layout: a floating pill nav; each top item opens a full-width panel of link columns, Clay-style, with a featured card on Product. */
:root{--paper:#fbfbf9;--ink:#141416;--blue:#7fcbe6;--blue-soft:#dff1f8;--yellow:#ffd54a;--yellow-soft:#fff3c2;--red:#f04e4a;--deep:#1b6f8f;--ink-70:#48484c;--ink-55:#66666a;--ink-40:#91918e;--ink-25:#c5c5c1;--ink-12:#e4e4e0;--ink-06:#efefec;--grid:rgba(20,20,22,.06);
--green-soft:#cfe9c4;--apricot-soft:#ffc9a3;--lilac-soft:#dccbf6;--rose-soft:#f8c6d2;
--display:'Figtree',ui-sans-serif,system-ui,sans-serif;--body:'Source Serif 4',Georgia,'Times New Roman',serif;--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--r:12px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}
.wrap{width:min(1200px,100%);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 22px;font:600 15px/1 var(--display);border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn.primary{background:var(--blue);color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ghost{border-color:var(--ink-25);color:var(--ink);background:transparent}
.btn.go{background:var(--blue);color:var(--ink);box-shadow:0 2px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn.go::after{content:"\2192";font-size:17px;line-height:1}
.btn.go:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn:hover{filter:brightness(.97)}
.btn.go:hover{filter:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* ---------- nav ---------- */
.navwrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;padding:12px max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
.nav{position:relative;width:min(1200px,100%);margin-inline:auto;background:#fff;border:1px solid var(--ink-12);border-radius:999px;display:flex;align-items:center;gap:6px;padding:7px 7px 7px 18px;transition:border-radius .2s}
.nav .logo{display:flex;margin-right:10px}
.nav .logo svg{height:22px;width:auto;display:block;color:var(--ink)}
.nav .links{display:flex;gap:2px;font:500 15px var(--display)}
.nav .links>li{list-style:none;position:static}
.nav .links{margin:0;padding:0}
.nav .top{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:999px;background:transparent;border:0;font:inherit;color:var(--ink);cursor:pointer}
.nav .top:hover,.nav .top[aria-expanded="true"]{background:var(--ink-06)}
.nav .top .chev{width:10px;height:10px;transition:transform .2s}
.nav .top[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav .cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav .login{font:500 15px var(--display);padding:0 10px}
.nav .burger{display:none;border:0;background:transparent;padding:8px;cursor:pointer;border-radius:999px}
.nav .burger svg{width:22px;height:22px;display:block}
/* panel */
.panel{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--ink-12);border-radius:20px;box-shadow:0 30px 60px -30px rgba(20,20,22,.35),0 1px 0 var(--ink-12);padding:26px 28px;display:none;z-index:50}
.panel[data-open="true"]{display:grid}
.panel{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0 28px}
.panel.has-card{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) 300px}
.panel .col{border-left:1px solid var(--ink-06);padding-left:22px;min-width:0}
.panel .col:first-child{border-left:0;padding-left:0}
.panel .col h4{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin:0 0 14px}
.panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.panel li a{display:flex;align-items:center;gap:12px;padding:7px 8px;margin-left:-8px;border-radius:10px;font:500 15.5px var(--display);color:var(--ink);transition:background .12s}
.panel li a:hover{background:var(--ink-06)}
.panel li a[aria-current="page"]{color:var(--deep)}
.tile{width:36px;height:36px;flex:none;display:grid;place-items:center;color:var(--ink)}
.tile svg{width:28px;height:28px;display:block}
.panel .card{border-radius:16px;background:var(--paper);border:1px solid var(--ink-12);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.panel .card .art{height:150px;position:relative;overflow:hidden;background:#fff}
.panel .card .art svg{position:absolute;inset:0;width:100%;height:100%}
.panel .card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.panel .card .body .eyebrow{font-size:11px}
.panel .card .body b{font:600 18px/1.25 var(--display);letter-spacing:-.01em}
.panel .card .body span{font:400 14px/1.4 var(--display);color:var(--ink-55)}
.nav-scrim{position:fixed;inset:0;background:transparent;z-index:-1;display:none}
.nav-scrim[data-open="true"]{display:block}
/* mobile sheet */
.sheet{display:none}
@media(max-width:980px){
  .nav .links,.nav .login{display:none}
  .nav .burger{display:block}
  .sheet{position:fixed;inset:0;top:0;z-index:60;background:var(--paper);overflow-y:auto;padding:calc(12px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:none;flex-direction:column;gap:6px}
  .sheet[data-open="true"]{display:flex}
  .sheet .head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 14px}
  .sheet .head svg{height:22px;width:auto;color:var(--ink)}
  .sheet .close{border:0;background:var(--ink-06);border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer}
  .sheet details{border-top:1px solid var(--ink-12)}
  .sheet summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 2px;font:600 18px var(--display);cursor:pointer}
  .sheet summary::-webkit-details-marker{display:none}
  .sheet summary .chev{width:12px;height:12px;transition:transform .2s}
  .sheet details[open] summary .chev{transform:rotate(180deg)}
  .sheet .group{padding:0 0 14px}
  .sheet .group h4{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin:10px 0 6px}
  .sheet .group a{display:flex;align-items:center;gap:12px;padding:8px 0;font:500 16px var(--display)}
  .sheet .plain{border-top:1px solid var(--ink-12);padding:16px 2px;font:600 18px var(--display);display:block}
  .sheet .ctas{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--ink-12)}
}
@media(max-width:560px){.nav{padding-left:14px}.nav .cta .btn.ghost{display:none}}

/* ---------- inner pages ---------- */
.page-hero{padding-block:64px 40px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.page-hero.narrow .wrap{grid-template-columns:minmax(0,760px)}
.page-hero h1{font-size:clamp(34px,4.2vw,56px);line-height:1.04;font-weight:600}
.page-hero .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--ink-70);margin:18px 0 28px;max-width:40ch}
.page-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.page-hero .cta-row .btn{padding:16px 24px;font-size:16px}
.page-hero .crumb{display:flex;gap:8px;align-items:center;font:500 13px var(--display);color:var(--ink-55);margin-bottom:18px}
.page-hero .crumb a:hover{color:var(--deep)}
.page-hero .crumb i{font-style:normal;color:var(--ink-25)}
.mock{border:1px solid var(--ink-12);border-radius:14px;background:#fff;box-shadow:0 1px 0 var(--ink-12),0 30px 70px -30px rgba(20,20,22,.35);overflow:hidden;min-width:0}
.mock .bar{background:var(--blue);height:44px;display:flex;align-items:center;padding:0 12px;gap:10px}
.mock .bar .tab{background:var(--paper);border-radius:8px;padding:5px 9px;display:flex}
.mock .bar .tab svg{height:15px;width:auto;color:var(--ink)}
.mock .bar .t{font:500 13px var(--display)}
.mock .in{padding:14px 16px 16px;font-family:var(--display)}
.mock .row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--ink-06);font-size:14px}
.mock .row:last-child{border-bottom:0}
.mock .row b{font-weight:500}
.mock .row .k{font-family:var(--mono);font-size:11.5px;color:var(--ink-55)}
.mock .row .s{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border-radius:4px;background:var(--ink-06)}
.mock .row .s.live{background:var(--blue)}.mock .row .s.ready{color:var(--deep)}.mock .row .s.owe{background:var(--yellow)}
.mock .quote{font-family:var(--body);font-size:17px;line-height:1.5;padding:10px 6px 6px}
.band{background:var(--yellow);padding:.05em .15em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.band.s4{background:color-mix(in srgb,var(--yellow) 60%,transparent)}
.band.s3{background:color-mix(in srgb,var(--yellow) 30%,transparent)}
.mock .meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font:400 12.5px var(--display);color:var(--ink-55);padding:4px 6px 8px}
.badge{font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:6px;background:var(--yellow);display:inline-block}
.mock .mark{padding:6px;position:relative}
.mock mark{background:transparent;padding:2px 3px;border-radius:3px}
.mock mark.who{background:var(--green-soft)}.mock mark.problem{background:var(--yellow)}.mock mark.when{background:var(--apricot-soft)}.mock mark.because{background:var(--lilac-soft)}.mock mark.today{background:var(--rose-soft)}

section.block{padding-block:72px}
section.block.tight{padding-block:48px}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin-bottom:34px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px);line-height:1.04;font-weight:600}
.sec-head p{margin:0;font-size:18px;color:var(--ink-70)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feat{border:1px solid var(--ink-12);border-radius:var(--r);background:#fff;padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.feat .tile{width:44px;height:44px}
.feat .tile svg{width:40px;height:40px}
.feat h3{font-size:20px;letter-spacing:-.01em;margin-top:4px}
.feat p{margin:0;font:400 15.5px/1.45 var(--display);color:var(--ink-70)}
.feat a.more{font:600 14px var(--display);color:var(--deep);margin-top:auto;padding-top:6px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding-block:28px}
.feature.flip .fcopy{order:2}
.feature h3{font-size:clamp(24px,2.6vw,32px);margin:10px 0 10px}
.feature p{margin:0;font-size:18px;color:var(--ink-70);max-width:44ch}
.feature ul{margin:14px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;font:400 16px var(--display);color:var(--ink-70)}
.feature ul li{display:flex;gap:10px;align-items:flex-start}
.feature ul li::before{content:"";width:14px;height:8px;margin-top:9px;flex:none;background:var(--yellow);border-radius:2px}
.prose{max-width:70ch;font-size:18px;line-height:1.6}
.prose h2{font-size:clamp(26px,3vw,36px);margin:48px 0 14px;line-height:1.1}
.prose h3{font-size:22px;margin:30px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:6px}
.prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--blue);background:#fff;border-radius:0 10px 10px 0}
.prose .note{font:400 15px/1.5 var(--display);color:var(--ink-70);background:var(--ink-06);padding:14px 16px;border-radius:10px}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--ink-06);padding:1px 5px;border-radius:4px}
.prose table{border-collapse:collapse;width:100%;font:400 15px var(--display)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink-12);vertical-align:top}
.prose th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55);font-weight:500}
.table-wrap{overflow-x:auto}
.scale{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.scale li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--ink-12);border-radius:10px;padding:12px 14px}
.scale .num{font:600 26px var(--display);text-align:center}
.scale .name{font:600 16px var(--display)}
.scale .test{font-size:15px;color:var(--ink-70);margin:0}
.scale .counts-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--deep);margin-left:8px}
.cta-band{background:var(--ink);color:var(--paper);padding-block:72px}
.cta-band h2{font-size:clamp(32px,4.2vw,56px);line-height:1.02}
.cta-band p{font-size:19px;color:var(--ink-25);margin:14px 0 26px;max-width:40ch}
.cta-band .btn.ghost{border-color:var(--ink-55);color:var(--paper)}
.cta-band .row{display:flex;gap:10px;flex-wrap:wrap}
.faq{max-width:760px;display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--ink-12)}
.faq details:last-child{border-bottom:1px solid var(--ink-12)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font:600 18px var(--display);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-40);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 18px;color:var(--ink-70);max-width:62ch}
/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.tier{border:1px solid var(--ink-12);border-radius:16px;background:#fff;padding:26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tier.hi{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.tier .name{font:600 20px var(--display)}
.tier .price{font:600 44px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tier .price small{font:400 15px var(--display);color:var(--ink-55);letter-spacing:0}
.tier .for{font:400 15px/1.4 var(--display);color:var(--ink-70)}
.tier ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font:400 15px var(--display)}
.tier ul li{display:flex;gap:10px;align-items:flex-start}
.tier ul li::before{content:"";width:14px;height:8px;margin-top:8px;flex:none;background:var(--yellow);border-radius:2px}
.tier .btn{margin-top:auto;justify-content:center}
.tier .pill{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);padding:4px 8px;border-radius:6px}
/* blog */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.post{border:1px solid var(--ink-12);border-radius:var(--r);background:#fff;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.post img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.post .body h3{font-size:22px;letter-spacing:-.01em}
.post .body p{margin:0;font:400 15.5px/1.45 var(--display);color:var(--ink-70)}
.post .meta{font:400 13px var(--display);color:var(--ink-55)}
/* demo */
.calendly{border:1px dashed var(--ink-25);border-radius:14px;background:#fff;min-height:420px;display:grid;place-items:center;text-align:center;padding:30px;font:400 15px/1.5 var(--display);color:var(--ink-55)}
.calendly b{display:block;font-size:18px;color:var(--ink);margin-bottom:6px}
.form{display:flex;flex-direction:column;gap:12px;font-family:var(--display)}
.form label{display:flex;flex-direction:column;gap:6px;font:500 14px var(--display)}
.form input,.form textarea,.form select{border:1px solid var(--ink-25);border-radius:10px;padding:11px 12px;font:400 15px var(--display);background:#fff;color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--deep);outline-offset:1px;border-color:var(--deep)}
.form .ok{display:none;background:var(--blue-soft);border-radius:10px;padding:12px 14px;font-size:15px}
.form[data-sent="true"] .ok{display:block}
.logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;font:600 15px var(--display);color:var(--ink-40)}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.person{display:flex;flex-direction:column;gap:6px;font-family:var(--display)}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.person b{font-size:17px}.person span{font-size:14px;color:var(--ink-55)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat b{font:600 42px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font:400 15px var(--display);color:var(--ink-70)}
/* footer */
footer{padding-block:48px 36px;font:400 14px var(--display);color:var(--ink-55);border-top:1px solid var(--ink-12)}
footer .top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
footer .logo svg{height:20px;width:auto;color:var(--ink)}
footer .tag{margin:14px 0 0;max-width:30ch;line-height:1.5}
footer h4{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer ul a{color:var(--ink);font-weight:500}
footer ul a:hover{color:var(--deep)}
footer .bottom{margin-top:36px;padding-top:18px;border-top:1px solid var(--ink-06);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
footer .credit{max-width:70ch;line-height:1.5}
@media(max-width:980px){
  .page-hero .wrap,.sec-head,.two,.feature,.feature.flip{grid-template-columns:1fr}.feature.flip .fcopy{order:0}
  .three,.tiers,.people{grid-template-columns:1fr 1fr}
  footer .top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.three,.tiers,.people,.posts{grid-template-columns:1fr}footer .top{grid-template-columns:1fr}.page-hero{padding-block:40px 32px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}