/* Blog post page - built from the Figma frame "Blog post — post.html" (layout after slash.com/blog).
   Dark page: post header (breadcrumb, two-tone title, subtitle, author + date), article column (688) + sidebar (256),
   "Read more from us" carousel, then the site CTA + footer. */

.post-page { background: var(--c-ink); color: var(--c-paper); }
.post-wrap { width: min(1000px, calc(100% - 80px)); margin: 0 auto; }

/* ---------- Post header ---------- */
.post-head { padding-top: 180px; }
.post-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 14px; letter-spacing: .14px; color: #aaaaa7; }
.post-crumb a { display: inline-flex; align-items: center; gap: 6px; color: inherit; transition: color .2s ease; }
.post-crumb a:hover { color: var(--c-paper); }
.post-crumb svg { width: 14px; height: 14px; }
.post-crumb [aria-current] { color: var(--c-paper); }
.post-title { max-width: 820px; margin-top: 20px; font-family: var(--f-body); font-weight: 400; font-size: 48px; line-height: 60px; letter-spacing: .48px; color: #fff; }
.post-title em { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 56px; color: var(--c-lime); }
.post-sub { max-width: 700px; margin-top: 16px; font-size: 18px; line-height: 26px; color: var(--c-muted-2); }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .12); }
.post-author { display: flex; align-items: center; gap: 12px; }
.post-meta { flex-wrap: wrap; row-gap: 12px; }
.post-date { white-space: nowrap; }
.post-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.post-author__text { display: flex; flex-direction: column; gap: 2px; }
.post-author__name { font-size: 15px; line-height: 20px; font-weight: 500; color: #fff; }
.post-author__role { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.post-date { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.post-date time { font-weight: 600; letter-spacing: -.28px; text-transform: uppercase; }
.post-date span { font-weight: 500; letter-spacing: .14px; }
.post-date i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-muted); }

/* ---------- Body: article + sidebar ---------- */
.post-body { display: grid; grid-template-columns: 688fr 256fr; gap: 56px; align-items: start; padding-top: 80px; }
.post-cover { margin: 0; overflow: hidden; aspect-ratio: 688 / 516; border-radius: 8px; background: #2a2525; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.post-article { font-size: 16px; line-height: 24px; color: var(--c-muted-2); }
.post-article li { line-height: 26px; }
.post-article > * + * { margin-top: 24px; }
.post-article .post-cover + * { margin-top: 32px; }
.post-article h2 { margin-top: 56px; font-family: var(--f-display); font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -1.2px; color: #fff; }
.post-article h3 { margin-top: 40px; font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -.6px; color: #fff; }
.post-article h2 + h3 { margin-top: 24px; }
.post-article h2 + *, .post-article h3 + * { margin-top: 16px; }
.post-article strong { font-weight: 600; color: #fff; }
.post-article a { color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; transition: opacity .2s ease; }
.post-article a:hover { opacity: .75; }
.post-article ol, .post-article ul { padding-left: 22px; }
.post-article ol { list-style: decimal; }
.post-article ul { list-style: disc; }
.post-article li { padding-left: 3px; }
.post-article li + li { margin-top: 0; }
.post-article li::marker { color: var(--c-muted-2); }
.post-article ol li::marker { font-weight: 600; color: #fff; }

/* the whole sidebar stays in view while the article scrolls. On a screen too short for all of it,
   post.js lowers --aside-top so the bottom (the table of contents) stays visible rather than the top */
.post-aside { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; position: sticky; top: var(--aside-top, 112px); }
.post-share h2 { font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: .14px; color: var(--c-paper); }
.post-share ul { display: flex; gap: 10px; margin-top: 16px; }
.post-share a { display: block; width: 24px; height: 24px; transition: transform .25s var(--ease-out, ease), opacity .2s ease; }
.post-share a:hover { transform: translateY(-2px); opacity: .85; }
.post-share img { width: 24px; height: 24px; }

.post-card { display: flex; flex-direction: column; align-items: center; padding: 16px; border: 1px solid rgb(255 255 255 / .12); border-radius: 8px; text-align: center; }
.post-card__img { width: 100%; aspect-ratio: 224 / 150; overflow: hidden; border-radius: 6px; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card h2 { margin-top: 20px; font-size: 16px; line-height: 24px; font-weight: 500; color: #fff; }
.post-card p { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--c-muted-2); }
.post-card__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin-top: 16px; border-radius: 50px;
  background: #efefeb; color: var(--c-ink); font-size: 14px; line-height: 1; transition: background-color .25s ease; }
.post-card__btn { position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out); }
.post-card__btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--c-lime); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease-out); }   /* the site's rising fill, in lime */
.post-card__btn:hover::before, .post-card__btn:focus-visible::before { transform: translate(-50%, -50%) scale(1.15); }
.post-card__btn:hover, .post-card__btn:focus-visible { color: var(--c-ink); }
.post-card__btn:active { transform: scale(.98); }

/* Table of contents: pale lime (#fbfee0) title band, the article's H2s below; the section you are reading gets a bar on the left */
.post-toc { overflow: hidden; border: 1px solid rgb(255 255 255 / .12); border-radius: 8px; }
.post-toc h2 { padding: 14px 16px; background: var(--c-lime-tint); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--c-ink); }
.post-toc ol { padding: 8px 0; }
.post-toc a { position: relative; display: block; padding: 8px 16px; font-size: 14px; line-height: 20px; color: var(--c-muted-2); transition: color .2s ease; }
.post-toc a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: currentColor; opacity: 0; transition: opacity .2s ease; }
.post-toc a:hover { color: #fff; }
.post-toc a.is-active { color: #fff; }
.post-toc a.is-active::before { opacity: 1; }
.post-toc a:focus-visible { outline: 2px solid var(--c-lime); outline-offset: -2px; }
.post-article h2[id] { scroll-margin-top: 112px; }

/* ---------- Read more ---------- */
.post-more { padding: 140px 0; overflow: hidden; }
.post-more__wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }
.post-more__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.post-more__head h2 { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: .2px; color: #fff; }
.post-more__arrows { display: flex; gap: 20px; }
.post-more__arrows button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .08); color: #fff; cursor: pointer; transition: background-color .2s ease, opacity .2s ease; }
.post-more__arrows button:hover:not(:disabled) { background: rgb(255 255 255 / .16); }
.post-more__arrows button:disabled { cursor: default; }
.post-more__arrows button:disabled svg { opacity: .4; }
.post-more__arrows svg { width: 16px; height: 16px; }
.post-more__track { display: flex; gap: 32px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc((100vw - min(1200px, 100vw - 80px)) / -2); padding-right: 40px; }
.post-more__track::-webkit-scrollbar { display: none; }
.post-rel { flex: 0 0 340px; scroll-snap-align: start; }
.post-rel__img { aspect-ratio: 340 / 192; overflow: hidden; border-radius: 8px; background: #2a2525; }
.post-rel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out, ease); }
.post-rel:hover .post-rel__img img { transform: scale(1.04); }
.post-rel__meta { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 13px; font-weight: 600; letter-spacing: -.26px; }
.post-rel__meta span { color: var(--c-lime); }
.post-rel__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-muted); }
.post-rel__meta time { color: var(--c-muted); text-transform: uppercase; }
.post-rel h3 { margin-top: 10px; font-size: 20px; line-height: 27.5px; font-weight: 500; letter-spacing: -.8px; color: #fff; }
.post-rel p { margin-top: 6px; font-size: 15px; line-height: 15px; letter-spacing: -.3px; color: #8b8782; }   /* was #6f6b66: 3.2:1 on the dark page, now 4.6:1 */

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .post-head { padding-top: 140px; }
  .post-title { font-size: 40px; line-height: 50px; }
  .post-title em { font-size: 46px; }
  .post-body { grid-template-columns: 1fr; gap: 56px; }
  .post-toc { display: none; }   /* the sidebar drops below the article on smaller screens, where a contents list would come too late */
  .post-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 0; }
  .post-share { grid-column: 1 / -1; }
  .post-more { padding: 96px 0; }
}
@media (max-width: 767px) {
  .post-wrap, .post-more__wrap { width: calc(100% - 40px); }
  .post-head { padding-top: 120px; }
  .post-title { margin-top: 16px; font-size: 30px; line-height: 38px; letter-spacing: 0; }
  .post-title em { font-size: 34px; }
  .post-sub { font-size: 17px; line-height: 25px; }
  .post-article h2 { margin-top: 44px; font-size: 26px; line-height: 32px; letter-spacing: -.6px; }
  .post-article h3 { font-size: 18px; line-height: 26px; }
  .post-aside { grid-template-columns: 1fr; }
  .post-more { padding: 72px 0; }
  .post-more__track { margin-right: -20px; padding-right: 20px; }
  .post-rel { flex-basis: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-rel__img img, .post-share a { transition: none; }
}

/* ---------- Light / dark toggle (this page only) ----------
   Same pill as the blog's Recent / Oldest switch: a sliding thumb behind two icon buttons.
   The choice is kept in localStorage and set on <html data-post-theme="light"> before the page paints. */
.post-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.post-theme { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; height: 36px; padding: 3px;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; flex: none; }
.post-theme::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--c-paper); transform: translateX(100%); transition: transform .35s var(--ease-out, ease), background-color .3s ease; }
.post-theme button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; border: 0;
  border-radius: 999px; background: none; color: #aaaaa7; cursor: pointer; transition: color .3s ease; }
