/* Generated by scripts/build-about.mts - edit the template there, not here. */

/* ------------------------------------------------------------------ tokens */
/* Warm paper, not the guides' pure white. The portrait is a cut-out with real
   transparency shot on a warm backdrop, so on #fff it reads as a sticker pasted
   onto the page; on cream it sits IN the page.
   ONE accent. It appears in exactly four places: the section numerals, the
   kicker separator, link hover, and the focus ring. Everything else is ink on
   paper. --accent is the brand orange and is used only as a MARK; --accent-ink
   is the darker twin for anything that is text, measured at 5.9:1 on paper
   where the brand orange itself would fail. Same split the app's own themes
   use, and the reason is the same. */
:root{
  --paper:#faf7f3;
  --paper-2:#f5f0e9;
  --card:#fffdfb;
  --ink:#14110f;
  --mid:#4f4740;
  --soft:#6f665e;
  --line:rgba(20,17,15,.10);
  --line-soft:rgba(20,17,15,.055);
  --accent:#ff5722;
  --accent-ink:#a4400f;
  /* Wordmark only. Not a second UI accent - see .brand b below. */
  --brand-blue:#1b4fe8;
  /* 1100, not 1180. The hero spans the shell and the article only spans the
     measure, so every 80px of shell is 80px of void running down the right of
     the whole article. Measured at 1180 on a 1440 screen: the portrait ended at
     1278 while the prose ended at 845. Pulling the shell in tightens the
     composition without touching the reading column. */
  --shell:1100px;
  --measure:64ch;
  /* Spring, never linear. The overshoot is what makes a hover feel mechanical
     rather than animated. */
  --spring:cubic-bezier(.34,1.4,.64,1);
}

@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format('woff2')}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.72 Poppins,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--accent-ink)}

/* One soft warm light in the top corner. No blurred blobs, no gradient mesh, no
   glow - those are decoration for its own sake, which is the thing being
   avoided. Fixed and behind everything, so it never affects layout. */
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 62% at 84% -12%,rgba(255,138,76,.13) 0%,rgba(255,138,76,0) 62%),
    radial-gradient(70% 40% at 4% 2%,rgba(196,154,112,.10) 0%,rgba(196,154,112,0) 64%);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ------------------------------------------------------------------- chrome */
/* Deliberately NOT sticky and NOT bordered. The guides need a sticky bar because
   they are long reference documents you scan; this is one page you read top to
   bottom, and a bar that follows you down it is a permanent 60px of chrome over
   an editorial layout. Space separates it instead of a rule. */
.top{
  max-width:var(--shell);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 32px 0;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
/* "Tools" is BLUE here, Kenneth's call, and it is deliberately scoped to the
   wordmark. The wordmark is brand identity, the same class of thing as the
   HighLevel and HL Accelerator marks beside it, so it is allowed its own colour
   without breaking the one-accent rule: every UI accent on this page - the
   kicker dot, the section numerals, the Live dots, link hover, the focus ring -
   is still the one orange.
   NOTE THIS IS PAGE-LOCAL. guides.css and the React landing still paint it
   orange, so the wordmark now differs between /about/ and the rest of the site
   until those are changed too. Measured 5.9:1 on paper, so it passes AA as text. */
.brand b{color:var(--brand-blue)}
.brand img{border-radius:7px}
/* margin-right:auto rather than justify-content:space-between, so the nav and
   the CTA stay together on the right and the brand takes the slack. */
.brand{margin-right:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--soft);text-decoration:none;font-size:.875rem;font-weight:500;white-space:nowrap;transition:color .2s ease}
.nav a:hover{color:var(--ink)}
.cta{
  background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.875rem;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  transition:transform .25s var(--spring),box-shadow .25s ease;
  box-shadow:0 1px 2px rgba(20,17,15,.10),0 6px 16px -8px rgba(20,17,15,.30);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,17,15,.12),0 14px 26px -12px rgba(20,17,15,.40)}

/* --------------------------------------------------------------------- hero */
.hero{max-width:var(--shell);margin:0 auto;padding:0 32px}
.hero-in{display:grid;gap:36px;padding:56px 0 0}
.hero-copy{min-width:0}

