/* ============================================================
   Helix — pages.css
   Extensions to system.css for the full public site:
   forms, auth chrome, pricing tiers, FAQ accordion, prose,
   feature grids, comparison tables, secondary page heros.
   ============================================================ */

/* ---- secondary page hero (smaller than landing) ---- */
.h-pagehero {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 64px);
  border-bottom: var(--hairline);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end;
}
.h-pagehero__crumb {
  font-family: var(--font-mono); font-size: 0.74rem;
  color: var(--slate); letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.h-pagehero h1 {
  font-family: var(--font-display); font-weight: 500; line-height: 1.05;
  font-size: clamp(2.4rem, 4.5vw, 4.25rem);
  letter-spacing: -0.025em; margin: 16px 0 0; max-width: 16ch;
}
.h-pagehero h1 .sig { color: var(--signal); }
.h-pagehero__lede { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 40ch; }
.h-pagehero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---- section spacing helpers ---- */
.h-section--lg { padding-block: clamp(64px, 8vw, 110px); }
.h-section--md { padding-block: clamp(48px, 6vw, 80px); }
.h-section--sm { padding-block: clamp(32px, 4vw, 56px); }

/* ---- forms ---- */
.h-form { display: flex; flex-direction: column; gap: 16px; }
.h-field { display: flex; flex-direction: column; gap: 6px; }
.h-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate); font-weight: 500;
}
.h-input, .h-textarea, .h-select {
  height: 44px; padding: 0 14px;
  background: var(--field); border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--font-body); font-size: 0.95rem;
  width: 100%; transition: border-color 160ms;
}
.h-input::placeholder, .h-textarea::placeholder { color: var(--slate-soft); }
.h-input:focus, .h-textarea:focus, .h-select:focus {
  outline: 0; border-color: var(--signal);
}
.h-textarea { padding: 12px 14px; min-height: 110px; height: auto; resize: vertical; }
.h-hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--slate); }
.h-hint--error { color: var(--negative); }
.h-checkbox { display: inline-flex; gap: 10px; align-items: center; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; }
.h-checkbox input { accent-color: var(--signal); width: 16px; height: 16px; }

/* OTP boxes */
.h-otp { display: flex; gap: 10px; }
.h-otp input {
  width: 54px; height: 60px; text-align: center;
  font-family: var(--font-mono); font-size: 1.4rem;
  background: var(--field); border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--ink);
}
.h-otp input:focus { outline: 0; border-color: var(--signal); }

/* ---- auth shell ---- */
.h-auth-page {
  min-height: calc(100vh - 240px);
  display: grid; place-items: center;
  padding: 56px 24px;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: var(--dot-size) var(--dot-size);
}
.h-auth-card {
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-md);
  padding: 40px; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: var(--shadow-md);
}
.h-auth-card h1 {
  font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1;
  letter-spacing: -0.025em; font-weight: 500; margin: 0;
}
.h-auth-card h1 .sig { color: var(--signal); }
.h-auth-card__head { display: flex; flex-direction: column; gap: 6px; }
.h-auth-card__head p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.h-auth-card__foot { font-size: 0.88rem; color: var(--slate); text-align: center; }
.h-auth-card__foot a { color: var(--signal); }

/* OAuth */
.h-oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h-oauth--full { grid-template-columns: 1fr; }
.h-oauth-btn {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  height: 42px; padding: 0 14px;
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer;
  font-weight: 500; transition: border-color 160ms;
  text-decoration: none;
}
.h-oauth-btn:hover { border-color: var(--signal); color: var(--signal); }
.h-oauth-btn svg, .h-oauth-btn span.glyph {
  width: 16px; height: 16px; display: inline-block; flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 600;
}

/* divider */
.h-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--slate);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.h-divider::before, .h-divider::after { content: ''; height: 1px; background: var(--rule); }

