/* site.css — page-specific styles for the TTJ web-design site.
   Loads AFTER ttj-v2.css. Uses its tokens; overrides nothing in it. */

html { background: #070910; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1; }
@media (max-width: 640px) { html, body { max-width: 100%; overflow-x: hidden; } }

/* ttj-v2 loads Inter and JetBrains Mono via next/font on the trading site.
   This is a static page, so the variables are bound to the Google Fonts above. */
:root{ --ttj-sans:"Inter",system-ui,sans-serif; --ttj-mono:"JetBrains Mono",ui-monospace,monospace; }

/* ---- page-specific only. Uses ttj-v2 tokens, overrides nothing. ---- */

/* --- header call button --- */
.hdr-call{display:none; align-items:center; gap:8px; margin-left:20px; padding:7px 14px;
          border:var(--hair) solid var(--accent); color:var(--accent);
          font-family:var(--font-mono); font-size:var(--t-small); white-space:nowrap}
.hdr-call:hover{background:#ff4fa314}

/* --- mobile nav: ttj-v2 hides .ttj-nav under 781px, so this stands in.
       Its own element, so the shared stylesheet is not overridden. --- */
.mnav{display:flex; gap:0; overflow-x:auto; border-bottom:var(--hair) solid var(--border);
      background:var(--card); -webkit-overflow-scrolling:touch}
.mnav::-webkit-scrollbar{display:none}
.mnav a{flex:none; padding:13px 16px; font-size:var(--t-small); color:var(--ink-mid);
        white-space:nowrap; border-right:var(--hair) solid var(--border)}
.mnav a:last-child{border-right:0}
.mnav a[aria-current="page"]{color:var(--accent)}

/* --- sticky call bar, phones only --- */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid;
         grid-template-columns:1fr 1fr; border-top:var(--hair) solid var(--border);
         background:var(--card)}
.callbar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px;
           font-family:var(--font-mono); font-size:var(--t-small); letter-spacing:.04em}
.callbar a:first-child{background:var(--accent); color:var(--on-accent)}
.callbar a:last-child{color:var(--accent); border-left:var(--hair) solid var(--border)}

/* --- mid-page prompt --- */
.prompt{border:var(--hair) solid var(--accent); padding:24px; margin-top:32px;
        display:grid; gap:18px; align-items:center}
.prompt h3{margin-bottom:6px}
.prompt-actions{display:flex; gap:12px; flex-wrap:wrap}

/* --- who I am --- */
.me{display:grid; grid-template-columns:1fr; gap:26px; align-items:start}
.me-photo{border:var(--hair) solid var(--border); background:var(--input-bg); aspect-ratio:1/1;
          display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
          font-size:var(--t-small); text-align:center; padding:18px}
.me-photo img{width:100%; height:100%; object-fit:cover}

/* --- trading watermark band --- */
.mark-band{border-top:var(--hair) solid var(--border); padding:34px 0 30px}
.mark-band-inner{display:grid; grid-template-columns:1fr; gap:18px; align-items:center}
.mark-chart{width:120px; border:var(--hair) solid var(--border); background:var(--bg); padding:10px}
.mark-chart svg{width:100%; height:auto; display:block}

