/* ==========================================================================
 * Tetsuko — the voice of your algorithm. Shared styles for the homepage
 * band (index.html) and the showcase page (tetsuko/index.html).
 *
 * Tokens come from the AlignAlgo cream canvas: --cream #FBF7F0,
 * --ink #1C1B19, --gold #E2B86A, --sand #E7DDCE, --stone #7A7268.
 * Tetsuko IS the gold vein, made voice — no new palette.
 * ========================================================================== */

:root{
  --tx-gold:#E2B86A;
  --tx-gold-deep:#C79B4E;
  --tx-cream:#FBF7F0;
  --tx-ink:#1C1B19;
  --tx-stone:#7A7268;
  --tx-sand:#E7DDCE;
  --tx-serif:"Playfair Display",Georgia,serif;
  --tx-sans:"Inter",system-ui,sans-serif;
  --tx-mono:"IBM Plex Mono",monospace;
  --tx-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Voice-mark: animated gold waveform (identity, never a face) -- */
.tx-waveform{
  display:flex;align-items:center;justify-content:center;gap:5px;
  height:64px;pointer-events:none;
}
.tx-waveform span{
  width:3px;border-radius:3px;background:var(--tx-gold);
  height:100%;transform-origin:center;
  transform:scaleY(var(--h,.4));
  animation:tx-wave 2.2s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes tx-wave{
  0%,100%{transform:scaleY(var(--h,.4))}
  50%{transform:scaleY(calc(var(--h,.4) * .28))}
}
.tx-waveform-sm{height:44px;gap:4px}
.tx-waveform-sm span{width:2.5px}
@media (prefers-reduced-motion:reduce){
  .tx-waveform span{animation:none;transform:scaleY(var(--h,.4))}
}

/* ---------- Homepage band: "One voice across all nine." ------------------ */
.tx-band{
  padding:64px 0 72px;
  background:linear-gradient(var(--tx-cream),var(--tx-cream));
  border-top:1px solid var(--tx-sand);
  border-bottom:1px solid var(--tx-sand);
  text-align:center;
}
.tx-band .wrap{max-width:760px;margin:0 auto;padding:0 24px}
.tx-eyebrow{
  font-family:var(--tx-mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-stone);font-weight:500;margin:0 0 14px;
}
.tx-band h2{
  font-family:var(--tx-serif);font-weight:700;letter-spacing:-.5px;
  font-size:clamp(28px,4.4vw,46px);line-height:1.08;margin:0;color:var(--tx-ink);
}
.tx-band-sub{color:var(--tx-stone);font-size:17px;max-width:52ch;margin:14px auto 26px}
.tx-band .tx-waveform{margin:6px auto 22px}
.tx-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 28px}
.tx-chip{
  font-family:var(--tx-mono);font-size:12.5px;color:var(--tx-ink);
  background:#fff;border:1px solid var(--tx-sand);border-radius:999px;
  padding:9px 18px;box-shadow:0 1px 0 rgba(28,27,25,.04);
}
.tx-band .tx-link{font-weight:600;font-size:14px}

/* ---------- Showcase page layout ---------------------------------------- */
.tx-page{background:var(--tx-cream);color:var(--tx-ink)}
.tx-hero{padding:88px 0 60px;text-align:center;position:relative;overflow:hidden}
.tx-hero .tx-waveform{margin:26px auto 8px;height:72px}
.tx-hero h1{
  font-family:var(--tx-serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(46px,8vw,96px);line-height:1;margin:18px 0 0;
}
.tx-hero h1 .em{font-style:italic;font-weight:600;color:var(--tx-gold-deep)}
.tx-lede{max-width:56ch;margin:22px auto 30px;color:var(--tx-stone);font-size:clamp(16px,2vw,19px)}
.tx-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.tx-sec{padding:72px 0}
.tx-sec-head{max-width:720px;margin:0 auto 40px;text-align:center}
.tx-sec-head h2{
  font-family:var(--tx-serif);font-weight:700;letter-spacing:-.5px;
  font-size:clamp(28px,4.4vw,44px);line-height:1.1;margin:0 0 14px;
}
.tx-sec-head p{color:var(--tx-stone);font-size:17px;margin:0}

/* reveal-on-scroll — same motion language as the homepage (.reveal/.in) */
.tx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--tx-ease),transform .7s var(--tx-ease)}
.tx-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tx-reveal{opacity:1;transform:none;transition:none}}