/* ---- prose / legal ---- */
.h-prose { max-width: 72ch; color: var(--ink-soft); }
.h-prose > * + * { margin-top: 18px; }
.h-prose h2 {
  font-family: var(--font-display); font-size: 1.4rem;
  margin: 40px 0 10px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
}
.h-prose h3 {
  font-family: var(--font-display); font-size: 1.1rem;
  margin: 24px 0 6px; font-weight: 500; color: var(--ink);
}
.h-prose p, .h-prose li { line-height: 1.65; }
.h-prose ul, .h-prose ol { padding-left: 22px; margin-top: 6px; }
.h-prose li { margin: 6px 0; }
.h-prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--paper-2); padding: 2px 5px; border-radius: 3px;
}
.h-prose__meta {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--slate);
  letter-spacing: 0.06em; margin-bottom: 20px;
}

/* ---- pricing ---- */
.h-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h-tier {
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-md);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.h-tier--featured { border-color: var(--signal); }
.h-tier__badge {
  position: absolute; top: -10px; right: 22px;
  background: var(--signal); color: #fff;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 2px;
}
.h-tier__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -0.015em;
}
.h-tier__lede { color: var(--ink-soft); font-size: 0.9rem; }
.h-tier__price {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 500;
  letter-spacing: -0.025em; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 4px;
}
.h-tier__price small {
  font-family: var(--font-body); font-size: 0.84rem; color: var(--slate);
  font-weight: 400; letter-spacing: 0;
}
.h-tier__features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 0.92rem; color: var(--ink-soft);
}
.h-tier__features li { display: flex; gap: 10px; align-items: start; }
.h-tier__features li::before {
  content: '✓'; color: var(--signal); flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.92rem;
}
.h-tier__features li.muted { color: var(--slate); }
.h-tier__features li.muted::before { content: '·'; color: var(--slate); }

/* compare add-on (pricing extras / switch-to) */
.h-compare-wrap { overflow-x: auto; }
.h-compare {
  width: 100%; border-collapse: collapse;
  border: var(--hairline); background: var(--surface);
  border-radius: var(--radius-md); overflow: hidden;
}
.h-compare th, .h-compare td {
  padding: 14px 18px;
  border-bottom: var(--hairline); border-right: var(--hairline);
  text-align: left; vertical-align: middle;
}
.h-compare th {
  background: var(--paper-2);
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
  font-weight: 500;
}
.h-compare td:first-child { color: var(--ink); font-weight: 500; }
.h-compare td.yes { color: var(--positive); font-family: var(--font-mono); }
.h-compare td.no  { color: var(--slate); font-family: var(--font-mono); }
.h-compare td.partial { color: var(--signal); font-family: var(--font-mono); }
.h-compare tr:last-child td { border-bottom: 0; }
.h-compare th:last-child, .h-compare td:last-child { border-right: 0; }

/* ---- accordion (FAQ) ---- */
.h-acc { display: flex; flex-direction: column; border-top: var(--hairline); }
.h-acc details { border-bottom: var(--hairline); }
.h-acc summary {
  padding: 18px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink);
}
.h-acc summary::-webkit-details-marker { display: none; }
.h-acc summary::after {
  content: '+'; font-family: var(--font-mono); color: var(--signal);
  font-size: 1.4rem; line-height: 1;
}
.h-acc details[open] summary::after { content: '−'; }
.h-acc__body {
  padding: 0 56px 22px 0; max-width: 72ch;
  color: var(--ink-soft); line-height: 1.6; font-size: 0.95rem;
}

/* ---- feature grid ---- */
.h-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: var(--hairline); border-radius: var(--radius-md);
  overflow: hidden; background: var(--surface);
}
.h-feature {
  padding: 28px;
  border-right: var(--hairline); border-bottom: var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.h-feature__num {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--signal);
  letter-spacing: 0.1em;
}
.h-feature__title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  letter-spacing: -0.015em;
}
.h-feature__body { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.h-features.cols-2 { grid-template-columns: repeat(2, 1fr); }
.h-features.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* eliminate trailing borders */
.h-features.cols-3 .h-feature:nth-child(3n) { border-right: 0; }
.h-features.cols-2 .h-feature:nth-child(2n) { border-right: 0; }
.h-features.cols-4 .h-feature:nth-child(4n) { border-right: 0; }

/* ---- trust strip (small) ---- */
.h-truststrip {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 18px 0;
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--slate);
}
.h-truststrip span { display: inline-flex; align-items: center; gap: 6px; }
.h-truststrip span::before {
  content: ''; width: 6px; height: 6px; background: var(--signal);
}

