/* theronguy.com, boat.dev-style language: three brand colours by section, pixel scenes, mono captions. */
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";/* taste-skill-ignore: mono captions are part of the boat.dev language Ron asked for */src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";/* taste-skill-ignore: Tactico brand mark */src:url("fonts/Montserrat-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Montserrat";/* taste-skill-ignore: Tactico brand mark */src:url("fonts/Montserrat-Italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:block}

:root{
  /* three brand colours; each section picks one with a .t-* class (sources in build.py) */
  --ink:#14171F;--muted:#565D6E;--white:#fff;
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;/* taste-skill-ignore: mono captions */
}
.t-purple{--c-base:#C1B0F3;--c-strong:#6E4FD8;--c-dark:#2B2050;--c-night:#201839;--c-deep:#150F26;--c-glow:#8C76E0;--c-mid:#C1B0F3;--c-soft:#DCD2FA;--c-line:#E7E0FC;--c-panel:#F7F4FE}
.t-steel{--c-base:#3A3F46;--c-strong:#3A3F46;--c-dark:#2E3238;--c-night:#23272C;--c-deep:#191C20;--c-glow:#6B727B;--c-mid:#8A9099;--c-soft:#B8BDC4;--c-line:#D9DCE0;--c-panel:#F2F3F5}
.t-cyan{--c-base:#2BDCFF;--c-strong:#00778F;--c-dark:#1B434B;--c-night:#142E34;--c-deep:#0D1E21;--c-glow:#00B3D6;--c-mid:#2BDCFF;--c-soft:#99EEFF;--c-line:#C2F5FF;--c-panel:#EDFCFF}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--mono);/* taste-skill-ignore: mono captions */font-size:13px;letter-spacing:0}
.dim{color:var(--muted)}
:focus-visible{outline:2px solid #00778F;outline-offset:2px}

.wrap{max-width:720px;margin:0 auto;padding:0 20px}

/* buttons: square-ish, medium weight */
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;font-size:15px;font-weight:500;border-radius:2px;white-space:nowrap;transition:background-color .15s,color .15s}
.btn svg{width:14px;height:14px}
.btn-white{background:var(--white);color:var(--c-strong)}
.btn-white:hover{background:var(--c-line)}
.btn-blue{background:var(--c-strong);color:var(--white)}
.btn-blue:hover{background:var(--c-dark)}
.btn-line{border:1px solid var(--c-strong);color:var(--c-strong);background:var(--white)}
.btn-line:hover{background:var(--c-panel)}

/* header */
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.hdr.on-hero{position:absolute;top:0;left:0;right:0;z-index:3;color:var(--white)}
.word{font-size:18px;font-weight:600;letter-spacing:-.01em}
.hdr nav{display:flex;align-items:center;gap:22px;font-size:15px}
.hdr nav>a:not(.btn):not(.ico){opacity:.85}
.hdr nav>a:not(.btn):hover,.hdr nav>a[aria-current]{opacity:1}
.hdr nav a[aria-current]{color:var(--c-strong)}
.ico{display:inline-flex;width:20px;height:20px}
.ico svg{width:16px;height:16px;margin:auto}

/* pixel scenes: integer-scaled canvas, never smoothed */
.px{position:absolute;inset:0;overflow:hidden}
.px canvas{position:absolute;left:0;top:0;image-rendering:crisp-edges;image-rendering:pixelated}

/* hero */
.hero{position:relative;height:600px;background:var(--c-deep);overflow:hidden}
.hero .px{cursor:crosshair}
.hero-in{position:relative;z-index:2;padding-top:132px;pointer-events:none;color:var(--white)}
.hero-in>*{pointer-events:auto}
.hero h1{font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-.02em;max-width:420px}
.hero p{margin-top:12px;font-size:18px;max-width:420px;color:#E3F7FB}
.cmdbar{display:inline-flex;flex-wrap:wrap;gap:6px 14px;margin-top:24px;padding:10px 14px;background:var(--c-deep);border:1px solid var(--c-shade,#00677C);color:var(--white)}
.cmdbar .dim{color:var(--c-soft)}
.cmdbar a:hover{text-decoration:underline;text-underline-offset:3px}

/* sections */
.sec{padding:72px 0 0}
.sec.tight{padding-top:32px}
.sec h2,.band h2{font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.25;margin-bottom:24px}

/* project tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{display:block;min-width:0}
.tile .cap{display:block;color:var(--muted);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame{position:relative;border:1px solid var(--c-mid);background:var(--c-panel);overflow:hidden;aspect-ratio:210/118}
.tile .cmd{display:block;color:var(--muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile h3{font-size:16px;font-weight:500;margin-top:20px}
.tile p{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.45}
.tile:hover .frame{border-color:var(--c-strong)}
.tile .frame{border-color:var(--c-mid)}
.tile:hover h3{color:var(--c-strong)}
.frame.big{aspect-ratio:680/300}
.frame.tall{aspect-ratio:auto;height:100%;min-height:236px}

/* pixel tag laid over a scene (data-ui fragment) */
.tag{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--white);border:1px solid var(--c-strong);padding:9px 12px;line-height:1;color:var(--ink)}
.tag.brand{font-size:20px}
.frame.big .tag.brand{font-size:34px;padding:16px 22px}

/* momentum demo */
.demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:stretch}
.step{background:var(--c-panel);padding:20px;display:flex;flex-direction:column;align-items:flex-start}
.step .goal{font-size:18px;font-weight:500;line-height:1.3;margin-top:10px}
.step .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;margin-top:16px}
.step .seg i{height:6px;background:var(--c-line)}
.step .seg i.on{background:var(--c-strong)}
.step .seg i.run{background:var(--c-mid)}
.step .tabs{margin-top:20px}
.step .sw{margin-top:14px}
.step b{color:var(--ink);font-weight:500}
.demo-r{display:flex;flex-direction:column}
.demo-r .cap{color:var(--muted);margin-bottom:6px}
.demo-r .frame{flex:1}
.mem{position:absolute;z-index:2;left:16px;top:16px;background:var(--c-dark);color:var(--white);padding:10px 12px;display:grid;gap:4px}
.mem li::before{content:"› ";color:var(--c-soft)}
.bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;background:var(--c-dark);color:var(--white);font-size:15px;padding:8px 14px}
.bar i{width:8px;height:8px;background:var(--c-soft)}
[data-agent-name]{transition:opacity .16s}
[data-agent-name].out{opacity:0}

/* tabs (mono, square) */
.tabs{display:flex;flex-wrap:wrap;gap:2px}
.tabs button{font-family:var(--mono);/* taste-skill-ignore: mono tabs */font-size:13px;padding:6px 10px;color:var(--muted);border-radius:2px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{background:var(--c-strong);color:var(--white)}

/* history chart band */
.band{background:var(--c-panel);margin-top:96px;padding:72px 0}
.band-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.band h2 a:hover{color:var(--c-strong)}
.replay{height:34px;font-size:14px}
.chart{display:grid;gap:4px}
.crow{display:grid;grid-template-columns:72px minmax(0,1fr) 230px;align-items:center;gap:16px;padding:10px 0}
.crow .yr{color:var(--ink)}
.track{position:relative;height:20px;border-right:2px solid var(--c-mid)}
.track::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dotted var(--c-soft)}
.train{position:absolute;top:50%;left:0;transform:translate(-100%,-55%)}
.chart.go .train{left:var(--x);transition:left 1.4s cubic-bezier(.3,.7,.2,1)}
.chart.go .crow:nth-child(2) .train{transition-delay:.1s}
.chart.go .crow:nth-child(3) .train{transition-delay:.2s}
.chart.go .crow:nth-child(4) .train{transition-delay:.3s}
.chart.go .crow:nth-child(5) .train{transition-delay:.4s}
.train canvas{display:block;width:45px;height:18px;image-rendering:pixelated}
.lab{font-size:15px}
.crow.full{grid-template-columns:72px minmax(0,1fr);row-gap:8px;padding:14px 0}
.ents{grid-column:2;display:grid}
.ents li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;border-top:1px solid var(--c-line);/* taste-skill-ignore: dated entries read as a table, boat-style thin rule */font-size:15px}
.ents a{color:var(--c-strong)}
.ents a:hover{text-decoration:underline;text-underline-offset:3px}
.ents .mono{white-space:nowrap}

/* project pages */
.phead{padding:64px 0 0}
.phead h1{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.phead p{margin-top:10px;font-size:18px;color:#3A4152;max-width:460px}
.phead .btn{margin-top:22px}
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.cell{background:var(--white);padding:18px}
.cell:last-child:nth-child(3n+2){grid-column:span 2}
.cell b{font-size:15px;font-weight:500}
.cell p{font-size:15px;color:var(--muted);margin-top:6px;line-height:1.45}
.table{border-top:1px solid var(--c-line)/* taste-skill-ignore: real two-column table */}
.table li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--c-line);/* taste-skill-ignore: real two-column table */font-size:15px}
.table b{font-weight:500}
.table span{color:var(--muted)}
.gal .tabs{margin-bottom:8px}
.frame.pic{aspect-ratio:680/380;background:var(--c-panel);border-color:var(--c-line)}
.pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.pane[hidden]{display:none}
.pane img{max-height:100%;width:auto;max-width:100%;object-fit:contain}

/* footer */
.ftr{position:relative;margin-top:120px;background:var(--c-dark);color:var(--white)}
main:has(>.band:last-child)+.ftr{margin-top:0}
.px.strip{position:relative;height:180px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1fr) 140px 140px;gap:24px;padding-top:32px;padding-bottom:48px}
.ftr h2{font-weight:400;color:var(--c-soft);margin-bottom:10px}
.ftr li{font-size:15px;line-height:1.9}
.ftr li a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr-base{padding-bottom:28px;font-size:14px;color:#E3F7FB}

/* Tactico wordmark, copied from apps/tactico-web-v2/app/globals.css */
.brand-mark{display:inline-flex;align-items:baseline;color:currentColor;line-height:1}
.brand-word{display:inline-flex;align-items:center;color:currentColor;font-family:"Montserrat",system-ui,sans-serif;/* taste-skill-ignore: Tactico brand mark */font-weight:600;letter-spacing:-0.04em;line-height:1;white-space:nowrap}
.brand-letter{color:currentColor}
.brand-i{display:inline-block;flex-shrink:0;margin:0 .04em;color:#2bdcff;font-family:"Montserrat",system-ui,sans-serif;/* taste-skill-ignore: Tactico brand mark */font-size:inherit;font-style:italic;font-weight:600;letter-spacing:0;line-height:1;transform:scaleX(-1);transform-origin:center;user-select:none}

@media (max-width:760px){
  .tiles,.tiles.two{grid-template-columns:minmax(0,1fr);gap:40px}
  .demo{grid-template-columns:minmax(0,1fr)}
  .frame.tall{min-height:220px}
  .cells{grid-template-columns:minmax(0,1fr)}
  .cell:last-child:nth-child(3n+2){grid-column:auto}
  .crow{grid-template-columns:64px minmax(0,1fr);row-gap:6px}
  .crow .lab{grid-column:1/-1}
  .crow.full{grid-template-columns:minmax(0,1fr)}
  .crow.full .ents{grid-column:1}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-grid .word{grid-column:1/-1}
}
@media (max-width:560px){
  .hdr nav>a:not(.btn):not(.ico){display:none}
  .hero{height:540px}
  .hero-in{padding-top:112px}
  .hero h1{font-size:30px}
  .frame.big{aspect-ratio:4/3}
  .frame.big .tag.brand{font-size:26px;padding:12px 16px}
  .phead{padding-top:40px}
  .table li{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* Momentum steel: a quiet metallic sheen on frames and buttons */
.t-steel .frame{border-color:#8A9099;border-top-color:#C9CDD3}
.t-steel .btn-blue,.t-steel .tabs button[aria-pressed="true"]{background-color:#3A3F46;background-image:linear-gradient(180deg,#555B63 0%,#3A3F46 55%,#2E3238 100%);/* taste-skill-ignore: brushed-metal sheen Ron asked for */box-shadow:inset 0 1px 0 rgba(255,255,255,.18)/* taste-skill-ignore: metal highlight */}
.t-steel .btn-blue:hover{background-image:linear-gradient(180deg,#60666F 0%,#454A52 55%,#33373D 100%)/* taste-skill-ignore: metal sheen */}
.t-steel .step{background-color:#F2F3F5;background-image:linear-gradient(160deg,#F7F8F9 0%,#ECEEF1 100%)/* taste-skill-ignore: pale steel panel sheen */}
.t-steel .bar{background-image:linear-gradient(180deg,#3A3F46,#2E3238)/* taste-skill-ignore: metal sheen */}
/* entrance */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
.tiles .rise:nth-child(2){transition-delay:.06s}.tiles .rise:nth-child(3){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  .chart.go .train{transition:none}
  .js .rise{opacity:1;transform:none;transition:none}
}