/* ── Tally: the film first ─────────────────────────────────────────────
   tally.html opens on the 70-second film, then says what Tally is, then
   lists the tools it connects to. This file holds everything that redesign
   added, plus the film in the home page's Tally band; site.css is not
   edited, and nothing here restyles a class that site.css owns except where
   a rule is scoped to .tally-page (tally.html's <body>) or .tally-band.

   The palette is the brand sheet's, with Tally blue for the product:

     Ink #0B0F19   Dim #1D2638   Steel #5D728E   Line #C2C9D2
     Raised #E6E6E6   Paper #FFFFFF   Bronze #9C8462   Tally blue #1F6BFF

   Contrast, measured (WCAG): Paper on Ink 19.2, Line on Ink 11.5, Bronze on
   Ink 5.4 (labels only), Steel on Paper 4.9, Dim on Paper 15.2. Tally blue
   on Ink is 4.2, so it is never small text: it is the full stop, the lit
   chapter and the focus ring on the search. */
:root{
  --tp-ink:#0B0F19; --tp-dim:#1D2638; --tp-steel:#5D728E; --tp-line:#C2C9D2;
  --tp-raised:#E6E6E6; --tp-paper:#FFFFFF; --tp-bronze:#9C8462; --tp-blue:#1F6BFF;
  --tp-nav:70px;                          /* the fixed bar, site.css .nav-in */
  --tp-rule:rgba(194,201,210,.16);        /* Line, as a hairline on Ink */
}
@media (max-width:640px){ :root{ --tp-nav:62px } }

/* The bar's white fall-off exists for the home page's photograph and only
   until the bar docks. This page has no .hero-zone, so it never docks, and
   the fall-off hung a grey haze over the top of the film. The bar itself
   stays as it is on every page. */
.tally-page nav:not(.docked)::before{content:none}
/* The bar's translucent white turned grey where it crossed the Ink stage. */
.tally-page nav{background:rgba(255,255,255,.97)}

/* ── the stage ────────────────────────────────────────────────────────
   Ink, because the film's own dark scenes are #0A0E19: the room and the
   screen are the same colour, so in those scenes the words sit on the page
   and in the light ones the frame reads as a lit screen. One soft pool of
   Tally blue behind the frame, one of Steel under the words. */
.tp-stage{position:relative; isolation:isolate; overflow:hidden;
  background:var(--tp-ink); color:var(--tp-paper);
  padding:calc(var(--tp-nav) + clamp(18px,2.6vw,40px)) 0 clamp(60px,7.5vw,120px)}
.tp-stage::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(54% 40% at 50% 30%, rgba(31,107,255,.16), transparent 70%),
    radial-gradient(64% 46% at 18% 100%, rgba(93,114,142,.22), transparent 70%)}
.tp-stage :focus-visible{outline:2px solid var(--tp-paper); outline-offset:3px}

/* As large as the screen allows while the whole frame, and a strip of what
   follows, still fit on the first screen: a film cut off at the bottom
   reads as an image, and one that fills the screen hides that the page
   goes on. 17vh is the strip; 480px is the floor for a short landscape
   phone; 1440px the ceiling. */
.tp-film{--tp-room:calc(100vh - var(--tp-nav) - 17vh);
  position:relative; margin:0 auto;
  width:min(100% - 64px, 1440px, max(480px, var(--tp-room) * 16 / 9))}
@supports (height:100svh){
  .tp-film{--tp-room:calc(100svh - var(--tp-nav) - 17svh)}
}
.tp-video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  background:var(--tp-ink); border-radius:14px;
  box-shadow:
    0 0 0 1px var(--tp-rule),
    0 60px 140px -70px rgba(31,107,255,.6),
    0 34px 80px -46px rgba(11,15,25,.95)}
/* Edge to edge on a phone: 16:9 inside a gutter is a letterbox. */
@media (max-width:640px){
  .tp-film{width:100%}
  .tp-video{border-radius:0; box-shadow:none}
}

/* ── what it is, under the film ───────────────────────────────────────
   The name, the one-sentence answer and the way in. The chapters list was
   removed on 28 Sep 2026 (Dixon); its note now sits under the sign-in link. */