.kicker{
  margin:0 0 22px;display:flex;align-items:center;gap:10px;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
}
.kicker b{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* The one piece of real display typography. Tight tracking and a sub-1 line
   height are what make a geometric sans read editorial at size; at default
   tracking this is a slide deck. Two lines, four words. */
h1{
  margin:0 0 26px;
  font-size:clamp(2.75rem,7vw,5.25rem);
  font-weight:800;letter-spacing:-.045em;line-height:.96;
  text-wrap:balance;
}
.lede{margin:0 0 14px;max-width:30ch;font-size:clamp(1.125rem,1.7vw,1.4rem);line-height:1.5;color:var(--mid)}
.lede-2{margin:0 0 34px;max-width:34ch;color:var(--soft)}

/* The credential as a definition list, not badges. Two columns of quiet type
   with a hairline above: the claim is legible and nothing shouts. A filled pill
   here is what makes a credential look bought rather than earned. */
.cred{display:flex;flex-wrap:wrap;gap:14px 44px;margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.cred div{min-width:0}
.cred dt{
  display:flex;align-items:center;gap:7px;margin:0 0 6px;
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);
}
.cred dt img{display:block;flex:none}
.cred dd{margin:0;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35}
.cred dd span{display:block;margin-top:2px;font-size:.8125rem;font-weight:400;color:var(--soft)}
.cred dd a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s ease,border-color .2s ease}
.cred dd a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* object-fit is never cover here. It is a full-length cut-out portrait and
   cropping one to fill a box beheads it - the same rule the ID guides earned
   with agency logos. It sits on a soft warm ground rather than in a frame. */
/* A soft well, not a frame. The current portrait is a cream tee on a cream
   page, so without a ground the shoulders vanish and only the face reads. The
   fill is a hair deeper than the paper and the radius is large, so it registers
   as a surface the figure stands on rather than as a box around a person. */
.hero-shot{
  margin:0;position:relative;justify-self:start;
  background:linear-gradient(170deg,#f3ece2 0%,#efe6da 100%);
  border-radius:28px;padding:26px 22px 0;overflow:hidden;
}
.hero-shot:after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
/* THE BOTTOM FADES INTO THE WELL. The photo is a cut-out that stops mid-torso,
   so it ended on a hard horizontal edge with two square corners sitting inside a
   rounded panel - which is what read as awkward. Dissolving the last quarter
   makes the figure sit in the surface instead of being pasted onto it, and it
   costs nothing: a mask leaves the pixels untouched and paints nothing over the
   face. Guarded by @supports so a browser without masking simply gets the
   straight cut rather than a blank space where a person should be. */
.hero-shot img{display:block;width:100%;max-width:320px;height:auto;object-fit:contain}
@supports ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
  .hero-shot img{
    -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  }
}

/* ------------------------------------------------------------------ article */
/* LEFT-ALIGNED, not centred. Centring the article inside the shell put its left
   edge 230px right of the hero copy above it, so the page stepped inward
   halfway down for no reason a reader could name. Every block on this page now
   starts on the same line. */
.art{max-width:var(--shell);margin:0 auto;padding:0 32px}
.sec{max-width:var(--measure);padding:78px 0 0}
.sec:first-child{padding-top:88px}

/* The numeral IS the section rule. guides.css draws a hairline across the full
   column above every h2, which on six sections is six lines competing with the
   type; a chapter marker does the same job with no line at all. Stacked above
   the heading rather than beside it, which cannot collide at any width. */
.sec-h{margin:0 0 20px}
.num{
  display:block;margin:0 0 12px;
  font-size:.6875rem;font-weight:700;letter-spacing:.2em;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
h2{margin:0;font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;letter-spacing:-.028em;line-height:1.15;text-wrap:balance;scroll-margin-top:32px}
h3{margin:26px 0 8px;font-size:1.0625rem;font-weight:700}
p{margin:0 0 18px;color:var(--mid)}
.sec-b p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ink)}

/* A section whose BODY breaks out of the reading measure. The heading stays on
   the measure so the left edge and the numeral rhythm never change; only the
   grid under it is allowed the full shell. */
.sec-wide{max-width:none}
.sec-wide .sec-h,.sec-wide .sec-lede{max-width:var(--measure)}
.sec-lede{margin:0 0 6px;color:var(--mid)}

/* --------------------------------------------------------------- the AI map */
/* Multi-column, not grid. Five families with 0, 3, 2, 3 and 1 children stacked
   in one column wasted the right half of the page and hid the shape of the
   work. Columns let each block take its own height and flow, which is masonry
   with no JavaScript. break-inside:avoid is the whole trick: without it a
   family splits across a column boundary and the map becomes unreadable. */
