/* SwishWork crew hub: one job's trip through the crew. Page-local; shared/ and engine/ untouched. */

:root {
  --sc-t-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --sc-canvas: var(--sw-bg);
  --sc-surface: var(--sw-surface);
  --sc-ink: var(--sw-ink);
  --sc-ink-soft: var(--sw-ink-muted);
  --sc-gutter: clamp(1rem, 4.4vw, 5rem);
  --serif: var(--sw-font-serif);
  --sans: var(--sw-font-sans);
  --hair: var(--sw-border);
  --hair-strong: var(--sw-border-strong);
  --bezel: #16140F;
  --shadow: 0 30px 60px -28px rgb(40 30 20 / 0.35), 0 8px 18px -10px rgb(40 30 20 / 0.18);
  --bubble-c: #1E1C18; --bubble-c-ink: #FAFAF7;
}
:root[data-theme="dark"] {
  --bezel: #2B2824;
  --shadow: 0 30px 60px -24px rgb(0 0 0 / 0.7), 0 0 0 1px #2A2622;
  --bubble-c: #EDE8E0; --bubble-c-ink: #0C0B0A;
}

html { background: var(--sw-bg); }
body.hub { margin: 0; background: var(--sw-bg); color: var(--sw-ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.hub :focus-visible { outline: 2px solid var(--sw-coral); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--sw-surface); color: var(--sw-ink); padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* marks are masks so night mode can recolour their strokes */
.mk { display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; background: var(--mi, currentColor); -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }

/* ------------------------------------------------------------ buttons -- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.3rem; border-radius: 999px; border: 1.5px solid var(--sw-border-strong); background: var(--sw-surface); color: var(--sw-ink); font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: background 160ms ease; }
.btn:hover { background: var(--sw-surface-hover); }
.btn--coral { background: var(--sw-coral); border-color: var(--sw-coral); color: #fff; font-size: 1.2rem; min-height: 56px; }
.btn--coral:hover { background: var(--sw-coral-hover); border-color: var(--sw-coral-hover); }
:root[data-theme="dark"] .btn--coral { color: #0C0B0A; }
.link { color: var(--sw-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }


/* story tokens (2026-10-02, phone-first story): page colours map onto the shared crew tokens;
   the phone screen keeps its own app palette, light by default, dark under night mode */
:root {
  --bg: var(--sw-bg); --surface: var(--sw-surface); --ink: var(--sw-ink); --mute: var(--sw-ink-muted); --quiet: var(--sw-ink-quiet);
  --line: var(--sw-border); --line-2: var(--sw-border-strong); --coral: var(--sw-coral);
  --sophie: var(--sophie-ink); --wren: var(--wren-ink); --sloane: var(--sloane-ink); --pi: var(--sophie);
  --scr: #FFFFFF; --scr-2: #F4F3EE; --scr-ink: #0A0A0A; --scr-mute: #6B6B66; --scr-line: #EAEAE5;
  --bub-w: #F0EEE9; --bub-c: #1E1C18; --bub-c-ink: #FAFAF7; --glass: rgb(255 255 255 / .95);
  --shadow-phone: 0 40px 80px -36px rgb(40 30 20 / .45), 0 10px 24px -12px rgb(40 30 20 / .22);
  --app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --bezel: #3A3632;
  --scr: #121110; --scr-2: #1C1A17; --scr-ink: #F5F2ED; --scr-mute: #A59F96; --scr-line: #2A2622;
  --bub-w: #1F1C19; --bub-c: #EDE8E0; --bub-c-ink: #0C0B0A; --glass: rgb(38 35 31 / .97);
  --shadow-phone: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px #2A2622;
}
.mk--sophie { --mk: url(/team/shared/marks/sophie.svg); } .mk--wren { --mk: url(/team/shared/marks/wren.svg); } .mk--sloane { --mk: url(/team/shared/marks/sloane.svg); }

/* the hub's bar is quiet: no Start in it (Start lives at the end of the story and in the offer).
   On phones it steps aside while the story fills the screen. */
body[data-who="hub"] .crew-bar__cta { display: none; }
body[data-who="hub"] .crew-bar { background: var(--sw-bg); transition: transform 380ms cubic-bezier(.2,.7,.2,1), opacity 300ms ease; }
body[data-who="hub"] .crew-bar.is-away { transform: translateY(-110%); opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  body[data-who="hub"] .crew-bar__signin { display: inline; margin-left: auto; }
}

/* ============================================================== story == */
/* One sticky stage. On a phone the device grows until its screen IS the viewport and the words live
   in a band at the bottom of that screen; desktop keeps a framed phone beside the headline. */
.story { position: relative; height: 820svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 50% at 50% 55%, color-mix(in oklab, var(--pi) 16%, transparent), transparent 72%); transition: background 700ms ease; }

.intro, .outro { position: absolute; z-index: 1; left: 0; right: 0; padding: 0 20px; box-sizing: border-box; }
.intro { top: calc(var(--crew-bar-h) + 20px); }
.intro h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 8.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance; }
.intro p { font-size: 1.05rem; line-height: 1.5; color: var(--mute); margin: 0; max-width: 34rem; text-wrap: pretty; }
.outro { top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; display: grid; gap: 8px; justify-items: center; text-align: center; }
.outro.is-on { pointer-events: auto; }
.outro__k { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); margin: 0; }
.outro h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 8.6vw, 3.4rem); line-height: 1.04; margin: 0; letter-spacing: -0.015em; }
.outro__sub { margin: 0 0 6px; font-size: 1.05rem; color: var(--mute); }
.outro__price { font-size: .98rem; color: var(--mute); margin: 2px 0 0; }
.outro__price b { color: var(--ink); }
.outro .btn--coral { padding: 0 1.6rem; }

