/* ClicTell base styles. Tokens only — no literal hex values below this line. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ct-font);
  font-size:var(--ct-body-size);
  font-weight:var(--ct-w-regular);
  line-height:var(--ct-body-lh);
  color:var(--ct-body);
  background:var(--ct-white);
}
h1,h2,h3,h4{color:var(--ct-ink);margin:0 0 var(--ct-space-3)}
.ct-hero{font-size:var(--ct-hero-size);font-weight:var(--ct-w-bold);letter-spacing:var(--ct-hero-track);line-height:var(--ct-hero-lh)}
h1,.ct-h1{font-size:var(--ct-h1-size);font-weight:var(--ct-w-bold);letter-spacing:var(--ct-h1-track);line-height:var(--ct-h1-lh)}
h2,.ct-h2{font-size:var(--ct-h2-size);font-weight:var(--ct-w-semibold);letter-spacing:var(--ct-h2-track);line-height:var(--ct-h2-lh)}
h3,.ct-h3{font-size:var(--ct-h3-size);font-weight:var(--ct-w-semibold);line-height:var(--ct-h3-lh)}
.ct-lead{font-size:var(--ct-lead-size);font-weight:var(--ct-w-light);line-height:var(--ct-lead-lh);color:var(--ct-body)}
.ct-caption{font-size:var(--ct-caption-size);line-height:var(--ct-caption-lh);color:var(--ct-gray)}
.ct-eyebrow{
  font-size:var(--ct-eyebrow-size);font-weight:var(--ct-w-medium);
  letter-spacing:var(--ct-eyebrow-track);line-height:var(--ct-eyebrow-lh);
  text-transform:uppercase;color:var(--ct-purple);display:block;
  margin-bottom:var(--ct-space-3);
}
.ct-container{max-width:var(--ct-max-width);margin:0 auto;padding:0 var(--ct-grid-margin)}
.ct-section{padding-top:var(--ct-space-6);padding-bottom:var(--ct-space-6)}
.ct-grid{display:grid;grid-template-columns:repeat(var(--ct-grid-cols),1fr);gap:var(--ct-grid-gutter)}
@media (max-width:768px){.ct-grid{grid-template-columns:1fr}
  /* inline grid-column:span N would create implicit 0px tracks; !important is the
     only way to beat an inline style */
  .ct-grid>*{grid-column:1/-1!important}}

/* CTAs: pill, purple with white text. On dark: white with black text. */
.ct-btn{
  display:inline-block;font-family:var(--ct-font);font-size:var(--ct-button-size);
  font-weight:var(--ct-w-medium);line-height:1;text-decoration:none;
  padding:var(--ct-space-3) var(--ct-space-4);border-radius:var(--ct-radius-pill);
  background:var(--ct-purple);color:var(--ct-white);border:0;cursor:pointer;
}
.ct-btn:hover{background:var(--ct-purple-400)}
.ct-btn--on-dark{background:var(--ct-white);color:var(--ct-ink)}

.ct-card{
  background:var(--ct-card-light);border:1px solid var(--ct-line);
  border-radius:var(--ct-radius-card);padding:var(--ct-space-4);
}

/* Dark surfaces */
.ct-dark{background:var(--ct-black);color:var(--ct-secondary-dark)}
.ct-dark h1,.ct-dark h2,.ct-dark h3,.ct-dark .ct-hero{color:var(--ct-white)}
.ct-dark .ct-eyebrow{color:var(--ct-lilac)}
.ct-dark .ct-card{background:var(--ct-card-dark);border-color:var(--ct-card-dark)}

/* Logo minimum sizes from the Brand Kit */
.ct-logo{display:block;height:32px;width:auto;min-width:96px}
.ct-logo-icon{display:block;height:24px;width:24px;min-width:16px}

/* Icons: Lucide, stroke 1.5 on a 24px grid, inherit currentColor */
.ct-icon{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ct-icon--sm{width:20px;height:20px}
.ct-icon--lg{width:32px;height:32px}

a{color:var(--ct-purple)}
main a:not(.ct-btn){text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:1px}
main a:not(.ct-btn):hover{color:var(--ct-ink)}
.ct-dark a:not(.ct-btn){color:var(--ct-lilac)}
.ct-dark a:not(.ct-btn):hover{color:var(--ct-white)}

:focus-visible{outline:2px solid var(--ct-purple);outline-offset:2px}
.ct-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Site chrome — nav, footer, homepage section patterns.
   Tokens only. No literal hex below this line either.
   ============================================================ */
.ct-header{border-bottom:1px solid var(--ct-line);background:var(--ct-white)}
/* Longhand, not the padding shorthand. This element also carries .ct-container,
   whose horizontal padding the shorthand was resetting to 0, so the logo sat
   flush against the viewport edge at every width under the 1280px max. Same bug
   as the .ct-section one from 2026-08-11, and it had been here since the header
   was built - invisible while the header was white. .checks.py now lints every
   class that shares an element with .ct-container, not just .ct-section. */
.ct-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--ct-space-4);padding-top:var(--ct-space-3);padding-bottom:var(--ct-space-3);
  flex-wrap:wrap}
