/* home.css — auriginal.app brand landing (warm rebuild, 2026-06).
 * Light/warm "Capture it. Prove it. Believe it." system. Oxblood + cream +
 * gold (Au), verified teal for the check-state. CSP-clean: no inline styles,
 * Fraunces self-hosted via fonts.css, mono falls back to the system stack.
 *
 * Mark system:
 *   brand seal  = oxblood disc + gold ring + GOLD-LEG cream A   (authentic)
 *   verified seal = same seal, gold CHECK instead of gold leg    (verified)
 * Brand seal carries identity (nav, footer, captures). The verified seal only
 * appears AFTER a check runs (the demo result) — never pre-stamped. */

:root{
  --cream:#F7F2E9; --paper:#FFFFFF;
  --ink:#241A1C; --ink-2:#6E635E; --ink-3:#9B9089;
  --oxblood:#7A2230; --oxblood-deep:#6E1F28;
  --gold:#A87C33; --gold-soft:#C39A52;
  --teal:#1B8A6B; --teal-soft:#2FA982;
  --line:#E7DDCE; --line-strong:#D8CCB8;
  --radius:18px; --radius-sm:12px;
  --shadow:0 14px 40px rgba(74,42,30,.10); --shadow-sm:0 6px 18px rgba(74,42,30,.08);
  --maxw:1120px;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--sans);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-x:none;width:100%;max-width:100%;
  background:
    radial-gradient(1100px 620px at 92% -8%,rgba(195,154,82,.16) 0%,transparent 60%),
    radial-gradient(900px 600px at 2% 4%,rgba(122,34,48,.07) 0%,transparent 58%),
    var(--cream);
  background-attachment:fixed;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
a{color:inherit;}
.serif{font-family:var(--serif);}

/* marks */
.seal{display:inline-block;}
.seal svg{display:block;}

/* nav */
nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(247,242,233,.78);border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brandmark .seal svg{width:30px;height:30px;}
.brandmark span{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--oxblood-deep);}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 13px;border-radius:9px;transition:.15s;}
.nav-links a:hover{color:var(--ink);background:rgba(122,34,48,.06);}
.nav-links a.solid{background:var(--oxblood);color:#fff;box-shadow:0 4px 14px rgba(122,34,48,.28);}
.nav-links a.solid:hover{background:var(--oxblood-deep);}
/* hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;padding:9px;flex-direction:column;justify-content:center;gap:5px;}
.nav-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:var(--oxblood-deep);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* hero */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding:78px 0 70px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:22px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);}
h1.hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(44px,6vw,76px);line-height:1.0;letter-spacing:-.03em;color:var(--ink);}
h1.hero-title .b3{color:var(--gold);}
.hero-sub{font-size:18px;color:var(--ink-2);margin-top:24px;max-width:40ch;}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap;}
.appstore{display:inline-flex;align-items:center;gap:11px;background:var(--ink);border-radius:13px;padding:10px 18px;text-decoration:none;position:relative;}
.appstore.center{justify-content:center;}
.appstore svg{width:22px;height:22px;}
.appstore .as-text{display:flex;flex-direction:column;line-height:1.05;color:#fff;}
.appstore .as-small{font-size:10px;opacity:.75;letter-spacing:.4px;}
.appstore .as-big{font-size:16px;font-weight:600;font-family:var(--serif);}
.appstore .soon{position:absolute;top:-9px;right:-9px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 8px;border-radius:999px;text-transform:uppercase;}
.link-cta{font-size:15px;font-weight:500;text-decoration:none;color:var(--oxblood);display:inline-flex;align-items:center;gap:7px;padding:11px 2px;border-bottom:1.5px solid transparent;transition:.15s;}
.link-cta:hover{border-color:var(--oxblood);gap:11px;}

/* hero phone — iPhone mockup showing a sealed capture */
.phone{display:flex;justify-content:center;}
.phone svg{width:min(380px,92%);height:auto;filter:drop-shadow(0 30px 52px rgba(74,42,30,.28));}

/* sections */
section.band{padding-top:70px;padding-bottom:70px;}  /* vertical only — leave .wrap's horizontal gutter intact */
.kicker{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:14px;}
h2.band-title{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);}
.band-lede{font-size:18px;color:var(--ink-2);margin-top:16px;max-width:62ch;}

/* hook band */
.hook{background:var(--oxblood-deep);border-radius:var(--radius);padding:54px 48px;text-align:center;
  box-shadow:var(--shadow);position:relative;overflow:hidden;}
