/* ============================================================
   TERRAMAPPA · COMING SOON
   Built on tokens.css (the design-system source of truth).
   Single all-ink aesthetic — the hero, promoted to a whole page.
   "Ink on vellum," cartographic, calm, rounded. No product UI shown.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;overflow-x:hidden;}
body{
  font-family:var(--tm-font-ui);
  background:var(--tm-ink);
  color:var(--tm-vellum);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  line-height:var(--tm-leading);
}
a{color:inherit;}
::selection{background:rgba(192,89,43,.35);color:var(--tm-vellum);}

/* ---- the contour field: full-bleed survey art behind everything ---- */
.field-art{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.field-art .faint path{stroke:var(--tm-vellum);stroke-width:1;fill:none;opacity:.05;}
.field-art .route{
  fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:2800;stroke-dashoffset:2800;
  animation:tm-draw 2.4s var(--tm-ease-out) forwards;
}
.field-art .route.r1{stroke:var(--tm-terra);      opacity:.62; animation-delay:.15s;}
.field-art .route.r2{stroke:var(--tm-teal);       opacity:.5;  animation-delay:.38s;}
.field-art .route.r3{stroke:var(--tm-brass-light);opacity:.46; animation-delay:.6s;}
@keyframes tm-draw{to{stroke-dashoffset:0;}}

/* feathered ink scrim — pools ink behind the copy, never fully solid,
   feathers out before the bright routes resolve on the right */
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(115% 120% at 22% 42%,
      rgba(16,32,43,.94) 0%, rgba(16,32,43,.82) 30%,
      rgba(16,32,43,.42) 56%, rgba(16,32,43,0) 78%),
    linear-gradient(180deg, rgba(16,32,43,.55) 0%, rgba(16,32,43,0) 22%);
}

/* ---- shared layout ---- */
.page{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:0 var(--tm-6);}
.wrap{width:100%;max-width:var(--tm-maxw);margin:0 auto;}

/* ---- brand bar ---- */
.brandbar{padding:var(--tm-6) 0;}
.brandbar .logo{height:26px;width:auto;color:var(--tm-vellum);display:block;}

/* ---- hero ---- */
.hero{flex:1;display:flex;align-items:center;padding:var(--tm-12) 0 var(--tm-20);}
.hero-inner{max-width:760px;width:100%;min-width:0;}

.pill-hook{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--tm-font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tm-brass-light);background:rgba(210,163,65,.12);
  border:1px solid rgba(210,163,65,.3);padding:7px 14px;border-radius:var(--tm-radius-pill);}
.pill-hook .node{width:6px;height:6px;border-radius:50%;background:var(--tm-terra);
  box-shadow:0 0 0 0 rgba(192,89,43,.55);animation:tm-blip 2.8s var(--tm-ease) infinite;}
@keyframes tm-blip{0%{box-shadow:0 0 0 0 rgba(192,89,43,.5);}70%,100%{box-shadow:0 0 0 7px rgba(192,89,43,0);}}

.hero h1{font-family:var(--tm-font-display);font-weight:700;
  font-size:var(--tm-text-4xl);letter-spacing:-.035em;line-height:1.0;
  margin:var(--tm-5) 0 0;color:var(--tm-vellum);overflow-wrap:break-word;}
.hero h1 .em{color:var(--tm-brass-light);}
.hero .sub{font-size:var(--tm-text-lg);line-height:1.62;
  color:rgba(243,237,223,.82);max-width:58ch;margin-top:var(--tm-5);overflow-wrap:break-word;}
.hero .sub strong{color:var(--tm-vellum);font-weight:600;}

/* ---- email capture ---- */
.capture{margin-top:var(--tm-8);max-width:520px;}
.capture form{display:flex;gap:var(--tm-3);align-items:stretch;}
.capture .input{
  flex:1;min-width:0;
  font-family:var(--tm-font-ui);font-size:var(--tm-text-md);color:var(--tm-vellum);
  background:rgba(243,237,223,.06);border:1.5px solid rgba(243,237,223,.22);
  border-radius:var(--tm-radius-pill);padding:14px 20px;
  transition:border-color var(--tm-base) var(--tm-ease), box-shadow var(--tm-base) var(--tm-ease), background var(--tm-base);
}
.capture .input::placeholder{color:rgba(243,237,223,.45);}
.capture .input:hover{border-color:rgba(243,237,223,.4);}
.capture .input:focus{outline:none;border-color:var(--tm-terra);
  background:rgba(243,237,223,.09);box-shadow:0 0 0 4px var(--tm-focus);}
.capture .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.capture .note{margin-top:var(--tm-3);font-size:13px;color:rgba(243,237,223,.5);}
.capture .status{margin-top:var(--tm-3);font-size:14px;min-height:1.2em;}
.capture .status.err{color:var(--tm-danger);}
.capture.is-done .form-row{display:none;}
.capture .done{display:none;align-items:flex-start;gap:12px;}
.capture.is-done .done{display:flex;}
.capture .done svg{color:var(--tm-brass-light);width:26px;height:26px;flex:none;margin-top:2px;}
.capture .done b{font-family:var(--tm-font-display);font-size:var(--tm-text-lg);color:var(--tm-vellum);}
.capture .done p{margin:4px 0 0;color:rgba(243,237,223,.7);font-size:14px;}

