@charset "utf-8";
/* ===========================================================================
   apprenti.cc — printed trade stationery, not a SaaS template.
   Paper, ink, one tin of paint per trade. No gradients. No purple.
   =========================================================================== */

/* --- 1. tokens --------------------------------------------------------- */
:root{
  color-scheme: light;

  --paper:      #F2EEE4;
  --paper-2:    #E9E2D2;
  --card:       #FBF9F3;
  --ink:        #141110;
  --ink-2:      #4E4740;
  --ink-3:      #8A8274;
  --rule:       #D8D0BF;
  --rule-2:     #C4BAA4;

  /* the paint tins */
  --rust:     #C0452B;
  --ochre:    #C4890F;
  --clay:     #A55C3A;
  --green:    #24674F;
  --blue:     #2A5A98;
  --madder:   #AE3E63;
  --teal:     #1C6270;
  --navy:     #26406B;
  --barber:   #B33330;
  --mustard:  #A8790F;
  --bottle:   #2E6B3C;
  --olive:    #55661F;
  --gunmetal: #4B5359;
  --slate:    #3C6A87;
  --signal:   #EDBB4A;   /* the big ochre field — signage yellow */
  --ink-deep: #0E0C0B;

  --paint: var(--rust);
  --wash:  color-mix(in srgb, var(--paint) 11%, var(--paper));
  --wash-2:color-mix(in srgb, var(--paint) 22%, var(--paper));
  --lift:  color-mix(in srgb, var(--paint) 78%, white);

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

  --gut: clamp(20px, 4.2vw, 64px);
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.9,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

.paint-rust{--paint:var(--rust)}       .paint-ochre{--paint:var(--ochre)}
.paint-clay{--paint:var(--clay)}       .paint-green{--paint:var(--green)}
.paint-blue{--paint:var(--blue)}       .paint-madder{--paint:var(--madder)}
.paint-teal{--paint:var(--teal)}       .paint-navy{--paint:var(--navy)}
.paint-barber{--paint:var(--barber)}   .paint-mustard{--paint:var(--mustard)}
.paint-bottle{--paint:var(--bottle)}   .paint-olive{--paint:var(--olive)}
.paint-gunmetal{--paint:var(--gunmetal)} .paint-slate{--paint:var(--slate)}
[class*="paint-"],
.hero,.watch,.move,.ftr,.close,.plainly,
#how,#hours,#learns,#trades,#does,#questions,#pricing{
  --wash:  color-mix(in srgb, var(--paint) 11%, var(--paper));
  --wash-2:color-mix(in srgb, var(--paint) 22%, var(--paper));
  --lift:  color-mix(in srgb, var(--paint) 78%, white);
}

/* --- 2. reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:var(--paint); color:var(--paper)}
:focus-visible{outline:2px solid var(--paint); outline-offset:3px; border-radius:2px}

/* paper grain — the whole point of not looking like software */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- 3. type scale ----------------------------------------------------- */
.u-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  font-stretch:108%; color:var(--ink-3);
}
.u-num{font-size:11px; letter-spacing:.14em; color:var(--ink-3); font-weight:600}
.u-serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.005em}
.u-lede{font-size:clamp(18px,1.55vw,22px); line-height:1.5; color:var(--ink-2); text-wrap:pretty}

.h-sec{
  font-size:clamp(34px,5.4vw,68px); line-height:.98; letter-spacing:-.035em;
  font-weight:700; font-stretch:88%; text-wrap:balance;
}
.h-sec em{font-family:var(--serif); font-style:italic; font-weight:400; font-stretch:100%; letter-spacing:-.01em}

/* --- 4. shell ---------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.rule{border-top:1px solid var(--rule)}
section{position:relative}
.sec-pad{padding-block:clamp(72px,9vw,140px)}

/* --- 5. header --------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:saturate(1.3) blur(9px);
  border-bottom:1px solid var(--rule);
}
.hdr__in{display:flex; align-items:center; gap:clamp(16px,3vw,44px); height:64px}
.mark{display:flex; align-items:baseline; gap:7px; font-weight:700; font-stretch:82%;
  font-size:21px; letter-spacing:-.045em; margin-right:auto}
.mark b{font-weight:700}
.mark i{
  font-style:normal; font-size:9px; letter-spacing:.16em; font-stretch:100%; font-weight:600;
  color:var(--paper); background:var(--ink); padding:3px 5px 2px; border-radius:2px;
  transform:translateY(-7px);
}
.nav{display:flex; gap:clamp(14px,2vw,30px)}
.nav a{font-size:13.5px; font-weight:500; color:var(--ink-2); position:relative; padding-block:4px}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--ink); transition:right .4s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
@media(max-width:860px){.nav{display:none}}

.btn{
  display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px;
  border-radius:999px; font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:transform .28s var(--ease), background .3s var(--ease), border-color .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); background:var(--paint); border-color:var(--paint)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--rule-2)}
.btn--ghost:hover{background:transparent; color:var(--paint); border-color:var(--paint)}
.btn--big{height:54px; padding:0 26px; font-size:15px}
.btn__dot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55}

/* =========================================================================
   6. HERO — a printed form with the trade written into the blank
   ========================================================================= */
.hero{padding-top:clamp(40px,6vw,84px); padding-bottom:clamp(36px,5vw,70px); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,72px); align-items:end}
@media(max-width:1000px){.hero__grid{grid-template-columns:1fr; gap:38px; align-items:stretch}}

.hero__stamp{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(22px,3vw,38px);
  border:1px solid var(--rule-2); border-radius:999px; padding:6px 13px 5px;
}
.hero__stamp span{font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; font-weight:600; color:var(--ink-2)}
.hero__stamp .pip{width:6px; height:6px; border-radius:50%; background:var(--paint);
  transition:background .7s var(--ease)}