.hook::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(195,154,82,.4) 0%,transparent 70%);}
.hook p{font-family:var(--serif);font-size:clamp(24px,3.4vw,38px);line-height:1.28;color:#F7EFE2;font-weight:500;max-width:24ch;margin:0 auto;position:relative;}
.hook p b{color:var(--gold-soft);font-weight:600;}
.hook .sub{font-family:var(--sans);font-size:16px;color:rgba(247,239,226,.74);margin-top:18px;font-weight:400;letter-spacing:.2px;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);position:relative;}
.step .beat{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--oxblood);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.step .beat .n{width:26px;height:26px;border-radius:50%;background:rgba(122,34,48,.1);color:var(--oxblood);font-family:var(--sans);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.step p{font-size:15px;color:var(--ink-2);}

/* why grid */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px;}
.why{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;display:flex;gap:16px;box-shadow:var(--shadow-sm);}
.why .ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:rgba(27,138,107,.1);display:flex;align-items:center;justify-content:center;color:var(--teal);}
.why .ic svg{width:22px;height:22px;}
.why h4{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.why p{font-size:14.5px;color:var(--ink-2);}

/* demo */
.demo{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:center;margin-top:42px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.capture{border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;background:#eee;aspect-ratio:4/3;}
.capture .scene{width:100%;height:100%;display:block;}
.capture .qr{position:absolute;right:12px;bottom:12px;width:72px;height:72px;background:#fff;border-radius:9px;padding:6px;box-shadow:0 4px 12px rgba(0,0,0,.25);}
.capture .qr canvas{width:100%;height:100%;image-rendering:pixelated;}
.vp h3{font-family:var(--sans);font-size:20px;font-weight:600;margin-bottom:4px;}
.vp .vsub{font-size:13px;color:var(--ink-3);margin-bottom:18px;font-family:var(--mono);overflow-wrap:anywhere;word-break:break-word;}
.checks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.check{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2);opacity:.4;transition:opacity .3s;}
.check.run{opacity:1;}
.cbox{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--teal);animation:spin .7s linear infinite;display:none;}
.check.run .spin{display:block;} .check.done .spin{display:none;}
.check.done .cbox{border-color:var(--teal);background:var(--teal);}
.tick{display:none;color:#fff;} .check.done .tick{display:block;}
.check .ct{flex:1;} .check .cs{font-family:var(--mono);font-size:12px;color:var(--ink-3);}
.check.done .ct{color:var(--ink);} .check.done .cs{color:var(--teal);}
@keyframes spin{to{transform:rotate(360deg);}}
.vbtn{background:var(--oxblood);color:#fff;font-size:15px;font-weight:600;border:none;padding:13px 24px;border-radius:11px;cursor:pointer;box-shadow:0 6px 16px rgba(122,34,48,.28);transition:.15s;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);}
.vbtn:hover{background:var(--oxblood-deep);} .vbtn:disabled{opacity:.5;cursor:default;}
.result{display:none;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border-radius:12px;background:rgba(27,138,107,.08);border:1px solid rgba(27,138,107,.3);}
.result.show{display:flex;}
.result .seal svg{width:44px;height:44px;}
.result .rtitle{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--teal);}
.result .rsub{font-size:13px;color:var(--ink-2);}
.demo-foot{font-size:12.5px;color:var(--ink-3);margin-top:14px;}
.vlink{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(27,138,107,.4);}

/* download */
.download{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:56px 32px;box-shadow:var(--shadow);}
.download h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.download p{color:var(--ink-2);font-size:17px;margin:14px auto 26px;max-width:46ch;}
.download .appstore{margin:0 auto;}

/* organizations band */
.orgs{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--ink);border-radius:var(--radius);padding:36px 44px;box-shadow:var(--shadow);}
.orgs .ot{max-width:62ch;}
.orgs h3{font-family:var(--serif);font-size:22px;font-weight:600;color:#F7EFE2;margin-bottom:8px;}
.orgs p{font-size:15px;color:rgba(247,239,226,.7);}
.orgs a.btn{flex:0 0 auto;background:var(--gold);color:#fff;font-size:15px;font-weight:600;text-decoration:none;padding:12px 22px;border-radius:11px;transition:.15s;}
.orgs a.btn:hover{background:var(--gold-soft);}

/* footer */
footer{border-top:1px solid var(--line);margin-top:72px;padding:36px 0;text-align:center;}
footer .fb{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:8px;}
footer .fb .seal svg{width:22px;height:22px;}
footer .fb span{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--oxblood-deep);}
footer small{display:block;color:var(--ink-3);font-size:13px;}
footer small a{color:var(--ink-2);}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:16px;}
.footer-nav a{font-size:14px;color:var(--ink-2);text-decoration:none;}
.footer-nav a:hover{color:var(--oxblood);text-decoration:underline;}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.spin{animation:none;}}

@media (max-width:880px){
  body{background-attachment:scroll;}   /* fixed bg jitters on iOS during long scrolls */
  .hero{grid-template-columns:1fr;gap:26px;padding:44px 0 36px;}
  .phone{order:-1;}
  .phone svg{width:min(270px,70vw);}
  .steps{grid-template-columns:1fr;} .demo{grid-template-columns:1fr;} .why-grid{grid-template-columns:1fr;}
  .orgs{flex-direction:column;align-items:flex-start;gap:18px;}
  .hook{padding:40px 28px;}
  .nav-toggle{display:flex;}
  .nav-inner{position:relative;}
  .nav-links{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(247,242,233,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(74,42,30,.14);padding:8px 18px 16px;display:none;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 8px;font-size:16px;border-radius:8px;}
  .nav-links a.solid{margin-top:8px;text-align:center;padding:13px;}
}
@media (max-width:560px){
  .wrap{padding:0 22px;}
  section.band{padding-top:54px;padding-bottom:54px;}
  .hero{padding:32px 0 32px;}
  h1.hero-title{font-size:42px;line-height:1.04;}
  .hero-sub{font-size:16px;}
  .hero-actions{gap:12px;}
  .hook{padding:38px 26px;}
  .hook p{font-size:22px;line-height:1.34;}
  .hook .sub{font-size:14px;}
  h2.band-title{font-size:26px;}
  .band-lede{font-size:16px;}
  .step,.why{padding:22px 20px;}
  .demo{padding:26px;}
  .download{padding:48px 26px;}
  .orgs{padding:30px 26px;}
  .phone svg{width:235px;}
}