/* Shared help-article styles (referenced by every /help/<slug>.html page) */

/* =====================================================================
   VIDEO TUTORIAL SLOT  —  how to turn one on (founder: read this!)
   ---------------------------------------------------------------------
   Every article has a <figure class="video"> block near the top.
   By default it shows a tasteful "coming soon" poster — nothing breaks.

   To enable a real video on a page:
     1. Record a quick Loom (or upload to YouTube unlisted).
     2. Copy the EMBED url:
          Loom    →  Share ▸ Embed ▸ copy the src="https://www.loom.com/embed/XXXX" link
          YouTube →  Share ▸ Embed ▸ copy the src="https://www.youtube.com/embed/XXXX" link
     3. In that page's HTML, find the line:
          <figure class="video" data-video="">
        and paste the embed url between the quotes:
          <figure class="video" data-video="https://www.loom.com/embed/XXXX">
     4. Save + deploy. The poster is replaced by the player automatically.
   No other edits needed. (See also /help/VIDEOS.md for the full walkthrough.)
   ===================================================================== */
.video{margin:0 0 28px;}
.video .video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--ink);}
.video .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video figcaption{margin-top:9px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:7px;}

/* "coming soon" poster — shown whenever no embed url has been pasted */
.video-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
  background:linear-gradient(150deg,var(--forest),#26402e);color:var(--cream);}
.video-soon .emoji{font-size:30px;line-height:1;}
.video-soon .t{font-family:'Newsreader',serif;font-weight:600;font-size:18px;color:#fff;}
.video-soon .s{font-size:13px;color:rgba(245,240,229,.78);max-width:34ch;margin:0;}
.video-soon::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);
  background:rgba(220,233,76,.16);border:2px solid var(--lime);opacity:.55;}
@media(max-width:680px){ .video-soon .t{font-size:16px;} }

