/* ---- Trusters 3.0 — waitlist landing ---- */
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Extralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F7F5F1; --paper-warm:#EFEAE2; --ink:#111111; --ink-soft:#2A2A28;
  --ink-muted:#6B6A66; --ink-faint:#A8A6A0; --rule-soft:#E4E0D8; --bg-dark:#0E0E0E;
  --blue-300:#B8E0E8; --blue-500:#6BABBA; --blue-700:#2E5C68; --blue-800:#1B3A42;
  --on-dark-1:#F7F5F1; --on-dark-2:#BFBDB6; --on-dark-3:#7A7975; --rule-dark:rgba(247,245,241,0.16);
  --r1:8px; --r2:12px; --r3:16px;
  --sans:'General Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:80px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
.grain{position:fixed;inset:0;background-image:url('assets/grain-tile.png');background-repeat:repeat;
  mix-blend-mode:multiply;opacity:.5;pointer-events:none;z-index:9999}
img{max-width:100%;display:block}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-muted)}
.num{color:var(--blue-500)}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,245,241,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav img{height:28px;width:auto}
.nav .links{display:flex;align-items:center;gap:26px}
.nav .links a:not(.btn){font-size:14px;color:var(--ink-soft);text-decoration:none;transition:opacity .2s}
.nav .links a:hover{opacity:.6}
.nav .links a.hide{display:inline}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:var(--r2);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:14px 22px;transition:opacity .2s,background .2s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--blue-700)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-soft);padding:13px 21px}
.btn-ghost:hover{background:var(--paper-warm)}
.btn-sm{padding:10px 16px;font-size:11px}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{opacity:.82}

/* sections */
section{padding:var(--pad) 0}
.s-eyebrow{margin-bottom:18px}
h1,h2,h3{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
h2{font-size:36px;margin-bottom:18px}
h3{font-size:18px}
p.lead{font-size:19px;color:var(--ink-soft);line-height:1.6}
.muted{color:var(--ink-muted)}

/* hero */
.hero{padding:72px 0 64px}
.hero h1{font-size:62px;line-height:.98;margin:18px 0 0;max-width:15ch}
.hero .sub{font-size:20px;color:var(--ink-soft);margin:24px 0 0;max-width:54ch;line-height:1.55}
.hero .cta{display:flex;gap:12px;margin:34px 0 20px;flex-wrap:wrap}
.assure{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:8px}
.assure span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-muted)}
.assure i{color:var(--blue-500);font-size:16px}
.scarcity{margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:9px;background:var(--paper-warm);border-radius:var(--r2);padding:10px 15px}
.scarcity b{color:var(--blue-700);font-weight:500}

/* image / screenshot frames (placeholders) */
.shot{position:relative;border:1px solid var(--rule-soft);border-radius:var(--r3);background:var(--paper-warm);
  overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.shot .ph{padding:40px 24px;position:relative;z-index:1}
.shot .ph .pl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.shot .ph .pd{font-size:13px;color:var(--ink-faint);margin-top:8px;max-width:34ch;line-height:1.45}
.shot .gd{position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:multiply;opacity:.45}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.hero-shot{min-height:380px;margin-top:48px}
.shot.dark{background:var(--bg-dark)}
.shot.dark .pl{color:var(--on-dark-2)}.shot.dark .pd{color:var(--on-dark-3)}
.shot.dark .gd{mix-blend-mode:screen;opacity:.2}
.shot.r169{aspect-ratio:16/9}

/* frames holding a real screenshot size to the image */
.shot.has-img{display:block;background:var(--paper-warm);min-height:0;aspect-ratio:auto;align-items:stretch}
.shot.has-img img{width:100%;height:auto;display:block;object-fit:unset}

/* problem band (dark) */
.band-dark{background:var(--bg-dark);color:var(--on-dark-1);position:relative;overflow:hidden}
.band-dark .gd{position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:screen;opacity:.18;pointer-events:none}
.band-dark h2{color:var(--on-dark-1)}
.band-dark .lead{color:var(--on-dark-2)}
.band-dark .eyebrow{color:var(--on-dark-3)}

/* pillars / feature grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}
.feature{}
.feature .fi{width:42px;height:42px;border-radius:var(--r2);background:var(--paper-warm);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);margin-bottom:16px}
.feature .fi i{font-size:21px}
.feature h3{margin-bottom:10px;font-size:17px}
.feature p{font-size:15px;color:var(--ink-muted);line-height:1.55}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px;counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .sn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--blue-500);margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:15px;color:var(--ink-muted);line-height:1.55}

/* feature rows (alternating) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:56px}
.frow:first-of-type{margin-top:36px}
.frow .copy h3{font-size:24px;margin-bottom:14px;text-transform:uppercase}
.frow .copy p{font-size:16px;color:var(--ink-muted);line-height:1.6}
.frow .shot{min-height:300px}
.frow.flip .copy{order:2}

/* who for / not for */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
.qcard{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r3);padding:28px 28px}
.qcard h3{font-size:15px;margin-bottom:16px}
.qcard ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.qcard li{display:flex;gap:11px;font-size:15px;color:var(--ink-soft);line-height:1.45}
.qcard li i{flex-shrink:0;font-size:18px;margin-top:1px}
.qcard.yes li i{color:var(--blue-500)}
.qcard.no{background:var(--paper-warm)}
.qcard.no li{color:var(--ink-muted)}
.qcard.no li i{color:var(--ink-faint)}

