:root{
    --cream:#fff0e2;
    --ink:#3a1508;
    --ink-soft:#7a4a30;
    --orange:#ff6717;
    --coral:#ff5f4b;
    --amber:#ffa614;
    --salmon:#ff8d6f;
    --pink:#f84289;
    --pink-soft:#fc8fb3;
    --rose:#fc546d;
    --peach:#ffbfac;
    --peach-wash:#ffe6db;
    --paper:#fffaf4;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }
  body.loading{overflow:hidden; height:100vh;}
  h1,h2,h3,.display{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--orange);
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}

  /* ---------- loader ---------- */
  #loader{
    position:fixed; inset:0; z-index:999;
    background:var(--cream);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    transition:transform 0.7s cubic-bezier(.65,0,.35,1);
  }
  body.loaded #loader{ transform:translateY(-100%); pointer-events:none; }
  #loader .mark{
    width:132px; height:132px;
    clip-path:inset(0 100% 0 0);
    animation:reveal 0.9s cubic-bezier(.2,.9,.25,1.15) 0.15s forwards;
  }
  #loader .mark img{ width:100%; height:100%; border-radius:24px; }
  #loader .tag{
    margin-top:18px;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    opacity:0;
    transform:translateY(8px);
    animation:fadeUp 0.6s ease 1s forwards;
  }
  #loader .bar{
    width:80px; height:3px; border-radius:2px;
    background:var(--peach);
    margin-top:22px;
    overflow:hidden;
  }
  #loader .bar span{
    display:block; height:100%; width:0%;
    background:var(--orange);
    animation:fill 2.4s cubic-bezier(.4,0,.2,1) 0.2s forwards;
  }
  @keyframes reveal{ to{ clip-path:inset(0 0 0 0); } }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
  @keyframes fill{ to{ width:100%; } }
  @media (prefers-reduced-motion:reduce){
    #loader .mark{ animation:none; clip-path:inset(0 0 0 0); }
    #loader .tag{ animation:none; opacity:1; transform:none; }
    #loader .bar span{ animation:none; width:100%; }
    #loader{ transition:none; }
  }

  /* ---------- signature underline ---------- */
  .swoosh{ display:inline-block; position:relative; }
  .swoosh svg{
    position:absolute; left:0; bottom:-6px; width:100%; height:16px;
    overflow:visible;
  }
  .swoosh path{
    fill:none; stroke:var(--pink); stroke-width:5; stroke-linecap:round;
    stroke-dasharray:220; stroke-dashoffset:220;
    transition:stroke-dashoffset 1s ease 0.2s;
  }
  .swoosh.in-view path{ stroke-dashoffset:0; }

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,240,226,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--peach);
  }
  nav{
    max-width:1180px; margin:0 auto; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; position:relative;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; text-decoration:none; flex-shrink:0; }
  .brand img{ width:34px; height:34px; border-radius:9px; }
  .navlinks{ display:flex; gap:6px; font-size:14px; font-weight:500; }
  .navlinks a{
    text-decoration:none; color:var(--ink-soft);
    padding:8px 14px; border-radius:100px;
    transition:background 0.15s, color 0.15s;
  }
  .navlinks a:hover{ color:var(--orange); background:var(--peach); }
  .navlinks a.active{ color:var(--orange); background:var(--peach); }
  .navcta{
    font-size:14px; font-weight:600; text-decoration:none;
    background:var(--orange); color:var(--paper);
    padding:10px 20px; border-radius:100px; flex-shrink:0;
  }
  .navcta:hover{ background:var(--coral); }
  .navtoggle{ display:none; }
  @media (max-width:900px){
    .navlinks{ display:none; }
    .navtoggle{
      display:flex; width:38px; height:38px; border-radius:10px;
      border:1px solid var(--peach); background:var(--paper);
      align-items:center; justify-content:center; cursor:pointer;
    }
    .navlinks.open{
      display:flex; flex-direction:column; gap:2px;
      position:absolute; top:56px; left:24px; right:24px;
      background:var(--paper); border:1px solid var(--peach);
      border-radius:14px; padding:10px; box-shadow:0 8px 24px rgba(58,21,8,0.08);
    }
    .navlinks.open a{ padding:12px 14px; }
  }

  /* ---------- hero ---------- */
  .hero{
    max-width:1120px; margin:0 auto; padding:96px 24px 60px;
    text-align:center;
  }
  .hero h1{
    font-size:clamp(40px,7vw,74px);
    line-height:1.05;
  }
  .hero p.lede{
    max-width:520px; margin:26px auto 0;
    font-size:18px; line-height:1.6; color:var(--ink-soft);
  }
  .hero .ctas{
    margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  }
  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
    text-decoration:none; padding:13px 26px; border-radius:100px;
    display:inline-block; border:1px solid transparent; cursor:pointer;
  }
  .btn.primary{ background:var(--orange); color:var(--paper); }
  .btn.primary:hover{ background:var(--coral); }
  .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
  .btn.ghost:hover{ background:var(--peach); }

  /* floating tag chips under hero */
  .chiprow{
    margin-top:56px; display:flex; gap:16px; justify-content:center;
    flex-wrap:wrap;
  }
  .chip{
    background:var(--paper); border:1px solid var(--peach); border-radius:12px;
    padding:12px 16px; font-size:13px; font-family:'IBM Plex Mono',monospace;
    color:var(--ink-soft); max-width:200px; text-align:left;
    transform:rotate(var(--r,0deg));
  }
  .chip b{ color:var(--ink); display:block; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:4px; font-weight:600;}

  /* ---------- section bands ---------- */
  .band{ width:100%; }
  .band-a{ background:var(--paper); border-top:1px solid var(--peach); border-bottom:1px solid var(--peach); padding:100px 0; }
  .band-b{ background:var(--peach-wash); border-bottom:1px solid var(--peach); padding:100px 0; }
  .section-label{ text-align:center; display:block; margin-bottom:14px; }

  /* ---------- guessing vs knowing ---------- */
  .split{
    max-width:1120px; margin:0 auto; padding:0 24px;
  }
  .split h2{ font-size:clamp(28px,4vw,40px); text-align:center; margin-bottom:52px; }
  .cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:720px){ .cards{ grid-template-columns:1fr; } }
  .card{
    border-radius:20px; padding:32px;
  }
  .card.bad{ background:var(--paper); border:1px dashed var(--peach); }
  .card.good{ background:var(--orange); color:var(--paper); }
  .card .eyebrow2{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em;
    text-transform:uppercase; margin-bottom:14px; display:block;
  }
  .card.bad .eyebrow2{ color:var(--rose); }
  .card.good .eyebrow2{ color:var(--peach); }
  .card ul{ margin:0; padding:0; list-style:none; }
  .card li{
    padding:14px 0; font-size:16px; line-height:1.5;
    border-top:1px solid rgba(0,0,0,0.08);
  }
  .card.good li{ border-top:1px solid rgba(255,255,255,0.25); }
  .card li:first-of-type{ border-top:none; }

  /* ---------- feature tags ---------- */
  .tagsection{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .tagsection > .heading{ text-align:center; margin-bottom:64px; }
  .tagsection h2{ font-size:clamp(28px,4vw,40px); }
  .tagrow{
    display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
  }
  @media (max-width:960px){ .tagrow{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .tagrow{ grid-template-columns:1fr; } }
  .gifttag{
    background:var(--paper); border:1px solid var(--peach);
    border-radius:14px; padding:26px 18px 20px; position:relative;
    transform:rotate(var(--r,0deg));
  }
  .gifttag .hole{
    width:14px; height:14px; border-radius:50%;
    background:var(--cream); border:1px solid var(--peach);
    margin:0 auto 14px;
  }
  .gifttag .num{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange);
    display:block; margin-bottom:8px;
  }
  .gifttag h3{ font-size:17px; margin-bottom:8px; }
  .gifttag p{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; }

  /* ---------- quote ---------- */
  .quote{
    max-width:760px; margin:100px auto; padding:0 24px; text-align:center;
  }
  .quote blockquote{
    margin:0; font-family:'Bricolage Grotesque',sans-serif;
    font-size:clamp(24px,3.6vw,36px); font-weight:500; line-height:1.35;
    color:var(--ink);
  }
  .quote cite{
    display:block; margin-top:20px; font-style:normal;
    font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft);
  }

  /* ---------- founding ---------- */
  .founding{
    max-width:1120px; margin:0 auto 130px; padding:0 24px;
  }
  .foundbox{
    background:var(--ink); color:var(--cream);
    border-radius:24px; padding:60px 40px; text-align:center;
    position:relative; overflow:hidden;
  }
  .foundbox .eyebrow{ color:var(--amber); }
  .foundbox h2{ color:var(--paper); font-size:clamp(26px,4vw,38px); margin:14px 0 16px; }
  .foundbox p{ color:var(--peach); max-width:480px; margin:0 auto 30px; font-size:16px; line-height:1.6; }

  /* ---------- waitlist / footer ---------- */
  .waitlist{ max-width:640px; margin:0 auto 120px; padding:0 24px; text-align:center; }
  .waitlist h2{ font-size:clamp(26px,4vw,36px); margin-bottom:12px; }
  .waitlist p{ color:var(--ink-soft); margin:0 0 28px; font-size:16px; }
  .waitform{
    display:flex; gap:10px; max-width:420px; margin:0 auto; flex-wrap:wrap; justify-content:center;
  }
  .waitform input{
    flex:1; min-width:200px; padding:13px 16px; border-radius:100px;
    border:1px solid var(--peach); background:var(--paper);
    font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  }
  .waitform input:focus{ outline:2px solid var(--orange); outline-offset:2px; }

  footer{
    border-top:1px solid var(--peach); padding:32px 24px;
  }
  footer .inner{
    max-width:1120px; margin:0 auto; display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:12px;
    font-size:13px; color:var(--ink-soft);
  }
  footer .flinks{ display:flex; gap:20px; }
  footer a{ text-decoration:none; }
  footer a:hover{ color:var(--orange); }
