/* BizMentor base + components v1. Uses tokens.css only. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:var(--t4);line-height:var(--lh4);color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm)}
.dark :focus-visible{outline-color:var(--on-dark)}

/* type roles */
.t1,.t2,.t3{text-wrap:balance}
.t1{font-size:var(--t1);line-height:var(--lh1);font-weight:500;color:var(--ink);letter-spacing:-.015em}
.t2{font-size:var(--t2);line-height:var(--lh2);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.t3{font-size:var(--t3);line-height:var(--lh3);font-weight:500;color:var(--ink)}
.t4{font-size:var(--t4);line-height:var(--lh4);font-weight:400;color:var(--ink-2)}
.t5{font-size:var(--t5);line-height:var(--lh5);font-weight:400;color:var(--ink-soft)}
.eyebrow{display:block;font-size:var(--te);line-height:1.3;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk);margin-bottom:var(--s3)}
.accent{color:var(--green-dk)}
.stars{color:var(--trustpilot);letter-spacing:2px;font-size:var(--t5)}
.key{color:var(--ink);font-weight:500}
.dark{background:var(--ink);color:var(--on-dark-2)}
.dark .t1,.dark .t2,.dark .t3,.dark .key{color:var(--on-dark)}
.dark .t4,.dark .t5{color:var(--on-dark-2)}
.dark .eyebrow{color:var(--green)}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--section) 0}
.sec.alt{background:var(--bg-2)}
.head{max-width:640px;margin:0 auto var(--s6);text-align:center}
.head .t4{margin-top:var(--s3)}
.head.left{margin-left:0;text-align:left}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;padding:0 24px;border-radius:var(--r-pill);font:500 var(--t4)/1.2 var(--font);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color var(--med) var(--ease-out),transform var(--fast) var(--ease-out),color var(--med) var(--ease-out),box-shadow var(--med) var(--ease-out);-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green);color:var(--btn-text)}
.btn-primary:hover{background:var(--green-hover)}
/* CTA hover like Craftex: text turns white, button lifts 2px with a soft shadow */
@media (hover:hover) and (pointer:fine){.btn-primary:hover{color:var(--on-dark);transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(28,28,28,.45)}.btn-primary:active{transform:translateY(0) scale(.97);box-shadow:none}.dark .btn-primary:hover{box-shadow:0 8px 18px -8px rgba(0,0,0,.8)}}
.btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--on-dark)}
.dark .btn-secondary{border-color:var(--on-dark);color:var(--on-dark)}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--ink);text-decoration:none;font-size:var(--t4)}
.link::after{content:"›";margin-left:6px;font-size:1.15em}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.dark .link{color:var(--on-dark)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;margin-top:var(--s5)}
.center .actions,.head .actions{justify-content:center}

/* cards */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.alt .card{border-color:transparent}
.card.dark{background:var(--ink);border-color:var(--ink)}
.media{border-radius:var(--r-lg);overflow:hidden;isolation:isolate;background:var(--bg-2)}
.media img{width:100%;height:100%;object-fit:cover}

/* swipe row (native scroll-snap, no autoplay) */
.row{display:grid;grid-auto-flow:column;grid-auto-columns:var(--col,78%);gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) var(--s2);margin:0 calc(var(--gutter)*-1);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--gutter)}
.row::-webkit-scrollbar{display:none}
.row>*{scroll-snap-align:start}
.row-nav{display:none;justify-content:flex-end;gap:var(--s2);margin-top:var(--s4)}
.arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:var(--t3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.arrow:disabled{opacity:.3;cursor:default}
@media (min-width:768px){.row{margin:0;padding:0 0 var(--s2);scroll-padding-inline:0}.row-nav{display:flex}}

/* checks */
.checks li{position:relative;padding-left:30px;margin-top:var(--s3)}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' stroke='%23212121' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* reveal (respects reduced motion) */
/* no scroll reveal: apple.com home shows content instantly — nothing fades or slides in on scroll (measured 16 Oct 2026) */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media (max-width:767px){.actions .btn-primary{width:100%}}
.row-nav[hidden]{display:none}

/* ===== bands: one screen = one idea = one colour (full width, like Craftex) ===== */
.band{position:relative}
.band.grey{background:var(--bg-2)}
.band.dark{background:var(--ink)}
.band.grey .card{background:var(--bg);border-color:transparent}
.card.dark,.band.grey .card.dark{background:var(--ink);border-color:var(--ink)}
.dark .card{background:var(--ink-3);border-color:transparent;color:var(--on-dark-2)}
.dark .arrow{border-color:var(--on-dark);color:var(--on-dark)}
.dark .tp{color:var(--on-dark)}