/* Samples page v2 - Editorial Operator v1.0. One 620px column like the Manny page.
   No new colour tokens, no shadows, no gradients. */

.sm-body { background: var(--stock); }
.sm-main { padding: 8px 16px 72px; }
.sm-spine { max-width: 620px; margin-inline: auto; }
.sm-skip { position: absolute; left: -9999px; }
.sm-skip:focus { position: fixed; left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--cream); font-weight: 700; padding: 12px 18px; border-radius: var(--r-pill); text-decoration: none; }
.sm-body :focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 6px; }

.sm-ico { width: 20px; height: 20px; flex: none; }
.sm-ico--sm { width: 16px; height: 16px; }
.sm-ico--chev { width: 18px; height: 18px; transition: transform .18s ease-out; }
.sm-ico--btn { width: 18px; height: 18px; margin-left: 10px; vertical-align: -3px; }

/* ---- Hero ---- */
.sm-hero { padding: 28px 0 30px; }
.sm-eyebrow {
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--petrol); margin: 0 0 14px;
}
.sm-hero h1 {
  font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(38px, 7vw, 52px); line-height: 1.04; margin: 0 0 18px; text-wrap: balance;
}
.sm-hero h1 em { font-style: italic; color: var(--burnt); }
.sm-lede { font-size: 18.5px; line-height: 1.62; color: var(--ink-body); margin: 0 0 16px; text-wrap: pretty; }
.sm-disclaim {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--ink-dim);
  margin: 0; padding-left: 12px; border-left: 2px solid var(--keyline);
}

/* ---- Picker ---- */
.sm-picker { margin: 0 0 36px; }
.sm-pick-h {
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 12px;
}
.sm-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sm-pick {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 72px; padding: 14px 14px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--keyline); border-radius: 14px;
  transition: border-color .15s ease-out, background-color .15s ease-out; touch-action: manipulation;
}
.sm-pick:hover { border-color: var(--petrol); }
.sm-pick:active { transform: scale(.98); }
.sm-pick-ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--petrol-tint); color: var(--petrol);
}
.sm-pick-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-pick-l { font-family: var(--font-ui); font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.sm-pick-d { font-size: 13px; line-height: 1.35; color: var(--ink-dim); }
.sm-pick .sm-ico--chev { color: var(--ink-dim); }
.sm-pick.is-on { background: var(--petrol); border-color: var(--petrol); color: var(--cream); }
.sm-pick.is-on .sm-pick-ico { background: var(--petrol-dark); color: var(--cream); }
.sm-pick.is-on .sm-pick-d, .sm-pick.is-on .sm-ico--chev { color: var(--petrol-on-dark); }
.sm-pick.is-on .sm-ico--chev { transform: rotate(180deg); }

/* ---- Panel ---- */
.sm-panel { scroll-margin-top: 16px; padding: 4px 0 8px; outline: none; }
.sm-panel + .sm-panel { border-top: 3px double var(--ink); margin-top: 40px; padding-top: 32px; }
.sm-js .sm-panel + .sm-panel { border-top: 0; margin-top: 0; padding-top: 4px; }
.sm-panel[hidden] { display: none; }
.sm-panel-head { border-top: 3px double var(--ink); padding-top: 24px; }
.sm-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--petrol);
}
.sm-panel h2 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5.5vw, 38px);
  line-height: 1.08; color: var(--ink); margin: 0 0 12px; text-wrap: balance;
}
.sm-sit { font-size: 17px; line-height: 1.65; color: var(--ink-body); margin: 0 0 16px; text-wrap: pretty; }
.sm-ask {
  background: var(--paper); border: 1px solid var(--keyline); border-left: 4px solid var(--petrol);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 12px;
}
.sm-ask-h {
  font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 6px;
}
.sm-ask p:last-child { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* disclosure controls: brief, more ads, rest of page, later emails */
.sm-brief, .sm-more, .sm-fold { border: 1px solid var(--keyline); border-radius: 10px; background: var(--paper); }
.sm-brief summary, .sm-more summary, .sm-fold summary, .sm-email--more summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  min-height: 48px; padding: 12px 16px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--ink);
  touch-action: manipulation;
}
.sm-brief summary span { flex: 1; }
.sm-brief summary::-webkit-details-marker, .sm-more summary::-webkit-details-marker,
.sm-fold summary::-webkit-details-marker, .sm-email--more summary::-webkit-details-marker { display: none; }
.sm-brief summary .sm-ico:first-child { color: var(--petrol); }
.sm-brief[open] .sm-ico--chev, .sm-more[open] .sm-ico--chev, .sm-fold[open] .sm-ico--chev { transform: rotate(180deg); }
.sm-brief-body { padding: 2px 18px 16px; border-top: 1px solid var(--hairline); }
.sm-brief-body h3 { font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin: 16px 0 6px; }
.sm-brief-body p, .sm-brief-body li { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); margin: 0 0 8px; }
.sm-brief-body ul, .sm-brief-body ol { padding-left: 20px; margin: 0 0 8px; }

