/* ============================================================
   Websly Calendly — the storefront landing page in the language
   of calendly.com (2026): magnolia canvas, ink-navy type, one
   squircle stage with four product tabs, blurred gradient meshes
   inside the cards, serif feature headings, navy footer tile.
   Tokens follow calendly-DESIGN.md where the live site still
   agrees with it; where the live site moved on, the live site wins.
   Prefix: wc- (page), m- (UI mocks), pp- (phone portal), pd-
   (desktop portal, ported from Websly Experiment's recreation).
   ============================================================ */

@font-face { font-family: "Geist"; src: url("./assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("./assets/fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("./assets/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("./assets/fonts/newsreader-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --wc-bg: #fcfbf8;
  --wc-bg-2: #f5f3ee;
  --wc-ash: #e4e6e9;
  --wc-card: #fdfcfa;
  --wc-white: #ffffff;
  --wc-ink: #071a31;
  --wc-ink-2: #5f6d77;
  --wc-ink-3: #8a959e;
  --wc-line: rgba(7, 26, 49, 0.10);
  --wc-line-2: rgba(7, 26, 49, 0.06);
  --wc-navy: #0b3558;
  --wc-blue: #006bff;
  --wc-sky: #6bb1ff;
  --wc-lime: #dbee9f;
  --wc-lavender: #c5affe;
  --wc-mint: #88e7e1;
  --wc-announce: #84c1ff;
  --wc-font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wc-serif: "Newsreader", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --wc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wc-ease-io: cubic-bezier(0.5, 0, 0.5, 1);
  --wc-shadow-card: 0 4px 5px rgba(95, 109, 119, 0.04), 0 10px 15px rgba(95, 109, 119, 0.04), 0 40px 50px rgba(95, 109, 119, 0.10);
  --wc-shadow-lift: 0 20px 48px -12px rgba(11, 53, 88, 0.16);
  --wc-shadow-soft: 0 1px 2px rgba(7, 26, 49, 0.04), 0 8px 24px rgba(7, 26, 49, 0.06);
  --wc-gutter: 8px;
  --wc-r-shell: 32px;
  --wc-header-h: 72px;
}

/* ------------------------------------------------------------
   Reset
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--wc-bg);
  color: var(--wc-ink);
  font-family: var(--wc-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
x-dc { display: block; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
b, strong { font-weight: 600; }
em { font-style: normal; }
.wc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wc-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wc-ico--sm { width: 16px; height: 16px; }
.wc-skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--wc-ink); color: #fff; padding: 10px 14px; border-radius: 12px; }
.wc-skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--wc-blue); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------
   Layout + type
   ------------------------------------------------------------ */
.wc-wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 20px; }
.wc-sechead { display: grid; gap: 16px; max-width: 760px; align-content: start; }
.wc-sechead--center { margin: 0 auto; text-align: center; justify-items: center; }
.wc-sechead .wc-btn, .wc-sechead .wc-textlink { margin-top: 12px; }
.wc-sechead--light { color: #fff; }
.wc-sechead--light .wc-kicker, .wc-sechead--light .wc-h2 { color: #fff; }
.wc-sechead--light .wc-lead { color: rgba(255, 255, 255, 0.84); }
.wc-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-ink-2); }
.wc-h1 { font-size: clamp(40px, 9.6vw, 72px); font-weight: 500; line-height: 1.1; letter-spacing: -0.028em; color: var(--wc-ink); text-wrap: balance; }
.wc-h2 { font-size: clamp(34px, 7.4vw, 60px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--wc-ink); text-wrap: balance; }
.wc-h2--sm { font-size: clamp(30px, 6vw, 44px); }
.wc-h2-serif { font-family: var(--wc-serif); font-size: clamp(34px, 6.8vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--wc-ink); text-wrap: balance; }
.wc-lead { font-size: 17px; line-height: 1.45; color: var(--wc-ink-2); max-width: 60ch; }
.wc-sechead--center .wc-lead { margin: 0 auto; }
.wc-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(7, 26, 49, 0.06); color: var(--wc-ink-2); font-size: 12px; font-weight: 500; margin-left: 8px; }

/* eyebrow: 24px tinted squircle + label */
.wc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--wc-ink); }
.wc-eyebrow__ic { position: relative; width: 24px; height: 24px; display: grid; place-items: center; color: var(--wc-ink); }
.wc-eyebrow__ic::before { content: ""; position: absolute; inset: 0; background: var(--tint, var(--wc-sky)); border-radius: 40%; }
.wc-eyebrow__ic .wc-ico { position: relative; width: 14px; height: 14px; stroke-width: 2; }

/* buttons */
.wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 16px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.2s var(--wc-ease); }
.wc-btn:active { transform: scale(0.98); }
.wc-btn--navy { background: var(--wc-ink); color: var(--wc-bg); }
.wc-btn--navy:hover { background: #0f2a4a; }
.wc-btn--outline { border: 1px solid var(--wc-ink); color: var(--wc-ink); background: transparent; }
.wc-btn--outline:hover { background: rgba(7, 26, 49, 0.05); }
.wc-btn--sm { height: 44px; }
.wc-btn--lg { height: 56px; padding: 0 22px; font-size: 16px; }
.wc-btn--hero { height: 52px; padding: 4px 18px 4px 4px; border-radius: 22px; background: var(--wc-ink); color: var(--wc-bg); font-size: 16px; gap: 12px; }
.wc-btn--hero:hover { background: #0f2a4a; }
.wc-btn__badge { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--wc-ink); display: grid; place-items: center; flex: none; }
.wc-btn__badge .wc-ico { width: 20px; height: 20px; stroke-width: 1.8; }
.wc-textlink { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; color: var(--wc-ink); padding-bottom: 4px; border-bottom: 1px solid var(--wc-ink); }
.wc-textlink .wc-ico { transition: transform 0.25s var(--wc-ease); }
.wc-textlink:hover .wc-ico { transform: translateX(3px); }

/* ------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------ */
.wc-announce { position: relative; display: flex; align-items: center; justify-content: center; background: var(--wc-announce); color: var(--wc-ink); font-size: 14px; line-height: 1.35; padding: 9px 44px 9px 16px; }
.wc-announce__link { display: flex; align-items: center; gap: 8px; text-align: left; }
.wc-announce__link b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.wc-announce__link .wc-ico { flex: none; width: 16px; height: 16px; }
.wc-announce__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.wc-announce__x .wc-ico { width: 18px; height: 18px; }
html.wc-no-announce .wc-announce { display: none; }

/* ------------------------------------------------------------
   Header (in flow) + floating pill header
   ------------------------------------------------------------ */
.wc-header { position: relative; z-index: 40; background: var(--wc-bg); }
.wc-header__in, .wc-float__in { display: flex; align-items: center; gap: 12px; height: var(--wc-header-h); padding: 0 16px; }
.wc-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--wc-ink); }
.wc-brand__mark { width: 30px; height: 30px; }
.wc-brand__word { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.wc-brand--light { color: #fff; }
.wc-nav { display: none; align-items: center; gap: 4px; margin-left: 8px; }
.wc-nav a { padding: 8px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--wc-ink); transition: background 0.15s ease; }
.wc-nav a:hover { background: rgba(7, 26, 49, 0.05); }
.wc-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wc-header__text { display: none; font-size: 14px; font-weight: 500; padding: 8px 6px; }
.wc-header__right .wc-btn--outline { display: none; }
.wc-header__right .wc-btn--navy { height: 44px; padding: 0 14px; }
.wc-burger { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--wc-ink); }
.wc-burger .wc-ico { width: 24px; height: 24px; }

.wc-float { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 60; background: #fff; border-radius: 20px; box-shadow: 0 2px 4px rgba(7, 26, 49, 0.04), 0 12px 32px rgba(7, 26, 49, 0.10); transform: translateY(-110%); opacity: 0; transition: transform 0.5s var(--wc-ease), opacity 0.3s ease; pointer-events: none; }
.wc-float__in { height: 64px; }
html.wc-scrolled .wc-float { transform: none; opacity: 1; pointer-events: auto; }
html.wc-stage-pinned .wc-float { transform: translateY(-110%); opacity: 0; pointer-events: none; }
html.wc-scrolled .wc-float a, html.wc-scrolled .wc-float button { pointer-events: auto; }

/* mobile sheet */
.wc-sheet { position: fixed; inset: 0; z-index: 80; background: var(--wc-bg); display: flex; flex-direction: column; padding: 0 20px 24px; transform: translateY(-100%); transition: transform 0.55s var(--wc-ease); overflow: auto; }
html.wc-sheet-open .wc-sheet { transform: none; }
html.wc-sheet-open { overflow: hidden; }
.wc-sheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--wc-header-h); }
.wc-sheet__links { display: grid; margin-top: 8px; }
.wc-sheet__links a { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; padding: 16px 0; border-bottom: 1px solid var(--wc-line); }
.wc-sheet__foot { margin-top: auto; display: grid; gap: 10px; padding-top: 24px; }
.wc-sheet__foot .wc-btn { width: 100%; }
.wc-sheet__mail { text-align: center; font-size: 15px; color: var(--wc-ink-2); padding: 8px; }

.wc-brand__mark { width: 32px; height: 32px; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.wc-hero { padding: 0 var(--wc-gutter) var(--wc-gutter); }
.wc-hero__shell { position: relative; background: var(--wc-bg-2); border-radius: var(--wc-r-shell); padding: 56px 12px 12px; }
.wc-hero__copy { display: grid; justify-items: center; text-align: center; gap: 20px; max-width: 720px; margin: 0 auto 40px; padding: 0 8px; }
.wc-hero__lead { font-size: 18px; line-height: 1.4; max-width: 34em; }
.wc-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.wc-hero__note { font-size: 14px; color: var(--wc-ink-2); }
.wc-hero__note a { text-decoration: underline; text-underline-offset: 3px; }

/* --- the stage --- */
.wc-runway { position: relative; }
.wc-stage { position: relative; }
.wc-stage__panel { position: relative; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; border-radius: 28px; background: var(--wc-ash); overflow: hidden; padding: 28px 8px 32px; isolation: isolate; will-change: width, height; transition: width 0.8s var(--wc-ease-io), height 0.8s var(--wc-ease-io), border-radius 0.8s var(--wc-ease-io); }
.wc-stage__gradient { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.wc-mesh { position: absolute; left: 0; top: 0; width: 400%; height: 100%; filter: blur(48px); transform: translate3d(calc(var(--wc-tab-i, 0) * -25%), 0, 0); transition: transform 1.1s var(--wc-ease-io); will-change: transform; }
.wc-stage__close { position: absolute; z-index: 5; top: 40px; right: 40px; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); color: var(--wc-ink); display: none; place-items: center; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease, background 0.2s ease; }
.wc-stage__close:hover { background: rgba(255, 255, 255, 0.8); }
.wc-stage.is-pinned .wc-stage__close { opacity: 1; }
.wc-stage__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; }
.wc-stage__dots { display: flex; gap: 6px; margin-top: 18px; }
.wc-stage__dots i { width: 8px; height: 8px; border-radius: 3px; background: rgba(7, 26, 49, 0.18); transition: width 0.3s ease, background 0.3s ease; }
.wc-stage__dots i.is-on { width: 24px; background: var(--wc-ink); }