.ai{margin-top:30px}
.fam{padding:22px 0 4px;border-top:1.5px solid var(--ink)}
.fam+.fam{border-top-color:var(--line)}
.fam-l h3{margin:0;font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.fam-b{margin:8px 0 0;font-size:.9375rem;line-height:1.6;color:var(--mid)}

/* Status. Live is a claim a stranger can go and check, so it gets the accent
   dot; Internal runs but only for Kenneth or inside a client account, and
   flattening the two into one word would overstate half the list. */
.tag{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:.5625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
}
.tag-live{color:var(--accent-ink)}
.tag-live:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* auto-fit, so one system stretches across the whole right column and three
   split into three. A fixed column count would leave KapeAI and Hermes trailing
   two empty cells, which is the hole this layout exists to remove. */
.kids{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px 26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kids li{padding:13px 0 0;border-top:1px solid var(--line-soft);min-width:0}
.kid-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.kid-n{font-size:.9375rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.kids p{margin:5px 0 0;font-size:.875rem;line-height:1.55;color:var(--mid)}
/* The model and the moving parts, set small and quiet. It is the detail that
   makes the rest credible, and it is not what anyone reads first. */
.tech{margin:6px 0 0;font-size:.75rem;line-height:1.5;color:var(--soft)}

/* ---------------------------------------------------------------- systems */
/* The lead has a real screenshot behind it and the other two do not, so it gets
   the width and they share a row underneath. Three equal cards would flatten
   that difference, which is the uniform-grid tell. */
.sys{margin-top:34px;display:grid;gap:18px}
.sys-lead{
  display:grid;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--card);
}
.sys-t{padding:26px 26px 24px}
.sys-t h3,.sys-rest h3{margin:0 0 8px;font-size:1.25rem;font-weight:700;letter-spacing:-.025em}
.sys-t p,.sys-rest p{margin:0;font-size:.9375rem;line-height:1.62;color:var(--mid)}
.kick{margin:0 0 10px;font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
/* The screen is a real GoHighLevel workflow list, so it is shown as a screen:
   cropped from the top, sitting on the panel edge, never letterboxed into a
   tile. The whole point of it is that the thing exists and runs. */
.sys-shot{margin:0;background:var(--paper-2);border-top:1px solid var(--line);overflow:hidden;max-height:290px}
.sys-shot img{display:block;width:100%;height:auto;object-fit:cover;object-position:top left}
/* The crop lands mid-row, which reads as chopped rather than as a window onto
   something longer. Fading the last fifth says "this continues" instead. Mask
   only, so the pixels are untouched and nothing is painted over the screen. */
@supports ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
  .sys-shot{
    -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
  }
}
.sys-rest{display:grid;gap:18px}
.sys-rest article{border:1px solid var(--line);border-radius:20px;padding:24px 26px;background:var(--card)}

/* ------------------------------------------------------------------- builds */
.builds{list-style:none;margin:30px 0 0;padding:0}
.builds li{padding:20px 0;border-top:1px solid var(--line-soft)}
.builds li:first-child{border-top:1px solid var(--line)}
.b-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.b-n a,.b-n span{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.b-n a{color:var(--accent-ink);transition:color .2s ease}
.b-n a:hover{color:var(--accent)}
/* Status as quiet lettering, not a filled chip. Seven chips down the page is
   seven small blocks of colour fighting the names beside them. */
.b-n i{font-style:normal;font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.builds p{margin:6px 0 0;font-size:.9375rem;line-height:1.62;color:var(--soft)}
.foot-note{margin:26px 0 0;font-size:.9375rem;line-height:1.62;color:var(--soft)}
.foot-note a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s ease,border-color .2s ease}
.foot-note a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* -------------------------------------------------------------------- links */
/* A typographic list, not six identical rounded tiles. Three rows of matching
   boxes is the uniform-grid tell and it made the contact section the loudest
   thing on a page whose last word should be quiet. */
.links{list-style:none;margin:30px 0 0;padding:0}
.links li{border-top:1px solid var(--line-soft)}
.links li:first-child{border-top:1px solid var(--line)}
.links a{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;
  padding:17px 30px 17px 0;position:relative;text-decoration:none;
  transition:transform .3s var(--spring);
}
.l-t{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);transition:color .2s ease}
.l-n{font-size:.875rem;color:var(--soft)}
/* Chevron drawn in CSS: no icon file, no glyph, nothing to load, and no octal
   escape to trip the build. */
.links a:after{
  content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--soft);border-top:1.5px solid var(--soft);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .3s var(--spring),border-color .2s ease;
}
.links a:hover{transform:translateX(5px)}
.links a:hover .l-t{color:var(--accent-ink)}
.links a:hover:after{border-color:var(--accent);transform:translateY(-50%) translateX(3px) rotate(45deg)}

/* ------------------------------------------------------------------- footer */
.foot{margin-top:110px;border-top:1px solid var(--line);background:var(--paper-2)}
.foot-in{max-width:var(--shell);margin:0 auto;padding:44px 32px 56px}
.foot-lead{max-width:62ch;margin:0 0 22px;font-size:.9375rem;color:var(--mid)}
.foot-lead b{color:var(--ink)}
.foot-lead a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 22px}
.foot-nav a{font-size:.875rem;color:var(--soft);text-decoration:none;transition:color .2s ease}
.foot-nav a:hover{color:var(--ink)}
.fine{margin:0;max-width:74ch;font-size:.8125rem;line-height:1.6;color:var(--soft)}