.ct-nav{display:flex;gap:var(--ct-space-4);align-items:center;flex-wrap:wrap}
.ct-nav a{color:var(--ct-ink);text-decoration:none;font-size:var(--ct-body-size);font-weight:var(--ct-w-medium)}
.ct-nav a:hover{color:var(--ct-purple)}
.ct-nav a.ct-btn{color:var(--ct-white)}
.ct-nav a.ct-btn:hover{color:var(--ct-white);background:var(--ct-purple-400)}

.ct-chips{display:flex;flex-wrap:wrap;gap:var(--ct-space-2);list-style:none;margin:0;padding:0}
.ct-chips li{display:inline-flex;align-items:center;gap:var(--ct-space-2);
  border:1px solid var(--ct-line);border-radius:var(--ct-radius-pill);
  padding:var(--ct-space-1) var(--ct-space-3);font-size:var(--ct-caption-size);color:var(--ct-body)}
.ct-chips li .ct-icon{width:20px;height:20px}
.ct-dark .ct-chips li{border-color:var(--ct-tertiary-dark);color:var(--ct-secondary-dark)}

.ct-footer{background:var(--ct-black);color:var(--ct-secondary-dark)}
.ct-footer a{color:var(--ct-secondary-dark)}
.ct-footer a:hover{color:var(--ct-white)}
.ct-footer__bottom{border-top:1px solid var(--ct-card-dark);
  padding-top:var(--ct-space-4);padding-bottom:var(--ct-space-4);
  font-size:var(--ct-caption-size);color:var(--ct-tertiary-dark)}

.ct-form{display:flex;gap:var(--ct-space-2);flex-wrap:wrap;margin-top:var(--ct-space-3)}
.ct-form input[type=email]{flex:1 1 260px;font-family:var(--ct-font);font-size:var(--ct-body-size);
  padding:var(--ct-space-3);border:1px solid var(--ct-line);border-radius:var(--ct-radius-pill);
  background:var(--ct-white);color:var(--ct-ink)}

/* Stacked form (contact page) */
.ct-form-stack{max-width:560px}
.ct-field{display:block;margin:0 0 var(--ct-space-3)}
.ct-field label{display:block;font-weight:var(--ct-w-medium);color:var(--ct-ink);
  margin-bottom:var(--ct-space-1);font-size:var(--ct-body-size)}
.ct-field input,.ct-field select,.ct-field textarea{
  width:100%;font-family:var(--ct-font);font-size:var(--ct-body-size);
  color:var(--ct-ink);background:var(--ct-white);
  border:1px solid var(--ct-line);border-radius:var(--ct-radius-card);
  padding:var(--ct-space-3)}
.ct-field textarea{resize:vertical}

/* Lucide icon subset — purple accent on light, lilac on dark */
.ct-icon{color:var(--ct-purple);flex:none}
.ct-dark .ct-icon{color:var(--ct-lilac)}

/* Removed 2026-08-17, all five dead once the last page moved to cards:
   .ct-strip and .ct-hero-band (hero replaced them), .ct-stages and .ct-numbered
   and .ct-step-head (the six workflow stages are cards with tiles now). The
   uppercase label strip lives on as .ct-hero-industries; Brand Kit §9 rule 2
   still applies to it. */

/* Inline beside a heading: sit on the text baseline with a clear gap */
h3 .ct-icon{margin-right:var(--ct-space-2);vertical-align:-0.18em}

/* ============================================================
   2026-08-17 — Visual system ported from the offshore clictell.com
   build and normalised onto Brand Kit tokens. What came across:
   the dark hero, the alternating white / tint / dark surface rhythm,
   the bordered panel, icon tiles, numbered dark cards, dashed
   vertical cards and outline pills. What did not: 60px/weight-400
   headings, -3% body tracking, gradient-filled buttons, and a dozen
   off-palette purples. Two Brand Kit changes back this block —
   the Display type level and the 20px card radius.
   Tokens only. No literal hex below this line either.
   ============================================================ */