/* the headline */
.board{margin:0; font-weight:700; font-stretch:80%; letter-spacing:-.045em;
  font-size:clamp(54px,11vw,152px); line-height:.86;}
.board__row{display:flex; align-items:baseline; gap:.22em; flex-wrap:wrap}
.board__fixed{display:block}
.slot{position:relative; display:inline-block; min-width:clamp(210px,44vw,660px)}
.slot__inner{display:block; overflow:hidden; padding-block:.08em .30em}
.slot__word{
  display:inline-flex; font-family:var(--serif); font-style:italic; font-weight:400;
  font-stretch:100%; letter-spacing:-.02em; color:var(--paint);
  transition:color .7s var(--ease); white-space:nowrap;
}
.slot__word span{display:inline-block; will-change:transform,opacity}
.slot__word span[data-space]{width:.28em}
/* the ruled blank the word is written onto */
.slot__rule{position:absolute; left:0; right:0; bottom:.18em; height:3px; background:var(--rule-2)}
.slot__rule::after{
  content:''; position:absolute; inset:0; background:var(--paint);
  transform-origin:left center; transform:scaleX(var(--fill,0));
  transition:transform .8s var(--ease), background .7s var(--ease);
}
@keyframes wordIn{from{transform:translateY(88%) rotate(2.2deg); opacity:0}
  to{transform:none; opacity:1}}
@keyframes wordOut{from{transform:none; opacity:1}
  to{transform:translateY(-78%) rotate(-1.6deg); opacity:0}}
.slot__word.is-in span{animation:wordIn .62s var(--ease-out) both}
.slot__word.is-out span{animation:wordOut .40s cubic-bezier(.55,0,.85,.3) both}

.hero__sub{max-width:56ch; margin-top:clamp(24px,3vw,38px)}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,34px)}
.hero__foot{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px}
.hero__foot li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3)}
.hero__foot li::before{content:''; width:14px; height:1px; background:var(--rule-2)}

/* the photo plate */
.plate{position:relative}
.plate__frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px;
  background:var(--paper-2); border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(20,17,16,.05), 0 24px 44px -30px rgba(20,17,16,.5);
}
@media(max-width:1000px){.plate__frame{aspect-ratio:16/11}}
.plate__frame img,.plate__frame .fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.07); filter:saturate(.86) contrast(1.03);
  transition:opacity .9s var(--ease), transform 1.5s var(--ease);
}
.plate__frame img.is-on,.plate__frame .fallback.is-on{opacity:1; transform:scale(1)}
/* paint wash so the photo belongs to the trade */
.plate__frame::after{
  content:''; position:absolute; inset:0; background:var(--paint); mix-blend-mode:multiply;
  opacity:.17; transition:background .7s var(--ease); pointer-events:none;
}
.plate__tag{
  position:absolute; left:0; bottom:0; z-index:3; display:flex; align-items:center; gap:9px;
  background:var(--ink); color:var(--paper); padding:9px 15px 8px;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
}
.plate__tag em{font-style:normal; color:var(--paint); filter:brightness(1.55) saturate(1.4);
  transition:color .7s var(--ease)}
.plate__caption{
  margin-top:14px; border-left:2px solid var(--paint); padding:2px 0 2px 16px;
  transition:border-color .7s var(--ease);
}
@media(min-width:1001px){.plate__caption{min-height:104px}}
.plate__caption p{font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.5vw,21px);
  line-height:1.4; color:var(--ink-2); text-wrap:pretty}
@keyframes capIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.plate__caption.is-in p{animation:capIn .6s var(--ease-out) both}
.plate__caption.is-out p{opacity:0; transition:opacity .25s}

/* hero counter + control */
.board__meter{display:flex; align-items:center; gap:14px; margin-top:clamp(26px,3vw,34px)}
.meter__track{position:relative; flex:1; max-width:200px; height:1.5px; background:var(--rule-2)}
.meter__track i{position:absolute; inset:0; background:var(--ink); transform-origin:left;
  transform:scaleX(var(--p,0)); transition:transform .18s linear}
.meter__btn{width:30px; height:30px; border:1px solid var(--rule-2); border-radius:50%;
  display:grid; place-items:center; transition:border-color .3s, color .3s}
.meter__btn:hover{border-color:var(--ink)}
.meter__btn svg{width:11px; height:11px}
.meter__btn .ico-play{display:none}
.is-paused .meter__btn .ico-play{display:block}
.is-paused .meter__btn .ico-pause{display:none}

/* photo fallback plate — must look deliberate, never broken */
.fallback{
  display:grid; place-items:center; padding:22px; text-align:center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb,var(--paint) 14%, transparent) 9px 10px),
    var(--paper-2);
}
.fallback b{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,3vw,40px); line-height:1.1; color:var(--paint);
  background:var(--paper); padding:.24em .5em; border:1px solid var(--rule); border-radius:2px;
}

/* --- 7. ticker --------------------------------------------------------- */
.ticker{border-block:1px solid var(--rule); background:var(--paper-2); overflow:hidden}
.ticker__row{display:flex; width:max-content; animation:slide 46s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker__row span{
  display:flex; align-items:center; gap:16px; padding:13px 0;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-2);
}
.ticker__row span::after{content:''; width:5px; height:5px; border-radius:50%;
  background:var(--rule-2); margin-inline:22px}

/* --- 8. section head --------------------------------------------------- */
.shead{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,44px);
  align-items:start; margin-bottom:clamp(38px,5vw,72px)}