/* ---------- Scripted conversation demo ---------------------------------- */
.tx-demo-note{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tx-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-stone);border:1px dashed var(--tx-sand);border-radius:999px;
  padding:8px 16px;margin-bottom:22px;background:#fff;
}
.tx-demo-note .d{width:7px;height:7px;border-radius:50%;background:var(--tx-gold)}
.tx-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.tx-tab{
  font-family:var(--tx-mono);font-size:12.5px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--tx-sand);background:#fff;color:var(--tx-stone);cursor:pointer;
  transition:border-color .16s var(--tx-ease),color .16s var(--tx-ease);
}
.tx-tab[aria-selected="true"]{border-color:var(--tx-gold-deep);color:var(--tx-ink);background:#FFFDF8}
.tx-tab:hover{border-color:var(--tx-gold)}
.tx-window{
  max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--tx-sand);
  border-radius:20px;box-shadow:0 18px 50px -24px rgba(28,27,25,.18);overflow:hidden;
}
.tx-window-head{
  display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--tx-sand);
  font-family:var(--tx-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-stone);
}
.tx-window-head .dots{display:flex;gap:6px}
.tx-window-head .dots i{width:9px;height:9px;border-radius:50%;background:var(--tx-sand);font-style:normal}
.tx-window-head .dots i:first-child{background:var(--tx-gold)}
.tx-log{padding:26px 24px 30px;min-height:340px;display:flex;flex-direction:column;gap:18px}
.tx-msg{max-width:88%;line-height:1.6;font-size:15.5px}
.tx-msg .who{
  display:block;font-family:var(--tx-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:6px;color:var(--tx-stone);
}
.tx-msg.you{align-self:flex-start;font-family:var(--tx-mono);font-size:14px;
  background:#F7F2E9;border:1px solid var(--tx-sand);border-radius:4px 16px 16px 16px;padding:12px 16px}
.tx-msg.her{align-self:flex-end;font-family:var(--tx-serif);font-size:17.5px;
  background:#FFFDF8;border:1px solid #F0E4CC;border-radius:16px 4px 16px 16px;padding:14px 18px}
.tx-msg.her .who{color:var(--tx-gold-deep)}
.tx-msg.reason{align-self:flex-end;font-family:var(--tx-sans);font-size:13.5px;color:var(--tx-stone);
  font-style:italic;max-width:80%}
.tx-msg.reason .who{color:var(--tx-stone)}
.tx-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tx-tag{
  font-family:var(--tx-mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--tx-gold-deep);border:1px solid #EAD9B8;border-radius:999px;padding:4px 11px;background:#FFFEFA;
}
.tx-caret{display:inline-block;width:2px;height:1em;background:var(--tx-gold-deep);vertical-align:-2px;animation:tx-blink 1s steps(1) infinite}
@keyframes tx-blink{50%{opacity:0}}
.tx-demo-foot{max-width:720px;margin:18px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.tx-replay{
  font-family:var(--tx-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--tx-sand);border-radius:999px;padding:9px 18px;
  color:var(--tx-stone);cursor:pointer;
}
.tx-replay:hover{border-color:var(--tx-gold-deep);color:var(--tx-ink)}
.tx-honest{font-size:12.5px;color:var(--tx-stone);margin:0;max-width:44ch}

/* ---------- Air-gap ------------------------------------------------------ */
.tx-airgap{display:flex;align-items:center;justify-content:center;gap:0;margin:44px auto 8px;max-width:900px}
.tx-circle{
  flex:1 1 0;aspect-ratio:1.4;max-width:380px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:24px;border:2px solid;
}
.tx-circle.life{border-color:var(--tx-gold);background:#FFFEFA}
.tx-circle.work{border-color:#D8D2C4;background:#F4F1EA}
.tx-circle h3{font-family:var(--tx-serif);font-size:clamp(20px,2.6vw,28px);margin:0 0 8px}
.tx-circle p{font-size:14px;color:var(--tx-stone);margin:0;max-width:26ch}
.tx-divider{
  width:2px;align-self:stretch;margin:0 34px;flex:none;
  background:repeating-linear-gradient(var(--tx-ink) 0 6px,transparent 6px 12px);opacity:.55;
}
.tx-gap-label{
  text-align:center;font-family:var(--tx-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-stone);margin-top:26px;
}
@media(max-width:640px){
  .tx-airgap{flex-direction:column}
  .tx-circle{aspect-ratio:auto;width:100%;max-width:420px;border-radius:28px;padding:30px 24px}
  .tx-divider{width:auto;height:2px;margin:26px 0;align-self:auto;
    background:repeating-linear-gradient(90deg,var(--tx-ink) 0 6px,transparent 6px 12px)}
}

/* ---------- Voice-to-phone loop ------------------------------------------ */
.tx-loop{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;max-width:920px;margin:0 auto}
.tx-loop-panel{background:#fff;border:1px solid var(--tx-sand);border-radius:20px;padding:32px;text-align:center}
.tx-loop-panel h3{font-family:var(--tx-serif);font-size:22px;margin:0 0 10px}
.tx-loop-panel p{color:var(--tx-stone);font-size:15px;margin:0}
.tx-arrow{font-family:var(--tx-serif);font-size:34px;color:var(--tx-gold-deep)}
.tx-phone{
  background:var(--tx-ink);border-radius:30px;padding:12px;max-width:260px;margin:0 auto;
  box-shadow:0 24px 60px -20px rgba(28,27,25,.4);
}
.tx-phone-screen{background:#fff;border-radius:20px;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.tx-notif{border:1px solid var(--tx-sand);border-radius:12px;padding:10px 12px;text-align:left;font-size:12.5px}
.tx-notif b{display:block;font-size:11px;font-family:var(--tx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-gold-deep);margin-bottom:4px}
@media(max-width:760px){.tx-loop{grid-template-columns:1fr}.tx-arrow{transform:rotate(90deg)}}

/* ---------- Day strip ----------------------------------------------------- */
.tx-days{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1020px;margin:0 auto}
.tx-day{background:#fff;border:1px solid var(--tx-sand);border-radius:18px;padding:28px 26px}
.tx-day .t{font-family:var(--tx-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-gold-deep);margin:0 0 12px}
.tx-day h3{font-family:var(--tx-serif);font-size:23px;margin:0 0 10px}
.tx-day p{color:var(--tx-stone);font-size:15px;margin:0}
.tx-day p em{font-family:var(--tx-serif);color:var(--tx-ink)}
@media(max-width:760px){.tx-days{grid-template-columns:1fr}}

/* ---------- Voice choice -------------------------------------------------- */
.tx-voices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0 auto}
.tx-voice-card{background:#fff;border:1px solid var(--tx-sand);border-radius:18px;padding:30px 28px}
.tx-voice-card.gold{border-color:var(--tx-gold)}
.tx-voice-card h3{font-family:var(--tx-serif);font-size:22px;margin:0 0 10px}
.tx-voice-card p{color:var(--tx-stone);font-size:15px;margin:0}
@media(max-width:640px){.tx-voices{grid-template-columns:1fr}}

/* ---------- Connection diagram -------------------------------------------- */
.tx-connect{max-width:1020px;margin:0 auto;text-align:center}
.tx-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:30px 0}
.tx-node{
  font-family:var(--tx-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--tx-sand);background:#fff;border-radius:999px;padding:12px 22px;
}
.tx-node.graph{border-color:var(--tx-gold-deep);background:#FFFEFA;font-family:var(--tx-serif);font-size:15px;letter-spacing:0;text-transform:none}
.tx-node.voice{border-color:var(--tx-gold);background:var(--tx-gold);color:var(--tx-ink)}
.tx-thread{width:44px;height:2px;background:var(--tx-gold);flex:none}
.tx-surfaces{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:820px;margin:0 auto}
.tx-surf{
  font-family:var(--tx-mono);font-size:11.5px;color:var(--tx-ink);
  border:1px solid #EAD9B8;background:#FFFEFA;border-radius:999px;padding:7px 14px;
}
.tx-creytix{
  margin-top:34px;font-family:var(--tx-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-stone);
}
.tx-creytix b{color:var(--tx-ink)}

/* ---------- CTA band ------------------------------------------------------- */
.tx-cta{background:var(--tx-ink);color:var(--tx-cream);border-radius:28px;padding:64px 40px;text-align:center;max-width:1020px;margin:0 auto}
.tx-cta h2{font-family:var(--tx-serif);font-size:clamp(28px,4.4vw,44px);margin:0 0 14px;letter-spacing:-.5px}
.tx-cta h2 .em{font-style:italic;color:var(--tx-gold)}
.tx-cta p{color:#B9B2A6;max-width:52ch;margin:0 auto 28px}
.tx-early-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tx-early-form input[type=email]{
  font-family:var(--tx-sans);font-size:15px;padding:13px 18px;border-radius:999px;
  border:1px solid #3A352C;background:#26221B;color:var(--tx-cream);min-width:260px;
}
.tx-early-form input::placeholder{color:#8A8272}

/* page footer follows the tool-page pattern (move/index.html) */
.tx-footer{border-top:1px solid var(--tx-sand);margin-top:90px;padding:34px 0 44px;font-size:13.5px;color:var(--tx-stone)}
.tx-footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;max-width:1120px;margin:0 auto;padding:0 24px}
.tx-footer .fam{display:flex;gap:18px;flex-wrap:wrap}
.tx-footer a:hover{color:var(--tx-ink)}