/* Display: section-opening headings, Brand Kit §3. Used on h2. */
.ct-display{font-size:var(--ct-display-size);font-weight:var(--ct-w-bold);
  letter-spacing:var(--ct-display-track);line-height:var(--ct-display-lh)}

/* Two-tone headings: the second clause carries the accent colour.
   Purple on white is 6.6:1, lilac on black 12.2:1 — both AA or better
   at this size, which is the only reason the pairing is allowed. */
.ct-line{display:block}
.ct-accent{color:var(--ct-purple)}
.ct-dark .ct-accent{color:var(--ct-lilac)}

/* Purple rule beside a section heading. Their About page uses it to anchor the
   heading column of a split; a 3px bar is a graphic, not text, so the 3.2:1 of
   purple on a light surface is not the bar to clear. */
.ct-rule{border-left:3px solid var(--ct-purple);padding-left:var(--ct-space-4)}

.ct-center{text-align:center}

/* Hyphenated compounds must not break at the hyphen inside a heading. Tested in
   the browser: word-break:keep-all does NOT prevent it, white-space:nowrap does.
   A non-breaking hyphen (U+2011) would also work but breaks find-on-page and
   search for terms like "high-volume", so the character stays a normal hyphen.
   Body copy is left alone: a hyphen break mid-paragraph is ordinary typography. */
.ct-nowrap{white-space:nowrap}
/* An outside marker is positioned off the list box, not off the centred text,
   so it strands itself far to the left. Caught on the Platform hero. */
.ct-center ul,.ct-center ol{list-style-position:inside;padding-left:0}
.ct-measure{max-width:72ch}
.ct-measure--center{max-width:72ch;margin-left:auto;margin-right:auto}
/* Airier rhythm on the homepage only. The 64px default stands elsewhere;
   see MEMORY.md, the 96->64 tightening was a deliberate review call. */
.ct-section--airy{padding-top:var(--ct-space-7);padding-bottom:var(--ct-space-7)}

/* Header: black, sticky. White on black is 21:1. */
.ct-header{position:sticky;top:0;z-index:50;background:var(--ct-black);border-bottom:0}
.ct-nav a{color:var(--ct-white)}
.ct-nav a:hover,.ct-nav a[aria-current=page]{color:var(--ct-lilac)}
.ct-nav a.ct-btn,.ct-nav a.ct-btn:hover{color:var(--ct-white)}
/* Below ~880px the five nav items plus the CTA cannot share a line with the
   logo, and letting them wrap ragged looked broken rather than responsive.
   Stack it deliberately: logo centred, nav centred beneath. No JS, so no
   hamburger — a five-item nav does not need one. */
@media (max-width:880px){
  .ct-header__inner{flex-direction:column;align-items:center;gap:var(--ct-space-3)}
  .ct-nav{justify-content:center;gap:var(--ct-space-3) var(--ct-space-4)}
}

/* Secondary CTA: outline pill, dark surfaces only. White label is 21:1; the
   purple hairline is 3.2:1 on black, which clears the 3:1 a control boundary
   needs. Label still comes from the two-label standard. */
.ct-btn--ghost{background:transparent;border:1px solid var(--ct-purple);color:var(--ct-white)}
.ct-btn--ghost:hover{background:var(--ct-purple);color:var(--ct-white)}
/* Pressed state. Their open bug list flags that a CTA "remains static" when
   clicked, which is true of ours too: hover was the only feedback and hover
   does not exist on touch at all. */
.ct-btn:active{background:var(--ct-ink);color:var(--ct-white)}
.ct-btn--ghost:active{background:var(--ct-ink);border-color:var(--ct-ink)}

/* Two statements side by side inside one bordered block, divider between.
   Replaces a centred bulleted list, whose markers stranded themselves. */
.ct-btn-row{display:flex;flex-wrap:wrap;gap:var(--ct-space-3);justify-content:center;
  margin-top:var(--ct-space-5)}
.ct-panel-split{display:grid;grid-template-columns:1fr 1fr;text-align:left;
  border:1px solid var(--ct-purple-on-black-30);border-radius:var(--ct-radius-panel);
  background:var(--ct-card-dark);max-width:900px;margin:var(--ct-space-5) auto 0}
.ct-panel-split>*{padding:var(--ct-space-4)}
.ct-panel-split>*+*{border-left:1px solid var(--ct-purple-on-black-30)}
.ct-panel-split p{margin:0}
@media (max-width:768px){
  .ct-panel-split{grid-template-columns:1fr}
  .ct-panel-split>*+*{border-left:0;border-top:1px solid var(--ct-purple-on-black-30)}
}