.shead__idx{padding-top:.2em}
.shead__idx b{
  display:grid; place-items:center; width:44px; height:44px; border-radius:3px;
  background:var(--paint); color:var(--paper); font-size:14px; font-weight:700;
  letter-spacing:.02em; font-stretch:100%;
}
#how{--paint:var(--rust)} #hours{--paint:var(--madder)} #learns{--paint:var(--green)}
#trades{--paint:var(--navy)} #does{--paint:var(--clay)} #questions{--paint:var(--teal)}
#pricing{--paint:var(--rust)}
.shead--dark .shead__idx b{background:var(--paper); color:var(--ink)}
.shead__body{max-width:900px}
.shead__lede{margin-top:clamp(16px,2vw,24px); max-width:60ch}
@media(max-width:700px){.shead{grid-template-columns:1fr; gap:12px}.shead__idx{padding-top:0}}

/* --- 10. the apprentice panels ----------------------------------------- */
.learn{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule);
  border:1px solid var(--rule)}
@media(max-width:860px){.learn{grid-template-columns:1fr}}
.learn__cell{background:var(--card); padding:clamp(24px,2.8vw,40px); display:flex; flex-direction:column; gap:14px;
  transition:background .4s var(--ease)}
.learn__cell:hover{background:var(--paper)}
.learn__when{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--paint)}
.learn__t{font-size:clamp(22px,2.2vw,30px); font-weight:600; font-stretch:92%; letter-spacing:-.03em; line-height:1.12}
.learn__p{color:var(--ink-2); font-size:15.5px; text-wrap:pretty}
.learn__bar{height:3px; background:var(--rule); margin-top:auto; position:relative; overflow:hidden}
.learn__bar i{position:absolute; inset:0; background:var(--paint); transform-origin:left; transform:scaleX(0);
  transition:transform 1.1s var(--ease)}
.learn__cell.in .learn__bar i{transform:scaleX(var(--w,.33))}

.learn__wide{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);
  align-items:center; margin-bottom:clamp(40px,5vw,72px)}
@media(max-width:900px){.learn__wide{grid-template-columns:1fr}}
.learn__photo{position:relative; aspect-ratio:5/4; overflow:hidden; border:1px solid var(--rule); border-radius:3px;
  background:var(--paper-2)}
.learn__photo img,.learn__photo .fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06)}
.learn__photo::after{content:''; position:absolute; inset:0; background:var(--paint); mix-blend-mode:multiply; opacity:.22}

/* --- 11. trades index -------------------------------------------------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,3vw,40px)}
.chip{
  height:36px; padding:0 15px; border-radius:999px; border:1px solid var(--rule-2);
  font-size:12.5px; font-weight:600; letter-spacing:-.005em; color:var(--ink-2);
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule)}
.card{
  position:relative; background:var(--card); padding:0; overflow:hidden; text-align:left;
  display:flex; flex-direction:column; min-height:100%;
}
.card.is-hidden{display:none}
.card__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
@media(max-width:560px){.card__media{aspect-ratio:16/9}}
.card__media img,.card__media .fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); transform:scale(1.02);
  transition:filter .6s var(--ease), transform 1.1s var(--ease);
}
.card__media::after{
  content:''; position:absolute; inset:0; background:var(--paint); mix-blend-mode:multiply;
  opacity:.30; transition:opacity .6s var(--ease);
}
.card:hover .card__media img,.card:focus-visible .card__media img,
.card:hover .card__media .fallback{filter:grayscale(0) saturate(.94); transform:scale(1.06)}
.card:hover .card__media::after{opacity:.10}
.card__n{position:absolute; top:10px; left:12px; z-index:2; font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--paper); mix-blend-mode:normal; text-shadow:0 1px 3px rgba(0,0,0,.4)}
.card__body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__name{font-size:17.5px; font-weight:650; font-stretch:90%; letter-spacing:-.025em; line-height:1.18}
.card__job{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--paint); line-height:1.3}
.card__does{margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); display:grid; gap:5px}
.card__does li{font-size:13px; color:var(--ink-3); display:flex; gap:8px; line-height:1.35}
.card__does li::before{content:'—'; color:var(--rule-2); flex:none}
.card__open{
  margin-top:14px; align-self:flex-start; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:7px;
}
.card__open i{display:block; width:16px; height:1.5px; background:var(--paint); transition:width .35s var(--ease)}
.card:hover .card__open i{width:28px}

/* trade dialog */
.sheet{border:0; padding:0; max-width:min(680px,calc(100vw - 32px)); width:100%; background:transparent;
  color:var(--ink); overflow:visible}
.sheet::backdrop{background:rgba(20,17,16,.55); backdrop-filter:blur(3px)}
.sheet__in{background:var(--card); border:1px solid var(--rule-2); border-radius:4px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(20,17,16,.6)}
.sheet__top{position:relative; aspect-ratio:16/7; overflow:hidden; background:var(--paper-2)}
.sheet__top img,.sheet__top .fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sheet__top::after{content:''; position:absolute; inset:0; background:var(--paint); mix-blend-mode:multiply; opacity:.2}
.sheet__x{position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:var(--paper); display:grid; place-items:center; font-size:16px; line-height:1}
.sheet__body{padding:clamp(20px,3vw,34px); display:grid; gap:16px}
.sheet__name{font-size:clamp(24px,3vw,34px); font-weight:700; font-stretch:88%; letter-spacing:-.035em; line-height:1.05}
.sheet__q{font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,24px); line-height:1.4;
  border-left:2px solid var(--paint); padding-left:18px; color:var(--ink-2)}
.sheet__list{display:grid; gap:9px; padding-top:6px; border-top:1px solid var(--rule)}
.sheet__list li{display:flex; gap:11px; font-size:15px; color:var(--ink-2)}
.sheet__list li b{color:var(--paint); font-weight:600; flex:none; font-variant-numeric:tabular-nums}
@keyframes sheetIn{from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none}}
.sheet[open]{animation:sheetIn .38s var(--ease-out)}

.also{margin-top:clamp(28px,3.4vw,44px); display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center}
.also li{font-size:13px; color:var(--ink-3); border:1px solid var(--rule); border-radius:999px; padding:5px 12px 4px;
  background:var(--card)}
