/* Desire Path site, v17. v17: a floating header (wordmark left, links and the booking button right, the phone menu button right), the process as one horizontal row, the AI example's result under the chat, an offer row with a sample readout page, and the pointer tilt removed. Notes from v14 and earlier follow. v11 added the phone layout at 600px and below. v12 adds the phone header: MENU button on the left, wordmark centered, full-screen menu. v10 adds depth: raised surfaces with layered shadows, pointer tilt on cards, hero parallax, and hover lift. Desire Path brand kit v0.9, Ink theme throughout: the page ground is the maroon black, text is the off-white, the golden highlight marks one phrase, and moss (#4f624e) breaks the page twice. Clay stays on the trails.
   Grounds, top to bottom: maroon black opening and logo strip, moss name band with the clay trail, what I do on maroon black, AI evaluation on the lighter coffee, clients as spec sheets on maroon black, the process on dark moss, About on maroon black, and the lighter coffee closing band. One look, no light theme. */
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Italic-Variable.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
:root{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674;
  --bg-2:#3a2324; --bg-2-line:#6f5c5b; --bg-2-curve:#492823;
  --highlight:#e0ac2b; --on-highlight:#1a0609;
  /* moss at full strength: a short statement band */
  --sec:#4c5a46; --on-sec:#ecede4; --on-sec-2:#e1e4da; --sec-line:#879183;
  /* moss sunk into the maroon black: a working band with reading text */
  --sec-dark:#3c4637; --on-sec-dark:#ecede4; --on-sec-dark-2:#c9d2c9; --sec-dark-line:#697165;
  --trail:hsl(37 62% 39%); --ink-curve:#492823; --ink-step:#2e1513;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:24px; --page:1216px; --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:18px;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--highlight);color:var(--on-highlight)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--line-strong);transition:text-decoration-color .2s var(--ease)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--highlight);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:24px}
.wrap{width:100%;max-width:var(--page);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--highlight);color:var(--on-highlight);padding:8px 12px;border-radius:6px;font-weight:500;text-decoration:none;z-index:2}
.skip:focus{top:12px}
.btn{display:inline-block;background:var(--fg);color:var(--bg);font:500 1rem/1.5 var(--sans);padding:12px 20px;border-radius:6px;text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--highlight);color:var(--on-highlight)}
.actions{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
/* 1. opening */
.open{padding-bottom:12px}
.stage{position:relative;overflow:hidden}
/* the path comes out from behind the highlight, cut flat at its bottom edge, and climbs out of the top right. Footprints walk up it */
/* the path starts behind the highlight, comes out of its top edge, and climbs off the top right corner */
.trail{position:absolute;z-index:-1;left:35%;bottom:45%;width:8em;height:3em;max-width:none;overflow:hidden;pointer-events:none}
.trail path{fill:none;stroke:var(--ink-curve);stroke-width:58}
.top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px 24px;padding-top:28px;padding-bottom:28px}
.top .nav{justify-self:center}
.logo{display:block;flex:none;width:156px;height:28px;overflow:hidden;position:relative}
.logo img{position:absolute;width:170.8px;max-width:none;left:-8.4px;top:-13.3px}
.nav{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap}
.nav a{text-decoration-color:transparent;padding-top:6px;padding-bottom:6px}
.nav a:hover{text-decoration-color:currentColor}
.hero{position:relative;z-index:0;padding-top:104px;padding-bottom:80px}
.hero h1{font-size:clamp(3rem,8.6vw,6rem);line-height:1;font-weight:700;letter-spacing:-.025em;max-width:11ch;text-wrap:balance}
.hl{position:relative;background:var(--highlight);color:var(--on-highlight);display:inline-block;line-height:1;padding:.02em .1em .08em}
.hero .lede{margin-top:22px;max-width:34em;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;display:grid;gap:4px}
.hero .lede p{text-wrap:pretty}
.hero .actions{margin-top:36px}
/* the hero: headline across, then the copy on the left and four track-record lines as a 2x2 on the right. Text with hairlines, no tiles */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.hero h1{grid-column:1 / -1;max-width:none}
/* the second sentence joins the headline in muted off-white: one statement, then one supporting line */
.h1b{display:block;margin-top:.35em;font-size:clamp(1.5rem,4.1vw,2.875rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;color:var(--fg-2);max-width:16em;text-wrap:balance}
.hero-copy{grid-column:1 / span 8;min-width:0;align-self:start}
/* before Desire Path: four career facts as a 2x2, in About. Text with hairlines, no tiles */
.before{margin-top:40px;margin-bottom:14px;font-size:1.25rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter)}
.proof li{border-top:1px solid var(--line);padding-top:14px;padding-bottom:22px;font-size:.9375rem;line-height:1.45;color:var(--fg-2)}
.proof b{display:block;font-size:1.375rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--fg);margin-bottom:4px}
.logos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px var(--gutter);align-items:center;border-top:1px solid var(--line);padding-top:28px;padding-bottom:32px}
.logos h2{grid-column:1 / span 2;font-size:1rem;line-height:1.5;font-weight:500;color:var(--fg-2)}
/* the logos move slowly from right to left in one row. Two copies of the list make the loop seamless. Hovering or tabbing into the row stops it, and each logo links to the company's site */
.marquee{grid-column:3 / -1;display:flex;overflow:hidden;min-width:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 96px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to right,transparent,#000 96px,#000 calc(100% - 96px),transparent)}
.logo-row{display:flex;flex:none;align-items:center;padding-top:8px;padding-bottom:8px;animation:marquee 43s linear infinite}
.marquee:hover .logo-row,.marquee:focus-within .logo-row{animation-play-state:paused}
.logo-row > li{flex:none;margin-right:64px}
.logo-row a{display:flex;align-items:center;gap:9px;text-decoration:none;border-radius:4px}
.logo-row img{display:block;width:auto;max-width:none}
.logo-row .cc{font-size:1.125rem;line-height:1;font-weight:700;letter-spacing:-.01em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* 2. the name, on moss, with the clay trail crossing it */
.name{background:var(--sec);color:var(--on-sec);--fg:var(--on-sec);--fg-2:var(--on-sec-2);--line:var(--sec-line);position:relative;overflow:hidden}
.name .sec{position:relative;z-index:1;padding-top:112px;padding-bottom:112px}
.name .sec > h2{grid-column:6 / -1;justify-self:end;text-align:right;font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.05;font-weight:700;letter-spacing:-.02em;text-wrap:balance;max-width:14em}
.name .sec > p{grid-column:6 / -1;justify-self:end;text-align:right;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.5;max-width:28em;margin-top:8px}
/* the claim beside ruled rows */
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px var(--gutter);padding-top:120px;padding-bottom:112px}
.sec > h2{grid-column:1 / span 5;font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.02;font-weight:700;letter-spacing:-.025em;text-wrap:balance;max-width:11em}
.sec > .body{grid-column:7 / -1;min-width:0}
/* what I do: a 2x2 of short claims */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter)}
.grid2 li{border-top:1px solid var(--line);padding-top:22px;padding-bottom:40px}
.grid2 h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin-bottom:10px}
.grid2 p{font-size:1.0625rem;line-height:1.5;color:var(--fg-2);max-width:26em}
.case-label{font-size:.875rem;line-height:1.45;color:var(--fg-2)}
.msg{border-radius:12px;padding:14px 18px 16px;max-width:34em;font-size:1.0625rem;line-height:1.5}
.msg .who{display:block;font-size:.875rem;line-height:1.45;color:var(--fg-2);margin-bottom:4px}
.msg.patient{background:var(--bg);justify-self:start}
.msg.ai{background:var(--sec-dark);justify-self:end;margin-left:10%}
/* the process as a cycle: a rail with a mark at each step, and the last step pointing back to the first */
.cycle{position:relative}
.cycle li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px var(--gutter);align-items:baseline;padding:18px 0 26px 44px}
.cycle li::before{content:"";position:absolute;left:4px;top:28px;width:14px;height:14px;border-radius:50%;background:var(--fg)}
.cycle li::after{content:"";position:absolute;left:10px;top:44px;bottom:-14px;width:2px;background:var(--line-strong)}
.cycle li.again::before{background:none;border:2px solid var(--fg)}
.cycle li.again::after{display:none}
.cycle h3{font-size:clamp(1.5rem,2.3vw,1.875rem);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.cycle p{font-size:1.125rem;line-height:1.5;max-width:40ch}
.cycle li.again h3,.cycle li.again p{color:var(--fg-2)}
/* 4 and 8. the lighter coffee bands */
.band{background:var(--bg-2);--line:var(--bg-2-line);--line-strong:var(--fg-2)}
/* 5. clients as spec sheets: three peers in a row, aligned labels, hairline rules */
.specs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gutter);margin-top:8px}
.specs h3{font-size:1.75rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.specs .what{color:var(--fg-2);margin-top:2px;margin-bottom:18px}
.specs dl{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:16px}
.specs dt,.specs dd{padding:10px 0;border-top:1px solid var(--line)}
.specs dt{font-size:.875rem;line-height:1.45;color:var(--fg-2);padding-top:12px}
.specs dd{font-size:1.0625rem;line-height:1.5}
.fill{color:var(--fg-2)}
/* 6. the process, on dark moss */
.how{background:var(--sec-dark);color:var(--on-sec-dark);--fg:var(--on-sec-dark);--fg-2:var(--on-sec-dark-2);--line:var(--sec-dark-line);--line-strong:var(--on-sec-dark-2)}
/* 7. about: prose on the left, the name and a photograph on the right */
/* about: the name on its own row, then the photo on the left and the text centered on it at the right */
.about > h2{grid-column:1 / span 5;grid-row:1}
.about > .portrait{grid-column:1 / span 5;grid-row:2;align-self:start;max-width:420px}
.about > .body{grid-column:7 / -1;grid-row:2;align-self:center}
.about .lead{font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.45}
/* 8. contact */
.contact{position:relative;overflow:hidden}
.contact .curve2{position:absolute;right:0;bottom:0;height:100%;width:min(34%,420px);pointer-events:none;transform:scaleY(-1)}
.contact .curve2 path{fill:none;stroke:var(--bg-2-curve);stroke-width:64}
.contact .sec{position:relative}
.contact .big{font-size:clamp(1.5rem,3vw,2rem);line-height:1.3;font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
.contact .actions{margin-top:24px}
.contact .social{margin-top:18px;display:grid;justify-items:start;gap:10px}
.foot{background:var(--bg-2);color:var(--fg-2);font-size:.875rem;line-height:1.45}
.sig{display:inline-flex;align-items:center;gap:10px}
.corner{width:28px;height:22px;flex:none}
.corner .walk{fill:none;stroke:var(--fg-2);stroke-width:2}
.corner .worn{fill:none;stroke:var(--trail);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 4}
.foot .wrap{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;border-top:1px solid var(--bg-2-line);padding-top:20px;padding-bottom:28px}
@media (max-width:1100px){
  .hero-copy{grid-column:1 / -1}
  .logos h2,.marquee{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero{padding-top:56px;padding-bottom:48px}
  .sec{padding-top:72px;padding-bottom:64px}
  .sec > h2,.sec > .body,.sec.flip > h2,.sec.flip > .body{grid-column:1 / -1;grid-row:auto}
  .hero-copy{grid-column:1 / -1}
  .slot.wide{aspect-ratio:4 / 3}
  .name .sec > h2,.name .sec > p{grid-column:1 / -1}
  .name .sec{padding-top:72px;padding-bottom:72px}
  .name .path{width:60%;opacity:.35}
  .specs{grid-template-columns:minmax(0,1fr);gap:32px}
  .about > .body,.about > h2,.about > .portrait,.about .side{grid-column:1 / -1;grid-row:auto}
  .about .side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .about .side h2{grid-column:1 / -1}
  .slot.portrait,.portrait{max-width:280px}
  .contact .curve2{width:60%;height:160px;opacity:.7}
}
@media (max-width:520px){
  :root{--gutter:20px}
  .top{grid-template-columns:minmax(0,1fr)}
  .top .nav{justify-self:start}
  .steps li{grid-template-columns:minmax(0,1fr)}
  .trail{left:calc(100% - .6em);bottom:0}
  .specs dl{grid-template-columns:6.5em minmax(0,1fr)}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .verdicts{grid-template-columns:minmax(0,1fr)}
  .msg.ai{margin-left:0}
  .cycle li{grid-template-columns:minmax(0,1fr)}
  .cv{grid-template-columns:minmax(0,1fr)}
  .cv dd{border-top:0;padding-top:0}
  .about .side{grid-template-columns:minmax(0,1fr)}
  .nav{gap:4px 18px}
}
/* the one moment of motion: the hero path is drawn once on load */
@media (prefers-reduced-motion:no-preference){
  .trail path{stroke-dasharray:1;animation:draw 1.6s var(--ease) both}
  .step{animation:step .35s var(--ease) both;animation-delay:calc(1.1s + var(--i) * 90ms)}
  @keyframes step{from{opacity:0}to{opacity:1}}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}
/* depth. Raised surfaces: a faint light edge on top, two soft shadows below. Nothing tilts or lifts */
:root{--edge:rgba(236,237,228,.08);--shadow:0 1px 0 rgba(236,237,228,.05) inset,0 12px 28px -14px rgba(0,0,0,.7),0 36px 64px -36px rgba(0,0,0,.6)}
/* the portrait: one photograph, cropped 4:5, on a raised surface */
/* the portrait sits still: a raised surface with no tilt or lift */
.portrait{margin:0;aspect-ratio:4 / 5;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--edge);box-shadow:var(--shadow)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:inherit;display:block}
/* clickable things change color or opacity on hover, they do not move */
.btn{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 20px -10px rgba(0,0,0,.8)}
.logo-row > li{transition:opacity .35s var(--ease);opacity:.9} /* .9 from .8 on Oct 20 2026: the CustodyComms text logo fell to 4.2:1 on the new green */
.marquee:hover .logo-row > li{opacity:.5}
.marquee .logo-row > li:hover,.marquee .logo-row > li:focus-within{opacity:1}
/* what I do: the hovered cell's rule turns off-white */
.grid2 li{transition:border-color .3s var(--ease)}
.grid2 li:hover{border-top-color:var(--fg)}
@media (prefers-reduced-motion:reduce){
  .logo-row{animation:none}
  .marquee{overflow-x:auto}
  .marquee .logo-row[aria-hidden]{display:none}
  .btn,.logo-row > li{transition:none;transform:none}
}
@media (max-width:600px){
  :root{--gutter:20px}
  body{font-size:17px}
  [id]{scroll-margin-top:84px}
  /* header: logo and three links on one row, pinned to the top */
  .top{position:fixed;top:0;left:0;right:0;max-width:none;z-index:8;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px;background:var(--bg);border-bottom:1px solid var(--line)}
  .stage{padding-top:64px}
  /* phone header: the MENU button on the left, the wordmark in the center, an empty column on the right keeps it centered */
  .top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px}
  .top .nav{display:none}
  .menu-btn{justify-self:start}
  .logo{grid-column:2}
  .logo{width:128px;height:23px}
  .logo img{width:140px;left:-6.9px;top:-10.9px}
  /* hero */
  .hero{padding-top:40px;padding-bottom:36px}
  .hero h1{font-size:clamp(2.75rem,12.5vw,3.25rem)}
  .h1b{font-size:1.375rem;margin-top:.5em}
  .hero .lede{font-size:1.0625rem;margin-top:18px}
  .hero .actions{margin-top:28px;display:grid;gap:14px;justify-items:start}
  .hero .actions .btn{width:100%;text-align:center;padding-top:14px;padding-bottom:14px}
  .hero .actions a:not(.btn){padding:8px 0}
  .logos{padding-top:22px;padding-bottom:24px;gap:12px}
  .logo-row img{transform:scale(.85);transform-origin:left center}
  .logo-row > li{margin-right:44px}
  /* section rhythm */
  .sec{padding-top:56px;padding-bottom:52px;gap:20px}
  .sec > h2{font-size:2.125rem;line-height:1.05}
  /* name band: the trail gets its own strip above the words, and the words align left for easy reading */
  .name .path{position:relative;display:block;width:100%;height:120px;opacity:1}
  .name .sec{padding-top:8px;padding-bottom:56px}
  .name .sec > h2,.name .sec > p{justify-self:start;text-align:left}
  .name .sec > h2{font-size:2rem}
  .name .sec > p{font-size:1.125rem}
  /* what I do: a tight stacked list */
  .grid2 li{padding-top:18px;padding-bottom:22px}
  .grid2 h3{font-size:1.375rem}
  /* AI example */
  .msg{font-size:1rem;padding:12px 14px 14px}
  .msg.ai{margin-left:8%}
  .case .q{font-size:1.25rem}
  .verdicts li{padding:12px 0 14px}
  /* client sheets: swipe sideways, the next sheet peeks in from the right */
  .specs{display:grid;grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:4px;scrollbar-width:none}
  .specs::-webkit-scrollbar{display:none}
  .specs > article{scroll-snap-align:start;min-width:0}
  .specs dl{grid-template-columns:6.5em minmax(0,1fr)}
  .dots{display:flex;gap:8px;grid-column:1 / -1;margin-top:4px}
  .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background-color .3s var(--ease)}
  .dots i.on{background:var(--fg);width:22px;border-radius:4px}
  /* process */
  .cycle li{padding:14px 0 18px 40px}
  .cycle li::before{top:22px}
  .cycle li::after{top:38px}
  /* about: the photo runs the full width under the name */
  .about .side{grid-template-columns:minmax(0,1fr)}
  .portrait,.slot.portrait{max-width:100%}
  .before{margin-top:28px}
  /* contact */
  .contact .big{font-size:1.375rem}
  .contact .actions .btn{width:100%;text-align:center;padding-top:14px;padding-bottom:14px}
  .contact .social a{padding:6px 0}
  .foot .wrap{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  /* the booking bar, in thumb reach once the hero button has scrolled away */
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .menu-btn .bar{transition:none}
}
/* the menu button: two lines, the lower one shorter. They cross into an X when the menu is open. The word stays for screen readers only */
.menu-btn{display:grid;place-items:center;appearance:none;background:none;border:0;color:var(--fg);width:44px;height:44px;margin-left:-12px;padding:0;cursor:pointer}
@media (min-width:741px){
  .menu-btn,.menu{display:none!important}
}
.menu-btn .icon{position:relative;display:block;width:22px;height:10px}
.menu-btn .bar{position:absolute;left:0;width:22px;height:2px;border-radius:1px;background:currentColor;transform-origin:center;transition:transform .35s var(--ease)}
.menu-btn .bar:first-child{top:0}
.menu-btn .bar:last-child{bottom:0;transform-origin:left center;transform:scaleX(.64)}
.menu-btn[aria-expanded="true"] .bar:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar:last-child{transform-origin:center;transform:translateY(-4px) rotate(-45deg)}
.menu-btn:hover{color:var(--highlight)}
.menu-btn:focus-visible{outline:2px solid var(--highlight);outline-offset:0;border-radius:6px}
.menu-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the full-screen menu */
.menu{position:fixed;inset:0;z-index:7;background:var(--bg);padding:calc(96px + env(safe-area-inset-top,0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:32px;overflow-y:auto}
.menu[hidden]{display:none}
.menu-nav{display:grid}
.menu-nav a{font-size:2rem;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.menu-nav a:hover{color:var(--highlight)}
html.menu-open,html.menu-open body{overflow:hidden}
/* v14. AI evaluation: heading across the top, the chat on the left and the four verdicts on the right */
.ai .sec > h2{grid-column:1 / -1}
.ai .sec > .body{grid-column:1 / -1}
/* about: the name as a caption under the photo */
.portrait{position:relative}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;font-size:.9375rem;line-height:1.4;font-weight:500;color:#ecede4;background:linear-gradient(to top,rgba(26,6,9,.85),rgba(26,6,9,0))}
@media (max-width:900px){
  .case .chat,.case .judged{grid-column:1 / -1}
  .case .judged{margin-top:28px}
}
/* clients follows what I do on the same ground, so a rule separates them */
#clients{border-top:1px solid var(--line)}
/* the main action is off-white with bold maroon black text. It turns full gold on hover and does not move */
:root{--action:#ecede4}
.btn,.open .btn,.contact .btn{background:var(--action);color:#1a0609;font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 20px -10px rgba(0,0,0,.8)}
.btn:hover,.open .btn:hover,.contact .btn:hover{background:var(--highlight);color:var(--on-highlight)}
/* the header stays at the top at every width: opaque, with a hairline under it, and aligned to the page grid */
.top{position:fixed;top:0;left:0;right:0;z-index:8;max-width:none;background:var(--bg);border-bottom:1px solid var(--line);padding-top:16px;padding-bottom:16px;padding-left:max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)));padding-right:max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)))}
.stage{padding-top:61px}
[id]{scroll-margin-top:88px}
@media (max-width:600px){
  .top{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px;padding-left:var(--gutter);padding-right:var(--gutter)}
  .stage{padding-top:64px}
}
/* v15. Every section title starts on the same left line. Four ways and How a project works put their content on the right; Clients and AI evaluation put full-width content under the title */
/* header booking button: always at the top right on desktop and tablet. Phones use the booking bar at the bottom and the menu instead */
.top-cta{grid-column:3;grid-row:1;justify-self:end;padding:7px 14px;font-size:.9375rem;line-height:1.4;white-space:nowrap}
@media (max-width:600px){
  .top-cta{display:none}
}
@media (min-width:601px){
  .stage{padding-top:74px}
}
@media (min-width:601px) and (max-width:900px){
  .top .nav{gap:4px 16px;font-size:.9375rem}
  .top{column-gap:16px}
}
/* narrow tablets: no room for the logo, four links and the button on one row, so the links drop and the button stays */
@media (min-width:601px) and (max-width:740px){
  .top .nav{display:none}
}
/* v17. The header floats: a raised bar inset from the edges, its contents on the page's left and right lines. Wordmark left, links and the booking button right. On phones the menu button sits at the right */
.top{position:fixed;top:10px;left:0;right:0;z-index:8;display:flex;align-items:center;gap:8px 28px;width:min(100% - 16px,calc(var(--page) - 2 * var(--gutter) + 32px));max-width:none;margin:0 auto;padding:10px 16px;background:#2a1416;border:1px solid rgba(236,237,228,.1);border-radius:12px;box-shadow:0 12px 28px -14px rgba(0,0,0,.75),0 32px 56px -36px rgba(0,0,0,.6)}
.top .logo{margin-right:auto}
.top .nav{justify-self:auto}
.menu-btn{margin-left:0;margin-right:-10px}
@media (min-width:601px){
  .stage{padding-top:80px}
}
@media (max-width:600px){
  .top{top:8px;padding:5px 12px;column-gap:12px}
  .top .logo{grid-column:auto}
  .stage{padding-top:70px}
}
/* v17. The process is one row of four on desktop: a dot per step on a rail that runs left to right. Tablets and phones keep the vertical rail */
@media (min-width:901px){
  .how .sec{padding-top:80px;padding-bottom:80px;row-gap:68px}
  .how .sec > h2,.how .sec > .body{grid-column:1 / -1;max-width:none}
  .cycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
  .cycle li{display:block;padding:34px 0 0}
  .cycle li::before{left:0;top:0}
  .cycle li::after{left:24px;right:calc(-1 * var(--gutter) + 10px);top:6px;bottom:auto;width:auto;height:2px}
  .cycle h3{margin-bottom:8px}
  .cycle p{font-size:1.0625rem;max-width:26ch}
}
@media (max-width:900px){
  .case{grid-template-rows:none}
  .case .chat,.case .judged,.case .result{grid-column:1 / -1;grid-row:auto}
  .case .result{margin-top:4px}
}
.sheet{--ink:#1a0609;--ink-2:#624e4e;--rule:#cec7c2;background:#ecede4;color:var(--ink);border-radius:12px;padding:26px 32px 22px;box-shadow:0 14px 30px -14px rgba(0,0,0,.75),0 40px 70px -36px rgba(0,0,0,.6);font-size:1rem;line-height:1.5}
.sheet-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding-bottom:12px;border-bottom:1px solid var(--rule);font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.sheet h4{margin:20px 0 6px;font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.sheet-base{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.tally{margin-top:16px}
.tally li{display:grid;grid-template-columns:minmax(0,1fr) auto 6em;align-items:center;gap:6px 16px;padding:10px 0;border-top:1px solid var(--rule)}
.tally b{justify-self:end;font-weight:500;white-space:nowrap}
.tally .split b{font-weight:700;background:var(--ink);color:#ecede4;padding:2px 8px;border-radius:4px}
.tally .split .crit{font-weight:700}
.marks{display:inline-flex;align-items:center;gap:9px}
.marks i{display:block;position:relative;width:12px;height:12px}
.marks .y{border-radius:50%;background:var(--ink)}
.marks .n::before,.marks .n::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:2.5px;margin:-1.25px 0 0 -7.5px;border-radius:2px;background:var(--ink)}
.marks .n::before{transform:rotate(45deg)}
.marks .n::after{transform:rotate(-45deg)}
.order{padding-top:10px;border-top:1px solid var(--rule);font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.sheet h5{margin:20px 0 8px;font-size:1rem;line-height:1.5;font-weight:700}
.standards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.standards li{border-top:1px solid var(--rule);padding-top:10px}
.standards b,.standards span{display:block}
.standards span{font-size:.9375rem;line-height:1.45}
.decision{margin-top:20px;background:#c1c8be;border-radius:6px;padding:14px 16px}
.decision b{display:block;font-weight:700}
.decision .owner{margin-top:6px;font-size:.875rem;line-height:1.45}
@media (max-width:900px){
  .offer{margin-top:48px;padding-top:40px;gap:36px var(--gutter)}
  .offer-copy,.sample{grid-column:1 / -1}
}
@media (max-width:520px){
  .sheet{padding:20px 18px 18px}
  .sheet h4{font-size:1.375rem}
  .tally li{grid-template-columns:auto minmax(0,1fr)}
  .tally .crit{grid-column:1 / -1}
  .standards{grid-template-columns:minmax(0,1fr)}
}
/* v17. The name band shows the footer mark at full size: a sidewalk corner in the grass, with the shortcut people wore across it in clay, climbing from the lower left to the upper right like a rising line on a chart. The slabs are long rectangles. It replaces the wide trail, which repeated the hero */
.corner-lg{position:absolute;top:80px;left:max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)));height:calc(100% - 160px);width:min(38%,460px);max-width:none;pointer-events:none}
.corner-lg .walk{fill:none;stroke:var(--on-sec-2);stroke-width:30;stroke-linejoin:miter}
.corner-lg .joints{fill:none;stroke:var(--sec);stroke-width:2}
.corner-lg .worn{fill:none;stroke:var(--trail);stroke-width:30;stroke-linecap:round}
@media (max-width:900px){
  .corner-lg{position:relative;display:block;top:auto;left:auto;width:auto;height:190px;margin:56px var(--gutter) 0}
  .name .sec{padding-top:32px}
}
@media (max-width:600px){
  .corner-lg{height:150px;margin-top:40px}
  .name .sec{padding-top:24px}
}
/* v18. The header is no longer a box. At the top of the page it has no ground and sits over the hero. Once the page scrolls it becomes a slim maroon black bar with a soft shadow, and it stays at the top */
.top{top:0;width:auto;margin:0;padding:12px max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)));background:transparent;border:0;border-radius:0;box-shadow:none;transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.top.solid{background:var(--bg);box-shadow:0 12px 24px -18px rgba(0,0,0,.95)}
html.menu-open .top{background:var(--bg)}
@media (min-width:601px){
  .stage{padding-top:72px}
}
@media (max-width:600px){
  .top{top:0;padding:8px var(--gutter)}
  .stage{padding-top:60px}
}
@media (prefers-reduced-motion:reduce){
  .top{transition:none}
}
/* v20. The name band drawing carries two labels: the sidewalk is the route that was built, the trail is the route people take. The trail is labeled as the desire path */
.corner-fig{position:absolute;z-index:1;top:50%;left:max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter)));transform:translateY(-50%);width:min(38%,460px);pointer-events:none}
.corner-lg{position:static;display:block;width:100%;height:auto;margin:0}
.lbl-trail{position:absolute;left:6%;top:31%;width:60%;display:grid;gap:2px;font-size:.9375rem;line-height:1.35;color:var(--on-sec)}
.lbl-trail b{font-size:1.125rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.lbl-walk{margin:-8px 0 0 6%;font-size:.9375rem;line-height:1.35;color:var(--on-sec-2)}
@media (max-width:900px){
  .corner-fig{position:relative;top:auto;left:auto;transform:none;width:min(100% - 2 * var(--gutter),420px);margin:56px var(--gutter) 0}
}
@media (max-width:600px){
  .corner-fig{margin-top:40px}
  .lbl-trail,.lbl-walk{font-size:.875rem}
  .lbl-trail b{font-size:1rem}
}
.marks .y{background:none;border-radius:0}
.marks .y::before,.marks .y::after{content:"";position:absolute;height:2.5px;border-radius:2px;background:var(--ink)}
.marks .y::before{left:-.5px;top:7px;width:7px;transform:rotate(45deg)}
.marks .y::after{left:2px;top:4.75px;width:12px;transform:rotate(-50deg)}
/* v21. Phones. The hero fills the first screen with room between its parts, buttons are as wide as their words, and the booking button sits in the header beside the menu button once the page scrolls. The bottom booking bar is gone. Between 601 and 740px the menu button stays, so the section links are always reachable */
@media (max-width:740px){
  .menu-btn{margin-left:4px}
}
@media (max-width:600px){
  .top{padding-top:calc(8px + env(safe-area-inset-top,0px));column-gap:8px}
  .top-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:.9375rem;transition:opacity .25s var(--ease),visibility .25s}
  .top:not(.solid) .top-cta{opacity:0;visibility:hidden}
  html.menu-open .top .top-cta{opacity:1;visibility:visible}
  .hero{min-height:calc(100svh - 190px);align-content:center;padding-top:56px;padding-bottom:64px}
  .hero h1{font-size:clamp(2.75rem,13vw,3.5rem)}
  .h1b{font-size:1.5rem;line-height:1.2;margin-top:24px}
  .hero .lede{font-size:1.125rem;margin-top:28px}
  .hero .actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
  .hero .actions .btn,.contact .actions .btn{width:auto;padding:12px 22px}
  .hero .actions a:not(.btn){padding:11px 0}
  .specs dd a,.contact .social a{display:inline-block;padding:10px 0}
  .contact .social{gap:2px}
  .menu{padding-top:calc(88px + env(safe-area-inset-top,0px))}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .top-cta{transition:none}
}
@media (max-width:600px){
  .contact .big a{display:inline-block;padding:8px 0}
  .name .sec > h2{font-size:2.125rem}
}
@media (max-width:359px){
  .top-cta{padding:0 10px;font-size:.875rem}
  .top .logo{width:112px;height:20px}
  .top .logo img{width:122.5px;left:-6px;top:-9.5px}
  .hero .lede{font-size:1.0625rem}
}
.name .sec > p{text-wrap:balance}
/* v21. Header links sit a little further apart */
.top .nav{gap:8px 36px}
.top{column-gap:36px}
@media (min-width:741px) and (max-width:900px){
  .top .nav{gap:4px 22px}
  .top{column-gap:22px}
}
@media (max-width:740px){
  .top{column-gap:8px}
}
/* v21. The process reads as a walk: clay footprints go from each step to the next, toes pointing the way, and Repeat is marked with a drawn loop arrow */
.cycle li::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='44' viewBox='0 0 22 44' fill='%23a17226'%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(16 12) rotate(90) scale(0.75 -0.75)'/%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(6 34) rotate(90) scale(0.75 0.75)'/%3E%3C/svg%3E") center top/22px 44px repeat-y;background-repeat:no-repeat round;left:0;width:22px;top:50px;bottom:-12px}
.cycle li.again::before{left:1px;top:25px;width:20px;height:20px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23cfd0c6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10a6.5 6.5 0 1 1-2-4.7'/%3E%3Cpath d='M15 1.8v3.9h-3.9'/%3E%3C/svg%3E") center/20px 20px no-repeat}
@media (max-width:600px){
  .cycle li::after{top:44px}
  .cycle li.again::before{top:19px}
}
@media (min-width:901px){
  .cycle li::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22' fill='%23a17226'%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(12 6) rotate(0) scale(0.75 -0.75)'/%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(34 16) rotate(0) scale(0.75 0.75)'/%3E%3C/svg%3E") left center/44px 22px;background-repeat:round no-repeat;left:28px;right:calc(-1 * var(--gutter) + 14px);top:-4px;bottom:auto;width:auto;height:22px}
  .cycle li.again::before{left:-3px;top:-3px}
}
/* v21. Each run of footprints ends in a small clay arrowhead that points at the next step */
.cycle li:not(.again) h3::after{content:"";position:absolute;left:6px;bottom:-9px;width:9px;height:9px;border:solid var(--trail);border-width:2.5px 2.5px 0 0;transform:rotate(135deg)}
.cycle li::after{bottom:6px}
@media (min-width:901px){
  .cycle li:not(.again) h3::after{left:auto;bottom:auto;top:2.5px;right:calc(-1 * var(--gutter) + 18px);transform:rotate(45deg)}
  .cycle li::after{bottom:auto;right:calc(-1 * var(--gutter) + 32px)}
}
/* v22. On phones the two hero lines break evenly */
@media (max-width:600px){
  .hero .lede p{text-wrap:balance}
}
/* v23. The process is one clay trail that runs through every step, with footprints walking along it. The steps are off-white stops on the trail, and the last stop carries a loop arrow. No arrowheads */
.cycle li:not(.again) h3::after{content:none}
.cycle li::before{z-index:1}
.cycle li::after{left:0;right:auto;width:22px;height:auto;top:35px;bottom:-35px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='44' viewBox='0 0 22 44' fill='%23f8f7f1' fill-opacity='.62'%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(15.5 12.1) rotate(90) scale(0.71 -0.71)'/%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(6.5 34.1) rotate(90) scale(0.71 0.71)'/%3E%3C/svg%3E") 50% 0/22px 44px no-repeat round var(--trail)}
.cycle li:first-child::after{top:24px;border-radius:11px 11px 0 0}
.cycle li:nth-child(3)::after{bottom:-46px;border-radius:0 0 11px 11px}
.cycle li.again::before{left:0;top:24px;width:22px;height:22px;border:0;border-radius:50%;background:var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2320090c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10a6.5 6.5 0 1 1-2-4.7'/%3E%3Cpath d='M15 1.8v3.9h-3.9'/%3E%3C/svg%3E") center/13px 13px no-repeat}
@media (max-width:600px){
  .cycle li::after{top:29px;bottom:-29px}
  .cycle li:first-child::after{top:18px}
  .cycle li:nth-child(3)::after{bottom:-40px}
  .cycle li.again::before{top:18px}
}
@media (min-width:901px){
  .cycle li::after{left:7px;top:-4px;bottom:auto;width:calc(100% + var(--gutter));height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22' fill='%23f8f7f1' fill-opacity='.62'%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(12.1 6.5) rotate(0) scale(0.71 -0.71)'/%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(34.1 15.5) rotate(0) scale(0.71 0.71)'/%3E%3C/svg%3E") 0 50%/44px 22px round no-repeat var(--trail)}
  .cycle li:first-child::after{left:-4px;top:-4px;width:calc(100% + var(--gutter) + 11px);border-radius:11px 0 0 11px}
  .cycle li:nth-child(3)::after{bottom:auto;width:calc(100% + var(--gutter) + 11px);border-radius:0 11px 11px 0}
  .cycle li.again::before{left:-4px;top:-4px}
}
/* v23. Stops on the trail: larger off-white circles with a ring in the band's ground color, so each one reads as a stop and not as part of the footprints */
.cycle li::before{left:2px;top:26px;width:18px;height:18px;box-shadow:0 0 0 3px var(--sec-dark)}
.cycle li.again::before{box-shadow:0 0 0 3px var(--sec-dark)}
@media (max-width:600px){
  .cycle li::before{top:20px}
  .cycle li.again::before{top:18px}
}
@media (min-width:901px){
  .cycle li::before{left:-2px;top:-2px}
  .cycle li.again::before{left:-4px;top:-4px}
}
@media (max-width:900px){
  .case .judged,.offer-copy{grid-column:1 / -1}
}
@media (max-width:600px){
  .case .judged{padding:20px 18px 4px}
  .offer-copy{padding:22px 18px 22px}
}
.how-trail{fill:none;stroke:var(--ink-curve);stroke-width:22;stroke-linecap:round;vector-effect:non-scaling-stroke}
.how-feet{fill:var(--ink-step)}
@media (min-width:901px){
  .how .body{position:relative}
  .how .how-climb{display:block;position:absolute;left:0;top:0;width:100%;height:190px;max-width:none;overflow:visible}
  .how .cycle{align-items:start}
  .how .cycle li::after{content:none}
  .how .cycle li:nth-child(1){margin-top:150px}
  .how .cycle li:nth-child(2){margin-top:100px}
  .how .cycle li:nth-child(3){margin-top:50px}
}
/* v25. The straight trail on tablets and phones, in the hero's dark path colors */
.cycle li::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='44' viewBox='0 0 22 44' fill='%232e1513'%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(15.5 12.1) rotate(90) scale(0.71 -0.71)'/%3E%3Cpath d='M11.8 -1.4C11.7 -1.7 11.6 -2 11.4 -2.3C11.3 -2.5 11.1 -2.7 10.9 -2.9C10.6 -3.1 10.2 -3.4 9.9 -3.5C9.6 -3.7 9.2 -3.8 8.8 -3.9C8.4 -4 8.2 -4.1 7.8 -4.2C7.4 -4.2 7.1 -4.3 6.4 -4.2C5.8 -4.1 4.9 -4 3.9 -3.7C2.8 -3.4 1.3 -2.5 0.3 -2.2C-0.7 -1.9 -1.7 -2 -2.2 -1.9C-2.6 -1.8 -2.4 -1.9 -2.5 -1.7C-2.6 -1.5 -2.7 -1.6 -2.8 -0.9C-2.8 -0.2 -2.9 2.1 -2.9 2.7C-2.9 3.4 -2.8 3 -2.7 3.1C-2.6 3.2 -2.9 3.1 -2.2 3.3C-1.5 3.5 0.5 4 1.5 4.1C2.6 4.2 3.2 4.2 4.1 4.2C5 4.2 6 4.2 6.9 4C7.9 3.7 9.1 3.2 9.8 2.9C10.5 2.5 10.8 2.2 11.1 1.9C11.4 1.6 11.5 1.3 11.7 1.1C11.8 0.8 11.9 0.5 11.9 0.2C12 0 12 -0.2 12 -0.5C12 -0.8 11.9 -1.1 11.8 -1.4ZM-5.4 -1.9C-5.5 -2.1 -5.5 -2.2 -6 -2.3C-6.5 -2.4 -7.9 -2.6 -8.5 -2.7C-9.1 -2.7 -9.2 -2.6 -9.6 -2.6C-10 -2.5 -10.6 -2.4 -10.9 -2.2C-11.3 -2 -11.4 -1.9 -11.6 -1.6C-11.7 -1.3 -11.8 -1 -11.9 -0.7C-12 -0.3 -12 0.1 -12 0.5C-12 0.8 -11.9 1 -11.8 1.3C-11.6 1.6 -11.4 2 -11.1 2.3C-10.8 2.5 -10.7 2.6 -10.1 2.8C-9.6 2.9 -8.5 3 -7.8 3.1C-7.1 3.1 -6.3 3.1 -6 3C-5.6 2.9 -5.7 3 -5.6 2.3C-5.5 1.5 -5.4 -0.8 -5.3 -1.5C-5.3 -2.2 -5.3 -1.8 -5.4 -1.9Z' transform='translate(6.5 34.1) rotate(90) scale(0.71 0.71)'/%3E%3C/svg%3E") 50% 0/22px 44px no-repeat round var(--ink-curve)}
/* v26. The climb has no stop circles on desktop: each step's text sits under its landing on the trail, and a small loop arrow follows the end of the trail. On tablets and phones the stops stay, smaller and muted, so each step still lines up with a point on the straight trail */
@media (min-width:901px){
  .how .cycle li::before{content:none}
  .how .cycle li.again::before{content:"";left:28px;top:-3px;width:20px;height:20px;border-radius:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23cfd0c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10a6.5 6.5 0 1 1-2-4.7'/%3E%3Cpath d='M15 1.8v3.9h-3.9'/%3E%3C/svg%3E") center/20px 20px no-repeat}
}
@media (max-width:900px){
  .how .cycle li::before{left:5px;top:29px;width:12px;height:12px;background:var(--on-sec-dark-2);box-shadow:none}
  .how .cycle li.again::before{left:1px;top:25px;width:20px;height:20px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23cfd0c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10a6.5 6.5 0 1 1-2-4.7'/%3E%3Cpath d='M15 1.8v3.9h-3.9'/%3E%3C/svg%3E") center/20px 20px no-repeat}
  .how .cycle li:nth-child(3)::after{bottom:-20px}
}
@media (max-width:600px){
  .how .cycle li::before{top:23px}
  .how .cycle li.again::before{top:19px}
  .how .cycle li:nth-child(3)::after{bottom:-14px}
}
/* v26. The hero's main button is a size up from the other buttons, so it matches the scale of the hero text */
.hero .actions .btn{font-size:1.125rem;line-height:1.4;padding:16px 30px}
.hero .actions a:not(.btn){font-size:1.125rem}
@media (max-width:600px){
  .hero .actions .btn{font-size:1.125rem;padding:15px 30px}
  .hero .actions a:not(.btn){font-size:1.0625rem}
}
/* v27. Sherwood Square sheet: the homepage's first phone screen, before and proposed, redrawn small from Karl's wireframes. A light panel, since it shows a document. Moss marks what the proposed screen adds: category tiles and gift shortcuts */
.ba{aspect-ratio:16 / 10;margin:0 0 20px;padding:12px 18px 10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px 18px;background:#eeece6;border-radius:6px;color:#1a0609}
.ba-cap{grid-column:1 / -1;text-align:center;font-size:.875rem;line-height:1.3;color:#624e4e}
/* v27. On desktop the offer panel is exactly as tall as the sample readout page beside it. The page's caption hangs below, outside the row, and the offer's rows get more room so the panel fills evenly, with the button and note at the bottom */
@media (min-width:901px){
  .offer{align-items:stretch}
  .sample{position:relative}
  .sample figcaption{position:absolute;left:0;right:0;top:100%}
  .offer-copy{display:flex;flex-direction:column;padding:36px 36px 32px}
  .offer h3{margin-bottom:24px}
  .gets dt,.gets dd{padding-top:17px;padding-bottom:17px}
  .gets dt{padding-top:20px}
  .gets dd{font-size:1.125rem}
  .offer .actions{margin-top:auto;padding-top:28px}
  .offer .actions .btn{font-size:1.0625rem;padding:14px 26px}
}
/* v27. Repeat has no icon. On desktop the trail keeps climbing past the fourth step and runs off the right edge of the band. On tablets and phones it runs on past Repeat and off the bottom edge */
.how{overflow:hidden}
@media (min-width:901px){
  .how .cycle li.again::before{content:none}
}
@media (max-width:900px){
  .how .cycle li.again::before{left:5px;top:29px;width:12px;height:12px;border-radius:50%;background:var(--on-sec-dark-2)}
  .how .cycle li:nth-child(3)::after{bottom:-35px;border-radius:0}
  .how .cycle li.again::after{display:block;top:35px;bottom:-140px;border-radius:0}
}
@media (max-width:600px){
  .how .cycle li.again::before{top:23px}
  .how .cycle li:nth-child(3)::after{bottom:-29px}
  .how .cycle li.again::after{top:29px}
}
@media (max-width:600px){
  .ai-lede{margin-bottom:28px}
}
/* v28. One muted line under the hero buttons names the kind of business, the same line the share card ends with */
.hero-kind{margin-top:32px;font-size:1rem;line-height:1.5;color:var(--fg-2);text-wrap:balance}
@media (max-width:600px){
  .hero-kind{margin-top:28px}
}
/* v29. Four ways to work together: a small drawing above each one shows what you get. A ranked list of fixes, a path through a screen to its button, five expert verdicts, and one more person on the team. Drawn in the page's own marks, off-white and muted, with no boxes around them */
.svc{display:block;width:120px;height:56px;margin-bottom:22px;max-width:none}
.s-fg{fill:var(--fg)}
.s-mu{fill:var(--fg-2)}
.s-lo{fill:var(--line-strong)}
.s-ln{fill:none;stroke:var(--fg);stroke-width:2}
.s-ln.thin{stroke-width:1.5;stroke:var(--fg-2)}
.s-dots{fill:none;stroke:var(--fg-2);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:0 7.5}
.svc-marks{display:flex;align-items:center;gap:16px;--ink:var(--fg);padding-left:4px}
.svc-marks i{display:block;position:relative;width:12px;height:12px;transform:scale(1.7)}
.svc-marks .y{background:none;border-radius:0}
.svc-marks .y::before,.svc-marks .y::after,.svc-marks .n::before,.svc-marks .n::after{content:"";position:absolute;height:2.5px;border-radius:2px;background:var(--fg)}
.svc-marks .y::before{left:-.5px;top:7px;width:7px;transform:rotate(45deg)}
.svc-marks .y::after{left:2px;top:4.75px;width:12px;transform:rotate(-50deg)}
.svc-marks .n::before,.svc-marks .n::after{left:50%;top:50%;width:15px;margin:-1.25px 0 0 -7.5px}
.svc-marks .n::before{transform:rotate(45deg)}
.svc-marks .n::after{transform:rotate(-45deg)}
@media (max-width:600px){
  .svc{margin-bottom:16px}
}
/* v29. The name band's "The desire path" label sits on the golden highlight, the second use of gold on the page after "anything." */
.lbl-trail b{justify-self:start;background:var(--highlight);color:var(--on-highlight);padding:.08em .32em .14em;margin-bottom:3px}
/* v30. Contact: the booking button sits right under "Let's connect" on the left, and the right side holds the email address and the two LinkedIn links */
.contact .sec > .actions{grid-column:1 / -1;margin-top:-8px}
.contact .sec > .actions .btn{font-size:1.125rem;line-height:1.4;padding:16px 30px}
.contact .social{margin-top:14px}
@media (min-width:901px){
  .contact .sec > .actions{grid-column:1 / span 5;grid-row:2;align-self:start}
  .contact .sec > .body{grid-row:1 / span 2}
}
@media (max-width:600px){
  .contact .sec > .actions{margin-top:0}
  .contact .sec > .actions .btn{width:auto;padding:15px 30px}
}
/* v30. With one line, the trail label sits a little lower, nearer the trail */
.lbl-trail{top:36%}
.lbl-trail b{margin-bottom:0}
/* v31. The first service's drawing: a page under review, with a check beside one part and an X beside another */
.s-mark{fill:none;stroke:var(--fg);stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.zoom{width:min(1280px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--bg);color:var(--fg);box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.zoom.tall{width:min(560px,calc(100vw - 32px))}
.zoom::backdrop{background:rgba(10,3,4,.84)}
.zoom-in{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:calc(100dvh - 32px)}
.zoom-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--line)}
#zoom-cap{margin-right:auto;font-size:1.0625rem;line-height:1.3;font-weight:700}
.zoom-x{appearance:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:none;color:var(--fg);cursor:pointer}
.zoom-x:hover{color:var(--highlight)}
.zoom-body{overflow:auto;padding:16px;background:var(--bg-2);display:grid;justify-items:center}
.zoom-body img{display:block;width:auto;height:auto;max-width:100%;border-radius:6px}
.zoom:not(.tall) .zoom-body img{max-height:calc(100dvh - 150px)}
html.zoom-open{overflow:hidden}
@media (max-width:600px){
  .zoom-bar{padding:8px 6px 8px 14px}
  .zoom-tabs button{min-height:44px}
  .zoom-body{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .zoom-btn,.wf[role="button"],.zoom-tabs button{transition:none}
}
/* v32. On phones a wide screenshot opens at a readable size and scrolls sideways inside the viewer */
@media (max-width:600px){
  .zoom:not(.tall) .zoom-body{justify-items:start}
  .zoom:not(.tall) .zoom-body img{width:780px;max-width:none;max-height:none}
}
/* v34. Client images sit on the dark coffee ground, with off-white labels. Selecting either image opens the full comparison: both images large, side by side, each under its label */
.ba{background:var(--bg-2);color:var(--fg)}
.ba-cap{color:var(--fg-2)}
.zoom{width:min(1760px,calc(100vw - 32px))}
.zoom.tall{width:min(900px,calc(100vw - 32px))}
.zoom-bar{padding:8px 10px 8px 20px}
.zoom-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;justify-items:stretch}
.zoom-body figure{margin:0;min-width:0}
.zoom-body figcaption{margin-bottom:8px;font-size:1rem;line-height:1.4;font-weight:700}
.zoom-body img,.zoom:not(.tall) .zoom-body img{width:100%;height:auto;max-width:none;max-height:none}
@media (max-width:760px){
  .zoom-body{grid-template-columns:minmax(0,1fr);gap:20px}
  .zoom:not(.tall) .zoom-body{justify-items:start;grid-template-columns:780px}
  .zoom:not(.tall) .zoom-body img{width:780px}
}
/* v35. Client images are comparison sliders. The whole page shows in one frame, Before on the left of the divider and After on the right. Drag the divider on the image or use the slider beneath it. Sherwood Square's frame is a phone. All three panels are the same height */
.ba.cmp{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:8px;padding:12px 16px 12px}
.cmp-lbl{display:flex;justify-content:space-between;font-size:.875rem;line-height:1.3;font-weight:700}
.cmp-stage{aspect-ratio:1.86;display:grid;place-items:center;min-height:0}
.cmp-frame{--pos:50%;position:relative;width:100%;height:100%;overflow:hidden;border:1px solid var(--bg-2-line);border-radius:4px;background:#ecede4;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cmp-frame.portrait{width:auto;aspect-ratio:4 / 5}
.cmp-frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0 0;pointer-events:none;-webkit-user-drag:none}
.cmp-a{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#1a0609;box-shadow:0 0 0 1px rgba(236,237,228,.85)}
.cmp-line::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#ecede4;border:2px solid #1a0609;box-sizing:border-box}
.cmp-range{appearance:none;-webkit-appearance:none;display:block;width:100%;height:24px;margin:0;background:none;cursor:ew-resize}
.cmp-range::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:var(--fg-2)}
.cmp-range::-moz-range-track{height:2px;border-radius:1px;background:var(--fg-2)}
.cmp-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;border:0;background:var(--fg)}
.cmp-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:var(--fg)}
.cmp-range:hover::-webkit-slider-thumb{background:var(--highlight)}
.cmp-range:hover::-moz-range-thumb{background:var(--highlight)}
.cmp-range:focus-visible{outline:2px solid var(--highlight);outline-offset:2px;border-radius:4px}
.ba.cmp .ba-cap{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;text-align:left}
.cmp-open{appearance:none;border:0;background:none;padding:0;color:var(--fg);font:400 .875rem/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--fg-2);cursor:pointer;transition:text-decoration-color .2s var(--ease)}
.cmp-open:hover{text-decoration-color:currentColor}
@media (max-width:600px){
  .cmp-range{height:32px}
  .cmp-open{padding:8px 0}
}
@media (prefers-reduced-motion:reduce){
  .cmp-open{transition:none}
}
/* v36. The hero actions are a size larger again: a 20px label on a 64px button, and the text link beside it at the same size */
.hero .actions{gap:16px 36px}
.hero .actions .btn{font-size:1.25rem;line-height:1.4;padding:18px 38px}
.hero .actions a:not(.btn){font-size:1.25rem}
@media (max-width:600px){
  .hero .actions{gap:8px 28px}
  .hero .actions .btn{font-size:1.1875rem;padding:17px 34px}
  .hero .actions a:not(.btn){font-size:1.125rem}
}
@media (max-width:359px){
  .hero .actions .btn{padding:16px 26px}
}
/* v37. Clients on desktop: one client per row, with a large comparison slider on the left and the details on the right, so the screens are big enough to read. Tablets already stack, and phones keep the swipe */
@media (min-width:901px){
  .specs{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0}
  .specs > article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--gutter);align-items:start;padding:44px 0;border-top:1px solid var(--line)}
  .specs > article:first-child{border-top:0;padding-top:8px}
  .specs > article:last-child{padding-bottom:0}
  .specs > article > .ba{grid-column:1 / span 7;grid-row:1 / span 3;margin:0;padding:16px 20px 14px;gap:10px;border-radius:12px}
  .specs > article > h3{grid-column:9 / -1;font-size:2.25rem;line-height:1.15;margin-top:6px}
  .specs > article > .what{grid-column:9 / -1;font-size:1.125rem}
  .specs > article > dl{grid-column:9 / -1}
  .cmp-lbl,.ba.cmp .ba-cap,.cmp-open{font-size:1rem}
  .cmp-frame{border-radius:6px}
  .cmp-line::after{width:30px;height:30px;margin:-15px 0 0 -15px}
}
/* v38. Clients: a row of client names sits under the heading. The chosen client fills the row: a large comparison slider on the left, details on the right. Phones hide the names and keep the swipe */
.client-tabs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 40px;border-bottom:1px solid var(--line)}
.client-tabs button{appearance:none;margin:0 0 -1px;padding:10px 0 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--fg-2);font:700 1.5rem/1.2 var(--sans);letter-spacing:-.015em;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.client-tabs button:hover{color:var(--fg)}
.client-tabs button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
@media (min-width:601px){
  .specs.tabbed > article:not(.on){display:none}
  .specs.tabbed > article,.specs.tabbed > article:first-child,.specs.tabbed > article:last-child{border-top:0;padding:8px 0 0}
  .specs.tabbed > article > h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (min-width:901px){
  .specs.tabbed > article{grid-template-rows:auto 1fr}
  .specs.tabbed > article > .ba{grid-row:1 / span 2}
  .specs.tabbed > article > .what{margin-top:4px;font-size:1.375rem;line-height:1.35;color:var(--fg);font-weight:500;letter-spacing:-.01em}
}
@media (max-width:600px){
  .client-tabs{display:none}
}
@media (prefers-reduced-motion:reduce){
  .client-tabs button{transition:none}
}
/* v39. The fourth service's drawing is a calendar with the same day filled every week: a standing place on the team */
/* v41. Phone hero, tidied. Three groups with even gaps: the headline pair, one flowing sentence, then the actions with the business line. The sentence is no longer forced onto set lines, so it breaks evenly at any width, and the button comes down a size to sit in scale with the text */
@media (max-width:600px){
  .hero{padding-top:44px;padding-bottom:52px}
  .h1b{margin-top:18px;font-size:1.5rem;line-height:1.2}
  .hero .lede{display:block;margin-top:22px;max-width:23em;font-size:1.0625rem;line-height:1.5;text-wrap:balance}
  .hero .lede p{display:inline}
  .hero .actions{margin-top:30px;gap:8px 24px}
  .hero .actions .btn{font-size:1.0625rem;padding:14px 26px}
  .hero .actions a:not(.btn){font-size:1.0625rem}
  .hero-kind{margin-top:22px;font-size:.9375rem;line-height:1.45}
}
@media (max-width:359px){
  .hero .actions .btn{padding:14px 22px}
}
/* v41. From 412px up the sentence keeps its two set lines at 16px, which fit without wrapping. Narrower phones let it flow as one evenly broken sentence */
@media (min-width:412px) and (max-width:600px){
  .hero .lede{display:grid;gap:2px;max-width:none;font-size:1rem;text-wrap:wrap}
  .hero .lede p{display:block}
}
/* v42. Clients on desktop: details on the left across five columns, the comparison slider on the right across six */
@media (min-width:901px){
  .specs > article > .ba{grid-column:7 / -1}
  .specs > article > h3,.specs > article > .what,.specs > article > dl{grid-column:1 / span 5}
}
/* v43. Clients: each client is shown by its logo, in the row that switches between them and above the details on phones. The chosen logo is at full strength with a rule under it, the others are dimmed */
.specs h3{display:flex;align-items:center;gap:10px;min-height:40px}
.specs h3 img,.client-tabs img{flex:none;width:auto;max-width:none}
.specs h3 span,.client-tabs span{font-size:1.375rem;line-height:1;font-weight:700;letter-spacing:-.015em}
.client-tabs{align-items:stretch;gap:4px 48px}
.client-tabs button{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 0 14px;opacity:.55;transition:opacity .2s var(--ease),border-color .2s var(--ease)}
.client-tabs button:hover{opacity:.85}
.client-tabs button[aria-pressed="true"]{opacity:1}
@media (max-width:600px){
  .specs h3 img{transform:scale(.88);transform-origin:left center}
}
/* v47. The fourth service's drawing: three people in outline and a fourth filled in beside them */
.s-pp{fill:none;stroke:var(--fg-2);stroke-width:2;stroke-linejoin:round}
@media (min-width:901px){
  #services{padding-bottom:64px}
  #services .grid2 li:nth-last-child(-n/**/+2){padding-bottom:16px}
}
@media (max-width:600px){
  .cmp-range{height:44px}
  .cmp-open{padding:13px 0}
  .ba.cmp .ba-cap{align-items:center}
  .about .lead2{text-wrap:balance}
  .about .lead2 .fields{display:inline}
  .sample.fold .sheet{max-height:330px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .sample-more{appearance:none;display:block;width:100%;min-height:48px;margin-top:12px;padding:0 16px;border:1px solid var(--fg-2);border-radius:6px;background:none;color:var(--fg);font:500 1rem/1.3 var(--sans);cursor:pointer}
  .sample-more:hover{border-color:var(--fg)}
}
/* ==========================================================================
   Review layer. Everything below is gated by a class on <html>: c-<id> turns on change <id> from changes.js.
   With every c- class removed the page renders exactly as styles.css alone.
   ========================================================================== */
[data-v][hidden]{display:none!important}
/* 1. The header tucks away while reading down, and comes back on any scroll up */
html:root .top{transition:transform .3s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease)}
html:root .top.tuck{transform:translateY(-110%)}
@media (prefers-reduced-motion:reduce){
  html:root .top{transition:none}
}
/* 3. Hero actions: two buttons of equal height, the second outlined */
html:root .hero .actions{gap:16px}
html:root .hero .actions .btn{min-width:220px;text-align:center}
html:root .hero .actions a:not(.btn){display:inline-block;min-width:220px;text-align:center;padding:16px 36px;border:2px solid var(--fg);border-radius:6px;font-weight:700;line-height:1.4;text-decoration:none;color:var(--fg);transition:background-color .2s var(--ease),color .2s var(--ease)}
html:root .hero .actions a:not(.btn):hover{background:var(--fg);color:var(--on-highlight)}
@media (max-width:600px){
  html:root .hero .actions{gap:12px}
  html:root .hero .actions .btn,html:root .hero .actions a:not(.btn){min-width:0}
  html:root .hero .actions a:not(.btn){padding:12px 24px;font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){
  html:root .hero .actions a:not(.btn){transition:none}
}
/* 6. Phone hero: starts under the header, with a larger headline and subhead */
@media (max-width:600px){
  html:root .hero{min-height:0;align-content:start;padding-top:32px;padding-bottom:44px}
  html:root .hero h1{font-size:min(14.5vw,4rem)}
  html:root .h1b{margin-top:20px;font-size:1.625rem;line-height:1.18}
  html:root .hero .lede{margin-top:24px}
}
/* 7. Phone hero: both actions full width */
@media (max-width:600px){
  html:root .hero .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  html:root .hero .actions .btn,html:root .hero .actions a:not(.btn){display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;text-align:center}
}
/* 8. The logo row stands still: one row on desktop, a two-column grid on phones */
/* 9. Name band: heading and sentence align left in the same columns */
@media (min-width:601px){
  html:root .name .sec > h2,html:root .name .sec > p{justify-self:start;text-align:left}
}
/* 10. Services: heading above, the 2x2 across all twelve columns, larger drawings */
@media (min-width:901px){
  html:root #services > h2{grid-column:1 / span 8;max-width:none}
  html:root #services > .body{grid-column:1 / -1}
  html:root #services .svc{width:160px;height:75px}
  html:root #services .svc-marks{gap:22px;padding-left:6px}
  html:root #services .svc-marks i{transform:scale(2.2)}
  html:root #services .grid2 p{max-width:34em}
}
/* 12. Selected work on desktop: a wider details track, and the slider runs into the right margin */
@media (min-width:901px){
  html:root .specs > article{grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:48px}
  html:root .specs > article > h3,html:root .specs > article > .what,html:root .specs > article > dl,html:root .specs > article > .cq{grid-column:1}
  html:root .specs > article > .ba{grid-column:2;margin-right:calc(-1 * clamp(0px,(100vw - 1232px) / 2,120px))}
}
/* 13. Phones: the same logo row as desktop picks one client at a time. No sideways swipe */
@media (max-width:600px){
  html:root .client-tabs{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;gap:0 12px}
  html:root .client-tabs button{min-height:56px;padding:6px 0 10px}
  html:root .client-tabs button{gap:6px;min-width:0}
  html:root .client-tabs button[aria-pressed="false"]{opacity:.75}
  html:root .client-tabs img{height:24px;width:auto}
  html:root .client-tabs button:nth-child(2) img{height:auto;width:100%;max-width:108px}
  html:root .client-tabs span{font-size:.875rem}
  html:root .specs{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  html:root .specs.tabbed > article:not(.on){display:none}
  html:root .specs.tabbed > article > h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html:root .dots{display:none}
}
/* 14. A bracketed quote slot under each client's details */
html:root .cq{margin:20px 0 0;border-top:1px solid var(--line);padding-top:16px;font-size:1.125rem;line-height:1.5;max-width:34em}
html:root .cq-q{font-style:italic;text-wrap:pretty}
html:root .cq-by{margin-top:10px;font-size:1rem;line-height:1.45;color:var(--fg-2)}
@media (min-width:901px){
  html:root .specs > article > .cq{grid-column:1 / span 5;align-self:start}
  html:root .specs.tabbed > article{grid-template-rows:auto auto 1fr}
  html:root .specs.tabbed > article > .ba{grid-row:1 / span 3}
  html:root .specs > article > .cq{grid-column:1}
}
/* 16. Desktop: numbered stops on the trail, 1, 2, 3, then a drawn loop for Repeat */
@media (min-width:901px){
  html:root .how .cycle{counter-reset:step}
  html:root .how .cycle li{counter-increment:step}
  html:root .how .cycle li::before,html:root .how .cycle li.again::before{content:counter(step);display:grid;place-items:center;position:absolute;z-index:1;width:30px;height:30px;left:-8px;top:-8px;border:0;border-radius:50%;background:var(--fg);color:#1a0609;font:700 15px/1 var(--sans);font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px var(--sec-dark)}
  html:root .how .cycle li.again::before{content:"";background:var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2320090c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10a6.5 6.5 0 1 1-2-4.7'/%3E%3Cpath d='M15 1.8v3.9h-3.9'/%3E%3C/svg%3E") center/16px 16px no-repeat}
}
/* 18. About on desktop: the heading starts the right column, beside the photo */
@media (min-width:901px){
  html:root .about > h2{grid-column:7 / -1;grid-row:1}
  html:root .about > .portrait{grid-row:1 / span 2}
  html:root .about > .body{grid-row:2;align-self:start}
}
/* 19. Phones: the four career facts stack in one column */
@media (max-width:600px){
  html:root .proof{grid-template-columns:minmax(0,1fr)}
  html:root .proof li{padding-bottom:18px}
}
/* 21. Rules start and end on the content edges */
html:root #clients{border-top:0;position:relative}
html:root #clients::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
html:root .foot .wrap{border-top:0;position:relative}
html:root .foot .wrap::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--bg-2-line)}
/* 22. Reading text at 16px or larger. 14px stays on labels and captions */
html:root .case .guard,html:root .proof li,html:root .standards span{font-size:1rem}
@media (max-width:600px){
  html:root .hero-kind{font-size:1rem}
}
/* 23. Good times to call: four cases, each a drawn mark, a bold lead, and a short muted line under a thin rule */
html:root .good{padding-bottom:88px}
@media (min-width:901px){
  html:root .good > h2{grid-column:1 / span 6}
}
html:root .good > .body{grid-column:1 / -1}
html:root .cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
html:root .cases li{display:grid;grid-template-rows:auto auto 1fr;align-content:start;border-top:1px solid var(--line);padding-top:22px}
html:root .cases .case-mark{width:112px;height:52px;margin-bottom:20px}
html:root .cases .dash{stroke-dasharray:4 4}
html:root .cases b{font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
html:root .cases span{margin-top:10px;font-size:1.0625rem;line-height:1.45;color:var(--fg-2);max-width:24em;text-wrap:pretty}
html:root #services{position:relative}
html:root #services::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
@media (max-width:900px) and (min-width:601px){
  html:root .cases{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
/* v61. Desktop: the four cases sit in a 2x2 with the same heading span, rules, drawing size, type, and spacing as Four ways to work together */
@media (min-width:901px){
  html:root .good > h2{grid-column:1 / span 8;max-width:none}
  html:root .cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter)}
  html:root .cases li{padding-top:22px;padding-bottom:40px;transition:border-color .3s var(--ease)}
  html:root .cases li:hover{border-top-color:var(--fg)}
  html:root .cases li:nth-last-child(-n/**/+2){padding-bottom:16px}
  html:root .cases .case-mark{width:160px;height:75px;margin-bottom:22px}
  html:root .cases b{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2}
  html:root .cases span{font-size:1.0625rem;line-height:1.5;max-width:34em}
}
@media (max-width:600px){
  html:root .good{padding-bottom:44px}
  html:root .cases{grid-template-columns:minmax(0,1fr)}
  html:root .cases li{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;padding:14px 0 16px}
  html:root .cases .case-mark{grid-row:1 / span 2;width:64px;height:30px;margin:4px 0 0}
  html:root .cases b{font-size:1.3125rem;line-height:1.2}
  html:root .cases span{margin-top:4px;font-size:1rem;line-height:1.4}
}
/* 24. The divider handle on each screenshot is the D monogram */
html:root .cmp-line::after{width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid #ecede4;background:#000 image-set(url("assets/d-monogram-96.png") 1x,url("assets/d-monogram-192.png") 2x) center/100% 100% no-repeat;box-shadow:0 6px 14px -4px rgba(0,0,0,.6)}
@media (min-width:901px){
  html:root .cmp-line::after{width:48px;height:48px;margin:-24px 0 0 -24px}
}
/* 28. Phones: the work caption stays on one line, so the three cards match at 300px */
@media (max-width:600px){
  html:root .ba.cmp .ba-cap{flex-wrap:nowrap;column-gap:6px}
  html:root .ba.cmp .ba-cap > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:root .ba.cmp .cmp-open{flex:none;white-space:nowrap}
}
/* 29 and 30. Phones: the process trail is drawn by script from the step positions. No dots, no straight trail */
.how-weave{position:absolute;left:0;top:0;max-width:none;overflow:visible;pointer-events:none;z-index:0}
.how-weave .tr{fill:none;stroke:var(--ink-curve);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.how-weave .ft{fill:var(--ink-step)}
/* Headings, three options (one at a time). Every section heading after the hero. The name band statement keeps its style */
/* 25. Option A: oversized, with a rule across the content width */
html:root main > .sec > h2,html:root .how .sec > h2,html:root .ai .sec > h2,html:root .contact .sec > h2{grid-column:1 / -1;max-width:none;padding-top:28px;border-top:2px solid var(--fg);font-size:clamp(3rem,7.4vw,6rem);line-height:.98;letter-spacing:-.04em}
@media (min-width:901px){
  html:root .about > .portrait,html:root .about > .body{grid-row:2}
}
html:root #services > h2{grid-column:1 / -1}
html:root #services::before,html:root #clients::before{display:none}
html:root #clients{border-top-color:transparent}
@media (min-width:901px){
  html:root .contact .sec > .actions{grid-row:2}
  html:root .contact .sec > .body{grid-row:2 / span 2}
}
@media (max-width:600px){
  html:root main > .sec > h2,html:root .how .sec > h2,html:root .ai .sec > h2,html:root .contact .sec > h2{padding-top:18px;font-size:3rem}
}
/* 31. Phone header: menu button left, wordmark centered, "Book a call" right from the first screen */
@media (max-width:600px){
  html:root .top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:8px}
  html:root .top .menu-btn{grid-column:1;grid-row:1;justify-self:start;margin:0 0 0 -11px}
  html:root .top .logo{grid-column:2;grid-row:1;margin:0;width:112px;height:20px}
  html:root .top .logo img{width:122.5px;left:-6px;top:-9.5px}
  html:root .top .top-cta{grid-column:3;grid-row:1;justify-self:end;position:relative;min-height:34px;padding:0 14px;font-size:.875rem;line-height:1;opacity:1;visibility:visible}
  html:root .top .top-cta::after{content:"";position:absolute;inset:-5px -4px}
}
/* 33 to 35. Emphasis on "before" in the new supporting line (pick one). The span exists only with change 32 */
html:root .hero .lede .before{font-style:italic;font-weight:700}
/* 36. Without the Penn note, the panel's rows share the extra height on desktop, so the button sits under the last row */
@media (min-width:901px){
  html:root .offer .gets{flex:1 1 auto;align-content:space-between}
}
/* Headings, three more options in the same pick-one group, each a cleaner take on a trail under the heading.
   --hd-trail and --hd-feet set the colour of all three */
:root{--hd-trail:rgba(168,112,90,.42);--hd-mark:rgba(168,112,90,.62);--hd-feet:#2e1513}
/* on the moss process band the marks take the dark trail colour of the process trail beside them */
.how{--hd-trail:var(--ink-curve);--hd-mark:var(--ink-step)}
/* 41. A booking button closes Good times to call, sized like the hero's main button. Full width on phones */
html:root .good-cta{margin-top:44px}
html:root .good-cta .btn{font-size:1.25rem;line-height:1.4;padding:18px 38px}
@media (max-width:600px){
  html:root .good-cta{margin-top:24px}
  html:root .good-cta .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 24px;font-size:1.0625rem}
}
/* 42. Desktop: the process trail is a closed loop drawn by script. The rising trail is hidden, the steps move in 36px from each side so the loop's sides run clear of the text, and the band gets room for the return run */
.how-loop{position:absolute;left:0;top:0;max-width:none;overflow:visible;pointer-events:none}
/* Review markers: one numbered dot per change, shown only with show-marks */
#dp-marks{position:absolute;left:0;top:0;width:0;height:0;z-index:20}
html:not(.show-marks) #dp-marks{display:none}
.dp-mark{position:absolute;display:grid;place-items:center;width:28px;height:28px;padding:0;border:2px solid #1a0609;border-radius:50%;background:#e0ac2b;color:#1a0609;font:700 13px/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:0 4px 10px -4px rgba(0,0,0,.8)}
.dp-mark[data-scope="mobile"],.dp-mark[data-scope="desktop"]{background:#ecede4}
.dp-mark:hover{background:#1a0609;color:#ecede4;border-color:#ecede4}
.dp-mark:focus-visible{outline:2px solid #ecede4;outline-offset:2px}
.dp-mark.lit{outline:3px solid #ecede4;outline-offset:3px}
.dp-mark[hidden]{display:none}
/* 32 on phones: "before" starts its own line so the emphasis leads the second line, as on desktop */
@media (max-width:600px){
  html:root .hero .lede p.l2{display:block}
}
/* 31 on phones: the header button reads "Book"; screen readers still hear "Book a call" */
.top-cta .cta-short{display:none}
@media (max-width:600px){
  html:root .top .top-cta .cta-full{display:none}
  html:root .top .top-cta .cta-short{display:inline}
}
/* 43: a LinkedIn link at the foot of the phone menu */
.menu-social{margin:auto 0 0}
.menu-social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-8px;color:var(--fg);border-radius:6px}
.menu-social a:hover{color:var(--highlight)}
.menu-social .li-bg{fill:currentColor}
.menu-social .li-fg{fill:var(--bg)}
/* 45. Phones: the hero gets room to breathe. A slightly smaller headline with air at the edges, more space between each block, the two buttons side by side at a normal height, and "products & AI" kept on one line */
@media (max-width:600px){
  html:root .hero{padding-top:44px;padding-bottom:28px}
  html:root .hero h1{font-size:3.125rem;line-height:1.02}
  html:root .hero .h1b{margin-top:26px;font-size:1.5rem;line-height:1.25}
  html:root .hero .lede{margin-top:30px}
  html:root .hero .lede p{line-height:1.5}
  html:root .hero .actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:36px}
  html:root .hero .actions .btn,html:root .hero .actions a:not(.btn){display:flex;align-items:center;justify-content:center;justify-self:stretch;width:100%;min-height:50px;margin:0;padding:0 12px;font-size:1rem;line-height:1.2;text-align:center;white-space:nowrap}
  html:root .hero-kind{margin-top:32px}
}
/* 46. Phones: the descriptor line under the hero buttons is hidden, so the hero ends on the buttons. It stays on tablets and desktop, and in the page title and link previews */
@media (max-width:600px){
  html:root .hero-kind{display:none}
}
/* 47. Footprints make the trail. The solid bands fade to a faint tint and larger clay shoe prints walk along them, in the hero, the name band, and the contact band's corner. The process trail keeps its clay line */
.steps-g2,.steps2{display:none}
/* 48. Phones and tablets: each step sits inside a bend of the trail. Steps are inset from both sides so the bends run clear of the text, and the gaps leave room for the runs between steps */
@media (max-width:900px){
  html:root .how .body{position:relative}
  html:root .how .cycle li::before,html:root .how .cycle li::after{content:none}
  html:root .how .cycle{position:relative;z-index:1;display:grid;gap:56px;padding:40px 0 44px}
  html:root .how .cycle li,html:root .how .cycle li:first-child{display:block;padding:0 30px;width:auto;margin-left:0}
  html:root .how .cycle li p{margin-top:6px;max-width:40em}
}
@media (min-width:601px) and (max-width:900px){
  html:root .how .cycle li,html:root .how .cycle li:first-child{padding:0 44px}
}
/* 49. Desktop: the loop is implied. Same layout as the closed loop, with the run back under the steps faded out */
/* 50. Worn band. Each trail is a filled band with uneven edges, wider in the middle and narrower at the ends, in its usual colour. The footprints are larger and lighter than the band, pressed into it */
:root{--print-light:#d3a891}
/* 51. Option G: oversized and inverse. The oversized headings sit on an off-white block with maroon-black text, as wide as the longest line. The block replaces the rule above */
/* 52. Desktop: the process trail runs from the left edge of the screen to the right edge in a nearly straight rising line through the four steps. The drawn climb is hidden and the script draws the line from where the steps sit */
@media (min-width:901px){
  html:root .how .how-climb{display:none}
  html:root .how .body{position:relative}
  html:root .how{overflow-x:clip}
}
/* v62. Comparison slider: the round handle (the D monogram with change 24) fades out when the slider is all the way left or right, so it never covers the image, and comes back for every position in between */
.cmp-line::after{transition:opacity .2s var(--ease)}
.cmp-frame.at-end .cmp-line::after{opacity:0}
@media (prefers-reduced-motion:reduce){
  .cmp-line::after{transition:none}
}
/* 53. Phones: the hero has one action. See the work is hidden and Book a call runs full width at 50px tall */
@media (max-width:600px){
  html:root .hero .actions a:not(.btn){display:none}
  html:root .hero .actions{display:block}
  html:root .hero .actions .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin:0;padding:0 24px;font-size:1.0625rem;line-height:1.35}
}
/* 54, continued: on the narrowest phones the header button tightens so Talk to Karl clears the wordmark */
@media (max-width:374px){
  html:root:root .top .top-cta{padding:0 10px;font-size:.8125rem}
}
/* 56. When to bring me in sits on the warm maroon band, full width, so it reads as a different kind of section from Four ways to work together below it */
html:root .good{position:relative;background:var(--bg-2);box-shadow:0 0 0 100vmax var(--bg-2);clip-path:inset(0 -100vmax);--line:var(--bg-2-line);--line-strong:var(--fg-2)}
html:root:root #services::before{display:none}
/* 57. Desktop: the four cases are rows, one per line: the drawing, the bold lead, and the muted line side by side under a thin rule. Four ways to work together keeps its 2x2 grid */
@media (min-width:901px){
  html:root .cases{grid-template-columns:minmax(0,1fr);gap:0}
  html:root .cases li,html:root .cases li:nth-last-child(-n/**/+2){display:grid;grid-template-columns:112px minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto;align-items:center;column-gap:var(--gutter);padding:22px 0}
  html:root .cases li:last-child{border-bottom:1px solid var(--line)}
  html:root .cases .case-mark{width:96px;height:45px;margin:0}
  html:root .cases b{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15}
  html:root .cases span{margin:0;font-size:1.125rem;line-height:1.45;max-width:30em}
}
/* 59. Before and After sit just above the image on either side of the divider, each with an arrow pointing to its side, joined to the divider by a short tick. They move with the slider and step aside when their side gets too narrow. Nothing sits on the image */
html:root .cmp-lbl{display:block;position:relative;height:1.5em;margin-bottom:8px}
html:root .cmp-lbl span{position:absolute;top:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:opacity .15s var(--ease)}
html:root .cmp-lbl span:first-child{left:var(--bx,0)}
html:root .cmp-lbl span:last-child{left:var(--ax,auto)}
html:root .cmp-lbl span:first-child::before,html:root .cmp-lbl span:last-child::after{content:"";width:16px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M15 6H2M6.5 1.5 2 6l4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M15 6H2M6.5 1.5 2 6l4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html:root .cmp-lbl span:last-child::after{transform:scaleX(-1)}
html:root .cmp-lbl::after{content:"";position:absolute;left:calc(var(--x,50%) - 1px);top:2px;bottom:-8px;width:2px;background:currentColor;opacity:.55}
html:root .cmp-lbl.b-off span:first-child,html:root .cmp-lbl.a-off span:last-child{opacity:0}
@media (prefers-reduced-motion:reduce){
  html:root .cmp-lbl span{transition:none}
}
/* v63. Tablets (601 to 900px): the name band keeps the desktop arrangement, the drawing on the left and the statement beside it */
@media (min-width:601px) and (max-width:900px){
  .corner-fig{position:absolute;top:50%;left:var(--gutter);transform:translateY(-50%);width:44%;max-width:none;margin:0}
  .name .sec{min-height:440px;align-content:center;padding-top:64px;padding-bottom:64px}
  .name .sec > h2,.name .sec > p{grid-column:7 / -1;justify-self:start;text-align:left}
  .name .sec > h2{font-size:clamp(1.75rem,4.2vw,2.25rem)}
  .name .sec > p{font-size:1.125rem}
}
/* 63. Paper bands. The dark ground stays, and the warm brown bands (When to bring me in, AI evaluation, Let's connect) and the footer become warm paper with maroon-black text, so the page alternates dark, moss, and paper. Works with the current, darker, or near-black ground */
html:root .band,html:root:root .good,html:root .foot{--bg:#ecede4; --fg:#1a0609; --fg-2:#5f4b48; --line:#d3c6ba; --line-strong:#8a7673;
  --bg-2:#efe7dd; --bg-2-line:#d3c6ba; --bg-2-curve:#e5d9cc; --ink-curve:#e7dbcf; --action:#1a0609;
  background:var(--bg-2);color:var(--fg)}
html:root .band,html:root:root .good{--line:var(--bg-2-line);--line-strong:var(--fg-2)}
html:root .foot{color:var(--fg-2)}
html:root .band .btn,html:root:root .good .btn{background:#1a0609;color:#ecede4;box-shadow:0 8px 18px -12px rgba(26,6,9,.6)}
html:root .band .btn:hover,html:root:root .good .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html:root .band .msg.ai{color:#ecede4;--fg:#ecede4;--fg-2:#d6d4cb}
html:root .band .sheet{box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(26,6,9,.35)}
html:root .band ::selection{background:var(--highlight);color:var(--on-highlight)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:root .hero .trail .steps-g2{display:inline;fill:var(--trail)}
html:root .corner-lg .worn,html:root .corner-end .worn{stroke:none}
html:root .corner-lg .steps2,html:root .corner-end .steps2{display:inline;fill:var(--trail)}
html:root .how-trail,html:root .how-weave .tr{stroke:none}
html:root .how-feet,html:root .how-weave .ft{fill:var(--trail)}
/* 65, 66, 67. A simpler AI evaluation section: a one-line lede, the example cut to a short message and reply, the five verdicts as one row of marks with the split, two contrasting quotes, a three-item offer, and the disclaimer once. 65 keeps the sample readout behind a button, 66 shows it as a thumbnail, 67 leads with the result and tucks the chat behind a button */
.ai2{display:none}
html:root .ai .ai2{display:block}
.ai .ai2-lede{font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.4;font-weight:500;max-width:30ch;margin-bottom:40px;text-wrap:balance}
.ai2-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px calc(var(--gutter) * 2);align-items:start}
.ai2-case{margin:0;display:flex;flex-direction:column;gap:14px}
.ai2-chat{display:grid;gap:12px}
.ai2-chat .msg{max-width:none}
.ai2-chat .msg.ai{margin-left:12%}
.ai2-verdict{border-top:1px solid var(--line);padding-top:18px;margin-top:8px}
.ai2-verdict .q{font-size:1.125rem;line-height:1.35;font-weight:700}
.ai2-marks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}
.ai2-marks li{display:grid;justify-items:center;gap:6px;text-align:center}
.vm{display:block;width:28px;height:28px;color:var(--fg)}
.ai2-marks .lab{font-size:.875rem;line-height:1.35;color:var(--fg-2)}
.ai2-split{margin-top:16px}
.ai2-split b{display:inline-block;padding:.12em .4em .16em;background:var(--highlight);color:var(--on-highlight);font-size:1.0625rem;line-height:1.35}
.ai2-quotes{display:grid;gap:10px;margin-top:6px}
.ai2-quotes li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:1.0625rem;line-height:1.45}
.ai2-quotes .vm{width:20px;height:20px;margin-top:2px}
.ai2-quotes b{font-weight:700;margin-right:4px}
.ai2-close{font-size:1.0625rem;line-height:1.45;color:var(--fg-2);margin-top:4px}
.ai2-offer h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.ai2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.ai2-sample-btn,.ai2-chat-btn{appearance:none;border:0;background:none;padding:10px 0;min-height:44px;color:var(--fg);font:500 1rem/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--line-strong);cursor:pointer;justify-self:start;text-align:left}
.ai2-sample-btn:hover,.ai2-chat-btn:hover{text-decoration-color:currentColor}
.ai2-sample{display:none;margin-top:24px}
.ai2-sample.open{display:block}
.ai2-sample .sheet{max-height:none;-webkit-mask-image:none;mask-image:none}
.ai2-guard{margin-top:20px;font-size:.9375rem;line-height:1.45;color:var(--fg-2)}
/* 66: the readout shows as a thumbnail above the button, the top of the page in miniature, and opens in full */
html:root .ai2-sample{display:block;position:relative;height:210px;overflow:hidden;border-radius:12px;cursor:pointer}
html:root .ai2-sample .sheet{width:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none}
html:root .ai2-sample::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--bg-2))}
html:root .ai2-sample.open{height:auto;cursor:default}
html:root .ai2-sample.open .sheet{width:auto;transform:none;pointer-events:auto}
html:root .ai2-sample.open::after{display:none}
/* 67: result first. The question and marks lead, then the quotes, and the chat waits behind a button */
@media (max-width:900px){
  .ai2-grid{grid-template-columns:minmax(0,1fr)}
  .ai2-lede{margin-bottom:28px}
}
@media (max-width:600px){
  .ai2-chat .msg.ai{margin-left:8%}
  .ai2-marks{gap:4px}
  .ai2-marks .lab{font-size:.8125rem}
  .vm{width:24px;height:24px}
  .ai2-actions .btn{flex:1 1 100%;text-align:center;display:flex;align-items:center;justify-content:center;min-height:50px}
}
/* 90 (accepted). Four ways to work together sits after the desire path band, in the markup. Main stays a column, as reviewed */
html:root main{display:flex;flex-direction:column}
/* 78 (accepted). The client switcher in Selected work looks like a row of buttons: each client sits in its own outlined box, the chosen one with a solid outline and a raised ground, so it reads as something to press */
html:root .client-tabs{border-bottom:0;gap:12px;align-items:stretch}
html:root .client-tabs button{border:1px solid var(--line);border-radius:6px;padding:10px 18px;margin:0;min-height:60px;opacity:.72;background:none;transition:opacity .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
html:root .client-tabs button:hover{opacity:1;border-color:var(--line-strong)}
html:root .client-tabs button[aria-pressed="true"]{opacity:1;border:1.5px solid var(--fg);background:rgba(236,237,228,.07)}
@media (max-width:600px){
  html:root .client-tabs{gap:8px}
  html:root:root .client-tabs button{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:8px 4px;min-height:56px;overflow:hidden}
  html:root:root .client-tabs img{height:auto;width:auto;max-height:20px;max-width:100%}
  html:root:root .client-tabs button:nth-child(2) img{max-height:14px}
  html:root:root .client-tabs span{font-size:min(.75rem,3vw);line-height:1.3;white-space:nowrap}
}
/* 96 (accepted). The note under the contact button */
html:root .contact .call-list{display:grid;gap:6px;flex-basis:100%;margin:0;padding:0;list-style:none;font-size:1rem;line-height:1.45}
html:root .contact .call-list li{position:relative;padding-left:20px}
html:root .contact .call-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--fg-2)}
/* Oct 11. Phones: the Sherwood Square phone screens show larger. The stage is taller when its frame is a portrait phone */
@media (max-width:600px){
  html:root .cmp-stage:has(> .cmp-frame.portrait){aspect-ratio:1.1}
}
/* 102 (accepted). Phones: the client line and details come straight after the switcher, so the client name is still in view, and the before and after follows */
@media (max-width:600px){
  html:root .specs.tabbed > article.on{display:flex;flex-direction:column}
  html:root .specs > article > .what{order:1;margin-top:4px;margin-bottom:12px}
  html:root .specs > article > dl{order:2}
  html:root .specs > article > .ba{order:3;margin-top:24px}
  html:root .specs > article > .cq{order:4}
}
/* 110 (accepted). Phones: the word MENU is the top line of the menu icon, with the two bars below it at the same width. Open, it reads CLOSE over an X */
@media (max-width:740px){
  html:root .top .menu-btn{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;width:auto;height:44px;padding:0 11px}
  html:root .menu-lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto;order:-1;font:700 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:center}
  html:root .menu-btn .icon{width:100%;height:9px}
  html:root .menu-btn .bar{width:100%}
  html:root .menu-btn .bar:last-child{transform:none}
  html:root .menu-btn[aria-expanded="true"] .bar:first-child{transform-origin:center;transform:translateY(3.5px) rotate(45deg) scaleX(.42)}
  html:root .menu-btn[aria-expanded="true"] .bar:last-child{transform-origin:center;transform:translateY(-3.5px) rotate(-45deg) scaleX(.42)}
  html:root .menu-btn[aria-expanded="true"] .menu-lbl{letter-spacing:.04em}
}
/* 112 (accepted). AI evaluation: the heading introduces the sample readout, which sits right under it */
html:root .ai2-sample{margin-top:20px;height:300px}
@media (min-width:901px){
  html:root .ai2-sample{height:460px}
  html:root .ai2-sample .sheet{width:142.857%;transform:scale(.7)}
  html:root .ai2-sample.open .sheet{width:auto;transform:none}
}
/* Oct 11. Each client's site link sits under its one-line description, in place of a Site row */
.specs .what .what-site{display:block;width:max-content;margin-top:6px;font-size:1rem;line-height:1.4;font-weight:400;letter-spacing:0;color:var(--fg-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.specs .what .what-site:hover{color:var(--fg)}
@media (max-width:600px){
  .specs .what .what-site{padding:6px 0}
}
/* Oct 11. FAQs: four questions in a 2x2, every answer shown, at reading size */
.faq > .body{grid-column:1 / -1}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);margin:0;padding:0;list-style:none}
.faq-grid li{border-top:1px solid var(--line);padding:24px 0 40px}
.faq-grid h3{font-size:clamp(1.375rem,1.9vw,1.75rem);line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--fg);max-width:24ch;text-wrap:balance}
.faq-grid p{margin:12px 0 0;font-size:1.125rem;line-height:1.55;color:var(--fg-2);max-width:52ch;text-wrap:pretty}
.faq-grid .nw{white-space:nowrap}
@media (max-width:740px){
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-grid li{padding:20px 0 28px}
}
/* 113 (accepted). Typical length under each process step name */
html:root .cycle h3 .dur{display:inline;margin-left:.2em;font-size:max(1rem,.6em);line-height:1.4;font-weight:500;letter-spacing:0;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 114 (accepted). The fields line sits in the AI evaluation opening: into the AI evaluation opening, or under When to bring me in */
html:root .ai2-fields{display:block;margin:-12px 0 32px;max-width:40em;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
/* Oct 11. The smallest phones: the slider caption wraps instead of cutting off */
@media (max-width:360px){html:root .ba.cmp .ba-cap > span{white-space:normal;overflow:visible}}
/* Oct 11. Touch: header links get a 44px tall tap area without changing the layout */
.top .logo,.top .nav a,.top .top-cta{position:relative}
.top .logo::after,.top .nav a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
html:root .top .top-cta::after,.top .top-cta::after{content:"";position:absolute;inset:auto -4px;top:50%;height:44px;transform:translateY(-50%)}
.top .logo{overflow:visible}
/* Oct 11. AI evaluation: the two intro lines sit together, and the invented example is its own card */
html:root .ai .ai2-lede{margin-bottom:12px}
html:root .ai2-fields{margin:0 0 40px;max-width:44ch;font-size:1.0625rem;line-height:1.5}
html:root .ai2-case{background:#e7ddd0;border:1px solid var(--line);border-radius:16px;padding:28px 28px 30px;gap:16px}
html:root .ai2-case .case-label{margin:0;font-size:.875rem;line-height:1.4;color:var(--fg-2)}
html:root .ai2-case .ai2-verdict{border-top-color:rgba(26,6,9,.14)}
@media (max-width:900px){html:root .ai2-fields{margin-bottom:32px}}
@media (max-width:600px){
  html:root .ai2-case{padding:18px 16px 20px;border-radius:14px;gap:14px}
  html:root .ai2-fields{margin-bottom:28px}
}
/* Oct 12. Client results as a short list of what changed */
.specs dd .res{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.specs dd .res li{position:relative;padding-left:16px}
.specs dd .res li::before{content:"";position:absolute;left:1px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
/* Oct 12. AI evaluation: a cited figure under the opening line */
html:root .ai2-stat{margin:0 0 10px;max-width:44ch;font-size:1.0625rem;line-height:1.5;color:var(--fg)}
html:root .ai2-stat a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
html:root .ai2-stat a:hover{color:var(--ink-2)}
html:root .ai2-stat a{white-space:nowrap}
/* 132 and 133 (accepted). Hero: the pressure-test sentence is the headline, set smaller than the old three-word line because it runs longer.
   The subhead finishes the sentence, with "before" in the headline colour. The trail now rises from "human judgment" */
html:root .hero h1{font-size:clamp(2.75rem,5.2vw,4.75rem);line-height:1.02;letter-spacing:-.03em;max-width:none}
html:root .hero .h1a{display:block;max-width:12em;text-wrap:balance}
html:root .hero .trail{left:calc(100% - .5em);bottom:0}
@media (min-width:521px){
  html:root .hero .trail{-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 96%);mask-image:linear-gradient(to right,#000 45%,transparent 96%)}
}
html:root .hero h1 .hl{white-space:nowrap}
html:root .hero .h1b{margin-top:.55em;max-width:23em;font-size:clamp(1.5rem,2.9vw,2.5rem);line-height:1.15}
html:root .hero .h1b .before{color:var(--fg);font-style:italic;font-weight:700;margin:0;font-size:inherit;letter-spacing:inherit;line-height:inherit}
html:root .hero .actions{margin-top:44px}
@media (max-width:600px){
  html:root .hero h1{font-size:min(10.6vw,2.75rem);line-height:1.06}
  html:root .hero .h1b{margin-top:22px;font-size:min(6.4vw,1.5rem);line-height:1.25}
  html:root .hero .actions{margin-top:36px}
}
/* 135 and 139 (accepted). Phones: three highlighted words do not fit one line, so the highlight wraps and each line keeps its own box. The trail still starts after the last word */
@media (max-width:600px){
  html:root .hero h1 .hl{display:inline;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  html:root .hero h1{line-height:1.16}
}
/* keeps short compounds like "50-person" on one line */
.nw{white-space:nowrap}
/* 147. Colour rhythm. Four ways to work together moves to the warm brown band, a half step up from the dark ground, so no two neighbours share a colour. The footer goes dark so Let's connect is the last paper band */
html.c-147 #services{position:relative;background:var(--bg-2);box-shadow:0 0 0 100vmax var(--bg-2);clip-path:inset(0 -100vmax);--line:var(--bg-2-line);--line-strong:var(--fg-2)}
html.c-147 .foot{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; background:#1a0609;color:var(--fg-2)}
/* 148. Softer paper: a deeper sand so the light bands sit closer to the dark ones */
html.c-148 .band,html.c-148:root .good,html.c-148 .foot{--bg-2:#e4d6c5; --bg-2-line:#cbb9a5; --bg-2-curve:#dccbb7; --ink-curve:#dccdbc}
html.c-148.c-147 .foot{--bg-2:#1a0609; --bg-2-line:#5c4747}
html.c-148:root .ai2-case{background:#ece3d7}
/* FAQs sit on the moss green of the desire path band, edge to edge, so they read as their own step between About and Let's connect */
html:root #faq{position:relative;background:var(--sec);color:var(--on-sec);--fg:var(--on-sec);--fg-2:var(--on-sec-2);--line:var(--sec-line);--line-strong:var(--on-sec-2);box-shadow:0 0 0 100vmax var(--sec);clip-path:inset(0 -100vmax)}
/* Four ways to work together follows the logo strip on the same dark ground, so it needs less space above its rule than a section that starts a new band */
html:root #services{padding-top:44px}
@media (max-width:900px){html:root #services{padding-top:24px}}
@media (max-width:600px){html:root #services{padding-top:16px}}
/* with 147 the services sit on their own brown band, so the band gets inner room above the rule */
html.c-147 #services{padding-top:80px}
@media (max-width:900px){html.c-147 #services{padding-top:56px}}
@media (max-width:600px){html.c-147 #services{padding-top:44px}}

/* Oct 13. Phones: the Work and Results labels take a narrow column so the copy beside them runs wider and shorter, and the spacing around the details tightens, so the client buttons and the comparison slider share one iPhone 15 screen */
@media (max-width:600px){
  html:root .specs dl{grid-template-columns:60px minmax(0,1fr);column-gap:12px}
  html:root .specs dt{padding-top:10px;padding-bottom:8px}
  html:root .specs dd{padding-top:8px;padding-bottom:8px}
  html:root .specs dd .res{gap:4px}
  html:root .specs.tabbed{margin-top:0}
  html:root .specs > article > .what{margin-top:0}
  html:root .specs > article > .ba{margin-top:12px}
}
/* 149. Phones: the Sherwood Square slider uses the same short stage as the other clients */
@media (max-width:600px){
  html.c-149:root .cmp-stage:has(> .cmp-frame.portrait){aspect-ratio:1.86}
}
/* 150. Phones: the slider sits right under the client buttons, with the details below it */
@media (max-width:600px){
  html.c-150:root .specs > article > .ba{order:0;margin-top:0;margin-bottom:16px}
}

/* 151 and 152 (pick one). Hero: the highlight covers only "human judgment". 151 keeps "real" outside the highlight, 152 drops it. On tablets and desktop the headline breaks after "Pressure-test" so "& AI" stays with "products" */
.hero .hbr,.hero .r-out{display:none}
@media (min-width:601px){
  html.c-151 .hero .hbr,html.c-152 .hero .hbr{display:inline}
}
html.c-151 .hero .r-out{display:inline}
html.c-151 .hero .r-in,html.c-152 .hero .r-in{display:none}
html.c-151 .hero .hl,html.c-152 .hero .hl{white-space:nowrap}
/* Oct 15: "real" stays on the line with "against" and only the highlight is unbreakable, so the gold box drops to its own line without taking "real" with it */
html.c-151 .hero .rj{white-space:normal}
html.c-151:root .hero .hl,html.c-152:root .hero .hl{white-space:nowrap}
@media (min-width:601px){
  html:root .hero .hbr{display:inline}
}

/* Oct 13. Logo row: the same space between every pair of logos, including where the loop starts over. On phones the logos shrink with zoom, which also shrinks the space they take up, so no empty space is left beside the wider logos */
@media (max-width:600px){
  html:root .logo-row img{transform:none;zoom:.85}
}

/* 153 and 154 (pick one). How a project works in a new order: evaluate, iterate on what the review found, test the changes, repeat. 153 keeps readouts inside Test. 154 moves them into Repeat */
.cycle .v153,.cycle .v154{display:none}
html.c-153 .cycle .v0,html.c-154 .cycle .v0{display:none}
html.c-153 .cycle .v153,html.c-154 .cycle .v154{display:inline}



/* 156. Five cases: tablets drop the 2x2 grid for one list, so the fifth case does not sit alone. Desktop and phones are already lists */
@media (max-width:900px) and (min-width:601px){
  html:root.c-156 .cases{grid-template-columns:minmax(0,1fr);gap:0}
  html:root.c-156 .cases li{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;padding:18px 0 20px}
  html:root.c-156 .cases li:last-child{border-bottom:1px solid var(--line)}
  html:root.c-156 .cases .case-mark{grid-row:1 / span 2;width:96px;height:45px;margin:2px 0 0}
  html:root.c-156 .cases span{margin-top:6px}
}


/* 160. Four ways to work together on paper, edge to edge, with a dark footer. Pick-one with 147 (brown services) */
html.c-160 #services{--bg:#ecede4; --fg:#1a0609; --fg-2:#5f4b48; --line:#d3c6ba; --line-strong:#8a7673;
  --bg-2:#efe7dd; --bg-2-line:#d3c6ba; --bg-2-curve:#e5d9cc; --ink-curve:#e7dbcf; --action:#1a0609;
  position:relative;background:var(--bg-2);color:var(--fg);box-shadow:0 0 0 100vmax var(--bg-2);clip-path:inset(0 -100vmax);padding-top:80px}
html.c-160 #services .btn{background:#1a0609;color:#ecede4}
html.c-148.c-160 #services{--bg-2:#e4d6c5; --bg-2-line:#cbb9a5; --line:#cbb9a5; --bg-2-curve:#dccbb7; --ink-curve:#dccdbc}
html.c-160 .foot{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; background:#1a0609;color:var(--fg-2)}
html.c-148.c-160 .foot{--bg-2:#1a0609; --bg-2-line:#5c4747}
@media (max-width:900px){html.c-160 #services{padding-top:56px}}
@media (max-width:600px){html.c-160 #services{padding-top:44px}}

.s-no{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.case-mark .s-ln{stroke-linejoin:round;stroke-linecap:round}
/* 163. Hero: the clay band behind the footprints goes away, and the footprints stay */
html.c-163 .hero .trail > path{stroke:transparent}

/* 156. The fifth case drawing: a dollar sign inside a no sign */
.s-cash{fill:none;stroke:var(--fg);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* Oct 14. Name band alignment: the drawing's viewBox is cropped to the sidewalk, so the slabs start on the same left edge as the text column. The trail label sits on that edge, just above where the trail leaves the sidewalk */
html:root .lbl-trail{left:0;top:auto;bottom:calc(30px + .23 * (100% - 30px))}
html:root .lbl-walk{margin:10px 0 0}
/* Oct 14. "Won't pay" case icon: the crossed-out dollar, centred in the icon box at full height, with line weights close to the other case icons */
.case-mark .s-no.nopay{stroke-width:2.5}
.case-mark .s-cash.nopay{stroke-width:.95}
/* Oct 14. Two kinds of panel study, under the readout heading */
.ai2-kinds{margin:20px 0 0;display:grid;gap:14px;max-width:46ch}
.ai2-kinds > div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 16px;padding-top:14px;border-top:1px solid var(--line)}
.ai2-kinds dt{font-weight:700;font-size:1.0625rem;line-height:1.45;color:var(--fg)}
.ai2-kinds dd{margin:0;font-size:1rem;line-height:1.45;color:var(--fg-2)}
@media (max-width:480px){.ai2-kinds > div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* Oct 14. "The desire path" label sits over the middle of the trail, centred on a point in the drawing's own units, so it keeps the same place and clearance at every width. 1cqw is 1% of the drawing's width */
.corner-fig{container-type:inline-size}
html:root .corner-fig .lbl-trail{left:calc((180 - 30) / 4.25 * 1cqw);top:calc((140 - 33) / 4.25 * 1cqw);bottom:auto;width:max-content;transform:translate(-50%,-50%)}
html:root .corner-fig .lbl-trail b{font-size:clamp(1.125rem,5.6cqw,1.5rem);letter-spacing:-.015em}
/* Oct 14. Selected work: the caption names what the images show, right under them and above the slider */
html:root .ba.cmp .ba-cap{margin:12px 0 4px}
html:root .ba.cmp .ba-cap > span{color:var(--fg);font-weight:600}
/* Oct 14. Selected work: the before/after panel stays inside the page column on wide screens (it used to bleed up to 120px past the right edge) */
@media (min-width:901px){html:root:root .specs > article > .ba{margin-right:0}}
/* Oct 14. AI evaluation: Karl's own track record, right under the lede */
.ai2-own{margin:6px 0 18px;max-width:44ch;font-size:1.0625rem;line-height:1.5;color:var(--fg);font-weight:500}
/* Oct 14. When to bring me in, compact layouts (editor 176a with group headings, 176b without) */
.cases-split{display:none}
html.c-176a .cases-split,html.c-176b .cases-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--gutter) * 2);row-gap:28px}
html.c-176a .cases-orig,html.c-176b .cases-orig{display:none!important}
.cases-split h3{margin:0 0 12px;font-size:1.25rem;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
html.c-176b .cases-split h3{display:none}
html:root:root .cases-split .cases{display:block}
html:root:root .cases-split .cases li{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--line);border-bottom:0}
html:root:root .cases-split .cases li:last-child{border-bottom:1px solid var(--line)}
html:root:root .cases-split .cases .case-mark{grid-row:1 / span 2;width:80px;height:37px;margin:3px 0 0}
html:root:root .cases-split .cases b{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.2}
html:root:root .cases-split .cases span{margin-top:6px;font-size:1rem;line-height:1.45;max-width:34em}
@media (max-width:820px){html.c-176a .cases-split,html.c-176b .cases-split{grid-template-columns:minmax(0,1fr)}
  html:root:root .cases-split .cases li{grid-template-columns:64px minmax(0,1fr);column-gap:14px;padding:14px 0 16px}
  html:root:root .cases-split .cases .case-mark{width:64px;height:30px}
  html:root:root .cases-split .cases b{font-size:1.3125rem}}
/* Oct 14. Background rhythm options (editor 177a, 177b) */
html.c-177a:root #services{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177a:root #services .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177a:root #services .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177a:root #good-time{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177a:root #good-time .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177a:root #good-time .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177a:root #how{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177a:root #how .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177a:root #how .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177a:root #ai{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177a:root #ai .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177a:root #ai .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177a:root #faq{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177a:root #faq .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177a:root #faq .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177a:root .foot{--bg:#ecede4; --fg:#1a0609; --fg-2:#5f4b48; --line:#d3c6ba; --line-strong:#8a7673; --bg-2:#efe7dd; --bg-2-line:#d3c6ba; background:#efe7dd;color:#5f4b48}
html.c-177b:root #services{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177b:root #services .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177b:root #services .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177b:root #how{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177b:root #how .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177b:root #how .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177b:root #faq{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177b:root #faq .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177b:root #faq .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177b:root #contact{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609}
html.c-177b:root #contact .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-177b:root #contact .btn:hover{background:var(--highlight);color:var(--on-highlight)}
html.c-177b:root .foot{--bg:#1a0609; --fg:#ecede4; --fg-2:#bcb3af; --line:#5c4747; --line-strong:#867674; --bg-2:#1a0609; --bg-2-line:#5c4747; --bg-2-curve:#2b1114; --ink-curve:#492823; --action:#ecede4; --on-sec-dark-2:#bcb3af; --sec-line:#5c4747; background:#1a0609;color:#ecede4;box-shadow:none;color:#bcb3af}
/* Oct 14. When to bring me in: a walked line to launch (178a) or larger headings with an arrow (178b) */
.launch-line,.launch-arrow{display:none}
.cases-split{position:relative}
html.c-178a .cases-split .launch-line{display:block;grid-column:1 / -1;position:relative;margin:0 0 6px}
.launch-line svg{display:block;width:100%;height:auto}
.launch-line .ll-trail{fill:none;stroke:var(--trail);stroke-width:2;opacity:.45}
.launch-line .ll-feet{fill:var(--trail)}
.launch-line .ll-dot{fill:var(--fg)}
.launch-line span{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);font-size:1rem;line-height:1.2;font-weight:600;color:var(--fg)}
html.c-178a .cases-split{row-gap:20px}
html.c-178b .cases-split h3{font-size:1.5rem;letter-spacing:-.015em;margin-bottom:14px}
html.c-178b .cases-split .launch-arrow{display:block;position:absolute;left:50%;top:9px;width:28px;height:14px;transform:translateX(-50%);fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  html.c-178a .cases-split .launch-line{grid-row:2;margin:6px 0 22px}
  html.c-178a .cases-split .phase:nth-child(3){grid-row:1}
  html.c-178a .cases-split .phase:nth-child(4){grid-row:3}
  html.c-178b .cases-split .launch-arrow{display:none}
}
/* 177a: the AI example card keeps its paper fill, so it keeps paper text colors on the dark ground */
html.c-177a:root #ai .ai2-case{--bg:#ecede4; --fg:#1a0609; --fg-2:#5f4b48; --line:#d3c6ba; --line-strong:#8a7673; color:#1a0609}
/* 178a on phones: the footprints get too small to read, so the marker becomes a clay line with a dot and Launch in the middle */
@media (max-width:820px){
  html.c-178a .cases-split .launch-line{display:flex;align-items:center;gap:12px}
  html.c-178a .cases-split .launch-line svg{display:none}
  html.c-178a .cases-split .launch-line::before,html.c-178a .cases-split .launch-line::after{content:"";flex:1;height:2px;background:var(--trail);opacity:.6}
  html.c-178a .cases-split .launch-line span{position:static;transform:none;display:flex;align-items:center;gap:8px}
  html.c-178a .cases-split .launch-line span::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--fg)}
}
/* Oct 15. Committed from 178b: larger Before launch and After launch headings, no arrow */
html.c-176a .cases-split h3{font-size:1.5rem;letter-spacing:-.015em;margin-bottom:14px}

/* Oct 14. Hero subhead (editor variants 179a to 179d). The current line is the default, each variant swaps the text only */
.hero .h1b .v179a,.hero .h1b .v179b,.hero .h1b .v179c,.hero .h1b .v179d{display:none}
html.c-179a .hero .h1b .v0,html.c-179b .hero .h1b .v0,html.c-179c .hero .h1b .v0,html.c-179d .hero .h1b .v0{display:none}
html.c-179a .hero .h1b .v179a,html.c-179b .hero .h1b .v179b,html.c-179c .hero .h1b .v179c,html.c-179d .hero .h1b .v179d{display:inline}

/* Oct 15. Hero density (editor variants 180a, 180c). Both drop the services line from the hero, so the hero ends on the buttons */
html.c-180a .hero .hero-kind,html.c-180c .hero .hero-kind{display:none}
/* 180a: the buyer line heads the logo band, above Clients & partners, so the logos are the proof of it */
.logos-who{display:none}
html.c-180a .logos-who{display:block;grid-column:1 / -1;margin:0 0 6px;max-width:64ch;font-size:1.375rem;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--fg);text-wrap:balance}
@media (max-width:600px){
  html.c-180a .logos-who{font-size:1.1875rem;margin-bottom:2px}
}
/* 180c: one muted line under the buttons names the services and who they are for. Shown on phones too, since it is the only line that says who */
.hero-kind-180c{display:none}
html.c-180c .hero .hero-kind-180c{display:block;max-width:60ch}
@media (max-width:600px){
  html:root.c-180c .hero .hero-kind-180c{display:block;margin-top:24px;font-size:.9375rem;line-height:1.45}
}
/* 181. Footer: the services line sits between the copyright and the city, so the three service names stay on the page */
.foot .foot-kind{text-align:center}
@media (max-width:600px){
  .foot .foot-kind{flex-basis:100%;text-align:left;order:3}
}

/* Oct 15 (decided). Hero secondary button: on hover the stroke and text turn gold instead of filling white, so the two buttons never trade places */
html:root .hero .actions a:not(.btn){transition:border-color .2s var(--ease),color .2s var(--ease)}
html:root .hero .actions a:not(.btn):hover{background:transparent;border-color:var(--highlight);color:var(--highlight)}
/* 182. Hero primary button: gold by default, so the one action on the page is the one gold block in the hero. Hover goes to white, the reverse of today */
html.c-182 .hero .actions .btn{background:var(--highlight);color:var(--on-highlight);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 20px -10px rgba(0,0,0,.8)}
html.c-182 .hero .actions .btn:hover{background:var(--fg);color:var(--on-highlight)}

/* 174b. Fourth service: the no-hire point moves from the title to the subline. When 174b is on, the original title and subline step aside */
html.c-174b #services [data-c="174"][data-v="old"]{display:none}

/* 183. Headline names the three things the work is done on: apps, websites, & AI, in place of products & AI. "& AI" stays with "websites" */
.hero .hw183{display:none}
html.c-183 .hero .hw0{display:none}
html.c-183 .hero .hw183{display:inline}

/* 183 with 180a: the headline already names apps, websites, & AI, so the band line above the logos steps aside */
html.c-183.c-180a .logos-who{display:none}

/* Oct 16 (decided). How a project works sits on the same moss as the desire paths band, with the same text and line colors. The step badges' ring matches the new ground */
html:root .how{background:var(--sec);color:var(--on-sec);--fg:var(--on-sec);--fg-2:var(--on-sec-2);--line:var(--sec-line);--line-strong:var(--on-sec-2);--sec-dark:var(--sec);--on-sec-dark:var(--on-sec);--on-sec-dark-2:var(--on-sec-2);--sec-dark-line:var(--sec-line)}

/* 185a, 185b, 185c (pick one). Light ground: the page below the logo strip runs on a light paper, and the maroon black steps back to the opening (header, hero, logos), the buttons, and the footer. Moss bands stay moss. Three tints of paper to compare:
   185a warm paper (the tone the paper bands already use), 185b blush (paper with a trace of the maroon), 185c bone (paper with a trace of the moss) */
html.c-185a main,html.c-185b main,html.c-185c main{color-scheme:light;background:var(--bg);color:var(--fg);--fg:#1a0609;--action:#1a0609;--trail:hsl(37 62% 39%);--ink-step:#b98a74;--on-highlight:#1a0609}
html.c-185a main{--bg:#ecede4;--bg-2:#efe7dd;--fg-2:#5f4b48;--line:#d9cfc4;--line-strong:#8a7673;--bg-2-line:#d3c6ba;--bg-2-curve:#e5d9cc;--ink-curve:#e7dbcf}
html.c-185b main{--bg:#f8f1ef;--bg-2:#f0e4e1;--fg-2:#654a4b;--line:#dccccb;--line-strong:#8e7474;--bg-2-line:#d8c5c3;--bg-2-curve:#e8d8d5;--ink-curve:#ead9d6}
html.c-185c main{--bg:#f4f4ee;--bg-2:#e9eadf;--fg-2:#515a4d;--line:#d4d6c9;--line-strong:#798474;--bg-2-line:#c6d4c5;--bg-2-curve:#e0e2d4;--ink-curve:#e2e4d6}
/* the paper bands (When to bring me in, AI evaluation, Let's connect) sit one step down on the tint's sand, so the page still alternates */
html.c-185a:root main .band,html.c-185a:root main .good,html.c-185b:root main .band,html.c-185b:root main .good,html.c-185c:root main .band,html.c-185c:root main .good{--bg:inherit;background:var(--bg-2)}
html.c-185b:root main .band,html.c-185b:root main .good{--bg-2:#f0e4e1;--bg-2-line:#d8c5c3;--bg-2-curve:#e8d8d5;--ink-curve:#ead9d6;--fg-2:#654a4b;--line:#d8c5c3;--line-strong:#8e7474}
html.c-185c:root main .band,html.c-185c:root main .good{--bg-2:#e9eadf;--bg-2-line:#c6d4c5;--bg-2-curve:#e0e2d4;--ink-curve:#e2e4d6;--fg-2:#515a4d;--line:#c6d4c5;--line-strong:#798474}
/* buttons in the light sections are the dark accent */
html.c-185a:root main .btn,html.c-185b:root main .btn,html.c-185c:root main .btn{background:#1a0609;color:#ecede4;box-shadow:0 8px 18px -12px rgba(26,6,9,.6)}
html.c-185a:root main .btn:hover,html.c-185b:root main .btn:hover,html.c-185c:root main .btn:hover{background:var(--highlight);color:var(--on-highlight)}
/* the client logos are drawn for a dark ground: darkened here for the preview, swap in dark versions before launch */
html.c-185a main .specs h3 img,html.c-185b main .specs h3 img,html.c-185c main .specs h3 img,html.c-185a main .client-tabs img,html.c-185b main .client-tabs img,html.c-185c main .client-tabs img{filter:brightness(0) opacity(.88)}
/* moss bands keep their own colors on every tint */
html.c-185a main .name,html.c-185b main .name,html.c-185c main .name{--fg:var(--on-sec);--fg-2:var(--on-sec-2);--line:var(--sec-line);color:var(--on-sec)}
html.c-185a:root main .how,html.c-185b:root main .how,html.c-185c:root main .how{--fg:var(--on-sec);--fg-2:var(--on-sec-2);--line:var(--sec-line);--line-strong:var(--on-sec-2);--ink-curve:#492823;--ink-step:#2e1513;color:var(--on-sec)}
html.c-185a:root main .how .btn,html.c-185b:root main .how .btn,html.c-185c:root main .how .btn{background:#ecede4;color:#1a0609}
/* the footer returns to the dark */
html.c-185a:root .foot,html.c-185b:root .foot,html.c-185c:root .foot{--bg:#1a0609;--fg:#ecede4;--fg-2:#bcb3af;--line:#5c4747;--line-strong:#867674;--bg-2:#1a0609;--bg-2-line:#5c4747;background:#1a0609;color:var(--fg-2)}
/* the AI example's chat bubbles keep light text on moss */
html.c-185a:root main .msg.ai,html.c-185b:root main .msg.ai,html.c-185c:root main .msg.ai{color:#ecede4;--fg:#ecede4;--fg-2:#d6d4cb}

/* 185d. New palette: Parchment #FAF5F0 ground, Coffee Bean #1a0609 replacing the maroon black everywhere, Stone Brown #5A4C3E for secondary text and rules, Goldenrod #E0AD2A highlight, Ebony #4f624e bands.
   The dark opening (header, hero, logo strip) and the footer run on Coffee Bean. Everything below the logo strip runs on Parchment */
html.c-185d{--bg:#1a0609;--fg:#faf5f0;--fg-2:#c2b8ad;--line:#4a3f35;--line-strong:#8a7d70;--bg-2:#2e2218;--bg-2-line:#5a4c3e;--bg-2-curve:#3a2c20;
  --highlight:#e0ad2a;--on-highlight:#1a0609;--sec:#4c5a46;--on-sec:#faf5f0;--sec-dark:#3c4637;--on-sec-dark:#faf5f0;
  --ink-curve:#3a2a1e;--ink-step:#2a1d12;--action:#faf5f0;background:#1a0609}
html.c-185d body{background:#1a0609}
html.c-185d main{color-scheme:light;--bg:#faf5f0;--bg-2:#f2eadf;--fg:#1a0609;--fg-2:#5a4c3e;--line:#e3d9cc;--line-strong:#8a7a6a;--bg-2-line:#dccfbf;--bg-2-curve:#ebe0d2;--ink-curve:#ece2d5;--trail:hsl(37 62% 39%);--ink-step:#b98a74;--action:#1a0609;background:var(--bg);color:var(--fg)}
html.c-185d:root main .band,html.c-185d:root main .good{--bg:#faf5f0;--fg:#1a0609;--fg-2:#5a4c3e;--line:#dccfbf;--line-strong:#8a7a6a;--bg-2:#f2eadf;--bg-2-line:#dccfbf;--bg-2-curve:#ebe0d2;--ink-curve:#ece2d5;--action:#1a0609;background:var(--bg-2);color:var(--fg)}
html.c-185d:root main .btn{background:#1a0609;color:#faf5f0;box-shadow:0 8px 18px -12px rgba(26,6,9,.6)}
html.c-185d:root main .btn:hover{background:var(--highlight);color:#1a0609}
html.c-185d main .specs h3 img,html.c-185d main .client-tabs img{filter:brightness(0) opacity(.88)}
html.c-185d main .name{--fg:#faf5f0;--fg-2:#e1e4da;--line:#879183;color:#faf5f0}
html.c-185d:root main .how{--fg:#faf5f0;--fg-2:#e1e4da;--line:#879183;--line-strong:#e1e4da;--ink-curve:#3a2a1e;--ink-step:#2a1d12;color:#faf5f0}
html.c-185d:root main .how .btn{background:#faf5f0;color:#1a0609}
html.c-185d:root main .how .cycle li::before,html.c-185d:root main .how .cycle li.again::before{color:#1a0609}
html.c-185d:root main .msg.ai{color:#faf5f0;--fg:#faf5f0;--fg-2:#d6d4cb}
html.c-185d:root main .sheet{--ink:#1a0609;--ink-2:#5a4c3e;background:#fffdfa}
html.c-185d:root .foot{--bg:#1a0609;--fg:#faf5f0;--fg-2:#c2b8ad;--line:#4a3f35;--line-strong:#8a7d70;--bg-2:#1a0609;--bg-2-line:#4a3f35;background:#1a0609;color:var(--fg-2)}
html.c-185d .open .btn,html.c-185d .top .btn{background:#faf5f0;color:#1a0609}
html.c-185d .open .btn:hover,html.c-185d .top .btn:hover{background:var(--highlight);color:#1a0609}
html.c-185d ::selection{background:#e0ad2a;color:#1a0609}
html.c-185d:root:root main .btn,html.c-185d:root:root main .good .btn,html.c-185d:root:root main .band .btn{background:#1a0609;color:#faf5f0}
html.c-185d:root:root main .btn:hover,html.c-185d:root:root main .good .btn:hover,html.c-185d:root:root main .band .btn:hover{background:var(--highlight);color:#1a0609}
html.c-185d:root:root main .how .btn{background:#faf5f0;color:#1a0609}
html.c-185d .cmp-line{background:#1a0609}
html.c-185d .cmp-line::after{border-color:#1a0609}

/* 185d. Footprints in Stone Brown everywhere: hero trail, desire paths band, process trail, and the launch line */
html.c-185d{--trail:#5a4c3e}
html.c-185d main{--trail:#5a4c3e}
html.c-185d:root .hero .trail .steps-g2,html.c-185d:root .corner-lg .steps2,html.c-185d:root .corner-end .steps2,html.c-185d:root .how-feet,html.c-185d:root .how-weave .ft,html.c-185d .launch-line .ll-feet{fill:#5a4c3e}

/* 186a, 186b, 186c (pick one). The desire paths drawing: the right leg of the sidewalk read as a wall of stacked blocks seen from the side, with the trail climbing it. Each option draws the sidewalk as ground seen from above */
.corner-lg .sw{display:none}
html.c-186a .corner-lg .walk,html.c-186a .corner-lg .joints,html.c-186b .corner-lg .walk,html.c-186b .corner-lg .joints,html.c-186c .corner-lg .walk,html.c-186c .corner-lg .joints{display:none}
html.c-186a .corner-lg .sw-a,html.c-186b .corner-lg .sw-b,html.c-186c .corner-lg .sw-c{display:inline}
.sw-a path{fill:none;stroke:var(--on-sec-2);stroke-opacity:.42;stroke-width:30;stroke-linejoin:miter}
.sw-b .edge{fill:none;stroke:var(--on-sec-2);stroke-width:2.5}
.sw-b .tick{fill:none;stroke:var(--on-sec-2);stroke-width:1.5;stroke-opacity:.7}
.sw-b .blade{fill:none;stroke:var(--on-sec-2);stroke-width:1.4;stroke-linecap:round;stroke-opacity:.2}
.sw-c .slab{fill:var(--on-sec-2);fill-opacity:.85}
.sw-c .joint{fill:none;stroke:var(--sec);stroke-width:1.6}
.sw-c .horizon{fill:none;stroke:var(--on-sec-2);stroke-width:1;stroke-opacity:.35;stroke-dasharray:2 6}

/* 187. Light hero: the header, hero, and logo strip run on Parchment, and Coffee Bean is the text color. With 185d the page is light from the top down, with the footer and the green bands as the only dark grounds */
html.c-187 body{background:#faf5f0}
html.c-187 .open,html.c-187 .menu{color-scheme:light;--bg:#faf5f0;--fg:#1a0609;--fg-2:#5a4c3e;--line:#e3d9cc;--line-strong:#8a7a6a;--action:#1a0609;--ink-curve:#ece2d5;--on-highlight:#1a0609;background:#faf5f0;color:#1a0609}
html.c-187 .top.solid{background:#faf5f0;box-shadow:0 1px 0 #e3d9cc,0 12px 24px -20px rgba(26,6,9,.35)}
/* the wordmark and client logos are drawn light for a dark ground: darkened here for the preview, swap in dark versions before launch */
html.c-187 .logo img,html.c-187 .logo-row img{filter:brightness(0) opacity(.9)}
html.c-187 .logo-row .cc span{color:#1a0609}
/* buttons: Coffee Bean primary, outlined secondary. Gold text on Parchment is too faint to read, so the secondary hover fills gold with dark text instead */
html.c-187:root:root .open .btn,html.c-187:root:root .menu .btn{background:#1a0609;color:#faf5f0;box-shadow:0 8px 18px -12px rgba(26,6,9,.55)}
html.c-187:root:root .open .btn:hover,html.c-187:root:root .menu .btn:hover{background:var(--highlight);color:#1a0609}
html.c-187:root .hero .actions a:not(.btn){border-color:#1a0609;color:#1a0609}
html.c-187:root .hero .actions a:not(.btn):hover{background:var(--highlight);border-color:var(--highlight);color:#1a0609}
html.c-187 .hero .trail path{stroke:#ece2d5}

/* 186d. Tilted ground: the slab sidewalk and the trail lie flat on a lawn seen at an angle, with the corner toward the viewer, so the trail reads as a shortcut walked across grass. The lawn fades out toward the far corner instead of ending in a hard edge */
.lawn-d{display:none}
html.c-186d .lawn-d{display:inline}
html.c-186d .corner-fig{overflow:visible}
html.c-186d .corner-lg{transform-origin:50% 75%;transform:perspective(900px) rotateX(48deg) rotateZ(-30deg) scale(.98)}
html.c-186d:root .corner-fig .lbl-trail{top:24%;bottom:auto;left:4%;transform:none}
html.c-186d:root .lbl-walk{margin-top:66px}
@media (max-width:900px){
  html.c-186d:root .corner-fig .lbl-trail{top:18%;left:0}
  html.c-186d:root .lbl-walk{margin-top:52px}
}

/* 185d. No dark grounds below the hero: every section that an older option darkened (177a, 177b, 147, 160) returns to Parchment, FAQs leave the moss for Parchment, and the footer turns light. The desire paths band and How a project works stay Ebony */
html.c-185d:root:root main #services,html.c-185d:root:root main #clients,html.c-185d:root:root main #about,html.c-185d:root:root main #faq{--bg:#faf5f0;--fg:#1a0609;--fg-2:#5a4c3e;--line:#e3d9cc;--line-strong:#8a7a6a;--bg-2:#f2eadf;--bg-2-line:#dccfbf;--action:#1a0609;background:#faf5f0;color:#1a0609;box-shadow:0 0 0 100vmax #faf5f0;clip-path:inset(0 -100vmax)}
html.c-185d:root:root main #good-time,html.c-185d:root:root main #ai,html.c-185d:root:root main #contact{--bg:#faf5f0;--fg:#1a0609;--fg-2:#5a4c3e;--line:#dccfbf;--line-strong:#8a7a6a;--bg-2:#f2eadf;--bg-2-line:#dccfbf;--bg-2-curve:#ebe0d2;--ink-curve:#ece2d5;--action:#1a0609;background:#f2eadf;color:#1a0609;box-shadow:0 0 0 100vmax #f2eadf;clip-path:inset(0 -100vmax)}
html.c-185d:root:root main #services .btn,html.c-185d:root:root main #faq .btn,html.c-185d:root:root main #good-time .btn,html.c-185d:root:root main #ai .btn,html.c-185d:root:root main #contact .btn{background:#1a0609;color:#faf5f0}
html.c-185d:root:root main #services .btn:hover,html.c-185d:root:root main #faq .btn:hover,html.c-185d:root:root main #good-time .btn:hover,html.c-185d:root:root main #ai .btn:hover,html.c-185d:root:root main #contact .btn:hover{background:var(--highlight);color:#1a0609}
html.c-185d:root:root .foot{--bg:#faf5f0;--fg:#1a0609;--fg-2:#5a4c3e;--line:#e3d9cc;--line-strong:#8a7a6a;--bg-2:#faf5f0;--bg-2-line:#dccfbf;background:#faf5f0;color:#5a4c3e}
html.c-185d:root:root .foot .corner .walk{stroke:#5a4c3e}
html.c-185d:root:root main #how{--bg:#4c5a46;--fg:#faf5f0;--fg-2:#e1e4da;--line:#879183;--line-strong:#e1e4da;--sec-dark:#4c5a46;--ink-curve:#3a2a1e;--ink-step:#2a1d12;--action:#faf5f0;background:#4c5a46;color:#faf5f0;box-shadow:0 0 0 100vmax #4c5a46}
html.c-185d:root:root main #how .btn{background:#faf5f0;color:#1a0609}

/* ===== Oct 19 2026 round: changes 188 to 192 ===== */

/* 188: AI evaluation on desktop. Two balanced columns: the argument and the example on the left, what a panel study gives you on the right, with the sample readout stretched so both columns end together */
html.c-188:root:root #ai .ai2-case{background:color-mix(in srgb,var(--bg-2) 40%,#fff);border-color:var(--line)}
@media (min-width:901px){
  html.c-188:root:root #ai .ai2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,6vw,96px);grid-template-areas:"lede h" "stat kinds" "case sample" "case for" "case act" "case guard" "case .";grid-template-rows:auto auto auto auto auto auto 1fr;align-items:start}
  html.c-188:root:root #ai .ai2-grid,html.c-188:root:root #ai .ai2-offer,html.c-188:root:root #ai .ai2-pitch{display:contents}
  html.c-188:root:root #ai .ai2-lede{grid-area:lede;margin:0 0 20px;max-width:24ch;font-size:clamp(1.625rem,2.4vw,2rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
  html.c-188:root:root #ai .ai2-own{grid-area:own;margin:0 0 16px;max-width:52ch}
  html.c-188:root:root #ai .ai2-stat{grid-area:stat;margin:0 0 16px;max-width:52ch}
  html.c-188:root:root #ai .ai2-fields{grid-area:fields;margin:0;max-width:52ch}
  html.c-188:root:root #ai .ai2-case{grid-area:case;margin-top:44px;align-self:start}
  html.c-188:root:root #ai .ai2-offer h3{grid-area:h;margin:6px 0 0;font-size:1.3125rem;line-height:1.3;text-wrap:balance}
  html.c-188:root:root #ai .ai2-kinds{grid-area:kinds;margin:18px 0 0;max-width:none}
  html.c-188:root:root #ai .ai2-sample{grid-area:sample;height:430px;margin:44px 0 0}
  html.c-188:root:root #ai .ai2-sample:not(.open) .sheet{width:161.3%;transform:scale(.62)}
  html.c-188:root:root #ai .ai2-sample.open{height:auto}
  html.c-188:root:root #ai .ai2-actions{grid-area:act;margin-top:22px}
  html.c-188:root:root #ai .ai2-guard{grid-area:guard;margin-top:10px}
}

/* 189c: a slim band right under the hero that points to AI evaluation */
.ai-teaser{background:var(--bg-2);border-block:1px solid var(--line)}
.ai-teaser .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-block:22px}
.ai-teaser .svc-marks{gap:18px;padding-left:4px}
.ai-teaser p{margin:0;flex:1 1 28ch;min-width:0;font-size:1.0625rem;line-height:1.45;color:var(--fg-2)}
.ai-teaser p b{color:var(--fg);font-weight:700}
.ai-teaser .tz-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-color:var(--highlight)}
.ai-teaser .tz-link:hover{text-decoration-color:var(--fg)}
@media (max-width:600px){.ai-teaser .svc-marks{display:none}.ai-teaser .wrap{gap:4px 16px;padding-block:16px}}

/* 190: links to AI evaluation from the hero descriptor, the services card, and the "Shipping AI soon" case */
.more-ai{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:1rem;font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--line-strong)}
.more-ai:hover{text-decoration-color:currentColor}
html:root:root .cases li .more-ai{grid-column:2 / -1;min-height:36px;margin-top:2px;font-size:.9375rem}
.hero .kind-link{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line-strong)}
.hero .kind-link:hover{text-decoration-color:currentColor}

/* 191: hero grounds. All three keep the light page below. --hero-end is the color the hero hands to the first section */
html.c-187 .open{--hero-end:#faf5f0}
html.c-185c.c-187 .open{--hero-end:#f4f4ee}
/* 191a: moss */
html.c-187.c-191a .open,html.c-187.c-191a .open .top.solid{--bg:#4c5a46;--fg:#ecede4;--fg-2:#e1e4da;--line:rgba(236,237,228,.2);--line-strong:#c3ccc0;--action:#ecede4;--on-highlight:#1a0609;--trail:#cfa58e;--hero-end:#4c5a46;background:#4c5a46;color:#ecede4}
html.c-187.c-191a .open .top.solid{box-shadow:0 12px 24px -20px rgba(26,6,9,.5)}
html.c-187.c-191a .open .logo img,html.c-187.c-191a .open .logo-row img{filter:brightness(0) invert(1) opacity(.92)}
html.c-187.c-191a .open .logo-row .cc span{color:#ecede4}
html.c-187.c-191a:root:root:root .open .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 18px -12px rgba(0,0,0,.5)}
html.c-187.c-191a:root:root:root .open .btn:hover{background:var(--highlight);color:#1a0609}
html.c-187.c-191a:root:root .hero .actions a:not(.btn){border-color:#ecede4;color:#ecede4}
html.c-187.c-191a:root:root .hero .actions a:not(.btn):hover{background:var(--highlight);border-color:var(--highlight);color:#1a0609}
html.c-187.c-191a:root .hero .trail .steps-g2{fill:hsl(37 62% 39%)}
html.c-187.c-191a .open ::selection{background:#e0ad2a;color:#1a0609}
/* 191b: a pale moss sky that settles into the page ground by the client logos */
html.c-187.c-191b .open{background:linear-gradient(180deg,#d9ddcf 0%,#e4e7dc 42%,var(--hero-end) 100%);background-color:var(--hero-end)}
html.c-187.c-191b .open .top.solid{background:#dcdfd2;box-shadow:0 1px 0 #c6d3c5,0 12px 24px -20px rgba(26,6,9,.3)}
/* 191c: warm light. A soft gold glow behind the headline and a moss shade low on the left, over the page ground */
html.c-187.c-191c .open{background:radial-gradient(52% 68% at 82% 26%,rgba(224,173,42,.22),rgba(224,173,42,0) 72%),radial-gradient(48% 60% at 4% 100%,rgba(76,90,70,.2),rgba(76,90,70,0) 72%),var(--hero-end);background-color:var(--hero-end)}
@media (max-width:700px){html.c-187.c-191c .open{background:radial-gradient(90% 40% at 90% 22%,rgba(224,173,42,.22),rgba(224,173,42,0) 72%),radial-gradient(90% 40% at 0% 100%,rgba(76,90,70,.2),rgba(76,90,70,0) 72%),var(--hero-end);background-color:var(--hero-end)}}

/* 192: soft fades between grounds. The site script adds a .dp-fade layer to each band whose ground differs from the band above */
html.c-192a body,html.c-192b body{overflow-x:clip}
.fade-top{position:relative;isolation:isolate}
.dp-fade{position:absolute;top:0;left:50%;width:100vw;margin-left:-50vw;height:clamp(96px,13vw,200px);background:linear-gradient(180deg,var(--fade-from) 0%,color-mix(in srgb,var(--fade-from) 55%,transparent) 38%,transparent 100%);pointer-events:none;z-index:-1}
html.show-marks .dp-fade{display:block}

/* 163 with the light hero: the clay band behind the footprints stays hidden (it came back under 187) */
html.c-163.c-187:root .hero .trail > path{stroke:none}

/* 193: off-white candidates for the brand kit, tried on the light page. Each sets the page paper, the band tint (also the services band from 160), lines, and secondary text, and the hero takes the paper unless a 191 ground is on */
html.c-193a:root:root:root main,html.c-193a:root:root:root main #clients,html.c-193a:root:root:root main #about{--bg:#ecede4;--fg-2:#4d5848;--line:#d6d9cb;--line-strong:#778272;background-color:#ecede4}
html.c-193a:root:root:root main .band,html.c-193a:root:root:root main .good,html.c-193a:root:root:root main #services,html.c-193a:root:root:root main #good-time,html.c-193a:root:root:root main #ai,html.c-193a:root:root:root main #contact,html.c-193a:root:root:root main .ai-teaser{--bg-2:#e1e3d6;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--line:#c5d1bf;--fg-2:#4d5848;--line-strong:#778272;background:#e1e3d6;box-shadow:0 0 0 100vmax #e1e3d6;clip-path:inset(0 -100vmax)}
html.c-193a:root:root:root main #ai{box-shadow:none;clip-path:none}
html.c-193a.c-187:not(.c-191a):not(.c-191b):not(.c-191c) .open{--hero-end:#ecede4;--bg:#ecede4;background:#ecede4}
html.c-193a.c-187.c-191b .open,html.c-193a.c-187.c-191c .open{--hero-end:#ecede4;background-color:#ecede4}
html.c-193a.c-187:not(.c-191a) .open .top.solid{background:#ecede4}
html.c-193b:root:root:root main,html.c-193b:root:root:root main #clients,html.c-193b:root:root:root main #about{--bg:#f1f2eb;--fg-2:#505a4c;--line:#dcdfd2;--line-strong:#7a8475;background-color:#f1f2eb}
html.c-193b:root:root:root main .band,html.c-193b:root:root:root main .good,html.c-193b:root:root:root main #services,html.c-193b:root:root:root main #good-time,html.c-193b:root:root:root main #ai,html.c-193b:root:root:root main #contact,html.c-193b:root:root:root main .ai-teaser{--bg-2:#e5e8dc;--bg-2-line:#d0d4c4;--bg-2-curve:#d0d4c4;--ink-curve:#d0d4c4;--line:#d0d4c4;--fg-2:#505a4c;--line-strong:#7a8475;background:#e5e8dc;box-shadow:0 0 0 100vmax #e5e8dc;clip-path:inset(0 -100vmax)}
html.c-193b:root:root:root main #ai{box-shadow:none;clip-path:none}
html.c-193b.c-187:not(.c-191a):not(.c-191b):not(.c-191c) .open{--hero-end:#f1f2eb;--bg:#f1f2eb;background:#f1f2eb}
html.c-193b.c-187.c-191b .open,html.c-193b.c-187.c-191c .open{--hero-end:#f1f2eb;background-color:#f1f2eb}
html.c-193b.c-187:not(.c-191a) .open .top.solid{background:#f1f2eb}
html.c-193c:root:root:root main,html.c-193c:root:root:root main #clients,html.c-193c:root:root:root main #about{--bg:#edebe4;--fg-2:#57524a;--line:#d9d5ca;--line-strong:#837d73;background-color:#edebe4}
html.c-193c:root:root:root main .band,html.c-193c:root:root:root main .good,html.c-193c:root:root:root main #services,html.c-193c:root:root:root main #good-time,html.c-193c:root:root:root main #ai,html.c-193c:root:root:root main #contact,html.c-193c:root:root:root main .ai-teaser{--bg-2:#e3dfd5;--bg-2-line:#cec8bb;--bg-2-curve:#cec8bb;--ink-curve:#cec8bb;--line:#cec8bb;--fg-2:#57524a;--line-strong:#837d73;background:#e3dfd5;box-shadow:0 0 0 100vmax #e3dfd5;clip-path:inset(0 -100vmax)}
html.c-193c:root:root:root main #ai{box-shadow:none;clip-path:none}
html.c-193c.c-187:not(.c-191a):not(.c-191b):not(.c-191c) .open{--hero-end:#edebe4;--bg:#edebe4;background:#edebe4}
html.c-193c.c-187.c-191b .open,html.c-193c.c-187.c-191c .open{--hero-end:#edebe4;background-color:#edebe4}
html.c-193c.c-187:not(.c-191a) .open .top.solid{background:#edebe4}
html.c-193d:root:root:root main,html.c-193d:root:root:root main #clients,html.c-193d:root:root:root main #about{--bg:#e9ece6;--fg-2:#4a4f48;--line:#d3d9d0;--line-strong:#767c74;background-color:#e9ece6}
html.c-193d:root:root:root main .band,html.c-193d:root:root:root main .good,html.c-193d:root:root:root main #services,html.c-193d:root:root:root main #good-time,html.c-193d:root:root:root main #ai,html.c-193d:root:root:root main #contact,html.c-193d:root:root:root main .ai-teaser{--bg-2:#dee3db;--bg-2-line:#c7d1c7;--bg-2-curve:#c7d1c7;--ink-curve:#c7d1c7;--line:#c7d1c7;--fg-2:#4a4f48;--line-strong:#767c74;background:#dee3db;box-shadow:0 0 0 100vmax #dee3db;clip-path:inset(0 -100vmax)}
html.c-193d:root:root:root main #ai{box-shadow:none;clip-path:none}
html.c-193d.c-187:not(.c-191a):not(.c-191b):not(.c-191c) .open{--hero-end:#e9ece6;--bg:#e9ece6;background:#e9ece6}
html.c-193d.c-187.c-191b .open,html.c-193d.c-187.c-191c .open{--hero-end:#e9ece6;background-color:#e9ece6}
html.c-193d.c-187:not(.c-191a) .open .top.solid{background:#e9ece6}
html.c-193e:root:root:root main,html.c-193e:root:root:root main #clients,html.c-193e:root:root:root main #about{--bg:#f5f0eb;--fg-2:#5e4f4a;--line:#e2d8d1;--line-strong:#8c7a72;background-color:#f5f0eb}
html.c-193e:root:root:root main .band,html.c-193e:root:root:root main .good,html.c-193e:root:root:root main #services,html.c-193e:root:root:root main #good-time,html.c-193e:root:root:root main #ai,html.c-193e:root:root:root main #contact,html.c-193e:root:root:root main .ai-teaser{--bg-2:#ece3dc;--bg-2-line:#d9cbc2;--bg-2-curve:#d9cbc2;--ink-curve:#d9cbc2;--line:#d9cbc2;--fg-2:#5e4f4a;--line-strong:#8c7a72;background:#ece3dc;box-shadow:0 0 0 100vmax #ece3dc;clip-path:inset(0 -100vmax)}
html.c-193e:root:root:root main #ai{box-shadow:none;clip-path:none}
html.c-193e.c-187:not(.c-191a):not(.c-191b):not(.c-191c) .open{--hero-end:#f5f0eb;--bg:#f5f0eb;background:#f5f0eb}
html.c-193e.c-187.c-191b .open,html.c-193e.c-187.c-191c .open{--hero-end:#f5f0eb;background-color:#f5f0eb}
html.c-193e.c-187:not(.c-191a) .open .top.solid{background:#f5f0eb}
/* Oct 19. 186e: the flat drawing, both legs fading into the moss so the sidewalk reads as ground seen from above, with a worn strip under the prints and a straighter shortcut */
.dirt-e{display:none}
html.c-186e .corner-lg .walk,html.c-186e .corner-lg .joints{display:none}
html.c-186e .corner-lg .sw-e,html.c-186e .corner-lg .dirt-e{display:inline}
.dirt-e{fill:none;stroke:#3a4634;stroke-opacity:.55;stroke-width:44;stroke-linecap:round}
.sw-e .walk-e{fill:none;stroke:var(--on-sec-2);stroke-width:30;stroke-linejoin:miter}
.sw-e .joints-e{fill:none;stroke:var(--sec);stroke-width:2}
html:root:root .corner-lg .steps2e{display:none}
html.c-186e:root:root .corner-lg .steps2{display:none}
html.c-186e:root:root .corner-lg .steps2e{display:inline}
/* Oct 19. 194a, 194b (pick one, with 187). Dark bookends: the header, hero, and logo strip stay dark (187 off), and Let's connect and the footer go dark too. The reading sections keep the light ground (Lichen with 193a) and the moss bands stay */
html.c-194b{--bg:#1a0609;--fg-2:#c2b8ad;--line:#4a3f35;--line-strong:#8a7d70;--bg-2:#2e2218;--bg-2-line:#5a4c3e;--bg-2-curve:#3a2c20;--ink-curve:#3a2c20;--ink-step:#2a1d12}
html.c-194b body{background:#1a0609}
html.c-194a:root:root:root:root main #contact{--bg:#1a0609;--bg-2:#1a0609;--fg:#ecede4;--fg-2:#bcb3af;--line:#5c4747;--line-strong:#867674;--bg-2-line:#5c4747;--bg-2-curve:#2b1114;--ink-curve:#492823;--action:#ecede4;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax)}
html.c-194b:root:root:root:root main #contact{--bg:#1a0609;--bg-2:#1a0609;--fg:#faf5f0;--fg-2:#c2b8ad;--line:#4a3f35;--line-strong:#8a7d70;--bg-2-line:#4a3f35;--bg-2-curve:#2e2218;--ink-curve:#3a2c20;--action:#faf5f0;color-scheme:dark;background:#1a0609;color:#faf5f0;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax)}
html.c-194a:root:root:root:root main #contact .btn,html.c-194b:root:root:root:root main #contact .btn{background:#ecede4;color:#1a0609;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
html.c-194a:root:root:root:root main #contact .btn:hover,html.c-194b:root:root:root:root main #contact .btn:hover{background:var(--highlight);color:#1a0609}
html.c-194a:root:root:root .foot{--bg:#1a0609;--fg:#ecede4;--fg-2:#bcb3af;--line:#5c4747;--line-strong:#867674;--bg-2:#1a0609;--bg-2-line:#5c4747;background:#1a0609;color:#bcb3af}
html.c-194b:root:root:root .foot{--bg:#1a0609;--fg:#faf5f0;--fg-2:#c2b8ad;--line:#4a3f35;--line-strong:#8a7d70;--bg-2:#1a0609;--bg-2-line:#4a3f35;background:#1a0609;color:#c2b8ad}
html.c-194b .open,html.c-194b .menu,html.c-194b .top.solid{--bg:#1a0609;background-color:#1a0609}
/* Oct 19. With Lichen (193a) and the light hero (187), the page behind the opening and the phone menu use Lichen too, so no Parchment is left */
html.c-193a.c-187 body,html.c-193a.c-187{background:#ecede4}
html.c-193a.c-187 .menu{--bg:#ecede4;background:#ecede4}
/* Oct 19. 186f: 186d's perspective, tilted straight back with no sideways turn and no lawn layer, so the moss band is the lawn */
html.c-186f .corner-fig{overflow:visible}
html.c-186f .corner-lg{transform-origin:50% 100%;transform:perspective(900px) rotateX(46deg)}
html.c-186f:root .corner-fig .lbl-trail{top:40%;bottom:auto;left:8%;transform:none}
@media (max-width:900px){html.c-186f:root .corner-fig .lbl-trail{top:34%;left:4%}}
/* Oct 19. 197a, 197b (pick one, with 189c): the Shipping AI teaser as a maroon black strip further down the page. a: after Four ways to work together. b: after Selected work */
html.c-197b:root:root:root:root main .ai-teaser{--bg:#1a0609;--bg-2:#1a0609;--fg:#ecede4;--fg-2:#cfc6c2;--line:#1a0609;color-scheme:dark;background:#1a0609;border-block:0;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax);position:relative}
html.c-197b:root:root:root:root main .ai-teaser .wrap{padding-block:28px}
html.c-197b main .ai-teaser .tz-link:hover{text-decoration-color:var(--fg)}
@media (max-width:600px){html.c-197b:root:root:root:root main .ai-teaser .wrap{padding-block:20px}}
/* Oct 19. 198: maroon black pieces without a maroon ground. The client quotes and the AI example card become maroon black cards on Lichen */
html.c-198:root:root:root main .cq{background:#1a0609;color:#ecede4;--fg:#ecede4;--fg-2:#cfc6c2;border-top:0;border-radius:12px;padding:20px 22px 18px}
html.c-198:root:root:root:root #ai .ai2-case{--bg:#3a2324;--fg:#ecede4;--fg-2:#cfc6c2;--line:#5c4747;color-scheme:dark;background:#1a0609;border-color:#1a0609;color:#ecede4}
html.c-198:root:root:root:root #ai .ai2-case .ai2-verdict{border-top-color:#5c4747}
html.c-198:root:root:root:root #ai .ai2-case .msg.patient{background:#3a2324;color:#ecede4}
/* Oct 19. 199a, 199b (pick one): a maroon black header. a: always, so a dark bar sits over the moss hero. b: only once the page scrolls, so the sticky bar is maroon black over every section */
html.c-199a:root:root .open .top,html.c-199b:root:root .open .top.solid{--bg:#1a0609;--fg:#ecede4;--fg-2:#cfc6c2;--line:rgba(236,237,228,.16);--action:#ecede4;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 12px 24px -18px rgba(26,6,9,.6)}
html.c-199a:root:root:root .open .top .btn,html.c-199b:root:root:root .open .top.solid .btn{background:#ecede4;color:#1a0609}
html.c-199a:root:root:root .open .top .btn:hover,html.c-199b:root:root:root .open .top.solid .btn:hover{background:var(--highlight);color:#1a0609}
html.c-199a .open .top .logo img,html.c-199b .open .top.solid .logo img{filter:brightness(0) invert(1) opacity(.92)}
/* Oct 19. 200: Who you'll work with on maroon black */
html.c-200:root:root:root main #about{--bg:#1a0609;--bg-2:#3a2324;--fg:#ecede4;--fg-2:#cfc6c2;--line:#5c4747;--line-strong:#867674;--action:#ecede4;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax);position:relative}
/* Oct 19. 201: Selected work on maroon black, with the colors it had on the original all-dark page. Logos turn light again, and the quote cards from 198 drop their card since the ground is already dark */
html.c-201:root:root:root:root main #clients{--bg:#1a0609;--fg:#ecede4;--fg-2:#bcb3af;--line:#5c4747;--line-strong:#867674;--bg-2:#3a2324;--bg-2-line:#6f5c5b;--bg-2-curve:#492823;--ink-curve:#492823;--action:#ecede4;--on-highlight:#1a0609;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax);position:relative}
html.c-201:root:root main #clients .specs h3 img,html.c-201:root:root main #clients .client-tabs img{filter:brightness(0) invert(1) opacity(.92)}
html.c-201:root:root:root:root main #clients .cq{background:none;border-radius:0;padding:16px 0 0;border-top:1px solid var(--line)}
html.c-201:root:root main #clients .cmp-line{background:#ecede4}
/* Oct 19. 202: a light footer. The footer runs on the same Lichen as Let's connect, with a rule between them, so the page ends light */
html.c-202:root:root:root:root .foot{--bg:#ecede4;--bg-2:#ecede4;--bg-2-line:#c5d1c0;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;color-scheme:light;background:#ecede4;color:#4d5848}
html.c-202:root:root:root .foot .corner .walk{stroke:#4d5848}
/* Oct 19. 197c, 197d: the Shipping AI strip stays under the client logos. c: maroon black. d: gold */





/* Oct 19, Karl: the hero footprints follow the same upward curve as the desire paths drawing. The box is narrower and taller so the steep end of the curve shows, and the fade starts later */
html:root:root .hero .trail{width:6em;height:4em}
@media (min-width:521px){
  html:root:root .hero .trail{-webkit-mask-image:linear-gradient(to right,#000 70%,transparent 100%);mask-image:linear-gradient(to right,#000 70%,transparent 100%)}
}

/* ============ Oct 20 2026: outside review, changes 203 to 222 (Brand & designer ideas tab). Baked Oct 20: 203a, 206b, 207a (order in the markup), 209b, 212, 213, 214, 215, 216, 218. Rejected options deleted. Open: 210, 222, and the revisions in the block after this one ============ */
.dp-rule{position:absolute;left:50%;top:0;width:100vw;margin-left:-50vw;height:1px;background:var(--line,#c7d5c7);pointer-events:none;z-index:1}
main > section,main > aside,.foot{position:relative}
/* 203a, baked Oct 20: moss hero, maroon black evidence run (Selected work, then AI evaluation), moss for the desire paths band and the process, everything else Lichen */
html:root:root:root:root:root main > .ai-teaser{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;position:relative}
html:root:root:root:root:root main #services{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root main #good-time{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root main #about{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root main #faq{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root main #contact{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;position:relative}
html:root:root:root:root:root main #clients{--bg:#1a0609;--bg-2:#3a2324;--fg:#ecede4;--fg-2:#c4bcb7;--line:#5c4747;--line-strong:#867674;--bg-2-line:#6f5c5b;--bg-2-curve:#492823;--ink-curve:#492823;--action:#ecede4;--on-highlight:#1a0609;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root main #ai{--bg:#1a0609;--bg-2:#3a2324;--fg:#ecede4;--fg-2:#c4bcb7;--line:#5c4747;--line-strong:#867674;--bg-2-line:#6f5c5b;--bg-2-curve:#492823;--ink-curve:#492823;--action:#ecede4;--on-highlight:#1a0609;color-scheme:dark;background:#1a0609;color:#ecede4;position:relative}
html:root:root:root:root:root .foot{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609}
html:root:root:root:root:root main #ai .ai2-case{background:#2b1114;border-color:#5c4747;box-shadow:none}
html:root:root:root:root:root main #ai .msg.patient{background:#3a2324;color:#ecede4}html:root:root:root:root:root main #ai .msg.ai{background:#3c4637;color:#ecede4}
html:root:root:root:root:root main #ai .ai2-sample .sheet{box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
html:root:root:root:root:root main #ai a:not(.btn),html:root:root:root:root:root main #ai .ai2-sample-btn{color:#ecede4}
html:root:root:root:root:root main #ai .btn{background:#ecede4;color:#1a0609}html:root:root:root:root:root main #ai .btn:hover{background:var(--highlight);color:#1a0609}
html:root:root:root:root:root main #clients .specs h3 img,html:root:root:root:root:root main #clients .client-tabs img{filter:brightness(0) invert(1) opacity(.92)}
/* 206b (brand): headings stay at 96px, and a 32-36px medium tier is added under them: the section ledes and the subheads inside sections */
html:root:root:root:root:root main #ai .ai2-lede,html:root:root:root:root:root main #about .lead{font-size:1.5rem;line-height:1.3;font-weight:500;letter-spacing:-.02em;max-width:24em}
html:root:root:root:root:root main #good-time .phase h3,html:root:root:root:root:root main #ai .ai2-offer h3,html:root:root:root:root:root main #about h3.before,html:root:root:root:root:root main #name .sec > p{font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.3;font-weight:500;letter-spacing:-.015em}
/* 209b (designer): the drawing as it is, with the two labels removed */
html:root:root:root:root:root main #name .lbl-trail,html:root:root:root:root:root main #name .lbl-walk{display:none}
/* 210 (designer): all three clients stacked, no tabs. Each leads with its outcome at heading size, and the before and after images sit side by side, no slider */
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .client-tabs{display:none}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;gap:0}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article{display:flex;flex-direction:column;padding:40px 0;border-top:1px solid var(--line)}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article:first-child{border-top:0;padding-top:8px}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > h3{position:static;width:auto;height:auto;overflow:visible;clip-path:none;order:1;font-size:1.375rem;min-height:0;margin:0 0 4px}
.outcome{display:none}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > .outcome{display:block;order:0;margin:0 0 14px;font-size:1.75rem;line-height:1.3;font-weight:700;letter-spacing:-.025em;max-width:20em;text-wrap:balance}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > .what{order:2;font-size:1.0625rem;font-weight:400;color:var(--fg-2)}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > dl{order:3}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > .ba{order:4;margin:20px 0 0;max-width:880px}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > .cq{order:5;margin-top:24px}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cq-q,html.c-210a:root:root:root:root:root main #clients .cq-q{font-size:1.25rem;line-height:1.4}@media (min-width:901px){html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cq-q,html.c-210a:root:root:root:root:root main #clients .cq-q{font-size:1.375rem}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article .outcome,html.c-210a:root:root:root:root:root main #clients .specs > article .outcome{font-size:2.25rem}}@media (min-width:1280px){html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article .outcome,html.c-210a:root:root:root:root:root main #clients .specs > article .outcome{font-size:2.5rem}}
@media (min-width:901px){html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > *{grid-column:1}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > .ba{grid-column:2;grid-row:1 / span 6;margin:0}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .specs > article > .outcome{grid-row:1}}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-stage{aspect-ratio:auto;display:block}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-frame,html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-frame.portrait{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:auto;aspect-ratio:auto;border:0;background:none;overflow:visible;cursor:default}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-frame img{position:static;width:100%;height:auto;aspect-ratio:1.86;border:1px solid var(--bg-2-line);border-radius:4px;background:#ecede4;clip-path:none}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-frame.portrait img{aspect-ratio:4 / 5}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-a{order:1}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-b{order:2}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-line,html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-range{display:none}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-lbl{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto;position:static;margin-bottom:6px}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-lbl span{position:static;opacity:1}html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-lbl span::before,html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-lbl span::after,html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .cmp-lbl::after{display:none}
html:is(.c-210,.c-210b,.c-210c):root:root:root:root:root main #clients .ba{padding:0;background:none}
/* 214 (designer): the services line moves up under the headline at 20px and shows on phones, the headline wraps where it falls, and the phone header button says Talk to Karl like every other button */
html:root:root:root:root:root .hero .hero-copy{display:flex;flex-direction:column}html:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){order:-1;display:block;margin:0 0 28px;font-size:1.25rem;line-height:1.4;color:var(--fg-2)}
html:root:root:root:root:root .hero .hbr{display:none}html:root:root:root:root:root .hero h1 .nw{white-space:normal}
@media (max-width:740px){html:root:root:root:root:root .top .cta-short{display:none}html:root:root:root:root:root .top .cta-full{display:inline}html:root:root:root:root:root .top .top-cta{padding-left:12px;padding-right:12px;font-size:.9375rem}}
/* 215 (designer): every tap target at least 44px on phones: the header button, the wordmark link, the citation link, and the logo links */
@media (max-width:740px){html:root:root:root:root:root .top .top-cta{min-height:44px;display:inline-flex;align-items:center}html:root:root:root:root:root .top .logo::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}html:root:root:root:root:root .logos .logo-row a{min-height:44px;display:flex;align-items:center}html:root:root:root:root:root main #ai .ai2-stat a{display:inline-block;padding:12px 0;margin:-12px 0}}
/* 216 (designer): the About photo flat, with square corners and no shadow, like everything else on the page */
html:root:root:root:root:root main #about .portrait{border-radius:0;box-shadow:none;border:0}html:root:root:root:root:root main #about .portrait img{border-radius:0}html:root:root:root:root:root main #about .portrait::before,html:root:root:root:root:root main #about .portrait::after{display:none}
/* 218 (designer): the 64-68% study pulled out as a large line, with its source kept beside it */
html:root:root:root:root:root main #ai .ai2-stat{font-size:1.5rem;line-height:1.3;font-weight:600;letter-spacing:-.02em;max-width:22em;color:var(--fg)}html:root:root:root:root:root main #ai .ai2-stat a{font-size:1rem;font-weight:400;letter-spacing:0}
/* 222 (brand): a descriptor lockup in the footer: the wordmark, a hairline, and Research & AI evaluation */
.foot .lockup,.foot .lk-222a,.foot .cp-word,.foot .foot-mark{display:none}
html:root:root:root:root:root .foot .lockup{display:inline-flex;align-items:center;gap:14px}
.foot .lockup img{height:56px;width:auto;margin:-14px -6px -14px -8px}.foot .lockup .lk-rule{width:1px;height:22px;background:currentColor;opacity:.5}.foot .lockup .lk-txt{font-weight:500;color:var(--fg)}
html .foot .lockup img{filter:brightness(0) opacity(.9)}
html:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){margin:20px 0 36px}
.ai2-stat .src{display:inline;font-size:1rem;line-height:inherit;font-weight:400;letter-spacing:0;color:var(--fg-2);white-space:nowrap}
html:root:root:root:root:root main #name .sec > p{font-size:1.375rem;line-height:1.3}@media (min-width:901px){html:root:root:root:root:root main #name .sec > p{font-size:1.75rem}}@media (min-width:1280px){html:root:root:root:root:root main #name .sec > p{font-size:2rem}}
/* 206b and 218 sizes step up at tablet and desktop widths */
@media (min-width:901px){html:root:root:root:root:root main #ai .ai2-lede,html:root:root:root:root:root main #about .lead,html:root:root:root:root:root main #ai .ai2-stat{font-size:2rem}}@media (min-width:1280px){html:root:root:root:root:root main #ai .ai2-lede,html:root:root:root:root:root main #about .lead,html:root:root:root:root:root main #ai .ai2-stat{font-size:2.25rem}}
/* ============ Oct 20 2026, later: revisions from Karl's notes. Baked the same day: 203c, 196c, 216a, 218a, 222a (with 220a's flipped mark). Open: 197e, 208d, 209d, 210/210a ============ */
/* 203c, baked: AI evaluation on Lichen, so Selected work is the only maroon black reading band */
html:root:root:root:root:root main #ai{--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609}
html:root:root:root:root:root main #ai .ai2-case{--fg:#ecede4;--fg-2:#c4bcb7;--line:#5c4747;--bg-2:#3a2324;color-scheme:dark;background:#1a0609;border-color:#1a0609;color:#ecede4}
html:root:root:root:root:root main #ai a:not(.btn),html:root:root:root:root:root main #ai .ai2-sample-btn{color:var(--fg)}
html:root:root:root:root:root main #ai .btn{background:#1a0609;color:#ecede4}html:root:root:root:root:root main #ai .btn:hover{background:var(--highlight);color:#1a0609}
html:root:root:root:root:root main #ai .ai2-sample .sheet{box-shadow:0 18px 40px -24px rgba(26,6,9,.45)}
/* 196c, baked: FAQs on maroon black */
html:root:root:root:root:root main #faq{--bg:#1a0609;--bg-2:#3a2324;--fg:#ecede4;--fg-2:#c4bcb7;--line:#5c4747;--line-strong:#867674;--bg-2-line:#6f5c5b;--bg-2-curve:#492823;--ink-curve:#492823;--action:#ecede4;--on-highlight:#1a0609;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax)}
/* 210a: all three clients stacked, with the slider kept. On desktop the image alternates right, left, right, and each quote sits right under its slider */
html.c-210a:root:root:root:root:root main #clients .client-tabs{display:none}
html.c-210a:root:root:root:root:root main #clients .specs{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;gap:0}
html.c-210a:root:root:root:root:root main #clients .specs > article{display:flex;flex-direction:column;width:auto;padding:40px 0;border-top:1px solid var(--line)}html.c-210a:root:root:root:root:root main #clients .specs > article:first-child{border-top:0;padding-top:8px}
html.c-210a:root:root:root:root:root main #clients .specs > article > h3{position:static;width:auto;height:auto;overflow:visible;clip-path:none;order:1;font-size:1.375rem;min-height:0;margin:0 0 4px}
html.c-210a:root:root:root:root:root main #clients .specs > article > .outcome{display:block;order:0;margin:0 0 14px;font-size:1.75rem;line-height:1.3;font-weight:700;letter-spacing:-.025em;max-width:20em;text-wrap:balance}
html.c-210a:root:root:root:root:root main #clients .specs > article > .what{order:2}html.c-210a:root:root:root:root:root main #clients .specs > article > dl{order:3}html.c-210a:root:root:root:root:root main #clients .specs > article > .ba{order:4;margin:20px 0 0}html.c-210a:root:root:root:root:root main #clients .specs > article > .cq{order:5;margin-top:20px}
@media (min-width:901px){html.c-210a:root:root:root:root:root main #clients .specs > article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:56px;align-items:start}html.c-210a:root:root:root:root:root main #clients .specs > article > .txt{grid-column:1;grid-row:1 / span 2}html.c-210a:root:root:root:root:root main #clients .specs > article > .ba{grid-column:2;grid-row:1;margin:0}html.c-210a:root:root:root:root:root main #clients .specs > article > .cq{grid-column:2;grid-row:2;margin-top:20px}html.c-210a:root:root:root:root:root main #clients .specs > article:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}html.c-210a:root:root:root:root:root main #clients .specs > article:nth-child(even) > .txt{grid-column:2}html.c-210a:root:root:root:root:root main #clients .specs > article:nth-child(even) > .ba,html.c-210a:root:root:root:root:root main #clients .specs > article:nth-child(even) > .cq{grid-column:1}}
html.c-210a:root:root:root:root:root main #clients .specs > article > .txt{order:0;display:flex;flex-direction:column}html.c-210a:root:root:root:root:root main #clients .txt > .outcome{display:block;order:0;margin:0 0 14px;font-size:1.75rem;line-height:1.3;font-weight:700;letter-spacing:-.025em;max-width:20em;text-wrap:balance}html.c-210a:root:root:root:root:root main #clients .txt > h3{order:1;position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:1.375rem;min-height:0;margin:0 0 4px}html.c-210a:root:root:root:root:root main #clients .txt > .what{order:2}html.c-210a:root:root:root:root:root main #clients .txt > dl{order:3}
/* 216a, baked: the flat photo with the 12px corners the cards use, still with no shadow or border */
html:root:root:root:root:root main #about .portrait{border-radius:12px}html:root:root:root:root:root main #about .portrait img{border-radius:inherit}
/* 218a, baked: the panel study heading and its two kinds of study on a maroon card, like the example card beside it */
html:root:root:root:root:root main #ai .ai2-pitch{border-radius:0;padding:0;margin-bottom:28px}
html:root:root:root:root:root main #ai .ai2-pitch .ai2-kinds{max-width:none}
html:root:root:root:root:root main #ai .ai2-pitch{--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;color:#1a0609;background:none;border:0} /* 230 baked Oct 20 2026: no card, a 2px rule on top */
html:root:root:root:root:root main #ai .ai2-pitch::before{content:"";display:block;height:2px;margin:0 0 20px;background:#1a0609}html:root:root:root:root:root main #ai .ai2-pitch h3{color:#1a0609}
@media (max-width:600px){html:root:root:root:root:root main #ai .ai2-pitch{padding:0;border-radius:0}}
@media (min-width:901px){html:root:root:root:root:root main #ai .ai2-pitch{display:block;grid-column:2;grid-row:1 / 5;align-self:start;margin:0}html:root:root:root:root:root main #ai .ai2-pitch h3{margin-top:0}}
/* 222a, baked: wordmark and the hero services line at the left, Copyright centered, Chicago cut, and the flipped mark at the bottom right */
html:root:root:root:root:root .foot .lk-222a{text-wrap:balance;max-width:18em;line-height:1.35}
html:root:root:root:root:root .foot .lk-222{display:none}html:root:root:root:root:root .foot .lk-222a{display:inline}
html:root:root:root:root:root .foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 24px}
html:root:root:root:root:root .foot .sig .corner,html:root:root:root:root:root .foot .cp-sym,html:root:root:root:root:root .foot .foot-city,html:root:root:root:root:root .foot .foot-kind{display:none}html:root:root:root:root:root .foot .cp-word{display:inline}
html:root:root:root:root:root .foot .sig{justify-self:center}html:root:root:root:root:root .foot .foot-mark{display:block;justify-self:end;width:34px;height:27px}
@media (max-width:1000px){html:root:root:root:root:root .foot .wrap{grid-template-columns:minmax(0,1fr) auto}html:root:root:root:root:root .foot .lockup{grid-column:1 / -1}html:root:root:root:root:root .foot .sig{justify-self:start}}
/* 5a, baked Oct 20: the Before launch and After launch columns share row heights, so a row with a link (How a panel study works) keeps the rows across from it in line */
@media (min-width:821px){html:root:root:root:root:root main #good-time .cases-split{grid-template-rows:auto repeat(3,auto)}html:root:root:root:root:root main #good-time .cases-split .phase{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid}html:root:root:root:root:root main #good-time .cases-split .phase > .cases{display:grid;grid-row:2 / span 3;grid-template-rows:subgrid}}
/* 197e: the Shipping AI strip right after Selected work, on Lichen, so it reads as its own band between the maroon black and the moss */
html.c-197e:root:root:root:root:root main > .ai-teaser .wrap{padding-block:28px}@media (max-width:600px){html.c-197e:root:root:root:root:root main > .ai-teaser .wrap{padding-block:20px}}
/* 208d: When to bring me in sits right under the four offers on the same ground, with no rule between them, and keeps its full heading */
html.c-208d:root:root:root:root:root main #services{padding-bottom:0}html.c-208d:root:root:root:root:root main #good-time.merged{padding-top:24px}
/* 209d: no labels, and the gold bar from the hero goes on Desire paths in the band heading */
.hl-name{white-space:nowrap}html.c-209d:root:root:root:root:root main #name .hl-name{background:var(--highlight);color:var(--on-highlight);padding:.02em .1em .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Oct 20 2026: hero proportions (223a, 223b). Tighter gaps that grow from the headline outward: subhead close to the headline, the services line close to the subhead, the buttons one step further, the logos one step further again. Buttons drop from 64px to about 52px tall on desktop */
html.c-223a:root:root:root:root:root .hero,html.c-223b:root:root:root:root:root .hero{padding-top:72px;padding-bottom:64px}
html.c-223a:root:root:root:root:root .hero .h1b,html.c-223b:root:root:root:root:root .hero .h1b{margin-top:20px}
html.c-223a:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c),html.c-223b:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){margin:16px 0 36px}
html.c-223a:root:root:root:root:root .hero .actions,html.c-223b:root:root:root:root:root .hero .actions{margin-top:0}
html.c-223a:root:root:root:root:root .hero .actions .btn,html.c-223b:root:root:root:root:root .hero .actions .btn{font-size:1.125rem;padding:13px 32px}
html.c-223a:root:root:root:root:root .hero .actions a:not(.btn),html.c-223b:root:root:root:root:root .hero .actions a:not(.btn){min-width:200px;font-size:1.125rem;padding:11px 30px}
html.c-223b:root:root:root:root:root .hero .h1b{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.2}
@media (max-width:900px){
  html.c-223a:root:root:root:root:root .hero,html.c-223b:root:root:root:root:root .hero{padding-top:48px;padding-bottom:44px}
  html.c-223a:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c),html.c-223b:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){margin:14px 0 32px}
}
@media (max-width:600px){
  html.c-223a:root:root:root:root:root .hero,html.c-223b:root:root:root:root:root .hero{padding-top:40px;padding-bottom:32px}
  html.c-223a:root:root:root:root:root .hero .h1b,html.c-223b:root:root:root:root:root .hero .h1b{margin-top:18px}
  html.c-223a:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c),html.c-223b:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){margin:14px 0 32px}
  html.c-223a:root:root:root:root:root .hero .actions .btn,html.c-223b:root:root:root:root:root .hero .actions .btn{font-size:1.0625rem;padding:0 24px}
  html.c-223b:root:root:root:root:root .hero .h1b{font-size:min(6vw,1.375rem)}
}


/* Oct 20 2026: 224 hero footprint color (a soft Lichen, b gold, c full Lichen) */
html.c-224a:root:root:root:root:root:root .hero .trail .steps-g2{fill:#ecede4;opacity:.55}
html.c-224b:root:root:root:root:root:root .hero .trail .steps-g2{fill:#e0ac2b}
html.c-224c:root:root:root:root:root:root .hero .trail .steps-g2{fill:#ecede4}

/* Oct 20 2026: 225 About heading and 226 When to bring me in copy. Swap pieces are <i> elements so the cases' span rules don't reach them */
html:root:root:root:root:root:root #h-about i,html:root:root:root:root:root:root #good-time .cases i{font-style:inherit}
html:root:root:root:root:root:root #h-about .w225,html:root:root:root:root:root:root #good-time .w226a,html:root:root:root:root:root:root #good-time .w226b{display:none}
html.c-225:root:root:root:root:root:root #h-about .w0{display:none}html.c-225:root:root:root:root:root:root #h-about .w225{display:inline}
html.c-226a:root:root:root:root:root:root #good-time .w0,html.c-226b:root:root:root:root:root:root #good-time .w0{display:none}
html.c-226a:root:root:root:root:root:root #good-time .w226a,html.c-226b:root:root:root:root:root:root #good-time .w226b{display:inline}

/* Oct 20 2026: Selected work, 210b and 210c. Both start from 210 (stacked clients, static before and after pairs). Phones stack text, before, after, and the quote */
@media (min-width:901px){
  /* 210b: text on top (outcome, client, and line on the left, Work and Results on the right), the pair large and side by side across the full width, the quote right under it */
  html.c-210b:root:root:root:root:root:root main #clients .specs > article{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr auto auto;column-gap:56px}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > .outcome{grid-column:1;grid-row:1}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > h3{grid-column:1;grid-row:2}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > .what{grid-column:1;grid-row:3}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > dl{grid-column:2;grid-row:1 / span 3;margin-top:0}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > .ba{grid-column:1 / -1;grid-row:4;margin:32px 0 0;max-width:none}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > .ba:has(.portrait){max-width:600px}
  html.c-210b:root:root:root:root:root:root main #clients .specs > article > .cq{grid-column:1 / -1;grid-row:5;margin-top:24px;max-width:46em}
  html.c-210b:root:root:root:root:root:root main #clients .cmp-frame,html.c-210b:root:root:root:root:root:root main #clients .cmp-lbl{gap:20px}
  /* 210c: text on the left, before stacked above after on the right, the quote under the pair */
  html.c-210c:root:root:root:root:root:root main #clients .specs > article{grid-template-rows:auto auto auto 1fr auto;column-gap:56px}
  html.c-210c:root:root:root:root:root:root main #clients .specs > article > .ba{grid-column:2;grid-row:1 / span 4}
  html.c-210c:root:root:root:root:root:root main #clients .specs > article > .cq{grid-column:2;grid-row:5;margin-top:24px}
}
/* 210c at every width, and 210b on phones and tablets: before above after, each with its own label. Phone-sized screens (Sherwood) stay side by side */
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)){display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px}
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) :is(.cmp-lbl,.cmp-stage,.cmp-frame){display:contents}
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-lbl span:first-child{order:1}
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-a{order:2;margin-bottom:14px}
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-lbl span:last-child{order:3}
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-b{order:4}
html.c-210c:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .ba-cap{order:5;margin-top:8px}
@media (max-width:900px){
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)){display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px}
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) :is(.cmp-lbl,.cmp-stage,.cmp-frame){display:contents}
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-lbl span:first-child{order:1}
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-a{order:2;margin-bottom:14px}
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-lbl span:last-child{order:3}
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .cmp-b{order:4}
  html.c-210b:root:root:root:root:root:root main #clients .ba:not(:has(.portrait)) .ba-cap{order:5;margin-top:8px}
}


/* Oct 20 2026: 229 slider labels. a: no arrows, plain Before and After either side of the divider. b: arrows only while both labels show, gone once the slider sits at one end */
html.c-229a:root:root:root:root:root:root .cmp-lbl span:first-child::before,html.c-229a:root:root:root:root:root:root .cmp-lbl span:last-child::after{display:none}
html.c-229b:root:root:root:root:root:root .cmp-lbl:is(.b-off,.a-off) span:first-child::before,html.c-229b:root:root:root:root:root:root .cmp-lbl:is(.b-off,.a-off) span:last-child::after{display:none}

/* Oct 20 2026: 230 (baked) removes the filled panel behind the work sliders. The panel study block's card was removed in its base rules above */
html:root:root:root:root:root:root main #clients .ba{background:none;padding:0;border-radius:0}
html:root:root:root:root:root:root main #ai .ai2-pitch :is(h3,dt,b,strong,p,li){color:#1a0609}
html:root:root:root:root:root:root main #ai .ai2-pitch dd{color:#4d5848}
html:root:root:root:root:root:root main #ai .ai2-pitch :is(dl,dt,dd,li){border-color:#c5d1bf}

/* Oct 20 2026: 232 pricing FAQ (a: process first, b: renamed question with the full sequence). Both also rename "scoped proposal" in Let's connect to "Scope & approach" */
html:root:root:root:root:root:root #faq .faq-grid i,html:root:root:root:root:root:root #contact .call-list i{font-style:inherit}
html:root:root:root:root:root:root #faq .w232a,html:root:root:root:root:root:root #faq .w232b,html:root:root:root:root:root:root #contact .w232{display:none}
html.c-232a:root:root:root:root:root:root #faq .faq-grid li:first-child .w0,html.c-232b:root:root:root:root:root:root #faq .faq-grid li:first-child .w0,html.c-232a:root:root:root:root:root:root #contact .call-list .w0,html.c-232b:root:root:root:root:root:root #contact .call-list .w0{display:none}
html.c-232a:root:root:root:root:root:root #faq .w232a,html.c-232b:root:root:root:root:root:root #faq .w232b,html.c-232a:root:root:root:root:root:root #contact .w232,html.c-232b:root:root:root:root:root:root #contact .w232{display:inline}

/* Oct 20 2026: 233 each client block leads with the logo and the company line, then the headline about the work, then Work and Results */
html.c-233:root:root:root:root:root:root main #clients .specs > article .txt > h3,html.c-233:root:root:root:root:root:root main #clients .specs > article > h3{order:0;margin:0 0 4px}
html.c-233:root:root:root:root:root:root main #clients .specs > article .txt > .what,html.c-233:root:root:root:root:root:root main #clients .specs > article > .what{order:1;margin:0}
html.c-233:root:root:root:root:root:root main #clients .specs > article .txt > .outcome,html.c-233:root:root:root:root:root:root main #clients .specs > article > .outcome{order:2;margin:20px 0 16px}
html.c-233:root:root:root:root:root:root main #clients .specs > article .txt > dl,html.c-233:root:root:root:root:root:root main #clients .specs > article > dl{order:3}
/* 234: Selected work headlines that describe the whole engagement */
html:root:root:root:root:root:root #clients .outcome i{font-style:inherit}
html:root:root:root:root:root:root #clients .outcome .w234a,html:root:root:root:root:root:root #clients .outcome .w234b{display:none}
html.c-234a:root:root:root:root:root:root #clients .outcome .w0,html.c-234b:root:root:root:root:root:root #clients .outcome .w0{display:none}
html.c-234a:root:root:root:root:root:root #clients .outcome .w234a,html.c-234b:root:root:root:root:root:root #clients .outcome .w234b{display:inline}
/* 235a: the services line moves under the hero buttons, smaller and quieter */
html.c-235a:root:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){order:1;margin:20px 0 0;font-size:1rem;line-height:1.5}
html.c-235a:root:root:root:root:root:root .hero .actions{margin-top:32px}
@media (max-width:600px){html.c-235a:root:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){margin-top:16px;font-size:.9375rem}html.c-235a:root:root:root:root:root:root .hero .actions{margin-top:28px}}

/* Oct 20 2026, baked: 239a (the AI evaluation opening is the claim and the study, the audience line sits above Talk to Karl, the 2019 background is an About row) and 240 (the patient message on Lichen) */
#ai .ai2-for{margin:24px 0 0;max-width:44ch;font-size:1rem;line-height:1.5;color:var(--fg-2)}
@media (min-width:901px){html.c-188:root:root #ai .ai2-for{grid-area:for}}
html:root:root:root:root:root:root main #ai .msg.patient{background:#ecede4;color:#1a0609;--fg:#1a0609;--fg-2:#5f4b48}
html:root:root:root:root:root:root main #ai .ai2-stat{text-wrap:balance}

/* Oct 20 2026: the Shipping AI strip link sits inline right after its sentence (Karl's edit) */
.ai-teaser p .tz-link{display:inline-block;min-height:0;padding:10px 0;margin:-10px 0;white-space:nowrap}

/* Oct 20 2026, baked: 241c (Work and Results labels 16px bold, the label column only as wide as "Results") */
html:root:root:root:root:root:root:root main #clients .specs dl{grid-template-columns:max-content minmax(0,1fr);column-gap:20px}
html:root:root:root:root:root:root:root main #clients .specs dt{font-size:1rem;line-height:1.5;font-weight:700;color:var(--fg);padding-top:10px}

/* Oct 20 2026, baked: 242a (the claim, the study, and the panel study pitch run first, then the Grade example beside the sample readout. Phones: the pitch above the example) */
@media (max-width:900px){
  html:root:root:root:root:root:root:root #ai .ai2-grid{display:flex;flex-direction:column;gap:0}
  html:root:root:root:root:root:root:root #ai .ai2-offer{display:contents}
  html:root:root:root:root:root:root:root #ai .ai2-pitch{order:-1;margin-bottom:32px}
  html:root:root:root:root:root:root:root #ai .ai2-sample{margin-top:40px}
}
@media (min-width:901px){
  html.c-188:root:root:root:root:root:root:root #ai .ai2{grid-template-areas:"lede lede" "stat stat" "pitch pitch" "case sample" "case for" "case act" "case guard" "case .";grid-template-rows:auto auto auto auto auto auto auto 1fr}
  html.c-188:root:root:root:root:root:root:root #ai .ai2-pitch{grid-area:pitch;display:block;max-width:760px}
  html.c-188:root:root:root:root:root:root:root #ai .ai2-offer h3{margin:0;max-width:30ch}
  html.c-188:root:root:root:root:root:root:root #ai .ai2-kinds{margin:16px 0 0}
  html.c-188:root:root:root:root:root:root:root #ai .ai2-sample{margin:40px 0 0;align-self:start}
  html.c-188:root:root:root:root:root:root:root #ai .ai2-case{margin-top:40px}
  html.c-188:root:root:root:root:root:root:root #ai .ai2-lede,html.c-188:root:root:root:root:root:root:root #ai .ai2-stat{max-width:30ch}
}

/* Oct 20 2026, baked: 245c (the study under a 2px rule with "64-68%" on the gold marker). Karl found the space around the two rules uneven, so both rules now follow one rhythm: 32px of space before each rule and 24px after it */
html:root:root:root:root:root:root:root:root main #ai .ai2-lede{margin-bottom:0}
html:root:root:root:root:root:root:root:root main #ai .ai2-stat{border-top:2px solid var(--fg);margin:32px 0 32px;padding-top:24px}
html:root:root:root:root:root:root:root:root main #ai .ai2-stat .num{background:var(--highlight);color:var(--on-highlight);padding:.02em .12em .06em}
html:root:root:root:root:root:root:root:root main #ai .ai2-pitch{margin-top:0}
html:root:root:root:root:root:root:root:root main #ai .ai2-pitch::before{margin:0 0 24px}
html:root:root:root:root:root:root:root:root main #ai .ai2-offer h3{margin-top:0}

/* Oct 20 2026, baked: 246b with the copyright centered (Karl). One line at every width: the wordmark at the left, "© 2026 Desire Path Research LLC" centered, the corner mark at the right. The wordmark image is cut so its letters stand about 20px tall, level with the 15px text. Phones: the same line with smaller pieces, spaced evenly */
html:root:root:root:root:root:root:root .foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
html:root:root:root:root:root:root:root .foot .lockup{display:flex;align-items:center;justify-self:start;grid-column:auto}
html:root:root:root:root:root:root:root .foot .lockup img{height:42px;width:auto;margin:-10px -5px -12px -6px}
html:root:root:root:root:root:root:root .foot .sig{justify-self:center;margin:0;white-space:nowrap;font-size:.9375rem;line-height:1.4}
html:root:root:root:root:root:root:root .foot .foot-mark{display:block;justify-self:end;margin:0;width:28px;height:22px}
@media (max-width:600px){
  html:root:root:root:root:root:root:root .foot .wrap{display:flex;justify-content:space-between;gap:12px}
  html:root:root:root:root:root:root:root .foot .lockup img{height:32px;margin:-7px -4px -9px -5px}
  html:root:root:root:root:root:root:root .foot .sig{font-size:.8125rem}
  html:root:root:root:root:root:root:root .foot .foot-mark{width:24px;height:19px}
}

/* Oct 20 2026: 247a, worn-path light in the hero only (Karl, Oct 21: faint works in the hero as a gradient, not in the other green bands). Earlier: on the green bands (group path-light). A soft lighter streak along the hero trail's curve, like grass worn where people walk, on the hero, How a project works, and the desire paths band. a faint (6%), b medium (10%), c strong (14%). At 10% Lichen text on the brightest part stays at 4.9:1 and the muted text at 4.5:1. At 14% the muted text drops to 4.1:1 where the streak crosses it. A blurred SVG stroke, no motion */
html.c-247a:root:root:root:root:root:root:root .open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='38'/%3E%3C/filter%3E%3Cpath d='M -120 690 C 330 600%2C 790 400%2C 1330 -90' fill='none' stroke='%23ecede4' stroke-opacity='.06' stroke-width='150' stroke-linecap='round' filter='url%28%23b%29'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}

/* Oct 20 2026: 248, baked Oct 20 (Karl accepted). The things Karl delivers shown as objects: the sample readout sits flat on a second sheet, the example card, chat bubbles, and work screens get soft layered shadows. Flat again once the readout opens */
html:root:root:root:root:root:root:root:root main #ai .ai2-sample:not(.open){box-shadow:9px 9px 0 -2px #dfe2d6,9px 9px 1px -1px rgba(17,13,4,.12),0 2px 3px rgba(17,13,4,.06),0 22px 44px -22px rgba(17,13,4,.38);overflow:hidden}
html:root:root:root:root:root:root:root:root main #ai .ai2-case{box-shadow:0 1px 2px rgba(17,13,4,.1),0 14px 28px -12px rgba(17,13,4,.3),0 40px 70px -36px rgba(17,13,4,.4)}
html:root:root:root:root:root:root:root:root main #clients .cmp-frame{box-shadow:0 0 0 1px rgba(236,237,228,.08),0 1px 0 rgba(236,237,228,.12) inset,0 26px 50px -24px rgba(0,0,0,.9);border-radius:6px}

/* Oct 21 2026, baked: 249a. The before and after sliders sweep once when they come into view (script after the slider script). That is the page's one motion moment, so the hero footprint trail is drawn at rest */
html:root:root:root:root:root:root:root .hero .trail path,html:root:root:root:root:root:root:root .hero .step{animation:none}

/* Oct 21 2026: 250a, baked Oct 20 (Karl accepted, 250b rejected). Client logos in Selected work sit on a Lichen tag with the logo in maroon black, so each client name reads first */
html:root:root:root:root:root:root:root:root:root main #clients .specs article h3{display:inline-flex;align-items:center;gap:10px;width:fit-content;margin:0 0 12px;padding:10px 14px;border-radius:8px;background:#ecede4;color:#1a0609}
html:root:root:root:root:root:root:root:root:root main #clients .specs article h3 img{filter:brightness(0) opacity(.9)}

/* Oct 21 2026: 251, a real desire path photo in the hero (group hero-photo). a Karl's fog photo across the whole hero under a green wash (accepted Oct 20 with the note that the path is hard to see). Oct 20 rework, same fade idea with the path in clear view: d the fog photo cropped in so its straight shortcut sits right of the text, e Karl's S-curve photo at the right edge fading into the green, f the photo of a man on a worn shortcut the same way. Under any of them the footprint trail is hidden. Photos supplied by Karl, license to confirm before launch */
html:is(.c-251a,.c-251d,.c-251e,.c-251f,.c-251i,.c-251j):root:root:root:root:root:root:root .hero .trail{display:none}
html.c-251a:root:root:root:root:root:root:root .open{background-image:linear-gradient(90deg,rgba(76,90,70,.95) 0%,rgba(76,90,70,.9) 52%,rgba(76,90,70,.5) 100%),url("assets/hero/fog-curve.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
@media (max-width:900px){html.c-251a:root:root:root:root:root:root:root .open{background-image:linear-gradient(rgba(76,90,70,.84),rgba(76,90,70,.84)),url("assets/hero/fog-curve.jpg")}}
html.c-251d:root:root:root:root:root:root:root .open{background:linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 46%,rgba(76,90,70,.62) 63%,rgba(76,90,70,.16) 100%),url("assets/hero/fog-curve.jpg") right -522px top 72%/auto 120% no-repeat,#4c5a46}
html.c-251e:root:root:root:root:root:root:root .open{background:linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 60.5%,rgba(76,90,70,.8) 68%,rgba(76,90,70,.3) 82%,rgba(76,90,70,.08) 100%),url("assets/hero/s-curve-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
html.c-251f:root:root:root:root:root:root:root .open{background:linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 60.5%,rgba(76,90,70,.8) 68%,rgba(76,90,70,.3) 82%,rgba(76,90,70,.08) 100%),url("assets/hero/walker-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
@media (max-width:900px){
  html.c-251d:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/fog-curve.jpg") 52% 100%/100% auto no-repeat,#4c5a46}
  html.c-251e:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/s-curve-shortcut.jpg") center bottom -150px/100% auto no-repeat,#4c5a46}
  html.c-251f:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/walker-shortcut.jpg") center bottom -150px/100% auto no-repeat,#4c5a46}
}

/* Oct 20 2026: with 248 baked the readout sheet has a shadow, so its decision box would read as a card inside a card. The box becomes a 2px rule with no fill, like the panel study block */
html:root:root:root:root:root:root:root:root main #ai .ai2-sample .decision{background:none;border-radius:0;border-top:2px solid currentColor;padding:12px 0 0}
html:root:root:root:root:root:root:root:root main #ai .ai2-sample:not(.open) .sheet{box-shadow:none;border-radius:0}

/* Oct 20 2026: 251g/h (phones and tablets: the photo spans the full width, so its edges never show, fixed after Karl saw them at tablet width), Karl's corner photo (a worn dirt shortcut cutting across the grass beside a brick path, no person), same fade as 251e. g as shot, anchored right so the shortcut sits right of the text. h mirrored, so the brick path runs along the right edge and the shortcut cuts toward the text */
html:is(.c-251g,.c-251h):root:root:root:root:root:root:root .hero .trail{display:none}
html.c-251g:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,rgba(76,90,70,.92) 0,rgba(76,90,70,0) 130px),linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 52%,rgba(76,90,70,.78) 62%,rgba(76,90,70,.3) 78%,rgba(76,90,70,.08) 100%),url("assets/hero/corner-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
html.c-251h:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,rgba(76,90,70,.92) 0,rgba(76,90,70,0) 130px),linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 56%,rgba(76,90,70,.78) 64%,rgba(76,90,70,.3) 78%,rgba(76,90,70,.08) 100%),url("assets/hero/corner-shortcut-flip.jpg") right -200px center/auto 100% no-repeat,#4c5a46}
@media (max-width:900px){
  html.c-251g:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/corner-shortcut.jpg") 70% bottom/100% auto no-repeat,#4c5a46}
  html.c-251h:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/corner-shortcut-flip.jpg") 30% bottom/100% auto no-repeat,#4c5a46}
}


/* Oct 20 2026 (designer review, Karl's picks): cards 254 to 262. Each block is guarded by its own class until Karl decides */
html:root:root:root:root:root:root:root:root:root main #clients .credit,html:root:root:root:root:root:root:root:root:root main #clients .work-close,html:root:root:root:root:root:root:root:root:root main #clients .work-close > *,html:root:root:root:root:root:root:root:root:root main #ai .ai2-peek{display:none}

/* 254: a Talk to Karl row at the end of Selected work, so people who just read the cases can book without scrolling back up */
html.c-254:root:root:root:root:root:root:root:root:root main #clients .work-close{display:block;margin-top:72px;padding-top:48px;border-top:1px solid var(--line)}
html.c-254:root:root:root:root:root:root:root:root:root main #clients .wc-book{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
html.c-254:root:root:root:root:root:root:root:root:root main #clients .wc-book .btn{min-width:220px;justify-content:center;background:#ecede4;color:#1a0609;font-size:1.125rem;font-weight:700;padding:14px 32px;box-shadow:none}
html.c-254:root:root:root:root:root:root:root:root:root main #clients .wc-book .btn:hover{background:var(--highlight);color:#1a0609}
html.c-254:root:root:root:root:root:root:root:root:root main #clients .wc-book p{margin:0;font-size:1.125rem;color:var(--fg-2)}
@media (max-width:600px){ html.c-254:root:root:root:root:root:root:root:root:root main #clients .work-close{margin-top:48px;padding-top:36px} html.c-254:root:root:root:root:root:root:root:root:root main #clients .wc-book .btn{width:100%} }

/* 255: the Work row goes, since it repeats the headline. The credit sits as one plain line under the headline, Results runs full width with its label above, and the headline sets smaller */
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article .credit{display:block;order:2;margin:-6px 0 20px;font-size:1.125rem;line-height:1.45;color:var(--fg-2)}
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article dl > dt:first-of-type,html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article dl > dd:first-of-type{display:none}
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article dl{display:block}
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article dl::before{content:"";display:block;height:1px;margin-bottom:16px;background:var(--line)}
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article dl > dt{margin:0 0 10px;padding:0;border:0;font-size:1rem;font-weight:700;color:var(--fg)}
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article dl > dd{margin:0;padding:0;border:0;border-top:0 none}
html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article .outcome{font-size:2rem;line-height:1.15;max-width:18ch;margin-bottom:12px}
@media (max-width:600px){ html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article .outcome{font-size:1.625rem} html.c-255:root:root:root:root:root:root:root:root:root main #clients .specs article .credit{font-size:1rem} }

/* 256: the sample readout at full size, cropped with a fade, and the full readout link right under it */
html.c-256:root:root:root:root:root:root:root:root:root main #ai .ai2-sample:not(.open){height:auto;max-height:400px}
html.c-256:root:root:root:root:root:root:root:root:root main #ai .ai2-sample:not(.open) .sheet{width:auto;transform:none}
html.c-256:root:root:root:root:root:root:root:root:root main #ai .ai2-sample:not(.open)::after{height:140px;background:linear-gradient(rgba(236,237,228,0),#ecede4 85%)}
html.c-256:root:root:root:root:root:root:root:root:root main #ai .ai2-peek{display:inline-flex;grid-area:peek;justify-self:start;align-self:start;margin-top:8px}
html.c-256:root:root:root:root:root:root:root:root:root main #ai .ai2-actions .ai2-sample-btn:not(.ai2-peek){display:none}
@media (min-width:901px){
  html.c-256.c-188:root:root:root:root:root:root:root:root:root main #ai .ai2{grid-template-areas:"lede lede" "stat stat" "pitch pitch" "case sample" "case peek" "case for" "case act" "case guard" "case .";grid-template-rows:auto auto auto auto auto auto auto auto 1fr}
}
@media (max-width:600px){ html.c-256:root:root:root:root:root:root:root:root:root main #ai .ai2-sample:not(.open){max-height:440px} }

/* 257: the hero services line, the one line that says what this is, at 20px in full Lichen */
html.c-257:root:root:root:root:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){font-size:1.25rem;line-height:1.4;font-weight:500;color:#ecede4}
@media (max-width:600px){html.c-257:root:root:root:root:root:root:root:root:root .hero .hero-kind:not(.hero-kind-180c){font-size:1.125rem}}

/* 258: the Shipping AI strip folds into the end of Selected work, so there is no thin band between the dark and green sections */
html.c-258:root:root:root:root:root:root:root:root:root main > .ai-teaser,html.c-258:root:root:root:root:root:root:root:root:root main .ai-teaser{display:none!important}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .work-close{display:block;margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:0;font-size:1.125rem;line-height:1.5;color:var(--fg-2)}
html.c-254.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai .svc-marks{display:flex;gap:18px}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai > span:last-child{flex:1 1 30ch;min-width:0}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai b{color:var(--fg);font-weight:700}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai .tz-link{display:inline-block;padding:10px 0;margin:-10px 0;font-weight:700;color:var(--fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-color:var(--highlight)}
html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai .tz-link:hover{text-decoration-color:var(--fg)}
@media (max-width:600px){ html.c-258:root:root:root:root:root:root:root:root:root main #clients .wc-ai .svc-marks{display:none} html.c-258:root:root:root:root:root:root:root:root:root main #clients .work-close{margin-top:48px} }

/* 259: the slider bar right under the image, the caption under the bar (alternative to the current order) */
html.c-259:root:root:root:root:root:root:root:root:root main #clients .ba.cmp{display:flex;flex-direction:column}
html.c-259:root:root:root:root:root:root:root:root:root main #clients .ba.cmp .cmp-range{order:2;margin-top:14px}
html.c-259:root:root:root:root:root:root:root:root:root main #clients .ba.cmp .ba-cap{order:3;margin-top:12px}

/* 260: Let's connect, with the button as strong as the hero's, a quieter email, and no arc */
html.c-260:root:root:root:root:root:root:root:root:root main #contact .actions .btn{min-width:220px;justify-content:center;padding:16px 32px;font-size:1.125rem;font-weight:700;box-shadow:0 1px 2px rgba(17,13,4,.18)}
html.c-260:root:root:root:root:root:root:root:root:root #contact .curve2{display:none}
html.c-260:root:root:root:root:root:root:root:root:root main #contact .big{font-size:1.5rem}
@media (max-width:600px){ html.c-260:root:root:root:root:root:root:root:root:root main #contact .big{font-size:1.25rem} html.c-260:root:root:root:root:root:root:root:root:root main #contact .actions .btn{width:100%} }

/* 261: drawings normalized. a When to call Karl: the bars stay filled and now sit on the baseline (Karl, Oct 20: outlined bars looked separate from the line). The no-pay sign stays centered under the two drawings above it (Karl, Oct 20). b the same plus Four ways: every drawing in the same 72px slot so the four titles line up */
html.c-261b:root:root:root:root:root:root:root:root:root main #services .grid2 > li > .svc{height:72px;margin-bottom:20px}
html.c-261b:root:root:root:root:root:root:root:root:root main #services .grid2 > li > svg.svc{width:auto}
html.c-261b:root:root:root:root:root:root:root:root:root main #services .grid2 > li > .svc-marks{align-items:center}
@media (max-width:600px){ html.c-261b:root:root:root:root:root:root:root:root:root main #services .grid2 > li > .svc{height:56px;margin-bottom:16px} }

/* 262: About with a smaller photo and a wider proof grid, larger proof titles, and a calmer lead */
@media (min-width:901px){
  html.c-262:root:root:root:root:root:root:root:root:root main #about .portrait{grid-column:1 / span 4}
  html.c-262:root:root:root:root:root:root:root:root:root main #about .body{grid-column:6 / -1}
  html.c-262:root:root:root:root:root:root:root:root:root main #about .lead{font-size:2rem}
}
html.c-262:root:root:root:root:root:root:root:root:root main #about .proof b{font-size:1.625rem;line-height:1.2}
html.c-262:root:root:root:root:root:root:root:root:root main #about .proof li{font-size:1.0625rem}
@media (max-width:600px){ html.c-262:root:root:root:root:root:root:root:root:root main #about .proof b{font-size:1.375rem} }
html:root:root:root:root:root:root:root:root:root:root main #clients .work-close{grid-column:1 / -1}
html:is(.c-254,.c-260):root:root:root:root:root:root:root:root:root:root main :is(#clients .wc-book,#contact .actions) .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}


/* Oct 20 2026 (brand review, Karl's picks): cards 263 to 267 */
/* 263: check and cross marks in one weight. a every mark row drawn with the thin rounded mark from the AI example (2.6 stroke on a 24px box), b the Four ways AI drawing becomes a framed graded reply in the same outline style as its neighbors, and the Shipping AI marks go away */
html:root:root:root:root:root:root:root:root:root main #services .svc-graded{display:none}
html:root:root:root:root:root:root:root:root:root main .s-vm{fill:none;stroke:var(--fg);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}
html.c-263a:root:root:root:root:root:root:root:root:root main .svc-marks i{transform:none;width:22px;height:22px;background:var(--fg);-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat}
html.c-263a:root:root:root:root:root:root:root:root:root main .svc-marks i::before,html.c-263a:root:root:root:root:root:root:root:root:root main .svc-marks i::after{display:none}
html.c-263a:root:root:root:root:root:root:root:root:root main .svc-marks .y{--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.c-263a:root:root:root:root:root:root:root:root:root main .svc-marks .n{--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
html.c-263a:root:root:root:root:root:root:root:root:root main .svc-marks{gap:6px}
html.c-263a:root:root:root:root:root:root:root:root:root main #services .svc-marks i{width:30px;height:30px}
html.c-263b:root:root:root:root:root:root:root:root:root main #services .grid2 .svc-marks{display:none}
html.c-263b:root:root:root:root:root:root:root:root:root main #services .svc-graded{display:block}
html.c-263b:root:root:root:root:root:root:root:root:root main .ai-teaser .svc-marks,html.c-263b:root:root:root:root:root:root:root:root:root main #clients .wc-ai .svc-marks{display:none}

/* 264: the desire paths band copy, three alternatives */
html:root:root:root:root:root:root:root:root:root main #name .w264a,html:root:root:root:root:root:root:root:root:root main #name .w264b,html:root:root:root:root:root:root:root:root:root main #name .w264c,html:root:root:root:root:root:root:root:root:root main #name .w264d{display:none}
html:root:root:root:root:root:root:root:root:root main #name i{font-style:normal}
html:is(.c-264a,.c-264b,.c-264c,.c-264d):root:root:root:root:root:root:root:root:root main #name .w0{display:none}
html.c-264a:root:root:root:root:root:root:root:root:root main #name .w264a,html.c-264b:root:root:root:root:root:root:root:root:root main #name .w264b,html.c-264c:root:root:root:root:root:root:root:root:root main #name .w264c,html.c-264d:root:root:root:root:root:root:root:root:root main #name .w264d{display:inline}

/* 265: curly punctuation (review layer swap) and a little more room between letters in the 96px headings */
html.c-265:root:root:root:root:root:root:root:root:root main :is(.sec,.how .sec,.ai .sec,.contact .sec) > h2:not(#h-name):not(#h-logos){letter-spacing:-.032em}

/* 266: the portrait in a Pitch Black and Lichen duotone (filter #dp-duo in site.html). Bake into the image files when picked */
html.c-266:root:root:root:root:root:root:root:root:root main #about .portrait img{filter:url(#dp-duo)}

/* 267: gold marks human judgment only, so the Shipping AI link takes a plain underline like every other inline link */
html.c-267:root:root:root:root:root:root:root:root:root main :is(.ai-teaser,#clients .wc-ai) .tz-link{text-decoration-color:currentColor;text-decoration-thickness:1px}

/* Oct 20 2026 (Karl): the arrow before "After launch" sits on the middle of the lowercase letters, level with the heading text */
html.c-178b:root:root:root:root:root:root:root:root:root .cases-split .launch-arrow{top:16px}


/* Oct 20 2026: 268, the Shipping AI strip's alignment (group strip-align). a centered in the column, b the sentence at the left and See AI evaluation pushed to the right edge, so the line spans the column. Phones stay left-aligned in both */
@media (min-width:601px){
  html.c-268a:root:root:root:root:root:root:root:root:root main .ai-teaser .wrap{justify-content:center}
  html.c-268a:root:root:root:root:root:root:root:root:root main .ai-teaser p{flex:0 1 auto;text-align:center}
  html.c-268b:root:root:root:root:root:root:root:root:root main .ai-teaser p{flex:1 1 auto}
  html.c-268b:root:root:root:root:root:root:root:root:root main .ai-teaser .tz-link{float:right;margin-left:24px}
}


/* Oct 20 2026 (Karl's notes on the preview): cards 269 to 272 */
/* 269: AI evaluation uses the full width at the top. The claim and the study sit on the left, the panel study pitch with Grade and Compare on the right */
@media (min-width:901px){
  html.c-269.c-188:root:root:root:root:root:root:root:root:root main #ai .ai2{grid-template-areas:"lede pitch" "stat pitch" "case sample" "case peek" "case for" "case act" "case guard" "case .";grid-template-rows:auto auto auto auto auto auto auto 1fr}
  html.c-269.c-188:root:root:root:root:root:root:root:root:root main #ai .ai2-pitch{align-self:start;max-width:none;margin-top:6px}
  html.c-269.c-188:root:root:root:root:root:root:root:root:root main #ai .ai2-offer h3{font-size:1.5rem;line-height:1.3;max-width:none}
  html.c-269.c-188:root:root:root:root:root:root:root:root:root main #ai .ai2-kinds > div{display:block}
  html.c-269.c-188:root:root:root:root:root:root:root:root:root main #ai .ai2-kinds dt{margin-bottom:4px}
}

/* 271: Before Desire Path in the order Fortune 500, 0 to >100k, Seed to Series B, Peer-reviewed, so the two one-line rows sit side by side on top */

/* 272: less empty space. a Let's connect only: half the space under it before the footer. b every section: about 20% less space above and below, plus a */
html:is(.c-272a,.c-272b):root:root:root:root:root:root:root:root:root main #contact > .sec{padding-bottom:56px}
@media (max-width:600px){ html:is(.c-272a,.c-272b):root:root:root:root:root:root:root:root:root main #contact > .sec{padding-bottom:36px} }
@media (min-width:601px){
  html.c-272b:root:root:root:root:root:root:root:root:root main :is(#clients,#about,#faq),html.c-272b:root:root:root:root:root:root:root:root:root main :is(#ai,#contact) > .sec{padding-top:96px}
  html.c-272b:root:root:root:root:root:root:root:root:root main :is(#clients,#about,#faq),html.c-272b:root:root:root:root:root:root:root:root:root main #ai > .sec{padding-bottom:88px}
  html.c-272b:root:root:root:root:root:root:root:root:root main #how > .sec{padding-top:64px;padding-bottom:64px}
  html.c-272b:root:root:root:root:root:root:root:root:root main #name > .sec{padding-top:88px;padding-bottom:88px}
  html.c-272b:root:root:root:root:root:root:root:root:root main #good-time{padding-bottom:72px}
  html.c-272b:root:root:root:root:root:root:root:root:root main #services{padding-top:64px}
}
@media (max-width:600px){
  html.c-272b:root:root:root:root:root:root:root:root:root main :is(#clients,#about,#faq),html.c-272b:root:root:root:root:root:root:root:root:root main :is(#how,#ai,#contact) > .sec{padding-top:44px}
  html.c-272b:root:root:root:root:root:root:root:root:root main :is(#clients,#about,#faq),html.c-272b:root:root:root:root:root:root:root:root:root main :is(#how,#ai) > .sec{padding-bottom:44px}
}
@media (min-width:901px){html.c-269.c-188:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-lede,.ai2-stat){max-width:none}}


/* Oct 20 2026: 269b, AI evaluation text at the full width of the section (Karl: like Four ways and When to call Karl), one column as now */
@media (min-width:901px){
  html.c-269b:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-lede,.ai2-stat,.ai2-pitch,.ai2-pitch h3,.ai2-offer h3){max-width:none}
  html.c-269b:root:root:root:root:root:root:root:root:root main #ai .ai2-lede{text-wrap:balance}
}

/* Oct 20 2026: 273, more to look at in the desire paths band (group name-visual). a three of Karl's desire path photos in a green duotone, decorative. b the idea in product form: a five-screen flow that was built, and a clay dotted shortcut from the first screen to the last, with a key */
html:root:root:root:root:root:root:root:root:root main #name :is(.dp-photos,.dp-flow){display:none}
html:is(.c-273a,.c-273b):root:root:root:root:root:root:root:root:root main #name :is(.dp-photos,.dp-flow){grid-column:1 / -1;margin:72px 0 0}
@media (min-width:901px){html:is(.c-273a,.c-273b):root:root:root:root:root:root:root:root:root main #name .corner-fig{top:64px;bottom:auto;transform:none} html:is(.c-273a,.c-273b):root:root:root:root:root:root:root:root:root main #name :is(.dp-photos,.dp-flow){margin-top:112px}}
html.c-273a:root:root:root:root:root:root:root:root:root main #name .dp-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
html.c-273a:root:root:root:root:root:root:root:root:root main #name .dp-photos img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:12px;filter:url(#dp-green)}
html.c-273a:root:root:root:root:root:root:root:root:root main #name .dp-photos img:nth-child(2){object-position:50% 75%}
@media (max-width:600px){html.c-273a:root:root:root:root:root:root:root:root:root main #name .dp-photos{gap:8px} html.c-273a:root:root:root:root:root:root:root:root:root main #name .dp-photos img{border-radius:8px;aspect-ratio:3 / 4}}
html.c-273b:root:root:root:root:root:root:root:root:root main #name .dp-flow{display:block}
html.c-273b:root:root:root:root:root:root:root:root:root main #name .fl-svg{display:block;width:100%;height:auto;overflow:visible}
html:root:root:root:root:root:root:root:root:root main #name .fl-ln{fill:none;stroke:#ecede4;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}
html:root:root:root:root:root:root:root:root:root main #name .fl-lo{fill:#ecede4;opacity:.7}
html:root:root:root:root:root:root:root:root:root main #name .fl-mu{fill:none;stroke:#ecede4;stroke-width:4px;stroke-linecap:round;opacity:.35}
html:root:root:root:root:root:root:root:root:root main #name .fl-dp{fill:none;stroke:hsl(37 62% 39%);stroke-width:6px;stroke-linecap:round;stroke-dasharray:.1 14}
html.c-273b:root:root:root:root:root:root:root:root:root main #name .dp-flow figcaption{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:28px;font-size:1.125rem;line-height:1.4;color:#e1e4da}
html.c-273b:root:root:root:root:root:root:root:root:root main #name .fl-key{display:inline-flex;align-items:center;gap:12px}
html.c-273b:root:root:root:root:root:root:root:root:root main #name .fl-key svg{width:40px;height:12px;overflow:visible}
html.c-273b:root:root:root:root:root:root:root:root:root main #name .fl-key .fl-dp{stroke-width:5px;stroke-dasharray:.1 9}
@media (max-width:600px){html.c-273b:root:root:root:root:root:root:root:root:root main #name .fl-dp{stroke-width:9px;stroke-dasharray:.1 22} html.c-273b:root:root:root:root:root:root:root:root:root main #name .fl-ln{stroke-width:4px} html.c-273b:root:root:root:root:root:root:root:root:root main #name .dp-flow figcaption{flex-direction:column;font-size:1rem}}
@media (max-width:600px){html.c-273b:root:root:root:root:root:root:root:root:root:root main #name .fl-key .fl-ln{stroke-width:2px}html.c-273b:root:root:root:root:root:root:root:root:root:root main #name .fl-key .fl-dp{stroke-width:5px;stroke-dasharray:.1 9}}
/* 269b fix (Karl: still not full width): the boxes were full width, but text-wrap:balance split each line in half. Under 269b the lines fill the width instead */
@media (min-width:901px){html.c-269b:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-lede,.ai2-stat,.ai2-pitch h3,.ai2-offer h3){text-wrap:pretty}}
@media (min-width:901px){html.c-269b:root:root:root:root:root:root:root:root:root:root main #ai .ai2-lede .l1{display:block}html.c-269b:root:root:root:root:root:root:root:root:root:root main #ai .ai2-stat .tail{white-space:nowrap}}
@media (min-width:901px){html.c-269b:root:root:root:root:root:root:root:root:root:root main #ai .ai2-offer h3{font-size:1.75rem;line-height:1.3}}

/* Oct 20 2026: 274, "Panel studies find what to fix. They don't certify an AI as safe." moves directly under the grade example card in the left column (Karl), so the caveat reads with the example. Phones: right after the example card */
@media (min-width:901px){
  html.c-274.c-188.c-256:root:root:root:root:root:root:root:root:root:root main #ai .ai2{grid-template-areas:"lede lede" "stat stat" "pitch pitch" "case sample" "case peek" "case for" "case act" "guard ." ". .";grid-template-rows:auto auto auto auto auto auto auto auto 1fr}
  html.c-274.c-188:not(.c-256):root:root:root:root:root:root:root:root:root:root main #ai .ai2{grid-template-areas:"lede lede" "stat stat" "pitch pitch" "case sample" "case for" "case act" "guard ." ". .";grid-template-rows:auto auto auto auto auto auto auto 1fr}
  html.c-274:root:root:root:root:root:root:root:root:root:root main #ai .ai2-guard{margin-top:20px;font-size:1rem}
}
@media (max-width:900px){
  html.c-274:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-sample,.ai2-peek,.ai2-for,.ai2-actions){order:2}
  html.c-274:root:root:root:root:root:root:root:root:root:root main #ai .ai2-guard{order:1;margin:16px 0 0;font-size:1rem}
}


/* Oct 20 2026 (Karl): Selected work spacing. The quote rule now spans the slider's full width (it stopped 37px short), the quote text keeps its 34em measure, and the closing row sits closer to the last case */
html:root:root:root:root:root:root:root:root:root:root main #clients .specs > article > .cq{max-width:none;margin-top:28px}
html:root:root:root:root:root:root:root:root:root:root main #clients .cq-q,html:root:root:root:root:root:root:root:root:root:root main #clients .cq-by{max-width:34em}
html:root:root:root:root:root:root:root:root:root:root main #clients .specs > article:last-child{padding-bottom:0}
html:root:root:root:root:root:root:root:root:root:root main #clients .work-close{margin-top:24px;padding-top:40px}

/* 275: the Talk to Karl row after Selected work centered under a full-width rule, to match the centered Shipping AI strip right below it (268a) */
html.c-275:root:root:root:root:root:root:root:root:root:root main #clients .wc-book{justify-content:center;flex-direction:column;gap:12px}
html.c-275:root:root:root:root:root:root:root:root:root:root main #clients .wc-book p{text-align:center}


/* Oct 20 2026 (Karl: the hero is getting overwhelming): cards 276 to 278. Each block is guarded by its own class until Karl decides */
/* 276a, the services line in the hero is off on phones */
@media (max-width:600px){html.c-276a:root:root:root:root:root:root:root:root:root:root .hero .hero-kind{display:none}}
/* 277, phones: the hero is plain green, no photo and no footprint trail */
@media (max-width:600px){
  html.c-277:root:root:root:root:root:root:root:root:root:root .open{background:#4c5a46}
  html.c-277:root:root:root:root:root:root:root:root:root:root .hero .trail{display:none}
}
/* 278c, the phone header button reads Book (rules below and in the 278c block). Desktop keeps Talk to Karl */
@media (max-width:740px){
  html.c-278c:root:root:root:root:root:root:root:root:root:root .top .top-cta .cta-full{display:none}
  html.c-278c:root:root:root:root:root:root:root:root:root:root .top .top-cta .cta-short{display:inline}
}

/* Oct 20 2026 (Karl: more interactivity): cards 279 to 284. Each block is guarded by its own class until Karl decides */
/* 279, the visitor votes on the grade example (group expert-vote). a fifth vote breaks a 2-2 tie (urgent care hidden), b sixth vote on the five. Markup div.vote in .ai2-verdict, script at the end of site.html */
#ai .vote{display:none}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote{display:contents}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-verdict > .q,
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-verdict > .ai2-split{display:none}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-verdict{display:grid}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-verdict{display:grid;gap:14px}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote-ask{order:1}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote-q{order:2}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote-btns{order:3}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-verdict > .ai2-marks{order:4;margin-top:0}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .v5pre{order:5}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote-split{order:6}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote-res{order:7}
#ai .vote p{margin:0}
#ai .vote-ask{color:var(--fg-2);font-size:1rem;line-height:1.5}
#ai .vote-ask .v5{display:none}
html.c-279a #ai .vote-ask .v5{display:inline}
#ai .vote-q{font-size:1.25rem;line-height:1.35;font-weight:700;color:var(--fg);text-wrap:balance}
#ai .vote-btns{display:flex;gap:10px}
#ai .vote-btns button{flex:1;min-height:52px;border:1px solid var(--line-strong,#867674);border-radius:8px;background:transparent;color:var(--fg);font:600 1.125rem/1.3 var(--sans);cursor:pointer;transition:background-color .15s,border-color .15s}
#ai .vote-btns button:hover{background:rgba(236,237,228,.08);border-color:var(--fg)}
#ai .vote button:focus-visible,#ai .vote a:focus-visible{outline:2px solid var(--highlight);outline-offset:3px}
#ai .vote-split,#ai .vote-res,#ai .vote-act,#ai .v5pre{display:none}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-case:not([data-voted]) .v5pre{display:block;margin:0}
#ai .ai2-case[data-voted] .vote-ask,#ai .ai2-case[data-voted] .vote-btns{display:none}
#ai .ai2-case[data-voted] .vote-q{font-size:1rem;font-weight:600;color:var(--fg-2)}
#ai .ai2-case[data-voted] .vote-split{display:flex;align-items:center;gap:14px}
#ai .ai2-case[data-voted] .vote-res{display:block;font-size:1rem;line-height:1.5;color:var(--fg)}
#ai .ai2-case[data-voted] .vote-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
#ai .vote-split b{display:inline-block;padding:.12em .4em .16em;background:var(--highlight);color:var(--on-highlight);font-size:1.0625rem;line-height:1.35}
#ai .vote-you{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--highlight)}
#ai .vote-you .vm{width:24px;height:24px;display:none}
#ai .ai2-case[data-voted="y"] .vote-you .vy,#ai .ai2-case[data-voted="n"] .vote-you .vn{display:block}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .vote-act .btn{background:var(--fg);border-color:var(--fg);color:#1a0609}
#ai .vote-again{min-height:44px;padding:0;border:0;background:none;color:var(--fg-2);font:500 1rem/1.4 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;cursor:pointer}
#ai .vote-again:hover{color:var(--fg)}
/* b hides the five marks and the quotes until the visitor votes. a shows four marks (urgent care hidden) and hides the quotes until the vote */
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-case:not([data-voted]) .ai2-quotes{display:none}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-marks{grid-template-columns:repeat(4,minmax(0,1fr))}
html.c-279a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-marks > li:nth-child(2){display:none}
/* 280, FAQs open and close one at a time on tap (button.faq-q is added by the script at the end of site.html). One column, so each question reads as a row */
html.c-280:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid{grid-template-columns:minmax(0,1fr)}
html.c-280:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid li{padding:4px 0}
html.c-280:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid li:last-child{border-bottom:1px solid var(--line)}
html.c-280:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid h3{max-width:none;margin:0;line-height:1.3}
html.c-280:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid li > p{display:none;margin:0;padding:0 0 28px}
html.c-280:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid li.is-open > p{display:block}
.faq-q,.fit-q{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;width:100%;min-height:64px;padding:16px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.faq-q:hover,.fit-q:hover{color:var(--fg)}
.faq-q:focus-visible,.fit-q:focus-visible{outline:2px solid var(--highlight);outline-offset:4px}
.faq-q .pm,.fit-q .pm{width:24px;height:24px;justify-self:end;color:var(--fg-2)}
li.is-open > .faq-q .pm-v,li.is-open > h3 > .faq-q .pm-v,li.is-open > .fit-q .pm-v{display:none}
/* 282, Which sounds familiar? Each case opens to show where a project would start (button.fit-q is added by the script) */
#good-time .familiar,#good-time .fit{display:none}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .familiar{display:block;margin:0 0 20px;font-size:1.25rem;line-height:1.4;color:var(--fg-2);text-wrap:balance}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases li{display:block;padding:0}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q{grid-template-columns:80px minmax(0,1fr) 28px;column-gap:18px;row-gap:0;align-items:start;padding:18px 0}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > svg:first-child{grid-row:1 / span 2}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > b{grid-column:2}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > span{grid-column:2;display:block}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .pm{grid-column:3;grid-row:1;margin-top:4px}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases li.is-open > .fit{display:block;margin:0 0 0 98px;padding:0 0 20px;font-size:1.0625rem;line-height:1.5;color:var(--fg);max-width:40em}
#good-time .fit b{display:block;margin-bottom:4px;font-size:1.0625rem;font-weight:700;color:var(--fg)}
@media (max-width:820px){
  html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q{grid-template-columns:64px minmax(0,1fr) 24px;column-gap:14px;padding:14px 0 16px}
  html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases li.is-open > .fit{margin-left:78px}
}
@media (max-width:480px){html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases li.is-open > .fit{margin-left:0}}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit span{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit}
html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases li > .more-ai{display:inline-block;margin:0 0 18px 98px}
@media (max-width:820px){html.c-282:root:root:root:root:root:root:root:root:root:root main #good-time .cases li > .more-ai{margin-left:78px}}
/* 283, numbered notes on the After images (group after-notes). Dots in div.an-layer, clipped to the After side of the divider. a: a note opens on the image (div.an-pop). b: a numbered list under the slider (ol.an-list). Script at the end of site.html */
#clients .an-layer,#clients .an-pop,#clients .an-hint,#clients .an-notes{display:none}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-layer{display:block;position:absolute;inset:0;z-index:3;clip-path:inset(0 0 0 var(--pos));pointer-events:none}
#clients .an-dot{position:absolute;left:var(--x);top:var(--y);width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:2px solid #ecede4;border-radius:50%;background:#1a0609;color:#ecede4;font:700 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;display:grid;place-items:center;cursor:pointer;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#clients .an-dot::before{content:attr(data-n)}
#clients .an-dot::after{content:"";position:absolute;inset:-9px}
#clients .an-dot:hover,#clients .an-dot.on{background:#ecede4;color:#1a0609;border-color:#1a0609}
#clients .an-dot:focus-visible,#clients .an-item:focus-visible{outline:2px solid var(--highlight);outline-offset:3px}
#clients .an-pop b,#clients .an-list b{font-weight:700}
#clients .an-pop .an-src{display:block;margin-top:6px;font-size:.8125rem;color:#5f4b48}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-hint{display:block;margin:10px 0 0;font-size:.9375rem;line-height:1.45;color:var(--fg-2)}
#clients .an-h{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--fg)}
#clients .an-list{list-style:none;margin:0;padding:0;display:grid}
#clients .an-item{appearance:none;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--fg-2);font:400 1rem/1.5 var(--sans);text-align:left;cursor:pointer}
#clients .an-list li:last-child .an-item{border-bottom:1px solid var(--line)}
#clients .an-item:hover,#clients .an-list li.on .an-item{color:var(--fg)}
#clients .an-num{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums}
#clients .an-list li.on .an-num{background:var(--fg);border-color:var(--fg);color:var(--bg)}
#clients .an-txt{min-width:0}
#clients .an-txt b{color:var(--fg)}
#clients .an-list .an-src{display:block;margin-top:2px;font-size:.875rem;color:var(--fg-2);opacity:.85}
/* 284a, AI evaluation on its own page (ai-evaluation-a.html). Every #ai link goes to the page (script at the end of site.html). The home section keeps the claim and the study, then a button to the page */
#ai .ai-go{display:none}
html.c-284a:root:root:root:root:root:root:root:root:root:root main #ai .ai2-grid{display:none}
html.c-284a:root:root:root:root:root:root:root:root:root:root main #ai .ai-go-a{display:block;margin:8px 0 0}

/* 278c, the phone header button slimmer: 36px tall, 14px sides, with an invisible 44px tap area */
@media (max-width:740px){
  html.c-278c:root:root:root:root:root:root:root:root:root:root .top .top-cta{position:relative;min-height:36px;height:36px;padding:0 14px;border-radius:6px;font-size:.9375rem;line-height:1.3}
  html.c-278c:root:root:root:root:root:root:root:root:root:root .top .top-cta::after{content:"";position:absolute;inset:-4px -2px}
}
/* 282c: each case is a tinted panel, the whole panel opens it, with a caret at the right (the signifier Nielsen Norman Group found safest for accordions). Oct 20 rework: equal heights, method name in bold, How a panel study works inside the Shipping AI panel */
#good-time .fit-chev svg,#good-time .fit-meth svg{width:18px;height:18px;flex:none}
html:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-chev,html:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-meth{display:none}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit-q > .pm{display:none}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-chev{display:flex;align-items:center;gap:8px;grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end;color:var(--fg)}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit-chev .fit-lbl{display:none}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time :is(.fit-chev,.fit-meth) svg{transition:transform .15s}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time li.is-open :is(.fit-chev,.fit-meth) svg{transform:rotate(180deg)}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li{margin:0 0 8px;border:0;border-radius:10px;background:#e3e5da;padding:0 16px}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li:last-child{border:0}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li.is-open{background:#dadcd0}
@media (hover:hover){html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li:hover{background:#dadcd0}}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q{min-height:132px;align-content:center;grid-template-columns:80px minmax(0,1fr) 40px}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li > .more-ai{display:none}
html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit .fit-link{display:inline-block;min-height:0;margin:8px 0 0;font-size:1rem}
@media (max-width:820px){html.c-282c:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q{min-height:124px;grid-template-columns:64px minmax(0,1fr) 32px}}
@media (max-width:480px){html.c-282c:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li.is-open > .fit{padding-bottom:16px}}
/* 282d (needs 282c): panels near white with a hairline */
html.c-282d:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li{background:#f6f7f1;box-shadow:0 0 0 1px #d7dacd inset}
html.c-282d:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li.is-open{background:#fbfbf8}
@media (hover:hover){html.c-282d:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases li:hover{background:#fbfbf8}}
/* 282i (needs 282c): the method name, shown closed with a caret, opens each case */
html.c-282i:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-chev{display:none}
html.c-282i:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q{grid-template-columns:80px minmax(0,1fr)}
html.c-282i:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-meth{display:inline-flex;align-items:center;gap:6px;grid-column:2;justify-self:start;margin-top:10px;font-size:1rem;font-weight:700;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
html.c-282i:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit > b{display:none}
@media (max-width:820px){
      html.c-282i:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q{grid-template-columns:64px minmax(0,1fr)}
}
/* 285b: the Shipping AI strip moves up to sit right under the client logos, and its copy at the end of Selected work is hidden */
html.c-285b:root:root:root:root:root:root:root:root:root:root:root main #clients .wc-ai{display:none}

/* 283a, Oct 20 rework: the note opens below the image (div.an-pop after .cmp-stage), so the frame never cuts it off. Number, title, one line, source, and a close button */
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-pop:not([hidden]){display:grid;grid-template-columns:28px minmax(0,1fr) 32px;gap:12px;align-items:start;margin:12px 0 0;padding:14px 12px 14px 14px;border-radius:10px;background:#ecede4;color:#1a0609;font-size:1rem;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.3)}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-pop .an-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1a0609;color:#ecede4;font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-pop .an-txt b{display:block;font-size:1.0625rem;line-height:1.3;margin-bottom:2px;color:#1a0609}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-pop .an-src{display:block;margin-top:4px;font-size:.875rem;color:#5f4b48}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-close{display:grid;place-items:center;width:32px;height:32px;margin:-4px -2px 0 0;padding:0;border:0;border-radius:6px;background:none;color:#1a0609;cursor:pointer;position:relative}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-close::after{content:"";position:absolute;inset:-6px}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-close:hover{background:rgba(26,6,9,.08)}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-close:focus-visible{outline:2px solid #1a0609;outline-offset:2px}
html.c-283a:root:root:root:root:root:root:root:root:root:root main #clients .an-close svg{width:16px;height:16px}

/* 285c (needs 285b): the Shipping AI strip as a maroon black band, "Shipping AI?" and the link only */
html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser{background:#1a0609;color:#ecede4;border:0;box-shadow:none}
html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser .wrap{padding-block:22px}
html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser p,html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser b{color:#ecede4}
html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser .tz-link{color:#ecede4;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser .tz-link:focus-visible{outline:2px solid #e8b43c;outline-offset:3px}
html.c-285c:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser .tz-mid{display:none}


/* Oct 20 2026 (Karl, walking review): cards 285e to 290 */
/* 285e (needs 285c): a gold underline on the strip's link */
html.c-285e:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser .tz-link{text-decoration-color:#e8b43c;text-decoration-thickness:2px;text-underline-offset:.28em}
/* 286a: each of the Four ways offers on its own near-white panel (282d's color) */
html.c-286a:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2{gap:12px}
html.c-286a:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2 > li{border:0;border-radius:10px;background:#f6f7f1;box-shadow:0 0 0 1px #d7dacd inset;padding:24px 24px 28px}
@media (max-width:600px){html.c-286a:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2 > li{padding:20px 18px 22px}}
/* 287b: Before Desire Path inside one near-white panel */
html.c-287b:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof{background:#f6f7f1;box-shadow:0 0 0 1px #d7dacd inset;border-radius:12px;padding:6px 24px}
html.c-287b:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li{padding-top:18px;padding-bottom:20px}
@media (min-width:601px){html.c-287b:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li:is(:nth-child(1),:nth-child(3)){border-top:0}}
@media (max-width:600px){html.c-287b:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li:nth-child(3){border-top:0} html.c-287b:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof{padding:4px 18px}}
/* 288b (with 284a): the grade example where the visitor votes (279a) beside the home AI text; phones stack them */
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"lede vis" "stat vis" "go vis" ". vis";column-gap:56px;row-gap:24px;align-items:start}
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-lede{grid-area:lede}
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-stat{grid-area:stat}
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai-go-a{grid-area:go}
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-grid,.ai2-offer){display:contents}
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-offer > *{display:none}
html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-case{display:flex;grid-area:vis;margin:0;max-width:600px}
@media (max-width:900px){html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2{grid-template-columns:minmax(0,1fr);grid-template-areas:"lede" "stat" "vis" "go"}}
/* 289a: the numbers on the After images in gold */
html.c-289a:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-dot{background:#e8b43c;color:#1a0609;border-color:#1a0609;box-shadow:0 0 0 2px rgba(236,237,228,.9),0 2px 8px rgba(0,0,0,.35)}
html.c-289a:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-dot:is(:hover,.on){background:#1a0609;color:#e8b43c;border-color:#e8b43c}

/* 292a/b (group logo-gold, Oct 20): the path stroke in the wordmark in gold. A gold-only overlay image sits exactly on the wordmark, outside the
   filters that turn the wordmark white or black, so the gold stays gold on every ground. a: from the D's corner through the e's crossbar (Karl's mockup). b: inside the D only (Claude's pick). Off: all white */
.wm-g{display:none}
.foot .lockup .wm-stack{display:grid}
.foot .lockup .wm-stack > img{grid-area:1 / 1}
html.c-292a:root:root:root:root:root:root:root:root .wm-g-a,html.c-292b:root:root:root:root:root:root:root:root .wm-g-b{display:block;filter:none;opacity:1}
html.c-292a:root:root:root:root:root:root:root:root .top .logo .wm-orig,html.c-292a:root:root:root:root:root:root:root:root .foot .wm-stack > img:first-child{-webkit-mask-image:url(assets/wordmark-mask-a.png);mask-image:url(assets/wordmark-mask-a.png);-webkit-mask-size:100% 100%;mask-size:100% 100%}
html.c-292b:root:root:root:root:root:root:root:root .top .logo .wm-orig,html.c-292b:root:root:root:root:root:root:root:root .foot .wm-stack > img:first-child{-webkit-mask-image:url(assets/wordmark-mask-b.png);mask-image:url(assets/wordmark-mask-b.png);-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* 293a/b (group work-results, Oct 21): Results in Selected work open and close on phones. The script adds button.res-q (a) or button.res-more (b) only at 600px and below */
html:root:root:root:root:root:root:root:root:root:root main #clients .res-q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:-10px 0;padding:0;border:0;background:none;color:var(--fg);font:inherit;font-weight:700;text-align:left;cursor:pointer}
html:root:root:root:root:root:root:root:root:root:root main #clients .res-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:2px 0 -10px;padding:0;border:0;background:none;color:var(--fg);font:inherit;font-size:1rem;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;cursor:pointer}
html:root:root:root:root:root:root:root:root:root:root main #clients :is(.res-q,.res-more) svg{width:18px;height:18px;flex:none;transition:transform .15s}
html:root:root:root:root:root:root:root:root:root:root main #clients dl.res-open :is(.res-q,.res-more) svg{transform:rotate(180deg)}
html:root:root:root:root:root:root:root:root:root:root main #clients :is(.res-q,.res-more):focus-visible{outline:2px solid var(--highlight);outline-offset:4px;border-radius:2px}
html:root:root:root:root:root:root:root:root:root:root main #clients dl.res-a:not(.res-open) > dd:last-of-type{display:none}
html:root:root:root:root:root:root:root:root:root:root main #clients dl.res-b:not(.res-open) > dd .res > li:nth-child(n+2){display:none}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root main #clients :is(.res-q,.res-more) svg{transition:none}}

/* 294 (Oct 21, Karl's note): the Yes and No vote buttons filled light like the site's other buttons, instead of outlined on the dark card. Hover goes gold */
html.c-294:root:root:root:root:root:root:root:root:root:root main #ai .vote-btns button{background:#ecede4;border-color:#ecede4;color:#1a0609}
html.c-294:root:root:root:root:root:root:root:root:root:root main #ai .vote-btns button:hover{background:var(--highlight);border-color:var(--highlight);color:var(--on-highlight,#1a0609)}
html.c-294:root:root:root:root:root:root:root:root:root:root main #ai .vote-btns button:focus-visible{outline:2px solid var(--highlight);outline-offset:3px}

/* Oct 21 (Karl): the desire paths drawing: the upright leg is one slab shorter than the ground leg (six slabs above the corner, seven beside it). On tablet and desktop the band grows so the taller drawing fits with room above and below, and the text stays centered beside it */
@media (min-width:901px){
  html:root:root:root:root:root:root:root:root:root main #name > .sec{min-height:calc(min(38vw,460px) * .8673 + 112px);display:grid;align-content:center}
}

/* 296 (Oct 21, Karl): the "Which sounds familiar?" line removed. The method names with chevrons (282i) already show each case opens */
html.c-296:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .familiar{display:none}
/* 297a/b/c (group name-line, Oct 21, Karl): rewrites of the line under Desire paths reveal what people want. Each replaces the paragraph only */
html:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p :is(.w297a,.w297b,.w297c,.w297d,.w297e){display:none}
html:is(.c-297a,.c-297b,.c-297c,.c-297d,.c-297e):root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p > i{display:none}
html.c-297a:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p > i.w297a,html.c-297b:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p > i.w297b,html.c-297c:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p > i.w297,html.c-297d:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p > i.w297d,html.c-297e:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p > i.w297e{display:inline}
/* 251i (group hero-photo, Oct 21, Karl's note on 251e): the S-curve photo with the building faded out. A moss layer covers the top of the photo, solid to 30% and clear by 46%, so the paved path and the dirt shortcut rise out of plain green. Tablet keeps 251e's layout, where the building already sits under the solid green, and phones stay plain green (277) */
html.c-251i:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 30%,rgba(76,90,70,0) 46%),linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 60.5%,rgba(76,90,70,.8) 68%,rgba(76,90,70,.3) 82%,rgba(76,90,70,.08) 100%),url("assets/hero/s-curve-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
@media (max-width:900px){html.c-251i:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/s-curve-shortcut.jpg") center bottom -150px/100% auto no-repeat,#4c5a46}}
/* end 251i */
/* 251j (group hero-photo, Oct 21, Karl): the S-curve photo with its top darkened toward maroon black, so the building recedes into shadow and the photo shades from dark at the top to the lit path below. The maroon layer sits under the green fade, so the text side stays solid green. Tablet as 251e, phones plain green (277) */
html.c-251j:root:root:root:root:root:root:root .open{background:linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 60.5%,rgba(76,90,70,.8) 68%,rgba(76,90,70,.3) 82%,rgba(76,90,70,.08) 100%),linear-gradient(180deg,rgba(26,6,9,.92) 0%,rgba(26,6,9,.72) 18%,rgba(26,6,9,.3) 32%,rgba(26,6,9,0) 46%),url("assets/hero/s-curve-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
@media (max-width:900px){html.c-251j:root:root:root:root:root:root:root .open{background:linear-gradient(180deg,#4c5a46 0%,#4c5a46 54%,rgba(76,90,70,.8) 70%,rgba(76,90,70,.58) 100%),url("assets/hero/s-curve-shortcut.jpg") center bottom -150px/100% auto no-repeat,#4c5a46}}
/* end 251j */

/* Oct 21 (Karl, baked): home AI section on tablet and desktop. The grade example moves up beside the section title, starting at column 7 (just past the end of "AI evaluation"), so the text column on the left gets half the width and the empty space under the button and the example goes away. .body and .ai2 become display:contents, so the title, lede, stat, button, and example all sit on the section's 12-column grid */
@media (min-width:901px){
  html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .sec > h2{grid-column:1 / -1;grid-row:1}
  html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.body,.ai2){display:contents}
  html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-lede{grid-column:1 / 7;grid-row:2;margin:0}
  html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-stat{grid-column:1 / 7;grid-row:3;margin:0}
  html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai-go-a{grid-column:1 / 7;grid-row:4;margin:0;align-self:start}
  html.c-288b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-case{grid-column:7 / -1;grid-row:1 / span 4;align-self:start;margin:28px 0 0;max-width:none;position:relative;z-index:1}
}
/* Oct 21 (Karl, baked): See AI evaluation is the same size as Talk to Karl in When to reach out */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai-go .btn{font-size:1.25rem;line-height:1.4;padding:18px 38px}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai-go .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 24px;font-size:1.0625rem}}
/* Oct 21 (Karl, baked): the desire paths heading and line sit further from the drawing on tablet and desktop */
@media (min-width:601px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > :is(h2,p){padding-left:clamp(32px,6vw,96px)}}
/* 301a/b (group work-cta, desktop and tablet, Karl's note): the lone Talk to Karl row at the end of Selected work. a: gone at 901px and up (Claude's pick), phones keep it. b: left-aligned, with "30 minutes, free" beside the button */
@media (min-width:901px){
  html.c-301a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .work-close .wc-book{display:none}
  html.c-301a.c-285b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .work-close{display:none}
  html.c-301b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .wc-book{flex-direction:row;justify-content:flex-start;align-items:center;gap:20px}
  html.c-301b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .wc-book .btn{width:auto}
}
/* 302a/b (group reach-cta, desktop and tablet, Karl's note): the Talk to Karl button under When to reach out. a: moves up to the right end of the section title (Claude's pick). b: stays below, with "30 minutes, free" beside it. Phones keep the full-width button */
#good-time .good-note{display:none}
@media (min-width:901px){
  html.c-302a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time{position:relative}
  html.c-302a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .good-cta{position:absolute;top:calc(20px + clamp(3rem,7.4vw,6rem) * .66);right:24px;margin:0}
  html.c-302b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .good-cta{display:flex;align-items:center;gap:20px}
  html.c-302b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .good-note{display:block;margin:0;font-size:1.125rem;color:var(--fg-2)}
}

/* 303a/b/c (group quotes, Oct 21, Karl: should the quotes stand out more?) a: larger, upright type in full Lichen, same spot (Claude's pick). b: on desktop the quote spans the full width under the slider and Results, larger still. c: the quote sits on a moss panel inside the dark band */
html.c-303a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q,html.c-303b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q,html.c-303c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q{font-style:normal;font-weight:500;color:var(--fg);letter-spacing:-.01em;max-width:30em}
html.c-303a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q,html.c-303c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.35}
html:is(.c-303a,.c-303b,.c-303c):root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-by{font-size:1.0625rem}
html.c-303b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.3;max-width:32em}
@media (min-width:901px){html.c-303b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article > .cq,html.c-303b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article .txt ~ .cq{grid-column:1 / -1;grid-row:3;margin-top:24px;padding-top:28px}}
html.c-303c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq{background:#4c5a46;border:0;border-radius:12px;padding:24px 28px 26px}
html.c-303c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq .cq-by{color:#c9cec0}
@media (max-width:600px){html.c-303c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq{padding:20px 20px 22px}}
/* 304a/b/c (group vote-marks, Oct 21, Karl: circles around each check and cross on the grade example) a: a light ring. b: a filled moss circle with light marks (Claude's pick). c: a filled light circle with dark marks */
html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none}
html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap .vm{width:22px;height:22px}
html.c-304a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap{box-shadow:inset 0 0 0 1.5px #ecede4}
html.c-304b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap{background:#4c5a46;color:#ecede4}
html.c-304c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap{background:#ecede4;color:#1a0609}
html.c-304c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap .vm{color:#1a0609}
@media (max-width:600px){html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap{width:36px;height:36px}html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.ai2-marks,.vote-split,.ai2-quotes) .vm-wrap .vm{width:20px;height:20px}}

/* Oct 21 (Karl: one gray divider in Before Desire Path, baked): with 271's order (Fortune 500 and >100k on top, Seed to Series B and Peer-reviewed below), the rule now runs between the two rows across both columns, and between every item on phones */
/* 303d (group quotes, Karl's note on 303a): italic at 303a's size, full width under each client on desktop; phones keep today's size, italic */
html.c-303d:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q{font-style:italic;font-weight:500;color:var(--fg);letter-spacing:-.005em}
html.c-303d:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-by{font-size:1.0625rem}
@media (min-width:901px){
  html.c-303d:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq-q{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.38;max-width:40em}
  html.c-303d:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article > .cq,html.c-303d:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article .txt ~ .cq{grid-column:1 / -1;grid-row:3;margin-top:24px;padding-top:28px}
}
/* 305a/b (group hero-tablet, Karl: the hero photo breaks on tablet). a: plain green from 601px to 900px, like phones (Claude's pick). b: the photo on the right as on desktop, with the green solid behind the text */
@media (min-width:601px) and (max-width:900px){
  html.c-305a:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open{background:#4c5a46}
  html.c-305b:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open{background:linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 66%,rgba(76,90,70,.82) 76%,rgba(76,90,70,.35) 90%,rgba(76,90,70,.12) 100%),linear-gradient(180deg,rgba(26,6,9,.92) 0%,rgba(26,6,9,.72) 18%,rgba(26,6,9,.3) 32%,rgba(26,6,9,0) 46%),url("assets/hero/s-curve-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
}
/* 307a/b (group before-label, Karl: Before Desire Path reads as plain text) a: bold, like the Results labels (Claude's pick). b: italic */
html.c-307a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about h3.before{font-weight:700;letter-spacing:-.015em}
html.c-307b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about h3.before{font-style:italic;font-weight:600}

/* 303d, Karl's note on accepting it (Oct 21): no divider above the quotes, so the only dividers in Selected work mark where one project ends and the next starts */
html.c-303d:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq{border-top:0;padding-top:0}
/* 315a/b/c (group work-separate, Oct 21, Karl's 303d note): clearer breaks between the three Selected work projects. a: a 2px Lichen rule and more space between projects, the same rule as section titles. b: each project on its own raised panel. c: the middle project on a lifted full-width band, so the grounds alternate dark, lifted, dark (Claude's pick) */
html.c-315a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article + article{border-top:2px solid var(--fg);margin-top:40px;padding-top:56px}
html.c-315b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs{gap:16px}
html.c-315b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article{border-top:0;border-radius:14px;background:rgb(30,27,20);box-shadow:0 0 0 1px rgba(236,237,228,.1) inset;padding:32px 32px 36px}
html.c-315c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article{border-top:0;padding-top:56px;padding-bottom:56px}
html.c-315c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article:nth-of-type(2){background:rgb(30,27,20);border-image:linear-gradient(rgb(30,27,20),rgb(30,27,20)) fill 0 / 0 / 0 100vmax}
html.c-315c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .work-close{border-top:0}
@media (max-width:600px){
  html.c-315a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article + article{margin-top:28px;padding-top:40px}
  html.c-315b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article{padding:20px 16px 24px;border-radius:12px}
  html.c-315c:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article{padding-top:40px;padding-bottom:40px}
}

/* Oct 21 2026: 311a/b, FAQ answer width (home and AI evaluation). Phones unchanged */
@media (min-width:601px){
html.c-311a:root:root:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid li > p{max-width:68ch;line-height:1.6}
html.c-311b:root:root:root:root:root:root:root:root:root:root:root:root main #faq .faq-grid li > p{max-width:none;line-height:1.6}
}

/* Oct 21 2026 (Karl, direct): the divider handle is a real image, the D with the gold path (assets/d-mark-gold-96/192.png),
   in place of the ::after background. The CSS background version did not draw the D in Karl's view */
html:root:root:root .cmp-line::after{display:none}
.cmp-line .cmp-d{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:44px;height:44px;max-width:none;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid #ecede4;box-sizing:border-box;box-shadow:0 6px 14px -4px rgba(0,0,0,.6);pointer-events:none;transition:opacity .2s var(--ease)}
.cmp-frame.at-end .cmp-line .cmp-d{opacity:0}
@media (min-width:901px){.cmp-line .cmp-d{width:48px;height:48px;margin:-24px 0 0 -24px}}
@media (prefers-reduced-motion:reduce){.cmp-line .cmp-d{transition:none}}

/* Oct 21 2026: 318a/b/c (group hero-318), hero with "nobody uses" and no "real". Overrides 151, 179d, and 183 while one is on */
.hero .hw318c,.hero .h1b .v318c{display:none}
html:is(.c-318a,.c-318b,.c-318c):root:root:root .hero .r-in,html:is(.c-318a,.c-318b,.c-318c):root:root:root .hero .r-out,html:is(.c-318a,.c-318b,.c-318c):root:root:root .hero .h1b > span,html:is(.c-318a,.c-318b,.c-318c):root:root:root .hero .h1a .hw0,html:is(.c-318a,.c-318b,.c-318c):root:root:root .hero .h1a .hw183,html:is(.c-318a,.c-318b,.c-318c):root:root:root .hero .h1a .hw318c{display:none}
html:is(.c-318a,.c-318b):root:root:root .hero .h1b .v179a,html.c-318c:root:root:root .hero .h1b .v318c,html.c-318a:root:root:root .hero .h1a .hw183,html.c-318b:root:root:root .hero .h1a .hw0,html.c-318c:root:root:root .hero .h1a .hw318c{display:inline}

/* Oct 21 2026: 319a/b/c (group name-gold), a gold accent in the desire paths band */
html.c-319a:root:root:root:root:root:root:root main #name .hl-name{background:var(--highlight);color:var(--on-highlight);padding:.02em .1em .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.c-319b:root:root:root:root:root:root:root .corner-lg .worn{stroke:var(--highlight);stroke-width:4;stroke-linecap:round;fill:none}
html.c-319c:root:root:root:root:root:root:root main #name .lbl-trail{display:grid}
/* 319c: the label sits above and left of the trail's midpoint, in the drawing's units (the square drawing since Oct 21: viewBox 30 -23.6 425 368.6, so 1 unit is 1/4.25 cqw). Phones with 299 use the shorter drawing (viewBox 86.4 33 368.6 312) */
html.c-319c:root:root:root:root:root:root:root main #name .corner-fig .lbl-trail{left:calc((211 - 30) / 4.25 * 1cqw);top:calc((164 + 23.6) / 4.25 * 1cqw)}
@media (max-width:600px){html.c-319c:is(.c-299a,.c-299b,.c-299c):root:root:root:root:root:root:root main #name .corner-fig .lbl-trail{left:calc((226 - 86.4) / 3.686 * 1cqw);top:calc((176 - 33) / 3.686 * 1cqw)}}

/* Oct 21 2026 (Karl, asked in chat): one method line under Grade and Compare in the panel study pitch. Same color as the Grade and Compare descriptions, 16px, one reading measure */
html:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-pitch .ai2-method{margin:16px 0 0;max-width:62ch;font-size:1rem;line-height:1.45;color:#4d5848}
/* The same line on the AI evaluation page, under the two kinds of panel study (313c rows), sized like the row text */
html:root:root:root:root:root:root:root:root:root:root:root main.pg .k313c .ai2-method{margin:16px 0 0;max-width:62ch;font-size:1.0625rem;line-height:1.5;color:#4d5848}

/* Oct 21 2026: 321a/b/c (group hf-note1), HouseFacts After note 1. Each option is a span inside the note text, so the open note (an-pop copies the text) follows too. Off: the original note */
.n321{display:none}
html:not(.c-321a) .n321o,html.c-321a .n321a{display:inline}

/* Oct 21 2026: 322a/b/c (group hero-photo-fade, desktop only, need 251j), the hero photo at lower opacity. A flat #4c5a46 layer sits between the gradients and the photo, so the photo shows at 75%, 55%, or 35% over the green */
@media (min-width:901px){
html.c-251j.c-322b:root:root:root:root:root:root:root:root .open{background:linear-gradient(0deg,rgba(76,90,70,.9) 0%,rgba(76,90,70,.82) 15%,rgba(76,90,70,0) 30%),linear-gradient(90deg,#4c5a46 0%,#4c5a46 60.5%,rgba(76,90,70,.8) 68%,rgba(76,90,70,.3) 82%,rgba(76,90,70,.08) 100%),linear-gradient(180deg,rgba(26,6,9,.92) 0%,rgba(26,6,9,.72) 18%,rgba(26,6,9,.3) 32%,rgba(26,6,9,0) 46%),linear-gradient(rgba(76,90,70,0.45),rgba(76,90,70,0.45)),url("assets/hero/s-curve-shortcut.jpg") right center/auto 100% no-repeat,#4c5a46}
}

/* Oct 21 2026: 323a/b (group work-logos, Karl: the client logos in Selected work read as buttons). a: each logo links to the client's site, pill kept, with an out arrow and hover and focus states. b: no pill, the logo sits on the dark band in Lichen, so it reads as a label */
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3{padding:0;background:none;color:#ecede4;border-radius:0}
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3 img{filter:brightness(0) invert(1) opacity(.92)}

/* Oct 21 2026: 324a/b/c (group after-dots, Karl: people miss the numbers on the After side). At the slider's start most dots sat behind the Before side (HouseFacts 1 of 3 showing, Sherwood 1 of 3, CustodyComms 2 of 3).
   a: every dot shows at all times (no clip). Tapping one still slides the divider to its spot. b: a, plus the hint moves above the first image with a sample gold number (Claude's pick). c: b, plus larger dots, 34px */
#clients .an-hint324{display:none}
html.c-324b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-hint{display:none}
html.c-324b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-hint324{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1rem;line-height:1.4;color:#ecede4}
html.c-324b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-sample{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#e8b43c;color:#1a0609;border:2px solid #1a0609;box-shadow:0 0 0 2px rgba(236,237,228,.9);font:700 .8125rem/1 var(--sans);font-variant-numeric:tabular-nums}

/* Oct 22 2026 fix (Karl: the Family medicine and Cardiology quote rows overlapped their marks). 304's rings are 40px (36px on phones), but the quote rows kept a 24px first column, so each ring spilled over its text. The column now matches the ring, and the text drops so its first line sits level with the ring's center */
html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start}
html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li > span:last-child{padding-top:7px}
@media (max-width:600px){
html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li{grid-template-columns:36px minmax(0,1fr);column-gap:12px}
html:is(.c-304a,.c-304b,.c-304c):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li > span:last-child{padding-top:5px}
}
/* Quotes are always italic on the site (Karl's rule): the clinician quotes in the grade example, with the specialty name kept upright */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li > span:last-child{font-style:italic}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li > span:last-child > b{font-style:normal}
/* 321a (Karl's note): with One Smart system, HouseFacts dot 1 moves from Dashboard to Smart Inbox in the side menu */
html.c-321a:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article:first-child .an-dot[data-n="1"]{--x:13.7% !important;--y:58.3% !important}

/* 323b (Karl's note: no pill, logo as a label, but make them all a bit bigger): about 30% larger */
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3 img{width:auto}
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3[data-name="HouseFacts"] img{height:44px}
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3[data-name="Sherwood Square"] img{height:35px}
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3[data-name="CustodyComms"] img{height:46px}
html.c-323b:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .specs article h3[data-name="CustodyComms"] span{font-size:1.75rem}
/* phones: the Selected work column is already scaled to .88 there, so these heights come out about 30% larger than before on phones too */


/* Footprints in bronze (328e, Karl Oct 22, baked): clay left the brand kit, and Karl picked bronze #a17226 over four lighter golds. Covers the desire paths band (.corner-lg .steps2),
   the footer corner mark, both How it works trails (.how-feet, the phone weave .ft), and the launch line. hsl() on purpose: the 227 palette script rewrites hex and rgb() values,
   and it would treat #a17226 as part of the gold family and lighten it. The --trail tokens and the .fl-dp stroke use the same bronze */
.corner-lg .steps2,.corner-end .steps2,.how-feet,.how-weave .ft,.launch-line .ll-feet{fill:hsl(37 62% 39%)!important}

/* Grade and Compare cards (329a, Karl Oct 22, baked): each on its own near-white card (#f6f7f1, #d7dacd border, 12px radius, 12px gap), every width */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .krows-c{gap:12px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .krows-c > li,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .krows-c > li:last-child{background:#f6f7f1;border:1px solid #d7dacd;border-radius:12px;padding:18px 20px}

/* Hero, type only (330a, Karl Oct 22, baked): no photo and no footprint trail at any width. The headline, the gold highlight, and the buttons are the hero */
html:root:root:root:root:root:root:root:root:root:root:root:root .hero .trail{display:none}

/* Tap-a-number hint (331a, Karl Oct 22, baked): under the HouseFacts image, above the caption and slider, centered (Karl's note). Replaces the 324b hint above the image */
#clients .an-hint331{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-hint331{display:flex;justify-content:center;text-align:center;align-items:center;gap:10px;margin:14px 0 0;font-size:1rem;line-height:1.4;color:#ecede4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-hint331 + .ba-cap{margin-top:10px}

/* Section reveal (332a/b, group reveal, Oct 22): the content inside each section fades in and rises once as the section comes into view. Section grounds never fade, so the color bands stay put. a: 8px over 250ms. b: 16px over 450ms, for comparison. The script adds .rv-wait only below the screen and never with reduced motion */
@media (prefers-reduced-motion:no-preference){
  html.c-332a main section.rv-wait > *,html.c-332b main section.rv-wait > *{opacity:0!important}
  html.c-332a main section.rv-wait > *{transform:translateY(8px)!important}
  html.c-332b main section.rv-wait > *{transform:translateY(16px)!important}
  html.c-332a main section.rv-in > *{transition:opacity .25s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1)!important}
  html.c-332b main section.rv-in > *{transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)!important}
}
@media print{main section.rv-wait > *{opacity:1!important;transform:none!important}}

/* ===== Oct 22 2026, after the designer review: hub split. Baked: Book a call (6), How it works under the hero (333a direction, copy revised), Selected work teaser (334a), work.html, full-screen compare (336). Open: 337 visual, 338 button words, 339 teaser look ===== */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:44px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta .good-note{display:block;margin:0;font-size:1.125rem;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta .btn{justify-content:center;text-align:center}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta{margin-top:24px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta .btn{flex:1 1 100%}}
/* How it works (333a, baked Oct 22): right under the hero and the AI strip. How a project works stays lower on the page */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain{display:grid;--bg:#ecede4;--bg-2:#e1e3d6;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--bg-2-line:#c5d1bf;--bg-2-curve:#c5d1bf;--ink-curve:#c5d1bf;--action:#1a0609;--on-highlight:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative;padding-top:96px;padding-bottom:40px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services::before{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain > .body{grid-column:1 / -1;display:grid;gap:48px;min-width:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-lede{margin:0;max-width:36ch;font-size:clamp(1.375rem,2.4vw,2rem);line-height:1.38;font-weight:500;letter-spacing:-.012em;text-wrap:pretty}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{position:relative;display:grid;list-style:none;margin:0;padding:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px var(--gutter,32px)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-content:start;padding-top:20px;border-top:1px solid var(--line-strong)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps .pn{position:relative;z-index:1;grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fg);color:var(--bg);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps h3{margin:3px 0 8px;font-size:1.5rem;line-height:1.38;font-weight:700;letter-spacing:-.015em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps p{margin:0;max-width:36ch;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .p-trail{display:none}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain{padding-top:64px;padding-bottom:24px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain > .body{gap:32px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{grid-template-columns:minmax(0,1fr);gap:20px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps h3{font-size:1.3125rem}}
/* How it works look (337c, baked Oct 22): pale green panel, numbers above each step, bronze footprints in a straight line from number to number */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain{--bg:#dfe3d5;background:#dfe3d5;box-shadow:0 0 0 100vmax #dfe3d5}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .p-trail{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .p-trail .ft{fill:hsl(37 62% 39%)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps li{grid-template-columns:minmax(0,1fr);row-gap:14px;padding-top:0;border-top:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps .pn{grid-row:auto;width:44px;height:44px;font-size:1.125rem;box-shadow:0 0 0 8px var(--bg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps h3{margin:6px 0 0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-lede{max-width:60ch;font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.45}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{gap:36px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps li{grid-template-columns:44px minmax(0,1fr);column-gap:18px;row-gap:4px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps .pn{grid-row:1 / span 2} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps h3{margin:8px 0 0}}
/* 340 baked Oct 22: no lede in Getting started */
/* 341c baked Oct 22: the section is called Getting started */
/* Home page order (Karl, Oct 22). Oct 22 later: scoped to main.pg-home, since main:not(.pg-work) also matched the AI page and put its readout above Grade a reply yourself */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg > #how,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg > #kinds{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > .ai-teaser{order:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #plain{order:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #services{order:3}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #good-time{order:5}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai{order:6}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:7}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #about{order:8}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #faq{order:9}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #contact{order:10}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #how,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #clients{display:none}
/* Selected work teaser (334a, baked Oct 22): the home page shows three rows that link to work.html, and the full projects live on work.html */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #clients{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser{display:grid;--bg:#1a0609;--bg-2:#3a2324;--fg:#ecede4;--fg-2:#c4bcb7;--line:#5c4747;--line-strong:#867674;--bg-2-line:#6f5c5b;--bg-2-curve:#492823;--ink-curve:#492823;--action:#ecede4;--on-highlight:#1a0609;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax);position:relative;border-top:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser > .body{grid-column:1 / -1;min-width:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows{display:grid;list-style:none;margin:0;padding:0;gap:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows li{border-top:1px solid var(--line)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows li:last-child{border-bottom:1px solid var(--line)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:center;padding:32px 0;color:inherit;text-decoration:none;border-radius:4px}
/* 339 (Karl, Oct 22): keep the rows, with the text on the left and the image on the right */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row > .t-txt{order:1} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row > .t-img{order:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row:focus-visible{outline:2px solid var(--highlight,#e0ac2b);outline-offset:4px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-img{position:relative;display:block;aspect-ratio:16 / 9;max-width:100%;overflow:hidden;border-radius:8px;background:#ecede4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-img.t-port{background:#d7dacd} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-img.t-port img{object-fit:contain;object-position:center top;padding-top:16px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-txt{display:grid;gap:10px;justify-items:start;min-width:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-logo img{display:block;height:32px;width:auto}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-cc{display:inline-flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;letter-spacing:-.01em;color:var(--fg)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-cc img{height:36px;width:auto}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-out{max-width:22ch;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.38;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-what{color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .15s}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row:hover .t-go{color:var(--highlight,#e0ac2b)}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row > .t-img{order:0}}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-go{transition:none}}
/* Compare full size (336, baked Oct 22): fills the screen, one image at a time, with Before, After, and Side by side (side by side from 901px) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;inset:0;border-radius:0;box-shadow:none;background:transparent}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom.tall{width:100vw}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-in{height:100dvh;max-height:none;grid-template-rows:auto minmax(0,1fr);background:var(--bg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-bar{padding:max(8px,env(safe-area-inset-top,0px)) 10px 8px 20px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-strong);border-radius:10px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg button{appearance:none;min-height:40px;padding:0 16px;border:0;border-radius:6px;background:none;color:var(--fg-2);font:600 1rem/1 var(--sans);cursor:pointer;transition:background-color .15s,color .15s}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg button:hover:not([aria-pressed="true"]){color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg button:focus-visible{outline:2px solid var(--highlight,#e0ac2b);outline-offset:-2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-body{padding:16px 16px max(24px,env(safe-area-inset-bottom,0px))}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom[data-z="0"] .zoom-body,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom[data-z="1"] .zoom-body{grid-template-columns:minmax(0,1fr);justify-items:center}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom[data-z="0"] .zoom-body figure:nth-child(2),html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom[data-z="1"] .zoom-body figure:nth-child(1){display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom[data-z] .zoom-body figcaption{display:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom[data-z="both"] .zoom-body figcaption{display:block}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom:not(.tall)[data-z="0"] .zoom-body figure,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom:not(.tall)[data-z="1"] .zoom-body figure{width:100%;max-width:2000px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom.tall .zoom-body figure{width:auto} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom.tall .zoom-body img{width:auto;max-width:100%;max-height:calc(100dvh - 110px);margin:0 auto}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom.tall[data-z="both"] .zoom-body{grid-template-columns:repeat(2,minmax(0,auto));justify-content:center;gap:32px}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg .zs-both{display:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-bar{gap:8px 12px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #zoom-cap{flex:1 1 100%;order:-1;font-size:1rem} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom:not(.tall)[data-z="0"] .zoom-body,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom:not(.tall)[data-z="1"] .zoom-body{justify-items:start;grid-template-columns:780px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom:not(.tall)[data-z] .zoom-body figure{width:780px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom.tall .zoom-body img{max-height:none;width:100%}}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .zoom-seg button{transition:none}}
/* work.html: project title full width, then the slider, then the numbered notes, then Results under the notes, then the quote (Karl, Oct 22). Sherwood Square's phone comparison is larger */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero{padding-bottom:56px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open.work-open{background:#1a0609;background-image:none;--hero-end:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open.work-open .top.solid{background:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients{padding-top:72px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs{display:grid;gap:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;scroll-margin-top:88px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt{display:contents}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > h3,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > h3{order:1;grid-column:1 / -1;grid-row:auto;margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > .what,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .what{order:2;grid-column:1 / -1;grid-row:auto;margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > .outcome,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .outcome{order:3;grid-column:1 / -1;grid-row:auto;max-width:none;margin:8px 0 0;font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.025em;text-wrap:pretty}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .outcome i{max-width:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > .credit,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .credit{order:4;grid-column:1 / -1;grid-row:auto;margin:0 0 16px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .ba{order:5;grid-column:1 / -1;grid-row:auto;width:100%;max-width:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > dl,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > dl{order:6;grid-column:1 / -1;grid-row:auto;margin:8px 0 0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article dl .res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .cq{order:7;grid-column:1 / -1;grid-row:auto;margin-top:24px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-hint331,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-hint,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-pop{display:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-notes{display:block;order:9;margin-top:12px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-notes .an-h{margin:0 0 12px;font-size:1.0625rem;font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-list li:last-child .an-item{border-bottom:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-item{padding:16px 0 4px;align-content:start;height:100%}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-num{width:32px;height:32px;border:0;background:#e0ac2b;color:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-list li.on .an-num{background:var(--fg);color:var(--bg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-txt b{display:block;margin-bottom:2px;font-size:1.0625rem}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait){grid-template-columns:minmax(0,min(420px,calc((100svh - 280px) * .8))) minmax(0,1fr);column-gap:64px;align-items:start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) > *{grid-column:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) > .an-notes{grid-column:2;grid-row:1 / span 4;margin-top:36px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) .an-list{grid-template-columns:minmax(0,1fr)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) .an-list li:last-child .an-item{border-bottom:1px solid var(--line)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-stage:has(> .cmp-frame.portrait){aspect-ratio:auto;height:auto;width:100%}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait{width:100%;height:auto;aspect-ratio:4 / 5}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients{padding-top:48px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article{gap:20px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > .outcome,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .outcome{font-size:1.75rem} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article dl .res{grid-template-columns:minmax(0,1fr)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-list,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait){grid-template-columns:minmax(0,1fr)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) > .an-notes{grid-column:1;grid-row:auto;margin-top:12px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-list li:last-child .an-item{border-bottom:1px solid var(--line)}}
/* Phones and tablets (Karl, Oct 22): the "30 minutes, free" note sits centered under the full-width button, with more room before the next band */
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .good-cta{flex-direction:column;align-items:stretch;gap:12px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta .good-note,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .good-cta .good-note{display:block;margin:0;text-align:center;font-size:1.125rem;color:var(--fg-2)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .good-cta .btn{display:flex;width:100%;justify-content:center} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time{padding-bottom:64px}}
/* 342 baked Oct 22 (home page only): the AI evaluation section on the maroon black ground with light text */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai{--bg:#1a0609;--bg-2:#3a2324;--fg:#ecede4;--fg-2:#c4bcb7;--line:#5c4747;--line-strong:#867674;--bg-2-line:#6f5c5b;--bg-2-curve:#492823;--ink-curve:#492823;--action:#ecede4;--on-highlight:#1a0609;color-scheme:dark;background:#1a0609;color:#ecede4;box-shadow:0 0 0 100vmax #1a0609;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-card,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-ex,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai figure{box-shadow:0 0 0 1px rgba(236,237,228,.16),0 30px 60px -30px rgba(0,0,0,.9)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-pitch dd,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-pitch .ai2-method{color:#c4bcb7}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .btn{background:#ecede4;color:#1a0609} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .btn:hover{background:var(--highlight,#e0ac2b);color:#1a0609}
/* 344a, baked Oct 22 2026 (Karl: best of the three, though the section is now heavy with color, see 347): the grade example card on the home AI section in brand green with a darker AI bubble */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case{background:#4c5a46;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case .msg.ai{background:#38432f} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case .ai2-verdict{border-color:rgba(236,237,228,.28)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case{--fg-2:#e1e4da} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case *{--fg-2:#e1e4da} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case .vote-you{color:#f3d58a} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case .msg.patient,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case .msg.patient *{--fg-2:#4d5848}
/* 345b, baked Oct 22 2026 (phones only, Karl): the menu on brand green, a short line under each link, then the booking button at thumb height, email and LinkedIn in one row, and the small desire path mark in the bottom right corner. The large corner drawing is gone (Karl: very ugly). 348 and 349 vary the email row and the colors */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .m-t{display:block} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .m-sub{display:block;margin-top:2px;font-size:.9375rem;line-height:1.4;font-weight:400;letter-spacing:0;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-nav a{padding:10px 0 12px;font-size:1.625rem}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu{gap:0} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-extra{display:flex;flex-direction:column;gap:18px;margin-top:28px;flex:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-book{display:flex;width:100%;min-height:52px;justify-content:center;align-items:center;font-size:1.0625rem;font-weight:700;background:#ecede4;color:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;min-width:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--fg);text-decoration:none;border-radius:6px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach a:hover{color:var(--highlight)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach a:focus-visible{outline:2px solid var(--highlight);outline-offset:3px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mail .mi{display:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mail .mm-txt{font-size:1.0625rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .mm-lbl,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .ml-lbl{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-li{justify-content:center;min-width:44px;margin-right:-8px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-li .li-bg{fill:currentColor} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-li .li-fg{fill:var(--bg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark{display:block;align-self:flex-end;margin-top:auto;width:34px;height:27px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark .walk{stroke:var(--line-strong)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark .worn{stroke:hsl(37 62% 39%)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root.menu-open .top{--bg:#4c5a46;--fg:#ecede4;--fg-2:#d7dacd;--line:#6b7863;--line-strong:#a4ad9b;color-scheme:dark;background:#4c5a46;color:#ecede4}
/* 348a, baked Oct 22 2026 (Karl): the email row is two labeled pill buttons, Email and LinkedIn */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach{justify-content:start;gap:12px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach a{gap:8px;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--line-strong);border-radius:999px;font-weight:600;font-size:1rem;margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mail .mi{display:block} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mail .mm-txt{display:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .mm-lbl,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .ml-lbl{display:inline} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-li svg{width:22px;height:22px}
/* 349c, baked Oct 22 2026 (Karl: almost perfect): the phone menu on Lichen with dark links, a brand green booking button and header button, green sub lines, and a gold dotted desire path in the bottom corner in place of the mini mark */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root.menu-open .top{--bg:#ecede4;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;--line-strong:#778272;--action:#1a0609;color-scheme:light;background:#ecede4;color:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-book,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root.menu-open .top .top-cta{background:#4c5a46;color:#ecede4} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-book:hover{background:#38432f;color:#ecede4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .m-sub{color:#4c5a46} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-reach a:hover{color:#4c5a46} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-li .li-fg{fill:#ecede4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root.menu-open .top .logo .wm-orig{filter:brightness(0) opacity(.9)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark{width:56px;height:44px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark .walk{display:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark .worn{stroke:#e0ac2b;stroke-width:2.2;stroke-dasharray:1 3.6}
/* 350b, baked Oct 22 2026 (Karl): See before & after is an outlined button */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-row .t-go{min-height:48px;padding:0 22px;margin-top:10px;border:1.5px solid rgba(236,237,228,.6);border-radius:6px;text-decoration:none;font-size:1.0625rem;transition:border-color .15s,background-color .15s,color .15s} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row:hover .t-go{color:#1a0609;background:#ecede4;border-color:#ecede4}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-row .t-go{transition:none}}
/* Review chat feedback, Oct 22 2026 (direct fixes) */
/* Four ways: the booking button touched the dark Selected work band at 901px and up (208d had set 0 bottom padding when When to reach out sat under it). Same 64px as phones */
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #services{padding-bottom:64px}}
/* Selected work teaser: with the tabs on, the row no longer repeats the logo. The landscape screenshots keep their own proportions (1800 by 968) so nothing is cut off, rows align to the top, tablet tab logos are tappable */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-img.t-land{aspect-ratio:1800 / 968} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row{align-items:start}
@media (min-width:601px) and (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-tab{min-height:52px;gap:8px;font-size:1rem} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-tab img{height:22px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-tab.t-cc img{height:24px}}
/* 351 and 359, baked Oct 22 2026 (Karl): the stat carries the paper's expert baseline on the same line, both figures rounded to ~65% and ~75% in the gold highlight. On the home page it sits a size below the lede */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{font-size:1.25rem;line-height:1.35} @media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{font-size:1.5rem}} @media (min-width:1280px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{font-size:1.625rem}}
/* 352a, baked Oct 22 2026 (Karl): the Sherwood phone figure shows Before and Proposed side by side, no slider, with the numbered notes on Proposed */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait{display:grid;grid-template-columns:1fr 1fr;gap:12px;aspect-ratio:auto;height:auto;overflow:visible;border:0;background:none;box-shadow:none;cursor:default}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4 / 5;clip-path:none;border:1px solid var(--bg-2-line);border-radius:6px;background:#ecede4} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait .cmp-a{order:1} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait .cmp-b{order:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait .cmp-line,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-range{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait .an-layer{left:calc(50% + 6px);clip-path:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-lbl{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto;position:static;margin-bottom:6px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-lbl span{position:static;opacity:1} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-lbl span::before,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-lbl span::after,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-lbl::after{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait){grid-template-columns:minmax(0,min(720px,calc((100svh - 280px) * 1.4))) minmax(0,1fr)}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait{gap:8px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait .an-layer{left:calc(50% + 4px)}}
/* 353a, baked Oct 22 2026 (Karl): a row of the three client logos in the work hero, each jumping to its project */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump{display:flex;flex-wrap:wrap;gap:12px 40px;margin:36px 0 0;grid-column:1 / -1} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--fg);text-decoration:none;opacity:.8;transition:opacity .15s} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump a:hover{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump a:focus-visible{outline:2px solid var(--highlight);outline-offset:4px;border-radius:4px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump img{display:block;height:28px;width:auto} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump .wj-cc{font-weight:700;font-size:1.25rem;letter-spacing:-.01em} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump .wj-cc img{height:30px}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump{gap:8px 24px;margin-top:28px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump img{height:20px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump .wj-cc{font-size:1rem} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .work-jump .wj-cc img{height:22px}}
/* 354a, baked Oct 22 2026 (Karl): the slider sweeps, then rests at 12% so every numbered note shows (script) */
/* 357, baked Oct 22 2026 (Karl): no booking row under CustodyComms on the work page, Let's connect follows */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .work-close{display:none}
/* 358, baked Oct 22 2026 (Karl): a gold rule under the current nav link on the work and AI pages */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .top .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:#e0ac2b;text-decoration-thickness:2px;text-underline-offset:.42em} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .top .nav a[aria-current="page"]:hover{text-decoration-color:#e0ac2b}

/* 360a, baked Oct 22 2026 (Karl): the credit line moves into the figure caption and the description grows to 20px */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > .credit{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .ba-cap > span::after{content:" \00b7  " attr(data-credit);font-weight:400;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article > .txt > .what{font-size:1.25rem;line-height:1.4;color:var(--fg)}
  
 
/* 362a, baked Oct 22 2026 (Karl): Before & after in the work hero sits in the gold highlight, like human judgment on the home hero */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero .wh-hl{display:inline-block;background:#e0ac2b;color:#1a0609;padding:.02em .12em .08em;line-height:1.05}
  
       

/* 364a/b/c (group feet-color): Karl, Oct 22: the footprints could be a darker goldenrod, edging toward brown. The brand kit froze bronze #a17226 = hsl(37 62% 39%), but with 227c on the palette script lifts the baked fill to #bb8e26. a: the frozen bronze, kept out of the swap. b: #8a6420 (darker goldenrod). c: #6b4c1c (brown). Covers the Getting started trail, the work page How a project works trail, the desire paths band, the footer and menu marks, and the launch line */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root{--trail:hsl(37 62% 39%)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main{--trail:hsl(37 62% 39%)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .corner-lg .steps2,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .corner-end .steps2,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .how-feet,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .how-weave .ft,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .launch-line .ll-feet{fill:var(--trail)!important} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .p-trail .ft{fill:var(--trail)!important} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .fl-dp{stroke:var(--trail)}
/* 365 (single): the hero light from 247a on the work and AI heroes too (8% on the dark grounds), and a taller, steeper version on phones, where the desktop drawing squashed to nothing */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open.work-open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='38'/%3E%3C/filter%3E%3Cpath d='M -120 690 C 330 600%2C 790 400%2C 1330 -90' fill='none' stroke='%23ecede4' stroke-opacity='.08' stroke-width='150' stroke-linecap='round' filter='url%28%23b%29'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='38'/%3E%3C/filter%3E%3Cpath d='M -80 880 C 140 640%2C 320 340%2C 480 -80' fill='none' stroke='%23ecede4' stroke-opacity='.07' stroke-width='170' stroke-linecap='round' filter='url%28%23b%29'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open.work-open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='38'/%3E%3C/filter%3E%3Cpath d='M -80 880 C 140 640%2C 320 340%2C 480 -80' fill='none' stroke='%23ecede4' stroke-opacity='.09' stroke-width='170' stroke-linecap='round' filter='url%28%23b%29'/%3E%3C/svg%3E")}}
/* Sherwood, Oct 22 (Karl on 360a: the side by side is so small, give the pair the size of the big desktop screens). Desktop: the pair spans the article like the HouseFacts and CustodyComms screens, each phone up to 500px wide (625px tall, the desktop screens' height), notes below in three columns like the others.
   Also fixes the frame keeping its old 4:5 shape under the two images, which left note 3 floating below them */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-frame.portrait{aspect-ratio:auto}
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait){grid-template-columns:minmax(0,1fr)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) > .an-notes{grid-column:1;grid-row:auto;margin-top:12px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.portrait) .an-list{grid-template-columns:repeat(3,minmax(0,1fr))} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-stage:has(> .cmp-frame.portrait),html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba:has(.cmp-frame.portrait) .cmp-lbl{max-width:1012px}}
/* 360a on phones: the caption wraps so the credit reads in full instead of ending in an ellipsis */
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .ba-cap{flex-wrap:wrap;row-gap:6px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .ba-cap > span{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 100%;min-width:0}}

/* 373b baked Oct 22: how long each way of working takes (the kind-of-work labels moved into the card copy, Karl's note) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 0;font-size:1rem;line-height:1.4;font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-meta[hidden]{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-meta span{display:inline-flex;align-items:center;min-height:30px;padding:2px 10px;border-radius:999px;border:1px solid currentColor;font-weight:600;color:var(--fg)}

/* 378e baked Oct 22 with Karl's notes: the path as its own section after Four ways, footsteps running from icon edge to icon edge, an Analytics band under all three steps, his heading and copy edits, no lead line */
main.pg-home > .pth{order:3}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-row{list-style:none;margin:0;padding:28px 24px 32px;border-radius:12px;background:#f6f7f1;box-shadow:0 0 0 1px #d7dacd inset;display:flex;align-items:flex-start;justify-content:center;gap:4px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-stop{flex:0 1 190px;display:grid;justify-items:center;text-align:center;gap:6px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-ico{width:96px;height:64px;margin-bottom:6px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-stop h3{margin:0;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-stop p{margin:0;font-size:1rem;line-height:1.45;color:var(--fg-2);max-width:14em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet use{fill:var(--trail)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet svg{display:block}
@media (min-width:701px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet .pth-v{display:none}}
@media (min-width:701px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-stop{flex:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet{position:absolute;top:48px;height:24px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet:nth-child(2){left:calc(24px + (100% - 96px) / 6 + 58px);width:calc((100% - 96px) / 3 + 24px - 116px)} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet:nth-child(4){left:calc(24px + (100% - 96px) / 2 + 24px + 58px);width:calc((100% - 96px) / 3 + 24px - 94px)}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth > .body,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth > h2{grid-column:1 / -1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth > .body{margin-top:8px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-wrap .pth-row{border-radius:12px 12px 0 0;box-shadow:0 0 0 1px #d7dacd inset;padding-bottom:24px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 24px;border-radius:0 0 12px 12px;background:#dadcd2;box-shadow:0 0 0 1px #d7dacd inset}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer .pth-ico{width:60px;height:40px;margin:0;flex:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer p{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer b{color:var(--fg);font-weight:700;margin-right:6px}
@media (max-width:700px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-row{flex-direction:column;align-items:center;padding:24px 18px 26px;gap:0} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-stop{flex:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet{flex:none;display:flex;justify-content:center;width:40px;height:84px;margin:6px 0} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet svg:not(.pth-v){display:none} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-feet .pth-v{display:block;height:84px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer{flex-direction:column;text-align:center;gap:8px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer b{display:block;margin:0 0 2px}}

/* 379a/b (Oct 22): other wording for the three steps; the current text is Karl's edit */
html.c-379b main .pth-stop p[data-c="379a"][data-v="old"]{display:none!important}

/* the path panel names its text colors so the detector reads them the same as the browser does */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-row,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .pth-layer{--fg:#110d04;--fg-2:#4d5848;color:#110d04}

/* 379a baked Oct 22 with Karl's edit (grammar fixed): one promise through the path */
/* 382b baked Oct 23 with Karl's edits: Getting started is three steps before the work is agreed (intro call, scope & approach, kickoff) */
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 383 and 384: the four drawings in How a project works (Evaluate) and in the review card */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .ev-mini[hidden],html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .svc-mini[hidden]{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #how .ev-mini,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-mini{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #how .ev-mini .ev-it,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-mini li{display:grid;justify-items:center;gap:6px;padding:4px 0 0;border:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #how .ev-mini .pth-ico,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-mini .pth-ico{width:52px;height:35px;margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #how .ev-mini span,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-mini span{font-size:.875rem;font-weight:600;line-height:1.3;white-space:nowrap;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-mini{margin:16px 0 4px}

/* Oct 23 (Karl, direct): Selected work drops the logo tabs. Each project row leads with its logo, then the role, the product, and See before & after. The three logos sit at about the same height */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo{display:flex;align-items:center;height:36px;margin-bottom:12px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo img{height:32px;width:auto;filter:brightness(0) invert(1) opacity(.92)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows li:nth-child(2) .t-logo img{height:24px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc{gap:10px;font-size:1.25rem;line-height:1;font-weight:700;letter-spacing:-.015em;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc img{height:30px}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo{height:30px;margin-bottom:10px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo img{height:26px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows li:nth-child(2) .t-logo img{height:21px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc img{height:28px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc{font-size:1.25rem}}

/* Oct 23 (Karl, direct): in the vote reveal, You and the two quotes show bare marks. The circles stay on the five verdicts above, so the panel row reads apart from the reveal. Home and the AI page */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.vote-split,.ai2-quotes) .vm-wrap{box-shadow:none;background:none;width:auto;height:auto}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai :is(.vote-split,.ai2-quotes) .vm-wrap .vm{width:24px;height:24px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li{grid-template-columns:24px minmax(0,1fr);column-gap:14px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes li > span:last-child{padding-top:0} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-quotes .vm-wrap{justify-self:start;padding-top:2px}

/* Oct 23 (Karl, edit e1fcuum and comment): the AI strip is one short line, centered on phones */
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .ai-teaser .wrap{justify-content:center;text-align:center}}

/* 385b (baked Oct 23 with Karl's wording): the review card names its four parts in one line, no drawings */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-plus{margin:10px 0 0;font-size:1rem;line-height:1.45;font-weight:600;color:var(--fg)}

/* 387b (baked Oct 23): each duration tag sits at the top right of its card, level with the drawing */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2 > li{position:relative}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2 > li > .svc-meta{position:absolute;top:24px;right:24px;margin:0}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2 > li > .svc-meta{top:20px;right:18px}}

/* 388c (baked Oct 23): Getting started steps under a dark rule, the number in line with the heading, no footprints */
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .p-trail{display:none}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .p-trail{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps li{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:8px;padding-top:18px;border-top:1.5px solid var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps .pn{grid-row:auto;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--fg-2);font-size:1.5rem;line-height:1.38;font-weight:700;place-items:start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps h3{margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps p{grid-column:1 / -1}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{gap:28px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps li{grid-template-columns:auto minmax(0,1fr);column-gap:10px} html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps .pn{grid-row:auto;font-size:1.3125rem}}


/* 389a baked Oct 23 with Karl's sentence (edit e57agip): his break after "each" holds on wide screens only, so phones and tablets wrap on their own */
@media (max-width:900px){.br-wide{display:none}}

/* Oct 23 review round (390 to 416), baked Oct 23 with Karl's picks: the rules below are the accepted cards, ungated */


 
 
 
 
 
 
 

/* 390 (Oct 23 review, both reviewers): the rubric test leads with four facts and its own booking button, so the talk's QR link shows a next step on the first phone screen. The steps sit beside it on wide screens. "Practitioners" becomes "experts" throughout, "You get" becomes a list, the price says "all in", and the credit line names a Grade study */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2[hidden]{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,96px);row-gap:48px;align-items:start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2 .pg-lead{max-width:16em;text-wrap:balance}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-facts{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-facts li{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.25rem;line-height:1.4;color:var(--fg-2);font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-facts b{font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-cta .btn{margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-cta .good-note{margin:0;font-size:1.125rem;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how > li{position:relative;padding:22px 0 0;border-top:2px solid var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how > li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:#e0ac2b}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how h3{margin:0 0 8px;font-size:1.375rem;line-height:1.25;letter-spacing:-.015em;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how p,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how li li{margin:0;font-size:1.125rem;line-height:1.55;color:var(--fg-2);max-width:34em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how li li{position:relative;padding-left:18px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how li li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2 .pg-guard{grid-column:2;margin:-12px 0 0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-talk{margin:20px 0 0;display:grid;gap:8px;font-size:1.125rem;line-height:1.5;color:var(--fg-2);max-width:26em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-talk p{margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-slots{font-weight:700;color:var(--fg)}
@media (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2{grid-template-columns:minmax(0,1fr);row-gap:44px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2 .pg-lead{max-width:22em}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2 .pg-guard{grid-column:1;margin:-20px 0 0}
}
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-facts{margin-top:22px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-facts li{font-size:1.125rem;padding:12px 0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-cta .btn{display:flex;justify-content:center}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-cta .good-note{text-align:center}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-how{grid-template-columns:minmax(0,1fr);row-gap:32px}
}

/* 391a/b (Oct 23 review): the talk's closing ask, on the page the QR code opens. a: three slots in November plus the referral line. b: the referral line only, so nothing goes stale */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-talk,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-slots{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-talk{display:grid}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub2-slots{display:block}

/* 393 (Oct 23 review): on the AI page, the hero's second button and the end of the vote point to the rubric test. Phones show the hero button too (the old second link was hidden there) */
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .pg-hero .actions a.rub-go{display:flex;justify-content:center;width:100%;min-width:0;padding:13px 20px;margin-top:6px}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .pg-hero .actions a.rub-go[hidden]{display:none}

/* 396 (Oct 23 review, both reviewers, and the positioning doc's decision 2a): Four ways becomes two front doors, Product & UX reviews and AI evaluation. Embedded work is a line under the first door. The AI door sits on Pitch Black so the growth bet reads apart from the bread-and-butter work, and it names Grade, Compare, and the rubric test */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .doors[hidden]{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:36px 36px 40px;border-radius:12px;background:#f6f7f1;box-shadow:inset 0 0 0 1px #d7dacd;--line:#d7dacd}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ai{background:#1a0609;color:#ecede4;box-shadow:none;--bg:#1a0609;--fg:#ecede4;--fg-2:#c4bfb9;--line:#4a4440}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door h3{margin:0;font-size:clamp(1.75rem,2.6vw,2.375rem);line-height:1.08;font-weight:700;letter-spacing:-.025em;color:var(--fg);text-wrap:balance}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-for{margin:14px 0 0;font-size:1.125rem;line-height:1.5;color:var(--fg-2);max-width:30em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list{list-style:none;align-self:stretch;margin:28px 0 0;padding:0;border-top:2px solid var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ai .door-list{border-top-color:#e0ac2b}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:4px;padding:16px 0 18px;border-bottom:1px solid var(--line)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list b{font-size:1.25rem;line-height:1.3;font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list span{grid-column:1;font-size:1.0625rem;line-height:1.5;color:var(--fg-2);max-width:34em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list em{grid-column:2;grid-row:1;align-self:baseline;font-style:normal;font-size:1rem;line-height:1.3;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-more{margin:16px 0 0;font-size:1.0625rem;line-height:1.5;color:var(--fg-2);max-width:34em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:auto;padding:0 22px;border:2px solid var(--fg);border-radius:6px;font-weight:700;font-size:1.0625rem;line-height:1.2;color:var(--fg);text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go-wrap{margin-top:auto;padding-top:28px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go:hover{background:var(--fg);color:var(--bg,#f6f7f1)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ux .door-go:hover{color:#f6f7f1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go svg{width:16px;height:16px;flex:none}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .doors{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door{padding:26px 20px 28px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li{column-gap:14px;padding:14px 0 16px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list b{font-size:1.1875rem}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go-wrap{align-self:stretch}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go{display:flex;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go{transition:none}}

/* 397 (Oct 23 review): one name for each study. The study is a "panel study," its two kinds are a "Grade study" and a "Compare study," and the first step is a "rubric test." The home AI section names Compare for the first time */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-lede .ai2-k397{display:block;margin:16px 0 0;font-size:1.125rem;line-height:1.5;font-weight:400;letter-spacing:0;color:var(--fg-2);max-width:30em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-lede .ai2-k397 b{font-weight:700;color:var(--fg)}

/* 398: the full-size button label swaps inside a button, so its spans keep the button's line */


/* 399a/b (Oct 23 review, reopens 206b): section headings were 96px on the home and work pages, larger than the 75px page headline, and 56px on the AI page. One size everywhere, with the headline the largest text on every page. a: the AI page's 56px (36px on phones). b: 64px (38px on phones) */

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main h2[id^="h-"]:not(#h-name):not(.vh){font-size:clamp(2.375rem,5vw,4rem);line-height:1.01;letter-spacing:-.03em}

/* 400 (Oct 23 review): gold focus rings measured 1.6:1 on Lichen, and so did the phone menu's gold Close label. Ink rings on light grounds, gold rings on dark ones (the design system says gold is never text or a thin line on Lichen) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root{--ring:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root :is(.open,.ai-teaser,#work-teaser,main.pg-home #ai,.name,#faq,main.pg-work .how,main.pg-work #clients,.ai2-case,main #services .door-ai,.foot.dark){--ring:#e0ac2b}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case{--ring:#e0ac2b}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root :focus-visible{outline-color:var(--ring)!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu{--ring:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root.menu-open .menu-btn,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root.menu-open .menu-btn .menu-lbl{color:#1a0609}

/* 406 (Oct 23 review): at 820px the pages read as stretched phone layouts with empty right halves. Tablet widths (601 to 900px) get two and three columns where the desktop has them */
@media (min-width:601px) and (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps p{max-width:none}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"lede vis" "stat vis" "go vis" ". vis";column-gap:32px;align-items:start}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai :is(.ai2-lede,.ai2-stat){max-width:none}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-case{max-width:none;width:100%}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .portrait{grid-column:1 / span 5;grid-row:2;align-self:start;max-width:none}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .body{grid-column:6 / -1;grid-row:2;align-self:start}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof{grid-template-columns:minmax(0,1fr)}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li:nth-child(2){border-top:1px solid #d7dacd}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .ai2-case{max-width:none;width:100%}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .sheet{max-width:none}
}

/* 407 (Oct 23 review): When to reach out had 24px above its heading, against 64 to 120px on every other section, so it sat cramped under the dark Selected work band */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time{padding-top:96px}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time{padding-top:72px}}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time{padding-top:48px}}

/* 408 (Oct 23 review): on phones the slider's D handle covered note 1 on the HouseFacts image, and a second, unlabeled slider sat under each image. The handle moves near the bottom edge, the notes sit above it, and the second slider is hidden on phones (dragging on the image does the same thing, and it still works with a keyboard) */
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .cmp-line .cmp-d{top:84%}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-layer{z-index:5}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba.cmp .cmp-range{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .ba.cmp .cmp-range:focus-visible{position:static;width:100%;height:44px;margin:0;clip:auto;opacity:1}
}

/* 409 (Oct 23 review): lines over 75 characters (work notes at tablet width, client quotes on desktop, the rubric lead) and headings that end with one word on its own line on phones */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .an-list .an-txt{max-width:62ch}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq .cq-q{max-width:34em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .pg-lead{max-width:36em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main :is(h2,h3),html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .h1b{text-wrap:balance}

/* 410 (Oct 23 review): tap targets under 44px at tablet width (nav links, contact links, the full-size button) and three controls with no hover state (the home Services button, the When to reach out cards, the FAQ rows) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .top .nav a{display:inline-flex;align-items:center;min-height:44px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .contact :is(.big a,.social a){display:inline-flex;align-items:center;min-height:44px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-open{min-height:44px;display:inline-flex;align-items:center}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta .btn:hover{background:#e0ac2b;color:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases > li{transition:box-shadow .2s var(--ease)}
@media (hover:hover){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases > li:hover{box-shadow:inset 0 0 0 1px var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit-q:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #faq .faq-q{transition:color .2s var(--ease)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #faq .faq-q:hover{color:#e0ac2b}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases > li,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #faq .faq-q{transition:none}}

/* 411 (Oct 23 review): the sample readout card and a few captions sat at 14 to 15px, under your 16px floor */






/* 412 (Oct 23 review): the phone menu's corner path was gold, the only gold path on the site (bronze is for paths), and Tab moved focus out of the open menu into the page behind it */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark .worn{stroke:var(--trail)}

/* 413a/b/c (Oct 23, Karl's note on 387b): the duration tags stay at the top right, in a less rounded shape or with no outline. a: square corners, thin outline. b: no outline, a small clock and muted text. c: a filled tint with square corners */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .grid2 > li > .svc-meta .sm-d{border-radius:4px;padding:3px 8px;border-width:1px}




/* 414a/b (Oct 23, Karl's note on 388c): no rule above each step, and a different number color. a: the numbers in ink, like the step headings. b: the numbers in the brand green */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps li{border-top:none;padding-top:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps .pn{color:var(--fg)}


/* 415 (Oct 23, Karl's 389a sentence): "with" before AI judges, so the second figure reads as experts against AI judges */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .w415{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .w415{display:inline}

/* 416 (Oct 23, Karl's comment on 385b): the four-parts line in the same style as the card's copy, so the review card reads like the other three */


/* 271 baked Oct 23: the About list's shown order is the HTML order (Fortune 500 consulting, From 0 to >100k users, Scaled from Seed to Series B, Peer-reviewed), so screen readers hear what is shown. The panel rules follow the first row */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li{border-top:1px solid #d7dacd}
@media (min-width:601px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li:is(:nth-child(1),:nth-child(2)){border-top:0}}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li:nth-child(1){border-top:0}}

/* Oct 23 review: the work page's credit lines are real text in the caption (span.cred), not CSS content, since they keep Karl's role accurate. Same look as before */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .ba-cap > span::after{content:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .ba-cap .cred{font-weight:400;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main:not(.pg-work) #clients .ba-cap .cred{display:none}

/* 414a baked Oct 23 (Karl's note): the steps sit a little lower under the Getting started heading */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{margin-top:16px}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain .plain-steps{margin-top:8px}}

/* Oct 23 round 2 (417 to 424): cards from Karl's notes and comments on round 1 */

/* Oct 23 round 2: in-place text swaps (span.sw-o is the current text, span.sw-n the change). Baking keeps the picked text and drops the spans */


 

/* 420a/b/c (Karl's note on 396): the drawings come back, with three ways to keep what worked in the old 2x2 grid. a: a drawing on every door row. b: each format as its own card under the two door names. c: the 2x2 grid sorted into the two doors. The four old drawings plus two new ones, a rubric with two experts' marks and two unlabeled replies */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .dico{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .dico{display:block;flex:none;width:auto;max-width:none;overflow:visible}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ai{--line-strong:#6a625d}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li{grid-template-columns:80px minmax(0,1fr) auto;column-gap:20px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > .dico{grid-column:1;grid-row:1 / span 2;align-self:start;height:36px;margin-top:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > b{grid-column:2;grid-row:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > em{grid-column:3;grid-row:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > span{grid-column:2 / -1;grid-row:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-more{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:20px;align-items:start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-more .dico{height:36px;margin-top:0}
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > .dico{grid-column:1;grid-row:1;height:32px;margin:0 0 10px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > b{grid-column:1;grid-row:2}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > em{grid-column:2;grid-row:2}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list li > span{grid-column:1 / -1;grid-row:3}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-more{grid-template-columns:minmax(0,1fr);row-gap:10px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-more .dico{height:32px}
}














/* 418 (Karl's comment): the booking row under the doors goes. The hidden state needs saying, since the row is display:flex */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .svc-cta[hidden]{display:none}

/* 421a/b (Karl's note on 390: the spacing and design felt awkward). Both: the 60-day credit moves under the price, the November slots sit under the booking button, three numbered steps, and the referral line closes the section. a: a Pitch Black offer card beside the heading and lead, the steps across below. b: the ask on the left as today, the steps in one light card beside the heading */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3{display:block}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-lead{max-width:18em;text-wrap:balance}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-facts{list-style:none;margin:0;padding:0;border-top:2px solid var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-facts li{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.25rem;line-height:1.4;color:var(--fg-2);font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-facts b{font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-credit{margin:16px 0 0;font-size:1.125rem;line-height:1.5;color:var(--fg-2);max-width:30em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta .btn{margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta .good-note{margin:0;font-size:1.125rem;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-slots{margin:16px 0 0;font-size:1.125rem;line-height:1.5;font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how{list-style:none;margin:0;padding:0;counter-reset:rs}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li{counter-increment:rs;min-width:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li::before{content:counter(rs);display:grid;place-items:center;width:36px;height:36px;margin:0 0 14px;border-radius:50%;background:#e0ac2b;color:#1a0609;font-size:1.0625rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how h3{margin:0 0 8px;font-size:1.375rem;line-height:1.25;letter-spacing:-.015em;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how p,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how li li{margin:0;font-size:1.125rem;line-height:1.55;color:var(--fg-2);max-width:34em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how li li{position:relative;padding-left:18px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how li li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-ref{margin:40px 0 0;font-size:1.125rem;line-height:1.5;color:var(--fg-2);max-width:40em}
@media (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-lead{margin-bottom:28px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li::before{grid-row:1 / span 2;margin:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how h3{margin-top:5px}
}
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-facts li{font-size:1.125rem;padding:12px 0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta .btn{display:flex;justify-content:center}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta .good-note{text-align:center}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-ref{margin-top:32px}
}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-offer{padding:32px 32px 34px;border-radius:12px;background:#1a0609;color:#ecede4;--bg:#1a0609;--fg:#ecede4;--fg-2:#c4bfb9;--line:#4a4440;--ring:#e0ac2b}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-facts{border-top-color:#e0ac2b}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta .btn{background:#ecede4;border-color:#ecede4;color:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-cta .btn:hover{background:#e0ac2b;border-color:#e0ac2b;color:#1a0609}
@media (min-width:901px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric{grid-template-rows:auto auto 1fr auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric > .rub3{display:contents}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-lead{grid-column:1 / 7;grid-row:2;align-self:start;margin:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-ref{grid-column:1 / 7;grid-row:3;align-self:start;margin:0;max-width:26em}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-offer{grid-column:8 / -1;grid-row:1 / span 3;align-self:start;margin-top:30px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px var(--gutter);margin-top:40px}
}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-offer{padding:24px 20px 26px}}




/* 419 (Karl's comment): the three logos in Selected work about 30% larger, at matching heights */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo{height:48px;margin-bottom:16px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo img{height:42px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows li:nth-child(2) .t-logo img{height:30px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc{gap:12px;font-size:1.625rem}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc img{height:40px}
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo{height:40px;margin-bottom:12px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo img{height:34px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows li:nth-child(2) .t-logo img{height:27px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc{font-size:1.5rem}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-logo.t-cc img{height:36px}
}
/* 422 (Karl's note on 412): the phone menu's corner mark gets its sidewalk back, the same mark as the footer's, under the bronze path */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .menu .menu-mark .walk{display:inline;fill:none;stroke:var(--fg-2);stroke-width:1.6}
/* 423 (Karl's note on 414a): the Getting started steps on near-white cards, the old Four ways card */

/* Oct 23 round 3 (425 to 433): cards from Karl's notes on round 2 */

/* Oct 23 round 3: in-place text swaps (span.sw-o is the current text, span.sw-n the change). Baking keeps the picked text and drops the spans */


 
 
 
 
 
 
 

/* 425a/b (Karl's note on 421a: You send, Two experts grade, You get still look awkward). a: the same light card and dotted path as How a panel study works. b: each step under a rule with its number in line with the heading, like Getting started on home */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how{padding:28px 28px 32px;border-radius:12px;background:#f6f7f1;box-shadow:inset 0 0 0 1px #d7dacd}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li{position:relative}
@media (min-width:901px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how{column-gap:40px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li:not(:last-child)::after{content:"";position:absolute;top:16px;left:48px;right:-28px;height:4px;background:radial-gradient(circle,var(--trail) 1.4px,transparent 1.9px) 0 50% / 9px 4px repeat-x;pointer-events:none}
}
@media (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how > li:not(:last-child)::after{content:"";position:absolute;top:44px;bottom:-24px;left:16px;width:4px;background:radial-gradient(circle,var(--trail) 1.4px,transparent 1.9px) 50% 0 / 4px 9px repeat-y;pointer-events:none}
}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .rub3-how{padding:22px 20px 24px}}





/* 426 (Karl, Oct 23): the note opens as a bubble on the After image at its number, as well as in the list below. Sized to cover as little of the screen as it can */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-tip{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-stage{position:relative}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-tip:not([hidden]){display:block;position:absolute;z-index:6;width:min(300px,calc(100% - 20px));padding:12px 14px 13px;border-radius:10px;background:#f6f7f1;color:#4d5848;font-size:1rem;line-height:1.45;text-align:left;box-shadow:0 12px 28px -10px rgba(17,13,4,.6),0 0 0 1px rgba(17,13,4,.14);pointer-events:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-tip b{display:block;margin:0 0 3px;font-size:1.0625rem;line-height:1.3;color:#1a0609}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-tip::after{content:"";position:absolute;left:var(--tx,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:#f6f7f1;transform:rotate(45deg);box-shadow:2px 2px 0 0 rgba(17,13,4,.08)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-tip.below::after{bottom:auto;top:-6px;box-shadow:-2px -2px 0 0 rgba(17,13,4,.08)}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .an-tip:not([hidden]){width:min(260px,calc(100% - 20px));padding:10px 12px 11px}}

/* 427a/b (Karl, Oct 23: each project is doing a lot on desktop, phones and narrow windows are fine). main.pg-work #clients .specs > articleide screens only (1101px and up). a: the notes sit in a column beside the image, and the results and quote share a row. b: the image, caption, and quote show, and the notes and results open with one button */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .more427{display:none}
@media (min-width:1101px){
 
 
 
 
 
 
 
 
 
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427{display:inline-flex;align-items:center;gap:10px;order:8;justify-self:start;min-height:44px;margin:16px 0 0;padding:0 18px;border:1.5px solid rgba(236,237,228,.6);border-radius:6px;background:none;color:var(--fg);font:600 1.0625rem/1.2 var(--sans);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427:hover{background:#ecede4;border-color:#ecede4;color:#1a0609}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 svg{width:16px;height:16px;transition:transform .2s var(--ease)}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 .m-c,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427 .m-o{display:none}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427 .m-c{display:inline}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427 svg{transform:rotate(180deg)}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) .an-notes,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) > .txt > dl,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) > dl{display:none}
}
@media (min-width:1101px) and (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 svg{transition:none}}

/* 428a/b (Karl: the work hero is less compelling than the others, maybe because "Selected work" is so short). The headline becomes a full line like the home and AI heroes. The swap spans inside h1 keep their block layout */



html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .work-hero h1 .h1a{text-wrap:balance}

/* 430 (Karl, Oct 23: the AI page is spread out and awkward on desktop). 901px and up. Grade a reply yourself: the demo card starts at the top rule beside the heading, like the readout card, and the stat loses its forced line break. How a panel study works: Grade and Compare move up beside the heading, and the steps card follows straight after */
@media (min-width:901px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai > .sec,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai.sec{grid-template-rows:auto 1fr}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-try > .ai2-case{grid-column:7 / -1;grid-row:1 / span 2;margin-top:30px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-try-txt{grid-row:2}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .br-wide{display:none}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps{grid-template-rows:auto auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps > .pg-kinds{grid-column:7 / -1;grid-row:1;align-self:start;margin-top:30px;gap:0 32px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps > .pg-kinds li{padding-top:0;border-top:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps > .pg-kinds .pg-ico{width:60px;height:34px;margin-bottom:10px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps > .pg-kinds h3{font-size:1.5rem}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps > .pg-kinds p{font-size:1.0625rem}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps > .body{grid-row:2;margin-top:8px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps .pg-steps{margin-top:24px}
}

/* 431a/b (Karl: should the desire paths band sit higher?). a: just before the Selected work teaser, so the term is defined right before the work. b: right under the hero and the AI strip, as the opening idea */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:5}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #good-time{order:6}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai{order:7}


/* 433a/b (Karl's comment: what does 0.09 to 0.30 mean, and the paper's title talks about limits of human feedback). a: the Jafari figure goes. b: it stays, said in words */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg .pg-evid ul{grid-template-columns:minmax(0,1fr)}

/* Oct 23 round 4 (434 to 436): cards from Karl's notes on round 3 */

/* 434a/b (Karl's comment: What is different about this method is the third thing inside How a panel study works, so it fights for attention). a: its own section after What the readout shows, the three points beside the heading. b: the three points sit in What the readout shows, numbered, with the same gold numbers on the sample page where each one happens */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #method,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg .ro434,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg .ro-pin{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps .pg-diff{display:none}







html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434{display:block;margin-top:12px;padding-top:24px;border-top:1px solid var(--line)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434 h3{margin:0 0 16px;font-size:1.375rem;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434 ol{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:ro}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434 li{counter-increment:ro;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434 li::before{content:counter(ro);grid-row:1 / span 2;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:#e0ac2b;color:#1a0609;font-size:.875rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434 li b{display:block;font-size:1.125rem;line-height:1.35;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434 .pg-diff-src{margin:20px 0 0;font-size:1rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-pin{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin:0 8px 0 0;border-radius:50%;background:#e0ac2b;color:#1a0609;font-size:.8125rem;font-weight:700;line-height:1;vertical-align:2px;font-variant-numeric:tabular-nums}

/* 435a/b (Karl's note on 433a: with one study left, "Another study finds" is awkwardly sized and built). a: one sentence under the main stat. b: the block goes */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-evid-1{margin:0;font-size:1.125rem;line-height:1.55;color:var(--fg-2);max-width:34em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-evid-1 b{font-weight:700;color:var(--fg);white-space:nowrap}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-evid-1 a{color:inherit}


/* 436a/b (Karl: the desire paths band feels bland next to the other sections). a: a line on what a desire path is, then three places one shows up in a product. b: the definition line only */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-more,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-def2,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > .dp-more{display:block;grid-column:6 / -1;margin-top:4px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-def2{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-def{margin:0;font-size:1.125rem;line-height:1.55;color:#e1e4da;max-width:36em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex{display:grid;list-style:none;margin:20px 0 0;padding:0;max-width:36em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;padding:14px 0;border-top:1px solid rgba(236,237,228,.28)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li:last-child{border-bottom:1px solid rgba(236,237,228,.28)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li::before{content:"";grid-row:1 / span 2;align-self:start;width:22px;height:12px;margin-top:7px;background:radial-gradient(circle,var(--trail) 2.8px,transparent 3.3px) 0 50% / 8px 12px repeat-x}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex b{font-size:1.25rem;line-height:1.3;font-weight:700;color:#ecede4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex span{font-size:1.0625rem;line-height:1.5;color:#e1e4da}
@media (min-width:601px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > .dp-more{padding-left:clamp(32px,6vw,96px)}}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > .dp-more{grid-column:1 / -1}}

/* Oct 23 (Karl, direct): on tablets and phones the Selected work teaser stacks, so each row's title uses the full width instead of breaking at 22 characters */
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-out{max-width:none}}

/* Oct 24 sweep (direct fixes, no visible change on desktop): on tablets (601 to 900px) the desire paths band put its drawing beside text that ran under it, so the drawing now sits above the text, as on phones. On 360px screens and below, the door buttons keep to one line */
@media (min-width:601px) and (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .corner-fig{position:relative;top:auto;left:auto;transform:none;width:min(100% - 2 * var(--gutter),420px);margin:56px var(--gutter) 0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > *{grid-column:1 / -1}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > :is(h2,p,.dp-more){padding-left:0}
}
@media (max-width:360px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-go{padding:0 14px;white-space:nowrap;font-size:1rem}}

/* Oct 24 round 5 (437 to 442): cards from Karl's notes on round 4 */

/* Oct 24 round 5: in-place text swaps (span.sw-o is the current text, span.sw-n the change). Baking keeps the picked text and drops the spans */


 
 
 
 
 

/* 441a/b (Karl's note on 436a: the definition stays beside the drawing, "In a product" becomes its own full-width row under the drawing and the definition, and footprints replace the dots). a: also stronger examples (search, workaround). b: the examples as they are */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-in,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-foot,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li[hidden]{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-def2{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li::before{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-foot{display:block;grid-row:1 / span 2;width:26px;height:30px;margin-top:2px;fill:var(--trail)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li{grid-template-columns:26px minmax(0,1fr);column-gap:16px;align-content:start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-in{display:block;margin:0 0 4px;font-size:1.25rem;line-height:1.35;font-weight:700;color:#ecede4}
@media (min-width:901px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .corner-fig{top:88px;transform:none}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec{min-height:calc(min(38vw,460px) * .87 + 120px);align-content:start}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > .dp-more{display:contents}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-def{grid-column:6 / -1;margin:4px 0 0;padding-left:clamp(32px,6vw,96px)}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-in{grid-column:1 / -1;margin-top:64px;padding-top:32px;border-top:1px solid rgba(236,237,228,.28)}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);max-width:none;margin-top:-8px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li:last-child{border:none;padding:0}
}
@media (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-in{margin-top:32px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex{margin-top:12px}
}

/* 442a/b (Karl: hovering anywhere on a teaser row changes the button, and should these be gold primary buttons). a: the button changes only under the pointer, and the row's title underlines when the row is hovered. b: gold buttons */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-row:hover .t-go{color:var(--fg);background:none;border-color:rgba(236,237,228,.6)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-rows .t-row .t-go:hover{color:#1a0609;background:#ecede4;border-color:#ecede4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #work-teaser .t-row:hover .t-out{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}




/* Oct 24 (Karl: the scrolling clients & partners row is somewhat broken on the live site). Two likely causes on iPhone: Safari sizes images shrunk with zoom inconsistently, so the loop can jump or logos can overlap, and a tap leaves the row paused and dimmed (touch screens keep :hover after a tap). Phones now get explicit 85% image heights, and the pause and dimming only happen on devices with a real pointer */
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(1) img{zoom:normal;height:23px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(2) img{zoom:normal;height:22px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(3) img{zoom:normal;height:22px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(4) img{zoom:normal;height:27px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(5) img{zoom:normal;height:19px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(6) img{zoom:normal;height:14px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(7) img{zoom:normal;height:39px;width:auto}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(8) img{zoom:normal;height:22px;width:auto}
}
@media (hover:none){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .marquee:hover .logo-row,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .marquee:focus-within .logo-row{animation-play-state:running}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .marquee:hover .logo-row > li{opacity:.9}
}

/* Oct 24 (Karl, A): the desire path definition moves up, right under the heading and before "I find the shortcuts", so the term is defined before it is used */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p.dp-def{margin:0;font-size:1.125rem;line-height:1.55;color:#e1e4da;max-width:36em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p.dp-def + p{margin-top:20px}
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p.dp-def{grid-column:6 / -1;padding-left:clamp(32px,6vw,96px);margin-top:-4px}}
@media (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .sec > p.dp-def{grid-column:1 / -1}}

/* Oct 24 round 6 (443 to 445): cards from Karl's notes after latest+41 */

/* Oct 24 round 6: in-place text swaps (span.sw-o is the current text, span.sw-n the change). Baking keeps the picked text and drops the spans */


 
 

/* 445 (Karl, Oct 24): on tablets (601 to 900px) the four Before Desire Path facts stack in a 440px column beside the photo. The facts move below the
   photo and bio, full width, as a 2x2 like the desktop. The bio's container steps aside (display:contents) so its parts can be placed on the section grid */
@media (min-width:601px) and (max-width:900px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .body{display:contents}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .portrait{grid-column:1 / span 5;grid-row:2}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .body > .lead{grid-column:6 / -1;grid-row:2;align-self:center;margin:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about h3.before{grid-column:1 / -1;grid-row:3;margin:16px 0 -16px}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof{grid-column:1 / -1;grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);margin:0}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li{border-top:1px solid #d7dacd}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .proof > li:is(:nth-child(1),:nth-child(2)){border-top:none}
}

/* Oct 24 round 7 (446 to 450): cards from Karl's notes and comments on round 6 */

/* Oct 24 round 7: in-place text swaps (span.sw-o is the current text, span.sw-n the change). Baking keeps the picked text and drops the spans */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root i:is(.sw-o,.sw-n){font-style:inherit}

/* 447 (Karl's comment, Oct 24): the "find what to fix" line moves under the sample readout, as a caption to it */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-guard{margin:16px 0 0;font-size:1.0625rem;line-height:1.5;color:var(--fg-2);max-width:40em}
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-guard{grid-column:7 / -1;grid-row:3;margin-top:20px}}

/* 448 (Karl's comment, Oct 24): a share link right after "Send them this page." */

/* 450: the You get swap holds a heading and a list, so it shows as a block */


/* Oct 24 round 8 (451 to 455) */
/* 451: proportional numerals in running text. In Instrument Sans the tabular setting gives the hyphen and the 1 fixed widths, so ranges and compounds read "1 - 5 days" and "full - time". Nothing on the site lines numbers up in columns, so every element goes proportional */
html.c-451:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body,html.c-451:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body *,html.c-451:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body *::before,html.c-451:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root body *::after{font-variant-numeric:normal!important}

/* 452: Two ways to work together, stronger body text. The door lines mix the secondary color toward the main text color, a touch heavier, and the light door drops antialiased smoothing so Macs and iPhones draw its dark-on-light strokes at full weight */
html.c-452:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door :is(.door-for,.door-list span,.door-more){font-weight:450}
html.c-452:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ux :is(.door-for,.door-list span,.door-more){color:color-mix(in srgb,var(--fg-2) 55%,var(--fg))}
html.c-452:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ai :is(.door-for,.door-list span,.door-more){color:color-mix(in srgb,var(--fg-2) 40%,var(--fg))}
html.c-452:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-ux{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}

/* 453: the What changed, and why button on every screen size. Below 1101px each project shows its image, caption, and quote, and the notes and results open with the button, as on desktop */
html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427{display:inline-flex;align-items:center;gap:10px;order:8;justify-self:start;min-height:44px;margin:16px 0 0;padding:0 18px;border:1.5px solid rgba(236,237,228,.6);border-radius:6px;background:none;color:var(--fg);font:600 1.0625rem/1.2 var(--sans);cursor:pointer}
html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 svg{width:16px;height:16px;transition:transform .2s var(--ease)}
html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 .m-c,html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427 .m-o{display:none}
html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427 .m-c{display:inline}
html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427 svg{transform:rotate(180deg)}
html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) .an-notes,html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) > .txt > dl,html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) > dl{display:none}

/* 454a/b: the button's words. Swap spans inside .m-o and .m-c */
html.c-454a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="454a"]{display:none} html.c-454a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="454a"]{display:inline}
html.c-454b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="454b"]{display:none} html.c-454b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="454b"]{display:inline}

/* 455a: an accordion row. Full width, a hairline above and below, the words on the left, the chevron on the right, no box. It reads as more content below rather than as a booking button */
html.c-455a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427{justify-self:stretch;justify-content:space-between;width:100%;min-height:56px;margin:24px 0 0;padding:0;border:none;border-top:1px solid rgba(236,237,228,.28);border-bottom:1px solid rgba(236,237,228,.28);border-radius:0;background:none;color:var(--fg);text-align:left}
html.c-455a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427:hover{background:none;color:var(--highlight,#e0ac2b);border-color:rgba(236,237,228,.28)}
html.c-455a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 svg{width:20px;height:20px}
html.c-455a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article.x427 .more427{border-bottom-color:transparent}
/* 455b: a text link with a chevron, the same as the "2 more" control under Results on phones */
html.c-455b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427{gap:6px;min-height:44px;margin:16px 0 0;padding:0;border:none;border-radius:0;background:none;color:var(--fg);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
html.c-455b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427:hover{background:none;color:var(--fg);text-decoration-thickness:2px}
html.c-455b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 svg{width:18px;height:18px}
html:is(.c-455a,.c-455b) main.pg-work #clients .specs > article .more427:focus-visible{outline:2px solid var(--highlight,#e0ac2b);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:reduce){html.c-453:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article .more427 svg{transition:none}}


/* Oct 24 round 9 (456 to 458) */
/* 456: the Shipping AI strip only where the header links are hidden (740px and below: phones and narrow tablets). Wider screens have AI evaluation in the header. The design is saved in patterns/banner-strip.html */
@media (min-width:741px){html.c-456:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > .ai-teaser{display:none!important}}

/* 457: home AI section without the Grade and Compare lines, which repeat the AI door's rows */
html.c-457:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-k397{display:none!important}

/* 458a: offer first. Hero, the doors, When to reach out, the desire paths band, Selected work, About, AI evaluation, Getting started, FAQs, Let's connect. About sits between Selected work and AI evaluation so the two dark sections don't run together */
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #services{order:2}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #good-time{order:3}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:4}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:5}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #about{order:6}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai{order:7}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #plain{order:8}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #faq{order:9}
html.c-458a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #contact{order:10}
/* 458b: problem first. Same as 458a, with When to reach out before the doors */
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #good-time{order:2}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #services{order:3}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:4}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:5}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #about{order:6}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai{order:7}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #plain{order:8}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #faq{order:9}
html.c-458b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #contact{order:10}

/* 454c (Karl's note on 454a): the current words without the comma. Swap spans inside .m-o and .m-c */
html.c-454c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="454c"]{display:none} html.c-454c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="454c"]{display:inline}
/* 458c (Karl's order, his note on 458a): doors, When to reach out, band, Selected work, Getting started, AI evaluation, About, FAQs, Let's connect. Getting started sits between the two dark sections */
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #services{order:2}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #good-time{order:3}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:4}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:5}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #plain{order:6}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai{order:7}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #about{order:8}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #faq{order:9}
html.c-458c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #contact{order:10}
/* 458d (Karl's note on 458c): 458c with When to reach out above the doors */
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #good-time{order:2}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #services{order:3}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:4}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:5}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #plain{order:6}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai{order:7}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #about{order:8}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #faq{order:9}
html.c-458d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #contact{order:10}

/* 460a/b: the method label wraps as text, with the chevron right after the last word (it was a flex row, so a two-line label pushed the chevron to the far edge) */
html:is(.c-460a,.c-460b):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-meth{display:block;justify-self:start}
html:is(.c-460a,.c-460b):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases .fit-q > .fit-meth svg{display:inline-block;vertical-align:-3px;margin-left:6px}

/* 461 (Karl, Oct 24): When to reach out on wide screens (1101px and up) reads in timeline order. Before launch is a row of three cards, the launch line runs across the page, and After launch is a second row of three. It no longer mirrors the two doors' side-by-side columns right below it. Narrower screens keep their layouts */
@media (min-width:1101px){
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split{display:flex;flex-direction:column;gap:0}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase{display:block;grid-row:auto}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase[data-ph="0"]{order:1}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .launch-line{display:none}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase[data-ph="1"]{margin-top:48px}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase[data-ph="1"]{order:3}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .launch-arrow{display:none}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:16px}
html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > h3{margin:0 0 16px}
}
@media (min-width:1101px){html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q{align-content:start}}
@media (min-width:1101px){html.c-461:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases{align-items:start}}

/* 462 (Karl, Oct 24): on wide screens (with 461's rows) each card's drawing sits above the title, a little smaller, and the title, subtitle, method, and open panel use the card's full width */
@media (min-width:1101px){
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q{grid-template-columns:minmax(0,1fr);row-gap:0;align-content:start;min-height:0}
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > svg:first-child{grid-column:1;grid-row:auto;width:64px;height:30px;margin:0 0 14px}
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > b,html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > span,html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > .fit-meth{grid-column:1}
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases li.is-open > .fit{margin-left:0}
}
@media (min-width:1101px){
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q{min-height:0!important}
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases:not(:has(li.is-open)){align-items:stretch}
html.c-462:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > svg:first-child:has(.nopay){margin-left:-17px}
}

/* Oct 24 (Karl, A, shipped with no card): the desire paths title comes before the drawing on phones and tablets. The drawing now sits inside .wrap right after the h2. At 901px and up it stays absolute beside the text (.wrap is position:relative and lines up with the old containing block, so left and top land in the same place) */
@media (max-width:900px){
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name#name .corner-fig{margin:28px 0 28px;width:100%;max-width:420px;justify-self:stretch;grid-column:1/-1}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name#name .sec{padding-top:56px}
}
@media (max-width:600px){
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name#name .corner-fig{margin:24px 0 24px;width:100%;max-width:420px;justify-self:stretch;grid-column:1/-1}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name#name .sec{padding-top:40px}
}

/* Oct 24 round 15 (sweep): copy cards 463 to 470, sw-o/sw-n swaps */

/* Oct 24 round 16: cards 471 to 476 and 448c */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .share-c{display:inline;margin:0;padding:0;border:none;background:none;font:inherit;font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .share-c[hidden]{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .share-c:hover{text-decoration-thickness:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #rubric .share-c:focus-visible{outline:2px solid var(--highlight);outline-offset:3px;border-radius:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .fit .fit-cl{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .fit .fit-cl:hover{text-decoration-thickness:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .hl-name{background:none;color:inherit;padding:0}
@media (max-width:900px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .pg-get-txt{display:contents}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-intro{order:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .pg-get .sheet{order:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-guard,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .pg-guard{order:3;margin-top:-16px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro434{order:4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .pg-cta,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .pg-close320{order:5}
}
@media (min-width:901px) and (max-width:1100px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-guard{margin-top:-9px}}
@media (min-width:1101px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #readout .ro-guard{margin-top:-30px}}

/* Oct 24 round 17: 477, the drawing above the title on phones and tablets */
@media (max-width:1100px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q{grid-template-columns:minmax(0,1fr);row-gap:0;align-content:start;min-height:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > svg:first-child{grid-column:1;grid-row:auto;width:64px;height:30px;margin:0 0 14px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > b,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > span,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > .fit-meth{grid-column:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases li.is-open > .fit{margin-left:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases .fit-q > svg:first-child:has(.nopay){margin-left:-17px}
}

/* Oct 24 (Karl, shipped with no card): When to reach out on tablets (821px to 1100px) stacks Before launch above After launch, like phones. It was two columns there, since the 1-column rule stopped at 820px and 461's rows start at 1101px */
@media (min-width:821px) and (max-width:1100px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase{display:block;grid-row:auto}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-row:auto}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .launch-arrow{display:none}
}

/* Oct 25 round 18 (Andreas's feedback): 478a/b hero, 480 price swaps. 479 is a script in each page */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .ag478{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hl478{display:none}
html.c-478a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .r-out,html.c-478a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .r-in{display:none}
html.c-478b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hw183 > .sw-o{display:none}
html.c-478b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hw183 > .hl478{display:inline-block;white-space:nowrap}
html.c-478b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .ag478,html.c-478b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .rj{display:none}
@media (max-width:600px){html.c-478b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hw183 > .hl478{display:inline;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}}
html.c-480:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="480"]{display:none} html.c-480:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="480"]{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .rub3-facts b .rub480{font-weight:500}

/* Oct 25 round 19: 481a/b AI page why section, 482 home AI teaser, 483 work teaser tabs */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg > #why{order:1}
html:not(.c-481a):not(.c-481b):root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg > #why{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .w481a,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .w481b{display:none}
html.c-481a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .w481a{display:grid}
html.c-481b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .w481b{display:block}
html.c-481a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .ai2-stat,html.c-481a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-evid,html.c-481b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .ai2-stat,html.c-481b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-evid{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards{list-style:none;margin:0;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards li{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:20px 20px 22px;border-radius:10px;background:#f6f7f1;box-shadow:0 0 0 1px #d7dacd inset}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-mark{display:block;width:64px;height:30px;margin:0 0 14px;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-mark .ln{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-mark .mu{fill:none;stroke:var(--fg-2);stroke-width:5;stroke-linecap:round}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-mark .dash{stroke-dasharray:3 5}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards b{display:block;font-size:1.5rem;line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards span{display:block;margin:8px 0 0;font-size:1rem;line-height:1.45;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-meth{display:inline-flex;align-items:center;min-height:44px;margin:6px 0 -10px;font-weight:700;font-size:1rem;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-meth:hover{text-decoration-color:var(--highlight);text-decoration-thickness:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-meth:focus-visible{outline:2px solid var(--highlight);outline-offset:3px;border-radius:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-lede{margin:0;max-width:34ch;text-wrap:pretty;font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.35;font-weight:500;letter-spacing:-.015em;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid{margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid h3{margin:0 0 16px;font-size:1.125rem;line-height:1.3;font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .why-stat{margin:0;max-width:30ch;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .pg-evid{margin:20px 0 0;padding:0;border:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .pg-evid p{margin:0;max-width:52ch}
@media (max-width:820px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards{grid-template-columns:minmax(0,1fr);gap:8px}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards li{padding:16px 16px 18px}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-cards b{font-size:1.3125rem}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid{margin-top:40px}}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-meth{transition:none}}

@media (min-width:1101px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > h2{grid-column:1 / 5;grid-row:1}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > .body{grid-column:5 / -1;grid-row:1}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .why-stat{font-weight:600;letter-spacing:-.02em;max-width:32ch}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .why-stat .num{background:var(--highlight);color:#110d04;padding:.02em .12em .06em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .why-stat .src{display:block;margin-top:10px;font-size:1rem;line-height:1.45;font-weight:400;letter-spacing:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .pg-evid b{white-space:nowrap}

html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .why-stat span:not(.src){font-weight:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit}
@media (min-width:1101px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > .body{margin-top:40px}}

/* 482: the home AI section as a teaser, no demo */
html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-grid{display:none}
html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-lede{max-width:24ch}
html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{max-width:36ch}
html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai-go{margin-top:40px}

@media (min-width:1101px){html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{grid-column:8 / -1;grid-row:2;align-self:start;margin:0;max-width:none}html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat .br-wide{display:none}html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai-go{grid-row:3}}

@media (max-width:1100px){html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-lede,html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat,html.c-482:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai-go{grid-column:1 / -1}}

/* 483: Selected work teaser as tabs */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{display:none}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{display:flex;align-items:stretch;gap:0 48px;margin:0 0 32px;border-bottom:1px solid rgba(235,237,228,.18)}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{appearance:none;display:flex;align-items:center;gap:10px;min-height:64px;margin:0 0 -1px;padding:8px 0 12px;border:none;border-bottom:2px solid transparent;background:none;color:var(--fg);font:700 1.375rem/1 var(--sans);letter-spacing:-.015em;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:hover{opacity:.85}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button.on{opacity:1;border-bottom-color:var(--highlight)}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:focus-visible{outline:2px solid var(--highlight);outline-offset:4px;border-radius:2px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 img{display:block;width:auto;height:28px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2) img{height:22px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:not(.on){display:none}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li{border:none;padding-top:0}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows .t-logo{display:none}
@media (max-width:600px){
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{justify-content:space-between;gap:0 12px;margin-bottom:24px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{min-height:52px;gap:6px;padding:6px 0 10px;font-size:.875rem;opacity:.7}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button.on{opacity:1}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 img{height:20px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2) img{height:auto;width:100%;max-width:112px}
}
@media (prefers-reduced-motion:reduce){html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{transition:none}}

/* Oct 25, Karl's notes on 481a and 483 (both accepted) */
@media (min-width:1101px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > h2{grid-column:1 / -1;grid-row:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > .body{grid-column:1 / -1;grid-row:2;margin-top:40px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid h3{grid-column:1 / -1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .pg-evid{margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .pg-evid p{max-width:44ch}
}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{gap:0 64px;margin-bottom:48px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{min-height:88px;gap:14px;padding:12px 0 18px;font-size:1.875rem;border-bottom-width:3px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 img{height:40px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2) img{height:32px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-go{min-height:0;padding:18px 38px;font-size:1.25rem;font-weight:700;gap:10px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-go .t-arw{width:18px;height:16px}
@media (min-width:1101px){html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
@media (max-width:820px){
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{gap:0 32px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{min-height:72px;font-size:1.5rem}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 img{height:32px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2) img{height:26px}
}
@media (max-width:600px){
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{gap:0 12px;margin-bottom:24px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{min-height:56px;gap:5px;padding:6px 0 10px;font-size:.875rem}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 img{height:20px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2) img{height:auto;width:100%;max-width:108px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-go{display:flex;justify-content:center;width:100%;padding:16px 24px;font-size:1.125rem}
}
@media (max-width:400px){html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button{font-size:.8125rem;gap:4px}html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 img{height:18px}html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2){flex:1 1 auto;min-width:0;justify-content:center}html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(2) img{max-width:100%}html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(3),html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483 button:nth-child(1){flex:none}}

/* Oct 25 (Karl, on 483): at 1101px and up the description sits under the screenshot, so the screenshot can grow */
@media (min-width:1101px){
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-row{grid-template-columns:minmax(0,2fr) minmax(0,5fr);grid-template-rows:auto 1fr auto;column-gap:48px;row-gap:0;align-items:start}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-txt{display:contents}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-img{grid-column:2;grid-row:1 / 3}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-out{grid-column:1;grid-row:1;margin:0}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-go{grid-column:1;grid-row:2;align-self:start;justify-self:start;margin-top:32px}
html.c-483:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-what{grid-column:2;grid-row:3;margin:16px 0 0}
}

/* Oct 25 round 20: 484a/b, two other ways to show the Selected work teaser */
/* 484a: all three projects side by side, a swipe row on phones and tablets. Replaces 483's tabs */
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-tabs483{display:none}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;border:none}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n){display:block;margin:0;padding:0;border:none}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-row{display:flex;flex-direction:column;align-items:stretch;gap:0;height:100%;padding:0}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-img{order:0;display:block;width:100%;aspect-ratio:4 / 3;margin:0;border-radius:10px;overflow:hidden;grid-column:auto;grid-row:auto}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-txt{order:1;display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:0;margin:0}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-logo{display:flex;align-items:center;gap:8px;height:30px;margin:24px 0 14px}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-logo img{height:100%;width:auto}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-out{margin:0;font-size:1.5rem;line-height:1.3;text-wrap:balance}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-what{margin:8px 0 0;font-size:1rem;line-height:1.45}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-go{margin:auto 0 0;align-self:flex-start}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-what + .t-go,html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-go{margin-top:24px}
@media (max-width:1100px){
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 8px;scroll-padding-inline:24px;scrollbar-width:thin}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n){flex:0 0 min(78%,420px);scroll-snap-align:start}
}
@media (max-width:600px){
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows{margin:0 -20px;padding:0 20px 8px;scroll-padding-inline:20px}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n){flex-basis:84%}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-out{font-size:1.3125rem}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-logo{height:26px;margin:20px 0 10px}
html.c-484a.c-484a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li:nth-child(n) .t-go{width:auto;padding:14px 24px;font-size:1.0625rem}
}
/* 484b: keeps 483's tabs. One wide screenshot, then the title and description on the left with the button on the right */
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-row{display:flex;flex-direction:column;align-items:stretch;gap:0}
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-img{order:0;width:100%;aspect-ratio:auto;height:clamp(240px,42vw,560px);border-radius:10px;overflow:hidden;margin:0;grid-column:auto;grid-row:auto}
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-txt{order:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center;margin:28px 0 0;padding:0}
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-out{grid-column:1;grid-row:1;margin:0}
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-what{grid-column:1;grid-row:2;margin:6px 0 0}
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-go{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;margin:0}
@media (max-width:820px){
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-txt{display:flex;flex-direction:column;align-items:stretch;margin-top:20px}
html.c-483.c-484b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #work-teaser .t-rows > li.on .t-go{margin-top:20px;justify-self:auto}
}

/* Oct 25 round 21 (Andreas points 2 and 6): 485a/b rubric test lead and door row, 486a/b analytics in the Sherwood case. sw-o/sw-n swaps */
html.c-485a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="485a"]{display:none} html.c-485a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="485a"]{display:inline}
html.c-485b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="485b"]{display:none} html.c-485b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="485b"]{display:inline}
html.c-486a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="486a"]{display:none} html.c-486a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="486a"]{display:inline}
html.c-486b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="486b"]{display:none} html.c-486b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="486b"]{display:inline}

/* Oct 25 round 22: 487 AI page FAQ, where experts come from, the marketplace question, claims merged */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq487{display:none}
html.c-487:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq487{display:block} html.c-487:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq487-out{display:none}
html.c-487:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="487"]{display:none} html.c-487:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="487"]{display:inline}

/* Oct 25 round 23: 488 liability through the Grading example (AI page) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #ai li.q488,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq488{display:none}
html.c-488:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #ai li.q488{display:flex} html.c-488:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq488{display:block}
html.c-488:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="488"]{display:none} html.c-488:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="488"]{display:inline}


/* Oct 25 round 24: 489a/b/c, explain what the site is and what a desire path is sooner (a friend's read: the page is long and the name is explained late) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-what,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp{display:none}
/* a: the desire paths band right under the hero (and the phone AI strip), everything else keeps its order */
html.c-489a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:1}
html.c-489a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name > .wrap.sec{padding-top:clamp(64px,8vw,104px)}
/* b: one line about the name in the hero, linking to the band, which stays where it is */
html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp{--trail:hsl(37 62% 39%);order:5;display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;max-width:62ch;margin-top:28px;font-size:1rem;line-height:1.55;color:color-mix(in srgb,var(--fg) 82%,transparent)}
html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp .dp-foot{width:26px;height:30px;fill:var(--trail)}
html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp a:hover{color:var(--fg);text-decoration-thickness:2px}
html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp a:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
/* c: the muted services line becomes a plain sentence about who and what, shown on phones too. Order unchanged */
html.c-489c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-kind{display:none}
html.c-489c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-what{order:5;display:block;max-width:40ch;margin-top:28px;font-size:1.25rem;line-height:1.45;color:var(--fg);text-wrap:balance}
@media (max-width:600px){
  html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp{margin-top:28px;grid-template-columns:22px minmax(0,1fr);gap:12px}
  html.c-489b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-dp .dp-foot{width:22px;height:26px}
  html.c-489c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-what{font-size:1.125rem;margin-top:28px}
}

/* Oct 26 (Karl): in-between windows, 901px to 1100px. Why run a panel study stacks its heading above the cards, as on tablets, so the heading no longer sits in a narrow column beside squeezed cards. The home AI teaser keeps its wide two-column layout down to 901px */
@media (min-width:901px) and (max-width:1100px){
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > h2,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > .body{grid-column:1 / -1;grid-row:auto}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #why > .body{margin-top:0}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{grid-column:8 / -1;grid-row:2;align-self:start;margin:0;max-width:none}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat .br-wide{display:none}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-lede{grid-column:1 / 8}
  html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai-go{grid-row:3;grid-column:1 / -1}
}


/* Oct 26 round 25: 490a/b, 491, 492a/b from Rally's Diagnostic v2 (handoff ideas A, B, C) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq490{display:none}
html.c-490a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq490,html.c-490b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq490{display:block}
html.c-490b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="490b"]{display:none} html.c-490b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="490b"]{display:inline}
html.c-491:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="491"]{display:inline}
html.c-492a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door-list em.em492{text-align:right}
html.c-492a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="492a"]{display:block;margin-top:2px;font-size:.875rem;line-height:1.3;color:var(--fg-2)}
html.c-492b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="492b"]{display:inline}

/* Oct 26 round 25, Karl's note on 490b: 490c keeps the two door lead lines the same length */
html.c-490c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq490{display:block}
html.c-490c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="490c"]{display:none} html.c-490c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="490c"]{display:inline}

/* Oct 26 (Karl, no card): When to reach out method labels sit at the bottom-left of every card, so a two-line subtitle no longer pushes one label lower than its neighbors */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .cases > li{display:flex;flex-direction:column}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .cases > li > .fit-q{flex:1 0 auto;grid-template-rows:auto auto auto 1fr}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .cases > li > .fit-q > .fit-meth{align-self:end}

/* Oct 26 round 26: 493a/b, Why run a panel study cards in plain terms (AI page) */
html.c-493a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="493a"],html.c-493b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="493b"]{display:none}
html.c-493a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="493a"],html.c-493b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="493b"]{display:inline}

/* Oct 26 round 27: 494 (Karl), How a panel study works in the 2x2 layout (601 to 900px): the dots run from 2 off the right edge of the panel and come back in from the left edge to 3, like a line of text. The number circles sit above the dots */
@media (min-width:601px) and (max-width:900px){
 html.c-494:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps .pg-steps li::before{position:relative;z-index:1}
 html.c-494:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps .pg-steps li:nth-child(2)::after{display:block;left:48px;right:-28px}
 html.c-494:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #steps .pg-steps li:nth-child(3)::after{left:-28px}
}

/* Oct 26 round 28: positioning after the Andreas call (495 to 498) */
html.c-495a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="495a"],html.c-495b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="495b"],html.c-496b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="496b"]{display:none}
html.c-495a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="495a"],html.c-495b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="495b"],html.c-496b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="496b"]{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .pg-hero .pg-when{display:none}
html.c-496a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .pg-hero .pg-when,html.c-496b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .pg-hero .pg-when{display:block;margin:12px 0 0;max-width:44em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq496,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq498{display:none}
html.c-496a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq496,html.c-496b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq496,html.c-498:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq498{display:block}
html.c-496a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq496-out,html.c-496b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq496-out{display:none}
html.c-497:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg li:nth-child(1){order:4}
html.c-497:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg li:nth-child(2){order:2}
html.c-497:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg li:nth-child(3){order:1}
html.c-497:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg li:nth-child(4){order:3}

/* Oct 26 round 29: hero A (499), problem first (500a/b), labs FAQ (501) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero h1 .h1a499{display:none}
html.c-499:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero h1 .h1a499{display:block}
html.c-499:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero h1 .h1a{display:none}
html.c-500a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="500a"],html.c-500b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="500b"]{display:none}
html.c-500a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="500a"],html.c-500b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="500b"]{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq501{display:none}
html.c-501:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq501{display:block}

/* Oct 27 round 30: 502a/b, shorter AI page FAQ */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502{display:none}
html.c-502a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502,html.c-502b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502{display:block}
html.c-502a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.x502,html.c-502b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.x502,html.c-502b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.x502b,html.c-502b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502a{display:none}

/* Oct 27 round 31: 503 sweep, 504a/b, 505, 506 */
html.c-503:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="503"],html.c-504a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="504a"],html.c-504b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="504b"],html.c-506:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="506"]{display:none}
html.c-503:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="503"],html.c-504a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="504a"],html.c-504b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="504b"],html.c-506:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="506"]{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #readout .ro505{display:none}
html.c-505:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #readout .ro505{display:inline}
html.c-495a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .pg-hero .pg-for317a{max-width:760px}

/* Oct 27 round 32: 507a/b one front door on home, 508a/b/c/d AI page hero */
html.c-507a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="507a"],html.c-507b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="507b"],html.c-508a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="508a"],html.c-508b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="508b"],html.c-508c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="508c"],html.c-508d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="508d"]{display:none}
html.c-507a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="507a"],html.c-507b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="507b"],html.c-508a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="508a"],html.c-508b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="508b"],html.c-508c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="508c"],html.c-508d:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="508d"]{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .doors507{display:none}
html.c-507a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .d507a,html.c-507b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .d507b{display:grid;grid-template-columns:minmax(0,1fr)}
html.c-507a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .doors:not(.doors507),html.c-507b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .doors:not(.doors507){display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door507 .door-for{margin-top:0;max-width:44em}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door507 .go507{display:flex;flex-wrap:wrap;gap:12px 16px}
@media (min-width:1101px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door507 .door-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #services .door507 .door-list li{align-content:start}

/* Oct 27 round 33: 509 heading only, both doors kept */
html.c-509:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-o[data-sw~="509"]{display:none}
html.c-509:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="509"]{display:inline}

/* Oct 27 round 34: 510a/b/c accountability sink section on the AI page (from the talk project's handoff) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink{display:none;order:4}
html.c-510a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink,html.c-510b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink,html.c-510c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink{display:grid}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .h510{display:none}
html.c-510a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .h510a{display:inline}
html.c-510b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .h510b{display:inline}
html.c-510c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .h510c{display:inline}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .body p{max-width:62ch}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .body p + p{margin-top:16px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-go{margin-top:32px}
html.c-510a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq501,html.c-510b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq501,html.c-510c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq501,html.c-510a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502a,html.c-510b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502a,html.c-510c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #faq li.faq502a{display:none}
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink > .body{grid-row:1}}
@media (min-width:901px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink > .body{padding-top:36px}}

/* Oct 27 round 35: 511a/b accountability sink layout (requires 510b) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .s511{display:none}
html.c-511a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .s511a,html.c-511b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .s511b{display:block}
html.c-511a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-old,html.c-511b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-old{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-lede{margin:0;max-width:34ch;font-size:1.375rem;line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts{list-style:none;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:20px;counter-reset:sk}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li{counter-increment:sk;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;max-width:58ch;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li::before{content:counter(sk);grid-row:1 / span 2;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:#e0ac2b;color:#1a0609;font-size:.875rem;font-weight:700;line-height:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li b{display:block;font-size:1.125rem;line-height:1.35;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li span{grid-column:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-q{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-q blockquote{margin:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-q blockquote p{margin:0;max-width:40ch;font-size:1.25rem;line-height:1.45;font-style:italic;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-q figcaption{margin-top:12px;max-width:58ch;font-size:1rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .s511b .sink-pts{margin-top:28px}

/* Oct 27 round 36: 512 and 513a/b, terminal periods */
html.c-512:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .tp512,html.c-513a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .tp513,html.c-513b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .tp513,html.c-513b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .tp513b{display:none}
html.c-513a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit span.tp513,html.c-513b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit span.tp513,html.c-513b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit span.tp513b{display:none!important}

/* Oct 27 latest+76: 514, ownership line in the rubric test You get list (from the Mercor review) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .yk514{display:none}
html.c-514:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .yk514{display:list-item}

/* Oct 27 round 38: 515a/b (group evals-check), a second way into the rubric test for teams that already run AI evals. Bake: keep the picked sw-n text, delete the rest, drop ev515 and w515 classes, delete this block */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .ev515,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #why .w515-n{display:none}
html.c-515a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .ev515,html.c-515b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .ev515{display:list-item}
html.c-515a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #why .w515-o,html.c-515b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #why .w515-o{display:none}
html.c-515a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #why .w515-n,html.c-515b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #why .w515-n{display:inline-flex}
html.c-515a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="515a"],html.c-515b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .sw-n[data-sw~="515b"]{display:inline}


/* 516 to 520 (Oct 27 round 39): the AI page, shorter. 516a moves the method points into the sink section, 516b folds them, 517 trims the rubric test, 518 puts the demo under the hero, 519 adds a Comparison tab to the demo, 520 adds expand and collapse */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sk516,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sk516-src,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-how,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try519,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .h519n{display:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .g519{display:contents}
html.c-516a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .s511b > .sink-pts:not(.sk516),html.c-516a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #readout .ro434{display:none}
html.c-516a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .s511b > .sk516{display:grid}
html.c-516a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sk516-src{display:block;margin:20px 0 0 36px;max-width:52ch;font-size:1rem;line-height:1.5;color:var(--fg-2)}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .rub3-lead:not(.r517-lead),html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .rub3-how:not(.r517-how),html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .rub3-lead:not(.r517-lead),html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .rub3-how:not(.r517-how){display:none}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517,html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517{display:block}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517 .r517-lead,html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517 .r517-lead{margin:0;max-width:16em}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-def,html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-def{margin:16px 0 0;max-width:34em;font-size:1.125rem;line-height:1.55;color:var(--fg-2)}
html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-keep{display:none}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-keep{margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-keep h3{margin:0 0 10px;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;color:var(--fg)}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-keep ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-keep li{position:relative;padding-left:18px;font-size:1.125rem;line-height:1.5;color:var(--fg-2)}
html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-keep li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:#e0ac2b}
html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-how{display:grid}
@media (min-width:901px){html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517,html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517{grid-column:1 / 7;grid-row:2;align-self:start}html.c-517b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-how{grid-column:1 / -1;grid-row:4;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px var(--gutter);margin-top:40px}}
html.c-518:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg > #ai{order:0}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .h519o{display:none}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .h519n{display:inline}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try519{display:flex;gap:4px;padding:4px;border-radius:10px;background:#3a2324}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try519 button{flex:1;min-height:44px;padding:8px 12px;border:0;border-radius:7px;background:transparent;color:#c4bcb7;font:600 1rem/1.3 var(--sans);cursor:pointer;transition:background-color .15s,color .15s}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try519 button:hover{color:#ecede4}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try519 button[aria-selected="true"]{background:#ecede4;color:#1a0609}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try519 button:focus-visible,html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-vote button:focus-visible,html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-again:focus-visible{outline:2px solid #e0ac2b;outline-offset:2px}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-case[data-tab="cmp"] .g519{display:none}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .ai2-case[data-tab="cmp"] .cmp519{display:flex;flex-direction:column;gap:16px}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-r{max-width:none;margin:0;background:#3a2324;color:#ecede4;--fg:#ecede4;--fg-2:#c4bcb7;box-shadow:inset 0 0 0 1px #5c4747}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-vote{padding-top:16px;border-top:1px solid #5c4747}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-vote .vote-ask{margin:0;font-size:1rem;line-height:1.5;color:var(--fg-2)}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-vote .vote-q{margin:6px 0 12px;font-size:1.25rem;line-height:1.3;font-weight:700;color:var(--fg)}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-marks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-marks li{display:grid;justify-items:center;gap:6px;text-align:center}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-marks .lab{font-size:.875rem;line-height:1.35;color:var(--fg-2)}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-pick{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ecede4;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:#ecede4}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-res{display:none}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519[data-picked] .c519-vote .vote-btns,html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519[data-picked] .c519-vote .vote-ask{display:none}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519[data-picked] .c519-res{display:flex;flex-direction:column;gap:10px}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519[data-picked] .c519-vote .vote-q{margin-bottom:0;font-size:1rem;font-weight:600;color:var(--fg-2)}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-reveal{margin:0;font-size:1.125rem;line-height:1.4;color:#ecede4}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-reveal b{display:inline;padding:2px 6px;background:#e0ac2b;color:#1a0609;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-txt{margin:0;font-size:1rem;line-height:1.5;color:#ecede4}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-res .vote-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:4px 0 0}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-again{min-height:44px;padding:0;border:0;background:none;color:#c4bcb7;font:500 1rem/1.4 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;cursor:pointer}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-again:hover{color:#ecede4}
@media (max-width:600px){html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-pair{grid-template-columns:minmax(0,1fr)}html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-pick{width:36px;height:36px}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-btn .xc-ico{flex:none;width:18px;height:18px;transition:transform .2s ease}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-btn[aria-expanded="true"] .xc-v{opacity:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-btn:hover .xc-l{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-btn:focus-visible{outline:2px solid #e0ac2b;outline-offset:4px;border-radius:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-shut{display:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li > b > .xc-btn{min-height:28px;align-items:flex-start}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li > b > .xc-btn .xc-ico{margin-top:4px}
@media (prefers-reduced-motion:reduce){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .xc-btn .xc-ico{transition:none}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-you{display:none}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519[data-picked] .c519-marks{grid-template-columns:repeat(5,minmax(0,1fr))}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .cmp519[data-picked] .c519-you{display:grid}
html.c-519:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-you .c519-pick{background:#e0ac2b;color:#1a0609;box-shadow:none}
@media (max-width:900px){html.c-517a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517{margin-bottom:28px}}

/* 528 (Oct 27 round 41): When to reach out runs four cards per phase on desktop */
@media (min-width:1101px){html.c-528:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases-split > .phase > .cases{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Oct 27 round 42 (cards 527c, 530 to 544): pre-launch review notes */
.n530a,.n530b,.n534a,.n534b,.n534c,.n527c,.n538a,.n538b,.n540a,.n540b,.n540c,.hero-biz{display:none}
html.c-530a .o530,html.c-530b .o530,html.c-534a .o534,html.c-534b .o534,html.c-534c .o534,html.c-527c .o527c,html.c-538a .o538,html.c-538b .o538,html.c-540a .o540,html.c-540b .o540,html.c-540c .o540{display:none}
html.c-530a .n530a,html.c-530b .n530b,html.c-534a .n534a,html.c-534b .n534b,html.c-534c .n534c,html.c-527c .n527c,html.c-538a .n538a,html.c-538b .n538b,html.c-540a .n540a,html.c-540b .n540b,html.c-540c .n540c{display:inline}
/* 533: "early-stage" in Erin's quote keeps the quote's size and style */
html.c-533:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .cq .cq-q .nw{font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}
/* 536: Let's connect keeps the button and "30 minutes, free". a: home only. b: every page */
html.c-536a main #contact .call-list li:not(:first-child),html.c-536b #contact .call-list li:not(:first-child){display:none}
/* 537: a shorter Let's connect and footer. Links in one row, email at link size, less space */
html.c-537a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .body .big,html.c-537b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .body .big{font-size:1.125rem;margin:0 0 8px}
html.c-537a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .social,html.c-537b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .social{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 24px;margin:0}
html.c-537a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .social a,html.c-537b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .social a{display:inline-flex;align-items:center;min-height:44px;margin:0}
html.c-537b #contact .social a[href^="https://karlneu"]{display:none!important}
html.c-537a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot,html.c-537b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot{padding-top:16px;padding-bottom:16px}
/* 542: the line under the headline, above the buttons. Hides the small line under the buttons */
html.c-542a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-biz.n542a,html.c-542b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-biz.n542b,html.c-542c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-biz.n542c{display:block;margin:20px 0 32px;max-width:46ch;font-size:1.25rem;line-height:1.45;font-weight:400;letter-spacing:0;color:var(--fg);text-wrap:pretty}
html.c-542a .hero .hero-kind,html.c-542b .hero .hero-kind,html.c-542c .hero .hero-kind{display:none!important}
@media (max-width:600px){html.c-542a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-biz.n542a,html.c-542b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-biz.n542b,html.c-542c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .hero-biz.n542c{font-size:1.125rem;margin:16px 0 28px}}
/* 536: the remaining "30 minutes, free" reads as a caption, no bullet */
html.c-536a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list,html.c-536b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .call-list{list-style:none;padding-left:0}
html.c-536a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list li,html.c-536b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .call-list li{padding-left:0}
html.c-536a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list li::before,html.c-536b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .call-list li::before{display:none}
/* 543 (phones): When to reach out cards scroll sideways in each phase, like Selected work */
@media (max-width:600px){
html.c-543:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .phase ul.cases{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;padding-bottom:8px;scrollbar-width:none}
html.c-543 #good-time .phase ul.cases::-webkit-scrollbar{display:none}
html.c-543:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .phase ul.cases > li{flex:0 0 78%;scroll-snap-align:start;margin:0}
}
/* 544 (phones): no drawings in the service rows, and the About credentials in two columns */
@media (max-width:600px){
html.c-544:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #services .door-list li > svg.dico{display:none}
html.c-544:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #about ul.proof{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
html.c-544:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #about ul.proof > li{border:0;padding:0;margin:0}
}

/* Oct 27 latest+82: obvious fixes from the expert review (no cards) */
/* HealthBench line cut, so the Szymanski stat takes the full width */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid{display:block}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #why .why-evid .why-stat{max-width:40ch}
/* AI experience: the Kooth row's swap span picked up the subtitle style (muted green, 16px) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #background li b span{color:inherit;font:inherit;letter-spacing:inherit;display:inline;margin:0}
/* Compare demo: five equal columns before and after the vote, so You never wraps to a second row */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-marks{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-marks .lab{font-size:.8125rem;hyphens:auto}}
/* Home AI band on phones and tablets: about 120px of empty space between the citation and See AI evaluation (stat margin, two grid gaps around the hidden demo row, and the button margin) */
@media (max-width:1100px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-stat{margin-bottom:0}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai-go{margin-top:8px}}

/* Oct 27 round 43 (cards 545 to 555): expert review options */
/* 545: the new headlines carry their own .hl, so the trail and phone sizes follow the hero rules. The subhead runs longer in a, so it wraps under the headline on desktop */
@media (max-width:740px){html.c-546:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero p.hero-kind[data-c="522c"][data-v="old"]:not([hidden]){display:block!important;margin:16px 0 0;font-size:1.0625rem;line-height:1.45;color:var(--fg-2)}}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #top .pg-offer548{margin:20px 0 0;font-size:1rem;line-height:1.45;color:var(--fg-2);max-width:60ch}
@media (max-width:600px){html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .rub3{display:flex;flex-direction:column}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .rub3 > *{order:10}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .rub3 .r517{display:contents}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .r517-lead{order:1}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .rub3-offer{order:2;margin-top:8px;margin-bottom:24px}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .r517-def{order:3}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .r517-keep{order:4}html.c-549:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #rubric .rub3-ref{order:20}}
html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .body .big{display:none}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .actions .btn{width:auto;flex:0 0 auto}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list{margin:0;padding:0}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list li{margin:0;padding:0;color:var(--fg-2)}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .body{margin-top:24px}
@media (max-width:600px){html.c-555:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .phase ul.cases{display:flex;flex-wrap:nowrap;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;padding-bottom:8px;scrollbar-width:none}html.c-555:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .phase ul.cases::-webkit-scrollbar{display:none}html.c-555:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #good-time .phase ul.cases > li{flex:0 0 78%;scroll-snap-align:start;margin:0;align-self:flex-start}}
html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list{width:auto;flex:1 1 96px;max-width:none}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .actions{flex-direction:row}
html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list li{white-space:nowrap}@media (min-width:741px){html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .body{margin-top:0;align-self:center;grid-row:2}html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .actions{grid-row:2;align-self:center}}@media (max-width:600px){html.c-554:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #contact .actions .btn{padding-left:24px;padding-right:24px;min-width:0;width:auto}}
/* Compare demo replies: no 1px outline, so they read as chat bubbles like the patient message (the outline made the detector see cards inside a card) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .c519-r{box-shadow:none}

/* Oct 27 round 44 (556a/b/c): 556a's highlight wraps on phones */
@media (max-width:600px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero h1 .hl{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero h1 .hl .trail{display:none}}

/* Oct 27 latest+86: with the band subheads gone (557), each label sits centered on its footprint */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex li{align-items:center;align-content:normal}html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-foot{grid-row:auto;margin-top:0}
/* Oct 27 round 46 (562): bigger band labels. Phones set 22px because the 479 script steps it down to 20px */
html.c-562:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex b{font-size:1.5rem;line-height:1.25}@media (max-width:600px){html.c-562:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #name .dp-ex b{font-size:1.375rem}}

/* Oct 27 round 47 (564): the services line moves into the subhead, so the line under the buttons hides */
html.c-564:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero p.hero-kind[data-c][data-v]:not([hidden]){display:none!important}

/* Oct 27 (Karl, no card): the desktop hero's soft light streak on tablets too (601 to 900px), where 305a's plain green had removed it. Phones keep their own steeper streak (≤600px) */
@media (min-width:601px) and (max-width:900px){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .open:not(.work-open){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 650' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='38'/%3E%3C/filter%3E%3Cpath d='M -110 760 C 230 640, 540 400, 900 -90' fill='none' stroke='%23ecede4' stroke-opacity='.06' stroke-width='150' stroke-linecap='round' filter='url(%23b)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}}

/* Oct 27 (Karl): Let's connect matches the home page on the work and AI pages too (536a and 554 were scoped to main.pg-home) */

/* Oct 27 (Karl, 565, switched to four lines the same evening): on phones the home headline sets its own four lines (Pressure-test your / app, website, or AI / against real people / & expert judgment), so every browser breaks it the same way and "people &" never sits alone. The size drops from 10.6vw to 9.85vw so "& expert judgment" fits with about 5% to spare from 320 to 600px. :has keeps the size change off the work and AI page heroes. Tablet and desktop keep the break after "real" */
.hero h1 .p565{display:none}
@media (max-width:600px){html:root .hero h1 .h1a:has(.p565){font-size:min(9.85vw,2.75rem)}.hero h1 .p565{display:inline}.hero h1 .d565{display:none}}

/* ---- round 48 (Oct 27, 2026): fixes from the synthetic visitor study ---- */
/* 569 phones: the Before label stays in view when the slider rests near the left edge (it was pushed off the frame at 12%) */
html.c-569:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.b-off > span:first-child{left:0!important;opacity:1!important;visibility:visible!important}
html.c-569:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.b-off::after{display:none!important}
/* 569 hotfix (Oct 27, Karl): with Before pinned at the left edge, After sat on top of it when the divider was near the left. After now starts past the pinned Before (--bw is its width, set by the slider script) */
html.c-569:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.b-off > span:last-child{left:max(var(--ax,0px),calc(var(--bw,4.5em) + 16px))!important}
/* 570 the Shipping AI? strip shows at every width (456 had it on phones only) */
@media (min-width:741px){html.c-570:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > .ai-teaser:not([hidden]){display:block!important}}
/* 571 work page: Results show without a tap; the numbered notes stay behind Show what changed and why */
html.c-571:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) > .txt > dl:not([hidden]),html.c-571:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-work #clients .specs > article:not(.x427) > dl:not([hidden]){display:block!important}
/* 573 AI page: data handling FAQ and a link to About Karl */
html.c-573:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #background .bg573{margin:24px 0 0;font-size:1.0625rem}
html.c-573:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #background .bg573 a{color:inherit;font-weight:600;text-decoration:underline 2px var(--highlight,#e8b43c);text-underline-offset:.28em;display:inline-block;padding:10px 0;margin:-10px 0}
html.c-573:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root #background .bg573 a:hover{text-decoration-color:currentColor}
/* 574 phones: See the work under Book an intro call in the hero */
@media (max-width:600px){html.c-574:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .hero .actions a:not(.btn){display:flex!important;align-items:center;justify-content:center;min-height:50px;margin-top:12px;width:100%;box-sizing:border-box}}

/* Oct 27 hotfix (Karl, screen recording): on iPhone a tapped When to reach out card flashed a gray box, and the hover outline and underline stayed on after closing. Hover styles above now need a real pointer. On touch screens the open card keeps the dark outline */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .fit-q{-webkit-tap-highlight-color:transparent}
@media (hover:none){html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #good-time .cases > li.is-open{box-shadow:inset 0 0 0 1px var(--fg)}}
/* Oct 28 (Karl): Sanza, his first client, joins the clients & partners row as the 9th logo. The row runs 43s, up from 38s, so the speed stays the same with one more logo. Phone height matches the other logos at about .85 of desktop */
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .logo-row > li:nth-child(9) img{zoom:normal;height:31px;width:auto}
}
/* Oct 28 round 50 (581): the discovery line under the home AI stat (accountability guard 1). Sarah Porter's call: MATTER founders may read only the home section */
html:root main .ai2 .ai2-g581{margin:16px 0 0;max-width:62ch;font-size:1rem;line-height:1.5;color:var(--fg-2)}
/* Oct 28 round 50 (584): the committee row goes last in the AI experience grid, after the 497 order (1 to 4) */
html:root main.pg #background .pg-bg li[data-c="584"]{order:5}

/* Oct 28 fix (Karl's iPhone screenshot): with the slider at an end, the empty side's label hides, so "Before After" no longer sits side by side over an image that is all After. When one side is narrow, its label pins to that edge and the other label stays clear of it */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.b-none > span:first-child,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.a-none > span:last-child{opacity:0!important;visibility:hidden!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.b-none > span:last-child{left:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.b-off:not(.b-none) > span:last-child{left:auto!important;right:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.a-off:not(.a-none) > span:last-child{left:auto!important;right:0!important;opacity:1!important;visibility:visible!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl.a-off:not(.a-none) > span:first-child{left:0!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-lbl:is(.a-off,.b-none,.a-none)::after{display:none!important}

/* Oct 28 round 51 (Aaron's notes), new elements hidden unless their change is on */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591s,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591{display:none}

/* 590a/590b: Let's connect and the footer become one block. The links move into a single footer line (wordmark, links, copyright), the footer's top rule and corner mark go, and the band's bottom padding shrinks. 590a drops Desire Path on LinkedIn */
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .body,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .body{display:none!important}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .wrap,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .wrap{padding-bottom:40px}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot{padding-top:0;padding-bottom:8px}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap::before,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap::before{display:none}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark{display:none}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-top:24px;padding-bottom:24px;border-top:1px solid var(--line)}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 auto 0 0}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;color:var(--fg);text-decoration:underline 1px;text-underline-offset:.22em;transition:text-decoration-thickness .15s}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a:hover,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a:hover{text-decoration-thickness:2px}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a:focus-visible,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 .fl590-co{display:none}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .sig,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .sig{margin:0;font-size:.9375rem;color:var(--fg-2);justify-self:auto}
@media (max-width:600px){
 html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap{gap:4px 16px}
 html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590{order:-1;flex-basis:100%;gap:0 20px}
}
@media (prefers-reduced-motion:reduce){ html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a{transition:none} }

/* Oct 28 (Karl): the corner desire path mark comes back at the far right of the one-line footer, after the copyright, and the copyright drops to 14px so it reads as a quiet legal line */
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark{display:block;flex:none;width:28px;height:22px;margin:0}
html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .sig,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .sig{margin-left:auto;font-size:.875rem}
@media (max-width:759px){
 /* below 760px the single line no longer fits (it needs about 740px), so the footer becomes two aligned rows: the links with the mark at the right end, then the wordmark and the copyright */
 html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .wrap{gap:4px 16px}
 html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark{order:-1}
 html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590{order:-2;flex:1 1 calc(100% - 44px);margin:0}
}
@media (max-width:600px){ html.c-590a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark,html.c-590b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .foot-mark{width:24px;height:19px} }

/* 591a: Getting started leaves the home page. One sentence under the button says what happens after the call, on every page */
html.c-591a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain,html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #plain{display:none!important}
html.c-591a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591s{display:block;grid-column:1 / -1;margin:-12px 0 0;max-width:75ch;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
/* 591b: the three steps move under the button as a compact row, on every page, and the "30 minutes, free" note folds into step 1 */
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .call-list{display:none!important}
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591{display:grid;grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px;margin:28px 0 0;padding:0;list-style:none;font-size:1rem;line-height:1.5;color:var(--fg-2)}
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591 li{margin:0;padding:14px 0 0;border-top:1px solid var(--line)}
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591 b{display:inline;font-size:1.125rem;font-weight:700;color:var(--fg)}
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591 .pn{display:inline-block;min-width:1.25em;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg)}
@media (max-width:800px){ html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591{grid-template-columns:minmax(0,1fr);gap:12px} }

/* 592a: Before Desire Path reads as a list. One item per row, the headline on the left and the detail beside it, a rule between rows. Phones stack the headline over the detail */
html.c-592a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof,html.c-592b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof{display:block!important;grid-column:1 / -1}
html.c-592a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li,html.c-592b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li{border-top:1px solid #d7dacd!important;padding-top:16px!important;padding-bottom:16px!important}
html.c-592a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li:first-child,html.c-592b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li:first-child{border-top:0!important}
@media (min-width:601px){
 html.c-592a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:24px;align-items:baseline}
 html.c-592a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li > b{margin:0;font-size:1.25rem;line-height:1.3}
}
/* 592b: the same list, stacked: the headline over its detail at every width */
html.c-592b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li > b{margin:0 0 4px}

/* 593: with After on the left, the numbered notes clip to the left of the divider */
html.c-593:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cmp-frame:not(.portrait) .an-layer{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591 b::after{content:"\A";white-space:pre}
html.c-591b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .st591{margin-top:0}

/* 594a (Oct 28): About stays on the home page, and the desire paths band moves below Selected work, so proof follows the doors */
html.c-594a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #work-teaser{order:4}
html.c-594a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #name{order:5}
/* 594b: About gets its own page (about.html, built by tools/make_about.py). The home page drops the band and About Karl */
html.c-594b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > :is(#name,#about){display:none!important}
/* the About page: page hero, About Karl, the desire paths band, Let's connect */
main.pg-about{display:flex;flex-direction:column}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #about{order:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #name{order:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #contact{order:3}

/* 582b: the investors-only lines (582) step aside when 582b is on */
html.c-582b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root [data-c="582"][data-v="old"]{display:none!important}
/* 596a: the BMJ row goes last. 596b: the merged UK company row takes the first place */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg li.r596a{order:6}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #background .pg-bg li.r596b{order:1}

/* 594c (Oct 28): About gets its own page, and the home page keeps a short "Who you'll work with" teaser (photo, one line, a link) where About Karl was */
html.c-594c:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > :is(#name,#about){display:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #about-teaser{order:8}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser{--bg:#ecede4;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594{grid-column:1 / -1;display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center;max-width:860px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594 img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:12px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-lead{margin:0;max-width:40ch;font-size:1.5rem;line-height:1.35;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-by{margin:12px 0 0;font-size:1rem;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:1.0625rem;font-weight:600;color:var(--fg);text-decoration:underline 1px;text-underline-offset:.22em;transition:text-decoration-thickness .15s}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-more:hover{text-decoration-thickness:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-more:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
@media (max-width:600px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594{grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-lead{font-size:1.125rem}
}
@media (prefers-reduced-motion:reduce){ html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-more{transition:none} }
/* 594c: the teaser belongs to the home page only (work.html is built from site.html and keeps a hidden copy) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main:not(.pg-home) #about-teaser{display:none!important}

/* Oct 28 round 54: About page sections. 598 How I work, 599 Talks & writing. Shown on the About page only */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main:not(.pg-about) :is(#how-i-work,#talks){display:none!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #about{order:1}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #how-i-work{order:2}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #talks{order:3}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #name{order:4}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #contact{order:5}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main :is(#how-i-work,#talks){--bg:#ecede4;--fg:#1a0609;--fg-2:#4d5848;--line:#c7d5c7;color-scheme:light;background:#ecede4;color:#1a0609;box-shadow:0 0 0 100vmax #ecede4;clip-path:inset(0 -100vmax);position:relative}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597{margin:0;padding:0;list-style:none;max-width:860px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 > li{padding:18px 0;border-top:1px solid #d7dacd;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 > li:first-child{border-top:none;padding-top:0}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 b{display:block;margin:0 0 4px;font-size:1.25rem;line-height:1.3;font-weight:700;color:var(--fg)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 b a{color:inherit;text-decoration:underline 1px;text-underline-offset:.2em;transition:text-decoration-thickness .15s}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 b a:hover{text-decoration-thickness:2px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 b a:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
@media (min-width:801px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 > li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:32px;align-items:baseline}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 b{margin:0}
}
@media (prefers-reduced-motion:reduce){ html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main .rows597 ul.r597 b a{transition:none} }
/* 600: one personal line under the About lead */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about .pl600:not([hidden]){display:block;margin:16px 0 0;max-width:60ch;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main :is(#how-i-work,#talks) > .body{grid-column:1 / -1;margin:0}
/* 599: on the About page, Talks & writing replaces the Publications & talks row in Before Desire Path (no repeat) */
html.c-599:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about #about ul.proof > li.pub553{display:none!important}
html.c-599:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about #about ul.proof > li:nth-child(3){border-bottom:0!important}

/* Oct 28 (Karl's note on 599): Talks & writing takes the Before Desire Path card look, a light box with rows, headline left from 601px */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597{background:#f6f7f1;box-shadow:0 0 0 1px #d7dacd inset;border-radius:12px;padding:6px 24px;max-width:860px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597 > li{padding:18px 0 20px;font-size:1.0625rem}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597 > li:first-child{padding-top:18px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597 b{font-size:1.25rem;line-height:1.3}
@media (min-width:601px){
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597 > li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:24px;align-items:baseline}
 html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597 b{margin:0}
}
@media (max-width:600px){ html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597{padding:4px 18px} }
/* 601 (Karl's note on 597): on the About page the desire paths band comes first, then About Karl */
html.c-601:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #name{order:0}
/* a hidden row stays hidden under 592a (its display:grid!important beat the hidden attribute) */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about ul.proof > li[hidden]{display:none!important}
/* 602a (Karl's note): the app ratings row sits third, so the list ends on Scaled Seed to Series B. Rows: Fortune 500, 0 to >100k, app ratings, Seed to Series B */
/* Karl's comment on Talks & writing: the titles carry more text, so the left column gets 60% */
@media (min-width:601px){ html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #talks ul.r597 > li{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} }

/* ===== Oct 28 latest+104 (Karl, no card): review fixes ===== */
/* Double dividers: the faint full-width line the band script adds between two sections with the same ground is gone. Each section keeps its own heavy rule above the heading */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .dp-rule{display:none!important}
/* Home AI section, desktop: the lede's first line lines up with the stat's first line (the stat has a 2px rule and 24px above its text), and the button sits closer */
@media (min-width:1101px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai2-lede{padding-top:26px}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home #ai .ai-go-a{margin-top:8px}
}
/* Line length on tablets (601 to 1100px): long lines capped near 70 characters (34em; Instrument Sans averages about half an em a character) */
@media (min-width:601px) and (max-width:1100px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #readout .ro434 li,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #readout .decision p,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-pts li,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #sink .sink-lede,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .r517-def,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #rubric .rub3-ref,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .res li,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #how ol.cycle li p{max-width:34em}
}
/* Client quotes: about 60 characters a line at every width */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #clients .cq .cq-q{max-width:30em}
/* About page, desktop: Talks & writing spans the full width, so it no longer stops two thirds across */
@media (min-width:1101px){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about #talks ul.r597{max-width:none}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about #talks ul.r597 > li{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}
/* Logo row with reduced motion: the row stands still, so it starts clear of the 96px edge fade (HouseFacts, first in the row, sat in the fade and read dimmer) */
@media (prefers-reduced-motion:reduce){
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .marquee .logo-row:first-child{padding-left:96px}
}

/* ===== Oct 28 round 56: cards 603a/b, 604a/b, 605a/b ===== */
/* 603a: Try it yourself, a short intro under the heading in the empty left column */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try603{display:none}
html.c-603a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try603{display:block;margin:0 0 0;max-width:34ch}
html.c-603a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try603 b{display:block;margin:0 0 12px;font-size:1.5rem;line-height:1.3;font-weight:650;color:var(--fg)}
html.c-603a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #ai .try603 span{display:block;font-size:1.125rem;line-height:1.55;color:var(--fg-2)}
/* 603b: heading above, demo centered below it on desktop */
@media (min-width:1101px){
html.c-603b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai .pg-try-txt{display:none}
html.c-603b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai h2{grid-column:1 / -1;grid-row:1}
html.c-603b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg #ai figure.ai2-case{grid-column:3 / 11;grid-row:2}
}
/* 604a: a proof strip under the lead, so the section fills the row */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz604{display:none}
html.c-604a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594{max-width:none}
html.c-604a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz604{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:24px 0 4px;padding:16px 0 0;list-style:none;border-top:1px solid var(--line)}
html.c-604a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz604 li{margin:0;font-size:1rem;line-height:1.45;color:var(--fg-2)}
html.c-604a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz604 b{display:block;font-size:1.125rem;font-weight:650;color:var(--fg)}
@media (max-width:900px){
html.c-604a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz604{grid-template-columns:1fr;gap:12px}
}
/* 604b: bigger photo and lead on desktop, so the section spans the row */
@media (min-width:901px){
html.c-604b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594{max-width:none;grid-template-columns:280px minmax(0,1fr);gap:56px}
html.c-604b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-lead{max-width:30ch;font-size:2rem;line-height:1.3}
html.c-604b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #about-teaser .tz594-by{margin-top:16px;font-size:1.125rem}
}
/* 605b: email moves from the footer to Let's connect */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .em605{display:none}
html.c-605b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .em605{display:block;margin:0;align-self:center;font-size:1.0625rem;line-height:1.4;color:var(--fg-2)}
html.c-605b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .em605 a{color:var(--fg);font-weight:600;text-decoration:underline 1px;text-underline-offset:.22em}
html.c-605b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .em605 a:hover{text-decoration-thickness:2px}
html.c-605b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main #contact .em605 a:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
html.c-605a:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a[href^="mailto:"],html.c-605b:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root .foot .fl590 a[href^="mailto:"]{display:none}
/* Seams: two full-bleed bands meeting on a fractional pixel left a 1px light line (Selected work into AI evaluation on home). Each full-bleed band (the ones painted with a box-shadow) now paints 1px past its top and bottom. Bands without one keep their own clipping, so drawings that overflow them are untouched */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #services,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #good-time,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #work-teaser,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-home > #ai,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #about-teaser,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #faq,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #contact,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #clients,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main.pg-about > #about,html:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root main > #talks{clip-path:inset(-1px -100vmax)!important}