/* ============================================================
   Noddis Design System: design.css
   Tokens + shared components for every Noddis page.
   See design.md for usage. Requires fonts.css (Satoshi) and
   the JetBrains Mono / Inter Google Fonts link.
   ============================================================ */

:root{
  /* color: paper, charcoal, gray. nothing else. */
  --paper:#FFFFFF;
  --paper-2:#F4F5F6;
  --mist:#E6E7EA;
  --ink:#0F0F10;
  --ink-2:#2B2D31;
  --ink-3:#17181A;
  --gray:#6B6F76;
  --gray-2:#9A9EA6;
  --line:rgba(15,15,16,.09);
  --line-2:rgba(15,15,16,.16);
  --dark:#0F0F10;
  --dark-2:#17181A;
  --dark-line:rgba(255,255,255,.1);
  --dark-mut:#8E9299;

  /* shape + motion */
  --r-lg:20px;
  --r-md:14px;
  --ease:cubic-bezier(.22,.9,.24,1);
  /* type */
  --font:'Satoshi','Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{background:var(--paper) url(/marketing/media/7c1d89ffcff0a31c.webp) center/cover fixed no-repeat;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;cursor:pointer}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- type ---------- */
.h-display{font-size:clamp(44px,7vw,100px);line-height:.99;letter-spacing:-.035em;font-weight:900}
.h-display .it,.h2 .it{font-style:italic;font-weight:300;letter-spacing:-.01em}
.h2{font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em;font-weight:900}
.lede{font-size:clamp(16px,1.4vw,19px);color:var(--gray);max-width:54ch;line-height:1.6;font-weight:400}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);font-weight:500;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:100px;
  font-size:15px;font-weight:500;letter-spacing:-.01em;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo-img{height:32px;width:auto;display:block;transition:transform .5s var(--ease)}
.logo:hover .logo-img{transform:scale(1.03)}
.nav-links{display:flex;gap:34px;font-size:14px;font-weight:500}
.nav-links a{color:var(--gray);position:relative;transition:color .3s}
.nav-links a:hover,.nav-links a.cur{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--ink);transition:width .35s var(--ease)}
.nav-links a:hover::after,.nav-links a.cur::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-cta .login{font-size:14px;font-weight:500;color:var(--gray);transition:color .3s}
.nav-cta .login:hover{color:var(--ink)}
.nav-cta .btn{padding:9px 16px;font-size:14px}
@media (max-width:860px){.nav-links{display:none}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--dark-line);padding:44px 0;background:var(--dark);color:var(--dark-mut)}
.footer .logo-img{height:28px;filter:invert(1)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:26px;font-size:13px}
.footer-links a{transition:color .3s}
.footer-links a:hover{color:#fff}
.footer-copy{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- sections ---------- */
.section{padding:clamp(90px,12vh,150px) 0}
.page-hero{padding:190px 0 70px}
.page-hero .eyebrow{margin-bottom:26px}
.page-hero .lede{margin-top:26px}
.page-hero .hero-cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

/* ---------- filter pills ---------- */
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb{
  font-size:13px;font-weight:500;color:var(--gray);
  border:1px solid var(--line-2);border-radius:100px;padding:7px 13px;
  transition:all .3s var(--ease);
}
.fb:hover{border-color:var(--ink);color:var(--ink)}
.fb.on{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);margin-left:auto}

/* ---------- reveal ---------- */
[data-rv]{opacity:1}

/* August consistency pass */
.wrap{max-width:1320px;width:100%;margin:0 auto;padding-left:clamp(22px,4vw,52px);padding-right:clamp(22px,4vw,52px)}
/* The header must sit on the same 1320px measure as the homepage, which is the
   source of truth. These two rules un-capped it, so the logo and the CTA on
   Features and Timeline sat 60px further out than on the homepage. */
.footer-inner{max-width:none;width:100%}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:750;font-size:18px;letter-spacing:-.025em}
.logo-mark{width:29px;height:29px;object-fit:contain;display:block}
.footer .logo-mark{filter:none}
.footer-logo{color:#fff}
.nav-links{gap:36px}
.nav-cta{gap:20px}
.page-hero .hero-copy{width:100%;max-width:700px}
.page-hero .wrap.hero-grid{grid-template-columns:minmax(0,700px) minmax(420px,1fr);gap:clamp(42px,6vw,86px)}
.footer{padding:42px 0}
.footer-inner{min-height:48px}
@media(max-width:900px){.page-hero .wrap.hero-grid{grid-template-columns:1fr}.page-hero .hero-copy{max-width:760px}.nav-cta .login{display:none}}


/* Shared site shell: one header and one footer on every page */
noddis-header,noddis-footer{display:block}
.nav-inner{height:72px}
.logo-mark{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.footer .logo-mark{width:30px;height:30px;filter:none}
.footer-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:30px}
.footer-links{justify-content:center;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.page-hero{padding:164px 0 54px}
.page-hero .h-display{font-size:clamp(46px,5.4vw,76px);max-width:11.5ch}
.page-hero .hero-copy{max-width:720px}
@media(max-width:900px){
  .footer-inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .footer-links{justify-content:center}
}
@media(max-width:640px){
  .nav-cta .login{display:none}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:10px 15px}
  .page-hero{padding-top:132px}
  .page-hero .h-display{font-size:clamp(42px,12vw,58px)}
}

/* ---------- final marketing consistency ---------- */
/* All marketing pages share the paper surface and quiet column rhythm from
   the home page. The overlay is non-interactive and sits below page content. */
body{position:relative;isolation:isolate;font-family:var(--font)}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.2;
  background-image:linear-gradient(to right,rgba(15,15,16,.12) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(to bottom,black 0%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 92%);
}
body>*{position:relative;z-index:1}
/* The rule above lifts page content over the paper grid, but applying it to the
   header host turns that host into a stacking context, which scopes the fixed
   .nav's z-index:100 inside it. The host then competes with its siblings at
   z-index:1, so any later section paints over the nav and swallows its clicks.
   Keeping the host static lets .nav's z-index compete at the body level again. */
body>noddis-header{position:static;z-index:auto}
/* Was 128px, which left too much dead space under the 73px fixed nav.
   Matches the homepage hero rhythm. */
.page-hero{padding-top:92px}
.page-hero .eyebrow.is-typewriting::after{
  content:"";display:inline-block;width:1px;height:1em;margin-left:5px;
  background:currentColor;vertical-align:-.08em;animation:marketingTypeCaret .72s steps(1,end) infinite;
}
@keyframes marketingTypeCaret{50%{opacity:0}}
.pricing-note{
  display:block!important;margin-top:18px!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;color:var(--gray)!important;
  animation:marketingPricingReveal .8s var(--ease) both;
}
.pricing-note b{color:var(--ink)!important}
@keyframes marketingPricingReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:640px){.page-hero{padding-top:80px}}