/* ---- buttons (faithful to components.css) ---- */
.btn{
  --_bg:var(--tm-terra); --_fg:#fff; --_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--tm-2);
  font-family:var(--tm-font-display);font-weight:600;font-size:var(--tm-text-base);
  line-height:1;letter-spacing:.005em;
  padding:11px 20px;border-radius:var(--tm-radius-pill);
  background:var(--_bg);color:var(--_fg);border:1.5px solid var(--_bd);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--tm-fast) var(--tm-ease), box-shadow var(--tm-base) var(--tm-ease),
             background var(--tm-base) var(--tm-ease), filter var(--tm-base) var(--tm-ease);
}
.btn:hover{filter:brightness(1.06);box-shadow:var(--tm-shadow);}
.btn:active{transform:translateY(1px);filter:brightness(.96);}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none;box-shadow:none;transform:none;}
.btn--lg{padding:14px 26px;font-size:var(--tm-text-md);}
.btn.is-loading{color:transparent;position:relative;pointer-events:none;}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:tm-spin .7s linear infinite;}
@keyframes tm-spin{to{transform:rotate(360deg);}}

/* ---- hero trust row ---- */
.trust{display:flex;flex-wrap:wrap;gap:var(--tm-3) var(--tm-6);margin-top:var(--tm-10);}
.trust .t{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:rgba(243,237,223,.72);}
.trust .t svg{color:var(--tm-brass-light);width:16px;height:16px;flex:none;}

/* ---- contrast section: personal -> business ---- */
.contrast{padding:var(--tm-16) 0;border-top:1px solid rgba(243,237,223,.1);}
.contrast .eyebrow{font-family:var(--tm-font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tm-brass-light);}
.contrast h2{font-family:var(--tm-font-display);font-weight:700;
  font-size:var(--tm-text-2xl);letter-spacing:-.02em;line-height:1.18;
  max-width:760px;margin:var(--tm-4) 0 0;color:var(--tm-vellum);}
.contrast h2 span{display:block;}
.contrast h2 .l2{margin-top:var(--tm-3);}
.contrast h2 .em{color:var(--tm-terra);}

.cmp{margin-top:var(--tm-10);display:grid;gap:var(--tm-3);max-width:760px;}
.cmp-head{display:grid;grid-template-columns:1fr 40px 1fr;gap:var(--tm-4);
  padding:0 var(--tm-5);margin-bottom:2px;}
.cmp-head span{font-family:var(--tm-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.cmp-head .l{color:rgba(243,237,223,.45);}
.cmp-head .r{color:var(--tm-brass-light);}
.cmp .row2{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:var(--tm-4);
  padding:var(--tm-4) var(--tm-5);border:1px solid rgba(243,237,223,.1);
  border-radius:var(--tm-radius-lg);background:rgba(243,237,223,.025);
  transition:background var(--tm-base) var(--tm-ease), border-color var(--tm-base) var(--tm-ease);}
.cmp .row2:hover{background:rgba(243,237,223,.05);border-color:rgba(243,237,223,.18);}
.cmp .was{color:rgba(243,237,223,.55);font-size:var(--tm-text-base);}
.cmp .arrow{display:grid;place-items:center;color:var(--tm-terra);}
.cmp .arrow svg{width:20px;height:20px;}
.cmp .now{color:var(--tm-vellum);font-weight:500;font-family:var(--tm-font-display);
  font-size:var(--tm-text-md);}

/* ---- footer ---- */
footer.site{padding:var(--tm-12) 0 var(--tm-8);border-top:1px solid rgba(243,237,223,.1);
  margin-top:var(--tm-12);}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--tm-8);}
.foot-brand .logo{height:22px;width:auto;display:block;opacity:.95;}
.foot-brand .tagline{color:rgba(243,237,223,.6);font-family:var(--tm-font-display);
  font-size:var(--tm-text-base);margin-top:12px;}
.foot-meta{display:flex;flex-direction:column;gap:8px;text-align:right;}
.foot-meta a{color:rgba(243,237,223,.72);text-decoration:none;font-size:14px;
  transition:color var(--tm-fast);}
.foot-meta a:hover{color:var(--tm-vellum);}
.foot-meta .built{color:rgba(243,237,223,.5);font-size:13px;}
.foot-meta .built b{color:var(--tm-brass-light);font-weight:600;}
.legal{margin-top:var(--tm-10);padding-top:var(--tm-5);border-top:1px solid rgba(243,237,223,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:rgba(243,237,223,.45);}
.legal a{color:rgba(243,237,223,.55);text-decoration:underline;text-underline-offset:2px;}

/* ---- load-in reveals (degrade gracefully under reduced-motion) ---- */
.reveal{opacity:0;transform:translateY(16px);animation:tm-rise .85s var(--tm-ease-out) forwards;}
.d1{animation-delay:.08s;} .d2{animation-delay:.2s;} .d3{animation-delay:.32s;}
.d4{animation-delay:.46s;} .d5{animation-delay:.6s;} .d6{animation-delay:.74s;}
@keyframes tm-rise{to{opacity:1;transform:none;}}

/* ---- responsive ---- */
@media(max-width:760px){
  .hero{padding:var(--tm-8) 0 var(--tm-16);}
  .trust{flex-direction:column;gap:var(--tm-3);}
  .capture form{flex-direction:column;}
  .capture .btn{width:100%;}
  .contrast{padding:var(--tm-12) 0;}
  .cmp-head{display:none;}
  .cmp .row2{grid-template-columns:1fr;gap:10px;padding:var(--tm-4);}
  .cmp .arrow{justify-self:start;transform:rotate(90deg);}
  .cmp .was::before{content:"OpenClaw — ";color:rgba(243,237,223,.35);font-family:var(--tm-font-mono);
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:2px;}
  .foot-grid{flex-direction:column;align-items:flex-start;}
  .foot-meta{text-align:left;}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(34px,9.5vw,46px);}
}
@media (prefers-reduced-motion: reduce){
  .field-art .route{stroke-dashoffset:0;animation:none;}
  .reveal{opacity:1;transform:none;animation:none;}
  .pill-hook .node{animation:none;}
}