/* tret app page — values sourced from the design reference (design/v1/).
   Green-slash site: copper appears nowhere by design (design/v1/README.md). */

:root{
  --bg:#F6F4EE;
  --band:#EFECE3;
  --surface:#FDFCF8;
  --ink:#211F1A;
  --ink-75:rgba(33,31,26,.75);
  --ink-72:rgba(33,31,26,.72);
  --ink-62:rgba(33,31,26,.62);
  --ink-60:rgba(33,31,26,.6);
  --ink-55:rgba(33,31,26,.55);
  --ink-50:rgba(33,31,26,.5);
  --ink-45:rgba(33,31,26,.45);
  --ink-40:rgba(33,31,26,.4);
  --ink-35:rgba(33,31,26,.35);
  --border:rgba(33,31,26,.12);
  --border-14:rgba(33,31,26,.14);
  --border-16:rgba(33,31,26,.16);
  --dash-18:rgba(33,31,26,.18);
  --dash-22:rgba(33,31,26,.22);
  --green:#2E6B5A;
  --green-mid:#4E8D78;
  --green-slash:#5B9A8B;
  --green-deep:#3C7263;
  --green-on-dark:#7DB8A9;
  --green-light:#A5E3CB;
  --green-strike-hi:#8FD1BE;
  --green-tint-10:rgba(91,154,139,.1);
  --green-tint-06:rgba(91,154,139,.06);
  --cream:#F6F4EE;
  --cream-60:rgba(246,244,238,.6);
  --cream-50:rgba(246,244,238,.5);
  --cream-45:rgba(246,244,238,.45);
  --cream-40:rgba(246,244,238,.4);
  --cream-border:rgba(246,244,238,.2);
  --cream-dash:rgba(246,244,238,.18);
  --card-shadow:0 1px 3px rgba(33,31,26,.06);
  --card-shadow-lg:0 2px 10px rgba(33,31,26,.08);
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink)}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(91,154,139,.25)}

.content{max-width:1060px;margin:0 auto;padding:72px 32px}
.band{border-top:1px solid var(--border)}

