/* Interactive sample. Builds on landing.css (tokens, header, buttons) and the shared Fjord palette. */
.sample-page {
  --ink-mute: #4a5c64;
  background:
    radial-gradient(60% 36% at 88% 0%, rgb(190 222 210 / 60%), transparent 70%),
    radial-gradient(40% 26% at 0% 0%, rgb(244 238 234 / 90%), transparent 70%),
    linear-gradient(180deg, #f6f9f8, var(--fjord-mist) 560px);
}
.sample-page .site-nav a[aria-current="page"] { background: #fff; }
.sample-app button:focus-visible, .sample-app a:focus-visible, .sample-notice button:focus-visible { outline: 3px solid var(--fjord-primary); outline-offset: 3px; }
.biz-tabs button:focus-visible { outline-offset: -3px; }
.sample-cta a:focus-visible { outline-color: #bfddd1; }
.sample-page .site-header .header-cta { display: none; }
.sample-page .site-header.is-open .header-cta { display: inline-flex; }
@media (min-width: 1081px) { .sample-page .site-header .header-cta { display: inline-flex; } }
.sample-main { padding-top: 0; }
.button svg, .chip svg, .notice-reset svg, .sample-notice svg, .checks svg, .locked-icon svg, .mk svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button svg { width: 16px; height: 16px; stroke-width: 2.2; }
.button--ghost-light { border-color: rgb(255 255 255 / 40%); background: transparent; color: #fff; }
.button--ghost-light:hover { border-color: #fff; background: rgb(255 255 255 / 10%); color: #fff; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .75rem; font-weight: 650; line-height: 1.25; }
.chip svg { width: 12px; height: 12px; stroke-width: 2.4; }
.chip--review { background: #f6e3b4; color: #4a3408; }
.chip--ready { background: #cfebd5; color: #0f3b25; }
.chip--plain { background: #e3ecea; color: var(--fjord-primary); }
.chip--changes { background: #d9e8f4; color: #12384f; }
.chip--glass { background: rgb(255 255 255 / 90%); color: var(--fjord-deep); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Hero: same recipe as the landing (wash, contours, pill eyebrow, display + serif headline) */
.sample-hero { padding: 116px 0 132px; }
.sample-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: 28px clamp(40px, 6vw, 88px); align-items: end; }
.sample-lead { max-width: 52ch; color: var(--ink-soft); font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.65; }
.sample-guide { display: grid; gap: 18px; padding: 24px 24px 18px; border: 1px solid rgb(255 255 255 / 80%); border-radius: 30px; background: linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(255 255 255 / 64%)); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); animation: hero-in 1s var(--ease-out) .18s backwards; }
.sample-guide ol { display: grid; gap: 14px; counter-reset: step; }
.sample-guide li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--ink-soft); font-size: 1rem; line-height: 1.3; }
.sample-guide .step-dot { width: 28px; height: 28px; font-size: .8125rem; }
.sample-notice { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 0 0; border-top: 1px solid var(--hairline); }
.sample-notice > svg { width: 22px; height: 22px; color: var(--fjord-spruce); }
.sample-notice p { color: var(--ink-soft); font-size: .9063rem; line-height: 1.45; }
.notice-reset { grid-column: auto; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px; background: #fff; color: var(--fjord-primary); font-size: .875rem; font-weight: 650; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; }
.notice-reset:hover { border-color: rgb(8 39 51 / 28%); background: #f3f8f6; }
.notice-reset svg { width: 15px; height: 15px; }
.sample-stage { position: relative; z-index: 2; margin-top: -84px; }
.sample-stage::before { content: ""; position: absolute; z-index: -1; inset: 6% -3% -4% -3%; border-radius: 48px; background: radial-gradient(closest-side, rgb(143 188 168 / 34%), transparent); filter: blur(46px); pointer-events: none; }

/* App frame */
.sample-app { position: relative; display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: hidden; overflow: clip; border: 1px solid var(--hairline); border-radius: 32px; background: #fff; box-shadow: 0 2px 4px rgb(8 39 51 / 6%), 0 36px 90px rgb(8 39 51 / 18%), 0 0 0 1px rgb(8 39 51 / 4%); }
.sample-portfolio { display: flex; flex-direction: column; gap: 18px; padding: 26px 18px 22px; border-right: 1px solid var(--hairline); background: linear-gradient(180deg, #f5f9f8, #ebf2f0); }
.sp-head { padding-inline: 8px; }
.sp-head h2 { font-size: 1.1875rem; letter-spacing: -.025em; }
.sp-head p { margin-top: 2px; color: var(--ink-mute); font-size: .875rem; }
.sp-list { display: grid; gap: 8px; }
.sp-item { display: grid; width: 100%; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "img name" "img status" "img prog"; align-items: center; gap: 4px 14px; padding: 12px 10px; border: 1px solid transparent; border-radius: 22px; background: transparent; text-align: left; transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .25s var(--ease-out); }
.sp-item img { grid-area: img; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.sp-name { grid-area: name; display: flex; min-width: 0; flex-direction: column; line-height: 1.3; }
.sp-name b { font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.sp-name span { color: var(--ink-mute); font-size: .8125rem; }
.sp-status { grid-area: status; display: flex; min-width: 0; }
.sp-status .chip { white-space: normal; line-height: 1.25; }
.sp-item:hover { background: rgb(255 255 255 / 70%); transform: translateX(2px); }
.sp-item[aria-current="true"] { border-color: rgb(47 93 80 / 40%); background: #fff; box-shadow: 0 12px 28px rgb(8 39 51 / 10%), 0 0 0 3px rgb(143 188 168 / 22%); transform: none; }
.voice { display: grid; gap: 12px; }
.voice-title { color: var(--fjord-spruce); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.voice-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.voice-say, .voice-avoid { display: grid; align-content: start; gap: 8px; padding: 16px 18px; border-radius: 20px; }
.voice-say { border: 1px solid #bfe0c8; background: #eef8f1; }
.voice-avoid { border: 1px solid var(--hairline); background: var(--surface-soft); }
.voice-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.voice-say .voice-tag { color: #0f3b25; }
.voice-avoid .voice-tag { color: var(--ink-mute); }
.voice-tag svg { width: 14px; height: 14px; stroke-width: 2.4; }
.voice-say p { color: var(--ink); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.voice-avoid p { color: var(--ink-mute); font-size: 1rem; line-height: 1.4; text-decoration: line-through; text-decoration-color: rgb(8 39 51 / 30%); }
.plan-why { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 22px; background: #fff; }
.plan-why__title { color: var(--fjord-spruce); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plan-why p:not(.plan-why__title) { max-width: 62ch; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; color: var(--ink-mute); font-size: .8125rem; }
.plan-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 22px; height: 10px; border-radius: 999px; background: var(--fjord-spruce); }
.lg--deep { background: var(--fjord-primary); }
.lg--alt { background: #9fc6b1; }
.cta-echo { margin: 0 auto 10px !important; color: #fff !important; font-weight: 650; }
.cta-echo b { font-family: var(--font-display); font-size: 1.2em; }
.sp-strip { display: none; }
.byline { margin-bottom: 8px; color: var(--ink-mute); font-size: .8125rem; font-weight: 600; }
.chip--time { background: var(--fjord-deep); color: #fff; }
.content-side { display: flex; flex-direction: column; }
.content-side > * { order: 1; }
.content-side > .next-up { order: 9; }
.next-up { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.next-up ul { display: grid; gap: 8px; margin-top: 10px; }
.next-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 12px 6px 8px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--ink-soft); font-size: .9375rem; text-align: left; transition: background-color .2s ease, border-color .2s ease; }
.next-row:hover { border-color: var(--hairline); background: var(--surface-soft); }
.next-row svg { width: 16px; height: 16px; fill: none; stroke: var(--fjord-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.next-row:hover svg { transform: translateX(3px); }
.next-row--wide { border-color: var(--hairline); background: var(--surface-soft); }
.next-up li { display: block; }
.sp-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--hairline); color: var(--ink-mute); font-size: .8125rem; line-height: 1.5; }
.next-day { display: inline-grid; min-width: 44px; height: 28px; place-items: center; padding: 0 10px; border-radius: 9px; background: #e3ecea; color: var(--fjord-primary); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.unlocks { display: grid; gap: 8px; margin: 0; }
.unlocks li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .9375rem; }
.unlocks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #e1eee8; color: var(--fjord-spruce); stroke-width: 2.4; }
.sp-glance { padding: 16px; border: 1px solid var(--hairline); border-radius: 20px; background: rgb(255 255 255 / 70%); }
.sp-glance__label { margin-bottom: 10px; color: var(--ink-mute); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sp-glance ul { display: grid; gap: 8px; }
.sp-glance li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink-soft); font-size: .875rem; line-height: 1.3; }
.sp-glance b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #e3ecea; color: var(--fjord-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 650; transition: background-color .3s ease, transform .3s var(--ease-out); }
.sp-glance .is-review b { background: #f6e3b4; color: #4a3408; }
.sp-glance .is-ready b { background: #cfebd5; color: #0f3b25; }
.sp-glance .is-changes b { background: #d9e8f4; color: #12384f; }
.sp-glance b.is-bumped { transform: scale(1.18); }
.sp-guide { padding: 16px; border: 1px dashed rgb(8 39 51 / 22%); border-radius: 20px; }
.sp-guide ol, .sample-guide ol { display: grid; gap: 10px; counter-reset: step; }
.sp-guide li, .sample-guide li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink-soft); font-size: .875rem; line-height: 1.3; }
.step-dot { display: grid; width: 24px; height: 24px; place-items: center; border: 1.5px solid rgb(8 39 51 / 28%); border-radius: 50%; color: var(--ink-mute); font-size: .75rem; font-weight: 700; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.step-dot::before { counter-increment: step; content: counter(step); }
.sp-guide li.is-next, .sample-guide li.is-next { color: var(--ink); font-weight: 650; }
.sp-guide li.is-next .step-dot, .sample-guide li.is-next .step-dot { border-color: var(--fjord-primary); color: var(--fjord-primary); }
.sp-guide li.is-done, .sample-guide li.is-done { color: var(--ink-mute); }
.sp-guide li.is-done .step-dot, .sample-guide li.is-done .step-dot { border-color: var(--fjord-spruce); background: var(--fjord-spruce); color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px; }
.sp-note { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--hairline); color: var(--ink-mute); font-size: .8125rem; line-height: 1.6; }

/* Business header */
.sample-workspace { position: relative; min-width: 0; }
.biz { display: flex; min-height: 100%; flex-direction: column; scroll-margin-top: 80px; }
.biz-banner h2:focus { outline: none; }
.biz-banner h2:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.biz-banner { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; height: 164px; padding: 22px 30px; overflow: hidden; color: #fff; }
.biz-banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(1.06) saturate(1.05); }
.biz[data-biz="bakery"] .biz-banner img { object-position: 50% 30%; }
.biz-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 140% at 0% 100%, rgb(8 39 51 / 82%), transparent 70%), linear-gradient(180deg, rgb(8 39 51 / 8%) 0%, transparent 34%, rgb(8 39 51 / 46%) 100%); }
.biz-sector { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.biz-banner h2 { margin-top: 6px; color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.02; letter-spacing: -.035em; }
.biz-banner h2 .serif { color: #cdebdc; font-size: 1.08em; }
.biz-body { display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 16px 30px 30px; }

/* Stage tabs */
.biz-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border: 1px solid var(--hairline); border-radius: 22px; background: #eef3f1; }
.biz-tabs button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--ink-soft); font-size: .9375rem; font-weight: 650; text-align: left; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, border-color .2s ease; }
.biz-tabs button:hover { background: rgb(255 255 255 / 60%); color: var(--ink); }
.biz-tabs button[aria-selected="true"] { border-color: rgb(47 93 80 / 38%); background: #fff; box-shadow: 0 8px 20px rgb(8 39 51 / 9%); color: var(--ink); }
.tab-index { color: var(--ink-mute); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }
.tab-mark { display: inline-flex; }
.mk { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; }
.mk svg { width: 12px; height: 12px; stroke-width: 2.2; }
.mk--done { background: #d9eee0; color: var(--fjord-spruce); }
.mk--open { background: #f6e3b4; color: #4a3408; }
.mk--open circle { fill: currentColor; }
.mk--lock { background: #e3ecea; color: var(--ink-mute); }
.mk--changes { background: #d9e8f4; color: #12384f; }

/* Panels */
.panel { display: flex; flex-direction: column; gap: 24px; animation: panel-in .45s var(--ease-out) both; }
.panel > * { min-width: 0; }
.panel[data-panel="brand"] .panel-foot, .plan-action, .next-row--wide { margin-top: auto; }
@media (min-width: 1181px) { .biz-body { min-height: 998px; } }
@media (min-width: 761px) { .content-grid { min-height: 506px; } }
.panel:focus-visible { outline-offset: 6px; }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.panel-foot { display: flex; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.strategy > div { padding: 20px 0; border-top: 1px solid var(--hairline); }
.strategy > div:first-child { padding-top: 4px; border-top: 0; }
.strategy dt, .field-label { color: var(--fjord-spruce); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.strategy dd { margin-top: 8px; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }
.strategy dd.promise { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.16; letter-spacing: -.03em; }
.kit { display: grid; align-content: start; gap: 14px; padding: 18px; border: 1px solid var(--hairline); border-radius: 26px; background: var(--surface-soft); }
.kit-label { color: var(--ink); font-size: .9375rem; font-weight: 650; }
.kit-lockup { position: relative; isolation: isolate; display: grid; align-content: space-between; gap: 18px; min-height: 196px; padding: 20px; overflow: hidden; border-radius: 18px; background: var(--p4); color: var(--p1); }
.kit-lockup::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: var(--p3); opacity: .8; }
.kit-lockup::after { content: ""; position: absolute; z-index: -1; right: 40px; bottom: -70px; width: 140px; height: 140px; border-radius: 50%; background: var(--p2); opacity: .22; }
.kit-lockup__sector { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
.kit-lockup__name { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1; letter-spacing: -.035em; }
.kit-lockup__name b { font-weight: 600; }
.kit-lockup__name i { color: var(--p2); font-size: 1.1em; }
.kit-type { justify-self: start; display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 14px; background: rgb(255 255 255 / 94%); color: var(--fjord-deep); font-size: 1.6rem; line-height: 1; }
.kit-type .grot { font-family: var(--font-display); font-weight: 650; letter-spacing: -.03em; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sw { height: 46px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgb(8 39 51 / 10%); }
[data-palette="bakery"] { --p1: #f3e6cf; --p2: #e0ab5e; --p3: #7a5130; --p4: #2c2118; }
[data-palette="outdoor"] { --p1: #dfe6e8; --p2: #9dbccd; --p3: #2f5d50; --p4: #1b2a33; }
[data-palette="cafe"] { --p1: #efe7da; --p2: #8fb4c4; --p3: #8a6a4f; --p4: #26363f; }
.sw-1 { background: var(--p1); } .sw-2 { background: var(--p2); } .sw-3 { background: var(--p3); } .sw-4 { background: var(--p4); }

/* Plan */
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; }
.plan-head h3 { font-size: 1.4rem; letter-spacing: -.03em; }
.plan-summary { max-width: 58ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.plan-grid { container-type: inline-size; display: grid; gap: 12px; padding: 22px; border: 1px solid var(--hairline); border-radius: 26px; background: linear-gradient(180deg, #f8fbfa, #edf4f1); }
.plan-lane { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 14px; }
.plan-chan { font-size: .9375rem; font-weight: 650; }
.plan-weeks .plan-chan { color: var(--ink-mute); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plan-rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; min-height: 38px; }
.plan-lane:not(.plan-weeks) .plan-rail::before { content: ""; position: absolute; inset: 3px 0; border-radius: 999px; background: rgb(8 39 51 / 5%); }
.plan-weeks .plan-rail b { color: var(--ink-mute); font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; }
.bar { position: relative; display: flex; align-items: center; grid-row: 1; height: 30px; padding: 0 14px; overflow: hidden; border-radius: 999px; background: var(--fjord-spruce); color: #fff; font-size: .8125rem; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 6px 14px rgb(8 39 51 / 14%); transform-origin: left; animation: bar-in .7s var(--ease-out) both; }
.bar.is-deep { background: var(--fjord-primary); }
.bar.is-alt { background: #9fc6b1; color: var(--fjord-deep); }
@keyframes bar-in { from { opacity: 0; transform: scaleX(.2); } }
@container (max-width: 420px) { .bar { padding: 0 10px; font-size: .75rem; } .bar.c-1-2, .bar.c-2-3, .bar.c-3-4, .bar.c-4-5 { padding: 0; font-size: 0; } }
.c-1-2 { grid-column: 1 / 2; } .c-1-3 { grid-column: 1 / 3; } .c-1-4 { grid-column: 1 / 4; } .c-1-5 { grid-column: 1 / 5; }
.c-2-3 { grid-column: 2 / 3; } .c-2-4 { grid-column: 2 / 4; } .c-2-5 { grid-column: 2 / 5; }
.c-3-4 { grid-column: 3 / 4; } .c-3-5 { grid-column: 3 / 5; } .c-4-5 { grid-column: 4 / 5; }
.plan-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 16px 22px; border: 1px solid #ecd596; border-radius: 22px; background: #fff6dc; color: #4a3408; font-weight: 600; }

/* Content */
.content-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 32px; align-items: start; }
.post-card { position: relative; margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; background: #dde7e7; box-shadow: var(--shadow-lift); }
.post-card img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s ease, transform .6s var(--ease-out); }
.biz[data-content="locked"] .post-card img { filter: blur(10px) saturate(.5); transform: scale(1.08); }
.post-card figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.content-side { min-width: 0; }
.caption { margin: 10px 0 20px; padding-left: 18px; border-left: 3px solid #8fb9a3; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.36; letter-spacing: -.02em; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.checks li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: .875rem; line-height: 1.25; }
.checks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #e1eee8; color: var(--fjord-spruce); stroke-width: 2.4; }
.chip--ready svg { width: 12px; height: 12px; padding: 0; background: none; color: inherit; }
.try-hint { display: none; margin-top: 22px; color: var(--fjord-spruce); font-size: .875rem; font-weight: 650; }
.try-hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--fjord-spruce); box-shadow: 0 0 0 0 rgb(47 93 80 / 40%); animation: ping 2s ease-out 3; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(47 93 80 / 40%); } 100% { box-shadow: 0 0 0 10px rgb(47 93 80 / 0%); } }
.try-hint + .actions { margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.changes-form { display: grid; gap: 14px; margin-top: 24px; padding: 20px; border: 1px solid var(--hairline); border-radius: 22px; background: var(--surface-soft); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-chip { min-height: 42px; padding: 0 16px; border: 1px solid rgb(8 39 51 / 18%); border-radius: 999px; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 600; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.quick-chip:hover { border-color: var(--fjord-primary); }
.quick-chip[aria-pressed="true"] { border-color: var(--fjord-primary); background: var(--fjord-primary); color: #fff; }
.note { width: 100%; min-height: 88px; padding: 12px 14px; border: 1px solid rgb(8 39 51 / 26%); border-radius: 14px; background: #fff; color: var(--ink); font-size: .9688rem; line-height: 1.5; resize: vertical; }
.note::placeholder { color: #5f6f76; }
.changes-form .actions { margin-top: 0; }
.result { display: grid; justify-items: start; gap: 14px; margin-top: 24px; padding: 20px 22px; border-radius: 22px; }
.result:focus-visible { outline-offset: 4px; }
.result p:not(.result-title) { max-width: 54ch; color: var(--ink-soft); font-size: .9688rem; line-height: 1.6; }
.result--approved { border: 1px solid #bfe0c8; background: #eaf6ee; }
.result--changes { border: 1px solid #c5d9ea; background: #eaf2f8; }
.echo { display: grid; justify-items: start; gap: 10px; }
.echo:empty { display: none; }
.echo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.echo-chips::before { content: attr(data-label); color: var(--ink-mute); font-size: .8125rem; font-weight: 650; margin-right: 4px; }
.echo-chips .chip { border: 1px solid #b9d0e2; background: #fff; color: #12384f; }
.echo-note { max-width: 54ch; padding-left: 14px; border-left: 3px solid #9dbccd; color: var(--ink); font-size: .9688rem; line-height: 1.5; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; width: 100%; }
.result-actions .button { min-height: 44px; }
.result-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fjord-primary); font-size: .9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.result-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.result-link:hover svg { transform: translateX(3px); }
.from-plan { margin-bottom: 14px; }
.locked { display: grid; justify-items: start; gap: 16px; padding: 30px; border: 1px dashed rgb(8 39 51 / 26%); border-radius: 26px; background: var(--surface-soft); }
.locked-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: #fff; color: var(--fjord-primary); box-shadow: var(--shadow-rest); }
.locked-icon svg { width: 22px; height: 22px; }
.locked p { max-width: 36ch; color: var(--ink); font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }

/* Toast */
.sample-toast { position: fixed; top: 88px; left: 50%; z-index: 60; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 13px 22px; border-radius: 18px; background: var(--fjord-deep); color: #fff; font-size: .9063rem; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 0 20px 44px rgb(8 39 51 / 34%); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-50%, -12px, 0); transition: opacity .25s ease, transform .35s var(--ease-out), visibility 0s linear .35s; }
.sample-toast[data-show] { opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0); transition-delay: 0s; }
.sample-toast[data-show="approved"], .sample-toast[data-show="changes"] { top: auto; bottom: auto; left: -9999px; width: 1px; height: 1px; max-width: 1px; padding: 0; overflow: hidden; opacity: 1; visibility: visible; box-shadow: none; transform: none; clip-path: inset(50%); }
.sample-toast [data-toast] { display: none; }
.sample-toast[data-show="approved"] [data-toast="approved"], .sample-toast[data-show="changes"] [data-toast="changes"], .sample-toast[data-show="plan"] [data-toast="plan"], .sample-toast[data-show="reset"] [data-toast="reset"], .sample-toast[data-show="undo"] [data-toast="undo"] { display: inline; }

/* Closing CTA */
.sample-cta-wrap { padding: 72px 0 40px; }
.sample-cta { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 72px); border-radius: 36px; background: radial-gradient(62% 80% at 50% 46%, rgb(8 39 51 / 76%), transparent 78%), linear-gradient(180deg, rgb(8 39 51 / 46%), rgb(8 39 51 / 76%)), url("/landing/assets/img/L03/lp-fjord-band.webp") center 40% / cover, var(--fjord-deep); color: #fff; text-align: center; box-shadow: 0 40px 90px rgb(8 39 51 / 26%); }
.sample-cta .eyebrow { color: #fff; }
.sample-cta h2 { max-width: 20ch; margin: 16px auto 18px; color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; }
.sample-cta h2 span { display: block; }
.sample-cta h2 .serif { color: #bfe0d1; font-size: 1.1em; }
.sample-cta p:not(.eyebrow) { max-width: 52ch; margin-inline: auto; color: #d9e8ea; font-size: 1.0625rem; line-height: 1.65; }
.sample-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.sample-cta a:focus-visible { outline-color: #bfddd1; }
.sample-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 28px 44px; }
.sample-footer p { max-width: 70ch; color: var(--ink-mute); font-size: .875rem; line-height: 1.6; }

@media (max-width: 1080px) {
  .sample-hero { padding: 108px 0 112px; }
  .sample-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .sample-guide { max-width: 560px; padding: 16px 18px; border-radius: 24px; }
  .sample-guide ol, .sample-guide .sp-glance__label { display: none; }
  .sample-guide .sample-notice { padding-top: 0; border-top: 0; }
  .sample-stage { margin-top: -64px; }
}
@media (max-width: 1180px) {
  .try-hint { display: block; }
  .sample-app { grid-template-columns: minmax(0, 1fr); }
  .sample-portfolio { gap: 14px; padding: 20px 16px 18px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .sp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-item { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "img name" "img status"; gap: 4px 12px; padding: 10px; }
  .sp-item img { grid-row: 1 / span 2; align-self: center; width: 52px; height: 52px; border-radius: 14px; }
  .sp-status { justify-self: start; }
  .sp-note, .sp-glance, .sp-guide, .sp-foot { display: none; }
  .sp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .sp-strip li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 16px; background: rgb(255 255 255 / 70%); color: var(--ink-soft); font-size: .75rem; line-height: 1.25; }
  .sp-strip b { display: grid; min-width: 28px; height: 28px; padding: 0 6px; place-items: center; border-radius: 9px; background: #e3ecea; color: var(--fjord-primary); font-family: var(--font-display); font-size: .9375rem; font-weight: 650; }
  .sp-strip .is-review b { background: #f6e3b4; color: #4a3408; }
  .sp-strip .is-ready b { background: #cfebd5; color: #0f3b25; }
  .sp-strip .is-changes b { background: #d9e8f4; color: #12384f; }
  .sp-item:hover { transform: none; }
  .biz-body { padding-inline: 22px; }
  .biz-banner { padding-inline: 22px; }
}
@media (max-width: 760px) {
  .brand-grid, .content-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .voice-pair { grid-template-columns: minmax(0, 1fr); }
  .post-card { max-width: 380px; }
  .biz[data-content="review"] .post-card, .biz[data-content="composing"] .post-card, .biz[data-content="changes"] .post-card, .biz[data-content="approved"] .post-card { aspect-ratio: 4 / 3; max-width: none; }
  .biz[data-content="locked"] .content-side { order: -1; }
  .biz[data-content="locked"] .post-card { max-height: 180px; aspect-ratio: auto; }
  .plan-lane { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .sample-hero { padding: 96px 0 96px; }
  .sample-stage { margin-top: -52px; }
  .sample-notice { grid-template-columns: auto 1fr; }
  .notice-reset { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .sp-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sp-item { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "img name" "img status"; gap: 4px 12px; padding: 8px 10px 8px 8px; border-radius: 18px; }
  .sp-item img { grid-row: 1 / span 2; align-self: center; }
  .sp-status { justify-self: start; }
  .sp-item img { width: 52px; height: 52px; border-radius: 14px; }
  .sp-name b { font-size: .9688rem; }
  .sp-name span { display: block; font-size: .75rem; }
  .sp-glance { display: none; }
  .sp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sp-strip li { flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 8px; font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
  .biz-banner { height: 140px; padding: 16px 18px; }
  .biz-banner .chip--glass { display: none; }
  .biz-body { gap: 18px; padding: 16px 16px 26px; }
  .biz-tabs { gap: 4px; padding: 4px; border-radius: 18px; }
  .biz-tabs button { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; min-height: 76px; padding: 10px 10px 10px 12px; overflow-wrap: break-word; hyphens: manual; font-size: .8125rem; line-height: 1.25; }
  .biz-tabs .tab-mark { position: absolute; top: 8px; right: 8px; }
  .biz-tabs button { position: relative; }
  .plan-grid { padding: 16px; }
  .plan-head h3 { font-size: 1.2rem; }
  .actions .button { flex: 1 1 100%; }
  .content-side > .actions[data-when] { position: sticky; z-index: 5; bottom: 12px; flex-wrap: nowrap; gap: 8px; margin-top: 18px; padding: 8px; border: 1px solid var(--hairline); border-radius: 24px; background: rgb(255 255 255 / 94%); box-shadow: 0 12px 30px rgb(8 39 51 / 16%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .content-side > .actions[data-when] .button { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .sample-toast { top: 76px; }
  .sample-app :is(button, a, textarea, [tabindex]):focus-visible { scroll-margin-bottom: 96px; }
  .content-side { padding-bottom: 8px; }
}
@media (max-width: 640px) {
  .next-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day arrow" "text text"; gap: 6px 12px; padding: 10px 12px; }
  .next-row .next-day { grid-area: day; justify-self: start; }
  .next-row svg { grid-area: arrow; }
  .next-row .next-text { grid-area: text; }
}
@media (max-width: 420px) {
  .biz-tabs button { padding: 10px 8px 10px 10px; font-size: .75rem; letter-spacing: -.01em; }
  .sp-strip { grid-template-columns: 1fr 1.3fr 1fr 1fr; gap: 4px; }
  .sp-strip li { overflow-wrap: normal; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .bar { animation: none; }
  .sp-item:hover { transform: none; }
}
@media (forced-colors: active) {
  .chip, .biz-tabs button[aria-selected="true"], .sp-item[aria-current="true"] { border: 1px solid CanvasText; }
}

/* A short, labelled, simulated drafting moment the first time a business is opened */
.drafting { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, rgb(238 243 245 / 78%), rgb(238 243 245 / 90%)); color: var(--fjord-primary); font-size: .9375rem; font-weight: 650; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.biz.is-drafting .drafting { display: flex; animation: draft-in .25s ease both; }
.biz.is-drafting .drafting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 70%) 50%, transparent 70%); background-size: 220% 100%; animation: sweep 1s ease-in-out both; }
.biz.is-drafting .drafting > * { position: relative; z-index: 1; }
.biz.is-drafting .drafting::after { z-index: 0; }
.drafting__dots { display: inline-flex; gap: 6px; }
.drafting__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--fjord-primary); animation: dot 0.9s ease-in-out infinite; }
.drafting__dots i:nth-child(2) { animation-delay: .15s; } .drafting__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes draft-in { from { opacity: 0; } }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .biz.is-drafting .drafting { display: none; } }
/* Micro-interactions */
.sample-app .button { transition: transform .18s var(--ease-out), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.sample-app .button:active { transform: scale(.975); }
.result--approved .chip svg { animation: check-pop .5s var(--ease-out) .05s both; }
@keyframes check-pop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.35) rotate(4deg); opacity: 1; } 100% { transform: scale(1); } }
.chip--scheduled { animation: chip-in .45s var(--ease-out) both; }
@keyframes chip-in { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .result--approved .chip svg, .chip--scheduled { animation: none; } .sample-app .button:active { transform: none; } }

/* While the simulated draft is being made, the text beside the photo is dimmed and the notes appear one by one */
.biz .draft { transition: opacity .3s ease; }
.biz.is-drafting .draft { opacity: .38; }
.biz.is-drafting .checks li { animation: note-in .5s var(--ease-out) both; }
.biz.is-drafting .checks li:nth-child(1) { animation-delay: .35s; }
.biz.is-drafting .checks li:nth-child(2) { animation-delay: .5s; }
.biz.is-drafting .checks li:nth-child(3) { animation-delay: .65s; }
@keyframes note-in { from { opacity: 0; transform: translateY(5px); } }

/* Product chrome: a real app frame, not a widget */
.app-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; min-height: 54px; padding: 0 20px; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, #fcfdfd, #f0f5f3); }
.app-bar__dots { display: inline-flex; gap: 7px; }
.app-bar__dots i { width: 11px; height: 11px; border-radius: 50%; background: #d3dedb; box-shadow: inset 0 0 0 1px rgb(8 39 51 / 8%); }
.app-bar__crumb { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--ink-mute); font-size: .8125rem; white-space: nowrap; }
.app-bar__crumb svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #8da0a6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crumb-biz, .crumb-stage { display: none; }
.crumb-biz { color: var(--ink); font-weight: 650; }
.crumb-stage { color: var(--ink-soft); }
.sample-app[data-biz="bakery"] .crumb-biz[data-for="bakery"], .sample-app[data-biz="outdoor"] .crumb-biz[data-for="outdoor"], .sample-app[data-biz="cafe"] .crumb-biz[data-for="cafe"], .sample-app[data-tab="brand"] .crumb-stage[data-for="brand"], .sample-app[data-tab="plan"] .crumb-stage[data-for="plan"], .sample-app[data-tab="content"] .crumb-stage[data-for="content"] { display: inline; }
.app-bar__pill { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 13px; border-radius: 999px; background: #e3efe9; color: var(--fjord-primary); font-size: .75rem; font-weight: 700; letter-spacing: .01em; }
.app-bar__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--fjord-spruce); box-shadow: 0 0 0 0 rgb(47 93 80 / 45%); animation: ping 2.4s ease-out 2; }
.app-bar__avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: linear-gradient(150deg, #2f5d50, var(--fjord-primary)); box-shadow: 0 4px 10px rgb(8 39 51 / 22%); }
.app-bar__avatar svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-progress { grid-area: prog; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.sp-progress i { height: 4px; border-radius: 999px; background: rgb(8 39 51 / 12%); transition: background-color .4s ease; }
.sp-progress i[data-seg="brand"] { background: var(--fjord-spruce); }
.sp-item[data-plan="done"] .sp-progress i[data-seg="plan"] { background: var(--fjord-spruce); }
.sp-item[data-plan="review"] .sp-progress i[data-seg="plan"] { background: #e3b94c; }
.sp-item[data-content="approved"] .sp-progress i[data-seg="content"] { background: var(--fjord-spruce); }
.sp-item[data-content="review"] .sp-progress i[data-seg="content"], .sp-item[data-content="composing"] .sp-progress i[data-seg="content"] { background: #e3b94c; }
.sp-item[data-content="changes"] .sp-progress i[data-seg="content"] { background: #7fb0d6; }
@media (max-width: 1180px) { .sp-progress { display: none; } .app-bar { min-height: 48px; padding: 0 14px; } }
@media (max-width: 640px) { .app-bar__dots, .app-bar__avatar { display: none; } .crumb-biz { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; } .app-bar__pill { padding-inline: 10px; } }

/* This week: a visual rail instead of a text list */
.week { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.week-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.week-rail > li { display: grid; min-width: 0; }
.week-card { position: relative; display: grid; grid-template-rows: auto 1fr; width: 100%; overflow: hidden; border: 1px solid var(--hairline); border-radius: 22px; background: #fff; box-shadow: var(--shadow-rest); color: var(--ink); text-align: left; transition: transform .35s var(--ease-out), box-shadow .3s ease, border-color .2s ease; }
button.week-card:hover { border-color: rgb(47 93 80 / 38%); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.week-card--now { border-color: rgb(47 93 80 / 42%); box-shadow: 0 0 0 3px rgb(143 188 168 / 22%), var(--shadow-rest); }
.week-thumb { display: block; aspect-ratio: 16 / 9.6; overflow: hidden; background: #dde7e7; }
.week-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
button.week-card:hover .week-thumb img { transform: scale(1.05); }
.week-body { display: grid; align-content: start; gap: 10px; padding: 14px 16px 16px; }
.week-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.week-title { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.sp-activity { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--hairline); border-radius: 20px; background: rgb(255 255 255 / 55%); }
.sp-activity ul { display: grid; gap: 12px; }
.sp-activity li { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--ink-soft); font-size: .8125rem; line-height: 1.4; }
.sp-activity b { display: block; color: var(--ink); font-weight: 650; }
.sp-activity__dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--fjord-spruce); box-shadow: 0 0 0 3px rgb(143 188 168 / 28%); }
@media (max-width: 1180px) { .sp-activity { display: none; } }
@media (max-width: 760px) {
  .week-rail { grid-auto-columns: 74%; grid-auto-flow: column; grid-template-columns: none; margin-inline: -16px; padding: 4px 16px 14px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .week-rail::-webkit-scrollbar { display: none; }
  .week-rail > li { scroll-snap-align: start; }
}

/* Brand moodboard, plan figures, locked preview */
.mood { display: grid; gap: 12px; }
.mood-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; height: 156px; }
.mood-grid li { overflow: hidden; border-radius: 20px; background: #dde7e7; box-shadow: var(--shadow-rest); }
.mood-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.mood-grid li:hover img { transform: scale(1.06); }
.plan-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan-kpi { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; box-shadow: var(--shadow-rest); }
.plan-kpi b { color: var(--fjord-primary); font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.plan-kpi span { color: var(--ink-mute); font-size: .8125rem; line-height: 1.3; }
.biz[data-content="locked"] .week-card--now .week-thumb img { filter: blur(8px) saturate(.6); transform: scale(1.1); }
.week .chip svg { width: 12px; height: 12px; }
@media (max-width: 760px) { .mood-grid { height: 112px; gap: 8px; } .plan-kpi { padding: 12px 14px; } .plan-kpi b { font-size: 1.7rem; } }

/* What you just saw */
.seen { padding: clamp(64px, 8vw, 104px) 0 0; }
.seen-head { max-width: 760px; }
.seen-head h2 { margin-top: 16px; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.04; letter-spacing: -.04em; }
.seen-head h2 span { display: block; }
.seen-head h2 .serif { color: var(--fjord-spruce); font-size: 1.1em; letter-spacing: -.02em; }
.seen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.seen-card { display: flex; min-width: 0; flex-direction: column; padding: 14px 14px 30px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-rest); transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.seen-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.seen-visual { position: relative; display: block; height: 200px; overflow: hidden; border-radius: 18px; background: #e8f0ee; }
.seen-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.seen-card:hover .seen-visual img { transform: scale(1.04); }
.seen-number { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / 90%); color: var(--fjord-primary); font-family: var(--font-mono); font-size: .75rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seen-card h3 { margin: 22px 18px 10px; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; }
.seen-card p { margin: 0 18px; color: var(--ink-soft); font-size: .9688rem; line-height: 1.7; }
[data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease-out) calc(var(--reveal-index, 0) * 90ms), transform .8s var(--ease-out) calc(var(--reveal-index, 0) * 90ms); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (max-width: 1080px) { .seen-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .seen-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 8px; align-content: center; padding: 14px; } .seen-visual { grid-row: 1 / span 2; height: 100%; min-height: 200px; } .seen-card h3 { margin-top: 10px; } }
@media (max-width: 640px) { .seen-card { display: flex; } .seen-visual { height: 180px; } .seen-card h3 { margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* App bar on small screens: business and stage first, pill never wraps */
.app-bar__pill { flex: none; white-space: nowrap; }
.app-bar__crumb { flex: 1 1 auto; overflow: hidden; }
@media (max-width: 640px) {
  .app-bar { gap: 10px; }
  .app-bar__crumb > span:first-child, .app-bar__crumb > svg:first-of-type { display: none; }
  .crumb-biz { max-width: none; overflow: visible; }
  .app-bar__pill { padding: 5px 10px; font-size: .6875rem; }
}

/* Compact first-week preview inside the Plan tab; roomier moodboard on desktop */
.week--compact { padding-top: 0; border-top: 0; }
.week--compact .week-card { grid-template-rows: none; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; border-radius: 18px; }
.week--compact .week-thumb { aspect-ratio: auto; height: 100%; min-height: 96px; }
.week--compact .week-body { gap: 6px; padding: 10px 12px; }
.week--compact .week-title { font-size: .875rem; line-height: 1.35; }
@media (min-width: 1181px) { .mood-grid { height: 236px; } }
@media (max-width: 1080px) { .week--compact .week-rail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .week--compact .week-rail { grid-auto-flow: row; grid-auto-columns: auto; margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; } .week--compact .week-card { grid-template-columns: 84px minmax(0, 1fr); } }