.also li.also__lead{border:0; background:none; padding-left:0; color:var(--ink-2); font-weight:600}

/* --- 12. what it does -------------------------------------------------- */
.does{border-top:1px solid var(--ink)}
.does__row{
  display:grid; grid-template-columns:70px minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(16px,3vw,44px);
  padding:clamp(24px,3vw,40px) 0; border-bottom:1px solid var(--rule); align-items:start;
}
@media(max-width:820px){.does__row{grid-template-columns:44px minmax(0,1fr)}
  .does__p{grid-column:2}}
.does__t{font-size:clamp(26px,3.4vw,44px); font-weight:700; font-stretch:86%; letter-spacing:-.035em; line-height:1.07}
.does__t em{font-family:var(--serif); font-style:italic; font-weight:400; font-stretch:100%; color:var(--paint)}
.does__p{color:var(--ink-2); text-wrap:pretty; font-size:16.5px}
.does__p b{color:var(--ink); font-weight:600}
.does__row .u-num{padding-top:.7em}

/* --- 13. pull quote band ----------------------------------------------- */
.band{background:var(--ink); color:var(--paper)}
.band .u-eyebrow{color:rgba(242,238,228,.5)}
.band__q{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(29px,4.4vw,62px); line-height:1.08; letter-spacing:-.02em; max-width:29ch;
  text-wrap:pretty;
}
.band__q b{color:var(--paint); font-weight:400; filter:brightness(1.6) saturate(1.25)}
.band__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,270px); gap:clamp(24px,4vw,60px); align-items:end}
@media(max-width:820px){.band__grid{grid-template-columns:1fr; align-items:start; gap:26px}}
.band__who{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:rgba(242,238,228,.6); border-top:1px solid rgba(242,238,228,.22); padding-top:14px; min-width:200px}
.band__nav{display:flex; gap:8px; margin-top:18px}
.band__dot{width:26px; height:3px; background:rgba(242,238,228,.25); transition:background .35s}
.band__dot[aria-current="true"]{background:var(--paper)}
@keyframes qIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.band__q.is-in,.band__who.is-in{animation:qIn .55s var(--ease-out) both}

/* --- 14. questions ----------------------------------------------------- */
.qa{border-top:1px solid var(--ink)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:20px; align-items:center;
  padding:clamp(18px,2.2vw,26px) 0; cursor:pointer; list-style:none;
  font-size:clamp(18px,2.1vw,25px); font-weight:600; font-stretch:92%; letter-spacing:-.025em;
  transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--paint)}
.qa__pm{position:relative; width:22px; height:22px; justify-self:end}
.qa__pm::before,.qa__pm::after{content:''; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease)}
.qa__pm::after{transform:rotate(90deg)}
.qa details[open] .qa__pm::after{transform:rotate(0)}
.qa__a{padding-bottom:clamp(20px,2.4vw,30px); max-width:70ch; color:var(--ink-2); display:grid; gap:12px}
@keyframes qaIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.qa details[open] .qa__a{animation:qaIn .4s var(--ease-out) both}

/* --- 15. pricing ------------------------------------------------------- */
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule);
  border:1px solid var(--rule)}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--card); padding:clamp(24px,2.8vw,38px); display:flex; flex-direction:column; gap:16px;
  position:relative}
.tier--mid{background:var(--paper)}
.tier__flag{position:absolute; top:0; right:0; background:var(--paint); color:var(--paper);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:5px 10px 4px}
.tier__name{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
.tier__price{display:flex; align-items:baseline; gap:5px; font-weight:700; font-stretch:84%;
  letter-spacing:-.045em; font-size:clamp(44px,5vw,64px); line-height:1}
.tier__price sub{font-size:14px; font-weight:500; font-stretch:100%; letter-spacing:0; color:var(--ink-3);
  vertical-align:baseline; bottom:0}
.tier__for{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-2)}
.tier__list{display:grid; gap:8px; padding-top:16px; border-top:1px solid var(--rule); font-size:14.5px;
  color:var(--ink-2)}
.tier__list li{display:flex; gap:10px}
.tier__list li::before{content:'✓'; color:var(--paint); flex:none; font-size:12px; padding-top:2px}
.tier .btn{margin-top:auto; align-self:flex-start}
.tier__note{font-size:12.5px; color:var(--ink-3)}

/* --- 16. closing + footer ---------------------------------------------- */
.close{text-align:center; padding-block:clamp(80px,10vw,150px)}
.close .h-sec{max-width:16ch; margin-inline:auto}
.close__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:clamp(26px,3vw,38px)}

.ftr{border-top:1px solid var(--ink); padding-block:clamp(40px,5vw,64px) 34px}
.ftr__grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,60px)}
@media(max-width:760px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
.ftr__word{font-weight:700; font-stretch:78%; letter-spacing:-.05em; font-size:clamp(52px,9vw,120px);
  line-height:.84; margin-bottom:14px}
.ftr__word em{font-family:var(--serif); font-style:italic; font-weight:400; font-stretch:100%; color:var(--paint)}
.ftr h4{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; font-weight:700}
.ftr li{margin-bottom:8px}
.ftr a{font-size:14.5px; color:var(--ink-2); transition:color .25s}
.ftr a:hover{color:var(--paint)}
.ftr__base{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  margin-top:clamp(34px,4vw,56px); padding-top:20px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--ink-3)}

/* --- 17. reveal + motion ----------------------------------------------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.07s} .rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s} .rv[data-d="4"]{transition-delay:.28s}
.rv[data-d="5"]{transition-delay:.35s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
  .ticker__row{animation:none}
}

/* --- 18. skip link ----------------------------------------------------- */
.skip{position:fixed; left:12px; top:12px; z-index:1000; transform:translateY(-200%);
  transition:transform .3s var(--ease)}