/* ---- Blocks and steps ---- */
.sm-block, .sm-step { margin-top: 44px; scroll-margin-top: 16px; }
.sm-step-n {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--petrol);
}
.sm-step-n .sm-ico {
  width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  background: var(--petrol); color: var(--cream);
}
.sm-job { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; text-wrap: pretty; }

/* ---- Funnel: bars narrow as they go down, arrows between ---- */
.sm-fun { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.sm-fun-step {
  width: calc(100% - (var(--i) / var(--n)) * 38%);
  display: flex; flex-direction: column; align-items: center;
}
.sm-fun-bar {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  padding: 10px 14px; border-radius: 10px; text-decoration: none;
  background: var(--paper); border: 1.5px dashed var(--keyline); color: var(--ink-dim);
}
.sm-fun-n { font-family: var(--font-display); font-size: 22px; line-height: 1; grid-row: span 2; }
.sm-fun-l { font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.sm-fun-tag { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.3; }
.sm-fun-step.is-shown .sm-fun-bar { background: var(--petrol); border: 1.5px solid var(--petrol); color: var(--cream); }
.sm-fun-step.is-shown .sm-fun-tag { color: var(--petrol-label); }
a.sm-fun-bar:hover { background: var(--petrol-dark); }
.sm-fun-arrow { display: grid; place-items: center; height: 24px; color: var(--ink-dim); }

/* ---- Why it works ---- */
.sm-why { margin-top: 16px; padding: 14px 16px 6px; background: var(--paper-warm); border-radius: 10px; }
.sm-why-h {
  font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 10px;
}
.sm-why ul { list-style: none; margin: 0; padding: 0; }
.sm-why li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--ink-body); }
.sm-why li .sm-ico { color: var(--petrol); margin-top: 3px; }

/* ---- Ad (a neutral feed-post frame) ---- */
.sm-post-wrap { max-width: 520px; margin-inline: auto; }
.sm-post {
  margin: 0; background: #fff; border: 1px solid var(--keyline); border-radius: 12px; overflow: hidden;
  font-family: var(--font-ui); color: #1c1e21;
}
.sm-post-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.sm-post-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--petrol); color: var(--cream);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none;
}
.sm-post-page { font-weight: 700; font-size: 14px; line-height: 1.2; }
.sm-post-spons { display: block; font-weight: 400; font-size: 12px; color: #65676b; }
.sm-post-text { padding: 2px 14px 10px; }
.sm-post-text p { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; }
.sm-post-text ul { margin: 0 0 10px; padding-left: 18px; }
.sm-post-text li { font-size: 14.5px; line-height: 1.5; }
.sm-post-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.sm-post-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f0f2f5; padding: 10px 14px; }
.sm-post-hl { display: flex; flex-direction: column; min-width: 0; }
.sm-post-hl strong { font-size: 14.5px; line-height: 1.3; }
.sm-post-hl span { font-size: 13px; color: #65676b; line-height: 1.3; }
.sm-post-cta { flex: none; background: #e4e6eb; border-radius: 6px; padding: 8px 12px; font-weight: 600; font-size: 14px; color: #1c1e21; }

.sm-more { margin-top: 12px; }
.sm-more-item { padding: 14px 18px; border-top: 1px solid var(--hairline); }
.sm-more-name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; }
.sm-more-cap, .sm-more-hl { font-size: 14px; line-height: 1.6; color: var(--ink-body); margin: 0 0 8px; }
.sm-more-cap span, .sm-more-hl span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin-right: 4px; }
.sm-more-text p, .sm-more-text li { font-size: 15px; line-height: 1.6; color: var(--ink-body); margin: 0 0 10px; }
.sm-more-text ul { padding-left: 20px; margin: 0 0 10px; }