h2{font:700 38px/1.15 var(--sans);letter-spacing:-.025em;margin:0;max-width:620px}
.lede{font:400 19px/1.6 var(--sans);color:var(--ink-62);margin:30px 0 0;max-width:640px}
.body-md{font:400 16px/1.7 var(--sans);color:var(--ink-62);margin:20px 0 0}
.body-md + .body-md{margin-top:14px}
.body-sm{font:400 15.5px/1.65 var(--sans);color:var(--ink-62);margin:18px 0 0}
.body-sm + .body-sm{margin-top:14px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-50);margin:0}
.eyebrow-green{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.two-col.align-start{align-items:start}
.two-col.lead-wide{grid-template-columns:1.15fr 1fr}
.two-col.trail-wide{grid-template-columns:1fr 1.15fr}

/* ---- wordmark (slash construction matched to _brand green marks: 8deg, tip fades, glow) ---- */
.wordmark{display:flex;align-items:baseline;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.wm-text{font:700 26px/1 var(--sans);letter-spacing:-.03em}
.wm-slash-box{display:inline-block;width:11px;position:relative;height:26px}
.wm-slash{position:absolute;left:4.6px;top:6.4px;bottom:-4.9px;width:1.8px;background:linear-gradient(180deg,rgba(91,154,139,.1),#5B9A8B 25%,#5B9A8B 75%,rgba(91,154,139,.1));border-radius:1px;transform:rotate(8deg);filter:drop-shadow(0 0 4.5px rgba(91,154,139,.5))}

/* mini wordmarks inside mock cards */
.wm-sm{display:flex;align-items:baseline}
.wm-sm .wm-text{font-size:16px;line-height:1}
.wm-sm .wm-slash-box{width:7px;height:16px}
.wm-sm .wm-slash{left:2.8px;top:3.9px;bottom:-3px;width:1.1px;filter:drop-shadow(0 0 3px rgba(91,154,139,.5))}
.wm-dark{color:var(--cream)}
.wm-dark .wm-text{font-size:18px}
.wm-dark .wm-slash-box{width:8px;height:18px}
.wm-dark .wm-slash{left:3.2px;top:4.4px;bottom:-3.4px;width:1.25px;background:linear-gradient(180deg,rgba(125,184,169,.1),#7DB8A9 25%,#7DB8A9 75%,rgba(125,184,169,.1));filter:drop-shadow(0 0 3px rgba(125,184,169,.5))}

/* ---- header ---- */
.site-header{display:flex;justify-content:space-between;align-items:center;max-width:1060px;margin:0 auto;padding:26px 32px}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav a{font:500 13.5px var(--sans);color:var(--ink-62)}
.btn-green{font:600 15px var(--sans);background:linear-gradient(90deg,#4E8D78,#2E6B5A);color:var(--surface);border-radius:10px;padding:14px 24px;border:none;cursor:pointer}
.btn-green:hover{text-decoration:none}
.site-nav .btn-green{font-size:13.5px;border-radius:8px;padding:9px 18px}
.btn-outline{font:500 15px var(--sans);background:var(--surface);border:1px solid var(--border-16);border-radius:10px;padding:13px 22px;color:var(--ink)}
.btn-outline:hover{text-decoration:none}

/* ---- hero ---- */
.hero{max-width:1060px;margin:0 auto;padding:84px 32px 72px}
h1{font:650 104px/1.04 var(--sans);letter-spacing:-.045em;margin:26px 0 0;color:var(--ink)}
.h1-line{display:block}
.struck{position:relative;display:inline-block}
.strike{position:absolute;left:-3%;right:-3%;top:50%;transform:skewX(-8deg);transform-origin:left;background-size:250% 100%;animation:tretDraw .9s cubic-bezier(.7,0,.2,1) var(--draw-delay,.35s) both,tretPulse 7s linear var(--pulse-delay,1.6s) infinite}
.strike-glow{height:14px;margin-top:-7px;border-radius:7px;background-image:linear-gradient(90deg,rgba(60,114,99,.3),#3C7263 32%,#8FD1BE 50%,#3C7263 68%,rgba(60,114,99,.3));filter:blur(10px);opacity:.5}
.strike-core{height:7px;margin-top:-3px;border-radius:4px;background-image:linear-gradient(90deg,rgba(60,114,99,.25),#3C7263 32%,#A5E3CB 50%,#3C7263 68%,rgba(60,114,99,.25))}
@keyframes tretDraw{from{transform:skewX(-8deg) scaleX(0)}to{transform:skewX(-8deg) scaleX(1)}}
@keyframes tretPulse{0%{background-position:200% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.strike{animation:none !important;background-position:50% 0 !important}}
.gauntlet{font:400 15px/1.6 var(--sans);color:var(--green);margin:18px 0 0;max-width:640px}
.cta-row{display:flex;gap:14px;margin-top:38px;align-items:center;flex-wrap:wrap}
.cta-caption{font:400 13px var(--mono);color:var(--ink-45)}

/* ---- wrangler quote ---- */
.pull-quote{margin:0;border-left:3px solid var(--green-slash);padding:6px 0 6px 28px}
.pull-quote p:first-child{font:500 26px/1.45 var(--sans);letter-spacing:-.015em;color:var(--ink);margin:0}
.quote-attr{font:400 13px var(--mono);color:var(--ink-50);margin:18px 0 0}
.section-body{margin-top:36px}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--border-14);border-radius:12px;box-shadow:var(--card-shadow)}
.card-label{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin:0}

/* models card */
.models-card{padding:26px 28px}
.logo-row{display:flex;gap:18px 36px;align-items:center;flex-wrap:wrap;margin-top:22px}
.logo{display:flex;align-items:center;gap:9px}
.logo img{width:21px;height:21px;filter:grayscale(1) contrast(1.2);opacity:.75}
.logo span{font:600 15px var(--sans);color:var(--ink-60);letter-spacing:-.01em}

/* stat card */
.stat-card{padding:24px 28px}
.multipliers{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:20px;border-bottom:1px dashed var(--dash-18);margin-bottom:20px}
.mult-num{font:500 36px/1 var(--mono);color:var(--ink)}
.mult-num.green{color:var(--green)}
.mult-cap{font:400 11.5px/1.55 var(--mono);color:var(--ink-55);margin:10px 0 0}
.bars{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.bar-row{display:grid;grid-template-columns:110px 1fr 48px;gap:12px;align-items:center}
.bar-label,.bar-val{font:400 12px var(--mono);color:var(--ink-62)}
.bar-label.green,.bar-val.green{color:var(--green)}
.bar-val{text-align:right}
.bar-track{height:14px}
.bar{display:block;height:14px;border-radius:4px}
.bar-dim{background:rgba(33,31,26,.2)}
.bar-mid{background:rgba(91,154,139,.55)}
.bar-green{background:linear-gradient(90deg,#4E8D78,#2E6B5A)}
.stat-foot{font:400 11.5px/1.6 var(--mono);color:var(--ink-45);margin:22px 0 0;border-top:1px dashed var(--dash-18);padding-top:12px}

/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:44px}
.steps h3{font:650 20px/1.3 var(--sans);letter-spacing:-.015em;margin:12px 0 0;color:var(--ink)}
.steps p.step-body{font:400 14.5px/1.65 var(--sans);color:var(--ink-62);margin:12px 0 0}

/* ---- receipts chat mock ---- */
.chat-card{background:var(--surface);border:1px solid var(--border-14);border-radius:14px;box-shadow:var(--card-shadow-lg);overflow:hidden}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(33,31,26,.1)}
.chat-meta{font:400 11px var(--mono);color:var(--ink-45)}
.chat-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.bubble{padding:12px 16px}
.bubble p{font:400 13.5px/1.55 var(--sans);color:var(--ink);margin:0}
.bubble-user{align-self:flex-end;max-width:78%;background:var(--band);border-radius:12px 12px 3px 12px}
.bubble-reply{align-self:flex-start;max-width:86%;background:var(--green-tint-10);border-radius:12px 12px 12px 3px}
.receipt-chip{border:1px dashed var(--dash-22);border-radius:10px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.chip-label{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.chip-val{font:400 12px var(--mono);color:var(--ink-72)}
.chip-val.green{color:var(--green)}
.chat-totals{display:flex;gap:24px;padding:14px 20px;border-top:1px solid rgba(33,31,26,.1);background:var(--green-tint-06);flex-wrap:wrap}
.chat-totals span{font:400 11.5px var(--mono);color:var(--ink-60)}
.chat-totals .green{color:var(--green)}
.chat-totals .vs{color:var(--ink-40)}

/* ---- broadcast band + share card ---- */
.broadcast-band{background:var(--band)}
.broadcast-inner{padding-bottom:84px}
.share-card{background:var(--ink);border-radius:14px;padding:26px 28px;box-shadow:0 2px 10px rgba(33,31,26,.15)}
.share-head{display:flex;justify-content:space-between;align-items:baseline}
.share-meta{font:400 11px var(--mono);color:var(--cream-45)}
.share-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.share-num{font:500 34px/1 var(--mono);color:var(--cream)}
.share-num.green{color:var(--green-light)}
.share-cap{font:400 11px var(--mono);color:var(--cream-50);margin:8px 0 0}
.share-foot{border-top:1px dashed var(--cream-dash);margin-top:22px;padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.share-foot span{font:400 11.5px var(--mono);color:var(--cream-60)}
.share-foot .dim{color:var(--cream-40)}

/* ---- teams band ---- */
.teams-band{background:var(--ink)}
.teams-grid{padding:80px 32px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.teams-eyebrow{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-on-dark);margin:0}
.teams-h2{font:700 44px/1.1 var(--sans);letter-spacing:-.03em;margin:18px 0 0;color:var(--cream);max-width:none}
.teams-lede{font:400 17px/1.65 var(--sans);color:var(--cream-60);margin:20px 0 0;max-width:440px}
.waitlist{display:flex;flex-direction:column;gap:14px}
.waitlist-label{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45);margin:0}
.waitlist-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0}
.waitlist-input{font:400 14px var(--mono);background:rgba(246,244,238,.06);border:1px solid var(--cream-border);border-radius:10px;padding:13px 16px;color:var(--cream);outline:none;width:220px}
.waitlist-input::placeholder{color:var(--cream-40)}
.waitlist-btn{font-size:14.5px;padding:13px 22px;white-space:nowrap}
.waitlist-btn:disabled{opacity:.6;cursor:default}
.waitlist-msg{font:400 13px var(--mono);color:var(--cream-60);margin:0}
.waitlist-msg.is-error{color:#E8B4A8}
.waitlist-msg.is-success{color:var(--green-light)}
.waitlist-caption{font:400 12px var(--mono);color:var(--cream-40);margin:0}

/* ---- built in the open ---- */
.open-inner{padding:64px 32px}
.open-inner h2{font-size:30px;line-height:1.2;letter-spacing:-.02em}
.open-cta{display:flex;justify-content:flex-end}
.btn-outline.lg{padding:14px 24px;border-color:rgba(33,31,26,.2)}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--border)}
.foot-inner{padding:36px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-slash{width:1.5px;height:18px;background:linear-gradient(180deg,rgba(91,154,139,.1),#5B9A8B 25%,#5B9A8B 75%,rgba(91,154,139,.1));border-radius:1px;transform:rotate(8deg);filter:drop-shadow(0 0 3px rgba(91,154,139,.5));display:inline-block}
.foot-line{font:400 13px var(--sans);color:var(--ink-55);white-space:nowrap}
.foot-line a{color:var(--ink-75)}
.foot-legal{font:400 12px var(--mono);color:var(--ink-40)}

/* ---- responsive ---- */
@media (max-width:800px){
  h1{font-size:60px}
  h2{font-size:30px}
  .teams-h2{font-size:34px}
  .mult-num{font-size:28px}
  .pull-quote p:first-child{font-size:21px}
  .two-col,.two-col.lead-wide,.two-col.trail-wide,.steps,.teams-grid{grid-template-columns:1fr;gap:40px}
  .site-header{padding:20px 24px;gap:14px;flex-wrap:wrap}
  .site-nav{gap:14px;flex-wrap:wrap;justify-content:flex-end}
  .site-nav .btn-green{padding:8px 14px;white-space:nowrap}
  .hero{padding:64px 24px 56px}
  .content{padding:56px 24px}
  .teams-grid{padding:64px 24px}
  .open-cta{justify-content:flex-start}
  .foot-inner{flex-direction:column;align-items:flex-start}
  .foot-line{white-space:normal}
}

/* ---- accessibility utilities ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);font:500 14px var(--sans);padding:10px 16px;border:1px solid var(--border-16);border-radius:8px;box-shadow:var(--card-shadow)}
.skip-link:focus{left:16px;top:16px}
/* Honeypot — off-screen for humans, irresistible to bots. Not display:none,
   which some bots detect and skip. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}