.tp-intro{display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(40px,5vw,64px); margin-top:clamp(40px,5vw,76px)}
@media (min-width:960px){
  .tp-intro{grid-template-columns:minmax(0,1fr); align-items:start;
    column-gap:clamp(56px,7vw,120px)}
}
.tp-title{margin:0; font-family:"Jost",system-ui,sans-serif; font-weight:300;
  text-transform:uppercase; letter-spacing:.03em; line-height:.98;
  font-size:clamp(46px,6.6vw,100px); color:var(--tp-paper); text-wrap:balance}
.tp-stop{color:var(--tp-blue)}
.tp-lede{margin:clamp(20px,2.2vw,30px) 0 0; max-width:48ch;
  font-size:clamp(17px,1.35vw,19.5px); line-height:1.6; color:var(--tp-line)}

/* Client sign in: the one button on the stage, so it is the brightest
   thing on it. Paper on Ink, a pill like the bar's own call to action. */
.tp-signin{display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:54px; padding:0 28px; margin-top:clamp(28px,3vw,40px);
  border-radius:999px; background:var(--tp-paper); color:var(--tp-ink);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 14px 34px -16px rgba(31,107,255,.6);
  transition:background-color .2s ease, box-shadow .3s ease}
.tp-signin:hover, .tp-signin:focus-visible{background:var(--tp-raised); color:var(--tp-ink)}
.tp-signin svg{display:block; width:16px; height:16px; flex-shrink:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tp-signin:hover svg{transform:translateX(3px)}
.tp-stage .tp-signin:focus-visible{outline-offset:4px}
@media (max-width:640px){
  .tp-signin{display:flex; width:100%}
}

/* The chapters: a scene list on a wide screen, tiles below that — three
   across on a tablet, two on a phone. The time is the film's own. */
.tp-ch-h{margin:0 0 14px; font:500 11.5px/1.2 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tp-bronze)}
@media (min-width:960px){ .tp-ch-h{margin-top:14px} }
.tp-ch-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr)}
.tp-ch-list li{margin:0; min-width:0}
.tp-ch-list button{position:relative; display:grid; grid-template-columns:4.4em minmax(0,1fr) 16px;
  align-items:center; column-gap:12px; width:100%; min-height:54px; margin:0; padding:0 2px;
  border:0; border-top:1px solid var(--tp-rule); border-radius:0; background:none;
  font:inherit; color:var(--tp-line); text-align:left; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease}
.tp-ch-list li:last-child button{border-bottom:1px solid var(--tp-rule)}
.tp-ch-t{font:500 12.5px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--tp-bronze); transition:color .2s ease}
.tp-ch-l{font-size:16.5px; font-weight:500; line-height:1.3; letter-spacing:-.005em}
.tp-ch-go{display:block; width:16px; height:16px; opacity:0; transform:translateX(-4px);
  transition:opacity .2s ease, transform .3s cubic-bezier(.22,1,.36,1)}
.tp-ch-list button:hover, .tp-ch-list button:focus-visible,
.tp-ch-list button[aria-current="true"]{color:var(--tp-paper)}
.tp-ch-list button:hover .tp-ch-go, .tp-ch-list button:focus-visible .tp-ch-go{opacity:1; transform:none}
.tp-ch-list button[aria-current="true"] .tp-ch-t{color:var(--tp-paper)}
/* How far into the chapter the film is: a Tally blue rule that fills as it
   plays. --tp-p is set by the page script from the film's own clock. */
.tp-ch-list button::after{content:""; position:absolute; z-index:1; left:0; right:0; bottom:-1px;
  height:2px; background:var(--tp-blue); transform:scaleX(var(--tp-p,0)); transform-origin:left;
  opacity:0; transition:opacity .2s ease, transform .25s linear}
.tp-ch-list button[aria-current="true"]::after{opacity:1}

/* The one line on what the film shows: small and quieter than the chapter
   names, and still well inside AA. #9AA3B0 is 7.5:1 on Ink and 6.0:1 where
   the Steel pool lightens the stage most. */