/* tabs */
.wc-tabs { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 0 12px; margin-bottom: 14px; filter: drop-shadow(0 4px 5px rgba(95, 109, 119, 0.04)) drop-shadow(0 10px 15px rgba(95, 109, 119, 0.06)); }
.wc-tab { position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: var(--wc-ink-2); }
.wc-tab__shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; transition: fill 0.5s var(--wc-ease-io); }
.wc-tab::after { content: ""; position: absolute; inset: 0; border-radius: 40%; background: var(--tint); opacity: 0; transform: scale(0.6); transition: opacity 0.5s var(--wc-ease-io), transform 0.5s var(--wc-ease-io); }
.wc-tab__ico { position: relative; z-index: 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color 0.3s ease, transform 0.4s var(--wc-ease); }
.wc-tab__stem { position: absolute; z-index: 1; left: 50%; top: 100%; width: 32px; height: 14px; transform: translateX(-50%) scaleY(0); transform-origin: top; fill: #fff; transition: transform 0.4s var(--wc-ease-io); }
.wc-tab[aria-selected="true"] { color: var(--wc-ink); }
.wc-tab[aria-selected="true"]::after { opacity: 1; transform: scale(1); }
.wc-tab[aria-selected="true"] .wc-tab__ico { transform: scale(1.08); }
.wc-tab[aria-selected="true"] .wc-tab__stem { transform: translateX(-50%) scaleY(1); }
.wc-tab:hover:not([aria-selected="true"]) .wc-tab__ico { transform: translateY(-2px); }

/* the white card */
.wc-card { width: 100%; max-width: 996px; background: var(--wc-card); border-radius: 24px; padding: 24px 20px 28px; box-shadow: var(--wc-shadow-card); }
.wc-card__panel { display: grid; gap: 22px; }
.wc-card__panel[hidden] { display: none; }
html.wc-tabs-js .wc-card { display: grid; }
html.wc-tabs-js .wc-card__panel { grid-area: 1 / 1; transition: opacity 0.45s ease, transform 0.6s var(--wc-ease); }
html.wc-tabs-js .wc-card__panel:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.wc-card__text { display: grid; gap: 14px; justify-items: start; }
.wc-card__h { font-size: clamp(26px, 6vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.wc-card__text p { font-size: 16px; line-height: 1.5; color: var(--wc-ink-2); }
.wc-card__text .wc-textlink { margin-top: 4px; }
.wc-card__visual { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; background: var(--tint, #e2ecfb); overflow: hidden; display: grid; place-items: center; padding: 16px; }
.wc-card__visual--phone { padding: 0; }

/* browser mock */
.wc-browser { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; box-shadow: 0 2px 4px rgba(7, 26, 49, 0.05), 0 18px 40px -12px rgba(7, 26, 49, 0.25); overflow: hidden; align-self: start; margin-top: 6px; }
.wc-browser__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--wc-line-2); }
.wc-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d9dee5; }
.wc-browser__bar i:nth-child(1) { background: #ff8b7b; } .wc-browser__bar i:nth-child(2) { background: #ffd166; } .wc-browser__bar i:nth-child(3) { background: #7fd4a1; }
.wc-browser__url { flex: 1; margin-left: 8px; font-size: 11px; color: var(--wc-ink-2); background: #f3f4f6; border-radius: 6px; padding: 4px 8px; text-align: center; }
.wc-browser__live { font-size: 10px; font-weight: 600; color: #1f7a3a; background: #e6f6ea; border-radius: 999px; padding: 3px 7px; }
.wc-browser__screen { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.wc-browser__screen img { width: 100%; height: auto; }
.wc-card__phone { position: absolute; right: 8%; bottom: -12%; --w: 22%; width: 22%; min-width: 96px; }

/* ------------------------------------------------------------
   Phone + laptop frames (CSS only)
   ------------------------------------------------------------ */
.wc-phone { position: relative; --w: 220px; width: var(--w); aspect-ratio: 9 / 19.5; border-radius: calc(var(--w) * 0.165); background: #0c0d10; padding: calc(var(--w) * 0.028); box-shadow: inset 0 0 0 1.5px #3a3b40, 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -24px rgba(7, 26, 49, 0.55); }
.wc-phone::before { content: ""; position: absolute; z-index: 4; top: calc(var(--w) * 0.06); left: 50%; transform: translateX(-50%); width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.083); border-radius: 999px; background: #000; }
.wc-phone::after { content: ""; position: absolute; right: calc(var(--w) * -0.012); top: 27%; width: calc(var(--w) * 0.012); height: 13%; background: #2c2d31; border-radius: 2px; box-shadow: calc(var(--w) * -1.012) calc(var(--w) * -0.14) 0 0 #2c2d31, calc(var(--w) * -1.012) calc(var(--w) * 0.03) 0 0 #2c2d31; }
.wc-phone__screen { position: absolute; inset: calc(var(--w) * 0.028); border-radius: calc(var(--w) * 0.14); overflow: hidden; background: #f4f4fb; }
.wc-phone__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wc-phone--tiny { --w: 96px; box-shadow: inset 0 0 0 1px #3a3b40, 0 20px 40px -16px rgba(7, 26, 49, 0.5); }
.wc-phone--card { --w: 190px; position: absolute; left: 50%; top: 7%; bottom: auto; transform: translateX(-50%); }
.wc-phone--panel { --w: 230px; margin: 0 auto; }


/* ------------------------------------------------------------
   UI mocks (m-*) shared across the page
   ------------------------------------------------------------ */
.m { font-size: 12px; line-height: 1.35; color: var(--wc-ink); }
.m * { box-sizing: border-box; }
.m-card { background: #fff; border: 1px solid rgba(7, 26, 49, 0.06); border-radius: 14px; box-shadow: var(--wc-shadow-soft); }
.m-row { display: flex; align-items: center; gap: 8px; }
.m-ava { width: 22px; height: 22px; border-radius: 50%; background: var(--a, #c9c9da); flex: none; }
.m-name { font-weight: 600; font-size: 12.5px; }
.m-time { margin-left: auto; font-size: 10px; color: var(--wc-ink-3); white-space: nowrap; }
.m-sub { display: block; font-size: 10.5px; color: var(--wc-ink-3); }
.m-msg { font-size: 11.5px; color: var(--wc-ink-2); margin-top: 6px; }
.m-badge { font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #fbeee0; color: #9a5a1f; white-space: nowrap; }
.m-badge--ok { background: #e6f4ea; color: #1f7a3a; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 9px; background: var(--wc-ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.m-btn--ghost { background: #fff; color: var(--wc-ink); border: 1px solid rgba(7, 26, 49, 0.12); flex: 1; }
.m-btn--wide { width: 100%; height: 36px; margin-top: 8px; font-size: 12.5px; }
.m-acts { margin-top: 8px; }
.m-stars { display: inline-flex; gap: 2px; }
.m-stars i { width: 10px; height: 10px; background: #fbbc04; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.m-stars--lg i { width: 22px; height: 22px; }
.m-stars--sm i { width: 9px; height: 9px; }
.m-bar { height: 6px; border-radius: 999px; background: #e9edf3; overflow: hidden; margin-top: 10px; }
.m-bar b { display: block; height: 100%; width: 100%; background: var(--wc-blue); border-radius: inherit; transform-origin: left; }
.m-caret { display: inline-block; width: 2px; height: 1em; background: var(--wc-blue); vertical-align: -0.12em; margin-left: 2px; animation: m-blink 1s steps(2) infinite; }
@keyframes m-blink { to { opacity: 0; } }
.m-cursor { position: absolute; z-index: 6; width: 14px; height: 14px; pointer-events: none; opacity: 0; left: 0; top: 0; }
.m-cursor::before { content: ""; position: absolute; inset: 0; background: var(--wc-ink); clip-path: polygon(0 0, 100% 62%, 44% 56%, 30% 100%); }

/* inbox */
.m-inbox { position: relative; width: 100%; max-width: 360px; display: grid; gap: 8px; align-self: center; }
.m-lead { padding: 10px 12px; }
.m-lead[data-lead="new"] { position: relative; }
.m-sms { position: relative; background: #fff; border: 1px solid rgba(7, 26, 49, 0.08); border-radius: 14px 14px 14px 4px; padding: 9px 11px; font-size: 11px; color: var(--wc-ink-2); box-shadow: var(--wc-shadow-soft); }
.m-sms b { display: flex; align-items: center; gap: 6px; color: var(--wc-ink); font-size: 11px; margin-bottom: 3px; }
.m-sms b i { width: 14px; height: 14px; border-radius: 5px; background: var(--wc-ink); color: #fff; font-size: 8.5px; font-weight: 700; display: grid; place-items: center; }
.m-inbox [data-lead-sms] { position: absolute; left: 10px; right: 10px; bottom: -10px; }
.m-inbox--panel { max-width: 340px; }

/* booking calendar + slots */
.m-book { position: relative; width: 100%; max-width: 420px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; align-items: start; }
.m-cal { padding: 10px 10px 8px; }
.m-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11.5px; font-weight: 600; margin-bottom: 8px; white-space: nowrap; }
.m-cal__nav { width: 20px; height: 20px; border-radius: 50%; background: #eef3fb; color: var(--wc-blue); display: grid; place-items: center; }
.m-cal__nav .wc-ico { width: 12px; height: 12px; }
.m-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 7.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wc-ink-3); text-align: center; margin-bottom: 4px; }
.m-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; }
.m-cal__d { aspect-ratio: 1; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--wc-blue); background: #eaf2ff; border-radius: 50%; transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--wc-ease); }
.m-cal__d--off { background: transparent; color: #b8c2cc; font-weight: 500; }
.m-cal__d--on { background: var(--wc-blue); color: #fff; transform: scale(1.06); }
.m-slots { padding: 10px; display: grid; gap: 6px; }
.m-slots__day { font-size: 12px; font-weight: 600; }
.m-slots__date { font-size: 9.5px; color: var(--wc-ink-3); margin-top: -4px; margin-bottom: 2px; }
.m-slot { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; border-radius: 8px; background: #eaf2ff; color: var(--wc-ink); font-size: 11px; font-weight: 600; transition: background 0.3s ease, color 0.3s ease; }
.m-slot--booked { background: linear-gradient(90deg, #7f8dff, #a48cff); color: #fff; }
.m-pay { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.m-pay__ic { width: 30px; height: 30px; border-radius: 9px; background: #e7f9f8; color: #0b5e60; display: grid; place-items: center; flex: none; }
.m-pay__ic .wc-ico { width: 16px; height: 16px; }
.m-pay div { display: grid; }
.m-pay div b { font-size: 12px; }
.m-pay div span { font-size: 10.5px; color: var(--wc-ink-3); }
.m-pay .m-badge { margin-left: auto; }
.m-pay--float { width: 260px; }

/* google result card */
.m-google { padding: 12px; display: grid; gap: 10px; width: 100%; max-width: 300px; }
.m-google--lg { max-width: 360px; }
.m-google__q { display: flex; align-items: center; gap: 8px; background: #f3f4f6; border-radius: 999px; padding: 7px 12px; font-size: 11.5px; color: var(--wc-ink-2); }
.m-google__r { display: grid; gap: 3px; }
.m-google__r b { font-size: 13.5px; color: #1a0dab; font-weight: 500; }
.m-google__meta { font-size: 10.5px; color: var(--wc-ink-2); }
.m-google__acts { display: flex; gap: 6px; margin-top: 4px; }
.m-google__acts em { font-size: 10px; font-weight: 600; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 3px 9px; }
.m-google__map { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--wc-ink-2); background: #f3f4f6; border-radius: 10px; padding: 8px 10px; }
.m-google__map .wc-ico { width: 14px; height: 14px; color: #ea4335; }
.m-quote { display: grid; gap: 5px; background: #f8f9fb; border-radius: 12px; padding: 10px 12px; }
.m-quote p { font-size: 12px; color: var(--wc-ink); }
.m-quote em { font-size: 10px; color: var(--wc-ink-3); }
.m-quote--float { width: 250px; background: #fff; padding: 12px 14px; }
.m-quote--float p { font-family: var(--wc-serif); font-size: 15px; line-height: 1.3; }

/* missed call */
.m-missed { padding: 10px 12px; display: grid; gap: 8px; width: 100%; max-width: 280px; }
.m-missed__lab { display: block; font-size: 10px; color: #d23b3b; font-weight: 600; }
.m-sms--in { border-radius: 4px 14px 14px 14px; }
.m-saved { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #1f7a3a; }
.m-missed--phone { padding: 0; }
.m-sms--float { width: 250px; font-size: 12px; }

/* mini slots (journey) */
.m-mini-slots { padding: 12px; display: grid; gap: 8px; width: 100%; max-width: 280px; }
.m-mini-slots b { font-size: 12px; }
.m-mini-slots__row { display: flex; gap: 6px; }
.m-mini-slots__row .m-slot { flex: 1; }
.m-mini-slots--float { width: 250px; }

/* invoice list (journey) */
.m-inv { padding: 10px 12px; display: grid; gap: 8px; width: 100%; max-width: 300px; }
.m-inv .m-row { padding: 4px 0; }
.m-inv .m-badge { margin-left: auto; }
.m-inv__amt { font-size: 12px; font-variant-numeric: tabular-nums; }
.m-review { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--wc-ink-2); border-top: 1px solid var(--wc-line-2); padding-top: 8px; }

/* site wireframe */
.m-site { display: grid; gap: 10px; }
.m-site__nav { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.m-site__hero { display: grid; gap: 4px; background: linear-gradient(135deg, #eef3fb, #e2ecfb); border-radius: 12px; padding: 16px 14px; }
.m-site__hero b { font-size: 16px; letter-spacing: -0.01em; }
.m-site__hero span { font-size: 11px; color: var(--wc-ink-2); }
.m-site__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-site__tiles i { display: grid; place-items: center; height: 40px; border-radius: 10px; background: #f3f4f6; font-size: 10.5px; font-weight: 600; }

/* inline edit */
.m-edit { display: grid; gap: 10px; }
.m-edit__lab { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-ink-3); }
.m-edit__text { font-size: 20px; letter-spacing: -0.01em; min-height: 1.3em; border: 1px dashed rgba(0, 107, 255, 0.5); border-radius: 8px; padding: 6px 8px; }
.m-save { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: #1f7a3a; color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 10px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s var(--wc-ease); }
.m-save.is-on { opacity: 1; transform: none; }

/* monitor rows */
.m-mon { display: grid; gap: 8px; }
.m-mon__row { display: flex; align-items: center; gap: 8px; font-size: 12px; background: #f8f9fb; border-radius: 10px; padding: 9px 12px; }
.m-mon__row .wc-ico { width: 16px; height: 16px; color: #1f7a3a; }
.m-mon__row b { margin-left: auto; font-size: 11px; color: var(--wc-ink-2); font-variant-numeric: tabular-nums; }

/* seven days */
.m-days { display: grid; gap: 10px; }
.m-days > b { font-size: 13px; }
.m-days__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.m-days__row i { display: grid; justify-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; color: var(--wc-ink-3); background: #f3f4f6; border-radius: 8px; padding: 7px 0; }
.m-days__row i em { font-size: 8.5px; font-weight: 500; color: var(--wc-ink-2); }
.m-days__row i.is-live { background: var(--wc-ink); color: #fff; }
.m-days__row i.is-live em { color: #fff; }

/* bill */
.m-bill { display: grid; gap: 8px; }
.m-bill__n { font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.m-bill__n em { font-size: 13px; color: var(--wc-ink-3); margin-left: 4px; letter-spacing: 0; }
.m-bill ul { display: grid; gap: 4px; margin-top: 4px; }
.m-bill li { font-size: 11.5px; color: var(--wc-ink-2); padding-left: 16px; position: relative; }
.m-bill li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--wc-mint); }

/* mail card + review card */
.m-mailcard { display: grid; gap: 10px; }
.m-mailcard .m-badge { margin-left: auto; }
.m-mail__body { font-size: 12px; color: var(--wc-ink-2); line-height: 1.45; }
.m-revcard { display: grid; gap: 10px; justify-items: start; }
.m-revcard__t { font-size: 18px; letter-spacing: -0.01em; }

/* pay link + invoice doc */
.m-paylink { display: grid; gap: 10px; }
.m-paylink__n { font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.m-paylink__card { display: flex; align-items: center; gap: 10px; background: #f3f4f6; border-radius: 10px; padding: 10px 12px; font-size: 12px; }
.m-paylink__card i { width: 28px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #635bff, #9d8bff); }
.m-paylink__card em { margin-left: auto; color: var(--wc-ink-3); }
.m-invdoc { display: grid; gap: 8px; }
.m-invdoc__brand { font-size: 13px; }
.m-invdoc .m-badge { margin-left: auto; }
.m-invdoc__lines { display: grid; gap: 5px; border-top: 1px solid var(--wc-line-2); padding-top: 8px; }
.m-invdoc__lines span { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--wc-ink-2); }
.m-invdoc__lines b { color: var(--wc-ink); font-variant-numeric: tabular-nums; }
.m-invdoc__total { display: flex; justify-content: space-between; font-size: 13px; border-top: 1px solid var(--wc-line); padding-top: 8px; }
.m-invdoc__total b { font-size: 15px; }
.m-lead--float { width: 260px; }

/* ------------------------------------------------------------
   Phone portal (pp-*) — the app on a handset
   ------------------------------------------------------------ */
.pp { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4f4fb; color: #1b1b2e; font-size: calc(var(--w) * 0.052); line-height: 1.35; padding: calc(var(--w) * 0.14) calc(var(--w) * 0.055) 0; }
.pp-status { position: absolute; top: calc(var(--w) * 0.055); left: calc(var(--w) * 0.09); right: calc(var(--w) * 0.09); display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--w) * 0.055); font-weight: 600; }
.pp-status__dots { display: flex; gap: 2px; align-items: flex-end; }
.pp-status__dots i { width: calc(var(--w) * 0.018); background: #1b1b2e; border-radius: 1px; }
.pp-status__dots i:nth-child(1) { height: calc(var(--w) * 0.025); } .pp-status__dots i:nth-child(2) { height: calc(var(--w) * 0.035); } .pp-status__dots i:nth-child(3) { height: calc(var(--w) * 0.045); }
.pp--sms { padding-top: calc(var(--w) * 0.2); gap: calc(var(--w) * 0.04); }
.pp--sms .m-missed { max-width: none; }
.pp--sms .m-sms { font-size: calc(var(--w) * 0.048); }
.pp--sms .m-sms b { font-size: calc(var(--w) * 0.048); }
.pp--sms .m-saved { font-size: calc(var(--w) * 0.046); }
.pp--sms .m-name { font-size: calc(var(--w) * 0.054); }
.pp--sms .m-missed__lab { font-size: calc(var(--w) * 0.042); }
.pp--wa { background: #efe7dd; padding-top: calc(var(--w) * 0.16); gap: calc(var(--w) * 0.03); }
.pp-wa__head { display: flex; align-items: center; gap: calc(var(--w) * 0.03); background: #fff; margin: 0 calc(var(--w) * -0.055); padding: calc(var(--w) * 0.03) calc(var(--w) * 0.055); border-bottom: 1px solid #e4e4f0; margin-bottom: calc(var(--w) * 0.03); }
.pp-wa__head b { font-size: calc(var(--w) * 0.05); }
.pp-wa__head span:last-child { font-size: calc(var(--w) * 0.038); color: #82829b; margin-left: auto; }
.pp-wa__bub { position: relative; max-width: 84%; font-size: calc(var(--w) * 0.048); line-height: 1.35; padding: calc(var(--w) * 0.03) calc(var(--w) * 0.04); border-radius: calc(var(--w) * 0.05); background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); }
.pp-wa__bub--me { align-self: flex-end; background: #d9fdd3; }
.pp-wa__bub i { display: block; font-size: calc(var(--w) * 0.034); color: #82829b; text-align: right; margin-top: 2px; }


/* ------------------------------------------------------------
   Work rail
   ------------------------------------------------------------ */
.wc-rail__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wc-line); background: #fff; color: var(--wc-ink); display: grid; place-items: center; transition: background 0.15s ease, transform 0.2s var(--wc-ease); }
.wc-rail__btn:hover { background: var(--wc-bg-2); }
.wc-rail__btn:active { transform: scale(0.95); }
.wc-rail__btn--light { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.wc-rail__btn--light:hover { background: rgba(255, 255, 255, 0.24); }


/* ------------------------------------------------------------
   Journey (four cards)
   ------------------------------------------------------------ */
.wc-journey { padding: 24px var(--wc-gutter) var(--wc-gutter); }
.wc-journey__shell { background: var(--wc-bg-2); border-radius: var(--wc-r-shell); padding: 64px 12px 24px; background-image: linear-gradient(var(--wc-bg), var(--wc-bg-2) 42%); }
.wc-journey .wc-sechead { margin-bottom: 40px; padding: 0 8px; }
.wc-jcards { display: grid; gap: 14px; }
.wc-jcard { position: relative; background: #fff; border-radius: 28px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--wc-shadow-lift); }
.wc-jcard__hit { position: absolute; inset: 0; z-index: 3; cursor: pointer; display: none; }
.wc-jcard__text { padding: 26px 22px 12px; display: grid; gap: 10px; align-content: start; }
.wc-jcard h3 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.wc-jcard__sum { font-size: 15px; line-height: 1.45; color: var(--wc-ink-2); }
.wc-jcard__steps { display: grid; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--wc-ink-2); }
.wc-jcard__steps li { display: flex; align-items: center; gap: 10px; position: relative; }
.wc-jcard__steps li + li::before { content: ""; position: absolute; left: 11px; top: -12px; width: 1px; height: 12px; background: var(--wc-line); }
.wc-step-ic { position: relative; width: 24px; height: 24px; display: grid; place-items: center; color: var(--wc-ink); flex: none; }
.wc-step-ic::before { content: ""; position: absolute; inset: 0; border-radius: 40%; background: var(--tint); }
.wc-step-ic .wc-ico { position: relative; width: 13px; height: 13px; stroke-width: 2; }
.wc-jcard__art { position: relative; min-height: 250px; display: grid; place-items: end center; padding: 20px 18px 22px; overflow: hidden; }
.wc-jcard__art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 15% 100%, var(--g1) 0%, transparent 72%), radial-gradient(70% 65% at 90% 100%, var(--g2) 0%, transparent 72%), radial-gradient(60% 70% at 50% 120%, var(--g3) 0%, transparent 72%); filter: blur(14px); transform: scale(1.2); transition: opacity 0.5s ease; }
.wc-jcard__arch { position: absolute; left: 50%; bottom: -6%; width: 62%; aspect-ratio: 1 / 1.55; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3)); opacity: 0; transition: opacity 0.5s ease; }
.wc-jcard__arch::after { content: ""; position: absolute; left: 22%; right: 22%; top: 20%; bottom: 0; border-radius: 999px 999px 0 0; background: rgba(255, 255, 255, 0.5); }
.wc-jcard__art .m { position: relative; z-index: 2; transition: transform 0.6s var(--wc-ease), opacity 0.4s ease; }
.wc-jcard__art .m-card { box-shadow: 0 2px 4px rgba(7, 26, 49, 0.05), 0 24px 48px -16px rgba(7, 26, 49, 0.35); border: 3px solid rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------
   Feature sections (accordion + gradient panel)
   ------------------------------------------------------------ */
.wc-feature { padding: 72px 0; }
.wc-feature__grid { display: grid; gap: 36px; }
.wc-feature__text { display: grid; gap: 22px; align-content: start; }
.wc-feature__foot { font-size: 13.5px; color: var(--wc-ink-2); }
.wc-acc { display: grid; }
.wc-acc__item { position: relative; border-bottom: 1px solid var(--wc-line); }
.wc-acc__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 0; text-align: left; font-size: 18px; font-weight: 500; color: var(--wc-ink-3); transition: color 0.3s ease; }
.wc-acc__head .wc-ico { width: 22px; height: 22px; stroke-width: 1.6; }
.wc-acc__item.is-open .wc-acc__head { color: var(--wc-ink); }
.wc-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--wc-ease); }
.wc-acc__in { min-height: 0; overflow: hidden; }
.wc-acc__item.is-open .wc-acc__body { grid-template-rows: 1fr; }
.wc-acc__body p { font-size: 16px; line-height: 1.5; color: var(--wc-ink-2); padding: 0 52px 20px 0; }
.wc-acc__open { position: absolute; right: 0; top: 66px; width: 34px; height: 34px; border-radius: 9px; background: var(--wc-bg-2); color: var(--wc-ink); display: grid; place-items: center; opacity: 0; transition: opacity 0.3s ease, background 0.15s ease; }
.wc-acc__item.is-open .wc-acc__open { opacity: 1; }
.wc-acc__open:hover { background: #ece9e1; }
.wc-acc__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--wc-sky); transform: scaleX(0); transform-origin: left; }
.wc-acc__item.is-open .wc-acc__bar.is-run { animation: wc-acc-run var(--wc-acc-dur, 7s) linear forwards; }
@keyframes wc-acc-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wc-acc--faq .wc-acc__head { color: var(--wc-ink); font-size: 18px; justify-content: space-between; }
.wc-acc--faq .wc-acc__chev { transition: transform 0.4s var(--wc-ease); color: var(--wc-ink-2); }
.wc-acc--faq .wc-acc__item.is-open .wc-acc__chev { transform: rotate(180deg); }
.wc-acc--faq .wc-acc__body p { padding-right: 0; }

/* the gradient panel */
.wc-panel { position: relative; width: 100%; aspect-ratio: 1; max-height: 620px; border-radius: 32px; overflow: hidden; display: grid; place-items: center; padding: 24px; isolation: isolate; }
.wc-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--panel-bg); }
.wc-panel::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.wc-panel--blue { --panel-bg: linear-gradient(180deg, #e6f0fb 0%, #9ccaff 28%, #4793eb 62%, #0b3558 100%); }
.wc-panel--lime { --panel-bg: linear-gradient(180deg, #dfeefc 0%, #f0f7cf 38%, #7fd6c8 70%, #0b5e60 100%); }
.wc-panel--lavender { --panel-bg: linear-gradient(160deg, #f6d5e5 0%, #d7c7ff 38%, #a3b8ff 68%, #4c78d9 100%); }
.wc-panel--mint { --panel-bg: linear-gradient(180deg, #d2ecfb 0%, #b6f3ea 45%, #c9f5d1 80%, #ecf7b8 100%); }
.wc-panel__pills { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 6%; pointer-events: none; }
.wc-panel__pills i { width: 7%; height: 62%; border-radius: 999px; background: rgba(255, 255, 255, 0.35); filter: blur(6px); transform: translateY(var(--py, 0)); }
.wc-panel__pills i:nth-child(1) { height: 48%; } .wc-panel__pills i:nth-child(2) { height: 66%; } .wc-panel__pills i:nth-child(3) { height: 40%; } .wc-panel__pills i:nth-child(4) { height: 58%; }
.wc-panel__pills i:nth-child(5) { height: 62%; } .wc-panel__pills i:nth-child(6) { height: 42%; } .wc-panel__pills i:nth-child(7) { height: 70%; } .wc-panel__pills i:nth-child(8) { height: 50%; }
.wc-panel__scene { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 24px; opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.45s ease, transform 0.7s var(--wc-ease); pointer-events: none; }
.wc-panel__scene.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wc-panel__card { width: 100%; max-width: 380px; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 24px 60px -20px rgba(7, 26, 49, 0.45); }

/* ------------------------------------------------------------
   Stories (dark band)
   ------------------------------------------------------------ */
.wc-stories { position: relative; padding: 120px 0 72px; color: #fff; overflow: hidden; isolation: isolate; }
.wc-stories::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 56px; background: var(--wc-bg); border-radius: 0 0 var(--wc-r-shell) var(--wc-r-shell); }
.wc-stories__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #7fb6ff 0%, #4a86e8 30%, #7c5cff 60%, #e9a3ff 100%); }
.wc-stories__bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(50% 50% at 20% 20%, rgba(255, 255, 255, 0.35), transparent 60%), radial-gradient(40% 40% at 80% 30%, rgba(255, 200, 250, 0.5), transparent 60%), radial-gradient(50% 50% at 60% 90%, rgba(120, 170, 255, 0.6), transparent 60%); filter: blur(40px); }
.wc-stories__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 251, 248, 0) 60%, rgba(252, 251, 248, 1) 100%); }
.wc-stories .wc-sechead { margin-bottom: 40px; }
.wc-stories__rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 8px; scrollbar-width: none; }
.wc-stories__rail::-webkit-scrollbar { display: none; }
.wc-story { position: relative; flex: 0 0 88vw; max-width: 760px; scroll-snap-align: center; }
.wc-story__in { background: #fff; color: var(--wc-ink); border-radius: 28px; padding: 22px; display: grid; gap: 18px; box-shadow: 0 30px 60px -24px rgba(7, 26, 49, 0.4); height: 100%; }
.wc-story__text { display: grid; gap: 12px; align-content: start; }
.wc-story h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.wc-story__q { font-family: var(--wc-serif); font-size: 21px; line-height: 1.3; letter-spacing: -0.005em; }
.wc-story__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-story__chips span { font-size: 12.5px; font-weight: 500; background: var(--wc-bg-2); border-radius: 8px; padding: 6px 10px; color: var(--wc-ink-2); }
.wc-story__img { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; background: #eef0f3; }
.wc-story__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wc-story__tile { display: none; }
.wc-stories__ctrls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.wc-stories__progress { display: flex; align-items: center; gap: 6px; }
.wc-stories__progress i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); transition: width 0.3s ease, background 0.3s ease; }
.wc-stories__progress i.is-on { width: 28px; background: #fff; }

/* ------------------------------------------------------------
   Tools
   ------------------------------------------------------------ */
.wc-tools { padding: 72px 0; }
.wc-tools .wc-sechead { margin-bottom: 44px; }
.wc-tiles { display: grid; gap: 12px; }
.wc-tiles__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wc-tile { width: 88px; height: 88px; border-radius: 24px; background: var(--wc-bg-2); display: grid; place-items: center; transition: transform 0.35s var(--wc-ease), background 0.2s ease; }
.wc-tile:hover { transform: translateY(-4px); background: #efece4; }
.wc-tile svg { width: 40px; height: 40px; }
.wc-tile span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wc-toolcards { display: grid; gap: 14px; margin-top: 36px; }
.wc-toolcard { position: relative; display: grid; gap: 10px; background: var(--wc-bg-2); border-radius: 24px; padding: 24px; transition: background 0.2s ease, transform 0.35s var(--wc-ease); }
.wc-toolcard:hover { background: #efece4; transform: translateY(-2px); }
.wc-toolcard__ic svg { width: 32px; height: 32px; }
.wc-toolcard__open { position: absolute; right: 20px; top: 20px; width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; color: var(--wc-ink); }
.wc-toolcard b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-top: 8px; }
.wc-toolcard p { font-size: 15.5px; line-height: 1.5; color: var(--wc-ink-2); }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.wc-faq { padding: 24px 0 72px; }
.wc-faq__grid { display: grid; gap: 28px; }

/* ------------------------------------------------------------
   Final CTA + marquee
   ------------------------------------------------------------ */
.wc-cta { padding: 72px 0 40px; overflow: hidden; }
.wc-cta .wc-sechead { margin-bottom: 48px; }
.wc-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wc-marquee__track { display: flex; gap: 16px; width: max-content; will-change: transform; animation: wc-marquee 46s linear infinite; }
.wc-marquee:hover .wc-marquee__track { animation-play-state: paused; }
@keyframes wc-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.wc-mcard { position: relative; flex: none; width: 300px; aspect-ratio: 656 / 384; border-radius: 22px; overflow: hidden; isolation: isolate; background: #e5effb; }
.wc-mcard__bg { position: absolute; inset: -12%; width: 124%; height: 124%; filter: blur(28px); }
.wc-mcard::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.35; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); pointer-events: none; }
.wc-mcard__ui { position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-3deg) scale(0.86); }
.wc-mcard__pills { position: absolute; z-index: 3; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px; }
.wc-mcard__pills b { background: #fff; color: var(--wc-ink); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; border-radius: 10px; padding: 6px 12px; line-height: 1.2; }
.wc-mcard__serif { font-family: var(--wc-serif); font-weight: 500; font-size: 18px; }
.wc-mcard__ic { position: relative; width: 34px; height: 34px; display: grid; place-items: center; color: var(--wc-ink); }
.wc-mcard__ic::before { content: ""; position: absolute; inset: 0; border-radius: 40%; background: var(--tint); box-shadow: 0 0 0 3px #fff; }
.wc-mcard__ic .wc-ico { position: relative; width: 16px; height: 16px; stroke-width: 2; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.wc-footer { padding: 24px var(--wc-gutter) calc(var(--wc-gutter) + 72px); }
.wc-footer__shell { background: var(--wc-ink); color: #fff; border-radius: var(--wc-r-shell); padding: 48px 22px 28px; }
.wc-footer__top { display: grid; gap: 40px; }
.wc-footer__statement { font-size: clamp(34px, 8vw, 60px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; max-width: 12ch; }
.wc-footer__cols { display: grid; gap: 28px; }
.wc-footer__cols div { display: grid; gap: 10px; align-content: start; }
.wc-footer__cols b { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.wc-footer__cols a { font-size: 15px; color: #b8c4d0; transition: color 0.15s ease; }
.wc-footer__cols a:hover { color: #fff; }
.wc-footer__bottom { display: grid; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px; color: #b8c4d0; }
.wc-footer__bottom .wc-brand__word { font-size: 24px; }
.wc-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   Motion states — visible by default; only html.wc-armed hides
   anything, and only until it is revealed.
   ------------------------------------------------------------ */
html.wc-armed [data-wc-rise] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.9s var(--wc-ease); transition-delay: var(--d, 0s); }
html.wc-armed [data-wc-rise].is-in { opacity: 1; transform: none; }
html.wc-armed .wc-tile[data-wc-rise] { transition-delay: calc(var(--i, 0) * 40ms); }
.wc-h1 .wc-line { display: block; overflow: hidden; }
.wc-h1 .wc-line > span { display: block; }
html.wc-armed .wc-h1:not(.is-split) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  .wc-marquee__track { animation: none; }
}

/* ------------------------------------------------------------
   Tablet and up
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root { --wc-gutter: 16px; --wc-r-shell: 48px; }
  .wc-wrap { padding: 0 32px; }
  .wc-lead { font-size: 18px; }
  .wc-header__in, .wc-float__in { padding: 0 28px; }
  .wc-header__right .wc-btn--outline { display: inline-flex; }
  .wc-hero__shell { padding: 88px 24px 24px; }
  .wc-hero__copy { gap: 24px; margin-bottom: 56px; }
  .wc-stage__panel { border-radius: 40px; padding: 40px 30px 44px; }
  .wc-mesh { filter: blur(70px); }
  .wc-tab { width: 56px; height: 56px; }
  .wc-tab__ico { width: 24px; height: 24px; }
  .wc-card { padding: 40px; border-radius: 32px; }
  .wc-card__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: center; }
  .wc-card__visual { aspect-ratio: 516 / 333; border-radius: 24px; padding: 20px; }
  .wc-phone--card { --w: 200px; top: 6%; bottom: auto; }
  .wc-card__phone { --w: 21%; }
  .wc-journey__shell { padding: 96px 32px 32px; }
  .wc-journey .wc-sechead { margin-bottom: 56px; }
  .wc-jcards { grid-template-columns: 1fr 1fr; }
  .wc-feature { padding: 96px 0; }
  .wc-feature__grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .wc-feature__visual { position: sticky; top: 96px; }
  .wc-feature--flip .wc-feature__visual { order: -1; }
  .wc-panel { border-radius: 40px; padding: 32px; }
  .wc-phone--panel { --w: 250px; }
  .wc-stories { padding: 120px 0 88px; }
  .wc-story { flex-basis: 720px; }
  .wc-story__in { grid-template-columns: 1fr 1fr; padding: 28px; gap: 24px; }
  .wc-story__img { aspect-ratio: auto; min-height: 300px; }
  .wc-tools { padding: 96px 0; }
  .wc-tile { width: 104px; height: 104px; border-radius: 28px; }
  .wc-tile svg { width: 46px; height: 46px; }
  .wc-toolcards { grid-template-columns: 1fr 1fr; }
  .wc-faq { padding: 32px 0 96px; }
  .wc-faq__grid { grid-template-columns: 1fr 1.4fr; gap: 48px; }
  .wc-cta { padding: 96px 0 56px; }
  .wc-mcard { width: 520px; border-radius: 28px; }
  .wc-mcard__ui { transform: translate(-50%, -50%) rotate(-3deg) scale(1.1); }
  .wc-mcard__pills { left: 24px; bottom: 24px; }
  .wc-mcard__pills b { font-size: 22px; padding: 8px 14px; }
  .wc-mcard__serif { font-size: 24px; }
  .wc-footer { padding-bottom: var(--wc-gutter); }
  .wc-footer__shell { padding: 72px 48px 32px; }
  .wc-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .wc-footer__bottom { grid-template-columns: auto 1fr auto; align-items: center; margin-top: 72px; padding-top: 32px; }
  .wc-footer__social { text-align: center; }
}

/* ------------------------------------------------------------
   Desktop
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root { --wc-gutter: 24px; --wc-r-shell: 64px; --wc-header-h: 68px; }
  .wc-wrap { padding: 0 48px; }
  .wc-header__in, .wc-float__in { padding: 0 40px; }
  .wc-float { left: 40px; right: 40px; top: 24px; border-radius: 24px; }
  .wc-float__in { height: 72px; padding: 0 24px; }
  .wc-nav { display: flex; }
  .wc-header__text { display: inline-block; }
  .wc-header__right .wc-btn--navy { height: 48px; padding: 0 16px; }
  .wc-burger { display: none; }
  .wc-hero__shell { padding: 120px 32px 32px; }
  .wc-hero__copy { max-width: 820px; margin-bottom: 72px; }
  .wc-hero__lead { max-width: 560px; }
  .wc-stage__panel { border-radius: 64px; padding: 48px 30px 64px; }
  .wc-mesh { filter: blur(90px); }
  .wc-stage__close { display: grid; }
  .wc-stage.is-pinned .wc-stage__panel { width: calc(100vw - 48px); max-width: none; height: calc(100vh - 48px); }
  html.wc-pin .wc-runway { height: calc(var(--wc-stage-h, 640px) + 2400px); }
  html.wc-pin .wc-stage { position: sticky; top: 24px; }
  .wc-card { padding: 48px; }
  .wc-card__panel { grid-template-columns: 320px minmax(0, 516px); gap: 64px; justify-content: center; }
  .wc-card__text { gap: 16px; }
  .wc-card__text p { font-size: 17px; }
  .wc-journey__shell { padding: 120px 48px 48px; }
  .wc-jcards { display: flex; gap: 16px; height: 560px; }
  .wc-jcard { flex: 1 1 0; min-height: 0; transition: flex-grow 0.7s var(--wc-ease), box-shadow 0.4s ease; box-shadow: none; grid-template-rows: auto 1fr; }
  .wc-jcard.is-on { flex-grow: 1.6; box-shadow: var(--wc-shadow-lift); }
  .wc-jcard__hit { display: block; }
  .wc-jcard.is-on .wc-jcard__hit { pointer-events: none; }
  .wc-jcard__text { padding: 32px 30px 12px; }
  .wc-jcard__sum { opacity: 1; transition: opacity 0.3s ease; }
  .wc-jcard__steps { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease 0.2s, max-height 0.6s var(--wc-ease); }
  .wc-jcard.is-on .wc-jcard__steps { opacity: 1; max-height: 200px; }
  .wc-jcard__art { min-height: 0; }
  .wc-jcard__art .m { opacity: 0; transform: translateY(24px) scale(0.96); }
  .wc-jcard.is-on .wc-jcard__art .m { opacity: 1; transform: none; transition-delay: 0.25s; }
  .wc-jcard:not(.is-on) .wc-jcard__art::before { opacity: 0; }
  .wc-jcard:not(.is-on) .wc-jcard__arch { opacity: 1; }
  .wc-feature { padding: 120px 0; }
  .wc-feature__grid { gap: 80px; align-items: center; }
  .wc-feature__visual { top: 120px; }
  .wc-panel { border-radius: 48px; }
  .wc-stories { padding: 160px 0 100px; }
  .wc-stories .wc-sechead { margin-bottom: 56px; }
  .wc-stories__rail { justify-content: flex-start; overflow: visible; padding: 0 48px; transition: transform 0.7s var(--wc-ease); }
  .wc-story { flex: 0 0 auto; width: 180px; transition: width 0.7s var(--wc-ease); }
  .wc-story.is-on { width: 760px; }
  .wc-story__in { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
  .wc-story.is-on .wc-story__in { opacity: 1; transition-delay: 0.25s; position: relative; }
  .wc-story__tile { display: block; position: absolute; inset: 0; background: #fff; border-radius: 24px; padding: 10px; cursor: pointer; opacity: 1; transition: opacity 0.3s ease; }
  .wc-story__tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 16px; }
  .wc-story.is-on .wc-story__tile { opacity: 0; pointer-events: none; }
  .wc-story { height: 480px; }
  .wc-story__in { height: 480px; }
  .wc-story h3 { font-size: 30px; }
  .wc-story__q { font-size: 24px; }
  .wc-stories__ctrls { margin-top: 40px; }
  .wc-tools { padding: 120px 0; }
  .wc-tools .wc-sechead { margin-bottom: 56px; }
  .wc-tiles__row { gap: 16px; }
  .wc-tile { width: 112px; height: 112px; }
  .wc-toolcards { gap: 24px; margin-top: 56px; }
  .wc-toolcard { padding: 32px; }
  .wc-faq { padding: 40px 0 120px; }
  .wc-cta { padding: 120px 0 72px; }
  .wc-cta .wc-sechead { margin-bottom: 64px; }
  .wc-mcard { width: 656px; border-radius: 32px; }
  .wc-footer__shell { padding: 96px 96px 40px; }
  .wc-footer__top { grid-template-columns: 1fr 1.2fr; gap: 64px; }
}

@media (min-width: 1280px) {
  .wc-hero__shell { padding: 120px 32px 32px; }
}

/* ============================================================
   Round 2 — the orbit of live sites, real device frames, the
   inner pages (What we do, Work, Pricing, About, Contact,
   Careers, Terms), real brand tiles, and scroll motion hooks.
   ============================================================ */

/* generic sections */
.wc-sec { padding: 64px 0; }
.wc-sec--tight { padding: 8px 0 40px; }
.wc-sec .wc-sechead { margin-bottom: 36px; }
.wc-sec--tint { padding: 8px var(--wc-gutter); }
.wc-sec--tint > .wc-wrap { max-width: none; background: var(--wc-bg-2); border-radius: var(--wc-r-shell); padding: 56px 20px; }
.wc-sec--tint > .wc-wrap > * { max-width: 1152px; margin-left: auto; margin-right: auto; }
.wc-sec--tint > .wc-wrap > .wc-sechead--center { margin-left: auto; margin-right: auto; }
.wc-btn--white { background: #fff; color: var(--wc-ink); }
.wc-btn--white:hover { background: #f1f3f6; }
.wc-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); }
.wc-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* light page hero */
.wc-phero { padding: 0 var(--wc-gutter) var(--wc-gutter); }
.wc-phero__shell { background: var(--wc-bg-2); border-radius: var(--wc-r-shell); padding: 56px 16px 40px; }
.wc-phero__copy { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 800px; margin: 0 auto; }
.wc-phero__split { display: grid; gap: 24px; margin-bottom: 40px; }
.wc-phero__split .wc-kicker { margin-bottom: 14px; }
.wc-phero__aside { display: grid; gap: 18px; align-content: end; }

/* gradient band hero */
.wc-band { padding: 0 var(--wc-gutter) var(--wc-gutter); }
.wc-band__shell { position: relative; overflow: hidden; border-radius: var(--wc-r-shell); padding: 72px 20px 64px; color: #fff; isolation: isolate; }
.wc-band__shell--blue { background: linear-gradient(135deg, #2c6ad3 0%, #4a8cf0 38%, #6fc3ea 72%, #9fa8ff 100%); }
.wc-band__shell--violet { background: linear-gradient(135deg, #3670da 0%, #6a5be6 42%, #b47ae6 78%, #f0a8d6 100%); }
.wc-band__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wc-band__mesh i { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: 0.75; }
.wc-band__mesh i:nth-child(1) { left: -12%; top: -20%; background: radial-gradient(circle, #8fd3ff, transparent 65%); }
.wc-band__mesh i:nth-child(2) { right: -15%; top: -10%; background: radial-gradient(circle, #d9b8ff, transparent 65%); }
.wc-band__mesh i:nth-child(3) { left: 20%; bottom: -35%; background: radial-gradient(circle, #7fe3d8, transparent 65%); }
.wc-band__mesh i:nth-child(4) { right: 5%; bottom: -30%; background: radial-gradient(circle, #ffc6e2, transparent 65%); }
.wc-band__copy { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 820px; margin: 0 auto; }
.wc-band__copy--left { justify-items: start; text-align: left; margin: 0; }
.wc-band .wc-h1, .wc-band .wc-lead, .wc-band .wc-kicker { color: #fff; }
.wc-band .wc-lead { color: rgba(255, 255, 255, 0.86); }
.wc-eyebrow--light { color: #fff; }
.wc-eyebrow--light .wc-eyebrow__ic { color: #fff; }

/* contact band */
.wc-contact { position: relative; z-index: 1; display: grid; gap: 28px; }
.wc-contact .wc-band__copy { order: -1; }
.wc-form { background: #fff; color: var(--wc-ink); border-radius: 28px; padding: 26px 22px 24px; display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgba(7, 26, 49, 0.5); }
.wc-form__h { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.wc-form__row { display: grid; gap: 14px; }
.wc-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--wc-ink-2); }
.wc-field input, .wc-field select, .wc-field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--wc-ink); background: #fff; border: 1px solid rgba(7, 26, 49, 0.18); border-radius: 12px; padding: 13px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.wc-field input:focus, .wc-field select:focus, .wc-field textarea:focus { outline: none; border-color: var(--wc-ink); box-shadow: 0 0 0 3px rgba(7, 26, 49, 0.08); }
.wc-field textarea { resize: vertical; min-height: 96px; }
.wc-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wc-form .wc-btn { width: 100%; margin-top: 4px; }
.wc-form__msg { font-size: 14px; color: #1f7a3a; }
.wc-form__msg[data-state="error"] { color: #b42318; }
.wc-form__note { font-size: 13.5px; line-height: 1.5; color: var(--wc-ink-2); }
.wc-form__note a { text-decoration: underline; text-underline-offset: 3px; }
.wc-form__done { display: grid; gap: 8px; padding: 12px 0; }
.wc-form__done b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }

/* lists and small components */
.wc-checks { display: grid; gap: 10px; font-size: 15.5px; color: var(--wc-ink-2); }
.wc-checks li { display: flex; align-items: flex-start; gap: 10px; }
.wc-checks .wc-ico { color: #1f7a3a; margin-top: 3px; stroke-width: 2.2; }
.wc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-badges span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--wc-bg-2); color: var(--wc-ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.wc-badges .wc-badges__type { background: var(--tint, var(--wc-sky)); color: var(--wc-ink); }
.wc-badges--tags span { background: #fff; border: 1px solid var(--wc-line); }
.wc-cards4 { display: grid; gap: 14px; }
.wc-tcard { position: relative; display: grid; gap: 10px; align-content: start; background: #fff; border: 1px solid var(--wc-line-2); border-radius: 24px; padding: 24px; transition: transform 0.35s var(--wc-ease), box-shadow 0.35s ease; }
.wc-tcard:hover { transform: translateY(-3px); box-shadow: var(--wc-shadow-lift); }
.wc-tcard__ic { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--wc-ink); }
.wc-tcard__ic::before { content: ""; position: absolute; inset: 0; border-radius: 40%; background: var(--tint); }
.wc-tcard__ic .wc-ico { position: relative; }
.wc-tcard__open { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 9px; background: var(--wc-bg-2); display: grid; place-items: center; color: var(--wc-ink); }
.wc-tcard b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-top: 6px; }
.wc-tcard p { font-size: 15px; line-height: 1.5; color: var(--wc-ink-2); }
.wc-stdgrid { display: grid; gap: 12px; }
.wc-stdtile { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--wc-line-2); border-radius: 20px; padding: 20px; font-size: 15.5px; line-height: 1.45; color: var(--wc-ink); }
.wc-stdtile__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--wc-bg-2); display: grid; place-items: center; color: var(--wc-ink); flex: none; }
.wc-stdtile p { padding-top: 8px; }
.wc-notice { background: var(--wc-bg-2); border-radius: 24px; padding: 26px; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--wc-ink-2); }
.wc-notice b { font-size: 22px; font-weight: 500; color: var(--wc-ink); letter-spacing: -0.01em; }
.wc-notice a { text-decoration: underline; text-underline-offset: 3px; color: var(--wc-ink); }
.wc-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--wc-line); }
.wc-facts > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--wc-line); }
.wc-facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-ink-2); }
.wc-facts dd { margin: 0; font-size: 18px; color: var(--wc-ink); }
.wc-facts dd a { text-decoration: underline; text-underline-offset: 3px; }
.wc-rows { display: grid; border-top: 1px solid var(--wc-line); }
.wc-row { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--wc-line); }
.wc-row__co { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.wc-row__role { font-size: 16px; color: var(--wc-ink); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wc-row__role .wc-badge { margin: 0; }
.wc-row__note { font-size: 15px; color: var(--wc-ink-2); }
.wc-steps { display: grid; gap: 0; counter-reset: step; position: relative; }
.wc-steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 14px 0; }
.wc-steps li::before { content: ""; position: absolute; left: 19px; top: 54px; bottom: -14px; width: 2px; background: var(--wc-line); }
.wc-steps li:last-child::before { display: none; }
.wc-steps__n { width: 40px; height: 40px; border-radius: 50%; background: var(--wc-ink); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.wc-steps p { font-size: 16px; line-height: 1.5; color: var(--wc-ink); padding-top: 8px; }
.wc-prose-wrap { max-width: 800px; }
.wc-prose { display: grid; gap: 18px; font-size: 16.5px; line-height: 1.6; color: var(--wc-ink); }
.wc-prose--lg { font-size: 19px; line-height: 1.55; }
.wc-prose h2 { font-size: clamp(28px, 5vw, 38px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-top: 24px; }
.wc-prose h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-top: 18px; }
.wc-prose p, .wc-prose li { color: var(--wc-ink-2); }
.wc-prose ul, .wc-prose ol { display: grid; gap: 8px; padding-left: 22px; }
.wc-prose ul { list-style: disc; }
.wc-prose ol { list-style: decimal; }
.wc-prose li::marker { color: var(--wc-ink-3); }
.wc-prose b, .wc-prose strong { color: var(--wc-ink); font-weight: 600; }
.wc-prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--wc-ink); }
.wc-prose section { display: grid; gap: 14px; }
.wc-prose section + section { margin-top: 20px; padding-top: 28px; border-top: 1px solid var(--wc-line); }
.wc-mission { display: grid; gap: 28px; align-items: center; }
.wc-mission__text { display: grid; gap: 16px; }
.wc-mission__photo { margin: 0; border-radius: 28px; overflow: hidden; background: var(--wc-bg-2); position: relative; }
.wc-mission__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.wc-mission__photo figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, 0.92); color: var(--wc-ink); font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 999px; }
.wc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wc-stat { background: #fff; border: 1px solid var(--wc-line-2); border-radius: 22px; padding: 20px; display: grid; gap: 8px; align-content: space-between; min-height: 150px; }
.wc-stat span { font-size: 14px; line-height: 1.35; color: var(--wc-ink-2); }
.wc-stat b { font-family: var(--wc-serif); font-weight: 500; font-size: clamp(44px, 9vw, 72px); line-height: 1; letter-spacing: -0.03em; color: var(--tint, var(--wc-sky)); filter: saturate(1.2) brightness(0.86); }
.wc-stat b i { font-style: normal; }

/* plans */
.wc-toggle { display: inline-flex; gap: 4px; background: var(--wc-ash); padding: 4px; border-radius: 999px; }
.wc-toggle button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--wc-ink); transition: background 0.2s ease, color 0.2s ease; }
.wc-toggle button[aria-pressed="true"] { background: var(--wc-ink); color: #fff; }
.wc-toggle .wc-badge { margin: 0; background: rgba(255, 255, 255, 0.18); color: inherit; height: 22px; }
.wc-toggle button:not([aria-pressed="true"]) .wc-badge { background: rgba(7, 26, 49, 0.08); }
.wc-plans { display: grid; gap: 14px; }
.wc-plan { position: relative; border-radius: 32px; background: #fff; border: 1px solid var(--wc-line-2); padding: 4px; }
.wc-plan--hot { background: linear-gradient(180deg, #5b8def 0%, #9b87f5 55%, #f0a8d6 100%); border-color: transparent; padding-top: 44px; }
.wc-plan__hot { position: absolute; left: 24px; top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.wc-plan__in { background: #fff; border-radius: 28px; padding: 26px 22px 24px; display: grid; gap: 12px; height: 100%; }
.wc-plan__name { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.wc-plan__tag { font-size: 15px; color: var(--wc-ink-2); line-height: 1.45; min-height: 2.9em; }
.wc-plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.wc-plan__price s { font-size: 18px; color: var(--wc-ink-3); }
.wc-plan__n { font-family: var(--wc-serif); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
.wc-plan__n--serif { font-size: 40px; }
.wc-plan__price em { font-size: 14px; color: var(--wc-ink-2); }
.wc-plan__bill { font-size: 13px; color: var(--wc-ink-3); }
.wc-plan__build { font-size: 14px; color: var(--wc-ink-2); }
.wc-plan__build s { color: var(--wc-ink-3); }
.wc-plan__build b { color: var(--wc-ink); }
.wc-plan__cta { width: 100%; margin-top: 8px; justify-content: space-between; }
.wc-plan__eta { font-size: 13px; color: var(--wc-ink-2); text-align: center; }
.wc-plan__intro { font-size: 13px; color: var(--wc-ink-3); margin-top: 8px; }
.wc-plan__list { display: grid; gap: 10px; font-size: 15px; color: var(--wc-ink); margin-top: 4px; }
.wc-plan__list li { display: flex; align-items: flex-start; gap: 10px; }
.wc-plan__list .wc-ico { color: var(--wc-ink); stroke-width: 2.2; margin-top: 3px; }
.wc-plans__note { max-width: 860px; margin: 24px auto 0; text-align: center; font-size: 14px; line-height: 1.55; color: var(--wc-ink-2); }
.wc-addons { display: grid; gap: 12px; }
.wc-addon { background: #fff; border: 1px solid var(--wc-line-2); border-radius: 20px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.wc-addon__ic { width: 38px; height: 38px; border-radius: 12px; background: var(--wc-bg-2); display: grid; place-items: center; color: var(--wc-ink); }
.wc-addon__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.wc-addon__head b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.wc-addon__price { font-size: 17px; font-weight: 500; white-space: nowrap; }
.wc-addon__price i { font-style: normal; font-size: 12.5px; color: var(--wc-ink-2); }
.wc-addon p { font-size: 14.5px; line-height: 1.5; color: var(--wc-ink-2); }
.wc-addon__inc { font-size: 12.5px; font-weight: 500; color: #1f7a3a; }
.wc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; background: #fff; border: 1px solid var(--wc-line-2); }
.wc-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.wc-table th, .wc-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--wc-line-2); vertical-align: middle; }
.wc-table thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wc-ink-2); background: var(--wc-bg-2); }
.wc-table tbody th { font-weight: 600; }
.wc-table tr.is-hot td, .wc-table tr.is-hot th { background: #f3f6fd; }
.wc-table td .wc-ico { display: inline-block; vertical-align: -3px; color: #1f7a3a; stroke-width: 2.2; margin-right: 4px; }
.wc-table s { color: var(--wc-ink-3); margin-right: 4px; }
.wc-table__hint { font-size: 13px; color: var(--wc-ink-3); margin-top: 10px; }
.wc-sitegrid { display: grid; gap: 16px; }
.wc-sitecard { background: #fff; border: 1px solid var(--wc-line-2); border-radius: 24px; overflow: hidden; display: grid; }
.wc-sitecard__shot { background: var(--wc-bg-2); padding: 20px 20px 0; }
.wc-sitecard__shot .wc-browser { max-width: none; margin: 0; border-radius: 12px 12px 0 0; }
.wc-sitecard__shot .wc-browser__screen { aspect-ratio: 16 / 9; }
.wc-sitecard__body { padding: 20px 22px 24px; display: grid; gap: 10px; }
.wc-sitecard h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.wc-sitecard p { font-size: 15px; line-height: 1.5; color: var(--wc-ink-2); }
.wc-sitecard__open { width: 34px; height: 34px; border-radius: 9px; background: var(--wc-bg-2); display: grid; place-items: center; color: var(--wc-ink); flex: none; }

/* real brand tiles */
.wc-tile img { width: 44px; height: 44px; object-fit: contain; }
.wc-tile--wide img { width: 68px; }
.wc-toolcard__ic img { width: 34px; height: 34px; object-fit: contain; }
.wc-browser__url .wc-ico { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; color: #1f7a3a; }

/* words split by JS */
.wc-w { display: inline-block; will-change: transform; }
.wc-stories__bg { background-size: 160% 160%; background-position: 0% 0%; }

@media (min-width: 768px) {
  .wc-sec { padding: 88px 0; }
  .wc-sec .wc-sechead { margin-bottom: 44px; }
  .wc-sec--tint > .wc-wrap { padding: 72px 40px; }
  .wc-phero__shell { padding: 88px 32px 56px; }
  .wc-phero__split { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; margin-bottom: 56px; }
  .wc-band__shell { padding: 110px 40px 96px; }
  .wc-band--contact .wc-band__shell { padding: 56px 40px; }
  .wc-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .wc-contact .wc-band__copy { order: 1; }
  .wc-form { padding: 32px 30px 28px; }
  .wc-form__row { grid-template-columns: 1fr 1fr; }
  .wc-cards4 { grid-template-columns: 1fr 1fr; }
  .wc-stdgrid { grid-template-columns: 1fr 1fr; }
  .wc-facts { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .wc-row { grid-template-columns: 180px 1fr 1fr; align-items: center; gap: 16px; }
  .wc-mission { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .wc-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .wc-plans { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
  .wc-plan__in { padding: 30px 26px 28px; }
  .wc-addons { grid-template-columns: 1fr 1fr; }
  .wc-sitegrid { grid-template-columns: 1fr 1fr; }
  .wc-tile img { width: 50px; height: 50px; }
  .wc-tile--wide img { width: 76px; }
}

@media (min-width: 1024px) {
  .wc-sec { padding: 120px 0; }
  .wc-sec .wc-sechead { margin-bottom: 56px; }
  .wc-sec--tint > .wc-wrap { padding: 96px 48px; }
  .wc-phero__shell { padding: 120px 32px 64px; }
  .wc-band__shell { padding: 150px 48px 130px; }
  .wc-band--contact .wc-band__shell { padding: 72px 64px; }
  .wc-contact { gap: 64px; }
  .wc-cards4 { grid-template-columns: repeat(4, 1fr); }
  .wc-stdgrid { grid-template-columns: repeat(3, 1fr); }
  .wc-facts { grid-template-columns: repeat(3, 1fr); }
  .wc-addons { grid-template-columns: repeat(3, 1fr); }
  .wc-sitegrid { grid-template-columns: repeat(3, 1fr); }
  .wc-plans { gap: 20px; }
  .wc-plan__n { font-size: 64px; }
}


/* ============================================================
   Round 3 — the work showcase moves up (laptop + phone, crisp 2x
   shots), the film goes full-bleed with the curved caps, and the
   app demo is the real portal on its own tokens (wsp-*).
   ============================================================ */

/* showcase devices inside the story cards */
.sc-devs { position: relative; container-type: inline-size; padding: 6% 0 10%; }
.sc-lap { position: relative; width: 90%; }
.sc-lap__lid { position: relative; background: #17181c; border-radius: 12px 12px 3px 3px; padding: 7px 7px 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -24px rgba(7, 26, 49, 0.5); }
.sc-lap__lid::before { content: ""; position: absolute; top: 2px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #2a2b30; transform: translateX(-50%); }
.sc-lap__screen { aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; background: #fff; position: relative; }
.sc-lap__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sc-lap__base { position: relative; height: 8px; margin: 0 -3%; background: linear-gradient(180deg, #e9ebef, #c3c6cd); border-radius: 0 0 9px 9px; box-shadow: 0 8px 18px -8px rgba(7, 26, 49, 0.4); }
.sc-lap__base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 14%; height: 3px; background: #a4a8b1; border-radius: 0 0 5px 5px; }
.sc-ph { --w: 36cqw; position: absolute; right: 0; bottom: 0; width: var(--w); aspect-ratio: 9 / 19.5; border-radius: calc(var(--w) * 0.165); background: #0c0d10; padding: calc(var(--w) * 0.028); box-shadow: inset 0 0 0 1.5px #3a3b40, 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 34px 60px -22px rgba(7, 26, 49, 0.6); z-index: 2; }
.sc-ph::before { content: ""; position: absolute; z-index: 4; top: calc(var(--w) * 0.055); left: 50%; transform: translateX(-50%); width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.08); border-radius: 999px; background: #000; }
.sc-ph__screen { position: absolute; inset: calc(var(--w) * 0.028); border-radius: calc(var(--w) * 0.14); overflow: hidden; background: #fff; }
.sc-ph__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wc-story__devs { display: block; }

/* the app feature panel: same frames, the real portal inside */
.wc-app-devs { position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-48%); container-type: inline-size; }
.wc-app-devs .sc-lap { width: 88%; }
.wc-app-devs .sc-lap__screen { background: #f4f4fb; }
.wc-app-devs .sc-ph { --w: 32cqw; right: -1%; bottom: -6%; transform: rotate(3deg); }

/* the film, full-bleed, with the curved caps of its neighbours */
.wc-film { position: relative; padding: 0; }
.wc-film__runway { position: relative; }
.wc-film__runway::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 56px; background: var(--wc-bg); border-radius: 0 0 var(--wc-r-shell) var(--wc-r-shell); pointer-events: none; }
.wc-film__runway::after { content: ""; position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; height: 56px; background: var(--wc-bg); border-radius: var(--wc-r-shell) var(--wc-r-shell) 0 0; pointer-events: none; }
html.wc-film-on .wc-film__runway { height: 480vh; }
.wc-film__shell { position: relative; overflow: hidden; color: #fff; isolation: isolate; min-height: 680px; background: linear-gradient(135deg, #7fb6ff 0%, #4a86e8 30%, #7c5cff 60%, #e9a3ff 100%); }
.wc-film__shell::before { content: ""; position: absolute; inset: -20%; z-index: 0; background: radial-gradient(50% 50% at 20% 20%, rgba(255, 255, 255, 0.35), transparent 60%), radial-gradient(40% 40% at 80% 30%, rgba(255, 200, 250, 0.5), transparent 60%), radial-gradient(50% 50% at 60% 90%, rgba(120, 170, 255, 0.6), transparent 60%); filter: blur(40px); }
html.wc-film-on .wc-film__shell { position: sticky; top: 0; height: 100vh; min-height: 0; }
.wc-film__in { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: center; justify-items: center; gap: 14px; padding: 84px 16px 40px; }
.wc-film__stage { order: 1; }
.wc-film__mobilecap { order: 2; }
.wc-film__progress { order: 3; }
.wc-film__caps { display: none; }
.wc-film .wc-kicker { color: rgba(255, 255, 255, 0.82); }
.wc-film .wc-h2 { color: #fff; }
.wc-film__mobilecap { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-align: center; max-width: 30ch; }
.wc-film__stage { display: grid; place-items: center; }
.wc-phone--film { --w: 300px; box-shadow: inset 0 0 0 1.5px #4a4b50, 0 2px 0 rgba(255, 255, 255, 0.08) inset, 0 60px 120px -30px rgba(7, 26, 49, 0.7); }
.wc-film__progress { display: flex; gap: 6px; }
.wc-film__progress i { width: 26px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.32); transition: background 0.3s ease; }
.wc-film__progress i.is-on { background: #fff; }
.wc-tap { position: absolute; z-index: 60; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(27, 27, 46, 0.2); border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: 0 6px 18px rgba(7, 26, 49, 0.3); opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------
   The Websly portal, on its own tokens (portal.css, verbatim)
   ------------------------------------------------------------ */
@font-face { font-family: "Archivo"; src: url("./assets/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("./assets/fonts/Marcellus-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.wsp { --wsp-ground: #F4F4FB; --wsp-card: #FFFFFF; --wsp-ink: #1B1B2E; --wsp-ink-60: #4E4E63; --wsp-ink-40: #82829B; --wsp-line: #E4E4F0; --wsp-action: #2456C4; --wsp-action-hi: #3D6EDB; --wsp-action-tint: #E7EDFA; --wsp-data: #8E661C; --wsp-data-tint: #F8F3E6; --wsp-data-2: #4F46E5; --wsp-gold: #B8862B; --wsp-ok: #40694B; --wsp-ok-tint: #EDF2EC; --wsp-warn: #96521F; --wsp-warn-tint: #F6EEE3; --wsp-err: #9C3038; --wsp-err-tint: #F7EAEA; --wsp-r-card: 16px; --wsp-r-control: 12px; --wsp-shadow-card: 0 1px 2px rgba(26, 29, 35, 0.04), 0 8px 24px rgba(26, 29, 35, 0.07); --wsp-shadow-raised: 0 2px 4px rgba(26, 29, 35, 0.06), 0 14px 34px rgba(26, 29, 35, 0.10); --wsp-pad: 22px; --wsp-gap: 18px; --wsp-ease: cubic-bezier(0.16, 1, 0.3, 1); --wsp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; color: var(--wsp-ink); background: var(--wsp-ground); -webkit-font-smoothing: antialiased; }
.wsp * { box-sizing: border-box; margin: 0; }
.wsp p, .wsp h1 { margin: 0; }
.wsp-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wsp-ico--sm { width: 16px; height: 16px; }
.wsp-ico--xs { width: 14px; height: 14px; }
.wsp-tnum { font-variant-numeric: tabular-nums; letter-spacing: 0.005em; }
.wsp-fit { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--fit, 1)); overflow: hidden; }
.wsp-fit--phone { width: 390px; height: var(--fit-h, 844px); }
.wsp-fit--desk { width: 1280px; height: var(--fit-h, 800px); }
/* phone status bar, then the header under it */
.wsp-status { position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 31; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 30px 4px; background: var(--wsp-card); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--wsp-ink); }
.wsp-status__r { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 3px; }
.wsp-status__r i { width: 4px; height: 10px; border-radius: 1px; background: var(--wsp-ink); }
.wsp-status__r i:first-child { height: 7px; }
.wsp-status__r b { width: 22px; height: 11px; border: 1.5px solid var(--wsp-ink); border-radius: 3px; margin-left: 3px; box-shadow: inset 0 0 0 2px var(--wsp-card), inset 0 0 0 20px var(--wsp-ink); }
.wsp-fit--phone .wsp-hd { top: 44px; }
.wsp-fit--phone .wsp-screens { top: 111px; }
/* header */
.wsp-hd { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 67px; border-bottom: 1px solid var(--wsp-line); background: var(--wsp-card); padding: 0 22px; }
.wsp-hd__mark { font-family: "Marcellus", "Times New Roman", serif; font-size: 18px; line-height: 28px; color: var(--wsp-gold); flex: none; }
.wsp-hd__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; }
.wsp-hd__ic { width: 40px; height: 40px; display: grid; place-items: center; color: var(--wsp-ink-60); flex: none; }
.wsp-hd__ic .wsp-ico { width: 20px; height: 20px; }
.wsp-hd__out { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--wsp-ink-60); padding: 0 4px; flex: none; }
/* screens */
.wsp-screens { position: absolute; left: 0; right: 0; top: 67px; bottom: 0; }
.wsp-screen { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateX(14px); transition: opacity 0.35s ease, transform 0.45s var(--wsp-ease); pointer-events: none; }
.wsp-screen.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wsp-main { display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 110px; }
.wsp-main--qa { padding-bottom: 170px; }
.wsp-h1row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wsp-h1 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; color: var(--wsp-ink); }
.wsp-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--wsp-ink-40); }
.wsp-h1__right { flex: none; }
.wsp-label { font-size: 11.5px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; color: var(--wsp-ink-40); }
.wsp-label--60 { color: var(--wsp-ink-60); }
.wsp-label--sec { padding: 0 4px; }
.wsp-card { background: var(--wsp-card); border: 1px solid var(--wsp-line); border-radius: var(--wsp-r-card); box-shadow: var(--wsp-shadow-card); }
.wsp-cc { padding: var(--wsp-pad); }
.wsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wsp-gap); }
.wsp-tile { display: flex; flex-direction: column; gap: 10px; padding: var(--wsp-pad); height: 100%; min-width: 0; }
.wsp-tile__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wsp-tile__top .wsp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-ictile { width: 34px; height: 34px; border-radius: var(--wsp-r-control); display: grid; place-items: center; flex: none; }
.wsp-ictile--action { background: var(--wsp-action-tint); color: var(--wsp-action); }
.wsp-ictile--data { background: var(--wsp-data-tint); color: var(--wsp-data); }
.wsp-ictile--ok { background: var(--wsp-ok-tint); color: var(--wsp-ok); }
.wsp-ictile--warn { background: var(--wsp-warn-tint); color: var(--wsp-warn); }
.wsp-tile__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.wsp-tile__v { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--wsp-ink); }
.wsp-tile__xl { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--wsp-ink); }
.wsp-tile__link { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--wsp-action); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-tile__s { font-size: 12px; line-height: 16px; color: var(--wsp-ink-40); }
.wsp-tile__s--warn { color: var(--wsp-warn); font-weight: 500; font-size: 14px; line-height: 20px; }
.wsp-tile__s2 { font-size: 14px; line-height: 20px; color: var(--wsp-ink-60); }
.wsp-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--wsp-ok); }
.wsp-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wsp-hr { border: 0; border-top: 1px solid var(--wsp-line); margin: 2px 0; }
.wsp-tile__hb { display: flex; align-items: center; gap: 12px; }
.wsp-hb { width: 56px; height: 12px; flex: none; stroke: var(--wsp-ok); }
.wsp-hb__sweep { animation: wsp-hb 2.4s linear infinite; }
@keyframes wsp-hb { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
.wsp-glow { position: relative; border-radius: var(--wsp-r-card); }
.wsp-glow::before { content: ""; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--pd-a, 0deg), #2456c4, #b8862b, #4f46e5, #2456c4); animation: pd-spin 3.5s linear infinite; }
.wsp-glow > .wsp-tile { position: relative; height: 100%; }
@keyframes pd-spin { to { --pd-a: 360deg; } }
@property --pd-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.wsp-today { display: flex; flex-direction: column; gap: 10px; }
.wsp-today__list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.wsp-today__list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 14px; line-height: 20px; color: var(--wsp-ink); border-top: 1px solid var(--wsp-line); }
.wsp-today__list li:first-child { border-top: 0; }
.wsp-today__list .wsp-ico { color: var(--wsp-ink-40); }
.wsp-trust { padding: 0 4px; font-size: 12px; line-height: 16px; color: var(--wsp-ink-40); }
.wsp-note { display: flex; align-items: center; gap: 12px; padding: 22px; font-size: 16px; line-height: 24px; color: var(--wsp-ink-40); }
.wsp-note .wsp-ico { color: var(--wsp-ink-40); }
/* phone tabs */
.wsp-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--wsp-line); background: var(--wsp-card); padding-bottom: 10px; }
.wsp-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 0; font-size: 10px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--wsp-ink-60); transition: color 0.2s ease; }
.wsp-tab .wsp-ico { width: 21px; height: 21px; }
.wsp-tab b { font-weight: 600; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.wsp-tab.is-on { color: var(--wsp-gold); }
.wsp-tab.is-on .wsp-ico { stroke-width: 2.1; }
.wsp-tabs__pill { position: absolute; top: 4px; left: calc(var(--i, 0) * 20% + 6px); width: calc(20% - 12px); height: 42px; border-radius: 999px; background: var(--wsp-action-tint); transition: left 0.38s var(--wsp-ease-spring); }
/* buttons, badges, inputs */
.wsp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--wsp-r-control); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; background: var(--wsp-action); color: #fff; }
.wsp-btn--lg { height: 48px; padding: 0 24px; }
.wsp-btn--sm { height: 36px; padding: 0 12px; font-size: 12px; }
.wsp-btn--ic { width: 36px; padding: 0; }
.wsp-btn--full { width: 100%; }
.wsp-btn--ghost { border: 1px solid var(--wsp-line); background: var(--wsp-card); color: var(--wsp-ink); }
.wsp-btn--outline { border: 1px solid var(--wsp-line); background: transparent; color: var(--wsp-ink); flex: 1; }
.wsp-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 10.5px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; white-space: nowrap; transition: opacity 0.3s ease; }
.wsp-badge--default { background: var(--wsp-action-tint); color: var(--wsp-action); }
.wsp-badge--ok { background: var(--wsp-ok-tint); color: var(--wsp-ok); }
.wsp-badge--warn { background: var(--wsp-warn-tint); color: var(--wsp-warn); }
.wsp-badge--muted { background: var(--wsp-ground); color: var(--wsp-ink-60); }
.wsp-input { position: relative; display: flex; align-items: center; min-height: 44px; border-radius: var(--wsp-r-control); border: 1px solid var(--wsp-line); background: var(--wsp-ground); padding: 10px 12px; font-size: 16px; line-height: 24px; color: var(--wsp-ink); }
.wsp-input--tall { min-height: 96px; align-items: flex-start; background: var(--wsp-card); }
.wsp-input__ph { position: absolute; left: 12px; top: 10px; color: var(--wsp-ink-40); font-style: normal; transition: opacity 0.2s ease; }
.wsp-input.is-typing .wsp-input__ph { opacity: 0; }
.wsp-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--wsp-action); vertical-align: -0.15em; margin-left: 1px; opacity: 0; animation: m-blink 1s steps(2) infinite; }
.wsp-input.is-typing .wsp-caret, .wsp-input--tall .wsp-caret { opacity: 1; }
/* tasks */
.wsp-seg { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; border-radius: 999px; background: var(--wsp-ground); padding: 4px; }
.wsp-seg__b { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--wsp-ink-60); }
.wsp-seg__b.is-on { background: var(--wsp-card); color: var(--wsp-action); box-shadow: var(--wsp-shadow-card); }
.wsp-seg__b em { font-style: normal; display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--wsp-action); color: #fff; font-size: 10px; }
.wsp-sec { display: flex; flex-direction: column; gap: 8px; }
.wsp-sec > .wsp-label { padding: 0 2px; }
.wsp-task { display: flex; align-items: center; gap: 12px; padding: var(--wsp-pad); }
.wsp-task__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.wsp-task__t { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--wsp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-task.is-done .wsp-task__t { color: var(--wsp-ink-40); text-decoration: line-through; }
.wsp-task__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; }
.wsp-stage { display: inline-flex; align-items: center; gap: 4px; color: var(--wsp-ink-60); }
.wsp-stage i { width: 6px; height: 6px; border-radius: 50%; background: var(--wsp-ink-40); }
.wsp-stage--action i { background: var(--wsp-action); } .wsp-stage--action { color: var(--wsp-action); }
.wsp-stage--ok i { background: var(--wsp-ok); } .wsp-stage--ok { color: var(--wsp-ok); }
.wsp-due { color: var(--wsp-ink-40); }
.wsp-due--warn { color: var(--wsp-warn); }
.wsp-check { width: 44px; height: 44px; border-radius: var(--wsp-r-control); border: 2px solid var(--wsp-line); background: var(--wsp-card); display: grid; place-items: center; color: transparent; flex: none; transition: background 0.25s var(--wsp-ease-spring), border-color 0.25s ease; }
.wsp-check .wsp-ico { width: 20px; height: 20px; stroke-width: 2.5; }
.wsp-task.is-done .wsp-check { background: var(--wsp-action); border-color: var(--wsp-action); color: #fff; }
.wsp-qa { position: absolute; left: 0; right: 0; bottom: 66px; z-index: 35; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--wsp-line); background: var(--wsp-card); padding: var(--wsp-pad); box-shadow: var(--wsp-shadow-raised); }
.wsp-qa__row { display: flex; align-items: center; gap: 8px; }
.wsp-qa__row .wsp-input { flex: 1; }
.wsp-qa__add { width: 44px; height: 44px; border-radius: 50%; background: var(--wsp-action); color: #fff; display: grid; place-items: center; flex: none; }
/* leads */
.wsp-lead { display: flex; flex-direction: column; gap: 12px; padding: var(--wsp-pad); }
.wsp-lead__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wsp-lead__when { font-size: 12px; line-height: 16px; color: var(--wsp-ink-40); }
.wsp-lead__who { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--wsp-ink); }
.wsp-lead__src { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--wsp-ink-40); margin-top: -6px; }
.wsp-lead__msg { font-size: 14px; line-height: 20px; color: var(--wsp-ink-60); }
.wsp-lead__acts { display: flex; gap: var(--wsp-gap); padding-top: 4px; }
.wsp-bubble { align-self: flex-end; max-width: 88%; background: var(--wsp-action); color: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14px; line-height: 20px; opacity: 0; }
.wsp-new { overflow: hidden; }
/* money */
.wsp-owed { display: flex; flex-direction: column; gap: 12px; }
.wsp-owed__row { display: flex; align-items: flex-start; gap: 12px; min-height: 60px; border-top: 1px solid var(--wsp-line); padding: 8px 0; }
.wsp-owed__row:first-of-type { border-top: 0; padding-top: 0; }
.wsp-owed__l { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--wsp-ink); }
.wsp-owed__h { font-size: 12px; line-height: 16px; color: var(--wsp-ink-60); }
.wsp-owed__v { margin-left: auto; flex: none; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--wsp-ink); }
.wsp-inv { display: flex; flex-direction: column; gap: 6px; padding: var(--wsp-pad); }
.wsp-inv__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wsp-inv__no { font-size: 14px; line-height: 20px; font-weight: 700; }
.wsp-inv__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.wsp-inv__amt { font-size: 16px; line-height: 24px; font-weight: 700; }
.wsp-inv__who { font-size: 14px; line-height: 20px; color: var(--wsp-ink-60); }
.wsp-inv__job { font-size: 12px; line-height: 16px; color: var(--wsp-ink-40); }
/* calendar */
.wsp-cal { display: flex; flex-direction: column; gap: 12px; }
.wsp-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wsp-cal__head > p { font-size: 14px; line-height: 20px; font-weight: 600; }
.wsp-cal__nav { display: flex; align-items: center; gap: 4px; }
.wsp-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10.5px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; color: var(--wsp-ink-40); padding-bottom: 4px; }
.wsp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.wsp-cal__cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 44px; border-radius: var(--wsp-r-control); padding: 4px 0; color: var(--wsp-ink); }
.wsp-cal__cell.is-out { color: rgba(130, 130, 155, 0.6); }
.wsp-cal__cell.is-sel { background: var(--wsp-action-tint); }
.wsp-cal__cell b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wsp-cal__cell b.is-today { background: var(--wsp-action); color: #fff; font-weight: 700; }
.wsp-cal__dots { display: flex; align-items: center; gap: 2px; height: 6px; }
.wsp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wsp-ink); flex: none; }
.wsp-dot--action { background: var(--wsp-action); } .wsp-dot--ok { background: var(--wsp-ok); } .wsp-dot--data { background: var(--wsp-data); }
.wsp-day { display: flex; flex-direction: column; gap: 4px; padding: var(--wsp-pad); }
.wsp-day__t { font-size: 14px; line-height: 20px; font-weight: 600; padding: 0 12px 4px; }
.wsp-ev { display: flex; align-items: center; gap: 12px; min-height: 48px; border-radius: var(--wsp-r-control); padding: 8px 12px; }
.wsp-ev .wsp-dot { width: 8px; height: 8px; }
.wsp-ev > span { display: flex; flex-direction: column; min-width: 0; }
.wsp-ev b { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-ev em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--wsp-ink-40); }
/* sheets, overlay, toast */
.wsp-overlay { position: absolute; inset: 0; z-index: 45; background: rgba(27, 27, 46, 0.4); opacity: 0; pointer-events: none; }
.wsp-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; gap: 16px; background: var(--wsp-card); border-top: 1px solid var(--wsp-line); border-radius: var(--wsp-r-card) var(--wsp-r-card) 0 0; box-shadow: var(--wsp-shadow-raised); padding: var(--wsp-pad) var(--wsp-pad) 34px; transform: translateY(110%); }
.wsp-sheet__x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--wsp-ink-60); }
.wsp-sheet__t { font-size: 16px; line-height: 24px; font-weight: 600; padding-right: 40px; }
.wsp-sheet__s { font-size: 14px; line-height: 20px; color: var(--wsp-ink-60); margin-top: -8px; }
.wsp-lines { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--wsp-line); padding-top: 12px; }
.wsp-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; color: var(--wsp-ink); }
.wsp-line b { color: var(--wsp-ink); font-weight: 600; }
.wsp-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--wsp-line); padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--wsp-ink-60); }
.wsp-total b { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--wsp-ink); }
.wsp-toast { position: absolute; z-index: 55; left: 22px; right: 22px; bottom: 90px; display: flex; align-items: center; gap: 10px; background: var(--wsp-ink); color: #fff; border-radius: var(--wsp-r-control); padding: 12px 14px; font-size: 14px; line-height: 20px; box-shadow: var(--wsp-shadow-raised); opacity: 0; transform: translateY(12px); }
.wsp-toast .wsp-ico { color: #9fd3ad; }
/* desktop */
.wsp-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.wsp-layer.is-on { opacity: 1; }
.wsp-desk { display: grid; grid-template-columns: 236px 1fr; height: 100%; background: var(--wsp-ground); }
.wsp-rail { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--wsp-line); background: var(--wsp-card); padding: 12px; height: 100%; overflow: hidden; }
.wsp-rail__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--wsp-r-control); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--wsp-ink-60); }
.wsp-rail__item.is-on { background: var(--wsp-action-tint); color: var(--wsp-action); font-weight: 600; }
.wsp-rail__foot { margin-top: auto; border-top: 1px solid var(--wsp-line); padding: 14px 12px 4px; }
.wsp-desk__main { position: relative; min-width: 0; overflow: hidden; }
.wsp-desk__main .wsp-hd { position: relative; height: 66px; padding: 0 22px; }
.wsp-desk__content { padding: 0; }
.wsp-desk__content .wsp-main { padding: 22px 30px 30px; max-width: 900px; }
.wsp-desk__content .wsp-grid2 { grid-template-columns: repeat(4, 1fr); }
.wsp-desk__content .wsp-grid2 .wsp-tile--site { grid-column: span 2; }
.wsp-desk__content .wsp-grid2 .wsp-glow { grid-column: span 2; }
.wsp-desk__content .wsp-main--qa { padding-bottom: 30px; }
.wsp-desk__content .wsp-h1 { font-size: 26px; }

@media (min-width: 768px) {
  .sc-devs { padding: 4% 0 8%; }
  .wc-app-devs .sc-lap { width: 86%; }
}
@media (min-width: 1024px) {
  html.wc-film-on .wc-film__runway { height: 520vh; }
  .wc-film__in { grid-template-columns: minmax(280px, 1fr) auto; grid-template-rows: 1fr auto; column-gap: 64px; padding: 48px 96px 40px; justify-items: stretch; }
  .wc-film__caps { order: 0; }
  .wc-film__stage { order: 1; }
  .wc-film__caps { display: grid; gap: 20px; align-content: center; max-width: 460px; }
  .wc-film__caps .wc-h2 { margin-bottom: 8px; }
  .wc-film__cap { display: grid; gap: 5px; opacity: 0.38; transition: opacity 0.45s ease, transform 0.45s var(--wc-ease); transform: translateX(-6px); }
  .wc-film__cap.is-on { opacity: 1; transform: none; }
  .wc-film__cap b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
  .wc-film__cap span { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
  .wc-film__mobilecap { display: none; }
  .wc-film__stage { justify-self: end; }
  .wc-film__progress { grid-column: 1 / -1; justify-self: center; }
}

/* the app feature panel holds the devices, not a centred card */
.wc-panel--devices { display: block; padding: 0; aspect-ratio: 5 / 6; }
.wc-story__foot { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
.wc-story__foot > b { font-size: 15px; font-weight: 600; color: var(--wc-ink); }
.wc-story__open { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--wc-ink); border-bottom: 1px solid var(--wc-line); padding-bottom: 2px; }
.wc-stories__rail .wc-story__in { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .wc-panel--devices { aspect-ratio: 1; }
  .wc-stories__rail .wc-story__in { grid-template-columns: 1fr 1.15fr; align-items: center; }
}
.wc-showcase__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wc-showcase__row h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.wc-sitecard__open { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wc-bg-2); color: var(--wc-ink); flex: none; }

/* ============================================================
   Round 4: pages scroll inside every device (hold, then steps),
   the hero's phone steps aside, the site editor in the film,
   three marks to toggle, and the manifest-driven showcase.
   ============================================================ */
[data-wc-scroller] { overflow: hidden; }
[data-wc-scroller] > img { display: block; width: 100%; height: auto; object-fit: initial; will-change: transform; }
.sc-lap__screen > img, .sc-ph__screen > img, .wc-story__tile img { height: auto; object-fit: initial; }
.wc-story__tile { overflow: hidden; }
.wc-story__tile img { height: auto; min-height: 100%; }
.wc-card__visual--site { display: flex; align-items: center; justify-content: space-between; gap: 3%; padding: 20px; }
.wc-card__visual--site .wc-browser { flex: 0 0 74%; width: 74%; max-width: none; margin: 0; align-self: center; }
.wc-card__visual--site .wc-card__phone { position: relative; flex: 0 0 auto; top: auto; right: auto; bottom: auto; left: auto; transform: none; --w: 18%; width: 18%; min-width: 66px; }
.wc-card__visual--site .wc-phone__screen { background: #fff; }
/* the site editor screen */
.wsp-screen--editor { z-index: 42; background: var(--wsp-ground); }
.wsp-editor { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.wsp-editor__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 52px; padding: 0 14px 0 18px; background: var(--wsp-ink); color: #fff; font-size: 13px; font-weight: 600; flex: none; }
.wsp-editor__live { display: inline-flex; align-items: center; gap: 8px; }
.wsp-editor__live i { width: 8px; height: 8px; border-radius: 50%; background: #9fd3ad; box-shadow: 0 0 0 3px rgba(159, 211, 173, 0.25); }
.wsp-editor__bar .wsp-btn { background: #fff; color: var(--wsp-ink); height: 34px; }
.wsp-site { flex: 1; overflow: hidden; font-family: "Geist", "Archivo", system-ui, sans-serif; color: #12213a; background: #fff; }
.wsp-site__nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 10px; }
.wsp-site__nav span { display: flex; flex-direction: column; }
.wsp-site__nav b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.wsp-site__nav em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7a90; }
.wsp-site__lang { flex-direction: row !important; gap: 6px; align-items: center; border: 1px solid #e3e8ef; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.wsp-site__lang i { font-style: normal; color: #c3ccd8; }
.wsp-site__notice { margin: 4px 22px 18px; background: #dff5d8; color: #1f4d2b; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; line-height: 1.35; }
.wsp-site__notice b { font-weight: 700; }
.wsp-site__hero { padding: 0 22px; }
.wsp-site__h1 { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 12px; }
.wsp-site__h1 b { color: #d63384; font-weight: 800; }
.wsp-site__edit { position: relative; display: inline; border-radius: 6px; box-shadow: 0 0 0 0 rgba(36, 86, 196, 0); transition: box-shadow 0.25s ease, background 0.25s ease; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wsp-site__edit.is-editing { background: rgba(36, 86, 196, 0.08); box-shadow: 0 0 0 2px var(--wsp-action); }
.wsp-site__edit .wsp-caret { height: 0.9em; background: var(--wsp-action); opacity: 0; animation: none; vertical-align: -0.08em; }
.wsp-site__edit.is-editing .wsp-caret { opacity: 1; animation: m-blink 1s steps(2) infinite; }
.wsp-site__p { font-size: 15px; line-height: 1.5; color: #4b5a70; margin: 0 0 16px; }
.wsp-site__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wsp-site__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: #12213a; color: #fff; font-size: 14px; font-weight: 700; }
.wsp-site__link { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: #12213a; }
.wsp-site__band { display: flex; align-items: center; gap: 4px; margin: 26px 22px 0; padding: 14px 16px; border-radius: 14px; background: #f5f7fa; font-size: 12px; color: #4b5a70; }
.wsp-site__band i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; margin-right: -8px; background: #c5affe; }
.wsp-site__band i:nth-child(2) { background: #88e7e1; } .wsp-site__band i:nth-child(3) { background: #ffc6bd; margin-right: 10px; }
.wsp-editor__hint { position: absolute; left: 22px; right: 22px; bottom: 26px; background: var(--wsp-ink); color: #fff; border-radius: var(--wsp-r-control); padding: 12px 14px; font-size: 14px; line-height: 20px; text-align: center; box-shadow: var(--wsp-shadow-raised); opacity: 0; transform: translateY(12px); }
/* the marks: colour through variables so one symbol serves the header, the footer and the picker */
.wc-brand__mark { --mk-tile: #071a31; --mk-ink: #fff; --mk-lime: #dbee9f; --mk-cut: #fcfbf8; }
.wc-brand--light .wc-brand__mark { --mk-tile: #fcfbf8; --mk-ink: #071a31; --mk-lime: #b9d85a; --mk-cut: #071a31; }
.wc-marks { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; align-items: center; gap: 4px; padding: 5px 8px 5px 10px; border-radius: 999px; background: rgba(7, 26, 49, 0.9); color: #fff; box-shadow: 0 10px 30px -10px rgba(7, 26, 49, 0.6); backdrop-filter: blur(8px); }
.wc-marks__lab { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; margin-right: 4px; opacity: 0.8; }
.wc-marks__btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid transparent; background: transparent; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.wc-marks__btn svg { width: 24px; height: 24px; --mk-tile: #fcfbf8; --mk-ink: #071a31; --mk-lime: #9cc23a; --mk-cut: #071a31; }
.wc-marks__btn.is-on { border-color: #dbee9f; background: rgba(255, 255, 255, 0.08); }
.wc-marks__btn:hover { background: rgba(255, 255, 255, 0.12); }
@media (min-width: 768px) {
  .wc-card__visual--site .wc-card__phone { --w: 17%; width: 17%; }
}
@media (min-width: 1024px) {
  html.wc-film-on .wc-film__runway { height: 600vh; }
}
html.wc-film-on .wc-film__runway { height: 560vh; }
@media print { .wc-marks { display: none; } }
.wc-sitecard__type { font-size: 14px; font-weight: 600; color: var(--wc-ink); margin: -2px 0 2px; }
@media (min-width: 1024px) {
  .wc-h1 { text-wrap: pretty; }
  .wc-card__visual--site .wc-browser { flex-basis: 70%; width: 70%; }
  .wc-card__visual--site .wc-card__phone { --w: 22%; width: 22%; }
}

/* ============================================================
   Round 5: one device system for the whole site (dv-*), the
   pages scroll by scrollTop so phones cope, the laptop opens on
   arrival, ten marks and ten wordmarks behind one picker.
   Every length inside a device is a container-query unit of
   the .dv-set it sits in, so the geometry is identical at any
   size: MacBook bezel 2.2cqw, iPhone bezel 3% of its width.
   ============================================================ */
.dv-set { position: relative; width: 100%; container-type: inline-size; padding-bottom: 7cqw; }
.dv-set--solo { padding-bottom: 3cqw; }

/* ---- MacBook ---- */
.dv-mac { position: relative; width: 100%; z-index: 1; }
.dv-mac__lid { position: relative; height: 64.15cqw; border-radius: 3.4cqw 3.4cqw 1.2cqw 1.2cqw; background: linear-gradient(180deg, #2c2d33 0%, #17181c 55%, #111216 100%); box-shadow: inset 0 0 0 0.32cqw #3d3f46, inset 0 0.22cqw 0 rgba(255, 255, 255, 0.14), 0 2.2cqw 3.6cqw -1.2cqw rgba(7, 26, 49, 0.42); transform-origin: 50% 100%; transform-style: preserve-3d; backface-visibility: hidden; }
.dv-mac__lid::before { content: ""; position: absolute; z-index: 4; top: 0.32cqw; left: 50%; width: 13cqw; height: 2.3cqw; transform: translateX(-50%); background: #101114; border-radius: 0 0 1.3cqw 1.3cqw; }
.dv-mac__lid::after { content: ""; position: absolute; z-index: 5; top: 1.15cqw; left: 50%; width: 0.7cqw; height: 0.7cqw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #3a4250, #0a0c10 70%); }
.dv-mac__screen { position: absolute; inset: 2.2cqw; border-radius: 1.5cqw; overflow: hidden; background: #fff; isolation: isolate; }
.dv-mac__screen::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 46%); }
.dv-mac__menu { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2.2cqw; background: #f6f6f8; border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: space-between; padding: 0 1.6cqw 0 1.8cqw; font: 500 1.05cqw/1 "Geist", system-ui, sans-serif; color: #2b2d33; letter-spacing: 0.01em; }
.dv-mac__menu span { display: inline-flex; gap: 1.5cqw; }
.dv-mac__menu span b { font-weight: 700; }
.dv-mac__menu em { font-style: normal; display: inline-flex; gap: 1.1cqw; }
.dv-mac__tool { position: absolute; z-index: 3; top: 2.2cqw; left: 0; right: 0; height: 4.3cqw; background: #eeeef1; border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.8cqw; }
.dv-mac__lights { display: inline-flex; gap: 0.75cqw; flex: none; }
.dv-mac__lights i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.08cqw rgba(0, 0, 0, 0.12); }
.dv-mac__lights i:nth-child(2) { background: #febc2e; }
.dv-mac__lights i:nth-child(3) { background: #28c840; }
.dv-mac__nav { display: inline-flex; gap: 0.9cqw; color: #a1a3ab; font-size: 1.3cqw; }
.dv-mac__url { flex: 1; max-width: 46cqw; margin: 0 auto; height: 2.7cqw; border-radius: 0.8cqw; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); display: flex; align-items: center; justify-content: center; gap: 0.7cqw; font: 500 1.25cqw/1 "Geist", system-ui, sans-serif; color: #3d3f46; }
.dv-mac__url i { width: 0.9cqw; height: 1.1cqw; border: 0.14cqw solid #8a8d95; border-radius: 0.25cqw; border-top-width: 0.3cqw; }
.dv-mac__page { position: absolute; top: 6.5cqw; left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
.dv-mac--bare .dv-mac__menu, .dv-mac--bare .dv-mac__tool { display: none; }
.dv-mac--bare .dv-mac__page { top: 0; }
.dv-mac__page > img { display: block; width: 100%; height: auto; }
.dv-mac__base { position: relative; z-index: 2; height: 2.4cqw; margin: 0 -3.4cqw; border-radius: 0.5cqw 0.5cqw 2.2cqw 2.2cqw; background: linear-gradient(180deg, #eef0f3 0%, #d9dbe1 48%, #b6b9c2 100%); box-shadow: inset 0 0.3cqw 0 #9fa2ab, 0 0.9cqw 1.4cqw -0.5cqw rgba(7, 26, 49, 0.35); }
.dv-mac__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15cqw; height: 0.95cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #a3a6ae, #cfd2d9); }
.dv-mac__shadow { position: absolute; z-index: 0; left: 2cqw; right: 2cqw; bottom: -2.2cqw; height: 5cqw; border-radius: 50%; background: radial-gradient(52% 55% at 50% 42%, rgba(7, 26, 49, 0.36), rgba(7, 26, 49, 0) 72%); filter: blur(1.6cqw); }
.dv-mac--persp { perspective: 180cqw; }

/* ---- iPhone ---- */
.dv-iphone { --P: 30cqw; position: absolute; z-index: 3; right: -1.5cqw; bottom: 0; width: var(--P); aspect-ratio: 9 / 19.5; border-radius: calc(var(--P) * 0.165); background: linear-gradient(155deg, #45474d 0%, #202126 38%, #121316 100%); padding: calc(var(--P) * 0.03); box-shadow: inset 0 0 0 calc(var(--P) * 0.012) #5a5c63, inset 0 0 0 calc(var(--P) * 0.02) #0c0d10, 0 calc(var(--P) * 0.14) calc(var(--P) * 0.26) calc(var(--P) * -0.06) rgba(7, 26, 49, 0.55), 0 calc(var(--P) * 0.02) calc(var(--P) * 0.05) rgba(7, 26, 49, 0.25); }
.dv-iphone::before { content: ""; position: absolute; z-index: 7; top: calc(var(--P) * 0.06); left: 50%; width: calc(var(--P) * 0.29); height: calc(var(--P) * 0.082); transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px #16171a; }
.dv-iphone__btn { position: absolute; width: calc(var(--P) * 0.022); background: linear-gradient(90deg, #2a2b30, #45474d 50%, #2a2b30); border-radius: calc(var(--P) * 0.01); }
.dv-iphone__btn--mute { left: calc(var(--P) * -0.02); top: 17%; height: 4.2%; }
.dv-iphone__btn--up { left: calc(var(--P) * -0.02); top: 25%; height: 7.4%; }
.dv-iphone__btn--down { left: calc(var(--P) * -0.02); top: 34.2%; height: 7.4%; }
.dv-iphone__btn--power { right: calc(var(--P) * -0.02); top: 27%; height: 11.5%; }
.dv-iphone__screen { position: absolute; inset: calc(var(--P) * 0.03); border-radius: calc(var(--P) * 0.138); overflow: hidden; background: #fff; isolation: isolate; }
.dv-iphone__status { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: calc(var(--P) * 0.118); background: #fff; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 calc(var(--P) * 0.075) calc(var(--P) * 0.016) calc(var(--P) * 0.085); font: 600 calc(var(--P) * 0.04)/1 "Geist", system-ui, sans-serif; color: #101114; letter-spacing: -0.01em; }
.dv-iphone__status i { display: inline-flex; align-items: flex-end; gap: calc(var(--P) * 0.014); margin-right: calc(var(--P) * 0.02); }
.dv-iphone__status i b { width: calc(var(--P) * 0.011); background: #101114; border-radius: 1px; height: calc(var(--P) * 0.02); }
.dv-iphone__status i b:nth-child(2) { height: calc(var(--P) * 0.027); }
.dv-iphone__status i b:nth-child(3) { height: calc(var(--P) * 0.034); }
.dv-iphone__status i b:nth-child(4) { height: calc(var(--P) * 0.041); }
.dv-iphone__status em { width: calc(var(--P) * 0.066); height: calc(var(--P) * 0.032); border: calc(var(--P) * 0.006) solid #101114; border-radius: calc(var(--P) * 0.012); box-shadow: inset 0 0 0 calc(var(--P) * 0.005) #fff, inset 0 0 0 calc(var(--P) * 0.05) #101114; }
.dv-iphone__page { position: absolute; top: calc(var(--P) * 0.118); left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
.dv-iphone--app .dv-iphone__status { display: none; }
.dv-iphone--app .dv-iphone__page { top: 0; }
.dv-iphone__page > img { display: block; width: 100%; height: auto; }
.dv-iphone__page > .wsp, .dv-mac__page > .wsp { position: absolute; }

/* ---- the compositions ---- */
.dv-set--card .dv-mac { width: 100%; }
.dv-set--card .dv-iphone { --P: 31cqw; right: -1cqw; bottom: 0; }
.dv-set--hero { width: 90%; margin: 0 auto; }
.dv-set--hero .dv-iphone { --P: 29cqw; right: -6cqw; bottom: 0; }
.dv-set--app .dv-mac { width: 100%; }
.dv-set--app .dv-iphone { --P: 32cqw; right: -3cqw; bottom: -2cqw; }
.wc-card__visual--site { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 6% 5% 7%; }
.wc-card__visual--site .dv-set { align-self: center; }
.wc-app-devs { position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%); container-type: normal; }
.wc-story__devs .dv-set { padding-bottom: 5cqw; }
.wc-sitecard__shot .dv-set { padding-bottom: 5cqw; }

/* the old story-card devices are gone; keep the tile images tall */
.sc-devs { display: none; }

/* ---- the film / stage / panel phones share the iPhone look ---- */
.wc-phone { background: linear-gradient(155deg, #45474d 0%, #202126 38%, #121316 100%); box-shadow: inset 0 0 0 calc(var(--w) * 0.012) #5a5c63, inset 0 0 0 calc(var(--w) * 0.02) #0c0d10, 0 calc(var(--w) * 0.14) calc(var(--w) * 0.26) calc(var(--w) * -0.06) rgba(7, 26, 49, 0.55); }
.wc-phone::before { width: calc(var(--w) * 0.29); height: calc(var(--w) * 0.082); top: calc(var(--w) * 0.06); background: #000; box-shadow: inset 0 0 0 1px #16171a; }
.wc-phone .dv-iphone__btn { --P: var(--w); }
.wc-phone--film { box-shadow: inset 0 0 0 calc(var(--w) * 0.012) #5a5c63, inset 0 0 0 calc(var(--w) * 0.02) #0c0d10, 0 60px 120px -30px rgba(7, 26, 49, 0.7); }

/* ---- wordmark variants ---- */
.wc-brand__word { position: relative; display: inline-block; isolation: isolate; --wd-lime: #dbee9f; --wd-ink: #93b83a; }
.wc-brand--light .wc-brand__word { --wd-ink: #dbee9f; }
.wc-brand__word .wc-l { font-style: normal; position: relative; }
.wc-word__web, .wc-word__sly { position: relative; display: inline-block; }
.wc-word__swoosh { display: none; position: absolute; left: -3%; width: 106%; bottom: -0.34em; height: 0.34em; fill: none; stroke: var(--wd-ink); stroke-width: 7; stroke-linecap: round; }

/* ---- the picker: one round button, a panel with two rows ---- */
.wc-marks { display: none; }
.wc-lp { position: fixed; left: 12px; bottom: 12px; z-index: 90; font-family: "Geist", system-ui, sans-serif; }
.wc-lp__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 0; background: rgba(7, 26, 49, 0.92); color: #fff; font: 600 12px/1 "Geist", system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(7, 26, 49, 0.6); backdrop-filter: blur(8px); }
.wc-lp__btn svg { width: 28px; height: 28px; --mk-tile: #fcfbf8; --mk-ink: #071a31; --mk-lime: #9cc23a; --mk-cut: #071a31; }
.wc-lp__panel { position: absolute; left: 0; bottom: 48px; width: min(92vw, 400px); padding: 12px 12px 10px; border-radius: 18px; background: rgba(7, 26, 49, 0.96); color: #fff; box-shadow: 0 20px 50px -16px rgba(7, 26, 49, 0.7); backdrop-filter: blur(10px); display: none; }
.wc-lp.is-open .wc-lp__panel { display: block; }
.wc-lp__lab { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; margin: 4px 0 6px 4px; }
.wc-lp__row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.wc-lp__m { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 2px solid transparent; background: rgba(255, 255, 255, 0.06); cursor: pointer; padding: 0; }
.wc-lp__m svg { width: 24px; height: 24px; --mk-tile: #fcfbf8; --mk-ink: #071a31; --mk-lime: #9cc23a; --mk-cut: #071a31; }
.wc-lp__w { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 12px/1 "Geist", system-ui, sans-serif; cursor: pointer; }
.wc-lp__m.is-on, .wc-lp__w.is-on { border-color: #dbee9f; background: rgba(255, 255, 255, 0.12); }
.wc-lp__m:hover, .wc-lp__w:hover { background: rgba(255, 255, 255, 0.14); }
.wc-lp__hint { font-size: 11px; opacity: 0.65; margin: 2px 4px 0; }
@media print { .wc-lp { display: none; } }

/* ============================================================
   Round 6: hand-drawn wordmark strokes + a separate lettering
   colour, ten new marks, a hand-drawn icon set behind a toggle,
   Calendly-style badges, sans headings on the feature sections.
   ============================================================ */
/* wordmark: strokes (data-wc-word) and lettering colour (data-wc-ink) are independent */
.wc-brand__word .wc-l { position: relative; display: inline-block; }
.wc-word__web, .wc-word__sly { position: relative; display: inline-block; }
.wc-st { position: absolute; display: none; pointer-events: none; fill: var(--wd-lime); overflow: visible; }
.wc-st--line { fill: none; stroke: var(--wd-lime); stroke-linecap: round; stroke-linejoin: round; }
.wc-st--e { left: -0.03em; width: 1.06em; bottom: -0.3em; height: 0.3em; }
.wc-st--web { left: -0.02em; width: 1.04em; bottom: -0.3em; height: 0.3em; }
.wc-st--web-hl { left: -0.08em; width: 1.16em; top: 0.06em; height: 1.02em; z-index: -1; }
.wc-st--web-ring { left: -0.14em; width: 1.28em; top: -0.12em; height: 1.34em; }
.wc-st--word { left: -3%; width: 106%; bottom: -0.34em; height: 0.36em; }
.wc-st--sly { left: -0.02em; width: 1.04em; bottom: -0.3em; height: 0.3em; }
.wc-st--sly-hl { left: -0.08em; width: 1.16em; top: 0.06em; height: 1.02em; z-index: -1; }
.wc-st--e, .wc-st--web, .wc-st--web-hl, .wc-st--web-ring, .wc-st--sly, .wc-st--sly-hl { width: calc(100% + 0.08em); }
.wc-st--web-hl, .wc-st--sly-hl { width: calc(100% + 0.16em); }
.wc-st--web-ring { width: calc(100% + 0.28em); }
[data-wc-word="1"] .wc-st--1, [data-wc-word="2"] .wc-st--2, [data-wc-word="3"] .wc-st--3, [data-wc-word="4"] .wc-st--4, [data-wc-word="5"] .wc-st--5, [data-wc-word="6"] .wc-st--6, [data-wc-word="7"] .wc-st--7, [data-wc-word="8"] .wc-st--8, [data-wc-word="9"] .wc-st--9, [data-wc-word="10"] .wc-st--10 { display: block; }
[data-wc-ink="1"] .wc-l--e, [data-wc-ink="2"] .wc-word__web, [data-wc-ink="3"] .wc-word__sly, [data-wc-ink="4"] .wc-l--w, [data-wc-ink="5"] .wc-l--y { color: var(--wd-ink); }
.wc-brand--light .wc-st { --wd-lime: rgba(219, 238, 159, 0.85); }
/* the old round-5 wordmark rules are superseded: neutralise them */
[data-wc-word="2"] .wc-word__web::after, [data-wc-word="3"] .wc-l--e::after, [data-wc-word="5"] .wc-word__sly::after, [data-wc-word="6"] .wc-word__web::before { content: none; }
[data-wc-word="4"] .wc-l--e, [data-wc-word="8"] .wc-l--y, [data-wc-word="10"] .wc-l--w { color: inherit; }
[data-wc-word="7"] .wc-l--w, [data-wc-word="7"] .wc-l--e { background: none; padding: 0; margin: 0; border-radius: 0; }
[data-wc-word="9"] .wc-word__swoosh { display: none; }
[data-wc-ink="1"] .wc-l--e, [data-wc-ink="2"] .wc-word__web, [data-wc-ink="3"] .wc-word__sly, [data-wc-ink="4"] .wc-l--w, [data-wc-ink="5"] .wc-l--y { color: var(--wd-ink); }

/* badges: the Calendly shape (a tinted rounded square, the icon inside, a short bold label) */
.wc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--wc-ink); letter-spacing: -0.005em; }
.wc-eyebrow__ic { width: 30px; height: 30px; border-radius: 9px; background: var(--tint, #dbe7ff); display: grid; place-items: center; color: var(--wc-ink); flex: none; }
.wc-eyebrow__ic .wc-ico { width: 17px; height: 17px; stroke-width: 1.9; }
.wc-eyebrow--light { color: #fff; }
.wc-eyebrow--light .wc-eyebrow__ic { color: #fff; }
/* the hand-drawn icons: a touch heavier, rounded, no square corners */
html[data-wc-icons="hand"] .wc-ico[data-wc-ico-swap] { stroke-width: 1.85; }
html[data-wc-icons="hand"] .wc-tab__ico[data-wc-ico-swap] { stroke-width: 1.8; }

/* feature-section headings: the sans, not the serif */
.wc-feature .wc-h2-serif { font-family: "Geist", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.028em; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; }

/* the editing phone in the hero's fourth tab */
.wc-card__visual--edit { padding: 0; }
.wc-editphone { --w: 200px; }

/* picker rows */
.wc-lp__panel { width: min(94vw, 440px); max-height: 74vh; overflow: auto; }
.wc-lp__w--sm { min-width: 30px; height: 30px; padding: 0 7px; font-size: 11px; }
.wc-lp__row--tight { gap: 3px; }

/* round 7: a bigger film caption on phones, a centred banner with a pill button, and no stray lime on the footer wordmark */
.wc-film__mobilecap { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; max-width: 24ch; }
.wc-film__mobilecap span { display: block; font-size: 15px; font-weight: 400; letter-spacing: 0; opacity: 0.86; margin-top: 6px; }
.wc-announce { padding: 8px 44px; }
.wc-announce__link { justify-content: center; text-align: center; flex-wrap: wrap; gap: 8px 12px; }
.wc-announce__link b { background: var(--wc-ink); color: #fff; border-radius: 999px; padding: 6px 12px 6px 14px; font-size: 13px; line-height: 1; }
.wc-announce__link b .wc-ico { width: 14px; height: 14px; }
.wc-brand--light .wc-l { background: none; }
/* the wordmark never wraps; in the floating pill on small phones the mark stands alone so the longer navbar button fits */
.wc-brand__word { white-space: nowrap; }
.wc-brand { white-space: nowrap; }
@media (max-width: 480px) {
  .wc-float .wc-brand__word { display: none; }
  .wc-header__right .wc-btn--sm { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   Round 8: the About photo ring + employer marks, the stat toggle,
   compact add-on cards with a detail modal, the Bookings page.
   ============================================================ */
/* About: a blue-to-violet ring around the headshot, the three marks along its foot */
.wc-mission__photo { position: relative; border-radius: 28px; padding: 5px; background: linear-gradient(135deg, #7fb6ff 0%, #4a86e8 30%, #7c5cff 62%, #e9a3ff 100%); box-shadow: 0 30px 60px -28px rgba(7, 26, 49, 0.45); overflow: visible; }
.wc-mission__photo img { display: block; width: 100%; height: auto; border-radius: 24px; background: #fff; }
.wc-mission__photo figcaption { position: absolute; left: 18px; bottom: 74px; background: rgba(7, 26, 49, 0.82); color: #fff; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.wc-mission__marks { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.wc-mission__marks span { flex: 1; display: grid; place-items: center; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 20px -10px rgba(7, 26, 49, 0.4); backdrop-filter: blur(6px); padding: 0 10px; }
.wc-mission__marks img { max-width: 100%; max-height: 22px; width: auto; height: auto; display: block; }
.wc-mission__marks b { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.wc-mark-deloitte { color: #000; } .wc-mark-deloitte i { display: inline-block; width: 0.32em; height: 0.32em; border-radius: 50%; background: #86bc25; margin-left: 1px; vertical-align: 0.02em; }
.wc-mark-natwest { color: #42145f; } .wc-mark-wtw { color: #7f35b2; letter-spacing: 0.02em; }
/* the toggleable About stat */
.wc-stat[data-wc-stat] { position: relative; }

/* Pricing: compact 1:1 add-on cards, three to a row on every screen.
   No price shown on the card itself (D119-adjacent, 2026-08-26: Akram wants
   the tile to sell the icon/title/animation, price lives in the Details
   modal only) — nine cards now (domains removed, the three social-media
   tiers collapsed into one), so a bit more room per card than the old 12. */
.wc-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wc-addon { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--wc-line); box-shadow: 0 1px 2px rgba(7, 26, 49, 0.04); cursor: pointer; text-align: left; font: inherit; color: var(--wc-ink); transition: transform 0.25s var(--wc-ease), box-shadow 0.25s ease, border-color 0.25s ease; }
.wc-addon:hover, .wc-addon:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(7, 26, 49, 0.35); border-color: #cfd8e3; outline: none; }
.wc-addon__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--tint, #e2ecfb); display: grid; place-items: center; color: var(--wc-ink); flex: none; }
.wc-addon__ic .wc-ico { width: 21px; height: 21px; }
.wc-addon__head { display: contents; }
.wc-addon__head b { font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.wc-addon > p, .wc-addon__inc { display: none; }
.wc-addon__more { font-size: 12px; font-weight: 600; color: var(--wc-ink-2); display: inline-flex; align-items: center; gap: 3px; }
.wc-addon__more .wc-ico { width: 12px; height: 12px; }
@media (min-width: 768px) {
  .wc-addons { gap: 18px; }
  .wc-addon { padding: 22px; border-radius: 22px; }
  .wc-addon__head b { font-size: 19px; }
  .wc-addon__ic { width: 50px; height: 50px; border-radius: 14px; }
  .wc-addon__ic .wc-ico { width: 25px; height: 25px; }
}
@media (min-width: 1024px) { .wc-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; } }
/* the modal */
.wc-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-end; justify-content: center; padding: 0; }
.wc-modal.is-open { display: flex; }
.wc-modal__bg { position: absolute; inset: 0; background: rgba(7, 26, 49, 0.55); backdrop-filter: blur(4px); }
.wc-modal__card { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 28px 28px 0 0; padding: 26px 22px 30px; box-shadow: 0 -20px 60px -20px rgba(7, 26, 49, 0.5); transform: translateY(24px); opacity: 0; transition: transform 0.35s var(--wc-ease), opacity 0.3s ease; max-height: 88vh; overflow: auto; }
.wc-modal.is-open .wc-modal__card { transform: none; opacity: 1; }
.wc-modal__x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wc-bg-2); border: 0; cursor: pointer; color: var(--wc-ink); }
.wc-modal__ic { width: 44px; height: 44px; border-radius: 14px; background: var(--tint, #e2ecfb); display: grid; place-items: center; margin-bottom: 14px; }
.wc-modal__ic .wc-ico { width: 22px; height: 22px; }
.wc-modal__t { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; }
.wc-modal__price { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.wc-modal__price i { font-style: normal; font-weight: 500; color: var(--wc-ink-2); font-size: 14px; }
.wc-modal__p { font-size: 15px; line-height: 1.55; color: var(--wc-ink-2); margin: 0 0 12px; }
.wc-modal__inc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1f6b3a; background: #e6f6ea; border-radius: 999px; padding: 6px 12px; margin-bottom: 16px; }
.wc-modal__acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 768px) {
  .wc-modal { align-items: center; padding: 24px; }
  .wc-modal__card { border-radius: 28px; padding: 30px 30px 32px; }
}
html.wc-modal-open { overflow: hidden; }

/* Bookings page */
.wc-book { display: grid; gap: 28px; }
.wc-book__card { background: #fff; border: 1px solid var(--wc-line); border-radius: 28px; padding: 22px; box-shadow: 0 2px 4px rgba(7, 26, 49, 0.04), 0 24px 60px -28px rgba(7, 26, 49, 0.3); }
.wc-book__embed { min-height: 520px; border-radius: 20px; overflow: hidden; background: var(--wc-bg-2); position: relative; }
.wc-book__embed iframe { width: 100%; min-height: 620px; border: 0; display: block; background: #fff; }
.wc-book__placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
.wc-book__placeholder .m { width: 100%; max-width: 360px; }
.wc-book__placeholder p { font-size: 13px; color: var(--wc-ink-2); margin-top: 14px; }
.wc-book__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wc-book__meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--wc-bg-2); border-radius: 999px; padding: 7px 12px; }
.wc-book__meta .wc-ico { width: 15px; height: 15px; }
.wc-book__steps { display: grid; gap: 12px; margin-top: 8px; }
.wc-book__step { display: flex; gap: 12px; align-items: flex-start; }
.wc-book__step i { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--tint, #e2ecfb); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; }
.wc-book__step b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.wc-book__step p { font-size: 14px; color: var(--wc-ink-2); line-height: 1.5; }
@media (min-width: 1024px) {
  .wc-book { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
  .wc-book__card { padding: 28px; }
}
.wc-modal__inc[hidden] { display: none; }
.wc-mission__marks img { max-height: 20px; }
.wc-mission__marks span { padding: 0 8px; }
/* the employer marks are plain logos, not the headshot: size them by height and never round or stretch them */
.wc-mission__photo .wc-mission__marks img { width: auto; height: 20px; max-width: 100%; border-radius: 0; object-fit: contain; display: block; }
.wc-mission__marks span { overflow: hidden; }
/* lettering option: l and y together */
[data-wc-ink="6"] .wc-l--l, [data-wc-ink="6"] .wc-l--y { color: var(--wd-ink); }
/* footer social icons */
.wc-footer__social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background 0.2s ease, transform 0.25s var(--wc-ease); }
.wc-social:hover { background: var(--wc-lime, #dbee9f); color: var(--wc-ink); transform: translateY(-2px); }
.wc-social svg { width: 18px; height: 18px; fill: currentColor; }
.wc-mission__marks span { display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.wc-mission__photo .wc-mission__marks img { width: 100%; height: 20px; max-width: none; object-fit: contain; }

/* ============================================================
   /start: the intake as a one-question-at-a-time card on the site
   ============================================================ */
.wc-h1--sm { font-size: clamp(34px, 7vw, 56px); }
.wc-start__grid { display: grid; gap: 28px; }
.wc-start__copy .wc-checks { margin-top: 18px; }
.wc-start__card { position: relative; background: #fff; border: 1px solid var(--wc-line); border-radius: 28px; padding: 22px 20px 24px; box-shadow: 0 2px 4px rgba(7, 26, 49, 0.04), 0 24px 60px -28px rgba(7, 26, 49, 0.3); }
.wc-start__bar { height: 6px; border-radius: 999px; background: var(--wc-bg-2); overflow: hidden; }
.wc-start__bar i { display: block; height: 100%; width: 14%; border-radius: 999px; background: linear-gradient(90deg, #c5e06a, #dbee9f); transition: width 0.5s var(--wc-ease); }
.wc-start__count { margin: 12px 0 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wc-ink-2); }
.wc-start__steps { position: relative; min-height: 220px; }
.wc-start__step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.wc-start__step.is-on { display: block; animation: wc-step-in 0.4s var(--wc-ease); }
@keyframes wc-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wc-start__q { display: block; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--wc-ink); margin: 0 0 14px; }
.wc-start__q em { font-style: normal; font-size: 15px; font-weight: 400; color: var(--wc-ink-2); }
.wc-start__input { width: 100%; font: inherit; font-size: 18px; padding: 16px 16px; border-radius: 14px; border: 1.5px solid var(--wc-line); background: var(--wc-bg); color: var(--wc-ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.wc-start__input:focus { border-color: var(--wc-ink); box-shadow: 0 0 0 4px rgba(219, 238, 159, 0.55); }
.wc-start__input--tall { min-height: 130px; resize: vertical; }
.wc-start__input.is-bad { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12); }
.wc-start__hint { margin: 10px 2px 0; font-size: 14px; color: var(--wc-ink-2); }
.wc-start__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.wc-start__pill { position: relative; }
.wc-start__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wc-start__pill span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--wc-line); background: var(--wc-bg); font-size: 16px; font-weight: 500; color: var(--wc-ink); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--wc-ease); }
.wc-start__pill input:checked + span { background: var(--wc-ink); border-color: var(--wc-ink); color: #fff; }
.wc-start__pill input:focus-visible + span { box-shadow: 0 0 0 4px rgba(219, 238, 159, 0.7); }
.wc-start__pill span:hover { transform: translateY(-1px); }
.wc-start__review { margin: 0; display: grid; gap: 10px; }
.wc-start__review div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; background: var(--wc-bg-2); }
.wc-start__review dt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wc-ink-2); grid-column: 1; }
.wc-start__review dd { margin: 0; font-size: 16px; color: var(--wc-ink); grid-column: 1; overflow-wrap: anywhere; }
.wc-start__review button { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: inherit; font-size: 13px; font-weight: 600; color: var(--wc-ink); background: #fff; border: 1px solid var(--wc-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.wc-start__nav { display: flex; gap: 10px; margin-top: 22px; }
.wc-start__nav .wc-btn--lg { flex: 1; justify-content: center; }
.wc-start__foot { margin: 14px 2px 0; font-size: 13px; color: var(--wc-ink-2); }
.wc-start__foot a { color: var(--wc-ink); text-decoration: underline; text-underline-offset: 3px; }
.wc-start__done { text-align: center; padding: 30px 8px; }
.wc-start__done .wc-eyebrow__ic { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 16px; }
.wc-start__done .wc-eyebrow__ic .wc-ico { width: 26px; height: 26px; }
.wc-start__done h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.wc-start__done p { color: var(--wc-ink-2); font-size: 16px; line-height: 1.5; }
.wc-form__msg[data-state="error"] { color: #b3261e; }
@media (min-width: 768px) { .wc-start__card { padding: 30px 28px 30px; } .wc-start__q { font-size: 28px; } }
@media (min-width: 1024px) { .wc-start__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; } .wc-start__copy { position: sticky; top: 110px; } }
.wc-btn[hidden], .wc-start__nav [hidden] { display: none !important; }