/* Arrow on CTA links via ::after so it never enters the accessible name
   or the regression pass's CTA-label check. */
a.ct-btn::after{content:"\2009\2192"}

/* Dark surfaces, reworked 2026-08-17 to match the build being ported. The 45deg
   brand gradient was the first attempt and was wrong for this job twice over: it
   read as a diagonal wash where theirs is a glow, and dialling it back to 35% to
   compensate just made it a faint diagonal wash. Section backgrounds now use the
   surface washes in tokens.css. The purple lift sits at the FOOT of the hero and
   the workflow section and at the HEAD of the closing CTA, which is where theirs
   put it. Both pseudo elements stay behind content via isolation + z-index. */
.ct-hero-dark,.ct-cta-dark,.ct-texture-lines{position:relative;isolation:isolate;background:var(--ct-black)}
.ct-hero-dark::before,.ct-hero-dark::after,
.ct-cta-dark::before,.ct-texture-lines::before,.ct-texture-lines::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.ct-hero-dark::before{background-image:var(--ct-glow-hero)}
.ct-hero-dark::after{opacity:.5;
  background-image:radial-gradient(var(--ct-dot-lilac) 1px,transparent 1.5px);
  background-size:24px 24px}
.ct-cta-dark::before{background-image:var(--ct-wash-dark-head)}
.ct-texture-lines{background-image:var(--ct-wash-dark-foot)}
/* Concentric arcs at a large radius read as the sweeping line field on their
   How it works section, with no image asset. Two origins so the curves cross. */
.ct-texture-lines::before{opacity:.55;background-image:
  repeating-radial-gradient(circle at 12% 118%,transparent 0 46px,var(--ct-hatch-purple) 46px 47px)}
.ct-texture-lines::after{opacity:.35;background-image:
  repeating-radial-gradient(circle at 88% -20%,transparent 0 58px,var(--ct-hatch-purple) 58px 59px)}
/* .ct-lead hard-codes body gray, which .ct-dark's inherited colour cannot beat.
   Shipped that way on 2026-08-17 and the How it works lead measured 2.39:1 on
   black — a genuine AA failure, caught on the deploy. Every lead on a dark
   surface is white, 21:1, not just the two I had named. */
.ct-dark .ct-lead{color:var(--ct-white)}

/* Sticky header would otherwise cover whatever an in-page link jumps to. */
[id]{scroll-margin-top:var(--ct-space-7)}

/* Industry strip inside the hero. Lilac on black is 12.2:1. */
.ct-hero-industries{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--ct-space-2) var(--ct-space-3);list-style:none;
  margin:var(--ct-space-6) 0 0;padding:0}
.ct-hero-industries li{font-size:var(--ct-eyebrow-size);font-weight:var(--ct-w-medium);
  letter-spacing:var(--ct-eyebrow-track);text-transform:uppercase;color:var(--ct-lilac)}
.ct-hero-industries li+li::before{content:"\2022";margin-right:var(--ct-space-3);
  color:var(--ct-tertiary-dark)}

/* Tinted section. Flat --ct-faint was noticeably more purple than the tint on
   the build being ported (theirs sits around a 55% mix), so tinted sections use
   the softer mix and the first one carries a vertical wash out of white.
   Caption gray is 4.38:1 on faint, under AA — guard kept and it only gets safer
   on the lighter surface. */
.ct-tint{background:var(--ct-tint-soft)}
.ct-tint--wash{background-image:var(--ct-wash-tint)}
.ct-tint .ct-caption{color:var(--ct-body)}

/* Split: heading left, panel right. Stacks at 1024, not 768: a 40% column at
   769px is about 250px, which no Display heading fits into. */
.ct-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--ct-space-6);align-items:start}
@media (max-width:1024px){.ct-split{grid-template-columns:1fr;gap:var(--ct-space-5)}}

/* Last-resort guard. Fluid type plus the 1024 stack should mean this never
   fires, but a long single word in a narrow column must wrap rather than
   escape its box — that failure is visible and this one is not. */
h1,h2,h3,h4,.ct-hero,.ct-display{overflow-wrap:break-word}

/* Panel: one bordered block holding prose. 32px radius, purple hairline. */
.ct-panel{background:var(--ct-white);border:1px solid var(--ct-purple);
  border-radius:var(--ct-radius-panel);padding:var(--ct-space-5)}
.ct-panel>:first-child{margin-top:0}
.ct-panel>:last-child{margin-bottom:0}