.skip:focus{transform:none}

/* --- 19. card as an article with a full-bleed opener -------------------- */
.card{position:relative; overflow:hidden}
.card__open{position:static}            /* so ::after resolves against .card */
.card__open::after{content:''; position:absolute; inset:0; z-index:2}
.card:has(.card__open:focus-visible){outline:2px solid var(--paint); outline-offset:-3px; border-radius:2px}
.card__open:focus-visible{outline:none}

/* --- 20. the last cell: tell us what you do ---------------------------- */
.card--ask{
  background:var(--ink); color:var(--paper); justify-content:center; gap:14px;
  padding:clamp(22px,2.4vw,30px);
}
.card--ask h3{font-size:clamp(21px,2vw,27px); font-weight:650; font-stretch:90%;
  letter-spacing:-.03em; line-height:1.1}
.card--ask p{color:rgba(242,238,228,.66); font-size:14.5px; text-wrap:pretty}
.card--ask a{
  align-self:flex-start; margin-top:4px; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; display:flex; align-items:center; gap:9px;
}
.card--ask a i{display:block; width:18px; height:1.5px; background:var(--rust); transition:width .35s var(--ease)}
.card--ask:hover a i{width:32px}

/* ###########################################################################
   PART TWO — the demonstration.
   Everything below exists to answer one question a gardener actually asks:
   "what IS it, and what does it do for me?" So it shows rather than claims,
   and it does it in colour, because the first version was all cream.
   ######################################################################### */

/* --- 21. hero: the plain-English panel + the phone on the photo --------- */
.plain{
  margin-top:clamp(26px,3vw,40px); max-width:60ch;
  border:1.5px solid var(--ink); border-radius:3px; background:var(--card);
  padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,28px) clamp(16px,1.8vw,22px);
  position:relative; box-shadow:5px 5px 0 var(--wash-2);
  transition:box-shadow .7s var(--ease);
}
.plain__label{
  position:absolute; top:0; left:clamp(18px,2.2vw,28px); transform:translateY(-50%);
  background:var(--ink); color:var(--paper); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:5px 10px 4px; border-radius:2px;
}
.plain__body{font-size:clamp(17px,1.45vw,20.5px); line-height:1.52; color:var(--ink); text-wrap:pretty;
  margin-top:6px}
.plain__body b{font-weight:700; box-shadow:inset 0 -.42em 0 var(--wash-2); transition:box-shadow .7s var(--ease)}
.plain__foot{margin-top:12px; padding-top:11px; border-top:1px dashed var(--rule-2);
  font-family:var(--serif); font-style:italic; font-size:16.5px; color:var(--ink-2)}

.figs{display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(22px,2.6vw,30px);
  border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--rule); gap:1px}
.figs li{flex:1 1 130px; background:var(--paper); padding:12px 16px 13px; display:grid; gap:1px}
.figs b{font-size:clamp(22px,2.4vw,30px); font-weight:700; font-stretch:86%; letter-spacing:-.04em;
  line-height:1; color:var(--paint); transition:color .7s var(--ease)}
.figs span{font-size:12.5px; color:var(--ink-3); line-height:1.3}

/* the little phone pinned to the hero photo — the product, on the picture */
.peek{
  position:absolute; z-index:4; right:14px; bottom:52px; width:min(300px,72%);
  background:var(--card); border:1px solid var(--ink); border-radius:8px;
  box-shadow:0 22px 40px -22px rgba(20,17,16,.75);
  transform:rotate(-1.4deg); overflow:hidden;
}
@media(max-width:1000px){.peek{right:12px; bottom:56px; width:min(320px,80%)}}
/* on a phone the texts matter more than the photograph, so it stays */
@media(max-width:520px){
  .peek{right:10px; left:10px; bottom:50px; width:auto; transform:rotate(-.8deg)}
  .peek__b{font-size:13px}
}
.peek__hd{display:flex; align-items:center; gap:7px; background:var(--ink); color:var(--paper);
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; padding:7px 10px 6px}
.peek__dot{width:5px; height:5px; border-radius:50%; background:var(--paint); flex:none;
  transition:background .7s var(--ease); filter:brightness(1.5)}
.peek__body{padding:10px; display:grid; gap:7px}
.peek__b{font-size:12.5px; line-height:1.35; padding:8px 11px; border-radius:12px; max-width:92%}
.peek__b--them{background:var(--paper-2); color:var(--ink-2); border-bottom-left-radius:3px; justify-self:start}
.peek__b--app{background:var(--paint); color:#fff; border-bottom-right-radius:3px; justify-self:end;
  transition:background .7s var(--ease)}
@keyframes peekIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.peek.is-in .peek__b{animation:peekIn .5s var(--ease-out) both}
.peek.is-in .peek__b--app{animation-delay:.16s}

/* --- 22. ticker, in colour --------------------------------------------- */
.ticker{background:var(--ink); border-block-color:var(--ink)}
.ticker__row span{color:rgba(242,238,228,.72)}
.ticker__row span:nth-child(6n+1)::after{background:var(--rust)}
.ticker__row span:nth-child(6n+2)::after{background:var(--ochre)}
.ticker__row span:nth-child(6n+3)::after{background:var(--green)}
.ticker__row span:nth-child(6n+4)::after{background:var(--madder)}
.ticker__row span:nth-child(6n+5)::after{background:var(--slate)}
.ticker__row span:nth-child(6n)::after{background:var(--signal)}