.wf{padding:18px; border-bottom:var(--hair) solid var(--border); background:var(--bg)}
.wf svg{width:100%; height:auto}
.wf-frame { fill:#0a0d14; stroke:#2f3748; stroke-width:1.2; }
.wf-chrome{ fill:#161b26; }
.wf-screen{ fill:#0d111a; }
.wf-panel { fill:#141a25; }
.wf-line  { stroke:#333c50; stroke-width:1.2; fill:none; }
.wf-hair  { stroke:#262e3d; stroke-width:1; fill:none; }
.wf-fill  { fill:#141a25; }
.wf-bar   { fill:#2b3446; }
.wf-dim   { fill:#212936; }
.wf-txt-l { fill:#414c63; }
.wf-txt-s { fill:#333c50; }
.wf-act   { fill:var(--accent); }
.wf-actline{ stroke:var(--accent); stroke-width:1.4; fill:none; }
.wf-icon  { stroke:#4a566e; stroke-width:1.3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.wf-txt   { fill:var(--ink-dim); font-family:var(--font-mono); font-size:6.5px; letter-spacing:.1em; }
.wf-num   { fill:#5a667e; font-family:var(--font-mono); font-size:5.5px; }

[data-theme="light"] .wf-frame { fill:#FFFFFF; stroke:#C3CCDC; }
[data-theme="light"] .wf-chrome{ fill:#E9EEF6; }
[data-theme="light"] .wf-screen{ fill:#FBFCFE; }
[data-theme="light"] .wf-panel { fill:#F1F4F9; }
[data-theme="light"] .wf-line  { stroke:#BCC6D8; }
[data-theme="light"] .wf-hair  { stroke:#DCE3ED; }
[data-theme="light"] .wf-fill  { fill:#F1F4F9; }
[data-theme="light"] .wf-bar   { fill:#CBD4E3; }
[data-theme="light"] .wf-dim   { fill:#E4EAF3; }
[data-theme="light"] .wf-txt-l { fill:#AEB9CC; }
[data-theme="light"] .wf-txt-s { fill:#C6CFDD; }
[data-theme="light"] .wf-icon  { stroke:#8C99B0; }
[data-theme="light"] .wf-num   { fill:#9AA6BC; }

.movers{border-top:var(--hair) solid var(--border)}
.movers li{display:grid; grid-template-columns:1fr; gap:4px; padding:16px 0;
           border-bottom:var(--hair) solid var(--border); font-size:var(--t-small); color:var(--ink-mid)}
.movers b{font-weight:500; color:var(--ink); font-size:1rem}
.m-lo,.m-hi{font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.14em;
            text-transform:uppercase; color:var(--ink-dim)}

.sla{border-top:var(--hair) solid var(--border); border-bottom:var(--hair) solid var(--border);
     background:var(--input-bg); padding:14px 18px}
.sla .t{font-family:var(--font-mono); font-size:1rem; margin-top:4px}

.ttj-price{display:block}
.ttj-price small{display:block; margin-top:7px}
.shot{border:var(--hair) solid var(--border); background:var(--input-bg); aspect-ratio:16/11;
      display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
      font-size:var(--t-small); text-align:center; padding:20px}
.quote{padding:16px 18px; border-left:2px solid var(--accent); background:var(--input-bg);
       font-size:var(--t-small); margin-top:20px}
.quote cite{display:block; margin-top:9px; font-style:normal; font-size:var(--t-label);
            color:var(--ink-dim); font-family:var(--font-mono); letter-spacing:.08em}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:22px 0;
          border-bottom:var(--hair) solid var(--border); counter-increment:s}
.steps{counter-reset:s}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--font-mono);
                  font-size:var(--t-small); color:var(--ink-dim);
                  border-left:2px solid var(--border); padding-left:14px; line-height:1.5}
.steps li.pay::before{border-left-color:var(--accent); color:var(--accent)}
.qa details{border-bottom:var(--hair) solid var(--border)}
.qa{border-top:var(--hair) solid var(--border)}
.qa summary{cursor:pointer; padding:18px 0; list-style:none; display:flex;
            justify-content:space-between; gap:20px; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; font-family:var(--font-mono); color:var(--accent)}
.qa details[open] summary{color:var(--accent)}
.qa details[open] summary::after{content:"\2212"}
.qa .a{padding:0 0 20px; color:var(--ink-mid); font-size:var(--t-small); max-width:var(--measure)}
.muted{color:var(--ink-mid)}
.more{border-top:var(--hair) solid var(--border); margin-top:auto}
.more summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between;
              align-items:center; gap:12px; padding:13px 0 2px;
              font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.14em;
              text-transform:uppercase; color:var(--accent)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+"; font-family:var(--font-mono); font-size:1rem; line-height:1}
.more[open] summary::after{content:"\2212"}
.more summary:hover{color:var(--accent-hover)}
.more summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.more-body{padding:12px 0 4px; font-size:var(--t-small); color:var(--ink-mid)}
.more-body h4{color:var(--ink); font-size:var(--t-small); margin:16px 0 6px}
.more-body h4:first-child{margin-top:4px}
.more-body p{margin:0 0 10px}
.more-body ul{margin:0 0 10px; padding:0; list-style:none}
.more-body li{padding:4px 0 4px 16px; position:relative}
.more-body li::before{content:""; position:absolute; left:0; top:12px; width:7px;
                      height:var(--hair); background:var(--ink-dim)}
.ttj-card-body{display:flex; flex-direction:column; height:100%}
.urgent{margin-top:24px; border:var(--hair) solid var(--accent); padding:18px}
.promise{border-left:2px solid var(--accent); background:var(--input-bg); padding:20px 22px; margin-top:30px}
.stack > * + *{margin-top:14px}
.skip{position:absolute; left:-9999px; top:0; z-index:20; padding:12px 18px;
      background:var(--accent); color:var(--on-accent)}
.skip:focus{left:0}
label{display:block; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em;
      color:var(--ink-dim); margin:0 0 7px}
form .ttj-input{margin-bottom:18px}
@media (max-width:780px){
  body{padding-bottom:56px}
}
@media (min-width:781px){ .mnav{display:none} }
@media (min-width:781px){
  .hdr-call{display:inline-flex}
  .callbar{display:none}
  .prompt{grid-template-columns:1.4fr .6fr}
  .me{grid-template-columns:220px 1fr; gap:34px}
  .mark-band-inner{grid-template-columns:auto 1fr auto; gap:28px}
  .movers li{grid-template-columns:86px 1fr 86px; gap:0 22px; align-items:center}
  .movers b{grid-column:2; grid-row:1}
  .m-lo{grid-column:1; grid-row:1/span 2}
  .m-hi{grid-column:3; grid-row:1/span 2; text-align:right}
}

/* ==================================================================
   LIGHT MODE
   ttj-v2 is dark only. Rather than fork it, this re-points its own
   tokens on [data-theme="light"]. ttj-v2.css is untouched, so the
   trading site's copy and this one stay identical.

   The accent changes in light mode and has to. #ff4fa3 on white is
   3.04:1 - below the 4.5:1 needed for text. #C41E6B is 5.18:1.
   ================================================================== */
[data-theme="light"]{
  --bg:#F4F6FA; --card:#FFFFFF; --card-header:#EEF2F8; --border:#D3DAE6;
  --input-bg:#E9EEF6;
  --accent:#C41E6B; --accent-hover:#A81860; --accent-dim:#E8A9C6; --on-accent:#FFFFFF;
  --good:#0E7C57; --warn:#8A5A00; --bad:#B3261E; --neutral:#5C6575;
  --ink:#141A29; --ink-mid:#4B5568; --ink-dim:#5C6575;
}
[data-theme="light"] html,
html[data-theme="light"]{ background:#F4F6FA; }
[data-theme="light"] .ttj-btn--secondary:hover{ background:rgba(196,30,107,.08); }
[data-theme="light"] .urgent{ background:rgba(196,30,107,.04); }
[data-theme="light"] .wf-line{ stroke:#B9C3D4; }
[data-theme="light"] .wf-fill{ fill:#EEF2F8; }
[data-theme="light"] .wf-bar { fill:#D3DAE6; }
[data-theme="light"] .ttj-brand img{ filter:none; }
[data-theme="light"] .prev-note{ background:#EEF2F8; border-bottom-color:#D3DAE6; }

/* --- the toggle itself --- */
.themetog{
  display:inline-flex; align-items:center; gap:7px; margin-left:16px; padding:6px 12px;
  border:var(--hair) solid var(--border); background:transparent; color:var(--ink-mid);
  font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
}
.themetog:hover{ border-color:var(--accent); color:var(--accent); }
.themetog svg{ width:13px; height:13px; flex:none; }

/* ==================================================================
   NAV - spread across the width instead of bunched right
   ================================================================== */
.ttj-header-inner{ gap:0; }
.ttj-nav{ flex:1; justify-content:flex-end; gap:clamp(18px, 3.4vw, 46px); align-items:center; }
.ttj-nav a{ letter-spacing:.02em; }
.ttj-nav a:hover{ color:var(--accent); }
.mnav a{ flex:1 0 auto; text-align:center; }

/* ==================================================================
   HERO - bigger and clearer
   ================================================================== */
.ttj-hero .ttj-display{
  font-size:clamp(2.5rem, 6.4vw, 4.4rem);
  line-height:1.04; letter-spacing:-.02em; max-width:20ch;
  margin-left:auto; margin-right:auto;
}
.ttj-hero .ttj-lede{ font-size:1.15rem; line-height:1.6; }
.ttj-tagline{
  font-size:.9rem !important; letter-spacing:.34em !important;
  display:inline-block; padding-bottom:12px;
  border-bottom:2px solid var(--accent);
}
.ttj-hero{ padding-top:52px; padding-bottom:48px; }

/* ==================================================================
   MORE PINK, used with intent rather than sprinkled
   ================================================================== */
.ttj-section > .ttj-shell > .ttj-label,
.ttj-section > .ttj-shell > .ttj-label--accent{ color:var(--accent); }
.ttj-h2{ position:relative; padding-top:14px; }
.ttj-h2::before{
  content:""; position:absolute; top:0; left:0; width:40px; height:3px; background:var(--accent);
}
.ttj-hero .ttj-display::before{ display:none; }
.ttj-kpi-value{ color:var(--accent); }
.ttj-card-header h3{ color:var(--ink); }
.ttj-card--available .ttj-card-header{ border-bottom-color:var(--accent); }
.steps li::before{ color:var(--accent); }
.ttj-fact dd a{ color:var(--accent); }
.ttj-footer h4{ color:var(--accent); }
.mark-band{ border-top-width:2px; border-top-color:var(--accent); }

/* ==================================================================
   CONTACT - email led
   ================================================================== */
.ways{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:20px; }
.way{
  display:flex; gap:14px; align-items:flex-start;
  border:var(--hair) solid var(--border); background:var(--card); padding:16px 18px;
}
.way.is-primary{ border-color:var(--accent); }
.way svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--accent); }
.way h4{ margin:0 0 3px; font-size:var(--t-body); }
.way p{ margin:0; font-size:var(--t-small); color:var(--ink-mid); }
.way a{ color:var(--accent); font-family:var(--font-mono); }

@media (min-width:781px){
  .ways{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:780px){
  .themetog{ margin-left:auto; }
}


/* ==================================================================
   POLISH — depth, motion on interaction, and a clearer rhythm.
   Everything here respects prefers-reduced-motion.
   ================================================================== */

/* --- cards feel touchable --- */
.ttj-card{ transition:border-color .18s ease, transform .18s ease; }
.ttj-tier:hover, .ttj-plan:hover{ border-color:var(--accent); transform:translateY(-2px); }
.ttj-tier:hover .ttj-card-header, .ttj-plan:hover .ttj-card-header{ border-bottom-color:var(--accent); }

/* --- a soft accent wash behind the hero, no gradient banding --- */
.ttj-hero{ position:relative; overflow:hidden; }
.ttj-hero::before{
  content:""; position:absolute; inset:-40% 0 auto 50%; width:min(820px,110vw); height:520px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,79,163,.13), transparent 72%);
  pointer-events:none;
}
[data-theme="light"] .ttj-hero::before{ background:radial-gradient(closest-side, rgba(196,30,107,.10), transparent 72%); }
.ttj-hero > .ttj-shell{ position:relative; }

/* --- a free-consultation flag in the hero --- */
.freecon{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px; margin-bottom:22px;
  border:var(--hair) solid var(--accent); background:rgba(255,79,163,.07);
  font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
[data-theme="light"] .freecon{ background:rgba(196,30,107,.06); }
.freecon::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; }

/* --- price strip reads as a band, not three loose boxes --- */
.ttj-kpi-strip{ border:var(--hair) solid var(--border); background:var(--card); }
.ttj-kpi{ padding:20px 22px; }
.ttj-kpi-value{ font-size:1.7rem; }

/* --- buttons --- */
.ttj-btn{ transition:transform .14s ease, background .16s ease, border-color .16s ease; }
.ttj-btn:hover{ transform:translateY(-1px); }
.ttj-btn--primary{ box-shadow:0 0 0 0 rgba(255,79,163,.45); }
.ttj-btn--primary:hover{ box-shadow:0 4px 18px -6px rgba(255,79,163,.55); }
[data-theme="light"] .ttj-btn--primary:hover{ box-shadow:0 4px 18px -6px rgba(196,30,107,.45); }

/* --- contact routes are whole clickable tiles now --- */
.way{ text-decoration:none; color:inherit; transition:border-color .18s ease, transform .18s ease; }
.way:hover{ border-color:var(--accent); transform:translateY(-2px); }
.way-note{ display:block; margin-top:6px; font-size:var(--t-label); letter-spacing:.06em;
           text-transform:uppercase; color:var(--ink-dim); font-family:var(--font-mono); }
.way p{ font-family:var(--font-mono); color:var(--accent); }

/* --- what happens next --- */
.next-steps{ list-style:none; margin:12px 0 0; padding:0; counter-reset:n; }
.next-steps li{
  counter-increment:n; position:relative; padding:9px 0 9px 40px;
  font-size:var(--t-small); color:var(--ink-mid);
  border-bottom:var(--hair) dashed var(--border);
}
.next-steps li:last-child{ border-bottom:0; }
.next-steps li::before{
  content:counter(n); position:absolute; left:0; top:8px;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border:var(--hair) solid var(--accent); color:var(--accent);
  font-family:var(--font-mono); font-size:var(--t-label);
}

/* --- section rhythm: alternate surfaces so pages don't read as one slab --- */
.ttj-section:nth-of-type(even){ background:var(--card); }
.ttj-section:nth-of-type(even) .ttj-card{ background:var(--bg); }
.ttj-section:nth-of-type(even) .ttj-kpi-strip{ background:var(--bg); }

/* --- expanders --- */
.more summary{ transition:color .15s ease; }

@media (prefers-reduced-motion: reduce){
  .ttj-card, .ttj-btn, .way{ transition:none !important; }
  .ttj-tier:hover, .ttj-plan:hover, .ttj-btn:hover, .way:hover{ transform:none !important; }
}


/* the flag needs its own line above the tagline */
.ttj-hero .freecon{ display:inline-flex; }
.ttj-hero .freecon + .ttj-tagline{ display:block; margin-top:4px; }
.ttj-hero > .ttj-shell > .freecon{ margin-bottom:18px; }
.hero-flag-row{ display:block; }

/* header CTA reads as a button, not a bordered link */
.hdr-call{
  display:none; align-items:center; margin-left:20px; padding:9px 18px;
  background:var(--accent); color:var(--on-accent) !important; border:var(--hair) solid var(--accent);
  font-family:var(--font-sans); font-size:var(--t-small); font-weight:500; letter-spacing:.02em;
  text-transform:none; white-space:nowrap; transition:background .16s ease, transform .14s ease;
}
.hdr-call:hover{ background:var(--accent-hover); transform:translateY(-1px); }
@media (min-width:781px){ .hdr-call{ display:inline-flex; } }


/* ==================================================================
   COMFORT — the site was technically correct but tight. This is
   breathing room: looser lines, more space between things, and a
   softer edge on surfaces so nothing feels clamped.
   ================================================================== */

body{ line-height:1.68; }
.ttj-lede{ line-height:1.68; }
.ttj-small{ line-height:1.7; }
p{ margin-bottom:1.15rem; }

/* sections get room, and more of it on wide screens */
.ttj-section{ padding:84px 0; }
@media (min-width:1100px){ .ttj-section{ padding:104px 0; } }
@media (max-width:640px){ .ttj-section{ padding:60px 0; } }

/* headings sit further from the body copy below them */
.ttj-h2{ margin-bottom:.6rem; }
.ttj-section > .ttj-shell > .ttj-lede{ margin-bottom:42px; }

/* cards: more internal padding, softer border */
.ttj-card-header{ padding:16px 22px; }
.ttj-card-body{ padding:26px 22px; }
.ttj-card{ border-color:color-mix(in srgb, var(--border) 82%, transparent); }
.ttj-card:hover{ border-color:var(--accent); }

/* lists breathe */
.ttj-checks li{ padding:9px 0 9px 26px; line-height:1.6; }
.ttj-does li{ padding:9px 0 9px 26px; }

/* the grids sit further apart */
.ttj-grid-3{ gap:22px; }
.ttj-grid-2{ gap:22px; }
.ttj-split{ gap:42px; }

/* expander detail is easier to read */
.more-body{ padding:18px 0 6px; line-height:1.72; }
.more-body h4{ margin:22px 0 8px; }
.more summary{ padding:16px 0 4px; }

/* steps and FAQ */
.steps li{ padding:26px 0; }
.qa summary{ padding:22px 0; }
.qa .a{ padding-bottom:24px; line-height:1.72; }

/* price strip */
.ttj-kpi{ padding:24px 26px; }

/* footer */
.ttj-footer{ padding-top:56px; padding-bottom:40px; }
.ttj-footer-cols{ gap:44px; }
.ttj-footer li{ padding:5px 0; }

/* the hero gets the most room of all */
.ttj-hero{ padding-top:68px; padding-bottom:76px; }
@media (max-width:640px){ .ttj-hero{ padding-top:44px; padding-bottom:52px; } }

.enquiry-options{margin:18px 0 0;padding:16px;border:1px solid var(--border);background:var(--panel);display:grid;gap:10px}
.enquiry-options[hidden]{display:none}
.enquiry-options__title{font-weight:700;margin-bottom:2px}
.enquiry-options label{display:flex;align-items:flex-start;gap:9px;color:var(--ink-mid);font-size:.95rem;line-height:1.4}
.enquiry-options input{margin-top:3px;accent-color:var(--accent)}
.enquiry-help{margin:10px 0 18px}

/* Brighter TTJ interaction layer: visible, controlled and accessible. */
.ttj-btn,.hdr-call,.themetog{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease,background-color .18s ease}
.ttj-btn:focus-visible,.hdr-call:focus-visible,.themetog:focus-visible,.ttj-nav a:focus-visible,.mnav a:focus-visible{
  outline:3px solid #ff48a4;
  outline-offset:4px;
}
.ttj-label--accent,.freecon,.ttj-kpi-value{color:#ff48a4}
.ttj-card--available,.ttj-tier--featured{box-shadow:inset 0 3px 0 #ff3f9b}
@media (hover:hover){
  .ttj-btn:hover,.hdr-call:hover{
    transform:translateY(-2px);
    border-color:#ff48a4;
    box-shadow:0 0 0 1px rgba(255,72,164,.45),0 0 22px rgba(255,32,139,.52),0 10px 28px rgba(211,11,103,.26);
  }
  .themetog:hover{box-shadow:0 0 16px rgba(255,32,139,.32)}
  .ttj-nav a:hover,.mnav a:hover{text-shadow:0 0 14px rgba(255,63,155,.72)}
  .ttj-card:hover,.ttj-tier:hover,.ttj-plan:hover{border-color:rgba(255,72,164,.72);box-shadow:0 12px 34px rgba(211,11,103,.13)}
}
@media (prefers-reduced-motion:reduce){.ttj-btn,.hdr-call,.themetog{transition:none}.ttj-btn:hover,.hdr-call:hover{transform:none}}


/* ==================================================================
   MOTION
   Elements are visible by default. site.js adds .rv-on to <html> only
   after it confirms motion is wanted — so if the script fails, or a
   visitor has reduced motion on, nothing is ever hidden. That is the
   opposite of the usual scroll-animation bug where JS dies and the
   page stays blank.
   ================================================================== */

.rv { opacity:1; transform:none; }

.rv-on .rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--rv-delay, 0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--rv-delay, 0ms);
  will-change:opacity, transform;
}
.rv-on .rv.rv-in{ opacity:1; transform:none; }

/* wireframes assemble */
.wf-armed .wf-part{ opacity:1; }
.rv-on .wf-armed .wf-part{
  opacity:0;
  transform:translateY(5px) scale(.985);
  transform-origin:center;
  transition:opacity .4s ease var(--wf-delay, 0ms), transform .4s ease var(--wf-delay, 0ms);
}
.rv-on .wf-armed.wf-go .wf-part{ opacity:1; transform:none; }

/* scroll progress */
.scrollbar-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:linear-gradient(90deg, var(--accent), var(--accent-hover));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}

/* header gains weight on scroll */
.ttj-header{ transition:box-shadow .25s ease, background .25s ease; }
.ttj-header.is-stuck{
  box-shadow:0 1px 0 0 var(--accent), 0 10px 30px -18px rgba(0,0,0,.9);
}
[data-theme="light"] .ttj-header.is-stuck{ box-shadow:0 1px 0 0 var(--accent), 0 10px 26px -20px rgba(20,26,41,.35); }

@media (prefers-reduced-motion: reduce){
  .rv, .rv-on .rv, .wf-part, .rv-on .wf-armed .wf-part{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .scrollbar-progress{ display:none; }
}


/* ==================================================================
   BOLDER, PINKER
   ================================================================== */

/* headings carry more weight than ttj-v2's default 500 */
.ttj-display{ font-weight:700; letter-spacing:-.025em; }
.ttj-h2{ font-weight:600; letter-spacing:-.015em; }
.ttj-card-header h3{ font-weight:600; }

/* the hero headline picks up the accent on its last words */
.ttj-hero .ttj-display{
  background:linear-gradient(103deg, var(--ink) 0%, var(--ink) 52%, var(--accent) 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@supports not (background-clip: text){
  .ttj-hero .ttj-display{ -webkit-text-fill-color:currentColor; color:var(--ink); }
}

/* section rules are longer and heavier */
.ttj-h2::before{ width:56px; height:4px; }

/* nav underlines sweep in */
.ttj-nav a{ position:relative; }
.ttj-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.ttj-nav a:hover::after{ transform:scaleX(1); }
.ttj-nav a[aria-current="page"]{ border-bottom-color:transparent; }
.ttj-nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* accent edge on cards, drawn on hover */
.ttj-card{ position:relative; }
.ttj-tier::after, .ttj-plan::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.ttj-tier:hover::after, .ttj-plan:hover::after{ transform:scaleX(1); }
.ttj-card--available::after{ transform:scaleX(1); }

/* prices get more presence */
.ttj-price{ font-size:1.9rem; letter-spacing:-.01em; }
.ttj-kpi-value{ font-size:1.85rem; letter-spacing:-.01em; }

/* checks in accent, not mint — more pink through the body */
.ttj-checks li::before{ background:var(--accent) !important; }

/* labels get a rule under them */
.ttj-label--accent{ font-weight:600; }

/* the trading band edge is heavier */
.mark-band{ border-top-width:3px; }

/* buttons: accent sweep on the secondary */
.ttj-btn--secondary{ position:relative; overflow:hidden; z-index:0; }
.ttj-btn--secondary::before{
  content:""; position:absolute; inset:0; background:var(--accent); z-index:-1;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.ttj-btn--secondary:hover{ color:var(--on-accent); }
.ttj-btn--secondary:hover::before{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .ttj-nav a::after, .ttj-tier::after, .ttj-plan::after, .ttj-btn--secondary::before{
    transition:none !important;
  }
}


/* ==================================================================
   WIDER — ttj-v2 caps at 1160px, which was right for a trading app
   read at a desk and too narrow for a marketing site on a big screen.
   ================================================================== */
.ttj-shell{ max-width:1340px; }
@media (min-width:1500px){ .ttj-shell{ max-width:1440px; } }
.ttj-header-inner{ max-width:1340px; }
@media (min-width:1500px){ .ttj-header-inner{ max-width:1440px; } }

/* prose still gets a readable measure inside the wider shell */
.ttj-lede{ max-width:74ch; }
.ttj-section > .ttj-shell > .ttj-lede{ max-width:76ch; }

/* wide screens get four across where it helps */
@media (min-width:1180px){
  .ttj-grid-3{ gap:26px; }
  .ttj-kpi-strip{ display:grid; grid-template-columns:repeat(3,1fr); }
}

/* the hero fills the space it's given */
.ttj-hero .ttj-display{ max-width:22ch; }
@media (min-width:1180px){
  .ttj-hero .ttj-display{ font-size:clamp(3rem, 5.6vw, 5.2rem); }
  .ttj-hero .ttj-lede{ font-size:1.22rem; max-width:64ch; }
}

/* The home promise is deliberately two balanced lines. */
.ttj-hero .ttj-display--home{
  max-width:18ch;
  font-size:clamp(3rem, 5.25vw, 4.8rem);
  line-height:1.02;
}
.ttj-display--home span{ display:block; }
.ttj-display--home span + span{ margin-top:.12em; }
@media (max-width:640px){
  .ttj-hero .ttj-display--home{ font-size:clamp(2.55rem, 12vw, 3.55rem); }
}


/* ==================================================================
   LOUDER
   ================================================================== */

/* section eyebrows get a pill, not just a colour */
.ttj-section > .ttj-shell > .ttj-label--accent{
  display:inline-block; padding:6px 12px; border:var(--hair) solid var(--accent);
  background:rgba(255,79,163,.08); margin-bottom:6px;
}
[data-theme="light"] .ttj-section > .ttj-shell > .ttj-label--accent{ background:rgba(196,30,107,.07); }

/* h2 rule becomes a full accent bar */
.ttj-h2{ padding-top:20px; }
.ttj-h2::before{ width:72px; height:5px; }

/* card headers carry an accent tint */
.ttj-card-header{ position:relative; }
.ttj-card--available .ttj-card-header{ background:rgba(255,79,163,.07); }
[data-theme="light"] .ttj-card--available .ttj-card-header{ background:rgba(196,30,107,.06); }

/* the picked pill pulses once when it appears */
.ttj-pill--accent{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }

/* price figures get a glow in dark mode */
.ttj-price, .ttj-kpi-value{ text-shadow:0 0 28px rgba(255,79,163,.28); }
[data-theme="light"] .ttj-price, [data-theme="light"] .ttj-kpi-value{ text-shadow:none; }

/* primary buttons are chunkier */
.ttj-btn{ height:48px; padding:0 26px; font-size:.95rem; font-weight:600; }
.ttj-btn--primary{ box-shadow:0 6px 24px -10px rgba(255,79,163,.6); }
[data-theme="light"] .ttj-btn--primary{ box-shadow:0 6px 22px -12px rgba(196,30,107,.5); }

/* the free-consultation flag is bolder */
.freecon{ background:var(--accent); color:var(--on-accent); border-color:var(--accent);
          font-weight:600; padding:9px 18px; }
.freecon::before{ background:var(--on-accent); }
[data-theme="light"] .freecon{ background:var(--accent); color:#fff; }

/* stripe the alternate sections harder */
.ttj-section:nth-of-type(even){ background:var(--card); }

/* footer headings pop */
.ttj-footer h4{ font-weight:600; letter-spacing:.14em; }


/* ==================================================================
   TEMPLATES GALLERY
   ================================================================== */
.tpl-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:760px){ .tpl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .tpl-grid{ grid-template-columns:repeat(4,1fr); } }
.tpl-grid.is-three{ grid-template-columns:1fr; }
@media (min-width:760px){ .tpl-grid.is-three{ grid-template-columns:repeat(3,1fr); } }

.tpl{ background:var(--card); border:var(--hair) solid var(--border);
      display:flex; flex-direction:column; transition:border-color .18s ease, transform .18s ease; }
.tpl:hover{ border-color:var(--accent); transform:translateY(-3px); }
.tpl-art{ padding:16px; background:var(--bg); border-bottom:var(--hair) solid var(--border); }
.tpl-art svg{ width:100%; height:auto; display:block; }
.tpl-body{ padding:18px; flex:1; }
.tpl-body h3{ font-size:1rem; margin-bottom:6px; }
.tpl-body p{ font-size:var(--t-small); color:var(--ink-mid); margin:0; }
.tpl-tag{ display:inline-block; margin-bottom:10px; padding:3px 9px;
          border:var(--hair) solid var(--border); font-family:var(--font-mono);
          font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }

.tpl-note{ border:var(--hair) solid var(--accent); padding:20px 22px; margin-bottom:38px;
           background:rgba(255,79,163,.05); }
[data-theme="light"] .tpl-note{ background:rgba(196,30,107,.04); }

@media (prefers-reduced-motion: reduce){ .tpl:hover{ transform:none; } }


/* ==================================================================
   PAGE HEROES — inner pages were plainer than the home page, which
   made the site feel like it ran out of steam after one screen.
   ================================================================== */
.page-hero{
  position:relative; overflow:hidden; text-align:center;
  padding:64px 0 58px; border-bottom:var(--hair) solid var(--border);
}
.page-hero::before{
  content:""; position:absolute; inset:-50% 0 auto 50%; width:min(760px,110vw); height:460px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,79,163,.12), transparent 72%);
  pointer-events:none;
}
[data-theme="light"] .page-hero::before{ background:radial-gradient(closest-side, rgba(196,30,107,.09), transparent 72%); }
.page-hero > .ttj-shell{ position:relative; }
.page-hero .ttj-display{
  font-size:clamp(2.2rem, 4.6vw, 3.6rem); font-weight:700; letter-spacing:-.025em;
  margin:16px auto 14px; max-width:20ch;
  background:linear-gradient(103deg, var(--ink) 0%, var(--ink) 54%, var(--accent) 97%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.page-hero .ttj-lede{ margin:0 auto; max-width:66ch; font-size:1.1rem; }
@media (max-width:640px){ .page-hero{ padding:44px 0 40px; } }

/* template cards */
.tpl-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sw{ display:flex; gap:4px; }
.sw span{ width:13px; height:13px; display:block; border:1px solid rgba(128,128,128,.35); }


/* ==================================================================
   SERVICE TIERS — full-width rows. They used to be three cards in a
   grid with the detail hidden behind an expander; opening one made
   that column twice the height of the others and the whole row
   lurched. Detail is now always visible and each tier owns its row.
   ================================================================== */
.tier-row{
  display:grid; grid-template-columns:1fr; gap:28px;
  background:var(--card); border:var(--hair) solid var(--border);
  padding:26px; margin-top:26px; position:relative;
}
.tier-row::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.tier-row:hover::after{ transform:scaleX(1); }
.tier-row#standard::after{ transform:scaleX(1); }

.tier-art{ display:flex; flex-direction:column; gap:18px; }
.tier-art .wf{ padding:0; border:var(--hair) solid var(--border); background:var(--bg); }
.tier-art .wf svg{ display:block; width:100%; height:auto; }
.tier-price{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tier-price .ttj-price{ margin:0; }
.tier-art .ttj-btn{ align-self:flex-start; }

.tier-detail h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.015em; }
.tier-detail > .ttj-lede{ margin:8px 0 24px; font-size:1.05rem; }
.tier-cols{ display:grid; grid-template-columns:1fr; gap:26px; }
.tier-cols h4{
  font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); font-weight:600; margin:22px 0 8px;
}
.tier-cols h4:first-child{ margin-top:0; }
.tier-cols p{ margin-bottom:0; }

@media (min-width:900px){
  .tier-row{ grid-template-columns:minmax(280px, .82fr) 1.18fr; gap:40px; align-items:start; }
}
@media (min-width:1180px){
  .tier-cols{ grid-template-columns:1fr 1.15fr; gap:36px; }
}
@media (prefers-reduced-motion: reduce){ .tier-row::after{ transition:none; } }


/* ==================================================================
   TEMPLATE DETAIL DIALOGS
   Native <dialog>: focus trapping, Escape to close and the backdrop
   all come free from the browser. No library, and it degrades to a
   plain visible block if <dialog> isn't supported.
   ================================================================== */
.tpl{ cursor:pointer; }
.tpl:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tpl-more{
  font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.tpl:hover .tpl-more{ color:var(--accent-hover); }
.tpl-more::after{ content:" \2192"; }

.dlg{
  border:var(--hair) solid var(--accent); background:var(--card); color:var(--ink);
  padding:0; max-width:min(1080px, 94vw); width:100%; max-height:90vh;
}
.dlg::backdrop{ background:rgba(3,5,10,.78); backdrop-filter:blur(3px); }
[data-theme="light"] .dlg::backdrop{ background:rgba(20,26,41,.45); }
.dlg-inner{ position:relative; max-height:90vh; overflow:auto; }
.dlg-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:36px; height:36px; line-height:1; font-size:1.5rem;
  background:var(--card); color:var(--ink-mid);
  border:var(--hair) solid var(--border); cursor:pointer;
}
.dlg-x:hover{ border-color:var(--accent); color:var(--accent); }
.dlg-art{ padding:22px; background:var(--bg); border-bottom:var(--hair) solid var(--border); }
.dlg-art svg{ display:block; width:100%; height:auto; max-height:52vh; }
.dlg-body{ padding:26px; }
.dlg-body h3{ font-size:1.5rem; font-weight:600; margin:10px 0 8px; letter-spacing:-.015em; }
.dlg-body h4{
  font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); font-weight:600; margin:28px 0 12px;
}
.dlg-pages{ display:grid; grid-template-columns:1fr; gap:2px; }
.dlg-page{ background:var(--input-bg); padding:14px 16px; }
.dlg-page h5{ margin:0 0 4px; font-size:var(--t-small); font-weight:600; color:var(--ink); }
.dlg-page p{ margin:0; font-size:var(--t-small); color:var(--ink-mid); }
.dlg-note{ border-left:2px solid var(--accent); background:var(--input-bg); padding:14px 16px; margin-top:24px; }
.dlg-note p{ margin:0; }
.dlg-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

@media (min-width:900px){
  .dlg-inner{ display:grid; grid-template-columns:1fr 1fr; }
  .dlg-art{ border-bottom:0; border-right:var(--hair) solid var(--border); position:sticky; top:0; align-self:start; }
  .dlg-art svg{ max-height:none; }
}
/* no <dialog> support: show the detail inline rather than losing it */
@supports not selector(dialog::backdrop){
  .dlg{ display:block; max-width:none; margin-top:20px; }
  .dlg-x{ display:none; }
}

/* how-to-use note on the Styles page — informative, not defensive */
.tpl-how{
  border-left:3px solid var(--accent); background:var(--card);
  padding:20px 24px; margin-bottom:44px;
}
.tpl-how p:last-child{ margin-bottom:0; }

/* upkeep SLA strip inside plan cards */
.sla-t{ font-family:var(--font-mono); font-size:1rem; margin-top:4px; line-height:1.35; }

/* live screenshot in the case study */
.shot--live{
  display:block; position:relative; padding:0; overflow:hidden; aspect-ratio:auto;
  border:var(--hair) solid var(--border); background:var(--input-bg);
  transition:border-color .18s ease, transform .18s ease;
}
.shot--live:hover{ border-color:var(--accent); transform:translateY(-2px); }
.shot--live img{ display:block; width:100%; height:auto; }
.shot-badge{
  position:absolute; left:0; bottom:0; padding:8px 14px;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.shot-badge::after{ content:" \2197"; }
@media (prefers-reduced-motion: reduce){ .shot--live:hover{ transform:none; } }


/* contact routes: two of them, so two columns. A 3-column grid holding two
   cards squeezed each into a third of the width and stacked the note text
   one word per line. */
.way{ align-items:flex-start; }
.way > div{ min-width:0; }
.way h4{ font-size:1.05rem; margin-bottom:5px; }
.way p{ font-size:var(--t-small); line-height:1.5; word-break:normal; overflow-wrap:anywhere; }
.way-note{ margin-top:8px; line-height:1.55; letter-spacing:.04em; }
@media (min-width:1100px){ .ways{ gap:18px; } }

/* company mark in place of a photograph on the About page */
.me-photo--logo{ padding:26px; background:var(--bg); border-color:var(--accent); }
.me-photo--logo img{ width:100%; height:auto; object-fit:contain; }

/* add-on price tables on the Prices page */
.addon-table{ width:100%; border-collapse:collapse }
.addon-table td{ padding:12px 0; border-bottom:var(--hair) solid var(--border); vertical-align:top }
.addon-table tr:last-child td{ border-bottom:0 }
.addon-p{ text-align:right; white-space:nowrap; font-family:var(--font-mono);
          color:var(--accent); font-weight:600; font-size:1.05rem; padding-left:20px }

/* sub-label under an add-on name (the admin styles this separately) */
.addon-table .doc-sub{ font-size:.86rem; color:var(--ink-mid); margin-top:3px; line-height:1.5 }