/* ---------- generic inner-page hero (feedback, contact, demo) ---------- */
.pagehero{ max-width:760px; margin:0 auto; padding:calc(76px + env(safe-area-inset-top)) 24px 20px; text-align:center; }
.pagehero h1{ font-size:clamp(34px,5.5vw,52px); line-height:1.1; }
.pagehero p.lede{ max-width:480px; margin:20px auto 0; font-size:17px; line-height:1.6; color:var(--ink-soft); }

/* ---------- feedback form ---------- */
.formcard{
  max-width:560px; margin:36px auto 0; padding:36px;
  background:var(--paper); border:1px solid var(--peach); border-radius:20px;
}
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink);
}
.field .hint{ font-weight:400; color:var(--ink-soft); font-size:12px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"]{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--peach); background:var(--cream);
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  line-height:1.4;
}
.field textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--peach); background:var(--cream);
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--orange); outline-offset:1px;
}
.field .error{ color:var(--rose); font-size:13px; margin-top:6px; }

.stars{
  display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px;
}
.stars input{ position:absolute; opacity:0; width:0; height:0; }
.stars label{
  font-size:30px; line-height:1; cursor:pointer; color:var(--peach);
  transition:color 0.15s, transform 0.15s;
}
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label{
  color:var(--amber);
}