/* Content cards take a purple hairline, not the neutral line. Lilac was tried
   first and measures 1.72:1 on white — a hairline nobody can see, which loses
   the whole point of the treatment. Purple is 6.62:1.
   A dashed variant existed for the vertical cards, carried over from the build
   being ported. Removed 2026-08-17 (Michelle): a dashed edge reads as
   provisional, and there is nothing provisional about the six industries we
   serve. One card treatment site-wide now. */
   Padding is 24px, not the 40px this shipped with. The build being ported runs
   40px 32px and Michelle read it as too airy; at 24px the icon, title and body
   hold together as one block instead of floating. */
.ct-card{background:var(--ct-white);border-color:var(--ct-purple);padding:var(--ct-space-4)}
.ct-card>:last-child{margin-bottom:0}
.ct-dark .ct-card{border-color:var(--ct-purple-on-black-30)}

/* Icon tile: 48px, tinted square, glyph inherits currentColor. */
.ct-tile{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--ct-radius-card);
  background:var(--ct-faint);color:var(--ct-purple);margin-bottom:var(--ct-space-3)}
.ct-dark .ct-tile{background:var(--ct-purple-on-black-30);color:var(--ct-lilac)}
.ct-tile .ct-icon{margin:0}

/* Numbered dark cards on a light surface. Body copy is secondary-dark on
   card-dark (8.9:1); the ghost numeral is decorative, not information. */
.ct-num-card{background:var(--ct-card-dark);border:1px solid var(--ct-purple-on-black-30);
  border-radius:var(--ct-radius-panel);padding:var(--ct-space-5);color:var(--ct-secondary-dark)}
.ct-num-card>:last-child{margin-bottom:0}
.ct-num-card h3{color:var(--ct-lilac);margin:0}
.ct-num-card__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--ct-space-3);margin-bottom:var(--ct-space-3)}
.ct-num-card__num{font-size:var(--ct-display-size);font-weight:var(--ct-w-bold);
  line-height:1;color:var(--ct-numeral-ghost)}

/* Row list: number, icon, label block, body, divided by hairlines. Used for the
   Solutions industries, where five entries each carry a real paragraph and a
   two-column card grid made them tall and hard to scan. Ported from the
   offshore build 2026-08-17. */
.ct-rows{list-style:none;margin:var(--ct-space-5) 0 0;padding:0}
.ct-row{display:grid;gap:var(--ct-space-4);align-items:start;
  grid-template-columns:2.5rem 48px minmax(0,5fr) minmax(0,7fr);
  padding:var(--ct-space-5) 0;border-bottom:1px solid var(--ct-line)}
.ct-row:last-child{border-bottom:0}
.ct-row__num{font-size:var(--ct-h3-size);font-weight:var(--ct-w-medium);
  color:var(--ct-purple-400);line-height:1.3}
.ct-row .ct-tile{margin-bottom:0}
.ct-row h3,.ct-row p{margin:0}
.ct-row .ct-eyebrow{margin-bottom:var(--ct-space-2)}
/* The body drops under the label block before the columns get too narrow to
   hold a heading, same reasoning as the .ct-split stack. */
@media (max-width:1024px){
  .ct-row{grid-template-columns:2.5rem 48px minmax(0,1fr)}
  .ct-row__body{grid-column:1/-1}
}
@media (max-width:768px){
  .ct-row{grid-template-columns:48px minmax(0,1fr);gap:var(--ct-space-3)}
  .ct-row__num{display:none}
}

/* Outline pills: enterprise readiness. */
.ct-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ct-space-3);
  list-style:none;margin:var(--ct-space-5) 0 0;padding:0}
.ct-pills li{display:inline-flex;align-items:center;gap:var(--ct-space-2);
  border:1px solid var(--ct-purple);border-radius:var(--ct-radius-pill);
  padding:var(--ct-space-3) var(--ct-space-4);background:var(--ct-white);
  color:var(--ct-body);font-weight:var(--ct-w-medium)}
.ct-pills li .ct-icon{width:20px;height:20px}

/* Chip row centred under the dark workflow section. */
.ct-chips--center{justify-content:center;gap:var(--ct-space-3)}
.ct-dark .ct-chips li{background:var(--ct-purple-on-black-12);color:var(--ct-lilac)}

/* Footer link columns */
.ct-footer__main{border-top:1px solid var(--ct-card-dark)}
.ct-footer__col h3{color:var(--ct-white);font-size:var(--ct-h3-size);margin:0 0 var(--ct-space-2)}
.ct-footer__col ul{list-style:none;margin:0;padding:0}
.ct-footer__col li{margin-bottom:var(--ct-space-1)}
.ct-footer__col a{text-decoration:none}
.ct-footer__col a:hover{text-decoration:underline}
.ct-footer h2{color:var(--ct-white)}