.tp-ch-note{margin:16px 0 0; font-size:13.5px; line-height:1.5; color:#9AA3B0}
@media (max-width:959px){ .tp-ch-note{margin-top:14px} }
/* A touch smaller on narrow phones, so it stays one line from 360px up;
   below that it wraps rather than shrinking further. */
@media (max-width:374px){ .tp-ch-note{font-size:13px} }

@media (max-width:959px){
  .tp-ch-list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
  .tp-ch-list button{grid-template-columns:minmax(0,1fr); align-content:center; row-gap:7px;
    min-height:76px; padding:13px 14px; overflow:hidden;
    border:1px solid rgba(194,201,210,.22); border-radius:12px; background:rgba(255,255,255,.025)}
  .tp-ch-list li:last-child button{border-bottom:1px solid rgba(194,201,210,.22)}
  .tp-ch-go{display:none}
  .tp-ch-list button::after{bottom:0}
  .tp-ch-list button[aria-current="true"]{border-color:rgba(31,107,255,.7);
    background:rgba(31,107,255,.1)}
}
@media (max-width:640px){
  .tp-ch-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .tp-ch-l{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .tp-signin, .tp-signin svg, .tp-ch-list button, .tp-ch-t, .tp-ch-go,
  .tp-ch-list button::after{transition:none}
}

/* ── the tools ────────────────────────────────────────────────────────
   Every entry in Nango's catalogue, in one scroller of fixed height so the
   list can be 901 long without the page being. A name with its own logo
   shows it; a name without one is just the name. */
.tp-tools{background:#F3F3F3;             /* Raised at 45% on Paper */
  border-top:1px solid var(--tp-raised)}
/* site.css caps .sec h2 at 660px, which left "use" alone on a third line;
   the full column, balanced, breaks it after "tools". */
.tp-tools .sec h2{margin-bottom:0; max-width:none; text-wrap:balance}
.tp-tools-status{margin:clamp(16px,1.8vw,24px) 0 0; max-width:64ch;
  font-size:18px; line-height:1.55; color:var(--tp-dim); text-wrap:pretty}

.tp-cat{margin-top:clamp(28px,3.6vw,48px); background:var(--tp-paper);
  border:1px solid var(--tp-line); border-radius:16px; overflow:hidden;
  box-shadow:0 34px 80px -56px rgba(11,15,25,.5);
  transition:border-color .2s ease, box-shadow .2s ease}
.tp-cat:has(.tp-cat-scroll:focus-visible){border-color:var(--tp-blue);
  box-shadow:0 0 0 3px rgba(31,107,255,.22), 0 34px 80px -56px rgba(11,15,25,.5)}
.tp-cat-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:14px; border-bottom:1px solid var(--tp-raised)}
.tp-cat-search{position:relative; display:block; flex:1 1 240px; min-width:0; margin:0}
.tp-cat-search svg{position:absolute; left:15px; top:50%; width:18px; height:18px;
  margin-top:-9px; color:var(--tp-steel); pointer-events:none}
.tp-cat-search input{display:block; width:100%; height:50px; margin:0; padding:0 16px 0 44px;
  border:1px solid var(--tp-line); border-radius:10px; background:var(--tp-paper);
  color:var(--tp-ink); font:500 16px/1.2 "Switzer","Neue Montreal",system-ui,sans-serif;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease}
.tp-cat-search input::placeholder{color:var(--tp-steel); opacity:1}
.tp-cat-search input:focus{outline:none; border-color:var(--tp-blue);
  box-shadow:0 0 0 3px rgba(31,107,255,.2)}
.tp-cat-count{margin:0 4px 0 auto; font:500 12px/1.2 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--tp-steel); white-space:nowrap}

/* Fixed height, faded at both ends so it reads as a window onto a longer
   list; the padding keeps the first and last rows clear of the fade. */
.tp-cat-scroll{position:relative; height:clamp(340px,50vh,460px);
  overflow-y:auto; overscroll-behavior:contain; padding:18px 16px 44px;
  scrollbar-width:thin; scrollbar-color:var(--tp-line) transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 40px),transparent 100%)}
.tp-cat-scroll:focus-visible{outline:none}
.tp-cat-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tp-cat-list li{display:inline-flex; align-items:center; gap:9px; min-height:40px; max-width:100%;
  margin:0; padding:8px 14px; border:1px solid var(--tp-raised); border-radius:10px;
  background:var(--tp-paper); font-size:14.5px; font-weight:500; line-height:1.25;
  color:var(--tp-dim); overflow-wrap:anywhere}
.tp-cat-list li.has-logo{padding-left:9px}
.tp-cat-list li[hidden]{display:none}
.tp-cat-list img{display:block; flex-shrink:0; width:22px; height:22px;
  border-radius:5px; object-fit:contain}
