/* Thumbneo — shared tokens and components for the Letter-family variants
   (centered.html, left.html, profile.html; generated by build/build_pages.py).
   Calm ivory paper, one clay accent, Unbounded display,
   quiet sans body, thin rules, lots of air. Variants only add layout. */

:root{
  --paper:#FAF9F5; --paper-2:#F0EEE6; --paper-3:#E8E4D9;
  --ink:#141413; --ink-2:#5E5D59; --ink-3:#8F8D86; --rule:#DEDBD0;
  --accent:#D97757; --accent-ink:#FFFFFF;
  --display:"Unbounded", "Hanken Grotesk", sans-serif; --display-wt:500; --display-track:-.04em; --ds:.74;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --wrap:min(1120px, calc(100% - 40px));
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* display font alternative (preview bar) */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
.wrap{width:var(--wrap);margin:0 auto}
.label{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.display{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);line-height:1.02}
.display em{font-style:normal;color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);text-decoration:none;
  font:500 16px/1 var(--sans);padding:17px 24px;border-radius:12px;border:0;cursor:pointer;transition:background .25s var(--ease)}
.btn:hover{background:var(--accent)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn-ghost:hover{background:var(--paper-2)}
.link{font:500 15px/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;transition:border-color .2s}
.link:hover{border-color:var(--accent)}

/* nav */
.nav{position:sticky;top:var(--bar-h,0px);z-index:20;background:var(--paper)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 18px/1 var(--sans);letter-spacing:-.01em}
.mark img,.foot-mark img{width:auto;height:26px;mix-blend-mode:multiply}
.foot-mark{display:inline-flex;align-items:center;gap:10px}
.foot-mark img{height:18px}
.nav .btn{padding:12px 18px;font-size:15px;border-radius:10px}
.nav-meta{display:flex;align-items:center;gap:24px}
.nav-meta .label{display:inline-flex;gap:8px;align-items:center}
/* language switch (SL · EN): quiet mono, the current one in ink */
.lang{display:inline-flex;align-items:center;gap:5px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.lang a{text-decoration:none;color:var(--ink-3);padding:8px 1px;transition:color .2s}
.lang a[aria-current]{color:var(--ink)}
.lang a:hover{color:var(--accent)}
@media (max-width:520px){.nav-meta{gap:14px}.nav .btn{padding:11px 14px}}
@media (max-width:400px){.mark{gap:8px}.nav-meta{gap:10px}.lang{gap:4px}.nav .btn{padding:11px 12px;font-size:14px}}

/* rolling last word */
.roller{display:inline-grid;color:var(--accent);overflow:hidden;vertical-align:bottom;padding:0 .04em .1em;margin-bottom:-.1em}
.roller-word{grid-area:1/1;display:inline-block;white-space:nowrap;transition:transform .55s var(--ease),opacity .45s var(--ease)}
.roller-word.out{transform:translateY(-55%);opacity:0}
.roller-word.in{transform:translateY(55%);opacity:0;transition:none}

/* proof line */
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:14px;color:var(--ink-2)}
.proof .stars{color:var(--accent);letter-spacing:.12em;font-size:13px}
.proof b{color:var(--ink);font-weight:600}
.proof .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

/* logo marquee (moves left to right) */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee ul{list-style:none;display:flex;width:max-content;animation:ltr 46s linear infinite}
.marquee:hover ul{animation-play-state:paused}
@keyframes ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo{padding:0 44px;display:flex;align-items:center}
.logo img{height:34px;width:auto;opacity:.62;transition:opacity .2s}
.logo img:hover{opacity:.9}

/* portrait */
.portrait{position:relative;overflow:hidden;background:var(--paper-3)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* offer cards (Build / Teach) */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.offer{background:var(--paper-2);border-radius:20px;padding:36px 36px 34px;display:flex;flex-direction:column;gap:18px}
.offer h3{font-size:calc(38px * var(--ds))}
.offer p{color:var(--ink-2);max-width:40ch}
.offer ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.offer li{font-size:14px;padding:7px 12px;border-radius:999px;background:var(--paper);color:var(--ink-2)}

/* DOE framework */
.doe{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.doe li{list-style:none;padding:26px 24px 8px 0;display:flex;flex-direction:column;gap:10px}
.doe li+li{padding-left:24px;border-left:1px solid var(--rule)}
.doe .label{color:var(--accent)}
.doe b{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);font-size:calc(34px * var(--ds));line-height:1.05}
.doe span{color:var(--ink-2);font-size:15px}

/* closing CTA */
.close{padding:120px 0 110px;text-align:center}
.close h2{font-size:calc(clamp(42px,6vw,80px) * var(--ds));max-width:14ch;margin:20px auto 22px}
.close p{color:var(--ink-2);max-width:44ch;margin:0 auto 34px}
.gift{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--ink-2)}
.gift svg{width:18px;height:18px;color:var(--accent);flex:none}

footer{border-top:1px solid var(--rule);padding:26px 0 34px;font-size:13px;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* booking dialog (built by shared.js) */
.book-dialog{border:0;border-radius:22px;padding:0;width:min(880px,calc(100% - 24px));max-height:calc(100dvh - 24px);background:var(--paper);color:var(--ink);margin:auto;box-shadow:0 40px 80px -30px rgba(20,20,19,.45);overflow:auto}
.book-dialog::backdrop{background:rgba(20,20,19,.5);backdrop-filter:blur(4px)}
.book-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px 22px;border-bottom:1px solid var(--rule)}
.book-head b{display:block;font:var(--display-wt) calc(30px * var(--ds))/1.1 var(--display);letter-spacing:var(--display-track)}
.book-head span{display:block;font-size:14px;line-height:1.45;margin-top:8px;color:var(--ink-2)}
.book-close{border:0;background:var(--paper-2);color:var(--ink);width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer;flex:none}
.book-body{display:grid;grid-template-columns:240px 1fr;min-height:430px}
.book-who{padding:26px 28px;border-right:1px solid var(--rule);background:var(--paper-2);font-size:14px;color:var(--ink-2)}
.book-who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.book-who p b{display:block;color:var(--ink);font-size:16px;margin-top:12px}
.book-who ul{list-style:none;margin:20px 0;display:grid;gap:10px}
.book-who li{position:relative;padding-left:22px;line-height:1.4}
.book-who li::before{content:"";position:absolute;left:1px;top:.45em;width:10px;height:6px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.book-tz{font-size:12.5px;color:var(--ink-3)}
.book-who .book-tz b{display:inline;font-size:inherit;color:var(--ink-2);margin:0}
.book-main{padding:26px 28px 30px;min-width:0}
.book-step .label{margin-bottom:12px}
.book-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.book-days button{flex:none;display:grid;gap:4px;min-width:74px;padding:11px 10px;border-radius:14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;text-align:center;transition:border-color .2s,background .2s}
.book-days small{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.book-days b{font-size:15px;font-weight:600}
.book-days button:hover{border-color:var(--ink-3)}
.book-days [aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.book-days [aria-selected="true"] small{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.book-times-label{margin-top:24px}
.book-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.book-times button{padding:12px 8px;border-radius:12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.book-times button:hover,.book-times button:focus-visible{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--paper))}
.book-note{color:var(--ink-2);font-size:14px;padding:8px 0}
.book-note a,.book-err a{color:var(--accent)}
form.book-step{display:grid;gap:14px}
.book-back{justify-self:start;border:0;background:none;color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;padding:0 0 4px}
.book-back span{color:var(--ink);font-weight:600}
form.book-step label{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
form.book-step label i{font-style:normal;color:var(--ink-3)}
form.book-step input,form.book-step textarea{font:16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:12px;padding:12px 14px;width:100%;resize:vertical}
form.book-step input:focus,form.book-step textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.book-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.book-err{font-size:14px;color:#B4442A}
.book-submit{justify-self:start;margin-top:4px}
.book-submit:disabled{opacity:.6;cursor:wait}
.book-done{display:grid;align-content:center;justify-items:start;gap:10px;min-height:340px}
.book-check{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:24px}
.book-done h3{font-size:calc(40px * var(--ds))}
.book-done p{color:var(--ink-2);max-width:42ch}
.book-done .book-done-when{color:var(--ink);font-weight:600}
@media (max-width:720px){
  .book-head{padding:20px 20px 18px}
  .book-body{grid-template-columns:1fr}
  .book-who{border-right:0;border-bottom:1px solid var(--rule);padding:16px 20px;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:center}
  .book-who img{width:44px;height:44px}
  .book-who p b{margin-top:0}
  .book-who ul{display:none}
  .book-tz{grid-column:1/-1;margin-top:6px}
  .book-main{padding:20px 20px 24px}
}
#book{scroll-margin-top:60px}
.close .close-head{max-width:760px;margin:0 auto}
.close-cta{margin-top:6px}
.demo-cta{margin-top:22px;white-space:normal;text-align:left}

/* free skill: copy left, floppy disk right */
.skill{padding:120px 0 20px}
.skill .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px 72px;align-items:center}
.skill h2{font-size:calc(clamp(40px,5.4vw,72px) * var(--ds));margin:18px 0 22px;max-width:13ch}
.skill-copy>p{color:var(--ink-2);max-width:48ch}
.skill-list{list-style:none;margin:30px 0 0;display:grid;gap:12px;max-width:48ch}
.skill-list li{position:relative;padding-left:30px;color:var(--ink)}
.skill-list li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border:solid var(--accent);border-width:0 0 2px 2px;transform:translateY(-35%) rotate(-45deg)}
.skill-note{font-size:14px;color:var(--ink-3);margin-top:16px}
.skill-art{display:grid;place-items:center;padding:20px 0}
.floppy{width:min(100%,360px);height:auto;overflow:visible;transform:rotate(-7deg);
  filter:drop-shadow(0 34px 34px rgba(20,20,19,.28)) drop-shadow(0 6px 8px rgba(20,20,19,.18));animation:floppyFloat 6s ease-in-out infinite}
.floppy-shutter{transition:transform .7s var(--ease)}
.skill-art:hover .floppy-shutter{transform:translateX(-34px)}
.fl-tag{font:500 11px var(--mono);letter-spacing:.08em;fill:#FAF9F5}
.fl-title{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);font-size:calc(34px * var(--ds) + 4px);fill:#141413}
.fl-accent{fill:#D97757}
.fl-note{font:500 11px var(--mono);letter-spacing:.04em;fill:#8F8D86}
@keyframes floppyFloat{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-5.5deg) translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.floppy{animation:none}.floppy-shutter{transition:none}}
@media (max-width:820px){
  .skill{padding:84px 0 10px}
  .skill .wrap{grid-template-columns:1fr;gap:10px}
  .skill-art{order:-1;padding:0}
  .floppy{width:min(48%,170px)}
  .skill h2{margin:12px 0 0}
  .skill-lede,.sf-note{display:none}
  .skill-form{margin-top:20px}
  .skill-form .sf-submit{justify-self:stretch;justify-content:center;width:100%}
  .skill-list{margin-top:24px;gap:8px;font-size:15px}
}

@media (max-width:820px){
  .offers{grid-template-columns:1fr}
  .doe{grid-template-columns:1fr}
  .doe li,.doe li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .nav-meta .label{display:none}
  .offer{padding:28px 24px}
  .logo{padding:0 28px}
  .logo img{height:28px}
}
@media (prefers-reduced-motion:reduce){
  .marquee ul{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* shared section layout */
.logos{padding:30px 0 40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.logos-label{text-align:center;margin-bottom:26px}
.what{padding:120px 0 40px}
.sec-head{margin-bottom:36px}
.sec-head h2{font-size:calc(clamp(38px,4.6vw,60px) * var(--ds));margin-top:14px}
.method{padding:110px 0 30px}
.method-head{display:grid;grid-template-columns:1.2fr .8fr;gap:20px 56px;align-items:end;margin-bottom:44px}
.method-head .label{grid-column:1/-1}
.method-head h2{font-size:calc(clamp(38px,4.6vw,60px) * var(--ds))}
.method-head p{color:var(--ink-2);max-width:40ch}
@media (max-width:820px){.what{padding-top:84px}.method{padding-top:80px}.method-head{grid-template-columns:1fr}.close{padding:90px 0 80px}}
/* square marks read small at strip height */
.logo img[src*="revo"],.logo img[src*="clients-connect"]{height:46px}
.logo img[src*="masterpiece"]{height:38px}
@media (max-width:820px){.logo img[src*="revo"],.logo img[src*="clients-connect"]{height:38px}}

/* ---- round 3 components ---- */
:root{--blue:#1F6FEB}
.avatar{border-radius:50%;object-fit:cover;background:var(--paper-3);flex:none}

/* headline: three fixed lines, the rolling word always alone on the last line */
.headline{font-size:calc(clamp(40px,12.6vw,112px) * var(--ds));line-height:1.02}
.headline .ln{display:block;white-space:nowrap}

/* Upwork-style badges */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.badge{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);color:var(--blue);text-decoration:none}
.badge svg{width:22px;height:22px;flex:none}
.badge small{font-weight:500;font-size:inherit;color:var(--ink-2)}
.rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px;color:var(--ink-2)}
.hero > .wrap > .rating{display:flex;justify-content:center}
.rating .stars{color:var(--accent);letter-spacing:.1em;font-size:13px}
.rating b{color:var(--ink);font-weight:600}
.sep{width:1px;height:18px;background:var(--rule)}

/* reviews */
.reviews{padding:110px 0 20px}
.reviews-top{padding-top:70px}
.reviews-head{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap;margin-bottom:36px}
.reviews-head h2{font-size:calc(clamp(36px,4.6vw,58px) * var(--ds))}
.review{width:380px;margin-right:18px;background:#fff;border-radius:20px;padding:24px 26px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 1px 0 var(--rule),0 18px 36px -28px rgba(20,20,19,.3)}
.review-top{display:flex;align-items:center;gap:8px;font-size:14px}
.review-top .stars{color:var(--accent);letter-spacing:.08em}
.review-top b{font-weight:600}
.review-top time{margin-left:auto;color:var(--ink-3);font-size:13px}
.review blockquote{font-size:16.5px;line-height:1.55;color:var(--ink)}
.review-by{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--rule)}
.review-by .review-av{width:36px;height:36px;border-radius:50%;background:var(--paper-2);color:var(--ink-2);display:grid;place-items:center;font:600 14px/1 var(--sans);flex:none}
.review-by b{display:block;font:600 14px/1.3 var(--sans)}
.review-by span:not(.review-av){display:block;font-size:12.5px;color:var(--ink-3);line-height:1.35}
.review-src{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--blue);text-decoration:none}
.review-src svg{width:14px;height:14px}
[data-reviews]{align-items:flex-start;padding:10px 0 30px}
.reviews .marquee.rv-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.reviews .marquee.rv-scroll::-webkit-scrollbar{display:none}
.reviews .marquee.rv-scroll ul{animation:none}
.review blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.review blockquote.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.review-more{align-self:flex-start;border:0;background:none;padding:0;margin-top:-8px;font:600 13px/1 var(--sans);color:var(--accent);cursor:pointer}
.reviews-nav{display:flex;align-items:center;gap:10px}
.reviews-nav .link{margin-right:8px}
.rv-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--ink);font:500 18px/1 var(--sans);cursor:pointer;transition:border-color .2s,color .2s}
.rv-arrow:hover{border-color:var(--accent);color:var(--accent)}

/* build: live demo + results */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;background:var(--paper-2);border-radius:24px;padding:28px}
.demo-frame{position:relative;border-radius:16px;overflow:hidden;background:#fff;aspect-ratio:1;display:grid;place-items:center}
.demo-frame img{width:100%;height:100%;object-fit:contain}
.demo-fallback{padding:24px;text-align:center;color:var(--ink-3);font-size:14px}
.demo-copy{display:flex;flex-direction:column;gap:16px;padding-right:20px}
.demo-copy h3{font-size:calc(clamp(28px,3vw,40px) * var(--ds) * 1.1);line-height:1.1}
.demo-copy p{color:var(--ink-2)}
.demo-field{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.demo-field span{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.demo-field input{font:500 20px/1.2 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;width:100%}
.demo-field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.results{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.results li{background:var(--paper-2);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px}
.results b{font-size:calc(34px * var(--ds) * 1.1);color:var(--accent);line-height:1}
.results span{font-size:14.5px;color:var(--ink-2)}
.teach{padding:18px 0 0}
/* WhatsApp screenshots from clients (Enej's, resize/compress only) */
.proof-chats{padding:110px 0 0}
.chats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:center}
.chats figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule),0 24px 48px -32px rgba(20,20,19,.35)}
.chats img{width:100%;height:auto}
@media (max-width:820px){.proof-chats{padding-top:84px}.chats{grid-template-columns:1fr;max-width:460px;margin:0 auto}.chats .chat-wide{display:none}}
.teach-card{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;align-items:center}
.teach-card h3{margin-top:12px}
.teach-macro{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);line-height:1.3;
  font-size:calc(clamp(18px,1.8vw,24px) * var(--ds) * 1.1);color:var(--ink-2);margin-top:18px;padding-left:16px;border-left:2px solid var(--accent)}
.teach-macro em{font-style:normal;color:var(--accent)}
.teach-card ul{margin-top:16px}

/* about */
.about{padding:110px 0 0}
.about-grid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start}
.about .avatar{width:200px;height:200px}
.about-text{font-size:calc(clamp(24px,2.7vw,36px) * var(--ds) * 1.1);line-height:1.25;margin:18px 0 22px}
.about-macro{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);line-height:1.3;
  font-size:calc(clamp(18px,1.8vw,24px) * var(--ds) * 1.1);color:var(--ink-2);margin:0 0 24px;padding-left:16px;border-left:2px solid var(--accent)}
.about-macro em{font-style:normal;color:var(--ink)}
.sig{font-size:14px;color:var(--ink-2)}
.sig b{display:block;font:600 17px/1.3 var(--sans);color:var(--ink)}
.more{margin-top:26px;border-top:1px solid var(--rule)}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:18px 0;font:500 15px/1 var(--sans)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:20px;color:var(--accent);transition:transform .25s var(--ease)}
.more[open] summary::after{transform:rotate(45deg)}
.more-body{color:var(--ink-2);max-width:64ch;display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.more-body ul{display:flex;flex-direction:column;gap:8px;padding-left:20px}
.more-body li::marker{color:var(--accent)}

@media (max-width:980px){.results{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .demo{grid-template-columns:1fr;gap:24px;padding:16px}
  .demo-copy{padding:0 6px 8px}
  .teach-card{grid-template-columns:1fr}
  .review{width:300px}
  .about-grid{grid-template-columns:1fr;gap:28px}
  .about .avatar{width:140px;height:140px}
}

/* round 5: dark DOE band; the before/after animation lives in doe/variant-*.js + .css */
.dark{--paper:#141413;--paper-2:#1E1E1C;--paper-3:#2A2A27;--ink:#FAF9F5;--ink-2:#B9B6AD;--ink-3:#8F8D86;--rule:#33322E;
  background:var(--paper);color:var(--ink)}
.method.dark{margin-top:110px;padding:0 0 100px}
.method.dark .method-head{margin-top:110px}
/* AI doubts film: the stage pins while the questions come in and get struck out. The fix line
   ("Use the DOE framework") arrives at the very end of the pin, so from the moment it shows the
   page scrolls on normally. initDoubts() drives it from scroll position. */
.doubts{height:135vh;height:135svh}
.doubts-stage{position:sticky;top:0;height:100vh;height:100svh;padding-top:17vh;box-sizing:border-box;overflow:hidden}
.doubts-list{list-style:none;display:flex;flex-direction:column;gap:.18em;font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);
  font-size:calc(clamp(32px,6.2vw,80px) * var(--ds));line-height:1.08;transition:opacity .6s var(--ease)}
.doubts-list li{position:relative;width:max-content;max-width:100%;opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s}
.doubts-list li.on{opacity:1;transform:none}
.doubts-list li::after{content:"";position:absolute;left:-.1em;right:-.1em;top:54%;height:.07em;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.doubts-fix{position:absolute;left:0;right:0;bottom:12vh;width:var(--wrap);margin:0 auto;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.doubts-fix .display{font-size:calc(clamp(38px,6.2vw,80px) * var(--ds));margin-top:12px}
.doubts-forget{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);line-height:1.05;
  font-size:calc(clamp(26px,3.6vw,46px) * var(--ds));color:var(--ink-2)}
.doubts.solved .doubts-list li{color:var(--ink-3)}
.doubts.solved .doubts-list li::after{transform:scaleX(1)}
.doubts.solved .doubts-list li:nth-child(2)::after{transition-delay:.06s}
.doubts.solved .doubts-list li:nth-child(3)::after{transition-delay:.12s}
.doubts.solved .doubts-list li:nth-child(4)::after{transition-delay:.18s}
.doubts.solved .doubts-list li:nth-child(5)::after{transition-delay:.24s}
.doubts.fixed .doubts-list{opacity:.55}
.doubts.fixed .doubts-fix{opacity:1;transform:none}
.doubts.static{height:auto}
.doubts.static .doubts-stage{position:static;height:auto;padding:110px 0 40px}
.doubts.static .doubts-fix{position:static;width:auto;margin-top:40px}
.method.dark .doe{margin-bottom:64px}
.doe-host{margin-bottom:0}
.doe-cta{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:56px;padding-top:44px;border-top:1px solid var(--rule)}
.doe-cta h2{font-size:calc(clamp(34px,4.4vw,58px) * var(--ds));max-width:16ch}
.btn-light{background:var(--ink);color:var(--paper)}
.btn-light:hover{background:var(--accent);color:#fff}
.method.dark .doe{border-top-color:var(--rule)}
@media (max-width:820px){.method.dark{margin-top:84px;padding:0 0 70px}.method.dark .doe{margin-bottom:44px}.doe-cta{margin-top:40px;padding-top:32px}.doubts-stage{padding-top:19vh}.doubts-fix{bottom:auto;top:45vh;top:45svh;width:calc(100% - 32px)}.doubts{margin-bottom:-34svh}.doubts.static{margin-bottom:0}.doubts.static .doubts-stage{padding:72px 0 28px}}

/* philosophy: the best part is no part */
.philo{padding:110px 0 10px}
.philo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;align-items:start}
.philo-quote blockquote{font-size:calc(clamp(44px,6.4vw,84px) * var(--ds));line-height:1.02}
.philo-quote{position:sticky;top:140px}
.philo-quote figcaption{margin-top:22px}
.philo-lead{font-size:19px;line-height:1.55}
.philo-list{list-style:none;margin:26px 0;border-top:1px solid var(--rule)}
.philo-list li{padding:13px 0 13px 30px;border-bottom:1px solid var(--rule);position:relative;font-weight:500}
.philo-list li::before{content:"";position:absolute;left:4px;top:50%;width:12px;height:2px;background:var(--accent)}
.philo-note{color:var(--ink-2)}
@media (max-width:820px){.philo{padding-top:84px}.philo .wrap{grid-template-columns:1fr}.philo-quote{position:static}}

/* what you don't get / what you get */
.nopart{padding:110px 0 10px}
.nopart h2{font-size:calc(clamp(40px,5.4vw,72px) * var(--ds));margin:18px 0 40px;max-width:16ch}
.nopart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.nopart-card{border-radius:22px;padding:30px 32px 32px;border:1px solid var(--rule)}
.nopart-card ul{list-style:none;margin-top:22px}
.nopart-no{background:var(--paper-2)}
.nopart-no li{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);line-height:1.15;
  font-size:calc(clamp(24px,2.6vw,34px) * var(--ds));color:var(--ink-2);position:relative;width:max-content;max-width:100%;padding:7px 0}
.nopart-no li{padding-left:1.15em}
.nopart-no li::before{content:"";position:absolute;left:0;top:50%;width:.5em;height:.5em;transform:translateY(-50%);
  background:linear-gradient(45deg,transparent 43%,var(--accent) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--accent) 43% 57%,transparent 57%)}
.nopart-yes{background:var(--paper);color:var(--ink);border-color:var(--rule);display:flex;flex-direction:column}
.nopart-yes ul{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--rule)}
.nopart-yes li{position:relative;padding:17px 0 17px 34px;border-bottom:1px solid var(--rule);font-size:17px;font-weight:500;line-height:1.4}
.nopart-yes li::before{content:"";position:absolute;left:2px;top:24px;width:14px;height:8px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}
@media (max-width:820px){.nopart{padding-top:84px}.nopart-grid{grid-template-columns:1fr}.nopart-card{padding:24px 22px 26px;border-radius:18px}}