/* ---- inline lists (broker, OAuth tile grid) ---- */
.h-tilegrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.h-tilegrid > a, .h-tilegrid > div {
  padding: 16px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 500;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none;
}
.h-tilegrid > a:hover { border-color: var(--signal); }
.h-tilegrid .h-mono { color: var(--slate); font-size: 0.7rem; }

/* ---- placeholder ---- */
.placeholder {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 8px,
      color-mix(in oklab, var(--ink) 6%, transparent) 8px 9px);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 14px 18px;
  letter-spacing: 0.04em;
}
.placeholder::before { content: '[ PLACEHOLDER ] '; color: var(--signal); }

/* ---- two-col content ---- */
.h-twocol { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: start; }
.h-twocol .sticky { position: sticky; top: 100px; }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .h-pagehero { grid-template-columns: 1fr; gap: 24px; }
  .h-features, .h-features.cols-2, .h-features.cols-3, .h-features.cols-4 { grid-template-columns: 1fr; }
  .h-features .h-feature { border-right: 0; }
  .h-pricing { grid-template-columns: 1fr; }
  .h-tilegrid { grid-template-columns: repeat(2, 1fr); }
  .h-twocol { grid-template-columns: 1fr; gap: 24px; }
  .h-twocol .sticky { position: static; }
}


/* ============ shared footer ============ */
/* mobile app cards */
.h-apps{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.h-app{display:flex;align-items:center;gap:12px;padding:10px 16px;border:var(--hairline);border-radius:var(--radius-md);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s;min-width:170px}
.h-app:hover{border-color:var(--signal);background:var(--paper-2)}
.h-app__brand{display:grid;place-items:center;color:var(--ink)}
.h-app__txt{display:flex;flex-direction:column;line-height:1.1}
.h-app__lbl{font-family:var(--font-mono);font-size:.6rem;color:var(--slate);letter-spacing:.08em;text-transform:uppercase}
.h-app__store{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-top:2px}

/* socials */
.h-socials{display:flex;gap:8px;margin-top:16px}
.h-socials a{width:36px;height:36px;display:grid;place-items:center;border:var(--hairline);border-radius:50%;color:var(--ink-soft);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.h-socials a:hover{border-color:var(--signal);color:var(--signal);background:var(--paper-2)}

/* legacy help-band selectors (kept harmless in case any page still references them) */
.h-help{display:none}


/* ============ videos page ============ */
.h-videoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.h-videoCard{display:flex;flex-direction:column;background:var(--surface);border:var(--hairline);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.h-videoCard:hover{border-color:var(--signal);transform:translateY(-2px)}
.h-videoCard__thumb{position:relative;aspect-ratio:16/9;background:var(--paper-2);overflow:hidden}
.h-videoCard__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.h-videoCard__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.35) 100%);opacity:.85;transition:opacity .15s}
.h-videoCard:hover .h-videoCard__play{opacity:1}
.h-videoCard__meta{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.h-videoCard__num{font-family:var(--font-mono);font-size:.7rem;color:var(--slate);letter-spacing:.06em}
.h-videoCard__title{font-family:var(--font-display);font-weight:500;font-size:.98rem;line-height:1.35}

/* ============ strategy templates page ============ */
.h-templateGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.h-tpl{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:var(--hairline);border-radius:var(--radius-md);padding:20px 20px 18px;transition:border-color .15s}
.h-tpl:hover{border-color:var(--signal)}
.h-tpl__head{display:flex;flex-direction:column;gap:6px}
.h-tpl__id{font-family:var(--font-mono);font-size:.72rem;color:var(--slate);letter-spacing:.06em}
.h-tpl__title{font-family:var(--font-display);font-weight:500;font-size:1.02rem;line-height:1.35;margin:0}
.h-tpl__desc{margin:6px 0 0;font-size:.86rem;line-height:1.5;color:var(--slate)}
.h-tpl__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto}

@media (max-width:960px){
  .h-videoGrid,.h-templateGrid{grid-template-columns:1fr}
}


/* footer logo · bumped a touch larger than the nav */
.h-footer .tt-logo{height:52px;width:auto}
@media (max-width:760px){ .h-footer .tt-logo{height:42px} }