.tp-cat-empty{margin:4px 2px 0; font-size:15.5px; color:var(--tp-steel)}
@media (max-width:640px){
  .tp-cat{border-radius:14px}
  .tp-cat-bar{padding:12px}
  .tp-cat-scroll{padding:16px 12px 44px}
  .tp-cat-list{gap:7px}
  .tp-cat-list li{font-size:14px; padding:7px 12px}
  .tp-cat-list li.has-logo{padding-left:8px}
}
@media (prefers-reduced-motion:reduce){
  .tp-cat, .tp-cat-search input{transition:none}
}

/* ── the home page's Tally band ───────────────────────────────────────
   The film in place of the dashboard still. It keeps the still's frame
   (site.css .tally-still) and swaps the white ground for Ink, so the box
   is the film's colour before the poster arrives rather than a white
   flash. */
.tally-band .tally-film{aspect-ratio:16/9; object-fit:cover; background:var(--tp-ink)}

/* Scoped to .tally-page (28 Sep 2026): this file is also loaded by the
   home page, whose Meet Tally band is #tally too, and the bare selector
   folded that band into these two columns, shrinking its film into the
   left one. */
/* A client workspace beside "One place where your team stays in control."
   (Dixon, 28 Sep 2026). It is the new Tally home from the design demo, with a
   fictional company name and no client's name or logo. The crop stops above
   the demo's cards, which show steps Tally does not do yet. */
.tally-page #tally .wrap.sec{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:start}
@media (min-width:1000px){
  /* The words sit to the left and the picture takes the rest of the width
     (Dixon, 28 Sep 2026: "move the word to left so more space on the
     right"). On a wide screen this band leaves the 1160px column: the text
     is a column of at most 560px from a small left margin, and the
     screenshot runs from there to the edge of the window, square on that
     side, like the app sliding into view. The section clips sideways so
     the window's scrollbar can never start a horizontal scroll. */
  .tally-page #tally{overflow-x:clip}
  .tally-page #tally .wrap.sec{max-width:none; margin:0;
    padding-left:clamp(32px,6vw,160px); padding-right:0;
    grid-template-columns:minmax(340px,560px) minmax(0,1fr); column-gap:clamp(40px,4.5vw,80px)}
  .tally-page #tally .tp-ws-shot{border-right:0; border-radius:14px 0 0 14px}
}
.tp-ws-shot{margin:clamp(0px,4vw,64px) 0 0; border-radius:14px; overflow:hidden; background:#FFFFFF;
  border:1px solid #E4E4E9; box-shadow:0 34px 70px -40px rgba(11,15,25,.45)}
.tp-ws-shot img{display:block; width:100%; height:auto}

/* ---- the closer: option A of three, chosen by Dixon on 9 October 2026 ----
   Ink band, Tally's line on the left, one product moment on the right. Uses
   the page's width (to 1440px) instead of the old narrow column. Everything
   is scoped to .tp-closer; the site-wide .closer rules are not touched. */
.tp-closer{--ink:#0B0F19; --ink2:#101827; --navy:#1D2638; --steel:#5D728E; --line:#E6E6E6;
  --card:#F1F1F2; --faint:#44536A; --line-strong:#C2C9D2; --good:#1C7A52; --blue:#1F6BFF;
  --on-dark:#F2F6FA; --on-dark-dim:#B7C4D4; --on-dark-label:#8FAECB;
  --sans:"Switzer","Neue Montreal",system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  position:relative; overflow:hidden; background:var(--ink); color:var(--on-dark);
  padding:clamp(64px,8vw,128px) 0; font-family:var(--sans)}
.tp-closer::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 85% 30%, rgba(93,114,142,.30), transparent 65%),
             radial-gradient(40% 50% at 0% 100%, rgba(29,38,56,.9), transparent 70%)}