/* round 11: phone pass */
@media (max-width:820px){
  :root{--wrap:min(1120px, calc(100% - 32px))}
  .what{padding-top:64px}
  .what .sec-head{display:none}
  .demo-copy{gap:12px}
  .demo-copy h3{font-size:calc(30px * var(--ds) * 1.1)}
  .results{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .results .r-wide{display:none}
  .results li{padding:16px 14px;gap:8px;border-radius:16px}
  .results b{font-size:calc(30px * var(--ds) * 1.1)}
  .results span{font-size:13px;line-height:1.4}
  .reviews{padding-top:72px}
  .reviews-head{margin-bottom:22px}
  .rv-arrow{width:40px;height:40px}
  .review{width:min(300px,82vw);padding:20px}
  .method.dark .wrap{display:flex;flex-direction:column}
  .method.dark .doe-host{order:1}
  .method.dark .doe{order:2;margin:36px 0 0}
  .method.dark .doe-cta{order:3}
  .method.dark .doe li,.method.dark .doe li+li{padding:16px 0}
  .doe-vA .va-panel{padding:14px 8px 16px;gap:10px}
  .doe-vA .va-head,.doe-vA .va-cap{padding:0 8px}
  .method.dark .wrap{width:calc(100% - 20px)}
  .method.dark .doubts .wrap{width:calc(100% - 32px)}
  .method.dark .doe,.method.dark .doe-cta{padding-left:6px;padding-right:6px}
  .method.dark .doe-cta{border-top:0;padding-top:8px}
}

/* free skill form (inline in #skill and in the skill pop-up) */
.skill-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin-top:26px}
.skill-form input::placeholder{color:var(--ink-3)}
.skill-form input{font:16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:12px;padding:13px 14px;width:100%}
.skill-form input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.sf-err{grid-column:1/-1;font-size:14px;color:#B4442A}
.sf-submit{grid-column:1/-1;justify-self:start;margin-top:6px}
.sf-submit:disabled{opacity:.6;cursor:wait}
.sf-note{grid-column:1/-1;font-size:13px;color:var(--ink-3)}
.sf-done{display:grid;gap:14px;justify-items:start;max-width:520px;padding:22px 24px;background:var(--paper-2);border-radius:18px;margin-top:26px}
.sf-done h3{font-size:calc(34px * var(--ds))}
.sf-soon{color:var(--ink-2)}
.sf-next{display:grid;gap:10px;justify-items:start;padding-top:14px;border-top:1px solid var(--rule);width:100%}
.sf-next p{color:var(--ink-2);font-size:15px}
.sf-done>div{display:grid;gap:12px;justify-items:start;width:100%}
.iq-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.iq-again{font-size:14px;color:var(--ink-2)}
.iq-help{gap:0!important;border-top:1px solid var(--rule);padding-top:4px}
.iq-help details{width:100%;border-bottom:1px solid var(--rule)}
.iq-help summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font:500 15px/1.3 var(--sans)}
.iq-help summary::-webkit-details-marker{display:none}
.iq-help summary::after{content:"+";font-size:20px;color:var(--accent);transition:transform .25s var(--ease)}
.iq-help details[open] summary::after{transform:rotate(45deg)}
.iq-help details p{color:var(--ink-2);font-size:15px;padding:0 0 12px}
.iq-help a{color:var(--ink)}
.iq-prompt{font:13px/1.5 var(--mono);background:#fff;border:1px solid var(--rule);border-radius:10px;padding:10px 12px!important;color:var(--ink)!important}
.iq-copy{margin:0 0 12px;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:8px 14px;font:500 13px/1 var(--sans);cursor:pointer}
.sf-done .iq-phone,.sf-done.is-phone .iq-desk,.sf-done.is-phone .iq-desk-only{display:none}
.sf-done.is-phone .iq-phone{display:grid}
@media (max-width:720px){
  .skill-form{grid-template-columns:1fr}
}