/* Branded legal pages */
.legal-main{padding:150px 0 100px;min-height:72vh}
.legal-hero{max-width:840px;margin-bottom:54px}
.legal-hero .eyebrow{margin-bottom:20px}
.legal-hero h1{font-size:clamp(44px,6vw,74px);line-height:1;letter-spacing:-.04em}
.legal-hero p{margin-top:22px;color:var(--gray);font-size:18px;line-height:1.65;max-width:70ch}
.legal-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:64px;align-items:start}
.legal-nav{position:sticky;top:110px;border-left:1px solid var(--line-2);padding-left:20px;display:flex;flex-direction:column;gap:11px;font-size:13px;color:var(--gray)}
.legal-nav a:hover{color:var(--ink)}
.legal-content{display:flex;flex-direction:column;gap:42px}
.legal-content section{scroll-margin-top:110px}
.legal-content h2{font-size:27px;line-height:1.15;letter-spacing:-.025em;margin-bottom:13px}
.legal-content p,.legal-content li{color:var(--gray);line-height:1.72;font-size:15px}
.legal-content ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.legal-callout{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.legal-callout strong{display:block;margin-bottom:7px}
@media(max-width:820px){.legal-layout{grid-template-columns:1fr}.legal-nav{display:none}}

/* The hero animation containers deliberately let their artwork spill, which is
   fine at desktop widths where there is room. On a phone that leak reached the
   document and gave the page a horizontal scroll. `clip` trims the horizontal
   axis without turning the vertical one into a scroll container the way
   overflow-x:hidden would. */
@media (max-width: 900px) {
  .hero-stage,
  .feature-motion {
    overflow-x: clip;
  }
  html,
  body {
    overflow-x: clip;
  }
}

/* iPad Safari rasterizes the large fixed WebP paper texture at a reduced
   backing resolution, then scales it while scrolling. That is the blocky
   background seen only at tablet widths. Use a vector-only paper wash there;
   the shared column overlay remains crisp at every device pixel ratio. */
@media (hover: none) and (pointer: coarse), (max-width: 1400px) {
  body {
    background: linear-gradient(135deg, #fff 0%, #f8f8f6 52%, #f1f1ef 100%);
    background-attachment: scroll;
  }
  body::before {
    position: absolute;
  }
}