.tp-closer h2,.tp-closer p{margin:0}
.tp-closer a{text-decoration:none}
.tp-closer :focus-visible{outline:2px solid #8FB6FF; outline-offset:4px}
.tpc-wrap{position:relative; max-width:1440px; margin:0 auto; padding:0 clamp(20px,5.5vw,96px);
  display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:center}
@media (min-width:980px){.tpc-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); column-gap:clamp(48px,6vw,120px)}}
.tpc-eyebrow{font:500 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-label)}
.tp-closer h2{margin-top:20px; font:400 clamp(36px,4.6vw,76px)/1.04 var(--sans); letter-spacing:-.03em; color:var(--on-dark); text-wrap:balance}
.tpc-lede{margin-top:22px !important; font-size:clamp(17px,1.3vw,19px); line-height:1.6; color:var(--on-dark-dim); max-width:46ch}
.tpc-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:36px}
.tpc-btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; height:58px; padding:0 30px; border-radius:2px;
  font:500 14px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; background:#E8EEF5; color:var(--ink); transition:background .15s ease}
.tpc-btn:hover{background:#FFFFFF}
.tpc-btn .arw{font-size:17px; letter-spacing:0; transition:transform .2s ease}
.tpc-btn:hover .arw{transform:translateX(3px)}
.tpc-link{font:500 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:8px 0;
  color:#DCE5EF; border-bottom:1px solid rgba(220,229,239,.4)}
.tpc-assure{list-style:none; margin:40px 0 0; padding:24px 0 0; border-top:1px solid rgba(194,201,210,.16);
  display:flex; flex-wrap:wrap; gap:12px 32px}
.tpc-assure li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--on-dark-dim)}
.tpc-assure svg{flex-shrink:0; color:var(--on-dark-label)}
.tpc-shot{margin:0}
.tpc-card{background:#FFFFFF; color:var(--ink); border-radius:14px; overflow:hidden; border:1px solid rgba(194,201,210,.35)}
.tpc-bar{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.tpc-tile{width:30px; height:30px; border-radius:7px; background:#101C33; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.tpc-bar .t{font:500 14.5px/1 var(--sans)}
.tpc-bar .ws{margin-left:auto; font:400 12px/1 var(--mono); color:var(--faint); white-space:nowrap}
.tpc-body{padding:clamp(18px,2vw,26px); display:grid; gap:18px}
.tpc-ask{justify-self:end; max-width:85%; background:var(--card); border:1px solid var(--line); border-radius:12px 12px 4px 12px;
  padding:11px 16px; font-size:15px; line-height:1.45}
.tpc-reply{display:grid; gap:12px}
.tpc-reply .who{display:flex; align-items:center; gap:8px; font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--faint)}
.tpc-reply .who i{width:7px; height:7px; border-radius:50%; background:var(--blue); display:block}
.tpc-reply .say{font-size:15.5px; line-height:1.5}
.tpc-list{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:6px}
.tpc-list li{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; padding:12px 14px; font-size:14.5px; line-height:1.4}
.tpc-list li+li{border-top:1px solid var(--line)}
.tpc-list .n{font:500 12px/1 var(--mono); color:var(--steel); margin-right:10px}
.tpc-pill{font:500 11.5px/1 var(--mono); padding:6px 8px; border-radius:4px; background:#EEF1F5; color:var(--navy); white-space:nowrap}
.tpc-pill.ok{background:#E7F2EC; color:var(--good)}
.tpc-approve{border:1px solid var(--line-strong); border-left:3px solid var(--navy); border-radius:6px; padding:16px; display:grid; gap:12px; background:#FAFBFC}
.tpc-approve .h{display:flex; align-items:center; gap:10px; font:500 15.5px/1.35 var(--sans)}
.tpc-approve .s{font-size:14px; color:var(--faint); line-height:1.45}
.tpc-approve .row{display:flex; flex-wrap:wrap; gap:10px}
.tpc-fake{display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:6px; font:500 13.5px/1 var(--sans)}
.tpc-fake.ghost{border:1px solid var(--line-strong); color:var(--ink); background:#FFFFFF}
.tpc-fake.solid{background:var(--ink2); color:#FFFFFF}
.tpc-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; padding:12px 18px; border-top:1px solid var(--line);
  font:400 12px/1.4 var(--mono); color:var(--faint); background:#FAFBFC}
.tpc-foot span{display:inline-flex; align-items:center; gap:8px}
.tpc-cap{margin-top:14px; font-size:13px; color:var(--on-dark-label)}
@media (max-width:640px){
  .tpc-ctas{display:grid; grid-template-columns:1fr; gap:0}
  .tpc-btn{width:100%}
  .tpc-link{justify-self:center; margin-top:14px; min-height:44px; display:inline-flex; align-items:center; border-bottom:0}
}