/* the device: laid out at its full size, shrunk by transform */
.device { position: absolute; left: 0; top: 0; z-index: 2; width: var(--dw); height: var(--dh); transform-origin: 0 0; transform: translate(var(--x), var(--y)) scale(var(--s)); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 var(--bz) var(--bezel), var(--shadow-phone); background: var(--scr); will-change: transform; }
.screen { height: 100%; line-height: 1.35; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; color: var(--scr-ink); font-family: var(--app); }

/* top: who holds the job, and whose phone this is */
.top { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px; background: var(--scr); position: relative; z-index: 3; }
.segs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.segs li { display: grid; gap: 6px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--scr-mute); transition: color 240ms ease; min-width: 0; }
.segs li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segs li.is-on { color: var(--scr-ink); }
.segs i { display: block; height: 3px; border-radius: 3px; background: var(--scr-line); overflow: hidden; }
.segs i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--scr-ink); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.owner { position: relative; height: 16px; margin: 8px 0 0; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--scr-mute); text-align: center; }
.owner span { position: absolute; inset: 0; opacity: 0; transform: translateY(5px); transition: opacity 260ms ease, transform 260ms ease; }
.owner span.is-on { opacity: 1; transform: none; }

.app { position: relative; overflow: hidden; background: var(--scr); border-top: 1px solid var(--scr-line); }
.scn { position: absolute; inset: 0; background: var(--scr); will-change: transform, opacity; }

/* the words, inside the phone */
.cap { display: grid; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: var(--sans); position: relative; z-index: 3; }
.cap article { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 280ms ease, transform 340ms cubic-bezier(.2,.7,.2,1); }
.cap article.is-on { opacity: 1; transform: none; }
.cap__k { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ci); }
.cap__k .mk { --mi: var(--ci); width: 15px; height: 15px; }
.cap h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; margin: 8px 0 6px; text-wrap: balance; }
.cap p:last-child { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--mute); text-wrap: pretty; }