/* --- 23. §01 the three moves — big flat colour ------------------------- */
.moves{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px)}
@media(max-width:900px){.moves{grid-template-columns:1fr}}
.move{
  --paint:var(--rust);
  background:var(--paint); color:var(--paper); border-radius:4px;
  padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:14px;
  min-height:clamp(300px,26vw,380px); position:relative; overflow:hidden;
}
.move--2{--paint:var(--slate)} .move--3{--paint:var(--green)}
.move::after{ /* a fat painted number ghosted into the corner */
  content:''; position:absolute; right:-30px; bottom:-56px; width:190px; height:190px;
  border:26px solid rgba(255,255,255,.10); border-radius:50%;
}
.move--2::after{border-radius:4px; transform:rotate(18deg)}
.move--3::after{border-radius:50%; border-style:dashed}
.move__n{font-family:var(--serif); font-style:italic; font-size:clamp(30px,3.4vw,46px);
  line-height:1; color:rgba(255,255,255,.6)}
.move__t{font-size:clamp(23px,2.3vw,31px); font-weight:700; font-stretch:88%; letter-spacing:-.03em;
  line-height:1.08; text-wrap:balance}
.move__p{font-size:15.5px; line-height:1.5; color:rgba(255,255,255,.82); text-wrap:pretty}
.move__p b{color:#fff; font-weight:700}
.move__you{
  margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.28);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.6); position:relative; z-index:1;
}
.move__you em{font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:0;
  text-transform:none; color:#fff; margin-left:4px}
.moves__foot{
  margin-top:clamp(22px,2.6vw,32px); text-align:center; font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,1.7vw,23px); color:var(--ink-3); text-wrap:balance;
}

/* --- 24. §02 WATCH — the section takes the colour of the trade you pick - */
.watch{background:var(--paint); color:var(--paper); transition:background .8s var(--ease)}
.watch .shead__lede,.watch .u-lede{color:rgba(255,255,255,.78)}
.watch .u-num{color:rgba(255,255,255,.6)}

.watch__tabs{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:clamp(24px,3vw,38px)}
.tab{
  height:38px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.85); font-size:13px; font-weight:600; letter-spacing:-.005em;
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.tab:hover{border-color:#fff; color:#fff; transform:translateY(-2px)}
.tab[aria-selected="true"]{background:var(--paper); border-color:var(--paper); color:var(--ink)}

.watch__grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:clamp(18px,2.4vw,34px); align-items:start}
@media(max-width:1000px){.watch__grid{grid-template-columns:1fr}}

/* the phone */
.phone{
  background:var(--paper); color:var(--ink); border-radius:16px; overflow:hidden;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.6); border:1px solid rgba(0,0,0,.2);
}
.phone__top{display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper);
  padding:9px 16px; font-size:11px; letter-spacing:.1em; font-weight:600}
.phone__when{margin-inline:auto; text-transform:uppercase; letter-spacing:.14em; color:rgba(242,238,228,.75)}
.phone__sig{display:flex; align-items:flex-end; gap:2px}
.phone__sig i{display:block; width:3px; background:rgba(242,238,228,.75); border-radius:1px}
.phone__sig i:nth-child(1){height:5px} .phone__sig i:nth-child(2){height:8px} .phone__sig i:nth-child(3){height:11px}
.phone__bat{display:block; width:20px; height:10px; border:1.5px solid rgba(242,238,228,.75); border-radius:2px;
  position:relative}
.phone__bat::after{content:''; position:absolute; inset:1.5px; right:6px; background:rgba(242,238,228,.75)}
.phone__doing{
  display:flex; align-items:baseline; gap:12px; padding:13px 18px;
  background:var(--wash-2); border-bottom:1px solid var(--rule);
}
.phone__doing .u-num{color:var(--ink-2); flex:none; text-transform:uppercase}
.phone__doing p{font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.5vw,20px);
  color:var(--ink); line-height:1.3}
.phone__foot{padding:14px 18px 18px; border-top:1px solid var(--rule); background:var(--card)}
.replay{display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 16px; border-radius:999px;
  border:1px solid var(--rule-2); font-size:12.5px; font-weight:600; color:var(--ink-2);
  transition:border-color .3s, color .3s}
.replay:hover{border-color:var(--ink); color:var(--ink)}

/* the conversation */
.threads{background:var(--card); min-height:clamp(360px,42vw,520px)}
.thread{padding:clamp(16px,2vw,24px) clamp(14px,2vw,22px); display:grid; gap:12px; align-content:start}
.thread[hidden]{display:none}
.msg__t{display:block}
.msg{max-width:80%; padding:11px 15px 12px; border-radius:16px; font-size:15px; line-height:1.45;
  position:relative; text-wrap:pretty}