.post-theme button:hover { color: var(--c-paper); }
.post-theme button[aria-checked="true"] { color: var(--c-ink); }
.post-theme button:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 2px; }
.post-theme svg { width: 16px; height: 16px; }

.post-page, .post-page :is(.post-title, .post-sub, .post-article, .post-article h2, .post-article h3, .post-article strong, .post-card, .post-toc, .post-toc a, .post-rel h3, .post-more__head h2) {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* light version */
html[data-post-theme="light"] body.is-post { background: var(--c-paper); }
html[data-post-theme="light"] .is-post #site-header .wbs-navbar-center-2 { background-color: #211d1d; }   /* light page: header on a solid dark bar, like the blog page */
html[data-post-theme="light"] .post-page { background: var(--c-paper); color: var(--c-ink); }
html[data-post-theme="light"] .post-theme { border-color: var(--c-muted-2); }
html[data-post-theme="light"] .post-theme::before { background: var(--c-ink); transform: none; }
html[data-post-theme="light"] .post-theme button { color: var(--c-muted); }
html[data-post-theme="light"] .post-theme button:hover { color: var(--c-ink); }
html[data-post-theme="light"] .post-theme button[aria-checked="true"] { color: #fff; }
html[data-post-theme="light"] .post-theme button:focus-visible { outline-color: var(--c-ink); }
html[data-post-theme="light"] .post-crumb { color: #6f6b66; }
html[data-post-theme="light"] .post-crumb a:hover, html[data-post-theme="light"] .post-crumb [aria-current] { color: var(--c-ink); }
html[data-post-theme="light"] .post-title { color: var(--c-ink); }
html[data-post-theme="light"] .post-title em { color: #aaaaa7; }   /* same accent as the blog page title */
html[data-post-theme="light"] .post-sub { color: #6f6b66; }
html[data-post-theme="light"] .post-meta { border-top-color: rgb(33 29 29 / .12); }
html[data-post-theme="light"] .post-author__name { color: var(--c-ink); }
html[data-post-theme="light"] .post-cover { background: #e6e6e1; }
html[data-post-theme="light"] .post-article { color: #6f6b66; }
html[data-post-theme="light"] .post-article :is(h2, h3, strong) { color: var(--c-ink); }
html[data-post-theme="light"] .post-article li::marker { color: #6f6b66; }
html[data-post-theme="light"] .post-article ol li::marker { color: var(--c-ink); }
html[data-post-theme="light"] .post-article a { color: var(--c-ink); text-decoration-color: var(--c-ink); }
html[data-post-theme="light"] .post-share h2 { color: var(--c-ink); }
html[data-post-theme="light"] .post-share img { filter: invert(1); }
html[data-post-theme="light"] :is(.post-card, .post-toc) { border-color: rgb(33 29 29 / .12); }
html[data-post-theme="light"] .post-card h2 { color: var(--c-ink); }
html[data-post-theme="light"] .post-card p { color: #6f6b66; }
html[data-post-theme="light"] .post-toc a { color: #6f6b66; }
html[data-post-theme="light"] .post-toc a:is(:hover, .is-active) { color: var(--c-ink); }
html[data-post-theme="light"] .post-toc a:focus-visible { outline-color: var(--c-ink); }
html[data-post-theme="light"] .post-card__btn { background: var(--c-ink); color: var(--c-paper); }
html[data-post-theme="light"] .post-card__btn:hover { color: var(--c-ink); }
html[data-post-theme="light"] .post-more__head h2, html[data-post-theme="light"] .post-rel h3 { color: var(--c-ink); }
html[data-post-theme="light"] .post-more__arrows button { background: rgb(33 29 29 / .06); color: var(--c-ink); }
html[data-post-theme="light"] .post-more__arrows button:hover:not(:disabled) { background: rgb(33 29 29 / .12); }
html[data-post-theme="light"] .post-rel__img { background: #e6e6e1; }
html[data-post-theme="light"] .post-rel__meta span { color: var(--c-ink); }
html[data-post-theme="light"] .post-rel p { color: #8e8e8e; }

@media (prefers-reduced-motion: reduce) { .post-theme::before { transition: none; } }

/* "Still not sure?" call to action at the end of the article (Figma, Nov 2026): the opposite of the page (a light #f2f2ed card on the dark page, a dark #211d1d card on the light page) with a perspective strip of project
   images (one image, the 11 cards pre-shaped in Figma) behind the headline, then a line linking the fit quiz and a Book a call button.
   Sizes follow the 688px Figma card; the overlaps are % of the card width so they scale with it. */
.post-article .post-sns { margin-top: 56px; overflow: hidden; padding: 48px 0 47px; border-radius: 18px; background: #f2f2ed; text-align: center; }
.post-article .post-sns > * + * { margin-top: 0; }
.post-article .post-sns__title { position: relative; z-index: 1; margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 56px; line-height: 48px; letter-spacing: -1.2px; color: #211d1d; }
.post-sns__still { font-family: var(--f-body); font-weight: 400; font-size: 48px; letter-spacing: .4px; color: #b2b2b2; }
.post-article .post-sns__strip { display: block; width: 101.33%; max-width: none; height: auto; margin: -4.98% 0 0 -.665%; pointer-events: none; }
.post-article .post-sns__text { position: relative; max-width: 472px; margin: -2.95% auto 0; padding: 0; font-size: 16px; line-height: 24px; color: rgb(33 29 29 / .75); }
.post-article .post-sns__text a { color: #211d1d; text-decoration-color: rgb(33 29 29 / .4); }
.post-article .post-sns__text a:hover { opacity: 1; text-decoration-color: #211d1d; }
.post-article .post-sns__btn { width: 160px; height: 50px; margin: 24px auto 0; font-size: 18px; text-decoration: none; color: var(--c-ink); }
.post-article .post-sns__btn:hover { opacity: 1; color: var(--c-lime); }
.post-article .post-sns__btn:focus-visible { outline: 2px solid #211d1d; outline-offset: 3px; }
@media (max-width: 767px) {
  .post-article .post-sns { padding: 32px 0 32px; border-radius: 16px; }
  .post-article .post-sns__title { font-size: 38px; line-height: 40px; letter-spacing: -.8px; }
  .post-sns__still { font-size: 32px; letter-spacing: .2px; }
  .post-article .post-sns__strip { margin-top: -2%; }
  .post-article .post-sns__text { margin-top: -1%; padding: 0 20px; font-size: 15px; line-height: 22px; }
  .post-article .post-sns__btn { margin-top: 20px; }
}
/* light page theme: the card turns dark #211d1d with light text */
html[data-post-theme="light"] .post-article .post-sns { background: #211d1d; }
html[data-post-theme="light"] .post-article .post-sns__title { color: #f0f879; }   /* "not sure?" in brand yellow */
html[data-post-theme="light"] .post-sns__still { color: #f2f2ed; }   /* "Still" in paper */
html[data-post-theme="light"] .post-article .post-sns__text { color: #fff; }
html[data-post-theme="light"] .post-article .post-sns__text a { color: var(--c-lime); text-decoration-color: rgb(240 248 121 / .5); }   /* the quiz link in brand yellow-green */
html[data-post-theme="light"] .post-article .post-sns__text a:hover { text-decoration-color: var(--c-lime); }
html[data-post-theme="light"] .post-article .post-sns__btn { color: var(--c-ink); text-decoration: none; }
html[data-post-theme="light"] .post-article .post-sns__btn:hover { color: var(--c-lime); }
html[data-post-theme="light"] .post-article .post-sns__btn:focus-visible { outline-color: var(--c-lime); }
/* light theme: once the lime fill has risen, the pill's own background turns lime too, so no dark rim shows at its edge */
html[data-post-theme="light"] .post-card__btn { transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out), background-color 0s; }
html[data-post-theme="light"] .post-card__btn:hover, html[data-post-theme="light"] .post-card__btn:focus-visible { background-color: var(--c-lime); transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out), background-color 0s .45s; }

/* In-article images (Figma, Nov 2026): full article width, 688 x 385, 18px corners, the pricing line 24px below.
   Lazy-loaded WebP at 688 / 1032 / 1376px (srcset), with width and height set so nothing shifts while they load. */
.post-article .post-figure { margin: 24px 0 0; overflow: hidden; aspect-ratio: 688 / 385; border-radius: 18px; background: #2a2525; }
.post-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-post-theme="light"] .post-figure { background: #e6e6e1; }
@media (max-width: 767px) { .post-article .post-figure { border-radius: 14px; } }