.alert-success{
  max-width:560px; margin:28px auto 0; padding:14px 18px;
  background:#fff; border:1px solid var(--orange); color:var(--orange);
  border-radius:12px; font-weight:600; font-size:14px; text-align:center;
}

.reassure{
  max-width:400px; margin:24px auto 0; text-align:center;
  font-size:13px; color:var(--ink-soft);
}

/* ---------- toast notification ---------- */
.toast{
  position:fixed; top:24px; left:50%;
  transform:translateX(-50%) translateY(-16px);
  background:var(--ink); color:var(--cream);
  padding:14px 22px; border-radius:100px;
  font-weight:600; font-size:14px; font-family:'Inter',sans-serif;
  box-shadow:0 10px 30px rgba(58,21,8,0.25);
  opacity:0; z-index:1000;
  display:flex; align-items:center; gap:10px;
  transition:opacity 0.35s ease, transform 0.35s ease;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; }

/* ---------- team / contact page ---------- */
.team{ max-width:1120px; margin:0 auto; padding:0 24px; }
.teamgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:20px;
}
@media (max-width:800px){ .teamgrid{ grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto; } }
.teamgrid-solo{
  grid-template-columns:1fr; max-width:340px; margin-left:auto; margin-right:auto;
}
.teamcard{
  background:var(--paper); border:1px solid var(--peach); border-radius:20px;
  padding:32px 24px; text-align:center;
}
.avatar{
  width:104px; height:104px; border-radius:50%; margin:0 auto 18px;
  overflow:hidden; border:3px solid var(--peach-wash);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.mono{
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:28px;
  color:var(--paper);
}
.teamcard h3{ font-size:17px; margin-bottom:2px; }
.teamcard .role{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange);
  text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; display:block;
}
.teamcard p.bio{ font-size:14px; line-height:1.5; color:var(--ink-soft); margin:0 0 14px; }
.teamcard a.mail{
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  font-family:'IBM Plex Mono',monospace;
}
.teamcard a.mail:hover{ color:var(--orange); }