/* founders */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
.founder{display:flex;gap:18px;align-items:flex-start}
.founder .av{width:64px;height:64px;border-radius:50%;background:var(--paper-warm);border:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--ink-muted);flex-shrink:0;text-align:center;line-height:1.2}
.founder h3{font-size:17px;text-transform:none;letter-spacing:0}
.founder .role{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-500);margin:3px 0 9px}
.founder p{font-size:14.5px;color:var(--ink-muted);line-height:1.55}

/* social proof — testimonials */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.tcard{border:1px solid var(--rule-soft);border-radius:var(--r3);padding:26px 24px;background:var(--paper);
  display:flex;flex-direction:column;gap:18px}
.tcard .mark{color:var(--blue-500);font-size:22px;line-height:1}
.tcard .quote{font-size:15px;line-height:1.6;color:var(--ink-soft);flex:1}
.tcard .who{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.tcard .who .role{display:block;color:var(--ink-faint);margin-top:3px}

/* faq */
.faq{max-width:780px;margin:0 auto}
.qa{border-top:1px solid var(--rule-soft);padding:22px 0}
.qa:last-child{border-bottom:1px solid var(--rule-soft)}
.qa h3{font-size:17px;text-transform:none;letter-spacing:0;margin-bottom:10px}
.qa p{font-size:15.5px;color:var(--ink-muted);line-height:1.6}

/* waitlist form */
.cta-band{background:var(--bg-dark);color:var(--on-dark-1);position:relative;overflow:hidden}
.cta-band .gd{position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:screen;opacity:.18;pointer-events:none}
.cta-band h2{color:var(--on-dark-1)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;position:relative;z-index:1}
.cta-grid .intro .lead{color:var(--on-dark-2);font-size:17px}
.cta-grid .assure span{color:var(--on-dark-2)}
.form{background:var(--paper);border-radius:var(--r3);padding:28px}
.form .fl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin:0 0 7px}
.form .field{margin-bottom:16px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--rule-soft);border-radius:var(--r2);
  background:#fff;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--blue-500)}
.form textarea{min-height:74px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .fine{font-size:12px;color:var(--ink-muted);margin-top:12px;line-height:1.5;text-align:center}

/* booking */
.book{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--paper-warm);
  border-radius:var(--r3);padding:30px 34px;flex-wrap:wrap}
.book .bt h3{font-size:20px;margin-bottom:8px}
.book .bt p{font-size:15px;color:var(--ink-muted);max-width:46ch}

/* footer */
footer{border-top:1px solid var(--rule-soft);padding:56px 0 64px}
footer .frow2{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
footer img{height:28px;margin-bottom:16px}
footer .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);line-height:1.8}
footer .fl{display:flex;gap:24px;flex-wrap:wrap}
footer .fl a{font-size:13px;color:var(--ink-soft);text-decoration:none}
footer .fl a:hover{opacity:.6}
footer .legal{font-size:12px;color:var(--ink-faint);margin-top:32px}