/* ------------------------------------------------------------------- motion */
/* Entrance, staggered. GPU-only: transform and opacity, never height or margin. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .8s var(--spring) both}
.kicker{animation-delay:.02s}
h1{animation-delay:.08s}
.lede{animation-delay:.16s}
.lede-2{animation-delay:.22s}
.cred{animation-delay:.3s}
.hero-shot{animation:rise 1s var(--spring) .12s both}

/* THERE IS NO SCROLL REVEAL, and that is a decision rather than an omission.
   The first cut used a JavaScript-free one (animation-timeline:view() behind an
   @supports guard) and it made sections 02 to 06 INVISIBLE: a view timeline
   holds the from-state until the element enters its range, so with fill-mode
   both, everything below the fold sits at opacity 0. The guard was pointless -
   the browsers that support the property are exactly the ones that hid the
   content. It is the third time this repo has shipped opacity 0 with an
   un-hider that did not run, after .lp-reveal on the landing page and the Kape
   Explains shelf, and it was caught the same way all three were: by looking at
   the render, not by an assertion.
   The entrance above is TIME-based, so it always completes and can never strand
   content. If a scroll reveal is ever wanted here, the content must be visible
   by default and the animation must only ever move it. */

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none !important;transition:none !important}
}

/* ------------------------------------------------------------------ layout */
@media(min-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:center;padding:64px 0 0}
  .hero-shot img{max-width:320px}
  .builds{columns:2;column-gap:40px}
  .builds li{break-inside:avoid;page-break-inside:avoid}
  .sys-rest{grid-template-columns:1fr 1fr}
  /* The label column is fixed so every family name starts on the same line down
     the section, which is what makes it read as an index rather than as five
     unrelated blocks. */
  .fam{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start}
  .fam-l{padding-top:2px}
  .kids{margin-top:0}
}
/* A hanging numeral was tried at this width and removed. It was written as a
   negative margin on the row with the SAME positive margin pushed back onto
   both children, which cancels to nothing - it never hung. Rebuilding it
   properly would have bought a decorative indent at the cost of the thing that
   actually makes this page read clean: ONE left edge, shared by the wordmark,
   the headline, every numeral, every heading, the body, the rows and the
   footer. Alignment is the design here. Do not reintroduce the hang. */
/* THE LINKS SURVIVE ON A PHONE. The guide pages hide them below 720 and leave
   only the CTA, which means a phone reader can sign in but cannot explore -
   there is no route from here to the ID guides or Kape Explains at all. Here
   the bar wraps instead: brand and CTA on the first row, the three
   destinations on a second row under a hairline.
   A second row is affordable precisely because THIS HEADER IS NOT STICKY, so
   the extra 44px is paid once at the top of the document and scrolls away. A
   disclosure menu would need a details/summary or script for no benefit over
   three links that already fit: measured at 360px, the row is 241px wide in
   316px of space. (The same fix would help the guide pages; deliberately not
   applied here because they are live and verified, and guides.css is theirs.) */
/* At 360 the wordmark (128) plus the CTA (183) plus a 20px gap is 331 in 316,
   so the CTA dropped to a row of its own and the header became three rows.
   Tightening the gap and the pill keeps it to two. Measured, not guessed. */
@media(max-width:420px){
  .top{column-gap:12px}
  .cta{padding:9px 14px;font-size:.8125rem}
}
@media(max-width:719px){
  .top{padding:20px 22px 0;flex-wrap:wrap;row-gap:0}
  .brand{order:1}
  .cta{order:2}
  .nav{order:3;width:100%;gap:22px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .hero,.art{padding:0 22px}
  .foot-in{padding:36px 22px 46px}
  .hero-in{padding-top:38px;gap:30px}
  .sec{padding-top:60px}
  .sec:first-child{padding-top:66px}
  .foot{margin-top:78px}
  .cred{gap:16px 32px}
}