/* ============ floating Ask Tradetron (global FAB + popup) ============ */
.h-ask__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.h-ask__chip{font:500 .8rem/1 var(--font-body);padding:9px 14px;border:var(--hairline);border-radius:var(--radius-pill);background:var(--paper-2);color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s}
.h-ask__chip:hover{border-color:var(--signal);color:var(--ink)}
.h-ask__log{flex:1;padding:18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:360px}
.h-ask__msg{max-width:86%;padding:11px 15px;border-radius:14px;font-size:.9rem;line-height:1.5}
.h-ask__msg--bot{align-self:flex-start;background:var(--surface);border:var(--hairline);color:var(--ink-soft);border-bottom-left-radius:4px}
.h-ask__msg--user{align-self:flex-end;background:var(--signal);color:#fff;border-bottom-right-radius:4px}
.h-ask__msg--typing{color:var(--slate);font-style:italic}
.h-ask__form{display:flex;gap:10px;padding:14px;border-top:var(--hairline);background:var(--surface)}
.h-ask__input{flex:1;height:42px;padding:0 14px;border:var(--hairline);border-radius:var(--radius-sm);background:var(--field);color:var(--ink);font-family:var(--font-body);font-size:.92rem}
.h-ask__input:focus{outline:0;border-color:var(--signal)}

.h-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);cursor:pointer;font:600 .92rem/1 var(--font-body);transition:transform .15s,box-shadow .15s}
.h-fab:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg, 0 12px 30px rgba(0,0,0,.18))}
.h-fab__icon{display:grid;place-items:center;width:26px;height:26px;color:var(--signal)}
.h-fab__dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal);animation:fabPulse 1.8s infinite}
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}70%{box-shadow:0 0 0 10px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}

.h-askPop{position:fixed;right:22px;bottom:84px;width:380px;max-width:calc(100vw - 32px);max-height:560px;z-index:61;background:var(--paper);border:var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg, 0 24px 60px rgba(0,0,0,.22));display:none;flex-direction:column;overflow:hidden}
.h-askPop.is-open{display:flex}
.h-askPop__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:var(--hairline);background:var(--surface)}
.h-askPop__close{background:transparent;border:0;font-size:1.6rem;line-height:1;color:var(--slate);cursor:pointer;padding:0}
.h-askPop .h-ask__log{padding:16px;max-height:300px;flex:1}
.h-askPop .h-ask__chips{padding:0 16px 10px;margin:6px 0 0}
.h-askPop .h-ask__form{padding:12px 14px;border-top:var(--hairline);background:var(--surface);display:flex;gap:8px}
.h-askPop .h-ask__input{height:40px;font-size:.9rem}

@media (max-width:960px){
  .h-fab__label{display:none}
  .h-askPop{right:12px;left:12px;width:auto;bottom:74px}
}

/* Ask Tradetron — escalation handoff bar at bottom of popup */
.h-askPop__handoff{padding:10px 14px 12px;border-top:var(--hairline);background:var(--surface);display:flex;justify-content:center}
.h-askPop__handoff-btn{background:transparent;border:0;color:var(--slate);font:500 .82rem/1 var(--font-body);cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm);transition:color .15s,background .15s}
.h-askPop__handoff-btn:hover{color:var(--signal);background:var(--paper-2)}




/* ============ get-the-app band (footer) — 3 equal cols ============ */
.h-getapp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch;margin-top:36px}
.h-getapp__desc{margin:0;padding:18px 22px;border:var(--hairline);border-radius:var(--radius-md);background:var(--surface);color:var(--ink-soft);font-size:.88rem;line-height:1.6}
.h-getapp__card{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 22px;border:var(--hairline);border-radius:var(--radius-md);background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s,transform .15s}
.h-getapp__card:hover{border-color:var(--signal);background:var(--paper-2);transform:translateY(-1px)}
.h-getapp__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);flex:0 0 auto}
.h-getapp__icon svg{width:22px;height:22px}
.h-getapp__txt{display:flex;flex-direction:column;line-height:1.15}
.h-getapp__lbl{font-family:var(--font-mono);font-size:.62rem;color:var(--slate);letter-spacing:.08em;text-transform:uppercase}
.h-getapp__store{font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin-top:2px}
@media (max-width: 720px){.h-getapp{grid-template-columns:1fr;gap:10px}}