/* ---------------------------------------------------------- app parts -- */
.appbar { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--scr-line); font-size: 17px; font-weight: 700; flex: none; }
.appbar small { font-size: 14px; font-weight: 500; color: var(--scr-mute); }
.fb { letter-spacing: -0.02em; font-size: 21px; font-weight: 800; }
.dots { display: flex; gap: 6px; } .dots i { width: 30px; height: 30px; border-radius: 50%; background: var(--scr-2); }
.url { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin: 6px 12px; border-radius: 10px; background: var(--scr-2); font-size: 13px; color: var(--scr-mute); white-space: nowrap; overflow: hidden; }
.url svg { width: 11px; height: 11px; flex: none; }

/* feed */
.scn--feed { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.feedwin { position: relative; overflow: hidden; }
.feed { will-change: transform; }
.post { padding: 12px 0; border-bottom: 8px solid var(--scr-2); }
.post--ghost { padding: 14px 16px; display: grid; grid-template-columns: 36px 1fr; gap: 8px 10px; }
.post--ghost .av { width: 36px; height: 36px; border-radius: 50%; background: var(--scr-2); grid-row: span 2; }
.post--ghost .ln { height: 9px; border-radius: 5px; background: var(--scr-2); }
.post--ghost .ln--b { width: 45%; }
.post--ghost .blk { grid-column: 1 / -1; height: 150px; border-radius: 6px; background: var(--scr-2); margin-top: 4px; }
.post__head { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.post__head b { display: block; font-size: 15px; }
.post__head small { display: block; font-size: 12.5px; color: var(--scr-mute); }
.av-s { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bub-c); color: var(--bub-c-ink); font-weight: 800; font-size: 16px; }
.post__txt { margin: 10px 16px; font-size: 15px; line-height: 1.38; }
.post__img { display: block; width: 100%; height: auto; aspect-ratio: 1128 / 680; object-fit: cover; }
.post__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 2px; }
.post__cta small { display: block; font-size: 12px; color: var(--scr-mute); text-transform: uppercase; letter-spacing: .03em; }
.post__cta b { display: block; font-size: 15px; }
.post__btn { position: relative; overflow: hidden; flex: none; padding: 9px 14px; border-radius: 8px; background: var(--scr-2); font-weight: 700; font-size: 14.5px; }
.tap { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--scr-ink); opacity: var(--to, 0); transform: scale(var(--ts, 0)); pointer-events: none; }

/* profile chat */
.scn--chat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; box-shadow: 0 -20px 40px -20px rgb(0 0 0 / .4); }
.pro { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; border-bottom: 1px solid var(--scr-line); }
.pro__av { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex: none; }
.pro__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro b { display: block; font-size: 15px; }
.pro small { display: block; font-size: 12.5px; color: var(--scr-mute); }
.chat { position: relative; overflow: hidden; }
.chat__list { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 7px; will-change: transform; }
.msg { margin: 0; max-width: 80%; padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1); }
.msg.is-on { opacity: 1; transform: none; }
.msg--w { align-self: flex-start; background: var(--bub-w); border-bottom-left-radius: 6px; }
.msg--w b { display: block; font-size: 12px; color: var(--wren); margin-bottom: 2px; }
.msg--c { align-self: flex-end; background: var(--bub-c); color: var(--bub-c-ink); border-bottom-right-radius: 6px; }
.msg--pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; width: 72%; }
.msg--pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.scope { align-self: stretch; max-width: none; padding: 14px; border-radius: 16px; background: var(--scr); border: 1px solid var(--scr-line); box-shadow: 0 10px 28px -16px rgb(0 0 0 / .35); }
.scope__k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wren); }
.scope__k span { color: var(--scr-mute); font-weight: 600; letter-spacing: .04em; text-transform: none; }
.scope__t { margin: 4px 0 8px; font-family: var(--serif); font-size: 21px; }
.rows { margin: 0; display: grid; }
.rows div { display: grid; grid-template-columns: 7.6em 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--scr-line); font-size: 13.5px; }
.rows dt { color: var(--scr-mute); } .rows dd { margin: 0; }
.compose { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--scr-line); }
.compose__in { flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 19px; background: var(--scr-2); color: var(--scr-mute); font-size: 14.5px; white-space: nowrap; transition: flex 300ms ease, opacity 200ms ease, padding 300ms ease; }
.compose__send { position: relative; height: 38px; min-width: 64px; display: grid; place-items: center; padding: 0 14px; border-radius: 19px; background: var(--scr-2); color: var(--scr-mute); font-weight: 700; font-size: 14px; transition: background 220ms ease, color 220ms ease; }
.compose__send span { grid-area: 1 / 1; display: none; white-space: nowrap; animation: fadein 220ms ease; }
@keyframes fadein { from { opacity: 0; } }
.compose[data-st="0"] .compose__send span[data-s="0"], .compose[data-st="r"] .compose__send span[data-s="0"],
.compose[data-st="1"] .compose__send span[data-s="1"], .compose[data-st="2"] .compose__send span[data-s="2"] { display: block; }
.compose[data-st="r"] .compose__send { background: var(--scr-ink); color: var(--scr); }
.compose[data-st="1"] .compose__in, .compose[data-st="2"] .compose__in { flex: 0 0 0; padding: 0; opacity: 0; }
.compose[data-st="1"] .compose__send, .compose[data-st="2"] .compose__send { flex: 1; }
.compose[data-st="2"] .compose__send { background: var(--bub-w); color: var(--scr-ink); }