.msg time{display:block; margin-top:5px; font-size:10.5px; letter-spacing:.08em; opacity:.55}
.msg b.msg__who{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; opacity:.6; margin-bottom:4px}
.msg--them{justify-self:start; background:var(--paper-2); border-bottom-left-radius:4px; color:var(--ink)}
.msg--app{justify-self:end; background:var(--paint); color:#fff; border-bottom-right-radius:4px}
.msg--app .msg__who{opacity:.75}
.msg--you{justify-self:end; background:var(--ink); color:var(--paper); border-bottom-right-radius:4px;
  font-family:var(--serif); font-style:italic; font-size:20px; min-width:150px; padding:12px 18px 13px}
.msg__att{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; font-weight:600; opacity:.7}
.msg__att::before{content:''; width:20px; height:14px; border:1.5px solid currentColor; border-radius:2px}
.msg__voice{display:flex; align-items:center; gap:8px; margin-top:9px}
.msg__voice i{flex:1; height:16px; background:
  repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px);
  opacity:.5; mask-image:linear-gradient(90deg,#000 60%,transparent)}
.msg__voice span{font-size:11px; letter-spacing:.08em; opacity:.75}

/* the margin note — the bit that teaches you how it knew */
.note{
  font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.42;
  color:var(--ink-2); padding:2px 0 2px 15px; border-left:2px solid var(--paint);
  margin:2px 0 2px clamp(0px,1vw,10px); max-width:92%;
}
.note::before{content:'How it knew · '; font-family:var(--sans); font-style:normal; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--paint)}
.switch{
  display:flex; align-items:center; gap:12px; margin:10px 0 4px;
  font-size:12px; letter-spacing:.03em; color:var(--ink-3); font-style:italic;
  font-family:var(--serif); font-size:15px;
}
.switch::before,.switch::after{content:''; height:1px; background:var(--rule-2); flex:1}

/* the text it sends YOU — a different thing entirely, so it looks different */
.msg--toyou{
  max-width:100%; justify-self:stretch; background:var(--ink); color:var(--paper);
  border-radius:4px; border-left:5px solid var(--paint); padding:14px 17px 15px;
}
.msg--toyou .msg__who{color:var(--paper); opacity:1; margin-bottom:7px}
.msg--toyou .msg__who::before{content:'↓ '; }
.msg--toyou.is-urgent{border-left-color:var(--rust); background:#2A100C}
.msg--toyou.is-urgent .msg__who{color:#FF9C7E}

@keyframes msgIn{from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1; transform:none}}
.thread > *{opacity:0}
.thread > *.on{animation:msgIn .42s var(--ease-out) both}
.thread.all-on > *{opacity:1; animation:none}
.typing{display:flex; gap:4px; padding:14px 16px; background:var(--paper-2); border-radius:16px;
  border-bottom-left-radius:4px; justify-self:start; opacity:1 !important}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:blip 1s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes blip{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* the receipt beside it */
.tally{background:var(--card); color:var(--ink); border-radius:4px; padding:clamp(20px,2.2vw,28px);
  display:grid; gap:0; align-content:start; position:sticky; top:84px}
@media(max-width:1000px){.tally{position:static}}
.tally__hd{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--ink-3); padding-bottom:14px; border-bottom:1.5px solid var(--ink)}
.tally__row{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px dashed var(--rule)}
.tally__row span{font-size:14px; color:var(--ink-2)}
.tally__row b{font-size:clamp(19px,1.9vw,25px); font-weight:700; font-stretch:88%; letter-spacing:-.03em;
  color:var(--paint); text-align:right}
.tally__else{margin-top:20px; background:var(--wash); border-radius:3px; padding:16px 17px 18px}
.tally__elseHd{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--paint); margin-bottom:8px}
.tally__elseBody{font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.4;
  color:var(--ink); text-wrap:pretty}

/* --- 25. §03 the timesheet --------------------------------------------- */
.sheet2{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(20px,3vw,52px);
  align-items:start}
@media(max-width:940px){.sheet2{grid-template-columns:1fr}}
.sheet2__paper{
  background:var(--card); border:1px solid var(--rule-2); border-radius:3px;
  box-shadow:0 20px 40px -34px rgba(20,17,16,.6);
}
.sheet2__hd em{font-family:var(--serif); font-style:italic; font-size:14px; letter-spacing:0;
  text-transform:none; color:rgba(242,238,228,.62); font-weight:400; margin-left:10px}
.sheet2__hd{display:flex; justify-content:space-between; gap:16px; padding:16px clamp(16px,2vw,26px);
  background:var(--ink); color:var(--paper); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700}
.sheet2__rows li{
  display:grid; grid-template-columns:minmax(0,1fr) 74px; gap:14px; align-items:baseline;
  padding:clamp(13px,1.5vw,17px) clamp(16px,2vw,26px); border-bottom:1px solid var(--rule);
  cursor:pointer; transition:background .25s var(--ease);
}
.sheet2__rows li:hover{background:var(--wash)}
.sheet2__job{font-size:clamp(16px,1.5vw,19.5px); font-weight:600; font-stretch:94%; letter-spacing:-.02em;
  line-height:1.25}
.sheet2__note{grid-column:1; font-family:var(--serif); font-style:italic; font-size:14.5px;
  color:var(--ink-3); margin-top:2px}
.sheet2__hrs{grid-row:1/3; grid-column:2; text-align:right; font-size:clamp(18px,1.8vw,23px);
  font-weight:700; font-stretch:88%; letter-spacing:-.03em; color:var(--paint)}
.sheet2__rows li[data-off="1"]{opacity:.4}
.sheet2__rows li[data-off="1"] .sheet2__job{text-decoration:line-through; text-decoration-thickness:2px;
  text-decoration-color:var(--paint)}
.sheet2__total{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px); border-bottom:1px solid var(--rule);
  background:var(--paper-2)}
.sheet2__total span{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-2)}
.sheet2__total b{font-size:clamp(34px,4.4vw,58px); font-weight:700; font-stretch:84%; letter-spacing:-.045em;
  line-height:1}
.sheet2__split{display:grid; grid-template-columns:1fr 1fr}
@media(max-width:520px){.sheet2__split{grid-template-columns:1fr}}
.sheet2__split p{padding:clamp(16px,1.9vw,22px) clamp(16px,2vw,26px); display:grid; gap:3px}
.sheet2__split b{font-size:clamp(24px,2.6vw,34px); font-weight:700; font-stretch:86%; letter-spacing:-.04em; line-height:1}
.sheet2__split span{font-size:13px; line-height:1.35}
.sheet2__mine{background:var(--green); color:#fff}
.sheet2__mine span{color:rgba(255,255,255,.8)}
.sheet2__yours{background:var(--paper-2); color:var(--ink)}
.sheet2__yours span{color:var(--ink-3)}

.sheet2__sideT{font-size:clamp(21px,2.2vw,29px); font-weight:700; font-stretch:90%; letter-spacing:-.03em;
  line-height:1.1; margin-bottom:14px; text-wrap:balance}
.sheet2__sideP{color:var(--ink-2); font-size:16px; margin-bottom:14px; text-wrap:pretty}
.sheet2__sideP b{color:var(--ink); box-shadow:inset 0 -.45em 0 var(--wash-2)}
.walked{margin-top:22px; border-top:2px solid var(--ink)}
.walked li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 10px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--rule)}
.walked p{font-size:16px; font-weight:600; font-stretch:94%; letter-spacing:-.02em}
.walked s{text-decoration-color:var(--paint); text-decoration-thickness:2px}
.walked em{grid-column:2; font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--ink-3)}