:root{
  --terra:#C4603A; --terra-dk:#A04826;
  --forest:#2D4A35;
  --cream:#F5F0E5; --cream-dk:#E8E2D3;
  --lime:#DCE94C;
  --ink:#1C1612; --ink-soft:#4A3F36; --muted:#6B5E50;
  --bg:#F5F0E5; --surface:#ffffff; --border:rgba(28,22,18,0.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;}

.topbar{background:var(--forest);color:#fff;padding:0 32px;height:62px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.brand-mark{width:34px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark svg{width:100%;height:100%;display:block;}
.brand-wordmark{display:flex;align-items:baseline;gap:0;line-height:1;}
.brand-suddenly{font-family:'Newsreader',serif;font-weight:600;font-size:1.05rem;letter-spacing:-0.02em;color:#fff;}
.brand-sorted{font-family:'Newsreader',serif;font-weight:600;font-size:1.05rem;letter-spacing:-0.02em;color:var(--terra);margin-left:0.28em;}
.topbar a.back{color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;font-weight:500;}
.topbar a.back:hover{color:#fff;}
/* Topbar "Search help" link (injected by _help-article.js) */
.topbar-actions{display:flex;align-items:center;gap:18px;}
.ss-search-link{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;font-weight:500;}
.ss-search-link:hover,.ss-search-link:focus-visible{color:#fff;}
.ss-search-link svg{opacity:.9;}
@media(max-width:520px){ .ss-search-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} }

/* ---- Auto in-page table of contents (built by _help-article.js) ---- */
.ss-toc{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:0 0 28px;}
.ss-toc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;padding:0;cursor:default;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.ss-toc-chev{display:none;color:var(--muted);transition:transform .2s ease;}
.ss-toc-list{list-style:none;margin:12px 0 0;padding:0;}
.ss-toc-list li{margin:0;}
.ss-toc-list a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--cream-dk);color:var(--ink-soft);text-decoration:none;font-size:15px;line-height:1.35;transition:color .15s ease,border-color .15s ease;}
.ss-toc-list a:hover{color:var(--terra-dk);border-left-color:var(--terra);}
.ss-toc-list a.active{color:var(--terra-dk);border-left-color:var(--terra);font-weight:600;}

/* 900–1079px: a compact boxed "On this page" card at the top of the article (no room
   for a side rail yet). The list stays expanded (collapse rules are <900px only). */
@media(min-width:900px){
  .ss-toc{width:fit-content;max-width:340px;margin:0 0 28px;}
}
/* ≥1080px: a real two-column layout — the article in a centred column with a STICKY
   table-of-contents rail to its left that stays in view as you scroll. (JS wraps the
   body in .toc-body and the nav in .toc-rail, and adds .has-toc to <main>.) */
@media(min-width:1080px){
  main.has-toc{display:grid;grid-template-columns:200px minmax(0,760px);gap:44px;max-width:1004px;align-items:start;}
  main.has-toc .toc-rail{position:sticky;top:84px;align-self:start;}
  main.has-toc .toc-body{min-width:0;}
  /* In the rail the TOC is a clean borderless sidebar, not a boxed card. */
  main.has-toc .ss-toc{width:auto;max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none;}
}
/* Mobile/tablet: collapsible card */
@media(max-width:899px){
  .ss-toc-head{cursor:pointer;}
  .ss-toc-chev{display:block;}
  .ss-toc .ss-toc-list{display:none;}
  .ss-toc.open .ss-toc-list{display:block;}
  .ss-toc.open .ss-toc-chev{transform:rotate(180deg);}
}

/* ---- "Updated" + "Was this helpful?" (injected) ---- */
.ss-article-foot{margin-top:36px;padding-top:22px;border-top:1px solid var(--border);}
.ss-helpful{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ss-helpful-q{font-size:15px;font-weight:600;color:var(--ink-soft);}
.ss-helpful-btn{font-size:18px;line-height:1;background:#fff;border:1px solid var(--border);border-radius:100px;width:40px;height:34px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease;}
.ss-helpful-btn:hover{border-color:var(--terra);transform:translateY(-1px);}
.ss-helpful-btn.chosen{background:#f3f6f3;border-color:var(--forest);}
.ss-helpful-btn:focus-visible{outline:2px solid var(--terra);outline-offset:2px;}
.ss-updated{margin:12px 0 0;font-size:13px;color:var(--muted);}

.hero{background:linear-gradient(180deg,var(--forest),#26402e);color:var(--cream);padding:46px 32px 38px;}
.hero-inner{max-width:760px;margin:0 auto;}
.crumb{font-size:13px;color:rgba(245,240,229,.7);margin-bottom:14px;}
.crumb a{color:var(--lime);text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);}
.hero h1{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(30px,4.6vw,46px);line-height:1.06;letter-spacing:-.02em;margin:10px 0 14px;color:#fff;}
.hero p{font-size:18px;color:rgba(245,240,229,.85);max-width:60ch;margin:0;}

main{max-width:760px;margin:0 auto;padding:34px 32px 30px;}
main h2{font-family:'Newsreader',serif;font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.015em;margin:34px 0 8px;scroll-margin-top:74px;}
main h2:first-of-type{margin-top:0;}
main h3{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:18px;margin:24px 0 6px;}
main p{margin:0 0 16px;}
main a{color:var(--terra-dk);}
strong{font-weight:600;}
ul,ol{margin:0 0 16px;padding-left:22px;}
li{margin:7px 0;}

.lead{font-size:19px;color:var(--ink-soft);}

.callout{background:#fff;border:1px solid var(--border);border-left:4px solid var(--terra);border-radius:12px;padding:16px 20px;margin:20px 0;font-size:16px;}
.callout.green{border-left-color:var(--forest);background:#f3f6f3;}
.callout.amber{border-left-color:#C9962E;background:#fbf6ec;}
.callout .label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;}

.steps{counter-reset:s;margin:18px 0;}
.step{position:relative;padding:0 0 22px 52px;}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--forest);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Newsreader',serif;}
.step::after{content:"";position:absolute;left:16.5px;top:34px;bottom:0;width:1.5px;background:var(--cream-dk);}
.step:last-child::after{display:none;}
.step h3{margin:2px 0 4px;}
.step p{font-size:15.5px;color:var(--ink-soft);margin:0;}

ul.checks{list-style:none;padding:0;margin:16px 0;}
ul.checks li{position:relative;padding:9px 0 9px 32px;border-bottom:1px solid var(--cream-dk);font-size:16px;margin:0;}
ul.checks li:last-child{border-bottom:none;}
ul.checks li::before{content:"✓";position:absolute;left:4px;top:9px;color:var(--forest);font-weight:700;}
ul.checks li b{color:var(--ink);}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px;}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--cream-dk);vertical-align:top;}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
td code,p code{background:var(--cream);padding:1px 6px;border-radius:5px;font-size:13px;color:var(--terra-dk);}

pre.code{background:var(--ink);color:#f3ede1;border-radius:12px;padding:18px 20px;overflow:auto;font-size:13.5px;line-height:1.6;margin:16px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
pre.code .c{color:#9db38f;}

.soon{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#946a1e;background:rgba(201,150,46,.16);border-radius:5px;padding:2px 6px;vertical-align:middle;margin-left:6px;}

/* Screenshot figure — framed demo image with an optional caption. */
figure.shot{margin:22px 0;}
figure.shot img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 26px rgba(28,22,18,.10);}
figure.shot figcaption{margin-top:9px;font-size:13.5px;color:var(--muted);text-align:center;}
/* Sample-data disclaimer above the footer on any article with screenshots. */
.shot-note{max-width:680px;margin:36px auto 0;text-align:center;font-size:12.5px;color:var(--muted);opacity:.85;}
/* Tighter inline shot for narrow UI fragments (panels, single controls). */
figure.shot.narrow{max-width:460px;}
figure.shot.narrow img{box-shadow:0 6px 18px rgba(28,22,18,.10);}
/* Tall email/mobile mocks — centre at a sensible width and cap the height,
   cropping any empty footer padding from the top down (keeps aspect, no stretch). */
figure.shot.email{max-width:380px;margin-left:auto;margin-right:auto;}
figure.shot.email img{max-height:560px;object-fit:cover;object-position:top;box-shadow:0 6px 18px rgba(28,22,18,.10);}

/* Animated microsite preview — the same auto-scrolling one-page site used on the landing
   page (photo hero → services → gallery → reviews), in a browser frame. Scoped to .shot-site. */
figure.shot-site{margin:22px auto;max-width:316px;}
figure.shot-site figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center;}
.shot-site .site-mock{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(28,22,18,.12);border:1px solid var(--border);}
.shot-site .sm-chrome{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fbf9f4;border-bottom:1px solid var(--border);}
.shot-site .sm-dots{display:flex;gap:6px}.shot-site .sm-dots span{width:8px;height:8px;border-radius:50%;background:#E0D8C8}
.shot-site .sm-url{flex:1;background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px 11px;font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-site .sm-view{--smH:360px;position:relative;height:var(--smH);overflow:hidden;background:#fff}
.shot-site .sm-track{animation:smScroll 26s cubic-bezier(.7,0,.3,1) infinite;will-change:transform}
.shot-site .sm-page{height:var(--smH);box-sizing:border-box;overflow:hidden;padding:20px 18px;border-bottom:1px solid var(--border);background:#fff;display:flex;flex-direction:column}
.shot-site .sm-page.hero{position:relative;justify-content:flex-end;color:#fff;background:#1b1f1c}
.shot-site .sm-page.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,22,.18) 0%,rgba(20,28,22,.52) 52%,rgba(20,28,22,.88) 100%),url('/img/microsite/hero.jpg') center/cover no-repeat;z-index:0}
.shot-site .sm-page.hero>*{position:relative;z-index:1}
.shot-site .sm-page.hero .sm-name{color:#fff}
.shot-site .sm-page.hero .sm-eyebrow{color:#F0C9B6}
.shot-site .sm-page.hero .sm-sub{color:rgba(255,255,255,.86)}
.shot-site .sm-page.hero .sm-trust{color:rgba(255,255,255,.82)}
.shot-site .sm-page.hero .sm-cta .b2{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.38)}
.shot-site .sm-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--terra);margin-bottom:10px}
.shot-site .sm-eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 3px rgba(196,96,58,.2)}
.shot-site .sm-name{font-family:'Newsreader',serif;font-weight:600;color:var(--ink);font-size:24px;line-height:1.04;letter-spacing:-.02em}
.shot-site .sm-sub{font-size:12.5px;line-height:1.45;color:var(--ink-soft);margin:8px 0 0;max-width:34ch}
.shot-site .sm-cta{display:flex;gap:9px;margin-top:14px}
.shot-site .sm-cta .b{font-size:12px;font-weight:600;border-radius:9px;padding:9px 14px;white-space:nowrap}
.shot-site .sm-cta .b1{background:var(--terra);color:#fff}
.shot-site .sm-cta .b2{background:#fff;color:var(--ink);border:1.5px solid var(--border)}
.shot-site .sm-trust{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.shot-site .sm-trust .stars{color:#E5A663;letter-spacing:1px}
.shot-site .sm-kick{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--terra);margin-bottom:5px}
.shot-site .sm-sec-h{font-family:'Newsreader',serif;font-weight:600;color:var(--ink);font-size:16px;margin:0 0 12px}
.shot-site .sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.shot-site .sm-card{border:1px solid var(--border);border-radius:12px;padding:12px 13px;background:#fff}
.shot-site .sm-card .nm{font-weight:600;font-size:12.5px;color:var(--ink);margin-bottom:3px}
.shot-site .sm-card .meta{font-size:11px;color:var(--muted)}
.shot-site .sm-card .price{color:var(--terra);font-weight:700;font-size:13px;margin-top:6px}
.shot-site .sm-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot-site .sm-gallery .g{aspect-ratio:3/2;border-radius:9px;background-size:cover;background-position:center;background-color:#ece6d8}
.shot-site .sm-review{border:1px solid var(--border);border-radius:12px;padding:13px}
.shot-site .sm-review .rs{color:#E5A663;letter-spacing:1px;font-size:13px}
.shot-site .sm-review p{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:7px 0 8px}
.shot-site .sm-review .by{font-size:11.5px;font-weight:600;color:var(--ink)}
.shot-site .sm-bookband{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--forest);color:#fff;border-radius:12px;padding:12px 14px;font-size:12.5px;font-weight:600}
.shot-site .sm-bookband .bk{flex-shrink:0;background:var(--terra);color:#fff;border-radius:8px;padding:7px 12px;font-size:12px}
.shot-site .sm-scroll{position:absolute;top:10px;right:6px;bottom:10px;width:3px;border-radius:99px;background:rgba(28,22,18,.06);z-index:2}
.shot-site .sm-thumb{position:absolute;left:0;width:3px;border-radius:99px;background:rgba(196,96,58,.55);height:24%;animation:smThumb 26s cubic-bezier(.7,0,.3,1) infinite}
@keyframes smScroll{0%,13%{transform:translateY(0)}21%,35%{transform:translateY(calc(-1*var(--smH)))}43%,57%{transform:translateY(calc(-2*var(--smH)))}65%,79%{transform:translateY(calc(-3*var(--smH)))}87%,100%{transform:translateY(calc(-4*var(--smH)))}}
@keyframes smThumb{0%,13%{top:0}21%,35%{top:19%}43%,57%{top:38%}65%,79%{top:57%}87%,100%{top:76%}}
@media(prefers-reduced-motion:reduce){.shot-site .sm-track,.shot-site .sm-thumb{animation:none}}

.faq{border-bottom:1px solid var(--cream-dk);padding:16px 0;}
.faq:last-child{border-bottom:none;}
.faq summary{font-weight:600;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
/* Rotating chevron (replaces the +/− marker) */
.faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--terra);border-bottom:2.5px solid var(--terra);
  transform:rotate(45deg);margin-right:3px;transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.faq[open] summary::after{transform:rotate(-135deg);}
.faq p{margin:12px 0 4px;font-size:15.5px;color:var(--ink-soft);}

/* Smooth grid-rows height animation when JS is present (.faq.hx-faq).
   JS wraps the body in <div class="hx-faq-body"><div>…</div></div>.
   No-JS falls back to native <details> open/close — content always reachable. */
.faq.hx-faq .hx-faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.8,.3,1);}
.faq.hx-faq.hx-open .hx-faq-body{grid-template-rows:1fr;}
.faq.hx-faq.hx-open summary::after{transform:rotate(-135deg);}
.faq.hx-faq .hx-faq-body>div{overflow:hidden;}
.faq.hx-faq .hx-faq-body>div>p:first-child{margin-top:12px;}

/* "Was this helpful?" thumbs — pop + tint on pick */
.ss-helpful-btn.chosen{background:#fdf6ef;border-color:var(--terra);}
.ss-helpful-btn.hx-pop{animation:hxThumbPop .4s cubic-bezier(.3,1.5,.5,1);}
@keyframes hxThumbPop{0%{transform:scale(1);}45%{transform:scale(1.28);}100%{transform:scale(1);}}

@media (prefers-reduced-motion: reduce){
  .faq summary::after{transition:none;}
  .faq.hx-faq .hx-faq-body{transition:none;}
  .ss-helpful-btn.hx-pop{animation:none;}
}

.related{margin-top:40px;border-top:1px solid var(--border);padding-top:24px;}
.related h2{font-size:18px;margin:0 0 12px;font-family:'Hanken Grotesk',sans-serif;}
.related-links{display:flex;flex-wrap:wrap;gap:10px;}
.related-links a{display:inline-block;background:var(--terra);border:1px solid var(--terra);border-radius:100px;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;color:var(--cream);transition:background .2s ease,border-color .2s ease;}
.related-links a:hover{background:var(--terra-dk);border-color:var(--terra-dk);}

.footer{padding:32px 40px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;font-size:0.8125rem;color:var(--muted);border-top:1px solid var(--border);text-align:center;}
.footer-dot{width:5px;height:5px;border-radius:50%;background:var(--terra);flex-shrink:0;}
.footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease;}
.footer a:hover{border-bottom-color:var(--terra);}

@media(max-width:680px){
  .hero{padding:38px 22px 32px;} main{padding:28px 22px 24px;}
  .footer{padding:24px 28px;flex-direction:column;gap:10px;} .footer-dot{display:none;}
  body{font-size:16px;}
}

/* Windowed screenshot figure (.scrn) — shared so every article renders it correctly */
.scrn{margin:22px 0}
.scrn figcaption{margin-top:9px;font-size:13.5px;color:var(--muted);text-align:center}
.scrn-win{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 26px rgba(28,22,18,.10)}
.scrn-chrome{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fbf9f4;border-bottom:1px solid var(--border)}
.scrn-dots{display:flex;gap:6px}
.scrn-dots span{width:8px;height:8px;border-radius:50%;background:#E0D8C8}
.scrn-url{flex:1;background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px 11px;font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scrn-view{position:relative;height:300px;overflow:hidden;background:#fff}
.scrn-img{display:block;width:100%;height:auto}
.scrn-cursor,.scrn-bar,.scrn-thumb{display:none}