/* mail */
.mrow { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--scr-line); }
.mrow b { display: block; font-size: 15px; }
.mrow em { display: block; font-style: normal; font-size: 14.5px; }
.mrow small { display: block; font-size: 13px; color: var(--scr-mute); margin-top: 1px; }
.mrow--new { background: var(--scr-2); }
.mrow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); margin-top: 5px; }
.mrow--ghost i { display: block; height: 9px; border-radius: 5px; background: var(--scr-2); margin: 4px 0 8px; }
.mrow--ghost i + i { width: 60%; margin: 0; }
.mlist { will-change: transform; }
.banner { position: absolute; z-index: 4; left: 8px; right: 8px; top: 8px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 36px -14px rgb(0 0 0 / .45); will-change: transform, opacity; }
.banner__ic { width: 36px; height: 36px; border-radius: 9px; background: var(--scr-ink); display: grid; place-items: center; }
.banner__ic svg { width: 20px; height: 20px; color: var(--scr); }
.banner b { display: block; font-size: 14.5px; }
.banner span span { display: block; font-size: 14px; }
.banner small { align-self: start; font-size: 12px; color: var(--scr-mute); }
.mopen { z-index: 5; display: grid; align-content: start; gap: 8px; padding: 0 16px 12px; overflow: hidden; }
.mopen__back { margin: 0 -16px 2px; height: 40px; }
.mopen__from b { display: block; font-size: 15.5px; }
.mopen__from small { font-size: 13px; color: var(--scr-mute); }
.mopen__brief { margin: 0; font-size: 15px; line-height: 1.38; }
.pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0; }
.pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; display: block; }
.pill { justify-self: start; position: relative; overflow: hidden; display: inline-flex; padding: 10px 18px; border-radius: 999px; background: var(--scr-ink); color: var(--scr); font-weight: 700; font-size: 14.5px; }
.pill--ghost { background: var(--scr-2); color: var(--scr-ink); }