/* questionnaire (step 2) */
.qz{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:48px 0}
.qz-card{width:100%;max-width:700px;background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r3);padding:44px}
.qz-step{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);margin-bottom:14px}
.qz-card h1{font-size:30px;margin-bottom:10px}
.qz-card .qz-sub{color:var(--ink-muted);font-size:16px;margin-bottom:14px}
.qz-prog{height:4px;background:var(--paper-warm);border-radius:99px;margin-bottom:30px;overflow:hidden}
.qz-prog i{display:block;height:100%;width:85%;background:var(--blue-500);border-radius:99px}
.q{margin-bottom:26px}
.q .ql{font-size:15.5px;font-weight:500;margin-bottom:12px;display:block;line-height:1.4}
.q .ql .opt-note{font-weight:400;color:var(--ink-faint);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-left:6px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.opt span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-soft);border-radius:var(--r2);padding:10px 15px;font-size:14px;color:var(--ink-soft);background:var(--paper-warm);transition:background .15s,color .15s,border-color .15s}
.opt input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--blue-500);outline-offset:1px}
.q input[type=text],.q input[type=url],.q textarea{width:100%;border:1px solid var(--rule-soft);border-radius:var(--r2);background:#fff;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none}
.q input:focus,.q textarea:focus{border-color:var(--blue-500)}
.q textarea{min-height:70px;resize:vertical}
.qz-actions{margin-top:32px}
.qz-actions .btn{width:100%;justify-content:center}
.qz-fine{font-size:12.5px;color:var(--ink-muted);text-align:center;margin-top:14px}
.qz-done{text-align:center;padding:24px 10px}
.qz-done .ic{width:58px;height:58px;border-radius:50%;background:var(--blue-300);color:var(--blue-700);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:30px}
.qz-done h1{font-size:28px;margin-bottom:12px}
.qz-done p{color:var(--ink-muted);max-width:44ch;margin:0 auto 24px;font-size:16px;line-height:1.6}

/* ---- Motion: scroll reveal + hover micro-interactions ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);filter:blur(6px);
    transition:opacity .85s cubic-bezier(.22,.61,.36,1),
               transform .85s cubic-bezier(.22,.61,.36,1),
               filter .85s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
  .reveal.in{opacity:1;transform:none;filter:none}

  /* hover lift on cards */
  .tcard,.qcard{transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .3s ease}
  .tcard:hover{transform:translateY(-4px);border-color:var(--blue-500)}
  .qcard:hover{transform:translateY(-4px)}

  /* feature icon comes alive on hover */
  .feature .fi{transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
  .feature:hover .fi{background:var(--blue-300);color:var(--blue-800);transform:translateY(-3px)}

  /* step accent + founder avatar */
  .step{transition:border-top-color .3s ease}
  .step:hover{border-top-color:var(--blue-500)}
  .founder .av{transition:border-color .3s ease,color .3s ease}
  .founder:hover .av{border-color:var(--blue-500);color:var(--blue-700)}

  /* screenshots ease up slightly on hover */
  .shot.has-img img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
  .shot.has-img:hover img{transform:scale(1.02)}
}

/* button arrow slides on hover (both motion prefs — tiny, no reduced-motion concern) */
.btn i.ti-arrow-right{transition:transform .25s ease}
.btn:hover i.ti-arrow-right{transform:translateX(4px)}

/* ---- Inline content editor (admin mode) ---- */
#admin-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:10000;
  display:none;align-items:center;gap:10px;background:var(--ink);color:var(--on-dark-1);
  padding:10px 12px;border-radius:var(--r2);box-shadow:0 10px 34px rgba(0,0,0,.28)}
#admin-bar.on{display:flex}
#admin-badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-300);padding-right:2px}
#admin-bar button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule-dark);background:transparent;color:var(--on-dark-1);
  padding:8px 12px;border-radius:var(--r1);cursor:pointer;transition:background .2s,border-color .2s}
#admin-bar button:hover{background:rgba(247,245,241,.1)}
#admin-save{background:var(--blue-300);color:var(--ink);border-color:var(--blue-300)}
#admin-save:hover{opacity:.85;background:var(--blue-300)}
body.admin-mode [contenteditable]{outline:2px dashed rgba(107,171,186,.5);outline-offset:2px;border-radius:2px}
body.admin-mode [contenteditable]:focus{outline:2px solid var(--blue-500);background:rgba(107,171,186,.08)}
body.admin-mode img.editable-img{cursor:pointer;outline:2px dashed rgba(107,171,186,.45);outline-offset:3px}
body.admin-mode img.editable-img:hover{outline-color:var(--blue-500)}
body.admin-mode #flogo-trigger{cursor:pointer !important}

@media (max-width:860px){
  .qz-card{padding:28px 22px}
  :root{--pad:56px}
  .nav .links a.hide{display:none}
  .hero h1{font-size:42px}
  h2{font-size:28px}
  .grid3,.steps,.frow,.cols2,.founders,.wall,.cta-grid{grid-template-columns:1fr;gap:20px}
  .frow.flip .copy{order:0}
  .hero .shot.hero-shot{min-height:240px}
}