/* --- 26. §04 what AI actually is — the big yellow field ---------------- */
.plainly{background:var(--signal); color:var(--ink); --paint:var(--ink)}
.plainly .shead__lede,.plainly .u-lede{color:rgba(20,17,16,.72)}
.plainly .u-num{color:rgba(20,17,16,.6)}
.plainly .shead__idx b{background:var(--ink); color:var(--signal)}
.plainly__grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3.4vw,56px); align-items:start}
@media(max-width:940px){.plainly__grid{grid-template-columns:1fr}}
.plainly__big{
  font-size:clamp(28px,3.6vw,48px); font-weight:700; font-stretch:88%; letter-spacing:-.035em;
  line-height:1.06; margin-bottom:22px; text-wrap:balance;
}
.plainly__big em{font-family:var(--serif); font-style:italic; font-weight:400; font-stretch:100%;
  box-shadow:inset 0 -.07em 0 var(--ink); -webkit-box-decoration-break:clone; box-decoration-break:clone}
.plainly__p{font-size:clamp(16.5px,1.4vw,19px); line-height:1.55; margin-bottom:15px;
  color:rgba(20,17,16,.84); max-width:56ch; text-wrap:pretty}
.plainly__p b{color:var(--ink); font-weight:700}
.plainly__cols{display:grid; gap:14px}
.pcol{border:1.5px solid var(--ink); border-radius:3px; padding:clamp(18px,2vw,24px); background:rgba(255,255,255,.34)}
.pcol--bad{background:var(--ink); color:var(--signal); border-color:var(--ink)}
.pcol__hd{font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:700;
  padding-bottom:11px; margin-bottom:12px; border-bottom:1px solid currentColor}
.pcol ul{display:grid; gap:9px}
.pcol li{display:flex; gap:11px; font-size:15.5px; line-height:1.4}
.pcol--good li::before{content:'✓'; font-weight:700; flex:none}
.pcol--bad li::before{content:'✕'; flex:none; opacity:.7}
.pcol--bad li{color:rgba(237,187,74,.9)}
.pcol--bad em{font-family:var(--serif); font-style:italic; color:#fff}
.pcol__note{margin-top:14px; padding-top:12px; border-top:1px dashed rgba(237,187,74,.4);
  font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; color:#fff}

.cant{margin-top:clamp(30px,3.6vw,52px); border-top:2px solid var(--ink); padding-top:clamp(20px,2.4vw,30px)}
.cant__hd{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  margin-bottom:clamp(16px,2vw,24px)}
.cant__list{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2vw,26px)}
.cant__list li{font-size:15.5px; line-height:1.45; color:rgba(20,17,16,.8); border-top:2px solid var(--ink);
  padding-top:12px; text-wrap:pretty}
.cant__list b{display:block; color:var(--ink); font-weight:700; margin-bottom:3px}

/* --- 27. the paint chart above the trades index ------------------------ */
.chart{display:flex; height:14px; margin-bottom:clamp(20px,2.4vw,30px); border-radius:2px; overflow:hidden}
.chart i{flex:1; display:block}

/* --- 28. trades index, with the tin on the card ------------------------ */
.card{border-top:4px solid var(--paint)}
.card__body{background:linear-gradient(var(--wash), var(--card) 70%)}
.card__name{transition:color .3s var(--ease)}
.card:hover .card__name{color:var(--paint)}
.card--ask{border-top-color:var(--signal)}

/* --- 29. five jobs, with the hours in the margin ----------------------- */
.does__cost{display:grid; gap:1px; padding-top:.45em}
.does__cost b{font-size:clamp(19px,1.9vw,25px); font-weight:700; font-stretch:86%; letter-spacing:-.035em;
  line-height:1; color:var(--paint)}
.does__cost i{font-style:normal; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3)}
.does__row{transition:background .35s var(--ease)}
.does__row:hover{background:var(--wash)}
@media(max-width:820px){.does__row{grid-template-columns:74px minmax(0,1fr)}}

/* --- 30. pricing: put it next to what you already pay ------------------ */
.versus{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin-bottom:clamp(26px,3vw,44px)}
.versus li{background:var(--card); padding:clamp(16px,1.9vw,22px); display:grid; gap:5px; align-content:start}
.versus b{font-size:clamp(28px,3vw,40px); font-weight:700; font-stretch:84%; letter-spacing:-.045em;
  line-height:1; color:var(--ink-3)}
.versus span{font-size:13.5px; line-height:1.35; color:var(--ink-3)}
.versus li.versus--us{background:var(--rust); color:#fff}
.versus li.versus--us b{color:#fff}
.versus li.versus--us span{color:rgba(255,255,255,.9)}
.tier--mid{background:var(--ink); color:var(--paper)}
.tier--mid .tier__name{color:rgba(242,238,228,.6)}
.tier--mid .tier__for{color:rgba(242,238,228,.8)}
.tier--mid .tier__list{color:rgba(242,238,228,.85); border-top-color:rgba(242,238,228,.25)}
.tier--mid .tier__note{color:rgba(242,238,228,.55)}
.tier--mid .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.tier--mid .btn:hover{background:var(--paint); border-color:var(--paint); color:#fff}
.tier{border-top:4px solid var(--paint)}

/* --- 31. footer word, in paint ----------------------------------------- */
.ftr{--paint:var(--rust)}
.close{--paint:var(--green)}

/* --- 32. motion off ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .thread > *{opacity:1 !important; animation:none !important}
  .typing{display:none}
}