/* Business tutoring sites (probusinesstutors.com, prombatutors.com): shared structure for the public pages.
   Colours, typefaces and decoration come from each site's own sheet through the variables below, so the two sites
   share tested layout, spacing and mobile behaviour and differ in everything a visitor sees.
   Variables each site sheet must define: --p --ph --pl --dk --bg --tint --bd --rule --ink --text --muted --link --on-p
                                          --head --sans --mono --radius                                              */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ph)}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.15;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
:focus-visible{outline:3px solid var(--p);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--dk);color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:780px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:12px 24px;font:600 1rem/1.2 var(--sans);text-decoration:none;border:1.5px solid transparent;border-radius:var(--radius);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--p);color:var(--on-p)}
.btn-primary:hover{background:var(--ph);color:var(--on-p)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-line:hover{border-color:var(--p);color:var(--link)}
.btn-lg{min-height:54px;padding:14px 30px;font-size:1.05rem}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:200}
.hdr-i{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.wm{font-family:var(--head);font-weight:700;font-size:1.28rem;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.menu{display:flex;align-items:center;gap:2px;flex:1}
.menu a{padding:9px 12px;text-decoration:none;font-size:.94rem;font-weight:500;white-space:nowrap}
.menu .menu-end{margin-left:auto}
.burger{display:none;margin-left:auto;width:48px;height:48px;background:none;border:0;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:.2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:30px}
.burger.open span:nth-child(1){top:23px;transform:rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){top:23px;transform:rotate(-45deg)}
@media(max-width:900px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  .menu.open{display:flex}
  .menu a{padding:14px 4px;font-size:1.02rem;white-space:normal}
  .menu .menu-end{margin-left:0}
  .menu .btn{margin-top:10px}
}

/* ── Type and sections ── */
.eyebrow{font:700 .76rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin:0 0 14px}
.h1{font-size:clamp(2rem,5.2vw,3.35rem);letter-spacing:-.02em}
.h2{font-size:clamp(1.55rem,3.4vw,2.25rem);letter-spacing:-.015em}
.lede{font-size:1.12rem;line-height:1.7;color:var(--muted);max-width:60ch}
.sec{padding:clamp(48px,7vw,88px) 0}
.sec-alt{background:var(--tint);border-block:1px solid var(--bd)}
.sec-head{max-width:62ch;margin-bottom:clamp(24px,4vw,40px)}
.sec-head .lede{margin-bottom:0}

/* ── Hero ── */
.hero{padding:clamp(40px,7vw,84px) 0 clamp(44px,7vw,88px)}
.hero-grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero .lede{margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:26px}
.hero-points{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.96rem;color:var(--muted)}
.hero-points li{padding-left:26px;position:relative}
.hero-points li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2.5px solid var(--p);border-bottom:2.5px solid var(--p);transform:rotate(-45deg) translateY(-3px)}

/* ── Index rows (title link + explicit read-more, never a whole-card link) ── */
.rows{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:760px){.rows.cols-2{grid-template-columns:1fr 1fr;column-gap:48px}}
.row{padding:22px 0;border-bottom:1px solid var(--rule)}
.row-t{font-size:1.18rem;margin:0 0 6px}
.row-t a{color:var(--ink);text-decoration:none}
.row-t a:hover{color:var(--link);text-decoration:underline}
.row-d{color:var(--muted);margin:0 0 10px;font-size:.98rem}
.row-more{font-weight:600;font-size:.92rem}

/* ── Steps, ticks, FAQ, calls to action ── */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:clamp(20px,3vw,32px);counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{counter-increment:s;position:relative;padding-top:50px}
.step::before{content:counter(s);position:absolute;top:0;left:0;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font:700 1rem var(--sans);background:var(--p);color:var(--on-p)}
.step-t{font-size:1.15rem;margin-bottom:6px}
.step-d{color:var(--muted);margin:0;font-size:.98rem}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:"";position:absolute;left:3px;top:.45em;width:14px;height:8px;border-left:3px solid var(--p);border-bottom:3px solid var(--p);transform:rotate(-45deg)}
.ticks strong{color:var(--ink);display:block}
.ticks span{color:var(--muted);font-size:.97rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font:600 1.06rem/1.4 var(--head);color:var(--ink);position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 1.6rem/1 var(--sans);color:var(--link)}
.faq details[open] summary::after{content:"\2212"}
.faq-a{padding:0 0 20px;color:var(--muted);max-width:68ch}
.faq-a p:last-child{margin:0}
.cta-band{background:var(--dk);color:#fff;padding:clamp(40px,6vw,64px) 0}
.cta-i{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-h{color:#fff;font-size:clamp(1.45rem,3vw,2rem);margin:0 0 6px}
.cta-p{margin:0;color:rgba(255,255,255,.78);max-width:56ch}
.cta-band .btn-primary{background:#fff;color:var(--dk)}
.cta-band .btn-primary:hover{background:var(--pl);color:var(--dk)}

/* ── Inner pages and articles ── */
.page-head{padding:clamp(32px,5vw,56px) 0 clamp(26px,4vw,40px);border-bottom:1px solid var(--bd)}
.page-head .lede{margin-bottom:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 18px;font-size:.86rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.crumbs a{color:var(--muted)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;padding:clamp(32px,5vw,56px) 0 clamp(48px,7vw,80px)}
@media(min-width:980px){.article-grid{grid-template-columns:250px minmax(0,1fr);gap:64px}}
.toc{font-size:.92rem}
@media(min-width:980px){.toc{position:sticky;top:90px;align-self:start;max-height:calc(100vh - 110px);overflow:auto}}
.toc-t{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--rule)}
.toc a{display:block;padding:7px 0 7px 14px;color:var(--muted);text-decoration:none;margin-left:-1px;border-left:2px solid transparent}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--p)}
@media(max-width:979px){.toc{border:1px solid var(--bd);padding:14px 16px;background:var(--tint)}.toc ol{border:0}.toc a{padding:8px 0}}
.prose{overflow-wrap:anywhere;max-width:72ch;font-size:1.06rem;line-height:1.78;color:var(--text)}
.prose h2{font-size:clamp(1.45rem,2.8vw,1.85rem);margin:2.1em 0 .6em;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:1.7em 0 .5em}
.prose li{margin-bottom:.45em}
.prose strong{color:var(--ink)}
.prose .tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.prose .tbl th,.prose .tbl td{text-align:left;padding:11px 14px;border:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
.prose .tbl thead th{background:var(--tint);color:var(--ink);font-weight:700}
.prose .tbl tbody th{font-weight:600;color:var(--ink);background:transparent}
.callout{border-left:4px solid var(--p);background:var(--tint);padding:16px 20px;margin:1.6em 0;border-radius:0 var(--radius) var(--radius) 0}
.callout p:last-child{margin:0}
.callout-t{font:700 .76rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin-bottom:8px}
.inline-cta{margin:2.2em 0;padding:22px 24px;border:1px solid var(--bd);background:var(--tint);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-radius:var(--radius)}
.inline-cta p{margin:0;font-weight:600;color:var(--ink);max-width:44ch}
.related{margin-top:3em;padding-top:1.6em;border-top:1px solid var(--rule)}
.related h2{font-size:1.2rem}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.related a{font-weight:600}

/* ── Footer ── */
.site-footer{padding:clamp(40px,6vw,64px) 0 28px}
.ft-grid{display:grid;gap:32px}
@media(min-width:760px){.ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ft-brand p{max-width:34ch;margin:12px 0 0;font-size:.95rem}
.ft-t{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ft-col a{display:block;padding:6px 0;text-decoration:none;font-size:.95rem}
.ft-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:36px;padding-top:20px;font-size:.85rem}

/* ── Thumb-reach quote bar on phones (hidden on desktop; skipped on order, checkout, dashboard and sign-in) ── */
.biz-dock{display:none}
@media(max-width:768px){
  body.has-dock{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .biz-dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:250;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--bd);transition:transform .25s}
  .biz-dock.hidden{transform:translateY(110%)}
  .biz-dock a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:var(--p);color:var(--on-p);font-weight:600;text-decoration:none;border-radius:var(--radius)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── Shared page parts: service pages, levels, chips, text pages ── */
.h3{font-size:1.25rem}
.split{display:grid;gap:clamp(28px,5vw,64px)}
@media(min-width:900px){.split{grid-template-columns:.9fr 1.1fr;align-items:start}}
.more-link{margin:28px 0 0}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 16px;border:1px solid var(--rule);background:var(--bg);font-size:.96rem}
.levels{display:grid;gap:20px}
@media(min-width:820px){.levels{grid-template-columns:repeat(3,1fr)}}
.level{padding:24px;border:1px solid var(--rule);background:var(--bg)}
.level h3{margin-bottom:2px;font-size:1.3rem}
.lvl-tag{font:600 .82rem/1.3 var(--sans);letter-spacing:.06em;color:var(--link);margin-bottom:10px}
.level p:last-child{margin:0;color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;padding-block:clamp(32px,5vw,56px) clamp(40px,6vw,72px)}
@media(min-width:980px){.svc-grid{grid-template-columns:minmax(0,1fr) 320px;gap:64px}}
.svc-main{max-width:none}
.svc-main>*{max-width:72ch}
.svc-main .steps{max-width:none}
.svc-aside{align-self:start}
@media(min-width:980px){.svc-aside{position:sticky;top:96px}}
.quote-box{border:1px solid var(--rule);padding:24px;background:var(--tint)}
.qb-t{font-size:1.25rem}
.qb-p{color:var(--muted);font-size:.97rem}
.qb-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;font-size:.92rem;color:var(--muted)}
.qb-list li{padding-left:22px;position:relative}
.qb-list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--p);border-bottom:2px solid var(--p);transform:rotate(-45deg)}
.rel-grid{display:grid;gap:36px}
@media(min-width:900px){.rel-grid{grid-template-columns:1fr 1fr;gap:56px}}
.wrap-narrow-head{max-width:900px;margin-inline:auto}
.text-body{padding-block:clamp(32px,5vw,56px) clamp(40px,6vw,72px)}
@media(max-width:560px){.hero-actions .btn{flex:1 1 100%}}

/* ── Worked examples inside guides ── */
.example{border:1px dashed var(--rule);background:var(--bg);padding:16px 20px;margin:1.5em 0;border-radius:var(--radius)}
.example-t{font:700 .76rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin-bottom:10px}
.example p:last-child,.example ul:last-child,.example ol:last-child{margin-bottom:0}
.prose pre{background:var(--tint);border:1px solid var(--bd);padding:14px 16px;overflow-x:auto;font:.9rem/1.6 var(--mono);margin:1.2em 0}
.wm-img{display:block;height:28px;width:auto;max-width:100%}
.site-footer .wm-img{height:34px}