/* camera */
.scn--cam { background: #000; overflow: hidden; }
.cam { position: absolute; inset: 0; }
.cam img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; will-change: transform, opacity; }
.cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .35), transparent 22%, transparent 55%, rgb(0 0 0 / .55)); }
.rec { position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 8px; background: #C9372C; color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.say { position: absolute; z-index: 2; left: 16px; right: 16px; top: 38%; display: grid; }
.say p { grid-area: 1 / 1; justify-self: center; margin: 0; padding: 8px 13px; border-radius: 10px; background: rgb(0 0 0 / .62); color: #fff; font-size: 16px; line-height: 1.35; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 260ms ease; }
.say p.is-on { opacity: 1; transform: none; }
.tray { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 16px; background: var(--glass); color: var(--scr-ink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tray__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--scr-2); display: grid; place-items: center; }
.tray__ic .mk { --mi: var(--sloane); width: 19px; height: 19px; }
.tray b { font-size: 14px; }
.tray em { font-style: normal; font-size: 13px; color: var(--scr-mute); margin-left: 6px; font-variant-numeric: tabular-nums; }
.tray small { display: block; font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam__stop { position: absolute; z-index: 2; left: 50%; bottom: 82px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; }
.cam__stop::after { content: ""; width: 22px; height: 22px; border-radius: 5px; background: #C9372C; }

/* worklists */
.wl { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.wl__head { padding: 14px 16px 6px; }
.wl__k { margin: 0; display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sloane); }
.wl__k span { color: var(--scr-mute); letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: 12.5px; }
.wl__t { margin: 4px 0 0; font-family: var(--serif); font-size: 23px; }
.wl__n { margin: 2px 0 0; font-size: 13.5px; color: var(--scr-mute); }
.lines { list-style: none; margin: 0; padding: 4px 16px; overflow: hidden; }
.lines li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; padding: 10px 0; border-top: 1px solid var(--scr-line); font-size: 15px; line-height: 1.3; }
.lines small { display: block; font-size: 12.5px; color: var(--scr-mute); margin-top: 2px; font-variant-numeric: tabular-nums; }
.box { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--line-2); margin-top: 1px; display: grid; place-items: center; transition: background 200ms ease, border-color 200ms ease; }
.box svg { width: 13px; height: 13px; color: var(--scr); opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 240ms cubic-bezier(.3,1.6,.5,1); }
.lines li.is-done .box { background: var(--sloane); border-color: var(--sloane); }
.lines li.is-done .box svg { opacity: 1; transform: none; }
.lines li.is-done > span { color: var(--scr-mute); }
.lines li.is-done > span > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.wl__foot { position: relative; min-height: 64px; border-top: 1px solid var(--scr-line); }
.wl__foot > div { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; transition: opacity 240ms ease, transform 280ms ease; }
.wl__foot > div[hidden] { display: flex !important; opacity: 0; transform: translateY(8px); pointer-events: none; }
.wl__foot small { margin-right: auto; font-size: 13px; color: var(--scr-mute); }


/* desktop keeps a framed phone */
@media (min-width: 861px) {
  .intro, .outro { top: 50%; bottom: auto; transform: translateY(-50%); left: var(--gl, 4rem); right: auto; width: min(30rem, 38vw); padding: 0; }
  .outro { justify-items: start; text-align: left; gap: 10px; }
  .intro h1, .outro h2 { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
}

/* ============================================================= ledger == */
.ledger { padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 10vh, 7rem); background: var(--sw-bg); }
.ledger__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.3rem + 2vw, 3.3rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 2.5rem; max-width: 20ch; text-wrap: balance; }
.ledger__grid { display: grid; grid-template-columns: 8.5rem repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(7, auto) auto; column-gap: 1rem; }
.ledger__keys, .col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.ledger__keys .k { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sw-ink-quiet); padding: 1rem 0 0.9rem; border-top: 1px solid var(--hair-strong); }
.ledger__keys .k--head, .ledger__keys .k--foot { border-top: 0; }
.col { background: var(--wash); border-radius: 14px; padding: 0 1.2rem 1.3rem; border: 1px solid color-mix(in oklab, var(--ink2) 14%, transparent); }
.col--sophie { --wash: var(--sophie-wash); --ink2: var(--sophie-ink); }
.col--wren { --wash: var(--wren-wash); --ink2: var(--wren-ink); }
.col--sloane { --wash: var(--sloane-wash); --ink2: var(--sloane-ink); }
.col__name { padding: 1.3rem 0 1rem; }
.col__name h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.02em; }
.col__who { margin: 0.2rem 0 0; display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--ink2); }
.col__who .mk { --mi: var(--ink2); }
.col__detail { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--sw-ink-muted); }
.col dl { display: contents; }
.col dl > div { padding: 0.95rem 0 0.9rem; border-top: 1px solid color-mix(in oklab, var(--ink2) 24%, transparent); }
.col dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.col dd { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.pp span { display: block; }
.pp__prob { color: var(--sw-ink-muted); }
.pp__prom { font-weight: 700; margin-top: 0.3rem; }
.col__links { margin: 0; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--ink2) 24%, transparent); display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; }