.contact-direct{
  max-width:560px; margin:60px auto 0; padding:0 24px; text-align:center;
}
.contact-direct .mailbig{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(22px,3.4vw,30px);
  font-weight:600; color:var(--orange); text-decoration:none; display:inline-block; margin-top:8px;
}
.contact-direct .mailbig:hover{ color:var(--coral); }

/* ---------- auth pages (register/login) ---------- */
.formcard .field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:520px){ .formcard .field-row{ grid-template-columns:1fr; } }
.checkbox-row{
  display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:14px; color:var(--ink-soft);
}
.checkbox-row input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--orange); cursor:pointer;
}
.authlinks{
  text-align:center; margin-top:20px; font-size:14px; color:var(--ink-soft);
}
.authlinks a{ color:var(--orange); text-decoration:none; font-weight:600; }
.authlinks a:hover{ color:var(--coral); }
.authlinks .sep{ margin:0 8px; color:var(--peach); }
.alert-notice{
  max-width:560px; margin:28px auto 0; padding:14px 18px;
  background:var(--paper); border:1px solid var(--peach); color:var(--ink-soft);
  border-radius:12px; font-size:14px; text-align:center;
}

/* ---------- nav auth area ---------- */
.navauth{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.navauth .navlogin{
  font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  padding:8px 14px; border-radius:100px; transition:background 0.15s, color 0.15s;
}
.navauth .navlogin:hover{ color:var(--orange); background:var(--peach); }
.avatarbtn{
  width:38px; height:38px; border-radius:50%; overflow:hidden;
  border:2px solid var(--peach); display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--paper); text-decoration:none;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:14px;
  flex-shrink:0; transition:border-color 0.15s;
}
.avatarbtn:hover{ border-color:var(--orange); }
.avatarbtn img{ width:100%; height:100%; object-fit:cover; }

/* ---------- profile page ---------- */
.profilecard{
  max-width:560px; margin:36px auto 0; padding:36px;
  background:var(--paper); border:1px solid var(--peach); border-radius:20px;
}
.profilecard + .profilecard{ margin-top:24px; }
.profilecard h2{ font-size:19px; margin-bottom:6px; }
.profilecard .subtext{ font-size:13px; color:var(--ink-soft); margin:0 0 20px; }
.avatar-upload{ display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.avatar-upload .preview{
  width:88px; height:88px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:3px solid var(--peach-wash); display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--paper); font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600; font-size:30px;
}
.avatar-upload .preview img{ width:100%; height:100%; object-fit:cover; }
.avatar-upload .filepick{ font-size:13px; color:var(--ink-soft); }
.avatar-upload input[type="file"]{
  font-size:13px; font-family:'Inter',sans-serif; color:var(--ink-soft);
}
.danger-zone{ border-color:var(--rose); }
.danger-zone h2{ color:var(--rose); }

.profile-topbar{
  max-width:560px; margin:24px auto 0; padding:0 24px;
  display:flex; justify-content:center;
}
.profile-topbar .btn{
  padding:8px 18px; font-size:13px;
}

/* ---------- PWA login standalone layout ---------- */
html.pwa-standalone{
  min-height:100dvh;
  overflow-x:hidden;
}

html.pwa-standalone header{
  position:relative;
  top:auto;
  padding:0;
}

html.pwa-standalone nav{
  width:100%;
  max-width:1180px;
  box-sizing:border-box;
  padding:
    max(14px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    14px
    max(20px, env(safe-area-inset-left));
}

html.pwa-standalone main{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding-bottom:max(100px, env(safe-area-inset-bottom));
}

html.pwa-standalone .pagehero{
  box-sizing:border-box;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:36px 20px 20px;
}

html.pwa-standalone .formcard{
  box-sizing:border-box;
  width:calc(100% - 32px);
  max-width:560px;
  margin:36px auto 0;
  padding:36px;
}

@media (max-width:520px){
  html.pwa-standalone .pagehero{
    padding:28px 16px 16px;
  }

  html.pwa-standalone .formcard{
    width:calc(100% - 32px);
    margin:28px auto 0;
    padding:24px 20px;
  }
}