/* ---- Page mock ---- */
.sm-page { background: #fff; border: 1px solid var(--keyline); border-radius: 12px; overflow: hidden; }
.sm-page-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--paper-warm); border-bottom: 1px solid var(--hairline); }
.sm-page-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--keyline); }
.sm-page-body { padding: 26px 26px 26px; color: #222; }
.sm-page-body p, .sm-page-body li { font-size: 16px; line-height: 1.65; color: #333; margin: 0 0 12px; }
.sm-page-body ul, .sm-page-body ol { padding-left: 22px; margin: 0 0 12px; }
.sm-p-eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase; color: #6b6259 !important; }
.sm-p-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(27px, 5vw, 34px); line-height: 1.1; margin: 4px 0 14px; color: #1a1a1a; text-wrap: balance; }
.sm-p-sub { font-size: 17.5px !important; line-height: 1.55 !important; color: #3a3a3a !important; }
.sm-p-btn { margin: 18px 0 8px !important; }
.sm-p-btn span { display: inline-block; background: #1f1f1f; color: #fff; border-radius: 999px; padding: 12px 22px; font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
.sm-p-under { font-size: 13.5px !important; color: #6b6b6b !important; }
.sm-p-trust { font-size: 13.5px !important; color: #555 !important; border-top: 1px solid #eee; padding-top: 12px; }
.sm-p-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0 !important; }
.sm-p-form span { flex: 1 1 160px; border: 1px solid #d6d6d6; border-radius: 8px; padding: 11px 14px; font-size: 14.5px; color: #8a8a8a; }
.sm-p-section { border-top: 1px solid #eee; margin-top: 22px; padding-top: 20px; }
.sm-p-section h4 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0 0 12px; color: #1a1a1a; }
.sm-page-body h2, .sm-page-body h3:not(.sm-p-h1) { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 18px 0 10px; color: #1a1a1a; }
.sm-page-body blockquote { margin: 14px 0; padding: 4px 0 4px 16px; border-left: 3px solid #d9d9d9; }
.sm-page-body blockquote p { font-family: var(--font-display); font-size: 19px; line-height: 1.4; color: #222; margin: 0 0 6px; }
.sm-page-body blockquote cite { font-style: normal; font-size: 13.5px; color: #6b6b6b; }
.sm-fold { margin-top: 20px; background: var(--paper); }
.sm-fold[open] { background: #fff; border-color: #eee; }
.sm-fold[open] > summary { border-bottom: 1px solid #eee; }
.sm-fold > .sm-p-section:first-of-type { border-top: 0; margin-top: 4px; }
.sm-fold > .sm-p-section { padding-left: 14px; padding-right: 14px; }

/* product page: stacked in the narrow column */
.sm-pdp-img { width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 5; border-radius: 8px; display: block; margin: 0 auto 18px; }
.sm-pdp-stars { font-size: 14px !important; color: #555 !important; }
.sm-pdp-opts { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 8px !important; }
.sm-pdp-opts span { border: 1px solid #d6d6d6; border-radius: 8px; padding: 10px 14px; font-size: 14.5px; color: #333; }
.sm-pdp-opts span.is-on { border: 2px solid #1f1f1f; font-weight: 600; }
.sm-pdp-bundle { font-size: 14px !important; color: #444 !important; }

/* ---- Emails ---- */
.sm-emails { display: flex; flex-direction: column; gap: 12px; }
.sm-email { background: #fff; border: 1px solid var(--keyline); border-radius: 12px; overflow: hidden; }
.sm-email-head { padding: 12px 18px; background: var(--paper-warm); border-bottom: 1px solid var(--hairline); }
.sm-email-head p { display: grid; grid-template-columns: 64px minmax(0, 1fr); margin: 0 0 4px; font-size: 14px; line-height: 1.45; color: var(--ink-body); }
.sm-email-head span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); padding-top: 1px; }
.sm-email-head strong { color: var(--ink); }
.sm-email-body { padding: 18px 20px 20px; }
.sm-email-body p, .sm-email-body li { font-size: 15.5px; line-height: 1.65; color: #2b2b2b; margin: 0 0 12px; }
.sm-email-body li { margin: 0 0 6px; }
.sm-email-body ul, .sm-email-body ol { padding-left: 22px; margin: 0 0 12px; }
.sm-email--more summary { font-weight: 600; font-size: 14.5px; }
.sm-email--more summary span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); font-weight: 400; flex: none; }
.sm-email--more summary::after { content: "+"; margin-left: auto; font-weight: 700; color: var(--ink-dim); }
.sm-email--more[open] summary::after { content: "\2212"; }
.sm-email--more[open] summary { border-bottom: 1px solid var(--hairline); }
.sm-e-btn { display: inline-block; background: #1f1f1f; color: #fff; border-radius: 6px; padding: 10px 18px; font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; margin: 2px 0; }
.sm-e-cart { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #e3e3e3; border-radius: 8px; padding: 12px 14px; margin: 0 0 10px; font-size: 14.5px; color: #333; }
.sm-e-cart-price { font-weight: 700; }

/* ---- Mini CTA at the end of each business ---- */
.sm-mini { margin-top: 44px; padding: 24px 22px; background: var(--paper); border: 1px solid var(--keyline); border-radius: var(--r-card); }
.sm-mini-line { font-family: var(--font-display); font-size: 23px; line-height: 1.25; color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
.sm-mini-btn { margin: 0 0 22px; }
.sm-mini-or { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--ink-dim); margin: 0 0 10px; }
.sm-switches { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--keyline); border-radius: var(--r-pill); background: var(--stock);
}
.sm-switch .sm-ico { width: 18px; height: 18px; color: var(--petrol); }
.sm-switch:hover { border-color: var(--petrol); }

/* ---- How it was made ---- */
.sm-how { margin-top: 56px; border-top: 3px double var(--ink); padding-top: 26px; }
.sm-how h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); margin: 0 0 18px; }
.sm-how-list { list-style: none; margin: 0; padding: 0; }
.sm-how-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 0 0 18px; }
.sm-how-list li > .sm-ico { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--petrol-tint); color: var(--petrol); }
.sm-how-t { font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--ink); margin: 2px 0 2px; }
.sm-how-list p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-body); margin: 0; }

/* ---- Final CTA ---- */
.sm-final { margin-top: 40px; background: var(--petrol); color: var(--cream); border-radius: var(--r-panel); padding: 32px 28px; }
.sm-final h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5.5vw, 38px); line-height: 1.08; color: var(--cream); margin: 0 0 14px; text-wrap: balance; }
.sm-final h2 em { font-style: italic; }
.sm-final > p { font-size: 17px; line-height: 1.62; color: var(--cream); margin: 0 0 14px; text-wrap: pretty; }
.sm-final-list { list-style: none; margin: 4px 0 22px; padding: 0; }
.sm-final-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.sm-final-list .sm-ico { color: var(--petrol-label); margin-top: 3px; }
.sm-final .sm-final-btn { margin: 0 0 12px; }
.sm-final .sm-final-fine { font-size: 13.5px; line-height: 1.55; color: var(--petrol-on-dark); margin: 0; }
.sm-final .btn--primary { background: var(--burnt); }
.sm-final .btn--primary:hover { background: var(--burnt-dark); }
.sm-final :focus-visible { outline-color: var(--cream); }

.sm-body .btn--big { display: inline-flex; align-items: center; }

/* ---- Small screens ---- */
@media (max-width: 560px) {
  .sm-lede { font-size: 17.5px; }
  .sm-picks { gap: 8px; }
  .sm-pick { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 12px; align-content: start; min-height: 116px; }
  .sm-pick .sm-ico--chev { display: none; }
  .sm-pick-l { font-size: 15px; }
  .sm-page-body { padding: 20px 16px 22px; }
  .sm-email-body { padding: 16px 16px 18px; }
  .sm-email-head { padding: 12px 14px; }
  .sm-mini { padding: 20px 16px; }
  .sm-final { padding: 26px 18px; }
  .sm-body .btn--big { display: flex; justify-content: center; width: 100%; text-align: center; }
  .sm-fun-step { width: calc(100% - (var(--i) / var(--n)) * 30%); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-body *, .sm-body *::before { transition: none !important; }
  .sm-pick:active { transform: none; }
}

/* ad package explainer and sub-labels (2026-09-27 clarity pass) */
.sm-pack { font-size: 15.5px; line-height: 1.6; color: var(--ink-body); margin: 0 0 14px; padding: 12px 14px; background: var(--paper-warm); border-radius: 10px; text-wrap: pretty; }
.sm-more-sub { font-size: 14px; line-height: 1.5; color: var(--ink-dim); margin: -4px 0 10px; }
.sm-post-label { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--ink); margin: 0 0 8px; max-width: 520px; margin-inline: auto; }
.sm-post-label span { display: block; font-weight: 400; color: var(--ink-dim); margin-top: 2px; }
.sm-job-l { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; }
.sm-why-note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin: -4px 0 10px; }
.sm-tap { font-size: 14px; color: var(--ink-dim); margin: 0 0 10px; }
.sm-more-hls { margin: 0 0 8px; padding-left: 20px; }
.sm-more-hls li { font-size: 14.5px; line-height: 1.5; color: var(--ink-body); margin: 0 0 4px; }