/* ============================================================== offer == */
.offer { padding: clamp(4rem, 10vh, 7rem) 0 clamp(2rem, 5vh, 3rem); background: var(--sw-bg); }
.offer__wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(3rem, 8vh, 5rem); }
.plate { width: min(100%, 31rem); box-sizing: border-box; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 22px; background: var(--sw-surface); border: 1px solid var(--hair); box-shadow: var(--shadow); }
.plate p { margin: 0; }
.plate__kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid var(--sw-coral); border-radius: 999px; padding: 0.3rem 0.75rem; }
.plate__name { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 2rem + 3vw, 4.4rem); line-height: 0.95; letter-spacing: -0.03em; margin: 1.1rem 0 0; }
.plate__sub { margin-top: 0.6rem !important; color: var(--sw-ink-muted); font-size: 1.15rem; }
.plate__prices { margin: 1.5rem 0 0; }
.plate__prices > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--hair); }
.plate__prices dt { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 1.1rem; flex-wrap: wrap; }
.plate__prices dt .mk { width: 1.5rem; height: 1.5rem; }
.plate__role { color: var(--sw-ink-muted); font-weight: 500; }
.plate__prices dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--sw-ink-muted); white-space: nowrap; }
.plate__total { border-top: 2px solid var(--sw-ink) !important; }
.plate__total dt { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; }
.plate__total dd { color: var(--sw-ink); font-weight: 700; font-size: 1.7rem; }
.plate__note { margin-top: 0.9rem !important; font-size: 1rem; color: var(--sw-ink-muted); line-height: 1.45; }
.plate .btn--coral { margin-top: 1.5rem; width: 100%; box-sizing: border-box; }
.colophon { text-align: center; font-size: 1rem; color: var(--sw-ink-muted); }
.colophon p { margin: 0.3rem 0; }
.colophon__mark { font-weight: 800; color: var(--sw-ink); margin-right: 0.6rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; }
.colophon__links a { color: var(--sw-ink-muted); }

@media (max-width: 1100px) { .ledger__grid { grid-template-columns: 6.5rem repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ledger__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1rem; }
  .ledger__keys { display: none; }
  .col { grid-row: auto; display: block; }
  .col dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 0.2rem; }
  .col dl { display: block; }
  .col dl > div { padding: 0.7rem 0; }
}

/* first load: the page assembles itself once. Only opacity/translate, so the scroll script's transforms are untouched */
@keyframes hub-rise { from { opacity: 0; translate: 0 26px; filter: blur(6px); } }
@keyframes hub-drop { from { opacity: 0; translate: 0 -12px; } }
@keyframes hub-fade { from { opacity: 0; } }
@keyframes hub-lift { from { opacity: 0; translate: 0 70px; } }
.hub-enter .crew-bar { animation: hub-drop 700ms cubic-bezier(.2,.7,.2,1) both; }
.hub-enter .intro h1 { animation: hub-rise 1000ms cubic-bezier(.2,.7,.2,1) 200ms both; }
.hub-enter .intro p { animation: hub-rise 900ms cubic-bezier(.2,.7,.2,1) 420ms both; }
.hub-enter .device { animation: hub-lift 1200ms cubic-bezier(.16,.8,.2,1) 420ms both; }
.hub-enter .glow { animation: hub-fade 1600ms ease 600ms both; }
@media (prefers-reduced-motion: reduce) { .story .rec i { animation: none; } .story * { transition-duration: 1ms !important; } }